/* Eigene Regeln des Werkzeugs. house.css bleibt wortgleich wie in den anderen
   Werkzeugen und wird hier nicht veraendert. */

/* display:flex und display:grid schlagen das hidden-Attribut. Ohne diese Regel
   stehen Fenster und Menues sichtbar da, obwohl sie versteckt sind. */
[hidden] { display: none !important; }

main { padding: 0 16px 24px; }

.anleitung {
  margin: 0 16px 8px;
  font-size: 12px;
  color: #5a6478;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; }
/* Vier Gruppen: Datei - Verlauf - Zeichnen - Auswerten, mit Leerraum dazwischen. */
.knopfreihe.gruppen { gap: 8px 26px; }
.knopfgruppe { display: flex; flex-wrap: wrap; gap: 6px; }

.btn {
  font: inherit; font-size: 13px;
  padding: 6px 11px;
  border: 1px solid #c8cfda;
  background: #f7f9fc;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: #eef2f8; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primaer { background: #1a6fd4; border-color: #1a6fd4; color: #fff; }
.btn.primaer:hover { background: #1560ba; }
.btn.ghost { background: transparent; }
.btn.winzig { padding: 3px 8px; font-size: 12px; }
.btn.aktiv { background: #1a6fd4; border-color: #1a6fd4; color: #fff; }

/* --- Zeichenflaeche --------------------------------------------------- */

/* Die Hoehe setzt app.js, damit die Flaeche bis zum unteren Fensterrand reicht. */
.flaeche-rahmen { position: relative; }
.flaeche-behaelter {
  background: #fafbfd;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  overflow: auto;
  height: 480px;
}
.flaeche { display: block; }
.flaeche-behaelter.schiebebereit,
.flaeche-behaelter.schiebebereit * { cursor: grab !important; }
.flaeche-behaelter.schiebt,
.flaeche-behaelter.schiebt * { cursor: grabbing !important; }

/* Bedienleiste und Karte liegen ueber der Flaeche und rollen nicht mit. */
.ansicht-leiste {
  position: absolute; top: 8px; right: 22px; z-index: 5;
  display: flex; gap: 4px; align-items: center;
  background: rgba(255,255,255,.94);
  border: 1px solid #e2e6ec; border-radius: 7px;
  padding: 4px; box-shadow: 0 2px 8px rgba(20,26,36,.08);
}
.ansicht-leiste .zoomwert { min-width: 58px; }
.ansicht-leiste .btn.an { background: #1a6fd4; border-color: #1a6fd4; color: #fff; }

.uebersicht {
  position: absolute; right: 22px; bottom: 22px; z-index: 5;
  width: 230px; height: 160px;
  background: #fff; border: 1px solid #c8cfda; border-radius: 7px;
  box-shadow: 0 4px 14px rgba(20,26,36,.14);
  overflow: hidden; cursor: pointer;
}

:fullscreen body, body:fullscreen { background: #fff; }

/* Schmale Fenster: Leiste bleibt innerhalb der Flaeche und bricht um,
   die Karte wird kleiner, damit sie nicht die halbe Flaeche verdeckt. */
.ansicht-leiste { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 40px); }
@media (max-width: 600px) {
  .ansicht-leiste { left: 8px; right: 8px; max-width: none; }
  .uebersicht { width: 150px; height: 105px; right: 10px; bottom: 14px; }
}
.knoten .koerper { cursor: move; }
.knoten:hover .koerper { filter: brightness(.975); }
/* Der durchsichtige Rahmen auf der Umrandung ist die Pfeilquelle. */
.randgriff { cursor: crosshair; }
.knoten:hover .randgriff { stroke: rgba(26, 111, 212, .22); }
.kante-greifer { cursor: pointer; }
.endgriff { cursor: grab; }
.endgriff:hover { fill: #c0392b; }
.kante-weg { cursor: pointer; }
.kante-weg:hover circle { fill: #fdeeee; }

/* --- Rechtsklickmenue -------------------------------------------------- */

.menue {
  position: fixed; z-index: 60;
  background: #fff; border: 1px solid #c8cfda; border-radius: 7px;
  box-shadow: 0 6px 20px rgba(20,26,36,.16);
  padding: 5px; min-width: 210px;
}
.menue-kopf {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #8a94a6; padding: 7px 9px 3px;
}
.menue-eintrag {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px;
  padding: 6px 9px; border: 0; background: transparent;
  border-radius: 4px; cursor: pointer;
}
.menue-eintrag:hover { background: #eef2f8; }
.menue-eintrag.aktiv { background: #e7f0fb; font-weight: 600; }
.menue-eintrag.gefahr { color: #b02a2a; }
.menue-eintrag.gefahr:hover { background: #fdeeee; }
.menue-gesperrt { font-size: 12px; color: #8a7000; padding: 6px 9px; line-height: 1.4; }

/* --- Fenster ----------------------------------------------------------- */

.ueberlagerung {
  position: fixed; inset: 0;
  background: rgba(20, 26, 36, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 50;
}
.fenster {
  background: #fff; border-radius: 8px; padding: 14px 16px;
  width: min(820px, 100%); max-height: 100%; overflow: auto;
}
.fenster.schmal { width: min(480px, 100%); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; }
.karte-kopf h2 { margin: 0; font-size: 16px; }
.fenster h3 { font-size: 13px; color: #5a6478; margin: 14px 0 6px; }

.fenster textarea {
  width: 100%; box-sizing: border-box;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.45;
  border: 1px solid #c8cfda; border-radius: 5px; padding: 8px;
}

.feld { display: block; margin: 10px 0; }
.feld > span { display: block; font-size: 12px; color: #5a6478; margin-bottom: 4px; }
.feld textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid #c8cfda; border-radius: 5px;
}

/* Kopieren und Einfuegen muss in jedem Schreibfeld gehen. */
input, textarea { user-select: text !important; }

.hinweis { font-size: 12px; color: #5a6478; line-height: 1.45; margin: 6px 0; }

/* --- Aufgaben ---------------------------------------------------------- */

.aufgabe {
  border: 1px solid #e2e6ec; border-radius: 6px;
  padding: 7px 9px; margin-bottom: 6px; background: #fbfcfe;
}
.aufgabe.schluessel { border-color: #1a6fd4; background: #f2f7fd; }
.aufgabe .text { font-size: 13px; }
.aufgabe .herkunft { font-size: 11.5px; color: #8a94a6; margin-top: 3px; }
.aufgabe .fuss { display: flex; gap: 10px; align-items: center; margin-top: 5px; }
.aufgabe .fuss label { font-size: 12px; color: #5a6478; }

/* --- Textfeld auf der Flaeche ------------------------------------------ */

.text-editor {
  position: absolute; z-index: 40;
  font: inherit; font-size: 13px; text-align: center;
  border: 2px solid #1a6fd4; border-radius: 7px;
  padding: 6px; resize: none;
  box-sizing: border-box;
}

/* Eingebettete Hilfe (nur Download-Fassung). */
.fenster.hilfe-fenster { width: min(980px, 100%); height: 100%; padding: 0; overflow: hidden; }
#hilfeRahmen { width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }

/* Speicherstand neben den Datei-Knoepfen. Klickbar nur, wenn ein Klick etwas
   bewirkt (Datei waehlen, Schreiben bestaetigen, nach Fehler erneut). */
.speicher-stand {
  font: inherit; font-size: 12px; color: #5a6478; background: none; border: none;
  padding: 4px 2px; align-self: center; text-align: left;
}
.speicher-stand:not(:disabled) { cursor: pointer; text-decoration: underline dotted; }
.speicher-stand.warnung { color: #b45309; }
.sicherung { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 2px; border-bottom: 1px solid #eef1f6; }
.sicherung-kopf { font-size: 12px; color: #5a6478; }
.sicherung-titel { font-size: 13.5px; }
.sicherung .btn { flex: none; }

/* KI-Hilfe: schwebt ueber der Flaeche, ohne sie abzudunkeln oder zu sperren -
   man muss den Baum sehen koennen, um zu entscheiden, was schon drin ist. Die
   Kopfzeile ist der Griff zum Verschieben. */
.ueberlagerung.schwebend {
  background: transparent; pointer-events: none; padding: 0;
  display: block;
}
.ueberlagerung.schwebend .fenster {
  pointer-events: auto; position: fixed; top: 90px; right: 24px;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 110px);
  box-shadow: 0 8px 28px rgba(20, 26, 36, .28); border: 1px solid #d5dbe5;
}
.schwebend .karte-kopf { cursor: move; user-select: none; -webkit-user-select: none; }
.schwebend .karte-kopf button { cursor: pointer; }

/* KI-Hilfe: Vorschlagsliste zum Ankreuzen. */
.ki-kontingent { font-size: 12px; color: #5a6478; margin: 8px 0 0; min-height: 1em; }
.ki-kontingent.leer { color: #c0392b; }
.ki-meldung { font-size: 13px; color: #34495e; background: #f3f6fb; border-radius: 6px; padding: 8px 10px; margin: 10px 0; }
.ki-vorschlag {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 4px; border-bottom: 1px solid #eef1f6; cursor: pointer;
}
.ki-vorschlag input { margin-top: 3px; flex: none; }
.ki-feld {
  display: inline-block; font-size: 11px; font-weight: 600; color: #1a6fd4;
  background: #e8f0fb; border-radius: 4px; padding: 1px 6px; margin-right: 6px;
}
.ki-text { font-size: 13.5px; }
.ki-kopie { width: 100%; box-sizing: border-box; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; margin-top: 4px; }
.ki-feld.ki-vorhanden { color: #2e7d32; background: #e6f4e7; }
.ki-pfeil { color: #2e7d32; }
.ki-warum { font-size: 12px; color: #5a6478; margin-top: 3px; line-height: 1.4; }
#kiAktionen { margin-top: 12px; }
.ki-datenschutz { font-size: 11px; color: #8a94a6; margin: 14px 0 0; line-height: 1.4; }

/* Druckansicht fuer die PDF-Ausgabe. Am Bildschirm unsichtbar; beim Drucken
   ist sie das Einzige, was zu sehen ist. */
#druckansicht { display: none; }
@media print {
  body > *:not(#druckansicht) { display: none !important; }
  body { background: #fff; }
  #druckansicht { display: block; color: #222; font-size: 10.5pt; }
  #druckansicht h1 { font-size: 15pt; margin: 0 0 2mm; }
  #druckansicht .druck-stand { color: #5a6478; margin: 0 0 4mm; font-size: 9pt; }
  #druckansicht .druck-baum svg { width: 100%; height: auto; display: block; }
  #druckansicht .druck-legende { display: flex; flex-wrap: wrap; gap: 4mm; margin-top: 3mm; font-size: 8.5pt; color: #5a6478; }
  #druckansicht .druck-art { display: inline-flex; align-items: center; gap: 1.5mm; }
  #druckansicht .druck-farbe { display: inline-block; width: 4mm; height: 3mm; border: 1px solid #9aa4b4; border-radius: 1mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #druckansicht .druck-aufgaben { break-before: page; }
  #druckansicht h2 { font-size: 13pt; margin: 0 0 3mm; }
  #druckansicht h3 { font-size: 11pt; margin: 4mm 0 2mm; }
  #druckansicht ol { margin: 0; padding-left: 6mm; }
  #druckansicht li { margin-bottom: 2.5mm; break-inside: avoid; }
  #druckansicht .druck-aus { color: #5a6478; font-size: 9pt; }
  #druckansicht svg * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Lizenzzeile - nur in der Download-Fassung (vom Bauskript eingesetzt). */
.lizenz { font-size: 11px; color: #8a94a6; text-align: center; padding: 10px 16px 14px; }
.lizenz a { color: inherit; }
.lizenz details { margin-top: 6px; }
.lizenz summary { cursor: pointer; }
.lizenz pre { text-align: left; white-space: pre-wrap; font: 11px/1.5 inherit; max-width: 720px;
  margin: 8px auto 0; color: #5a6478; }