/*
Theme Name: IT-Systeme Hamburg
Theme URI: https://it-systeme-hamburg.de
Description: Child-Theme für it-systeme-hamburg.de auf GeneratePress-Basis. Lead-Gen-Website für Managed IT-Services in Hamburg.
Author: Novotec GmbH
Author URI: https://it-systeme-hamburg.de
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
Template: generatepress
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: it-systeme-hamburg
*/

/* ==========================================================================
   Ab hier der vollständige Inhalt aus _global.css.
   Gepflegt wird die Datei im Projektordner, NICHT hier. Nach einer Änderung
   neu bauen mit: ruby _build-childtheme.rb
   ========================================================================== */

/* ==========================================================================
   IT-Systeme Hamburg — Global Stylesheet
   --------------------------------------------------------------------------
   WordPress-Migration: Inhalt dieser Datei komplett nach
   Design → Customizer → Zusätzliches CSS kopieren.

   Aufbau:
   01  Custom Properties (Design-Tokens)
   02  Reset & Base
   03  Typografie
   04  Layout: Container, Section, Grid
   05  Buttons
   06  Komponenten: Pill, Label, Card, Icon-Box
   07  Header: Utility-Bar, Navigation, Megamenu, Mobile-Overlay
   08  Startseite: Hero, Dashboard, Trust, Bento, Pakete, Warum, Testimonial
   09  Inhaltsseiten: Page-Hero, Prose, FAQ, Steps, Tabelle
   10  Formulare
   11  Footer
   12  Utilities
   ========================================================================== */


/* ==========================================================================
   01  CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* --- Farben ---
     Stehen ab v1.4 NICHT mehr hier, sondern in assets/css/colors-default.css
     und assets/css/colors-novotec.css. Welche Datei geladen wird, entscheidet
     der Customizer unter „Farbschema“. Die Farbdatei wird vor dieser Datei
     eingebunden. */

  /* --- Typografie --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: 20px;        /* Mobile   */
  --section-pad: 64px;          /* Mobile   */
  --header-height: 64px;        /* Mobile   */

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(15, 26, 31, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 26, 31, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 26, 31, 0.10);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 180ms;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --section-pad: 80px;
    --header-height: 72px;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-pad: 44px;
    --section-pad: 96px;
  }
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky-Header beim Ansteuern von Anker-Links nicht überlappen lassen.
     Die Utility-Bar scrollt mit weg, zählt hier also nicht mit. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

@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;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* Scroll-Lock, wenn das Mobile-Overlay offen ist (gesetzt via _global.js) */
body.is-locked {
  overflow: hidden;
}

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

/* Unsere Icons sind Outline-SVG und tragen fill="none" stroke="currentColor"
   als Attribute. Attribute verlieren gegen jede CSS-Regel: Ein fremdes
   `svg { stroke: none }` oder `svg { fill: currentColor }` aus dem
   Eltern-Theme oder einem Plugin würde sie unsichtbar machen. Deshalb hier
   ausdrücklich als Regel, damit die Attribute nicht die einzige Absicherung
   sind. */
svg[stroke="currentColor"] {
  fill: none;
  stroke: currentColor;
}

img,
video {
  height: auto;
}

svg {
  flex-shrink: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-text);
}

hr {
  height: 1px;
  margin: var(--space-8) 0;
  border: 0;
  background-color: var(--color-border);
}

/* --- Focus: sichtbar auf allen interaktiven Elementen (WCAG 2.1 AA) --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Skip-to-Content --- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  transform: translateY(-200%);
  border-radius: var(--radius-md);
  background-color: var(--color-dark);
  color: var(--color-text-on-dark);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: transform var(--duration) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-text-on-dark);
}

/* --- Nur für Screenreader --- */
.visually-hidden {
  position: absolute;
  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;
}


/* ==========================================================================
   03  TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* Display / Hero-H1 — 34px Mobile → 60px Desktop */
.display,
.hero h1 {
  font-size: clamp(2.125rem, 4.2vw + 1.1rem, 3.75rem);
  letter-spacing: clamp(-0.125rem, -0.05vw - 0.05rem, -0.0625rem);
  line-height: 1.02;
}

/* H1 — 32px → 48px */
h1 {
  font-size: clamp(2rem, 2.6vw + 1.3rem, 3rem);
  letter-spacing: -0.09375rem;
  line-height: 1.05;
}

/* H2 — 28px → 42px */
h2 {
  font-size: clamp(1.75rem, 2.3vw + 1.15rem, 2.625rem);
  letter-spacing: -0.075rem;
  line-height: 1.1;
}

/* H3 — 22px → 28px */
h3 {
  font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  letter-spacing: -0.04375rem;
  line-height: 1.2;
}

/* H4 — 18px → 20px */
h4 {
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  letter-spacing: -0.01875rem;
  line-height: 1.3;
}

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Body Large — 16px → 18px */
.text-lead {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.55;
}

/* Small — 13px → 14px */
.text-small {
  font-size: clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem);
  line-height: 1.55;
}

/* Micro Label — 11px → 12px, uppercase, 2px Tracking */
.label-micro {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: clamp(0.6875rem, 0.15vw + 0.66rem, 0.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.125rem;
  line-height: 1;
  text-transform: uppercase;
}

.label-micro--warm {
  color: var(--color-warm);
}

.label-micro--on-dark {
  color: var(--color-label-on-dark);
}


/* ==========================================================================
   04  LAYOUT
   ========================================================================== */

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

.section {
  padding-block: var(--section-pad);
}

.section--tight {
  padding-block: calc(var(--section-pad) * 0.6);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--warm {
  background-color: var(--color-bg-warm);
}

.section--dark {
  background-color: var(--color-dark);
  color: var(--color-text-body-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong {
  color: var(--color-text-on-dark);
}

/* --- Section-Kopf --- */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  max-width: 40rem;
  margin-bottom: 0;
}

.section-head--center p {
  margin-inline: auto;
}

/* --- Grid --- */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.grid--gap-lg {
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Split: Text links, Inhalt rechts --- */
.split {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split {
    gap: var(--space-16);
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .split--60-40 {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}


/* ==========================================================================
   05  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

@media (min-width: 768px) {
  .btn {
    padding: 14px 22px;
  }
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* --- Primary (Dark) --- */
.btn--primary {
  background-color: var(--color-dark);
  color: var(--color-text-on-dark);
}

.btn--primary:hover {
  background-color: var(--color-dark-alt);
  color: var(--color-text-on-dark);
  transform: scale(0.99);
}

/* --- Secondary (Outline) --- */
.btn--secondary {
  background-color: var(--color-surface);
  border: 0.5px solid var(--color-border-strong);
  color: var(--color-text);
}

.btn--secondary:hover {
  border-color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  transform: scale(0.99);
}

/* --- Auf dunklem Grund --- */
.btn--on-dark {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.btn--on-dark:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  transform: scale(0.99);
}

.btn--ghost-on-dark {
  border: 0.5px solid rgba(250, 250, 247, 0.28);
  background-color: transparent;
  color: var(--color-text-on-dark);
}

.btn--ghost-on-dark:hover {
  border-color: rgba(250, 250, 247, 0.5);
  background-color: rgba(250, 250, 247, 0.06);
  color: var(--color-text-on-dark);
}

/* --- Kompakt (Header-CTA) --- */
.btn--compact {
  padding: 9px 16px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Tertiary: Text-Link mit Terrakotta-Unterstrich --- */
.link-underline {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-warm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}

.link-underline:hover {
  border-bottom-color: var(--color-text);
  color: var(--color-text);
}

/* --- Pfeil-Link --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration) var(--ease);
}

.link-arrow:hover {
  color: var(--color-accent);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --- Button-Gruppe --- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}


/* ==========================================================================
   06  KOMPONENTEN
   ========================================================================== */

/* --- Status-Pill --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-body);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

.pill--warm {
  border-color: transparent;
  background-color: var(--color-warm);
  color: #FFFFFF;
}

.pill--accent {
  border-color: transparent;
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.pill--on-dark {
  border-color: rgba(250, 250, 247, 0.2);
  background-color: rgba(250, 250, 247, 0.08);
  color: var(--color-text-on-dark);
}

/* --- Live-Dot --- */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.dot--pulse {
  animation: dot-pulse 2.4s var(--ease) infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.dot--warm {
  background-color: var(--color-warm);
}

/* --- Card --- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 1024px) {
  .card {
    padding: var(--space-8);
  }
}

.card h3,
.card h4 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--color-text-body);
}

/* Klickbare Card */
.card--link {
  text-decoration: none;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--link:hover h3,
.card--link:hover h4 {
  color: var(--color-accent);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-5);
}

.card--dark {
  border-color: transparent;
  background-color: var(--color-dark);
  color: var(--color-text-body-on-dark);
}

.card--dark h2,
.card--dark h3,
.card--dark h4 {
  color: var(--color-text-on-dark);
}

/* --- Icon-Box --- */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-5);
  border-radius: 10px;
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
  flex-shrink: 0;
}

.icon-box svg {
  width: 20px;
  height: 20px;
}

.icon-box--warm {
  background-color: var(--color-warm-bg);
  color: var(--color-warm);
}

.icon-box--on-dark {
  background-color: rgba(250, 250, 247, 0.1);
  color: var(--color-accent-light);
}

/* --- Check-Liste --- */
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-3);
  font-size: 15px;
  line-height: 1.5;
}

.check-list li:last-child {
  margin-bottom: 0;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.check-list--on-dark li::before {
  border-color: var(--color-accent-light);
}

/* --- Meta-Liste (Trennzeichen · ) --- */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 14px;
}


/* ==========================================================================
   07  HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 1px statt 0.5px: Sub-Pixel-Linien sind auf Handys oft unsichtbar,
     und Kopfleiste und Seitengrund liegen farblich dicht beieinander. */
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(250, 250, 247, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- 7.1 Utility-Bar (ab Tablet) --- */
.utility-bar {
  display: none;
  border-bottom: 0.5px solid var(--color-border);
  background-color: var(--color-bg-warm);
  font-size: 12px;
}

@media (min-width: 768px) {
  .utility-bar {
    display: block;
  }
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 40px;
}

.utility-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.utility-bar a,
.utility-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-body);
  text-decoration: none;
}

.utility-bar a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.utility-bar svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

.utility-bar__phone {
  font-weight: var(--font-weight-medium);
  color: var(--color-text) !important;
}

/* --- 7.2 Hauptnavigation --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background-color: var(--color-dark);
  flex-shrink: 0;
}

.logo__mark span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.logo__name {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.logo__divider {
  display: none;
  width: 1px;
  height: 18px;
  background-color: var(--color-border-strong);
}

.logo__claim {
  display: none;
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .logo__divider,
  .logo__claim {
    display: block;
  }
}

/* Menü (Desktop) */
.nav__menu {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .nav__menu {
    display: flex;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: 0;
  color: var(--color-text-body);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.nav__link:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.nav__link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.nav__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration) var(--ease);
}

.nav__link[aria-expanded="true"] {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.nav__link[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Rechte Seite */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__cta {
  display: none;
}

@media (min-width: 1024px) {
  .nav__cta {
    display: inline-flex;
  }
}

/* Hamburger */
/* Sichtbar als Schaltfläche: Ohne Rahmen und Fläche standen hier nur drei
   dünne Striche am Bildschirmrand, die auf dem Handy niemand als Menü
   erkannt hat. 44px ist zugleich das empfohlene Mindestmaß zum Antippen. */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  /* Akzentfarbe statt Textfarbe, siehe --color-icon-nav in den Farbdateien */
  color: var(--color-icon-nav);
}

.nav__toggle:hover {
  background-color: var(--color-bg-alt);
}

.nav__toggle svg {
  width: 24px;
  height: 24px;
  /* Etwas kräftiger als die übrigen Icons, damit die drei Striche
     auf der hellen Fläche klar ablesbar sind. */
  stroke-width: 2.25;
}

/* ==========================================================================
   Menü-Symbole ohne SVG
   ==========================================================================
   Striche und Kreuz werden hier in CSS gezeichnet, die Inline-SVG werden
   ausgeblendet. Grund: Auf dem Livesystem blieb der Button leer, obwohl das
   SVG im Markup steht und lokal einwandfrei erscheint. Zwei Korrekturen an
   der SVG-Darstellung, Absicherung von fill und stroke sowie eine andere
   Farbe, blieben ohne jede Wirkung. Was das SVG dort unterdrückt, ließ sich
   aus der Ferne nicht klären.

   Gezeichnete Balken hängen weder an SVG-Rendering noch an
   Präsentationsattributen noch an fremden svg-Selektoren. Sie nutzen
   currentColor und damit weiterhin --color-icon-nav.

   Das Markup bleibt unverändert. Wer das SVG zurückholen will, entfernt die
   display:none-Regel und die drei Pseudoelemente.
   ========================================================================== */

#mobile-toggle svg,
#mobile-close svg {
  display: none;
}

#mobile-toggle::before,
#mobile-close::before,
#mobile-close::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
}

/* Drei Striche: mittlerer Balken, die äußeren beiden als Schlagschatten */
#mobile-toggle::before {
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Kreuz: zwei gedrehte Balken übereinander */
#mobile-close {
  position: relative;
}

#mobile-close::before,
#mobile-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -11px;
}

#mobile-close::before {
  transform: rotate(45deg);
}

#mobile-close::after {
  transform: rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav__toggle {
    display: none;
  }
}

/* --- 7.3 Megamenu (Desktop) --- */
.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .megamenu.is-open {
    display: block;
  }
}

.megamenu__inner {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  padding-block: 36px;
}

.megamenu__col-title {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

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

.megamenu__list li + li {
  margin-top: var(--space-1);
}

.megamenu__link {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.megamenu__link:hover {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.megamenu__link span {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Featured-Card im Megamenu */
.megamenu__featured {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-warm);
  text-decoration: none;
}

.megamenu__featured:hover {
  background-color: var(--color-accent-bg);
}

.megamenu__featured h4 {
  margin-bottom: var(--space-2);
  font-size: 17px;
}

.megamenu__featured p {
  margin-bottom: var(--space-5);
  color: var(--color-text-body);
  font-size: 14px;
  line-height: 1.5;
}

/* --- 7.4 Mobile-Overlay --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}

/* display:flex oben würde das hidden-Attribut sonst aushebeln */
.mobile-menu[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  border-bottom: 0.5px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-6) var(--space-10);
}

.mobile-menu__list {
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--color-border);
  color: var(--color-text);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  text-decoration: none;
}

.mobile-menu__link[aria-current="page"] {
  color: var(--color-accent);
}

/* Aufklappbare Gruppe im Mobile-Menü */
.mobile-menu__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 0.5px solid var(--color-border);
  background: none;
  color: var(--color-text);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  text-align: left;
}

.mobile-menu__group-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: transform var(--duration) var(--ease);
}

.mobile-menu__group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-menu__sub {
  margin: 0;
  padding: var(--space-3) 0 var(--space-4);
  list-style: none;
}

.mobile-menu__sub[hidden] {
  display: none;
}

.mobile-menu__sub-title {
  margin: var(--space-4) 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mobile-menu__sub-title:first-child {
  margin-top: 0;
}

.mobile-menu__sub a {
  display: block;
  padding: 7px 0;
  color: var(--color-text-body);
  font-size: 16px;
  text-decoration: none;
}

.mobile-menu__sub a:hover {
  color: var(--color-accent);
}

.mobile-menu__footer {
  padding-top: var(--space-6);
  border-top: 0.5px solid var(--color-border);
}

.mobile-menu__footer .btn {
  margin-bottom: var(--space-5);
}

.mobile-menu__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
}

.mobile-menu__meta a {
  color: var(--color-text-body);
  text-decoration: none;
}


/* ==========================================================================
   08  STARTSEITE
   ========================================================================== */

/* --- 8.1 Hero --- */
.hero {
  padding-block: var(--section-pad) calc(var(--section-pad) * 0.85);
  background-color: var(--color-bg);
}

.hero__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    gap: var(--space-16);
    grid-template-columns: 1.45fr 1fr;
  }
}

.hero h1 {
  margin-block: var(--space-6) var(--space-5);
}

.hero__sub {
  max-width: 34rem;
  margin-bottom: var(--space-8);
  color: var(--color-text-body);
}

.hero__trust {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 0.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* --- 8.2 Dashboard-Card (Mock) --- */
.dashboard {
  padding: var(--space-5);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .dashboard {
    padding: var(--space-6);
  }
}

.dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 0.5px solid var(--color-border);
}

.dashboard__title {
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.dashboard__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

.dashboard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 0.5px solid var(--color-border);
}

.dashboard__row:last-of-type {
  border-bottom: 0;
}

.dashboard__row-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: 14px;
}

.dashboard__row-label svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.dashboard__row-value {
  color: var(--color-text-body);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  text-align: right;
  white-space: nowrap;
}

.dashboard__row-value--accent {
  color: var(--color-accent);
}

.dashboard__row-value--warm {
  color: var(--color-warm);
}

.dashboard__foot {
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --- 8.3 Trust-Logo-Strip --- */
.trust-strip {
  padding-block: var(--space-10);
  border-block: 0.5px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.trust-strip__label {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

.trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}

.trust-strip__logos span {
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.2px;
}

/* --- 8.4 Bento-Grid --- */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .bento__feature {
    grid-row: span 2;
  }
}

/* Big Feature (dunkel) */
.bento__feature {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-dark);
  color: var(--color-text-body-on-dark);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}

@media (min-width: 1024px) {
  .bento__feature {
    padding: var(--space-8);
  }
}

.bento__feature:hover {
  background-color: var(--color-dark-alt);
  color: var(--color-text-body-on-dark);
}

.bento__feature h3 {
  margin-block: var(--space-5) var(--space-3);
  color: var(--color-text-on-dark);
}

.bento__feature p {
  max-width: 28rem;
  margin-bottom: var(--space-8);
}

.bento__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}

.bento__stat {
  flex: 1 1 140px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: rgba(250, 250, 247, 0.07);
}

.bento__stat-value {
  display: block;
  color: var(--color-text-on-dark);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.bento__stat-label {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted-on-dark);
  font-size: 13px;
}

/* Standard-Card */
.bento__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

@media (min-width: 1024px) {
  .bento__card {
    padding: var(--space-6);
  }
}

.bento__card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.bento__card h4 {
  margin-bottom: var(--space-2);
}

.bento__card:hover h4 {
  color: var(--color-accent);
}

.bento__card p {
  color: var(--color-text-body);
  font-size: 14px;
  line-height: 1.5;
}

.bento__card .icon-box {
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-4);
}

.bento__card .icon-box svg {
  width: 18px;
  height: 18px;
}

/* Verbund-Card "Und weitere" */
.bento__more {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-warm);
}

@media (min-width: 768px) {
  .bento__more {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-column: 1 / -1;
    padding: var(--space-5) var(--space-6);
  }
}

.bento__more-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bento__more-links a {
  color: var(--color-text-body);
  font-size: 14px;
  text-decoration: none;
}

.bento__more-links a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* --- 8.5 Pakete --- */
.plans {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 1024px) {
  .plan {
    padding: var(--space-8);
  }
}

.plan--featured {
  border-color: transparent;
  background-color: var(--color-dark);
  color: var(--color-text-body-on-dark);
}

.plan--featured h3,
.plan--featured .plan__price-value {
  color: var(--color-text-on-dark);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.plan__name {
  margin: 0;
}

.plan__tagline {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: 14px;
}

.plan--featured .plan__tagline {
  color: var(--color-text-muted-on-dark);
}

.plan__price {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 0.5px solid var(--color-border);
}

.plan--featured .plan__price {
  border-bottom-color: rgba(250, 250, 247, 0.16);
}

.plan__price-value {
  display: block;
  color: var(--color-text);
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -1px;
  line-height: 1.1;
}

.plan__price-unit {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 13px;
}

.plan--featured .plan__price-unit {
  color: var(--color-text-muted-on-dark);
}

.plan__desc {
  margin-bottom: var(--space-6);
  font-size: 15px;
}

.plan .check-list {
  margin-bottom: var(--space-8);
}

.plan .btn {
  margin-top: auto;
}

/* --- 8.6 Warum wir (nummerierte Vorteile) --- */
.reasons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reasons li {
  padding-block: var(--space-6);
  border-top: 0.5px solid var(--color-border);
}

.reasons li:last-child {
  border-bottom: 0.5px solid var(--color-border);
}

.reasons__num {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-warm);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
}

.reasons h3 {
  margin-bottom: var(--space-2);
  font-size: 20px;
  letter-spacing: -0.3px;
}

.reasons p {
  margin: 0;
  font-size: 15px;
}

/* --- 8.7 Testimonial --- */
.testimonial {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.testimonial blockquote {
  margin: 0 0 var(--space-8);
  color: var(--color-text);
  font-size: clamp(1.375rem, 1.8vw + 1rem, 2rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.6px;
  line-height: 1.35;
}

.testimonial .highlight {
  background: linear-gradient(180deg, transparent 60%, var(--color-accent-highlight) 60%);
}

.testimonial__author {
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}

.testimonial__meta {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Sichtbare Platzhalter-Markierung */
.placeholder-note {
  display: inline-block;
  margin-top: var(--space-5);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--color-warm-bg);
  color: var(--color-warm);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

/* --- 8.8 Contact-CTA --- */
.cta-band {
  background-color: var(--color-dark);
  /* Ohne diese Zeile erben freie Textknoten die dunkle Body-Farbe */
  color: var(--color-text-body-on-dark);
}

.cta-band__inner {
  max-width: 42rem;
}

.cta-band h2 {
  margin-bottom: var(--space-5);
  color: var(--color-text-on-dark);
}

.cta-band p {
  margin-bottom: var(--space-8);
  color: var(--color-text-body-on-dark);
}

.cta-band__phone {
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: 2px solid var(--color-warm);
  padding-bottom: 2px;
}

.cta-band__phone:hover {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-text-on-dark);
}


/* ==========================================================================
   09  INHALTSSEITEN
   ========================================================================== */

/* --- 9.1 Page-Hero --- */
.page-hero {
  padding-block: calc(var(--section-pad) * 0.8);
  border-bottom: 0.5px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.page-hero__inner {
  max-width: 46rem;
}

.page-hero h1 {
  margin-block: var(--space-4) var(--space-5);
}

.page-hero p {
  color: var(--color-text-body);
}

.page-hero .btn-group {
  margin-top: var(--space-8);
}

/* --- 9.2 Breadcrumb --- */
.breadcrumb {
  margin-bottom: var(--space-4);
  font-size: 13px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* --- 9.3 Prose (Fließtext-Bereiche) --- */
.prose {
  max-width: 42rem;
}

.prose > h2 {
  margin-top: var(--space-12);
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose > h3 {
  margin-top: var(--space-8);
}

.prose p,
.prose li {
  color: var(--color-text-body);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.65;
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--color-text);
}

/* --- 9.4 Ablauf-Schritte --- */
.steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  padding: var(--space-6);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  counter-increment: step;
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-warm);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
}

.steps h3 {
  margin-bottom: var(--space-2);
  font-size: 18px;
  letter-spacing: -0.2px;
}

.steps p {
  margin: 0;
  font-size: 15px;
}

/* --- 9.5 FAQ --- */
.faq {
  max-width: 46rem;
}

.faq__item {
  border-bottom: 0.5px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 0.5px solid var(--color-border);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.2px;
  line-height: 1.4;
  text-align: left;
}

.faq__q:hover {
  color: var(--color-accent);
}

.faq__icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-accent);
  transform: translateY(-50%);
  transition: transform var(--duration) var(--ease);
}

.faq__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq__a {
  padding-bottom: var(--space-6);
}

.faq__a[hidden] {
  display: none;
}

.faq__a p {
  max-width: 42rem;
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.65;
}

/* --- 9.6 Tabelle --- */
.table-wrap {
  overflow-x: auto;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.table thead th {
  background-color: var(--color-bg-alt);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- 9.7 Info-Box --- */
.callout {
  padding: var(--space-6);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background-color: var(--color-accent-bg);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout--warm {
  border-left-color: var(--color-warm);
  background-color: var(--color-warm-bg);
}

/* --- 9.8 Bild-Platzhalter --- */
.media {
  overflow: hidden;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-warm);
}

.media img {
  width: 100%;
}

/* --- 9.9 Verwandte Leistungen --- */
.related {
  border-top: 0.5px solid var(--color-border);
}


/* ==========================================================================
   10  FORMULARE
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .form {
    padding: var(--space-8);
    grid-template-columns: repeat(2, 1fr);
  }

  .form__field--full {
    grid-column: 1 / -1;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}

.form__req {
  color: var(--color-warm);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 11px 14px;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  transition: border-color var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.form__textarea {
  min-height: 130px;
  resize: vertical;
}

.form__select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5049' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Checkbox */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form__check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.form__check label {
  color: var(--color-text-body);
  font-size: 14px;
  line-height: 1.5;
}

/* Fehler-Zustand */
.form__error {
  color: var(--color-warm);
  font-size: 13px;
}

.form__error[hidden] {
  display: none;
}

.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--color-warm);
}

/* Erfolgs-Meldung */
.form__success {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.form__success[hidden] {
  display: none;
}

.form__note {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Honeypot: aus dem Blickfeld, aber nicht display:none, sonst füllen ihn
   manche Bots nicht aus und der Filter greift nicht */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Statusmeldung nach dem Absenden --- */
.form-status {
  margin-bottom: var(--space-4);
  font-size: 15px;
  line-height: 1.5;
}

/* Leer bleibt die Meldung unsichtbar und belegt keinen Platz */
.form-status:empty {
  display: none;
}

.form-status--success,
.form-status--error {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-weight: var(--font-weight-medium);
}

.form-status--success {
  border-left-color: var(--color-accent);
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.form-status--error {
  border-left-color: var(--color-warm);
  background-color: var(--color-warm-bg);
  color: var(--color-warm);
}


/* ==========================================================================
   10A  CALENDLY-CTA (Erstgespräch)
   Terminbuchung läuft extern bei Calendly, dieser Block verlinkt nur dorthin.
   ========================================================================== */

.calendly-cta {
  padding: var(--space-8);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-warm);
}

@media (min-width: 1024px) {
  .calendly-cta {
    padding: var(--space-12);
  }
}

.calendly-cta__inner {
  max-width: 38rem;
}

.calendly-cta__label {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: clamp(0.6875rem, 0.15vw + 0.66rem, 0.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.125rem;
  line-height: 1;
  text-transform: uppercase;
}

.calendly-cta__title {
  margin-bottom: var(--space-4);
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2rem);
  letter-spacing: -0.05rem;
  line-height: 1.15;
}

.calendly-cta__text {
  margin-bottom: var(--space-8);
  color: var(--color-text-body);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.55;
}

.calendly-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}

.calendly-cta__phone {
  margin: 0;
  color: var(--color-text-body);
  font-size: 15px;
}

/* Dunkle Variante für den CTA-Streifen am Seitenende */
.cta-band .calendly-cta {
  padding: 0;
  border: 0;
  background: none;
}

.cta-band .calendly-cta__label {
  color: var(--color-accent-light);
}

.cta-band .calendly-cta__title {
  color: var(--color-text-on-dark);
}

.cta-band .calendly-cta__text,
.cta-band .calendly-cta__phone {
  color: var(--color-text-body-on-dark);
}

/* Textlink mit Terrakotta-Unterstrich, z. B. für die Telefonnummer */
.link-warm {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: 2px solid var(--color-warm);
  padding-bottom: 1px;
  transition: border-color var(--duration) var(--ease);
}

.link-warm:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.cta-band .link-warm,
.section--dark .link-warm {
  color: var(--color-text-on-dark);
}

.cta-band .link-warm:hover,
.section--dark .link-warm:hover {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-text-on-dark);
}


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

.site-footer {
  padding-block: var(--section-pad) var(--space-8);
  background-color: var(--color-dark);
  color: var(--color-text-body-on-dark);
  font-size: 14px;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    gap: var(--space-12);
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

.site-footer .logo {
  margin-bottom: var(--space-5);
  color: var(--color-text-on-dark);
}

.site-footer .logo__mark {
  background-color: rgba(250, 250, 247, 0.1);
}

.site-footer__about {
  max-width: 26rem;
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--color-accent-light);
  text-decoration: underline;
}

.site-footer__contact svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-muted-on-dark);
}

.site-footer__title {
  margin-bottom: var(--space-5);
  color: var(--color-text-on-dark);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

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

.site-footer__list li + li {
  margin-top: var(--space-3);
}

.site-footer__list a {
  color: var(--color-text-body-on-dark);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 0.5px solid rgba(250, 250, 247, 0.12);
  color: var(--color-text-muted-on-dark);
  font-size: 13px;
}

.site-footer__bottom a {
  color: var(--color-text-muted-on-dark);
  text-decoration: none;
}

.site-footer__bottom a:hover {
  color: var(--color-text-on-dark);
}


/* ==========================================================================
   11A  RATGEBER
   Kategorie-Kacheln, Artikel-Kacheln, Artikelkopf, Redaktions-Box.
   Greift nur im Ratgeber-Bereich, die übrigen Seiten bleiben unberührt.
   ========================================================================== */

/* --- Kategorie-Kachel auf /ratgeber/ --- */
.cat-tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cat-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.cat-tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

@media (min-width: 1024px) {
  .cat-tile {
    padding: var(--space-8);
  }
}

.cat-tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cat-tile h3 {
  margin-bottom: var(--space-3);
}

.cat-tile:hover h3 {
  color: var(--color-accent);
}

.cat-tile__desc {
  margin-bottom: var(--space-5);
  color: var(--color-text-body);
  font-size: 15px;
  line-height: 1.55;
}

.cat-tile__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.cat-tile__count {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Pfeil in Terrakotta, hier bewusst als einziger Ort im Ratgeber */
.cat-tile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-warm);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}

.cat-tile__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration) var(--ease);
}

.cat-tile:hover .cat-tile__link svg {
  transform: translateX(3px);
}

/* --- Artikel-Kachel --- */
.post-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.post-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-warm);
  border-bottom: 0.5px solid var(--color-border);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.post-card__cat {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.125rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.post-card__cat:hover {
  color: var(--color-text);
}

.post-card__title {
  margin-bottom: var(--space-3);
  font-size: 19px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.post-card:hover .post-card__title a {
  color: var(--color-accent);
}

/* Zwei Zeilen, danach abschneiden. Hält die Kacheln auf gleicher Höhe. */
.post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-5);
  color: var(--color-text-body);
  font-size: 15px;
  line-height: 1.55;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
}

/* --- Artikelkopf --- */
.post-header {
  max-width: 46rem;
}

.post-header__cat {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: clamp(0.6875rem, 0.15vw + 0.66rem, 0.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.125rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.post-header h1 {
  margin-bottom: var(--space-5);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.post-meta__sep {
  color: var(--color-border-strong);
}

.post-media {
  overflow: hidden;
  margin-bottom: var(--space-12);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-warm);
}

.post-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Redaktions-Box --- */
.redaktion {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 46rem;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-alt);
}

@media (min-width: 640px) {
  .redaktion {
    flex-direction: row;
    gap: var(--space-6);
    padding: var(--space-8);
  }
}

.redaktion .icon-box {
  margin-bottom: 0;
  width: 48px;
  height: 48px;
}

.redaktion .icon-box svg {
  width: 24px;
  height: 24px;
}

.redaktion h3 {
  margin-bottom: var(--space-3);
  font-size: 18px;
  letter-spacing: -0.2px;
}

.redaktion p {
  margin-bottom: var(--space-4);
  color: var(--color-text-body);
  font-size: 15px;
  line-height: 1.6;
}

.redaktion p:last-child {
  margin-bottom: 0;
}

/* --- Seitenblättern --- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-12);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-body);
  font-size: 15px;
  text-decoration: none;
}

.pagination .page-numbers:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.pagination .page-numbers.current {
  border-color: transparent;
  background-color: var(--color-dark);
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-medium);
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* Die Überschrift, die WordPress der Navigation voranstellt, brauchen wir nicht */
.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   12  UTILITIES
   ========================================================================== */

.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-warm   { color: var(--color-warm); }

.max-w-prose { max-width: 42rem; }
.max-w-sm    { max-width: 34rem; }

@media print {
  .site-header,
  .mobile-menu,
  .megamenu,
  .site-footer,
  .skip-link {
    display: none !important;
  }
}