/*
 * Datenblatt - Zuschnitt des bisherigen PDF.
 * Der Druckstil ist der eigentliche Zweck: A4 hoch, ohne Bedienelemente.
 */

:root {
  --db-ink: #222;
  --db-label: #6a6a6a;
  --db-titel: #617682; /* vorher #6f8794: nur 3,77:1 auf Weiß, jetzt 4,75:1 */
  --db-linie: #9a9a9a;
  --db-rahmen: #b9b9b9;
  --db-akzent: #0f6e6e;
}

* { box-sizing: border-box; }

body.lp-db {
  margin: 0;
  padding: 0 0 3rem;
  background: #e9edec;
  color: var(--db-ink);
  font-family: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 10pt;
  line-height: 1.4;
}

/* ---------- Bedienleiste, nur am Bildschirm ---------- */

.lp-db__leiste {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding: 1rem; background: #fff; border-bottom: 1px solid var(--db-rahmen);
  position: sticky; top: 0; z-index: 5;
}
.lp-db__knopf {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: 3px;
  background: var(--db-akzent); color: #fff; border: 1px solid var(--db-akzent);
}
.lp-db__knopf--leise { background: #fff; color: var(--db-akzent); }
.lp-db__knopf:hover, .lp-db__knopf:focus { background: #0a5252; border-color: #0a5252; color: #fff; }
.lp-db__knopf:focus-visible { outline: 3px solid var(--db-akzent); outline-offset: 2px; }

/* ---------- Blatt ---------- */

.lp-db__blatt {
  background: #fff;
  width: 210mm; min-height: 297mm;
  margin: 1.5rem auto; padding: 14mm 15mm 10mm;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ---------- Briefkopf ---------- */

.lp-db__briefkopf {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm;
}

/* Gestaffelte Leistungsliste wie im Original */
.lp-db__leistungen { list-style: none; margin: 0; padding: 0; font-size: 8.5pt; }
.lp-db__leistungen li {
  /* jede Zeile eine Stufe weiter eingerückt */
  margin-left: calc(var(--stufe) * 7mm);
  padding-left: 3.5mm; position: relative;
}
.lp-db__leistungen li::before {
  content: "•"; position: absolute; left: 0; color: var(--db-ink);
}

/*
 * Die Logodatei ist quadratisch und hat rundum Weißraum: Der bedruckte Bereich
 * beginnt bei 15,1 % / 33,4 % und misst 71,9 % × 34,6 %. Ausgemessen, nicht geschätzt -
 * daraus ergeben sich Breite und Versatz unten. Höhe = 46mm ÷ 2,076 (Seitenverhältnis).
 */
.lp-db__logo { flex: none; width: 46mm; height: 22.2mm; overflow: hidden; }
.lp-db__logo img { width: 139.1%; max-width: none; display: block; margin: -46.5% 0 0 -21.1%; }

.lp-db__anschrift {
  margin: 2mm 0 0;
  padding: 1.4mm 0;
  border-top: 1px solid var(--db-linie);
  border-bottom: 1px solid var(--db-linie);
  font-size: 7.5pt; text-align: center; letter-spacing: .01em;
}

/* ---------- Titel ---------- */

.lp-db__titel {
  font-size: 22pt; font-weight: 400; letter-spacing: .01em;
  color: var(--db-titel);
  margin: 12mm 0 8mm;
}

/* ---------- Zwei Spalten ---------- */

/* Im HTML stehen die Abbildungen zuerst (wegen des Drucks, siehe unten) -
   hier werden sie wieder nach rechts gesetzt. */
.lp-db__spalten { display: grid; grid-template-columns: 1fr 58mm; gap: 8mm; align-items: start; }
.lp-db__bilder { grid-column: 2; grid-row: 1; }
.lp-db__daten  { grid-column: 1; grid-row: 1; }

.lp-db__untertitel { margin: 0 0 6mm; font-size: 8.5pt; color: var(--db-ink); }

.lp-db__daten h2 {
  font-size: 15pt; font-weight: 400; color: var(--db-titel);
  margin: 0 0 4mm;
}
.lp-db__daten table { width: 100%; border-collapse: collapse; }
.lp-db__daten th, .lp-db__daten td {
  text-align: left; vertical-align: top;
  padding: 1.5mm 2mm 1.5mm 0; font-size: 8.5pt; font-weight: 400;
}
.lp-db__daten th { width: 46%; color: var(--db-label); padding-right: 4mm; }
.lp-db__daten td { color: var(--db-ink); }

/* ---------- Abbildungen: Beschriftung steht darüber ---------- */

.lp-db__bilder figure { margin: 0 0 6mm; }
.lp-db__bilder figcaption {
  font-size: 7.5pt; color: var(--db-label);
  text-align: center; margin-bottom: 1.2mm;
}
/*
 * Der Rahmen gehoert um den Container, nicht ums Bild: Bei eingepassten
 * Bildern (object-fit) umschliesst eine Bild-Border nur die Bildflaeche
 * und wirkt dadurch unterbrochen.
 */
.lp-db__rahmen {
  border: 1px solid var(--db-rahmen);
  background: #fff;
  height: 40mm;
  /* Innenabstand haelt die Bildkante von der Linie fern - stoesst ein
     eingepasstes Bild bündig an den Rahmen, verdeckt es ihn beim Runden. */
  padding: 1.5mm;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lp-db__bilder img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; display: block;
}

.lp-db__fuss {
  margin-top: 10mm; padding-top: 4mm;
  font-size: 7.5pt; color: var(--db-ink);
}

/* ---------- Druck ---------- */

@page { size: A4 portrait; margin: 12mm 14mm 10mm; }

@media print {
  body.lp-db { background: #fff; padding: 0; font-size: 9pt; }

  /* Das Theme haengt ueber wp_footer() eigene Bausteine an - im Ausdruck
     erschien dadurch ein Suchformular auf einer dritten Seite. */
  body.lp-db > *:not(.lp-db__blatt) { display: none !important; }

  .lp-db__blatt { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }

  /*
   * Kein Raster im Druck: Chrome bricht Grid- und Flex-Container ueber
   * Seitengrenzen nicht um - die Abbildungen landeten dadurch auf Seite 2.
   * Ein Float wird sauber umflossen und umbrochen.
   */
  .lp-db__spalten { display: block !important; }
  .lp-db__bilder { float: right; width: 52mm; margin: 0 0 4mm 6mm; }
  .lp-db__daten  { overflow: hidden; }

  .lp-db__titel { margin: 8mm 0 6mm; font-size: 19pt; }
  .lp-db__daten th, .lp-db__daten td { padding: 1.1mm 2mm 1.1mm 0; font-size: 8pt; }
  /*
   * Rahmenstaerke im Druck in Millimetern, nicht in Pixeln: Eine 1px-Linie
   * faellt beim Umrechnen auf die Druckaufloesung stellenweise unter das
   * Raster und fehlt dann abschnittsweise.
   */
  .lp-db__rahmen { height: 34mm; border-width: .3mm; }
  .lp-db__daten tr, .lp-db__bilder figure { break-inside: avoid; }

  a { color: inherit; text-decoration: none; }
  img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 220mm) {
  .lp-db__blatt { width: auto; margin: 1rem; padding: 8mm; }
  .lp-db__spalten { grid-template-columns: 1fr; }
  /* Bei einer Spalte erzeugte grid-column: 2 eine unsichtbare zweite - die Seite lief seitlich über. */
  .lp-db__bilder { grid-column: auto; grid-row: auto; }
  .lp-db__leistungen li { margin-left: calc(var(--stufe) * 4mm); }
}
@media (max-width: 30rem) {
  .lp-db__blatt { margin: .5rem; padding: 5mm; }
  /* Leistungsliste und Logo passen am Handy nicht nebeneinander. */
  .lp-db__briefkopf { flex-wrap: wrap; }
}