/* Karten August - das gemeinsame Farbblatt aller Unterseiten (11. Okt. 2026, Markus: "Jede
   weiterfuehrende Seite ist leider noch im Motto Otto Design"). Dieselben Werte wie die Startseite
   (postkarte/landing.html): Nachtblau, Papier, Briefmarken-Rot, Sonne; Schriften Fell und Bricolage.
   Die alten Namen (--gruen, --magenta, --beere ...) bleiben, damit die Seiten ihre Regeln behalten -
   sie tragen jetzt die Karten-August-Farben. */
@font-face{font-family:"Fell";src:url("/fonts/fell-v1.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fell";src:url("/fonts/fell-italic-v1.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bricolage";src:url("/fonts/bricolage-v1.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  /* Karten August (wie postkarte/landing.html) */
  --blau:#13284A; --chamois:#EBDDC2; --rot:#C8323A; --sonne:#F6C445; --weiss:#FBF6EC;
  /* Alte Namen, neue Werte: gruen = Markierung (Sonne, Tinte darauf 9 : 1), magenta = Rot,
     beere = dunkles Rot fuer Links (6 : 1 auf Papier), haut = Chamois fuer Hover */
  --papier:#FBF3E4; --tinte:#13284A; --gruen:#F6C445; --magenta:#C8323A; --beere:#A3262D;
  --haut:#EBDDC2; --hemd:#E9E2D4; --text2:#3D4A60;
  --text3:#5B6476; --ok-text:#2F6B3A; --warn-text:#B42318;
  --kontur:1.5px solid rgba(19,40,74,.28);
  --stempel:0 8px 22px -12px rgba(19,40,74,.45);
  --display:"Fell", Georgia, serif;
  --text:"Bricolage", system-ui, sans-serif;
}

/* ---------- Kopf: Logo, Menue, Konto - auf jeder Seite gleich ---------- */
.mo-kopf,.mo-kopf *{box-sizing:border-box}
.mo-kopf{line-height:1.2;border-bottom:var(--kontur);background:var(--papier);position:sticky;top:0;z-index:40}
.mo-kopf .mo-in{max-width:1120px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.mo-marke{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinte);font:400 24px/1 var(--display);margin-right:auto;min-height:44px}
.mo-marke img,.mo-marke svg{width:38px;height:38px;object-fit:contain;display:block;flex:none}
.mo-nav{display:flex;flex-wrap:wrap;gap:2px 4px;order:3;width:100%}
.mo-nav a{color:var(--tinte);text-decoration:none;font:700 15px/1.2 var(--text);padding:10px 9px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px}
.mo-nav a:hover{background:var(--haut)}
/* 2. Okt.: unter 860 px eine Zeile statt Umbruch ("Event" stand sonst allein), notfalls zum Wischen. */
@media (max-width:859px){
  .mo-nav{flex-wrap:nowrap;justify-content:space-between;gap:0;overflow-x:auto;scrollbar-width:none}
  .mo-nav::-webkit-scrollbar{display:none}
  .mo-nav a{padding:10px 5px;font-size:14.5px;white-space:nowrap}
}
@media (max-width:359px){.mo-nav a{padding:10px 3px;font-size:13.5px}}
.mo-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--magenta)}
.mo-konto{order:2}
@media (min-width:860px){
  .mo-kopf .mo-in{padding:8px 24px}
  .mo-nav{order:2;width:auto;margin-right:8px}
  .mo-konto{order:3}
}

/* ---------- Der Knopf: Briefmarken-Rot wie auf der Startseite ---------- */
.mo-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;border:0;border-radius:999px;background:var(--rot);color:var(--weiss);font:700 15.5px/1.2 var(--text);text-decoration:none;box-shadow:var(--stempel);transition:transform .12s, box-shadow .12s;cursor:pointer}
.mo-knopf:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(179,38,46,.7)}
.mo-knopf:active{transform:translateY(1px)}
.mo-knopf.hell{background:rgba(255,255,255,.6);color:var(--tinte);border:2px solid var(--tinte)}
.mo-knopf svg{width:18px;height:18px;flex:none}

@media (prefers-reduced-motion: reduce){
  .mo-knopf{transition:none}
}

/* ---------- Seiten, die noch die alten Farbnamen tragen (--bg, --card, --ink ...) ----------
   1. Okt.: So geht's, Mottos, Stile, Konto, Firmen, Event, Rechtstexte. Die Seite setzt
   class="mo-seite" an den body und belegt ihre alten Namen mit diesen Werten um; die
   Regeln hier gelten fuer alle gleich. */
.mo-seite{--bg:var(--papier);--bg2:#FBF5EA;--card:#fff;--card2:#FBF5EA;--line:#CBBFA9;
  --ink:var(--tinte);--ink2:var(--text2);--ink3:var(--text3);
  --accent:var(--gruen);--accent-ink:var(--tinte);--ok:var(--ok-text);--warn:var(--warn-text);--bad:var(--warn-text);
  background:var(--papier);color:var(--tinte)}
.mo-seite h1,.mo-seite h2{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.08;color:var(--tinte)}
.mo-seite a{color:var(--beere)}
.mo-seite :focus{outline:none}
.mo-seite :focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:6px}
.mo-seite input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.mo-seite select,.mo-seite textarea{background:#fff;border:1.5px solid rgba(19,40,74,.35);border-radius:10px;color:var(--tinte);font-size:16px !important}
.mo-seite .wruf{background:var(--rot);color:var(--weiss);border:0;box-shadow:var(--stempel)}
.mo-seite .wruf:hover,.mo-seite .wruf:focus{background:var(--rot);color:var(--weiss)}
.mo-seite footer.site,.mo-seite footer{color:var(--text2)}
/* Der Kopf bleibt schwarz, auch wenn die Seite Links in Beere setzt */
.mo-kopf .mo-marke,.mo-kopf .mo-nav a,.mo-kopf .mo-knopf{color:var(--tinte)}
/* Keine gesperrten Versal-Etiketten (MASTER.md 4) */
.mo-seite *{text-transform:none !important}

/* ---------- Karten August: die Hauptknoepfe der Seiten (Weiter, Los, Senden ...) ----------
   Die Seiten setzen sie selbst auf --gruen mit Tinte und hartem Schatten (Motto-Otto-Aufkleber).
   html body ... gewinnt gegen die Seitenregel, ohne !important. */
html body .go,html body .ab-weiter,html body .pk-big,html body .warte-row button,html body .view .fassung-btn,
html body .preflight .k button.haupt,html body .kf-knoepfe button#kf-send,html body .btn,html body button.knopf,
html body .mo-seite button.knopf,html body .wruf{background:var(--rot);color:var(--weiss);border:0;box-shadow:var(--stempel);font-family:var(--text);font-weight:700}
html body .go:hover,html body .ab-weiter:hover,html body .btn:hover,html body button.knopf:hover{box-shadow:0 10px 26px -8px rgba(179,38,46,.7)}
html body .go:disabled,html body .ab-weiter:disabled,html body .btn:disabled{background:#B9B1A2;color:#fff;box-shadow:none}
/* Ruhige Kanten statt schwarzer Kontur */
.mo-kopf{border-bottom:1px solid rgba(19,40,74,.14);background:rgba(251,243,228,.94);backdrop-filter:saturate(1.2) blur(6px)}