/* 04 · Abflugtafel – Fallblattanzeige: Big Shoulders Display + JetBrains Mono */
:root{
  --bg:#121314;
  --bg-2:#18191b;
  --panel:#1c1d20;
  --tile-a:#2c2d31;
  --tile-b:#222326;
  --seam:#0b0c0d;
  --line:#2c2e32;
  --yellow:#ffcf3f;
  --white:#f1efe7;
  --grey:#a3a6ad;
  --green:#3ddc84;
  --orange:#ff9f43;
  --disp:'Big Shoulders Display', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --mono:'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --wrap:1320px;
  --gut:clamp(16px, 3.5vw, 40px);
  --sec:clamp(88px, 10vw, 150px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--white);font:400 .98rem/1.65 var(--mono);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:#000;padding:10px 16px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.dim{color:var(--grey)}
.yel{color:var(--yellow)}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(18,19,20,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:24px;height:76px}
.brand img{height:56px;width:auto}
.clock{font:500 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:4px}
.clock time{color:var(--yellow);font-weight:700;font-size:.95rem;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.nav{display:flex;align-items:center;justify-content:space-between;flex:1;gap:24px}
.nav ul{display:flex;gap:4px;margin-left:auto}
.nav ul a{display:block;font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 12px;border-radius:4px;color:var(--white)}
.nav ul a:hover{background:var(--yellow);color:#111}
.nav-meta{display:flex;align-items:center;gap:10px}
.nav-phone{font:700 .85rem/1 var(--mono);text-decoration:none;color:var(--yellow);padding:12px 4px;letter-spacing:.04em}
.nav-phone:hover{text-decoration:underline}
.lang{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:4px;background:var(--tile-a);font:800 1.05rem/1 var(--disp);letter-spacing:.08em;text-decoration:none;color:var(--yellow);box-shadow:inset 0 -21px 0 var(--tile-b),inset 0 -22px 0 var(--seam)}
.lang:hover{background:var(--yellow);color:#111;box-shadow:none}
.menu-btn{display:none}

/* ---------- Schilder ---------- */
.sign{display:inline-flex;align-items:center;gap:12px;background:var(--yellow);color:#111;font:800 1.15rem/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:9px 14px 8px;border-radius:3px}
.pict{width:20px;height:20px}
.sign-sm{font-size:1rem;margin-bottom:26px}
.arrow{font:700 1.1rem/1 var(--mono)}
.h2{font:800 clamp(2.4rem,4.8vw,4.2rem)/.98 var(--disp);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.lead{color:#cfd0d3;max-width:60ch;margin-top:22px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font:700 .82rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:4px;transition:background .15s,color .15s,box-shadow .15s}
.btn-yellow{background:var(--yellow);color:#111}
.btn-yellow:hover{background:#fff}
.btn-line{color:var(--white);box-shadow:inset 0 0 0 1.5px #55585f}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--yellow);color:var(--yellow)}

/* ---------- Tafel ---------- */
.board{background:var(--panel);border:1px solid #2a2c30;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);position:relative}
.board-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;padding-bottom:clamp(20px,3vh,32px);margin-bottom:clamp(20px,3vh,32px);border-bottom:1px solid var(--line)}
.kicker{font:500 .8rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.board-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--line);font:800 1.35rem/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.board-cap .dim{font:500 .72rem/1.3 var(--mono);letter-spacing:.14em;text-align:right}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(20px,3vh,40px) clamp(56px,7vw,96px)}
.hero-board{padding:clamp(20px,3.2vh,36px) clamp(20px,3vw,44px) clamp(24px,3.4vh,40px);background:
  radial-gradient(120% 80% at 50% 0%,rgba(255,207,63,.05),transparent 60%),var(--panel)}
.flap{--ts:clamp(26px,calc((100vw - 2 * var(--gut) - 90px) / 13),72px);font:800 var(--ts)/1.12 var(--disp);text-transform:uppercase;color:var(--yellow);letter-spacing:.06em;max-width:none}
.flap.is-tiled{line-height:1.32;letter-spacing:0;display:flex;flex-wrap:wrap;column-gap:.42em;row-gap:.16em}
.w{display:inline-flex;gap:.07em;white-space:nowrap}
.t{position:relative;display:inline-block;width:.74em;height:1.14em;line-height:1.14em;text-align:center;border-radius:.07em;background:linear-gradient(180deg,var(--tile-a) 0 50%,var(--tile-b) 50% 100%);box-shadow:0 .04em .06em rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;perspective:200px}
.t::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--seam);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.t::before{content:"";position:absolute;top:50%;left:-1px;width:3px;height:.18em;margin-top:-.09em;background:#3a3c40;border-radius:1px;box-shadow:calc(.74em - 1px) 0 0 #3a3c40}
.c{display:block;transform-origin:50% 50%}
.c.flip{animation:flip .09s linear}
@keyframes flip{0%{transform:scaleY(1)}50%{transform:scaleY(.15);filter:brightness(.6)}100%{transform:scaleY(1)}}
@keyframes flip2{0%{transform:scaleY(1)}50%{transform:scaleY(.15);filter:brightness(.6)}100%{transform:scaleY(1)}}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(22px,3.4vh,40px);padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--line)}
.hero-text{color:#d6d7da;max-width:62ch;font-size:.95rem}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.status-line{display:block;margin-top:18px;font:500 .78rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.led{display:inline-block;margin-right:10px;vertical-align:1px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,220,132,.15),0 0 12px rgba(61,220,132,.6);flex:none}
.js .status-line .led{animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Abschnitte ---------- */
.sec{padding-block:0 var(--sec)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.sec-head .sign{grid-column:1/-1;justify-self:start}
.sec-head .lead{margin-top:0}
.sec-head-inline{grid-template-columns:1fr}

.row{display:grid;grid-template-columns:4.5rem minmax(0,1.1fr) minmax(0,1.6fr) 9.5rem;gap:clamp(14px,2vw,28px);align-items:center;padding:18px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--line)}
.rows .row:last-child{border-bottom:0}
.rows .row:nth-child(even){background:rgba(255,255,255,.015)}
.row-head{padding-block:12px;font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);background:var(--bg-2)}
.no,.gate{font:800 1.5rem/1 var(--disp);color:var(--white);letter-spacing:.06em}
.gate{display:inline-flex;gap:3px}
.dest{font:800 clamp(1.45rem,2.1vw,1.95rem)/1.05 var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--yellow)}
.rem{color:#c9cace;font-size:.88rem;line-height:1.55}
.st{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:700 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 9px;border-radius:3px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-ok{color:var(--green);background:rgba(61,220,132,.1)}
.st-warn{color:var(--orange);background:rgba(255,159,67,.12)}
.st-board{color:#111;background:var(--yellow)}
.js .st-board::before{animation:blink 1s steps(2,jump-none) infinite}
.st-ex{color:var(--yellow);background:rgba(255,207,63,.1)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:clamp(40px,5vw,64px)}
.stats div{background:var(--panel);border:1px solid #2a2c30;border-radius:10px;padding:24px clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:16px}
.tiles{font:800 clamp(2.4rem,3.6vw,3.2rem)/1 var(--disp);color:var(--yellow);text-transform:uppercase}
.tiles.is-tiled{display:flex;gap:.07em;flex-wrap:wrap}
.tiles .w{gap:.07em}
.tiles.is-tiled{column-gap:.3em}
.stats dd{font:500 .76rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c9cace}

.tag-ex{font:700 .72rem/1 var(--mono);letter-spacing:.16em;background:var(--yellow);color:#111;padding:7px 9px;border-radius:3px}
.seg-row{grid-template-columns:5rem 1fr 1fr 1.3fr 10rem}
.code{font:800 clamp(1.8rem,2.8vw,2.5rem)/1 var(--disp);letter-spacing:.08em;color:var(--white)}
.mode{font:500 .82rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c9cace}
.board-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding:16px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font-size:.85rem;background:var(--bg-2);border-radius:0 0 10px 10px}

.svc-row{grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1.6fr) 9.5rem}
.svc-row:not(.row-head):hover{background:rgba(255,207,63,.06)}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #2a2c30;border-radius:10px;background:var(--panel);overflow:hidden}
.steps li{padding:28px clamp(18px,2.2vw,28px) 30px;position:relative}
.steps li + li{border-left:1px solid var(--line)}
.steps li + li::before{content:"";position:absolute;left:-7px;top:46px;width:12px;height:12px;background:var(--panel);border-top:1px solid var(--yellow);border-right:1px solid var(--yellow);transform:rotate(45deg)}
.step-no{font-size:2.6rem;margin-bottom:22px}
.steps h3{font:800 1.7rem/1 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.steps p{color:#c9cace;margin-top:10px;font-size:.88rem}

/* ---------- Über uns ---------- */
.about-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.about-media{margin:0;padding:12px;background:var(--panel);border:1px solid #2a2c30;border-radius:10px;position:relative}
.about-media::after{content:"";position:absolute;inset:12px;border-radius:4px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);pointer-events:none}
.about-media img{border-radius:4px;width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.75) contrast(1.05)}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:32px}
.feats .led{margin-right:0}
.feats li{display:flex;align-items:center;gap:12px;font:500 .8rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:14px 16px;background:var(--panel);border:1px solid #2a2c30;border-radius:6px}

/* ---------- Kontakt / Info-Schalter ---------- */
.desk{border-radius:10px;overflow:hidden;border:1px solid #2a2c30;background:var(--panel)}
.desk-sign{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px);background:var(--yellow);color:#111;padding:clamp(18px,2.6vw,28px) clamp(18px,3vw,40px)}
.info-i{flex:none;display:grid;place-items:center;width:clamp(60px,7vw,92px);aspect-ratio:1;border-radius:10px;background:#111;color:var(--yellow);font:900 clamp(2.6rem,4.4vw,4rem)/1 var(--disp)}
.desk-label{font:700 .74rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.desk-sign .h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.desk-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,3.4vw,44px) clamp(18px,3vw,40px)}
.desk-intro .lead{margin:0 0 28px}
.desk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:6px}
.desk-grid div{padding:18px 18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.desk-grid div:nth-child(3n){border-right:0}
.desk-grid div:nth-last-child(-n+3){border-bottom:0}
.desk-grid dt{font:500 .66rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.desk-grid dd{font-size:.9rem;line-height:1.55;overflow-wrap:anywhere}
.desk-grid a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(255,207,63,.4)}
.desk-grid a:hover{border-color:var(--yellow)}

/* ---------- Fuß ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:40px 92px;background:#0d0e0f}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:center}
.foot-brand img{height:70px;width:auto}
.foot-copy{font-size:.8rem;color:var(--grey)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px}
.foot-links a{display:block;font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:11px 12px;border-radius:4px}
.foot-links a:hover{background:var(--yellow);color:#111}

/* ---------- Rechtsseiten ---------- */
.legal{padding-block:clamp(24px,4vw,48px) var(--sec)}
.legal .board{max-width:1000px;margin-inline:auto}
.legal-head{padding:clamp(24px,4vw,44px) clamp(18px,4vw,52px);border-bottom:1px solid var(--line)}
.legal-head h1{font:800 clamp(2.2rem,5vw,4rem)/1 var(--disp);text-transform:uppercase;color:var(--yellow);letter-spacing:.02em;hyphens:auto;overflow-wrap:break-word}
.back{display:inline-block;margin-top:22px;font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--white);border-bottom:1px solid var(--yellow);padding-bottom:5px}
.back:hover{color:var(--yellow)}
.prose{padding:clamp(24px,4vw,44px) clamp(18px,4vw,52px) clamp(32px,5vw,56px);max-width:calc(70ch + 104px);font-size:.92rem;color:#dcdde0}
.prose h2{font:800 1.65rem/1.05 var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin:2em 0 .6em;padding-top:1em;border-top:1px solid var(--line)}
.prose > h2:first-child,.prose .legal-note + h2{margin-top:0;border-top:0;padding-top:0}
.prose p,.prose ul{margin:0 0 1em}
.prose li{position:relative;padding-left:1.5em;margin-bottom:.4em}
.prose li::before{content:"›";position:absolute;left:.2em;color:var(--yellow);font-weight:700}
.prose a{color:var(--yellow);overflow-wrap:anywhere}
.prose .legal-note{border:1px solid var(--yellow);background:rgba(255,207,63,.07);border-radius:6px;padding:12px 16px;margin-bottom:2em}
.prose .legal-address{background:var(--bg-2);border-left:3px solid var(--yellow);padding:14px 18px;border-radius:0 6px 6px 0}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .nav ul a{padding:12px 8px;letter-spacing:.1em}
  .nav-phone{display:none}
}
@media (max-width:960px){
  .head-in{height:68px;gap:14px}
  .brand img{height:48px}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#111;background:var(--yellow);border:0;border-radius:4px;padding:0 14px;height:44px;cursor:pointer}
  .menu-ico{width:16px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .menu-ico::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
  .js .nav{display:none}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px var(--gut) 22px;box-shadow:0 30px 40px -20px rgba(0,0,0,.8)}
  .js .nav.open{display:flex}
  .nav ul{flex-direction:column;margin:0;gap:0}
  .nav ul a{font:800 2rem/1 var(--disp);letter-spacing:.06em;padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-meta{padding-top:16px}
  .nav-phone{display:inline-block}
  .hero-foot{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr}
  .sec-head .lead{margin-top:20px}
  .row,.svc-row{grid-template-columns:3.6rem minmax(0,1fr) auto;grid-template-areas:"no dest st" "no rem rem";row-gap:8px;align-items:start}
  .row > :nth-child(1){grid-area:no}
  .row .dest{grid-area:dest}
  .row .rem{grid-area:rem}
  .row .st{grid-area:st}
  .row-head{display:none}
  .seg-row{grid-template-columns:2.4rem 1fr 1fr auto;grid-template-areas:"no a b st" "no m m m"}
  .seg-row > :nth-child(2){grid-area:a}
  .seg-row > :nth-child(3){grid-area:b}
  .seg-row .mode{grid-area:m}
  .seg-row .st{grid-area:st}
  .stats{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(3){border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--line)}
  .steps li::before{display:none}
  .about-in,.desk-body{grid-template-columns:1fr}
  .about-media{max-width:520px}
  .desk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desk-grid div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .desk-grid div:nth-child(2n){border-right:0!important}
  .desk-grid div:nth-last-child(-n+2){border-bottom:0!important}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:.92rem}
  .clock{display:none}
  .board-top{flex-direction:column;align-items:flex-start}
  .flap{--ts:clamp(22px,calc((100vw - 2 * var(--gut) - 30px) / 10.4),44px)}
  .flap .t{width:.62em}
  .flap .c{font-size:.9em}
  .flap .t::before{box-shadow:calc(.62em - 1px) 0 0 #3a3c40}
  .flap .w{gap:.05em}
  .flap.is-tiled{column-gap:.36em}
  .hero-board{padding-inline:14px}
  .cta-row .btn{flex:1 1 100%}
  .row,.svc-row{grid-template-columns:2.6rem minmax(0,1fr);grid-template-areas:"no dest" "no rem" "no st";padding-inline:14px}
  .row .st{margin-top:4px}
  .seg-row{grid-template-columns:2rem 1fr 1fr;grid-template-areas:"no a b" "no m st"}
  .seg-row .st{justify-self:end;align-self:center}
  .board-cap{flex-direction:column;align-items:flex-start;padding-inline:14px}
  .board-cap .dim{text-align:left}
  .steps{grid-template-columns:1fr}
  .steps li + li{border-left:0;border-top:1px solid var(--line)}
  .feats{grid-template-columns:1fr}
  .desk-sign{flex-direction:column;align-items:flex-start}
  .desk-grid{grid-template-columns:1fr}
  .desk-grid div{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .desk-grid div:last-child{border-bottom:0!important}
  .rem,.steps p{hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}