:root{
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --tief:#0d0c0b;
  --grund:#0e0d0c;
  --text:#ddd9d2;
  --text-2:#b3ada2;
  --text-3:#a8a297;
  --s-hoch:#fefefe;
  --s-licht:#e3e3e3;
  --s-mitte:#bebfbe;
  --s-tief:#838383;
  --kuehl:#aab2b8;
  --fs:20px;
  --breit:1160px;
  --noppe:
    conic-gradient(from 225deg,
      rgba(255,255,255,.07) 0 25%,
      rgba(255,255,255,.16) 0 50%,
      rgba(0,0,0,.17) 0 75%,
      rgba(0,0,0,.32) 0 100%);
  --chrom:linear-gradient(170deg,#fbfaf8 0%,#eceae6 28%,#cfcdc8 62%,#b4b2ad 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 1.0625rem/1.68 var(--serif);
  color:var(--text);
  background-color:var(--grund);
  background-image:
    radial-gradient(72% 44% at 22% 1%,rgba(206,211,216,.075),rgba(0,0,0,0) 62%),
    radial-gradient(60% 38% at 99% 28%,rgba(154,160,166,.04),rgba(0,0,0,0) 66%),
    radial-gradient(120% 78% at 50% 100%,rgba(0,0,0,.55),rgba(0,0,0,0) 62%),
    repeating-linear-gradient(27deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg,#141312 0%,var(--grund) 30%,#080807 100%);
  background-attachment:scroll,scroll,fixed,scroll,fixed;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.012em;color:#ece9e4}
p{margin:0 0 1rem}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
b,strong{font-weight:700;color:#e8e5e0}

:is(a,button,input,summary):focus-visible{outline:2px solid var(--s-hoch);outline-offset:3px}
.knopf:focus-visible,.zettel-feld:focus-visible{outline:2px solid rgba(0,0,0,0);outline-offset:2px}
.knopf-voll:focus-visible{box-shadow:inset 0 0 0 3px #14120f,inset 0 0 0 6px #f2f0ec}
.knopf:not(.knopf-voll):focus-visible{box-shadow:inset 0 0 0 2px var(--s-hoch)}
.zettel-feld:focus-visible{box-shadow:inset 0 0 0 2px var(--s-hoch),inset 0 2px 5px rgba(0,0,0,.7)}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:20;
  padding:.7rem 1.1rem;background:var(--s-hoch);color:#14120f;
  font:700 .9rem/1 var(--sans);text-decoration:none;
}
.sprung:focus{left:.6rem;top:.6rem}

.buehne{width:100%;max-width:var(--breit);margin:0 auto;padding:0 24px}
.buehne-eng{max-width:820px}

/* ---------- chamfered machined plate ---------- */
.fase{
  position:relative;
  background:conic-gradient(from 0deg,
    #fdfcf9 0deg,#e4e0d9 30deg,#a5a19a 70deg,#5d5a56 114deg,
    #232120 172deg,#2b2926 202deg,#65625d 240deg,#b0aca5 274deg,
    #ece8e1 314deg,#fdfcf9 360deg);
  clip-path:polygon(var(--fs) 0,100% 0,100% calc(100% - var(--fs)),calc(100% - var(--fs)) 100%,0 100%,0 var(--fs));
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.8)) drop-shadow(0 4px 6px rgba(0,0,0,.7));
}
.fase::before{
  content:"";position:absolute;inset:3px;z-index:0;
  background-image:
    radial-gradient(138% 104% at 4% -18%,rgba(255,255,255,.16),rgba(255,255,255,0) 52%),
    linear-gradient(161deg,#3a3633 0%,#2d2a27 38%,#221f1d 74%,#1a1917 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6);
  clip-path:polygon(calc(var(--fs) - 4px) 0,100% 0,100% calc(100% - var(--fs) + 4px),calc(100% - var(--fs) + 4px) 100%,0 100%,0 calc(var(--fs) - 4px));
}
.fase>*{position:relative;z-index:1}

/* ---------- Clous-de-Paris hobnail guilloché ---------- */
.noppen{background-image:var(--noppe);background-size:6px 6px}

/* ---------- recessed seam ---------- */
.saum{position:relative;padding:3rem 24px}
.saum-rille{
  display:block;height:16px;max-width:calc(var(--breit) - 48px);margin:0 auto;
  background-color:#0a0909;
  background-image:linear-gradient(180deg,#050505 0%,#131211 58%,#26241f 100%);
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.9),inset 0 -2px 0 rgba(243,240,234,.34);
}
.saum::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;
  background-image:var(--chrom);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.75));
}

/* ---------- shared bits ---------- */
.vorwort{
  margin:0 0 .95rem;
  font:700 .7rem/1.2 var(--sans);
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-3);
  display:flex;align-items:center;gap:.62rem;flex-wrap:wrap;
}
.vorwort-punkt{width:5px;height:5px;background:var(--s-tief);transform:rotate(45deg)}

.knopf{
  display:inline-block;position:relative;
  padding:.92rem 1.6rem;
  font:700 .86rem/1.15 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;
  color:var(--s-licht);
  background-color:#232120;
  background-image:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%),
    linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0));
  box-shadow:inset 0 0 0 1px rgba(226,223,217,.34);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:transform .18s ease,opacity .18s ease;
}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
.knopf-voll{
  color:#14120f;
  background-color:#dcdad6;
  background-image:linear-gradient(177deg,#ffffff 0%,#f1f0ed 14%,#c8c6c1 40%,#f6f5f2 56%,#cbc9c4 76%,#b9b8b4 100%);
  box-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.5);
}

/* ---------- header ---------- */
.leiste{position:relative;z-index:3;border-bottom:1px solid rgba(226,223,217,.10)}
.leiste-innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:16px;padding-bottom:16px}
.leiste-marke{display:block;line-height:0}
.leiste-marke img{width:auto;height:27px}
.leiste-alter{
  margin:0;display:flex;align-items:center;gap:.6rem;
  font:600 .74rem/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);
}
.leiste-abzeichen{
  padding:.28rem .48rem;color:#14120f;font-weight:800;
  background-image:linear-gradient(170deg,#fbfbfa,#c6c4bf);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}

/* ---------- hero ---------- */
.auftakt{position:relative;padding:3.7rem 0 3.2rem;overflow:hidden}
.auftakt-kegel{
  position:absolute;inset:-30% 26% auto -22%;height:150%;
  background-image:radial-gradient(46% 42% at 40% 34%,rgba(206,211,216,.10),rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.auftakt-raster{
  position:relative;display:grid;gap:3.2rem;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;
}
.auftakt-wort{
  margin:0 0 1.5rem;max-width:19em;text-wrap:balance;
  font-size:clamp(1.58rem,3.4vw,2.32rem);line-height:1.16;letter-spacing:-.02em;
}
.auftakt-stand{margin:0 0 1.6rem}
.auftakt-marke{
  display:flex;align-items:center;gap:.7rem;margin:0 0 .6rem;color:var(--s-mitte);
  font:800 .68rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.auftakt-marke::before{content:"";flex:0 0 auto;width:28px;height:2px;background-image:var(--chrom)}
.auftakt-zahl{margin:0}
.auftakt-zahl b{
  display:block;color:#efeeeb;
  font:800 clamp(3.5rem,10vw,6.3rem)/.88 var(--sans);letter-spacing:-.042em;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .auftakt-zahl b{
    background-image:linear-gradient(174deg,#ffffff 0%,#e9e8e5 15%,#8d8b87 33%,#fbfaf8 47%,#cdcbc6 62%,#7c7a76 80%,#dedcd7 100%);
    -webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 16px 26px rgba(0,0,0,.55));
  }
}
.auftakt-zahl span{
  display:block;margin-top:.7rem;color:var(--s-licht);
  font:700 clamp(1.02rem,2.35vw,1.42rem)/1.26 var(--sans);
  letter-spacing:.135em;text-transform:uppercase;
}
.auftakt-lead{max-width:35em;margin:0 0 1.9rem;color:var(--text);font-size:1.09rem}

.auftakt-bild{position:relative}
.auftakt-bild::before{
  content:"";position:absolute;z-index:0;
  left:44px;right:-34px;top:-34px;bottom:38px;
  background-color:#1e1c1a;background-image:var(--noppe);background-size:6px 6px;
  box-shadow:inset 0 0 0 1px rgba(243,240,234,.17),0 16px 34px rgba(0,0,0,.6);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.auftakt-rahmen{--fs:24px;padding:12px;z-index:1}
.auftakt-rahmen img{width:100%}
.plakette{
  position:absolute;left:-16px;bottom:-20px;z-index:2;
  display:flex;align-items:center;gap:.8rem;margin:0;
  padding:.74rem 1.25rem;background-color:#d5d2cd;background-size:6px 6px,auto;
  background-image:var(--noppe),var(--chrom);
  color:#141210;
  font:800 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));
}
.plakette i{width:7px;height:7px;background:#2c2a27;transform:rotate(45deg)}

/* ---------- signup slip ---------- */
.zettel-bau{--fs:22px;padding:1.5rem 1.6rem 1.35rem;max-width:37rem}
.zettel-kopf{
  margin:0 0 .95rem;color:var(--s-licht);
  font:800 .74rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.zettel-zeile{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.zettel-etikett{flex:1 1 15rem;min-width:0;display:block}
.zettel-etikett>span{
  display:block;margin-bottom:.4rem;color:var(--text-2);
  font:600 .68rem/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;
}
.zettel-feld{
  width:100%;padding:.86rem .95rem;
  font:400 1rem/1.3 var(--sans);color:#f0eeea;
  background-color:#131211;border:0;
  box-shadow:inset 0 0 0 1px rgba(226,223,217,.24),inset 0 2px 5px rgba(0,0,0,.7);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.zettel-feld::placeholder{color:#7e7972;opacity:1}
.zettel-zeile .knopf{flex:0 0 auto}
.zettel-fehler{
  margin:.85rem 0 0;padding:.6rem .8rem;
  font:600 .9rem/1.45 var(--sans);color:#fff0ee;
  background-color:#4a2320;box-shadow:inset 0 0 0 1px rgba(255,190,182,.4);
}
.zettel-fein{margin:.95rem 0 0;font-size:.83rem;line-height:1.6;color:var(--text-3)}
.zettel-quittung{padding:.3rem 0 .2rem}
.zettel-quittung:focus{outline:none}
.zettel-quittung:focus-visible{outline:2px solid var(--s-hoch);outline-offset:6px}
.zettel-quittung-kopf{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 .55rem;color:#f2f1ee;
  font:800 1.2rem/1.2 var(--sans);letter-spacing:.01em;
}
.zettel-quittung-kopf::before{
  content:"";flex:0 0 auto;width:16px;height:16px;
  background-image:var(--chrom);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.zettel-quittung-text{margin:0;font-size:.97rem;color:var(--text-2)}

/* ---------- sections ---------- */
.strecke{padding:1.6rem 0 3.4rem}
.strecke-kopf{max-width:44rem;margin:0 0 2.3rem}
.strecke-titel{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.14;margin:0 0 .85rem}
.strecke-lead{margin:0;color:var(--text-2);font-size:1.05rem}

.gespann{display:grid;gap:3.2rem;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center}
.gespann-eng{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.gespann-kehr .gespann-text{order:2}
.gespann-kehr .gespann-bild{order:1}
.gespann-text p{color:var(--text)}
.gespann-schluss{margin-bottom:.55rem;color:var(--s-licht);font-size:1.13rem;font-style:italic}
.gespann-text .gespann-quelle{margin:0 0 1.4rem;font-size:.88rem;line-height:1.6;color:var(--text-3)}
.gespann-rahmen{--fs:24px;padding:12px}
.gespann-rahmen img{width:100%}

/* ---------- four disciplines ---------- */
.sparten{display:grid;gap:1.5rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.sparte{--fs:18px;padding:1.5rem 1.4rem 1.55rem}
.sparte-zahl{
  display:inline-block;margin-bottom:1rem;padding:.4rem .6rem;
  background-image:var(--chrom);color:#151311;
  font:800 .78rem/1 var(--sans);letter-spacing:.08em;
  box-shadow:0 3px 7px rgba(0,0,0,.55);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.sparte-titel{font-size:1.16rem;margin:0 0 .55rem}
.sparte-text{margin:0;font-size:.95rem;color:var(--text-2)}

/* ---------- steps ---------- */
.staffeln{display:grid;gap:1.5rem;margin-top:.4rem}
.staffel{position:relative;padding-left:3.4rem}
.staffel-zahl{
  position:absolute;left:0;top:.15rem;
  width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;
  background-image:var(--chrom);color:#151311;
  font:800 1.02rem/1 var(--sans);
  box-shadow:0 5px 12px rgba(0,0,0,.6),inset 0 1px 0 #fff;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.staffel-titel{font-size:1.08rem;margin:0 0 .3rem}
.staffel-text{margin:0;font-size:.96rem;color:var(--text-2)}

/* ---------- faq ---------- */
.fragen{display:grid;gap:1.1rem}
.frage{--fs:16px;padding:1.25rem 1.4rem 1.3rem}
.frage-kopf{font-size:1.06rem;margin:0 0 .45rem}
.frage-text{margin:0;font-size:.98rem;color:var(--text-2)}

/* ---------- closing ---------- */
.schluss{position:relative;padding:3.4rem 0 4.6rem;overflow:hidden}
.schluss::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noppe);background-size:6px 6px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(62% 74% at 50% 46%,#000 0%,rgba(0,0,0,.35) 52%,rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(62% 74% at 50% 46%,#000 0%,rgba(0,0,0,.35) 52%,rgba(0,0,0,0) 78%);
}
.schluss::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background-image:linear-gradient(90deg,rgba(243,240,234,0),rgba(243,240,234,.3) 22%,rgba(243,240,234,.3) 78%,rgba(243,240,234,0));
}
.schluss-innen{position:relative;z-index:1;text-align:center}
.schluss-innen .vorwort{justify-content:center}
.schluss-titel{font-size:clamp(1.6rem,3.8vw,2.3rem);line-height:1.16;margin:0 0 .9rem}
.schluss-text{margin:0 auto 2rem;max-width:34em;color:var(--text-2)}
.schluss-innen .zettel-bau{margin:0 auto;text-align:left}

/* ---------- footer ---------- */
.fuss{
  padding:3rem 0 2.6rem;
  border-top:1px solid rgba(226,223,217,.13);
  background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,0) 30%),
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.5));
}
.fuss-oben{display:grid;gap:2.1rem;grid-template-columns:1.5fr 1fr 1.5fr;margin-bottom:2.1rem}
.fuss-marke{width:auto;height:26px;margin-bottom:.95rem;opacity:.92}
.fuss-titel{
  margin:0 0 .7rem;color:var(--s-licht);
  font:800 .68rem/1.2 var(--sans);letter-spacing:.19em;text-transform:uppercase;
}
.fuss-text{margin:0;font-size:.9rem;line-height:1.62;color:var(--text-2)}
.fuss-wege{display:grid;gap:.45rem}
.fuss-wege a{font:600 .92rem/1.5 var(--sans);color:var(--text);text-decoration:underline;text-underline-offset:3px}
.fuss-wege a:hover{color:var(--s-hoch)}
.fuss-alter{
  display:flex;align-items:flex-start;gap:.85rem;margin:0 0 1.5rem;
  padding:1rem 1.15rem;background-color:rgba(255,255,255,.032);
  box-shadow:inset 0 0 0 1px rgba(226,223,217,.15);
  font:600 .9rem/1.6 var(--sans);color:var(--text);
}
.fuss-abzeichen{
  flex:0 0 auto;padding:.28rem .5rem;color:#14120f;font-weight:800;
  background-image:linear-gradient(170deg,#fbfbfa,#c6c4bf);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.fuss-fein p{margin:0 0 .8rem;font-size:.82rem;line-height:1.68;color:var(--text-3)}
.fuss-unten{margin:0}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hebt{animation:hebung both;animation-timeline:view();animation-range:entry 0% entry 22%}
    @keyframes hebung{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
  .plakette::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(102deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 62%);
    animation:glanz 7.5s ease-in-out infinite;
  }
  @keyframes glanz{0%,62%{transform:translateX(-120%)}92%,100%{transform:translateX(120%)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sparten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-oben{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .auftakt-raster,.gespann,.gespann-eng{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .gespann-kehr .gespann-text,.gespann-kehr .gespann-bild{order:0}
  .auftakt-bild{order:2;max-width:34rem}
  .gespann-bild{max-width:30rem}
  .auftakt{padding-top:2.6rem}
}
@media (max-width:680px){
  body{font-size:1.02rem}
  .buehne{padding:0 18px}
  .saum{padding:2.6rem 18px}
  .sparten{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .fuss-oben{grid-template-columns:minmax(0,1fr);gap:1.7rem}
  .zettel-bau{padding:1.25rem 1.2rem 1.15rem}
  .zettel-zeile .knopf{width:100%;text-align:center}
  .auftakt{padding-top:1.6rem;padding-bottom:2.8rem}
  .auftakt-lead{margin-bottom:1.35rem;font-size:1.02rem}
  .auftakt-wort{margin-bottom:1.15rem}
  .auftakt-stand{margin-bottom:1.25rem}
  .plakette{left:-8px;bottom:-14px;gap:.55rem;padding:.6rem .85rem;font-size:.62rem;letter-spacing:.16em}
  .strecke{padding-bottom:2.6rem}
}
@media (max-width:430px){
  .leiste-wort{display:none}
  .leiste-marke img{height:24px}
}