/* E-Rechnung geprüft – eigene Farbwelt (Petrol).
   Cyan gehört zu Design2Go, Lila zu Linda BBservice; hier bewusst etwas Drittes,
   ruhig und behördentauglich. Systemschriften statt Web-Fonts: nichts nachzuladen,
   keine fremde Domain, schnelle Anzeige. */
:root{
  --petrol:#0d5c63; --petrol-dunkel:#083f44; --petrol-hell:#e6f2f2;
  --akzent:#c8873a; --tinte:#1d2321; --grau:#5d6b6a; --linie:#d6e0df;
  --papier:#ffffff; --sand:#f6f9f8; --fehler:#8c2f2f; --fehler-hell:#fbeeee;
  --radius:10px; --breite:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);line-height:1.65;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.25;color:var(--petrol-dunkel);margin:0 0 .5em}
h1{font-size:2.3rem;letter-spacing:-.02em}
h2{font-size:1.5rem;margin-top:0}
p{margin:0 0 1em}
a{color:var(--petrol)}
b{font-weight:650}

/* Kopf */
.kopf{background:var(--petrol-dunkel);color:#fff;position:sticky;top:0;z-index:20}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.05rem}
.marke-zeichen{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
  background:var(--akzent);color:#fff;font-weight:700}
.marke-text b{font-weight:700}
.kopf-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kopf-nav a{color:#d8e8e7;text-decoration:none;font-size:.94rem}
.kopf-nav a:hover{color:#fff;text-decoration:underline}

/* Held */
.held{background:linear-gradient(170deg,var(--petrol) 0%,var(--petrol-dunkel) 100%);
  color:#fff;padding:60px 0 66px}
.held h1{color:#fff;max-width:19ch}
.kicker{color:#9fd4d2;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:14px;font-weight:600}
.held-text{max-width:60ch;color:#e3f1f0;font-size:1.08rem}
.held-hinweis{max-width:60ch;color:#a9cfcd;font-size:.96rem;
  border-left:3px solid var(--akzent);padding-left:14px;margin:22px 0 26px}

/* Knöpfe */
.knopf{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;
  border:0;border-radius:var(--radius);padding:14px 26px;font-size:1.02rem;
  font-weight:600;cursor:pointer;font-family:inherit}
.knopf:hover{background:#b0742c}
.knopf-klein{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;
  border:0;border-radius:8px;padding:8px 15px;font-size:.92rem;font-weight:600;
  cursor:pointer;font-family:inherit}
.knopf-klein:hover{background:#b0742c}
.knopf-hell{background:var(--petrol-hell);color:var(--petrol-dunkel);
  border:1px solid var(--linie)}
.knopf-hell:hover{background:#d6e8e7}

/* Blöcke */
.block{padding:44px 0;border-top:1px solid var(--linie)}
.block:first-of-type{border-top:0}
.block-hell{background:var(--sand);border-radius:var(--radius);padding:38px 28px;
  margin:44px 0;border-top:0}
.block p, .block-text{max-width:68ch}
.hinweis{color:var(--grau);font-size:.92rem;max-width:68ch}

/* Formular */
fieldset{border:1px solid var(--linie);border-radius:var(--radius);
  padding:22px 22px 18px;margin:0 0 24px;background:var(--papier)}
legend{font-weight:650;color:var(--petrol-dunkel);padding:0 8px;font-size:1.05rem}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px}
.raster .breit{grid-column:1/-1}
label{display:block;font-size:.93rem;color:var(--grau);font-weight:500}
label small{display:block;color:var(--grau);font-weight:400;font-size:.85rem;margin-top:4px}
/* Alle Eingabefelder ausser Schaltern - password und number nicht vergessen,
   sonst stehen sie schmal neben der Beschriftung. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
textarea,select{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--linie);
  border-radius:8px;font-size:1rem;font-family:inherit;color:var(--tinte);background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--petrol);
  outline-offset:1px;border-color:var(--petrol)}
textarea{resize:vertical}
.pflicht{color:var(--akzent);font-weight:700}
.schalter{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  color:var(--tinte);font-size:.97rem;font-weight:400}
.schalter input{width:auto;margin-top:3px;flex:0 0 auto}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.absenden{margin:28px 0 10px;text-align:center}
.absenden .hinweis{margin:12px auto 0}

/* Positionstabelle */
.postabelle{width:100%;border-collapse:collapse;margin-bottom:14px}
.postabelle th{text-align:left;font-size:.85rem;color:var(--grau);font-weight:600;
  padding:0 8px 8px 0;border-bottom:1px solid var(--linie)}
.postabelle td{padding:6px 8px 6px 0;vertical-align:top}
.postabelle .sp-bez{width:44%}
.postabelle input,.postabelle select{margin-top:0}

/* Meldungen */
.meldung{border-radius:var(--radius);padding:16px 20px;margin:26px 0}
.meldung ul{margin:8px 0 0;padding-left:20px}
.meldung-fehler{background:var(--fehler-hell);border-left:4px solid var(--fehler);
  color:#5f2020}

/* Fuß */
.fuss{background:var(--petrol-dunkel);color:#c7dcdb;margin-top:56px;padding:26px 0}
.fuss-zeile a{color:#fff;margin-right:20px;text-decoration:none;font-size:.94rem}
.fuss-zeile a:hover{text-decoration:underline}
.fuss-klein{color:#8fb3b1;font-size:.86rem;margin:10px 0 0;max-width:70ch}

/* Einfache Seiten */
.einfach{padding:48px 0;min-height:50vh}
.einfach h1{font-size:1.8rem}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.75rem}
  .held{padding:42px 0 46px}
  .kopf-nav a:not(.knopf-klein){display:none}
  fieldset{padding:16px 14px 12px}
  .postabelle,.postabelle thead,.postabelle tbody,.postabelle tr,.postabelle td{display:block;width:100%}
  .postabelle thead{display:none}
  .postabelle tr{border:1px solid var(--linie);border-radius:8px;padding:10px;margin-bottom:12px}
  .postabelle .sp-bez{width:auto}
}

/* ---------------------------------------------------------------- Kontobereich */
.schmal{max-width:520px;padding-top:44px}
.schmalform{margin-top:22px}
.schmalform label{margin-bottom:16px;display:block;color:var(--tinte);font-weight:500}
.schmalform .knopf{width:100%;margin-top:8px}
fieldset.flach{border:0;padding:0;margin:18px 0}
fieldset.flach legend{padding:0;font-size:.95rem}

.konto-huelle{padding-top:22px}
.konto-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);padding-bottom:12px;margin-bottom:26px}
.konto-nav a{color:var(--grau);text-decoration:none;font-size:.96rem;font-weight:500;
  padding:4px 0;border-bottom:2px solid transparent}
.konto-nav a:hover{color:var(--petrol)}
.konto-nav a.an{color:var(--petrol-dunkel);border-bottom-color:var(--akzent)}
.nav-fueller{flex:1}
.zaehler{color:var(--grau);font-size:.88rem;background:var(--sand);
  border:1px solid var(--linie);border-radius:99px;padding:4px 12px}
.abmelden-form{margin:0}
.nur-text{background:none;border:0;color:var(--grau);cursor:pointer;
  font-family:inherit;font-size:.94rem;padding:4px 0}
.nur-text:hover{color:var(--petrol);text-decoration:underline}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin:22px 0}
.kachel{display:block;background:var(--sand);border:1px solid var(--linie);
  border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--tinte)}
.kachel:hover{border-color:var(--petrol);background:var(--petrol-hell)}
.kachel b{display:block;color:var(--petrol-dunkel);margin-bottom:4px;font-size:1.05rem}
.kachel span{color:var(--grau);font-size:.9rem}

.liste{width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:.95rem}
.liste th{text-align:left;font-size:.85rem;color:var(--grau);font-weight:600;
  padding:0 10px 8px 0;border-bottom:1px solid var(--linie)}
.liste td{padding:9px 10px 9px 0;border-bottom:1px solid var(--linie)}
.liste .rechts, .rechts{text-align:right}
.marke-ok{background:var(--petrol-hell);color:var(--petrol-dunkel);border-radius:99px;
  padding:2px 10px;font-size:.82rem;white-space:nowrap}
.marke-grau{background:#eceeee;color:var(--grau);border-radius:99px;padding:2px 10px;
  font-size:.82rem;white-space:nowrap}
.daten p{margin:0 0 6px}

.meldung-ok{background:var(--petrol-hell);border-left:4px solid var(--petrol);
  color:var(--petrol-dunkel)}
.meldung-hinweis{background:#fdf6ec;border-left:4px solid var(--akzent);color:#6b4a1c}
.meldung-hinweis ul{margin:8px 0}

.schalter.merken{background:var(--sand);border:1px solid var(--linie);
  border-radius:var(--radius);padding:14px 16px;margin:0 auto 20px;max-width:640px;
  text-align:left}
.schalter.merken small{display:block;color:var(--grau);font-size:.86rem;margin-top:5px}
.nach-download{max-width:640px;margin:22px auto}

/* ---------------------------------------------------------------- Erinnerung */
.ueberlagerung{position:fixed;inset:0;background:rgba(8,63,68,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px}
.dialog{background:var(--papier);border-radius:var(--radius);padding:28px 30px;
  max-width:540px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.dialog h2{margin-top:0}
.dialog p{max-width:none;font-size:.97rem}
.dialog-knoepfe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.dialog-knoepfe form{margin:0}
.kachel-still{background:var(--papier);cursor:default}
.kachel-still:hover{border-color:var(--linie);background:var(--papier)}

/* ---------------------------------------------------- Angebote und Mahnwesen */
.marke-mahnung{background:#fbeeee;color:#8c2f2f;border-radius:99px;padding:2px 10px;
  font-size:.82rem;white-space:nowrap}
.zahlzeile td{border-bottom:1px solid var(--linie);background:var(--sand);
  padding:8px 10px 8px 0}
.zahlform{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;
  font-size:.9rem;color:var(--grau)}
.zahlform input,.zahlform select{width:auto;margin-top:0;padding:6px 9px;font-size:.92rem}
.zahlform input[name=betrag]{width:100px}
.gedimmt{color:var(--grau);opacity:.55;cursor:help}
.schmaltabelle{max-width:460px}
.schmaltabelle td{border-bottom:0;padding:4px 10px 4px 0}
.schmaltabelle .summe td{border-top:1px solid var(--tinte);padding-top:8px}

/* ---------------------------------------------------------------- Kassenbuch */
.bestand-kasten{background:var(--petrol-hell);border-radius:var(--radius);
  padding:20px 24px;margin:22px 0}
.bestand-zahl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bestand-zahl span{color:var(--petrol-dunkel);font-size:.95rem}
.bestand-zahl b{font-size:1.9rem;color:var(--petrol-dunkel);letter-spacing:-.02em}
.bestand-kasten .hinweis{margin:8px 0 0;color:var(--petrol-dunkel);opacity:.8}
.zeitraum{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.zeitraum h2{margin:0}
.zeitraum-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.zeitraum-form select{width:auto;margin-top:0;padding:7px 10px;font-size:.92rem}
.kassenliste td{font-variant-numeric:tabular-nums}
.kassenliste .storniert{color:var(--grau)}
.kassenliste .storniert td{text-decoration:line-through;text-decoration-color:var(--linie)}
.schloss{color:var(--petrol);font-weight:700;margin-left:4px}
label.inline{display:inline-flex;align-items:center;gap:8px;margin-right:10px;
  font-size:.93rem}
label.inline input{width:auto;margin-top:0;padding:7px 10px}
.breit-form{margin:18px 0}
.warnton{color:#8c5a1c}

/* ------------------------------------------------ Fahrt aufzeichnen (Handy) */
.aufzeichnung{background:var(--petrol-hell);border-radius:var(--radius);
  padding:18px 20px;margin:20px 0}
.auf-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.auf-zeile select{width:auto;min-width:180px;margin-top:0}
.auf-knopf{flex:1;min-width:190px;padding:16px 26px;font-size:1.08rem}
.auf-stop{background:#8c2f2f}
.auf-stop:hover{background:#742626}
.auf-uhr{font-size:1.9rem;font-weight:650;color:var(--petrol-dunkel);
  font-variant-numeric:tabular-nums;line-height:1.1}
.auf-uhr small{display:block;font-size:.82rem;font-weight:400;color:var(--grau)}
.aufzeichnung .hinweis{margin:10px 0 0;color:var(--petrol-dunkel);opacity:.85}