/* ==========================================================================
   Übergabeprotokoll – Formular am Schirm und auf Papier.

   Das Ergebnis ist eine Anlage zum Mietvertrag. Deshalb gibt es keine
   PDF-Bibliothek, sondern eine Druckansicht: „Drucken" im Browser erzeugt
   über das Ziel „Als PDF speichern" dieselbe Datei, ohne Abhängigkeiten.
   ========================================================================== */

.prot{max-width:940px;margin:0 auto}

/* Die Druckzwillinge (siehe uebergabe.js) sind am Schirm nicht zu sehen */
.pwert{display:none}

/* Hinweiskasten über dem Formular – erscheint nicht im Druck */
.prot-intro{
  background:var(--mist);border-radius:var(--r-md);padding:26px 30px;margin-bottom:38px;
}
.prot-intro h2{font-size:20px;margin-bottom:10px}
.prot-intro ul{margin:12px 0 0;padding-left:20px;color:var(--ink-soft);font-size:15px;line-height:1.7}

/* Umschaltung Einzug / Auszug – der Besucher wählt, bevor er tippt */
.pwahl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:34px}
.pwahl a{
  display:block;padding:22px 26px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--bg);transition:.2s var(--ease);
}
.pwahl a:hover{border-color:var(--teal);transform:translateY(-2px)}
.pwahl a.aktiv{border-color:var(--teal);background:var(--mist);box-shadow:inset 0 0 0 1px var(--teal)}
.pwahl b{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;margin-bottom:5px}
.pwahl .marke{
  width:19px;height:19px;border-radius:50%;border:2px solid var(--ink-faint);flex:none;
  display:grid;place-items:center;
}
.pwahl a.aktiv .marke{border-color:var(--teal)}
.pwahl a.aktiv .marke::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal)}
.pwahl p{font-size:14px;color:var(--ink-soft);line-height:1.55}
@media (max-width:760px){.pwahl{grid-template-columns:1fr}}

/* ---------- Abschnitte ---------- */
.pblock{margin-bottom:34px;break-inside:avoid}
.pblock > h2{
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  padding-bottom:9px;margin-bottom:16px;border-bottom:2px solid var(--ink);
  display:flex;gap:10px;align-items:baseline;
}
.pblock > h2 .nr{color:var(--teal-text)}
.pblock > p.hint{font-size:14px;color:var(--ink-soft);margin-bottom:14px;max-width:78ch}

/* ---------- Feldpaare ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.pgrid.drei{grid-template-columns:1fr 1fr 1fr}
.pfeld{display:flex;flex-direction:column;gap:5px}
.pfeld.weit{grid-column:1/-1}
.pfeld > label{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}
.pfeld input,.pfeld textarea,.pfeld select{
  height:42px;padding:0 12px;font-size:15px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--bg);color:var(--ink);width:100%;
}
.pfeld textarea{height:auto;min-height:84px;padding:11px 12px;line-height:1.5;resize:vertical}
.pfeld input:focus,.pfeld textarea:focus,.pfeld select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,134,170,.12);
}

/* ---------- Tabellen im Formular ---------- */
.ptab{width:100%;border-collapse:collapse;font-size:14.5px}
.ptab th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 8px 7px;border-bottom:1px solid var(--line);
}
.ptab td{padding:4px 4px;vertical-align:middle}
.ptab td:first-child,.ptab th:first-child{padding-left:0}
.ptab input,.ptab select,.ptab textarea{
  width:100%;height:38px;padding:0 10px;font-size:14.5px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);
}
.ptab textarea{height:38px;min-height:38px;padding:9px 10px;line-height:1.35;resize:vertical}
.ptab input:focus,.ptab select:focus,.ptab textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,134,170,.12);
}
.ptab .eng{width:88px}
.ptab .mittel{width:150px}
.ptab .datum{width:140px}

/* Zeile entfernen */
.pweg{
  width:32px;height:32px;flex:none;border:1px solid var(--line);background:var(--bg);
  border-radius:8px;cursor:pointer;color:var(--ink-faint);font-size:17px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.pweg:hover{border-color:#C0392B;color:#C0392B}
.pplus{
  margin-top:12px;border:1px dashed var(--line);background:transparent;border-radius:var(--r-xs);
  padding:11px 18px;font-size:14px;font-weight:500;color:var(--teal-text);cursor:pointer;
}
.pplus:hover{border-color:var(--teal);background:var(--mist)}

/* ---------- Ausstattung: Kästchen ---------- */
.pausst{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.pcheck{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px}
.pcheck input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--teal);margin:0}
.pcheck .eig{
  margin-left:auto;font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.pcheck .eig input{width:15px;height:15px}

/* ---------- Raum-Matrix ---------- */
/* Tabellen sind auf dem Handy breiter als der Bildschirm. Da .page waagerecht
   abschneidet, müssen sie einen eigenen rollbaren Kasten haben – sonst sind
   die hinteren Spalten unerreichbar. Im Druck wird das wieder aufgehoben. */
.ptab-rolle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptab-rolle > table{min-width:480px}

.praeume{overflow-x:auto}
/* Feste Spaltenbreiten, sonst quetscht die Tabelle die Bauteil-Spalte zusammen
   und „Elektro / Schalter" wird abgeschnitten. */
.praeume table{min-width:720px;table-layout:fixed}
.praeume th:first-child,.praeume td:first-child{width:220px}
.praum-kopf{display:flex;gap:6px;align-items:center}
.praum-kopf input{font-weight:600!important}

/* ---------- Unterschriften ---------- */
.psign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px}
.psign-feld{border-top:1px solid var(--ink);padding-top:8px;font-size:13px;color:var(--ink-soft)}
.psign-linie{height:58px}

/* ---------- Werkzeugleiste ---------- */
.pbar{
  position:sticky;bottom:0;z-index:40;margin-top:44px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:16px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
}
.pbar .hinweis{font-size:13px;color:var(--ink-faint);margin-left:auto;max-width:44ch}

/* Datumsfelder. Das aufklappende Kalenderfenster ist Browser-Oberfläche und
   für CSS nicht erreichbar – gestaltet wird deshalb das Feld selbst: Symbol in
   Markenfarbe, gleiche Höhe und Fokusfarbe wie alle anderen Felder. */
.pfeld input[type=date],.ptab input[type=date]{
  font-variant-numeric:tabular-nums;
  padding-right:8px;
}
input[type=date]::-webkit-calendar-picker-indicator{
  /* Kalendersymbol in Petrol statt Grau, als Maske eingefärbt */
  width:17px;height:17px;padding:0;margin:0;cursor:pointer;opacity:.55;
  background-color:var(--teal-text);
  background-image:none;
  -webkit-mask:var(--kal) center/17px no-repeat;
  mask:var(--kal) center/17px no-repeat;
  transition:opacity .15s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}
/* Leeres Datumsfeld: die Browserschrift mm/tt/jjjj tritt zurück */
.pfeld input[type=date]:not(:focus):invalid,
.ptab input[type=date]:not(:focus):invalid{color:var(--ink-faint)}

/* Wahl zwischen Anhängen und separater Übergabe.
   Der Abstand nach oben ist Pflicht: Die Karten stoßen sonst direkt an das
   Feld „Was zeigen die Fotos" darüber – .pgrid bringt keinen unteren Rand mit. */
.pmodus{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 24px}
.pmodus-karte{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
  background:var(--bg);transition:.18s var(--ease);
}
.pmodus-karte:hover{border-color:var(--teal)}
.pmodus-karte.aktiv{border-color:var(--teal);background:var(--mist)}
.pmodus-karte input{
  width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--teal);
}
.pmodus-text{display:flex;flex-direction:column;gap:3px}
.pmodus-text b{font-size:15.5px;font-weight:600}
.pfoto-druckzeile{display:none}
@media (max-width:600px){.pmodus{grid-template-columns:1fr}}

/* ---------- Fotoanlage ---------- */
.pfoto-wahl{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pfoto-leiste{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pfoto-leiste .pplus{margin-top:0}
.pfoto-stand{margin-bottom:18px}
/* Warnstufe: ab vielen Bildern sichtbar rot, weil auf älteren Geräten die
   PDF-Erzeugung dann tatsächlich fehlschlagen kann. */
.pfoto-stand--warnung{
  color:var(--warn);border-left:3px solid var(--warn);
  padding:10px 0 10px 14px;background:color-mix(in srgb,var(--warn) 6%,transparent);
  border-radius:0 var(--r-xs) var(--r-xs) 0;font-weight:500;
}
.pfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.pfoto{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-2)}
.pfoto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pfoto figcaption{display:flex;gap:8px;align-items:center;padding:10px}
.pfoto figcaption input{
  flex:1;min-width:0;height:34px;padding:0 9px;font-size:13.5px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
}
.pfoto figcaption input:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,134,170,.12)}
.pfoto figcaption .pweg{width:30px;height:30px;font-size:15px}
.pfoto-datum{display:block;padding:0 10px 10px;font-size:11.5px;color:var(--ink-faint)}
@media (max-width:600px){.pfotos{grid-template-columns:1fr 1fr;gap:12px}}

/* Gefahrenknöpfe: klein, rot, zweistufig. Rot ist hier Absicht – die beiden
   Knöpfe vernichten Eingaben, sie sollen sich vom Rest abheben. */
/* [hidden] ausdrücklich behandeln: ein gesetztes display überstimmt sonst die
   Browserregel [hidden]{display:none}, und die Nachfrage steht dauerhaft offen. */
.pgefahr-huelle[hidden],.pgefahr-frage[hidden],.pgefahr[hidden]{display:none!important}
.pgefahr-huelle{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgefahr{
  border:1px solid var(--warn);background:transparent;color:var(--warn);
  border-radius:100px;padding:8px 15px;font-size:13px;font-weight:500;cursor:pointer;
  transition:.18s var(--ease);white-space:nowrap;
}
.pgefahr:hover{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.pgefahr:focus-visible{outline:2px solid var(--warn);outline-offset:2px}
.pgefahr-frage{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgefahr-text{font-size:13px;font-weight:500;color:var(--warn)}
.pgefahr-scharf{background:var(--warn);color:#fff;border-color:var(--warn)}
.pgefahr-scharf:hover{background:var(--warn-dunkel);border-color:var(--warn-dunkel)}
.pgefahr-ab{border-color:var(--line);color:var(--ink-soft)}
.pgefahr-ab:hover{background:var(--bg-2);border-color:var(--ink-faint)}

/* Nur im Druck sichtbar */
.pkopfzeile,.pfusszeile{display:none}
.panlage{display:none}

/* Hinweis auf einen wiederhergestellten Stand */
.pwieder{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--mist);border-radius:var(--r-md);padding:14px 18px;margin-bottom:28px;
  font-size:14.5px;color:var(--ink);
}
.pauto{font-size:13.5px;color:var(--ink-soft);gap:8px;cursor:default}
.pauto label{cursor:pointer}
.pauto input[type=checkbox]{width:16px;height:16px}

@media (max-width:760px){
  .pgrid,.pgrid.drei,.pausst,.psign{grid-template-columns:1fr}
  /* Nicht klebend am Telefon: die Leiste nahm dort fast ein Drittel des
     Bildschirms dauerhaft ein. Durch das automatische Sichern muss man sie
     ohnehin nur noch zum Drucken erreichen. */
  .pbar{position:static;backdrop-filter:none;background:transparent;
        border-top:1px solid var(--line);flex-direction:column;align-items:stretch}
  .pbar .btn,.pbar .pgefahr-huelle{width:100%}
  .pbar .btn{justify-content:center}
  .pbar .pgefahr{width:100%}
  .pbar .hinweis{margin-left:0;max-width:none}
}

/* ==========================================================================
   Druck. Ziel ist ein Dokument, das man unterschreiben kann.
   ========================================================================== */
@media print{
  @page{size:A4 portrait;margin:15mm 14mm 22mm}

  /* Alles, was zur Website gehört, verschwindet */
  .nav,.footer,.pbar,.prot-intro,.pwahl,.pplus,.pweg,.prot-nodruck,noscript{display:none!important}

  html,body{background:#fff!important}
  body{font-size:10.5pt;line-height:1.4;color:#000}
  .page{box-shadow:none;border-radius:0;background:#fff}
  .section{padding:0!important}
  .wrap{padding:0!important;max-width:none!important}
  .prot{max-width:none}

  /* ---------- Dokumentenkopf mit Marke ---------- */
  .pkopfzeile{display:block;margin-bottom:16pt}
  .pk-marke{
    display:flex;align-items:center;gap:7pt;
    padding-bottom:7pt;margin-bottom:11pt;border-bottom:.6pt solid #C9D2D2;
  }
  .pk-logo{width:15pt;height:15pt;display:block;flex:none}
  .pk-logo svg{width:15pt;height:15pt;display:block}
  .pk-wort{font-size:12pt;font-weight:600;letter-spacing:-.03em;color:#00655F}
  .pk-tag{margin-left:auto;font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;color:#7A8A8A}
  .pkopfzeile h1{
    font-size:21pt;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
    margin:0 0 3pt;color:#000;line-height:1;
  }
  /* Nicht ".sub" nennen – die Klasse gehört im Stylesheet zum Navigations-
     Untermenü und bringt Radius, opacity:0 und visibility:hidden mit. */
  .pkopfzeile .pk-sub{
    font-size:9pt;color:#4E6162;padding-bottom:7pt;
    border-bottom:1.6pt solid #00655F;border-radius:0;
  }

  .pblock{margin-bottom:11pt;break-inside:auto}
  .pblock > h2{
    font-size:11.5pt;border-bottom:1pt solid #000;padding-bottom:3pt;margin-bottom:7pt;
    break-after:avoid;
  }
  .ptab tr,.pcheck,.pfeld{break-inside:avoid}
  /* Überschrift und Erklärtext dürfen nicht allein am Seitenfuß zurückbleiben */
  .pblock > p.hint{break-after:avoid;break-inside:avoid}
  .pblock > h2 .nr{color:#00655F}
  .pblock > p.hint{font-size:8.5pt;color:#333;margin-bottom:6pt}

  /* Kein Formularfeld wird gedruckt – gedruckt wird der Zwilling aus Text.
     Nur so bricht langer Inhalt um, statt abgeschnitten zu werden. */
  #protokoll input,#protokoll textarea,#protokoll select{display:none!important}

  .pwert{
    display:block;font-size:9.5pt;color:#000;line-height:1.35;
    border-bottom:.6pt solid #8A9797;padding:1pt 2pt;min-height:13pt;
    white-space:pre-wrap;overflow-wrap:break-word;
    /* Ohne Silbentrennung bricht „Isolierverglasung" in schmalen Spalten
       mitten im Wort. Die Seiten sind lang="de", also trennt Chromium richtig. */
    hyphens:auto;-webkit-hyphens:auto;
  }
  .pfeld > label{font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase;color:#666}
  .pfeld .pwert{min-height:14pt}
  .pgrid{gap:7pt 14pt}

  /* Kästchen: gezeichnetes Quadrat mit × statt eines Formularelements */
  .pwert-box{
    display:inline-block;width:8.5pt;height:8.5pt;min-height:0;flex:none;
    border:.7pt solid #000;border-bottom-width:.7pt;border-radius:0;
    padding:0;text-align:center;line-height:8pt;font-size:8.5pt;font-weight:600;
  }

  .ptab{font-size:9pt}
  .ptab th{font-size:7.5pt;padding:0 4pt 2pt;border-bottom:.8pt solid #000;color:#000}
  .ptab td{padding:1.5pt 4pt}
  .ptab .letzte{display:none}      /* Spalte mit dem Entfernen-Knopf */

  /* Einspaltig wie in einer klassischen Vorlage. Als zweispaltiges Grid
     zerschneidet Chromium beim Seitenumbruch die Zeilen mitten im Text;
     einspaltig bricht es sauber zwischen den Zeilen und füllt die Seite. */
  .pausst{display:block}
  .pcheck{font-size:9pt;padding:1.5pt 0;gap:5pt;align-items:baseline}
  .pcheck .pwert:not(.pwert-box){flex:1;font-size:9pt;border-bottom:.5pt solid #C9D2D2}
  .pcheck .eig{font-size:6.5pt;letter-spacing:.04em;color:#5D6D6E;gap:4pt}
  .pcheck .eig .pwert-box{width:7pt;height:7pt;line-height:6.5pt;font-size:7pt}
  .ptab-rolle{overflow:visible}
  .ptab-rolle > table{min-width:0}
  .praeume{overflow:visible}
  /* Gleich breite Spalten, sonst quetscht ein langer Raumname die übrigen. */
  .praeume table{min-width:0;table-layout:fixed;width:100%}
  .praeume th:first-child,.praeume td:first-child{width:16%}
  /* Raumnamen sind Nutzereingaben – die bleiben in normaler Schreibweise. */
  .praeume .pwert{font-size:8.5pt;line-height:1.3}
  .praeume th .pwert{
    text-transform:none;font-weight:600;font-size:9pt;letter-spacing:0;
    border-bottom:0;color:#000;
  }

  .psign{margin-top:10pt;gap:26pt;break-inside:avoid}
  .psign-linie{height:34pt}
  .psign-feld{border-top:.8pt solid #000;font-size:8.5pt;color:#000}

  /* Fußzeile einmal am Dokumentende. Ein Wiederholen auf jeder Seite ginge nur
     über position:fixed – Chromium setzt sie dabei aber an den Seitenanfang.
     Lieber einmal richtig als fünfmal falsch. */
  .pfusszeile{
    display:flex!important;align-items:center;justify-content:space-between;
    margin-top:14pt;padding-top:5pt;border-top:.5pt solid #C9D2D2;
    font-size:7.5pt;color:#7A8A8A;break-inside:avoid;
  }
  .pf-marke{display:flex;align-items:center;gap:5pt}
  .pf-marke svg{width:9pt;height:9pt;display:block;flex:none}

  /* ---------- Fotoanlage im Druck ---------- */
  .pfoto-wahl,.pfoto-leiste,.pfoto-stand{display:none!important}
  /* Die Anlage beginnt auf einer neuen Seite und zeigt die Bilder ein zweites
     Mal – diesmal ohne Bedienelemente. Das Raster oben verschwindet dafür. */
  .panlage{display:block;break-before:page}
  .panlage[hidden]{display:none!important}
  .pfotos:not(#fotoAnlageDruck){display:none!important}
  .pmodus{display:none!important}
  .pfoto-druckzeile{display:block;font-size:9.5pt;color:#000;margin-bottom:8pt}
  /* Der nicht gewählte Weg verschwindet – [hidden] muss gewinnen. */
  .pfoto-weg[hidden]{display:none!important}
  /* Bildunterschrift in der Anlage: reiner Text, kein Formularfeld */
  .pfoto-bu{display:block;font-size:8.5pt;color:#000;line-height:1.3;
    overflow-wrap:break-word}
  .pfotos{display:grid;grid-template-columns:1fr 1fr;gap:10pt}
  .pfoto{
    border:.5pt solid #C9D2D2;border-radius:0;background:transparent;
    break-inside:avoid;page-break-inside:avoid;
  }
  .pfoto img{width:100%;aspect-ratio:auto;max-height:78mm;object-fit:contain;background:#fff}
  .pfoto figcaption{padding:3pt 4pt 0;display:block}
  .pfoto figcaption .pweg{display:none!important}
  .pfoto figcaption .pwert{
    border-bottom:0;font-size:8.5pt;min-height:0;padding:0;color:#000;
  }
  .pfoto-datum{padding:0 4pt 4pt;font-size:7pt;color:#7A8A8A}

  /* Seitenumbrüche an sinnvollen Stellen */
  .pumbruch{break-before:page}
  a[href]::after{content:""}
}