@import url('assets/fonts.css');

/* ============================================================
   followear · Version 3 "Atelier"
   Quiet luxury. Cinematic photography, oversized uppercase
   grotesque set against an ultralight serif, earth tones, and
   a lot of stillness between the lines.
   ============================================================ */

:root{
  --black:#0a0a0a;
  --ink:#141311;
  --cream:#ece4da;
  --paper:#f3efe8;
  --stone:#c9c1b4;
  --stone-2:#8d857a;
  --terracotta:#9b4a35;
  --terracotta-hi:#8a4130;

  --sans:'Geist',ui-sans-serif,system-ui,sans-serif;
  --serif:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;

  --edge:clamp(18px,3.2vw,54px);
  --sec:clamp(84px,11vw,190px);
  --t:220ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px}
.dark :focus-visible,.hero :focus-visible,.foot :focus-visible{outline-color:var(--cream)}
::selection{background:var(--ink);color:var(--cream)}
/* Die Wortmarke wird nie in Versalien gesetzt, auch nicht per text-transform. */
.wm{text-transform:none!important}

/* ---------- type ---------- */
.hd{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  font-size:clamp(2.2rem, 0.6rem + 6.6vw, 6.4rem);line-height:.96;letter-spacing:-.035em;
}
.hd--sm{font-size:clamp(1.7rem, 0.9rem + 3.1vw, 3.6rem);line-height:1;letter-spacing:-.03em}
/* Für Überschriften mit einem sehr langen Wort. Bei voller Displaygröße
   wäre es breiter als die Textspalte und würde von der Zeilenmaske
   abgeschnitten. */
.hd--fit{font-size:clamp(2rem, 0.5rem + 5.4vw, 5.3rem)}
.serif{font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.01em}
/* In Überschriften bleibt das Akzentwort in Geist und in Versalien, nur kursiv. */
.hd .serif-i{font-family:var(--sans);font-weight:500;font-style:italic;text-transform:uppercase;letter-spacing:-.03em}
.serif-i{font-family:var(--serif);font-weight:300;font-style:italic;text-transform:none;letter-spacing:-.005em}
.quote{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem, 0.8rem + 3.4vw, 4rem);line-height:1.12;letter-spacing:-.015em}
.lead{font-size:clamp(1rem, .95rem + .35vw, 1.2rem);line-height:1.62}
.body{font-size:1rem;line-height:1.68}
.small{font-size:.875rem;line-height:1.62}
.eyebrow{font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.dim{opacity:.62}
.meas{max-width:44ch}
.meas-w{max-width:58ch}

/* ---------- layout ---------- */
.band{padding-inline:var(--edge)}
.sec{padding-block:var(--sec)}
.sec-s{padding-block:clamp(48px,6vw,96px)}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px)}
.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-12{grid-column:1/-1}
.c6-13{grid-column:6/-1}.c7-13{grid-column:7/-1}.c8-13{grid-column:8/-1}
@media (max-width:900px){.c1-5,.c1-6,.c1-7,.c6-13,.c7-13,.c8-13{grid-column:1/-1}}
.dark{background:var(--black);color:var(--cream)}
.cream{background:var(--cream);color:var(--ink)}
.line{height:1px;background:currentColor;opacity:.22;border:0;margin:0}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:0 var(--edge);background:linear-gradient(to bottom,rgb(10 10 10 / .8),rgb(10 10 10 / .35) 62%,rgb(10 10 10 / 0));transition:background var(--t)}
.nav__in{display:flex;align-items:center;min-height:74px;gap:24px;color:var(--cream);transition:color var(--t)}
.nav--solid{background:var(--black)}
.nav.is-open{background:var(--black)}
/* Der Logo-Link ist nur so hoch wie das Logo. Für den Daumen zu wenig,
   deshalb bekommt er die volle Antippfläche, ohne optisch zu wachsen. */
.nav__in>a:first-child{display:inline-flex;align-items:center;min-height:44px}
.nav__logo{height:16px;width:auto}
.nav__logo--mark{display:none;height:19px}
@media (max-width:820px){
  .nav__logo--full{display:none}
  .nav__logo--mark{display:block}
}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;opacity:.7;transition:opacity var(--t)}
.nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1}
.nav__links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav__burger{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;color:inherit;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:820px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  .nav.is-open{background:var(--black)}
  .nav.is-open .nav__links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:74px;background:var(--black);padding:8px var(--edge) 26px;gap:0}
  .nav.is-open .nav__links a{min-height:52px}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--edge);top:10px;z-index:99;background:var(--cream);color:var(--ink);padding:14px 20px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--black);color:var(--cream);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;opacity:.55}
.hero__grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(10 10 10 / .72) 0%,rgb(10 10 10 / .22) 34%,rgb(10 10 10 / .8) 100%)}
.hero__in{position:relative;padding:0 var(--edge) clamp(74px,8vw,112px)}
.hero__lines{display:block}
.hero__foot{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end;margin-top:clamp(28px,4vw,52px)}

/* ---------- Scroll-Hinweis ---------- */
.cue{position:absolute;left:50%;bottom:clamp(14px,1.8vw,22px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cream);opacity:.6}
.cue span{font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.cue i{display:block;width:1px;height:36px;background:currentColor;position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--cream);animation:cue 2.4s cubic-bezier(.76,0,.24,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
@media (max-width:820px){.cue{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 30px;
  background:var(--terracotta);color:#f6efe9;border:0;cursor:pointer;
  font:500 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t);
}
.btn:hover{background:var(--terracotta-hi)}
.btn svg{flex:none;transition:transform var(--t)}
.btn:hover svg{transform:translateX(4px)}
.btn--out{background:transparent;color:inherit;border:1px solid currentColor}
/* Die Wortmarke steht nie in Versalien, also auch nicht in einer Mailadresse. */
.btn--mail{text-transform:none;letter-spacing:0;font-size:.9375rem}
.btn--out:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ln{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
.ln--mail{text-transform:none;letter-spacing:0;font-size:.875rem}
.ln svg{transition:transform var(--t)}
.ln:hover svg{transform:translateX(4px)}

/* ---------- marquee ---------- */
.mq{overflow:hidden;padding:clamp(10px,1.4vw,20px) 0;border-block:1px solid rgb(20 19 17 / .18)}
.mq:hover .mq__in{animation-play-state:paused}
.mq--inv{border-color:rgb(236 228 218 / .2)}
.mq__in{display:flex;gap:clamp(30px,5vw,90px);width:max-content;animation:mq 30s linear infinite}
.mq__in>span{font-family:var(--sans);font-weight:500;text-transform:uppercase;font-size:clamp(1.6rem,1rem + 2.4vw,3.2rem);letter-spacing:-.03em;line-height:1;white-space:nowrap;opacity:.9}
.mq__in>span:nth-child(even){opacity:.5}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- values ---------- */
.val{border-top:1px solid rgb(236 228 218 / .22)}
.val>li{border-bottom:1px solid rgb(236 228 218 / .22);padding:clamp(26px,3.4vw,48px) 0}
.val__n{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;opacity:.7}

/* ---------- numbered list (Ablauf) ---------- */
.steps{border-top:1px solid rgb(20 19 17 / .2)}
.steps>li{border-bottom:1px solid rgb(20 19 17 / .2)}
/* Jede Zeile ist ein eigenes Raster. Die erste Spalte braucht deshalb ein
   festes Maß, sonst bestimmt die Breite der Kennung (01, GOTS, OEKO), wo
   der Text daneben anfängt, und die Spalten stehen versetzt. */
.steps a,.steps>li>div{display:grid;grid-template-columns:2.7em minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(20px,2.6vw,34px) 0}
.steps .n{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;opacity:.7}
@media (max-width:760px){.steps a,.steps>li>div{grid-template-columns:2.7em 1fr;row-gap:8px}.steps p{grid-column:2/3}}

/* ---------- images ---------- */
.full img{width:100%;object-fit:cover}
.r-cine img{aspect-ratio:2.4/1}
.r-16 img{aspect-ratio:16/9}
.r-45 img{aspect-ratio:4/5}
.r-34 img{aspect-ratio:3/4}
figure{margin:0}
.figcap{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.7;padding-top:12px}

/* ---------- team ---------- */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)}
@media (max-width:760px){.tgrid{grid-template-columns:repeat(2,1fr)}}
.thumb{display:block;overflow:hidden;aspect-ratio:3/4}
.tgrid img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:filter var(--t)}
@media (hover:hover) and (pointer:fine){
  /* Das Bild ist etwas größer als sein Rahmen, damit der weiche Rand
     der Unschärfe außerhalb liegt und die Kante scharf bleibt. */
  .tgrid img{transform:scale(1.06);filter:blur(2.5px)}
  .tgrid li:hover img,.tgrid li:focus-within img{filter:none}
}
/* Teamseite: zwei Personen nebeneinander, Porträt über dem Text. */
.people{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(40px,5vw,88px) clamp(24px,3vw,56px)}
.person{display:flex;flex-direction:column;border-top:1px solid rgb(20 19 17 / .2);padding-top:clamp(20px,2.2vw,30px)}
.person>div{display:flex;flex-direction:column;flex:1}
/* Porträt und Fun-Bild liegen übereinander. Beim Zeigen blendet das
   eine ins andere. Auf Touchgeräten passiert nichts, dort gibt es kein
   Hover und das Bild würde sonst nie wechseln. */
.portrait{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;
  margin-bottom:clamp(22px,2.6vw,36px);background:rgb(20 19 17 / .06)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .55s var(--t-ease, cubic-bezier(.16,1,.3,1))}
.portrait__calm{object-position:50% 16%}
.portrait__fun{object-position:50% 55%;opacity:0}
@media (hover:hover) and (pointer:fine){
  .portrait:hover .portrait__fun,
  .portrait:focus-within .portrait__fun{opacity:1}
  .portrait:hover .portrait__calm,
  .portrait:focus-within .portrait__calm{opacity:0}
}
/* Text, Beschriftungen und Linien teilen sich eine Kante. */
.person>div{max-width:min(100%,30rem)}
/* Sobald zwei Personen nebeneinander stehen, bekommt das Porträt eine
   feste Plattengröße. Es wächst nicht mit der Spalte mit, sonst wird es
   auf großen Bildschirmen erschlagend. */
@media (min-width:701px){
  .portrait{max-width:min(100%,340px)}
}
@media (max-width:700px){
  .people{grid-template-columns:1fr;gap:clamp(34px,6vw,52px)}
}
.kv{display:grid;gap:6px;margin-top:auto;padding-top:26px}
.kv div{display:grid;grid-template-columns:7em 1fr;gap:14px;padding-block:8px;border-top:1px solid rgb(20 19 17 / .16)}
@media (max-width:1180px){.kv div{grid-template-columns:1fr;gap:3px}}
.kv dt{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:0}
.kv dd{margin:0;font-size:.875rem}

/* ---------- Terminbuchung ---------- */
.booking__gate{border:1px solid rgb(20 19 17 / .2);padding:clamp(26px,3.2vw,44px)}
.booking__frame{display:block;width:100%;height:780px;border:0;background:var(--paper)}
@media (max-width:900px){.booking__frame{height:1040px}}

.alt{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgb(20 19 17 / .2)}

/* ---------- Rechtstexte ----------
   Lange Fliesstexte brauchen andere Regeln als die Marketingseiten:
   engere Zeilen, klare Zwischenueberschriften, keine Versalien. */
.legal{max-width:72ch}
.legal h2{font-family:var(--sans);font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;
  margin:clamp(44px,5vw,72px) 0 14px;padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgb(20 19 17 / .18)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:-.01em;line-height:1.35;margin:26px 0 8px}
.legal h4{font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1.4;margin:20px 0 6px;opacity:.85}
.legal p,.legal ul,.legal ol,.legal dl{font-size:1rem;line-height:1.68;margin:0 0 14px}
.legal ul,.legal ol{padding-left:1.2em}
.legal li{margin-bottom:6px}
.legal a{border-bottom:1px solid rgb(20 19 17 / .3);padding-bottom:1px;transition:border-color var(--t)}
/* Die Rechtstexte enthalten ausgeschriebene URLs. Ohne diese Regel schieben
   sie auf schmalen Bildschirmen die ganze Seite zur Seite. */
.legal a{overflow-wrap:anywhere}
.legal p,.legal li{overflow-wrap:break-word}
.legal a:hover{border-bottom-color:var(--ink)}
.legal address{font-style:normal;line-height:1.68;margin:0 0 14px}
.legal address a{display:inline-block;padding:3px 0}
.legal strong{font-weight:500}
.legal>*:last-child{margin-bottom:0}
/* Platzhalter, die vor dem Livegang ersetzt werden muessen.
   Bewusst sichtbar, damit keiner uebersehen wird. */
.legal .todo{background:rgb(155 74 53 / .14);color:var(--terracotta);padding:1px 6px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em}
/* Inhaltsverzeichnis neben langen Rechtstexten */
.toc{list-style:none;padding:0;margin:26px 0 0}
.toc li{margin-bottom:10px}
.toc a{display:inline-block;padding:5px 0;font-size:.875rem;line-height:1.5;opacity:.62;border-bottom:1px solid transparent;transition:opacity var(--t)}
.toc a:hover,.toc a:focus-visible{opacity:1;border-bottom-color:currentColor}
@media (min-width:901px){.toc--stick{position:sticky;top:96px}}
/* Auf dem Handy stünden zwölf Sprungmarken vor dem eigentlichen Text.
   Da liest man ohnehin von oben nach unten, also weg damit. */
@media (max-width:900px){.toc-wrap{display:none}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);border-top:1px solid rgb(236 228 218 / .16)}
.foot a{opacity:.72;transition:opacity var(--t)}
.foot a:hover{opacity:1}
.foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot h3{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-bottom:16px}
/* Der Satz unter der Wortmarke trägt dieselbe Schrift wie die Zeile
   ganz unten rechts, nur mit mehr Durchschuss, weil er umbricht. */
.foot__claim{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  line-height:2;opacity:.66;margin-top:26px;max-width:24ch}
.foot li{margin-bottom:2px;font-size:.9375rem}
.foot li a{display:inline-block;padding-block:8px}
.foot__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:clamp(48px,7vw,110px);padding-top:22px;border-top:1px solid rgb(236 228 218 / .2);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;opacity:.66}

/* ---- small screens ---- */
@media (max-width:760px){
  .g .g{grid-template-columns:1fr!important;row-gap:20px}
  .g .g>*{grid-column:1/-1!important}
  .r-cine img{aspect-ratio:4/3}
  .kv div{grid-template-columns:1fr;gap:2px}
}

/* ============================================================
   Bewegung
   Alles hier ist optional. Ohne JavaScript und mit
   prefers-reduced-motion steht die Seite still und vollständig.
   ============================================================ */

/* --- Intro, einmal pro Sitzung --- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--black);color:var(--cream);
  display:grid;grid-template-rows:1fr auto;padding:var(--edge);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.loader__mid{display:grid;place-items:center}

/* Die Wortmarke wird von links aufgedeckt, eine dünne Linie läuft als
   Stift voraus. Beides teilt Dauer und Kurve, damit es zusammenbleibt. */
.loader__wm{position:relative;display:block}
.loader__logo{
  height:clamp(20px,2.6vw,30px);width:auto;
  clip-path:inset(0 100% 0 0);
  animation:wmDraw 1.15s .3s cubic-bezier(.62,.02,.34,1) forwards;
}
.loader__pen{
  position:absolute;top:-14%;bottom:-14%;left:0;width:1px;
  background:var(--cream);opacity:0;transform:translateX(-.5px);
  animation:wmPen 1.15s .3s cubic-bezier(.62,.02,.34,1) forwards;
}
@keyframes wmDraw{to{clip-path:inset(0 0 0 0)}}
@keyframes wmPen{
  0%{opacity:0;left:0}
  10%{opacity:.85}
  88%{opacity:.85}
  100%{opacity:0;left:100%}
}
.loader__word,.loader__pct{opacity:0;animation:wmFade .7s .15s ease forwards}
@keyframes wmFade{to{opacity:1}}
.loader__word{animation-name:wmFadeDim}
@keyframes wmFadeDim{to{opacity:.66}}
.loader__row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.loader__word{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.66;padding-bottom:10px}
.loader__pct{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,6vw,4.6rem);line-height:.9}
.loader__bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(236 228 218 / .22)}
.loader__bar i{display:block;height:100%;width:0;background:var(--cream);transition:width .25s linear}
.loader.is-done{transform:translateY(-100%)}
html.no-intro .loader{display:none}
html.is-locked,html.is-locked body{overflow:hidden}

/* --- Aufdecken beim Scrollen --- */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{opacity:0;transform:translateY(20px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-rv].is-in{opacity:1;transform:none}
  .js .rvline{display:block;overflow:hidden;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
  .js .rvline>span{display:block;transform:translateY(104%);
    transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 85ms)}
  .js .is-in .rvline>span{transform:none}
  .js .px img{will-change:transform}
  .js body{animation:pagein .5s cubic-bezier(.16,1,.3,1) both}
  .js body.is-leaving{opacity:0;transition:opacity .24s ease}
}
@keyframes pagein{from{opacity:0}to{opacity:1}}
.full{overflow:hidden}

/* ============================================================
   Kollektion, Ablauf, Fragen
   ============================================================ */

/* --- nummerierte Zeilen mit Meta rechts --- */
.rowlist{border-top:1px solid rgb(20 19 17 / .2)}
.rowlist>li{border-bottom:1px solid rgb(20 19 17 / .2)}
.rowlist__in{display:grid;
  grid-template-columns:2.6em minmax(0,9fr) minmax(0,10fr) 11em;
  gap:clamp(14px,2.2vw,34px);align-items:baseline;padding:clamp(20px,2.4vw,32px) 0}
.rowlist .n{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;opacity:.7}
.rowlist .meta{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.7;text-align:right}
.dark .rowlist,.dark .rowlist>li{border-color:rgb(236 228 218 / .22)}
@media (max-width:1080px){
  .rowlist__in{grid-template-columns:2.6em minmax(0,1fr) 10em;row-gap:8px}
  .rowlist__in>p{grid-column:2/4}
}
@media (max-width:820px){
  .rowlist__in{grid-template-columns:2.6em 1fr;row-gap:8px}
  .rowlist__in>p,.rowlist__in>.meta{grid-column:2/3;text-align:left}
}

/* --- Ablauf, Du und Wir --- */
.stepsec{border-top:1px solid rgb(20 19 17 / .16);padding-block:clamp(56px,7vw,110px)}
.stepsec--first{border-top:0}

.duwir{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.duwir h3{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
@media (max-width:640px){.duwir{grid-template-columns:1fr;gap:22px}}

/* --- Fragen --- */
.faq{border-top:1px solid rgb(20 19 17 / .2)}
.faq details{border-bottom:1px solid rgb(20 19 17 / .2)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:24px;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.2vw,28px) 0;min-height:56px;
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1rem, .9rem + .5vw, 1.35rem);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;position:relative;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.faq p{padding:0 0 clamp(20px,2.4vw,30px);max-width:56ch;font-size:1rem;line-height:1.68;opacity:.82}
.dark .faq,.dark .faq details{border-color:rgb(236 228 218 / .22)}

/* --- Verzicht-Liste --- */
.nots{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px)}
.nots li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgb(236 228 218 / .22);
  font-size:1.0625rem;letter-spacing:-.01em}
.nots li::before{content:"";flex:none;width:14px;height:1px;background:currentColor;opacity:.6;transform:translateY(-4px)}
@media (max-width:700px){.nots{grid-template-columns:1fr}}