/* =========================================================
   Grundlagen & Design-Tokens
   ========================================================= */

:root {
  /* Marken-/Akzentfarben: dunkles, ruhiges Blau + weiches Mint */
  --color-primary: #1e3a4a;
  --color-primary: oklch(29% 0.045 227);
  --color-primary-dark: #142834;
  --color-primary-dark: oklch(22% 0.04 227);
  --color-accent: #6fb8ac;
  --color-accent: oklch(72% 0.08 175);
  --color-accent-dark: #4f9a8d;
  --color-accent-dark: oklch(62% 0.09 175);

  /* Grundfläche: warme Neutraltöne, bewusst nicht klinisch-kalt */
  --color-bg: #f9f4ea;
  --color-bg: oklch(96.7% 0.012 75);
  --color-bg-alt: #f1ebe1;
  --color-bg-alt: oklch(93.5% 0.015 75);
  --color-surface: #ffffff;
  --color-surface: oklch(99% 0.002 80);

  /* Fließtext bewusst im selben Blau wie die Überschriften (--color-primary)
     statt in einem warmen Neutralton – Schrift und Symbole ziehen sich so
     als ein durchgehender Farbklang durch die ganze Seite. */
  --color-text: #142834;
  --color-text: oklch(22% 0.04 227);
  --color-text-muted: #3d5568;
  --color-text-muted: oklch(46% 0.05 222);
  --color-border: #e2dbcc;
  --color-border: oklch(88% 0.015 75);

  --color-success-bg: #e7f3ef;
  --color-success-text: #1f5c4d;
  --color-error-bg: #fbeae8;
  --color-error-text: #8a2e22;

  /* Weiterer Tonwert für abwechselnde Section-Hintergründe: helles Blau-Mint.
     Bewusst deutlich sichtbar (nicht nur eine Spur Farbe), damit Blau/Mint
     das prägende Element der Seite ist statt einer Ausnahme. */
  --color-tint: oklch(92% 0.035 210);
  --color-tint-border: oklch(83% 0.05 208);
  --color-header-bg: oklch(98% 0.012 210);

  /* Warmer Hinweiston für den Notfall-Block – bewusst kein Alarm-Rot,
     sondern ein gedämpftes Bernstein, das zu den warmen Neutraltönen passt. */
  --color-notice-bg: oklch(94.5% 0.04 70);
  --color-notice-border: oklch(78% 0.09 65);
  --color-notice-text: oklch(34% 0.06 45);

  --shadow-accent: 0 10px 28px -12px rgba(30, 58, 74, 0.28);
  --shadow-accent-lift: 0 16px 34px -14px rgba(30, 58, 74, 0.32);
  /* Flacherer Schatten für den "Eindrück"-Hover auf Bild-Karten */
  --shadow-press: 0 1px 4px rgba(30, 58, 74, 0.12);
  --transition-press: 170ms ease-out;

  --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(30, 58, 74, 0.05), 0 3px 10px rgba(30, 58, 74, 0.07);

  /* Einheitlicher vertikaler Rhythmus zwischen Sections sowie einheitliche
     Höhe für alle Wellen-Trennlinien (Hero-Übergang, "Nächster Schritt"-Band
     oben/unten) - zentral definiert, damit beides nicht auseinanderlaufen
     kann. */
  --section-spacing: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --wave-height: clamp(40px, 6vw, 90px);

  --z-nav: 100;
  --z-faq: 900;
  --z-cookie-consent: 950;
  --z-lightbox: 1000;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 180ms var(--ease-out-quart);
  --transition-medium: 420ms var(--ease-out-quart);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Typografische Hierarchie: Serifenschrift bleibt der großen Seitenidentität
   (h1) vorbehalten; Zwischenüberschriften (h2) und Karten-/Elementtitel (h3)
   wechseln bewusst in die serifenlose Schrift, damit die Ebenen klar
   unterscheidbar bleiben statt überall gleich auszusehen. */
h1 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.5em;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1.page-title--compact {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.35rem);
}

/* Lange, ungetrennte deutsche Komposita als alleiniger Seitentitel (z. B.
   "Datenschutzerklärung") liefen auf schmalen Screens über den
   verfügbaren Platz hinaus und verursachten horizontales Scrollen der
   gesamten Seite. */
@media (max-width: 480px) {
  h1 {
    overflow-wrap: break-word;
  }
}

h2 {
  font-family: var(--font-body);
  color: var(--color-primary-dark);
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 0.6em;
  font-size: clamp(1.05rem, 0.94rem + 0.5vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

h3 {
  font-family: var(--font-body);
  color: var(--color-primary-dark);
  line-height: 1.3;
  text-wrap: balance;
  margin: 0 0 0.5em;
  font-size: 1.08rem;
  font-weight: 700;
}

h2:not(.no-accent)::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 0.6em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

.section--center h2:not(.no-accent)::after {
  margin-left: auto;
  margin-right: auto;
}

/* Wiederkehrende kleine Grafik-Elemente neben/über Seiten-Überschriften –
   sorgen für mehr typografische Vielfalt zwischen den Unterseiten, statt
   dass jede Seite exakt denselben zentrierten Kopf wiederholt. */
.page-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-tint);
  color: var(--color-primary);
  margin-bottom: 1.1rem;
  box-shadow: 0 10px 22px -12px rgba(30, 58, 74, 0.3);
}

.page-icon-badge svg {
  width: 26px;
  height: 26px;
}

/* Ablauf-Seite: das Wellen-Icon schwebt dezent auf und ab, damit die
   ansonsten sehr ruhige, statische Seite (Titel + zwei große Grafiken)
   nicht ganz reglos wirkt. Nur auf dieser Seite (page-header--flow ist
   ausschließlich hier vergeben), nicht sitesweit. */
.page-header--flow .page-icon-badge {
  animation: ablaufIconFloat 3.4s ease-in-out infinite;
}

@keyframes ablaufIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-header--flow .page-icon-badge {
    animation: none;
  }
}

.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent-dark);
  margin-bottom: 0.6rem;
}

.page-eyebrow svg {
  width: 16px;
  height: 16px;
}

/* Ablauf: Kopf linksbündig statt zentriert, mit Wellen-Icon */
.page-header--flow {
  text-align: left;
}

/* Aktuelles: kompakter, linksbündiger "Feed"-Kopf */
.page-header--feed {
  text-align: left;
}

/* Räume: etwas größere, dominantere Überschrift für den Galerie-Charakter */
.page-header--gallery h1 {
  font-size: clamp(2.3rem, 1.8rem + 2vw, 3.6rem);
}

p {
  max-width: 70ch;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

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

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

/* Einheitlicher, markentypischer Fokus-Ring für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.gallery__item:focus-visible,
.feature-card:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* =========================================================
   Reveal-on-scroll (mit No-JS-/Headless-Fallback)
   ========================================================= */

/* Ohne .js-Klasse (kein JS, Headless-Renderer, reduzierte Bewegung)
   ist der Inhalt immer sofort sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
    transition: opacity var(--transition-fast);
  }
  html { scroll-behavior: auto; }
}

/* Startseite: die Abschnitte fliegen beim Scrollen deutlich sichtbar ein –
   jeder wirkt fast wie eine eigene Seite, die von unten ins Bild schwebt,
   statt nur sanft einzublenden. Sorgt für mehr Abwechslung als das dezente
   Fade-in der übrigen Seiten, das unverändert bleibt. Bewusst nur
   transform/opacity (Compositor-Ebene) statt filter: blur() – eine
   Weichzeichnung großer Abschnitte während der Transition ist für den
   Browser sehr teuer und führte zu spürbarem Ruckeln/Hängen beim Laden.
   will-change hilft dem Browser, die Ebene vorab vorzubereiten. */
.js .home-flow .reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.94);
  will-change: transform, opacity;
  transition:
    opacity 700ms var(--ease-out-quart),
    transform 700ms var(--ease-out-quart);
}

.js .home-flow .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .home-flow .reveal {
    transform: none;
    transition: opacity var(--transition-fast);
  }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-tint-border);
}

/* Startseite: kein eigener Kopfzeilen-Balken über dem Hero – Logo und
   Menü-Symbol schweben transparent direkt auf dem Foto. Der Header wird
   dafür aus dem Layoutfluss genommen (position: fixed), damit der Hero
   ganz nach oben reicht. Sobald über den Hero hinausgescrollt wurde
   (Klasse .is-scrolled, siehe main.js), wechselt er zur normalen,
   deckenden Kopfzeile wie auf den Unterseiten. */
body.has-hero .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color var(--transition-medium), border-color var(--transition-medium);
}

body.has-hero .site-header.is-scrolled {
  background: var(--color-header-bg);
  border-bottom-color: var(--color-tint-border);
}

/* Logo liegt mit seiner eigenen Transparenz direkt auf dem Hero-Foto; der
   Schlagschatten hebt es nur dezent vom Untergrund ab. */
body.has-hero .site-header:not(.is-scrolled) .site-logo img {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

body.has-hero .site-header:not(.is-scrolled) .nav-toggle:not([aria-expanded="true"]) .nav-toggle__bar {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

body.has-hero .site-header:not(.is-scrolled) .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* "Über mich" bleibt auf dem Hero-Foto reines Text-Element, bekommt dort
   aber wie Logo/Hamburger Weiß + Schlagschatten für Lesbarkeit statt der
   normalen dunklen Textfarbe. Der "Kontakt"-Button braucht keine eigene
   Anpassung: er ist bereits eine gefüllte Akzentfläche (dieselbe Klasse
   wie der Hero-CTA "Kontakt aufnehmen"), die auf dem Foto von Haus aus
   gut lesbar ist. */
body.has-hero .site-header:not(.is-scrolled) .site-header__link {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

body.has-hero .site-header:not(.is-scrolled) .site-header__link:hover,
body.has-hero .site-header:not(.is-scrolled) .site-header__link.is-active {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  body.has-hero .site-header {
    transition: none;
  }
}

.site-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* flex-shrink: 0 verhindert, dass der Header das Logo bei zu wenig Platz
   (schmale Handy-Breiten) über die globale "img { max-width: 100% }"-Regel
   in der Breite staucht, während die Höhe fest bei 84px bleibt - genau das
   führte zu einem sichtbar in die Länge gezogenen Logo. */
.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  height: 84px;
  width: auto;
  transition: opacity var(--transition-fast);
}

@media (max-width: 640px) {
  .site-logo img {
    height: 60px;
  }
}

.site-logo:hover img {
  opacity: 0.85;
}

/* Feste Abkürzungen neben dem Hamburger-Icon (auf allen Seiten, nicht nur
   der Startseite): "Über mich" bewusst zurückhaltend als reiner Text-Link,
   "Kontakt" als hervorgehobener Akzent-Button - kein zweites, gleich
   gewichtetes Button-Paar. Übernimmt den margin-left: auto vom
   .nav-toggle, damit beide Elemente zusammen mit dem Hamburger-Icon am
   rechten Rand gruppiert bleiben, unabhängig von der Bildschirmgröße. */
.site-header__shortcuts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.site-header__link {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* Unterstreich schwingt beim Hover/aktivem Zustand von links ein statt
   abrupt zu erscheinen - selbe Akzentfarbe wie die Trennlinien unter den
   Überschriften, damit es sich in die restliche Seite einfügt. */
.site-header__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-medium);
}

.site-header__link:hover,
.site-header__link.is-active {
  color: var(--color-primary);
  transform: translateY(-1px);
}

.site-header__link:hover::after,
.site-header__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__cta {
  white-space: nowrap;
  /* !important nötig: .button--small setzt ebenfalls font-size und steht
     im Stylesheet weiter unten, würde diese Regel bei gleicher Spezifität
     sonst überschreiben. Bewusst nur hier verkleinert, nicht sitesweit. */
  font-size: 0.8rem !important;
}

@media (max-width: 640px) {
  .site-header__shortcuts {
    gap: 0.6rem;
  }

  .site-header__link {
    font-size: 0.78rem;
  }

  .site-header__cta {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.74rem !important;
  }
}

/* Navigation läuft auf allen Breakpoints hinter dem Hamburger-Menü
   als seitliches Slide-in-Panel, damit die Kopfzeile immer aufgeräumt bleibt. */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 52px;
  height: 52px;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  gap: 7px;
  border-radius: var(--radius-s);
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background: var(--color-tint);
}

.nav-toggle__bar {
  width: 30px;
  height: 3px;
  background: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background: var(--color-accent-dark);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background: var(--color-accent-dark);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(20, 40, 52, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  width: min(320px, 84vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -18px 0 40px -20px rgba(20, 40, 52, 0.35);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  padding: 5rem 1.75rem 2rem;
  transform: translateX(100%);
  transition: transform var(--transition-medium);
}

.js .main-nav {
  transform: translateX(100%);
}

.js .main-nav.is-open {
  transform: translateX(0);
}

.main-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.05rem;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.main-nav a:hover,
.main-nav a.is-active {
  color: var(--color-primary);
  padding-left: 0.5rem;
  border-color: var(--color-accent);
}

.main-nav__cta {
  margin-top: 0.9rem;
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.7rem 1.1rem !important;
  border-radius: var(--radius-pill);
  border-bottom: none !important;
  text-align: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.main-nav__cta:hover {
  background: var(--color-primary-dark);
  padding-left: 1.1rem !important;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .main-nav,
  .nav-overlay,
  .nav-toggle__bar,
  .site-header__link,
  .site-header__link::after {
    transition: none;
  }
}

body.nav-is-open {
  overflow: hidden;
}

/* =========================================================
   Layout-Bausteine
   ========================================================= */

.section {
  padding: var(--section-spacing) 1.5rem;
}

/* Verkleinert gezielt den Abstand zur nachfolgenden Section, z. B. wenn
   zwei Abschnitte inhaltlich eng zusammengehören (z. B. Einleitung und
   "Gut zu wissen" auf "Mein Angebot") und der volle doppelte
   Section-Abstand (Bottom-Padding hier + Top-Padding der nächsten
   Section) zu großzügig wirkt. */
.section--tight-bottom {
  padding-bottom: calc(var(--section-spacing) / 2);
}

/* Startseite: derselbe ruhige, cremig-weiße Hintergrund wie auf den
   Unterseiten (--color-bg) statt eines eigenen Blauverlaufs – Schrift und
   Symbole ziehen sich durchgehend im selben Blau (--color-text) durch die
   ganze Seite. Einzige Ausnahmen: der Foto-Hero (eigenes Bild) und das
   "Nächster Schritt"-Band (siehe .cta-band), die bewusst dunkler bleiben,
   ihren Übergang aber über weiche Wave-Formen lösen statt über einen hart
   abgesetzten Farbblock. */
.home-flow {
  background: var(--color-bg);
}

.section--center {
  text-align: center;
}

.section--center p {
  margin-left: auto;
  margin-right: auto;
}

/* Sehr weicher, verwaschener Lichtschein am Übergang zwischen zwei
   Abschnitten – wirkt wie ein sanfter Farbklang statt einer harten Kante. */
.section--divider {
  position: relative;
}

.section--divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70%);
  height: 90px;
  margin-top: -45px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--color-accent) 0%, transparent 72%);
  filter: blur(26px);
  opacity: 0.22;
  pointer-events: none;
}

/* Wellen-Motiv als wiederkehrendes Signature-Element: exakt dieselbe
   sanfte S-Kurve wie am Hero- und "Nächster Schritt"-Übergang (siehe
   .hero__shape/.cta-band__edge, gleicher Pfad, gleiche viewBox 1440×80),
   hier aber als offene, durchgezogene Konturlinie statt als ausgefüllte
   Fläche. Grund: zwischen normalen Inhalts-Sections auf den Unterseiten
   ist der Hintergrund vorher/nachher identisch (--color-bg) - eine mit
   der Hintergrundfarbe gefüllte Fläche wie am Hero wäre dort unsichtbar.
   Als schlanke, ruhige Linie bleibt die Wellenform trotzdem erkennbar,
   ohne bei bis zu 5 Trennstellen pro Seite zu dominant zu wirken. */
.wave-divider {
  display: flex;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
  padding: 0 1.5rem;
}

.wave-divider svg {
  display: block;
  width: min(1440px, 100%);
  height: var(--wave-height);
  flex-shrink: 0;
}

.wave-divider path {
  fill: none;
  stroke: var(--color-accent-dark);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.4;
}

/* Alle Wellen-Trenner (Hero-Übergang, "Nächster Schritt"-Band,
   Wave-Divider) nutzen preserveAspectRatio="none" und teilen sich jetzt
   auch dieselbe --wave-height - auf schmalen Bildschirmen bliebe die
   Kurve sonst proportional zur Breite zu hoch und wirkte spürbar
   steiler/gestauchter als am Desktop. */
@media (max-width: 480px) {
  :root {
    --wave-height: clamp(18px, 5.6vw, 40px);
  }
}

.section__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.section__inner--narrow {
  max-width: 760px;
}

.section__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
}

@media (max-width: 780px) {
  .section__inner--split {
    grid-template-columns: 1fr;
  }
}

/* Zweites (und jedes weitere ungerade) Raster spiegeln, damit Bild und
   Text bei mehreren aufeinanderfolgenden Rastern (z. B. "Über mich" mit
   mehreren Personen) abwechseln statt sich zu wiederholen. */
.section__inner--split-reverse .section__image {
  order: 2;
}

.section__inner--split-reverse .section__text {
  order: 1;
}

@media (max-width: 780px) {
  .section__inner--split-reverse .section__image,
  .section__inner--split-reverse .section__text {
    order: initial;
  }
}

.section__image {
  position: relative;
  border-radius: var(--radius-m);
}

.section__image img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-press), box-shadow var(--transition-press);
}

/* Leicht versetzte Fläche hinter dem Bild – schafft Tiefe und einen
   dezenten "überlappenden" Effekt statt einer komplett flachen Fläche. */
.section__image::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  background: linear-gradient(135deg, var(--color-tint), var(--color-accent));
  opacity: 0.5;
  border-radius: var(--radius-m);
  z-index: 0;
}

/* "Eindrück"-Effekt: die Karte wirkt beim Hover leicht angedrückt statt
   angehoben – kurze, reaktionsschnelle Transition, flacherer Schatten. */
.section__image:hover img {
  transform: scale(0.98);
  box-shadow: var(--shadow-press);
}

/* =========================================================
   Team ("Über uns"): pro Person eine gemeinsame Spalte, damit
   Foto und Name/Text erkennbar zusammengehören statt als zwei
   unabhängig ausgerichtete Reihen zu wirken
   ========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.team-grid__photo {
  position: relative;
  border-radius: var(--radius-m);
  /* Bewusst schmaler als die Textspalte und zentriert - ein Portrait in
     voller Spaltenbreite (~560px) würde blockig wirken und nicht mehr
     wie ein Foto neben Fließtext. */
  width: min(420px, 78%);
  margin: 0 auto 1.75rem;
  /* Jetzt ein <button> (öffnet die Lightbox, siehe .timeline-trigger) -
     Button-Grundstile zurücksetzen, damit es weiterhin wie eine reine
     Bildkachel aussieht statt wie ein Formularelement. */
  display: block;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.team-grid__photo::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: -14px;
  bottom: -14px;
  background: linear-gradient(135deg, var(--color-tint), var(--color-accent));
  opacity: 0.5;
  border-radius: var(--radius-m);
  z-index: 0;
}

.team-grid__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-press), box-shadow var(--transition-press);
}

.team-grid__photo:hover img {
  transform: scale(0.98);
  box-shadow: var(--shadow-press);
}

.team-grid__person h2 {
  text-align: center;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: min(103vh, 1030px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  /* Tiefe für die 3D-Neigung des Hintergrunds (JS, rotateX/rotateY auf
     .hero__bg) – ohne perspective bliebe die Rotation flach/unsichtbar. */
  perspective: 1200px;
}

/* Zwei Ebenen, damit sich der scroll-/maus-gesteuerte Parallax (JS,
   translate3d + rotateX/rotateY auf .hero__bg) und der dauerhafte
   Ken-Burns-Zoom (CSS-Animation auf .hero__bg-image) nicht gegenseitig
   überschreiben. Größerer Überstand (inset), da die 3D-Neigung an den
   Rändern sonst Lücken zeigen würde. */
.hero__bg {
  position: absolute;
  inset: -14% -12%;
  overflow: hidden;
  will-change: transform;
}

.hero__bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-image {
    animation: none;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, rgba(30, 58, 74, 0.82) 0%, rgba(30, 58, 74, 0.62) 45%, rgba(20, 40, 52, 0.85) 100%),
    linear-gradient(0deg, rgba(79, 154, 141, 0.28), transparent 55%);
}

/* Klarer Übergang statt Blur/Gradient: eine ruhige, flach geschwungene
   Wave-Shape schneidet den Hero sauber gegen die nächste Section ab. */
.hero__shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__shape svg {
  display: block;
  width: 100%;
  height: var(--wave-height);
}

.hero__shape path {
  /* Entspricht dem Seitenhintergrund, damit der Hero nahtlos in den
     cremig-weißen Bereich darunter übergeht. */
  fill: var(--color-bg);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 4vw, 5rem) 1.5rem;
  width: 100%;
}

.hero__text {
  max-width: 620px;
}

.hero__text h1 {
  color: #fff;
  opacity: 0;
  animation: heroHeadlineReveal 1100ms var(--ease-out-quart) 60ms forwards;
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  opacity: 0;
  animation: heroFadeUp 900ms var(--ease-out-quart) 380ms forwards;
}

.hero__text .button {
  opacity: 0;
  animation: heroFadeUp 900ms var(--ease-out-quart) 620ms forwards;
}

/* Überschrift blendet eigenständig ein: kommt leicht verzögert aus einem
   sanften Weichzeichner in die Schärfe, statt nur hochzurutschen – wirkt
   dadurch bewusst hochwertiger/ruhiger als ein reines Fade-up. */
@keyframes heroHeadlineReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__text h1,
  .hero__subtitle,
  .hero__text .button {
    animation: none;
    opacity: 1;
    filter: none;
  }
  .hero__bg,
  .hero__bg-image {
    transform: none !important;
  }
}

.timeline-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.timeline-image:hover {
  transform: scale(1.012);
  box-shadow: var(--shadow-accent-lift);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-image {
    transition: none;
  }
}

/* Klickbarer Wrapper um die beiden Ablauf-Grafiken - öffnet dieselbe
   Lightbox-Komponente wie die Räume-Galerie (siehe .gallery__item).
   Bewusst ohne eigenen Rahmen/Hintergrund, damit sich am Erscheinungsbild
   der Grafik selbst nichts ändert; nur Cursor und das kleine Lupe-Icon
   signalisieren die Klickbarkeit. */
.timeline-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
  border-radius: var(--radius-m);
}

.timeline-trigger__zoom {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 24, 26, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.timeline-trigger__zoom svg {
  width: 20px;
  height: 20px;
}

.timeline-trigger:hover .timeline-trigger__zoom,
.timeline-trigger:focus-visible .timeline-trigger__zoom,
.team-grid__photo:hover .timeline-trigger__zoom,
.team-grid__photo:focus-visible .timeline-trigger__zoom {
  opacity: 1;
  transform: scale(1);
}

@media (hover: none) {
  /* Auf Touch-Geräten gibt es keinen Hover-Zustand, der das Icon
     einblenden könnte - bleibt deshalb dauerhaft dezent sichtbar. */
  .timeline-trigger__zoom {
    opacity: 1;
    transform: scale(1);
  }
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.button:active {
  transform: scale(0.97);
}

.button--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-accent-lift), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-tint);
  border-color: var(--color-primary-dark);
}

.button--accent {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.button--accent:hover {
  background: var(--color-accent-dark);
  color: #fff;
  box-shadow: var(--shadow-accent-lift), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.button--on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.button--on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.button--danger {
  background: transparent;
  color: var(--color-error-text);
  border: 1px solid var(--color-error-text);
}

.button--danger:hover {
  background: var(--color-error-bg);
}

.button--small {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

/* =========================================================
   Formulare (öffentlich & Admin)
   ========================================================= */

form label {
  display: block;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
  font-size: 0.92rem;
  color: var(--color-primary-dark);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="date"],
form input[type="file"],
form select,
form textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 1px;
}

form textarea {
  resize: vertical;
}

.contact-form,
.section__form {
  max-width: 480px;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
}

.contact-form__hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.contact-form button,
.admin-form button {
  margin-top: 1.25rem;
}

.form-message {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-s);
  font-size: 0.95rem;
}

.form-message--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.form-message--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.anfrage-erfolg-banner {
  padding: 1.25rem 1.5rem 0;
}

.char-counter {
  margin: 0.35rem 0 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.contact-address {
  font-style: normal;
  color: var(--color-text-muted);
  margin: 1rem 0 1.5rem;
}

/* Je Zeile eine Psychotherapeutin + ihre eigene E-Mail-Adresse - bewusst
   als eigene Liste statt in der .contact-address, damit klar ist, dass
   Adresse/Telefon für die Praxis gemeinsam gelten, die E-Mail-Adresse
   aber jeweils zu einer bestimmten Person gehört. */
.contact-emails {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.contact-emails li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  font-size: 0.95rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.contact-emails li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

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

/* =========================================================
   Startseite: Willkommen, Vorteile-Karten, Vorschauen, CTA
   ========================================================= */

.welcome-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
}

/* Spiegelt die Spaltenreihenfolge (Bild links, Text rechts) für Abschnitte,
   die im Markup mit dem Bild zuerst aufgebaut sind – sorgt für Abwechslung
   zum Willkommen-Abschnitt, statt dass alle Bild/Text-Blöcke gleich wirken. */
.welcome-section--reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

@media (max-width: 780px) {
  .welcome-section {
    grid-template-columns: 1fr;
  }
  .welcome-section__image {
    order: -1;
  }
}

.welcome-section__image {
  position: relative;
}

.welcome-section__image::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  background: linear-gradient(135deg, var(--color-tint), var(--color-accent));
  opacity: 0.5;
  border-radius: var(--radius-m);
  z-index: 0;
}

.welcome-section__image img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-press), box-shadow var(--transition-press);
}

.welcome-section__image:hover img {
  transform: scale(0.98);
  box-shadow: var(--shadow-press);
}

/* Reiner Text-Abschnitt ohne Bild (z.B. "Was ist Psychotherapie?"): der
   erste Absatz übernimmt bewusst den .lead-Stil als ruhigen Einstieg,
   die folgenden Absätze bekommen etwas mehr Abstand zueinander, damit ein
   längerer Fließtext ohne Bild trotzdem klar gegliedert wirkt. */
.psychotherapie-info p {
  margin-bottom: 1.3rem;
}

.psychotherapie-info p.lead {
  margin-bottom: 1.6rem;
}

.psychotherapie-info p:last-of-type {
  margin-bottom: 0;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

/* Bewusst ohne Rahmen/Schatten: die Karten sollen als Inhalt in der Seite
   wirken statt als eigene, abgegrenzte Container. */
.feature-card {
  padding: 0.5rem 0.25rem;
  transition: transform var(--transition-fast);
}

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

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--color-tint);
  color: var(--color-primary);
  margin-bottom: 1rem;
  box-shadow: 0 8px 18px -10px rgba(30, 58, 74, 0.28);
  transition: background-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-medium);
}

.feature-card__icon svg {
  width: 26px;
  height: 26px;
}

.feature-card__icon--number {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
}

.feature-card:hover .feature-card__icon {
  background: var(--color-primary);
  color: #fff;
}

.feature-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Gruppen-Karten auf "Mein Angebot": eigene, dezente Blau-/Mint-Verläufe
   je Karte (zyklisch per nth-child, damit auch mehr als 3 Gruppen
   automatisch weiter durchwechseln) - dieselbe Farbfamilie wie die
   Raum-Platzhalter-Kacheln, nur heller/blasser, da hier lesbarer Text
   direkt auf der Fläche liegt. "Eindrück"-Hover statt des normalen
   .feature-card-Anhebens, da die Karten jetzt wie Bild-/Flächen-Karten
   wirken. */
.angebot-card {
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius-m);
  transition: transform var(--transition-press), box-shadow var(--transition-press);
}

.angebot-card:nth-child(3n+1) {
  background: linear-gradient(135deg, #eaf6f2, #d3ece1);
}

.angebot-card:nth-child(3n+2) {
  background: linear-gradient(135deg, #e8f0f7, #d2e2f0);
}

.angebot-card:nth-child(3n) {
  background: linear-gradient(135deg, #e6eef1, #cfe0e6);
}

.angebot-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-accent-lift);
}

/* Punkte-Reihe als visuellere Alternative zur nackten Zahl - gefüllt =
   frei, umrandet = belegt. Rein dekorativ (aria-hidden), der Text
   darunter bleibt die zugängliche/verbindliche Quelle. */
.angebot-card__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.8rem;
}

.angebot-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: 0.4;
}

.angebot-card__dot.is-free {
  background: var(--color-primary);
  opacity: 1;
}

.angebot-card__person {
  margin: 0.6rem 0 0 !important;
  font-size: 0.85rem !important;
  color: var(--color-text-muted);
}

.angebot-card__person strong {
  color: var(--color-text);
  font-weight: 600;
}

.angebot-card__plaetze {
  display: inline-block;
  margin: 0.5rem 0 0 !important;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.65);
  color: var(--color-primary-dark);
  font-size: 0.85rem !important;
  font-weight: 600;
}

.angebot-card__plaetze--voll {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-text-muted);
}

.angebot-card__action {
  margin-top: 1rem !important;
}

/* Icon neben den Abschnitts-Überschriften (Gruppen-/Einzel-/Kombinations-
   therapie) - gleicher Kreis-Icon-Stil wie die "Mein Angebot"-Karten auf
   der Startseite, nur inline neben statt über dem Titel. Dezente
   Dreh-/Skalier-Animation beim Hover für etwas Lebendigkeit. */
.angebot-icon-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.angebot-icon-heading h2 {
  margin: 0;
}

.angebot-icon-heading__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--color-tint);
  color: var(--color-primary);
  box-shadow: 0 8px 18px -10px rgba(30, 58, 74, 0.28);
  transition: transform var(--transition-medium), background-color var(--transition-medium), color var(--transition-medium);
}

.angebot-icon-heading__icon svg {
  width: 22px;
  height: 22px;
}

.angebot-icon-heading:hover .angebot-icon-heading__icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--color-primary);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .angebot-icon-heading:hover .angebot-icon-heading__icon {
    transform: none;
  }
}

/* "Indikation & Ablauf der Therapie" (Infos-Seite): normale, kompakte
   .feature-cards wie überall sonst auf der Seite (inkl. Hover-Effekt:
   Nummer-Icon füllt sich beim Drüberfahren). Schritt 2 und 3 zeigen ihre
   zwei sich gegenseitig ausschließenden Optionen zusätzlich als kleine
   "oder"-verbundene Badges, statt eigener ausführlicher Unterkarten. */
.feature-card__branch {
  margin: 0.6rem 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem !important;
}

.feature-card__option {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-tint);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.feature-card__oder {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* "Kontraindikation" (Infos-Seite): kurzer, klar
   sichtbarer Verweis direkt bei "Akute Suizidalität oder Fremdgefährdung"
   auf die wichtigsten Notfallnummern, inkl. Sprung-Link zum bestehenden
   Notfall-Block im Footer (#notfallkontakte) - bewusst im Warnton der
   Notfall-/Krisenhinweise (--color-notice-*), damit er sich klar vom
   übrigen, ruhigen Kartentext abhebt. */
.feature-card__crisis-note {
  margin: 0.75rem 0 0 !important;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-s);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  color: var(--color-notice-text) !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
}

.feature-card__crisis-note a {
  font-weight: 700;
  color: var(--color-notice-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feature-card__crisis-note a:hover,
.feature-card__crisis-note a:focus-visible {
  color: var(--color-primary-dark);
}

/* Diashow der Raumbilder: der Track enthält die Bilder doppelt hintereinander
   und läuft per CSS-Animation endlos von rechts nach links, sodass am
   Übergang von Kopie 1 zu Kopie 2 keine Lücke oder kein Ruckeln sichtbar
   ist. Läuft dauerhaft durch (wie eine Werbesäule) und pausiert nicht bei
   Hover, nur bei reduzierter Bewegung. Rein CSS-getrieben, keinerlei
   Kopplung an Scroll-Position/Sichtbarkeit/JS-State - die @keyframes laufen
   ab dem Laden der Seite unbegrenzt (infinite) weiter. */
.room-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 1.75rem;
}

/* Ausgeblichene Kanten links/rechts als zwei statische Gradient-Overlays
   statt mask-image: mask-image auf einem Element mit animiertem,
   compositing-eigenem Kind (will-change/transform) ist eine bekannte
   Quelle für periodisches Neu-Kompositieren/kurzes Weiß-Aufblitzen (v. a.
   Safari) - dieser Ansatz ist unabhängig von der Track-Animation und daher
   robuster. */
.room-marquee::before,
.room-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 6vw, 90px);
  z-index: 2;
  pointer-events: none;
}

.room-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg), transparent);
}

.room-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg), transparent);
}

.room-marquee__track {
  display: flex;
  width: max-content;
  gap: 0.75rem;
  animation: room-marquee-scroll 100s linear infinite;
  animation-play-state: running;
  will-change: transform;
  backface-visibility: hidden;
}

.room-marquee__item {
  flex: 0 0 clamp(220px, 26vw, 320px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  box-shadow: 0 14px 28px -16px rgba(30, 58, 74, 0.35);
}

.room-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes room-marquee-scroll {
  from { transform: translate3d(-25%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .room-marquee__track {
    animation: none;
  }
  .room-marquee {
    overflow-x: auto;
  }
}

.section__footer-link {
  margin: 2rem auto 0;
  text-align: center;
}

.news-preview {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.75rem;
}

/* Ruhige Card mit Datum-Badge: der Kurztext bleibt im Ruhezustand
   verborgen und klappt erst beim Hover/Fokus sanft auf (max-height +
   opacity statt hartem Ein-/Ausblenden), damit kurze wie lange Texte
   gleich sauber wirken. Auf Touch-Geräten (kein Hover) bleibt er über
   den Breakpoint unten dauerhaft sichtbar. */
.news-preview__item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}

/* Als Grid-Zelle (siehe .news-preview) bekommt die Karte sonst per
   Default eine automatische Mindestbreite nach ihrem Inhalt und kann so
   auf schmalen Screens breiter werden als ihre Spalte - Ursache für
   horizontales Scrollen der gesamten Seite. overflow-wrap zusätzlich,
   da lange, ungetrennte Wörter (z. B. "Psychotherapiepraxis") sonst
   trotzdem über die geschrumpfte Box hinaus liefen. */
@media (max-width: 480px) {
  .news-preview__item {
    min-width: 0;
  }

  .news-preview__item h3,
  .news-preview__item-excerpt p {
    overflow-wrap: break-word;
  }
}

.news-preview__item:hover,
.news-preview__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent-lift);
  border-color: var(--color-primary);
}

.news-preview__item-img {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-s);
  object-fit: cover;
  background: var(--color-tint);
}

.news-preview__item-img--photo {
  width: clamp(120px, 15vw, 150px);
  height: clamp(120px, 15vw, 150px);
  border-radius: var(--radius-m);
}

.news-preview__item-body {
  min-width: 0;
  padding-top: 0.1rem;
}

.news-preview__item-date {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

.news-preview__item h3 {
  font-size: 1.08rem;
  margin: 0;
}

.news-preview__item-excerpt {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease-out-quart), opacity 300ms var(--ease-out-quart), margin-top 300ms var(--ease-out-quart);
}

.news-preview__item-excerpt p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.news-preview__item:hover .news-preview__item-excerpt,
.news-preview__item:focus-visible .news-preview__item-excerpt {
  max-height: 220px;
  margin-top: 0.55rem;
  opacity: 1;
}

@media (max-width: 768px) {
  .news-preview__item-excerpt {
    max-height: none;
    margin-top: 0.55rem;
    opacity: 1;
    overflow: visible;
    transition: none;
  }
}

/* Ruhiger Soft-Glow/Aurora-Hintergrund statt Foto oder Wellen-Blob: eine
   feste dunkle Grundfläche (garantiert Lesbarkeit) plus mehrere stark
   verschwommene Farbflecken in Markenfarben, die sanft ineinander
   übergehen – keine erkennbaren Konturen oder Formen. */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  isolation: isolate;
  background: var(--color-primary-dark);
  /* Solange die Band (samt Blur-Aurora) außerhalb des Viewports ist,
     überspringt der Browser Layout/Paint dafür komplett - reduziert die
     Arbeit pro Scroll-Frame für alle Sections, die noch nicht sichtbar
     sind. contain-intrinsic-size verhindert einen Layout-Sprung, sobald es
     ins Bild scrollt. */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.cta-band__aurora {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  filter: blur(90px);
  background:
    radial-gradient(circle at 22% 28%, rgba(111, 184, 172, 0.55), transparent 58%),
    radial-gradient(circle at 78% 22%, rgba(79, 154, 141, 0.45), transparent 55%),
    radial-gradient(circle at 65% 78%, rgba(30, 58, 74, 0.65), transparent 60%),
    radial-gradient(circle at 15% 82%, rgba(111, 184, 172, 0.35), transparent 55%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
  /* Nur transform wird animiert, filter bleibt konstant - der Browser muss
     den Weichzeichner so nur einmal berechnen und danach die fertige
     Bitmap per GPU verschieben, statt bei jedem Frame neu zu rastern. */
  will-change: transform;
}

@keyframes auroraDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -3%) scale(1.06); }
  100% { transform: translate(-3%, 2%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band__aurora {
    animation: none;
  }
}

/* Weiche Wave-Übergänge oben/unten statt harter Kanten – dieselbe Technik
   wie beim Hero-Übergang, nur gespiegelt für die Ober-/Unterkante. Beide
   Füllfarben entsprechen dem cremig-weißen Seitenhintergrund, damit kein
   Farbsprung entsteht. */
.cta-band__edge {
  position: absolute;
  left: 0;
  right: 0;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}

.cta-band__edge svg {
  display: block;
  width: 100%;
  height: var(--wave-height);
}

.cta-band__edge--top {
  top: -1px;
  transform: scaleY(-1);
}

.cta-band__edge--top path {
  fill: var(--color-bg);
}

.cta-band__edge--bottom {
  bottom: -1px;
}

.cta-band__edge--bottom path {
  fill: var(--color-bg);
}

.cta-band__content {
  position: relative;
  z-index: 1;
  padding: var(--section-spacing) 1.5rem;
}

.cta-band__content h2 {
  color: #fff;
}

.cta-band__content h2::after {
  background: linear-gradient(90deg, var(--color-accent), #fff);
}

.cta-band__content p {
  color: rgba(255, 255, 255, 0.9);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Hinweis-Boxen: Sprechzeiten, Notfall-Kontakte
   ========================================================= */

.notice-box {
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
}

.notice-box h2 {
  font-size: 1rem;
  margin-bottom: 0.7rem;
}

.notice-box__hint {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.notice-box--urgent {
  border-left-color: var(--color-notice-border);
  background: var(--color-notice-bg);
}

.notice-box--urgent h2 {
  color: var(--color-notice-text);
}

.notice-box--urgent p {
  color: var(--color-notice-text);
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.hours-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

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

.hours-list__time {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.crisis-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.crisis-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-notice-border);
}

.crisis-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.crisis-list__label {
  color: var(--color-notice-text);
}

.crisis-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--color-notice-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  margin: -0.2rem -0.55rem;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.crisis-list a::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.crisis-list a:hover,
.crisis-list a:focus-visible {
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   Google Maps Consent-Klick
   ========================================================= */

.map-consent {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-m);
}

.map-consent p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.map-consent__frame {
  margin-top: 1rem;
  border-radius: var(--radius-s);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.map-consent__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 350ms var(--ease-out-quart);
}

/* Das eingebettete Google-iframe selbst lässt sich farblich/inhaltlich
   nicht anpassen - daher wird nur der Rahmen darum gestaltet: Innenabstand
   + eigener Radius auf Frame/Platzhalter sorgen dafür, dass die eckige
   Karte innen sauber "gerahmt" wirkt statt bis an den Rand zu stoßen. Das
   iframe blendet erst beim tatsächlichen `load`-Event ein (main.js), damit
   der Wechsel Platzhalter -> Karte nicht abrupt wirkt. */
.map-consent__frame iframe.is-loaded {
  opacity: 1;
}

/* Große, prominente Variante für die Startseite */
.map-consent--large {
  margin-top: 2rem;
  padding: 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-tint-border);
  box-shadow: var(--shadow-accent);
  overflow: hidden;
}

.map-consent--large .map-consent__frame {
  margin-top: 0;
  border-radius: var(--radius-s);
  aspect-ratio: 21 / 9;
}

.map-consent--large .map-consent__prompt {
  padding: clamp(2.5rem, 2rem + 4vw, 4.5rem) 1.5rem;
  text-align: center;
  aspect-ratio: 21 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border-radius: var(--radius-s);
  background:
    linear-gradient(var(--color-tint), var(--color-tint)),
    repeating-linear-gradient(135deg, var(--color-tint-border) 0, var(--color-tint-border) 1px, transparent 1px, transparent 14px);
}

.map-consent__external {
  margin-top: 0.9rem;
  text-align: center;
}

.map-consent__external a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.map-consent__external a:hover {
  color: var(--color-primary-dark);
}

.map-consent--large .map-consent__prompt p {
  max-width: 46ch;
  font-size: 0.95rem;
}

.map-consent--large .map-consent__prompt[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .map-consent--large .map-consent__frame,
  .map-consent--large .map-consent__prompt {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================
   Galerie & Lightbox
   ========================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.gallery__item {
  padding: 0;
  border: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-press), box-shadow var(--transition-press), border-color var(--transition-press);
}

/* "Eindrück"-Effekt statt Anheben: die Karte wirkt beim Hover angedrückt. */
.gallery__item:hover {
  transform: scale(0.98);
  box-shadow: var(--shadow-press);
  border-color: var(--color-accent);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(20, 24, 26, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__image {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  border-radius: var(--radius-s);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.06); }

/* =========================================================
   Listen: Links, News, Impressum, Datenschutz
   ========================================================= */

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

.link-list__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.link-list__item a {
  font-weight: 600;
  text-decoration: none;
}

.link-list__item a:hover {
  color: var(--color-accent-dark);
}

.link-list__external {
  font-size: 0.85em;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}

/* Gleiches Card-Design wie die Aktuelles-Vorschau auf der Startseite
   (Datum-Badge, weicher Schatten, Hover-Lift in Website-Blau). Der Text
   ist hier aber die eigentliche Seite (kein „Weiterlesen“-Link dahinter),
   deshalb bleibt er ohne Hover-Ausklapp-Effekt dauerhaft sichtbar. */
.news-list__item {
  display: flex;
  align-items: flex-start;
  gap: 1.3rem;
  padding: 1.3rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}

/* Gleicher Fix wie bei .news-preview__item: als Grid-Zelle sonst mit
   automatischer Mindestbreite nach Inhalt, was auf schmalen Screens zu
   horizontalem Scrollen der gesamten Seite führte (v. a. bei langen,
   ungetrennten Wörtern im Titel wie "Praxiseröffnung"). */
@media (max-width: 480px) {
  .news-list__item {
    min-width: 0;
  }

  .news-list__item h2,
  .news-list__item p {
    overflow-wrap: break-word;
  }
}

.news-list__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent-lift);
  border-color: var(--color-primary);
}

.news-list__item-img {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-s);
  object-fit: cover;
  background: var(--color-tint);
}

.news-list__item-img--photo {
  width: clamp(120px, 15vw, 150px);
  height: clamp(120px, 15vw, 150px);
  border-radius: var(--radius-m);
}

.news-list__item-body {
  min-width: 0;
  padding-top: 0.1rem;
}

.news-list__item-date {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

.legal-text p {
  max-width: 75ch;
  color: var(--color-text);
}

/* Lange, ungetrennte Links (z. B. zur Google-Datenschutzerklärung) in
   den Rechtstexten liefen auf schmalen Screens über den Textblock
   hinaus und verursachten horizontales Scrollen der gesamten Seite. */
@media (max-width: 480px) {
  .legal-text p {
    overflow-wrap: break-word;
  }
}

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

.site-footer {
  position: relative;
  background: var(--color-primary-dark);
  color: #eef3f2;
  margin-top: 3rem;
}

.site-footer::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary) 50%, var(--color-accent));
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer a {
  color: #d7ece7;
  transition: color var(--transition-fast);
}

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

.site-footer__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  color: var(--color-accent);
}

.site-footer__links {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Auf sehr schmalen Screens passten die drei Links (Impressum,
   Datenschutz, Praxisordnung) samt Abstand nicht mehr in eine Zeile und
   sorgten für horizontales Scrollen der gesamten Seite (betraf jede
   Seite, da der Footer überall eingebunden ist). */
@media (max-width: 480px) {
  .site-footer__links {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}

/* Notfallkontakt-Hinweis aus dem Kontaktbereich, zusätzlich im Footer
   wiederholt (steht so auf jeder Seite, nicht nur auf /kontakt) - eigene,
   auf den dunklen Footer-Hintergrund abgestimmte Farben statt der hellen
   .notice-box--urgent/.crisis-list-Styles. */
.site-footer__emergency {
  max-width: 320px;
}

.site-footer__emergency h2 {
  font-size: 0.95rem;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}

.site-footer__emergency p {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: #d7ece7;
}

.site-footer__emergency-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.85rem;
}

.site-footer__emergency-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
}

.site-footer__emergency-list a {
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   Admin-Bereich
   ========================================================= */

/* Persistente Sidebar statt der früheren, auf jeder Seite neu
   angezeigten Kopfzeilen-Navigation: fix positioniert, damit sie beim
   Scrollen der (teils langen) Formulare sichtbar bleibt und man nie mehr
   zur Admin-Startseite zurück muss, nur um den Bereich zu wechseln.
   .admin-main bekommt dafür unten einen passenden linken Rand - auf der
   Login-Seite (kein .admin-sidebar vorhanden, eigene .admin-login-Klasse)
   bleibt das wirkungslos. */
.admin-body {
  background: var(--color-bg-alt);
}

.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 1.4rem 1.1rem;
  overflow-y: auto;
  z-index: 10;
}

.admin-sidebar__brand {
  display: block;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.4rem 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 1rem;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.admin-nav__group {
  margin-top: 1.1rem;
}

.admin-nav__group-title {
  margin: 0 0 0.35rem;
  padding: 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.admin-nav__link {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-s);
  color: #cfe3df;
  text-decoration: none;
  font-size: 0.92rem;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.admin-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-nav__link.is-active {
  background: var(--color-accent-dark);
  color: #fff;
  font-weight: 600;
}

.admin-nav__link--top {
  margin-bottom: 0.3rem;
}

.admin-sidebar__logout {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-sidebar__logout .button {
  width: 100%;
}

.admin-main {
  max-width: 900px;
  margin: 0;
  padding: 2.5rem 2rem 4rem calc(240px + 2rem);
}

/* 900px passt für Formular-lastige Seiten (Texte, Gruppen, ...), engt
   aber breite Tabellen mit einer Nachrichten-Spalte unnötig ein - selbst
   bei korrekten Spaltenprozenten bleiben dann nur ca. 200px für den
   Nachrichtentext übrig. Seiten mit solchen Tabellen (Kontakt- und
   Interesse-Anfragen) bekommen deshalb mehr Breite. */
.admin-main--breit {
  max-width: 1400px;
}

@media (max-width: 900px) {
  .admin-sidebar {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .admin-sidebar__brand {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0.4rem 0.6rem;
  }

  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
  }

  .admin-nav__group {
    margin-top: 0;
  }

  .admin-nav__group-title {
    display: none;
  }

  .admin-sidebar__logout {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.9rem;
  }

  .admin-main {
    padding: 2rem 1.5rem 4rem;
  }
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.admin-card-group {
  margin-top: 2rem;
}

.admin-card-group__title {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  margin: 0 0 0.9rem;
}

.admin-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 1.3rem;
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.admin-card h2 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
}

.admin-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Dashboard: Kennzahlen-Kacheln + Warnhinweise (Punkt 3 "echtes Dashboard
   statt reiner Link-Liste") - eigenständiger Block oberhalb der
   gruppierten .admin-cards, damit das Wichtigste auf einen Blick sichtbar
   ist, bevor man in einen der Bereiche wechselt. */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-stat {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.admin-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.admin-stat--warning {
  border-left-color: var(--color-notice-border);
  background: var(--color-notice-bg);
}

.admin-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.admin-stat--warning .admin-stat__value {
  color: var(--color-notice-text);
}

.admin-stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.admin-stat--warning .admin-stat__label {
  color: var(--color-notice-text);
}

.admin-warning-list {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-m);
}

.admin-warning-list h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  color: var(--color-notice-text);
}

.admin-warning-list ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-notice-text);
}

.admin-warning-list li {
  margin-bottom: 0.3rem;
}

.admin-warning-list li:last-child {
  margin-bottom: 0;
}

/* "Texte bearbeiten": Tabs pro Seite (Punkt 4) statt eines einzigen
   langen Formulars. Ohne JavaScript zeigt das serverseitig gerenderte
   .is-active bereits den richtigen Tab (siehe aktiverAbschnitt in
   routes/admin.js) - admin.js schaltet dort nur noch client-seitig
   zwischen den Panels um, ohne Seiten-Reload. */
.admin-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
}

.admin-tabs__tab {
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.admin-tabs__tab:hover {
  color: var(--color-text);
  background: var(--color-tint);
}

.admin-tabs__tab.is-active {
  background: var(--color-primary);
  color: #fff;
}

.admin-tabs__panel {
  display: none;
}

.admin-tabs__panel.is-active {
  display: block;
}

.admin-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.admin-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.2rem;
}

.admin-form fieldset:last-of-type {
  border-bottom: none;
}

.admin-form legend {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  padding: 0;
  font-size: 1.05rem;
}

.admin-hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}

.admin-table__actions {
  display: flex;
  gap: 0.5rem;
}

.admin-table__actions form {
  margin: 0;
}

.admin-table__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-s);
  object-fit: cover;
  background: var(--color-tint);
}

.admin-form__preview {
  display: block;
  margin: 0.3rem 0 0.8rem;
  width: 96px;
  height: 96px;
}

.admin-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.admin-gallery__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  padding-bottom: 0.6rem;
}

.admin-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.admin-gallery__item form {
  margin: 0.5rem 0.6rem 0;
}

.admin-table--messages td {
  vertical-align: top;
}

.admin-table--messages {
  table-layout: fixed;
  margin-bottom: 2.5rem;
}

/* Zwei Varianten statt einer einzigen positionsbasierten Breitenliste:
   Kontaktanfragen und die "Nach Person"-Ansicht der Interesse-Anfragen
   haben eine zusätzliche Spalte (Kategorie/Angebot) gegenüber der "Nach
   Gruppe"-Ansicht - eine gemeinsame nth-child-Regel würde (wie zuvor
   tatsächlich passiert) bei unterschiedlicher Spaltenzahl lautlos die
   falschen Spalten treffen und z. B. die Nachrichten-Spalte auf wenige
   Prozent zusammenquetschen. Deshalb je Tabelle die passende Modifier-
   Klasse setzen (siehe die admin-table--messages-5/-6-Verwendung in den
   jeweiligen Views). */
.admin-table--messages-5 th:nth-child(1),
.admin-table--messages-5 td:nth-child(1) { width: 13%; }
.admin-table--messages-5 th:nth-child(2),
.admin-table--messages-5 td:nth-child(2) { width: 17%; }
.admin-table--messages-5 th:nth-child(3),
.admin-table--messages-5 td:nth-child(3) { width: 42%; }
.admin-table--messages-5 th:nth-child(4),
.admin-table--messages-5 td:nth-child(4) { width: 15%; }
.admin-table--messages-5 th:nth-child(5),
.admin-table--messages-5 td:nth-child(5) { width: 13%; }

.admin-table--messages-6 th:nth-child(1),
.admin-table--messages-6 td:nth-child(1) { width: 11%; }
.admin-table--messages-6 th:nth-child(2),
.admin-table--messages-6 td:nth-child(2) { width: 15%; }
.admin-table--messages-6 th:nth-child(3),
.admin-table--messages-6 td:nth-child(3) { width: 13%; }
.admin-table--messages-6 th:nth-child(4),
.admin-table--messages-6 td:nth-child(4) { width: 34%; }
.admin-table--messages-6 th:nth-child(5),
.admin-table--messages-6 td:nth-child(5) { width: 14%; }
.admin-table--messages-6 th:nth-child(6),
.admin-table--messages-6 td:nth-child(6) { width: 13%; }

.admin-table__nachricht {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  color: var(--color-text);
}

/* Ausklapp-Funktion für lange Nachrichtentexte: ohne JS immer voll
   sichtbar (siehe public/js/admin.js) - die .is-clamped-Klasse wird nur
   per JS gesetzt, und auch dann nur, wenn der Text tatsächlich abgeschnitten
   würde, damit kurze Nachrichten keinen unnötigen "Mehr anzeigen"-Link
   bekommen. */
.nachricht-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nachricht-toggle {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.nachricht-toggle:hover {
  color: var(--color-primary-dark);
}

.admin-table--messages form {
  margin: 0;
}

/* Schnelles Anpassen der freien Plätze direkt in der Gruppen-Tabelle,
   ohne auf die separate Bearbeiten-Seite wechseln zu müssen. */
.admin-inline-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.admin-inline-form__input {
  width: 4.5rem;
}

/* "Platz vergeben"- und Löschen-Button übereinander in der Aktionen-Zelle
   (siehe admin/interesse-anfragen.ejs) - bewusst in einer eigenen Spalte
   getrennt vom Status-Select, da beides unabhängig voneinander änderbar
   bleiben soll und es sich sonst mit dem Select "beißt". Abstand über den
   Nachbar-Selektor, damit er unabhängig von der Reihenfolge der beiden
   Formulare greift; die stacked-Klasse ist hier bewusst nicht mehr an ein
   bestimmtes der beiden Formulare gebunden. */
.admin-inline-form + .admin-inline-form {
  margin-top: 0.4rem;
}

/* "Platz vergeben" bleibt kleiner als .button--small, damit es neben
   Löschen nicht gequetscht wirkt - unabhängig davon, in welcher
   Reihenfolge die beiden Buttons stehen. */
.admin-inline-form--kompakt .button {
  padding: 0.25rem 0.6rem !important;
  font-size: 0.72rem !important;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.admin-status-form select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
}

.admin-table__row--status-in-bearbeitung {
  background: var(--color-notice-bg);
}

.admin-table__row--status-erledigt {
  background: var(--color-success-bg);
}

.admin-table__row--status-erledigt td {
  color: var(--color-text-muted);
}

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.admin-login__box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 2.2rem;
  width: 100%;
  max-width: 360px;
}

.admin-login__back {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  text-align: center;
}

/* =========================================================
   Datenschutz-/Cookie-Consent-Banner
   ========================================================= */

/* Ohne JavaScript (bzw. bevor main.js den sessionStorage-Status geprüft
   hat) bleibt das Banner unsichtbar unterhalb des Viewports – kein
   Layout-Sprung, kein Flackern beim Laden. main.js blendet es per
   .is-visible aktiv ein, sobald feststeht, dass es in dieser Sitzung noch
   nicht bestätigt wurde. */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie-consent);
  background: var(--color-surface);
  border-top: 1px solid var(--color-tint-border);
  box-shadow: var(--shadow-accent-lift);
  padding: 1.5rem 1.75rem;
  transform: translateY(100%);
  transition: transform var(--transition-medium);
}

.cookie-consent.is-visible {
  transform: translateY(0);
}

.cookie-consent__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.cookie-consent__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-consent__text {
  margin: 0;
  max-width: 68ch;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.cookie-consent__toggle {
  display: inline;
  margin-left: 0.4em;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.87em;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-consent__toggle:hover,
.cookie-consent__toggle:focus-visible {
  color: var(--color-primary);
}

.cookie-consent__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ausklappbarer Detailbereich: klare Trennung vom Haupttext per Border,
   die erst beim Aufklappen sichtbar wird, plus sanfte Slide-down-
   Animation über max-height (wie bereits beim News-Vorschau-Exzerpt). */
.cookie-consent__details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  border-top: 1px solid var(--color-tint-border);
  transition: max-height var(--transition-medium), opacity var(--transition-medium), padding-top var(--transition-medium);
}

.cookie-consent__details.is-expanded {
  max-height: 420px;
  opacity: 1;
  padding-top: 1rem;
  margin-top: 1rem;
}

.cookie-consent__list {
  margin: 0 0 0.85rem;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.cookie-consent__list strong {
  color: var(--color-text);
}

.cookie-consent__link {
  margin: 0;
  font-size: 0.87rem;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .cookie-consent__main {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .cookie-consent__actions {
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* =========================================================
   FAQ-Bot (fester Frage-Antwort-Katalog, kein KI-Modell)
   ========================================================= */

.faq-bot {
  position: fixed;
  right: 1.25rem;
  bottom: var(--faq-bottom-offset, 1.25rem);
  z-index: var(--z-faq);
  transition: bottom var(--transition-medium);
}

/* Weicht dem Cookie-Banner aus, solange dieses sichtbar ist, damit sich
   beide fixen Elemente unten am Bildschirmrand nicht überlappen. Über
   eine gemeinsame Variable statt eines festen bottom-Werts nur auf
   .faq-bot, damit .faq-bot__window (eigenes fixed-Element, siehe unten)
   automatisch im selben Abstand mit angehoben wird - sonst blieb das
   aufklappende Fenster bei sichtbarem Cookie-Banner auf Mobile hinter
   dessen oberem Rand hängen (Eingabefeld unbedienbar). */
body.has-cookie-banner {
  --faq-bottom-offset: 6.5rem;
}

@media (max-width: 640px) {
  body.has-cookie-banner {
    --faq-bottom-offset: 11.5rem;
  }
}

.faq-bot__toggle {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent-lift);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-bot__toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.faq-bot__toggle-icon {
  width: 27px;
  height: 27px;
  position: absolute;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.faq-bot__toggle-icon--close {
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
}

.faq-bot.is-open .faq-bot__toggle-icon--open {
  opacity: 0;
  transform: scale(0.6) rotate(45deg);
}

.faq-bot.is-open .faq-bot__toggle-icon--close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.faq-bot__window {
  position: fixed;
  right: 1.25rem;
  /* Bleibt immer 5rem über dem Toggle-Button (dessen ursprünglicher
     Abstand: 6.25rem - 1.25rem = 5rem) - dadurch wandert das Fenster
     automatisch mit hoch, wenn --faq-bottom-offset wegen des
     Cookie-Banners angehoben wird, statt einen eigenen, unabhängigen
     Wert zu pflegen, der dabei außer Sync geraten kann. */
  bottom: calc(var(--faq-bottom-offset, 1.25rem) + 5rem);
  width: min(360px, calc(100vw - 2.5rem));
  /* dvh statt vh: auf iOS/Android bleibt vh auf die Höhe OHNE
     eingeblendete Tastatur/Adressleiste fixiert, wodurch das Fenster bei
     geöffneter Tastatur zu hoch berechnet würde und das Eingabefeld
     unten aus dem sichtbaren Bereich rutschen könnte. dvh folgt der
     tatsächlich sichtbaren Höhe; Browser ohne dvh-Unterstützung nutzen
     weiterhin den vh-Wert der ersten Zeile. */
  max-height: min(520px, calc(100vh - 7.5rem));
  max-height: min(520px, calc(100dvh - 7.5rem));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-accent-lift);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.faq-bot__window.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.faq-bot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.6rem 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.faq-bot__title {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 0.98rem;
}

.faq-bot__header-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-s);
}

.faq-bot__header-close:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.faq-bot__disclaimer {
  margin: 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.faq-bot__disclaimer a {
  color: var(--color-accent-dark);
}

.faq-bot__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-bot__bubble {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-m);
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.faq-bot__bubble--bot {
  align-self: flex-start;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  border-bottom-left-radius: 4px;
}

.faq-bot__bubble--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.faq-bot__bubble-text {
  margin: 0 0 0.5rem;
}

.faq-bot__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.faq-bot__option-button {
  border: 1px solid var(--color-accent-dark);
  background: var(--color-bg);
  color: var(--color-accent-dark);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.faq-bot__option-button:hover:not(:disabled) {
  background: var(--color-accent-dark);
  color: #fff;
}

.faq-bot__option-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.faq-bot__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.faq-bot__form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-bg);
  color: var(--color-text);
}

.faq-bot__form input:focus {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 1px;
}

.faq-bot__send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.faq-bot__send:hover {
  background: var(--color-primary);
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .faq-bot {
    right: 1rem;
    /* Wie oben bei der Basisregel: über die gemeinsame Variable statt
       eines festen Werts, sonst überlappt der Button bei sichtbarem
       Cookie-Banner auf genau dieser (sehr verbreiteten) Bildschirmgröße
       trotz der Variable weiter mit dem Banner, weil diese spezifischere
       Regel den festen Wert sonst wieder überschreibt. */
    bottom: var(--faq-bottom-offset, 1rem);
  }

  .faq-bot__window {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    /* Gleiches Prinzip wie oben: bleibt 4.5rem über dem Toggle-Button
       (5.5rem - 1rem = 4.5rem), wandert also automatisch mit hoch. */
    bottom: calc(var(--faq-bottom-offset, 1rem) + 4.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-bot__toggle,
  .faq-bot__toggle-icon,
  .faq-bot__window,
  .faq-bot__send {
    transition: none;
  }
}