/* CLAUDIS — Relaunch. Mobile first, dazu eine echte Computer-Ansicht ab 960 px.
   Handy-Regeln (max-width) stehen am DATEIENDE (css-handybreite-reihenfolge).

   14.09.: Bis dahin gab es KEINE Computer-Ansicht. .huelle war auf jeder Breite
   520 px schmal — gemessen bei 1440 px waren 64 % der Fläche leer, bei 1920 px
   73 %. Geprüft worden war ausschließlich bei 390 px. */

:root{
  --creme:#F4EFE7;
  --creme-tief:#E9E0D3;
  --linie:#DCD1C0;
  --schwarz:#0E0E0E;
  --schwarz-weich:#1C1A18;
  --kirsche:#B5122E;
  --kirsche-hell:#D4213C;
  --grau:#6B6257;
  --rand:22px;
  --takt:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--schwarz);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.02rem;line-height:1.62;
  overflow-x:hidden;
}
/* height:auto ist PFLICHT, sobald die Bilder width/height-Attribute tragen
   (die stehen dort gegen den Layout-Sprung). Ohne diese Zeile gewinnt das
   HTML-Attribut gegen aspect-ratio: am 13.09. war ein Galeriebild 1600 px
   hoch statt 440 px — die Breite stimmte, deshalb fiel es keiner
   Breitenmessung auf. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* Die Hülle trägt nur noch den Grund. Die Breite regelt .rand — schwarze
   Sektionen laufen dadurch als volle Bänder über den ganzen Bildschirm. */
.huelle{position:relative;background:var(--creme)}
.rand{
  padding-left:var(--rand);padding-right:var(--rand);
  max-width:1280px;margin-left:auto;margin-right:auto;
}
.voll{margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1)}

/* ── Typo ─────────────────────────────────────────────── */
.eyebrow{
  font-family:Inter;font-weight:500;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.22em;color:var(--kirsche);margin:0 0 14px;
}
.eyebrow.hell{color:var(--kirsche-hell)}
.h1{
  font-family:Archivo,Inter,sans-serif;font-weight:900;
  font-size:clamp(3.4rem,17vw,5.2rem);line-height:.86;letter-spacing:-.035em;
  margin:0;text-transform:uppercase;
}
.h2{
  font-family:Archivo,Inter,sans-serif;font-weight:900;
  font-size:clamp(2.1rem,9.5vw,2.9rem);line-height:.95;letter-spacing:-.025em;
  margin:0 0 16px;text-transform:uppercase;
}
.h2-klein{font-size:clamp(1.7rem,7.5vw,2.3rem)}
.h3{font-family:Archivo,Inter,sans-serif;font-weight:700;font-size:1.22rem;line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
.zitat{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.55rem;line-height:1.28;margin:0}
.meta{font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--grau);margin:0}
.body{margin:0 0 18px}
.rot{color:var(--kirsche)}
.gross{font-size:1.12rem;line-height:1.55}

/* ── Kopf (Produktseite) ──────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:50;background:rgba(244,239,231,.93);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;height:58px}
.wortmarke-klein{
  font-family:Archivo,sans-serif;font-weight:900;font-size:1.18rem;letter-spacing:-.02em;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.wortmarke-klein span{color:var(--kirsche)}
.kopf-knopf{
  background:none;border:0;padding:10px;margin:-10px;color:var(--schwarz);
  display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:500;
  min-height:44px;
}
.korb-zahl{
  background:var(--kirsche);color:#fff;border-radius:999px;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:600;
}

/* ── Knöpfe ───────────────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 22px;border-radius:2px;border:1.5px solid transparent;
  font-weight:600;font-size:.92rem;text-decoration:none;letter-spacing:.01em;
  transition:background 220ms var(--takt),color 220ms var(--takt),border-color 220ms var(--takt);
}
.knopf-voll{background:var(--kirsche);color:#fff;border-color:var(--kirsche)}
.knopf-voll:active{background:var(--kirsche-hell)}
.knopf-rand{background:transparent;color:var(--creme);border-color:rgba(244,239,231,.5)}
.knopf-rand:active{background:rgba(244,239,231,.14)}
.knopf-dunkel{background:var(--schwarz);color:var(--creme);border-color:var(--schwarz)}
.knopf-schmal{min-height:44px;font-size:.85rem;padding:0 17px}
.knopf-voll-breit{width:100%}
@media (hover:hover){
  .knopf-voll:hover{background:var(--kirsche-hell);border-color:var(--kirsche-hell)}
  .knopf-dunkel:hover{background:#2A2622;border-color:#2A2622}
}

/* ── Live ─────────────────────────────────────────────── */
.live{background:var(--schwarz);color:var(--creme);padding:34px 0}
.live-kopf{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.punkt{width:9px;height:9px;border-radius:50%;background:var(--kirsche-hell);flex:none}
.punkt.pulst{animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.live-marke{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--kirsche-hell)}
.live-titel{font-family:Archivo,sans-serif;font-weight:900;font-size:1.72rem;line-height:1.02;letter-spacing:-.02em;margin:0 0 10px;text-transform:uppercase}
.live-zeile{color:rgba(244,239,231,.76);margin:0 0 20px;font-size:.97rem;line-height:1.55}
.live-leer{
  border:1px dashed rgba(244,239,231,.3);padding:17px;border-radius:3px;
  color:rgba(244,239,231,.72);font-size:.92rem;line-height:1.55;margin:0 0 18px;
}
.live-leer strong{color:var(--creme);font-weight:600}

/* ── Sektion allgemein ────────────────────────────────── */
.sektion{padding:70px 0}
.sektion-kino{background:var(--schwarz);color:var(--creme);padding:88px 0}
.sektion-kino .h2{color:var(--creme)}
.sektion-kino .body{color:rgba(244,239,231,.76)}
.sektion-kopf{margin-bottom:26px}
.sektion-kopf .body{max-width:26em;color:var(--grau)}
.sektion-kino .sektion-kopf .body{color:rgba(244,239,231,.72)}

/* ── Schiene (waagerecht) ─────────────────────────────── */
/* scroll-padding ist PFLICHT, nicht Kosmetik: ohne sie snappt die erste Karte
   an den Container-Rand und ignoriert das padding-left — die Schiene startet
   dann um 22 px vorgescrollt und die erste Karte klebt am Displayrand.
   Am 13.09. gemessen (scrollLeft war 22 statt 0). */
.schiene{
  display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px var(--rand) 6px;margin:0 calc(var(--rand) * -1);
  scroll-padding-left:var(--rand);scroll-padding-right:var(--rand);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.schiene::-webkit-scrollbar{display:none}
.schiene > *{scroll-snap-align:start;flex:0 0 66%;max-width:250px}

/* ── Produktkarte (Struktur — Daten kommen aus X-Sale) ─ */
.karte{text-decoration:none;display:block}
.karte-bild{position:relative;aspect-ratio:3/4;background:var(--creme-tief);overflow:hidden;border-radius:2px}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.karte-fahne{
  position:absolute;top:9px;left:9px;background:var(--kirsche);color:#fff;
  font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
}
.karte-name{font-weight:600;font-size:.94rem;margin:11px 0 3px;line-height:1.3}
.karte-preis{font-size:.94rem;margin:0;font-weight:500}
.karte-meta{font-size:.76rem;color:var(--grau);margin:3px 0 0}

/* Platzhalter-Karte: erkennbar KEIN echtes Produkt */
.karte-platz .karte-bild{
  background:repeating-linear-gradient(45deg,var(--creme-tief) 0 9px,#E3D8C8 9px 18px);
  display:flex;align-items:center;justify-content:center;
}
.karte-platz .platz-text{
  font-size:.72rem;color:var(--grau);text-align:center;padding:0 14px;line-height:1.45;letter-spacing:.02em;
}
.karte-platz .balken{height:11px;background:var(--creme-tief);border-radius:2px;margin-top:11px}
.karte-platz .balken.kurz{width:56%;margin-top:7px}

/* ── Leerzustand ──────────────────────────────────────── */
.leer{
  border:1px dashed var(--linie);padding:26px 20px;text-align:center;border-radius:3px;
  background:rgba(233,224,211,.4);
}
.leer .h3{margin-bottom:7px}
.leer .body{color:var(--grau);margin:0 0 16px;font-size:.95rem}

/* ── Komplette Outfits ────────────────────────────────── */
.outfit{position:relative;margin-bottom:14px}
/* Gemessen 13.09.: bei zentriertem Ausschnitt zeigte das Bild nur den Boden.
   Das Motiv (1600x2404) traegt oben. */
.outfit-bild{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px}
.outfit-liste{border-top:1px solid var(--linie);margin-top:16px}
.outfit-pos{
  display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--linie);
}
.outfit-num{
  width:25px;height:25px;border-radius:50%;background:var(--schwarz);color:var(--creme);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;flex:none;
}
.outfit-text{flex:1;min-width:0}
.outfit-text .h3{font-size:.96rem;margin-bottom:2px}
.outfit-summe{display:flex;justify-content:space-between;align-items:baseline;padding:17px 0 0;font-weight:600}

/* ── Favoriten ────────────────────────────────────────── */
.favorit{
  display:flex;gap:15px;padding:19px 0;border-bottom:1px solid rgba(244,239,231,.16);
}
.favorit:last-of-type{border-bottom:0}
.favorit-bild{width:92px;flex:none;aspect-ratio:3/4;object-fit:cover;border-radius:2px;background:var(--schwarz-weich)}
.favorit-text{flex:1;min-width:0}
.favorit-stimme{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:1.04rem;line-height:1.38;color:rgba(244,239,231,.9);margin:7px 0 0;
}

/* ── Claudi ───────────────────────────────────────────── */
.claudi-bild{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:2px}
/* Ehrlicher Platzhalter statt eines fremden Modelfotos als „Claudi“. */
.claudi-platz{
  width:100%;aspect-ratio:4/5;border-radius:2px;border:1.5px dashed var(--linie);
  background:repeating-linear-gradient(45deg,var(--creme-tief) 0 11px,#E3D8C8 11px 22px);
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.claudi-platz-innen{text-align:center;max-width:20em}
.claudi-platz-titel{font-family:Archivo,sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:-.02em;margin:0 0 9px}
.claudi-platz-text{font-size:.92rem;line-height:1.5;color:var(--grau);margin:0}
.claudi-zitat{
  border-left:2.5px solid var(--kirsche);padding-left:17px;margin:26px 0 24px;
}
.claudi-name{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grau);margin:13px 0 0;font-weight:500}
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:26px}
.zahl{border-top:2px solid var(--schwarz);padding-top:11px}
.zahl-gross{font-family:Archivo,sans-serif;font-weight:900;font-size:1.58rem;line-height:1;letter-spacing:-.02em;display:block}
.zahl-text{font-size:.72rem;color:var(--grau);margin:5px 0 0;line-height:1.35}

/* ── Newsletter ───────────────────────────────────────── */
.brief{display:flex;gap:9px;margin-top:15px}
.brief input{
  flex:1;min-width:0;min-height:50px;padding:0 15px;border:1.5px solid var(--linie);
  background:#fff;border-radius:2px;font:inherit;font-size:.95rem;color:var(--schwarz);
}
.brief input:focus{outline:2px solid var(--kirsche);outline-offset:1px;border-color:var(--kirsche)}
.sektion-kino .brief input{background:var(--schwarz-weich);border-color:rgba(244,239,231,.25);color:var(--creme)}

/* ── Fuß ──────────────────────────────────────────────── */
.fuss{background:var(--schwarz);color:rgba(244,239,231,.72);padding:46px 0 34px;font-size:.88rem}
.fuss-marke{font-family:Archivo,sans-serif;font-weight:900;font-size:1.5rem;color:var(--creme);letter-spacing:-.02em;margin:0 0 6px;text-transform:uppercase}
.fuss-zeile{margin:0 0 28px;font-size:.86rem;line-height:1.55}
.fuss-text{margin:0;font-size:.86rem;line-height:1.6}
.fuss-leise{color:rgba(244,239,231,.5)}
.fuss-block{margin-bottom:26px}
.fuss-titel{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--creme);margin:0 0 11px;font-weight:600}
/* Rechtsleiste: Tippziele echte 44 px hoch — gemessen am 13.09., vorher 26 px.
   Der Abstand zwischen den Zeilen kommt jetzt aus der Zielhöhe, nicht aus margin. */
.fuss-liste{list-style:none;padding:0;margin:0}
.fuss-liste li{margin-bottom:0}
.fuss-liste a{text-decoration:none;min-height:44px;display:flex;align-items:center}
.fuss-liste a:active{color:var(--kirsche-hell)}
@media (hover:hover){.fuss-liste a:hover{color:var(--creme)}}
.zahlarten{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.zahlart{
  font-size:.68rem;border:1px solid rgba(244,239,231,.22);padding:4px 8px;border-radius:2px;
  color:rgba(244,239,231,.66);
}
.fuss-schluss{border-top:1px solid rgba(244,239,231,.14);padding-top:20px;margin-top:8px;font-size:.78rem;line-height:1.6}

/* ── Reveal ───────────────────────────────────────────── */
.zeig{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--takt),transform 700ms var(--takt)}
.zeig.da{opacity:1;transform:none}

/* ── Entwurfsleiste (nur Kundenfassung): ordnet ein, was die Kundin sieht ── */
.entwurfs-leiste{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  background:#0E0E0E;color:#F4EFE7;
  padding:0 22px;font-size:.8rem;
  font-family:Inter,system-ui,sans-serif;
  border-bottom:2px solid #B5122E;
  position:relative;z-index:80;
}
.entwurfs-leiste .el-marke{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#D4213C;margin-right:12px;
}
.entwurfs-leiste a{
  color:rgba(244,239,231,.72);text-decoration:none;
  padding:0 11px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:2px;
}
.entwurfs-leiste a:hover{color:#F4EFE7;background:rgba(244,239,231,.08)}
.entwurfs-leiste a[aria-current="page"]{color:#F4EFE7;background:rgba(244,239,231,.14);font-weight:600}
.entwurfs-leiste a:focus-visible{outline:2px solid #D4213C;outline-offset:2px}

/* ══ TABLET — 600 bis 959 px ═════════════════════════════════════════
   Handy-Aufbau, aber mehr Rand und begrenzte Zeilenlänge: bei 768 px
   liefen Fließtexte sonst über 90 Zeichen pro Zeile. */
@media (min-width:600px) and (max-width:959px){
  :root{--rand:40px}
  .body,.live-zeile{max-width:36em}
  .schiene > *{flex:0 0 42%;max-width:300px}
}

/* ══ COMPUTER — ab 960 px ═══════════════════════════════════════════ */
@media (min-width:960px){
  :root{--rand:clamp(32px,4.4vw,72px)}
  body{font-size:1.06rem}
  .body{max-width:38em}

  .h2{font-size:clamp(2.9rem,4.4vw,4.6rem);line-height:.92}
  .h2-klein{font-size:clamp(2.2rem,3.2vw,3.2rem)}
  .eyebrow{font-size:.76rem}
  .sektion{padding:128px 0}
  .sektion-kino{padding:136px 0}

  /* Kopf jeder Sektion: Titel links, Einleitung rechts auf der Grundlinie */
  .sektion-kopf{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(48px,6vw,120px);align-items:end;margin-bottom:56px;
  }
  .sektion-kopf .eyebrow,.sektion-kopf .h2{grid-column:1}
  .sektion-kopf .h2{margin:0}
  .sektion-kopf .body{grid-column:2;grid-row:1 / span 2;margin:0;max-width:34em;font-size:1.1rem}

  /* Schiene wird Raster — am Computer scrollt niemand seitwärts */
  .schiene{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
    overflow:visible;margin:0;padding:0;scroll-snap-type:none;
  }
  .schiene > *{max-width:none}
  .karte-platz .platz-text{font-size:.8rem}

  /* Live: Titel links, Inhalt rechts */
  .live{padding:112px 0}
  .live .rand{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(48px,6vw,120px);align-items:start;
  }
  .live-kopf{grid-column:1 / -1}
  .live-titel{grid-column:1;grid-row:2 / span 3;font-size:clamp(2.6rem,4.2vw,4.4rem);margin:0}
  .live-zeile,.live [data-live-slot],.live .knopf{grid-column:2}
  .live-zeile{font-size:1.14rem;max-width:36em}
  .live .knopf-voll-breit{width:auto;justify-self:start;padding:0 34px}

  /* Komplette Outfits: Bild links, Positionen rechts */
  .sektion-outfits .rand{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    column-gap:clamp(48px,6vw,120px);align-items:start;
  }
  .sektion-outfits .sektion-kopf{grid-column:1 / -1}
  .sektion-outfits .outfit{grid-column:1;margin:0}
  .sektion-outfits .outfit-liste{grid-column:2;margin-top:0}
  .outfit-pos{padding:20px 0}
  .outfit-text .h3{font-size:1.1rem}

  /* Favoriten: drei nebeneinander */
  [data-katalog="favoriten"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  [data-katalog="favoriten"] > .leer{grid-column:1 / -1}
  .favorit{flex-direction:column;border-bottom:0;border-top:1px solid rgba(244,239,231,.18);padding:24px 0 0}
  .favorit:last-of-type{border-bottom:0}
  .favorit-bild{width:100%}

  /* Claudi: Porträt links, Stimme rechts */
  #claudi .rand{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    column-gap:clamp(48px,6vw,120px);align-items:start;
  }
  #claudi .claudi-platz{grid-column:1;grid-row:1 / span 4}
  #claudi .sektion-kopf{grid-column:2;display:block;margin-bottom:8px}
  #claudi .claudi-zitat,#claudi .claudi-text,#claudi .zahlen{grid-column:2}
  .claudi-zitat .zitat{font-size:clamp(1.8rem,2.6vw,2.5rem)}
  .zahl-gross{font-size:clamp(1.9rem,2.6vw,2.6rem)}
  .zahl-text{font-size:.8rem}

  /* Newsletter: Ansage links, Feld rechts */
  .sektion-brief .zeig{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(48px,6vw,120px);align-items:end;
  }
  .sektion-brief .eyebrow{grid-column:1;grid-row:1}
  .sektion-brief .h2{grid-column:1;grid-row:2;margin:0}
  .sektion-brief .body{grid-column:2;grid-row:1;margin:0 0 18px}
  .sektion-brief .brief{grid-column:2;grid-row:2;margin:0}

  /* Fuß: vier Spalten statt einer langen Liste */
  .fuss{padding:96px 0 48px;font-size:.92rem}
  /* Zeile 2 nimmt den Rest auf — sonst verteilen die über zwei Zeilen
     reichenden Spalten ihre Höhe auf beide, und die Zeile unter der Marke
     rutschte weit nach unten (Aufnahme 15.09.). */
  .fuss .rand{
    display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
    grid-template-rows:auto 1fr auto;
    column-gap:48px;align-items:start;
  }
  .fuss-marke{grid-column:1;grid-row:1;font-size:2.4rem;margin-bottom:10px}
  .fuss-zeile{grid-column:1;grid-row:2;margin:0;font-size:.95rem;align-self:start}
  .fuss-block{grid-row:1 / span 2;margin:0}
  .fuss-block:nth-of-type(1){grid-column:2}
  .fuss-block:nth-of-type(2){grid-column:3}
  .fuss-block:nth-of-type(3){grid-column:4}
  .fuss-schluss{grid-column:1 / -1;grid-row:3;margin-top:64px}
}
/* Mit Maus: die 44-px-Tippziele sind fürs Handy. Am Computer ergaben sie
   in der Rechtsleiste Lücken wie Leerzeilen (Screenshot 14.09.). */
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .fuss-liste a{min-height:34px}
}

/* ══ HANDY-REGELN — ans Dateiende (390 px Referenz) ══════ */
@media (max-width:430px){
  .entwurfs-leiste{padding:0 16px;gap:2px}
  .entwurfs-leiste a{padding:0 8px;font-size:.76rem}
  .entwurfs-leiste .el-marke{margin-right:7px;font-size:.6rem}
  .schiene > *{flex:0 0 64%}
  .zahlen{gap:9px}
  .zahl-gross{font-size:1.42rem}
  .brief{flex-direction:column}
  .brief .knopf{width:100%}
}
@media (max-width:360px){
  :root{--rand:17px}
  .schiene > *{flex:0 0 72%}
  .zahlen{grid-template-columns:minmax(0,1fr);gap:13px}
  .favorit-bild{width:78px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .zeig{opacity:1;transform:none}
}