/* ==========================================================================
   Media-Leveling – zentrales Stylesheet
   Gliederung:
   1. Custom Properties (Design Tokens)
   2. Lokale Schriftarten (@font-face, deaktiviert bis Dateien vorhanden)
   3. Reset & Grundlagen
   4. Typografie
   5. Layout-Utilities
   6. Barrierefreiheit (Skip-Link, Fokuszustände)
   7. Header & Navigation
   8. Buttons & CTAs
   9. Karten (Leistungen, Referenzen, Preise, FAQ)
   10. Formular (Kontakt)
   11. Footer
   12. Bildcontainer (wiederverwendbar, Hero/Leistungen/Portrait/Referenzen)
   13. Animationen & Scroll-Reveal
   14. Sektionsspezifische Blöcke
   15. Media Queries / Responsive Anpassungen
   16. prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Farben – Designsystem: Anthrazit / Orange / Weiß-Off-White */
  --color-primary: #1C1C1C;
  --color-surface: #262626;
  --color-bg-light: #F5F4EF;
  --color-accent: #EC7C25;
  --color-accent-2: #B0550F;
  --color-text-dark: #111827;
  --color-text-light: #F8FAFC;
  --color-text-muted: #9A9A9A;
  --color-success: #22A95A;
  --color-border: rgba(148, 148, 148, 0.28);
  --color-border-light: rgba(17, 24, 39, 0.1);

  /* WCAG-AA-konforme Varianten von Muted-Text und Akzentfarbe für den
     Einsatz auf hellen Hintergründen (Weiß/Off-White). --color-text-muted
     und --color-accent bleiben unverändert für dunkle Flächen (Header,
     Footer, Hero, Sektionen mit --dark/--surface), wo sie bereits weit
     über dem AA-Grenzwert liegen. Gleiche Farbfamilie (Neutralgrau/Orange),
     nur abgedunkelt für ausreichenden Kontrast auf hellem Grund. */
  --color-text-muted-onlight: #5C5C5C;
  --color-accent-onlight: #B0550F;

  /* Typografie */
  --font-heading: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --fs-h1: clamp(2.2rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.7rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --content-max-width: 1280px;
  --content-padding: clamp(1.25rem, 4vw, 3rem);

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(11, 18, 32, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.12);
  --shadow-lg: 0 16px 48px rgba(11, 18, 32, 0.18);

  /* Übergänge */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Header-Höhe (für Anker-Offsets etc.) */
  --header-height: 84px;
  --header-height-compact: 64px;
}

/* --------------------------------------------------------------------------
   2. Lokale Schriftarten
   Aktivierung erst, wenn die WOFF2-Dateien gemäß assets/fonts/README.txt
   tatsächlich unter assets/fonts/ liegen. Bis dahin greift der
   System-Font-Fallback aus den obigen --font-* Variablen.
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   3. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--color-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

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

/* Kontrastkorrektur: Auf hellen Sektionen (kein --dark/--surface-Hintergrund)
   erhalten Eyebrow-Labels, Lead-Texte und gedämpfte Hinweistexte die
   abgedunkelte, WCAG-AA-konforme Farbvariante. Auf dunklen Sektionen bleiben
   die ursprünglichen, bereits kontraststarken Farben unverändert. */
.section:not(.section--dark):not(.section--surface) .eyebrow {
  color: var(--color-accent-onlight);
}

.section:not(.section--dark):not(.section--surface) .lead,
.section:not(.section--dark):not(.section--surface) .text-muted {
  color: var(--color-text-muted-onlight);
}

/* Unformatierte Fließtext-Listen (ohne eigene Klasse) erhalten dezente
   Aufzählungspunkte in der Akzentfarbe statt Browser-Standardbullets. */
main ul:not([class]) {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-block: var(--space-sm);
}

main ul:not([class]) li {
  position: relative;
  padding-left: 1.4rem;
}

main ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   5. Layout-Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--color-primary);
  color: var(--color-text-light);
}

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

.section--surface {
  background: var(--color-surface);
  color: var(--color-text-light);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

/* Startseite: einheitlicher Hellgrau-Hintergrund und vereinheitlichter
   vertikaler Rhythmus für die Hauptsektionen Leistungen, Referenzen,
   Preise, Ablauf und FAQ. Ausschließlich über diese Klasse gescopt,
   keine andere Seite verwendet sie. */
.section-tint {
  background: #F6F7F8;
}

/* Trust-Bar bleibt als kleinerer Verbindungsbereich bewusst kompakter
   als die vollen Hauptsektionen. */
.trust-bar-section {
  padding-block: var(--space-xl);
}

/* Über-Christoph-Vorschau: bewusstes dunkles Highlight in Anthrazit
   (#1C1C1C) statt des allgemeinen --surface-Tons, damit die Sektion im
   neuen Rhythmus als echter Kontrastpunkt wirkt. Kontrast-Fix für
   Überschriften (betraf bisher sitebreit .section--surface, da diese
   Klasse im Gegensatz zu .section--dark keine eigene Überschriftenfarbe
   definierte) sowie kompaktere Höhe und ein hochwertigeres Bild-Treatment.
   Gescopt auf .about-preview, .section--surface bleibt auf anderen
   Seiten unverändert. */
.about-preview {
  background: var(--color-primary);
  padding-block: var(--space-2xl);
}

.about-preview h2,
.about-preview h3 {
  color: var(--color-text-light);
}

.about-preview .media-frame--portrait {
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}

/* Bildausschnitt korrigiert: Die Person saß im Standard-Zuschnitt
   (object-position: center, geerbt von .media-frame img) zu weit rechts
   im sichtbaren Bereich. Ein niedrigerer object-position-Wert zeigt mehr
   vom linken Bildbereich und rückt die Person optisch mittiger. Nur für
   das Startseiten-Portrait gescopt, ueber-mich.html bleibt unverändert. */
.about-preview .media-frame--portrait img {
  object-position: 60% center;
}

@media (min-width: 900px) {
  .about-preview .hero__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Einheitlicher Abstand für die "Alle … ansehen"-/Abschluss-CTA-Buttons
   auf der Startseite, damit sie als bewusste eigene Aktion wirken statt
   direkt an Karten/Textblöcken zu kleben. Gescoped auf diese vier
   Stellen, .btn selbst bleibt unverändert und wirkt sitebreit gleich. */
.cta-link {
  margin-top: var(--space-lg);
}

/* .btn-secondary ist für dunkle Hintergründe ausgelegt (heller Text).
   Innerhalb der hellen Referenzvorschau braucht der Button daher eine
   dunkel-taugliche Variante – gescoped, .btn-secondary bleibt überall
   sonst unverändert. */
.reference-preview .btn-secondary {
  color: var(--color-text-dark);
  border-color: var(--color-border-light);
}

.reference-preview .btn-secondary:hover {
  color: var(--color-accent-onlight);
  border-color: var(--color-accent-onlight);
}

/* FAQ-Vorschau ist jetzt ebenfalls hell – gleicher Kontrastfix wie bei
   der Referenzvorschau, .btn-secondary bleibt überall sonst unverändert. */
.faq-preview .btn-secondary {
  color: var(--color-text-dark);
  border-color: var(--color-border-light);
}

.faq-preview .btn-secondary:hover {
  color: var(--color-accent-onlight);
  border-color: var(--color-accent-onlight);
}

/* Preisvorschau als visuelles Highlight: Hintergrundbild statt Fläche,
   dunkles Overlay für Lesbarkeit, heller Text/Akzent wie im Hero.
   Nur wirksam, wenn direktes Kind .media-frame--hero vorhanden ist –
   sonst bleibt die Sektion die reguläre .section--dark-Fläche als
   Fallback (kein kaputtes Layout, falls das Bild einmal fehlt). */
.pricing-highlight {
  position: relative;
  overflow: hidden;
}

.pricing-highlight:has(> .media-frame--hero)::before {
  content: none;
}

.pricing-highlight > .media-frame--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
  z-index: 0;
}

.pricing-highlight > .media-frame--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Preisvorschau: drei kompakte Leistungsbereiche als reine Text-Spalten
   statt Karten, nur eine dezente vertikale Trennlinie zwischen den
   Spalten ab Desktop-Breite (auf Mobile stapelt .grid--3 automatisch,
   dort keine Trennlinie nötig). Farbe wie die übrigen dezenten Linien
   der Website, keine neue Farbe. */
.pricing-columns {
  margin-top: var(--space-lg);
}

.pricing-columns h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-3xs);
}

.pricing-columns p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .pricing-columns li {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-md);
  }

  .pricing-columns li:first-child {
    border-left: none;
    padding-left: 0;
  }
}

/* Ablauf als hochwertige Prozess-Roadmap statt Kartenraster: große
   orange Nummern statt kleiner Kreis-Badges, dünne Verbindungslinie mit
   Punkt-Markern, viel Weißraum. Auf Mobile/Tablet (Standardzustand,
   bevor grid--4 vier Spalten nebeneinander schafft) vertikal gestapelt
   mit einer Linie links neben den Nummern; ab 1100px horizontal mit
   zentrierter Linie durch die Punkt-Marker – gleicher Schwellenwert wie
   zuvor, da grid--4 (auto-fit/minmax(220px,1fr)) erst ab ca. 1040px
   Container-Breite sicher vier Spalten bildet. */
.process-list {
  counter-reset: process-step;
  position: relative;
}

.process-card {
  position: relative;
  counter-increment: process-step;
  text-align: left;
  padding-left: 3.5rem;
  padding-bottom: var(--space-lg);
}

.process-card:last-child {
  padding-bottom: 0;
}

.process-card::before {
  content: "0" counter(process-step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--color-accent-onlight);
}

.process-card::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: calc(-1 * var(--space-lg));
  left: 0.9rem;
  width: 2px;
  background: rgba(176, 85, 15, 0.35);
}

.process-card:last-child::after {
  content: none;
}

.process-card h3 {
  font-size: 1.15rem;
  margin-top: 2.75rem;
  margin-bottom: var(--space-3xs);
}

.process-card p {
  color: var(--color-text-muted-onlight);
  font-size: var(--fs-small);
}

@media (min-width: 1100px) {
  .process-card {
    text-align: center;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 4.5rem;
  }

  .process-card::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
  }

  .process-card::after,
  .process-card:last-child::after {
    content: "";
    top: 3.5rem;
    bottom: auto;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    transform: translate(-50%, -50%);
  }

  .process-card h3 {
    margin-top: var(--space-sm);
  }

  .process-list::before {
    content: "";
    position: absolute;
    top: 3.5rem;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(176, 85, 15, 0.35);
    transform: translateY(-50%);
    z-index: 0;
  }
}

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

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Barrierefreiheit
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-sm);
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   7. Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(248, 250, 252, 0.08);
  transition: background-color var(--transition-base), border-color var(--transition-base), padding var(--transition-base);
}

/* Transparenter Header nur für die Startseite: schwebt über dem
   Fullscreen-Hero-Bild und wird beim Scrollen (is-compact) durch
   dieselbe Logik wie auf den übrigen Seiten dunkel hinterlegt. */
.site-header--transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header--transparent.is-compact {
  background: rgba(28, 28, 28, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(248, 250, 252, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  min-height: var(--header-height);
  transition: min-height var(--transition-base);
}

.site-header.is-compact .site-header__inner {
  min-height: var(--header-height-compact);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.site-logo__text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text-light);
}

/* Fallback-Logotype: wird per onerror sichtbar, solange logo.svg fehlt oder
   nicht lädt, damit niemals ein kaputtes Bildsymbol erscheint. */
.site-logo__fallback {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
}

.site-logo__fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.site-logo__fallback-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.main-nav__link {
  color: var(--color-text-light);
  font-weight: 500;
  font-size: var(--fs-small);
  padding-block: var(--space-2xs);
  position: relative;
}

.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text-light);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. Buttons & CTAs
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-small);
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  min-height: 48px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-light);
  border-color: rgba(248, 250, 252, 0.35);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-light {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.btn-light:hover {
  background: var(--color-surface);
}

.btn-block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. Karten
   -------------------------------------------------------------------------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card--dark {
  background: var(--color-surface);
  color: var(--color-text-light);
  border-color: rgba(248, 250, 252, 0.08);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(176, 85, 15, 0.45);
}

/* Leistungskarten: hochwertigere, luftigere Karten mit eigenem Icon-Stil
   statt Farbverlauf-Kachel, dezente Tiefe durch Top-Akzentlinie. */
.card--feature {
  position: relative;
  overflow: hidden;
  border-color: #E8E8E8;
}

.card--feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.card--feature:hover::before {
  transform: scaleX(1);
}

.card--feature .card__icon {
  background: #FFF3E8;
  color: var(--color-accent);
  box-shadow: none;
  margin-bottom: var(--space-2xs);
}

.card--feature a {
  display: inline-block;
  margin-top: var(--space-2xs);
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--fs-small);
}

/* Referenzbereich als modernes Bento-Layout statt Karten (.portfolio-
   bento) – auf der Startseiten-Vorschau und der vollständigen Referenzen-
   Seite verwendet. Jede Kachel ist selbst ein Link (komplette Fläche
   klickbar), keine .card-Basisklasse mehr im Einsatz. Bestehende
   Radien/Schatten-Token, keine neue Farbe. */
.portfolio-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.portfolio-item__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
}

.portfolio-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.portfolio-item:hover .portfolio-item__media img,
.portfolio-item:focus-visible .portfolio-item__media img {
  transform: scale(1.05);
}

.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 60%);
}

.portfolio-item__category {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
  opacity: 0.85;
}

.portfolio-item__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: var(--space-3xs);
  color: var(--color-text-light);
}

/* Referenzen-Seite: dezenter "Projekt ansehen"-Hinweis mit Pfeil, blendet
   erst beim Hover/Fokus ein. Nur gesetzt, wenn das Markup den Hinweis
   enthält (aktuell referenzen.html), sonst ohne Effekt. */
.portfolio-item__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-light);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.portfolio-item:hover .portfolio-item__hint,
.portfolio-item:focus-visible .portfolio-item__hint {
  opacity: 1;
  transform: translateY(0);
}

/* Startseiten-Vorschau: Titel/Kategorie erscheinen erst beim Hover bzw.
   Fokus, damit die Kacheln vorher als reine, ruhige Bildflächen wirken. */
.portfolio-item--reveal-on-hover .portfolio-item__overlay {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.portfolio-item--reveal-on-hover:hover .portfolio-item__overlay,
.portfolio-item--reveal-on-hover:focus-visible .portfolio-item__overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.portfolio-bento .portfolio-item__media {
  aspect-ratio: 4 / 3;
}

.portfolio-bento .portfolio-item--large .portfolio-item__media {
  aspect-ratio: 3 / 2;
}

@media (min-width: 780px) {
  .portfolio-bento {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    height: 520px;
  }

  .portfolio-bento .portfolio-item__media,
  .portfolio-bento .portfolio-item--large .portfolio-item__media {
    aspect-ratio: unset;
  }

  .portfolio-bento > .portfolio-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .portfolio-bento > .portfolio-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-bento > .portfolio-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Referenzen-Seite: eigenes 2-Spalten-Portfolio-Grid, unabhängig von
   .portfolio-bento auf der Startseite – alle vier Felder gleich groß,
   keine Bento-Anordnung. Nutzt dieselben .portfolio-item__*-Bausteine
   (Bild/Overlay/Kategorie/Titel/Hinweis) wie die Startseiten-Vorschau,
   nur der äußere Grid-Layout-Container ist referenzen.html-spezifisch. */
.portfolio-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.portfolio-grid-2col .portfolio-item__media {
  aspect-ratio: 4 / 3;
}

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

/* Platzhalter-Kachel für zukünftige Projekte: kein Link, keine Card,
   nur eine dezent gestrichelte Fläche in gleicher Größe wie die übrigen
   Kacheln. */
.portfolio-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted-onlight);
  font-family: var(--font-heading);
  font-weight: 600;
}

.reference-trust-line {
  margin-top: var(--space-lg);
  text-align: center;
}

/* Über-mich-Seite: kompakteres Section-Raster (analog zur Leistungsseite,
   96px → 80px) sowie ein aufgewertetes Portrait, das dem bereits auf der
   Startseite verwendeten .about-preview-Treatment entspricht. Ausschließlich
   über diese beiden Klassen gescopt, keine andere Seite betroffen. */
.compact-section {
  padding-block: 5rem;
}

/* Persönlicher Vollbild-Hero der Über-mich-Seite: identisches .hero-Muster
   wie die übrigen Unterseiten (Bild + Overlay + linksbündiger, vertikal
   zentrierter Text über .hero__grid, min-height:100vh aus der Basisregel),
   nur mit dem Portrait statt eines Arbeitsplatz-Fotos als Hintergrund.
   Einzige Anpassung: die Bildposition, damit die Person eher rechts im
   Ausschnitt sichtbar bleibt, während der Text links liegt. */
.ueber-mich-hero > .media-frame--hero img {
  object-position: 70% center;
}

.bio-text {
  max-width: 720px;
  margin-top: var(--space-md);
}

/* Info-Box neben dem Bio-Text: nutzt die bestehende .card-Basis (weißer
   Hintergrund, Radius, dezenter Border) unverändert, nur die Typografie
   innerhalb der Box wird ergänzt. Die Liste bleibt unklassiert und erhält
   dadurch automatisch die sitebreite Aufzählungspunkt-Regel. */
.info-box h3 {
  margin-bottom: var(--space-sm);
}

/* Bio-Sektion: reines Weiß statt des sitebreiten Off-White-Grundtons,
   gescopt exakt auf diese eine Sektion der Über-mich-Seite. */
.bio-section {
  background: #FFFFFF;
}

/* Arbeitsweise-Karten dieser Seite: etwas großzügiger als die Standard-
   Leistungskarten (Padding). Keine Nummerierung mehr – Fokus liegt
   bewusst nur auf Icon und Aussage. */
.arbeitsweise-grid .card--feature {
  padding: var(--space-lg);
}

/* Leistungsseite: einheitliches Bild/Text-System für alle drei
   Leistungssektionen (Social Media, Webseiten-Erstellung, Backoffice).
   Das Bild füllt jeweils die volle Höhe der Zeile (statt mit fixem
   Seitenverhältnis mittig zu "schweben"), gleicher Radius, gleiche
   Spaltengewichtung – dadurch wirken alle drei als zusammengehöriges
   System statt als drei unterschiedlich behandelte Einzelfälle.
   Ausschließlich über die bestehenden Section-IDs gescopt – .hero__grid,
   .media-frame--service und die generische Listen-Regel
   (main ul:not([class]), sitebreit im Einsatz) bleiben global unverändert. */
@media (min-width: 901px) {
  #social-media-management .hero__grid,
  #backoffice-unterstuetzung .hero__grid {
    grid-template-columns: 1.08fr 1fr;
    gap: var(--space-lg);
  }

  #webseiten-erstellung .hero__grid {
    grid-template-columns: 1.22fr 1fr;
    gap: var(--space-lg);
  }
}

/* Etwas kompakteres vertikales Grundraster für die drei
   Leistungssektionen (96px → 80px), ohne die globale .section-Regel
   anzutasten, die sitebreit verwendet wird. */
#social-media-management,
#webseiten-erstellung,
#backoffice-unterstuetzung {
  padding-block: 5rem;
}

/* Bild-Wrapper ist bei Social Media/Backoffice das zweite, bei
   Webseiten-Erstellung (Bild links) das erste Kind des Grids. */
#social-media-management .hero__grid > .reveal:last-child,
#backoffice-unterstuetzung .hero__grid > .reveal:last-child,
#webseiten-erstellung .hero__grid > .reveal:first-child {
  align-self: stretch;
}

#social-media-management .media-frame--service,
#webseiten-erstellung .media-frame--service,
#backoffice-unterstuetzung .media-frame--service {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 14px;
}

#social-media-management ul,
#webseiten-erstellung ul,
#backoffice-unterstuetzung ul {
  margin-block-start: var(--space-xs);
}

/* Trust-Bar: moderne Pill-Elemente statt runder Haken-Badges */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text-dark);
}

.trust-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.faq-teaser-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-teaser-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-text-dark);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.faq-teaser-item:last-child {
  border-bottom: none;
}

.faq-teaser-item:hover {
  color: var(--color-accent-onlight);
  transform: translateX(4px);
}

.faq-teaser-item__arrow {
  color: var(--color-accent-onlight);
  flex-shrink: 0;
}

/* Kontaktseite: offener Content-Bereich links neben dem Formular, bewusst
   ohne Card-Fläche, damit die Seite nicht wie zwei gleich schwere Boxen
   wirkt. .contact-steps übernimmt die Nummern-Kreis-Optik von
   .process-card::before (gleiche Farbwerte, keine neue Farbe) als
   kompakte vertikale Liste statt Grid-Karten. Nur auf kontakt.html
   verwendet. */
.contact-intro {
  max-width: 440px;
}

.contact-intro ul {
  margin-top: var(--space-sm);
}

.contact-intro__sub-eyebrow {
  display: block;
  margin-top: var(--space-lg);
}

.contact-steps {
  margin-top: var(--space-md);
}

.contact-steps h4 {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}

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

.contact-steps__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.contact-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(176, 85, 15, 0.08);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent-onlight);
}

/* Schmalere linke Spalte, gleichmäßigere Ausrichtung beider Bereiche und
   ein weniger dominanter Formular-"Card"-Charakter: Rahmen entfernt, die
   weiße Fläche trägt sich allein über den Kontrast zum section-tint-
   Hintergrund. Nur innerhalb von #kontakt-content gescopt. */
#kontakt-content .card {
  border: none;
}

@media (min-width: 900px) {
  #kontakt-content .grid--2 {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   10. Formular
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-weight: 600;
  font-size: var(--fs-small);
}

.form-field .required {
  color: var(--color-accent-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  min-height: 48px;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field small {
  color: var(--color-text-muted-onlight);
  font-size: 0.8rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #C0392B;
}

.form-error-text {
  color: #C0392B;
  font-size: 0.8rem;
}

/* Kontaktseite: Eyebrow-Labels gruppieren das lange Formular optisch in
   "Kontaktdaten" und "Dein Projekt", ohne Feldnamen oder -struktur zu
   ändern. Nur innerhalb von .form-grid gescopt, keine andere Eyebrow-
   Verwendung betroffen. */
.form-grid .eyebrow {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
}

.form-grid .eyebrow:first-of-type {
  margin-top: 0;
}

/* Kontaktseite: Kontaktbox und Formular liegen auf statischen weißen
   Kartenflächen ohne den sonstigen Card-Hover-Lift, da es sich um
   Informations-/Formularcontainer und keine klickbaren Karten handelt.
   Nur über #kontakt-content gescopt, keine andere Seite betroffen. */
#kontakt-content .card:hover {
  transform: none;
  box-shadow: none;
}

/* Scroll-Ziel für die CTA-Links "kontakt.html#kontaktformular-start":
   Abstand nach oben, damit der Formular-Anfang nicht unter dem Sticky-
   Header verschwindet. Nur dieses eine Element betroffen. */
#kontaktformular-start {
  scroll-margin-top: 180px;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.form-checkbox input {
  margin-top: 0.3rem;
  width: 18px;
  height: 18px;
  min-height: auto;
}

/* Honeypot-Feld: für Menschen und Screenreader unsichtbar, aber im DOM erreichbar */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  display: none;
}

.form-status--success {
  display: block;
  background: rgba(34, 169, 90, 0.1);
  border: 1px solid var(--color-success);
  color: #14532d;
}

.form-status--error {
  display: block;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid #C0392B;
  color: #7f1d1d;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-grid h3 {
  color: var(--color-text-light);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.footer-grid ul li {
  margin-bottom: var(--space-2xs);
}

.footer-grid a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  border-top: 1px solid rgba(248, 250, 252, 0.12);
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   12. Bildcontainer (wiederverwendbar)
   -------------------------------------------------------------------------- */
.media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-frame--hero { aspect-ratio: 3 / 2; }
.media-frame--service { aspect-ratio: 4 / 3; }
.media-frame--social-proof { aspect-ratio: 16 / 9; }
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame--reference { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   Platzhalterzustände, solange keine echte Bilddatei eingebunden ist.
   Zwei Varianten:
   - media-frame--placeholder: dekorativer, animierter Fallback für
     illustrative Motive (Hero, Leistungen, Social Proof).
   - media-frame--placeholder-neutral / -portrait: ruhige, flache Flächen
     für Referenzbilder und das Portrait – dürfen niemals wie ein echtes
     Foto oder ein echter Screenshot wirken.
   -------------------------------------------------------------------------- */
.media-frame--placeholder,
.media-frame--placeholder-neutral,
.media-frame--placeholder-portrait {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dekorativer Fallback: Verlaufsflächen + abstrakte Linien/Karten-Ebenen */
.media-frame--placeholder {
  background:
    radial-gradient(circle at 22% 24%, rgba(236, 124, 37, 0.16), transparent 45%),
    radial-gradient(circle at 78% 70%, rgba(176, 85, 15, 0.14), transparent 50%),
    var(--color-surface);
  background-size: 200% 200%;
  animation: media-placeholder-drift 14s ease-in-out infinite;
  overflow: hidden;
}

.media-frame--placeholder::before,
.media-frame--placeholder::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-md);
  border: 1px solid rgba(248, 250, 252, 0.14);
  background: rgba(248, 250, 252, 0.04);
}

.media-frame--placeholder::before {
  width: 46%;
  height: 30%;
  top: 14%;
  left: 8%;
  transform: rotate(-6deg);
}

.media-frame--placeholder::after {
  width: 34%;
  height: 40%;
  bottom: 10%;
  right: 10%;
  transform: rotate(8deg);
}

@keyframes media-placeholder-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 20% 15%, 80% 85%, 0 0; }
}

.media-frame__placeholder-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-md);
}

.media-frame__placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(248, 250, 252, 0.08);
  color: var(--color-accent);
}

.media-frame--placeholder .media-frame__placeholder-text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Neutrale Fläche für Referenzbilder – bewusst flach, ohne Illustration */
.media-frame--placeholder-neutral {
  background: var(--color-surface);
  border: 1px solid rgba(248, 250, 252, 0.1);
}

/* Hero-Platzhalter bewusst ruhiger/neutraler als die übrigen dekorativen
   Platzhalter: kein Farbverlauf-Duo, keine Animation – da hier zeitnah ein
   echtes Foto einzieht, soll die Fläche nicht wie eine fertige Illustration
   wirken. */
.media-frame--hero.media-frame--placeholder {
  background: linear-gradient(155deg, var(--color-surface) 0%, var(--color-primary) 100%);
  animation: none;
}

.media-frame--hero.media-frame--placeholder::before,
.media-frame--hero.media-frame--placeholder::after {
  border-color: rgba(248, 250, 252, 0.08);
  background: rgba(248, 250, 252, 0.02);
}

.media-frame--hero.media-frame--placeholder .media-frame__placeholder-icon {
  background: rgba(248, 250, 252, 0.06);
  color: var(--color-text-muted);
}

.media-frame--placeholder-neutral .media-frame__placeholder-icon {
  width: 44px;
  height: 44px;
  background: rgba(248, 250, 252, 0.06);
  color: var(--color-text-muted);
}

.media-frame--placeholder-neutral .media-frame__placeholder-text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Ruhige Fläche für das Portraitfoto */
.media-frame--placeholder-portrait {
  background: linear-gradient(165deg, var(--color-surface), var(--color-primary));
  flex-direction: column;
  gap: var(--space-2xs);
}

.media-frame--placeholder-portrait .media-frame__placeholder-icon {
  width: 56px;
  height: 56px;
  background: rgba(248, 250, 252, 0.08);
  color: var(--color-accent);
}

.media-frame--placeholder-portrait .media-frame__placeholder-text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Kennzeichnung für KI-generierte Illustrationsbilder, standardmäßig ausgeblendet */
.ai-image-disclosure {
  display: none;
  position: absolute;
  bottom: var(--space-2xs);
  right: var(--space-2xs);
  background: rgba(11, 18, 32, 0.75);
  color: var(--color-text-light);
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.media-frame.is-ai-labeled .ai-image-disclosure {
  display: block;
}

/* --------------------------------------------------------------------------
   13. Animationen & Scroll-Reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  z-index: 1000;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-border);
}

.marquee__track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: marquee 32s linear infinite;
  padding-block: var(--space-sm);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   14. Sektionsspezifische Blöcke (Grundgerüst, Feininhalte folgen)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(236, 124, 37, 0.10), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(180deg, transparent 60%, rgba(248, 250, 252, 0.03));
  pointer-events: none;
}

/* Fullscreen-Bild-Hero (nur Startseite): Das bestehende .media-frame--hero
   wird, wenn es direktes Kind von .hero ist, zur vollflächigen
   Hintergrundebene statt zur Grid-Spalte. Die generische Glow-Ebene aus
   .hero::before / .section--dark::before wird nur deaktiviert, wenn
   tatsächlich ein Hero-Foto vorhanden ist (aktuell nur Startseite) – auf
   Unterseiten ohne eigenes Bild bleibt der dezente Orange-Glow aktiv. */
.hero.section--dark:has(> .media-frame--hero)::before {
  content: none;
}

.hero > .media-frame--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
  z-index: 0;
}

.hero > .media-frame--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Linksbetonter Verlauf statt Fläche: Die rechte Bildhälfte bleibt im
     gewünschten dezenten Rahmen (rgba 0,0,0 0.28–0.4), die Textzone links
     erhält zusätzliche Abdunkelung, da das Foto dort einen hellen
     Fensterbereich zeigt und ein einheitliches Overlay dort nicht
     zuverlässig genug Kontrast für den Text liefern würde. */
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.58) 35%,
    rgba(0, 0, 0, 0.4) 65%,
    rgba(0, 0, 0, 0.28) 100%
  );
}

.hero .hero__grid {
  display: block;
  max-width: 760px;
}

/* Ab Desktop-Breite: Hero-Content etwas weiter in den dunkleren
   Bildbereich verschieben und mit einer lokalen, weichen
   Lesbarkeits-Ebene hinterlegen. Mobile Darstellung bleibt dadurch
   unverändert, da diese Regeln erst ab 1024px greifen. */
@media (min-width: 1024px) {
  /* Höhere Spezifität (.hero.section--dark statt nur .hero) nötig, da
     ".section--dark > .container" weiter unten im Stylesheet dieselbe
     Spezifität hat und sonst "position" wieder auf "relative"
     zurücksetzen würde. */
  .hero.section--dark .hero__grid {
    position: absolute;
    top: 55%;
    left: clamp(80px, 8vw, 120px);
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    max-width: min(760px, calc(100vw - 240px));
  }

  /* Kein sichtbarer Kasten/Container – nur ein weich auslaufender
     dunkler Verlauf lokal hinter dem Content, unabhängig vom
     jeweiligen Bildbereich. */
  .hero .hero__grid::before {
    content: "";
    position: absolute;
    inset: -3rem -4rem;
    z-index: -1;
    background: radial-gradient(
      ellipse 65% 60% at 30% 45%,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.28) 55%,
      transparent 80%
    );
    pointer-events: none;
  }

  .hero .lead {
    max-width: 600px;
    color: var(--color-text-light);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  }

  .hero h1 {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

/* Dunkle CTA-/Abschluss-Sektionen: dezenter Glow für mehr Tiefe */
.section--dark {
  position: relative;
  overflow: hidden;
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(236, 124, 37, 0.08), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.04), transparent 45%);
  pointer-events: none;
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.breadcrumb {
  font-size: var(--fs-small);
  color: var(--color-text-muted-onlight);
  padding-block: var(--space-sm);
}

.breadcrumb a:hover {
  color: var(--color-accent-onlight);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}

/* FAQ-Seite: Die Akkordeon-Liste sitzt in einer weißen Karte auf dem
   hellgrauen section-tint-Hintergrund, analog zum Kartensystem der
   anderen Unterseiten. .faq-card nutzt die bestehende .card-Basis
   (Weiß, Border, Radius), deaktiviert aber deren Hover-Lift, da hier
   ein statischer Container mit eigenen interaktiven Buttons liegt statt
   einer klickbaren Karte. Ausschließlich auf faq.html verwendet. */
.faq-card {
  padding-block: var(--space-xs);
}

.faq-card:hover {
  transform: none;
  box-shadow: none;
}

.faq-card .accordion-trigger {
  padding-block: var(--space-md);
}

.accordion-icon {
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.accordion-panel[data-open="true"] {
  padding-bottom: var(--space-sm);
  /* Fallback ohne JavaScript: Inhalt bleibt sichtbar, JS überschreibt den
     Wert anschließend mit der tatsächlichen scrollHeight für die Animation. */
  max-height: none;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.price-card__gross {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-primary);
}

.price-card__net {
  color: var(--color-text-muted-onlight);
  font-size: var(--fs-small);
}

/* Dezente Empfehlungsmarkierung: kein Verkaufsbadge, sondern ein ruhiger
   Hinweis in der bestehenden Akzentfarbe. Ändert weder Preis noch
   Kartenstruktur, hebt die Karte lediglich leicht optisch ab. */
.price-card--recommended {
  border-color: rgba(236, 124, 37, 0.4);
  box-shadow: var(--shadow-md);
}

.price-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: rgba(236, 124, 37, 0.14);
  border: 1px solid rgba(236, 124, 37, 0.4);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.price-card .price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.price-card .price-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-small);
  color: var(--color-text-dark);
}

.price-card .price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* Backoffice-Karten auf preise.html haben keine Leistungsliste und wirken
   dadurch neben den Karten mit price-list optisch leer. Da keine neuen
   Inhalte ergänzt werden sollen, gleicht diese Klasse die Kartenhöhe
   ausschließlich über Verteilung des vorhandenen Inhalts aus (Grid-Zeile
   ist ohnehin gleich hoch). Nur preise.html verwendet diese Klasse. */
.price-card--balanced {
  justify-content: space-between;
  min-height: 100%;
}

/* Preise-Seite: mehr visueller Rhythmus zwischen den drei Preiskategorien.
   Größerer Abstand zwischen Sektionskopf und Karten sowie ein etwas
   großzügigerer Kartenabstand, damit das Karten-Raster nicht wie eine
   Tabelle wirkt. Ausschließlich über die drei Preis-Sektions-IDs gescopt,
   keine andere Seite betroffen. */
#preise-social-media .section-head,
#preise-webseiten .section-head,
#preise-backoffice .section-head {
  margin-bottom: var(--space-xl);
}

#preise-social-media .grid,
#preise-webseiten .grid,
#preise-backoffice .grid {
  gap: var(--space-lg);
}

/* Preise-Seite: Social-Media- und Backoffice-Sektion sollen reines Weiß
   zeigen statt des sitebreiten Beige-Bodyhintergrunds (--color-bg-light),
   der sonst durch die unbestimmte .section-Fläche durchscheint. Nur für
   preise.html über die Sektions-IDs überschrieben, .section und body
   bleiben global unverändert. */
#preise-social-media,
#preise-backoffice {
  background: #FFFFFF;
}

/* --------------------------------------------------------------------------
   15. Responsive Anpassungen
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .main-nav,
  .header-actions .btn-secondary {
    display: none;
  }

  .main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid rgba(248, 250, 252, 0.1);
    padding: var(--space-md) var(--content-padding);
  }

  .main-nav.is-open .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  /* Hero bleibt auch auf kleinen Smartphones vollflächig (min-height: 100vh
     aus der Basisregel), lediglich der Innenabstand wird kompakter. */
  .hero {
    padding-block: var(--space-lg) var(--space-md);
  }

  .hero__grid {
    gap: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   16. prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
  }
}