/* Sandras Friseurwagon — Tokens und Bausteine.
   Werte stammen aus Brand/BRAND.md. Nichts hier frei erfinden. */

/* Schriften liegen lokal. Absichtlich nicht ueber das Google-CDN:
   das wuerde die IP-Adresse jedes Besuchers an Google uebertragen.
   Beides sind Variable Fonts, eine Datei deckt alle Gewichte ab. */
@font-face {
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces.woff2') format('woff2-variations'),
      url('/assets/fonts/fraunces.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Source Sans 3';
  src:url('/assets/fonts/source-sans-3.woff2') format('woff2-variations'),
      url('/assets/fonts/source-sans-3.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root {
  --bg:#F4EFE6; --surf:#FAF6EF; --fg:#2A2119; --mut:#6B5F52;
  --line:#DDD3C4; --line-2:#C3B7A5;
  --acc:#BE7B5A; --acc-ink:#2A2119;
  --acc-strong:#96543A; --acc-strong-ink:#FFFFFF;
  --leaf:#4A5D3A;
  --info:#3A5A6B; --warn:#7A5A12; --neg:#8E2F2F;

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --pad-x:40px; --content:1080px; --r:4px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}

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

html { color-scheme: light; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                           transition-duration:.01ms !important; }
}

body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-tap-highlight-color: rgba(150,84,58,.18);
}

h1,h2,h3,h4 { margin:0; font-family:var(--display); letter-spacing:-.015em; text-wrap:balance; }
h1 { font-weight:700; font-size:52px; line-height:1.08; }
h2 { font-weight:600; font-size:34px; line-height:1.15; }
h3 { font-weight:600; font-size:24px; line-height:1.25; }
h4 { font-weight:600; font-size:20px; line-height:1.3; }
h2, h3 { scroll-margin-top: var(--s8); }

p, ul, ol { margin:0; }
p { text-wrap:pretty; max-width:68ch; }
ul, ol { padding-left:1.15em; }
li { margin-bottom:var(--s1); }
strong { font-weight:600; }

a { color:var(--acc-strong); text-decoration:underline;
    text-underline-offset:3px; text-decoration-thickness:1px;
    transition: color .15s ease; }
a:hover { color:var(--fg); }
:focus-visible { outline:3px solid var(--acc-strong); outline-offset:3px; }

img { max-width:100%; height:auto; display:block; background:var(--line); }
/* Das Logo ist ein freigestelltes PNG. Ohne diese Zeile legt die
   Platzhalterflaeche von oben eine graue Kachel dahinter. */
img.logo { background:none; }
table { border-collapse:collapse; width:100%; }
button { font:inherit; cursor:pointer; }
hr { border:0; border-top:1px solid var(--line); margin:0; }

.lbl { font-size:13px; font-weight:600; letter-spacing:.14em;
       text-transform:uppercase; color:var(--mut); line-height:1.2; }
.val { font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
      white-space:nowrap; }

.skip { position:absolute; left:var(--s4); top:-100px; z-index:100;
        background:var(--fg); color:var(--bg); padding:var(--s3) var(--s4);
        border-radius:var(--r); text-decoration:none; transition: top .15s ease; }
.skip:focus { top:var(--s4); color:var(--bg); }

.wrap { max-width:var(--content); margin:0 auto;
        padding-left:var(--pad-x); padding-right:var(--pad-x); }
section { padding-top:var(--s9); padding-bottom:var(--s9); }
.eng { max-width:68ch; }

/* Kopfzeile */
.top { border-bottom:1px solid var(--line); background:var(--surf); }
.top .in { max-width:var(--content); margin:0 auto;
           padding:var(--s4) var(--pad-x);
           display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; }
.top nav { flex:1; }
.top ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }
.top a { color:var(--fg); text-decoration:none; font-weight:600; font-size:17px;
         padding:var(--s2) 0; display:inline-block; }
.top a:hover { color:var(--acc-strong); text-decoration:underline; text-underline-offset:4px; }
.top a[aria-current="page"] { color:var(--acc-strong); text-decoration:underline;
                              text-underline-offset:4px; text-decoration-thickness:2px; }
/* .top a ist spezifischer als .btn und ueberschreibt sonst Innenabstand,
   Textfarbe und Unterstreichung des Telefonknopfs. Mit --fg auf --acc-strong
   kaeme der Knopf auf 2,7:1 und faellt damit durch die WCAG-Schwelle. */
.top .btn, .top .btn:hover, .top .btn[aria-current="page"] {
  padding:var(--s3) var(--s5);
  color:var(--acc-strong-ink);
  text-decoration:none;
}

/* Knöpfe */
.btn, .btn-2 {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s5);
  border-radius:var(--r); text-decoration:none; font-weight:600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn { background:var(--acc-strong); color:var(--acc-strong-ink); border:1px solid var(--acc-strong); }
.btn:hover { background:var(--fg); border-color:var(--fg); color:var(--acc-strong-ink); }
.btn-2 { background:transparent; color:var(--fg); border:1px solid var(--line-2); }
.btn-2:hover { border-color:var(--fg); color:var(--fg); background:var(--surf); }
.btns { display:flex; flex-wrap:wrap; gap:var(--s3); }

/* Video. Liegt auf demselben Server wie die Seite, deshalb kein Zwei-Klick
   noetig wie bei der Karte: Es wird niemand Drittes kontaktiert. preload="none"
   im HTML sorgt dafuer, dass vor dem Klick nur das Vorschaubild laedt. */
.video { margin-top:var(--s6); border:1px solid var(--line);
         border-radius:var(--r); background:var(--fg); overflow:hidden; }
.video video { display:block; width:100%; height:auto; background:var(--fg); }
/* max-width:none, sonst greift die 68ch-Grenze fuer <p> und die Zeile
   endet mitten im Kasten, mit dunklem Rest daneben. */
.video-fuss { background:var(--surf); padding:var(--s4) var(--s5);
              border-top:1px solid var(--line); font-size:15px;
              color:var(--mut); max-width:none; margin:0; }

/* Karte auf der Kontaktseite. Heisst bewusst nicht .karte,
   das sind die Beitragskarten weiter unten. Zwei Klicks: Das Google-Fenster wird erst
   erzeugt, wenn der Besucher es will. Sonst ginge seine IP-Adresse ungefragt
   an Google, wogegen wir die Schriften ja gerade lokal legen. */
.landkarte { margin-top:var(--s6); border:1px solid var(--line);
         border-radius:var(--r); background:var(--surf); overflow:hidden; }
.landkarte-fenster { border-bottom:1px solid var(--line); }
.landkarte-platz { padding:var(--s6); }
.landkarte-platz p { color:var(--mut); margin-top:var(--s3); max-width:62ch; }
.landkarte-platz .lbl { color:var(--mut); margin-top:0; }
.landkarte iframe { display:block; width:100%; height:420px; border:0; }
.landkarte-fuss { display:flex; flex-wrap:wrap; align-items:center;
              gap:var(--s4) var(--s5); padding:var(--s5) var(--s6); }

@media (max-width:900px) {
  .landkarte-platz { padding:var(--s5); }
  .landkarte-fuss { padding:var(--s5); }
  .landkarte iframe { height:320px; }
}

/* Kopfbereich mit Foto */
.hero { position:relative; min-height:560px; display:flex; align-items:flex-end;
        overflow:hidden; background:var(--line); }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .box { position:relative; background:var(--bg); border:1px solid var(--line);
             padding:var(--s6); max-width:660px;
             margin:var(--s7) var(--pad-x) var(--s7) var(--pad-x); }
.hero h1 { margin-bottom:var(--s3); }
.proof { color:var(--mut); margin-bottom:var(--s5); }

/* Kopfbereich ohne Foto, für Unterseiten */
.kopf { border-bottom:1px solid var(--line); background:var(--surf);
        padding-top:var(--s8); padding-bottom:var(--s8); }
.kopf h1 { margin:var(--s3) 0 var(--s4); }

/* Aktuell-Streifen */
.aktuell { border-bottom:1px solid var(--line); background:var(--surf); }
.aktuell .in { max-width:var(--content); margin:0 auto;
               padding:var(--s4) var(--pad-x);
               display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.aktuell .pip { width:10px; height:10px; border-radius:50%; background:var(--acc); flex:none; }
.aktuell .txt { flex:1 1 300px; min-width:0; }

/* Faktenblock */
.fakten { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7) var(--s6);
          border-top:1px solid var(--line); padding-top:var(--s7); margin-top:var(--s6); }
/* Die Zahl sieht aus wie h2, ist aber keine Ueberschrift. Sonst hoert
   ein Screenreader beim Springen "30 m²" als Abschnittstitel. */
.zahl { font-family:var(--display); font-weight:600; font-size:34px;
        line-height:1.15; letter-spacing:-.015em; margin:var(--s2) 0 var(--s1); }
.fakt p:not(.zahl):not(.lbl) { color:var(--mut); font-size:15px; }

/* Tabellen */
.tbl th { text-align:left; font-size:13px; font-weight:600; letter-spacing:.14em;
          text-transform:uppercase; color:var(--mut);
          padding:var(--s3) 0; border-bottom:1px solid var(--line-2); }
.tbl td { padding:var(--s3) 0; border-bottom:1px solid var(--line);
          min-height:52px; vertical-align:middle; }
.tbl td:last-child, .tbl th:last-child { text-align:right; padding-left:var(--s4); }
.tbl td:first-child { overflow-wrap:break-word; }
.tbl caption { text-align:left; color:var(--mut); font-size:15px; padding-bottom:var(--s3); }

.two { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
.two-3-2 { display:grid; grid-template-columns:3fr 2fr; gap:var(--s8); align-items:start; }

.hinweis { background:var(--surf); border:1px solid var(--line);
           border-left:4px solid var(--acc); padding:var(--s5);
           border-radius:var(--r); margin-top:var(--s6); max-width:68ch; }
.hinweis p + p { margin-top:var(--s3); }

/* Platzhalter für Angaben, die nur Sandra kennt */
.tbd { background:#FFF3C4; border-bottom:2px solid var(--warn); color:var(--fg);
       padding:0 4px; font-weight:600; }

/* Leistungsgruppen */
.leist { display:grid; grid-template-columns:1fr 1fr; gap:var(--s7) var(--s8); margin-top:var(--s6); }
.leist ul { margin-top:var(--s3); color:var(--mut); }

/* Karten */
.karten { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); margin-top:var(--s6); }
.karte { border:1px solid var(--line); border-radius:var(--r); background:var(--surf);
         overflow:hidden; display:flex; flex-direction:column; }
.karte img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.karte .txt { padding:var(--s5); flex:1; }
.karte h3 { margin:var(--s2) 0; }
.karte p { font-size:15px; color:var(--mut); }
.karte .mehr { padding:0 var(--s5) var(--s5); }

/* Aufklappbare Preisbereiche. Die Liste hat 75 Zeilen; zugeklappt sieht man
   die neun Bereiche auf einen Blick und oeffnet nur, was einen betrifft.
   Ohne JavaScript funktioniert das genauso, <details> kann der Browser. */
.preisgruppe { border-bottom:1px solid var(--line); }
.preisgruppe summary { cursor:pointer; list-style:none; padding:var(--s4) 0;
                       display:flex; align-items:center; gap:var(--s4); }
.preisgruppe summary::-webkit-details-marker { display:none; }
.preisgruppe summary h2 { margin:0; flex:1; }
.preisgruppe summary::after { content:"+"; font-size:28px; line-height:1;
                              color:var(--acc-strong); flex:none; }
.preisgruppe[open] summary::after { content:"−"; }
.preisgruppe summary:hover h2 { color:var(--acc-strong); }
.preisgruppe summary:focus-visible { outline:3px solid var(--acc-strong);
                                     outline-offset:3px; }
.preisgruppe > *:not(summary) { margin-bottom:var(--s5); }

/* Bildunterschrift, auch für die KI-Kennzeichnung */
figure { margin:0; }
figcaption { color:var(--mut); font-size:15px; padding-top:var(--s2); }
figcaption.ki { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* Galerie */
.galerie { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s6); }
.galerie figure { border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
                  background:var(--surf); }
.galerie img { width:100%; }
.galerie figcaption { padding:var(--s3) var(--s4); }

/* Häufige Fragen */
.faq dt { font-family:var(--display); font-weight:600; font-size:24px; line-height:1.25;
          padding-top:var(--s5); border-top:1px solid var(--line); }
.faq dd { margin:var(--s2) 0 var(--s5); color:var(--mut); max-width:68ch; }

/* Fußzeile */
.fuss { border-top:1px solid var(--line); background:var(--surf);
        padding-top:var(--s7); padding-bottom:var(--s7); margin-top:var(--s9); }
.fuss .sp { display:grid; grid-template-columns:auto repeat(3,1fr); gap:var(--s7); align-items:start; }
.fuss p { font-size:15px; color:var(--mut); margin-top:var(--s2); }
.fuss ul { list-style:none; margin:var(--s2) 0 0; padding:0; font-size:15px; }
.fuss li { margin-bottom:var(--s1); }
.fuss .fein { margin-top:var(--s7); padding-top:var(--s5);
              border-top:1px solid var(--line); font-size:15px; color:var(--mut); }

@media (max-width:900px) {
  :root { --pad-x:20px; }
  body { font-size:17px; }
  /* Kopfzeile umbauen: Logo und Telefon in einer Zeile, Menue darunter.
     Ohne das sprengt der Telefonknopf die Breite und schiebt die
     gesamte Seite ueber den Bildschirmrand. */
  .top .in { gap:var(--s3); padding:var(--s3) var(--pad-x); }
  .top .in > a:first-child img { width:56px; height:60px; }
  .top nav { order:3; flex:1 0 100%; border-top:1px solid var(--line);
             padding-top:var(--s3); }
  .top ul { gap:var(--s2) var(--s4); }
  .top a { font-size:16px; }
  .top .btn { margin-left:auto; padding:var(--s3) var(--s4); }
  h1 { font-size:34px; }
  h2 { font-size:26px; }
  h3 { font-size:20px; }
  h4 { font-size:18px; }
  .lbl { font-size:12px; }
  .zahl { font-size:26px; }
  section { padding-top:var(--s8); padding-bottom:var(--s8); }
  .hero { min-height:420px; }
  .hero .box { padding:var(--s5); margin:var(--s5) var(--pad-x); }
  .fakten { grid-template-columns:1fr 1fr; gap:var(--s6) var(--s5); }
  .two, .two-3-2, .leist { grid-template-columns:1fr; gap:var(--s7); }
  .karten, .galerie { grid-template-columns:1fr 1fr; }
  .faq dt { font-size:20px; }
  .fuss .sp { grid-template-columns:1fr 1fr; gap:var(--s6); }
}

@media (max-width:600px) {
  .fakten { grid-template-columns:1fr; }
  .karten, .galerie { grid-template-columns:1fr; }
  .fuss .sp { grid-template-columns:1fr; }
  .btns .btn, .btns .btn-2 { width:100%; }
}

@media print {
  body { background:#fff; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .top, .aktuell, .skip { display:none; }
}