/* Restaurant Löwen — Website, Produktionsstand. Schriften: Plus Jakarta
   Sans (Überschriften) und Mulish (Fliesstext). Farbkonzept «Kohle und
   Glut»: Content-Flächen fast Weiss, Kopf- und Fusszeile als kräftiges
   Dunkelband, eine einzige gesättigte Glutfarbe nur dort, wo sie etwas
   bedeutet — Reservieren-Button, Preise, aktive Auswahl. Kein Grün, kein
   Braun. Logo liegt im Kopfband als eigene helle Freistellung vor
   (img/logo-entwurf-weiss.png). Einheitliche Typ- und Abstandsskala
   (--fs-*, --sp-*), eigenes --lh-ui für kompakte UI-Elemente statt
   geerbter Fliesstext-Zeilenhöhe, feine Auszeichnung der Hero-Headline. */

/* ---------------------------------------------------------------------------
   Schriften, selbst gehostet. Vorher lagen Mulish und Plus Jakarta Sans bei
   Google Fonts. Das hiess: Bei jedem Seitenaufruf schickte der Browser die
   IP-Adresse des Gastes an fonts.googleapis.com und fonts.gstatic.com, also
   an Google LLC in den USA -- ohne dass jemand danach gefragt hatte und ohne
   dass es in einer Datenschutzerklaerung stand. Jetzt liegen beide Schriften
   auf dem eigenen Server. Es gibt keinen Aufruf mehr nach aussen.

   Beides sind Variable Fonts unter der SIL Open Font License 1.1 (Lizenztexte
   in fonts/). Eine Datei deckt alle Strichstaerken ab, darum reichen vier
   Dateien statt sechzehn. unicode-range sorgt dafuer, dass der latin-ext-Satz
   nur geladen wird, wenn ein Zeichen daraus wirklich vorkommt.
   --------------------------------------------------------------------------- */

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

:root{
  /* Struktur/Text */
  --ink:#201f1c;
  --ink-soft:#6b675f;
  --line:#e6e3dc;
  /* Papier statt Weiss. Die Fotowelt ist Holz, Leinen und Abendlicht und
     lag bisher auf #fefefd, also praktisch reinem Weiss. Dasselbe Problem
     wie beim Dunkelband, nur andersherum. Nebeneffekt: Die Karten bleiben
     reines Weiss und heben sich jetzt eine Spur von der Flaeche ab, ohne
     dass es dafuer einen Schlagschatten braucht.
     Kontraste geprueft: Fliesstext 15.41:1, Nebentext 5.26:1, Glut 4.85:1. */
  --surface:#faf7f1;
  --surface-card:#ffffff;

  /* Dunkelband: Kopf- und Fusszeile. Warmes Anthrazit statt neutralem
     Schwarz (vorher #121110, Saettigung 6 Prozent). Die Fotowelt ist
     durchgehend warm -- Holz, Abendlicht, Messing --, und ein neutrales
     Schwarz daneben liest sich kuehl. #181310 hat Farbton 22 Grad und
     20 Prozent Saettigung und liegt damit fast genau auf dem Ton, den der
     Verlauf ueber den Hero-Fotos schon hat (rgba(20,16,13)). Kopfband und
     Hero gehoeren damit sichtbar zusammen. Kontraste geprueft: heller Text
     16.06:1, gedaempfter Text 8.64:1, Reservieren-Knopf gegen das Band
     3.55:1. */
  --dark:#181310;
  --dark-text:#f2efe9;
  --dark-text-soft:rgba(242,239,233,.72);
  --dark-line:rgba(242,239,233,.22);

  /* Glutfarbe: der einzige Akzent, nur für Buttons, Preise, aktive Auswahl */
  --accent:#c53d12;
  --accent-text:#fff5ef;
  --accent-line:rgba(197,61,18,.35);

  /* Kommentar-Farbe: alles, was NICHT zur künftigen Website gehört, sondern
     nur eine Bemerkung/Begründung für die Projektarbeit ist (Verweise auf
     Ebene 1/2/3, offene Punkte, Annahmen). Bewusst eine eigene Farbe,
     damit sofort klar ist: das gehört nicht zum Wireframe selbst. */
  --note:#9a5b00;
  --note-bg:#fff3dc;
  --note-border:#e3b768;
  /* helle Note-Variante für Text auf dem dunklen Kopfband */
  --note-on-dark:#e3b768;


  /* Aufgeraeumt: sieben Stufen, jede mit einer klaren Aufgabe. Vorher liefen
     ueber die Seiten 11 verschiedene Groessen, darunter 11, 12, 13, 14 und 15
     px nebeneinander -- Unterschiede, die niemand als Bedeutung liest,
     sondern nur als Unruhe. */
  --fs-label:12px;   /* Versalien-Label: Eyebrow, Fusszeilen-Titel, Badge */
  --fs-sm:14px;      /* Nebentext: Kartentext, Formularbeschriftung, Hinweise */
  --fs-base:16px;    /* Fliesstext und alles Bedienbare */
  --fs-md:18px;      /* Blocktitel, Lead-Absatz, Preis */
  --fs-lg:24px;      /* Abschnittstitel */
  --fs-h1:28px;      /* Seitentitel der Unterseiten */
  --fs-xl:clamp(30px, 19px + 1.4vw, 40px);  /* Hero der Startseite */
  /* Drei Zeilenhoehen, mehr braucht es nicht. Gerendert liefen vorher 16
     verschiedene Werte: 1.15, 1.25, 1.3, 1.4, 1.5, 1.55, 1.6 und 1.7 mal
     sieben Schriftgroessen. Kleiner Text bekommt jetzt bewusst dieselbe
     Zeilenhoehe wie Fliesstext statt eine engere -- 14 px auf 1.3 war zu
     dicht fuer mehrzeiligen Text. */
  --lh-heading:1.2;   /* Ueberschriften */
  --lh-ui:1.35;       /* einzeilige Bedienelemente und Label */
  --lh-body:1.6;      /* alles, was gelesen wird */

  /* Satzspiegel: ein einziges Mass fuer alles, was als Fliesstext gelesen
     wird. Ohne Begrenzung lief der Text im Rollstuhl-Abschnitt ueber die
     vollen 1100 px, also rund 130 Zeichen pro Zeile. Lesbar sind 45 bis 75. */
  --measure:34em;

  /* Abstandsskala für die grossen, wiederkehrenden Weissräume (Kopf-/Hero-/
     Section-/Fusszeilen-Innenabstand, Karten, Formularblock, Grid-Lücken).
     Kleine, bewusst individuelle Abstände (Badge, Chip, Feldabstand)
     bleiben eigene Werte statt in die Skala gezwungen zu werden. */
  /* Ein Raster von 4 px. Gerendert liefen vorher 28 verschiedene Abstaende,
     darunter 5, 6, 7, 9, 10, 11, 14, 18, 20, 22, 26, 28, 36 und 56 px --
     Werte, die niemand als Absicht liest. */
  --sp-3xs:4px;
  --sp-2xs:8px;
  --sp-xs:12px;
  --sp-sm:16px;
  --sp-md:24px;
  --sp-ml:32px;
  --sp-lg:48px;
  --sp-xl:64px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Mulish', Arial, Helvetica, sans-serif;
  font-size:var(--fs-base);
  color:var(--ink);
  background:var(--surface);
  line-height:var(--lh-body);
}
a{color:var(--ink);}
h1,h2,h3,h4{color:var(--ink);font-weight:700;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;
  letter-spacing:-.005em;line-height:var(--lh-heading);margin:0 0 var(--sp-sm);
  /* Plus Jakarta Sans hat ein sehr schmales Leerzeichen (0.161 em gegen 0.250 em
     bei Mulish). Ohne Korrektur kleben die Woerter: "Heute auf demTeller". */
  word-spacing:.07em;}
p{margin:0 0 var(--sp-sm);color:var(--ink);}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}

.bg-photo-area::before{display:none;}

/* Sprunglink. Liegt ausserhalb des Bildes, bis er den Fokus bekommt. Ohne ihn
   tabbt sich jemand auf jeder Unterseite zuerst durch Logo, fuenf Menuepunkte
   und den Reservieren-Knopf, bevor der Inhalt kommt (WCAG 2.4.1). */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface-card);color:var(--ink);text-decoration:none;
  padding:var(--sp-xs) var(--sp-sm);border:2px solid var(--accent);
  font-weight:700;line-height:var(--lh-ui);
}
.skip-link:focus{left:var(--sp-sm);top:var(--sp-sm);}

/* Seitenliste auf der Fehlerseite: Die Beschriftung ist hier ein Seitenname
   und soll auf einer Zeile bleiben, sonst franst die Spalte aus. */
.pair-list.is-seitenliste .lbl{white-space:nowrap;padding-right:var(--sp-sm);}

/* Header / Navigation — Dunkelband */
.site-header{background:var(--dark);padding:var(--sp-sm) 0;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.logo{font-weight:800;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;color:var(--dark-text);text-decoration:none;font-size:21px;letter-spacing:0;line-height:var(--lh-ui);}
.logo-img{display:block;height:60px;width:auto;}
.main-nav{display:flex;gap:var(--sp-md);flex-wrap:wrap;}
.main-nav a{color:var(--dark-text-soft);text-decoration:none;font-size:var(--fs-base);line-height:var(--lh-ui);padding:var(--sp-3xs) 2px;border-bottom:2px solid transparent;}
.main-nav a.active{border-bottom-color:var(--accent);font-weight:bold;color:var(--dark-text);}
.main-nav a:hover{border-bottom-color:var(--dark-line);color:var(--dark-text);}
.nav-cta{white-space:nowrap;}

/* Hamburger-Menü: nur auf schmalen Breiten sichtbar (siehe Media Query unten) */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background:transparent;border:1px solid var(--dark-line);border-radius:2px;
  width:44px;height:44px;cursor:pointer;padding:0;
}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--dark-text);}

/* Buttons */
.btn{display:inline-block;border:2px solid var(--accent);color:var(--accent);background:var(--surface-card);
  padding:12px 24px;text-decoration:none;font-size:var(--fs-base);line-height:var(--lh-ui);border-radius:2px;cursor:pointer;}
.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);}
.btn-outline{background:transparent;color:var(--accent);}
.btn-small{padding:var(--sp-2xs) var(--sp-sm);font-size:var(--fs-sm);line-height:var(--lh-ui);}
.btn-row{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-top:var(--sp-md);}

/* auf dem Dunkelband (z. B. .nav-cta) braucht der Outline-Button helle statt
   weisse Kanten, sonst wirkt er wie ein Fremdkörper im Farbband */
.site-header .btn-outline{border-color:var(--dark-line);color:var(--dark-text);}

/* Hero */
.hero{padding:var(--sp-xl) 0;border-bottom:1px solid var(--line);}
.hero .eyebrow{color:var(--ink-soft);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2xs);line-height:var(--lh-ui);}
.hero h1{font-size:var(--fs-xl);font-weight:700;max-width:820px;line-height:var(--lh-heading);
  letter-spacing:-.01em;margin-bottom:var(--sp-sm);
  /* verteilt den Satz auf gleich lange Zeilen, statt ein Restwort
     ("ist.") allein auf die letzte Zeile zu schieben */
  text-wrap:balance;}
.hero .sub{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink);max-width:640px;}

/* Kompakter Hero für alle Unterseiten ausser der Startseite: gleiche
   Auszeichnung (Zeilenhöhe, Laufweite, Abstand) wie der grosse Hero, nur
   kleinere Grösse — ersetzt die bisher auf jeder Unterseite wiederholten
   Inline-Styles (style="font-size:28px", style="padding:44px 0 36px"). */
/* Mindesthoehe fuer die Hero-Baender der Unterseiten. Ohne sie waren sie
   203 bis 232 px hoch, also bei 1280 px Breite fast 6:1 -- in dem Format kann
   ein Foto nichts erzaehlen. Und die Hoehe schwankte je nach Laenge der
   Unterzeile, was zufaellig statt gesetzt wirkte. Mit fester Mindesthoehe und
   senkrecht zentriertem Inhalt sitzen alle Unterseiten gleich. */
.hero.is-compact{
  padding:var(--sp-lg) 0;
  min-height:340px;
  display:flex;flex-direction:column;justify-content:center;
}
/* Ein auto-Aussenabstand in der Querachse schaltet align-items:stretch ab.
   Ohne diese Zeile schrumpft der Wrap auf seine Inhaltsbreite und der
   Hero-Text steht nicht mehr im Seitenraster. */
.hero.is-compact > .wrap{width:100%;}
@media (max-width:820px){.hero.is-compact{min-height:280px;}}
@media (max-width:600px){.hero.is-compact{min-height:240px;padding:var(--sp-md) 0;}}
.hero.is-compact h1{font-size:var(--fs-h1);}

/* Abschnitt direkt unter einem Hero ohne Foto: keine doppelte Trennlinie.
   Der Abstand war 8 px und damit der engste der ganzen Seite, obwohl hier
   ein Abschnittswechsel stattfindet. */
.section.is-flush{border-top:none;padding-top:var(--sp-md);}

/* Abschnitt direkt unter einem randabfallenden Foto-Hero. Eine harte
   Bildkante trennt staerker als jede Haarlinie und braucht darum mehr Luft,
   nicht weniger. Vorher lief hier .is-flush mit 8 px, ein Muster von den
   Unterseiten, wo der Hero selbst unten Abstand haelt. Alle uebrigen
   Abstaende in diesem Abschnitt liegen bei 48 px. */
.section.is-after-hero{border-top:none;padding-top:var(--sp-xl);}
@media (max-width:600px){.section.is-after-hero{padding-top:var(--sp-lg);}}
.hero .sub.note{color:var(--note);}

/* Hintergrundbild-Flächen: helles Streifenmuster, bewusst anders als das Kreuz
   der Inhaltsbilder (.ph-img), damit beide Platzhalter-Arten auf einen Blick
   unterscheidbar sind. Für Hero-Bänder, Balken und andere Bereiche mit
   künftigem Hintergrundfoto. */
.bg-photo-area{
  position:relative;
  background-color:#ececec;
  background-image:repeating-linear-gradient(135deg, #dcdcdc 0, #dcdcdc 2px, transparent 2px, transparent 16px);
}
.bg-photo-area::before{
  content:"Hintergrundbild";
  position:absolute;top:14px;right:16px;z-index:2;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--note);background:#fff;border:1px solid var(--note-border);
  padding:3px 9px;
}
.bg-photo-area > .wrap{position:relative;z-index:1;}

/* Echtes Hintergrundfoto: Hinweis-Label ausblenden, dunkler Verlauf fuer
   lesbaren hellen Text darueber (die Fotos selbst sind meist hell). */
/* Kein helles Grau als Vorschau, bevor das Foto geladen ist: Der dunkle
   Ton entspricht dem Verlauf darueber, der Aufbau flackert nicht. */
.bg-photo-area.has-photo{background-image:none;background-color:var(--dark);}
.bg-photo-area.has-photo::before{display:none;}
.bg-photo-area.has-photo::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(20,16,13,.62) 0%, rgba(20,16,13,.74) 100%);
}
/* Auf dem Foto nur zwei Textfarben: Weiss fuer die Ueberschrift, ein
   gedaempftes Weiss fuer alles andere. Vorher liefen .85, .9 und .95
   nebeneinander -- Unterschiede, die niemand sieht. */
.bg-photo-area.has-photo .eyebrow{color:rgba(255,255,255,.88);}
.bg-photo-area.has-photo h1{color:#fff;}
.bg-photo-area.has-photo .sub{color:rgba(255,255,255,.88);}
.bg-photo-area.has-photo .sub .note{color:rgba(255,255,255,.7);}
/* Outline-Button auf Foto: verlaesst sich nicht mehr aufs Bild fuer Kontrast,
   sonst je nach Bildstelle kaum lesbar. */
.bg-photo-area.has-photo .btn-outline{
  border-color:#fff;color:#fff;background:rgba(20,16,13,.28);
}

/* Sections */
.section{padding:var(--sp-lg) 0;border-top:1px solid var(--line);}
.section-head{margin-bottom:var(--sp-md);}
.section-head h2{font-size:var(--fs-lg);}
.section-head .desc{color:var(--note);font-size:var(--fs-sm);max-width:640px;font-style:italic;}
.grid{display:grid;gap:var(--sp-md);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);gap:var(--sp-md) var(--sp-lg);}
/* Text neben Bild: vertikal zentriert statt oben klebend. Vorher standen in der
   Textspalte 209 von 380 px leer, weil das Bild die Hoehe bestimmt. Gilt nur
   fuer diese Kombination, Karten nebeneinander bleiben auf gleicher Hoehe. */
.grid-2.is-media{align-items:center;}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:820px){
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .menu-toggle{display:flex;order:2;}
  .nav-cta{order:3;}
  .main-nav{
    display:none;order:4;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--dark-line);margin-top:14px;
  }
  .main-nav.is-open{display:flex;}
  .main-nav a{padding:12px 4px;border-bottom:1px solid var(--dark-line);}
}
@media (max-width:600px){
  .hero{padding:var(--sp-ml) 0;}
  .hero h1{font-size:25px;}
  .hero .sub{font-size:var(--fs-base);}
  .btn-row{flex-direction:column;}
  .btn-row .btn{width:100%;text-align:center;}
  .field-row{flex-direction:column;gap:0;}
}

/* Card */
/* Karten als Spalte, damit der Preis in jeder Karte unten auf derselben Linie
   sitzt. Vorher hing er je nach Laenge des Gerichtnamens 20 bis 40 px hoeher
   oder tiefer, was genau in der Reihe stoert, in der Preise verglichen werden. */
.card{border:1px solid var(--line);border-radius:2px;padding:var(--sp-md);background:var(--surface-card);
  display:flex;flex-direction:column;overflow:hidden;}
.card > *:last-child{margin-bottom:0;}
.card .price{margin-top:auto;padding-top:var(--sp-2xs);}

/* Rahmenlose Variante: Der 1-px-Rahmen bleibt nur dort, wo ein wirklich
   abgegrenztes Objekt steht (Gericht mit Foto, Tagesmenue, Formularblock).
   Fakten, Oeffnungszeiten, Kontaktdaten, Portraets und Hinweise verlieren ihn,
   sonst ist alles gleich ausgezeichnet und damit nichts. */
.card.is-plain{border:none;padding:0;background:none;}
/* In einer Flex-Spalte streckt sich jedes Kind ueber die volle Breite. Ein
   Knopf soll aber so breit sein wie seine Beschriftung. */
.card .btn,.card .open-now{align-self:flex-start;}
/* Zwei Karten untereinander in derselben Spalte. Muss auf den Stapel
   beschraenkt sein: als blosses .card + .card griff die Regel auch im Raster
   und schob dort jede Karte ausser der ersten um 24 px nach unten. */
.stack > .card + .card{margin-top:var(--sp-md);}
.ph-img.is-wide43{aspect-ratio:4/3;min-height:0;margin-top:var(--sp-xs);}
.card.is-plain .price{padding-top:var(--sp-2xs);}
.card h2,.card h3{font-size:var(--fs-md);margin-bottom:var(--sp-2xs);}
.card .price{color:var(--accent);font-weight:800;font-size:var(--fs-md);font-variant-numeric:tabular-nums;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;}
/* Erste Karte im «Heute auf dem Teller»-Dreier: das Tagesmenü ist der
   wichtigste, meistgesuchte Inhalt der Startseite (siehe Sitemap-Notiz),
   verdient darum sichtbar mehr Gewicht als «Morgen» und «Die ganze Woche». */
/* Die Heute-Karte traegt die Glut nur noch als Balken oben, wie ein
   Lesezeichen. Ein Rahmen rundum umschliesst, ein Balken oben zeigt hin. */
.card.is-today{border-top:4px solid var(--accent);padding-top:calc(var(--sp-md) - 3px);}
/* Kleiner Text braucht mehr Durchschuss, nicht weniger. */
.card .meta{color:var(--ink-soft);font-size:var(--fs-sm);line-height:var(--lh-body);}
.card .meta.note{color:var(--note);}
/* Die vegetarische Alternative steht jetzt als "Vegetarisch: Gericht" in
   einer Zeile, gleich wie auf der Startseite. Die frueher eigenstaendige
   Versal-Zeile darueber wurde als Auszeichnung des Gerichts DARUEBER
   gelesen -- "Hackbraten, vegetarisch" statt "Hackbraten, dazu vegetarisch
   die Gemueselasagne". Der Doppelpunkt macht die Zuordnung eindeutig. */
.meta b{color:var(--ink);font-weight:700;}

/* Bild-Platzhalter (klassisches Wireframe-Kreuz) — bewusst neutral (ink),
   kein Akzent: das Foto kommt später, nicht die Glutfarbe. */
.ph-img{
  position:relative;border:1px dashed var(--ink);min-height:170px;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-size:12px;text-align:center;background:var(--surface-card);overflow:hidden;border-radius:2px;
}
.ph-img::before,.ph-img::after{content:"";position:absolute;inset:0;}
.ph-img::before{background:linear-gradient(to top right, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px));}
.ph-img::after{background:linear-gradient(to top left, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px));}
.ph-img span{position:relative;background:var(--surface-card);padding:3px 8px;border:1px solid var(--line);z-index:1;}
.ph-img.tall{min-height:260px;}
.ph-img.wide{min-height:380px;}

/* Echtes Inhaltsbild: Platzhalter-Kreuz und Beschriftung ausblenden, Bild
   deckt die Flaeche formatfuellend ab. */
.ph-img.has-photo{border:none;padding:0;background:none;}
.ph-img.has-photo::before,.ph-img.has-photo::after{display:none;}
.ph-img.has-photo span{display:none;}
.ph-img.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Foto in einer Karte: randabschneidend bis an den Kartenrand, nicht mit
   dem Karten-Padding eingerueckt (das Padding gilt nur fuer den Text
   darunter). */
.card > .ph-img.has-photo:first-child{
  margin:calc(var(--sp-md) * -1) calc(var(--sp-md) * -1) var(--sp-md) calc(var(--sp-md) * -1);
  min-height:190px;
}

/* Chips / Filter — Grundzustand neutral, aktive Auswahl in der Glutfarbe:
   die Auswahl ist etwas, das zählt. */
/* Chips sind der eigentliche Auswahlmechanismus der Reservation. Vorher 31 px
   hoch mit 10 px Abstand, also unter der Mindestgroesse fuer Tippflaechen. */
.chip{border:1px solid var(--ink-soft);color:var(--ink);padding:0 var(--sp-sm);border-radius:999px;
  font-size:var(--fs-base);line-height:var(--lh-ui);background:var(--surface-card);cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;
  font-family:inherit;-webkit-appearance:none;appearance:none;}
.chip-row{display:flex;gap:var(--sp-xs);flex-wrap:wrap;margin-bottom:var(--sp-md);}
.chip.is-active{background:var(--accent);color:var(--accent-text);border-color:var(--accent);}
.chip.is-disabled{color:var(--ink-soft);border-color:var(--line);text-decoration:line-through;cursor:default;}

/* Status-Anzeige «heute geöffnet» — als gefüllte Glutfarbe, wie der
   Status-Chip auf der Farbkonzept-Vergleichsseite. */
.open-now{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);
  padding:var(--sp-2xs) var(--sp-sm);font-size:var(--fs-base);background:var(--accent);color:var(--accent-text);
  border-radius:999px;font-weight:700;margin-bottom:var(--sp-sm);
  /* In einer Flex-Karte wird inline-flex zu flex umgewandelt, die Pille
     liefe dann ueber die ganze Spaltenbreite. */
  align-self:flex-start;width:fit-content;
}
.slot-head{font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-ui);margin:var(--sp-md) 0 var(--sp-2xs);}

/* Formulare */
.form-block{border:1px solid var(--line);border-radius:2px;padding:var(--sp-md);background:var(--surface-card);}
.field{margin-bottom:var(--sp-sm);}
.field label{display:block;font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:var(--sp-3xs);line-height:var(--lh-ui);}
.field input,.field select{
  width:100%;border:1px solid var(--line);border-radius:2px;padding:var(--sp-xs);font-size:var(--fs-base);line-height:var(--lh-ui);
  font-family:inherit;color:var(--ink);background:var(--surface-card);
}
.field textarea{
  width:100%;border:1px solid var(--line);border-radius:2px;padding:var(--sp-xs);font-size:var(--fs-base);line-height:var(--lh-body);
  font-family:inherit;color:var(--ink);background:var(--surface-card);min-height:110px;
}
/* Sichtbarer Fokus. Vorher hat outline:none den Ring entfernt und nur die
   Rahmenfarbe gewechselt, was mit der Tastatur kaum erkennbar ist. */
.field input:focus,.field select:focus,.field textarea:focus,
.btn:focus-visible,.chip:focus-visible,.menu-toggle:focus-visible,
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}
.site-header a:focus-visible,.site-footer a:focus-visible{outline-color:var(--dark-text);}
.bg-photo-area.has-photo a:focus-visible{outline-color:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
/* Datumsfelder: Chromium setzt den Fokus in ein Segment im Shadow-DOM, der
   Ring auf dem Feld selbst greift dann nicht. Ueber den Feldcontainer sitzt
   er zuverlaessig. */
.field:focus-within input,.field:focus-within select,.field:focus-within textarea{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);
}
/* Buttons und Links behalten :focus-visible, damit ein Mausklick keinen Ring hinterlaesst. */
.field-row{display:flex;gap:var(--sp-sm);}
/* Gleich breite Felder in einer Reihe. Datums- und Zeitfelder bringen eine
   eigene Wunschbreite mit, mit flex:1 allein franst die Reihe aus. */
.field-row .field{flex:1 1 0;min-width:0;}

/* Listen mit Häkchen-Platzhaltern */
.tick-list{list-style:none;margin:0 0 var(--sp-sm);padding:0;}
.tick-list li{padding-left:var(--sp-md);position:relative;margin-bottom:var(--sp-2xs);font-size:var(--fs-base);}
/* Der Strich ist ein Aufzaehlungszeichen, kein Signal. Er stand in der
   Glutfarbe und war damit Dekoration. */
.tick-list li::before{content:"\2013";position:absolute;left:0;color:var(--ink-soft);}

/* Fusszeile — Dunkelband, bookendet den Kopf */
.site-footer{margin-top:var(--sp-md);padding:var(--sp-lg) 0 var(--sp-md);background:var(--dark);color:var(--dark-text);}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-ml);}
.footer-col h2,.footer-col h3{font-family:'Mulish',Arial,Helvetica,sans-serif;font-weight:700;font-size:var(--fs-label);line-height:var(--lh-ui);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-xs);color:var(--dark-text);}
.footer-col p{font-size:var(--fs-sm);margin:0 0 var(--sp-2xs);color:var(--dark-text-soft);}
.footer-col a{text-decoration:none;color:var(--dark-text);}
/* Telefon und E-Mail stehen durch <br> getrennt untereinander und waren nur
   18 px hoch mit 4 px dazwischen. Auf dem Handy sind das die zwei meistge-
   brauchten Handlungen der Seite, also bekommen sie Luft. */
.footer-col a[href^="tel:"],.footer-col a[href^="mailto:"]{
  display:inline-block;padding-block:var(--sp-3xs);
}

/* Die Icons bleiben optisch 18 px, die Tippflaeche wird auf 40x44 gezogen.
   Der negative Aussenabstand haelt das erste Icon buendig zur Textkante
   darueber, obwohl der Knopf jetzt breiter ist. */
.social-row{display:flex;gap:0;margin-top:var(--sp-2xs);margin-left:-11px;}
.social-row a{color:var(--dark-text-soft);display:inline-flex;transition:color .15s;
  width:40px;height:44px;align-items:center;justify-content:center;}
.social-row a:hover{color:var(--dark-text);}
.social-row svg{width:18px;height:18px;display:block;}

@media (max-width:820px){.footer-inner{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.footer-inner{grid-template-columns:1fr;}}

.badge{display:inline-block;border:1px solid var(--ink-soft);color:var(--ink-soft);font-size:var(--fs-label);line-height:var(--lh-ui);
  padding:2px var(--sp-2xs);border-radius:999px;margin-left:8px;vertical-align:2px;}
.lead{font-size:var(--fs-md);line-height:var(--lh-body);max-width:var(--measure);}
.small{font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-body);}

/* ============================================================
   Durchgang 7 (Design-Audit): neue Bausteine
   ============================================================ */

/* Paar-Liste: Bezeichnung links, Wert rechts, gemeinsame Grundlinie.
   Ersetzt die frueheren .tick-list-Zeilen mit Gedankenstrich als
   Aufzaehlungszeichen. Zwei Gruende: Der Strich stand in der Glutfarbe und
   war damit reine Dekoration, und bei den Preislisten brach der Preis auf
   die naechste Zeile statt rechts zu stehen. Die Haarlinie zwischen den
   Zeilen ist eine Ausrichtungshilfe, kein Rahmen. */
.pair-list{
  list-style:none;margin:0 0 var(--sp-sm);padding:0;
  /* Begrenzt die Zeilenbreite. In einer 514 px breiten Spalte standen
     Bezeichnung und Wert 263 px auseinander, waehrend die beiden Spalten nur
     24 px Abstand hatten: "Ruhetag" stand damit naeher bei "Telefon" als bei
     "Montag". Die Begrenzung wirkt nur dort, wo die Spalte breiter ist als
     die Liste, in Fusszeile und Speisekarte aendert sie nichts. */
  max-width:20em;
}
.pair-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-sm);
  padding:var(--sp-2xs) 0;border-bottom:1px solid var(--line);font-size:var(--fs-base);
  line-height:var(--lh-ui);
}
.pair-list li:last-child{border-bottom:none;}
.pair-list .val{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);}
.pair-list .val.is-price{color:var(--accent);font-weight:800;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;}
.pair-list .val.is-off{color:var(--ink-soft);}
.pair-list .lbl{color:var(--ink);}
/* Auf sehr schmalen Geraeten darf der Wert umbrechen. Sonst sprengt eine
   lange Angabe wie "Donnerstag, 11. September" die Zeile und die ganze
   Seite laeuft waagrecht ueber. */
@media (max-width:420px){
  .pair-list li{gap:var(--sp-2xs);}
  .pair-list .val{white-space:normal;text-align:right;}
}

/* Status "heute geoeffnet". War im Farbkonzept als einer der vier Einsatzorte
   der Glutfarbe vorgesehen, wurde bisher auf keiner Seite verwendet. Als
   gefuellte Pille bleibt er dort, wo er in einer Textspalte steht und
   auffallen soll (Kontakt-Seite). */
.open-now::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;}

/* Im Hero dagegen als schlichte Zeile. Dort stand er zwischen Fliesstext und
   zwei Knoepfen und sah selbst aus wie ein Knopf: gleiche Hoehe, gerundet,
   weisser Rahmen, halbtransparent gefuellt, dazu Gewicht 700. Drei Objekte
   in Knopfform untereinander, von denen das oberste nichts tut. Eine
   Information gehoert nicht in die Form eines Bedienelements. */
.hero .status-line{
  display:flex;align-items:center;gap:var(--sp-2xs);
  font-size:var(--fs-base);line-height:var(--lh-ui);font-weight:400;
  color:rgba(255,255,255,.88);margin:0 0 var(--sp-md);max-width:var(--measure);
}
.hero .status-line::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
.hero:not(.has-photo) .status-line{color:var(--ink-soft);}

/* Fakten-Reihe: die sechs Beweise zum Hauptclaim. Ohne Rahmen, mit kleiner
   Bezeichnung darueber statt Ueberschrift im Kasten. */
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg) var(--sp-lg);}
.fact h3{font-size:var(--fs-md);margin-bottom:var(--sp-3xs);}
.fact p{color:var(--ink-soft);font-size:var(--fs-sm);line-height:var(--lh-body);margin:0;max-width:32em;}
/* Ohne Trennlinie ueber dem Titel: Ein kurzer Strich ueber einer Ueberschrift
   haengt in der Luft und ist am Ende auch nur ein kleiner Kasten. Die
   Struktur tragen die Titel selbst und der groessere Zeilenabstand. */
.fact{padding-top:var(--sp-3xs);}
@media (max-width:820px){.fact-grid{grid-template-columns:1fr;gap:var(--sp-md);}}

/* Saisonaler Hinweis: volles Band mit Bild links und Text rechts, statt einer
   einzelnen Karte in einem dreispaltigen Raster (ein Drittel Bild, zwei
   Drittel Leere, kein Text, kein Link). */
.season{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);align-items:center;}
.season h3{font-size:var(--fs-md);}
.season .ph-img{min-height:320px;}
@media (max-width:820px){.season{grid-template-columns:1fr;gap:var(--sp-md);}.season .ph-img{min-height:220px;}}

/* Antworten im FAQ: vorher 13 px in Grau, also kleiner und blasser als die
   Frage darueber. Die Antwort ist der Grund, warum jemand die Seite oeffnet. */
/* Die Fragen sind eigene Abschnitte und darum h2, nicht h3 (vorher sprang
   die Gliederung von h1 direkt auf h3). Optisch bleiben sie bei 18 px. */
.faq h2{font-size:var(--fs-md);margin-bottom:var(--sp-3xs);}
.faq h2 + p{font-size:var(--fs-base);color:var(--ink);line-height:var(--lh-body);margin-bottom:var(--sp-md);max-width:var(--measure);}

/* Bestaetigung: sichtbares Signal statt drei grauer Kaesten. */
.confirm-box{border:2px solid var(--accent);border-radius:2px;padding:var(--sp-md);background:var(--surface-card);}
.confirm-box .confirm-head{
  display:flex;align-items:center;gap:var(--sp-2xs);color:var(--accent);font-weight:700;
  font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:var(--fs-md);
  line-height:var(--lh-ui);margin-bottom:var(--sp-sm);
}
.confirm-box .check{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-text);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-base);flex:none;
}

/* Aufklappender Teil des Reservationsformulars (ab 13 Personen). */
.reveal[hidden]{display:none;}
.reveal{border-top:1px solid var(--line);margin-top:var(--sp-sm);padding-top:var(--sp-sm);}
.reveal-note{
  background:var(--surface);border-left:3px solid var(--accent);
  padding:var(--sp-xs);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink);margin:0 0 var(--sp-sm);
}

/* Weiterfuehrende Angebote am Fuss der Reservierungsseite. Vorher standen
   fuenf Handlungsaufforderungen ueber die ganze Seite verteilt. */
.more-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md) var(--sp-lg);}
.more-row h3{font-size:var(--fs-md);margin-bottom:var(--sp-3xs);}
.more-row p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-body);margin-bottom:var(--sp-2xs);}
.more-row a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid var(--accent-line);}
@media (max-width:820px){.more-row{grid-template-columns:1fr;}}

/* Leere Ueberschriftenzeile (nur Projekt-Kommentar) gibt es in der
   Produktion nicht mehr -- der Kommentar ist entfernt, nicht nur versteckt. */

/* Fussbereich: vier Spalten, damit die Oeffnungszeiten auf jeder Seite
   mitlaufen. Sie sind der meistgesuchte Inhalt einer Restaurant-Website
   und standen bisher nur auf zwei Unterseiten. */
.site-footer .footer-inner{grid-template-columns:repeat(4,1fr);}
.footer-col .pair-list li{
  padding:var(--sp-3xs) 0;border-bottom-color:var(--dark-line);
  font-size:var(--fs-sm);color:var(--dark-text-soft);
}
.footer-col .pair-list .lbl{color:var(--dark-text-soft);}
.footer-col .pair-list .val{color:var(--dark-text);}
.footer-col a[href^="tel:"],.footer-col a[href^="mailto:"]{color:var(--dark-text);text-decoration:none;border-bottom:1px solid var(--dark-line);}
.footer-col a[href^="tel:"]:hover,.footer-col a[href^="mailto:"]:hover{border-bottom-color:var(--dark-text);}
@media (max-width:820px){.site-footer .footer-inner{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.site-footer .footer-inner{grid-template-columns:1fr;}}

/* Telefon- und E-Mail-Links im Inhalt */
.content-link,a[href^="tel:"],a[href^="mailto:"]{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line);}
/* Eine Telefonnummer bricht nie um. Mitten in der Nummer umgebrochen ist sie
   weder lesbar noch als Nummer erkennbar. Lieber rutscht sie als Ganzes auf
   die naechste Zeile. */
a[href^="tel:"]{white-space:nowrap;}
a[href^="tel:"]:hover,a[href^="mailto:"]:hover{border-bottom-color:var(--accent);}

/* Kopfzeile auf schmalen Breiten: ohne Sprachumschalter und mit kleinerem
   Logo passen Logo, Hamburger und Reservieren-Knopf auf eine Zeile. Vorher
   brach der Knopf auf eine zweite Zeile um, die Kopfzeile war 169 px hoch. */
@media (max-width:820px){
  .header-inner{gap:12px;}
  .logo-img{height:46px;}
  .nav-cta{padding:12px 18px;}
}
@media (max-width:380px){
  .logo-img{height:40px;}
  .nav-cta{padding:12px 14px;font-size:var(--fs-sm);}
}

/* Datenschutzhinweis unter Formularen */
.form-legal{font-size:var(--fs-sm);color:var(--ink-soft);margin:var(--sp-sm) 0 0;max-width:var(--measure);}

/* Links im Fliesstext: gleiche Auszeichnung wie Telefon- und Mail-Links,
   damit ein Link im Text immer gleich aussieht. */
/* Telefonnummern bleiben auch im Fliesstext auf dem Desktop unauffaellig. */
.section p a:not(.btn):not([href^="tel:"]), .faq p a:not([href^="tel:"]),
.note-line a:not([href^="tel:"]), .fact p a:not([href^="tel:"]){
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line);
}
.section p a:not(.btn):hover, .faq p a:hover, .note-line a:hover, .fact p a:hover{
  border-bottom-color:var(--accent);
}

/* Hinweiszeile unter dem Wochenmenue: vorher 13 px ueber die volle Breite
   von 1100 px, also rund 130 Zeichen pro Zeile. */
.note-line{font-size:var(--fs-base);color:var(--ink);max-width:var(--measure);margin-top:var(--sp-sm);}
/* Direkte Absaetze in einem Abschnitt: dasselbe Mass. Karten, Formulare und
   Rasterzellen sind ohnehin schmaler und bleiben unberuehrt. */
.section > .wrap > p{max-width:var(--measure);}
.preis-hinweis{font-size:var(--fs-sm);color:var(--ink-soft);margin:var(--sp-md) 0 0;}

/* Telefonlinks: Auf dem Desktop bringt ein Klick auf eine Nummer wenig
   (macOS oeffnet FaceTime, Windows irgendeinen Handler, Linux nichts). Der
   Link bleibt trotzdem, weil die automatische Erkennung der Browser
   unzuverlaessig ist, auch Nicht-Nummern erwischt und ihre eigene Linkfarbe
   setzt. Er sieht aber nur dort nach Link aus, wo Tippen etwas bringt. */
@media (hover:hover) and (pointer:fine){
  a[href^="tel:"]{color:inherit;border-bottom:none;cursor:text;}
  .footer-col a[href^="tel:"]{color:var(--dark-text-soft);border-bottom:none;}
}

/* Hero-Band ohne Foto: zeigt eine schlichte Flaeche, bis das Foto da ist. */
.bg-photo-area:not(.has-photo){
  background-image:none;background-color:var(--surface);
}

/* Nur fuer Screenreader: Die Beweis-Reihe unter dem Hero hat bewusst keine
   sichtbare Ueberschrift (die Behauptung steht direkt darueber). Ohne
   Ueberschrift sprang die Gliederung aber von h1 auf h3. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Kontaktangaben als einfacher Block. Eine Telefonnummer, eine E-Mail und
   eine Adresse sagen selbst, was sie sind, die Bezeichnung davor traegt
   nichts bei und reisst die Zeile auseinander. */
.contact-block{font-size:var(--fs-md);line-height:var(--lh-body);}

/* Bildflaechen mit festem Seitenverhaeltnis. Ohne das richtet sich die Hoehe
   nach min-height und schneidet Portraets und quadratische Bilder hart an. */
.ph-img.is-portrait{min-height:0;aspect-ratio:3/4;}
.ph-img.is-square{min-height:0;aspect-ratio:1/1;}

/* Foto in einer rahmenlosen Karte: Die negativen Aussenabstaende gelten nur
   fuer Karten mit Innenabstand. Ohne Rahmen gibt es nichts zu ueberlappen. */
.card.is-plain > .ph-img.has-photo:first-child{margin:0 0 var(--sp-xs);min-height:0;}

/* ============================================================
   Feinschliff: sanfte Bewegung
   Vorher stand im ganzen Stylesheet genau eine transition-Regel, und die
   galt den zwei Social-Icons in der Fusszeile. Keine Karte, kein Bild und
   kein Knopf hat bemerkt, dass jemand darueberfaehrt. Alles hier ist
   bewusst langsam und klein: Es soll auffallen, wenn man darauf achtet,
   und sonst nicht.
   ============================================================ */

/* Fotos in Karten und in der Galerie atmen leicht. */
.ph-img.has-photo img{transition:transform .55s cubic-bezier(.2,.6,.2,1);}
.card:hover .ph-img.has-photo img,
.grid-3 > .ph-img.has-photo:hover img,
.grid-4 > .ph-img.has-photo:hover img{transform:scale(1.035);}

/* Karten: der Rahmen nimmt beim Darueberfahren einen Hauch Glut an. */
.card{transition:border-color .25s ease;}
.card:not(.is-plain):hover{border-color:var(--accent-line);}
.card.is-today:hover{border-color:var(--line);}

/* Knoepfe und Chips: weicher Farbwechsel statt hartem Umschalten. */
.btn,.chip{transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.btn-primary:hover{background:#ad340f;border-color:#ad340f;}
.btn-outline:hover{background:rgba(197,61,18,.07);}
.bg-photo-area.has-photo .btn-outline:hover{background:rgba(20,16,13,.5);}
.chip:not(.is-active):not(.is-disabled):hover{border-color:var(--accent);color:var(--accent);}

/* Navigation und Fusszeilen-Links */
.main-nav a{transition:border-color .2s ease, color .2s ease;}
.footer-col a{transition:color .2s ease, border-color .2s ease;}
.footer-col a:hover{color:var(--dark-text);}

/* Der Punkt in der Statuszeile ist das einzige Element auf der Seite, das
   "jetzt" sagt. Ein sehr langsamer, sehr flacher Puls. */
@keyframes loewen-puls{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero .status-line::before{animation:loewen-puls 3s ease-in-out infinite;}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* Wortmarke als Signatur im Fussbereich: oben klein zur Navigation,
   unten gross als Abschluss. */
.footer-brand{margin:0 0 var(--sp-md);}
.footer-brand img{display:block;height:52px;width:auto;}

/* Spamfalle. Ein Feld, das niemand sieht und niemand mit der Tastatur
   erreicht. Fuellt es jemand aus, war es kein Mensch. Ersetzt ein Captcha
   und damit einen Aufruf an einen Drittanbieter bei jedem Formular. */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------------------------------------------------------------------------
   Rechtliche Seiten (Impressum, Datenschutzerklärung). Lange Lesetexte mit
   vielen Zwischentiteln. Eigene Regeln, weil hier anders gelesen wird als auf
   den Angebotsseiten: kein Weissraum-Rhythmus für Bilder, sondern eine ruhige
   Spalte auf Satzspiegelbreite und Zwischentitel, die beim Überfliegen tragen.
   --------------------------------------------------------------------------- */
.legal{max-width:var(--measure);}
.legal > h2{font-size:var(--fs-lg);margin:var(--sp-xl) 0 var(--sp-sm);scroll-margin-top:var(--sp-lg);}
.legal > h2:first-child{margin-top:0;}
.legal > h3{font-size:var(--fs-md);margin:var(--sp-md) 0 var(--sp-2xs);}
.legal p{line-height:var(--lh-body);margin:0 0 var(--sp-sm);}
.legal ul{margin:0 0 var(--sp-sm);padding-left:var(--sp-md);}
.legal li{line-height:var(--lh-body);margin-bottom:var(--sp-3xs);}
.legal .lead{margin-bottom:var(--sp-md);}

/* Inhaltsverzeichnis. Eine Datenschutzerklärung wird selten von vorne bis
   hinten gelesen, sondern gezielt an einer Stelle. */
.legal-toc{border:1px solid var(--line);border-radius:2px;padding:var(--sp-md);
  background:var(--surface-card);margin-bottom:var(--sp-lg);}
.legal-toc h2{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  line-height:var(--lh-ui);margin:0 0 var(--sp-2xs);}
.legal-toc ol{margin:0;padding-left:var(--sp-md);}
.legal-toc li{margin-bottom:var(--sp-3xs);}

/* Tabellen: welche Angabe, wofür, wie lange. Auf schmalen Bildschirmen darf
   die Tabelle scrollen, statt die ganze Seite in die Breite zu ziehen. */
/* Tabellen duerfen breiter sein als der Satzspiegel: Vier Spalten auf
   34em gelesen ergeben Spalten von vier Woertern Breite. */
.legal-table-wrap{overflow-x:auto;margin:0 0 var(--sp-md);}
@media (min-width:1000px){ .legal-table-wrap{width:860px;} }
.legal table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-sm);}
.legal th,.legal td{text-align:left;vertical-align:top;padding:var(--sp-2xs) var(--sp-xs)
  var(--sp-2xs) 0;border-bottom:1px solid var(--line);line-height:var(--lh-body);}
.legal th{font-weight:700;color:var(--ink);}
.legal td:last-child,.legal th:last-child{padding-right:0;}

/* Platzhalter: Angaben, die vor dem Aufschalten noch eingesetzt werden müssen.
   Bewusst sichtbar ausgezeichnet, damit keiner davon übersehen wird. */
.todo{background:var(--note-bg);border-bottom:1px solid var(--note-border);
  color:var(--note);padding:0 3px;font-weight:700;}

@media (max-width:720px){
  .legal{max-width:none;}
  .legal > h2{margin-top:var(--sp-lg);}
}