/* ==========================================================================
   Fichtelvaria - zentrales Stylesheet
   --------------------------------------------------------------------------
   Gestaltungsidee: erdig statt technisch-kalt, editorial statt Baukasten.
   Warmes Papier als Grund, tiefes Waldgruen als Ton, ein sparsamer
   Bernstein-Akzent fuer Waerme, dazu die Hoehenlinien des Fichtelgebirges
   als eigene Bildsprache. Display-Schrift ist die selbst gehostete Serife
   "Fraunces" (nichts von fremden Servern -> DSGVO). Voller Dark Mode ueber
   prefers-color-scheme, ohne JavaScript.

   Aufbau:
     0. Schrift (@font-face, selbst gehostet)
     1. Design-Tokens  (Palette -> semantische Rollen; Light + Dark)
     2. Basis / Reset
     3. Layout          (Container, Sections, Grids, Bento)
     4. Typografie-Bausteine
     5. Komponenten     (Buttons, Karten, FAQ, Formular, Grafiken ...)
     6. Header & Navigation
     7. Footer
     8. Bewegung        (Scroll-Reveal, respektiert reduzierte Bewegung)
     9. Hilfsklassen & Sonderfaelle

   Regel: Farben, Abstaende und Schriftgroessen ausschliesslich ueber die
   Custom Properties aus Abschnitt 1 verwenden - nie hart kodieren.
   ========================================================================== */


/* ==========================================================================
   0. Schrift - selbst gehostet, kein externer Server (DSGVO)
   ==========================================================================
   "Space Grotesk" (SIL Open Font License) als variable Grotesk fuer Display
   und Ueberschriften: technisch, praezise, digital, aber nicht kalt. Das
   Latin-Subset deckt Deutsch inkl. Umlauten und Eszett ab. Bis die Datei
   geladen ist, greift der System-Sans-Fallback.                            */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* "Inter" (SIL Open Font License) als variable Humanist-Grotesk fuer den
   Fliesstext: hohe x-Hoehe, offene Punzen, fuer laengeres Lesen am Bildschirm
   gebaut. Ersetzt die geraeteabhaengige Systemschrift und gibt dem Body die
   gleiche selbst gehostete Qualitaet wie den Ueberschriften. Ein variabler
   Schnitt (400-700) deckt Regular, Medium, Semibold und Bold aus einer Datei. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
  /* --- Palette: Grund (kuehle, digitale Neutraltoene) ------------------- */
  --paper:        #F3F5F6;  /* Seitengrund, kuehles Weiss mit leichtem Grau */
  --paper-2:      #E8ECED;  /* zweite Stufe (alt-Baender)                   */
  --card:         #FFFFFF;  /* erhabene Flaechen: Karten, Formularfelder    */
  --tint-green:   #E3F0E9;  /* zarte gruene Toenung (Badges, Icon-Kacheln)  */

  /* --- Palette: Gruen (Marke + Signal) ---------------------------------- */
  --forest:       #123A2B;  /* tiefes Marken-Gruen: Footer, dunkle Baender  */
  --forest-deep:  #0C2B20;  /* gedrueckt / Hover                            */
  --forest-2:     #1E5A42;
  --moss:         #12A06A;  /* Signalgruen: Akzentflaechen, Grafik          */
  --moss-ink:     #0E7A50;  /* Signalgruen als Text auf Weiss (>=4,5:1)     */
  --moss-light:   #5FD6A0;  /* Signalgruen als Text/Grafik auf Dunkel       */

  /* --- Palette: Signalgruen als Akzent (ersetzt den warmen Bernstein) --- */
  --amber:        #12A06A;  /* Akzentwort, Marken-Funken                    */
  --amber-ink:    #0E7A50;  /* Akzent als Kleintext auf Weiss (>=4,5:1)     */

  /* --- Palette: Tinte & Linien (kuehler Graphit) ------------------------ */
  --ink:          #0F1A16;  /* Fliesstext                                   */
  --ink-heading:  #0B1712;  /* Ueberschriften                               */
  --ink-muted:    #55635C;  /* Sekundaertext (>=6:1 auf Weiss)              */
  --hair:         #E2E7E6;  /* feine Rahmen                                 */
  --hair-strong:  #C9D1CE;  /* deutlichere Rahmen                          */

  /* --- Palette: auf dunklem Grund --------------------------------------- */
  --on-dark:        #F4F7F2;
  --on-dark-muted:  #C3D2C7;

  /* --- Signalfarben (Formular) ------------------------------------------ */
  --danger:        #A32C21;
  --danger-surface:#FBEEEC;
  --ok:            #1B5E43;
  --ok-surface:    #E7F1EB;

  /* --- Semantische Rollen (hierueber sprechen die Komponenten) ---------- */
  --color-surface:        var(--paper);      /* Seitengrund                 */
  --color-surface-raise:  var(--card);       /* Karten, Felder              */
  --color-surface-alt:    var(--paper-2);    /* alternierende Baender       */
  --color-surface-tint:   var(--tint-green); /* Badges, Icon-Kacheln        */

  --color-text:           var(--ink);
  --color-heading:        var(--ink-heading);
  --color-text-muted:     var(--ink-muted);
  --color-text-invert:    var(--on-dark);
  --color-text-invert-muted: var(--on-dark-muted);

  --color-border:         var(--hair);
  --color-border-strong:  var(--hair-strong);

  /* Marken-Rollen - in BEIDEN Modi ein echtes Gruen, damit dunkle
     Flaechen (Footer, section--dark, Grafikfuellungen) dunkel bleiben. */
  --color-primary:        var(--forest);
  --color-primary-dark:   var(--forest-deep);
  --color-primary-light:  var(--forest-2);
  --color-secondary:      var(--moss);
  --color-secondary-dark: var(--moss-ink);
  --color-secondary-light:var(--moss-light);
  --color-accent:         var(--amber);
  --color-accent-ink:     var(--amber-ink);

  /* Interaktion (Links, Buttons) - flippt im Dark Mode.
     Primaerbutton bewusst graphitschwarz statt gruen: wirkt praeziser und
     digitaler, das Gruen bleibt dem Akzent und den Links vorbehalten. */
  --color-link:           var(--moss-ink);
  --color-link-hover:     var(--forest-deep);
  --btn-fill:             var(--ink-heading);
  --btn-fill-hover:       #000000;
  --btn-on-fill:          #FFFFFF;

  /* Grafik-Tokens (Illustrationen, Diagramm) - flippen im Dark Mode */
  --graph-plate:          var(--card);
  --graph-plate-alt:      var(--tint-green);
  --graph-stroke:         var(--forest);
  --graph-accent:         var(--moss);
  --graph-hair:           var(--hair-strong);

  /* --- Signalfarben als Rollen ------------------------------------------ */
  --color-error:          var(--danger);
  --color-error-surface:  var(--danger-surface);
  --color-success:        var(--ok);
  --color-success-surface:var(--ok-surface);

  /* --- Texturen (technisches Raster) ------------------------------------ */
  --topo-line:        rgba(18, 58, 43, 0.07);   /* feine Gitterlinien       */
  --topo-node:        rgba(18, 160, 106, 0.16); /* Knotenpunkte im Raster   */
  --pattern-dot-invert: rgba(255, 255, 255, 0.06);

  /* --- Verlaeufe --------------------------------------------------------- */
  --gradient-tile: linear-gradient(150deg, var(--tint-green) 0%, #D6E6DC 100%);
  --gradient-glow: radial-gradient(circle at 50% 42%,
                     rgba(64, 145, 108, 0.18) 0%, rgba(64, 145, 108, 0) 64%);

  /* --- Fokus (deutlich sichtbar, 3px) ----------------------------------- */
  --focus-ring:   3px solid var(--color-accent);
  --focus-offset: 2px;

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system,
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-base: "Inter", "Segoe UI", system-ui, -apple-system, Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.125rem;
  --text-lg:   clamp(1.1875rem, 0.5vw + 1.09rem, 1.3125rem);
  --text-xl:   clamp(1.375rem, 1vw + 1.18rem, 1.625rem);
  --text-2xl:  clamp(1.6875rem, 1.9vw + 1.3rem, 2.375rem);
  --text-3xl:  clamp(2rem, 3vw + 1.35rem, 3.25rem);
  --text-4xl:  clamp(2.5rem, 5.2vw + 1.2rem, 4.75rem);
  --text-hero: clamp(2.9rem, 8vw + 0.6rem, 6rem);

  --leading-tight:   1.08;  /* H1, Hero-nah: strammer Satz grosser Headlines */
  --leading-heading: 1.14;  /* H2: knapp, aber ohne Zeilenkollision          */
  --leading-snug:    1.24;  /* H3, Sub-Zeilen                                 */
  --leading-normal:  1.6;   /* Fliesstext: ruhiger Satzspiegel, gute Measure  */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --tracking-hero:  -0.03em;
  --tracking-tight: -0.018em;
  --tracking-wide:   0.14em;

  /* --- Abstaende (4px-Raster) ------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Vertikaler Rhythmus gestapelter Textbloecke (Lobotomized Owl).
     Regel des Systems: Der Abstand VOR einer Ueberschrift ist groesser als
     der danach - so bindet die Ueberschrift sichtbar an ihren Folgetext. */
  --flow-space:    var(--space-sm);  /* Standard zwischen Absaetzen/Elementen */
  --flow-space-lg: var(--space-lg);  /* zwischen Textgruppen                  */

  --section-space: clamp(4rem, 8vw, 7rem);

  /* --- Breiten ----------------------------------------------------------- */
  --container-width:  74rem;
  --container-narrow: 46rem;
  --container-pad:    clamp(1.25rem, 4vw, 2.5rem);
  --measure: 66ch;

  /* --- Radien, Schatten, Bewegung --------------------------------------- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 38, 30, 0.05), 0 2px 6px rgba(20, 38, 30, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 38, 30, 0.09), 0 2px 6px rgba(20, 38, 30, 0.06);
  --shadow-lg: 0 22px 48px rgba(18, 40, 31, 0.16), 0 6px 14px rgba(18, 40, 31, 0.08);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 180ms var(--ease-out);

  --z-header: 100;
  --z-menu: 110;

  color-scheme: light;
}


/* --- Dark Mode: tiefes Waldgruen. Nur Rollen werden umdefiniert. -------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:        #0C1411;  /* Seitengrund, fast schwarz          */
    --color-surface-raise:  #131E19;  /* Karten, Panels                     */
    --color-surface-alt:    #101A16;  /* alternierende Baender              */
    --color-surface-tint:   #16302A;  /* Badges, Icon-Kacheln              */

    --color-text:           #E8F0EC;
    --color-heading:        #F2F7F4;
    --color-text-muted:     #93A79C;
    --color-text-invert:    #F4F7F2;
    --color-text-invert-muted: #C3D2C7;

    --color-border:         #24322B;
    --color-border-strong:  #33453B;

    /* Marken-Gruen bleibt dunkel fuer Fuellungen; Signal ist helles Mint */
    --color-primary:        #1C4033;   /* Fuellungen/Baender: bleibt dunkel */
    --color-primary-dark:   #143026;
    --color-primary-light:  #57E0A0;
    --color-secondary:      #37D693;   /* Signal-Mint                        */
    --color-secondary-dark: #57E0A0;   /* Mint als Text auf Dunkel           */
    --color-secondary-light:#7DEBB6;
    --color-accent:         #37D693;   /* Signal-Mint als Akzent             */
    --color-accent-ink:     #57E0A0;

    --color-link:           #57E0A0;
    --color-link-hover:     #8FEDC2;
    --btn-fill:             #37D693;   /* helles Mint, fast-schwarze Schrift */
    --btn-fill-hover:       #55E0A6;
    --btn-on-fill:          #08130E;

    --graph-plate:          #131E19;
    --graph-plate-alt:      #1C302880;
    --graph-stroke:         #C4E4D6;   /* helle Linien auf dunklen Platten   */
    --graph-accent:         #37D693;
    --graph-hair:           #33453B;

    --topo-line:            rgba(87, 224, 160, 0.09);
    --topo-node:            rgba(87, 224, 160, 0.16);

    --gradient-tile: linear-gradient(150deg, #16261F 0%, #101B16 100%);
    --gradient-glow: radial-gradient(circle at 50% 42%,
                       rgba(55, 214, 147, 0.14) 0%, rgba(55, 214, 147, 0) 64%);

    --color-error:          #F0857A;
    --color-error-surface:  #2A1613;
    --color-success:        #57E0A0;
    --color-success-surface:#0F241B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}


/* ==========================================================================
   2. Basis / Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-sm);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  /* Trennung nur als Notnagel fuer sehr lange Woerter (z. B.
     "Anwendungsentwicklung") auf schmalen Screens. Kurze Woerter wie "Ihrem"
     bleiben ganz: min. 10 Zeichen im Wort, min. 4 vor / 3 nach der Trennung. */
  hyphens: auto;
  hyphenate-limit-chars: 10 4 3;
}

h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-heading); letter-spacing: -0.022em; }
h3 { font-size: var(--text-xl);  letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-md); font-weight: var(--weight-bold); font-family: var(--font-base); letter-spacing: normal; }

p, ul, ol, dl { margin: 0 0 var(--space-sm); }
p { max-width: var(--measure); text-wrap: pretty; }

/* --- Vertikaler Rhythmus: "space-before > space-after" ------------------
   Eine Ueberschrift, die auf einen Textblock folgt, eroeffnet eine neue
   Gruppe und bekommt Luft nach oben. Feuert bewusst NICHT nach Kicker/
   Eyebrow (span) - deren enge Bindung an die Headline bleibt erhalten.
   Komponenten mit hoeherer Spezifitaet (.prose, .card ...) ueberschreiben. */
:is(p, ul, ol, dl, figure, blockquote, .btn-row, .check-list, .note) + :is(h2, h3, h4) {
  margin-top: var(--space-xl);
}
:is(p, ul, ol, dl, figure, blockquote, .btn-row, .check-list, .note) + h2 {
  margin-top: var(--space-2xl);
}
:is(p, ul, ol, dl, figure, blockquote, .btn-row, .check-list, .note) + h4 {
  margin-top: var(--space-lg);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }

strong, b { font-weight: var(--weight-semibold); color: var(--color-heading); }
address { font-style: normal; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Browser-Oberflaechen aus der Palette bedienen (Craft-Detail). */
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-heading); }
:root { accent-color: var(--color-secondary); caret-color: var(--color-secondary); }
* { scrollbar-color: var(--color-border-strong) transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-space); }
.section--alt { background-color: var(--color-surface-alt); }

/* Zwei gleichfarbige Sektionen hintereinander verschwimmen sonst zu einer
   Flaeche. Eine feine Haarlinie trennt sie, ohne harten Kontrast - der
   vorhandene Wechsel auf --alt/--dark braucht sie nicht und bekommt keine. */
.section:not(.section--alt):not(.section--dark)
  + .section:not(.section--alt):not(.section--dark) {
  border-top: 1px solid var(--color-border);
}

.section--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--forest);
  color: var(--on-dark);
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--pattern-dot-invert) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 100% at 18% 0%, #000 10%, transparent 75%);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--on-dark); }
.section--dark p  { color: var(--on-dark-muted); }
.section--dark a  { color: var(--on-dark); text-decoration-color: color-mix(in srgb, var(--moss-light) 70%, transparent); }
.section--dark a:hover { color: #fff; }
.section--dark .lead { color: var(--on-dark-muted); }
.section--dark :focus-visible { outline-color: var(--moss-light); }

.section__head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-xl);
}
.section__head > :last-child { margin-bottom: 0; }

.grid > *,
.split > *,
.hero__inner > *,
.steps > li,
.person > *,
.bento > *,
.site-footer__grid > * { min-width: 0; }

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2, .grid--3 { gap: var(--space-lg); }
}

.split { display: grid; gap: var(--space-xl); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--text-wide { grid-template-columns: 1.15fr 0.85fr; }
}

/* --- Bento: asymmetrisches Leistungsraster ----------------------------- */
.bento {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 52em) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  /* Flaggschiff-Kachel nimmt die volle erste Zeile ein. */
  .bento__item--feature { grid-column: 1 / -1; }
}


/* ==========================================================================
   4. Typografie-Bausteine
   ========================================================================== */

/* Overline: eng an die Ueberschrift gebunden, als Kategorie-Marke. */
.eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-accent-ink);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.section--dark .eyebrow { color: var(--moss-light); }

.lead {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.text-muted { color: var(--color-text-muted); }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-md); margin-top: var(--space-lg); font-family: var(--font-base); font-weight: var(--weight-bold); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-3xs); }

.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.check-list li {
  position: relative;
  padding-left: 2rem;
  max-width: var(--measure);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.15rem;
  height: 0.6rem;
  border-left: 2.5px solid var(--color-secondary);
  border-bottom: 2.5px solid var(--color-secondary);
  transform: rotate(-45deg);
}
.section--dark .check-list li::before { border-color: var(--moss-light); }

.badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-tint);
  color: var(--color-secondary-dark);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}


/* ==========================================================================
   5. Komponenten
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.9rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background-color: var(--btn-fill);
  border-color: var(--btn-fill);
  color: var(--btn-on-fill);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--btn-fill-hover);
  border-color: var(--btn-fill-hover);
  color: var(--btn-on-fill);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-heading);
}
.btn--secondary:hover {
  border-color: var(--color-heading);
  background-color: color-mix(in srgb, var(--color-heading) 6%, transparent);
}

.section--dark .btn--primary {
  background-color: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--forest);
}
.section--dark .btn--primary:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--forest-deep);
}
.section--dark .btn--secondary {
  border-color: color-mix(in srgb, var(--on-dark) 45%, transparent);
  color: var(--on-dark);
}
.section--dark .btn--secondary:hover {
  border-color: var(--on-dark);
  background-color: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  min-height: 2.5rem;
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--text-sm);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  color: var(--color-secondary-dark);
}
.section--dark .link-arrow { color: var(--on-dark); }
.link-arrow::after {
  content: "\2192";
  transition: transform var(--transition);
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.link-arrow:hover::after { transform: translateX(4px); }


/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(3rem, 7vw, 6rem);
}

/* Technisches Raster: feines Gitter mit Knotenpunkten, zum Rand ausgeblendet.
   Rein per CSS - kein zusaetzliches Markup, keine Extra-Anfrage. */
.hero__topo,
.page-head__topo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(var(--topo-node) 1.4px, transparent 1.6px),
    linear-gradient(var(--topo-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--topo-line) 1px, transparent 1px);
  background-size: 96px 96px, 32px 32px, 32px 32px;
  background-position: 0 0, 0 0, 0 0;
}
.hero__topo {
  mask-image: radial-gradient(ellipse 85% 80% at 72% 34%, #000 22%, transparent 100%);
}
.page-head__topo {
  mask-image: radial-gradient(ellipse 70% 95% at 84% 32%, #000 12%, transparent 100%);
}

.hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 60em) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-2xl); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raise);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.hero__eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-secondary);
}

.hero__title {
  margin-bottom: var(--space-md);
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: var(--tracking-hero);
}
.hero__title-lead { display: block; color: var(--color-heading); text-wrap: balance; }
.hero__title-lead em { font-style: normal; color: var(--color-accent); }
.hero__title-sub {
  display: block;
  margin-top: var(--space-lg);  /* Luft unter der Signal-Unterstreichung von "Smart." */
  max-width: 24ch;
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  letter-spacing: normal;
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.hero .lead { max-width: 46ch; }

.hero__figure { display: flex; justify-content: center; }

.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 27rem);
  aspect-ratio: 1;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
}
.hero__net, .hero__mark { grid-area: 1 / 1; }
.hero__net { width: 100%; height: auto; }
.hero__mark { place-self: stretch; display: grid; place-items: center; }
.hero__mark img {
  width: min(46%, 12rem);
  filter: drop-shadow(0 18px 32px rgba(18, 40, 31, 0.22));
}

/* --- Trust-Leiste (echte Vertrauenssignale, keine erfundenen Belege) --- */
.trust-bar {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface-raise);
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 40em) { .trust-bar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); } }

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.trust-bar__item:first-child { border-top: 0; }
@media (min-width: 40em) {
  .trust-bar__item { border-top: 0; border-left: 1px solid var(--color-border); }
  .trust-bar__item:nth-child(odd) { border-left: 0; }
}
@media (min-width: 60em) {
  .trust-bar__item:nth-child(odd) { border-left: 1px solid var(--color-border); }
  .trust-bar__item:first-child { border-left: 0; }
}

.trust-bar__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-secondary-dark);
}
.trust-bar__icon svg { width: 1.5rem; height: 1.5rem; }
.trust-bar__text {
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-text-muted);
}
.trust-bar__text strong {
  display: block;
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}


/* --- Seitenkopf der Unterseiten ---------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-head__inner { max-width: var(--container-narrow); }
.page-head h1 { font-size: var(--text-3xl); }
.page-head p:last-child { margin-bottom: 0; }

.page-head__grid { display: grid; gap: var(--space-lg); align-items: center; }
.page-head__grid > * { min-width: 0; }
.page-head__grid .page-head__inner { max-width: none; }
@media (min-width: 60em) {
  .page-head__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); }
}


/* --- Karten -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--color-surface-raise);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition),
              transform var(--transition);
}
.card > :last-child { margin-bottom: 0; }
.card p { max-width: 64ch; }  /* Measure gewahrt, auch in breiten Karten */

.card--link { position: relative; }
.card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card--link:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.card--link .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--link .card__link:focus-visible { outline: none; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--gradient-tile);
  color: var(--color-secondary-dark);
  transition: transform var(--transition);
}
.card__icon svg { width: 1.75rem; height: 1.75rem; }
.card--link:hover .card__icon { transform: translateY(-2px) scale(1.05) rotate(-2deg); }

.card__title { margin-bottom: var(--space-2xs); }
.card__meta {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.card__foot { margin-top: auto; padding-top: var(--space-sm); }

/* --- Bento-Kachel (Leistungen Startseite) ------------------------------ */
.bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  padding: var(--space-lg);
  background-color: var(--color-surface-raise);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.bento__item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.bento__item:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.bento__item .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.bento__item .card__link:focus-visible { outline: none; }

.bento__index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  letter-spacing: var(--tracking-wide);
}
.bento__item h3 { margin-top: var(--space-2xs); }
.bento__meta {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--color-secondary-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.bento__foot { margin-top: auto; padding-top: var(--space-md); }

/* Flaggschiff-Kachel: zweispaltig, mit Illustrationsflaeche. */
.bento__item--feature { padding: var(--space-xl); }
@media (min-width: 52em) {
  .bento__item--feature {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .bento__item--feature .bento__body { align-self: center; }
}

/* Sekundaer-Kacheln (bleiben 2-up nebeneinander): grosse Illustration ueber
   die volle Kachelbreite oben, Text darunter. So wirkt das Bild gross, ohne
   dass die Kacheln untereinander rutschen. */
.bento__item--art .bento__art { margin-bottom: var(--space-lg); }
/* Banner bleibt volle Kachelbreite; die Illustration fuellt es grosszuegig
   aus, mit etwas Luft zum Rand. */
.bento__item--art .bento__art svg { max-width: 26rem; }
.bento__item--art .bento__body { display: flex; flex-direction: column; flex: 1; }
.bento__item--art .bento__foot { margin-top: auto; }
.bento__art {
  display: grid;
  place-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--gradient-tile);
  border: 1px solid var(--color-border);
}
.bento__art svg { width: 100%; height: auto; }

/* --- Hinweiskasten (dezent, ohne dicke Farbleiste) --------------------- */
.note {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-tint);
}
.note > :last-child { margin-bottom: 0; }
.note__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-md);
  font-family: var(--font-base);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.note__title::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
}
.section--dark .note {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}


/* --- Ablauf in Schritten ------------------------------------------------ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
  counter-reset: schritt;
}
@media (min-width: 48em) {
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}
.steps li {
  counter-increment: schritt;
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border-strong);
}
.steps li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-tint);
  color: var(--color-secondary-dark);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.steps h3 { font-size: var(--text-md); margin-bottom: var(--space-3xs); font-family: var(--font-base); font-weight: var(--weight-bold); }
.steps p  { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0; }


/* --- FAQ (natives details/summary) ------------------------------------- */

.faq { display: grid; gap: var(--space-2xs); max-width: var(--container-narrow); }
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raise);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__item[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--color-secondary-dark); }
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2.5px;
  border-radius: 2px;
  background-color: var(--color-secondary);
  transform: translateY(-50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); }
.faq__answer > :last-child { margin-bottom: 0; }


/* --- Team ---------------------------------------------------------------- */

.person { display: grid; gap: var(--space-md); align-items: start; }
@media (min-width: 40em) {
  .person { grid-template-columns: 14rem 1fr; gap: var(--space-xl); }
}
.person__photo {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--shadow-sm);
}
.person__name { margin-bottom: var(--space-3xs); }
.person__role {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-secondary-dark);
  font-family: var(--font-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-sm);
}


/* --- 3-2-1-Grafik ------------------------------------------------------- */

.diagram {
  padding: var(--space-lg);
  background-color: var(--color-surface-raise);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.diagram__rule { stroke: var(--graph-hair); stroke-width: 2; stroke-dasharray: 5 6; }
.diagram__disc { fill: var(--color-secondary); }
.diagram__num {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}
.diagram__art {
  fill: none;
  stroke: var(--graph-stroke);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagram__art rect { fill: var(--graph-plate); }
.diagram__art-line { stroke: var(--graph-accent); }
.diagram__art-dot  { fill: var(--graph-accent); stroke: none; }
.diagram__art-out  { stroke: var(--graph-accent); }
.diagram__label {
  fill: var(--color-heading);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  text-anchor: middle;
}
.diagram__sub { fill: var(--color-text-muted); font-family: var(--font-base); font-size: 14px; text-anchor: middle; }
@media (max-width: 34em) {
  .diagram { padding: var(--space-sm); }
  .diagram__sub { font-size: 15px; }
}


/* --- Kontaktformular ---------------------------------------------------- */

.form { max-width: 34rem; }
.form__field { margin-bottom: var(--space-md); }
.form__label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.form__hint {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.form__control {
  width: 100%;
  min-height: 2.9rem;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raise);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__control:hover { border-color: var(--color-primary-light); }
.form__control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 22%, transparent);
  outline: none;
}
.form__control:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
textarea.form__control { min-height: 9rem; resize: vertical; }
.form__control[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-surface);
}
.form__error {
  display: none;
  margin-top: var(--space-3xs);
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.form__error.is-visible { display: block; }
.form__check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs); align-items: start; }
.form__check input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--color-secondary);
  flex: none;
}
.form__check label { font-size: var(--text-sm); }
.form__required { color: var(--color-error); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-weight: var(--weight-semibold);
}
.form__status:empty { display: none; }
.form__status--error { border-color: var(--color-error); background-color: var(--color-error-surface); color: var(--color-error); }
.form__status--success { border-color: var(--color-success); background-color: var(--color-success-surface); color: var(--color-success); }

.contact-details { display: grid; gap: var(--space-md); }
.contact-details dt { font-weight: var(--weight-semibold); color: var(--color-heading); }
.contact-details dd { margin: 0; color: var(--color-text-muted); }


/* --- Illustrationen (Klassen-Vertrag der SVG-Partials) ----------------- */

.illu { display: block; width: 100%; height: auto; }
.illu__plate     { fill: var(--graph-plate); }
.illu__plate-alt { fill: var(--graph-plate-alt); }
.illu__solid     { fill: var(--color-secondary); }
.illu__accent    { fill: var(--color-secondary); }
.illu__accent-soft { fill: var(--color-secondary); opacity: 0.22; }
.illu__line {
  fill: none;
  stroke: var(--graph-stroke);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illu__line-accent {
  fill: none;
  stroke: var(--graph-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illu__line-thin { fill: none; stroke: var(--graph-hair); stroke-width: 1.6; stroke-linecap: round; }
.illu__line-invert {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illu__stroke-fein  { stroke-width: 2.6; }
.illu__stroke-stark { stroke-width: 6; }
.illu__line-dashed {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
  opacity: 0.75;
}
.illu__text {
  fill: var(--color-heading);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-anchor: middle;
}
.illu__text-invert { fill: var(--on-dark); }
@media (max-width: 40em) { .illu__text { font-size: 18px; } }

/* Netzgrafik hinter der Hero-Bildmarke */
.hero__net .illu__ring { fill: none; stroke: var(--color-secondary); stroke-width: 1.4; opacity: 0.4; }
.hero__net .illu__ring--dashed { stroke-dasharray: 3 8; opacity: 0.55; }
.hero__net .illu__node { fill: var(--color-secondary); }
.hero__net .illu__node-ring { fill: var(--color-surface); stroke: var(--color-secondary); stroke-width: 2; }
.hero__net .illu__chip { fill: var(--color-surface-raise); stroke: var(--color-border-strong); stroke-width: 1.5; }
.hero__net .illu__chip-bar { fill: var(--color-secondary); opacity: 0.55; }

.illu-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-tile);
  box-shadow: var(--shadow-sm);
}


/* --- Fotoflaeche (Platzhalter) ----------------------------------------- */

.photo-slot { margin: 0; }
.photo-slot__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--gradient-tile);
  color: var(--color-heading);
  text-align: center;
}
.photo-slot--wide .photo-slot__frame { aspect-ratio: 16 / 7; }
.photo-slot--portrait .photo-slot__frame { aspect-ratio: 4 / 5; }
.photo-slot__icon { width: 2.5rem; height: 2.5rem; opacity: 0.75; }
.photo-slot__icon svg { width: 100%; height: 100%; }
.photo-slot__label { max-width: 26rem; margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.photo-slot__hint { max-width: 30rem; margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.photo-slot figcaption { margin-top: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-sm); }
.photo-slot img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow-md); }


/* --- Redaktioneller Platzhalter ---------------------------------------- */

.placeholder {
  padding: var(--space-md);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.placeholder > :last-child { margin-bottom: 0; }
.placeholder::before {
  content: "Platzhalter";
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* ==========================================================================
   6. Header & Navigation
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-menu);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--forest);
  color: var(--on-dark);
  font-weight: var(--weight-semibold);
  transform: translateY(-120%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); color: var(--on-dark); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--color-heading);
}
.brand__mark { width: 2.25rem; height: auto; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.brand__name-accent { color: var(--color-secondary); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-raise);
  color: var(--color-heading);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__icon { position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-menu);
  padding: var(--space-2xs) var(--container-pad) var(--space-md);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.site-nav.is-open { display: block; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.site-nav__list a,
.site-nav__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2xs);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-heading);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__list a:hover,
.site-nav__trigger:hover { background-color: var(--color-surface-alt); }
.site-nav__list [aria-current] { color: var(--color-secondary-dark); }
.site-nav__list a[aria-current]  { background-color: var(--color-surface-tint); }
.site-nav__trigger[aria-current] { background-color: var(--color-surface-tint); }
.site-nav__trigger { justify-content: space-between; }
.site-nav__chevron {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: var(--space-2xs);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { transform: rotate(225deg) translate(-2px, -2px); }
.site-nav__submenu {
  list-style: none;
  margin: 0 0 var(--space-2xs);
  padding: 0 0 0 var(--space-sm);
  display: none;
  border-left: 2px solid var(--color-border);
}
.site-nav__submenu.is-open { display: grid; }
.site-nav__submenu a { flex-direction: column; align-items: flex-start; gap: 0; padding-block: var(--space-2xs); font-weight: var(--weight-normal); }
.site-nav__submenu-title { font-weight: var(--weight-semibold); }
.site-nav__submenu-note { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-normal); }
.site-nav__cta { margin-top: var(--space-2xs); }
.site-nav__cta .btn { width: 100%; }

@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .site-nav__list { display: flex; align-items: center; gap: var(--space-3xs); }
  .site-nav__list > li { position: relative; }
  .site-nav__list a,
  .site-nav__trigger {
    width: auto;
    min-height: 2.5rem;
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-base);
    white-space: nowrap;
    border-radius: var(--radius-pill);
  }
  .site-nav__list > li > a[aria-current],
  .site-nav__trigger[aria-current] {
    background-color: transparent;
    color: var(--color-secondary-dark);
    box-shadow: inset 0 -2px 0 var(--color-accent);
    border-radius: 0;
  }
  .site-nav__submenu {
    display: grid;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: var(--z-menu);
    min-width: 17rem;
    margin: 0;
    padding: var(--space-2xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raise);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .site-nav__submenu.is-open,
  .site-nav__group:hover .site-nav__submenu,
  .site-nav__submenu:focus-within { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav__submenu a { white-space: normal; border-radius: var(--radius-md); }
  .site-nav__cta { margin-top: 0; margin-left: var(--space-2xs); }
  .site-nav__cta .btn { width: auto; }
  .site-nav__cta .btn[aria-current] { box-shadow: var(--shadow-sm); }
}


/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
  margin-top: auto;
  padding-block: var(--space-2xl) var(--space-lg);
  background-color: var(--forest);
  color: var(--on-dark-muted);
  font-size: var(--text-sm);
}
.site-footer__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl); } }
.site-footer__brand img { width: 3rem; }
.site-footer__claim { margin-top: var(--space-2xs); max-width: 18rem; color: var(--on-dark-muted); }
.site-footer__heading {
  margin-bottom: var(--space-sm);
  color: var(--on-dark);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.site-footer__address { font-style: normal; line-height: 1.8; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer :focus-visible { outline-color: var(--moss-light); }
.site-footer__legal {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: none;
  font-size: var(--text-xs);
}


/* ==========================================================================
   8. Bewegung - Scroll-Reveal (nur mit JS aktiv, respektiert Praeferenzen)
   ==========================================================================
   Grundzustand ist sichtbar. Erst wenn JS die Klasse .reveal-ready an <html>
   setzt, werden markierte Elemente zunaechst verborgen und beim Eintreten
   sanft eingeblendet. Ohne JS oder bei reduzierter Bewegung bleibt alles
   sofort sichtbar - kein dauerhaft versteckter Inhalt.                     */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* --- Hero: gestaffelter Auftritt beim Laden (rein CSS) ----------------- */
@keyframes fv-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__eyebrow,
.hero__title,
.hero .lead,
.hero .btn-row,
.hero__figure {
  animation: fv-rise 0.7s var(--ease-out) both;
}
.hero__eyebrow { animation-delay: 0.06s; }
.hero__title   { animation-delay: 0.16s; }
.hero .lead    { animation-delay: 0.30s; }
.hero .btn-row { animation-delay: 0.42s; }
.hero__figure  { animation-delay: 0.22s; }

/* Akzentwort "Smart." bekommt eine einfahrende Signal-Unterstreichung. */
.hero__title-lead em { position: relative; }
.hero__title-lead em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.04em;
  height: 0.08em;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: fv-underline 0.6s var(--ease-out) 0.9s both;
}
@keyframes fv-underline { to { transform: scaleX(1); } }

/* --- Seitenkopf der Unterseiten: gestaffelter Auftritt beim Laden ------ */
.page-head__inner > * {
  animation: fv-rise 0.6s var(--ease-out) both;
}
.page-head__inner > *:nth-child(1) { animation-delay: 0.05s; }
.page-head__inner > *:nth-child(2) { animation-delay: 0.13s; }
.page-head__inner > *:nth-child(3) { animation-delay: 0.22s; }
.page-head__inner > *:nth-child(4) { animation-delay: 0.30s; }
/* Illustration neben dem Seitenkopf (nur auf den Leistungsseiten) */
.page-head__grid > div:last-child {
  animation: fv-rise 0.7s var(--ease-out) 0.18s both;
}

/* --- Lebendiges Datennetz hinter der Bildmarke ------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Gestrichelte Ringe und Speichen: fliessende Striche = Datenfluss. */
  .hero__net .illu__ring--dashed { animation: fv-march 9s linear infinite; }
  .hero__net .illu__line-dashed  { animation: fv-march 3.6s linear infinite; }

  /* Knoten "atmen" leicht versetzt, wie aktive Punkte im Netz. */
  .hero__net .illu__node {
    transform-box: view-box;
    transform-origin: center;
    animation: fv-breathe 3.4s ease-in-out infinite;
  }
  .hero__net .illu__node:nth-of-type(1) { animation-delay: 0s; }
  .hero__net .illu__node:nth-of-type(2) { animation-delay: 0.45s; }
  .hero__net .illu__node:nth-of-type(3) { animation-delay: 0.9s; }
  .hero__net .illu__node:nth-of-type(4) { animation-delay: 1.35s; }
  .hero__net .illu__node:nth-of-type(5) { animation-delay: 1.8s; }
  .hero__net .illu__node:nth-of-type(6) { animation-delay: 2.25s; }

  /* Glimmen hinter der Bildmarke pulsiert sehr langsam. */
  .hero__visual::before { animation: fv-glow 7s ease-in-out infinite; }
}
@keyframes fv-march  { to { stroke-dashoffset: -22; } }
@keyframes fv-breathe {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.55; }
}
@keyframes fv-glow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* --- Leben in den Leistungs-Illustrationen ----------------------------- */
/* Rein per CSS, nur Deckkraft und Strichversatz (kein Layout, kein Ruckeln).
   Respektiert reduzierte Bewegung. Wirkt an den .illu__*-Klassen selbst, also
   ueberall, wo die Illustrationen stehen: Startseite UND Leistungsseiten. */

/* KI-Funke sichtbar machen: helle Fuellung statt Gruen-auf-Gruen. */
.illu__spark { fill: var(--graph-plate); }

@media (prefers-reduced-motion: no-preference) {
  /* Technik & Sicherheit: Datenkopien fliessen zu den Speichern / in die Cloud. */
  .illu__line-dashed { animation: fv-march 3.4s linear infinite; }

  /* Signalflaechen (CTA-Knopf, KI-Block) atmen ganz leicht. */
  .illu__solid { animation: fv-signal 3.6s ease-in-out infinite; }

  /* Weiche Akzentflaechen (Textzeilen im Layout) schimmern dezent. */
  .illu__accent-soft { animation: fv-shimmer 4.2s ease-in-out infinite; }

  /* KI-Funke blitzt rhythmisch auf. */
  .illu__spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: fv-twinkle 3s ease-in-out infinite;
  }

  /* Beim Ueberfahren einer Kachel wird die Bewegung lebendiger. */
  .bento__item:hover .illu__line-dashed { animation-duration: 1.8s; }
  .bento__item:hover .illu__spark { animation-duration: 1.6s; }
}
@keyframes fv-signal  { 0%, 100% { opacity: 1; }    50% { opacity: 0.72; } }
@keyframes fv-shimmer { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.42; } }
@keyframes fv-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.12) rotate(8deg); }
}


/* ==========================================================================
   9. Leistungsbereich-Akzente - jedes Thema darf eine eigene Signalfarbe tragen
   ==========================================================================
   "Web & Gestaltung / Social Media" bekommt die blaue Markenvariante. Nur die
   Akzent-Rollen (Eyebrow, Links, Badges, Haken, Signal-Buttons, Grafik) werden
   umgefaerbt; Seitengrund, Fliesstext und Rhythmus bleiben wie ueberall. Eigene
   Werte fuer Hell und Dunkel sichern den Kontrast in beiden Modi.            */

.svc--web {
  --color-secondary:       #1E6FB8;
  --color-secondary-dark:  #155A96;
  --color-secondary-light: #7FB3E6;
  --color-accent:          #1E6FB8;
  --color-accent-ink:      #155A96;
  --color-link:            #155A96;
  --color-link-hover:      #0E3F6B;
  --color-surface-tint:    #E4EEF8;
  --graph-accent:          #1E6FB8;
  --graph-plate-alt:       #E4EEF8;
  --gradient-tile:         linear-gradient(150deg, #E7F0FA 0%, #CFE0F2 100%);
  --btn-fill:              #1E6FB8;
  --btn-fill-hover:        #15548F;
  --btn-on-fill:           #FFFFFF;
  --focus-ring:            3px solid #1E6FB8;
}

@media (prefers-color-scheme: dark) {
  .svc--web {
    --color-secondary:       #5AA7E6;
    --color-secondary-dark:  #8CC3F0;
    --color-secondary-light: #A8D3F5;
    --color-accent:          #5AA7E6;
    --color-accent-ink:      #8CC3F0;
    --color-link:            #8CC3F0;
    --color-link-hover:      #B5D8F7;
    --color-surface-tint:    #163049;
    --graph-accent:          #5AA7E6;
    --graph-plate-alt:       #16304980;
    --gradient-tile:         linear-gradient(150deg, #15283D 0%, #0F1D2E 100%);
    --btn-fill:              #5AA7E6;
    --btn-fill-hover:        #7FB8EC;
    --btn-on-fill:           #07131F;
  }
}

/* Zweispaltiger Bereichskopf: Text neben Bild/Illustration. Faellt auf schmalen
   Viewports sauber untereinander. Gibt den drei Leistungsbereichen je ein
   visuelles Gegenueber zum Fliesstext. */
.section-intro { margin-bottom: var(--space-xl); }
.section-intro .section__head { max-width: none; margin-bottom: 0; }
.section-intro__art {
  display: flex;
  justify-content: center;
}
.section-intro__art .illu { max-width: 420px; }
@media (min-width: 52em) {
  .section-intro {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .section-intro > * { min-width: 0; }
  .section-intro__art { justify-content: flex-end; }
}

/* Blaues Logo-Lockup im Kopf des Web-Bereichs. Freigestellt (transparenter
   Grund), steht ohne Rahmen direkt auf der Flaeche. */
.svc__logo {
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.svc__logo img { display: block; width: 150px; height: auto; }

/* --- Header bekommt beim Scrollen eine feine Erhebung ------------------ */
.site-header { transition: box-shadow var(--transition), border-color var(--transition); }
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-border-strong);
}


/* ==========================================================================
   9. Hilfsklassen
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

body.has-open-menu { overflow: hidden; }
@media (min-width: 60em) { body.has-open-menu { overflow: visible; } }

@media print {
  .site-header, .site-footer, .skip-link, .btn-row, .consent { display: none; }
  body { color: #000; font-size: 11pt; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ==========================================================================
   10. Cookie-Einwilligung (DSGVO) + Footer-Button
   --------------------------------------------------------------------------
   Rein tokenbasiert, deshalb ohne Extra-Regeln auch im Dark Mode stimmig.
   Opt-in: wird per JavaScript eingeblendet, solange keine Wahl gespeichert
   ist. Ohne JavaScript erscheint nichts - dann werden ohnehin keine
   optionalen Dienste geladen.
   ========================================================================== */

/* Footer-Eintrag "Cookie-Einstellungen": sieht aus wie die Footer-Links. */
.site-footer__linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-footer__linkbtn:hover { text-decoration: underline; }

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-menu);
  display: flex;
  justify-content: center;
  padding: var(--container-pad);
  pointer-events: none;
}
.consent[hidden] { display: none; }

.consent__panel {
  pointer-events: auto;
  width: min(42rem, 100%);
  max-height: calc(100dvh - 2 * var(--container-pad));
  overflow-y: auto;
  background-color: var(--color-surface-raise);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
}

.consent.is-open .consent__panel {
  animation: consent-in 240ms var(--ease-out) both;
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .consent.is-open .consent__panel { animation: none; }
}

.consent__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-lg);
}
.consent__text {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.consent__text a { color: var(--color-link); }

.consent__options {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.consent__options[hidden] { display: none; }
.consent__option {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.consent__option input { margin-top: 0.2em; flex: none; }
.consent__option strong { display: block; color: var(--color-heading); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.consent__actions .btn { flex: 1 1 auto; }
@media (min-width: 34em) {
  .consent__actions .btn { flex: 0 0 auto; }
  .consent__actions .btn[data-consent-accept] { margin-left: auto; }
}