/* Treffpunkt Places — Detailansicht (Visual MVP1).
   Praefix tp-. Ohne dieses Stylesheet bleibt die Ausgabe semantisch
   korrekt und lesbar. Keine Schriften, Bilder oder Skripte von fremden
   Servern; die Illustration ist Inline-SVG. Das Theme wird nicht
   ueberschrieben: alle Regeln haengen unter .tp-place / .tp-detail.

   Gestaltungsgrundlage sind die vier Referenzbilder aus
   treffpunkt-places-visual-mvp1-mockups. Uebernommen wird ihr
   VISUELLES System — Proportionen, Weissraum, Typografie, Karten.
   NICHT uebernommen werden ihre Beispieldaten. */

/* ========================== GRUNDLAGEN ========================== */
.tp-place{
  /* 0.9.13 — dieselbe Farbfamilie wie die Rubrik Restaurants.
     Bis 0.9.12 fuehrte die Detailansicht eigene, aus den
     Referenzbildern abgenommene Werte: ein kuehles Smaragdgruen
     (#155e4b) als Akzent und eine gruenstichige Sekundaerflaeche
     (#eef4ef). Nebeneinander gehalten wirkten Discovery und Detail
     dadurch wie zwei Marken — derselbe Betrieb, zwei Gruentoene.

     Die Namen der Variablen bleiben, damit keine Regel unten
     angefasst werden muss; nur die Werte kommen jetzt aus der
     verbindlichen Tokenliste der Rubrik. --tp-green heisst also
     weiterhin so, traegt aber das Olivgruen. */
  --tp-ink:#1A1A1A;          /* Fliesstext, Ueberschriften            */
  --tp-ink-soft:#4A4A4A;     /* zweite Textebene                      */
  --tp-muted:#4A4A4A;        /* Beschriftungen, Zusatzangaben         */
  --tp-line:#E7E1D6;         /* Rahmen von Karten                     */
  --tp-hair:#EFEBE3;         /* Trennlinien innerhalb von Karten      */
  --tp-soft:#F3EFE6;         /* ruhige Flaeche  (surface-alt)         */
  --tp-cream:#FFFEFC;        /* Kartenflaeche   (surface)             */
  --tp-green:#556B45;        /* olive                                 */
  --tp-green-dark:#2E3A24;   /* olive-dark                            */
  --tp-green-soft:#F3EFE6;   /* warme statt gruenstichiger Flaeche    */
  --tp-green-ink:#2E3A24;
  --tp-terracotta:#B85C38;
  --tp-serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --tp-r:14px;               /* Standardradius Karten, wie Discovery  */
  --tp-r-s:8px;              /* Knoepfe, kleine Flaechen              */
  color:var(--tp-ink);
}
.tp-detail{width:100%}

/* Innenabstand und Rahmen zaehlen zur Breite. Ohne diese Zeile ist ein
   Knopf mit width:100% um seinen Innenabstand breiter als die Karte,
   in der er steht, und ragt heraus. Das Theme setzt border-box nicht
   fuer alle Elemente, also setzt das Profil es fuer seinen Bereich. */
.tp-detail,.tp-detail *,.tp-detail *::before,.tp-detail *::after{box-sizing:border-box}

.tp-detail p{margin:0}
.tp-detail ul,.tp-detail ol{list-style:none;margin:0;padding:0}
.tp-detail a{color:var(--tp-green);text-decoration:none}
.tp-detail a:hover{text-decoration:underline}
.tp-ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.16em}

/* 0.9.13: dieselbe redaktionelle Stufe wie die Abschnitts-
   ueberschriften der Discovery (32 px / 600 / Georgia). Vorher
   1,6 rem / 700 — schwerer und kleiner, dadurch als eigene
   Typofamilie lesbar. */
.tp-h2{font-family:var(--tp-serif);font-size:2rem;line-height:1.2;font-weight:600;
  letter-spacing:0;margin:0 0 .45rem}

/* Ueberschriftenfarbe. Das Portalthema faerbt jede Ueberschrift ueber
   `h1, h2, h3, h4, h5, h6 { color: var(--wp--preset--color--nachtblau) }`
   — Spezifitaet (0,0,1). Das Profil setzte hier bisher gar keine Farbe,
   also gewann das Thema und die Ueberschriften standen blaugrau statt
   im warmen Fast-Schwarz der Vorlage.

   Die Regel unten ist auf den Profilbereich begrenzt und hat (0,1,1);
   sie gewinnt regulaer, ohne !important, und laesst jede Ueberschrift
   ausserhalb von .tp-detail unberuehrt. Nur die Farbe wird gesetzt —
   Schriftart, Groesse, Gewicht, Abstaende bleiben, wo sie waren. */
.tp-detail h1,.tp-detail h2,.tp-detail h3{color:var(--tp-ink)}

/* Knoepfe. Der gefuellte Knopf ist die einzige starke Farbflaeche der
   Seite und bleibt der Uebernahme des Profils vorbehalten. */
.tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.15rem;border-radius:var(--tp-r-s);background:var(--tp-btn-bg,var(--tp-green));
  color:#fff;font-size:.95rem;font-weight:600;line-height:1.2;border:1px solid var(--tp-btn-bg,var(--tp-green));
  text-decoration:none;transition:background .15s ease}
.tp-btn:hover{background:var(--tp-btn-bg-hover,var(--tp-green-dark));color:#fff;text-decoration:none}
.tp-btn--wide{width:100%}
.tp-btn--ghost{background:#fff;color:var(--tp-green);border-color:var(--tp-line)}
.tp-btn--ghost:hover{background:var(--tp-soft);color:var(--tp-green-dark)}

/* Schriftfarbe der gefuellten Knoepfe.
   
   `.tp-detail a` (0,1,1) weiter oben schlaegt `.tp-btn` (0,1,0) — ein
   Knopf, der ein Link ist, bekam dadurch gruene Schrift auf gruenem
   Grund und war unlesbar. Sichtbar wurde das erst auf Stage, weil die
   gefuellten Knoepfe nur mit hinterlegtem Partnerbereich entstehen.

   Die Korrektur haengt an derselben Bauteil-Umgebung und ergaenzt die
   Knopfklasse: (0,2,1) schlaegt (0,1,1) regulaer. Kein !important,
   keine Aenderung an der allgemeinen Linkfarbe — gewoehnliche
   Textlinks in .tp-detail bleiben gruen.

   Der helle Knopf steht danach und mit gleicher Spezifitaet, damit er
   seine gruene Schrift auf weissem Grund behaelt. */
.tp-detail a.tp-btn{color:#fff}
.tp-detail a.tp-btn:hover{color:#fff}
.tp-detail a.tp-btn--ghost{color:var(--tp-green)}
.tp-detail a.tp-btn--ghost:hover{color:var(--tp-green-dark)}

/* ============================== HERO ==============================
   Referenz 04 trennt Kopf und Medienbereich: der Kopf traegt Name und
   Eckdaten auf ruhigem Grund, darunter steht das Medienband. Dadurch
   liegt der Medienbereich in jedem Bildzustand (0 / 1 / 4 / 12) an
   derselben Stelle und in derselben Hoehe. */
.tp-hero{position:relative;border-radius:var(--tp-r) var(--tp-r) 0 0;overflow:hidden;
  isolation:isolate;background:var(--tp-cream);border:1px solid var(--tp-line);
  border-bottom:0;margin:0}
.tp-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.tp-hero__inner{position:relative;z-index:1;padding:1.25rem 1.9rem 1.55rem;
  display:flex;flex-direction:column;justify-content:flex-start}

/* ============================ MEDIENBAND ==========================
   Der bildlose Zustand. Die Ortszeichnung traegt das Band, darueber
   liegt ein heller Schleier, damit der Hinweis in jedem Motiv lesbar
   bleibt. Gleiche Hoehe wie ein spaeterer Bildzustand. */
.tp-band{position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--tp-line);border-radius:0 0 var(--tp-r) var(--tp-r);
  min-height:18rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f1f4ea 0%,#e9eee2 100%);margin:0 0 1.9rem}
.tp-band__deco{position:absolute;inset:0;z-index:0;opacity:.62;pointer-events:none}
/* Heller Schleier unter dem Hinweis. Er wird ueber der Zeichnung
   aufgehellt, damit der Text in jedem Ausschnitt und jeder Breite
   lesbar bleibt — ohne dass ein Kasten in die Gestaltung kommt. */
.tp-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 50%,rgba(250,248,243,.96) 0%,rgba(250,248,243,.8) 40%,rgba(250,248,243,.28) 66%,rgba(250,248,243,0) 84%)}
.tp-band__panel{position:relative;z-index:1;text-align:center;padding:2.2rem 1.5rem;
  max-width:26rem}
.tp-band__ico{display:inline-flex;align-items:center;justify-content:center;
  width:3.35rem;height:3.35rem;border-radius:999px;margin:0 0 .85rem;
  background:rgba(255,255,255,.72);border:1px solid rgba(28,27,24,.10);
  color:var(--tp-muted)}
.tp-band__ico .tp-ico{width:1.5rem;height:1.5rem}
.tp-band__title{font-size:1.02rem;font-weight:600;color:var(--tp-ink);margin:0 0 .3rem}
.tp-band__note{font-size:.86rem;line-height:1.5;color:var(--tp-muted);margin:0}
.tp-band__cta{margin-top:1.15rem}

/* Mit Foto bleibt der Hero das tragende Bild (Referenz 02). */
.tp-hero--single,.tp-hero--small,.tp-hero--full{
  border:0;border-radius:var(--tp-r);margin:0 0 1.9rem;background:#101410}

/* Mit Foto traegt das Bild den Hero; der Text liegt in einem Verlauf
   darauf, damit er in jedem Motiv lesbar bleibt. */
.tp-hero__bg{position:absolute;inset:0;z-index:0}
.tp-hero__img{display:block;width:100%;height:100%;object-fit:cover}
/* 0.9.13 — der Schleier deckt jetzt BEIDE Enden.
   Bis 0.9.12 lief er nur von unten nach oben und war am oberen Rand
   bei 12 % angekommen. Genau dort steht der Brotkrumenpfad, und bei
   La Rustica liegt dort das beleuchtete rote Schild: gemessen rund
   2,2:1. Der zweite Verlauf von oben nimmt dem Bild in dieser Zone
   Helligkeit, ohne eine Kante oder einen Kasten zu erzeugen. */
.tp-hero__veil{position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(14,18,15,.70) 0%,rgba(14,18,15,.34) 24%,rgba(14,18,15,0) 46%),
    linear-gradient(to top,rgba(14,18,15,.86) 0%,rgba(14,18,15,.46) 52%,rgba(14,18,15,.12) 100%)}
.tp-hero--single .tp-hero__inner,
.tp-hero--small .tp-hero__inner,
.tp-hero--full .tp-hero__inner{min-height:20rem;display:flex;flex-direction:column;justify-content:flex-end}
.tp-hero--single .tp-hero__name,.tp-hero--small .tp-hero__name,.tp-hero--full .tp-hero__name{color:#fff}
.tp-hero--single .tp-hero__sub,.tp-hero--small .tp-hero__sub,.tp-hero--full .tp-hero__sub{color:rgba(255,255,255,.92)}
.tp-hero--single .tp-crumbs,.tp-hero--small .tp-crumbs,.tp-hero--full .tp-crumbs{color:#fff}
.tp-hero--single .tp-crumbs a,.tp-hero--small .tp-crumbs a,.tp-hero--full .tp-crumbs a{color:rgba(255,255,255,.90)}
.tp-hero--single .tp-meta,.tp-hero--small .tp-meta,.tp-hero--full .tp-meta{color:rgba(255,255,255,.94)}
.tp-hero--single .tp-chip,.tp-hero--small .tp-chip,.tp-hero--full .tp-chip{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}

.tp-crumbs{font-size:.82rem;color:var(--tp-muted);margin:0 0 1.35rem}
.tp-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.tp-crumbs__item{display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.tp-crumbs__item+.tp-crumbs__item::before{content:"›";color:var(--tp-muted);opacity:.7}
.tp-crumbs a{color:inherit}
.tp-crumbs__item:last-child{color:var(--tp-ink);font-weight:500}

.tp-hero__grid{display:block;max-width:46rem}
.tp-hero__name{font-family:var(--tp-serif);font-size:3.45rem;line-height:1.02;font-weight:700;
  letter-spacing:-.022em;margin:0 0 .3rem}
.tp-hero__sub{font-size:1.12rem;line-height:1.4;color:var(--tp-ink-soft);margin:0 0 .85rem}

.tp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.15rem;
  font-size:.94rem;color:var(--tp-ink-soft);margin:0 0 .9rem}
.tp-meta__item{display:inline-flex;align-items:center;gap:.4rem}
.tp-meta__item .tp-ico{color:var(--tp-green)}
.tp-meta__item--muted{color:var(--tp-muted)}

.tp-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.tp-chip{display:inline-flex;align-items:center;padding:.3rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(28,27,24,.10);
  font-size:.8rem;line-height:1.3;color:var(--tp-ink-soft)}

/* =========================== REGISTERLEISTE ========================= */
.tp-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--tp-line);margin:0 0 1.9rem}
.tp-tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.tp-tabs::-webkit-scrollbar{display:none}
.tp-tabs__link{display:inline-block;padding:.8rem .2rem;margin:0 .95rem 0 0;
  font-size:.98rem;font-weight:500;color:var(--tp-muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tp-tabs__link:hover{color:var(--tp-ink);text-decoration:none}
.tp-tabs__link[aria-selected="true"],.tp-tabs__link.is-active{
  color:var(--tp-ink);font-weight:600;border-bottom-color:var(--tp-green)}
.tp-tabs__short{display:none}

.tp-acts{display:flex;gap:.5rem;flex:0 0 auto;padding-bottom:.35rem}
.tp-acts button{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;
  border-radius:999px;border:1px solid var(--tp-line);background:#fff;cursor:pointer;
  font:inherit;font-size:.86rem;color:var(--tp-ink-soft)}
.tp-acts button:hover{border-color:#d8d2c5;background:var(--tp-soft)}

/* ============================== PANELS ============================= */
.tp-view[hidden]{display:none}
/* Ohne Skript uebernimmt :target die Auswahl. Mit Skript darf :target
   NICHT mitreden — sonst gewinnt es wegen hoeherer Spezifitaet gegen
   .is-active und es bleiben zwei Panels sichtbar oder gar keins. */
.tp-detail:not(.tp-js) .tp-view--products:target,
.tp-detail:not(.tp-js) .tp-view--menu:target,
.tp-detail:not(.tp-js) .tp-view--info:target{display:block}

.tp-cols{display:grid;grid-template-columns:minmax(0,1fr) 21.5rem;gap:2.4rem;align-items:start}
.tp-cols__main{min-width:0}
.tp-side{display:flex;flex-direction:column;gap:1.1rem;min-width:0}

/* ============================= UEBERBLICK ========================== */
.tp-overview{margin:0 0 1.9rem}
.tp-overview__text,.tp-prose{font-size:1.02rem;line-height:1.72;color:var(--tp-ink-soft)}
.tp-prose--muted{color:var(--tp-muted)}
.tp-overview__text p+p{margin-top:.8rem}

/* Merkmalsleiste: bis zu vier Felder, Symbol ueber der Beschriftung. */
.tp-hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;
  padding:2rem 0 0;margin:2.1rem 0 0;border-top:1px solid var(--tp-hair)}
.tp-hl__item{min-width:0}
.tp-hl__ico{display:block;color:var(--tp-green);margin:0 0 .55rem}
.tp-hl__ico .tp-ico{width:1.55rem;height:1.55rem}
.tp-hl__label{display:block;font-size:.94rem;font-weight:600;line-height:1.3;margin:0 0 .18rem}
.tp-hl__note{display:block;font-size:.85rem;line-height:1.4;color:var(--tp-muted)}

/* Lage & Umgebung */
.tp-lage{margin:1.9rem 0 0}
.tp-near{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.25rem;
  border:1px solid var(--tp-line);border-radius:var(--tp-r);background:var(--tp-cream)}
.tp-near__ico{display:flex;color:var(--tp-green)}
.tp-near__ico .tp-ico{width:1.5rem;height:1.5rem}
.tp-near__body{flex:1 1 auto;min-width:0}
.tp-near__title{display:block;font-size:1rem;font-weight:600;margin:0 0 .12rem}
.tp-near__text{display:block;font-size:.88rem;color:var(--tp-muted)}
.tp-near__cta{flex:0 0 auto;font-size:.9rem;font-weight:600;white-space:nowrap}

/* Erzeuger-Panel (nur mit erfassten Erzeugnissen) */
.tp-panel{border:1px solid var(--tp-line);border-radius:var(--tp-r);
  background:var(--tp-cream);padding:1.35rem 1.45rem;margin:1.9rem 0 0}
.tp-panel__head{display:flex;gap:.85rem;align-items:flex-start;margin:0 0 .9rem}
.tp-panel__ico{color:var(--tp-green);display:flex}
.tp-panel__title{font-size:1.06rem;font-weight:600;margin:0 0 .2rem}
.tp-panel__text{font-size:.9rem;color:var(--tp-muted)}
.tp-panel__group{margin:1rem 0 0}

/* ========================= AUF EINEN BLICK ========================= */
.tp-glance{border:1px solid var(--tp-line);border-radius:var(--tp-r);background:#fff;
  padding:1.35rem 1.4rem}
.tp-glance__title{font-family:var(--tp-serif);font-size:1.22rem;font-weight:700;margin:0 0 1rem}
.tp-facts{display:flex;flex-direction:column;gap:.95rem}
.tp-fact{display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;line-height:1.5}
.tp-fact__ico{display:flex;color:var(--tp-green);padding-top:.12rem}
.tp-fact__body{min-width:0;display:flex;flex-direction:column;gap:.12rem}
/* Die Vorlage fuehrt in "Auf einen Blick" Symbol und Wert, keine
   Beschriftungszeile. Sie bleibt im Markup fuer Screenreader und
   wird visuell ausgeblendet — sichtbar waere sie nur Rauschen. */
.tp-glance .tp-fact__label{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tp-fact__label{font-size:.79rem;font-weight:600;letter-spacing:.02em;color:var(--tp-muted)}
.tp-fact__value{color:var(--tp-ink-soft)}
.tp-fact__value--muted{color:var(--tp-muted)}
.tp-fact__link{display:inline-block;word-break:break-word}
.tp-fact__sep{color:var(--tp-muted);margin:0 .1rem}
.tp-open{font-weight:600}
.tp-open--yes{color:var(--tp-green)}
.tp-open--no{color:#8a5a3b}

.tp-week{margin:.35rem 0 0}
.tp-week__btn{cursor:pointer;font-size:.86rem;color:var(--tp-green);list-style:none}
.tp-week__btn::-webkit-details-marker{display:none}
.tp-week__btn::after{content:" ⌄"}
.tp-hours{margin:.55rem 0 0;display:flex;flex-direction:column;gap:.3rem}
.tp-hours__day{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--tp-ink-soft)}
.tp-hours__span{color:var(--tp-muted);text-align:right}

.tp-side__note{font-size:.85rem;color:var(--tp-muted)}
.tp-side__note--card{border:1px solid var(--tp-line);border-radius:var(--tp-r);
  background:#fff;padding:.9rem 1.1rem}

/* =========================== BETREIBERKARTE ========================
   Der einzige Ort mit gefuelltem Knopf. Nach Vorlage: Kopf mit Symbol,
   kurzer Text, Knopf, danach die Leistungsliste mit Haken. */
.tp-owner{border:1px solid #dbe6dc;border-radius:var(--tp-r);
  background:var(--tp-green-soft);padding:1.35rem 1.4rem}
.tp-owner__head{display:flex;gap:.85rem;align-items:flex-start;margin:0 0 .8rem}
.tp-owner__ava{display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:999px;
  background:var(--tp-green);color:#fff}
.tp-owner__ava--square{border-radius:var(--tp-r-s)}
.tp-owner__ava .tp-ico{width:1.3rem;height:1.3rem}
.tp-owner__title{font-size:1.04rem;font-weight:700;line-height:1.3;margin:0 0 .25rem}
.tp-owner__text{font-size:.9rem;line-height:1.55;color:var(--tp-ink-soft)}
.tp-owner__list{margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.tp-owner__list li{position:relative;padding-left:1.45rem;font-size:.88rem;color:var(--tp-ink-soft)}
.tp-owner__list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--tp-green);font-weight:700}
.tp-owner__status{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid rgba(21,94,75,.14);
  font-size:.83rem;line-height:1.5;color:var(--tp-muted)}

/* ============================ SPEISEKARTE ==========================
   149 Gerichte sind der Belastungsfall. Orientierung entsteht durch die
   waagerechte Bereichsnavigation; sichtbar ist immer genau ein Bereich,
   und dort zunaechst sechs Gerichte. */
.tp-menu__head{margin:0 0 1.35rem;max-width:44rem}
.tp-menu__lead{font-size:1rem;line-height:1.6;color:var(--tp-ink-soft);margin:.15rem 0 .5rem}
.tp-menu__count{font-size:.86rem;color:var(--tp-muted)}

/* Bereichsnavigation der Speisekarte. Referenz 03 stellt sie als
   stehende Liste an den linken Rand; bei zehn Bereichen bleibt so jeder
   Bereich ohne Scrollen sichtbar und die Gerichte behalten die volle
   Breite. Der Wechsel loest keinen weiteren Abruf aus. */
.tp-cats{background:var(--tp-cream);border:1px solid var(--tp-line);
  border-radius:var(--tp-r);padding:1.05rem 1rem}
.tp-cats__title{font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tp-muted);margin:0 0 .6rem;padding:0 .55rem}
.tp-cats__list{display:flex;flex-direction:column;gap:.12rem}
.tp-cats__item{min-width:0}
.tp-cats__link{display:flex;align-items:baseline;justify-content:space-between;gap:.65rem;
  padding:.5rem .55rem;border-radius:var(--tp-r-s);font-size:.93rem;line-height:1.3;
  color:var(--tp-ink-soft);border:1px solid transparent}
.tp-cats__link:hover{background:var(--tp-soft);color:var(--tp-ink);text-decoration:none}
.tp-cats__link[aria-selected="true"],.tp-cats__link.is-active{
  background:var(--tp-green);color:#fff;font-weight:600}
.tp-cats__link[aria-selected="true"] .tp-cats__n,
.tp-cats__link.is-active .tp-cats__n{color:rgba(255,255,255,.8)}
.tp-cats__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-cats__n{flex:0 0 auto;font-size:.78rem;color:var(--tp-muted);font-variant-numeric:tabular-nums}

/* 0.9.13 — Kennzeichnung der Bereiche mit redaktioneller Empfehlung.
   In der schmalen Liste bleibt nur ein Punkt sichtbar; der Text ist
   fuer Screenreader vorhanden und steht sichtbar im Bereichskopf.
   Der Punkt traegt keine eigene Bedeutung ohne diesen Text. */
.tp-cats__pair{flex:0 0 auto;display:inline-flex;align-items:center;margin-left:auto}
.tp-cats__dot{width:.4rem;height:.4rem;border-radius:50%;
  background:var(--tp-terracotta);display:block}
.tp-cats__link[aria-selected="true"] .tp-cats__dot,
.tp-cats__link.is-active .tp-cats__dot{background:rgba(255,255,255,.92)}
.tp-cats__pairtext{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tp-cats__name{flex:1 1 auto}

/* Ausgeschriebene Zahl dort, wo Platz ist. */
.tp-sec__pair,.tp-sec__sep{color:var(--tp-green);}
.tp-menu__pair,.tp-menu__sep{color:var(--tp-green)}

/* ---- 0.9.17: Karten dieses Betriebs ----------------------------
   Ein Betrieb kann mehrere Karten fuehren (La Rustica: Speisekarte,
   Getraenke, Carta dei Vini). Der Umschalter steht ueber der
   Bereichsliste und traegt die Namen, die der Betrieb vergeben hat.
   Ruhige Reiterform, keine Pillen — die Pillen gehoeren auf dieser
   Seite bereits den Bereichen, zwei Pillenebenen uebereinander lesen
   sich als gleichrangig, sind es aber nicht. */
.tp-menus{margin:0 0 1.15rem;border-bottom:1px solid var(--tp-line)}
.tp-menus__list{display:flex;flex-wrap:wrap;gap:.2rem}
.tp-menus__item{min-width:0}
.tp-menus__btn{display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.55rem .9rem;border-bottom:2px solid transparent;
  color:var(--tp-ink-soft);font-size:.96rem;font-weight:600;
  background:none;border-radius:var(--tp-r-s) var(--tp-r-s) 0 0}
.tp-menus__btn:hover{background:var(--tp-soft);color:var(--tp-ink);text-decoration:none}
.tp-menus__btn.is-active{color:var(--tp-green-dark);border-bottom-color:var(--tp-green)}
.tp-menus__n{font-size:.78rem;color:var(--tp-muted);font-variant-numeric:tabular-nums}
.tp-menus__btn.is-active .tp-menus__n{color:var(--tp-green)}
.tp-cats__item[hidden]{display:none}

/* Zu welcher Karte der Bereich gehoert. Ueber der Bereichs-
   ueberschrift, kleiner und ruhiger als sie — es ist eine Einordnung,
   keine zweite Ueberschrift. */
.tp-sec__menu{font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tp-muted);margin:0 0 .15rem}

/* Ruhetag in der Wochenuebersicht. Er steht seit 0.9.17 ausdruecklich
   da und wird nur zurueckgenommen, nicht versteckt. */
.tp-hours--closed .tp-hours__span{color:var(--tp-muted);font-style:italic}

.tp-menu__layout{display:grid;grid-template-columns:18.5rem minmax(0,1fr);
  grid-template-areas:"nav main" "side main";grid-template-rows:auto 1fr;
  gap:1.15rem 2.6rem;align-items:start}
.tp-cats{grid-area:nav}
.tp-menu__main{grid-area:main;min-width:0;max-width:47rem}
.tp-menu__side{grid-area:side;display:flex;flex-direction:column;gap:1.1rem;min-width:0}

.tp-sec[hidden]{display:none}
.tp-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 .3rem;flex-wrap:wrap}
/* Die Kartenzeile nimmt die ganze Breite, damit Name und Zahl darunter
   in ihrer gewohnten Zeile bleiben. */
.tp-sec__menu{flex:1 0 100%}
.tp-sec__name{font-family:var(--tp-serif);font-size:1.45rem;font-weight:700;margin:0}
.tp-sec__n{font-size:.83rem;color:var(--tp-muted);white-space:nowrap}
.tp-sec__desc{font-size:.92rem;color:var(--tp-muted);margin:0 0 .35rem}

.tp-dishes{margin:.6rem 0 0}
.tp-dish{padding:.95rem 0;border-top:1px solid var(--tp-hair)}
.tp-dish:first-child{border-top:0;padding-top:.3rem}
.tp-dish__line{display:flex;align-items:baseline;justify-content:space-between;gap:1.1rem}
.tp-dish__name{font-size:1rem;font-weight:600;line-height:1.35;color:var(--tp-ink)}
.tp-dish__spice{margin-left:.35rem;color:#a4592f;font-size:.8rem;letter-spacing:.08em}
.tp-dish__price{font-size:1rem;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--tp-ink)}
.tp-dish__price--note{font-weight:500;color:var(--tp-muted)}
.tp-dish__desc{font-size:.9rem;line-height:1.55;color:var(--tp-muted);margin:.22rem 0 0;
  max-width:44rem}
.tp-dish__meta{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 0}
.tp-tag,.tp-allergen{display:inline-flex;padding:.16rem .5rem;border-radius:999px;
  font-size:.74rem;line-height:1.4}
.tp-tag{background:var(--tp-green-soft);color:var(--tp-green-ink)}
.tp-allergen{background:var(--tp-soft);color:var(--tp-muted);border:1px solid var(--tp-hair)}
/* --- Redaktionelle Empfehlung zu einem Gericht -------------------
   Bewusst sekundaer: eigene ruhige Flaeche, ein gruener Faden links,
   kleinere Schrift als das Gericht. Sie soll als redaktioneller
   Zusatz lesbar sein und nicht als Bestandteil des Gerichts.
   Ohne Bild, ohne Preis, ohne Abzeichen - der Vertrag belegt nichts
   davon.                                                          */
.tp-pairing{margin:.5rem 0 0;padding:.55rem .7rem .6rem;
  background:var(--tp-green-soft);border-left:2px solid var(--tp-green);
  border-radius:0 var(--tp-r-s) var(--tp-r-s) 0}
.tp-pairing__head{display:flex;align-items:center;gap:.34rem;margin:0 0 .3rem;
  font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tp-green-ink)}
.tp-pairing__ico{display:inline-flex;flex:0 0 auto;color:var(--tp-green)}
.tp-pairing__ico svg{width:.9rem;height:.9rem;display:block}
.tp-pairing__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.45rem}
.tp-pairing__item{display:flex;flex-direction:column;gap:.06rem;min-width:0}
.tp-pairing__product{font-size:.92rem;font-weight:600;line-height:1.35;
  color:var(--tp-ink);overflow-wrap:anywhere}
.tp-pairing__from{font-size:.85rem;line-height:1.45;color:var(--tp-ink-soft);
  overflow-wrap:anywhere}
.tp-detail .tp-pairing__producer{color:var(--tp-green-ink);font-weight:500}
.tp-detail a.tp-pairing__producer{text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.tp-detail a.tp-pairing__producer:hover{color:var(--tp-green-dark)}
.tp-pairing__sep{margin:0 .28rem;color:var(--tp-muted)}
.tp-pairing__where{color:var(--tp-ink-soft)}
.tp-pairing__note{font-size:.76rem;line-height:1.4;color:var(--tp-muted);margin-top:.1rem}

/* --------------------------- PRODUKTE ----------------------------
   Register "Produkte" eines Erzeugerprofils.

   Mit Bild (0.9.101): das Bild des Produkts steht oben auf der Karte.
   Ohne Bild bleibt die Karte rein typografisch - ein fehlendes Foto
   wird weder durch ein Platzhalterbild noch durch ein Stockmotiv
   ersetzt. Es werden nur bereits
   vorhandene Farbtoken verwendet, keine neue Farbe. */
.tp-products{max-width:52rem}
.tp-products__head{margin:0 0 1.25rem}
.tp-products__lead{font-size:.95rem;line-height:1.55;color:var(--tp-ink-soft);margin:.35rem 0 0}
.tp-products__kind{font-size:.82rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tp-green-ink);margin:.5rem 0 0}
.tp-products__list{list-style:none;margin:0 0 1.15rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.9rem}

.tp-product{position:relative;min-width:0;
  padding:1rem 1.1rem 1.05rem;background:#fff;
  border:1px solid var(--tp-line);border-radius:var(--tp-r);
  border-top:3px solid var(--tp-green)}
.tp-product__cat{margin:0 0 .3rem;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tp-green-ink)}
.tp-product__name{margin:0;font-size:1.04rem;font-weight:600;line-height:1.35;
  color:var(--tp-ink);overflow-wrap:anywhere}
.tp-product__desc{margin:.45rem 0 0;font-size:.88rem;line-height:1.55;
  color:var(--tp-ink-soft);overflow-wrap:anywhere}
.tp-product__price{margin:.55rem 0 0;font-size:.88rem;font-weight:600;color:var(--tp-ink)}
/* 0.9.101: Produktbild (Migration 0199). Festes Seitenverhaeltnis, damit Karten mit und ohne Bild die Zeile nicht springen lassen. */
.tp-product--bild{padding-top:0;overflow:hidden}
.tp-product__fig{margin:0 -1.1rem .8rem;aspect-ratio:4/3;background:var(--tp-line);overflow:hidden}
.tp-product__img{display:block;width:100%;height:100%;object-fit:cover}
/* 0.9.101: Demo-Hinweis (einmal, unter dem Kopf). */
.tp-demo{background:#fff6e0;border-bottom:1px solid #ecd49a;color:#4a3b10}
.tp-demo__text{max-width:72rem;margin:0 auto;padding:.7rem 1.1rem;font-size:.92rem;line-height:1.5}
.tp-demo__kopf{font-weight:700}

/* Verweis aus dem Ueberblick in das Register. */
.tp-panel__more{margin:.7rem 0 0;font-size:.9rem}
.tp-panel__more a{color:var(--tp-green-ink);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* Flaches Medienband auf Erzeugerprofilen: dieselbe Stelle, dieselbe
   Aussage, aber keine halbe Bildschirmhoehe fuer eine leere Flaeche. */
.tp-band--flach{min-height:9.5rem;margin-bottom:1.4rem}
.tp-band--flach .tp-band__panel{padding:1.15rem 1.1rem}
.tp-band--flach .tp-band__ico{width:2.2rem;height:2.2rem;margin-bottom:.45rem}

.tp-variants{margin:.4rem 0 0;display:flex;flex-direction:column;gap:.18rem}
.tp-variant{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--tp-muted)}
.tp-variant__price{font-variant-numeric:tabular-nums}

/* Progressive Offenlegung. Alle Gerichte stehen bereits im Dokument;
   aufgeklappt wird ohne zweiten Request. */
.tp-more{margin:.9rem 0 0}
.tp-more__btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.6rem 1.1rem;border:1px solid var(--tp-line);border-radius:999px;
  background:#fff;font-size:.9rem;font-weight:600;color:var(--tp-green);list-style:none}
.tp-more__btn::-webkit-details-marker{display:none}
.tp-more__btn::after{content:"⌄";font-size:1rem;line-height:1}
.tp-more[open] .tp-more__btn::after{content:"⌃"}
.tp-more__off{display:none}
.tp-more[open] .tp-more__on{display:none}
.tp-more[open] .tp-more__off{display:inline}
.tp-more__btn:hover{background:var(--tp-soft)}
.tp-dishes--more{margin-top:0}
.tp-dishes--more .tp-dish:first-child{border-top:1px solid var(--tp-hair);padding-top:.95rem}

/* Kontextspalte der Speisekarte */
.tp-ctx{border:1px solid var(--tp-line);border-radius:var(--tp-r);background:var(--tp-cream);
  padding:1.2rem 1.3rem}
.tp-ctx__title{font-size:1rem;font-weight:600;margin:0 0 .4rem}
.tp-ctx__text{font-size:.89rem;line-height:1.6;color:var(--tp-muted)}
.tp-ctx__meta{font-size:.83rem;color:var(--tp-muted);margin:.5rem 0 0}
.tp-ctx__link{font-size:.89rem;display:inline-block;margin:.55rem 0 0}

.tp-help{border:1px solid #dbe6dc;border-radius:var(--tp-r);background:var(--tp-green-soft);
  padding:1.2rem 1.3rem}
.tp-help__head{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 .5rem}
.tp-help__ava{display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;flex:0 0 auto;border-radius:var(--tp-r-s);
  background:var(--tp-green);color:#fff}
.tp-help__ava .tp-ico{width:1.15rem;height:1.15rem}
.tp-help__title{font-size:1rem;font-weight:600;margin:0}
.tp-help__text{font-size:.88rem;line-height:1.6;color:var(--tp-ink-soft)}

/* =========================== INFORMATIONEN ========================= */
.tp-info{margin:0}
.tp-blk{margin:0 0 1.7rem}
.tp-blk__title{font-size:1.02rem;font-weight:700;margin:0 0 .7rem}
.tp-blk__body{font-size:.95rem;line-height:1.65;color:var(--tp-ink-soft)}
.tp-blk__note{font-size:.86rem;color:var(--tp-muted);margin:.5rem 0 0}
.tp-blk__map{margin:.9rem 0 0}

.tp-rows{display:flex;flex-direction:column;gap:.7rem}
.tp-row{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.tp-row__ico{display:flex;color:var(--tp-green);padding-top:.14rem}
.tp-row__line{display:block}
.tp-row__val{color:var(--tp-ink-soft)}
.tp-row--no .tp-row__ico{color:var(--tp-muted)}
.tp-row--no .tp-row__val{color:var(--tp-muted)}

/* Kartenkarte: Schaltflaeche zum erfassten Kartenlink, KEIN Abbild.
   Ein gerendertes Kartenbild braeuchte einen fremden Kachelserver. */
.tp-mapcard{border:1px solid var(--tp-line);border-radius:var(--tp-r);overflow:hidden;background:#fff}
/* 0.9.19 — DIE EINGEBETTETE KARTE BEKOMMT ENDLICH EINEN KASTEN.
   Bis 0.9.18 gab es zu .tp-mapcard__map keine einzige Regel. Der
   iframe stand deshalb auf der Voreinstellung des Browsers (300x150,
   display:inline) — bei Beny Tirrenia 1985 war live ein 304 px
   breiter, weisser Streifen zu sehen, aus dem die Kartennadel unten
   herausragte. Das galt schon fuer die fruehere Google-Einbettung;
   es ist bei der Abnahme von 0.9.18 aufgefallen, weil Beny der erste
   veroeffentlichte Betrieb mit oeffentlicher Koordinate ist.
   min-height traegt Browser ohne aspect-ratio. */
.tp-mapcard__frame{position:relative;display:block;aspect-ratio:16/10;
  min-height:13rem;background:var(--tp-soft)}
.tp-mapcard__map{display:block;width:100%;height:100%;border:0}
/* Die Kachel steht fuer den Kartenverweis, wenn keine oeffentliche
   Koordinate vorliegt. Sie bildet keinen Standort ab. Alles wird im
   Fluss zentriert; ohne eigenen Positionierungskontext wanderten die
   frueher absolut gesetzten Teile an den naechsten positionierten
   Vorfahren und landeten im Medienband. */
/* 0.9.18: Namensnennung unter der OpenStreetMap-Karte. Ruhig, aber
   lesbar — sie ist eine Lizenzpflicht und kein Kleingedrucktes. */
.tp-mapcard__credit{font-size:.76rem;color:var(--tp-muted);
  padding:.45rem .9rem;border-top:1px solid var(--tp-hair);background:var(--tp-cream)}
.tp-mapcard__credit a{color:var(--tp-muted);text-decoration:underline}
/* 0.9.35 (0069): Hinweis bei ungefaehrer Lage */
.tp-mapcard__hint{font-size:.82rem;color:var(--tp-muted);margin:.5rem 0 0}

/* 0.9.19: Liegt eine Karte vor, ist der Verweis eine Zeile unter ihr —
   keine zweite, dekorative Kachel. Die grosse Kachel mit dem
   angedeuteten Raster bleibt dem Fall OHNE Karte vorbehalten; unter
   einer echten Karte las sie sich wie eine zweite, leere Karte. */
.tp-mapcard__open{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1rem;border-top:1px solid var(--tp-hair);
  font-size:.94rem;font-weight:600;color:var(--tp-green)}
.tp-mapcard__open:hover{background:var(--tp-soft);text-decoration:none}
.tp-mapcard__open .tp-ico{width:1.15rem;height:1.15rem}

.tp-mapcard__tile{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;width:100%;min-height:9.5rem;padding:1.5rem 1rem;
  text-align:center;color:var(--tp-ink);
  background:
    repeating-linear-gradient(0deg,rgba(21,94,75,.05) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(21,94,75,.05) 0 1px,transparent 1px 34px),
    linear-gradient(150deg,#eaf0e6 0%,#e2ebe4 100%)}
.tp-mapcard__tile:hover{text-decoration:none}
.tp-mapcard__pin{display:inline-flex;color:var(--tp-green)}
.tp-mapcard__pin .tp-ico{width:1.9rem;height:1.9rem}
.tp-mapcard__text{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:0}
.tp-mapcard__place{font-size:.98rem;font-weight:600;color:var(--tp-ink)}
.tp-mapcard__cta{display:inline-flex;align-items:center;gap:.4rem;
  padding:.44rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--tp-line);
  font-size:.84rem;font-weight:600;color:var(--tp-green)}

/* ============================== KARTEN ============================= */
.tp-card{border:1px solid var(--tp-line);border-radius:var(--tp-r);background:#fff;overflow:hidden}
.tp-card__cover{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--tp-soft)}
.tp-card__title{font-size:1rem;font-weight:600;margin:0 0 .15rem}
.tp-card__locality,.tp-card__type,.tp-card__meta{font-size:.85rem;color:var(--tp-muted)}
.tp-card__desc{font-size:.88rem;color:var(--tp-ink-soft)}
.tp-card__price{font-variant-numeric:tabular-nums}
.tp-card__link{display:block;padding:.9rem 1rem}

/* Listenansicht (eigene Seite, hier nur Grundwerte) */
.tp-place-list__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.2rem}
.tp-place-list__stale-note,.tp-stale{font-size:.83rem;color:var(--tp-muted)}

/* ============================ MOBILE ==============================
   Eigenstaendig gestaltet, nicht nur schmaler: kompakter Hero,
   waagerechte Register, Seitenspalte unter dem Inhalt. */
@media (max-width:960px){
  .tp-cols{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .tp-menu__layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "main" "side";grid-template-rows:auto auto auto;gap:1.4rem}
  .tp-menu__main{max-width:none}
  /* Auf schmalen Geraeten wuerde die stehende Bereichsliste den ersten
     Gerichten den ganzen Bildschirm nehmen. Dieselben Eintraege stehen
     hier als liegender Streifen — gleiche Reihenfolge, gleiche Zaehlung,
     nur platzsparend. */
  .tp-cats{background:none;border:0;border-bottom:1px solid var(--tp-line);
    border-radius:0;padding:0}
  .tp-cats__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  .tp-cats__list{flex-direction:row;gap:.5rem;overflow-x:auto;padding:0 0 .85rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tp-cats__list::-webkit-scrollbar{display:none}
  .tp-cats__item{flex:0 0 auto}
  .tp-cats__link{white-space:nowrap;border-radius:999px;border-color:var(--tp-line);
    padding:.42rem .85rem}
  .tp-cats__name{overflow:visible;text-overflow:clip}
  /* Der Kartenumschalter bleibt auch schmal eine Reiterzeile; bei drei
     Karten passt sie auf 390 px, bei mehr laeuft sie liegend weiter,
     ohne die Seite breiter zu machen. */
  .tp-menus__list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .tp-menus__list::-webkit-scrollbar{display:none}
  .tp-menus__item{flex:0 0 auto}
  .tp-menus__btn{white-space:nowrap;padding:.5rem .7rem}
  .tp-hl{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
}
@media (max-width:640px){
  .tp-hero{border-radius:10px 10px 0 0;margin-bottom:0}
  .tp-hero__inner{padding:.9rem 1.05rem 1.25rem;min-height:0}
  .tp-band{min-height:13.5rem;border-radius:0 0 10px 10px;margin-bottom:1.4rem}
  .tp-band::after{background:radial-gradient(96% 82% at 50% 50%,rgba(250,248,243,.97) 0%,rgba(250,248,243,.86) 46%,rgba(250,248,243,.3) 74%,rgba(250,248,243,0) 92%)}
  .tp-band__panel{padding:1.7rem 1.1rem}
  .tp-band__ico{width:2.85rem;height:2.85rem;margin-bottom:.7rem}
  .tp-hero--single,.tp-hero--small,.tp-hero--full{border-radius:10px;margin-bottom:1.4rem}
  .tp-crumbs{margin-bottom:.9rem;font-size:.78rem}
  /* Auf schmalen Geraeten nur die letzten beiden Stufen: der volle
     Pfad braeche sonst ueber drei Zeilen. */
  .tp-crumbs__item{display:none}
  .tp-crumbs__item:nth-last-child(-n+2){display:flex}
  .tp-crumbs__item:nth-last-child(2)::before{content:none}
  .tp-hero__name{font-size:2.05rem;letter-spacing:-.018em}
  .tp-hero__sub{font-size:1rem;margin-bottom:.7rem}
  .tp-meta{font-size:.88rem;gap:.3rem .85rem;margin-bottom:.75rem}
  .tp-chip{font-size:.76rem;padding:.26rem .6rem}
  .tp-hero--single .tp-hero__inner,.tp-hero--small .tp-hero__inner,
  .tp-hero--full .tp-hero__inner{min-height:14rem}

  .tp-bar{margin-bottom:1.3rem}
  .tp-tabs__link{font-size:.92rem;margin-right:.75rem;padding:.7rem .1rem}
  .tp-acts{display:none}

  .tp-h2{font-size:1.55rem}
  .tp-overview__text,.tp-prose{font-size:.98rem;line-height:1.68}
  .tp-hl{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem;padding-top:1.2rem;margin-top:1.2rem}
  .tp-hl__ico .tp-ico{width:1.35rem;height:1.35rem}
  .tp-hl__label{font-size:.9rem}
  .tp-hl__note{font-size:.8rem}

  .tp-glance,.tp-owner,.tp-ctx,.tp-help,.tp-panel{padding:1.1rem 1.15rem}
  .tp-near{flex-direction:column;align-items:flex-start;gap:.6rem}

  .tp-sec__name{font-size:1.25rem}
  .tp-dish__line{gap:.8rem}
  .tp-dish__name{font-size:.96rem}
  .tp-dish__price{font-size:.96rem}
  .tp-dish__desc{font-size:.86rem}
  .tp-pairing{padding:.5rem .6rem .55rem}
  .tp-pairing__product{font-size:.9rem}
  .tp-pairing__from{font-size:.84rem}
  .tp-pairing__note{font-size:.75rem}
  /* Eine Spalte: Produktname und Erzeuger muessen ohne seitliches
     Rollen lesbar bleiben. */
  .tp-products__list{grid-template-columns:1fr;gap:.75rem}
  .tp-product{padding:.85rem .95rem .9rem;border-radius:10px}
  .tp-product--bild{padding-top:0}
  .tp-product__fig{margin:0 -.95rem .7rem}
  .tp-demo__text{font-size:.88rem;padding:.65rem 1rem}
  .tp-product__name{font-size:1rem}
  .tp-product__desc{font-size:.86rem}
  .tp-products__lead{font-size:.9rem}
  .tp-band--flach{min-height:8rem}
  .tp-more__btn{width:100%;justify-content:center}
}

/* Auf Mobil steht die Seitenspalte unter dem Inhalt. display:contents
   loest den Kasten auf, damit die Karten in der Reihenfolge des
   Rasters landen und nicht als Block am Ende haengen. */
@media (max-width:960px){
  .tp-side{display:contents}
  .tp-glance{order:1}
  .tp-owner{order:2}
  .tp-side__note--card{order:3}
}

/* 0.9.48 — Gerichte aus dem Angebot (nur mit Quelle) */
.tp-gerichte{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tp-gericht{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .8rem;
  padding:.55rem 0;border-top:1px solid var(--tp-line)}
.tp-gericht:first-child{border-top:0;padding-top:0}
.tp-gericht__name{font-weight:600;overflow-wrap:anywhere}
.tp-gericht__kat{font-size:.82rem;color:var(--tp-muted);text-align:right}
.tp-gericht__quelle{grid-column:1 / -1;font-size:.85rem;color:var(--tp-muted)}
.tp-gericht__quellenlink{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 0.9.52 (F2) — Restaurant-Entwurfsvorschau */
.tp-entwurf-leiste{margin:0 0 1.2rem;padding:.8rem 1rem;border:2px dashed #b08a2e;border-radius:6px;background:#fbf6e8;color:#3b3a2a;font-size:.95rem}
.tp-entwurf-leiste p{margin:.2rem 0}
.tp-panel--gerichte-entwurf{border:2px dashed #b08a2e;background:#fbf6e8}
.tp-entwurf-marke{display:inline-block;padding:.2rem .55rem;border-radius:999px;background:#7a5a12;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.tp-gerichte--entwurf .tp-gericht__quelle{font-style:italic}