/* ==========================================================================
   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;
    --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-linie-stark);
    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-linie-stark);
    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-linie-stark); 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; }

/* 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; }
}