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

/* 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: var(--radius-s);
  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 (bleibt) ==================== */
.table-wrapper {
  width: 75%;
  max-width: 1400px;
  margin: var(--space-3, 4rem) auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #999 #f2f2f2;
}
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; }

/* ==================== TABLE = CSS GRID + SUBGRID ==================== */
.vga-table {
  /* Wir machen aus der Tabelle ein Grid */
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, 1fr);
  /* 1 Header-Zeile + 10 Inhalts-Zeilen (weil du 10 Kriterien hast) */
  grid-template-rows: auto repeat(10, auto);

  width: 100%;
  min-width: 810px;
  border-collapse: collapse; /* für ältere UA neutral */
}

/* DOM flachziehen, damit Zellen echte Grid-Kinder werden */
.vga-table thead,
.vga-table tbody,
.vga-table tr { display: contents; }

/* ---------- Header ---------- */
.vga-table th {
  font-family: var(--font-sans-serif);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 1.2em 1em;
  border-bottom: 1px solid rgba(0,0,0,1);
  background: transparent;
  /* feine vertikale Linie zwischen Spalten */
  position: relative;
}
.vga-table th:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.12);
}

/* ---------- Body-Zellen als Subgrid ---------- */
.vga-table td {
  /* Jede Zelle spannt die 10 Body-Zeilen */
  display: grid;
  grid-template-rows: subgrid;   /* <- übernimmt die 10 Zeilen vom Elternelement */
  grid-row: 2 / span 10;         /* Body beginnt in Zeile 2 */
  padding: 0;                     /* Padding an die p-Elemente */
  position: relative;
}

/* p-Items sind die „Zeilen“ innerhalb der Spalte */
.vga-table td p {
  font-family: var(--font-sans-serif);
  font-size: clamp(0.85rem, 1.2vw, 1.0rem);
  line-height: 1.5;
  margin: 0;
  padding: 1.2em 1em;
  hyphens: auto;
  overflow-wrap: anywhere;
  white-space: normal;
  /* horizontale Trennlinien je Zeile */
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.vga-table td p:last-child { border-bottom: 0; }

/* feine vertikale Spaltentrenner im Body */
.vga-table td:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.12);
}

/* Mobile Tweaks */
@media (max-width: 810px) {
  .table-wrapper { width: 95%; margin: var(--space-2, 2rem) auto; }
  .vga-table { grid-template-columns: minmax(180px, 1fr) repeat(3, 1fr); }
  .vga-table th { padding: 0.9em 0.9em; }
  .vga-table td p { padding: 0.85em 0.9em; }
}








/* ======= Gallery Base =============================================================================================== */
.gallery {
  --gap: clamp(4px, 0.6vw, 10px); /* viel kleiner & fließend */
  margin: var(--space-3) auto;    /* etwas kompakterer Außenabstand */
  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: #eee;
}


/* 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 {
  position: relative;
  width: 100%;
  height: 60vh;                  /* genau 60 % der Viewport-Höhe */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Video */
.stage--60 .stage-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Content */
.stage--60 .stage-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  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;
}


.stage--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 0;
}

/* Responsive */
@media (max-width: 810px) {
  .stage--60 {
    height: 60svh;              /* besser für Mobile Viewport-Units */
  }

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

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







/* ======= CONTENT BASE ================================================================================= */
/* ======= TOKENS & TYPO BASE ======= */
:root {
  /* Fonts */
  --font-serif: 'Newsreader', serif;
  --font-sans-serif: 'Inter', 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(2.5rem, 4vw, 4rem);
  --fz-h2: clamp(2.0rem, 2.2vw, 3.25rem);
  --fz-h3: clamp(1.6rem, 1.6vw, 2.75rem);
  --fz-caption: 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-1);
  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: 6px 8px 2px 8px; /* 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);
}

/* 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 {
    display: flex;
    width: 100%;
    padding: 0; 
    margin-top: 80px;
    margin-bottom: 80px;
    gap: 0px; /* Abstand reduziert */
}


.buttons {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 28.8px */
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.button.primary {
    color: #000;
    display: flex;
    height: 54px;
    padding: 0px 48px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    text-decoration: none;
    border: 8px solid var(--red-action, #FFF600);
    background: #FFF600;
}

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




.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 */
}




.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: 8px solid var(--red-action, #000);
    background: #fff;
}
.button.secondary:hover {
    color: #FFF600;
    border: 8px solid var(--red-action, #000);
    background: #000;
}