/* ==========================================================================
   Schreinerei Keller & Vogt, Landingpage
   Gestaltung aus der Architektur- und Innenarchitekturszene:
   Hairline-Raster, klare Kanten, kein Radius, kein weicher Schatten,
   reduzierte Farbigkeit, viel Weissraum.
   Eigenstaendiges Stylesheet, unabhaengig von ../css/styles.css.
   ========================================================================== */

:root{
  --papier:   #f3f2ef;   /* Putz */
  --weiss:    #fbfbfa;
  --sand:     #e9e7e2;
  --tinte:    #15161a;   /* Fast-Schwarz */
  --kohle:    #1c1e22;   /* dunkle Flaeche */
  --text:     #3b3e44;
  /* Der zweite Textton traegt den halben Fliesstext der Seite, deshalb ist er
     so dunkel gewaehlt, dass er auf Putz und auf Sand die 4,5:1 nach WCAG AA
     erreicht (4,98 und 4,51). */
  --muted:    #66686e;
  --linie:    #d5d3cd;
  /* Auf Sand wirkt dieselbe Haarlinie schwaecher. Dieser Ton gleicht das aus,
     damit das Raster auf beiden Gruenden gleich stark liest. */
  --linie-sand: #cbc9c5;
  --linie-2:  rgba(255,255,255,.16);
  /* Einziger Akzent, sehr zurueckhaltend. Auch dieser Ton traegt kleine
     Schriftgrade (Label, Tag, Schrittnummer) und erreicht AA auf beiden
     hellen Gruenden. */
  --stein:    #6f675b;

  /* Toene der dunklen Flaechen und der Fusszeile */
  --dunkel-text:  #a9abb1;
  --dunkel-lead:  #c6c8cd;
  --dunkel-stein: #9b9384;   /* Akzent und Fokusring auf Dunkel */
  --dunkel-leise: #82858b;   /* kleinste Schriftgrade, knapp ueber AA */
  --dunkel-tief:  #24262b;   /* Platzhalterflaeche im dunklen Abschnitt */
  --fuss-text:    #8e9197;
  --fuss-link:    #d3d5d9;

  --orange:   #ff6700;   /* nur im Logo, sonst nirgends */

  --luecke: clamp(10px,1.4vw,18px);   /* Abstand in den Collagen */
  --breite: 1280px;
  --gutter: 24px;
  --idx: 132px;          /* Breite der Index-Spalte */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:'Mukta',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:'Mukta',system-ui,sans-serif;
  color:var(--tinte);
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.5rem,7vw,5.4rem); font-weight:500; line-height:1.02; letter-spacing:-.038em; }
h2{ font-size:clamp(1.8rem,3.9vw,3.1rem); font-weight:500; line-height:1.08; letter-spacing:-.032em; }
h3{ font-size:clamp(1.12rem,1.9vw,1.35rem); font-weight:600; line-height:1.24; letter-spacing:-.016em; }

/* Zweiter Ton in den Ueberschriften. Das Muster aus der ersten Ueberschrift
   zieht sich durch die ganze Seite: der Kern der Aussage steht in Grau. */
h1 em, h2 em, h3 em{ font-style:normal; color:var(--stein); }
.abschnitt--dunkel h2 em,
.abschnitt--dunkel h3 em{ color:var(--dunkel-stein); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.wrap{
  width:100%;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- Beschriftungen ----------------------------------------------------- */
.label{
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--stein); margin:0 0 1.1rem;
}
.lead{ font-size:clamp(1.05rem,1.55vw,1.2rem); color:var(--text); max-width:56ch; font-weight:400; }
.klein{ font-size:.92rem; color:var(--muted); }

/* --- Abschnitte und Raster ---------------------------------------------- */
/* Takt der Gruende von oben nach unten:
   Putz, Putz, Sand, Putz, Dunkel, Putz, Sand, Putz, Dunkel.
   Zwei gleiche Gruende stossen nur nach der Buehne aneinander, dort trennt
   die Faktenzeile die beiden Flaechen. */
.abschnitt{ padding:clamp(56px,8vw,124px) 0; }
/* Der Sand-Abschnitt setzt den Linienton fuer alles in ihm neu. */
.abschnitt--sand{ background:var(--sand); --linie:var(--linie-sand); }
.abschnitt--dunkel{ background:var(--kohle); color:var(--dunkel-text); }
.abschnitt--dunkel h2,
.abschnitt--dunkel h3{ color:var(--weiss); }
.abschnitt--dunkel .lead{ color:var(--dunkel-lead); }
.abschnitt--dunkel .label{ color:var(--dunkel-stein); }
.abschnitt--dunkel .klein{ color:var(--dunkel-text); }
/* Der Verweis am Ende haengt ohne eigene Luft unter dem Abschnitt darueber
   und braucht deshalb denselben Grund wie dieser. */
.abschnitt--eng{ padding-top:0; }

.regel{ border:0; border-top:1px solid var(--linie); margin:0; }

/* Kopf eines Abschnitts: Indexnummer links, Text rechts */
.kopfzeile{
  display:grid; grid-template-columns:var(--idx) 1fr;
  gap:clamp(16px,3vw,40px);
  border-top:1px solid var(--linie);
  padding-top:clamp(18px,2.4vw,28px);
  /* Der Abstand zum Inhalt steht nur hier. Vorher brachte ihn jeder Block
     selbst mit, dadurch sprang er von Abschnitt zu Abschnitt um bis zu 8 px. */
  margin-bottom:clamp(30px,4vw,50px);
}
.abschnitt--dunkel .kopfzeile{ border-top-color:var(--linie-2); }
/* Die Abschnittsnummer steht eine Stufe ueber den Zahlen innerhalb eines
   Abschnitts, damit die Gliederung auf einen Blick lesbar bleibt. */
.idx{
  font-size:1.02rem; font-weight:700; letter-spacing:.18em; color:var(--muted);
  padding-top:.2em;
}
.abschnitt--dunkel .idx{ color:var(--dunkel-leise); }
/* Ab hier faellt die Index-Spalte weg. Diese Grenze gilt fuer alle Raster
   mit Indexnummer, damit Ueberschrift und Zeilen darunter nie unterschiedlich
   weit eingerueckt stehen. */
@media (max-width:760px){
  .kopfzeile{ grid-template-columns:1fr; gap:.9rem; }
  .idx{ padding-top:0; }
}

/* --- Knoepfe ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:.92rem 1.6rem;
  border:1px solid var(--tinte);
  background:transparent; color:var(--tinte);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background:var(--tinte); color:var(--papier); }
.btn--voll{ background:var(--tinte); color:var(--papier); }
.btn--voll:hover{ background:transparent; color:var(--tinte); }
.btn--hell{ border-color:rgba(255,255,255,.55); color:var(--weiss); }
.btn--hell:hover{ background:var(--weiss); color:var(--kohle); }
.btn svg{ width:15px; height:15px; flex:none; }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:50;
  /* Der Grund ist der Putzton mit 90 Prozent Deckung. Die zweite Zeile bindet
     ihn an die Variable, die erste bleibt als Rueckfall fuer aeltere Browser. */
  background:rgba(243,242,239,.9);
  background:color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.kopf.ist-gescrollt{ border-bottom-color:var(--linie); }
.kopf-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:76px; }
/* Das FeinWerk-Zeichen bleibt unveraendert, nur der Zusatz heisst hier
   Schreinerei statt Camper. Das Orange kommt ausschliesslich hier vor. */
/* Zwei getrennte Ziele: das Zeichen fuehrt zu FeinWerk Camper,
   der Schriftzug springt an den Seitenanfang. */
.marke{ display:flex; align-items:center; gap:.6rem; }
.marke-zeichen{ display:flex; align-items:center; text-decoration:none; }
.marke-text{ text-decoration:none; }
/* Der Zeichenbereich hat unten und rechts je gut 6 Einheiten mehr als die
   Zeichnung. Ohne diesen Rand klebt der Punkt an der Kante, sein Bogen
   faellt dort in eine einzige Pixelzeile und wirkt abgeschnitten.
   Die Hoehe ist so gewaehlt, dass die Marke wieder 26,8 px misst und
   damit zur zweizeiligen Wortmarke daneben passt. */
.marke svg{ height:28px; width:auto; flex:none; overflow:visible; transition:opacity .2s ease; }
.marke-zeichen:hover svg{ opacity:.6; }
.marke-text:hover b{ color:var(--stein); }
.marke .mark{ fill:var(--tinte); }
.marke .dot{ fill:var(--orange); }
/* Zweizeiliger Schriftzug. Die untere Zeile ist so gesperrt, dass sie
   genau unter der oberen abschliesst. Der negative Rand rechts hebt den
   Abstand auf, den letter-spacing hinter dem letzten Buchstaben erzeugt. */
.marke-text{ display:flex; flex-direction:column; line-height:1.04; }
.marke-text b{
  font-weight:800; color:var(--tinte);
  font-size:1.1rem; letter-spacing:-.018em; white-space:nowrap;
}
.marke-text > span{
  font-size:.8rem; color:var(--muted); font-weight:700;
  text-transform:uppercase; white-space:nowrap;
  letter-spacing:.2076em; margin-right:-.2076em;
}
.fuss .marke .mark{ fill:var(--weiss); }
.fuss .marke-text b{ color:var(--weiss); }
.kopf-nav{ display:flex; align-items:center; gap:2.1rem; }
.kopf-nav a:not(.btn){
  text-decoration:none; color:var(--text);
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.kopf-nav a:not(.btn):hover{ color:var(--tinte); }
.kopf .btn{ padding:.68rem 1.2rem; font-size:.7rem; }
/* Sobald die Navigation wegfaellt, ist der Knopf im Kopf die einzige
   Bedienstelle. Er bekommt hier die vollen 44 px Antippflaeche. */
@media (max-width:880px){
  .kopf-nav .nur-desktop{ display:none; }
  .kopf .btn{ padding:.8rem 1.3rem; }
}

/* --- Buehne ------------------------------------------------------------- */
.buehne{ padding:clamp(40px,6.5vw,86px) 0 0; }
.buehne-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
@media (max-width:940px){ .buehne-grid{ grid-template-columns:1fr; } }
.buehne h1{ margin:0 0 .36em; max-width:13ch; }
/* Auf dem Telefon nimmt die Zeile die volle Spalte und wird ausgeglichen
   umbrochen. Mit der festen Kappung fiel das letzte Wort allein in eine
   dritte Zeile. */
@media (max-width:620px){
  .buehne h1{ max-width:none; text-wrap:balance; }
}
.buehne .lead{ max-width:46ch; }
.buehne-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(22px,3vw,34px); }

/* Faktenzeile unter der Buehne, durch Haarlinien geteilt */
.fakten{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  margin-top:clamp(34px,4.6vw,60px);
}
@media (max-width:760px){ .fakten{ grid-template-columns:1fr; } }
/* Der Abstand zur Trennlinie entspricht der Seitenluft, sonst klebt der
   Text an der Linie. Aussen bleiben die Zellen buendig zum Satzspiegel. */
.fakt{
  padding:clamp(20px,2.6vw,30px) var(--gutter);
  border-right:1px solid var(--linie);
}
.fakt:first-child{ padding-left:0; }
.fakt:last-child{ padding-right:0; border-right:0; }
@media (max-width:760px){
  .fakt{ border-right:0; border-bottom:1px solid var(--linie); padding-inline:0; }
  .fakt:last-child{ border-bottom:0; }
}
.fakt b{ display:block; font-size:1.02rem; font-weight:600; color:var(--tinte); letter-spacing:-.01em; margin-bottom:.25rem; }
.fakt p{ margin:0; font-size:.93rem; color:var(--muted); }

/* --- Bilder ------------------------------------------------------------- */
.bild{
  position:relative; overflow:hidden;
  background:var(--sand);
  margin:0;
}
.bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.bild--hoch{ aspect-ratio:3/4; }
.bild--quer{ aspect-ratio:3/4; }
.bild--breit{ aspect-ratio:21/9; }
@media (max-width:760px){ .bild--breit{ aspect-ratio:16/10; } }

.bild-unterschrift{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.75rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* Platzhalter, solange ein Foto fehlt. Wird per Skript gesetzt. */
.bild.fehlt{
  background:var(--sand);
  display:grid; place-items:center;
  outline:1px solid var(--linie); outline-offset:-1px;
}
.abschnitt--dunkel .bild.fehlt{ background:var(--dunkel-tief); outline-color:var(--linie-2); }
.bild.fehlt::after{
  content:attr(data-platzhalter);
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:1.6rem; max-width:26ch; line-height:1.8;
}

/* --- Projektcollage ------------------------------------------------------
   Die Spaltenbreiten kommen aus den echten Seitenverhaeltnissen der Fotos
   und stehen als --spalten am Element. Dadurch enden die Bilder einer Reihe
   exakt auf gleicher Hoehe, ohne dass eines beschnitten werden muss.
   Gerechnet wird das in tools/projekte.py.                              */
.projekt{ margin:0; }
.projekt + .projekt{ margin-top:clamp(30px,4vw,54px); }
.projekt-bilder{
  display:grid; grid-template-columns:var(--spalten, 2fr 1fr);
  gap:var(--luecke);
  align-items:start;
}
/* Grosses Bild oben ueber die volle Breite, zwei darunter nebeneinander.
   Diese Form greift, wenn das Hauptbild im Querformat liegt.            */
.projekt-bilder--stapel{ grid-template-columns:1fr; }
.projekt-klein,
.projekt-reihe{ display:grid; gap:var(--luecke); }
.projekt-klein{ grid-template-rows:auto auto; }
.projekt-reihe{ grid-template-columns:var(--spalten, 1fr 1fr); }
@media (max-width:680px){
  .projekt-bilder{ grid-template-columns:1fr; }
  .projekt-klein{ grid-template-rows:none; grid-template-columns:var(--spalten, 1fr 1fr); }
}
.projekt-zeile{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.4rem;
  margin-top:.85rem; padding-bottom:.95rem; border-bottom:1px solid var(--linie);
}
.projekt-zeile b{
  font-size:.98rem; font-weight:600; color:var(--tinte); letter-spacing:-.012em;
}
.projekt-zeile span{
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* --- Leistungen --------------------------------------------------------- */
.leistung{
  display:grid; grid-template-columns:var(--idx) 1fr 1.3fr;
  gap:clamp(16px,3vw,40px);
  align-items:start;
  padding:clamp(24px,3.2vw,38px) 0;
  border-top:1px solid var(--linie);
}
.leistung:last-child{ border-bottom:1px solid var(--linie); }
@media (max-width:900px){
  .leistung{ grid-template-columns:var(--idx) 1fr; }
  .leistung p{ grid-column:2; }
}
@media (max-width:760px){
  .leistung{ grid-template-columns:1fr; gap:.7rem; }
  .leistung p{ grid-column:1; }
}
.leistung-nr{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--muted); padding-top:.5em; }
.leistung h3{ margin:0; }
.leistung p{ margin:0; color:var(--muted); }
.leistung-tags{ display:flex; flex-wrap:wrap; gap:.3rem .5rem; margin-top:.7rem; }
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--stein); border:1px solid var(--linie); padding:.22rem .6rem;
}

/* --- Ablauf ------------------------------------------------------------- */
.schritte{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linie);
}
@media (max-width:900px){ .schritte{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .schritte{ grid-template-columns:1fr; } }
.schritt{
  padding:clamp(22px,2.8vw,32px) var(--gutter) clamp(26px,3vw,38px);
  border-right:1px solid var(--linie);
}
.schritt:first-child{ padding-left:0; }
.schritt:last-child{ padding-right:0; border-right:0; }
@media (max-width:900px){
  /* Zwei Spalten: links buendig, rechts buendig, in der Mitte volle Luft */
  .schritt:nth-child(2n){ border-right:0; padding-right:0; }
  .schritt:nth-child(2n+1){ padding-left:0; }
  .schritt:nth-child(-n+2){ border-bottom:1px solid var(--linie); }
}
@media (max-width:560px){
  .schritt{ border-right:0; border-bottom:1px solid var(--linie); padding-inline:0; }
  .schritt:last-child{ border-bottom:0; }
}
.schritt-nr{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--stein); margin-bottom:1.5rem; }
.schritt h3{ margin-bottom:.45rem; }
.schritt p{ font-size:.95rem; color:var(--muted); margin:0; }

/* --- Zweispalter -------------------------------------------------------- */
.duo{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:920px){ .duo{ grid-template-columns:1fr; } }
.duo--umgekehrt .duo-text{ order:2; }
@media (max-width:920px){ .duo--umgekehrt .duo-text{ order:0; } }
.duo-text{ position:sticky; top:106px; }
@media (max-width:920px){ .duo-text{ position:static; } }

.haken{ list-style:none; margin:1.6rem 0 0; padding:0; }
.haken li{
  padding:.72rem 0 .72rem 1.7rem; position:relative;
  border-top:1px solid var(--linie); font-size:.99rem;
}
.haken li:last-child{ border-bottom:1px solid var(--linie); }
.haken li::before{
  content:""; position:absolute; left:0; top:1.5em;
  width:9px; height:1px; background:var(--stein);
}
.abschnitt--dunkel .haken li{ border-color:var(--linie-2); color:var(--dunkel-lead); }
.abschnitt--dunkel .haken li::before{ background:var(--dunkel-stein); }

/* --- Personen ----------------------------------------------------------- */
.personen{ margin-top:clamp(26px,3.4vw,42px); }
.person{
  display:grid; grid-template-columns:78px 1fr;
  gap:1.2rem; align-items:center;
  padding:1.2rem 0; border-top:1px solid var(--linie);
}
.person:last-child{ border-bottom:1px solid var(--linie); }
.person img{ width:78px; height:78px; object-fit:cover; background:var(--sand); }
.person h3{ margin:0 0 .1rem; font-size:1.06rem; }
.person span{ display:block; font-size:.93rem; color:var(--muted); }
.person em{
  display:block; font-style:normal; margin-top:.35rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stein);
}

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:920px){ .kontakt-grid{ grid-template-columns:1fr; } }
.kontakt-liste{ border-top:1px solid var(--linie); }
.kontakt-zeile{
  display:grid; grid-template-columns:var(--idx) 1fr;
  gap:clamp(12px,3vw,40px); align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid var(--linie);
}
@media (max-width:760px){ .kontakt-zeile{ grid-template-columns:1fr; gap:.15rem; } }
.kontakt-zeile b{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.kontakt-zeile a,.kontakt-zeile p{
  margin:0; font-size:clamp(1.05rem,1.7vw,1.32rem); font-weight:500;
  color:var(--tinte); text-decoration:none; letter-spacing:-.015em;
}
.kontakt-zeile a:hover{ color:var(--stein); }

/* --- Verweis auf FeinWerk ----------------------------------------------- */
.verweis{
  display:grid; grid-template-columns:var(--idx) 1fr auto;
  gap:clamp(16px,3vw,40px); align-items:center;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  padding:clamp(26px,3.4vw,40px) 0;
}
@media (max-width:760px){ .verweis{ grid-template-columns:1fr; gap:1.2rem; align-items:start; } }
/* Die Ueberschrift ist semantisch eine H2 (eigener Abschnitt), traegt aber
   bewusst die kleinere H3-Groesse. Werte identisch zur globalen h3-Regel. */
.verweis h2,
.verweis h3{
  font-size:clamp(1.12rem,1.9vw,1.35rem); font-weight:600;
  line-height:1.24; letter-spacing:-.016em;
  margin:0 0 .3rem;
}
.verweis p{ margin:0; color:var(--muted); font-size:.98rem; }

/* --- Fusszeile ---------------------------------------------------------- */
.fuss{ background:var(--kohle); color:var(--fuss-text); padding:clamp(44px,5.5vw,72px) 0 clamp(24px,3vw,34px); font-size:.95rem; }
.fuss a{ color:var(--fuss-link); text-decoration:none; }
.fuss a:hover{ color:var(--weiss); }
.fuss-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(24px,4vw,56px);
  border-top:1px solid var(--linie-2); padding-top:clamp(24px,3vw,38px);
}
@media (max-width:760px){ .fuss-grid{ grid-template-columns:1fr; } }
.fuss b{
  display:block; color:var(--weiss); font-weight:700; margin-bottom:.9rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.fuss-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.fuss-schluss{
  margin-top:clamp(26px,3.4vw,44px); padding-top:1.3rem; border-top:1px solid var(--linie-2);
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dunkel-leise);
}

/* --- Ruf-Leiste auf dem Telefon ----------------------------------------- */
.rufleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:1px; background:var(--linie);
  border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
.rufleiste .btn{ flex:1; border:0; padding:1rem .8rem; background:var(--papier); }
.rufleiste .btn--voll{ background:var(--tinte); color:var(--papier); }
/* Die Leiste gibt es nur auf dem Telefon. Dort bliebe ein Hover-Zustand nach
   dem Antippen haengen, deshalb bleiben beide Knoepfe unveraendert. */
.rufleiste .btn:hover{ background:var(--papier); color:var(--tinte); }
.rufleiste .btn--voll:hover{ background:var(--tinte); color:var(--papier); }
@media (max-width:720px){
  .rufleiste{ display:flex; }
  /* Die Leiste ist 54 px hoch und wird auf Geraeten mit Gestenbalken noch um
     die sichere Flaeche hoeher. Beides muss der Fuss unter sich freihalten. */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}
/* Die feste Kopfzeile ist hoeher als die Luft ueber der ersten Trennlinie
   eines Abschnitts. Beim Sprung auf einen Anker darf sie diese nicht decken. */
@media (max-width:760px){
  html{ scroll-padding-top:92px; }
}

/* --- Einblenden --------------------------------------------------------- */
.zeig{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.zeig.da{ opacity:1; transform:none; }
.v1{ transition-delay:.1s; } .v2{ transition-delay:.2s; } .v3{ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){
  .zeig{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

::selection{ background:var(--tinte); color:var(--papier); }
:focus-visible{ outline:2px solid var(--stein); outline-offset:3px; }
/* Der Steinton verschwindet auf der dunklen Flaeche, dort uebernimmt der
   hellere Akzent den Fokusring. */
.abschnitt--dunkel :focus-visible,
.fuss :focus-visible{ outline-color:var(--dunkel-stein); }