/* ==========================================================================
   TAMBERN — Designsystem „Papiertüte"
   --------------------------------------------------------------------------
   Eigenes Stylesheet der Marktplatz-Oberfläche. Bewusst NICHT in
   YRoute.Shared.Components/wwwroot/css/tailwind.generated.css eingebaut: die
   Datei wird von allen yRoute-Apps geteilt (Cartavo, Portal, Konfigurator);
   die TAMBERN-Marke dort hineinzuschreiben würde in fremde Oberflächen lecken.

   ZWEI LEITREGELN, die fast jede Entscheidung darunter erklären:

   1. FARBE GEHÖRT DEM WEG. Preise stehen immer in Tinte, normal gewichtet,
      nie farbig und nie größer als der Produktname. Farbe trägt ausschließlich
      die Nähe. Damit trägt schon der erste Blick die Kernaussage.

   2. GERECHNET WIRD IN WEGEN, NICHT IN KILOMETERN. Die Hauptangabe ist
      „6 Minuten zu Fuß" — eine Zeitangabe ist eine Entscheidung, eine
      Distanz nur eine Zahl. Siehe Proximity.cs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   Zwei Stimmen mit klaren Rollen: die Serifenschrift erzählt (Überschriften,
   Warennamen, Erzeugertexte), die Sans bedient (Navigation, Knöpfe, Zahlen).
   Beide sind lizenzpflichtig und werden SELBST GEHOSTET — DSGVO: nie
   fonts.googleapis/gstatic. Bis die Lizenzdateien vorliegen, tragen die
   Ersatzstapel die Gestalt; bei der Serifenschrift ist der Abstand zum
   Original groß, weil dort der Strichkontrast die halbe Wirkung macht.
   -------------------------------------------------------------------------- */
/*
@font-face {
    font-family: "Tambern Titel";
    src: url("fonts/tambern-titel-400.woff2") format("woff2");
    font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
    font-family: "Tambern Text";
    src: url("fonts/tambern-text-400.woff2") format("woff2");
    font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
    font-family: "Tambern Text";
    src: url("fonts/tambern-text-600.woff2") format("woff2");
    font-weight: 600; font-display: swap; font-style: normal;
}
*/

:root {
    --t-titel: "Tambern Titel", "Tiempos Headline", "Iowan Old Style", Georgia,
               "Book Antiqua", "Palatino Linotype", serif;
    --t-text: "Tambern Text", "Untitled Sans", "Segoe UI", system-ui, -apple-system,
              "Helvetica Neue", Arial, sans-serif;

    /* ----------------------------------------------------------------------
       2. Farbwelt
       Fünf Grundfarben, daraus alles Weitere. Kraft handelt, Blatt zeigt Nähe,
       Tinte schreibt, Siegel gehört allein der Marke.
       ---------------------------------------------------------------------- */
    --t-tinte: #241C12;        /* Schrift, Konturen */
    --t-kraft: #B0763C;        /* Marke + Handlung */
    --t-blatt: #4C6B33;        /* Nähe */
    --t-pergament: #E3D6C0;    /* warme Fläche */
    --t-papier: #FDFAF4;       /* Seitengrund */

    /* Siegel — die zusätzliche Farbe. Gemessen 5,39:1 gegen den Grund (Kraft
       lag bei 3,45), als Kontur wie als Fläche. Gegen Tinte trennt sie nur mit
       2,8:1, also über den Farbton — Siegel und Tinte dürfen nirgends als zwei
       feine Linien direkt aneinander liegen.
       STRENGE REGEL: Siegel erscheint ausschließlich im Bildzeichen und im
       Exclusive-Stempel. Nie in Zuständen, nie neben einem Stufen-Anhänger,
       nie als Schriftfarbe im Fließtext. Grund: Siegel und Blatt haben mit
       1,02:1 fast dieselbe Helligkeit — nebeneinander flimmern sie, in
       Graustufen und für rot-grün-blinde Nutzer sind sie identisch. */
    --t-siegel: #B23A22;
    --t-siegel-tief: #8E2C17;

    /* Abgeleitet */
    --t-flaeche: #FFFDF8;      /* erhöhte Fläche — kein reines Weiß, das wirkt kalt */
    --t-flaeche-tief: #F8F3E9;
    --t-linie: #E7DCC8;        /* warme Trennlinie statt kaltem Grau */
    --t-linie-stark: #CFBE9E;

    /* Rand von EINGABEFELDERN, und das ist wieder eine Messung: --t-linie-stark
       erreicht gegen die Flaeche nur 1,79:1. Bei einem Knopf ist das
       hinnehmbar — dort sagt die Beschriftung, dass man klicken kann. Bei einem
       leeren Textfeld ist der Rand das EINZIGE Zeichen, dass dort etwas
       eingegeben wird; WCAG 1.4.11 verlangt dafuer 3:1. Dieser Ton haelt den
       Farbton von linie-stark und klaert 3:1 gegen alle drei hellen Gruende
       (Flaeche 3,27 / Papier 3,19 / Flaeche-tief 3,00). */
    --t-feldrand: #A68952;
    --t-tinte-soft: #5C4F3E;   /* Sekundärtext */
    --t-tinte-fein: #6E6152;   /* Tertiärtext, Meta — geprüft ≥ 4,5:1 auf Papier */

    /* Kraft in zwei Rollen, und das ist eine Messung, kein Geschmack:
       #B0763C erreicht als SCHRIFT nur 3,66:1 und als Fläche mit Papierschrift
       ebenfalls nur 3,66:1 — beides unter WCAG AA. Der helle Ton bleibt deshalb
       die Identitätsfarbe für Tints, Ränder und die gestrichelte Ortskontur;
       alles, was Text ist oder Text trägt, nimmt --t-kraft-stark (5,0:1). */
    --t-kraft-stark: #94612E;
    --t-kraft-hover: #7C5124;
    --t-kraft-aktiv: #6A4520;
    --t-kraft-tint: #F3E7D3;
    --t-blatt-hover: #3C5628;
    --t-blatt-tint: #E8EEDF;

    /* Semantik — entsättigt, damit sie den Weg nie überschreit. Fehler nutzt
       das tiefe Siegel: zwei verschiedene Rottöne im selben Produkt lesen sich
       als Versehen, nicht als System. */
    --t-hinweis: #8A5F1B;
    --t-stop: var(--t-siegel-tief);

    /* ----------------------------------------------------------------------
       3. Nähe-Staffel
       Fünf Stufen in der Sprache des Konzepts: wie kommt es nach Hause?
       ZWEI Tokens je Stufe, und das ist kein Luxus: eine fünfstufige Rampe,
       die als SCHRIFTFARBE auf Papier durchgehend 4,5:1 erreicht, gibt es
       nicht — die hellen Stufen wären unlesbar. Deshalb trägt jede Stufe eine
       Fläche (--t-stufe) und eine Schriftfarbe darauf (--t-stufe-auf). Als
       reine Schriftfarbe auf Papier sind nur die Stufen 1–3 zugelassen.
       ---------------------------------------------------------------------- */
    /* DREI Werte je Stufe, nicht zwei — die Trennung ist damit im Token
       erzwungen statt nur in der Doku beschrieben:
         --t-sN      Fläche (Anhänger, Kartenpin)
         --t-sN-auf  Schrift AUF dieser Fläche
         --t-sN-txt  Schrift auf Papier — für die helleren Stufen ein eigener,
                     abgedunkelter Wert, weil #C3CDB2 als Schriftfarbe nur
                     1,5:1 erreicht. Alle fünf txt-Werte liegen ≥ 4,88:1.
       Stufe 3 wurde von #6E8A52 auf #5C7643 abgedunkelt: der alte Wert kam mit
       Papierschrift nur auf 3,72:1. */
    --t-s1: #2F4A1F;  --t-s1-auf: #FDFAF4;  --t-s1-txt: #2F4A1F;  /* Zu Fuß */
    --t-s2: #4C6B33;  --t-s2-auf: #FDFAF4;  --t-s2-txt: #4C6B33;  /* Mit dem Rad */
    --t-s3: #5C7643;  --t-s3-auf: #FDFAF4;  --t-s3-txt: #5C7643;  /* Eine Fahrt */
    --t-s4: #C3CDB2;  --t-s4-auf: #24301A;  --t-s4-txt: #4A5A3C;  /* Weiter weg */
    --t-s5: #D9D2C4;  --t-s5-auf: #2E2A22;  --t-s5-txt: #5C4F3E;  /* Kommt mit der Post */

    /* Ein Radius für alles — Papier knickt, es rundet nicht. */
    --t-r: 6px;
    --t-r-klein: 3px;
    --t-r-pill: 999px;

    --t-schatten-hover: 0 5px 18px -8px rgba(36, 28, 18, .22);
    --t-schatten-float: 0 14px 40px -14px rgba(36, 28, 18, .3);

    --t-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   4. Grundlage
   -------------------------------------------------------------------------- */
.t-app {
    font-family: var(--t-text);
    background: var(--t-papier);
    color: var(--t-tinte);
    -webkit-font-smoothing: antialiased;
}

/* Eigener box-sizing-Reset, bewusst auf .t-app begrenzt. Ohne ihn hing die
   Marke am Preflight der geteilten tailwind.generated.css: .t-shell rechnete
   dann max-width PLUS Innenabstand und die Seite scrollte waagerecht. Ein
   Designsystem darf nicht davon abhängen, dass ein fremdes Stylesheet vor ihm
   geladen wurde — die Begrenzung auf .t-app hält es umgekehrt von anderen
   yRoute-Oberflächen fern. */
.t-app, .t-app *, .t-app *::before, .t-app *::after { box-sizing: border-box; }

.t-shell { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .t-shell { padding-inline: 34px; } }

/* Typo-Skala. Serifenschrift für alles Erzählende, Sans für alles Bediente. */
.t-display { font-family: var(--t-titel); font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.015em; font-weight: 400; text-wrap: balance; }
.t-h2 { font-family: var(--t-titel); font-size: clamp(1.3rem, 1.12rem + .8vw, 1.65rem); line-height: 1.18; letter-spacing: -.012em; font-weight: 400; text-wrap: balance; }
.t-h3 { font-family: var(--t-titel); font-size: 1.0625rem; line-height: 1.26; font-weight: 400; }
.t-body { font-size: .9375rem; line-height: 1.6; }
.t-meta { font-size: .8125rem; line-height: 1.45; color: var(--t-tinte-fein); }
.t-micro { font-size: .6875rem; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; color: var(--t-tinte-fein); font-weight: 600; }

/* Der Claim erscheint immer in Kraft, nie in Schwarz. */
.t-claim { color: var(--t-kraft-stark); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   5. Stempel — das wiederkehrende Ornament
   Ein Rechteck mit Kraft-Kontur und gesperrten Versalien. Ersetzt Icons als
   Auszeichnung: auf Kraftpapier stempelt man, man illustriert nicht.
   -------------------------------------------------------------------------- */
.t-stempel {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--t-kraft-stark); color: var(--t-kraft-stark);
    border-radius: var(--t-r-klein); padding: 5px 11px;
    font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}

.t-section-title { display: flex; align-items: baseline; gap: 10px; }

/* --------------------------------------------------------------------------
   6. Wortmarke
   Gesetzt, nicht gezeichnet: „Tambern" in der Titelschrift, gemischt
   geschrieben. Wortmarke und Überschriften sprechen dieselbe Stimme.
   Unter etwa 16 px verliert eine Serifenschrift ihre Haarstriche — dort
   übernimmt das Bildzeichen allein (siehe TambernLogo.razor).
   -------------------------------------------------------------------------- */
.t-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--t-tinte); flex: none; }
.t-logo-mark { flex: none; }
.t-logo-text { display: flex; flex-direction: column; gap: 5px; }
.t-wordmark { font-family: var(--t-titel); font-weight: 400; letter-spacing: .035em; line-height: 1; color: inherit; white-space: nowrap; }
.t-wordmark--sub { display: block; font-family: var(--t-text); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--t-kraft-stark); }

/* --------------------------------------------------------------------------
   7. Bedienelemente
   -------------------------------------------------------------------------- */
.t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-family: var(--t-text); font-size: .875rem; font-weight: 600;
    padding: 10px 18px; border-radius: var(--t-r);
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color .16s var(--t-ease), border-color .16s var(--t-ease), color .16s var(--t-ease);
}
.t-btn--primary { background: var(--t-kraft-stark); color: var(--t-papier); }
.t-btn--primary:hover { background: var(--t-kraft-hover); }
.t-btn--primary:active { background: var(--t-kraft-aktiv); }
.t-btn--quiet { background: var(--t-flaeche); color: var(--t-tinte); border-color: var(--t-linie-stark); }
.t-btn--quiet:hover { background: var(--t-kraft-tint); border-color: var(--t-kraft); }
.t-btn--ghost { background: transparent; color: var(--t-kraft-stark); }
.t-btn--ghost:hover { background: var(--t-kraft-tint); }
.t-btn--block { width: 100%; }
.t-btn--sm { padding: 8px 14px; font-size: .8125rem; }
.t-btn:disabled, .t-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.t-field {
    display: flex; align-items: center; gap: 10px;
    background: var(--t-flaeche); border: 1.5px solid var(--t-feldrand);
    border-radius: var(--t-r); padding: 4px 5px 4px 14px;
    transition: border-color .16s var(--t-ease);
}
.t-field:focus-within { border-color: var(--t-kraft); }
.t-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--t-text); font-size: .9375rem; color: var(--t-tinte); padding: 9px 0; }
.t-field input::placeholder { color: var(--t-tinte-fein); }

.t-select {
    font: inherit; font-family: var(--t-text); font-size: .875rem; color: var(--t-tinte);
    background-color: var(--t-flaeche); border: 1.5px solid var(--t-feldrand);
    border-radius: var(--t-r); padding: 9px 34px 9px 14px; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C4F3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}
.t-select:focus { outline: 0; border-color: var(--t-kraft); }

.t-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-family: var(--t-text); font-size: .8125rem; font-weight: 600; white-space: nowrap;
    padding: 7px 13px; border-radius: var(--t-r-klein);
    background: var(--t-flaeche); color: var(--t-tinte-soft);
    border: 1px solid var(--t-linie); cursor: pointer; text-decoration: none;
    transition: background-color .16s var(--t-ease), border-color .16s var(--t-ease), color .16s var(--t-ease);
}
.t-chip:hover { border-color: var(--t-kraft); color: var(--t-tinte); }
.t-chip--on { background: var(--t-kraft-stark); border-color: var(--t-kraft-stark); color: var(--t-papier); }

.t-rail { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.t-rail::-webkit-scrollbar { display: none; }
.t-rail > * { flex: none; }
.t-rail--center { justify-content: center; }

/* --------------------------------------------------------------------------
   8. Nähe — das Herz des Systems
   -------------------------------------------------------------------------- */
.t-stufe { --t-stufe: var(--t-s2); --t-stufe-auf: var(--t-s2-auf); --t-stufe-txt: var(--t-s2-txt); }
.t-stufe--fuss { --t-stufe: var(--t-s1); --t-stufe-auf: var(--t-s1-auf); --t-stufe-txt: var(--t-s1-txt); }
.t-stufe--rad { --t-stufe: var(--t-s2); --t-stufe-auf: var(--t-s2-auf); --t-stufe-txt: var(--t-s2-txt); }
.t-stufe--fahrt { --t-stufe: var(--t-s3); --t-stufe-auf: var(--t-s3-auf); --t-stufe-txt: var(--t-s3-txt); }
.t-stufe--fern { --t-stufe: var(--t-s4); --t-stufe-auf: var(--t-s4-auf); --t-stufe-txt: var(--t-s4-txt); }
.t-stufe--post { --t-stufe: var(--t-s5); --t-stufe-auf: var(--t-s5-auf); --t-stufe-txt: var(--t-s5-txt); }

/* Der Anhänger: die Stufe hängt an der Ware wie ein Schild an einem Stück
   Handwerk — nur dass darauf kein Preis steht, sondern ein Weg. Er ersetzt
   das, was andere Marktplätze als Rabattstörer aufs Bild kleben. */
.t-anhaenger {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--t-text); font-size: .6875rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    padding: 5px 10px 5px 8px; border-radius: var(--t-r-klein);
    background: var(--t-stufe); color: var(--t-stufe-auf);
}
.t-anhaenger::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .72; flex: none; }

/* Die Wegzeile — Hauptangabe der Karte, über dem Namen. */
.t-weg { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.t-weg-zeit { font-size: .8125rem; font-weight: 700; color: var(--t-stufe-txt); }
.t-weg-fern { font-size: .8125rem; font-weight: 700; color: var(--t-tinte-soft); }
.t-weg-distanz { font-size: .8125rem; color: var(--t-tinte-fein); font-variant-numeric: tabular-nums; }
.t-weg-wo { font-size: .8125rem; color: var(--t-tinte-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Verfügbarkeit als Handlungsaussage. Der Postfall ist der leiseste Zustand. */
.t-avail { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }
.t-avail--now { color: var(--t-s1-txt); }
.t-avail--stock { color: var(--t-s2-txt); }
.t-avail--order { color: var(--t-hinweis); }
.t-avail--ship { color: var(--t-tinte-fein); font-weight: 500; }
.t-avail--none { color: var(--t-stop); }
.t-avail-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Der Ortsstempel — nach dem Logo das wichtigste Element im Kopf. Er sitzt
   VOR der Suche: der Ort rahmt die Suche, nicht umgekehrt. Gestrichelte
   Kontur, weil ein Ort etwas Vorläufiges ist, das man ändern darf. */
.t-locus {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font: inherit; font-family: var(--t-text); font-size: .8125rem; font-weight: 600;
    color: var(--t-kraft-stark); background: var(--t-flaeche);
    border: 1.5px dashed var(--t-kraft); border-radius: var(--t-r-klein);
    padding: 7px 12px; max-width: 100%;
    transition: background-color .16s var(--t-ease);
}
.t-locus:hover { background: var(--t-kraft-tint); }
.t-locus--unset { border-color: var(--t-linie-stark); color: var(--t-tinte-soft); }
.t-locus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-locus-radius { color: var(--t-tinte-soft); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Auswahlblatt zum Standort: auf dem Telefon von unten, am Schreibtisch als
   Aufklapp unter dem Knopf. */
.t-locus-wrap { position: relative; min-width: 0; }
.t-locus-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(36, 28, 18, .3); }
.t-locus-sheet {
    position: fixed; inset: auto 0 0 0; z-index: 49;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--t-flaeche); border-top: 1px solid var(--t-linie);
    border-radius: var(--t-r) var(--t-r) 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: var(--t-schatten-float); max-height: 88vh; overflow-y: auto;
}
@media (min-width: 768px) {
    .t-locus-sheet { position: absolute; inset: calc(100% + 10px) auto auto 0; width: 380px; border: 1px solid var(--t-linie); border-radius: var(--t-r); padding: 20px; }
    .t-locus-backdrop { background: transparent; }
}
.t-locus-sheet-head { display: flex; flex-direction: column; gap: 4px; }
.t-locus-hint { font-size: .8125rem; line-height: 1.45; color: var(--t-hinweis); margin: 0; }
.t-locus-or { display: flex; align-items: center; gap: 12px; color: var(--t-tinte-fein); font-size: .75rem; }
.t-locus-or::before, .t-locus-or::after { content: ""; flex: 1; height: 1px; background: var(--t-linie); }
.t-locus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.t-locus-list button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1px; font: inherit; background: transparent; border: 0; cursor: pointer; padding: 9px 11px; border-radius: var(--t-r-klein); }
.t-locus-list button:hover { background: var(--t-kraft-tint); }
.t-locus-list-name { font-size: .875rem; font-weight: 600; color: var(--t-tinte); }
.t-locus-radius-block { display: flex; flex-direction: column; gap: 9px; }

/* --------------------------------------------------------------------------
   9. Flächen
   -------------------------------------------------------------------------- */
.t-card {
    background-color: var(--t-flaeche); border: 1px solid var(--t-linie);
    border-radius: var(--t-r); overflow: hidden;
    transition: border-color .18s var(--t-ease), box-shadow .18s var(--t-ease);
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
a.t-card:hover { border-color: var(--t-kraft); box-shadow: var(--t-schatten-hover); }
.t-card--muted { opacity: .55; }
.t-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.t-card-foot { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; gap: 6px; }

.t-panel { background-color: var(--t-flaeche); border: 1px solid var(--t-linie); border-radius: var(--t-r); }
.t-panel--warm { background-color: var(--t-pergament); border-color: transparent; }
.t-panel--dunkel { background-color: var(--t-tinte); border-color: transparent; color: var(--t-papier); }
.t-panel--dunkel .t-meta { color: #B9AC9A; }
.t-panel--dunkel .t-micro { color: #B9AC9A; }
.t-panel--dunkel .t-stempel { border-color: var(--t-siegel); color: #E08C74; }

.t-thumb { position: relative; aspect-ratio: 4 / 3; background-color: var(--t-flaeche-tief); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.t-thumb img { width: 100%; height: 100%; object-fit: contain; }
.t-thumb-empty { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-tinte-fein); }
.t-thumb-badges { position: absolute; inset: 9px 9px auto 9px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }

/* Preis: die bewusst leise Stelle. Nie farbig, nie fett, nie größer als der
   Produktname — das ist die Regel, an der die Marke hängt. */
.t-price { font-family: var(--t-text); font-size: .875rem; font-weight: 500; color: var(--t-tinte); font-variant-numeric: tabular-nums; }
.t-price-was { font-size: .8125rem; color: var(--t-tinte-fein); text-decoration: line-through; margin-left: 6px; }

.t-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .t-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .t-grid { gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   10. Kopf und Navigation
   -------------------------------------------------------------------------- */
.t-header { position: sticky; top: 0; z-index: 40; background: rgba(253, 250, 244, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--t-linie); }
.t-header-row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; height: auto; padding: 12px 0; }
@media (min-width: 1024px) { .t-header-row { flex-wrap: nowrap; height: 68px; padding: 0; } }
.t-header-locus { order: 3; min-width: 0; flex: 0 1 auto; }
.t-header-search { order: 4; flex: 1 1 100%; min-width: 0; }
.t-header-actions { order: 2; margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
@media (min-width: 1024px) {
    .t-header-locus { order: 0; }
    .t-header-search { order: 0; flex: 1 1 auto; max-width: 440px; }
    .t-header-actions { order: 0; margin-left: 0; }
    .t-nav { margin-left: auto; }
}

.t-nav { display: none; align-items: center; gap: 2px; }
@media (min-width: 1024px) { .t-nav { display: flex; } }
.t-nav a { font-size: .875rem; color: var(--t-tinte-soft); text-decoration: none; padding: 8px 12px; border-radius: var(--t-r-klein); transition: background-color .16s var(--t-ease), color .16s var(--t-ease); white-space: nowrap; }
.t-nav a:hover { background: var(--t-kraft-tint); color: var(--t-tinte); }
.t-nav a.active { color: var(--t-kraft-stark); font-weight: 600; }

.t-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--t-r-klein); border: 0; background: transparent; color: var(--t-tinte-soft); cursor: pointer; transition: background-color .16s var(--t-ease), color .16s var(--t-ease); text-decoration: none; position: relative; flex: none; }
.t-icon-btn:hover { background: var(--t-kraft-tint); color: var(--t-tinte); }
.t-badge-count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--t-r-pill); background: var(--t-kraft-stark); color: var(--t-papier); font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Untere Navigation auf dem Telefon. Fünf Ziele, „Nähe" zuerst. */
.t-tabbar { position: fixed; inset: auto 0 0 0; z-index: 45; display: flex; background: rgba(255, 253, 248, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--t-linie); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 1024px) { .t-tabbar { display: none; } }
.t-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; text-decoration: none; color: var(--t-tinte-fein); font-size: .625rem; font-weight: 600; }
.t-tabbar a.active { color: var(--t-kraft-stark); }
.t-tabbar svg { width: 21px; height: 21px; }
.t-tabbar-spacer { height: 64px; }
@media (min-width: 1024px) { .t-tabbar-spacer { display: none; } }

/* Fußzeile */
.t-footer { background-color: var(--t-flaeche); border-top: 1px solid var(--t-linie); margin-top: 64px; padding: 42px 0 28px; }
.t-footer-top { display: grid; gap: 32px; padding-bottom: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .t-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 52px; } }
.t-footer-pitch { color: var(--t-tinte-soft); max-width: 36ch; margin: 14px 0 0; }
.t-footer-brand .t-claim { display: inline-block; margin: 12px 0 0; }
.t-footer-values { display: grid; gap: 20px 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
@media (min-width: 620px) { .t-footer-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .t-footer-values { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
.t-footer-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding-top: 20px; }
.t-footer-legal nav { display: flex; flex-wrap: wrap; gap: 18px; }
.t-footer-legal a { font-size: .8125rem; color: var(--t-tinte-soft); text-decoration: none; }
.t-footer-legal a:hover { color: var(--t-kraft-stark); text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Seitenbausteine
   -------------------------------------------------------------------------- */
.t-hero { background-color: var(--t-flaeche-tief); padding: 46px 0 42px; border-bottom: 1px solid var(--t-linie); }
@media (min-width: 768px) { .t-hero { padding: 68px 0 60px; } }
.t-hero-inner { max-width: 700px; display: flex; flex-direction: column; }
.t-hero-lead { font-size: 1rem; line-height: 1.6; color: var(--t-tinte-soft); margin: 14px 0 0; max-width: 54ch; }
.t-hero-search { margin-top: 24px; max-width: 500px; }
.t-hero-locus { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.t-hero-promises { display: grid; gap: 18px 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 32px; }

.t-block { padding: 38px 0 0; }
.t-block:first-of-type { padding-top: 32px; }
.t-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
/* Stufen-Überschriften tragen die Farbe ihrer Stufe — die Seite wird von oben
   nach unten blasser, genau wie der Weg länger wird. */
.t-tier-heading { color: var(--t-stufe-txt, var(--t-tinte)); }

.t-invite { padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.t-invite .t-body { color: var(--t-tinte-soft); max-width: 56ch; margin: 0; }

.t-cat-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.t-cat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 15px; border-radius: var(--t-r); background-color: var(--t-flaeche); border: 1px solid var(--t-linie); text-decoration: none; color: inherit; transition: border-color .16s var(--t-ease), background-color .16s var(--t-ease); }
.t-cat:hover { border-color: var(--t-kraft); background-color: var(--t-kraft-tint); }
.t-cat-name { font-family: var(--t-titel); font-size: .9375rem; }

.t-exclusive-panel { padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.t-exclusive-title { margin-top: 8px; }
.t-exclusive-lead { color: #C6B9A6; margin: 8px 0 0; max-width: 46ch; }
/* Der Exclusive-Stempel ist die zweite und letzte Stelle, an der Siegel
   erscheinen darf. */
.t-exclusive { display: inline-flex; align-items: center; gap: 6px; font-size: .625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--t-r-klein); border: 1.5px solid var(--t-siegel); color: var(--t-siegel); background: var(--t-flaeche); }

/* Katalog */
.t-catalog { padding: 24px 0 0; }
.t-catalog-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin: 8px 0 16px; }
.t-catalog-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.t-catalog-locus { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 13px 15px; background-color: var(--t-flaeche); border: 1px solid var(--t-linie); border-radius: var(--t-r); margin-bottom: 18px; }
.t-catalog-body { display: grid; gap: 22px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .t-catalog-body { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; } }
.t-catalog-aside { min-width: 0; }
.t-catalog-main { min-width: 0; }
.t-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .t-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.t-viewswitch { display: inline-flex; background: var(--t-flaeche); border: 1.5px solid var(--t-linie-stark); border-radius: var(--t-r); padding: 3px; }
.t-viewswitch button { font: inherit; font-family: var(--t-text); font-size: .8125rem; font-weight: 600; border: 0; background: transparent; color: var(--t-tinte-soft); padding: 6px 14px; border-radius: var(--t-r-klein); cursor: pointer; }
.t-viewswitch button.t-viewswitch-on { background: var(--t-kraft-stark); color: var(--t-papier); }

/* Stufenband als Zwischentitel in der Nähe-Sortierung. */
.t-tier-band { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }
.t-tier-band:first-child { margin-top: 0; }
.t-tier-band-label { font-size: .8125rem; font-weight: 700; color: var(--t-stufe-txt); letter-spacing: .02em; }
.t-tier-band::after { content: ""; flex: 1; height: 1px; background: var(--t-stufe); opacity: .34; }

.t-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 28px 0 6px; }

/* Filterspalte. Reihenfolge umgedreht gegenüber einem Preisvergleich:
   Verfügbarkeit → Kategorien → Eigenschaften → PREIS ZULETZT. */
.t-filters { display: flex; flex-direction: column; gap: 20px; background-color: var(--t-flaeche); border: 1px solid var(--t-linie); border-radius: var(--t-r); padding: 18px; }
.t-filter-group { display: flex; flex-direction: column; gap: 9px; }
.t-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.t-linkbtn { font: inherit; font-family: var(--t-text); font-size: .75rem; color: var(--t-kraft-stark); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.t-filter-scroll { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; margin: -2px; padding: 2px; }
.t-filter-scroll--short { max-height: 168px; }
.t-filter-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-family: var(--t-text); font-size: .8125rem; color: var(--t-tinte-soft); background: transparent; border: 0; cursor: pointer; padding: 7px 9px; border-radius: var(--t-r-klein); }
.t-filter-item:hover { background: var(--t-kraft-tint); color: var(--t-tinte); }
.t-filter-item--on { background: var(--t-kraft-stark); color: var(--t-papier); font-weight: 600; }
.t-filter-item--on .t-filter-count { color: var(--t-papier); }
.t-filter-item--sub { font-size: .75rem; padding-left: 18px; }
.t-filter-children { display: flex; flex-direction: column; gap: 1px; }
.t-filter-count { font-size: .6875rem; color: var(--t-tinte-fein); font-variant-numeric: tabular-nums; flex: none; }

.t-check { display: flex; align-items: center; gap: 9px; font-size: .8125rem; color: var(--t-tinte-soft); cursor: pointer; }
.t-check input { width: 16px; height: 16px; accent-color: var(--t-kraft); cursor: pointer; }

.t-price-range { display: flex; align-items: center; gap: 8px; }
.t-price-range input { min-width: 0; width: 0; flex: 1 1 0; font: inherit; font-family: var(--t-text); font-size: .8125rem; padding: 8px 11px; border-radius: var(--t-r-klein); border: 1.5px solid var(--t-feldrand); background: var(--t-flaeche); color: var(--t-tinte); }
.t-price-range input:focus { outline: 0; border-color: var(--t-kraft); }

/* Produktseite */
.t-detail { padding: 24px 0 0; }
.t-detail-top { display: grid; gap: 24px; align-items: start; margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .t-detail-top { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 34px; } }
.t-detail-media { min-width: 0; }
.t-detail-buy { min-width: 0; }
@media (min-width: 960px) { .t-detail-buy { position: sticky; top: 88px; } }

/* Der „Vor Ort"-Block: die grösste farbige Fläche der Seite. Er steht dort,
   wo andere Marktplätze den Preis gross setzen — das ist die Aussage. */
.t-here { margin: 16px 0 0; padding: 16px; border-radius: var(--t-r); background: color-mix(in srgb, var(--t-stufe) 10%, #FFFDF8); border: 1px solid color-mix(in srgb, var(--t-stufe) 32%, #FFFDF8); }
.t-here-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.t-here-tier { font-family: var(--t-titel); font-size: 1.125rem; color: var(--t-stufe-txt); }
.t-here-body { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 11px; }
.t-here-seller { font-size: .875rem; }
.t-here-seller a { color: var(--t-tinte); font-weight: 600; text-decoration: none; }
.t-here-seller a:hover { color: var(--t-kraft-stark); text-decoration: underline; }

/* Preis auf der Produktseite: sachlich. Kein Fettdruck, keine Rabattfarbe. */
.t-detail-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.t-detail-price-value { font-family: var(--t-text); font-size: 1.375rem; font-weight: 500; color: var(--t-tinte); font-variant-numeric: tabular-nums; }

/* Post: abgesetzt, leise, ausdrücklich zweite Wahl. */
.t-fallback { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--t-linie); }
.t-fallback-lines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.t-fallback-note { margin: 9px 0 0; line-height: 1.5; }

/* Andere Erzeuger desselben Produkts */
.t-alt-list { display: flex; flex-direction: column; gap: 8px; }
.t-alt { display: grid; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 15px; border-radius: var(--t-r); background-color: var(--t-flaeche); border: 1px solid var(--t-linie); text-decoration: none; color: inherit; transition: border-color .16s var(--t-ease); }
@media (min-width: 700px) { .t-alt { grid-template-columns: minmax(0, 1fr) auto auto; } }
.t-alt:hover { border-color: var(--t-kraft); }
.t-alt-main { min-width: 0; }
.t-alt-name { font-family: var(--t-titel); font-size: 1rem; }

/* Eigenschaften */
.t-specs { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--t-linie); border-radius: var(--t-r); overflow: hidden; background-color: var(--t-flaeche); }
.t-spec { display: grid; gap: 4px 20px; padding: 12px 15px; border-top: 1px solid var(--t-linie); grid-template-columns: minmax(0, 1fr); }
.t-spec:first-child { border-top: 0; }
@media (min-width: 620px) { .t-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; } }
.t-spec dd { margin: 0; }
.t-prose { white-space: pre-line; max-width: 68ch; color: var(--t-tinte-soft); }

/* Shopseite */
.t-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8125rem; color: var(--t-tinte-fein); padding: 4px 0 14px; }
.t-crumbs a { color: var(--t-tinte-soft); text-decoration: none; }
.t-crumbs a:hover { color: var(--t-kraft-stark); text-decoration: underline; }
.t-crumbs-here { color: var(--t-tinte); }
.t-shop-head { padding: 22px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .t-shop-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.t-shop-head-main { min-width: 0; }
.t-shop-head-near { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Mediengalerie */
.t-gallery { background-color: var(--t-flaeche); border: 1px solid var(--t-linie); border-radius: var(--t-r); overflow: hidden; }
.t-gallery-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--t-linie); padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
.t-gallery-tabs::-webkit-scrollbar { display: none; }
.t-gallery-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: inherit; font-family: var(--t-text); font-size: .8125rem; font-weight: 600; color: var(--t-tinte-fein); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 13px; cursor: pointer; transition: color .16s var(--t-ease), border-color .16s var(--t-ease); }
.t-gallery-tab:hover { color: var(--t-tinte); }
.t-gallery-tab--on { color: var(--t-kraft-stark); border-bottom-color: var(--t-kraft-stark); }
.t-gallery-stage { aspect-ratio: 4 / 3; background-color: var(--t-flaeche-tief); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.t-gallery-stage img { width: 100%; height: 100%; object-fit: contain; }
.t-gallery-thumbs { padding: 13px; }
.t-gallery-thumb { width: 60px; height: 60px; padding: 0; overflow: hidden; background: var(--t-flaeche); border: 1.5px solid var(--t-linie); border-radius: var(--t-r-klein); cursor: pointer; }
.t-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.t-gallery-thumb--on { border-color: var(--t-kraft); }
.t-gallery-pane { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.t-gallery-video { width: 100%; max-height: 420px; border-radius: var(--t-r); background: var(--t-tinte); }
.t-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.t-doc { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--t-linie); border-radius: var(--t-r); text-decoration: none; color: inherit; }
.t-doc:hover { border-color: var(--t-kraft); background-color: var(--t-flaeche-tief); }
.t-doc-ext { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--t-r-klein); background: var(--t-pergament); color: var(--t-tinte); font-size: .625rem; font-weight: 700; text-transform: uppercase; }
.t-doc-name { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-doc-action { margin-left: auto; font-size: .75rem; color: var(--t-kraft-stark); flex: none; }

/* --------------------------------------------------------------------------
   12. Karte
   Kacheln werden entsättigt, damit die Stufen-Pins und die Radiusringe die
   einzigen farbigen Dinge im Bild sind.
   -------------------------------------------------------------------------- */
.t-map { position: relative; border-radius: var(--t-r); overflow: hidden; background-color: #EDE7DA; border: 1px solid var(--t-linie); }
.t-map .leaflet-tile-pane { filter: saturate(.3) sepia(.12) contrast(.95) brightness(1.03); }
.t-map .leaflet-container { background: #EDE7DA; font-family: var(--t-text); }
.t-map-canvas { width: 100%; height: 100%; min-height: inherit; }
.t-map-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: var(--t-stufe, var(--t-blatt)); rotate: -45deg; box-shadow: 0 2px 6px rgba(36, 28, 18, .3); }
.t-map-pin span { rotate: 45deg; color: var(--t-papier); font-size: .625rem; font-weight: 700; }
.t-map-me { width: 16px; height: 16px; border-radius: 50%; background: var(--t-tinte); border: 3px solid var(--t-papier); box-shadow: 0 1px 5px rgba(36, 28, 18, .4); }
.t-map-veil { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; text-align: center; padding: 24px; background: rgba(227, 214, 192, .86); backdrop-filter: blur(2px); color: var(--t-tinte); }
.t-map-veil p { max-width: 30ch; margin: 0; }
.t-map .leaflet-control-attribution { font-size: .625rem; background: rgba(255, 253, 248, .82); }

/* --------------------------------------------------------------------------
   13. Kleinteile
   -------------------------------------------------------------------------- */
.t-divider { height: 1px; background: var(--t-linie); border: 0; margin: 0; }
.t-skeleton { background: linear-gradient(90deg, var(--t-pergament) 25%, #EFE6D6 37%, var(--t-pergament) 63%); background-size: 400% 100%; animation: t-shimmer 1.4s ease infinite; border-radius: var(--t-r-klein); }
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.t-empty { text-align: center; padding: 52px 20px; color: var(--t-tinte-fein); }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   14. Kasse — Bruecke zu YRoute.Share.Commerce
   --------------------------------------------------------------------------
   Warenkorb, Bestellung, Bezahlung und Bestellliste liegen in
   YRoute.Share.Commerce und sind bewusst APP-NEUTRAL gebaut: Layout ueber
   Inline-Styles, Farben ueber var(--yr-*, Rueckfallwert), Zustaende ueber die
   Bootstrap-Namen .btn/.alert/.card/.form-control. Der Storefront laedt
   Bootstrap NICHT — bis hierhin stand die Kasse deshalb nackt da: keine
   Knopfflaechen, keine Hinweisfelder, Systemschrift.

   ZWEI WEGE waren moeglich. Der eine: t-Klassen in die geteilten Seiten
   schreiben. Dann traegt eine geteilte Bibliothek eine fremde Marke, und jede
   App, die diese Seiten spaeter einbindet, erbt TAMBERN. Der andere, dieser:
   die MARKE passt sich den neutralen Seiten an. Sie belegt die
   --yr-*-Variablen, die die Seiten ohnehin abfragen, und kleidet deren
   Klassennamen — alles unter .t-app, damit nichts nach draussen wirkt.
   Vorteil ueber die Optik hinaus: an den Dateien, die die Kollegen gerade fuer
   den Bestellbus angefasst haben, aendert sich keine Zeile.

   Was hier NICHT hinkommt: die Inline-Styles der Seiten (Flex, Abstaende,
   Schriftgroessen) bleiben, wie sie sind. Sie sind neutral und liessen sich nur
   mit !important ueberschreiben — dieser Preis lohnt sich nicht.
   -------------------------------------------------------------------------- */

/* Die Anschlussvariablen. Die Seiten lesen sie mit Rueckfallwerten (#eee,
   #666) — kalte Graustufen, die in einer warmen Papierwelt wie ein
   Fremdkoerper sitzen. Hier stehen die TAMBERN-Toene dagegen. */
.t-app {
    --yr-border: var(--t-linie);
    --yr-text-muted: var(--t-tinte-fein);
    --yr-text-light: var(--t-tinte-fein);
    --yr-input-border: var(--t-feldrand);
    --yr-success: var(--t-s1);
    --yr-option-selected-bg: var(--t-kraft-tint);
    --yr-option-selected-border: var(--t-kraft-stark);
}

/* .container kommt aus der geteilten tailwind.generated.css und rechnet dort
   mit Breakpoints. Die Kassenseiten setzen ihre Breite selbst per Inline-Style
   (max-width:900px), brauchen also nur einen neutralen Block. */
.t-app .container { width: 100%; }

/* Ueberschriften. Die Seiten benutzen nackte h2/h4/h5 — ohne Regel traegt die
   Kasse Systemschrift, waehrend der ganze Laden ringsum die Titelschrift
   traegt. Genau an dieser Naht faellt ein Bruch am meisten auf. */
.t-app .container > h2 {
    font-family: var(--t-titel); font-weight: 400; letter-spacing: -.012em;
    font-size: clamp(1.3rem, 1.12rem + .8vw, 1.65rem); line-height: 1.18;
    margin: 0 0 20px;
}
.t-app .card > h4, .t-app .container > h4 {
    font-family: var(--t-titel); font-weight: 400; font-size: 1.0625rem;
    line-height: 1.26; margin: 0 0 14px;
}
.t-app .commerce-cart-item h5 {
    font-family: var(--t-titel); font-weight: 400; font-size: 1.0625rem;
    line-height: 1.26;
}

/* Karten = Papierflaechen, wie .t-panel. */
.t-app .card {
    background-color: var(--t-flaeche);
    border: 1px solid var(--t-linie);
    border-radius: var(--t-r);
}

/* Knoepfe. Werte aus .t-btn uebernommen, nicht neu erfunden — sonst laufen
   Katalogknopf und Kassenknopf mit der Zeit auseinander. */
.t-app .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-family: var(--t-text); font-size: .875rem; font-weight: 600;
    padding: 10px 18px; border-radius: var(--t-r);
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color .16s var(--t-ease), border-color .16s var(--t-ease), color .16s var(--t-ease);
}
.t-app .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Kraft-stark, nicht Kraft: der helle Ton erreicht mit Papierschrift nur
   3,66:1. Dieselbe Messung wie bei .t-btn--primary. */
.t-app .btn-primary { background: var(--t-kraft-stark); color: var(--t-papier); }
.t-app .btn-primary:hover { background: var(--t-kraft-hover); }
.t-app .btn-primary:active { background: var(--t-kraft-aktiv); }

.t-app .btn-outline-secondary,
.t-app .btn-outline-primary {
    background: var(--t-flaeche); color: var(--t-tinte); border-color: var(--t-linie-stark);
}
.t-app .btn-outline-secondary:hover,
.t-app .btn-outline-primary:hover { background: var(--t-flaeche-tief); border-color: var(--t-kraft); }

/* Entfernen ist die einzige verlustbehaftete Handlung im Warenkorb: sichtbar,
   aber nicht laut. Siegel-tief statt Siegel, weil hier Schrift auf Papier
   steht und der helle Ton dafuer zu wenig Kontrast bringt. Ausnahme von der
   Siegel-Regel aus Abschnitt 2 mit Grund: es ist ein Zustand, kein Schmuck,
   und es steht nie neben einem Stufen-Anhaenger. */
.t-app .btn-outline-danger {
    background: transparent; color: var(--t-siegel-tief); border-color: var(--t-linie-stark);
}
.t-app .btn-outline-danger:hover { border-color: var(--t-siegel-tief); background: var(--t-flaeche-tief); }

.t-app .btn-lg { padding: 13px 24px; font-size: .9375rem; }
.t-app .btn-sm { padding: 8px 14px; font-size: .8125rem; }

/* Eingabefelder. Bewusst der Rahmenstil aus .t-price-range, nicht die
   Pillenform von .t-field: eine Adresseingabe ist ein Formular, kein Sucher. */
.t-app .form-control {
    width: 100%; font: inherit; font-family: var(--t-text); font-size: .9375rem;
    padding: 10px 13px; border-radius: var(--t-r-klein);
    border: 1.5px solid var(--t-feldrand);
    background: var(--t-flaeche); color: var(--t-tinte);
}
.t-app .form-control::placeholder { color: var(--t-tinte-fein); }
.t-app .form-control:focus { outline: 0; border-color: var(--t-kraft-stark); }

.t-app .card label {
    display: block; font-size: .8125rem; font-weight: 600;
    color: var(--t-tinte-soft); margin-bottom: 5px;
}
/* Die Mengen-Beschriftung steht in einer Zeile mit dem Feld, nicht darueber. */
.t-app .commerce-cart-item label {
    font-size: .8125rem; font-weight: 600; color: var(--t-tinte-soft);
}

/* Hinweisfelder. Linke Kante statt Vollflaeche: eine randlose farbige Flaeche
   wuerde mit den Stufen-Anhaengern um Aufmerksamkeit ringen, und die Naehe
   gewinnt bei TAMBERN immer. */
.t-app .alert {
    padding: 14px 16px; border-radius: var(--t-r);
    border: 1px solid var(--t-linie); border-left: 3px solid var(--t-linie-stark);
    background: var(--t-flaeche); color: var(--t-tinte);
    font-size: .9375rem;
}
.t-app .alert p { margin: 0; }
.t-app .alert-info { border-left-color: var(--t-kraft-stark); }
.t-app .alert-success { border-left-color: var(--t-s1); background: var(--t-blatt-tint); }
.t-app .alert-warning { border-left-color: var(--t-hinweis); background: var(--t-kraft-tint); }
.t-app .alert-danger { border-left-color: var(--t-siegel-tief); color: var(--t-siegel-tief); }

/* Statusmarke einer Bestellung. */
.t-app .badge {
    display: inline-block; padding: 3px 9px; border-radius: var(--t-r-pill);
    font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}
.t-app .badge.bg-secondary { background: var(--t-s5); color: var(--t-s5-auf); }

/* Mengenfeld einer Warenkorbzeile. Die Zeile selbst bleibt eine Papierzeile:
   Trennlinie, kein Kasten — die Linie setzt die Seite per Inline-Style auf
   var(--yr-border), und den Wert liefert der Variablenblock oben. */
.t-app .commerce-cart-item input[type="number"] {
    font: inherit; font-family: var(--t-text); font-size: .875rem;
    border-radius: var(--t-r-klein); border: 1.5px solid var(--t-feldrand);
    background: var(--t-flaeche); color: var(--t-tinte);
}

/* --------------------------------------------------------------------------
   15. Rechtstexte
   --------------------------------------------------------------------------
   Impressum, Datenschutz, AGB. Lange, gegliederte Texte — die einzige Stelle
   im Laden, an der niemand etwas kaufen will und jeder etwas nachschlagen
   will. Deshalb hier andere Regeln als im Katalog: ruhige Fliessschrift, ein
   Mass von 68 Zeichen, sichtbare Gliederung.

   Die Titelschrift traegt die Abschnitte, nicht die Sans — ein Rechtstext ist
   ein Dokument, kein Bedienfeld.
   -------------------------------------------------------------------------- */
.t-legal { max-width: 68ch; padding-bottom: 56px; }

.t-legal h1 {
    font-family: var(--t-titel); font-weight: 400; letter-spacing: -.012em;
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.16;
    margin: 0 0 6px;
}

/* Ein Vorspann, der sagt, worum es geht, bevor die Paragraphen kommen. */
.t-legal-lead { font-size: .9375rem; line-height: 1.6; color: var(--t-tinte-fein); margin: 0 0 34px; }

.t-legal h2 {
    font-family: var(--t-titel); font-weight: 400; font-size: 1.1875rem;
    line-height: 1.24; margin: 36px 0 10px;
    padding-top: 18px; border-top: 1px solid var(--t-linie);
}
.t-legal h2:first-of-type { border-top: 0; padding-top: 0; }

.t-legal h3 {
    font-family: var(--t-text); font-weight: 600; font-size: .9375rem;
    margin: 22px 0 6px; color: var(--t-tinte);
}

.t-legal p, .t-legal li { font-size: .9375rem; line-height: 1.65; color: var(--t-tinte-soft); }
.t-legal p { margin: 0 0 12px; }
.t-legal strong { color: var(--t-tinte); font-weight: 600; }

.t-legal ul { margin: 0 0 14px; padding-left: 20px; }
.t-legal li { margin-bottom: 6px; }
/* Papier statt Aufzaehlungspunkt: ein kurzer Strich, wie mit der Hand gesetzt. */
.t-legal ul { list-style: none; padding-left: 0; }
.t-legal ul > li { position: relative; padding-left: 18px; }
.t-legal ul > li::before {
    content: "–"; position: absolute; left: 0; top: 0;
    color: var(--t-kraft-stark);
}

.t-legal a { color: var(--t-kraft-stark); text-decoration: underline; text-underline-offset: 2px; }
.t-legal a:hover { color: var(--t-kraft-hover); }

/* Die Adressblock-Liste des Impressums: Bezeichnung links, Wert rechts, und auf
   engen Flaechen untereinander. Kein <table>, weil es keine Tabelle ist. */
.t-legal-daten { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3px 18px; margin: 0 0 18px; }
.t-legal-daten dt { font-size: .8125rem; color: var(--t-tinte-fein); padding-top: 2px; }
.t-legal-daten dd { margin: 0; font-size: .9375rem; color: var(--t-tinte); }

@media (max-width: 640px) {
    .t-legal-daten { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .t-legal-daten dt { padding-top: 12px; }
    .t-legal-daten dd { margin-bottom: 2px; }
}

/* Der Anschriftenblock selbst — zusammenhaengend, wie auf einem Briefkopf. */
.t-legal-anschrift { font-size: 1rem; line-height: 1.5; color: var(--t-tinte); margin: 0 0 22px; }
.t-legal-anschrift .t-legal-firma { font-family: var(--t-titel); font-size: 1.125rem; display: block; margin-bottom: 4px; }

/* Stand-Angabe am Fuss eines Rechtstextes. */
.t-legal-stand { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--t-linie); font-size: .8125rem; color: var(--t-tinte-fein); }

/* --------------------------------------------------------------------------
   16. Sammelblatt „Mehr"
   --------------------------------------------------------------------------
   Die Mobilleiste hat vier Plaetze, die Kopfnavigation ist unter 1024 px
   ausgeblendet. Alles, was dort nicht hinpasst, sammelt /more — vor allem die
   ERZEUGER, die auf dem Telefon sonst ueberhaupt keinen Weg haben.

   Zeilen, keine Kacheln: das ist eine Liste zum Weiterkommen, kein Schaufenster.
   Jede Zeile ist ganz anfassbar (44 px Mindesthoehe, Fingerregel) und traegt
   einen Halbsatz, der sagt, was dahinter liegt — ein blankes Wort wie
   „Erzeuger" verraet auf einem Telefon zu wenig.
   -------------------------------------------------------------------------- */
.t-more { max-width: 46rem; padding-bottom: 56px; }

.t-more-group { margin-top: 30px; }
.t-more-group:first-of-type { margin-top: 20px; }

.t-more-label {
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--t-tinte-fein); margin: 0 0 8px;
}

.t-more-list {
    list-style: none; margin: 0; padding: 0;
    background: var(--t-flaeche); border: 1px solid var(--t-linie);
    border-radius: var(--t-r); overflow: hidden;
}

.t-more-row {
    display: flex; align-items: center; gap: 14px;
    min-height: 44px; padding: 13px 16px;
    text-decoration: none; color: var(--t-tinte);
    border-top: 1px solid var(--t-linie);
    transition: background-color .16s var(--t-ease);
}
.t-more-list > li:first-child > .t-more-row { border-top: 0; }
.t-more-row:hover { background: var(--t-flaeche-tief); }

.t-more-icon { flex: none; width: 20px; height: 20px; color: var(--t-kraft-stark); }
.t-more-text { flex: 1; min-width: 0; }
.t-more-title { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.t-more-hint { display: block; font-size: .8125rem; line-height: 1.4; color: var(--t-tinte-fein); margin-top: 1px; }

/* Der Winkel nach rechts sagt „hier geht es weiter" — dezent, nicht als Pfeil. */
.t-more-chevron { flex: none; width: 8px; height: 14px; color: var(--t-linie-stark); }

/* --------------------------------------------------------------------------
   17. Ladenschild — der Laden eines Erzeugers unter eigener Adresse
   --------------------------------------------------------------------------
   Ruft jemand telovo.tambern.com auf, steht er nicht auf dem Marktplatz,
   sondern im Laden eines einzelnen Erzeugers. Das muss oben stehen und darf
   nicht zu suchen sein: wer nicht weiss, in wessen Laden er einkauft, kann
   nicht beurteilen, mit wem er einen Vertrag schliesst.

   Ein BAND ueber dem Kopf, nicht ein Hinweis darin. Es laeuft ueber die ganze
   Breite wie die Papierbanderole um ein Paket und schiebt den ganzen Laden ein
   Stueck nach unten — dadurch ist es nicht wegzusehen, ohne aufdringlich zu
   sein.

   Farbe: Kraft-stark als Flaeche mit Papierschrift, gemessen 5,03:1. Der helle
   Kraftton waere hier falsch (3,66:1), siehe Abschnitt 2.

   Der Zusatz „by TAMBERN" ist Pflicht, nicht Hoeflichkeit: der Besucher soll
   wissen, wessen Ware er kauft UND auf welcher Plattform. Deshalb steht der
   Ladenname gross und die Plattform klein — aber sie steht.
   -------------------------------------------------------------------------- */
.t-shopband {
    background: var(--t-kraft-stark);
    color: var(--t-papier);
    border-bottom: 1px solid var(--t-kraft-aktiv);
}

.t-shopband-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-block: 9px;
}

.t-shopband-shop {
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0;
}
.t-shopband-vor { font-size: .8125rem; opacity: .85; }
.t-shopband-name {
    font-family: var(--t-titel); font-weight: 400;
    font-size: 1.0625rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* „by TAMBERN" — kleine Kapitaelchen-Anmutung, damit es als Herkunftsangabe
   liest und nicht als zweiter Ladenname. */
.t-shopband-by {
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    opacity: .9; white-space: nowrap;
}
.t-shopband-by a { color: inherit; text-decoration: none; }
.t-shopband-by a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
    /* Auf schmalen Flaechen untereinander: der Ladenname darf nicht abgeschnitten
       werden, nur damit die Herkunftsangabe in dieselbe Zeile passt. */
    .t-shopband-inner { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 8px; }
    .t-shopband-name { white-space: normal; }
}

/* Tastaturbedienung sichtbar halten. */
.t-app :focus-visible { outline: 2px solid var(--t-kraft-stark); outline-offset: 2px; border-radius: var(--t-r-klein); }

@media (prefers-reduced-motion: reduce) {
    .t-app *, .t-app *::before, .t-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}