/* === globals\styling\globalStyle.css === */
/* ------------------------------------------------------------- */
/* ROOT VARIABLES */
/* ------------------------------------------------------------- */



/* 
Breakpoints

Screen XL: >= 1200
Screen L: 1199 > w >= 900
Screen M: 899 > w >= 600
Screen S: < 600
 
*/
:root {

  /* ------------------------------------------------------------- */
  /* COLOR - Main Palette of site Colors */
  /* ------------------------------------------------------------- */
  --primary-color: #2F6BFF;
  /*Buttons, Slogans, Brand*/
  --secondary-color: #0E3DAF;
  /* Buttons, Blend*/
  --focus-color: rgb(0, 255, 213);
  /* #2FD6FF (turquoise) #EB4203(orange) */
  ;
  /* Hover, Active */
  --background-color: #0A1020;
  --surface-color: #121C2E;
  --border-color: #1E2A40;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-not-set: rgb(202, 0, 192);
  /* Color for missing Elements, Usage later*/
  --text-color: #EAF2FF;
  /* Blended Text Color, you can adjust --text-blend to create variants for the text color blended with the surface color of widgets */
  --text-blend: 0%;
  --text-color-blend: color-mix(in srgb, var(--text-color), var(--secondary-color) var(--text-blend));

  /* ------------------------------------------------------------- */
  /* TYPOGRAPHY: families, sizes, weights, line-heights */
  /* ------------------------------------------------------------- */

  --font-family: 'Inter', sans-serif;
  --font-size-section-title: clamp(2.25px, 3vw + 1rem, 6rem);
  --font-size-hero-title: clamp(2rem, 3vw + 1rem, 5rem);
  --font-size-hero-sub-title: clamp(1rem, 1.2vw + 1rem, 2rem);
  --font-size-body-title: clamp(1.5rem, 1.4vw + 1rem, 2.25rem);
  --font-size-body-text: clamp(1rem, .2vw + 1rem, 1.125rem);

  /* ------------------------------------------------------------- */
  /* SPACING & LAYOUT: spacing scale, container widths, gaps */
  /* ------------------------------------------------------------- */

  --height-header: 90px;
  /* maximum header height */
  --width-section-limit: 1440px;
  /* maximum section width */

  /* ------------------------------------------------------------- */
  /* SIZING & STRUCTURE: radius, border, z-index, shadow */
  /* ------------------------------------------------------------- */

  /* ------------------------------------------------------------- */
  /* MOTION: durations, easings */
  /* ------------------------------------------------------------- */
  scroll-behavior: smooth;
  /* smooth scrolling for in-page links */
  /* ------------------------------------------------------------- */
  /* EFFECTS: Box Shadow*/
  /* ------------------------------------------------------------- */

}

/* ------------------------------------------------------------- */
/* GLOBAL CONFIGURATION */
/* ------------------------------------------------------------- */
.demo {
  background-color: var(--background-color);
  min-height: 600px;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background: var(--background-color);
  /* overflow-x: hidden; */
}

/* ------------------------------------------------------------- */
/* SECTION STYLING 
  - Controlls Section Structure, Position and Behaviour
*/
/* ------------------------------------------------------------- */
/* Alle normalen Sections außer Hero */
*[pageSection="true"] {
  display: grid;
  place-content: center;
  width: 100%;
  padding: 1rem;
  gap: 2rem;
  position: relative;
  box-sizing: border-box;

  /* fülle mind. den Bereich unterhalb der fixen Navbar */
  min-height: calc(100svh - var(--height-header, 90px));
  height: max(calc(100svh - var(--height-header, 90px)), max-content);

  /* Wenn ich per #anchor hinscrolle, stoppe knapp unter Navbar */
  scroll-margin-top: var(--height-header, 90px);

  margin: 0;

  /* kein Horizontal-Overflow durch Glow / Shadows */
  overflow-x: hidden;
  overflow-y: visible;
  z-index: 0;
}

.hidden {
  display: none;
}

/* ---- A11y utility ------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
  GLOBAL CUSTOM SCROLLBAR STYLING
  -----------------------------------------------------------------------------
  Ziel:
  - Dezente, moderne Scrollbar im Dark-Theme mit blauer Akzentfarbe
  - Passt visuell zu deiner Oberfläche (gleiche Farbtemperatur & Glow)
  - Unterstützt WebKit-Browser (Chrome, Edge, Safari) + Firefox-Fallback
============================================================================= */

/* --- Globale Variablen (optional, falls in globalStyle.css vorhanden) --- */
:root {
  --scrollbar-bg: color-mix(in srgb, var(--surface-color), #0A1020 60%);
  --scrollbar-thumb: color-mix(in srgb, var(--primary-color), #0A1020 25%);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--primary-color), #ffffff 12%);
  --scrollbar-thumb-active: var(--primary-color);
  --scrollbar-corner: color-mix(in srgb, var(--surface-color), #0A1020 80%);
}

/* ============================================================================
   1) Basis: Scrollbox-Grundverhalten
   ============================================================================ */
.scrollbox {
  overflow-y: auto;
  /* vertikal scrollbar, wenn nötig */
  scrollbar-width: none;
  /* Firefox: Scrollbar ausblenden */
}

/* --- Standardzustand: Scrollbar unsichtbar --- */
.scrollbox::-webkit-scrollbar {
  width: 0;
  /* Scrollbar unsichtbar in WebKit */
  background: transparent;
}


/* ============================================================================
   2) Hover-Zustand: Scrollbar wird eingeblendet
   ============================================================================ */
.scrollbox:hover {
  scrollbar-width: thin;
  /* Firefox: dünne Scrollbar zeigen */
}

.scrollbox:hover::-webkit-scrollbar {
  width: 10px;
  /* sichtbare Breite */
  transition: width 0.3s ease;
}

.scrollbox:hover::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  /* dunkle, leicht transparente Schiene */
  border-radius: 8px;
}

.scrollbox:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  /* bläulicher Thumb */
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color), transparent 85%);
  transition: background .3s ease, box-shadow .3s ease;
}

.scrollbox:hover::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  /* hellerer Ton beim Hover */
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color), transparent 70%);
}

.scrollbox:hover::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  /* voller Primärton beim Klicken */
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color), transparent 50%);
}

/* ============================================================================
   1) WebKit Scrollbar (Chrome, Edge, Safari)
   ============================================================================ */
::-webkit-scrollbar {
  width: 10px;
  /* vertikale Breite */
  height: 10px;
  /* horizontale Höhe */
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color), transparent 85%);
  transition: background .3s ease, box-shadow .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color), transparent 70%);
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color), transparent 50%);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner);
}

/* ============================================================================
   2) Firefox Scrollbar (uses scrollbar-color property)
   ============================================================================ */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
  /* thumb + track */
  scrollbar-width: thin;
  /* dünne Variante */
}

/* ============================================================================
   3) Optional: Smooth scrolling für elegantes Scrollverhalten
   ============================================================================ */

/* ------------------------------------------------------------- */
/* BODY SCROLL LOCK UTILITY
  - Nützlich, um Body-Scrollen zu verhindern, wenn Overlays/Modals aktiv sind
*/
body.scroll-locked,
html.scroll-locked {
  overflow-y: hidden;
  /* Verhindert das Scrollen des Body */
  touch-action: none;
}

/* === components\navbar\navbar.css === */
/* --- Component root ------------------------------------------------------ */
.c-navbar {
  --font-size-navbar-text: var(--font-size-navbar-text);

  /* SIZE CONFIGURATION */
  --nav-logo-height: 70px;
  --height-header: 90px;

  /* tweak these to taste */
  --container-cap: 1800px;
  /* same cap as in your markup */
  --img-col-percentage: 45%;
  /* percent of container for the image column */


  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  transition: background-color 0.3s ease;
  min-height: var(--height-header);
  border-bottom: 1px solid color-mix(in srgb, var(--border-color), transparent 10%);
  /* transition: background 200ms ease, backdrop-filter 200ms ease, border-color 200ms ease; */
}

body {
  padding-top: var(--height-header);
}

/* Lock page scrolling when drawer is open (CSS-only; remove any JS overflow hacks) */
/* html:has(.c-navbar[data-state="open"]),
body:has(.c-navbar[data-state="open"]) {
  overflow: hidden;
} */

/* Navbar Container: Aligns Navigation and Logo in center of the header element */
.c-navbar__container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1440px;
  width: 100%;
}

/* Top bar: brand + toggle */
.c-navbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  width: 100%;
}

/* Brand */
.c-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.c-navbar__logo {
  display: block;
  height: var(--nav-logo-height);
  /* adjust to your logo */
  width: auto;
}

/* Toggle (hamburger) */
.c-navbar__toggle {
  display: inline-grid;
  gap: 4px;
  padding: .6rem;
  border: 1px solid var(--border-color)
    /* rgba(255,255,255,0.12) */
  ;
  border-radius: 10px;
  background: transparent;
  color: inherit;
}

.c-navbar__toggle_icon {
  max-width: 28px;
}

/* TO DELETE, BUTTON ICON CONSTRUCTED FROM STRINGS */
.c-navbar__toggle-bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  display: block;
}

/* --- Drawer menu (mobile-first) ----------------------------------------- */
/* One nav that becomes an off-canvas drawer on small/mobile */
.c-navbar__menu {
  position: fixed;
  top: 0;
  left: 0;
  /* inset: 0 auto auto auto; */
  /* attach to right side top, bottom, left, right*/
  width: 100dvw;
  /* mobile: full width */
  height: auto;
  /* overflow: auto; */
  background: var(--surface-color, #101521);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateX(100%);
  /* hidden by default */
  /*   transition: transform 300ms ease, visibility 300ms ease; */
  visibility: hidden;
  display: flex;
  flex-direction: column;
  /* overscroll-behavior: contain; */
  -webkit-overflow-scrolling: touch;
  z-index: 1001;
}

/* Also open when the menu itself gets .is-open (see JS below) */
.c-navbar__menu.is-open {
  transform: translateX(0);
  visibility: visible;
  /*   display: flex; */
  flex-direction: column;

}

/* Only animate when JS adds this flag */
.c-navbar.is-animated .c-navbar__menu {
  transition: transform 300ms ease;
}

/* If we explicitly suppress animation (during breakpoint change), force none */
.c-navbar[data-no-animate="true"] .c-navbar__menu {
  transition: none !important;
}

.c-navbar[data-no-animate="true"] .c-navbar__scrim {
  transition: none !important;
}

/* When component is “open” (we’ll toggle via JS later) */
.c-navbar[data-state="open"] .c-navbar__menu {
  transform: translateX(0);
  visibility: visible;
}

/* Drawer header (logo + close) */
.c-navbar__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.c-navbar__close {
  font-size: 1.75rem;
  line-height: 1;
  padding: .25rem .5rem;
  background: transparent;
  border: 0;
  color: inherit;
}

/* Links list */
.c-navbar__list {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
}

/* .c-navbar__item { } */

.c-navbar__link {
  display: block;
  padding: .9rem 1.25rem;
  color: var(--text-color, #d9e2f1);
  text-decoration: none;
  border-radius: 8px;
  font-size: var(--font-size-navbartext);
}

.c-navbar__link:hover,
.c-navbar__link:focus-visible {
  background: color-mix(in srgb, var(--surface-color), transparent 6%);
  /* rgba(255,255,255,0.06); */
  outline: none;
  text-decoration: none;
}

/* Active link style (bold + brand underline) */
.c-navbar__link.is-active {
  font-weight: 700;
  color: var(--primary-color, #4e8cff);
  text-decoration: none;
  text-underline-offset: 4px;
}

/* Scrim (darken + block page behind). Hidden by default via [hidden]. */
.c-navbar__scrim {
  position: fixed;
  height: 100vh;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 1000;
  /* below drawer (1000+) */
}

/* Make small-screen drawer ≤30% width (never too wide) */
/* @media (min-width: 481px) and (max-width: 1023px) {
  .c-navbar__menu {
    width: min(40vw, 420px);
    max-width: min(40vw, 500px);
  }
} */

.c-navbar__menu {
  z-index: 1001;
}

/* above scrim */
.c-navbar__scrim {
  z-index: 1000;
}

/* below drawer */

.c-navbar[data-scrolled="true"] {
  background: color-mix(in srgb, var(--background-color)80%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom-color: var(--border-color);
}

/* --- Desktop breakpoint (inline menu) ------------------------------------ */
@media (min-width: 1024px) {

  /* Hide hamburger + scrim on desktop */
  .c-navbar__toggle,
  .c-navbar__scrim {
    display: none !important;
  }

  /* Turn drawer into a regular inline nav */
  .c-navbar__menu {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    height: 100%;
    transform: none;
    visibility: visible;
    background: transparent;
    border-left: 0;
    transition: none;
    display: block;
    /* show as block; list will layout horizontally */
  }

  /* Hide the drawer-only header (logo + close) */
  .c-navbar__drawer-header {
    display: none;
  }

  /* Horizontal list layout */
  .c-navbar__list {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    /* adjust spacing between items */
    padding: 0;
    /* remove drawer padding */
  }

  .c-navbar__link {
    padding: 0.75rem 0.9rem;
    /* tighter inline paddings */
    border-radius: 8px;
  }

  /* Hover/focus feedback on desktop */
  /*   .c-navbar__link:hover,
  .c-navbar__link:focus-visible {
    background: rgba(255,255,255,0.06);
    outline: none;
  } */

  /* Active link (bold + brand underline like your mock) */
  .c-navbar__link.is-active {
    font-weight: 700;
    color: var(--primary-color, #4e8cff);
    text-decoration: none;
    text-decoration-thickness: from-font;
    /* or 2px if you prefer a fixed size */
    text-underline-offset: 4px;
    background: transparent;
    /* ensure no hover bg fights underline */
  }

  /* Optional: subtle shrink of the bar on scroll for a crisper sticky look */
  .c-navbar__bar {
    transition: padding 180ms ease, border-color 180ms ease;
    padding: 0.85rem 1rem;
    /* default desktop padding */
  }

  .c-navbar[data-scrolled="true"] .c-navbar__bar {
    padding: 0.6rem 1rem;
    /* slightly smaller when scrolled */
  }

  /* Optional: tame logo size change on scroll */
  .c-navbar__logo {
    transition: height 180ms ease;
    height: var(--nav-logo-height);
  }
}

/* === components\hero_section\hero_section.css === */
/* ── Root & background ─────────────────────────────────────────────────── */
/* .c-hero { */
/*   --container-max-width:var(--container-cap); */

/*   display:block; */
/*   align-items: center; */
/*   position: relative; */
/*   padding: 0rem 0 3.5rem; */
/* anchor jumps won’t hide under the sticky header */
/*   scroll-margin-top: var(--header-height, 90px); */
/* } */

.c-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Centered content with a hard cap (stays centered ≥1280px) */
.c-hero__container {
  width: min(100% - 2rem, var(--width-section-limit));
  margin-inline: auto;
  position: relative;
  z-index: 1;
  /* above the glow */
}

/* ── Grid layout (mobile first) ────────────────────────────────────────── */
.c-hero__content {
  grid-area: content;
}

.c-hero__media {
  grid-area: media;
}

.c-hero__grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas:
    "media"
    "content";
  /* image above text on mobile */
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
}

/* ── Typography & spacing ──────────────────────────────────────────────── */
.c-hero__content {
  width: 100%;
  text-align: center;
  /* max-width: clamp(250px, 50vw + 1rem, 80vw); */
  /* 60ch; */
  /* readable lines */
  margin-inline: auto;
}

.c-hero__eyebrow {
  margin: 0 0 .5rem;
  letter-spacing: .5px;
  opacity: .9;
  font-size: var(--font-size-hero-sub-title);
  color: var(--text-muted, #b8c2d3);
}

.c-hero__title {
  margin: 0 0 .5rem;
  font-weight: 800;
  line-height: 1.1;
  /* one fluid piece; safe guardrails */
  font-size: var(--font-size-hero-title);
  /* clamp(2rem, 4vw + 1rem, 4.5rem); */
  color: var(--text-color, #e8ecf1);
}

.c-hero__subtitle {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw + .7rem, 2rem);
  color: var(--focus-color, #e8ecf1);
  line-clamp: ();
  opacity: .95;
}

.c-hero__lead {
  margin: .5rem 0 1rem;
  color: var(--primary-color, #4e8cff);
  font-weight: 700;
}

.c-hero__text {
  margin: 0 auto 1.25rem;
  max-width: 60ch;
  opacity: .86;
  display: none;
  text-align: center;
}

/* CTAs: global button styles already applied via .u-btn */
.c-hero__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

/* ── Media (no extra frame) ───────────────────────────────────────────── */
.c-hero__media {
  display: grid;
  place-items: center;
  min-width: 20rem;
  max-height: 45rem;
  margin: 0;
}

.c-hero__img {
  display: block;
  width: 100%;
  height: auto;
  /* natural on mobile */
  max-width: 40rem;
  /* sensible cap; adjusted at desktop */
  border: 1px solid var(--border-color)
    /* rgba(255,255,255,0.07) */
  ;
  border-radius: .5rem;
  background: #0d1221;
  /* fallback while loading */
  object-fit: cover;
}

/* ── Tablet (≥600px): split layout, content left, media right ─────────── */
@media (min-width: 1200px) {
  .c-hero {
    display: grid;
    height: 100dvh;
  }

  .c-hero__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "content media";
    align-items: center;
    justify-items: center;
    gap: 2rem;
  }

  .c-hero__content {
    text-align: right;
    margin-inline: 0;
  }

  .c-hero__actions {
    justify-content: flex-end;
  }

  .c-hero__media {
    justify-self: start;
    /* push image toward right edge */
    margin: 0;
    /* No margin between Content and Image. Gap is controlled by gap property*/
  }

  .c-hero__img {
    aspect-ratio: 16 /16;
  }

  /* Override for Custom behaviour*/
}

/* ── Desktop (≥1024px): favor media column; right-orient text ─────────── */
@media (min-width: 1200px) {
  .c-hero {
    padding: 0 0 0 0;
    display: grid;
    height: 100dvh;
  }

  .c-hero__grid {
    display: grid;
    width: 100%;
    padding-left: 2rem;
    grid-template-columns: 1fr 1fr;
    /* give the image more space */
    gap: 2.5rem;
  }

  .c-hero__content {
    margin-left: auto;
    text-align: left;
  }

  .c-hero__actions {
    justify-content: flex-start;
  }

  .c-hero__img {
    max-width: 1024px;
  }

  /* larger cap on wide screens */
}

@media (min-width:600px) {
  .c-hero__actions {
    margin-top: 3rem;
  }
}

/* === components\parallax\parallax.css === */
:root {
  --parallax-height: 350px;
  --parallax-focal: top center;
  /* default position */
  --parallax-dark-overlay: rgba(0, 0, 0, 0.15);
  --font-size-base: 16px;
  /* fallback variable */
}

/* wrapper */
.c-parallax {
  height: var(--parallax-height);
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Background via CSS variable so HTML can set --parallax-image */
.c-parallax__container {
  display: grid;
  place-items: center;
  padding: 3rem;
  height: 100%;
  position: relative;
  color: var(--text-color);
  /* Use the custom property set in HTML; fallback to none */
  background-image: var(--parallax-image, none);
  background-repeat: no-repeat;
  background-position: var(--parallax-focal, center center);
  background-size: cover;
  /* fixed on larger screens for parallax-like feel; fallback to scroll on small devices */
  background-attachment: fixed;
  /* optional subtle overlay */
  box-shadow: inset 0 0 0 1000px var(--parallax-dark-overlay);
}

/* ensure content sits above the background */
.c-parallax__container>* {
  z-index: 1;
}

/* title */
.c-parallax__title {
  font-size: clamp(1.25rem, 4vw + 1rem, var(--font-size-herotitle, 2.5rem));
  line-height: 1.05;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .c-parallax {
    --parallax-height: 240px;
  }

  /* iOS Safari often ignores 'fixed'; allow graceful fallback */
  .c-parallax__container {
    background-attachment: scroll;
  }
}

/* Desktop-only: prefer fixed attachment on wide screens (avoid mobile issues) */
@media (min-width: 601px) {
  .c-parallax__container {
    background-attachment: fixed;
  }
}

/* Optional niceties */
.c-parallax[aria-hidden="true"] {
  display: none;
}

/* example accessibility hook */

/* <!-- QUOTE --> */
/* Ensure quote always has space for at least 3 lines and stays anchored at the bottom */
.c-parallax__quote {
  /* you can tweak this if you want a different visual line-height */
  --quote-line-height: 1.35;

  /* typography */
  font-size: clamp(0.95rem, 1.6vw + 0.2rem, 1.125rem);
  line-height: var(--quote-line-height);

  /* layout: take quote out of flow and anchor text to the bottom of the box */
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* text sits at the bottom of the min-height block */

  /* sizing / safety */
  box-sizing: border-box;
  max-width: 48%;
  min-width: 12ch;
  padding: 0.5rem 1rem;
  overflow: hidden;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;

  /* visuals */
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  border-radius: 6px;
  z-index: 2;
  background: transparent;
}

/* keep it readable on wide screens */
@media (min-width: 1200px) {
  .c-parallax__quote {
    max-width: 40%;
    padding: 0.75rem 1.25rem;
    min-height: calc(3 * (var(--quote-line-height) * 1.45) * 1em / 1.35);
    /* slightly larger on large screens */
  }
}

/* hide on small displays (<= 600px) */
@media (max-width: 600px) {
  .c-parallax__quote {
    display: none !important;
  }
}

/* <!-- QUOTE --> */

/* ensure the container respects its declared height (padding won't add extra height) */
.c-parallax__container {
  box-sizing: border-box;
  /* safe no-op if already set */
  position: relative;
  /* ensure absolute children are positioned relative to this */
}

/* ensure title does not reserve extra bottom space (quote is absolutely positioned) */
.c-parallax__title {
  margin-bottom: 0;
}

/* quote: anchored to bottom-right and taken out of normal flow */
.c-parallax__quote {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;

  /* spacing and sizing */
  margin: 0;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  max-width: 48%;
  min-width: 12ch;

  /* typography + ensure at least 3 lines */
  font-size: clamp(0.95rem, 1.6vw + 0.2rem, 1.125rem);
  line-height: 1.35;
  min-height: calc(3 * 1.35em);

  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  /* keep text inside box */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;

  /* look & stacking */
  border-radius: 6px;
  z-index: 2;
  background: transparent;
  /* change to rgba(...) if you want a subtle panel */
}

/* Desktop wide screens tweaks (optional) */
@media (min-width: 1200px) {
  .c-parallax__quote {
    max-width: 40%;
    padding: 0.75rem 1.25rem;
    min-height: calc(3 * 1.45em);
    right: 2rem;
    bottom: 2rem;
  }
}

/* HIDE QUOTE on small displays (<= 600px) */
@media (max-width: 600px) {
  .c-parallax__quote {
    display: none !important;
  }
}


/* === components\about_section\about_section.css === */
/* --------------------------------------------------------------------------
   About section stylesheet
   - Ensures the section enforces a minimum visual-viewport height (header-aware)
   - Vertical centering of the grid content
   - Image sizing is driven by the grid column so it never overflows the container
   - Fluid typography and responsive borders/radius using clamp()
   -------------------------------------------------------------------------- */

/* ── Root / section ───────────────────────────────────────────────────────── */
:root {
  --breakpoint-sm: 975px;

}

/* decorative background — absolute so it doesn't affect layout */
.c-about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* centered container with hard cap; honors the section min-height and centers content vertically */
.c-about__container {
  width: min(100% - 2rem, var(--width-section-limit));
  margin-inline: auto;
  position: relative;
  z-index: 1;
  /* above glow */

  /* ensure the container is at least as tall as its section and center its inner content */
  min-height: inherit;
  /* important: prevents container collapse */
  display: flex;
  align-items: center;
  /* vertical centering */
  box-sizing: border-box;
}

/* ── Grid layout (mobile-first: stack, image first) ───────────────────────── */
.c-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "content";
  gap: 1.25rem;
  align-items: center;
  /* center the grid cells vertically */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  /* critical so children can shrink in flex/grid */
}

.c-about__media {
  grid-area: media;
  min-width: 0;
}

.c-about__content {
  grid-area: content;
  min-width: 0;
}

/* ── Media / portrait ────────────────────────────────────────────────────── */
.c-about__media {
  display: grid;
  place-items: center;
}

.c-about__img {
  display: block;
  width: 100%;
  /* fills its column — column controls final size */
  max-width: clamp(250px, 40vw, 420px);
  /* visual cap for small screens; on larger screens column limits it */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: clamp(.5rem, 1.2vw, 1rem);
  border: clamp(1px, 0.22vw, 3px) solid rgba(255, 255, 255, 0.08);
  background: #0d1221;
  box-sizing: border-box;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ── Typography & content ───────────────────────────────────────────────── */
.c-about__content {
  text-align: left;
  margin-inline: auto;
  max-width: clamp(40ch, 80vw + 1rem, 90vw);
  /* readable line lengths */
  width: 100%;
  box-sizing: border-box;
}

.c-about__title {
  text-align: center;
  margin: .25rem 0 .5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.15;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem);
  color: var(--text-color, #e8ecf1);
}

.c-about__subtitle {
  text-align: center;
  margin: 0 0 .75rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.1vw + .8rem, 1.35rem);
  color: var(--text-color, #e8ecf1);
  opacity: .95;
}

.c-about__text {
  font-size: clamp(1rem, 0.8rem + 1vw, 1.125rem)
    /* clamp(0.9rem, .9vw + .6rem, 1rem) */
  ;
  margin: 0 0 .9rem;
  line-height: 1.5;
  opacity: .86;
  overflow-wrap: anywhere;
  /* prevents long strings from breaking layout */
}

/* Social icons */
.c-about__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}

.c-about__social {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, #000);
  /* background: color-mix(in srgb, var(--primary-color) 10%, transparent); */
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.c-about__social:hover,
.c-about__social:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--focus-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--focus-color) 100%, #000);
  outline: none;
}

.c-about__social img {
  width: 20px;
  height: 20px;
}

/* ── Tablet (1064px≥): two columns, image left, text right ────────────────── */
@media (min-width: 1064px) {
  .c-about {
    /* keep the same min-height behavior; allow growth */
    padding: 3.5rem 0 4rem;
  }

  .c-about__grid {
    /* make the first column a percentage of the container so the image scales with the container cap */
    grid-template-columns: auto 1fr;
    /* minmax(0, var(--img-col-percentage)) 1fr; */
    grid-template-areas: "media content";
    gap: 2rem;
    align-items: center;
  }

  .c-about__content {
    text-align: left;
  }

  .c-about__socials {
    justify-content: flex-end;
    margin-top: 5rem;
  }

  /* the image fills the column but is also clamped for visual sanity */
  .c-about__img {
    /* width: 100%; */
    /* max-width: 100%;  */
    /* never exceed the column width */
    max-width: clamp(300px, 50vw, 400px);
    /* visual cap on medium screens */
  }
}

/* ── Desktop (≥1024px): more breathing room ─────────────────────────────── */
@media (min-width: 1024px) {
  .c-about {
    padding: 4rem 0 5rem;
  }

  .c-about__grid {
    gap: 2.5rem;
  }

  .c-about__img {
    /* allow a slightly larger maximum on wide screens but remain constrained by column */
    max-width: clamp(400px, 25vw, 600px);
  }

  .c-about__socials {
    margin-top: 5rem;
  }
}

/* ----------------------------------------------------------------------------
   Utilities / debug helpers (comment out/remove in production)
   - .debug outlines can help inspect where an element's box actually sits
   ---------------------------------------------------------------------------- */
/* .c-about.debug { outline: 1px dashed rgba(255,0,0,0.12); }
   .c-about__container.debug { outline: 1px dashed rgba(0,150,255,0.08); } */


/* === components\contact_me\contact.css === */
/*
================================================================================
Component: Contact Section
File: contact.css
Version: 2.0 (Component-Scoped, Footer-Aware Layout)

PURPOSE
- Stacked, mobile-first Kontaktbereich mit Intro + Formular.
- Textarea wächst, um den verbleibenden Platz zu füllen, sodass
  * der "Senden"-Button sichtbar bleibt und
  * der Footer gleichzeitig im Viewport bleibt.

HOW TO THEME / MODIFY
- Passe die Tokens (CSS-Variablen) im Abschnitt 1) an.
- Festen Footer-Wert über --footer-height setzen (kein JS nötig).

BREAKPOINTS (mobile-first)
- md  >= 48rem  (768px)
- lg  >= 62rem  (992px)
- xl  >= 75rem  (1200px)

SECTION MAP
1) Tokens (CSS variables)
2) Base (Section & Container)
3) Form Layout (Rows, Fields, Controls)
4) Elements (Labels, Inputs, Select, Textarea, Actions)
5) States (Focus etc.)
6) Responsive refinements (md → xl)
================================================================================
*/

/*==============================================================================
1) TOKENS — Theme variables for easy modification (component scope)
==============================================================================*/
.c-contact {
  /* Sizing */
  --header-height: var(--height-header, 90px);
  --footer-height: 150px;
  /* <— Passe an deine reale Footer-Höhe an */

  /* Typography sizes (fallen zurück auf globale Tokens) */
  --size-topic: 28px;
  --size-plain-sm: var(--font-size-body-text, 18px);
  --size-plain-lg: var(--font-size-body-text, 18px);
  --size-name-sm: var(--font-size-body-text, 18px);
  --size-name-lg: 26px;
  --size-field-label: var(--font-size-body-text, 18px);
  --size-field-help: var(--font-size-body-text, 18px);
  --size-btn: var(--font-size-body-text, 18px);

  position: relative;
  padding: 3rem 0 0;
  scroll-margin-top: var(--header-height, 90px);
  min-height: calc(100dvh - var(--header-height, 90px) - var(--footer-height));
}

/*==============================================================================
2) BASE — Section & Background, Container
==============================================================================*/

.c-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Container: Intro (auto) + Form (1fr) */
.c-contact__container {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  width: min(100% - 2rem, 1440px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
  min-height: inherit;
  /* wichtig für 1fr im Formular */
  padding-bottom: 2rem;
}

/*==============================================================================
3) FORM LAYOUT — Rows, Fields, Grid-Struktur
==============================================================================*/

.c-contact__form {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  /* Name, Email, Topic, Message(1fr), Actions */
  gap: 1rem;
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
  min-height: 0;
  /* erlaubt der Message-Row (1fr) zu schrumpfen */
}

/* Name row → stacked; ab md: 2 Spalten */
.c-contact__row {
  display: grid;
  gap: 1rem;
}

.c-contact__row--name {
  grid-template-columns: 1fr;
}

/* Allgemeine Field-Zelle */
.c-field {
  display: grid;
  gap: .5rem;
  min-height: 0;
  /* verhindert min-content overflow in Grids */
}

/* DIESE Field-Zelle enthält die Textarea und darf wachsen:
   Im HTML: <div class="c-field c-field--grow">…</div> */
.c-field--grow {
  grid-template-rows: auto 1fr;
  /* Label auto, Textarea 1fr */
}

/* Halbfelder (z. B. Name/ Nachname) */
.c-field--half {
  width: 100%;
}

/*==============================================================================
4) ELEMENTS — Typografie, Controls, Textarea, Actions
==============================================================================*/

/* Intro / Header */
.c-contact__intro {
  text-align: center;
  max-width: 75ch;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

.c-contact__title {
  margin: 0 0 .75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .3px;
  font-size: var(--size-topic);
  color: var(--text-color);
}

.c-contact__lede {
  margin: 0 0 1.25rem;
  font-size: var(--size-plain-sm);
  opacity: .92;
}

.c-contact__signature {
  margin: 0 0 1.25rem;
}

.c-contact__signature-line {
  font-size: var(--size-plain-sm);
  opacity: .92;
}

.c-contact__signature-name {
  display: inline-block;
  font-weight: 700;
  font-size: var(--size-name-sm);
}

/* Labels */
.c-field__label {
  font-weight: 800;
  font-size: var(--size-field-label);
  letter-spacing: .2px;
}

/* Controls: Inputs, Selects, Textareas (Basis) */
.c-field__control {
  width: 100%;
  color: var(--text-color);
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-color));
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, #000);
  border-radius: 12px;
  padding: .9rem 1rem;
  line-height: 1.35;
  font-size: var(--size-field-help);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  min-height: 0;
  /* wichtig im Grid-Kontext */
}

.c-field__control::placeholder {
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  opacity: .8;
}

/* Select wrapper & Chevron */
.c-field__select {
  position: relative;
}

.c-field__control--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
}

.c-field__chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: .9;
}

/* Textarea: füllt die wachsende Zeile komplett */
.c-field__control--textarea {
  height: 100%;
  min-height: 8rem;
  /* sinnvolle Untergrenze für sehr kleine Screens */
  resize: vertical;
  /* optional beibehalten */
  overflow: auto;
  /* scrollt, wenn extrem wenig Platz */
}

/* Actions (Senden-Button) */
.c-contact__actions {
  display: grid;
  place-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.c-contact__submit {
  font-size: var(--size-btn);
  font-weight: 700;
  width: clamp(160px, 34vw, 240px);
}

.c-field__checkbox {
  font-family: var(--font-family);
}

.c-field__checkbox a {
  text-decoration: none;
  color: color-mix(in srgb, var(--focus-color), #ffffff 25%);
}

.is-marked {
  border: 1px solid var(--focus-color);
  padding: 6px;
  transition: .2s ease;
}

/*==============================================================================
5) STATES — Focus, Interaktionen
==============================================================================*/
.c-field__control:focus-visible {
  border-color: var(--focus-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 30%, transparent);
}

/*==============================================================================
6) RESPONSIVE REFINEMENTS (Mobile-First)
==============================================================================*/

/* md ≥ 48rem (768px) */
@media (min-width: 48rem) {
  .c-contact {
    /* weiterhin Footer-aware */
    min-height: calc(100dvh - var(--header-height, 90px) - var(--footer-height));
  }

  .c-contact__intro {
    text-align: left;
    margin-inline: 0;
    max-width: 100%;
  }

  .c-contact__lede {
    font-size: var(--size-plain-lg);
  }

  .c-contact__signature-line {
    font-size: var(--size-plain-lg);
  }

  .c-contact__signature-name {
    font-size: var(--size-name-lg);
    font-weight: 800;
  }

  .c-contact__row--name {
    grid-template-columns: 1fr 1fr;
    /* zwei Spalten ab md */
    gap: 1rem;
  }
}

/* lg ≥ 62rem (992px) */
@media (min-width: 62rem) {
  .c-contact {
    padding: 4rem 0 0;
  }

  .c-contact__form {
    gap: 1.2rem;
  }
}

/* xl ≥ 75rem (1200px) */
@media (min-width: 75rem) {
  .c-contact {
    /* 100dvh würde Footer verdecken → weiterhin minus Footer */
    min-height: calc(100dvh - var(--header-height, 90px) - var(--footer-height));
  }
}


/*==============================================================================
7) CUSTOM — Formular-Feedback
==============================================================================*/

.c-contact__message {
  /* Positioniert die Nachricht über dem Button, nimmt volle Breite ein */
  width: 100%;
  padding: 0.75rem 1rem;
  margin-block-end: 1rem;
  /* Abstand zum Button */
  border-radius: var(--border-radius-sm);
  font-weight: bold;

  /* Startzustand für die Animation: Unsichtbar */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.c-contact__message--success {
  background-color: color-mix(in srgb, var(--color-success, #38b000) 15%, transparent);
  color: var(--color-success, #38bb44);
  border: 1px solid var(--color-success, #38b000);
}

.c-contact__message--error {
  background-color: color-mix(in srgb, var(--color-error, #d64a3a) 15%, transparent);
  color: var(--color-error, #d64a3a);
  border: 1px solid var(--color-error, #d64a3a);
}

.c-contact__message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stil für den Ladezustand des Buttons */
.c-contact__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* === components\footer\footer.css === */
/* =======================================================================
  FOOTER (component)
  Sticky/fixed, mobile-first.
  ======================================================================= */

/* --- Component root ---------------------------------------------------- */
.c-footer {
  position: block;
  /* always visible (kein fixed, also bleibt im Flow) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  /* über Content; unter Navbar-Drawer/Scrim */

  background: var(--background-color);
  /* dunkler Hintergrund */
  backdrop-filter: saturate(1.2) blur(8px);

  border-top: 1px solid var(--border-color);
  /* Trennlinie oben */
  color: var(--text-color);

  /* mobile defaults */
  font-size: 16px;
  height: 70px;
}

/* Optional: wenn du Platz für einen fixed Footer reservieren willst,
   gib <body class="has-sticky-footer">. */
body.has-sticky-footer {
  padding-bottom: 72px;
  /* mobile default; siehe tablet override */
}

/* --- Bar: icons + text ------------------------------------------------- */
.c-footer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;

  /* gleicht horizontales Padding an Navbar an */
  padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom));

  flex-wrap: wrap;
  /* Icons oben, Text drunter auf kleinen Screens */
  height: 100%;
  width: 100%;
}

/* --- Social list ------------------------------------------------------- */
.c-footer__social {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;

  /* sorgt dafür, dass die Icons beim Wrap immer in der ersten Zeile bleiben */
  flex: 0 0 auto;
  order: 0;
  justify-content: center;
}

.c-footer__social-item {
  margin: 0;
  padding: 0;
}

.c-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  padding: .25rem;
  border: 1px solid transparent;
  outline: none;
}

.c-footer__social-link:hover,
.c-footer__social-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Icon sizes */
.c-footer__icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* --- Text -------------------------------------------------------------- */
.c-footer__text {
  margin: 0;
  line-height: 1.2;
  text-align: center;

  /* beim Wrap → nimm die ganze Breite in Zeile 2 */
  flex: 1 1 100%;
  order: 1;

  opacity: .9;
}

.c-footer__legal {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: row;
  gap: .25rem;
  text-align: center;
}

.c-footer__legal li>a {
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--text-color);
  text-decoration: none;
  display: inline-block;
  margin: 0 10px 0 10px;
}

/* =======================================================================
  BREAKPOINTS (mobile-first)
  Using your set: 320, 480, 768, 992, 1200
  Only necessary rules are added.
  ======================================================================= */

/* ≥768px (Tablets und größer) ------------------------------------------ */
@media (min-width: 768px) {
  .c-footer__bar {
    flex-wrap: nowrap;
    /* alles eine Zeile */
    justify-content: space-between;
    /* Text links, Icons rechts */
    gap: 1rem;
    padding: .9rem 1rem max(.9rem, env(safe-area-inset-bottom));

    /* ⬇ WICHTIG: Width limit + Zentrierung wie ein Content-Container */
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Text links */
  .c-footer__text {
    flex: 0 1 auto;
    order: 0;
    text-align: left;
  }

  /* Icons rechts */
  .c-footer__social {
    flex: 0 0 auto;
    order: 1;
    justify-content: flex-end;
  }

  .c-footer__icon {
    width: 32px;
    height: 32px;
  }

  /* Wenn Footer irgendwann fixed wäre und du Body-Offset brauchst */
  body.has-sticky-footer {
    padding-bottom: 96px;
  }
}

/* ≥992px (kleinere Desktops) — spacing polish -------------------------- */
@media (min-width: 992px) {
  .c-footer__bar {
    gap: 1.25rem;
  }
}


/* === components\card\card.css === */
/*
================================================================================
Component: Card Widget + Gallery Grid (Minimal/Maximal + Global Overlay)
File: card+gallery.css
Version: 6.1 (Zoom patch + top-crop + fixed media heights)

WHAT THIS DOES
- Grid controls width; cards fill the grid cell height and look even per row.
- Media block gets a constant height (per variant) → tidy rows.
- Minimal cards: image-only at rest; overlay appears on hover, never clips.
- Maximal cards: fixed-height media header, static info below.
- Hover zoom works for both `.gallery-container` and `.c-gallery__root`.

SECTION MAP
1) Tokens (variables)
2) Gallery Grid
3) Card Base (shared)
4) Variants
   4.1 Minimal (image-only rest, hover overlay)
   4.2 Maximal (fixed media height, static info)
5) Global Overlay (modal)
6) State Classes
7) Responsive refinements
================================================================================
*/

/*==============================================================================
1) TOKENS — adjust to taste
==============================================================================*/
:root {
  /* Media heights: keep rows visually consistent */
  --media-h-maximal: clamp(180px, 22vh, 240px);
  --media-h-minimal: clamp(180px, 22vh, 240px);

  /* Card visuals */
  --c-card-radius: 12px;
  --c-card-border: 1px solid var(--border-color);
  --c-card-bg: var(--surface-color);
  --c-card-shadow: 0 8px 30px var(--color-shadow);

  /* Overlay/Scrim */
  --scrim-to: rgb(from var(--primary-color) r g b / 0.55);
  --overlay-scrim: rgba(5, 9, 20, 0.85);
  --panel-bg: var(--background-color);
  --panel-radius: 16px;
  --z-overlay: 2000;

  /* Typography & colors */
  --c-card-text: var(--text-color-blend);
  --btn-bg: var(--primary-color);
  --btn-bg-hover: var(--focus-color);
  --btn-text: var(--text-color);
  --focus-outline: 2px solid color-mix(in srgb, var(--focus-color) 80%, var(--text-color) 20%);

  /* Motion & spacing */
  --pad-300: 1rem;
  --pad-400: 1.5rem;
  --t-fast: 200ms;
  --t-normal: 300ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* Hover glow + zoom */
  --glow-color: color-mix(in srgb, var(--primary-color) 50%, var(--focus-color) 50%);
  --t-hover-scale: 250ms;
  --scale-grow: 1.07;
  --scale-shrink: 0.96;
}


/*==============================================================================
2) GALLERY GRID — width controlled by grid, height stretches evenly
==============================================================================*/
.c-gallery__root,
.gallery-container {
  max-width: 1440px;
  display: grid;
  gap: 2rem;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, auto));
  align-items: stretch;
  /* stretch items so cards fill row height */
  justify-items: stretch;
  overflow: visible;
  /* allow zoomed cards to extend */
}

.c-gallery__item {
  height: 100%;
  position: relative;
  transform: scale(1);
  transition: transform var(--t-hover-scale) var(--ease-standard), z-index 0s;
  will-change: transform;
  z-index: 1;
}

/* Zoom effect works for BOTH gallery roots */
.c-gallery__root[visHover="grow"]:hover .c-gallery__item,
.gallery-container[visHover="grow"]:hover .c-gallery__item {
  transform: scale(var(--scale-shrink));
  /* shrink siblings */
}

.c-gallery__root[visHover="grow"] .c-gallery__item:hover,
.gallery-container[visHover="grow"] .c-gallery__item:hover {
  transform: scale(var(--scale-grow));
  /* grow hovered */
  z-index: 11;
}


/*==============================================================================
3) CARD BASE — shared structure
==============================================================================*/
.c-card__root {
  height: 100%;
  /* fill the grid cell */
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  color: var(--c-card-text);
}

.c-card__info-title {
  color: var(--text-color)
}

.c-card__surface-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--c-card-bg);
  border: var(--c-card-border);
  border-radius: var(--c-card-radius);
  box-shadow: var(--c-card-shadow);
  overflow: hidden;
  /* critical: rounded corners clip media */
  transition: box-shadow var(--t-normal) var(--ease-standard);
}

/* Glow on gallery hover */
.c-gallery__item:hover .c-card__surface-container,
.c-gallery__item:hover .service-card:hover {
  box-shadow: 0 0 2rem var(--glow-color), var(--c-card-shadow);
}

.c-card__surface-media {
  margin: 0;
  /* reset <figure>'s default margins */
  inline-size: 100%;
  block-size: auto;

  /* ensure the image itself is clipped by the same radius at the top */
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.c-card__surface-media-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* object-position: top center;     */
  /* crop bias at the top */
  display: block;
}

/* Gradient improves legibility when text overlays media */
.c-card__surface-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--scrim-to) 100%);
  opacity: 0;
  transition: opacity var(--t-normal) var(--ease-standard);
  pointer-events: none;
}

/* Info area (shared typography/padding) */
.c-card__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--pad-300);
}

.c-card__info h3,
.c-card__info p {
  margin: 0;
}

.c-card__actions {
  display: flex;
  justify-content: flex-end;
}

.c-card__action-primary:hover {
  background: var(--btn-bg-hover);
}

/* KPI / tags */
.project-kpi {
  display: flex;
  justify-content: flex-start;
  gap: .4rem;
}

.kpi-tag {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .85em;
}

.project-tags {
  display: flex;
  gap: .4rem;
  width: 100%;
}

.project-tags span {
  display: inline-block;
  font-size: .85rem;
  color: color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  border: 1px solid color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  padding: 2px .4rem;
  border-radius: 12px;
  font-size: .75em;
}

/* --------------------
   FILTER LEISTE STYLING
   -------------------- */
.project-filters {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btn {
  background: none;
  border: 1px solid color-mix(in srgb, #00bcd4 80%, var(--primary-color) 20%);
  /* Leuchtend blauer Rand */
  color: color-mix(in srgb, #00bcd4 80%, var(--primary-color) 20%);
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9em;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--focus-color);
  /* Blauer Hintergrund beim Hover/Aktiv */
  color: var(--background-color);
  /* Dunkler Text für Kontrast */
}

/*==============================================================================
4) VARIANTS
==============================================================================*/

/*--------------------------------------
4.1 MINIMAL — image-only rest state
- Media height constant across cards.
- Info overlays image on hover; long text scrolls (no clipping).
--------------------------------------*/
.c-card__root[visType="minimal"] .c-card__surface-container {
  background: transparent;
  /* hide “surface” at rest */
}

.c-card__root[visType="minimal"] .c-card__surface-media {
  block-size: var(--media-h-minimal);
  /* constant media height */
}

/* Show scrim + overlay on hover/focus */
.c-card__root[visType="minimal"]:hover .c-card__surface-scrim,
.c-card__root[visType="minimal"]:focus-within .c-card__surface-scrim {
  opacity: 1;
}

/* Overlayed info (no layout shift, never clips) */
.c-card__root[visType="minimal"] .c-card__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-block-size: 80%;
  /* overlay uses up to 80% of image height */
  overflow: auto;
  /* long subtitle scrolls within overlay */
  opacity: 0;
  transform: translateY(6%);
  transition:
    opacity var(--t-normal) var(--ease-standard),
    transform var(--t-normal) var(--ease-standard);
}

.c-card__root[visType="minimal"]:hover .c-card__info,
.c-card__root[visType="minimal"]:focus-within .c-card__info {
  opacity: 1;
  transform: translateY(0);
}

/* Optional direction preset */
.c-card__info-dir-right {
  transform: translateX(8%) translateY(6%);
}

.c-card__root[visType="minimal"]:hover .c-card__info.c-card__info-dir-right,
.c-card__root[visType="minimal"]:focus-within .c-card__info.c-card__info-dir-right {
  transform: translateX(0) translateY(0);
}


/*--------------------------------------
4.2 MAXIMAL — fixed media height, info below
--------------------------------------*/
.c-card__root[visType="maximal"] .c-card__surface-media {
  block-size: var(--media-h-maximal);
  /* constant media height */
}

.c-card__root[visType="maximal"] .c-card__surface-scrim {
  display: none;
}

/* text not over image */
/* Info in normal flow comes from base styles */


/*==============================================================================
5) GLOBAL OVERLAY (compatible with your card.js)
==============================================================================*/
.c-card__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: var(--z-overlay);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--t-normal) var(--ease-standard),
    visibility var(--t-normal) step-end;
}

.c-card__overlay-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

.c-card__overlay-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--panel-bg);
  box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  transform: translateX(100%);
  transition: transform var(--t-normal) var(--ease-standard);
  overflow: hidden;
}

.c-card__overlay-header {
  flex-shrink: 0;
  padding: var(--pad-400);
  border-bottom: 1px solid #1f2937;
  position: relative;
}

.c-card__overlay-body {
  flex-grow: 1;
  padding: var(--pad-400);
  overflow-y: auto;
  line-height: 1.6;
}

.c-card__overlay-footer {
  flex-shrink: 0;
  padding: var(--pad-400);
  border-top: 1px solid #1f2937;
  display: flex;
  justify-content: flex-end;
}


/*==============================================================================
6) STATE CLASSES
==============================================================================*/
.c-card__overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-normal) var(--ease-standard), visibility 0s;
}

.c-card__overlay.is-open .c-card__overlay-panel {
  transform: translateX(0);
}


/*==============================================================================
7) RESPONSIVE REFINEMENTS
==============================================================================*/
@media (width >=48rem) {
  .c-card__overlay-panel {
    width: min(100%, 1440px);
    border-top-left-radius: var(--panel-radius);
    border-bottom-left-radius: var(--panel-radius);
  }
}

@media (width >=64rem) {
  .c-card__overlay-panel {
    width: min(100%, 1440px);
  }
}

/* =============================================================================
  RESPONSIVE STACKING FOR GALLERY GRID
  -----------------------------------------------------------------------------
  Ziel:
  - Wenn die verfügbare Breite klein wird, alle Karten untereinander anordnen.
  - Hover-Grow/Shrink-Effekt auf kleinen Screens neutralisieren (besseres UX).
  Hinweise:
  - Passe die Breakpoints (48rem ≈ 768px, 64rem ≈ 1024px) bei Bedarf an.
============================================================================= */

/* 2-Spalten-Layout als Zwischenstufe (optional, falls gewünscht) */
@media (max-width: 64rem) {

  .c-gallery__root,
  .gallery-container {
    grid-template-columns: 1fr 1fr;
    /* zwei Spalten */
    justify-items: stretch;
    /* Karten füllen die Spalten */
  }
}

/* Ab hier: einspaltig – alles untereinander */
@media (max-width: 48rem) {

  .c-gallery__root,
  .gallery-container {
    grid-template-columns: minmax(350px, 1fr);
    /* eine Spalte = vertikal gestapelt */
    gap: 16px;
    /* etwas kompaktere Abstände */
  }

  /* Zoom-Effekt neutralisieren, damit nichts „springt“ */
  .c-gallery__item {
    transform: none !important;
  }

  /* Container mit visHover="grow": Effekte deaktivieren */
  .c-gallery__root[visHover="grow"] .c-gallery__item,
  .gallery-container[visHover="grow"] .c-gallery__item,
  .c-gallery__root[visHover="grow"] .c-gallery__item:hover,
  .gallery-container[visHover="grow"] .c-gallery__item:hover {
    transform: none !important;
    z-index: 1 !important;
  }
}

/* Optional: sehr kleine Geräte noch kompakter machen */
@media (max-width: 26rem) {

  .c-gallery__root,
  .gallery-container {
    gap: 12px;
  }
}

/* Gilt nur, wenn Grid aktuell 2 Spalten hat */
@media (max-width: 64rem) and (min-width: 48rem) {

  .c-gallery__root,
  .gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Wenn ungerade Anzahl von Items → letzte Karte soll über beide Spalten gehen */
  .c-gallery__root>.c-gallery__item:last-child:nth-child(odd),
  .gallery-container>.c-gallery__item:last-child:nth-child(odd) {
    grid-column: span 2;
    /* nimmt beide Spalten ein */
  }
}


/* =============================================================================
  SERVICE CARDS – STYLESHEET (only Cards)
  -----------------------------------------------------------------------------
  Zweck:
  - Reines Styling für Karten (ohne Grid, Timeline, Sticky-CTA etc.)
  - Plug-and-Play mit deinem bestehenden Grid-Layout

  Benötigte Design Tokens aus globalStyle.css:
  --surface-color, --border-color, --primary-color, --focus-color,
  --text-color, --color-shadow

  Struktur:
  1) Basis Styling
  2) Pseudo States
  3) Animation Hooks
============================================================================= */


/* ============================================================================
   1) BASIS STYLING
   ============================================================================ */

/* --- Grundkarte: Oberfläche, Rahmen, Schatten, Innenlayout --- */
.service-card {
  height: 100%;
  background: var(--surface-color);
  /* Kartenfläche passend zum Dark-Theme */
  border: 1px solid var(--border-color);
  /* dezente Kontur */
  border-radius: 16px;
  /* weiche Ecken */
  padding: 1.25rem;
  /* Innenabstand */
  display: grid;
  /* vertikale Struktur */
  grid-template-rows: auto auto auto 1fr auto;
  /* Icon / Titel / Text / Bullets / CTA */
  align-items: flex-end;
  gap: .75rem;
  /* Abstände zwischen Bereichen */
  box-shadow: 0 8px 24px var(--color-shadow);
  /* Tiefe ohne harte Kanten */
  transition: transform .25s ease, border-color .25s ease,
    box-shadow .25s ease;
  /* weiche Interaktion */
  position: relative;
  /* für potenzielle Badges/Overlays */
  overflow: auto;
  /* sauberer Zuschnitt bei Überläufen */
}

/* --- Icon-Container: kleiner Akzentblock als visueller Anker --- */
.service-card__icon {
  width: 48px;
  height: 48px;
  /* kompakte, einheitliche Größe */
  display: grid;
  place-items: center;
  /* Icon zentrieren */
  border-radius: 12px;
  /* Formensprache wie Karte */
  background: color-mix(in srgb, var(--primary-color), #0A1020 70%);
  outline: 1px solid color-mix(in srgb, var(--primary-color), var(--border-color) 65%);
}

/* --- SVG-Icon im Container: skalierte, gut sichtbare Piktogramme --- */
.service-card__icon svg {
  width: 26px;
  height: 26px;
  /* harmonische Balance zur Box */
  fill: var(--text-color);
  /* hoher Kontrast */
  opacity: .9;
  /* minimal softer Look */
}

/* --- Titel: klare, kompakte Headline --- */
.service-card__title {
  margin: .25rem 0 0 0;
  /* dichter Anschluss ans Icon */
  font-size: 1.125rem;
  /* leicht größer als Body */
  line-height: 1.25;
  /* präzise Typo */
}

/* --- Beschreibung: sekundärer Fließtext --- */
.service-card__desc {
  margin: 0;
  /* kompakt halten */
  color: var(--text-color-blend);
  /* color-mix(in srgb, var(--text-color), #8aa0c7 28%); */
  line-height: 1.5;
  /* Lesbarkeit */

}

/* --- Bulletliste: Key-Points des Angebots --- */
.service-card__bullets {
  margin: 0;
  /* kein Außenabstand */
  padding: 0 0 0 1rem;
  /* Listen-Einzug */
  display: grid;
  /* gleichmäßige Zeilenabstände */
  gap: .25rem;
  font-size: .95rem;
  /* etwas kleiner als Body */
  color: color-mix(in srgb, var(--text-color), #8aa0c7 25%);
}

/* --- CTA-Bereich: separater Slot am Kartenende --- */
.service-card__cta {
  margin-top: .25rem;
  /* leichte Trennung */
}

/* --- Optionale Button-Feinheiten nur innerhalb der Karte
       (nutzt globale .btn-Basics, falls vorhanden) --- */
.service-card .btn {
  border-radius: 12px;
  /* visuell konsistent zur Karte */
  padding: .7rem 1rem;
  /* gute Klickfläche */
  width: 100%;
}

.service-card .btn--primary {
  background: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color), var(--border-color) 30%);
  color: var(--text-color);
}


/* ============================================================================
   2) PSEUDO STATES
   ============================================================================ */

/* --- Hover auf Karte: subtil anheben + Primär-Schimmer in der Kontur --- */


/* --- Hover auf Buttons in Karten: micro-interaction --- */
.service-card .btn:hover {
  transform: translateY(-1px);
  /* haptisches Feedback */
}

/* --- Fokusvariante für barrierearme Bedienung (optional, falls kein globaler Fokus) --- */
.service-card :where(a, button):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: 12px;
}


/* ============================================================================
   3) ANIMATION HOOKS
   ============================================================================ */

/* Hinweise:
   - Die eigentliche Reveal-Animation wird per JS (IntersectionObserver)
     mittels Element.animate() gestartet (Opacity/TranslateY).
   - Dieser Hook stellt nur den Startzustand bereit, falls du rein via CSS
     arbeitest oder progressive Enhancement möchtest.
*/

/* Startzustand (optional aktivieren, wenn du CSS-Only-Reveal verwendest)
.service-card {
  opacity: 0;
  transform: translateY(8px);
}
.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
*/

/* --- Reduced motion: Animationen für Nutzer mit Bewegungseinschränkung dämpfen --- */
@media (prefers-reduced-motion: reduce) {

  .service-card,
  .service-card .btn {
    transition: none;
    /* keine Bewegungs-Übergänge */
  }
}

/* === components\tool_card\main.css === */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  /* color: #58a6ff; */
  /* Akzentfarbe für Überschriften */
  border-bottom: 2px solid #21262d;
  padding-bottom: 10px;
}

/* ------------------ SKILL CARD STYLES ------------------ */

.skill-card {
  background-color: var(--surface-color, #161b22);
  /* Dunkle Karte */
  border: 1px solid var(--border-color, #30363d);
  border-radius: 8px;
  padding: 25px;
  margin-top: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #30363d;
}

.card-icon {
  font-size: 40px;
  color: var(--text-color)
    /* #58a6ff */
  ;
  margin-right: 15px;
}

.card-icon img {
  max-width: 120px;
  aspect-ratio: 1/1;
  border-radius: 80px;
}

.card-header h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 1.8em;
}

.highlight-exp {
  --focus-color-100: #FF9900
    /* color-mix(in srgb, var(--primary-color) 30%, var(--focus-color) 70%) */
  ;
  color: var(--focus-color, #a7f1a7);
  /* Grün für Erfahrung hervorheben */
  font-weight: bold;
}

.tool-logo {
  --min-width-size: 60px;
  min-width: var(--min-width-size, 60px);
}

.tool-logo img {
  position: relative;
  aspect-ratio: 1/1;
  /* width: 80px; */
  height: var(--min-width-size);
  border-radius: 50px;
}

/* ------------------ TOOL LIST STYLES ------------------ */

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-item {
  border-bottom: 1px solid #21262d;
  padding: 15px 0;
}

.tool-head {
  font-weight: 500;
  font-size: var(--font-size-body-text);
}

.tool-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tool-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  /* Wichtig für kleine Bildschirme */
}

.tool-name {
  text-align: center;
  font-weight: bold;
  color: #c9d1d9;
  flex: 0 0 150px;
  /* Feste Breite für Tool-Name */
}

.tool-experience {
  color: var(--text-color, #e3b341);
  /* Gelb für Erfahrung */
  flex: 0 0 100px;
  text-align: center;
}

.tool-core {
  /* font-style: italic; */
  color: var(--text-color);
  flex-grow: 1;
}

/* ------------------ TOGGLE BUTTON STYLES ------------------ */

.toggle-button {
  background-color:
    /* var(--primary-color,#58a6ff) */
    transparent;
  color: var(--text-color, #161b22);
  border: none;
  border-radius: 50px;
  /* padding: 5px 10px; */
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 1;
  transition: background-color 0.2s, transform 0.2s, border-radius .2s;
}

.toggle-button:hover {
  /* background-color: #79c0ff; */
  border: 1px solid var(--focus-color, #f85149)
}

.toggle-button[aria-expanded="true"] {
  transform: rotate(45deg);
  /* Macht aus dem "+" ein "X" */
  background-color: transparent;
  /* Rot bei geöffnet */
  border: 1px solid var(--focus-color, #f85149);
  border-radius: 50px;
}

/* ------------------ DETAIL CONTENT STYLES ------------------ */

.toggle-content {
  --bg-color-mix: color-mix(in srgb, var(--surface-color) 80%, black 20%);
  background-color: var(--bg-color-mix, #0d1117);
  border-left: 3px solid var(--primary-color, #58a6ff);
  padding: 15px 15px 15px 20px;
  margin-top: 10px;
  border-radius: 4px;
  font-size: 0.95em;
  line-height: 1.6;
  animation: fadeIn 0.3s ease-in-out;
}

.detail-title {
  font-weight: bold;
  color: var(--text-color, #58a6ff);
  margin-top: 0;
}

.toggle-content ul {
  padding-left: 20px;
  list-style: disc;
  margin-bottom: 0;
  margin-top: 5px;
}

.toggle-content li {
  margin-bottom: 5px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
  .tool-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .tool-name,
  .tool-experience,
  .tool-core {
    flex: 0 0 100%;
    text-align: left;
  }

  .toggle-button {
    align-self: flex-end;
    /* Verschiebt den Button nach rechts unten */
  }
}

/* === components\card\skillcard.css === */
/*
===============================================================================
Component: Single Entry Card
Depends on: global :root tokens from your theme file (see screenshot)
Breakpoints used: md (48rem/768px) for side-by-side; mobile is stacked.
===============================================================================
*/

/* ---- Card container (mobile-first: stacked) -------------------------------- */

/* Assign grid areas */
.c-entrycard__media {
  grid-area: media;
}

.c-entrycard__body {
  grid-area: body;
}

.c-entrycard {
  /* Background: slight darkening of surface using color-mix for depth */
  background: color-mix(in srgb, var(--surface-color, #121C2E) 92%, black);
  /* Border: softened version of your border-color */
  border: 1px solid color-mix(in srgb, var(--border-color, #1E2A40) 80%, transparent);
  border-radius: 14px;
  /* rounded corners */
  box-shadow: 0 10px 30px var(--color-shadow, rgba(0, 0, 0, .3));
  color: var(--text-color, #EAE2FF);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "body";

  grid-template-rows: auto auto;
  /* stacked on mobile */
  gap: 1.25rem;
  padding: 1rem;
  align-items: center;
  justify-items: center;
  transition:
    transform 200ms cubic-bezier(.2, .6, .2, 1),
    box-shadow 200ms cubic-bezier(.2, .6, .2, 1),
    border-color 200ms cubic-bezier(.2, .6, .2, 1);

  margin: 0 0 2rem 0;
}


/* Hover/focus: subtle lift and brand glow derived from primary color */
.c-entrycard:hover,
.c-entrycard:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-color, #2F6BFF) 45%, var(--border-color, #1E2A40));
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--primary-color, #2F6BFF) 22%, transparent),
    0 10px 30px var(--color-shadow, rgba(0, 0, 0, .3));
}

/* ---- Media ----------------------------------------------------------------- */
.c-entrycard__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 1:1 on mobile */
  border-radius: 10px;
  overflow: hidden;
  /* crop image to radius */
  box-shadow: 0 8px 20px var(--color-shadow, rgba(0, 0, 0, .3));
  max-width: 800px;
}

.c-entrycard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill & crop */
  display: block;
}

/* ---- Text block ------------------------------------------------------------- */
.c-entrycard__body {
  display: grid;
  gap: .75rem;
}

.c-entrycard__title {
  margin: 0;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: var(--font-size-body-title, clamp(2rem, 3vw + 1rem, 3rem));
  line-height: 1.15;
}

.c-entrycard__text {
  margin: 0;
  font-size: var(--font-size-body-text, clamp(1rem, 1.2vw + 1rem, 1.125rem));
  line-height: 1.55;
  /* Slightly dim the paragraph text to create hierarchy */
  color: color-mix(in srgb, var(--text-color, #EAE2FF) 85%, black);
}


/* ---- Desktop layout (md ≥ 48rem): image left / text right, 16:9 media ------ */
@media (width >=75rem) {
  .c-entrycard {
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "body media";
    align-items: center;
    padding: 1.25rem;
  }

  .c-entrycard__media {
    aspect-ratio: 16 / 9;
    /* switch to 16:9 on desktop */
  }

  .c-entrycard[content_dir="reverse"] {
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas: "media body";
  }
}




/* === components\matrix_text\matrix_slogan.css === */
.hero {
  text-align: center;
  padding: 20px;
}

#matrix-slogan {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--font-size-hero-sub-title);
  /* Adjust size as needed */
  color: var(--primary-color);
  /*  #00FF41 The classic Matrix green */
  text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
  /* Adds a glowing effect */
  white-space: pre-line;
  /* Preserves line breaks if you have multiline slogans */
  letter-spacing: 2px;
  transition: opacity 0.5s ease-in-out;
  /* For a smooth fade effect */
}

/* === components\button\button.css === */
/* ---- Reusable Button Skeleton ------------------------------------------ */
/* Base (compose with component classes, e.g., class="u-btn c-hero__btn") */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-color);
  background: transparent;
}

/* Variants */
.u-btn--primary {
  background: var(--primary-color);
  border-color: rgb(from var(--border-color) r g b / 0.5);
  /* color-mix(in srgb, var(--primary-color) 80%, black) */
  ;
  color: var(--text-color);
}

.u-btn--primary:hover,
.u-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--focus-color) 85%, white 0%);
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  color: var(--primary-color);
}

.u-btn--secondary {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-color: var(--border-color);
  /* color-mix(in srgb, var(--primary-color) 40%, black); */
  color: var(--text-color);
}

.u-btn--secondary:hover,
.u-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* States */
.u-btn:disabled,
.u-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

/* Focus ring */
.u-btn:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* Optional sizes */
.u-btn--lg {
  padding: .8rem 1.15rem;
  border-radius: 12px;
}

.u-btn--sm {
  padding: .5rem .75rem;
  border-radius: 8px;
}

/* ---- Reusable radial glow utility -------------------------------------- */
.u-glow-radial {
  pointer-events: none;
  background: radial-gradient(800px 400px at 65% -10%,
      color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
      transparent 65%);
}

@media(max-width:600px) {
  .u-btn {
    width: 125px;
    height: 50px;
    gap: .5rem;
    /* padding: .65rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-color);
  background: transparent; */
  }
}

/* === components\statcards\statcard_grid.css === */
/* ========== Tokens (adjust to your theme) ========== */
:root {
  --bg-page: #0f1320;
  --text: #e6e9f2;
  --text-muted: #9aa3b2;
  --card-bg: #151a2a;
  --card-border: #1e2438;
  --card-hover: #1a2034;
  --accent: #5aa2ff;
  /* used for numbers */
  --radius: 16px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .24);
  --gap: 1rem;
  --title-size: clamp(1.25rem, 1.8vw, 1.75rem);
  --value-size: clamp(1.25rem, 4vw, 2.5rem);
  --attr-size: clamp(.65rem, .65rem + .005vw, .85rem);
  --caption-size: clamp(.65rem, .65rem + .005vw, .85rem);
  --card-min: 100px;
  /* Mindestbreite pro Karte */
  --card-max: clamp(110px, 23vw, 150px);
  /* „Wunsch/Max“ (wächst etwas, aber nicht 1fr) */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-page: #f6f8fc;
    --text: #0f172a;
    --text-muted: #5b6472;
    --card-bg: #ffffff;
    --card-border: #e9edf5;
    --card-hover: #f4f6fb;
    --accent: #2156f5;
  }
}


/* ========== Matrix wrapper ========== */
.stat-matrix {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  margin-block: clamp(16px, 3vw, 32px);
}

.stat-matrix__header {
  margin-bottom: 0.75rem;
}

.stat-matrix__title {
  font-size: var(--title-size);
  margin: 0 0 0.25rem;
  letter-spacing: .2px;

}

.stat-matrix__subtitle {
  margin: 0 0 .75rem;
  color: var(--text-muted);
  font-size: .95rem;
}

/* ========== Responsive grid ========== */
.stat-matrix__grid {
  /* grid-auto-rows: calc(10vh + 1rem); */
  display: grid;
  /* sorgt dafür, dass sich die Karten schön in der Mitte ausrichten */
  justify-content: center;
  /* horizontale Zentrierung */
  align-content: center;
  /* Karten bleiben oben im Container */
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), var(--card-max)));
  gap: var(--gap);
}

/* ========== Card ========== */
.stat-card {
  justify-items: center;
  justify-self: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem 1rem 0.9rem;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  min-height: 100px;
  max-width: var(--card-max);
  width: 100%;
  display: grid;
  gap: .35rem;
}

.stat-card:focus-within,
.stat-card:hover {
  background: var(--card-hover);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--card-border));
  transform: translateY(-2px);
}

.stat-card__attr {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--attr-size);
  letter-spacing: .06em;
  margin: 0;
  color: var(--text-muted);
  text-align: center;
}

.stat-card__value {
  font-weight: 800;
  font-size: var(--value-size);
  line-height: 1.1;
  margin: .15rem 0 .1rem;
  color: var(--accent);
}

.stat-card__caption {
  margin: 0;
  font-size: var(--caption-size);
  color: var(--text-muted);
}

/* Reduced motion: no hover lift for sensitive users */
@media (prefers-reduced-motion: reduce) {
  .stat-card {
    transition: none;
  }

  .stat-card:hover {
    transform: none;
  }
}

@media (min-width: 1064px) {
  .stat-matrix__grid {
    --gap: 2rem;
    gap: var(--gap);
  }

}



/* === components\button\scrollbutton.css === */
/*
  File: styles/scroll-cue.css
  Purpose: Styling + animation for the scroll cue and minimal hero scaffolding
           required for correct positioning. No colors/typography assumptions
           beyond what's necessary for visibility.

  Sections:
  1) Root tokens & utilities
  2) Minimal hero layout scaffolding (safe defaults)
  3) Scroll cue styles (placement, animation, a11y)
  4) Reduced motion support
*/

/* 1) Root tokens & utilities */
:root {
  --cue-size: 60px;
  /* overall button size */
  --cue-color: var(--focus-color);
  /* cyan glow color */
  --cue-shadow: 0 0 20px var(--cue-color),
    0 0 36px color-mix(in srgb, var(--cue-color) 60%, transparent);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 2) Minimal hero layout scaffolding
   - Keep generic; only what's required for cue positioning.
   - Safe to merge with existing styles.
*/


/* 3) Scroll cue styles */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 10%, 300px);
  transform: translateX(-50%);
  width: var(--cue-size);
  height: var(--cue-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: var(--cue-color);
  /* applies to SVG stroke via currentColor */
  background: transparent;
  /* subtle seat on dark BGs */
  outline: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 4;

  /* Animation: fade + glow pulsing */
  animation: cuePulse 2.4s ease-in-out infinite;
  transition: box-shadow .2s ease, outline-color .2s ease, opacity .25s ease, visibility .25s ease, translate 1s ease;
}

.scroll-cue__icon {
  inline-size: 64%;
  block-size: 64%;
  filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--cue-color) 50%, transparent));
}

@keyframes cuePulse {
  0% {
    opacity: 0.60;
    box-shadow: none;
    background-color: transparent;
  }

  50% {
    opacity: 1;
    box-shadow: var(--cue-shadow);
    background-color: var(--primary-color);
  }

  100% {
    opacity: 0.60;
    box-shadow: none;
    background-color: transparent;
  }
}

/* Hover/focus feedback */
.scroll-cue:hover {
  box-shadow: var(--cue-shadow);
}

.scroll-cue:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cue-color) 85%, white);
  outline-offset: 3px;
  box-shadow: var(--cue-shadow);
}

/* Auto-hide state toggled by JS when hero is mostly out of view */
.scroll-cue[data-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 4) Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
}

@media (max-width:1200px) {
  .scroll-cue {
    position: absolute;
    left: 90%;
    bottom: 3%;
    width: clamp(2rem, 2rem + 2vw, 3rem);
    height: clamp(2rem, 2rem + 2vw, 3rem);
    /*   width: calc(var(--cue-size)*0.75);
  height: calc(var(--cue-size)*0.75); */
  }
}

@media (max-width:400px) and (max-height:670px) {
  .scroll-cue {
    display: none;
  }
}

/* === components\card\projectcards.css === */
.project_cards_vars {
  --glow-color: color-mix(in srgb, var(--primary-color) 50%, var(--focus-color) 50%);
}

/* Generelles Layout und Intro-Text */
#projects-section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  color: var(--text-color);
}

.section-intro {
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.1em;
  color: var(--text-color);
}

/* --------------------
   FILTER LEISTE STYLING
   -------------------- */
.project-filters {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btn {
  background: none;
  border: 1px solid color-mix(in srgb, #00bcd4 80%, var(--primary-color) 20%);
  /* Leuchtend blauer Rand */
  color: color-mix(in srgb, #00bcd4 80%, var(--primary-color) 20%);
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9em;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--focus-color);
  /* Blauer Hintergrund beim Hover/Aktiv */
  color: var(--background-color);
  /* Dunkler Text für Kontrast */
}


/* --------------------
   KARTEN-GRID STYLING
   -------------------- */
.projects-grid {
  width: auto;
  max-width: var(--width-section-limit);
  display: grid;
  /* Drei Spalten mit gleichem Abstand */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.project-card {
  background-color: var(--surface-color);
  /* Dunkelblau der Boxen */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  /* Für Full-Height Button */
}

/* Hover-Effekt für die Karte */
.project-card:hover {
  transform: translateY(-5px);
  /* Leichter Sprung nach oben */
  box-shadow: 0 10px 20px var(--glow-color);
  /* Blauer Schimmer rgba(0, 188, 212, 0.2)*/
}

/* Header (Bildbereich) */
.card-header {
  height: 150px;
  /* Reduzierte Bildhöhe */
  overflow: hidden;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  /* Leicht gedämpft, um Text zu unterstützen */
  transition: opacity 0.3s ease;
}

.project-card:hover .project-img {
  opacity: 1.0;
  /* Volle Sättigung beim Hover */
}

/* Inhalt */
.card-content {
  padding: 20px;
  flex-grow: 1;
  /* Nimmt den restlichen Platz ein */
}

.project-title {
  color: var(--text-color);
  font-size: 1.4em;
  margin-top: 0;
  margin-bottom: 10px;
}

.project-description {
  color: color-mix(in srgb, var(--text-color) 80%, transparent 20%);
  /*#cccccc c*/
  font-size: 0.95em;
  margin-bottom: 15px;
}

/* KPI und Tags */
.project-kpi {
  margin-bottom: 10px;
}

.kpi-tag {
  display: inline-block;
  background-color: var(--primary-color);
  /* Leuchtendes Blau */
  color: var(--text-color);
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
}

.project-tags span {
  display: inline-block;
  color: color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  /* Hellerer Türkiston */
  border: 1px solid color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.75em;
  margin-right: 5px;
  margin-top: 5px;
}

/* Button-Styling (Unten fixiert) */
.explore-btn {
  display: block;
  text-align: center;
  padding: 12px 0;
  background-color: var(--primary-color);
  /* Ihr Haupt-Button-Blau  #00bcd4;*/
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.explore-btn:hover {
  background-color: var(--focus-color);
  /* Dunkleres Blau beim Hover */
  color: color-mix(in srgb, #00bcd4 80%, var(--primary-color) 20%);
}

/* === globals\scripts\animation.css === */
/*
===============================================================================
File: anim.css
Purpose: Minimal, data-attribute driven scroll animations (CSS controls motion).
How it works:
- Add [data-anim] to any element to opt-in. JS only toggles "is-inview".
- Customize via data attributes; JS mirrors them into CSS variables.
- Respects prefers-reduced-motion.
===============================================================================
*/

/* Defaults (override per element with data- attributes → JS sets CSS vars) */
:root {
  --anim-duration: 420ms;
  /* default duration            */
  --anim-delay: 0ms;
  /* default delay               */
  --anim-ease: cubic-bezier(.2, .6, .2, 1);
  /* default easing              */
  --anim-distance: 24px;
  /* default slide distance      */
}

/* Base state: hidden before entering view */
[data-anim] {
  opacity: 0;
  transform: none;
  transition:
    opacity var(--anim-duration) var(--anim-ease) var(--anim-delay),
    transform var(--anim-duration) var(--anim-ease) var(--anim-delay);
  will-change: opacity, transform;
  /* GPU-friendly hint           */
}

/* Animation variants: initial transforms (end state is transform: none) */
[data-anim="fade"] {
  transform: none;
}

[data-anim="slide-up"] {
  transform: translateY(var(--anim-distance));
}

[data-anim="slide-down"] {
  transform: translateY(calc(var(--anim-distance) * -1));
}

[data-anim="slide-left"] {
  transform: translateX(var(--anim-distance));
}

[data-anim="slide-right"] {
  transform: translateX(calc(var(--anim-distance) * -1));
}

[data-anim="zoom-in"] {
  transform: scale(0.96);
}

/* In-view: animate to final state */
[data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* Accessibility: respect user preference */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* === components\carousel\project-carousel.css === */
/* ==========================================================================
   PROJECT CAROUSEL (scoped)
   Namespace: .project-carousel (keine Kollision mit .c-gallery/.qualifications)
   Ziel:
     • ≤1024px: 1 Karte, zentriert, Dots + Prev/Next unten
     • ≥1025px: 4 Karten/Seite (per JS paginiert), Dots = Seiten
     • Max-Breite 1440px, Kartenbreite via clamp
     • Fonts skalieren statt clampen der Zeilen
     • Scroll-snap (Swipe), harte Stops (kein Loop)
   ========================================================================== */

/* === Tokens nur für dieses Carousel ===================================== */
.project-carousel {
  --pc-max-width: 1440px;
  --pc-gap: 1rem;

  --pc-dot-size: 10px;
  --pc-dot-active-scale: 1.1;
  --pc-controls-gap: .75rem;

  --pc-card-max: clamp(280px, 22vw, 360px);
  --pc-card-min: 260px;

  /* Farb-Bridge zum globalen Theme */
  --pc-surface: var(--surface-color);
  --pc-border: var(--border-color);
  --pc-text: var(--text-color);
  --pc-accent: var(--primary-color);
  --pc-focus: var(--focus-color);

  /* Typo-Skalen für Card-Inhalte im Carousel */
  --pc-title: clamp(1rem, 0.6rem + 1.2vw, 1.25rem);
  --pc-sub: clamp(.9rem, 0.55rem + 1vw, 1.05rem);
  --pc-tags: clamp(.7rem, 0.45rem + .6vw, .8rem);
}

/* === Root Layout ========================================================= */
.project-carousel .pc-root {
  width: 100%;
  max-width: var(--pc-max-width);
  margin-inline: auto;
  display: grid;
  gap: .75rem;
}

/* Viewport + Snap */
.project-carousel .pc-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x var(--pc-snap, mandatory);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  outline: none;
}

/* Track & Seiten */
.project-carousel .pc-track {
  display: grid;
  grid-auto-flow: column;
  /* Seiten nebeneinander */
  grid-auto-columns: 100%;
  gap: 0;
  /* bündig */
}

.project-carousel .pc-page {
  scroll-snap-align: center;
  display: grid;
  align-items: stretch;
  justify-items: center;
  gap: var(--pc-gap);
  overflow: visible;
  /* Grow/Glow sichtbar */
  padding: 50px 50px;
  /* top/bottom & inline */
}

/* === Kartenbreiten innerhalb der Seite ================================== */
.project-carousel .pc-page>.c-gallery__item,
.project-carousel .pc-page>.c-card__root {
  width: 100%;
  max-width: var(--pc-card-max);
  min-width: var(--pc-card-min);
}

/* === Typo-Skalierung nur im Carousel ==================================== */
.project-carousel .c-card__info-title {
  font-size: var(--pc-title);
  line-height: 1.25;
}

.project-carousel .c-card__info-subtitle {
  font-size: var(--pc-sub);
  line-height: 1.4;
}

.project-carousel .project-tags span {
  font-size: var(--pc-tags);
}

/* === Controls (Pfeile + Dots) =========================================== */
.project-carousel .pc-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--pc-controls-gap);
  justify-items: center;
}

/* Prev/Next */
.project-carousel .pc-nav {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--pc-accent) 50%, var(--pc-border));
  color: var(--pc-text);
  padding: .4rem .55rem;
  border-radius: 999px;
  cursor: pointer;
}

.project-carousel .pc-nav[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* Dots */
.project-carousel .pc-dots {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .25rem 0;
}

.project-carousel .pc-dots li {
  display: contents;
}

.project-carousel .pc-dots button {
  width: var(--pc-dot-size);
  height: var(--pc-dot-size);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pc-accent) 60%, var(--pc-border));
  background: color-mix(in srgb, var(--pc-accent) 20%, transparent);
  padding: 0;
  cursor: pointer;
}

.project-carousel .pc-dots button[aria-selected="true"] {
  background: var(--pc-accent);
  transform: scale(var(--pc-dot-active-scale));
}

/* === Fokus sichtbar (A11y) ============================================== */
.project-carousel :where(.pc-nav, .pc-dots button):focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}

/* === Inhalt-Overflow in Cards vermeiden ================================= */
.project-carousel .c-card__surface-container {
  overflow: hidden;
}

/* === Scrollbars optisch verstecken (Scroll bleibt möglich) =============== */
.project-carousel .pc-viewport {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge Legacy */
}

.project-carousel .pc-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* === Responsive Layout =================================================== */
/* ≤1024px → 1-up, Karte mittig */
@media (max-width: 75rem) {
  .project-carousel .pc-page {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .project-carousel .pc-viewport {
    padding-inline: .25rem;
  }
}

/* ≥1025px → 4-up Raster pro Seite */
@media (min-width: 75rem) {
  .project-carousel .pc-page {
    grid-template-columns: repeat(4, minmax(var(--pc-card-min), 1fr));
  }
}

/* === Optional: Hover-Grow NUR im Carousel ================================ */
/* Aktivierung durch Attribut visHover="grow" am .project-carousel-Root */
.project-carousel[visHover="grow"] .c-gallery__item {
  transform: scale(1);
  transition: transform var(--t-hover-scale, 250ms) var(--ease-standard, cubic-bezier(.2, .6, .2, 1));
  will-change: transform;
  z-index: 1;
}

.project-carousel[visHover="grow"]:hover .c-gallery__item {
  transform: scale(var(--scale-shrink, 0.96));
}

.project-carousel[visHover="grow"] .c-gallery__item:hover {
  transform: scale(var(--scale-grow, 1.07));
  z-index: 11;
}

/* Mobile-Override: Wenn globales card.css Hover deaktiviert, hier gezielt re-enable */
@media (max-width: 48rem) {
  .project-carousel[visHover="grow"] .c-gallery__item {
    transform: scale(1) !important;
  }

  .project-carousel[visHover="grow"]:hover .c-gallery__item {
    transform: scale(var(--scale-shrink, 0.96)) !important;
  }

  .project-carousel[visHover="grow"] .c-gallery__item:hover {
    transform: scale(var(--scale-grow, 1.07)) !important;
  }
}

/* === Reduced Motion: keine animierten Transforms ========================= */
@media (prefers-reduced-motion: reduce) {

  .project-carousel .pc-dots button,
  .project-carousel[visHover="grow"] .c-gallery__item {
    transition: none !important;
    transform: none !important;
  }
}

/* === components\page_dsgvo\legal_overlay_ds.css === */
/* ==========================================================================
   legal_overlay_ds.css
   Purpose: Kompakte, robuste Modal-Stile (native <dialog>) für Rechtstexte.
   Scope:   Nutzt ausschließlich globale :root Variablen (Theme-Tokens).
   ========================================================================== */

/* === Link-ähnlicher Trigger ================================================= */
.u-linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 .15em;
  font: inherit;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.u-linklike:hover,
.u-linklike:focus-visible {
  text-decoration-thickness: 2px;
}

/* === Modal-Shell (native <dialog>) ========================================= */
.c-legal-modal {
  /* Box */
  box-sizing: border-box;
  inline-size: min(900px, 92vw);
  max-block-size: min(80vh, 800px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0;

  /* Theme */
  color: var(--text-color);
  background: var(--surface-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

  /* State (closed) */
  display: none;
  /* falls Browser dialog schließt, bleibt es sicher unsichtbar */
}

/* State (open): zentriert + flex column */
.c-legal-modal[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

/* Backdrop */
.c-legal-modal::backdrop {
  background: rgba(0, 0, 0, .45);
}

/* === Regionen: Header / Footer ============================================ */
.c-legal__header,
.c-legal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.c-legal__footer {
  border-bottom: 0;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.c-legal__title {
  margin: 0;
  font: inherit;
  font-weight: 600;
}

/* Close-Button */
.c-legal__close {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--border-color);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.c-legal__close:hover {
  background: rgba(255, 255, 255, .06);
}

.c-legal__close:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* === Content: einziger Scroll-Container ==================================== */
.c-legal__content {
  flex: 1 1 auto;
  min-block-size: 0;
  /* wichtig für echtes Schrumpfen in Flex-Layouts */
  padding: 1rem;
  line-height: 1.6;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* Optional: eingebetteten Dokument-Header sticky halten */
.c-legal__content .legal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}

/* === Scrollbar (dezent, immer sichtbar im Modal) ========================== */
.c-legal__content,
.c-legal__content.scrollbox {
  scrollbar-width: thin;
}

.c-legal__content::-webkit-scrollbar,
.c-legal__content.scrollbox::-webkit-scrollbar {
  width: 10px;
}

.c-legal__content::-webkit-scrollbar-track {
  background: var(--scrollbar-bg, color-mix(in srgb, var(--surface-color), #0A1020 60%));
  border-radius: 8px;
}

.c-legal__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, color-mix(in srgb, var(--primary-color), #0A1020 25%));
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color), transparent 85%);
}

.c-legal__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, color-mix(in srgb, var(--primary-color), #ffffff 12%));
}

.c-legal__content::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, var(--primary-color));
}

/* === Motion: dezentes Pop-In (Respekt für Reduced Motion) ================= */
@media (prefers-reduced-motion: no-preference) {
  .c-legal-modal[open] {
    animation: legal-pop-in .16s ease-out;
  }

  @keyframes legal-pop-in {
    from {
      transform: translate(-50%, -52%) scale(.98);
      opacity: 0;
    }

    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
}

/* === Body-Scroll-Lock (via JS: .scroll-locked an html/body) =============== */
html.scroll-locked,
body.scroll-locked {
  overflow: hidden;
  touch-action: none;
}


/* === components\page_impressum\legal_overlay_imp.css === */
/* ==========================================================================
   legal_overlay_imp.css
   Modal (dialog) + Impressum-Layout (Card + "Tabellenansicht")
   Abhängigkeiten: globale :root-Variablen in globalStyle.css
   Ziel:
   - Sauberes, fokussiertes Modal
   - Scroll nur im Content-Bereich
   - Card bleibt vollständig innerhalb des Content-Bereichs
   - Robuste Umbrüche (keine horizontale Überbreite)
   ========================================================================== */

/* ========== 1) Utilities ================================================== */

.u-linklike {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 .15em;
  font: inherit;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.u-linklike:hover,
.u-linklike:focus {
  text-decoration-thickness: 2px;
}

/* Optional: Body-Scroll-Lock (per JS gesetzt) */
html.scroll-locked,
body.scroll-locked {
  overflow: hidden;
  touch-action: none;
}

/* ========== 2) Modal-Shell (dialog) ====================================== */

.c-legal-modal {
  /* Box */
  box-sizing: border-box;
  inline-size: min(900px, 92vw);
  max-block-size: min(80vh, 800px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0;

  /* Theme */
  color: var(--text-color);
  background: var(--surface-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

  /* State */
  display: none;
  /* wenn nicht open */
}

.c-legal-modal[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.c-legal-modal::backdrop {
  background: rgba(0, 0, 0, .45);
}

/* Header & Footer */
.c-legal__header,
.c-legal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.c-legal__footer {
  border-bottom: 0;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.c-legal__title {
  margin: 0;
  font: inherit;
  font-weight: 600;
}

/* Close-Button */
.c-legal__close {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--border-color);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.c-legal__close:hover {
  background: rgba(255, 255, 255, .06);
}

/* Scrollbarer Content (einziger Scroll-Container im Modal) */
.c-legal__content {
  flex: 1 1 auto;
  min-block-size: 0;
  /* wichtig für Flex + Overflow */
  padding: 1rem;
  line-height: 1.6;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  scroll-behavior: smooth;
  scroll-padding-top: .5rem;
}

/* ========== 3) Optionaler Sticky-Header im Content ======================= */
/* (nur wenn im HTML einkommentiert) */
.legal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface-color) 85%, transparent);
  border-bottom: 1px solid var(--border-color);
}

.legal-header__inner {
  max-width: min(1200px, 100% - 2rem);
  margin: 0 auto;
  padding: .75rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
}

.brand:hover {
  color: var(--focus-color);
}

.legal-nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.legal-nav a {
  color: var(--text-color-blend, #b6c0d8);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.legal-nav a:hover {
  color: var(--focus-color);
  border-color: var(--focus-color);
}

/* ========== 4) Impressum-Inhalt (Card + Typo + Tabellenansicht) ========== */

:where(.c-legal__content) :where(.legal) {
  max-width: min(900px, 100% - 2rem);
  margin-inline: auto;
}

/* Card */
:where(.c-legal__content) :where(.legal__card) {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--background-color, #0a1020) 86%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  padding: clamp(1rem, 2vw, 1.5rem);
  max-inline-size: 100%;
  overflow: visible;
  /* Card selbst scrollt NICHT */
}

/* Header-Block im Card-Body (optional) */
:where(.c-legal__content) :where(.legal__header) {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

/* Typografie */
:where(.c-legal__content) :where(.legal__eyebrow) {
  color: var(--text-color-blend, #b6c0d8);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  margin: 0 0 .25rem 0;
}

:where(.c-legal__content) :where(.legal__title) {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 .25rem 0;
}

:where(.c-legal__content) :where(.legal__meta) {
  margin: 0;
  color: var(--text-color-blend, #b6c0d8);
  font-size: .9rem;
}

/* Abschnitte */
:where(.c-legal__content) :where(.legal__section) {
  margin-block: 1.25rem 1.75rem;
}

:where(.c-legal__content) :where(.legal__h2) {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  margin: 0 0 .5rem 0;
}

:where(.c-legal__content) :where(.legal__h3) {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  margin: 1rem 0 .5rem 0;
}

/* Robuste Umbrüche (verhindert horizontales Auslaufen) */
:where(.c-legal__content) :where(.legal__card > *),
:where(.c-legal__content) :where(.legal-dl),
:where(.c-legal__content) :where(.legal-dl__row),
:where(.c-legal__content) :where(.legal-dl dt),
:where(.c-legal__content) :where(.legal-dl dd) {
  min-width: 0;
}

:where(.c-legal__content) :where(.legal__section p),
:where(.c-legal__content) :where(.legal-dl dd),
:where(.c-legal__content) :where(.legal-list) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tabellenartige Definition List */
:where(.c-legal__content) :where(.legal-dl) {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem .75rem;
  margin: 0;
  padding: 0;
}

:where(.c-legal__content) :where(.legal-dl__row) {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: .75rem;
  padding: .5rem;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  background: color-mix(in srgb, var(--background-color, #0a1020) 75%, transparent);
  border-radius: 12px;
}

:where(.c-legal__content) :where(.legal-dl dt) {
  color: var(--text-color-blend, #b6c0d8);
}

:where(.c-legal__content) :where(.legal-dl dd) {
  margin: 0;
}

/* Listen */
:where(.c-legal__content) :where(.legal-list) {
  padding-left: 1.25rem;
  margin: .5rem 0 0 0;
}

:where(.c-legal__content) :where(.legal-list li) {
  margin: .25rem 0;
}

/* Footer/Disclaimer innerhalb der Card */
:where(.c-legal__content) :where(.legal__footer) {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:where(.c-legal__content) :where(.legal__back) {
  color: var(--focus-color);
  text-decoration: none;
}

:where(.c-legal__content) :where(.legal__back:hover) {
  text-decoration: underline;
}

:where(.c-legal__content) :where(.legal__disclaimer) {
  color: var(--text-color-blend, #b6c0d8);
  font-size: .9rem;
  margin: .75rem 0 0 0;
}

/* ========== 5) Scrollbar (optional, dezent) ============================== */

.c-legal__content {
  scrollbar-width: thin;
}

.c-legal__content::-webkit-scrollbar {
  width: 10px;
}

.c-legal__content::-webkit-scrollbar-track {
  background: var(--scrollbar-bg, color-mix(in srgb, var(--surface-color), #0A1020 60%));
  border-radius: 8px;
}

.c-legal__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, color-mix(in srgb, var(--primary-color), #0A1020 25%));
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color), transparent 85%);
}

.c-legal__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, color-mix(in srgb, var(--primary-color), #ffffff 12%));
}

.c-legal__content::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, var(--primary-color));
}

/* ========== 6) Motion ===================================================== */

@media (prefers-reduced-motion: no-preference) {
  .c-legal-modal[open] {
    animation: legal-pop-in .16s ease-out;
  }

  @keyframes legal-pop-in {
    from {
      transform: translate(-50%, -52%) scale(.98);
      opacity: 0;
    }

    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
}

/* ========== 7) Responsive Anpassungen ==================================== */

@media (max-width: 510px) {
  .legal-dl__row {
    grid-template-columns: 1fr;
    /* einspaltig auf sehr kleinen Screens */
    gap: .35rem;
  }
}

/* === websites\PersonalPortfolio_Kaan\css\style.css === */
/* ==========================================================================
   GLOBAL THEME (Brown/Gold)
   --------------------------------------------------------------------------
   - Central tokens
   - Fluid type scales
   - Motion & viewport basics
   ========================================================================== */

:root {
  /* Colors */
  --primary-color: #C9972B;
  /* brand gold */
  --secondary-color: #5C3D2E;
  /* brown accent */
  --focus-color: rgb(230, 180, 90);
  /* focus/active */
  --background-color:
    linear-gradient(106deg, #000 0%, #1C140D 35%, #2A1C13 90%, #4B2E1F 100%);
  --surface-color: #1d120b;
  --text-color: #FAF3E0;
  --border-color: #8C6E52;
  --color-shadow: rgba(150, 100, 50, 0.3);
  --color-set: rgb(204, 100, 40);
  --color-not-set: rgb(160, 120, 90);
  --cue-color: rgb(230, 180, 90);

  /* Typography */
  --font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-size-section-title: clamp(2.25rem, 3vw + 1rem, 6rem);
  --font-size-hero-title: clamp(2rem, 3vw + 1rem, 5rem);
  --font-size-hero-sub-title: clamp(1rem, 2vw + 1rem, 2rem);
  --font-size-body-title: clamp(1.5rem, 1.4vw + 1rem, 2.25rem);
  --font-size-body-text: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);

  /* Layout */
  --parallax-height: 500px;
  --width-section-limit: 1440px;

  /* Motion */
  scroll-behavior: smooth;
}

/* Parallax height adjusts fluidly */
@media (max-width: 1200px) {
  :root {
    --parallax-height: 400px;
  }
}

@media (max-width: 900px) {
  :root {
    --parallax-height: 320px;
  }
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
.u-btn--primary:hover {
  color: var(--surface-color);
}

/* ==========================================================================
   TYPOGRAPHY: Oswald (local) + Assignments
   ========================================================================== */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/oswald/Oswald-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/oswald/Oswald-Medium.ttf') format('truetype');
  font-display: swap;
}

.c-about__title,
.c-about__subtitle,
.c-hero__title,
.c-hero__lead,
#matrix-slogan,
.c-parallax__title {
  font-family: 'Oswald', sans-serif;
}

.c-about__title,
.c-about__subtitle,
.c-hero__title,
#matrix-slogan,
.c-parallax__title {
  font-weight: 300;
}

.c-hero__lead {
  font-weight: 500;
}

.c-parallax__title {
  font-size: clamp(2rem, 1rem + 2vw, 4.5rem);
  line-height: 1.1;
  text-align: center;
  margin: 0;
}

.c-field__obligo,
.c-field__checkbox {
  font-size: clamp(.9rem, .4rem + .8vw, 1rem);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.c-navbar {
  background-color: color-mix(in srgb, #130c08 80%, transparent);
}

.c-navbar[data-scrolled="true"] {
  background-color: color-mix(in srgb, #130c08 80%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom-color: var(--border-color);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.c-about__title {
  margin: .25rem 0 .5rem;
}

.c-about__subtitle {
  margin: 0 0 1.5rem;
}

.c-about__text {
  margin: 0;
}

.c-about__img {
  background: transparent;
  border: none;
  border-radius: 0;
}


 .c-about__content {
    text-align: justify;
 }

 @media (min-width: 1064px) {
  .c-about__content {
        padding-right: 3rem;
    }
  }

/* ABOUT micro layout */
.about-meta { margin: 0 0 .75rem; }
.about-highlights {
  margin: .25rem 0 .75rem;
  padding-left: 2rem; /* dezenter Einzug */
  display: grid;
  gap: .35rem;
}
.about-highlights li {
  line-height: 1.55;
  color: color-mix(in srgb, var(--text-color) 88%, black);
}
.about-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .25rem 0 .75rem;
  justify-content: center;
}
.about-tags span {
  display: inline-block;
  color: color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  border: 1px solid color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .8em; line-height: 1.2; white-space: nowrap;
}
.about-cred em { color: color-mix(in srgb, var(--text-color) 85%, black); }

/* ==========================================================================
   HERO
   ========================================================================== */

.c-hero__media {
  margin: 0;
}

@media (min-width: 64rem) {
  .c-hero__img {
    max-width: 1024px;
    aspect-ratio: 16/11;
  }
}

/* Scroll cue */
.scroll-cue {
  position: relative;
  margin-top: clamp(30px, calc(-155px + 24dvh), 200px);
  left: 50%;
  transform: translateX(-50%); /* echte Zentrierung */
}

/* ==========================================================================
   PROJECT TAGS / FILTERS
   ========================================================================== */

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  width: 100%;
}

.project-tags span {
  display: inline-block;
  color: color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  border: 1px solid color-mix(in srgb, var(--focus-color) 60%, transparent 40%);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: .75em;
  line-height: 1.2;
  white-space: nowrap;
}

.filter-btn {
  border: 1px solid color-mix(in srgb, #8C6E52 80%, var(--primary-color) 20%);
  color: color-mix(in srgb, #8C6E52 80%, var(--primary-color) 20%);
}

.project-filters {
  margin-bottom: 0;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services-cta {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.c-services__btn,
.c-hero__btn {
  text-decoration: none;
  width: auto;
}

.c-gallery__item .service-card {
  background: none;
  border: 1px solid #8C6E52;
  transition: none;
}

#services .c-gallery__item,
#services .c-gallery__item:hover,
#services .c-gallery__item:hover .service-card {
  box-shadow: 0 8px 24px var(--color-shadow);
  filter: none;
  background: none;
  border-color: #8C6E52;
  transition: none;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.c-field__control {
  color: var(--text-color);
  background: color-mix(in srgb, var(--primary-color) 12%, #1C140D);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, #000);
  border-radius: 12px;
  padding: .9rem 1rem;
  line-height: 1.35;
  font-size: var(--font-size-body-text);
}

.c-contact__container {
  width: 100%;
  max-width: var(--width-section-limit);
  padding-inline: 1rem;
}

/* Contact fluid type (scoped) */
.c-contact {
  --size-topic: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  --size-plain-sm: clamp(1rem, .5rem + 1vw, 1.125rem);
  --size-plain-lg: clamp(1.125rem, .5rem + .8vw, 1.25rem);
  --size-name-sm: clamp(1rem, .5rem + 1vw, 1.25rem);
  --size-name-lg: clamp(1.25rem, .5rem + .8vw, 1.5rem);
  --size-field-label: clamp(.9rem, .4rem + .8vw, 1rem);
  --size-field-help: clamp(.9rem, .4rem + .8vw, 1rem);
  --size-btn: clamp(1rem, .5rem + .6vw, 1.125rem);
}

/* Narrow contact page section wrapper */
#contact[pageSection="true"] {
  grid-template-columns: 1fr;
  padding: 5rem 0 0;
  margin: 0;
}

/* ==========================================================================
   PROJECTS INTRO BLOCK
   ========================================================================== */

.projects-intro-container {
  width: min(90vw, var(--width-section-limit));
  margin: 0;
  padding: 1.25rem 2rem;
  font-size: clamp(1rem, .9rem + .5vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: .005em;
  color: var(--text-color);
  background: var(--background-color-secondary);
  border-radius: 8px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  text-align: start;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

.projects-intro-container p {
  margin: 0;
}

.projects-intro-container p+p {
  margin-top: 1rem;
}

@media (min-width: 900px) {
  .projects-intro-container {
    text-align: justify;
    text-justify: inter-word;
  }
}

@media (min-width: 1280px) {
  .projects-intro-container {
    line-height: 1.65;
    letter-spacing: .006em;
    padding: .5rem 3rem;
  }
}

/* ==========================================================================
   STAT MATRIX (one row, no hover lift)
   ========================================================================== */

.stat-matrix {
  --bg-page: linear-gradient(106deg, #000 0%, #1C140D 35%, #2A1C13 90%, #4B2E1F 100%);
  --text: #FAF3E0;
  --text-muted: color-mix(in srgb, #FAF3E0 70%, #5C3D2E);
  --card-bg: #1d120b;
  --card-border: #8C6E52;
  --card-hover: transparent;
  --accent: #C9972B;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(150, 100, 50, 0.3);
  --gap: 1rem;
  --title-size: clamp(1.25rem, 1.8vw, 1.75rem);
  --value-size: clamp(2rem, 4vw, 3rem);
  --attr-size: .85rem;
  --caption-size: .85rem;
}

.stat-matrix__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  --card-gap-fluid: clamp(.4rem, 1vw, 1rem);
  gap: var(--card-gap-fluid);
}

.stat-card {
  flex: 1 1 auto;
  min-width: 110px;
  max-width: 260px;
  --card-pad-y: clamp(.5rem, 1vw, 1rem);
  --card-pad-x: clamp(.5rem, 1vw, 1rem);
  padding: var(--card-pad-y) var(--card-pad-x);
  box-sizing: border-box;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: clamp(.25rem, .5vw, .5rem);
  transition: none;
}

.stat-card:hover,
.stat-card:focus-within {
  background: none;
  border-color: #8C6E52;
  transform: none;
}

.stat-card__attr {
  font-size: clamp(.65rem, 1vw, .85rem);
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.stat-card__value {
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  margin: .15rem 0 .1rem;
  color: var(--accent);
  white-space: nowrap;
}

.stat-card__caption {
  font-size: clamp(.65rem, 1vw, .85rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 25rem) {
  .stat-card {
    min-width: 5.5rem;
    --card-pad-y: .4rem;
    --card-pad-x: .4rem;
    gap: .25rem;
  }

  .stat-card__value {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .stat-card__attr,
  .stat-card__caption {
    font-size: clamp(.6rem, 1.5vw, .7rem);
  }
}

/* ==========================================================================
   ARTICLE / PROJECT OVERLAY (grid card with gallery)
   ========================================================================== */

.c-article--grid {
  background: color-mix(in srgb, var(--surface-color) 95%, black);
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 10px;
  box-shadow: 0 10px 30px var(--color-shadow);
  padding: 1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "gallery"
    "contact"
    "pager";
}

.c-article__content {
  grid-area: content;
  display: grid;
  gap: .75rem;
}

.project-pictures {
  grid-area: gallery;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.c-article__authorbox {
  grid-area: contact;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.c-article__pager {
  grid-area: pager;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.c-article__content h3 {
  margin: .25rem 0;
}

.c-article__content p {
  margin: 0 0 .5rem;
  color: color-mix(in srgb, var(--text-color) 88%, black);
  line-height: 1.6;
  text-align: justify;
}

.project-pictures__item {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 29.6875rem;
  max-height: 29.6875rem;
  border-radius: 8px;
  overflow: hidden;
  outline: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  box-shadow: 0 6px 18px var(--color-shadow);
  box-sizing: border-box;
}

.project-pictures__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  inset: 0;
  position: relative;
}

.c-article__authorbox h3 {
  margin: 0 0 .5rem;
}

.c-article__author-bio {
  margin: 0;
}

.c-article__pager a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: .95rem;
}

.c-article__pager a:hover {
  text-decoration: underline;
}

.c-article--grid:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--primary-color) 18%, transparent),
    0 10px 28px rgba(0, 0, 0, .35);
}

@media (width >=64rem) {
  .c-article--grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "content gallery"
      "contact contact"
      "pager   pager";
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
  }
}

/* Compact mode for very small screens */
@media (max-width: 616px) {
  .c-article--grid {
    padding: .5rem;
    gap: .5rem;
  }

  .c-article__content {
    gap: .5rem;
  }

  .c-article__content h2,
  .c-article__content h3 {
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.3;
  }

  .c-article__content p,
  .c-article__content li,
  .c-article__content td,
  .c-article__content th {
    font-size: clamp(.8rem, 2.5vw, .95rem);
    line-height: 1.4;
  }

  .project-pictures {
    gap: .5rem;
  }

  .project-pictures__item {
    max-width: 85vw;
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--color-shadow);
  }

  .project-pictures__item figcaption {
    font-size: .75rem;
    line-height: 1.3;
    padding: .25rem .5rem;
  }

  .c-article__authorbox {
    padding-top: .5rem;
  }

  .c-article__pager {
    gap: .5rem;
  }

  .c-article__pager a {
    font-size: .85rem;
  }
}

/* German hyphenation helpers inside overlay/intro/table */
[lang="de"] .c-article__content p,
[lang="de"] .c-article__content li,
[lang="de"] .c-article__content td,
[lang="de"] .c-article__content th,
[lang="de"] .c-article__author-bio,
[lang="de"] .projects-intro-container p,
[lang="de"] .c-table td,
[lang="de"] .c-table th {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

[lang="de"] .c-article__content h2,
[lang="de"] .c-article__content h3 {
  text-wrap: balance;
  hyphens: manual;
}

[lang="de"] .c-article__content a,
[lang="de"] .c-article__content code,
[lang="de"] .c-article__content .nowrap-buster {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 616px) {

  [lang="de"] .c-article__content p,
  [lang="de"] .c-article__content li {
    text-wrap: pretty;
  }

  [lang="de"] .c-table {
    table-layout: fixed;
  }

  [lang="de"] .c-table td,
  [lang="de"] .c-table th {
    white-space: normal;
  }
}

/* ==========================================================================
   TABLE (generic)
   ========================================================================== */

.c-table {
  --table-bg: var(--secondary-color);
  --table-border: #d1d5db;
  --table-head-bg: var(--color-shadow);
  --table-head-color: var(--text-color);
  --table-stripe: var(--secondary-color);
  --table-radius: 8px;
  --table-font-size: .875rem;
  --table-padding: .75rem 1rem;

  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  background: var(--table-bg);
  border-radius: var(--table-radius);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.c-table thead {
  background: var(--table-head-bg);
  color: var(--table-head-color);
  text-align: left;
}

.c-table th {
  padding: var(--table-padding);
  font-weight: 600;
  letter-spacing: .025em;
}

.c-table td {
  padding: var(--table-padding);
  border-top: 1px solid var(--table-border);
}

.c-table tbody tr:first-child td {
  border-top: none;
}

.c-table--striped tbody tr:nth-child(odd) {
  background: var(--table-stripe);
}

.c-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.c-footer {
  height: auto;
}

@media (max-width: 767px) {
  .c-footer__social {
    order: 1;
  }

  .c-footer__text:nth-of-type(2) {
    order: 2;
  }

  /* Impressum */
  .c-footer__text:nth-of-type(1) {
    order: 3;
  }

  /* Copyright */
}

/* ==========================================================================
   DSGVO / PRIVACY POPOVER (fixed variant, state-gated)
   ========================================================================== */

.u-linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 .15em;
  font: inherit;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.u-linklike:hover,
.u-linklike:focus {
  text-decoration-thickness: 2px;
}

.c-popover[popover] {
  display: none;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: min(900px, 92vw);
  max-height: min(80vh, 800px);
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.c-popover[popover]:popover-open {
  display: flex;
  flex-direction: column;
}

#privacy-pop::backdrop {
  background: rgba(0, 0, 0, .45);
}

.c-popover__header,
.c-popover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.c-popover__footer {
  border-top: 1px solid var(--border-color);
  border-bottom: 0;
  justify-content: flex-end;
}

.c-popover__title {
  margin: 0;
  font: inherit;
  font-weight: 600;
}

.c-popover__close {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--border-color);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.c-popover__close:hover {
  background: rgba(255, 255, 255, .06);
}

.c-popover__content {
  padding: 1rem;
  line-height: 1.6;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.c-popover__content,
.c-popover__content.scrollbox {
  scrollbar-width: thin;
}

.c-popover__content::-webkit-scrollbar,
.c-popover__content.scrollbox::-webkit-scrollbar {
  width: 10px;
}

.c-popover__content::-webkit-scrollbar-track {
  background: var(--scrollbar-bg, color-mix(in srgb, var(--surface-color), #0A1020 60%));
  border-radius: 8px;
}

.c-popover__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, color-mix(in srgb, var(--primary-color), #0A1020 25%));
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color), transparent 85%);
}

.c-popover__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, color-mix(in srgb, var(--primary-color), #fff 12%));
}

.c-popover__content::-webkit-scrollbar-thumb:active {
  background: var(--primary-color);
}

.c-popover__content .legal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}

@media (prefers-reduced-motion: no-preference) {
  .c-popover[popover]:popover-open {
    animation: pop-in .16s ease-out;
  }

  @keyframes pop-in {
    from {
      transform: translate(-50%, -52%) scale(.98);
      opacity: 0;
    }

    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
}

/* ==========================================================================
   MISC SMALL FIXES
   ========================================================================== */

.c-gallery {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.c-gallery__root {
  align-self: flex-start;
  justify-self: center;
}

.c-gallery p {
  height: auto;
  margin: 0;
}

@media (max-width: 600px) {
  .tool-item.tool-head {
    display: none;
  }
    html.no-anim #scroll-cue {
    box-shadow: rgb(201, 151, 43) 0px 2px 4px 0px,
                rgb(201, 151, 43) 0px 2px 16px 0px !important;}
}