/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InterDisplay-Regular.woff2") format("woff2");
}

:root{
  --padding: 1rem;                 /* = 16px */
  --color-black: #000;
  --color-white: #fff;
  --color-text:  var(--color-black);
  --color-bg:    var(--color-white);

  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size: 1rem;

  /* Viewport/Stream (Breite des rechten Rails kommt aus stream.css) */
  --viewport-w: 100svw;
  --stream-w:   var(--stream-w, 100svw); /* Fallback: XS/S = 100% */

  /* Branding läuft nur über die linke Restbreite */
  --branding-span: calc(100svw - 2 * var(--padding)); /* XS/S: volle Innenbreite */
}
@media (min-width: 768px){
  :root{
    --branding-span: clamp(
      160px,
      calc(100svw - var(--stream-w) - 2 * var(--padding)),
      100svw
    );
  }
}

html{
  font-family: var(--font-family-sans);
  font-size: var(--font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  overflow-x: hidden;
  animation: fadein .5s ease-in;
  /* WICHTIG: kein isolate – sonst kann difference nicht gegen den Backdrop blenden */
  isolation: auto;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6{ font: inherit; line-height: inherit; }

.text p, .text ul, .text ol{
  margin-bottom: 1.25rem;
  line-height: 1.25;
  max-width: 30rem;
}
.text ul, .text ol{ margin-left: 1rem; }
.text ul p, .text ol p{ margin-bottom: 0; }
.text ul > li{ list-style: square; }
.text ol > li{ list-style: decimal; }

/* ==========================================================================
   Links (Basis)
   ========================================================================== */
a{
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}

/* ==========================================================================
   Header & Branding (28–35–50)
   ========================================================================== */
body > header{
  position: fixed;
  top: 0; bottom: 0; left: 0; right: auto;
  display: flex;
  align-items: center;                 /* vertikal mittig */
  width: 100%;
  padding-inline: var(--padding);
  background: transparent;
  z-index: 50;                         /* über Drawer/Stream */
  pointer-events: none;                /* blockiert nicht den Stream */

  /* KEINE Stacking-Context-Fallen */
  transform: none !important;
  isolation: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

body > header h1{ margin: 0; width: 100%; }
body > header a{ pointer-events: auto; text-decoration: none; color: inherit; }
body > header a::after{ content: none; }

body > header .columns{
  position: relative;
  width: 100%;
  max-width: var(--branding-span);     /* ragt nie in den Stream */
  height: 1em;
  line-height: 1;
  background: transparent;
}
body > header .columns > div{
  position: absolute;
  top: 0;
  white-space: nowrap;
  font-weight: 500;
}
/* 28/35/50 exakt */
body > header .columns .one{   left: 0;                                  transform: none; }
body > header .columns .two{   left: calc(100% * (28 / 113));            transform: translateX(-50%); }
body > header .columns .three{ left: calc(100% * (63 / 113));            transform: none; }

/* ==========================================================================
   Top-left link (Index-Drawer)
   ========================================================================== */
body > header .toplink{
  position: absolute;
  top:  calc(env(safe-area-inset-top, 0px) + var(--padding));
  left: calc(env(safe-area-inset-left, 0px) + var(--padding));
  margin: 0; padding: 0;
  pointer-events: none;      /* blockiert nichts darunter */
  transform: translateZ(0);  /* iOS-Jitter fix */
  z-index: 60;               /* über Branding */
  background: transparent;

  /* KEINE Stacking-Context-Fallen */
  isolation: auto !important;
  filter: none !important;
  opacity: 1 !important;
}
body > header .toplink a{
  pointer-events: auto;      /* Link bleibt klickbar */
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Footer (schlank)
   ========================================================================== */
footer{
  position: fixed;
  bottom: var(--padding);
  left: var(--padding);
  right: var(--padding);
  background: transparent;
  z-index: 40;               /* unter Header, über Stream/Drawer */
  pointer-events: none;

  /* KEINE Stacking-Context-Fallen */
  transform: none !important;
  isolation: auto !important;
  filter: none !important;
  opacity: 1 !important;
}
footer ul{ list-style: none; }
footer li{
  margin-bottom: calc(var(--padding)/6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
footer a{ pointer-events: auto; text-decoration: none; color: inherit; }

/* ==========================================================================
   Arrow-Links (Hover-Effekt)
   ========================================================================== */
:root{
  --arrowlink-shift: 1.05em;
  --arrowlink-speed: 180ms;
  --arrowlink-delay: 60ms;
}
.arrowlink{
  position: relative;
  display: inline-block;
  padding-left: 0;
  text-decoration: none;
  transition: padding-left var(--arrowlink-speed) ease-out;
}
.arrowlink::before{
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--arrowlink-speed) ease-out var(--arrowlink-delay);
}
.arrowlink:hover,
.arrowlink:focus-visible{ padding-left: var(--arrowlink-shift); }
.arrowlink:hover::before,
.arrowlink:focus-visible::before{ opacity: 1; }
.arrowlink:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==========================================================================
   Blend-Logik (robust & hybrid)
   ========================================================================== */

/* 0) Sicherheit: Stream/Drawer sollen NICHT isolieren */
.stream,
.stream__rail,
#index-panel,
.indexpanel,
.indexpanel__scroller,
#index-overlay{
  isolation: auto !important;
}

/* 1) Mobile: immer Difference – Branding/Toplink/Footer blenden über Bildern */
@media (max-width: 767.98px) {
  body > header .columns > div,
  body > header .toplink a,
  footer a {
    color: #fff !important;                 /* Weiß als Blend-Basis */
    mix-blend-mode: difference !important;  /* echter Difference-Effekt */
    -webkit-font-smoothing: antialiased;
  }
}

/* 2) Desktop:
      - Drawer zu  : normal schwarz
      - Drawer offen: Difference aktiv (html.drawer-open Flag aus JS)
*/
@media (min-width: 768px) {
  /* Standard (Drawer geschlossen) */
  body > header .columns > div,
  body > header .toplink a,
  footer a {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }

  /* Drawer offen → Difference */
  html.drawer-open body > header .columns > div,
  html.drawer-open body > header .toplink a,
  html.drawer-open footer a {
    color: #fff !important;
    mix-blend-mode: difference !important;
    -webkit-font-smoothing: antialiased;
  }
}

/* 3) Fallback ohne mix-blend-mode */
@supports not (mix-blend-mode: difference) {
  body > header .columns > div,
  body > header .toplink a,
  footer a {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
ul{ list-style: none; }
img{ max-width: 100%; height: auto; }

/* Optional: sticky Artikel-Titel falls genutzt */
.article-title{
  position: sticky;
  top: calc(var(--padding)*1.75);
  margin-top: calc(var(--padding)*1.25);
  z-index: 30;
}

/* === BLEND PATCH (robust über Container) =============================== */
/* 1) Sicherheit: Container dürfen keinen eigenen Stacking-Context erzeugen */
body > header,
body > header .toplink,
footer{
  background: transparent !important;
  isolation: auto !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 2) Mobile: immer Difference auf den CONTAINERN */
@media (max-width: 767.98px){
  body > header,
  body > header .toplink,
  footer{
    mix-blend-mode: difference !important;
    color: #fff !important; /* Weiß als Blend-Basis -> invertiert zuverlässig */
  }
}

/* 3) Desktop:
      - Drawer zu      → normal schwarz
      - Drawer geöffnet → Difference wie auf Mobile
*/
@media (min-width: 768px){
  /* Default (zu) */
  body > header,
  body > header .toplink,
  footer{
    mix-blend-mode: normal !important;
    color: #000 !important;
  }
  /* Offen */
  html.drawer-open body > header,
  html.drawer-open body > header .toplink,
  html.drawer-open footer{
    mix-blend-mode: difference !important;
    color: #fff !important;
  }
}

/* 4) Fallback: Browser ohne mix-blend-mode → klassisch schwarz */
@supports not (mix-blend-mode: difference){
  body > header,
  body > header .toplink,
  footer{
    mix-blend-mode: normal !important;
    color: #000 !important;
  }
}