/* Skinbar Kassel — Stil 6 „Oak & Ivory" (Andreas-Wahl 02.09.2026, Stitch-Screen 8579faf8)
   Tokens: Elfenbein-Grund, Eiche-Braun als einzige Akzent- und Überschriftfarbe,
   runde Ecken, weiche Schatten in Grundton, Manrope. Textton #535458 (Marke). */
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(fonts/manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}

:root{
  /* Palette näher an Christina (Andreas 03.09.): UI nur Weiß, Grau-Leiter und
     Anthrazit #535458 (brand_tokens). Farbe kommt aus den Fotos. Rundungen und
     Foto-Layout bleiben Skinbar (Designfreiheit 25.08.). */
  --grund:#F7F7F7; --flaeche:#FFFFFF; --sand:#EFEFEF;
  --eiche:#535458; --eiche-dunkel:#3F4043; --eiche-hell:#ECECEE;
  --text:#535458; --text-leise:#8A8B8F; --linie:#DCDCDC;
  --schatten:0 18px 50px -24px rgba(83,84,88,.28), 0 2px 6px -2px rgba(83,84,88,.10);
  --radius:24px; --radius-klein:14px; --pill:999px;
  --max:1320px; --rand:clamp(1.25rem,4vw,4rem);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--grund);line-height:1.6;font-size:1.0625rem;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--eiche);font-weight:700;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.6rem);margin-bottom:.35em}
h3{font-size:1.25rem;line-height:1.25}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:clamp(4rem,9vw,7.5rem) 0}
.abschnitt-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.abschnitt-kopf p{max-width:52ch;color:var(--text-leise)}
.mono{font-family:var(--mono);font-size:.86rem;letter-spacing:.01em}
.leise{color:var(--text-leise)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.85rem 1.6rem;border-radius:var(--pill);font-weight:600;font-size:1rem;background:var(--eiche);color:#fff;border:1px solid var(--eiche);transition:transform .15s ease,background .2s ease;white-space:nowrap}
.knopf:hover{background:var(--eiche-dunkel);border-color:var(--eiche-dunkel)}
.knopf:active{transform:translateY(1px)}
.knopf.leer{background:transparent;color:var(--eiche);border-color:#BAB8BD}
.knopf.leer:hover{background:var(--eiche-hell)}
.chip{display:inline-block;background:var(--sand);border-radius:var(--radius-klein);padding:.6rem 1rem;font-family:var(--mono);font-size:.9rem;color:var(--eiche-dunkel)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:rgba(247,247,247,.88);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.marke{font-weight:700;letter-spacing:.14em;color:var(--eiche);font-size:1.05rem;text-transform:uppercase}
.nav{display:flex;gap:2rem}
.nav a{font-weight:500;color:var(--text);padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--eiche);border-color:var(--eiche)}
.kopf .knopf{padding:.7rem 1.35rem;min-height:44px}

/* Held */
.held{padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,7vw,6rem)}
.held .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.held-text>*+*{margin-top:1.4rem}
.held-text p.lead{font-size:1.15rem;max-width:44ch}
.held-bild{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);background:var(--sand)}
.held-bild img{width:100%;height:100%;object-fit:cover}

/* Behandlungen */
.karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.karte{background:var(--flaeche);border-radius:var(--radius);padding:1.6rem 1.5rem 1.4rem;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:.7rem;min-height:230px;transition:transform .2s ease}
.karte:hover{transform:translateY(-3px)}
.karte .nr{font-family:var(--mono);font-size:.8rem;color:var(--text-leise)}
.karte p{font-size:.95rem;color:var(--text);flex:1}
.karte .kfuss{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linie);padding-top:.8rem;margin-top:.2rem}
.karte .preis{font-weight:700;color:var(--eiche);font-size:1.1rem}
.karte .alt{color:var(--text-leise);text-decoration:line-through;font-weight:500;font-size:.9rem;margin-right:.35rem}
.karte.aktion{background:var(--eiche-hell)}
.karte.aktion .nr{color:var(--eiche)}

/* Bewertungen */
.beweis{background:var(--flaeche);border-radius:var(--radius);box-shadow:var(--schatten);padding:clamp(2rem,4vw,3.5rem);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2.5rem;align-items:center}
.note{font-size:clamp(4rem,8vw,6.5rem);font-weight:700;color:var(--eiche);letter-spacing:-.04em;line-height:1;font-family:var(--mono)}
.sterne{color:var(--eiche);letter-spacing:.15em;font-size:1.1rem;margin-top:.4rem}
.beweis p.gross{font-size:1.25rem;max-width:40ch;color:var(--text)}

/* Pakete */
.pakete{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.25rem}
.paket{background:var(--flaeche);border-radius:var(--radius);box-shadow:var(--schatten);padding:1.75rem 1.75rem 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.paket.gross{grid-row:span 2;background:var(--eiche);color:#fff;justify-content:space-between}
.paket.gross h3,.paket.gross .preis{color:#fff}
.paket.gross p{color:rgba(255,255,255,.82)}
.paket .zeile{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linie);padding-top:.9rem;margin-top:auto}
.paket.gross .zeile{border-color:rgba(255,255,255,.25)}
.paket .preis{font-weight:700;color:var(--eiche);font-size:1.4rem}
.paket .knopf{align-self:flex-start;margin-top:.5rem}
.paket.gross .knopf{background:#fff;color:var(--eiche);border-color:#fff}

/* Linien */
.linien{display:grid;gap:1.25rem}
.linie{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;background:var(--flaeche);border-radius:var(--radius);box-shadow:var(--schatten);padding:1.25rem}
.linie:nth-child(even) .linie-bild{order:2}
.linie-bild{aspect-ratio:4/3;border-radius:calc(var(--radius) - 8px);overflow:hidden;background:var(--sand);display:flex;align-items:center;justify-content:center}
.linie-bild img{height:88%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.linie-text{padding:.5rem 1rem .5rem 0;border-left:3px solid var(--marker,var(--eiche));padding-left:1.25rem}
.linie-text .anliegen{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-leise)}
.linie-text h3{margin:.3rem 0 .5rem;font-size:1.5rem}
.linie-text p{max-width:48ch}
.linie-text .fakt{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:baseline}
.linie-text .fakt strong{color:var(--eiche)}
.linie-text .mehr{display:inline-block;margin-top:1rem;font-weight:600;color:var(--eiche);border-bottom:1px solid #BAB8BD}

/* Studio */
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.studio-bild{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.studio-bild img{width:100%;height:100%;object-fit:cover}
.fakten{display:grid;gap:1rem;margin-top:1.5rem}
.fakten div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;border-top:1px solid var(--linie);padding-top:.8rem}
.fakten dt{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-leise);padding-top:.2rem}
.fakten dd a{color:var(--eiche);font-weight:600}

/* Fuß */
.fuss{background:var(--sand);padding:3rem 0 2.5rem;margin-top:clamp(2rem,5vw,4rem)}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center}
.fuss .marke{font-size:.95rem}
.fuss nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.fuss nav a:hover{color:var(--eiche)}
.fuss small{width:100%;color:var(--text-leise);font-size:.85rem}

/* Bewegung: nur Einblenden, nur transform/opacity */
@media (prefers-reduced-motion:no-preference){
  .zeig{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .zeig.da{opacity:1;transform:none}
}

/* Mobil */
@media (max-width:1024px){
  .karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .nav{display:none}
  .held .wrap,.beweis,.pakete,.linie,.studio{grid-template-columns:minmax(0,1fr)}
  .held-bild{aspect-ratio:4/5;order:-1}
  .karten{grid-template-columns:minmax(0,1fr)}
  .karte{min-height:0}
  .paket.gross{grid-row:auto}
  .linie:nth-child(even) .linie-bild{order:0}
  .abschnitt-kopf{flex-direction:column;align-items:flex-start;gap:.75rem}
  .fakten div{grid-template-columns:1fr}
  .kopf .knopf{padding:.6rem 1rem;font-size:.92rem}
}

/* Stufe 1 „belebt" (03.09.): Shooting-Fotos statt leerer Räume/Packshots */
.held-bild{aspect-ratio:5/4}
.held-bild img{object-position:50% 20%}
.abschnitt-kopf.mit-bild{align-items:center}
.kopf-bild{flex:0 0 clamp(120px,14vw,190px);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.kopf-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.beweis{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,6fr)}
.beweis-bild{aspect-ratio:4/5;border-radius:calc(var(--radius) - 8px);overflow:hidden}
.beweis-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.paket.gross{padding:0;overflow:hidden}
.paket.gross>div:not(.paket-bild),.paket.gross .zeile{margin-left:1.75rem;margin-right:1.75rem}
.paket.gross>div:not(.paket-bild){margin-top:1.5rem}
.paket.gross .knopf{margin:0 1.75rem 1.5rem}
.paket-bild{aspect-ratio:16/9;overflow:hidden}
.paket-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.linie-bild.foto{position:relative;aspect-ratio:4/3;background:#fff}
.linie-bild.foto img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 25%;mix-blend-mode:normal}
.linie-bild.foto .packshot{mix-blend-mode:normal;position:absolute;right:1rem;bottom:1rem;height:58%;width:auto;background:#fff;border-radius:12px;padding:.4rem;box-shadow:var(--schatten)}
.studio-bilder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.studio-bilder .studio-bild:first-child{grid-column:span 2}
.studio-bild.klein{aspect-ratio:2/1}
@media (max-width:768px){
  .beweis{grid-template-columns:minmax(0,1fr)}
  .beweis-bild{aspect-ratio:3/2}
  .kopf-bild{flex-basis:120px}
  .studio-bilder{grid-template-columns:minmax(0,1fr)}
  .studio-bilder .studio-bild:first-child{grid-column:auto}
}