/* vereinigo Landingpage (vereinigo.at)
   Farb-/Formsprache 1:1 aus der Produkt-App übernommen (frontend/src/style.css),
   damit die Marketingseite und die App wie aus einem Guss wirken. */

:root {
  --color-primary: #0256e4;
  --color-primary-dark: #0b2145;
  --color-primary-light: #eaf2fe;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fc;
  /* Ganz leichter Blauton fuer die Modul-Kacheln (.feature-card) - bewusst
     kein bestehender Token (--color-primary-light ist fuers Icon-Badge klar
     erkennbar blau, hier soll es fast weiss wirken, nur mit einem Hauch
     Blau). */
  --color-surface-tint-blue: #f5f9ff;
  --color-border: #e3e8f0;
  --color-text: #1a1a1a;
  --color-text-muted: #7a8699;
  --color-success: #2e7d4f;
  --color-success-bg: #e8f5ec;
  --color-chart-warm: #f97316;
  --color-chart-warm-bg: #fef0e2;
  --color-chart-purple: #7c3aed;
  --color-chart-purple-bg: #f1e9fd;
  --color-chart-teal: #0d9488;
  --color-chart-teal-bg: #e1f5f2;
  --color-warning: #b45309;
  --color-warning-bg: #fff4e6;
  --color-danger: #c0392b;
  --color-danger-bg: #fbe9e7;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-xl: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 32, 0.03), 0 3px 8px rgba(16, 24, 32, 0.035);
  --shadow-hover: 0 2px 4px rgba(16, 24, 32, 0.04), 0 8px 16px rgba(16, 24, 32, 0.06);
  --focus-ring: 0 0 0 3px rgba(2, 86, 228, 0.16);
  --max-width: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

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

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

h1, h2, h3, h4 {
  margin: 0 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
  /* Lange deutsche Komposita ("Datenschutzerklaerung",
     "Nutzungsbedingungen") passten auf schmalen Handys nicht in eine Zeile
     und schoben die ganze Seite waagrecht auf. break-word trennt nur, wenn
     das Wort sonst tatsaechlich ueberlaufen wuerde. */
  overflow-wrap: break-word;
}

p {
  margin: 0 0 1rem;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}

/* Logo-Bild statt Live-Wortmarke im Header (auf Tom's Wunsch wieder auf das
   Bild-Logo umgestellt, dasselbe wie auf der Backend-Login-Seite). Die
   Fusszeile (.footer-brand) verwendete bis dahin noch eine eigene
   CSS-Wortmarke (.wordmark/-prefix/-suffix) als Naeherung an das echte
   Logo - dadurch wich sie optisch vom echten Logo ab. Jetzt per
   .footer-logo ebenfalls dasselbe Bild-Logo wie im Header. */
.brand-logo {
  display: block;
  height: 68px;
  width: auto;
}

/* Logo und Menue-Button sind Flex-Kinder der Kopfzeile und wuerden sonst
   zusammengequetscht, sobald die Zeile eng wird (auf dem Handy war das
   Logo dadurch nur noch ~54px statt 140px breit, siehe .nav-cta-short
   unten fuer die zweite Haelfte der Loesung). */
.brand,
.brand-logo,
.nav-toggle-btn {
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Eigener, engerer Abstand zwischen den beiden Buttons als der grosse
   .main-nav-gap zu den Nav-Links davor - die zwei Buttons gehoeren als
   Paar zusammen, sollen aber optisch naeher beieinander stehen. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Nie umbrechen: bei knapper Breite wurde aus "14 Tage kostenlos testen"
   sonst ein zweizeiliger und damit fast doppelt so hoher Button neben dem
   einzeiligen "Login" - die beiden sollen immer gleich hoch sein. */
.nav-actions .btn {
  white-space: nowrap;
}

/* Der Test-Button traegt zwei Beschriftungen: die volle am Desktop, eine
   kuerzere am Handy (siehe @media max-width: 720px). Ohne das passte die
   Kopfzeile bei 375px schlicht nicht: Logo 140px + Menue-Button 40px +
   beide Buttons 251px = 431px bei nur 327px verfuegbarer Breite. */
.nav-cta-short {
  display: none;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

/* .main-nav a hat mit Element+Klasse (statt nur Klasse) hoehere Spezifitaet
   als .btn-primary allein und ueberschrieb dessen weisse Schrift bisher mit
   dunklem Fliesstext - auf dem blauen Button-Hintergrund kaum lesbar.
   .main-nav a:hover ueberschrieb beim Hover zusaetzlich mit der (auf dem
   dann noch dunkleren Hover-Blau von .btn-primary:hover) ebenfalls kaum
   lesbaren Primaerfarbe - eigene, spezifischere :hover-Regel dagegen. */
.main-nav .btn-primary {
  color: #fff;
}

.main-nav a.btn-primary:hover {
  color: #fff;
}

/* Megamenü unter "Module": .nav-item-mega ist das positionierungs-
   Bezugselement, .mega-menu haengt per :hover/:focus-within daran - reine
   CSS-Loesung ohne JS, analog zum bestehenden Checkbox-Trick fuer die
   Handy-Navigation (dort wird .mega-menu unten per @media zu einer immer
   sichtbaren, flachen Unterliste statt eines Hover-Panels). */
.nav-item-mega {
  position: relative;
}

.nav-caret {
  margin-left: 0.15rem;
  vertical-align: -1px;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 300px;
  max-width: 90vw;
  margin-top: 0.5rem;
  padding: 0.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

/* Kleine unsichtbare Bruecke zwischen Link und Panel, damit die Maus beim
   diagonalen Weg vom Link zum Panel nicht durch den Luftspalt aus dem
   :hover-Bereich faellt und das Menu vorzeitig schliesst. */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Eigenes Feld rechts neben dem Module-Panel (Notizen): gleiche Hoehe und
   Kartenoptik, 8px Abstand. Oeffnet sich mit dem Module-Menue. */
.mega-menu-side {
  left: calc(50% + 158px);
  transform: translateY(6px);
}

.nav-item-mega:hover .mega-menu-side,
.nav-item-mega:focus-within .mega-menu-side {
  transform: translateY(0);
}

.mega-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}

.mega-menu-item:hover,
.mega-menu-item:focus-visible,
.mega-menu-item.active {
  background: var(--color-primary-light);
}

.mega-menu-item.active .mega-menu-title {
  color: var(--color-primary);
}

.mega-menu-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mega-menu-title {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--color-text);
}

.mega-menu-desc {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.nav-toggle-input {
  display: none;
}

.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  order: 2;
}

.nav-toggle-btn span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-primary-dark);
  border-radius: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(2, 86, 228, 0.25);
}

.btn-primary:hover {
  background: #0146bd;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 86, 228, 0.3);
}

.btn-secondary {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.btn-on-dark {
  background: #fff;
  color: var(--color-primary-dark);
}

.btn-on-dark:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 0.9rem 2rem;
  font-size: 1.02rem;
}

.btn-block {
  width: 100%;
}

/* ---------- Hero ---------- */

/* Kein radialer Verlauf mehr im Hintergrund (frueher ein dezentes Blau oben
   rechts, genau dort wo das Sujet sitzt) - das Sujet-Bild hat selbst einen
   deckenden weissen Hintergrund und bildete dagegen eine sichtbare
   rechteckige Kante. Reiner weisser Hintergrund verhindert das. */
.hero {
  padding: 4.5rem 0 5rem;
  background: var(--color-bg);
}

.hero .wrap {
  display: grid;
  /* Sujet-Spalte etwas breiter als Textspalte (vorher 0.95fr/1.15fr) - das
     Sujet soll im Hero staerker wirken. Nicht weiter als 0.92fr/1.18fr, sonst
     hat die Textspalte nicht mehr genug Platz fuer die beiden Buttons
     nebeneinander (siehe .hero-actions) und "Module erkunden" faellt in eine
     zweite Zeile. */
  grid-template-columns: 0.92fr 1.18fr;
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-size: 2.9rem;
  line-height: 1.12;
  margin-bottom: 1.1rem;
}

.hero h1 .accent {
  color: var(--color-primary);
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: 1.8rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

/* Etwas schmaleres Innenpolster als das globale .btn-lg (2rem seitlich) -
   nur hier, wo die Textspalte durch das groessere Sujet knapper ist, damit
   "Module erkunden" neben "14 Tage kostenlos testen" passt statt umzubrechen. */
.hero-actions .btn {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

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

.hero-badges {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.hero-badge svg {
  flex-shrink: 0;
  color: var(--color-success);
}

.hero-sujet {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* Kein box-shadow wie bei .mockup - das ist ein echter Screenshot ohne
   umrahmende Karte (gleiche Behandlung wie .hero-sujet), ein Schlagschatten
   ohne Rahmen wirkt hier nur wie eine unbeabsichtigte Kante zum weissen
   Seitenhintergrund.
   max-width bewusst grosszuegig: die Quelldatei loest mit 1414x2000px weit
   hoeher auf als die Spalte breit ist (528px bei voller .wrap-Breite), die
   frueheren 320px liessen davon nur einen Bruchteil sichtbar - wirkte
   dadurch kleiner/unschaerfer als noetig statt die vorhandene Detailschaerfe
   zu nutzen. */
.app-shot {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-xl);
}

/* Transparentes MacBook-Mockup-Bild (Vorstand/Admins-Sektion) - kein
   border-radius/box-shadow wie bei .app-shot, da hier keine rechteckige
   Bildflaeche sitzt, sondern ein bereits freigestelltes Geraet auf
   transparentem Grund. Kein max-width-Deckel wie bei .app-shot, sondern
   analog zu .hero-sujet volle Spaltenbreite - die Quelldatei loest mit
   2000x1414px dafuer komfortabel auf. transform:scale statt groesserer
   width, weil width:100% bereits die volle Spalte ausfuellt - der Bleed
   in den Grid-Gap (3.5rem) hinein bleibt so kollisionsfrei mit der
   Textspalte. */
.laptop-shot {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.08);
}

/* Breite Illustration als .split-media-Inhalt fuer Modul-Detailabschnitte
   mit eigenem Bild-Asset (z.B. module.html: Veranstaltungen/Aufgaben) -
   analog zu .hero-sujet volle Spaltenbreite statt der schmalen max-width
   von .app-shot, weil die Quelldateien im Querformat vorliegen. */
.module-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* ---------- Logo-/Vertrauensleiste ---------- */

.trust-bar {
  padding: 1.6rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.trust-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--color-primary-dark);
}

.trust-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ---------- Regional-Banner ---------- */

/* Bewusst nicht in .wrap - das Bild traegt Text und Bergpanorama schon
   fertig eingebrannt und ist auf randlose, volle Breite ausgelegt (heller
   Verlauf oben passt nahtlos an den weissen Seitenhintergrund an).
   padding:0 hebelt die allgemeine "section"-Regel weiter unten aus (5.5rem
   oben/unten) - sonst haette der Footer nicht direkt am Banner angeschlossen,
   sondern durch einen weissen Leerraum getrennt. */
.origin-banner {
  padding: 0;
}

.origin-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Zentrierte, schmalere Variante fuer Banner-Grafiken ohne eingebrannten
   Randverlauf (z.B. "Vollgas fuer deinen Verein" auf module.html) - im
   Gegensatz zu .origin-banner oben (fuer den Absam-Banner bewusst auf
   randlose volle Breite ausgelegt) soll dieses Bild als abgerundete Karte
   innerhalb der ueblichen Inhaltsbreite wirken, nicht wie ein Panorama. */
/* Wie .module-detail (3.5rem statt der Section-Standardpolsterung 5.5rem) -
   dieses Bild sitzt zwischen "Buchhaltung" und "Dokumente" und soll genauso
   eng an beide anschliessen wie die Modul-Abschnitte untereinander, auf
   Toms Wunsch. */
.contained-banner {
  padding: 3.5rem 0;
}

.contained-banner img {
  display: block;
  width: 100%;
  max-width: var(--max-width);
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-xl);
}

/* ---------- Sections ---------- */

section {
  padding: 5.5rem 0;
}

/* Modul-Detailabschnitte auf module.html (Veranstaltungen/Aufgaben/
   Buchhaltung/Inklusive) liegen inhaltlich enger zusammen als normale
   Seitenabschnitte - Abstand dazwischen etwas kleiner als die
   section-Standardpolsterung, auf Toms Wunsch. */
.module-detail {
  padding: 3.5rem 0;
}

/* Etwas weniger Abstand zwischen "Vorstand & Admins" und "Mitglieder" auf
   der Startseite - die beiden Abschnitte gehoeren inhaltlich enger
   zusammen als der sitesweite section-Abstand vorsieht, auf Toms Wunsch.
   Nur der obere Abstand dieses einen Abschnitts wird reduziert. */
.tight-top {
  padding-top: 4rem;
}

/* Analog zu .tight-top, nur fuer den unteren Abstand: auf ueber-uns.html
   geht "Warum wir vereinigo gebaut haben" inhaltlich nahtlos in "Ehrenamt
   kennen wir nicht nur aus der Theorie" ueber, auf Toms Wunsch. */
.tight-bottom {
  padding-bottom: 1.5rem;
}

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

.section-head h2 {
  font-size: 2.1rem;
}

.section-head p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}

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

/* ---------- Foto-Duo (z.B. ueber-uns.html: zwei Portraits nebeneinander) ---------- */

.photo-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  max-width: 560px;
  margin: 0 auto;
}

.photo-duo figure {
  margin: 0;
}

.photo-duo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ---------- Modul-/Feature-Grid ---------- */

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

.feature-card {
  background: var(--color-surface-tint-blue);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* Verlinkte Kacheln (Veranstaltungen/Aufgaben auf module.html springen zu
   ihrem Detailabschnitt weiter unten) - <a> bringt browser-eigene
   Link-Farbe/Unterstreichung mit, die hier ausdruecklich NICHT gewuenscht
   ist: die Kachel soll optisch identisch zu den nicht-verlinkten Kacheln
   bleiben, nur mit einem Cursor-Hinweis. */
.feature-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Die sticky Kopfzeile (96px) wuerde sonst die obere Kante des
   Zielabschnitts beim Ansprung ueberdecken. */
#modul-veranstaltungen,
#modul-aufgaben,
#modul-buchhaltung,
#modul-dokumente {
  scroll-margin-top: 114px;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

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

.feature-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}

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

/* ---------- Vorteile / Zielgruppen ---------- */

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

/* .split-media-wide markiert Detailabschnitte mit info-dichten Dashboard-
   Illustrationen (Veranstaltungen, Aufgaben, Buchhaltung) - inhaltlich
   bleibt es bei der normalen 50/50-Aufteilung von .split, die Klasse dient
   nur der Abgrenzung von den schmaleren Telefon-Mockup-Abschnitten (siehe
   .app-shot). Frueher stand hier testweise ein schmaleres 35/65-Verhaeltnis
   fuer die Textspalte, wirkte im Vergleich zur breiten Bildspalte aber zu
   gedrungen - zurueckgestellt auf 1fr 1fr wie die Basisregel. */
@media (min-width: 901px) {
  .split-media-wide {
    grid-template-columns: 1fr 1fr;
  }

  .split-media-wide.reverse {
    grid-template-columns: 1fr 1fr;
  }
}

/* order:2 haette hier keinen Effekt gehabt: .split-content hat als einziges
   anderes Grid-Item ohnehin schon order:0 (Standard), .split-media waere
   also so oder so an zweiter Stelle gelandet - "reverse" tauschte optisch
   nichts. order:-1 stellt .split-media tatsaechlich vor .split-content. */
.split.reverse .split-media {
  order: -1;
}

.check-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.98rem;
}

.check-list li svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-success);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.tag {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* ---------- Stats ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.stat-card {
  padding: 2rem 1rem;
}

.stat-number {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.3rem;
}

.stat-label {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---------- Pricing Cards ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.pricing-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 1.6rem;
}

.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
}

.price-card.featured {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 10px 30px rgba(11, 33, 69, 0.28);
  transform: translateY(-8px);
}

.price-card.featured h3,
.price-card.featured .price-amount .amount {
  color: #fff;
}

.price-card.featured .price-tagline,
.price-card.featured .price-amount .period,
.price-card.featured .price-vat,
.price-card.featured .price-storage {
  color: rgba(255, 255, 255, 0.72);
}

.price-card.featured .price-features li {
  color: #fff;
}

.price-card.featured .price-features li svg {
  color: #7be6a8;
}

.price-card.featured .btn {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: #fff;
}

.price-card.featured .btn:hover {
  background: var(--color-primary-light);
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.price-tagline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}

.price-amount .amount {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.price-amount .period {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.price-vat {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

.price-storage {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.3rem;
}

.price-card > .btn {
  margin-top: auto;
}

.price-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.87rem;
}

.price-features li svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--color-success);
}

/* ---------- Vergleichstabelle ---------- */

.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  text-align: center;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}

.compare-table thead th {
  background: var(--color-primary-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
}

.compare-table thead th:first-child {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.compare-table tbody tr:nth-child(even) {
  background: var(--color-surface-alt);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table .yes {
  color: var(--color-success);
}

.compare-table .no {
  color: var(--color-border);
}

.compare-section td {
  background: var(--color-primary-light) !important;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.addon-note {
  margin-top: 1.6rem;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.addon-note p {
  margin: 0;
  font-size: 0.92rem;
}

.addon-note strong {
  color: var(--color-primary-dark);
}

/* ---------- Testphase-Formular (testen.html) ---------- */

.trial-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}

.trial-highlight svg {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 0.15rem;
}

.trial-highlight p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

.trial-highlight strong {
  color: var(--color-primary-dark);
}

.form-status {
  margin-top: 1.2rem;
  font-size: 0.92rem;
}

.form-status-error {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: #fbe9e7;
  color: #c0392b;
}

.form-status-success {
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0.8rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* ---------- CTA-Band ---------- */

.cta-band {
  background: var(--color-primary-dark);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-xl);
  padding: 3.5rem 2rem;
  margin: 0 1.5rem;
}

.cta-band h2 {
  color: #fff;
  font-size: 2rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 auto 1.8rem;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-actions .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.cta-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 0 2rem;
  background: var(--color-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  max-width: 32ch;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.footer-social a {
  display: inline-flex;
  color: var(--color-text-muted);
}

.footer-social a:hover {
  color: var(--color-primary);
}

.footer-col h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.footer-bottom a {
  color: var(--color-text-muted);
}

/* ---------- Innenseiten (Kontakt, Legal) ---------- */

.page-header {
  padding: 3.5rem 0 3rem;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.page-header p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

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

.legal-content h2 {
  font-size: 1.25rem;
  margin-top: 2.4rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: 1.8rem;
}

.legal-content p,
.legal-content li {
  color: var(--color-text);
  font-size: 0.95rem;
}

.legal-content ul {
  padding-left: 1.2rem;
}

/* Lange, nicht umbrechbare Links (z.B.
   "world4you.com/de/rechtliches/datenschutz") ragten auf schmalen Handys
   ueber den Bildschirmrand hinaus - die ganze Seite liess sich dadurch
   waagrecht scrollen. anywhere statt break-all: es wird nur dort getrennt,
   wo es sonst tatsaechlich ueberlaufen wuerde, normale Woerter bleiben
   unangetastet. */
.legal-content a {
  overflow-wrap: anywhere;
}

/* Muster-Widerrufsformular - eigenstaendige widerrufsformular.html UND als
   Anlage 1 in nutzungsbedingungen.html eingebettet, daher hier gemeinsam
   statt je Seite lokal definiert. */
.withdrawal-form-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin: 1.5rem 0 2rem;
}

.withdrawal-form-box p {
  margin: 0 0 1.1rem;
}

.withdrawal-form-box p:last-child {
  margin-bottom: 0;
}

.withdrawal-field {
  display: block;
  margin: 0 0 1.1rem;
}

.withdrawal-field-line {
  display: inline-block;
  min-width: 70%;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow);
}

.contact-info-card h3 {
  font-size: 1rem;
}

/* Testen-Seite: die Erfolgs-/Fehlermeldung (#trial-form-status) steht direkt ueber der Karte "Lieber direkt Kontakt aufnehmen?" -
   ohne Abstand klebte die Meldung an der Karte. Bei leerer Meldung faellt der Aussenabstand mit dem der leeren Zeile zusammen. */
#trial-form-status + .contact-info-card {
  margin-top: 1.8rem;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.contact-line svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* form.contact-form (Element+Klasse, Spezifitaet 0,1,1) schlaegt sonst das
   UA-Stylesheet [hidden] { display: none } (0,1,0) - ohne diese Regel bleibt
   ein per JS ausgeblendetes Formular (siehe js/trial-signup.js) trotz
   hidden-Attribut sichtbar. Gleiches Muster wie die .modal-overlay-Kollision
   im Hauptprodukt. */
form.contact-form[hidden] {
  display: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}

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

/* Honeypot-Feld gegen automatisierten Formular-Spam (Testphase/Kontakt) -
   serverseitig ausgewertet: ein Bot, der Formulare blind ausfuellt, traegt
   hier typischerweise etwas ein, ein Mensch sieht das Feld nie. Bewusst per
   Position ausserhalb des Viewports statt display:none/visibility:hidden -
   einfache Bot-Scraper pruefen oft genau diese beiden CSS-Eigenschaften,
   bevor sie ein Feld ueberspringen. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  cursor: pointer;
}

.consent-field input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.consent-field a {
  color: var(--color-primary);
}

/* ---------- Demo buchen ---------- */

.demo-intro {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.2rem;
  color: var(--color-primary-dark);
  line-height: 1.6;
}

.demo-intro p {
  margin: 0;
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  align-items: start;
}

.demo-grid[hidden],
.demo-success[hidden] {
  display: none;
}

.demo-success {
  margin-top: 0;
  margin-bottom: 2.4rem;
}

.demo-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow);
}

.demo-panel-title {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.demo-panel-hint {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0 0 1.2rem;
}

.demo-subtitle {
  font-size: 0.95rem;
  margin: 1.4rem 0 0.7rem;
}

.demo-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.demo-month-label {
  font-weight: 650;
}

.demo-month-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.demo-month-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.demo-weekdays,
.demo-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.demo-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-text-muted);
}

.demo-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.demo-day.is-blank {
  visibility: hidden;
}

.demo-day.is-off {
  opacity: 0.35;
  cursor: default;
}

.demo-day.is-free {
  background: var(--color-primary-light);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}

.demo-day.is-free:hover {
  border-color: var(--color-primary);
}

.demo-day.is-selected {
  background: var(--color-primary);
  color: #fff;
}

.demo-slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-slots-empty {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
}

.demo-slot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
}

.demo-slot input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--color-primary);
}

.demo-slot.is-taken {
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  cursor: default;
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.demo-cta-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

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

  .hero-media {
    order: -1;
  }

  .split,
  .split.reverse .split-media,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .split.reverse .split-media {
    order: 0;
  }

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

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

  .price-card.featured {
    transform: none;
  }
}

/* Eigener Breakpoint nur fuer die Kopfzeile (bewusst nicht 900px wie die
   Layout-Regeln oben): Logo 170px + sechs Nav-Links 399px + beide Buttons
   318px + Abstaende ergeben rund 966px Mindestbreite. Darunter lief die
   Zeile ueber - die Seite liess sich waagrecht scrollen, das Logo wurde
   gestaucht und der Test-Button brach zweizeilig um, war also fast doppelt
   so hoch wie "Login" daneben. Ab hier daher Menue-Button statt Nav-Links. */
@media (max-width: 1000px) {
  .brand-logo {
    height: 56px;
  }

  /* Kurze Beschriftung statt "14 Tage kostenlos testen" - schafft den Platz,
     den Logo und Menue-Button brauchen, ohne dass etwas gestaucht wird. */
  .nav-cta-full {
    display: none;
  }

  .nav-cta-short {
    display: inline;
  }

  /* Galt bisher nur fuer .btn-primary - der neu dazugekommene
     .btn-secondary ("Login") blieb in voller Desktop-Groesse und war
     dadurch sichtbar hoeher als der kompaktere Test-Button daneben. Jetzt
     fuer beide Buttons in .nav-actions gleich, damit sie exakt dieselbe
     Hoehe haben. */
  .nav-actions .btn {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
  }

  .nav-toggle-btn {
    display: flex;
  }

  .main-nav {
    order: 3;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: absolute;
    top: 96px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-hover);
    padding: 0.5rem 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
  }

  .main-nav ul li {
    width: 100%;
  }

  .main-nav ul a {
    display: block;
    padding: 0.7rem 0;
  }

  /* Megamenü am Handy: kein Hover-Panel (Touch kennt kein Hover), sondern
     eine immer sichtbare, eingerueckte Unterliste direkt unter "Module" -
     dieselben Links wie im Desktop-Panel, nur umgestylt statt dupliziert. */
  .nav-item-mega {
    position: static;
  }

  .nav-caret {
    display: none;
  }

  .mega-menu {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0 0 0.3rem 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mega-menu::before {
    display: none;
  }

  .mega-menu-item {
    padding: 0.45rem 0.5rem;
  }

  .mega-menu-icon {
    width: 28px;
    height: 28px;
  }

  /* Hoeher als zuvor (260px): dieselbe Liste traegt jetzt zusaetzlich die
     drei Megamenue-Punkte unter "Module" mit. */
  .nav-toggle-input:checked ~ .main-nav ul {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    opacity: 1;
    padding: 0.75rem 1.5rem 1.1rem;
  }
}

@media (max-width: 720px) {
  /* Auf dem Handy noch etwas kleiner als im Tablet-Bereich (56px oben),
     damit Logo, Menue-Button und beide Buttons nebeneinander passen. */
  .brand-logo {
    height: 44px;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  section {
    padding: 3.5rem 0;
  }

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

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .cta-band {
    margin: 0 1rem;
    padding: 2.5rem 1.4rem;
  }
}

/* ---------- Blog ---------- */

.blog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Kartenaufbau orientiert an Vereinsplaner.at-Referenz (Kundenkacheln):
   Bild mit Innenabstand statt randabschneidend, darunter zentriert erst die
   Kategorie (klein, grau, Versalien) und dann der Titel - siehe
   createBlogCard() in blog.js fuer die DOM-Reihenfolge. */
.blog-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  padding: 1.4rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.blog-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary-light);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding-top: 1.3rem;
}

.blog-card-category {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.blog-card-title {
  font-size: 1.15rem;
  margin: 0;
}

.blog-empty-hint {
  text-align: center;
  color: var(--color-text-muted);
  grid-column: 1 / -1;
  padding: 2rem 0;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.blog-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.blog-page-link:hover {
  background: var(--color-primary-light);
}

.blog-page-link.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Volle Breite ausserhalb von .wrap - background-size:cover erhaelt die
   Bildproportionen, schneidet dabei aber oben/unten bzw. seitlich ab statt
   das Bild zu verzerren (analog object-fit:cover), siehe blog.js:
   renderArticle(). */
.blog-article-hero {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary-light);
}

.blog-article-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 2.5rem;
}

.blog-article h1 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.blog-article-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.blog-article-body h2 {
  font-size: 1.3rem;
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
}

.blog-article-body p {
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 1.2rem;
  white-space: pre-wrap;
}

.blog-article-body blockquote {
  margin: 1.8rem 0;
  padding: 0.9rem 1.4rem;
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  white-space: pre-wrap;
}

.blog-article-block-image {
  margin: 1.8rem 0;
}

.blog-article-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* Einstellbare Bildgroesse fuer Inhaltsbild-Bloecke (nicht das Titelbild) -
   .blog-article-block-image-full behaelt die obige width:100%-Basisregel,
   die kleineren Groessen deckeln nur die max-width und zentrieren. */
.blog-article-block-image-small img {
  max-width: 33%;
  margin-inline: auto;
}

.blog-article-block-image-medium img {
  max-width: 55%;
  margin-inline: auto;
}

.blog-article-block-image-large img {
  max-width: 80%;
  margin-inline: auto;
}

.blog-article-back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.blog-article-back a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.blog-article-back a:hover {
  text-decoration: underline;
}

/* Muss NACH den Basisregeln oben stehen, sonst gewinnt bei gleicher
   Spezifitaet die spaetere Regel im Quelltext unabhaengig vom Viewport -
   genau das ist hier zuerst passiert (Regel stand vor dieser Verschiebung
   im FRUEHEREN @media-Block, also VOR der Basisregel, und wurde dadurch nie
   angewendet, ganz gleich wie schmal der Viewport war). */
@media (max-width: 720px) {
  .blog-teaser-grid {
    grid-template-columns: 1fr;
  }

  .blog-article-hero {
    height: 220px;
  }
}

/* Sehr schmale Geraete (z.B. iPhone SE): Logo, Menue-Button und beide
   Buttons passten sonst um rund 24px nicht mehr nebeneinander, die Seite
   liess sich dadurch waagrecht scrollen. Etwas weniger Aussenabstand und
   ein kleineres Logo schaffen den noetigen Platz. Bewusst ganz am Ende der
   Datei: die 720px-Bloecke weiter oben setzen .brand-logo ebenfalls und
   wuerden diese Regel sonst wieder ueberschreiben. */
@media (max-width: 400px) {
  .site-header .wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand-logo {
    height: 38px;
  }

  .nav-actions .btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
  }
}

/* ---------- Modul-Hero (eigenstaendige Modul-Unterseiten, z.B. Buchhaltung/Notizen) ---------- */

.module-hero {
  padding: 4rem 0 3.5rem;
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 65%);
}

.module-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3rem;
  align-items: center;
}

.module-hero h1 {
  font-size: 2.9rem;
  line-height: 1.12;
  margin-bottom: 0.5rem;
}

.module-hero-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.3rem;
}

.module-hero-lead {
  font-size: 1.02rem;
  color: var(--color-text);
  max-width: 54ch;
  margin-bottom: 2.2rem;
}

.module-hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.module-hero-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.module-hero-card-icon svg {
  width: 24px;
  height: 24px;
}

.module-hero-card h3 {
  font-size: 0.96rem;
  margin-bottom: 0.35rem;
}

.module-hero-card p {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Sanfter, unscharfer Farbkreis hinter dem Screenshot - rein dekorativ,
   daher per ::before statt eines eigenen HTML-Elements. isolation:isolate
   auf .module-hero-media haelt den z-index-Stapel lokal, ohne andere
   Elemente der Seite zu beeinflussen. */
.module-hero-media {
  position: relative;
  isolation: isolate;
}

.module-hero-media::before {
  content: "";
  position: absolute;
  inset: -12% -8% -12% 8%;
  background: radial-gradient(circle, var(--color-primary-light) 0%, rgba(234, 242, 254, 0) 72%);
  border-radius: 50%;
  z-index: -1;
}

.module-hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--color-border);
}

/* ---------- Modul-Callout (kurzer, freundlicher Hinweis direkt unterm Modul-Hero) ---------- */

/* Deutlich weniger als die section-Standardpolsterung (5.5rem) - die Callout-Box
   soll optisch nah am Hero darueber und am Abschnitt darunter sitzen, auf
   Toms Wunsch. */
.module-callout-section {
  padding: 1.5rem 0;
}

/* Reduzierter oberer Abstand, damit die Ueberschrift "15 Module - ein Tool
   fuer alles" nicht so weit von der blauen Infobox darueber abrueckt wie
   die section-Standardpolsterung (5.5rem) es sonst erzeugen wuerde. */
.module-grid-section {
  padding-top: 2rem;
}

.module-callout {
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  padding: 1.8rem 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.module-callout-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-callout-icon svg {
  width: 22px;
  height: 22px;
}

.module-callout-text h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.module-callout-text p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Kleine, leicht gefaecherte Kachel-Gruppe am unteren Rand des Hero-Bilds -
   rein dekorativ, deutet die Modul-Vielfalt an, ohne ein weiteres echtes
   Icon-Set pflegen zu muessen (nutzt bereits vorhandene Icon-Pfade). */
.module-hero-stack {
  position: absolute;
  bottom: -1.2rem;
  left: 1.5rem;
  display: flex;
}

.module-hero-stack-item {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-hover);
  border: 3px solid #fff;
  margin-left: -0.9rem;
}

.module-hero-stack-item:first-child {
  margin-left: 0;
}

.module-hero-stack-item svg {
  width: 22px;
  height: 22px;
}

.module-hero-stack-item--a {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(-6deg);
  z-index: 3;
}

.module-hero-stack-item--b {
  background: #fff;
  color: var(--color-primary);
  transform: rotate(2deg) translateY(4px);
  z-index: 2;
}

.module-hero-stack-item--c {
  background: var(--color-primary-light);
  color: var(--color-primary);
  transform: rotate(8deg) translateY(8px);
  z-index: 1;
}

@media (max-width: 900px) {
  .module-hero .wrap {
    grid-template-columns: 1fr;
  }

  .module-hero-media {
    order: -1;
  }
}

@media (max-width: 560px) {
  .module-callout {
    flex-direction: column;
    text-align: center;
  }

  .module-hero-cards {
    grid-template-columns: 1fr;
  }
}