/* Ubuntu - vom Inhaber gewuenschte Textschrift. Ubuntu Font Licence 1.0, Webnutzung erlaubt. Lokal ausgeliefert. */
@font-face{font-family:Ubuntu;src:url(schriften/ubuntu-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ubuntu;src:url(schriften/ubuntu-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Ubuntu;src:url(schriften/ubuntu-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Barlow + Caveat - nur Tiny Tasty (Body-Klasse .tt-schrift auf tiny-tasty.html und
   menuekarte.html). SIL OFL 1.1, lokal ausgeliefert, Herkunft: schriften/QUELLEN.md.
   Der Browser laedt eine Datei erst, wenn ein Element sie benutzt - Seiten ohne
   .tt-schrift laden diese Dateien nie. */
@font-face{font-family:Barlow;src:url(schriften/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(schriften/barlow-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(schriften/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(schriften/barlow-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url(schriften/caveat-variable.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(schriften/archivo-variable.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
/* Barlow Condensed - Tiny Tasty (.tt-schrift: H1, H2, Gerichtnamen) und The Rentalist (.rentalist: Kategorie-Ueberschriften). SIL OFL 1.1, lokal, Herkunft: schriften/QUELLEN.md. Eingebunden ist nur Bold (700). */
@font-face{font-family:'Barlow Condensed';src:url(schriften/barlow-condensed-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Farben direkt aus dem Original-Logo gemessen. Alle Textfarben ueber 4,5:1 auf Weiss. */
:root{--bg:#fffefa;--panel:#fff;--ink:#1c2b23;--muted:#4d5a52;--accent:#006a3f;--accent-dark:#00512f;--red:#c00022;--line:#dbe2dc;--soft:#eef3ee;--gold:#c00022;--radius:18px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 Ubuntu,'Segoe UI',Arial,sans-serif}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Ubuntu,'Segoe UI',Arial,sans-serif;line-height:1.14;font-weight:700}h1{font-size:clamp(36px,5vw,62px);letter-spacing:-.02em}h2{font-size:clamp(28px,3.3vw,40px);letter-spacing:-.015em}h3{font-size:26px}p+p{margin-top:16px}img{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}button{font:inherit}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px} .wrap{width:min(1140px,calc(100% - 48px));margin:auto}.skip{position:fixed;top:-100px;left:20px;padding:12px;background:var(--panel);z-index:100}.skip:focus{top:10px}.header{background:var(--bg);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;gap:24px;min-height:100px}.logo{margin-right:auto}.logo img{width:172px;height:66px;object-fit:contain}.navlinks{display:flex;gap:26px;align-items:center}.navlinks a{text-decoration:none;font-size:14px;padding:12px 0}.navlinks a[aria-current]{color:var(--accent);border-bottom:2px solid var(--accent)}.menu-toggle{display:none}.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:13px 24px;border:1px solid var(--accent);border-radius:40px;background:var(--accent);color:#fff;text-decoration:none;font-size:14px;font-weight:650;min-height:48px}.btn:hover{filter:brightness(.92)}.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.eyebrow{color:var(--accent);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px}.hero{padding:76px 0 86px;background:linear-gradient(150deg,var(--soft),var(--bg) 65%)}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}.hero h1 em{font-style:normal;color:var(--accent)}.lead{font-size:18px;color:var(--muted);max-width:57ch;margin-top:24px}.hero-photo{position:relative;padding-bottom:28px}.hero-photo>img{width:100%;height:420px;object-fit:cover;border-radius:100px 18px 18px 18px}.photo-caption{position:absolute;bottom:0;left:-20px;background:var(--panel);padding:18px 25px;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #182b1910;font-size:14px}.photo-caption strong{display:block;font-family:Ubuntu,'Segoe UI',Arial,sans-serif;font-size:24px}.section{padding:80px 0}.soft{background:var(--soft)}.section-head{max-width:640px;margin-bottom:38px}.section-head p{color:var(--muted);margin-top:18px}.center{text-align:center;margin-left:auto;margin-right:auto}.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}.card-body{padding:30px}.card-body p{margin-top:14px;color:var(--muted)}.brand-picture{height:270px;display:flex;align-items:center;justify-content:center;background:#18130f center/cover}.brand-picture.tasty{background-image:linear-gradient(#0004,#0004),url(assets/tasty-karte-ki.webp)}.brand-picture.rental{background-image:linear-gradient(#0005,#0005),url(assets/rental-karte-ki.webp)}.brand-picture img{max-height:190px;max-width:230px;object-fit:contain}.brand-picture.tasty img{border-radius:50%}.small-label{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:12px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.feature{border-top:1px solid var(--line);padding-top:24px}.feature .number{display:block;color:var(--accent);font-size:13px;letter-spacing:.1em;margin-bottom:22px}.feature p{margin-top:15px;color:var(--muted)}.cta{background:#244837;color:white;padding:64px 0}.cta .wrap{display:flex;justify-content:space-between;gap:40px;align-items:center}.cta p{color:#dfebe1;margin-top:15px}.cta .btn{background:#fff;color:#244837;border-color:#fff;white-space:nowrap}.footer{padding:44px 0 24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.footer-grid{display:flex;justify-content:space-between;gap:30px}.footer strong{color:var(--ink);font-size:16px}.footer-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.footer-links span{margin-right:auto}.dark{--bg:#161412;--panel:#211e1a;--ink:#fff5e7;--muted:#d4c7b5;--accent:#ffb36b;--line:#514639;--soft:#1d1915;--gold:#ffb36b}.dark .btn{color:#20150e}.dark .btn.secondary{color:var(--ink)}.dark .header{background:#161412}.dark .logo{background:#fffefa;border-radius:8px;padding:5px 12px}.brand-hero{padding:70px 0;background:linear-gradient(90deg,#100d0be8,#100d0b55),url(assets/tt-hero-ki.webp) center/cover;color:var(--ink)}.brand-hero.rental-hero{background-image:linear-gradient(90deg,#100d0bf0,#100d0b80),url(assets/rental-hero-ki.webp)}.brand-hero .wrap{display:flex;gap:70px;align-items:center}.brand-hero .brandmark{width:190px;max-height:210px;object-fit:contain;flex-shrink:0}.brand-hero .brandmark.round{border-radius:50%}.brand-hero h1{font-size:clamp(38px,5vw,62px)}.brand-hero .lead{color:#ead9c4}.jumpnav{display:flex;flex-wrap:wrap;gap:10px;padding:24px 0}.jumpnav a{border:1px solid var(--line);border-radius:30px;text-decoration:none;padding:9px 17px;font-size:13px;min-height:44px}.jumpnav a:hover{background:var(--soft)}.menu-section{padding:45px 0;scroll-margin-top:20px}.menu-section h2{margin-bottom:25px}.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dish{padding:27px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.dish-head{display:flex;gap:20px;justify-content:space-between;align-items:baseline}.dish h3{font-size:24px}.price{font-size:19px;color:var(--accent);font-weight:650;white-space:nowrap}.price small{font-size:12px;font-weight:400;margin-left:2px}.dish p{margin-top:15px;color:var(--muted);font-size:14px}.dish .extra{padding-top:12px;border-top:1px solid var(--line);font-size:12px}.notice{border-left:3px solid var(--accent);padding:16px 22px;background:var(--soft);color:var(--muted);font-size:13px;margin-top:24px}.category{display:grid;grid-template-columns:250px 1fr;gap:35px;border-top:1px solid var(--line);padding:40px 0;scroll-margin-top:20px}.category .product{height:220px;width:100%;object-fit:contain;background:#fff;border-radius:14px;padding:20px}.category h2{font-size:32px;margin-bottom:20px}.category:nth-of-type(3n+1){--accent:#9dcfdc}.category:nth-of-type(3n+2){--accent:#a8d39a}.category h2{color:var(--accent)}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;color:var(--muted);font-size:12px;font-weight:500}td,th{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}td:first-child,th:first-child{padding-left:0}td:not(:first-child),th:not(:first-child){text-align:right;white-space:nowrap}td:not(:first-child){color:var(--ink);font-weight:600}.season-image{width:100%;height:240px;object-fit:cover;object-position:center 30%}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.contact-box{padding:32px;border:1px solid var(--line);border-radius:18px}.contact-box h2{font-size:28px;margin-bottom:22px}.contact-box a{overflow-wrap:anywhere}.contact-box address{font-style:normal}.contact-links{display:grid;gap:14px;margin-top:24px}.contact-links a{font-size:20px}.faq{max-width:850px}.faq h2{margin-bottom:25px}details{border-bottom:1px solid var(--line);padding:19px 0}summary{cursor:pointer;font-weight:600;padding:5px 0}details p{color:var(--muted);margin:14px 0}.legal{max-width:780px;min-height:50vh}.legal h2{font-size:26px;margin:30px 0 15px}.legal p{margin-top:15px}
@media(max-width:900px){.nav{flex-wrap:wrap;gap:12px;padding:14px 0}.nav>.btn{display:none}.navlinks{gap:20px}.hero-grid{gap:30px}.hero-photo>img{height:360px}.hero{padding:55px 0}.brand-hero .wrap{gap:35px}.category{grid-template-columns:180px 1fr}}
@media(max-width:650px){.wrap{width:calc(100% - 32px)}.topline{font-size:10px}.nav{min-height:82px}.logo img{width:145px;height:52px}.menu-toggle{display:block;border:1px solid var(--line);color:var(--ink);background:var(--panel);padding:9px 16px;border-radius:25px;min-height:44px}.navlinks{width:100%;flex-wrap:wrap;gap:6px 22px}.js .navlinks{display:none}.js .navlinks.open{display:flex}.navlinks a{font-size:14px}.hero-grid,.cards,.features,.menu-list,.contact-grid{grid-template-columns:1fr}.hero-grid{gap:35px}.hero-photo{margin-left:12px}.hero-photo>img{height:290px;border-top-left-radius:65px}.photo-caption{left:-12px}.hero{padding:42px 0 50px}.section{padding:52px 0}.hero h1{font-size:44px}.lead{font-size:16px}.brand-picture{height:240px}.cta .wrap,.footer-grid{display:block}.cta .btn{margin-top:26px}.footer-grid>div+div{margin-top:22px}.footer-links{gap:15px}.footer-links span{width:100%}.brand-hero{padding:40px 0}.brand-hero .wrap{display:block}.brand-hero .brandmark{width:120px;margin-bottom:26px}.category{grid-template-columns:1fr;gap:22px}.category .product{height:190px;width:200px}.dish{padding:22px}.dish-head{flex-wrap:wrap;gap:12px}.brand-hero h1{font-size:40px}.jumpnav{gap:8px}.jumpnav a{font-size:12px}.contact-box{padding:24px}}
/* Original artwork: generous proportions, alpha transparency, no white tiles. */
.nav{flex-wrap:wrap;justify-content:space-between;padding:24px 0 18px;gap:18px 28px}
.logo{flex:1 1 100%;margin:0;display:flex;justify-content:center}
.logo img{width:min(460px,78vw);height:auto;max-height:none;object-fit:contain}
.dark .logo{background:transparent;border-radius:0;padding:0}
.navlinks{flex:1;justify-content:center;gap:32px}
.nav>.btn{display:inline-flex}
.brand-hero .brandmark:not(.round){width:360px;max-height:none}
.brand-picture.rental img{max-width:390px;width:80%;max-height:235px}
.change-section{position:relative;isolation:isolate;overflow:hidden;padding:82px 0;background:#100e0d;color:#fff}


.change-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}
.change-section .eyebrow{color:#ffb36b}
.change-section h2{max-width:15ch;color:#fff}
.change-copy{font-size:17px;color:#f3eee8;max-width:650px}
.change-copy p+p{margin-top:20px}
.change-copy .tasty-name{color:#ff9a55;font-family:Ubuntu,'Segoe UI',Arial,sans-serif;font-size:1.15em}
.change-copy .rental-name{color:#fff;font-family:Ubuntu,'Segoe UI',Arial,sans-serif;font-size:1.15em}
.change-highlight{margin:28px 0;padding:20px 24px;border-left:3px solid #ff6c37;background:#0007}
.change-highlight strong{font-size:20px;color:#fff}
.category{grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr);gap:48px;padding:54px 0;align-items:start}
.category>div:first-child{position:sticky;top:30px;display:flex;align-items:center;justify-content:center;min-height:310px;padding:24px 12px}
.category .product{width:100%;height:auto;max-width:390px;max-height:430px;object-fit:contain;background:transparent;border:0;border-radius:0;padding:0;filter:drop-shadow(0 14px 15px #0005)}
.category#glaeser .product,.category#moebel .product,.category#diverses .product{max-height:390px;width:auto;max-width:100%}
@media(max-width:900px){.navlinks{gap:22px}.nav>.btn{display:none}.category{grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);gap:30px}}
@media(max-width:900px){.change-grid{grid-template-columns:1fr;gap:32px}.change-section h2{max-width:18ch}}
@media(max-width:650px){.nav{gap:14px;padding:18px 0 14px}.logo{flex-basis:100%}.logo img{width:min(420px,94vw);height:auto}.menu-toggle{margin-left:auto}.navlinks{justify-content:flex-start;flex-basis:100%}.category{grid-template-columns:1fr;gap:25px;padding:36px 0}.category>div:first-child{position:static;min-height:0;padding:15px 5px}.category .product{width:auto;max-width:100%;max-height:300px}.category#glaeser .product,.category#moebel .product,.category#diverses .product{max-height:290px}.brand-hero .brandmark:not(.round){width:290px;max-width:90%;margin:0 auto 35px}.brand-picture.rental img{max-width:320px}}
@media(max-width:650px){.change-section{padding:56px 0}.change-copy{font-size:16px}.change-highlight{padding:17px 19px}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.btn{transition:filter .15s}}

/* Runde Kontaktsymbole im Kopfbereich, wie auf der bisherigen Website */
.headicons{display:flex;gap:9px;align-items:center}
.headicons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;text-decoration:none;flex:none}
.headicons a:hover{background:var(--accent)}
.headicons svg{width:20px;height:20px;display:block}
.dark .headicons a{background:#fff;color:#12201a}
.dark .headicons a:hover{background:var(--accent);color:#fff}

/* ------------------------------------------------------------------
   Kopfbereich, Stand 10.09.2026
   Aufbau wie auf der bisherigen Website: Logo links, Navigation und
   die vier runden Kontaktsymbole rechts. Muss nach allen aelteren
   .nav-/.logo-Regeln stehen, sonst greifen die frueheren Ueberschreibungen.
   ------------------------------------------------------------------ */
.nav{flex-wrap:nowrap;justify-content:flex-start;gap:22px;padding:0;min-height:96px}
.logo{flex:0 0 auto;margin:0 auto 0 0;display:block;background:transparent;padding:0;border-radius:0}
.logo img{width:300px;height:auto;max-height:72px;object-fit:contain}
.navlinks{gap:24px}

@media(max-width:1000px){
.nav{flex-wrap:wrap;justify-content:space-between;padding:16px 0;gap:14px 22px;min-height:0}
.logo{margin:0}
.navlinks{order:3;width:100%;justify-content:center}
}

@media(max-width:650px){
.logo img{width:210px}
.headicons{order:2;width:100%;justify-content:center;gap:11px}
.navlinks{order:3;justify-content:flex-start}
}

/* ------------------------------------------------------------------
   Abschnitt "Partyservice Blanke wird noch kompakter fuer Sie"
   Stand 11.09.2026: hell gehalten. Die Startseite bleibt durchgehend
   das gewohnte Weiss; dunkel wird es erst auf Tiny Tasty und Rentalist.
   ------------------------------------------------------------------ */
.change-section{background:var(--soft);color:var(--ink)}
.change-section::before,.change-section::after{display:none}
.change-section .eyebrow{color:var(--accent)}
.change-section h2{color:var(--ink)}
.change-copy{color:var(--ink)}
.change-copy .tasty-name{color:var(--accent);font-weight:700}
.change-copy .rental-name{color:var(--red);font-weight:700}
.change-highlight{border-left:3px solid var(--accent);background:var(--panel)}

/* ------------------------------------------------------------------
   Maus-Effekte wie auf der bisherigen Website, Stand 11.09.2026
   - Logo und Bilder werden beim Darueberfahren leicht groesser
   - Menuepunkte werden rot, damit man sieht, wo man ist
   Alles nur ueber :hover/:focus-visible, kein JavaScript.
   ------------------------------------------------------------------ */
.logo img,
.hero-photo>img,
.brand-picture img,
.season-image,
.card .brand-picture{transition:transform .35s ease}

.logo:hover img,
.logo:focus-visible img{transform:scale(1.045)}

.hero-photo{overflow:hidden;border-radius:100px 18px 18px 18px}
.hero-photo>img{border-radius:0}
.hero-photo:hover>img{transform:scale(1.04)}

.brand-picture{overflow:hidden}
.card:hover .brand-picture img,
.card:focus-within .brand-picture img{transform:scale(1.05)}

a:hover .season-image,
.season-figure:hover .season-image{transform:scale(1.03)}

/* Menuepunkte: rot beim Darueberfahren und bei Tastaturbedienung */
.navlinks a{transition:color .2s ease}
.navlinks a:hover,
.navlinks a:focus-visible{color:var(--red)}
.dark .navlinks a:hover,
.dark .navlinks a:focus-visible{color:#ff8a7a}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt keine */
@media(prefers-reduced-motion:reduce){
.logo img,.hero-photo>img,.brand-picture img,.season-image{transition:none}
.logo:hover img,.hero-photo:hover>img,.card:hover .brand-picture img,
.season-figure:hover .season-image{transform:none}
}

/* ------------------------------------------------------------------
   Dunkle Seiten (Tiny Tasty, The Rentalist, Menuekarte), 11.09.2026
   Das Firmenlogo wird NICHT umgefaerbt. Es steht unveraendert auf einer
   hellen Flaeche - so bleiben Gruen und Rot original und gut lesbar.
   (Codex hatte eine umgefaerbte Fassung eingesetzt: roter Schriftzug
   orange, "Wolfgang Blanke" beige. Diese Datei wird nicht mehr benutzt.)
   ------------------------------------------------------------------ */
.dark .headicons a{background:#fffefa;color:#12201a}
.dark .headicons a:hover{background:var(--red);color:#fff}
.dark .navlinks a:hover,
.dark .navlinks a:focus-visible{color:#ff8a7a}

/* ------------------------------------------------------------------
   Logo auf den dunklen Seiten, Stand 11.09.2026
   Keine weisse Unterlegung mehr. Verwendet wird die Raute aus der
   Broschuere - der Grafiker setzt sie dort genauso auf dunklen Grund.
   "Wolfgang Blanke" steht als echter Text daneben, weiss und kursiv wie
   im Flyer; dadurch bleibt es bei jeder Groesse scharf.
   ------------------------------------------------------------------ */
.dark .logo{background:transparent;padding:0;border-radius:0;display:flex;align-items:center;gap:14px}
.dark .logo img{width:104px;height:auto;max-height:none}
.logo{text-decoration:none}
.logo-schrift{font-style:italic;font-weight:700;font-size:23px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
@media(max-width:650px){
.dark .logo{gap:10px}
.dark .logo img{width:78px}
.logo-schrift{font-size:18px}
}

/* ------------------------------------------------------------------
   Tiny Tasty: Bildwelt aus der Broschuere, Stand 11.09.2026
   Feuer und Holztisch von Seite 3, verkohltes Holz von Seite 4.
   Ueber allem liegt ein dunkler Verlauf, damit
   Texte und Preise sicher lesbar bleiben.
   ------------------------------------------------------------------ */
.tt-hero{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(90deg,#0b0908e0 0%,#0b0908d9 35%,#0b0908ab 78%,#0b090833 100%),
         url(assets/tt-hero-ki.webp) center 82%/cover no-repeat}
.tt-hero>.wrap{position:relative;z-index:1}

/* Handy: dunklerer, senkrechter Lese-Verlauf - der Text steht dort ueber
   dem ganzen Bild, auch ueber den Flammen. */
@media(max-width:650px){
  .tt-hero{background:linear-gradient(180deg,rgba(11,9,8,.88),rgba(11,9,8,.8)),
         url(assets/tt-hero-ki.webp) center/cover no-repeat}
}
/* Tablet / kleiner Laptop (651-1023 px): Der Einleitungstext reicht dort bis
   an den rechten Rand ueber die hellsten Flammen. Rechter Rand deshalb 62 %
   statt 50 % abgedunkelt (gemessen 04.10.2026, hellstes Videobild:
   vorher min. 3,8:1, jetzt min. 5,3:1). Gleicher Wert fuer Standbild und
   Video-Verlauf. */
@media(min-width:651px) and (max-width:1023px){
  .tt-hero{background:linear-gradient(90deg,#0b0908f2 0%,#0b0908d6 48%,#0b09089e 100%),
         url(assets/tt-hero-ki.webp) center 82%/cover no-repeat}
  .tt-hero .tt-ambient.cine-an::after{
    background:linear-gradient(90deg,#0b0908f2 0%,#0b0908d6 48%,#0b09089e 100%)}
}

/* Lebendes Feuer (Cinemagraph), abgenommen von Alex am 04.10.2026.
   cinemagraph.js setzt das Video nur auf breiten Bildschirmen ein (nicht
   bei "Bewegung reduzieren", nicht im Datensparmodus, nicht ohne JS) -
   sonst bleibt das Standbild des .tt-hero oben. Das erste Videobild ist
   praktisch gleich dem Standbild, deshalb ohne Ueberblendung. Der
   Lese-Verlauf (::after) liegt ueber dem Video, der Text darueber.
   Die fruehere CSS-Kamerafahrt (Zoom/Gluehen/Waerme, 03.10.2026) ist
   entfernt - sie war kaum sichtbar und wirkte wie ein Kamerazoom. */
.tt-ambient{position:absolute;inset:0;z-index:0;pointer-events:none}
.tt-cine{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 82%;visibility:hidden}
.tt-ambient.cine-an .tt-cine{visibility:visible}
.tt-ambient.cine-an::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0b0908e0 0%,#0b0908d9 35%,#0b0908ab 78%,#0b090833 100%)}
/* The Rentalist (04.10.2026): eigenes Feuer, derselbe Lese-Verlauf wie
   .brand-hero.rental-hero. Rechter Rand 50 % statt 33 % abgedunkelt -
   der Text steht dort ueber hellen Flammen (gemessen 04.10.2026: vorher
   min. 3,6:1 bis 1150 px Breite, jetzt min. 5,2:1). */
.rental-hero{position:relative;isolation:isolate;overflow:hidden}
.rental-hero>.wrap{position:relative;z-index:1}
/* Gleiche Hoehe der drei Kopfzonen (Alex, 11.10.2026): Tiny Tasty,
   Menuekarte und The Rentalist 450 px hoch (Versuch 450 statt 500, damit der
   Pause-Knopf auf dem Laptop im Bild bleibt), Inhalt mittig. Oberer/unterer
   Innenabstand 45 statt 70 px, sonst waere Tiny Tasty von Natur aus hoeher.
   Nur Laptop/Tablet (ab 651 px) - auf dem Handy steht alles untereinander. */
@media(min-width:651px){
  .brand-hero{min-height:450px;padding:45px 0;display:flex;flex-direction:column;justify-content:center}
}
.rental-hero .tt-cine{object-position:center}
.rental-hero .tt-ambient.cine-an::after{
  background:linear-gradient(90deg,#100d0bf0,#100d0b80)}
/* Tablet / kleiner Laptop (651-1023 px): niedrigere Kopfzone, der Text liegt
   dort ueber den hellen Flammen am rechten Rand. Rechter Rand 64 % statt 50 %
   abgedunkelt (gemessen 11.10.2026: vorher min. 3,9:1, jetzt min. 5,8:1). */
@media(min-width:651px) and (max-width:1023px){
  .brand-hero.rental-hero{background-image:
    linear-gradient(90deg,#100d0bf0,#100d0ba3),url(assets/rental-hero-ki.webp)}
  .rental-hero .tt-ambient.cine-an::after{
    background:linear-gradient(90deg,#100d0bf0,#100d0ba3)}
}
/* Handy: senkrechter Verlauf, Text liegt ueber der ganzen Bildbreite
   (vorher min. 3,1:1, jetzt min. 7,6:1). Kein Video auf dem Handy. */
@media(max-width:650px){
  .brand-hero.rental-hero{background-image:
    linear-gradient(180deg,rgba(16,13,11,.8),rgba(16,13,11,.7)),url(assets/rental-hero-ki.webp)}
}
/* Pause-Knopf (WCAG 2.2.2, 04.10.2026) - wird von cinemagraph.js nur
   eingesetzt, wenn das Feuer laeuft. Bewusst dezent, kein Player-Look. */
.cine-pause{position:absolute;right:18px;bottom:18px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(11,9,8,.72);border:1px solid rgba(255,245,231,.45);
  color:#fff5e7;opacity:.8}
.cine-pause:hover,.cine-pause:focus-visible{opacity:1;background:rgba(11,9,8,.9)}
.cine-pause[hidden]{display:none}
.cine-pause svg{fill:currentColor}
.cine-pause .i-play,.cine-pause.ist-pausiert .i-pause{display:none}
.cine-pause.ist-pausiert .i-play{display:inline}
@media(prefers-reduced-motion:reduce){
  .tt-cine,.cine-pause{display:none}
}

.szene{position:relative;isolation:isolate;overflow:hidden}
.szene::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--szene) center/cover no-repeat;opacity:.85}
.szene::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0b0908e8 0%,#0b0908f0 100%)}
.szene-holz{--szene:url(assets/tt-holz-ki.webp)}

.szene .dish{background:#14100de6;border-color:#ffffff2b;backdrop-filter:blur(2px)}
.szene .dish h3{color:#fff}
.szene .dish p{color:#f2e7d8}
.szene .extra{border-top-color:#ffffff26;color:#cbbda9}
.szene h2{color:#fff}
.szene .eyebrow{color:#ffb36b}

/* Vegan-Kennzeichnung, wie in der Broschuere markiert */
.vegan{display:inline-block;margin-left:.35em;padding:.1em .5em;border-radius:999px;
  background:#1f6b3f;color:#fff;font-size:.72em;font-weight:700;letter-spacing:.02em;
  vertical-align:.08em;white-space:nowrap}

/* Freisteller (Schnitzel aus dem Flyer): nicht anschneiden, sondern
   vollstaendig zeigen - der Hintergrund ist durchsichtig. */
.season-image.freisteller{object-fit:contain;background:#1b1512;padding:10px}
/* Salat-Foto (KI, 11.10.2026): die Schale sitzt rechts im breiten Bild - Ausschnitt dorthin schieben */
.season-image[src*="salat-ki"],.hero-photo>img[src*="salat-ki"]{object-position:80% center}

/* Karten in den dunklen Szenen */
.szene .card{background:#14100de6;border-color:#ffffff26}
.szene .card h3{color:#fff}
.szene .card p{color:#efe3d4}
.szene .btn.secondary{color:#fff5e7;--line:#ffffff4d}
.szene .btn.secondary:hover{background:none;color:#fff}
.szene .notice{background:#ffffff12;border-left-color:#ffb36b;color:#efe3d4}
.szene .notice a{color:#ffc98d}

/* Broschuere zum Herunterladen */
.download{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.download-info{font-size:13px;color:var(--muted)}
.szene .download-info,.category .download-info{color:#cbbda9}
:root{
  --pfeil-rechts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5L13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --pfeil-extern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4h6.5v6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
/* Zweit-Knopf (.btn.secondary) auf der ganzen Website (Alex, 11.10.2026): kein Pillen-Knopf,
   sondern Textlink mit feiner Linie und Pfeil. Beim Ueberfahren waechst eine Akzentlinie, der
   Pfeil rutscht. Externe Links (target=_blank) bekommen den Diagonalpfeil per CSS - im Text
   steht kein Pfeilzeichen mehr. Haupt-Knoepfe (.btn) bleiben gefuellt. */
.btn.secondary{position:relative;background:none;border:0;border-radius:0;padding:0 2px;
  min-height:48px;justify-content:flex-start;gap:10px;font-weight:600;
  box-shadow:inset 0 -1px 0 var(--line)}
.btn.secondary:hover{filter:none;color:var(--accent-dark)}
.dark .btn.secondary:hover{color:#fff}
.btn.secondary::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left}
.btn.secondary:hover::before{transform:scaleX(1)}
.btn.secondary::after{content:"";flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--pfeil-rechts) center/contain no-repeat;mask:var(--pfeil-rechts) center/contain no-repeat}
.btn.secondary[target="_blank"]::after{-webkit-mask-image:var(--pfeil-extern);mask-image:var(--pfeil-extern)}
.btn.secondary:hover::after{transform:translateX(3px)}
.btn.secondary[target="_blank"]:hover::after{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:no-preference){
  .btn.secondary{transition:color .15s}
  .btn.secondary::before{transition:transform .22s ease}
  .btn.secondary::after{transition:transform .18s}}
/* Download als Katalog-Zeile auf dunklen Seiten (Alex, 11.10.2026): Text links, Dateiangabe
   rechts, feine Linie darunter. Beim Ueberfahren leuchtet die Zeile leicht auf (wie die
   Sprungleiste) und der Pfeil rutscht nach unten. :has() fehlt in sehr alten Browsern -
   dann bleibt nur der Pfeil als Reaktion. */
.dark .download{display:flex;align-items:center;justify-content:space-between;
  gap:4px 24px;flex-wrap:wrap;max-width:620px;padding:0 4px;border-bottom:1px solid #ffffff26}
.dark .download .btn.secondary{background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  min-height:52px;justify-content:flex-start;gap:10px;font-size:15px;font-weight:600;color:#f5ece0}
.dark .download .btn.secondary:hover{filter:none;color:#fff}
.dark .download .btn.secondary::before{display:none}
.dark .download .btn.secondary::after{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v10M3.5 8L8 12.5 12.5 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v10M3.5 8L8 12.5 12.5 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}
.dark .download .btn.secondary:hover::after{transform:translateY(3px)}
.dark .download:has(.btn:hover){background:#ffffff0d}
@media(prefers-reduced-motion:no-preference){
  .dark .download{transition:background-color .15s}
  .dark .download .btn.secondary::after{transition:transform .18s}}

/* Bild- und Mediennachweis im Impressum */
.nachweis{margin:0 0 20px;padding:0;list-style:none;columns:2;column-gap:40px;font-size:15px}
.nachweis li{margin:0 0 4px;break-inside:avoid}
@media(max-width:650px){.nachweis{columns:1}}

/* Grillgeraete: die drei Geraete aus der Broschuere als Bildgruppe.
   Rechts der Plattengrill ueber die volle Hoehe, links Smoker oben und
   Schwenkgrill darunter. Die Bildspalte ist hier breiter als sonst,
   damit der Smoker gross genug wird. */
.category#grill{grid-template-columns:minmax(300px,1.05fr) minmax(0,1.3fr)}
.product-trio{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;
  column-gap:8px;row-gap:0;width:100%}
.product-trio .product{width:auto;max-width:100%}
.product-trio .t-plattengrill{grid-column:2;grid-row:1 / span 2;
  align-self:center;justify-self:center;max-height:345px;transform:translateY(-22px)}
.product-trio .t-smoker{grid-column:1;grid-row:1;justify-self:start;align-self:start;
  max-height:300px;margin-bottom:10px;transform:translateY(-26px)}
.product-trio .t-schwenkgrill{grid-column:1;grid-row:2;justify-self:center;align-self:end;
  max-height:320px}
@media(max-width:900px){.category#grill{grid-template-columns:minmax(250px,1fr) minmax(0,1.3fr)}}
@media(max-width:650px){
  .category#grill{grid-template-columns:1fr}
  .product-trio{column-gap:6px}
  .product-trio .t-plattengrill{max-height:235px;transform:translateY(-12px)}
  .product-trio .t-smoker{max-height:210px;margin-bottom:6px;transform:translateY(-14px)}
  .product-trio .t-schwenkgrill{max-height:215px}}

/* Beleuchtung: Strahler links unten, Preisliste in der Mitte, XXL-Lichtsaeule
   rechts. Die Lichtstrahlen (SVG im Abschnitt) gehen vom Strahlerkopf aus. */
.category#beleuchtung{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.6fr);
  column-gap:26px;align-items:center;position:relative}
.category#beleuchtung>.licht-strahler{position:static;display:flex;align-items:flex-end;
  justify-content:flex-start;min-height:0;padding:0;background:none}
.category#beleuchtung>.licht-saeule{position:static;display:flex;align-items:center;
  justify-content:center;min-height:0;padding:0;background:none}
.category#beleuchtung .licht-strahler .product{max-height:215px;max-width:100%;width:auto}
.category#beleuchtung .p-saeule{max-height:380px;max-width:100%;width:auto;
  filter:drop-shadow(0 0 34px #ff6a2d4d) drop-shadow(0 14px 15px #0005)}
.lichtschein{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:screen;z-index:0}
.category#beleuchtung>div{position:relative;z-index:1}
@media(max-width:900px){
  .category#beleuchtung{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.5fr);
    column-gap:16px}
  .category#beleuchtung .licht-strahler .product{max-height:170px}
  .category#beleuchtung .p-saeule{max-height:290px}}
@media(max-width:650px){
  .category#beleuchtung{grid-template-columns:1fr 1fr;column-gap:10px}
  /* Preisliste volle Breite, Strahler + Saeule darueber nebeneinander.
     (nth-of-type zaehlt .saeulenschein mit: 1 Schein, 2 Strahler, 3 Text, 4 Saeule.
     Bis 04.10.2026 traf die Regel den Strahler - Preisliste war nur 163 px breit.) */
  .category#beleuchtung>div:nth-of-type(3){grid-column:1 / -1;grid-row:2}
  .category#beleuchtung>.licht-saeule{grid-column:2;grid-row:1}
  .category#beleuchtung .licht-strahler .product{max-height:150px}
  .category#beleuchtung .p-saeule{max-height:250px}}

/* Die XXL-Lichtsaeule leuchtet selbst: warmer Schein rund um die Saeule,
   seit 04.10.2026 auf die Saeulenspalte begrenzt (nicht mehr bis in die Preise). */
.category#beleuchtung>.saeulenschein{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;
  background:radial-gradient(16% 64% at 89% 52%,
    #ff6a3d38 0%, #ff4f2420 34%, #ff3d180a 58%, transparent 76%)}

/* Grillgeraete: Ebenen-Reihenfolge. Die Glut kommt seit dem Katalog-System aus dem Bildschein (--rl-glow), nicht mehr aus .feuerschein. */
.category#grill{position:relative}
.category#grill>div:first-child{position:sticky;z-index:1}
.category#grill>div{position:relative;z-index:1}
.category#grill>.feuerschein{display:none}

/* Zubehoer & Diverses: Text links, Bilder rechts (Handwaschstation oben,
   Kaffeevollautomat davor) - gespiegelt zu den uebrigen Abschnitten. */
.category#diverses{grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);column-gap:48px}
.category#diverses>div:first-child{grid-column:2;grid-row:1}
.category#diverses>div:nth-child(2){grid-column:1;grid-row:1}
.product-duo{display:grid;grid-template-columns:1fr 1fr;align-items:end;
  column-gap:10px;width:100%}
.product-duo .product{width:auto;max-width:100%}
.product-duo{grid-template-rows:auto auto}
.product-duo .d-kaffee{grid-column:1;grid-row:1;justify-self:start;max-height:205px;
  margin:-62px 0 0}
.product-duo .d-waschstation{grid-column:1 / -1;grid-row:2;justify-self:end;
  max-height:420px;margin-top:-46px}
@media(max-width:650px){
  .category#diverses{grid-template-columns:1fr}
  .category#diverses>div:first-child{grid-column:1;grid-row:1}
  .category#diverses>div:nth-child(2){grid-column:1;grid-row:2}
  .product-duo .d-kaffee{max-height:150px;margin-top:-20px}
  .product-duo .d-waschstation{max-height:300px;margin-top:-24px}}

/* Kuehlung & Transport: Theke oben, Eiswuerfel darunter, Kuehlanhaenger unten - Aufbau wie Seite 14 der Broschuere. */
.kuehl-gruppe{display:grid;width:100%;justify-items:center;margin-top:-46px}
.kuehl-gruppe .product{max-height:none;max-width:100%;width:auto}
.kuehl-gruppe .k-theke{width:100%}
.kuehl-gruppe .k-eis{width:74%;justify-self:start;margin:-15% 0 0 4%}
.kuehl-gruppe .k-anhaenger{width:100%;margin-top:-4%}
@media(max-width:650px){
  .kuehl-gruppe .k-eis{width:66%}
  .kuehl-gruppe .k-anhaenger{width:100%}}

/* Glaeser: Preisliste links, Glas rechts (gespiegelt). Der Weinschwall aus
   der Broschuere laeuft aus dem Glas nach links hinter die Ueberschrift. */
.category#glaeser{grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);column-gap:48px;
  position:relative}
.category#glaeser>.wein-schwall{position:absolute;z-index:0;pointer-events:none;
  left:7.7%;top:3.6%;width:72%;max-width:none;height:auto;opacity:1;
  /* 11.10.2026: Das dicke Ende des Spritzers setzt am Glas an, das dünne Ende läuft hinter der
     Preistabelle aus. Hinter dem Text nur 18 % Deckkraft (Kontrast der Tabellenschrift
     gemessen: min. 4,3:1 an einzelnen Pixeln des gedämpften Tabellenkopfs, sonst über 8:1), rechts beim Glas voll sichtbar. */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 16%,rgba(0,0,0,.18) 68%,#000 82%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 16%,rgba(0,0,0,.18) 68%,#000 82%,#000 100%)}
.category#glaeser>div{position:relative;z-index:1}
.category#glaeser>div:nth-of-type(1){grid-column:2;grid-row:1}
.category#glaeser>div:nth-of-type(2){grid-column:1;grid-row:1}
.category#glaeser .product{transform:translateY(109px)}
@media(max-width:650px){
  .category#glaeser{grid-template-columns:1fr}
  .category#glaeser>div:nth-of-type(1){grid-column:1;grid-row:2}
  .category#glaeser>div:nth-of-type(2){grid-column:1;grid-row:1}
  .category#glaeser>.wein-schwall{top:2%;width:100%;left:0;opacity:.22;-webkit-mask-image:none;mask-image:none}
  .category#glaeser .product{transform:translateY(24px)}}

/* Bestuhlung: Der Stuhl steht unten im Gras, die Preise sind in zwei
   Bloecke geteilt - links die Bestuhlung, rechts Tische und Stehtische. */
.category#moebel{grid-template-columns:1fr;row-gap:0}
.category#moebel>div:not(.moebel-szene){position:static;display:block;min-height:0;padding:0;background:none}
.category#moebel>.moebel-szene{position:static;min-height:0;padding:0;background:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:26px}
.moebel-szene .product{max-height:none;max-width:100%;width:auto;height:auto}
.moebel-szene .m-stuhl{height:370px}
.moebel-szene .m-liegestuhl{height:275px}
.moebel-szene .m-stehtisch{height:330px}
.preisblock-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;align-items:start}
.preisblock h3{font-size:19px;color:var(--accent);margin-bottom:12px}
/* Tabellenbeschriftung nur optisch ausblenden - Screenreader lesen sie weiter */
.preisblock caption.small-label{position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:900px){.preisblock-paar{gap:12px 22px}}
@media(max-width:650px){
  .preisblock-paar{grid-template-columns:1fr;gap:26px}
  .moebel-szene{gap:10px;margin-top:18px}
  .moebel-szene .m-stuhl{height:175px}
  .moebel-szene .m-liegestuhl{height:130px}
  .moebel-szene .m-stehtisch{height:155px}}

/* Pavillons: Bildausrichtung und -hoehe (Hintergrund kommt aus dem Katalog-System, Block ganz unten). */
.category#zelte>div:first-child{position:static;align-items:flex-end;padding-bottom:0}
.category#zelte .product{max-height:330px}
@media(max-width:650px){
  .category#zelte .product{max-height:230px}}

/* Teller & Besteck: oben links der Teller, rechts daneben die Teller-Preise;
   unten links das Besteck als Liste, rechts daneben das Besteckfoto. */
.category#geschirr{grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);
  row-gap:34px;align-items:center}
.category#geschirr>div{position:static;min-height:0;padding:0;background:none}
.category#geschirr>.g-tellerbild{grid-column:1;grid-row:1;display:flex;justify-content:center}
.category#geschirr>.g-tellertext{grid-column:2;grid-row:1}
.category#geschirr>.g-bestecktext{grid-column:1;grid-row:2}
.category#geschirr>.g-besteckbild{grid-column:2;grid-row:2;display:flex;justify-content:center}
.category#geschirr .product{max-height:300px;max-width:100%;width:auto}
.category#geschirr .preisblock h3{margin-top:6px}
@media(max-width:650px){
  .category#geschirr{grid-template-columns:1fr;row-gap:22px}
  .category#geschirr>.g-tellerbild{grid-column:1;grid-row:1}
  .category#geschirr>.g-tellertext{grid-column:1;grid-row:2}
  .category#geschirr>.g-bestecktext{grid-column:1;grid-row:4}
  .category#geschirr>.g-besteckbild{grid-column:1;grid-row:3}
  .category#geschirr .product{max-height:210px}}

/* Buffetzubehoer: Chafing-Dish oben, Schieferplatte darunter. Das Holz ist
   links kraeftig sichtbar und laeuft nach rechts hin dunkel aus. */
.category#buffet>div:first-child{position:static;display:grid;justify-items:center;
  align-content:center;gap:18px;min-height:0}
.category#buffet .product{max-height:330px;max-width:100%;width:auto}
.category#buffet .b-schiefer{max-height:none;width:100%;margin-top:52px}
@media(max-width:650px){
  .category#buffet .product{max-height:240px}
  .category#buffet .b-schiefer{margin-top:26px}}

/* ------------------------------------------------------------------
   Menuekarte im Stil der Broschuere: Gerichte stehen direkt auf dem
   Holz (keine Kaesten), Zutaten als Aufzaehlung mit Flammenzeichen,
   vegane Bestandteile am Ende der Liste.
   ------------------------------------------------------------------ */
.menu-list{grid-template-columns:1fr;gap:0}
.szene .dish,.dish{background:none;border:0;border-radius:0;padding:30px 0 0;backdrop-filter:none}
.menu-list>*+*{border-top:1px solid #ffffff26;margin-top:4px}
.menu-list>*:first-child{padding-top:8px}
.menu-section .dish-head{justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:2px 14px}
.menu-section .dish h3{font-size:clamp(24px,2.2vw,28px);line-height:1.15;letter-spacing:-.01em}
.menu-section .price{font-size:clamp(19px,1.8vw,22px)}
.zutaten{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:68ch}
.zutaten li{position:relative;padding-left:27px;color:#f0e4d5;font-size:16px;line-height:1.6}
.zutaten li::before{content:"";position:absolute;left:2px;top:.32em;width:12px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23ff6b3c' d='M6 0C6 3 2.6 4.3 2.6 8.2A3.4 3.4 0 0 0 6 11.6a3.4 3.4 0 0 0 3.4-3.4C9.4 5.4 7.4 4.6 7.4 2.6 7.4 4 5.2 4.6 5.2 6.4c0 .9.5 1.4.5 2.1 0 .8-.6 1.2-1.1 1.2C6.6 8.4 6 5.3 6 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.dish .extra{margin-top:18px;border-top:1px solid #ffffff26;padding-top:12px;
  font-size:13px;line-height:1.5;letter-spacing:.01em;color:#cbbda9}
.zutaten .vegan{margin-left:6px}
@media(max-width:650px){
  .menu-section .dish h3{font-size:22px}
  .zutaten li{font-size:14px;padding-left:24px}}

/* Speisenfotos aus der Broschuere: Bild und Text nebeneinander,
   abwechselnd links und rechts. Freisteller stehen ohne Rahmen,
   Fotos bekommen abgerundete Ecken. */
.dish.mit-bild{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:32px;align-items:center}
.dish.mit-bild:nth-of-type(even) .dish-bild{order:2}
.dish-bild{width:100%;height:auto;max-width:100%}
.dish.foto .dish-bild{border-radius:16px;box-shadow:0 14px 30px #00000073}
.dish.frei .dish-bild{filter:drop-shadow(0 16px 18px #000000a6)}
.dish.mit-bild .dish-text{min-width:0}
@media(max-width:760px){
  .dish.mit-bild{grid-template-columns:1fr;gap:18px}
  .dish.mit-bild:nth-of-type(even) .dish-bild{order:0}
  .dish-bild{max-height:260px;object-fit:cover;object-position:center}}

/* ------------------------------------------------------------------
   Menuekarte, Umbau 03.10.2026: Kapitel statt Broschuerenliste.
   Sprungnavigation bleibt stehen, wird aber beim Scrollen fixiert.
   ------------------------------------------------------------------ */
.jumpnav{position:sticky;top:0;z-index:5;background:var(--bg)}
.jumpnav a[aria-current]{border-color:var(--accent);color:var(--accent);font-weight:650}
.menu-section{scroll-margin-top:100px}

/* Eine ruhige Infoflaeche statt der fuenf wiederholten Hinweistexte */
.menu-info{border-left:3px solid var(--accent);background:#ffffff12;padding:18px 24px;margin:4px 0 20px}
.menu-info .small-label{color:#ffc98d;margin-bottom:10px}
.menu-info ul{list-style:none;margin:0;padding:0;display:grid;gap:7px 28px;grid-template-columns:1fr 1fr}
.menu-info li{color:#efe3d4;font-size:14px;line-height:1.5}
.menu-info a{color:#ffc98d}
@media(max-width:650px){.menu-info ul{grid-template-columns:1fr}}

/* Kapitel-Hero: grosses Bild als Einstieg in jeden Abschnitt */
.chapter-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:30px 34px;margin:8px 0 34px}
.chapter-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--chapter-img) center/cover no-repeat}
.chapter-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,#0b0908f2 0%,#0b0908b3 46%,#0b090833 100%)}
.chapter-hero .eyebrow{color:#ffb36b;margin-bottom:8px}
.chapter-hero h2{color:#fff;margin:0}
.chapter-hero p{color:#f0e4d5;margin-top:10px;max-width:46ch}
#menues .chapter-hero{--chapter-img:url(assets/ente-knoedel-ki.webp)}
#extras .chapter-hero{--chapter-img:url(assets/m-salat-hero.webp)}
#specials .chapter-hero{--chapter-img:url(assets/m-specials-hero.webp)}
#saison .chapter-hero{--chapter-img:url(assets/textur-feuer.webp)}
.chapter-hero--saison{align-items:center;justify-content:center;text-align:center;min-height:200px}
.chapter-hero--saison h2{text-transform:uppercase;letter-spacing:.03em;font-size:clamp(28px,3.6vw,42px)}
@media(max-width:650px){.chapter-hero{min-height:200px;padding:22px 20px;border-radius:14px}}

/* Feature-Gericht: Bild oben, grosszuegig, nicht gestreckt (bleibt
   scharf, da nicht ueber die vorhandene Bildaufloesung hinaus vergroessert) */
.dish.feature.mit-bild{display:block}
.dish.feature.mit-bild .dish-bild{order:0;width:100%;max-width:620px;margin:0 auto 22px;display:block}
.dish.feature .dish-text{max-width:70ch;margin:0 auto}
.dish.feature{padding-top:46px;padding-bottom:4px}

/* Kompakter Eintrag: deutlich leichter als ein Feature-Gericht */
.dish.compact{padding-top:22px}
.menu-section .dish.compact h3{font-size:20px}
.dish.compact .price{font-size:17px}
.dish.compact .zutaten{margin-top:10px;gap:6px}
.dish.compact .zutaten li{font-size:14px}
.dish.compact.mit-bild{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center}
.dish.compact.mit-bild .dish-bild{order:0;width:140px;height:84px;object-fit:cover;border-radius:10px;box-shadow:none}
@media(max-width:480px){
  .dish.compact.mit-bild{grid-template-columns:96px 1fr}
  .dish.compact.mit-bild .dish-bild{width:96px;height:64px}}

/* Aktionen & Menuees: Bild und Text als eine Zeile, abwechselnd gespiegelt;
   wirkt nur innerhalb #menues, andere Kapitel bleiben unberuehrt. */
#menues .dish.mit-bild{display:grid;grid-template-columns:minmax(220px,38%) 1fr;
  gap:28px;align-items:center;padding:32px 0}
#menues .dish.mit-bild:first-child{padding-top:8px}
#menues .dish.mit-bild .dish-bild{order:0;width:100%;max-width:none;height:auto;
  aspect-ratio:16/10;object-fit:cover;margin:0;display:block}
#menues .dish.mit-bild:nth-child(even){grid-template-columns:1fr minmax(220px,38%)}
#menues .dish.mit-bild:nth-child(even) .dish-bild{order:2}
#menues .dish.frei .dish-bild{aspect-ratio:auto;object-fit:contain}
#menues .dish.feature .dish-text{max-width:none;margin:0}
#menues .dish h3{font-size:clamp(24px,2.2vw,28px);line-height:1.15}
#menues .dish .price{font-size:clamp(19px,1.8vw,22px)}
#menues .dish .zutaten li{font-size:16px;line-height:1.6}
#menues .dish.compact.mit-bild{grid-template-columns:minmax(180px,28%) 1fr}
#menues .dish.compact.mit-bild .dish-bild{width:100%;height:auto;aspect-ratio:2/1;
  object-fit:cover;border-radius:16px}
#menues .dish.compact.frei .dish-bild{aspect-ratio:auto;object-fit:contain;border-radius:0}
@media(max-width:760px){
  #menues .dish.mit-bild{grid-template-columns:1fr;gap:18px}
  #menues .dish.mit-bild:nth-child(even){grid-template-columns:1fr}
  #menues .dish.mit-bild:nth-child(even) .dish-bild{order:0}
  #menues .dish h3{font-size:22px}
  #menues .dish.compact.mit-bild{grid-template-columns:1fr}
}

/* Zwei kompakte Eintraege nebeneinander statt untereinander */
.dish-compact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;padding-top:30px}
.dish-compact-row>.dish{padding-top:0;border-top:0;margin-top:0}
@media(max-width:650px){.dish-compact-row{grid-template-columns:1fr;gap:20px}}

/* Little Fine Specials: 2x2-Raster, alle vier Bilder gleich hoch (ruhiges
   System); die Fisch-Positionen oben sind nur typografisch leicht betont.
   Bildausschnitt je Foto, damit das Essen im Rahmen liegt. */
.specials-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:8px}
.specials-grid .dish{border:0;padding:0;background:none}
.specials-grid .dish.mit-bild{display:block}
.specials-grid .dish.mit-bild .dish-bild{order:0;width:100%;object-fit:cover;border-radius:16px}
.special-card .dish-bild{height:220px}
.menu-section .special-card:not(.feature) h3{font-size:22px}
.special-card:not(.feature) .price{font-size:18px}
.menu-section .special-card:not(.feature) .zutaten li{font-size:14px}
.specials-grid .dish-bild[src*="m-seelachs.webp"]{object-position:50% 62%}
.specials-grid .dish-bild[src*="m-roulade.webp"]{object-position:50% 20%}
.specials-grid .dish-bild[src*="m-nuggets.webp"]{object-position:50% 60%}
@media(max-width:650px){.specials-grid{grid-template-columns:1fr}}

/* Saison: zwei gleichrangige, grosse Positionen, Raster darf abweichen */
.saison-duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px}
.saison-duo .dish{border:0;padding:0;background:none}
.saison-duo .dish.mit-bild{display:block}
.saison-duo .dish.mit-bild .dish-bild{order:0;width:100%;height:auto;max-height:none;aspect-ratio:1200/1593;object-fit:cover;object-position:center top;border-radius:16px}
@media(max-width:650px){.saison-duo{grid-template-columns:1fr}}

/* Schlanker Kontakt-Hinweis mitten auf der Seite */
.inline-cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  padding:24px 28px;margin:8px 0 44px;border:1px solid #ffffff26;border-radius:16px;background:#ffffff0d}
.inline-cta p{margin:0;font-size:17px;font-weight:650;color:#f2e7d8}
@media(max-width:650px){.inline-cta{padding:20px}}

/* Dezenter Hinweis auf Serviervorschlaege */
.bildhinweis{font-size:13px;color:#cbbda9;margin:36px 0 0}

/* ------------------------------------------------------------------
   Holz-Logik, Stand 03.10.2026 (Runde 2)
   Eine Klasse fuer alle hellen Holz-Abschnitte: .szene-hell
   (menuekarte: #menues, #extras, #specials; tiny-tasty: beide Abschnitte).
   #saison traegt die Klasse bewusst NICHT und hat eine eigene Geometrie
   (aufgehelltes Holz, kurze Fussblende statt dunklerer Lasur, siehe unten).
   ------------------------------------------------------------------ */

/* Holz sichtbar: Lasur in der Mitte 62 % statt 91-94 %. Oben/unten und
   links/rechts laeuft das Holz in die Seitenfarbe aus (Abschnitte liegen
   in .wrap - so entsteht keine harte Bildkante). Kontrast fuer #cbbda9
   bleibt auch auf den hellsten Maserungsstellen ueber 5:1. */
.szene.szene-hell::after{
  background:
    linear-gradient(90deg,#161412 0%,#16141200 9%,#16141200 91%,#161412 100%),
    linear-gradient(180deg,#161412 0%,#0b0908a8 160px,#0b09089e 50%,#0b0908a8 calc(100% - 160px),#161412 100%)}

/* Volle Fensterbreite (tiny-tasty, Klasse .section): gleiche Deckkraft,
   aber keine seitliche Blende und kuerzere Blende oben/unten - sonst
   verschwindet das Holz hinter den dunklen Karten fast ganz. */
.section.szene.szene-hell::after{
  background:linear-gradient(180deg,#161412 0%,#0b0908a8 96px,#0b09089e 50%,#0b0908a8 calc(100% - 96px),#161412 100%)}

/* Zwei helle Holz-Abschnitte direkt untereinander (tiny-tasty): an der
   gemeinsamen Kante keine Blende auf Seitenfarbe, sondern Holz an Holz.
   Der untere Abschnitt zeigt das Holz gespiegelt - so trifft an der Naht
   dieselbe Bildzeile auf sich selbst und die Maserung laeuft weiter. */
.szene.szene-naht-unten::before{background-position:center bottom}
.szene.szene-naht-oben::before{background-position:center bottom;transform:scaleY(-1)}
.section.szene.szene-hell.szene-naht-unten::after{
  background:linear-gradient(180deg,#161412 0%,#0b0908a8 96px,#0b09089e 50%,#0b0908a8 calc(100% - 48px),#0b0908b3 100%)}
.section.szene.szene-hell.szene-naht-oben::after{
  background:linear-gradient(180deg,#0b0908b3 0%,#0b0908a8 48px,#0b09089e 50%,#0b0908a8 calc(100% - 96px),#161412 100%)}

/* Saison: eigene Geometrie statt dunklerer Lasur. Sichtbar sind hier fast
   nur die Textzone unter den Bildern und der Fuss - deshalb kurze Blende
   unten (64 px statt 160 px) und das Holz leicht angehoben, weil diese
   Zonen auf den dunkelsten Bildzeilen von tt-holz liegen. Die Inszenierung
   tragen Feuer-Kapitelbild und Illustrationen. */
#saison.szene::before{filter:brightness(1.2)}
#saison.szene::after{
  background:
    linear-gradient(90deg,#161412 0%,#16141200 9%,#16141200 91%,#161412 100%),
    linear-gradient(180deg,#161412 0%,#0b0908a8 160px,#0b09089e 50%,#0b09089e calc(100% - 64px),#161412 100%)}
/* Das Grill-Motiv ist von Natur aus nachtdunkel: leicht aufhellen.
   Gruenkohl hat einen hellen Rahmen und bleibt unveraendert. */
.saison-duo .dish-bild[src*="grill.webp"]{filter:brightness(1.1)}

/* Little Fine Specials: gleicher Abstand Bild -> Text in beiden Zeilen.
   Drei Klassen noetig (.specials-grid .special-card .dish-text), sonst
   verliert die Regel gegen .dish.feature .dish-text (Zeile 589, auch
   drei Klassen) und die obere Zeile bleibt bei margin-top:0. */
.specials-grid .dish.mit-bild .dish-bild{margin:0}
.specials-grid .special-card .dish-text{margin-top:18px}

/* Freisteller im Specials-Raster (Lachs) vollstaendig zeigen,
   Schatten folgt der Form (.dish.frei), keine Ecken-Rundung */
.specials-grid .dish.frei .dish-bild{object-fit:contain;border-radius:0}

/* Schrift-Hierarchie: Preis in echtem Medium (500) statt 650 (= 700),
   "p. P." als untergeordnete Angabe wie die Zusatzinfos */
.menu-section .price{font-weight:500}
.menu-section .price small{font-size:13px;color:#cbbda9;margin-left:3px}

/* ------------------------------------------------------------------
   Tiny-Tasty-Typografie, Stand 03.10.2026 (Runde 3)
   Gilt nur mit <body class="dark tt-schrift"> (tiny-tasty.html, menuekarte.html).
   Groessen, Zeilenhoehen und Abstaende aus Runde 1+2 bleiben unveraendert.
   Hier wird nur die Schriftart umgestellt und - wo begruendet - die Staerke.
   Nur font-family setzen, nie die Kurzform font: (wuerde 16px/1.7 zuruecksetzen).
   ------------------------------------------------------------------ */
.tt-schrift{font-family:Barlow,'Segoe UI',Arial,sans-serif}
.tt-schrift h3{font-family:Barlow,'Segoe UI',Arial,sans-serif}

/* Kopfzeile = Dachmarke, auf allen 7 Seiten gleich: bleibt Ubuntu (E1) */
.tt-schrift .header{font-family:Ubuntu,'Segoe UI',Arial,sans-serif}

/* Schriftstaerken nach Barlow-Hierarchie */
.tt-schrift .btn{font-weight:600}
.tt-schrift .jumpnav a{font-weight:500}
.tt-schrift .jumpnav a[aria-current]{font-weight:700}
.tt-schrift .menu-section .price{font-weight:600}

/* Caveat: einziger Einsatzort = Markenzeile ueber Ueberschriften.
   Handschrift vertraegt keine Grossbuchstaben und keine Sperrung; bei 12px
   waere sie unlesbar. 22px Caveat entspricht etwa der Buchstabenhoehe der
   bisherigen 12px-Grossbuchstaben; line-height:1 haelt die Zeilenbox fast
   gleich hoch wie bisher (22px statt 20,4px) - Abstaende bleiben stehen. */
.tt-schrift .eyebrow{font-family:Caveat,Barlow,'Segoe UI',Arial,sans-serif;
  font-size:22px;font-weight:600;line-height:1;text-transform:none;letter-spacing:normal}

/* ------------------------------------------------------------------
   Tiny-Tasty-Typografie, Runde 4 (03.10.2026): Barlow Condensed
   Charakter ueber die Form statt ueber die Staerke:
   - H1/H2: hoeher und schmaler, enge Zeilen. Groessen so gewaehlt, dass
     Zeilen nicht breiter werden als vorher (Condensed ~22 % schmaler).
   - Gerichtnamen: Versalien mit leichter Sperrung, Groesse unveraendert.
   Saetze gemischt, Etiketten in Versalien. Preis/Zutaten bleiben Barlow.
   Nie negative Sperrung bei Condensed. Nie die Kurzform font: verwenden.
   ------------------------------------------------------------------ */
.tt-schrift h1,.tt-schrift h2{font-family:'Barlow Condensed',Barlow,'Segoe UI',Arial,sans-serif;
  font-weight:700;letter-spacing:0}
.tt-schrift .brand-hero h1{font-size:clamp(46px,6vw,76px);line-height:1}
.tt-schrift h2{font-size:clamp(32px,3.8vw,46px);line-height:1.05}
/* Saison: Versalien und Sperrung wie bisher, Groesse im gleichen Verhaeltnis angehoben */
.tt-schrift .chapter-hero--saison h2{font-size:clamp(32px,4.2vw,48px);letter-spacing:.03em}
/* Gerichtnamen: gilt fuer alle .dish-Varianten (feature, compact, special-card, saison).
   Groesse und Zeilenhoehe kommen weiter aus den bestehenden Regeln. */
.tt-schrift .menu-section .dish h3{font-family:'Barlow Condensed',Barlow,'Segoe UI',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* Card-Titel auf der Tiny-Tasty-Uebersicht: gleiche Schrift wie die Menuekarte,
   aber ohne Versalien/Sperrung - die Uebersicht darf ruhiger wirken. */
.tt-schrift .card h3{font-family:'Barlow Condensed',Barlow,'Segoe UI',Arial,sans-serif;
  font-weight:700}

/* ==================================================================
   The Rentalist - Katalog-System (Stand 2026-10-04)
   EINE Grundwelt fuer alle neun Kategorien: dunkle Buehne, gleiche
   Abstaende, gleiche Tabellen, gleiche Schrift. Kategorien unterscheiden
   sich nur ueber drei Akzentstellen: Kennkante (oben), Bildschein
   (hinter dem Produkt), Linie unter dem Tabellenkopf.
   Kategorien setzen NUR Variablen - keine ID-Regeln fuer Farben, sonst
   Spezifitaetsfalle (ID schlaegt Klasse).
   Grenzwert: hinter Text nie heller als #2a221c (Tabellenkopf dann 6,5:1).
   Gilt nur mit <body class="dark rentalist">.
   ================================================================== */
.rentalist{
  --rl-buehne-oben:#1d1a17e0;--rl-buehne-unten:#161310e0;--rl-kante:#ffffff17;
  --rl-text:#f5ece0;--rl-name:#ece2d5;--rl-preis:#fffaf3;
  --rl-text-2:#cbbda9;--rl-text-3:#b3a593;--rl-linie:#ffffff1a;
  --rl-radius:12px;--rl-luft:24px;--rl-glow-neutral:#fff1dc17}

/* Akzent je Kategorie - nur Variablen */
.rentalist #grill      {--rl-akzent:#ff8a3d;--rl-glow:#ff7a2e3d;--rl-glow-pos:22% 52%;--rl-glow-form:34% 58%}
.rentalist #beleuchtung{--rl-akzent:#ff6b4a;--rl-glow:transparent}
.rentalist #diverses   {--rl-akzent:#d9a66b;--rl-glow:#d9a66b2b;--rl-glow-pos:78% 58%;--rl-glow-form:32% 56%}
.rentalist #kuehlung   {--rl-akzent:#8fc3cf;--rl-glow:#8fc3cf21;--rl-glow-pos:22% 50%;--rl-glow-form:36% 60%}
.rentalist #glaeser    {--rl-akzent:#93c48b;--rl-glow:var(--rl-glow-neutral);--rl-glow-pos:80% 62%;--rl-glow-form:30% 54%}
.rentalist #moebel     {--rl-akzent:#93c48b;--rl-glow:var(--rl-glow-neutral);--rl-glow-pos:50% 90%;--rl-glow-form:62% 34%}
.rentalist #zelte      {--rl-akzent:#93c48b;--rl-glow:var(--rl-glow-neutral);--rl-glow-pos:24% 66%;--rl-glow-form:34% 50%}
.rentalist #geschirr   {--rl-akzent:#c8925a}
.rentalist #buffet     {--rl-akzent:#c8925a}

/* Buehne (0,2,0) - schlaegt .category (0,1,0) und, weil spaeter,
   auch .category:nth-of-type(...) (0,2,0) aus Zeile 20 */
.rentalist .category{position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--rl-kante);border-radius:var(--rl-radius);
  background:linear-gradient(180deg,var(--rl-buehne-oben),var(--rl-buehne-unten));
  padding:clamp(26px,4vw,48px);margin:0 0 var(--rl-luft);
  scroll-margin-top:84px;--accent:var(--rl-akzent)}  /* klebende Sprungleiste 54-64 px + Luft (alle Breiten) */
.rentalist .category:last-of-type{margin-bottom:64px}            /* (0,3,0) */

/* Lichtschicht: Bildschein hinter dem Produkt (0,2,1) */
.rentalist .category::before{content:"";position:absolute;inset:0;z-index:-2;
  pointer-events:none;opacity:1;
  background:radial-gradient(var(--rl-glow-form,34% 56%) at var(--rl-glow-pos,24% 52%),
    var(--rl-glow,transparent) 0%,transparent 72%)}
/* Markierungsschicht: Kennkante oben + Glut-Boden unten (0,2,1) */
.rentalist .category::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--rl-akzent),transparent 42%) top left/100% 2px no-repeat,
    linear-gradient(0deg,#ff6a2a0d 0%,transparent 34%)}

/* Holz nur bei Teller & Besteck und Buffet, nur im Bildbereich (1,2,1) */
.rentalist .category#geschirr::before,
.rentalist .category#buffet::before{
  background:url(assets/textur-holz.webp) center/cover no-repeat;opacity:.55}
.rentalist .category#geschirr::before{
  -webkit-mask-image:radial-gradient(24% 34% at 20% 26%,#000 0%,#000000b3 50%,transparent 100%),
                     radial-gradient(28% 21% at 74% 77%,#000 0%,#000000b3 50%,transparent 100%);
  mask-image:radial-gradient(24% 34% at 20% 26%,#000 0%,#000000b3 50%,transparent 100%),
             radial-gradient(28% 21% at 74% 77%,#000 0%,#000000b3 50%,transparent 100%);
  /* zweite Flaeche nur hinter dem Besteckbild (60-92 % der Hoehe); die
     Teller-Tabelle endet bei ca. 54 % (gemessen 1280 px, 04.10.2026) */
  -webkit-mask-composite:source-over;mask-composite:add}
.rentalist .category#buffet::before{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,#00000059 30%,transparent 38%);
  mask-image:linear-gradient(90deg,#000 0%,#000 22%,#00000059 30%,transparent 38%)}

/* Beleuchtung: Strahl bleibt Lichtakzent, aber nur ueber der Strahler-Spalte (1,3,0) */
.rentalist .category#beleuchtung>.lichtschein{opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 18%,transparent 34%);
  mask-image:linear-gradient(90deg,#000 0%,#000 18%,transparent 34%)}

/* Produktinszenierung: ein Schatten fuer alle (0,3,0).
   Die Lichtsaeule behaelt ihren Leuchtfilter (Z. 351, ID gewinnt - gewollt). */
.rentalist .category .product{filter:drop-shadow(0 18px 22px #000000a6)}

/* Typografie: Archivo (Stand 11.10.2026, Alex-Auftrag). Rentalist = Ausruestung/Buehne:
   kraeftig und breiter, bewusst anders als die schmale Tiny-Tasty-Schrift.
   Kopfzeile (Dachmarke) bleibt Ubuntu wie auf allen Seiten. Nur font-family setzen,
   nie die Kurzform font: (wuerde 16px/1.7 zuruecksetzen). */
.rentalist{font-family:Archivo,'Segoe UI',Arial,sans-serif}
.rentalist h1,.rentalist h2,.rentalist h3{font-family:Archivo,'Segoe UI',Arial,sans-serif}
.rentalist .header{font-family:Ubuntu,'Segoe UI',Arial,sans-serif}
.rentalist .brand-hero h1{font-weight:800;letter-spacing:-.02em}
.rentalist .category h2{                                            /* (0,2,1) */
  font-weight:800;font-size:clamp(28px,3vw,36px);line-height:1.1;
  letter-spacing:-.01em;color:var(--rl-text);margin:0 0 18px}
.rentalist .preisblock h3{font-size:17px;line-height:1.3;font-weight:700;  /* (0,2,1) */
  letter-spacing:.01em;color:var(--rl-text);margin:0 0 8px}
/* Tabellen-Ueberschrift nur fuer Screenreader (Alex, 04.10.2026): sie
   wiederholt die h2/h3 ("Grillgeraete" + "Grillgeraete - Preise 2027").
   Bleibt im HTML, damit Vorleseprogramme die Tabelle benennen koennen. */
.rentalist .category caption.small-label{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tabellen */
.rentalist .category table{font-size:15px;line-height:1.45;color:var(--rl-name);  /* (0,2,1) */
  font-variant-numeric:tabular-nums}
.rentalist .category th{font-size:11px;font-weight:500;letter-spacing:.12em;      /* (0,2,1) */
  text-transform:uppercase;color:var(--rl-text-3);padding:0 0 10px;
  border-bottom:1px solid var(--rl-akzent)}
.rentalist .category td{padding:13px 0;border-bottom:1px solid var(--rl-linie)}   /* (0,2,1) */
.rentalist .category td:first-child{padding-right:24px}                          /* (0,3,1) */
.rentalist .category td:not(:first-child),
.rentalist .category th:not(:first-child){width:1%;padding-left:20px}            /* (0,3,1) */
.rentalist .category td:not(:first-child){color:var(--rl-preis);font-weight:700} /* (0,3,1) */
/* Reinigung (3. Spalte) bewusst gleich stark wie die Miete: Ist sie Pflicht,
   darf sie optisch nicht kleiner wirken als der Preis (Skorpion, 04.10.2026). */
.rentalist .category tbody tr:last-child td{border-bottom:0}                    /* (0,3,3) */

/* Zusatzinfo in der Buehne: untergeordnet, ohne Kasten (0,3,0) */
.rentalist .category .notice{background:none;border-left:2px solid #ffffff26;
  padding:2px 0 2px 14px;margin-top:18px;font-size:13px;line-height:1.55;color:var(--rl-text-2)}

/* Sprungleiste = Register auf allen dunklen Seiten (Rentalist, Menuekarte).
   Kompakte Werkzeugleiste (Alex, 04.10.2026): auf ALLEN Breiten eine Zeile,
   nie Umbruch. Passt nicht alles hinein: seitlich scrollen (Wischen,
   Trackpad, Mausrad ueber navigation.js), ohne sichtbare Scrollleiste.
   Rechts weiches Ausblenden nur, solange rechts noch Punkte versteckt sind
   (Klasse .mehr-rechts von navigation.js). Desktop: Leiste ca. 54 px hoch.
   Touch-Geraete und Handy: Tippziele 44 px, Leiste ca. 64 px. */
.dark .jumpnav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;gap:22px;padding:0 8px;margin:0 -8px;border-bottom:1px solid #ffffff1f}
.dark .jumpnav::-webkit-scrollbar{display:none}
.dark .jumpnav.mehr-rechts{
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
/* Register (Alex, 11.10.2026): Textpunkte ohne Rahmen. Die Linie unter dem Punkt hat die
   Farbe der Kategorie (--akz = gleicher Wert wie --rl-akzent der Buehne) und waechst beim
   Ueberfahren bzw. bleibt beim aktiven Punkt stehen. Aktiv ist so nicht nur an der Farbe
   erkennbar, sondern an der Linie. Leiste bleibt 54 px (Handy 56 px) hoch: scroll-margin-top
   der Buehnen (84 px) rechnet damit. */
.dark .jumpnav a{position:relative;display:inline-flex;align-items:center;  /* (0,2,1) */
  border:0;border-radius:0;background:none;flex:none;white-space:nowrap;
  min-height:54px;padding:0 2px;font-size:14px;font-weight:600;line-height:1.2;
  color:#e9dfd2;--akz:var(--accent)}
@media(pointer:coarse),(max-width:650px){
  .dark .jumpnav a{min-height:56px}}
.rentalist .jumpnav a[href="#grill"]{--akz:#ff8a3d}
.rentalist .jumpnav a[href="#beleuchtung"]{--akz:#ff6b4a}
.rentalist .jumpnav a[href="#diverses"]{--akz:#d9a66b}
.rentalist .jumpnav a[href="#kuehlung"]{--akz:#8fc3cf}
.dark .jumpnav a[href="#glaeser"],
.dark .jumpnav a[href="#moebel"],
.rentalist .jumpnav a[href="#zelte"]{--akz:#93c48b}
.dark .jumpnav a[href="#geschirr"],
.rentalist .jumpnav a[href="#buffet"]{--akz:#c8925a}
.dark .jumpnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--akz);transform:scaleX(0);transform-origin:left}
.dark .jumpnav a:hover,
.dark .jumpnav a[aria-current]{background:none;color:#fff;font-weight:600}              /* (0,3,1) */
.dark .jumpnav a:hover::after,
.dark .jumpnav a[aria-current]::after{transform:scaleX(1)}
/* Fokusring liegt innen: die Leiste scrollt (overflow) und wuerde einen aeusseren Ring abschneiden */
.dark .jumpnav a:focus-visible{outline-offset:-4px}
@media(prefers-reduced-motion:no-preference){
  .dark .jumpnav a{transition:color .15s}
  .dark .jumpnav a::after{transition:transform .22s ease}}

/* Hero-Zeile ueber dem Titel: normale Schreibweise statt gesperrter Versalien */
.rentalist .eyebrow{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;margin-bottom:14px}

/* Register in Barlow (Menuekarte): etwas groesser */
.tt-schrift .jumpnav a{font-size:15px}

/* Abstand Broschueren-Knopf -> erste Buehne (0,2,0) */
.rentalist .download{margin:16px 0 36px}

/* Hero: weicher Auslauf in die Seitenfarbe. Nur dunkler, nie heller.
   Pause-Knopf (z 2) liegt darueber, Text (.wrap, z 1) auch. */
.rentalist .rental-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:72px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#16141200,#161412)}

/* Tablet */
@media(max-width:900px){
  .rentalist .category#diverses,.rentalist .category#glaeser{column-gap:30px}
  .rentalist .category td:first-child{padding-right:14px;hyphens:auto}
  .rentalist .category th{letter-spacing:.05em}
  .rentalist .category td:not(:first-child),
  .rentalist .category th:not(:first-child){padding-left:12px}}

/* Handy */
@media(max-width:650px){
  .rentalist #grill,.rentalist #diverses,.rentalist #kuehlung,.rentalist #zelte{
    --rl-glow-pos:50% 16%;--rl-glow-form:70% 20%}
  .rentalist #glaeser{--rl-glow-pos:50% 86%;--rl-glow-form:70% 18%}
  .rentalist #moebel{--rl-glow-pos:50% 94%;--rl-glow-form:80% 14%}
  .rentalist .category#geschirr::before{
    /* nur hinter Teller- und Besteckbild (gemessen bei 375 px: Bilder bei
       2-16 % und 61-74 % der Hoehe, Tabellen bei 22-59 % und 78-94 %) */
    -webkit-mask-image:radial-gradient(80% 7% at 50% 9%,#000 0%,#00000099 55%,transparent 100%),
                       radial-gradient(80% 7% at 50% 67%,#000 0%,#00000099 55%,transparent 100%);
    mask-image:radial-gradient(80% 7% at 50% 9%,#000 0%,#00000099 55%,transparent 100%),
               radial-gradient(80% 7% at 50% 67%,#000 0%,#00000099 55%,transparent 100%)}
  .rentalist .category#buffet::before{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 20%,transparent 38%);
    mask-image:linear-gradient(180deg,#000 0%,#000 20%,transparent 38%)}
  .rentalist .category table{font-size:14px}
  .rentalist .category td{padding:11px 0}
  .rentalist .category td:first-child{padding-right:14px}
  .rentalist .category td:not(:first-child),
  .rentalist .category th:not(:first-child){padding-left:12px}}

/* ==================================================================
   Neue Startseite und Kontaktseite, Stand 12.10.2026 (von Alex abgenommen)
   Vorlage: ChatGPT-Entwurf, eigene Umsetzung. Alles Neue beginnt mit "e-".
   Pflanzen = e-blatt, Pinselband = e-pinsel, Fotokarten = e-karte.
   ================================================================== */
.e-blatt{position:absolute;display:block;pointer-events:none;color:#7da587}

/* Kopfbereich wie bisher, mit Blättern oben rechts */
.hero{position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.e-blatt-hero{right:-34px;top:14px;width:170px;height:340px;transform:rotate(28deg);opacity:.45}
.e-blatt-hero2{right:120px;top:-70px;width:110px;height:220px;transform:rotate(-24deg);opacity:.28}
.hero h1{text-wrap:balance}
.hero .photo-caption{max-width:340px}
.hero .photo-caption strong{font-size:18px;line-height:1.3;margin-bottom:3px}

/* Abschnitt "Unser Angebot 2027": Text links, Pinselband und zwei Karten rechts */
.e-angebot{position:relative;overflow:hidden;padding:84px 0 92px;background:var(--soft)}
.e-angebot .e-blatt-l1{left:-46px;top:30px;width:190px;height:380px;transform:rotate(-10deg);opacity:.42}
.e-angebot .e-blatt-l2{left:-70px;bottom:-30px;width:170px;height:340px;transform:rotate(14deg);opacity:.3}
.e-angebot-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr);gap:56px;align-items:start}
.e-angebot h2{text-wrap:balance}
.e-angebot h2 em{font-style:normal;color:var(--accent)}
.e-regel{width:56px;height:3px;background:var(--accent);border-radius:2px;margin:22px 0 26px}
.e-text p{color:var(--ink)}
.e-text .tasty-name{color:var(--accent)}
.e-text .rental-name{color:var(--red)}
.e-rechts{display:grid;gap:26px}

/* Pinselband mit Handschrift */
.e-pinsel{position:relative;isolation:isolate;text-align:center;padding:42px 9% 38px}
.e-pinsel svg.e-pinsel-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.e-pinsel h2,.e-pinsel h3{font-family:Caveat,'Segoe Script',cursive;font-weight:600;color:var(--red);
  font-size:clamp(32px,3.6vw,44px);letter-spacing:0;line-height:1.12;text-wrap:balance}
.e-pinsel p{margin:8px auto 0;font-size:15px;color:#4a3c2c;font-weight:500}
.e-stern{position:absolute;width:20px;height:20px;color:#c9954a}
.e-stern-1{right:7%;top:16%}
.e-stern-2{left:5%;bottom:20%;width:14px;height:14px}
.e-stern-3{right:11%;bottom:14%;width:11px;height:11px}

/* Zwei Karten mit Foto */
.e-karten{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.e-karte{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 12px 30px #182b1914}
.e-karte .e-foto{height:190px;overflow:hidden;background:var(--soft)}
.e-karte .e-foto img{width:100%;height:100%;object-fit:cover}
.e-karte .e-foto.e-gear{display:flex;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(120% 100% at 50% 20%,#fff 0,#e6eee7 75%)}
.e-karte .e-foto.e-gear img{width:auto;height:auto;max-width:56%;max-height:158px;object-fit:contain;
  filter:drop-shadow(0 9px 10px #1c2b2326)}
.e-karte .e-foto.e-gear img+img{max-width:34%;max-height:130px}
.e-kb{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.e-kb h3{font-size:26px}
.e-sub{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;margin-top:8px}
.e-tasty .e-sub{color:var(--accent)}
.e-rental .e-sub{color:var(--red)}
.e-kb p.e-kt{margin-top:14px;color:var(--muted);font-size:15px}
.e-kb .actions{margin-top:auto;padding-top:22px}
.e-kb .btn::after{content:"";flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--pfeil-rechts) center/contain no-repeat;mask:var(--pfeil-rechts) center/contain no-repeat}
.e-rental .btn{background:var(--red);border-color:var(--red)}

/* Vier Vorteile */
  border-radius:50%;background:var(--soft);color:var(--accent)}

@media(prefers-reduced-motion:no-preference){
  .e-karte{transition:transform .3s ease,box-shadow .3s ease}
  .e-karte:hover{transform:translateY(-4px);box-shadow:0 18px 36px #182b191f}
}

@media(max-width:1000px){
  .e-angebot-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:650px){
  .e-blatt-hero{width:120px;height:240px;right:-30px;opacity:.35}
  .e-blatt-hero2{display:none}
  .e-angebot{padding:56px 0 64px}
  .e-karten{grid-template-columns:1fr}
  .e-pinsel{padding:36px 8% 32px}
}

/* v5: Fotokarten mit Logo-Medaillon (statt Symbolen), zentrierte Kartentexte, Liefer-Hinweis */
.e-karte{overflow:visible}
.e-karte .e-foto{height:200px;border-radius:20px 20px 0 0;overflow:hidden;background:var(--soft)}
.e-karte .e-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.e-badge{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:108px;height:108px;
  margin:-54px auto 0;border-radius:50%;background:#161412;overflow:hidden;box-shadow:0 0 0 5px #fff,0 10px 22px #182b1930}
.e-badge img{width:100%;height:100%;object-fit:cover}
.e-badge-rental img{width:80%;height:auto;object-fit:contain}
.e-kb{align-items:center;text-align:center;padding-top:16px}
.e-kb .actions{justify-content:center}
.e-text .e-hinweis{margin-top:20px;font-size:14px;color:var(--muted)}

/* Kontaktseite im Stil der Startseite (12.10.2026) */
.e-blattflaeche{position:relative;overflow:hidden}
.e-blattflaeche>.wrap{position:relative;z-index:1}
.e-blattflaeche .e-blatt-l1{left:-46px;top:20px;width:170px;height:340px;transform:rotate(-10deg);opacity:.4}
.e-blattflaeche .e-blatt-l2{right:-60px;bottom:-40px;width:160px;height:320px;transform:rotate(200deg);opacity:.3}
.e-pinsel-mitte{max-width:780px;margin:0 auto}
.e-kband{padding:44px 0 4px;background:var(--bg)}
.contact-box{background:var(--panel);border-radius:20px;box-shadow:0 12px 30px #182b1914}
@media(max-width:650px){.e-blattflaeche .e-blatt-l1{width:120px;height:240px}.e-blattflaeche .e-blatt-l2{display:none}}

/* ------------------------------------------------------------------
   The Rentalist: Kohle-Glut als fester Hintergrund (12.10.2026, Alex)
   Das Bild ist am Bildschirm festgehalten, die braunen Fenster ziehen
   darueber. Die Fenster sind zu 88 % deckend (--rl-buehne-*), das Bild
   ist leicht abgedunkelt (--rl-glut-dimm). Gerechnet fuer das hellere Bild:
   hellste Stellen hinter dem Text ergeben ca. #332620 -> Text mind. 6:1.
   ------------------------------------------------------------------ */
.rentalist{--rl-glut-bild:url(assets/rl-glut-hell.webp);--rl-glut-dimm:#00000026}
.rentalist::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--rl-glut-dimm),var(--rl-glut-dimm)),var(--rl-glut-bild) center/cover no-repeat #161412}
.rentalist .footer{background:var(--bg)}

/* Hinweise nach unten (12.10.2026): Lieferung und Aufbau bei The Rentalist, "Gut zu wissen" auf der Menuekarte */
.rentalist .category#buffet{margin-bottom:var(--rl-luft)}
.rentalist .rl-lieferung{margin:0 0 64px;padding:clamp(24px,3.4vw,40px) clamp(26px,4vw,48px);
  border:1px solid var(--rl-kante);border-radius:var(--rl-radius);
  background:linear-gradient(180deg,var(--rl-buehne-oben),var(--rl-buehne-unten))}
.rentalist .rl-lieferung h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:12px;color:var(--rl-text)}
.rentalist .rl-lieferung p{color:var(--rl-text-2);max-width:62ch}
.menu-info{scroll-margin-top:90px}

/* Lebendes Feuer im Streifen "Tiny Tasty Saison" der Menuekarte (12.10.2026, Alex-Auftrag).
   Gleiche Regeln wie die Ambient-Heros (cinemagraph.js, Webdesign.md). Das Video liegt zwischen
   dem Standbild (::before) und dem Lese-Verlauf des Streifens (::after); der Hero-Verlauf von
   .tt-ambient entfaellt hier. Gemessener Textkontrast ueber alle Bilder: mind. 10,9:1. */
.chapter-hero .tt-ambient{z-index:-2}
.chapter-hero .tt-ambient .tt-cine{object-position:center}
.chapter-hero .tt-ambient.cine-an::after{display:none}

/* Holzbalken "Menue gefunden?" auf der Menuekarte (12.10.2026, Alex): dunkles Holz wie hinter dem Essen
   (tt-holz-ki), stark verkleinert und gespiegelt (nahtlos). Schleier in der Farbe des Untergrunds
   (--holz-schleier) nimmt Kontrast und Glut zurueck, damit der Balken im Hintergrund bleibt.
   Gewaehlt (Alex, 12.10.2026): .72 = deutlich leiser; Textkontrast mind. 10,2:1. */
.inline-cta{position:relative;isolation:isolate;overflow:hidden;border-color:#ffffff14;
  background:linear-gradient(rgba(22,20,18,var(--holz-schleier,.72)),rgba(22,20,18,var(--holz-schleier,.72))),url(assets/holz-balken.webp) left center/auto 100% repeat-x #1a1512;
  box-shadow:inset 0 1px 0 #ffffff0d,0 8px 18px #00000066}
.inline-cta p{text-shadow:0 1px 5px #000000cc}

/* Kopfzeile mit Holz bzw. Kohle - Vorschau (12.10.2026, Alex). Schalter ist eine Klasse am <body>:
   .holz-kopf  = dunkles Holz wie der Balken "Menue gefunden?" (Schleier .72)
   .kohle-kopf = Kohle-Streifen (kohle-balken.webp, aus dem Kohle-Bild verkleinert und gespiegelt, Schleier .62;
                 Textkontrast mind. 5:1).
   Zurueck auf einfarbig: Klasse vom <body> entfernen. */
.holz-kopf .header{border-bottom-color:#ffffff14;
  background:linear-gradient(rgba(22,20,18,.72),rgba(22,20,18,.72)),url(assets/holz-balken.webp) left center/auto 100% repeat-x #1a1512}
.kohle-kopf .header{border-bottom-color:#ffffff14;
  background:linear-gradient(rgba(22,20,18,.62),rgba(22,20,18,.62)),url(assets/kohle-balken.webp) left center/auto 100% repeat-x #161412}

/* Fusszeile mit Holz bzw. Kohle - gleiche Schalter wie oben (.holz-kopf / .kohle-kopf am <body>), 12.10.2026, Alex.
   Die Fuss-Streifen (holz-fuss.webp, kohle-fuss.webp) stammen aus einem hoeheren Bildausschnitt (nur seitlich
   gespiegelt), damit die Maserung bei der doppelten Hoehe gleich fein bleibt. Schleier fuer die kleine Schrift:
   Holz .72 (Kontrast mind. 7,8:1), Kohle .75 (mind. 5,0:1). */
.holz-kopf .footer{border-top-color:#ffffff14;
  background:linear-gradient(rgba(22,20,18,.72),rgba(22,20,18,.72)),url(assets/holz-fuss.webp?v=2) left center/auto 100% repeat-x #1a1512}
.kohle-kopf .footer{border-top-color:#ffffff14;
  background:linear-gradient(rgba(22,20,18,.75),rgba(22,20,18,.75)),url(assets/kohle-fuss.webp?v=2) left center/auto 100% repeat-x #161412}

/* Schriftgroessen Menue und Fusszeile (12.10.2026, Alex): Menue 16 px mittel, Fusszeile 15 px, Rechtezeile 14 px.
   Einheitlich auf allen Seiten (das Menue ist der feste Anker). Ubuntu bleibt (Wunsch des Inhabers).
   Auf den Holz-/Kohle-Seiten zusaetzlich mittlere Strichstaerke in der Fusszeile. */
.navlinks a{font-size:16px;font-weight:500}
.footer{font-size:15px;line-height:1.65}
.footer strong{font-size:17px}
.footer-links{font-size:14px}
.holz-kopf .footer,.kohle-kopf .footer{font-weight:500}

/* Menue bei 16 px: zwischen 1001 und 1119 px Fensterbreite wird es in einer Zeile zu eng (Menuepunkte brachen um).
   Dort gilt die kompakte Anordnung wie bei schmaleren Fenstern (Logo oben, Menue darunter); kein Umbruch im Menuepunkt. */
.navlinks a{white-space:nowrap}
@media(min-width:1001px) and (max-width:1119px){
.nav{flex-wrap:wrap;justify-content:space-between;padding:16px 0;gap:14px 22px;min-height:0}
.logo{margin:0}
.navlinks{order:3;width:100%;justify-content:center}
}

/* Hover-Effekte (12.10.2026, Alex): Auf den dunklen Seiten hovert das ganze Logo oben (Raute + "Wolfgang Blanke") als
   eine Einheit, gleich stark wie auf der Startseite (scale 1,045). Die Marken-Logos im Kopfbereich (Tiny Tasty,
   The Rentalist) hovern ebenfalls. Bei "Bewegung reduzieren" kein Effekt. */
.logo-dunkel{transition:transform .35s ease}
.logo-dunkel:hover,.logo-dunkel:focus-visible{transform:scale(1.045)}
.logo-dunkel:hover img,.logo-dunkel:focus-visible img{transform:none}
.brand-hero .brandmark{transition:transform .35s ease}
.brand-hero .brandmark:hover{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
.logo-dunkel,.brand-hero .brandmark{transition:none}
.logo-dunkel:hover,.logo-dunkel:focus-visible,.brand-hero .brandmark:hover{transform:none}
}

/* Staerkerer Hover bei allen ausgefuellten Knoepfen (.btn), 12.10.2026, Alex: war zu schwach (nur 8 % dunkler).
   Jetzt: Knopf hebt sich an, Schatten, deutlicher Farbwechsel. Helle Seiten: dunkleres Gruen. Dunkle Seiten
   (orange Knoepfe): heller + leuchtender Ring. Weisser Knopf im gruenen Band: helles Gruengrau. Roter Rentalist-Knopf
   der Startseite: dunkleres Rot. Zweit-Knopf: dickere Linie, Pfeil rutscht weiter. Bei "Bewegung reduzieren" ohne Anheben. */
@media(prefers-reduced-motion:no-preference){
.btn:not(.secondary){transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
}
.btn:not(.secondary):hover,.btn:not(.secondary):focus-visible{filter:none;transform:translateY(-3px);
  background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 10px 22px #0000004d}
.btn:not(.secondary):active{transform:translateY(-1px);box-shadow:0 4px 10px #00000040}
.dark .btn:not(.secondary):hover,.dark .btn:not(.secondary):focus-visible{background:#ffcc94;border-color:#ffcc94;
  box-shadow:0 0 0 4px #ffb36b4d,0 10px 24px #00000080}
.cta .btn:not(.secondary):hover,.cta .btn:not(.secondary):focus-visible,
.dark .cta .btn:not(.secondary):hover,.dark .cta .btn:not(.secondary):focus-visible{background:#e2f0e6;border-color:#e2f0e6;color:#1b3a2b;
  box-shadow:0 10px 22px #0000004d}
.e-rental .btn:not(.secondary):hover,.e-rental .btn:not(.secondary):focus-visible{background:#98001a;border-color:#98001a;color:#fff}
.btn.secondary::before{height:3px}
.btn.secondary:hover::after{transform:translateX(5px)}
.btn.secondary[target="_blank"]:hover::after{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){
.btn:not(.secondary):hover,.btn:not(.secondary):focus-visible,.btn:not(.secondary):active{transform:none}
}

/* Karten "Tiny Tasty" / "The Rentalist" auf der Startseite: deutlicherer, aber sanfter Hover (12.10.2026, Alex).
   Karte hebt sich 6 px, Schatten sichtbar, Foto zoomt leicht, Logo-Medaillon waechst minimal, Knopf reagiert mit.
   Die ganze Karte ist anklickbar (Knopf-Link per ::before ueber die Karte gespannt) - ein Hover auf einer
   Flaeche ohne Klick waere irrefuehrend. Bei "Bewegung reduzieren": nur Schatten/Farbe, keine Bewegung. */
.e-karte{position:relative}
.e-kb .btn::before{content:"";position:absolute;inset:0;z-index:1}
/* Der Knopf in der Karte bewegt sich nicht selbst (sonst schrumpft die Klickflaeche: ein transformiertes Element wird zum Bezugsrahmen). */
.e-karte .btn:not(.secondary):hover,.e-karte .btn:not(.secondary):focus-visible,.e-karte .btn:not(.secondary):active,.e-karte:hover .btn:not(.secondary){transform:none}
.e-karte:hover,.e-karte:focus-within{box-shadow:0 22px 44px #182b1933;border-color:#b9c7bd}
.e-tasty:hover .btn:not(.secondary){background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 10px 22px #0000004d}
.e-rental:hover .btn:not(.secondary){background:#98001a;border-color:#98001a;color:#fff;box-shadow:0 10px 22px #0000004d}
@media(prefers-reduced-motion:no-preference){
.e-karte{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.e-karte:hover{transform:translateY(-6px)}
.e-karte .e-foto img,.e-badge{transition:transform .5s ease}
.e-karte:hover .e-foto img{transform:scale(1.06)}
.e-karte:hover .e-badge{transform:scale(1.07)}
.e-karte:hover .btn::after{transform:translateX(4px)}
.e-kb .btn::after{transition:transform .2s ease}
}

/* Startseite: Band "Zwei starke Marken" ruhig (12.10.2026, Alex: altes Pinselband mit Sternchen passte nicht).
   Nur Handschrift in Logo-Rot auf dem Seitenhintergrund, kleiner gruener Strich wie unter der linken Ueberschrift.
   Die Kontaktseite nutzt weiter das alte .e-pinsel (nicht angefasst). */
.e-pinsel.e-pinsel-ruhig{padding:4px 0 2px;text-align:center}
.e-pinsel-ruhig h2,.e-pinsel-ruhig h3{font-size:clamp(34px,3.8vw,46px);color:var(--red)}
.e-pinsel-ruhig p{margin:12px auto 0;font-size:15px;color:var(--muted);font-weight:500}
.e-pinsel-ruhig::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--accent);margin:18px auto 0}

/* Tiny Tasty: die vier Kacheln (Aktionen/Menues, Salate, Grillpaket, Gruenkohl) mit Hover (12.10.2026, Alex).
   Wie die Startseiten-Karten: Karte hebt sich 6 px, warmer Rand + Schatten, Foto zoomt leicht, Link-Linie waechst,
   Pfeil rutscht. Die ganze Kachel ist anklickbar (Link-::before ueber die Kachel gespannt), sonst waere der Hover
   irrefuehrend. Die Linie des Zweit-Knopfes wird dafuer als Hintergrund gezeichnet, weil sein ::before jetzt die
   Klickflaeche ist. Bewegung nur auf Geraeten mit Maus und ohne "Bewegung reduzieren". */
.tt-schrift .card{position:relative;cursor:pointer}
.tt-schrift .card .btn.secondary{position:static;
  background:linear-gradient(var(--accent),var(--accent)) left bottom/0 3px no-repeat}
.tt-schrift .card .btn.secondary::before{content:"";position:absolute;inset:0;z-index:1;height:auto;
  background:none;transform:none}
.tt-schrift .card:hover,.tt-schrift .card:focus-within{border-color:#ffb36b99;box-shadow:0 22px 44px #000000b3,0 0 0 1px #ffb36b40}
.tt-schrift .card:hover .btn.secondary,.tt-schrift .card:focus-within .btn.secondary{color:#fff;background-size:100% 3px}
.tt-schrift .card:has(.btn:focus-visible){outline:3px solid var(--gold);outline-offset:4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.tt-schrift .card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.tt-schrift .card:hover{transform:translateY(-6px)}
.tt-schrift .card:hover .season-image{transform:scale(1.05)}
.tt-schrift .card .btn.secondary{transition:color .15s,background-size .25s ease}
.tt-schrift .card:hover .btn.secondary::after{transform:translateX(5px)}
}

/* Kontaktseite: die zwei Kontaktkaesten mit sanftem Hover (12.10.2026, Alex). Kaesten enthalten mehrere Links
   (Telefon, E-Mail, WhatsApp, Karte) und sind deshalb NICHT als Ganzes anklickbar: nur Anheben (4 px) und Schatten. */
.contact-box:hover,.contact-box:focus-within{box-shadow:0 22px 44px #182b1933;border-color:#b9c7bd}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.contact-box{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.contact-box:hover{transform:translateY(-4px)}
}

/* ------------------------------------------------------------------
   Menuekarte: Holz in Originalschaerfe, Stand 13.10.2026
   Vorher wurde tt-holz-ki.webp (1400x788) per cover hinter Abschnitte bis
   2735 px Hoehe gespannt (bis 3,5x vergroessert = weich/wolkig). Jetzt eine
   Kachel (Bild + senkrechte Spiegelung, 1200x1576, nahtlos), die bei 1:1
   wiederholt wird. Nur Menuekarte (.szene-kachel); Tiny Tasty bleibt wie es war.
   Zurueck: Klasse szene-kachel aus den 4 Abschnitten der menuekarte.html nehmen.
   ------------------------------------------------------------------ */
.szene.szene-kachel::before{
  background:url(assets/tt-holz-kachel.webp) center top/1200px auto repeat-y;
  background-color:#161412}

/* ------------------------------------------------------------------
   Fusszeile: groessere Tippflaechen, Stand 13.10.2026 (Audit)
   Links in der Fusszeile waren nur 17-19 px hoch (WCAG 2.2: mind. 24 px,
   auf dem Handy besser mehr). Inline-Block + Polsterung vergroessert die
   Klickflaeche, ohne die Schrift zu aendern.
   ------------------------------------------------------------------ */
.footer a{display:inline-block;padding:4px 0}
@media(max-width:650px){
  .footer a{padding:10px 0}
  .footer-links{row-gap:0}
}

/* ------------------------------------------------------------------
   Menuekarte: Kapitel-Bilder besser lesbar, Stand 13.10.2026 (Kontrast-Messung)
   Die orange Handschrift ("Tiny Tasty") lag an hellen Bildstellen (Tellerrand,
   Schuesselrand) zwischen 2,2:1 und 4,5:1. Jetzt: dunkler Schleier von links
   (dort steht die Schrift) plus mittlerer Verlauf von unten; das Foto rechts
   bleibt hell. Gemessen am hellsten Bildpunkt: Handschrift Desktop mind. 6,3:1,
   Handy mind. 7,3:1 (Grenze 4,5:1). Auf dem Handy (Text bedeckt mehr Bild)
   etwas staerker. Nicht fuer den Saison-Streifen (zentrierte Schrift ueber Video).
   Zurueck: diesen Block entfernen.
   ------------------------------------------------------------------ */
.chapter-hero:not(.chapter-hero--saison)::after{
  background:
    linear-gradient(90deg,#0b090899 0%,#0b090870 28%,#0b090830 52%,#0b090800 72%),
    linear-gradient(0deg,#0b0908cc 0%,#0b090870 45%,#0b090828 100%)}
@media(max-width:650px){
  .chapter-hero:not(.chapter-hero--saison)::after{
    background:
      linear-gradient(90deg,#0b0908bf 0%,#0b09089e 38%,#0b090860 70%,#0b090830 100%),
      linear-gradient(0deg,#0b0908d9 0%,#0b090888 45%,#0b090833 100%)}
}

/* ------------------------------------------------------------------
   Holz heller, Stand 15.10.2026 (Alex: bei Sonne im Raum Holz kaum erkennbar)
   Schalter = Klasse holz-heller am <body> (tiny-tasty.html, menuekarte.html).
   EINE Zahl steuert alles: --holz-hell. 1.5 = Holzbild x1,5, sichtbares Holz
   gemessen ca. +52 % (Alex' Wahl). Kontrast Tiny Tasty bei 1.5: orange mind.
   6,5:1, weiss 10,8:1 (Desktop); Grenze 4,5:1 erst ab ca. x2,4.
   - Holz-Abschnitte: das Holzbild selbst wird heller, Lasur/Blenden bleiben.
     #saison (Menuekarte, vorher 1.2) bekommt denselben Wert - mit 1.2 x 1.5
     waere der Preis dort nur 4,6:1 (zu knapp), so 5,4:1.
   - Kopfzeile und Balken "Menue gefunden?": Schleier (sonst .72) wird so weit
     zurueckgenommen, dass der Holzanteil um denselben Faktor waechst:
     Schleier = 1 - .28 x --holz-hell. Fusszeile ebenso (Alex, 15.10.2026).
   Zurueck: Klasse holz-heller vom <body> nehmen.
   ------------------------------------------------------------------ */
.holz-heller{--holz-hell:1.5}
.holz-heller .szene.szene-hell::before{filter:brightness(var(--holz-hell))}
.holz-heller #saison.szene::before{filter:brightness(var(--holz-hell))}
.holz-heller .inline-cta{--holz-schleier:calc(1 - .28 * var(--holz-hell))}
.holz-heller.holz-kopf .header{
  background:linear-gradient(rgba(22,20,18,calc(1 - .28 * var(--holz-hell))),rgba(22,20,18,calc(1 - .28 * var(--holz-hell)))),url(assets/holz-balken.webp) left center/auto 100% repeat-x #1a1512}
.holz-heller.holz-kopf .footer{
  background:linear-gradient(rgba(22,20,18,calc(1 - .28 * var(--holz-hell))),rgba(22,20,18,calc(1 - .28 * var(--holz-hell)))),url(assets/holz-fuss.webp?v=2) left center/auto 100% repeat-x #1a1512}
/* Startseite: Getränke über Partner (16.10.2026) */
.e-getraenke{padding:56px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.e-getraenke-grid{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:36px;align-items:center}
.e-getraenke-bild{width:96px;height:96px;color:var(--accent)}
.e-getraenke h2{font-size:clamp(26px,2.6vw,32px);text-wrap:balance;max-width:24ch}
.e-getraenke p{margin-top:12px;max-width:62ch}
.e-getraenke .e-partner{font-weight:700}
.e-getraenke .e-getraenke-klein{font-size:14px;color:var(--muted)}
.e-getraenke .e-getraenke-klein a{color:var(--red)}
.e-getraenke .actions{margin-top:0}
@media(max-width:820px){
  .e-getraenke{padding:44px 0}
  .e-getraenke-grid{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .e-getraenke-bild{width:56px;height:56px}
  .e-getraenke .actions{margin-top:6px}
}
/* ------------------------------------------------------------------
   Handy-Kopf Variante C, Stand 01.11.2026 (Alex: Menü-Knopf zu versteckt)
   Zeile 1: Logo links in gewohnter Größe (hell 210 px breit wie bisher,
   dunkel Raute + „Wolfgang Blanke“ in einer Zeile), rechts die vier
   Kontaktknöpfe 2 x 2 (je 44 px Tippfläche).
   Zeile 2: alle Seiten als Reiter, kein Menü-Knopf; zu breit -> seitlich
   wischbar (rechter Rand blendet aus). Computer-Ansicht unverändert.
   ------------------------------------------------------------------ */
@media(max-width:650px){
.nav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px 0 0;min-height:0}
.logo{min-width:0;margin:0}
.logo img{width:210px;max-width:100%;height:auto;max-height:none}
.dark .logo{flex:0 1 auto;gap:8px}
.dark .logo img{width:66px;max-height:none}
.logo-schrift{font-size:18px;white-space:nowrap}
.headicons{display:grid;grid-template-columns:repeat(2,44px);gap:8px;width:auto}
.headicons a{width:44px;height:44px}
.headicons svg{width:19px;height:19px}
.menu-toggle{display:none}
.navlinks,.js .navlinks{display:flex;grid-column:1/-1;width:100%;flex-wrap:nowrap;justify-content:flex-start;
  gap:0 22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:28px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:0;font-size:15px;white-space:nowrap}
.navlinks a[aria-current]{border-bottom-width:3px}
.navlinks a:focus-visible{outline-offset:-4px}
}
/* sehr schmale Handys (unter 375 px): dunkles Logo darf zweizeilig werden */
@media(max-width:374px){
.dark .logo img{width:54px}
.logo-schrift{font-size:15px;line-height:1.05;white-space:normal}
}