/* ==========================================================================
   Das Theme der Website fuer die Seiten mit eigenem Rahmen auf termine.mitdeinemkind.de
   --------------------------------------------------------------------------
   Seit 2026-10-28 (Bilal: "auch sind die mitglieder seiten an den neuen stil angepasst - sowie andere seiten die noch nicht beachtet
   wurden", dann "ich meine auch die neuen buttons etc"): Mitgliederbereich, Kasse, Anmeldeseiten, Raum, Stimmen-Formular, SMS-Seite. Ihr
   eigenes CSS (anmeldung.CSS als Grundlage, dazu kasse_seite.CSS, mitgliederbereich.CSS, stimme.CSS) bleibt; dies hier kommt danach
   (website.termine_rahmen) und legt Schrift, Tinte, Karten, Felder und Knoepfe der Website darueber - in den Farben der Palette
   (<style id="mdk-farben">), ohne Palette mit den Werten aus kopfleiste.css. Der Anfang stand bis dahin nur in der Kasse (seit 2026-10-01,
   die Knoepfe seit 2026-10-27).
   ========================================================================== */
@font-face{font-family:"Newsreader";src:url(/anmelden/_/newsreader-latin-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:var(--clay)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.016em;color:var(--ink)}
h1{font-size:32px;line-height:1.12}
.karte{background:var(--card);border-color:var(--line);border-radius:22px;box-shadow:0 2px 4px rgba(44,28,22,.05),0 14px 32px -18px rgba(44,28,22,.3)}
.text p,.text ul{font-family:var(--serif);font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.text li::marker{color:var(--clay)}
.klein,.hilfe,.fuss,.fuss a,.hinweis-text,.gast span,.wann span,.einw-info,.frei,.schalter-text span{color:var(--ink-3)}
label.feld,span.feld,.erkannt span,.zusammen span,.erfolg p,.sms-vorgabe,.schon,.zugang,.leer{color:var(--ink-2)}
.unter,.erfolg h2{font-family:var(--serif);font-weight:600}

/* Felder */
label.feld input,label.feld select,.tel-zeile input,.tel-zeile select{border-color:var(--line-2);color:var(--ink);background-color:#fff}
label.feld input:focus,label.feld select:focus,.tel-zeile input:focus,.tel-zeile select:focus{border-color:var(--clay);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 18%,transparent);outline:none}
.einw{border-color:var(--line);color:var(--ink-2);background:#fff}
.einw input{accent-color:var(--clay)}
.schalter,.sms-vorgabe{border-color:var(--line)}
.schalter input:checked+.schalter-bahn{background:var(--ink)}

/* Knoepfe wie auf der Website (mdk.css .btn): Umriss in Tinte, beim Zeigen mit Tinte gefuellt und weisse Schrift; der Zweitknopf leise mit
   heller Linie. Der Dreh-Kreis beim Absenden nimmt die Schriftfarbe. */
.los{min-height:50px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;font-size:15px;font-weight:650;
  letter-spacing:-.005em;box-shadow:none;transition:background .16s ease,color .16s ease,transform .1s}
.los:hover{background:var(--ink);color:#fff;filter:none}
.los .dreh{border-color:color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor}
.knopf,.knopf2,.mehr{border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:transparent;font-weight:650;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.knopf{padding:0 22px}
.knopf:hover,.knopf2:hover,.mehr:hover{border-color:var(--ink);color:var(--ink)}
.knopf.voll,.knopf2.voll{color:var(--ink);background:transparent;border:1.5px solid var(--ink)}
.knopf.voll:hover,.knopf2.voll:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hilfe button.uebernehmen{border-color:var(--line-2);color:var(--ink-2)}

/* Anmeldeseiten: Termine zum Waehlen, Fakten, Nummern - gewaehlt heisst wie auf der Website gefuellt in Tinte */
.fakten li{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.nr{background:var(--ink)}
.termin{border-color:var(--line-2)}
.termin:hover{border-color:var(--ink)}
.termin:has(input:checked){border-color:var(--ink);background:var(--paper-2);box-shadow:none}
.termin:has(input:focus-visible){outline-color:var(--clay)}
.kachel{background:var(--paper-2);color:var(--ink)}
.termin:has(input:checked) .kachel{background:var(--ink);color:#fff}
.termin:has(input:checked) .haken{border-color:var(--ink);background:var(--ink)}
.platz{color:var(--ink-2);border-color:var(--line-2);background:transparent}
.platz.knapp{background:var(--ink);border-color:var(--ink);color:#fff}
.erkannt,.zusammen,.zugang,.schon,.leer,.gewaehlt{background:var(--paper-2);border-color:var(--line)}
.gewaehlt{border-color:var(--ink)}
.erkannt-titel,.gewaehlt-titel{color:var(--ink-2)}
.erfolg .zeichen{background:var(--clay)}

/* Mitgliederbereich: Uebersicht, Empfehlen, Konto als ruhige Reiter wie die Filter auf /kurse (gewaehlt: Tinte) */
.mb-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.mb-reiter a{display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);
  font:600 13.5px/1 var(--sans);color:var(--ink-2);text-decoration:none;transition:border-color .16s ease,color .16s ease,background .16s ease}
@media (hover:hover){.mb-reiter a:not([aria-current]):hover{border-color:var(--ink);color:var(--ink)}}
.mb-reiter a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
/* "Übersicht · Meine Kurse · Meine Termine" bleibt auch auf schmalen Handys eine Zeile (jede Breite 320-440 px gemessen): stufenweise enger */
@media (max-width:24.3rem){.mb-reiter{gap:6px}.mb-reiter a{padding:0 11px}}
@media (max-width:22.6rem){.mb-reiter{gap:5px}.mb-reiter a{padding:0 9px;font-size:13px}}
@media (max-width:21.5rem){.mb-reiter{gap:4px}.mb-reiter a{padding:0 7px;font-size:12.5px}}

/* Fuss */
.fuss{font-family:var(--sans)}