/* ===========================================================
   WebMount Portal — Gestaltung „Kontobuch“, Teil 2
   Seiten: Übersicht, Eingang, Google, Admin, Anmelden, Handy, Druck
   =========================================================== */

/* ---------- Übersicht: Raster ---------- */
.ueb { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "konto herkunft" "konto besuche" "verlauf eingang" "seiten google" "erkl erkl"; }
.ueb > .konto { grid-area: konto; }
.ueb > .herkunft { grid-area: herkunft; }
.ueb > .besuche { grid-area: besuche; }
.ueb > .verlauf { grid-area: verlauf; }
.ueb > .eingang { grid-area: eingang; }
.ueb > .seiten { grid-area: seiten; }
.ueb > .google { grid-area: google; }
.ueb > .erklaerung { grid-area: erkl; }
.ueb > .schnell, .gruss__monat { display: none; }
.ueb--ohne-google { grid-template-areas: "konto herkunft" "konto besuche" "verlauf eingang" "seiten seiten" "erkl erkl"; }
.ueb > .verlauf { display: flex; flex-direction: column; }

/* Anfragen-Karte */
.konto { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 22px; padding: 24px 28px; background: linear-gradient(140deg, #0A2152 0%, #0F3278 52%, #1A55D6 100%); display: flex; flex-direction: column; min-height: 280px; }
.konto__kreis { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255,255,255,.06); z-index: -1; }
.konto__zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); }
.konto__betrag { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.konto__betrag b { font-size: 84px; font-weight: 800; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.konto__betrag span { font-size: 21px; font-weight: 700; color: rgba(255,255,255,.82); }
.konto__veraend { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); padding: 4px 11px 4px 8px; border-radius: 20px; font-size: 13px; font-weight: 700; color: #fff; }
.konto__aufteil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.konto__aufteil a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; color: #fff; border-radius: var(--r-klein); padding: 4px 6px; margin: -4px -6px; }
.konto__aufteil a:hover { background: rgba(255,255,255,.08); color: #fff; }
.konto__aufteil .ico { grid-row: span 2; color: rgba(255,255,255,.7); }
.konto__aufteil b { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.konto__aufteil span { font-size: 12.5px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ql__i b i { font-style: normal; font-weight: 500; color: var(--leise); margin-right: 10px; }

/* Besuche */
.zahlgross { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.unterzeile { font-size: 13px; color: var(--leise); margin-top: 8px; }
.unterzeile b { color: var(--ink); }
.zweispalt { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.funke { flex: none; display: block; }

/* Verlauf */
.umschalter { margin-left: auto; display: inline-flex; background: var(--kachel); border-radius: 8px; padding: 3px; }
.umschalter button { border: 0; background: none; padding: 4px 10px; font-size: 12.5px; font-weight: 700; color: var(--leise); border-radius: 6px; cursor: pointer; }
.umschalter button.an { background: var(--weiss); color: var(--ink); box-shadow: 0 0 0 1px var(--linie); }
.diagramm { min-height: 220px; flex: 1; }
.diagramm svg { display: block; overflow: visible; }
.legende { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--leise); margin-top: 8px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.farbe-grau { background: #D5DAE3; } .farbe-navy { background: var(--navy); } .farbe-blau { background: var(--blau); }

/* Google */
.gzahlen { display: flex; gap: 12px 32px; flex-wrap: wrap; }
.gzahlen div { font-size: 12.5px; color: var(--leise); }
.gzahlen b { display: block; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Leerzustand */
.leer { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.leer h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.leer p { color: var(--ink2); margin-top: 10px; }
.leer ul { list-style: none; }
.leer li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); font-size: 14px; color: var(--ink2); }
.leer li:last-child { border-bottom: 0; }
.leer li b { display: block; color: var(--ink); }

/* Leer, klein (Eingang, Google) */
.leer-klein { display: grid; justify-items: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--leise); }
.leer-klein .ico { color: var(--leiser); }
.leer-klein p { max-width: 520px; font-size: 14px; }

/* Erklärung */
.erklaerung { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--r-karte); padding: 16px 22px; font-size: 14px; }
.erklaerung summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 10px; }
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung summary::after { content: '+'; margin-left: auto; color: var(--leise); font-size: 18px; font-weight: 500; }
.erklaerung[open] summary::after { content: '–'; }
.erklaerung dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 24px; margin-top: 14px; }
.erklaerung dt { font-weight: 700; }
.erklaerung dd { color: var(--ink2); }

/* Eingang-Seite: Filter */
.filter { display: flex; gap: 8px; flex-wrap: wrap; }
.filter a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 18px; background: var(--weiss); border: 1px solid var(--rand); font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.filter a i { font-style: normal; color: var(--leise); font-weight: 600; }
.filter a.an { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter a.an i { color: rgba(255,255,255,.7); }

/* Bericht */
.bericht-aktion { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Admin: Garantie-Check ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kz { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--r-karte); padding: 16px 18px; min-width: 0; }
.kz__n { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.kz__d { font-size: 12.5px; color: var(--leise); }
.fragen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frage { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--r-karte); padding: 18px 20px; min-width: 0; }
.frage h3 { font-size: 17px; font-weight: 800; margin-top: 4px; }
.frage__n { font-size: 13px; color: var(--leise); margin-top: 4px; }
.mini { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-top: 14px; }
.mini span { flex: 1; background: var(--navy); border-radius: 3px 3px 0 0; min-height: 2px; }
.mini span.leer-s { background: var(--linie); }
.mini__achse { display: flex; gap: 4px; font-size: 10.5px; color: var(--leiser); margin-top: 6px; }
.mini__achse span { flex: 1; text-align: center; overflow: hidden; }

/* ---------- Vorhof: Start, Anmelden, Einladung, Einrichtung ----------
   Dunkel wie ein Empfang, WebMount-Blau als einziges Licht. Dahinter der
   Kreis aus der Anfragen-Karte. Nach der Anmeldung wird es hell: dort wird
   gearbeitet. */
.vorhof { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(125% 95% at 50% -12%, #123670 0%, #0A2152 40%, #071733 74%, #040F1F 100%); color: #fff; }
.vorhof__grund { position: absolute; inset: 0; z-index: -1; }
.vorhof__sterne { position: absolute; inset: 0; width: 100%; height: 100%; }
.vorhof__schein { position: absolute; left: 50%; top: 46%; width: min(1000px, 130vw); aspect-ratio: 3 / 2; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(24, 91, 237, .34), rgba(24, 91, 237, .10) 55%, rgba(24, 91, 237, 0) 78%); }
.vorhof__kreis { position: absolute; left: 50%; top: 52%; width: min(680px, 96vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 140px rgba(24, 91, 237, .18); }
.vorhof__kreis::after { content: ''; position: absolute; left: 50%; top: 50%; width: 152%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .05); }

.vorhof__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.vorhof__marke { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px; font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.vorhof__marke:hover { color: #fff; }
.vorhof__marke img { height: 21px; filter: saturate(1.05) brightness(1.15); }
.vorhof__admin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16); font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .82); transition: background .2s, border-color .2s; }
.vorhof__admin:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); color: #fff; }

.vorhof__mitte { align-self: center; justify-self: center; width: min(460px, 100%); display: grid; justify-items: center; text-align: center; gap: 10px; }
.vorhof__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FB4FF; }
.vorhof__t { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.vorhof__p { font-size: 15.5px; color: rgba(255, 255, 255, .62); max-width: 40ch; }
.vorhof__p b { color: #fff; font-weight: 700; }
.vorhof__karte { width: 100%; margin-top: 16px; text-align: left; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px; padding: 28px 28px 24px; box-shadow: 0 30px 70px rgba(2, 8, 23, .45); }
.vorhof__karte--tor { padding: 0; background: rgba(255, 255, 255, .04); }
.vorhof__fuss { text-align: center; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .26); }

/* Die Karte auf der Startseite ist als Ganzes der Weg zur Anmeldung. */
.tor { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 28px 24px; color: #fff; border-radius: 22px;
  transition: transform .25s cubic-bezier(.22, .8, .24, 1), background .25s; }
.tor:hover { color: #fff; background: rgba(255, 255, 255, .04); transform: translateY(-2px); }
.tor h2 { font-size: 19.5px; font-weight: 800; letter-spacing: -.015em; }
.tor p { font-size: 14px; color: rgba(255, 255, 255, .6); }
.tor__kn { margin-top: 20px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--r-klein); background: #1E60EF; font-size: 15px; font-weight: 700;
  transition: background .2s; }
.tor:hover .tor__kn { background: #3A78FF; }
.tor:hover .pf { transform: translateX(3px); }

/* Felder und Knöpfe im Vorhof */
.vorhof .zugang h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.vorhof .zugang > p { color: rgba(255, 255, 255, .62); margin-bottom: 18px; }
.vorhof .feld label { color: rgba(255, 255, 255, .84); }
.vorhof .feld small, .vorhof .formular > p { color: rgba(255, 255, 255, .55); }
.vorhof input[type=text], .vorhof input[type=email], .vorhof input[type=password] {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.vorhof input:focus { border-color: #5C90FF; box-shadow: 0 0 0 3px rgba(92, 144, 255, .22); }
.vorhof input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #12305F inset; }
.vorhof .knopf { width: 100%; padding: 12px 16px; background: #1E60EF; }
.vorhof .knopf:hover { background: #3A78FF; }
.vorhof .knopf--rand { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
.vorhof .knopf--rand:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.vorhof .knopf--leise { width: auto; padding: 0; background: none; color: #9CC0FF; font-weight: 700; }
.vorhof .knopf--leise:hover { background: none; color: #C3D8FF; }
.vorhof .meldung--fehler { color: #FFB4A9; }
.vorhof .meldung--ok { color: #8FE3B0; }
.vorhof .zugang__fuss { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.vorhof .zugang__fuss a { color: #9CC0FF; }
.vorhof .zugang__fuss a:hover { color: #C3D8FF; }

/* ---------- Kleine Laptops, Tablet quer ---------- */
@media screen and (min-width: 901px) and (max-width: 1240px) {
  .rahmen { grid-template-columns: 220px minmax(0, 1fr); }
  .inh { padding: 22px 24px 40px; }
  .obenleiste { padding: 0 24px; }
  .konto { padding: 22px 22px; }
  .konto__betrag b { font-size: 70px; }
  .konto__aufteil a { grid-template-columns: minmax(0, 1fr); }
  .konto__aufteil .ico { display: none; }
  .besuche .funke { width: 110px; height: auto; }
  .verlauf .bk { flex-wrap: wrap; }
  .bk h3 { white-space: nowrap; }
  .gruss p { max-width: 36ch; }
}

/* ---------- Handy ---------- */
@media screen and (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .sb, .obenleiste { display: none; }
  .mobkopf { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 10; }
  .mobkopf .av { width: 32px; height: 32px; font-size: 12px; }
  .inh { padding: 16px 14px 96px; gap: 14px; }
  .unten { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; justify-content: space-around; background: rgba(255,255,255,.97); border-top: 1px solid var(--linie); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); }
  .unten a { display: grid; justify-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--leise); padding: 2px 10px; }
  .unten a.an { color: var(--navy); }
  .gruss h1, .skopf__t { font-size: 22px; }
  .gruss p { font-size: 13.5px; }
  .gruss__knoepfe { display: none; }
  .skopf__rechts { margin-left: 0; }
  .gruss__monat { display: block; width: 100%; }
  .gruss__monat .monatwahl { display: flex; width: 100%; }
  .gruss__monat .monatwahl > span:not(.aus) { flex: 1; justify-content: center; }
  .ueb, .ueb--ohne-google { display: flex; flex-direction: column; gap: 14px; }
  .ueb > .konto { order: 1; } .ueb > .schnell { order: 2; } .ueb > .eingang { order: 3; } .ueb > .verlauf { order: 4; }
  .ueb > .herkunft { order: 5; } .ueb > .besuche { order: 6; } .ueb > .seiten { order: 7; } .ueb > .google { order: 8; } .ueb > .erklaerung { order: 9; }
  .ueb > .schnell { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .diagramm { flex: none; }
  .schnell a { display: grid; justify-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink2); }
  .schnell i { width: 54px; height: 54px; border-radius: 50%; background: var(--weiss); border: 1px solid #E6E9F0; display: grid; place-items: center; color: var(--navy); }
  .konto { padding: 20px; border-radius: 20px; min-height: 0; }
  .konto__zeile span:last-child { display: none; }
  .konto__betrag b { font-size: 70px; }
  .konto__betrag span { font-size: 18px; }
  .konto__aufteil a { grid-template-columns: 1fr; }
  .konto__aufteil .ico { display: none; }
  .konto__aufteil b { font-size: 20px; }
  .konto__kreis { width: 180px; height: 180px; right: -56px; top: -56px; border-width: 30px; }
  .blatt, .abschnitt, .inhalt { padding: 16px; border-radius: 16px; }
  .leer { grid-template-columns: 1fr; gap: 16px; }
  .formular--2, .fragen { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .erklaerung dl { grid-template-columns: 1fr; gap: 2px; }
  .erklaerung dd { margin-bottom: 8px; }
  .blick a { margin-left: 0; }
  .bu__r { max-width: 110px; }
  .vorhof { gap: 18px; padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); }
  .vorhof__karte { padding: 22px 20px 20px; border-radius: 20px; }
  .tor { padding: 26px 20px 22px; }
  .vorhof__p { font-size: 14.5px; }
}

/* ---------- Drucken (Monatsbericht) ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .sb, .obenleiste, .mobkopf, .unten, .blick, .gruss__knoepfe, .gruss__monat, .umschalter, .mehr, .bericht-aktion, .schnell { display: none !important; }
  .diagramm svg { width: 100%; height: auto; }
  .rahmen { display: block; }
  .inh { padding: 0; max-width: none; }
  .blatt, .erklaerung, .konto { break-inside: avoid; }
  .konto, .ql__i em span, .sy, .diagramm svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .erklaerung summary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ===========================================================
   Vorhof hell (26.09.2026, Melvin) — Bauart Stahlhart-Partnerportal:
   weisser Grund, alles mittig in einer 360-px-Spalte, Logo, Titel,
   eine Zeile, zwei graue Felder mit Beschriftung im Feld, ein Knopf.
   Gilt fuer alle Seiten vor der Anmeldung (Anmelden, Einladung,
   Passwort neu, Einrichtung).
   =========================================================== */
.vorhof--hell { background: #fff; color: var(--ink); gap: 0; }
.vorhof--hell .vorhof__grund { display: none; }
.vorhof--hell .vorhof__mitte { width: min(360px, 100%); gap: 0; }
.vorhof--hell .vorhof__marke { margin-bottom: 26px; font-size: 21px; font-weight: 800; color: var(--navy); gap: 10px; }
.vorhof--hell .vorhof__marke:hover { color: var(--navy); }
.vorhof--hell .vorhof__marke img { height: 26px; filter: none; }
.vorhof--hell .vorhof__label { color: var(--blau); margin-bottom: 8px; }
.vorhof--hell .vorhof__t { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.vorhof--hell .vorhof__p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #71717A; max-width: none; }
.vorhof--hell .vorhof__p b { color: var(--ink); }
.vorhof--hell .vorhof__karte { margin-top: 22px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.vorhof--hell .vorhof__admin { color: var(--leise); border-color: var(--linie); }
.vorhof--hell .vorhof__admin:hover { color: var(--ink); background: var(--kachel); border-color: var(--feld); }

.vorhof--hell .formular { gap: 10px; }
.vorhof--hell .zugang h1 { color: var(--ink); }
.vorhof--hell .zugang > p, .vorhof--hell .formular > p { color: #71717A; font-size: 14px; }
.vorhof--hell .feld label { color: var(--ink2); }
.vorhof--hell .feld small { color: var(--leise); }
.vorhof--hell input[type=text], .vorhof--hell input[type=email], .vorhof--hell input[type=password] {
  background: #fff; border-color: var(--feld); color: var(--ink); }
.vorhof--hell input:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(24, 91, 237, .14); }
.vorhof--hell input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #fff inset; }

/* Feld mit Beschriftung im Feld: graue Flaeche, Beschriftung oben klein, Eingabe darunter */
.vorhof--hell .fl { position: relative; display: grid; gap: 1px; padding: 9px 14px 8px; border-radius: var(--r-klein);
  background: #F4F4F5; text-align: left; cursor: text; transition: box-shadow .15s, background .15s; }
.vorhof--hell .fl > span { font-size: 12px; font-weight: 500; color: #71717A; }
.vorhof--hell .fl input, .vorhof--hell .fl input:focus { border: 0; padding: 0; background: transparent; box-shadow: none;
  font-size: 15px; line-height: 1.5; color: var(--ink); }
.vorhof--hell .fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #F4F4F5 inset; }
.vorhof--hell .fl:focus-within { background: #fff; box-shadow: 0 0 0 1.5px var(--blau), 0 0 0 4px rgba(24, 91, 237, .12); }
.vorhof--hell .fl:focus-within input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.vorhof--hell .fl--pw input { padding-right: 34px; }
.vorhof--hell .fl__auge { position: absolute; right: 10px; bottom: 9px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: none; color: #A1A1AA; cursor: pointer; border-radius: 8px; }
.vorhof--hell .fl__auge:hover, .vorhof--hell .fl__auge[aria-pressed=true] { color: var(--ink2); }

.vorhof--hell .knopf { width: 100%; margin-top: 4px; padding: 11px 16px; background: var(--blau); color: #fff; font-weight: 600; }
.vorhof--hell .knopf:hover { background: #0F49C8; color: #fff; }
.vorhof--hell .knopf--rand { background: #fff; border-color: var(--feld); color: var(--ink2); }
.vorhof--hell .knopf--rand:hover { background: var(--kachel); color: var(--ink); }
.vorhof--hell .knopf--leise { width: auto; margin: 0; padding: 0; background: none; color: var(--leise); font-weight: 600; font-size: 13.5px; }
.vorhof--hell .knopf--leise:hover { background: none; color: var(--blau); }
.vorhof--hell .meldung:empty { display: none; }
.vorhof--hell .meldung--fehler { color: #B42318; }
.vorhof--hell .meldung--ok { color: var(--gut); }
.vorhof--hell .zugang__fuss { margin-top: 16px; text-align: center; font-size: 13px; color: var(--leise); }
.vorhof--hell .zugang__fuss a { color: var(--blau); }
.vorhof--hell .zugang__fuss a:hover { color: var(--navy); }
@media (max-width: 560px) { .vorhof--hell { padding-top: 16px; } .vorhof--hell .vorhof__mitte { width: 100%; } }

/* Logo wie auf webmount.at (26.09.2026): scharfes Zeichen (796 x 280), Wortmarke Inter Tight 600,
   Berg steht auf der Grundlinie der Schrift. */
.vorhof--hell .vorhof__marke { align-items: baseline; gap: 7px; font-family: 'Inter Tight', var(--f); font-weight: 600;
  font-size: 24px; letter-spacing: -.02em; line-height: 1; color: #0A1730; }
.vorhof--hell .vorhof__marke:hover { color: #0A1730; }
.vorhof--hell .vorhof__marke img { height: 30px; width: auto; }