/* Schriften lokal eingebunden (keine Verbindung zu Google) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/lato-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lato-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lato-latin-700-normal.woff2') format('woff2')}
/* Mitte und Ruhe */
:root{
  --ink:#15171A; --ink-2:#1B1E22; --ink-3:#22262B;
  --cream:#F3EFE8; --muted:#B4AFA6; --muted-2:#8C877F;
  --sand:#E4CBA4; --sand-dim:#C9A87E; --copper:#B9825E;
  --line:rgba(243,239,232,.13); --line-soft:rgba(243,239,232,.07);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:64ch; --pad:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);
  font-weight:300;font-size:clamp(16px,1.02vw,17.5px);line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--measure);margin-inline:auto}
.center{text-align:center}
section{padding-block:clamp(56px,8vw,110px)}
.band{background:var(--ink-2)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:rgba(21,23,26,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.head-in{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none}
.brand img{width:24px}
.brand-name{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
nav ul{display:flex;gap:clamp(12px,1.9vw,26px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{font-size:.8rem;letter-spacing:.04em;color:var(--muted);text-decoration:none;
  padding-block:5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--cream);border-bottom-color:var(--sand-dim)}
nav a[aria-current]{color:var(--cream);border-bottom-color:var(--sand)}
.draft{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  border:1px solid rgba(228,203,164,.4);padding:4px 9px;white-space:nowrap}

/* type */
h1,h2,h3,h4{font-weight:400;text-wrap:balance;margin:0}
.kicker{font-size:.69rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand-dim);margin:0 0 20px}
h1{font-family:var(--serif);font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.07}
h1 em{font-style:italic;color:var(--sand)}
h2{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.15}
h3{font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.25}
h4{font-family:var(--sans);font-weight:400;font-size:1rem;letter-spacing:.02em}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.5}
p{margin:0}
.dim{color:var(--muted)}
.prose{display:grid;gap:20px}
.prose p{color:var(--muted)}
.prose h3{margin-top:22px;color:var(--cream)}
.prose strong{font-weight:400;color:var(--cream)}
.rule{width:60px;height:1px;background:var(--sand-dim);margin:26px 0;border:0}
.rule.mid{margin-inline:auto}
blockquote{margin:0;padding-left:22px;border-left:1px solid var(--sand-dim);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;color:var(--cream)}
cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* buttons */
.btn{display:inline-block;font-size:.77rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:14px 28px;border:1px solid var(--sand);color:var(--sand);
  background:none;font-family:var(--sans);cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--sand);color:var(--ink)}
.btn-solid{background:var(--sand);color:var(--ink)}
.btn-solid:hover{background:var(--cream);border-color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.more{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
  text-decoration:none;border-bottom:1px solid rgba(228,203,164,.35);padding-bottom:3px;justify-self:start}
.more:hover{border-bottom-color:var(--sand)}

/* page head */
.page-head{position:relative;isolation:isolate;overflow:hidden}
.page-head .bg{position:absolute;inset:0;z-index:-2}
.page-head .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.page-head::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,23,26,.88),rgba(21,23,26,.68) 45%,rgba(21,23,26,.94))}
.page-head .inner{padding-block:clamp(56px,9vw,120px)}
.hero .inner{padding-block:clamp(72px,12vw,150px);text-align:center}
.hero .lead{margin-top:24px;max-width:36ch;margin-inline:auto}
.hero .btn{margin-top:38px}

/* lists */
.claims{display:grid;gap:0;margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--line);padding:0}
.claims li{list-style:none;padding-block:20px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.claims .mark{color:var(--sand-dim);font-family:var(--serif);font-size:1.3rem;line-height:1}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:26px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:2px;top:.72em;
  width:7px;height:1px;background:var(--sand)}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0;padding:0;list-style:none}
.tags li{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:7px 13px}

/* split layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.5vw,60px);align-items:center}
.split.narrow-left{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
.split.narrow-right{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
.split figure{margin:0}

/* cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2vw,38px);margin-top:clamp(32px,4.5vw,52px)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.5vw,44px);margin-top:clamp(28px,4vw,44px)}
.item{display:grid;gap:16px;align-content:start}
.item figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.item figure img{width:100%;height:100%;object-fit:cover}
.item p{font-size:.94rem;color:var(--muted)}
.topline{border-top:1px solid var(--line);padding-top:22px}

/* numbered steps — a real sequence */
.steps{counter-reset:s;list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;gap:0}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-block:24px;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);align-items:start}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);
  font-size:1.5rem;color:var(--sand-dim);line-height:1.2}
.steps h4{margin-bottom:6px}
.steps p{color:var(--muted);font-size:.95rem}

/* facts table */
.facts-table{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.facts-table div{display:grid;grid-template-columns:minmax(120px,.3fr) 1fr;gap:18px;
  padding-block:14px;border-bottom:1px solid var(--line)}
.facts-table dt,.facts-table .k{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.facts-table .v{color:var(--cream)}

/* events */
.events{display:grid;gap:clamp(20px,3vw,28px);margin-top:clamp(30px,4vw,46px)}
.event{border:1px solid var(--line);background:var(--ink-2);padding:clamp(22px,3.2vw,34px);
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(20px,3vw,36px)}
.event .when{display:grid;gap:6px;align-content:start}
.event .day{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3.1rem);line-height:1;color:var(--sand)}
.event .mon{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.event .time{font-size:.88rem;color:var(--muted)}
.event h3{margin-bottom:10px}
.event p{color:var(--muted);font-size:.95rem}
.status{display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border:1px solid;margin-bottom:14px}
.status.free{color:#9DC4A4;border-color:rgba(157,196,164,.45)}
.status.few{color:var(--sand);border-color:rgba(228,203,164,.5)}
.status.planned{color:var(--muted-2);border-color:var(--line)}
.event-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;font-size:.88rem;color:var(--muted)}
.event.example{opacity:.62;border-style:dashed}
.example-tag{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}

/* forms */
form{display:grid;gap:22px;margin-top:clamp(28px,4vw,42px)}
.field{display:grid;gap:8px}
.field label{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--cream);
  background:var(--ink-3);border:1px solid var(--line);padding:13px 15px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.88rem;color:var(--muted)}
.consent input{width:16px;height:16px;margin-top:5px;accent-color:var(--sand)}
.note{font-size:.84rem;color:var(--muted-2);border-left:1px solid var(--sand-dim);padding-left:16px}

/* pyramid */
.model{margin-top:clamp(28px,4vw,44px)}
.model figure{margin:0 auto;max-width:660px}
.level-btn{cursor:pointer}
.level-band{transition:fill .25s}
.level-txt{font-family:var(--sans);font-weight:400;letter-spacing:.02em;pointer-events:none}
.level-num{font-family:var(--sans);font-weight:300;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.levels{list-style:none;margin:clamp(34px,5vw,54px) auto 0;padding:0;max-width:920px}
.levels li{display:grid;grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);gap:clamp(16px,3vw,38px);
  border-top:1px solid var(--line);padding-block:26px;transition:background .25s}
.levels li:last-child{border-bottom:1px solid var(--line)}
.levels .lv-head{display:grid;gap:6px;align-content:start}
.levels .lv-num{font-family:var(--sans);font-weight:300;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
.levels h3{color:var(--sand);margin:0;font-size:1.35rem}
.levels p{color:var(--muted);margin:0}
.levels li.is-on{background:rgba(228,203,164,.055)}
@media(max-width:700px){.levels li{grid-template-columns:1fr;gap:10px}}
.axis{font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.16em;text-transform:uppercase}

/* word cloud */
.cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 20px;
  margin-top:clamp(26px,4vw,42px);line-height:1.1}
.cloud span{font-family:var(--serif);color:var(--muted-2)}
.cloud .s1{font-size:clamp(1rem,1.6vw,1.25rem)}
.cloud .s2{font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--muted)}
.cloud .s3{font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--cream)}
.cloud .s4{font-size:clamp(2.3rem,5vw,4rem);color:var(--sand);font-style:italic}

/* Methodenverzeichnis */
.methods-wrap{max-width:920px;margin-inline:auto}
.method-group{margin-top:clamp(40px,5.5vw,66px)}
.group-label{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}
.group-label h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.group-label .count{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.methods{margin:0;border-top:1px solid var(--line)}
.method{display:grid;grid-template-columns:minmax(190px,.3fr) minmax(0,1fr);
  gap:clamp(18px,3.4vw,48px);padding-block:26px;border-bottom:1px solid var(--line)}
.method dt{display:grid;gap:7px;align-content:start}
.m-name{font-family:var(--serif);font-size:1.22rem;line-height:1.25;color:var(--cream)}
.m-abbr{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-dim)}
.method dd{margin:0;color:var(--muted);font-size:.95rem}

/* Download-Formular */
.gate{border:1px solid var(--line);background:var(--ink-3);padding:clamp(24px,3.6vw,40px);margin-top:clamp(28px,4vw,44px)}
.gate h3{color:var(--cream)}
.gate form{margin-top:24px}
.gate .consent + .consent{margin-top:-6px}
.consent.optional{border-top:1px solid var(--line);padding-top:18px}

/* sub navigation */
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.subnav a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);padding:9px 15px;transition:border-color .2s,color .2s}
.subnav a:hover{color:var(--cream);border-color:var(--sand-dim)}
.subnav a[aria-current]{color:var(--ink);background:var(--sand);border-color:var(--sand)}

/* faq */
details{border-bottom:1px solid var(--line)}
details summary{cursor:pointer;list-style:none;padding-block:20px;display:flex;gap:16px;
  align-items:baseline;font-family:var(--serif);font-size:1.2rem;color:var(--cream)}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--sand);font-family:var(--sans);font-size:1rem}
details[open] summary::before{content:"\2013"}
details .answer{padding-bottom:22px;color:var(--muted);font-size:.96rem}

/* contact block */
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact .bg{position:absolute;inset:0;z-index:-2}
.contact .bg img{width:100%;height:100%;object-fit:cover}
.contact::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(21,23,26,.85)}
.facts{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:28px;color:var(--muted);font-size:.92rem}

/* footer */
footer{border-top:1px solid var(--line-soft);padding-block:42px;background:var(--ink)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:17px;list-style:none;margin:0;padding:0}
.foot-links a{font-size:.79rem;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--cream)}
.foot-mark{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

@media (max-width:880px){
  .split,.split.narrow-left,.split.narrow-right,.model{grid-template-columns:1fr}
  .grid-3,.grid-2,.row-2{grid-template-columns:1fr}
  .event{grid-template-columns:1fr}
  .split figure,.model figure{order:-1}
  .item figure{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Rechtliches */
.foot-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted-2);line-height:1.6}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.6rem);margin:42px 0 12px}
.legal p{margin:0 0 14px}