/* ==========================================================================
   Webcams und Flotten-Bühne
   ========================================================================== */

/* ---------- Webcams ---------- */
.webcams { background: radial-gradient(100% 60% at 50% 0%, #2c2f38 0%, var(--anthracite) 60%); }
.webcams__head { margin-bottom: 24px; }
.webcams__head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 900 italic clamp(1.8rem, 1.2rem + 2.4vw, 3rem)/1 var(--font-display); color: var(--red); }
.webcams__head h2 span:last-child { color: #fff; font-family: var(--font-heavy); font-style: normal; font-weight: 800; font-size: .7em; }
.webcams__head p { color: #c9cfdb; max-width: 70ch; }
.live-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); animation: live-pulse 1.6s infinite; flex: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
.cams { display: grid; gap: 22px; }
@media (min-width: 1100px) { .cams { grid-template-columns: 1fr 1fr; } }
.cam { margin: 0; background: #16171b; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); outline: 1px solid rgba(255, 255, 255, .07); }
.cam__frame { position: relative; aspect-ratio: 8 / 3; background: #0b0c10; overflow: hidden; }
.cam__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam__live { transition: opacity .6s; }
.cam__badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 .95rem/1 var(--font-display); backdrop-filter: blur(4px); }
.cam__badge .live-dot { width: 9px; height: 9px; }
.cam__timelapse { position: absolute; inset: 0; background: #000; }
.cam__timelapse[hidden] { display: none; }
.cam__tl-time { position: absolute; right: 12px; top: 12px; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: var(--yellow); font: 900 italic 1.4rem/1 var(--font-display); letter-spacing: .04em; }
.cam__loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 600; }
.cam__loading[hidden] { display: none; }
.cam__loading span { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: var(--yellow); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 8px; }
.cam__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #fff; flex-wrap: wrap; }
.cam__title strong { display: block; font: 700 1.2rem/1.1 var(--font-heavy); }
.cam__title span { color: #aab2c4; font-size: 1rem; }
.cam__actions { display: flex; gap: 8px; }
.cam__actions .btn-ghost { color: #fff; }
.tl-controls { display: flex; gap: 10px; align-items: center; padding: 0 16px 16px; flex-wrap: wrap; }
.tl-controls[hidden] { display: none; }
.tl-controls input[type="range"] { flex: 1 1 180px; accent-color: var(--yellow); height: 32px; }
.tl-controls select { min-height: 40px; border-radius: 10px; border: 0; padding: 0 10px; background: #2a2c33; color: #fff; font: 500 1rem var(--font-text); }
.tl-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--yellow); color: var(--navy); cursor: pointer; flex: none; }
.tl-btn[data-tl-close] { background: #2a2c33; color: #fff; }
.cam__frame[data-cam-view] { cursor: zoom-in; }
.cam__zoom-hint { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 .9rem/1 var(--font-display); backdrop-filter: blur(4px); pointer-events: none; }
.cam__zoom-hint .icon { width: 16px; height: 16px; }

/* ---------- Webcam im Vollbild (eigener Betrachter: zoomen, schwenken, Zeitraffer) ---------- */
html.camview-open { overflow: hidden; }
.camview { position: fixed; inset: 0; z-index: 125; display: flex; flex-direction: column; background: #000; color: #fff; }
.camview[hidden] { display: none; }
.camview__head, .camview__bar { background: rgba(22, 23, 27, .96); }
.camview__head { display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
.camview__title { flex: 1; min-width: 0; }
.camview__title strong { display: block; font: 700 1.1rem/1.15 var(--font-heavy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camview__title span { display: block; color: #aab2c4; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camview__time { flex: none; color: var(--yellow); font: 900 italic 1.15rem/1 var(--font-display); letter-spacing: .03em; white-space: nowrap; }
.camview__view { position: relative; flex: 1; min-height: 0; display: flex; }
.camview__stage { position: relative; flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.camview__stage.is-dragging { cursor: grabbing; }
.camview__stage img { display: block; max-width: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.camview__hint { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .65); font: 600 .95rem/1.2 var(--font-display); white-space: nowrap; pointer-events: none; }
.camview__hint[hidden] { display: none; }
.camview .cam__loading { text-align: center; }
.camview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.camview__modes, .camview__zoom { display: flex; align-items: center; gap: 8px; }
.camview__bar .btn-sm { background: #2a2c33; color: #fff; }
.camview__bar .btn-sm[aria-pressed="true"] { background: var(--yellow); color: var(--navy); }
.camview__bar .btn-sm .live-dot { width: 9px; height: 9px; }
.camview__zoom .tl-btn, .camview__head .tl-btn { background: #2a2c33; color: #fff; }
.camview__tl { flex: 1 1 100%; padding: 0; }
/* Handy quer: Leisten schmaler, damit möglichst viel Bild bleibt */
@media (orientation: landscape) and (max-height: 520px) {
  .camview__head { padding-block: 4px; }
  .camview__title span { display: none; }
  .camview__bar { padding-top: 6px; gap: 6px; }
  .camview__tl { flex: 1 1 320px; }
  .camview .tl-btn { width: 38px; height: 38px; }
  .camview .btn-sm { min-height: 36px; }
}

.wx { margin-top: 22px; }
.wx__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wx__tile { min-width: 0; }
.wx__tile strong { font-size: 1.15rem; overflow-wrap: break-word; }
.wx__tile { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); outline: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.wx__tile > .icon { width: 30px; height: 30px; color: var(--yellow); }
.wx__tile small { display: block; color: #aab2c4; font-size: .95rem; }
.wx__tile strong { font: 800 1.3rem/1.15 var(--font-heavy); }
.wx__tile span { display: block; color: #ffcf6b; font-size: .95rem; }
.wx__compass { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
.wx__compass b { position: absolute; top: -2px; left: 50%; translate: -50% 0; font-size: .7rem; color: #aab2c4; }
.wx__arrow { position: absolute; left: 50%; top: 50%; width: 4px; height: 40px; margin: -20px 0 0 -2px; background: linear-gradient(var(--yellow) 0 45%, transparent 45% 55%, rgba(255, 255, 255, .5) 55%); border-radius: 2px; transition: transform 1.2s var(--ease); }
.wx__arrow::before { content: ""; position: absolute; bottom: -4px; left: 50%; translate: -50% 0; border: 7px solid transparent; border-top-color: var(--yellow); border-bottom: 0; }
.wx__note { grid-column: 1 / -1; color: #8d96aa; font-size: .95rem; margin: 4px 0 0; }

/* ---------- Flugwetter (METAR) unter den Webcams ---------- */
.metar { margin-top: clamp(32px, 5vw, 56px); color: #fff; }
.metar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.metar__head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; color: var(--yellow); font: 900 italic clamp(1.8rem, 1.2rem + 2.4vw, 3rem)/1 var(--font-display); text-transform: uppercase; }
.metar__head h2 span { color: #fff; font: 800 normal .62em/1.15 var(--font-heavy); text-transform: none; }
.metar__age { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; color: #c9cfdb; font: 600 1rem/1.2 var(--font-display); }
.metar__age b { padding: 6px 12px; border-radius: 999px; background: #1f8a4c; color: #fff; }
.metar__age b.is-alt { background: #c77700; }
.metar__age b.is-veraltet { background: var(--red); }
.metar-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .metar-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .metar-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.metar-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: #16171b; outline: 1px solid rgba(255, 255, 255, .07); }
.metar-tile__v { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 16px 10px 10px; font: 800 clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem)/1 var(--font-heavy); white-space: nowrap; }
.metar-tile__v small { color: #c9cfdb; font: 600 1rem/1 var(--font-display); }
.metar-tile__v .icon { width: 26px; height: 26px; align-self: center; color: var(--yellow); }
.metar-tile__l { flex: 1; padding: 10px 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); color: #c9cfdb; text-align: center; font: 500 1.02rem/1.25 var(--font-text); overflow-wrap: anywhere; }
.metar-tile__l b { color: #fff; font-weight: 600; }
.metar-tile__l .icon { width: 1em; height: 1em; color: var(--yellow); }
.metar-tile--cat .metar-tile__v { background: var(--cat, #1f8a4c); color: #fff; }
.metar-grid { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 900px) { .metar-grid { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } }
.metar-card { min-width: 0; padding: clamp(16px, 2vw, 22px); border-radius: var(--radius-lg); background: #16171b; outline: 1px solid rgba(255, 255, 255, .07); }
.metar-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.metar-card__head h3 { margin: 0; color: var(--yellow); font: 800 italic 1.35rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.metar-card__hint, .metar-muted { color: #9aa3b6; font-size: .95rem; }
.metar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.metar-chip { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: #fff; outline: 1.5px solid rgba(255, 255, 255, .35); font: 600 1rem/1 var(--font-display); cursor: pointer; }
.metar-chip[aria-pressed="true"] { background: var(--yellow); color: var(--navy); outline-color: var(--yellow); }
.metar-wind { display: grid; gap: 10px; align-items: center; margin: 6px 0; }
@media (min-width: 520px) { .metar-wind { grid-template-columns: 1.15fr .85fr; } }
.metar-wind svg { display: block; width: 100%; height: auto; }
.metar-wind__gauge { max-width: 260px; width: 100%; margin: 0 auto; }
.metar-clouds { display: block; width: 100%; height: auto; }
.metar-clouds--schmal { display: none; }
@media (max-width: 639px) {
  .metar-clouds--breit { display: none; }
  .metar-clouds--schmal { display: block; }
  .metar-table { font-size: .98rem; }
  .metar-table th, .metar-table td { padding: 8px 5px; }
}
.metar-table td:first-child { white-space: nowrap; }
.metar-legend { margin: 6px 0 0; color: #9aa3b6; font-size: .95rem; }
.metar-legend i { display: inline-block; width: 14px; height: 4px; margin-right: 6px; border-radius: 2px; background: #3ccf7d; vertical-align: middle; }
.metar-table { width: 100%; margin-top: 8px; border-collapse: collapse; font: 500 1.06rem/1.3 var(--font-text); }
.metar-table th, .metar-table td { padding: 9px 8px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: left; vertical-align: top; }
.metar-table th { color: #9aa3b6; font-size: .95rem; font-weight: 500; }
.metar-table td b { font-family: var(--font-heavy); font-weight: 700; }
.metar-table small { color: #9aa3b6; }
.metar-table[hidden] { display: none; }
.metar-arrow { color: var(--yellow); font-weight: 700; }
.metar-pill { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px; font: 600 .85rem/1.2 var(--font-display); white-space: nowrap; }
.metar-pill--ok { background: rgba(31, 138, 76, .25); color: #6fe0a0; }
.metar-pill--warn { background: rgba(189, 42, 24, .25); color: #ff9c8c; }
.metar-speak { display: flex; gap: 8px; }
.metar-speak .tl-btn { width: 40px; height: 40px; }
.metar-speak .metar-stop { background: #2a2c33; color: #fff; }
.metar-raw { padding: 14px 16px; border-radius: 14px; background: #0d0e11; color: #e8ecf6; font: 500 1.02rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.metar-dec { display: grid; gap: 8px; margin-top: 12px; color: #dfe5f3; font-size: 1.08rem; }
.metar-dec p { margin: 0; }
.metar-dec b { color: #fff; }
.metar-note { margin: 14px 0 0; color: #8d95a8; font-size: .98rem; }

/* ---------- Flotte: Hallentor ---------- */
.fleet { background: #101116; color: #e9ecf3; }
.hangar { position: relative; height: clamp(560px, 92svh, 900px); overflow: hidden; perspective: 900px; isolation: isolate; }
.hangar__inside { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 35%, #3a3d48 0%, #15161b 70%); --mx: 50%; --my: 40%; }
.hangar__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: grayscale(.3) brightness(.7); }
.hangar__light { position: absolute; inset: 0; background: radial-gradient(40% 50% at var(--mx) var(--my), rgba(255, 236, 190, .28), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.hangar__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .65)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 120px); transform-origin: bottom; }
.hangar__content { position: relative; z-index: 2; text-align: center; padding-top: clamp(48px, 9vh, 110px); padding-inline: 16px; }
.hangar__kicker { font: 800 italic clamp(.95rem, .8rem + .4vw, 1.2rem)/1 var(--font-display); color: var(--yellow); letter-spacing: .3em; text-transform: uppercase; margin: 0 0 14px; }
.hangar__title { position: relative; margin: 0; font: 900 italic clamp(2.4rem, 10vw, 8.5rem)/.9 var(--font-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .85); letter-spacing: .01em; }
.hangar__title::after { content: attr(data-text); position: absolute; inset: 0; color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) 1.1s; }
.hangar.is-open .hangar__title::after { clip-path: inset(0 0 0 0); }
.hangar__sub { margin: 14px 0 0; font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.3 var(--font-display); color: #c9cfdb; }
.hangar__plane { position: absolute; z-index: 3; left: 50%; bottom: 7%; width: min(1150px, 112vw); translate: -50% 0; transform: translateY(40px) scale(.55); opacity: 0; transition: transform 2.2s var(--ease) .9s, opacity 1.2s ease .9s; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.hangar__plane img { width: 100%; }
.hangar.is-open .hangar__plane { transform: none; opacity: 1; animation: plane-idle 6s ease-in-out 3.2s infinite; }
@keyframes plane-idle { 50% { transform: translateY(-6px) rotate(-.4deg); } }
.hangar__door {
  position: absolute; z-index: 5; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 6%, transparent 94%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, #5d6370 0 14px, #6c7280 14px 26px, #545a66 26px 40px);
  box-shadow: inset 0 -64px 0 -40px rgba(0, 0, 0, .15);
  transition: transform 2s cubic-bezier(.7, 0, .2, 1);
  display: grid; place-items: center;
}
.hangar__door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, #1d1d1b 18px 36px); }
.hangar__door span { font: 900 italic clamp(3rem, 2rem + 6vw, 8rem)/1 var(--font-display); color: rgba(255, 255, 255, .14); letter-spacing: .04em; }
.hangar__door--left { left: 0; border-right: 3px solid #3b3f48; }
.hangar__door--right { right: 0; border-left: 3px solid #3b3f48; }
.hangar.is-open .hangar__door--left { transform: translateX(-101%); }
.hangar.is-open .hangar__door--right { transform: translateX(101%); }
.hangar.is-opening .hangar__door { animation: door-shake .4s ease 2; }
@keyframes door-shake { 50% { translate: 0 2px; } }
.hangar__open { position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; transition: opacity .4s; }
.hangar.is-open .hangar__open { opacity: 0; pointer-events: none; }
.hangar__scroll { position: absolute; z-index: 6; left: 50%; bottom: 14px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; font: 600 .95rem/1 var(--font-display); opacity: 0; transition: opacity 1s 2.6s; }
.hangar.is-open .hangar__scroll { opacity: .85; }
.hangar__scroll .icon { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- Flotte: Abflugtafel ---------- */
.board-wrap { padding: clamp(40px, 6vw, 80px) 0; background: linear-gradient(180deg, #15161b, #101116); }
.board { background: #0b0b0d; border-radius: 18px; padding: clamp(14px, 2.4vw, 28px); box-shadow: inset 0 0 0 3px #26272c, 0 30px 60px rgba(0, 0, 0, .5); font-family: "Consolas", "Courier New", monospace; }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid #26272c; }
.board__title { display: flex; align-items: center; gap: 10px; color: var(--yellow); font-weight: 700; letter-spacing: .14em; font-size: clamp(.95rem, .8rem + .6vw, 1.3rem); }
.board__clock { color: #fff; font-size: 1.3rem; letter-spacing: .1em; }
.board__row { display: grid; grid-template-columns: 1.1fr 2.6fr .6fr .6fr 1fr; gap: 10px; align-items: center; padding: 10px 6px; border-radius: 10px; color: #f2f2f2; text-decoration: none; transition: background-color .2s; }
.board__row:hover { background: #18191e; color: #fff; }
.board__row--labels { color: #7d8597; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; padding-block: 4px; }
.board__row--labels:hover { background: none; color: #7d8597; }
@media (max-width: 699px) { .board__row { grid-template-columns: 1.2fr 2fr 1fr; } .hide-sm { display: none; } }
.flap { display: inline-flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; font-size: clamp(.85rem, .7rem + .7vw, 1.2rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.flap i { font-style: normal; display: inline-grid; place-items: center; min-width: 1.05em; height: 1.55em; padding: 0 .08em; background: linear-gradient(180deg, #1f2026 49%, #000 49% 51%, #17181d 51%); border-radius: 3px; color: #f4f4f4; }
.flap i.is-space { background: transparent; min-width: .5em; }
.flap i.is-flipping { animation: flap .08s linear; }
@keyframes flap { 50% { transform: scaleY(.1); } }
.flap--status i { color: #43e07a; }
.board__row:nth-child(odd):not(.board__row--labels) .flap--status i { color: #43e07a; }

/* ---------- Flotte: Flugzeug-Szenen ---------- */
.craft { position: relative; padding: clamp(56px, 9vw, 130px) 0 clamp(40px, 6vw, 80px); overflow: hidden; background: linear-gradient(180deg, #101116, #16171d 60%, #101116); }
.craft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .9; }
.craft__reg { position: absolute; top: 4%; right: -2%; font: 900 italic clamp(5rem, 2rem + 16vw, 17rem)/.8 var(--font-display); color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .07); white-space: nowrap; pointer-events: none; transform: translateX(var(--shift, 0px)); }
.craft--flip .craft__reg { right: auto; left: -2%; }
.craft__grid { position: relative; display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .craft__grid { grid-template-columns: 1.25fr 1fr; } .craft--flip .craft__media { order: 2; } }
.craft__media { position: relative; border-radius: var(--radius-lg); transform-style: preserve-3d; transition: transform .3s ease-out; }
.craft__media img, .craft__placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 40px 70px rgba(0, 0, 0, .6); }
.craft__placeholder { display: grid; place-items: center; align-content: center; gap: 8px; background: repeating-linear-gradient(45deg, #1c1d23 0 20px, #202128 20px 40px); color: #6d7486; }
.craft__placeholder .icon { width: 90px; height: 90px; }
.craft__media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 40%); pointer-events: none; }
.craft__trail { position: absolute; left: -10%; right: -10%; bottom: -36px; width: 120%; height: 90px; overflow: visible; }
.craft__trail path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.craft.is-visible .craft__trail path { stroke-dashoffset: 0; }
.craft__role { font: 800 italic 1rem/1 var(--font-display); color: var(--accent); filter: brightness(1.6); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.craft__name { font: 900 italic clamp(1.8rem, 1.2rem + 2.4vw, 3rem)/1 var(--font-display); color: #fff; margin-bottom: 14px; }
.craft__name span { display: block; font-size: 1.6em; color: var(--yellow); letter-spacing: .02em; }
.craft__nick { font: 400 italic 1.3rem var(--font-display); color: #c9cfdb; }
.craft__desc { color: #c9cfdb; font-size: 1.15rem; }
.craft__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.craft__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #e4e8f1; font-weight: 500; }
.craft__facts .icon { color: var(--yellow); width: 18px; height: 18px; }
.craft .reveal-x { opacity: 0; transform: translateX(60px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.craft.is-visible .reveal-x { opacity: 1; transform: none; }

/* Instrumentenbrett */
.panel { margin-top: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 22px); padding: clamp(16px, 2.5vw, 28px); border-radius: 22px; background: linear-gradient(180deg, #23252c, #1a1b20); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 30px 60px rgba(0, 0, 0, .5); position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #3a3d45; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); top: 10px; left: 10px; }
.panel::after { left: auto; right: 10px; }
@media (min-width: 700px) { .panel { grid-template-columns: repeat(4, 1fr); } }
.gauge { position: relative; text-align: center; }
.gauge svg { width: 100%; max-width: 200px; margin: 0 auto; overflow: visible; }
.gauge__bezel { fill: #0e0f12; stroke: #3b3e47; stroke-width: 3; }
.gauge__face { fill: url(#none); fill: #121318; }
.gauge__arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 1; transition: stroke-dasharray 2s var(--ease) .2s; filter: brightness(1.4); }
.gauge__tick { stroke: #dfe3ec; stroke-width: 2; }
.gauge__needle { transform-origin: 60px 60px; transform: rotate(-135deg); transition: transform 2.2s cubic-bezier(.25, 1.6, .4, 1) .2s; }
.gauge__needle line { stroke: var(--yellow); stroke-width: 3.2; stroke-linecap: round; }
.gauge__needle circle { fill: #e9ecf3; }
.craft.is-visible .gauge__needle { transform: rotate(calc(-135deg + 270deg * var(--p))); }
.craft.is-visible .gauge__arc { stroke-dasharray: var(--p) 1; }
.gauge__read { position: absolute; left: 0; right: 0; top: 58%; display: grid; line-height: 1; }
.gauge__read strong { font: 800 clamp(1rem, .8rem + .8vw, 1.45rem)/1 var(--font-heavy); color: #fff; }
.gauge__read small { color: #8d96aa; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.gauge__label { margin: 8px 0 0; font: 600 1rem/1.1 var(--font-display); color: #c9cfdb; text-transform: uppercase; letter-spacing: .12em; }
.gauge.is-empty { opacity: .45; }

/* Vergleich */
.compare__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 30px; }
.compare__tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font: 600 1.05rem var(--font-display); cursor: pointer; }
.compare__tabs button.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.compare__bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 120px 1fr 92px; gap: 12px; align-items: center; }
@media (max-width: 639px) { .bar { grid-template-columns: 1fr auto; } .bar__track { grid-column: 1 / -1; grid-row: 2; } }
.bar__label { font: 800 1.05rem/1.1 var(--font-heavy); color: #fff; }
.bar__label small { display: block; font: 400 .9rem var(--font-text); color: #aab2c4; }
.bar__track { height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: visible; position: relative; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent)); transition: width 1.4s var(--ease); }
.bar__fill .icon { position: absolute; right: -14px; top: 50%; translate: 0 -50%; rotate: 90deg; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.bar__value { text-align: right; font: 800 1.05rem var(--font-heavy); color: var(--yellow); }

/* Flotten-Kurzvorstellung */
.fleet-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.fleet-strip::-webkit-scrollbar { height: 6px; }
.fleet-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.fleet-chip { flex: 0 0 min(64vw, 240px); scroll-snap-align: start; display: grid; gap: 4px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; border-top: 4px solid var(--accent); transition: transform .3s var(--ease), background-color .3s; }
.fleet-chip:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); color: #fff; }
.fleet-chip__img { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #1c1d23; margin-bottom: 6px; }
.fleet-chip__img img { width: 100%; height: 100%; object-fit: cover; }
.fleet-chip__img .icon { width: 50px; height: 50px; color: #6d7486; }
.fleet-chip strong { font: 900 italic 1.5rem/1 var(--font-display); color: var(--yellow); }
.fleet-chip span:last-child { color: #c9cfdb; }

@media (prefers-reduced-motion: reduce) {
  .hangar__door { display: none; }
  .hangar__plane { opacity: 1; transform: none; }
  .hangar__title::after { clip-path: none; }
}