/* ═══════════════════════════════════════════════════════════════════════════
   wing.css — EIN einheitliches Flügel-Bauteil für alle NGO-Files-Welten
   ---------------------------------------------------------------------------
   Ersetzt die drei (vier) Alt-Implementierungen:
     · .ngo-back-door / .ngo-forward-door  (Wiki/Blog, ngo-tokens.css)
     · .ap-door                            (Arbeitsplatz, nav-doors.css)
     · .door                               (Sandbox, fluegel-sandbox.html)
     · .side-doors                         (Startseite, index.html)

   Martins Entscheidungen (2026-06-14):
     1. Desktop-Grundform = A · SEITENRAUM — die Lesespalte rückt ein, die
        Flügel wohnen im reservierten Rand und ragen NIE über den Text.
        (Reservierung über body padding-inline → robust auch im Wiki-Grid:
         Sidebar + Inhalt + Infobox rücken gemeinsam ein, der Flügel landet
         im freien Gutter, kollidiert mit nichts.)
     2. Begriff für die Hauptseite = „Start".
     3. Blog-Anordnung getauscht → links IMMER „Start" (Heimat-Anker),
        rechts die jeweils andere Sektion (Wiki↔Blog).
     4. Mobil = untere 50/50-Leiste (kein Text verdeckt).

   Token-Strategie: selbst-versorgend. Eigene --wing-*-Tokens mit
   :where(:root)-Fallbacks (Spezifität 0,0,0) — Host-Tokens gewinnen falls
   vorhanden, sonst greifen die Defaults. Dadurch egal, ob die Welt das
   HSL-Token-Set (Start) oder das Hex-Set (Wiki/Blog/Arbeitsplatz) lädt.
   Dark-Mode-Block keyed auf html[data-mode="dark"] (wirkt nur dort, wo die
   Welt den Schalter setzt: Wiki/Blog/Start).
   ═══════════════════════════════════════════════════════════════════════════ */

:where(:root){
  --wing-w:        clamp(120px, 12vw, 154px);   /* Flügel-Breite im Ruhezustand (immer voll) */
  --wing-gutter:   clamp(140px, 13.5vw, 176px); /* reservierter Rand (Flügel + Luft) — wächst mit dem Viewport */
  --wing-card:     #ffffff;
  --wing-border:   #e2e8f0;
  --wing-ink:      #0f172a;
  --wing-muted:    #687686;   /* ~5.6:1 auf Weiß → erfüllt WCAG AA für Kicker + Untertitel */
  --wing-accent:   #0097b2;
  --wing-shadow:   0 8px 26px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.5) inset;
  --wing-shadow-hi:0 14px 38px rgba(0,151,178,.20), 0 1px 0 rgba(255,255,255,.6) inset;
  --wing-bar-bg:   rgba(255,255,255,.94);
  --wing-ease:     cubic-bezier(.22,.61,.36,1);
}
/* Dark-Mode: nur Farb-/Schatten-Tokens variieren; die strukturellen Tokens
   (--wing-w, --wing-gutter, --wing-ease) sind themen-agnostisch und bleiben. */
html[data-mode="dark"]{
  --wing-card:     #16202f;
  --wing-border:   #243149;
  --wing-ink:      #e7edf5;
  --wing-muted:    #8b9aad;   /* ~6:1 auf dunkler Karte → AA */
  --wing-accent:   #22b8d4;
  --wing-shadow:   0 8px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --wing-shadow-hi:0 14px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;
  --wing-bar-bg:   rgba(16,26,40,.92);
}

/* ── Seitenraum-Reservierung (Desktop): die einzige Mechanik, die auf ALLEN
      Welten kollisionsfrei funktioniert. body schiebt seinen Inhalt um den
      Gutter ein; der position:fixed-Flügel sitzt im freien Rand. ── */
body.wing-pad-left  { padding-left:  var(--wing-gutter, 168px); }
body.wing-pad-right { padding-right: var(--wing-gutter, 168px); }
/* Arbeitsplatz/App-Shells: schmalerer Gutter, damit Canvas/Topbar atmen. */
body.wing-compact   { --wing-gutter: clamp(88px, 9vw, 112px); --wing-w: clamp(74px, 7.5vw, 94px); }

/* ── Host-Container: auf Desktop nur logischer Wrapper (Kinder sind fixed),
      auf Mobil wird er selbst zur unteren Leiste. ── */
.wing-host{ position: static; }

/* ════════════════ DESKTOP (Seitenraum) ════════════════ */
.wing{
  position: fixed; top: 50%;
  display: flex; align-items: center; gap: 10px;
  width: var(--wing-w);
  padding: 11px 13px;
  background: var(--wing-card);
  border: 1px solid var(--wing-border);
  border-radius: 16px;
  box-shadow: var(--wing-shadow);
  text-decoration: none; color: var(--wing-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  z-index: 45;
  transition: transform .28s var(--wing-ease), box-shadow .28s, border-color .2s;
}
/* Linke Seite (Heimat-Anker „Start"): Logo aussen, Pfeil nach links. */
.wing--left  { left: 12px;  flex-direction: row; }
/* Rechte Seite (andere Sektion): spiegelverkehrt, Text rechtsbündig. */
.wing--right { right: 12px; flex-direction: row-reverse; }
.wing--right .wing-text{ align-items: flex-end; text-align: right; }

/* Zwei rechte Flügel gestapelt (Startseite → Wiki oben, Blog unten). */
.wing--top    { top: calc(50% - 42px); transform: translateY(-50%); }
.wing--bottom { top: calc(50% + 42px); transform: translateY(-50%); }
.wing--mid    { transform: translateY(-50%); }

.wing-logo, .wing-fallback{
  width: 28px; height: 28px; flex: none; order: 0; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.wing-fallback{ display: none; align-items: center; justify-content: center; }
.wing-fallback svg{ width: 100%; height: 100%; }

.wing-text{ display: flex; flex-direction: column; gap: 1px; order: 1; line-height: 1.16; min-width: 0; }
.wing-kicker{
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--wing-muted); font-weight: 600; white-space: nowrap;
}
.wing-name{
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  font-family: 'Fraunces','DM Serif Display', ui-serif, Georgia, serif;
  font-style: italic; color: var(--wing-accent);
}
.wing-sub{
  font-size: 10px; color: var(--wing-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Pfeil — dezenter Hinweis, fährt erst beim Anvisieren ein. */
.wing-arrow{
  order: 2; color: var(--wing-accent); font-weight: 700; font-size: 13px;
  opacity: 0; max-width: 0; overflow: hidden;
  transition: opacity .22s, max-width .22s;
}
.wing:hover, .wing:focus-visible{
  box-shadow: var(--wing-shadow-hi); border-color: var(--wing-accent);
}
.wing--left:hover,  .wing--left:focus-visible  { transform: translateY(-50%) translateX(6px); }
.wing--right:hover, .wing--right:focus-visible { transform: translateY(-50%) translateX(-6px); }
/* Gestapelte (top/bottom) behalten ihren Y-Versatz auch beim Hover-Nudge. */
.wing--top:hover,    .wing--top:focus-visible    { transform: translateY(-50%) translateX(-6px); }
.wing--bottom:hover, .wing--bottom:focus-visible { transform: translateY(-50%) translateX(-6px); }
.wing:hover .wing-arrow, .wing:focus-visible .wing-arrow{ opacity: .7; max-width: 18px; }

/* Kompakt-Variante (Arbeitsplatz): nur Logo + Name (Untertitel + Kicker weg,
   sonst bricht „NGO-FILES" im schmalen Reiter um). */
body.wing-compact .wing-sub,
body.wing-compact .wing-kicker{ display: none; }

/* Sichtbarmachung des reservierten Rands (Debug / Onboarding-Tour „Seitenraum"). */
body.wing-show-rail.wing-pad-left::before,
body.wing-show-rail.wing-pad-right::after{
  content: ''; position: fixed; top: 0; bottom: 0; width: var(--wing-gutter);
  z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(0,151,178,.06) 0 10px, transparent 10px 20px);
  border-inline: 1px dashed rgba(0,151,178,.28);
}
body.wing-show-rail.wing-pad-left::before { left: 0; }
body.wing-show-rail.wing-pad-right::after { right: 0; }

/* ════════════════ MOBIL ≤760px — untere 50/50-Leiste ════════════════
   Der Host-Container wird zur Leiste, die Flügel flossen aus ihrer
   fixed-Position in den Flex-Fluss (je Flügel flex:1). Kein Text verdeckt;
   DOM-Reihenfolge = „Start" links, andere Sektion rechts. */
@media (max-width: 760px){
  body.wing-pad-left, body.wing-pad-right{
    padding-left: 0; padding-right: 0;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  .wing-host{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch;
    background: var(--wing-bar-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--wing-border);
    box-shadow: 0 -2px 14px rgba(0,0,0,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .wing{
    position: static; inset: auto; top: auto; transform: none;
    width: auto; flex: 1 1 0; min-height: 48px;   /* Touch-Ziel ≥ 44px (WCAG 2.5.5) */
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
    justify-content: center; gap: 9px;
    padding: 10px 8px;
  }
  .wing + .wing{ border-left: 1px solid var(--wing-border); }
  .wing--left, .wing--right{ flex-direction: row; }   /* in der Leiste alle gleich ausgerichtet */
  .wing--right .wing-text{ align-items: flex-start; text-align: left; }
  .wing:hover, .wing:focus-visible{ transform: none; box-shadow: none; border-color: transparent; }
  .wing:active{ background: color-mix(in srgb, var(--wing-accent) 10%, transparent); }
  .wing-logo, .wing-fallback{ width: 24px; height: 24px; }
  .wing-name{ font-size: 15px; }
  .wing-kicker{ font-size: 8.5px; }
  .wing-sub{ display: none; }       /* Untertitel in der schmalen Leiste weg */
  .wing-arrow{ display: none; }
  body.wing-show-rail.wing-pad-left::before,
  body.wing-show-rail.wing-pad-right::after{ display: none; }

  /* Toggle-Dock (Hell/Dunkel + Logo-Stil aus ngo-shell.js) über die Leiste heben.
     Alt-Klassen mit abgedeckt, falls während der Migration noch gesetzt. */
  body.wing-on .ngo-toggle-dock,
  body.ngo-has-back-door .ngo-toggle-dock,
  body.ngo-has-forward-door .ngo-toggle-dock{ bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════ Mobile Sektions-Leiste (.nf-mobnav) ════════════════
   Einheitliche untere Bereichs-Leiste im Startseiten-Stil (Icon + Fraunces-
   kursives Label): „Start" + die jeweils anderen Sektionen. Ersetzt auf Mobil
   die 2er-Flügel-Leiste; Desktop bleibt unverändert (Seitenraum-Flügel). */
.nf-mobnav{ display: none; }
@media (max-width: 760px){
  .wing-host{ display: none !important; }   /* alte 2er-Leiste raus; nf-mobnav übernimmt */
  .nf-mobnav{
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--wing-bar-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--wing-border);
    box-shadow: 0 -2px 14px rgba(0,0,0,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: 'DM Sans', system-ui, sans-serif;
  }
  .nf-mobnav a{
    flex: 1 1 0; min-height: 56px; padding: 9px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none; color: var(--wing-muted); transition: background .2s ease;
  }
  .nf-mobnav a + a{ border-left: 1px solid var(--wing-border); }
  .nf-mobnav a:active{ background: color-mix(in srgb, var(--wing-accent) 8%, transparent); }
  .nf-mobnav a:focus-visible{ outline: 2px solid var(--wing-accent); outline-offset: -2px; }
  .nf-mobnav .mb-ico{ color: var(--wing-accent); display: grid; place-items: center; }
  .nf-mobnav .mb-ico svg{ width: 22px; height: 22px; }
  .nf-mobnav .mb-name{
    font-family: 'Fraunces','DM Serif Display', ui-serif, Georgia, serif;
    font-style: italic; font-size: 13px; color: var(--wing-ink);
  }
}

/* ════════════════ Barrierefreiheit / Motion ════════════════ */
@media (prefers-reduced-motion: reduce){
  .wing{ transition: box-shadow .2s, border-color .2s; }
  .wing--left:hover, .wing--right:hover,
  .wing--top:hover, .wing--bottom:hover,
  .wing--left:focus-visible, .wing--right:focus-visible,
  .wing--top:focus-visible, .wing--bottom:focus-visible{ transform: translateY(-50%); }
}
/* Fokus-Ring: solides outline — universell unterstützt, kein color-mix nötig,
   und es bleibt IMMER ein sichtbarer Indikator (kein outline:none ohne Ersatz). */
.wing:focus-visible{ outline: 2px solid var(--wing-accent, #0097b2); outline-offset: 2px; box-shadow: var(--wing-shadow-hi); }