/* Eileen Coburger Friseure, statische Seite. SEOtopia (Julia&Jarvis<3)
   Werte am Original (Theme haarmax + Elementor) abgemessen, 1440 px und 390 px. */

:root {
  --gold: #ad8858;
  --gold-dunkel: #8f6e43;
  --dunkel: #222;
  --schwarz: #141414;
  --text: #666;
  --hell: #f5f5f5;
  --weiss: #fff;
  --breite: 1170px;
  --rand: 15px;
  --syne: "Syne", sans-serif;
  --roboto: "Roboto", sans-serif;
  --open: "Open Sans", sans-serif;
  --hand: "Handlee", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/30px var(--open); color: var(--text); background: var(--weiss); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s; }
a:hover { color: var(--gold-dunkel); }
h1, h2, h3, h4 { margin: 0 0 15px; color: var(--dunkel); font-family: var(--syne); font-weight: 600; line-height: 1.2; }
p { margin: 0 0 16px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.mitte { text-align: center; }
.springen { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--weiss); padding: 8px 16px; }
.springen:focus { left: 16px; }

/* Knöpfe */
/* Knopfgrund Dunkelgold: Weiß darauf 4,7:1 statt 3,3:1 auf Gold (Barrierefreiheit, 03.10.2026) */
.knopf { display: inline-block; background: var(--gold-dunkel); color: var(--weiss); font: 600 16px/16px var(--open); padding: 23px 54px; border-radius: 9999px; border: 0; text-transform: capitalize; transition: background .3s; text-align: center; }
.knopf:hover { background: var(--schwarz); color: var(--weiss); }
.knopf-hell { background: var(--hell); color: var(--dunkel); }
.knopf-hell:hover { background: var(--dunkel); color: var(--weiss); }

/* Kopf ------------------------------------------------------------ */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.kopf-leiste { height: 70px; display: flex; align-items: center; color: var(--weiss); }
.kopf-leiste .huelle { display: flex; gap: 32px; }
.kopf-kontakt { display: inline-flex; align-items: center; font: 400 16px/1 var(--open); white-space: pre; }
.kopf-kontakt .kreis { margin-right: 13px; }
.kopf-kontakt a:hover { color: var(--weiss); text-decoration: underline; }
.kreis { width: 40px; height: 40px; border-radius: 50%; background: var(--weiss); display: inline-grid; place-items: center; color: var(--gold); }
.kreis svg { width: 16px; height: 16px; fill: currentColor; }
/* Weiße Fläche und goldene Lage hängen rechts und sind höchstens --form breit (Theme haarmax).
   Unter 1400 px volle Breite ohne Gold, zwischen 1400 und 1920 px Rahmen links, je nach
   Fensterbreite sichtbar oder nicht. */
.kopf-kasten { position: relative; --form: 1596px; --lage: 10px; transition: .4s; }
.kopf-kasten::before, .kopf-kasten::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; max-width: var(--form); background: var(--weiss); z-index: -1; transition: .4s; }
.kopf-kasten::after { top: var(--lage); max-width: calc(var(--form) + var(--lage)); background: var(--gold); z-index: -2; }
@media (min-width: 1921px) { .kopf-kasten { --form: 80vw; } }
@media (max-width: 1500px) { .kopf-kasten { --form: 1400px; } }
@media (max-width: 1399px) { .kopf-kasten { --form: 100%; --lage: 0px; } }
.kopf-innen { display: flex; align-items: center; height: 106px; }
/* Fester Kopf wie im Theme: ab 800 px Scrolltiefe, sichtbar nur beim Hochscrollen */
.kopf.fest .kopf-kasten { position: fixed; top: -100%; left: 0; right: 0; z-index: 30; background: var(--weiss); box-shadow: 0 0 10px rgba(0,0,0,.07); transition: top .8s; }
.kopf.fest .kopf-kasten.zeigen { top: 0; }
.kopf.fest .kopf-kasten::before, .kopf.fest .kopf-kasten::after { opacity: 0; visibility: hidden; }

/* Nach oben */
.nach-oben { position: fixed; right: 60px; bottom: 500px; z-index: 96; width: 50px; height: 50px; border-radius: 50%; opacity: 0; visibility: hidden; transition: .4s; }
.nach-oben.zeigen { bottom: 60px; opacity: 1; visibility: visible; }
.nach-oben::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--weiss); }
.nach-oben span { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gold-dunkel); color: var(--weiss); transition: background .8s; }
.nach-oben:hover span, .nach-oben:focus-visible span { background: var(--dunkel); }
.nach-oben svg { width: 14px; height: 16px; fill: currentColor; }
/* Am Handy weg: verdeckte sonst Preise und Text, der feste Kopf führt ohnehin nach oben */
@media (max-width: 767px) { .nach-oben { display: none; } }
.logo img { width: 394px; height: auto; }
.menue { margin-left: 86px; margin-right: auto; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.menue a { font: 500 16px/24px var(--open); color: var(--schwarz); }
.menue a:hover { color: var(--gold-dunkel); }
.kopf-buchen { padding: 23px 53px; white-space: nowrap; }
/* Ab 1200 px wie die Bootstrap-Zeile des Themes: drei Spalten mit 12 px Innenabstand, verteilt
   mit space-between. Container 1140 px bis 1299 px, darüber 1194 px. Menüabstand 20 px unter 1400. */
@media (min-width: 1200px) {
  .kopf-innen { justify-content: space-between; padding: 0 3px; }
  .logo { margin: 0 12px; }
  .menue { margin: 0 12px; }
  .kopf-buchen { margin: 0 12px 0 38px; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .kopf-innen { max-width: 1146px; }
  .kopf-leiste .huelle { max-width: 1140px; padding: 0 12px; }
}
@media (min-width: 1200px) and (max-width: 1399px) { .menue ul { gap: 24px; } }
.menue-knopf { display: none; width: 60px; height: 60px; border-radius: 50%; background: var(--gold); border: 0; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menue-knopf span { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--weiss); transition: transform .3s, opacity .3s; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.handymenue { background: var(--weiss); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 10px 20px 25px; }
.handymenue ul { list-style: none; margin: 0 0 15px; padding: 0; }
.handymenue li + li { border-top: 1px solid #eee; }
.handymenue a:not(.knopf) { display: block; padding: 12px 0; font: 500 16px/24px var(--open); color: var(--schwarz); }
.handymenue .knopf { width: 100%; }

/* Startbild -------------------------------------------------------- */
.held { position: relative; height: 644px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: #a9a7a3; }
.held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-kreis { position: relative; margin-top: 186px; width: 626px; height: 626px; margin-bottom: -186px; border-radius: 50%; background: rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 124px; text-align: center; color: var(--weiss); animation: form-wandel 10s linear infinite alternate; }
.held-titel { font: 600 57px/1.2 var(--syne); margin: 0 0 14px; white-space: nowrap; }
.held-text { font: 400 19px/1.3 var(--syne); margin: 0 0 36px; }
.held-knopf { font: 400 20px/1 var(--syne); letter-spacing: 1px; padding: 18px 64px; text-transform: none; }
/* Kreis wandelt die Form wie im Theme (hero-morp), Texte fahren ein wie im LayerSlider */
@keyframes form-wandel {
  0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
@keyframes rein-oben { from { opacity: 0; transform: translateY(-100px); } }
@keyframes rein-unten { from { opacity: 0; transform: translateY(100px); } }
.held-titel { animation: rein-oben 1.5s cubic-bezier(.22,1,.36,1) .4s both; }
.held-text { animation: rein-unten 1s cubic-bezier(.22,1,.36,1) both; }
.held-knopf { animation: rein-unten 1s cubic-bezier(.22,1,.36,1) .5s both; transition: background .3s, color .3s; }
.held-knopf:hover { background: var(--weiss); color: #000; }
/* Ab 1200 px wächst das Startbild wie der LayerSlider mit der Breite (Bühne 1900 x 850).
   Alle Maße in cqw, am Original bei 1200 bis 2200 px abgemessen. */
@media (min-width: 1200px) {
  .held { height: auto; aspect-ratio: 1900 / 850; container-type: inline-size; display: block; }
  .held-kreis { position: absolute; left: 50%; top: 5.23cqw; width: 43.38cqw; height: 43.38cqw; margin: 0 0 0 -21.69cqw; padding-top: 17.05cqw; }
  .held-titel { font-size: 3.8414cqw; line-height: 4.62cqw; margin: 0; }
  .held-text { font-size: 1.4208cqw; line-height: 1.71cqw; margin: .69cqw 0 0; white-space: nowrap; }
  .held-knopf { font-size: 1.4734cqw; line-height: 4.052cqw; padding: 0 4.7257cqw; letter-spacing: .10525cqw; margin-top: 2.41cqw; }
}

/* Seitenbanner der Unterseiten */
.seitenbanner { position: relative; padding: 305px 0 111px; overflow: hidden; background: #2b2724; }
.seitenbanner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seitenbanner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.seitenbanner .huelle { position: relative; z-index: 1; text-align: center; }
.seitenbanner h1 { color: var(--weiss); font: 600 60px/72px var(--syne); margin: 0; }
/* Stufen wie im Theme (breadcumb-wrapper): Innenabstand und Schriftgröße wachsen mit der Breite */
@media (min-width: 1501px) { .seitenbanner { padding: 342px 0 111.6px; } .seitenbanner h1 { font-size: 72px; line-height: 86.4px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .seitenbanner { padding: 308px 0 114.4px; } .seitenbanner h1 { font-size: 48px; line-height: 57.6px; } }

/* Abschnitte und Titel --------------------------------------------- */
.abschnitt { padding: 0 0 80px; }
.titel { margin-bottom: 40px; }
.dachzeile { font: 400 26px/26px var(--hand); color: var(--gold); margin: 0; }
.titel h1, .titel h2 { font: 600 50px/60px var(--syne); margin: 0; }
.titel h1, .titel .h2-roboto { font-family: var(--roboto); letter-spacing: 1px; }
.trenner { display: block; width: 68px; height: 18px; margin: 0 auto 26px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 18' fill='none' stroke='%23ad8858' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 4v12'/%3E%3Cpath d='M12 8c6-6 12-6 18 0s12 6 18 0 12-4 18 2'/%3E%3Cpath d='M30 9c6 6 12 6 18 0'/%3E%3C/svg%3E"); }

/* Startseite: drei Blasen */
.start-intro { padding-top: 30px; }
/* Wie die Elementor-Zeile: höchstens 1400 px, drei gleiche Spalten, Bild 25 px vom Spaltenrand
   (links bündig, Mitte, rechts bündig). Ergibt 442 / 417 / 442 px. */
.blasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1400px; margin: 140px auto 0; padding: 0 0 60px; align-items: start; }
.blase:nth-child(1) { margin-right: 25px; }
.blase:nth-child(2) { margin: 0 25px; }
.blase:nth-child(3) { margin-left: 25px; }
.blase { position: relative; aspect-ratio: 16 / 9; }
.blase > img { width: 100%; height: 100%; object-fit: cover; }
.blase-form { position: absolute; left: 50%; top: 50%; width: 370px; height: 370px; margin: -185px 0 0 -185px; z-index: 1; animation: blase-dreh 16s linear infinite reverse; animation-delay: var(--verzoegerung); }
.blase-form::before { content: ""; position: absolute; inset: 0; background: var(--farbe); opacity: .9; border-radius: 66% 24% 44% 56% / 44% 24% 70% 56%; animation: blase-form 12s ease-in-out infinite both alternate; }
.blase-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 290px; z-index: 2; text-align: center; color: var(--weiss); }
.blase-text h2 { color: var(--weiss); font: 700 28px/1.2 var(--syne); margin: 0 0 10px; }
.blase-text p { margin: 0; }
@keyframes blase-dreh { to { transform: rotate(1turn); } }
@keyframes blase-form { 0% { border-radius: 66% 24% 44% 56% / 44% 24% 70% 56%; } 50% { border-radius: 43% 38% 39% 35% / 44% 39% 43% 56%; } 100% { border-radius: 40% 60%; } }

/* Startseite: Fokus */
.fokus { padding-top: 28px; padding-bottom: 78px; }
.fokus-raster { display: grid; grid-template-columns: 473px 1fr; gap: 60px; align-items: start; }
.fokus-text > p, .fokus-daten p { font-family: var(--roboto); line-height: 30.4px; }
.fokus-text .titel { margin-bottom: 0; }

.fokus-daten { display: grid; grid-template-columns: 225px 1fr; gap: 24px; margin-top: 44px; }
.fokus-daten h3 { font-size: 22px; line-height: 26.4px; margin: 0 0 10px; }
.fokus-daten p { margin: 0 0 5px; }
.fokus-bild { display: flex; justify-content: flex-end; margin-top: -30px; }
.fokus-bild img { width: 459px; height: 390px; object-fit: cover; border-radius: 49.3% 50.7% 36.8% 63.2% / 52.4% 66.8% 33.2% 47.6%; animation: form-wandel 10s linear infinite alternate; }

/* Leisten (Team, Stimmen, Galerie) */
.leiste { position: relative; }
.leiste-spur { display: flex; gap: var(--abstand, 60px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.leiste-spur::-webkit-scrollbar { display: none; }
.leiste-spur > * { flex: 0 0 calc((100% - (var(--anzahl, 3) - 1) * var(--abstand, 60px)) / var(--anzahl, 3)); scroll-snap-align: start; }
.leiste-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; padding: 0; z-index: 2; }
.leiste-pfeil::before { content: ""; position: absolute; inset: 12px; border: solid #333; border-width: 0 0 3px 3px; transform: rotate(45deg); }
.leiste-pfeil.weiter::before { transform: rotate(-135deg); }
.leiste-pfeil.zurueck { left: -40px; }
.leiste-pfeil.weiter { right: -40px; }
.leiste-pfeil[disabled] { opacity: .25; cursor: default; }
/* Punkt 6 px wie im Original, Trefferfläche 24 px */
.leiste-punkte { display: flex; justify-content: center; gap: 0; margin: -1px 0 -9px; }
.leiste-punkte button { position: relative; width: 24px; height: 24px; border: 0; padding: 0; background: none; }
.leiste-punkte button::before { content: ""; position: absolute; left: 9px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #ccc; }
.leiste-punkte button[aria-current="true"]::before { background: #000; }
.stimmen .leiste-punkte { display: none; }

/* Team */
.team { padding-top: 0; }
/* Vier feste Kacheln statt Leiste (Julias Wunsch, 03.10.2026), Klick öffnet die Großansicht */
.team-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.team .dachzeile { margin-bottom: 6px; }
.team .titel { margin-bottom: 35px; }
.person { margin: 0; text-align: center; }
.person-bild { display: block; cursor: zoom-in; aspect-ratio: 1; -webkit-mask: url("/bilder/team-mask.png") center / cover no-repeat; mask: url("/bilder/team-mask.png") center / cover no-repeat; overflow: hidden; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.person:hover .person-bild img, .person-bild:focus-visible img { transform: scale(1.06); }
.person figcaption { padding-top: 40px; }
.person h3 { font: 600 24px/28.8px var(--syne); margin: 0 0 6px; }
.person p { color: var(--gold); font-size: 14px; line-height: 26.6px; margin: 0 0 5px; }

/* Kundenstimmen */
.stimmen { padding-top: 95px; padding-bottom: 0; }
/* Drei Stimmen nebeneinander, lange Texte gekürzt mit „Weiterlesen“, Karten gleich hoch (Julia, 03.10.2026) */
.stimmen .leiste { --abstand: 25px; --anzahl: 3; }
.stimmen .leiste-spur { align-items: stretch; padding: 40px 0 55px; }
/* Ist eine Stimme aufgeklappt, wachsen die Nachbarn nicht mit */
.stimmen .leiste-spur.eine-offen { align-items: flex-start; }
.stimme { position: relative; margin: 0; background: var(--weiss); border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,.05); padding: 70px 40px 35px; text-align: center; border-top: 0; }
.stimme::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--gold); }
.stimme::after { content: "\201C"; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; background: var(--gold); color: var(--weiss); font: 700 64px/112px Georgia, serif; }
.stimme { display: flex; flex-direction: column; }
.stimme p { font: italic 400 20px/36px var(--open); color: var(--dunkel); margin: 0 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.stimme.offen p { display: block; -webkit-line-clamp: none; }
.stimme footer { margin-top: auto; }
.stimme-mehr { align-self: center; min-height: 44px; margin: -6px 0 6px; padding: 0 8px; border: 0; background: none; font: 600 15px/1 var(--open); color: var(--gold-dunkel); text-decoration: underline; text-underline-offset: 4px; }
.stimme-mehr:hover { color: var(--dunkel); }
.stimme cite { display: block; font: 600 18px/21.6px var(--syne); color: var(--dunkel); font-style: normal; }
/* Quelle der Google-Stimmen (Text 1:1, Nachname gekürzt) */
.stimme-quelle { display: block; margin-top: 4px; font: 400 13px/18px var(--open); color: var(--text); }
.sterne { color: #fec42d; letter-spacing: 1px; font-size: 23px; line-height: 30px; }
.stimmen .leiste-pfeil { top: 276px; width: 60px; height: 60px; border: 2px solid var(--dunkel); border-radius: 50%; background: transparent; }
.stimmen .leiste-pfeil[disabled] { opacity: 1; }
/* Pfeil wie im Original: lange Linie, die aus dem Kreis herausragt */
.stimmen .leiste-pfeil::before { inset: auto; top: 50%; width: 80px; height: 2px; margin-top: -1px; background: var(--dunkel); border: 0; transform: none; }
.stimmen .leiste-pfeil.zurueck::before { left: 12px; }
.stimmen .leiste-pfeil.weiter::before { right: 12px; }
.stimmen .leiste-pfeil::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid var(--dunkel); border-width: 0 0 2px 2px; }
.stimmen .leiste-pfeil.zurueck::after { left: 13px; transform: rotate(45deg); }
.stimmen .leiste-pfeil.weiter::after { right: 13px; transform: rotate(-135deg); }
.stimmen .leiste-pfeil.zurueck { left: -32px; }
.stimmen .leiste-pfeil.weiter { right: -32px; }
@media (min-width: 1320px) { .stimmen .leiste-pfeil.zurueck { left: -72px; } .stimmen .leiste-pfeil.weiter { right: -72px; } }

/* Galerie */
/* Mehr Luft über, unter und in der Galerie (Julia, 07.10.2026) */
.salon { padding-top: 50px; padding-bottom: 90px; }
.salon .titel { margin-bottom: 35px; }
.galerie { --abstand: 5px; --anzahl: 3; padding: 0 40px; }
.galerie .leiste-spur > a { display: block; aspect-ratio: 3 / 2; }
.galerie .leiste-spur img { width: 100%; height: 100%; object-fit: cover; }
.galerie .leiste-pfeil.zurueck { left: 0; }
.galerie .leiste-pfeil.weiter { right: 0; }
.galerie-hoch { margin: 56px auto 76px; --abstand: 10px; padding: 0 45px; max-width: 1170px; }
.galerie-hoch .leiste-pfeil.zurueck { left: 5px; }
.galerie-hoch .leiste-pfeil.weiter { right: 5px; }
.galerie-hoch .leiste-spur > a { aspect-ratio: 3 / 4; }
.gross-ansicht { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 20px; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
.gross-ansicht img { max-height: 90vh; width: auto; cursor: zoom-out; }
.gross-ansicht button { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; }

/* Preise ------------------------------------------------------------ */
.preis-hinweis { padding-top: 10px; padding-bottom: 55px; }
.preis-hinweis .huelle { max-width: 1170px; }
.preis-hinweis p { font-family: var(--roboto); line-height: 30.4px; }
.rot { color: var(--gold-dunkel); font-weight: 700; }
.preise .huelle { max-width: 1224px; }
.preis { display: flex; align-items: flex-start; margin-bottom: 30px; }
.preise { padding-bottom: 93px; }
.preis.bild-links { flex-direction: row-reverse; }
.preis-karte { flex: 0 0 40%; padding: 70px; background: #f7f7f7 url("/bilder/price-card-bg.webp") center / cover; }
.preis-bild { flex: 1; min-width: 0; object-fit: cover; align-self: center; }
.preis-karte { flex-basis: var(--karte, 40%); }
/* 2 px Luft rechts: Die Karte ist hier 0,3 px schmaler als im Original, sonst bricht „Damen / Lange Haare“ um */
.preis-karte h2 { font: 600 30px/36px var(--syne); margin: 0 -2px 15.5px 0; }
.preis-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 17px; font: 400 16px/30px var(--open); color: #212529; }
.preis-tabelle td { padding: 8px; border-bottom: 1px solid rgba(0,0,0,.12); vertical-align: middle; }
.preis-tabelle td:first-child { width: 70%; }
.preis-tabelle td:last-child { text-align: right; }
.preis-tabelle tr:nth-child(odd) td { background: rgba(0,0,0,.05); }
.preis-tabelle.mit-linien td { border: 1px solid rgba(0,0,0,.12); }
.preis-tabelle.mit-linien td:first-child { width: 62%; }
.preis-karte .knopf { padding: 22px 50px; }

/* Textseite (Extensions) ------------------------------------------ */
.text-seite { padding-top: 95px; padding-bottom: 165px; }
.text-seite .huelle { max-width: 1170px; }
.fliess.arial { font: 400 16px/24px Arial, Helvetica, sans-serif; color: #191b23; }
.fliess.arial p { margin-bottom: 24px; }
.breit-bild + h2 { margin-top: 12px; }
.text-seite h2 { color: var(--gold); font: 600 36px/36px var(--roboto); margin: 37px 0 20px; }
.text-seite h3 { color: var(--gold); font: 600 30px/30px var(--roboto); margin: 38px 0 20px; }
.text-seite .huelle > h2:first-child { margin-top: 0; }
.fliess { font-family: var(--roboto); line-height: 28.8px; }
.fliess p { margin: 0 0 18px; }
.fliess li { line-height: 30px; color: var(--text); }
.fliess ol, .fliess ul { padding-left: 32px; margin: 0 0 16px; }
.fliess a { color: var(--gold-dunkel); }
.fliess a:hover { color: var(--dunkel); }
.breit-bild { width: 100%; margin: 44px 0 0; }
.text-seite .breit-bild + h2 { margin-top: 20px; }
.zwei-spalten { display: grid; grid-template-columns: 550px 1fr; gap: 20px; align-items: start; padding: 0 10px; margin: 30px 0 20px; }
.text-seite .zwei-spalten + h2 { margin-top: 30px; }
.zwei-spalten.text-links { grid-template-columns: 1fr 1fr; gap: 50px; }
.zwei-spalten img { width: 100%; height: 550px; object-fit: cover; }
.zwei-spalten .klein-bild { width: 300px; height: 300px; justify-self: center; }
.text-seite .preis { margin: 0 12px 50px; --karte: 40.3%; }
.text-seite .preis-bild { height: 498px; }
.text-seite .preis-karte { padding: 64px 70px; }
.text-seite .preis-tabelle { margin-bottom: 12px; }
.text-seite .preis-karte h2 { color: var(--dunkel); font: 600 30px/36px var(--syne); margin: 0 -2px 10.5px 0; }

/* Kontakt ---------------------------------------------------------- */
.kontakt { padding-top: 116px; padding-bottom: 20px; }
.kontakt .mitte { margin: 0; }
.kontakt .titel { margin-bottom: 24px; }
.kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-bottom: 40px; }
.karte { position: relative; height: 337px; background: #e9ece6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 567 337' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M380 0c-10 60 30 100 10 160s-40 90-30 177' fill='none' stroke='%23a9d3e8' stroke-width='14'/%3E%3Cpath d='M430 20h90v70h-90zM40 250h110v60H40z' fill='%23cfe5c3'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='5'%3E%3Cpath d='M0 90h567M0 210h567M120 0v337M250 0v337M480 0v337M0 30l200 160M300 337l180-337'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f6d36b' stroke-width='7'%3E%3Cpath d='M0 150c150-20 260 40 567 10M200 0c20 120-10 220 30 337'/%3E%3C/g%3E%3C/svg%3E") center / cover; }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte-hinweis { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 18px; background: rgba(255,255,255,.88); font-size: 12px; line-height: 17px; text-align: left; }
.karte-hinweis p { margin: 0; }
.karte-hinweis a { color: var(--gold-dunkel); text-decoration: underline; }
.fokus-daten a, .kontakt-tabelle a, .karte-hinweis a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.karte .knopf { min-height: 44px; }
.karte .knopf { text-transform: none; padding: 11px 18px; font-size: 13px; line-height: 13px; border-radius: 4px; grid-row: span 2; grid-column: 2; grid-row-start: 1; }
.kontakt-tabelle { border: 1px solid #e5e5e5; padding: 4px; }
.kontakt-tabelle table { width: 100%; border: 1px solid #e5e5e5; border-collapse: separate; border-spacing: 0; padding: 26px 30px; font: 500 18px/30px var(--roboto); color: var(--dunkel); }
.kontakt-tabelle td { padding: 18px 30px; vertical-align: top; }
.kontakt-tabelle td:first-child { width: 38%; }
.kontakt-tabelle tr:nth-child(even) td { background: var(--hell); }

/* Rechtstexte */
.rechtstext { padding-top: 120px; padding-bottom: 120px; }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; line-height: 28.8px; }
.rechtstext a { color: var(--gold-dunkel); }

/* Fuß ---------------------------------------------------------------- */
/* Muster abgedunkelt, damit weiße Schrift mindestens 4,5:1 erreicht */
.fuss { background: linear-gradient(rgba(60,40,15,.42), rgba(60,40,15,.42)), #ad8858 url("/bilder/footer-bg-3.webp") center / 1600px auto repeat; padding: 100px 0 80px; text-align: center; font-family: var(--roboto); }
.fuss-sozial { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.fuss-sozial a { width: 83px; height: 83px; border-radius: 50%; background: var(--weiss); display: grid; place-items: center; color: var(--gold); transition: background .3s, color .3s; }
.fuss-sozial a:hover { background: var(--schwarz); color: var(--weiss); }
.fuss-sozial svg { width: 20px; height: 20px; fill: currentColor; }
.fuss-copy { color: var(--weiss); margin: 0 0 25px; }
.fuss-copy > span { color: var(--weiss); }
.fuss :focus-visible { outline-color: var(--weiss); }
.fuss-links { color: var(--weiss); font-weight: 500; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 25px; margin: 0; }
.fuss-links span { opacity: .75; font-weight: 300; }
.fuss-links a, .fuss-links button { display: inline-block; min-height: 44px; line-height: 44px; }
.fuss-links a:hover { color: var(--schwarz); }
.fuss-links button { background: none; border: 0; color: var(--weiss); font: 500 16px/30px var(--roboto); padding: 0; }
.fuss-links button:hover { color: var(--schwarz); }
/* Hinweis auf SEOtopia (Eileen hat zugestimmt, 03.10.2026). Linktext immer der Markenname */
.fuss-credit { margin: 14px 0 0; font: 400 13px/24px var(--roboto); color: var(--weiss); }
.fuss-credit a { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 500; }
.fuss-credit a:hover { color: var(--schwarz); }

/* Einwilligung */
.einwilligung { position: fixed; left: 20px; bottom: 20px; z-index: 50; max-width: 440px; background: var(--weiss); box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 26px 28px; font-size: 14px; line-height: 22px; border-radius: 6px; }
.einwilligung-titel { font: 600 20px/1.2 var(--syne); color: var(--dunkel); margin: 0 0 10px; }
.einwilligung a { color: var(--gold-dunkel); text-decoration: underline; }
.einwilligung-wahl { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--dunkel); }
.einwilligung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.einwilligung-mehr { margin-top: 12px; }
.einwilligung-mehr summary { cursor: pointer; color: var(--dunkel); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.einwilligung-mehr[open] summary { margin-bottom: 6px; }
.einwilligung-mehr .knopf { width: 100%; margin-top: 10px; }
.einwilligung .knopf { padding: 14px 20px; font-size: 15px; text-transform: none; }

/* Vorschau-Hinweis (nur auf workers.dev) */
.vorschau-leiste { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 70; background: #b3261e; color: #fff; font: 600 13px/1 var(--open); padding: 7px 14px; border-radius: 0 0 6px 6px; }

/* Tablet ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .kopf-leiste { display: none; }
  .kopf { position: relative; background: var(--weiss); }
  .kopf-kasten { margin-left: 0; }
  .kopf-kasten::before, .kopf-kasten::after { display: none; }
  .kopf-kasten { background: var(--weiss); }
  .kopf-innen { height: 80px; padding-left: var(--rand); gap: 10px; }
  .logo img { width: 205px; }
  .menue { display: none; }
  .kopf-buchen { margin-left: auto; padding: 13px 18px; font-size: 14px; line-height: 14px; }
  .menue-knopf { display: flex; }
  .held { height: 44.25vw; min-height: 175px; }
  .held-kreis { margin: 0; width: 64%; height: auto; aspect-ratio: 1; transform: translateY(26%); padding-top: 0; justify-content: center; padding-bottom: 26%; }
  .seitenbanner { padding: 68px 0; }
  .blase-form { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .fokus-raster { grid-template-columns: 1fr 1fr; gap: 40px; }
  .fokus-daten { grid-template-columns: 1fr 1fr; }
  .fokus-bild { margin-top: 0; }
  .fokus-bild img { width: 100%; height: auto; aspect-ratio: 459 / 390; }
  .leiste-pfeil.zurueck { left: -8px; }
  .leiste-pfeil.weiter { right: -8px; }
  .stimmen .leiste-pfeil.zurueck { left: 0; }
  .stimmen .leiste-pfeil.weiter { right: 0; }
  .zwei-spalten { grid-template-columns: 1fr 1fr; }
  .zwei-spalten img { height: auto; aspect-ratio: 1; }
}

@media (max-width: 991px) {
  .held-titel { font-size: 36px; white-space: normal; }
  .held-text { font-size: 15px; margin-bottom: 20px; }
  .held-knopf { font-size: 15px; padding: 13px 40px; }
  .blasen { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding: 0 20px 20px; }
  .blasen > .blase { margin: 0; }
  .blase { aspect-ratio: auto; height: 206px; overflow: hidden; }
  .blase-form { display: none; }
  .blase::after { content: ""; position: absolute; inset: 0; background: var(--farbe); opacity: .82; }
  .blase-text { left: 20px; right: 20px; width: auto; transform: translateY(-50%); text-align: left; }
  .fokus-raster { grid-template-columns: 1fr; }
  .fokus-bild { order: -1; justify-content: center; }
  .fokus-text { text-align: center; }
  .fokus-daten { grid-template-columns: 1fr; gap: 10px; margin-top: 50px; }
  .stimmen .leiste { --anzahl: 1; }
  .team-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .team-raster .person figcaption { padding-top: 16px; }
  .galerie { --anzahl: 1; padding: 0 40px; }
  .galerie-hoch { --anzahl: 2; }
  .preis, .preis.bild-links { flex-direction: column-reverse; align-items: stretch; margin-bottom: 22px; }
  .preis-bild { width: 100%; }
  .preis-karte, .text-seite .preis-karte { padding: 30px 20px; }
  .text-seite .preis-bild { height: auto; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .karte { height: 332px; }
  .zwei-spalten, .zwei-spalten.text-links { grid-template-columns: 1fr; padding: 0; }
  .held-knopf { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Handy */
@media (max-width: 575px) {
  :root { --rand: 12px; }
  .abschnitt { padding-bottom: 50px; }
  /* Startbild am Handy höher, damit Text ab 14 px und ein 44 px hoher Knopf in den Kreis passen
     (Original: 5,5 px Text, Barrierefreiheit 03.10.2026) */
  .held { height: 92vw; }
  .held-kreis { width: 86%; }
  .held-titel { font-size: 26px; margin-bottom: 8px; }
  .held-text { font-size: 14px; line-height: 1.35; margin-bottom: 14px; max-width: 78%; }
  .held-knopf { font-size: 15px; padding: 0 28px; letter-spacing: 1px; }
  .kopf-buchen { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 13px; }
  .logo img { width: 190px; }
  .menue-knopf { width: 50px; height: 50px; }
  .titel h1, .titel h2, .titel .h2-roboto { font-size: 30px; line-height: 38px; }
  .dachzeile { font-size: 20px; line-height: 20px; }
  .seitenbanner { padding: 73px 0 63.4px; }
  .seitenbanner h1 { font-size: 28px; line-height: 33.6px; }
  .start-intro { padding-top: 30px; padding-bottom: 0; }
  .titel h1, .titel h2, .titel .h2-roboto { line-height: 36px; }
  .blase-text h2 { font-size: 24px; }
  .fokus { padding-top: 0; padding-bottom: 12px; }
  .fokus-daten { margin-top: 42px; }
  .blasen { margin-top: 45px; }
  .fokus-raster { gap: 0; }
  .fokus-text .titel { margin: 30px 0 0; }
  .team .titel { margin-bottom: 30px; }
  .team-raster { gap: 24px 12px; }
  .team-raster .person h3 { font-size: 18px; line-height: 22px; }
  .team-raster .person p { font-size: 13px; line-height: 18px; }
  .fokus-text > p { text-align: center; }
  .stimmen { padding-top: 32px; }
  .stimmen .leiste-spur { padding-bottom: 60px; }
  .stimme { padding: 55px 15px 30px; }
  .stimme::after { width: 60px; height: 60px; top: -30px; font-size: 50px; line-height: 86px; }
  .stimme p { font-size: 18px; line-height: 28px; }
  .stimme cite { font-size: 22px; line-height: 26.4px; }
  .salon { padding-top: 30px; padding-bottom: 55px; }
  .salon .titel { margin-bottom: 25px; }
  .galerie .leiste-spur > a { aspect-ratio: 310 / 206; }
  .stimmen .leiste-pfeil { display: none; }
  .stimmen .leiste-punkte { display: flex; margin-top: -40px; }
  .text-seite { padding-top: 55px; padding-bottom: 123px; }
  .text-seite .huelle { padding: 0 22px; }
  .text-seite h2, .text-seite h3 { font-size: 22px; line-height: 22px; margin: 40px 0 18px; }
  .zwei-spalten, .zwei-spalten.text-links { padding: 0 10px; gap: 30px; }
  /* Wie Slick im Original: ein Bild mittig, links und rechts lugen die Nachbarn hervor */
  .galerie-hoch { --anzahl: 1; padding: 0 var(--rand); }
  .galerie-hoch .leiste-spur { padding: 0 30px; scroll-padding: 0 30px; }
  .galerie-hoch .leiste-spur > a { aspect-ratio: 3 / 4; }
  .preise { padding-top: 36px; padding-bottom: 63px; }
  .text-seite .preis { margin-bottom: 50px; }
  .preis-karte h2, .text-seite .preis-karte h2 { font-size: 24px; line-height: 28.8px; }
  .preis-karte .knopf, .kontakt .mitte .knopf { padding: 16px 25px; font-size: 14px; line-height: 16px; }
  .kontakt .titel { margin-bottom: 29px; }
  .preis-bild { margin-top: 0; }
  .preis, .preis.bild-links { gap: 30px; }
  .kontakt { padding-top: 81px; }
  .kontakt-tabelle { padding: 2px; }
  .kontakt-tabelle table { padding: 0; font-size: 14px; line-height: 30px; }
  .kontakt-tabelle td { padding: 6px 12px; }
  .rechtstext { padding-top: 82px; padding-bottom: 110px; }
  .fuss { padding: 60px 0; }
  .fuss-sozial a { width: 76px; height: 76px; }
  .fuss-links span { font-size: 0; }
  .fuss-links span::after { content: "-"; font-size: 16px; }
  .einwilligung { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 20px; }
}

/* Preisliste als Menükarte (Julia, 03.10.2026): Bild groß, Karte schiebt sich darüber,
   Punktlinie statt Zebrastreifen. Bewusste Abweichung vom Original, siehe README.
   Gilt für die Preisliste (.preise) und die Preiskarte der Haarverlängerung (.text-seite). */
:is(.preise, .text-seite) .preis { align-items: center; margin-bottom: 110px; }
:is(.preise, .text-seite) .preis-bild { flex: 0 0 62%; height: 560px; object-fit: cover; }
:is(.preise, .text-seite) .preis-karte { flex: 0 0 46%; position: relative; z-index: 2; padding: 64px 58px; background: #faf7f2; box-shadow: 0 30px 70px rgba(0,0,0,.14); outline: 1px solid rgba(143,110,67,.45); outline-offset: -16px; }
:is(.preise, .text-seite) .bild-rechts .preis-karte { margin-right: -8%; }
:is(.preise, .text-seite) .bild-links .preis-karte { margin-left: -8%; }
:is(.preise, .text-seite) .preis-karte h2 { margin-bottom: 22px; }
:is(.preise, .text-seite) .preis-karte h2::after { content: ""; display: block; width: 56px; height: 2px; background: var(--gold); margin-top: 18px; } /* etwas mehr Luft unter den Unterlängen (Julia, 07.10.2026) */
:is(.preise, .text-seite) .preis-tabelle { margin-bottom: 30px; }
:is(.preise, .text-seite) .preis-tabelle tr { display: flex; align-items: flex-end; }
:is(.preise, .text-seite) .preis-tabelle td { background: none; border: 0; padding: 5px 0; }
:is(.preise, .text-seite) .preis-tabelle tr:nth-child(odd) td { background: none; }
:is(.preise, .text-seite) .preis-tabelle td:first-child { width: auto; flex: 1; display: flex; align-items: flex-end; line-height: 26px; }
:is(.preise, .text-seite) .preis-tabelle td:first-child::after { content: ""; flex: 1; min-width: 20px; margin: 0 10px 7px; border-bottom: 2px dotted rgba(143,110,67,.5); }
:is(.preise, .text-seite) .preis-tabelle td:last-child { color: var(--gold-dunkel); font-weight: 600; white-space: nowrap; }
.text-seite .preis { margin: 50px 0 80px; }
@media (max-width: 1199px) {
  :is(.preise, .text-seite) .preis-karte { padding: 40px 34px; flex-basis: 50%; }
  :is(.preise, .text-seite) .preis-bild { flex-basis: 58%; height: 480px; }
}
@media (max-width: 991px) {
  .text-seite .preis { margin: 30px 0 50px; }
  :is(.preise, .text-seite) .preis { flex-direction: column-reverse; align-items: stretch; margin-bottom: 50px; gap: 0; }
  :is(.preise, .text-seite) .preis-bild { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  :is(.preise, .text-seite) .bild-rechts .preis-karte, :is(.preise, .text-seite) .bild-links .preis-karte { flex: none; margin: -70px 16px 0; padding: 38px 24px; outline-offset: -10px; }
  :is(.preise, .text-seite) .preis-tabelle td:first-child::after { margin: 0 6px 7px; min-width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}