/* =====================================================================
   SHOP-HUB · gemeinsame Vorlage fuer /shop/ (Hauptprofil) und /haar-shop/ (Haar-Konto)
   Gebaut 06.11.2026, Brand-Designerin. Aenderungen an Aussehen: NUR HIER.
   Daten (Produkte, Links, Texte) stehen im JSON-Block der jeweiligen index.html.
   Look wird ueber <body data-look="haupt|haar"> umgeschaltet:
     haupt = Sonnenorange fuehrt (persoenliche Marke, wie outputs/site/index.html)
     haar  = Lavendel fuehrt  (Haar-Konto, wie outputs/site/quiz/ und /schoenheit/)
   Regel brand-brief.md §2: Orange und Lavendel nie gleich laut.
   ===================================================================== */
:root{
  --creme:#F5F0EA; --lavendel:#B0A0C4; --lavendel-hell:#E7DFEE; --lila:#8E7BA6;
  --gold:#D98E3B; --gold-hell:#E8B378; --clay:#A78F76;
  --aubergine:#352438; --aubergine-soft:#6E6270; --stage:#2C1E30;
  --card:#FBF8F4; --border:#EBE1D6; --border2:#E1D7CB; --k-rgb:53,36,56;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,sans-serif;
  --wrap:520px; --gut:clamp(1rem,4.6vw,1.5rem); --rund:18px;
  --s1:0 14px 26px -16px rgba(var(--k-rgb),.5);
  --s2:0 24px 48px -34px rgba(var(--k-rgb),.5);
  --s3:0 32px 56px -32px rgba(var(--k-rgb),.55);
  --s4:0 30px 60px -40px rgba(var(--k-rgb),.7);
  /* Fuehrende Energie (wird je Look gesetzt) */
  --fuehrt:var(--gold); --fuehrt-hell:var(--gold-hell); --fuehrt-hauch:rgba(217,142,59,.08);
}
body[data-look="haar"]{ --fuehrt:var(--lila); --fuehrt-hell:var(--lavendel); --fuehrt-hauch:rgba(176,160,196,.16); }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.versteckt,[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--aubergine);line-height:1.6;min-height:100vh;
  background:radial-gradient(120% 55% at 50% 0%,var(--card) 0%,var(--creme) 48%,var(--lavendel-hell) 100%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding:0 var(--gut) 48px;
}
body::before{ /* Aurora, sehr ruhig */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 28% at 14% 8%,rgba(217,142,59,.12),transparent 70%),
    radial-gradient(44% 34% at 90% 4%,rgba(176,160,196,.26),transparent 72%),
    radial-gradient(60% 40% at 50% 106%,rgba(231,223,238,.6),transparent 72%);
  animation:hub-aurora 22s ease-in-out infinite alternate;
}
body[data-look="haar"]::before{
  background:
    radial-gradient(40% 30% at 12% 6%,rgba(176,160,196,.30),transparent 70%),
    radial-gradient(40% 30% at 92% 10%,rgba(231,223,238,.75),transparent 72%),
    radial-gradient(60% 40% at 50% 106%,rgba(217,142,59,.06),transparent 72%);
}
@keyframes hub-aurora{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}100%{transform:translate3d(-2.5%,3%,0) scale(1.12);opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--aubergine);color:var(--creme);padding:.7rem 1.1rem;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--fuehrt);outline-offset:3px;border-radius:10px}
.raute{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);display:inline-block;flex:0 0 auto}

/* ---- INTERN-Leiste: steht nur da, solange Platzhalter-Links oder offene Texte im Datenblock sind ---- */
.intern{position:sticky;top:0;z-index:50;margin:0 calc(var(--gut)*-1);padding:9px var(--gut);
  background:#FFF3C4;color:#5A4300;border-bottom:1px solid #E8D27A;font-size:.8rem;line-height:1.4;text-align:center}
.intern b{font-weight:600}
.intern a{color:#5A4300}

/* ---- Pflicht-Kennzeichnung oben (werbekennzeichnung-regel.md:38-40: am Anfang, deutsch, klar lesbar) ---- */
.kennz{display:flex;justify-content:center;padding:18px 0 4px}
.kennz > span{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;letter-spacing:.06em;
  color:var(--aubergine);background:var(--card);border:1px solid var(--border2);border-radius:99px;padding:6px 14px}

/* ---- Kopf ---- */
.kopf{text-align:center;padding:18px 0 6px}
.portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto 18px;
  border:4px solid var(--card);
  box-shadow:0 0 0 1.5px var(--fuehrt-hell),0 0 0 10px var(--fuehrt-hauch),0 26px 50px -26px rgba(var(--k-rgb),.5);
  background:linear-gradient(135deg,var(--lavendel-hell),var(--creme))}
body[data-look="haar"] .portrait{width:92px;height:92px}
.handle{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);font-weight:500}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fuehrt);font-weight:500;margin-top:16px}
.kopf h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,1.6rem + 3vw,2.8rem);line-height:1.04;letter-spacing:-.01em;margin:10px 0 10px}
.kopf h1 em{font-style:italic;color:var(--fuehrt)}
.kopf .unter{color:var(--aubergine-soft);font-size:1rem;max-width:34ch;margin:0 auto}
.trenner{display:flex;align-items:center;gap:12px;max-width:300px;margin:26px auto 6px}
.trenner .ln{flex:1;height:1px;background:var(--border2)}

/* ---- Abschnitt (nummeriert, brand-brief.md §6) ---- */
.abschnitt{margin-top:30px}
.ab-kopf{display:flex;align-items:baseline;gap:12px;margin:0 2px 14px}
.ab-nr{font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--fuehrt);font-weight:500;font-variant-numeric:lining-nums}
.ab-titel{font-family:var(--serif);font-size:1.45rem;font-weight:500;line-height:1.1}
.ab-kopf .ln{flex:1;height:1px;background:var(--border2);align-self:center;position:relative}
.ab-kopf .ln::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;background:var(--gold);transform:translate(0,-50%) rotate(45deg)}
.liste{display:flex;flex-direction:column;gap:14px;list-style:none}

/* ---- Produkt-Karte (ganze Karte = ein Tap-Ziel) ---- */
.karte{display:flex;align-items:center;gap:16px;text-decoration:none;min-height:124px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--rund);padding:12px 14px 12px 12px;
  box-shadow:var(--s2);transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .2s;
  -webkit-tap-highlight-color:transparent}
.karte:hover{transform:translateY(-2px);box-shadow:var(--s3);border-color:var(--fuehrt-hell)}
.karte:active{transform:translateY(0) scale(.99)}
/* ---- BILDSYSTEM (Folgeauftrag 06.11.2026): jedes Produkt im gleichen Bogenrahmen 4:5
   auf sanftem Markenverlauf, Innenlinie, weicher Schatten, Nummernraute unten mittig.
   Fehlt ein Foto, traegt dieselbe Flaeche ein Kuerzel -> sieht genauso fertig aus. ---- */
.bild{flex:0 0 auto;position:relative;width:84px;aspect-ratio:4/5;display:block;
  border-radius:42px 42px 14px 14px;
  background:radial-gradient(80% 60% at 50% 18%,rgba(255,255,255,.95),transparent 70%),
             linear-gradient(170deg,var(--card) 0%,var(--lavendel-hell) 100%);
  border:1px solid var(--border);box-shadow:var(--s1)}
body[data-look="haupt"] .bild{background:radial-gradient(80% 60% at 50% 18%,rgba(255,255,255,.95),transparent 70%),
             linear-gradient(170deg,var(--card) 0%,#F3E4D3 100%)}
.bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.bild.frei img{object-fit:contain;padding:8px 6px 12px;mix-blend-mode:multiply}
.bild::after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.75);border-radius:38px 38px 11px 11px;pointer-events:none}
.bild.leer{display:grid;place-items:center}
.bild .kz{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--fuehrt);letter-spacing:.02em}
.nr-raute{position:absolute;left:50%;bottom:-9px;width:20px;height:20px;transform:translateX(-50%) rotate(45deg);
  background:var(--card);border:1px solid var(--fuehrt-hell);display:grid;place-items:center;box-shadow:0 6px 12px -8px rgba(var(--k-rgb),.6);z-index:2}
.nr-raute span{transform:rotate(-45deg);font:500 10px/1 var(--sans);color:var(--aubergine);font-variant-numeric:lining-nums}
.text{flex:1;min-width:0}
.kat{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);font-weight:500}
.name{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;line-height:1.12;margin-top:2px}
.knopf{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--aubergine);background:var(--fuehrt-hauch);border:1px solid var(--fuehrt-hell);border-radius:99px;padding:9px 12px}
.karte:hover .knopf{background:var(--fuehrt-hell)}
/* normale Karte: runder Pfeil-Knopf (ganze Karte ist das Tap-Ziel, Name bekommt die Breite) */
.karte:not(.gross) .knopf{width:44px;height:44px;padding:0;justify-content:center;font-size:1.05rem;letter-spacing:0;color:var(--fuehrt)}
.karte:not(.gross) .knopf .kt{display:none}

/* Grosse Karte (erstes Lieblingsprodukt, nur Hauptprofil) — dunkle Buehne, brand-brief.md §6 */
.karte.gross{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;background:var(--stage);border-color:var(--stage);box-shadow:var(--s4);color:var(--creme)}
.karte.gross .buehne{display:grid;place-items:center;padding:26px 0 30px;
  background:radial-gradient(60% 70% at 50% 40%,rgba(176,160,196,.35),transparent 70%),linear-gradient(180deg,#3A2A3E,var(--stage))}
.karte.gross .bild{width:46%;max-width:210px;border-color:rgba(232,179,120,.5);box-shadow:var(--s4)}
.karte.gross .bild::after{inset:6px;border-radius:calc(105px - 6px) calc(105px - 6px) 9px 9px}
.karte.gross .bild{border-radius:105px 105px 14px 14px}
.karte.gross .nr-raute{width:26px;height:26px;bottom:-12px;border-color:var(--gold-hell)}
.karte.gross .nr-raute span{font-size:12px}
.karte.gross .unten{display:flex;align-items:center;gap:14px;padding:16px 18px 18px}
.karte.gross .kat{color:var(--gold-hell)}
.karte.gross .name{font-size:1.6rem;color:var(--creme)}
.karte.gross .knopf{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--aubergine);padding:12px 16px}
.karte.gross:hover{border-color:var(--gold-hell)}

/* Offener Link (Platzhalter) — sichtbar unfertig statt still kaputt (handwerk/seitenbau.md §7.13) */
.karte.offen{border-style:dashed;cursor:default}
.karte.offen .knopf{border-style:dashed;background:transparent}
.karte.offen .knopf::before{content:"⬜";font-size:.9rem}
.karte.gross.offen .knopf{color:var(--gold-hell);border-color:var(--gold-hell)}
.karte.gross.offen .knopf::before{content:"⬜ "}

/* ---- Abschlusskarte "Alle Produkte ansehen" (06.11.2026): Rahmen wie die Produktkarten, plus feine Innenlinie
   in Gold = Siegel am Ende der Liste; mittig, ohne Bild, runder Pfeil-Knopf in Fuehrungsfarbe ---- */
#gesamt{margin-top:34px}
.gesamt-karte{position:relative;display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--aubergine);
  min-height:112px;padding:22px 18px 22px 22px;border-radius:var(--rund);
  background:linear-gradient(170deg,var(--card) 0%,var(--lavendel-hell) 100%);
  border:1px solid var(--fuehrt-hell);box-shadow:var(--s3);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.gesamt-karte::before{content:"";position:absolute;inset:5px;border:1px solid var(--border2);border-radius:calc(var(--rund) - 5px);pointer-events:none}
.gesamt-karte:hover{transform:translateY(-2px);box-shadow:var(--s4)}
.gesamt-karte:active{transform:translateY(0) scale(.99)}
.gesamt-karte>.raute{position:absolute;top:-3px;left:50%;margin-left:-2.5px}
.gesamt-text{flex:1;min-width:0}
.gesamt-titel{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:500;line-height:1.1}
.gesamt-satz{display:block;margin-top:4px;font-size:.92rem;color:var(--aubergine-soft);line-height:1.45}
.gesamt-pf{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;
  background:var(--fuehrt-hell);color:var(--aubergine);border:1px solid var(--fuehrt-hell);transition:transform .25s}
.gesamt-karte:hover .gesamt-pf{transform:translateX(3px)}
.gesamt-karte.offen{border-style:dashed;cursor:default}

/* ---- Weiter-Knoepfe (Quiz / Meine Welt) ---- */
.weiter{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.weiter a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;text-decoration:none;
  border-radius:99px;border:1px solid var(--border2);background:rgba(251,248,244,.7);
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--aubergine);
  box-shadow:var(--s1);transition:transform .2s,border-color .2s}
.weiter a:hover{transform:translateY(-2px);border-color:var(--fuehrt-hell)}
.weiter a .pf{color:var(--fuehrt)}

/* ---- Fuss ---- */
footer{text-align:center;margin-top:40px;color:var(--aubergine-soft);font-size:.82rem;line-height:1.55}
footer .hinweis{max-width:40ch;margin:0 auto 16px}
footer .recht a{color:var(--clay);text-decoration:none;margin:0 10px;display:inline-block;padding:8px 2px}
footer .recht a:hover{color:var(--aubergine)}
footer .sig{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--aubergine);margin-bottom:12px}

/* ---- Pruefansicht (?pruef): zeigt, welche Saetze noch die Texterin braucht ---- */
.tx-mark{display:none}
body.pruefen .tx-mark{display:inline-block;margin-left:6px;font:500 10px/1 var(--sans);letter-spacing:.06em;
  color:#5A4300;background:#FFF3C4;border:1px solid #E8D27A;border-radius:6px;padding:3px 5px;vertical-align:middle}

/* ---- Einblenden (3 Netze: noscript, .js-Klasse, 3-s-Zeitnetz im Skript) ---- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .karte,.weiter a{transition:none}
}
@media (max-width:360px){
  .karte{gap:12px}
  .bild{width:72px}
  .name{font-size:1.18rem}
}

/* =====================================================================
   06.11.2026 · Routine in vier Schritten auf BEIDEN Seiten
   Wahl im Schritt "Waschen": grosse Karte (System) - "oder einzeln" - zwei kleine Karten nebeneinander
   ===================================================================== */
.oder{display:flex;align-items:center;gap:12px;margin:16px 6px 14px}
.oder .ln{flex:1;height:1px;background:var(--border2)}
.oder-wort{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--fuehrt);white-space:nowrap}
.liste-klein{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.karte.klein{flex-direction:column;align-items:center;text-align:center;gap:10px;min-height:0;height:100%;padding:16px 10px 14px}
.karte.klein .bild{width:72px}
.karte.klein .text{flex:0 0 auto;margin-top:6px}
.karte.klein .name{font-size:1.14rem}
.karte.klein .knopf{width:40px;height:40px}

/* "Mehr von mir": Kontrastflaeche der Marke, damit sie sich klar von den Produktkarten abhebt */
.mehr{display:flex;flex-direction:column;gap:12px;margin-top:44px}
.mehr-kopf{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.mehr-titel{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.1}
.mehr-karte{display:flex;align-items:center;gap:14px;text-decoration:none;min-height:84px;
  background:linear-gradient(160deg,#3A2A3E,var(--stage));color:var(--creme);
  border:1px solid var(--stage);border-radius:var(--rund);padding:16px 18px;box-shadow:var(--s4);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.mehr-karte:hover{transform:translateY(-2px);box-shadow:var(--s3)}
.mehr-text{flex:1;min-width:0}
.mehr-name{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;line-height:1.12;color:var(--creme)}
.mehr-beschr{display:block;font-size:.88rem;line-height:1.45;color:#D9CDDA;margin-top:3px}
.mehr-pf{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--fuehrt-hell);color:var(--fuehrt-hell);font-size:1rem}
body[data-look="haupt"] .mehr-pf{border-color:var(--gold-hell);color:var(--gold-hell)}
body[data-look="haar"] .mehr-karte{background:linear-gradient(160deg,#3D2F47,var(--stage))}
.mehr-karte.offen{border:1px dashed var(--fuehrt-hell);cursor:default}
@media (prefers-reduced-motion:reduce){.mehr-karte{transition:none}}

/* =====================================================================
   06.11.2026 · Veredelung Kopf + Symbolreihe + Linien-Optik "Mehr von mir"
   (Idee aus einer gezeigten Link-in-Bio-Seite, nichts uebernommen ausser dem Gedanken:
    Bogenkarte um den Kopf, ruhige Luft, Symbolreihe, feine Linien)
   ===================================================================== */
.kopf{position:relative;isolation:isolate;margin:14px auto 0;max-width:440px;text-align:center;
  padding:30px 22px 26px;border-radius:230px 230px 24px 24px / 200px 200px 24px 24px;
  border:1px solid var(--border);overflow:hidden;box-shadow:var(--s4);
  background:radial-gradient(70% 45% at 50% 22%,rgba(255,255,255,.95),transparent 72%),
             linear-gradient(180deg,#F6E6D4 0%,var(--card) 62%)}
body[data-look="haar"] .kopf{background:radial-gradient(70% 45% at 50% 22%,rgba(255,255,255,.95),transparent 72%),
             linear-gradient(180deg,#E3D8EE 0%,var(--card) 62%)}
.kopf::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.85);
  border-radius:222px 222px 17px 17px / 192px 192px 17px 17px;pointer-events:none;z-index:1}
.kopf-bild{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 30%;opacity:0;transition:opacity .8s ease}
.kopf-bild.mit-foto{opacity:.32;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 92%);mask-image:linear-gradient(to bottom,#000 30%,transparent 92%)}
.kopf-inhalt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.kopf .portrait{margin:0 auto 14px}
.kopf .eyebrow{margin-top:2px}
.kopf h1{margin:8px 0 8px}
.kopf .handle{margin-top:14px;font-size:.72rem;letter-spacing:.26em}
.symbole{display:flex;justify-content:center;gap:12px;margin-top:12px}
.sym{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--fuehrt-hell);background:rgba(251,248,244,.7);color:var(--aubergine);
  transition:transform .2s,background .2s,border-color .2s}
.sym svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sym svg .voll{fill:currentColor;stroke:none}
.sym:hover{transform:translateY(-2px);background:var(--fuehrt-hauch);border-color:var(--fuehrt)}
.sym.offen{border-style:dashed;opacity:.55;cursor:default}
.kennz{padding-top:16px}
.trenner{margin-top:28px}

/* Kopf erscheint beim Oeffnen sanft (Inhalt bleibt ohne Animation sichtbar) */
@keyframes hub-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kopf{animation:hub-auf .9s cubic-bezier(.22,.61,.36,1) both}
.kopf .portrait{animation:hub-auf .9s cubic-bezier(.22,.61,.36,1) .15s both}

/* "Mehr von mir": feine Innenlinie und duenner Pfeilring */
.mehr-karte{position:relative}
.mehr-karte::before{content:"";position:absolute;inset:5px;border:1px solid rgba(232,179,120,.32);border-radius:13px;pointer-events:none}
body[data-look="haar"] .mehr-karte::before{border-color:rgba(176,160,196,.42)}
.mehr-pf{border-width:1px;background:transparent;transition:transform .25s,background .25s}
.mehr-karte:hover .mehr-pf{transform:translateX(3px);background:rgba(232,179,120,.12)}
.mehr-karte:focus-visible{outline:2px solid var(--fuehrt-hell);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .kopf,.kopf .portrait{animation:none}
  .sym,.mehr-pf,.kopf-bild{transition:none}
}
@media (max-width:360px){
  .kopf{padding:26px 16px 22px}
}

/* =====================================================================
   06.11.2026 · EIN Hub fuer beide Konten · Kopf A/B · Hintergrund A/B
   Look: warme Hauptprofil-Palette fuehrt (Sonnenorange an Pfeilen/Nummern),
   Lavendel traegt nur Flaeche und Licht im Hintergrund -> nie gleich laut (brand-brief.md:30).
   Der hohe Rundbogen (wirkte wie ein Grabstein) ist ersetzt.
   ===================================================================== */
body.bg-a,body.bg-b{background:linear-gradient(170deg,#FBF5EE 0%,#F6EEE8 38%,#EFE6F2 72%,#E9DFF0 100%)}
body.bg-a::before{
  background:
    radial-gradient(42% 32% at 8% 6%,rgba(232,179,120,.42),transparent 70%),
    radial-gradient(48% 36% at 96% 14%,rgba(176,160,196,.48),transparent 72%),
    radial-gradient(46% 34% at 4% 58%,rgba(231,223,238,.95),transparent 70%),
    radial-gradient(44% 30% at 100% 70%,rgba(232,179,120,.22),transparent 72%),
    radial-gradient(60% 40% at 50% 104%,rgba(176,160,196,.40),transparent 72%)}
body.bg-b::before{background:none}
.seiten-foto{position:fixed;inset:-40px;z-index:-2;pointer-events:none;background-size:cover;background-position:center 25%;
  filter:blur(30px) saturate(.85);opacity:0;transition:opacity 1s ease}
.seiten-foto.da{opacity:.38}
body.kopf-a .kopf,body.kopf-b .kopf{animation:hub-auf .9s cubic-bezier(.22,.61,.36,1) both}
body.kopf-a .kopf::after,body.kopf-b .kopf::after{content:none}
.kopf .handle{letter-spacing:.12em;text-transform:none;font-size:.82rem;color:var(--clay)}
.sym{position:relative}
.sym-zusatz{position:absolute;right:-6px;bottom:-5px;font:500 9px/1 var(--sans);letter-spacing:.04em;
  background:var(--lavendel-hell);color:var(--aubergine);border:1px solid var(--lavendel);border-radius:99px;padding:3px 5px}
/* KOPF A: breite, sanft gerundete Karte, Portraet halb ueberlappend */
body.kopf-a .kopf{max-width:none;margin:72px 0 0;padding:70px 20px 24px;overflow:visible;
  border-radius:30px;border:1px solid rgba(235,225,214,.9);
  background:linear-gradient(180deg,rgba(251,248,244,.94),rgba(251,248,244,.8));
  box-shadow:0 22px 44px -36px rgba(var(--k-rgb),.35)}
body.kopf-a .kopf::before{content:"";position:absolute;inset:6px;border-radius:24px;border:1px solid rgba(232,179,120,.28);pointer-events:none}
body.kopf-a .kopf-bild{display:none}
body.kopf-a .kopf .portrait{position:absolute;top:-58px;left:50%;margin:0;transform:translateX(-50%);width:112px;height:112px;animation:none;z-index:3}
body.kopf-a .kopf-inhalt{position:static}
/* KOPF B: vollbreite Kopfzone, weich auslaufend, Portraet ueberlappt */
body.kopf-b .kopf{max-width:none;margin:10px calc(var(--gut)*-1) 0;padding:0 var(--gut) 8px;border:0;border-radius:0;
  background:none;box-shadow:none;overflow:visible}
body.kopf-b .kopf-bild{display:block;position:absolute;left:0;right:0;top:0;height:190px;z-index:-1;opacity:1;
  background:radial-gradient(60% 80% at 25% 20%,rgba(232,179,120,.40),transparent 70%),
             radial-gradient(60% 80% at 80% 30%,rgba(176,160,196,.50),transparent 70%),
             linear-gradient(180deg,#F3E2D2,#EDE3F1);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
body.kopf-b .kopf-bild.mit-foto{background-size:cover;background-position:center 30%;opacity:.55}
body.kopf-b .kopf-inhalt{padding-top:96px}
body.kopf-b .kopf .portrait{width:120px;height:120px;margin:0 auto 14px;border-width:5px}
@media (min-width:600px){ body.kopf-b .kopf{margin-left:0;margin-right:0;border-radius:28px;overflow:hidden;padding-bottom:22px} }
@media (prefers-reduced-motion:reduce){ body.kopf-a .kopf,body.kopf-b .kopf{animation:none} .seiten-foto{transition:none} }

/* 06.11.2026 · Handles als Links (beide Instagram-Konten), Tippflaeche >= 44 px, gut lesbar */
.kopf .handle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:4px;margin-top:10px}
.handle-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--aubergine-soft);font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(217,142,59,.45);text-underline-offset:4px;text-decoration-thickness:1px;
  border-radius:8px;transition:color .2s,text-decoration-color .2s,background .2s}
.handle-link:hover{color:var(--aubergine);text-decoration-color:var(--gold);background:rgba(232,179,120,.10)}
.handle-trenn{color:var(--clay)}
@media (prefers-reduced-motion:reduce){.handle-link{transition:none}}
/* Lesbarkeit kleiner Schrift (06.11.2026): Sonnenorange #D98E3B hat auf Kartengrund nur 2,5:1, Taupe 2,9:1.
   Fuer kleine Textzeilen dunklere Toene derselben Farbfamilie (>= 4,5:1); Flaechen, Linien, Rauten bleiben in den Markenwerten. */
.kopf .eyebrow{color:#A65F1E}
.kat{color:#7D6654}
.oder-wort{color:#A65F1E}
/* Zwei Handles bewusst untereinander (nebeneinander brach es bei 390 px mit einem losen Punkt um) */
.kopf .handle{flex-direction:column;row-gap:0;letter-spacing:.04em;margin-top:6px}
.handle-trenn{display:none}
.handle-link{min-height:44px;padding:0 8px}
@media (min-width:600px){ .kopf .handle{flex-direction:row;column-gap:10px} .handle-trenn{display:inline} .handle-link{min-height:44px} }

/* 06.11.2026 · Kurzbeschreibung unter dem Produktnamen (Aubergine gedaempft #6E6270, ca. 5,3:1 auf Kartengrund #FBF8F4) */
.beschr{display:block;font-size:14.5px;line-height:1.4;color:var(--aubergine-soft);margin-top:5px;font-weight:400}
.karte.klein .beschr{font-size:14px;margin-top:4px}
.karte.klein .text{flex:1 1 auto}
.liste-klein{align-items:stretch}
.karte.gross .beschr{color:#D9CDDA}

/* =====================================================================
   06.11.2026 · Kopf verschlankt (Michelle: "Kachel verschlanken. Nur Insta-Buttons, 2 Stueck.")
   - Symbolreihe = nur zwei Instagram-Pills (Beschriftung + kleiner Handle); die Handle-Zeile entfaellt
   - kleineres Portraet, engere Abstaende -> erste Produktkarte bei 390x812 im ersten Blick
   ===================================================================== */
.kennz{padding:12px 0 2px}
body.kopf-a .kopf{margin-top:56px;padding:54px 16px 18px}
body.kopf-a .kopf .portrait{width:92px;height:92px;top:-46px}
.kopf .eyebrow{margin-top:0;font-size:10.5px}
.kopf h1{font-size:clamp(1.95rem,1.5rem + 2.4vw,2.5rem);margin:6px 0 6px}
.kopf .unter{font-size:.95rem;line-height:1.45}
.trenner{margin:18px auto 2px}

.symbole{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;width:100%;max-width:380px;margin:14px auto 0}
.kanal{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--fuehrt-hell);background:rgba(251,248,244,.75);color:var(--aubergine);text-decoration:none;
  transition:transform .2s,background .2s,border-color .2s}
.kanal svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kanal svg .voll{fill:currentColor;stroke:none}
.kanal-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0;text-align:left}
.kanal-titel{font-size:.86rem;font-weight:500;letter-spacing:.02em}
.kanal-handle{font-size:.7rem;color:#7D6654;letter-spacing:.01em;white-space:nowrap}
.kanal:hover{transform:translateY(-1px);background:var(--fuehrt-hauch);border-color:var(--fuehrt)}
.kanal:focus-visible{outline:2px solid var(--fuehrt);outline-offset:3px;border-radius:99px}
.kanal.offen{border-style:dashed;opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.kanal{transition:none}}
@media (max-width:360px){ body.kopf-a .kopf{padding:52px 12px 16px} }
/* Feinschliff nach Messung am Kind (B28): langer Handle "@michelles.haarroutine" stiess bei 390 px an den Pill-Rand */
.kanal{gap:7px;padding:6px 10px}
.kanal svg{width:18px;height:18px}
.kanal-handle{font-size:.68rem;letter-spacing:0}
.kopf .unter,.kopf h1{text-wrap:balance}
/* 06.11.2026 · zweite Reihe unter den Instagram-Buttons: TikTok + WhatsApp als kleine Pills, gleiche Linie */
.symbole{margin-top:12px}
.symbole-klein{grid-column:1/-1;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.kanal-klein{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:0 16px 0 14px;
  border-radius:99px;border:1px solid var(--fuehrt-hell);background:rgba(251,248,244,.75);color:var(--aubergine);text-decoration:none;
  font-size:.8rem;font-weight:500;letter-spacing:.03em;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s}
.kanal-klein svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kanal-klein svg .voll{fill:currentColor;stroke:none}
.kanal-klein:hover{transform:translateY(-1px);background:var(--fuehrt-hauch);border-color:var(--fuehrt)}
.kanal-klein:focus-visible{outline:2px solid var(--fuehrt);outline-offset:3px}
.kanal-klein.offen{border-style:dashed;opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.kanal-klein{transition:none}}

/* =====================================================================
   06.11.2026 · Kopf verschlankt, Runde 2 (Michelle: "aber noch zu hoch")
   Ziel: Kachel <= ~235 px bei 390 px, damit "01 Vor der Waesche" und der Anfang
   der ersten Karte auch mit INTERN-Leiste auf 390x812 sichtbar sind.
   - Portraet 72 px, halb ueber dem oberen Kartenrand
   - Eyebrow "Meine Favoriten" ausgeblendet (sagt dasselbe wie der Titel; Wert bleibt im Datenblock)
   - Titel und Untertitel einzeilig von 320 bis 1100 px
   - EINE Kanalreihe: zwei Instagram-Pills (Symbol + Kurzwort, Handle nur im aria-label/Tooltip)
     + TikTok und WhatsApp als runde 44-px-Symbole. Zu schmal -> sauber 2 + 2 (Paare brechen nie auseinander)
   ===================================================================== */
body.kopf-a .kopf{margin-top:44px;padding:44px 12px 16px}
body.kopf-a .kopf .portrait{width:72px;height:72px;top:-36px;border-width:3px}
.kopf .eyebrow{display:none}
.kopf h1{font-size:clamp(1.5rem,.15rem + 7.1vw,2.5rem);line-height:1.08;margin:0 0 4px}
.kopf .unter{font-size:clamp(.86rem,.6rem + 1.2vw,.95rem);line-height:1.4;max-width:none}
.symbole{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 6px;max-width:none;margin:12px auto 0}
.kanal{flex:0 0 auto;min-height:44px;gap:5px;padding:0 11px 0 9px}
.kanal svg{width:17px;height:17px}
.kanal-titel{font-size:.82rem;white-space:nowrap}
.kanal-handle{display:none}
.symbole-klein{flex:0 0 auto;flex-wrap:nowrap;gap:6px}
.kanal-klein{width:44px;height:44px;min-width:44px;padding:0;gap:0;border-radius:50%}
.kanal-klein svg{width:18px;height:18px}
.kanal-kurz{display:none}
/* Eine Reihe braucht ~323 px Innenbreite: passt ab ~384 px Bildschirm; darunter 2 Pills ueber 2 Symbolen (gemessen 390/375/360/320) */

/* ---- VIP-Einladung (06.11.2026): ganz am Schluss, hell/warm, ruhiger als die Produktkarten ---- */
.vip{margin-top:44px;text-align:center;padding:22px 20px 24px;border-radius:var(--rund);
  background:linear-gradient(170deg,var(--card) 0%,#F6E9DA 100%);border:1px solid var(--border2)}
.vip[hidden]{display:none}
.vip-kopf{display:flex;align-items:center;gap:10px;margin:0 auto 14px;max-width:180px}
.vip-kopf .ln{flex:1;height:1px;background:var(--border2)}
.vip-titel{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15;margin:0 0 8px;text-wrap:balance}
.vip-text{font-size:.92rem;line-height:1.55;color:var(--aubergine-soft);margin:0 auto 18px;max-width:38ch}
.vip-knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 22px 8px 20px;max-width:100%;
  border-radius:99px;border:1px solid var(--fuehrt-hell);background:var(--fuehrt-hauch);color:var(--aubergine);text-decoration:none;
  font-size:.82rem;font-weight:500;letter-spacing:.04em;transition:transform .2s,background .2s,border-color .2s}
.vip-knopf svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vip-knopf svg .voll{fill:currentColor;stroke:none}
.vip-knopf:hover{transform:translateY(-1px);background:var(--fuehrt-hell);border-color:var(--fuehrt)}
@media (prefers-reduced-motion:reduce){.vip-knopf{transition:none}}

/* 08.11.2026 · Kontrast freistehender Schrift, an gemalten Pixeln gemessen (B48, 390/360/320/1100 px).
   Dunklere Toene derselben Farbfamilie wie in schoenheit-neu/start-neu (--frei-soft #3A2E40, Nummern #8A4C14). Rauten, Linien, Flaechen unveraendert. */
.ab-nr{color:#8A4C14}
.oder-wort{color:#3E2E20}
footer,footer .recht,footer .recht a{color:#3A2E40}
footer .recht a:hover{color:var(--aubergine)}
.karte:not(.gross) .knopf,.weiter a .pf{color:#8A4C14}