/*
 * Vorsteuer-/Umsatzsteuer-Seite: die Trennung zwischen Wissensteil und
 * Übungsteil.
 *
 * Die Seite bedient zwei Absichten, die nichts miteinander zu tun haben. Wer
 * aus dem Footer oder aus einem „nochmal nachlesen" eines Arbeitsblatts kommt,
 * will lesen. Wer über die Suche nach „umsatzsteuer buchungen üben" kommt, will
 * rechnen. Beide sollen auf einen Blick sehen, wo ihr Teil anfängt und wo er
 * aufhört — ineinandergeschobene Abschnitte hätten beide verloren.
 *
 * Getrennt wird deshalb dreifach: durch eine Wegweiserzeile ganz oben, durch
 * einen beschrifteten Trennstreifen zwischen den Teilen und durch einen eigenen
 * Untergrund für den Übungsteil.
 *
 * Eigene Datei und keine Ergänzung in css/seo-landing.css: Diese Regeln
 * gehören einer Seite, und seo-landing.css trägt Dutzende, darunter welche
 * unter laufender Messung.
 *
 * KLASSENNAMEN mit dem Präfix ustseite- und ohne die Wortbestandteile card,
 * hero, kicker, label, lead, row, panel, section, list, chip, btn oder cta:
 * styles.css und exercise-hb-shell.css fangen solche Namen mit über 300
 * Substring-Selektoren ungefragt ein.
 */

/* ------------------------------------------------------- Wegweiser oben */

.ustseite-wegweiser {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ustseite-wegweiser li { margin: 0; }

.ustseite-wegweiser a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--kh-border, #dad3c2);
    background: var(--kh-paper-light, #fbf8ef);
    color: var(--kh-ink, #23201b);
    text-decoration: none;
}

.ustseite-wegweiser a:hover,
.ustseite-wegweiser a:focus-visible {
    border-color: var(--kh-terra, #b0492c);
    color: var(--kh-terra, #b0492c);
}

.ustseite-wegweiser strong {
    display: block;
    font-size: 1rem;
}

.ustseite-wegweiser small {
    display: block;
    margin-top: 2px;
    color: var(--kh-ink-mid, #6e6757);
    font-size: 0.82rem;
}

/* --------------------------------------------------------- Trennstreifen */

.ustseite-trenner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 44px 0 24px;
}

.ustseite-trenner::before,
.ustseite-trenner::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--kh-border, #dad3c2);
}

.ustseite-trenner span {
    flex: none;
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kh-ink-muted, #746d5f);
}

/* ------------------------------------------------------- Die zwei Teile */

/* Der Wissensteil bleibt auf dem Papier der Seite — er ist der Normalfall. */
.ustseite-wissen > h2:first-child { margin-top: 0; }

/* ---------------------------------------------- Das Übungsfeld als Extra

   Der Übungsteil sah zuerst aus wie ein weiterer Abschnitt der Seite: heller
   Untergrund, dünne Linie, eine kleine Marke darüber. Er ist aber etwas
   anderes als der Text darunter — man kann darin arbeiten. Deshalb jetzt ein
   kräftiger Rahmen, ein liniierter Untergrund wie auf einem Arbeitsblatt und
   eine Marke, die auf dem Rahmen sitzt statt darunter.

   Die Linien sind dieselben, mit denen die Wissensseiten ihren Hero
   unterlegen (knowledge-hb.css) — der Block wirkt dadurch wie ein Blatt
   Papier, das auf der Seite liegt, und nicht wie ein fremdes Element.

   KEIN GRÜN. Die Marke und der Kontoblock waren zuerst in Oliv (--kh-oliv,
   #5e7a4f). Nachgerechnet trägt dieser Ton als Textfarbe nicht: auf dem
   hellen Blockgrund nur 4,23:1, nötig sind 4,5. Auch als Fläche unter
   Papierschrift kam er mit 4,60:1 gerade eben durch. Jetzt tragen Terra
   (4,89:1 als Text, 5,25:1 als Fläche) und Tinte (15,55:1) die Akzente —
   dieselben zwei Farben, die die Seite ohnehin führt. */

.ustseite-ueben {
    position: relative;
    margin-top: 14px;
    padding: 34px clamp(16px, 3vw, 30px) 30px;
    border: 2px solid var(--kh-ink, #23201b);
    background-color: #FCFAF4;
    background-image: repeating-linear-gradient(#eee7d6 0 1px, transparent 1px 28px);
    background-position: 0 10px;
}

.ustseite-ueben > h2:first-of-type { margin-top: 0; }

/* Die Marke sitzt auf der oberen Rahmenlinie und unterbricht sie. Damit liest
   sich der Kasten als etwas Aufgesetztes und nicht als nächster Absatz. */
.ustseite-marke {
    position: absolute;
    top: 0;
    left: clamp(16px, 3vw, 30px);
    transform: translateY(-50%);
    margin: 0;
    padding: 4px 11px;
    background: var(--kh-terra, #b0492c);
    color: #FCFAF4;
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* --------------------------------------------- Was der Drill kann */

.ustseite-koennen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ustseite-koennen li {
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--kh-border, #dad3c2);
    background: #FCFAF4;
}

.ustseite-koennen strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--kh-serif, 'Lora', Georgia, serif);
    font-size: 1rem;
}

.ustseite-koennen p {
    margin: 0;
    color: var(--kh-ink-mid, #6e6757);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* --------------------------------------------------- Der Kontowunsch

   Vorher standen hier drei gleich aussehende Knöpfe, und der lauteste davon
   führte Abgemeldete geradewegs auf die Anmeldeseite. Jetzt ist es ein eigener
   Block, den der Knopf trägt: Tinte, also die dunkelste Farbe der Seite und
   damit die ruhigste zugleich lauteste Fläche. Die Akzente sind Terra. Ein
   Knopf ist gross, alles andere daneben klein. */

.ustseite-konto {
    margin: 26px 0 0;
    padding: 20px clamp(16px, 2.6vw, 24px) 22px;
    border: 1px solid var(--kh-border, #dad3c2);
    border-left: 6px solid var(--kh-terra, #b0492c);
    background: rgba(176, 73, 44, 0.05);
}

.ustseite-konto-marke {
    margin: 0 0 4px;
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--kh-terra, #b0492c);
}

.ustseite-konto h3 {
    margin: 0 0 8px;
    font-family: var(--kh-serif, 'Lora', Georgia, serif);
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--kh-ink, #23201b);
}

.ustseite-konto-text {
    margin: 0;
    max-width: 62ch;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--kh-ink-mid, #6e6757);
}

.ustseite-konto-punkte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ustseite-konto-punkte li {
    margin: 0;
    padding-left: 18px;
    position: relative;
    font-size: 0.86rem;
    color: var(--kh-ink, #23201b);
}

.ustseite-konto-punkte li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--kh-terra, #b0492c);
    font-weight: 700;
}

.ustseite-konto-aktion {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin: 16px 0 0;
}

/* Der eine grosse Knopf. Grösser als jeder andere Knopf auf der Seite, damit
   die Rangfolge ohne Nachdenken erkennbar ist. */
.ustseite-konto-knopf {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 26px;
    background: var(--kh-ink, #23201b);
    color: #FCFAF4;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease;
}

.ustseite-konto-knopf:hover,
.ustseite-konto-knopf:focus-visible {
    background: var(--kh-terra, #b0492c);
    color: #FCFAF4;
}

.ustseite-konto-dazu {
    font-size: 0.88rem;
    color: var(--kh-ink-mid, #6e6757);
}

.ustseite-konto-dazu a {
    color: var(--kh-terra, #b0492c);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Der Nebenweg bleibt ein Verweis und wird nicht zum Knopf: Sonst stünde er in
   derselben Reihe wie das Angebot und nähme ihm die Aufmerksamkeit. */
.ustseite-nebenweg {
    margin: 14px 0 0;
    font-size: 0.88rem;
}

.ustseite-nebenweg a {
    color: var(--kh-ink-mid, #6e6757);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ustseite-nebenweg a:hover { color: var(--kh-terra, #b0492c); }

@media (max-width: 560px) {
    .ustseite-wegweiser a { padding: 11px 13px; }
    .ustseite-trenner { margin: 32px 0 20px; }
}