/*
Theme Name: Leuchtturm Norden
Theme URI: https://leuchtturm-norden.de
Author: Creative Media Consulting
Author URI: https://creative-media-consulting.de
Description: Individuelles WordPress-Theme für Leuchtturm Norden – sozialpsychiatrische Hilfen. Enthält Startseite, Über uns, Leistungen, Gruppenangebote, Team, Kontakt, Hilfe erhalten und Karriere (Stellenausschreibungen als eigener Beitragstyp mit Detailseiten, PDF-Downloads und Bewerben-Button) mit optionalem, konfigurierbarem Kontaktformular via wp_mail (abschaltbar; editierbare, pro Betreff frei wählbare Empfänger-Adressen), editierbaren Textfeldern je Seite mit Formatierung, editierbaren Bildern samt editierbarer Bildbeschreibung (alt-Text für Screenreader), wählbaren Karten-Icons, Hero-Text/Bild-Umschalter, wählbarer Bild-Position in Bildbereichen, frei editierbaren CTA-Buttons, frei skalierbaren Karten- und Team-Listen, zentraler Zitat-Liste für alle Seiten, mehreren Standorten, frei positionierbaren Inhalts-Blöcken mit erweiterbarer Hintergrundfarben-Palette, wählbarer Hintergrundfarbe des Kontakt-Banners, je Seite abschaltbarem Kontakt-Banner und optionalem Zitat-Band, Export/Import-Sicherung sowie SEO-Grundausstattung (Meta-Description, Open Graph, strukturierte Daten). Schriften werden lokal aus dem Theme geladen (keine Verbindung zu Google Fonts).
Version: 1.30.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leuchtturm-norden
*/

/* ==========================================================================
   Farben, Schriften, Grundlagen
   ========================================================================== */

:root {
  --color-teal-dark: #0c2b32;
  --color-teal: #123840;
  --color-teal-light: #1a4a54;
  --color-red: #a11c26;
  --color-red-dark: #841720;
  --color-cream: #faf8f4;
  --color-card: #f5f3ef;
  --color-border: #e3ded5;
  --color-text: #16232a;
  --color-text-light: #4b5a60;
  --color-white: #ffffff;

  --gradient-hero: linear-gradient(180deg, #14343b 0%, #0c2b32 60%, #0a252b 100%);

  --font-heading: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --container-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

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

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}

p {
  margin: 0 0 16px;
}

/* Listen aus formatierbaren Textfeldern (seit v1.16.0, TinyMCE-Toolbar
   um "Aufzählung"/"Nummerierung" erweitert). Niedrige Spezifität (reine
   Typ-Selektoren), damit spezifischere Listen wie .check-list,
   .content-card-checklist, .job-files-list oder Menüs unverändert
   Vorrang behalten. Ersetzt die frühere, gleichlautende Regel
   ".section ul, .section ol" weiter unten in dieser Datei. */
ul, ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

ul li, ol li {
  margin-bottom: 6px;
}

/* Die kleinen, roten Zwischenüberschriften ("Eyebrow"). Schriftart und
   -größe sind seit v1.22.0 zentral einstellbar (Website-Einstellungen ->
   "Rote Zwischenüberschriften - Schrift"). Die Werte kommen als
   :root-Variablen aus functions.php (leuchtturm_dynamic_styles()) - ohne
   getroffene Auswahl bleiben die hier hinterlegten Rückfallwerte
   (Fließtextschrift, 0.8rem) und damit das bisherige Aussehen. */
.eyebrow {
  color: var(--color-red);
  text-transform: uppercase;
  font-family: var(--font-eyebrow, inherit);
  font-size: var(--size-eyebrow, 0.8rem);
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-block;
}

/* Barrierefreiheit (WordPress-Standardklassen)
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
  background: var(--color-white);
  color: var(--color-teal-dark);
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  width: auto;
  left: 16px;
  top: 16px;
  padding: 12px 20px;
  z-index: 100000;
  position: fixed !important;
  border-radius: 4px;
  font-weight: 600;
}

/* Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
}

.btn-outline.on-dark {
  color: var(--color-white);
}

.btn-outline.on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-outline.on-light {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.btn-outline.on-light:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

.link-arrow {
  color: var(--color-red);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.link-arrow svg {
  transition: transform 0.2s ease;
}

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

/* Header / Navigation
   ========================================================================== */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 26px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  font-family: var(--font-heading);
}

.logo svg,
.logo img {
  flex-shrink: 0;
  max-height: 40px;
  width: auto;
}

.logo-text {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
}

.main-nav ul.nav-menu-list {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--color-white);
  font-size: 0.95rem;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  border-bottom-color: currentColor;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.6rem;
  cursor: pointer;
}

/* Hero (Startseite)
   ========================================================================== */

.hero {
  position: relative;
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: 150px 0 70px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: 2.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 560px;
}

.hero-title-image {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 280px;
}

.hero p {
  max-width: 480px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Logo-Modus (hero_title_mode = "image" mit hochgeladenem Bild, siehe
   leuchtturm_hero_is_image_mode()): Logo, Eyebrow/Trennlinie, Text und
   Button zentriert statt linksbündig, mit reduziertem oberen
   Innenabstand. Ohne diese Regeln erzeugt ein hohes Logo (z. B. ein
   Rundsiegel) sehr viel Leerraum über dem Hero-Bereich und wirkt neben
   dem kürzeren Hero-Bild unausgewogen (Kundenfeedback). Der normale
   Text-Modus bleibt davon unberührt und weiterhin linksbündig. */
.hero.hero-logo-mode,
.page-hero.hero-logo-mode {
  padding-top: 100px;
}

/* .hero-grid/.page-hero-grid zentrieren die beiden Spalten normalerweise
   zueinander (align-items: center) – bei einem hohen Logo wird dadurch
   die Text-Spalte zur höheren Spalte, während das kürzere Hero-Bild
   darunter mittig "schwebt" statt oben bündig mit dem Logo abzuschließen
   (Kundenfeedback: "sollte eine Gerade bilden"). Im Logo-Modus daher
   beide Spalten oben ausrichten statt zueinander zu zentrieren. */
.hero-logo-mode .hero-grid,
.hero-logo-mode .page-hero-grid {
  align-items: flex-start;
}

.hero-logo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Die <h1>, die im Logo-Modus das Bild umschließt, bekommt über die
   allgemeine Regel "h1, h2, h3, h4 { margin: 0 0 16px; }" (weiter oben)
   einen eigenen, vom Bild unabhängigen Abstand nach unten - das war die
   eigentliche Ursache des zu großen Abstands (Kundenfeedback, Fix in
   1.15.2 traf nur den Bild-eigenen Abstand und blieb dadurch kaum
   sichtbar, da h1 und img als Flexbox-Geschwister/-Kind ihre Abstände
   nicht ineinander "zusammenfalten" wie im normalen Blockfluss, sich
   also addieren statt sich zu überlagern). Im Logo-Modus komplett auf 0
   gesetzt - einzig der Abstand des Bildes selbst (s. u.) bestimmt jetzt
   noch die Lücke. */
.hero-logo-content h1 {
  margin-bottom: 0;
}

.hero-logo-content .hero-title-image {
  margin: 0 auto 12px;
}

.hero-logo-content h1 + p {
  margin-top: 0;
}

.hero-logo-content .hero-actions {
  justify-content: center;
}

.hero-logo-content hr {
  margin-left: auto;
  margin-right: auto;
}

/* Vollbild-Kopfbereich (seit v1.23.0, Feld "hero_layout" = "hintergrund"
   auf der Startseite): Das Hero-Bild füllt die komplette, sonst grüne
   Fläche, Überschrift bzw. Logo stehen darüber. Der grüne Farbverlauf
   bleibt als Hintergrund der <section> bestehen - er ist sichtbar,
   solange das Bild noch lädt, und verhindert weißes Aufblitzen.

   Das Bild steckt bewusst in einem <img> (.hero-bg-media) statt in einer
   CSS-background-Angabe: nur so greifen fetchpriority/decoding, das Bild
   ist Teil des Dokuments und behält seine Bildbeschreibung. */
.hero-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Abdunklung für die Lesbarkeit von weißer Schrift/hellem Logo auf dem
   Foto (Stufen über das Feld "hero_overlay"). Zusätzlich zum
   gleichmäßigen Schleier ein dunklerer Verlauf oben und unten: oben
   sitzt die Kopfzeile mit Menü, unten der Übergang zum Seiteninhalt. */
.hero-bg-mode .hero-bg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 37, 43, 0.55) 0%, rgba(10, 37, 43, 0) 28%, rgba(10, 37, 43, 0) 62%, rgba(10, 37, 43, 0.55) 100%),
    rgba(10, 37, 43, var(--hero-overlay, 0.45));
}

.hero-bg-overlay-keine .hero-bg-media::after {
  --hero-overlay: 0;
}

.hero-bg-overlay-leicht .hero-bg-media::after {
  --hero-overlay: 0.25;
}

.hero-bg-overlay-mittel .hero-bg-media::after {
  --hero-overlay: 0.45;
}

.hero-bg-overlay-stark .hero-bg-media::after {
  --hero-overlay: 0.65;
}

/* Höhe in drei Stufen (Feld "hero_height"). min-height statt fester
   Höhe: Der Bereich wächst weiterhin mit, falls Überschrift, Text und
   Button zusammen mehr Platz brauchen (z. B. auf schmalen Displays). */
.hero.hero-bg-mode,
.page-hero.hero-bg-mode {
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
}

.hero-bg-height-kompakt {
  min-height: 460px;
}

.hero-bg-height-mittel {
  min-height: 620px;
}

.hero-bg-height-gross {
  min-height: 88vh;
}

/* Inhalt über das Bild heben und einspaltig zentrieren - im Vollbild-
   Modus gibt es keine zweite Spalte mehr (das Bild ist ja die Fläche
   selbst). Die Zentrierung der einzelnen Elemente übernimmt weiterhin
   .hero-logo-content, das front-page.php in diesem Modus immer setzt. */
.hero-bg-mode .hero-grid,
.hero-bg-mode .page-hero-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  width: 100%;
}

/* Einspaltig auch ohne Vollbild - nämlich dann, wenn das Bild neben dem
   Text abgeschaltet ist (Feld "hero_image_enabled", seit v1.27.0). Ohne
   diese Regel bliebe die leere zweite Rasterspalte stehen und der Text
   nähme nur die halbe Breite ein. */
.hero-grid.hero-single,
.page-hero-grid.hero-single {
  grid-template-columns: 1fr;
}

/* Ausrichtung von Überschrift und Text (Feld "hero_align", seit
   v1.27.0). "Automatisch" wird schon in leuchtturm_hero_settings()
   aufgelöst - hier kommen nur noch links/mitte/rechts an.

   Die Absätze im Hero haben eine begrenzte Lesebreite (max-width), sie
   müssen deshalb zusätzlich über automatische Außenabstände verschoben
   werden; text-align allein würde den Textblock links stehen lassen und
   nur die Zeilen darin ausrichten. */
.hero-align-mitte {
  text-align: center;
}

.hero-align-mitte h1,
.hero-align-mitte p {
  margin-left: auto;
  margin-right: auto;
}

.hero-align-mitte hr,
.hero-align-mitte .hero-actions {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.hero-align-mitte .hero-content {
  align-items: center;
  text-align: center;
}

.hero-align-rechts {
  text-align: right;
}

.hero-align-rechts h1,
.hero-align-rechts p {
  margin-left: auto;
  margin-right: 0;
}

.hero-align-rechts hr {
  margin-left: auto;
  margin-right: 0;
}

.hero-align-rechts .hero-actions {
  justify-content: flex-end;
}

.hero-align-rechts .hero-content {
  align-items: flex-end;
  text-align: right;
}

/* Linksbündig ist der Ausgangszustand des Themes - nötig ist die Regel
   nur, um im Logo-Modus (dort zentriert .hero-logo-content per Flexbox)
   eine bewusst gewählte linke Ausrichtung wieder durchzusetzen. */
.hero-align-links {
  text-align: left;
}

/* text-align hier zwingend mit setzen: Im Logo-Modus bringt
   .hero-logo-content ein eigenes "text-align: center" mit, und ein
   direkt am Element gesetzter Wert schlägt jeden geerbten - die
   Ausrichtung des Elternelements allein bliebe wirkungslos. */
.hero-align-links .hero-content {
  align-items: flex-start;
  text-align: left;
}

.hero-align-links h1,
.hero-align-links p,
.hero-align-links hr {
  margin-left: 0;
  margin-right: 0;
}

/* Schrift auf einem Foto braucht mehr Trennung vom Untergrund als auf
   einer ruhigen Farbfläche - dezenter Schatten statt kräftigerer
   Abdunklung, damit das Bild sichtbar bleibt. */
.hero-bg-mode h1,
.hero-bg-mode p {
  text-shadow: 0 1px 12px rgba(10, 37, 43, 0.45);
}

.hero-bg-mode p {
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.92);
}

/* Ein Logo über dem Foto darf etwas größer stehen als neben einem
   zweiten Bild - im Vollbild-Modus ist es das einzige Element im
   Bereich, wenn Text und Button abgeschaltet sind. */
.hero-bg-mode .hero-title-image {
  max-height: 320px;
}

/* Kennzeichnung KI-generierter Bilder (seit v1.25.0, KI-Verordnung
   Artikel 50). Die Plakette steht als Geschwister-Element direkt hinter
   dem Bild (siehe leuchtturm_the_image() in inc/ai-disclosure.php) und
   wird hier in der Bildecke platziert. Damit das funktioniert, brauchen
   die vorhandenen Bild-Rahmen "position: relative" - bewusst so, statt
   im HTML ein zusätzliches Wrapper-Element um jedes Bild zu legen, das
   bestehende Größenregeln (z. B. ".hero-bg-media img { height: 100% }")
   ausgehebelt hätte.

   NICHT in dieser Liste stehen dürfen .hero-bg-media und .quote-band-image:
   Beide sind bereits "position: absolute; inset: 0" (weiter oben in dieser
   Datei) und damit ohnehin Bezugsrahmen für ihre absolut positionierten
   Kinder. Ein späteres "position: relative" bei gleicher Spezifität hat
   das absolute Positionieren überschrieben - der Vollbild-Kopfbereich der
   Startseite lief dadurch als normales Element in den Textfluss und stand
   plötzlich als Spalte neben dem Logo statt hinter ihm (Fix v1.26.1). */
.hero-image,
.page-hero-image,
.split-media,
.team-card {
  position: relative;
}

/* Rahmen für Bilder im normalen Inhaltstext (Stellenbeschreibungen).
   Dort ist nicht bekannt, welches Element das Bild umgibt, deshalb setzt
   leuchtturm_ai_mark_content_images() ein eigenes <span> darum. */
.lt-media {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Zurückhaltender als in v1.25.0 (Kundenrückmeldung: der Rahmen um das
   Wort wirkte zu groß): kleinere Schrift, weniger Innenabstand, keine
   Großbuchstaben mehr und normales Schriftgewicht. Die Plakette soll
   die Angabe machen, ohne das Bild zu beherrschen. Weiter verkleinern
   sollte man sie nicht - sie muss klar erkennbar bleiben (das ist der
   Zweck der Kennzeichnung). */
.lt-ai-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  background: rgba(10, 37, 43, 0.7);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  /* Die Plakette ist eine Angabe zum Bild, kein Bedienelement - Klicks
     sollen weiterhin beim darunterliegenden Bild/Link ankommen. */
  pointer-events: none;
}

/* Auf Team-Karten sitzt unter dem Foto direkt der Textbereich; die
   Plakette gehört zum Foto und darf nicht in den Text ragen. */
.team-card .lt-ai-badge {
  bottom: auto;
  top: 8px;
}

.hero-image {
  border-radius: 4px;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Einfacher Seiten-Hero (Unterseiten) */

.page-hero {
  position: relative;
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: 160px 0 80px;
}

/* Kontakt-Seite: etwas weniger Abstand nach unten (bis v1.26.2 als
   Inline-Style direkt im Template, seit der Umstellung auf die zentrale
   Hero-Funktion als Klasse). */
.page-hero-tight {
  padding-bottom: 60px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.page-hero h1 {
  font-size: 2.6rem;
  max-width: 480px;
}

.page-hero p {
  max-width: 440px;
  color: rgba(255, 255, 255, 0.9);
}

.page-hero-image {
  border-radius: 4px;
  overflow: hidden;
}

.page-hero-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-hero .eyebrow {
  color: #f0a0a5;
}

.page-hero hr {
  border: none;
  border-top: 2px solid var(--color-red);
  width: 48px;
  margin: 0 0 20px;
}

/* Feature Cards
   ========================================================================== */

.cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: -30px;
  position: relative;
  z-index: 5;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Zweispaltiger Inhaltsbereich
   ========================================================================== */

.section {
  padding: 90px 0;
}

.section.tight {
  padding: 60px 0;
}

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split img {
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Spalten-Reihenfolge in .split-Bereichen (seit v1.17.1 über Klassen
   statt Inline-"style=order:…" in den Templates).

   Hintergrund: Die frei wählbare Bild-Position (links/rechts) wurde
   bis v1.17.0 als Inline-Style auf die beiden Spalten geschrieben.
   Inline-Styles lassen sich per Media Query nicht überschreiben (nur
   mit !important), deshalb blieb die gewählte Reihenfolge auch im
   einspaltigen Handy-Layout aktiv. Auf der Teamseite, wo die Bild-
   Position je Person abwechselt (links/rechts/links/…), führte das
   dazu, dass untereinander mal Bild-Text, mal Text-Bild stand – zwei
   Fotos bzw. zwei Textblöcke landeten direkt nebeneinander und die
   Zuordnung Person <-> Foto war nicht mehr erkennbar (Kundenfeedback).

   Mit Klassen gewinnt die Media Query weiter unten und stellt einspaltig
   überall dieselbe Reihenfolge her: Bild zuerst, Text darunter. */
.split > .split-media { order: 2; }
.split > .split-body { order: 1; }
.split-media-left > .split-media { order: 1; }
.split-media-left > .split-body { order: 2; }

.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-weight: 500;
}

.check-list .icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Seit v1.22.0 sind die Icons dieser Liste im Seiten-Editor wählbar
   (Icon-Bibliothek 22 px, eigene Bild-Uploads beliebig groß). Der Kreis
   hier ist mit 34 px kleiner als der der Karten - ohne diese Begrenzung
   würde ein gewähltes Icon über den Rand hinauslaufen. */
.check-list .icon-circle svg {
  width: 18px;
  height: 18px;
}

/* !important ist hier nötig, nicht bequem: eigene Icon-Bilder bekommen
   von leuchtturm_get_card_icon() (inc/admin-fields.php) einen
   Inline-Style "width:100%;height:100%" mit, der für die größeren
   Karten-Kreise gedacht ist und sonst nicht zu überschreiben wäre. */
.check-list .icon-circle img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

/* Freie Inhalts-Blöcke (Phase 3, inc/admin-fields.php: leuchtturm_render_blocks())
   ========================================================================== */

/* Block ohne Bild: zentrierter Fließtext, wie .section-head, aber ohne
   den zusätzlichen unteren Abstand (Block hat schon .section-Padding). */
.content-block-text {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* Block mit Bild nutzt die bestehende .split-Klasse (zweispaltig,
   responsive) - keine eigene Regel nötig. */

/* Wählbare Block-Hintergrundfarbe (Feld "bg_color", siehe
   leuchtturm_block_color_palette() in inc/admin-fields.php). Auf
   dunklen Hintergründen wird die Textfarbe auf Weiß gesetzt und
   vererbt sich automatisch an h2/p/a (siehe globale Regeln oben, die
   keine eigene Textfarbe setzen). */
.content-block-bg-cream { background: var(--color-cream); }
.content-block-bg-card { background: var(--color-card); }
.content-block-bg-white { background: var(--color-white); }
.content-block-bg-teal-light { background: var(--color-teal-light); color: var(--color-white); }
.content-block-bg-teal { background: var(--color-teal); color: var(--color-white); }
.content-block-bg-teal-dark { background: var(--color-teal-dark); color: var(--color-white); }
.content-block-bg-red { background: var(--color-red); color: var(--color-white); }

/* Team
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Einzelne Person auf der Teamseite (page-team.php). Der Abstand nach
   unten muss deutlich größer sein als der Innenabstand zwischen Foto
   und Text (.split gap), sonst verschwimmt einspaltig die Zuordnung,
   welcher Text zu welchem Foto gehört. */
.team-member {
  margin-bottom: 60px;
}

.team-member:last-child {
  margin-bottom: 0;
}

.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.team-card-body {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: none;
  padding: 16px;
  text-align: center;
}

.team-card-body h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.team-card-body span {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.team-more {
  text-align: center;
  margin-top: 36px;
}

/* Zitat-Band
   ========================================================================== */

.quote-band {
  position: relative;
  background: var(--color-teal-dark);
  color: var(--color-white);
  padding: 60px 0;
  overflow: hidden;
}

.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 43, 50, 0.94) 0%, rgba(12, 43, 50, 0.86) 35%, rgba(12, 43, 50, 0.55) 70%, rgba(12, 43, 50, 0.3) 100%);
  z-index: 1;
}

.quote-band-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.quote-band blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-style: italic;
  max-width: 640px;
}

.quote-band-author {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
}

.quote-mark {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--color-white);
  line-height: 1;
  flex-shrink: 0;
}

.quote-band-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.quote-band-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info-Band (Gruppenangebote)
   ========================================================================== */

.info-band {
  background: var(--color-teal-dark);
  color: var(--color-white);
  padding: 60px 0;
}

.info-band-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}

.info-band-grid > div:first-child {
  flex: 1 1 280px;
}

.info-band h2 {
  font-size: 1.6rem;
  max-width: 320px;
}

.info-band-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 160px;
}

.info-band-item .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-band-item p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* CTA-Banner
   ========================================================================== */

/* Hintergrundfarbe kommt seit v1.19.0 aus den Website-Einstellungen
   (leuchtturm_cta_banner_appearance(), inc/admin-settings.php) und wird
   über eine der .cta-banner-bg-*-Klassen bzw. – bei selbst ergänzten
   Farben – als Inline-Style gesetzt. Deshalb hier bewusst KEIN
   background mehr: bis v1.18.1 stand hier var(--color-card), also exakt
   dieselbe Farbe wie beim .site-footer direkt darunter – beide Bereiche
   verschmolzen dadurch zu einem einzigen hellgrauen Block. */
.cta-banner {
  padding: 50px 0;
}

.cta-banner-bg-cream { background: var(--color-cream); }
.cta-banner-bg-card { background: var(--color-card); }
.cta-banner-bg-white { background: var(--color-white); }
.cta-banner-bg-teal-light { background: var(--color-teal-light); }
.cta-banner-bg-teal { background: var(--color-teal); }
.cta-banner-bg-teal-dark { background: var(--color-teal-dark); }
.cta-banner-bg-red { background: var(--color-red); }

/* Auf dunklem Grund (feste dunkle Palettenfarben oder eine selbst
   ergänzte Farbe, deren Helligkeit unter dem Schwellwert liegt – siehe
   leuchtturm_hex_is_dark()). Die Templates setzen beim Button
   zusätzlich "on-dark" statt "on-light". */
.cta-banner.is-dark {
  color: var(--color-white);
}

.cta-banner.is-dark h3 {
  color: var(--color-white);
}

.cta-banner.is-dark p {
  color: rgba(255, 255, 255, 0.85);
}

/* Sonderfall Gruppenangebote: dort folgt direkt auf das CTA-Banner das
   ebenfalls dunkle Info-Band (und bei anderer Reihenfolge ggf. das
   Zitat-Band). Ohne Trennung verschmelzen zwei dunkle Bereiche zu einem
   Block. Eine Haarlinie genügt, um die Kante sichtbar zu machen. Greift
   nur, wenn die Bereiche wirklich direkt aufeinander folgen - schiebt
   die Redaktion einen Inhalts-Block dazwischen, entfällt sie von selbst. */
.cta-banner.is-dark + .info-band,
.cta-banner.is-dark + .quote-band {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-banner-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cta-banner-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  flex-shrink: 0;
}

.cta-banner h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}

.cta-banner p {
  margin: 0;
  color: var(--color-text-light);
}

/* Content-Grids (Leistungen, Über uns)
   ========================================================================== */

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

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

.content-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
}

.content-card hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* Fest codierte Häkchen-Liste (bullet1/bullet2 bei Gruppenangebote-Karten,
   siehe page-gruppenangebote.php) - seit v1.16.0 über die eigene Klasse
   ".content-card-checklist" von frei getippten Listen in Rich-Text-
   Feldern (z. B. innerhalb des Karten-Texts) abgegrenzt, damit deren
   Aufzählungspunkte nicht durch "list-style: none" unterdrückt werden. */
.content-card-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-card-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.content-card-checklist li .icon-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Normale WordPress-Inhalte (Impressum, Datenschutz, page.php)
   ========================================================================== */

.section h2,
.section h3 {
  margin-top: 32px;
}

/* Kontaktseite
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

/* Kontaktseite ohne Formular (Schalter „Kontaktformular anzeigen" = Nein,
   seit v1.20.0). Ohne die zweite Spalte würde das Raster oben die halbe
   Seite leer lassen; stattdessen einspaltig mit begrenzter Lesebreite. */
.contact-single {
  max-width: 720px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.contact-info-item .icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}

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

/* Honeypot-Feld des Kontaktformulars (Spam-Schutz, page-kontakt.php):
   für Besucher und Screenreader unsichtbar, aber im Quelltext vorhanden -
   automatische Formular-Ausfüller tragen hier etwas ein und verraten
   sich dadurch. Bewusst nicht "display:none", da manche Bots genau
   darauf prüfen. */
.lt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer
   ========================================================================== */

.site-footer {
  background: var(--color-card);
  padding-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1px 1.2fr 1px 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.footer-divider {
  background: var(--color-border);
}

.footer-col h4 {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.92rem;
}

.footer-contact-line svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-red);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-teal-dark);
}

.footer-logo .logo-text {
  color: var(--color-teal-dark);
}

/* Eigenes Footer-Logo (seit v1.24.0, Website-Einstellungen -> "Logo im
   Footer"). Die Höhe ist begrenzt, die Breite ergibt sich daraus - so
   fügt sich jedes hochgeladene Bild in die Zeile ein, unabhängig von
   seinen Abmessungen, ohne den Footer auseinanderzuziehen. Etwas höher
   als die gezeichnete Silhouette (34px), da echte Logos meist Text
   enthalten und dadurch mehr Höhe brauchen, um lesbar zu bleiben. */
.footer-logo-image {
  max-height: 60px;
  width: auto;
  flex-shrink: 0;
}

.footer-logo .logo-sub {
  color: var(--color-text-light);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.footer-bottom {
  background: var(--color-teal-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 20px 0;
  font-size: 0.85rem;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Menü-Einträge des unteren Footer-Streifens. Bis v1.17.0 gab
   wp_nav_menu() die <li>-Elemente hier ohne umschließendes <ul> aus
   (items_wrap "%3$s") - ungültiges HTML. Jetzt mit echter Liste,
   optisch unverändert. */
.footer-bottom-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom-menu li {
  margin-bottom: 0;
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* Suchformular (WordPress-Standardausgabe, get_search_form())
   ==========================================================================
   Wird auf der 404-Seite und in Suchergebnissen verwendet. Ohne diese
   Regeln erscheint das unformatierte Browser-Standardformular. */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}

.search-form label {
  flex-grow: 1;
  min-width: 200px;
}

.search-form .search-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}

.search-form .search-submit {
  padding: 13px 24px;
  border-radius: 999px;
  border: 2px solid var(--color-teal);
  background: transparent;
  color: var(--color-teal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-form .search-submit:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

/* Utilities */

.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* Karriere / Stellenausschreibungen (page-karriere.php,
   single-stellenausschreibung.php, inc/cpt-jobs.php)
   ========================================================================== */

.job-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.job-row {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.job-row:hover {
  box-shadow: 0 6px 18px rgba(18, 56, 64, 0.08);
}

.job-row-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}

.job-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.job-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-row-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.job-row-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-teal-dark);
}

.job-row-arrow {
  flex-shrink: 0;
  color: var(--color-red);
  display: flex;
  transition: transform 0.2s ease;
}

.job-row.is-open .job-row-arrow {
  transform: rotate(90deg);
}

.job-row-panel {
  padding: 0 22px 26px 80px;
}

.job-row-panel-inner {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

.job-row-panel-inner .job-files-card,
.job-row-panel-inner .job-apply-cta {
  margin-top: 28px;
}

/* Freie Inhalts-Blöcke (leuchtturm_render_blocks()) innerhalb einer
   aufgeklappten Stellenausschreibung: die normalen .section-Abstände
   (90px oben/unten, siehe weiter oben) sind für den vollen Seiten-
   fluss gedacht und wirken im schmalen Akkordeon-Panel überdimensioniert
   - hier auf einen schlanken Abstand reduziert. Höhere Spezifität durch
   zwei Klassen (.job-row-panel-inner .content-block) gewinnt gegenüber
   der allgemeinen .section-Regel ohne !important. */
.job-row-panel-inner .content-block {
  padding: 24px 0 0;
}

.job-row-panel-inner .content-block .container {
  padding: 0;
}

.job-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-type {
  background: var(--color-teal-dark);
  color: var(--color-white);
}

.badge-location {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.job-badges-hero {
  margin-bottom: 4px;
}

.job-content {
  max-width: 760px;
  margin: 0 auto;
}

.job-files-card {
  margin-top: 40px;
}

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

.job-files-list li {
  margin-bottom: 12px;
}

.job-files-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-teal-dark);
  font-weight: 600;
}

.job-files-list .icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.job-apply-cta {
  margin-top: 40px;
}

.job-empty-state {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.job-empty-state .btn {
  margin-top: 16px;
}

/* Mobiles Menü (geöffneter Zustand)
   ==========================================================================
   Steht bewusst VOR dem Responsive-Abschnitt: die Media Queries unten
   passen u. a. die Innenabstände dieses Blocks an und müssen dafür
   später in der Datei stehen (gleiche Spezifität, letzte Regel gewinnt). */

.main-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-teal-dark);
  padding: 24px 32px;
}

.main-nav.is-open ul.nav-menu-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .hero-grid,
  .page-hero-grid,
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Einspaltig deutlich enger als nebeneinander (dort 60px): Foto und
     zugehöriger Text müssen als zusammengehörig lesbar bleiben. */
  .split {
    gap: 28px;
  }

  .hero-image,
  .page-hero-image {
    order: -1;
  }

  /* Vollbild-Kopfbereich (v1.23.0): Auf schmalen Geräten deutlich
     niedriger. Die Stufen bleiben in ihrem Verhältnis erhalten, die
     Fläche würde sonst mehrere Bildschirmlängen einnehmen, bevor der
     erste Inhalt zu sehen ist. Der Bereich wächst bei Bedarf weiterhin
     mit dem Inhalt (min-height). */
  .hero.hero-bg-mode {
    padding: 120px 0 70px;
  }

  .hero-bg-height-kompakt {
    min-height: 360px;
  }

  .hero-bg-height-mittel {
    min-height: 440px;
  }

  .hero-bg-height-gross {
    min-height: 70vh;
  }

  .hero-bg-mode .hero-title-image {
    max-height: 220px;
  }

  /* Einspaltig gilt für alle Bildbereiche dieselbe Reihenfolge
     (Bild oben, Text darunter), unabhängig von der im Backend
     gewählten Bild-Position - siehe Kommentar bei ".split-media". */
  .split > .split-media,
  .split-media-left > .split-media {
    order: 1;
  }

  .split > .split-body,
  .split-media-left > .split-body {
    order: 2;
  }

  .team-member {
    margin-bottom: 56px;
  }

  /* Zwischenstufe statt direkt einspaltig: auf Tablets/breiten Handys
     wirken volle Kartenbreiten sonst überdimensioniert. */
  .cards-row,
  .grid-3,
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .job-row-header {
    padding: 14px 16px;
    gap: 12px;
  }

  .job-row-icon {
    width: 36px;
    height: 36px;
  }

  .job-row-panel {
    padding: 0 16px 22px 16px;
  }

  .info-band-grid {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

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

  .footer-divider {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* Roter Header-Button ("Hilfe erhalten") ab Tablet-Breite kleiner:
     Sobald das Menü zur Schaltfläche zusammenklappt, teilen sich Logo,
     Button und Menü-Symbol eine schmale Zeile - in Desktop-Größe
     (14px/28px, 0.9rem) dominiert der Button die komplette Kopfzeile.
     Er bleibt bewusst der einzige rote, gefüllte Button des Themes
     (siehe CLAUDE.md, Abschnitt 7) und damit klar der Hauptweg zur
     Hilfe - nur eben in einer der Bildschirmbreite angemessenen Größe.
     Kundenrückmeldung v1.23.1. */
  .nav-cta .btn {
    padding: 11px 18px;
    font-size: 0.8rem;
    border-width: 1.5px;
    white-space: nowrap;
  }

  .quote-band::before {
    background: rgba(12, 43, 50, 0.88);
  }
}

@media (max-width: 640px) {
  .hero h1,
  .page-hero h1 {
    font-size: 1.9rem;
  }

  .hero-title-image {
    max-height: 160px;
  }

  /* Muss hier wiederholt werden: Die Regel für den Vollbild-Modus im
     960px-Block ist spezifischer (zwei Klassen) und würde die Zeile
     darüber sonst auch auf sehr schmalen Displays überstimmen. */
  .hero-bg-mode .hero-title-image {
    max-height: 170px;
  }

  /* Kennzeichnung KI-generierter Bilder auf schmalen Displays noch
     einmal etwas kleiner - sie soll erkennbar bleiben, aber nicht über
     einem kleinen Foto stehen wie eine Bildunterschrift. */
  .lt-ai-badge {
    font-size: 0.58rem;
    padding: 2px 7px;
    right: 6px;
    bottom: 6px;
  }

  .team-card .lt-ai-badge {
    top: 6px;
  }

  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Icon + Text des CTA-Banners standen auch im zentrierten Mobil-
     Layout noch nebeneinander (Icon 64px links), wodurch der Text auf
     schmalen Displays nur noch eine sehr geringe Restbreite hatte. */
  .cta-banner-left {
    flex-direction: column;
    text-align: center;
  }

  /* Kopfzeile: Logo + roter Button + Menü-Schaltfläche passten auf
     schmalen Displays (< ca. 400px) nicht nebeneinander und erzeugten
     seitliches Scrollen. Innenabstände und Schriftgrößen daher
     reduziert. */
  .container,
  .header-inner,
  .main-nav.is-open {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-header {
    padding: 18px 0;
  }

  .header-inner {
    gap: 12px;
  }

  .logo svg,
  .logo img {
    max-height: 32px;
  }

  .logo-text {
    font-size: 0.8rem;
  }

  .nav-cta {
    gap: 12px;
  }

  /* Handy: noch einmal deutlich kleiner. "Hilfe erhalten" ist ein
     langer Text - bei den bisherigen Werten (10px/16px, 0.78rem) nahm
     der Button auf schmalen Displays gut die halbe Kopfzeile ein und
     wirkte neben Logo und Menü-Symbol erschlagend (Kundenrückmeldung).
     Die Textgröße bleibt mit 0.72rem ≈ 11,5px auch als Großbuchstaben-
     Text noch gut lesbar; kleiner sollte er nicht werden. */
  .nav-cta .btn {
    padding: 8px 13px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  /* Einspaltig sind drei bzw. zwei Karten nebeneinander zu schmal. */
  .cards-row,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

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

  /* Die Anführungszeichen des Zitat-Bands (3.5rem) nahmen links und
     rechts zusammen über 100px Breite ein - auf einem 360px-Display
     blieb dadurch kaum Platz für das Zitat selbst. */
  .quote-band-inner {
    gap: 12px;
  }

  .quote-mark {
    font-size: 2.2rem;
  }

  .quote-band blockquote {
    font-size: 1.15rem;
  }

  /* Abschnittsabstände (90px) wirken auf Handys als sehr lange
     Leerstrecken zwischen den Inhalten. */
  .section {
    padding: 60px 0;
  }

  .section.tight {
    padding: 40px 0;
  }

  .hero {
    padding: 130px 0 50px;
  }

  .page-hero {
    padding: 130px 0 60px;
  }
}

/* Sehr schmale Geräte (kleine bzw. ältere Handys, ab hier wird es in der
   Kopfzeile wirklich eng: Logo + Schriftzug + roter Button + Menü-
   Symbol). Der Schriftzug neben dem Logo tritt hier zurück, damit der
   Button nicht umbrechen oder über den Rand laufen muss. */
@media (max-width: 380px) {
  .nav-cta .btn {
    padding: 7px 11px;
    font-size: 0.68rem;
  }

  .logo-text {
    font-size: 0.72rem;
  }

  .logo svg,
  .logo img {
    max-height: 28px;
  }
}