/* infoblatt.css – Infoblatt zum Ausdrucken, zwei Blätter A4
 *
 * Am Bildschirm: Blätter auf grauem Grund, Leiste mit „Drucken“.
 * Beim Drucken und für die PDF: nur die Blätter, randlos auf A4.
 * Farben wie Farbsatz A der Website.
 */
@font-face { font-family: "Bitter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../schriften/bitter.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("../schriften/nunito-sans.woff2") format("woff2"); }

:root {
  --petrol: #22607a;
  --petrol-dunkel: #163f50;
  --gruen: #2a7d6f;
  --gelb: #f2c14e;
  --gelb-hell: #fdf3d6;
  --hell: #e2eef2;
  --hell-2: #eef5f7;
  --papier: #ffffff;
  --text: #1c2a30;
  --leise: #4f6570;
  --linie: #d3e0e2;
  --tisch: #d9e4e8;
  --titel: "Bitter", Georgia, "Times New Roman", serif;
  --schrift: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tisch); color: var(--text); font-family: var(--schrift); font-size: 10.5pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3 { font-family: var(--titel); color: var(--petrol-dunkel); margin: 0; line-height: 1.2; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }
.ico.zurueck { transform: scaleX(-1); }

/* Leiste am Bildschirm */
.ib-leiste { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px max(16px, calc((100vw - 210mm) / 2)); background: var(--petrol-dunkel); color: #fff; font-size: 1rem; }
.ib-leiste-text { flex: 1; color: #c9dde4; }
.ib-leiste-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.ib-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--gelb); color: var(--petrol-dunkel); font: 700 1rem/1 var(--schrift); text-decoration: none; cursor: pointer; }
.ib-knopf.leise { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
.ib-knopf:hover { filter: brightness(1.06); }
.ib-knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

/* Blätter */
.ib-blaetter { display: grid; justify-content: center; gap: 28px; padding: 28px 16px 48px; }
.blatt { width: 210mm; height: 297mm; padding: 11mm 15mm 9mm; background: var(--papier); box-shadow: 0 2px 6px rgb(22 63 80 / .12), 0 24px 50px -24px rgb(22 63 80 / .45); display: flex; flex-direction: column; gap: 5mm; overflow: hidden; }
.blatt > section { display: grid; gap: 2.6mm; }
.blatt h2 { font-size: 14pt; display: flex; align-items: center; gap: 3mm; }
.blatt h2::before { content: ""; width: 7mm; height: 2.2px; border-radius: 2px; background: var(--gelb); }

/* Kopf und Fuß */
.ib-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8mm; padding-bottom: 3mm; border-bottom: 1px solid var(--linie); }
.ib-marke { display: flex; align-items: center; gap: 3mm; }
.ib-marke .logo-zeichen { width: 12mm; height: 12mm; }
.ib-marke b { display: block; font-family: var(--titel); font-size: 15pt; color: var(--petrol-dunkel); line-height: 1.1; }
.ib-marke span { font-size: 9.5pt; color: var(--leise); }
.ib-erreichbar { display: grid; justify-items: end; text-align: right; font-size: 9pt; color: var(--leise); }
.ib-telefon { display: inline-flex; align-items: center; gap: 1.5mm; font-family: var(--titel); font-weight: 700; font-size: 13pt; color: var(--petrol-dunkel); }
.ib-telefon .ico { color: var(--gruen); }
.ib-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 6mm; padding-top: 3mm; border-top: 1px solid var(--linie); font-size: 7.5pt; color: var(--leise); }
.ib-fuss span:last-child { white-space: nowrap; }

/* Blatt 1 */
.ib-titel { display: grid; gap: 2mm; padding: 5mm 6mm; border-radius: 4mm; background: linear-gradient(135deg, var(--hell) 0%, var(--hell-2) 60%, var(--gelb-hell) 100%); }
.ib-ueber { font-size: 8.5pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen); }
.ib-titel h1 { font-size: 20pt; text-wrap: nowrap; }
.ib-einleitung { font-size: 11pt; }
.ib-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
.ib-leistung { display: grid; align-content: start; gap: 2mm; padding: 3.5mm; border: 1px solid var(--linie); border-radius: 3mm; }
.ib-leistung h3 { display: flex; align-items: center; gap: 2mm; font-size: 11pt; white-space: nowrap; }
.ib-symbol { display: grid; place-items: center; width: 8mm; height: 8mm; border-radius: 50%; background: var(--hell); color: var(--petrol); flex: none; }
.ib-symbol .ico { width: 4.6mm; height: 4.6mm; }
.ib-leistung ul { padding-left: 4mm; display: grid; gap: .6mm; font-size: 9.8pt; line-height: 1.38; }
.ib-leistung li::marker { color: var(--gruen); }
.ib-klein { font-size: 9pt; color: var(--leise); }

.ib-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5mm; align-items: start; }
.ib-zwei > div { display: grid; gap: 2.5mm; }
.ib-budget { padding: 4mm 5mm; display: grid; gap: 2mm; border-radius: 3mm; background: var(--petrol-dunkel); color: #e6f0f3; font-size: 9.8pt; }
.ib-budget-zeile { font-size: 8.5pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); }
.ib-budget-zahl { font-family: var(--titel); font-weight: 700; font-size: 26pt; line-height: 1; color: #fff; }
.ib-budget-zahl small { font-family: var(--schrift); font-weight: 600; font-size: 10pt; color: #c9dde4; }
.ib-budget b { color: #fff; }
.ib-preise { width: 100%; border-collapse: collapse; font-size: 10.5pt; font-variant-numeric: tabular-nums; }
.ib-preise th { text-align: left; font-size: 8.5pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding: 0 0 1.5mm; border-bottom: 1.5px solid var(--petrol); }
.ib-preise td { padding: 1.6mm 0; border-bottom: 1px solid var(--linie); }
.ib-preise .zahl { text-align: right; white-space: nowrap; }
.ib-preise td.zahl { font-weight: 700; color: var(--petrol-dunkel); }
.ib-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.ib-wege > div { display: grid; gap: 1mm; padding: 3mm 4mm; border-left: 2.2px solid var(--gelb); background: var(--hell-2); border-radius: 0 2mm 2mm 0; font-size: 9.5pt; }
.ib-wege b { color: var(--petrol-dunkel); }

/* Blatt 2 */
.ib-schritte { list-style: none; padding: 0; display: grid; gap: 2mm; counter-reset: schritt; }
.ib-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 8mm minmax(0, 1fr); column-gap: 3mm; align-items: start; }
.ib-schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 7mm; height: 7mm; border-radius: 50%; background: var(--petrol); color: #fff; font-family: var(--titel); font-weight: 700; font-size: 11pt; align-self: start; }
.ib-schritte p { font-size: 9.8pt; padding-top: .6mm; }
.ib-schritte b { font-family: var(--titel); font-size: 10.5pt; color: var(--petrol-dunkel); }
.ib-wissen { gap: 3mm 6mm; font-size: 9.8pt; }
.ib-wissen b { color: var(--petrol-dunkel); }

.ib-gebiet { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6mm; }
.ib-gebiet > div { display: grid; gap: 2mm; align-content: start; }
.ib-gebiet-titel { font-size: 8.5pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen); }
.ib-orte { list-style: none; padding: 0; display: grid; gap: 1.2mm 5mm; font-size: 10pt; }
.ib-orte.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ib-orte li { padding-left: 4mm; position: relative; }
.ib-orte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 2mm; height: 2mm; border-radius: 50%; background: var(--gruen); }
.ib-orte small { color: var(--leise); font-size: 9pt; }
.ib-stand { font-size: 8.5pt; font-weight: 700; color: var(--petrol); background: var(--hell); padding: .2mm 1.8mm; border-radius: 99px; }

.ib-kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6mm; align-items: center; padding: 5mm 6mm; border-radius: 4mm; background: var(--gelb-hell); }
.ib-kontakt-text { display: grid; gap: 2.5mm; }
.ib-kontakt-text p { font-size: 10pt; }
.ib-kontakt-daten { display: grid; gap: 1.6mm; font-size: 9.8pt; }
.ib-kontakt-daten div { display: grid; grid-template-columns: 22mm minmax(0, 1fr); gap: 2mm; align-items: baseline; }
.ib-kontakt-daten dt { font-size: 8pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.ib-kontakt-daten dd { overflow-wrap: anywhere; }
.ib-gross { font-family: var(--titel); font-weight: 700; font-size: 15pt; color: var(--petrol-dunkel); }
.ib-gesetz { font-size: 8pt; color: var(--leise); }

/* Schmale Bildschirme: Blatt fließt, Spalten untereinander */
@media screen and (max-width: 860px) {
  body { font-size: 1rem; }
  .ib-blaetter { padding: 16px 12px 32px; gap: 16px; justify-content: stretch; }
  .blatt { width: auto; height: auto; padding: 20px 16px; gap: 22px; }
  .ib-kopf, .ib-fuss { flex-direction: column; align-items: flex-start; }
  .ib-erreichbar { justify-items: start; text-align: left; }
  .ib-drei, .ib-zwei, .ib-wege, .ib-gebiet, .ib-kontakt, .ib-orte.zweispaltig { grid-template-columns: 1fr; }
  .ib-titel h1, .ib-leistung h3 { text-wrap: balance; white-space: normal; }
  .ib-leiste-text { display: none; }
}

@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .ib-leiste { display: none; }
  .ib-blaetter { display: block; padding: 0; }
  .blatt { box-shadow: none; margin: 0; break-after: page; }
  .blatt:last-child { break-after: auto; }
}
body.fuer-pdf .ib-leiste { display: none; }