/*
Theme Name: Gutenbergschule Hellblau
Theme URI:
Author URI:
Description: Individuelles Theme für die Gutenbergschule Darmstadt – eigenständiges Hellblau-Farbkonzept. Enthält Startseite, alle Info-Unterseiten sowie Datenschutz- und Impressumsseite.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gutenbergschule-hellblau
*/

:root{
  --bg: #ffffff;
  --bg-soft: #e7f2fb;
  --card: #ffffff;
  --text: #0a4d73; /* vormals fast schwarz, jetzt dunkles Blau für Lesbarkeit */
  --text-dim: #3f7ca3; /* vormals Grau-Blau, jetzt mittleres Blau */
  --accent: #2e9bd6;
  --accent-2: #6cc6ea;
  --on-accent: #ffffff;
  --border: #cfe3f0;
  --success: #3fa9dc; /* Hellblau passend zum restlichen Farbschema */
  --error: #16688f; /* vormals Rot, jetzt dunkles Blau */
  --logo-text: #000000; /* "enbergschule" - im Hellmodus schwarz */
  --radius: 26px;
  --radius-sm: 14px;
  --maxw: 880px;

  /* Legt fest, dass die Seite standardmäßig hell ist, damit Browser/
     Betriebssysteme mit aktiviertem Dark Mode Formularelemente,
     Scrollbars etc. nicht automatisch umfärben. Der eigene Dunkelmodus-
     Knopf schaltet stattdessen gezielt auf [data-theme="dark"] um. */
  color-scheme: light;
  /* Einheitliche Akzentfarbe für native Formularelemente (Checkbox,
     Radio, Range-Slider) – sonst nutzt jeder Browser sein eigenes
     Standard-Blau (Chrome, Firefox, Safari sehen hier alle anders aus). */
  accent-color: var(--accent);
}

/* =========================================================
   DUNKELMODUS
   Wird per Knopf im Header umgeschaltet (siehe .theme-toggle),
   die Wahl wird im localStorage gemerkt (js/main.js).
   ========================================================= */
html[data-theme="dark"]{
  --bg: #0b1a26;
  --bg-soft: #0f2334;
  --card: #12283b;
  --text: #e6f2fb;
  --text-dim: #8fb6d1;
  --accent: #4db3e8;
  --accent-2: #6cc6ea;
  --on-accent: #06131d;
  --border: #26445c;
  --success: #4db3e8;
  --error: #7fc4ec;
  --logo-text: #f2f9ff;
  color-scheme: dark;
}

*{box-sizing:border-box;}

/* Harte Absicherung gegen horizontales Verschieben/Scrollen auf dem Handy:
   egal welches Element theoretisch zu breit werden könnte, die Seite
   selbst darf nie breiter als der Bildschirm werden. */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video{
  max-width: 100%;
  height: auto;
}

/* Einheitliche Textauswahl-Farbe (sonst variiert die Farbe je nach Browser/OS) */
::selection{
  background: var(--bg-soft);
  color: var(--accent);
}

/* Fokus-Rahmen: ersetzt den systemeigenen Fokus-Ring durch die
   feste Akzentfarbe des Themes. */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Links ohne eigene Klasse (z.B. in Fließtext auf Datenschutz-/Impressum-
   Seiten) übernehmen sonst die Standardfarbe des jeweiligen Browsers.
   Das legt sie fest auf den Theme-Akzent fest. */
a{ color: var(--accent); }
a:visited{ color: var(--accent); }
a:hover{ color: var(--accent-2); }

body{
  margin:0;
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  position: relative;
}

/* Sehr dezenter Parallax-Hintergrund: bleibt beim Scrollen fix stehen,
   während der Inhalt darüber scrollt – erzeugt Tiefe ohne JS/Ruckeln.
   Zusätzlich ein sehr langsames "Atmen" (Skalierung/Verschiebung), damit
   der Hintergrund nie ganz still steht. */
body::before{
  content:"";
  position: fixed;
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 42%),
    radial-gradient(circle at 85% 28%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
    radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 45%),
    var(--bg);
  animation: gsd-bg-breathe 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes gsd-bg-breathe{
  0%, 100%{ transform: scale(1) translate(0, 0); }
  50%{ transform: scale(1.07) translate(-1.2%, 1%); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ position: absolute; animation: none; }
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
html{ scroll-behavior: smooth; }

header.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px clamp(14px, 5vw, 60px);
  border-radius: var(--radius);
  position: sticky;
  top: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--bg-soft) 75%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Logo und Header-Tools dürfen schrumpfen statt den Header (und damit
   die ganze Seite) auf schmalen Handy-Bildschirmen breiter zu machen
   als der Bildschirm selbst. */
header.site-header > .logo,
header.site-header > .header-tools{
  min-width: 0;
  flex-shrink: 1;
}
header.site-header.is-scrolled{
  background: color-mix(in srgb, var(--bg-soft) 95%, transparent);
  box-shadow: 0 8px 24px -12px rgba(46,155,214,0.18);
}
header.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 220% 100%;
  animation: gsd-edge-flow 7s linear infinite;
  opacity: 0.8;
}

.logo{
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-0.02em;
  color: var(--logo-text); /* "enbergschule" - hell: schwarz, dunkel: fast weiß */
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.logo:hover{ transform: translateY(-1px); filter: brightness(1.1); }
.logo .logo-gut{ color: var(--accent); } /* "GUT" hellblau */
.logo-icon{
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

nav.site-nav{
  display:flex;
  align-items:center;
  gap: 4px;
}
nav.site-nav a{
  color: var(--text-dim);
  text-decoration:none;
  font-size:0.92rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
}
nav.site-nav a:hover{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- Nav-Dropdown "Schulleben" ---- */
.nav-dropdown{
  position: relative;
}
.nav-dropdown summary{
  list-style: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  user-select: none;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary::after{
  content: "▾";
  font-size: 0.7em;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.nav-dropdown[open] summary::after{ transform: rotate(180deg); }
.nav-dropdown summary:hover,
.nav-dropdown[open] summary{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}

.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 20px 45px -18px color-mix(in srgb, var(--accent) 25%, transparent);
  z-index: 20;
}
.nav-dropdown-menu a{
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  border-color: transparent;
}
.nav-dropdown-menu a:hover{
  transform: none;
  box-shadow: none;
  background: var(--bg-soft);
}

/* ---- Header auf schmalen Handy-Breiten kompakter machen ----
   Vorher konnten Logo-Schriftzug + Sprachumschalter + Dunkelmodus-
   Knopf + Hamburger zusammen breiter werden als der Bildschirm,
   wodurch die ganze Seite seitlich verschoben werden musste. */
@media (max-width: 600px){
  header.site-header{ padding-top:10px; padding-bottom:10px; gap: 6px; }
  .logo{ font-size: 1.05rem; }
  .logo .logo-rest{ display:none; }
  .logo-icon{ width:34px !important; height:34px !important; margin-right:8px; }
  .header-tools{ gap: 8px; }
  .lang-switch{ padding: 2px; }
  .lang-btn{ padding: 5px 9px; font-size: 0.7rem; }
  .theme-toggle, .menu-toggle{ width: 34px; height:34px; }
}
@media (max-width: 360px){
  .lang-switch{ display:none; }
}

@media (max-width: 700px){
  .nav-dropdown{ margin-left: 0; display:block; }
  .nav-dropdown summary{ margin: 0 0 14px; font-size: 1.05rem; }
  .nav-dropdown-menu{
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .nav-dropdown-menu a{ padding: 6px 0; margin: 0 0 10px !important; }
}

/* ---- Header-Tools-Wrapper (Sprache + Hamburger) ---- */
.header-tools{
  display:flex;
  align-items:center;
  gap: 14px;
}

/* Sprachumschalter DE/EN als Pill-Toggle */
.lang-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-pill{
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--accent);
  transition: transform 0.3s cubic-bezier(.22,.9,.32,1);
  z-index: 0;
}
.lang-switch.lang-en .lang-pill{ transform: translateX(100%); }
.lang-btn{
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding: 6px 13px;
  border-radius: 999px;
  transition: color 0.25s ease;
}
.lang-btn.is-active{ color: var(--accent); }
.lang-btn:not(.is-active):hover{ color: var(--text); }
@media (max-width: 700px){
  .lang-switch{ margin-left:0; }
}

/* ---- Mobil-Menü (Hamburger) ---- */
.menu-toggle{
  display:none;
  width: 38px; height:38px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 11%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.menu-toggle span{
  display:block;
  width: 18px; height:2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(.22,.9,.32,1), opacity 0.2s ease;
}
.menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 700px){
  .menu-toggle{ display:flex; }

  nav.site-nav{
    display:block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: var(--radius);
    padding: 6px clamp(20px,5vw,60px) 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  }
  nav.site-nav.is-open{
    max-height: 320px;
    opacity: 1;
    padding: 16px clamp(20px,5vw,60px) 20px;
  }
  nav.site-nav a{
    display:block;
    margin: 0 0 14px;
    font-size: 1.05rem;
  }
}

/* Scroll progress bar (wird per JS eingefügt) */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 600; /* über dem sticky Header (z-index: 500), sonst unsichtbar */
  transition: transform 0.12s linear;
}

/* =========================================================
   LAYOUT / MAIN
   ========================================================= */
main{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.home main, .front-page main{ max-width: 1120px; padding: 0; }

/* Abgerundete "Blöcke" auf der Startseite: jeder direkte <section>
   zwischen Hero und Footer (Warum-wir, Angebot, Anmeldung, CTA-Banner,
   Kontakt) bekommt runde Ecken plus etwas Abstand zueinander – so wie
   Header und Footer, die bereits abgerundet sind. Ohne den Abstand
   wäre die Rundung an manchen Stellen unsichtbar, z.B. zwischen dem
   letzten Block und dem Footer, die dieselbe Hintergrundfarbe haben. */
.home main > section, .front-page main > section{
  border-radius: var(--radius);
  margin: 22px 0;
}
.home main > section:first-child, .front-page main > section:first-child{
  margin-top: 0;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: 24px clamp(20px,5vw,60px) 60px;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.hero > *{ position: relative; z-index: 1; }

/* Sanft schwebende Deko-Kreise im Hero – rein dekorativ, liegen hinter
   dem Text und geben dem allerersten Bildschirm mehr Leben. */
.hero-decor{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.4;
  animation: gsd-hero-float 11s ease-in-out infinite;
}
.hero-blob-1{
  width: 130px; height: 130px;
  top: 12%; left: 8%;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 70%);
  animation-delay: 0s;
}
.hero-blob-2{
  width: 80px; height: 80px;
  top: 62%; left: 85%;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  animation-delay: 2.6s;
}
.hero-blob-3{
  width: 50px; height: 50px;
  top: 20%; left: 80%;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 70%);
  animation-delay: 5.2s;
}
@keyframes gsd-hero-float{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(12px, -24px); }
}
@media (max-width: 700px){
  .hero-blob-2, .hero-blob-3{ display: none; }
}

/* Globales Parallax-Logo: liegt fest im Hintergrund der gesamten Seite
   (position: fixed statt nur an den Hero-Bereich gebunden), ist dadurch auf
   jeder Unterseite vorhanden und bleibt beim Scrollen immer auf derselben
   Bildschirmhöhe stehen, während der Inhalt darüber wegscrollt. Zusätzlich
   erhält nur dieses Logo eine hellblaue Beleuchtung (Glow); das Logo im
   Header bleibt davon unberührt. */
.site-parallax-logo{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: none; /* wird per inline style gesetzt */
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(640px, 55vw) auto;
  opacity: 0.1;
  pointer-events: none;
  filter:
    drop-shadow(0 0 45px var(--accent-2))
    drop-shadow(0 0 90px var(--accent));
}
@media (prefers-reduced-motion: reduce){
  .site-parallax-logo{ position: absolute; }
}
.hero h1{
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 14px;
  letter-spacing: -0.03em;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gsd-gradient-flow 5s linear infinite;
}
@keyframes gsd-gradient-flow{ to{ background-position: 200% center; } }

.hero p{
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 60ch;
  margin: 0 auto;
}
.hero .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* Der Hero ist beim Laden sofort sichtbar, keine Einblend-Animation,
   damit unter dem Header nie eine leere Fläche zu sehen ist. */
.hero .reveal{ opacity: 1; transform: none; filter: blur(0); animation: none; }

/* Vertrauens-Leiste: als Badges hervorgehoben, aber ruhig gehalten */
.trust-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px 12px;
  margin-top: 26px;
  letter-spacing: 0.01em;
}
.trust-bar span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 2px 10px -6px rgba(46,155,214,0.15);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.25s ease, background 0.25s ease;
}
.trust-bar span:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), var(--bg-soft));
}
.trust-icon{ font-size: 1rem; }
@media (max-width: 700px){
  .trust-bar{ gap: 8px 10px; }
  .trust-bar span{ font-size: 0.76rem; padding: 7px 13px; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.cta{
  display:inline-block;
  margin-top: 28px;
  background: var(--card);
  color: var(--accent);
  border: 2px solid var(--accent);
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration:none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, filter 0.3s ease;
}
.cta:hover{
  background: var(--bg-soft);
  transform: translateY(-5px) scale(1.035);
  box-shadow: 0 22px 48px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  filter: brightness(1.1);
}
.cta:active{ transform: translateY(-1px) scale(0.98); }
.cta:not(.ghost)::before{
  content:"";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--accent) 45%, white) 50%, transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: gsd-cta-shimmer 5s ease-in-out infinite;
}
@keyframes gsd-cta-shimmer{
  0%{ left: -60%; }
  30%{ left: 130%; }
  100%{ left: 130%; }
}
.cta.ghost{
  background:none;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}
.cta.ghost:hover{
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.cta .ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out;
  pointer-events: none;
}
@keyframes ripple-anim{ to{ transform: scale(2.6); opacity: 0; } }

/* =========================================================
   SECTIONS / CARDS / STEPS
   ========================================================= */
.section{ padding: 90px clamp(20px,5vw,60px); }
.section.alt{ background: var(--bg-soft); }
.section > .section-head{ text-align:center; max-width: 640px; margin: 0 auto 10px; }
.section-head h2{ font-size: clamp(1.5rem,4vw,2.1rem); margin: 0 0 12px; }
.section-head p{ color: var(--text-dim); margin:0; }
.section-head.left{ text-align:left; margin:0 0 10px; }

.eyebrow{
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 800px){ .grid-3{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 28px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent)) border-box;
  background-size: 100% 100%, 260% 260%;
  animation: gsd-border-flow 9s linear infinite;
  box-shadow: 0 2px 14px -6px rgba(46,155,214,0.12);
  transition: transform 0.4s cubic-bezier(.22,.9,.32,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.card:hover{
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 20px 40px -22px rgba(46,155,214,0.22);
}
.card .icon{
  font-size: 1.5rem;
  width: 48px; height: 48px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent-2) 13%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 7%, transparent);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  animation: gsd-icon-glow 3.2s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.3s);
}
@keyframes gsd-icon-glow{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
}
.card:hover .icon{ transform: scale(1.18) rotate(-6deg); }
.card .icon .icon-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.card h3{ margin: 0 0 10px; font-size: 1.1rem; }
.card p{ color: var(--text-dim); font-size: 0.92rem; margin:0; }
.card ul{ margin: 14px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 0.9rem; }

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 800px){ .steps{ grid-template-columns: 1fr; } }
.step{ transition: transform 0.4s cubic-bezier(.22,.9,.32,1); }
.step .num{
  width: 40px; height:40px; border-radius:50%;
  background: var(--card);
  border: 2px solid var(--accent);
  color: var(--accent); font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.step:hover .num{ transform: scale(1.12); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 44%, transparent); }
.step h4{ margin: 0 0 8px; }
.step p{ color: var(--text-dim); font-size: 0.92rem; margin:0; }

.cta-banner{
  text-align:center;
  padding: 80px clamp(20px,5vw,60px);
}
.cta-banner h2{ font-size: clamp(1.6rem,4vw,2.4rem); margin-bottom:16px; }
.cta-banner p{ color: var(--text-dim); max-width:60ch; margin:0 auto 30px; }
.cta-banner .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   KONTAKT / FORMULAR
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 40px;
}
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-item{ display:flex; gap:14px; margin-bottom: 26px; transition: transform 0.4s cubic-bezier(.22,.9,.32,1); }
.contact-item .icon{ font-size:1.3rem; display:inline-block; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.contact-item:hover .icon{ transform: scale(1.2) rotate(6deg); }
.contact-item h4{ margin:0 0 4px; font-size:0.95rem; }
.contact-item p{ margin:0; color: var(--text-dim); font-size:0.9rem; }
.contact-item a{ color: var(--text-dim); text-decoration:none; }
.contact-item a:hover{ color: var(--accent); }

.form input, .form select, .form textarea{
  width:100%;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  margin-bottom: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.form label{ font-size: 0.85rem; color: var(--text-dim); display:block; margin-bottom: 6px; }
.form button{ border:none; cursor:pointer; font-family:inherit; }
#gsdFormSubmit{
  display:block;
  width:100%;
  text-align:center;
  font-size: 1rem;
  margin-top: 6px;
}
#gsdFormSubmit:disabled{
  opacity: 0.7;
  cursor: default;
  transform: none !important;
}
.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-status{
  margin: 14px 0 0;
  font-size: 0.88rem;
  min-height: 1.3em;
  color: var(--text-dim);
}
.form-status.success{ color: var(--success); }
.form-status.error{ color: var(--error); }

/* ---- KI-Chatbot: fester Floating-Widget unten rechts (mwai_chatbot) ---- */
/* Fixed statt in-page, damit der Chat auf JEDER Seite und beim Scrollen
   immer erreichbar bleibt. */
.gsd-chat-widget{
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 9999;
  /* AI-Engine-eigene CSS-Variablen etwas größer/passend zum Theme setzen,
     damit das geöffnete Chat-Fenster gut lesbar ist statt winzig zu wirken */
  --mwai-window-width: 380px;
  --mwai-window-height: min(70vh, 640px);
  --mwai-fullscreen-height: 88vh;
}
@media (max-width: 480px){
  .gsd-chat-widget{
    right: 10px;
    bottom: 10px;
    --mwai-window-width: calc(100vw - 20px);
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer-full{
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 60px clamp(20px,5vw,60px) 30px;
  position: relative;
}
.footer-full::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-2));
  background-size: 220% 100%;
  animation: gsd-edge-flow 7s linear infinite reverse;
  opacity: 0.8;
}
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h5{ color:var(--text); margin: 0 0 14px; font-size:0.9rem; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom: 10px; }
.footer-grid a{ color: var(--text-dim); text-decoration:none; font-size:0.9rem; }
.footer-grid a:hover{ color: var(--accent); }
.footer-bottom{
  max-width:1120px; margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 7%, transparent);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: var(--text-dim); font-size:0.85rem;
}
.footer-bottom a{ color: var(--text-dim); margin-left: 16px; text-decoration:none; }
.footer-bottom a:hover{ color: var(--accent); }

/* =========================================================
   RECHTLICHE SEITEN (Impressum, Datenschutz, Fragen, …)
   ========================================================= */
.legal main{
  padding-top: clamp(30px, 6vw, 60px);
  animation: legal-fade-in 0.6s ease both;
}
@keyframes legal-fade-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .legal main{ animation: none; }
}

.legal h1{
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  margin-bottom: 6px;
  letter-spacing:-0.02em;
}
.legal .updated{
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 40px;
}
.legal h2{
  font-size: 1.2rem;
  margin-top: 40px;
  color: var(--accent);
}
.legal h3{
  font-size: 1.05rem;
  margin-top: 28px;
  color: var(--text);
}
.legal p, .legal li{ color: var(--text); }
.legal ul{ padding-left: 20px; }
.legal a{ color: var(--accent); }

.legal table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 30px;
  font-size: 0.95rem;
}
.legal table th,
.legal table td{
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal table th{ color: var(--accent); font-weight: 700; }
@media (max-width: 600px){
  .legal table{ font-size: 0.85rem; }
  .legal table th, .legal table td{ padding: 8px; }
}

.placeholder{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.95em;
}

/* =========================================================
   SCROLL-REVEAL & GEMEINSAME ANIMATIONEN
   ========================================================= */

/* Wiederverwendbare Rand-Animationen: lassen einen Farbverlauf
   langsam am Rand eines Blocks entlangwandern. */
@keyframes gsd-border-flow{
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}
@keyframes gsd-edge-flow{
  0%   { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

.reveal{
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(.22,.9,.32,1), transform 0.7s cubic-bezier(.22,.9,.32,1), filter 0.7s cubic-bezier(.22,.9,.32,1);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform, filter;
}
.reveal.in-view{ opacity: 1; transform: none; filter: blur(0); }

/* =========================================================
   COOKIE-CONSENT-GATE
   ========================================================= */
html.cookie-gate-active,
html.cookie-gate-active body,
html.gsd-lightbox-active,
html.gsd-lightbox-active body{
  overflow: hidden;
  height: 100%;
}

/* Harte Absicherung: wurde bereits (auch bei einer eventuell gecachten
   Seite) eine Cookie-Entscheidung im localStorage hinterlegt, bleibt
   der Banner/Overlay sofort und ohne jede Animation unsichtbar. */
html.gsd-consent-set .cookie-banner,
html.gsd-consent-set .cookie-overlay{
  display: none !important;
}

.cookie-overlay{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(10,74,110,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.cookie-overlay[hidden]{ display: none; }
.cookie-overlay.is-visible{ opacity: 1; pointer-events: auto; }

.cookie-banner{
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  width: min(92vw, 640px);
  max-height: 90vh;
  overflow-y: auto;
  transform: translate(-50%, -50%) scale(0.94);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -24px rgba(10,74,110,0.7);
  padding: 44px 46px;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(.22,.9,.32,1), transform 0.5s cubic-bezier(.22,.9,.32,1);
  pointer-events: none;
  background:
    linear-gradient(160deg, var(--card), var(--bg-soft)) padding-box,
    linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent)) border-box;
  background-size: 100% 100%, 260% 260%;
  animation: gsd-border-flow 9s linear infinite;
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.cookie-banner-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.cookie-logo{ flex-shrink: 0; overflow: visible; margin-bottom: 4px; }
.cookie-banner-title{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
.cookie-banner-text{
  margin: 0;
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 46ch;
}
.cookie-banner-text a{ color: var(--accent); }
.cookie-banner-actions{
  display: flex;
  gap: 14px;
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}
.cookie-btn{
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 29px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.cookie-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  filter: brightness(1.05);
}
.cookie-btn.ghost{
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.cookie-btn.ghost:hover{
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 33%, transparent);
  box-shadow: none;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

@media (max-width: 640px){
  .cookie-banner{ width: min(94vw, 640px); padding: 32px 26px; border-radius: var(--radius); }
  .cookie-banner-title{ font-size: 1.25rem; }
  .cookie-banner-text{ font-size: 0.94rem; }
  .cookie-banner-actions{ flex-direction: column; }
  .cookie-btn{ width: 100%; text-align: center; }
}

/* Line-draw Logo-Animation: K-Zeichen + Bot-Icon zeichnen sich beim
   Erscheinen des Cookie-Banners selbst, danach füllen sich Farbe/Augen ein. */
.cookie-logo .cl-k-bar,
.cookie-logo .cl-k-chevron{
  stroke-width: 4;
  stroke-linejoin: round;
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.cookie-logo .cl-k-bar{
  stroke: var(--accent);
  fill: var(--accent);
  animation: cl-draw 0.7s ease 0.15s forwards, cl-fill 0.4s ease 0.7s forwards;
}
.cookie-logo .cl-k-chevron{
  stroke: var(--accent-2);
  fill: var(--accent-2);
  animation: cl-draw 0.8s ease 0.65s forwards, cl-fill 0.4s ease 1.3s forwards;
}
.cookie-logo .cl-bot-antenna-line,
.cookie-logo .cl-bot-antenna-dot,
.cookie-logo .cl-bot-body,
.cookie-logo .cl-bot-tail{
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.cookie-logo .cl-bot-antenna-dot{ animation: cl-draw 0.25s ease 1.5s forwards; }
.cookie-logo .cl-bot-antenna-line{ animation: cl-draw 0.2s ease 1.6s forwards; }
.cookie-logo .cl-bot-body{ animation: cl-draw 0.9s ease 1.75s forwards; }
.cookie-logo .cl-bot-tail{ animation: cl-draw 0.35s ease 2.55s forwards; }
.cookie-logo .cl-bot-eye{
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  animation: cl-eye 0.3s ease forwards;
}
.cookie-logo .cl-eye-l{ animation-delay: 2.85s; }
.cookie-logo .cl-eye-r{ animation-delay: 2.95s; }

@keyframes cl-draw{ to{ stroke-dashoffset: 0; } }
@keyframes cl-fill{ to{ fill-opacity: 1; } }
@keyframes cl-eye{ to{ opacity: 1; transform: scale(1); } }

/* =========================================================
   REDUCED MOTION: alles beruhigen
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0) !important;
    transition: none !important;
  }
  .cta, .card, .step, .contact-item{ transition: none; }
  .lang-pill, nav.site-nav a::after, .logo{ transition: none; }
  .hero-blob{ animation: none; }
  .card .icon{ animation: none; }
  .cta::before{ display: none; }
  .hero h1 em{ animation: none; background-position: 0 0; }
  .card .icon, .contact-item .icon, .step .num{ transition: none; }
  .scroll-progress{ display: none; }
  .cta .ripple{ display: none; }
  .cookie-banner{ transition: none; }
  .cookie-overlay{ transition: none; }
  .card, .cookie-banner{
    animation: none;
    background-position: 0 0, 0% 0% !important;
  }
  header.site-header::after,
  .footer-full::before{
    animation: none;
    background-position: 0% 0;
  }
  .cookie-logo .cl-k-bar,
  .cookie-logo .cl-k-chevron,
  .cookie-logo .cl-bot-antenna-line,
  .cookie-logo .cl-bot-antenna-dot,
  .cookie-logo .cl-bot-body,
  .cookie-logo .cl-bot-tail{
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
  .cookie-logo .cl-bot-eye{ animation: none; opacity: 1; transform: scale(1); }
  .gsd-photo, .gsd-gallery img, .gsd-team img{
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gsd-photo:hover, .gsd-gallery img:hover, .gsd-team img:hover{ transform: none; }
}

/* =========================================================
   BILDER AUF DEN INHALTSSEITEN (Menü-Unterseiten)
   Einzelbilder und Bildergalerien innerhalb von .legal main
   ========================================================= */
.gsd-photo{
  display:block;
  width:62%;
  height:auto;
  margin: 28px auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  opacity:0;
  cursor: zoom-in;
  animation: gsd-img-in 0.6s ease forwards;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gsd-photo:hover{
  transform: scale(1.05);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 18%, transparent);
}
.gsd-photo-caption{
  display:block;
  text-align:center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: -18px 0 28px;
}
.gsd-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 14px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  max-width: 62%;
}
.gsd-gallery li{ margin:0; }
.gsd-gallery img{
  width:100%;
  height: 125px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display:block;
  opacity:0;
  cursor: zoom-in;
  animation: gsd-img-in 0.6s ease forwards;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gsd-gallery img:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--text) 18%, transparent);
}
.gsd-gallery li:nth-child(1) img{ animation-delay: 0.05s; }
.gsd-gallery li:nth-child(2) img{ animation-delay: 0.12s; }
.gsd-gallery li:nth-child(3) img{ animation-delay: 0.19s; }
.gsd-gallery li:nth-child(4) img{ animation-delay: 0.26s; }
.gsd-gallery li:nth-child(5) img{ animation-delay: 0.33s; }
.gsd-gallery li:nth-child(6) img{ animation-delay: 0.40s; }
.gsd-gallery figcaption{
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 6px;
  text-align:center;
}
.gsd-team{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  max-width: 280px;
}
.gsd-team li{ margin:0; text-align:center; }
.gsd-team img{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border);
  display:block;
  margin: 0 auto 8px;
  opacity:0;
  cursor: zoom-in;
  animation: gsd-img-in 0.6s ease forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gsd-team img:hover{
  transform: scale(1.12);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 18%, transparent);
}
.gsd-team li:nth-child(1) img{ animation-delay: 0.05s; }
.gsd-team li:nth-child(2) img{ animation-delay: 0.15s; }
.gsd-team li:nth-child(3) img{ animation-delay: 0.25s; }
.gsd-team .gsd-team-name{ font-weight:700; color: var(--text); display:block; font-size: 0.85rem; }
.gsd-team .gsd-team-role{ font-size: 0.75rem; color: var(--text-dim); }

@keyframes gsd-img-in{
  from{ opacity: 0; transform: translateY(16px) scale(0.94); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px){
  .gsd-photo, .gsd-gallery{ max-width: 100%; }
}

/* =========================================================
   BILD-LIGHTBOX
   Klick auf ein Inhaltsbild (.gsd-photo, .gsd-gallery, .gsd-team)
   öffnet es groß in einer Overlay-Ansicht.
   ========================================================= */
.gsd-lightbox{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 60px);
  background: color-mix(in srgb, var(--bg) 12%, rgba(6,20,32,0.88));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gsd-lightbox[hidden]{ display: none; }
.gsd-lightbox.is-visible{ opacity: 1; pointer-events: auto; }
.gsd-lightbox figure{
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(.22,.9,.32,1);
}
.gsd-lightbox.is-visible figure{ transform: scale(1); }
.gsd-lightbox img{
  display:block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
  background: var(--card);
}
.gsd-lightbox figcaption{
  margin-top: 14px;
  color: #ffffff;
  font-size: 0.92rem;
  text-align: center;
  max-width: 60ch;
}
.gsd-lightbox-close{
  position: absolute;
  top: clamp(10px, 3vw, 26px);
  right: clamp(10px, 3vw, 26px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10,26,38,0.55);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.gsd-lightbox-close:hover{
  background: rgba(10,26,38,0.85);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .gsd-lightbox, .gsd-lightbox figure{ transition: none; }
}

/* =========================================================
   DUNKELMODUS-KNOPF (Header)
   ========================================================= */
.theme-toggle{
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 11%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.theme-toggle:hover{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.theme-toggle svg{
  width: 19px;
  height: 19px;
  color: var(--text-dim);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22,.9,.32,1);
}
.theme-toggle .ti-sun{ position:absolute; }
.theme-toggle .ti-moon{ position:absolute; opacity:0; transform: scale(0.5) rotate(-40deg); }
html[data-theme="dark"] .theme-toggle .ti-sun{ opacity:0; transform: scale(0.5) rotate(40deg); }
html[data-theme="dark"] .theme-toggle .ti-moon{ opacity:1; transform: scale(1) rotate(0); }
@media (prefers-reduced-motion: reduce){
  .theme-toggle svg{ transition: opacity 0.2s ease; }
}