/* =============================================================================
   landing.css — Bausteine für Start- und Landing-Seiten (CMS-HTML-Blöcke)

   Die EINZIGE Definition aller landing-*-Klassen. Geladen von StandardLayout,
   gilt damit in jedem davon abgeleiteten Layout gleich (Website, Landing,
   Toolbar, Sidebar). Ausnahme: SystemMinimalLayout (Login, Registrierung)
   setzt seine CSS-Liste bewusst selbst und lädt diese Datei nicht — dort
   keine landing-*-Klassen verwenden.

   Vorher gab es zwei Bäume mit denselben Namen: einen BEM-Baum in base.css und
   einen zweiten in website.css. WebsiteLayout lud beide, website.css gewann
   per Source-Order — Seiten sahen dort anders aus als ihre eigene Definition.
   Zusammengeführt am 09.10.2026.

   Regeln:
   - Nur BEM: Block (landing-x), Element (landing-x__y), Modifier (landing-x--z).
   - Site-Unterschiede ausschließlich über Tokens in site-*.css, nie über eine
     zweite Definition einer Klasse hier.
   - Kein festes Farbschema: alle Farben aus base.css-Tokens, damit Light und
     Dark ohne eigene Regeln funktionieren.
   - Base.css setzt global p { padding: 6px 16px }. Jeder Textbaustein hier
     setzt padding: 0 selbst — sonst sitzt Fließtext 16px neben den Titeln.
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.landing-hero {
  text-align: center;
  padding: 80px 24px 64px;
  max-width: 760px;
  margin: 0 auto;
}

.landing-hero__badge {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--btn-primary-bg);
  background: rgba(var(--brand-tint), 0.12);
  border-radius: var(--radius-full);
}

.landing-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 0 0 20px;
}

.landing-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 32px;
  padding: 0;
}

.landing-hero__text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 24px 0 0;
  padding: 0;
}

.landing-hero__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto 0;
  border-radius: var(--radius-lg);
}

/* Breite Diagramme im Hero (Inline-SVG mit Beschriftung): auf schmalen
   Bildschirmen würde die Schrift auf 6–7px schrumpfen. Sie ergänzen H1 und
   Unterzeile nur, deshalb dort ausgeblendet statt unlesbar verkleinert. */
@media (max-width: 560px) {
  .landing-hero__img--wide { display: none; }
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── Abschnitt: Rahmen für einen Seitenteil, optional mit Wechselgrund ────── */

.landing-section {
  padding: 64px 24px;
}

.landing-section--alt {
  background: var(--surface-container-low);
}

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

.landing-section__header {
  margin: 0 0 40px;
}

/* Akzentlinie über dem Abschnittskopf — vorher ein leeres
   <div class="landing-accent-bar">, jetzt Teil des Kopfes selbst. */
.landing-section__header::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 0 20px;
  background: var(--btn-primary-bg);
  border-radius: var(--radius-full);
}

.landing-section__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  margin: 0;
}

.landing-section__intro {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 12px 0 0;
  padding: 0;
  max-width: 44rem;
}

/* Kleine Überzeile über einem Titel — eigener Block, weil sie in Abschnitts-
   köpfen und im Split-Baustein gleich aussieht. */
.landing-overline {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--btn-primary-bg);
  margin: 0 0 12px;
}

/* ── Feature-Raster ───────────────────────────────────────────────────────── */

.landing-features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.landing-features__heading {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 40px;
}

/* Steht zwischen Blocküberschrift und Kachelraster. Kein max-width: schmale
   Textspalten auf breitem Monitor sind hier unerwünscht. */
.landing-features__heading:has(+ .landing-features__intro) {
  margin-bottom: 16px;
}

.landing-features__intro {
  text-align: center;
  margin: 0 0 32px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Fest zweispaltig: die Feature-Blöcke im Bestand sind auf gerade Kachelzahlen
   (2, 4, 6) geschrieben — eine automatische Spaltenzahl ließe bei vier Kacheln
   eine einzelne in der letzten Zeile stehen. Drei Spalten nur ausdrücklich. */
.landing-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Genau drei Kacheln stünden im Zweierraster als 2 + 1 — dann drei Spalten,
   ohne dass der Inhalt den Modifier setzen muss. */
.landing-features__grid--3,
.landing-features__grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Raster für Kacheln in einem landing-section: auto-fit statt fester
   Spaltenzahl, weil es oft hinter der 260px-Sidebar steht — eine Media-Query
   misst den Viewport und läge daneben. minmax mit fester Untergrenze
   verhindert zugleich den Überlauf: Grid-Items haben min-width:auto und können
   sonst nicht unter die Breite des längsten Wortes schrumpfen
   ("Marktmissbrauchsverordnung"), was .app-workspace mit overflow-x:hidden
   stumm abschneiden würde. Ohne eigenes max-width: die Breite begrenzt
   .landing-section__inner (1100px). */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Fest zweispaltig, z. B. für vier gleichrangige Kacheln (2 × 2 statt 3 + 1). */
.landing-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Viele kurze Kacheln (Themenblöcke). auto-fill hält leere Spuren frei, damit
   eine einzelne Kachel in der letzten Zeile nicht auf volle Breite wächst. */
.landing-grid--dense,
.landing-features__grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.landing-grid--dense .landing-card,
.landing-features__grid--dense .landing-card {
  padding: 18px;
  /* Nicht --bg-app: das ist der Seitenhintergrund, im Dark-Theme stünden 49
     Karten sonst als flaue Wand ohne Trennung da. */
  background: var(--bg-panel);
}

.landing-features__note {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0;
}

/* Vergleichstabellen in einem Feature-Block: breite Tabellen scrollen in
   ihrem Rahmen, nicht die ganze Seite. Die Mindestbreite hält Textspalten
   lesbar, statt sie auf ein Wort zu stauchen. */
.landing-features .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 32px;
}

.landing-features .data-table {
  min-width: 640px;
}

.landing-features .data-table th,
.landing-features .data-table td {
  vertical-align: top;
}

.landing-features .data-table tbody th {
  color: var(--text-main);
}

.landing-features .data-table caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Nutzenblock ("Mit kostenlosem Konto") — abgesetztes Panel, nutzt sonst die
   landing-features-Basis (Grid, Heading, Karten). */
.landing-benefits {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 24px;
  margin: 8px auto 24px;
}

/* ── Karte ────────────────────────────────────────────────────────────────── */

.landing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--bg-panel);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

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

a.landing-card {
  text-decoration: none;
  color: inherit;
}

a.landing-card:hover {
  border-color: var(--btn-primary-bg);
}

a.landing-card:focus-visible {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
}

.landing-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  color: var(--btn-primary-bg);
  background: rgba(var(--brand-tint), 0.1);
  border-radius: var(--radius-md);
}

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

.landing-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin: 0 0 16px;
}

.landing-card__img,
.landing-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
  margin: 0 0 8px;
}

.landing-card__tagline {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--btn-primary-bg);
  margin: 0 0 8px;
  padding: 0;
}

.landing-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
}

.landing-card__benefits {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.landing-card__benefits li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 8px;
}

/* Häkchen statt Aufzählungspunkt, gezeichnet aus zwei Rändern — kein Bild,
   folgt damit automatisch der Markenfarbe in Light und Dark.
   base.css zeichnet über `ul > li::before` global einen Chevron per Maske und
   Hintergrundfarbe; beides muss hier zurückgesetzt werden, sonst maskiert der
   Chevron das Häkchen. */
.landing-card__benefits li::before,
.landing-feature-list li::before {
  content: "";
  position: absolute;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  border: solid var(--btn-primary-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.landing-card__benefits li::before {
  left: 4px;
  top: 0.3em;
  width: 5px;
  height: 10px;
}

/* Fußzeile einer Karte (z. B. "Mehr erfahren →") rutscht an den unteren
   Rand, damit Karten unterschiedlicher Textlänge bündig enden. */
.landing-card__more {
  margin: auto 0 0;
  padding: 16px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--btn-primary-bg);
}

/* Schlagwort-Chips (Technologien, Themen) in einer Karte oder einem Abschnitt. */
.landing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.landing-tags__item {
  margin: 0;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
  background: rgba(var(--brand-tint), 0.1);
  border: 1px solid rgba(var(--brand-tint), 0.25);
  border-radius: var(--radius-full);
}

/* base.css zeichnet vor jedes ul > li einen Chevron — Chips brauchen keinen. */
.landing-tags__item::before {
  content: none;
}

/* Pfeil als Dekoration per CSS statt im Linktext — mit leerem Alternativtext,
   damit Screenreader nicht „Pfeil nach rechts" vorlesen. */
.landing-card__more a::after {
  content: " →" / "";
}

/* ── Fließtext-Abschnitt ──────────────────────────────────────────────────── */

.landing-intro {
  padding: 0 24px 56px;
}

.landing-intro__inner {
  max-width: 760px;
  margin: 0 auto;
}

.landing-intro__heading {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 0 0 16px;
}

/* h1 im Intro (Produktseiten ohne Hero) — Seitenüberschrift, größer. */
h1.landing-intro__heading {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 48px 0 20px;
}

.landing-intro__text {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding: 0;
}

ol.landing-intro__text,
ul.landing-intro__text {
  padding: 0 0 0 1.4em;
}

/* Häkchen-Liste im Fließtext */
.landing-feature-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.landing-feature-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin: 0 0 10px;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-feature-list li::before {
  left: 6px;
  top: 0.35em;
  width: 6px;
  height: 11px;
}

/* ── Text neben Grafik ────────────────────────────────────────────────────── */

.landing-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}

.landing-split__media {
  position: relative;
  min-width: 0;
}

.landing-split__media img,
.landing-split__media svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.landing-split__media img {
  box-shadow: var(--shadow-lg);
}

/* Kennzahl-Plakette an der Grafik */
.landing-split__badge {
  position: absolute;
  right: -16px;
  bottom: -16px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-primary-lg);
}

.landing-split__badge-value {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.landing-split__badge-label {
  display: block;
  margin: 6px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.landing-split__body {
  min-width: 0;
}

.landing-split__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  margin: 0 0 20px;
}

.landing-split__text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding: 0;
}

/* Grafik rechts statt links */
.landing-split--reverse .landing-split__media {
  order: 2;
}

/* ── Ablauf in Schritten ──────────────────────────────────────────────────── */

.landing-how {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.landing-how__heading {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 40px;
}

.landing-how__steps {
  counter-reset: landing-step;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}

.landing-how__steps > li {
  counter-increment: landing-step;
  position: relative;
  padding: 56px 20px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  line-height: 1.55;
  color: var(--text-muted);
}

.landing-how__steps > li::before {
  content: counter(landing-step);
  position: absolute;
  top: 16px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
}

.landing-how__steps > li strong {
  color: var(--text-main);
}

/* ── Kennzahlen-Leiste ────────────────────────────────────────────────────── */

.landing-stats {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

/* 180px Untergrenze: vier Werte stehen in voller Breite in einer Reihe und
   brechen in einer schmalen Spalte (Split-Baustein) 2 × 2 statt 3 + 1 um. */
.landing-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.landing-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.landing-stats__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}

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

.landing-stats__updated {
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Abschluss-Aufruf ─────────────────────────────────────────────────────── */

.landing-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
}

.landing-cta__title {
  position: relative;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  margin: 0 0 12px;
}

.landing-cta__text {
  position: relative;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40rem;
  margin: 0 auto 28px;
  padding: 0;
}

.landing-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Dunkle, abgesetzte Variante mit Lichtschein — als Abschluss einer Seite.
   Feste Weißtöne sind hier richtig: der Grund ist in beiden Themes dunkel. */
.landing-cta--dark {
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 64px 32px;
  border-top: 0;
  border-radius: 24px;
  background: var(--pvt-header-bg, #263143);
}

.landing-cta--dark .landing-cta__title {
  color: #fff;
}

.landing-cta--dark .landing-cta__text {
  color: rgba(255, 255, 255, 0.75);
}

.landing-cta--dark .btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.landing-cta--dark .btn--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

.landing-cta__glow {
  position: absolute;
  top: -50%;
  left: -25%;
  width: 100%;
  height: 100%;
  background: rgba(var(--brand-tint), 0.25);
  filter: blur(120px);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Rechtliche Hinweise am Seitenende ────────────────────────────────────── */

.landing-legal {
  padding: 32px 24px 48px;
  border-top: 1px solid var(--border-color);
}

.landing-legal__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.landing-legal__heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
}

.landing-legal__links {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
}

.landing-legal__links .sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ── Schmale Bildschirme ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .landing-hero { padding: 48px 16px 40px; }
  /* Buttons untereinander in voller Breite — nebeneinander werden sie auf dem
     Handy zu schmal für ihre Beschriftung und schwer zu treffen. */
  .landing-hero__actions,
  .landing-cta__actions { flex-direction: column; align-items: stretch; }
  /* Alle Raster mit fester Spaltenzahl werden auf dem Handy einspaltig —
     die automatischen (.landing-grid ohne Modifier) brechen von selbst um. */
  .landing-grid--2,
  .landing-features__grid,
  .landing-features__grid--3,
  .landing-features__grid:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  .landing-section { padding: 48px 16px; }
  /* Kennzahlen mobil fest 2 × 2 — die 180px-Untergrenze ergäbe sonst eine
     einzige Spalte mit vier Kacheln untereinander. */
  .landing-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-features,
  .landing-how { padding-left: 16px; padding-right: 16px; }
  .landing-intro { padding-left: 16px; padding-right: 16px; }
  .landing-split { gap: 40px; }
  .landing-split--reverse .landing-split__media { order: 0; }
  .landing-split__badge { right: 12px; bottom: -20px; padding: 14px 18px; }
  .landing-split__badge-value { font-size: 1.7rem; }
  .landing-cta--dark { margin: 0 16px 32px; padding: 48px 20px; border-radius: 16px; }
}