/*
 * Vertragsseiten.
 *
 * Gilt fuer die beiden Agreements. Ein Vertrag wird gelesen, nicht
 * ueberflogen: enge Zeilenlaenge, ruhige Abstaende, eine Hierarchie, die
 * man beim Scrollen nicht verliert. Die Markenfarbe traegt hier keine
 * Flaeche, sie zeigt nur, wo ein Abschnitt beginnt und was ein Link ist.
 *
 * Alles liegt unter .awu-legal. Das Blatt wird global eingebunden, greift
 * aber nur dort - kein anderes Element der Seite sieht davon etwas.
 */

.awu-legal {
    --legal-marke: #452eb8;
    --legal-tinte: #1b1b22;
    --legal-linie: #e6e4f2;
    --legal-grund: #ffffff;

    padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 7vw, 96px);
    background: var(--legal-grund);
    color: var(--legal-tinte);
}

/*
 * Die Lesebreite.
 *
 * 68ch traegt ungefaehr achtzig Zeichen je Zeile - die Breite, ab der das
 * Auge den Zeilenanfang wiederfindet, ohne zu suchen. Der Rand darunter
 * haelt den Text auf schmalen Geraeten von der Kante weg; ohne ihn klebt
 * ein Vertrag bei 360 px am Displayrand.
 */
.awu-legal__inner {
    width: min(68ch, 100% - 2 * clamp(16px, 5vw, 40px));
    margin-inline: auto;
}

/* ---- Kopf ------------------------------------------------------------ */

.awu-legal__brand {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--legal-marke);
}

.awu-legal__title {
    margin: 0 0 clamp(24px, 4vw, 40px);
    padding-bottom: clamp(16px, 3vw, 24px);
    border-bottom: 2px solid var(--legal-marke);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ---- Hierarchie ------------------------------------------------------ */

/*
 * Der Abstand nach oben ist deutlich groesser als der nach unten. Eine
 * Ueberschrift gehoert zu dem, was unter ihr steht - steht sie in der
 * Mitte zwischen zwei Bloecken, muss man beim Lesen jedes Mal neu
 * entscheiden, wohin sie zeigt.
 */
.awu-legal__h2 {
    margin: clamp(36px, 5vw, 56px) 0 12px;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--legal-marke);
}

.awu-legal__h3 {
    margin: clamp(24px, 3.5vw, 32px) 0 8px;
    font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.14rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--legal-tinte);
}

.awu-legal p {
    margin: 0 0 1.05em;
    font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
    line-height: 1.75;
    /* Kein Blocksatz: ohne Silbentrennung reisst er in schmalen Spalten
       Luecken auf, die schlechter lesbar sind als eine flatternde Kante. */
    text-align: start;
}

.awu-legal strong { font-weight: 700; }
.awu-legal em     { font-style: italic; }

/* ---- Listen ---------------------------------------------------------- */

.awu-legal__list {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.awu-legal__list > li {
    position: relative;
    margin-bottom: 0.6em;
    padding-inline-start: 1.5em;
    font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
    line-height: 1.75;
}

/*
 * Der Punkt sitzt auf der Grundlinie der ersten Zeile, nicht auf der Mitte
 * des Absatzes: bei einem dreizeiligen Listenpunkt rutscht er sonst nach
 * unten weg.
 */
.awu-legal__list > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.35em;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--legal-marke);
}

/* ---- Tabelle --------------------------------------------------------- */

/*
 * Die Tabelle ist das einzige Element, das bei 360 px breiter werden kann
 * als die Spalte. Sie bekommt deshalb ihren eigenen Scrollbereich - so
 * scrollt sie, und nicht die ganze Seite.
 */
.awu-legal__tablewrap {
    margin: 0 0 1.6em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.awu-legal__table {
    width: 100%;
    min-width: 34ch;
    border-collapse: collapse;
    font-size: clamp(0.9rem, 0.87rem + 0.15vw, 0.98rem);
    line-height: 1.5;
}

.awu-legal__table th,
.awu-legal__table td {
    padding: 10px 14px;
    border: 1px solid var(--legal-linie);
    text-align: start;
    vertical-align: top;
}

.awu-legal__table thead th {
    background: color-mix(in srgb, var(--legal-marke) 7%, #fff);
    color: var(--legal-marke);
    font-weight: 700;
    white-space: nowrap;
}

.awu-legal__table tbody th {
    font-weight: 600;
}

.awu-legal__table tbody tr:nth-child(even) td,
.awu-legal__table tbody tr:nth-child(even) th {
    background: #faf9fe;
}

/* ---- Links und Fokus ------------------------------------------------- */

.awu-legal a {
    color: var(--legal-marke);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.awu-legal a:hover { text-decoration-thickness: 2px; }

/*
 * Sichtbarer Tastaturfokus. Der Ring liegt aussen und nimmt keinen Platz
 * im Fluss ein, sonst verschoebe sich beim Tabben der ganze Absatz.
 */
.awu-legal a:focus-visible {
    outline: 2px solid var(--legal-marke);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Druck ----------------------------------------------------------- */

/*
 * Ein Vertrag wird ausgedruckt und abgeheftet. Auf Papier traegt Farbe
 * nichts bei, und die Lesebreite des Bildschirms ist zu schmal.
 */
@media print {
    .awu-legal {
        padding: 0;
        color: #000;
    }

    .awu-legal__inner { width: 100%; }

    .awu-legal__title,
    .awu-legal__h2 { color: #000; }

    .awu-legal__title { border-bottom-color: #000; }

    .awu-legal__list > li::before { background: #000; }

    .awu-legal__h2,
    .awu-legal__h3 {
        /* Eine Ueberschrift allein am Seitenfuss ist eine verlorene Zeile. */
        break-after: avoid-page;
    }

    .awu-legal__tablewrap { overflow: visible; }

    .awu-legal a {
        color: #000;
        text-decoration: none;
    }
}