/* =====================================================================
   datasistas Unternehmensberatung – styles.css
   Designsprache: übertragene MUSTER der Referenz x1F.
   Basis Schwarz/Weiß + EIN Akzent (Beere-Magenta). Mono-Display + Sans-Body.
   Mobile-First (ab 360px). WCAG 2.2 AA: Fokus sichtbar, Kontrast ≥ 4,5:1,
   reduced-motion respektiert.
   ===================================================================== */

/* --------------------------- 1 · Selbst gehostete Fonts (DSGVO) --------------------------- */
/* Kein Google-Fonts-CDN. Dateien liegen lokal in assets/fonts/.
   Fallbacks (system-ui / monospace) greifen, bis die woff2 vorliegen. */
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --------------------------- 2 · Design-Tokens --------------------------- */
:root {
  /* Farben */
  --ink:            #000000;   /* Schwarz  */
  --paper:          #ffffff;   /* Weiß     */
  --accent:         #ff5ac0;   /* Beere-Magenta – Akzent (AAA auf Schwarz & mit schwarzem Text) */
  --accent-ink:     #000000;   /* Text auf Akzentfläche = Schwarz (AAA) */
  --accent-deep:    #5a0038;   /* dunkles Beere für Feindetails auf Akzent */

  /* Grautreppe für gestapelte Säulen (Text bleibt schwarz → Kontrast sicher) */
  --g1:  #f4f4f4;
  --g2:  #e6e6e6;
  /* Hintergrund Leistungen (Header + 3 Säulen + Zwischenraum). Mittelgrau; Weiß = #ffffff, heller = var(--g1), dunkler = var(--g3) */
  --leistungen-bg: #ffffff; /* Weiß; Alternativen: var(--g1) #f4f4f4, var(--g2) #e6e6e6, var(--g3) #d6d6d6 */
  --g3:  #d6d6d6;
  /* Hintergrund hinter den Säulen: sichtbar im Spalt beim seitlichen
     Reveal, deutlich dunkler als alle drei Säulen-Grautöne, damit es sich immer abhebt. */
  --g-bg: #bfbfbf;
  /* Header-Hintergrund der Leistungssäulen-Sektion: heller als --g-bg, aber
     bewusst kein identischer Ton zu g1/g2/g3 (eigenständige, mittlere Stufe). */
  --g-header: #cacaca;

  /* Textfarben auf hellem Grund */
  --text:           #111111;   /* Body auf Weiß (>= 16:1) */
  --text-muted:     #4a4a4a;   /* gedämpft, weiterhin ≥ 7:1 auf Weiß */

  /* Textfarben auf dunklem Grund */
  --on-dark:        #f2f2f2;
  --on-dark-muted:  #bdbdbd;   /* ≥ 4,5:1 auf Schwarz */

  /* Typografie */
  --font-display: "Space Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fließende Typo-Skala (min → max via clamp), Mobile-First */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-1-5: clamp(1.5rem, 1.35rem + 0.65vw, 1.9rem);   /* zwischen step-1 und step-2: Zwischenüberschriften über Fließtext in step-1 */
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* Abstände */
  --space-xs: .5rem;
  --space-s:  1rem;
  --space-m:  1.75rem;
  --space-l:  3rem;
  --space-xl: 5rem;
  --maxw:     1200px;
  --pad-x:    clamp(1.25rem, 5vw, 4rem);
  --radius:   0;               /* Referenz-DNA: harte Ecken */
}

/* --------------------------- 3 · Reset / Basis --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Sprungziele landen bündig UNTER dem sticky Header (Höhe wird in main.js gemessen) */
  scroll-padding-top: var(--header-h, 4.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Globaler Schutz gegen horizontales Scrollen durch die seitlichen
     Scroll-Reveal-Effekte (Themen-Karten, Leistungssäulen – siehe dort).
     Bewusst HIER statt auf den einzelnen Containern: ein overflow-x:clip
     direkt auf .card-grid/.pillars schnitt das jeweils erste/letzte Element
     exakt an dessen eigener Boxkante ab, weil die Slide-Distanz (3rem)
     dort auf keinerlei Puffer traf – sichtbar als "abgeschnittene" Karte/Box
     während der Einfahr-Animation (Bug, 08.10.2026). Am Viewport-Rand ist
     dagegen auf Desktop (--pad-x bis 4rem) meist gar kein Clipping mehr
     nötig, auf Mobile nur ein minimaler, gleichmäßiger Rest statt einer
     hart geschnittenen Kante mitten im Element.
     overflow-x:clip hat im Gegensatz zu overflow-x:hidden keine Nebenwirkung
     auf position:sticky-Elemente und erzeugt keine neue Scroll-Container. */
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }

/* --------------------------- 4 · Accessibility-Helfer --------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-s); top: -3rem; z-index: 999;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700;
  padding: .6rem 1rem; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-s); }

/* Sichtbarer Tastatur-Fokus überall (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Auf Akzentflächen kontrastierender Fokus */
.trust :focus-visible,
.btn--primary:focus-visible { outline-color: var(--ink); }

/* --------------------------- 5 · Layout-Grundlagen --------------------------- */
main { display: block; }

section { padding-inline: var(--pad-x); }
.section-head { max-width: none; margin-inline: 0; padding-block: var(--space-l) var(--space-m); text-align: left; }
.section-head--pad { padding-top: var(--space-xl); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--text-muted); margin-top: var(--space-s); font-size: var(--step-1); max-width: 60ch; }

/* --------------------------- 6 · Buttons / CTA --------------------------- */
/* "Sweep-Fill": Umriss-Button, Akzentfläche läuft beim Hover/Fokus von links
   ins Innere (vorab mit 3 weiteren Richtungen illustriert, Option A
   freigegeben 09.10.2026). Alle aktuellen Einsatzorte (Hero, Kontaktformular,
   Cookie-Hinweis) liegen auf dunklem Hintergrund (var(--ink)), daher startet
   der Button transparent mit hellem Text/Akzent-Kontur und füllt sich zu
   Akzent-Pink mit dunklem Text (gleiche Kontrast-Kombination wie zuvor). */
.btn {
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; gap: .6ch;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  text-decoration: none; border: 2px solid var(--ink);
  padding: .8rem 1.4rem; background: var(--ink); color: var(--paper);
  cursor: pointer;
}
.btn--primary {
  background: transparent; color: var(--on-dark); border-color: var(--accent);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: scaleX(1); }
.btn--primary:hover,
.btn--primary:focus-visible { color: var(--accent-ink); }
.btn__arrow { transition: transform .32s cubic-bezier(.65,0,.35,1); }
.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn__arrow { transition: none; }
}

/* "Ablehnen"-Variante des Cookie-Hinweises: gleiche Größe/Form wie
   .btn--primary (WCAG/TTDSG-Anforderung: Ablehnen muss genauso leicht zu
   finden und zu bedienen sein wie Annehmen, nicht als kleiner/versteckter
   Link), aber neutral statt Akzent-Pink, damit optisch klar bleibt, welcher
   Button die "positive" Wahl ist. Freigegeben 12.10.2026. */
.btn--ghost {
  background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted);
}
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--on-dark-muted);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.btn--ghost:hover::before,
.btn--ghost:focus-visible::before { transform: scaleX(1); }
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .btn--ghost::before { transition: none; }
}

/* --------------------------- 7 · Header / Nav --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-s) var(--pad-x);
  background: var(--ink); color: var(--paper);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  text-decoration: none; color: var(--paper); letter-spacing: -0.02em;
}
.wordmark b { color: var(--accent); font-weight: 700; }

/* Schwebender Menü-Button (Referenz-Muster): Akzent-Chip */
.menu-toggle {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0;
  background: var(--accent); border: none; cursor: pointer;
}
.menu-toggle__icon { display: grid; gap: 4px; }
.menu-toggle__icon span { display: block; width: 22px; height: 2px; background: var(--accent-ink); }

/* Rollen-Zeile: jetzt Teil von „Zu meiner Person" (unter dem Portrait,
   volle Breite der Sektion), nicht mehr vor dem Hauptinhalt – stand dort
   optisch wie ein Hero-Untertitel, war aber keiner (Korrektur 08.10.2026).
   Border oben/unten grenzt sie vom gleichfarbigen Sektionshintergrund ab. */
.roles-banner {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  padding: var(--space-s) 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-s);
}
.roles-banner .dot { color: var(--accent); }
/* "Scanning Akzent-Linie": ein schmaler, heller Lichtstreifen wandert dauerhaft
   durch den Hintergrund der Zeile (Vorschau freigegeben 08.10.2026). Der Text
   bleibt ruhig; nur der Hintergrund "lebt" durchgehend, kein Scroll-Trigger nötig. */
.roles-banner::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 192, .35), transparent);
  animation: scan-sweep 3.6s linear infinite;
}
@keyframes scan-sweep {
  from { left: -40%; }
  to   { left: 100%; }
}
.roles-banner span { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .roles-banner::before { animation: none; display: none; }
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--paper);
  display: grid; overflow-y: auto;            /* 8 Einträge: bei niedrigen Viewports scrollbar */
  padding: var(--space-l) var(--pad-x);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay ul { display: grid; gap: var(--space-s); text-align: center; margin: auto; } /* margin:auto = „sicher“ zentriert */
@media (max-height: 48rem) {
  .nav-overlay ul { gap: var(--space-xs); }
  .nav-overlay a  { font-size: var(--step-2); }
}
.nav-overlay a {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.2;
  text-decoration: none; color: var(--paper);
}
.nav-overlay a:hover, .nav-overlay a:focus-visible { color: var(--accent); }
.nav-overlay a[aria-current="page"] { color: var(--accent); }   /* aktuelle Seite (Impressum/Datenschutz) */

/* --------------------------- 8 · Registermarke & Akzent-Chip --------------------------- */
/* Kleine versetzte Marke (Referenz-Deko) */
.accent-chip {
  position: relative;
  display: inline-block; width: 3.25rem; height: 3.25rem;
  background: var(--accent);
  background-repeat: no-repeat; background-position: center; background-size: 56%;
}
/* Registermarke unten links */
.accent-chip::before {
  content: ""; position: absolute; left: -.6rem; bottom: -.6rem;
  width: .9rem; height: .9rem; background: var(--ink);
}
/* In den Themen-Karten: Registermarke in der Farbe des Kartentextes (--on-dark-muted) */
.card .accent-chip::before { background: var(--on-dark-muted); }
.accent-chip--lg { width: min(18rem, 60vw); height: min(18rem, 60vw); background-size: 70%; }

/* Motiv-Icons als schwarze SVG (data-URI) auf dem Magenta-Chip.
   Eigene, einfache Formen – keine Referenz-Assets. */
.accent-chip[data-art="db"]     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Cellipse cx='24' cy='11' rx='15' ry='6'/%3E%3Cpath d='M9 11v13c0 3.3 6.7 6 15 6s15-2.7 15-6V11'/%3E%3Cpath d='M9 24v13c0 3.3 6.7 6 15 6s15-2.7 15-6V24'/%3E%3C/svg%3E"); }
.accent-chip[data-art="skill"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='24' cy='20' r='11'/%3E%3Cpath d='M19 34h10M20 39h8'/%3E%3Cpath d='M24 9v3M13 20h-3M38 20h-3'/%3E%3C/svg%3E"); }
.accent-chip[data-art="growth"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M8 40V22M20 40V14M32 40V26M44 40V8'/%3E%3Cpath d='M36 8h8v8'/%3E%3C/svg%3E"); }

/* --------------------------- 9 · Raster-Texturen (x / Punkte) --------------------------- */
.raster { pointer-events: none; }
.raster--dots {
  --d: #2a2a2a;
  background-image: radial-gradient(var(--d) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.raster--x {
  --x: rgba(0,0,0,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctext x='2' y='12' font-family='monospace' font-size='12' fill='%23000' fill-opacity='0.18'%3Ex%3C/text%3E%3C/svg%3E");
  background-size: 16px 16px;
}

/* --------------------------- 10 · HERO --------------------------- */
.hero {
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-l);
  padding-block: var(--space-xl);
  align-items: center;
}
.hero__title { font-size: var(--step-4); color: var(--on-dark); }
.accent-dot { color: var(--accent); }
.hero__lead {
  margin-top: var(--space-m); max-width: 42ch;
  color: var(--on-dark-muted); font-size: var(--step-1); line-height: 1.5;
}
.hero .btn { margin-top: var(--space-m); }
.hero__art { position: relative; display: grid; place-items: center; min-height: 12rem; }
/* Marken-Schriftzug (Brush-Wortmarke), quadratisches Bild, waagerecht */
.hero__wordmark { display: block; width: 100%; max-width: 560px; }
.hero__wordmark img { width: 100%; height: auto; display: block; }

/* "Wirbel-Dreh": dreht sich EINMALIG um 360° mit kurzem Hochskalieren in der
   Drehmitte ("Swoosh"), landet wieder scharf ausgerichtet und bleibt dann
   stehen (freigegeben 12.10.2026 – vorher: Loop alle 10 s, erster Dreh
   sofort beim Laden). Jetzt: Start erst 10 s nach dem Laden (zuvor 15 s, geändert 12.10.2026)
   (animation-delay), Ablauf etwas gemächlicher (1,8 s statt vormals rund
   1,2 s Spin-Zeit), läuft nur einmal (iteration-count 1, kein infinite
   mehr). */
@keyframes hero-whirl {
  0%        { transform: rotate(0deg)   scale(1); }
  45%       { transform: rotate(200deg) scale(1.12); }
  100%      { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__wordmark { animation: hero-whirl 1.8s cubic-bezier(.3,.7,.3,1) 10s 1 both; }
}

@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.2fr .8fr; }
}

/* --------------------------- 11 · FOKUS-STATEMENT --------------------------- */
.fokus {
  position: relative; background: var(--paper);
  padding-block: var(--space-xl); overflow: hidden;
}
.fokus .raster--x {
  /* Durchgezogen über die gesamte Breite (kein Fade-out mehr), auf Wunsch
     der Betreiberin: vorher per Masken-Gradient nur links sichtbar. */
  position: absolute; inset: 0; opacity: .5;
}
.fokus__body { position: relative; max-width: 46ch; margin-inline: auto; text-align: center; }
.highlight-box {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1.1; padding: .3em .5em; position: relative;
}
.highlight-box::before { /* Registermarke */
  content: ""; position: absolute; left: -.7rem; bottom: -.7rem;
  width: 1rem; height: 1rem; background: var(--ink);
}
.fokus__lead { margin-top: var(--space-m); font-family: var(--font-display); font-size: var(--step-1); }
.fokus__text { margin-top: var(--space-s); color: var(--text-muted); max-width: 44ch; margin-inline: auto; }

/* --------------------------- 12 · THEMEN-GRID --------------------------- */
.themen { background: var(--paper); padding-bottom: var(--space-xl); }
.card-grid {
  display: grid; gap: var(--space-l);
  max-width: var(--maxw); margin-inline: auto;
  grid-template-columns: 1fr;
  /* Kein eigenes overflow-x:clip mehr hier (schnitt die erste Karte an ihrer
     eigenen Boxkante ab, siehe Kommentar bei body { overflow-x: clip }). */
  --reveal-step: 700ms; /* schnelleres Stagger-Tempo als die Leistungssäulen (1500ms) */
}
.card {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding: var(--space-m); padding-top: var(--space-l);
}
.card::after { /* Registermarke unten links */
  content: ""; position: absolute; left: -.5rem; bottom: -.5rem;
  width: 1rem; height: 1rem; background: var(--accent);
  transition: box-shadow .25s ease;
}
/* Effekt 4 (Vorschau): sanfter Glow/Pulse der Registermarke beim Hover der Karte */
@media (prefers-reduced-motion: no-preference) {
  .card:hover::after {
    box-shadow: 0 0 0 4px rgba(255, 90, 192, .25), 0 0 16px 4px rgba(255, 90, 192, .55);
    animation: registermarke-pulse 1.6s ease-in-out infinite;
  }
  @keyframes registermarke-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 90, 192, .25), 0 0 16px 4px rgba(255, 90, 192, .55); }
    50% { box-shadow: 0 0 0 7px rgba(255, 90, 192, .12), 0 0 24px 9px rgba(255, 90, 192, .35); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover::after { box-shadow: 0 0 0 4px rgba(255, 90, 192, .35); }
}
.card .accent-chip { margin-bottom: var(--space-m); }
.card__title { color: var(--accent); font-size: var(--step-1); }
.card__text { margin-top: var(--space-s); color: var(--on-dark-muted); font-size: var(--step-0); }

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

/* --------------------------- 13 · BILD-SEKTION (Klammer-Overlay) --------------------------- */
.feature-image {
  position: relative; padding: 0;
  /* Feste, moderate Höhe; das Bild füllt die Section vollflächig (cover) */
  height: clamp(18rem, 50vw, 42rem);
  display: grid; overflow: hidden;
}
.feature-image__media { position: absolute; inset: 0; display: block; }
.feature-image__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.feature-image__overlay {
  position: relative; grid-area: 1 / 1; align-self: end; justify-self: stretch; width: 100%;
  padding: var(--pad-x);
  /* Verlauf sichert Lesbarkeit über die gesamte Breite */
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.bracket {
  font-family: var(--font-display); font-weight: 700; color: var(--paper);
  font-size: var(--step-3); line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.bracket__open, .bracket__close, .bracket__op, .bracket__eq { color: var(--accent); }
.bracket__op { margin-inline: .35em; }
.bracket__eq { margin-right: .3em; }

/* --------------------------- 14 · LEISTUNGSSÄULEN (gestapelt) --------------------------- */
.pillars {
  /* Kein eigenes overflow-x:clip mehr hier (schnitt die Säulen an der
     eigenen Boxkante ab, siehe Kommentar bei body { overflow-x: clip }). */
  padding-inline: 0;
  background: var(--leistungen-bg); /* einheitlich Grau (--g2 = #e6e6e6) wie Header+Säulen; sichtbar im Spalt beim seitlichen Reveal, statt Weiß */
  --reveal-step: 150ms; /* deutlich schnelleres Stagger-Tempo, auf Wunsch der Betreiberin */
}
.pillars .section-head { padding-inline: var(--pad-x); background: var(--leistungen-bg); color: var(--ink); border-top: 12px solid var(--accent); border-bottom: 12px solid var(--accent); } /* weiß mit fetter pinker Linie oben und unten, Wunsch 12.10.2026 */
.pillars .section-head h2 { color: var(--ink); }
.pillars .section-head p { color: var(--ink); }
/* Hintergrundmuster (Wunsch 12.10.2026, Punktraster, geändert): pinkes Punktraster wie in „Über mich“,
   rechts am dichtesten, nach links ausblendend. Rein
   dekorativ (::before, hinter dem Text), Text bleibt auf Weiß/sehr hellem Rosa lesbar. */
.pillars .section-head { position: relative; isolation: isolate; }
.pillars .section-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,90,192,.8) 2px, transparent 2.4px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to left, #000 5%, transparent 75%);
          mask-image: linear-gradient(to left, #000 5%, transparent 75%);
}
.pillar {
  display: grid; gap: var(--space-m);
  padding: var(--space-l) var(--pad-x);
  align-items: start;
}
/* Alle drei Säulen hellgrau (--g1, Änderung 12.10.2026) mit fetter pinker Linie unten (Wunsch 12.10.2026) */
.pillar--1, .pillar--2, .pillar--3 { background: var(--leistungen-bg); border-bottom: 12px solid var(--accent); }
.pillar__mark { position: relative; }
/* Vollflächiger diagonaler Hintergrund (freigegebene Gestaltungsoption) erst
   ab Tablet/Desktop (siehe Media Query unten) – mobil/gestapelt bleibt die
   bewährte Darstellung mit dem pinken Icon-Chip, siehe Begründung dort. */
.pillar__wedge { display: none; }
.pillar__mark-desktop { display: none; }
.pillar__title { font-size: var(--step-2); }
.pillar__sub { font-family: var(--font-display); color: var(--accent-deep); margin-top: .3rem; }
/* max-width 100ch statt 60ch: Stichpunkte brechen nur noch um, wenn wirklich kein Platz ist (Wunsch 13.10.2026) */
.pillar__list { margin-top: var(--space-m); display: grid; gap: .7rem; max-width: 100ch; }
.pillar__list li { position: relative; padding-left: 1.6rem; }
.pillar__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .7rem; height: .7rem; background: var(--accent);
}
.pillar__close { margin-top: var(--space-m); font-family: var(--font-display); font-weight: 700; }

@media (min-width: 52rem) {
  /* Leistungssäulen ab Tablet/Desktop: vollflächiger diagonaler Hintergrund,
     freigegebene Gestaltungsoption (vorab als Skizze geprüft). Bewusst nur ab
     diesem Breakpoint: in der schmalen, gestapelten Mobilansicht ergibt eine
     Diagonale keinen gestalterischen Sinn und eine feste Blockhöhe würde bei
     umbrechendem Text und wenig Platz riskieren, Inhalte abzuschneiden
     (Mobile-First-Anforderung) – dort bleibt daher der bisherige pinke
     Icon-Chip erhalten.
     „min-height" statt fester „height": die Höhe wurde in der Vorschau anhand
     gekürzter Beispieltexte festgelegt; die echten Listen sind teils länger
     (bis zu 6 Punkte). „min-height" übernimmt denselben Wert für alle drei
     Säulen (optisch identisch zur Freigabe), verhindert aber zuverlässig,
     dass längerer Text abgeschnitten wird, falls er mehr Platz braucht. */
  .pillar {
    display: block; padding: 0;
    position: relative; overflow: hidden;
    min-height: 24rem; /* ≈ 384px, statt 330px aus der Vorschau mit Kürzungen */
  }
  /* Diagonale noch einmal schmaler gemacht: 10 % statt 18 % Breite (vorab
     mit 2 Varianten – volles Pink / gedämpftes Bordeaux – illustriert,
     "10 %, volles Pink" freigegeben 09.10.2026). Gleicher Winkel
     (clip-path unverändert). Icon-Box UND ihr Abstand zum Rand sind jetzt
     zusätzlich mit clamp()/vw an die Säulenbreite gekoppelt statt fixer
     px-Werte – rechnerisch geprüft, dass die Box bei keiner Bildschirmbreite
     ab 52rem (auch nicht am unteren Rand, wo die Diagonale am schmalsten
     ist) über den rechten Rand der Diagonale hinausragt (Nachfrage vom
     09.10.2026). Textspalten-Einzug entsprechend angepasst. */
  .pillar__wedge {
    display: block; position: absolute; inset: 0; width: 16%;
    background: var(--accent);
    /* Fächer aus 3 Diagonalen (freigegeben 12.10.2026): oben breit, alle
       laufen unten links in EINER Spitze zusammen. Die Spitze (0 100%) wird
       zwischen den Streifen mehrfach angefahren (Nullbreiten-Nähte). */
    clip-path: polygon(0 0, 60% 0, 0 100%, 74% 0, 84% 0, 0 100%, 92% 0, 100% 0, 0 100%);
  }
  .pillar__mark {
    position: absolute; top: 2rem; left: clamp(.6rem, 1.2vw, 1.5rem); z-index: 1;
    width: clamp(40px, 6.5vw, 76px); height: clamp(40px, 6.5vw, 76px);
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
  .pillar__mark-mobile { display: none; }
  .pillar__mark-desktop {
    display: block; color: var(--accent);
    width: clamp(20px, 3.2vw, 34px); height: auto;
  }
  .pillar__content {
    position: relative; height: 100%; box-sizing: border-box;
    padding: 1.5rem var(--pad-x) 1.5rem calc(16% + var(--space-m));
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* --------------------------- 15 · ÜBER MICH --------------------------- */
.about {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-l);
  padding-block: var(--space-xl);
}
/* Dekoratives Punktraster, nur auf der rechten Seitenhälfte – Option 1 der
   Gestaltungsvorschau: akzentfarben (Pink) statt weiß und deutlich kräftiger,
   damit es neben dem Portrait wirklich sichtbar ist (die vorherige
   Weiß-auf-Schwarz-Variante bei 14 % Deckkraft war praktisch unsichtbar). */
.about__raster {
  /* z-index:-1 verhindert, dass das Muster (obwohl im Markup vor dem Portrait
     stehend) über das Foto gelegt wird: ein position:absolute-Element stapelt
     sich sonst unabhängig von der Reihenfolge im Code über normal fließende
     Inhalte wie das <picture>-Portrait – genau das sah „falsch" aus. */
  position: absolute; inset: 0; left: 50%; z-index: -1;
  background-image: radial-gradient(rgba(255,90,192,.55) 2.5px, transparent 2.7px);
  background-size: 18px 18px;
}
.about h2 { color: var(--accent); font-size: var(--step-3); }
.about__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin-top: 0; }
.about__profession { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--accent); line-height: 1.35; margin-top: var(--space-s); }
.about__claim { margin-top: var(--space-s); max-width: 46ch; font-size: var(--step-1); line-height: 1.45; }
.about__portrait { display: block; width: 100%; aspect-ratio: 3 / 4; max-width: 22rem; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__facts { display: grid; gap: var(--space-s); }
.fact { background: #0d0d0d; border-left: 4px solid var(--accent); padding: var(--space-m); }
/* Schriftgröße bewusst +13% gegenüber dem globalen Fließtext-Maßstab (--step-1/--step-0),
   nur für diese Fakten-Liste, auf Nutzerwunsch nach Vorschau-Freigabe am 08.10.2026. */
.fact dt { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: clamp(1.36rem, 1.24rem + 0.57vw, 1.7rem); }
.fact dd { margin-top: .5rem; color: var(--on-dark-muted); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); }

@media (min-width: 56rem) {
  .about { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .about > h2 { grid-column: 1 / -1; }
  .about__intro { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
  /* Claim vertikal mittig im freien Raum der Intro-Spalte (Rollen-Zeile liegt
     jetzt unterhalb der Fakten-Liste, nicht mehr hier im Intro-Block). */
  .about__intro .about__claim { margin-block: auto; padding-block: var(--space-s); }
  .about__portrait { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; }
  .roles-banner { grid-column: 1 / -1; grid-row: 3; }
  .about__facts { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr 1fr; }
}

/* --------------------------- 16 · TRUST / REFERENZEN --------------------------- */
.trust {
  position: relative; overflow: hidden;
  background: var(--accent); color: var(--accent-ink);
  padding-block: var(--space-xl);
}
.trust__art {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  font-family: var(--font-display); color: var(--accent-ink);
  display: grid; place-items: center;
}
.trust__body { position: relative; max-width: var(--maxw); margin-inline: auto; }
.trust__statement {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  max-width: 24ch; background: var(--ink); color: var(--paper);
  display: inline-block; padding: .35em .5em;
}
/* Einleitungszeile („Branchen, in denen ich zu Hause bin:“) formatiert wie die Zwischenüberschrift (h3).
   Schriftgröße auf Wunsch der Betreiberin (08.10.2026) an „Zu meiner Person“ angeglichen:
   .trust__lead/.trust__subhead = gleiche Größe wie .fact dt (Überschrift-Ebene),
   .trust__branches/.ref-list = gleiche Größe wie .fact dd (Fließtext-Ebene). */
.trust__lead, .trust__subhead {
  margin-top: var(--space-l);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.36rem, 1.24rem + 0.57vw, 1.7rem);
  line-height: 1.05; letter-spacing: -0.01em;
  overflow-wrap: break-word; hyphens: auto;   /* „Unternehmensreferenzen“ bricht bei 320 px nicht aus */
}
.trust__branches { font-family: var(--font-display); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); margin-top: .3rem; }
/* Unternehmensreferenzen: gleiche Formatierung wie .trust__branches – Fließtext mit „·“ als Trenner.
   Bleibt semantisch eine Liste (<ul>); die Trenner sind reine CSS-Deko (für Screenreader stumm). */
.ref-list { margin-top: .3rem; font-family: var(--font-display); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); }
.ref-list li { display: inline-block; max-width: 100%; }   /* Einträge umbrechen als Einheit; Abstand = Leerraum zwischen den <li> im HTML */
.ref-list li:not(:nth-last-child(-n+2))::after { content: "\00a0·"; content: "\00a0·" / ""; }   /* kein Trenner vor dem Anhang */
/* Anhang „… sowie weitere …“: läuft als normaler Fließtext direkt hinter dem letzten Eintrag weiter */
.ref-list .ref-list__more { display: inline; }

/* --------------------------- 17 · CTA / KONTAKT --------------------------- */
.cta {
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-xl);
  padding-block: var(--space-xl);
}
.cta__title { font-size: var(--step-3); color: var(--on-dark); }
.cta__lead { margin-top: var(--space-m); max-width: 46ch; color: var(--on-dark-muted); }

/* Marken-Name über dem Formular, zweifarbig wie der Header-Wordmark
   (.wordmark: "data" normal, "sistas" fett + Akzent). Vorab per Mockup
   illustriert, freigegeben 09.10.2026. Ersetzt die frühere Namenszeile im
   Adress-Block (.contact-card__name, entfernt) in der rechten Spalte. */
.cta__brand {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--on-dark); margin: var(--space-m) 0 0; letter-spacing: -0.01em;
}
.cta__brand b { color: var(--accent); font-weight: 700; }

.cta__form { margin-top: var(--space-l); display: grid; gap: var(--space-m); max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.field input, .field textarea {
  font: inherit; color: var(--paper); background: #111;
  border: 2px solid #444; padding: .7rem .8rem;
}
.field input:hover, .field textarea:hover { border-color: #777; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent); }
.field--check { grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.field--check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--accent); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--on-dark-muted); }
.field--check a { color: var(--accent); }
.req { color: var(--accent); }

/* Honeypot – für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.4em; font-family: var(--font-display); font-size: var(--step--1); }
.form-status[data-state="error"] { color: var(--accent); }
.form-status[data-state="ok"]    { color: var(--paper); }

.cta__aside { display: grid; gap: var(--space-l); align-content: start; }
.cta__art {
  font-family: var(--font-display); color: var(--accent);
  white-space: pre; line-height: .95; font-size: .75rem; overflow: hidden;
}
.contact-card { font-style: normal; }
.contact-card__sub { color: var(--on-dark-muted); margin-top: .2rem; }
.contact-card__intro { margin-top: var(--space-m); color: var(--on-dark); }
.contact-imgs { margin-top: var(--space-m); display: grid; gap: var(--space-s); }
/* Anzeigegröße der Anbieter-Grafiken fest vorgegeben (statt Inline-Style im HTML,
   siehe HTML-Kommentar bei den <img>-Tags): die CSP (_headers) setzt
   style-src 'self' und würde ein style="…"-Attribut blockieren. */
.contact-img--anschrift { width: 353px; height: 104px; }
.contact-img--kontakt   { width: 272px; height: 47px; }

@media (min-width: 56rem) {
  .cta { grid-template-columns: 1.2fr .8fr; align-items: start; }
  .cta > .cta__title { grid-column: 1 / -1; }
}

/* --------------------------- 18 · Platzhalter-Optik --------------------------- */
.placeholder {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, #1a1a1a 0 12px, #232323 12px 24px);
  color: var(--accent); border: 2px dashed var(--accent);
  min-height: 8rem; padding: var(--space-s);
}
.placeholder__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.placeholder--inline { min-height: 4.5rem; }
.placeholder--text {
  background: #f5f5f5; color: var(--accent-deep); border-color: var(--accent);
  min-height: auto; padding: var(--space-m); display: block; text-align: left;
}
.placeholder--text p { margin-bottom: .6rem; }
.placeholder--text p:first-child { font-family: var(--font-display); font-weight: 700; }

/* --------------------------- 19 · FOOTER --------------------------- */
/* Fußzeile mit Linkzeile (4 Einträge: Zurück zum Anfang, Impressum, Datenschutzerklärung,
   Cookie-Einstellungen). Ab 40rem (≈ 640px, „große Formate“): alle 4 in einer Zeile,
   gleichmäßig verteilt (4-Spalten-Raster). Darunter (kleine Formate/Mobile): untereinander,
   da vier Mono-Einträge nicht nebeneinander passen. "Cookie-Einstellungen" ist bewusst ein
   <button> (öffnet nur den Cookie-Hinweis erneut, navigiert nirgendwohin) statt eines
   <a href="#">-Links – daher Style-Regeln hier für a UND button gemeinsam. */
.site-footer { background: var(--ink); color: var(--on-dark); padding: var(--space-xl) var(--pad-x) var(--space-l); }
.footer-nav { display: grid; justify-items: start; gap: var(--space-xs); }
.footer-nav a, .footer-nav button {
  display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem;   /* Touch-Ziel ≥ 44 px */
  font-family: var(--font-display); font-weight: 700; text-decoration: none; color: var(--on-dark);
  white-space: nowrap;
}
.footer-nav button {
  background: none; border: none; padding: 0; font-size: inherit; cursor: pointer;
}
.footer-nav a:hover, .footer-nav a:focus-visible,
.footer-nav button:hover, .footer-nav button:focus-visible { color: var(--accent); }
.footer-nav a[aria-current="page"] { color: var(--accent); }
@media (min-width: 40rem) {
  .footer-nav {
    grid-template-columns: repeat(4, auto);
    grid-auto-flow: column;              /* erzwingt eine Zeile statt Umbruch, auch bei engem Platz */
    justify-content: space-between;
    align-items: center;
  }
  .footer-nav > :nth-child(1) { justify-self: start; }
  .footer-nav > :nth-child(2),
  .footer-nav > :nth-child(3) { justify-self: center; }
  .footer-nav > :nth-child(4) { justify-self: end; }
}
.footer-copy { margin-top: var(--space-l); color: var(--on-dark-muted); font-family: var(--font-display); }
.footer-copy b { color: var(--accent); }

/* --------------------------- 19b · COOKIE-HINWEIS (Eigenbau, kein Drittanbieter) --------------------------- */
/* Aktuell werden ausschließlich technisch notwendige Funktionen genutzt (kein
   Tracking, keine Drittanbieter-Skripte – siehe js/main.js, Kopf-Kommentar,
   und Datenschutzerklärung); rein rechtlich wäre dafür noch kein Opt-in
   nötig. Echtes, gleichwertiges Annehmen/Ablehnen ist trotzdem bereits
   vorsorglich umgesetzt (freigegeben 12.10.2026, siehe README), damit beim
   Hinzufügen künftiger optionaler Funktionen (z. B. Statistik) nur noch deren
   Laden an die bestehende Wahl gekoppelt werden muss, statt den Hinweis dann
   erst nachzurüsten. Die Wahl wird nur lokal im Browser gemerkt
   (localStorage), es werden KEINE Daten an Dritte übermittelt (Unterschied zu
   einem Dienst wie CookieYes, siehe README). */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: var(--on-dark);
  border-top: 1px solid var(--accent);
  padding: var(--space-m) var(--pad-x);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__body {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-m);
}
.cookie-banner__text { margin: 0; max-width: 60ch; font-size: var(--step--1); color: var(--on-dark-muted); }
.cookie-banner__text a { color: var(--on-dark); text-decoration: underline; }
.cookie-banner__text a:hover, .cookie-banner__text a:focus-visible { color: var(--accent); }
.cookie-banner__actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-s); }
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: cookie-banner-in .3s ease-out; }
  @keyframes cookie-banner-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* Rechtsseiten (Impressum / Datenschutzerklärung): eigene Seiten, dunkler Grund wie zuvor im Footer */
.page-legal { background: var(--ink); color: var(--on-dark); }
.legal-page { padding: var(--space-l) var(--pad-x) var(--space-xl); }
.legal { padding-inline: 0; max-width: none; }
.legal h1 { font-size: clamp(1.5rem, 1.1rem + 2.5vw, 3.2rem); color: var(--accent); }  /* Seitentitel; „Datenschutzerklärung“ passt auch bei 320–360 px */
.legal__hint { color: var(--on-dark-muted); margin: .5rem 0 var(--space-s); }
.legal h1, .legal h2 { overflow-wrap: break-word; hyphens: auto; }                   /* z. B. „Verbraucherstreitbeilegung/Universalschlichtungsstelle“ */
.legal h2 { font-size: var(--step-1); color: var(--accent); margin-top: var(--space-m); }  /* Abschnittstitel */
.legal p { margin-top: .5rem; color: var(--on-dark-muted); max-width: 72ch; }
.legal a { color: var(--accent); }
.legal__small { font-size: .9em; }
/* Sichtbarer Inline-Marker für noch offene Pflichtangaben */
.legal mark { background: var(--accent); color: var(--accent-ink); padding: 0 .25em; font-weight: 700; }

/* --------------------------- 20 · Scroll-Reveal (nur wenn Motion erlaubt) --------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease, transition-delay 0s; }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* Effekt 2: gestaffeltes Einblenden innerhalb einer Gruppe (Karten, Listen).
     Der Schrittabstand kommt von der --reveal-step-Variable der jeweiligen Gruppe
     (.card-grid: 700ms -> bei 3 Karten alle nach ca. 2 Sek. da; .pillars: 1500ms ->
     nach ca. 3 Sek.), Fallback 1500ms falls irgendwo nicht gesetzt. */
  .reveal.reveal--stagger.is-visible { transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 1500ms)); }

  /* Effekt 2b: Themen-Karten fliegen von links ein statt generischem Fade-up.
     Höhere Spezifität (.card.reveal) überschreibt den generischen translateY der Basisregel. */
  .card.reveal {
    transform: translateX(-3rem);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), transition-delay 0s;
  }
  .card.reveal.is-visible { opacity: 1; transform: none; }

  /* Effekt 5: Leistungssäulen fliegen alle drei gleichermaßen von rechts ein
     (auf Wunsch der Betreiberin am 08.10.2026 – vorher alternierend links/rechts/links).
     Höhere Spezifität (.pillar.reveal) überschreibt den generischen translateY der Basisregel. */
  .pillar.reveal {
    transform: translateX(3rem);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), transition-delay 0s;
  }
  .pillar.reveal.is-visible { opacity: 1; transform: none; }
}
/* Bei reduzierter Bewegung immer sichtbar (kein Layout-Sprung) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------- 21a · Effekt 1 (Vorschau): Scroll-Progress-Balken --------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 1000; transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; } /* reine Bewegungsanzeige, bei reduced-motion ausgeblendet */
}

/* --------------------------- 21 · Print (Rechtstexte lesbar) --------------------------- */
@media print {
  .site-header, .nav-overlay, .menu-toggle, .hero__art, .trust__art, .cta__art { display: none !important; }
  body, .page-legal, .site-footer { color: #000; background: #fff; }
  .legal h1, .legal h2, .legal p, .legal a, .legal li, .footer-nav a, .footer-copy { color: #000; }
  .legal mark { background: none; border: 1px solid #000; color: #000; }
}