/* Stil je Betrieb (Aussehen der Betriebs-Webseite).
   Wird NUR geladen, wenn in app/betriebe/<kurz>.php ein Schluessel 'stil' steht (body.mit-stil).
   Werte (Schriften, Radius, Linien, Knopffarbe) kommen als CSS-Variablen --s-* aus _kopf.php. */

body.mit-stil{font-family:var(--s-schrift);background:var(--seite);color:var(--tinte);--haar:var(--s-linie);--haar2:var(--s-linie);--radius:var(--s-radius);--schatten:none;--ue-2:var(--s-diagramm2)}

/* Kopf mit Logo des Betriebs, feine Linie darunter wie auf der Webseite */
.mit-stil .kopf-logo{padding:20px 20px 16px;border-bottom:1px solid var(--s-linie);justify-content:center}
.kopf-logo-bild{display:block;height:auto;max-width:60vw}
.mit-stil .fuss{color:var(--tinte-weich);border-top:1px solid var(--s-linie);margin-top:40px}
.mit-stil .fuss a{color:var(--tinte-weich)}

/* Ueberschriften */
.mit-stil .abschnitt-titel,.mit-stil .holen-titel,.mit-stil .seiten-titel,.mit-stil .inhalt.text h1,.mit-stil .ue-titel,.mit-stil .ergebnis-stand{
  font-family:var(--s-titel);font-weight:var(--s-titel-gewicht);text-transform:var(--s-titel-versal);letter-spacing:var(--s-titel-abstand)}
.mit-stil .inhalt.text h2{font-family:var(--s-titel);font-weight:500}
.mit-stil .inhalt.text p,.mit-stil .anleitung p,.mit-stil .regeln ol{color:var(--tinte)}
.mit-stil .regeln li::marker{color:var(--tinte-weich);font-family:var(--s-schrift)}

/* Versal-Ueberschriften (Woestendiek): kleiner, gesperrt, ruhig */
.mit-stil.titel-versal .abschnitt-titel{font-size:.95rem;margin-bottom:14px}
.mit-stil.titel-versal .holen-titel{font-size:1.25rem}
.mit-stil.titel-versal .seiten-titel{font-size:1.25rem;margin:10px 0 6px}
.mit-stil.titel-versal .inhalt.text h1{font-size:1.2rem;line-height:1.35}
.mit-stil.titel-versal .ue-titel{font-size:.86rem}
.mit-stil.titel-versal .ergebnis-stand{font-size:1.05rem}

/* Knoepfe: Rechtecke, duenne Linien */
.mit-stil .knopf{border-radius:var(--s-radius);background:var(--s-knopf);color:#fff;font-weight:500;letter-spacing:.02em}
.mit-stil.titel-versal .knopf{text-transform:uppercase;letter-spacing:.12em;font-size:.88rem;font-weight:400}
.mit-stil .knopf.gold{background:#fff;color:var(--s-knopf);box-shadow:inset 0 0 0 1px var(--s-knopf)}
.mit-stil .knopf-zweit{border-radius:var(--s-radius);border:1px solid var(--tinte);background:transparent;color:var(--tinte)}
.mit-stil.titel-versal .knopf-zweit{text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;font-weight:400}
.mit-stil .link-knopf{color:var(--tinte-weich)}
.mit-stil .scanner-start{background:#fff;color:var(--s-knopf)}

/* Flaechen ohne Schatten, mit Haarlinie */
.mit-stil .vorzeigen,.mit-stil .ergebnis,.mit-stil .ue-karte,.mit-stil .ue-kachel{border-radius:var(--s-radius);border:1px solid var(--s-linie);box-shadow:none;background:#fff}
.mit-stil .pin,.mit-stil #nummer{border-radius:var(--s-radius);border-color:var(--s-linie)}
.mit-stil .pin:focus,.mit-stil #nummer:focus{outline-color:var(--tinte)}
.mit-stil .scanner{border-radius:var(--s-radius);background:#141414}
.mit-stil .scanner-rahmen{border-radius:0}
.mit-stil .lader{border-color:var(--s-linie);border-top-color:var(--tinte)}
.mit-stil .holen-titel{margin-top:6px}

/* ---------- Karte: gemeinsame Grundlage ---------- */
.mit-stil .karte{border-radius:var(--s-radius-karte);box-shadow:none}
.mit-stil .karte:after,.mit-stil .karte-glanz{display:none}
.mit-stil .karte-oben{align-items:center}
.karte-logo{display:block;height:auto;width:150px;max-width:55%}
.mit-stil .karte-art{margin-top:0;font-size:.6rem;letter-spacing:.24em}
.mit-stil .karte-zaehler{font-family:var(--s-titel);font-weight:var(--s-titel-gewicht)}
.mit-stil .praemie-zahl{font-family:var(--s-titel);font-weight:500}

/* Helle Karte (Woestendiek): Weiss, Anthrazit, feine Linien */
.karte-hell .karte{
  background:#fff;color:var(--tinte);border:1px solid var(--s-linie);
  box-shadow:0 24px 48px -32px rgba(49,47,45,.35);
}
.karte-hell .karte-logo{width:210px;max-width:68%}
.karte-hell .karte-art{color:var(--tinte-weich)}
.karte-hell .feld{border:1px solid #C9C5C0}
.karte-hell .feld.voll{background:var(--grund);border-color:var(--grund);box-shadow:none}
.karte-hell .feld img{width:var(--s-zeichen-breite,56%)}
.karte-hell .feld.praemie{border-color:var(--tinte)}
.karte-hell .praemie-zahl{color:var(--tinte);font-size:clamp(.58rem,2.7vw,.74rem);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.karte-hell .praemie-wort{color:var(--tinte-weich);font-size:.42rem;letter-spacing:.16em}
.karte-hell .feld.praemie.voll{background:var(--grund)}
.karte-hell .feld.praemie.voll .praemie-zahl,.karte-hell .feld.praemie.voll .praemie-wort{color:#fff}
.karte-hell .karte-text{color:var(--tinte-weich)}
.karte-hell .karte.ist-voll .karte-text{color:var(--tinte)}
.karte-hell .karte-zaehler{color:var(--tinte)}
.karte-hell .karte-zaehler .von{color:var(--tinte-weich)}
.karte-hell .felder.klein{background:#fff;border:1px solid var(--s-linie);border-radius:var(--s-radius)}

/* Dunkle Karte (Motena): Schwarz, weisse Wortmarke, gefuellter Stempel als schlichter weisser Kreis */
.karte-dunkel .karte{background:var(--grund);border:1px solid #000}
.karte-dunkel .karte-logo{width:136px}
.karte-dunkel .karte-art{color:rgba(255,255,255,.62)}
.karte-dunkel .feld{border:1px solid rgba(255,255,255,.3)}
.karte-dunkel .feld.voll{background:#fff;border-color:#fff;box-shadow:none}
.karte-dunkel .praemie-zahl{color:#fff;font-style:italic;font-weight:400}
.karte-dunkel .praemie-wort{color:rgba(255,255,255,.7)}
.karte-dunkel .feld.praemie{border-color:#fff}
.karte-dunkel .feld.praemie.voll .praemie-zahl,.karte-dunkel .feld.praemie.voll .praemie-wort{color:var(--grund)}
.karte-dunkel .karte-text{color:rgba(255,255,255,.78)}
.karte-dunkel .karte.ist-voll .karte-text{color:#fff}
.karte-dunkel .felder.klein{background:var(--grund);border-radius:var(--s-radius-karte)}

/* Uebersicht: Diagrammfarben aus dem Stil */
.mit-stil .uebersicht{--ue-1:var(--grund);--ue-2:var(--s-diagramm2)}
.mit-stil .ue-zahl,.mit-stil .ue-kz-zahl{font-family:var(--s-titel);font-weight:var(--s-titel-gewicht)}
.mit-stil .ue-zeitraum a{border-radius:var(--s-radius)}
.mit-stil.titel-versal .ue-kz-name,.mit-stil.titel-versal .ue-zeitraum a{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.mit-stil .ue-kz,.mit-stil .ue-zelle,.mit-stil .ue-spur,.mit-stil .ue-legende i{border-radius:var(--s-radius)}
.mit-stil .ue-kz{background:#fff;border-color:var(--s-linie)}
.mit-stil .ue-werte.gross dd{font-family:var(--s-titel);font-weight:var(--s-titel-gewicht)}
.mit-stil .ue-monat-spur i{border-radius:0}
.mit-stil strong{font-weight:500}
.felder.klein .praemie-zahl{font-size:.7rem}
.mit-stil.titel-versal .ue-kz-name{font-weight:500}
.mit-stil .freunde-text{color:var(--tinte)}
/* Plus-Tarif mit Stil */
.mit-stil .plus-titel{font-family:var(--s-titel);font-weight:var(--s-titel-gewicht);text-transform:var(--s-titel-versal);letter-spacing:var(--s-titel-abstand)}
.mit-stil .plus-doppel,.mit-stil .plus-nachricht,.mit-stil .plus-meldung,.mit-stil .plus-form textarea,.mit-stil .plus-feld,.mit-stil .plus-doppel-personal{border-radius:var(--s-radius)}
.mit-stil .plus-nachricht{background:#fff;border-color:var(--s-linie)}
.mit-stil .knopf.knopf-hell,.knopf.knopf-hell{background:transparent;color:var(--tinte);border:0;box-shadow:inset 0 0 0 1px var(--tinte)}
.mit-stil .gast-eingabe{border-radius:var(--s-radius)}