:root{
  --gruen:#2d5a3d; --gruen-dunkel:#1f4029; --gruen-hell:#eaf1ec; --gruen-rand:#c3d4c8;
  --grund:#f6f7f6; --karte:#fff; --rand:#dde1de; --rand-stark:#c2c8c3;
  --text:#1d2420; --gedaempft:#5f6b64; --leise:#8b948e;
  --warn:#8a6d1f; --warn-grund:#fdf8e8; --fehler:#9b2c2c; --fehler-grund:#fdf0f0;
  --ok:#2d6a4f;
  --radius:5px; --schatten:0 1px 2px rgba(0,0,0,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--grund); color:var(--text);
  font:15px/1.55 "Segoe UI",-apple-system,system-ui,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gruen); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopf ---------- */
.kopf{background:var(--gruen); color:#fff; padding:0 20px}
.kopf-innen{max-width:1240px; margin:0 auto; display:flex; align-items:center;
  gap:26px; min-height:52px; flex-wrap:wrap}
.marke{font-weight:700; font-size:16px; letter-spacing:-.2px; color:#fff}
.marke span{font-weight:400; opacity:.75; margin-left:7px; font-size:13px}
.kopf nav{display:flex; gap:20px; flex:1; flex-wrap:wrap}
.kopf nav a{color:#fff; opacity:.88; font-size:14px; padding:4px 0;
  border-bottom:2px solid transparent}
.kopf nav a:hover,.kopf nav a.aktiv{opacity:1; border-bottom-color:rgba(255,255,255,.65);
  text-decoration:none}
.wer{font-size:13px; opacity:.85; display:flex; align-items:center; gap:12px}
.wer b{font-weight:600}

/* Suche im Kopf: von jeder Seite aus direkt zum Kunden, Projekt oder Angebot,
   ohne sich erst durch drei Listen zu klicken. */
.kopfsuche{margin:0; order:3; flex:1 1 220px; min-width:180px; max-width:340px}
.kopfsuche input{width:100%; padding:5px 10px; font-size:13.5px; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:5px}
.kopfsuche input::placeholder{color:rgba(255,255,255,.6)}
.kopfsuche input:focus{background:rgba(255,255,255,.2); outline:none;
  border-color:rgba(255,255,255,.5)}
@media (max-width:860px){ .kopfsuche{order:9; max-width:none} }

/* Kleines Fenster, etwa zum Hinzufügen einer Position */
.fenster{border:none; border-radius:10px; padding:0; width:min(620px, 94vw);
  box-shadow:0 10px 40px rgba(0,0,0,.22); color:var(--text)}
.fenster::backdrop{background:rgba(0,0,0,.4)}
.fenster-kopf{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; border-bottom:1px solid var(--rahmen)}
.fenster-kopf h2{font-size:17px}
.fenster-zu{border:none; background:none; font-size:26px; line-height:1;
  cursor:pointer; color:var(--gedaempft); padding:0 4px}
.fenster-zu:hover{color:var(--text)}
.fenster-leib{padding:16px 18px 18px}

/* Auswahl von Ausführung und Optionen im Positionsfenster.
   Als Auswahlliste, nicht als Knopfreihe: Auf einem kleinen Monitor schieben
   fünf Zeilen die Menge und den Einsetzen-Knopf aus dem Bild. */
.wahlfeld{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.wahlfeld label{flex:0 0 150px; margin:0; font-size:13px;
  color:var(--gedaempft); text-align:right}
.wahl-liste{flex:1; min-width:0; padding:6px 9px; font-size:14px}
@media (max-width:560px){
  .wahlfeld{display:block}
  .wahlfeld label{text-align:left; display:block; margin-bottom:3px}
}

/* Die mitlaufende Vorkalkulation */
.vk-kopf{font-size:12px; color:var(--gedaempft); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:6px}
.vk-zeile{display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; padding:2px 0}
.vk-wert{white-space:nowrap}
.vk-fehlt{color:var(--rot); font-size:12.5px}
.vk-summe{display:flex; justify-content:space-between; gap:12px;
  font-weight:700; margin-top:6px; padding-top:6px;
  border-top:1px solid var(--rahmen)}
.vk-neben{font-size:12.5px; color:var(--gedaempft); margin-top:3px}

/* Trefferliste der Leistungssuche im Angebot */
.trefferzeile{display:flex; align-items:baseline; gap:12px; width:100%;
  text-align:left; padding:9px 11px; background:#fff; cursor:pointer;
  border:1px solid var(--rahmen); border-radius:6px; margin-bottom:5px;
  font-family:inherit; font-size:14px}
.trefferzeile:hover{border-color:var(--gruen); background:rgba(0,0,0,.02)}
.trefferzeile .t-name{flex:1; font-weight:600}
.trefferzeile .t-kat{font-size:12.5px; color:var(--gedaempft);
  white-space:nowrap}
.trefferzeile .t-preis{font-size:13px; color:var(--gedaempft);
  white-space:nowrap; min-width:118px; text-align:right}
@media (max-width:620px){
  .trefferzeile{flex-wrap:wrap; gap:3px}
  .trefferzeile .t-name{flex:1 0 100%}
  .trefferzeile .t-preis{min-width:0; text-align:left}
}

/* ---------- Gerüst ---------- */
.huelle{max-width:1240px; margin:0 auto; padding:24px 20px 70px}
.huelle.weit{max-width:1800px}
.pfad{font-size:13px; color:var(--gedaempft); margin-bottom:14px}
.pfad a{color:var(--gedaempft)}
h1{font-size:23px; margin:0 0 4px; letter-spacing:-.3px}
h1 .nebensache{font-weight:400; color:var(--gedaempft); font-size:16px}
h2{font-size:14px; margin:0 0 14px; color:var(--gruen);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700}
h3{font-size:15px; margin:22px 0 10px}
.untertitel{color:var(--gedaempft); margin:0 0 22px; font-size:14px}

.karte{background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius); padding:20px; margin-bottom:18px; box-shadow:var(--schatten)}
.karte.schmal{padding:14px 16px}
.spalten{display:grid; gap:18px; grid-template-columns:2fr 1fr; align-items:start}
.raster{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(max-width:900px){.spalten{grid-template-columns:1fr}}

/* ---------- Formulare ---------- */
label{display:block; font-size:13px; color:var(--gedaempft); margin-bottom:4px}
input,select,textarea{width:100%; padding:8px 10px; border:1px solid var(--rand-stark);
  border-radius:4px; font:inherit; font-size:14px; background:#fff; color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gruen);
  outline-offset:-1px; border-color:var(--gruen)}
textarea{min-height:76px; resize:vertical}
input[type=number],.zahl{font-variant-numeric:tabular-nums}
.feld{margin-bottom:13px}
.knopfzeile{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; align-items:center}

.knopf{display:inline-block; background:var(--gruen); color:#fff; border:1px solid var(--gruen);
  border-radius:4px; padding:8px 17px; font:inherit; font-size:14px; cursor:pointer;
  text-align:center}
.knopf:hover{background:var(--gruen-dunkel); text-decoration:none; color:#fff}
.knopf.zweit{background:#fff; color:var(--gruen)}
.knopf.zweit:hover{background:var(--gruen-hell)}
.knopf.klein{padding:4px 11px; font-size:13px}
.knopf.gefahr{border-color:#c9a0a0; color:var(--fehler); background:#fff}
.knopf.gefahr:hover{background:var(--fehler-grund)}

/* ---------- Tabellen ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; padding:8px 10px; border-bottom:2px solid var(--rand-stark);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gedaempft); font-weight:700; white-space:nowrap}
td{padding:9px 10px; border-bottom:1px solid var(--rand); vertical-align:top}
td.z,th.z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:hover{background:#fafbfa}
tr.titelzeile td{background:var(--gruen-hell); font-weight:600}
tr.summe td{border-top:2px solid var(--gruen); border-bottom:none;
  font-weight:700; padding-top:12px}
tr.endsumme td{font-size:17px; color:var(--gruen)}
.leer{color:var(--leise); font-style:italic; padding:26px 10px; text-align:center}

/* ---------- Kennzeichen ---------- */
.schild{display:inline-block; padding:2px 9px; border-radius:11px; font-size:12px;
  font-weight:600; white-space:nowrap; border:1px solid transparent}
.schild.grau{background:#eef0ee; color:var(--gedaempft); border-color:var(--rand)}
.schild.gruen{background:var(--gruen-hell); color:var(--gruen); border-color:var(--gruen-rand)}
.schild.gelb{background:var(--warn-grund); color:var(--warn); border-color:#e8d9a8}
.schild.rot{background:var(--fehler-grund); color:var(--fehler); border-color:#e8c0c0}

.hinweis{padding:12px 15px; border-radius:4px; font-size:13.5px; margin-bottom:16px;
  border:1px solid}
.hinweis.warn{background:var(--warn-grund); border-color:#e8d9a8; color:#6b5417}
.hinweis.fehler{background:var(--fehler-grund); border-color:#e8c0c0; color:#7a2222}
.hinweis.info{background:var(--gruen-hell); border-color:var(--gruen-rand); color:var(--gruen-dunkel)}

/* Interner Hinweis an einer Angebotsposition: fehlende Richtwerte,
   Stundensätze, Kalkulationsvermerke. Nimmt die Warnfarben der Seite, damit
   er sich von der Leistungsbeschreibung unterscheidet, ohne sich wie eine
   eigene Karte aufzuführen. */
.intern{background:var(--warn-grund); border:1px solid #e8d9a8; color:#6b5417;
  border-radius:4px; padding:5px 9px; margin-top:5px; font-size:13px;
  line-height:1.45}
/* Zeilenumbrüche nur dort, wo wirklich ein mehrzeiliger Text steht. Am
   Kasten selbst würde sonst die Einrückung der Vorlage mitgedruckt, und aus
   drei Wörtern wird ein halber Bildschirm. */
.intern .text{white-space:pre-wrap}
.intern .nur{color:#8a7430; font-size:11.5px; font-weight:600}

/* ---------- Kennzahlen-Kacheln ---------- */
.kacheln{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  margin-bottom:20px}
.kachel{background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius);
  padding:14px 16px}
.kachel .wert{font-size:24px; font-weight:700; color:var(--gruen);
  font-variant-numeric:tabular-nums; line-height:1.15}
.kachel .bez{font-size:12.5px; color:var(--gedaempft); margin-top:2px}

/* ---------- Rechenweg ---------- */
.rechenweg{font-size:12.5px; color:var(--gedaempft); margin-top:5px;
  padding-left:11px; border-left:2px solid var(--gruen-rand); line-height:1.5}
.rechenweg div{margin:1px 0}
details.rechnung summary{cursor:pointer; font-size:12.5px; color:var(--gruen);
  user-select:none}
details.rechnung summary:hover{text-decoration:underline}

/* ---------- Anmeldung ---------- */
.anmelde-huelle{max-width:370px; margin:9vh auto; padding:0 20px}
.anmelde-huelle .karte{padding:28px}
.anmelde-kopf{text-align:center; margin-bottom:24px}
.anmelde-kopf .marke{color:var(--gruen); font-size:21px; display:block}
.anmelde-kopf .unter{color:var(--gedaempft); font-size:13.5px; margin-top:3px}

/* ---------- Druck ---------- */
@media print{
  .kopf,.knopfzeile,.pfad,.nicht-drucken{display:none !important}
  body{background:#fff; font-size:11pt}
  .huelle{max-width:none; padding:0}
  .karte{border:none; box-shadow:none; padding:0; margin:0 0 12px}
  table{font-size:10pt}
  tbody tr:hover{background:none}

  /* Eingabefelder wie Text drucken. Ein Rahmen um jede Zelle macht aus
     einer Prüfliste ein Formular zum Ausfüllen, und genau das ist sie auf
     Papier nicht mehr. */
  input[type=text],input:not([type]),select,textarea{
    border:none !important; padding:0 !important; background:none !important;
    -webkit-appearance:none; appearance:none; font-size:10pt; color:#000}
  input[type=checkbox]{-webkit-appearance:checkbox; appearance:checkbox}
  details{display:block}
  details > summary{display:none}      /* Aufgeklapptes mitdrucken */
  details > *:not(summary){display:block !important}
  /* Eine Zeile soll nicht über den Seitenrand zerrissen werden */
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
  a{text-decoration:none; color:#000}
}

/* Bestandteile einer Leistung: eigene Positionen, aber erkennbar untergeordnet */
tr.bestandteil td{background:rgba(0,0,0,.015)}
tr.bestandteil td:first-child{color:var(--gedaempft)}