/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „Ruhe & Haut"
   Nordfeld · Friseursalon Bielefeld

   Haltung: der ruhigste der drei. Kein Weiss als Seitengrund, sondern ein
   sehr helles Grau — darauf liegen weisse Flaechen mit grosszuegiger Rundung.
   Dazu ein einziger gedaempfter Gruenton (Salbei) und eine Didone-Antiqua
   mit starkem Strichstaerkenwechsel. Der Entwurf soll wirken wie ein
   aufgeraeumter Raum, nicht wie eine Werbeseite.

   Zwei Entscheidungen, die den ganzen Entwurf tragen:

   1. EINE Rundung, ueberall. 24 Pixel — an Karten, Bildern, Feldern, Knoepfen,
      Kacheln. Kein zweiter Wert. Entwurf 1 macht das Gegenteil (Radius 0),
      Entwurf 2 arbeitet mit zwei Werten. Wer hier einen dritten Radius
      einfuehrt, zerstoert genau die Ruhe, fuer die dieser Entwurf da ist.

   2. Salbei #62685E kann beides. Anders als das Korall aus Entwurf 2 taugt
      dieser Ton als SCHRIFT auf hellem Grund (auf Papier 5,2:1) UND als
      FLAECHE mit weisser Schrift darauf (5,7:1). Deshalb braucht es hier
      keinen zweiten, dunkleren Wert — und deshalb wirkt die Seite so
      geschlossen. Wer den Ton aufhellt, verliert diese Doppelrolle sofort.

   Aufbau, worin sich dieser Entwurf von 1 und 2 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — mittig, schmales Textmass, darunter ein flaches Bildband
                    ueber die volle Breite.
                    (1: Bild als Band oben, Textplatte darueber.
                     2: geteilt, Text links, Foto rechts.)
     · Leistungen — zwei Spalten in EINER grossen weissen Platte, wie eine
                    aufgeschlagene Karte.
                    (1: Menuekarte auf Haarlinien. 2: einzelne Karten im Raster.)
     · Galerie    — vier grosse Kacheln, 2x2, viel Luft dazwischen.
                    (1: Mauerwerk aus drei Spalten. 2: Streifen zum Wischen.)
     · Team       — mittig: Portraet als grosse Kachel, Text darunter.
                    (1: Portraet links. 2: Portraet rechts.)
     · Buchung    — drei gleich grosse Kacheln nebeneinander: anrufen,
                    schreiben, vorbeikommen.
                    (1: eine riesige Ueberschrift, die selbst der Link ist.
                     2: Wege links, Oeffnungszeiten als Karte rechts.)
     · Fragen     — gerundete Karten, alle offen. Nichts zum Aufklappen.
                    (1: offen und zweispaltig. 2: Aufklapper.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Friseur), Stil C.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ────────────────────────────────────────────────────────*/
:root{
  /* Flaechen */
  --papier:  #F3F3F3;   /* Seitengrund — helles Grau, bewusst kein Weiss   */
  --karte:   #FFFFFF;   /* Platten, Kacheln, Felder                        */
  --blass:   #E7EAE4;   /* Salbei sehr blass — Baender, Merker             */
  --tief:    #293223;   /* Fuss                                            */

  /* Schrift */
  --tinte:   #293223;   /* Ueberschriften (Papier 12,0:1 · Weiss 13,3:1)   */
  --text:    #5A6155;   /* Fliesstext     (Papier 5,8:1 · Weiss 6,4:1)     */
  --leise:   #63695F;   /* Meta   (Papier 5,1:1 · Weiss 5,7:1 · Blass 4,7:1) */
  --hell:    #FFFFFF;   /* Schrift auf Tief          (auf #293223 13,3:1)  */
  --hell-matt:#D9DBD6;  /* Fliesstext auf Tief       (auf #293223  9,6:1)  */
  --hell-leise:#A9AEA5; /* Meta auf Tief             (auf #293223  5,9:1)  */

  /* Die eine Buntfarbe. Siehe Punkt 2 im Kopfkommentar: sie kann beides. */
  --salbei:  #62685E;   /* Schrift (Papier 5,2:1) UND Flaeche (Weiss 5,7:1) */
  --salbei-tief:#4E5349;/* nur fuer Hover auf der Flaeche                   */

  /* Linien und Kanten */
  --linie:   #D5D6D4;
  --haar:1px solid #D5D6D4;
  --rand:    #80857D;   /* Umriss bedienbarer Elemente (Papier 3,4:1)      */

  /* Die eine Rundung. Siehe Punkt 1 im Kopfkommentar. */
  --rund:24px;

  /* Schrift */
  --display:'Bodoni Moda','Times New Roman',Georgia,serif;
  --schrift:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --spalte:1200px;
  --tempo:.45s cubic-bezier(.2,.7,.3,1);
}

/* ── Grundlagen ────────────────────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:var(--schrift); font-size:18px; line-height:1.72;
  font-weight:400; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3{
  font-family:var(--display); font-weight:400; color:var(--tinte);
  line-height:1.14; margin:0; letter-spacing:-.012em;
  /* Verteilt die Woerter gleichmaessig auf die Zeilen, statt die erste Zeile
     vollzulaufen und ein einzelnes Wort allein in die zweite zu schicken.
     Bei mittiger Achse — und dieser Entwurf setzt fast alles mittig — faellt
     so ein Einzelwort sofort auf. Browser ohne diese Faehigkeit brechen wie
     bisher um; die Ueberschrift bleibt lesbar, nur weniger ausgewogen. */
  text-wrap:balance;
}
/* Verhindert, dass am Ende eines Absatzes ein einzelnes Wort allein in der
   letzten Zeile steht. Wirkt nur auf die letzten Zeilen, nicht auf den ganzen
   Absatz — deshalb "pretty" und nicht "balance". */
p{margin:0; text-wrap:pretty}
img{display:block; max-width:100%}
a{color:inherit}
ul,ol{margin:0; padding:0}
button{font:inherit; color:inherit; cursor:pointer}
svg{fill:currentColor}

:focus-visible{
  outline:2px solid var(--salbei); outline-offset:3px; border-radius:6px;
}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.nur-vorleser:focus{
  position:fixed; top:10px; left:10px; z-index:99;
  width:auto; height:auto; clip-path:none;
  background:var(--karte); color:var(--tinte);
  padding:12px 18px; border-radius:var(--rund); border:var(--haar);
}

/* Einblenden beim Scrollen — Stufe 1, wie in Entwurf 1: nur ein kurzer Weg
   nach oben. Ohne JavaScript bleibt alles sichtbar, deshalb der html.js-Riegel. */
html.js .zeig{opacity:0; translate:0 14px; transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1)}
html.js .zeig[data-da="1"]{opacity:1; translate:none}
html.js .zeig{transition-delay:calc(var(--i, 0) * 70ms)}

/* ── Entwurfs-Band ─────────────────────────────────────────────────────────*/
.entwurf-band{background:#F3E7A8; color:#3A3212; font-size:.82rem; padding:8px 0}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline}
.entwurf-band b{font-weight:700}
/* Die Polsterung zieht die Trefferflaeche auf die 24 Pixel hoch, die ein
   antippbares Ziel mindestens haben soll — der negative Aussenabstand nimmt
   sie danach wieder aus dem Zeilenfluss heraus, damit das Band nicht waechst. */
.entwurf-band a{margin-left:auto; display:inline-block; padding:5px 0; margin-block:-5px}

/* ── Kopf ──────────────────────────────────────────────────────────────────*/
.kopf{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
.kopf .wrap{display:flex; align-items:center; gap:22px; padding:14px 0}
.marke{
  font-family:var(--display); font-size:1.5rem; color:var(--tinte);
  text-decoration:none; line-height:1.1;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise); margin-top:3px;
}
.menue{display:flex; gap:4px; margin-left:auto}
.menue a{
  text-decoration:none; color:var(--text); font-size:.94rem; font-weight:500;
  padding:9px 14px; border-radius:var(--rund); transition:background var(--tempo), color var(--tempo);
}
.menue a:hover{background:var(--blass); color:var(--tinte)}

/* ── Knoepfe ───────────────────────────────────────────────────────────────*/
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--rund);
  background:var(--salbei); color:#FFFFFF; border:1px solid var(--salbei);
  text-decoration:none; font-weight:600; font-size:.98rem; white-space:nowrap;
  transition:background var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:var(--salbei-tief); border-color:var(--salbei-tief)}
.knopf svg{width:17px; height:17px; flex:none}
.knopf-leer{
  background:var(--karte); color:var(--tinte); border-color:var(--rand);
}
.knopf-leer:hover{background:var(--blass); border-color:var(--salbei)}
.kopf .knopf{padding:11px 20px; font-size:.92rem}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  position:relative;
}
.burger i{
  position:absolute; left:13px; width:19px; height:1.5px; background:var(--tinte);
  border-radius:2px;
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){translate:0 -6px; rotate:-45deg}

/* ── Buehne: mittig, darunter ein flaches Bildband ─────────────────────────*/
.buehne{padding:clamp(46px, 6vw, 96px) 0 0; text-align:center}
.rubrik{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--salbei);
}
.buehne h1{
  font-size:clamp(2.5rem, 6vw, 4.6rem); margin-top:18px;
  max-width:16ch; margin-inline:auto; letter-spacing:-.02em;
}
/* Der kursive Schnitt der Bodoni ist der einzige Schmuck der Seite. Er steht
   genau einmal — in der Ueberschrift der Buehne. Nicht vermehren. */
.buehne h1 em{font-style:italic}
.buehne .lead{
  margin:24px auto 0; max-width:54ch; font-size:1.08rem; color:var(--text);
  text-wrap:balance;
}
.buehne-knoepfe{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(26px, 3vw, 38px);
}

/* Das Bildband ist flach und liegt ueber die ganze Spaltenbreite. Es traegt
   keinen Text — es setzt nur den Ton, bevor der Inhalt anfaengt. */
.buehne-band{
  margin-top:clamp(38px, 4.4vw, 68px);
  border-radius:var(--rund); overflow:clip; background:var(--blass);
}
.buehne-band img{width:100%; height:100%; object-fit:cover; aspect-ratio:21/9}

/* ── Zeile mit Zahlen ──────────────────────────────────────────────────────*/
.zahlen{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px; background:var(--linie);
  border-radius:var(--rund); overflow:clip;
  margin-top:clamp(34px, 3.6vw, 52px);
}
.zahlen div{background:var(--karte); padding:clamp(22px, 2.6vw, 32px); text-align:center}
.zahlen b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); color:var(--tinte); line-height:1.1;
}
.zahlen span{display:block; margin-top:8px; font-size:.9rem; color:var(--leise)}

/* ── Bloecke ───────────────────────────────────────────────────────────────*/
.block{padding:clamp(58px, 6.8vw, 112px) 0}
.block-kopf{max-width:60ch; margin-bottom:clamp(30px, 3.6vw, 50px)}
.block-kopf h2{font-size:clamp(1.9rem, 3.8vw, 3rem); margin-top:12px}
.block-kopf .lead{margin-top:16px; max-width:58ch}
/* Mittig gesetzte Kopfzeile — nur dort, wo der Block darunter selbst mittig
   ist. Sonst laeuft die Seite auseinander. */
.block-kopf.mitte{margin-inline:auto; text-align:center}
/* Mittig gesetzte Ueberschriften brauchen ein engeres Mass als linksbuendige,
   sonst wird die erste Zeile sehr lang. Den gleichmaessigen Umbruch besorgt
   das text-wrap:balance weiter oben. */
.block-kopf.mitte h2{max-width:26ch; margin-inline:auto}
/* Der mittige Vorspann ist kurz genug, dass sich die Zeilen gleichmaessig
   verteilen lassen. Bei mittiger Achse sieht ein Treppchen aus langer, langer,
   kurzer Zeile unruhig aus. */
.block-kopf.mitte .lead{margin-inline:auto; max-width:52ch; text-wrap:balance}

/* ── Leistungen: EINE grosse Platte, zwei Spalten ──────────────────────────*/
/* Der Unterschied zu Entwurf 2 ist wichtig: dort ist jede Leistung eine
   eigene Karte. Hier stehen alle acht in einer einzigen Flaeche, so wie auf
   einer aufgeschlagenen Preiskarte im Salon. Das beruhigt das Bild deutlich. */
.platte{
  background:var(--karte); border-radius:var(--rund);
  padding:clamp(26px, 3.4vw, 54px);
}
.leistungs-liste{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(30px, 4vw, 64px);
}
.leistungs-liste li{padding:22px 0; border-top:var(--haar)}
/* Die oberste Zeile jeder Spalte braucht keine Linie — sie steht ja schon an
   der Kante der Platte. Bei zwei Spalten sind das die ersten beiden Punkte. */
.leistungs-liste li:nth-child(1),
.leistungs-liste li:nth-child(2){border-top:0; padding-top:0}
.leistungs-liste .zeile{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.leistungs-liste h3{font-size:1.16rem; font-family:var(--schrift); font-weight:700}
.leistungs-liste .preis{
  font-size:.94rem; font-weight:600; color:var(--salbei); white-space:nowrap;
}
.leistungs-liste p{margin-top:7px; font-size:.96rem; color:var(--text); max-width:44ch}
.platte-fuss{
  margin-top:clamp(26px, 3vw, 38px); padding-top:22px; border-top:var(--haar);
  font-size:.94rem; color:var(--leise); max-width:74ch;
}

/* ── Galerie: 2x2 grosse Kacheln ───────────────────────────────────────────*/
.kacheln{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 1.8vw, 26px);
}
.kacheln li{border-radius:var(--rund); overflow:clip; background:var(--blass)}
.kacheln img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:scale .8s cubic-bezier(.2,.7,.3,1);
}
.kacheln li:hover img{scale:1.03}

/* ── Team: mittig ──────────────────────────────────────────────────────────*/
/* Gegenstueck zu 1 (Portraet links) und 2 (Portraet rechts): hier steht es
   in der Mitte, und der Text laeuft darunter in schmalem Mass weiter. */
.team{text-align:center}
.team-bild{
  width:min(100%, 460px); margin-inline:auto;
  border-radius:var(--rund); overflow:clip; background:var(--blass);
}
.team-bild img{width:100%; height:auto}
.team h2{font-size:clamp(1.9rem, 3.8vw, 3rem); margin-top:clamp(26px, 3vw, 40px)}
.team p{margin:20px auto 0; max-width:58ch}
.unterschrift{margin-top:28px}
.unterschrift b{
  display:block; font-family:var(--display); font-weight:400; font-size:1.3rem;
  color:var(--tinte);
}
.unterschrift small{display:block; font-size:.88rem; color:var(--leise); margin-top:4px}

/* ── Buchung: drei gleich grosse Kacheln ───────────────────────────────────*/
.buchung{background:var(--blass)}
.wege{
  list-style:none;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.8vw, 22px);
}
.weg{
  background:var(--karte); border-radius:var(--rund);
  padding:clamp(24px, 3vw, 36px);
  display:flex; flex-direction:column; height:100%;
  transition:translate var(--tempo);
}
.weg:hover{translate:0 -3px}
.weg .zeichen{
  width:48px; height:48px; border-radius:var(--rund);
  background:var(--blass); color:var(--salbei);
  display:grid; place-items:center; margin-bottom:18px;
}
.weg .zeichen svg{width:22px; height:22px}
.weg h3{font-size:1.24rem}
.weg p{margin-top:10px; font-size:.96rem; color:var(--text)}
/* Der Link sitzt unten und wird nach oben weggedrueckt, damit alle drei
   Kacheln ihn auf derselben Hoehe haben — auch wenn die Texte unterschiedlich
   lang sind. */
.weg .ziel{
  margin-top:auto; padding-top:20px; font-weight:600; color:var(--salbei);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.weg .ziel:hover{text-decoration:underline}
.weg .ziel .pf{transition:translate var(--tempo)}
.weg .ziel:hover .pf{translate:4px 0}

.zeiten{
  margin-top:clamp(22px, 2.6vw, 32px);
  background:var(--karte); border-radius:var(--rund);
  padding:clamp(22px, 2.6vw, 32px);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(20px, 3vw, 44px); align-items:start;
}
.zeiten dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:0}
.zeiten dt,.zeiten dd{
  margin:0; padding:11px 0; border-top:var(--haar); font-size:.98rem;
}
.zeiten dt:first-of-type,.zeiten dl > dt:first-child + dd{border-top:0}
.zeiten dd{text-align:right; font-weight:600; color:var(--tinte)}
.zeiten .hinweis{font-size:.94rem; color:var(--leise)}

/* ── Fragen: gerundete Karten, alle offen ──────────────────────────────────*/
/* Bewusst kein Aufklapper (das macht Entwurf 2). Wer eine Frage hat, soll sie
   lesen koennen, ohne vorher zu klicken. */
.fragen-liste{
  list-style:none; display:grid; gap:clamp(12px, 1.4vw, 18px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.frage{
  background:var(--karte); border-radius:var(--rund);
  padding:clamp(22px, 2.6vw, 32px);
}
.frage h3{font-size:1.12rem; font-family:var(--schrift); font-weight:700}
.frage p{margin-top:10px; font-size:.97rem; max-width:52ch}

/* ── Kontakt ───────────────────────────────────────────────────────────────*/
/* Entwurf 1 und 2 stellen Formular und Daten nebeneinander. Hier steht die
   Datenzeile OBEN quer und das Formular darunter mittig in einer Platte —
   dadurch bleibt auch dieser Abschnitt symmetrisch. */
.kontakt-zeile{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px; background:var(--linie);
  border-radius:var(--rund); overflow:clip;
  margin-bottom:clamp(24px, 3vw, 40px);
}
.kontakt-zeile li{background:var(--karte); padding:clamp(20px, 2.4vw, 28px)}
.kontakt-zeile svg{width:19px; height:19px; color:var(--salbei); margin-bottom:10px}
.kontakt-zeile b{display:block; font-weight:700; color:var(--tinte); font-size:1rem}
.kontakt-zeile b a{display:block; padding:4px 0; margin:-4px 0; text-decoration:none}
.kontakt-zeile b a:hover{text-decoration:underline}
.kontakt-zeile small{display:block; font-size:.88rem; color:var(--leise); margin-top:4px}

.formular{width:min(100%, 720px); margin-inline:auto}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.88rem; font-weight:700; color:var(--tinte); margin-bottom:7px;
}
/* Der Rand ist bewusst der dunklere Ton und nicht die feine Trennlinie: Ein
   Eingabefeld muss sich vom Untergrund abheben, sonst sieht man nicht, wo man
   hineinschreiben kann. Die Fuellung allein reicht dafuer nicht — hell auf
   Weiss sind das nur 1,1:1. Mit --rand sind es 3,8:1 gegen die weisse Platte
   und damit ueber der Grenze, die fuer Bedienelemente gilt. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:14px 18px; background:var(--papier);
  border:1px solid var(--rand); border-radius:var(--rund);
  font-family:inherit; font-size:1rem; color:var(--tinte);
}
.feld textarea{min-height:118px; resize:vertical; line-height:1.6}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--salbei); outline-offset:1px; border-color:transparent;
}
/* Der Pfeil des Auswahlfeldes wird selbst gezeichnet, damit er in allen
   Browsern gleich aussieht. Als Datei-URL, damit keine zweite Anfrage noetig ist. */
.feld select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2362685E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:20px;
  padding-right:46px;
}
.formular .knopf{width:100%; margin-top:8px}
.form-fuss{margin-top:14px; font-size:.88rem; color:var(--leise); line-height:1.6}
.form-fuss a{color:var(--salbei)}

/* ── Fuss ──────────────────────────────────────────────────────────────────*/
.fuss{background:var(--tief); color:var(--hell-matt); padding:clamp(44px, 5vw, 74px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap:30px clamp(24px, 3vw, 54px);
}
.fuss .marke{color:var(--hell)}
.fuss .marke small{color:var(--hell-leise)}
.fuss p{margin-top:16px; max-width:40ch; font-size:.94rem}
.fuss h3{
  font-family:var(--schrift); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--hell-leise);
  margin-bottom:12px;
}
.fuss ul{list-style:none; font-size:.94rem}
/* Die 7 Pixel stehen zweimal da, und das mit Absicht: am Listenpunkt sorgen
   sie fuer den gleichen Zeilenabstand bei Eintraegen ohne Link (der
   Anschrift), am Link ziehen sie die Trefferflaeche auf dieselbe Hoehe. Der
   negative Aussenabstand hebt die Polsterung des Listenpunkts wieder auf,
   damit nichts doppelt zaehlt. */
.fuss li{padding:7px 0}
.fuss li a{display:block; margin:-7px 0; padding:7px 0; text-decoration:none}
.fuss li a:hover{color:var(--hell); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(34px, 4vw, 54px); padding:20px 0;
  border-top:1px solid #3D4736;
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.84rem; color:var(--hell-leise);
}
.fuss-unten a{display:inline-block; padding:6px 0}

/* ── Daumenleiste ──────────────────────────────────────────────────────────*/
.daumen{display:none}

/* ── Schmaler ──────────────────────────────────────────────────────────────*/
@media (max-width:1000px){
  .kontakt-zeile{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .zeiten{grid-template-columns:1fr}
}

@media (max-width:860px){
  html{scroll-padding-top:80px}
  .leistungs-liste{grid-template-columns:1fr}
  /* Bei einer Spalte hat nur noch der allererste Punkt keine Linie. */
  .leistungs-liste li:nth-child(2){border-top:var(--haar); padding-top:22px}
  .wege{grid-template-columns:1fr}
  .fragen-liste{grid-template-columns:1fr}
  .buehne-band img{aspect-ratio:16/9}

  /* Das Menue faellt als volle Flaeche unter den Kopf. Die Huelle muss dafuer
     auf static stehen: ein position:sticky-Vorfahr wuerde sonst der Bezug
     fuer das absolut gesetzte Menue sein und es auf Spaltenbreite halten. */
  .kopf .wrap{position:static}
  .menue{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--papier);
    border-top:var(--haar); border-bottom:var(--haar);
    padding:8px 20px 14px;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:14px 12px; border-top:var(--haar); border-radius:0; font-size:1.02rem}
  .menue a:first-child{border-top:0}
  .kopf .knopf{display:none}
  .burger{display:block}
}

@media (max-width:640px){
  body{font-size:17px}
  .feld-paar{grid-template-columns:1fr; gap:0}
  .fuss-gitter{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr}
  .kacheln{grid-template-columns:1fr}
  .kontakt-zeile{grid-template-columns:1fr}
  .buehne-band img{aspect-ratio:3/2}

  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--papier); border-top:1px solid var(--linie);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .daumen .knopf{padding:13px 10px; font-size:.92rem}
  body{padding-bottom:78px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Der ruhigste der drei Entwuerfe: EINE grosse Rundung, EINE Buntfarbe,
   viel Luft. Das gilt hier weiter — der Hinweiskasten ist eine blasse
   Salbeiflaeche mit voller Rundung statt eines Balkens, die Aufzaehlung
   bekommt einen kleinen Kreis in Salbei. Anders als auf der Startseite
   steht der Text hier linksbuendig und nicht mittig: mittige Rechtstexte
   sind schwer zu lesen, weil das Auge jede Zeile neu suchen muss. */
.rechts-kopf{padding:clamp(44px, 5.4vw, 82px) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2.2rem, 4.4vw, 3.4rem); margin-top:12px}
.rechts-kopf .lead{margin-top:18px; max-width:56ch; color:var(--text)}

/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.rechtstext{padding-bottom:clamp(56px, 6.5vw, 100px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:var(--haar); padding:32px 0 4px}
.rechtstext h2{font-size:clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:700;
  margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px; text-wrap:pretty}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{color:var(--text); padding-left:20px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:2px; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--salbei);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:700; color:var(--tinte); margin-top:15px}
.rechtstext dd{margin:2px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.9}
.rechtstext a{color:var(--salbei); text-underline-offset:3px}

/* Voll gerundet statt Balken links: dieser Entwurf setzt die Rundung als
   Erkennungszeichen ein, ein eckiger Kasten faele sofort heraus. */
.rechts-hinweis{
  background:var(--blass); border-radius:var(--rund);
  padding:22px 26px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}

/* Hier steht bewusst ".rechtstext .zurueck" und nicht nur ".zurueck":
   die Regel fuer Links im Rechtstext eine Zeile weiter oben ist spezifischer
   als eine einzelne Klasse und wuerde die Schriftfarbe sonst ueberschreiben —
   der Knopf haette dann Schrift und Flaeche in derselben Farbe. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.95rem; font-weight:700; color:var(--hell);
  background:var(--salbei); border-radius:var(--rund);
  padding:14px 28px; margin-top:40px;
  transition:background var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--salbei-tief)}