html, body { touch-action: manipulation; }
header, footer { contain: layout style; }


/* Text-Auswahl einfärben */
::selection {
  background: #000;  /* rote Unterlegung */
  color: #FFF600;          /* weiße Schrift auf rot */
}

::-moz-selection {
  background: #000;
  color: #FFF600;
}



/* Smooth fade-in für Lazy-Media */
img.lazy,
picture.lazy img,
video.lazy {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease-out, transform .8s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}



/* sichtbar, sobald geladen */
img.lazy.loaded,
picture.lazy img.loaded,
video.lazy.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Stage-Video NICHT einfaden (bleibt sofort sichtbar) */
#stageVideo.lazy,
#stageVideo.loaded { 
  opacity: 1;
  transform: none;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  img.lazy,
  picture.lazy img,
  video.lazy {
    transition: none;
    transform: none;
  }
}


/* Nur Text-Container, nicht die Medien-Wrapper */
@supports (content-visibility: auto) {
  .content-inner {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
  }
}

/* Medien-Container: KEIN content-visibility */
.gallery,
.figure,
.media,
.gitem,
.media__figure {
  contain-intrinsic-size: 800px;
}


.spacer-120 { height: 120px; width: 100%; display: block; }
.spacer-240 { height: 240px; width: 100%; display: block; }
.spacer-400 { height: 400px; width: 100%; display: block; }



/* –—————————————————————————————————————————MEDIA ————————————————————————*/

.media {
  position: relative;
  margin: var(--space-4) auto;
  display: grid;
  gap: var(--space-1);
}

.media--40  { width: 40%;  max-width: 900px; }
.media--75  { width: 75%;  max-width: 1400px; }
.media--100 { width: 100%; max-width: none;}

.media--100 img,
.media--100 video {
  border-radius: 0 !important;
}

.media img,
.media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  background: #fff;
}

/* Caption */
.media__caption {
  font-size: var(--fz-caption);
  color: var(--muted);
  text-align: left;
  padding: 0  var(--space-2);
}


/* ============= Play Overlay ============= */
.media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}

.media:hover .media__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

.media__play img {
  width: 48px;
  height: auto;
}



/* Fade-In bei Lazy Load */
.media img.lazy,
.media video.lazy,
.media iframe {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.media img.loaded,
.media video.loaded,
.media iframe.loaded {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1200px) {
  .media--40  { width: 50%; }
  .media--75  { width: 80%; }
  .media--100 { width: 100%; }
}

@media (max-width: 810px) {
  .media--40  { width: 95%; }
  .media--75  { width: 95%; }
  .media--100 { width: 95%; }

  .spacer-120 { height: 60px; width: 100%; display: block; }
  .spacer-240 { height: 120px; width: 100%; display: block; }
  .spacer-400 { height: 200px; width: 100%; display: block; }
}



/* ==================== TABLE WRAPPER ================================================================================ */
.table-wrapper {
  width: 75%;
  max-width: 1400px;
  margin: var(--space-3, 4rem) auto;
  overflow-x: auto;            /* horizontales Scrollen erlaubt */
  -webkit-overflow-scrolling: touch; /* weiches Scrollen auf iOS */
  scrollbar-width: thin;       /* dezente Scrollbar */
  scrollbar-color: #999 #f2f2f2;
}

.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 3px;
}

/* ==================== TABLE BASE ==================== */
/* === Tabelle für Fließtext optimieren === */
.vga-table {
  table-layout: fixed;      /* stabile, gleichmäßige Spaltenbreiten */
  width: 100%;
  border-collapse: collapse;
  min-width: 810px;     
}

.vga-table th,
.vga-table td {
  vertical-align: top;      /* Text oben starten */
  padding: 2.3em 1em;
  border-bottom: 1px solid rgba(0,0,0,1.0);
  white-space: normal;      /* Umbrüche erlauben */
  overflow-wrap: anywhere;  /* bricht sehr lange Wörter/URLs */
  word-break: normal;       /* natürliches Wortverhalten */
  hyphens: auto;            /* Silbentrennung aktivieren (setzt lang Attribut) */
  line-height: 1.6;         /* Lesbarkeit */
}

.vga-table th {
  font-family: var(--font-sans-serif);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;              /* ✅ Headline linksbündig */
  font-weight: 400;
  text-transform: normal;
  border-bottom: 1px solid rgba(0,0,0,1.0);
}

.vga-table td p {
  font-size: clamp(0.85rem, 1.2vw, 1.2rem); /* etwas kleiner als Grundtext */
  line-height: 1.7;
  margin: 0 0 0.75em 0;
}

.vga-table td p:last-child {
  margin-bottom: 0;
}

/* Optional: Utility, falls du mal eine Zelle ohne Umbruch brauchst */
.vga-table .is-nowrap { white-space: nowrap; }

/* Mobile – etwas luftiger & gut lesbar */
@media (max-width: 810px) {
  .table-wrapper { width: 95%; }
  .vga-table { font-size: clamp(0.9rem, 1.8vw, 1rem); }
  .vga-table th, .vga-table td { padding: 0.85em 0.9em; }
}




/* ==================== MOBILE BEHAVIOR ==================== */
@media (max-width: 810px) {
  .table-wrapper {
    width: 95%;
    margin: var(--space-2, 2rem) auto;
  }
}







/* ======= Gallery Base =============================================================================================== */
.gallery {
  --gap: clamp(4px, 0.6vw, 10px);
  margin: var(--space-3) auto 180px;
  display: grid;
  gap: var(--gap);
}

/* Breitenvarianten (konsistent zu deinen Media-Komponenten) */
.gallery--40  { width: 40%;  max-width: 900px; }
.gallery--75  { width: 75%;  max-width: 1400px; }
.gallery--100 { width: 100%; max-width: none; }

/* Auto-Spalten (fallback) */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Spalten-Presets (optional) */
.gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.gitem { display: grid; gap: var(--space-1); }

.gitem img,
.gitem video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-s);
  background: #000;
}


/* Reset: Figure/Margins killen */
.gallery .gitem {
  margin: 0;               /* ← Standard-figure-Margin entfernen */
  display: grid;
  gap: clamp(2px, 0.5vw, 8px);  /* nur Bild↔Caption-Abstand */
}

/* Externer Abstand zwischen Kacheln = NUR Grid-Gap */
.gallery {
  --gap: clamp(4px, 0.6vw, 10px);
  gap: var(--gap);
}

/* (Optional) Caption etwas enger */
.gallery .gcap {
  margin: var(--space-1) 0;
  font-size: var(--fz-caption);
  color: var(--muted);
}



.gcap {
  font-size: var(--fz-caption);
  color: var(--muted);
}

/* Uniform-Height Modus (einheitliche Kachelhöhe per aspect-ratio) */
.gallery--uniform .gitem img,
.gallery--uniform .gitem video {
  /* Standard-Ratio für die Zeile, überschreibbar per inline --ratio */
  aspect-ratio: var(--ratio, var(--row-ratio, 16/9));
  height: auto;
  object-fit: cover;
}

/* Fade-in nutzt deinen Lazy-Loader (Klasse .loaded) */
.gallery img.lazy,
.gallery video.lazy {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.gallery img.loaded,
.gallery video.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* 100%: kein Border-Radius (wie gewünscht) 
.gallery--100 img { border-radius: 0; }*/




/* Responsive Tweaks */
@media (max-width: 1200px) {
  .gallery--40 { width: 50%; }
  .gallery--75 { width: 80%; }
}
@media (max-width: 810px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery--cols-3, .gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
}










/* ======= STAGE ======================================================================================== */
:root {
  --stage-bg: #000;
  --cue-size: 56px;
}

/* Container: eigener Stacking-Context + verlässliche Höhe */
.stage {
  position: relative;
  /* inset: 0;  <-- bitte entfernen */
  width: 100vw;

  /* Fallback-Kette für Höhe */
  height: 100vh;      /* Basis (alle Browser) */
  height: 100svh;     /* kleine Viewport-Höhe (Mobil-Toolbars berücksichtigt) */
  background: var(--stage-bg);
  overflow: clip;
  z-index: 0;
  isolation: isolate; /* schützt vor fremden Stacking-Context-Einflüssen */
}

/* Modernster Viewport-Fix (falls unterstützt) */
@supports (height: 100dvh) {
  .stage { height: 100dvh; } /* dynamic viewport → best on iOS */
}

/* Media über die Stage spannen */
.stage-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  background: var(--stage-bg);
  z-index: 0;
}

/* Scroll-Cue auf der Stage, aber unterhalb nachfolgender Sections */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vh, 40px);
  transform: translateX(-50%);
  width: var(--cue-size);
  height: var(--cue-size);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
  mix-blend-mode: difference;
  opacity: .9;
  z-index: 2;
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  transform: translateX(-50%) translateY(-2px);
  border-color: #fff;
  background: rgba(255,255,255,0.06);
  outline: none;
}
.scroll-cue svg { fill: #fff; display: block; }


/* ======= Accessibility & Motion ======= */
@media (prefers-reduced-motion: reduce) {
  .stage-media { animation: none !important; }
  /* Autoplay wird im JS pausiert – hier nur visuelle Beruhigung */
}

/* iOS Safaris Notch/Toolbar Workarounds */
@supports (height: 100dvh) {
  .stage { height: 100dvh; }
}







/* ==================== STAGE 60 ==================================================================================================== */
/* ==================== STAGE 60 – IMAGE CAROUSEL =============================================== */
.stage--60 {
  position: relative;
  width: 100vw;
  height: 70vh;
  height: 70svh;
  background: #000;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
}

/* Overlay für Bilddunkelung bei Image-Stage */
.stage--60.stage--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 0;
}

/* ==================== GALLERY IM STAGE-BEREICH =============================================== */

/* Wrapper der Gallery füllt die Stage komplett */
.stage--60 .image-gallery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Track: kein Flex mehr, Slides werden gestapelt */
.stage--60 .gallery-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Alle direkten Slides (Bilder/Videos) übereinander, per Opacity gesteuert */
.stage--60 .gallery-track > img,
.stage--60 .gallery-track > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

/* Sichtbarer Slide */
.stage--60 .gallery-track > img.visible,
.stage--60 .gallery-track > video.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==================== NAVIGATIONSZONEN (LINKS/RECHTS-KLICK) ================================== */

.stage--60 .nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 3;
  cursor: pointer;
  /* klickbar, aber optisch dezent */
  background: transparent;
  transition: background 2.25s ease;
}

.stage--60 .nav-zone.left  { left: 0; }
.stage--60 .nav-zone.right { right: 0; }

/* leichter Overlay-Hint bei Hover (nur Desktop) */
@media (hover: hover) {
  .stage--60 .nav-zone.left:hover {
    background: transparent;
  }
  .stage--60 .nav-zone.right:hover {
    background: transparent;
  }
}

/* ==================== PAGINATION DOTS ======================================================== */

.stage--60 .gallery-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vh, 32px);
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 4;
}

.stage--60 .gallery-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,1.0);
  transition: background 0.25s ease, transform 0.25s ease;
}

.stage--60 .gallery-dots .dot.active {
  background: #fff;
  transform: scale(1.1);
}

/* ==================== STAGE CONTENT (TEXT) =================================================== */

.stage--60 .stage-content {
  position: relative;
  z-index: 5;
  text-align: center;
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
}

.stage--60 .stage-content h1 {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 0.6em;
}

.stage--60 .stage-content p {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}


/* ==================== SCALE-IN (105%) für Images & Videos ====================== */

/* ============ KEN-BURNS ZOOM ANIMATION ============ */

@keyframes slowZoom {
  0%   { transform: scale(1);   }
  100% { transform: scale(1.10); }
}

/* Transform-Setup für Zoom */
.stage--60 .gallery-track > img,
.stage--60 .gallery-track > video {
  transform-origin: center;
  will-change: transform;
}

/* Nur der aktive Slide bekommt den Zoom */
.stage--60 .gallery-track > img.active,
.stage--60 .gallery-track > video.active {
  animation: slowZoom 12s ease-out forwards;
}

/* ==================== RESPONSIVE ============================================================= */

@media (max-width: 810px) {
  .stage--60 {
    height: 60svh;
  }

  .stage--60 .stage-content {
    width: 90%;
  }

  .stage--60 .stage-content h1 {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
  }

  /* Touch: kleinere Klickzonen */
  .stage--60 .nav-zone {
    width: 18%;
  }

  .stage--60 .gallery-dots {
  gap: 12px;
  }

  .stage--60 .gallery-dots .dot {
  width: 5px;
  height: 5px;
  }
}








/* ======= CONTENT BASE ================================================================================= */
/* ======= TOKENS & TYPO BASE ======= */
:root {
  /* Fonts */
  --font-serif: 'Newsreader', serif;
  --font-sans-serif: 'Inter', sans-serif;
  --font-2-sans-serif: 'OpenSans', sans-serif;

  /* Colors & Layout */
  --content-bg: #fff;
  --text: #000;
  --muted: #666;
  --max-ch: 72ch;

  /* Spacing */
  --space-1: clamp(8px, 1.8vw, 24px);
  --space-2: clamp(14px, 2.2vw, 48px);
  --space-3: clamp(52px, 4vw, 120px);
  --space-4: clamp(32px, 5vw, 160px);
  --radius-s: clamp(8px, 1.8vw, 24px);
  --radius-0: clamp(0px, 1.8vw, 0px);



  /* Type Scale */
  --fz-abstract: clamp(1.4rem, 1.6vw, 1.6rem);
  --fz-body: clamp(1.2rem, 1.1vw, 1.8rem);
  --lh-body: 1.6;
  --fz-h1: clamp(3.2rem, 4vw, 4rem);
  --fz-h2: clamp(2.3rem, 2.2vw, 3.25rem);
  --fz-h3: clamp(1.8rem, 1.6vw, 2.25rem);
  --fz-caption: clamp(0.85rem, 0.9vw, 0.95rem);
  --fz-prompt: clamp(1.2rem, 1.1vw, 1.8rem);
  --fz-date: clamp(0.85rem, 0.9vw, 0.95rem);
}

/* ======= CONTENT BASE ======= */
/* Vollbreite, weißer Hintergrund; Header/Abstract/Text beginnen UNTER der Stage,
   da die Stage eine eigene Section ist. Kein negatives Margin nötig. */


.content {
  position: relative;
  z-index: 1;
  margin: 0; /* sicherstellen, dass kein negativer Offset reinfunkt */
  width: 100%;
  background: var(--content-bg);
  color: var(--text);
  padding: var(--space-4) 0;
  font-family: var(--font-serif);
  font-weight: 400;
}

.content-inner {
  width: 40%;
  margin: 0 auto;
  margin-top: var(--space-2);
  max-width: 1100px;
}


.meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;;
  padding: 0 0 var(--space-1) 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid black;
}

.meta p {
  font-family: Inter,  sans-serif;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 300;
  line-height: 1.15 !important;
  color: black;
}

.meta-icon {
  width: 36px;
  height: 36px;
  border-radius: 27px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 810px) {
  .meta p {
  font-size: 12px !important;
}
}


.title { margin-bottom: var(--space-3); }

.title .abstract {
  font-size: var(--fz-abstract);
  line-height: 1.5;
  color: var(--text);
  margin-top: var(--space-1);
  max-width: var(--max-ch);
  font-weight: 300;
}

.title h1 {
  font-family: var(--font-sans-serif);
  font-size: var(--fz-h1);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: var(--max-ch);
  font-weight: 700;
}

.content h2 {
  font-family: var(--font-sans-serif);
  font-size: var(--fz-h2);
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.content h3 {
  font-family: var(--font-sans-serif);
  font-size: var(--fz-h3);
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin-top: var(--space-4);
  margin-bottom: calc(var(--space-1) * 0.75);
  color: #222;
  font-weight: 700;
}

.content p {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  max-width: var(--max-ch);
  hyphens: auto;
  font-weight: 350;
}

.content a {
    text-decoration: none;
    color: black;
    background-color: #FFF600; /* Gelber Hintergrund */
    padding: 2px 6px 2px 6px; /* Fügt etwas Platz um den Text hinzu */
    border-radius: 4px; /* Leicht abgerundete Ecken für einen sanfteren Look */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.content a:hover {
    background-color: black; /* Invertiert auf Schwarz beim Hover */
    color: white; /* Text wird weiß für Kontrast */
}

/* Blockquote */
blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
}
blockquote p {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.2 !important;
  font-style: italic;
  font-weight: 400;
}
blockquote cite {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-style: normal;
  font-size: 0.95em;
}

/* Figure + Caption */
.figure { margin: var(--space-3) 0; }
.figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-s);
  background: #eee;
}
.caption {
  font-size: var(--fz-caption);
  color: var(--muted);
  margin-top: calc(var(--space-2) * 1);
  max-width: var(--max-ch);
  padding: 0  var(--space-2);
}

.date {
  font-family: 'Inter', sans-serif;
  font-size: var(--fz-date);
  font-weight: 800 !important;
  color: #000;
  margin: 0;
  max-width: var(--max-ch);
  padding: 0 ;
}

/* ======= PROMPT BOX =================================================== */
.prompt {
  display: block;
  background: #000;               /* dezentes Grau */
  color: #fff;
  font-family: var(--font-serif,  'Newsreader', serif);
  font-size: var(--fz-prompt);
  line-height: 1.5;
  padding: 32px 48px;
  border-radius: 12px;
  margin: var(--space-2) 0;
  word-break: break-word;
}

/* Optional Hover (wenn du interaktive Prompts verlinkst) */
.prompt:hover {
  background: #FFF600;
  color: #000;
  transition: background .3s ease;
}


/* Media im Fließtext begrenzen */
.content-inner img,
.content-inner video {
  max-width: 100%;
  height: auto;
}

/* ======= Responsive ======= */
@media (max-width: 1200px) {
  .content-inner { width: 50%; }
}
@media (max-width: 810px) {
  .content-inner { width: 80%; }
  .content-header h1 { letter-spacing: 0; }
}
@media (max-width: 480px) {
  blockquote { padding: var(--space-2); }
}





/* ===== Related / Bookmark ================================================================================ */
.related-articles{
  width: 80%;
  max-width: 1600px;
  margin: var(--space-4, 6rem) auto var(--space-6, 8rem);
  content-visibility: auto;
  contain-intrinsic-size: 800px;
  padding: 24px 0;
}
.related-title{
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  padding: 0 1em;
  margin: 0 0 2rem 0;
}

.bookmark-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

.bookmark-card{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 14px;
  background-color: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .5s ease; /* <-- */
  will-change: transform, background-color;
  overflow: hidden;                 /* verhindert „unten rauslaufen“ */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari-Radius-Bug */
}

.bookmark-card * { min-width: 0; }

.bookmark-card:hover{
  transform: translateY(-2px);
  background-color: #FFF600; /* smooth Übergang */
  box-shadow: 0 16px 16px -16px rgba(0,0,0,.3);
  border-color: rgba(0,0,0,.01);
}


.bookmark-thumb{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 2 / 1;     /* schöne Landscape-Kachel */
  background: #f3f3f3;
  border-radius: 10px;
}


.bookmark-meta{
  display: grid;
  grid-template-rows: auto 1fr auto; /* title | desc | url row */
  min-width: 0;                      /* für Text-ellipsis wichtig */
}

.bookmark-title{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  margin: 0;
}

.bookmark-desc{
  font-family: 'Inter', sans-serif;
  font-size: clamp(.9rem, 1.2vw, .8rem);
  line-height: 1.5;
  color: rgba(0,0,0,.75);
  margin: 0 0 .8 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 2–3 Zeilen wie bei Notion */
  -webkit-box-orient: vertical;
}

.bookmark-url{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  min-width: 0;
  font-size: .9rem;
  color: rgba(0,0,0,.6);
}
.bookmark-favicon{
  width: 16px; height: 16px; border-radius: 3px; flex: 0 0 auto;
}
.bookmark-host{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Skeleton während Laden */
.bookmark-card.is-loading{ position: relative; }
.bookmark-card.is-loading::after{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(90deg,#f6f6f6 0%,#efefef 40%,#f6f6f6 80%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{ to{ background-position: -200% 0; } }


/* Responsiv */
@media (max-width: 1600px) {
  .bookmark-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* auf kleine Screens 1 Spalte */
@media (max-width: 900px) {
  .bookmark-grid {
    grid-template-columns: 1fr;
  }
  .bookmark-card{
    grid-template-columns: 1fr;
    align-items: start;             /* kein Stretch der Reihenhöhe */
    padding-bottom: 16px;           /* etwas Luft unten */
  }

  .bookmark-thumb {
    height: auto;      
    aspect-ratio: 2 / 1;
    margin-top: 0.75rem;
    object-fit: cover;
  }
}

/* ——————————————————————————————————————————————————————————————————Button CSS */
/* Buttons red */
.button-wrapper {
    font-family: var(--font-2-sans-serif, 'OpenSans', sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    width: 100%;
    padding: 0; 
    margin-top: 80px;
    margin-bottom: 80px;
    gap: 0px; /* Abstand reduziert */
}


.buttons {
    line-height: 100%; /* 28.8px */
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.button.primary {
    color: #fff;
    font-weight: 600;
    display: flex;
    height: 54px;
    padding: 0px 48px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    text-decoration: none;
    border: 8px solid #000;
    background: #000;
}

.button.primary:hover {
    color: #000;
    border: 8px solid #fff;
    background: #fff;
    box-shadow: 0px 12px 24px -24px rgba(0, 0, 0, 0.5);
}


.button.secondary {
    color: #000;
    font-weight: 600;
    display: flex;
    height: 54px;
    padding: 0px 48px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    text-decoration: none;
    border: 3px solid var(--red-action, #000);
    background: transparent;
}
.button.secondary:hover {
    color: #000;
    border: 3px solid #FFF600;
    background: #FFF;
}




.button.primary,
.button.secondary {
    transition: all 0.3s ease-in-out; /* Sanfter Übergang */
}

.button.primary:hover,
.button.secondary:hover {
    transform: translateY(-3px); /* Hebt den Button leicht an */
    box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5); /* Weicherer Schatten */
}








//* ======= TEASERS ============================================================================= */
/* ======= TEASER SECTION HEADLINE ======= */
.teasers-section {
  width: 75%;
  margin: var(--space-3, 4rem) auto;
}

.teasers-headline {
  font-family: var(--font-2-sans-serif, 'OpenSans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0 20%;
  line-height: 1.3;
  margin: 0 0 48px 0; /* Abstand nach unten */
  color: #000;
  text-align: center;
}

/* ---------------------------
   Begrenzung der XL-Teaser auf 75 % Breite
--------------------------- */
.teasers--75 {
  width: 75%;
  max-width: 1400px;
  margin: 0 auto var(--space-3, 4rem) auto; /* zentriert */
}

.teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);           /* Desktop: 3 Spalten */
  gap: clamp(10px, 1.2vw, 20px);
}

.teaser-card {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 4:5 – wie gewünscht (Default für normale Karten) */
.teaser-media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Media als „Background“ – full-bleed + smooth zoom */
.teaser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* füllt den Container vollständig */
  display: block;
  transform: scale(1);          /* Basiszustand */
  transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.22,.61,.36,1); /* smooth */
  will-change: transform;       /* Performance hint */
  backface-visibility: hidden;  /* Safari/Chrome Rendering-Glitches vermeiden */
}

/* Hover/Focus → sanftes Einzoomen des Media-Inhalts */
.teaser-card:hover .teaser-bg,
.teaser-card:focus-visible .teaser-bg {
  transform: scale(1.12);       /* 4–8% ist “sweet spot” */
}

/* Optional: motion-respect */
@media (prefers-reduced-motion: reduce) {
  .teaser-bg { transition: none; }
}

/* 20% Abdunkler (auf Black-Box-Logik aufbauend) */
.teaser-media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.40); /* 20% black */
  pointer-events: none;
  transition: background .25s ease;
}

/* Headline über Bild/Video */
/* ===== Hover Animation für Title ===== */
.teaser-title {
  position: absolute;
  padding-left: clamp(24px, 2.2vw, 48px);
  padding-right: clamp(24px, 2.2vw, 48px);
  bottom: clamp(40px, 2.2vw, 72px);
  z-index: 2;
  color: #fff;
  font-family: var(--font-2-sans-serif, 'OpenSans', sans-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 1.8vw, 2.0rem);
  line-height: 1.2;
  transition: transform .4s ease, opacity .4s ease; /* smooth movement */
  will-change: transform, opacity;
}

.teaser-card:hover .teaser-title,
.teaser-card:focus-visible .teaser-title {
  transform: translateY(-16px);
  opacity: 1; /* optional falls du leichtes Fading willst */
}

.teaser-title { opacity: 1; }
.teaser-card:hover .teaser-title { opacity: 1; }

/* Hover/Focus */
.teaser-card:hover,
.teaser-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 24px -34px rgba(0,0,0,.8);
}
.teaser-card:hover .teaser-media::after,
.teaser-card:focus-visible .teaser-media::after {
  background: rgba(0,0,0,0.0); /* leicht heller beim Hover */
  outline: none;
}

/* Runde Ecken konsistent zu Black-Boxes */
.teaser-card,
.teaser-media,
.teaser-bg { border-radius: 24px; }

/* ===================== XL-VARIANTE (ganze 3er-Reihe, max. 800px) ===================== */
.teaser-card--xl {
  grid-column: 1 / -1;
  justify-self: center;        /* verhindert, dass sie auf volle Viewport-Breite gehen */
  width: 100%;                 /* nutzt nur die Grid-Breite */
  max-width: 100%;             /* verhindert Überschreitung */
  border-radius: 24px;
  margin-bottom: 80px;
}

.teaser-card--xl .teaser-media {
  aspect-ratio: auto;
  height: clamp(420px, 65vh, 800px);
}


/* Größerer Titel auf XL */
.teaser-card--xl .teaser-title {
  font-size: clamp(2.0rem, 4.6vw, 5.0rem);
  bottom: clamp(32px, 2vw, 56px);
}



/* ===================== Responsive Breakpoints: 3 → 2 → 2 → 1 ===================== */
@media (max-width: 1400px) {
  .teasers { grid-template-columns: repeat(2, 1fr); }
  .teaser-card--xl { grid-column: 1 / -1; }
  .teaser-card--xl .teaser-media { height: clamp(360px, 50vh, 720px); }
}

@media (max-width: 1024px) {
  .teasers { grid-template-columns: repeat(2, 1fr); }
}



@media (max-width: 560px) {
  .teasers { grid-template-columns: 1fr; }
  .teasers--75 { width: 100%; }
}



/* ===== Teaser: klickbarer Media-Teil als Link ===== */
.teaser-link{
  display:block;
  text-decoration:none;
  color: inherit;
}

/* Hover-Zoom beibehalten – jetzt auf Link-Hover UND Card-Hover */
.teaser-link:hover .teaser-bg,
.teaser-card:hover .teaser-bg,
.teaser-link:focus-visible .teaser-bg{
  transform: scale(1.12);
}

/* ===== Body unterhalb des Bild-/Videoteils ===== */
.teaser-body{
  background: #efefef;
  margin-top: 1rem;
  padding: clamp(24px, 2.2vw, 48px);
  border-radius: 24px;      /* unten abrunden, passt zu 24px Radius */
  /* sorgt dafür, dass die Gesamtkarte weiterhin die gleiche Rundung hat */
}



/* Text in 28px (mit clamp responsiv) */
.teaser-text{
  margin: 0 0 64px 0;
  font-family: var(--font-2-sans-serif, 'OpenSans', sans-serif);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #000;
}

/* ===== CTA-Zone: max. 3 Buttons, linksbündig, Auto-Breite ===== */
.teaser-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: flex-start;
}

.teaser-actions > .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;                 /* nur so breit wie Text + Padding */
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 10px 32px;          /* ggf. an deine Button-Tokens anpassen */
  text-decoration: none;
}

/* Maximal 3 CTAs anzeigen */
.teaser-actions > .button:nth-child(n + 4){
  display: none !important;
}

/* ===== XL-Karte: Rundungen oben bleiben am Media-Teil ===== */
.teaser-card--xl .teaser-media{
  border-radius: 24px;   /* oben rund, unten gerade */
}
.teaser-card--xl .teaser-bg{
  border-radius: 24px;
}

/* Hover über die gesamte Karte → Body färbt auf Gelb */
.teaser-card:hover .teaser-body,
.teaser-card:focus-visible .teaser-body {
  background-color: #FFF600;
}

/* ===== Responsive ab 810px ===== */
@media (max-width: 810px){
  .teasers-section{ width: 100%; }
  .teasers{ grid-template-columns: repeat(2, 1fr); } /* wie in deinem Grid */
  .teaser-actions{
    align-items: flex-start;     /* linksbündig */
    gap: 8px;
  }
  .teasers--75 { width: 80%; }
}

/* Kleiner Mobile-Fallback */
@media (max-width: 560px){
  .teasers{ grid-template-columns: 1fr; }
  .teasers--75 { width: 90%; }
}






/* ==================== LOAD MORE FEATURE ==================== */

/* Versteckt alle Artikel- und Galerie-Elemente, die geladen werden sollen. */
/* Das JS wird nur die ersten 12 (6 Paare) sichtbar schalten, alle anderen bleiben versteckt. */
.article-item {
    display: none;
    /* Optional: Füge eine Transparenz-Übergangs-Klasse hinzu (im JS angewendet) */
    transition: opacity 1.5s ease-out;
    opacity: 0;
}

/* Der Button-Wrapper ist bereits im HTML/CSS definiert, aber hier stellen wir sicher,
   dass er zentriert und sichtbar ist, solange noch Inhalt zu laden ist. */
#load-more-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
}

#end-of-content {
    display: none; /* Am Anfang versteckt */
    font-style: italic;
    font-weight: 300 !important;
    padding-top: 40px;
}


/* ===========================================================================================================================
   LIGHTBOX MODAL
   =========================================================================================================================== */
/* =========================================
   LIGHTBOX MODAL (Zentrierung korrigiert)
   ========================================= */

/* Modal Overlay: Behält 100% Höhe/Breite und Flex-Zentrierung */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.80);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center; /* Korrigierte vertikale Zentrierung */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Wichtig: Padding hier entfernen, um 100% korrekte Flexbox-Zentrierung zu gewährleisten */
    padding: 0; 
}

.lightbox-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Modal Content Container (Wrapper für das Medium) */
.lightbox-content {
    position: relative; 
    
    /* Setzt die maximale Größe des Containers, exklusive des Paddings/Randes */
    max-width: 90vw;
    max-height: 90vh; 
    
    /* Fügt den gewünschten Rand/Padding als "Puffer" im Inneren des Modals hinzu */
    padding: clamp(20px, 4vw, 40px); 
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Sicherstellen, dass nichts überläuft */
}

/* Stil für Medien im Modal */
.lightbox-content img,
.lightbox-content video {
    display: block;
    
    /* Das Medium selbst nimmt maximal 100% des Content-Containers ein (der 90vw/90vh groß ist) */
    max-width: 100%;
    max-height: 100%; 
    
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
    background: transparent;
    margin: 0; /* Margin entfernen, da Flexbox die Zentrierung übernimmt */
}


/* Schließen-Button */
.lightbox-close {
    /* ... (Dieser Teil bleibt unverändert) ... */
    position: absolute;
    top: clamp(10px, 3vw, 30px);
    right: clamp(20px, 3vw, 40px);
    background: none;
    border: none;
    color: #fff;
    font-size: clamp(32px, 5vw, 48px);
    cursor: pointer;
    line-height: 1;
    padding: 10px;
    z-index: 10000;
    transition: color 0.2s ease;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #FFF600;
    outline: none;
}


/* =========================================
   MOBILE HACK: Viewport Fix (< 810px) 📱
   ========================================= */
@media (max-width: 810px) {
    .lightbox-modal {
        /* Nutze hier die dynamischen Viewport-Units, um Toolbars auf iOS/Android zu berücksichtigen */
        height: 100svh;
        align-items: center;
    }
    
    .lightbox-content {
        /* Erlaube den Medien, fast den gesamten Bildschirm einzunehmen */
        max-width: 100vw;
        max-height: 100svh;
        padding: 10px; /* Kleines Padding für den Rand auf Mobile beibehalten */
    }
    
    .lightbox-content img,
    .lightbox-content video {
        /* Setze die Medien auf max. 100% des Content-Containers */
        max-width: 100%;
        max-height: 100%;
    }
    
    .lightbox-close {
        /* Positionierung und Styling für Mobile */
        top: 15px; 
        right: 15px;
        font-size: 32px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
}