/* ==========================================================================
   tag-der-azubis.info — Projekt-Stylesheet
   --------------------------------------------------------------------------
   Portierung des Claude-Design-Entwurfs (Inline-Styles) in ein Klassensystem.
   Siehe PROJEKT.md (Tokens), UMSETZUNG.md (Architektur), MODULE.md (Zuordnung).

   REGELN
   - Alles unterhalb von .tda-band verschachteln. Diese Datei kann
     installationsweit geladen werden; der Namensraum verhindert, dass Regeln
     auf Eclipse-X-Seiten streuen.
   - Layout/Mehrspaltigkeit kommt von Eclipse AutoGrid. Hier steht nur Farbe,
     Typografie, Abstand und Komponentenoptik.
   - .tda-cols--* sind Fallback-Raster fuer die Vorschau (design/preview.html)
     und fuer Stellen, an denen kein AutoGrid gesetzt ist. In Contao uebernimmt
     AutoGrid; die Klassen stoeren dort nicht.

   ABWEICHUNGEN VOM ENTWURF (bewusst, siehe Abschnitt 12 unten)
   - Sechs Kontrastkorrekturen fuer BFSG, zwei davon sichtbar.
   - Rasterverhaeltnisse auf AutoGrid-Presets gezogen (UMSETZUNG.md).
   ========================================================================== */


/* 1 — Schriften ============================================================
   Selbst gehostet, kein CDN, kein preconnect.

   Brush Up setzt die Ueberschriften, Montserrat den Fliesstext (Variable
   Font, Achse wght 100–900 — die 700/800 rendern echt statt synthetisch).

   ⚠ Brush Up ist eine **Versalschrift** — Klein- und Grossbuchstaben liefern
   dieselbe Form. Ueberschriften erscheinen durchgehend in Versalien,
   unabhaengig davon, wie die Redaktion sie schreibt.

   Subsets erzeugt am 19.08.2026 mit fonttools (pyftsubset, --no-hinting):

     Brush Up     448 KB → 264 KB
     Montserrat   384 KB →  33 KB   (als woff2 statt TTF)
     zusammen     832 KB → 297 KB   (–64 %)

   Beide mit demselben Umfang: latin + Latin Extended-A. Das deckt
   tuerkische, polnische und tschechische Namen ab (Şahin, Gökçe, Łukasz) —
   bei einer Kampagne ueber Azubis in Deutschland keine Kleinigkeit. Bei
   Montserrat kostet das 4,5 KB, bei Brush Up 25 KB; ohne diesen Umfang
   faellt ein einzelnes Zeichen mitten im Wort auf eine Ersatzschrift zurueck.

   Brush Up bleibt der Brocken: Eine Pinselschrift besteht fast nur aus
   Kontur (ueber 1 MB `glyf` unkomprimiert), da hilft Subsetting wenig. Ein
   auf die reine Verwendung zugeschnittener Umfang haette weitere 52 KB
   gebracht, dafuer waeren alle Akzente weggefallen.

   ⚠ **U+2192 (→) gehoert nicht zum Standard-latin-Subset.** Der Pfeil steht
   in jedem `.tda-link`; ohne ihn im Zeichenumfang faellt er auf eine
   Ersatzglyphe zurueck. Deshalb ist der ganze Pfeilblock U+2190–2193
   aufgenommen. Beim naechsten Subset daran denken.

   ⚠ Brush Up **enthaelt den Pfeil ueberhaupt nicht** — schon im Original
   nicht. Das faellt nicht auf, weil `.tda-link` im Fliesstext laeuft und
   Montserrat ihn hat. Ein Pfeil in einer Ueberschrift wuerde dagegen aus der
   Ersatzschrift kommen.

   Nicht eingebunden: der kursive Schnitt „Brush Up Too". Die einzige kursive
   Stelle im Projekt ist die Interviewantwort in Modul 8 und laeuft im
   Fliesstext.

   Die Originale liegen unveraendert unter design/Fonts/.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Brush Up';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../tda/fonts/brushup-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../tda/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2 — Tokens ===============================================================
   Auf .tda-band gesetzt, nicht auf :root — damit die Werte nicht in fremde
   Seiten derselben Installation lecken.
   ------------------------------------------------------------------------ */

.tda-band {
  /* Farben */
  --tda-dark:          #111111;
  --tda-dark-2:        #161616;   /* Modul 6, minimal abgesetzt */
  --tda-accent:        #ee7e0b;
  --tda-accent-hover:  #f4952f;
  /* ENTSCHEIDUNG 14.08.2026 (Martin): nur EIN Orange, der Markenton.
     Die beiden Tokens unten waren Kontrastkorrekturen und zeigen jetzt beide
     auf --tda-accent. Sie bleiben als Angriffspunkt bestehen — wer die
     Korrektur zurueckholen will, aendert genau diese zwei Zeilen und sonst
     nichts. Die Folgen sind in Abschnitt 12 gemessen festgehalten. */

  /* Akzent als TEXTFARBE auf heller Flaeche (Label, Berufsfeld-Tag,
     Interviewfrage, Pfeil-Link, Benefit-Nummer).

     Seit der Entscheidung vom 17.08.2026 steht hier der dunkle Grundton.
     Grund: Orange ist nicht mehr Keycolor, und keine der fuenf Segmentfarben
     traegt auf hellem Grund als Text (1.34–3.08:1). Die Farbe erscheint an
     diesen Stellen stattdessen als Flaeche — Balken, Kante, Hinterlegung.

     Nebeneffekt: Damit sind die 13 Textstellen erledigt, die seit dem
     14.08. bewusst unter AA lagen. Auf dunklem Grund wird dieses Token
     weiter unten auf die Bandfarbe gesetzt, dort traegt sie 5.67–13.04:1. */
  --tda-accent-text:   var(--tda-text-on-light);
  /* Orange Flaeche, auf der weisser Grosstext steht (Modul 11). Weiss traegt
     darauf 2.75:1, noetig waeren 3:1 — bewusst so entschieden.
     Korrektur waere: #e07507 (3.13:1 fuer Weiss, 6.04:1 fuer Schwarz). */
  --tda-accent-deep:   var(--tda-accent);
  --tda-light:         #f7f6f3;
  --tda-white:         #ffffff;
  --tda-text-on-light: #1c1c1a;
  --tda-rule:          #dedbd5;   /* Trennlinien auf heller Flaeche */
  --tda-hairline:      #e3e0da;   /* Logokacheln */
  --tda-hairline-dark: #262626;   /* Footer-Oberkante */

  /* Eclipse zieht seine eigenen Komponenten aus --accentColor. Ab Werk ist
     das #e90069 (Pink) — der Pressekit-Button in Modul 10 stand deshalb pink
     auf einer schwarz-orangen Seite. Im Band auf den Projektakzent umbiegen,
     dann sehen auch spaeter im Backend angelegte Eclipse-Elemente von selbst
     richtig aus, ohne dass jemand eine Klasse setzen muss. */
  --accentColor: var(--tda-accent);

  /* Segmentfarben der Kampagnenmotive (PROJEKT.md, Abschnitt 2).
     Jedes Motiv traegt eine eigene Akzentfarbe. Die Werte stehen hier, damit
     es eine Quelle gibt — im Markup werden sie derzeit nirgends verwendet,
     die Farben stecken in den Motiven selbst.

     ⚠ NUR auf dunklem Grund oder im Bild. Auf --tda-light tragen Gelb, Gruen
     und Tuerkis 1.34–1.37:1 und sind praktisch unsichtbar. Nicht fuer
     Fliesstext, Links, Buttons oder Fokusringe. Werte auf #111111 in der
     Klammer; nachgerechnet 17.08.2026. */
  --tda-seg-bau:      #53adff;   /* Bauhandwerk            209°,  7.9:1 */
  --tda-seg-shk:      #54e6ff;   /* Sanitaer/Heizung/Klima 189°, 12.7:1 */
  --tda-seg-friseur:  #40f35a;   /* Friseur, Kosmetik      129°, 12.8:1 */
  --tda-seg-erzieh:   #ffd154;   /* Erziehung, Pflege       44°, 13.0:1 */
  --tda-seg-stein:    #d659db;   /* Steinmetz, Gestaltung  298°,  5.7:1 */

  /* Sekundaertext — Kontrast geprueft, siehe Abschnitt 12 */
  --tda-muted-on-light: #6b6862;              /* 4.7:1 auf --tda-light */
  --tda-muted-on-dark:  rgba(255,255,255,.72);
  --tda-faint-on-dark:  rgba(255,255,255,.5); /* 5.3:1 auf --tda-dark */

  /* Typografie */
  --tda-font-display: 'Brush Up', cursive;
  --tda-font-text:    'Montserrat', system-ui, sans-serif;
  --tda-font-mono:    ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Masse */
  --tda-measure:  1180px;  /* Inhaltsbreite */
  --tda-gutter:   48px;    /* Innenabstand */
  --tda-band-pad: 110px;   /* Vertikaler Bandabstand, Standard */
  --tda-hero-max: 2200px;  /* Deckelung Hero-Bild, siehe UMSETZUNG.md */

  /* Bewegung */
  --tda-reveal-shift: 28px;
  --tda-reveal-time:  .7s;
}


/* 2.1 — Segmentfarben anwenden =============================================
   Die Farbe kennzeichnet ein Berufssegment, sie schmueckt nicht. Deshalb
   steht sie nur dort, wo die Seite tatsaechlich von Berufsfeldern spricht:
   an den Kampagnenmotiven (Modul 7) und an den Berufsfeld-Kacheln (Modul 4).
   Auf den dunklen Baendern gibt es keinen Segmentbezug — dort waere sie
   Dekoration und bleibt weg.

   Die Zuordnung haengt als Klasse am Inhaltselement, nicht an einer
   Position. Damit bleibt sie richtig, wenn die Redaktion umsortiert, und
   sie ist im Backend sichtbar. `--tda-seg` ist der Traeger, den die
   Komponenten unten auslesen; ohne Klasse faellt alles auf den Markenton
   zurueck.

   ⚠ Immer als FLAECHE, nie als Textfarbe. Auf --tda-light tragen Gelb,
   Gruen und Tuerkis 1.34–1.37:1 (PROJEKT.md, Abschnitt 2). Als Balken oder
   Kante ist das unkritisch, als Schrift waere es unlesbar.
   ------------------------------------------------------------------------ */

.tda-band .tda-seg--bau     { --tda-seg: var(--tda-seg-bau); }
.tda-band .tda-seg--shk     { --tda-seg: var(--tda-seg-shk); }
.tda-band .tda-seg--friseur { --tda-seg: var(--tda-seg-friseur); }
.tda-band .tda-seg--erzieh  { --tda-seg: var(--tda-seg-erzieh); }
.tda-band .tda-seg--stein   { --tda-seg: var(--tda-seg-stein); }


/* 2.2 — Leitfarbe je Band ==================================================
   ENTSCHEIDUNG 17.08.2026 (Martin): Orange ist nicht laenger Keycolor. Statt
   einer Leitfarbe fuer die ganze Seite traegt jedes Band eine Farbe aus der
   Kampagne. Die Seite laeuft damit durch dieselben fuenf Toene wie die
   Motive, statt durchgehend orange zu sein.

   Gemessen, nicht geschaetzt (17.08.2026):
   - Als FLAECHE mit dunklem Text tragen alle fuenf 5.67–13.04:1. Alle
     besser als Orange (6.86:1).
   - Als TEXT auf dunklem Grund tragen alle fuenf 5.67–13.04:1.
   - Als TEXT auf hellem Grund traegt keine ueber 3.08:1 — dort steht
     deshalb der dunkle Grundton, siehe --tda-accent-text weiter unten.

   Modul 11 bekommt Magenta, weil es als einzige Flaeche weissen Grosstext
   traegt (3.33:1, noetig 3:1) — nur so bleibt die Zweifarbigkeit der
   Ueberschrift erhalten. Module 9 und 10 bleiben farblos: dort stehen
   Partnerlogos und Kontaktdaten, die fuer sich wirken sollen.
   ------------------------------------------------------------------------ */

.tda-hero      { --tda-seg: var(--tda-seg-bau); }
.tda-was       { --tda-seg: var(--tda-seg-shk); }
.tda-zahlen    { --tda-seg: var(--tda-seg-erzieh); }
.tda-ki        { --tda-seg: var(--tda-seg-bau); }
.tda-jugend    { --tda-seg: var(--tda-seg-friseur); }
.tda-betriebe  { --tda-seg: var(--tda-seg-shk); }
.tda-story     { --tda-seg: var(--tda-seg-erzieh); }
.tda-abschluss { --tda-seg: var(--tda-seg-stein); }

/* Die Segmentklasse am einzelnen Element schlaegt die Bandfarbe — in Modul 7
   traegt so jedes Motiv seine eigene Farbe, in Modul 4 jede Kachel. */


/* 3 — Bandmuster ===========================================================
   Hintergrundfarbe am Band (randlos), Breitenbegrenzung am inneren Wrapper.
   Eclipse laeuft auf unbegrenzter Breite; die Begrenzung passiert hier.
   ------------------------------------------------------------------------ */

.tda-band {
  width: 100%;
  font-family: var(--tda-font-text);
  font-weight: 400;
  color: var(--tda-text-on-light);
  background: var(--tda-light);
  padding-block: var(--tda-band-pad);
}

.tda-band > .inside,
.tda-band > .tda-inside,
.tda-band > .container {          /* Eclipse rendert Artikel mit .container */
  max-width: var(--tda-measure);
  margin-inline: auto;
  padding-inline: var(--tda-gutter);
  width: 100%;
}

/* Baender, die ihren Innenabstand selbst regeln (Hero, Galerie) */
.tda-band--flush { padding-block: 0; }
.tda-band--flush > .inside,
.tda-band--flush > .tda-inside,
.tda-band--flush > .container { padding-inline: 0; max-width: none; }

/* Baender auf dunklem Grund */
.tda-band--dark {
  background: var(--tda-dark);
  color: var(--tda-white);
}
/* .tda-band.tda-band--dark statt .tda-band--dark: beide Regeln laegen sonst
   bei 0,1,0, und die spaetere Basisregel in Abschnitt 4 wuerde gewinnen —
   dunkler Text auf dunklem Grund. */
.tda-band.tda-band--dark :where(p) { color: var(--tda-muted-on-dark); }

/* Auf dunklem Grund traegt Farbe als Text problemlos: alle fuenf Segmenttoene
   liegen dort zwischen 5.67 und 13.04:1. Also uebernimmt das Token hier die
   Bandfarbe — ein Token statt vieler Ausnahmeregeln. Ohne Bandfarbe faellt es
   auf den Markenton zurueck (6.86:1). */
.tda-band--dark,
.tda-band.tda-betriebe,
.tda-band .tda-promptbox,
.tda-band .tda-cta--dark { --tda-accent-text: var(--tda-seg, var(--tda-accent)); }

/* Dekorativer Lichtkreis (Modul 3 und 6). Rein schmueckend, aria-hidden. */
.tda-band--glow { position: relative; overflow: hidden; }
.tda-band--glow > .inside,
.tda-band--glow > .tda-inside,
.tda-band--glow > .container { position: relative; }

.tda-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,126,11,.22), transparent 70%);
  pointer-events: none;
}
.tda-glow--tr { top: -140px; right: -140px; }
.tda-glow--bl {
  bottom: -160px; left: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(238,126,11,.18), transparent 70%);
}


/* 4 — Typografie ===========================================================
   Der Entwurf setzt Schriftgroessen per clamp(). Uebernommen, damit die
   Skalierung auf grossen Viewports erhalten bleibt.
   ------------------------------------------------------------------------ */

/* ⚠ Eclipse setzt Farben DIREKT auf Elementselektoren:
     h1-h6 {color: rgb(59,60,66)}, a {color:#555}, pre/code {color: rgb(76,76,76)}
   Vererbte Farbe verliert immer gegen eine explizite Regel, unabhaengig von
   der Spezifitaet. Ein Band, das seine Farbe nur vererbt, bekommt deshalb
   Eclipse' Dunkelgrau — auf schwarzem Grund unlesbar. Die Baender reichen
   ihre Farbe hier ausdruecklich durch. Komponenten mit eigener Farbe
   (Karte, Prompt-Box, Button …) sind spezifischer und bleiben unberuehrt. */
.tda-band h1,
.tda-band h2,
.tda-band h3,
.tda-band h4,
.tda-band h5,
.tda-band h6,
.tda-band a,
.tda-band pre,
.tda-band code,
.tda-band .tda-display { color: inherit; }

.tda-band h1,
.tda-band h2,
.tda-band h3,
.tda-band .tda-display {
  font-family: var(--tda-font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.tda-band h1 {
  font-size: clamp(48px, 6.6vw, 104px);
  line-height: 1;
  margin-bottom: 22px;
}

.tda-band h2 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.05;
  margin-bottom: 22px;
}

.tda-band h3 {
  font-size: 22px;
  line-height: 1.1;
}

/* Karten- und Kachelueberschriften laufen in Archivo, nicht im Display-Font */
.tda-band .tda-card h3,
.tda-band .tda-benefit h3 {
  font-family: var(--tda-font-text);
  font-weight: 800;
  text-transform: none;
  line-height: 1.25;
}

/* :where() setzt die Spezifitaet dieser Grundregel auf 0,1,0. Ohne das
   schlaegt `.tda-band p` (0,1,1) jede Modulklasse wie `.tda-hero__text`
   (0,1,0) — Farbe und Abstand haetten dort nie gegriffen. */
.tda-band :where(p) {
  font-size: 18px;
  line-height: 1.6;
  color: var(--tda-text-on-light);
  text-wrap: pretty;
  margin: 0 0 20px;
}
.tda-band :where(p:last-child) { margin-bottom: 0; }

/* Einleitungsabsatz unter einer h2 */
.tda-band .tda-lead { font-size: 18px; line-height: 1.65; }

/* Hervorgehobener Schlusssatz im Fliesstext — im Entwurf ein <strong> im
   Display-Font. Als Klasse, damit die Redaktion es bewusst setzt. */
.tda-band .tda-punch {
  font-family: var(--tda-font-display);
  font-weight: 400;
  font-size: 20px;
}
.tda-band--dark .tda-punch { color: var(--tda-seg, var(--tda-accent)); }

/* Quellenangabe */
.tda-band .tda-source {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tda-muted-on-light);
  margin-top: 24px;
}
.tda-band--dark .tda-source { color: var(--tda-faint-on-dark); margin-top: 28px; }

/* Kleines Label ueber einer Ueberschrift */
/* Label ueber einer Ueberschrift. Der Text ist dunkel — Farbe traegt auf
   hellem Grund nicht (Abschnitt 2.2). Die Bandfarbe steht stattdessen als
   Balken davor: dasselbe Muster wie an den Kampagnenmotiven, und damit
   bleibt die Farbe auf hellen Baendern sichtbar, ohne die Lesbarkeit zu
   kosten. Auf dunklem Grund faerbt sich der Text selbst (siehe Abschnitt 2). */
.tda-band .tda-eyebrow {
  font-family: var(--tda-font-display);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tda-accent-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tda-band .tda-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 4px;
  background: var(--tda-seg, var(--tda-accent));
}
/* Auf dunklem Grund traegt schon die Schrift die Farbe — dann waere der
   Balken doppelt gemoppelt. */
.tda-band--dark .tda-eyebrow::before,
.tda-betriebe .tda-eyebrow::before,
.tda-promptbox .tda-eyebrow::before { display: none; }
/* Zentriert gesetzte Labels behalten ihre Mitte */
.tda-intro--center .tda-eyebrow { justify-content: center; }

/* Textabschnitt mit begrenzter Zeilenlaenge */
.tda-band .tda-intro { max-width: 760px; margin-bottom: 56px; }
.tda-band .tda-intro--narrow { max-width: 680px; }
.tda-band .tda-intro--wide   { max-width: 720px; margin-bottom: 64px; }
.tda-band .tda-intro--center { margin-inline: auto; text-align: center; }

/* Zeile, die nur ein Badge traegt — Abstand zur folgenden Ueberschrift */
.tda-band .tda-badge-row { margin: 0 0 24px; }

/* Schlussabsatz eines Bandes, abgesetzt vom Raster darueber */
.tda-band .tda-closing { margin-top: 64px; max-width: 760px; }


/* Flaches Band ohne AutoGrid ==============================================
   Fuer Module, deren Kacheln nebeneinander stehen sollen, ohne dass die
   Redaktion AutoGrid-Spalten anlegen muss. Alle Elemente des Artikels liegen
   flach nebeneinander im Backend; hier bilden nur die Kacheln Spalten, alles
   Uebrige spannt ueber die volle Breite.

   Spaltenzahl ueber --tda-auto-cols am Artikel (Standard 3).
   Vorteil gegenueber AutoGrid: Die Redaktion kann Kacheln ergaenzen oder
   loeschen, ohne eine Rasterstruktur zu pflegen.
   ------------------------------------------------------------------------ */

.tda-band--auto > .inside,
.tda-band--auto > .container {
  display: grid;
  grid-template-columns: repeat(var(--tda-auto-cols, 3), 1fr);
  gap: 32px;
  /* kein align-items: Kacheln einer Reihe sollen buendig schliessen */
}
/* Standard: volle Breite */
.tda-band--auto > .inside > *,
.tda-band--auto > .container > * { grid-column: 1 / -1; }

/* Ausnahme: Kacheln belegen je eine Spalte */
.tda-band--auto > .inside > .tda-counter,
.tda-band--auto > .container > .tda-counter,
.tda-band--auto > .inside > .tda-card,
.tda-band--auto > .container > .tda-card,
.tda-band--auto > .inside > .tda-benefit,
.tda-band--auto > .container > .tda-benefit,
.tda-band--auto > .inside > .tda-cta,
.tda-band--auto > .container > .tda-cta { grid-column: auto; }

/* AutoGrid — der vorgesehene Weg =========================================
   Eclipse' AutoGrid rendert `.autogrid_grid` (Rasterelement) bzw.
   `.row` > `.column` > `.attributes` (Reihe/Spalte). Die Spaltenzahl steuert
   die Redaktion im Backend, getrennt fuer Desktop, Tablet und Mobil — genau
   das, was UMSETZUNG.md als Layoutweg vorsieht.

   Unsere Kacheln muessen darin genauso aussehen wie im .tda-band--auto.
   Deshalb hier dieselbe Optik, nur an AutoGrids Markup gehaengt. AutoGrid
   bringt das Raster selbst mit; wir setzen nur Abstand und Innenleben.
   ------------------------------------------------------------------------ */

.tda-band .autogrid_grid { gap: 32px; }

/* AutoGrids Gutter wirkt nur zwischen Spalten. Bricht eine Reihe um (2×2),
   stossen die Kacheln senkrecht aneinander — hier der fehlende Zeilenabstand. */
.tda-band .autogrid_row { row-gap: 32px; }

/* Ohne min-width:0 darf eine Spalte nicht unter ihre Mindest-Inhaltsbreite
   schrumpfen. Lange Woerter („Technik vor Ort") sprengen dann die Reihe, und
   drei col_4 brechen auf 2+1 um, obwohl sie rechnerisch genau aufgehen. */
.tda-band .autogrid_row > .column { min-width: 0; }

/* AutoGrid legt um jeden Spalteninhalt ein .attributes-Div. Das darf das
   Kachel-Layout nicht unterbrechen. */
.tda-band .column > .attributes { height: 100%; }
.tda-band .column > .attributes > .tda-cta,
.tda-band .column > .attributes > .tda-card,
.tda-band .column > .attributes > .tda-benefit { height: 100%; }

/* Etikett-Counter zaehlen auch ueber AutoGrid-Spalten hinweg */
:is(.tda-band .tda-cards--fakt, .tda-band.tda-cards--fakt) .autogrid_grid,
:is(.tda-band .tda-cards--num, .tda-band.tda-cards--num) .autogrid_grid { counter-reset: none; }


/* ⚠ .tda-band--auto ist ein Notbehelf und soll wieder verschwinden ========
   Es bildet Spalten in reiner CSS und war ein Fehlgriff: AutoGrid kann
   dasselbe, plus Steuerung je Breakpoint im Backend. Bis die Module 3, 5, 6
   und 11 auf AutoGrid umgebaut sind, bleibt es hier — danach ersatzlos
   entfernen. Neue Module nicht mehr damit bauen.
   ------------------------------------------------------------------------ */

/* Spaltenzahl als Klasse, weil das Backend nur CSS-Klassen setzen kann und
   keine Custom Properties. */
.tda-band--auto-2 { --tda-auto-cols: 2; }
.tda-band--auto-4 { --tda-auto-cols: 4; }

/* Contao verpackt jeden Fliesstext in <div class="rte">. Wo eine Komponente
   ihr Layout selbst stellt, darf dieser Wrapper nicht dazwischenliegen —
   sonst bekommt das Flex-/Grid-Elternteil genau ein Kind statt vieler.
   display:contents blendet ihn aus der Box-Erzeugung aus; er traegt weder
   Hintergrund noch Abstand, es geht also nichts verloren. */
.tda-band .tda-callout > .rte,
.tda-band .tda-cta > .rte,
.tda-band .tda-actions > .rte,
.tda-band .tda-hero__nav > .rte,
.tda-band .tda-hero__badges > .rte,
.tda-band .tda-hero__actions > .rte,
.tda-band .tda-poster > .rte,
.tda-band .tda-field > .rte,
.tda-band .tda-story__portrait > .rte { display: contents; }

@media (max-width: 1024px) {
  .tda-band--auto > .inside,
  .tda-band--auto > .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tda-band--auto > .inside,
  .tda-band--auto > .container { grid-template-columns: 1fr; }
}


/* 5 — Raster-Fallback ======================================================
   In Contao liefert AutoGrid die Spalten. Diese Klassen sind der Fallback
   fuer die Vorschau und fuer Redaktionsfaelle ohne AutoGrid.
   ------------------------------------------------------------------------ */

.tda-band .tda-cols { display: grid; gap: 24px; }
.tda-band .tda-cols--2 { grid-template-columns: repeat(2, 1fr); }
.tda-band .tda-cols--3 { grid-template-columns: repeat(3, 1fr); }
.tda-band .tda-cols--4 { grid-template-columns: repeat(4, 1fr); }

/* Zweispalter mit weitem Rinnstein (Modul 2, 4, 8) */
.tda-band .tda-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.tda-band .tda-split--top    { align-items: start; }
.tda-band .tda-split--33-66  { grid-template-columns: 1fr 2fr; gap: 72px; }
.tda-band .tda-split--66-33  { grid-template-columns: 2fr 1fr; gap: 48px; }


/* 6 — Buttons und Badges ===================================================
   Kanten bleiben scharf (border-radius 0) — Entwurfsvorgabe.
   ------------------------------------------------------------------------ */

/* Der Button ist entweder selbst ein <a> (im Fliesstext) oder ein Element,
   das einen <a> enthaelt (Contaos Hyperlink-Element). Beide Formen tragen
   dieselbe Optik; der innere Link erbt Farbe und legt sich ueber die ganze
   Flaeche, damit Eclipse' a{color:#555} nicht durchschlaegt. */
/* Contaos Hyperlink-Element gibt dem Link die Klasse .hyperlink_txt, die
   Eclipse einfaerbt. Der Button gibt seine Farbe vor, nicht das Theme. */
.tda-band .tda-btn > a,
.tda-band .tda-btn > a.hyperlink_txt {
  display: block;
  margin: -18px -32px;
  padding: 18px 32px;
  color: inherit;
  text-decoration: none;
}

.tda-band .tda-btn {
  display: inline-block;
  font-family: var(--tda-font-text);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  padding: 18px 32px;
  border: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.tda-band .tda-btn--primary { background: var(--tda-seg, var(--tda-accent)); color: var(--tda-dark); }
.tda-band .tda-btn--primary:hover,
.tda-band .tda-btn--primary:focus-visible { background: var(--tda-accent-hover); color: var(--tda-dark); }

.tda-band .tda-btn--light { background: rgba(255,255,255,.95); color: var(--tda-dark); }
.tda-band .tda-btn--light:hover,
.tda-band .tda-btn--light:focus-visible { background: var(--tda-white); color: var(--tda-dark); }

.tda-band .tda-btn--dark { background: var(--tda-dark); color: var(--tda-white); }
.tda-band .tda-btn--dark:hover,
.tda-band .tda-btn--dark:focus-visible { background: #2b2b2b; color: var(--tda-white); }

/* Kontur — nur auf dunklem Grund. Fuer den zweiten Knopf in einer Gruppe,
   der neben einem --primary nicht gleich laut sein soll (Modul 4). */
.tda-band .tda-btn--outline {
  background: transparent;
  color: var(--tda-white);
  border-color: rgba(255,255,255,.45);
}
.tda-band .tda-btn--outline:hover,
.tda-band .tda-btn--outline:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: var(--tda-white);
  color: var(--tda-white);
}

.tda-band .tda-btn--block { display: block; width: 100%; text-align: center; }

/* Hyperlink-Element: die Backend-Klasse landet am Wrapper .ce_hyperlink, der
   Link liegt darin (Falle „Klasse am Wrapper, Struktur tiefer"). Der Wrapper
   traegt also unsere Button-Optik korrekt — aber Eclipse legt dem <a> darin
   eine eigene Flaeche in --accentColor unter, die das ueberdeckt. Beim
   Pressekit-Button in Modul 10 stand deshalb weisser Text auf Eclipse-Pink
   (4.5:1, knapp durchgefallen) statt weiss auf Schwarz.

   Deshalb: Flaeche und Abstand wandern an das <a>, damit die Klickflaeche der
   Buttonflaeche entspricht, und die Farben kommen vom Wrapper. */
.tda-band .ce_hyperlink.tda-btn { padding: 0; display: inline-block; }
.tda-band .ce_hyperlink.tda-btn > .hyperlink_txt {
  display: block;
  background: none;
  color: inherit;
  text-decoration: none;
  padding: 18px 32px;
  /* ⚠ Die Regel weiter oben (.tda-btn > a) zieht den Link um -18/-32 nach
     aussen — richtig, solange der Wrapper das Padding traegt. Hier traegt es
     der Link selbst, der Wrapper steht auf 0. Ohne dieses Zuruecksetzen
     ragte der Link 32 px links und rechts ueber seinen Wrapper hinaus:
     der Pressekit-Button in Modul 10 stand bei 720 px auf -10 statt 20, und
     im breiten Partner-Button (Modul 6) klebte die Beschriftung am linken
     Rand statt 32 px innen. Gemessen 21.08.2026. */
  margin: 0;
}

/* ⚠ Eclipse legt dem <a> im Hyperlink-Element einen 2-px-Rahmen in
   `--accentColor` an. Weil wir diese Variable im Band auf den Projektakzent
   umbiegen (Abschnitt 2, gegen Eclipse-Pink), erschien er als oranger Rahmen
   um die Buttonflaeche — am deutlichsten beim Pressekit-Button in Modul 10,
   wo das Band keine eigene Farbe traegt und `--tda-seg` auf Orange
   zurueckfaellt. In den farbigen Baendern lag derselbe Rahmen in der
   Bandfarbe und fiel nur weniger auf.

   Der Button soll seine Flaeche zeigen, nicht eine Kontur des Themes.
   Die Flaeche liegt am Wrapper, der Rahmen gehoert also weg — und zwar bei
   allen Buttonformen, nicht nur im Presseband.

   ⚠ Der Fokusindikator haengt an `outline` (Abschnitt 12), nicht an `border`.
   Er bleibt davon unberuehrt; gegengeprueft 24.08.2026. */
.tda-band .tda-btn > a,
.tda-band .tda-btn > a.hyperlink_txt,
.tda-band .ce_hyperlink.tda-btn > .hyperlink_txt { border: 0; }

/* Zeile aus Button und Begleittext */
.tda-band .tda-actions {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tda-band .tda-actions__note { font-size: 15px; color: var(--tda-muted-on-light); }
.tda-band--dark .tda-actions__note,
.tda-betriebe .tda-actions__note { color: rgba(255,255,255,.65); }

/* Textlink mit Pfeil (Modul 11) */
.tda-band .tda-link {
  font-weight: 800;
  font-size: 16px;
  color: var(--tda-accent-text);
  text-decoration: none;
}
.tda-band .tda-link:hover { text-decoration: underline; }

/* Badge — kleines gekipptes Etikett */
.tda-band .tda-badge {
  display: inline-block;
  background: var(--tda-seg, var(--tda-accent));
  color: var(--tda-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  transform: rotate(-1deg);
}
.tda-band .tda-badge--light { background: var(--tda-white); transform: rotate(1deg); }
.tda-band .tda-badge--dark  {
  background: var(--tda-dark);
  color: var(--tda-seg, var(--tda-accent));
  font-family: var(--tda-font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 8px 16px;
}

/* Sticker — Bildunterschrift als aufgeklebtes Schild */
.tda-band .tda-sticker {
  display: inline-block;
  background: var(--tda-white);
  color: var(--tda-dark);
  font-family: var(--tda-font-display);
  font-size: 14px;
  padding: 9px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.tda-band .tda-sticker--dark {
  background: var(--tda-dark);
  color: var(--tda-white);
  font-size: 16px;
  padding: 10px 18px;
  box-shadow: 0 8px 24px rgba(17,17,17,.25);
}

/* Inline hervorgehobener Platzhalter, z. B. [Pressekontakt]
   Farbe explizit setzen: Die Flaeche ist hell, das umgebende Band kann dunkel
   sein — sonst erbt der Text dessen Weiss und verschwindet. */
.tda-band .tda-mark {
  background: #eeece8;
  color: var(--tda-dark);
  padding: 2px 8px;
}
.tda-band .tda-mark--accent {
  background: var(--tda-seg, var(--tda-accent));
  color: var(--tda-dark);
  font-weight: 700;
}
/* Auf dunklem Grund stattdessen die durchscheinende Variante */
.tda-band--dark .tda-mark,
.tda-betriebe .tda-mark {
  background: rgba(255,255,255,.12);
  color: var(--tda-white);
}


/* 7 — Komponenten ==========================================================
   Drei davon haben eine Twig-Variante (siehe UMSETZUNG.md, Abschnitt 3):
   tda_counter, tda_card, tda_qa.
   ------------------------------------------------------------------------ */

/* 7.1 Zahlenkachel — Twig-Variante tda_counter, Modul 3 --------------------
   Der sichtbare Text ist der Endwert. data-target treibt nur die Animation,
   ohne JS steht die richtige Zahl da. */
.tda-band .tda-counter {
  border-top: 4px solid var(--tda-seg, var(--tda-accent));
  padding-top: 24px;
}
.tda-band .tda-counter--white { border-top-color: var(--tda-white); }

.tda-band .tda-counter__value {
  font-family: var(--tda-font-display);
  font-size: clamp(44px, 4.6vw, 70px);
  line-height: 1.05;
  color: var(--tda-white);
  font-variant-numeric: tabular-nums;
}
.tda-band .tda-counter__label {
  font-size: 17px;
  line-height: 1.5;
  color: var(--tda-muted-on-dark);
  max-width: 300px;
  margin: 12px 0 0;
}
/* Contaos rich_text_component liefert <div class="… rte"><p>…</p></div>.
   Der innere Absatz soll die Kacheltypografie erben, nicht die Basisregel. */
.tda-band .tda-counter__label p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* 7.2 Karte — Twig-Variante tda_card, Module 4, 5, 6 ----------------------- */
.tda-band .tda-card {
  position: relative;
  background: var(--tda-white);
  border: 2px solid var(--tda-dark);
  padding: 36px 32px 32px;
  box-shadow: 8px 8px 0 var(--tda-seg, var(--tda-accent));
}
/* Karte 3 im Entwurf mit schwarzem statt orangem Schlagschatten.
   Als Modifier, nicht als Inline-Style (MODULE.md, Modul 5). */
.tda-band .tda-card--dark { box-shadow: 8px 8px 0 var(--tda-dark); }

.tda-band .tda-card h3 { font-size: 24px; margin: 0 0 12px; color: var(--tda-dark); }
.tda-band .tda-card p  { font-size: 16px; }

/* Etikett aus der Reihenfolge erzeugt, nicht redaktionell gepflegt.
   Dadurch stimmt die Nummerierung auch nach Umsortieren oder Loeschen.
   Der Zaehler laeuft am Raster, das Etikett entsteht an der Karte. */
/* Die Rasterklasse sitzt je nach Kontext an unterschiedlichen Stellen:
   in der Vorschau am Raster-Div INNERHALB des Bandes, in Contao am Artikel
   und damit AM Band selbst. :is() deckt beide ab; Nachfahren-Selektor statt
   ">", weil Contao die Elemente zusaetzlich in .container einpackt. */
:is(.tda-band .tda-cards--fakt, .tda-band.tda-cards--fakt),
:is(.tda-band .tda-cards--num, .tda-band.tda-cards--num) { counter-reset: tda-card; }

:is(.tda-band .tda-cards--fakt, .tda-band.tda-cards--fakt) .tda-card::before,
:is(.tda-band .tda-cards--num, .tda-band.tda-cards--num) .tda-benefit::before {
  counter-increment: tda-card;
  display: inline-block;
  font-family: var(--tda-font-display);
}

:is(.tda-band .tda-cards--fakt, .tda-band.tda-cards--fakt) .tda-card::before {
  content: 'Fakt ' counter(tda-card);
  font-size: 15px;
  color: var(--tda-white);
  background: var(--tda-dark);
  padding: 5px 12px;
  margin-bottom: 18px;
  transform: rotate(-1.5deg);
}

:is(.tda-band .tda-cards--num, .tda-band.tda-cards--num) .tda-benefit::before {
  content: counter(tda-card, decimal-leading-zero);
  font-size: 34px;
  line-height: 1;
  color: var(--tda-accent-text);
  margin-bottom: 14px;
}
:is(.tda-band .tda-cards--num, .tda-band.tda-cards--num) .tda-benefit--dark::before { color: var(--tda-dark); }

/* Karte ohne Etikett */
.tda-band .tda-card--plain::before,
.tda-band .tda-benefit--plain::before { content: none; }

/* Benefit-Kachel — Twig-Variante tda_card, nummeriert (Modul 6) */
.tda-band .tda-benefit {
  background: var(--tda-light);
  padding: 34px 30px;
}
.tda-band .tda-benefit__num {
  font-family: var(--tda-font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--tda-accent-text);
  margin-bottom: 14px;
}
.tda-band .tda-benefit--dark .tda-benefit__num { color: var(--tda-dark); }
.tda-band .tda-benefit h3 { font-size: 21px; margin: 0 0 12px; color: var(--tda-dark); }
/* Farbe explizit: Die Kachel ist hell, steht aber auf einem dunklen Band.
   Ohne diese Zeile erbt sie dessen weissen Text und wird unlesbar. */
.tda-band .tda-benefit p  { font-size: 15.5px; color: var(--tda-text-on-light); }

/* Berufsfeld-Kachel (Modul 4, drei kleine Kacheln) */
/* Die drei Kacheln stehen in einer col_7-Spalte (~600 px) — damit passen die
   Masse des Entwurfs. Bei 50/50 waeren sie auf 2+1 umgebrochen. */
.tda-band .tda-field {
  background: var(--tda-white);
  border: 2px solid var(--tda-dark);
  padding: 20px 18px;
  /* Oberkante traegt die Segmentfarbe (Abschnitt 2.1). Ohne Segmentklasse
     bleibt sie im dunklen Grundton, die Kachel sieht dann aus wie zuvor. */
  border-top: 7px solid var(--tda-seg, var(--tda-dark));
}
.tda-band .tda-field__tag {
  font-family: var(--tda-font-display);
  font-size: 15px;
  color: var(--tda-accent-text);
  margin-bottom: 8px;
}
.tda-band .tda-field__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tda-dark);
}

/* 7.3 Interview-Paar — Twig-Variante tda_qa, Modul 8 -----------------------
   Als <dl> ausgezeichnet (MODULE.md). dt/dd tragen die Optik, das umgebende
   <dl> nur den Abstand. */
/* .tda-qa      — Hueller um alle Paare (Contao: Grid-Spalte oder Wrapper)
   .tda-qa__item — ein Contao-Element, traegt die Optik
   .tda-qa__pair — das <dl> aus der Twig-Variante, ein Paar */
.tda-band .tda-qa {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
}
.tda-band .tda-qa__item {
  background: var(--tda-light);
  padding: 28px 32px;
  border-left: 4px solid var(--tda-seg, var(--tda-accent));
}
.tda-band .tda-qa__pair { margin: 0; }
.tda-band .tda-qa__pair dt {
  font-family: var(--tda-font-display);
  font-size: 16px;
  color: var(--tda-accent-text);
  margin-bottom: 10px;
}
.tda-band .tda-qa__pair dd {
  font-size: 16.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--tda-text-on-light);
  margin: 0;
}
.tda-band .tda-qa__pair dd p { font-size: inherit; font-style: inherit; }

/* Pull-Quote */
/* Groesse am 08.09.2026 angehoben (vorher clamp(26px, 2.6vw, 38px)): Das Zitat
   soll den Interviewblock abschliessen und nicht wie ein weiterer Absatz
   wirken. Es bleibt bewusst unter der h2 (clamp(38px, 4vw, 58px)) — sonst
   konkurriert es mit der Bandueberschrift. */
.tda-band .tda-quote {
  font-family: var(--tda-font-display);
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.25;
  color: var(--tda-dark);
  margin: 56px 0 0;
  padding: 0;
}

/* 7.4 Meta-Prompt-Box (Modul 4) -------------------------------------------
   Der Prompt steht als Text im <pre>, nicht im JavaScript — dadurch
   redaktionell aenderbar und ohne JS lesbar. */
/* Die Box ist entweder ein eigenes Element oder — in AutoGrid — direkt die
   Spalte. Im zweiten Fall traegt .column die Klasse; der Innenabstand gehoert
   dann an .attributes, sonst sitzt der Hintergrund am falschen Kasten. */
.tda-band .tda-promptbox {
  background: var(--tda-dark);
  padding: 40px 36px;
  position: sticky;
  top: 32px;
}
.tda-band .column.tda-promptbox { padding: 0; }
.tda-band .column.tda-promptbox > .attributes { padding: 40px 36px; }
.tda-band .tda-promptbox h3 {
  font-size: 26px;
  color: var(--tda-white);
  margin: 0 0 16px;
}
.tda-band .tda-promptbox p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tda-muted-on-dark);
  margin: 0 0 24px;
}
/* Contao verpackt die Dachzeile in ein <p>, und die Regel darueber machte
   sie grau, groesser und haengte 24 px Abstand an — live stand sie dadurch
   losgeloest ueber der Ueberschrift statt in der Bandfarbe direkt darauf.
   In der Vorschau fehlt das <p>, dort fiel es nie auf. */
.tda-band .tda-promptbox .tda-eyebrow p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Kommt aus Contaos Code-Element: <div class="tda-prompt"><pre><code>.
   Die Optik gehoert an das <pre>, nicht an den Wrapper — sonst laeuft der
   Code aus dem Kasten. Eclipse faerbt pre/code zusaetzlich selbst. */
.tda-band .tda-prompt {
  margin: 0 0 20px;
  background: none;
  border: 0;
  padding: 0;
}
.tda-band .tda-prompt pre,
.tda-band .tda-prompt code {
  display: block;
  background: #000;
  border: 0;
  color: #cfcfcf;
  font-family: var(--tda-font-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.tda-band .tda-prompt pre {
  border: 1px solid #333;
  padding: 18px 20px;
  max-height: 200px;
  overflow: auto;
  margin: 0;
}
/* Contao/Eclipse haengt highlight.js an den Code (Klasse .hljs) und faerbt
   Hintergrund und Text selbst.

   ⚠ Eclipse setzt `code, pre { color: rgb(76,76,76) !important }`. Gegen ein
   !important verliert jede Spezifitaet — die Regel hier lief deshalb bis
   14.08.2026 ins Leere, und der Prompt stand als Dunkelgrau auf Schwarz:
   2.45:1, praktisch unlesbar. Gemessen mit scripts/kontrast-audit.js gegen
   die echte Seite; in der Vorschau faellt es nicht auf, weil dort das
   Eclipse-Bundle fehlt. Nur `color` braucht das !important — Hintergrund,
   Padding und display gewinnen ueber Spezifitaet. */
.tda-band .tda-prompt pre,
.tda-band .tda-prompt pre code,
.tda-band .tda-prompt code.hljs {
  padding: 0;
  background: transparent;
  color: #cfcfcf !important;
}
.tda-band .tda-prompt pre { background: #000; padding: 18px 20px; }
/* Die Kontur-Variante braucht ihren Rahmen — sonst steht der Knopf als
   blosser Text im Kasten. */
.tda-band .tda-copy:not(.tda-btn--outline) { border: none; }

/* Zwei Wege: Berufswahltest vor dem Prompt (11.09.2026) ----------------------
   Auf Wunsch von einstieg.com steht der Berufswahltest als erster Weg in der
   Box, der Meta-Prompt folgt nach einem Trenner „oder mit KI". Bis dahin lief
   der Test als graue Zeile unter dem Kopier-Knopf.

   Die Rangfolge macht die Prominenz, nicht die Farbe: Der Test bekommt eine
   eigene Flaeche mit Kante in der Bandfarbe und den Hauptknopf, der
   Kopier-Knopf tritt auf Kontur zurueck. Zwei gleich laute Knoepfe
   untereinander schwaechen sich gegenseitig.

   ⚠ Kein Gelb aus dem einstieg.com-Logo: Das Band laeuft in Blau, und Gelb
   ist die Segmentfarbe Erziehung/Pflege (PROJEKT.md, Abschnitt 2).

   Contao: Textelement mit Klasse am Wrapper, Ueberschrift als h4, der Knopf
   als Link im Textfeld. Der Trenner ist ein eigenes Textelement, damit die
   Redaktion ihn umformulieren kann. */
.tda-band .tda-promptbox__test {
  margin: 8px 0 0;
  padding: 22px 24px 24px;
  background: rgba(255,255,255,.06);
  border-left: 4px solid var(--tda-seg, var(--tda-accent));
}
.tda-band .tda-promptbox__test h4 {
  font-family: var(--tda-font-text);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tda-white);
  margin: 0 0 8px;
}
.tda-band .tda-promptbox .tda-promptbox__test p { margin: 0 0 18px; }
.tda-band .tda-promptbox .tda-promptbox__test p:last-child { margin-bottom: 0; }
/* Die Flaeche ist schmaler als die Box — der Knopf darf umbrechen, statt
   ueber die Kante zu laufen. */
.tda-band .tda-promptbox__test .tda-btn { white-space: normal; }

.tda-band .tda-promptbox__oder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
}
.tda-band .tda-promptbox__oder::before,
.tda-band .tda-promptbox__oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #3a3a3a;
}
.tda-band .tda-promptbox .tda-promptbox__oder p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tda-muted-on-dark);
}
/* Schmal liegen drei Innenabstaende ineinander (Band, Box, Testflaeche).
   Bei 390 px blieben fuer den Text 226 px, der Knopf brach zweizeilig um.
   Box und Flaeche geben hier Rand ab, damit der Inhalt Platz behaelt. */
@media (max-width: 720px) {
  .tda-band .tda-promptbox,
  .tda-band .column.tda-promptbox > .attributes { padding: 28px 20px; }
  .tda-band .column.tda-promptbox { padding: 0; }
  .tda-band .tda-promptbox__test { padding: 18px 16px 18px 18px; }
  .tda-band .tda-promptbox__test .tda-btn { padding-inline: 16px; }
}
/* Tablet, gestapelt (`col_12_t`): Eclipse gibt der Spalte hier 16 px
   Innenabstand, die dunkle Flaeche liegt aber an der Spalte — sie stand
   dadurch 16 px ueber die Kacheln darueber hinaus (16..752 statt 32..736 bei
   768 px). Die Flaeche wandert deshalb an den inneren Wrapper. */
@media (min-width: 768px) and (max-width: 1024px) {
  .tda-band .column.tda-promptbox[class*="col_12_t"] { background: none; }
  .tda-band .column.tda-promptbox[class*="col_12_t"] > .attributes { background: var(--tda-dark); }
}

/* 7.5 Faktenzeile mit Trennlinien (Modul 2) ------------------------------- */
/* Kommt aus Contaos Beschreibungslisten-Element. Die Klasse sitzt am
   Element-Wrapper, die eigentliche <dl> liegt eine Ebene tiefer — das Raster
   gehoert deshalb an die Liste, nicht an den Wrapper.
   Mit grid-auto-flow:column fuellt jedes dt/dd-Paar eine Spalte, statt
   zeilenweise durchzulaufen. */
/* Eclipse legt um Beschreibungslisten einen gerundeten Kasten mit Rahmen —
   der Entwurf will nur die schwarze Oberkante. */
.tda-band .tda-facts {
  margin-top: 72px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.tda-band .tda-facts dl {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  margin: 0;
  padding: 0;
  /* Eclipse legt um <dl> einen gerundeten Kasten — hier nicht. */
  background: none;
  border: 0;
  /* Die Oberkante traegt die Bandfarbe — auf hellem Grund der einzige
     Farbtraeger dieses Moduls, seit die Etiketten dunkel sind. 5 px, damit
     die Farbe ueber die volle Breite auch wirklich traegt. */
  border-top: 5px solid var(--tda-seg, var(--tda-dark));
  border-radius: 0;
}
.tda-band .tda-facts dt {
  padding: 26px 28px 8px;
  border-right: 1px solid var(--tda-rule);
  font-family: var(--tda-font-display);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tda-accent-text);
  background: none;
}
.tda-band .tda-facts dd {
  margin: 0;
  padding: 0 28px 26px;
  border-right: 1px solid var(--tda-rule);
  font-size: 17px;
  font-weight: 600;
  color: var(--tda-dark);
  background: none;
}
.tda-band .tda-facts dt:last-of-type,
.tda-band .tda-facts dd:last-of-type { border-right: 0; }
/* Als <dl> ausgezeichnet — <dd> bringt einen Browser-Einzug mit, der weg muss */
.tda-band .tda-facts dd { margin: 0; }
.tda-band .tda-facts__value {
  font-size: 17px;
  font-weight: 600;
  color: var(--tda-dark);
}

/* 7.6 Aufmerksamkeitsleiste (Modul 5) ------------------------------------- */
.tda-band .tda-callout {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--tda-seg, var(--tda-accent));
  padding: 36px 40px;
}
.tda-band .tda-callout__text { flex: 1; min-width: 300px; }
/* Der Entwurf setzt beides weiss. Weiss auf #ee7e0b traegt aber nur 2.75:1 —
   das reisst auch die Grosstext-Schwelle von 3:1. Deshalb hier durchgehend
   der dunkle Grundton (6.86:1). Rueckgaengig machen heisst: beide color-Werte
   auf var(--tda-white) setzen. */
.tda-band .tda-callout__head {
  font-family: var(--tda-font-display);
  font-size: 26px;
  color: var(--tda-dark);
  margin-bottom: 6px;
}
.tda-band .tda-callout p {
  font-size: 16px;
  color: var(--tda-dark);
  margin: 0;
}

/* 7.7 Abschlusskarte (Modul 11) ------------------------------------------- */
.tda-band .tda-cta {
  background: var(--tda-white);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tda-band .tda-cta h3 { font-size: 22px; margin: 0; color: var(--tda-dark); }
.tda-band .tda-cta p  { font-size: 15.5px; margin: 0; }

/* Der Link sitzt in allen drei Karten auf gleicher Hoehe, egal wie lang der
   Text darueber ist.

   ⚠ Vorher hing das daran, dass sich der Absatz dehnt (`flex: 1` am <p>).
   Das traegt nur, solange genau ein Absatz da ist und nichts dazwischen
   liegt — sobald die Redaktion einen zweiten Absatz anlegt oder Contao einen
   .rte-Wrapper einzieht, teilen sich mehrere Elemente den Rest und der Link
   wandert. `margin-top: auto` verankert ihn direkt am unteren Rand und ist
   von der Zahl der Absaetze unabhaengig. */
.tda-band .tda-cta > .tda-link,
.tda-band .tda-cta > .rte > .tda-link { margin-top: auto; }

/* ⚠ Der Link steht nicht in jeder Karte als eigenes Element. Legt die
   Redaktion ihn im Textfeld an, verpackt Contao ihn in einen Absatz — dann
   greift die Regel oben nicht, und genau eine Karte hat ihren Link woanders.
   Am 18.08.2026 im Browser gemessen: 36 / 71 / 36 px Abstand zum Kartenrand.

   Der Absatz wird deshalb genauso verankert. `display: flex` nimmt ihm die
   Zeilenbox, die ihn sonst 3 px hoeher sitzen liesse. Gemessen nach der
   Korrektur: 36 / 36 / 36. */
.tda-band .tda-cta > p:has(> .tda-link) {
  margin-top: auto;
  display: flex;
}
.tda-band .tda-cta--dark { background: var(--tda-dark); }
.tda-band .tda-cta--dark h3 { color: var(--tda-seg, var(--tda-accent)); }
.tda-band .tda-cta--dark p  { color: rgba(255,255,255,.85); }


/* 8 — Module ===============================================================
   Nur was nicht ueber die Komponenten oben abgedeckt ist.
   ------------------------------------------------------------------------ */

/* 8.1 Hero (Modul 1) ------------------------------------------------------
   MODULE.md will Badges, Ueberschrift, Text und Buttons als GETRENNTE
   Elemente, damit die Redaktion sie einzeln pflegen kann. Contao legt sie
   deshalb flach nebeneinander in den Artikel — es gibt keinen Wrapper, an
   dem Zentrierung und Breitenbegrenzung haengen koennten. Also uebernimmt
   das Band diese Aufgabe fuer seine Kinder. Navigation und Bild sind davon
   ausgenommen, sie laufen randlos. */
.tda-hero { padding-block: 0; }

.tda-hero > .inside,
.tda-hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  padding-inline: 0;
}
.tda-hero > .inside > *,
.tda-hero > .container > * {
  width: 100%;
  max-width: var(--tda-measure);
  padding-inline: var(--tda-gutter);
  text-align: center;
}
.tda-hero > .inside > .tda-hero__nav,
.tda-hero > .container > .tda-hero__nav,
.tda-hero > .inside > .tda-hero__figure,
.tda-hero > .container > .tda-hero__figure {
  max-width: none;
  text-align: initial;
}
/* Nur das Bild laeuft wirklich randlos. Die Navigation behaelt ihren eigenen
   Innenabstand — sonst klebt die Wortmarke am Fensterrand. */
.tda-hero > .inside > .tda-hero__figure,
.tda-hero > .container > .tda-hero__figure { padding-inline: 0; }
.tda-hero > .inside > .tda-hero__nav,
.tda-hero > .container > .tda-hero__nav { padding: 28px var(--tda-gutter); }

.tda-hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px var(--tda-gutter);
}
.tda-hero__brand {
  font-family: var(--tda-font-display);
  font-size: 22px;
  color: var(--tda-white);
  letter-spacing: .5px;
  text-decoration: none;
}
.tda-hero__nav ul {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.tda-hero__nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.tda-hero__nav a:hover,
.tda-hero__nav a[aria-current='page'] { color: var(--tda-white); }

.tda-hero__head {
  max-width: var(--tda-measure);
  margin-inline: auto;
  padding: 56px var(--tda-gutter) 64px;
  text-align: center;
}
.tda-hero__badges {
  margin-top: 56px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tda-band .tda-hero__subline {
  font-family: var(--tda-font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--tda-seg, var(--tda-accent));   /* dunkler Grund: 7.9:1 */
  margin: 0 0 26px;
}
/* Contao verpackt den Text in <p>; vererbte Farbe verliert gegen die
   p-Regel weiter oben. Deshalb ausdruecklich durchreichen. */
.tda-band .tda-hero__subline p { color: inherit; margin: 0; }
.tda-band .tda-hero__text {
  color: rgba(255,255,255,.78);
  margin: 0 auto 40px;
  max-width: 700px;
}
.tda-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 64px;
}

.tda-hero__figure { position: relative; margin: 0; }
/* ⚠ Eclipse setzt `.ce_image .image_container img { width: auto }` mit
   Spezifitaet 0,2,1. Ein einfaches `.tda-hero__figure img` (0,1,1) verliert
   dagegen: Das Bild rechnet seine Breite dann aus der gedeckelten Hoehe und
   steht schmal in der Mitte statt randlos. Der zweite Selektor unten liegt
   bei 0,2,2 und gewinnt unabhaengig von der Ladereihenfolge. */
/* ⚠ Keine Hoehendeckelung. Der Entwurf sah `max-height: 78vh` mit
   `object-fit: cover` vor — das schneidet das Motiv an, sobald das Fenster
   flacher wird, und zwar unabhaengig davon, ob der Besucher scrollt.
   Gemessen am 21.08.2026: bei 1440x800 fehlten 184 px, bei 1920x1080 sogar
   235 px — ein knappes Viertel des Bildes, immer oben und unten zugleich.

   Das Motiv traegt Text (den Kampagnen-Zweiklang) und darf deshalb nicht
   beschnitten werden. Ohne Deckel behaelt es sein 16:9 und rechnet seine
   Hoehe aus der Breite: voll sichtbar bei jeder Fensterhoehe, randlos wie
   vorgesehen. Die Breitendeckelung auf 2200 px bleibt — darueber laeuft
   der Bandgrund weiter (UMSETZUNG.md, Bruchstellen). */
.tda-band .tda-hero__figure img,
.tda-band .tda-hero__figure figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--tda-hero-max);   /* Deckelung, UMSETZUNG.md */
  max-height: none;
  margin-inline: auto;
}
/* ⚠ Eclipse setzt `.image_container .caption { background: rgba(0,0,0,.7);
   color: #fff }` mit Spezifitaet 0,2,0 — daraus wuerde ein dunkler Kasten
   statt des weissen Stickers. Der Selektor hier liegt bei 0,2,1 und gewinnt. */
.tda-band .tda-hero__figure figcaption {
  position: absolute;
  right: var(--tda-gutter);
  bottom: 32px;
  /* Contaos Bildelement laesst keine Klasse an der figcaption zu — die
     Sticker-Optik steht deshalb hier statt in .tda-sticker. */
  display: inline-block;
  background: var(--tda-white);
  color: var(--tda-dark);
  font-family: var(--tda-font-display);
  font-size: 14px;
  padding: 9px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.tda-band .tda-hero__figure figure { margin: 0; position: relative; width: 100%; }

/* 8.1b Berufsfeld-Kacheln (Modul 4) ---------------------------------------
   Die Kachelreihe kommt in zwei Ausfuehrungen: als echtes CSS-Grid in der
   Vorschau (.tda-cols--3) und als AutoGrid-Reihe in Contao (.autogrid_row).
   Beide brauchen 14 px Abstand — aber auf verschiedenem Weg.

   ⚠ `gap` gehoert NICHT auf eine .autogrid_row. Die ist ein Flex-Container,
   und AutoGrids Spalten sind auf `flex: 0 0 calc((100%/12)*n)` festgenagelt.
   Drei col_4 belegen damit exakt 100 % — jedes gap addiert obendrauf und
   schiebt die dritte Kachel in die naechste Zeile. Gemessen: Reihe 599 px,
   Spalten 3 × 199,66 px = 599 px, plus 2 × 14 px gap = 627 px. Genau daher
   kam der 2+1-Umbruch, und `gutter_none` half nicht: das entfernt nur
   AutoGrids eigenen Abstand, nicht unseren.

   Richtig ist AutoGrids eigenes Verfahren — negativer Aussenrand an der
   Reihe, Innenabstand an den Spalten. Das liegt innerhalb der border-box und
   vergroessert die Spalte deshalb nicht. */
.tda-band .tda-fields { margin-top: 40px; }

/* Vorschau-Fall: echtes Grid, hier ist gap korrekt */
.tda-band .tda-cols.tda-fields { gap: 14px; }

/* Contao-Fall: AutoGrid-Reihe. 0,3,0 bzw. 0,4,0 schlaegt `gutter_none`. */
.tda-band .autogrid_row.tda-fields { margin-inline: -7px; row-gap: 14px; }
.tda-band .autogrid_row.tda-fields > .column { padding-inline: 7px; }

/* Unter 768 px nimmt Eclipse der Reihe den negativen Aussenrand (mit
   !important), raeumt das Spalten-Padding aber nur bei Spalten *ohne*
   `_m`-Klasse weg — unsere tragen col_12_m, also bliebe es stehen und die
   gestapelten Kacheln staenden 7 px eingerueckt. Gestapelt braucht es den
   seitlichen Abstand ohnehin nicht. */
@media (max-width: 767px) {
  .tda-band .autogrid_row.tda-fields > .column { padding-inline: 0; }
}

/* 8.1c Für Unternehmen (Modul 6) ------------------------------------------
   Minimal gegen den Hero abgesetzt, damit zwei dunkle Baender in Folge nicht
   ineinanderlaufen. */
.tda-betriebe { background: var(--tda-dark-2); color: var(--tda-white); }
/* :where() haelt die Spezifitaet bei 0,1,0, damit helle Komponenten auf
   diesem dunklen Band ihre eigene Textfarbe durchsetzen koennen. */
.tda-band.tda-betriebe :where(p) { color: rgba(255,255,255,.85); }

/* 8.2 Was passiert (Modul 2) ---------------------------------------------- */
.tda-was .tda-posters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tda-was .tda-poster {
  position: relative;
  background: var(--tda-white);
  box-shadow: 0 12px 32px rgba(17,17,17,.14);
}
.tda-was .tda-poster > * { position: absolute; inset: 10px; }
.tda-was .tda-poster--tall { grid-row: span 2; min-height: 376px; transform: rotate(-1.2deg); }
.tda-was .tda-poster--a { height: 180px; transform: rotate(1deg); }
.tda-was .tda-poster--b { height: 180px; transform: rotate(-.8deg); }
/* In der Vorschau haelt `.tda-posters` die drei Kacheln als CSS-Grid mit 16 px
   Abstand zusammen. In Contao gibt es das Grid nicht — dort liegen Motiv a und
   b als zwei Textelemente direkt untereinander in derselben AutoGrid-Spalte
   und stiessen ohne Abstand aneinander. Weil beide leicht gedreht sind,
   schnitten sich die Ecken sichtbar (gemessen 21.08.2026: 2046 gegen 2052).
   Der Abstand gilt deshalb auch ausserhalb des Rasters. */
.tda-was :not(.tda-posters) > .tda-poster + .tda-poster { margin-top: 16px; }

/* Seit 08.09.2026 stehen in den drei Rahmen echte Standortaufnahmen statt der
   gestreiften Platzhalter (.tda-slot). Das Bildelement muss den Rahmen fuellen.
   ⚠ `object-fit` wirkt NICHT auf der <figure>: sie ist in Contao das direkte
   Kind von .tda-poster und traegt bereits das `position:absolute; inset:10px`
   aus der Regel darueber. Den Zuschnitt muss das <img> darin selbst besorgen —
   dieselbe Falle wie beim Portraet in Modul 8 (MODULE.md). Ohne die zweite
   Regel passt die Darstellung nur, solange das hochgeladene Bild zufaellig
   das Seitenverhaeltnis des Rahmens hat. */
.tda-was .tda-poster figure { margin: 0; height: 100%; }
.tda-was .tda-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 8.3 Galerie (Modul 7) ---------------------------------------------------
   Laeuft ueber Contaos eigenen Slider (Swiper), nicht mehr ueber den
   Eigenbau — MODULE.md empfiehlt ihn, und er bringt Tastaturbedienung und
   Screenreader-Ansagen mit. Swiper liefert seine Basis-CSS selbst; hier
   steht nur, was das Projekt davon abweichend braucht.
   ------------------------------------------------------------------------ */
.tda-galerie { padding-bottom: 100px; }

/* Der Slider soll bis an den Fensterrand laufen, der Kopftext aber auf Mass
   bleiben. Also die Breitenbegrenzung vom Band nehmen — der Kopf bringt sie
   unten selbst mit. */
.tda-galerie > .inside,
.tda-galerie > .container { max-width: none; padding-inline: 0; }

.tda-galerie__head {
  max-width: var(--tda-measure);
  margin-inline: auto;
  padding-inline: var(--tda-gutter);
}

/* Der Slider laeuft randlos, die Kacheln beginnen aber am Textrand. */
.tda-galerie .swiper {
  padding-inline: var(--tda-gutter);
  padding-bottom: 88px;   /* Platz fuer die Pfeile darunter */
}

/* Breite steht hier, nicht in den JS-Optionen (slidesPerView: 'auto'). */
.tda-galerie .swiper-slide {
  width: 460px;
  height: auto;
}
.tda-galerie .swiper-slide figure { margin: 0; }
/* Faellt das JavaScript aus, bleibt der Slider ein Stapel: Swiper setzt dann
   kein `.swiper-initialized`. Ohne diese Regel stossen die Motive ohne
   Abstand aneinander und jede Bildunterschrift klebt am naechsten Bild. */
.tda-galerie .swiper:not(.swiper-initialized) .swiper-slide {
  width: 100%;
  margin-bottom: 28px;
}
.tda-galerie .swiper-slide img,
.tda-galerie .swiper-slide .tda-slot {
  display: block;
  width: 100%;
  height: auto;          /* .tda-slot bringt sonst height:100% mit */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(17,17,17,.15);
}
/* Segmentbalken zwischen Bild und Bildunterschrift (Abschnitt 2.1). Er sagt,
   zu welchem Berufssegment das Motiv gehoert, und traegt dessen Farbe.
   Ohne Segmentklasse steht dort der Markenton — nie eine Luecke. */
.tda-galerie .swiper-slide figcaption::before,
.tda-galerie .swiper-slide .tda-caption::before {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin-bottom: 10px;
  background: var(--tda-seg, var(--tda-accent));
}

.tda-galerie .swiper-slide figcaption,
.tda-galerie .swiper-slide .tda-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--tda-muted-on-light);
  margin-top: 12px;
  /* Eclipse faerbt .caption dunkel mit weisser Schrift — hier nicht. */
  background: none;
  padding: 0;
  position: static;
}

/* Pfeile: Swiper setzt sie absolut an die Seitenmitte. Der Entwurf will sie
   unten links nebeneinander. */
.tda-galerie .swiper-button-prev,
.tda-galerie .swiper-button-next {
  top: auto;
  bottom: 0;
  margin: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--tda-dark);
  background: var(--tda-white);
  color: var(--tda-dark);
  transition: background-color .18s ease, color .18s ease;
}
.tda-galerie .swiper-button-prev { left: var(--tda-gutter); right: auto; }
.tda-galerie .swiper-button-next { left: calc(var(--tda-gutter) + 64px); right: auto; }
.tda-galerie .swiper-button-prev::after,
.tda-galerie .swiper-button-next::after { font-size: 18px; font-weight: 700; }
.tda-galerie .swiper-button-prev:hover,
.tda-galerie .swiper-button-next:hover { background: var(--tda-dark); color: var(--tda-white); }
.tda-galerie .swiper-button-disabled { opacity: .35; }

/* Der Entwurf zeigt keine Punkte — die Pfeile und die Tastatur reichen. */
.tda-galerie .swiper-pagination { display: none; }

@media (max-width: 720px) {
  .tda-galerie .swiper-slide { width: min(84vw, 460px); }
}

/* 8.4 Azubi-Story (Modul 8) ----------------------------------------------- */
.tda-story { background: var(--tda-white); border-top: 3px solid var(--tda-dark); }
.tda-story__aside { position: sticky; top: 48px; }
.tda-story__portrait { position: relative; }
/* Orange versetzte Flaeche hinter dem Portraet */
.tda-story__portrait::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: var(--tda-seg, var(--tda-accent));
}
.tda-story__portrait > * {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  background: var(--tda-light);
}
/* ⚠ In Contao ist das direkte Kind die <figure> des Bildelements, nicht das
   Bild. `object-fit` ist auf einer figure wirkungslos — es greift nur bei
   ersetzten Elementen. Das Seitenverhaeltnis haelt also die figure, den
   Zuschnitt muss das <img> darin selbst besorgen.

   Ohne diese Regel haengt die Darstellung daran, dass das hochgeladene Bild
   zufaellig 3:4 hat (das Portraet vom 24.08.2026 hat es, weil es dafuer
   geschnitten wurde). Ein Bild in anderem Format liefe sonst aus der Flaeche
   oder liesse eine Luecke — und Bilder tauscht die Redaktion aus. */
.tda-band .tda-story__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tda-story__aside .tda-sticker { margin-top: 32px; }
.tda-story__lead { margin-bottom: 44px; }

/* 8.5 Partner (Modul 9) ---------------------------------------------------
   Das Logoraster steht in Abschnitt 7 bei den Komponenten. Hier lagen bis
   13.08.2026 noch die Regeln aus der Zeit vor dem Galerie-Element — sie
   erzwangen eine feste Kachelhoehe und beschnitten die Logos. Entfernt.
   ------------------------------------------------------------------------ */

/* Rubrikentitel ueber einem Logoraster (Initiatoren / Unterstuetzer).
   Eigenes Element, damit die Redaktion Logos zwischen den Rubriken
   verschieben kann, ohne Markup anzufassen. */
.tda-band .tda-partner__group {
  font-family: var(--tda-font-display);
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  color: var(--tda-dark);
  margin: 0 0 20px;
}
.tda-band .tda-logos + .tda-partner__group { margin-top: 16px; }

/* Logoraster ueber Contaos Galerie-Element.
   ⚠ Die Klasse sitzt am Element-Wrapper, die Liste liegt eine Ebene tiefer —
   das Raster gehoert an die <ul>, nicht an den Wrapper. */
.tda-band .tda-logos { display: block; }

.tda-band .tda-logos ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
/* Spaltenzahl: Contao 5 schreibt sie ans Element, Eclipse ersetzt das
   Template und schreibt sie an die Liste. Beide bedienen. */
.tda-band .tda-logos.content-gallery--cols-2 ul,
.tda-band .tda-logos ul.cols_2 { grid-template-columns: repeat(2, 1fr); }
.tda-band .tda-logos.content-gallery--cols-3 ul,
.tda-band .tda-logos ul.cols_3 { grid-template-columns: repeat(3, 1fr); }
.tda-band .tda-logos.content-gallery--cols-4 ul,
.tda-band .tda-logos ul.cols_4 { grid-template-columns: repeat(4, 1fr); }
.tda-band .tda-logos.content-gallery--cols-6 ul,
.tda-band .tda-logos ul.cols_6 { grid-template-columns: repeat(6, 1fr); }

/* Die Logos liegen als einheitliche Flaeche vor: 600×300, weisser Grund,
   Logo mittig. Damit ist die Kachel schlicht das Bild — gleiche Breite,
   gleiche Hoehe, ohne dass die CSS Seitenverhaeltnisse ausgleichen muss. */
.tda-band .tda-logos li {
  background: var(--tda-white);
  border: 1px solid var(--tda-hairline);
  padding: 0;
  overflow: hidden;
  /* ⚠ Ohne diese Zeile halbiert sich die Kachel ein zweites Mal. Eclipse
     setzt `.ce_gallery .cols_2 li { width: calc(100%/2) }` und zusaetzlich
     `.ce_gallery [class*='cols_'] li { width: 49.8% }` — beide auf 0,2,1,
     also genau so spezifisch wie die Regel hier. Die Grid-Spalte ist bereits
     halb so breit wie die Liste; das li darin nahm davon nochmals 49,8 % und
     war 265 statt 532 px breit. Die Logos standen dadurch monatelang auf
     halber Groesse, mit grossen Luecken dazwischen. Gemessen 17.08.2026. */
  width: 100%;
}
.tda-band .tda-logos li figure { margin: 0; display: block; }
/* Spezifitaet 0,3,1 — Eclipse setzt .ce_image .image_container img
   { width: auto } mit 0,2,1. */
.tda-band .tda-logos li img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Verlinkte Logos (seit 11.09.2026). Der Link liegt um das Bild, das
   Template dazu ist templates/gallery_tda_logos.html5. */
/* ⚠ Eclipse setzt `.ce_gallery > ul li a { position: absolute; height: 100% }`
   fuer seine Ueberlagerungsflaeche. Um das Logo gelegt, nahm der Link das
   Bild damit aus dem Fluss: die Kachel fiel auf 2 px zusammen, und wegen
   overflow: hidden verschwanden alle Logos. Am 11.09.2026 kurz so live. */
.tda-band .tda-logos li figure > a {
  display: block;
  position: static;
  width: auto;
  height: auto;
}
.tda-band .tda-logos li { transition: border-color .18s ease; }
.tda-band .tda-logos li:has(> figure > a:hover) { border-color: var(--tda-dark); }
/* ⚠ Die Kachel schneidet mit overflow: hidden ab. Der Fokusring aus
   Abschnitt 11 steht 3 px ausserhalb und waere dort unsichtbar — hier also
   nach innen. */
.tda-band .tda-logos li figure > a:focus-visible { outline-offset: -3px; }

/* Zwischenstufe: bei vier Spalten waeren die Kacheln auf mittleren Breiten
   nur noch gut 200 px breit — das Logo darin liegt dann unter der Groesse,
   in der es lesbar bleibt. Ab 1024 px abwaerts deshalb drei Spalten. */
@media (max-width: 1024px) {
  .tda-band .tda-logos ul.cols_4,
  .tda-band .tda-logos.content-gallery--cols-4 ul { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .tda-band .tda-logos ul,
  .tda-band .tda-logos ul.cols_4,
  .tda-band .tda-logos ul.cols_6 { grid-template-columns: repeat(2, 1fr); }
}

.tda-partner__footnote { text-align: center; font-size: 16px; }

/* 8.6 Presse (Modul 10) --------------------------------------------------- */
.tda-presse {
  background: var(--tda-white);
  border-top: 3px solid var(--tda-dark);
  --tda-band-pad: 80px;
}
.tda-presse h2 { font-size: clamp(30px, 3vw, 42px); margin-bottom: 16px; }
.tda-presse p  { font-size: 17px; max-width: 640px; }

/* 8.7 Abschluss (Modul 11) ------------------------------------------------ */
.tda-abschluss {
  background: var(--tda-seg, var(--tda-accent-deep));
  --tda-band-pad: 120px;
  position: relative;
  overflow: hidden;
}
.tda-abschluss h2 {
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 1.02;
  margin-bottom: 72px;
  text-align: center;
  color: var(--tda-white);
}
.tda-abschluss h2 .tda-h2-dark { color: var(--tda-dark); }

/* 8.8 Footer -------------------------------------------------------------- */
.tda-footer {
  background: var(--tda-dark);
  border-top: 1px solid var(--tda-hairline-dark);
  padding: 48px var(--tda-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.tda-footer__brand {
  font-family: var(--tda-font-display);
  font-size: 20px;
  color: var(--tda-form-text);
  margin-bottom: 6px;
}
.tda-footer__claim { font-size: 13px; color: var(--tda-faint-on-dark); }
.tda-footer ul {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.tda-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.tda-footer a:hover { color: var(--tda-white); text-decoration: underline; }


/* 9 — Bildplatzhalter ======================================================
   Bis die 12 offenen Bildplaetze geliefert sind (PROJEKT.md, Abschnitt 4).
   Nach dem Einpflegen ersatzlos entfernbar.
   ------------------------------------------------------------------------ */

.tda-band .tda-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: repeating-linear-gradient(
    45deg, #efedea 0 12px, #e7e4e0 12px 24px);
  color: #6b6862;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}


/* 10 — Bewegung ============================================================
   WICHTIG: Der Ausgangszustand opacity:0 wird per JS gesetzt, nicht hier.
   Ohne JS bliebe der Inhalt sonst unsichtbar (UMSETZUNG.md, Abschnitt 4).
   Hier steht nur, wie sich ein bereits vom JS vorbereitetes Element verhaelt.
   ------------------------------------------------------------------------ */

.tda-band .tda-reveal.is-armed {
  opacity: 0;
  transform: translateY(var(--tda-reveal-shift));
  transition: opacity var(--tda-reveal-time) ease,
              transform var(--tda-reveal-time) ease;
  /* Die Staffelung setzt das JS je Element (--tda-reveal-delay). Ohne Wert
     starten alle gleichzeitig — das ist der unauffaellige Rueckfall. */
  transition-delay: var(--tda-reveal-delay, 0ms);
}
.tda-band .tda-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tda-band .tda-reveal.is-armed,
  .tda-band .tda-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tda-band *,
  .tda-band *::before,
  .tda-band *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 11 — Fokus ===============================================================
   Eclipse X ist BFSG-ready, das eigene Theme erbt das nicht (PROJEKT.md).
   Sichtbarer Fokus deshalb hier explizit, auf hell und dunkel getrennt.
   ------------------------------------------------------------------------ */

.tda-band :focus-visible {
  outline: 3px solid var(--tda-dark);
  outline-offset: 3px;
}
.tda-band--dark :focus-visible,
.tda-hero :focus-visible,
.tda-footer :focus-visible,
.tda-abschluss :focus-visible,
/* Die Prompt-Box ist eine dunkle Insel im hellen Band — ohne diese Zeile
   lag der Ring dort bis 11.09.2026 als #111 auf #111, also unsichtbar. */
.tda-promptbox :focus-visible {
  outline-color: var(--tda-white);
}
/* Auf orangem Grund traegt Weiss zu wenig — dort Schwarz. */
.tda-band .tda-callout :focus-visible { outline-color: var(--tda-dark); }

/* Nur fuer Screenreader — z. B. die Rueckmeldung des Kopier-Buttons */
.tda-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tda-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #ee7e0b;
  color: #111111;
  font-weight: 800;
  padding: 12px 20px;
}
.tda-skiplink:focus { left: 0; }


/* 12 — Kontrastkorrekturen (dokumentiert) ==================================
   Der Entwurf faellt an mehreren Stellen unter die WCAG-AA-Schwelle (4.5:1
   fuer Fliesstext, 3:1 fuer Grosstext ab 24px bzw. 18.66px/700). Geaendert,
   weil Eclipse X zwar BFSG-ready ist, das eigene Theme das aber nicht erbt
   (PROJEKT.md, Abschnitt 4).

   Geprueft wurde nicht nach Augenmass: design/preview.html laesst sich mit
   einem Skript durchmessen, das fuer jede Textstelle die effektive
   Hintergrundfarbe aufsammelt und das Verhaeltnis rechnet
   (scripts/kontrast-audit.js).

   ENTSCHEIDUNG 14.08.2026 (Martin): Es wird nur EIN Orange verwendet, der
   helle Markenton #ee7e0b. Die beiden Korrekturtoene sind damit zurueck-
   genommen. Vier der sechs Korrekturen bleiben, zwei sind aufgehoben:

   | Stelle                       | Entwurf               | Jetzt                 | Wert  | Status |
   |------------------------------|-----------------------|-----------------------|-------|--------|
   | Quellenzeile auf #111111     | rgba(255,255,255,.40) | rgba(255,255,255,.50) | 5.33  | bleibt |
   | Galerie-/Quellentext hell    | #7d7a74 auf #f7f6f3   | #6b6862 auf #f7f6f3   | 5.14  | bleibt |
   | .tda-callout, Text und Titel | Weiss auf #ee7e0b     | #111111 auf #ee7e0b   | 6.86  | bleibt |
   | Fokusring                    | keiner                | 3px, hell/dunkel      | —     | bleibt |
   | Akzent als Text auf hell     | #ee7e0b               | #ee7e0b (wie Entwurf) | 2.55  | ⚠ AUF  |
   | Band Modul 11 (Abschluss)    | #ee7e0b               | #ee7e0b (wie Entwurf) | 2.75  | ⚠ AUF  |

   ⚠ DIE BEIDEN LETZTEN ZEILEN LIEGEN UNTER DER AA-SCHWELLE. Bewusst so
   entschieden, nicht uebersehen. Betroffen sind:

   1. Akzent als Textfarbe auf heller Flaeche — 2.55:1 statt noetiger 4.5:1,
      reisst auch die Grosstext-Schwelle von 3:1. Stellen: Label (.tda-eyebrow),
      Berufsfeld-Tag (Modul 4), Benefit-Nummer (Modul 6), Interviewfrage
      (Modul 8), Pfeil-Link (Module 10 und 11), Tabellenkopf.
      Korrektur waere: --tda-accent-text auf #a85703 (4.82:1).

   2. Weisser Grosstext auf der Bandflaeche in Modul 11 — 2.75:1 statt 3:1.
      Der schwarze Teil derselben Ueberschrift traegt 6.86:1 und ist in Ordnung.
      Korrektur waere: --tda-accent-deep auf #e07507 (3.13:1).

   Beides haengt an genau einer Zeile in Abschnitt 2. Auf dunklem Grund war
   das Orange nie ein Problem: dort traegt #ee7e0b 6.86:1.

   Die orange Leiste (.tda-callout) traegt weiterhin dunklen Text. Das ist
   keine zweite Orange-Variante, sondern die Schriftfarbe auf dem Orange —
   von der Entscheidung also nicht beruehrt. Der Entwurf setzt sie weiss, das
   waeren 2.75:1. Zurueck: beide color-Werte auf var(--tda-white).
   ========================================================================== */


/* 13 — Responsive ==========================================================
   Der Entwurf ist auf 1440 px gebaut. In Contao regelt AutoGrid das Umbrechen
   der Spalten getrennt fuer Desktop/Tablet/Mobil; die Fallback-Raster hier
   brechen selbst.
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .tda-band {
    --tda-gutter: 32px;
    --tda-band-pad: 80px;
  }
  .tda-band .tda-split,
  .tda-band .tda-split--33-66,
  .tda-band .tda-split--66-33 {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .tda-band .tda-cols--3,
  .tda-band .tda-cols--4 { grid-template-columns: repeat(2, 1fr); }
  .tda-band .tda-promptbox,
  .tda-story__aside { position: static; }
  /* Buttons duerfen ab hier umbrechen. In der schmalen Presse-Spalte
     (col_4, bei 768 px rund 245 px) braucht „↓ Pressekit herunterladen"
     255 px — mit `nowrap` ragte er 10 px ueber den Viewport. Gemessen
     21.08.2026 ueber 360/390/480/600/720/768/900/1024/1180/1440 px. */
  .tda-band .tda-btn { white-space: normal; }

  /* Der Meta-Prompt ist auf dem Desktop auf 200 px gedeckelt und scrollt
     darin. Sobald die Box schmal wird, braucht derselbe Text die doppelte
     Hoehe und bricht mitten im Satz ab — bei 768 px nach „Schlag mir dann 3".
     Ein scrollender Kasten im scrollenden Dokument ist auf Touch ausserdem
     eine Falle: man erwischt die falsche Ebene. Ab hier laeuft er deshalb in
     voller Hoehe, das sind rund 20 Zeilen. */
  .tda-band .tda-prompt pre { max-height: none; overflow: visible; }

  /* Die drei Berufsfeld-Kacheln bekommen unterschiedlich lange
     Beschriftungen. Die Spalten sind durch Flex schon gleich hoch — die
     Kachel darin war es nicht und endete je nach Zeilenzahl frueher. */
  .tda-band .tda-fields > .column > .attributes,
  .tda-band .tda-fields .tda-field { height: 100%; }
}

/* `gutter_l` zieht die Reihe um 40 px nach aussen und gibt den Spalten 40 px
   Innenabstand. Ab 1024 px abwaerts ist der Bandrand aber nur noch 32 px
   breit — die Reihe ragt dann 8 px ueber den Viewport hinaus. Gemessen bei
   768 px am 21.08.2026: Reihe -8 .. 776.

   ⚠ Nur bis 768 px hinunter: darunter stapelt Eclipse die Spalten und nimmt
   der Reihe den Aussenrand selbst. Ohne die untere Grenze schlaegt dieser
   Selektor (5 Klassen) den Mobilselektor in Abschnitt 13.2 (4 Klassen) und
   die eingerueckte zweite Kante kommt mit 16 px zurueck. */
@media (min-width: 768px) and (max-width: 1024px) {
  .tda-band .container > .autogrid_row.gutter_l { margin-inline: -16px; }
  .tda-band .container > .autogrid_row.gutter_l > .column { padding-inline: 16px; }
}

/* 13.2 — Gestapelte AutoGrid-Spalten (bis 767 px) ==========================
   Ab hier stapelt Eclipse die Spalten. Zwei Dinge stimmen dann nicht mehr,
   beide am 21.08.2026 bei echten 390 px nachgemessen (Chrome erzwingt
   headless ein 500-px-Mindestfenster — die Messung lief deshalb in einem
   390 px breiten iframe, sonst misst man ein Layout, das kein Geraet zeigt).

   1. **Zwei linke Kanten statt einer.** Eclipse raeumt das 30-px-Padding
      einer Spalte unter 768 px nur weg, wenn sie KEINE `_m`-Klasse traegt.
      Unsere Spalten haben alle `col_12_m` — Karten, Kacheln und Prompt-Box
      standen dadurch 30 px weiter innen als die Ueberschrift darueber.
      Gemessen in 7 von 11 Baendern: Kanten bei 20 und 50 px, in Modul 2
      sogar 20 / 60 / 75 px durch doppelte Verschachtelung.

   2. **Kein Abstand zwischen gestapelten Spalten.** Am deutlichsten in
      Modul 8: der gedrehte Sticker der linken Spalte bildet durch
      `transform` einen eigenen Stapelkontext und legte sich 21 px ueber die
      Ueberschrift der rechten Spalte.

   Beides haengt an `col_12_m` — Spalten, die mobil nebeneinander bleiben
   sollen (`col_6_m`), behalten Abstand und Innenrand.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .tda-band .autogrid_row > .column[class*="col_12_m"] { padding-inline: 0; }
  /* Abstand nur zwischen den Hauptspalten eines Bandes. Verschachtelte
     Raster (Berufsfeld-Kacheln, Poster) regeln ihren Abstand selbst ueber
     row-gap — dort kaeme der Wert sonst obendrauf. */
  .tda-band .container > .autogrid_row > .column[class*="col_12_m"] + .column[class*="col_12_m"] {
    margin-top: 44px;
  }
  /* Den Aussenrand der Reihe nimmt Eclipse hier schon selbst weg (!important),
     nachgemessen: Reihe steht auf 20..370. Nichts weiter noetig. */

  /* Tippziele: die Pfeil-Links trugen 26–27 px. WCAG 2.2 verlangt 24 px,
     empfohlen sind 44 px. Ueber den Innenabstand geloest — die Schriftgroesse
     bleibt, die Zeile wandert nicht. */
  .tda-band .tda-link {
    padding-block: 9px;
    display: inline-block;
  }

  /* Die beiden Hero-Buttons brechen untereinander um und standen dann
     unterschiedlich breit mittig (288 gegen 200 px). Auf voller Breite
     wirken sie als Paar und sind leichter zu treffen. */
  .tda-hero__actions { flex-direction: column; align-items: stretch; }
  .tda-hero__actions > .tda-btn { text-align: center; }
}

/* Dasselbe fuer Baender, die schon auf dem Tablet stapeln (`col_12_t`).
   Seit 11.09.2026 Modul 4: In 5/12 Breite blieben der Prompt-Box bei 768 px
   275 px, und „Berufswahltest" brach mitten im Wort um. Das Spalten-Padding
   bleibt hier stehen — Eclipse nimmt den Reihenrand erst unter 768 px weg,
   beide Kanten fluchten also weiter. */
@media (min-width: 768px) and (max-width: 1024px) {
  .tda-band .container > .autogrid_row > .column[class*="col_12_t"] + .column[class*="col_12_t"] {
    margin-top: 44px;
  }
}

@media (max-width: 720px) {
  .tda-band {
    --tda-gutter: 20px;
    --tda-band-pad: 64px;
  }
  .tda-band .tda-cols--2,
  .tda-band .tda-cols--3,
  .tda-band .tda-cols--4 { grid-template-columns: 1fr; }
  /* ⚠ Diese Regeln zielten frueher auf `.tda-facts` und `.tda-facts > *`.
     Das Raster liegt aber am <dl> darin, und dessen Kinder sind dt/dd —
     sie liefen ins Leere, die Faktenzeile blieb bis 390 px dreispaltig.
     Rest aus der Zeit vor dem Umbau auf <dl>, korrigiert 21.08.2026. */
  .tda-band .tda-facts dl {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    border-top-width: 2px;
  }
  .tda-band .tda-facts dt,
  .tda-band .tda-facts dd { border-right: 0; }
  .tda-band .tda-facts dt { padding-top: 20px; }
  .tda-band .tda-facts dd {
    border-bottom: 1px solid var(--tda-rule);
    padding-bottom: 20px;
  }
  .tda-band .tda-facts dd:last-of-type { border-bottom: 0; }
  .tda-band .tda-callout { padding: 28px 24px; }
  .tda-was .tda-posters { grid-template-columns: 1fr; }
  .tda-was .tda-poster--tall { grid-row: auto; min-height: 260px; }
  .tda-hero__figure figcaption { right: 20px; bottom: 20px; }
  .tda-partner .tda-logos { grid-template-columns: repeat(2, 1fr); }
  .tda-footer { padding: 32px 20px; }
}


/* 13.5 — Kontaktformular (Modul 6) =========================================
   Contaos Formular-Widgets kommen ungestaltet und mit Eclipse' Grundoptik:
   volle Bandbreite, orangefarbene Knoepfe, Pflichtsternchen in Rot. Auf dem
   dunklen Band von Modul 6 ist das weder lesbar noch stimmig.

   Aufbau der Widgets (Contao 5):
     .widget.widget-text   > label + input
     .widget.widget-checkbox > fieldset > legend + span > input + label
     .widget.widget-captcha  > label + input + .captcha_text
     .widget.widget-submit   > button.submit

   ⚠ Das Formular muss auf hellem UND dunklem Band funktionieren — es war
   zuerst fuer Modul 6 (dunkel) gedacht und ist inzwischen in Modul 9 (hell)
   verschoben worden. Die Farben haengen deshalb an zwei Tokens, die weiter
   unten je Grund gesetzt werden, statt fest verdrahtet zu sein.
   ------------------------------------------------------------------------ */

.tda-band .tda-formular {
  max-width: 640px;
  margin-top: 40px;
  /* Vorgabe: heller Grund. Dunkle Baender setzen beide Werte um. */
  --tda-form-text:  var(--tda-text-on-light);
  --tda-form-leise: var(--tda-muted-on-light);
}

.tda-band--dark .tda-formular,
.tda-betriebe .tda-formular,
.tda-zahlen .tda-formular,
.tda-hero .tda-formular {
  --tda-form-text:  var(--tda-white);
  --tda-form-leise: var(--tda-muted-on-dark);
}

.tda-band .tda-formular .widget { margin-bottom: 22px; }

/* Beschriftungen: hell auf dunklem Grund, ruhig gesetzt. */
.tda-band .tda-formular label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--tda-form-text);
  margin-bottom: 6px;
}
/* Das Pflichtsternchen kommt bei Eclipse rot — hier in der Bandfarbe, die
   auf dunklem Grund 12,7:1 traegt. */
.tda-band .tda-formular label .mandatory,
.tda-band .tda-formular span.mandatory {
  color: var(--tda-seg, var(--tda-accent));
  margin-left: 2px;
}

/* Eingabefelder: heller Grund, dunkler Text — der Kontrast liegt damit bei
   18:1 und die Felder sind als Eingabeflaeche sofort erkennbar. */
.tda-band .tda-formular input.text,
.tda-band .tda-formular input.captcha,
.tda-band .tda-formular textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--tda-white);
  color: var(--tda-text-on-light);
  /* Rahmen immer sichtbar: auf hellem Band waere ein weisses Feld ohne
     Kontur nicht als Eingabeflaeche erkennbar. */
  border: 2px solid var(--tda-rule);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--tda-font-text);
  font-size: 16px;   /* unter 16px zoomt iOS beim Fokus hinein */
  line-height: 1.4;
}
.tda-band .tda-formular textarea { min-height: 130px; resize: vertical; }

/* Fokus sichtbar — dieselbe Logik wie beim uebrigen Fokusring. */
.tda-band .tda-formular input.text:focus-visible,
.tda-band .tda-formular input.captcha:focus-visible,
.tda-band .tda-formular textarea:focus-visible {
  outline: 3px solid var(--tda-seg, var(--tda-accent));
  outline-offset: 2px;
}

/* Datenschutz-Ankreuzfeld. Eclipse rendert um die Gruppe ein <fieldset> mit
   <legend>; die Legende traegt hier nur den internen Feldnamen und wuerde
   als Farbklecks ueber dem Text stehen. */
.tda-band .tda-formular fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.tda-band .tda-formular fieldset legend { display: none; }
.tda-band .tda-formular .checkbox_container span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tda-band .tda-formular input.checkbox {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--tda-seg, var(--tda-accent));
}
/* Der Text neben dem Ankreuzfeld ist Fliesstext, keine Feldbeschriftung. */
.tda-band .tda-formular .checkbox_container label {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tda-form-leise);
  margin: 0;
}

/* Sicherheitsfrage: Feld und Aufgabe nebeneinander, Aufgabe nicht in Rot. */
.tda-band .tda-formular .widget-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tda-band .tda-formular .widget-captcha label { margin: 0; }
.tda-band .tda-formular input.captcha { width: 90px; }
.tda-band .tda-formular .captcha_text {
  color: var(--tda-form-leise);
  font-size: 15px;
}

/* Absenden — Bandfarbe mit dunklem Text, wie die uebrigen Buttons. */
.tda-band .tda-formular button.submit {
  display: inline-block;
  background: var(--tda-seg, var(--tda-accent));
  color: var(--tda-dark);
  border: 0;
  border-radius: 0;
  padding: 18px 32px;
  font-family: var(--tda-font-text);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition: opacity .18s ease;
}
.tda-band .tda-formular button.submit:hover { opacity: .88; }

/* Bestaetigung und Fehlermeldungen */
.tda-band .tda-formular .confirmation {
  background: var(--tda-seg, var(--tda-accent));
  color: var(--tda-dark);
  padding: 18px 22px;
  font-weight: 700;
}
.tda-band .tda-formular p.error {
  color: var(--tda-white);
  background: #a4161a;      /* 5.9:1 fuer weissen Text */
  padding: 6px 10px;
  margin: 6px 0 0;
  font-size: 14.5px;
}

/* Honigtopf gegen Spam — muss fuer Menschen unsichtbar bleiben, aber ohne
   display:none, sonst fuellen ihn manche Bots gerade deshalb nicht. */
.tda-band .tda-formular label[for$="_hp"],
.tda-band .tda-formular input[id$="_hp"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .tda-band .tda-formular { max-width: none; }
}


/* 14 — Preloader ===========================================================
   Kurzer Vorhang beim Laden, gebaut aus zwei Pseudo-Elementen am <body> —
   ohne zusaetzliches Markup und ohne Eingriff ins Seitenlayout.

   ⚠ Der Vorhang blendet sich **per CSS-Animation selbst aus**
   (`animation-fill-mode: forwards`, am Ende `visibility: hidden`). Faellt
   JavaScript aus, verschwindet er trotzdem — ein Preloader, der ohne JS
   haengen bleibt, macht die Seite unbenutzbar. JS beschleunigt nur: sobald
   `load` gefeuert hat, setzt es `.tda-geladen` und der Vorhang geht sofort.

   Gebunden an `body.root_2` — die Contao-Klasse der Projekt-Rootseite.
   Diese Datei gilt installationsweit; ohne die Bindung laege der Vorhang
   auch ueber fremden Eclipse-Seiten. ⚠ Wird die Rootseite je neu angelegt,
   aendert sich die Nummer und der Preloader greift nicht mehr.
   ------------------------------------------------------------------------ */

body.root_2::before,
body.root_2::after {
  content: "";
  position: fixed;
  z-index: 9999;
  pointer-events: none;   /* blockiert nie, auch nicht waehrend des Laufs */
}

/* Die Flaeche */
body.root_2::before {
  inset: 0;
  background: #111111;
  animation: tda-vorhang .95s ease forwards;
}

/* Der Farblauf durch die fuenf Segmenttoene — dieselbe Reihenfolge wie die
   Motive in der Galerie. */
body.root_2::after {
  left: 50%;
  top: 50%;
  width: min(260px, 60vw);
  height: 5px;
  margin-left: calc(min(260px, 60vw) / -2);
  background: linear-gradient(90deg,
    #53adff 0 20%, #54e6ff 20% 40%, #40f35a 40% 60%,
    #ffd154 60% 80%, #d659db 80% 100%);
  transform-origin: left center;
  animation: tda-vorhang-balken .95s ease forwards;
}

@keyframes tda-vorhang {
  0%, 55%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; }
}
@keyframes tda-vorhang-balken {
  0%       { transform: scaleX(0);   opacity: 1; visibility: visible; }
  55%      { transform: scaleX(1);   opacity: 1; }
  100%     { transform: scaleX(1);   opacity: 0; visibility: hidden; }
}

/* JS meldet `load` — dann muss niemand auf das Ende der Animation warten. */
body.root_2.tda-geladen::before,
body.root_2.tda-geladen::after {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

/* Reduzierte Bewegung: kein Vorhang. Der Inhalt steht sofort. */
@media (prefers-reduced-motion: reduce) {
  body.root_2::before,
  body.root_2::after { display: none; }
}


/* 14.5 — Rechtsseiten (Impressum, Datenschutz) =============================
   Zwei Fliesstextseiten ausserhalb der Landingpage. Sie laufen im selben Band
   (`tda-band tda-recht`), brauchen aber eine andere Typografie als die
   Marketing-Module.

   ⚠ **Brush Up steht hier nur in der h1.** Die Displayschrift ist eine
   Versalschrift (PROJEKT.md) — in einer Zwischenueberschrift ueber einem
   Absatz Rechtstext liest sie sich als Schild, nicht als Gliederung, und bei
   „Umsatzsteuer-Identifikationsnummer" reisst sie die Zeile auseinander. Die
   h2 laeuft deshalb in Montserrat. Der Markenauftritt bleibt ueber Kopf,
   Fusszeile und die h1 erhalten.

   ⚠ **Zeilenlaenge.** Das Band ist 1180 px breit; ueber die volle Breite
   gesetzt braucht ein Absatz rund 150 Zeichen je Zeile. Fuer Lesetext ist
   das etwa doppelt so viel wie sinnvoll — hier deshalb auf 72ch begrenzt.
   ------------------------------------------------------------------------ */

.tda-band.tda-recht { padding-block: 72px 96px; }

.tda-band.tda-recht .ce_text,
.tda-band.tda-recht .ce_headline { max-width: 72ch; }

.tda-band.tda-recht h1 {
  font-family: var(--tda-font-display);
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1.05;
  margin-bottom: 8px;
  /* „Datenschutzerklaerung" ist 20 Zeichen lang und passt mobil in keine
     Zeile. Ohne Trennung bricht es hart nach dem vorletzten Buchstaben um
     („DATENSCHUTZERKLAERUN / G"). ⚠ Eclipse setzt `* { hyphens: none }` —
     die Trennung muss hier also ausdruecklich zurueckgeholt werden; die
     Sprache steht am <html>. */
  hyphens: auto;
}

.tda-band.tda-recht h2 {
  font-family: var(--tda-font-text);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 44px;
  margin-bottom: 10px;
}
/* Die Kante greift die Bandfarbe auf — dasselbe Mittel wie bei den Labels
   der Landingpage, nur ruhiger. */
.tda-band.tda-recht h2::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  margin-bottom: 12px;
  background: var(--tda-seg, var(--tda-accent));
}

.tda-band.tda-recht p,
.tda-band.tda-recht li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tda-text-on-light);
}
.tda-band.tda-recht p { margin-bottom: 14px; }
.tda-band.tda-recht ul { margin: 0 0 14px; padding-left: 22px; }
.tda-band.tda-recht li { margin-bottom: 6px; }

/* Vorspann unter der Ueberschrift: etwas groesser, ohne Kante darueber. */
.tda-band.tda-recht .tda-recht__vorspann {
  font-size: 18px;
  color: var(--tda-muted-on-light);
  margin-bottom: 8px;
}
.tda-band.tda-recht .tda-recht__quelle {
  font-size: 14px;
  color: var(--tda-muted-on-light);
}

/* Links im Fliesstext gehoeren unterstrichen — hier steht die Kontaktadresse
   drin, die muss als Link erkennbar sein. */
.tda-band.tda-recht a {
  color: var(--tda-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tda-band.tda-recht a:hover { text-decoration-thickness: 2px; }


/* 15 — Seitenkopf, mobil ===================================================
   Der Kopf ist ein Eclipse-Modul aus dem Seitenlayout, es gibt ihn nicht als
   Inhaltselement. Er liegt damit ausserhalb von `.tda-band` — deshalb haengt
   das hier an `body.root_2` statt am Bandnamensraum, genau wie der Preloader
   in Abschnitt 14. `customize.css` gilt installationsweit; ohne diesen Anker
   wuerde die Regel auf jede Eclipse-Seite der Installation streuen.

   Zwei Punkte, am 21.08.2026 bei 390 px gemessen:

   1. **Das Menue kommt weg.** Die Seite ist eine Landingpage mit genau einem
      Ziel; der Burger („Menu" plus Icon, `.mmenu_trigger`, absolut bei
      304..368) oeffnete eine Navigation ohne Inhalt. Impressum und
      Datenschutz stehen im Fusszeilenbereich, es geht also nichts verloren.
      Sprachumschalter, Sociallinks und Suche blendet Eclipse mobil bereits
      selbst aus.

   2. **Das Logo bekommt Luft.** Eclipse setzt den Kopf unter 768 px auf
      `line-height: 50px` und das Logo auf 70 × 50 px — es fuellt den Kopf
      damit exakt aus und stiess oben wie unten an die Kante. Der Abstand
      gehoert an `.inside`, nicht ans Logo: der Kopf waechst dann mit und die
      Flaeche bleibt unter dem Logo geschlossen.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  body.root_2 #header .mmenu_trigger { display: none; }
  body.root_2 #header .inside { padding-block: 16px; }

  /* 3. **Der mitfahrende Kopf kommt weg.** Eclipse haelt eine zweite,
     geklonte Kopfzeile (`.stickyheader` mit `.header.cloned`) bereit, faehrt
     sie beim Scrollen von oben ein (`body.fixed-header` setzt sie von
     `top: -100%` auf `top: 0`) und blendet sie **nur ab 768 px** wieder aus.
     Mobil blieb sie damit als einzige Stelle uebrig, an der das Menue noch
     auftauchte — und sie nimmt auf einem kleinen Schirm dauerhaft Hoehe weg.

     `!important`, weil das Theme dieselbe Regel fuer Desktop ebenfalls so
     setzt: der Kopf wird per JavaScript gesteuert, eine schlichte
     Spezifitaet reicht dagegen nicht zuverlaessig. */
  body.root_2 .stickyheader { display: none !important; }
}


/* 16 — Consent-Banner ======================================================
   Modul #611 („Layout: Privacy Opt-In"). Es liegt im Seitenlayout, also
   ausserhalb von `.tda-band` — Anker ist deshalb `body.root_2`, wie beim
   Seitenkopf und beim Preloader.

   ⚠ Die Projekt-Tokens haengen bewusst an `.tda-band` und nicht an `:root`
   (Abschnitt 2), damit sie nicht auf fremde Seiten der Installation streuen.
   Hier stehen sie deshalb noch einmal — als kleine Untermenge am Banner
   selbst, nicht global.

   Inhaltlich angepasst am 24.08.2026: Der Dialog bot Kategorien fuer Google
   Analytics, Matomo und externe Medien an, von denen keine eingebunden ist,
   und trug Eclipse' Vorlagenhinweis im Text. Uebrig bleibt eine Stufe.
   ------------------------------------------------------------------------ */

body.root_2 .mod_privacy_optin {
  --tda-dark:   #111111;
  --tda-accent: #ee7e0b;
  --tda-white:  #ffffff;
  --tda-light:  #f7f6f3;
  --tda-rule:   #e2e0dc;
  /* ⚠ Die Schriften gehoeren hier ebenso hin. Fehlen sie, greift
     `var(--tda-font-text, inherit)` auf den Fallback zurueck und der Dialog
     laeuft in Eclipse' Arial statt in Montserrat — aufgefallen erst beim
     Nachmessen am 26.08.2026, sichtbar war es in Ueberschrift und Knoepfen. */
  --tda-font-display: 'Brush Up', cursive;
  --tda-font-text:    'Montserrat', system-ui, sans-serif;
  /* Am Container, damit auch Beschreibungen, Hinweiszeile und Links erben —
     einzeln gesetzt bleibt sonst immer eine Stelle in Arial stehen. */
  font-family: var(--tda-font-text);
}
body.root_2 .mod_privacy_optin * { font-family: inherit; }

/* ⚠ Die Flaeche liegt an `.privacy_content`, nicht an `.privacy_popup` — das
   Popup ist nur die Huelle und beginnt 39 px weiter oben. Eine Kante am
   Popup schwebt deshalb losgeloest ueber dem Kasten; gemessen 24.08.2026. */
body.root_2 .mod_privacy_optin .privacy_popup {
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(17,17,17,.28);
}
body.root_2 .mod_privacy_optin .privacy_content {
  border-radius: 0;
  border-top: 4px solid var(--tda-accent);
  background: var(--tda-white);
}
body.root_2 .mod_privacy_optin .headline {
  font-family: var(--tda-font-text);
  font-weight: 800;
  color: var(--tda-dark);
  /* ⚠ „Datenschutzeinstellungen" braucht bei 19,5 px rund 275 px. Die Zeile
     ist zwar 311 px breit, davon nimmt das Schild-Icon aber den Rest — der
     Browser trennt deshalb automatisch (`hyphens: auto` kommt von Eclipse).
     Headless ohne deutsche Trennmuster wird daraus „Datenschutzeinstellun-
     gen". Statt auf korrekte Trennmuster zu bauen, passt der Titel hier in
     eine Zeile: Trennung aus, Groesse mitlaufend. Gemessen 26.08.2026 bei
     360 und 390 px. */
  hyphens: manual;
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.25;
}
body.root_2 .mod_privacy_optin .privacy_text,
body.root_2 .mod_privacy_optin .privacy_option_info {
  color: #4a4844;
  line-height: 1.6;
}

/* Schaltflaechen: scharfe Kanten und Projekttypografie statt Eclipse-Lila
   (#6a54ff aus dessen --accentColor).

   ⚠ „Alle akzeptieren" und „Alle ablehnen" bleiben **optisch gleichwertig**.
   Das ist kein Gestaltungsdetail: Eine Ablehnung, die unauffaelliger gestaltet
   ist als die Zustimmung, gilt als unzulaessige Beeinflussung der
   Einwilligung. Beide tragen deshalb dieselbe Flaeche. */
body.root_2 .mod_privacy_optin .privacy_buttons .submit {
  border-radius: 0;
  border: 2px solid var(--tda-dark);
  background: var(--tda-dark);
  color: var(--tda-white);
  font-family: var(--tda-font-text);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  padding: 14px 24px;
  transition: background-color .18s ease, color .18s ease;
  /* ⚠ Eclipse gibt dem Knopf `height: 48px` UND `line-height: 35px`. Mit
     unserem Innenabstand bleiben davon 16 px Innenraum — die 35 px hohe
     Textzeile passt dort nicht hinein und sitzt sichtbar zu tief. Deshalb
     beides zuruecknehmen: Hoehe aus dem Inhalt, Zeilenhoehe relativ.
     Gemessen 26.08.2026, nachdem Martin den Versatz bemerkt hat. */
  height: auto;
  line-height: 1.25;
}
body.root_2 .mod_privacy_optin .privacy_buttons .submit:hover,
body.root_2 .mod_privacy_optin .privacy_buttons .submit:focus-visible {
  background: var(--tda-accent);
  border-color: var(--tda-accent);
  color: var(--tda-dark);
}

/* ⚠ „Auswahl akzeptieren" steht dauerhaft auf `disabled`: Nach dem Entfernen
   der Statistik- und Medien-Stufen gibt es nichts mehr auszuwaehlen. Ein
   Knopf, der sich nie druecken laesst, ist ein Bedienfehler — er faellt
   deshalb weg. Sobald wieder eine waehlbare Stufe eingerichtet wird, nimmt
   das Modul das `disabled` heraus und der Knopf erscheint von selbst. */
body.root_2 .mod_privacy_optin .privacy_buttons .submit[disabled] { display: none; }

body.root_2 .mod_privacy_optin .reject_all_info {
  font-size: 13px;
  color: #6b6862;
}

/* Die beiden Rechtslinks am Fuss des Dialogs. */
body.root_2 .mod_privacy_optin a {
  color: var(--tda-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.root_2 .mod_privacy_optin :focus-visible {
  outline: 3px solid var(--tda-dark);
  outline-offset: 3px;
}


/* 15 — Druck =============================================================== */

@media print {
  .tda-band {
    background: #fff !important;
    color: #000 !important;
    padding-block: 24px;
  }
  .tda-band .tda-reveal.is-armed { opacity: 1 !important; transform: none !important; }
  .tda-galerie .swiper-button-prev,
  .tda-galerie .swiper-button-next,
  .tda-band .tda-copy,
  .tda-glow { display: none; }
  /* Im Druck alle Motive untereinander statt im Slider */
  .tda-galerie .swiper-wrapper { display: block; }
  .tda-galerie .swiper-slide { width: auto; margin-bottom: 16px; }
}