/* =====================================================================================
 * Stillhalter Tracker - Verkaufsseite und Rechtsseiten, Optik im Stil von shadcn/ui
 * =====================================================================================
 *
 * WOFUER DIESE DATEI DA IST
 * landing.html und legal_base.html erben nicht von base.html, sie bringen ihr eigenes
 * Grundgeruest mit. Sie koennen deshalb static/css/theme.css nicht einfach mitbenutzen:
 * theme.css ist auf die eingeloggte Anwendung zugeschnitten (Navbar, Tabellen, DataTables,
 * Select2) und wird parallel weiterentwickelt. Diese Datei ist die eigenstaendige
 * Entsprechung fuer die oeffentlichen Seiten.
 *
 * Abschnitt 1 (Token) ist WORTGLEICH aus theme.css uebernommen. Damit sehen Verkaufsseite
 * und Anwendung nach dem Login gleich aus. Wenn sich die Palette in theme.css aendert,
 * muss sie hier nachgezogen werden.
 *
 * AUFBAU
 *   1. Token          - shadcn-Standardpalette (Zinc/Neutral), hell und dunkel
 *   2. Bootstrap-Bruecke - nur die Variablen, die die oeffentlichen Seiten wirklich nutzen
 *   3. Grundlagen     - Body, Typografie, Links
 *   4. Navigation     - obere Leiste, Hell/Dunkel-Schalter
 *   5. Buttons
 *   6. Hero
 *   7. Abschnitte     - Ueberschriften, Trennbaender
 *   8. Karten         - Feature-Karten
 *   9. Screenshots
 *  10. Preise
 *  11. FAQ
 *  12. Fusszeile
 *  13. Rechtsseiten   - Impressum, AGB, Datenschutz
 *
 * ACHTUNG BEIM AENDERN: nginx cacht /static/ 30 Tage. Nach jeder Aenderung an dieser Datei
 * den Parameter ?v=N in templates/landing.html UND templates/legal_base.html hochzaehlen.
 *
 * FARBSCHREIBWEISE: Die Token sind blosse HSL-Komponenten ("240 10% 3.9%"), keine fertigen
 * Farben - so lassen sie sich mit Transparenz verwenden: hsl(var(--foreground) / 0.05).
 * ===================================================================================== */


/* =====================================================================================
 * 1. TOKEN
 * ===================================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- shadcn-Standardpalette, Hellmodus --- */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 5% 38%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 6% 86%;
    --input: 240 6% 82%;
    --ring: 240 10% 3.9%;
    --radius: 0.5rem;

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* Semantische Zusatzfarben, gleiche Werte wie in der Anwendung. */
    --positive: 144 80% 29%;
    --negative: 0 82% 45%;
    --accent-green: 144 78% 29%;
    --accent-red: 0 82% 47%;
    --accent-blue: 221 83% 45%;
    --accent-orange: 28 92% 37%;
    --accent-teal: 190 90% 30%;
    --accent-purple: 271 65% 48%;

    --shadow-xs: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
    --shadow-sm: 0 1px 3px 0 hsl(var(--foreground) / 0.08), 0 1px 2px -1px hsl(var(--foreground) / 0.06);

    /* Nur auf den oeffentlichen Seiten: das ruhige Band, mit dem sich einzelne Abschnitte
       voneinander absetzen. Im Hellmodus genuegt --muted, im Dunkelmodus waere --muted zu
       hell fuer eine ganze Bildschirmbreite, deshalb ein eigener, dunklerer Wert. */
    --band: 240 4.8% 96.5%;
}

[data-bs-theme="dark"] {
    /* --- Dunkelmodus: identische Werte wie static/css/theme.css in der Anwendung ------------
     * Bewusst NICHT die rohe shadcn-Vorlage (dort ist --card gleich --background und
     * --border/--input/--muted/--accent derselbe Wert) - das ergibt eine flache Flaeche, auf
     * der sich Karten und Abschnitte nicht voneinander absetzen. Stattdessen dieselbe
     * gestufte Helligkeitsleiter wie in der eingeloggten Anwendung, damit der Uebergang von
     * der Verkaufsseite in die Anwendung nicht auffaellt:
     *   3.9 % Seitenhintergrund · 10 % Karten · 12 % schwebende Ebenen · 15 % ruhige Fuellung
     *   18 % Sekundaerflaeche · 20 % Raender · 22 % Hover · 26 % Feldraender
     * Bei Aenderungen hier IMMER theme.css mitziehen und umgekehrt. */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 6% 10%;
    --card-foreground: 0 0% 98%;
    --popover: 240 6% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 4% 18%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 4% 15%;
    /* 64.9 % (shadcn-Vorgabe) trifft auf --muted knapp 6:1 - fuer die vielen kleinen
       Sekundaertexte zu knapp, deshalb angehoben. */
    --muted-foreground: 240 5% 68%;
    --accent: 240 5% 22%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 5% 20%;
    --input: 240 5% 26%;
    --ring: 240 5% 72%;

    /* Weniger gesaettigt als die shadcn-Vorgabe, sonst leuchten Zahlen neongruen bzw. neonpink.
       Geprueft: Gruen 8,5:1 und Rot 5,5:1 gegen die Kartenflaeche. */
    --positive: 145 72% 50%;
    --negative: 2 88% 64%;
    --accent-green: 145 72% 50%;
    --accent-red: 2 88% 64%;
    --accent-blue: 217 95% 66%;
    --accent-orange: 32 100% 58%;
    --accent-teal: 189 90% 52%;
    --accent-purple: 271 85% 72%;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.45);

    --band: 240 6% 7.5%;
}


/* =====================================================================================
 * 2. BOOTSTRAP-BRUECKE
 * Die oeffentlichen Seiten nutzen von Bootstrap nur Raster, Navbar-Klappmenue, Container
 * und ein paar Hilfsklassen. Entsprechend kurz faellt die Bruecke aus.
 * ===================================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: hsl(var(--background));
    --bs-body-color: hsl(var(--foreground));
    --bs-emphasis-color: hsl(var(--foreground));
    --bs-heading-color: hsl(var(--foreground));
    --bs-secondary-color: hsl(var(--muted-foreground));
    --bs-secondary-bg: hsl(var(--secondary));
    --bs-tertiary-color: hsl(var(--muted-foreground));
    --bs-tertiary-bg: hsl(var(--muted));
    --bs-border-color: hsl(var(--border));
    --bs-border-color-translucent: hsl(var(--border));
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-link-color: hsl(var(--foreground));
    --bs-link-hover-color: hsl(var(--foreground));
    --bs-focus-ring-color: hsl(var(--ring) / 0.35);
    --bs-focus-ring-width: 3px;
}
:root, [data-bs-theme="light"] { --bs-body-color-rgb: 9, 9, 11; --bs-body-bg-rgb: 255, 255, 255; }
[data-bs-theme="dark"] { --bs-body-color-rgb: 250, 250, 250; --bs-body-bg-rgb: 9, 9, 11; }

.text-muted,
.text-secondary,
.text-body-secondary { color: hsl(var(--muted-foreground)) !important; }


/* =====================================================================================
 * 3. GRUNDLAGEN
 * ===================================================================================== */

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
}

a { color: hsl(var(--foreground)); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { color: hsl(var(--foreground)); text-decoration: underline; }

hr { border-color: hsl(var(--border)); opacity: 1; }

::selection { background: hsl(var(--foreground) / 0.12); }

*:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Schmale, unauffaellige Scrollbalken - wie in der Anwendung. */
* { scrollbar-color: hsl(var(--border)) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 9999px;
    border: 2px solid hsl(var(--background));
}
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }


/* =====================================================================================
 * 4. NAVIGATION
 * Frueher: milchige Glasleiste mit backdrop-filter. Jetzt: flache Flaeche, unten 1px Rand.
 * ===================================================================================== */

.site-nav {
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.75rem 0;
}
.site-nav .navbar-brand {
    color: hsl(var(--foreground));
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}
.site-nav .navbar-brand:hover { color: hsl(var(--foreground)); text-decoration: none; }
.site-nav .nav-link {
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
}
.site-nav .nav-link:hover { color: hsl(var(--foreground)); text-decoration: none; }
.site-nav .navbar-toggler {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    padding: 0.3rem 0.5rem;
    color: hsl(var(--foreground));
}
.site-nav .navbar-toggler:focus { box-shadow: none; }
/* Bootstrap liefert das Klappmenue-Symbol als Hintergrundbild in Schwarz. Statt es je nach
   Modus zu invertieren, wird hier ein Icon aus der Schriftart benutzt (siehe Markup). */
.site-nav .navbar-collapse { flex-grow: 0; }

.theme-toggle-landing {
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle-landing:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }


/* =====================================================================================
 * 5. BUTTONS
 * shadcn-Schema: gefuellt = --primary, sonst nur 1px Rand. Keine farbigen Schatten, keine
 * Schwebe-Effekte.
 * ===================================================================================== */

.btn-st {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.btn-st:hover { text-decoration: none; }

.btn-st-sm  { height: 2.25rem; padding: 0 0.85rem; font-size: 0.875rem; }
.btn-st-lg  { height: 2.75rem; padding: 0 1.5rem;  font-size: 0.95rem; }
.btn-st-block { width: 100%; }

.btn-st-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.btn-st-primary:hover {
    background: hsl(var(--primary) / 0.9);
    color: hsl(var(--primary-foreground));
}

.btn-st-outline {
    background: transparent;
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}
.btn-st-outline:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}


/* =====================================================================================
 * 6. HERO
 * Frueher zwei grosse farbige Lichtkegel im Hintergrund. Jetzt einfach die Grundflaeche.
 * ===================================================================================== */

.hero { padding: 6rem 0 4.5rem; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--secondary-foreground));
    font-size: 0.8rem; font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.hero h1 span { color: hsl(var(--foreground)); }

.hero p.lead {
    font-size: 1.075rem;
    color: hsl(var(--muted-foreground));
    max-width: 34rem;
    margin-top: 1.1rem;
}

.hero-cta { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }

.hero-screenshot {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    box-shadow: var(--shadow-sm);
}


/* =====================================================================================
 * 7. ABSCHNITTE
 * ===================================================================================== */

section { padding: 5rem 0; position: relative; }
section[id] { scroll-margin-top: 5rem; }

/* Ruhiges Band, um aufeinanderfolgende Abschnitte zu trennen. */
.section-band {
    background: hsl(var(--band));
    border-top: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
}

.section-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
}
.section-title {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 600; letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}
.section-sub {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    max-width: 38rem;
}


/* =====================================================================================
 * 8. KARTEN
 * ===================================================================================== */

.feature-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
    height: 100%;
    position: relative;
    transition: border-color 0.15s ease;
}
.feature-card:hover { border-color: hsl(var(--muted-foreground) / 0.45); }

/* Zwei Karten sind bewusst hervorgehoben (Vergleich manuell/automatisch, zwei
   Alleinstellungsmerkmale). Statt farbiger Schein-Schatten nur ein kraeftigerer Rand. */
.feature-card.is-highlight { border-color: hsl(var(--foreground) / 0.45); }
.feature-card.is-negative  { border-color: hsl(var(--accent-red) / 0.4); }
.feature-card.is-positive  { border-color: hsl(var(--accent-green) / 0.5); }

.feature-badge {
    position: absolute; top: -0.7rem; right: 1rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.01em;
}

.feature-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}
.feature-icon.blue   { background: hsl(var(--accent-blue) / 0.12);   color: hsl(var(--accent-blue)); }
.feature-icon.green  { background: hsl(var(--accent-green) / 0.12);  color: hsl(var(--accent-green)); }
.feature-icon.orange { background: hsl(var(--accent-orange) / 0.12); color: hsl(var(--accent-orange)); }
.feature-icon.red    { background: hsl(var(--accent-red) / 0.12);    color: hsl(var(--accent-red)); }

.feature-card h5 { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; }
.feature-card p  { color: hsl(var(--muted-foreground)); font-size: 0.9rem; margin: 0; }


/* =====================================================================================
 * 9. SCREENSHOTS
 * ===================================================================================== */

.screenshot-showcase img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    box-shadow: var(--shadow-xs);
}
.screenshot-label {
    font-size: 0.8rem; font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-top: 0.75rem; text-align: center;
}


/* =====================================================================================
 * 10. PREISE
 * Der Monats-/Jahres-Umschalter ist als Reiterleiste nach shadcn gestaltet: gedaempfte
 * Rinne, der aktive Reiter liegt als helle Flaeche darin.
 * ===================================================================================== */

.pricing-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}
.pricing-card.featured { border-color: hsl(var(--foreground) / 0.55); }
.pricing-card h4 { font-size: 1.125rem; font-weight: 600; }

.price { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; margin-top: 0.5rem; }
.price small { color: hsl(var(--muted-foreground)); font-weight: 400; letter-spacing: 0; }

.pricing-toggle {
    display: inline-flex;
    background: hsl(var(--muted));
    border-radius: var(--radius-md);
    padding: 0.2rem;
    margin: 1.25rem 0 0.25rem;
}
.pricing-toggle-btn {
    border: none; background: transparent;
    color: hsl(var(--muted-foreground));
    font-weight: 500; font-size: 0.85rem;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pricing-toggle-btn:hover { color: hsl(var(--foreground)); }
.pricing-toggle-btn.active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-xs);
}

.pricing-badge {
    display: inline-block; margin: 0.6rem 0 0;
    padding: 0.2rem 0.7rem;
    background: hsl(var(--accent-green) / 0.12);
    color: hsl(var(--accent-green));
    border: 1px solid hsl(var(--accent-green) / 0.25);
    border-radius: 9999px;
    font-size: 0.78rem; font-weight: 500;
}

.pricing-features { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.pricing-features li {
    padding: 0.55rem 0;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features .bi-check-circle-fill { color: hsl(var(--accent-green)); }
.pricing-features .bi-x-circle-fill { color: hsl(var(--accent-red)); }

.pricing-note { color: hsl(var(--muted-foreground)); font-size: 0.82rem; margin: 1rem 0 0; }


/* =====================================================================================
 * 11. FAQ
 * ===================================================================================== */

.faq-item {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.faq-item summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 500; font-size: 0.95rem;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 1.15rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    flex: none;
}
.faq-item[open] summary::after { content: '\2212'; /* Minuszeichen */ }
.faq-item summary:hover { background: hsl(var(--accent)); }
.faq-item .faq-body {
    padding: 0 1.25rem 1.1rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    line-height: 1.65;
}


/* =====================================================================================
 * 12. FUSSZEILE
 * ===================================================================================== */

.site-footer {
    border-top: 1px solid hsl(var(--border));
    padding: 3rem 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}
.site-footer a { color: hsl(var(--muted-foreground)); }
.site-footer a:hover { color: hsl(var(--foreground)); }
.site-footer strong { color: hsl(var(--foreground)); }


/* =====================================================================================
 * EINBLENDEN BEIM SCROLLEN
 * Bleibt erhalten, aber dezenter. Wer Bewegung abgeschaltet hat, sieht alles sofort.
 * ===================================================================================== */

.fade-up {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
}


/* =====================================================================================
 * 13. RECHTSSEITEN
 * Impressum, AGB, Datenschutz. Ruhige Typografie, eine Textspalte, keine Farbakzente.
 * ===================================================================================== */

.legal-content {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 6rem;
    line-height: 1.7;
}
.legal-content h1 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; margin-bottom: 0.5rem; }
.legal-content .updated {
    color: hsl(var(--muted-foreground));
    font-size: 0.85rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
}
.legal-content h2 {
    font-size: 1.15rem; font-weight: 600;
    margin-top: 2.5rem; margin-bottom: 0.6rem;
    color: hsl(var(--foreground));
}
.legal-content h3 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.legal-content p,
.legal-content li { color: hsl(var(--muted-foreground)); font-size: 0.95rem; }
.legal-content strong { color: hsl(var(--foreground)); font-weight: 600; }
.legal-content a { color: hsl(var(--foreground)); text-decoration: underline; }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.35rem; }

/* Hervorgehobener Kasten, z.B. die Widerrufsbelehrung in den AGB. */
.legal-box {
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.25rem;
}

.legal-content table {
    width: 100%;
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    border-collapse: collapse;
}
.legal-content table th,
.legal-content table td {
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.5rem 0.75rem 0.5rem 0;
    text-align: left;
    vertical-align: top;
}
.legal-content table th { color: hsl(var(--foreground)); font-weight: 500; }

/* Platzhalter-Auszeichnung aus dem alten Entwurf. */
.legal-content .placeholder {
    background: hsl(var(--accent-orange) / 0.12);
    border: 1px solid hsl(var(--accent-orange) / 0.3);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    color: hsl(var(--accent-orange));
    font-weight: 500;
    opacity: 1;
}