/* =========================================================================
   QUADRONET Layout - Abschnitte, Materialien, schraege Keile, Fuss
   -------------------------------------------------------------------------
   DAS MODELL: Jedes Inhaltselement steht direkt im <main> (Template
   Standard.html) und laeuft in voller Breite. Sein Material waehlt der
   Redakteur im Feld "Rahmen":

       frame-default       Carbon  #333333 (= Seitengrund)
       frame-m-paper       Papier  #F7F5F2
       frame-m-anthrazit   Anthrazit #1F3140

   Gleiches Material hintereinander verschmilzt zu EINEM Abschnitt.
   Wechselt das Material, schiebt sich ein um 8 Grad gedrehter Keil in der
   Farbe des oberen Elements in das untere - genau wie im Entwurf. Die
   Farbe des Keils kommt aus dem Geschwister-Selektor (+), nicht aus
   JavaScript und nicht aus dem Template.

   Wie der Keil entsteht: ::before sitzt bei bottom:100%, also OBERHALB des
   Elements, und dreht sich um seine untere linke Ecke in das Element
   hinein. overflow:clip schneidet ab, was oben herausragt. Beides gehoert
   zusammen. Das Polster oben (Breite x tan 8 Grad) haelt den Text aus dem
   Keil heraus.

   Die Inhaltsbreite begrenzt padding-inline: Der Hintergrund laeuft bis an
   den Rand, der Inhalt bleibt in --qn-breite. 100 % bezieht sich dabei auf
   die Breite von <main>, also auf die Fensterbreite.
   ========================================================================= */

@layer qn.theme {

  /* ----- Huelle (Kopf, Fuss, eigene Templates) -------------------------- */
  .huelle {
    width: 100%;
    max-width: var(--qn-breite);
    margin-inline: auto;
    padding-inline: var(--qn-rand);
  }

  /* ----- Jedes Element ein Abschnitt ----------------------------------- */
  .qn-inhalt > .frame {
    --oben:  clamp(.9rem, 1.8vw, 1.5rem);
    --unten: clamp(.9rem, 1.8vw, 1.5rem);
    --keilraum: 0px;
    --zusatz-oben: 0px;
    --zusatz-unten: 0px;

    position: relative;
    overflow: clip;
    margin: 0;
    padding-inline: max(var(--qn-rand), (100% - var(--qn-breite)) / 2 + var(--qn-rand));
    padding-block: calc(var(--keilraum) + var(--oben) + var(--zusatz-oben))
                   calc(var(--unten) + var(--zusatz-unten));
    background: var(--carbon);
    color: var(--qn-schrift);
  }
  /* Inhalt liegt ueber dem Keil */
  .qn-inhalt > .frame > * { position: relative; z-index: 1; }

  /* Abstaende aus dem Backend ("Abstand davor/danach") werden zu Polster,
     nicht zu Margin - sonst klafft zwischen zwei Abschnitten ein Streifen
     Seitengrund. */
  .qn-inhalt > .frame-space-before-extra-small { --zusatz-oben: var(--qn-raum-xs); }
  .qn-inhalt > .frame-space-before-small       { --zusatz-oben: var(--qn-raum-md); }
  .qn-inhalt > .frame-space-before-medium      { --zusatz-oben: var(--qn-raum-xl); }
  .qn-inhalt > .frame-space-before-large       { --zusatz-oben: var(--qn-raum-2xl); }
  .qn-inhalt > .frame-space-before-extra-large { --zusatz-oben: var(--qn-raum-3xl); }
  .qn-inhalt > .frame-space-after-extra-small  { --zusatz-unten: var(--qn-raum-xs); }
  .qn-inhalt > .frame-space-after-small        { --zusatz-unten: var(--qn-raum-md); }
  .qn-inhalt > .frame-space-after-medium       { --zusatz-unten: var(--qn-raum-xl); }
  .qn-inhalt > .frame-space-after-large        { --zusatz-unten: var(--qn-raum-2xl); }
  .qn-inhalt > .frame-space-after-extra-large  { --zusatz-unten: var(--qn-raum-3xl); }

  /* ----- Materialien --------------------------------------------------- */
  .qn-inhalt > .frame-m-anthrazit { background: var(--anthrazit); }

  .frame-m-paper {
    --qn-schrift:       var(--ink);
    --qn-schrift-leise: var(--dunkel-2);
    --qn-schrift-link:  var(--orange-ink);
    --qn-linie-fein:    rgba(22, 36, 47, .16);
    --qn-linie:         rgba(22, 36, 47, .24);
    --qn-linie-stark:   rgba(22, 36, 47, .45);
    --qn-fokus:         var(--orange-ink);
    color-scheme: light;
  }
  .qn-inhalt > .frame-m-paper { background: var(--paper); }
  .frame-m-paper ::selection { background: var(--orange-ink); color: #fff; }

  /* ----- Anfang eines Abschnitts: Materialwechsel ----------------------
     Vier Faelle, zusammen vollstaendig. Jeder setzt die Keilfarbe auf das
     Material DARUEBER. */
  .qn-inhalt > .frame-m-paper + .frame:not(.frame-m-paper)          { --keil: var(--paper);     --keilkante: rgba(22, 36, 47, .22); }
  .qn-inhalt > .frame-m-anthrazit + .frame:not(.frame-m-anthrazit)  { --keil: var(--anthrazit); --keilkante: rgba(255, 255, 255, .34); }
  .qn-inhalt > .frame:not(.frame-m-paper, .frame-m-anthrazit) + .frame:is(.frame-m-paper, .frame-m-anthrazit),
  .qn-inhalt > .frame:is(.frame-m-paper, .frame-m-anthrazit):first-child { --keil: var(--carbon); --keilkante: rgba(255, 255, 255, .34); }

  :is(
    .qn-inhalt > .frame-m-paper + .frame:not(.frame-m-paper),
    .qn-inhalt > .frame-m-anthrazit + .frame:not(.frame-m-anthrazit),
    .qn-inhalt > .frame:not(.frame-m-paper, .frame-m-anthrazit) + .frame:is(.frame-m-paper, .frame-m-anthrazit),
    .qn-inhalt > .frame:is(.frame-m-paper, .frame-m-anthrazit):first-child
  ) {
    --keilraum: calc(var(--tan) * 100%);
    --oben: clamp(1.8rem, 3vw, 3.2rem);
  }

  :is(
    .qn-inhalt > .frame-m-paper + .frame:not(.frame-m-paper),
    .qn-inhalt > .frame-m-anthrazit + .frame:not(.frame-m-anthrazit),
    .qn-inhalt > .frame:not(.frame-m-paper, .frame-m-anthrazit) + .frame:is(.frame-m-paper, .frame-m-anthrazit),
    .qn-inhalt > .frame:is(.frame-m-paper, .frame-m-anthrazit):first-child
  )::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    z-index: 0;
    width: 104%;
    height: 26vw;
    min-height: 140px;
    transform-origin: 0 100%;
    transform: rotate(var(--winkel));
    background: var(--keil);
    border-bottom: 1px solid var(--keilkante);
    /* Der Schatten dreht mit dem Keil und liegt damit genau auf der Schraege. */
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .62);
    pointer-events: none;
  }

  /* ----- Ende eines Abschnitts: viel Luft nach unten -------------------- */
  .qn-inhalt > .frame-m-paper:has(+ .frame:not(.frame-m-paper)),
  .qn-inhalt > .frame-m-anthrazit:has(+ .frame:not(.frame-m-anthrazit)),
  .qn-inhalt > .frame:not(.frame-m-paper, .frame-m-anthrazit):has(+ .frame:is(.frame-m-paper, .frame-m-anthrazit)),
  .qn-inhalt > .frame:last-child {
    --unten: clamp(3rem, 5.6vw, 5.6rem);
  }

  /* ----- Textfluss im Abschnitt ----------------------------------------
     Das Fundament setzt alle Margins auf 0. Hier der Rhythmus: Abstand nur
     nach OBEN, nie nach unten - so addiert sich nichts. */
  .qn-inhalt > .frame > * + *,
  .ce-bodytext > * + * { margin-block-start: 1em; }
  .qn-inhalt > .frame > header + *,
  .ce-bodytext > header + * { margin-block-start: clamp(.9rem, 1.6vw, 1.3rem); }
  :is(.qn-inhalt > .frame, .ce-bodytext) > * + :is(h2, h3) { margin-block-start: 1.6em; }
  .frame header > * + * { margin-block-start: .45em; }

  .frame :is(p, li) { max-width: 65ch; }
  .frame header :is(h1, h2) { max-width: 62ch; }
  .frame :is(ul, ol):not([role="list"]) { padding-inline-start: 1.25em; }
  .frame li + li { margin-block-start: .35em; }
  .frame li::marker { color: var(--orange); }
  .frame-m-paper li::marker { color: var(--orange-ink); }

  /* ----- Layout "Ueberschrift links, Inhalt rechts" (layout = 10) ------- */
  @media (min-width: 900px) {
    .qn-inhalt > .frame-layout-10 {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      column-gap: clamp(1.6rem, 4vw, 4rem);
      align-items: start;
      align-content: start;
    }
    .qn-inhalt > .frame-layout-10 > * { grid-column: 2; }
    .qn-inhalt > .frame-layout-10 > header {
      grid-column: 1;
      grid-row: 1 / span 40;
    }
    .qn-inhalt > .frame-layout-10 > header + * { margin-block-start: 0; }
    .qn-inhalt > .frame-layout-10 > header :is(h1, h2) {
      font-size: clamp(2.1rem, 5vw, 3.9rem);
      max-width: 14ch;
    }
  }

  /* ----- Fuss ----------------------------------------------------------
     Traegt oben denselben Keil - in der Farbe des LETZTEN Abschnitts.
     Endet die Seite in Carbon, gibt es keinen Materialwechsel und also
     keinen Keil; dann trennt eine feine Linie. */
  .fuss {
    --keilraum: 0px;
    position: relative;
    overflow: clip;
    padding-top: calc(var(--keilraum) + clamp(1.6rem, 2.6vw, 2.8rem));
    background: var(--carbon);
    color: var(--hell);
    border-top: 1px solid var(--qn-linie-fein);
  }
  body:has(.qn-inhalt > .frame-m-paper:last-child) .fuss     { --keil: var(--paper);     --keilkante: rgba(22, 36, 47, .22); }
  body:has(.qn-inhalt > .frame-m-anthrazit:last-child) .fuss { --keil: var(--anthrazit); --keilkante: rgba(255, 255, 255, .34); }
  body:has(.qn-inhalt > :is(.frame-m-paper, .frame-m-anthrazit):last-child) .fuss {
    --keilraum: calc(var(--tan) * 100%);
    border-top: 0;
  }
  body:has(.qn-inhalt > :is(.frame-m-paper, .frame-m-anthrazit):last-child) .fuss::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 104%;
    height: 26vw;
    min-height: 140px;
    transform-origin: 0 100%;
    transform: rotate(var(--winkel));
    background: var(--keil);
    border-bottom: 1px solid var(--keilkante);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .62);
    pointer-events: none;
  }
  /* Alles im Fuss liegt ueber dem Keil. Inhalt und Gestaltung des Fusses:
     45-fuss.css (Einzugsgebiet, seit 22.10.2026). */
  .fuss > * { position: relative; z-index: 1; }
}