/* Druckvorlagen Werbung (druck/werbung.php): Plakate A3, Flyer A4. Masse in mm. */
:root { --navy: #0a1140; --tief: #060b2e; --blau: #1a2fd8; --hell: #2e4bff; --gold: #ffd23f; --grau: #667085; --kopf: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
* { box-sizing: border-box; }
body.w-body { margin: 0; background: #d9dde8; font-family: 'Inter', 'Segoe UI', sans-serif; color: var(--navy); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Leiste (nur am Bildschirm) */
.w-leiste {
    position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 1rem;
    background: var(--navy); color: #fff; font-size: .9rem;
}
.w-leiste strong { font-family: var(--kopf); font-size: 1.2rem; text-transform: uppercase; margin-right: .4rem; }
.w-leiste a { color: #fff; text-decoration: none; padding: .3rem .7rem; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.w-leiste a.aktiv { background: var(--gold); color: var(--navy); font-weight: 700; }
.w-leiste button { border: 0; border-radius: 6px; padding: .35rem 1rem; background: var(--hell); color: #fff; font-weight: 700; cursor: pointer; }
.w-leiste span { opacity: .7; font-size: .8rem; }

/* Seiten */
.w-seite { position: relative; overflow: hidden; margin: 10mm auto; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
.w-a3 { width: 297mm; height: 420mm; padding: 16mm; }
.w-a4 { width: 210mm; height: 297mm; padding: 12mm; background: #fff; }

/* QR-Code (hoch aufgeloest erzeugt, hier skaliert) */
.w-qr { background: #fff; padding: 3mm; border-radius: 3mm; line-height: 0; }
.w-qr img { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.w-qr canvas { display: none !important; }

/* Kopfleiste */
.w-kopf { display: flex; align-items: center; gap: 5mm; position: relative; z-index: 2; }
.w-wappen { width: 20mm; height: auto; filter: drop-shadow(0 1mm 2mm rgba(0, 0, 0, .3)); }
.w-kopf-text strong { display: block; font-family: var(--kopf); font-weight: 800; font-size: 22pt; text-transform: uppercase; line-height: 1; }
.w-kopf-text span { font-weight: 700; font-size: 13pt; color: var(--gold); }
.w-sponsor { margin-left: auto; background: #fff; border-radius: 3mm; padding: 2mm 4mm; }
.w-sponsor img { height: 16mm; display: block; }

.w-kicker { margin: 0; font-family: var(--kopf); font-weight: 800; font-size: 18pt; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.w-folgen { background: var(--gold); color: var(--navy); padding: 0 1.5mm; border-radius: 1mm; font-weight: 800; white-space: nowrap; }

/* Benachrichtigung */
.w-push {
    background: rgba(255, 255, 255, .94); color: #12141d; border-radius: 5mm; padding: 3mm 4mm; margin-bottom: 2.5mm;
    box-shadow: 0 2mm 5mm rgba(0, 0, 0, .25); font-size: 10pt; line-height: 1.3;
}
.w-push-kopf { display: flex; align-items: center; gap: 1.5mm; font-size: 7pt; letter-spacing: .04em; color: #555; margin-bottom: .8mm; }
.w-push-kopf img { width: 4mm; height: 4mm; }
.w-push-kopf em { margin-left: auto; font-style: normal; }
.w-push strong { display: block; font-size: 11pt; }
.w-push-gross { font-size: 17pt; padding: 6mm 8mm; border-radius: 8mm; position: relative; z-index: 2; }
.w-push-gross .w-push-kopf { font-size: 11pt; gap: 2.5mm; margin-bottom: 2mm; }
.w-push-gross .w-push-kopf img { width: 7mm; height: 7mm; }
.w-push-gross strong { font-size: 21pt; }

/* Fusszeile mit QR */
.w-fuss { margin-top: auto; display: flex; align-items: center; gap: 8mm; position: relative; z-index: 2; }
.w-fuss .w-qr { width: 70mm; border: 1.5mm solid var(--gold); }
.w-fuss strong { display: block; font-family: var(--kopf); font-weight: 800; font-size: 32pt; text-transform: uppercase; line-height: 1; }
.w-fuss span { display: block; margin-top: 2mm; font-size: 15pt; opacity: .85; }

/* ===== Plakat 1: App ===== */
.w-p1 {
    color: #fff;
    background:
        radial-gradient(160mm 120mm at 90% 45%, rgba(255, 210, 63, .18), transparent 60%),
        radial-gradient(200mm 160mm at 10% 5%, rgba(46, 75, 255, .5), transparent 60%),
        linear-gradient(165deg, var(--tief) 0%, var(--navy) 55%, #131f6e 100%);
}
.w-p1-titel { margin-top: 12mm; }
.w-p1 h1 { margin: 2mm 0 0; font-family: var(--kopf); font-weight: 800; font-size: 96pt; line-height: .86; text-transform: uppercase; }
.w-p1 h1 span { color: var(--gold); }
.w-p1-mitte { display: flex; gap: 10mm; align-items: center; margin-top: 10mm; }
.w-handy {
    flex: none; width: 118mm; height: 158mm; border-radius: 16mm; padding: 26mm 6mm 8mm; position: relative; transform: rotate(-3deg);
    background: radial-gradient(90mm 80mm at 30% 20%, rgba(46, 75, 255, .8), transparent 70%), linear-gradient(170deg, var(--blau), var(--navy) 75%);
    border: 4mm solid #03061a; box-shadow: 0 10mm 20mm rgba(0, 0, 0, .5);
}
.w-handy-kamera { position: absolute; top: 5mm; left: 50%; width: 32mm; height: 8mm; margin-left: -16mm; border-radius: 5mm; background: #03061a; }
.w-handy-uhr { text-align: center; font-family: var(--kopf); font-weight: 700; font-size: 48pt; line-height: 1; margin-bottom: 8mm; }
.w-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7mm; }
.w-schritte li { display: flex; gap: 5mm; align-items: flex-start; font-size: 14pt; color: rgba(255, 255, 255, .85); }
.w-schritte b {
    flex: none; width: 16mm; height: 16mm; border-radius: 50%; background: var(--gold); color: var(--navy);
    display: grid; place-items: center; font-family: var(--kopf); font-size: 26pt;
}
.w-schritte strong { display: block; color: #fff; font-family: var(--kopf); font-size: 26pt; text-transform: uppercase; line-height: 1.05; }

/* ===== Plakat 2: Erinnerung (gelb) ===== */
.w-p2 { background: var(--gold); color: var(--navy); }
.w-p2 .w-kopf-text span { color: var(--blau); }
.w-p2 .w-sponsor { box-shadow: 0 1mm 3mm rgba(0, 0, 0, .15); }
.w-p2 h1 { margin: 16mm 0 4mm; font-family: var(--kopf); font-weight: 800; font-size: 104pt; line-height: .86; text-transform: uppercase; }
.w-p2-antwort { margin: 0; font-size: 22pt; line-height: 1.3; max-width: 230mm; }
.w-uhrring {
    align-self: center; margin: 14mm 0 10mm; width: 150mm; height: 150mm; border-radius: 50%; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: conic-gradient(var(--navy) 0 60deg, rgba(10, 17, 64, .12) 60deg 360deg);
}
.w-uhrring::before { content: ''; position: absolute; inset: 11mm; border-radius: 50%; background: var(--gold); }
.w-uhrring-zahl { position: relative; font-family: var(--kopf); font-weight: 800; font-size: 150pt; line-height: .85; }
.w-uhrring-text { position: relative; font-family: var(--kopf); font-weight: 800; font-size: 22pt; text-transform: uppercase; text-align: center; line-height: 1; }
.w-p2 .w-push-gross { box-shadow: 0 3mm 8mm rgba(10, 17, 64, .25); }
.w-p2-unten { margin-top: auto; display: flex; align-items: center; gap: 10mm; }
.w-p2-unten p { margin: 0; font-size: 16pt; line-height: 1.5; flex: 1; }
.w-p2-unten .w-qr { width: 64mm; flex: none; border: 1.5mm solid var(--navy); }

/* ===== Plakat 3: Webseite (hell) ===== */
.w-p3 { background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%); color: var(--navy); }
.w-p3 .w-kopf { background: var(--navy); color: #fff; margin: -16mm -16mm 0; padding: 8mm 16mm; }
.w-p3 .w-kicker { margin-top: 12mm; color: var(--blau); }
.w-p3 h1 { margin: 2mm 0 0; font-family: var(--kopf); font-weight: 800; font-size: 84pt; line-height: .88; text-transform: uppercase; }
.w-p3 h1 span { color: var(--blau); }
.w-browser { margin-top: 10mm; border-radius: 5mm; overflow: hidden; border: 1mm solid #cfd5e6; box-shadow: 0 5mm 14mm rgba(10, 17, 64, .18); background: #fff; }
.w-browser-leiste { display: flex; align-items: center; gap: 2mm; padding: 3mm 5mm; background: #eef1f8; border-bottom: .5mm solid #cfd5e6; }
.w-browser-leiste i { width: 4mm; height: 4mm; border-radius: 50%; background: #cfd5e6; }
.w-browser-leiste span { margin-left: 4mm; flex: 1; background: #fff; border-radius: 3mm; padding: 1.5mm 4mm; font-size: 12pt; color: var(--grau); }
.w-browser-inhalt { padding: 6mm 8mm 8mm; }
.w-live { background: var(--navy); color: #fff; border-radius: 4mm; padding: 5mm 7mm; margin-bottom: 5mm; }
.w-live em { font-style: normal; font-weight: 800; color: #ff5b5b; font-size: 12pt; letter-spacing: .1em; }
.w-live div { display: flex; align-items: center; justify-content: space-between; gap: 5mm; margin-top: 2mm; font-size: 16pt; font-weight: 700; }
.w-live b { font-family: var(--kopf); font-size: 40pt; color: var(--gold); white-space: nowrap; }
.w-browser table { width: 100%; border-collapse: collapse; font-size: 14pt; }
.w-browser th { text-align: left; font-family: var(--kopf); font-size: 12pt; text-transform: uppercase; color: var(--grau); padding: 1.5mm 2mm; border-bottom: .6mm solid var(--blau); }
.w-browser td { padding: 2.2mm 2mm; border-bottom: .3mm solid #e3e7f1; }
.w-browser td:nth-child(n+3), .w-browser th:nth-child(n+3) { text-align: center; }
.w-browser td:last-child { font-weight: 800; color: var(--blau); }
.w-browser tr.w-erster td { background: #fff8db; }
.w-liste { list-style: none; margin: 8mm 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3mm; }
.w-liste li { background: var(--navy); color: #fff; border-radius: 99mm; padding: 2mm 6mm; font-weight: 700; font-size: 14pt; }
.w-liste li::before { content: '✓ '; color: var(--gold); }
.w-fuss-hell .w-qr { border-color: var(--blau); }
.w-fuss-hell strong { font-size: 26pt; text-transform: none; color: var(--blau); }
.w-naechste { margin-top: 6mm; }
.w-naechste strong { display: block; font-family: var(--kopf); font-size: 13pt; text-transform: uppercase; color: var(--grau); padding-bottom: 1.5mm; border-bottom: .6mm solid var(--blau); margin-bottom: 1mm; }
.w-naechste div { display: flex; align-items: center; gap: 4mm; padding: 2.2mm 2mm; border-bottom: .3mm solid #e3e7f1; font-size: 14pt; }
.w-naechste b { font-family: var(--kopf); font-size: 17pt; color: var(--navy); }
.w-naechste em { font-style: normal; font-size: 10pt; font-weight: 700; background: var(--gold); border-radius: 1.5mm; padding: .5mm 2mm; }
.w-fuss-hell span { color: var(--grau); opacity: 1; }

/* ===== Plakat 4: Tore ===== */
.w-p4 {
    color: #fff;
    background:
        radial-gradient(180mm 140mm at 50% 60%, rgba(46, 75, 255, .6), transparent 70%),
        linear-gradient(180deg, var(--blau) 0%, var(--navy) 60%, var(--tief) 100%);
}
.w-tor-bg {
    position: absolute; left: -10mm; right: -10mm; top: 150mm; text-align: center; font-family: var(--kopf); font-weight: 800;
    font-style: italic; font-size: 330pt; line-height: 1; color: transparent; -webkit-text-stroke: 1.2mm rgba(255, 210, 63, .22);
    transform: rotate(-8deg); z-index: 0;
}
.w-p4 h1 { position: relative; z-index: 1; margin: 18mm 0 4mm; font-family: var(--kopf); font-weight: 800; font-size: 112pt; line-height: .86; text-transform: uppercase; }
.w-p4 h1 span { color: var(--gold); }
.w-p4-text { position: relative; z-index: 1; margin: 0 0 auto; font-size: 22pt; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.w-p4 .w-push-gross { margin: 0 0 12mm; }
.w-zwei-qr { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; position: relative; z-index: 2; }
.w-zwei-qr > div { background: rgba(255, 255, 255, .08); border: .6mm solid rgba(255, 255, 255, .25); border-radius: 6mm; padding: 6mm; text-align: center; }
.w-zwei-qr .w-qr { width: 70mm; margin: 0 auto 4mm; border: 1.2mm solid var(--gold); }
.w-zwei-qr strong { display: block; font-family: var(--kopf); font-weight: 800; font-size: 28pt; text-transform: uppercase; line-height: 1; }
.w-zwei-qr span { font-size: 13pt; opacity: .8; }

/* ===== Flyer A4 ===== */
.w-flyer .w-kopf { background: var(--navy); color: #fff; border-radius: 4mm; padding: 5mm 7mm; }
.w-flyer .w-wappen { width: 16mm; }
.w-flyer .w-sponsor img { height: 11mm; }
.w-flyer h1 { font-family: var(--kopf); font-weight: 800; text-transform: uppercase; font-size: 58pt; line-height: .9; margin: 12mm 0 4mm; }
.w-flyer h1 span { color: var(--blau); }
.w-flyer-lead { font-size: 15pt; font-weight: 600; color: var(--blau); margin: 0 0 8mm; }
.w-kacheln { display: flex; gap: 5mm; margin-bottom: 10mm; }
.w-kacheln div { flex: 1; background: #eef1f8; border-radius: 4mm; padding: 5mm; font-size: 11pt; color: #444; border-top: 1.5mm solid var(--blau); }
.w-kacheln span { display: block; font-size: 22pt; margin-bottom: 2mm; }
.w-kacheln strong { display: block; font-family: var(--kopf); font-weight: 800; font-size: 15pt; text-transform: uppercase; color: var(--navy); }
.w-flyer-mitte { display: flex; gap: 10mm; align-items: center; flex: 1; }
.w-flyer-schritte { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 7mm; font-size: 16pt; line-height: 1.3; }
.w-flyer-schritte li { display: flex; align-items: flex-start; gap: 4mm; }
.w-flyer-schritte b {
    flex: none; display: grid; place-items: center; width: 12mm; height: 12mm; border-radius: 50%;
    background: var(--blau); color: #fff; font-family: var(--kopf); font-size: 18pt;
}
.w-flyer-schritte div { padding-top: 1.5mm; }
.w-flyer-schritte small { display: block; color: var(--grau); font-size: 11pt; }
.w-flyer-qr { text-align: center; border: 1.2mm solid var(--gold); border-radius: 5mm; padding: 5mm; width: 80mm; flex: none; }
.w-flyer-qr span { display: block; margin-top: 3mm; font-family: var(--kopf); font-weight: 800; font-size: 16pt; text-transform: uppercase; }
.w-flyer-url { flex: 1; }
.w-flyer-url > span { font-size: 13pt; color: var(--grau); }
.w-flyer-url strong { display: block; font-family: var(--kopf); font-weight: 800; font-size: 22pt; color: var(--blau); line-height: 1.1; margin: 1mm 0 4mm; }
.w-flyer-url p { margin: 0 0 4mm; font-size: 12pt; line-height: 1.45; color: #333; }
.w-flyer-app { background: #fff8db; border-left: 1.2mm solid var(--gold); padding: 3mm 4mm; border-radius: 2mm; }

/* ===== Druck ===== */
@media print {
    body.w-body { background: #fff; }
    .w-leiste { display: none; }
    .w-seite { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
    .w-seite:last-of-type { page-break-after: auto; break-after: auto; }
}

/* Adress-Teile ohne Umbruch (nur an den Punkten, siehe $urlUmbruch) */
.w-nb, .w-fuss .w-nb { display: inline; white-space: nowrap; margin: 0; font-size: inherit; opacity: 1; color: inherit; }