/* ==========================================================================
   drucken.css — Druckausgabe der LiberoDraft-ONLINE-HILFE
   Version 1.0.0 (Hilfe v1.13.0)
   Drei Teile:
     (1) Button «Drucken» mit Aufklappliste in der Kopfzeile
     (2) Auswahlseite drucken.html (Kapitel- und Seiten-Haekchen)
     (3) @media print — Papierausgabe einer oder vieler Seiten
   Der allgemeine Druck-Stil der Vorlage (hilfe.css) blendet Kopfzeile,
   Navigation, Lupe und «Auf dieser Seite» aus; hier kommt alles dazu, was
   die Sammelausgabe braucht (Titelblatt, Inhaltsverzeichnis, Blattwechsel).
   ========================================================================== */

/* --- (1) Kopfzeile ------------------------------------------------------ */
.druckfeld{position:relative;flex:0 0 auto;margin-left:auto}
.druckfeld + .sprachwechsel{margin-left:0}      /* der Abstand kommt jetzt vom Druckfeld */
.druckknopf{
  display:flex;align-items:center;gap:6px;padding:4px 11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);border-radius:3px;
  background:none;color:#fff;font:inherit;font-size:14px;line-height:1.5;white-space:nowrap;
}
.druckknopf:hover{background:rgba(255,255,255,.14)}
.druckknopf .pfeil{font-size:10px;opacity:.8}
.druckliste{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:210px;
  background:#fff;border:1px solid var(--rand,#c9d4e2);border-radius:8px;
  box-shadow:0 8px 24px rgba(10,47,92,.18);padding:6px;
}
.druckliste[hidden]{display:none}
.druckliste button{
  display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:5px;
  background:none;color:var(--fg,#0a2f5c);font:inherit;font-size:14px;cursor:pointer;
}
.druckliste button:hover{background:var(--flaeche2,#eef4fb);color:var(--akzent,#0b63c5)}
.druckliste hr{border:0;border-top:1px solid var(--rand,#e3eaf3);margin:5px 2px}

/* --- (2) Auswahlseite --------------------------------------------------- */
.druckwahl{margin:18px 0 0}
.druckwahl fieldset{border:1px solid var(--rand,#c9d4e2);border-radius:8px;padding:12px 16px;margin:0 0 18px}
.druckwahl legend{padding:0 6px;font-weight:600;color:var(--fg2,#4a5a70)}
.druckwahl .bereichzeile{margin:10px 0 4px;font-weight:600}
.druckwahl ul{list-style:none;margin:0 0 6px;padding:0 0 0 22px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 18px}
.druckwahl li{margin:0}
.druckwahl label{display:flex;align-items:flex-start;gap:7px;cursor:pointer;line-height:1.45}
.druckwahl input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.druckzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.druckzeile .zaehler{color:var(--fg2,#4a5a70)}
.druckwahl .optionen{display:flex;gap:20px;flex-wrap:wrap}
.druckstart{
  padding:8px 18px;border:0;border-radius:6px;background:var(--akzent,#0b63c5);
  color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.druckstart:hover{background:var(--akzent2,#0a2f5c)}
.knopf2{padding:6px 12px;border:1px solid var(--rand,#c9d4e2);border-radius:6px;
  background:#fff;color:var(--fg,#0a2f5c);font:inherit;font-size:14px;cursor:pointer}
.knopf2:hover{border-color:var(--akzent,#0b63c5);color:var(--akzent,#0b63c5)}
.druckmeldung{margin:14px 0 0;padding:10px 14px;border-radius:6px;
  background:var(--flaeche2,#eef4fb);color:var(--fg,#0a2f5c)}
.druckmeldung[hidden]{display:none}

/* --- (3) Papierausgabe -------------------------------------------------- */
/* Sammelausgabe: der Rumpf wird ausgeblendet, gedruckt wird #druckblatt */
#druckblatt{display:none}
body.druckt #druckblatt{display:block}
body.druckt .rumpf,body.druckt .kopf,body.druckt .fuss,body.druckt .lupe{display:none}

@media (max-width:820px){
  .druckknopf span:not(.pfeil){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .druckknopf::before{content:"\1F5B6";font-size:15px}
}
@media print{
  @page{margin:16mm 14mm 14mm}
  .druckfeld,.druckliste{display:none}
  #druckblatt .dseite{page-break-after:always;break-after:page}
  #druckblatt .dseite:last-child{page-break-after:auto;break-after:auto}
  #druckblatt figure,#druckblatt .bildpaar,#druckblatt table{
    page-break-inside:avoid;break-inside:avoid}
  #druckblatt h1,#druckblatt h2,#druckblatt h3{page-break-after:avoid;break-after:avoid}
  #druckblatt .dtitel{page-break-after:always;break-after:page;text-align:center;padding-top:60mm}
  #druckblatt .dtitel img{width:70mm;height:auto}
  #druckblatt .dinhalt{page-break-after:always;break-after:page}
  .druckwahl,.druckmeldung,.brotkrumen{display:none}
}

/* Aufbau des Sammelblatts (gilt auch am Bildschirm, damit sich das Ergebnis
   vor dem Drucken ansehen laesst) */
#druckblatt{max-width:190mm;margin:0 auto;padding:0 4mm}
#druckblatt .dseite{margin:0 0 18mm}
#druckblatt .dkopf{border-bottom:1px solid var(--rand,#c9d4e2);margin:0 0 8px;
  padding:0 0 3px;font-size:11px;color:var(--fg2,#4a5a70)}
#druckblatt .dtitel h1{font-size:26px;margin:14px 0 6px}
#druckblatt .dtitel p{color:var(--fg2,#4a5a70);margin:2px 0}
#druckblatt .dinhalt ol{list-style:none;margin:0;padding:0}
#druckblatt .dinhalt li{padding:2px 0;border-bottom:1px dotted var(--rand,#dfe7f1)}
#druckblatt .dinhalt .marke{display:inline-block;min-width:26px;color:var(--fg2,#4a5a70)}
#druckblatt img{max-width:100%;height:auto}
#druckblatt figure{margin:12px 0}
#druckblatt figcaption{font-size:12px;color:var(--fg2,#4a5a70);margin-top:4px}
#druckblatt .aufdieser,#druckblatt .lupe-voll{display:none}
