/* /rechnung-gestalten: Rechnungsdesigner als Angebot. Nur fuer diese
   Seite geladen (block kopf), baut auf app.css auf. */

.gestalten-held__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.gestalten-held__demo { min-width: 0; }
.gestalten-demo { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 40px rgba(11, 79, 108, .12); }

/* Bildschirmfotos im Rahmen */
.gestalten-bild { margin: 0; min-width: 0; }
.gestalten-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 12px; background: #fff; box-shadow: var(--schatten); }
.gestalten-bild figcaption { margin-top: 10px; font-size: .9rem; color: var(--text-leise); text-align: center; }
.gestalten-bild--gross { max-width: 1040px; margin: 0 auto 40px; }

/* Drei Wege und Karten mit Illustration */
.gestalten-wege .karte { display: flex; flex-direction: column; gap: 10px; }
.gestalten-wege h3 { margin: 4px 0 0; }
.gestalten-wege p { margin: 0; color: var(--text-leise); }
.gestalten-wege .symbol { width: 44px; height: 44px; border-radius: 12px; }
.gestalten-weiter { margin: 32px 0 6px; }
.gestalten-karten .karte { display: flex; flex-direction: column; padding-top: 0; overflow: hidden; }
.gestalten-karten img { display: block; width: calc(100% + 48px); max-width: none; height: auto; margin: 0 -24px 16px; aspect-ratio: 8 / 5; }
.gestalten-karten p { margin: 0; color: var(--text-leise); }

/* Zahlenleiste */
.gestalten-fakten { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gestalten-fakten li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; font-size: .95rem; color: var(--text-leise); }
.gestalten-fakten__zahl { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--blau); margin-bottom: 4px; }

/* Abschnitte mit Text und Bildschirmfoto nebeneinander, abwechselnd */
.gestalten-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.gestalten-reihe--links .gestalten-reihe__text { order: 2; }
.gestalten-reihe__text > :last-child { margin-bottom: 0; }
.gestalten-reihe__text h2 { margin-top: 0; }
.gestalten-reihe__illu { display: block; width: 200px; height: auto; margin: 0 0 18px; border-radius: 14px; }
.gestalten-schritte { padding-left: 1.3em; }
.gestalten-schritte li { margin-bottom: .45em; }

/* Vergleichstabelle: Vorteile per Klasse statt <strong> (Fettdruck nur einmal je Text) */
.vergleich { width: 100%; border-collapse: collapse; font-size: .97rem; margin-top: 8px; }
.vergleich th, .vergleich td { border-bottom: 1px solid var(--linie); padding: 10px 12px; text-align: left; vertical-align: top; }
.vergleich thead th { background: var(--flaeche); border-bottom: 2px solid var(--linie); }
.vergleich tbody th { font-weight: 600; white-space: nowrap; }
.vergleich td:last-child { background: rgba(232, 243, 247, .55); }
.vergleich__plus { color: var(--gruen); font-weight: 600; }

@media (max-width: 900px) {
    .gestalten-reihe { grid-template-columns: 1fr; gap: 28px; }
    .gestalten-reihe--links .gestalten-reihe__text { order: 0; }
    .gestalten-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .gestalten-reihe__illu { width: 160px; }
    .gestalten-fakten { grid-template-columns: 1fr; }
    /* Vergleich als Karten: drei Spalten passen nicht, je Zeile die Frage und
       darunter beide Seiten mit ihrer Beschriftung (data-label der Zellen) */
    .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; }
    .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vergleich tr { border-bottom: 1px solid var(--linie); padding: 10px 0 12px; }
    .vergleich th, .vergleich td { border-bottom: 0; padding: 4px 12px; }
    .vergleich tbody th { white-space: normal; }
    .vergleich td:last-child { margin-top: 6px; padding-top: 8px; padding-bottom: 8px; border-radius: 8px; }
    .vergleich td::before { content: attr(data-label); display: block; font-size: .85rem; font-weight: 600; color: var(--text-leise); }
}