/*
 * ailh-legal-consol: Layout der Footer-Rechtslinks und Typografie der Rechtstexte.
 *
 * Warum eigene Klassen statt Tailwind-Utilities: Das Theme liefert eine VORKOMPILIERTE
 * Tailwind-Datei aus (public/build/assets/landing-page-*.css). Neue Utility-Klassen, die dort
 * nicht enthalten sind (z. B. sm:grid-cols-2, max-w-3xl), haetten schlicht keine Wirkung, weil
 * auf dem Server kein Asset-Build laeuft. Deshalb hier reines CSS mit eigenen Klassennamen.
 * Keine externen Schriften, kein Framework - Schriften werden lokal ausgeliefert.
 *
 * Farben werden bewusst NICHT gesetzt: die Bloecke erben Farbe und Font vom jeweiligen Footer,
 * damit sie in hellem (Panel) und dunklem (Landing/Blog) Kontext gleichermassen passen.
 */

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

.ailh-footer-legal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem 2rem;
    padding: 2rem 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: start;
}

/* Ab ca. 420px zwei Spalten - Tap-Targets bleiben breit genug. */
@media (min-width: 26.25em) {
    .ailh-footer-legal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet: zwei Spalten mit mehr Luft. */
@media (min-width: 48em) {
    .ailh-footer-legal {
        gap: 2rem 2.5rem;
        font-size: 0.9375rem;
    }
}

/* Desktop: alle vier Gruppen nebeneinander. */
@media (min-width: 64em) {
    .ailh-footer-legal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        font-size: 0.875rem;
    }
}

.ailh-footer-legal__group {
    min-width: 0;
}

.ailh-footer-legal__title {
    margin: 0 0 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ailh-footer-legal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ailh-footer-legal__list > li {
    margin: 0;
}

.ailh-footer-legal__list a {
    /* 44px Mindesthoehe fuer Tap-Targets auf Mobil (WCAG 2.5.8 / Apple HIG). */
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.125rem 0;
    /* Lange Bezeichnungen umbrechen statt die Seite breiter zu machen. */
    overflow-wrap: anywhere;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.ailh-footer-legal__list a:hover,
.ailh-footer-legal__list a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

/* Ab Tablet duerfen die Zeilen enger stehen - dort wird nicht mit dem Finger getippt. */
@media (min-width: 48em) {
    .ailh-footer-legal__list a {
        display: block;
        min-height: 0;
        padding: 0.28rem 0;
    }
}

/* ------------------------------------------------------------------ Rechtstext-Typografie */

.ailh-legal-article {
    /* ~70 Zeichen Zeilenlaenge: die Leseempfehlung fuer laufenden Text. */
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

@media (min-width: 48em) {
    .ailh-legal-article {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

.ailh-legal-article > *:first-child {
    margin-top: 0;
}

.ailh-legal-article h2 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 48em) {
    .ailh-legal-article h2 {
        font-size: 1.375rem;
    }
}

.ailh-legal-article h3,
.ailh-legal-article h4,
.ailh-legal-article h5 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.ailh-legal-article p {
    margin: 0 0 1rem;
}

.ailh-legal-article ul,
.ailh-legal-article ol {
    margin: 0 0 1.25rem;
    padding-inline-start: 1.4rem;
}

.ailh-legal-article ul {
    list-style: disc;
}

.ailh-legal-article ol {
    list-style: decimal;
}

.ailh-legal-article li {
    margin: 0 0 0.4rem;
}

.ailh-legal-article a {
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.ailh-legal-article strong {
    font-weight: 700;
}

.ailh-legal-article img {
    max-width: 100%;
    height: auto;
}

/* Breite Inhalte scrollen in sich selbst - die Seite scrollt nie horizontal. */
.ailh-legal-article table,
.ailh-legal-article pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Tabellen (z. B. Unterauftragsverarbeiter) duerfen die Lesespalte ueberragen. */
.ailh-legal-table {
    max-width: 100%;
    overflow-x: auto;
}

.ailh-legal-table table {
    min-width: 46rem;
}

/* Trennlinie im Kundenbereich - erbt die Textfarbe, funktioniert hell wie dunkel. */
.ailh-legal-sep {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.12;
}

/* ------------------------------------------------------------------ API-Hinweisabschnitt */
/*
 * ailh-feat 2026-07-31: Erklaerender Abschnitt ganz oben auf /api-bedingungen, der zur
 * technischen Referenz fuehrt (nur fuer Angemeldete, siehe legalcenter::public.show).
 *
 * Nicht offensichtlich: Die Akzentfarbe kommt aus der Theme-Variablen --primary. Das aktive
 * Theme setzt sie als HSL-TRIPEL ohne hsl()-Huelle (z. B. "16 82% 56%"), deshalb hier
 * hsl(var(--primary) / .45) und nicht var(--primary) direkt. Der Fallback im var() greift,
 * falls ein Theme die Variable nicht setzt - dann bleibt der Block neutralgrau statt unsichtbar.
 *
 * Der Abschnitt ist bewusst in normalem Fluss (kein flex auf der Wurzel): faellt das Stylesheet
 * aus, bleibt eine lesbare Ueberschrift mit Absatz, Liste und Link stehen - kein zerrissenes
 * Layout. Die Bildgroesse sichert zusaetzlich das width/height-Attribut am SVG selbst.
 */
.ailh-apibox {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.35rem 1.35rem;
    border: 1px solid hsl(var(--primary, 0 0% 50%) / 0.35);
    border-left-width: 4px;
    border-radius: 0.7rem;
    background: hsl(var(--primary, 0 0% 50%) / 0.06);
}

.ailh-apibox__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.ailh-apibox__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    background: hsl(var(--primary, 0 0% 50%) / 0.16);
    color: hsl(var(--primary, 0 0% 50%));
}

.ailh-apibox__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.ailh-apibox__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.ailh-apibox__text {
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.85;
}

.ailh-apibox__list {
    margin: 0 0 1.15rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.55;
    opacity: 0.85;
}

.ailh-apibox__list > li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.4rem;
}

/* Haken als Pseudo-Element - kein Icon-Font, keine zusaetzliche Anfrage. */
.ailh-apibox__list > li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.45rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: hsl(var(--primary, 0 0% 50%));
}

.ailh-apibox__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.5rem;
    background: hsl(var(--primary, 0 0% 50%));
    color: hsl(var(--primary-foreground, 0 0% 100%));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.ailh-apibox__cta:hover,
.ailh-apibox__cta:focus-visible {
    filter: brightness(0.92);
    color: hsl(var(--primary-foreground, 0 0% 100%));
}

.ailh-apibox__cta span {
    transition: transform 0.15s ease;
}

.ailh-apibox__cta:hover span,
.ailh-apibox__cta:focus-visible span {
    transform: translateX(0.15rem);
}

.ailh-apibox__note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.6;
}

/* Schmale Displays: etwas engere Polsterung, Schaltflaeche ueber die volle Breite. */
@media (max-width: 30em) {
    .ailh-apibox {
        padding: 1.05rem 1.05rem 1.15rem;
    }

    .ailh-apibox__title {
        font-size: 1.0625rem;
    }

    .ailh-apibox__text {
        font-size: 0.9rem;
    }

    .ailh-apibox__cta {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ailh-apibox__cta,
    .ailh-apibox__cta span {
        transition: none;
    }

    .ailh-apibox__cta:hover span,
    .ailh-apibox__cta:focus-visible span {
        transform: none;
    }
}