/* Navbar + Mobile-Menü + Kontakt-Modal + "Zurück"-Link für die 4 Leistungen-Unterseiten
   (Website-Erstellung, Redesign, Hosting, Barrierefreiheit-Mehrsprachigkeit).

   1:1 aus index.html übernommen (27.08.2026) — Werte, Selektoren und Kaskaden-
   Reihenfolge bewusst unverändert, damit die Navbar hier exakt so aussieht und
   sich verhält wie auf der Startseite. Bewusst NICHT mit übernommen:
     - assets/css/scrolly-hero.css als GANZES (der Hero-Startzustand mit
       diagonaler Maske, Transitions, ResizeObserver — alles index.html-nur).
       Die "über dunkler Sektion hell beschriftet" .over-dark-Regeln daraus
       sind seit 06.09.2026 hier dupliziert (weiter unten bei
       #site-header.scrolled.over-dark): seit 04.09.2026 haben diese Seiten
       dunkle Sektionen mit [data-nav-dunkel] (schwarzer Hero auf
       Website-Erstellung.html u.a.), subpage-nav.js setzt .over-dark, und
       ohne die Schrift-/Logo-Regeln blieb die dunkle Navschrift auf Schwarz
       unlesbar. Der frühere Kommentar "diese Seiten haben keinen dunklen Hero"
       stimmt seitdem nicht mehr.
     - [data-theme="dark"]-Varianten: diese Unterseiten haben keinen Dark-Mode-
       Umschalter, die Regeln liefen ins Leere.
     - Der Hero-abhängige Scroll-Korrektur-Code (ResizeObserver auf .scrolly-hero,
       #anker-Korrektur beim Laden) — beides No-Ops ohne Hero-Insel/passende IDs.
*/

:root {
  --nav-height: 88px;
  --gutter: clamp(24px, 2.6vw, 56px);
  --shell-max: 1672px;
  --shell: min(100% - (2 * var(--gutter)), var(--shell-max));
  --primary: #061B3A;
  --primary-deep: #030D1F;
  --border: #E9EEF6;
  --muted: #5B6A79;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Inter, nur die Schnitte, die die Navbar tatsächlich braucht (400/600/700,
   je latin + latin-ext) — dieselben Dateien wie auf der Startseite, aus dem
   gemeinsamen assets/fonts/. Kein neues Asset, nur die @font-face-Deklaration. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

#site-header, #mobile-menu-overlay, #contact-modal {
  font-family: var(--font);
}

/* Tabler Icons — nur das Basis-Zeichen plus die 5 Glyphen, die die Navbar
   wirklich braucht (Dropdown-Chevron + die 4 Leistungen-Icons). index.html
   bindet den kompletten Font samt aller ~5000 Icon-Klassen inline ein; das
   hier auf dieser Seite zu duplizieren wäre unnötiger Ballast für Icons, die
   in der Navbar nie vorkommen. Gleiche Font-Dateien wie auf der Startseite
   (assets/fonts/tabler-icons.*), kein neues Asset. */
@font-face { font-family: "tabler-icons"; font-style: normal; font-weight: 400; src: url("../fonts/tabler-icons.woff2") format("woff2"), url("../fonts/tabler-icons.woff") format("woff"), url("../fonts/tabler-icons.ttf") format("truetype"); }
.ti { font-family: "tabler-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 20px; display: inline-flex; }
.ti-chevron-down:before { content: "\ea5f"; }
.ti-browser:before { content: "\ebb7"; }
.ti-pencil:before { content: "\eb04"; }
.ti-server:before { content: "\eb1f"; }
.ti-sparkles:before { content: "\f6d7"; }
.ti-search:before { content: "\eb1c"; }
.ti-palette:before { content: "\eb01"; }
.ti-robot:before { content: "\f00b"; }
.ti-camera:before { content: "\ea54"; }

/* ── HEADER (Basis, aus dem ersten <style>-Block von index.html) ── */
header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .2s ease;
}
header:not(.scrolled) { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
header.scrolled {
  /* Voll opak statt 92% (31.08.2026, gleicher Fix wie index.html am
     30.08.2026, Julian: bei hohem Kontrast zur Section direkt darueber
     schimmerte durch die restlichen 8% ein Rand der vorherigen Section
     durch den Blur). Diese Datei bekam den Fix damals nicht mit - sie wird
     von 13 anderen Seiten geladen, index.html hat ihre eigene Kopie inline. */
  background: #FFFFFF;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 14px rgba(6,27,58,0.07);
}
.header-inner {
  width: var(--shell); margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; height: 88px; gap: 32px;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 66px; width: auto; object-fit: contain; margin-top: -4px; cursor: pointer; }
.header-nav {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  padding: 0; border-radius: 0;
  transition: background .25s ease;
}
header:not(.scrolled) .header-nav { background: transparent; }
.nav-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16.5px; font-weight: 700;
  color: #ffffff; padding: 10px 16px; border-radius: 999px;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: background .15s, color .15s;
}
.nav-btn:hover { background: rgba(255,255,255,0.12); }
.nav-btn.active { font-weight: 800; background: rgba(255,255,255,0.10); }
header.scrolled .nav-btn { color: #14233D; text-shadow: none; }
header.scrolled .nav-btn:hover { background: rgba(20,35,61,0.07); color: var(--primary); }
header.scrolled .nav-btn.active { color: var(--primary); font-weight: 700; background: rgba(20,35,61,0.06); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn-primary {
  font-size: 15.5px; padding: 13px 28px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  box-shadow: 0 8px 22px -8px rgba(6,27,58,0.5), 0 2px 8px rgba(6,27,58,0.18);
  border: 1px solid rgba(255,255,255,0.14);
}
.header-cta .btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(6,27,58,0.55), 0 2px 8px rgba(6,27,58,0.2); }
.btn-primary {
  font-family: var(--font); font-weight: 700; color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: box-shadow .2s, transform .15s, background .2s;
}
.btn-primary:hover { background: var(--primary-deep); box-shadow: 0 5px 18px rgba(6,27,58,0.32); transform: translateY(-1px); }

/* ── NAV DROPDOWN ── */
.nav-dropdown-wrap { position: relative; display: inline-flex; }
.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16.5px; font-weight: 700;
  color: #ffffff; padding: 10px 16px; border-radius: 999px;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: background .15s, color .15s;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn.open { background: rgba(255,255,255,0.12); }
header.scrolled .nav-dropdown-btn { color: #14233D; text-shadow: none; }
header.scrolled .nav-dropdown-btn:hover, header.scrolled .nav-dropdown-btn.open { background: rgba(20,35,61,0.07); color: var(--primary); }
/* Chevron: Glyph exakt in seiner 14px-Box zentriert (font-size == Box, kein
   Überstand), damit rotate() um die echte Bildmitte dreht statt um einen
   versetzten Punkt zu kreisen. Auf-Zustand kippt ihn an Ort und Stelle nach
   oben. 1:1 mit index.html. */
.nav-dropdown-btn .chev {
  width: 14px; height: 14px; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .28s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-dropdown-btn.open .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-btn .chev { transition: none; }
}
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 360px; background: white;
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(12,31,74,0.12);
  padding: 8px; z-index: 500;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-dropdown.open {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.nav-dd-active-indicator {
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 0;
  width: 2px;
  height: 1px;
  border-radius: 999px;
  background: #2472e8;
  box-shadow: 0 1px 5px rgba(36,114,232,.24);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scaleY(1);
  transform-origin: top;
  transition: transform .24s cubic-bezier(.23,1,.32,1), opacity .12s ease;
  will-change: transform;
}
.nav-dropdown--indicator-visible .nav-dd-active-indicator { opacity: 1; }
.nav-dd-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; }
.nav-dd-item:hover, .nav-dd-item:focus-visible { background: rgba(36,114,232,0.05); }
.nav-dd-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(12,31,74,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.nav-dd-title { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.nav-dd-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Pfeil rechts (06.09.2026, Julian, nach Vorlagenbild): reiner Text-Chevron
   per ::after statt eigenem SVG - braucht keine Markup-Aenderung in den 9+
   Seiten, die dieses Dropdown einbinden. align-self:center haelt ihn
   mittig, auch weil .nav-dd-item align-items:flex-start fuer den
   mehrzeiligen Titel/Beschreibungs-Block links braucht. */
.nav-dd-item::after {
  content: "\203A"; align-self: center; margin-left: auto; padding-left: 8px;
  font-size: 18px; line-height: 1; color: var(--muted); flex-shrink: 0;
  transition: color .15s ease;
}
.nav-dd-item:hover::after { color: #2472e8; }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item { transition: none; }
  .nav-dd-item::after { transition: none; }
  .nav-dd-active-indicator { transition: opacity .12s ease; }
}

/* Icon "Website-Erstellung" (05.09.2026, Julian: Lucide-Animated LayoutPanelTopIcon,
   lucide-animated.com). Vanilla-SVG+CSS-Nachbau der gelieferten React/Framer-Motion-
   Komponente: dieser Header ist auf jeder Seite reines HTML/JS, keine React-Insel.
   Gleiche drei Formen und dieselbe Reihenfolge/Verzoegerung (0 / .3s / .4s) wie die
   Vorlage - dort spielt die Animation beim Mount, hier bei jedem Hover erneut. */
.nav-dd-item:hover .nav-dd-icon-lp__r1 { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-lp__r2 { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-lp__r3 { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
@keyframes nav-dd-lp-y { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nav-dd-lp-x-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nav-dd-lp-x-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-lp__r1,
  .nav-dd-item:hover .nav-dd-icon-lp__r2,
  .nav-dd-item:hover .nav-dd-icon-lp__r3 { animation: none; }
}

/* Icon "Website Redesign" (06.09.2026, Julian: eigene Palette-Line-Vorlage).
   In Body + 3 Farbpunkte aufgeteilt, damit sie wie beim Website-Erstellung-
   Icon oben einzeln einfliegen koennen - dieselben drei Keyframes, dieselbe
   Dauer/Kadenz (0/.3s/.4s). Der vierte Teil (oberer Punkt) hat dort keine
   Entsprechung, nutzt darum denselben Keyframe wie der Body, nur einen
   Schritt spaeter (.5s), statt einen eigenen Bewegungstyp zu erfinden. */
.nav-dd-item:hover .nav-dd-icon-pal__body { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-left { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-right { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: nav-dd-lp-y .5s ease both; animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-pal__body,
  .nav-dd-item:hover .nav-dd-icon-pal__dot-left,
  .nav-dd-item:hover .nav-dd-icon-pal__dot-right,
  .nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: none; }
}

/* Icon "Hosting & Wartung" (06.09.2026, Julian: AnimateIcons ServerIcon,
   animateicons.in/Avijit Dey, MIT). Vanilla-Nachbau wie beim Sprachen-Icon
   oben: die drei Reihen zeichnen sich per stroke-dasharray/-dashoffset nach
   (Vorlage: Framer-Motion pathLength [0,1], gestaffelt um 0.08s je Reihe),
   die sechs Punkte fliegen danach ein - dafuer keine neuen Keyframes noetig,
   das sind dieselben nav-dd-lp-x-left/-right von ganz oben (linke Spalte
   von links, rechte Spalte von rechts), nur pro Reihe leicht versetzt statt
   die Punkte der Vorlage einzeln neu zu bauen. */
.nav-dd-icon-srv__row1 { --len: 45; }
.nav-dd-icon-srv__row2 { --len: 45; }
.nav-dd-icon-srv__row3 { --len: 45; }
.nav-dd-icon-srv path { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-srv__row1 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) 0s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row2 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .08s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row3 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .16s both; }
@keyframes nav-dd-srv-draw {
  0% { opacity: 0; stroke-dashoffset: var(--len); }
  2% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
.nav-dd-item:hover .nav-dd-icon-srv__dot-1 { animation: nav-dd-lp-x-left .5s ease .3s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-2 { animation: nav-dd-lp-x-right .5s ease .32s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-3 { animation: nav-dd-lp-x-left .5s ease .38s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-4 { animation: nav-dd-lp-x-right .5s ease .4s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-5 { animation: nav-dd-lp-x-left .5s ease .46s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: nav-dd-lp-x-right .5s ease .48s both; }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-srv__row1,
  .nav-dd-item:hover .nav-dd-icon-srv__row2,
  .nav-dd-item:hover .nav-dd-icon-srv__row3,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-1,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-2,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-3,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-4,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-5,
  .nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: none; }
}

/* Icon "Corporate Design" (06.09.2026, Julian: gelieferte PencilIcon-Vorlage,
   SMIL-<animate>). Vanilla-CSS-Nachbau wie bei den anderen Icons: Hauptstrich
   zeichnet sich in 0.6s linear nach (Vorlage: stroke-dashoffset 56->0, kein
   Easing angegeben), danach zwei kurze Kritzelstriche je 0.2s linear bei
   .6s/.8s - exakt dieselbe Verzoegerungskette wie die Vorlage, nur als
   CSS-Keyframes statt SMIL, weil dieser Header auf jeder Seite reines
   HTML/JS ist (ersetzt das bisherige statische ti-palette-Icon). */
.nav-dd-icon-pencil__main { --len: 56; }
.nav-dd-icon-pencil__mark1, .nav-dd-icon-pencil__mark2 { --len: 8; }
.nav-dd-icon-pencil path { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.nav-dd-item:hover .nav-dd-icon-pencil__main { animation: nav-dd-pencil-draw .6s linear both; }
.nav-dd-item:hover .nav-dd-icon-pencil__mark1 { animation: nav-dd-pencil-mark .2s linear .6s both; }
.nav-dd-item:hover .nav-dd-icon-pencil__mark2 { animation: nav-dd-pencil-mark .2s linear .8s both; }
@keyframes nav-dd-pencil-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes nav-dd-pencil-mark { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-pencil__main,
  .nav-dd-item:hover .nav-dd-icon-pencil__mark1,
  .nav-dd-item:hover .nav-dd-icon-pencil__mark2 { animation: none; }
}

/* Icon "Barrierefreiheit & Mehrsprachigkeit" (06.09.2026, Julian: Lucide-
   Animated LanguagesIcon, lucide-animated.com). Vanilla-Nachbau der
   gelieferten React/Framer-Motion-Komponente: dieser Header ist auf jeder
   Seite reines HTML/JS. Statt motion/react's pathLength/pathOffset uebernimmt
   die klassische stroke-dasharray/-dashoffset-Technik dieselbe Zeichnen-
   Animation - optisch identisch. Reihenfolge/Delays 1:1 aus custom*0.1s der
   Vorlage (0/.1/.2/.3s, zwei Pfade teilen sich .3s). Die echte Motion-Spring
   (duration .5, bounce 0) ist mit der Standard-Easing-Kurve der Seite
   angenaehert (cubic-bezier(.23,1,.32,1), dieselbe wie beim Chevron und den
   beiden Icons oben) statt einer zweiten Bewegungssprache. Ruhezustand zeigt
   das Icon fertig gezeichnet wie jedes andere Icon der Leiste - erst der
   Hover loest das kurze Ab-/Wiederaufzeichnen aus. */
.nav-dd-icon-lang__p1 { --len: 8.5; }
.nav-dd-icon-lang__p2 { --len: 12.8; }
.nav-dd-icon-lang__p3 { --len: 12; }
.nav-dd-icon-lang__p4 { --len: 1; }
.nav-dd-icon-lang__p5 { --len: 22.4; }
.nav-dd-icon-lang__p6 { --len: 6; }
.nav-dd-icon-lang path { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-lang__p1 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p2 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .2s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p3 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .1s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p4 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) 0s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p5 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p6 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
@keyframes nav-dd-lang-draw {
  0% { opacity: 0; stroke-dashoffset: var(--len); }
  2% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-lang__p1,
  .nav-dd-item:hover .nav-dd-icon-lang__p2,
  .nav-dd-item:hover .nav-dd-icon-lang__p3,
  .nav-dd-item:hover .nav-dd-icon-lang__p4,
  .nav-dd-item:hover .nav-dd-icon-lang__p5,
  .nav-dd-item:hover .nav-dd-icon-lang__p6 { animation: none; }
}

/* Icon "SEO & Performance" (06.09.2026, Julian: Lucide-Animated
   ChartLineIcon, lucide-animated.com). Vanilla-Nachbau derselben
   stroke-dasharray/-dashoffset-Technik wie bei den beiden Icons oben - der
   Rahmen (unterer Winkel) bleibt ein normaler, unanimiert stehender Pfad
   (genau wie im Original ein einfaches <path> ohne motion.path), nur die
   Zickzack-Linie zeichnet sich beim Hover. Zwei getrennte Animationen auf
   demselben Pfad, weil die Vorlage pathLength und opacity mit UNTER-
   SCHIEDLICHEN Delays fährt (.15s / .1s, beide 0.3s Dauer) - eine Kurve
   allein könnte das nicht abbilden. Kein Spring hier (die Vorlage nutzt
   selbst keinen), darum normales ease-in-out statt der Kurve der anderen
   beiden Icons. */
.nav-dd-icon-chart__line { --len: 17; stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-chart__line {
  animation: nav-dd-chart-opacity .3s ease-in-out .1s both, nav-dd-chart-draw .3s ease-in-out .15s both;
}
@keyframes nav-dd-chart-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-dd-chart-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-chart__line { animation: none; }
}

/* Icon "KI und Automatisierung" (06.09.2026, Julian: eigene WorkflowCircle04-
   Vorlage ohne mitgelieferte Animation). Icon selbst unangetastet - die drei
   Kreise waren im Original EIN <path> mit drei Teilformen, hier als drei
   <circle> mit identischen Mittelpunkten/Radien aufgeteilt (Pixel fuer Pixel
   dasselbe Bild). Der Verbindungspfad war ebenfalls EIN <path> mit zwei
   Teilstuecken (gerade Linie + geschwungener Zusammenfluss); jetzt zwei
   <path>-Elemente. Der rechte davon ist im Original von oben nach unten
   gezeichnet (M18 8 ... endet bei 6,16) - fuer eine Von-unten-nach-oben-
   Enthuellung per stroke-dashoffset rechnerisch umgekehrt (Kontrollpunkte
   getauscht, Sweep-Flags der Bogensegmente gespiegelt, mit svgpathtools
   Punkt fuer Punkt gegen das Original geprueft: identische Kurve, nur jetzt
   beginnend bei 6,16). Icon-Bild bleibt dadurch unveraendert.
   Drei verworfene Versuche vorher: (1) nur der Verbindungspfad als GANZES
   per stroke-dashoffset - sah wie ein Blinken der mittleren Linie aus; (2)
   die ganze Gruppe als ein Stueck von unten reinschieben - falscher
   Verschiebe-Effekt; (3) beide Teilstuecke als EIN durchgehender Pfad
   nacheinander gezeichnet (kurze Linie fertig bei 30%, lange Kurve erst bei
   100%) - genau das ungleiche Nacheinander erzeugte den gemeldeten Ruckler
   am Ende. Jetzt: Kreis unten zuerst, dann zeichnen sich BEIDE Aeste
   gleichzeitig (dieselbe Verzoegerung, dieselbe Dauer) nach oben, und beide
   oberen Kreise erscheinen im selben Moment, wenn beide fertig sind.
   Vierte Korrektur (Julian: "am Ende kommt ein kurzer Ruck"): die oberen
   Kreise setzten bisher GENAU dann ein, wenn die Linie fertig war (harte
   Staffeluebergabe, spuerbar als Bruch zwischen "zeichnet noch" und "poppt
   jetzt"). Jetzt beginnen sie schon, waehrend die Linie ihr letztes Stueck
   zeichnet (Ueberlappung statt Uebergabe) und blenden mit ease-out weich
   aus der Bewegung heraus statt mit einem Schnipp auf volle Deckkraft zu
   springen. */
.nav-dd-icon-workflow__bottom,
.nav-dd-icon-workflow__top-left,
.nav-dd-icon-workflow__top-right { opacity: 1; }
.nav-dd-icon-workflow__line-left { --len: 8; stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.nav-dd-icon-workflow__line-right { --len: 18.3; stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.nav-dd-item:hover .nav-dd-icon-workflow__bottom { animation: nav-dd-workflow-fade .15s ease both; }
.nav-dd-item:hover .nav-dd-icon-workflow__line-left,
.nav-dd-item:hover .nav-dd-icon-workflow__line-right { animation: nav-dd-workflow-connect .4s ease both; animation-delay: .1s; }
.nav-dd-item:hover .nav-dd-icon-workflow__top-left,
.nav-dd-item:hover .nav-dd-icon-workflow__top-right { animation: nav-dd-workflow-fade .3s ease-out both; animation-delay: .35s; }
@keyframes nav-dd-workflow-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-dd-workflow-connect { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-workflow__bottom,
  .nav-dd-item:hover .nav-dd-icon-workflow__line-left,
  .nav-dd-item:hover .nav-dd-icon-workflow__line-right,
  .nav-dd-item:hover .nav-dd-icon-workflow__top-left,
  .nav-dd-item:hover .nav-dd-icon-workflow__top-right { animation: none; }
}

/* Icon "Fotografie und Bildbearbeitung" (06.09.2026, Julian: AnimateIcons
   CameraIcon, animateicons.in/Avijit Dey, MIT). Restlos ersetzt (vorher
   Tabler-Font-Glyphe ti-camera) durch die gelieferte Kamera als Inline-SVG.
   Gehaeuse bleibt ein normaler, unanimierter Pfad wie in der Vorlage (dort
   ein einfaches <path> ohne motion.path) - nur die Linse (Kreis) bekommt die
   Vorlagen-Animation: scale [1, 0.45, 1.15, 1] bei times [0, .3, .65, 1],
   0.8s, dieselbe Kurve wie die Vorlage (cubic-bezier(.34,1.4,.64,1)) statt
   der Standardkurve der Seite - der kurze Uebersprung ist hier bewusst
   staerker als sonst (Kamera "schnappt" zu, wie ein Verschluss). */
.nav-dd-icon-cam__lens { transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
.nav-dd-item:hover .nav-dd-icon-cam__lens { animation: nav-dd-cam-snap .8s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes nav-dd-cam-snap {
  0%   { transform: scale(1); }
  30%  { transform: scale(.45); }
  65%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-item:hover .nav-dd-icon-cam__lens { animation: none; }
}

/* ── BURGER + MOBILE-MENÜ ──────────────────────────────────────────────
   Komplett-Ueberarbeitung 07.09.2026 (Leo: "Haelfte abgeschnitten, Farbe
   schlecht, Animation ueberarbeiten"). Behobene Fehler:
   1. Aufklapp-Menue "Leistungen" war auf max-height:220px gedeckelt bei
      overflow:hidden -> von 8 Punkten waren 3 unerreichbar. Jetzt hoch genug
      fuer alle 8, und .mobile-menu__body scrollt, falls das ganze Panel
      groesser als der Schirm wird.
   2. Burger war auf den dunklen Heros unsichtbar (dunkle Striche auf Schwarz),
      weil die .over-dark-Regel fehlte (index.html hatte sie, diese Datei nicht).
   3. Panel erbte die dunkle Body-Schriftfarbe -> jetzt explizit hell.
   4. Schirm war nur 55% deckend, die Seite blutete durch -> jetzt echtes
      Abdunkeln. Panel-Slide + Akkordeon gestrafft und mit einem Opacity-
      Fade gekoppelt, damit das Aufklappen sauber wirkt statt zu ruckeln. */
.nav-burger {
  display: none;
  width: 44px; height: 44px; padding: 0; border: none; background: none;
  border-radius: 10px;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; color: #111827; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.nav-burger__line {
  width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .26s cubic-bezier(.23,1,.32,1), opacity .18s ease;
}
.nav-burger.active .nav-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active .nav-burger__line:nth-child(2) { opacity: 0; transform: scaleX(.25); }
.nav-burger.active .nav-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Burger hell ueber dunklen Sektionen (fehlte hier, index.html hatte es). */
#site-header.over-dark .nav-burger { color: #fff; filter: drop-shadow(0 1px 5px rgba(0,0,0,.46)); }
@media (prefers-reduced-motion: reduce) {
  .nav-burger__line { transition: opacity .18s ease; }
}
.mobile-menu-overlay {
  position: fixed; inset: var(--nav-height) 0 0; z-index: 8500;
  overflow: hidden;
  background: rgba(3,6,12,.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.mobile-menu-overlay.open {
  opacity: 1; visibility: visible; pointer-events: all;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.mobile-menu {
  position: absolute; inset: 0 0 auto 0;
  max-height: 100%;
  background: #0A0F1A;
  color: #F3F5F8;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  overscroll-behavior: contain;
}
.mobile-menu-overlay.open .mobile-menu { transform: none; }
/* min-height:0 ohne flex:1 (bewusst): der Bereich ist nur so hoch wie seine
   Punkte, scrollt aber bei kleinen Fenstern. Mit flex:1 waere das Panel immer
   auf volle Resthoehe gestreckt. Opacity-Fade mit Verzoegerung: die Punkte
   kommen einen Tick nach dem Panel, damit das Aufklappen gefuehrt wirkt. */
.mobile-menu__body {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transition: opacity .18s ease .04s;
}
.mobile-menu-overlay.open .mobile-menu__body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .mobile-menu__body { transition: none; }
}
.mobile-menu__link, .mobile-menu__group-btn {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16.5px; font-weight: 700; color: #F3F5F8;
  padding: 13px 12px; border-radius: 10px;
  transition: background-color .16s ease;
}
.mobile-menu__link:active, .mobile-menu__group-btn:active { background: rgba(255,255,255,.09); }
.mobile-menu__link:hover, .mobile-menu__group-btn:hover { background: rgba(255,255,255,.07); }
.mobile-menu__group-btn .chev { font-size: 15px; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.mobile-menu__group-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Akkordeon: hoch genug fuer alle 8 Leistungspunkte (8x44 + Polster ~= 380).
   Der Opacity-Fade fuehrt das Auge, der max-height-Rest-Weg faellt dadurch
   nicht als Ruckler auf. Ist die Summe groesser als der Schirm, scrollt
   .mobile-menu__body. */
.mobile-submenu {
  flex: none;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  display: flex; flex-direction: column; padding-left: 8px;
}
.mobile-submenu.open { max-height: 440px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mobile-submenu { transition: opacity .16s ease; }
}
.mobile-submenu a {
  display: block; padding: 11px 12px; border-radius: 8px; text-decoration: none;
  font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.3; color: #9FB0C8;
}
.mobile-submenu a:active { background: rgba(255,255,255,.09); color: #F3F5F8; }
.mobile-submenu a:hover { background: rgba(255,255,255,.07); color: #F3F5F8; }
.mobile-menu__foot { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.10); flex-shrink: 0; }
.mobile-menu__foot .btn-primary { width: 100%; justify-content: center; }
#site-header.menu-open,
#site-header.menu-open:not(.scrolled) {
  background: #0A0F1A;
  border-bottom-color: transparent;
  box-shadow: none;
}
#site-header.menu-open .nav-burger { color: #fff; filter: none; }
@media (min-width: 900px) {
  .mobile-menu-overlay, .nav-burger { display: none !important; }
}

/* Responsive (aus index.html, erste Generation) */
@media (min-width: 900px) and (max-width: 1180px) {
  .header-inner { gap: 16px; padding: 0 24px; height: 80px; }
  .header-logo img { height: 56px; }
  .header-nav { gap: 2px; }
  .nav-btn, .nav-dropdown-btn { font-size: 14px; padding: 8px 11px; }
  .header-cta .btn-primary { font-size: 14px; padding: 11px 18px; }
}
@media (max-width: 899px) {
  .header-nav { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 480px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    height: 72px;
    gap: 8px;
    padding: 0 12px;
  }
  .header-logo { min-width: 0; }
  .header-logo img { height: 42px; max-width: 100%; }
  .header-cta .btn-primary {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ── HEADER (zweite Generation, R5-Feinschliff aus index.html) ── */
#site-header { height: var(--nav-height); }
#site-header .header-inner {
  width: var(--shell);
  max-width: none;
  height: var(--nav-height);
  padding: 0;
  gap: clamp(24px, 3vw, 52px);
}
#site-header .header-logo {
  width: clamp(220px, 15.55vw, 260px);
  height: 56px;
  position: relative;
  flex-shrink: 0;
}
#site-header .header-logo img {
  position: absolute;
  left: 0;
  top: -6px;
  width: auto;
  height: 54px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}
#site-header .header-logo-dark { display: none; }
#site-header .header-nav {
  gap: clamp(2px, .5vw, 10px);
  transform: translate3d(-2px, 2px, 0);
}
#site-header .nav-btn,
#site-header .nav-dropdown-btn {
  color: #111827;
  font-size: clamp(14px, 1vw, 16.5px);
  font-weight: 500;
  padding: 10px clamp(12px, 1.1vw, 18px);
  text-shadow: none;
}
#site-header .nav-btn:hover,
#site-header .nav-dropdown-btn:hover,
#site-header .nav-dropdown-btn.open {
  color: #061B3A;
  background: rgba(6,27,58,.06);
}
#site-header .header-cta .btn-primary {
  width: 252px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  background: #0757F7;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 24px -12px rgba(7,87,247,.6);
  font-size: clamp(14px, .9vw, 15px);
  font-weight: 500;
  white-space: nowrap;
}
#site-header .header-cta .btn-primary:hover { background: #004CE0; }
#site-header .header-cta { transform: translate3d(-9px, 3px, 0); }
#site-header.scrolled .header-logo { height: 58px; }
#site-header:not(.scrolled) .header-inner { transform: translateY(8px); }
#site-header.scrolled.over-dark {
  /* Voll opak statt 74%, gleicher Grund/Fix wie header.scrolled oben. */
  background: #060A12;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 2px 14px rgba(0,0,0,.38);
}

/* Ueber einer dunklen Sektion: Logo und Navigationsschrift hell (06.09.2026).
   1:1 aus assets/css/scrolly-hero.css (index.html) uebernommen - dieselben
   Werte und Selektoren. Steht hier, weil diese Unterseiten seit 04.09.2026
   dunkle Sektionen mit [data-nav-dunkel] haben (schwarzer Hero auf
   Website-Erstellung.html, dunkle Baender auf Hosting.html u.a.) und
   subpage-nav.js .over-dark auf dem Header setzt - bisher reagierte darauf nur
   der Hintergrund, die Schrift blieb dunkel und war auf Schwarz unlesbar.
   #site-header.over-dark schlaegt das unbedingte #site-header .nav-btn oben. */
#site-header.over-dark .header-logo-light { display: none; }
#site-header.over-dark .header-logo-dark { display: block; }
#site-header.over-dark .nav-btn,
#site-header.over-dark .nav-dropdown-btn {
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}
#site-header.over-dark .nav-btn:hover,
#site-header.over-dark .nav-dropdown-btn:hover,
#site-header.over-dark .nav-dropdown-btn.open {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Responsive (dritte Generation, R5, aus index.html — gewinnt bei Überschneidung
   dank #site-header-Präfix unabhängig von der Quellreihenfolge) */
@media (max-width: 1199px) {
  #site-header .header-inner { width: 100%; padding-inline: 24px; }
  #site-header .header-logo { width: 215px; }
  #site-header .header-nav { gap: 0; }
  #site-header .nav-btn,
  #site-header .nav-dropdown-btn { padding-inline: 9px; font-size: 13.5px; }
  #site-header .header-cta .btn-primary { padding-inline: 16px; font-size: 13px; }
}
@media (max-width: 899px) {
  #site-header .header-nav,
  #site-header .header-cta { display: none; }
  #site-header .header-inner {
    display: flex;
    justify-content: space-between;
  }
  #site-header .header-logo { width: min(245px, 68vw); }
}

/* ── KONTAKT-MODAL ── */
/* Der Weichzeichner haengt bewusst an .open und NICHT am Grundzustand
   (04.09.2026). Vorher stand das geschlossene Overlay dauerhaft als
   bildschirmfuellende blur(6px)-Ebene ueber jeder Seite - unsichtbar durch
   opacity:0, aber vom Browser trotzdem jedes Einzelbild neu berechnet.
   Auf Seiten mit laufender Animation (Hosting.html) hat das die ganze Seite
   ausgebremst. visibility:hidden nimmt die Ebene zusaetzlich aus dem
   Rendering, die Verzoegerung haelt sie waehrend des Ausblendens sichtbar. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(12,31,74,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, backdrop-filter .25s ease, visibility 0s linear .25s;
}
.modal-overlay.open {
  opacity: 1; pointer-events: all; visibility: visible;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease, backdrop-filter .25s ease, visibility 0s linear 0s;
}
.modal-box {
  background: white; border-radius: 24px;
  width: 100%; max-width: 540px;
  box-shadow: 0 32px 80px rgba(12,31,74,0.22);
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s;
  opacity: 0;
}
.modal-overlay.open .modal-box { transform: none; opacity: 1; }
.modal-head {
  background: var(--primary); color: white;
  padding: 28px 32px 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-head-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.modal-head-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.modal-close {
  background: rgba(255,255,255,0.12); border: none; color: white;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,0.22); }
.modal-body { padding: 28px 32px 32px; }
.modal-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.modal-form-group label { font-size: 13px; font-weight: 600; color: var(--primary); }
.modal-required { color: #0757f7; font-weight: 800; }
.modal-form-group input,
.modal-form-group textarea {
  font-family: var(--font); font-size: 14px; color: var(--primary);
  background: #f8fbff; border: 1px solid #d8e2ef;
  border-radius: 10px; padding: 11px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.modal-form-group input:focus,
.modal-form-group textarea:focus { border-color: #0757f7; box-shadow: 0 0 0 3px rgba(7,87,247,.13); }
.modal-form-group textarea { resize: vertical; min-height: 100px; }
.modal-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-dsgvo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.modal-dsgvo input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: #0757f7; }
.modal-dsgvo label { font-size: 12px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.modal-dsgvo a { color: var(--primary); font-weight: 600; }
.modal-submit {
  width: 100%; background: #0757f7; color: white;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 14px; border-radius: 10px; border: none; cursor: pointer;
  transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.modal-submit:hover { background: #004ce0; }
.modal-submit:disabled { cursor: wait; opacity: .72; }
.modal-success { text-align: center; padding: 12px 0 4px; }
.modal-success-icon { font-size: 48px; margin-bottom: 12px; color: #16a34a; }
.modal-success h3 { font-size: 18px; font-weight: 800; color: var(--primary); }
.modal-success p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.modal-err { font-size: 12px; color: #dc2626; margin-top: 4px; display: none; }
.modal-err.show { display: block; }
@media (max-width: 480px) {
  .modal-row { grid-template-columns: 1fr; }
  .modal-head, .modal-body { padding-left: 20px; padding-right: 20px; }
}

/* ── "ZURÜCK"-LINK (neu, nur für die 4 Unterseiten) ──
   Sitzt UNTER der Navbar, nicht in ihr — eigene, dezente Zeile, auf allen 4
   Seiten identisch. Pfeil aus demselben Glyph, den die alten Zurück-Buttons
   dieser Seiten schon benutzt haben (M19 12H5M12 19l-7-7 7-7), Kurve/Timing
   wie der Rest des Projekts (cubic-bezier(.22,1,.36,1), siehe .modal-box). */
.dwc-back-row {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 40px 0;
}
.dwc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 2px;
}
.dwc-back-link:hover { color: var(--primary); }
.dwc-back-link svg { flex-shrink: 0; transition: transform .24s cubic-bezier(.22,1,.36,1); }
.dwc-back-link:hover svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  .dwc-back-link svg { transition: none; }
}
@media (max-width: 480px) {
  .dwc-back-row { padding-left: 20px; padding-right: 20px; }
}

/* ── "ZURÜCK"-BUTTON, FIXIERT (04.09.2026, Julian: "bleibt beim Runterscrollen
   oben links, Farbe passend zum Hintergrund") ──
   Nur fuer Website-Erstellung.html, Redesign.html, Hosting.html und
   Barrierefreiheit-Mehrsprachigkeit.html - ersetzt dort .dwc-back-row (stand fest im
   Textfluss, scrollte weg) bzw. .hero-back (nur innerhalb der Hero absolut
   positioniert). .dwc-back-row/.dwc-back-link bleiben fuer alle anderen
   Seiten unveraendert, die sie weiterhin nutzen.
   Farbumschaltung: assets/js/subpage-nav.js prueft bei jedem Scroll dieselben
   [data-nav-dunkel]-Sektionen wie beim Header und setzt .on-dark, wenn eine
   davon gerade unter dem Button liegt. */
.subpage-back {
  position: fixed;
  top: 112px;
  left: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #5b6a80;
  text-decoration: none;
  transition: color .2s ease;
}
.subpage-back:hover { color: #0b2044; }
.subpage-back svg { flex-shrink: 0; transition: transform .24s cubic-bezier(.22,1,.36,1); }
.subpage-back:hover svg { transform: translateX(-3px); }
.subpage-back:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.subpage-back.on-dark {
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 5px rgba(0,0,0,.46);
}
.subpage-back.on-dark:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .subpage-back, .subpage-back svg { transition: none; }
}
@media (max-width: 480px) {
  .subpage-back { top: 96px; left: 16px; }
}