/* ==========================================================================
   Kanzlei Mag. Edmund Hueber · Steuer-Virtuose
   Gemeinsames Design (Webseite + Login-Server)
   Leitbild: Visitenkarte - cremefarbenes Papier, Gold/Messing, Serifenschrift.
   ========================================================================== */

/* ---- Schriften (selbst gehostet, SIL Open Font License) ---- */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../schriften/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../schriften/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../schriften/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/source-sans-3-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../schriften/source-sans-3-latin-600-normal.woff2") format("woff2");
}

/* ---- Design-Tokens ---- */
:root {
    /* Papier */
    --farbe-papier: #f6f1e7;
    --farbe-papier-hell: #fbf8f2;
    --farbe-papier-tief: #ece4d4;
    --farbe-rand: #ddd2bd;

    /* Gold / Messing: --farbe-gold nur fuer Linien, Rahmen und grosse Schrift (>= 24 px),
       --farbe-gold-text fuer Text in normaler Groesse (Kontrast >= 4.5:1 auf Papier). */
    --farbe-gold: #a8823c;
    --farbe-gold-hell: #c9a96a;
    --farbe-gold-text: #75561d;
    --farbe-gold-tief: #5f4615;

    /* Text / Kontrast (Navy-Anthrazit) */
    --farbe-tinte: #1e2733;
    --farbe-tinte-sanft: #485261;

    /* Zustaende */
    --farbe-fehler: #9b2c1f;
    --farbe-fehler-grund: #f8e6e1;
    --farbe-erfolg: #2f5d36;
    --farbe-erfolg-grund: #e5efe2;
    --farbe-hinweis-grund: #f3ead2;
    --farbe-offen: #fff1a8;
    --farbe-fokus: #1e4d8c;

    /* Schriften */
    --schrift-serif: "Cormorant Garamond", "Garamond", "Georgia", "Times New Roman", serif;
    --schrift-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Masse */
    --breite-inhalt: 72rem;
    --breite-text: 42rem;
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 1rem;
    --abstand-4: 1.5rem;
    --abstand-5: 2.5rem;
    --abstand-6: 4rem;
    --abstand-7: 6rem;
    --radius: 3px;
    --schatten-karte: 0 1px 2px rgba(30, 39, 51, .06), 0 8px 24px rgba(30, 39, 51, .06);
}

/* ---- Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--farbe-papier);
    color: var(--farbe-tinte);
    font-family: var(--schrift-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-kerning: normal;
}

main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .serif {
    font-family: var(--schrift-serif);
    font-weight: 600;
    line-height: 1.15;
    color: var(--farbe-tinte);
    letter-spacing: .005em;
}
h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); margin: 0 0 var(--abstand-4); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem); margin: var(--abstand-6) 0 var(--abstand-3); }
h3 { font-size: 1.45rem; margin: var(--abstand-5) 0 var(--abstand-2); }
p, ul, ol, dl { margin: 0 0 var(--abstand-3); }

a { color: var(--farbe-gold-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--farbe-gold-tief); text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--farbe-fokus);
    outline-offset: 2px;
    border-radius: 2px;
}

.visuell-versteckt {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.sprunglink {
    position: absolute;
    left: var(--abstand-3);
    top: -4rem;
    z-index: 10;
    padding: var(--abstand-2) var(--abstand-3);
    background: var(--farbe-tinte);
    color: #fff;
}
.sprunglink:focus { top: var(--abstand-2); color: #fff; }

.container {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: var(--abstand-4);
}
.text-breite { max-width: var(--breite-text); }

/* Platzhalter fuer offene Angaben: bewusst auffaellig */
mark.offen {
    background: var(--farbe-offen);
    color: #4a3b00;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .85em;
    padding: .05em .35em;
    border: 1px dashed #b39500;
    border-radius: 2px;
}

/* ---- Wortmarke ---- */
.wortmarke {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--farbe-tinte);
    gap: .2rem;
    padding-block: var(--abstand-2);
}
.wortmarke:hover { color: var(--farbe-tinte); }
.wortmarke-name {
    font-family: var(--schrift-sans);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--farbe-gold-text);
}
.wortmarke-linie {
    width: 2.25rem;
    height: 1px;
    background: var(--farbe-gold);
}
.wortmarke-marke {
    font-family: var(--schrift-serif);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: .04em;
    line-height: 1;
}

/* ---- Notenlinien (Musikmotiv) ---- */
.notenlinien {
    display: grid;
    gap: 5px;
    width: 100%;
    max-width: 14rem;
    margin: var(--abstand-4) 0;
}
.notenlinien span { display: block; height: 1px; background: var(--farbe-gold-hell); opacity: .75; }
.notenlinien-mitte { margin-inline: auto; }
.notenlinien-fuss { max-width: none; margin: 0 0 var(--abstand-5); }
.notenlinien-fuss span { opacity: .45; }

/* ---- Kopf ---- */
.kopf {
    background: var(--farbe-papier-hell);
    border-bottom: 1px solid var(--farbe-rand);
    position: relative;
    z-index: 5;
}
.kopf-innen {
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding: var(--abstand-2) var(--abstand-4);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--abstand-3);
}
.kopf .wortmarke { margin-right: auto; }

.kopf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--abstand-1) var(--abstand-4); }
.kopf-nav a {
    display: inline-block;
    padding: var(--abstand-2) 0;
    color: var(--farbe-tinte);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.kopf-nav a:hover { border-bottom-color: var(--farbe-gold); }
.kopf-nav a.active, .kopf-nav a[aria-current="page"] { border-bottom-color: var(--farbe-gold); color: var(--farbe-gold-tief); }

.kopf-nav-breit { display: none; }
.kopf-menue { order: 3; width: 100%; }
.kopf-menue > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    padding: var(--abstand-2) 0;
    font-weight: 600;
}
.kopf-menue > summary::-webkit-details-marker { display: none; }
.kopf-menue-symbol, .kopf-menue-symbol::before, .kopf-menue-symbol::after {
    display: block; width: 1.25rem; height: 1px; background: var(--farbe-tinte); position: relative;
}
.kopf-menue-symbol::before, .kopf-menue-symbol::after { content: ""; position: absolute; left: 0; }
.kopf-menue-symbol::before { top: -6px; }
.kopf-menue-symbol::after { top: 6px; }
.kopf-menue .kopf-nav ul { flex-direction: column; padding-bottom: var(--abstand-3); }
.kopf-aktion { display: flex; align-items: center; gap: var(--abstand-3); }

@media (min-width: 52rem) {
    .kopf-innen { flex-wrap: nowrap; padding-block: var(--abstand-3); gap: var(--abstand-5); }
    .kopf-menue { display: none; }
    .kopf-nav-breit { display: block; }
}

/* ---- Knoepfe ---- */
.knopf, button.knopf, input[type="submit"].knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    min-height: 2.75rem;
    padding: .55rem 1.35rem;
    font: 600 1rem/1.2 var(--schrift-sans);
    letter-spacing: .03em;
    color: #fff;
    background: var(--farbe-tinte);
    border: 1px solid var(--farbe-tinte);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopf:hover { background: #2d3a4b; color: #fff; }
.knopf-gold { background: var(--farbe-gold-tief); border-color: var(--farbe-gold-tief); }
.knopf-gold:hover { background: #4b370f; }
.knopf-rand { background: transparent; color: var(--farbe-tinte); border-color: var(--farbe-gold); }
.knopf-rand:hover { background: var(--farbe-papier-tief); color: var(--farbe-tinte); }
.knopf-gefahr { background: var(--farbe-fehler); border-color: var(--farbe-fehler); }
.knopf-gefahr:hover { background: #7d2318; }
.knopf-klein { min-height: 2.25rem; padding: .35rem .9rem; font-size: .92rem; }

/* ---- Abschnitte ---- */
.abschnitt { padding-block: var(--abstand-6); }
.abschnitt-hell { background: var(--farbe-papier-hell); border-block: 1px solid var(--farbe-rand); }
.abschnitt > .container > h2:first-child { margin-top: 0; }

.ueberzeile {
    font-family: var(--schrift-sans);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--farbe-gold-text);
    margin-bottom: var(--abstand-2);
}
.goldlinie {
    width: 3.5rem;
    height: 1px;
    background: var(--farbe-gold);
    border: 0;
    margin: var(--abstand-4) 0;
}
.goldlinie-mitte { margin-inline: auto; }
.einleitung { font-size: 1.2rem; color: var(--farbe-tinte-sanft); max-width: var(--breite-text); }

/* ---- Startseite: Buehne ---- */
.buehne { padding-block: var(--abstand-5) var(--abstand-6); }
.buehne-raster { display: grid; gap: var(--abstand-5); align-items: center; }
.buehne h1 { margin-bottom: var(--abstand-2); }
.buehne-titel { font-size: 1.05rem; letter-spacing: .02em; color: var(--farbe-tinte-sanft); margin: 0; }
.slogan {
    font-family: var(--schrift-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    line-height: 1.25;
    color: var(--farbe-gold-tief);
    margin: var(--abstand-4) 0;
}
.buehne-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin-top: var(--abstand-4); }
.foto {
    margin: 0;
    background: var(--farbe-papier-hell);
    padding: .6rem;
    border: 1px solid var(--farbe-rand);
    box-shadow: var(--schatten-karte);
}
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.foto figcaption { font-size: .85rem; color: var(--farbe-tinte-sanft); padding: .5rem .2rem 0; }

@media (min-width: 60rem) {
    .buehne { padding-block: var(--abstand-6) var(--abstand-7); }
    .buehne-raster { grid-template-columns: 1fr 1.1fr; gap: var(--abstand-6); }
}

/* ---- Karten / Raster ---- */
.raster { display: grid; gap: var(--abstand-4); }
@media (min-width: 40rem) { .raster-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .raster-3 { grid-template-columns: repeat(3, 1fr); } .raster-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40rem) and (max-width: 59.99rem) { .raster-3, .raster-4 { grid-template-columns: repeat(2, 1fr); } }

.karte {
    background: var(--farbe-papier-hell);
    border: 1px solid var(--farbe-rand);
    border-top: 2px solid var(--farbe-gold);
    padding: var(--abstand-4);
    border-radius: var(--radius);
}
.karte h3 { margin-top: 0; }
.karte p:last-child, .karte ul:last-child { margin-bottom: 0; }
a.karte { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
a.karte:hover { box-shadow: var(--schatten-karte); transform: translateY(-1px); color: inherit; }
a.karte .karte-weiter { color: var(--farbe-gold-text); font-weight: 600; }

.liste-takt { list-style: none; padding: 0; }
.liste-takt li { position: relative; padding-left: 1.4rem; margin-bottom: var(--abstand-2); }
.liste-takt li::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: .55rem; height: 1px;
    background: var(--farbe-gold);
}

/* Werdegang (Über mich): Zeitraum links, Station rechts; auf dem Handy untereinander. */
.werdegang { display: grid; grid-template-columns: 11rem 1fr; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-4); }
.werdegang dt { color: var(--farbe-gold-text); font-variant-numeric: tabular-nums; padding-top: .1em; }
.werdegang dd { margin: 0 0 var(--abstand-2); padding-left: var(--abstand-3); border-left: 1px solid var(--farbe-gold-hell); }
@media (max-width: 40rem) {
    .werdegang { grid-template-columns: 1fr; gap: 0; }
    .werdegang dt { margin-top: var(--abstand-3); }
}

.kontakt-leiste { display: flex; flex-wrap: wrap; gap: var(--abstand-3) var(--abstand-5); align-items: baseline; }
.kontakt-leiste a { font-size: 1.15rem; font-weight: 600; }

/* ---- Textseiten (Impressum, Datenschutz) ---- */
.textseite { padding-block: var(--abstand-5) var(--abstand-6); }
.textseite .container > * { max-width: var(--breite-text); }
.textseite h2 { font-size: 1.7rem; margin-top: var(--abstand-5); }
.textseite dl { display: grid; grid-template-columns: 1fr; gap: 0 var(--abstand-4); }
.textseite dt { font-weight: 600; margin-top: var(--abstand-2); }
.textseite dd { margin: 0; }
@media (min-width: 40rem) {
    .textseite dl { grid-template-columns: 14rem 1fr; }
    .textseite dt { margin-top: 0; }
    .textseite dt, .textseite dd { padding-block: .35rem; border-bottom: 1px solid var(--farbe-rand); }
}

/* ---- Formulare ---- */
.formular { display: grid; gap: var(--abstand-4); max-width: var(--breite-text); }
.feld { display: grid; gap: var(--abstand-1); }
.feld label, .feld legend { font-weight: 600; }
.feld .feld-hilfe { font-size: .9rem; color: var(--farbe-tinte-sanft); }
.pflicht { color: var(--farbe-fehler); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], select, textarea {
    width: 100%;
    font: inherit;
    color: var(--farbe-tinte);
    background: #fff;
    border: 1px solid #b9ad97;
    border-radius: var(--radius);
    padding: .6rem .75rem;
    min-height: 2.75rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--farbe-fokus); }
input.invalid, select.invalid, textarea.invalid, [aria-invalid="true"] { border-color: var(--farbe-fehler); }
.validation-message, .feld-fehler { color: var(--farbe-fehler); font-size: .95rem; }
.validation-errors { color: var(--farbe-fehler); padding-left: 1.2rem; }
.checkbox { display: flex; gap: var(--abstand-2); align-items: flex-start; }
.checkbox input { width: 1.2rem; height: 1.2rem; margin-top: .25rem; flex: none; accent-color: var(--farbe-gold-tief); }
.code-eingabe { font-size: 1.5rem !important; letter-spacing: .3em; max-width: 12rem; text-align: center; font-variant-numeric: tabular-nums; }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
    padding: var(--abstand-3) var(--abstand-4);
    border-left: 3px solid var(--farbe-gold);
    background: var(--farbe-hinweis-grund);
    border-radius: var(--radius);
    margin-bottom: var(--abstand-4);
}
.meldung p:last-child { margin-bottom: 0; }
.meldung-fehler { border-left-color: var(--farbe-fehler); background: var(--farbe-fehler-grund); }
.meldung-erfolg { border-left-color: var(--farbe-erfolg); background: var(--farbe-erfolg-grund); }

/* ---- Tabellen ---- */
.tabelle-huelle { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabelle th, .tabelle td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }
.tabelle th { font-weight: 600; color: var(--farbe-tinte-sanft); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.etikett {
    display: inline-block; font-size: .8rem; padding: .05rem .45rem; border-radius: 999px;
    border: 1px solid var(--farbe-rand); background: var(--farbe-papier); white-space: nowrap;
}
.etikett-aus { color: var(--farbe-fehler); border-color: #e1b6ad; }
.etikett-gold { color: var(--farbe-gold-tief); border-color: var(--farbe-gold-hell); }

/* ---- Fuss ---- */
.fuss {
    flex-shrink: 0;
    margin-top: var(--abstand-6);
    padding: 0 0 var(--abstand-4);
    background: var(--farbe-papier-tief);
    border-top: 1px solid var(--farbe-rand);
    font-size: .95rem;
}
.fuss-innen {
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: var(--abstand-4);
    display: grid;
    gap: var(--abstand-4);
}
@media (min-width: 52rem) { .fuss-innen { grid-template-columns: repeat(3, 1fr); } }
.fuss p, .fuss address { margin: 0 0 var(--abstand-2); font-style: normal; }
.fuss-name { font-family: var(--schrift-serif); font-weight: 600; font-size: 1.3rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); }
.fuss-zeile {
    max-width: var(--breite-inhalt);
    margin: var(--abstand-5) auto 0 !important;
    padding: var(--abstand-3) var(--abstand-4) 0;
    border-top: 1px solid var(--farbe-rand);
    color: var(--farbe-tinte-sanft);
    font-size: .88rem;
}
.fuss-slogan { font-family: var(--schrift-serif); font-style: italic; font-size: 1.05rem; }

/* ---- Anmelde-/Kontoseiten (Login-Server) ---- */
.anmeldung { padding-block: var(--abstand-5) var(--abstand-6); }
.anmeldung-karte {
    max-width: 30rem;
    margin-inline: auto;
    background: var(--farbe-papier-hell);
    border: 1px solid var(--farbe-rand);
    box-shadow: var(--schatten-karte);
    padding: var(--abstand-5) var(--abstand-4);
    border-radius: var(--radius);
}
@media (min-width: 40rem) { .anmeldung-karte { padding: var(--abstand-5); } }
.anmeldung-karte h1 { font-size: 2.1rem; text-align: center; margin-bottom: var(--abstand-2); }
.anmeldung-karte .goldlinie { margin-inline: auto; margin-block: var(--abstand-3) var(--abstand-4); }
.anmeldung-karte .formular { max-width: none; }
.anmeldung-karte .knopf { width: 100%; }
.anmeldung-breit { max-width: 46rem; }
.qr-code { background: #fff; padding: .75rem; border: 1px solid var(--farbe-rand); width: 13rem; margin: var(--abstand-3) auto; }
.qr-code svg { width: 100%; height: auto; display: block; }
.schluessel { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; background: #fff; padding: .4rem .6rem; border: 1px dashed var(--farbe-rand); }
.codes { columns: 2; font-family: ui-monospace, Menlo, Consolas, monospace; list-style: none; padding: var(--abstand-3); background: #fff; border: 1px dashed var(--farbe-rand); }

.portal-kacheln { display: grid; gap: var(--abstand-4); margin-top: var(--abstand-4); }
@media (min-width: 40rem) { .portal-kacheln { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.kachel-symbol { font-family: var(--schrift-serif); font-size: 2.4rem; line-height: 1; color: var(--farbe-gold); margin-bottom: var(--abstand-2); }

.aktionsleiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.aktionsleiste form { margin: 0; }
.inline-formular { display: inline; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .kopf-nav, .kopf-menue, .kopf-aktion, .sprunglink, .notenlinien { display: none !important; }
    body { background: #fff; }
}

/* ---- Feinschliff ---- */
h1:focus, main:focus { outline: none; }
address { font-style: normal; }
address.serif { font-size: 1.35rem; line-height: 1.35; }
.ueberzeile + h1, .ueberzeile + h2 { margin-top: 0; }
input:not([type]) {
    width: 100%; font: inherit; color: var(--farbe-tinte); background: #fff;
    border: 1px solid #b9ad97; border-radius: var(--radius); padding: .6rem .75rem; min-height: 2.75rem;
}
.checkbox label { font-weight: 400; }
.kontakt-raster { display: grid; gap: var(--abstand-5); }
.kontakt-raster > aside { font-size: 1rem; }
.kontakt-raster h2 { margin-top: 0; }
@media (min-width: 60rem) {
    .textseite .container > .kontakt-raster { max-width: none; grid-template-columns: 18rem 1fr; gap: var(--abstand-6); }
}
.h3 { font-size: 1.45rem; margin: 0 0 var(--abstand-2); }
.ueberzeile a { color: inherit; }
/* Varianten muessen auch auf <button class="knopf ..."> greifen */
.knopf.knopf-gold { background: var(--farbe-gold-tief); border-color: var(--farbe-gold-tief); color: #fff; }
.knopf.knopf-gold:hover { background: #4b370f; }
.knopf.knopf-rand { background: transparent; color: var(--farbe-tinte); border-color: var(--farbe-gold); }
.knopf.knopf-rand:hover { background: var(--farbe-papier-tief); color: var(--farbe-tinte); }
.knopf.knopf-gefahr { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: #fff; }
.anmeldung-karte > .ueberzeile { text-align: center; }
.anmeldung-karte .aktionsleiste .knopf, .anmeldung-karte p > .knopf { width: auto; }