/*
Theme Name: SIGMA Ladenbau
Theme URI: https://sigma-ladenbau.de
Author: SIGMA Ladenbau und Projekt GmbH
Description: Individuelles WordPress-Theme für SIGMA Ladenbau und Projekt GmbH. Klassisches PHP-Theme ohne Page Builder, aufgebaut nach dem SIGMA-Designsystem. Relaunch 20.08.2026 auf Basis des Kunden-Masterplans (siehe HANDOVER.md): Typo Inter/Inter Tight statt Fraunces/Work Sans, CTA-Farbe SIGMA-Blau statt Amber, kantigere Radien statt großer Section-Rundungen. Schriften lokal ausgeliefert (kein Google-Fonts-CDN, siehe Rechtstexte_Entwurf.md).
Version: 0.5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sigma-ladenbau
*/

/* ── SCHRIFTEN — lokal ausgeliefert, kein Google-Fonts-CDN (DSGVO, siehe Rechtstexte_Entwurf.md §2.4) ──
   Relaunch 20.08.2026: Inter (Fließtext/UI) + Inter Tight (Headlines) ersetzen
   Work Sans/Fraunces als Haupttypo (Kunden-Masterplan §8). Fraunces bleibt nur
   für Kundenzitate erhalten (.b-quote q, .b-mission q) — dort ausdrücklich
   weiter erlaubt ("optional für große Kundenstatements/Zitate"). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-tight-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-tight-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/fraunces-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/fraunces-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url('assets/fonts/fraunces-latin-600-italic.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/fraunces-latin-700-normal.woff2') format('woff2');}

/* ── SIGMA DESIGN-TOKENS ───────────────────────────────────────────
   Relaunch 20.08.2026 (Kunden-Masterplan §6–10, siehe HANDOVER.md
   „Abgeschlossen“-Block für die vollständige Begründung):
   - Farbe: CTAs und Akzente sind durchgängig --blue. Die frühere
     Amber-Akzentfarbe (#E2803D) aus der ersten Stilrichtung ist am
     25.08.2026 auf Veits Anweisung ganz entfernt worden — sie war seit dem
     Relaunch nirgends mehr im Einsatz und stand nur noch als unbenutzte
     Variable herum. Nicht wieder einführen.
   - Radien: --radius-section entfällt als eigene große Stufe und wird
     identisch zu --radius-card geführt; das bisherige „.round-up“-Konzept
     (große Section-Überlappung mit 36px-Radius) wird unten bewusst zu
     einem wirkungslosen No-op-Selektor, statt in jeder Vorlage einzeln
     entfernt zu werden — kantigere, ruhigere Section-Übergänge statt
     großer Rundungen, wie vom Kunden gefordert. */
:root{
  /* --blue ist die Markenfarbe aus dem Logo und bleibt für Rahmen, Icons,
     Flächen und großen Text. Für WEISSE SCHRIFT auf farbiger Fläche ist sie
     zu hell: #009FE3 mit Weiß ergibt nur 2,97:1, nötig sind 4,5:1. Alle
     Buttons und CTAs nutzen deshalb --blue-dk (5,05:1). Nicht zurückdrehen —
     im Code-Review am 25.08.2026 gemessen und begründet. */
  --blue:#009FE3; --blue-dk:#0076A8; --blue-deep:#0B3550;
  /* Helle Blau-Variante NUR für Eyebrow-Text auf dunklen Flächen
     (.b-hero/.b-subhero) — 25.08.2026, Kundenfeedback „Eyebrow verliert an
     Wirkung“: --blue (#009FE3) auf dem dunklen Hero-/Subhero-Verlauf
     (rgba(11,53,80,.8)) hat zu wenig Leuchtkraft, beide liegen zu nah
     beieinander im Blauton. --blue-bright ist heller/kühler und hebt sich
     sichtbar ab, ohne aus der Markenfarbfamilie zu fallen. */
  --blue-bright:#6CD4FF;
  --ink:#17181A; --cream:#F7F2E9; --cream-dk:#EDE7DA; --muted:#6B6456;
  --border: rgba(23,24,26,0.10);
  /* Weiss-Toene zentral (Aufräum-Runde 23.08.2026): --paper statt #fff,
     Alpha-Stufen für Text auf dunklen Flächen */
  --paper:#fff;
  /* Weiss-Stufen fuer Text, Linien und Flaechen auf dunklem Grund.
     Am 02.09.2026 (Werte-Audit) von 16 frei gewachsenen Deckkraften auf diese
     sechs zusammengelegt (Veits Vorgabe) —
     Ausnahme .4 an der Hero-Textlink-Unterstreichung, die bewusst auf 55
     angehoben wurde, weil sie dieselbe Rolle hat wie die Kontur des hellen
     Umriss-Knopfes (Bedienelement auf dunklem Grund). */
  --paper-90:rgba(255,255,255,.9);    /* fast deckende Flaechen, Nav-Text */
  --paper-85:rgba(255,255,255,.85);   /* Lead- und Fliesstext auf dunkel */
  --paper-70:rgba(255,255,255,.7);    /* sekundaerer Text */
  --paper-55:rgba(255,255,255,.55);   /* Meta-Text, Konturen von Bedienelementen */
  --paper-30:rgba(255,255,255,.3);    /* Trennlinien */
  --paper-12:rgba(255,255,255,.12);   /* dezente Rahmen und Flaechen */
  --shadow-hero: 0 2px 20px rgba(0,0,0,.4);
  /* Section-Paddings am 25.08.2026 (Kundenfeedback „Abstände zwischen den
     Abschnitten zu groß") von 96/72/120px auf 80/64/96px verkleinert —
     spürbar kompakter beim Scrollen, ohne Sektionen zusammenrücken zu
     lassen. Weiterhin ausschließlich über diese drei Tokens gesteuert. */
  --pad-section: 80px 32px;
  --pad-section-sm: 64px 32px;
  --pad-section-lg: 96px 32px;
  --pad-banner: 96px 12%;
  --pad-footer: 24px 32px;
  /* Abstands-Stufen: gelten fuer Kartenraster UND fuer Reihen gleichartiger
     Elemente (CTA-Reihe, Footer-Navigation, Formularzeile, Fakten-Raster).
     Am 02.09.2026 von --gap-cards-* umbenannt, weil sie laengst mehr als
     Karten tragen. Mikroabstaende INNERHALB eines Bauteils (Eyebrow-Strich,
     Play-Hint, Lightbox) bleiben bewusst roh — sie sollen sich nicht
     mitverschieben, wenn diese Stufen sich aendern. */
  --gap-sm: 10px;
  --gap: 14px;
  --gap-lg: 18px;
  --wrap: 1360px;
  --wrap-text: 560px; /* 31.08.2026, Veits Vorgabe: an Klarheitswanderer.de
     angeglichen (dortiges Fliesstext-max-width 560px, siehe
     Referenzmuster/Referenz_Klarheitswanderer_Designsystem.html). War 760px. */
  /* ── Rundungs-Skala: 3 Stufen (Relaunch 20.08.2026, vorher 4 inkl. --radius-section) ── */
  --radius-btn: 4px;      /* Buttons, Formularfelder, Checkbox-Box */
  --radius-card: 8px;     /* alle Karten/Boxen (usp/proj/team/wert/kontakt/form/video) */
  --radius-pill: 999px;   /* alle Chips/Badges/Pill-Buttons */
  --radius-section: var(--radius-card); /* keine eigene große Stufe mehr, siehe Kommentar oben */
  /* ── Buchstabenabstand bei Versal-Labels: 2 Stufen (02.09.2026, Werte-Audit) ──
     Vorher lagen fuenf Werte (.03 bis .12em) fuer dieselbe Rolle im Code —
     11px-Versalien als Etikett ueber oder neben einem Wert. Aufgeteilt in die
     zwei Rollen, die es wirklich gibt. */
  --track-weit: .14em;    /* Eyebrows, Auszeichnungen, vertikale Labels */
  --track-label: .05em;   /* Feld- und Meta-Labels, Fakten-Ueberschriften */
  /* ── Bewegung: 3 Stufen (02.09.2026, Werte-Audit) ──
     Vorher sechs rohe Dauern ohne Token (.15/.18/.2/.3/.32/.35s). Die Naehe
     von .15/.18/.2s war nicht wahrnehmbar, nur schwerer zu pflegen. */
  --t-schnell: .15s;      /* reiner Farbwechsel ohne Bewegung: Chips, Links */
  --t: .2s;               /* Karten und Knoepfe heben sich */
  --t-panel: .3s;         /* Ein- und Ausblenden von Navigationsleiste und
                             Kontakt-Schublade. Bewusst NICHT fuer Bilder oder
                             Karten — die laufen auf --t (Veits Entscheidung
                             02.09.2026: kein eigenes Bild-Tempo). */
  --t-blende: 1.4s;       /* Überblendung im Hero-Durchlauf (#80, 11.09.2026).
                             Kein Hover-Tempo: ein Bildwechsel mit --t (.2s)
                             wäre ein harter Schnitt. Nur für .hero-slide. */
  --t-zoom: 9s;           /* Langsamer Zoom des gerade sichtbaren Hero-Bilds,
                             damit es nie ganz stillsteht (Hero-Bewegung,
                             Entscheidung 14.08.2026). Nur für .hero-slide. */
  /* ── Zeilenabstand: 4 Stufen (02.09.2026, Werte-Audit, Veits Entscheidung) ──
     Vorher lagen fuer Fliesstext vier Werte im Code (1.55/1.6/1.65/1.7), ohne
     dass einer dominierte. Veits Vorgabe: 1.7 bleibt Hausstandard, und auf den
     bestehenden Seiten soll sich moeglichst nichts Sichtbares aendern. Die
     fuenfte Stufe 1.65 ist am 02.09.2026 (spaet) auf Veits Entscheidung
     gestrichen worden: FAQ-Antwort, Stellentext, Prozessschritt und
     Verantwortungs-Spalte laufen jetzt auf dem Hausstandard mit. Nachgezogen
     wurde ausserdem .proj-card2 .desc (1.55 -> 1.6). Zitate behalten ihre eigene, engere Fuehrung (.b-quote q 1.4,
     .b-mission q / .kundenstimme-card 1.5): grosse Schrift braucht weniger
     Durchschuss. .kontakt-info bleibt bei 1.9, weil es ein Adressblock ist. */
  --lh-weit: 1.7;         /* Hausstandard: body und Fliesstext 16/18px */
  --lh-kompakt: 1.6;      /* 13px-Kleintext, Lead ueber Bild */
  --lh-eng: 1.4;          /* Chips, Etiketten, Untertitel */
  --lh-lang: 1.8;         /* Rechtstexte, lange Lesestrecken */
  --fs-icon: 20px;        /* Zeichen statt Text: Pfeil, Plus, Play-Punkt */
  /* ── Stapelung: eine Leiter statt gewachsener Einzelwerte (02.09.2026,
     Werte-Audit). Bis auf den Sprunglink ist die Reihenfolge unveraendert
     uebernommen, nur benannt. Der Sprunglink lag vorher unter der Lightbox und
     war bei geoeffnetem Vollbild-Foto verdeckt; er liegt jetzt ganz oben. */
  --z-boden: 0;           /* Bild unter seiner Beschriftung */
  --z-inhalt: 1;          /* Beschriftung ueber dem Kartenbild */
  --z-ueber: 2;           /* Deko-Ecken, Bildueberlagerungen */
  --z-nav: 250;           /* Navigationsleiste, Kontakt-Schublade */
  --z-overlay: 9999;      /* Lightbox ueber dem Inhalt */
  --z-skip: 10000;        /* Sprunglink ganz oben — auch ueber der Lightbox, damit
                             er bei Tastaturbedienung nie verdeckt ist (Veits
                             Entscheidung 02.09.2026) */
  --nav-h: 76px;
  /* ── Schriftgrößen-Skala: 10 Stufen (Aufräum-Runde 24.08.2026, vorher 17
     unterschiedliche rohe px-Werte ohne jedes Token — siehe LOG.md/HANDOVER.md
     #41). Kleine/mittlere Stufen an der von Veit freigegebenen Referenz
     Klarheitswanderer ausgerichtet (Referenzen/Referenz_Klarheitswanderer_
     Designsystem.html, Abschnitt „02 Typografie“: eyebrow 11px, Button 14px,
     Fließtext 16px, Lead 18px, h3 24px). Die zwei großen Überschriften-Stufen
     sind bewusst fluid (clamp()) und deutlich größer als vorher (Statement
     statt 38px-Maximum) — auf Veits ausdrücklichen Wunsch 24.08.2026. */
  --fs-2xs: 11px;        /* Eyebrows, Mikro-Meta, Form-Hints/-Labels */
  --fs-xs: 13px;         /* kleine UI-Texte: Chips, Nav-Links, Captions */
  --fs-sm: 14px;         /* Buttons, Formularfelder, sekundäre Bold-Labels */
  --fs-base: 16px;       /* Fließtext */
  --fs-lead: 18px;       /* Lead-Absätze, kleine Zwischenüberschriften */
  --fs-quote-sm: 22px;   /* kleineres Zitat/Statement (z. B. .b-mission q) */
  --fs-h3: 24px;         /* kleine Überschriften */
  --fs-quote-lg: 28px;   /* großes Zitat/Pull-Quote (z. B. .b-quote q) */
  --fs-h2: clamp(30px, 4vw, 56px); /* Section-Überschriften, fluid */
  --fs-h1: clamp(28px, 7vw, 72px); /* Hero-/Subhero-Headline, fluid. Boden bewusst 28px:
                                     bei 40px passten deutsche Komposita („Lebensmittelhandel“)
                                     unter 390px nicht mehr in die Spalte und erzeugten
                                     horizontales Scrollen (Code-Review 25.08.2026). */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);line-height:var(--lh-weit);}
img{max-width:100%;display:block;}
a{color:inherit;}
/* Sektionsüberschriften sind seit dem Code-Review 25.08.2026 <h2> statt
   <h3> — vorher sprang die Gliederung auf jeder Seite von h1 direkt auf
   h3, was die Überschriften-Navigation von Screenreadern zerreißt. Die
   Selektoren unten führen h2 und h3 gemeinsam, damit die Optik gleich
   bleibt und ältere Markup-Reste nicht plötzlich anders aussehen. */
h1,h2,h3,h4{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-0.01em;}
/* Lange deutsche Komposita dürfen brechen statt überzulaufen. lang="de-DE"
   steht im <html>, die Silbentrennung greift also. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:none;}

.wrap{max-width:var(--wrap);margin:0 auto;}
.wrap-text{max-width:var(--wrap-text);margin:0 auto;} /* Zentrierte Textspalte — seit 23.08.2026 NUR noch fuer Inhalte mit text-align:center erlaubt (Zitate, Bildunterschriften). VERBOTEN fuer links ausgerichteten Fliesstext/Ueberschriften: die zentrierte 760px-Spalte erzeugt eine zweite linke Kante (~340px bei 1440px) neben der Standard-Fluchtlinie der .wrap-Sektionen (~40px) — exakt der dreimal gemeldete Raender-Fehler (17./20./21.08.). Fuer links ausgerichteten Fliesstext stattdessen: .wrap als Container + .lead-in oder .text-spalte fuer die lesbare Zeilenbreite. Der Fluchtlinien-Check in Verifikation/messung.py schlaegt sonst an. */
.block{position:relative;}
/* „.round-up“ bewusst zum No-op gemacht (Relaunch 20.08.2026, siehe Token-
   Kommentar oben) — Klasse bleibt in älteren, in dieser Sitzung nicht
   angefassten Templates bestehen, hat aber keine visuelle Wirkung mehr. */
.round-up{position:relative;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}

/* Farbvererbung für .note-Blöcke direkt vor einer Section — im Theme nicht verwendet (Notizen sind Wireframe-only), Klassen bleiben für evtl. redaktionelle Hinweiskästen erhalten */
.note{background:var(--paper);border-top:1px dashed #ddd;padding:14px 32px;font-size:var(--fs-xs);color:#777;line-height:var(--lh-kompakt);}
.note b{color:var(--ink);}
.note.note-cream{background:var(--cream);border-top-color:#e4dcc8;}
.note.note-cream-dk{background:var(--cream-dk);border-top-color:#ddd2b8;}
.note.note-dark{background:var(--blue-deep);border-top-color:var(--paper-12);color:var(--paper-70);}
.note.note-dark b{color:var(--paper);}

/* Platzhalter für fehlendes Foto-/Videomaterial (Kunden-Masterplan Teil 2:
   Fotoshooting steht noch aus) — bewusst deutlich als Platzhalter markiert,
   niemals als fertiges Bild getarnt (Projektregel „nicht wild raten“). */
.media-placeholder{background:repeating-linear-gradient(135deg,var(--cream-dk),var(--cream-dk) 10px,var(--paper) 10px,var(--paper) 20px);border:1px dashed #c9c2b0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-kompakt);padding:16px;}
.media-placeholder b{display:block;color:var(--ink);font-size:var(--fs-xs);margin-bottom:4px;}

/* Buttons */
.btn{display:inline-block;text-decoration:none;font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;padding:13px 28px;border-radius:var(--radius-btn);transition:transform var(--t),box-shadow var(--t),background var(--t);cursor:pointer;border:none;}
.btn:hover{transform:translateY(-2px);}

/* Kachel-Hover (25.08.2026, Kundenfeedback „Kacheln sind nicht animiert wie
   gewünscht, kommen nicht beim Hovern nach oben") — eine gemeinsame Regel
   für alle Karten-artigen Kacheln (Projekte, Team, Werte, USP, Problemfelder),
   statt sie einzeln nachzurüsten. Dezenter Lift + weicherer Schatten,
   respektiert prefers-reduced-motion. */
.proj-card,.proj-card2,.team-card,.wert-chip,.usp-card,.problemfeld-card,.vorteil-kachel,.stelle-kachel{transition:transform var(--t) ease,box-shadow var(--t) ease;}
.proj-card:hover,.proj-card2:hover,.team-card:hover,.wert-chip:hover,.usp-card:hover,.problemfeld-card:hover,.vorteil-kachel:hover,.stelle-kachel:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(23,24,26,.12);}
@media (prefers-reduced-motion:reduce){
  .proj-card,.proj-card2,.team-card,.wert-chip,.usp-card,.problemfeld-card,.vorteil-kachel,.stelle-kachel{transition:none;}
  .proj-card:hover,.proj-card2:hover,.team-card:hover,.wert-chip:hover,.usp-card:hover,.problemfeld-card:hover,.vorteil-kachel:hover,.stelle-kachel:hover{transform:none;}
}
.btn-primary{background:var(--blue-dk);color:var(--paper);}
.btn-primary:hover{box-shadow:0 10px 22px rgba(0,159,227,.4);background:var(--blue-dk);}
.btn-outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-outline-light{background:transparent;border:1.5px solid var(--paper-55);color:var(--paper);}
.btn-outline-light:hover{background:var(--paper-12);border-color:var(--paper);}

/* ── Zentrale Navigation (Relaunch 20.08.2026) ──────────────────────
   Ersetzt die bisher pro Template duplizierte Inline-Nav (.b-hero .nav /
   .b-subhero .nav). Eine einzige Komponente über sigma_render_nav(),
   siehe template-parts/nav.php + functions.php. Immer fixed über dem
   jeweiligen Hero/Subhero (die auf jeder Seite dunkel starten), wechselt
   nach 40px Scroll per JS (assets/js/main.js) auf helles Blur-Panel. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:22px 32px;transition:background var(--t-panel) ease,box-shadow var(--t-panel) ease,padding var(--t-panel) ease,backdrop-filter var(--t-panel) ease;}
.site-nav .nav-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-nav .nav-brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.site-nav .nav-brand img{height:24px;width:auto;display:block;}
.site-nav .nav-brand span{font-weight:700;letter-spacing:.02em;color:var(--paper);transition:color var(--t-panel) ease;}
.site-nav .nav-links{display:flex;align-items:center;gap:22px;font-size:var(--fs-xs);font-weight:600;}
.site-nav .nav-links a{color:var(--paper-90);text-decoration:none;transition:color var(--t-panel) ease;}
.site-nav .nav-links a:hover{color:var(--paper);}
.site-nav .nav-cta{background:var(--blue-dk);color:var(--paper);padding:10px 20px;border-radius:var(--radius-btn);font-size:var(--fs-xs);font-weight:700;text-decoration:none;white-space:nowrap;}
.site-nav .nav-cta:hover{background:var(--blue-dk);}
.site-nav.scrolled{background:var(--paper-90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(23,24,26,.08);padding:14px 32px;}
.site-nav.scrolled .nav-brand span{color:var(--ink);}
.site-nav.scrolled .nav-links a{color:var(--ink);}
.site-nav.scrolled .nav-links a:hover{color:var(--blue-dk);}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--paper);margin:4px 0;transition:background var(--t-panel) ease;}
.site-nav.scrolled .nav-burger span{background:var(--ink);}

/* ── Utility-/Baustein-Klassen (Aufräum-Runde 23.08.2026, HANDOVER-Punkt #38) ──
   Ersetzen ALLE bisherigen style=""-Attribute der Templates. Projektregel:
   Templates enthalten KEINE Inline-Styles und keine hartkodierten Farb-/
   Groessen-/Abstandswerte — jeder neue Bedarf bekommt hier eine Klasse,
   Werte kommen aus den Design-Tokens oben. */
.u-center{text-align:center;margin-left:auto;margin-right:auto;}
.u-nowrap{white-space:nowrap;} /* 16.09.2026: haelt einen kurzen Satzteil in einer Headline zusammen (Karriere-Header), damit kein einzelnes Wort allein auf die naechste Zeile rutscht */
.u-abstand-oben{margin-top:32px;}
.u-eckig{border-radius:0;}
.link-plain{color:inherit;text-decoration:none;}
.bg-paper{background:var(--paper);}
.img-fluid{width:100%;height:auto;display:block;}
.media-rund{border-radius:var(--radius-card);overflow:hidden;}
.text-spalte{max-width:var(--wrap-text);}
/* 09.09.2026, Veit: Impressum/Datenschutz/AGB wirkten auf breiten
   Monitoren unnötig lang, weil .text-spalte (560px, gedacht für kurze
   Teaser-Absätze) den langen Rechtstext in eine schmale Spalte zwängte.
   .rechtstext steht NUR in den drei Rechtsseiten (page-impressum.php,
   page-datenschutz.php, page-agb.php) — andere .text-spalte-Stellen
   (Archiv-Fallback, Projekt-Einzeltext) bleiben bewusst bei 560px. Breitere
   Spalte hier ist reiner Lesetext mit Absätzen/Listen, kein Fließtext mit
   Bildern daneben, deshalb 820px statt voller --wrap-Breite (1360px) —
   sonst würden die Zeilen zu lang zum Lesen. */
.rechtstext.text-spalte{max-width:820px;}
/* 09.09.2026, Veit: nummerierte Listen in den AGB (page-agb.php) sassen
   mit der Nummer weiter links als die Ueberschriften/Absaetze darueber.
   Grund: der globale Reset (Zeile ~167, *{margin:0;padding:0}) nimmt
   <ol>/<ul> auch das UA-Standard-padding-left, die Marker-Zahl haengt bei
   list-style-position:outside (Standard) dann in den negativen Bereich
   links vom Container. Fix: eigenes padding-left, Marker faengt jetzt auf
   derselben Fluchtlinie an wie der Text der <p>-Absaetze, umgebrochene
   Zeilen haengen sauber unter dem ersten Wort statt unter der Nummer. */
.rechtstext ol,.rechtstext ul{padding-left:1.4em;}
.text-neben{font-size:var(--fs-sm);color:var(--muted);}
.text-kursiv{font-style:italic;}
.leer-hinweis{color:var(--muted);font-size:var(--fs-xs);}
/* .lead-in-wide: Geschichte einer Kehrtwende, damit das hier nicht wieder
   als "vergessene Einzelmaßnahme" missverstanden wird. Gab .lead-in
   ursprünglich volle Breite (max-width:none) statt der Textspalte. Am
   31.08.2026 (Vormittag) auf Veits Vorgabe "seitenweit anpassen"
   (Angleichung an klarheitswanderer.de) zu einer No-Op-Regel gemacht:
   JEDER .lead-in sollte einheitlich --wrap-text (560px) nutzen, auch die
   acht damals betroffenen Stellen. Am selben Tag (Folge 14) auf Veits
   ausdrücklichen Wunsch wieder aktiviert ("auf ganze Seitebreite
   bringen") — die Karriere-Seite (Vorteile/Bereiche-Absätze) wirkte in
   560px zu eng neben den volle-Breite-Pill-Reihen darunter. Jetzt wieder
   aktiv: .lead-in-wide füllt seinen .wrap-Container (bis 1360px), ganz
   normales .lead-in bleibt bei 560px. EIN zentraler Schalter für alle
   acht Markup-Stellen (front-page.php, page-karriere.php ×4,
   page-leistungen.php, page-team.php ×2) — keine Einzelfälle. Kombinierter
   Selektor .lead-in.lead-in-wide (statt nur .lead-in-wide) ist bewusst
   höher spezifisch als das einzelne .lead-in weiter unten — sonst
   entscheidet allein die Reihenfolge im Stylesheet, welche der beiden
   gleich spezifischen Regeln gewinnt (fragil, genau das ist beim ersten
   Versuch dieser Änderung passiert: .lead-in stand später im Code und
   hat lautlos gewonnen, ohne dass es hier auffiel). */
.lead-in.lead-in-wide{max-width:none;}
.block .h-sektion{margin-bottom:18px;} /* EIN Ueberschriften-Abstand fuer alle Sektionen (vorher 12/16/18/24/26px gemischt) */
.btn-row{margin-top:24px;}
.intro-invers{max-width:var(--wrap);margin:0 auto 40px;text-align:center;font-size:var(--fs-base);line-height:var(--lh-weit);color:var(--paper-85);} /* 08.09.2026 Veit: Seitenbreite ausnutzen statt --wrap-text-Spalte, passt jetzt zur Breite des verantwortung-grid darunter */
.quote-quelle{margin-top:16px;font-size:var(--fs-xs);color:var(--paper-55);}
.u-abstand-unten{margin-bottom:32px;}
/* Fliesstext aus dem Editor — Rechtstexte (page.php) und der freie
   Projekttext (single-projekt.php, index.php) teilen dieselbe Typo.
   `.entry-content` fehlte hier bis 25.08.2026: Editor-Absaetze auf
   Projektseiten liefen mit der Grundzeilenhoehe statt mit 1.8. */
.rechtstext,.entry-content{font-size:var(--fs-base);line-height:var(--lh-lang);}
.hp-feld{position:absolute;left:-9999px;} /* Honeypot: fuer Menschen unsichtbar, fuer Bots vorhanden — bewusst NICHT .screen-reader-text (andere Semantik) */
.team-grid.team-grid-kompakt{max-width:900px;}
/* Kompakte Team-Teaser-Karten (Startseite) haben nur Name+Rolle, keine Bio —
   die 340px min-height der vollen Team-Seite liessen darunter viel Leerflaeche
   stehen. Kleinere Karte + schmaleres Foto im selben Portraet-Seitenverhaeltnis,
   Text vertikal zentriert (Bugfix 30.08.2026). */
.team-grid-kompakt .team-card{min-height:200px;}
.team-grid-kompakt .team-photo{width:150px;min-width:150px;}
.team-grid-kompakt .team-meta{display:flex;flex-direction:column;justify-content:center;padding:16px 18px;}

/* Projekt-Detail: Hero-Bild ragt in den Subhero hinein */
.projekt-hero-bild{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.projekt-hero-bild-innen{margin-top:-64px;position:relative;z-index:var(--z-ueber);overflow:hidden;border-radius:var(--radius-card);}
/* Feste Bildbühne statt „so hoch wie das Bild“ (25.08.2026): das Material
   des Kunden mischt Hoch- und Querformat. Ein Hochformat-Foto in voller
   Höhe schiebt die gesamte Projektseite um ~1700px nach unten — die Facts
   und die Geschichte landen dann unter der Falte. Deshalb ein ruhiges 2:1-
   Band, in das jedes Bild mittig eingepasst wird; auf schmalen Displays
   4:3, weil 2:1 dort nur noch ein Streifen wäre. */
.projekt-hero-bild-innen{aspect-ratio:2/1;}
.projekt-hero-bild-innen .galerie-link{display:block;width:100%;height:100%;border-radius:0;}
.projekt-hero-bild-innen img{width:100%;height:100%;object-fit:cover;}

/* 404 im CTA-Stil */
.b-404{min-height:50vh;display:flex;flex-direction:column;justify-content:center;}
.b-404 h1{font-size:var(--fs-h2);font-weight:600;margin-bottom:18px;} /* gleicher Look wie .b-cta h3, aber semantisch die eine H1 der 404-Seite */
.b-404 p{color:var(--paper-70);margin-bottom:20px;}

/* Komplexitaet-SVG (Startseite): Farben/Typo der technischen Zeichnung —
   Geometrie (x/y/width/rx) bleibt als SVG-Attribut, Optik kommt von hier */
.komp-box{fill:var(--paper);stroke:var(--blue);stroke-width:1.25;}
.komp-box-text{font:11px 'Inter',sans-serif;fill:var(--ink);}
.komp-linie{stroke:var(--blue);stroke-width:1;opacity:.35;}
.komp-hub{fill:var(--cream);stroke:var(--blue);stroke-width:1.5;}
.komp-hub-text{font:600 15px 'Inter Tight',sans-serif;fill:var(--blue-deep);}
.komp-sigma{fill:var(--blue-deep);}
.komp-sigma-text{font:700 18px 'Inter Tight',sans-serif;fill:var(--paper);}
.komp-pfeil-strich{stroke:var(--blue);stroke-width:2;}
.komp-pfeilspitze{fill:var(--blue);}
/* Rahmen um die Gewerke-Boxen — seit 31.08.2026 stecken die zwölf Fäden
   IN einem Kasten „Ihr Projekt“, statt in einen Punkt zu laufen (Veits
   Vorgabe: Leserichtung Sie → SIGMA → Ihr Projekt). */
.komp-rahmen{fill:none;stroke:var(--blue);stroke-width:1.5;}

@media (max-width:900px){
  .site-nav .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:rgba(11,53,80,.97);padding:0 32px;max-height:0;overflow:hidden;gap:0;transition:max-height var(--t-panel) ease;}
  .site-nav.scrolled .nav-links{background:var(--paper-90);}
  .site-nav .nav-links.nav-links-open{max-height:400px;padding:14px 32px 22px;}
  .site-nav .nav-links a{padding:10px 0;width:100%;}
  .site-nav .nav-links .nav-cta{margin-top:8px;text-align:center;}
}

/* Startseite Block 1: Hero
   Zurückgestellt auf zentrierten Text (25.08.2026, Kundenfeedback: „gegen
   den links orientierten Hero haben wir uns schon mal entschieden — Logik
   a la Klarheitswanderer.de“). Entspricht wieder der ursprünglichen
   Entscheidung „Hero-Bauart" vom 14.08.2026 (Vollbild-Foto, Text mittig) —
   der linksbündige Stand kam mit dem 14-Sektionen-Umbau vom 20.08.2026 rein,
   ohne dass diese ältere Vorgabe bewusst gekippt wurde.

   08.09.2026: Der blaue Verlauf war kurzzeitig (dieselbe Sitzung) auf einen
   neutralen Schwarz-Verlauf umgestellt — Missverständnis von Veits Feedback
   „den Anstrich wegnehmen“, das sich tatsächlich auf den kleinen Strich vor
   dem Eyebrow-Text bezog (der Strich wurde entfernt, siehe Kommentar bei
   .b-subhero .eyebrow::before weiter unten), nicht auf
   den Bild-Verlauf. Zurückgedreht auf den ursprünglichen SIGMA-blauen
   Verlauf. */
.b-hero{min-height:92vh;background:linear-gradient(160deg,rgba(11,53,80,.82),rgba(11,53,80,.38)),url('assets/img/hero.jpg') center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--paper);padding:calc(var(--nav-h) + 40px) 32px 64px;position:relative;overflow:hidden;}
.b-hero .hero-inner{max-width:var(--wrap);width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
/* Hero-Durchlauf (#80, 11.09.2026): Projektfotos liegen als Ebene unter dem
   Inhalt, der dunkle Verlauf darüber ist derselbe wie beim bisherigen
   Einzelbild. Mit .hat-slides entfällt das Hintergrundbild (hero.jpg wird
   dann gar nicht erst geladen), ohne Slides bleibt alles wie vorher. */
.b-hero.hat-slides{background:var(--blue-deep);}
.hero-slides{position:absolute;inset:0;z-index:var(--z-boden);overflow:hidden;}
/* Verlauf etwas dichter als beim alten Einzelbild (.82/.38): echte
   Ladenfotos sind heller und unruhiger als das Rendering, sonst verliert die
   Branchenzeile über Theken und Schildern an Lesbarkeit. */
.hero-slides::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,53,80,.86),rgba(11,53,80,.58));}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity var(--t-blende) ease,transform var(--t-zoom) linear;}
.hero-slide.ist-aktiv{opacity:1;transform:scale(1);}
.b-hero .hero-inner{position:relative;z-index:var(--z-inhalt);}
.hero-slide-titel{position:absolute;right:32px;bottom:20px;z-index:var(--z-inhalt);font-size:var(--fs-xs);color:var(--paper-70);letter-spacing:.02em;}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none;transform:none;}
  .hero-slide:not(.ist-aktiv){display:none;}
}
/* h1/.sub hier bewusst NICHT an --wrap-text (560px) gekoppelt: das ist die
   Fließtext-Spalte für Absätze (.lead-in etc.), keine Headline-Breite. Bei
   560px würde die große, zentrierte H1 in sehr kurze, unschöne Zeilen
   umbrechen. 820/600px sind eigenständige, für diese Headline/Subline
   gewählte Werte (geprüft 31.08.2026, keine Altlast/kein Drift). */
.b-hero h1{font-size:var(--fs-h1);font-weight:600;max-width:820px;margin:0 auto;line-height:1.08;letter-spacing:-0.02em;}
.b-hero .sub{margin:20px auto 0;font-size:var(--fs-lead);max-width:600px;color:var(--paper-85);line-height:var(--lh-kompakt);font-weight:400;}
.b-hero .hero-cta-row{margin-top:32px;display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center;justify-content:center;}
.b-hero .cta{background:var(--blue-dk);color:var(--paper);padding:14px 28px;border-radius:var(--radius-btn);font-size:var(--fs-sm);font-weight:700;text-decoration:none;display:inline-block;}
.b-hero .cta:hover{background:var(--blue-dk);}
.b-hero .cta-link{color:var(--paper);font-size:var(--fs-sm);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--paper-55);padding-bottom:2px;}
.b-hero .branchen-row{margin-top:40px;font-size:var(--fs-xs);color:var(--paper-55);letter-spacing:.02em;}
/* Eyebrow (Hero + Subhero): am 25.08.2026 optisch verstärkt (Kundenfeedback
   „Eyebrow unter dem Logo verliert komplett an Wirkung") — hellere Farbe
   (--blue-bright statt --blue, siehe Token-Kommentar oben), eine Stufe
   größer, plus ein kurzer Strich davor als Blickfang, wie bei einem
   klassischen redaktionellen Kicker. */
.b-hero .eyebrow,.b-subhero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--blue-bright);font-weight:700;margin-bottom:18px;}
/* .b-hero ohne den Strich vor dem Text (08.09.2026, Veits Rückmeldung zum
   Screenshot: "seltsam" — der 22px-Balken vor "LADENBAU · PLANUNG ·
   PROJEKTBETREUUNG" sah wie ein verirrtes Minuszeichen aus). Nur für die
   Startseiten-Hero entfernt, .b-subhero (Eyebrow auf den Unterseiten-Headern)
   behält ihn -- falls der dort auch weg soll, bitte kurz Bescheid geben. */
.b-subhero .eyebrow::before{content:'';display:inline-block;width:22px;height:2px;background:var(--blue-bright);flex:none;}

/* Hero-Proof-Zeile (Kunden-Masterplan §12.2) */
.b-proof{background:var(--cream);padding:40px 32px;}
/* auto-fit statt fester Spaltenzahl (25.08.2026, Anlass: fünfte Kachel
   „600+ Projekte“): die Zeile trägt jetzt jede Anzahl Kacheln, ohne dass
   an drei Stellen die Spaltenzahl nachgezogen werden muss. */
.proof-row{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;}
.proof-item b{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-h3);color:var(--blue-dk);font-weight:700;}
.proof-item span{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:4px;}

/* Referenzen-Logoleiste */
.b-logos{background:var(--paper);padding:var(--pad-section-sm);text-align:center;border-bottom:1px solid var(--border);}
.b-logos .eyebrow{font-size:var(--fs-2xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--blue-dk);font-weight:700;margin-bottom:22px;}
.logo-row{display:flex;justify-content:center;align-items:center;gap:var(--gap-lg);flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;}
.logo-row-break{flex-basis:100%;height:0;} /* 08.09.2026 Veit: erzwingt den Zeilenumbruch an einer bewusst gewaehlten Stelle statt dem natuerlichen, unausgewogenen Umbruch zu ueberlassen */
.logo-row img{max-height:32px;width:auto;filter:grayscale(1);opacity:.55;transition:filter var(--t),opacity var(--t);}
.logo-row img:hover{filter:none;opacity:1;}
/* 12.10.2026 Veit (iPhone, iPad): Der erzwungene Umbruch nach dem 12. Logo ist für Desktop-Breite gerechnet. Darunter ließ das freie Umbrechen einzelne Logos allein in einer Zeile stehen (OHM, Bio Company). Unter 1024px stehen die 21 Logos deshalb in einem festen Raster: Tablet 7 Spalten (3 Zeilen), Handy 3 Spalten (7 Zeilen), jede Zeile voll. */
@media (max-width:1023px){
  .logo-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap-lg) var(--gap);justify-items:center;}
  .logo-row-break{display:none;}
  .logo-row img{max-width:100%;height:auto;}
}
.logo-chip-text{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;background:rgba(0,159,227,.08);color:var(--blue-dk);border-radius:var(--radius-pill);font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-xs);letter-spacing:.01em;}
.logos-note{margin-top:16px;font-size:var(--fs-2xs);color:var(--muted);max-width:var(--wrap-text);margin-left:auto;margin-right:auto;}

/* Startseite Block: Video + USP (bleibt strukturell, Radien/Typo aktualisiert) */
.b-video{background:var(--cream);padding:var(--pad-section);}
.video-frame{background:var(--blue-deep);aspect-ratio:16/9;max-width:1180px;margin-left:auto;margin-right:auto;border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;color:var(--paper-55);font-size:var(--fs-xs);margin-bottom:28px;overflow:hidden;position:relative;}
.video-frame video,.video-frame iframe{width:100%;height:100%;border:0;}
.video-frame video{object-fit:cover;}
/* Untertitel-Spur des Firmenvideos (WebVTT, assets/media/sigma-promovideo-de.vtt):
   Das Video startet beim Scrollen ohne Ton, die Untertitel laufen deshalb
   standardmaessig mit — dunkle Box statt reinem Schatten, damit die Schrift
   auch auf hellen Bildinhalten (Backshop-Aufnahmen) sicher lesbar bleibt.
   Bewusst ein fester rgba-Wert statt var(--blue-deep): CSS-Variablen der
   Seite greifen in ::cue nicht zuverlaessig (eigener Rendering-Baum des
   Browsers) — nicht "aufraeumen", sonst faellt die Box weg. */
.video-frame video::cue{background:rgba(11,29,45,.72);color:var(--paper);font-family:'Inter',system-ui,sans-serif;line-height:var(--lh-eng);}
.video-frame .play-hint{display:flex;flex-direction:column;align-items:center;gap:10px;}
.video-frame .play-hint .dot{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--paper-55);display:flex;align-items:center;justify-content:center;font-size:var(--fs-icon);}
.lead-in{font-size:var(--fs-base);color:var(--ink);max-width:var(--wrap-text);margin:0 0 22px;line-height:var(--lh-weit);}
/* .lead-in ist bewusst links (margin:0), NICHT zentriert — siehe Warnung bei
   .wrap-text oben. Zwei Stellen (Video-Teaser + Karriere-Teaser) nutzten
   bislang trotzdem ".lead-in u-center" und erzeugten dadurch genau den dort
   beschriebenen Rand-Fehler (Text bleibt linksbündig im Kasten, nur die
   Textausrichtung wird zentriert → sichtbarer Weißraum rechts). Am
   24.08.2026 auf ".wrap-text u-center" umgestellt (Veits Screenshot-
   Feedback zur Video-Sektion) — für neue zentrierte Absätze immer
   ".wrap-text", nie ".lead-in u-center". */
.video-teaser{font-family:'Fraunces',serif;font-style:italic;font-size:var(--fs-quote-sm);line-height:1.5;color:var(--ink);max-width:900px;} /* 08.09.2026 Veit: Zitat auf 2 Zeilen statt vier — --wrap-text (560px) war fuer diesen Satz zu schmal, dieselbe .wrap-text-Klasse bleibt im Markup (zentriert die Spalte), max-width hier ueberschreibt nur die Breite */
/* Zentriertes Statement für einen alleinstehenden Absatz ohne Grid/Bild
   daneben (25.08.2026, Karriere-Seite) — etwas größer/lockerer als
   Fließtext, aber kein Zitat (keine Anführungszeichen/Fraunces). */
.lead-in-statement{font-size:var(--fs-lead);line-height:var(--lh-weit);color:var(--ink);max-width:var(--wrap);} /* 16.09.2026 Veit: Karriere-Einleitung nutzt die Seitenbreite statt der 560px-Spalte, wie .intro-invers auf der Startseite (08.09.2026). Ueberschreibt nur die Breite von .wrap-text, Zentrierung bleibt */
.usp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);}
.usp-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px 18px;font-size:var(--fs-xs);color:var(--muted);position:relative;border-bottom:2px solid transparent;}
.usp-card::before{content:'';position:absolute;top:8px;left:8px;width:10px;height:10px;border-top:1.5px solid rgba(0,159,227,.3);border-left:1.5px solid rgba(0,159,227,.3);}
.usp-card b{display:block;color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);font-weight:600;margin-bottom:6px;}

/* Komplexität-Sektion (Kunden-Masterplan §17: echtes Schema-Diagramm statt
   Chip-Wolke + Text-Pfeil, Korrektur 20.08.2026 nach Kundenfeedback zum
   Mood-Board — Gewerke-Boxen über SIGMA-blaue Linien zu „Ihr Projekt“, dann
   zu „SIGMA“, technische-Zeichnung-Optik statt Comic). Zwei Varianten
   derselben Aussage, per Breakpoint umgeschaltet: eine breite Fächer-SVG
   (.komplexitaet-diagram-desktop) und eine gestapelte Variante für schmale
   Bildschirme (.komplexitaet-diagram-mobil), weil 12 einzelne Fächer-Linien
   unter 900px nicht mehr lesbar wären. */
.b-komplexitaet{background:var(--paper);padding:var(--pad-section);}
.b-komplexitaet h2,.b-komplexitaet h3{font-size:var(--fs-h2);margin-bottom:18px;}
.komplexitaet-diagram{margin:36px 0 8px;}
.komplexitaet-diagram svg{width:100%;height:auto;display:block;}
.komplexitaet-diagram-mobil{display:none;text-align:center;}
.gewerke-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.gewerke-chip{font-size:var(--fs-xs);background:var(--cream);color:var(--muted);border-radius:var(--radius-pill);padding:8px 14px;}
.komp-pfeil{display:block;width:24px;height:34px;margin:6px auto;}
.komplexitaet-hub{display:inline-block;background:var(--cream);border:1.5px solid var(--blue);border-radius:var(--radius-card);padding:14px 22px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--blue-deep);}
.komplexitaet-sigma{display:inline-block;background:var(--blue-deep);color:var(--paper);border-radius:var(--radius-card);padding:14px 30px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:var(--fs-base);letter-spacing:.02em;}
.komplexitaet-kunde small{display:block;font-weight:400;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;}
.komplexitaet-projekt-rahmen{border:1.5px solid var(--blue);border-radius:var(--radius-card);padding:16px;max-width:440px;margin:0 auto;}
.komplexitaet-projekt-rahmen b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--blue-deep);margin-bottom:12px;}
.komplexitaet-result{background:var(--blue-deep);color:var(--paper);border-radius:var(--radius-card);padding:28px;text-align:center;max-width:640px;margin:32px auto 0;}
.komplexitaet-result b{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-lead);margin-bottom:6px;}
.komplexitaet-result span{font-size:var(--fs-xs);color:var(--paper-70);}

/* Verantwortung-Banner (3 Spalten, Deep Blue) */
.b-verantwortung{background:var(--blue-deep);padding:var(--pad-section);color:var(--paper);}
.b-verantwortung h2,.b-verantwortung h3{font-size:var(--fs-h2);text-align:center;margin-bottom:40px;}
.verantwortung-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);max-width:var(--wrap);margin:0 auto;}
.verantwortung-col{border-top:1.5px solid var(--paper-30);padding-top:18px;}
.verantwortung-col .phase{font-size:var(--fs-2xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px;}
.verantwortung-col p{font-size:var(--fs-sm);color:var(--paper-85);line-height:var(--lh-weit);}

/* Plan → Rendering → Realität */
/* padding-bottom bewusst kleiner als --pad-section: .b-sequenz und die
   direkt folgende .b-leh haben beide var(--cream) als Hintergrund. Mit
   voller Sektion-Polsterung auf beiden Seiten (2x 80px) wirkte der Übergang
   wie eine viel zu große Lücke, weil kein Farbwechsel ihn begrenzt (Veits
   Rückmeldung 08.09.2026). .b-leh selbst bleibt unangetastet, falls es an
   anderer Stelle wiederverwendet wird. */
.b-sequenz{background:var(--cream);padding:var(--pad-section);padding-bottom:32px;}
/* Eyebrow-Look 1:1 von .b-logos übernommen (Grundregel „Wiederkehrendes
   bündeln“) statt eigene Werte für ein zweites Cream-Eyebrow zu erfinden. */
.b-sequenz .eyebrow{font-size:var(--fs-2xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--blue-dk);font-weight:700;margin-bottom:22px;}
.sequenz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.sequenz-step{aspect-ratio:4/3;border-radius:var(--radius-card);}
/* 09.09.2026, Veit: "Plan"/"Rendering"/"Realitaet" standen links statt zentriert unter dem Bild. Ursache: die Regel zielte auf ".sequenz-step span" -- .sequenz-step ist aber das <a> um das Bild, die Caption ist ein Geschwister-<span> im umgebenden <div>, kein Nachfahre von .sequenz-step. Traf dadurch nie. Jetzt auf die neue Wrapper-Klasse .sequenz-item gezielt. */
.sequenz-item span{display:block;margin-top:10px;font-size:var(--fs-xs);color:var(--muted);text-align:center;}
/* 08.09.2026: echte Bilder in "Plan → Rendering → Realität" (siehe
   front-page.php) -- .sequenz-step traegt jetzt zusaetzlich die Klasse
   .galerie-link (Zoom-Cursor, Hover-Vergroesserung, Fokus-Ring kommen von
   dort, gleiches Muster wie die Projekt-Kacheln), hier nur die img-Fuellung
   ergaenzt, die .galerie-link von sich aus nicht mitbringt (dessen eigene
   img-Regel ist auf .galerie-grid beschraenkt). */
.sequenz-step img{width:100%;height:100%;object-fit:cover;display:block;}

/* Projekte-Teaser (Lebensmittelhandel-Landingpage) + .head-row als
   allgemeiner Baustein — seit 25.08.2026 auch in .b-leh verwendet, seit die
   Startseite keinen eigenen .b-projekte-Block mehr hat (siehe front-page.php,
   Sektion 8 entfällt: Kundenfeedback „doppelt gemoppelt"). Deshalb .head-row
   hier bewusst NICHT mehr an .b-projekte gebunden. */
.b-projekte{background:var(--paper);padding:var(--pad-section);}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;max-width:var(--wrap);margin:0 auto 24px;gap:16px;flex-wrap:wrap;}
.b-projekte h2,.b-projekte h3{font-size:var(--fs-h2);font-weight:600;}
.head-row a{font-size:var(--fs-xs);font-weight:700;color:var(--blue-dk);text-decoration:none;}
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-sm);max-width:var(--wrap);margin:0 auto;}
.proj-grid.proj-grid-featured{grid-template-columns:2fr 1fr 1fr;}
.proj-card{background:var(--cream);border-radius:var(--radius-card);height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;font-size:var(--fs-2xs);color:var(--muted);text-decoration:none;position:relative;overflow:hidden;}
.proj-grid-featured .proj-card:first-child{height:auto;grid-row:span 1;}
.proj-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:var(--z-boden);}
.proj-card .meta{position:relative;z-index:var(--z-inhalt);}
.proj-card b{display:block;color:var(--ink);font-size:var(--fs-sm);font-family:'Inter Tight',sans-serif;}

/* LEH-Kompetenz — Kategorie-Auswahl (Kunden-Masterplan §12.9), nutzt die
   bestehende "sortiment"-Taxonomie als Datenquelle (siehe HANDOVER.md:
   bewusst keine zweite, parallele Kategorieliste angelegt). */
.b-leh{background:var(--cream);padding:var(--pad-section);}
/* h2 hatte hier bisher keine eigene Größenregel und fiel auf die
   Browser-Standardgröße zurück (kleiner als alle anderen Section-Überschriften
   der Seite) — beim Aufräumen für .head-row am 25.08.2026 aufgefallen und
   mitkorrigiert. */
.b-leh h2,.b-leh h3{font-size:var(--fs-h2);}
/* Gleiche Chip-Optik wie .filter-chip auf der Projekte-Seite (08.09.2026,
   Veits Rückmeldung „Filterbuttons auf Projekte und der Startseite
   unterschiedlich groß"). .leh-chip trug noch den Stand vor der
   Kompaktheits-Anpassung vom 31.08.2026 (Folge 12, siehe Kommentar bei
   .filter-chip weiter unten) — Padding und Schriftgewicht jetzt 1:1
   übernommen statt eine zweite, abweichende Chip-Größe zu pflegen. */
.leh-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:var(--wrap);margin:0 auto 24px;}
.leh-chip{background:var(--paper);font-family:inherit;line-height:var(--lh-eng);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:6px 13px;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;text-decoration:none;transition:border-color var(--t-schnell),color var(--t-schnell),background var(--t-schnell);}
.leh-chip.active{border-color:var(--blue);color:var(--blue-dk);font-weight:600;background:rgba(0,159,227,.08);}
/* Erzwingt an genau der von sigma_chip_umbruch_index() berechneten Stelle
   einen Zeilenumbruch in .leh-chip-row/.filter-row (beide flex-wrap) —
   sonst würde der Browser erst umbrechen, wenn eine Zeile randvoll ist,
   was bei 14 bzw. 13 Chips sehr ungleiche Zeilen ergab (Veits Rückmeldung
   31.08.2026, Folge 12). Klassischer Flexbox-Trick: ein leeres Element mit
   flex-basis:100% nimmt die gesamte verbleibende Zeilenbreite ein und
   zwingt so das nächste Element in eine neue Zeile. */
.chip-zeilenumbruch{flex-basis:100%;height:0;margin:0;}

/* Featured Case */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:var(--wrap);margin:0 auto;align-items:center;}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:24px;}
.case-facts div{border-top:1px solid var(--border);padding-top:8px;}
.case-facts b{display:block;font-size:var(--fs-base);color:var(--ink);}
.case-facts span{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--track-label);}

/* Kundenstimmen — 3-spaltiges Raster, zentral über
   sigma_kundenstimmen_block() (functions.php) auf Startseite (direkt nach
   den Projektfotos, weiss zwischen den Cream-Sektionen .b-leh/.b-menschen,
   gleiches Muster wie .b-komplexitaet/.b-projekte/.b-logos) UND
   Projekte-Seite eingebunden (seit 31.08.2026, Folge 14 — ersetzt dort den
   früheren eigenen .b-quote-Block, "Testimonials der Startseite mit Optik
   übernehmen"). Karten sind bewusst schlicht (kein Kreis/Farbfläche wie
   .b-quote), Text zentriert. Aktuell 3 echte freigegebene Zitate (siehe
   sigma_get_kundenstimmen()) — bei nur einer Karte (z. B. falls eine
   Stimme mal wegfällt) greift die Modifier-Klasse
   .kundenstimmen-grid-einzeln (einspaltig, begrenzte Breite, zentriert
   statt in einer 1/3-Spalte gestreckt zu hängen). */
.b-kundenstimmen{background:var(--paper);padding:var(--pad-section);}
.kundenstimmen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);max-width:var(--wrap);margin:0 auto;}
.kundenstimmen-grid-einzeln{grid-template-columns:1fr;max-width:520px;}
/* text-align:center statt links (Veits Rückmeldung 31.08.2026, Folge 14:
   "Testimonials zentriert ausrichten") — passt zur zentrierten
   Sektionsüberschrift darüber und zum bisherigen .b-quote-Stil, den die
   Projekte-Seite vorher hatte.
   display:flex + justify-content:center (Veits Rückmeldung 08.09.2026:
   "Kundenstimmen bitte innerhalb der Box zentrieren") — die drei echten
   Zitate sind unterschiedlich lang, im Grid mit align-items:stretch (Default)
   werden alle Karten so hoch wie die längste; ohne diese Regel hing der
   Text der kürzeren Zitate oben in der Karte mit viel Leerraum darunter.
   Jetzt vertikal mittig, text-align:center bleibt für die horizontale
   Zentrierung zuständig. */
.kundenstimme-card{background:var(--cream);border-radius:var(--radius-card);padding:28px;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.kundenstimme-card blockquote{margin:0 0 16px;font-family:'Fraunces',serif;font-style:italic;font-size:var(--fs-lead);line-height:1.5;color:var(--ink);}
.kundenstimme-card figcaption{font-size:var(--fs-xs);color:var(--muted);}

/* Menschen-Sektion */
.b-menschen{background:var(--cream-dk);padding:var(--pad-section);text-align:center;}
/* max-width am 25.08.2026 von 640 auf 920px erhöht (Kundenfeedback: der Satz
   „Ihr Projekt hat einen Namen. Ihr Ansprechpartner auch." brach bei 640px
   auf drei kurze, ungünstig getrennte Zeilen — bei 920px sind es zwei
   ausgewogene). Kommentar korrigiert 31.08.2026: stand hier fälschlich
   „820px" (Tippfehler in der Doku, der CSS-Wert war stets 920px, siehe
   LOG.md 25.08.2026 Nacht — kein Funktionsfehler, nur der Kommentar war
   falsch). Eigenständige Überschriftenbreite, bewusst kein --wrap-text:
   Überschrift (--fs-h2), keine Fließtext-Spalte. */
.b-menschen h2,.b-menschen h3{font-size:var(--fs-h2);max-width:920px;margin:0 auto 32px;}

/* Zentraler Satz — Zitat-Banner (Firmenvideo-Anker) */
.b-quote{background:var(--blue-deep);padding:var(--pad-banner);text-align:center;position:relative;overflow:hidden;}
.b-quote::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border:1px solid var(--paper-12);border-radius:50%;}
.b-quote .line{width:32px;height:1px;background:var(--paper-30);margin:0 auto 20px;position:relative;}
.b-quote q{font-family:'Fraunces',serif;font-style:italic;font-size:var(--fs-quote-lg);color:var(--paper);line-height:1.4;position:relative;}
.b-quote .attr{margin-top:14px;font-size:var(--fs-2xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--paper-70);position:relative;}

/* Karriere-Teaser + Abschluss-CTA */
.b-cta{background:var(--blue-deep);padding:var(--pad-section-lg);text-align:center;color:var(--paper);overflow:hidden;}
/* Dezenter Kreis hinter der Überschrift, wie im Quote-Banner (.b-quote::before)
   — Veits Rückmeldung 31.08.2026 (Folge 12) anhand eines Beispielbilds aus
   einem anderen Projekt: dieser CTA-Block hatte als einziger der dunklen
   Vollflächen-Sektionen noch keinen Kreis. Gleiche Machart wie .b-quote
   übernommen statt einer neuen erfunden (nur eine Sorte "Kreis-Deko" im
   Theme). h2/.cta bekommen position:relative, damit sie über dem
   absolut positionierten Kreis liegen (identisches Muster wie bei .b-quote). */
.b-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border:1px solid var(--paper-12);border-radius:50%;}
.b-cta h2,.b-cta h3{font-size:var(--fs-h2);font-weight:600;margin-bottom:18px;position:relative;}
.b-cta .cta{display:inline-block;background:var(--blue-dk);color:var(--paper);padding:14px 30px;border-radius:var(--radius-btn);font-size:var(--fs-sm);font-weight:700;text-decoration:none;position:relative;}
.b-cta .cta:hover{background:#0b8fd0;}
/* Hintergrund war --ink (Nahe-Schwarz) — die einzige Stelle im ganzen Theme,
   an der Schwarz als Fläche statt als Textfarbe auftauchte (Veits Rückmeldung
   31.08.2026, Folge 12: geprüft, stimmt — --ink wird sonst ausschließlich als
   Schriftfarbe auf hellem Grund verwendet). Alle anderen dunklen Vollflächen
   (Quote-Banner, CTA, Verantwortung, Kontakt-Tab, Video-Rahmen) nutzen
   einheitlich --blue-deep — jetzt auch hier, für ein durchgängiges Blau statt
   eines Schwarz-Ausreißers. */
.b-footer{background:var(--blue-deep);padding:var(--pad-footer);color:var(--paper-55);font-size:var(--fs-xs);}
.footer-inner{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--gap-sm);}
.b-footer a{color:var(--paper-55);text-decoration:none;}
.b-footer a:hover{color:var(--paper);}
.b-footer nav{display:flex;gap:var(--gap);}
.nav-brand{display:flex;align-items:center;gap:9px;}
.nav-brand img{height:24px;width:auto;display:block;}
.nav-brand span{font-weight:700;letter-spacing:.02em;}
.b-footer .nav-brand img{height:20px;}
.b-footer .nav-brand{color:var(--paper-85);}

/* Subseiten-Hero (Team/Projekte/Kontakt/Karriere/Leistungen/Lebensmittelhandel) */
.b-subhero{min-height:340px;background:linear-gradient(180deg,rgba(11,53,80,.2) 0%,rgba(11,53,80,.68) 100%),linear-gradient(160deg,#123a52,#3d7ea3);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 20px) 32px 64px;color:var(--paper);}
.b-subhero.b-subhero-karriere{background:linear-gradient(180deg,rgba(11,53,80,.2) 0%,rgba(11,53,80,.68) 100%),linear-gradient(160deg,#0e2f45,#2c6a8c);}
.b-subhero-kompakt{min-height:190px;}
/* Nur die Fluchtlinien-Ausrichtung (dieselbe Kante wie h1/.sub darunter) —
   Farbe/Größe/Abstand kommen aus der gemeinsamen .b-hero/.b-subhero-Regel
   weiter oben, hier NICHT erneut setzen (das hätte sie zuletzt überschrieben). */
.b-subhero .eyebrow{max-width:var(--wrap);margin-left:auto;margin-right:auto;width:100%;}
/* Zeilenabstand wie im Startseiten-Hero (Veit 01.10.2026: lange Stellentitel
   brechen auf drei Zeilen, mit dem Fließtext-Durchschuss 1.7 klafften sie auseinander). */
.b-subhero h1,.b-subhero h2{font-size:var(--fs-h1);font-weight:600;max-width:var(--wrap);margin:0 auto;width:100%;line-height:1.08;}
.b-subhero .sub{margin-top:12px;font-size:var(--fs-base);color:var(--paper-85);max-width:var(--wrap);margin-left:auto;margin-right:auto;width:100%;}

/* Über SIGMA / Team — 2 Spalten, größere Karten mit Bio */
.b-team{background:var(--paper);padding:var(--pad-section);}
/* Intro-Zeile: Text links (--wrap-text-breite über .lead-in), Foto-
   Platzhalter rechts statt Leerfläche — margin-bottom trennt bewusst
   deutlicher von der Foto-Reihe darunter als das knappe .lead-in-margin
   (22px) es allein täte (Veits Rückmeldung 31.08.2026, Folge 12). */
.team-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:start;margin-bottom:48px;}
.team-intro-photo{aspect-ratio:4/3;border-radius:var(--radius-card);}
/* KI-Teambild mit kleinem Hinweis unten rechts (Veit 02.10.2026). */
.team-intro-bild{position:relative;overflow:hidden;margin:0;}
.team-intro-bild img{width:100%;height:100%;object-fit:cover;}
.ki-hinweis{position:absolute;right:8px;bottom:8px;font-size:var(--fs-2xs);line-height:var(--lh-eng);color:var(--ink);background:var(--paper-70);padding:3px 8px;border-radius:var(--radius-pill);}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);max-width:var(--wrap);margin:0 auto;}
/* Teamkarte: Foto links, Text rechts. Fotobreite am 25.08.2026 von 180px
   auf 260px erhöht und eine Mindesthöhe gesetzt (Veit: „Teamfotos einfach
   größer machen, siehe alte Seite") — 260×340 entspricht dem 3:4 der
   Vorlagen, dadurch wird nichts unschön beschnitten. */
.team-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;position:relative;display:flex;gap:0;min-height:340px;}
.team-card::before{content:'';position:absolute;top:8px;left:8px;width:10px;height:10px;border-top:1.5px solid rgba(0,159,227,.3);border-left:1.5px solid rgba(0,159,227,.3);z-index:var(--z-ueber);}
.team-photo{width:260px;min-width:260px;background:var(--cream-dk);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-2xs);text-align:center;padding:6px;overflow:hidden;}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-meta{padding:20px 22px;}
.team-meta b{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-lead);font-weight:600;}
.team-meta .role{font-size:var(--fs-2xs);color:var(--blue-dk);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;margin-bottom:10px;display:block;}
.team-meta .bio{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-kompakt);}
.team-meta .bio .personal{display:block;margin-top:8px;font-style:italic;color:var(--muted);}

/* Werte als Verhalten (Über SIGMA) */
.b-werte{background:var(--cream);padding:var(--pad-section);}
.werte-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.wert-chip{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px 20px;text-align:left;position:relative;}
.wert-chip b{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);color:var(--blue-dk);margin-bottom:8px;}
.wert-chip p{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-kompakt);}

/* Projekte-Liste */
.b-projlist{background:var(--cream);padding:var(--pad-section);}
.proj-grid-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.proj-card2{background:var(--paper);border-radius:var(--radius-card);padding:16px 18px;position:relative;overflow:hidden;border:1px solid var(--border);}
/* 31.08.2026: von festen 150px Höhe (wirkte als langgestreckter Streifen,
   Veits Rückmeldung) auf ein 3:2-Fotoformat umgestellt — skaliert mit der
   Kartenbreite, auf allen Uebersichten identisch. */
.proj-card2 .ph{aspect-ratio:3/2;border-radius:var(--radius-card);background:var(--cream-dk);margin-bottom:12px;overflow:hidden;}
.proj-card2 .ph img{width:100%;height:100%;object-fit:cover;}
/* Titel + Ort auf einer Zeile (31.08.2026, Veits Rückmeldung — vorher
   zwei Zeilen durch display:block auf beiden). " · " als Trenner steht im
   Markup selbst, nicht als CSS-Pseudoelement (::before), damit er wie an
   den anderen " · "-Stellen im Theme als echter Text lesbar bleibt.
   Läuft der Text nicht auf eine Zeile, bricht er wie normaler Fließtext
   um — kein fester Container nötig. */
.proj-card2 b{display:inline;font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);color:var(--ink);}
.proj-card2 .ort{font-size:var(--fs-2xs);color:var(--muted);display:inline;}
.proj-card2 .desc{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-kompakt);margin-bottom:12px;}
/* Stichwort-Tags: am 25.08.2026 erst zu grauem Text zurückgestuft, am
   31.08.2026 auf Veits Vorgabe KOMPLETT aus der sichtbaren Darstellung
   entfernt („nur im Bauch behalten") — die Filterung hängt weiterhin am
   unsichtbaren data-sortiment-Attribut der Karten, dafür braucht es kein
   sichtbares Element und kein CSS mehr. */
/* Kachelbild als Lightbox-Auslöser (31.08.2026): der Link füllt die feste
   .ph-Bühne komplett, die Rundung/Beschneidung übernimmt weiter .ph. */
.proj-card2 .ph .galerie-link{height:100%;border-radius:0;background:none;}
.proj-card2 .ph .galerie-link img{transition:transform var(--t) ease;}
@media (prefers-reduced-motion:reduce){
  .proj-card2 .ph .galerie-link img{transition:none;}
}
/* Filterleiste (Projekte-Seite) am 25.08.2026 aufgeräumt (Kundenfeedback
   „sieht unaufgeräumt aus, zu breit und zweizeilig"): Checkbox-Quadrat raus
   (der aktive Zustand ist über Rahmen-/Textfarbe schon eindeutig erkennbar),
   Chips selbst kompakter, damit spürbar mehr in eine Zeile passt. */
/* justify-content:center (31.08.2026, Veits Rückmeldung): bei vielen
   Chips (13 Sortiment-Begriffe) blieb die letzte Zeile links hängen, mit
   viel leerem Raum rechts daneben — wirkte unfertig. Zentriert wirkt die
   zweite (kürzere) Zeile wie bewusst darunter platziert statt wie Reste.
   Gleiche Anpassung an .leh-chip-row unten, selbe Ursache. */
.filter-row{display:flex;gap:6px;margin-bottom:22px;font-size:var(--fs-xs);flex-wrap:wrap;justify-content:center;max-width:var(--wrap);margin-left:auto;margin-right:auto;}
.filter-chip{background:var(--paper);font-family:inherit;font-size:var(--fs-xs);line-height:var(--lh-eng);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:6px 13px;color:var(--muted);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;transition:border-color var(--t-schnell),color var(--t-schnell),background var(--t-schnell);}
.filter-chip.active{border-color:var(--blue);color:var(--blue-dk);font-weight:600;background:rgba(0,159,227,.08);}
.proj-empty{display:none;grid-column:1/-1;text-align:center;color:var(--muted);font-size:var(--fs-xs);padding:40px 0;}

/* Projekt-Detail: Facts-Leiste + Ablauf-Abschnitte (CPT-Erweiterung 20.08.2026) */
.projekt-facts-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap-lg);}
.projekt-facts-grid div{border-top:1px solid var(--border);padding-top:8px;}
.projekt-facts-grid b{display:block;font-size:var(--fs-sm);color:var(--ink);}
.projekt-facts-grid span{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--track-label);}
.b-projekt-story{background:var(--paper);padding:var(--pad-section);}

/* ── Projektgalerie + Lightbox (25.08.2026) ──────────────────────────
   Erste Sektion mit echtem Kunden-Bildmaterial (71 Fotos aus neun
   Referenzprojekten). Bewusst ein ruhiges 3-Spalten-Raster mit festem
   Seitenverhältnis: die Vorlagen kommen aus Handy- UND Profikamera und
   mischen Hoch- und Querformat — ohne feste Kachelhöhe entsteht daraus
   eine unruhige Treppe. Werte durchgängig aus den Tokens oben. */
.projekt-galerie{max-width:100%;}
.projekt-galerie h2,.projekt-galerie h4{font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--blue-dk);margin-bottom:14px;}
.galerie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.galerie-link{display:block;overflow:hidden;border-radius:var(--radius-card);background:var(--cream-dk);cursor:zoom-in;}
.galerie-grid .galerie-link{aspect-ratio:4/3;}
.galerie-grid .galerie-link img{width:100%;height:100%;object-fit:cover;transition:transform var(--t) ease;}
.galerie-link:hover img{transform:scale(1.04);}
.galerie-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

/* Lightbox — wird per JS (assets/js/main.js) an <body> gehängt und ist
   ohne JS gar nicht vorhanden; die Bild-Links funktionieren dann als
   normale Links auf die Bilddatei, die Seite bleibt bedienbar. */
.sigma-lightbox{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(11,53,80,.94);padding:32px 72px 56px;}
.sigma-lightbox img{flex:1 1 auto;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--radius-card);}
/* Fusszeile: Sprungleiste (Miniaturen) + Bildunterschrift, gemeinsam unten
   zentriert (31.08.2026, Veits Rückmeldung — direkt zu einem Bild springen
   können statt sich durchzuklicken). Ersetzt die vorherige einzeln
   positionierte .sigma-lightbox-bildunterschrift.
   Korrektur 31.08.2026 (Folge 12): stand hier auf position:absolute;bottom:14px
   — dadurch lag die Fusszeile deckungsgleich UEBER dem unteren Bildrand statt
   darunter, denn das <img> (max-height:100%) durfte den kompletten verfuegbaren
   Raum inkl. des Streifens ausfuellen, auf dem die Fusszeile schwebte (Veits
   Screenshot-Rueckmeldung: Miniaturen ragten ins grosse Bild hinein). Jetzt
   echtes Flex-Kind (kein absolute mehr): .sigma-lightbox ist flex-direction
   column, das <img> bekommt flex:1 1 auto + min-height:0 und schrumpft sich
   dadurch automatisch auf den Platz, der NACH Abzug der Fusszeile uebrig
   bleibt — kein Ueberlappen mehr moeglich, ganz ohne Magic-Number-Reservierung. */
.sigma-lightbox-footer{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 72px;max-width:100%;}
.sigma-lightbox-thumbs{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px;-webkit-overflow-scrolling:touch;}
.sigma-lightbox-thumb{flex:0 0 auto;width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:var(--radius-btn);overflow:hidden;cursor:pointer;background:var(--paper-12);opacity:.6;transition:opacity var(--t),border-color var(--t);}
.sigma-lightbox-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sigma-lightbox-thumb:hover{opacity:.9;}
.sigma-lightbox-thumb.ist-aktuell{opacity:1;border-color:var(--blue-bright);}
.sigma-lightbox-bildunterschrift{text-align:center;color:var(--paper-85);font-size:var(--fs-xs);}
/* Nur die drei Steuer-Buttons (direkte Kinder von .sigma-lightbox) —
   bewusst NICHT als Nachfahren-Selektor (.sigma-lightbox button), sonst
   ueberschreibt diese Regel auch die Sprungleisten-Miniaturen weiter unten
   im DOM (gleiche Spezifitaet, aber diese Regel kommt spaeter — alle
   Miniaturen landen dann deckungsgleich auf position:absolute ohne
   Offsets). Kindselektor > spiegelt die tatsaechliche DOM-Struktur.
   Bug gefunden per Playwright-Klicktest, 31.08.2026. */
.sigma-lightbox > button{position:absolute;background:var(--paper-85);color:var(--ink);border:0;border-radius:var(--radius-pill);width:44px;height:44px;font-size:var(--fs-lead);line-height:1;cursor:pointer;}
.sigma-lightbox > button:hover{background:var(--paper);}
.sigma-lightbox-zu{top:18px;right:18px;}
.sigma-lightbox-zurueck{left:18px;top:50%;transform:translateY(-50%);}
.sigma-lightbox-weiter{right:18px;top:50%;transform:translateY(-50%);}


/* Kontakt */
.b-kontakt{background:var(--paper);padding:var(--pad-section);}
.b-kontakt .grid2{max-width:var(--wrap);margin:0 auto;}
.kontakt-info{background:var(--cream);border-radius:var(--radius-card);padding:28px;font-size:var(--fs-sm);color:var(--muted);line-height:1.9;}
.kontakt-info b{color:var(--ink);}
.form-mock{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;}
.form-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block;}
.form-field{margin-bottom:16px;}
.form-field input,.form-field textarea,.form-field select{width:100%;background:var(--cream-dk);border:1px solid transparent;border-radius:var(--radius-btn);padding:9px 12px;font-family:'Inter',sans-serif;font-size:var(--fs-sm);color:var(--ink);}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--blue);background:var(--paper);}
.form-field textarea{min-height:120px;resize:vertical;}
.form-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.form-field input[type="file"]{background:transparent;border:1.5px dashed #c9c2b0;padding:14px 12px;cursor:pointer;}
.form-hint{font-size:var(--fs-2xs);color:var(--muted);margin-top:4px;display:block;}
.form-btn{display:inline-block;background:var(--blue-dk);color:var(--paper);padding:12px 26px;border-radius:var(--radius-btn);font-size:var(--fs-sm);font-weight:700;border:none;cursor:pointer;font-family:'Inter',sans-serif;}
.form-btn:hover{background:var(--blue-dk);}
.form-msg{padding:12px 16px;border-radius:var(--radius-card);font-size:var(--fs-xs);margin-bottom:16px;}
.form-msg.success{background:rgba(0,159,227,.1);color:var(--blue-dk);}
.form-msg.error{background:rgba(226,61,61,.1);color:#b23a3a;}

/* FAQ-Sektion (Startseite/Kontakt) */
.b-faq{background:var(--cream);padding:var(--pad-section);}
.b-faq h2,.b-faq h3{font-size:var(--fs-quote-lg);font-weight:600;margin-bottom:18px;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0;} /* bewusst an jedem Item, nicht nur „letztes in der Spalte“ — bei 2 Spalten ist die Position des letzten Items abhängig von der (künftig wachsenden) Gesamtzahl, ein fixes :last-of-type wäre bei ungerader Anzahl falsch */
.faq-item summary{cursor:pointer;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-base);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:var(--fs-icon);color:var(--blue-dk);flex:none;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin-top:10px;font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-weit);}

/* Karriere */
.b-benefits{background:var(--paper);padding:var(--pad-section);}
.b-benefits h2,.b-benefits h3{margin-bottom:10px;font-size:var(--fs-quote-sm);}
/* Benefits/gesuchte-Profile-Pillreihe (Karriere-Seite) — nutzt dieselben
   Tokens wie der Rest (radius-pill, cream, border), bewusst als simple
   Pillreihe statt Karten, weil die Items nur Kurz-Label ohne Beschreibung
   sind (siehe HANDOVER.md/Fragekatalog-Antworten Frage 22/23).
   justify-content:center ergänzt (Veits Rückmeldung 31.08.2026, Folge 12:
   "leere Flächen ... statt nur links zu bleiben") — dieselbe Lösung wie
   bereits bei .leh-chip-row/.filter-row (Folge 8), bewusst wiederverwendet
   statt neu erfunden. */
.benefits-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-sm);max-width:var(--wrap);margin:0 auto;}
.benefit-pill{display:inline-flex;align-items:center;padding:9px 16px;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--ink);}
/* Vorteile als vier thematische Kacheln (#88, 11.09.2026, externes Feedback
   „in Kacheln denken und in verschiedenen Farben“). Die Farben sind die vier
   Blautöne, die es im Designsystem schon gibt, von tief nach hell — keine
   neuen Farben. Dunkle Töne mit weißer, helle mit dunkler Schrift; alle vier
   Paare erreichen mindestens 4.5:1 Kontrast. */
.vorteile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.vorteil-kachel{border-radius:var(--radius-card);padding:24px 22px;text-align:left;}
.vorteil-kachel h3{font-family:'Inter Tight',sans-serif;font-size:var(--fs-lead);font-weight:600;margin-bottom:14px;}
.vorteil-kachel ul{list-style:none;display:flex;flex-direction:column;gap:var(--gap-sm);}
.vorteil-kachel li{position:relative;padding-left:16px;font-size:var(--fs-sm);line-height:var(--lh-eng);}
.vorteil-kachel li::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:currentColor;}
.vorteil-kachel-tief{background:var(--blue-deep);color:var(--paper);}
.vorteil-kachel-dunkel{background:var(--blue-dk);color:var(--paper);}
.vorteil-kachel-marke{background:var(--blue);color:var(--ink);}
.vorteil-kachel-hell{background:var(--blue-bright);color:var(--ink);}
.b-mission{background:var(--blue-deep);padding:var(--pad-banner);text-align:center;color:var(--paper);}
.b-mission q{font-family:'Fraunces',serif;font-style:italic;font-size:var(--fs-quote-sm);line-height:1.5;}

/* Offene Stellen (Karriere) — seit 01.10.2026 Kacheln mit Bild, die auf
   die Landingpage der Stelle führen (vorher Aufklappliste im FAQ-Stil,
   Punkt #37). Erscheint nur, wenn veröffentlichte Stellen existieren. */
.b-stellen{background:var(--paper);padding:var(--pad-section);}
.stellen-kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-lg);}
.stelle-kachel{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;text-decoration:none;color:var(--ink);}
/* Subgrid (Veit 01.10.2026: „Ausrichtung sollte gleich sein“): Bild, Titel,
   Eckdaten, Kurztext und Link liegen in beiden Kacheln auf denselben
   Zeilen, auch wenn ein Titel eine Zeile länger ist. Der Textblock gibt
   seine Kinder dafür direkt an das Raster weiter (display:contents). */
.stelle-kachel img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.stelle-kachel-text{display:contents;}
.stelle-titel{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-lead);color:var(--ink);padding:24px 22px 0;}
.stelle-meta{display:flex;gap:8px;flex-wrap:wrap;align-content:start;padding:var(--gap-sm) 22px 0;}
.stelle-kachel-kurz{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-weit);padding:var(--gap-sm) 22px 0;}
.stelle-kachel-link{align-self:end;font-size:var(--fs-sm);font-weight:700;color:var(--blue-dk);padding:var(--gap-sm) 22px 24px;}

/* Bildreihe Karriere (01.10.2026): drei Standbilder aus dem Imagevideo. */
.b-bildreihe{padding:var(--pad-section-sm);}
.bildreihe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.bildreihe-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card);}

/* Knopfreihe im dunklen Seitenkopf (Karriere, Stellen, Bewerben) — dieselbe
   Fluchtlinie wie h1/.sub darüber. */
.b-subhero .btn-row{max-width:var(--wrap);margin-left:auto;margin-right:auto;width:100%;display:flex;flex-wrap:wrap;gap:var(--gap-sm);}

/* Stellen-Landingpage (single-stelle.php). Seit 01.10.2026 abends in
   Bändern statt einer langen Textspalte neben einer Bildspalte (Veit:
   „links rechts springen, Aufzählungen kompakter“): je Band Text und ein
   Blickfang nebeneinander, die Seiten wechseln von Band zu Band, der
   Hintergrund auch. Aufzählungen stehen als zweispaltiges Raster. */
.b-stelle-band{background:var(--paper);padding:var(--pad-section-sm);}
.b-stelle-band.b-stelle-band-cream{background:var(--cream);}
.stelle-band-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg) 64px;align-items:center;}
.stelle-band-umgekehrt > .stelle-text{order:2;}
.stelle-text h2{font-size:var(--fs-h3);margin-bottom:10px;}
.stelle-text p{margin-bottom:12px;}
.stelle-text p:last-child{margin-bottom:0;}
.stelle-text-einzeln{max-width:820px;}
.stelle-blick-paar{align-self:start;}
.stelle-band-grid:has(.stelle-blick-paar){align-items:start;}
.stelle-band-bild{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--border);}
.stelle-blick-bild{display:flex;flex-direction:column;gap:var(--gap);}
.stelle-liste-kopf{font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px;}
.stelle-liste.stelle-liste-breit{grid-template-columns:repeat(3,minmax(0,1fr));}
.stelle-liste{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-sm);}
.stelle-liste li{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-btn);padding:10px 12px 10px 30px;font-size:var(--fs-sm);line-height:var(--lh-eng);}
.stelle-liste li::before{content:'';position:absolute;left:12px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.b-stelle-band-cream .stelle-liste li{background:var(--paper);}
.b-stelle-band:not(.b-stelle-band-cream) .stelle-liste li{background:var(--cream);}
.stelle-fakten{background:var(--cream);border-radius:var(--radius-card);padding:24px 22px;}
.stelle-fakten dt{font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);}
.stelle-fakten dd{font-size:var(--fs-sm);margin-bottom:12px;}
.stelle-kasten{background:var(--blue-deep);color:var(--paper);border-radius:var(--radius-card);padding:32px 28px;}
.stelle-kasten p{color:var(--paper-85);font-size:var(--fs-sm);margin-bottom:18px;}
.stelle-kasten .stelle-kasten-satz{font-family:'Inter Tight',sans-serif;font-size:var(--fs-h3);font-weight:600;color:var(--paper);margin-bottom:10px;}

/* Bewerbungsablauf: Kopf mit Porträt, Einleitung und Knopf mittig über
   den fünf Kacheln (Veit 02.10.2026: vorher gedrungen und links am Rand). */
.ablauf-kopf{display:flex;align-items:center;justify-content:center;gap:40px;max-width:900px;margin:8px auto 48px;}
.ablauf-kopf .ablauf-portraet{width:180px;flex:none;}
.ablauf-kopf-text .lead-in{max-width:none;margin-bottom:0;}
.ablauf-portraet{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-card);}

/* Bewerbungsformular (page-bewerben.php). */
.bewerbung-info{align-self:start;}
.bewerbung-info p{margin-bottom:12px;}
/* Alle Fragen auf einer Seite (02.10.2026). */
.bew-frage{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:8px;}
.bew-frage-feld{margin-bottom:22px;}
.bew-frage.bew-frage-kontakt{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);}
.bew-datenschutz{margin-top:12px;}
.bewerbung-portraet{width:120px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-card);margin-bottom:16px;}

/* Leistungen — 8-Schritte-Prozess (neue Seite, 20.08.2026) */
.b-prozess{background:var(--paper);padding:var(--pad-section);}
/* 12.10.2026 Veit (iPhone): auf der Karriere-Seite stand zwischen den Bereichs-Pills und „Wie läuft eine Bewerbung ab?“ doppelter Abstand, weil zwei gleichfarbige Blöcke je ihr volles Polster mitbrachten. */
.b-benefits + .b-prozess{padding-top:0;}
/* Fest auf 4 Kacheln je Zeile (Veits Rückmeldung 31.08.2026, Folge 12) —
   vorher repeat(auto-fit,minmax(250px,1fr)), was bei --wrap (1360px) und
   8 Schritten 5+3 statt gleichmäßiger Zeilen ergab. Feste Spaltenzahl
   statt auto-fit, mit Umbruch auf 2 (Tablet, siehe 900px-Media-Query) und
   1 Spalte (Mobil, 640px-Media-Query). */
.prozess-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
/* Bewerbungsablauf mit fünf Kacheln (01.10.2026) — alle in einer Zeile. */
.prozess-list.prozess-list-fuenf{grid-template-columns:repeat(5,1fr);}
.prozess-step{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-card);padding:24px 20px;}
.prozess-step .num{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-quote-sm);font-weight:700;color:var(--blue);margin-bottom:10px;}
.prozess-step h3,.prozess-step h4{font-size:var(--fs-lead);margin-bottom:6px;}
.prozess-step p{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-weit);}

/* Lebensmittelhandel-Landingpage — Problemfelder (neue Seite, 20.08.2026) */
.b-problemfelder{background:var(--cream);padding:var(--pad-section);}
.problemfelder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:var(--wrap);margin:0 auto;}
.problemfeld-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);padding:22px 20px;}
.problemfeld-card b{display:block;font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);margin-bottom:8px;}
.problemfeld-card p{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-kompakt);}

/* Kontakt-Tab — global sticky Seitenrand-Element */
.contact-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:var(--z-nav);display:flex;align-items:center;}
/* Nur im geoeffneten Zustand strecken, damit Griff+Panel wie eine Box wirken —
   im Ruhezustand wuerde align-items:stretch den (nur unsichtbar breiten-
   reduzierten, aber weiterhin voll hohen) Panel-Inhalt auf den Griff
   uebertragen und ihn dadurch riesig wirken lassen (Bugfix 30.08.2026). */
.contact-tab.open,.contact-tab:hover{align-items:stretch;}
.contact-tab-handle{background:var(--blue-deep);border-radius:var(--radius-card) 0 0 var(--radius-card);padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:-4px 0 18px rgba(11,53,80,.28);border:1px solid var(--paper-12);border-right:none;}
.contact-tab-label-vert{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--fs-2xs);letter-spacing:var(--track-weit);text-transform:uppercase;color:var(--paper-85);white-space:nowrap;font-weight:600;}
.contact-tab-panel{background:var(--blue-deep);max-width:0;overflow:hidden;transition:max-width var(--t-panel) cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 18px rgba(11,53,80,.28);}
.contact-tab.open .contact-tab-panel,.contact-tab:hover .contact-tab-panel{max-width:230px;}
.contact-tab-panel-inner{width:230px;padding:24px 20px;}
.contact-tab-panel-inner h2,.contact-tab-panel-inner h4{font-family:'Inter Tight',sans-serif;font-size:var(--fs-lead);font-weight:600;color:var(--paper);margin-bottom:4px;}
.contact-tab-panel-inner .sub{font-size:var(--fs-2xs);color:var(--paper-55);margin-bottom:16px;line-height:1.5;}
.contact-tab-btn{display:block;text-align:center;text-decoration:none;font-size:var(--fs-2xs);letter-spacing:var(--track-label);color:var(--paper-90);border:1px solid var(--paper-30);padding:10px 14px;border-radius:var(--radius-pill);margin-bottom:8px;font-weight:600;transition:background var(--t-schnell),border-color var(--t-schnell);}
.contact-tab-btn:hover{background:var(--paper-12);border-color:var(--paper-55);}
.contact-tab-btn.primary{background:var(--blue-dk);border-color:var(--blue-dk);}
.contact-tab-btn.primary:hover{background:var(--blue-dk);}
.social-links{margin-top:10px;}

/* WordPress core: Bild-Ausrichtungen/Beschriftungen, damit Redaktionsinhalte (z. B. Karriere/Team über den Editor) nicht ungestylt bleiben */
.alignleft{float:left;margin:0 20px 16px 0;}
.alignright{float:right;margin:0 0 16px 20px;}
.aligncenter{display:block;margin:0 auto 16px;}
.wp-caption-text{font-size:var(--fs-xs);color:var(--muted);text-align:center;}
.screen-reader-text{position:absolute;left:-9999px;}
/* Sprunglink: liegt außerhalb des Sichtfelds, springt bei Tastaturfokus
   sichtbar herein (Code-Review 25.08.2026). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--paper);color:var(--ink);padding:12px 20px;font-size:var(--fs-sm);font-weight:700;text-decoration:none;border-radius:0 0 var(--radius-btn) 0;}
.skip-link:focus{left:0;}

@media (max-width:900px){
  /* Der fixierte Kontakt-Griff liegt über dem rechten Seitenrand und hat
     dort Überschriften, Fließtext, den 404-Button und den rechten Rand der
     Projektgalerie verdeckt. Unterhalb 900px bekommt der Inhalt deshalb
     rechts die Breite des Griffs als Sicherheitsabstand. (Code-Review
     25.08.2026) */
  .block{padding-right:56px;}
  .galerie-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid,.proj-grid-list,.case-grid,.sequenz-grid,.problemfelder-grid,.kundenstimmen-grid,.team-intro{grid-template-columns:1fr;}
  .team-intro-photo{aspect-ratio:16/9;}
  .prozess-list,.prozess-list.prozess-list-fuenf{grid-template-columns:repeat(2,1fr);}
  .stellen-kacheln,.stelle-band-grid,.bildreihe-grid{grid-template-columns:1fr;}
  /* Gestapelt: Text immer zuerst, Blickfang danach. */
  .stelle-band-umgekehrt > .stelle-text{order:0;}
  .stelle-liste.stelle-liste-breit{grid-template-columns:repeat(2,minmax(0,1fr));}
  .usp-grid{grid-template-columns:1fr;}
  .proj-grid,.proj-grid.proj-grid-featured{grid-template-columns:1fr 1fr;}
  .grid2{grid-template-columns:1fr;}
  .werte-grid{grid-template-columns:repeat(2,1fr);}
  .vorteile-grid{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  .verantwortung-grid{grid-template-columns:1fr;}
  .proof-row{grid-template-columns:1fr 1fr;}
  .form-field-row{grid-template-columns:1fr;}
  /* KEIN display:none hier — Zeile ~211 versteckt das Menü bereits über
     max-height:0 und klappt es mit .nav-links-open auf. Ein display:none
     an dieser Stelle hat dieselbe Spezifität, steht aber später und
     gewann: der Burger meldete aria-expanded="true", das Menü blieb
     unsichtbar, und auf Mobilgeräten gab es gar keine Navigation mehr.
     (gefunden im Code-Review 25.08.2026) */
  .nav-burger{display:block;}
  /* Komplexität-Diagramm: 12 Fächer-Linien wären unter 900px nicht mehr
     lesbar (SVG skaliert per viewBox mit, aber die Textlabel würden auf
     Handybreite unlesbar klein) — deshalb gestapelte Variante statt
     verkleinerter Fächer-SVG, siehe front-page.php. */
  .komplexitaet-diagram-desktop{display:none;}
  .komplexitaet-diagram-mobil{display:block;}
}
/* 12.10.2026 Tablet (iPad hochkant, 641 bis 1023px), nach Veits Bitte, die Seite auf dem iPad anzusehen: Filter-Chips mit dem Desktop-Umbruch standen 7/5/2, die Kennzahlen ließen „1:1“ allein, Projekte liefen einspaltig mit sehr großen Fotos. */
@media (min-width:641px) and (max-width:1023px){
  .chip-zeilenumbruch{display:none;}
  .leh-chip-row,.filter-row{gap:var(--gap-sm);}
  .leh-chip,.filter-chip{flex:0 0 calc((100% - 3 * var(--gap-sm)) / 4);justify-content:center;text-align:center;}
  .proof-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
  .b-leh .head-row{flex-direction:column;align-items:center;text-align:center;}
}
@media (min-width:641px) and (max-width:900px){
  .proj-grid-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .projekt-hero-bild-innen{aspect-ratio:4/3;}
  .galerie-grid{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm);}
  .sigma-lightbox{padding:12px 62px 48px;}
  .sigma-lightbox-footer{padding:0 12px;gap:6px;}
  .sigma-lightbox-thumb{width:40px;height:40px;}
  .b-video,.b-quote,.b-projekte,.b-logos,.b-cta,.b-subhero,.b-projlist,.b-kontakt,.b-werte,.b-mission,.b-team,.b-komplexitaet,.b-verantwortung,.b-sequenz,.b-leh,.b-menschen,.b-prozess,.b-problemfelder,.b-projekt-story,.b-kundenstimmen,.b-stellen,.b-bildreihe,.b-stelle-band{padding-left:20px;padding-right:20px;}
  .stelle-liste,.stelle-liste.stelle-liste-breit{grid-template-columns:1fr;}
  .b-hero{min-height:640px;padding-left:20px;padding-right:20px;}
  .team-card{flex-direction:column;}
  /* 16.10.2026 Veit (Handy): der flache Rahmen über die volle Breite schnitt
     Kinn und Mund ab und vergrößerte die 480px-Fotos unscharf. Seitdem steht
     das Foto im Hochformat 3:4 mittig, so schmal wie auf dem Computer. */
  .team-photo,.team-grid-kompakt .team-photo{width:220px;min-width:0;height:auto;aspect-ratio:3/4;margin:24px auto 0;padding:0;}
  .team-photo img{object-position:50% 0;}
  .team-grid-kompakt .team-card{min-height:0;}
  .contact-tab-handle{padding:12px 7px;}
  .werte-grid{grid-template-columns:1fr;}
  .vorteile-grid{grid-template-columns:1fr;}
  .hero-slide-titel{right:20px;}
  .prozess-list,.prozess-list.prozess-list-fuenf{grid-template-columns:1fr;}
  .ablauf-kopf{flex-direction:column;align-items:flex-start;gap:var(--gap-lg);}
  .ablauf-kopf .ablauf-portraet{width:120px;}
  .proj-grid,.proj-grid.proj-grid-featured{grid-template-columns:1fr;}
  .proof-row{grid-template-columns:1fr 1fr;}
  /* 12.10.2026 Veit (iPhone): Die erzwungenen Umbrüche sind für die Desktop-Breite gerechnet. Auf dem Handy standen die Filter-Chips dadurch versetzt. Filter stehen in zwei gleich breiten Spalten, Kopf der Projekt-Vorschau mittig wie die Chips darunter. */
  .chip-zeilenumbruch{display:none;}
  .logo-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* Der Kontakt-Griff liegt rechts über dem Rand; die Logoleiste hält auf beiden Seiten Abstand, damit kein Logo darunter verschwindet und die Mitte erhalten bleibt. */
  .b-logos{padding-left:44px;padding-right:44px;}
  .leh-chip-row,.filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-sm);}
  .leh-chip,.filter-chip{text-align:center;justify-content:center;}
  .b-leh .head-row{flex-direction:column;align-items:center;text-align:center;}
  /* Ungerade Zahl Kennzahlen: die letzte steht mittig statt allein links. */
  .proof-item:last-child:nth-child(odd){grid-column:1 / -1;}
}