/* ==========================================================================
   3D-Printworld, Design System (Apple-inspired)
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#e2e5e9;
  --bg-soft-rgb:226,229,233;
  --bg-soft-2:#eef0f2;
  --ink:#1d1d1f;
  --ink-rgb:29,29,31;
  --ink-soft:#4b4c52;
  --line:rgba(0,0,0,.18);
  /* Markenfarben, abgeleitet aus dem bestehenden 3D-Printworld-Logo (Teal #216778 / Grün #668000),
     für AA-Kontrast in hellem und dunklem Modus separat austariert. */
  /* Beide Akzentfarben wurden rechnerisch so weit abgedunkelt, dass sie im
     Hellmodus auf JEDEM verwendeten Hintergrund (weiß, --bg-soft,
     --bg-soft-2) mindestens 4.6:1 Kontrast erreichen und damit WCAG AA
     erfüllen, vorher lagen sie auf den grauen Flächen bei 4.06–4.49. */
  --accent:#0b6d80;        /* Teal-Blau, primäre Markenfarbe, 3D-Druck */
  --accent-rgb:11,109,128;
  --accent-2:#467000;      /* Grün, ausschließlich für Lasergravur/LaserArtWorld */
  --accent-2-rgb:70,112,0;
  /* Feste Volltonfarben für Buttons/Badges mit weißer Schrift, bewusst NICHT
     zwischen Hell-/Dunkelmodus austauschbar, damit der Textkontrast in beiden
     Modi zuverlässig bestehen bleibt (das helle Dark-Mode-Cyan wäre mit
     weißer Schrift z. B. zu kontrastarm). */
  --accent-solid:#0e7c93;
  --accent-solid-rgb:14,124,147;
  --accent-2-solid:#4c7a00;
  --accent-2-solid-rgb:76,122,0;
  --card:#ffffff;
  --card-rgb:255,255,255;
  --nav-bg:rgba(255,255,255,.55);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.09), 0 3px 14px rgba(0,0,0,.08);
  --shadow-md:0 8px 30px rgba(0,0,0,.14);
  --shadow-lg:0 20px 60px rgba(0,0,0,.2);
  --cta-gradient:linear-gradient(135deg,#3d3d40,#232325);
  --maxw:1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg-soft:#0a0a0c;
    --bg-soft-rgb:10,10,12;
    --bg-soft-2:#111113;
    --ink:#f5f5f7;
    --ink-rgb:245,245,247;
    --ink-soft:#a1a1a6;
    --line:rgba(255,255,255,.1);
    --card:#161618;
    --card-rgb:22,22,24;
    --nav-bg:rgba(15,15,17,.58);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.3);
    --shadow-md:0 8px 30px rgba(0,0,0,.5);
    --shadow-lg:0 20px 60px rgba(0,0,0,.6);
    --accent:#2dd4ee;
    --accent-rgb:45,212,238;
    --accent-2:#9bd94a;
    --accent-2-rgb:155,217,74;
    --cta-gradient:linear-gradient(135deg,#1d1d1f,#000);
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-soft:#0a0a0c;
  --bg-soft-rgb:10,10,12;
  --bg-soft-2:#111113;
  --ink:#f5f5f7;
  --ink-rgb:245,245,247;
  --ink-soft:#a1a1a6;
  --line:rgba(255,255,255,.1);
  --card:#161618;
  --card-rgb:22,22,24;
  --nav-bg:rgba(15,15,17,.58);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 30px rgba(0,0,0,.5);
  --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  --accent:#2dd4ee;
  --accent-rgb:45,212,238;
  --accent-2:#9bd94a;
  --accent-2-rgb:155,217,74;
  --cta-gradient:linear-gradient(135deg,#1d1d1f,#000);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Muss vor allen Layout-Regeln stehen: Ein eigenes display:flex/grid würde
   sonst das display:none des HTML-Attributs "hidden" aushebeln. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
section{ position:relative; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

::selection{ background:var(--accent); color:#fff; }

/* ---- Typography scale (fluid, Apple-esque) ---- */
.eyebrow{
  font-size:0.9375rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); text-transform:none;
}
h1.display{
  font-size:clamp(2.5rem, 7vw, 5.5rem);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-0.02em;
}
h2.headline{
  font-size:clamp(2rem, 5vw, 3.5rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-0.02em;
}
.subhead{
  font-size:clamp(1.375rem, 3vw, 1.875rem);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-0.01em;
}
p.lead{
  font-size:clamp(1.125rem, 2.4vw, 1.5rem);
  line-height:1.5;
  color:var(--ink-soft);
  font-weight:400;
}
p.body{
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.small{ font-size:0.8125rem; color:var(--ink-soft); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-size:1rem; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, border-color .25s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink); color:var(--bg);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-accent{
  background:var(--accent-solid);
  color:#fff;
}
.btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.1); box-shadow:0 10px 30px rgba(var(--accent-solid-rgb),.35); }
.btn-accent-green{
  background:var(--accent-2-solid);
  color:#fff;
}
.btn-accent-green:hover{ transform:translateY(-2px); filter:brightness(1.15); box-shadow:0 10px 30px rgba(var(--accent-2-solid-rgb),.35); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover{ background:rgba(var(--ink-rgb),.08); border-color:var(--ink); }
.btn-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); font-weight:600; font-size:1rem;
}
.btn-link .arrow{ transition:transform .2s; }
.btn-link:hover .arrow{ transform:translateX(4px); }

/* ---- Nav ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  /* Deutlich durchlässiger als vorher und stärker weichgezeichnet, damit
     der farbige Hintergrund sichtbar durchscheint, sonst wirkt die Leiste
     wie eine schlichte Farbfläche statt wie Glas. */
  backdrop-filter:saturate(240%) blur(34px);
  -webkit-backdrop-filter:saturate(240%) blur(34px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  /* Feine Lichtkante oben und unten. Der typische Glasrand. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(var(--ink-rgb),.06),
             0 1px 20px rgba(0,0,0,.06);
  transition:background .3s, box-shadow .3s;
}
:root[data-theme="dark"] .nav{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             inset 0 -1px 0 rgba(0,0,0,.4),
             0 1px 24px rgba(0,0,0,.35);
}

.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:108px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:0.9375rem; }
.brand-logo{ height:84px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:0.9375rem; color:var(--ink); opacity:.85; font-weight:500;
  transition:opacity .2s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; color:var(--accent); }
.nav-cta{
  font-size:0.9375rem; font-weight:600; padding:8px 18px; border-radius:100px;
  background:var(--ink); color:var(--bg);
}
.nav-right{ display:flex; align-items:center; gap:14px; }

/* ---- Hell-/Dunkel-Umschalter (eigener Button in der Nav) ---- */
.theme-toggle-wrap{ position:relative; }
.theme-toggle{
  width:36px; height:36px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:rgba(var(--card-rgb),.55); color:var(--ink);
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.theme-toggle:hover{ border-color:var(--accent); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-popover{
  position:absolute; top:calc(100% + 10px); right:0; z-index:1100;
  background:rgba(var(--card-rgb),.78); border:1px solid var(--line); border-radius:var(--radius-sm);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow-md); padding:8px; display:none; gap:6px; white-space:nowrap;
}
.theme-popover.open{ display:flex; }
.theme-popover button{
  padding:8px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink); font-size:0.875rem; font-weight:600; cursor:pointer;
}
.theme-popover button[aria-pressed="true"]{ background:var(--accent-solid); color:#fff; border-color:transparent; }
/* (Ehemalige Sonderregel für sehr schmale Geräte entfernt. Das Menü wird
   jetzt weiter unten am Bildschirm ausgerichtet, das deckt alle Breiten ab.) */

.nav-toggle{
  /* 44×44px Tastfläche (Apple/Google-Empfehlung für Touch-Ziele). Das
     sichtbare Icon bleibt schlank, nur die klickbare Fläche wird größer. */
  display:none; width:44px; height:44px; position:relative; background:none; border:0; padding:0; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:50%; width:22px; height:2px; background:var(--ink);
  transform:translateX(-50%); transition:.25s;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.open span:nth-child(1){ transform:translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateX(-50%) translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:108px 0 0 0; z-index:999;
  background:var(--bg); transform:translateY(-110%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding:24px; gap:4px;
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  padding:18px 4px; border-bottom:1px solid var(--line); font-size:1.375rem; font-weight:600;
}

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---- Hero ---- */
/* Kopfbereich der Unterseiten: bewusst feste Höhe in Pixeln statt in
   Bildschirmhöhe (vh). Vorher hing die Höhe davon ab, ob der Einleitungstext
   zwei oder drei Zeilen brauchte, dadurch war der Balken je Seite
   unterschiedlich hoch. Der Wert liegt knapp über dem längsten Inhalt, also
   ist er auf allen Unterseiten identisch und zugleich deutlich flacher als
   vorher. */
.hero.hero-sub{
  min-height:420px;
  padding:120px 24px 44px;
}
.hero.hero-sub .display{ font-size:clamp(2.25rem, 5vw, 3.5rem); }
.hero.hero-sub .lead{ margin-top:14px; }
.hero.hero-sub .hero-actions{ margin-top:28px; }
@media (max-width:640px){
  .hero.hero-sub{ min-height:340px; padding:112px 20px 36px; }
}

.hero{
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:140px 24px 80px;
  position:relative;
  overflow:hidden;
  background:var(--bg-soft-2);
}
.hero-glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(40% 50% at 28% 20%, rgba(var(--accent-rgb),.18), transparent 70%),
    radial-gradient(35% 45% at 78% 30%, rgba(var(--accent-rgb),.1), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2%, 3%, 0) scale(1.05); }
}
.hero > *{ position:relative; z-index:1; }
.hero .display{ max-width:900px; margin:0 auto; }
.hero .lead{ max-width:640px; margin:20px auto 0; }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; justify-content:center; }

/* ---- Hero visual: real workshop photo ---- */
.hero-visual{
  margin-top:64px; width:100%; max-width:960px;
  aspect-ratio:16/8;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,#1d1d1f,#313133);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
@media (max-width:640px){
  .hero-visual{ aspect-ratio:4/3; border-radius:var(--radius-md); margin-top:40px; }
  /* Der obere Innenabstand muss die feste Navigationsleiste (auf dem Handy
     88 px hoch) freihalten, 120 px lassen darunter noch 32 px Luft. */
  .hero{ padding:120px 20px 56px; }
  .hero-actions{ gap:12px; margin-top:28px; }
}
.hero-photo{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ---- Hinweis auf KI-generierte Fotos (EU-Transparenzpflicht) ---- */
.ai-badge{
  position:absolute; bottom:12px; left:12px; z-index:2;
  background:rgba(0,0,0,.62); color:#fff; font-size:0.6875rem; font-weight:600;
  padding:4px 11px; border-radius:100px; letter-spacing:.02em;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

/* ---- Sections ---- */
/* Der Seitenrhythmus ist bewusst großzügig, skaliert aber mit der
   Bildschirmbreite: 120 px Abstand oben UND unten sind auf einem 1440-px-
   Monitor eine ruhige Pause, auf einem 390-px-Telefon dagegen 240 px
   Leerraum zwischen zwei Absätzen, also fast ein Drittel der sichtbaren
   Höhe. Die Staffelung weiter unten führt den Abstand deshalb stufenweise
   zurück, ohne die Optik am Desktop anzutasten. */
.section{ padding:120px 0; }
.section.tight{ padding:80px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 64px; }
.section-head.left{ text-align:left; margin:0 0 56px; }

@media (max-width:900px){
  .section{ padding:96px 0; }
  .section.tight{ padding:68px 0; }
  .section-head{ margin-bottom:52px; }
  .section-head.left{ margin-bottom:44px; }
}
@media (max-width:640px){
  .section{ padding:72px 0; }
  .section.tight{ padding:52px 0; }
  .section-head{ margin-bottom:40px; }
  .section-head.left{ margin-bottom:34px; }
  .container{ padding:0 20px; }
}

/* ---- Stats band ---- */
/* minmax(0,1fr) statt 1fr: Mit reinem "1fr" darf eine Spalte nicht schmaler
   werden als ihr längstes Wort. Auf 320 px breiten Geräten (iPhone SE der
   ersten Generation) sprengte deshalb "Fertigungstechniken:" das Raster und
   die Seite ließ sich seitlich verschieben. */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px;
  padding:64px 0;
}
.stat{ text-align:center; }
/* Die Kennzahlen standen vorher mit 56 px genau so groß da wie die
   Abschnitts-Überschriften (h2.headline) und haben ihnen damit optisch die
   Hauptrolle abgenommen. Jetzt liegen sie klar eine Stufe darunter. */
.stat .num{
  font-size:clamp(2rem,4vw,2.75rem); font-weight:700; letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--accent);
}
.stat .label{
  margin-top:8px; color:var(--ink-soft); font-size:0.9375rem; line-height:1.45;
  /* Lange Fachwörter dürfen im Notfall umbrochen werden, statt aus dem
     Raster zu laufen. */
  overflow-wrap:break-word; hyphens:auto;
}
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; padding:44px 0; } }
@media (max-width:640px){ .stats{ padding:36px 0; gap:24px; } }

/* ---- Cards / grid ---- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:900px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:36px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
@media (max-width:640px){ .card{ padding:26px; } }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card .icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}
.card .icon.green{ background:rgba(var(--accent-2-rgb),.14); color:var(--accent-2); }
.card .icon svg{ width:26px; height:26px; }
.card h3{ font-size:1.25rem; line-height:1.25; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em; }
.status{
  display:inline-block; font-size:0.6875rem; font-weight:700;
  padding:3px 9px; border-radius:100px; background:var(--bg-soft); color:var(--ink-soft);
  letter-spacing:.03em; text-transform:uppercase; vertical-align:middle;
}
.card .status{ margin-top:16px; }

/* ---- Feature split (image/text alternating) ---- */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.feature.reverse .feature-visual{ order:2; }
.feature.reverse .feature-text{ order:1; }
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; gap:36px; }
  .feature.reverse .feature-visual, .feature.reverse .feature-text{ order:0; }
}
.feature-visual{
  aspect-ratio:1/1; border-radius:var(--radius-lg);
  background-color:var(--bg-soft);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.feature-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-text h3{ margin-bottom:18px; }
.feature-text ul{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.feature-text li{
  display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:1rem; line-height:1.5;
}
.feature-text li::before{
  content:""; width:6px; height:6px; margin-top:9px; border-radius:50%;
  background:var(--accent); flex:none;
}

/* ---- Timeline (Über uns) ---- */
.timeline{ position:relative; margin-top:40px; padding-left:32px; border-left:2px solid var(--line); }
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-38px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--bg);
}
.timeline-item .year{ font-weight:700; color:var(--accent); font-size:0.875rem; letter-spacing:.02em; }
/* Auf derselben Stufe wie .card h3, vorher 19 px gegen 20 px, ein
   Unterschied, der keine Hierarchie ausdrückt, sondern nur unruhig wirkt. */
.timeline-item h3, .timeline-item h2{ font-size:1.25rem; line-height:1.25;
  font-weight:600; margin:6px 0 8px; letter-spacing:-0.01em; }

/* ---- Section banner (wide photo above a grid section) ---- */
.section-banner{
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:40px;
  aspect-ratio:21/9; box-shadow:var(--shadow-sm); background:var(--bg-soft);
  position:relative;
}
.section-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .section-banner{ aspect-ratio:4/3; } }

/* ---- Machine list ---- */
.machine-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
.machine{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px;
  background:var(--bg-soft-2);
  box-shadow:var(--shadow-sm);
}
.machine .brand-tag{ font-size:0.75rem; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.machine .name{ font-weight:600; margin-top:4px; font-size:1.0625rem; line-height:1.3; }
/* Die Maschinenbeschreibungen sind längere Fließtexte, 14 px mit 1,5-fachem
   Zeilenabstand lesen sich darin zäh, 15 px mit 1,6 deutlich ruhiger. */
.machine .spec{ margin-top:8px; font-size:0.9375rem; line-height:1.6; color:var(--ink-soft); }
body.theme-green .machine .brand-tag{ color:var(--accent-2); }
@media (max-width:640px){ .machine-grid{ grid-template-columns:1fr; } }

/* ---- Kompakte Geräte-Tags (z. B. Kurzüberblick auf "Über uns") ---- */
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tag-list .tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:9px 16px; border-radius:100px; border:1px solid var(--line);
  background:var(--card); font-size:0.875rem; font-weight:500; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.tag-list .tag b{ color:var(--accent); font-weight:700; }
.tag-list.green .tag b{ color:var(--accent-2); }

/* ---- CTA band ---- */
/* Dieses Band ist in BEIDEN Modi dunkel. Die hellen Akzentfarben des
   Hellmodus (dunkles Teal #0b6d80, dunkles Grün #467000) sind für dunklen
   Grund zu dunkel. Die Zeile über der Überschrift kam dort nur auf 2,6:1
   und war damit schlechter lesbar als vom Standard gefordert (4,5:1).
   Innerhalb des Bandes gelten deshalb immer die helleren Varianten; da
   CSS-Variablen sich nach unten vererben, greift das auch für Elemente,
   die "var(--accent)" direkt im style-Attribut verwenden. */
.cta-band{
  --accent:#2dd4ee;
  --accent-rgb:45,212,238;
  --accent-2:#9bd94a;
  --accent-2-rgb:155,217,74;
  border-radius:var(--radius-lg);
  background:var(--cta-gradient);
  color:#fff; text-align:center; padding:80px 40px;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 80% at 50% 0%, rgba(var(--accent-rgb),.35), transparent 70%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band .lead{ color:rgba(255,255,255,.7); }
.cta-band .hero-actions{ margin-top:32px; }
/* Umriss-Button auf dem dunklen CTA-Band.
   Das Band ist in beiden Modi dunkel. Mit der normalen Gestaltung stünde
   dort dunkle Schrift auf einer halbdurchlässigen Glasfläche über dunklem
   Grund, und wie lesbar das ist, hängt davon ab, wie viel Grund
   durchscheint. Gemessen kam die Kombination nur auf 4,3:1 und lag damit
   unter den geforderten 4,5:1. Innerhalb des Bandes gilt deshalb weiße
   Schrift mit weißer Kante. */
.cta-band .btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.cta-band .btn-ghost:hover{
  background:rgba(255,255,255,.20);
  border-color:#fff;
  color:#fff;
}

/* 40 px Innenabstand links und rechts kosten auf einem 390-px-Telefon
   zusammen mit dem Seitenrand über ein Drittel der Textbreite. */
@media (max-width:640px){
  .cta-band{ padding:52px 22px; border-radius:var(--radius-md); }
  .cta-band .hero-actions{ margin-top:26px; }
}

/* ---- Contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.info-row .icon{
  width:40px; height:40px; border-radius:10px; flex:none;
  background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.info-row .icon svg{ width:20px; height:20px; }
.info-row h4, .info-row h3{ font-size:0.9375rem; font-weight:600; margin-bottom:2px; }
.info-row p, .info-row a{ font-size:0.9375rem; color:var(--ink-soft); }
.info-row a:hover{ color:var(--accent); }

.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:0.8125rem; font-weight:600; margin-bottom:8px; }
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-family:var(--font); font-size:1rem; background:var(--bg-soft-2); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-note{ margin-top:16px; }

/* ---- Legal pages ---- */
.legal{ padding:160px 0 100px; }
@media (max-width:640px){ .legal{ padding:124px 0 64px; } }
.legal .container{ max-width:820px; }
.legal h1{ font-size:2rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.01em; }
.legal h3{ font-size:1.25rem; font-weight:600; margin:36px 0 12px; }
.legal p, .legal li{ color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.legal ul{ padding-left:20px; list-style:disc; margin:12px 0; }
.legal .callout{
  margin:28px 0; padding:20px 22px; border-radius:var(--radius-sm);
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25);
}
.legal .callout p{ color:var(--ink); }
.legal-iframe-wrap{
  margin-top:24px; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
}
.legal-iframe{ display:block; width:100%; border:0; height:70vh; min-height:520px; max-height:1000px; }
.legal-iframe-tall{ height:80vh; max-height:1400px; }
.legal-fallback{ margin-top:14px; }
/* Die Rechtstexte kommen von einer fremden Domain (IT-Recht-Kanzlei) und
   behalten deshalb technisch bedingt immer ihren hellen Hintergrund, aus
   Sicherheitsgründen (Same-Origin-Policy) lässt sich der Inhalt eines
   fremden iFrames per CSS nicht umfärben. Ein Invertierungs-Filter würde
   zwar den Hintergrund abdunkeln, macht den Text in der Praxis aber
   streckenweise kaum noch lesbar, deshalb bewusst nicht eingesetzt.
   Stattdessen bekommt der Rahmen im Dunkelmodus einen dezenten, warmen
   Übergang, damit die helle Fläche wie ein bewusst gestaltetes
   "Dokumentenblatt" wirkt statt wie ein harter weißer Block. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .legal-iframe-wrap{
    background:#ececee; padding:2px; border-color:rgba(255,255,255,.14);
  }
}
:root[data-theme="dark"] .legal-iframe-wrap{
  background:#ececee; padding:2px; border-color:rgba(255,255,255,.14);
}

/* ---- Footer ---- */
/* Kein margin-top mehr: Der letzte Abschnitt bringt schon 120 px
   Innenabstand mit, zusammen mit den früheren 60 px Außenabstand ergab das
   180 px Leerraum vor der Fußzeile, deutlich mehr als zwischen allen
   anderen Abschnitten und dadurch als Bruch sichtbar. */
footer{
  background:var(--bg-soft); border-top:1px solid var(--line);
  /* Unten zusätzlich der Freiraum für die schwebende Schaltflächengruppe. */
  padding:64px 0 calc(32px + var(--fab-freiraum));
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:640px){ footer{ padding:48px 0 calc(28px + var(--fab-freiraum)); } }
.footer-col h4, .footer-col h2, .footer-col h3{ font-size:0.8125rem; font-weight:700; margin-bottom:16px; color:var(--ink); letter-spacing:.02em; }
.footer-logo{ height:72px; width:auto; margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; font-size:0.9375rem; line-height:1.5; color:var(--ink-soft); margin-bottom:10px; }
.footer-col a:hover{ color:var(--accent); }
/* Untere Fußzeile: links die Rechtszeilen, rechts die Schaltflächen.
   Auf allen Seiten gleich aufgebaut. Instagram und Cookie-Einstellungen
   stehen deshalb überall an derselben Stelle. */
.footer-bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:20px;
  padding-top:28px; border-top:1px solid var(--line);
}
.footer-legal{ flex:1 1 320px; min-width:0; }
.footer-legal .small{ margin:0; }
.footer-legal .small + .small{ margin-top:6px; }
.footer-aktionen{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  flex:0 1 auto;
}
/* Beide Schaltflächen sind bewusst identisch aufgebaut, damit sie als Paar
   gelesen werden und nicht als zwei verschiedene Dinge. */
.footer-aktion{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--line); color:var(--ink);
  font-family:var(--font); font-size:0.9375rem; font-weight:600;
  text-align:left; cursor:pointer;
  background:linear-gradient(160deg, rgba(var(--card-rgb),.72), rgba(var(--card-rgb),.42));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .25s, background .3s, border-color .3s, color .3s;
}
.footer-aktion:hover{ transform:translateY(-2px); border-color:var(--accent); }
.footer-aktion svg{ width:19px; height:19px; flex:none; }
/* Instagram bekommt beim Überfahren die Markenfarben des Dienstes. */
.footer-aktion-instagram:hover{
  background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);
  border-color:transparent; color:#fff;
}
@media (max-width:640px){
  .footer-bottom{ align-items:flex-start; }
  .footer-aktionen{ width:100%; }
  .footer-aktion{ flex:1 1 auto; justify-content:center; }
}

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *{ transition-delay:calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}
html.force-reduced-motion *{ animation:none !important; transition:none !important; }
html.force-reduced-motion .reveal{ opacity:1 !important; transform:none !important; }

/* ---- Accessibility: visible focus for keyboard users ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---- Fehlerseiten: hervorgehobene Scherz-Zeile ---- */
.funny-box{
  margin:32px auto 0; max-width:460px;
  padding:16px 22px; border:1px dashed rgba(var(--accent-rgb),.4);
  border-radius:var(--radius-sm); background:rgba(var(--accent-rgb),.06);
}
.funny-label{
  display:block; font-size:0.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent); margin-bottom:6px;
}
.funny-box p{ font-size:1rem; color:var(--ink); font-style:italic; font-weight:500; }

/* ---- Skip link (WCAG 2.4.1, keyboard users can jump past the nav) ---- */
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:2000;
  background:var(--ink); color:var(--bg);
  padding:12px 20px; border-radius:10px; font-weight:600; font-size:0.9375rem;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ---- High-contrast mode (toggled by the accessibility widget) ---- */
:root[data-contrast="high"]{
  --ink-soft:var(--ink);
  --line:currentColor;
}
:root[data-contrast="high"] .btn-ghost{ border-width:2px; }
:root[data-contrast="high"] a{ text-decoration:underline; }

/* ---- Accessibility widget ---- */
/* Solange der Cookie-Banner offen ist, verstecken wir den A11y-Button, damit
   sich beide auf schmalen (Handy-)Bildschirmen nicht überlappen. */

/* ---- "Nach oben"-Button ---- */
/* ==========================================================================
   Schwebende Schaltflächen: eine Gruppe, unten rechts
   --------------------------------------------------------------------------
   Vorher stand "nach oben" unten links und die Barrierefreiheit unten
   rechts. Beide lagen damit genau über den Inhalten der Fußzeile, links
   über der Instagram-Schaltfläche, rechts über den Cookie-Einstellungen.
   Auf Tablet und Telefon überschnitten sie sich sichtbar.

   Jetzt bilden sie eine gemeinsame Gruppe in der rechten unteren Ecke. Die
   Gruppe ist rechts verankert und wächst nach links: Die Schaltfläche für
   die Barrierefreiheit behält dadurch immer denselben Platz, und "nach
   oben" erscheint beim Scrollen links daneben, ohne etwas zu verschieben.
   Den nötigen Freiraum darunter reserviert die Fußzeile über ihren
   unteren Innenabstand (siehe --fab-freiraum).
   ========================================================================== */
:root{
  /* Höhe der Schaltflächengruppe plus Abstand. Die Fußzeile hält unten
     genau so viel Platz frei, damit sich nie etwas überlappt. */
  --fab-hoehe:52px;
  --fab-abstand:20px;
  --fab-freiraum:calc(var(--fab-hoehe) + var(--fab-abstand) * 2);
}
.fab-gruppe{
  position:fixed; right:var(--fab-abstand); bottom:var(--fab-abstand);
  z-index:1400;
  display:flex; align-items:center; gap:10px;
}
body.cookie-banner-open .fab-gruppe{ display:none; }

.back-to-top{
  z-index:1300;
  width:48px; height:48px; border-radius:50%;
  background:rgba(var(--card-rgb),.55); color:var(--ink); border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s, transform .25s, border-color .2s;
}
.back-to-top svg{ width:20px; height:20px; }
.back-to-top{ display:none; }
.back-to-top.visible{ display:flex; opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--accent); }
@media (max-width:480px){
  .back-to-top{ width:44px; height:44px; }
  .a11y-toggle{ width:48px; height:48px; }
  :root{ --fab-hoehe:48px; --fab-abstand:16px; }
}

.a11y-toggle{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; box-shadow:var(--shadow-md);
}
.a11y-toggle svg{ width:26px; height:26px; }
.a11y-panel{
  /* Sitzt fest am Fenster, direkt über der Schaltflächengruppe. Die
     Maße stammen aus denselben Variablen, damit beides zusammenbleibt,
     wenn sich die Größe der Schaltflächen ändert. */
  position:fixed;
  right:var(--fab-abstand);
  bottom:calc(var(--fab-abstand) + var(--fab-hoehe) + 10px);
  z-index:1450;
  width:min(300px, calc(100vw - var(--fab-abstand) * 2 - 8px));
  background:rgba(var(--card-rgb),.82); border:1px solid var(--line); border-radius:var(--radius-md);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-lg); padding:20px;
  display:none;
}
.a11y-panel.open{ display:block; }
body.cookie-banner-open .a11y-panel{ display:none; }
.a11y-panel h3{ font-size:1.0625rem; font-weight:700; margin-bottom:14px; }
.a11y-row{ margin-bottom:16px; }
.a11y-row > span{ display:block; font-size:0.8125rem; font-weight:600; margin-bottom:8px; color:var(--ink-soft); }
.a11y-btn-group{ display:flex; gap:8px; }
.a11y-btn-group button{
  flex:1; padding:8px 0; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink); cursor:pointer; font-weight:600; font-size:0.9375rem;
}
.a11y-btn-group button[aria-pressed="true"]{ background:var(--accent-solid); color:#fff; border-color:transparent; }
.a11y-switch-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.a11y-switch-row span{ font-size:0.9375rem; }
.a11y-switch{
  position:relative; width:42px; height:24px; border-radius:100px; border:none;
  background:var(--line); cursor:pointer; flex:none;
}
.a11y-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .2s;
}
.a11y-switch[aria-pressed="true"]{ background:var(--accent-solid); }
.a11y-switch[aria-pressed="true"]::after{ transform:translateX(18px); }
.a11y-reset{
  width:100%; padding:10px 0; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--ink-soft); cursor:pointer; font-size:0.875rem; margin-top:4px;
}

/* ---- Cookie consent banner ---- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1500;
  max-width:640px; margin:0 auto;
  background:rgba(var(--card-rgb),.85); color:var(--ink); border:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:24px;
}
.cookie-banner p{ font-size:0.9375rem; line-height:1.55; color:var(--ink-soft); margin-bottom:16px; }
.cookie-banner p a{ color:var(--accent); font-weight:600; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:10px 18px; font-size:0.9375rem; }
.cookie-settings-panel{ display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.cookie-settings-panel.open{ display:block; }
.cookie-cat{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.cookie-cat div{ font-size:0.8125rem; color:var(--ink-soft); margin-top:4px; }
.cookie-cat strong{ font-size:0.9375rem; color:var(--ink); }
@media (max-width:480px){ .cookie-banner{ padding:18px; } }

/* ---- Scroll progress bar ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index:1100; transition:width .1s linear;
}

/* ---- Bento grid (Leistungen) ---- */
.bento{
  display:grid; gap:20px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(220px,auto);
}
.bento-item{
  grid-column:span 2;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--card), var(--bg-soft-2));
  padding:32px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  transform-style:preserve-3d;
  will-change:transform;
}
.bento-item.large{ grid-column:span 4; grid-row:span 1; min-height:260px; }
.bento-item:hover{ box-shadow:var(--shadow-md); border-color:rgba(var(--accent-rgb),.35); }
.bento-item.green:hover{ border-color:rgba(var(--accent-2-rgb),.35); }
.bento-item::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),.14), transparent 70%);
}
.bento-item.green::before{
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%), rgba(var(--accent-2-rgb),.16), transparent 70%);
}
.bento-item:hover::before{ opacity:1; }
.bento-item > *{ position:relative; z-index:1; }
.bento-item .icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}
.bento-item .icon.green{ background:rgba(var(--accent-2-rgb),.14); color:var(--accent-2); }
.bento-item .icon svg{ width:26px; height:26px; }
.bento-item h3{ font-size:1.375rem; line-height:1.22; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em; }
/* Gleiche Größe wie .body (17 px): Der Fließtext in den beiden großen
   Leistungsfeldern hatte vorher 16 px und damit eine andere Textgröße als
   der inhaltlich gleichrangige Text in den Karten darunter. */
.bento-item p{ color:var(--ink-soft); font-size:1.0625rem; line-height:1.6; max-width:480px; }
@media (max-width:900px){
  .bento{ grid-template-columns:1fr; }
  .bento-item, .bento-item.large{ grid-column:1; }
}
@media (max-width:640px){ .bento-item{ padding:24px; } }

/* ---- Marquee (brand/machine ticker) ---- */
.marquee{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 0;
}
.marquee-track{
  display:flex; gap:56px; width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
  font-size:0.9375rem; color:var(--ink-soft); font-weight:600;
}
.marquee-item b{ color:var(--ink); font-weight:700; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; }
}
html.force-reduced-motion .marquee-track{ animation:none; flex-wrap:wrap; }

/* ---- Contact form: honeypot + captcha ---- */
.hp-field{
  position:absolute !important; left:-9999px !important; top:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
.captcha-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 14px; margin-bottom:20px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.captcha-row .captcha-question{ font-weight:700; font-size:0.9375rem; }
/* Das Feld lag außerhalb von .form-field und war deshalb ungestylt
   (im Dunkelmodus weiß). Es bekommt jetzt dieselbe Optik wie alle
   anderen Eingabefelder. */
.captcha-row input{
  max-width:120px; margin:0;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:var(--font); font-size:1rem;
  background:rgba(var(--card-rgb),.55); color:var(--ink);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:border-color .2s, box-shadow .2s;
}
.captcha-row input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);
}
@media (max-width:420px){
  .captcha-row input{ max-width:none; width:100%; }
}
.form-alert{
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  margin-bottom:20px; padding:14px 16px; border-radius:12px; font-size:0.875rem;
}
.form-alert.error{ background:rgba(200,40,40,.1); border:1px solid rgba(200,40,40,.3); color:#b91c1c; }
.form-alert.success{ background:rgba(var(--accent-2-rgb),.12); border:1px solid rgba(var(--accent-2-rgb),.35); color:var(--accent-2); }

/* ---- Grün-Thema für die Lasergravur-Seite (LaserArtWorld) -----------------
   Klare Farbtrennung wie im Original: Teal/Blau = 3D-Printworld (Standard),
   Grün = ausschließlich Lasergravur/LaserArtWorld. Statt eines Verlaufs wird
   hier bewusst konsequent auf Grün als Volltonfarbe umgeschaltet. */
body.theme-green .eyebrow{ color:var(--accent-2); }
body.theme-green .btn-link{ color:var(--accent-2); }
body.theme-green .nav-links a.active{ color:var(--accent-2); }
body.theme-green .feature-text li::before{ background:var(--accent-2); }
body.theme-green .hero-glow{
  background:
    radial-gradient(40% 50% at 28% 20%, rgba(var(--accent-2-rgb),.18), transparent 70%),
    radial-gradient(35% 45% at 78% 30%, rgba(var(--accent-2-rgb),.1), transparent 70%);
}
body.theme-green .cta-band::before{
  background:radial-gradient(50% 80% at 50% 0%, rgba(var(--accent-2-rgb),.35), transparent 70%);
}

/* ==========================================================================
   Glas-Optik & moderne Flächen (Glasmorphismus)
   --------------------------------------------------------------------------
   Grundidee: halbtransparente Flächen + Weichzeichner (backdrop-filter) +
   eine feine Lichtkante an der Oberkante, wie bei echtem Glas. Damit das
   sichtbar wird, braucht es hinter dem Glas etwas Farbiges, dafür sorgen
   die dezenten "Aurora"-Flächen weiter unten.
   ========================================================================== */

/* Wiederverwendbare Glasfläche */
.glass-card{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.78), rgba(var(--card-rgb),.45));
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(var(--ink-rgb),.12);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.30);
}
:root[data-theme="dark"] .glass-card,
:root:not([data-theme="light"]) .glass-card{
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Bento-Felder und Karten bekommen echte Glasflächen statt Volltonfarbe */
.bento-item{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.82), rgba(var(--card-rgb),.50));
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.28);
}
.card{
  background:linear-gradient(170deg, rgba(var(--card-rgb),.86), rgba(var(--card-rgb),.58));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.24);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bento-item,
  :root:not([data-theme="light"]) .card{
    box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"] .bento-item,
:root[data-theme="dark"] .card{
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Leuchtende Rahmenkante beim Überfahren, ersetzt den harten Rahmenwechsel */
.bento-item::after,
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
  background:linear-gradient(140deg, rgba(var(--accent-rgb),.55), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.card{ position:relative; }
.bento-item.green::after{
  background:linear-gradient(140deg, rgba(var(--accent-2-rgb),.55), transparent 55%);
}
.bento-item:hover::after,
.card:hover::after{ opacity:1; }

/* Dezente Aurora hinter Abschnitten: gibt dem Glas etwas zum Verschwimmen */
.section-aurora{ position:relative; overflow:hidden; }
.section-aurora::before{
  content:""; position:absolute; inset:-10% -5% auto -5%; height:130%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 45% at 15% 25%, rgba(var(--accent-rgb),.16), transparent 70%),
    radial-gradient(32% 40% at 85% 20%, rgba(var(--accent-2-rgb),.13), transparent 70%),
    radial-gradient(45% 50% at 50% 95%, rgba(var(--accent-rgb),.10), transparent 70%);
  filter:blur(52px);
}
.section-aurora > *{ position:relative; z-index:1; }

/* Feine Körnung, nur im Dunkelmodus, dort wirkt sie wie mattes Glas.
   Im Hellmodus bewusst weggelassen, damit die Flächen klar bleiben. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
    opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glasflächen bei "Bewegung reduzieren" bzw. hohem Kontrast vereinfachen:
   Dort zählt Lesbarkeit mehr als Optik. */
:root[data-contrast="high"] .glass-card,
:root[data-contrast="high"] .bento-item,
:root[data-contrast="high"] .card{
  background:var(--card);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root[data-contrast="high"] .section-aurora::before{ display:none; }
html.force-reduced-motion .section-aurora::before{ filter:blur(52px); animation:none; }

/* ---- Formular: automatischer Spam-Schutz-Hinweis (statt Rechenaufgabe) ---- */
.captcha-auto{
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px; padding:12px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(var(--card-rgb),.55);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  font-size:0.875rem; color:var(--ink-soft);
}
.captcha-auto-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.72); opacity:.55; }
}
html.force-reduced-motion .captcha-auto-dot{ animation:none; }

/* ==========================================================================
   Glas-Optik, Ausbaustufe 2, deutlich mehr Flächen aus Glas
   --------------------------------------------------------------------------
   Alle Flächen hier sind halbtransparent und weichzeichnen den Hintergrund.
   Damit das wirkt, sind die Aurora-Flächen etwas kräftiger und liegen jetzt
   hinter mehr Abschnitten.
   ========================================================================== */

/* ---- Eingabefelder als Glasflächen ---- */
.form-field input, .form-field textarea{
  background:rgba(var(--card-rgb),.50);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
:root[data-theme="dark"] .form-field input,
:root[data-theme="dark"] .form-field textarea{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .form-field input,
  :root:not([data-theme="light"]) .form-field textarea{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
}

/* ---- Statistik-Kacheln: eigene Glaskarten statt nackter Zahlen ---- */
.stats{ gap:20px; }
.stat{
  padding:28px 20px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(var(--card-rgb),.70), rgba(var(--card-rgb),.38));
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.26); }
:root[data-theme="dark"] .stat{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---- Maschinen-Karten aus Glas ---- */
.machine{
  background:linear-gradient(165deg, rgba(var(--card-rgb),.68), rgba(var(--card-rgb),.40));
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.machine:hover{ transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.35); }
body.theme-green .machine:hover{ border-color:rgba(var(--accent-2-rgb),.35); }
:root[data-theme="dark"] .machine{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05); }

/* ---- Icon-Flächen als Glas-Plättchen ---- */
.card .icon, .bento-item .icon, .info-row .icon{
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.info-row .icon{
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.08));
  border:1px solid rgba(var(--accent-rgb),.22);
}

/* ---- Kompakte Geräte-Tags aus Glas ---- */
.tag-list .tag{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.66), rgba(var(--card-rgb),.38));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.24);
}
:root[data-theme="dark"] .tag-list .tag{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05); }

/* ---- Marken-Laufband als Glasstreifen ---- */
.marquee{
  background:linear-gradient(180deg, rgba(var(--card-rgb),.55), rgba(var(--card-rgb),.28));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---- Footer-Schaltflächen & Footer-Fläche ---- */
.footer-aktion{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.72), rgba(var(--card-rgb),.42));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.26);
}
footer{
  background:linear-gradient(180deg, rgba(var(--bg-soft-rgb,226,229,233),.55), rgba(var(--card-rgb),.30));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

/* ---- Rechtstext-Rahmen ebenfalls als Glaskarte ---- */
.legal-iframe-wrap{
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.30);
}

/* ---- Aurora: etwas kräftiger und hinter mehr Abschnitten ---- */
.section-aurora::before{
  background:
    radial-gradient(38% 46% at 12% 22%, rgba(var(--accent-rgb),.22), transparent 70%),
    radial-gradient(34% 42% at 88% 18%, rgba(var(--accent-2-rgb),.18), transparent 70%),
    radial-gradient(46% 52% at 50% 96%, rgba(var(--accent-rgb),.14), transparent 70%);
}

/* Bei hohem Kontrast bleiben alle diese Flächen deckend und ruhig. */
:root[data-contrast="high"] .stat,
:root[data-contrast="high"] .machine,
:root[data-contrast="high"] .tag-list .tag,
:root[data-contrast="high"] .footer-aktion,
:root[data-contrast="high"] .marquee,
:root[data-contrast="high"] footer,
:root[data-contrast="high"] .form-field input,
:root[data-contrast="high"] .form-field textarea,
:root[data-contrast="high"] .captcha-row input{
  background:var(--card);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}

/* ==========================================================================
   Glas-Optik, Ausbaustufe 3: Buttons und deutlich sichtbarere Wirkung
   --------------------------------------------------------------------------
   Warum die Effekte vorher kaum auffielen: backdrop-filter zeichnet nur das
   weich, was dahinter liegt. Auf einer fast schwarzen Fläche mit sehr
   dezenter Aurora gibt es dafür schlicht zu wenig Struktur. Deshalb hier:
   kräftigere Aurora, hellere Lichtkanten und Glas auf den Buttons.
   ========================================================================== */

/* ---- Aurora deutlich kräftiger, damit Glas überhaupt "arbeiten" kann ---- */
.section-aurora::before{
  background:
    radial-gradient(40% 48% at 10% 18%, rgba(var(--accent-rgb),.42), transparent 68%),
    radial-gradient(36% 44% at 90% 14%, rgba(var(--accent-2-rgb),.34), transparent 68%),
    radial-gradient(50% 55% at 46% 98%, rgba(var(--accent-rgb),.28), transparent 70%);
  filter:blur(46px);
}
/* Auch im Hero mehr Farbe hinter dem Glas */
.hero-glow{
  background:
    radial-gradient(42% 52% at 26% 18%, rgba(var(--accent-rgb),.34), transparent 68%),
    radial-gradient(38% 46% at 76% 28%, rgba(var(--accent-2-rgb),.22), transparent 68%);
}

/* ---- Umriss-Button: echtes Glas (Text wird dadurch sogar lesbarer) ---- */
.btn-ghost{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.55), rgba(var(--card-rgb),.22));
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-color:rgba(var(--ink-rgb),.22);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost:hover{
  background:linear-gradient(160deg, rgba(var(--card-rgb),.78), rgba(var(--card-rgb),.42));
  border-color:var(--ink);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.42);
}
:root[data-theme="dark"] .btn-ghost{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.14); }

/* ---- Farbige Buttons: Glanzkante statt Volltonfläche ----
   Bewusst NICHT transparent, weiße Schrift braucht die volle Deckkraft
   für den Kontrast. Der Glas-Eindruck entsteht über Verlauf + Lichtkante. */
.btn-accent{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--accent-solid) 88%, white),
    var(--accent-solid));
  box-shadow:0 6px 18px rgba(var(--accent-solid-rgb),.28),
             inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(0,0,0,.12);
}
.btn-accent:hover{
  box-shadow:0 12px 32px rgba(var(--accent-solid-rgb),.42),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(0,0,0,.12);
}
.btn-accent-green{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--accent-2-solid) 88%, white),
    var(--accent-2-solid));
  box-shadow:0 6px 18px rgba(var(--accent-2-solid-rgb),.28),
             inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(0,0,0,.12);
}
.btn-accent-green:hover{
  box-shadow:0 12px 32px rgba(var(--accent-2-solid-rgb),.42),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(0,0,0,.12);
}
/* Ältere Browser ohne color-mix() bekommen die bisherige Volltonfarbe. */
@supports not (background: color-mix(in srgb, red 50%, white)){
  .btn-accent{ background:var(--accent-solid); }
  .btn-accent-green{ background:var(--accent-2-solid); }
}

/* ---- Dunkler Button & Shop-Knopf mit Glanzkante ---- */
.btn-primary, .nav-cta{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--ink) 86%, var(--bg)),
    var(--ink));
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.20);
}
.nav-cta:hover{ box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.28); }
@supports not (background: color-mix(in srgb, red 50%, white)){
  .btn-primary, .nav-cta{ background:var(--ink); }
}

/* ---- Wischglanz: fährt beim Überfahren einmal über die Buttons ---- */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg);
  transition:opacity .2s;
}
.btn:hover::after{ opacity:1; animation:btnSheen .75s ease-out; }
@keyframes btnSheen{
  from{ left:-60%; }
  to{ left:120%; }
}
html.force-reduced-motion .btn::after{ display:none; }

/* ---- Bei hohem Kontrast: alles ruhig und deckend ---- */
:root[data-contrast="high"] .btn-ghost,
:root[data-contrast="high"] .btn-accent,
:root[data-contrast="high"] .btn-accent-green,
:root[data-contrast="high"] .btn-primary,
:root[data-contrast="high"] .nav-cta{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root[data-contrast="high"] .btn-ghost{ background:var(--card); }
:root[data-contrast="high"] .btn-accent{ background:var(--accent-solid); }
:root[data-contrast="high"] .btn-accent-green{ background:var(--accent-2-solid); }
:root[data-contrast="high"] .btn-primary,
:root[data-contrast="high"] .nav-cta{ background:var(--ink); }
:root[data-contrast="high"] .btn::after{ display:none; }

/* ---- Seitentitel in der Markenfarbe (statt einer zusätzlichen
        Kleintext-Zeile darüber, die nur den Titel wiederholt hat) ---- */
.brand-heading{ color:var(--accent); }
body.theme-green .brand-heading{ color:var(--accent-2); }

/* ==========================================================================
   Navigationsleiste: Glas-Segment mit gleitendem Marker
   --------------------------------------------------------------------------
   Vorher waren es nackte Textlinks. Jetzt liegen sie in einer eigenen
   Glasfläche ("Segmented Control", wie bei iOS/macOS), die aktive Seite
   bekommt eine gefüllte Pille, und beim Überfahren gleitet ein weicher
   Marker mit, umgesetzt über ein Pseudo-Element, das per CSS-Variablen
   von JavaScript positioniert wird.
   ========================================================================== */
.nav-links{
  position:relative;
  gap:4px;
  padding:6px;
  border-radius:100px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(var(--card-rgb),.58), rgba(var(--card-rgb),.26));
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.30);
}
:root[data-theme="dark"] .nav-links{
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Der gleitende Marker hinter dem gerade überfahrenen Eintrag */
.nav-links::before{
  content:"";
  position:absolute; top:6px; bottom:6px;
  left:var(--marker-x, 0px); width:var(--marker-w, 0px);
  border-radius:100px;
  background:rgba(var(--ink-rgb),.10);
  opacity:0;
  transition:left .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), opacity .2s;
  pointer-events:none;
}
.nav-links.marker-sichtbar::before{ opacity:1; }
html.force-reduced-motion .nav-links::before{ transition:opacity .2s; }

.nav-links a{
  position:relative; z-index:1;
  padding:8px 15px;
  border-radius:100px;
  opacity:1;
  color:var(--ink-soft);
  transition:color .22s;
}
.nav-links a:hover{ color:var(--ink); }

/* Aktive Seite: gefüllte Pille in der Markenfarbe */
.nav-links a.active{
  color:#fff;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--accent-solid) 86%, white),
    var(--accent-solid));
  box-shadow:0 3px 10px rgba(var(--accent-solid-rgb),.32),
             inset 0 1px 0 rgba(255,255,255,.40);
}
body.theme-green .nav-links a.active{
  /* color muss hier ausdrücklich stehen: Eine ältere, spezifischere Regel
     weiter oben färbt aktive Menüpunkte grün, auf der grünen Pille wäre
     die Schrift dann unsichtbar. */
  color:#fff;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--accent-2-solid) 86%, white),
    var(--accent-2-solid));
  box-shadow:0 3px 10px rgba(var(--accent-2-solid-rgb),.32),
             inset 0 1px 0 rgba(255,255,255,.40);
}
@supports not (background: color-mix(in srgb, red 50%, white)){
  .nav-links a.active{ background:var(--accent-solid); }
  body.theme-green .nav-links a.active{ background:var(--accent-2-solid); }
}

/* Bei hohem Kontrast: klare Flächen, kein Glas, deutlicher Rahmen */
:root[data-contrast="high"] .nav-links{
  background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root[data-contrast="high"] .nav-links::before{ display:none; }
:root[data-contrast="high"] .nav-links a.active{ background:var(--accent-solid); box-shadow:none; }

/* Auf kleineren Bildschirmen ist die Linkliste ausgeblendet (Hamburger),
   daher hier keine Sonderbehandlung nötig. */
@media (max-width:1000px){
  .nav-links{ padding:4px; }
  .nav-links a{ padding:7px 11px; }
}

/* ---- Navigationsleiste: sichtbare Lichtbrechung ----
   Auf fast schwarzem Grund kann ein Weichzeichner allein nichts zeigen.
   Es fehlt der Kontrast dahinter. Deshalb bekommt die Leiste eine eigene,
   sehr dezente Lichtbrechung in den Markenfarben. Das lässt sie als
   Glasfläche erkennbar werden, ohne die Lesbarkeit der Links zu
   beeinträchtigen (Deckkraft bewusst sehr niedrig). */
.nav::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(var(--accent-rgb),.10) 0%,
      transparent 38%,
      transparent 62%,
      rgba(var(--accent-2-rgb),.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%);
}
.nav-inner{ position:relative; z-index:1; }

/* Im Hellmodus etwas zurückhaltender, dort trägt schon der weiße
   Glasgrund die Wirkung. */
:root[data-theme="light"] .nav::before{ opacity:.6; }

/* Bei hohem Kontrast: klare, ruhige Fläche ohne Spielereien. */
:root[data-contrast="high"] .nav{
  background:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
  border-bottom:2px solid var(--ink);
}
:root[data-contrast="high"] .nav::before{ display:none; }


/* ==========================================================================
   Navigationsleiste: klassische Leiste über die volle Breite, mit
   verstärktem Glaseffekt
   --------------------------------------------------------------------------
   Bewusst KEINE freistehende "Glasplatte" mehr: Die brauchte
   overflow:hidden, wodurch das Auswahlmenü des Hell-/Dunkel-Umschalters
   abgeschnitten wurde (auf dem Handy schob es "Automatisch" sogar aus dem
   Bildschirm). Eine Leiste über die volle Breite hat dieses Problem nicht.
   Der Glaseindruck entsteht hier über drei Mittel: kräftigere
   Weichzeichnung, eine hellere Lichtkante und eine dezente Lichtbrechung
   in den Markenfarben.
   ========================================================================== */
.nav{
  padding:0;
  background:var(--nav-bg);
  backdrop-filter:blur(30px) saturate(220%);
  -webkit-backdrop-filter:blur(30px) saturate(220%);
  border-bottom:1px solid rgba(var(--ink-rgb),.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 22px rgba(0,0,0,.07);
}
:root[data-theme="dark"] .nav{
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 26px rgba(0,0,0,.42);
}


/* Lichtbrechung: liegt hinter dem Inhalt und schneidet nichts ab. */
.nav::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(102deg,
    rgba(255,255,255,.10) 0%,
    rgba(var(--accent-rgb),.10) 18%,
    transparent 44%,
    transparent 58%,
    rgba(var(--accent-2-rgb),.10) 86%,
    rgba(255,255,255,.06) 100%);
}
/* Wichtig: nur erhöhen, NICHT abschneiden, damit Aufklappmenüs frei
   über die Leiste hinausragen dürfen. */
.nav-inner{
  position:relative;
  z-index:1;
  height:100px;
  overflow:visible;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--nav-bg) 82%, var(--bg));
}
@supports not (background: color-mix(in srgb, red 50%, white)){
  .nav.scrolled{ background:var(--nav-bg); }
}

.mobile-menu{ inset:100px 0 0 0; }
@media (max-width:640px){
  .nav-inner{ height:88px; }
  .brand-logo{ height:72px; }
  .mobile-menu{ inset:88px 0 0 0; }
}

/* Bei hohem Kontrast: ruhige, deckende Leiste mit klarer Kante */
:root[data-contrast="high"] .nav{
  background:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:2px solid var(--ink);
  box-shadow:none;
}
:root[data-contrast="high"] .nav::before{ display:none; }

/* ==========================================================================
   Auswahlmenü für Hell/Dunkel: darf nie abgeschnitten werden
   --------------------------------------------------------------------------
   Vorher war es am Umschalt-Knopf ausgerichtet. Weil dieser ganz rechts
   sitzt, ragte das Menü auf schmalen Bildschirmen über den rechten Rand
   hinaus, "Automatisch" war dort nicht mehr erreichbar. Jetzt wird es am
   Bildschirm selbst ausgerichtet (position:fixed) und ist zusätzlich in der
   Breite begrenzt, sodass es immer vollständig sichtbar bleibt.
   ========================================================================== */
.theme-popover{
  position:fixed;
  top:auto;
  right:16px;
  left:auto;
  transform:none;
  max-width:calc(100vw - 32px);
  flex-wrap:wrap;
  justify-content:flex-end;
  z-index:1600;
}
/* Senkrechte Lage: direkt unter der Navigationsleiste. */
.theme-popover.open{
  display:flex;
  top:calc(100px + 8px);
}
@media (max-width:640px){
  .theme-popover.open{ top:calc(88px + 8px); }
  .theme-popover{ right:12px; max-width:calc(100vw - 24px); }
  /* Auf sehr schmalen Geräten dürfen die drei Schaltflächen umbrechen,
     statt aus dem Bild zu laufen. */
  .theme-popover button{ flex:1 1 auto; min-width:96px; }
}

/* ==========================================================================
   Häufige Fragen (FAQ)
   --------------------------------------------------------------------------
   Absichtlich mit dem HTML-Element <details> gebaut statt mit JavaScript:
   Das Auf- und Zuklappen übernimmt der Browser, es funktioniert mit
   Tastatur und Screenreader von Haus aus, und der Antworttext steht auch
   im zugeklappten Zustand im Quelltext. Suchmaschinen lesen ihn also
   mit, was für die FAQ-Auszeichnung (schema.org/FAQPage) Voraussetzung ist.
   ========================================================================== */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:rgba(var(--card-rgb),.6);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
:root[data-theme="dark"] .faq-item,
:root:not([data-theme="light"]) .faq-item{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .faq-item{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.35); }
}
.faq-item[open]{ border-color:rgba(var(--accent-rgb),.45); }
body.theme-green .faq-item[open]{ border-color:rgba(var(--accent-2-rgb),.45); }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:20px 22px;
  font-size:1.0625rem; font-weight:600; line-height:1.4; color:var(--ink);
  display:flex; align-items:flex-start; gap:14px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
/* Das Plus-/Minus-Zeichen rechts wird aus reinem CSS gezeichnet, damit kein
   zusätzliches Bild geladen werden muss. */
.faq-item summary::after{
  content:""; flex:none; margin-left:auto; margin-top:6px;
  width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
body.theme-green .faq-item summary::after{ border-color:var(--accent-2); }
.faq-item[open] summary::after{ transform:rotate(225deg); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.faq-answer{ padding:0 22px 20px; }
.faq-answer p{ color:var(--ink-soft); font-size:1rem; line-height:1.65; margin:0; }
.faq-answer p + p{ margin-top:12px; }
.faq-answer a{ color:var(--accent); font-weight:600; }
body.theme-green .faq-answer a{ color:var(--accent-2); }
@media (max-width:640px){
  .faq-item summary{ padding:17px 18px; font-size:1rem; }
  .faq-answer{ padding:0 18px 17px; }
}

/* ==========================================================================
   Produktkarten für den Shop-Überblick
   ========================================================================== */
.shop-card{ display:flex; flex-direction:column; }
.shop-card .body{ flex:1 1 auto; }
/* Der Verweis in den Shop sitzt immer unten an der Karte, unabhängig davon,
   wie lang der Text darüber ist, dafür sorgt das flex:1 auf .body. */
.shop-card .btn-link{ margin-top:18px; }
/* Hinweiszeile mit den Verkaufszahlen, ruhig gehalten, damit sie als
   Zusatzinformation und nicht als Werbebanner gelesen wird. */
.shop-proof{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:26px; padding:12px 20px; border-radius:100px;
  border:1px solid var(--line); background:rgba(var(--card-rgb),.6);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-sm);
  font-size:0.9375rem; color:var(--ink-soft);
}
.shop-proof b{ color:var(--ink); font-weight:700; }
/* Die Sterne tragen die Markenfarbe der jeweiligen Seite: Teal auf der
   3D-Druck-Seite, Grün auf der Lasergravur-Seite. */
.shop-proof .stars{ color:var(--accent); letter-spacing:.08em; }
body.theme-green .shop-proof .stars{ color:var(--accent-2); }

/* ==========================================================================
   Datenschutz-Zustimmung im Kontaktformular
   --------------------------------------------------------------------------
   Es ist ein echtes <input type="checkbox">, nur optisch ersetzt: Damit
   funktionieren Tastaturbedienung, Screenreader und das Anklicken der
   Beschriftung von Haus aus. Das Kästchen ist bewusst nie vorausgewählt.
   Eine Einwilligung muss aktiv erteilt werden, sonst ist sie unwirksam.
   ========================================================================== */
.consent-row{
  display:flex; align-items:flex-start; gap:12px;
  margin:22px 0 20px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:rgba(var(--card-rgb),.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:border-color .25s, background .25s;
}
.consent-row:has(input:checked){ border-color:rgba(var(--accent-rgb),.5); }
.consent-row:has(input:focus-visible){ border-color:var(--accent); }
/* Das echte Kästchen bleibt bedienbar, wird aber selbst nicht gezeichnet.
   Kein display:none und kein visibility:hidden. Beides nimmt es aus der
   Tastatur-Reihenfolge. */
.consent-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  flex:none; margin:1px 0 0; padding:0;
  width:24px; height:24px; border-radius:7px;
  border:2px solid rgba(var(--ink-rgb),.35);
  background:var(--card);
  cursor:pointer;
  display:grid; place-content:center;
  transition:background .2s, border-color .2s;
}
.consent-row input[type="checkbox"]::before{
  content:"";
  width:13px; height:8px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translateY(-2px) scale(0);
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.consent-row input[type="checkbox"]:checked{
  background:var(--accent-solid); border-color:var(--accent-solid);
}
.consent-row input[type="checkbox"]:checked::before{
  transform:rotate(-45deg) translateY(-2px) scale(1);
}
.consent-row input[type="checkbox"]:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
.consent-row label{
  font-size:0.9375rem; line-height:1.55; color:var(--ink-soft);
  cursor:pointer; margin:0;
}
.consent-row label a{ color:var(--accent); font-weight:600; text-decoration:underline; }
.consent-row .pflicht{ color:var(--accent); font-weight:700; }
/* Nach einem fehlgeschlagenen Absenden wird die Zeile hervorgehoben. */
.consent-row.fehlt{
  border-color:#c0392b;
  background:rgba(192,57,43,.08);
}
:root[data-theme="dark"] .consent-row.fehlt,
:root:not([data-theme="light"]) .consent-row.fehlt{ background:rgba(255,107,90,.12); }
.consent-row.fehlt input[type="checkbox"]{ border-color:#c0392b; }

/* Hinweiszeile unter einem Feld, das noch nicht stimmt. */
.feld-hinweis{
  margin:8px 0 0; font-size:0.875rem; line-height:1.45; color:#c0392b;
}
:root[data-theme="dark"] .feld-hinweis,
:root:not([data-theme="light"]) .feld-hinweis{ color:#ff8b7a; }
:root[data-contrast="high"] .consent-row{
  background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none;
}