/* ==========================================================================
   PTS Pool & Teichservice — Druckfassung

   Wird NUR beim Drucken geladen (<link ... media="print"> in jeder Seite),
   nie auf dem Bildschirm. Deshalb genügt hier ein einfaches Stylesheet ohne
   @media-print-Klammer — jede Regel in dieser Datei gilt ausschließlich für
   den Ausdruck bzw. das Speichern als PDF über den Browser-Druckdialog.

   Diese Datei muss als LETZTES Stylesheet im <head> eingebunden werden,
   nach tokens/base/components/layout/calculator/pages.css — nur so gewinnen
   gleich starke Selektoren hier zuverlässig gegen die Bildschirm-Regeln.
   ========================================================================== */

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

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* --------------------------------------------------------------------------
   1. Farb-Tokens für den Druck

   Die dunkle Teich-Palette ist für helle Schrift auf dunklem Bildschirm-
   hintergrund gebaut. Ob der Hintergrund mitgedruckt wird, hängt von einer
   Browser-Einstellung ab ("Hintergrundgrafiken"), die standardmäßig meist
   AUS ist — dann wäre die helle Teich-Schrift auf weißem Papier praktisch
   unsichtbar. Deshalb gilt im Druck für BEIDE Modi dieselbe dunkle Schrift
   auf hellem Grund. Der Goldton bleibt als Wiedererkennung erhalten, nur
   abgedunkelt für ausreichenden Kontrast im Schwarz-Weiß-Druck; die
   Teich-Überschriften bleiben kursiv/serif (siehe tokens.css), sodass Pool-
   und Teich-Inhalte trotz gleicher Grundfarben unterscheidbar bleiben.
   -------------------------------------------------------------------------- */

:root,
[data-mode="pool"],
[data-mode="teich"] {
  --color-bg: #ffffff;
  --color-bg-alt: #f3f3f3;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #1a1a1a;
  --color-heading: #0b2530;
  --color-text-muted: #444444;
  --color-accent-contrast: #ffffff;
  --color-border: #cccccc;
  --color-border-strong: #999999;
  --color-success: #1f8a4c;
  --color-success-bg: #e4f5ea;
  --color-error: #c62828;
  --color-error-bg: #fceaea;
  --color-warning-bg: #fff6e0;
  --color-warning-text: #7a5b00;
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-badge-pool-bg: transparent;
  --color-badge-pool-text: #00688c;
  --color-badge-teich-bg: transparent;
  --color-badge-teich-text: #2f6b3d;
  --gradient-hero: none;
  --gradient-accent: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --container-max: 100%;
  --container-pad: 0px;
  --fs-900: 20pt;
  --fs-800: 16pt;
  --fs-700: 13pt;
  --fs-600: 11pt;
  --fs-500: 10pt;
  --fs-400: 9pt;
  --fs-300: 8pt;
  --fs-200: 7pt;
  --line-normal: 1.4;
  /* Kompaktere Abstands-Skala: die Bildschirm-Werte (bis zu 6rem/25mm) sind
     für Weißraum zwischen großen Bildschirm-Sections gedacht, auf Papier
     wirken sie aufgebläht. Da praktisch jeder Abstand im Projekt über diese
     Tokens läuft, genügt diese eine Umdefinition für den ganzen Ausdruck. */
  --space-1: 1mm;
  --space-2: 1.5mm;
  --space-3: 2mm;
  --space-4: 2.5mm;
  --space-5: 3.5mm;
  --space-6: 4.5mm;
  --space-7: 6mm;
  --space-8: 8mm;
  --space-9: 10mm;
}

[data-mode="pool"] {
  --color-accent: #006e93;
  --color-accent-bright: #006e93;
  --color-accent-strong: #00506d;
}

[data-mode="teich"] {
  --color-accent: #8a6a1a;
  --color-accent-bright: #8a6a1a;
  --color-accent-strong: #6e5414;
  --color-badge-teich-text: #6e5414;
}

body {
  background: #ffffff;
  color: var(--color-text);
  font-size: 9pt;
}

/* --------------------------------------------------------------------------
   2. Grundlayout: volle Papierbreite statt Bildschirm-Container/-Abstände
   -------------------------------------------------------------------------- */

.container,
.site-header__inner {
  max-width: 100%;
  padding-inline: 0;
}

.section {
  padding-block: 3mm;
}
.section--tight {
  padding-block: 2mm;
}

.section--alt {
  background: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   3. Kopf- und Fußzeile: Briefkopf statt Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: static;
  background: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding-bottom: 2.5mm;
  margin-bottom: 3mm;
}
.site-header__inner { padding-block: 0; }
.site-logo__mark { height: 34px; }

.skip-link,
.site-nav,
.site-header__actions {
  display: none;
}

.site-footer {
  border-top: 2px solid var(--color-border-strong);
  padding-block: 3mm 0;
  margin-top: 5mm;
}
.site-footer__grid { grid-template-columns: 1fr; gap: 2mm; }
.site-footer nav { display: none; }
.site-footer__bottom { margin-top: 3mm; padding-top: 2mm; }
.site-credit__wa { display: none; }

/* --------------------------------------------------------------------------
   4. Interaktive/JS-only Elemente ausblenden

   Diese Bauteile setzen zwingend Klicks bzw. eine laufende Skript-Sitzung
   voraus (Regler, Mehrschritt-Assistent, Formular-Versand) und haben auf
   Papier keinen Wert mehr — ihre Informationen stehen an anderer Stelle
   bereits als Text (Preisliste, Kontaktblock in der Sidebar/Fußzeile).
   -------------------------------------------------------------------------- */

.no-print,
[data-before-after],
.calc[data-calc-wizard],
#calc-summary,
.kontakt-form-col,
.hub-hero__actions,
.hero-split__deco,
.hero-split__cta {
  display: none;
}

.kontakt-layout { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   5. Print-only Inhalte

   .print-only ist auf dem Bildschirm ausgeblendet (siehe base.css) und wird
   ausschließlich hier sichtbar gemacht — für Inhalte, die nur im Ausdruck
   Sinn ergeben (Bild-Ersatz für CSS-Hintergründe, Preisrechner-Hinweis).
   -------------------------------------------------------------------------- */

.print-only { display: block; }

/* Startseite: Pool/Teich-Schalter zeigt auf dem Bildschirm immer nur EINEN
   Bereich (die anderen data-mode-content-Elemente sind über base.css mit
   !important ausgeblendet). Für die Startseite als vollständige Broschüre
   sollen im Druck aber BEIDE Bereiche nacheinander erscheinen — deshalb hier
   ebenfalls mit !important übersteuert, da nur so gegen die Bildschirm-Regel
   zu gewinnen ist. Betrifft ausschließlich die Leistungen-Karten auf der
   Startseite; /pool/ und /teich/ selbst nutzen dieses Attribut nicht. */
[data-mode-content] { display: revert !important; }
[data-mode-content].is-grid { display: grid !important; }
[data-mode-content].is-flex { display: flex !important; }
[data-mode-content].is-inline { display: inline !important; }

/* Die Leistungs-Kacheln der Startseite haben nur 3 Karten je Bereich — im
   2-spaltigen Kachel-Raster bleibt neben der dritten Karte eine große Lücke,
   das wirkt unfertig statt seriös. Für die Broschüre deshalb als schlanke
   Liste (Icon links, Text rechts, kein Kartenrahmen) wie die "Warum PTS"-
   Punkte weiter unten, statt als Kachel-Raster mit Leerraum. */
html [data-mode-content].grid-3.is-grid { display: block !important; }
[data-mode-content] .service-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
[data-mode-content] .service-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
[data-mode-content] .service-card__icon { margin-bottom: 0; }
.service-card__link { display: none; }

/* "Ein persönliches Wort" ist inhaltlich kurz (ein Bild, ein Zitat) und
   landet dadurch leicht allein mit viel Leerraum auf einem Blatt. Statt
   zu strecken: ein bewusst größeres, zentriertes Porträt-&-Zitat-Layout
   statt der schmalen Zwei-Spalten-Bildschirmansicht — füllt die Seite
   durch mehr Bild- und Schriftgröße, nicht durch leeren Abstand. */
.section--owner-quote .container { max-width: 120mm; text-align: center; }
.section--owner-quote .about-portrait {
  max-width: 90mm !important;
  margin-inline: auto;
}
.section--owner-quote .eyebrow { justify-content: center; }
.section--owner-quote h2 {
  font-size: var(--fs-800);
  margin-top: var(--space-6) !important;
}
.section--owner-quote p { text-align: center; }

/* FAQ-Karten auf der Startseite (kombinierte Broschüre): einfache, statische
   Frage/Antwort-Blöcke statt Akkordeon — es gibt hier kein JS, das etwas
   ein-/ausklappen könnte, und für den Druck muss ohnehin alles offen sein. */
.faq-print { display: grid; gap: var(--space-3); }
.faq-print-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  break-inside: avoid;
  page-break-inside: avoid;
}
.faq-print-item__q {
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.faq-print-item__a {
  color: var(--color-text-muted);
  font-size: var(--fs-300);
}

/* Vorher/Nachher: der Regler funktioniert auf Papier nicht, deshalb zeigt
   der Ausdruck beide Zustände nebeneinander als echte <img>-Elemente. Eine
   feste Höhe (statt height:auto) hält beide Bilder gleich groß, auch wenn
   die Originalfotos unterschiedliche Seitenverhältnisse haben. */
.before-after-print {
  display: flex;
  gap: 3.5mm;
  margin-bottom: var(--space-3);
  break-inside: avoid;
}
.before-after-print figure { flex: 1 1 0; margin: 0; }
.before-after-print img {
  width: 100%;
  height: 42mm;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}
.before-after-print figcaption {
  margin-top: 1.5mm;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-200);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hero-Split (Startseite): Foto, das auf dem Bildschirm als CSS-Hintergrund
   hinter dem Farbverlauf liegt, wird für den Druck als echtes Bild über dem
   Text gezeigt — Hintergrundgrafiken sind im Druck sonst unzuverlässig. */
.hero-split { grid-template-columns: 1fr; min-height: 0; }
.hero-split__panel {
  background: none;
  color: var(--color-text);
  min-height: 0;
  padding: 5mm 0;
  break-inside: avoid;
}
.hero-split__panel--pool,
.hero-split__panel--teich { color: var(--color-text); }
.hero-split__print-img {
  width: 100%;
  max-height: 45mm;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 2.5mm;
}

/* Große Bildschirm-Fotos (Hub-Hero, Porträts, Team-, Referenzbilder) laufen
   auf Papier in voller Breite sonst schnell über eine halbe Seite. */
.hub-hero__art,
.about-portrait,
.team-photo,
.reference-card__img {
  max-height: 55mm;
}

/* Preisrechner: der Mehrschritt-Assistent braucht Klicks, deshalb ersetzt
   dieser Hinweis ihn im Ausdruck — Zahlen entsprechen der Preisliste oben. */
.calc__print-note {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 3mm 4mm;
  font-size: var(--fs-300);
  color: var(--color-text-muted);
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   6. Buttons: als reinen Text statt als klickbare Fläche zeigen

   Ein gefüllter/Verlaufs-Hintergrund ist im Druck unzuverlässig — bliebe er
   aus, würde z. B. weiße Button-Schrift auf weißem Papier verschwinden.
   Buttons werden deshalb zu einfachem, unterstrichenem Text; wo sie reine
   Bedienelemente ohne eigenen Informationswert sind (s. Abschnitt 4), sind
   sie bereits vollständig ausgeblendet.
   -------------------------------------------------------------------------- */

.btn {
  display: inline;
  background: none;
  color: var(--color-heading);
  border: none;
  padding: 0;
  box-shadow: none;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn svg,
.accordion-item__icon {
  display: none;
}

/* Schritt-Nummern (1–4, "So arbeiten wir"): statt Verlaufsfüllung ein
   Kreisrahmen mit dunkler Zahl, damit die Ziffer ohne Hintergrunddruck
   sichtbar bleibt. Zusammen mit den Icon-Kreisen kleiner skaliert, damit
   sie neben der verkleinerten Schrift nicht überdimensioniert wirken. */
.process-steps__num {
  width: 28px;
  height: 28px;
  background: none;
  border: 1.5px solid var(--color-heading);
  color: var(--color-heading);
}
.service-card__icon,
.trust-bullets__icon {
  width: 30px;
  height: 30px;
}
.service-card__icon svg,
.trust-bullets__icon svg {
  width: 17px;
  height: 17px;
}

.badge { border: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   7. FAQ-Akkordeon: im Ausdruck immer vollständig geöffnet

   js/faq-accordion.js setzt max-height per Inline-Style auf dem Panel —
   das lässt sich nur mit !important zuverlässig überschreiben (kein anderer
   Weg, ein per Skript gesetztes Inline-Style zu übersteuern). Ohne Öffnen
   wären die Antworten auf Papier unsichtbar.
   -------------------------------------------------------------------------- */

.accordion-item__panel {
  max-height: none !important;
  overflow: visible !important;
}
.accordion-item__trigger { cursor: default; }

/* --------------------------------------------------------------------------
   8. Hinweis-Banner (Impressum/Datenschutz): Rahmen statt Hintergrundfarbe
   -------------------------------------------------------------------------- */

.banner-notice {
  background: none;
  border: 1.5px solid var(--color-warning-text);
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   9. Externe Links: Ziel-URL sichtbar mitdrucken (klicken geht auf Papier
   nicht mehr). Interne Anker (#...) und bereits ausgeblendete Elemente
   (z. B. der WhatsApp-Knopf) sind ausgenommen.
   -------------------------------------------------------------------------- */

a[target="_blank"]:not(.site-credit__wa)::after {
  content: " (" attr(href) ")";
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-muted);
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   10. Raster: für die schmalere Papierbreite reduzierte Spaltenzahl statt
   der Bildschirm-Breakpoints (die bei A4-Breite oft nicht greifen)
   -------------------------------------------------------------------------- */

.grid-2,
.hub-hero__grid,
.em-explainer {
  grid-template-columns: 1fr;
  gap: 2.5mm;
}
.grid-3,
.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 3mm;
}
.trust-bullets,
.process-steps,
.consequence-grid {
  grid-template-columns: 1fr;
  gap: 1.5mm;
}
.stat-row { grid-template-columns: repeat(2, 1fr); }
.reference-grid { grid-template-columns: 1fr; gap: 3.5mm; }

/* --------------------------------------------------------------------------
   11. Seitenumbrüche: einzelne Bausteine nie mitten durchtrennen

   page-break-* steht überall zusätzlich zu break-* daneben — ältere
   Safari-/Firefox-Versionen kennen nur die alte Schreibweise.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  break-after: avoid;
  break-inside: avoid;
  page-break-after: avoid;
  page-break-inside: avoid;
}
p, li {
  orphans: 3;
  widows: 3;
}
img {
  break-inside: avoid;
  page-break-inside: avoid;
}

.card,
.reference-card,
.review-card,
.consequence-card,
.rate-card__item,
.accordion-item,
.trust-bullets li,
.process-steps li,
.pull-quote,
.em-explainer,
.about-portrait,
.team-photo,
.hub-hero__art {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Jede Kategorie (Leistungen, So arbeiten wir, Vorher/Nachher, FAQ, …) ist
   ein eigener <section> im Markup — genau diese Grenze soll auch beim Druck
   die Seite bestimmen: eine Kategorie wird nie mitten durchtrennt. Passen
   zwei kurze Kategorien auf ein Blatt, rutschen sie ganz automatisch
   zusammen darauf; passt eine einzelne nicht mehr auf den Rest der Seite,
   beginnt sie komplett auf der nächsten. Bei den Seiten mit nur einer
   einzigen, langen Sektion (Impressum, Datenschutz, Referenzen) hat die
   Regel keine Wirkung, da diese ohnehin nicht auf ein Blatt passt — dort
   sorgen die Regeln oben (z. B. .reference-card) für saubere Umbrüche. */
main > section {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Die Fußzeile ist kurz genug, um komplett auf eine Seite zu passen — sie
   soll deshalb nicht mit 2–3 Zeilen auf ein fast leeres letztes Blatt
   rutschen, sondern immer als Ganzes stehen. */
.site-footer {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* --------------------------------------------------------------------------
   12. Die Fußzeile landet erfahrungsgemäß am ehesten allein auf einem Blatt
   (die Kategorie davor füllt die Vorseite meist schon). Ob das tatsächlich
   passiert, hängt vom gesamten Seitenumbruch ab und lässt sich in CSS nicht
   im Voraus erkennen (kein "steht allein auf der Seite"-Selektor).

   Fünf, sechs Zeilen Kontaktangaben lassen sich nicht auf eine ganze Seite
   strecken, ohne albern zu wirken — mehr Weißraum drumherum macht sie nicht
   größer, nur einsamer. Deshalb statt Strecken: eine bewusst großzügigere,
   zentrierte "Umschlagseiten"-Gestaltung wie bei einer Broschüren-Rückseite
   — großes Logo, Firmenname als Überschrift, Kontaktblock zentriert darunter
   — die auch dann gut aussieht, wenn sie allein auf dem letzten Blatt steht.
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 16mm 0;
}
.site-footer__grid {
  grid-template-columns: 1fr;
  max-width: 110mm;
  margin-inline: auto;
  text-align: center;
  gap: 6mm;
}
.site-footer .site-logo--footer {
  flex-direction: column;
  align-items: center;
  gap: 3mm;
}
.site-footer .site-logo__mark { height: 72px; }
.site-footer .site-logo--footer .site-logo__text { font-size: var(--fs-700); }
.site-footer__brand p { font-size: var(--fs-400); }
.site-footer__contact address { font-size: var(--fs-400); }