/* =========================================================================
   QUADRONET Layout - Eisberg-Startseite (CType layoutquadronet_eisberg)
   -------------------------------------------------------------------------
   Aus der Vorlage uebernommen (quadronet-eisberg-2spalter.html, 05.09.2026).
   Links steht das Bild fest ueber die Fensterhoehe, rechts laufen Vorspann
   und Ebenen. eisberg.js bestimmt die Ebene im Blick und setzt
   --tiefen-frac; die rote Marke, die Linie und der Schleier haengen daran.

   Abweichungen von der Vorlage:
   - --kopfh heisst --qn-ankerabstand (setzt base.js aus qn_base).
   - Die Marken bekommen ihre Position von eisberg.js aus data-x/data-y
     (CSP ohne 'unsafe-inline'). Ohne Skript bleiben sie ausgeblendet -
     der Text steht ohnehin vollstaendig rechts.
   - Die ungenutzten Glut-Ebenen der Vorlage sind entfallen.
   ========================================================================= */

@property --tiefen-frac {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@layer qn.theme {

  /* Das Element bringt sein eigenes Raster mit - kein Polster vom Rahmen. */
  .qn-inhalt > .frame-type-layoutquadronet_eisberg {
    --oben: 0px;
    --unten: 0px;
    padding: 0;
  }

  .zwei-spalten {
    --tiefen-frac: 0;
    --bildh: 40svh;
    position: relative;
    background: var(--carbon);
  }
  .zwei-spalten .huelle-breit {
    max-width: 1520px;
    margin-inline: auto;
    padding-inline: var(--qn-rand);
  }
  .zs-gitter {
    display: grid;
    grid-template-columns: minmax(300px, 46%) minmax(0, 1fr);
    grid-template-areas: "bild inhalt";
    column-gap: clamp(20px, 3.6vw, 56px);
  }

  /* ----- Bildspalte: bleibt stehen ------------------------------------- */
  .bild-spalte { grid-area: bild; min-width: 0; }
  .bild-spalte-innen {
    position: sticky;
    top: var(--qn-ankerabstand, 0px);
    height: calc(100svh - var(--qn-ankerabstand, 0px));
    overflow: hidden;
  }
  .buehne {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #041824;
    box-shadow: var(--sch-tief);
  }
  .buehne picture,
  .buehne img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Schleier: wird mit der Tiefe dichter */
  .schleier {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(3, 15, 25, .15), rgba(2, 9, 15, .97));
    opacity: calc(var(--tiefen-frac) * .74 + .08);
    transition: opacity .5s ease;
    pointer-events: none;
  }

  /* ----- Tiefenmesser links oben IM Bild ------------------------------- */
  .skala {
    position: absolute;
    left: clamp(12px, 2.2vw, 22px);
    top: clamp(12px, 2.4vh, 20px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    font: 400 .64rem/1 var(--qn-schriftfamilie);
    letter-spacing: .16em;
    font-variant-numeric: tabular-nums;
    color: #F0F7FF;
    text-shadow: 0 1px 2px rgba(1, 10, 18, .9);
    pointer-events: none;
  }
  /* Eigenes, zurueckhaltendes Gehaeuse: Die Skala liegt ueber hellem
     Himmel, dunklem Wasser und wandernder Truebung (5,8:1). */
  .skala::before {
    content: "";
    position: absolute;
    inset: -11px -16px -11px -12px;
    z-index: -1;
    background: rgba(3, 16, 27, .62);
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .7);
  }
  .skala span { display: flex; align-items: center; gap: 8px; }
  .skala i { display: block; width: 16px; height: 1px; background: rgba(230, 242, 252, .55); }
  /* Der Laeufer trifft die Zeilenmitten, nicht die Kante der Leiste. */
  .skala .jetzt {
    position: absolute;
    left: -2px;
    top: calc(.32rem - 1px + var(--tiefen-frac) * (100% - .64rem));
    width: 20px;
    height: 2px;
    background: var(--orange);
    box-shadow: 0 0 10px 2px rgba(255, 136, 0, .6);
    transition: top .5s ease;
  }
  @media (max-width: 400px) { .skala { font-size: .58rem; gap: 7px; } }

  /* ----- Marken im Bild ------------------------------------------------ */
  .poi { position: absolute; left: 50%; top: 50%; z-index: 4; width: 0; height: 0; }
  html:not(.js) .poi { display: none; }
  .punkt {
    position: absolute;
    left: -7px;
    top: -7px;
    width: 14px;
    height: 14px;
    background: rgba(226, 238, 248, .20);
    border: 1.5px solid rgba(214, 232, 244, .60);
    box-shadow: 0 0 0 1px rgba(2, 12, 20, .35);
    transition: background .25s ease, border-color .25s ease, scale .25s ease;
  }
  /* Ein Wort je Marke - etwas oberhalb, damit die Linie frei darunter
     durchlaeuft. Dekorativ: Die Buehne ist aria-hidden. */
  .wort {
    position: absolute;
    left: 15px;
    top: -1.55em;
    padding: .36em .52em;
    white-space: nowrap;
    font: 500 .62rem/1 var(--qn-schriftfamilie);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #EAF4FF;
    background: rgba(3, 16, 27, .52);
    opacity: .5;
    transition: opacity .3s ease, background .3s ease;
  }
  .poi.links .wort { left: auto; right: 15px; }
  .poi.aktiv { z-index: 6; }
  .poi.aktiv .wort {
    opacity: 1;
    color: #FFFFFF;
    background: rgba(3, 16, 27, .82);
    box-shadow: 0 8px 18px -9px rgba(0, 0, 0, .75);
  }
  .poi.aktiv .punkt { background: var(--rot); border-color: #FFFFFF; scale: 1.18; }
  .poi.aktiv .punkt::before { content: ""; position: absolute; inset: -9px; border: 1px solid var(--rot); }
  /* Zweiter Ring laeuft nach aussen; der feste Rahmen bleibt stehen. */
  .poi.aktiv .punkt::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid var(--rot);
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes marke-puls {
      0%   { transform: scale(1);   opacity: .85; }
      70%  { transform: scale(2.1); opacity: 0; }
      100% { transform: scale(2.1); opacity: 0; }
    }
    .poi.aktiv .punkt::after { animation: marke-puls 2.8s cubic-bezier(.2, .65, .3, 1) infinite; }
  }

  /* Verbindungslinie ueber der ganzen Sektion - Endpunkte misst das Skript. */
  .verbindung {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .verbindung.da { opacity: 1; }
  .verbindung line { stroke: var(--rot); stroke-width: 1.6; stroke-linecap: round; }

  /* ----- Rechte Spalte: Vorspann ----------------------------------------- */
  .inhalt-spalte { grid-area: inhalt; min-width: 0; padding-block: clamp(2rem, 5vh, 3.2rem) 0; }

  .vorspann { padding-block: clamp(1.4rem, 4vh, 2.6rem) clamp(2.6rem, 7vh, 4rem); }
  .vorspann-vor { display: flex; align-items: center; gap: .6em; margin-bottom: 1.2rem; }
  .vorspann-vor > span:last-child {
    font: 500 .74rem/1.4 var(--qn-schriftfamilie);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--hell-2);
  }
  .vorspann-vor .wuerfel { --k: 1.05em; flex: none; margin-right: .1em; }
  @media (prefers-reduced-motion: no-preference) {
    .vorspann-vor .wuerfel { animation: qn-dreh 42s linear infinite; }
  }
  .vorspann h1 { max-width: 14ch; margin-bottom: .42em; }
  .vorspann h1 em { font-style: normal; color: var(--orange); }
  .vorspann .lead { max-width: 38ch; color: var(--hell-2); }
  .vorspann .lead > * + * { margin-top: 1em; }
  /* Garagentor im Vorspann: weniger seitliche Luft, damit Haupt- und
     Nebenknopf ab ~1280 px nebeneinander passen (wie in der Vorlage). */
  .vorspann .knopfzeile .gt { --gt-luft-x: 1.6em; }

  .vorspann-hinweis {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-top: 1.4rem;
    padding-left: .8em;
    border-left: 2px solid rgba(255, 136, 0, .55);
    font-size: .82rem;
    color: var(--hell-2);
  }
  .vorspann-hinweis .pfeil {
    flex: none;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
    transform: rotate(45deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hinweis-wippen {
      0%, 100% { transform: rotate(45deg) translate(0, 0); }
      50%      { transform: rotate(45deg) translate(3px, 3px); }
    }
    .vorspann-hinweis .pfeil { animation: hinweis-wippen 2.4s ease-in-out infinite; }
  }

  /* ----- Rechte Spalte: die Ebenen --------------------------------------
     Jede Ebene liegt wie eine Platte auf der darunter: helle Oberkante,
     weicher Schatten direkt darunter. */
  .schicht {
    position: relative;
    min-height: 64vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.2rem, 7vh, 3.6rem) 0 clamp(2.2rem, 7vh, 3.6rem) clamp(1rem, 2.2vw, 1.8rem);
    border-top: 1px solid rgb(255 255 255 / 57%);
    box-shadow: inset 0 14px 26px -22px rgba(0, 0, 0, .95);
    transition: opacity .4s ease, background .4s ease, box-shadow .4s ease;
  }
  .js .schicht.aktiv {
    background: #3A3A3A;
    box-shadow: inset 0 14px 26px -22px rgba(0, 0, 0, .95), var(--sch-blatt);
  }
  /* Zuruecktreten ja, unlesbar nein. Die Vorlage hatte .78 - damit faellt
     der orange Kicker (#FFA94D, .72rem) auf 4,3:1 und reisst AA. Bei .85
     sind es 4,9:1 (axe-geprueft 21.10.2026). */
  .js .schicht:not(.aktiv) { opacity: .85; }
  /* Rote Kante der aktiven Ebene: ueber die volle Hoehe der Platte
     (Dirk, 21.10.2026 - in der Vorlage war sie um das Polster eingerueckt). */
  .schicht::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rot);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .schicht.aktiv::before { opacity: 1; }
  .schicht:last-child { padding-bottom: clamp(4rem, 10vh, 6rem); }

  .schicht .snr {
    margin: 0 0 .8rem;
    font: 500 .72rem/1 var(--qn-schriftfamilie);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FFA94D;
  }
  .schicht h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 16ch; margin-bottom: .55rem; }
  .zwei-spalten .schicht__text { color: var(--hell-2); font-size: clamp(.95rem, .9rem + .2vw, 1.04rem); }
  .zwei-spalten .schicht__text > * { max-width: 44ch; }
  .zwei-spalten .schicht__text > * + * { margin-top: 1em; }
  .zwei-spalten .schicht__text strong { color: var(--hell); font-weight: 600; }

  /* ----- Telefon und Tablet hochkant: Bild oben, Text darunter ---------
     Zwei Dinge entscheiden, sonst steht der aktive Text hinter dem Bild:
     Das Bild belegt nur einen Teil der Hoehe, und die Blickachse im
     Skript liegt UNTER der Bildkante. */
  @media (max-width: 900px) {
    .zs-gitter { display: block; }
    .bild-spalte {
      position: sticky;
      top: var(--qn-ankerabstand, 0px);
      z-index: 5;
      height: var(--bildh);
    }
    .bild-spalte-innen { position: static; height: 100%; }
    /* Weiche Kante: der Text taucht ab, statt mitten in der Zeile
       abgeschnitten zu werden. */
    .bild-spalte::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 2.4rem;
      background: linear-gradient(180deg, var(--carbon) 18%, rgba(51, 51, 51, 0));
      pointer-events: none;
    }
    .schleier { background: linear-gradient(180deg, rgba(3, 15, 25, .34), rgba(2, 9, 15, .92)); }
    .poi:not(.aktiv) .wort { display: none; }
    .wort { font-size: .58rem; letter-spacing: .1em; }
    .inhalt-spalte { padding-top: .6rem; }
    .vorspann { padding-top: clamp(1.4rem, 5vw, 2.2rem); }
    .schicht { min-height: 0; padding-block: clamp(1.6rem, 5vh, 2.6rem); }
  }
  @media (max-width: 480px) { .zwei-spalten { --bildh: 34svh; } }
  @media (max-width: 900px) and (orientation: landscape) { .zwei-spalten { --bildh: 52svh; } }
}