/* Zucker & Zeste – Tischgeschichten (Landingpage der Rubrik, Unterrubriken, Riegel auf der Startseite).
   Eigene Datei, damit zuz.css (aus der Vorschau erzeugt) unberührt bleibt.
   Gestaltung: ein zitronengelbes Tischtuch als Bühne, darauf Abzüge wie hingelegt; darunter ruhiges Papier.
   Bewegung kommt aus tisch.js nur über Klassen und Variablen (--lauf, --zx/--zy, .ist-da). */

/* ---------- Grundlagen ---------- */
.tg,.tg-riegel{
  --tg-zeste:#F5E07D;
  --tg-papier:#FBFAF7;
  --tg-tinte:#121110;
  --tg-tuch:#F2EFE7;
  --tg-gruen:#1E3A2B;
  --tg-grau:#5C574E;
  --tg-linie:rgba(18,17,16,.16);
  --tg-weich:cubic-bezier(.2,.7,.2,1);
  --tg-druck:3px;
  --tg-rand:max(48px, var(--gutter-l));
}
@media (max-width:760px){.tg,.tg-riegel{--tg-rand:max(18px, var(--gutter-l))}}
.tg a,.tg-riegel a{text-decoration:none;color:inherit}
.tg em,.tg-riegel em{font-style:italic}
.tg-bild{display:block;position:relative;overflow:hidden;background:#e9e4d8;aspect-ratio:var(--r, 1.5)}
.tg-bild img{width:100%;height:100%;max-width:none;object-fit:cover}
.tg-nr,.tg-index-nr,.tg-index-pf,.tg-liste-pf{display:none}
.tg-alle span[aria-hidden],.tg-knopf span[aria-hidden]{display:none}

.tg-dach{margin:0;font:600 11px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--tg-grau)}
.tg-meta{display:flex;flex-wrap:wrap;row-gap:4px;font:600 11px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tg-grau)}
.tg-meta span + span{margin-left:.8em;padding-left:.8em;border-left:1px solid currentColor}
.tg-datum{font:500 11.5px/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tg-grau)}

.tg-alle,.tg-mehr{display:inline-block;font:600 12px/1.2 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;padding:6px 2px;background:linear-gradient(var(--tg-zeste), var(--tg-zeste)) 0 100% / 100% 3px no-repeat;transition:background-size .3s var(--tg-weich)}
.tg-alle:hover,a:hover > .tg-auf-txt .tg-mehr{background-size:100% 100%}
.tg-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid var(--tg-tinte);background:var(--tg-tinte);color:var(--tg-papier);font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease,transform .25s var(--tg-weich)}
.tg a.tg-knopf,.tg-riegel a.tg-knopf{color:var(--tg-papier)}
.tg-knopf:hover{background:var(--tg-papier);transform:translateY(-2px)}
.tg a.tg-knopf:hover,.tg-riegel a.tg-knopf:hover{color:var(--tg-tinte)}
.tg-knopf--linie{background:transparent}
.tg a.tg-knopf--linie{color:var(--tg-tinte)}
.tg-knopf--linie:hover{background:var(--tg-tinte)}
.tg a.tg-knopf--linie:hover{color:var(--tg-papier)}

/* ---------- Kopf ---------- */
.tg-kopf{position:relative;background:var(--tg-zeste);color:var(--tg-tinte);overflow:hidden}
.tg-kopf .crumbs,.tg-kopf .crumbs a,.tg-kopf .tg-dach{color:rgba(18,17,16,.72)}
.tg-h1{margin:0;font-family:var(--f-display);font-weight:600;font-size:var(--tg-h1);line-height:.84;letter-spacing:-.035em}
.tg-h1-in{display:block;padding-bottom:.14em}
.tg-h1 em{display:block;font-weight:500;letter-spacing:-.04em}
.tg-claim{margin:0;font:italic 400 clamp(22px, 6vw, 30px)/1.22 var(--f-display);text-wrap:balance}
.tg-w,.tg-w > span{display:inline-block}
.tg-intro{margin:0;max-width:46ch;font-size:17px;line-height:1.55;color:rgba(18,17,16,.8)}

.tg-kopf--gross{--tg-h1:clamp(54px, 20vw, 140px)}
.tg-kopf--gross .tg-kopf-in{position:relative;display:flex;flex-direction:column;padding-top:18px;padding-bottom:40px}
.tg-kopf--gross .tg-dach{display:none}
.tg-kopf--gross .tg-h1{margin-top:20px;position:relative;z-index:1}
.tg-kopf--gross .tg-claim{order:3;margin-top:24px}
.tg-kopf--gross .tg-intro{order:4;margin-top:14px}
.tg-kopf--gross .tg-sprung{order:5}

/* Abzüge im Kopf */
.tg-schweb{order:2;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));align-items:start;margin:26px 0 6px}
.tg-schweb-k{display:block;position:relative;z-index:2}
.tg-schweb-in{display:block;position:relative;padding:6px;background:#fff;border-radius:var(--tg-druck);box-shadow:0 1px 0 rgba(18,17,16,.08),0 22px 42px -22px rgba(18,17,16,.55);transform:translate3d(calc((var(--zx, .5) - .5) * var(--tief, 0px)), calc((var(--zy, .5) - .5) * var(--tief, 0px) + var(--lauf, 0) * var(--weg, 0px)), 0) rotate(calc(var(--dreh, 0deg) + var(--lauf, 0) * var(--dreh2, 0deg)));transition:transform .45s var(--tg-weich)}
.tg-schweb .tg-bild{border-radius:1px}
.tg-schweb-t{position:absolute;left:6px;right:6px;bottom:6px;padding:8px 10px;background:var(--tg-tinte);color:var(--tg-papier);font:500 13px/1.25 var(--f-display);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .3s var(--tg-weich)}
.tg-schweb-k:hover{z-index:6}
.tg-schweb-k:hover .tg-schweb-in{transform:rotate(0deg) scale(1.05)}
.tg-schweb-k:hover .tg-schweb-t{opacity:1;transform:none}
.tg-schweb-k--1{grid-column:1 / 8;grid-row:1;--dreh:-4deg;--dreh2:3deg;--weg:-14px;--tief:-10px}
.tg-schweb-k--3{grid-column:8 / 13;grid-row:1;margin-top:20%;margin-left:-16%;--dreh:5deg;--dreh2:-4deg;--weg:-26px;--tief:14px;z-index:3}
.tg-schweb-k--2,.tg-schweb-k--4,.tg-schweb-k--5{display:none}

/* Speisekarte: Sprungliste mit Punktlinie */
.tg-sprung{list-style:none;margin:28px 0 0;padding:0;border-top:1.5px solid var(--tg-tinte)}
.tg-sprung li{border-bottom:1px solid rgba(18,17,16,.3)}
.tg-sprung a{display:flex;align-items:baseline;gap:10px;padding:13px 0;font:500 19px/1.2 var(--f-display);transition:padding .3s var(--tg-weich)}
.tg-sprung a::after{content:"";order:2;flex:1 1 20px;border-bottom:2px dotted rgba(18,17,16,.5);transform:translateY(-4px)}
.tg-sprung a span{order:1}
.tg-sprung a i{order:3;font:600 13px/1 var(--f-ui);font-style:normal;letter-spacing:.06em}
.tg-sprung a:hover{padding-left:10px}
.tg-sprung a:hover span{font-style:italic}

@media (min-width:700px) and (max-width:999px){
  .tg-schweb-k--1{grid-column:1 / 7}
  .tg-schweb-k--2{display:block;grid-column:7 / 11;grid-row:1;margin-top:16%;margin-left:-8%;--dreh:4deg;--dreh2:-3deg;--weg:-20px}
  .tg-schweb-k--3{grid-column:10 / 13;margin-top:4%;margin-left:0}
  .tg-kopf--gross .tg-claim{font-size:34px;max-width:20ch}
}
@media (min-width:1000px){
  .tg-kopf--gross{--tg-h1:clamp(150px, 16.2vw, 228px)}
  .tg-kopf--gross .tg-kopf-in{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:28px;align-items:start;padding-top:22px;padding-bottom:64px}
  .tg-kopf--gross .crumbs{grid-column:1 / 8;grid-row:1}
  .tg-kopf--gross .tg-dach{display:block;grid-column:8 / 13;grid-row:1;justify-self:end}
  .tg-kopf--gross .tg-h1{grid-column:1 / 13;grid-row:2;margin-top:clamp(20px, 3vw, 44px)}
  .tg-kopf--gross .tg-h1 em{margin-left:.5em}
  .tg-schweb{display:contents}
  .tg-schweb-k{margin:0}
  .tg-schweb-k--1,.tg-schweb-k--2{display:block;grid-row:2;grid-column:7 / 13;width:max-content;max-width:100%}
  .tg-schweb-k--1 .tg-bild,.tg-schweb-k--2 .tg-bild{height:calc(var(--tg-h1) * .74);width:auto}
  .tg-schweb-k--1{justify-self:start;margin-top:calc(clamp(20px, 3vw, 44px) + var(--tg-h1) * .02);margin-left:4%;--dreh:-5deg;--dreh2:4deg;--weg:-18px;--tief:-14px}
  .tg-schweb-k--2{justify-self:end;margin-top:calc(clamp(20px, 3vw, 44px) + var(--tg-h1) * .16);--dreh:4deg;--dreh2:-5deg;--weg:-34px;--tief:18px;z-index:3}
  .tg-kopf--gross .tg-claim{grid-column:1 / 6;grid-row:3;margin-top:clamp(20px, 2.4vw, 40px);font-size:clamp(26px, 2.5vw, 36px)}
  .tg-kopf--gross .tg-intro{grid-column:1 / 5;grid-row:4;margin-top:18px}
  .tg-schweb-k--3{display:block;grid-column:6 / 8;grid-row:3 / 6;margin-top:-8px;margin-left:0;--dreh:-6deg;--dreh2:5deg;--weg:-30px;--tief:-20px}
  .tg-schweb-k--4{display:block;grid-column:8 / 10;grid-row:3 / 6;margin-top:56px;margin-left:-22px;--dreh:7deg;--dreh2:-4deg;--weg:-46px;--tief:24px;z-index:3}
  .tg-kopf--gross .tg-sprung{grid-column:10 / 13;grid-row:3 / 6;margin-top:clamp(20px, 2.4vw, 40px)}
}

/* Auftritt des Kopfs: läuft ohne Skript, damit nichts aufblitzt */
@keyframes tg-auf{from{clip-path:inset(0 0 100% 0);transform:translateY(.16em)}to{clip-path:inset(-20% -20% -20% -20%);transform:none}}
/* Titel im Kopf: nur Verschieben, kein Ausblenden – die Überschrift steht vom ersten Bild an da (wichtig für die Ladezeit-Messung LCP) */
@keyframes tg-steig{from{transform:translateY(.14em)}to{transform:none}}
@keyframes tg-schub{from{transform:translateX(-.24em)}to{transform:none}}
@keyframes tg-leg{from{opacity:0;transform:translateY(48px) rotate(calc(var(--dreh, 0deg) * -2.4)) scale(.9)}to{opacity:1;transform:none}}
@keyframes tg-wort{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes tg-blend{from{opacity:0}to{opacity:1}}
@keyframes tg-vorhang{from{clip-path:inset(0 0 100% 0);transform:scale(1.16)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes tg-band{to{transform:translateX(-25%)}}
.tg-kopf .tg-h1-in{animation:tg-steig .9s var(--tg-weich) both}
.tg-kopf .tg-h1 em{animation:tg-schub 1.1s var(--tg-weich) .1s both}
.tg-kopf .tg-schweb-k{animation:tg-leg .95s var(--tg-weich) calc(.38s + var(--i, 1) * .11s) both}
.tg-kopf .tg-w > span{animation:tg-wort .7s var(--tg-weich) calc(.55s + var(--i, 0) * 45ms) both}
.tg-kopf .tg-intro,.tg-kopf .tg-sprung{animation:tg-blend .9s ease 1s both}

/* Laufband */
.tg-band{overflow:hidden;background:var(--tg-tinte);color:var(--tg-papier);padding-block:14px}
.tg-band-in{display:flex;width:max-content;animation:tg-band 52s linear infinite}
.tg-band-t{display:flex;align-items:center;flex:none}
.tg-band-t span{font:italic 400 19px/1 var(--f-display);white-space:nowrap}
.tg-band-t i{flex:none;width:9px;height:9px;margin-inline:22px;border-radius:50%;background:var(--tg-zeste)}

/* Kleiner Kopf (Unterrubrik, Folgeseiten) */
.tg-kopf--klein .tg-kopf-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:22px;padding-bottom:clamp(30px, 4vw, 52px)}
.tg-kopf--klein .tg-dach{display:none}
.tg-h1--klein{font-size:clamp(50px, 11vw, 136px);line-height:.9}
.tg-h1--klein em{display:inline}
/* Unterrubrik: der Name groß („Restaurants“), darunter der Schmucktitel kursiv („Zu Tisch“) – beides in der Hauptüberschrift */
.tg-h1-name{display:block}
.tg-h1-name + .tg-h1-in{margin-top:.14em;padding-bottom:.04em;font-size:max(.42em, 26px);font-weight:500;font-style:italic;line-height:1;letter-spacing:-.02em}
.tg-kopf .tg-h1-name{animation:tg-steig .9s var(--tg-weich) both}
.tg-kopf .tg-h1-name + .tg-h1-in{animation:tg-schub 1.1s var(--tg-weich) .1s both}
.tg-kopf .tg-h1-name + .tg-h1-in em{animation:none}
.tg-kopf--klein .tg-claim{max-width:30ch;font-size:clamp(20px, 2.4vw, 30px)}
.tg-sprung--rubriken{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;border:0}
.tg-sprung--rubriken li{border:0}
.tg-sprung--rubriken a{align-items:center;padding:9px 16px;border:1.5px solid var(--tg-tinte);border-radius:999px;font-size:16px}
.tg-sprung--rubriken a::after{display:none}
.tg-sprung--rubriken a:hover{padding-left:16px;background:var(--tg-tinte);color:var(--tg-zeste)}
.tg-sprung--rubriken a[aria-current]{background:var(--tg-tinte);color:var(--tg-zeste)}

/* ---------- Aufmacher ---------- */
.tg-auf{padding-block:clamp(48px, 7vw, 104px) clamp(24px, 4vw, 56px)}
.tg-auf-link{position:relative;display:grid;gap:24px}
.tg-auf-bild .tg-bild{aspect-ratio:var(--r);max-height:min(86vh, 820px);width:100%}
.tg-auf-bild img{transform:scale(1.14) translateY(calc(var(--lauf, 0) * 4.5%));transition:transform .25s linear}
.tg-auf-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tg-marke{display:grid;place-items:center;width:92px;height:92px;padding:12px;border-radius:50%;border:1.5px solid var(--tg-tinte);background:var(--tg-zeste);font:600 10.5px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;text-align:center;transform:rotate(-11deg);transition:transform .5s var(--tg-weich)}
.tg-auf-link:hover .tg-marke{transform:rotate(8deg) scale(1.05)}
.tg-auf-h{margin:0;font:600 clamp(32px, 5vw, 66px)/1.03 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.tg-auf .tg-text{margin:0;max-width:52ch;font-size:clamp(18px, 1.5vw, 21px);line-height:1.5;color:var(--tg-grau)}
.tg-auf-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.tg-auf-fuss time{font:500 12px/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--tg-grau)}
@media (max-width:899px){.tg-auf.is-hoch .tg-auf-bild{width:82%}.tg-marke{margin-top:-58px;margin-left:auto;position:relative;z-index:2}}
@media (min-width:900px){
  .tg-auf-link{grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:32px;align-items:center}
  .tg-auf.is-hoch .tg-auf-bild{grid-column:1 / 6}
  .tg-auf.is-hoch .tg-auf-txt{grid-column:7 / 13}
  .tg-auf.is-quer .tg-auf-bild,.tg-auf.is-quad .tg-auf-bild{grid-column:1 / 8}
  .tg-auf.is-quer .tg-auf-txt,.tg-auf.is-quad .tg-auf-txt{grid-column:8 / 13}
  .tg-auf.is-ohne .tg-auf-txt{grid-column:2 / 11}
  .tg-marke{width:108px;height:108px;font-size:11.5px;margin-left:-84px;margin-bottom:6px;position:relative;z-index:2}
  .tg-auf.is-quer .tg-marke,.tg-auf.is-quad .tg-marke{margin-left:-70px}
}

/* ---------- Abschnitte ---------- */
.tg-sek{padding-block:clamp(48px, 6.4vw, 104px)}
.tg-sek-kopf{display:grid;gap:12px 32px;padding-top:18px;border-top:1.5px solid var(--tg-tinte);margin-bottom:clamp(28px, 4vw, 60px)}
.tg-h2{margin:0;order:-1;font:600 clamp(46px, 13vw, 124px)/.9 var(--f-display);letter-spacing:-.03em;padding-bottom:.08em}
.tg-h2 em{font-weight:500}
.tg-sek-kopf .tg-dach{display:flex;align-items:center;gap:10px;color:inherit}
.tg-sek-kopf .tg-dach::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tg-zeste);border:1px solid currentColor}
.tg-sek-text{margin:0;max-width:40ch;font-size:clamp(18px, 1.45vw, 21px);line-height:1.5}
.tg-sek-kopf .tg-alle{justify-self:start;display:none}
.tg-sek-fuss{margin:clamp(28px, 4vw, 48px) 0 0}
.tg-js .tg-sek-kopf:not(.ist-da) .tg-h2{clip-path:inset(0 0 100% 0);transform:translateY(.14em)}
.tg-sek-kopf.ist-da .tg-h2{animation:tg-auf 1s var(--tg-weich) backwards}
@media (min-width:900px){
  .tg-sek-kopf{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);grid-template-rows:auto auto 1fr;align-items:start}
  .tg-sek-kopf .tg-h2{grid-column:1;grid-row:1 / 4;font-size:clamp(72px, 8.6vw, 124px)}
  .tg-sek-kopf .tg-dach{grid-column:2;grid-row:1;padding-top:10px}
  .tg-sek-kopf .tg-sek-text{grid-column:2;grid-row:2}
  .tg-sek-kopf .tg-alle{display:inline-block;grid-column:2;grid-row:3;margin-top:6px}
  .tg-sek:not(.tg-sek--alle-karten) .tg-sek-fuss{display:none}
}

/* Karten */
.tg-karte{display:flex;flex-direction:column;gap:14px;min-width:0}
.tg-karte .tg-bild{aspect-ratio:var(--r)}
.tg-karte .tg-bild img{transition:transform .9s var(--tg-weich)}
.tg-karte:hover .tg-bild img{transform:scale(1.04)}
.tg-karte-txt{display:flex;flex-direction:column;gap:8px}
.tg-titel{margin:0;font:600 clamp(21px, 1.9vw, 27px)/1.14 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.tg-karte:hover .tg-titel{text-decoration:underline;text-decoration-color:var(--tg-zeste);text-decoration-thickness:3px;text-underline-offset:4px}
.tg-karte .tg-text{margin:0;font-size:16.5px;line-height:1.5;color:var(--tg-grau)}
.tg-karte .tg-mehr{display:none}
.tg-js .tg-karte:not(.ist-da) .tg-bild img{clip-path:inset(0 0 100% 0)}
.tg-karte.ist-da .tg-bild img{animation:tg-vorhang 1.1s var(--tg-weich) calc(var(--i, 0) * 90ms) backwards}

/* Mosaik: Zeilen gleicher Bildhöhe, Hoch- und Querformat nebeneinander */
.tg-l--mosaik,.tg-l--index{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(40px, 5vw, 72px) 32px}
.tg-l--mosaik > .tg-karte,.tg-l--index > .tg-karte{flex:var(--r) 1 calc(var(--r) * 400px);max-width:calc(var(--r) * 580px)}
@media (max-width:699px){
  .tg-l--mosaik > .tg-karte,.tg-l--index > .tg-karte{flex:none;width:100%;max-width:none}
  .tg-l--mosaik > .tg-karte.is-hoch,.tg-l--index > .tg-karte.is-hoch{width:80%}
  .tg-l--mosaik > .tg-karte.is-hoch:nth-child(even),.tg-l--index > .tg-karte.is-hoch:nth-child(even){margin-left:auto}
}

/* Verzeichnis (Am Tresen): Liste wie eine Karte, das Bild folgt dem Zeiger */
.tg-index-rahmen{position:relative;margin-top:clamp(36px, 5vw, 64px)}
.tg-index{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--tg-tinte)}
.tg-index-z{border-bottom:1px solid var(--tg-linie)}
.tg-index-z a{display:grid;grid-template-columns:64px minmax(0, 1fr);gap:5px 16px;align-items:center;padding:14px 0}
.tg-index-b{grid-column:1;grid-row:1 / 3;width:64px;height:64px;overflow:hidden;background:#e9e4d8}
.tg-index-b img{width:100%;height:100%;object-fit:cover}
.tg-index-t{grid-column:2;grid-row:1;font:500 clamp(19px, 2.5vw, 34px)/1.14 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.tg-index-ort{grid-column:2;grid-row:2;font:600 11px/1.2 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tg-grau)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .tg-index-z a{display:flex;align-items:baseline;gap:14px;padding:19px 0}
  .tg-index-t{order:1}
  .tg-index-z a::after{content:"";order:2;flex:1 1 28px;min-width:28px;border-bottom:2px dotted rgba(18,17,16,.35);transform:translateY(-.3em)}
  .tg-index-ort{order:3;flex:none}
  .tg-index-z a:hover .tg-index-t{font-style:italic}
  .tg-index-b{position:absolute;z-index:5;left:min(calc(var(--zpx, 0px) + 30px), calc(100% - 300px));top:var(--zpy, 0px);width:clamp(200px, 19vw, 280px);height:auto;aspect-ratio:var(--r);padding:6px;background:#fff;border-radius:var(--tg-druck);box-shadow:0 26px 48px -22px rgba(18,17,16,.6);pointer-events:none;opacity:0;transform:translateY(-50%) rotate(5deg) scale(.86);transition:opacity .22s ease,transform .4s var(--tg-weich)}
  .tg-index-z a:hover .tg-index-b{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
}

/* Bögen (Unterwegs) */
.tg-l--bogen{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:32px;align-items:start}
.tg-karte--bogen .tg-bild{aspect-ratio:.74;border-radius:999px 999px 0 0}
.tg-karte--bogen:nth-child(3n+2){margin-top:clamp(28px, 5vw, 76px)}
.tg-karte--bogen:nth-child(3n){margin-top:clamp(12px, 2vw, 30px)}
@media (max-width:899px){
  .tg-l--bogen{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--tg-rand));padding-inline:var(--tg-rand);scroll-padding-inline:var(--tg-rand)}
  .tg-l--bogen::-webkit-scrollbar{display:none}
  .tg-l--bogen > .tg-karte{flex:none;width:72vw;max-width:340px;scroll-snap-align:start;margin-top:0}
}

/* Regal (Bücher) */
.tg-l--regal{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:40px 28px;align-items:end}
.tg-karte--regal .tg-bild{aspect-ratio:.7;background:var(--tg-tuch);box-shadow:8px 10px 0 -2px var(--tg-zeste)}
@media (max-width:899px){.tg-l--regal{grid-template-columns:repeat(2, minmax(0, 1fr))}}

/* Drei gleich große Karten (Artikelende) */
.tg-l--drei{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:32px}
.tg-karte--drei .tg-bild{aspect-ratio:4 / 5}
@media (max-width:760px){.tg-l--drei{grid-template-columns:minmax(0, 1fr);gap:28px}.tg-karte--drei .tg-bild{aspect-ratio:3 / 2}}
.tg-mehr-sek{margin-top:40px;padding-block:8px 72px}
.tg-mehr-sek .tg-h2{font-size:clamp(38px, 5.4vw, 76px)}
.tg-fakten{display:flex;flex-wrap:wrap;margin:0;font:600 11.5px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.tg-fakten span + span{margin-left:.8em;padding-left:.8em;border-left:1px solid currentColor}

/* ---------- Tellerbilder ---------- */
.tg-teller{--tg-auf:clamp(0, calc((-1 * var(--lauf, 0) - .28) * 2.4), 1);position:relative;z-index:2;background:var(--tg-gruen);color:var(--tg-papier);padding-block:clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px);clip-path:inset(0 calc(var(--tg-auf) * 5vw) 0 calc(var(--tg-auf) * 5vw) round calc(var(--tg-auf) * 40px) calc(var(--tg-auf) * 40px) 0 0)}
.tg-teller-in{padding-inline:calc(var(--tg-auf) * 5vw)}
.tg-teller-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(20px, 3vw, 40px)}
.tg-teller .tg-sek-kopf{flex:1;margin-bottom:0;border-top-color:rgba(251,250,247,.55)}
.tg-teller .tg-h2{color:var(--tg-zeste)}
.tg-teller .tg-sek-text{color:rgba(251,250,247,.84)}
.tg-pfeile{display:none;flex:none;gap:10px}
.tg-pfeil{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor;background:transparent;color:inherit;font:400 20px/1 var(--f-ui);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.tg-pfeil:hover{background:var(--tg-zeste);border-color:var(--tg-zeste);color:var(--tg-tinte)}
.tg-pfeil:disabled{opacity:.32;cursor:default;background:transparent;border-color:currentColor;color:inherit}
.tg-pfeil:focus-visible,.tg-teller a:focus-visible{outline-color:var(--tg-zeste)}
@media (hover:hover) and (pointer:fine){.tg-pfeile{display:flex}}
.tg-bahn{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.tg-bahn::-webkit-scrollbar{display:none}
.tg-bahn.ohne-weg{cursor:auto}
.tg-bahn.zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tg-bahn.zieht a{pointer-events:none}
.tg-bahn:focus-visible{outline:2px solid var(--tg-zeste);outline-offset:-4px}
.tg-teller-bahn{align-items:flex-start;gap:clamp(16px, 2vw, 30px);padding:22px var(--tg-rand) 30px;scroll-snap-type:x proximity;scroll-padding-inline:var(--tg-rand)}
.tg-teller-b{flex:none;margin:0;scroll-snap-align:start}
.tg-teller-b .tg-bild{height:clamp(250px, 46vh, 460px);width:auto;aspect-ratio:var(--r);border-radius:var(--tg-druck);background:rgba(251,250,247,.08)}
.tg-teller-b .tg-bild img{transition:transform .9s var(--tg-weich)}
.tg-teller-b a.tg-bild:hover img{transform:scale(1.05)}
/* Telefon: Quer- und Quadratbilder nie breiter als der Bildschirm (sonst sieht man das Bild nur angeschnitten) */
@media (max-width:699px){
  .tg-teller-b.is-quer .tg-bild{height:auto;width:min(84vw, 420px)}
  .tg-teller-b.is-quad .tg-bild{height:auto;width:min(76vw, 380px)}
}
.tg-teller-b--2{margin-top:34px}
.tg-teller-b--3{margin-top:10px}
.tg-teller-b--4{margin-top:48px}
.tg-teller-b figcaption{display:flex;flex-direction:column;gap:4px;width:0;min-width:100%;margin-top:12px}
.tg-teller-was{font:italic 400 17px/1.3 var(--f-display)}
.tg-teller-wo{font:500 10.5px/1.35 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(251,250,247,.7)}
.tg-bahn-stand{position:relative;height:2px;margin:6px var(--tg-rand) 0;background:rgba(251,250,247,.22)}
.tg-bahn-stand i{position:absolute;top:0;bottom:0;left:calc(var(--bahn, 0) * 78%);width:22%;background:var(--tg-zeste)}

/* ---------- Gastgeber ---------- */
.tg-gast{background:var(--tg-tuch);padding-block:clamp(52px, 7vw, 104px)}
.tg-gast-in{display:grid;gap:28px;align-items:center}
.tg-gast-bilder{display:flex;align-items:center}
.tg-gast-b{display:block;flex:none;width:clamp(104px, 13vw, 164px);aspect-ratio:1;overflow:hidden;border-radius:50%;border:5px solid var(--tg-tuch);background:#ddd;box-shadow:0 18px 34px -20px rgba(18,17,16,.5)}
.tg-gast-b img{width:100%;height:100%;object-fit:cover}
.tg-gast-b + .tg-gast-b{margin-left:-22px}
.tg-gast-b--1{transform:rotate(-5deg)}
.tg-gast-b--2{transform:rotate(4deg) translateY(14px)}
.tg-gast-b--3{transform:rotate(-2deg)}
.tg-gast-b.is-hoch,.tg-gast-b.is-quer,.tg-gast-b.is-quad{width:clamp(130px, 17vw, 230px);aspect-ratio:var(--r);border-radius:var(--tg-druck);border:6px solid #fff}
.tg-gast-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tg-gast .tg-h2{order:0;font-size:clamp(36px, 5.2vw, 72px);line-height:.96}
.tg-gast .tg-sek-text{max-width:46ch}
@media (min-width:900px){.tg-gast-in{grid-template-columns:auto minmax(0, 1fr);column-gap:clamp(40px, 6vw, 96px)}}

/* ---------- Archiv ---------- */
.tg-sek--archiv .tg-sek-kopf .tg-h2{font-size:clamp(38px, 5.4vw, 76px)}
.tg-liste{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--tg-tinte)}
.tg-liste-z{border-bottom:1px solid var(--tg-linie);break-inside:avoid}
.tg-liste-z a{display:grid;grid-template-columns:64px minmax(0, 1fr);gap:6px 16px;align-items:center;padding:14px 0}
.tg-liste-b{grid-column:1;grid-row:1 / 3;width:64px;height:64px;overflow:hidden;background:#e9e4d8}
.tg-liste-b img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--tg-weich)}
.tg-liste-z a:hover .tg-liste-b img{transform:scale(1.08)}
.tg-liste-txt{display:contents}
.tg-liste-z time{grid-column:2;grid-row:1;justify-self:end;font:500 11px/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--tg-grau)}
.tg-liste-z .tg-meta{grid-column:2;grid-row:1;justify-self:start}
.tg-liste-z .tg-meta span + span{display:none}
.tg-liste-t{grid-column:2;grid-row:2;font:600 19px/1.2 var(--f-display);text-wrap:balance}
.tg-liste-z a:hover .tg-liste-t{text-decoration:underline;text-decoration-color:var(--tg-zeste);text-decoration-thickness:3px;text-underline-offset:4px}
@media (min-width:1000px){.tg-liste{columns:2;column-gap:56px}}

/* ---------- Riegel auf der Startseite ---------- */
.tg-riegel{position:relative;overflow:hidden;margin-bottom:64px;background:var(--tg-zeste);color:var(--tg-tinte)}
.tg-riegel-in{display:grid;gap:26px;align-items:center;padding-top:clamp(40px, 6vw, 84px);padding-bottom:clamp(30px, 5vw, 72px)}
.tg-riegel-txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.tg-riegel .tg-dach{color:rgba(18,17,16,.72)}
.tg-riegel-h{margin:0;font:600 clamp(48px, 17.4vw, 96px)/.86 var(--f-display);letter-spacing:-.035em}
.tg-riegel-h a{display:block}
.tg-riegel-h em{display:block;font-weight:500;padding-bottom:.12em}
.tg-riegel .tg-claim{max-width:24ch;font-size:clamp(20px, 2.2vw, 28px)}
.tg-js .tg-riegel-txt:not(.ist-da) .tg-w > span{opacity:0}
.tg-riegel-txt.ist-da .tg-w > span{animation:tg-wort .7s var(--tg-weich) calc(.1s + var(--i, 0) * 45ms) backwards}
.tg-faecher{display:flex;align-items:center;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--tg-rand));padding:16px var(--tg-rand) 30px}
.tg-faecher::-webkit-scrollbar{display:none}
.tg-fk{flex:none;width:48vw;max-width:210px;scroll-snap-align:center}
.tg-fk.is-quer{width:66vw;max-width:290px}
.tg-fk-in{display:block;padding:8px 8px 12px;background:#fff;border-radius:var(--tg-druck);box-shadow:0 2px 0 rgba(18,17,16,.06),0 24px 44px -24px rgba(18,17,16,.6);transform:rotate(calc(var(--dreh, 0deg) + var(--lauf, 0) * var(--dreh2, 0deg))) translateY(calc(var(--lauf, 0) * var(--weg, 0px)));transition:transform .45s var(--tg-weich)}
.tg-fk .tg-bild{border-radius:1px}
.tg-fk-txt{display:block;padding:10px 4px 2px}
.tg-fk .tg-meta{margin-bottom:5px;font-size:9.5px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.tg-fk .tg-meta span:first-child:not(:last-child){display:none}
.tg-fk .tg-meta span + span{margin-left:0;padding-left:0;border-left:0}
.tg-fk-t{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;font:600 15px/1.2 var(--f-display)}
.tg-fk--1{--dreh:-2deg}
.tg-fk--2{--dreh:1.5deg}
.tg-fk--3{--dreh:-1deg}
.tg-fk--4{--dreh:2deg}
.tg-fk--5{--dreh:-1.5deg}
@media (min-width:1000px){
  .tg-riegel-in{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:36px}
  .tg-riegel-h{font-size:clamp(60px, 7.1vw, 104px)}
  .tg-faecher{justify-content:center;gap:0;overflow:visible;margin:0;padding:26px 0;cursor:auto}
  .tg-fk,.tg-fk.is-quer{width:clamp(138px, 13.6vw, 196px);max-width:none;margin-left:-52px;position:relative;z-index:1}
  .tg-fk.is-quer{width:clamp(170px, 17vw, 244px)}
  .tg-fk:first-child{margin-left:0}
  .tg-fk--1{--dreh:-10deg;--dreh2:-5deg;--weg:-10px;margin-top:26px}
  .tg-fk--2{--dreh:-4deg;--dreh2:-3deg;--weg:-22px;margin-top:-22px;z-index:2}
  .tg-fk--3{--dreh:3deg;--dreh2:2deg;--weg:-8px;margin-top:38px;z-index:3}
  .tg-fk--4{--dreh:8deg;--dreh2:4deg;--weg:-26px;margin-top:-14px;z-index:2}
  .tg-fk--5{--dreh:13deg;--dreh2:6deg;--weg:-12px;margin-top:44px}
  .tg-fk:hover{z-index:9}
  .tg-fk:hover .tg-fk-in{transform:rotate(0deg) translateY(-16px) scale(1.07)}
}

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion:reduce){
  .tg *,.tg-riegel *{animation:none !important;transition:none !important}
  .tg-band-in{transform:none}
}