/* Print / PDF layout for the Beispielreise pages. nicepage.css and pages.css load with media="screen", so this file owns the entire print presentation. Used to pre-generate the two downloadable PDFs (headless Edge --print-to-pdf): - uganda-beispielreise.pdf German edition (page as-is) - uganda-beispielreise-en.pdf English edition (temp copy carrying class="u-lang-en" on — the swap rules at the end of this file) Layout: title page (hero, intro, route map), then the days, then a closing page (callout, CTA, contact line). */ @page { size: A4; margin: 14mm 13mm; } header, footer, nav, .u-pdf-row, .u-page-nav-links { display: none !important; } body { margin: 0; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 10.5pt; line-height: 1.6; color: #222222; } .u-sheet { max-width: none; margin: 0; padding: 0; } /* ---------- title page: hero + intro + route map ---------- */ .u-page-hero { background: none !important; min-height: 0; } .u-page-hero:before { display: none; } .u-page-hero h1 { color: #023b10; font-size: 22pt; line-height: 1.15; margin: 0 0 2mm; } .u-page-hero .u-hero-en { display: block; font-size: 12pt; font-weight: 400; color: #666666; margin-top: 1mm; } .u-page-hero .u-hero-note { color: #666666; font-size: 9.5pt; margin: 2mm 0 0; } .u-page-body { padding: 6mm 0 0; } .u-page-intro { font-size: 10.5pt; color: #333333; border-left: 2pt solid #023b10; padding-left: 5mm; margin: 0 0 8mm; } /* the route map becomes the title-page figure */ .u-trip-map { display: block; margin: 10mm auto 0; text-align: center; break-inside: avoid; page-break-inside: avoid; } .u-trip-map svg { width: 92mm; height: auto; } .u-map-chip { display: none; } .u-map-note { display: block; font-size: 8.5pt; color: #888888; font-style: italic; text-align: center; margin: 1mm 0 0; } .u-map-country { fill: #f4f2ee; stroke: #9a9a9a; stroke-width: 1.2; stroke-linejoin: round; } .u-map-route { fill: none; stroke: #023b10; stroke-width: 2.5; stroke-dasharray: 4 5; stroke-linecap: round; } .u-map-route-done { display: none; /* progress state is meaningless on paper */ } .u-map-stop { fill: #023b10; stroke: #ffffff; stroke-width: 2; } /* days start on a fresh page after the title page */ .u-trip-days { break-before: page; page-break-before: always; } /* ---------- day blocks ---------- */ .u-day { border-left: 1.5pt solid #023b10; padding: 1mm 0 1mm 5mm; margin: 0 0 6mm; break-inside: avoid; page-break-inside: avoid; } .u-day h3 { font-size: 12.5pt; color: #023b10; margin: 0 0 1mm; } .u-day .u-day-en { display: block; font-size: 9pt; font-weight: 400; color: #888888; } .u-day p { margin: 2mm 0; } /* stage row: ~KM | Fahrtzeit | Basis, as in the printed itineraries */ .u-stage { display: flex; flex-wrap: wrap; gap: 1mm 7mm; margin: 1.5mm 0 0; padding: 1.5mm 0; border-top: 0.5pt solid #cccccc; border-bottom: 0.5pt solid #cccccc; font-size: 9.5pt; color: #333333; } .u-stage-cell { display: inline-flex; align-items: baseline; gap: 2mm; } .u-stage-label { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.5pt; text-transform: uppercase; color: #888888; } .u-stage-key { font-size: 8.5pt; color: #888888; font-style: italic; margin: 0 0 5mm; } /* one-liners: only the edition's language (lang.css is screen-only) */ .u-stage span[lang="en"], .u-stage-key span[lang="en"], .u-closing span[lang="en"] { display: none; } .u-closing { text-align: center; font-family: "Caveat", cursive; font-size: 18pt; color: #023b10; margin: 6mm 0 0; break-inside: avoid; page-break-inside: avoid; } .u-en-block { color: #777777; font-size: 9pt; border-left: 1pt solid #cccccc; padding-left: 4mm; line-height: 1.5; } .u-page-figure { break-inside: avoid; page-break-inside: avoid; margin: 6mm auto; max-width: 78%; } .u-page-figure img { width: 100%; height: auto; } .u-page-figure figcaption { font-size: 8.5pt; color: #888888; font-style: italic; margin-top: 2mm; } .u-day-pair { display: block; } .u-figure-portrait, .u-day-pair .u-figure-side { max-width: 60mm; } /* ---------- closing page: callout + CTA + contact ---------- */ .u-callout { break-before: page; page-break-before: always; border: 1pt solid #cccccc; border-radius: 3mm; padding: 5mm 6mm; margin: 0 0 8mm; break-inside: avoid; page-break-inside: avoid; } .u-callout h3 { font-size: 11.5pt; color: #023b10; margin: 4mm 0 1mm; } .u-callout h3:first-child { margin-top: 0; } .u-callout h3 .u-topic-en { display: block; font-size: 9pt; color: #888888; font-weight: 400; } .u-callout ul { margin: 2mm 0; padding-left: 6mm; } .u-callout ul[lang="en"] { display: none; } .u-page-cta { text-align: center; margin: 10mm 0 0; break-inside: avoid; page-break-inside: avoid; } .u-page-cta .u-email-btn { display: none; } .u-print-contact { display: block; font-weight: 700; color: #023b10; font-size: 11pt; margin: 3mm 0 0; } a { color: #222222; text-decoration: none; } /* ========================================================================== English edition — the pre-generated EN PDF renders from a copy whose carries class="u-lang-en". Languages trade places exactly. ========================================================================== */ html.u-lang-en .u-page-hero h1 { display: flex; flex-direction: column-reverse; } html.u-lang-en .u-page-hero .u-hero-en { font-size: 22pt; font-weight: 700; color: #023b10; margin: 0; } html.u-lang-en .u-page-hero h1 > span[lang="de"] { display: block; font-size: 12pt; font-weight: 400; color: #666666; margin-top: 1mm; } html.u-lang-en .u-hero-note span[lang="de"] { display: none; } html.u-lang-en .u-page-intro { display: flex; flex-direction: column-reverse; row-gap: 4mm; } html.u-lang-en .u-page-intro br { display: none; } html.u-lang-en .u-day { display: flex; flex-direction: column; } html.u-lang-en .u-day > h3 { order: -3; display: flex; flex-direction: column-reverse; } html.u-lang-en .u-day > .u-stage { order: -2; } html.u-lang-en .u-stage span[lang="de"], html.u-lang-en .u-stage-key span[lang="de"], html.u-lang-en .u-closing span[lang="de"] { display: none; } html.u-lang-en .u-stage span[lang="en"], html.u-lang-en .u-stage-key span[lang="en"], html.u-lang-en .u-closing span[lang="en"] { display: inline; } html.u-lang-en .u-day h3 .u-day-en { font-size: 12.5pt; font-weight: 700; color: #023b10; } html.u-lang-en .u-day h3 > span[lang="de"] { display: block; font-size: 9pt; font-weight: 400; color: #888888; } html.u-lang-en .u-day > .u-en-block { order: -1; font-size: 10.5pt; color: #222222; border-left: 0; padding-left: 0; line-height: 1.6; } html.u-lang-en .u-day > p:not(.u-en-block) { font-size: 9pt; color: #777777; border-left: 1pt solid #cccccc; padding-left: 4mm; line-height: 1.5; } html.u-lang-en .u-page-figure figcaption span[lang="de"] { display: none; } html.u-lang-en .u-map-note span[lang="de"] { display: none; } html.u-lang-en .u-callout h3 { display: flex; flex-direction: column-reverse; } html.u-lang-en .u-callout h3 .u-topic-en { font-size: 11.5pt; font-weight: 700; color: #023b10; } html.u-lang-en .u-callout h3 > span[lang="de"] { display: block; font-size: 9pt; font-weight: 400; color: #888888; } html.u-lang-en .u-callout ul[lang="de"] { display: none; } html.u-lang-en .u-callout ul[lang="en"] { display: block; } html.u-lang-en .u-page-cta p:has(> span[lang="en"]) { display: flex; flex-direction: column-reverse; row-gap: 3mm; } html.u-lang-en .u-page-cta p:has(> span[lang="en"]) br { display: none; }