/* ============================================================
   QM-Plattform — Haus am Geestrücken
   Designsystem. Bordeaux als Marke, warmes Neutralgrau als
   Arbeitsfläche, Gold ausschliesslich für Fristen/Aufmerksamkeit.
   ============================================================ */

:root {
  /* Marke */
  --bordeaux:      #850034;
  --bordeaux-hell: #A3004A;
  --bordeaux-tief: #5C0025;
  --gold:          #B8902B;
  --gold-tief:     #8A6C1F;

  /* Arbeitsfläche */
  --grund:      #FAF8F6;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #F4F1ED;
  --flaeche-3:  #EAE5DF;
  --linie:      #DED7CF;
  --linie-fein: #EDE8E2;

  /* Schrift */
  --text:       #241C1A;
  --text-2:     #5A4F4A;
  --text-3:     #6B605A;   /* 4.87:1 selbst auf --flaeche-3 */
  --text-auf-dunkel: #FBF7F4;

  /* Status — alle >= 4.5:1 auf weiss */
  --ok:        #1F6F43;
  --ok-grund:  #E8F3EC;
  --warn:      #6F5615;
  --warn-grund:#FAF4E3;
  --alarm:     #A3232B;
  --alarm-grund:#FBEAEA;
  --info:      #1F5C7A;
  --info-grund:#E6F0F5;
  --neutral-grund: #F0EDE9;

  /* Masse */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --nav-b: 268px;
  --schatten-1: 0 1px 2px rgba(36,28,26,.06), 0 1px 3px rgba(36,28,26,.04);
  --schatten-2: 0 2px 8px rgba(36,28,26,.08), 0 8px 24px rgba(36,28,26,.06);
  --schatten-3: 0 12px 48px rgba(36,28,26,.18);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--bordeaux); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--flaeche-3); border-radius: 5px; border: 2px solid var(--grund); }
::-webkit-scrollbar-thumb:hover { background: #D6CEC5; }

/* ---------- Anmeldung ---------- */

#anmeldung {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1.15fr 1fr;
  background: var(--flaeche);
}
#anmeldung.weg { display: none; }

.anm-bild {
  position: relative;
  background: linear-gradient(160deg, var(--bordeaux-tief), var(--bordeaux) 55%, #7d3040);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px;
}
.anm-bild::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 15% 10%, rgba(184,144,43,.20), transparent 60%),
    radial-gradient(500px 500px at 90% 90%, rgba(255,255,255,.10), transparent 60%);
}
.anm-marke { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; color: var(--text-auf-dunkel); }
.anm-marke .zeichen { width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px solid rgba(251,247,244,.45); border-radius: 9px; }
.anm-marke .zeichen svg { width: 22px; height: 22px; }
.anm-marke b { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .01em; display: block; line-height: 1.15; }
.anm-marke span { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }

.anm-worte { position: relative; z-index: 2; max-width: 470px; color: var(--text-auf-dunkel); }
.anm-worte h1 { font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.anm-worte p { margin-top: 14px; font-size: 15px; line-height: 1.65; opacity: .88; }
.anm-fuss { position: relative; z-index: 2; display: flex; gap: 26px; color: rgba(251,247,244,.78); font-size: 12px; }
.anm-fuss b { display: block; font-size: 20px; color: var(--text-auf-dunkel); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.anm-wahl { display: flex; flex-direction: column; justify-content: center; padding: 44px 56px; overflow-y: auto; }
.anm-wahl h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.anm-wahl > p { color: var(--text-2); margin-top: 7px; margin-bottom: 26px; max-width: 44ch; }

.konto {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 15px; border: 1.5px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche); margin-bottom: 9px; transition: .14s;
}
.konto:hover { border-color: #C9BDB2; background: var(--flaeche-2); }
.konto[aria-checked="true"] { border-color: var(--bordeaux); background: #FCF6F7; box-shadow: 0 0 0 3px rgba(133,0,52,.09); }
.konto .kuerzel {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--bordeaux); color: var(--text-auf-dunkel); font-weight: 600; font-size: 14px; letter-spacing: .02em;
}
.konto .wer { flex: 1; min-width: 0; }
.konto .wer b { display: block; font-size: 14.5px; font-weight: 600; }
.konto .wer span { font-size: 12.5px; color: var(--text-3); }
.konto .haken { width: 20px; height: 20px; color: var(--bordeaux); opacity: 0; flex: none; }
.konto[aria-checked="true"] .haken { opacity: 1; }

.anm-recht { margin-top: 18px; padding: 13px 15px; background: var(--flaeche-2); border-radius: var(--r-m); font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.anm-recht b { color: var(--text); }

/* ---------- Grundgerüst ---------- */

#geruest { display: none; height: 100vh; grid-template-columns: var(--nav-b) 1fr; }
#geruest.an { display: grid; }

/* ---------- Navigation ---------- */

nav#seitenleiste {
  background: var(--flaeche-2); border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; overflow: hidden;
}
.nav-kopf { padding: 15px 16px 13px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 11px; }
.nav-kopf .zeichen { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--bordeaux); color: var(--text-auf-dunkel); display: grid; place-items: center; }
.nav-kopf .zeichen svg { width: 18px; height: 18px; }
.nav-kopf b { font-family: var(--serif); font-size: 17px; font-weight: 600; display: block; line-height: 1.2; }
.nav-kopf span { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }

.nav-suche { padding: 11px 12px; border-bottom: 1px solid var(--linie); }
.nav-suche button {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche);
  color: var(--text-3); font-size: 13px; transition: .14s;
}
.nav-suche button:hover { border-color: #C9BDB2; color: var(--text-2); }
.nav-suche svg { width: 15px; height: 15px; flex: none; }
.nav-suche kbd {
  margin-left: auto; font-family: var(--sans); font-size: 10.5px; padding: 2px 5px;
  background: var(--flaeche-3); border-radius: 4px; color: var(--text-3); letter-spacing: .04em;
}

.nav-rollen { flex: 1; overflow-y: auto; padding: 10px 9px 16px; }
.nav-gruppe { margin-bottom: 3px; }
.nav-titel {
  padding: 12px 9px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.nav-punkt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7.5px 9px;
  border-radius: var(--r-s); color: var(--text-2); font-size: 13.5px; text-align: left; transition: .12s;
  position: relative;
}
.nav-punkt:hover { background: var(--flaeche-3); color: var(--text); }
.nav-punkt.aktiv { background: var(--bordeaux); color: var(--text-auf-dunkel); font-weight: 500; }
.nav-punkt.aktiv .zahl { background: rgba(251,247,244,.22); color: var(--text-auf-dunkel); }
.nav-punkt svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav-punkt .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-punkt .zahl {
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 9px;
  background: var(--flaeche-3); color: var(--text-2); min-width: 20px; text-align: center;
}
.nav-punkt .zahl.mahnt { background: var(--alarm-grund); color: var(--alarm); }
.nav-punkt .zahl.frist { background: var(--warn-grund); color: var(--warn); }
.nav-unter { padding-left: 26px; }

.nav-fuss { border-top: 1px solid var(--linie); padding: 10px 12px; }
.nav-nutzer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px; border-radius: var(--r-s); transition: .12s; }
.nav-nutzer:hover { background: var(--flaeche-3); }
.nav-nutzer .kuerzel { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bordeaux); color: var(--text-auf-dunkel); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; }
.nav-nutzer .wer { flex: 1; min-width: 0; text-align: left; }
.nav-nutzer .wer b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-nutzer .wer span { font-size: 11px; color: var(--text-3); }
.nav-nutzer > svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.nav-nutzer:hover > svg { color: var(--text); }

/* ---------- Arbeitsfläche ---------- */

main#buehne { display: flex; flex-direction: column; overflow: hidden; background: var(--grund); }

header#band {
  height: 56px; flex: none; border-bottom: 1px solid var(--linie); background: var(--flaeche);
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.band-pfad { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.band-pfad b { font-size: 15px; color: var(--text); font-weight: 600; }
.band-pfad svg { width: 13px; height: 13px; opacity: .5; }
.band-rest { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.stichtag {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 20px;
  background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 12px; color: var(--text-2);
}
.stichtag.aktiv { background: var(--info-grund); border-color: #B9D4E0; color: var(--info); font-weight: 500; }
.stichtag svg { width: 14px; height: 14px; }
.stichtag input { border: none; background: none; font-size: 12px; width: 92px; color: inherit; }

.knopf {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-s);
  font-size: 13px; font-weight: 500; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text); transition: .13s; white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-2); border-color: #C9BDB2; }
.knopf svg { width: 15px; height: 15px; }
.knopf.stark { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--text-auf-dunkel); }
.knopf.stark:hover { background: var(--bordeaux-hell); border-color: var(--bordeaux-hell); }
.knopf.klein { padding: 4.5px 9px; font-size: 12px; }
.knopf.leer { border-color: transparent; background: none; }
.knopf.leer:hover { background: var(--flaeche-2); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf.gefahr { color: var(--alarm); border-color: #E8C9C9; }
.knopf.gefahr:hover { background: var(--alarm-grund); }

#blatt { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.blatt-innen { max-width: 1320px; margin: 0 auto; padding: 24px 26px 72px; }

/* ---------- Bausteine ---------- */

.seiten-kopf { margin-bottom: 20px; }
.seiten-kopf h2 { font-family: var(--serif); font-size: 31px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; }
.seiten-kopf p { color: var(--text-2); margin-top: 5px; max-width: 76ch; font-size: 13.5px; }
.kopf-reihe { display: flex; align-items: flex-start; gap: 18px; }
.kopf-reihe .rest { margin-left: auto; display: flex; gap: 8px; flex: none; padding-top: 5px; }

.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: var(--schatten-1); }
.tafel { margin-bottom: 16px; }
.tafel:last-child { margin-bottom: 0; }
.tafel-kopf { padding: 13px 16px; border-bottom: 1px solid var(--linie-fein); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 7px; }
.tafel-kopf h3 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tafel-kopf h3 svg { width: 16px; height: 16px; color: var(--bordeaux); }
.tafel-kopf .rest { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.tafel-leib { padding: 16px; }
.tafel-leib.eng { padding: 0; overflow-x: auto; }   /* breite Tabellen scrollen im Kasten, nicht die Seite */

.gitter { display: grid; gap: 14px; }
.gitter > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g-haupt { grid-template-columns: minmax(0,1fr) 348px; align-items: start; }
@media (max-width: 1340px) { .g4 { grid-template-columns: repeat(2,1fr); } .g5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px) { .g5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1180px) { .g-haupt { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .g3, .g2 { grid-template-columns: 1fr; } }

.zahl-kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 14px 15px; position: relative; overflow: hidden; transition: .14s; text-align: left; width: 100%;
}
.zahl-kachel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--linie); }
.zahl-kachel.ok::before { background: var(--ok); }
.zahl-kachel.warn::before { background: var(--warn); }
.zahl-kachel.alarm::before { background: var(--alarm); }
.zahl-kachel.info::before { background: var(--info); }
button.zahl-kachel:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
.zahl-kachel .oben { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.zahl-kachel .oben svg { width: 14px; height: 14px; flex: none; }
/* Kennzahlen bewusst in der Sans: Cormorant setzt Mediävalziffern,
   dort ist die Eins von einem I nicht zu unterscheiden. */
.zahl-kachel .wert { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl-kachel .wert.ok { color: var(--ok); }
.zahl-kachel .wert.warn { color: var(--warn); }
.zahl-kachel .wert.alarm { color: var(--alarm); }
.zahl-kachel .wert.info { color: var(--info); }
.zahl-kachel .unten { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.4; min-height: 17px; }

.marke {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--neutral-grund); color: var(--text-2);
}
.marke svg { width: 12px; height: 12px; }
.marke.ok { background: var(--ok-grund); color: var(--ok); }
.marke.warn { background: var(--warn-grund); color: var(--warn); }
.marke.alarm { background: var(--alarm-grund); color: var(--alarm); }
.marke.info { background: var(--info-grund); color: var(--info); }
.marke.mark { background: #F6ECEE; color: var(--bordeaux); }
.punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
.punkt.ok { background: var(--ok); } .punkt.warn { background: var(--warn); }
.punkt.alarm { background: var(--alarm); } .punkt.info { background: var(--info); }

/* Objektzeile — überall gleich */
.zeile {
  display: flex; align-items: center; gap: 13px; padding: 12px 16px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--linie-fein); transition: .1s; position: relative;
}
.zeile:last-child { border-bottom: none; }
.zeile:hover { background: var(--flaeche-2); }
.zeile.gewaehlt { background: #FCF6F7; }
.zeile.gewaehlt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bordeaux); }
.zeile .kennung { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); flex: none; width: 82px; }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .haupt b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .haupt span { font-size: 12px; color: var(--text-3); display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .seit { font-size: 12px; color: var(--text-3); flex: none; text-align: right; }
.zeile .marken { display: flex; gap: 6px; flex: none; align-items: center; }

.leer-hinweis { padding: 42px 20px; text-align: center; color: var(--text-3); }
.leer-hinweis svg { width: 30px; height: 30px; opacity: .35; margin-bottom: 9px; }
.leer-hinweis p { font-size: 13px; }

.feld { display: flex; flex-direction: column; gap: 5px; }
.feld > label { font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .03em; text-transform: uppercase; }
.feld input, .feld select, .feld textarea {
  padding: 8px 11px; border: 1px solid var(--linie); border-radius: var(--r-s);
  background: var(--flaeche); font-size: 13.5px; width: 100%; transition: .12s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(133,0,52,.10);
}
.feld textarea { resize: vertical; min-height: 74px; line-height: 1.55; }
.feld-reihe { display: flex; gap: 11px; }
.feld-reihe > * { flex: 1; }

.paar { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--linie-fein); font-size: 13px; }
.paar:last-child { border-bottom: none; }
.paar dt { color: var(--text-3); flex: none; }
.paar dd { text-align: right; font-weight: 500; }

.balken { height: 6px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 3px; background: var(--bordeaux); transition: width .5s cubic-bezier(.4,0,.2,1); }
.balken i.ok { background: var(--ok); } .balken i.warn { background: var(--warn); } .balken i.alarm { background: var(--alarm); }

/* ---------- Prüfbereitschaft ---------- */

.bereit {
  background: linear-gradient(150deg, var(--bordeaux-tief), var(--bordeaux) 60%, #7E2838);
  border-radius: var(--r-l); padding: 22px 24px; color: var(--text-auf-dunkel);
  display: flex; gap: 26px; align-items: center; position: relative; overflow: hidden;
}
.bereit::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 88% 15%, rgba(184,144,43,.22), transparent 62%);
}
.bereit-ring { position: relative; z-index: 2; flex: none; width: 116px; height: 116px; }
.bereit-ring svg { transform: rotate(-90deg); }
.bereit-ring .zahl {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.bereit-ring .zahl b { font-size: 36px; font-weight: 600; line-height: 1; display: block; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bereit-ring .zahl span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.bereit-wort { position: relative; z-index: 2; flex: 1; min-width: 0; }
.bereit-wort h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.bereit-wort p { font-size: 13.5px; opacity: .9; margin-top: 5px; line-height: 1.6; max-width: 62ch; }
.bereit-teile { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; flex: none; width: 330px; }
.bereit-teil { font-size: 12px; }
.bereit-teil .oben { display: flex; justify-content: space-between; margin-bottom: 3px; opacity: .92; }
.bereit-teil .oben b { font-weight: 600; }
.bereit-teil .schiene { height: 4px; border-radius: 2px; background: rgba(251,247,244,.25); overflow: hidden; }
.bereit-teil .schiene i { display: block; height: 100%; background: var(--text-auf-dunkel); border-radius: 2px; transition: width .6s; }
.bereit-teil.schwach .schiene i { background: #E8B4B4; }
@media (max-width: 1180px) { .bereit { flex-wrap: wrap; } .bereit-teile { width: 100%; } }

/* ---------- Vernetzungsgraph ---------- */

.graph-halter { position: relative; background: var(--flaeche); border-radius: var(--r-m); overflow: hidden; }
.graph-halter svg { display: block; width: 100%; height: auto; }
.graph-knoten { cursor: pointer; }
.graph-knoten rect, .graph-knoten circle { transition: .18s; }
.graph-knoten:hover rect { filter: brightness(.97); }
.graph-knoten.matt { opacity: .28; }
.graph-kante { transition: .18s; }
.graph-kante.matt { opacity: .10; }
.graph-kante.hell { stroke-width: 2.4; }
.graph-legende { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 11px 16px; border-top: 1px solid var(--linie-fein); font-size: 12px; color: var(--text-2); }
.graph-legende span { display: inline-flex; align-items: center; gap: 6px; }
.graph-legende i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* ---------- Kopilot ---------- */

.kopilot-start {
  border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche);
  padding: 4px; display: flex; align-items: center; gap: 9px; box-shadow: var(--schatten-1);
}
.kopilot-start svg.lupe { width: 17px; height: 17px; color: var(--bordeaux); margin-left: 10px; flex: none; }
.kopilot-start input { flex: 1; border: none; outline: none; padding: 9px 0; font-size: 14px; background: none; }
.kopilot-start input::placeholder { color: var(--text-3); }

.vorschlaege { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.vorschlag {
  padding: 6px 11px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche);
  font-size: 12.5px; color: var(--text-2); transition: .13s;
}
.vorschlag:hover { border-color: var(--bordeaux); color: var(--bordeaux); background: #FCF6F7; }

.antwort { border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); overflow: hidden; margin-top: 14px; }
.antwort-kopf { padding: 13px 16px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie-fein); display: flex; align-items: center; gap: 9px; }
.antwort-kopf svg { width: 16px; height: 16px; color: var(--bordeaux); }
.antwort-kopf b { font-size: 13px; }
.antwort-leib { padding: 16px; }
.antwort-satz { font-size: 15px; line-height: 1.65; }
.antwort-satz b { color: var(--bordeaux); }
.beleg-liste { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.beleg-liste .beleg { min-width: 0; }
.beleg {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--linie-fein);
  border-radius: var(--r-s); background: var(--flaeche-2); width: 100%; text-align: left; transition: .12s;
}
.beleg:hover { border-color: var(--bordeaux); background: #FCF6F7; }
.beleg .art { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); width: 92px; flex: none; }
.beleg .was { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }

.denkt { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--text-2); font-size: 13px; }
.denkt .kreis { width: 15px; height: 15px; border: 2px solid var(--flaeche-3); border-top-color: var(--bordeaux); border-radius: 50%; animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.schritt { animation: auf .35s ease both; }
@keyframes auf { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- Schublade (Detail) ---------- */

#schleier { position: fixed; inset: 0; background: rgba(36,28,26,.34); opacity: 0; pointer-events: none; transition: .22s; z-index: 60; }
#schleier.an { opacity: 1; pointer-events: auto; }

#schublade {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 94vw); background: var(--flaeche);
  box-shadow: var(--schatten-3); transform: translateX(102%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 70; display: flex; flex-direction: column;
}
#schublade.an { transform: none; }
.schub-kopf { padding: 17px 20px; border-bottom: 1px solid var(--linie); display: flex; align-items: flex-start; gap: 13px; flex: none; }
.schub-kopf .kennung { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.schub-kopf h3 { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; margin-top: 2px; }
.schub-kopf .zu { margin-left: auto; flex: none; padding: 5px; border-radius: var(--r-s); color: var(--text-3); }
.schub-kopf .zu:hover { background: var(--flaeche-2); color: var(--text); }
.schub-kopf .zu svg { width: 18px; height: 18px; display: block; }
.schub-reiter { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--linie); flex: none; }
.schub-reiter button { padding: 10px 12px; font-size: 13px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.schub-reiter button:hover { color: var(--text); }
.schub-reiter button.aktiv { color: var(--bordeaux); border-bottom-color: var(--bordeaux); font-weight: 600; }
.schub-leib { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }

.zeitstrahl { position: relative; padding-left: 22px; }
.zeitstrahl::before { content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 1.5px; background: var(--linie); }
.zs-punkt { position: relative; padding-bottom: 17px; }
.zs-punkt::before {
  content: ''; position: absolute; left: -21px; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--flaeche); border: 2.5px solid var(--linie);
}
.zs-punkt.ok::before { border-color: var(--ok); }
.zs-punkt.warn::before { border-color: var(--warn); }
.zs-punkt.alarm::before { border-color: var(--alarm); }
.zs-punkt.mark::before { border-color: var(--bordeaux); }
.zs-punkt .wann { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.zs-punkt .was { font-size: 13.5px; font-weight: 500; margin-top: 1px; }
.zs-punkt .wer { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ---------- Kommandoleiste ---------- */

#kommando { position: fixed; inset: 0; z-index: 90; display: none; padding-top: 12vh; justify-content: center; background: rgba(36,28,26,.3); }
#kommando.an { display: flex; }
.kmd-kasten { width: min(620px, 92vw); height: fit-content; max-height: 66vh; background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--schatten-3); overflow: hidden; display: flex; flex-direction: column; animation: kmdauf .16s ease; }
@keyframes kmdauf { from { opacity: 0; transform: translateY(-9px) scale(.99); } to { opacity: 1; transform: none; } }
.kmd-eingabe { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--linie); }
.kmd-eingabe svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.kmd-eingabe input { flex: 1; border: none; outline: none; font-size: 16px; background: none; }
.kmd-liste { overflow-y: auto; padding: 7px; }
.kmd-gruppe { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: 9px 11px 5px; }
.kmd-treffer { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--r-s); text-align: left; }
.kmd-treffer.auf { background: var(--bordeaux); color: var(--text-auf-dunkel); }
.kmd-treffer.auf .kmd-neben, .kmd-treffer.auf .kennung { color: rgba(251,247,244,.75); }
.kmd-treffer svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.kmd-treffer .kmd-was { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmd-neben { font-size: 11.5px; color: var(--text-3); flex: none; }

/* ---------- Meldung ---------- */

#meldungen { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.meldung {
  display: flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 30px;
  background: var(--text); color: var(--text-auf-dunkel); box-shadow: var(--schatten-2);
  font-size: 13.5px; animation: meldauf .25s ease both; max-width: 90vw;
}
@keyframes meldauf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.meldung.weg { animation: meldzu .25s ease both; }
@keyframes meldzu { to { opacity: 0; transform: translateY(9px); } }
.meldung svg { width: 16px; height: 16px; flex: none; }
.meldung.ok svg { color: #7CD9A3; }
.meldung.alarm svg { color: #F2A0A0; }

/* ---------- Sonstiges ---------- */

.reiter-reihe { display: flex; gap: 3px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; overflow-x: auto; }
.reiter-reihe button { padding: 9px 13px; font-size: 13.5px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter-reihe button:hover { color: var(--text); }
.reiter-reihe button.aktiv { color: var(--bordeaux); border-bottom-color: var(--bordeaux); font-weight: 600; }

.filter-reihe { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-reihe input[type="search"], .filter-reihe select {
  padding: 7px 11px; border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); font-size: 13px;
}
.filter-reihe input[type="search"] { min-width: 230px; }
.filter-reihe input:focus, .filter-reihe select:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(133,0,52,.09); }

table.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.liste th {
  text-align: left; padding: 9px 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--linie); white-space: nowrap;
}
table.liste td { padding: 11px 14px; border-bottom: 1px solid var(--linie-fein); vertical-align: middle; }
table.liste tbody tr { transition: .1s; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste tbody tr.klick { cursor: pointer; }
table.liste td.eng { width: 1%; white-space: nowrap; }
table.liste .kennung { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

.hinweis-band {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-radius: var(--r-s);
  font-size: 13px; line-height: 1.55; margin-bottom: 14px;
}
.hinweis-band svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.hinweis-band.warn { background: var(--warn-grund); color: #6B540F; }
.hinweis-band.alarm { background: var(--alarm-grund); color: #7E1A20; }
.hinweis-band.info { background: var(--info-grund); color: #164657; }
.hinweis-band.ok { background: var(--ok-grund); color: #145733; }

.karte-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 13px; }
.karte {
  border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); padding: 15px;
  transition: .14s; text-align: left; width: 100%; position: relative; overflow: hidden;
}
button.karte:hover { box-shadow: var(--schatten-2); border-color: #C9BDB2; transform: translateY(-1px); }
.karte .karte-kopf { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.karte .karte-kopf b { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; line-height: 1.35; }
.karte .karte-zeile { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.karte .karte-zeile b { font-weight: 600; color: var(--text); }

.mini-titel { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }

.wirkung { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.wirkung .schiene { flex: 1; height: 5px; background: var(--flaeche-3); border-radius: 3px; overflow: hidden; }
.wirkung .schiene i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }

.stufen { display: flex; align-items: center; gap: 0; margin: 4px 0 14px; overflow: hidden; }
.stufe { flex: none; text-align: center; position: relative; padding-top: 24px; font-size: 12px; color: var(--text-3); min-width: 92px; }
.stufe::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--flaeche); border: 2.5px solid var(--linie); z-index: 2;
}
.stufen-strich { flex: 1; height: 2.5px; background: var(--linie); margin-top: -17px; min-width: 14px; }
.stufen-strich.fertig { background: var(--ok); }
.stufe.fertig { color: var(--text-2); }
.stufe.fertig::before { background: var(--ok); border-color: var(--ok); }
.stufe.jetzt { color: var(--bordeaux); font-weight: 600; }
.stufe.jetzt::before { border-color: var(--bordeaux); background: var(--flaeche); box-shadow: 0 0 0 4px rgba(133,0,52,.13); }

.pdf-blatt {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: 26px 30px; font-family: var(--serif); box-shadow: var(--schatten-1);
}
.pdf-blatt h4 { font-size: 20px; font-weight: 600; margin-bottom: 3px; }
.pdf-blatt .pdf-kopf { border-bottom: 2px solid var(--bordeaux); padding-bottom: 11px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: flex-end; }
.pdf-blatt .pdf-kopf span { font-family: var(--sans); font-size: 11.5px; color: var(--text-3); }
.pdf-blatt p { font-size: 14.5px; line-height: 1.7; margin-bottom: 11px; }
.pdf-blatt .pdf-fuss { margin-top: 18px; padding-top: 11px; border-top: 1px solid var(--linie); font-family: var(--sans); font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; }

.stichtag-band {
  background: var(--info-grund); border-bottom: 1px solid #B9D4E0; padding: 8px 18px;
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #164657; flex: none;
}
.stichtag-band svg { width: 15px; height: 15px; }
.stichtag-band .knopf { margin-left: auto; }

.druck-nur { display: none; }
@media print {
  body { overflow: visible; }
  nav#seitenleiste, header#band, #schublade, #schleier, #kommando { display: none !important; }
  #geruest { display: block !important; }
  .druck-nur { display: block; }
}

/* ============================================================
   Demo-Kennzeichnung
   ============================================================ */

#demo-band {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 80;
  background: repeating-linear-gradient(135deg, #2B2118, #2B2118 11px, #332719 11px, #332719 22px);
  color: #F3E4C4; display: flex; align-items: center; gap: 11px; padding: 0 16px; font-size: 12px;
}
#demo-band svg { width: 14px; height: 14px; flex: none; color: var(--gold); }
#demo-band b { color: #FBF7F4; font-weight: 600; letter-spacing: .02em; }
#demo-band .rest { margin-left: auto; display: flex; align-items: center; gap: 9px; }
#demo-band button {
  font-size: 11.5px; color: #F3E4C4; border: 1px solid rgba(243,228,196,.34);
  border-radius: 5px; padding: 3px 9px; transition: .13s;
}
#demo-band button:hover { background: rgba(243,228,196,.14); color: #fff; }
body.mit-demoband #anmeldung { top: 30px; }
body.mit-demoband #geruest { height: calc(100vh - 30px); margin-top: 30px; }
body.mit-demoband #schublade { top: 30px; }
body.mit-demoband #anmerkung-panel { top: 30px; }

.demo-marke {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--warn-grund); color: var(--warn); border: 1px solid #E4D3A8; white-space: nowrap;
}
.demo-marke svg { width: 11px; height: 11px; }

.demo-hinweis {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border-radius: var(--r-s);
  background: var(--flaeche-2); border: 1px dashed var(--linie); margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
}
.demo-hinweis svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--warn); }
.demo-hinweis b { color: var(--text); }

/* ============================================================
   Anmerkungen
   ============================================================ */

.anm-knopf {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px;
  font-size: 11.5px; color: var(--text-3); border: 1px solid transparent; transition: .13s;
  white-space: nowrap; flex: none;
}
.anm-knopf:hover { color: var(--bordeaux); border-color: var(--linie); background: var(--flaeche); }
.anm-knopf svg { width: 13px; height: 13px; }
.anm-knopf.hat { color: var(--bordeaux); background: #FBF0F3; border-color: #EBD3DA; font-weight: 600; }
.seiten-kopf .anm-knopf { padding: 5px 11px; font-size: 12.5px; border-color: var(--linie); background: var(--flaeche); }

#anmerkung-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 94vw); background: var(--flaeche);
  box-shadow: var(--schatten-3); transform: translateX(102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  z-index: 78; display: flex; flex-direction: column;
}
#anmerkung-panel.an { transform: none; }
.anmp-kopf { padding: 16px 19px; border-bottom: 1px solid var(--linie); display: flex; align-items: flex-start; gap: 12px; flex: none; }
.anmp-kopf .kennung { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.anmp-kopf h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.anmp-kopf .zu { margin-left: auto; flex: none; padding: 5px; border-radius: var(--r-s); color: var(--text-3); }
.anmp-kopf .zu:hover { background: var(--flaeche-2); color: var(--text); }
.anmp-kopf .zu svg { width: 18px; height: 18px; display: block; }
.anmp-leib { flex: 1; overflow-y: auto; padding: 16px 19px; }
.anmp-fuss { flex: none; border-top: 1px solid var(--linie); padding: 14px 19px; background: var(--flaeche-2); }

.anm-eintrag {
  border: 1px solid var(--linie-fein); border-radius: var(--r-s); padding: 12px 14px;
  background: var(--flaeche-2); margin-bottom: 10px;
}
.anm-eintrag .oben { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.anm-eintrag .kuerzel {
  width: 25px; height: 25px; border-radius: 50%; background: var(--bordeaux); color: var(--text-auf-dunkel);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none;
}
.anm-eintrag .wer { font-size: 12.5px; font-weight: 600; }
.anm-eintrag .wann { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.anm-eintrag p { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.anm-eintrag .weg { color: var(--text-3); padding: 3px; border-radius: 4px; }
.anm-eintrag .weg:hover { color: var(--alarm); background: var(--alarm-grund); }
.anm-eintrag .weg svg { width: 13px; height: 13px; display: block; }

.anm-leer { text-align: center; padding: 30px 16px; color: var(--text-3); }
.anm-leer svg { width: 26px; height: 26px; opacity: .4; margin-bottom: 8px; }
.anm-leer p { font-size: 13px; line-height: 1.6; }

.herleitung {
  background: var(--info-grund); border: 1px solid #B9D4E0; border-radius: var(--r-s);
  padding: 13px 15px; margin-bottom: 16px; font-size: 13px; line-height: 1.65; color: #164657;
}
.herleitung .mini-titel { color: #2A6E8C; margin-bottom: 6px; }

/* ============================================================
   Migration und nächste Schritte
   ============================================================ */

.stufenplan { display: grid; gap: 0; }
.plan-stufe { display: flex; gap: 16px; position: relative; padding-bottom: 20px; }
.plan-stufe:last-child { padding-bottom: 0; }
.plan-stufe::before {
  content: ''; position: absolute; left: 17px; top: 38px; bottom: -2px; width: 2px; background: var(--linie);
}
.plan-stufe:last-child::before { display: none; }
.plan-nr {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--bordeaux);
  color: var(--text-auf-dunkel); display: grid; place-items: center; font-weight: 600; font-size: 14px;
  position: relative; z-index: 2;
}
.plan-stufe.spaeter .plan-nr { background: var(--flaeche-3); color: var(--text-2); }
.plan-inhalt { flex: 1; min-width: 0; padding-top: 3px; }
.plan-inhalt h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.plan-inhalt p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 9px; }
.plan-meta { display: flex; gap: 7px; flex-wrap: wrap; }

.import-feld {
  border: 2px dashed var(--linie); border-radius: var(--r-m); padding: 28px 20px; text-align: center;
  background: var(--flaeche-2); transition: .15s; cursor: pointer;
}
.import-feld:hover { border-color: var(--bordeaux); background: #FCF6F7; }
.import-feld svg { width: 30px; height: 30px; color: var(--text-3); margin-bottom: 9px; }
.import-feld b { display: block; font-size: 14px; margin-bottom: 3px; }
.import-feld span { font-size: 12.5px; color: var(--text-3); }

.mapping-pfeil { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.mapping-pfeil svg { width: 16px; height: 16px; }

.offen-punkt {
  display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--linie-fein); align-items: flex-start;
}
.offen-punkt:last-child { border-bottom: none; }
.offen-punkt .num {
  width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--flaeche-3);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text-2);
}
.offen-punkt .txt { flex: 1; min-width: 0; }
.offen-punkt .txt b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.offen-punkt .txt p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.offen-punkt .wer { flex: none; }

/* Logo */
.logo-bild { height: 30px; width: auto; display: block; }
.nav-kopf .logo-bild { height: 26px; }
.anm-marke .logo-bild { height: 34px; }

/* ============================================================
   Betrieb und Kosten
   ============================================================ */

/* --- Preismodell --- */
.k-modelle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.k-modell {
  min-width: 0; text-align: left; padding: 15px 17px; border-radius: var(--r-m);
  border: 1.5px solid var(--linie); background: var(--flaeche); transition: .14s;
  display: flex; flex-direction: column; gap: 6px;
}
.k-modell:hover { border-color: var(--bordeaux); }
.k-modell.an { border-color: var(--bordeaux); background: #FDF6F8; box-shadow: var(--schatten-1); }
.k-modell-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 650; color: var(--text);
}
.k-modell-kopf svg {
  width: 17px; height: 17px; flex: none; padding: 2px; border-radius: 50%;
  background: var(--flaeche-3); color: var(--flaeche-3);
}
.k-modell.an .k-modell-kopf svg { background: var(--bordeaux); color: var(--text-auf-dunkel); }
.k-modell-satz { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* --- Stufen --- */
.k-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.k-stufe {
  position: relative; min-width: 0; text-align: left; padding: 18px 18px 16px;
  border-radius: var(--r-m); border: 1.5px solid var(--linie); background: var(--flaeche);
  transition: .14s; display: flex; flex-direction: column;
}
.k-stufe:hover { border-color: var(--bordeaux); }
.k-stufe.empf { border-color: var(--gold); }
.k-stufe.an { border-color: var(--bordeaux); border-width: 2px; box-shadow: var(--schatten-2); }
.k-empf {
  position: absolute; top: -9px; left: 18px; padding: 2px 9px; border-radius: 99px;
  background: var(--gold); color: #241C1A; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.k-stufe-name {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
/* Zahlen bleiben in der Sans — Cormorant setzt Mediävalziffern */
.k-rate { display: flex; align-items: baseline; gap: 6px; font-family: var(--sans); }
.k-rate b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--bordeaux); line-height: 1.1; }
.k-rate span { font-size: 13px; color: var(--text-2); }
.k-neben { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.k-stufe-was {
  font-size: 12.5px; color: var(--text-2); line-height: 1.6;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--linie-fein);
}
.k-fussnote { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 12px 0 20px; }

/* --- Rechenpositionen --- */
.k-pos { padding: 15px 0; border-bottom: 1px solid var(--linie-fein); }
.k-pos:first-child { padding-top: 2px; }
.k-pos:last-child { border-bottom: none; padding-bottom: 4px; }
.k-pos-kopf { display: flex; align-items: flex-start; gap: 11px; }
.k-pos-kopf > svg { width: 19px; height: 19px; flex: none; color: var(--bordeaux); margin-top: 1px; }
.k-pos-kopf > div { flex: 1; min-width: 0; }
.k-pos-kopf b { display: block; font-size: 14px; font-weight: 650; }
.k-pos-modell { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.k-pos-preis {
  flex: none; font-family: var(--sans); font-size: 16px; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.k-pos-text { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin: 8px 0 0 30px; }
.k-pos.schlicht .k-pos-text { margin-top: 6px; }
.k-token { display: flex; align-items: center; gap: 11px; margin: 10px 0 0 30px; }
.k-token-schiene {
  flex: none; width: 92px; height: 5px; border-radius: 99px;
  background: var(--flaeche-3); overflow: hidden;
}
.k-token-schiene i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--bordeaux), var(--bordeaux-hell));
}
.k-token span { font-size: 11.5px; color: var(--text-3); }
.k-token b { font-family: var(--sans); font-weight: 650; color: var(--text-2); }
.k-summe {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 13px; border-top: 1.5px solid var(--linie);
  font-size: 13px; color: var(--text-2);
}
.k-summe b { font-family: var(--sans); font-size: 13.5px; color: var(--text); }

/* --- Aufbau --- */
.k-vor { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; }
.k-geschenkt { display: flex; flex-direction: column; gap: 2px; }
.k-gitem {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--linie-fein);
}
.k-gitem:last-child { border-bottom: none; }
.k-gitem > svg { width: 17px; height: 17px; flex: none; color: var(--ok); margin-top: 2px; }
.k-gitem > div { flex: 1; min-width: 0; }
.k-gitem b { display: block; font-size: 13.5px; font-weight: 650; }
.k-gitem span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 2px; }
.k-gwert {
  flex: none; font-family: var(--sans); font-size: 14px; font-weight: 650;
  color: var(--text-3); text-decoration: line-through; white-space: nowrap;
}
.k-rechnung {
  margin-top: 15px; padding: 14px 16px; border-radius: var(--r-m);
  background: var(--flaeche-2); display: flex; flex-direction: column; gap: 8px;
}
.k-rechnung > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.k-rechnung span { font-size: 13px; color: var(--text-2); }
.k-rechnung b { font-family: var(--sans); font-size: 15px; font-weight: 650; }
.k-rechnung .ab b { color: var(--ok); }
.k-rechnung .soll { padding-top: 9px; border-top: 1.5px solid var(--linie); }
.k-rechnung .soll span { color: var(--text); font-weight: 600; }
.k-rechnung .soll b { font-size: 21px; color: var(--bordeaux); }

/* --- Marktvergleich --- */
.k-vergleich { display: flex; flex-direction: column; gap: 3px; }
.k-vzeile {
  display: grid; grid-template-columns: 210px 1fr auto; gap: 8px 13px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--linie-fein);
}
.k-vzeile:last-child { border-bottom: none; }
.k-vwas { min-width: 0; font-size: 13.5px; font-weight: 600; }
.k-vbalken { min-width: 0; height: 9px; border-radius: 99px; background: var(--flaeche-3); overflow: hidden; }
.k-vbalken i { display: block; height: 100%; border-radius: 99px; background: var(--text-3); }
.k-vzeile.unser .k-vbalken i { background: linear-gradient(90deg, var(--bordeaux), var(--bordeaux-hell)); }
.k-vwert { font-family: var(--sans); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.k-vzeile.unser .k-vwert { color: var(--ok); }
.k-vhinweis { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 1080px) {
  .k-stufen { grid-template-columns: 1fr; }
  .k-modelle { grid-template-columns: 1fr; }
  .k-vzeile { grid-template-columns: 1fr auto; }
  .k-vbalken { grid-column: 1 / -1; }
}

/* Kosten: Abgrenzung zum Demo-Hinweis — hier gelten echte Beträge */
.k-echt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--r-m); border: 1px solid #CDE3D6; background: var(--ok-grund);
}
.k-echt > svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 1px; }
.k-echt > div { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.65; }
.k-echt b { color: var(--text); font-weight: 650; }
.k-rechnung .k-rest { padding-top: 2px; }
.k-rechnung .k-rest span { font-size: 12px; color: var(--text-3); line-height: 1.55; }

/* ============================================================
   QMH: Dokument-Schublade (Wissen, Fassungen, Text) und
   Wissensbasis (Kapitelbaum)
   ============================================================ */
table.liste.klein { font-size: 12.5px; }
table.liste.klein th, table.liste.klein td { padding: 7px 9px; }
table.liste td.datei { font-family: var(--mono); font-size: 11.5px; word-break: break-word; min-width: 160px; }
table.liste td.datei .stand { display: block; font-family: var(--sans); font-size: 11px; color: var(--text-3); margin-top: 3px; }
.befunde-tafel { max-height: 560px; overflow: auto; }
table.liste.schritte td { vertical-align: top; }
.fassungen { overflow-x: auto; border: 1px solid var(--linie-fein); border-radius: var(--r-s); }
.wissen-reihen { display: grid; gap: 8px; }
.wissen-reihe { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.wissen-reihe .wr-titel { flex: none; width: 118px; color: var(--text-3); padding-top: 3px; }
.wissen-reihe .wr-inhalt { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wissen-reihe .wr-inhalt .marke { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.pruefliste, .feldliste, .gliederung { display: grid; gap: 2px; }
.pl-gruppe { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux); margin: 10px 0 3px; }
.pl-punkt { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie-fein); font-size: 13px; line-height: 1.5; }
.pl-nr { flex: none; width: 26px; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); padding-top: 2px; }
.pl-text { flex: 1; min-width: 0; }
.fl-feld { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--linie-fein); font-size: 12.5px; }
.fl-feld b { font-weight: 600; }
.fl-typ { color: var(--text-3); font-family: var(--mono); font-size: 11px; }
.fl-opt { width: 100%; font-size: 11.5px; color: var(--text-3); }
.gl-block { padding: 8px 0; border-bottom: 1px solid var(--linie-fein); font-size: 13px; }
.gl-block ul { margin: 5px 0 0 18px; color: var(--text-2); line-height: 1.55; }
.gl-block li { margin-bottom: 3px; }
.textblock { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--flaeche-2); border: 1px solid var(--linie-fein); border-radius: var(--r-s); padding: 14px 16px; max-height: 70vh; overflow: auto; color: var(--text); }
.textbaustein { margin-bottom: 8px; }
.textbaustein summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
.textbaustein .textblock { max-height: none; font-family: var(--sans); font-size: 13px; }
.auffaellig { margin: 6px 0 0 16px; line-height: 1.55; }
.auffaellig li { margin-bottom: 3px; }
.zahl-kachel[aria-pressed="true"] { outline: 2px solid var(--bordeaux); outline-offset: -2px; }
.zeile .marken .marke { white-space: nowrap; }

.baum-kapitel { padding: 11px 16px; border-bottom: 1px solid var(--linie-fein); display: flex; align-items: center; gap: 10px;
  background: var(--flaeche-2); font-weight: 600; font-size: 13.5px; }
.baum-kapitel .kennung { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.baum-kapitel .rest { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 400; }
.baum-abschnitt { padding: 10px 16px 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux); }
.rollen-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rollen-liste .zeile { min-width: 0; }
.befunde-tafel td.eng .titel-klein { font-size: 11.5px; color: var(--text-3); display: block; max-width: 180px; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; }
.rollen-liste .zeile { padding: 8px 16px; }
.rollen-liste .zeile .haupt b { font-size: 13px; }
.rollen-liste .zeile.aktiv { background: #FCF6F7; }

/* Ident-Nummern im Kopilot-Antworttext als Beleg */
.beleg-inline { font: inherit; font-family: var(--mono); font-size: .92em; color: var(--accent-text, #850034); background: none; border: 0; border-bottom: 1px dotted currentColor; padding: 0 1px; cursor: pointer; }
.beleg-inline:hover { background: var(--soft, #FAF8F6); }

/* ============================================================
   Betrieb und Kosten — Fassung 2 (Bereits live, Belege, Aufbau-
   Tabelle, zwei Wege)
   ============================================================ */
.k-live {
  padding: 13px 16px; margin-bottom: 18px; border-radius: var(--r-m);
  border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten-1);
}
.k-live-kopf { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.k-live-kopf > svg { width: 17px; height: 17px; flex: none; color: var(--ok); }
.k-live-kopf b { font-weight: 650; }
.k-live-kopf a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--bordeaux); text-decoration: none;
}
.k-live-kopf a svg { width: 13px; height: 13px; }
.k-live-kopf a:hover { text-decoration: underline; }
.k-live-punkte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 10px; }
.k-live-punkte > div { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.k-live-punkte svg { width: 14px; height: 14px; flex: none; color: var(--ok); margin-top: 2px; }

.k-pos-nutzen { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; margin: 8px 0 0 30px; }
.k-pos-nutzen + .k-pos-text { margin-top: 4px; }
.k-belege { list-style: none; margin: 8px 0 0 30px; padding: 0; display: grid; gap: 3px; }
.k-belege li { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.55; }
.k-belege svg { width: 12px; height: 12px; flex: none; color: var(--ok); margin-top: 3px; }
.k-summe.k-fehlt { border-top: 1px dashed var(--linie); margin-top: 10px; padding-top: 10px; }
.k-summe.k-fehlt b { font-weight: 500; color: var(--text-3); text-align: right; }

.k-tab table.liste th:last-child, .k-tab-wert { text-align: right; white-space: nowrap; }
.k-tab td.k-tab-wert { font-family: var(--sans); font-weight: 650; font-size: 13.5px; }
.k-tab td.k-tab-wert s { color: var(--text-3); font-weight: 500; margin-right: 8px; }
.k-tab td.k-tab-wert b { color: var(--ok); }
.k-tab td b { font-weight: 600; }
.k-tab-neben { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.k-tab tr.k-tab-geschenkt td { background: #F7FBF8; }

.k-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-weg {
  padding: 14px 16px; border-radius: var(--r-m); border: 1.5px solid var(--linie);
  background: var(--flaeche); cursor: pointer; transition: .14s;
}
.k-weg:hover { border-color: var(--bordeaux); }
.k-weg.an { border-color: var(--bordeaux); background: #FDF6F8; }
.k-weg-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; color: var(--text-2); }
.k-weg-zeile b { font-family: var(--sans); font-weight: 650; color: var(--text); white-space: nowrap; }
.k-weg-zeile.soll { margin-top: 6px; padding-top: 9px; border-top: 1.5px solid var(--linie); }
.k-weg-zeile.soll span { color: var(--text); font-weight: 600; }
.k-weg-zeile.soll b { color: var(--bordeaux); font-size: 16px; }
@media (max-width: 1080px) { .k-wege, .k-live-punkte { grid-template-columns: 1fr; } }

/* ============================================================
   Funktionsliste QMH
   ============================================================ */
.f-tab table.liste td { vertical-align: top; }
.f-tab table.liste th { white-space: nowrap; }
.f-ident .marke { cursor: pointer; }
.f-ident .titel-klein { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.f-aufgabe { min-width: 150px; max-width: 240px; }
.f-aufgabe b { font-weight: 600; display: block; line-height: 1.4; }
.f-aufgabe.f-quer { min-width: 200px; max-width: 300px; }
.f-klein { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.f-text { min-width: 160px; max-width: 300px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.f-system { color: var(--text); }
.f-eng { width: 1%; }
.f-grad { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.f-grad .marke, .f-baustein { white-space: normal; text-align: left; line-height: 1.35; max-width: 150px; }
.f-tab table.liste.klein th, .f-tab table.liste.klein td { padding: 7px 8px; }
.f-baustein { cursor: pointer; }
.f-baustein:hover { box-shadow: 0 0 0 2px rgba(133,0,52,.14); }
.marke.neutral { background: var(--neutral-grund); color: var(--text-2); }
.f-verteilung { font-size: 12px; color: var(--text-3); }
.f-rollen-auf { margin-top: 6px; padding-left: 4px; }
.f-rollen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; margin-top: 8px; }
.f-rollen span { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-rollen .marke { cursor: pointer; }

.f-mensch { display: grid; gap: 2px; }
.f-mensch-zeile { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); }
.f-mensch-zeile:last-child { border-bottom: none; }
.f-mensch-zeile > svg { width: 17px; height: 17px; flex: none; color: var(--bordeaux); margin-top: 2px; }
.f-mensch-zeile > div { flex: 1; min-width: 0; }
.f-mensch-zeile b { display: block; font-size: 13.5px; font-weight: 650; }
.f-mensch-zeile span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 2px; }
.f-mensch-zahl { flex: none; font-family: var(--sans); font-size: 15px; font-weight: 650; color: var(--text-2); min-width: 34px; text-align: right; }
.f-grade { display: grid; gap: 6px; }
.f-grade > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.f-grade .f-grad { flex-direction: row; flex-wrap: wrap; }
.f-grade .f-grad .marke { max-width: none; }
.f-grade b { font-family: var(--sans); font-size: 13px; color: var(--text); }
.rollen-liste .zeile .haupt span { white-space: normal; }
@media (max-width: 1260px) {
  .f-aufgabe, .f-aufgabe.f-quer { min-width: 130px; max-width: 200px; }
  .f-text { min-width: 130px; max-width: 240px; }
  .f-grad .marke, .f-baustein { max-width: 130px; }
}