/* Selbst gehostete Schriften: keine Verbindung zu Google, kein Cookie-Banner nötig */
@font-face{
  font-family:"Fraunces";
  src:url("schriften/fraunces.woff2") format("woff2-variations"),
      url("schriften/fraunces.woff2") format("woff2");
  font-weight:400 900;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo.woff2") format("woff2-variations"),
      url("schriften/archivo.woff2") format("woff2");
  font-weight:300 700;
  font-stretch:62% 125%;
  font-display:swap;
}


:root{
  --paper:#F4EFE3;
  --paper2:#E9E0CE;
  --ink:#1D1613;
  --soft:#544842;
  --mute:#8E8072;
  --ox:#7B2028;
  --ox-deep:#4E1218;
  --brass:#C08A3E;
  --rule:rgba(29,22,19,.16);
  --disp:"Fraunces",Georgia,serif;
  --sans:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(1.15rem,4.5vw,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(1.02rem,.98rem + .25vw,1.13rem);
  line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
p+p{margin-top:1.1em}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.col{max-width:600px}

h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.03em}
h1{font-weight:800;font-size:clamp(2.7rem,1.4rem + 5.6vw,6.4rem);line-height:.96;font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1}
h2{font-weight:700;font-size:clamp(2.1rem,1.35rem + 3vw,3.9rem);line-height:1.02;font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1}
h3{font-weight:600;font-size:clamp(1.18rem,1.08rem + .45vw,1.42rem);line-height:1.2;font-variation-settings:"opsz" 48}

.kick{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ox);margin-bottom:1.1rem;display:flex;align-items:center;gap:.65rem}
.kick::before{content:"";width:22px;height:2px;background:var(--brass)}
.lead{font-size:clamp(1.08rem,1rem + .45vw,1.32rem);line-height:1.52;color:var(--soft);max-width:46ch;text-wrap:balance}
.soft{color:var(--soft)}
.drop::first-letter{float:left;font-family:var(--disp);font-weight:700;font-size:3.9em;line-height:.82;
  margin:.06em .1em 0 0;color:var(--ox)}

.btn{display:inline-block;font-family:var(--sans);font-size:.77rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding:1.05rem 2.2rem;background:var(--ox);color:var(--paper);
  border:2px solid var(--ox);transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ox)}
.btn--l{background:transparent;color:var(--paper);border-color:rgba(244,239,227,.5)}
.btn--glas{background:rgba(247,242,231,.17);color:#F7F2E7;border-color:rgba(247,242,231,.45);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%)}
.btn--glas:hover,.btn--glas:focus-visible{background:rgba(247,242,231,.92);color:var(--ink);border-color:rgba(247,242,231,.92)}
.btn--l:hover,.btn--l:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tlink{color:var(--ox);text-decoration:none;font-weight:500;border-bottom:2px solid rgba(123,32,40,.28);padding-bottom:1px}
.tlink:hover,.tlink:focus-visible{border-color:var(--ox)}
:focus-visible{outline:2px solid var(--ox);outline-offset:4px}

.shot{position:relative;overflow:hidden;background:var(--paper2);display:flex;align-items:flex-end}
.shot::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(29,22,19,.05) 0 13px,transparent 13px 26px)}
.shot b{position:relative;z-index:2;font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);padding:.9rem 1rem}
.mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.16,.84,.34,1)}
.mask.in{clip-path:inset(0 0 0 0)}

/* Wortmarke */
.wm{line-height:1;text-decoration:none;display:inline-block}
.wm .n{font-family:var(--disp);font-weight:700;font-size:1.42rem;letter-spacing:-.035em;display:block;
  font-variation-settings:"opsz" 40,"WONK" 1}
.wm .s{font-family:var(--sans);font-size:.53rem;font-weight:600;letter-spacing:.21em;text-transform:uppercase;
  display:block;margin-top:.35rem;color:var(--mute)}

/* Kopf */
/* Kopf liegt auf dem Bild. Der Himmel ist hell, deshalb dunkle Schrift. */
.top{position:absolute;top:0;left:0;right:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:2rem;min-height:clamp(66px,5.6vw,88px)}
.top .wm .n{font-size:clamp(1.35rem,1.75vw,1.85rem);color:var(--ink);letter-spacing:-.02em}
.top .wm .s{font-size:clamp(.6rem,.74vw,.74rem);letter-spacing:.2em;color:rgba(29,22,19,.66);margin-top:.5rem}
.nav{margin-left:auto;display:flex;gap:clamp(1.15rem,1.9vw,2.2rem);align-items:center}
.nav a{font-size:clamp(.86rem,1.05vw,1.02rem);font-weight:500;letter-spacing:.01em;text-decoration:none;
  color:var(--ink);border-bottom:2px solid transparent;padding-bottom:3px;transition:color .2s,border-color .2s}
.nav a:hover,.nav a:focus-visible{color:var(--ox);border-color:var(--ox)}
.lang{font-size:.82rem;font-weight:500;letter-spacing:.09em;color:rgba(29,22,19,.66)}
@media(max-width:1080px){.nav{display:none}}

/* HERO */
.hero{padding:0}
.hero figure{margin:0}
/* Grundverhaeltnis des beschnittenen Bildes, nach oben durch die Fensterhoehe gedeckelt.
   Beschnitten wird dann von OBEN (object-position unten), damit die Pfoten sicher sind. */
/* Kein Hoehendeckel: Das Bild laeuft immer in seinem eigenen Verhaeltnis,
   damit nie etwas abgeschnitten wird. Kompakter wird es allein durch den
   Beschnitt der Bilddatei selbst (oben 100 px Himmel entfernt). */
.hero .media{position:relative;width:100%;aspect-ratio:6960/4540;overflow:hidden;background:#241A17}
.hero .media img{width:100%;height:100%;object-fit:cover;display:block}
/* heller Schleier oben: haelt die Navigation lesbar, auch wenn sie den Fels streift */
.hero .scrim{position:absolute;top:0;left:0;right:0;height:clamp(110px,17%,210px);z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(246,241,231,.78) 0%,rgba(246,241,231,.34) 46%,rgba(246,241,231,0) 100%)}
.hero .veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(to top right,rgba(18,12,10,.92) 0%,rgba(18,12,10,.68) 17%,
                  rgba(18,12,10,.28) 36%,rgba(18,12,10,0) 56%)}
.hero .over{position:absolute;left:0;right:0;bottom:clamp(1.4rem,3vw,2.6rem);z-index:3}
.hero h1{color:#F7F2E7;max-width:none;font-size:clamp(1.7rem,3.9vw,4.5rem)}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero .sub{color:rgba(247,242,231,.9);max-width:none;margin-top:1rem;font-size:clamp(.95rem,1.15vw,1.08rem);text-wrap:balance}
.hero .acts{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:760px){
  .hero .media{aspect-ratio:4/5}
  .hero .media img{object-position:62% 100%}
  .hero .veil{background:linear-gradient(to top,rgba(18,12,10,.94) 0%,rgba(18,12,10,.5) 36%,rgba(18,12,10,0) 64%)}
  .hero h1{font-size:clamp(1.7rem,6.6vw,2.4rem)}
  .hero .sub{font-size:clamp(.8rem,3.4vw,.95rem);max-width:none}
  .hero .over{bottom:1.1rem}
}

/* Registerband */
.reg{background:var(--ink);color:rgba(244,239,227,.82)}
.reg .wrap{padding-top:1.15rem;padding-bottom:1.15rem}
.reg p{font-size:clamp(.82rem,1.12vw,1.05rem);line-height:1.5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.reg p{white-space:normal;font-size:.92rem}}
.reg em{font-style:normal;color:var(--paper);font-weight:500;
  border-bottom:1px solid rgba(192,138,62,.6);padding-bottom:1px}

/* Statement + Zahlen */
.state{padding:clamp(3.25rem,7vw,6rem) 0}
/* Trennzeichen zwischen zwei Abschnitten */
.trenner{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);padding:clamp(.5rem,1.5vw,1rem) 0}
.trenner span{height:1px;background:var(--rule);flex:1}
.trenner i{width:8px;height:8px;background:var(--brass);transform:rotate(45deg);flex:none;display:block}
.trenner i:nth-child(3){width:5px;height:5px;opacity:.55}
.state .big{font-family:var(--disp);font-weight:600;font-size:clamp(1.55rem,1.1rem + 2.2vw,2.9rem);
  line-height:1.16;letter-spacing:-.03em;max-width:24ch;font-variation-settings:"opsz" 100,"SOFT" 30}
.state .big em{font-style:normal;color:var(--ox)}
.state .wel{font-size:clamp(1.05rem,1rem + .4vw,1.24rem);line-height:1.6;color:var(--soft);
  max-width:56ch;margin-top:1.15rem}
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(2.5rem,5vw,4rem);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.nums div{padding:1.3rem 1.4rem 1.5rem;border-right:1px solid var(--rule)}
.nums div:last-child{border-right:0}
.nums .n{font-family:var(--disp);font-weight:800;font-size:clamp(2.3rem,1.5rem + 2.8vw,4.2rem);line-height:.9;
  letter-spacing:-.05em;display:block;color:var(--ox);font-variation-settings:"opsz" 144,"WONK" 1}
.nums .c{font-size:.78rem;letter-spacing:.05em;color:var(--mute);display:block;margin-top:.6rem;line-height:1.4}
@media(max-width:700px){.nums{grid-template-columns:1fr}.nums div{border-right:0;border-bottom:1px solid var(--rule)}}

/* Abschnitte */
.sec{padding:clamp(3.25rem,8vw,7rem) 0}
.sec--band{background:var(--paper2)}
.sec--band .shot{background:#DFD4BD}
.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.75rem,4.5vw,4rem);align-items:center}
.duo--flip .im{order:2}
.duo .shot{aspect-ratio:4/5}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:1.75rem}.duo--flip .im{order:0}}
.marg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(1.75rem,5vw,4rem);align-items:start}
@media(max-width:920px){.marg{grid-template-columns:1fr}}
.quote{font-family:var(--disp);font-weight:500;font-style:italic;font-size:clamp(1.45rem,1.1rem + 1.5vw,2.2rem);
  line-height:1.26;color:var(--ox);max-width:19ch;margin:0;font-variation-settings:"opsz" 90,"SOFT" 40}
.marg .pic{margin:0}
@media(max-width:920px){.marg .pic .shot{aspect-ratio:4/3}}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:1rem}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2.2vw,1.6rem)}
.pair .shot{aspect-ratio:3/4}
@media(max-width:700px){.pair{grid-template-columns:1fr}.pair .shot{aspect-ratio:4/3}}

/* Vollbild mit Zitat */
.hit{position:relative;height:clamp(400px,66vh,720px);display:flex;align-items:center;overflow:hidden;background:#241A17}
.hit .shot{position:absolute;inset:-6% 0;background:#241A17}
.hit .shot::after{background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 15px,transparent 15px 30px)}
.hit .shot b{color:rgba(255,255,255,.4)}
.hit .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,16,14,.86) 0%,rgba(24,16,14,.35) 62%,rgba(24,16,14,.15) 100%)}
.hit .in{position:relative;z-index:3;width:100%}
.hit .q{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,1.2rem + 2.8vw,3.6rem);line-height:1.1;
  color:#F7F2E7;max-width:17ch;letter-spacing:-.03em;font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1}
.hit .c{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:1.3rem}

/* Datenblatt */
.sheet{border:2px solid var(--ink);background:var(--paper)}
.sec--band .sheet{background:var(--paper)}
.sheet .hdr{background:var(--ox);color:#F7F2E7;padding:1rem 1.2rem}
.sheet .hdr .a{font-family:var(--disp);font-weight:700;font-size:1.4rem;line-height:1.1;display:block;
  font-variation-settings:"opsz" 60,"WONK" 1}
.sheet .hdr .b{font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(247,242,231,.72);display:block;margin-top:.4rem}
.sheet table{width:100%;border-collapse:collapse;font-size:.94rem}
.sheet th,.sheet td{text-align:left;padding:.62rem 1.2rem;border-bottom:1px solid var(--rule);vertical-align:baseline}
.sheet tr:nth-child(even){background:rgba(29,22,19,.035)}
.sheet th{font-weight:600;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);width:8.5rem}
.sheet td{font-family:var(--disp);font-weight:600;font-size:1.02rem;font-variation-settings:"opsz" 36}
.sheet td small{display:block;font-family:var(--sans);font-weight:300;font-size:.81rem;color:var(--mute);
  line-height:1.45;margin-top:.12rem}
.sheet .ftr{padding:.85rem 1.2rem;font-size:.79rem;color:var(--mute)}
@media(max-width:520px){.sheet th{width:6.5rem}}

/* Kacheln mit Bild */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.8vw,2rem);margin-top:clamp(2.25rem,4.5vw,3.5rem)}
.tile .shot{aspect-ratio:5/4;margin-bottom:1.15rem}
.tile h3{margin-bottom:.55rem}
.tile p{font-size:.95rem;color:var(--soft)}
@media(max-width:860px){.three{grid-template-columns:1fr}}

/* Wurfplan dunkel */
.plan{background:var(--ox-deep);color:#F2E4DC}
.plan .kick{color:#E0A99B}
.plan .kick::before{background:var(--brass)}
.plan h2{color:#FBF3E9}
.plan .lead{color:#DCC5BC}
.rows{margin-top:clamp(2rem,4vw,3rem);max-width:840px}
.rows .row{display:grid;grid-template-columns:11.5rem 1fr;gap:1.5rem;padding:1.25rem 0;border-top:1px solid rgba(242,228,220,.2)}
.rows .row:last-child{border-bottom:1px solid rgba(242,228,220,.2)}
.rows .w{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);padding-top:.45rem}
.rows .d{font-family:var(--disp);font-weight:700;font-size:1.35rem;color:#FBF3E9;display:block;
  font-variation-settings:"opsz" 60,"WONK" 1}
.rows .d + p{font-size:.95rem;color:#C9B1A8;margin-top:.15rem}
@media(max-width:640px){.rows .row{grid-template-columns:1fr;gap:.25rem}.rows .w{padding-top:0}}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.steps div{border-top:3px solid var(--ox);padding-top:1rem}
.steps h3{font-size:1.05rem;margin-bottom:.4rem}
.steps p{font-size:.92rem;color:var(--soft)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.slider{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.slider .win{overflow:hidden}
.slider .track{display:flex;transition:transform .85s cubic-bezier(.16,.84,.34,1)}
.slider .slide{flex:0 0 100%;min-width:0}
.slider .slide .shot{aspect-ratio:3/2}
.dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.15rem}
.dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(29,22,19,.22);transition:background .3s,transform .3s}
.dots button[aria-selected="true"]{background:var(--ox);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.slider .track{transition:none}}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps--3{grid-template-columns:1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.dates{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.dates span{font-size:.75rem;font-weight:500;border:1px solid var(--rule);padding:.45rem .8rem;color:var(--soft)}

/* Aktuelles */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.8vw,2rem);margin-top:clamp(2.25rem,4vw,3.25rem)}
.cardx{text-decoration:none;display:block}
.cardx .shot{aspect-ratio:4/3;margin-bottom:1rem}
.cardx .t{font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ox);display:block;margin-bottom:.4rem}
.cardx h3{transition:color .25s}
.cardx:hover h3,.cardx:focus-visible h3{color:var(--ox)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* Abschluss */
.end{position:relative;overflow:hidden;padding:clamp(4rem,10vw,8rem) 0;text-align:center;background:#241A17}
.end .shot{position:absolute;inset:-6% 0;background:#241A17}
.end .shot::after{background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 15px,transparent 15px 30px)}
.end .shot b{color:rgba(255,255,255,.35)}
.end .veil{position:absolute;inset:0;background:rgba(24,16,14,.8)}
.end .in{position:relative;z-index:3}
.end h2{color:#FBF3E9;max-width:16ch;margin:0 auto 1.2rem}
.end h2 em{font-style:normal;color:var(--brass)}
.end .lead{color:rgba(251,243,233,.82);margin:0 auto 2rem;text-align:center}
.end .tlink{color:var(--brass);border-bottom-color:rgba(192,138,62,.55)}
.end .tlink:hover,.end .tlink:focus-visible{color:#F7F2E7;border-bottom-color:#F7F2E7}

/* Fuß */
.foot{background:var(--ink);color:rgba(244,239,227,.68);padding:3.25rem 0 2.25rem;font-size:.9rem}
.foot .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.25rem}
.foot h4{font-size:.64rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--brass);margin:0 0 .9rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.45rem}
.foot a{text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--paper)}
.foot .wm .n{color:var(--paper)}
.foot .wm .s{color:rgba(244,239,227,.5)}
.foot .bottom{margin-top:2.25rem;padding-top:1.2rem;border-top:1px solid rgba(244,239,227,.16);font-size:.75rem;color:rgba(244,239,227,.45)}
@media(max-width:820px){.foot .grid{grid-template-columns:1fr;gap:1.75rem}}

.rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.16,.84,.34,1),transform .85s cubic-bezier(.16,.84,.34,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}
  .mask{clip-path:none;transition:none}.par{transform:none!important}}


/* ================= Unterseiten ================= */
.top--fest{position:sticky;top:0;background:rgba(244,239,227,.95);
  backdrop-filter:saturate(150%) blur(9px);-webkit-backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid var(--rule)}
.top--fest .wrap{min-height:clamp(62px,5.2vw,80px)}

.krumen{font-size:.71rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin-bottom:1.3rem}
.krumen a{text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.krumen a:hover,.krumen a:focus-visible{color:var(--ox);border-color:var(--ox)}
.krumen span{margin:0 .45rem;opacity:.6}

.titel{padding:clamp(2.25rem,5vw,4rem) 0 clamp(1.5rem,3.5vw,2.5rem)}
.titel h1{color:var(--ink);font-size:clamp(2.4rem,1.5rem + 3.4vw,4.4rem);line-height:1;max-width:16ch}
.titel h1 em{font-style:normal;color:var(--ox)}
.titel .lead{margin-top:1.4rem}

.fakten{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.fakten div{padding:1.15rem 1.3rem 1.3rem;border-right:1px solid var(--rule)}
.fakten div:last-child{border-right:0}
.fakten .k{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);display:block;margin-bottom:.45rem}
.fakten .v{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.15;display:block;font-variation-settings:"opsz" 60}
@media(max-width:720px){.fakten{grid-template-columns:1fr}
  .fakten div{border-right:0;border-bottom:1px solid var(--rule)}}

.hinweis{border-left:3px solid var(--ox);padding:.2rem 0 .2rem 1.3rem;margin-top:2rem;
  color:var(--soft);max-width:62ch}

/* Verweiskacheln */
.tile--link{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--rule);
  padding:1.5rem 1.45rem 1.6rem;transition:transform .4s cubic-bezier(.16,.84,.34,1),border-color .3s}
.sec--band .tile--link{background:var(--paper)}
.tile--link:hover,.tile--link:focus-visible{transform:translateY(-5px);border-color:var(--ox)}
.tile--link h3{margin-bottom:.5rem}
.tile--link p{font-size:.94rem;color:var(--soft);margin:0}
.tile--link .pfeil{display:inline-block;margin-top:.9rem;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ox)}


/* Echte Bilder in den Bildflaechen */
.shot--bild::after{display:none}
.shot--bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.bandbild{margin:clamp(.5rem,2vw,1.5rem) 0 0}
@media(max-width:700px){.bandbild .shot{aspect-ratio:3/2}}


/* ============ Fortlaufender Artikel ============ */
.artikel{max-width:660px;margin:0 auto}
.artikel > p{color:var(--soft);margin:0}
.artikel > p + p{margin-top:1.05em}
.artikel h3{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.3rem,1.1rem + .85vw,1.75rem);line-height:1.15;
  margin:clamp(2.4rem,4.5vw,3.4rem) 0 .85rem;font-variation-settings:"opsz" 72,"SOFT" 30}
.artikel h3:first-child{margin-top:0}
.artikel .auf{font-size:clamp(1.12rem,1.02rem + .45vw,1.28rem);line-height:1.55;color:var(--ink)}
.artikel .hinweis{margin-top:1.6rem}

/* Steckbriefblock */
.steck{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:820px){.steck{grid-template-columns:1fr}}
.steck figure{margin:0}

/* Hervorgehobener Kasten im Fließtext */
.kasten{background:var(--paper2);border-left:3px solid var(--ox);
  padding:clamp(1.15rem,2.5vw,1.7rem) clamp(1.25rem,3vw,1.9rem);
  margin:clamp(1.9rem,4vw,2.6rem) 0;color:var(--soft)}
.sec--band .kasten{background:var(--paper)}
.kasten p{margin:0}
.kasten p + p{margin-top:.8em}
.kasten .t{font-family:var(--disp);font-weight:700;font-size:clamp(1.08rem,1rem + .4vw,1.28rem);
  color:var(--ink);display:block;margin-bottom:.6rem;letter-spacing:-.02em}

.artikel strong,.kasten strong{font-weight:600;color:var(--ink)}


/* ================= Formular ================= */
.formular{max-width:680px;margin:0 auto}
.formular fieldset{border:0;padding:0;margin:0 0 clamp(2.2rem,4.5vw,3.2rem)}
.formular legend{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);padding:0 0 .3rem;
  font-variation-settings:"opsz" 72,"SOFT" 30}
.formular .vor{font-size:.95rem;color:var(--mute);margin:0 0 1.6rem}

.feld{margin-bottom:1.45rem}
.feld > label,.feld .frage{display:block;font-weight:500;font-size:.98rem;color:var(--ink);margin-bottom:.5rem}
.feld .hilfe{display:block;font-size:.85rem;color:var(--mute);margin:-.25rem 0 .55rem;font-weight:300}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  width:100%;font:inherit;font-size:1rem;font-weight:300;color:var(--ink);
  background:#FBF8F1;border:1px solid var(--rule);padding:.72rem .85rem;
  transition:border-color .2s,box-shadow .2s}
.feld textarea{min-height:104px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--ox);
  box-shadow:0 0 0 3px rgba(123,32,40,.12)}
.feld .pflicht{color:var(--ox)}

.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl label{display:inline-flex;align-items:center;gap:.55rem;margin:0;font-weight:300;
  border:1px solid var(--rule);padding:.55rem .9rem;cursor:pointer;font-size:.95rem;
  transition:border-color .2s,background .2s}
.wahl input{accent-color:var(--ox);margin:0}
.wahl label:hover{border-color:var(--ox)}
.wahl label:has(input:checked){border-color:var(--ox);background:rgba(123,32,40,.07);color:var(--ink)}

.zustimmung{display:flex;gap:.8rem;align-items:flex-start;font-size:.93rem;
  color:var(--soft);line-height:1.55;margin-bottom:1.1rem;font-weight:300}
.zustimmung input{accent-color:var(--ox);margin-top:.3rem;flex:none;width:17px;height:17px}

/* Honigtopf: für Menschen unsichtbar, für Bots sichtbar */
.topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fehler{background:rgba(123,32,40,.09);border-left:3px solid var(--ox);
  padding:1rem 1.2rem;margin-bottom:2rem;font-size:.95rem;color:var(--ink)}


/* Liste mit Jahreszahl links (z. B. Weiterbildungen) */
.liste{margin-top:clamp(1.75rem,3.5vw,2.6rem);max-width:760px}
.liste .zeile{display:grid;grid-template-columns:8.5rem 1fr;gap:1.4rem;
  padding:1.25rem 0;border-top:1px solid var(--rule)}
.liste .zeile:last-child{border-bottom:1px solid var(--rule)}
.liste .w{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ox);padding-top:.42rem}
.liste .d{font-family:var(--disp);font-weight:700;font-size:1.18rem;display:block;
  letter-spacing:-.02em;font-variation-settings:"opsz" 60}
.liste .d + p{font-size:.96rem;color:var(--soft);margin-top:.2rem}
@media(max-width:640px){.liste .zeile{grid-template-columns:1fr;gap:.25rem}.liste .w{padding-top:0}}


/* ================= Menü für schmale Bildschirme ================= */
.menuknopf{display:none;margin-left:auto;background:none;border:0;padding:.45rem;
  cursor:pointer;color:inherit;position:relative;z-index:80}
.menuknopf span{display:block;width:26px;height:2px;background:currentColor;
  margin:6px 0;transition:transform .35s cubic-bezier(.16,.84,.34,1),opacity .25s}
body.menuoffen .menuknopf{color:var(--ink)}
body.menuoffen .menuknopf span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menuoffen .menuknopf span:nth-child(2){opacity:0}
body.menuoffen .menuknopf span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobilnav{position:fixed;inset:0;z-index:70;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--pad) 3rem;overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .45s cubic-bezier(.16,.84,.34,1),visibility .45s}
body.menuoffen .mobilnav{transform:none;visibility:visible}
.mobilnav a{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.55rem,7.5vw,2.3rem);line-height:1.1;text-decoration:none;color:var(--ink);
  padding:.55rem 0;border-bottom:1px solid var(--rule);
  font-variation-settings:"opsz" 100,"SOFT" 30}
.mobilnav a[aria-current]{color:var(--ox)}
.mobilnav .unten{margin-top:2rem;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);display:flex;gap:1.4rem;flex-wrap:wrap}
.mobilnav .unten a{font-family:var(--sans);font-weight:500;font-size:.75rem;
  border:0;padding:0;letter-spacing:.14em;color:var(--mute)}
body.menuoffen{overflow:hidden}

@media(max-width:1080px){.menuknopf{display:block}.top .lang{display:none}}
@media(min-width:1081px){.mobilnav{display:none}}

/* Bild mit Unterschrift im Fließtext */
.artikel figure{margin:clamp(2rem,4vw,2.8rem) 0}
.artikel figure .shot{width:100%}
.artikel figcaption{margin-top:.75rem;font-size:.92rem;line-height:1.55;color:var(--mute);
  font-weight:300;padding-left:.9rem;border-left:2px solid var(--rule)}

/* Bildunterschrift in der Galerie */
.slide{margin:0}
.slide figcaption{margin-top:.8rem;font-size:.92rem;line-height:1.55;color:var(--mute);
  font-weight:300;max-width:62ch}

.bandbild figcaption{max-width:1320px;margin:.85rem auto 0;padding:0 var(--pad);
  font-size:.92rem;line-height:1.55;color:var(--mute);font-weight:300}