/* Layout: Modemagazin – Masthead als Cover, versetzte Bildspalten, darunter ein ruhiger Textteil wie ein Heftinneres */
:root{
  --paper:#F6F5F2;      /* gestrichenes Magazinpapier, ganz leicht warm */
  --ink:#0E0E0D;
  --grey:#6E6C68;
  --accent:#8E1B2E; /* Rubinrot als Hervorhebung */
  --rule:#D9D6D0;
  --night:#0E0E0D;
  --night-fg:#EDEBE6;
  --display:"Fraunces", "Ogg", Georgia, serif;
  --dvs:"opsz" 40, "SOFT" 60, "WONK" 0; /* kräftige Haarstriche, weiche Formen, Platzhalter für Ogg */
  --sans:"Lato", "Helvetica Neue", Arial, sans-serif;
  --mast:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; /* nur der Namensschriftzug */
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.65; letter-spacing:.01em; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
p{margin:0}
h1,h2,h3{margin:0; font-weight:300}
.pad{padding-left:var(--gut); padding-right:var(--gut-r)}
.label{font:400 11px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase}
.muted{color:var(--grey)}
i, em{font-style:normal; color:var(--accent)}
.menu, .quote-tile, .ask{--accent:#D0566B}
.cover{--accent:var(--ink)} /* im Cover keine roten Akzente */
img{display:block; width:100%; height:100%; object-fit:cover}
figure{margin:0}
main{overflow-x:clip} /* überstehendes R erzeugt keinen seitlichen Scroll */

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }

/* ---------- Kopfleiste ---------- */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--paper); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:16px}
.bar button, .bar a{background:none; border:0; padding:6px 0; cursor:pointer; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.bar .mini{font-family:var(--mast); font-weight:400; font-size:18px; letter-spacing:.32em; text-transform:uppercase; transition:opacity .3s}
.bar button{justify-self:start; text-align:left}
.bar .r{justify-self:end; display:flex; align-items:center; gap:clamp(14px, 2vw, 24px)}
.bar .lang-switch{display:inline-flex; padding:6px 0; line-height:0}
.bar .lang-switch svg{display:block; width:22px; height:14px; box-shadow:0 0 0 1px var(--rule); transition:opacity .3s}
.bar .lang-switch:hover svg{opacity:.75}

/* ---------- Menü-Overlay ---------- */
.menu{position:fixed; inset:0; z-index:40; background:var(--night); color:var(--night-fg); display:grid; grid-template-rows:auto 1fr auto; padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.menu[hidden]{display:none}
.menu:not([hidden]){animation:menuIn 1s cubic-bezier(.16,1,.3,1) both}
.menu.closing{animation:menuOut .7s cubic-bezier(.7,0,.84,0) both}
.menu:not([hidden]) nav a{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both}
.menu nav a:nth-child(1){animation-delay:.3s} .menu nav a:nth-child(2){animation-delay:.36s} .menu nav a:nth-child(3){animation-delay:.42s}
.menu nav a:nth-child(4){animation-delay:.48s} .menu nav a:nth-child(5){animation-delay:.54s} .menu nav a:nth-child(6){animation-delay:.6s}
@keyframes menuIn{from{transform:translateY(-100%)} to{transform:none}}
@keyframes menuOut{from{transform:none} to{transform:translateY(-100%)}}
.menu .top{display:flex; justify-content:space-between}
.menu button{background:none; border:0; color:inherit; cursor:pointer; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:6px 0}
.menu nav{align-self:center; display:grid; gap:6px}
.menu nav a{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:200; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:clamp(40px, 7vw, 88px); line-height:1.05; text-decoration:none}
.menu nav a:hover{color:var(--accent)}
.menu .foot{display:flex; flex-wrap:wrap; gap:12px 32px; color:#9C9A95}

/* ---------- Cover ---------- */
.cover{position:relative; padding-top:clamp(8px, 2vw, 24px)}
.mast-sub{position:absolute; z-index:3; right:var(--gut-r); top:calc(clamp(8px, 2vw, 24px) + clamp(64px, 19.4vw, 330px) * .8 + clamp(10px, 1.6vw, 26px)); margin:0; font-family:var(--mast); font-weight:400; font-size:clamp(20px, 3vw, 52px); line-height:1; letter-spacing:.06em; text-transform:uppercase; margin-right:-.06em; animation:up 1.1s .32s cubic-bezier(.2,.7,.1,1) both}
.mast{font-family:var(--mast); font-weight:400; font-size:clamp(64px, 19.4vw, 330px); line-height:.8; letter-spacing:-.01em; text-align:center; white-space:nowrap; margin:0; position:relative; z-index:1}
.mast span{display:inline-block; animation:up 1.1s cubic-bezier(.2,.7,.1,1) both}
.mast span:nth-child(2){animation-delay:.04s} .mast span:nth-child(3){animation-delay:.08s} .mast span:nth-child(4){animation-delay:.12s}
.mast span:nth-child(5){animation-delay:.16s} .mast span:nth-child(6){animation-delay:.2s} .mast span:nth-child(7){animation-delay:.24s} .mast span:nth-child(8){animation-delay:.28s}
@keyframes up{from{transform:translateY(.12em); opacity:.25} to{transform:none; opacity:1}}

.cover-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:end; margin-top:calc(clamp(64px, 19.4vw, 330px) * -0.3)}
.cover-img{position:relative; z-index:2; aspect-ratio:3/4; max-width:100%; overflow:hidden; background:var(--rule)}
.cover-img{animation:unveil 1.7s cubic-bezier(.16,1,.3,1) .35s both}
.cover-img img{animation:settle 2.4s cubic-bezier(.16,1,.3,1) .35s backwards; transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.cover-zoom{display:block; height:100%; cursor:zoom-in}
.cover-zoom:hover img{transform:scale(1.06)}
@keyframes unveil{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.25)} to{transform:none}}
/* Titelzeilen fliegen von außen herein und bremsen weich ab */
.cover .lines .l{animation:fromLeft 1.6s cubic-bezier(.16,1,.3,1) both}
.cover .lines.right .l{animation-name:fromRight}
.cover .lines .l:nth-child(1){animation-delay:1s} .cover .lines .l:nth-child(2){animation-delay:1.18s}
.cover .lines.right .l:nth-child(1){animation-delay:1.09s} .cover .lines.right .l:nth-child(2){animation-delay:1.27s}
.cover-foot{animation:fadeUp 1.2s cubic-bezier(.16,1,.3,1) 1.5s both}
@keyframes fromLeft{from{opacity:0; transform:translateX(-90px)} to{opacity:1; transform:none}}
@keyframes fromRight{from{opacity:0; transform:translateX(90px)} to{opacity:1; transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.lines{display:grid; gap:28px; padding-bottom:8px}
.lines .l{display:grid; gap:6px}
.lines .l b{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(22px, 2.2vw, 32px); line-height:1.1}
.lines.right{text-align:right}
.cover-foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; border-top:1px solid var(--ink); margin-top:28px; padding-top:14px}
.cover-foot h1{font:400 11px/1.5 var(--sans); letter-spacing:.18em; text-transform:uppercase}
@media (max-width: 860px){
  .cover-body{grid-template-columns:1fr; margin-top:-6vw}
  .cover-img{order:-1}
  .lines, .lines.right{text-align:left; grid-template-columns:1fr 1fr; gap:20px}
}

/* ---------- Bildspalten ---------- */
.works{padding-block:clamp(80px, 12vw, 180px) 0}
.cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 2.2vw, 36px); align-items:start}
.col{display:grid; gap:clamp(12px, 2.2vw, 36px)}
.col:nth-child(2){margin-top:clamp(60px, 14vw, 220px)}
.col:nth-child(3){margin-top:clamp(24px, 5vw, 80px)}
.work{display:grid; gap:10px; text-decoration:none}
.work .frame{overflow:hidden; background:var(--rule)}
.work .frame img{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.work:hover .frame img{transform:scale(1.035)}
.r23{aspect-ratio:2/3} .r45{aspect-ratio:4/5} .r34{aspect-ratio:3/4}
.quote-tile{background:var(--night); color:var(--night-fg); aspect-ratio:4/5; display:grid; align-content:space-between; padding:clamp(20px,2.4vw,36px)}
.quote-tile p{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(28px, 3.4vw, 54px); line-height:1.05}
.quote-tile .label{color:#9C9A95}
@media (max-width: 760px){
  .cols{grid-template-columns:repeat(2, minmax(0,1fr))}
  .col:nth-child(3){display:contents}
  .col:nth-child(2){margin-top:60px}
}

/* ---------- Index der Reportagen ---------- */
.index{padding-block:clamp(90px, 13vw, 190px) 0}
.index-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px, 5vw, 80px)}
.index h2{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(34px, 5vw, 72px); line-height:1}
.rows{border-top:1px solid var(--ink)}
.row{display:grid; grid-template-columns:clamp(72px, 9vw, 120px) minmax(0,1fr) auto auto; gap:20px; align-items:center; padding-block:20px; border-bottom:1px solid var(--rule); text-decoration:none}
.row h3{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(21px, 2.2vw, 32px); line-height:1.15; transition:transform .4s}
.row:hover h3{color:var(--accent); transform:translateX(8px)}
.row .where{text-align:right}
.row .thumb{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; filter:grayscale(1); transition:filter .4s}
.row:hover .thumb{filter:none}
.btn-line{display:inline-flex; align-items:center; gap:14px; margin-top:28px; padding:16px 26px; border:1px solid var(--ink); font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:background .3s, color .3s}
.btn-line:hover{background:var(--ink); color:var(--paper)}
@media (max-width: 860px){
  .index-grid{grid-template-columns:1fr}
  .row{grid-template-columns:88px minmax(0,1fr) auto; gap:4px 16px}
  .row .thumb{grid-row:1 / span 2}
  .row .where{grid-column:2; grid-row:2; text-align:left}
  .row > .label:last-child{grid-column:3; grid-row:1 / span 2}
}

/* ---------- Heftinneres (Text) ---------- */
.feature{padding-block:clamp(90px, 13vw, 190px)}
.feature-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px, 6vw, 110px); align-items:start}
.feature .big{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(32px, 4vw, 58px); line-height:1.08; text-wrap:balance}
.cols-text{columns:2 300px; column-gap:40px; font-size:16px}
.cols-text p{margin-bottom:1em; break-inside:avoid}
.cols-text h3{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:400; font-size:1.35em; line-height:1.2; margin:1.4em 0 .5em; break-after:avoid; break-inside:avoid}
.cols-text h3:first-child{margin-top:0}
.cols-text p:first-of-type::first-letter{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; float:left; font-size:4.2em; line-height:.82; padding:6px 10px 0 0}
.portrait{display:grid; grid-template-columns:1fr; gap:clamp(16px,3vw,40px); margin-top:clamp(40px,6vw,80px)}
.portrait .frame{aspect-ratio:3/2; overflow:hidden; background:var(--rule)}
.portrait .frame.face img{object-position:50% 40%}
.portrait .facts{grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(20px,3vw,40px)}
.facts{display:grid; gap:18px; align-content:end}
.facts div{border-top:1px solid var(--rule); padding-top:12px; display:grid; gap:2px}
.facts dd{margin:0; font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:22px; line-height:1.2}
.facts dt{order:-1}
@media (max-width: 860px){ .feature-grid{grid-template-columns:1fr} }

/* ---------- Orte ---------- */
.places{border-block:1px solid var(--ink); padding-block:clamp(40px,6vw,72px)}
.places p{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(26px, 3.6vw, 52px); line-height:1.2; text-wrap:balance}
.places a{text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 92%; transition:background-size .4s}
.places a:hover{background-size:100% 1px}
.places .sep{color:#8C8880} /* hell, aber mit 3:1 Kontrast für große Schrift */

/* ---------- Leistungen ---------- */
.offer{padding-block:clamp(90px, 13vw, 190px) 0}
/* Pakete als Karten: Papiertöne werden von Paket zu Paket etwas wärmer, das beliebteste Paket steht dunkel */
.tiers{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); margin-top:clamp(40px,5vw,72px); align-items:stretch}
.tier{position:relative; padding:clamp(24px,2.4vw,36px) clamp(20px,2vw,30px) clamp(28px,2.6vw,40px); display:grid; gap:14px; align-content:start; min-width:0; background:var(--t-bg, #EFEDE8)}
.tier:nth-child(1){--t-bg:#EFEDE8} .tier:nth-child(2){--t-bg:#E8E4DD} .tier:nth-child(4){--t-bg:#E1DCD3}
.tier.featured{--t-bg:var(--night); --accent:#D0566B; color:var(--night-fg); margin-top:-14px; padding-top:clamp(40px,3.4vw,52px)}
.tier.featured .label.muted, .tier.featured p{color:#B9B6B0}
.tier .badge{position:absolute; top:0; left:clamp(20px,2vw,30px); transform:translateY(-50%); background:#8E1B2E; color:#F6F5F2; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:9px 12px}
.tier h3{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(26px,2.6vw,38px); line-height:1.05}
.tier .price{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; color:var(--accent); font-size:22px}
.tier p{color:var(--grey); font-size:15px; max-width:38ch}
.incl{display:flex; gap:12px 28px; align-items:baseline; flex-wrap:wrap; padding-block:20px; border-block:1px solid var(--rule)}
.addon{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:clamp(16px,4vw,64px); margin-top:clamp(28px,4vw,48px); background:#EBEBEB; padding:clamp(20px,3vw,40px) clamp(20px,5vw,80px) clamp(20px,3vw,40px) clamp(12px,3vw,40px)}
.addon-img img{width:100%; height:auto; max-height:640px; object-fit:contain; mix-blend-mode:multiply}
.addon-text{display:grid; gap:12px; justify-items:start}
.addon h3{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(26px,2.6vw,38px); line-height:1.05; margin-top:10px}
.addon p{color:#55534F; font-size:15px; max-width:52ch}
.addon .price{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; color:var(--accent); font-size:22px}
@media (max-width: 860px){
  .tiers{grid-template-columns:1fr}
  .tiers{gap:14px}
  .tier.featured{margin-top:12px}
  .addon{grid-template-columns:1fr; padding:20px 20px 24px}
  .addon-img img{max-height:460px}
}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(90px, 13vw, 190px)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--ink)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding-block:20px; font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(19px,1.8vw,26px); line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--sans); font-size:20px; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{overflow:hidden; padding-bottom:24px; color:var(--grey); max-width:64ch}

/* ---------- Anfrage ---------- */
.ask{background:var(--night); color:var(--night-fg); padding-block:clamp(90px, 13vw, 190px) 40px}
.ask .mast{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; color:var(--night-fg); font-size:clamp(48px, 12vw, 200px); text-align:left; white-space:normal; line-height:.9}
.ask-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px, 6vw, 110px); margin-top:clamp(40px,6vw,80px)}
.ask .muted{color:#9C9A95}
.ask .contact{display:grid; gap:16px; align-content:start}
.ask .contact div{display:grid; gap:4px}
.ask .contact div > :last-child{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:22px}
form.f{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
form.f .full{grid-column:1/-1}
form.f label{display:grid; gap:8px; font:400 11px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#9C9A95}
form.f input, form.f select, form.f textarea{font:400 17px/1.4 var(--sans); color:var(--night-fg); background:transparent; border:0; border-bottom:1px solid #45443F; border-radius:0; padding:10px 0; width:100%; color-scheme:dark}
form.f select option{color:#0E0E0D}
form.f textarea{min-height:100px; resize:vertical}
form.f input:focus, form.f select:focus, form.f textarea:focus{outline:none; border-bottom-color:var(--night-fg)}
form.f button{justify-self:start; background:var(--night-fg); color:var(--night); border:1px solid var(--night-fg); padding:16px 28px; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:background .3s, color .3s}
form.f button:hover{background:transparent; color:var(--night-fg)}
.ask footer{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:clamp(70px,10vw,140px); padding-top:18px; border-top:1px solid #2C2B28; color:#9C9A95}
.ask footer a{text-decoration:none}
.ask footer nav{display:flex; gap:22px; flex-wrap:wrap}
@media (max-width: 860px){ .ask-grid{grid-template-columns:1fr} }
@media (max-width: 520px){ form.f{grid-template-columns:1fr} }

/* Lightbox */
.work{cursor:zoom-in}
.lb{border:0; padding:0; margin:0; width:100vw; height:100vh; max-width:none; max-height:none; background:rgba(14,14,13,.96); color:var(--night-fg)}
.lb::backdrop{background:rgba(14,14,13,.96)}
.lb[open]{display:grid; grid-template-rows:auto minmax(0,1fr) auto}
.lb .lb-top, .lb .lb-nav{display:flex; justify-content:space-between; align-items:center; padding:16px var(--gut-r) 16px var(--gut)}
.lb button{background:none; border:0; color:inherit; cursor:pointer; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:10px 0}
.lb img{width:auto; height:auto; max-width:calc(100vw - 32px); max-height:100%; margin:auto; object-fit:contain}
/* ---------- Scroll-Animationen ---------- */
.js-rv :is(.works .work, .works .quote-tile, .index h2, .index .row, .index .btn-line, .feature .big, .cols-text p, .portrait, .places p, .offer h2, .tier, .incl, .addon, .faq h2, .faq details, .faq .btn-line, .ask .mast, .ask-grid > *){opacity:0; transform:translateY(32px); transition:opacity 1.1s cubic-bezier(.2,.7,.1,1), transform 1.2s cubic-bezier(.2,.7,.1,1); transition-delay:var(--d, 0s)}
.js-rv .in{opacity:1 !important; transform:none !important}
.js-rv .works .work .frame img{transform:scale(1.08); transition:transform 1.8s cubic-bezier(.2,.7,.1,1); transition-delay:var(--d, 0s)}
.js-rv .works .work.in .frame img{transform:none}
.js-rv .works .work.in:hover .frame img{transform:scale(1.035)}
.js-rv .index .row .thumb{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.2,.7,.1,1), filter .4s; transition-delay:calc(var(--d, 0s) + .15s)}
.js-rv .index .row.in .thumb{clip-path:inset(0 0 0 0)}
.js-rv .portrait .frame img{transform:scale(1.1); transition:transform 2s cubic-bezier(.2,.7,.1,1)}
.js-rv .portrait.in .frame img{transform:none}
.cols .col{will-change:transform}

/* ---------- WordPress-Grundlagen ---------- */
body{margin:0}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skip-link:focus{position:fixed; left:12px; top:12px; z-index:100; width:auto; height:auto; clip:auto; background:var(--ink); color:var(--paper); padding:12px 16px; font:400 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
.bar .mini{display:flex; align-items:baseline; gap:.6em; text-decoration:none; opacity:1}
.bar .mini small{font-size:10px; letter-spacing:.3em}
.home .bar .mini{opacity:0}
.home .bar.scrolled .mini{opacity:1}
@media (max-width: 560px){ .bar .mini{font-size:15px; letter-spacing:.22em} .bar .mini small{display:none} }

/* ---------- Seitenkopf für Unterseiten ---------- */
.page-head{padding-block:clamp(48px, 8vw, 120px) clamp(28px, 4vw, 56px); border-bottom:1px solid var(--ink)}
.page-head h1{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(40px, 6.4vw, 104px); line-height:.98; margin-top:16px; text-wrap:balance; max-width:18ch}
.page-head .lead{margin-top:22px; max-width:60ch; color:var(--grey)}
.breadcrumb{display:flex; flex-wrap:wrap; gap:6px 10px}
.breadcrumb a{text-decoration:none}

/* ---------- Fließtext aus dem Editor ---------- */
.prose{padding-block:clamp(40px, 6vw, 88px); max-width:1100px}
.prose > *{max-width:68ch}
.prose > * + *{margin-top:1.1em}
.prose h2, .prose h3, .prose h4, .prose h5{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; line-height:1.15; margin-top:1.6em; max-width:30ch}
.prose h2{font-size:clamp(28px, 3vw, 44px)}
.prose h3, .prose h4, .prose h5{font-size:clamp(22px, 2.2vw, 30px)}
.prose a{text-decoration-thickness:1px; text-underline-offset:3px}
.prose img{height:auto; width:auto; max-width:100%}
.prose figure, .prose .wp-block-image, .prose .wp-block-gallery, .prose p:has(> img){max-width:none}
.prose ul, .prose ol{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose .aligncenter{margin-inline:auto}
.prose video{width:100%; height:auto; display:block; background:var(--night)}
/* Avoc-Spalten aus alten Inhalten */
.prose .cs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px, 4vw, 64px); max-width:none}
.prose .cs > .c-one-full{grid-column:1 / -1}
.prose .c > * + *{margin-top:1em}
.prose .c [style*="text-align: right"]{text-align:left !important}
.prose .sp-mini{height:12px} .prose .sp-small{height:28px} .prose .sp-medium{height:56px} .prose .sp-big{height:96px}
@media (max-width: 760px){ .prose .cs{grid-template-columns:1fr} }
/* Galerie-Raster für alte Galerien */
.bw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:clamp(8px, 1.2vw, 16px); max-width:none !important}
.bw-grid a{display:block; aspect-ratio:2/3; overflow:hidden; background:var(--rule)}
.bw-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.bw-grid a:hover img{transform:scale(1.04)}

/* ---------- Übersicht aller Reportagen ---------- */
.archive{padding-block:clamp(40px, 6vw, 88px) clamp(90px, 12vw, 160px)}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 4vw, 56px) clamp(16px, 2.4vw, 36px)}
.card{display:grid; gap:14px; text-decoration:none; align-content:start}
.card .frame{aspect-ratio:3/2; overflow:hidden; background:var(--rule)}
.card .frame img{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.card:hover .frame img{transform:scale(1.04)}
.card h2{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(21px, 1.9vw, 28px); line-height:1.15; transition:color .3s}
.card:hover h2{color:var(--accent)}
@media (max-width: 960px){ .cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .cards{grid-template-columns:1fr} }
.js-rv :is(.card, .prose > *, .page-head h1){opacity:0; transform:translateY(32px); transition:opacity 1.1s cubic-bezier(.2,.7,.1,1), transform 1.2s cubic-bezier(.2,.7,.1,1); transition-delay:var(--d, 0s)}

/* ---------- Kontaktformular (Contact Form 7) im Anfragebereich ---------- */
.ask .wpcf7 form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.ask .wpcf7 form > p{margin:0}
.ask .wpcf7 form > p:has(textarea), .ask .wpcf7 form > p:has([type=submit]), .ask .wpcf7-response-output, .ask .wpcf7 .hidden-fields-container{grid-column:1 / -1}
.ask .wpcf7 label{display:grid; gap:8px; font:400 11px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#9C9A95}
.ask .wpcf7 label br{display:none}
.ask .wpcf7 input:not([type=submit]):not([type=hidden]), .ask .wpcf7 textarea, .ask .wpcf7 select{font:400 17px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--night-fg); background:transparent; border:0; border-bottom:1px solid #45443F; border-radius:0; padding:10px 0; width:100%; color-scheme:dark}
.ask .wpcf7 textarea{min-height:110px; height:140px; resize:vertical}
.ask .wpcf7 input:focus, .ask .wpcf7 textarea:focus{outline:none; border-bottom-color:var(--night-fg)}
.ask .wpcf7 [type=submit]{background:var(--night-fg); color:var(--night); border:1px solid var(--night-fg); padding:16px 28px; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:background .3s, color .3s; border-radius:0}
.ask .wpcf7 [type=submit]:hover{background:transparent; color:var(--night-fg)}
.ask .wpcf7-response-output{margin:0 !important; font-size:14px; color:#C9C5BC; border-color:#45443F !important}
.ask .wpcf7-not-valid-tip{font-size:13px; color:#E8A0AC; text-transform:none; letter-spacing:0}
@media (max-width: 520px){ .ask .wpcf7 form{grid-template-columns:1fr} }
.ask .contact a{text-decoration:none}

/* ---------- Reportage: waagerechte Bildstrecke ---------- */
:root{--barh:56px}
.hs{position:relative}
.hs-sticky{position:sticky; top:calc(var(--barh) + env(safe-area-inset-top,0px)); height:calc(100svh - var(--barh) - env(safe-area-inset-top,0px)); overflow:hidden}
.track{display:flex; height:100%; gap:clamp(24px, 4vw, 72px); will-change:transform}
.panel{flex:none; height:100%}
.intro{width:100vw; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.intro-text{display:grid; align-content:center; gap:22px; padding:clamp(24px,4vw,64px) clamp(24px,4vw,64px) clamp(24px,4vw,64px) var(--gut)}
.intro h1{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(32px, 3.6vw, 64px); line-height:1.04; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:break-word; hyphens:auto; max-width:100%}
.intro p{font-size:16px; max-width:44ch}
.hint{display:flex; align-items:center; gap:12px}
.hint::after{content:""; width:48px; height:1px; background:currentColor; animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.intro-img{overflow:hidden; background:var(--rule)}
.intro-img img{animation:settle 2.4s cubic-bezier(.16,1,.3,1) backwards}
.shot{display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; padding-block:clamp(16px,2.4vw,36px)}
.shot a{display:block; height:100%; cursor:zoom-in}
.shot img{width:auto; height:100%; max-width:none}
.next{width:min(560px, 90vw); display:grid; align-content:center; gap:14px; padding-right:var(--gut-r); text-decoration:none}
.next .serif{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(34px, 3.6vw, 60px); line-height:1.02}
.next .go{display:inline-flex; gap:12px; align-items:center; border-bottom:1px solid currentColor; padding-bottom:6px; justify-self:start}
.next:hover .serif{color:var(--accent)}
.progress{position:absolute; left:var(--gut); right:var(--gut-r); bottom:14px; display:flex; align-items:center; gap:16px; pointer-events:none}
.progress .line{flex:1; height:1px; background:var(--rule); position:relative; overflow:hidden}
.progress .line span{position:absolute; inset:0; background:var(--ink); transform-origin:left; transform:scaleX(0)}
.story{padding-block:clamp(90px, 12vw, 180px)}
.story-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px, 6vw, 110px)}
.story h2{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(34px, 4.4vw, 68px); line-height:1.04; text-wrap:balance}
.story .cols-text{margin-top:0}
@media (max-width: 860px){
  .hs{height:auto!important}
  .hs-sticky{position:static; height:auto; overflow:visible}
  .track{display:grid; gap:clamp(24px,6vw,40px); transform:none!important; height:auto}
  .panel{height:auto}
  .intro{width:auto; grid-template-columns:1fr}
  .intro-text{padding:28px var(--gut-r) 8px var(--gut)}
  .intro-img{aspect-ratio:4/3}
  .hint{display:none}
  .shot{padding:0 var(--gut-r) 0 var(--gut)}
  .shot img{width:100%; height:auto}
  .next{width:auto; padding:24px var(--gut-r) 0 var(--gut)}
  .progress{display:none}
  .story-grid{grid-template-columns:1fr}
}

/* ---------- 404 ---------- */
.notfound{padding-block:clamp(80px, 14vw, 200px); display:grid; gap:24px; justify-items:start}
.notfound h1{font-family:var(--display); font-variation-settings:var(--dvs); font-weight:300; font-size:clamp(44px, 8vw, 120px); line-height:.95}
.prose .row h3{margin:0; max-width:none}
.prose .index .rows{margin-top:8px}

/* ---------- Kontaktformular auf hellem Grund (Kontaktseite) ---------- */
.prose .wpcf7 form{display:grid; gap:20px; max-width:560px}
.prose .wpcf7 form > p{margin:0}
.prose .wpcf7 label{display:grid; gap:8px; font:400 11px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}
.prose .wpcf7 label br{display:none}
.prose .wpcf7 input:not([type=submit]):not([type=hidden]), .prose .wpcf7 textarea{font:400 17px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink); border-radius:0; padding:10px 0; width:100%}
.prose .wpcf7 textarea{height:140px; resize:vertical}
.prose .wpcf7 input:focus, .prose .wpcf7 textarea:focus{outline:none; border-bottom-width:2px}
.prose .wpcf7 [type=submit]{background:var(--ink); color:var(--paper); border:1px solid var(--ink); padding:16px 28px; font:400 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; border-radius:0; transition:background .3s, color .3s}
.prose .wpcf7 [type=submit]:hover{background:transparent; color:var(--ink)}
.prose img.wp-image-4961{border-radius:50%}

/* ---------- FAQ-Seite ---------- */
.faq-list{max-width:960px}
.faq .faq-a{overflow:hidden; padding-bottom:24px; color:var(--grey); max-width:64ch}
.faq .faq-a p{margin:0}
.faq .faq-a p + p{margin-top:.8em}
.faq .faq-a a{color:var(--ink); text-underline-offset:3px}