/* ==========================================================================
   Tannenbistro — Website
   Ein einziges Stylesheet. Tokens 1:1 aus dem Design System
   (tokens/colors.css, typography.css, spacing.css, effects.css, base.css).
   Dokumentierte Abweichungen: siehe _designsystem/README.md.
   Keine Build-Pipeline, keine externen Requests.
   ========================================================================== */

/* ===== 1. Webfonts — selbst gehostet (DSGVO, kein Google-Fonts-CDN) ===== */

/* Anton — Display */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Yellowtail — Script-Akzent */
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/yellowtail-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/yellowtail-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* PT Sans — Fließtext */
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/pt-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/pt-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/pt-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/pt-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/pt-sans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/pt-sans-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== 2. Tokens ===== */

:root{
  /* --- Markenfarben (fix, nicht verhandelbar) --- */
  --tb-tanne:#006B32;   /* Tannengrün */
  --tb-mai:#94C020;     /* Maigrün */
  --tb-creme:#DFD7B4;   /* Creme */

  /* --- Tannengrün-Skala --- */
  --tb-green-50:#EBF3ED;
  --tb-green-100:#D2E6D8;
  --tb-green-200:#A6CDB2;
  --tb-green-300:#73B08A;
  --tb-green-400:#3B8E5D;
  --tb-green-500:#006B32;
  --tb-green-600:#005E2C;
  --tb-green-700:#084D26;
  --tb-green-800:#0B3D20;
  --tb-green-900:#0B2D19;

  /* --- Maigrün-Skala --- */
  --tb-lime-50:#F7FAE8;
  --tb-lime-100:#ECF3C9;
  --tb-lime-200:#DBE898;
  --tb-lime-300:#C2DA5F;
  --tb-lime-400:#A9CC38;
  --tb-lime-500:#94C020;
  --tb-lime-600:#7CA318;
  --tb-lime-700:#628112;
  --tb-lime-800:#48600D;
  --tb-lime-900:#324309;

  /* --- Creme-Skala --- */
  --tb-cream-50:#FBF9F1;
  --tb-cream-100:#F5F1E1;
  --tb-cream-200:#EBE5CC;
  --tb-cream-300:#DFD7B4;
  --tb-cream-400:#C9BE92;
  --tb-cream-500:#AC9F70;

  /* --- Neutrale (warm, leicht grünstichig) --- */
  --tb-ink:#22301F;
  --tb-ink-soft:#4A5544;
  --tb-ink-muted:#79806F;
  --tb-paper:#FBF9F1;
  --tb-white:#FFFFFF;

  /* --- Semantische Aliase (im Markup immer diese nutzen, nie Roh-Hex) --- */
  --surface-page:var(--tb-paper);
  --surface-card:var(--tb-white);
  --surface-warm:var(--tb-cream-100);
  --surface-brand:var(--tb-green-500);
  --surface-brand-deep:var(--tb-green-700);
  --surface-accent:var(--tb-lime-500);
  --text-body:var(--tb-ink);
  --text-soft:var(--tb-ink-soft);
  --text-muted:var(--tb-ink-muted);
  --text-heading:var(--tb-green-500);
  --text-on-brand:var(--tb-creme);
  --text-on-accent:var(--tb-green-800);
  --text-price:var(--tb-green-600);
  --border-soft:var(--tb-cream-200);
  --border-strong:var(--tb-green-500);
  --link:var(--tb-green-600);
  --link-hover:var(--tb-lime-700);
  --focus-ring:0 0 0 3px var(--tb-lime-200);

  /* --- Status --- */
  --status-closed-bg:var(--tb-green-800);
  --status-closed-text:var(--tb-creme);
  --status-warn-bg:var(--tb-lime-100);
  --status-warn-text:var(--tb-green-800);
  --status-info-bg:var(--tb-cream-100);
  --status-info-text:var(--tb-ink);

  /* --- Typografie --- */
  --font-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --font-script:'Yellowtail',cursive;
  --font-body:'PT Sans','Segoe UI',Verdana,sans-serif;
  --text-h1:clamp(2.5rem,5vw,4rem);            /* 40 → 64px */
  --text-h2:clamp(2rem,3.5vw,2.75rem);         /* 32 → 44px */
  --text-h3:clamp(1.5rem,2.4vw,1.875rem);      /* 24 → 30px */
  --text-h4:clamp(1.1875rem,1.75vw,1.375rem);  /* 19 → 22px */
  --text-body-size:clamp(1rem,1.35vw,1.0625rem);
  --text-small:0.875rem;
  --text-price:clamp(1.5rem,2.2vw,1.75rem);
  --text-script:clamp(1.75rem,2.9vw,2.25rem);
  --leading-display:1.05;
  --leading-body:1.55;
  --tracking-display:0.01em;
  --tracking-caps:0.04em;

  /* --- Spacing --- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --container-max:1120px;
  --container-pad:clamp(16px,4vw,32px);

  /* --- Radius, Schatten, Motiv --- */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-card:0 2px 8px rgba(11,45,25,.10);
  --shadow-lift:0 6px 20px rgba(11,45,25,.16);
  --shadow-badge:0 2px 6px rgba(11,45,25,.22);
  --skew-band:-4deg;
  --clip-diagonal-r:polygon(0 0,100% 0,94% 100%,0 100%);
  --clip-diagonal-l:polygon(6% 0,100% 0,100% 100%,0 100%);
  --ease-brand:cubic-bezier(.2,.7,.3,1);
  --speed-fast:120ms;
  --speed-med:200ms;

  /* --- Preis-Badge: EIN Winkel für alle (Wunsch: Winkel des Heute-Tags) --- */
  --price-rotate:4deg;

  /* --- Kopfhöhe (Header sticky) — steuert auch scroll-padding --- */
  --header-h:78px;
}

/* ===== 3. Basis ===== */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important}
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-size);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;   /* schräge Bänder dürfen nicht horizontal scrollen lassen */
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text-heading);
  margin:0 0 var(--space-3);
  text-transform:uppercase;
}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}
h4{font-size:var(--text-h4)}

p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}

a{color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
strong{font-weight:700}
img{max-width:100%;height:auto}
svg{max-width:100%}
::selection{background:var(--tb-lime-200)}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Script-Akzent — nur für einzelne Wörter, nie für Fließtext.
   line-height 1.2 statt 1: Yellowtail hat lange Unterlängen, bei 1 klebt das
   Wort am Text darunter. Zusätzlich fester Abstand nach unten. */
.tb-script{
  font-family:var(--font-script);
  font-size:var(--text-script);
  color:var(--tb-lime-700);   /* lime-600 wäre auf Papier nur 2,8:1 → AA verfehlt */
  line-height:1.2;
  text-transform:none;
  display:block;
  margin:0 0 var(--space-3);
}

.tb-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.tb-section{padding-block:var(--space-8)}
@media (min-width:760px){.tb-section{padding-block:var(--space-9)}}

.tb-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Zeilenumbruch nur auf schmalen Displays (Hero-Headline nach dem Komma) */
.tb-br-m{display:none}
@media (max-width:639px){.tb-br-m{display:block}}

.tb-skiplink{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  background:var(--surface-accent);color:var(--text-on-accent);
  font-weight:700;padding:12px 20px;border-radius:var(--radius-md);
  text-decoration:none;
}
.tb-skiplink:focus{top:var(--space-4);color:var(--text-on-accent)}

/* Icons — Lucide, inline SVG, Strichstärke 2.25 */
.tb-icon{
  width:20px;height:20px;flex-shrink:0;display:block;
  fill:none;stroke:currentColor;stroke-width:2.25;
  stroke-linecap:round;stroke-linejoin:round;
}
.tb-icon--sm{width:16px;height:16px}
.tb-icon--lg{width:26px;height:26px}
.tb-icon--xl{width:30px;height:30px}

/* ===== 4. Bewegung =====
   Reiner CSS-Schmuck: Einblenden beim Laden (Hero) und beim Scrollen
   (Karten, per animation-timeline). Kein zusätzliches JavaScript.
   Wichtig: „translate"/„scale" bleiben für Hover frei, die Reveal-Animation
   nutzt nur „transform" — beide Eigenschaften komponieren sauber. */

@keyframes tb-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tb-rise-script{
  from{opacity:0;transform:translateY(16px) rotate(-3deg)}
  to{opacity:1;transform:rotate(-3deg)}
}
@keyframes tb-slide-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes tb-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:no-preference){
  .tb-anim{animation:tb-rise 620ms var(--ease-brand) both}
  .tb-anim--1{animation-delay:60ms}
  .tb-anim--2{animation-delay:150ms}
  .tb-anim--3{animation-delay:240ms}
  .tb-anim--4{animation-delay:330ms}
  .tb-hero__script.tb-anim{animation-name:tb-rise-script}
  .tb-hero__media.tb-anim{animation:tb-slide-in 760ms var(--ease-brand) both}
  .tb-hero__band.tb-anim{
    animation:tb-grow 700ms 240ms var(--ease-brand) both;
    transform-origin:bottom left;
  }
}

/* Scroll-Reveal nur, wo der Browser es kann. Ohne Support passiert nichts —
   die Elemente sind dann von Anfang an sichtbar. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tb-reveal{
      animation:tb-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 58%;
    }
  }
}

/* ===== 5. Bilder & KI-Kennzeichnung ===== */

/* Fotoflächen randlos, Motiv füllt den Rahmen (Banner-Logik) */
.tb-media{position:relative;overflow:hidden;background:var(--tb-green-800)}
.tb-media img{width:100%;height:100%;object-fit:cover;display:block}

/* EU AI Act Art. 50: synthetische Bilder kennzeichnen. Bewusst zurückhaltend
   (klein, halbtransparent), aber noch lesbar — die Kennzeichnung muss
   erkennbar bleiben, sonst erfüllt sie ihren Zweck nicht. */
.tb-ai{
  position:absolute;right:var(--space-2);bottom:var(--space-2);z-index:2;
  font-family:var(--font-body);font-size:0.5625rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;line-height:1;
  color:rgba(255,255,255,.72);
  background:rgba(11,45,25,.30);
  padding:3px 6px 2px;border-radius:var(--radius-sm);
}
/* Im Hero läuft unten das Maigrün-Band über das Foto — Kennzeichnung nach oben
   rechts, damit sie nicht verdeckt wird. */
.tb-hero__media .tb-ai{top:var(--space-2);right:var(--space-2);bottom:auto}

/* ===== 6. Button ===== */

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:700;line-height:1.2;
  padding:10px 20px;font-size:1rem;
  min-height:44px;                       /* Hit-Target */
  border:2px solid transparent;
  border-radius:var(--radius-md);
  cursor:pointer;text-decoration:none;
  transition:background var(--speed-fast) var(--ease-brand),
             color var(--speed-fast) var(--ease-brand),
             translate var(--speed-fast) var(--ease-brand),
             box-shadow var(--speed-fast) var(--ease-brand);
}
.tb-btn:active{translate:0 1px}
.tb-btn--sm{padding:7px 14px;font-size:var(--text-small);min-height:44px}
.tb-btn--lg{padding:14px 28px;font-size:1.125rem;min-height:52px}

.tb-btn--primary{background:var(--surface-accent);color:var(--text-on-accent)}
.tb-btn--primary:hover{background:var(--tb-lime-600);color:var(--text-on-accent)}

.tb-btn--secondary{background:var(--surface-brand);color:var(--text-on-brand)}
.tb-btn--secondary:hover{background:var(--tb-green-600);color:var(--text-on-brand)}

.tb-btn--ghost{background:transparent;color:var(--tb-green-600);border-color:var(--border-strong)}
.tb-btn--ghost:hover{background:var(--tb-green-50);color:var(--tb-green-600)}

/* Auf dunklem Grund: Umriss in Creme */
.tb-btn--ghost-light{background:transparent;color:var(--tb-creme);border-color:var(--tb-creme)}
.tb-btn--ghost-light:hover{background:var(--tb-green-800);color:var(--tb-creme)}

@media (hover:hover){
  .tb-btn--primary:hover,.tb-btn--secondary:hover{translate:0 -2px;box-shadow:var(--shadow-card)}
}

/* ===== 7. Preis-Badge — Creme-Kreis, Anton, EIN Winkel für alle =====
   Größe kommt aus --badge, damit die Karte den Kreis mittig in ihrem
   Farbkeil platzieren kann (siehe §11). */

.tb-price{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--badge,68px);height:var(--badge,68px);border-radius:50%;
  background:var(--tb-cream-100);color:var(--text-price);
  font-family:var(--font-display);font-size:1.375rem;line-height:1;
  box-shadow:var(--shadow-badge);
  transform:rotate(var(--price-rotate));
  flex-shrink:0;
  transition:scale var(--speed-med) var(--ease-brand);
}
@media (min-width:600px){.tb-price{font-size:1.75rem}}
@media (min-width:900px){.tb-price{font-size:2rem}}

/* ===== 8. Header ===== */

.tb-header{
  position:sticky;top:0;z-index:50;
  background:var(--surface-brand);
  box-shadow:var(--shadow-card);
}
.tb-header__bar{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-3) var(--container-pad);
  display:flex;align-items:center;gap:var(--space-5);
  min-height:var(--header-h);
}
@media (min-width:860px){
  .tb-header__bar{padding-block:var(--space-4)}
}
/* Logo (Creme-Wortmarke) nur auf dunklem Grund — hier Tannengrün. Nie einfärben. */
.tb-header__logo{flex-shrink:0;display:flex;min-width:140px}
.tb-header__logo img{height:44px;width:auto;display:block}
@media (min-width:860px){.tb-header__logo img{height:46px}}

.tb-nav{display:flex;gap:var(--space-5);margin-left:auto;align-items:center}
.tb-nav a:not(.tb-btn){
  position:relative;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  color:var(--tb-creme);text-decoration:none;
  padding:10px 2px;
}
/* Unterstreichung wächst aus der Mitte — dezente Interaktion */
.tb-nav a:not(.tb-btn)::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--surface-accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--speed-med) var(--ease-brand);
}
.tb-nav a:not(.tb-btn):hover{color:var(--tb-creme)}
.tb-nav a:not(.tb-btn):hover::after,
.tb-nav a:not(.tb-btn):focus-visible::after{transform:scaleX(1)}

.tb-burger{
  display:none;margin-left:auto;
  background:none;border:none;cursor:pointer;
  color:var(--tb-creme);
  width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
}
.tb-navmobile{
  display:grid;gap:var(--space-1);
  padding:var(--space-2) var(--container-pad) var(--space-4);
  background:var(--tb-green-600);
}
.tb-navmobile a:not(.tb-btn){
  font-family:var(--font-body);font-weight:700;font-size:1.1rem;
  color:var(--tb-creme);text-decoration:none;padding:12px 4px;
}
.tb-navmobile .tb-btn{margin-top:var(--space-2)}

/* Ohne JS: Desktop-Nav ab 860px, darunter bleibt die Mobil-Liste offen sichtbar.
   Mit JS (html.js) wird sie eingeklappt und per Burger gesteuert. */
@media (max-width:859px){
  .tb-nav{display:none}
  .tb-burger{display:flex}
}
@media (min-width:860px){
  .tb-navmobile{display:none}
  .tb-burger{display:none}
}
.js .tb-navmobile{display:none}
.js .tb-header[data-open='true'] .tb-navmobile{display:grid}
@media (min-width:860px){
  .js .tb-header[data-open='true'] .tb-navmobile{display:none}
}

/* ===== 9. Hero =====
   Banner-Logik: Foto läuft randlos in die Fläche und ist durch eine harte
   Diagonale von der Tannengrün-Fläche getrennt — kein schräger Kasten. */

.tb-hero{position:relative;background:var(--surface-brand-deep);overflow:hidden}

.tb-hero__media{
  position:relative;width:100%;
  aspect-ratio:16/10;max-height:44vh;
  /* Mobil: Diagonale an der Unterkante, die Grünfläche schneidet ins Foto */
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
}

.tb-hero__inner{
  position:relative;z-index:1;
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-7) var(--container-pad) var(--space-8);
}
.tb-hero__text{max-width:34rem}
.tb-hero__script{
  color:var(--tb-lime-400);
  transform:rotate(-3deg);transform-origin:left;
  margin-bottom:var(--space-4);
}
.tb-hero h1{
  color:var(--tb-creme);
  line-height:1.08;
  margin:0 0 var(--space-5);
  text-wrap:balance;
}
.tb-hero__sub{
  font-size:1.15rem;color:var(--tb-cream-100);
  margin:0 0 var(--space-6);max-width:32em;
}
.tb-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* Schmale Displays: Buttons untereinander auf gleicher Breite statt versetzt */
@media (max-width:459px){
  .tb-hero__cta{flex-direction:column;align-items:stretch}
}

@media (min-width:900px){
  /* Foto rechts, randlos bis Ober-, Unter- und rechte Kante, Diagonalschnitt links */
  .tb-hero__media{
    position:absolute;top:0;right:0;bottom:0;left:auto;
    width:47%;height:100%;aspect-ratio:auto;max-height:none;
    clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
  }
  .tb-hero__inner{
    padding-block:clamp(80px,8.5vw,120px) clamp(96px,9.5vw,136px);
    min-height:clamp(460px,45vw,580px);
    display:flex;align-items:center;
  }
  /* 56%: beide Hero-Buttons passen ab 900px in eine Zeile, und der
     Diagonalschnitt des Fotos beginnt erst bei ~65% der Hero-Breite. */
  .tb-hero__text{max-width:min(30rem,56%)}
}

/* Diagonales Maigrün-Band als Sektionsübergang (Markenmotiv).
   Der ::after-Keil erbt den Skew und füllt darunter mit der Seitenfarbe. */
.tb-hero__band{
  position:absolute;left:0;right:0;bottom:0;height:20px;z-index:2;
  background:var(--surface-accent);
  transform:skewY(var(--skew-band));transform-origin:bottom left;
}
/* Der Keil unter dem Band muss die Farbe der Sektion tragen, die direkt
   unter dem Hero liegt, also die des Wochenmenüs (Seitenfarbe). Wird dort
   eine andere Sektion eingehängt, hier die Farbe mitziehen. */
.tb-hero__band::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:60vw;
  background:var(--surface-page);
}

/* ===== 10. Sektionsköpfe ===== */

.tb-sectionhead{margin-bottom:var(--space-6)}
.tb-sectionhead h2{margin:0}
.tb-sectionhead__sub{margin:var(--space-3) 0 0;color:var(--text-soft);max-width:44em}

/* ===== 11. Wochenkarte =====
   Der Markup-Block ist in index.html derzeit auskommentiert (Kundenwunsch).
   Dieses CSS bleibt unverändert stehen, damit die Karten beim Wiedereinschalten
   sofort wieder sitzen. */

.tb-wochenkarte{background:var(--surface-page);padding-bottom:0}
.tb-wochenkarte .tb-banner{margin-top:var(--space-6)}

.tb-cards{display:grid;gap:var(--space-3)}

/* --badge = Durchmesser des Preiskreises, --wedge = Breite des Farbkeils.
   Das rechte Padding ist so gesetzt, dass der Kreis exakt in der Mitte des
   Keils sitzt — auch mobil, wo er vorher links herausragte. */
.tb-tagescard{
  --badge:64px;
  --wedge:118px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  padding-block:var(--space-4);
  padding-left:var(--space-5);
  padding-right:calc((var(--wedge) - var(--badge)) / 2);
  box-shadow:var(--shadow-card);
  transition:translate var(--speed-med) var(--ease-brand),
             box-shadow var(--speed-med) var(--ease-brand);
}
@media (min-width:600px){
  .tb-tagescard{--badge:80px;--wedge:148px;padding-block:var(--space-5);padding-left:var(--space-6)}
}
@media (min-width:900px){
  .tb-tagescard{--badge:88px;--wedge:168px}
}
@media (hover:hover){
  .tb-tagescard:hover{translate:0 -3px;box-shadow:var(--shadow-lift)}
  .tb-tagescard:hover .tb-price{scale:1.06}
}

/* Diagonaler Farbkeil hinter dem Preis — füllt die Fläche rechts und
   übernimmt das Motiv der Social-Posts (Creme-Kreis auf abgeschrägtem Feld). */
.tb-tagescard::after{
  content:'';position:absolute;top:0;bottom:0;right:0;z-index:0;
  width:var(--wedge);
  background:var(--tb-cream-200);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
}
.tb-tagescard__body,.tb-tagescard .tb-price{position:relative;z-index:1}

.tb-tagescard__body{flex:1;min-width:0}

/* Feste Höhe der Zeile: so hat der Wochentag mit und ohne „Heute"-Pille
   denselben Abstand nach unten (vorher sprang Freitag heraus).
   nowrap ist dafür Pflicht — sonst rutscht die Pille auf schmalen Displays in
   eine zweite Zeile und die Heute-Karte wird wieder höher als die anderen. */
.tb-tagescard__meta{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:nowrap;
  min-height:30px;margin-bottom:var(--space-2);
}
.tb-tagescard__day{
  font-family:var(--font-script);font-size:1.6rem;line-height:1.15;
  color:var(--tb-lime-700);   /* auf Weiß: lime-600 = 2,9:1, lime-700 = 4,5:1 */
  white-space:nowrap;
}
.tb-tagescard__dish{
  font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.1;
  color:var(--text-heading);margin:0 0 var(--space-1);
}

/* Sehr schmale Displays: Kreis, Keil, Wochentag und Pille etwas kleiner,
   damit „Wochentag + HEUTE" garantiert in eine Zeile passt. */
@media (max-width:419px){
  .tb-tagescard{--badge:58px;--wedge:100px;padding-left:var(--space-4)}
  .tb-tagescard.is-heute{padding-left:calc(var(--space-4) + 12px)}
  .tb-tagescard.is-heute::before{width:16px}
  .tb-tagescard__meta{gap:var(--space-2);min-height:26px}
  .tb-tagescard__day{font-size:1.3rem}
  .tb-tagescard__dish{font-size:1.1875rem}
  .tb-tag{font-size:0.6875rem;padding:5px 8px 4px}
  .tb-price{font-size:1.25rem}
}
.tb-tagescard__side{
  font-weight:700;color:var(--text-soft);margin:0;font-size:1rem;
}

.tb-tag{
  font-family:var(--font-body);font-weight:700;font-size:0.75rem;
  letter-spacing:0.06em;text-transform:uppercase;line-height:1;
  border-radius:var(--radius-pill);padding:6px 11px 5px;
}
.tb-tag--heute{background:var(--surface-accent);color:var(--tb-green-900);display:none}
.tb-tag--ausverkauft{background:var(--border-soft);color:var(--text-soft)}

/* „HEUTE" — von script.js gesetzt. Ohne JS bleibt die Karte normal lesbar.
   Tannengrün statt Maigrün: hebt den Tag deutlich stärker von den weißen
   Karten ab (Wunsch „mehr Kontrast in die Farbe") und entspricht der
   Banner-/Post-Logik: dunkle Fläche, Creme-Gericht, Maigrün-Akzente. */
.tb-tagescard.is-heute{
  background:var(--tb-green-600);
  box-shadow:var(--shadow-lift);
  padding-left:calc(var(--space-5) + 14px);
}
@media (min-width:600px){
  .tb-tagescard.is-heute{padding-left:calc(var(--space-6) + 14px)}
}
/* Maigrün-Keil an der linken Kante — das Diagonal-Motiv im Kleinen */
.tb-tagescard.is-heute::before{
  content:'';position:absolute;left:0;top:-10%;bottom:-10%;width:22px;
  background:var(--surface-accent);
  transform:skewX(-6deg);transform-origin:top left;
}
.tb-tagescard.is-heute::after{background:var(--tb-green-800)}
.tb-tagescard.is-heute .tb-tagescard__day{color:var(--tb-lime-400)}
.tb-tagescard.is-heute .tb-tagescard__dish{color:var(--tb-creme)}
.tb-tagescard.is-heute .tb-tagescard__side{color:var(--tb-cream-200)}
.tb-tagescard.is-heute .tb-tag--heute{display:inline-block}
.tb-tagescard.is-heute .tb-tag--ausverkauft{background:var(--tb-green-800);color:var(--tb-cream-200)}

/* Ausverkauft — optionale Klasse pro Karte */
.tb-tagescard.is-ausverkauft{opacity:.75}
.tb-tagescard.is-ausverkauft .tb-tagescard__dish{text-decoration:line-through}

/* ===== 11b. Wochenmenü (Klemmbrett) =====
   Sektion direkt unter dem Hero: links Eyebrow und Headline, rechts das
   Klemmbrett mit dem Menü als echter Text auf dem Blatt.

   FLÄCHE: Seitenfarbe. Die Karte-Sektion darunter (§15) trägt die
   Marken-Creme, damit sind die beiden Menükarten optisch getrennt, ohne dass
   ein weiterer Buntton dazukommt.

   SCHRIFTGRADE: aus der Karte-Sektion übernommen. Gericht 24 bis 30px wie die
   Kartenüberschriften (--text-h3), Preis 24px, Wochentag 22,4px wie
   SCHRIFTGRADE auf dem Zettel: Gericht 26px, Preis 22px, Wochentag 20px.
   Notiert in der Einheit --u: 1u ist 1px, solange das Brett
   520px breit ist, und schrumpft darunter proportional mit. Damit stehen die
   Grade lesbar als px da und der Text kann trotzdem in keiner
   Bildschirmbreite über das Blatt laufen.

   WARUM DAS IN JEDER BREITE SITZT:
   Das Klemmbrett hat ein festes Seitenverhältnis (3000:3950 = Bildmaß des
   Freistellers). Das Blatt darüber ist in Prozent dieser Fläche gesetzt und
   sitzt damit in jeder Breite auf derselben Stelle des Papiers. Alles darin
   hängt an --u, also an der Brettbreite. Was einmal passt, passt überall.

   Papierkanten im Bild (gemessen, nicht geschätzt):
   links 5,33 %  ·  rechts 5,57 %  ·  oben 10,46 %  ·  unten 4,61 %
   Unterkante der Klammer inkl. Schatten: 16,5 %, darunter beginnt der Text. */

.tb-wochenmenu{background:var(--surface-page)}

.tb-wochenmenu__grid{display:grid;gap:var(--space-6);align-items:center}
.tb-wochenmenu__grid>*{min-width:0}
@media (min-width:900px){
  /* Rechte Spalte genau so breit wie das Brett, damit dessen rechte Kante
     auf der Rasterkante sitzt (gleiche Kante wie Kopf und Fußzeile). */
  .tb-wochenmenu__grid{
    grid-template-columns:1fr minmax(0,520px);
    gap:clamp(32px,4.5vw,64px);
  }
}
.tb-wochenmenu__head{margin-bottom:0}
.tb-wochenmenu__head .tb-sectionhead__sub{max-width:32em}

.tb-klemmbrett{
  position:relative;
  container-type:inline-size;      /* 1cqw = 1 % der Klemmbrettbreite */
  width:100%;
  max-width:520px;                 /* darüber wird das Brett zu dominant */
  margin-inline:auto;
  aspect-ratio:3000 / 3950;
  /* Schriftfaktor: mehr Tage auf dem Zettel → kleinerer Grad.
     Deckt 3 bis 5 Einträge ab, ohne dass Text über das Papier läuft. */
  --m:1;
}
.tb-klemmbrett:has(.tb-menuliste > li:nth-child(4)){--m:.86}
.tb-klemmbrett:has(.tb-menuliste > li:nth-child(5)){--m:.74}

/* Schlagschatten über filter, nicht über box-shadow: box-shadow würde den
   Schatten um das rechteckige Bild legen, drop-shadow folgt der Kontur des
   Freistellers. Maße in cqw, damit der Schatten mit dem Brett schrumpft:
   1,54cqw sind bei 520px Brettbreite 8px. Zwei Lagen wie --shadow-card und
   --shadow-lift, eine harte für die Kante, eine weiche für die Tiefe. */
.tb-klemmbrett__board{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0.38cqw 0.58cqw rgba(11,45,25,.10))
         drop-shadow(0 1.54cqw 3.08cqw rgba(11,45,25,.16));
}

/* Das Blatt: prozentualer Rahmen auf dem Papier.
   --u wird hier gesetzt, nicht auf .tb-klemmbrett: cqw-Einheiten beziehen
   sich immer auf einen Vorfahren, ein Container kann sich nicht selbst
   messen. 0,1923cqw sind bei 520px Brettbreite genau 1px. */
.tb-klemmbrett__blatt{
  --u:min(1px, 0.1923cqw);
  position:absolute;
  left:5.4%;right:5.6%;top:16.5%;bottom:4.7%;
  display:flex;flex-direction:column;
  padding-inline:calc(26 * var(--u));
}

/* Die Tage teilen sich die Blatthöhe: jede Zeile bekommt ihre Inhaltshöhe
   plus einen gleichen Anteil des freien Platzes. Damit ist das Blatt bei
   drei wie bei fünf Tagen gleichmäßig gefüllt, ohne größere Schrift. */
.tb-menuliste{
  list-style:none;margin:0;padding:0;
  flex:1;display:flex;flex-direction:column;
}
.tb-menuliste > li{
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(10 * var(--u) * var(--m));
}
.tb-menuliste > li + li{border-top:1px dotted var(--tb-cream-400)}

.tb-menuliste__tag{
  display:block;
  margin-bottom:calc(8 * var(--u) * var(--m));   /* Luft zum Gericht */
  font-family:var(--font-script);
  font-size:calc(20 * var(--u) * var(--m));
  line-height:1.1;
  color:var(--tb-lime-700);        /* auf Weiß 4,5:1, lime-600 wäre zu schwach */
  white-space:nowrap;
}

/* Gericht und Preis in einer Zeile, wie Name und Preis in der Karte:
   so gehört der Preis sichtbar zu seinem Gericht. Der Preis sitzt auf der
   Grundlinie der LETZTEN Gerichtszeile (last baseline), damit er auch bei
   zweizeiligen Gerichten unten bündig steht. flex-end davor ist der
   Rückfall für Browser ohne last-baseline, dort fluchten die Unterkanten. */
.tb-menuliste__zeile{
  display:flex;justify-content:space-between;
  align-items:flex-end;
  align-items:last baseline;
  gap:calc(16 * var(--u) * var(--m));
}
/* text-transform:uppercase macht aus ß ein SS (so schreibt es Unicode vor).
   Wo das ß stehen bleiben soll, wird es im Markup in
   <span class="tb-eszett">ß</span> gefasst: text-transform gilt pro Element,
   ein Kind mit "none" bleibt unverändert. */
.tb-eszett{text-transform:none}

.tb-menuliste__gericht{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:calc(26 * var(--u) * var(--m));
  line-height:1.1;
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  color:var(--text-heading);
  text-wrap:balance;
}
.tb-menuliste__preis{
  font-family:var(--font-display);
  font-size:calc(22 * var(--u) * var(--m));
  line-height:1.1;
  color:var(--text-price);
  white-space:nowrap;flex-shrink:0;
}

/* Fallback für Browser ohne Container-Queries oder :has() (vor 2022/23):
   kein Klemmbrett, sondern eine gewöhnliche weiße Karte. Der Ruhezustand
   ist damit auch dort ein fertiger, lesbarer Zustand. */
@supports not (container-type:inline-size){
  .tb-klemmbrett{aspect-ratio:auto}
  .tb-klemmbrett__board{display:none}
  .tb-klemmbrett__blatt{
    position:static;
    background:var(--surface-card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:var(--space-5) var(--space-5) var(--space-6);
  }
  .tb-menuliste > li{padding-block:var(--space-4)}
  .tb-menuliste__tag{font-size:1.4rem;margin-bottom:var(--space-2)}
  .tb-menuliste__zeile{gap:var(--space-3)}
  .tb-menuliste__gericht{font-size:var(--text-h3)}
  .tb-menuliste__preis{font-size:1.5rem}
}

/* ===== 12. Info-Banner ===== */

.tb-banner{
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  font-family:var(--font-body);
}
.tb-banner strong{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tracking-caps);font-size:1.05rem;white-space:nowrap;
}
.tb-banner--info{background:var(--status-info-bg);color:var(--status-info-text)}
.tb-banner--info strong{color:var(--tb-green-500)}
.tb-banner--warning{background:var(--status-warn-bg);color:var(--status-warn-text)}
.tb-banner--warning strong{color:var(--tb-lime-700)}
.tb-banner--closed{background:var(--status-closed-bg);color:var(--status-closed-text)}
.tb-banner--closed strong{color:var(--tb-creme)}

/* ===== 13. Öffnungszeiten — gerades Tannengrün-Band =====
   Bewusst NICHT geschert: die Unterkante muss bündig auf dem Foto darunter
   sitzen. Das Diagonal-Motiv sitzt stattdessen als Maigrün-Keil auf der
   Oberkante.

   Der Keil liegt in einem Streifen über der Sektion (margin-top). Dieser
   Streifen braucht ZWEI Lagen: ::before füllt ihn vollflächig mit der Farbe
   der Sektion darüber, ::after legt den geschnittenen Maigrün-Keil darauf.
   Mit nur einer Lage schaute in der freien Ecke die Seitenfarbe durch, das
   war der helle Rand über dem Band. Wird die Farbe der Karte-Sektion (§15)
   geändert, muss ::before mitziehen. */

.tb-zeiten{
  position:relative;
  background:var(--surface-brand);
  color:var(--text-on-brand);
  padding-block:var(--space-8) var(--space-8);
  margin-top:clamp(30px,4.5vw,46px);   /* Platz für den Keil darüber */
}
.tb-zeiten::before,
.tb-zeiten::after{
  content:'';position:absolute;left:0;right:0;
  top:calc(-1 * clamp(30px,4.5vw,46px));
  height:clamp(30px,4.5vw,46px);
}
/* Grundfläche = Farbe der Karte-Sektion darüber */
.tb-zeiten::before{background:var(--surface-brand)}
/* Keil darüber */
.tb-zeiten::after{
  background:var(--surface-accent);
  clip-path:polygon(0 42%,100% 0,100% 100%,0 100%);
}
.tb-zeiten h2{color:var(--tb-creme);margin:0}
.tb-zeiten .tb-script{color:var(--tb-lime-400)}
.tb-zeiten__grid{
  display:grid;gap:var(--space-6);
  grid-template-columns:1fr;
}
/* Erst ab 900px zweispaltig — bei 800px wird der Hinweiskasten so schmal,
   dass die Zeilen zerbrechen. */
@media (min-width:900px){
  .tb-zeiten__grid{grid-template-columns:1.15fr 1fr;align-items:center;gap:var(--space-8)}
}
.tb-zeiten dl{margin:var(--space-5) 0 0;display:grid;gap:var(--space-3);max-width:34em}
.tb-zeiten__row{
  display:flex;justify-content:space-between;gap:var(--space-4);
  flex-wrap:wrap;padding-bottom:var(--space-3);
  border-bottom:1px solid rgba(223,215,180,.25);
}
.tb-zeiten__row:last-child{border-bottom:none;padding-bottom:0}
.tb-zeiten dt{margin:0;font-size:1.0625rem}
.tb-zeiten dd{margin:0;font-weight:700;font-size:1.0625rem;white-space:nowrap}
.tb-zeiten__note{font-size:var(--text-small);color:var(--tb-cream-200);margin:var(--space-5) 0 0}

/* ===== 14. Foto-Streifen =====
   Gerade Kanten, oben bündig am Öffnungszeiten-Band.
   aspect-ratio entspricht exakt der Bilddatei (1234×440) und es gibt kein
   min-height — dadurch wird das Motiv bis ca. 2000 px Fensterbreite nie
   angeschnitten. Beim Bildtausch: aspect-ratio auf das neue Format setzen. */

.tb-strip{
  position:relative;width:100%;
  aspect-ratio:1234/440;
  max-height:520px;
  margin-block:0;
}

/* ===== 15. Speisekarte ===== */

/* Trägt Tannengrün, denselben Ton wie das Öffnungszeiten-Band darunter (§13),
   und hebt sich damit von der Wochenmenü-Sektion (§11b) darüber ab, die auf
   der Seitenfarbe steht. Der Maigrün-Keil zwischen Karte und Öffnungszeiten
   liegt dadurch als Band in einer durchgehenden Grünfläche, genau das
   Diagonal-Motiv der Marke. Die Fläche läuft unter dem Keil weiter, damit
   dort keine helle Kante stehen bleibt. Kommt die Wochenkarte (§11) zurück,
   hängt sie dazwischen: dann hier padding-top auf var(--space-6) bzw.
   var(--space-7) reduzieren. */
.tb-karteblock{
  background:var(--surface-brand);
  padding-top:var(--space-8);padding-bottom:var(--space-8);
}
/* Auf Tannengrün: Creme 4,6:1, Maigrün-400 3,6:1 und damit nur für den
   Script-Akzent ab 28px zulässig. Gleiche Wahl wie im Band darunter. */
.tb-karteblock .tb-sectionhead h2{color:var(--tb-creme)}
.tb-karteblock .tb-sectionhead .tb-script{color:var(--tb-lime-400)}
@media (min-width:760px){.tb-karteblock{padding-top:var(--space-9)}}
.tb-karten{display:grid;gap:var(--space-5);align-items:start}
@media (min-width:900px){
  .tb-karten{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
}

.tb-karte{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-5) var(--space-4) var(--space-5);
}
@media (min-width:600px){.tb-karte{padding:var(--space-6) var(--space-5)}}

.tb-karte__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-2) var(--space-4);flex-wrap:wrap;
  border-bottom:3px solid var(--surface-accent);
  padding:0 var(--space-3) var(--space-3);
  margin-bottom:var(--space-3);
}
.tb-karte__head h3{margin:0}
.tb-karte__note{
  font-family:var(--font-script);font-size:1.4rem;line-height:1.2;
  color:var(--tb-lime-700);
}

.tb-karte ul{list-style:none;margin:0;padding:0;display:grid}

/* Klassische Karten-Optik: gepunktete Trennlinie pro Zeile statt einer
   Punktstrecke zwischen Name und Preis — die bleibt bei drei schmalen Spalten
   als Stummel stehen, sobald ein Gerichtname umbricht. */
.tb-karte li{
  padding:var(--space-3) var(--space-2);
  border-bottom:1px dotted var(--tb-cream-400);
  border-radius:var(--radius-sm);
  transition:background var(--speed-fast) var(--ease-brand);
}
.tb-karte li:last-child{border-bottom:none}
@media (hover:hover){.tb-karte li:hover{background:var(--surface-warm)}}

.tb-karte__item{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-3);
}
.tb-karte__name{font-weight:700;font-size:1.0625rem;color:var(--text-body)}
/* Maigrün nie als Fließtext — Preise stehen in Tannengrün-600 */
.tb-karte__price{
  font-family:var(--font-display);font-size:1.25rem;
  color:var(--text-price);white-space:nowrap;flex-shrink:0;
}
@media (min-width:1000px){.tb-karte__price{font-size:1.375rem}}
/* --text-muted wäre bei 15px nur 3,9:1 → --text-soft (7,5:1) */
.tb-karte__desc{
  display:block;margin-top:1px;
  font-size:0.9375rem;color:var(--text-soft);line-height:1.4;max-width:36em;
}

/* ===== 16. Kontakt & Anfahrt =====
   Dunkle Fläche — trennt die Speisekarte optisch von der Abschluss-Sektion und
   hält den Wechsel hell/dunkel über die ganze Seite. */

.tb-kontakt{
  background:var(--surface-brand-deep);
  color:var(--tb-cream-100);
  padding-top:var(--space-8);
}
.tb-kontakt h2{color:var(--tb-creme)}
.tb-kontakt .tb-script{color:var(--tb-lime-400)}
.tb-kontakt .tb-kontaktlink__text{color:var(--tb-creme)}
.tb-kontakt .tb-kontaktlink:hover .tb-kontaktlink__text{color:var(--tb-lime-400)}
.tb-kontakt address{color:var(--tb-cream-100)}
/* Der Anfahrt-Kasten bleibt creme: heller Block auf dunklem Grund */
.tb-kontakt .tb-anfahrt h3{color:var(--text-heading)}
.tb-kontakt .tb-anfahrt p{color:var(--text-soft)}

.tb-kontakt__grid{display:grid;gap:var(--space-7)}
@media (min-width:900px){.tb-kontakt__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}}

.tb-kontaktliste{display:grid;gap:var(--space-5);justify-items:start}
.tb-kontaktrow{display:flex;align-items:flex-start;gap:var(--space-4)}
.tb-kontaktrow--center{align-items:center}
.tb-bubble{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  transition:scale var(--speed-med) var(--ease-brand);
}
.tb-bubble--accent{background:var(--surface-accent);color:var(--text-on-accent)}
.tb-bubble--warm{background:var(--border-soft);color:var(--tb-green-600)}
.tb-bubble--brand{background:var(--surface-brand);color:var(--tb-creme);width:64px;height:64px}

/* Kontaktweg groß in Anton — Kernaktion (E-Mail, es gibt kein Telefon).
   inline-flex + fit-content: der Link ist nur so breit wie sein Inhalt,
   nicht bis zum rechten Spaltenrand klickbar. */
.tb-kontaktlink{
  display:inline-flex;align-items:center;gap:var(--space-4);
  width:fit-content;max-width:100%;
  text-decoration:none;min-height:44px;
}
.tb-kontaktlink__text{
  font-family:var(--font-display);font-size:clamp(1.375rem,2.6vw,1.875rem);
  word-break:break-word;
  color:var(--tb-green-600);line-height:1;
}
.tb-kontaktlink:hover .tb-kontaktlink__text{color:var(--tb-green-500)}
@media (hover:hover){.tb-kontaktlink:hover .tb-bubble{scale:1.08}}
.tb-kontaktrow address{font-style:normal;line-height:1.5;padding-top:2px}

.tb-anfahrt{
  background:var(--surface-warm);border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);
}
.tb-anfahrt__body{flex:1;min-width:200px}
.tb-anfahrt h3{font-size:var(--text-h4);margin:0 0 var(--space-2)}
.tb-anfahrt p{margin:0;color:var(--text-soft)}

/* ===== 17. Abschluss-Sektion „Zum Mitnehmen" =====
   Helle Creme-Fläche: der Footer darunter ist dunkel, dadurch wechseln
   die Flächen durchgehend hell / dunkel / hell / dunkel. */

.tb-togo{
  position:relative;overflow:hidden;
  background:var(--surface-warm);color:var(--text-body);
}
.tb-togo__grid{
  position:relative;z-index:1;
  padding-block:var(--space-7) var(--space-8);
}
.tb-togo h2{margin:0}
.tb-togo__text p{margin:var(--space-4) 0 var(--space-6);max-width:38em}
.tb-togo__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* Mobil: Fotoband über dem Text, gerade Kanten (kein Schrägschnitt) */
.tb-togo__media{
  position:relative;width:100%;
  aspect-ratio:16/10;max-height:300px;
}
@media (min-width:900px){
  /* Desktop: Foto randlos links, Diagonalschnitt rechts */
  .tb-togo__media{
    position:absolute;top:0;bottom:0;left:0;
    width:44%;height:100%;aspect-ratio:auto;max-height:none;
    clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
  }
  .tb-togo__grid{padding-block:var(--space-9)}
  .tb-togo__text{margin-left:48%}
}

/* ===== 18. Footer ===== */

.tb-footer{background:var(--tb-green-800);color:var(--tb-cream-100)}
.tb-footer__grid{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-7) var(--container-pad) var(--space-6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-6);
}
/* Wortmarke im Footer bewusst groß — doppelte Breite gegenüber dem Header */
.tb-footer__logo{height:76px;width:auto;display:block;margin-bottom:var(--space-5)}
.tb-footer__claim{font-size:var(--text-small);margin:0;color:var(--tb-cream-200);max-width:26em}
.tb-footer__col{display:grid;gap:var(--space-3);align-content:start;justify-items:start}
.tb-footer__row{display:flex;align-items:center;gap:var(--space-3)}
/* Links nur so breit wie ihr Inhalt — nicht die ganze Spalte klickbar */
a.tb-footer__row{width:fit-content;max-width:100%}
.tb-footer a{color:var(--tb-cream-100);text-decoration:none}
.tb-footer a:hover{color:var(--tb-white);text-decoration:underline}
.tb-footer .tb-icon{color:var(--surface-accent)}
.tb-footer__bottom{border-top:1px solid rgba(223,215,180,.2)}
.tb-footer__bottom-inner{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-4) var(--container-pad);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  font-size:var(--text-small);color:var(--tb-cream-200);
}
.tb-footer__links{display:flex;gap:var(--space-5)}

/* ===== 19. Fließtext-Seiten (Impressum, Datenschutz) ===== */

.tb-prose{max-width:70ch}
.tb-prose h1{margin-bottom:var(--space-6)}
.tb-prose h2{font-size:var(--text-h3);margin-top:var(--space-7)}
.tb-prose h3{font-size:var(--text-h4);margin-top:var(--space-6)}
.tb-prose ul{padding-left:1.25em;margin:0 0 var(--space-4)}
.tb-prose li{margin-bottom:var(--space-2)}