/* Anna’s Frisierbar · Gestaltung nach DESIGN-BRIEF.md
   Schriften: Noto Serif Display (Titel), Noto Serif (Text), Carrois Gothic (Notizen, Knöpfe, Woche)
   Farben gemessen: Logo-Magenta #CF4392, Website-Rosé #ECDCE4, Flyer-Rosa #FFC3EA, Abzeichen-Mauve #AA8F9A */

@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../schriften/noto-serif-display-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: "Noto Serif Display"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../schriften/noto-serif-display-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: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../schriften/noto-serif-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: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../schriften/noto-serif-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: "Noto Serif"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../schriften/noto-serif-italic-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: "Carrois Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../schriften/carrois-gothic-latin.woff2) format("woff2"); }

:root {
  --rose: #ECDCE4;          /* Grund der bisherigen Website */
  --puder: #F7EFF3;         /* helleres Rosé für ruhige Flächen */
  --weiss: #FFFFFF;         /* Schild-Flächen */
  --tinte: #1D1719;         /* Logo-Schwarz, leicht wärmer */
  --tinte-2: #4D4247;       /* Nebentext */
  --magenta: #CF4392;       /* Logo-A: Linien, Schwung, große Akzente */
  --magenta-tief: #A42F6B;  /* kleine Schrift, Knöpfe (Kontrast ≥ 4,5:1) */
  --mauve: #AA8F9A;         /* Linie des Abzeichens „SEIT 2024“ */
  --mauve-text: #765C69;    /* derselbe Ton dunkler für kleine Schrift (≥ 4,5:1 auf Weiß, Puder, Rosé) */
  --flyer: #FFC3EA;         /* Eröffnungsflyer */
  --linie: rgba(29, 23, 25, .14);

  --schrift-titel: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --schrift-text: "Noto Serif", Georgia, "Times New Roman", serif;
  --schrift-notiz: "Carrois Gothic", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;

  /* Bewegung: Linien entstehen wie mit dem Stift gezogen */
  --ease-zug: cubic-bezier(.65, .05, .36, 1);
  --ease-aus: cubic-bezier(.22, .61, .36, 1);
  --dur-linie: 900ms;
  --dur-notiz: 350ms;
  --dur-wechsel: 500ms;

  --rand: clamp(20px, 5.2vw, 64px);
  --breite: 1260px;
  --kopf-h: 68px;
  --abstand: clamp(72px, 11vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
main > section[id] { scroll-margin-top: calc(-1 * var(--abstand) + 56px); } /* Ankersprung landet an der Überschrift, nicht am Abschnittsrand */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--rose); color: var(--tinte);
  font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.62;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 64em) { body { font-size: 1.125rem; } }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--magenta-tief); text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (hover: hover) { a:hover { color: var(--tinte); } }
:focus-visible { outline: 3px solid var(--magenta-tief); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 600; line-height: 1.04; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem); }
h3 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); line-height: 1.12; }
p { margin: 0 0 1em; }
blockquote { margin: 0; }
mark { background: none; color: inherit; }
.nur-lesbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 999px; font-family: var(--schrift-notiz); }
.sprung:focus { top: 12px; color: #fff; }

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .72em 1.35em; border-radius: 999px;
  background: var(--magenta-tief); color: #fff; text-decoration: none;
  font-family: var(--schrift-notiz); font-size: 1.08rem; letter-spacing: .02em; line-height: 1.1;
  transition: background-color .25s var(--ease-aus), transform .25s var(--ease-aus);
}
@media (hover: hover) { .knopf:hover { background: var(--tinte); color: #fff; } }
.knopf:active { transform: translateY(1px); }
.knopf--tinte { background: var(--tinte); }
@media (hover: hover) { .knopf--tinte:hover { background: var(--magenta-tief); } }
.textlink {
  font-family: var(--schrift-notiz); font-size: 1.08rem; letter-spacing: .02em; color: var(--tinte);
  text-decoration: none; background: linear-gradient(var(--magenta), var(--magenta)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px; display: inline-flex; align-items: center; min-height: 44px;
}
.textlink::after { content: "→"; display: inline-block; margin-left: .4em; transition: transform .25s var(--ease-aus); }
@media (hover: hover) { .textlink:hover { color: var(--magenta-tief); } }
@media (hover: hover) and (pointer: fine) { .textlink:hover::after { transform: translateX(3px); } } /* am Handy bleibt der Pfeil stehen */
.textlink--tinte { background-image: linear-gradient(var(--tinte), var(--tinte)); }
.sterne { color: var(--magenta); letter-spacing: .08em; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--rose); transition: box-shadow .3s var(--ease-aus); }
.kopf--gerollt { box-shadow: 0 1px 0 var(--linie), 0 10px 30px -22px rgba(29, 23, 25, .45); }
.kopf__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 14px; min-height: var(--kopf-h); }
.kopf__marke { flex: none; margin-right: auto; display: block; padding-block: 3px; }
.kopf__marke img { height: 44px; width: auto; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; }
.kopf__nav a { font-family: var(--schrift-notiz); font-size: 1.12rem; letter-spacing: .02em; color: var(--tinte); text-decoration: none; }
@media (hover: hover) { .kopf__nav a:hover { color: var(--magenta-tief); } }
.knopf--kopf { min-height: 44px; padding: .55em 1.1em; font-size: 1rem; white-space: nowrap; }
.kopf__menue { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: var(--tinte); cursor: pointer; }
.kopf__striche { position: relative; width: 22px; height: 12px; }
.kopf__striche i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-aus); }
.kopf__striche i:first-child { top: 0; }
.kopf__striche i:last-child { top: 10px; }
.kopf__menue[aria-expanded="true"] .kopf__striche i:first-child { transform: translateY(5px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__striche i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 63.99em) {
  .kopf__nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--puder); border-top: 1px solid var(--linie); box-shadow: 0 24px 40px -30px rgba(29,23,25,.5); display: none; }
  .js .kopf__nav[data-offen] { display: block; animation: nav-auf var(--dur-notiz) var(--ease-aus); } /* auf mit kurzem Gleiten, zu sofort */
  .no-js .kopf__nav { display: block; position: static; order: 3; flex-basis: 100%; border-top: 0; box-shadow: none; background: none; }
  .no-js .kopf { position: static; }
  .no-js .kopf__innen { flex-wrap: wrap; }
  .no-js .kopf__menue { display: none; }
  .no-js .kopf__nav ul { padding: 0 0 12px; }
  .kopf__nav ul { padding: 10px var(--rand) 22px; }
  .kopf__nav li + li { border-top: 1px solid var(--linie); }
  .kopf__nav a { display: flex; align-items: center; min-height: 56px; font-size: 1.3rem; }
}
@keyframes nav-auf { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 23.5em) { .knopf--kopf { padding: .55em .85em; font-size: .95rem; } .kopf__marke img { height: 38px; } }
@media (min-width: 64em) {
  :root { --kopf-h: 78px; }
  .kopf__marke img { height: 52px; }
  .kopf__nav ul { display: flex; gap: clamp(18px, 2.2vw, 34px); }
  .kopf__nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .kopf__menue { display: none; }
  .knopf--kopf { margin-left: 10px; }
}

/* ---------- Gemeinsames Raster ---------- */
.auftakt, .ergebnisse, .stimmen, .preise, .mobil, .person, .salon { padding: var(--abstand) var(--rand); }
.auftakt > *, .ergebnisse > *, .stimmen > *, .preise > *, .person > *, .salon > * { max-width: var(--breite); margin-left: auto; margin-right: auto; }

/* ---------- Auftakt: Kopfzeile steht, die Überschrift steigt Zeile für Zeile auf, das Foto wird mit einem schrägen Schwung
   (Winkel des Querstrichs im Logo) hereingezogen, danach Text, Wege und Woche, zuletzt die Notizen (site.js 3b).
   Ohne Skript, bei „Bewegung reduzieren“ und beim Neuladen weiter unten steht alles fertig da (Klasse „einstieg“ nur aus dem Kopf-Skript). */
.auftakt__zeile { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } /* Unterlängen bleiben sichtbar */
.auftakt__zeile > span { display: block; }
.einstieg .auftakt__zeile > span { transform: translateY(108%); }
.einstieg--los .auftakt__zeile > span { transform: none; transition: transform .95s var(--ease-zug); }
.einstieg--los .auftakt__zeile:nth-child(2) > span { transition-delay: .09s; }
.einstieg--los .auftakt__zeile:nth-child(3) > span { transition-delay: .18s; }
.einstieg .notizbild--auftakt .notizbild__foto { -webkit-mask-image: linear-gradient(56deg, #000 42%, transparent 58%); mask-image: linear-gradient(56deg, #000 42%, transparent 58%); -webkit-mask-size: 320% 320%; mask-size: 320% 320%; -webkit-mask-position: 100% 0; mask-position: 100% 0; } /* Fenster auf dem durchsichtigen Ende des Verlaufs */
.einstieg .notizbild--auftakt .notizbild__foto picture { transform: scale(1.06); }
.einstieg--los .notizbild--auftakt .notizbild__foto { -webkit-mask-position: 0 100%; mask-position: 0 100%; transition: -webkit-mask-position 1.15s var(--ease-zug) .2s, mask-position 1.15s var(--ease-zug) .2s; }
.einstieg--los .notizbild--auftakt .notizbild__foto picture { transform: none; transition: transform 1.6s var(--ease-aus) .2s; }
.einstieg .notizbild__unter, .einstieg .auftakt__text, .einstieg .woche-block { opacity: 0; transform: translateY(14px); }
.einstieg--los .notizbild__unter, .einstieg--los .auftakt__text, .einstieg--los .woche-block { opacity: 1; transform: none; transition: opacity var(--dur-wechsel) var(--ease-aus), transform var(--dur-wechsel) var(--ease-aus); }
.einstieg--los .auftakt__text { transition-delay: .7s; }
.einstieg--los .notizbild__unter { transition-delay: .85s; }
.einstieg--los .woche-block { transition-delay: .9s; }
/* Überspringen (Tippen, Taste, Scrollen): alles sofort an seinen Platz */
.einstieg--sofort .auftakt__zeile > span, .einstieg--sofort .notizbild--auftakt .notizbild__foto, .einstieg--sofort .notizbild--auftakt .notizbild__foto picture,
.einstieg--sofort .notizbild__unter, .einstieg--sofort .auftakt__text, .einstieg--sofort .woche-block { transition: none !important; }

/* ---------- 1 · Auftakt ---------- */
.auftakt { padding-top: clamp(16px, 4vw, 56px); padding-bottom: clamp(48px, 7vw, 96px); display: grid; gap: 22px; max-width: none; }
.auftakt > * { margin-left: 0; margin-right: 0; } /* im Raster bündig links, sonst schrumpfen H1 und Wochenleiste mittig */
.auftakt__titel { font-size: clamp(2.55rem, 1.35rem + 5.2vw, 5.6rem); line-height: 1; letter-spacing: -.018em; max-width: 11.5ch; }
.auftakt__unter { font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); color: var(--tinte-2); max-width: 34em; margin: 0; }
@media (min-width: 64em) { .auftakt__unter { margin-top: 26px; } }
.wege { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--linie); }
.weg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.weg__name { margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.32rem; line-height: 1.2; }
.weg__name span { display: block; font-family: var(--schrift-notiz); font-weight: 400; font-size: 1rem; letter-spacing: .02em; color: var(--tinte-2); margin-top: 2px; }
.auftakt__stimmen { margin: 18px 0 0; font-family: var(--schrift-notiz); font-size: 1.02rem; letter-spacing: .02em; }
.auftakt__stimmen a { color: var(--tinte); text-decoration: none; }
@media (hover: hover) { .auftakt__stimmen a:hover { color: var(--magenta-tief); } }
.woche-block { display: grid; gap: 10px; }

/* Handy: Texte im Hero mittig (Überschrift, Bildzeile, Einleitung, Wege, Bewertung, heute-Zeile) */
@media (max-width: 39.99em) {
  .auftakt__titel { margin-inline: auto; text-align: center; }
  .notizbild--auftakt .notizbild__unter, .auftakt__unter, .auftakt__stimmen, .woche__heute { text-align: center; }
  .auftakt__unter { margin-inline: auto; }
  .weg { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
}
/* Ergebnis im Format 3:5: das ganze Haar bis in die Spitzen, Schultern symmetrisch */
.notizbild--auftakt .notizbild__foto { aspect-ratio: 3 / 5; }
.auftakt__text { margin-top: 4px; }
/* Handy und Tablet: Foto und Notizen nebeneinander wie am Desktop (Notizen als Spalte rechts, Linien vom Haar dorthin).
   Das Foto ist nur so hoch, dass Überschrift, Foto und Bildzeile zusammen in den ersten Bildschirm passen, auch mit
   eingeblendeter Browserleiste (svh); höchstens 64 % der Breite, damit die Notizen Platz haben.
   --h1 ist dieselbe Größe wie .auftakt__titel (drei Zeilen, Zeilenhöhe 1). */
@media (max-width: 63.99em) {
  .auftakt { --h1: clamp(2.55rem, 1.35rem + 5.2vw, 5.6rem); --foto-h: clamp(300px, calc(100svh - var(--kopf-h) - 3 * var(--h1) - 100px), 760px); }
  .notizbild--auftakt { display: grid; grid-template-columns: min(calc(var(--foto-h) * .6), 64%) minmax(0, 1fr); column-gap: clamp(12px, 3vw, 28px); }
  .notizbild--auftakt .notizbild__foto { grid-column: 1; }
  .notizbild--auftakt .notizen { grid-column: 2; }
  .notizbild--auftakt .notiz { background: none; box-shadow: none; padding: 0 0 0 2px; font-size: clamp(.9rem, .78rem + .55vw, 1.12rem); line-height: 1.25; }
  .notizbild--auftakt .notizbild__unter { grid-column: 1 / 3; }
}
@supports not (height: 100svh) {
  @media (max-width: 63.99em) { .auftakt { --foto-h: clamp(300px, calc(100vh - var(--kopf-h) - 3 * var(--h1) - 140px), 760px); } }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .woche-block { max-width: 560px; }
}
@media (min-width: 64em) {
  .auftakt { grid-template-columns: minmax(0, 1.08fr) minmax(0, .74fr) minmax(170px, .42fr); grid-template-rows: auto 1fr auto; column-gap: clamp(28px, 3vw, 52px); row-gap: 0; align-items: start; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding-top: clamp(16px, 2.2vw, 32px); }
  /* Proportion zum hohen Foto: Überschrift groß und bündig mit der Fotokante oben, Text und Wege unten bündig mit dem Bildende */
  .auftakt__titel { grid-column: 1; grid-row: 1; padding-top: 0; margin: -.06em 0 0; max-width: 11.5ch; font-size: clamp(3.2rem, .2rem + 5.6vw, 5.4rem); } /* immer drei Zeilen in der Spalte */
  .auftakt__text { grid-column: 1; grid-row: 2; align-self: end; max-width: none; margin: 32px 0 0; }
  .notizbild--auftakt { grid-column: 2 / 4; grid-row: 1 / 3; max-width: none; margin: 0; }
  /* groß, auf hohen Bildschirmen nie höher als das Fenster (3:5) */
  .notizbild--auftakt .notizbild__foto { width: min(100%, calc((max(100svh, 860px) - var(--kopf-h) - 196px) * 3 / 5)); } /* Foto, Bildzeile und Wochenleiste passen ins erste Bild */
  .woche-block { grid-column: 1 / 4; grid-row: 3; max-width: none; margin: 24px 0 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- Woche ---------- */
.woche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.35); }
.woche__tag { display: grid; justify-items: center; gap: 2px; padding: 10px 2px 11px; font-family: var(--schrift-notiz); letter-spacing: .02em; position: relative; }
.woche__tag + .woche__tag { border-left: 1px solid var(--linie); }
.woche__name { font-size: 1.05rem; color: var(--tinte); }
.woche__zeit { font-size: .9rem; color: var(--tinte-2); white-space: nowrap; }
.woche__tag--mobil { background: rgba(207, 67, 146, .1); }
.woche__tag--mobil .woche__zeit { color: var(--magenta-tief); }
.woche__tag--zu .woche__zeit { color: var(--mauve-text); }
.woche__tag--heute { background: var(--weiss); }
.woche__tag--heute::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--magenta); }
.woche__heute { margin: 0; font-family: var(--schrift-notiz); font-size: 1.02rem; letter-spacing: .02em; color: var(--tinte-2); }
.woche__heute strong { font-weight: 400; color: var(--tinte); }
@media (max-width: 22.5em) { .woche__zeit { font-size: .78rem; } }

/* ---------- Notizbild: Ergebnis mit ihren Notizen ---------- */
.notizbild { position: relative; margin: 0; }
.notizbild__foto { position: relative; border-radius: 6px; overflow: hidden; background: #d9c4cd; aspect-ratio: 2 / 3; }
.notizbild__foto picture, .notizbild__foto img, .notizbild__foto video { width: 100%; height: 100%; object-fit: cover; }
.notizbild__foto picture { position: absolute; inset: 0; }
.notizen { list-style: none; margin: 0; padding: 0; }
.notiz {
  position: absolute; z-index: 3; max-width: 46%; pointer-events: none;
  font-family: var(--schrift-notiz); font-size: .98rem; line-height: 1.2; letter-spacing: .015em; color: var(--tinte);
  background: rgba(255, 255, 255, .93); padding: 7px 10px 8px; border-radius: 6px;
  box-shadow: 0 6px 18px -12px rgba(29,23,25,.6);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-notiz) var(--ease-aus), transform var(--dur-notiz) var(--ease-aus);
}
.no-js .notiz, .notizbild--sichtbar .notiz { opacity: 1; transform: none; }
/* Auftakt: die Notiz wird von links her sichtbar, sobald ihre Linie ankommt (Verzögerung je Notiz aus site.js) */
.notizbild--auftakt .notiz { clip-path: inset(-6px 100% -6px -6px); transition: opacity var(--dur-notiz) var(--ease-aus), transform var(--dur-notiz) var(--ease-aus), clip-path .6s var(--ease-zug); }
.notizbild--auftakt.notizbild--sichtbar .notiz, .no-js .notizbild--auftakt .notiz { clip-path: inset(-6px); }
.no-js .notiz { position: static; display: inline-block; margin: 0 6px 6px 0; } /* ohne Skript: Notizen als Reihe unter dem Foto */
@media (max-width: 39.99em) { .notiz { font-size: .9rem; padding: 5px 8px 6px; } }
.notizbild__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.notizbild__linien path { fill: none; stroke: var(--magenta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notizbild__linien .ring { fill: rgba(255,255,255,.95); stroke: var(--magenta); stroke-width: 1.5; }
.notizbild__linien .kern { fill: var(--magenta); }
.notizbild__linien g { opacity: 0; transition: opacity .2s linear; }
.notizbild--sichtbar .notizbild__linien g { opacity: 1; }
.notizbild__unter { margin-top: 12px; font-family: var(--schrift-notiz); font-size: .98rem; letter-spacing: .02em; color: var(--tinte-2); line-height: 1.4; }
.notizbild__unter a { color: var(--magenta-tief); white-space: nowrap; }

/* Desktop-Auftakt: Notizen in eigener Spalte rechts vom Foto */
@media (min-width: 64em) {
  .notizbild--auftakt { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(150px, 1fr); column-gap: clamp(28px, 3vw, 48px); }
  .notizbild--auftakt .notizbild__foto { grid-column: 1; }
  .notizbild--auftakt .notizen { grid-column: 2; }
  .notizbild--auftakt .notiz { max-width: none; background: none; box-shadow: none; padding: 0 0 0 2px; font-size: 1.12rem; }
  .notizbild--auftakt .notizbild__unter { grid-column: 1 / 3; }
}

/* ---------- 2 · Ergebnisse ---------- */
.ergebnisse { background: var(--puder); }
.ergebnisse__kopf { text-align: left; }
.zufall { font-size: clamp(3rem, 1.6rem + 6.5vw, 7rem); line-height: .98; letter-spacing: -.02em; padding-bottom: .62em; }
.zufall__wort { position: relative; display: inline-block; }
/* Die Strähne liegt wie ein Unterstrich unter dem Wort (freigestelltes Bild, keine Animation) */
.zufall__straehne { position: absolute; left: -2%; width: 104%; max-width: none; top: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(120, 80, 40, .12)); }
.ergebnisse__einleitung { margin-top: clamp(16px, 2.5vw, 30px); max-width: 36em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--tinte-2); }

.faelle { margin-top: clamp(32px, 5vw, 64px); }
.faelle__wahl { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); padding: 4px var(--rand) 14px; margin: 0 calc(-1 * var(--rand)); scrollbar-width: thin; }
.no-js .faelle__wahl { display: none; }
.wahl { flex: 0 0 auto; scroll-snap-align: start; display: grid; justify-items: center; gap: 8px; width: 92px; padding: 4px 2px; border: 0; background: none; cursor: pointer; color: var(--tinte); font-family: var(--schrift-notiz); font-size: .95rem; letter-spacing: .015em; line-height: 1.15; text-align: center; }
.wahl picture { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--linie); transition: box-shadow .25s var(--ease-aus); }
.wahl img { width: 100%; height: 100%; object-fit: cover; }
.wahl[aria-selected="true"] picture { box-shadow: 0 0 0 2px var(--puder), 0 0 0 4px var(--magenta); }
.wahl[aria-selected="true"] span { color: var(--magenta-tief); }
@media (hover: hover) { .wahl:hover picture { box-shadow: 0 0 0 2px var(--puder), 0 0 0 3px var(--mauve); } }
@media (hover: hover) { .wahl[aria-selected="true"]:hover picture { box-shadow: 0 0 0 2px var(--puder), 0 0 0 4px var(--magenta); } }

.faelle__buehne { margin-top: 18px; }
.fall { display: grid; gap: 26px; }
.no-js .fall + .fall { margin-top: 64px; }
.fall .notizbild__foto { max-width: 520px; }
.fall__bild { transition: opacity var(--dur-wechsel) var(--ease-aus); }
.fall__bild--vorher { opacity: 0; }
.fall__video { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-aus); background: transparent; }
[data-zustand="vorher"] .fall__bild--vorher { opacity: 1; }
/* Nachher bleibt darunter voll deckend, nur Vorher blendet darüber (keine helle Delle in der Überblendung) */
[data-zustand="video"] .fall__video { opacity: 1; pointer-events: auto; }
[data-zustand="video"] .notiz, [data-zustand="video"] .notizbild__linien,
[data-zustand="vorher"] .notiz:not(.notiz--vorher), [data-zustand="vorher"] .notizbild__linien g:not(.linie--vorher) { opacity: 0 !important; transition: opacity .2s var(--ease-aus) !important; } /* raus sofort, ohne die Verzögerung vom Einzeichnen */
/* Notizen zum Ausgangszustand gibt es nur im Vorher-Foto */
.notizbild:not([data-zustand="vorher"]) .notiz--vorher, .notizbild:not([data-zustand="vorher"]) .linie--vorher { opacity: 0 !important; visibility: hidden; }
.fall__marke { position: absolute; left: 12px; top: 12px; z-index: 3; pointer-events: none; font-family: var(--schrift-notiz); font-size: .95rem; letter-spacing: .04em; background: var(--tinte); color: #fff; padding: 4px 10px 5px; border-radius: 999px; opacity: 0; transition: opacity .3s var(--ease-aus); }
[data-zustand="vorher"] .fall__marke { opacity: 1; }
.umschalter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); margin-bottom: 22px; }
.no-js .umschalter { display: none; }
.umschalter button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--tinte); font-family: var(--schrift-notiz); font-size: 1.02rem; letter-spacing: .02em; cursor: pointer; }
.umschalter button span { color: var(--tinte-2); font-size: .9em; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.umschalter button[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
.fall__titel { margin-bottom: 16px; }
.fall__zitat { border-left: 2px solid var(--magenta); padding-left: 18px; }
.fall__zitat p { font-size: clamp(1.06rem, 1rem + .25vw, 1.2rem); margin-bottom: 8px; }
.fall__zitat footer { font-family: var(--schrift-notiz); font-size: .98rem; letter-spacing: .02em; color: var(--tinte-2); }
.fall__zitat--kundin { margin-top: 22px; border-left-color: var(--mauve); }
.fall__zitat--kundin p { font-style: italic; }
.fall__leistung { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linie); color: var(--tinte-2); }
.fall__leistung span { display: block; font-family: var(--schrift-notiz); font-size: .92rem; letter-spacing: .06em; color: var(--mauve-text); }
.fall__buchen { margin: 14px 0 0; }
.faelle__mehr { margin-top: clamp(36px, 5vw, 56px); font-family: var(--schrift-notiz); font-size: 1.04rem; letter-spacing: .02em; color: var(--tinte-2); }

@media (min-width: 40em) {
  .fall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 64px); }
}
@media (min-width: 64em) {
  .faelle__wahl { margin: 0; padding: 4px 0 14px; flex-wrap: wrap; overflow: visible; gap: 10px 14px; }
}
@media (min-width: 64em) and (max-width: 72em) {
  .wahl { width: 84px; }
  .faelle__wahl { gap: 10px; }
  .fall { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .fall__text { padding-top: 8px; max-width: 36em; }
}

/* ---------- 3 · Gegenprobe ---------- */
.stimmen { background: var(--rose); }
.stimmen__titel { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); max-width: 18ch; line-height: 1.08; }
/* Desktop: je Satzteil eine Zeile, Umbruch am Komma statt vier zerrissener Zeilen in schmaler Spalte */
@media (min-width: 64em) {
  .stimmen__titel { max-width: none; font-size: clamp(2.6rem, .8rem + 2.8vw, 3.4rem); }
  .stimmen__satz { display: block; }
}
/* Bewertungszeile: Angaben nur als Ganzes umbrechen (nie „aus / 37“ oder „Alle / Bewertungen“) */
.stimmen__stueck { white-space: nowrap; }
.stimmen__wer { margin-top: 14px; font-family: var(--schrift-notiz); font-size: 1.05rem; letter-spacing: .02em; color: var(--tinte-2); }
.stimmen__zahl { margin-top: 22px; font-family: var(--schrift-notiz); font-size: 1.02rem; letter-spacing: .02em; color: var(--tinte-2); max-width: 44em; }
@media (max-width: 21em) { .stimmen__zahl { font-size: .96rem; } } /* sonst ist „4,9 von 5 aus 37 Google‑Bewertungen,“ bei 320 px 6 px zu breit */
.stimmen__liste { list-style: none; padding: 0; margin-top: clamp(32px, 5vw, 60px); display: grid; gap: 14px; }
.stimme { background: var(--weiss); border-radius: 6px; padding: 22px 22px 18px; }
.stimme p { margin: 0; }
.stimme blockquote p { font-size: 1.05rem; line-height: 1.6; }
.stimme mark { background-image: linear-gradient(var(--magenta), var(--magenta)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 2px; padding-bottom: 2px; transition: background-size var(--dur-linie) var(--ease-zug); }
.no-js .stimme mark, .stimme--sichtbar mark { background-size: 100% 2px; }
.stimme__wer { margin-top: 12px !important; font-family: var(--schrift-notiz); letter-spacing: .02em; color: var(--tinte-2); }
.stimmen__hinweis { margin-top: 28px; font-size: .92rem; color: var(--tinte-2); max-width: 46em; }
@media (min-width: 48em) { .stimmen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .stimmen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stimmen__liste .stimme:first-child { grid-row: span 2; } .stimmen__liste .stimme:first-child blockquote p { font-size: 1.2rem; } }

/* ---------- 4 · Preise ---------- */
.preise { background: var(--puder); }
.preise__kopf p { max-width: 38em; color: var(--tinte-2); margin-top: 16px; }
.preise__kopf .knopf { margin-top: 4px; }
.preise__sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.preise__sprung a { font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .02em; color: var(--tinte); text-decoration: none; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); background: rgba(255,255,255,.5); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .preise__sprung a:hover { box-shadow: inset 0 0 0 1px var(--magenta); color: var(--magenta-tief); } }
/* Der Aushang: weiße Tafel mit feiner Magenta-Innenlinie wie ihr Ladenschild */
.aushang { margin-top: clamp(32px, 5vw, 60px); background: var(--weiss); border-radius: 4px; padding: clamp(26px, 5vw, 64px) clamp(18px, 4.5vw, 64px); position: relative; display: grid; gap: clamp(34px, 5vw, 56px); }
.aushang::before { content: ""; position: absolute; inset: clamp(8px, 1.2vw, 14px); border: 1.5px solid var(--magenta); border-radius: 2px; pointer-events: none; }
.preisgruppe { position: relative; }
.preisgruppe h3 { margin-bottom: 12px; }
.preisgruppe__hinweis { margin: 14px 0 4px; font-family: var(--schrift-notiz); font-size: .95rem; letter-spacing: .04em; color: var(--mauve-text); }
.preistabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.preistabelle thead th { font-family: var(--schrift-notiz); font-weight: 400; font-size: .92rem; letter-spacing: .05em; color: var(--mauve-text); text-align: right; padding: 4px 0 8px 10px; }
.preistabelle thead th:first-child { text-align: left; padding-left: 0; }
.preistabelle tbody th { text-align: left; font-weight: 400; padding: 11px 10px 11px 0; vertical-align: top; }
.preistabelle tbody th small { display: block; font-family: var(--schrift-notiz); font-size: .9rem; letter-spacing: .02em; color: var(--tinte-2); margin-top: 2px; }
.preistabelle td { text-align: right; padding: 11px 0 11px 10px; white-space: nowrap; vertical-align: top; }
.preistabelle tr { border-bottom: 1px dotted rgba(29,23,25,.22); }
.preistabelle tr:last-child { border-bottom: 0; }
.preistabelle__extra th, .preistabelle__extra td { color: var(--magenta-tief); }
@media (max-width: 23.5em) { /* schmale Handys: Tabelle bleibt innerhalb der Magenta-Linie */
  .aushang { padding-left: 14px; padding-right: 14px; }
  .aushang::before { inset: 6px; }
  .preistabelle { font-size: .94rem; }
  .preistabelle td, .preistabelle thead th { padding-left: 6px; }
  .preistabelle tbody th { padding-right: 6px; hyphens: auto; }
}
@media (max-width: 21.5em) { .aushang { padding-left: 10px; padding-right: 10px; } .aushang::before { inset: 5px; } .preistabelle { font-size: .88rem; } }
.aushang__stand { margin: 0; font-family: var(--schrift-notiz); font-size: .92rem; letter-spacing: .04em; color: var(--mauve-text); }
@media (min-width: 64em) {
  /* zwei ausgewogene Spalten: links Schneiden, Kinder, Augen · rechts Farbe, Herren */
  .aushang { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 6vw, 96px); row-gap: clamp(34px, 4vw, 52px); align-items: start; }
  #preise-schnitt { grid-column: 1; grid-row: 1; }
  #preise-farbe { grid-column: 2; grid-row: 1 / 3; }
  #preise-kinder { grid-column: 1; grid-row: 2; }
  #preise-herren { grid-column: 2; grid-row: 3; }
  #preise-augen { grid-column: 1; grid-row: 3; }
  .aushang__stand { grid-column: 1 / 3; grid-row: 4; }
}

/* ---------- 5 · Montags mobil (Flyer-Rosa) ---------- */
.mobil { background: var(--flyer); display: grid; gap: clamp(36px, 5vw, 64px); }
.mobil > * { max-width: var(--breite); width: 100%; margin: 0 auto; }
.mobil h2 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); max-width: 13ch; }
.mobil__lead { margin-top: 20px; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.42rem); line-height: 1.55; max-width: 30em; }
.mobil__fakten { margin: 26px 0 0; display: grid; gap: 0; border-top: 1.5px solid var(--tinte); }
.mobil__fakten div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgba(29,23,25,.25); }
.mobil__fakten dt { font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .05em; color: var(--tinte); }
.mobil__fakten dd { margin: 0; font-size: 1.16rem; line-height: 1.5; }
.mobil__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.mobil__knoepfe .knopf { font-size: 1.15rem; }
@media (min-width: 64em) {
  .mobil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; max-width: none; }
  .karte { align-self: start; } /* bei langer Textspalte (1024 px) keine Leerfläche über der Karte */
  .mobil > * { max-width: none; margin: 0; }
  .mobil__text { justify-self: end; max-width: 600px; }
  .karte { justify-self: start; max-width: 620px; }
  .mobil__fakten div { grid-template-columns: 11em 1fr; gap: 16px; align-items: baseline; }
}

/* Karte: ruhig, nur Orte im Kreis */
.karte { margin: 0; }
.karte__svg { width: 100%; height: auto; overflow: visible; font-family: var(--schrift-notiz); }
.karte__kreis { fill: rgba(255, 255, 255, .5); stroke: var(--tinte); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .karte__kreis { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-zug); }
.js .karte--sichtbar .karte__kreis { stroke-dashoffset: 0; }
.karte__ort circle { fill: var(--tinte); }
.karte__ort text { font-size: 7.4px; fill: var(--tinte); letter-spacing: .02em; }
.karte__salon circle:first-child { fill: var(--weiss); stroke: var(--magenta); stroke-width: 1.6; }
.karte__salon circle:nth-child(2) { fill: var(--magenta); }
.karte__salon text { font-size: 7.8px; fill: var(--magenta-tief); letter-spacing: .04em; }
.karte__mass line { stroke: var(--tinte); stroke-width: .6; stroke-dasharray: 2 2; }
.karte__mass text { font-size: 6.6px; fill: var(--tinte-2); letter-spacing: .05em; }
.karte__nord path { fill: var(--tinte); }
.karte__nord text { font-size: 7px; fill: var(--tinte); letter-spacing: .06em; }
@media (max-width: 39.99em) { .karte__ort text { font-size: 9px; } .karte__salon text { font-size: 9.4px; } .karte__mass text { font-size: 8px; } }
.karte figcaption { margin-top: 14px; padding-left: 6.9%; /* Kreiskante: 16 von 232 Einheiten */ font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .02em; line-height: 1.45; max-width: 34em; }

/* ---------- 6 · Anna-Lena ---------- */
.person { background: var(--puder); display: grid; gap: clamp(28px, 4vw, 48px); }
.person__bild { margin: 0; border-radius: 6px; overflow: hidden; max-width: 560px; }
.person__text p { max-width: 34em; }
.person__text h2 { margin-bottom: 20px; }
.person__zitat { margin: 28px 0; font-family: var(--schrift-titel); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.3; letter-spacing: -.005em; }
.person__zitat p { margin: 0; }
.person__weg { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
.person__weg li { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.person__weg span { font-family: var(--schrift-notiz); font-size: 1.05rem; letter-spacing: .04em; color: var(--magenta-tief); }
.person__neben { display: grid; gap: 28px; }
.person__presse, .person__spende { margin: 0; }
.person__presse a { display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie); }
.person__presse figcaption, .person__spende figcaption { margin-top: 10px; font-family: var(--schrift-notiz); font-size: .98rem; letter-spacing: .02em; color: var(--tinte-2); line-height: 1.4; }
/* Haarspende: Zopf im Hochformat 3:4, daneben ihr Satz; am Handy etwa so hoch wie der Text, ab Tablet höchstens 240 px breit */
.person__spende { display: grid; grid-template-columns: min(42%, 240px) minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); align-items: center; }
.person__spende picture { display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; }
.person__spende img { width: 100%; height: 100%; object-fit: cover; }
.person__spende figcaption { margin: 0; }
.person__spende figcaption p:first-child { font-family: var(--schrift-titel); font-size: clamp(1.1rem, 1rem + .6vw, 1.42rem); line-height: 1.32; color: var(--tinte); letter-spacing: 0; margin-bottom: 10px; }
.person__klein { font-size: .95rem; margin: 0; }
@media (min-width: 64em) {
  /* links Porträt und Zeitungsartikel, rechts Text und Haarspende: beide Spalten etwa gleich lang */
  .person { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-areas: "bild text" "presse spende"; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(32px, 4vw, 48px); align-items: start; max-width: none; }
  .person > * { max-width: none; margin: 0; }
  .person__bild { grid-area: bild; width: 100%; }
  .person__text { grid-area: text; }
  .person__neben { display: contents; }
  .person__presse { grid-area: presse; }
  /* Zopf genau so hoch wie der Zeitungsartikel links: Spalten .9 : 1, Artikel 1,583 : 1, Zopf 3 : 4 → 42,6 % der Spalte */
  .person__spende { grid-area: spende; grid-template-columns: 42.6% minmax(0, 1fr); gap: clamp(22px, 2.4vw, 34px); align-self: start; }
}
@media (min-width: 64em) { .person, .mobil { padding-left: max(var(--rand), calc((100% - var(--breite)) / 2)); padding-right: max(var(--rand), calc((100% - var(--breite)) / 2)); } } /* 100 % statt 100vw: ohne Bildlaufleiste gerechnet */

/* ---------- 7 · Salon ---------- */
.salon { background: var(--rose); }
.salon__raster { display: grid; gap: clamp(28px, 4vw, 40px); }
.salon h2 { max-width: var(--breite); margin-bottom: clamp(24px, 3.5vw, 44px); }
.salon figure { margin: 0; }
.salon__innen { border-radius: 6px; overflow: hidden; aspect-ratio: 13 / 9; }
.salon__innen img, .salon__aussen img { width: 100%; height: 100%; object-fit: cover; }
.salon__unten { display: grid; gap: 22px; margin-top: 16px; }
.salon__aussen picture { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 17 / 10; }
.salon__aussen figcaption { margin-top: 8px; font-family: var(--schrift-notiz); font-size: .98rem; letter-spacing: .02em; color: var(--tinte-2); }
.salon__mehr { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; align-content: start; }
.salon__mehr li { padding-left: 22px; position: relative; color: var(--tinte-2); }
.salon__mehr li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--magenta); }
.salon__mehr strong { color: var(--tinte); font-weight: 600; }
.schild { background: var(--weiss); position: relative; padding: clamp(30px, 3.2vw, 44px) clamp(24px, 3vw, 40px); border-radius: 4px; align-self: start; }
.schild::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--magenta); border-radius: 2px; pointer-events: none; }
.schild__logo { width: min(240px, 66%); margin: 0 auto 20px; }
.schild__adresse { text-align: center; font-size: 1.12rem; line-height: 1.45; margin-bottom: 0; }
.schild__adresse span { font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .03em; color: var(--tinte-2); }
.zeiten { margin: 22px 0; border-top: 1px solid var(--linie); }
.zeiten div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--linie); }
.zeiten dt { font-family: var(--schrift-notiz); letter-spacing: .02em; font-size: 1.05rem; }
.zeiten dd { margin: 0; text-align: right; }
.zeiten div[data-tag="1"] dd { color: var(--magenta-tief); }
.zeiten .zeiten--heute { background: rgba(207,67,146,.08); }
.zeiten .zeiten--heute dt::after { content: " · heute"; color: var(--magenta-tief); }
.schild__kontakt { margin: 0; display: grid; gap: 10px; }
.schild__kontakt div { display: grid; gap: 1px; }
/* größere Trefferfläche ohne Layoutänderung (Innenabstand an Inline-Links) */
.schild__kontakt a, .fuss__adresse a, .notizbild__unter a, .auftakt__stimmen a { padding-block: 11px; }
.schild__kontakt dt { font-family: var(--schrift-notiz); font-size: .95rem; letter-spacing: .03em; color: var(--tinte-2); }
.schild__kontakt dd { margin: 0; }
.schild__kontakt a { word-break: break-word; }
.schild__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; }
@media (min-width: 48em) {
  .salon__unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 64em) {
  .salon__raster { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--puder); padding: clamp(48px, 7vw, 80px) var(--rand) calc(clamp(40px, 6vw, 64px) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; display: grid; gap: 22px; justify-items: start; }
.fuss__logo { width: min(240px, 64vw); }
.fuss__adresse { margin: 0; color: var(--tinte-2); font-size: 1rem; }
.fuss__adresse a { color: var(--tinte-2); }
.fuss__adresse a { white-space: nowrap; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--schrift-notiz); letter-spacing: .02em; }
.fuss__nav a { color: var(--tinte); min-height: 44px; display: inline-flex; align-items: center; }
/* Handy: Name, Inhaberin, Straße und Telefon je in eigener Zeile, Links als 2 × 2 */
@media (max-width: 39.99em) {
  .fuss__trenner { display: none; }
  .fuss__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; }
}
@media (min-width: 40em) { .fuss__handy { display: none; } }
@media (min-width: 64em) { .fuss__innen { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 48px; } }

/* Credit: Website von Cardo Design (Marke Variante E, Schwung als SVG, DESIGN als Schrift, Goldstrich) */
.fuss__credit { max-width: var(--breite); margin: clamp(14px, 2.4vw, 22px) auto 0; font-family: var(--schrift-notiz); font-size: .95rem; letter-spacing: .02em; line-height: 1; color: var(--tinte-2); }
.cardo-credit { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.cardo-marke { display: inline-grid; justify-items: center; gap: 5px; line-height: 1; text-decoration: none; transition: opacity .2s; }
.cardo-marke__zug { display: block; width: auto; height: 30px; }
.cardo-marke__zeile { display: flex; align-items: center; gap: 7px; margin-left: 34px; }
.cardo-marke__wort { font: 500 9.5px/1 var(--schrift-notiz); letter-spacing: .42em; margin-right: -.42em; color: #2F2C28; }
.cardo-marke__strich { display: block; width: 30px; height: 2px; }
@media (hover: hover) { .cardo-marke:hover { opacity: .8; } }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.recht { background: var(--puder); padding: clamp(40px, 7vw, 96px) var(--rand) var(--abstand); }
.recht__innen { max-width: 44em; margin: 0 auto; }
.recht h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); margin-bottom: 28px; }
.recht h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 36px 0 10px; overflow-wrap: break-word; hyphens: auto; }
.recht a[href^="tel:"] { white-space: nowrap; }
.recht h3 { font-size: 1.15rem; margin: 22px 0 6px; font-family: var(--schrift-text); font-weight: 600; }
.recht p, .recht li { color: var(--tinte-2); }
.recht .offen { background: #fff3c4; color: var(--tinte); padding: 0 .25em; border-radius: 3px; }
.seite-404 { background: var(--puder); }   /* 404: kein Fuß, der Hintergrund bleibt bis unten gleich */

/* ---------- Ruhe bei „Bewegung reduzieren“ ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .notiz { opacity: 1; transform: none; }
  .notizbild--auftakt .notiz { clip-path: none; }
  .notizbild__linien g { opacity: 1; }
  .stimme mark { background-size: 100% 2px; }
  .js .karte__kreis { stroke-dashoffset: 0; }
}

@media print {
  .kopf, .faelle__wahl, .umschalter, .fall__video { display: none !important; }
  body { background: #fff; }
}