/* designenergie Kundenbereich - gemeinsames Stylesheet.
   Aussehen wird NUR hier gepflegt. Kein CSS in die Dokumente schreiben. */

:root{
  --de-pine:#1F3D1F; --de-lime:#97BD13; --de-magenta:#FF03FF;
  --de-ink:#100F12; --de-ink-soft:#131813; --de-ink-raised:#1E251E;
  --de-line:#263026; --de-fog:#98A398;
  --bg:var(--de-ink); --surface:var(--de-ink-soft); --raised:var(--de-ink-raised);
  --text:#ECEFE4; --strong:#FFFFFF; --muted:var(--de-fog);
  --primary:var(--de-lime); --pop:var(--de-magenta);
  --border:var(--de-line); --warn:#E0A100; --danger:#E0574F;
  --font:'DM Sans','Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','Menlo',monospace;
  --container:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
a{color:var(--primary)}

/* Marken-Kopfzeile - steht auf jeder Seite */
.de-bar{border-bottom:1px solid var(--border);background:var(--de-ink-soft)}
.de-bar .in{max-width:var(--container);margin:0 auto;padding:15px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.de-bar .marke{display:block;line-height:0}
.de-bar .marke img{height:34px;width:auto;display:block}
@media (max-width:640px){.de-bar .marke img{height:28px}}
.de-bar .kunde{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.de-bar a.zurueck{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none}
.de-bar a.zurueck:hover{text-decoration:underline}

header{border-bottom:1px solid var(--border);padding:56px 0 40px;margin-bottom:48px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin:0 0 16px}
h1{font-size:clamp(30px,5vw,46px);line-height:1.12;margin:0 0 14px;color:var(--strong);
  font-weight:700;letter-spacing:-.02em}
.lede{font-size:19px;color:var(--muted);margin:0;max-width:62ch}

h3.sec{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin:56px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
p.intro{color:var(--muted);max-width:70ch;margin:0 0 28px}

/* Dokumentenliste auf der Kundenuebersicht */
.docs{list-style:none;margin:0;padding:0}
.docs li{border-bottom:1px solid var(--border)}
.docs li:last-child{border-bottom:none}
.docs a{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:22px 4px;
  text-decoration:none;align-items:baseline}
.docs a:hover{background:var(--surface)}
.docs .d{font-family:var(--mono);font-size:13px;color:var(--primary)}
.docs .t,.docs .s{display:block}
.docs .t{font-size:19px;color:var(--strong);font-weight:500;margin:0 0 5px;line-height:1.35}
.docs .s{font-size:15.5px;color:var(--muted);margin:0}
@media (max-width:640px){.docs a{grid-template-columns:1fr;gap:6px}}

.note{background:var(--surface);border-left:3px solid var(--warn);border-radius:0 10px 10px 0;
  padding:20px 24px;margin:28px 0;font-size:15.5px;color:var(--muted)}
.note b{color:var(--text)}

footer{border-top:1px solid var(--border);margin-top:64px;padding:28px 0 56px;
  font-size:13.5px;color:var(--muted)}
footer b{color:var(--text);font-weight:500}

@media (max-width:640px){body{font-size:16px}}
@media print{
  body{background:#fff;color:#111}
  .de-bar{background:#fff;border-color:#ccc}
  h1,.docs .t{color:#000}
  .lede,.note,footer{color:#333}
  h3.sec{color:#1F3D1F}
}

/* ---------------------------------------------------------------- Anmeldung */
body.anmeldung{display:flex;flex-direction:column;min-height:100vh;
  justify-content:center;align-items:center;padding:32px 24px}
.tor{width:100%;max-width:400px;text-align:left}
.tor-logo{height:44px;width:auto;display:block;margin:0 0 40px}
.tor h1{font-size:32px;margin:0 0 10px;letter-spacing:-.02em}
.tor-text{color:var(--muted);font-size:16px;margin:0 0 32px}

.tor label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.tor input{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:14px 15px;color:var(--text);font-family:var(--font);
  font-size:17px;margin:0 0 22px;-webkit-appearance:none}
.tor input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(151,189,19,.16)}

.tor button{width:100%;background:var(--primary);color:#12210F;border:none;
  border-radius:9px;padding:15px;font-family:var(--font);font-size:17px;
  font-weight:500;cursor:pointer;margin:6px 0 0}
.tor button:hover{filter:brightness(1.08)}
.tor button:active{transform:translateY(1px)}

.tor-fehler{background:rgba(224,87,79,.12);border:1px solid rgba(224,87,79,.5);
  color:#F0A9A4;border-radius:9px;padding:13px 15px;font-size:15px;margin:0 0 24px}
.tor-hilfe{color:var(--muted);font-size:14.5px;margin:26px 0 0}
.tor-fuss{color:var(--muted);font-size:13px;margin:48px 0 0;text-align:center}

/* Streifen, der die interne Ansicht kenntlich macht */
.hinweis-intern{background:rgba(255,3,255,.1);border:1px solid rgba(255,3,255,.4);
  color:#F79CF7;border-radius:9px;padding:11px 16px;margin:20px 0 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.docs code{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ------------------------------------------------- Langdokument (Konzept)
   Bausteine für mehrseitige Konzepte und Berichte. Bewusst hier und nicht
   im Dokument selbst - das naechste Konzept nutzt dieselben. */

.inhalt{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:26px 30px;margin:0 0 8px}
.inhalt-titel{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin:0 0 16px}
.inhalt ol{margin:0;padding:0;list-style:none;counter-reset:i;
  columns:2;column-gap:40px}
.inhalt li{counter-increment:i;margin:0 0 9px;break-inside:avoid;font-size:15.5px}
.inhalt li::before{content:counter(i,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;color:var(--muted);margin-right:11px}
.inhalt a{text-decoration:none;color:var(--text)}
.inhalt a:hover{color:var(--primary);text-decoration:underline}
@media(max-width:640px){.inhalt ol{columns:1}}

h2.kap{font-size:clamp(24px,3.4vw,32px);color:var(--strong);font-weight:700;letter-spacing:-.02em;
  margin:72px 0 20px;padding-top:26px;border-top:1px solid var(--border);
  display:flex;gap:16px;align-items:baseline;scroll-margin-top:20px}
h2.kap span{font-family:var(--mono);font-size:13px;color:var(--primary);font-weight:400;flex:none}

h3.bau{font-size:21px;color:var(--strong);font-weight:500;margin:48px 0 16px;
  display:flex;gap:14px;align-items:center}
h3.bau .nr{font-family:var(--mono);font-size:14px;width:30px;height:30px;flex:none;
  display:grid;place-items:center;border-radius:50%;background:var(--de-pine);
  color:var(--primary);border:1px solid var(--primary)}
h4.unter{font-size:17px;color:var(--strong);font-weight:500;margin:34px 0 12px}
p.zwischen{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin:40px 0 14px}

.wrap p{max-width:72ch}
p.gross{font-size:20px;color:var(--strong);line-height:1.45;margin:22px 0}
p.merksatz{font-size:18px;color:var(--strong);border-left:3px solid var(--primary);
  padding:4px 0 4px 20px;margin:26px 0;line-height:1.5}
p.klein{font-size:15px;color:var(--muted)}
p.einwand{background:var(--surface);border-left:3px solid var(--warn);border-radius:0 10px 10px 0;
  padding:18px 22px;margin:24px 0;color:var(--muted);font-size:15.5px;max-width:74ch}
p.einwand b{color:var(--text)}

.gruende{display:grid;gap:14px;margin:24px 0}
.gruende div{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 22px;font-size:16px;color:var(--muted);max-width:74ch}
.gruende b{color:var(--strong);font-weight:500}

.themen{display:grid;gap:14px;margin:20px 0}
.themen div{background:var(--surface);border-left:3px solid var(--de-pine);border-radius:0 12px 12px 0;
  padding:18px 22px;font-size:15.5px;color:var(--muted);max-width:74ch}
.themen b{color:var(--strong);font-weight:500;display:block;margin-bottom:5px}
.themen i{color:var(--primary);font-style:normal;font-size:14px}

.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.kennzahlen div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.kennzahlen b{display:block;font-size:30px;color:var(--primary);letter-spacing:-.02em;line-height:1}
.kennzahlen span{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.35}
.kennzahlen .rot b{color:var(--danger)}
@media(max-width:760px){.kennzahlen{grid-template-columns:repeat(2,1fr)}}

ol.phasen{list-style:none;margin:24px 0;padding:0;counter-reset:f}
ol.phasen li{counter-increment:f;position:relative;padding:0 0 24px 46px;
  border-left:1px solid var(--border);margin-left:14px;font-size:15.5px;color:var(--muted);max-width:70ch}
ol.phasen li:last-child{border-left-color:transparent;padding-bottom:0}
ol.phasen li::before{content:counter(f);position:absolute;left:-15px;top:-2px;
  width:29px;height:29px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg);border:1px solid var(--primary);color:var(--primary);
  font-family:var(--mono);font-size:12px}
ol.phasen b{color:var(--strong);font-weight:500;display:block;margin-bottom:4px}

ol.funde,ol.fragen{margin:20px 0;padding-left:0;list-style:none;counter-reset:n}
ol.funde li,ol.fragen li{counter-increment:n;position:relative;padding-left:44px;
  margin:0 0 16px;font-size:15.5px;color:var(--muted);max-width:74ch}
ol.funde li::before,ol.fragen li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:27px;height:27px;display:grid;place-items:center;border-radius:7px;
  background:var(--de-ink-raised);border:1px solid var(--border);
  color:var(--primary);font-family:var(--mono);font-size:12px}

ul.befunde,ul.messen{margin:20px 0;padding-left:20px}
ul.befunde li,ul.messen li{margin:10px 0;font-size:15.5px;color:var(--muted);max-width:72ch}

.kritik{display:grid;gap:14px;margin:22px 0}
.kritik div{background:var(--surface);border-left:3px solid var(--danger);border-radius:0 12px 12px 0;
  padding:18px 22px;font-size:15.5px;color:var(--muted);max-width:74ch}
.kritik b{color:var(--strong);font-weight:500}

.preis-kasten{background:linear-gradient(135deg,var(--de-pine),var(--de-ink-raised));
  border:1px solid var(--primary);border-radius:14px;padding:28px 32px;margin:26px 0}
.preis-zahl{font-size:40px;color:var(--strong);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1}
.preis-zahl span{font-size:16px;font-weight:400;color:var(--muted);margin-left:12px;letter-spacing:0}
.preis-was{margin:14px 0 0;color:var(--text);font-size:16px}
.preis-was b{color:var(--strong);font-weight:500}

table.verteilung td:first-child{color:var(--text)}
table.verteilung .ja{color:var(--primary);font-weight:700;text-align:center;font-size:17px}
table.verteilung .nein,table.keywords .nein{color:var(--muted);text-align:center}
table.verteilung th:not(:first-child){text-align:center}
table.verteilung td:not(:first-child){text-align:center;font-size:14.5px;color:var(--muted)}
table.keywords .ja{color:var(--primary);font-weight:500}
table.erweiterungen .pr{white-space:nowrap;color:var(--primary);font-weight:500}
table.erweiterungen .pr span{display:block;font-size:12px;color:var(--muted);font-weight:400}
.wrap table{width:100%;border-collapse:collapse;font-size:15.5px}
.wrap table th,.wrap table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.wrap table th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.wrap table tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:4px 10px;margin:22px 0}
.wrap .code{font-family:var(--mono);font-size:.88em;background:var(--de-ink-raised);
  padding:2px 7px;border-radius:5px;color:var(--text)}

/* Kennzeichnung des Grundlagendokuments in der Uebersicht */
.docs li.grundlage{background:linear-gradient(90deg,rgba(151,189,19,.07),transparent);
  border-left:3px solid var(--primary)}
.docs li.grundlage a{padding-left:16px}
.marke-basis{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary);border:1px solid var(--primary);
  border-radius:20px;padding:2px 9px;margin-left:10px;vertical-align:2px}

/* ------------------------------------------------- Interne Werkzeuge
   Knopfreihe in der internen Ansicht, Formulare und Kopierfelder.
   Sieht nur Jörg - Kunden erreichen diese Seiten nicht. */

.werkzeuge{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 8px}
.werkzeuge a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px 18px;color:var(--text);font-size:15.5px;transition:border-color .15s}
.werkzeuge a:hover{border-color:var(--primary)}
.werkzeuge a .sym{font-family:var(--mono);font-size:13px;color:var(--primary)}
.werkzeuge a .s{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.werkzeuge a.haupt{border-color:var(--primary);
  background:linear-gradient(90deg,rgba(151,189,19,.09),var(--surface))}

.formular{max-width:560px;margin:24px 0 0}
.formular label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.formular input,.formular select{width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:9px;padding:14px 15px;color:var(--text);
  font-family:var(--font);font-size:17px;margin:0 0 22px;-webkit-appearance:none}
.formular input:focus,.formular select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(151,189,19,.16)}
.formular button{background:var(--primary);color:#12210F;border:none;border-radius:9px;
  padding:15px 28px;font-family:var(--font);font-size:17px;font-weight:500;cursor:pointer}
.formular button:hover{filter:brightness(1.08)}
.formular button:active{transform:translateY(1px)}

.kopierfeld{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:14px 15px;color:var(--text);font-family:var(--mono);
  font-size:14px;line-height:1.55;margin:0 0 8px;resize:vertical}
.kopierfeld:focus{outline:none;border-color:var(--primary)}

/* Schrittfolge fuer Arbeitsablaeufe */
ol.schritte{list-style:none;counter-reset:s;padding:0;margin:24px 0 0}
ol.schritte>li{counter-increment:s;position:relative;padding:0 0 26px 52px;
  border-left:1px solid var(--border);margin-left:15px}
ol.schritte>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.schritte>li::before{content:counter(s);position:absolute;left:-15px;top:-2px;
  width:30px;height:30px;border-radius:50%;background:var(--bg);
  border:1px solid var(--primary);color:var(--primary);font-family:var(--mono);
  font-size:13px;display:flex;align-items:center;justify-content:center}
ol.schritte h4{margin:2px 0 8px;font-size:18px;color:var(--strong);font-weight:600}
ol.schritte p{margin:0 0 10px;color:var(--muted);font-size:15.5px}
ol.schritte p b{color:var(--text)}
ol.schritte .wo{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary);margin:0 0 4px;display:block}

/* Kennzeichnung der Kopierfelder. Ohne sie sieht ein Terminal-Befehl aus wie
   ein Dateiinhalt - und man fuehrt aus, was man haette abtippen sollen. */
.feld{margin:0 0 20px}
.feld-art{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;
  border-radius:20px;margin:0 0 7px}
.feld-art.tun{background:rgba(255,3,255,.12);border:1px solid rgba(255,3,255,.45);color:#F79CF7}
.feld-art.pfad{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.feld-art.inhalt{background:rgba(151,189,19,.1);border:1px solid rgba(151,189,19,.45);color:var(--primary)}
.legende{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 8px;font-size:14.5px;color:var(--muted)}
.legende span{display:flex;align-items:center;gap:8px}
.legende .feld-art{margin:0}

/* Grundsicherung fuers Handy: Bilder und lange Zeichenketten sprengen sonst
   das Layout - eine Adresse ohne Leerzeichen schiebt die ganze Seite. */
img{max-width:100%;height:auto}
.wrap{overflow-wrap:break-word}

/* ------------------------------------------------- Tabellen auf dem Handy
   Ein waagerecht scrollender Kasten sieht auf dem Telefon aus wie ein
   abgeschnittener Text - man sieht nicht, dass da noch etwas kommt.
   Deshalb wird unter 640px aus jeder Zeile eine Karte: Feldname links,
   Wert rechts, nichts mehr zu wischen.
   Die Beschriftung steht als data-label an jeder Zelle im HTML. */

@media (max-width:640px){
  .tbl-scroll,.tblwrap{overflow-x:visible;background:none;border:none;padding:0;border-radius:0}

  .tbl-scroll table,.tblwrap table,.wrap table{display:block;width:100%;min-width:0;font-size:15px}
  /* Die Kopfzeile faellt weg - ihr Inhalt steht jetzt als Feldname in jeder
     Karte. In diesen Dokumenten steht sie immer als erste Zeile mit <th>,
     ein <thead> gibt es nicht. Beides wird abgedeckt. */
  .tbl-scroll thead,.tblwrap thead,.wrap table thead{display:none}
  .wrap table tr:first-child th{display:none}
  .wrap table tr:first-child:not(:has(td)){display:none;margin:0;padding:0;border:none}
  .tbl-scroll tbody,.tblwrap tbody,.wrap table tbody{display:block}

  .tbl-scroll tr,.tblwrap tr,.wrap table tr{display:block;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:6px 14px;margin:0 0 12px}
  .tbl-scroll tr:last-child,.tblwrap tr:last-child,.wrap table tr:last-child{margin-bottom:0}

  .tbl-scroll td,.tblwrap td,.wrap table td{display:grid;grid-template-columns:38% 1fr;
    gap:12px;align-items:start;padding:9px 0;border-bottom:1px solid var(--border);
    text-align:left;vertical-align:top}
  .tbl-scroll tr td:last-child,.tblwrap tr td:last-child,.wrap table tr td:last-child{border-bottom:none}

  /* Der Feldname aus data-label - ohne ihn waere die Karte nicht lesbar */
  .wrap table td[data-label]::before{content:attr(data-label);font-family:var(--mono);
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    padding-top:3px;hyphens:auto;overflow-wrap:anywhere}

  /* Haken und Striche bleiben mittig in ihrer Spalte, nicht ueber die Karte verteilt */
  .wrap table .ja,.wrap table .nein{text-align:left}
  .wrap table.verteilung td:not(:first-child),.wrap table.keywords td{text-align:left}
  /* Die erste Zelle traegt die Karte - Datum, Aufgabe, Adresse. Sie steht
     als Ueberschrift ueber die volle Breite, ohne Feldnamen davor. */
  .wrap table td:first-child{display:block;font-weight:600;color:var(--strong);
    font-size:16.5px;line-height:1.35;padding:4px 0 11px}
  .wrap table td:first-child::before{display:none}
}