
@font-face { font-family:'Barlow Condensed'; src:url('fonts/BarlowCondensed-Black.woff2') format('woff2');
             font-weight:900; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');
             font-weight:800; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('fonts/BarlowCondensed-Medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('fonts/BarlowCondensed-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Rajdhani'; src:url('fonts/Rajdhani-Medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }
@font-face { font-family:'Rajdhani'; src:url('fonts/Rajdhani-SemiBold.woff2') format('woff2');
             font-weight:600; font-display:swap; }
@font-face { font-family:'RMME CNC'; src:url('fonts/RMME-CNC-Black.woff2') format('woff2');
             font-weight:900; font-display:swap; }

@font-face {
  font-family:'Barlow Ersatz';
  src:local('Arial Narrow'), local('Roboto Condensed'), local('Helvetica Neue Condensed'), local('Arial');
  size-adjust:82%; ascent-override:104%; descent-override:26%; line-gap-override:0%;
}
@font-face {
  font-family:'Rajdhani Ersatz';
  src:local('Arial'), local('Roboto');
  size-adjust:94%; ascent-override:100%; descent-override:24%; line-gap-override:0%;
}

:root {
  --grund:        #1A1A1A;
  --tiefe:        #2a2622;
  --text:         #f3ece2;
  --text-leise:   #b9b2a7;
  --metall:       #6e6a65;
  --signal:       #E30613;
  --signal-tief:  #8E0B0E;
  --amber:        #F3A13B;     --stahl:        #D9D4CC;   
    --oliv:        #758547;
  --oliv-linie:  #98AA5C;
  --oliv-tief:   #3A4429;
  --oliv-grund:  #252B1C;
  --oliv-hauch:  rgba(117,133,71,.10);

  --linie:       rgba(243,236,226,.12);
  --linie-stark: rgba(243,236,226,.22);

    --bildgrund:   #000;

  --font-display:'Barlow Condensed','Barlow Ersatz',system-ui,sans-serif;
  --font-text:   'Barlow Condensed','Barlow Ersatz',system-ui,sans-serif;
  --font-tech:   'Rajdhani','Rajdhani Ersatz',system-ui,sans-serif;
    --font-cnc:    'RMME CNC','Barlow Condensed','Barlow Ersatz',system-ui,sans-serif;

      --fs-riese:  clamp(2.75rem, 7vw, 5rem);
  --fs-gross:  clamp(2rem, 5.4vw, 3.5rem);
  --fs-mittel: clamp(1.5rem, 3.6vw, 2.25rem);
  --fs-klein:  clamp(1.2rem, 2.4vw, 1.6rem);
  --fs-vor:    clamp(1.1rem, 1.05rem + .5vw, 1.35rem);
  --fs-text:   1.0625rem;
  --fs-tech:   .78rem;

  --r1:.35rem; --r2:.6rem;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --breite: 72rem;
  --rand: clamp(1rem, 4vw, 2.5rem);

  --dur:.4s; --dur-kurz:.18s;
  --ease: cubic-bezier(.33,1,.68,1);
  --leiste-h: 3.75rem;
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html {
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overflow-x:clip;
}

body {
    background:#16130f;
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-text);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
    overflow-x:clip;
}

img { max-width:100%; height:auto; display:block; }

:target { scroll-margin-top:calc(var(--leiste-h) + var(--s2)); }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.sprungmarke {
  position:absolute; left:var(--s2); top:var(--s2); z-index:100;
  background:var(--signal); color:#fff;
  padding:.75rem 1.25rem; font-family:var(--font-tech); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  transform:translateY(-200%);
  transition:transform var(--dur-kurz) var(--ease);
}
.sprungmarke:focus { transform:none; }

.reissbrett {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
    transform:translateZ(0);
  overflow:hidden;
  background-color:#16130f;        background-image:
        radial-gradient(75% 45% at 50% -8%, rgba(243,161,59,.13), transparent 70%),
        linear-gradient(90deg, rgba(61,67,41,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,67,41,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,67,41,.55) 1px, transparent 1px),
        repeating-linear-gradient(0deg,  rgba(201,193,168,.028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(201,193,168,.028) 0 1px, transparent 1px 8px),
    radial-gradient(120% 120% at 50% 35%, var(--tiefe) 0%, #16130f 70%);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-position:50% 0, 12% 0, 50% 0, 88% 0, 0 0, 0 0, 50% 0;
  background-size:100% 100%, 1px 100%, 1px 100%, 1px 100%, 8px 8px, 8px 8px, 100% 100%;
}

.reissbrett__mono {
  position:absolute; right:-4%; bottom:-9%;
  width:min(52vw, 38rem); height:auto;
  opacity:.045;
}

.reissbrett__rand {
  position:absolute; top:50%;
  writing-mode:vertical-rl;
  font-family:var(--font-tech); font-weight:500;
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(179,171,152,.16);
  max-width:none;
}
.reissbrett__rand--l { left:.55rem;  transform:translateY(-50%) rotate(180deg); }
.reissbrett__rand--r { right:.55rem; transform:translateY(-50%); }
@media (max-width: 1100px) { .reissbrett__rand { display:none; } }

.reissbrett::after {
  content:''; position:absolute; inset:0; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
}
@media (max-width: 700px) {
    .reissbrett { background:
    repeating-linear-gradient(0deg, rgba(117,133,71,.04) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(117,133,71,.04) 0 1px, transparent 1px 44px),
    radial-gradient(140% 100% at 50% 0%, var(--tiefe) 0%, var(--grund) 62%); }
}

.titel {
  font-family:var(--font-cnc);
  font-weight:900;
  font-size:var(--fs-gross);
  line-height:1.02;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-wrap:balance;
  hyphens:manual;          }
.titel--gross  { font-size:var(--fs-riese); letter-spacing:.01em; }
.titel--klein  { font-size:var(--fs-mittel); }
.punkt { color:var(--signal); }

.werk-titel__eigenname {
  display:inline-block;
  font-size:var(--fs-mittel);
  letter-spacing:.01em;
  margin-top:.2em;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .titel--gross {
    background:linear-gradient(176deg, #fff8ef 0%, var(--stahl) 46%, #a9a196 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
    .titel--gross .punkt { -webkit-text-fill-color:var(--signal); color:var(--signal); }
    .titel--gross .werk-titel__eigenname {
    -webkit-text-fill-color:var(--oliv-linie); color:var(--oliv-linie);
  }
  .titel--gross .werk-titel__eigenname .punkt {
    -webkit-text-fill-color:var(--signal); color:var(--signal);
  }
}

.vorspann { font-size:var(--fs-vor); line-height:1.45; color:var(--text); max-width:42ch; }
p { max-width:66ch; }

.marke-zeile, .nachweis, .dauer, .station__nr, .fahrplan__nr,
.studie__stand, .meldung__datum, .meldung__kicker, .hinweis {
  font-family:var(--font-tech);
  font-size:var(--fs-tech);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.4;
}
.marke-zeile { color:var(--oliv-linie); }
.hinweis, .nachweis { color:var(--text-leise); letter-spacing:.1em; text-transform:none; }
.hinweis { max-width:60ch; }
.hinweis a { color:var(--text); text-decoration-color:var(--signal); text-decoration-thickness:2px;
             text-underline-offset:3px; }
.hinweis a:hover { text-decoration-thickness:3px; }

.schild {
  display:inline-flex; flex-wrap:wrap; align-items:stretch;
  font-family:var(--font-tech); font-size:var(--fs-tech); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; line-height:1;
  border:1px solid var(--linie); border-radius:var(--r1);
  overflow:hidden; max-width:100%;
}
.schild__feld {
  background:var(--oliv-tief); color:var(--text);
  padding:.45rem .6rem; white-space:nowrap;
}
.schild__wert {
  background:rgba(243,236,226,.05); color:var(--text);
  padding:.45rem .7rem;
}
.schild--offen { border-color:rgba(152,170,92,.55); }
.schild--offen .schild__wert::before {
  content:''; display:inline-block; vertical-align:middle;
  width:.42rem; height:.42rem; margin-right:.45rem;
  border-radius:50%; background:var(--oliv-linie);
}
.schild--zu { border-color:var(--linie); }
.schild--zu .schild__feld { background:rgba(110,106,101,.35); color:var(--text-leise); }
.schild--zu .schild__wert { color:var(--text-leise); }
.schild--marke .schild__feld { background:transparent; color:var(--oliv-linie);
                               border-right:1px solid var(--linie); }

.leiste {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:var(--s2);
  min-height:var(--leiste-h);
  padding:0 var(--rand);
  background:rgba(26,26,26,.92);
  border-bottom:1px solid var(--linie);
}
@supports (backdrop-filter: blur(6px)) {
    .leiste { background:rgba(26,26,26,.72); backdrop-filter:blur(8px); }
}

.leiste__marke {
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--text);
  padding:.5rem 0; margin-right:auto;
}
.leiste__marke img { width:2.2rem; height:auto; }   .leiste__wortmarke {
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.16em; font-size:.95rem;
}

.leiste__knopf {
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:2.75rem; padding:0 .75rem;     background:transparent; color:var(--text);
  border:1px solid var(--linie); border-radius:var(--r1);
  font-family:var(--font-tech); font-size:var(--fs-tech); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; cursor:pointer;
}
.leiste__kaefig { display:grid; gap:3px; width:1rem; }
.leiste__kaefig i {
  display:block; height:2px; background:currentColor;
  transition:transform var(--dur-kurz) var(--ease), opacity var(--dur-kurz) var(--ease);
}
.leiste.ist-offen .leiste__kaefig i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.leiste.ist-offen .leiste__kaefig i:nth-child(2) { opacity:0; }
.leiste.ist-offen .leiste__kaefig i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

.leiste__menue { display:none; }
.leiste.ist-offen .leiste__menue {
  display:flex; flex-direction:column;
  position:absolute; left:0; right:0; top:100%;
  background:var(--grund); border-bottom:1px solid var(--linie);
  padding:var(--s2) var(--rand) var(--s3);
  max-height:calc(100svh - var(--leiste-h)); overflow-y:auto;
  overscroll-behavior:contain;
}
.leiste__menue a {
  color:var(--text); text-decoration:none;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; font-size:1.05rem;
  padding:.85rem 0;                          border-bottom:1px solid var(--linie);
}
.leiste__menue a:last-child { border-bottom:0; }
.leiste__menue a:hover, .leiste__menue a:focus-visible {
  border-left:3px solid var(--signal); padding-left:.6rem;
}
.leiste__cta { border-left:3px solid var(--signal); padding-left:.6rem; }

@media (min-width: 861px) {
  .leiste__knopf { display:none; }
  .leiste__menue {
    display:flex; position:static; flex-direction:row; align-items:center;
    gap:var(--s3); padding:0; background:none; border:0; max-height:none; overflow:visible;
  }
  .leiste__menue a { border:0; padding:.4rem 0; font-size:.9rem; position:relative; }
  .leiste__menue a::after {
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--signal); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur-kurz) var(--ease);
  }
  .leiste__menue a:hover::after, .leiste__menue a:focus-visible::after { transform:scaleX(1); }
    .leiste__cta {
    border:1px solid var(--signal); border-radius:var(--r1);
    padding:.5rem .9rem !important;
  }
  .leiste__cta::after { content:none; }
  .leiste__cta:hover { background:var(--signal); color:#fff; }
}

.hero              { padding:var(--s4) var(--rand) var(--s3); }
.hero .typenschild { max-width:var(--breite); margin-inline:auto; }
.hero__vorspann { max-width:var(--breite); margin-inline:auto;
                  color:var(--text-leise); margin-top:var(--s3); }

.sprungnav { padding:var(--s3) var(--rand) var(--s4); }
.sprungnav .wege { max-width:var(--breite); margin-inline:auto; }

.wege { display:grid; gap:.5rem; width:100%; }
.weg {
  display:grid; gap:.1rem;
  padding:.7rem .9rem;
  text-decoration:none; color:var(--text);
  background:rgba(37,43,28,.55);
  border:1px solid var(--linie); border-left:3px solid var(--metall);
  border-radius:var(--r1);
  transition:border-left-color var(--dur-kurz) var(--ease),
             background var(--dur-kurz) var(--ease),
             transform var(--dur-kurz) var(--ease);
}
.weg__was  { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
             letter-spacing:.08em; font-size:1.05rem; }
.weg__dazu { font-family:var(--font-tech); font-size:var(--fs-tech); color:var(--text-leise);
             letter-spacing:.08em; }
.weg--haupt .weg__was { font-size:1.15rem; }
.weg--aktiv { border-left-color:var(--signal); }
.weg:hover, .weg:focus-visible, .weg:active {
  background:rgba(227,6,19,.09); border-left-color:var(--signal); transform:translateX(3px);
}

.typenschild {
  position:relative; isolation:isolate;
  border:1px solid var(--linie-stark); border-radius:var(--r2);
  overflow:hidden; background:var(--tiefe);
}
.typenschild__rahmen { position:relative; display:block; }
.typenschild__bild { width:100%; aspect-ratio:4/3; object-fit:cover;
                     object-position:30% center;
                     filter:saturate(.94) contrast(1.03); }

.typenschild__blech {
  display:none;
  position:absolute; z-index:3; right:0; bottom:0; top:auto;
  width:max-content; max-width:58%;
  gap:.5rem; justify-items:end; text-align:right;
  padding:0 var(--s2) var(--s2) var(--s3);
  pointer-events:none;
}
.typenschild__monogramm {
  width:2.6rem; height:auto;     filter:drop-shadow(0 2px 5px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(0,0,0,.6));
}
.typenschild__wortmarke {
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.16em; font-size:.8rem; line-height:1.45;
  text-shadow:0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6);
}
.typenschild__wortmarke span { color:var(--oliv-linie); }
.typenschild__motto {
  margin-top:.3rem;
  text-shadow:0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6);
}
.nachweis--bild {
  position:absolute; z-index:3; left:.6rem; bottom:.6rem; right:auto;
  max-width:6.5rem;
  padding:.32rem .6rem;
  background:rgba(20,20,20,.82);
  border:1px solid var(--linie);
  border-radius:var(--r1);
    font-size:var(--fs-tech);
}

.typenschild__claim {
  display:grid; gap:var(--s2); justify-items:start;
  padding:var(--s3) var(--s3) var(--s4);
}
.typenschild__claim .marke-zeile { margin-bottom:calc(var(--s1) - var(--s3)); }

@media (min-width: 900px) {
  .hero      { padding:var(--s5) var(--rand) var(--s4); }
  .sprungnav { padding:var(--s3) var(--rand) var(--s5); }
  .wege      { max-width:32rem; }

    .typenschild__bild { aspect-ratio:16/9; object-position:center; }

    .typenschild__blech {
        display:grid;
    top:0; bottom:auto;
    max-width:none; width:auto;
    justify-items:start; text-align:left;
    gap:.9rem;
    padding:var(--s4) var(--s4) 0 3.5rem;
  }
  .typenschild__monogramm { width:5.2rem; }     .typenschild__wortmarke { font-size:1.35rem; }
    .nachweis--bild { max-width:16rem; padding:.4rem var(--s2); }

    .typenschild__claim {
    position:absolute; z-index:2; inset:0 auto 0 0;
    max-width:26rem;
    align-content:center;
    padding:var(--s4) var(--s5) var(--s4) var(--s4);
    background:linear-gradient(90deg,
      rgba(20,20,20,.82) 0%, rgba(20,20,20,.6) 65%, rgba(20,20,20,0) 100%);
  }
}

@media (min-width: 900px) and (max-height: 850px) {
  .hero { padding:var(--s3) var(--rand) var(--s2); }
  .typenschild__claim { gap:var(--s2); }
  .titel--gross { font-size:clamp(2.5rem, 4.6vw, 3.6rem); }
  .weg { padding:.6rem .9rem; }
}

@media (min-width: 1024px) {
    .wege { max-width:none; gap:var(--s2);
          grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); }
}

.manifest {
  width:min(100% - var(--rand) * 2, var(--breite)); margin-inline:auto;
  padding-block:var(--s4);
  display:grid; gap:var(--s2); justify-items:start;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
}
.manifest__text { font-size:var(--fs-vor); }
.formel {
  font-family:var(--font-cnc); font-weight:900; text-transform:uppercase;
  font-size:var(--fs-klein); letter-spacing:.06em; line-height:1.2;
  color:var(--text); max-width:none;
}

.sektion { padding:var(--s5) var(--rand); }
.blatt {
  position:relative;
  max-width:var(--breite); margin-inline:auto;
  padding:var(--s4) var(--s3);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(243,236,226,.045), transparent 62%),
    linear-gradient(180deg, #23201d, #1d1a18);
  border:1px solid var(--linie);
  border-radius:var(--r2);
  box-shadow:0 18px 44px rgba(0,0,0,.35);     display:grid; gap:var(--s3);
}
.blatt--voll { padding:var(--s4) var(--s3) var(--s5); gap:var(--s4); }
.blatt--schmal { gap:var(--s2); }

@media (min-width: 700px) {
  .blatt { padding:var(--s4); }
  .blatt--voll { padding:var(--s5) var(--s4); }
}

.blatt__kopf {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding-bottom:var(--s2); border-bottom:1px solid var(--linie);
}
.blatt__siegel { width:3rem; height:auto; opacity:.75; }

.nieten, .zirkel { position:absolute; inset:.55rem; pointer-events:none; }
.nieten i {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #8d8880, #4a4640 60%, #2b2825);
  box-shadow:0 1px 1px rgba(0,0,0,.6);
}
.nieten i:nth-child(1){ left:0; top:0; }
.nieten i:nth-child(2){ right:0; top:0; }
.nieten i:nth-child(3){ left:0; bottom:0; }
.nieten i:nth-child(4){ right:0; bottom:0; }
.zirkel i { position:absolute; width:1.8rem; height:1.8rem;
            border:1px solid rgba(152,170,92,.42); }
.zirkel i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.zirkel i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
.zirkel i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
.zirkel i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }

.werk__einstieg { display:grid; gap:var(--s3); }
.werk__wort { display:grid; gap:var(--s2); justify-items:start; }
.werk__bild { border:1px solid var(--linie); border-radius:var(--r1); overflow:hidden;
              background:var(--grund); }
.werk__bild img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.werk__bild .nachweis { padding:.5rem .75rem; border-top:1px solid var(--linie); }

@media (min-width: 900px) {
  .werk__einstieg { grid-template-columns:1fr 1.15fr; align-items:start; gap:var(--s4); }
}

.daten {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2);
  width:100%; padding:var(--s2) 0; border-top:1px solid var(--linie);
}
.daten > div { min-width:0; }
.daten dt { font-family:var(--font-tech); font-size:var(--fs-tech); letter-spacing:.14em;
            text-transform:uppercase; color:var(--text-leise); }
.daten dd { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
            letter-spacing:.06em; font-size:1.05rem; overflow-wrap:break-word; }

.strecke { display:grid; gap:var(--s3); }
.strecke__kopf { display:grid; gap:.35rem; }
.strecke__kopf .vorspann { margin-top:.85rem; }

.stationen {
  list-style:none; padding:0 0 var(--s1); margin:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:var(--s2);
  overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    margin-inline:calc(var(--s3) * -1); padding-inline:var(--s3);

    scrollbar-width:thin;
  scrollbar-color:var(--signal) rgba(0,0,0,.45);
}
.stationen::-webkit-scrollbar { height:9px; }
.stationen::-webkit-scrollbar-track {
  background:rgba(0,0,0,.45); border-radius:99px;
}
.stationen::-webkit-scrollbar-thumb {
  background:var(--signal); border-radius:99px;
}
.stationen::-webkit-scrollbar-thumb:hover { background:var(--signal-tief); }
.stationen:focus-visible { outline-offset:1px; }
.station { scroll-snap-align:start; display:grid; gap:0; }
.station__bild { border:1px solid var(--linie); border-bottom:0;
                 border-radius:var(--r1) var(--r1) 0 0; overflow:hidden; }
.station__bild img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.station__wort {
  display:grid; gap:.35rem; padding:var(--s2);
  background:rgba(243,236,226,.04);
  border:1px solid var(--linie); border-radius:0 0 var(--r1) var(--r1);
  height:100%;
}
.station__nr { color:var(--oliv-linie); }
.station__wort h4 {
  font-family:var(--font-cnc); font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.15rem; line-height:1.1;
}
.station__wort p { font-size:.95rem; }
.strecke__wisch { font-family:var(--font-tech); font-size:var(--fs-tech);
                  letter-spacing:.12em; color:var(--text-leise); text-transform:uppercase; }

@media (min-width: 900px) {
  .stationen { grid-auto-flow:row; grid-template-columns:repeat(5, minmax(0,1fr));
               overflow:visible; margin-inline:0; padding-inline:0; }
  .strecke__wisch { display:none; }
}

.filmzeile {
  display:grid; gap:var(--s2);
  text-decoration:none; color:var(--text);
  padding:var(--s2);
  background:rgba(243,236,226,.035);
  border:1px solid var(--linie); border-radius:var(--r1);
  transition:background var(--dur-kurz) var(--ease), border-color var(--dur-kurz) var(--ease);
}
.filmzeile:hover, .filmzeile:focus-visible { background:rgba(243,236,226,.07); border-color:var(--linie-stark); }
.filmzeile__bild { position:relative; border-radius:var(--r1); overflow:hidden; }
.filmzeile__bild img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.filmzeile__wort { display:grid; gap:.5rem; justify-items:start; }
.filmzeile__cta {
  font-family:var(--font-tech); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:var(--fs-tech); color:var(--text);
  border-bottom:2px solid var(--signal); padding-bottom:2px;
}
.dauer {
  position:absolute; right:.5rem; bottom:.5rem;
  background:rgba(0,0,0,.78); color:var(--text);
  padding:.2rem .45rem; border-radius:var(--r1);
  font-family:var(--font-tech); font-size:.72rem; letter-spacing:.08em;
}
.filmkarte__nr {
  position:absolute; left:.5rem; top:.5rem;
  background:rgba(0,0,0,.78); color:var(--text);
  padding:.2rem .45rem; border-radius:var(--r1);
  font-family:var(--font-tech); font-size:.72rem; letter-spacing:.08em;
}
@media (min-width: 700px) {
  .filmzeile { grid-template-columns:20rem 1fr; align-items:center; gap:var(--s3); padding:var(--s3); }
}

.stand {
  display:grid; gap:var(--s2); justify-items:start;
  padding:var(--s3); border-radius:var(--r1);
  background:
    linear-gradient(180deg, rgba(117,133,71,.07), rgba(117,133,71,.02)),
    linear-gradient(180deg, #23201d, #1d1a18);
  border:1px solid var(--linie);
  border-left:3px solid var(--oliv);
}
.stand .marke-zeile { color:var(--oliv-linie); }
.satz {
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-klein); line-height:1.15; letter-spacing:.04em;
  border-left:3px solid var(--signal); padding-left:var(--s2); max-width:34ch;
}
.stand__fahrplan-titel { margin-top:var(--s1); }
.fahrplan {
  list-style:none; padding:0; margin:0; width:100%;
  display:grid; gap:.5rem;
}
.fahrplan li {
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:1rem;
  padding:.6rem .75rem;
  background:rgba(0,0,0,.25); border-radius:var(--r1);
  border-left:2px solid var(--linie);
}
.fahrplan__nr { color:var(--oliv-linie); font-family:var(--font-tech); font-weight:600; }
@media (min-width: 700px) {
  .stand { padding:var(--s4); }
  .fahrplan { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .fahrplan li { flex-direction:column; align-items:flex-start; gap:.35rem; font-size:.92rem; }
}

.filme__einstieg { display:grid; gap:var(--s3); }
.filme__einstieg > div { display:grid; gap:var(--s2); justify-items:start; }
.kanal { border:1px solid var(--linie); border-radius:var(--r1); overflow:hidden; }
.kanal > img { width:100%; aspect-ratio:1546/423; object-fit:cover; }
.kanal figcaption {
  display:grid; padding:.7rem .8rem;
  grid-template-columns:auto 1fr;
  grid-template-areas:"mono name" "mono handle";
  column-gap:.7rem; row-gap:.15rem; align-items:center;
  background:var(--oliv-grund); border-top:1px solid rgba(152,170,92,.28);
}
.kanal__mono { grid-area:mono; width:1.45rem; height:auto; align-self:center; }
.kanal__name { grid-area:name;
               font-family:var(--font-display); font-weight:800; text-transform:uppercase;
               letter-spacing:.08em; font-size:.9rem; line-height:1.2; }
.kanal__handle { grid-area:handle;
                 font-family:var(--font-tech); font-size:var(--fs-tech); letter-spacing:.1em;
                 color:var(--text-leise); }
@media (min-width: 900px) { .filme__einstieg { grid-template-columns:1fr 2fr; align-items:center; gap:var(--s4); } }

.filmliste { list-style:none; padding:0; margin:0; display:grid; gap:var(--s2); }
@media (min-width: 560px) { .filmliste { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .filmliste { grid-template-columns:repeat(3, minmax(0,1fr)); } }

.filmkarte {
  display:grid; gap:.5rem; height:100%;
  text-decoration:none; color:var(--text);
  padding-bottom:var(--s2);
  border:1px solid var(--linie); border-radius:var(--r1); overflow:hidden;
  background:rgba(117,133,71,.07);
  transition:border-color var(--dur-kurz) var(--ease), background var(--dur-kurz) var(--ease);
}
.filmkarte:hover, .filmkarte:focus-visible { border-color:var(--signal); background:rgba(117,133,71,.14); }
.filmkarte__bild { position:relative; }
.filmkarte__bild img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.filmkarte strong {
  font-family:var(--font-cnc); font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.05rem; line-height:1.1; padding:0 var(--s2);
}
.filmkarte p { font-size:.95rem; padding:0 var(--s2); color:var(--text-leise); }
.pfeil { color:var(--signal); }

.werkzeuge { display:grid; gap:var(--s2); }
@media (min-width: 780px) { .werkzeuge { grid-template-columns:repeat(2, minmax(0,1fr)); } }

.werkzeug {
  display:grid; gap:var(--s2); justify-items:start; align-content:start;
  padding:var(--s3);
  border:1px solid var(--linie); border-radius:var(--r1);
  background:rgba(243,236,226,.03);
  text-decoration:none; color:var(--text);
}
.werkzeug--offen { border-color:rgba(152,170,92,.42); background:rgba(117,133,71,.07); }
.werkzeug--offen:hover, .werkzeug--offen:focus-visible {
  border-color:var(--signal); background:rgba(243,236,226,.07);
}
.werkzeug--zu { background:rgba(243,236,226,.015); }
.werkzeug--zu .titel, .werkzeug--zu > p { color:var(--text-leise); }
.werkzeug__cta, .melden-cta {
  font-family:var(--font-tech); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:var(--fs-tech); color:var(--text);
  border-bottom:2px solid var(--signal); padding-bottom:2px;
  text-decoration:none; min-height:2.75rem; display:inline-flex; align-items:center;
  align-self:start;
}
.werkzeug__cta:hover, .werkzeug__cta:focus-visible,
.melden-cta:hover, .melden-cta:focus-visible { color:var(--text); border-bottom-width:3px; }
.ausblick {
  display:grid; gap:.5rem;
  padding:var(--s3); border-left:3px solid var(--oliv); border-radius:var(--r1);
  background:rgba(243,236,226,.025);
}
.stand .ausblick { padding:0; border-left:0; background:none; border-radius:0; }

.merch__einstieg { display:grid; gap:var(--s3); justify-items:start; }
.merch__einstieg > div { display:grid; gap:var(--s2); justify-items:start; }
.merch__emblem { width:8rem; height:auto; }
@media (min-width: 780px) {
  .merch__einstieg { grid-template-columns:12rem 1fr; align-items:center; gap:var(--s4); }
  .merch__emblem { width:100%; }
}

.studien { list-style:none; padding:0; margin:0; display:grid; gap:var(--s2);
           grid-template-columns:repeat(2, minmax(0,1fr)); }

.studie {
  display:grid; gap:.4rem; align-content:start;
  padding-bottom:var(--s2);
  border:1px solid var(--linie); border-radius:var(--r1); overflow:hidden;
  background:rgba(243,236,226,.03);
}
.studie__bild img { width:100%; aspect-ratio:8/5; object-fit:cover; }
.studie h3 {
  font-family:var(--font-cnc); font-weight:900; text-transform:uppercase;
  letter-spacing:.05em; font-size:1rem; line-height:1.1; padding:0 .75rem;
  hyphens:manual; overflow-wrap:break-word;
}
.studie p { font-size:.9rem; padding:0 .75rem; color:var(--text-leise); }
.studie .studie__stand {
  justify-self:start; margin:0 .75rem;
  padding:.32rem .6rem; border:1px solid rgba(152,170,92,.3); border-radius:var(--r1);
  background:var(--oliv-tief);
  color:var(--text); letter-spacing:.1em;
}
.studie .nachweis { padding:0 .75rem; font-size:var(--fs-tech); }

.stempel {
  position:absolute; z-index:4; margin:0;
    pointer-events:none;
}
.stempel {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,1))
    drop-shadow(0 0 2px rgba(0,0,0,1))
    drop-shadow(0 0 4px rgba(0,0,0,var(--saum, .9)));
}
.stempel__tinte {
  position:relative; display:block;
  color:var(--signal);
  border:.22em solid currentColor; border-radius:.05em;
  padding:.26em .55em;
  text-align:center;
  font-family:var(--font-cnc); font-weight:900; text-transform:uppercase;
  letter-spacing:.1em; line-height:1;
      -webkit-mask-image:url('bilder/stempel-tinte-800.webp');
          mask-image:url('bilder/stempel-tinte-800.webp');
    -webkit-mask-size:var(--tinte-groesse, 100% auto);
          mask-size:var(--tinte-groesse, 100% auto);
  -webkit-mask-position:var(--tinte-lage, 50% 30%);
          mask-position:var(--tinte-lage, 50% 30%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.stempel__tinte::before {
  content:""; position:absolute; inset:.22em;
  border:.07em solid currentColor; border-radius:.03em;
}

.stempel--merch {
    --tinte-groesse:118% auto;
  --tinte-lage:46% 62%;
    top:63%; left:50%; width:92%;
  transform:translate(-50%, -50%) rotate(-5.5deg);
  font-size:clamp(1.3rem, 8.5vw, 5.5rem);
}
.stempel--werkzeug {
    position:static;
  justify-self:end;
    margin:.15rem -.9rem .2rem 0;
    --saum:.35;
    --tinte-groesse:130% auto;
  --tinte-lage:30% 66%;
  transform:rotate(-8deg);
    font-size:clamp(1.2rem, 3.4vw, 1.65rem);
}
@media (max-width: 779px) {
  .stempel--werkzeug { margin-right:.2rem; }
}
.werkzeug--zu { position:relative; overflow:hidden; }

.merch__kacheln { position:relative; }
.studien { filter:grayscale(1) contrast(.88) brightness(.6); }

.abschluss { display:grid; gap:var(--s3); max-width:var(--breite); margin-inline:auto; }
@media (min-width: 1200px) {
  .abschluss { grid-template-columns:26rem minmax(0,1fr); align-items:start; }
}
.abschluss .blatt { max-width:none; }

.postform { display:grid; gap:var(--s2); width:100%; }
.postform__feld {
  min-height:2.75rem; padding:0 .75rem;
  background:rgba(0,0,0,.3); color:var(--text);
  border:1px solid var(--linie); border-radius:var(--r1);
  font-family:var(--font-text); font-size:1rem;
}
.postform__feld[aria-disabled="true"] { cursor:not-allowed; color:var(--text-leise); }
.postform__feld::placeholder { color:var(--text-leise); opacity:1; }
@media (min-width: 480px) {
  .postform { grid-template-columns:1fr auto; }
  .postform__falle, .postform__themen, .postform__einwilligung, .postform__status {
    grid-column:1 / -1;
  }
}

.postform__falle { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.postform__themen {
  border:1px solid var(--linie); border-radius:var(--r1);
  padding:var(--s2); display:grid; gap:.5rem;
}
.postform__themen legend {
  padding:0 .3rem; color:var(--text-leise); letter-spacing:.1em;
  font-family:var(--font-tech); font-size:var(--fs-tech); text-transform:uppercase;
}
.postform__themen label { display:flex; align-items:start; gap:.5rem; font-size:.95rem; }
.postform__themen input, .postform__einwilligung input { accent-color:var(--signal); margin-top:.2rem; }

.postform__einwilligung {
  display:flex; align-items:start; gap:.5rem;
  font-size:.85rem; color:var(--text-leise); line-height:1.4;
}
.postform__einwilligung a {
  color:var(--text); text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:3px;
}

.postform__status {
  min-height:1.3em; font-family:var(--font-tech); font-size:var(--fs-tech); letter-spacing:.05em;
}
.postform__status--ok { color:var(--oliv-linie); }
.postform__status--fehler { color:var(--signal); }

.knopf {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:2.75rem; padding:0 1.25rem;
  background:var(--signal); color:#fff; text-decoration:none;
  border:1px solid var(--signal); border-radius:var(--r1);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; font-size:.9rem; cursor:pointer;
  transition:background var(--dur-kurz) var(--ease);
}
.knopf:hover { background:var(--signal-tief); border-color:var(--signal-tief); }
.knopf--aus {
  background:transparent; color:var(--text-leise); border-color:var(--linie);
  cursor:not-allowed;
}
.knopf--extern {
  background:transparent; color:var(--text); border-color:var(--signal);
}
.knopf--extern:hover { background:rgba(227,6,19,.14); border-color:var(--signal); }

.meldung {
  display:grid; gap:0;
  max-width:46rem;
  border:1px solid var(--linie); border-radius:var(--r1);
  overflow:hidden;                  }
@media (min-width: 700px) {
  .meldung { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
  .meldung--leer { grid-template-columns:1fr; }
}
.meldung--leer { color:var(--text-leise); border-style:dashed; padding:var(--s2); gap:.35rem; }
.meldung h3 { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
              letter-spacing:.05em; font-size:1.1rem; line-height:1.15; color:var(--text); }
.meldung__kicker { color:var(--oliv-linie); }
.meldung__bild {
  display:flex; align-items:center; justify-content:center;
  background:var(--bildgrund); overflow:hidden;
}
.meldung__bild img {
  display:block; width:100%; height:auto;
  max-height:28rem; object-fit:contain;
}
.meldung__text { display:grid; gap:.35rem; padding:var(--s2); align-content:start; }
.meldung__text a { color:var(--text); text-decoration-color:var(--signal);
                   text-decoration-thickness:2px; text-underline-offset:3px; }
.meldung__text a:hover { text-decoration-thickness:3px; }
.meldung__zwischentitel { font-family:var(--font-tech); font-weight:600;
                          color:var(--text); margin-top:.4rem; }

.fuss {
  border-top:1px solid var(--linie);
  padding-block:var(--s4);
  display:grid; gap:var(--s3);
  width:min(100% - var(--rand) * 2, var(--breite)); margin-inline:auto;
}
.fuss__marke { display:flex; align-items:center; gap:var(--s2); }
.fuss__marke img { width:3rem; height:auto; opacity:.8; }
.fuss__wege, .fuss__recht { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); }
.fuss a {
  color:var(--text); text-decoration:none;
  font-family:var(--font-tech); font-size:var(--fs-tech); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
  min-height:2.75rem; display:inline-flex; align-items:center;     border-bottom:2px solid transparent;
}
.fuss a:hover, .fuss a:focus-visible { border-bottom-color:var(--signal); }
.fuss__recht a { color:var(--text-leise); }
.fuss__sicherheitshinweis { max-width:none; }
@media (min-width: 780px) {
  .fuss { grid-template-columns:1fr auto; align-items:center; }
  .fuss__recht { grid-column:1 / -1; padding-top:var(--s2); border-top:1px solid var(--linie); }
  .fuss__sicherheitshinweis { grid-column:1 / -1; }
}

.bewegt .tritt-ein { opacity:0; transform:translateY(14px); }
.bewegt .tritt-ein.ist-da {
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .bewegt .tritt-ein, .bewegt .tritt-ein.ist-da { opacity:1 !important; transform:none !important; transition:none !important; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --text-leise:#ddd6cb; --linie:rgba(243,236,226,.3); --linie-stark:rgba(243,236,226,.45); }
}
