/*
 * VOMA Child Theme – cards.css
 *
 * VOMA Tile (Kachel): Icon-Container, Titel, Beschreibung, CTA-Text.
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md   – Zielwerte Karten und Kacheln
 *   06_Standards/CI/COLORS.md       – Farbpalette
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 *   06_Standards/DEVELOPMENT/SVG-ICONS.md  – Icon-Größen
 */

/* ============================================================
   VOMA TILE
   Quelle: COMPONENTS.md – Radius 22px, Padding 36px 36px 30px,
   Border rgba(17,24,39,.08), Shadow 0 6px 18px rgba(17,24,39,.04)
   ============================================================ */

.voma-tile {
  display: flex;
  flex-direction: column;

  /* 7. Farben */
  background: #ffffff;
  color: inherit;

  /* 8. Rahmen */
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 22px;

  /* Abstände */
  padding: 28px 22px;

  /* Typografie */
  text-decoration: none;

  /* Effekte */
  box-shadow: 0 6px 18px rgba(17, 24, 39, .04);
  transition:
    transform var(--voma-transition-base),
    border-color var(--voma-transition-base),
    box-shadow var(--voma-transition-base);
}

.voma-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 24, 39, .16);
  box-shadow: 0 20px 50px rgba(17, 24, 39, .08);
}

/* ============================================================
   ICON CONTAINER
   Quelle: COMPONENTS.md – 56px x 56px, Radius 16px,
   BG rgba(17,24,39,.03), Hover BG rgba(82,177,101,.08)
   ============================================================ */

.voma-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(17, 24, 39, .03);
  color: var(--voma-green);
  margin-bottom: var(--voma-space-4);
  flex-shrink: 0;
  transition: background var(--voma-transition-base);
}

.voma-tile:hover .voma-tile__icon {
  background: rgba(82, 177, 101, .08);
}

.voma-tile__icon svg {
  width: 30px;
  height: 30px;
}

/* ============================================================
   TYPOGRAFIE
   Quelle: COMPONENTS.md – Titel 21px/900/1.15, Text 15.5px/1.7,
   CTA 14px/800
   ============================================================ */

.voma-tile__title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
  color: #111827;
  margin: 0 0 var(--voma-space-3);
}

.voma-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.voma-tile__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: #1f2933;
  margin: 0;
}

/* Als Geschwister-Element von .voma-tile__body verwendet (nicht darin
   verschachtelt), damit body flex:1 den verbleibenden Raum absorbiert
   und die Liste – wie das .voma-tile__cta der Nachbarkarten – immer am
   unteren Kartenrand sitzt, unabhängig von der Textlänge darüber. */
.voma-tile__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-2);
  list-style: none;
  margin: var(--voma-space-4) 0 0;
  padding-top: var(--voma-space-4);
  padding-inline: 0;
  border-top: var(--voma-border);
  font-size: 14px;
  line-height: 1.5;
  color: #1f2933;
}

.voma-tile__hint {
  font-size: 13px;
  color: rgba(17, 24, 39, .48);
}

.voma-tile__tagline {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(17, 24, 39, .48);
  margin-top: var(--voma-space-3);
  margin-bottom: var(--voma-space-1);
}

.voma-tile__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--voma-space-2);
  margin-top: var(--voma-space-4);
  padding-top: var(--voma-space-4);
  border-top: var(--voma-border);
}

/* Sichtbar als Link erkennbar: Grün statt neutralem Grau,
   dezente Unterstreichung, Pfeil bewegt sich beim Hover.
   Quelle: Sprint-Review „Runde 3" – Kachel-Links wurden nicht
   als klickbar wahrgenommen. */
.voma-tile__cta-label {
  display: inline-flex;
  align-items: center;
  gap: var(--voma-space-1);
  font-size: 14px;
  font-weight: 800;
  color: var(--voma-green);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color var(--voma-transition-base),
    text-decoration-color var(--voma-transition-base);
}

.voma-tile__cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--voma-transition-base);
}

.voma-tile__cta-label:hover,
.voma-tile__cta-label:focus-visible,
.voma-tile:hover .voma-tile__cta-label,
.voma-tile:focus-visible .voma-tile__cta-label {
  color: var(--voma-green-dark);
  text-decoration-color: currentColor;
}

.voma-tile:hover .voma-tile__cta-arrow,
.voma-tile:focus-visible .voma-tile__cta-arrow {
  transform: translateX(4px);
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem)
   Quelle: COMPONENTS.md – Padding 36px 36px 30px Desktop
   ============================================================ */

@media (min-width: 64rem) {
  .voma-tile {
    padding: 36px 36px 30px;
  }

  .voma-tiles__grid--four .voma-tile {
    padding: 30px 28px 26px;
  }
}

/* Desktop-Spacing-Pass 02.07.2026 (Runde 2): .voma-tiles/.voma-trust
   behielten ihr Section-Padding bisher bei jeder Breite (64px) –
   Kachel-/Trust-Sektionen wirkten auf breiten Screens zu eng gerahmt. */
@media (min-width: 64rem) {
  .voma-tiles,
  .voma-trust {
    padding-block: 96px;
  }
}

/* ============================================================
   TILES SECTION + GRID
   Wrapper für Kachel-Gruppen (z. B. Zielgruppen-Wahl, Warum VOMA).
   Quelle: 06_Standards/DEVELOPMENT/LAYOUT.md – Grid-Muster 1
   (1 Spalte Mobil, 2 Spalten Tablet, 3 Spalten Desktop)
   ============================================================ */

.voma-tiles {
  padding-block: var(--voma-space-8);
}

.voma-tiles__heading {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  color: #111827;
  margin: 0 0 var(--voma-space-6);
}

.voma-tiles__grid {
  display: grid;
  gap: var(--voma-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .voma-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .voma-tiles__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Vier-Kacheln-Variante (Service-Seite) nutzt dieselbe Grid-Basis,
   endet auf Desktop aber bei 4 Spalten statt 3. Etwas engerer Gap und
   Kachel-Innenabstand als die Drei-Spalten-Variante, da vier Karten
   pro Zeile bei gleichem Abstand schnell zu luftig/verloren wirken
   (Feedback Lead-Designer-Review 03.07.2026: "weniger Weißraum,
   stärkere Kartenwirkung"). */
.voma-tiles__grid--four {
  grid-template-columns: 1fr;
  gap: var(--voma-space-5);
}

.voma-tiles__grid--four .voma-tile {
  padding: 26px 24px 22px;
}

@media (min-width: 48rem) {
  .voma-tiles__grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .voma-tiles__grid--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Zwei-Spalten-Variante (z. B. Problem/Ansatz-Gegenüberstellung),
   endet bereits ab Tablet-Breite bei 2 Spalten statt 3. */
.voma-tiles__grid--two {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .voma-tiles__grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   FEATURE BAR ("Warum VOMA?")
   Ersetzt 03.07.2026 (2. Korrekturrunde) die vorherige Fassung mit
   grauem Section-Hintergrund + separatem Kachel-Raster: wirkte direkt
   nach dem Hero zu schwer und konkurrierte mit der Hero-Überschrift.
   Neuer Ansatz: ein einzelnes, auf Weiß schwebendes Panel (gleiche
   Radius-/Schatten-Sprache wie die Hero-Card), innen in Spalten
   unterteilt statt drei einzelne Kacheln – wirkt als eine ruhige,
   zusammenhängende Einheit statt als verstreute Karten auf grauem
   Grund. Kein eigener Section-Hintergrund: bleibt auf dem weißen
   Seitenhintergrund, für einen nahtlosen Übergang vom Hero.
   ============================================================ */

.voma-feature-bar {
  padding-block: var(--voma-space-6) var(--voma-space-7);
}

/* Kicker statt große Überschrift – gleiche stille Bildsprache wie
   .voma-hero__eyebrow, damit "Warum VOMA?" nicht mehr mit dem H1 der
   Hero-Sektion konkurriert. */
.voma-feature-bar__kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, .48);
  margin: 0 0 var(--voma-space-4);
}

.voma-feature-bar__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--voma-space-6);
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
  padding: var(--voma-space-6);
}

.voma-feature-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(17, 24, 39, .03);
  color: var(--voma-green);
  margin-bottom: var(--voma-space-3);
}

.voma-feature-bar__icon svg {
  width: 22px;
  height: 22px;
}

/* VEMA-Siegel bewusst größer und ohne Icon-Box-Hintergrund dargestellt
   als die Linien-Icons der Nachbarspalten: ein Mitgliedssiegel ist ein
   eigenständiges Vertrauenszeichen, kein austauschbares Icon, und soll
   entsprechend erkennbar bleiben statt in einer generischen Box zu
   verschwinden (explizite Anforderung: darf nicht zu klein werden). */
.voma-feature-bar__seal {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: var(--voma-space-3);
  border-radius: 10px;
}

.voma-feature-bar__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
  margin: 0 0 var(--voma-space-2);
}

.voma-feature-bar__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #1f2933;
  margin: 0;
}

.voma-feature-bar__text a {
  color: var(--voma-green-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--voma-transition-base);
}

.voma-feature-bar__text a:hover,
.voma-feature-bar__text a:focus-visible {
  text-decoration-color: currentColor;
}

@media (min-width: 48rem) {
  /* auto-fit statt fixer 3-Spalten-Zahl: Panel enthält seit dem
     03.07.2026-Feinschliff nur noch 2 Kernaussagen (VEMA ist in den
     eigenständigen .voma-vema-Bereich ausgelagert), passt sich damit
     automatisch an, ohne dass hier ein Spaltenzahl-Modifier gepflegt
     werden muss. */
  .voma-feature-bar__panel {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--voma-space-7);
    padding: var(--voma-space-7);
  }

  .voma-feature-bar__col {
    position: relative;
    padding-left: var(--voma-space-7);
  }

  .voma-feature-bar__col:first-child {
    padding-left: 0;
  }

  .voma-feature-bar__col::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(17, 24, 39, .08);
  }

  .voma-feature-bar__col:first-child::before {
    display: none;
  }
}

@media (min-width: 64rem) {
  .voma-feature-bar__panel {
    padding: var(--voma-space-7) var(--voma-space-8);
  }
}

/* ============================================================
   VEMA-TRUST-BEREICH
   Eigenständiger Vertrauens-Block für die VEMA-eG-Mitgliedschaft,
   03.07.2026 aus dem "Warum VOMA?"-Panel herausgelöst (Premium-
   Feinschliff, Punkt 2): VEMA teilte sich bisher eine von drei
   gleichwertigen Spalten mit fachfremden Aussagen und transportierte
   dadurch keinen eigenen, erklärten Kundennutzen – nur Logo + Label.
   Badge-vorwärts: großes Siegel in eigener, sanft grün getönter
   Fläche (statt der alten dunkelblauen Flat-Box), daneben konkreter
   Nutzen in Headline + zwei knappen Punkten statt reiner Beschriftung.
   Bewusst ohne den Begriff "unabhängig" (an anderer Stelle bereits
   kommuniziert).
   ============================================================ */

.voma-vema {
  padding-block: var(--voma-space-6) var(--voma-space-7);
}

.voma-vema__panel {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-6);
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
  padding: var(--voma-space-6);
}

.voma-vema__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 177, 101, .06);
  border-radius: var(--voma-radius-inner);
  padding: var(--voma-space-6);
}

.voma-vema__badge img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

.voma-vema__kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--voma-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--voma-space-3);
}

.voma-vema__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 var(--voma-space-4);
}

.voma-vema__lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(17, 24, 39, .78);
  margin: 0 0 var(--voma-space-5);
}

.voma-vema__points {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-4);
  list-style: none;
  margin: 0 0 var(--voma-space-5);
  padding: 0;
}

.voma-vema__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--voma-space-3);
}

.voma-vema__points svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--voma-green);
}

.voma-vema__points span {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2933;
}

.voma-vema__points strong {
  color: #111827;
}

.voma-vema__link {
  display: inline-flex;
  align-items: center;
  gap: var(--voma-space-1);
  font-size: 14px;
  font-weight: 800;
  color: var(--voma-green);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--voma-transition-base), text-decoration-color var(--voma-transition-base);
}

.voma-vema__link:hover,
.voma-vema__link:focus-visible {
  color: var(--voma-green-dark);
  text-decoration-color: currentColor;
}

@media (min-width: 64rem) {
  .voma-vema__panel {
    flex-direction: row;
    align-items: center;
    gap: var(--voma-space-8);
    padding: var(--voma-space-7) var(--voma-space-8);
  }

  .voma-vema__badge {
    flex: 0 0 auto;
    width: 280px;
  }

  .voma-vema__content {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   TRUST SECTION
   Zweispaltiger Vertrauens-Block (Fließtext + Liste / Bewertungs-Badge).
   Quelle: 06_Standards/DEVELOPMENT/LAYOUT.md – Grid-Muster 2
   (asymmetrisches 2-Spalten-Layout, 1.2fr/0.8fr ab Desktop)
   ============================================================ */

.voma-trust {
  padding-block: var(--voma-space-8);
  background: #f7f8f9;
}

.voma-trust__grid {
  display: grid;
  gap: var(--voma-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .voma-trust__grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

  /* Premium-Feinschliff 04.07.2026: schmalere Innenbreite auf der
     getönten Fläche (analog .voma-story__inner) – kombinierter
     Selektor statt .container direkt zu überschreiben, damit die
     sitweit genutzte .container-Klasse unangetastet bleibt. */
  .container.voma-trust__grid {
    max-width: var(--voma-max-tinted);
  }
}

.voma-trust__kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--voma-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--voma-space-3);
}

.voma-trust__title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 var(--voma-space-4);
}

.voma-trust__lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(17, 24, 39, .78);
  margin: 0 0 var(--voma-space-5);
}

.voma-trust__list {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #1f2933;
}

.voma-trust__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--voma-space-3);
  padding: var(--voma-space-6);
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
  text-align: center;
}

.voma-trust__badge-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(17, 24, 39, .55);
}

/* Kompakte Variante: einzelnes Siegel unterhalb eines Kachel-Grids
   (z. B. VEMA-Mitgliedssiegel unter den "Warum VOMA"-Kacheln). */
.voma-trust__badge--compact {
  max-width: 220px;
  margin: var(--voma-space-6) auto 0;
  padding: var(--voma-space-4);
}

/* Foto-Variante der zweiten Spalte (echtes Foto statt Bewertungs-
   Badge) – Lead-Designer-Review 03.07.2026: Hero verliert seine
   Illustration, das Vertrauenssignal "echte Menschen/echter Standort"
   wandert stattdessen in eine eigene Foto-Sektion direkt danach.
   Feste Aspect-Ratio statt Höhen-Stretch, damit ein Landschaftsfoto
   bei jeder Spaltenbreite sauber zugeschnitten bleibt, ohne wichtige
   Bildteile (Dach, Himmel) zu verlieren. */
.voma-trust__photo {
  border-radius: var(--voma-radius-card);
  overflow: hidden;
  box-shadow: var(--voma-shadow-card);
  aspect-ratio: 4 / 3;
}

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

@media (min-width: 64rem) {
  .voma-trust__photo {
    aspect-ratio: 16 / 11;
  }
}

/* ============================================================
   CALLOUT
   Hervorgehobener Info-/Risiko-Block innerhalb einer Tiles-Sektion
   (z. B. "Wenn Struktur fehlt, entstehen stille Risiken" auf dem
   Vertragscheck). Gleiche Karten-Tokens wie .voma-tile, aber
   vollbreit statt im Grid.
   ============================================================ */

.voma-callout {
  background: #f7f8f9;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: var(--voma-radius-card);
  padding: var(--voma-space-6) var(--voma-space-5);
  margin-top: var(--voma-space-6);
}

/* Desktop-Spacing-Pass 02.07.2026 (Runde 2): hatte bisher keinerlei
   Desktop-Regel, war von 400px bis 2000px pixelgleich. */
@media (min-width: 64rem) {
  .voma-callout {
    padding: 40px 32px;
  }
}

.voma-callout__title {
  font-size: 19px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 var(--voma-space-3);
}

.voma-callout__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: #1f2933;
  margin: 0 0 var(--voma-space-3);
}

/* Getönte Variante: für Gegenüberstellungen (Problem-Karte neutral,
   Ansatz-Karte getönt + CTA), z. B. Privatkunden "Klarheit statt
   Vertrags-Sammlung". In einer Grid-Zelle statt vollbreit, daher ohne
   den Standard-margin-top. */
.voma-callout--in-grid {
  margin-top: 0;
  height: 100%;
}

.voma-callout--tint {
  background: rgba(82, 177, 101, .06);
  border-color: rgba(82, 177, 101, .18);
}

/* Farbiger Akzentbalken oben, für Gegenüberstellungen (z. B. Privatkunden
   "Klarheit statt Vertrags-Sammlung") – auf beiden Karten, nicht nur der
   getönten, damit sie optisch als Paar zusammengehören. */
.voma-callout--topline {
  position: relative;
  overflow: hidden;
}

.voma-callout--topline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--voma-green);
  opacity: .9;
}

.voma-callout__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--voma-space-3);
}

@media (min-width: 48rem) {
  .voma-callout__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.voma-callout__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--voma-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voma-callout__link:hover,
.voma-callout__link:focus-visible {
  color: var(--voma-green-dark);
}

.voma-callout__list {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-2);
  margin: 0 0 var(--voma-space-3);
  padding-left: var(--voma-space-5);
  font-size: 15px;
  line-height: 1.6;
  color: #1f2933;
}