/* =====================================================================
   sylviafreygner.com V40 – Designsystem nach Sylvias Creative Direction 20.10.2026
   Warmes Weiß + Weißraum · dunkles Navy als typografischer/architektonischer Anker ·
   je Code eine kräftige Akzentfarbe (nicht verwaschen) · große elegante Typografie · asymmetrische Layouts
   Schrift wie die Live-Seite: Avenir LT Pro Light/Bold.
   ===================================================================== */
:root {
  --w: #FBF8F3; --w2: #F3EEE6; --navy: #0F1B3D; --navy2: #1B2A55; --ink4: #26221F; --mute4: #6F6A63; --line4: #E3DDD3;
  --clarity: #0E7C72; --sovereignty: #B8862B; --confidence: #E6007E; --influence: #1F3FD1; --transformation: #D7261E;
  --orange: #EC601E; --gold4: #C9A54A;
  --f4: 'Avenir LT Pro', 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif;
  --pad4: clamp(20px, 5.4vw, 96px);
}
body.v4 { background: var(--w); color: var(--ink4); }
body.v4 main { background: var(--w); }
.v4 .wrap4 { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad4); }
.v4 .k4 { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute4); margin: 0 0 18px; }
.v4 .h1-4 { font-size: clamp(40px, 6vw, 104px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); font-weight: 300 !important; margin: 0 0 26px; }
.v4 .h2-4 { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); font-weight: 300 !important; margin: 0 0 22px; }
.v4 .h3-4 { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; color: var(--navy); font-weight: 300 !important; margin: 0 0 10px; }
.v4 .lead4 { font-size: clamp(22px, 2vw, 32px); line-height: 1.3; color: var(--navy); margin: 0 0 16px; }
.v4 .sub4 { font-size: clamp(16px, 1.15vw, 19px); letter-spacing: .02em; color: var(--navy); margin: 0 0 26px; }
.v4 .body4 p { font-size: 17px; line-height: 1.75; color: #3A3632; margin: 0 0 16px; max-width: 62ch; }
.v4 .caps4 { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--navy); }
.v4 .rule4 { display: block; width: 64px; height: 3px; background: var(--c, var(--navy)); margin: 0 0 26px; }
.v4 .btns4 { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.v4 .b4 { display: inline-flex; align-items: center; gap: 14px; padding: 17px 26px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); transition: background .3s, color .3s; }
.v4 .b4:hover { background: var(--c, var(--navy2)); border-color: var(--c, var(--navy2)); }
.v4 .b4--line { background: transparent; color: var(--navy); }
.v4 .b4--line:hover { color: #fff; }
.v4 .b4--light { background: #fff; color: var(--navy); border-color: #fff; }
.v4 .b4 .arr { width: 20px; }

/* ---------- Kopf ---------- */
.v4 .hdr--sf2 { background: rgba(251, 248, 243, .96); }
.v4 .hdr--sf2 .nav__a { color: var(--navy); }
.v4 .hdr__cta { border-color: var(--navy) !important; color: var(--navy) !important; }
.v4 .drop__s small { display: block; font-size: 11px; color: var(--mute4); letter-spacing: .04em; text-transform: none; }

/* ---------- HERO Startseite ---------- */
.hero4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(660px, calc(100vh - var(--hdr)), 900px); background: var(--w); }
.hero4__txt { align-self: center; padding: clamp(40px, 6vh, 90px) clamp(24px, 3vw, 60px) clamp(40px, 6vh, 90px) var(--pad4); }
.hero4__q { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); margin: 8px 0 22px; padding-top: 18px; border-top: 1px solid var(--line4); display: inline-block; }
.hero4__art { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(5, 1fr); }
.hero4__art i { display: block; height: 100%; }
.hero4__art img { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 24px 40px rgba(15, 27, 61, .28)); }
.hero4__codes { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); z-index: 2; }
.hero4__codes a { padding: 12px 8px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #fff; text-decoration: none; text-align: center; background: rgba(15, 27, 61, .55); }
.hero4__codes a:hover { background: rgba(15, 27, 61, .85); }

/* ---------- Abschnitte ---------- */
.sec4 { padding: clamp(80px, 10vw, 150px) 0; }
.sec4--w2 { background: var(--w2); }
.sec4--navy { background: var(--navy); color: #fff; }
.sec4--navy .h2-4, .sec4--navy .lead4, .sec4--navy .sub4, .sec4--navy .caps4 { color: #fff; }
.sec4--navy .k4 { color: rgba(255, 255, 255, .7); }
.sec4--navy .body4 p { color: rgba(255, 255, 255, .86); }
.split4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.split4--r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.intro4 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 110px); align-items: end; margin-bottom: clamp(50px, 6vw, 90px); }
.names4 { font-size: clamp(13px, 1vw, 15px); letter-spacing: .32em; color: var(--navy); margin-top: 26px; line-height: 2; }
.names4 b { font-weight: 300; }

/* ---------- CODE-Reihe (Startseite) ---------- */
.code4 { --c: var(--navy); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; margin-bottom: clamp(26px, 3vw, 44px); border-top: 4px solid var(--c); }
.code4:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.code4:nth-of-type(even) .code4__img { order: 2; }
.code4__img { position: relative; min-height: 560px; overflow: hidden; background: var(--c); }
.code4__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.code4:hover .code4__img img { transform: scale(1.03); }
.code4__txt { padding: clamp(36px, 4.5vw, 80px); }
.code4__nr { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--c); margin: 0 0 14px; }
.code4__claim { font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--c); margin: 0 0 18px; }
.code4__tag { font-size: clamp(19px, 1.5vw, 23px); color: var(--navy); margin: 0 0 14px; }
.code4__st { font-size: clamp(17px, 1.25vw, 20px); color: var(--navy); font-weight: 700; margin: 0 0 18px; }
.progs4 { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line4); }
.progs4 li { border-bottom: 1px solid var(--line4); }
.progs4 a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 14px; align-items: start; padding: 18px 0; text-decoration: none; color: var(--ink4); }
.progs4 .n { font-size: 12px; letter-spacing: .2em; color: var(--c); padding-top: 4px; }
.progs4 .t { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.progs4 .s { display: block; font-size: 15px; color: var(--c); margin: 4px 0 6px; letter-spacing: 0; text-transform: none; }
.progs4 .d { display: block; font-size: 14.5px; line-height: 1.6; color: #4A4540; text-transform: none; letter-spacing: 0; }
.progs4 .d ul { margin: 8px 0 0 18px; padding: 0; }
.progs4 .arr { width: 20px; margin-top: 6px; color: var(--c); }
.progs4 a:hover .t { color: var(--c); }

/* ---------- Decision Making / Balance ---------- */
.dm4 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #fff; }
.dm4__img { position: relative; min-height: 600px; overflow: hidden; background: var(--orange); }
.dm4__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dm4__txt { padding: clamp(40px, 5vw, 90px); align-self: center; }
.dm4__bal { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); margin: 0 0 22px; }
.dims4 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 26px 0 10px; border: 1px solid var(--navy); }
.dims4 span { padding: 16px 6px; text-align: center; font-size: 11px; letter-spacing: .2em; color: var(--navy); border-right: 1px solid var(--navy); }
.dims4 span:last-child { border-right: 0; background: var(--navy); color: #fff; }

/* ---------- Foto-Teaser (Experiences, About, Final) ---------- */
.ph4 { position: relative; overflow: hidden; min-height: 620px; background: var(--w2); }
.ph4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.duo4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; }
.duo4--r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo4--r .ph4 { order: 2; }
.duo4__txt { padding: clamp(40px, 6vw, 110px) clamp(30px, 5vw, 90px); align-self: center; }
.final4 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--navy); color: #fff; }
.final4 .duo4__txt .h2-4 { color: #fff; }
.final4 .lead4, .final4 .sub4 { color: #fff; }
.final4 .body4 p { color: rgba(255, 255, 255, .85); }

/* ---------- Ideas / Insights Karten ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); margin-top: 50px; }
.card4 { --c: var(--navy); display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--ink4); border-top: 4px solid var(--c); min-height: 280px; padding: 28px 26px 26px; transition: transform .4s; }
.card4:hover { transform: translateY(-4px); }
.card4 .k4 { color: var(--c); }
.card4 h3 { font-size: 21px; line-height: 1.2; color: var(--navy); font-weight: 300 !important; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.card4 p { font-size: 15px; line-height: 1.6; color: #4A4540; margin: 0 0 16px; }
.card4 .more4 { margin-top: auto; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--c); }

/* ---------- Code-Seiten ---------- */
.ch4 { --c: var(--navy); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(600px, calc(100vh - var(--hdr)), 860px); background: var(--w); border-bottom: 6px solid var(--c); }
.ch4__img { position: relative; overflow: hidden; background: var(--c); min-height: 520px; }
.ch4__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ch4__txt { align-self: center; padding: clamp(40px, 6vw, 100px) var(--pad4) clamp(40px, 6vw, 100px) clamp(30px, 5vw, 90px); }
.ch4 .crumb, .dp4 .crumb { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute4); margin-bottom: 24px; }
.ch4 .crumb a, .dp4 .crumb a { color: inherit; }
.ch4 .h1-4 { font-size: clamp(38px, 5vw, 86px); }
.pg4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.pg4 a { --c: inherit; display: flex; flex-direction: column; background: #fff; border-top: 4px solid var(--cc); padding: 30px 28px; text-decoration: none; color: var(--ink4); min-height: 260px; transition: transform .4s; }
.pg4 a:hover { transform: translateY(-4px); }
.pg4 .n { font-size: 12px; letter-spacing: .26em; color: var(--cc); }
.pg4 h3 { font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); font-weight: 300 !important; margin: 12px 0 8px; }
.pg4 .s { font-size: 16px; color: var(--cc); margin: 0 0 12px; }
.pg4 p { font-size: 15px; line-height: 1.6; color: #4A4540; margin: 0 0 14px; }
.pg4 .more4 { margin-top: auto; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--cc); }
.others4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.others4 a { display: block; position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; text-decoration: none; color: #fff; }
.others4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.others4 span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(transparent, rgba(15, 27, 61, .82)); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.others4 b { display: block; font-weight: 300; font-size: 18px; letter-spacing: .08em; margin-top: 4px; }

/* ---------- Detailseiten (bestehende Unterseiten) ---------- */
.dp4 { --c: var(--navy); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(560px, calc(100vh - var(--hdr)), 820px); background: var(--w); border-bottom: 6px solid var(--c); }
.dp4__img { position: relative; overflow: hidden; background: var(--w2); min-height: 520px; }
.dp4__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.dp4__txt { align-self: center; padding: clamp(40px, 6vw, 100px) var(--pad4) clamp(40px, 6vw, 100px) clamp(30px, 5vw, 90px); }
.dp4__code { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--c); margin: 0 0 18px; }
.dp4 .h1-4 { font-size: clamp(34px, 4.4vw, 74px); hyphens: auto; }
body.v4 .osplit img, body.v4 .ocontact img { border-radius: 0; }
body.v4 .oq blockquote { color: var(--navy); }
body.v4 .oh2 { color: var(--navy); }

/* ---------- Insights / Editorial ---------- */
.ed4 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 90px); padding: clamp(36px, 4vw, 60px) 0; border-top: 1px solid var(--line4); }
.ed4__nr { font-size: clamp(40px, 5vw, 80px); line-height: 1; color: var(--c, var(--navy)); font-weight: 300; }
.ed4 h3 { font-size: clamp(22px, 2vw, 32px); line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); font-weight: 300 !important; margin: 0 0 10px; }
.ed4 .s4 { font-size: 18px; color: var(--c, var(--navy)); margin: 0 0 18px; }
.ed4 .one4 { font-size: 15px; letter-spacing: .06em; color: var(--c, var(--navy)); font-weight: 700; margin-top: 10px; }
.series4 { --c: var(--navy); margin-top: clamp(60px, 7vw, 110px); }
.series4 > header { background: var(--c); color: #fff; padding: clamp(36px, 4vw, 60px); margin-bottom: 10px; }
.series4 > header .h2-4, .series4 > header .k4 { color: #fff; }

/* ---------- Glitch Test ---------- */
.gt4 { --cob: #1745F5; --pink: #E6007E; --or: #FF6900; --em: #008C79; background: var(--cob); color: #fff; }
.gt4 .hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: clamp(600px, calc(100vh - var(--hdr)), 860px); }
.gt4 .hero__txt { align-self: center; padding: clamp(40px, 6vw, 100px) clamp(24px, 4vw, 70px) clamp(40px, 6vw, 100px) var(--pad4); }
.gt4 .hero__img { position: relative; overflow: hidden; }
.gt4 .hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.gt4 h1 { font-size: clamp(44px, 6.4vw, 110px); line-height: .95; text-transform: uppercase; color: #fff; font-weight: 300 !important; margin: 0 0 20px; }
.gt4 .k4 { color: rgba(255, 255, 255, .78); }
.gt4 .tag { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin: 0 0 22px; }
.gt4 p { color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.6; max-width: 46ch; }
.gt4 .go { display: inline-flex; gap: 14px; align-items: center; margin-top: 26px; padding: 18px 30px; background: var(--or); color: #fff; border: 0; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; font-family: var(--f4); }
.gt4 .go:hover { background: #ff7f26; }
.gt4 .q { display: none; padding: clamp(40px, 6vw, 90px) var(--pad4); min-height: clamp(560px, 80vh, 820px); }
.gt4 .q.on { display: block; }
.gt4 .q__bar { height: 6px; background: rgba(255, 255, 255, .2); margin: 10px 0 30px; }
.gt4 .q__bar i { display: block; height: 100%; background: var(--or); transition: width .5s; }
.gt4 .q__k { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.gt4 .q h2 { font-size: clamp(28px, 3.2vw, 52px); line-height: 1.15; color: #fff; font-weight: 300 !important; margin: 10px 0 34px; max-width: 26ch; }
.gt4 .ans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1100px; }
.gt4 .ans button { text-align: left; padding: 22px 24px; background: #fff; color: #0F1B3D; border: 0; font: 17px/1.45 var(--f4); cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.gt4 .ans button b { display: inline-block; width: 30px; font-weight: 700; }
.gt4 .ans button:hover { transform: translateY(-2px); }
.gt4 .ans button[aria-pressed="true"] { background: var(--or); color: #fff; }
.gt4 .nav { display: flex; gap: 14px; margin-top: 30px; }
.gt4 .nav button { padding: 14px 22px; background: transparent; color: #fff; border: 1px solid #fff; font: 12px var(--f4); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.gt4 .nav button:disabled { opacity: .35; cursor: default; }
.gt4 .res { display: none; padding: clamp(40px, 6vw, 90px) var(--pad4); }
.gt4 .res.on { display: block; }
.gt4 .res__card { max-width: 900px; padding: clamp(30px, 4vw, 60px); background: var(--rc, var(--or)); }
.gt4 .res__card h2 { font-size: clamp(34px, 4.4vw, 70px); line-height: 1; text-transform: uppercase; color: #fff; font-weight: 300 !important; margin: 10px 0 14px; }
.gt4 .res__q { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.gt4 .res__rc { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .5); }
.gt4 .hint { font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 30px; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .gt4 * { transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero4, .split4, .split4--r, .intro4, .code4, .code4:nth-of-type(even), .dm4, .duo4, .duo4--r, .final4, .ch4, .dp4, .ed4, .gt4 .hero { grid-template-columns: minmax(0, 1fr); }
  .hero4__art { min-height: 118vw; order: -1; }
  .hero4__codes a { font-size: 9px; letter-spacing: .12em; padding: 10px 2px; }
  .code4:nth-of-type(even) .code4__img, .duo4--r .ph4 { order: -1; }
  .code4__img, .dm4__img, .ph4, .ch4__img, .dp4__img { min-height: 110vw; }
  .ch4__img, .dp4__img { order: -1; }
  .gt4 .hero__img { min-height: 100vw; order: -1; }
  .gt4 .ans { grid-template-columns: minmax(0, 1fr); }
  .cards4 { grid-template-columns: minmax(0, 1fr); }
  .dims4 { grid-template-columns: minmax(0, 1fr); }
  .dims4 span { border-right: 0; border-bottom: 1px solid var(--navy); }
}

/* Bilder nicht strecken: Format behalten, beim Scrollen stehen bleiben (Fläche darunter = Code-Farbe) */
@media (min-width: 861px) {
  .code4__img, .dm4__img { min-height: 0; overflow: visible; }
  .code4__img img { position: sticky; top: var(--hdr, 76px); inset: auto; display: block; height: auto; aspect-ratio: 4 / 5; }
  .dm4__img img { position: sticky; top: var(--hdr, 76px); inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; }
  .code4:hover .code4__img img { transform: none; }
}
.gt4 .hero { background: transparent; padding: 0; }
.v4 .h1-4, .dp4 .h1-4 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.code4, .dm4, #codes, #ideas, #beyond, #negotiation, #rebel, #kontakt, #programme { scroll-margin-top: calc(var(--hdr, 76px) + 10px); }
.gt4 .hero .tag { color: #fff; }
@media (max-width: 600px) { .hero4__codes { display: none; } }
/* Editorial-Cover (Sylvias Bilder 449/451/458) */
.ed4--cov { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; }
.ed4__cov { display: block; width: 100%; max-width: 300px; height: auto; box-shadow: 0 18px 40px rgba(15, 27, 61, .14); }
@media (max-width: 860px) { .ed4__cov { max-width: 260px; } }

/* ---------- Rebel Collection: Rebel Challenge / Ego Check / Truth Dare (gleiches System wie Glitch Test) ---------- */
.ix4 .hero__img--cov { display: flex; align-items: center; justify-content: center; padding: clamp(30px, 5vw, 80px); }
.ix4 .hero__img--cov img { position: static; width: 100%; max-width: 440px; height: auto; object-fit: contain; box-shadow: 0 30px 60px rgba(0, 0, 0, .28); }
.ix4 .small { font-size: 13px !important; opacity: .8; margin-top: 18px; }
.ix4--rebel .go { color: #0F1B3D; } .ix4--rebel .go:hover { background: #fff07a; }
.ix4--rebel .ans button[aria-pressed="true"] { color: #0F1B3D; }
.ans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.rc__prog { background: rgba(255, 255, 255, .12); padding: 18px 22px; margin-bottom: 26px; max-width: 1100px; }
.rc__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 1100px; margin-bottom: 30px; }
.rc__days button { padding: 14px 6px; background: rgba(255, 255, 255, .14); color: #fff; border: 2px solid transparent; font: 12px var(--f4); letter-spacing: .14em; cursor: pointer; display: grid; gap: 4px; }
.rc__days button b { font-size: 24px; letter-spacing: 0; }
.rc__days button[aria-selected="true"] { border-color: #FFE500; background: rgba(255, 255, 255, .24); }
.rc__m, .rc__q { font-size: clamp(19px, 1.6vw, 24px) !important; max-width: 60ch !important; color: #fff !important; }
.rc__ex { background: rgba(255, 255, 255, .14); padding: 16px 22px; max-width: 900px; margin-top: 14px; }
.rc__ex p:last-child { font-style: italic; margin: 6px 0 0; }
.rc__note { display: grid; gap: 8px; max-width: 900px; margin-top: 26px; }
.rc__note textarea { font: 16px/1.5 var(--f4); padding: 14px; border: 0; color: #0F1B3D; }
.rc__done { margin-top: 18px; padding: 14px 22px; background: transparent; color: #fff; border: 1px solid #fff; font: 13px var(--f4); letter-spacing: .1em; cursor: pointer; }
.rc__done[aria-pressed="true"] { background: #FFE500; color: #0F1B3D; border-color: #FFE500; }
.rc__final { text-align: center; margin: 0 auto; }
.rc__final hr { border: 0; border-top: 1px solid #B3005F; margin: 18px 0; }
.rc__man { text-align: left; }
.eg__fun { font-size: clamp(20px, 2vw, 30px) !important; color: var(--or) !important; letter-spacing: .06em; text-transform: uppercase; margin-top: 26px; max-width: none !important; }
.eg__final { margin: 50px 0 10px; } .eg__final h2 { font-size: clamp(36px, 5vw, 80px); line-height: 1; color: var(--or); font-weight: 300 !important; margin: 0 0 16px; }
.td__dots { display: flex; gap: 8px; margin: 12px 0 26px; } .td__dots i { width: 34px; height: 6px; background: rgba(255, 255, 255, .3); } .td__dots i.on { background: #fff; } .td__dots i.cur { outline: 2px solid #F04438; }
.td__card { width: min(100%, 520px); aspect-ratio: 4 / 5; perspective: 1400px; cursor: pointer; margin-bottom: 26px; }
.td__in { position: relative; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.td__card.flip .td__in { transform: rotateY(180deg); }
.td__f, .td__b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.td__f { background: #065C44; border: 1px solid rgba(255, 255, 255, .25); box-shadow: inset 0 0 0 10px #087A5A, inset 0 0 0 11px #F04438; }
.td__b { background: #F4F0E9; transform: rotateY(180deg); justify-content: center; gap: 14px; }
.td__b .q__k { color: #087A5A !important; }
.td__nr { font-size: 120px; line-height: 1; color: #fff; font-weight: 300; }
.td__t { font-size: 22px; letter-spacing: .14em; color: #fff; }
.td__sub { color: #F04438 !important; font-size: 15px !important; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.td__q { color: #0F1B3D !important; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.25 !important; margin: 0; }
.td__step { border-top: 1px solid rgba(255, 255, 255, .4); padding-top: 14px; margin-top: 16px; max-width: 900px; }
.td__end { font-size: 22px !important; font-style: italic; margin-top: 20px; }
.td__final h2, .td__pick h2 { font-size: clamp(34px, 4.6vw, 74px); line-height: 1.02; color: #fff; font-weight: 300 !important; margin: 0 0 18px; }
.td__pick { margin: 50px 0; } .td__pick h2 { font-size: clamp(24px, 2.6vw, 38px); }
.td__pick textarea { width: 100%; max-width: 900px; font: 16px/1.5 var(--f4); padding: 14px; border: 0; color: #0F1B3D; }
.td__share { margin: 40px 0 0; border: 6px solid #F04438; }
.td__aodm { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .4); }
.td__aodm .go { text-decoration: none; }
@media (max-width: 860px) { .ans--3, .rc__days { grid-template-columns: minmax(0, 1fr) !important; } .rc__days { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .td__nr { font-size: 80px; } }
@media (prefers-reduced-motion: reduce) { .td__in { transition: none; } }

/* ================= V42 – Sylvias Mockups 1:1 (Bilder img/m, Schrift wie im Mockup) ================= */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda-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, U+2215; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
.mk4 { position: relative; background: #111; }
.mk4__fig { position: relative; container-type: inline-size; width: 100%; overflow: hidden; }
.mk4__fig > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk4__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk4__claim { position: absolute; left: 4.7%; top: 32.2%; margin: 0; color: #fff; font: 300 1.32cqw/2.2 var(--f4); letter-spacing: .42em; text-transform: uppercase; }
/* Startseiten-Hero 413 */
.mkh .mk4__fig { aspect-ratio: 1536 / 560; }
.mkh__btn { position: absolute; left: 4.95%; top: 86.3%; width: 16.1%; height: 7.7%; display: flex; align-items: center; justify-content: center; gap: .9cqw;
  border: 1px solid rgba(255, 255, 255, .85); color: #fff; font: 400 .72cqw var(--f4); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.mkh__btn b, .mkn__b1 b, .mkn__b2 b, .mkt__d b { font-weight: 300; font-size: 1.4em; }
.mkh__btn:hover { background: rgba(255, 255, 255, .12); }
.mkh__codes { position: absolute; left: 87.8%; top: 33.3%; display: grid; gap: 0; }
.mkh__codes a { color: #fff; font: 400 .74cqw/1.85 var(--f4); letter-spacing: .34em; text-decoration: none; }
.mkh__codes a:hover { color: #F4C430; }
.mkh__codes i { display: block; width: 2.3cqw; height: 1px; background: rgba(255, 255, 255, .6); margin-top: 1.1cqw; }
/* Startseite: Kopf transparent über dem Hero wie im Mockup */
body.home-mk main { padding-top: 0 !important; }
body.home-mk .hdr--sf2:not(.is-fixed) { background: transparent; box-shadow: none; }
body.home-mk .hdr--sf2:not(.is-fixed) .nav__a, body.home-mk .hdr--sf2:not(.is-fixed) .logo { color: #fff !important; }
body.home-mk .hdr--sf2:not(.is-fixed) .hdr__cta { color: #fff; border-color: rgba(255, 255, 255, .85); }
body.home-mk .hdr--sf2:not(.is-fixed) .menu-btn { filter: invert(1); }
/* 5 Code-Kacheln (413 unten) */
.mkts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: #E9E1D4; }
.mkt { position: relative; display: block; aspect-ratio: 305 / 458; overflow: hidden; color: #fff; text-decoration: none; }
.mkt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mkt:hover > img { transform: scale(1.04); }
.mkt__t { position: absolute; left: 9%; right: 6%; bottom: 8.5%; display: grid; gap: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.mkt__nr { font: 300 clamp(12px, 1.05vw, 16px) var(--f4); letter-spacing: .2em; margin-bottom: .5em; }
.mkt__h { font: 400 clamp(20px, 2.15vw, 34px)/1.05 'Bodoni Moda', 'Didot', serif; letter-spacing: -.01em; margin-bottom: .45em; }
.mkt__cl { font: 300 clamp(12px, 1.02vw, 15px)/1.4 var(--f4); }
.mkt__t i { display: block; width: 2.2em; height: 1px; background: rgba(255, 255, 255, .7); margin: 1.4em 0 1.1em; }
.mkt__d { font: 400 clamp(9px, .74vw, 11px) var(--f4); letter-spacing: .3em; text-transform: uppercase; }
/* Code-Text unter dem Mockup */
.mkc { background: var(--w); padding: clamp(40px, 5vw, 80px) 0; border-top: 6px solid var(--c); }
.mkc__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 90px); }
.mkc .code4__nr, .mkc .caps4 { color: var(--c); }
/* 431 Your next decision starts here */
.mkn__b1, .mkn__b2 { position: absolute; left: 4.81%; display: flex; align-items: center; justify-content: center; gap: 1cqw; font: 400 .98cqw var(--f4); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; }
.mkn__b1 { top: 76%; width: 24.75%; height: 7.55%; background: #F4C430; color: #0F1B3D; }
.mkn__b2 { top: 85.67%; width: 29.75%; height: 7.4%; border: 1px solid rgba(255, 255, 255, .9); color: #fff; }
.mkn__b1:hover { background: #ffd65a; } .mkn__b2:hover { background: rgba(255, 255, 255, .12); }
/* Handy: Bildschrift wäre zu klein → Bild ohne Überlagerungen, echter Text darunter */
@media (max-width: 860px) {
  .mk4__claim, .mkh__btn, .mkh__codes, .mkn__b1, .mkn__b2 { display: none; }
  .mk4__sr { position: static; width: auto; height: auto; clip: auto; white-space: normal; overflow: visible; padding: 34px var(--pad4) 44px; background: var(--c, #0F1B3D); color: #fff; }
  .mk4__sr p { color: #fff; font-size: 17px; line-height: 1.6; margin: 0 0 12px; }
  .mk4__sr .mk4__h { font: 400 clamp(34px, 10vw, 48px)/1.02 'Bodoni Moda', serif; color: #fff; margin: 6px 0 14px; }
  .mk4__sr .mk4__nr, .mk4__sr .mk4__k, .mk4__sr .mk4__cl { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
  .mkh .mk4__fig { aspect-ratio: 4 / 5; } .mkh .mk4__fig > img { object-position: 52% 50%; }
  .mk4:not(.mkh) .mk4__fig { aspect-ratio: 700 / 900; } .mk4:not(.mkh) .mk4__fig > img { object-position: 82% 50%; }
  #decision .mk4__fig { aspect-ratio: 1600 / 900; } #decision .mk4__fig > img { object-position: 50% 50%; }
  .mkts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkc__in { grid-template-columns: minmax(0, 1fr); }
  body.home-mk .hdr--sf2:not(.is-fixed) { background: rgba(15, 27, 61, .35); }
}
/* Feinschliff Mockup-Version */
body.sf2 .mkt__h, body.sf2 .mk4__sr .mk4__h { font-family: 'Bodoni Moda', 'Didot', serif !important; font-weight: 400 !important; }
.mkt__h { font-size: clamp(18px, 1.95vw, 31px) !important; letter-spacing: -.02em; white-space: nowrap; }
.mkt::after { content: ''; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .42)); pointer-events: none; }
.mkt__t { z-index: 1; }
body.home-mk .hdr--sf2:not(.is-fixed) .hdr__cta, body.home-mk .hdr--sf2:not(.is-fixed) .hdr__cta span { color: #fff !important; border-color: rgba(255, 255, 255, .85) !important; }
body.home-mk .hdr--sf2:not(.is-fixed) .menu-btn { filter: none; background: transparent; border-color: rgba(255, 255, 255, .7); }
body.home-mk .hdr--sf2:not(.is-fixed) .menu-btn i, body.home-mk .hdr--sf2:not(.is-fixed) .menu-btn i::before, body.home-mk .hdr--sf2:not(.is-fixed) .menu-btn i::after { background: #fff; }
body.sf2 .mkt__h { font-size: clamp(16px, 1.68vw, 27px) !important; }
.mkt::after { inset: 35% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .6)); }
@media (max-width: 860px) { body.sf2 .mkt__h { font-size: clamp(17px, 5vw, 24px) !important; } }
@media (max-width: 860px) {
  .mkh .mk4__fig { aspect-ratio: 4 / 5 !important; } .mkh .mk4__fig > img { object-position: 51% 50%; }
  .mk4:not(.mkh) .mk4__fig { aspect-ratio: 4 / 5 !important; } .mk4:not(.mkh) .mk4__fig > img { object-position: 37% 50%; }
  #decision .mk4__fig, .mkn .mk4__fig { aspect-ratio: 4 / 5 !important; } #decision .mk4__fig > img { object-position: 22% 30%; } .mkn .mk4__fig > img { object-position: 76% 50%; }
}
@media (max-width: 860px) {   /* Code-, Achieve- und About-Mockups: am Handy nur die Collage rechts (ohne Bildschrift) */
  .mk4:not(.mkh):not(.mkn):not(#decision) .mk4__fig { aspect-ratio: 650 / 900 !important; }
  .mk4:not(.mkh):not(.mkn):not(#decision) .mk4__fig > img { object-position: 100% 50%; }
  .mkn .mk4__fig > img { object-position: 82% 50%; }
}
@media (max-width: 860px) { .mkn .mk4__fig > img { object-position: 100% 50% !important; } }

/* ================= V44 Einstieg: Editorial-Porträt (Creative Direction + Design-DNA 408) ================= */
:root { --dna-w: #F7F2EA; --dna-navy: #1B2440; --dna-tq: #0E9F97; --dna-gold: #E3AE3E; --dna-rose: #E06C85; }
.eh4 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: calc(100vh - var(--hdr, 76px)); background: var(--dna-w); }
.eh4__txt { align-self: center; padding: clamp(40px, 6vh, 90px) clamp(24px, 4vw, 80px) clamp(40px, 6vh, 90px) var(--pad4); }
.eh4__k { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--dna-navy); margin: 0 0 30px; }
body.sf2 .eh4__h { font-family: 'Bodoni Moda', 'Didot', serif !important; font-weight: 400 !important; font-size: clamp(56px, 7.4vw, 128px); line-height: .96; letter-spacing: -.015em; text-transform: uppercase; color: var(--dna-navy); margin: 0 0 34px; }
.eh4__h span { color: var(--dna-rose); }
.eh4__q { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--dna-tq); margin: 0 0 14px; padding-top: 22px; border-top: 1px solid rgba(27, 36, 64, .18); max-width: 520px; }
.eh4__lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; color: var(--dna-navy); max-width: 520px; margin: 0 0 30px; }
.eh4__codes { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 40px; }
.eh4__codes a { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dna-navy); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid var(--c); }
.eh4__codes a span { color: var(--c); margin-right: 8px; }
.eh4__ph { position: relative; overflow: hidden; }
.eh4__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
@media (max-width: 860px) {
  .eh4 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .eh4__ph { order: -1; aspect-ratio: 4 / 5; }
  .eh4__ph img { object-position: 36% 22%; }
}
@media (max-width: 860px) { body.sf2 .eh4__h { font-size: 11.2vw; } .eh4__txt { padding: 34px var(--pad4) 44px; } }