/* Flugplatz-App – Design angelehnt an metelen-flugplatz.de */
:root {
  --y: #f5d800; --yd: #b89e00; --yl: #fffbea;
  --dk: #1a1a1a; --dk2: #272727; --off: #f3f3ef; --mu: #666; --bd: rgba(0,0,0,.08); --r: 4px;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bs-body-color: #222; --bs-body-bg: var(--off);
  --bs-link-color: #8a7600; --bs-link-color-rgb: 138,118,0; --bs-link-hover-color: var(--dk); --bs-link-hover-color-rgb: 26,26,26;
  --bs-border-radius: var(--r); --bs-border-radius-sm: 3px; --bs-border-radius-lg: 6px;
  --bs-focus-ring-color: rgba(245,216,0,.45);
}
body { background: var(--off); line-height: 1.6; }
h1, h2, h3, .h1, .h2, .h3, .h4 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: var(--dk); }
h1.h4, .h4 { font-size: 1.6rem; }
h2.h6, .h6 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yd); margin-bottom: .8rem; }

/* Navigation wie Homepage */
.app-nav { background: var(--dk); border-bottom: 3px solid var(--y); min-height: 66px; }
.app-nav .navbar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.app-nav .navbar-brand img { height: 44px; width: auto; }
.app-nav .bn { font-family: Georgia, serif; font-size: .98rem; color: #fff; display: block; line-height: 1.2; }
.app-nav .bt { font-size: .6rem; letter-spacing: .17em; text-transform: uppercase; color: var(--y); display: block; margin-top: 2px; }
.app-nav .nav-link { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus { color: var(--y); }
.app-nav .navbar-text { color: rgba(255,255,255,.5); font-size: .75rem; }
.app-nav .navbar-toggler { border-color: rgba(255,255,255,.25); }
.app-nav .dropdown-menu { border-radius: var(--r); border-top: 3px solid var(--y); }
.app-nav .dropdown-item:active { background: var(--y); color: var(--dk); }

/* Buttons: Gelb mit dunkler Schrift (wie CTA der Homepage) */
.btn { font-weight: 600; letter-spacing: .02em; }
.btn-primary { --bs-btn-bg: var(--y); --bs-btn-border-color: var(--y); --bs-btn-color: var(--dk);
  --bs-btn-hover-bg: #ffe030; --bs-btn-hover-border-color: #ffe030; --bs-btn-hover-color: var(--dk);
  --bs-btn-active-bg: #e6cb00; --bs-btn-active-border-color: #e6cb00; --bs-btn-active-color: var(--dk);
  --bs-btn-disabled-bg: var(--y); --bs-btn-disabled-border-color: var(--y); --bs-btn-disabled-color: var(--dk);
  --bs-btn-focus-shadow-rgb: 245,216,0; font-weight: 700; }
.btn-outline-primary { --bs-btn-color: var(--dk); --bs-btn-border-color: var(--dk); --bs-btn-hover-bg: var(--dk); --bs-btn-hover-border-color: var(--dk);
  --bs-btn-hover-color: var(--y); --bs-btn-active-bg: var(--dk); --bs-btn-active-color: var(--y); --bs-btn-focus-shadow-rgb: 26,26,26; }
.form-control:focus, .form-select:focus { border-color: var(--yd); box-shadow: 0 0 0 .2rem rgba(245,216,0,.35); }
.form-check-input:checked { background-color: var(--dk); border-color: var(--dk); }

/* Karten & Hinweise */
.card { border: 1px solid var(--bd); border-radius: var(--r); }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
.alert-light { background: var(--yl); border: none; border-left: 4px solid var(--y); color: #6b4d00; border-radius: 0 var(--r) var(--r) 0; }
.alert-info { background: var(--yl); border: none; border-left: 4px solid var(--y); color: #6b4d00; border-radius: 0 var(--r) var(--r) 0; }
.badge.text-bg-info { background: var(--y) !important; color: var(--dk) !important; }
.table { --bs-table-bg: transparent; }
.table-warning { --bs-table-bg: var(--yl); }
.bg-light { background: var(--off) !important; }

.sig-pad { width: 100%; height: 180px; border: 2px dashed #c9c4b0; border-radius: var(--r); background: #fff; touch-action: none; }
.einweisung-text { max-height: 50vh; overflow-y: auto; font-size: .95rem; background: #fff !important; }
.table td, .table th { white-space: nowrap; }
.table td:first-child { white-space: normal; }

.app-footer { background: var(--dk); color: rgba(255,255,255,.4); font-size: .75rem; padding: 1.2rem 0; margin-top: 3rem; }
.app-footer a { color: rgba(255,255,255,.6); }
.app-footer a:hover { color: var(--y); }
@media (max-width: 576px) { main.container { padding-left: 14px; padding-right: 14px; } h1.h4, .h4 { font-size: 1.35rem; } }

/* Startseite: Wetterkopf (kompakt) */
.wetter-kopf { display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1.5fr) minmax(0,.95fr); gap: .35rem; }
.wetter-kopf > button { min-width: 0; overflow: hidden; }
.wetter-kopf > button { border: 0; border-radius: var(--r); padding: .4rem .55rem; text-align: left; display: flex; flex-direction: column; }
.wetter-kopf > button[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--y); }
.wk-qnh[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--dk) !important; }
.wetter-kopf .bi-chevron-down { font-size: .55rem; transition: transform .15s; }
.wetter-kopf [aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.wk-panel { background: #fff; border: 1px solid var(--bd); border-top: 3px solid var(--y); border-radius: var(--r); padding: .6rem .7rem; margin-top: .4rem; }
.wk-panel-titel { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.wk-panel .table td { font-size: .85rem; }
.wk-qnh { background: var(--y); color: var(--dk); }
.wk-kachel { background: var(--dk); color: #fff; }
.wk-label { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wk-kachel .wk-label { color: var(--y); }
.wk-wert { font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.05; font-weight: 700; }
.wk-einheit { font-size: .65rem; opacity: .75; }
.wk-wert2 { font-size: .95rem; font-weight: 700; line-height: 1.25; margin-top: .15rem; }
.wk-info { font-size: .72rem; color: var(--mu); margin-top: .3rem; }
/* Vorhersage-Fenster */
.wx-vorhersage { width: 100%; text-decoration: none; display: flex; align-items: center; gap: .7rem; text-align: left; background: #fff; border: 1px solid var(--bd);
  border-left: 4px solid var(--y); border-radius: var(--r); padding: .55rem .75rem; color: var(--dk); }
.wx-vorhersage span { display: flex; flex-direction: column; line-height: 1.2; }
.wx-vorhersage small { color: var(--mu); font-size: .75rem; }
.wx-vorhersage > .bi { font-size: 1.2rem; }
.pw-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.metar { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; background: #fff; border: 1px solid var(--bd);
  border-radius: var(--r); padding: .4rem .6rem; word-break: break-word; }
/* Schwarzes Brett */
.brett-eintrag { border-top: 1px solid var(--bd); padding: .6rem 0; }
.brett-eintrag:first-of-type { border-top: none; }
.brett-wichtig { background: var(--yl); border-left: 4px solid var(--y); padding-left: .6rem; }

/* Flugwetter einzeilig mit Aufklappen */
.wx-zeile { display: block; border-top: 1px solid var(--bd); padding: .5rem .25rem; color: inherit; text-decoration: none; }
.wx-zeile:first-of-type { border-top: none; }
.wx-zeile summary { list-style: none; display: flex; gap: .6rem; align-items: baseline; cursor: pointer; }
.wx-zeile summary::-webkit-details-marker { display: none; }
.wx-zeile summary::after { content: '\203A'; margin-left: auto; color: var(--mu); transition: transform .15s; }
.wx-zeile[open] summary::after { transform: rotate(90deg); }
.wx-zeile .metar { margin-top: .4rem; }
.wx-typ { font-size: .72rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; color: var(--dk); min-width: 5.3rem; }
.wx-kurz { font-size: .86rem; color: #333; }
.wx-link:hover .wx-kurz { color: var(--yd); }
/* Schwebender Knopf „Flug eintragen“ (Handy) */
.fab-flug { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%;
  background: var(--y); color: var(--dk); display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 1030; }
.fab-flug:hover { color: var(--dk); background: #ffe030; }
.wx-link { display: flex; gap: .6rem; align-items: baseline; border-top: 1px solid var(--bd); }
@media (max-width: 576px) { main.container { padding-bottom: 84px; } }

/* GAFOR: Chips in der Kachel und 3D-Mini-Tabelle */
.gafor-zeile { display: flex; align-items: center; gap: .25rem; }
.gf-chip { display: inline-block; min-width: 1.9rem; text-align: center; border-radius: 3px; padding: 0 .25rem; font-size: .85rem; color: #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4); }
.gf-C, .gf-chip.gf-C { --gf: #29b6f6; } .gf-O { --gf: #43b047; } .gf-D { --gf: #f5d800; } .gf-M { --gf: #f39c12; } .gf-X { --gf: #e53935; }
.gf-chip { background: var(--gf); }
.gf-wrap { position: relative; max-width: 340px; }
.gf-grid { position: relative; display: grid; grid-template-columns: .55fr 1fr 1fr 1fr; grid-template-rows: repeat(3, 2.6rem) 1.4rem; gap: 4px;
  padding: 4px; background: #2b2b2b; border-radius: 6px; perspective: 600px; }
.gf-z { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; color: rgba(0,0,0,.75);
  border-radius: 4px; background: var(--gf);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.45); transition: transform .2s; }
.gf-xs { grid-row: 1 / 4; grid-column: 1; }
.gf-xz { grid-row: 4; grid-column: 1 / 5; font-size: .75rem; }
.gf-c { position: absolute; top: 2px; right: 2px; width: 1.15rem; height: 1.15rem; font-size: .65rem; }
.gf-jetzt { transform: translateY(-3px) scale(1.06); z-index: 2; outline: 3px solid #fff; outline-offset: -1px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.6), 0 8px 14px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.6); }
.gf-prog { outline: 2px dashed #fff; outline-offset: -4px; }
.gf-tempo { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 9px); }
.gf-pfeil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.gf-pfeil line { stroke: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.gf-pfeil path { fill: #fff; }
.gf-achse-x { display: grid; grid-template-columns: .55fr 1fr 1fr 1fr; gap: 4px; padding: 0 4px; font-size: .62rem; color: var(--mu); text-align: center; }
.gf-achse-y { font-size: .62rem; color: var(--mu); margin-top: 3px; }
.gf-leg { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; vertical-align: middle; background: #888; }
.gf-jetzt-leg { outline: 2px solid #1a1a1a; background: #ccc; } .gf-prog-leg { outline: 2px dashed #1a1a1a; background: #ccc; }
.gf-tempo-leg { background: repeating-linear-gradient(45deg, #bbb 0 3px, #eee 3px 6px); }
.brett-termine { font-size: .75rem; color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap; }
.brett-termine:hover { text-decoration: underline; }
.termine .termin-monat td { background: transparent; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); padding-top: .9rem; border-bottom-width: 2px; }
.termine summary { cursor: pointer; }
.brett-art { font-size: .7rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.brett-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; margin: .4rem 0; }
.brett-bild { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--bd); }
.brett-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brett-mehr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; font-weight: 700; font-size: 1.2rem; }
.aushang-arten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.aushang-arten .btn { padding: .35rem .2rem; font-size: .85rem; }
@media (max-width: 420px) { .aushang-arten { grid-template-columns: repeat(2, 1fr); } }
.aushang-bilder { display: flex; flex-wrap: wrap; gap: 6px; }
.aushang-bild-edit { width: 96px; font-size: .75rem; text-align: center; }
.aushang-bild-edit img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 2px; }
.gal-box { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.gal-box[hidden] { display: none; }
.gal-box img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.gal-box button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; padding: .5rem 1rem; }
.gal-zu { top: .3rem; right: .3rem; }
.gal-l { left: 0; top: 50%; transform: translateY(-50%); }
.gal-r { right: 0; top: 50%; transform: translateY(-50%); }
.gal-zaehler { position: absolute; bottom: .8rem; width: 100%; text-align: center; color: #ddd; font-size: .85rem; }
.brett-filter .nav-link { font-size: .85rem; }
.brett-filter .nav-link.active { background: var(--y); color: #1a1a1a; }
.brett-flyer { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0; }
.brett-flyer .brett-bild { aspect-ratio: auto; background: none; flex: 1 1 140px; max-width: 100%; }
.brett-flyer .brett-bild img { height: auto; max-height: 420px; object-fit: contain; border: 1px solid var(--bd); border-radius: 4px; }
.brett-pdf { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; margin: .2rem .6rem .2rem 0; }
.brett-pdf .bi { font-size: 1.3rem; color: #c0392b; }
.aushang-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
.aushang-pdf .bi { font-size: 2rem; color: #c0392b; }
.aushang-pdf small { font-size: .65rem; word-break: break-all; padding: 0 2px; }
.brett-flyer.kompakt .brett-bild img { max-height: 240px; }
.wk-wind-zeile { display: flex; align-items: center; justify-content: space-between; gap: .3rem; flex: 1; }
.wk-wind-werte { display: flex; flex-direction: column; min-width: 0; }
.wk-wind .wk-wert2 { white-space: nowrap; }
.wk-kmh { font-size: .7rem; opacity: .8; white-space: nowrap; }
.wk-boe { font-size: .7rem; color: var(--y); font-weight: 600; white-space: nowrap; }
.wk-wind { position: relative; }
.wk-wind .wk-wind-werte { position: relative; z-index: 1; }
.wk-wind { padding-right: .2rem !important; }
.wk-dir { font-size: .8rem; font-weight: 700; line-height: 1.1; margin-top: .15rem; }
.wk-wind .wk-wert2 { font-size: 1.15rem; margin-top: 0; line-height: 1.15; }
.wk-wind .wk-unit { font-size: .62rem; }
.wk-wind .wk-boe { font-size: .68rem; }
.wk-wind .wk-trend { font-size: .9rem; }
.wk-piste { position: absolute; top: 0; right: 0; bottom: 0; line-height: 0; }
.wk-piste svg { height: 100%; width: auto; display: block; }
.piste-svg .pv-bahn { fill: #4a4a4a; stroke: #888; stroke-width: .6; }
.piste-svg .pv-mitte { stroke: #fff; stroke-width: .9; stroke-dasharray: 3 2.5; }
.piste-svg .pv-schwelle { stroke: #fff; stroke-width: 1; }
.piste-svg .pv-nr { fill: #bbb; font-family: Georgia, serif; font-weight: 700; }
.piste-svg .pv-aktiv { fill: var(--y); }
.piste-svg .pv-sack-o { fill: #ff6a00; }
.piste-svg .pv-sack-w { fill: #fff; }
.piste-svg .pv-mast { fill: #fff; stroke: #000; stroke-width: .5; }
.wk-panel .piste-svg { background: #1a1a1a; border-radius: 8px; }
.wk-trend { font-size: .8rem; margin-left: .25rem; }
.wk-trend-auf { color: #ff8a65; }
.wk-trend-ab { color: #7bd88f; }
.wk-trend-gleich { font-size: .5rem; vertical-align: middle; opacity: .7; }
.wk-boe small { font-size: .62rem; font-weight: 400; opacity: .85; }
.wk-piste small { font-family: inherit; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .8; }
.wk-unit { font-size: .62rem; font-weight: 600; margin-left: .12rem; opacity: .85; }
.piste-svg .pv-mal { fill: #ddd; font-family: Arial, sans-serif; font-weight: 700; }
.piste-svg .pv-aktiv-strich { stroke: var(--y); stroke-width: 1.3; }
.piste-svg .pv-pfeil { fill: none; stroke: var(--y); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.piste-svg .pv-sack-o, .piste-svg .pv-sack-w { stroke: rgba(0,0,0,.35); stroke-width: .3; }
@media (max-width: 380px) {
  .wk-gafor .wk-label { letter-spacing: .06em; }
  .wk-gafor .gf-chip { min-width: 1.55rem; font-size: .78rem; }
  .wk-gafor .gafor-zeile { gap: .15rem; }
}
.wk-gafor .wk-label, .wk-qnh .wk-label { white-space: nowrap; }
.wkd { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.wkd-grafik { flex: 0 0 auto; background: var(--dk); border-radius: 8px; padding: .3rem .5rem; line-height: 0; }
.wkd-info { min-width: 0; font-size: .9rem; }
.wkd-gross { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.wkd-gross small, .wkd-boe small { font-size: .7rem; font-weight: 400; color: var(--mu); }
.wkd-boe { font-weight: 600; color: #b8860b; }
.wkd-piste { background: var(--y); padding: 0 .35rem; border-radius: 3px; }
.wkd-auf { color: #d84315; font-weight: 600; }
.wkd-ab { color: #2e7d32; font-weight: 600; }
.wkd-tab th { font-size: .72rem; font-weight: 600; color: var(--mu); white-space: nowrap; }
.wkd-tab td { font-size: .82rem; white-space: nowrap; }
.wkd-aktiv td { background: var(--yl) !important; }
.wkd-pfeil { display: inline-block; }
@media (max-width: 400px) { .wkd { flex-direction: row; gap: .5rem; } .wkd-grafik svg { width: 120px; height: 142px; } }
.wkd-komp td { white-space: normal; vertical-align: top; }
.piste-svg .pv-badge { fill: var(--y); }
.piste-svg .pv-badge-nr { fill: #000; font-family: Arial, Helvetica, sans-serif; font-weight: 900; }
.wk-wind .wk-wind-zeile { align-items: center; height: 100%; }
.wk-wind .wk-wind-werte { justify-content: center; }
.footer-credit { font-size: .72rem; opacity: .7; }