/* ============ Farben: eine Fassung - blauer Himmel ============
   Bewusst ohne Dunkelmodus: die Seite lebt vom Himmelsfoto, eine
   Nachtfassung würde eine andere Website sein. Deshalb color-scheme:light,
   damit auch Formularfelder und Scrollbalken hell bleiben. */
  :root{
    color-scheme:light;
    --sky-1:#4E9BDC;          /* Zenit */
    --sky-2:#95C7EF;
    --sky-3:#DBEAF9;
    --ground:#EEF5FC;         /* Dunst am Horizont */
    --panel:#FFFFFF;
    --panel-2:#F3F8FD;
    --line:#CBDDEF;
    --ink:#0D2340;
    --ink-2:#3F6188;
    --muted:#7793B4;
    --amber:#C85A1B;          /* warmer Akzent, Sonne auf Aluminium */
    --amber-soft:rgba(200,90,27,.10);
    --taxi:#1B6DB4;
    --taxi-soft:rgba(27,109,180,.10);
    --thresh:#1C7F5C;
    --warn:#B84B24;
    --silhouette:#1D3E63;
    --cloud:rgba(255,255,255,.92);
    --cloud-2:rgba(255,255,255,.55);
    --shadow:0 8px 22px rgba(21,58,105,.10);
    --radius:6px;
    --board-txt:#FFFFFF;      /* Text auf dem Akzent */
    --sky-img:image-set(url("img/himmel-1920.webp") type("image/webp"), url("img/himmel-1920.jpg") type("image/jpeg"));
    --scrim:rgba(255,255,255,.82);
  }



  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    background-image:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 380px,var(--sky-3) 760px,transparent 1040px);
    background-repeat:no-repeat;
    color:var(--ink);
    font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:0 64px}
  a{color:var(--taxi)}

  /* Himmel: Foto des Betreibers, nach unten ausgeblendet */
  .sky{
    position:absolute;inset:0 0 auto;height:1000px;z-index:0;pointer-events:none;
    background-image:var(--sky-img);
    background-size:cover;background-position:50% 72%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
  }
  .layer{position:relative;z-index:1}

  /* ============ Kopf: Abflugtafel ============ */
  header.board{position:relative;z-index:1}
  .board-inner{max-width:1140px;margin:20px auto 8px;padding:22px 22px 24px;background:var(--scrim);backdrop-filter:blur(5px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;justify-content:space-between}
  .brand{display:flex;flex-direction:column;gap:6px;min-width:260px}
  .eyebrow{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
  .flaps{display:flex;flex-wrap:wrap;gap:3px}
  .flap{
    font-family:"Saira Condensed",Impact,sans-serif;
    font-weight:700;font-size:clamp(26px,4.4vw,44px);line-height:1;
    text-transform:uppercase;letter-spacing:.01em;
    background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
    padding:6px 6px 5px;color:var(--ink);box-shadow:0 2px 6px rgba(21,58,105,.10);
    display:inline-block;
  }
  .flap.on{color:var(--taxi)}
  @media (prefers-reduced-motion:no-preference){
    .flap{animation:flip .42s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 0%}
    @keyframes flip{
      from{transform:rotateX(-92deg);opacity:0}
      to{transform:rotateX(0);opacity:1}
    }
  }
  .strapline{color:var(--ink-2);max-width:52ch;font-size:14px}

  /* Kennzahlen */
  .metrics{display:flex;gap:26px;flex-wrap:wrap}
  .metric{display:flex;flex-direction:column;gap:2px}
  .metric b{
    font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:30px;line-height:1;
    font-variant-numeric:tabular-nums;color:var(--ink)
  }
  .metric span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

  /* Hinweis Beispieldaten */
  .notice{
    margin:18px 0 0;display:flex;gap:12px;align-items:flex-start;
    border:1px solid var(--line);border-left:3px solid var(--amber);
    background:var(--panel);box-shadow:var(--shadow);padding:11px 14px;border-radius:var(--radius);
    font-size:13.5px;color:var(--ink-2)
  }
  .notice b{color:var(--ink)}

  /* ============ Bedienleiste ============ */
  .controls{
    position:sticky;top:0;z-index:5;
    box-shadow:var(--shadow);
    margin-top:20px;
    background:color-mix(in srgb,var(--panel) 92%,transparent);
    backdrop-filter:blur(8px);
    border:1px solid var(--line);border-radius:var(--radius);
    padding:12px;
    display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  }
  .tabs{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .tabs button{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    background:transparent;color:var(--ink-2);border:0;padding:9px 14px;cursor:pointer
  }
  .tabs button[aria-selected="true"]{background:var(--amber);color:var(--board-txt);font-weight:600}

  .search{flex:1 1 240px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:0 10px}
  .search svg{flex:none;color:var(--muted)}
  .search input{
    flex:1;background:transparent;border:0;color:var(--ink);padding:9px 0;font:inherit;
    font-family:"IBM Plex Mono",monospace;font-size:13px
  }
  .search input::placeholder{color:var(--muted)}
  .search input:focus{outline:none}
  .search:focus-within{border-color:var(--amber)}

  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    background:var(--panel);border:1px solid var(--line);color:var(--ink-2);
    padding:6px 10px;border-radius:2px;cursor:pointer
  }
  .chip[aria-pressed="true"]{border-color:var(--taxi);color:var(--taxi);background:var(--taxi-soft)}
  .chip:focus-visible,.tabs button:focus-visible,.row:focus-visible,.tile:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* ============ Tafelzeilen (Airlines) ============ */
  .board-head,.row{
    display:grid;
    grid-template-columns:74px minmax(160px,1.6fr) minmax(110px,.9fr) 78px minmax(180px,1.5fr) 22px;
    gap:14px;align-items:center
  }
  .board-head{
    /* Milchige Unterlage, damit die Spaltentitel auch über einer Wolke lesen */
    background:var(--scrim);backdrop-filter:blur(4px);
    border:1px solid var(--line);border-bottom:0;
    border-radius:var(--radius) var(--radius) 0 0;
    margin-top:14px;
    padding:14px 14px 10px;
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
  }
  .rows{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
    border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .row{
    width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);
    color:var(--ink);padding:12px 14px;cursor:pointer;font:inherit;
    transition:background .16s ease
  }
  .row:hover{background:var(--panel-2)}
  .row .code{
    font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;color:var(--amber);
    letter-spacing:.06em
  }
  .row .code small{display:block;color:var(--muted);font-weight:400;font-size:10.5px;letter-spacing:.1em}
  .row .name{font-weight:500}
  .row .name small{display:block;color:var(--muted);font-size:12px;font-weight:400}
  .row .country{color:var(--ink-2);font-size:13.5px}
  .row .num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:14px;text-align:right}
  .row .num small{color:var(--muted);font-size:10.5px;display:block;letter-spacing:.1em;text-transform:uppercase}
  .row .fams{display:flex;flex-wrap:wrap;gap:4px}
  .row .arrow{color:var(--muted);text-align:right;font-family:"IBM Plex Mono",monospace}
  .badge{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
    border:1px solid var(--line);color:var(--ink-2);padding:2px 6px;border-radius:2px;white-space:nowrap
  }
  .empty{padding:40px 14px;color:var(--muted);text-align:center}

  /* ============ Typen-Gitter ============ */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:16px}
  .tile{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:14px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
    display:flex;flex-direction:column;gap:10px;transition:border-color .16s ease,transform .16s ease
  }
  .tile:hover{border-color:var(--amber);transform:translateY(-2px)}
  .tile .plan{height:132px;display:flex;align-items:center;justify-content:center}
  .tile h3{margin:0;font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:20px;letter-spacing:.01em}
  .tile .meta{display:flex;justify-content:space-between;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  svg .fuse,svg .wing,svg .stab{fill:var(--silhouette)}
  svg .eng{fill:var(--ink-2)}
  svg .prop{fill:none;stroke:var(--ink-2);stroke-width:.5;stroke-dasharray:2 2}
  svg .scale{stroke:var(--muted);stroke-width:.4}
  svg .scaletxt{fill:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:3px}

  /* ============ Detailansicht ============ */
  .back{
    background:transparent;border:1px solid var(--line);color:var(--ink-2);
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    padding:7px 11px;border-radius:2px;cursor:pointer;margin:18px 0 0
  }
  .back:hover{border-color:var(--amber);color:var(--amber)}
  .detail-head{
    background:color-mix(in srgb,var(--panel) 88%,transparent);
    border-radius:var(--radius);padding-inline:16px;box-shadow:var(--shadow);
    display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end;justify-content:space-between;
    border:1px solid var(--line);padding-block:16px 18px;margin-top:14px
  }
  .detail-head h2{
    margin:0;font-family:"Saira Condensed",sans-serif;font-weight:700;
    font-size:clamp(28px,4.4vw,42px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em;
    text-wrap:balance
  }
  .detail-head .sub{color:var(--ink-2);font-size:14px;margin-top:4px}
  .codes{display:flex;gap:8px;margin-top:8px}
  .codes span{
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
    border:1px solid var(--amber);color:var(--amber);padding:3px 8px;border-radius:2px
  }

  .fleet{display:flex;flex-direction:column;gap:12px;margin-top:20px}
  .fleet-item{
    display:grid;grid-template-columns:148px 1fr 150px;gap:16px;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px
  }
  .fleet-item .plan{display:flex;align-items:center;justify-content:center;height:140px}
  .fleet-item h4{margin:0 0 2px;font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:21px}
  .fleet-item .specs{
    display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-2);
    font-family:"IBM Plex Mono",monospace;font-size:11.5px
  }
  .bar{height:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:9px}
  .bar i{display:block;height:100%;background:var(--amber)}
  @media (prefers-reduced-motion:no-preference){.bar i{animation:grow .7s cubic-bezier(.2,.8,.2,1) both}@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}}
  .count{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
  .count small{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

  /* Fotorahmen: Platzhalter für den Commons-Import */
  .photo{
    border:1px dashed var(--line);border-radius:2px;background:var(--panel-2);
    display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px;min-height:74px
  }
  .photo em{
    font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)
  }
  .photo span{font-size:11px;color:var(--muted);line-height:1.35}

  .operators{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .op{
    background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px 11px;
    display:flex;gap:8px;align-items:baseline;cursor:pointer;font:inherit;color:var(--ink)
  }
  .op:hover{border-color:var(--taxi)}
  .op b{font-weight:500;font-size:13.5px}
  .op i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--amber);font-variant-numeric:tabular-nums}

  .specsheet{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius);margin-top:20px;overflow:hidden
  }
  .specsheet div{background:var(--panel);padding:12px 14px}
  .specsheet dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
  .specsheet dd{margin:0;font-family:"Saira Condensed",sans-serif;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
  .specsheet dd u{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-left:3px}

  .planbig{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:20px;display:flex;justify-content:center}
  .planbig svg{max-width:100%;height:auto;max-height:380px}

  /* ============ Fusszeile: Datenquellen ============ */
  section.info{margin-top:52px;padding-top:26px}
  section.info h2{
    font-family:"Saira Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;
    font-size:26px;margin:0 0 4px
  }
  .info-lede{color:var(--ink-2);max-width:64ch;margin:0 0 20px}
  .pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .step{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--panel);box-shadow:var(--shadow)}
  .step .no{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
  .step h3{margin:6px 0 6px;font-family:"Saira Condensed",sans-serif;font-size:18px;font-weight:600}
  .step p{margin:0;font-size:13px;color:var(--ink-2)}
  .sources{margin-top:20px;font-size:13px;color:var(--ink-2)}
  .sources table{width:100%;border-collapse:collapse;margin-top:8px}
  .sources th,.sources td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  .sources th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
  .sources{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 14px 14px}
  .sources td:first-child{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);white-space:nowrap}
  .tablewrap{overflow-x:auto}

  footer.legal{margin-top:34px;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

  @media (max-width:800px){
    .board-head{display:none}
    .rows{border-top:1px solid var(--line);border-radius:var(--radius);margin-top:14px}
    .row{grid-template-columns:64px 1fr auto;grid-template-areas:"code name num";row-gap:6px}
    .row .code{grid-area:code}.row .name{grid-area:name}.row .num{grid-area:num}
    .row .country,.row .fams,.row .arrow{display:none}
    .fleet-item{grid-template-columns:1fr;gap:10px}
    .fleet-item .plan{height:88px}
  }

  /* ---------- Himmel zieht langsam vorbei ---------- */
  @media (prefers-reduced-motion:no-preference){
    .sky{
      background-size:118% auto;
      animation:himmel 180s ease-in-out infinite alternate;
      will-change:background-position;
    }
    @keyframes himmel{
      from{background-position:0% 74%}
      to{background-position:100% 68%}
    }
  }

  /* ================= Ergänzungen für die PHP-Seiten ================= */
  .flaps{text-decoration:none}
  .tabs a[role="tab"]{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    background:transparent;color:var(--ink-2);padding:9px 14px;text-decoration:none;display:block
  }
  .tabs a[role="tab"][aria-selected="true"]{background:var(--amber);color:var(--board-txt);font-weight:600}
  a.row{text-decoration:none;color:var(--ink);display:grid}
  a.row:hover .name{color:var(--taxi)}
  a.tile{text-decoration:none}
  .search .go{
    background:var(--amber);color:var(--board-txt);border:0;border-radius:2px;cursor:pointer;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:7px 11px;margin-left:6px
  }
  .go:hover{filter:brightness(1.08)}

  /* Live-Vorschläge */
  .suggest{
    position:absolute;left:12px;right:12px;top:calc(100% - 6px);z-index:20;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 14px 34px rgba(21,58,105,.18);overflow:hidden;max-height:60vh;overflow-y:auto
  }
  .controls{position:sticky;position:-webkit-sticky}
  form.controls{position:relative}
  .sug{
    display:grid;grid-template-columns:64px 1fr auto;gap:4px 10px;align-items:baseline;
    padding:9px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)
  }
  .sug:last-child{border-bottom:0}
  .sug.on,.sug:hover{background:var(--panel-2)}
  .sug-art{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
  .sug-titel{font-weight:500}
  .sug-zusatz{grid-column:2;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  .sug-zahl{grid-row:1;grid-column:3;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2)}

  /* Fotos mit Quellenangabe */
  figure{margin:0}
  .credit{
    display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
    letter-spacing:.04em;color:var(--muted);text-decoration:none;line-height:1.35
  }
  a.credit:hover{color:var(--taxi);text-decoration:underline}
  .hero-photo img{width:min(420px,100%);height:auto;border-radius:var(--radius);border:1px solid var(--line)}
  .thumb img{width:100%;height:auto;border-radius:2px;border:1px solid var(--line);display:block}
  .thumb{margin-top:8px}
  .tile .plan img{width:100%;height:118px;object-fit:cover;border-radius:2px;border:1px solid var(--line)}
  .photo-big{flex-direction:column;align-items:stretch}
  .photo-big img{width:100%;height:auto;border-radius:2px}

  /* Kleinteile */
  .back-line{margin:16px 0 0}
  a.back{display:inline-block;text-decoration:none}
  .count-line,.asof,.plan-note,.stand{
    font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin:10px 0 0
  }
  .asof a,.count-line a{color:var(--taxi)}
  .ordered{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--taxi);margin-top:2px}
  .note{font-size:12px;color:var(--muted);margin:6px 0 0}
  .fam-line{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--ink-2);font-size:13px}
  .fam-line .badge{text-decoration:none}
  .fam-line .badge:hover{border-color:var(--taxi);color:var(--taxi)}
  .active-filter{margin:12px 0 0;font-size:13px;color:var(--ink-2)}
  h3.sec,h2.sec{
    font-family:"Saira Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;
    margin:28px 0 10px;font-size:24px
  }
  .fleet-item h4 a,.operators .op{text-decoration:none;color:inherit}
  .op u{text-decoration:none;font-size:11px;color:var(--muted);width:100%}
  .op{flex-wrap:wrap}

  /* Fliesstext (Impressum, Datenschutz) */
  .prose{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:22px 24px;margin-top:16px;max-width:72ch
  }
  .prose h2{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-size:28px;margin:0 0 12px}
  .prose h3{font-family:"Saira Condensed",sans-serif;font-size:19px;margin:22px 0 6px}
  .prose p{margin:0 0 12px;color:var(--ink-2)}
  .prose a{color:var(--taxi)}

  /* Bildnachweistabelle */
  table.credits{width:100%;border-collapse:collapse;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  table.credits th{
    text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:400
  }
  table.credits td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
  table.credits img{border-radius:2px;object-fit:cover;display:block}

  /* Hinweis unten rechts - ohne Cookie, nur lokaler Merker */
  .hint{
    position:fixed;right:16px;bottom:16px;z-index:30;max-width:min(380px,calc(100vw - 32px));
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--thresh);
    border-radius:var(--radius);box-shadow:0 16px 40px rgba(12,35,64,.24);padding:14px 16px
  }
  .hint p{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
  .hint b{color:var(--ink)}
  .hint button{
    background:var(--thresh);color:#fff;border:0;border-radius:2px;padding:7px 12px;cursor:pointer;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase
  }

  @media (max-width:800px){
    .sug{grid-template-columns:1fr auto}
    .sug-art{grid-column:1}
    .sug-zusatz{grid-column:1}
    .prose{padding:18px}
  }

  /* ---------- Hilfsklassen (ersetzen Inline-Styles, damit die CSP streng bleibt) ---------- */
  .ta-r{text-align:right}
  .mt{margin-top:14px}
  @media (prefers-reduced-motion:no-preference){
    .flap:nth-child(1){animation-delay:0ms}    .flap:nth-child(2){animation-delay:45ms}
    .flap:nth-child(3){animation-delay:90ms}   .flap:nth-child(4){animation-delay:135ms}
    .flap:nth-child(5){animation-delay:180ms}  .flap:nth-child(6){animation-delay:225ms}
    .flap:nth-child(7){animation-delay:270ms}  .flap:nth-child(8){animation-delay:315ms}
    .flap:nth-child(9){animation-delay:360ms}  .flap:nth-child(10){animation-delay:405ms}
    .flap:nth-child(11){animation-delay:450ms} .flap:nth-child(12){animation-delay:495ms}
    .flap:nth-child(13){animation-delay:540ms} .flap:nth-child(14){animation-delay:585ms}
    .flap:nth-child(15){animation-delay:630ms} .flap:nth-child(16){animation-delay:675ms}
  }

  /* Kleinere Himmelsbilder für kleinere Bildschirme - spart Daten auf dem Handy */
  @media (max-width:900px){
    :root{--sky-img:image-set(url("img/himmel-1280.webp") type("image/webp"), url("img/himmel-1280.jpg") type("image/jpeg"))}
  }
  @media (max-width:560px){
    :root{--sky-img:image-set(url("img/himmel-800.webp") type("image/webp"), url("img/himmel-800.jpg") type("image/jpeg"))}
    .sky{height:640px}
  }