/* =========================================================================
   Tony's Art Pflästerung — Gestaltungssystem

   DIE IDEE
   Oben roher Stein, unten verlegte Fläche. Der Hero läuft als 50/50-Spalte
   über die volle Fensterbreite: Text links im Satzspiegel, Foto rechts bis
   an die Kante, ungerundet und ungeschnitten — Material, wie es angeliefert
   wird. Alles darunter steht in eingefassten Tafeln mit weicher Rundung:
   das Material, nachdem es verlegt wurde. Der Bruch zwischen beiden ist
   kein Zufall, sondern der Inhalt der Seite.

   HÖCHSTENS VIER ABSCHNITTE JE SEITE. Wer mehr braucht, braucht eine
   zweite Seite. Der Prüflauf misst das nach.

   FARBE
   Das Oliv #79764E kommt aus dem Logo. Es trägt weisse Schrift (4.65:1),
   reicht als Schrift auf dem Papier aber nicht — dafür gibt es das
   dunklere --oliv-text (5.20:1). Auf schwarzem Grund wird daraus das
   hellere --oliv-hell (7.41:1). Drei Fassungen einer Farbe, damit die
   Marke überall lesbar bleibt.

   SCHRIFT
   Nunito Sans für Titel, Inter Tight für alles andere — beide aus dem
   bestehenden Auftritt übernommen. Nunito Sans ist zugleich die Schrift
   der Wortmarke; Titel und Logo laufen dadurch in derselben Handschrift.
   Die Laufweite folgt der Grösse: grosse Titel laufen enger, kleine
   Beschriftungen weiter — eine feste Laufweite ist immer irgendwo falsch.
   ========================================================================= */

/* =========================================================================
   Schriften — selbst gehostet, kein Aufruf an Google.

   Beide Schnitte stammen aus dem bestehenden Auftritt von
   tonys-pflaesterungen.ch und bleiben damit unverändert:

   Nunito Sans (variabel, Gewicht 300–900) für Überschriften. Es ist auch
   die Schrift der Wortmarke im Logo — Titel und Logo laufen dadurch in
   derselben Handschrift.

   Inter Tight (variabel, Gewicht 300–800) für Fliesstext, Navigation und
   alles Kleinteilige. Etwas schmaler als Inter, wie im bestehenden
   Auftritt hinterlegt.

   Zwei Schnitte je Schrift: latin und latin-ext. Der Browser lädt nur,
   was der Text wirklich braucht.
   ========================================================================= */

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

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


/* --- 1 · Token ----------------------------------------------------------- */
:root{
  /* Marke */
  --oliv:#79764E;          /* Flächen — weisse Schrift darauf 4.65:1 */
  --oliv-text:#6A6844;     /* Oliv als Schrift auf Papier: 5.20:1 */
  --oliv-tief:#575537;
  --oliv-hell:#A8A473;     /* Oliv auf schwarzem Grund: 7.41:1 */
  --oliv-blass:#EFEDE2;
  --oliv-schleier:rgba(121,118,78,.14);

  /* Flächen — warm, weil Stein warm ist */
  --stein:#131210;         /* das Schwarz der Marke, warm gebrochen */
  --stein-weich:#221F1A;
  --tinte:#1A1815;
  --tinte-weich:#55504A;   /* 7.32:1 auf Papier */
  --tinte-zart:#6E685F;    /* 5.06:1 auf Papier */
  --weiss:#FFFFFF;
  --papier:#F7F5F0;
  --papier-tief:#EFECE4;
  --sand:#E6E1D5;
  --linie:#DFDACD;
  --linie-stark:#C9C2B0;

  /* Rahmen — Kopf und Fuss stehen fest, der Hero rechnet mit ihnen */
  --kopf:66px;
  --kopf-mobil:58px;
  --fuss:54px;            /* feste Fussleiste am unteren Fensterrand */
  --reiter:64px;          /* Reiterleiste auf dem Telefon, ersetzt die Fussleiste */

  /* Raster */
  --bahn:1240px;
  --luft:clamp(20px,4vw,56px);
  --rund:18px;
  --rund-klein:10px;
  --rund-gross:26px;

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --tafel-luft:clamp(28px,4.6vw,68px);
  --abstand:clamp(34px,5.2vw,80px);   /* Abstand ZWISCHEN zwei Tafeln */

  /* Bewegung — kritisch gedämpft, kein Nachschwingen ohne Anlass */
  --schnell:140ms cubic-bezier(.32,.72,0,1);
  --ruhig:320ms cubic-bezier(.32,.72,0,1);

  /* Schrift */
  --satz:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --titel:"Nunito Sans","Inter Tight",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Schatten — über ruhigem Grund leicht, über Bildern schwerer */
  --schatten:0 1px 2px rgba(19,18,16,.04),0 8px 24px -12px rgba(19,18,16,.16);
  --schatten-hoch:0 2px 4px rgba(19,18,16,.05),0 24px 56px -24px rgba(19,18,16,.30);
}

/* --- 2 · Grundlagen ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;
  font-family:var(--satz);
  font-size:17px;
  line-height:1.62;
  color:var(--tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-top:var(--kopf);
  padding-bottom:var(--fuss);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oliv-text);text-decoration:none;transition:color var(--schnell)}
a:hover{color:var(--oliv-tief)}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--oliv);outline-offset:3px;border-radius:3px}
hr{border:0;border-top:1px solid var(--linie);margin:var(--s6) 0}

/* Titel: Nunito Sans, schwer gesetzt wie die Wortmarke im Logo.
   Laufweite grössenabhängig — grosse Titel enger, kleine weiter. */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--titel);
  font-weight:800;
  line-height:1.08;
  text-wrap:balance;
  overflow-wrap:break-word;
}
/* Eine Stufe kleiner als beim ersten Entwurf (Korrektur von Besim,
   01.09.2026): die Titel waren auch am Bildschirm zu gross. 66 px für eine
   H1 heisst, dass ein Satz mit sechs Wörtern über vier Zeilen läuft — das
   liest sich als Plakat, nicht als Text. Die Sprungweite der clamp-Werte
   bleibt, nur die Endpunkte sind zurückgenommen. */
h1{font-size:clamp(31px,4vw,50px);font-weight:900;line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(23px,2.4vw,33px);font-weight:900;line-height:1.12;letter-spacing:-.024em}
h3{font-size:clamp(17px,1.35vw,20px);line-height:1.26;letter-spacing:-.014em}
h4{font-size:16px;line-height:1.35;letter-spacing:-.008em}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:650}

/* Versal-Label: die kleine Beschriftung über jedem Abschnitt */
.marke{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-zart);
}
.marke::before{content:"";width:20px;height:2px;background:var(--oliv);flex:0 0 auto;border-radius:2px}
.marke--hell{color:rgba(255,255,255,.72)}
.marke--hell::before{background:var(--oliv-hell)}
.marke--blank::before{display:none}

.lead{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--tinte-weich)}
.lead--hell{color:rgba(255,255,255,.80)}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--stein);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--rund-klein) 0}
.sprung:focus{left:0;color:#fff}

.ikon{width:1em;height:1em;flex:0 0 auto}

/* --- 3 · Bahn und Tafel --------------------------------------------------
   Die Bahn hält die Flucht, die Tafel ist der eingefasste Abschnitt.
   Jede Tafel ist ein eigener Kasten mit Rundung — das ist die Ordnung
   unter dem rohen Hero.                                                  */
.bahn{width:100%;max-width:var(--bahn);margin:0 auto;padding:0 var(--luft)}
.bahn--schmal{max-width:840px}

.abschnitt{padding:calc(var(--abstand) / 2) 0}
.abschnitt--eng{padding:calc(var(--abstand) * .3) 0}
.abschnitt:first-of-type{padding-top:var(--abstand)}
.abschnitt:last-of-type{padding-bottom:var(--abstand)}

.tafel{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--rund-gross);
  padding:var(--tafel-luft);
  box-shadow:var(--schatten);
}
/* Offen: kein Rahmen, kein Schatten, keine Polsterung — der Abschnitt läuft
   über die volle Bahnbreite. Für alles, was sonst als Kasten in einem Kasten
   mit derselben Fläche stünde. */
.tafel--offen{background:none;border:0;box-shadow:none;padding:0}

/* Nachsatz — der Block unter einer Tafel, im selben Abschnitt. Keine
   Fläche, kein Rahmen, kein Innenabstand; einzig der Abstand von Container
   zu Container steht davor, damit er nicht am Kasten klebt. */
.nachsatz{margin-top:var(--abstand)}
/* In einer offenen Tafel liegen Kacheln direkt auf dem Papier. Sie tragen
   dort ihren eigenen weissen Grund — eine Kachel in Papierfarbe auf Papier
   ist nur ein Rahmen ohne Fläche. */
.tafel--offen .kachel,.tafel--offen .schritt{background:var(--weiss)}
.tafel--offen a.kachel:hover{background:var(--weiss);box-shadow:var(--schatten)}
.tafel--offen > .kopfzeile,.tafel--offen > .kopf-reihe{padding-top:var(--s2)}
/* --- Die Regel setzt sich selbst durch -----------------------------------
   «Keine Karte in einer Karte.» Sobald der Inhalt einer Tafel schon aus
   Karten besteht — Leistungskacheln, Verlegeart-Zeilen, Galeriefelder, die
   Personenkarte — fällt der Rahmen der Tafel weg. Das steht hier als
   Regel und nicht in zwölf Aufrufen, damit der Fehler nicht zurückkommt,
   sobald später ein Abschnitt dazukommt.

   Ausgenommen ist die dunkle Tafel: dort IST die Fläche der Zweck, und
   Schwarz auf Papier ist ein echter Unterschied, keine Box in einer Box. */
.tafel:not(.tafel--dunkel):has(.kachel,.art-zeile,.gal-feld,.person){
  background:none;border:0;box-shadow:none;padding:0;
}
.tafel:not(.tafel--dunkel):has(.kachel) .kachel,
.tafel:not(.tafel--dunkel):has(.schritt) .schritt{background:var(--weiss)}
.tafel:not(.tafel--dunkel):has(.kachel) a.kachel:hover{background:var(--weiss);box-shadow:var(--schatten)}
.tafel:not(.tafel--dunkel):has(.kachel,.art-zeile,.gal-feld,.person) > .kopfzeile,
.tafel:not(.tafel--dunkel):has(.kachel,.art-zeile,.gal-feld,.person) > .kopf-reihe{padding-top:var(--s2)}

.tafel--dunkel{background:var(--stein);border-color:rgba(255,255,255,.09);color:#fff;
  box-shadow:var(--schatten-hoch)}
.tafel--dunkel h1,.tafel--dunkel h2,.tafel--dunkel h3,.tafel--dunkel h4{color:#fff}
.tafel--dunkel .marke{color:rgba(255,255,255,.72)}
.tafel--dunkel .marke::before{background:var(--oliv-hell)}
.tafel--dunkel a{color:var(--oliv-hell)}
.tafel--dunkel{--oliv-marke:#A8A473}
.tafel--randlos{padding:0;overflow:hidden}

/* Abschnittskopf */
.kopfzeile{max-width:760px;margin-bottom:var(--s7)}
.kopfzeile h2{margin:var(--s4) 0 var(--s4)}
.kopfzeile--breit{max-width:none}
.kopfzeile--mitte{margin-left:auto;margin-right:auto;text-align:center}
.kopfzeile--mitte .marke{justify-content:center}

/* Kopf mit Handlung rechts — auf dem Telefon untereinander */
.kopf-reihe{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  margin-bottom:var(--s7);flex-wrap:wrap}
.kopf-reihe .kopfzeile{margin-bottom:0}

/* --- 4 · Kopfzeile -------------------------------------------------------
   Durchscheinende Leiste über dem Inhalt (Apple: Material statt Balken).
   Der Inhalt scrollt darunter durch, die Leiste bleibt lesbar.          */
.rahmen-kopf{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:var(--kopf);
  display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--luft);
  background:rgba(247,245,240,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--ruhig),background var(--ruhig);
}
.rahmen-kopf[data-gescrollt]{border-bottom-color:var(--linie);background:rgba(247,245,240,.92)}
@media (prefers-reduced-transparency:reduce){
  .rahmen-kopf{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none}
}

.logo{display:flex;align-items:center;flex:0 0 auto;color:var(--tinte)}
.logo:hover{color:var(--tinte)}
/* Die Wortmarke ist Teil des Original-Logos und wird nicht gesetzt, sondern
   als Kurvenzug ausgeliefert — so bleiben die Buchstabenformen exakt die des
   Logos. Die olivfarbenen Flächen tragen ihre Markenfarbe, die dunklen folgen
   der Textfarbe: dasselbe Zeichen funktioniert auf Papier und auf Schwarz. */
.logo-svg{height:36px;width:auto;flex:0 0 auto;display:block}

.haupt-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-punkt{position:relative;display:flex}
.haupt-nav a,.nav-knopf{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:var(--rund-klein);
  font-size:14.5px;font-weight:500;color:var(--tinte-weich);
  background:none;border:0;transition:background var(--schnell),color var(--schnell);
}
.haupt-nav a:hover,.nav-knopf:hover{background:var(--oliv-schleier);color:var(--tinte)}
.haupt-nav a[aria-current="page"],.nav-knopf[aria-current="page"]{color:var(--tinte);font-weight:650}
.nav-knopf svg{width:15px;height:15px;transition:transform var(--ruhig)}
.nav-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-knopf[aria-expanded="true"]{background:var(--oliv-schleier);color:var(--tinte)}

.kopf-trenner{width:1px;height:26px;background:var(--linie);flex:0 0 auto;margin:0 4px}
.kopf-ic{
  width:42px;height:42px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--tinte);background:var(--weiss);font-size:18px;
  transition:border-color var(--schnell),background var(--schnell),transform var(--schnell);
}
.kopf-ic:hover{border-color:var(--oliv);color:var(--oliv-text)}
.kopf-ic:active{transform:scale(.96)}
.kopf-cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  height:42px;padding:0 18px;border-radius:var(--rund-klein);
  background:var(--stein);color:#fff!important;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  transition:background var(--schnell),transform var(--schnell);
}
.kopf-cta .ikon{font-size:16px}
.kopf-cta:hover{background:var(--oliv-tief)}
.kopf-cta:active{transform:scale(.98)}
.app-kopf{display:none}

/* Megamenü */
.mega{
  position:fixed;top:var(--kopf);left:0;right:0;z-index:79;
  /* Deckender als der Kopfbalken: hier steht Fliesstext darauf, und
     darunter läuft im Hero ein unruhiges Foto durch. */
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--linie);
  box-shadow:0 24px 48px -28px rgba(19,18,16,.32);
  transform-origin:top center;
}
.mega[hidden]{display:none}
/* Vier Spalten, dazwischen eine Haarlinie — wie ein Satzspiegel, nicht
   wie eine Kartenwand. Kein Rahmen, keine Rundung, kein Grund: die
   Fläche darunter ist bereits fast weiss, eine Karte darauf wäre eine
   Box auf gleicher Fläche. Beim Überfahren wandert nur die Titelfarbe
   und der Pfeil rückt nach. */
.mega-innen{max-width:var(--bahn);margin:0 auto;padding:var(--s6) var(--luft);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:0;row-gap:var(--s5)}
.mega-eintrag{
  display:block;padding:0 var(--s5);
  border-left:1px solid var(--linie);
  color:var(--tinte);
}
.mega-eintrag:nth-child(4n+1){border-left:0;padding-left:0}
.mega-eintrag:nth-child(4n){padding-right:0}
.mega-eintrag:focus-visible{outline:2px solid var(--oliv-text);outline-offset:6px;border-radius:2px}
/* Das Symbol steht frei in der Markenfarbe, ohne gefülltes Quadrat. */
.mega-ikon{display:block;color:var(--oliv-text);font-size:22px;margin-bottom:var(--s3)}
.mega-titel{display:block;font-family:var(--titel);font-weight:800;font-size:16px;
  line-height:1.25;color:var(--tinte);transition:color var(--schnell)}
.mega-eintrag:hover .mega-titel{color:var(--oliv-text)}
.mega-text{display:block;font-size:13.5px;line-height:1.5;color:var(--tinte-zart);
  margin-top:7px}
.mega-pfeil{display:inline-flex;align-items:center;margin-top:var(--s3);
  font-size:17px;color:var(--oliv-text);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--schnell),transform var(--schnell)}
.mega-eintrag:hover .mega-pfeil,.mega-eintrag:focus-visible .mega-pfeil{opacity:1;transform:none}
.mega-fuss{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);padding:var(--s4) var(--s4) 0;border-top:1px solid var(--linie);margin-top:var(--s2);
  flex-wrap:wrap}
.mega-fuss p{margin:0;font-size:14px;color:var(--tinte-weich);max-width:52ch}

/* --- 5 · Knöpfe ---------------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;
  border-radius:var(--rund-klein);border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.015em;
  cursor:pointer;text-align:center;
  transition:background var(--schnell),border-color var(--schnell),color var(--schnell),transform var(--schnell);
}
.knopf .ikon{font-size:18px}
.knopf:active{transform:scale(.98)}
.knopf--voll{background:var(--stein);color:#fff!important;border-color:var(--stein)}
.knopf--voll:hover{background:var(--oliv-tief);border-color:var(--oliv-tief);color:#fff!important}
.knopf--oliv{background:var(--oliv);color:#fff!important;border-color:var(--oliv)}
.knopf--oliv:hover{background:var(--oliv-tief);border-color:var(--oliv-tief);color:#fff!important}
.knopf--rand{background:transparent;color:var(--tinte)!important;border-color:var(--linie-stark)}
.knopf--rand:hover{border-color:var(--stein);background:rgba(19,18,16,.04);color:var(--tinte)!important}
.knopf--hell{background:rgba(255,255,255,.10);color:#fff!important;border-color:rgba(255,255,255,.30)}
.knopf--hell:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff!important}
.knopf--weiss{background:#fff;color:var(--stein)!important;border-color:#fff}
.knopf--weiss:hover{background:var(--oliv-blass);border-color:var(--oliv-blass);color:var(--stein)!important}
.knopfgruppe{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* --- 6 · Hero: 50/50 -----------------------------------------------------
   Text links im Satzspiegel, Foto rechts bis an die Fensterkante. Der
   linke Innenabstand rechnet die Zentrierung der Bahn mit, damit die
   Flucht mit allen Tafeln darunter hält.                                */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  /* Genau der sichtbare Bereich: Fensterhöhe abzüglich Kopf und Fussleiste.
     Kein Deckel — sonst bleibt unter dem Hero ein Streifen der nächsten
     Tafel stehen, und die Seite fängt halb an. */
  min-height:calc(100dvh - var(--kopf) - var(--fuss));
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}
.hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,88px) clamp(28px,4vw,64px) clamp(40px,6vw,88px)
          max(var(--luft),calc((100vw - var(--bahn)) / 2 + var(--luft)));
}
.hero-text > *{max-width:37rem}
/* Am Bildschirm ist der Titelblock keine eigene Schachtel — er reicht
   seine Kinder unverändert an die Textspalte durch. Erst auf dem
   Telefon wird er zur Fläche, die im Bild unten links sitzt. */
.hero-kopf{display:contents}
.hero h1{margin:var(--s5) 0 0}
.hero-linie{width:64px;height:3px;background:var(--oliv);border-radius:3px;margin:var(--s5) 0}
.hero .lead{margin-bottom:var(--s6)}

/* --- Einwand-Hero — WS-HE-11 der Design Zentrale ------------------------
   Drei Sätze anstelle des Fliesstexts, jeder nimmt einen Grund weg, sich
   gegen den Betrieb zu entscheiden. Nebeneinander, nicht untereinander:
   eine Liste sieht nach Arbeit aus, eine Reihe nach Selbstverständlichkeit.
   Danach EIN Knopf mit der Nummer als Text daneben, zuletzt der Beleg. */
.einwaende{list-style:none;margin:0 0 var(--s6);padding:0;
  display:flex;flex-wrap:wrap;gap:11px 22px;max-width:37rem}
.einwaende li{display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--tinte);line-height:1.25}
.einwand-haken{display:grid;place-items:center;flex:0 0 auto;
  width:21px;height:21px;border-radius:50%;
  background:var(--oliv-schleier);color:var(--oliv-text)}
.einwand-haken .ikon{width:13px;height:13px;stroke-width:2.4}

/* Bewusst kein Knopfpaar: der Hero hat gerade drei Einwände weggenommen,
   eine gleichrangige Alternative daneben nimmt dem Schwung wieder heraus.
   Die Nummer steht als Text, nicht als zweiter Knopf. */
/* Kein inline-flex hier: in einem Flex-Kasten sind reine Leerzeichen keine
   Elemente, und aus «oder +41 …» wird «oder+41 …». Als gewöhnlicher
   Block fließt der Text normal, ausgerichtet wird über den Elternkasten. */
.knopf-neben{align-self:center;font-size:15px;color:var(--tinte-weich)}
/* inline-block mit Innenabstand: als reine Inline-Zeile wäre das Tippziel
   nur so hoch wie die Schrift — 19 px, verlangt sind 24. */
.knopf-neben a{display:inline-block;padding:5px 2px;
  color:inherit;font-weight:700;text-decoration:underline;
  text-decoration-color:var(--linie-stark);text-underline-offset:4px;
  transition:text-decoration-color var(--schnell)}
.knopf-neben a:hover{text-decoration-color:var(--oliv)}

/* Der Beleg steht NACH dem Knopf: er stützt die Entscheidung, er löst sie
   nicht aus. Klein und ruhig — 5.06:1 auf Papier. */
.hero-beleg{margin:var(--s5) 0 0;max-width:37rem;
  font-size:13.5px;line-height:1.5;color:var(--tinte-zart)}
.hero-bild{position:relative;overflow:hidden;background:var(--sand);min-height:300px}
/* Nur das Herofoto selbst — als direktes Kind. Ohne das > erwischt die
   Regel auch die Vorschaubilder der Artenliste in der Galerie, und acht
   Miniaturen legen sich absolut übereinander über die ganze Spalte. */
.hero-bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ein Hauch Verlauf an der Nahtstelle, damit das Foto nicht abgeschnitten
   wirkt, sondern aus der Textspalte herauswächst. */
.hero-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(19,18,16,.16),transparent 22%)}

/* --- Galerie-Hero: Liste statt Foto -------------------------------------
   In der rechten Herospalte steht auf der Galerie keine einzelne Aufnahme,
   sondern die acht Verlegearten. Der Schleier gehört zum Foto und wird
   hier abgeschaltet; die Spalte trägt stattdessen den tieferen Papierton,
   damit die weissen Zeilen darauf stehen können. */
.hero-bild--inhalt{
  background:var(--papier-tief);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3.2vw,52px) clamp(22px,3vw,52px);
  border-left:1px solid var(--linie);
}
.hero-bild--inhalt::after{display:none}

.arten-liste{list-style:none;margin:0;padding:0;display:grid;gap:7px;width:100%;max-width:520px}
.arten-liste a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;
  padding:9px 14px 9px 9px;border-radius:var(--rund-klein);
  background:var(--weiss);border:1px solid var(--linie);
  text-decoration:none;color:var(--tinte);
  transition:border-color var(--schnell),transform var(--schnell),box-shadow var(--schnell);
}
.arten-liste a:hover{border-color:var(--linie-stark);transform:translateX(3px);box-shadow:var(--schatten)}
.arten-bild{width:52px;height:52px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:var(--sand)}
.arten-bild img{width:100%;height:100%;object-fit:cover;display:block}
.arten-text b{display:block;font-family:var(--titel);font-size:15px;font-weight:800;line-height:1.2}
.arten-zahl{display:block;margin-top:2px;font-size:12.5px;color:var(--tinte-zart)}
.arten-liste .ikon{width:17px;height:17px;color:var(--oliv-text);flex:0 0 auto}

/* --- Hero als Karte — WS-HE-11 der Design Zentrale ----------------------
   Kein 50/50-Raster und auch nicht randlos über den ganzen Bildschirm: eine
   abgerundete Karte in Bahnbreite, das Bild darin, der Schleier trägt die
   Schrift. Unten stehen Titel links und Einwände, Knopf und Beleg rechts —
   auf einer Grundlinie.

   Nur am Bildschirm. Auf dem Telefon bleibt es beim Bild als Kasten mit dem
   Titel darin (mobil.css, 720px-Block); das ist eine eigene, abgenommene
   Entscheidung und kein Versehen. Darum steht der ganze Block in einer
   min-width-Abfrage — sonst schlügen diese Regeln mit ihrer höheren
   Spezifität auf dem Telefon durch. */
@media (min-width:721px){
  .hero--voll{
    display:flex;align-items:flex-end;position:relative;isolation:isolate;
    width:calc(100% - 2 * var(--luft));max-width:var(--bahn);
    margin:var(--s5) auto 0;
    border:0;border-radius:var(--rund-gross);overflow:hidden;
  }
  /* Höhe: sichtbarer Bereich abzüglich Kopf, Fussleiste und 100 px — die
     Karte soll atmen, nicht bis an beide Kanten stossen.

     Der Doppelname .hero.hero--voll ist Absicht: .hero--unter setzt dieselbe
     Eigenschaft und steht später in dieser Datei. Mit gleicher Spezifität
     gewinnt die spätere Regel — die Karte lief dadurch unten hinter die
     Fussleiste. */
  .hero.hero--voll{min-height:calc(100dvh - var(--kopf) - var(--fuss) - 100px)}
  /* aspect-ratio:auto ist kein Zierrat: unterhalb von 900 px gibt mobil.css
     dem Herobild 16/10. Absolut gesetzt bleibt es dann trotzdem auf diese
     Form beschränkt, deckt nur den oberen Teil der Karte — und die weisse
     Schrift steht darunter auf Papier. Am Tablet gemessen: 1.09:1. */
  .hero--voll .hero-bild{position:absolute;inset:0;z-index:-1;min-height:0;aspect-ratio:auto}
  /* Das Motiv steht rechts, der Text links — sonst schneidet der Text
     ins Gesicht. */
  .hero--voll .hero-bild > img{object-position:72% center}

  /* Der Schleier trägt die Schrift, nicht das Bild. Zwei Lagen: eine flache
     Grunddeckung, damit auch über hellem Granit oben genug Kontrast bleibt,
     und ein Verlauf nach unten, wo der Text steht. Gerechnet, nicht
     geschätzt: über reinem Weiss bleiben oben 5.7:1, unten über 15:1. */
  .hero--voll .hero-bild::after{
    background:
      linear-gradient(to top,rgba(10,9,8,.88) 0%,rgba(10,9,8,.62) 30%,
                              rgba(10,9,8,.24) 58%,rgba(10,9,8,0) 84%),
      rgba(19,18,16,.46);
  }

  /* Unten zwei Spalten auf einer Grundlinie: der Titel trägt links, das
     Handeln steht rechts. */
  .hero--voll .hero-text{
    display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:end;column-gap:clamp(28px,4vw,64px);
    width:100%;
    padding:clamp(88px,15vh,190px) clamp(28px,3.4vw,52px) clamp(30px,3vw,46px);
  }
  .hero--voll .hero-text > *{max-width:none}
  .hero--voll .hero-kopf{display:block}
  .hero-rechts{display:flex;flex-direction:column;gap:var(--s5);padding-bottom:5px}

  .hero--voll h1{color:#fff;margin:var(--s4) 0 0}
  .hero--voll .marke{color:rgba(255,255,255,.82)}
  .hero--voll .marke::before{background:var(--oliv-hell)}
  .hero--voll .krumen,.hero--voll .krumen a{color:rgba(255,255,255,.82)}
  .hero--voll .krumen [aria-current="page"]{color:#fff}
  /* Die Linie unter dem Titel hat auf dem Bild nichts zu suchen — die
     Fassung aus der Zentrale hat sie auch nicht. */
  .hero--voll .hero-linie{display:none}
  .hero--voll .lead{color:rgba(255,255,255,.88);margin:0}
  .hero--voll .einwaende{margin:0;flex-direction:column;gap:9px}
  .hero--voll .einwaende li{color:#fff}
  .hero--voll .einwand-haken{background:rgba(255,255,255,.22);color:#fff}
  .hero--voll .knopfgruppe{margin:0}
  .hero--voll .knopf-neben{color:rgba(255,255,255,.86)}
  .hero--voll .knopf-neben a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
  .hero--voll .knopf-neben a:hover{text-decoration-color:#fff}
  .hero--voll .hero-beleg{margin:0;color:rgba(255,255,255,.80)}
}

/* Kennzahlen als Grundlinie unter dem Herotext */
.kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s5);margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--linie)}
.kennzahl b{display:block;font-family:var(--titel);font-size:22px;font-weight:900;
  letter-spacing:-.02em;line-height:1.15}
.kennzahl span{display:block;font-size:12.5px;line-height:1.35;color:var(--tinte-zart);margin-top:3px}

/* Hero der Unterseiten: flacher, mit Brotkrumen */
.hero--unter{min-height:calc(100dvh - var(--kopf) - var(--fuss))}
.hero--unter h1{font-size:clamp(27px,3.2vw,42px)}

.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;
  color:var(--tinte-zart);margin-bottom:var(--s5)}
.krumen a{color:var(--tinte-zart)}
.krumen a:hover{color:var(--oliv-text)}
.krumen [aria-current="page"]{color:var(--tinte);font-weight:600}
.krumen span[aria-hidden]{opacity:.5}

/* --- 7 · Kacheln und Raster ---------------------------------------------- */
.raster{display:grid;gap:var(--s4)}
.raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .raster--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.kachel{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);border-radius:var(--rund);
  background:var(--papier);border:1px solid var(--linie);
  color:var(--tinte);
  transition:border-color var(--schnell),background var(--schnell),transform var(--schnell);
}
a.kachel:hover{border-color:var(--oliv);background:var(--weiss);color:var(--tinte);
  transform:translateY(-2px)}
a.kachel:active{transform:translateY(0) scale(.995)}
.kachel-ikon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--rund-klein);
  background:var(--oliv-blass);color:var(--oliv-text);font-size:23px}
.kachel h3{margin-top:var(--s2)}
.kachel p{font-size:14.5px;line-height:1.55;color:var(--tinte-weich);margin:0}
.kachel-mehr{margin-top:auto;padding-top:var(--s3);display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--oliv-text)}
.kachel-mehr .ikon{font-size:16px;transition:transform var(--ruhig)}
a.kachel:hover .kachel-mehr .ikon{transform:translateX(4px)}

.tafel--dunkel .kachel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff}
.tafel--dunkel .kachel p{color:rgba(255,255,255,.74)}
.tafel--dunkel .kachel-ikon{background:rgba(168,164,115,.16);color:var(--oliv-hell)}

/* --- 8 · Leistungsliste als Verzeichnis ---------------------------------- */
.spez{border-top:1px solid var(--linie)}
.spez-zeile{
  display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:var(--s5);
  padding:var(--s5) var(--s3);
  border-bottom:1px solid var(--linie);
  color:var(--tinte);
  transition:background var(--schnell),padding-left var(--ruhig);
}
a.spez-zeile:hover{background:var(--papier);color:var(--tinte);padding-left:var(--s5)}
.spez-nr{font-size:12px;font-weight:600;color:var(--oliv-text);letter-spacing:.08em;
  font-variant-numeric:tabular-nums}
.spez-ikon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--rund-klein);
  background:var(--oliv-blass);color:var(--oliv-text);font-size:21px}
.spez-inhalt b{display:block;font-family:var(--titel);font-size:20px;font-weight:800;
  letter-spacing:-.015em;line-height:1.2}
.spez-inhalt span{display:block;font-size:14.5px;line-height:1.5;color:var(--tinte-weich);margin-top:5px}
.spez-pfeil{font-size:20px;color:var(--tinte-zart);transition:transform var(--ruhig),color var(--schnell)}
a.spez-zeile:hover .spez-pfeil{transform:translateX(5px);color:var(--oliv-text)}

/* --- 9 · Text-Bild-Paar (in der Tafel, nicht randlos) -------------------- */
/* Zwei gleich hohe Hälften. Das Bild füllt seine Hälfte ganz aus, statt als
   kleiner Kasten darin zu schwimmen — deshalb `stretch` und ein absolut
   gesetztes Bild ohne feste Seitenverhältnisse. Ein Mindestmass gibt es
   trotzdem, damit es bei kurzem Text nicht zum Streifen wird. */
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);
  align-items:stretch}
.paar--gedreht .paar-bild{order:-1}
.paar-text{display:flex;flex-direction:column;justify-content:center}
.paar-bild{position:relative;border-radius:var(--rund);overflow:hidden;
  background:var(--sand);min-height:clamp(280px,32vw,460px)}
.paar-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Porträts von oben ausrichten — sonst schneidet der Zuschnitt den Kopf an. */
.paar-bild--portraet img{object-position:50% 20%}
/* `aspect-ratio` rechnet die fehlende Achse aus der vorhandenen. In einem
   gestreckten Rasterfeld ist das die HÖHE — ist die Textspalte höher als die
   Bildspalte breit, wird das Bild breiter als seine Spalte und schiebt sich
   über den Text. Deshalb `align-self:start` und eine feste Breite: die Höhe
   folgt der Breite, nicht umgekehrt. */
.paar-bild--quadrat{align-self:start;width:100%;min-height:0;aspect-ratio:1/1}
.paar h2{margin:var(--s4) 0 var(--s5)}

/* --- Text und Bild in einer Tafel: das Bild geht bis an die Kante --------
   Sitzt ein Paar in einer eingefassten Tafel, hat die Tafel selbst keine
   Polsterung mehr. Die bekommt allein die Textspalte; die Bildspalte läuft
   randlos bis an die Kante der Karte und über deren volle Höhe. So:

       Tafel            ohne Polsterung, schneidet ab
       └ Textspalte     mit Polsterung
       └ Bildspalte     ohne Polsterung, das Bild füllt sie ganz

   Vorher lag das Bild als gerundeter Kasten in einem gepolsterten Kasten —
   ein Rahmen um einen Rahmen, mit weissem Rand dazwischen.

   Der Zusatz `:not(:has(…))` hält die Regel von den Tafeln fern, die ihren
   Rahmen ohnehin schon verloren haben, weil ihr Inhalt aus Karten besteht.
   Dort gibt es keine Kante, an die etwas laufen könnte. */
.tafel:has(> .paar):not(:has(.kachel,.art-zeile,.gal-feld,.person)){padding:0;overflow:hidden}
.tafel:has(> .paar):not(:has(.kachel,.art-zeile,.gal-feld,.person)) > .paar{gap:0;align-items:stretch}
.tafel:has(> .paar):not(:has(.kachel,.art-zeile,.gal-feld,.person)) > .paar > .paar-text{padding:var(--tafel-luft)}
.tafel:has(> .paar):not(:has(.kachel,.art-zeile,.gal-feld,.person)) > .paar > .paar-bild{
  border-radius:0;min-height:100%;align-self:stretch;aspect-ratio:auto;
}
/* Einspaltig, über die volle Breite der Textsäule. Zwei Spalten waren der
   Versuch, die Säule kurz zu halten — sie haben aber jeden Punkt auf zwei
   bis drei Zeilen gebrochen und die Liste damit unruhiger gemacht als sie
   sein muss. Dass die Textsäule länger wird als das Bild, ist kein Problem
   mehr: das Bild läuft jetzt über die volle Höhe der Karte. */
.paar .merkmale li{font-size:14.5px}

.merkmale{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.merkmale li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  font-size:14.5px;line-height:1.5}
.merkmale .ikon{font-size:19px;color:var(--oliv-text);margin-top:1px}
.tafel--dunkel .merkmale .ikon{color:var(--oliv-hell)}

/* --- 10 · Ablauf ---------------------------------------------------------- */
.ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.schritt{padding:var(--s5);border-radius:var(--rund);background:var(--papier);
  border:1px solid var(--linie);position:relative}
.schritt-nr{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--oliv);color:#fff;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:var(--s4)}
.schritt h3{font-size:18px}
.schritt p{margin:var(--s2) 0 0;font-size:14.5px;line-height:1.55;color:var(--tinte-weich)}
.tafel--dunkel .schritt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.tafel--dunkel .schritt p{color:rgba(255,255,255,.74)}

/* --- 11 · Galerie --------------------------------------------------------- */
.gal-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.gal-feld{
  position:relative;display:block;padding:0;border:0;background:var(--sand);
  border-radius:var(--rund-klein);overflow:hidden;aspect-ratio:1/1;cursor:zoom-in;
  transition:transform var(--schnell);
}
.gal-feld img{width:100%;height:100%;object-fit:cover;transition:transform var(--ruhig)}
.gal-feld:hover img{transform:scale(1.045)}
.gal-feld:active{transform:scale(.985)}
.gal-feld::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(19,18,16,.08);
  border-radius:inherit;pointer-events:none}

/* Verlegeart als Zeile: links das Bild, rechts der Text.
   Schrift über einem Foto ist immer mühsam zu lesen — besonders über
   Baustellenaufnahmen, die weder ruhig noch gleichmässig hell sind. Das Bild
   bleibt also Bild, der Text steht daneben auf ruhigem Grund. */
.art-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.art-zeile{
  display:grid;grid-template-columns:clamp(120px,15vw,176px) 1fr;
  align-items:stretch;gap:0;
  border:1px solid var(--linie);border-radius:var(--rund);
  background:var(--weiss);overflow:hidden;color:var(--tinte);
  transition:border-color var(--schnell),transform var(--schnell),box-shadow var(--schnell);
}
.art-zeile:hover{border-color:var(--oliv);color:var(--tinte);transform:translateY(-2px);
  box-shadow:var(--schatten)}
.art-zeile:active{transform:translateY(0) scale(.995)}
.art-bild{position:relative;background:var(--sand);min-height:132px}
.art-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--ruhig)}
.art-zeile:hover .art-bild img{transform:scale(1.05)}
.art-text{padding:var(--s5);display:flex;flex-direction:column;gap:6px;min-width:0}
.art-text b{font-family:var(--titel);font-size:clamp(17px,1.5vw,20px);font-weight:800;
  letter-spacing:-.018em;line-height:1.2}
.art-text p{font-size:14px;line-height:1.5;color:var(--tinte-weich);margin:0}
.art-fuss{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3)}
.art-zahl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-zart)}
.art-fuss .ikon{font-size:17px;color:var(--oliv-text);transition:transform var(--ruhig)}
.art-zeile:hover .art-fuss .ikon{transform:translateX(4px)}
/* In einer offenen Tafel liegt die Zeile direkt auf dem Papier — dort trägt
   sie ihren eigenen weissen Grund, sonst verschwände sie. Auf einer weissen
   Tafel bekommt sie den Papierton, damit sie sich abhebt. */
.tafel:not(.tafel--offen):not(.tafel--dunkel) .art-zeile{background:var(--papier)}
.tafel--dunkel .art-zeile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
  color:#fff}
.tafel--dunkel .art-text p{color:rgba(255,255,255,.72)}

/* Leuchtkasten */
.lk{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(10,9,8,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(12px,3vw,48px)}
.lk[hidden]{display:none}
.lk-buehne{position:relative;max-width:min(1280px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:var(--s3);align-items:center}
.lk-bild{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;
  object-fit:contain;border-radius:var(--rund-klein);background:var(--stein-weich)}
.lk-titel{color:rgba(255,255,255,.86);font-size:14px;text-align:center;margin:0}
.lk-zaehler{color:rgba(255,255,255,.55);font-size:12.5px;font-variant-numeric:tabular-nums}
.lk-knopf{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);color:#fff;font-size:22px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background var(--schnell),transform var(--schnell);
}
.lk-knopf:hover{background:rgba(255,255,255,.2)}
.lk-knopf:active{transform:translateY(-50%) scale(.94)}
.lk-vor{right:calc(var(--s4) * -1)}
.lk-zurueck{left:calc(var(--s4) * -1)}
.lk-zu{position:fixed;top:clamp(12px,2.6vw,28px);right:clamp(12px,2.6vw,28px);
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);color:#fff;font-size:20px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lk-zu:hover{background:rgba(255,255,255,.2)}

/* --- 12 · Häufige Fragen -------------------------------------------------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-family:var(--titel);font-size:clamp(17px,1.5vw,21px);font-weight:800;
  letter-spacing:-.012em;line-height:1.3;
  min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq-zeichen{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linie-stark);color:var(--oliv-text);font-size:17px;
  transition:transform var(--ruhig),background var(--schnell),border-color var(--schnell)}
.faq summary:hover .faq-zeichen{background:var(--oliv-blass);border-color:var(--oliv)}
.faq details[open] .faq-zeichen{transform:rotate(45deg);background:var(--oliv);color:#fff;
  border-color:var(--oliv)}
.faq-antwort{padding:0 0 var(--s5);max-width:70ch}
.faq-antwort p{color:var(--tinte-weich);font-size:15.5px;margin:0}

/* --- 13 · Ansprechpartner ------------------------------------------------- */
.person{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.person-bild{width:clamp(120px,16vw,200px);aspect-ratio:1/1;border-radius:var(--rund);
  overflow:hidden;background:var(--sand);flex:0 0 auto}
.person-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* Vorstehende Fassung: das Porträt sitzt halb ausserhalb der Tafel und trägt
   einen Ring in der Papierfarbe. Dadurch liest es sich als Person, die aus
   der Fläche heraustritt, statt als weitere Kachel im Raster — dasselbe
   Prinzip wie die Ansprechperson bei ZL Räumungen, nur kantig statt rund. */
.person--vor{position:relative;align-items:end}
.person--vor .person-bild{
  width:clamp(160px,20vw,240px);
  /* Das Porträt hängt unten aus der Tafel heraus und trägt einen Ring in
     der Papierfarbe. Dadurch tritt die Person aus der Fläche, statt eine
     weitere Kachel im Raster zu sein. Der Abschnitt hält den Platz dafür
     frei — siehe .abschnitt--tief. */
  margin-bottom:calc((var(--tafel-luft) + 52px) * -1);
  border-radius:var(--rund-gross);
  box-shadow:0 0 0 9px var(--papier),0 26px 52px -18px rgba(10,9,8,.6);
}
.person--vor .person-inhalt{padding-bottom:var(--s3)}
/* Platz unter der Tafel, damit das vorstehende Porträt nicht in den
   nächsten Abschnitt ragt. */
.abschnitt--tief{padding-bottom:calc(var(--abstand) / 2 + 60px)}
@media (max-width:900px){
  .person--vor{align-items:center}
  .person--vor .person-bild{margin-bottom:calc((var(--tafel-luft) + 34px) * -1);
    box-shadow:0 0 0 7px var(--papier),0 18px 36px -14px rgba(10,9,8,.6)}
  .abschnitt--tief{padding-bottom:calc(var(--abstand) / 2 + 44px)}
}
.person-inhalt{min-width:0}
.person-name{font-family:var(--titel);font-size:clamp(20px,1.9vw,25px);font-weight:900;
  letter-spacing:-.02em;margin:0;line-height:1.15}
.person-rolle{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-zart);margin:6px 0 var(--s4);font-weight:600}
.tafel--dunkel .person-rolle{color:rgba(255,255,255,.66)}
.person-daten{display:flex;flex-wrap:wrap;gap:var(--s3)}
.person-daten a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:9px 15px;border-radius:var(--rund-klein);border:1px solid var(--linie-stark);
  font-size:14.5px;font-weight:550;color:var(--tinte);transition:border-color var(--schnell),background var(--schnell)}
.person-daten a:hover{border-color:var(--oliv);background:var(--oliv-blass);color:var(--oliv-tief)}
.person-daten .ikon{font-size:17px;color:var(--oliv-text)}
.tafel--dunkel .person-daten a{border-color:rgba(255,255,255,.24);color:#fff}
.tafel--dunkel .person-daten a:hover{border-color:var(--oliv-hell);background:rgba(255,255,255,.09);color:#fff}
.tafel--dunkel .person-daten .ikon{color:var(--oliv-hell)}

/* Zitat */
.zitat{margin:0;padding:var(--s6) 0 0;border-top:1px solid var(--linie)}
.zitat p{font-family:var(--titel);font-size:clamp(18px,1.8vw,24px);line-height:1.35;
  font-weight:800;letter-spacing:-.026em;margin:0}
.zitat footer{margin-top:var(--s4);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-zart);font-weight:600}
.tafel--dunkel .zitat{border-top-color:rgba(255,255,255,.14)}
.tafel--dunkel .zitat footer{color:rgba(255,255,255,.62)}

/* --- 14 · Datenblock ------------------------------------------------------ */
.daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin:0}
.daten--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.daten-feld dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-zart);font-weight:600;margin-bottom:7px}
.daten-feld dd{margin:0;font-size:16px;line-height:1.5}
.tafel--dunkel .daten-feld dt{color:rgba(255,255,255,.62)}

/* Ortsliste */
.orte{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.orte li{padding:7px 14px;border-radius:100px;border:1px solid var(--linie);
  background:var(--papier);font-size:13.5px;color:var(--tinte-weich)}
.tafel--dunkel .orte li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);
  color:rgba(255,255,255,.8)}

/* --- 15 · Handlungsaufruf ------------------------------------------------- */
.cta-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.cta-tafel{margin:0;padding:var(--s6);border-radius:var(--rund);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cta-tafel dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:600}
.cta-tafel dd{margin:5px 0 var(--s5)}
.cta-tafel dd a{font-family:var(--titel);font-size:22px;font-weight:800;color:#fff!important;
  letter-spacing:-.015em}
.cta-tafel .knopf{width:100%;margin-top:var(--s2)}

/* --- 16 · Feste Fussleiste ------------------------------------------------
   Schmaler dunkler Balken am unteren Fensterrand: Adresse links, Rechtliches
   und die Nummer rechts. Sie gibt der Seite unten einen Abschluss und ist die
   Bezugsgrösse, mit der der Hero seine Höhe rechnet. Auf dem Telefon entfällt
   sie — dort liegt die Reiterleiste unten.                                 */
/* Dieselbe Fläche wie die Kopfzeile: durchscheinendes Papier mit Unschärfe
   dahinter. Vorher war die Leiste schwarz — zwei verschiedene Rahmen um
   dieselbe Seite. Jetzt fasst oben und unten dasselbe Material ein.

   Der Deckungsgrad ist der, den die Kopfzeile im gescrollten Zustand
   annimmt (.92 statt .78): unter der Fussleiste läuft IMMER Inhalt durch,
   oft ein dunkles Foto. Bei .78 fiele dunkle Schrift darauf unter die
   Kontrastschwelle — geprüft wird das im Prüflauf, Sichtprüfung. */
.rahmen-fuss{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  height:var(--fuss);
  display:flex;align-items:center;gap:var(--s5);
  padding:0 var(--luft);
  background:rgba(247,245,240,.92);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  color:var(--tinte-weich);
  border-top:1px solid var(--linie);
  font-size:12.5px;
}
@media (prefers-reduced-transparency:reduce){
  .rahmen-fuss{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.rahmen-fuss .fuss-marke{display:inline-flex;align-items:center;gap:9px;color:var(--tinte-weich)}
.rahmen-fuss .fuss-marke b{color:var(--tinte);font-weight:650}
.rahmen-fuss .fuss-punkt{width:4px;height:4px;border-radius:50%;background:var(--oliv);flex:0 0 auto}
.fuss-leiste-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
.fuss-leiste-rechts a{color:var(--tinte-weich);display:inline-flex;align-items:center;gap:7px}
.fuss-leiste-rechts a:hover{color:var(--tinte)}
.fuss-leiste-tel{font-weight:650;color:var(--tinte)!important}
.fuss-leiste-tel .ikon{font-size:15px;color:var(--oliv-text)}

/* --- 16b · Die grosse Fusszeile im Inhalt --------------------------------
   Vier Bänder statt einer Linkliste: Werte, Hauptteil, häufig Gesuchtes und
   die Schlusszeile. Jedes Band trägt eine eigene Aufgabe — das macht den
   Fuss zu einem Abschnitt und nicht zu einem Anhängsel.                    */
.fussbereich{background:var(--stein);color:rgba(255,255,255,.76);margin-top:var(--abstand);
  --oliv-marke:#A8A473}

/* Band 1 · Werte */
.fuss-werte{border-bottom:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.22)}
.fuss-werte-in{max-width:var(--bahn);margin:0 auto;padding:var(--s6) var(--luft);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fuss-wert{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:0 var(--s5)}
.fuss-wert + .fuss-wert{border-left:1px solid rgba(255,255,255,.11)}
.fuss-wert:first-child{padding-left:0}
.fuss-wert:last-child{padding-right:0}
.fuss-wert .ikon{font-size:26px;color:var(--oliv-hell);margin-top:2px}
.fuss-wert b{display:block;font-family:var(--titel);font-size:16px;font-weight:800;
  letter-spacing:-.014em;color:#fff;line-height:1.2}
.fuss-wert span{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);
  margin-top:4px}

/* Band 2 · Hauptteil */
.fuss-haupt{max-width:var(--bahn);margin:0 auto;padding:var(--s9) var(--luft) var(--s8);
  display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1fr;gap:var(--s7)}
.fuss-logo{color:#fff;display:block;margin-bottom:var(--s5)}
.fuss-logo:hover{color:#fff}
.fuss-logo .logo-svg{height:42px}
.fuss-text{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.66);max-width:38ch;
  margin:0 0 var(--s6)}
.fuss-kontakt{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fuss-kontakt li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px}
.fuss-kontakt .ikon{font-size:17px;color:var(--oliv-hell);flex:0 0 auto;margin-top:3px}
.fuss-kontakt a{color:#fff;font-weight:600}
.fuss-kontakt a:hover{color:var(--oliv-hell)}
.fuss-kontakt .fuss-nummer{font-family:var(--titel);font-size:19px;font-weight:800;
  letter-spacing:-.018em}
.spalten-titel{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  font-weight:600;margin:0 0 var(--s4)}
.fuss-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fuss-spalte ul a{display:inline-flex;align-items:center;min-height:34px;
  font-size:14.5px;color:rgba(255,255,255,.76)}
.fuss-spalte ul a:hover{color:#fff}
/* Die Reihenfolge allein genügt hier nicht: `.fuss-spalte ul` ist
   spezifischer als `.fuss-orte` und würde das Raster durchdrücken. Deshalb
   trägt die Ausnahme dieselbe Spezifität. */
.fuss-spalte ul.fuss-orte{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.fuss-orte li{padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);font-size:12.5px;color:rgba(255,255,255,.76)}
.fuss-mehr{margin:var(--s4) 0 0;font-size:13.5px}
.fuss-mehr a{display:inline-flex;align-items:center;gap:7px;color:var(--oliv-hell);font-weight:600}
.fuss-mehr .ikon{font-size:15px;transition:transform var(--ruhig)}
.fuss-mehr a:hover .ikon{transform:translateX(4px)}

/* Band 3 · Häufig gesucht */
.fuss-gesucht{border-top:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.22)}
.fuss-gesucht-in{max-width:var(--bahn);margin:0 auto;padding:var(--s6) var(--luft);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:center}
.fuss-marken{display:flex;flex-wrap:wrap;gap:8px}
.fuss-marken a{padding:9px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);font-size:13px;color:rgba(255,255,255,.78);
  min-height:38px;display:inline-flex;align-items:center;
  transition:border-color var(--schnell),background var(--schnell),color var(--schnell)}
.fuss-marken a:hover{border-color:var(--oliv-hell);background:rgba(168,164,115,.16);color:#fff}

/* Band 4 · Schlusszeile */
.fuss-schluss{border-top:1px solid rgba(255,255,255,.11)}
.fuss-schluss-in{max-width:var(--bahn);margin:0 auto;padding:var(--s5) var(--luft);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);font-size:13px;color:rgba(255,255,255,.58)}
.fuss-recht{display:flex;flex-wrap:wrap;gap:var(--s5)}
.fuss-recht a,.fuss-recht button{color:rgba(255,255,255,.72);min-height:36px;
  display:inline-flex;align-items:center;background:none;border:0;padding:0;font:inherit}
.fuss-recht a:hover,.fuss-recht button:hover{color:#fff}
.fuss-copy,.fuss-umsetzung{margin:0}
.fuss-umsetzung a{color:var(--oliv-hell)}

/* --- 17 · Einblenden beim Scrollen ---------------------------------------
   Nur Deckkraft und ein kleiner Versatz — beides billig für den
   Compositor. Ohne Skript oder bei reduzierter Bewegung ist alles da.  */
[data-auf]{opacity:0;transform:translateY(14px);
  transition:opacity 520ms cubic-bezier(.32,.72,0,1),transform 520ms cubic-bezier(.32,.72,0,1)}
[data-auf="ja"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-auf]{opacity:1;transform:none;transition:none}
}
.kein-js [data-auf]{opacity:1;transform:none}

/* --- 18 · Fokus-Modus (Anfrageseite) --------------------------------------
   Nur das Formular. Keine Navigation, kein Megamenü, keine Reiterleiste
   und keine Fusszeile — wer hier ist, will die Anfrage abschicken.     */
.rahmen-kopf--fokus{justify-content:space-between;gap:var(--s4)}
.fokus-zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;
  border-radius:var(--rund-klein);font-size:14.5px;font-weight:550;color:var(--tinte)}
.fokus-zurueck:hover{background:var(--oliv-schleier);color:var(--tinte)}
.fokus-zurueck .ikon{font-size:19px}
.fokus-hinweis{margin-left:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-zart);font-weight:600}
body[data-fokus]{padding-bottom:0}
body[data-fokus] .rahmen-fuss{display:none}

/* =========================================================================
   Tony's Art Pflästerung — Module
   Einwilligungsfenster, Kartenplatzhalter und die Umsetzungsseite.
   Alles, was zwar auf mehreren Seiten vorkommt, aber nicht zum Grundraster
   des Gestaltungssystems gehört.
   ========================================================================= */

/* --- Einwilligung (MKurti-Standard) --------------------------------------- */
.ck-ov{
  position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(10,9,8,.60);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ck-ov[hidden]{display:none}
.ck-modal{
  width:min(560px,100%);max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--weiss);border-radius:var(--rund-gross);
  box-shadow:0 40px 90px -30px rgba(19,18,16,.5);
  padding:clamp(24px,4vw,36px);
}
.ck-titel{font-family:var(--titel);font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 var(--s3)}
.ck-text{font-size:14.5px;line-height:1.6;color:var(--tinte-weich);margin:0 0 var(--s5)}
.ck-liste{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.ck-zeile{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:start;
  padding:var(--s4);border:1px solid var(--linie);border-radius:var(--rund);background:var(--papier)}
.ck-zeile b{display:block;font-size:15px;font-weight:650;margin-bottom:3px}
.ck-zeile small{display:block;font-size:13px;line-height:1.5;color:var(--tinte-zart)}
.ck-schalter{position:relative;width:48px;height:28px;flex:0 0 auto;margin-top:2px}
.ck-schalter input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-bahn{position:absolute;inset:0;border-radius:100px;background:var(--linie-stark);
  transition:background var(--schnell);pointer-events:none}
.ck-bahn::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.24);transition:transform var(--ruhig)}
.ck-schalter input:checked ~ .ck-bahn{background:var(--oliv)}
.ck-schalter input:checked ~ .ck-bahn::after{transform:translateX(20px)}
.ck-schalter input:disabled ~ .ck-bahn{background:var(--oliv);opacity:.45}
.ck-schalter input:focus-visible ~ .ck-bahn{outline:3px solid var(--oliv);outline-offset:3px}
.ck-knoepfe{display:grid;gap:var(--s2)}
.ck-knoepfe .knopf{width:100%}

/* --- Kartenplatzhalter ----------------------------------------------------
   Die Karte lädt erst nach Zustimmung. Vorher steht hier ein Kasten, der
   erklärt, was passiert — kein leeres Feld und kein stiller Nachladevorgang. */
.karte-zone{border-radius:var(--rund);overflow:hidden;background:var(--papier-tief);
  border:1px solid var(--linie);aspect-ratio:16/10}
.karte-zone iframe{width:100%;height:100%;border:0;display:block}
.karte-platz{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s4);text-align:center;padding:var(--s6)}
.karte-platz .ikon{font-size:34px;color:var(--oliv-text)}
.karte-platz p{max-width:44ch;font-size:14.5px;color:var(--tinte-weich);margin:0}

/* --- Umsetzungsseite ------------------------------------------------------ */
.mk-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.mk-liste li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4) var(--s5);border-radius:var(--rund);border:1px solid var(--linie);
  background:var(--papier)}
.mk-liste .ikon{font-size:20px;color:var(--oliv-text);margin-top:3px}
.mk-liste b{display:block;font-size:15.5px;font-weight:650;margin-bottom:2px}
.mk-liste span{display:block;font-size:14px;line-height:1.55;color:var(--tinte-weich)}
.mk-liste a{font-weight:600}
.tafel--dunkel .mk-liste li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.tafel--dunkel .mk-liste span{color:rgba(255,255,255,.72)}
.tafel--dunkel .mk-liste .ikon{color:var(--oliv-hell)}

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext{max-width:76ch}
.rechtstext h2{font-size:clamp(21px,2vw,27px);margin:var(--s8) 0 var(--s4)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:17px;margin:var(--s6) 0 var(--s3)}
.rechtstext p,.rechtstext li{font-size:15.5px;line-height:1.7;color:var(--tinte-weich)}
.rechtstext ul{padding-left:1.2em;margin:0 0 var(--s4)}
.rechtstext li{margin-bottom:6px}
.rechtstext address{font-style:normal;line-height:1.7;color:var(--tinte-weich);font-size:15.5px}

/* --- Fehlerseite ---------------------------------------------------------- */
.fehler{min-height:calc(100dvh - var(--kopf) - 200px);display:grid;place-items:center;
  text-align:center;padding:var(--abstand) 0}
.fehler-zahl{font-family:var(--titel);font-size:clamp(76px,16vw,180px);font-weight:900;
  line-height:.9;letter-spacing:-.045em;color:var(--oliv);margin:0 0 var(--s5)}
.fehler .knopfgruppe{justify-content:center;margin-top:var(--s6)}

/* =========================================================================
   Tony's Art Pflästerung — Zwischengrössen und der Telefon-Entwurf

   Auf dem Telefon ist es kein verkleinerter Bildschirmentwurf, sondern eine
   eigene Oberfläche: durchscheinender Kopfbalken, feste Reiterleiste unten,
   zwei aufziehende Blätter. Inhalte, Texte und Adressen sind exakt dieselben
   — es gibt nur ein zweites Kleid, keine zweite Seitenstruktur.

   GRUNDREGEL (MKurti-Standard): Alles, was paarweise nebeneinander passt,
   steht auf dem Telefon nebeneinander. Zwei gestapelte Knöpfe kosten rund
   120 Pixel Höhe, nebeneinander 56. Einspaltig bleibt nur, was inhaltlich
   eine Reihenfolge hat.
   ========================================================================= */

/* --- Tablet und schmaler Bildschirm -------------------------------------- */
@media (max-width:1080px){
  /* Zwei Spalten: die senkrechte Linie sitzt jetzt in der Mitte, die
     zweite Reihe bekommt zusätzlich eine waagrechte. */
  .mega-innen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .mega-eintrag{border-left:1px solid var(--linie);padding:0 var(--s5)}
  .mega-eintrag:nth-child(2n+1){border-left:0;padding-left:0}
  .mega-eintrag:nth-child(2n){padding-right:0}
  .mega-eintrag:nth-child(n+3){border-top:1px solid var(--linie);padding-top:var(--s5)}
  .fuss-haupt{grid-template-columns:1fr 1fr;gap:var(--s6);padding-top:var(--s8)}
  .fuss-spalte--marke{grid-column:1/-1}
  .fuss-werte-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  .fuss-wert{padding:0}
  .fuss-wert + .fuss-wert{border-left:0}
  .fuss-wert:nth-child(n+3){padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.11)}
  .fuss-gesucht-in{grid-template-columns:1fr;gap:var(--s4)}
  .gal-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .art-raster{grid-template-columns:1fr}
}

@media (max-width:900px){
  /* Hero: Foto oben, Text darunter — die 50/50-Idee kippt in die Senkrechte */
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-bild{order:-1;aspect-ratio:16/10;min-height:0}
  .hero-bild::after{background:linear-gradient(to bottom,rgba(19,18,16,.14),transparent 30%)}
  .hero-text{padding:clamp(28px,6vw,48px) var(--luft)}
  .hero-text > *{max-width:none}
  .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}

  .paar{grid-template-columns:1fr;gap:var(--s6)}
  .paar--gedreht .paar-bild{order:0}
  .paar-bild{aspect-ratio:16/10}
  .cta-raster{grid-template-columns:1fr;gap:var(--s6)}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person{grid-template-columns:1fr;text-align:left}
  .person-bild{width:clamp(110px,26vw,150px)}
  .person--vor .person-bild{width:clamp(130px,30vw,190px)}
  .daten--drei{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Der Telefon-Entwurf -------------------------------------------------- */
@media (max-width:720px){
  :root{
    --luft:22px;               /* ein einziger Seitenrand für alles */
    --kopf:var(--kopf-mobil);
    --rund-gross:20px;
    --rund:14px;
    --tafel-luft:22px;
    --abstand:34px;
  }

  body{
    font-size:15.5px;
    padding-top:var(--kopf-mobil);
    /* Platz für die feste Reiterleiste, Safe-Area eingerechnet */
    padding-bottom:calc(var(--reiter) + env(safe-area-inset-bottom,0px));
  }
  /* Unten ist nur Platz für eine Leiste. Auf dem Telefon gewinnt die
     Reiterleiste — sie ist ein Bedienelement, die Fussleiste nur Beiwerk.
     Die Hero-Höhe rechnet deshalb mit der Reiterleiste statt mit --fuss. */
  .rahmen-fuss{display:none}
  body[data-fokus]{padding-bottom:0}

  /* Titel eine Stufe zurück — grosse Titel wirken auf dem Telefon laut
     und fressen Höhe. */
  /* Ausserhalb des Heros sind die Titel eine Stufe kleiner — auf einem
     375 px breiten Schirm wirkt ein 21-px-Titel laut, nicht wichtig. */
  h1{font-size:25px;letter-spacing:-.024em}
  h2{font-size:18.5px;letter-spacing:-.018em}
  h3{font-size:16.5px}
  h4{font-size:15.5px}
  .lead{font-size:15.5px;line-height:1.55}
  .marke{font-size:10.5px;letter-spacing:.14em}
  .marke::before{width:16px}
  .kopfzeile{margin-bottom:var(--s5)}
  .kopfzeile h2{margin:var(--s3) 0 var(--s3)}
  .kopf-reihe{gap:var(--s4);margin-bottom:var(--s5)}
  .kopf-reihe .knopfgruppe{width:100%}

  /* --- Kopfbalken: durchscheinend, hell, mit zwei Tippzielen rechts --- */
  .rahmen-kopf{height:var(--kopf-mobil);padding:0 var(--luft);gap:var(--s3)}
  .haupt-nav,.kopf-trenner,.kopf-ic,.kopf-cta{display:none}
  .logo-svg{height:30px}
  .app-kopf{display:flex;align-items:center;gap:8px;margin-left:auto}
  .app-kopf a{
    width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
    border:1px solid var(--linie);background:var(--weiss);color:var(--tinte);font-size:18px;
  }
  .app-kopf a.ist-tat{background:var(--stein);border-color:var(--stein);color:#fff}
  .app-kopf a:active{transform:scale(.94)}

  /* --- Hero: das Bild ist der Kasten ----------------------------------
     Der Titel sitzt IM Bild, unten links, 20 px Rand. Alles danach steht
     darunter auf dem Papier: erst der Text, dann die beiden Knöpfe —
     ohne zweite Einfassung. Eine Karte, die den ganzen Hero umschliesst,
     wäre ein Kasten um Bild und Text zugleich; genau das soll weg.

     Gemacht mit einem Raster: `.hero-text` reicht seine Kinder durch
     (display:contents), das Bild und der Titelblock liegen beide in
     Zeile 1 übereinander, Text, Knöpfe und Kennzahlen fallen von selbst
     in die Zeilen darunter. */
  .hero{
    display:grid;
    grid-template-columns:1fr;
    margin:0 var(--luft) var(--s6);
    border:0;background:transparent;min-height:0;
  }
  /* Beide Einfassungen sind auf dem Telefon durchsichtig: Bild, Titel,
     Text und Knöpfe müssen als Geschwister im Heroraster liegen,
     damit der Titel ins Bild rücken kann. */
  .hero-text,.hero-rechts{display:contents}

  .hero-bild{
    grid-row:1;grid-column:1;
    position:relative;inset:auto;order:0;
    aspect-ratio:4/5;
    border-radius:var(--rund-gross);overflow:hidden;
  }
  /* Der Verlauf deckt genau den Bereich, in dem der Titelblock sitzt —
     oben bleibt das Foto Foto. Die Werte sind nicht geschätzt: der
     Titelblock nimmt bei 4/5-Bild rund die unteren 45 Prozent ein,
     und weisse Schrift braucht dort mindestens 70 Prozent Deckung,
     damit sie auch über hellem Granit sicher lesbar bleibt. */
  .hero-bild::after{background:linear-gradient(to top,
    rgba(10,9,8,.92) 0%,rgba(10,9,8,.80) 26%,rgba(10,9,8,.44) 48%,transparent 72%)}

  .hero-kopf{
    display:block;
    grid-row:1;grid-column:1;
    align-self:end;z-index:2;
    padding:20px;color:#fff;
  }
  .hero-kopf h1{color:#fff;margin:var(--s3) 0 0;font-size:25px;line-height:1.08}
  .hero-kopf .marke{color:rgba(255,255,255,.8)}
  .hero-kopf .marke::before{background:var(--oliv-hell)}
  /* Die Krumenleiste sitzt am oberen Rand des Verlaufs, wo das Foto noch
     durchkommt — deshalb heller als am Bildschirm. */
  .hero-kopf .krumen{color:rgba(255,255,255,.86);margin-bottom:var(--s3)}
  .hero-kopf .krumen a{color:rgba(255,255,255,.86)}
  .hero-kopf .krumen [aria-current="page"]{color:#fff}
  /* Die Linie unter dem Titel hat im Bild nichts zu suchen — der
     Bildrand trennt bereits. */
  .hero-kopf .hero-linie{display:none}

  /* Galerie: rechts steht kein Foto, sondern die Artenliste — also gibt es
     nichts, worin der Titel liegen könnte. Dort bleibt der Kopf gewöhnlicher
     Text auf Papier, und die Liste rückt unter die Knöpfe. */
  .hero:has(.hero-bild--inhalt) .hero-kopf{
    grid-row:auto;align-self:auto;z-index:auto;padding:0;color:inherit;
  }
  .hero:has(.hero-bild--inhalt) .hero-kopf h1{color:var(--tinte)}
  .hero:has(.hero-bild--inhalt) .hero-kopf .marke{color:var(--oliv-text)}
  .hero:has(.hero-bild--inhalt) .hero-kopf .marke::before{background:var(--oliv)}
  .hero:has(.hero-bild--inhalt) .hero-kopf .krumen,
  .hero:has(.hero-bild--inhalt) .hero-kopf .krumen a{color:var(--tinte-zart)}
  .hero:has(.hero-bild--inhalt) .hero-kopf .krumen [aria-current="page"]{color:var(--tinte)}
  .hero-bild--inhalt{
    grid-row:auto;grid-column:1;order:0;
    aspect-ratio:auto;border:0;border-radius:0;background:none;padding:var(--s6) 0 0;
  }
  .hero-bild--inhalt .arten-liste{max-width:none}

  /* Unterhalb des Bildes: normales Papier, normale Schriftfarben. */
  .hero .lead{
    grid-column:1;
    margin:var(--s5) 0 var(--s5);
    font-size:15px;line-height:1.55;color:var(--tinte-weich);
  }
  .hero .knopfgruppe{grid-column:1}
  .hero--unter{min-height:0}
  .kennzahlen{
    grid-column:1;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);
    margin-top:var(--s6);padding-top:var(--s5);border-top-color:var(--linie);
  }
  .kennzahl b{font-size:18px;color:var(--tinte)}
  .kennzahl span{font-size:11px;color:var(--tinte-zart);line-height:1.35}

  /* --- Knopfpaare stehen NEBENEINANDER --------------------------------
     Als Zweispalter, nicht als flex-wrap: flex-wrap bricht um, sobald es
     eng wird. Ein einzelner oder ungerader letzter Knopf nimmt die volle
     Breite, sonst hängt ein halber Knopf im Raum. */
  .knopfgruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .knopfgruppe > .knopf{
    min-width:0;width:auto;flex:none;
    min-height:48px;padding:11px 10px;
    font-size:12.5px;letter-spacing:.02em;gap:6px;
  }
  .knopfgruppe > .knopf .ikon{font-size:16px}
  .knopfgruppe > .knopf:last-child:nth-child(odd){grid-column:span 2}

  /* --- Tafeln und Raster ---------------------------------------------- */
  .abschnitt{padding:var(--abstand) 0}
  .tafel{border-radius:var(--rund-gross)}
  .raster{gap:10px}
  /* --- Kacheln sind auf dem Telefon Zeilen ----------------------------
     Zwei Spalten lassen auf 375 px je rund 140 px Textbreite. Das genügt
     für ein Schlagwort, nicht für «Randabschlüsse & Einfassungen» samt
     Satz darunter: der Titel bricht dreizeilig um, die Silbentrennung
     zerlegt Wörter, und die Kacheln werden verschieden hoch.

     Eine Zeile je Kachel — Symbol links, Titel und Text rechts — ist
     nicht nur ruhiger, sie ist auch KÜRZER als das Raster mit den
     umgebrochenen Titeln. Die Regel der mobilen Kompaktheit gilt
     weiter; der Massstab ist, ob es passt, nicht ob es geht. */
  .raster--2,.raster--3,.raster--4{grid-template-columns:1fr}
  .raster{gap:9px}
  .kachel{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:2px 13px;align-items:start;
    padding:14px 15px;border-radius:var(--rund);
  }
  .kachel-ikon{grid-column:1;grid-row:1/span 3;align-self:start;
    width:38px;height:38px;font-size:20px;border-radius:9px}
  .kachel h3{grid-column:2;grid-row:1;margin:0;font-size:16px;line-height:1.25;
    overflow-wrap:normal;hyphens:none}
  .kachel p{grid-column:2;grid-row:2;margin-top:3px;font-size:13px;line-height:1.45}
  .kachel-mehr{grid-column:2;grid-row:3;margin-top:7px;padding-top:0;font-size:12.5px}
  /* Die hervorgehobene erste Kachel gibt es auf dem Telefon nicht mehr:
     drei verschiedene Kachelformate untereinander lesen sich als Fehler,
     nicht als Betonung. */
  .raster > .kachel.kachel--gross h3{font-size:16px}

  /* Ablauf und Kennzahlen zu zweit */
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .schritt{padding:14px;border-radius:var(--rund)}
  .schritt-nr{width:26px;height:26px;font-size:11.5px;margin-bottom:10px}
  .schritt h3{font-size:14.5px;overflow-wrap:break-word;hyphens:auto}
  .schritt p{font-size:12.5px;line-height:1.45}

  .daten,.daten--drei{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .daten-feld dt{font-size:10.5px;letter-spacing:.12em}
  .daten-feld dd{font-size:14.5px}
  .daten-feld dd a{display:inline-flex;align-items:center;min-height:32px}
  .orte li{padding:6px 11px;font-size:12.5px}

  /* Leistungsverzeichnis wird ein Zweierraster */
  .spez{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-top:0}
  .spez-zeile{
    grid-template-columns:1fr;align-content:start;gap:9px;
    padding:15px;border:1px solid var(--linie);border-radius:var(--rund);
    background:var(--papier);
  }
  a.spez-zeile:hover{padding-left:15px}
  .spez-nr{font-size:10.5px}
  .spez-ikon{width:34px;height:34px;font-size:18px;border-radius:9px}
  .spez-inhalt b{font-size:14.5px;overflow-wrap:break-word;hyphens:auto}
  .spez-inhalt span{font-size:12.5px;line-height:1.45;margin-top:4px}
  .spez-pfeil{display:none}

  /* Text und Bild */
  .paar{gap:var(--s5)}
  .paar h2{margin:var(--s3) 0 var(--s4)}
  .paar-bild{min-height:0;aspect-ratio:16/10}
  .paar .merkmale{grid-template-columns:1fr;gap:10px}
  .merkmale{gap:10px;margin-top:var(--s4)}
  .merkmale li{font-size:14px;gap:10px}
  .merkmale .ikon{font-size:17px}

  /* Galerie: zwei Spalten fürs Bildraster */
  .gal-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  /* Verlegearten bleiben Zeilen — untereinander, aber je Zeile Bild links
     und Text rechts. Zwei solcher Zeilen nebeneinander wären auf 390 px
     eine Textspalte von 70 px, und darin bricht jedes Wort. */
  .art-raster{grid-template-columns:1fr;gap:9px}
  .art-zeile{grid-template-columns:104px 1fr;border-radius:var(--rund)}
  .art-bild{min-height:104px}
  .art-text{padding:12px 13px;gap:4px}
  .art-text b{font-size:14.5px}
  .art-text p{font-size:12.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .art-fuss{padding-top:6px}
  .art-zahl{font-size:10.5px}

  /* Leuchtkasten: Knöpfe unten nebeneinander, nicht am Bildrand */
  .lk{padding:12px}
  .lk-bild{max-height:calc(100dvh - 210px)}
  .lk-knopf{position:static;transform:none;width:52px;height:52px}
  .lk-knopf:active{transform:scale(.94)}
  .lk-steuerung{display:flex;align-items:center;justify-content:center;gap:var(--s5)}

  /* Fragen */
  .faq summary{font-size:15.5px;padding:15px 0;gap:12px;min-height:52px}
  .faq-zeichen{width:28px;height:28px;font-size:15px}
  .faq-antwort{padding-bottom:15px}
  .faq-antwort p{font-size:14px}

  /* Person und Zitat */
  .person{gap:var(--s4)}
  .person-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .person-daten a{min-height:46px;padding:8px 11px;font-size:12.5px;justify-content:center}
  .person-daten a:last-child:nth-child(odd){grid-column:span 2}
  .zitat{padding-top:var(--s5)}
  .zitat p{font-size:18px;line-height:1.35}

  .cta-tafel{padding:18px}
  .cta-tafel dd a{font-size:18px;display:inline-flex;align-items:center;min-height:44px}
  .cta-tafel dd a[href^="mailto"]{font-size:15px;overflow-wrap:anywhere}
  /* Verweise im Fliesstext der Umsetzungsseite bekommen Luft, damit sie
     auch mit dem Finger sicher zu treffen sind. */
  .mk-liste a{display:inline-block;padding:3px 0;min-height:24px}

  /* --- Fusszeile: Bänder werden Zweierreihen ------------------------- */
  .fussbereich{margin-top:var(--abstand)}
  .fuss-werte-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:var(--s5) var(--luft)}
  .fuss-wert{grid-template-columns:1fr;gap:7px;padding:0}
  .fuss-wert + .fuss-wert{border-left:0}
  .fuss-wert:nth-child(n+3){padding-top:0;border-top:0}
  .fuss-wert .ikon{font-size:21px}
  .fuss-wert b{font-size:13.5px;overflow-wrap:break-word;hyphens:auto}
  .fuss-wert span{font-size:11.5px;line-height:1.35}

  .fuss-haupt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5);
    padding:var(--s7) var(--luft) var(--s6)}
  .fuss-spalte--marke{grid-column:1/-1}
  .fuss-logo .logo-svg{height:34px}
  .fuss-text{font-size:13px;max-width:none;margin-bottom:var(--s5)}
  /* Der direkte Draht steht zuoberst und als Zweierraster — Anrufen und
     Schreiben sind auf dem Telefon die zwei Handlungen, die zählen. */
  .fuss-kontakt{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fuss-kontakt li{padding:10px 11px;border-radius:11px;font-size:12.5px;min-height:48px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);align-items:center}
  .fuss-kontakt li:nth-child(n+3){grid-column:span 2}
  .fuss-kontakt .ikon{margin-top:0}
  .fuss-kontakt .fuss-nummer{font-size:13.5px;white-space:nowrap}
  .fuss-kontakt li a{overflow-wrap:anywhere}
  .spalten-titel{font-size:10.5px;margin-bottom:9px}
  .fuss-spalte ul a{font-size:12.5px;min-height:38px}
  .fuss-orte li{padding:5px 9px;font-size:11.5px}
  .fuss-mehr{font-size:12.5px}

  .fuss-gesucht-in{grid-template-columns:1fr;gap:11px;padding:var(--s5) var(--luft)}
  .fuss-marken{gap:7px}
  .fuss-marken a{padding:8px 11px;font-size:12px;min-height:36px}

  .fuss-schluss-in{padding:var(--s5) var(--luft);gap:11px;font-size:11.5px}
  .fuss-recht{gap:14px;width:100%}
  .fuss-recht a,.fuss-recht button{font-size:12px;min-height:34px}

  /* Rechtstexte */
  .rechtstext h2{font-size:18px;margin-top:var(--s6)}
  .rechtstext p,.rechtstext li{font-size:14px}
}

/* --- Reiterleiste und Blätter -------------------------------------------- */
.app-reiter,.app-blatt,.app-schleier{display:none}

@media (max-width:720px){
  /* Die Leiste liegt ÜBER dem Blatt (76 gegen 75). Sonst deckt das offene
     Menü den Knopf zu, mit dem man es geöffnet hat — und der zweite Tipp,
     die natürlichste Geste zum Schliessen, ginge ins Leere. */
  .app-reiter{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:76;
    height:calc(var(--reiter) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    /* Deckender als der Kopfbalken: unter der Leiste läuft Inhalt durch,
       und bei 88 Prozent liest man die Zeile darunter als Geisterschrift
       mit. 96 Prozent lassen die Materialwirkung, nehmen aber den Text. */
    background:rgba(247,245,240,.96);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--linie);
  }
  .app-reiter > *{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;padding:0;min-height:44px;
    font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--tinte-zart);
    transition:color var(--schnell);
  }
  .app-reiter > *:active{color:var(--oliv-tief)}
  .app-reiter .reiter-ic{font-size:22px;line-height:1}
  .app-reiter [aria-current="page"]{color:var(--tinte)}
  .app-reiter .ist-tat{color:var(--oliv-tief)}
  .app-reiter [aria-expanded="true"]{color:var(--tinte)}

  @media (prefers-reduced-transparency:reduce){
    .app-reiter{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none}
  }

  .app-schleier{display:block;position:fixed;inset:0;z-index:74;background:rgba(10,9,8,.5);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .app-schleier[hidden]{display:none}

  .app-blatt{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:75;
    max-height:min(82dvh,720px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--weiss);
    border-radius:var(--rund-gross) var(--rund-gross) 0 0;
    box-shadow:0 -18px 48px -18px rgba(10,9,8,.42);
    padding:10px var(--luft)
            calc(var(--reiter) + env(safe-area-inset-bottom,0px) + 14px);
  }
  .app-blatt[hidden]{display:none}
  .app-blatt-griff{display:block;width:38px;height:4px;border-radius:4px;background:var(--linie-stark);
    margin:0 auto 12px}
  .app-blatt-titel{font-family:var(--titel);font-size:19px;font-weight:800;letter-spacing:-.024em;
    margin:0 0 12px}

  /* Zeilen des Leistungsblattes — ausdrücklich NICHT im Menü-Blatt, sonst
     greifen sie dort auf jeden Verweis durch und sprengen das Kachelraster. */
  .app-blatt:not(.app-blatt--menue) a{
    display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
    padding:11px 0;border-top:1px solid var(--linie);color:var(--tinte);min-height:56px;
  }
  .app-blatt:not(.app-blatt--menue) a:first-of-type{border-top:0}
  .app-blatt-ic{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
    background:var(--oliv-blass);color:var(--oliv-text);font-size:20px}
  .app-blatt b{display:block;font-size:14.5px;font-weight:650}
  .app-blatt small{display:block;font-size:12px;color:var(--tinte-zart);margin-top:1px}
  .app-blatt > a > .ikon:last-child{font-size:18px;color:var(--tinte-zart)}

  /* Menü-Blatt */
  .menue-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
  .menue-kopf .app-blatt-titel{margin-bottom:12px}
  .menue-zu{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
    border:1px solid var(--linie);background:var(--papier);color:var(--tinte);font-size:17px;
    margin-bottom:12px}
  .menue-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .menue-kachel{display:block;padding:13px;border-radius:var(--rund);border:1px solid var(--linie);
    background:var(--papier);color:var(--tinte);min-height:88px}
  .menue-kachel[aria-current="page"]{border-color:var(--oliv);background:var(--oliv-blass)}
  .menue-ic{display:block;font-size:21px;color:var(--oliv-text);margin-bottom:7px}
  .menue-kachel b{display:block;font-size:14px;font-weight:650}
  .menue-kachel small{display:block;font-size:11.5px;color:var(--tinte-zart);margin-top:2px}
  .menue-tat{display:grid!important;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
    margin-top:9px;padding:13px!important;border-radius:var(--rund);border:0!important;
    background:var(--stein);color:#fff!important;font-size:14.5px;font-weight:600;min-height:52px}
  .menue-tat .ikon{font-size:19px}
  .menue-rubrik{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tinte-zart);font-weight:600;margin:var(--s5) 0 9px}
  .menue-kurzraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .menue-kurz{display:grid!important;grid-template-columns:auto 1fr;gap:9px;align-items:center;
    padding:10px 12px!important;border:1px solid var(--linie)!important;border-radius:11px;
    background:var(--papier);color:var(--tinte)!important;font-size:12.5px;font-weight:550;
    min-height:46px}
  .menue-kurz .ikon{font-size:17px;color:var(--oliv-text)}
  .menue-draht{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .menue-draht a{display:grid!important;grid-template-columns:auto 1fr;gap:9px;align-items:center;
    padding:11px 12px!important;border:1px solid var(--linie)!important;border-radius:11px;
    background:var(--papier);color:var(--tinte)!important;font-size:12.5px;min-height:48px}
  .menue-draht .ikon{font-size:17px;color:var(--oliv-text)}
  .menue-draht span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menue-recht{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);
    padding-top:var(--s4);border-top:1px solid var(--linie)}
  .menue-recht a{font-size:12.5px;color:var(--tinte-zart)!important;min-height:40px;
    display:inline-flex;align-items:center;border:0!important;padding:0!important;background:none}
}

/* --- Sehr schmale Geräte -------------------------------------------------- */
@media (max-width:359px){
  :root{--luft:16px;--tafel-luft:17px}
  .knopfgruppe > .knopf{font-size:11.5px;padding:11px 7px;gap:5px}
  .kachel p{font-size:12px}
  .logo-svg{height:27px}
}

/* --- Zeigegeräte ohne Hover ----------------------------------------------- */
@media (hover:none){
  a.kachel:hover{transform:none}
  .gal-feld:hover img{transform:none}
  .gal-karte:hover img{transform:none}
  a.spez-zeile:hover{padding-left:var(--s3)}
}

/* --- Druck ---------------------------------------------------------------- */
@media print{
  .rahmen-kopf,.app-reiter,.app-blatt,.app-schleier,.mega,.ck-ov,.lk,.sprung{display:none!important}
  body{padding:0;background:#fff;font-size:11pt}
  .tafel{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .hero{min-height:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}