/*
 * Schnittstelle — Friseursalon in Ehrenfeld. Beispiel für das Paket „Der Standard" (899 €):
 * fünf Seiten, Terminanfrage per Formular, Galerie und Bewertungen, Google-Eintrag.
 * Bildidee: der Kopf. Ein gezeichneter Kopf wechselt seinen Schnitt von allein — und wer
 * klickt, bestimmt selbst. Im echten Auftrag stehen hier die Fotos aus dem Shooting im Salon;
 * die Zeichnungen zeigen nur, wo sie sitzen. Farben: warmes Schwarz, Creme, Kupfer.
 */
:root {
  --grund: #141213; --flaeche: #1E1B1C; --tinte: #F3EDE4; --gedaempft: #B3A99D;
  --akzent: #D9925B; --akzent-text: #141213; --akzent-tief: #E4A877;
  --linie: rgba(243, 237, 228, .12); --linie-stark: rgba(243, 237, 228, .28);
}
.marke .zeichen { color: var(--akzent); }
.knopf--rand { color: var(--tinte); }
.karte { background: var(--flaeche); }

/* Erstes Bild */
.held { padding-block: calc(var(--block) / 2) var(--block); }
.held .zweispalt { align-items: center; }
.held h1 { max-width: 13ch; }
.heute { display: inline-flex; margin-bottom: 18px; }

/* Der Kopf — Ebenen in der Reihenfolge der Wirklichkeit: Mähne hinten, Gesicht, Bart, Pony/Haar vorn */
.kopf-buehne { position: relative; display: grid; place-items: center; padding: clamp(18px, 3vw, 36px); border-radius: var(--rund); background: radial-gradient(circle at 50% 40%, rgba(217, 146, 91, .18), transparent 62%), var(--flaeche); border: 1px solid var(--linie); }
.kopf-svg { width: min(100%, 420px); height: auto; }
.kopf-svg .haut { fill: #E8C3A4; }
.kopf-svg .hals { fill: #D9B08F; }
.kopf-svg .haar { fill: #3B2A22; transition: opacity .5s var(--ease), transform .5s var(--ease); opacity: 0; transform-origin: 160px 120px; transform-box: view-box; }
.kopf-svg .haar.an { opacity: 1; }
.kopf-svg .bart { fill: #3B2A22; opacity: 0; transition: opacity .5s var(--ease); }
.kopf-svg .bart.an { opacity: 1; }
.kopf-svg .auge { fill: #2A1E19; }
.kopf-svg .mund { fill: none; stroke: #B97A5E; stroke-width: 3; stroke-linecap: round; }
.kopf-svg .glanz { fill: rgba(255, 255, 255, .22); opacity: 0; transition: opacity .5s var(--ease); }
.kopf-svg .glanz.an { opacity: 1; }
.kopf-svg .farbe-blond .haar, .kopf-svg .farbe-blond .bart { fill: #C9A36A; }
.kopf-svg .farbe-kupfer .haar, .kopf-svg .farbe-kupfer .bart { fill: #A75A2E; }
.looks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.looks button { min-height: 38px; padding: 0 14px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--gedaempft); transition: background .2s var(--ease), color .2s var(--ease); }
.looks button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.look-name { margin-top: 14px; text-align: center; font-family: var(--display); font-weight: 600; color: var(--tinte); }
.look-name small { display: block; margin-top: 2px; font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--gedaempft); }

/* Preise */
.preisgruppen { display: grid; gap: var(--luft); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preisgruppe h3 { margin-bottom: 12px; }
.preisgruppe .spec > div { grid-template-columns: minmax(0, 1fr) auto; }
.schaetzer { display: grid; gap: 16px; }
.schaetzer .ergebnis { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.schaetzer .ergebnis b { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; color: var(--akzent-tief); }
.schaetzer .ergebnis span { color: var(--gedaempft); font-size: 15px; }

/* Team */
.person { display: grid; gap: 12px; }
.person .avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--akzent-text); background: var(--akzent); }
.person .avatar.zwei { background: #9FB7A8; } .person .avatar.drei { background: #C9A36A; } .person .avatar.vier { background: #8FA6C9; }
.person h3 { margin-top: 4px; }
.person .rolle { font-family: var(--display); font-weight: 600; font-stretch: 85%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.person p { font-size: 15px; color: var(--gedaempft); }
.person .knopf { justify-self: start; margin-top: 4px; }

/* Galerie: gezeichnete Köpfe im Raster, jede Kachel ein Look */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luft); }
.galerie figure { margin: 0; display: grid; gap: 10px; padding: 14px; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.galerie svg { width: 100%; height: auto; }
.galerie figcaption { font-size: 14px; color: var(--gedaempft); }
.galerie figcaption b { display: block; font-family: var(--display); color: var(--tinte); font-size: 15px; }
.foto-hinweis { margin-top: var(--luft); padding: 14px 18px; border-radius: var(--rund); border: 1px dashed var(--linie-stark); font-size: 14.5px; color: var(--gedaempft); }

/* Bewertungen */
.google { display: flex; align-items: center; gap: 16px; }
.google b { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.04em; line-height: 1; }
.google span { color: var(--gedaempft); font-size: 15px; }

@media (max-width: 980px) { .preisgruppen { grid-template-columns: 1fr; } .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .galerie { grid-template-columns: 1fr 1fr; } }