:root{
  --navy:#1f3a5f; --navy2:#2c4a72; --line:#d9dde3; --bg:#f4f5f7;
  --ink:#222; --muted:#6b7280; --gold:#9a7b34; --ok:#1d7a46; --warn:#b03a2e;
}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--bg)}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
/* Kopfzeile: Dunkelblau mit goldenem Logo (Billy 20, 23.07.2026)
   Erst in Enkelmann-Rot gebaut - Alexander: „das Goldene kann man kaum
   erkennen, und das Blaue wirkte sehr viel ruhiger." Stimmt: Gold auf Rot
   hat zu wenig Kontrast, Gold auf Dunkelblau liest sich klar. Das rote
   Enkelmann-Rot bleibt dort, wo es wirkt: im Desktop-Symbol. */
header.top{background:var(--navy);color:var(--gold);padding:10px 26px;
  border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:14px}
header.top .logo{height:46px;width:auto;flex:none}
header.top .titel{font-size:25px;letter-spacing:.6px;color:var(--gold)}
@media (max-width:700px){
  header.top{padding:9px 12px;gap:10px}
  header.top .logo{height:32px}
  header.top .titel{font-size:20px}
}
nav.menu{background:var(--navy2);padding:0 26px}
nav.menu a{display:inline-block;color:#e8edf5;padding:11px 16px;font-family:Arial,sans-serif;font-size:13.5px}
nav.menu a:hover{background:rgba(255,255,255,.10);text-decoration:none}

/* ── Klappmenue (Billy 20, 22.07.2026) ─────────────────────────────────────
   Statt 26 Punkten nebeneinander: sechs Gruppen, die auf Klick aufgehen.
   Reines CSS + drei Zeilen JavaScript - keine fremde Bibliothek. */
nav.menu{position:relative;white-space:nowrap}
nav.menu .gruppe{display:inline-block;position:relative}
nav.menu .gruppe>button{
  background:none;border:0;color:#e8edf5;cursor:pointer;
  font-family:Arial,sans-serif;font-size:13.5px;padding:11px 16px}
nav.menu .gruppe>button:hover{background:rgba(255,255,255,.10)}
nav.menu .gruppe.auf>button{background:rgba(255,255,255,.18)}
nav.menu .gruppe .klapp{
  display:none;position:absolute;left:0;top:100%;z-index:50;
  background:#fff;border:1px solid #c8d0dc;border-top:0;
  border-radius:0 0 4px 4px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  min-width:230px;padding:5px 0}
nav.menu .gruppe.auf .klapp{display:block}
nav.menu .gruppe .klapp a{
  display:block;color:#1f2d3d;padding:9px 18px;font-size:13.5px;white-space:nowrap}
nav.menu .gruppe .klapp a:hover{background:#eef2f8;text-decoration:none}
nav.menu .zahl{
  background:#c8a047;color:#fff;border-radius:9px;
  padding:1px 7px;font-size:11.5px;margin-left:2px}
@media (max-width:820px){
  nav.menu{white-space:normal}
  nav.menu .gruppe .klapp{position:static;box-shadow:none;border:0;background:rgba(0,0,0,.18)}
  nav.menu .gruppe .klapp a{color:#e8edf5}
}
.wrap{max-width:1040px;margin:24px auto;padding:0 26px}
h1,h2,h3{color:var(--navy);font-weight:normal}
h1{font-size:25px;margin:.2em 0 .6em}
h2{font-size:19px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:4px;padding:14px 16px}
.kpi .zahl{font-size:28px;color:var(--navy)}
.kpi .lbl{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.kpi.warn{border-left-color:var(--warn)} .kpi.warn .zahl{color:var(--warn)}
.kpi.ok{border-left-color:var(--ok)} .kpi.ok .zahl{color:var(--ok)}
table{width:100%;border-collapse:collapse;background:#fff;font-family:Arial,sans-serif;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{background:#eef1f5;color:var(--navy);font-weight:bold}
tr:hover td{background:#fafbfc}
.badge{font-family:Arial,sans-serif;font-size:11.5px;padding:2px 8px;border-radius:10px;display:inline-block}
.b-offen{background:#fbe9e7;color:var(--warn)}
.b-bezahlt{background:#e6f4ec;color:var(--ok)}
.b-ausland{background:#eef0f8;color:var(--navy2)}
.b-pruefen{background:#fdf3e0;color:var(--gold)}
form.such{margin:0 0 16px}
input[type=text],input[type=email],select,textarea{font-family:Arial,sans-serif;font-size:14px;padding:8px 9px;border:1px solid #c4cad3;border-radius:3px;width:100%}
label{font-family:Arial,sans-serif;font-size:12.5px;color:var(--muted);display:block;margin:10px 0 3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.btn{display:inline-block;font-family:Arial,sans-serif;font-size:13.5px;background:var(--navy);color:#fff;padding:9px 16px;border:none;border-radius:3px;cursor:pointer}
.btn:hover{background:var(--navy2);text-decoration:none}
.btn.gold{background:var(--gold)} .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.sm{padding:5px 10px;font-size:12px}
/* Billy 20: Knoepfe mit hellem Pastell-Hintergrund (inline gesetzt) brauchen
   DUNKLE Schrift, sonst weiss auf hell = unlesbar. */
.btn[style*="background:#e"],.btn[style*="background:#f"],.btn[style*="background: #e"],.btn[style*="background: #f"]{color:#1f2a44}
.flash{background:#e6f4ec;border:1px solid #bfe0cd;color:var(--ok);padding:10px 14px;border-radius:3px;margin-bottom:16px;font-family:Arial,sans-serif;font-size:13.5px}
.hinweis{background:#fdf6e3;border:1px solid #ecd9a6;color:#7a5c12;padding:10px 14px;border-radius:3px;font-family:Arial,sans-serif;font-size:13px;margin-bottom:16px}
.sicher{background:#eef2f8;border:1px solid #cdd8ea;color:var(--navy2);padding:9px 13px;border-radius:3px;font-family:Arial,sans-serif;font-size:12.5px;margin:14px 0}
.muted{color:var(--muted)} .right{text-align:right} .nowrap{white-space:nowrap}
dl.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-family:Arial,sans-serif;font-size:14px;margin:0}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0}
footer{color:var(--muted);font-family:Arial,sans-serif;font-size:11.5px;text-align:center;padding:24px}


/* Postausgang-Balken (Billy 20, 22.07.2026) — siehe base.html */
.postbalken{
  background:#fff6e0;border:1px solid #d9b45a;border-left:6px solid #c8a047;
  border-radius:4px;padding:12px 16px;margin-bottom:16px;
  font-family:Arial,sans-serif;font-size:14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.postbalken .btn{margin-left:auto}


/* Akte auf der Kundenkarte (Billy 20, 22.07.2026) — alles chronologisch */
table.akte-verlauf td{vertical-align:top}
table.akte-verlauf tr td:nth-child(2){font-size:15px;width:26px}

details.akte-klapp{margin:10px 0 4px}
details.akte-klapp>summary{
  cursor:pointer;display:inline-block;background:#f3f6fa;border:1px solid #c8d0dc;
  border-radius:4px;padding:7px 14px;font-family:Arial,sans-serif;font-size:13.5px}
details.akte-klapp>summary:hover{background:#e9eff7}
details[open].akte-klapp>summary{background:#e9eff7}

/* Akte: jede Zeile ein Balken zum Aufklappen (Billy 20, 22.07.2026) */
.akte-liste{margin-top:10px;border-top:1px solid #e6eaf0}
details.akte-zeile{border-bottom:1px solid #e6eaf0}
details.akte-zeile>summary{
  cursor:pointer;list-style:none;padding:8px 10px;
  font-family:Arial,sans-serif;font-size:13.5px;
  display:flex;gap:12px;align-items:baseline}
details.akte-zeile>summary::-webkit-details-marker{display:none}
details.akte-zeile>summary:hover{background:#f3f6fa}
details[open].akte-zeile>summary{background:#eef3fa;font-weight:bold}
.akte-datum{white-space:nowrap;color:#5a6675;min-width:82px}
.akte-pfeil{width:18px;text-align:center}
.akte-art{white-space:nowrap;min-width:150px;color:#1f2d3d}
.akte-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akte-anz{white-space:nowrap;color:#8a7330;font-size:12px}
.akte-inhalt{padding:4px 10px 14px 112px}
.akte-brief{white-space:pre-line;background:#fbfcfe;border:1px solid #e6eaf0;
  border-radius:4px;padding:10px 12px;font-size:13px;max-height:340px;overflow:auto}
@media (max-width:760px){
  details.akte-zeile>summary{flex-wrap:wrap}
  .akte-text{white-space:normal;flex-basis:100%}
  .akte-inhalt{padding-left:10px}
}

details.rausnehmen>summary{cursor:pointer;display:inline-block}
details.rausnehmen>summary::-webkit-details-marker{display:none}


/* ── Handy und kleines iPad (Billy 20, 22.07.2026) ─────────────────────────
   Das Programm ist fuer den grossen Bildschirm gebaut - die Kundenkarte hat
   14 Tabellen. Auf dem Telefon lief das ueber den Rand hinaus. Diese Regeln
   sorgen dafuer, dass nichts abgeschnitten wird: breite Tabellen bekommen
   ihren eigenen Schiebebalken, statt die ganze Seite zu verschieben. */
@media (max-width:700px){
  .wrap{padding:0 12px;margin:14px auto}
  h1{font-size:21px}
  h2{font-size:17px}
  .card{padding:14px 12px}
  /* Tabellen einzeln schiebbar, Seite bleibt ruhig */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
        white-space:nowrap;max-width:100%}
  table.akte-verlauf{white-space:normal}
  /* Kennzahlen untereinander statt nebeneinander */
  .grid{grid-template-columns:1fr}
  /* Eingabefelder nicht breiter als der Schirm */
  input[type=text],input[type=password],input[type=email],textarea,select{
    max-width:100%;box-sizing:border-box}
  /* Knoepfe gross genug zum Antippen */
  .btn,button{min-height:38px}
  /* Menue: Gruppen umbrechen statt abschneiden */
  nav.menu{padding:0 10px}
  nav.menu .gruppe>button{padding:10px 11px;font-size:13px}
}


/* Seminar-Katalog + Blaetterbuch (Billy 20, 23.07.2026) */
.sem-karte{border-left:4px solid #1f2d3d}
.sem-karte.vorbei{opacity:.55;border-left-color:#c8d0dc}
.sem-kopf{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.sem-kopf h3{color:#1f2d3d;font-size:19px;font-weight:normal}
.sem-termin{font-family:Arial,sans-serif;font-size:14px;margin:4px 0 2px}
.sem-preis{margin-left:auto;text-align:right;white-space:nowrap}
.sem-preis .p-gross{font-size:26px;color:#1f2d3d}
.sem-preis .p-abo{font-family:Arial,sans-serif;font-size:13px;color:#8a7330;margin-top:3px}
.heft-rahmen{display:flex;align-items:center;gap:10px;justify-content:center;
  background:#eef1f5;border-radius:6px;padding:12px}
.heft-rahmen img{max-width:100%;max-height:72vh;box-shadow:0 3px 14px rgba(0,0,0,.22);
  border-radius:3px;background:#fff}
.heft-pfeil{background:#1f2d3d;color:#fff;border:0;border-radius:50%;
  width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer;flex:none}
.heft-pfeil:hover{background:#33475f}
.heft-fuss{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin-top:10px;font-family:Arial,sans-serif;font-size:13.5px}
@media (max-width:700px){
  .sem-preis{margin-left:0;text-align:left}
  .heft-pfeil{width:38px;height:38px;font-size:22px}
  .heft-rahmen{padding:6px;gap:4px}
}

/* Flipsnack-Fenster (Billy 20, 23.07.2026) */
.flipbuch{position:relative;width:100%;padding-top:62%;background:#eef1f5;border-radius:6px;overflow:hidden}
.flipbuch iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:700px){ .flipbuch{padding-top:78%} }