/* Ratgeber-Timeline – erzeugt mit baue.py --live, nicht von Hand aendern */ @font-face { font-family: "Pixelify Sans"; font-weight: 400 700; font-display: swap; src: url("schrift/pixelify-sans.woff2") format("woff2"); } /* * Ratgeber-Timeline „Dein Dienstweg" * Nutzt die ps-Token aus style.css (Farben, Schriften). Neu ist nur die * Pixelschriften: Silkscreen fuer Schilder und Ueberschriften, Pixelify Sans * (mehr Pixel je Buchstabe) fuer alles Kleine, damit es lesbar bleibt. * Alles haengt unter #ptl, damit nichts ins Theme ausblutet. */ #ptl { --ptl-navy: var(--ps-navy, #0f1520); --ptl-navy-2: var(--ps-navy-soft, #182231); --ptl-blau: var(--ps-blue, #105682); --ptl-blau-hell: var(--ps-blue-light, #2380b8); --ptl-blau-hover: var(--ps-farbe-aktion-hover, #0B4466); /* 29.09.2026: Hover mit weisser Schrift, Kontrast 5,09 (blau-hell hatte 4,33) */ --ptl-oliv: var(--ps-green, #4a5240); --ptl-salbei: var(--ps-green-light, #9caf88); --ptl-sand: var(--ps-sand-300, #E2D6BA); --ptl-sand-dunkel: var(--ps-sand-500, #C6B48C); --ptl-gold: var(--ps-messing-licht, #DCD3A0); /* nur fuer Metall (Gold-Abzeichen); Seiten-CI hat KEIN Gold */ --ptl-akzent: var(--ps-green-light, #9caf88); /* Tarngruen: Akzent auf dunklem Grund */ --ptl-akzent-dunkel: var(--ps-bronze-500, #56694A); --ptl-creme: var(--ps-sand-100, #F3EEE2); --ptl-text: var(--ps-text, #30394a); --ptl-grau: var(--ps-muted, #667188); --ptl-rand: var(--ps-border, rgba(30, 39, 72, 0.14)); --ptl-kopf: var(--ps-font-head); --ptl-fliess: var(--ps-font-body); --ptl-pixel: var(--ps-font-pixel-kopf, "Pixelify Sans", "Courier New", monospace); --ptl-fein: var(--ps-font-pixel, "Pixelify Sans", "Courier New", monospace); /* feinere Pixelschrift fuer kleine Texte */ --ptl-px: 4px; /* ein Sprite-Pixel */ --ptl-rinne: 64px; /* Seitenrinne, in der der Weg nach unten laeuft */ color: var(--ptl-text); font-family: var(--ptl-fliess); background: var(--ptl-creme); overflow-x: clip; } #ptl *, #ptl *::before, #ptl *::after { box-sizing: border-box; } #ptl [hidden] { display: none !important; } #ptl img { max-width: 100%; } #ptl a { color: inherit; } /* Pixelkante: harter Stufenrahmen statt Radius */ #ptl .ptl-pixelrand { box-shadow: 0 calc(var(--ptl-px) * -1) 0 0 var(--ptl-navy), 0 var(--ptl-px) 0 0 var(--ptl-navy), calc(var(--ptl-px) * -1) 0 0 0 var(--ptl-navy), var(--ptl-px) 0 0 0 var(--ptl-navy), 0 calc(var(--ptl-px) * 2) 0 0 rgba(15, 21, 32, .25); } /* ------------------------------------------------------------------ */ /* Kopf — im Stil der Startseite: Tarnmuster, Rajdhani 800, Pillen */ /* Bewusst flach, damit Station 1 schon beim Laden im Bild ist. */ /* ------------------------------------------------------------------ */ #ptl .ptl-kopf { position: relative; padding: 26px 0 26px; background: linear-gradient(90deg, rgba(35, 43, 31, .97) 0%, rgba(35, 43, 31, .9) 42%, rgba(35, 43, 31, .62) 72%, rgba(35, 43, 31, .38) 100%), var(--ptl-tarn, none) 70% 50% / cover no-repeat, #232b1f; color: #fff; } #ptl .ptl-wrap { width: min(1180px, 100% - 2 * var(--ptl-rinne)); margin-inline: auto; } #ptl .ptl-kopf__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 28px 48px; align-items: start; } #ptl .ptl-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--ptl-kopf); font-size: 12px; font-weight: 800; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; color: var(--ptl-salbei); margin-bottom: 8px; } #ptl .ptl-kicker::before { content: ""; width: 22px; height: 3px; border-radius: var(--ps-radius-voll, 4px); background: var(--ptl-salbei); } #ptl .ptl-kopf h1 { margin: 0; font-family: var(--ptl-kopf); font-weight: 800; font-size: clamp(30px, 3.1vw, 44px); line-height: .98; letter-spacing: -.045em; color: #fff; } #ptl .ptl-kopf h1 em { font-family: inherit; font-weight: inherit; font-style: normal; letter-spacing: inherit; color: var(--ptl-salbei); } /* Theme setzt em in Serifen */ #ptl .ptl-kopf__lead { max-width: 620px; margin: 8px 0 14px; font-size: 16px; line-height: 1.55; color: #d9e0d2; } /* Feedback All-Hands 28.09. (B6): Angehoerige ansprechen, ohne Umschalter. Nur in der Kickerzeile: jede Zusatzzeile schiebt die Figur aus dem Erstbild (1366 x 768 hat 9 px Luft, 375 x 667 hat 4 px). Handy: Kurzfassung. */ #ptl .ptl-kicker__kurz { display: none; } /* Suche: Pille wie die Buttons der Seite */ #ptl .ptl-suche { position: relative; max-width: 600px; } #ptl .ptl-suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ptl .ptl-suche__feld { display: flex; align-items: center; padding: 5px; gap: 6px; background: #fff; border-radius: var(--ps-radius-voll, 4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); } #ptl .ptl-suche input { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 18px; border: 0; outline: 0; background: transparent; color: var(--ptl-navy); font: 500 16px/1 var(--ptl-fliess); } #ptl .ptl-suche input::placeholder { color: #7c8797; } #ptl .ptl-suche__feld:focus-within { box-shadow: 0 0 0 3px var(--ptl-salbei), 0 14px 32px rgba(0, 0, 0, .22); } #ptl .ptl-suche button { height: 44px; padding: 0 22px; border: 0; border-radius: var(--ps-radius-voll, 4px); cursor: pointer; background: var(--ptl-blau); color: #fff; font: 700 15px/1 var(--ptl-kopf); letter-spacing: .01em; transition: background .2s ease; } #ptl .ptl-suche button:hover { background: var(--ptl-blau-hover); } #ptl .ptl-suche button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #ptl .ptl-suche__treffer { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; background: #fff; color: var(--ptl-text); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); max-height: min(60vh, 440px); overflow: auto; } #ptl .ptl-suche__treffer li { margin: 0; } #ptl .ptl-suche__treffer a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; } #ptl .ptl-suche__treffer a[aria-selected="true"], #ptl .ptl-suche__treffer a:hover { background: #eef3f8; } #ptl .ptl-suche__treffer b { display: block; font: 600 15px/1.35 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-suche__treffer small { font: 700 11px/1.2 var(--ptl-kopf); letter-spacing: .08em; color: var(--ptl-grau); text-transform: uppercase; } #ptl .ptl-suche__treffer mark { background: #e4edd9; color: inherit; padding: 0 1px; } #ptl .ptl-suche__leer { padding: 14px 12px; font-size: 15px; color: var(--ptl-grau); } /* Stationsleiste rechts, auf Hoehe der Ueberschrift */ #ptl .ptl-karte { padding: 16px 16px 14px; border-radius: 18px; background: rgba(15, 21, 32, .42); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #ptl .ptl-karte__titel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 11.5px/1.2 var(--ptl-kopf); letter-spacing: .15em; text-transform: uppercase; color: var(--ptl-salbei); } #ptl .ptl-karte__titel::before { content: ""; width: 22px; height: 3px; border-radius: var(--ps-radius-voll, 4px); background: var(--ptl-salbei); } #ptl .ptl-karte ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } #ptl .ptl-karte li { margin: 0; } #ptl .ptl-karte a { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; height: 100%; padding: 9px 10px; border-radius: 12px; text-decoration: none; background: rgba(255, 255, 255, .07); color: #fff; transition: background .2s ease, transform .2s ease; } #ptl .ptl-karte a:hover, #ptl .ptl-karte a:focus-visible { background: rgba(156, 175, 136, .24); transform: translateY(-2px); outline: 0; } #ptl .ptl-karte a span { font: 800 20px/1 var(--ptl-kopf); color: var(--ptl-salbei); } #ptl .ptl-karte a small { font: 600 11px/1.25 var(--ptl-fliess); color: #d9e0d2; hyphens: auto; -webkit-hyphens: auto; } #ptl .ptl-karte a.ist-erreicht span::after { content: " ✓"; font-size: 13px; color: #fff; } /* ------------------------------------------------------------------ */ /* Weg */ /* ------------------------------------------------------------------ */ #ptl .ptl-weg { position: relative; padding: 24px 0 40px; } #ptl .ptl-spur { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; } #ptl .ptl-spur path { fill: none; stroke-linecap: square; stroke-linejoin: round; } #ptl .ptl-spur .ptl-spur__grund { stroke: rgba(15, 21, 32, .16); stroke-width: 6; stroke-dasharray: 4 10; } #ptl .ptl-spur .ptl-spur__gegangen { stroke: var(--ptl-blau-hell); stroke-width: 6; stroke-dasharray: 8 8; } #ptl .ptl-figur, #ptl .ptl-hund, #ptl .ptl-begleiter { position: absolute; left: 0; top: 0; z-index: 6; image-rendering: pixelated; pointer-events: none; will-change: transform; } #ptl .ptl-figur { cursor: pointer; pointer-events: auto; } #ptl .ptl-schatten { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; width: calc(var(--ptl-px) * 12); height: calc(var(--ptl-px) * 2); background: rgba(15, 21, 32, .28); border-radius: 50%; will-change: transform; } #ptl .ptl-blase { position: absolute; left: 0; top: 0; z-index: 7; max-width: 240px; padding: 10px 12px; background: #fff; color: var(--ptl-navy); font-family: var(--ptl-fein); font-size: 15px; font-weight: 500; line-height: 1.3; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s steps(3), transform .18s steps(3); } #ptl .ptl-blase::after { content: ""; position: absolute; left: 22px; bottom: -12px; width: 12px; height: 12px; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); } #ptl .ptl-blase.ist-sichtbar { opacity: 1; transform: none; } /* ------------------------------------------------------------------ */ /* Station */ /* ------------------------------------------------------------------ */ #ptl .ptl-station { position: relative; padding: 0 0 120px; } #ptl .ptl-station:last-of-type { padding-bottom: 40px; } #ptl .ptl-station__kopf { position: absolute; z-index: 3; left: 16px; top: 16px; display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: center; max-width: calc(100% - 32px); padding: 10px 18px 10px 10px; background: rgba(15, 21, 32, .86); color: #fff; } #ptl .ptl-schild { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; background: #e7ebf1; color: var(--ptl-navy); font-family: var(--ptl-pixel); font-size: 26px; line-height: 1; transition: background .2s steps(2), color .2s steps(2); } #ptl .ptl-station.ist-erreicht .ptl-schild { background: var(--ptl-salbei); } #ptl .ptl-station__zeit { margin: 0; font-family: var(--ptl-fein); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ptl-akzent); } #ptl .ptl-station h2 { margin: 0; font-family: var(--ptl-kopf); font-weight: 800; letter-spacing: -.02em; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.02; color: #fff; } #ptl .ptl-station__lead { margin: 0 0 26px; max-width: 760px; font-size: 18px; line-height: 1.55; color: var(--ptl-text); } /* Start-Knopf auf Station 1 („Press Start") */ #ptl .ptl-start { position: absolute; z-index: 4; left: 50%; top: 46%; display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px 18px; border: 0; cursor: pointer; overflow: hidden; background: var(--ptl-blau); color: #fff; font-family: var(--ptl-pixel); font-size: 17px; font-weight: 700; text-transform: uppercase; transform: translate(-50%, -50%); transition: opacity .3s steps(3), transform .15s steps(2); } #ptl .ptl-start:hover { transform: translate(-50%, calc(-50% - 3px)); background: var(--ptl-blau-hover); } #ptl .ptl-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } #ptl .ptl-start i { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; animation: ptl-blinken 1s steps(2) infinite; } @keyframes ptl-blinken { 50% { opacity: 0; } } #ptl .ptl-start small { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--ptl-akzent); } #ptl .ptl-start.laedt small { width: 100%; transition: width var(--ptl-warten, 4.5s) linear; } #ptl .ptl-start.ist-weg { opacity: 0; pointer-events: none; } /* Buehne mit Szene */ #ptl .ptl-buehne { position: relative; margin: 0 0 24px; width: 100%; aspect-ratio: 12 / 5; max-height: 46vh; min-height: 280px; background: var(--ptl-navy-2); overflow: hidden; } #ptl .ptl-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; image-rendering: pixelated; } #ptl .ptl-buehne__abzeichen { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(15, 21, 32, .78); color: #fff; font-family: var(--ptl-fein); font-size: 13px; font-weight: 500; text-transform: uppercase; transform: translateY(-6px); opacity: 0; transition: opacity .3s steps(3), transform .3s steps(3); } /* D-03 (03.10.2026): das Abzeichen an der Bühne zeigt sich erst, wenn es verdient ist, nicht beim Ankommen */ #ptl .ptl-station.ist-verdient .ptl-buehne__abzeichen { opacity: 1; transform: none; } #ptl .ptl-flagge { position: absolute; z-index: 3; bottom: 0; width: 28px; height: 88px; pointer-events: none; } #ptl .ptl-flagge::before { /* Mast */ content: ""; position: absolute; left: 0; bottom: 0; width: 4px; height: 88px; background: #e7e1d2; box-shadow: 4px 0 0 #b9b19d; } #ptl .ptl-flagge::after { /* Tuch */ content: ""; position: absolute; left: 8px; bottom: 8px; width: 20px; height: 14px; background: var(--ptl-grau); clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%); transition: bottom .6s steps(8), background .2s steps(2); } #ptl .ptl-station.ist-erreicht .ptl-flagge::after { bottom: 70px; background: var(--ptl-akzent); } /* Inhalt der Station */ #ptl .ptl-inhalt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; } #ptl .ptl-merk { position: relative; align-self: start; display: flex; flex-direction: column; padding: 26px 26px 22px; background: var(--ptl-navy); color: #e8eef5; } /* Kleine Szene: der Soldat tut, was zur Station passt, und steht auf der Trennlinie zum Aufruf */ #ptl .ptl-merk__szene { display: flex; justify-content: flex-end; margin: 18px 0 -2px; } #ptl .ptl-merk__szene canvas { display: block; width: calc(40 * var(--ptl-px)); height: calc(25 * var(--ptl-px)); image-rendering: pixelated; } #ptl:not(.ist-js) .ptl-merk__szene { display: none; } #ptl .ptl-merk h3, #ptl .ptl-links h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--ptl-pixel); font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } #ptl .ptl-merk h3 { color: var(--ptl-akzent); } #ptl .ptl-links h3 { color: var(--ptl-blau); } #ptl .ptl-merk ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } #ptl .ptl-merk li { position: relative; margin: 0; padding-left: 24px; font-size: 15.5px; line-height: 1.55; } #ptl .ptl-merk li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--ptl-akzent); box-shadow: 2px 2px 0 #4a5240; } #ptl .ptl-norm { display: inline-block; margin-left: 4px; padding: 1px 6px; font-family: var(--ptl-fein); font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; color: var(--ptl-navy); background: var(--ptl-salbei); } #ptl .ptl-merk__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding-top: 18px; border-top: 2px dashed rgba(255, 255, 255, .22); font-size: 16px; line-height: 1.45; font-weight: 600; color: #e8eef5; } #ptl .ptl-merk__cta span { flex: 1 1 100%; } #ptl .ptl-merk__cta a i { width: 0; height: 0; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; animation: ptl-blinken 1s steps(2) infinite; } #ptl .ptl-merk__cta a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--ptl-blau-hell); color: #fff; text-decoration: none; font-family: var(--ptl-fein); font-size: 15px; font-weight: 600; text-transform: uppercase; box-shadow: inset 0 -3px 0 #145c89; } #ptl .ptl-merk__cta a:hover, #ptl .ptl-merk__cta a:focus-visible { background: #2b90cc; outline: 2px solid #fff; outline-offset: 2px; } #ptl .ptl-links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } #ptl .ptl-links li { margin: 0; } #ptl .ptl-kachel { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; min-height: 72px; background: #fff; text-decoration: none; border: 2px solid var(--ptl-rand); transition: transform .12s steps(2), border-color .12s steps(2), box-shadow .12s steps(2); } #ptl a.ptl-kachel:hover, #ptl a.ptl-kachel:focus-visible { transform: translate(-2px, -2px); border-color: var(--ptl-navy); box-shadow: 4px 4px 0 var(--ptl-navy); outline: 0; } #ptl .ptl-kachel__icon { width: 44px; height: 44px; image-rendering: pixelated; } #ptl .ptl-kachel b { display: block; font: 600 16px/1.35 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-kachel small { display: block; margin-top: 4px; font-family: var(--ptl-fein); font-size: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ptl-grau); } #ptl .ptl-kachel__pfeil { font-family: var(--ptl-pixel); font-size: 16px; color: var(--ptl-blau); } #ptl .ptl-kachel.ist-gelesen .ptl-kachel__pfeil { color: var(--ptl-akzent-dunkel); } #ptl .ptl-kachel.ist-gelesen .ptl-kachel__pfeil::before { content: "★ "; } #ptl .ptl-kachel--bald { background: transparent; border-style: dashed; color: var(--ptl-grau); } #ptl .ptl-kachel--bald b { color: #56627a; font-weight: 500; } /* Einblenden beim Erreichen (Inhalt steht trotzdem im DOM) */ #ptl.ist-js .ptl-einblenden { opacity: 0; transform: translateY(16px); transition: opacity .45s steps(5), transform .45s steps(5); } #ptl.ist-js .ptl-einblenden.ist-da { opacity: 1; transform: none; } /* ------------------------------------------------------------------ */ /* Ziel + Neueste */ /* ------------------------------------------------------------------ */ #ptl .ptl-ziel { position: relative; margin: 0 0 0; padding: 40px 34px; text-align: center; background: var(--ptl-navy); color: #fff; } #ptl .ptl-ziel h2 { margin: 0 0 8px; font-family: var(--ptl-pixel); font-size: clamp(20px, 3vw, 30px); color: var(--ptl-akzent); text-transform: uppercase; } #ptl .ptl-ziel p { margin: 0 auto; max-width: 560px; font-size: 16px; line-height: 1.6; color: #cdd7e3; } #ptl .ptl-ziel__werte { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; } #ptl .ptl-ziel__werte span { padding: 8px 12px; background: rgba(255, 255, 255, .08); font-family: var(--ptl-fein); font-size: 14px; font-weight: 500; text-transform: uppercase; } /* 30.09.2026 Dienstweg-Spende BDV (nur mit --spende): gesteppte Fläche im Ziel-Block, linksbündig */ #ptl .ptl-spende { position: relative; max-width: 620px; margin: 28px auto 0; padding: 22px 24px 20px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 2px rgba(233, 211, 161, .35); } #ptl .ptl-spende__titel { margin: 0 0 8px; font: 800 26px/1.15 var(--ptl-kopf); color: #fbf6ea; text-transform: none; outline: none; } #ptl .ptl-ziel .ptl-spende p { max-width: none; margin: 0 0 12px; } #ptl .ptl-ziel .ptl-spende .ptl-spende__text { font-size: 15.5px; line-height: 1.6; color: #dfe6ee; } #ptl .ptl-ziel .ptl-spende .ptl-spende__stand { font: 600 14.5px/1.45 var(--ptl-fliess); color: var(--ptl-sand); } /* Pixelify: „2“ liest sich wie „8“ – bei Betraegen nie */ #ptl .ptl-ziel .ptl-spende .ptl-spende__stand:empty { display: none; } #ptl .ptl-spende__feld { display: block; margin: 0 0 14px; } #ptl .ptl-spende__feld span { display: block; margin: 0 0 6px; font: 600 14px/1.3 var(--ptl-fliess); color: #fbf6ea; } #ptl .ptl-spende__feld input { width: 100%; min-height: 44px; padding: 10px 12px; border: 2px solid rgba(233, 211, 161, .5); border-radius: 0; background: #fbf6ea; color: var(--ptl-navy); font: 500 16px/1.3 var(--ptl-fliess); } #ptl .ptl-spende__feld input:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-spende__haken { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #dfe6ee; cursor: pointer; } #ptl .ptl-spende__haken input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ptl-blau-hell); } #ptl .ptl-ziel .ptl-spende .ptl-spende__klein { font-size: 13px; line-height: 1.5; color: #a9b5c3; } #ptl .ptl-spende__klein a { color: #E2D6BA; text-underline-offset: 3px; } #ptl .ptl-spende__klein a:hover, #ptl .ptl-spende__klein a:focus-visible { color: #fbf6ea; } #ptl .ptl-spende .ptl-knopf { margin-top: 4px; } #ptl .ptl-ziel .ptl-spende .ptl-spende__meldung { margin: 10px 0 0; font-size: 14px; color: #E2D6BA; } #ptl .ptl-ziel .ptl-spende .ptl-spende__meldung:empty { display: none; } @media (max-width: 560px) { #ptl .ptl-spende { padding: 18px 16px 16px; } #ptl .ptl-spende .ptl-knopf { width: 100%; } } #ptl .ptl-konfetti { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; } #ptl .ptl-neu { padding: 56px 0 72px; } #ptl .ptl-neu h2 { margin: 0 0 18px; font-family: var(--ptl-pixel); font-size: 14px; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-neu ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; } #ptl .ptl-neu li { margin: 0; } #ptl .ptl-neu a { display: block; height: 100%; padding: 16px 18px; background: #fff; border: 2px solid var(--ptl-rand); font: 600 15.5px/1.4 var(--ptl-fliess); color: var(--ptl-navy); text-decoration: none; } #ptl .ptl-neu a:hover, #ptl .ptl-neu a:focus-visible { border-color: var(--ptl-navy); box-shadow: 4px 4px 0 var(--ptl-navy); outline: 0; } #ptl .ptl-neu__alle { margin: 16px 0 0; font-size: 14.5px; } #ptl .ptl-neu__alle a { color: var(--ptl-blau); } /* ------------------------------------------------------------------ */ /* HUD + Meldung */ /* ------------------------------------------------------------------ */ #ptl .ptl-hud { position: fixed; z-index: 40; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--ptl-navy); color: #fff; transform: translateY(140%); transition: transform .35s steps(5); } #ptl .ptl-hud.ist-sichtbar { transform: none; } #ptl .ptl-hud.ist-klein { gap: 0; padding: 8px; } #ptl .ptl-hud.ist-klein .ptl-hud__text { display: none; } #ptl .ptl-hud__bild { width: 48px; height: 48px; background: #22344d; image-rendering: pixelated; } #ptl .ptl-hud__text { display: grid; gap: 5px; min-width: 176px; } #ptl .ptl-hud__zeile { font-family: var(--ptl-fein); font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--ptl-akzent); } #ptl .ptl-hud__name { font: 700 15px/1.1 var(--ptl-kopf); letter-spacing: .02em; } #ptl .ptl-hud__balken { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; } #ptl .ptl-hud__balken button { width: 100%; height: 8px; padding: 0; border: 0; cursor: pointer; background: #33455f; } #ptl .ptl-hud__balken button.ist-erreicht { background: var(--ptl-akzent); } #ptl .ptl-hud__balken button.ist-aktuell { background: #fff; } #ptl .ptl-hud__werte { display: flex; align-items: center; gap: 12px; font-family: var(--ptl-fein); font-size: 12px; font-weight: 500; color: #b9c6d6; text-transform: uppercase; } #ptl .ptl-meldung { position: fixed; z-index: 50; left: 50%; top: calc(84px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 14px 18px 14px 14px; background: var(--ptl-creme); color: var(--ptl-navy); transform: translate(-50%, -24px); opacity: 0; pointer-events: none; transition: transform .25s steps(4), opacity .25s steps(4); } #ptl .ptl-meldung.ist-sichtbar { transform: translate(-50%, 0); opacity: 1; } #ptl .ptl-meldung canvas { width: 40px; height: 40px; image-rendering: pixelated; } #ptl .ptl-meldung small { display: block; font-family: var(--ptl-fein); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ptl-akzent-dunkel); } #ptl .ptl-meldung small:empty { display: none; } #ptl .ptl-meldung.ist-fund b { margin: 2px 0 4px; font: 800 26px/1.05 var(--ptl-kopf); letter-spacing: -.01em; text-transform: none; color: var(--ptl-navy); } #ptl .ptl-meldung { pointer-events: auto; cursor: pointer; } #ptl .ptl-meldung:not(.ist-sichtbar) { pointer-events: none; } #ptl .ptl-meldung b { display: block; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-meldung span { display: block; max-width: 440px; margin-top: 3px; font: 600 16px/1.3 var(--ptl-fliess); } #ptl .ptl-meldung.ist-fund span { font-weight: 500; font-size: 16px; line-height: 1.45; } #ptl .ptl-meldung.ist-fund canvas { width: 56px; height: 56px; } /* Freischalt-Hinweis: links ueber dem HUD, gleiche Breite, stoert den Lesefluss nicht */ #ptl .ptl-freischalt { position: fixed; z-index: 45; left: 18px; bottom: calc(var(--ptl-hud-h, 96px) + 30px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; width: var(--ptl-hud-w, 300px); padding: 10px 12px 10px 10px; border: 0; cursor: pointer; text-align: left; background: var(--ptl-navy); color: #fff; transform: translateX(-120%); transition: transform .35s steps(5); } #ptl .ptl-freischalt.ist-sichtbar { transform: none; } #ptl .ptl-freischalt canvas { flex: none; width: 40px; height: 46px; image-rendering: pixelated; } #ptl .ptl-freischalt small { display: block; font-family: var(--ptl-fein); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ptl-akzent); } #ptl .ptl-freischalt b { display: block; margin-top: 2px; font: 800 18px/1.1 var(--ptl-kopf); } #ptl .ptl-freischalt em { display: block; margin-top: 3px; font: 500 12px/1.2 var(--ptl-fein); font-style: normal; text-transform: uppercase; color: #b9c6d6; } #ptl .ptl-freischalt:hover em, #ptl .ptl-freischalt:focus-visible em { color: #fff; } #ptl .ptl-freischalt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #ptl .ptl-hud.ist-offen.ist-klein { gap: 14px; padding: 10px 14px 10px 10px; } #ptl .ptl-hud.ist-offen.ist-klein .ptl-hud__text { display: grid; } /* ------------------------------------------------------------------ */ /* Fundstuecke (Easter Eggs) + Abzeichen */ /* ------------------------------------------------------------------ */ #ptl .ptl-fund { position: absolute; z-index: 2; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s steps(2), filter .12s steps(2); } #ptl .ptl-fund::before { content: ""; position: absolute; inset: -10px; } /* groessere Trefferflaeche */ #ptl .ptl-fund canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #ptl .ptl-fund:hover, #ptl .ptl-fund:focus-visible { transform: translateY(-3px); filter: brightness(1.18) drop-shadow(0 0 3px rgba(255, 255, 255, .7)); outline: 0; } #ptl .ptl-fund:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; } /* Glanz: alle paar Sekunden blitzt ein kleiner Stern auf */ #ptl .ptl-fund::after { content: ""; position: absolute; right: -6px; top: -8px; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: ptl-glanz 5.5s steps(1) infinite; animation-delay: var(--ptl-glanz, 0s); } @keyframes ptl-glanz { 0%, 88%, 100% { opacity: 0; transform: scale(.5); } 90% { opacity: 1; transform: scale(.8); } 93% { opacity: 1; transform: scale(1.1); } 96% { opacity: .6; transform: scale(.6); } } /* Stufen 1–8: Glanz seltener, Tarnung staerker, Trefferflaeche knapper, Hover-Schein nur am Anfang */ #ptl .ptl-fund--s1 { animation: ptl-puls 1.8s steps(3) infinite; } @keyframes ptl-puls { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 50% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)); } } #ptl .ptl-fund--s1::after { animation-duration: 1.8s; } #ptl .ptl-fund--s1::before { inset: -16px; } #ptl .ptl-fund--s2::after { animation-duration: 4s; } #ptl .ptl-fund--s2::before { inset: -8px; } #ptl .ptl-fund--s3 { filter: brightness(.95) saturate(.9); } #ptl .ptl-fund--s3::after { animation-duration: 7s; } #ptl .ptl-fund--s3::before { inset: -5px; } #ptl .ptl-fund--s4 { filter: brightness(.9) saturate(.82); } #ptl .ptl-fund--s4::after { animation-duration: 12s; } #ptl .ptl-fund--s4::before { inset: -3px; } #ptl .ptl-fund--s5 { filter: brightness(.84) saturate(.7); } #ptl .ptl-fund--s5::after { animation-duration: 20s; } #ptl .ptl-fund--s5::before, #ptl .ptl-fund--s6::before, #ptl .ptl-fund--s7::before, #ptl .ptl-fund--s8::before { inset: 0; } #ptl .ptl-fund--s6 { filter: brightness(.78) saturate(.6); opacity: .9; } #ptl .ptl-fund--s7 { filter: brightness(.72) saturate(.5); opacity: .85; } #ptl .ptl-fund--s8 { filter: brightness(.66) saturate(.42); opacity: .8; } #ptl .ptl-fund--s6::after, #ptl .ptl-fund--s7::after, #ptl .ptl-fund--s8::after { animation: none; } #ptl .ptl-fund--s6:hover, #ptl .ptl-fund--s7:hover, #ptl .ptl-fund--s8:hover { filter: none; opacity: 1; } #ptl .ptl-fund.ist-gefunden { animation: none; filter: none; opacity: 1; } #ptl .ptl-fund.ist-gefunden::after { animation: none; opacity: 1; right: -4px; top: -4px; width: 10px; height: 10px; background: var(--ptl-akzent); clip-path: polygon(14% 50%, 40% 76%, 88% 20%, 100% 34%, 40% 100%, 0 64%); } #ptl .ptl-hud__fund { color: #fff; } #ptl .ptl-hud__orden { width: 20px; height: 23px; padding: 0; border: 0; background: none; cursor: pointer; image-rendering: pixelated; } #ptl .ptl-hud__orden canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #ptl .ptl-orden { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(15, 21, 32, .72); } #ptl .ptl-orden__karte { position: relative; overflow: hidden; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px 28px 24px; text-align: center; background: var(--ptl-navy); color: #fff; } #ptl .ptl-orden__bild { display: block; width: 150px; height: 170px; margin: 0 auto 14px; image-rendering: pixelated; } #ptl .ptl-orden__stufe { margin: 0 0 6px; font-family: var(--ptl-pixel); font-size: 16px; text-transform: uppercase; color: var(--ptl-gold); } #ptl .ptl-orden[data-stufe="silber"] .ptl-orden__stufe { color: #c9d1d9; } #ptl .ptl-orden[data-stufe="bronze"] .ptl-orden__stufe { color: #e0a36b; } #ptl .ptl-orden h2 { margin: 0; font-family: var(--ptl-kopf); font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; } #ptl .ptl-orden__zeile { margin: 6px 0 12px; font-family: var(--ptl-fein); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ptl-salbei); } #ptl .ptl-orden__text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: #cdd7e3; } #ptl .ptl-orden__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #ptl .ptl-orden__knoepfe button { padding: 11px 16px; border: 0; cursor: pointer; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; text-transform: uppercase; background: var(--ptl-blau-hell); color: #fff; box-shadow: inset 0 -3px 0 #145c89; } #ptl .ptl-orden__knoepfe button + button { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); } #ptl .ptl-orden__knoepfe button:hover, #ptl .ptl-orden__knoepfe button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #ptl .ptl-orden__cta { margin: 16px 0 0; padding-top: 14px; border-top: 2px dashed rgba(255, 255, 255, .18); font-size: 14.5px; color: #b9c6d6; } #ptl .ptl-orden__cta a { color: #fff; font-weight: 600; } /* HUD passt in den freien Rand (JS setzt data-modus und --ptl-hud-max) */ #ptl .ptl-hud[data-modus="voll"] { max-width: var(--ptl-hud-max); } #ptl .ptl-hud[data-modus="voll"] .ptl-hud__text { min-width: 0; } #ptl .ptl-hud[data-modus="schmal"], #ptl .ptl-hud[data-modus="mini"] { left: 8px; width: var(--ptl-hud-max); display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; padding: 8px; } #ptl .ptl-hud[data-modus="schmal"] { max-width: 168px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__bild { width: 40px; height: 40px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__orden { justify-self: end; width: 28px; height: 32px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__text, #ptl .ptl-hud[data-modus="schmal"].ist-klein .ptl-hud__text { display: grid; grid-column: 1 / -1; min-width: 0; gap: 5px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__zeile { font-size: 11px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__name { font-size: 13px; hyphens: auto; -webkit-hyphens: auto; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__balken { gap: 2px; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__werte { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 11px; } #ptl .ptl-hud[data-modus="mini"] { grid-template-columns: 1fr; justify-items: center; } #ptl .ptl-hud[data-modus="mini"] .ptl-hud__text { display: none !important; } #ptl .ptl-hud[data-modus="mini"] .ptl-hud__bild { width: 100%; height: auto; aspect-ratio: 1; } #ptl .ptl-hud[data-modus="mini"] .ptl-hud__orden { width: 26px; height: 30px; } #ptl .ptl-freischalt[data-modus="schmal"], #ptl .ptl-freischalt[data-modus="mini"] { left: 8px; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; } #ptl .ptl-freischalt[data-modus="schmal"] b { font-size: 15px; } #ptl .ptl-freischalt[data-modus="mini"] { align-items: center; } #ptl .ptl-freischalt[data-modus="mini"] span { display: none; } #ptl .ptl-freischalt[data-modus="mini"] canvas { width: 100%; height: auto; } /* Neue Medaille: hopst und ruft, bis man draufklickt */ #ptl .ptl-hud__orden { position: relative; overflow: visible; } #ptl .ptl-hud__orden.ist-neu canvas { animation: ptl-hopser 1.8s steps(1) infinite; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(156, 175, 136, .9)); } @keyframes ptl-hopser { 0%, 55%, 100% { transform: none; } 62% { transform: translateY(-5px); } 70% { transform: translateY(-8px); } 78% { transform: translateY(-3px); } 86% { transform: none; } 92% { transform: translateY(-2px); } } #ptl .ptl-hud__hol { position: absolute; right: -6px; bottom: calc(100% + 10px); display: none; padding: 5px 8px; white-space: nowrap; background: #fff; color: var(--ptl-navy); font: 600 12px/1 var(--ptl-fein); text-transform: uppercase; box-shadow: 0 2px 0 rgba(15, 21, 32, .35); animation: ptl-blinken 1.4s steps(2) infinite; } #ptl .ptl-hud__hol::after { content: ""; position: absolute; right: 14px; bottom: -6px; width: 8px; height: 6px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); } #ptl .ptl-hud__orden.ist-neu .ptl-hud__hol { display: block; } #ptl .ptl-hud[data-modus="mini"] .ptl-hud__hol { display: none !important; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__bild { order: 1; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__orden { order: 2; align-self: center; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__text { order: 3; } #ptl .ptl-hud[data-modus="schmal"] .ptl-hud__hol { right: -2px; white-space: normal; width: max-content; max-width: calc(var(--ptl-hud-max) - 16px); line-height: 1.2; text-align: right; } /* ------------------------------------------------------------------ */ /* Schmal */ /* ------------------------------------------------------------------ */ @media (max-width: 1000px) { #ptl .ptl-kopf__raster { grid-template-columns: 1fr; } #ptl .ptl-inhalt { grid-template-columns: 1fr; } /* Stationsleiste wird eine Zeile aus Nummern */ #ptl .ptl-karte { padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } #ptl .ptl-karte__titel { display: none; } #ptl .ptl-karte ol { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; } #ptl .ptl-karte a { align-items: center; padding: 8px 0; background: rgba(255, 255, 255, .14); } #ptl .ptl-karte a small { display: none; } #ptl .ptl-karte a span { font-size: 17px; color: #fff; } #ptl .ptl-karte a.ist-erreicht span::after { content: ""; } #ptl .ptl-karte a.ist-erreicht { background: rgba(156, 175, 136, .32); } } @media (max-width: 720px) { #ptl { --ptl-px: 3px; --ptl-rinne: 30px; } #ptl .ptl-kopf { padding: 16px 0 16px; } #ptl .ptl-kopf__raster { gap: 12px; } #ptl .ptl-kopf h1 { font-size: 27px; margin-bottom: 12px; } #ptl .ptl-kopf__lead { display: none; } #ptl .ptl-kicker__lang { display: none; } #ptl .ptl-kicker__kurz { display: inline; } #ptl .ptl-suche button { padding: 0 16px; } #ptl .ptl-weg { padding-top: 12px; } #ptl .ptl-station { padding-bottom: 88px; } #ptl .ptl-station__kopf { left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 6px 12px 6px 6px; gap: 0 10px; } #ptl .ptl-schild { width: 34px; height: 34px; font-size: 17px; } #ptl .ptl-station__zeit { font-size: 11px; } #ptl .ptl-station h2 { font-size: 19px; } #ptl .ptl-station__lead { font-size: 16px; margin-bottom: 20px; } #ptl .ptl-buehne { width: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: none; margin-inline: calc(var(--ptl-rinne) * -1 + 6px); margin-bottom: 18px; } #ptl .ptl-buehne__abzeichen { display: none; } #ptl .ptl-start { top: 54%; padding: 11px 16px 13px; font-size: 12px; gap: 8px; } #ptl .ptl-start i { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; } #ptl .ptl-merk { padding: 22px 18px 18px; } #ptl .ptl-kachel { grid-template-columns: 36px 1fr; padding: 12px; gap: 12px; } #ptl .ptl-kachel__icon { width: 36px; height: 36px; } #ptl .ptl-kachel__pfeil { display: none; } #ptl .ptl-neu ul { grid-template-columns: 1fr; } #ptl .ptl-hud { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 8px 10px 8px 8px; gap: 10px; } #ptl .ptl-hud.ist-klein { right: auto; } #ptl .ptl-hud__text { min-width: 0; flex: 1; } #ptl .ptl-hud__bild { width: 40px; height: 40px; } #ptl .ptl-meldung { top: auto; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 24px); } #ptl .ptl-blase { max-width: 190px; font-size: 13px; } #ptl .ptl-orden__karte { padding: 26px 18px 20px; } #ptl .ptl-freischalt { left: 8px; width: calc(100vw - 16px); bottom: calc(var(--ptl-hud-h, 64px) + 18px + env(safe-area-inset-bottom, 0px)); } #ptl.hat-freischalt .ptl-meldung { bottom: calc(var(--ptl-hud-h, 64px) + 100px + env(safe-area-inset-bottom, 0px)); } #ptl .ptl-meldung.ist-fund b { font-size: 22px; } #ptl .ptl-meldung.ist-fund canvas { width: 44px; height: 44px; } #ptl .ptl-merk h3, #ptl .ptl-links h3 { font-size: 14px; } #ptl .ptl-orden h2 { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { #ptl *, #ptl *::before, #ptl *::after { animation: none !important; transition: none !important; } #ptl.ist-js .ptl-einblenden { opacity: 1; transform: none; } } /* Soldat / Soldatin – Schalter oben links im Kopf */ #ptl .ptl-wahl { display: inline-flex; vertical-align: middle; gap: 0; margin: 0 14px 8px 0; padding: 2px; border-radius: var(--ps-radius-voll, 4px); background: rgba(15, 21, 32, .55); border: 1px solid rgba(255, 255, 255, .18); } #ptl .ptl-wahl button { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 10px 2px 4px; border: 0; border-radius: var(--ps-radius-voll, 4px); background: transparent; color: #cdd7e3; cursor: pointer; font: 600 13px/1 var(--ps-font-pixel), sans-serif; letter-spacing: .02em; } #ptl .ptl-wahl button:hover { color: #fff; } #ptl .ptl-wahl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #ptl .ptl-wahl button[aria-pressed="true"] { background: #fff; color: var(--ptl-navy, #0f1520); } #ptl .ptl-wahl canvas { width: 20px; height: 20px; image-rendering: pixelated; border-radius: 50%; background: #9caf88; } /* Schwere Fundstuecke (nur mit Maus): Zeitfenster, verdeckt, Aktion */ #ptl .ptl-fund--zeitfenster, #ptl .ptl-fund--aktion { visibility: hidden; } /* Nur das Bild lugt (clip-path auf dem canvas). Clip-Animationen am Knopf selbst rechnet Chrome auf der GPU, die Treffererkennung sieht dann den Startwert „ganz versteckt“: sichtbar, aber nicht klickbar (26.09.) */ #ptl .ptl-fund--zeitfenster.ist-da { visibility: visible; } #ptl .ptl-fund--zeitfenster.ist-da canvas { animation: ptl-lugen 2.6s steps(6) both; } #ptl .ptl-fund--zeitfenster.ist-da:hover canvas { animation-play-state: paused; } #ptl .ptl-fund--zeitfenster::before { inset: -6px; } /* 24 x 12 px sind sonst kaum zu treffen */ #ptl .ptl-fund--aktion.ist-da { visibility: visible; animation: ptl-auftauchen .7s steps(5) both; } #ptl .ptl-fund--zeitfenster.ist-gefunden, #ptl .ptl-fund--aktion.ist-gefunden { visibility: visible; animation: none; } #ptl .ptl-fund--zeitfenster.ist-gefunden canvas { animation: none; } #ptl .ptl-fund--zeitfenster:hover, #ptl .ptl-fund--verdeckt:hover, #ptl .ptl-fund--aktion:hover { transform: none; } #ptl .ptl-fund-deckel { position: absolute; z-index: 3; image-rendering: pixelated; pointer-events: auto; } @keyframes ptl-lugen { 0% { clip-path: inset(0 0 0 100%); } 15%, 85% { clip-path: inset(0); } 100% { clip-path: inset(0 0 0 100%); } } @keyframes ptl-auftauchen { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-fund--zeitfenster.ist-da canvas, #ptl .ptl-fund--aktion.ist-da { animation: none; } } /* Saison-Ebene: Deko und Partikel in Szenenpixeln ueber dem Bild */ #ptl .ptl-saison-ebene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; image-rendering: pixelated; } #ptl .ptl-ei { z-index: 2; } /* Grab-Element Station 9: eigene Leinwand, Groesse/Lage setzt timeline.js (setzeDeko) */ #ptl .ptl-grab { position: absolute; z-index: 1; pointer-events: none; image-rendering: pixelated; } #ptl .ptl-ei:hover { transform: translateY(-2px) rotate(-8deg); } /* Volkstrauertag: gedaempft, keine Deko */ #ptl.ist-still .ptl-buehne > img { filter: saturate(.6) brightness(.95); } #ptl .ptl-ei { animation: ptl-ei 3.2s steps(2) infinite; } @keyframes ptl-ei { 0%, 80% { transform: none; } 90% { transform: rotate(-12deg); } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-ei { animation: none; } } /* ------------------------------------------------------------------ */ /* Profil + Live-Checkliste (Scrollwelt V2, profil-ui.js) */ /* ------------------------------------------------------------------ */ html.ptl-gesperrt, html.ptl-gesperrt body { overflow: hidden; } #ptl .ptl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ptl .ptl-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; margin: 0; border: 0; cursor: pointer; text-decoration: none; text-align: center; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; background: var(--ptl-blau); color: #fff; box-shadow: inset 0 -3px 0 #0b3f60; } #ptl .ptl-knopf:hover { background: var(--ptl-blau-hover); color: #fff; } #ptl .ptl-knopf:focus-visible { outline: 3px solid var(--ptl-navy); outline-offset: 2px; } #ptl .ptl-knopf:disabled { opacity: .35; cursor: default; } #ptl .ptl-knopf--leise { background: transparent; color: var(--ptl-navy); box-shadow: inset 0 0 0 2px var(--ptl-navy); } #ptl .ptl-knopf--leise:hover { background: var(--ptl-navy); color: #fff; } #ptl .ptl-knopf--klein { min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 20px; line-height: 1; } #ptl .ptl-link { padding: 0; margin: 0 0 0 8px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ptl-blau); text-decoration: underline; } /* Werkzeugleiste ueber dem HUD */ /* Unterkante der Leiste; Pop-up und Liste stehen darauf, die Liste bekommt den Rest bis zum oberen Rand */ #ptl { --ptl-leiste-unten: calc(var(--ptl-hud-oben, 110px) + 22px); --ptl-ueber-leiste: calc(var(--ptl-leiste-unten) + var(--ptl-werkzeug-h, 44px)); --ptl-oben-frei: max(var(--ptl-kopf-frei, 16px), calc(env(safe-area-inset-top, 0px) + 12px)); } #ptl.hat-freischalt { --ptl-leiste-unten: calc(var(--ptl-hud-oben, 110px) + 96px); } #ptl .ptl-werkzeug { position: fixed; z-index: 41; left: 18px; bottom: var(--ptl-leiste-unten); display: flex; gap: 12px; transform: translateX(calc(-100% - 40px)); transition: transform .35s steps(5), bottom .2s steps(3); } #ptl .ptl-werkzeug.ist-sichtbar { transform: none; } #ptl .ptl-werkzeug__knopf { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; cursor: pointer; background: var(--ptl-navy); color: #fff; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } #ptl .ptl-werkzeug__knopf:hover, #ptl .ptl-werkzeug__knopf.ist-gezeigt { background: var(--ptl-blau); } #ptl .ptl-werkzeug__knopf:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 3px; } #ptl .ptl-werkzeug__knopf[aria-expanded="true"] { background: var(--ptl-blau); } #ptl .ptl-werkzeug__zahl { padding: 3px 6px; background: var(--ptl-akzent); color: var(--ptl-navy); font-size: 12px; font-weight: 700; } #ptl .ptl-werkzeug__zahl:empty { display: none; } #ptl .ptl-werkzeug__icon { width: 16px; height: 16px; image-rendering: pixelated; background-size: 100% 100%; } #ptl .ptl-werkzeug__icon--liste { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 1h6v7H1z'/%3E%3Cpath fill='%230f1520' d='M2 2h4v1H2zM2 4h4v1H2zM2 6h3v1H2z'/%3E%3Cpath fill='%239caf88' d='M3 0h2v1H3z'/%3E%3C/svg%3E"); } #ptl .ptl-werkzeug__icon--profil { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23f1c29b' d='M3 1h2v3H3z'/%3E%3Cpath fill='%239caf88' d='M2 0h4v1H2z'/%3E%3Cpath fill='%23fff' d='M1 5h6v3H1z'/%3E%3C/svg%3E"); } #ptl .ptl-werkzeug__knopf.ist-neu { animation: ptl-wackeln .6s steps(6) 2; } @keyframes ptl-wackeln { 0%, 100% { transform: none; } 25% { transform: translate(-3px, -2px); } 50% { transform: translate(3px, -4px); } 75% { transform: translate(-2px, -1px); } } /* Einstiegs-Pop-up am Avatar */ #ptl .ptl-pop { position: fixed; z-index: 46; left: 18px; bottom: calc(var(--ptl-ueber-leiste) + 20px); width: min(340px, calc(100vw - 36px)); padding: 16px 18px 16px; background: var(--ptl-creme); color: var(--ptl-navy); animation: ptl-pop-in .35s steps(4) both; /* 03.10.2026: kein Dauerwippen (SPIELOEKONOMIE 3a) */ } #ptl .ptl-pop::after { content: ""; position: absolute; left: 34px; bottom: calc(var(--ptl-px) * -4 - 8px); border: 10px solid transparent; border-top-color: var(--ptl-navy); border-bottom: 0; } #ptl .ptl-pop__kopf { margin: 0 0 6px; font: 800 20px/1.15 var(--ptl-kopf); color: var(--ptl-navy); } #ptl .ptl-pop__text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ptl-text); } #ptl .ptl-pop__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; } @keyframes ptl-pop-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes ptl-wippen { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } } /* Kopf: Profil-Knopf neben Soldat/Soldatin */ #ptl .ptl-profil-kopf { display: inline-flex; align-items: center; vertical-align: middle; min-height: 30px; margin: 0 0 8px; padding: 4px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--ps-radius-voll, 4px); background: rgba(15, 21, 32, .55); color: #fff; cursor: pointer; font: 600 13px/1 var(--ps-font-pixel), sans-serif; letter-spacing: .02em; } #ptl .ptl-profil-kopf:hover { background: #fff; color: var(--ptl-navy); } #ptl .ptl-profil-kopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Profilblatt */ #ptl .ptl-blatt { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 16px; padding-top: var(--ptl-oben-frei, 16px); background: rgba(15, 21, 32, .72); } #ptl .ptl-blatt__karte { position: relative; width: min(580px, 100%); max-height: calc(100vh - 16px - var(--ptl-oben-frei, 16px)); max-height: calc(100dvh - 16px - var(--ptl-oben-frei, 16px)); overflow-y: auto; margin: 0; padding: 22px 24px 18px; background: var(--ptl-creme); color: var(--ptl-navy); } #ptl .ptl-blatt__kopf { padding-right: 48px; } #ptl .ptl-blatt__schritt { margin: 0 0 4px; font-family: var(--ptl-fein); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ptl-blau); } #ptl .ptl-blatt h2 { margin: 0; font: 800 28px/1.05 var(--ptl-kopf); color: var(--ptl-navy); } #ptl .ptl-blatt__zu, #ptl .ptl-liste__zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; cursor: pointer; background: transparent; color: var(--ptl-navy); font: 700 28px/1 var(--ptl-fliess); } #ptl .ptl-blatt__zu:focus-visible, #ptl .ptl-liste__zu:focus-visible { outline: 3px solid var(--ptl-blau); } #ptl .ptl-blatt__balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 14px 0 4px; } #ptl .ptl-blatt__balken i { height: 6px; background: rgba(15, 21, 32, .14); } #ptl .ptl-blatt__balken i.ist-an { background: var(--ptl-blau); } #ptl .ptl-feld { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; } #ptl .ptl-feld legend, #ptl .ptl-feld > label, #ptl .ptl-feld__titel { display: block; margin: 0 0 8px; padding: 0; font: 700 15.5px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-feld label small { font-weight: 500; color: var(--ptl-grau); } #ptl .ptl-feld__hinweis { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--ptl-grau); } #ptl .ptl-chips { display: flex; flex-wrap: wrap; gap: 8px; } #ptl .ptl-chip { position: relative; } #ptl .ptl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } #ptl .ptl-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; cursor: pointer; background: #fff; border: 2px solid rgba(15, 21, 32, .28); font: 600 14.5px/1.25 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-chip span:hover { border-color: var(--ptl-navy); } #ptl .ptl-chip input:checked + span { background: var(--ptl-navy); border-color: var(--ptl-navy); color: #fff; } #ptl .ptl-chip input:focus-visible + span { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-feld input[type="text"], #ptl .ptl-feld input[type="number"] { width: 100%; max-width: 320px; min-height: 44px; padding: 10px 12px; border: 2px solid rgba(15, 21, 32, .3); border-radius: 0; background: #fff; color: var(--ptl-navy); font: 500 16px var(--ptl-fliess); } #ptl .ptl-feld input:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 1px; } #ptl .ptl-zaehler { display: flex; align-items: center; gap: 14px; } #ptl .ptl-zaehler output { min-width: 2ch; text-align: center; font: 700 24px/1 var(--ptl-pixel); color: var(--ptl-navy); } #ptl .ptl-feld__warnung { margin: 16px 0 0; padding: 10px 12px; border-left: 4px solid var(--ptl-blau); background: rgba(16, 86, 130, .08); font-size: 14.5px; line-height: 1.45; } #ptl .ptl-blatt__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; } #ptl .ptl-blatt__fuss [data-zurueck] { margin-right: auto; } #ptl .ptl-blatt__datenschutz { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ptl-grau); } #ptl .ptl-blatt__datenschutz a { color: var(--ptl-blau); } /* Live-Checkliste */ #ptl .ptl-liste { position: fixed; z-index: 46; left: 18px; bottom: calc(var(--ptl-ueber-leiste) + 14px); width: min(400px, calc(100vw - 36px)); max-height: calc(100vh - var(--ptl-ueber-leiste) - 14px - var(--ptl-oben-frei)); max-height: calc(100dvh - var(--ptl-ueber-leiste) - 14px - var(--ptl-oben-frei)); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 14px; background: var(--ptl-creme); color: var(--ptl-navy); } #ptl .ptl-liste__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #ptl .ptl-liste__station { margin: 0 0 2px; font-family: var(--ptl-fein); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ptl-blau); } #ptl .ptl-liste h2 { margin: 0; font: 800 22px/1.1 var(--ptl-kopf); color: var(--ptl-navy); outline: 0; } #ptl .ptl-liste__nav { display: flex; gap: 6px; padding-right: 44px; } #ptl .ptl-liste__zu { top: 8px; right: 6px; } #ptl .ptl-liste__stand { margin: 12px 0 4px; } #ptl .ptl-liste__stand p { margin: 0; } #ptl .ptl-liste__zahl { font: 700 15px/1.3 var(--ptl-fliess); } #ptl .ptl-liste__balken { height: 10px; margin: 6px 0; background: rgba(15, 21, 32, .12); } #ptl .ptl-liste__balken i { display: block; height: 100%; background: var(--ptl-blau); transition: width .3s steps(4); } #ptl .ptl-liste__klein { font-size: 12.5px; line-height: 1.45; color: var(--ptl-grau); } #ptl .ptl-stufe { margin: 16px 0 4px; font-family: var(--ptl-fein); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } #ptl .ptl-stufe--pflicht { color: #9a2530; } #ptl .ptl-stufe--wichtig { color: var(--ptl-blau); } #ptl .ptl-stufe--optional { color: var(--ptl-grau); } #ptl .ptl-liste ul { margin: 0; padding: 0; list-style: none; } #ptl .ptl-punkt { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid rgba(15, 21, 32, .1); } #ptl .ptl-punkt input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0; cursor: pointer; border: 2px solid var(--ptl-navy); background: #fff; } #ptl .ptl-punkt input:checked { background: var(--ptl-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } #ptl .ptl-punkt input:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-punkt label { cursor: pointer; font-size: 15px; line-height: 1.3; } #ptl .ptl-punkt label b { color: var(--ptl-navy); } #ptl .ptl-punkt input:checked + label b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ptl-grau); } #ptl .ptl-punkt label span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ptl-text); } #ptl .ptl-punkt__hinweis { padding: 6px 8px; margin-top: 6px !important; border-left: 3px solid var(--ptl-blau); background: rgba(16, 86, 130, .08); } #ptl .ptl-punkt small { display: inline-block; padding: 2px 5px; font-family: var(--ptl-fein); font-size: 11.5px; font-weight: 600; text-transform: uppercase; vertical-align: 1px; } #ptl .ptl-punkt__vorbelegt { background: #e3e9dc; color: #3d4726; } #ptl .ptl-punkt__entwurf { background: #9a2530; color: #fff; } #ptl .ptl-punkt__mehr { align-self: start; padding: 4px 2px; font-family: var(--ptl-fein); font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-liste__leer { margin: 14px 0; font-size: 14.5px; } #ptl .ptl-frueher { margin-top: 14px; border-top: 2px solid rgba(15, 21, 32, .14); } #ptl .ptl-frueher summary { padding: 12px 0 6px; cursor: pointer; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-frueher summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); } #ptl .ptl-frueher h4 { margin: 12px 0 2px; font: 700 13.5px/1.3 var(--ptl-fliess); color: var(--ptl-grau); } #ptl .ptl-liste__fuss { margin-top: 14px; } #ptl .ptl-liste__fuss .ptl-knopf { width: 100%; } #ptl .ptl-liste__fuss .ptl-liste__klein { margin: 6px 0 0; } #ptl .ptl-liste__profil { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(15, 21, 32, .1); font-size: 13.5px; } #ptl .ptl-karte li.ist-vorbei a { opacity: .72; } /* Schmaler linker Rand: Leiste untereinander, nur Symbol und Zahl (Name bleibt fuer Screenreader) */ #ptl .ptl-werkzeug[data-modus="schmal"], #ptl .ptl-werkzeug[data-modus="mini"] { left: 8px; flex-direction: column; align-items: flex-start; gap: 8px; } #ptl .ptl-werkzeug[data-modus="schmal"] .ptl-werkzeug__text, #ptl .ptl-werkzeug[data-modus="mini"] .ptl-werkzeug__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ptl .ptl-werkzeug[data-modus="schmal"] .ptl-werkzeug__knopf, #ptl .ptl-werkzeug[data-modus="mini"] .ptl-werkzeug__knopf { min-width: 44px; justify-content: center; padding: 8px 10px; } #ptl .ptl-werkzeug[data-modus="mini"] .ptl-werkzeug__zahl { position: absolute; top: -8px; right: -10px; } #ptl .ptl-werkzeug[data-modus="schmal"] ~ .ptl-pop, #ptl .ptl-werkzeug[data-modus="mini"] ~ .ptl-pop { left: 8px; } #ptl .ptl-werkzeug[data-modus="schmal"] ~ .ptl-pop::after, #ptl .ptl-werkzeug[data-modus="mini"] ~ .ptl-pop::after { left: 14px; } @media (max-width: 720px) { #ptl { --ptl-leiste-unten: calc(var(--ptl-hud-oben, 70px) + 8px); } #ptl.hat-freischalt { --ptl-leiste-unten: calc(var(--ptl-hud-oben, 70px) + 84px); } #ptl .ptl-werkzeug { left: 8px; gap: 8px; } #ptl .ptl-werkzeug.ist-sichtbar.ist-versteckt { transform: translateX(calc(-100% - 40px)); } #ptl .ptl-werkzeug__knopf { font-size: 13px; padding: 8px 10px; } #ptl .ptl-pop { left: 8px; width: calc(100vw - 16px); bottom: calc(var(--ptl-ueber-leiste) + 20px); } #ptl .ptl-blatt { place-items: end stretch; padding: var(--ptl-oben-frei, 0px) 0 0; } #ptl .ptl-blatt__karte { width: 100%; max-height: min(90vh, calc(100vh - var(--ptl-oben-frei, 0px))); max-height: min(90dvh, calc(100dvh - var(--ptl-oben-frei, 0px))); padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } #ptl .ptl-blatt h2 { font-size: 24px; } #ptl .ptl-blatt__fuss .ptl-knopf { flex: 1 1 auto; } #ptl .ptl-liste { left: 8px; right: 8px; width: auto; bottom: calc(var(--ptl-ueber-leiste) + 10px); max-height: calc(100vh - var(--ptl-ueber-leiste) - 10px - var(--ptl-oben-frei)); max-height: calc(100dvh - var(--ptl-ueber-leiste) - 10px - var(--ptl-oben-frei)); padding: 14px 14px 12px; } #ptl .ptl-knopf--klein { min-width: 44px; min-height: 44px; } #ptl .ptl-profil-kopf { min-height: 32px; } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-pop, #ptl .ptl-werkzeug__knopf.ist-neu { animation: none; } } /* Checkpoints (Etappen) in der Checkliste: Pflicht -> Wichtig -> Optional */ #ptl .ptl-etappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: none; } #ptl .ptl-etappen li { position: relative; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 7px 8px; background: #fff; border: 2px solid rgba(15, 21, 32, .16); } #ptl .ptl-etappen li b { font-family: var(--ptl-fein); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ptl-grau); } #ptl .ptl-etappen li small { grid-column: 2; font: 600 12.5px/1.2 var(--ptl-fliess); color: var(--ptl-grau); } #ptl .ptl-etappen__flagge { grid-row: 1 / 3; width: 16px; height: 16px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230f1520' d='M1 0h1v8H1z'/%3E%3Cpath fill='%23c9ced4' d='M2 1h5v1H2zM2 2h4v1H2zM2 3h5v1H2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } #ptl .ptl-etappen li.ist-geschafft { border-color: #6f8a55; background: #eef3e8; } #ptl .ptl-etappen li.ist-geschafft b, #ptl .ptl-etappen li.ist-geschafft small { color: #3d4726; } #ptl .ptl-etappen li.ist-geschafft .ptl-etappen__flagge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230f1520' d='M1 0h1v8H1z'/%3E%3Cpath fill='%236f8a55' d='M2 1h5v1H2zM2 2h4v1H2zM2 3h5v1H2z'/%3E%3C/svg%3E"); } #ptl .ptl-etappen li.ist-aktiv { border-color: var(--ptl-blau); box-shadow: 0 3px 0 var(--ptl-blau); } #ptl .ptl-etappen li.ist-aktiv b, #ptl .ptl-etappen li.ist-aktiv small { color: var(--ptl-blau); } #ptl .ptl-etappen li.ist-aktiv .ptl-etappen__flagge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230f1520' d='M1 0h1v8H1z'/%3E%3Cpath fill='%23105682' d='M2 1h5v1H2zM2 2h4v1H2zM2 3h5v1H2z'/%3E%3C/svg%3E"); animation: ptl-flattern 1.2s steps(2) infinite; } @keyframes ptl-flattern { 50% { transform: translateY(-2px); } } #ptl .ptl-liste__ziel { margin: 0; } #ptl .ptl-liste__ziel b { display: block; font: 700 15.5px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-liste__ziel span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ptl-text); } #ptl .ptl-stufe__ziel { display: inline-block; margin-left: 6px; padding: 2px 6px; background: var(--ptl-blau); color: #fff; font-size: 11.5px; letter-spacing: .03em; vertical-align: 1px; } #ptl .ptl-spaeter { margin-top: 12px; border-top: 1px dashed rgba(15, 21, 32, .25); } #ptl .ptl-spaeter summary { padding: 12px 0 6px; cursor: pointer; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; color: var(--ptl-grau); } #ptl .ptl-spaeter summary .ptl-stufe { display: inline; margin: 0; } #ptl .ptl-spaeter summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); } /* Partner an Station 9 (All-Hands 28.09., B3). 29.09.2026 neu gestaltet (Mauritz: „liebevoller“): Vereinslogos als gestickte Aufnaeher auf Navy, das die Daemmerung der Szene fortsetzt. Stille Station: einzige Bewegung ist die Kerze (wie am Grabstein der Szene), keine Saisondeko. */ #ptl .ptl-partner { margin: 34px 0 0; padding: 26px 28px 28px; background: var(--ptl-navy); color: #dfe6ee; } #ptl .ptl-partner__kopf { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 2px dashed rgba(233, 211, 161, .28); } #ptl .ptl-partner__kerze { flex: none; width: 45px; height: 90px; } #ptl .ptl-partner__kerze__b { visibility: hidden; } #ptl .ptl-partner__kerze__a, #ptl .ptl-partner__kerze__b { animation: ptl-kerze 1.6s steps(1) infinite; } #ptl .ptl-partner__kerze__b { animation-name: ptl-kerze-b; } @keyframes ptl-kerze { 0%, 55%, 100% { visibility: visible; } 40% { visibility: hidden; } } @keyframes ptl-kerze-b { 0%, 55%, 100% { visibility: hidden; } 40% { visibility: visible; } } #ptl .ptl-partner h3 { margin: 0 0 6px; font: 800 30px/1.1 var(--ptl-kopf); color: #fbf6ea; letter-spacing: .005em; text-transform: none; } #ptl .ptl-partner__intro { max-width: 62ch; margin: 0; font-size: 16px; line-height: 1.55; color: #c3ccd7; } #ptl .ptl-partner__liste { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; } #ptl .ptl-partner__eintrag { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; align-items: start; margin: 0; padding: 26px 26px 0 0; } #ptl .ptl-partner__eintrag + .ptl-partner__eintrag { padding: 26px 0 0 26px; border-left: 2px dashed rgba(233, 211, 161, .28); } #ptl .ptl-partner__aufnaeher { width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .45)); } /* Aermelband: Stoffstreifen mit Kettelrand, knapp unter den Aufnaeher genaeht */ #ptl .ptl-partner__abzeichen { display: flex; flex-direction: column; align-items: center; } #ptl .ptl-partner__band { position: relative; margin-top: -6px; padding: 3px 9px 4px; white-space: nowrap; background: var(--ptl-oliv); color: #fbf6ea; box-shadow: inset 0 0 0 2px var(--ptl-sand-dunkel), 3px 3px 0 rgba(0, 0, 0, .45); font-family: var(--ptl-fein); font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; } #ptl .ptl-partner__beleg { max-width: 70ch; margin: 26px 0 0; padding-top: 16px; border-top: 2px dashed rgba(233, 211, 161, .28); font-size: 14px; line-height: 1.55; color: #a9b5c3; } #ptl .ptl-partner__beleg a { color: #E2D6BA; text-underline-offset: 3px; white-space: nowrap; } #ptl .ptl-partner__beleg a:hover { color: #fbf6ea; } #ptl .ptl-partner__beleg a:focus-visible { outline: 2px solid #fbf6ea; outline-offset: 2px; } #ptl .ptl-partner__aufnaeher--text { display: grid; place-items: center; background: #fbf6ea; color: var(--ptl-navy); font: 800 30px/1 var(--ptl-kopf); box-shadow: 0 0 0 4px var(--ptl-sand-dunkel); } #ptl .ptl-partner h4 { margin: 0 0 10px; } #ptl .ptl-partner__kurz { font: 800 28px/1.05 var(--ptl-kopf); color: #fbf6ea; } #ptl .ptl-partner__voll { display: block; margin-top: 4px; font: 500 14px/1.4 var(--ptl-fliess); color: #a9b5c3; } #ptl .ptl-partner__platz { display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: 5px; background: #fdecc8; color: #6a4b00; font: 600 11.5px/1.5 var(--ptl-fliess); } #ptl .ptl-partner__text > p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #dfe6ee; } #ptl .ptl-partner__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #fbf6ea; text-decoration: none; box-shadow: inset 0 0 0 2px var(--ptl-sand-dunkel); } #ptl .ptl-partner__raus { flex: none; width: 14px; height: 14px; } #ptl a.ptl-partner__link:hover { background: var(--ptl-sand); color: var(--ptl-navy); box-shadow: inset 0 0 0 2px var(--ptl-sand), 0 3px 0 var(--ptl-sand-dunkel); } #ptl a.ptl-partner__link:focus-visible { outline: 3px solid #fbf6ea; outline-offset: 3px; } #ptl .ptl-partner__link--fehlt { color: #a9b5c3; box-shadow: inset 0 0 0 2px rgba(169, 181, 195, .4); } @media (max-width: 900px) { #ptl .ptl-partner__liste { grid-template-columns: 1fr; } #ptl .ptl-partner__eintrag, #ptl .ptl-partner__eintrag + .ptl-partner__eintrag { padding: 24px 0 0; border-left: 0; } #ptl .ptl-partner__eintrag + .ptl-partner__eintrag { margin-top: 24px; border-top: 2px dashed rgba(233, 211, 161, .28); } } @media (max-width: 560px) { #ptl .ptl-partner { padding: 20px 18px 22px; } #ptl .ptl-partner__kopf { gap: 12px; } #ptl .ptl-partner__kerze { width: 32px; height: 64px; align-self: flex-start; } #ptl .ptl-partner h3 { font-size: 25px; } #ptl .ptl-partner__intro { font-size: 15px; } #ptl .ptl-partner__eintrag { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; } #ptl .ptl-partner__band { font-size: 11.5px; padding: 2px 7px 3px; } #ptl .ptl-partner__aufnaeher { width: 88px; height: 88px; } #ptl .ptl-partner__kurz { font-size: 24px; } #ptl .ptl-partner__eintrag { align-items: center; } #ptl .ptl-partner__text { display: contents; } /* Aufnaeher + Name nebeneinander, Rest volle Breite */ #ptl .ptl-partner h4 { margin: 0; } #ptl .ptl-partner__text > p, #ptl .ptl-partner__link { grid-column: 1 / -1; margin-top: -4px; } #ptl .ptl-partner__link { justify-self: start; } #ptl .ptl-partner__wer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-partner__kerze__a, #ptl .ptl-partner__kerze__b { animation: none; } } /* Feedback All-Hands 28.09.: B4 Zaehler, erledigte eingeklappt; B5 Pruefzeile fuer vorausgesetzte Punkte */ #ptl .ptl-stufe__zahl { margin-left: 4px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ptl-grau); } #ptl .ptl-frueher h4 .ptl-stufe__zahl { font-size: 12.5px; } #ptl .ptl-liste__alle { margin: 6px 0 2px; font-size: 14px; color: var(--ptl-grau); } #ptl .ptl-erledigt { margin: 2px 0 6px; } #ptl .ptl-erledigt summary { padding: 8px 0; cursor: pointer; font-family: var(--ptl-fein); font-size: 13px; font-weight: 600; color: var(--ptl-grau); } #ptl .ptl-erledigt summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); } #ptl .ptl-punkt.ist-erledigt { opacity: .62; } #ptl .ptl-punkt.ist-erledigt label span { display: none; } #ptl .ptl-pruefen { margin: 4px 0 10px; padding: 0 12px; background: #e3e9dc; border-left: 4px solid #6b7a3f; } #ptl .ptl-pruefen summary { padding: 11px 0; cursor: pointer; font-size: 14.5px; line-height: 1.35; color: #2f3a1c; } #ptl .ptl-pruefen summary span { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } #ptl .ptl-pruefen summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-pruefen__hilfe { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; color: #2f3a1c; } #ptl .ptl-pruefen ul { margin: 0; padding: 0 0 8px; list-style: none; } #ptl .ptl-pruef { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 0; border-top: 1px solid rgba(47, 58, 28, .18); } #ptl .ptl-pruef__text b { display: block; font-size: 14.5px; color: var(--ptl-navy); } #ptl .ptl-pruef__text small { font-size: 12.5px; color: #3d4726; } #ptl .ptl-pruef__knoepfe { display: flex; gap: 6px; } #ptl .ptl-pruef__knoepfe .ptl-knopf { font-size: 14px; } #ptl .ptl-liste.ist-checkpoint .ptl-etappen { animation: ptl-checkpoint .9s steps(6); } @keyframes ptl-checkpoint { 0%, 100% { transform: none; } 20% { transform: scale(1.04); } 40% { transform: scale(.98); } 60% { transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-etappen li.ist-aktiv .ptl-etappen__flagge, #ptl .ptl-liste.ist-checkpoint .ptl-etappen { animation: none; } } /* 01.10.2026 Abhak-Animation (Mauritz): Stempel, Strich, Pixelfunken + „+1“, Marke fliegt in den Balken, Balken blitzt */ #ptl .ptl-punkt { position: relative; } #ptl .ptl-punkt.ist-abhaken { animation: ptl-zeile-blitz .55s steps(3); } #ptl .ptl-punkt.ist-abhaken input:checked { animation: ptl-stempel .42s steps(4) both; } #ptl .ptl-punkt.ist-abhaken input:checked + label b { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 58% / 0% 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: ptl-strich .36s .12s steps(6) forwards; } @keyframes ptl-stempel { 0% { transform: scale(1); background-size: 0 0; } 35% { transform: scale(1.38) rotate(-6deg); background-size: 8px 8px; } 70% { transform: scale(.92); background-size: 16px 16px; } 100% { transform: scale(1); background-size: 16px 16px; } } @keyframes ptl-strich { to { background-size: 100% 2px; } } @keyframes ptl-zeile-blitz { 0% { background-color: rgba(156, 175, 136, .55); } 100% { background-color: rgba(156, 175, 136, 0); } } #ptl .ptl-funken { position: absolute; left: 12px; top: 23px; width: 0; height: 0; pointer-events: none; z-index: 2; } #ptl .ptl-funken i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--ptl-akzent-dunkel); opacity: 0; animation: ptl-funke .5s .08s steps(5) forwards; } #ptl .ptl-funken i.f1 { background: var(--ptl-blau-hell); } #ptl .ptl-funken i.f2 { left: -2px; top: -2px; width: 4px; height: 4px; background: var(--ptl-sand-dunkel); } @keyframes ptl-funke { 0% { opacity: 1; transform: translate(0, 0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } } #ptl .ptl-funken b { position: absolute; left: -8px; top: -38px; font: 400 16px/1 var(--ptl-pixel); color: var(--ptl-akzent-dunkel); white-space: nowrap; opacity: 0; text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff; animation: ptl-plus .75s .1s steps(7) forwards; } @keyframes ptl-plus { 0% { opacity: 0; transform: translateY(6px); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } } #ptl .ptl-marke { position: absolute; z-index: 5; width: 12px; height: 12px; pointer-events: none; background: var(--ptl-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E") center / 8px 8px no-repeat; box-shadow: 0 0 0 2px #fff, 3px 3px 0 rgba(15, 21, 32, .25); } #ptl .ptl-liste__balken { position: relative; overflow: hidden; } #ptl .ptl-liste__balken.ist-glanz { animation: ptl-balken-puls .4s steps(3); } #ptl .ptl-liste__balken.ist-glanz::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 24%; background: rgba(255, 255, 255, .75); animation: ptl-glanz .6s steps(8) forwards; } @keyframes ptl-glanz { to { left: 110%; } } @keyframes ptl-balken-puls { 50% { transform: scaleY(1.7); } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-liste__balken.ist-glanz, #ptl .ptl-liste__balken.ist-glanz::after { animation: none; } } /* Phase 2: stille Station „Für die, die bleiben" und leiser Karten-Nachsatz */ /* Die Kachelregel „.ptl-karte a“ (flex, height 100 %) griff auch hier: 248 px hohe, leere Kachel. Eigene, flache Leiste. */ #ptl .ptl-karte__still { margin: 8px 0 0; } #ptl .ptl-karte__still a { display: flex; flex-direction: row; align-items: center; gap: 8px; height: auto; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .18); font: 600 12px/1.25 var(--ptl-fliess); color: #d9e0d2; text-decoration: none; } #ptl .ptl-karte__still a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ptl-salbei); opacity: .7; flex: none; } #ptl .ptl-karte__still a:hover, #ptl .ptl-karte__still a:focus-visible { background: rgba(156, 175, 136, .18); transform: none; } #ptl .ptl-station--still .ptl-station__kopf { padding-left: 14px; } #ptl .ptl-gruppe + .ptl-gruppe { margin-top: 18px; } #ptl .ptl-gruppe h4 { margin: 0 0 8px; font: 700 14px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } /* Phase 2: Weggabelung an Station 7 */ #ptl .ptl-wegwahl { margin: 14px 0 0; padding: 14px 16px; background: var(--ptl-creme); color: var(--ptl-navy); } #ptl .ptl-wegwahl__frage { margin: 0 0 10px; font: 800 18px/1.2 var(--ptl-kopf); } #ptl .ptl-wegwahl__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } #ptl .ptl-wegwahl [aria-pressed="true"] { background: var(--ptl-blau); color: #fff; } #ptl .ptl-wegwahl__hinweis { margin: 10px 0 0; font-size: 13px; color: var(--ptl-grau); } /* ------------------------------------------------------------------ */ /* Phase 3: Weltkarte der Auslandsstandorte (Abzweig an Station 5) */ /* Liste steht im HTML; Karte, Suche, Kachel und Flug aus weltkarte.js */ /* ------------------------------------------------------------------ */ #ptl .ptl-abzweig { margin: 30px 0 0; background: var(--ptl-navy); color: #fff; } #ptl .ptl-abzweig summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; } #ptl .ptl-abzweig summary::-webkit-details-marker { display: none; } #ptl .ptl-abzweig summary::after { content: ">"; margin-left: auto; font-family: var(--ptl-pixel); font-size: 18px; color: var(--ptl-akzent); animation: ptl-blinken 1s steps(2) infinite; } #ptl .ptl-abzweig[open] summary::after { content: "v"; animation: none; } #ptl .ptl-abzweig summary:hover b, #ptl .ptl-abzweig summary:focus-visible b { text-decoration: underline; text-underline-offset: 4px; } #ptl .ptl-abzweig summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-abzweig summary b { display: block; font: 800 21px/1.15 var(--ptl-kopf); letter-spacing: .01em; } #ptl .ptl-abzweig summary small { display: block; margin-top: 4px; font: 500 13.5px/1.35 var(--ptl-fein); color: #d9e0d2; } #ptl .ptl-abzweig__schild { flex: none; width: 36px; height: 36px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23c7a86b' d='M5 4h2v8H5z'/%3E%3Cpath fill='%23e9d3a1' d='M2 0h7l2 2-2 2H2zM10 5H3L1 7l2 2h7z'/%3E%3Cpath fill='%230f1520' d='M4 2h4v1H4zM4 7h4v1H4z' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } #ptl .ptl-weltkarte { padding: 20px; background: var(--ptl-creme); color: var(--ptl-text); } #ptl .ptl-weltkarte.ist-bereit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 22px; align-items: start; } #ptl .ptl-weltkarte__intro, #ptl .ptl-weltkarte__leiste, #ptl .ptl-weltkarte__stand, #ptl .ptl-weltkarte__leer { grid-column: 1 / -1; } #ptl .ptl-weltkarte__intro { margin: 0 0 14px; max-width: 760px; font-size: 15.5px; line-height: 1.55; } #ptl .ptl-weltkarte.ist-bereit .ptl-weltkarte__intro { margin: 0; } #ptl .ptl-weltkarte__stand { margin: 14px 0 0; font-size: 13px; color: var(--ptl-grau); } #ptl .ptl-weltkarte.ist-bereit .ptl-weltkarte__stand { margin: 0; } #ptl .ptl-weltkarte__leer { margin: 0; font-size: 14.5px; } /* 08.10.2026 (Dunja): Abzweig direkt unter dem Szenenbild; Reiter Auslandsverwendung / Einsätze und Missionen */ #ptl .ptl-abzweig[data-abzweig="weltkarte"] { margin: 18px 0 28px; } #ptl .ptl-weltkarte__gruppen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 3px solid var(--ptl-navy); } #ptl .ptl-weltkarte__gruppen button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: var(--ptl-navy); font: 700 15px/1.2 var(--ptl-fein); text-transform: uppercase; letter-spacing: .03em; } #ptl .ptl-weltkarte__gruppen button small { margin-left: 4px; font-size: 12.5px; opacity: .75; } #ptl .ptl-weltkarte__gruppen button[aria-pressed="true"] { background: var(--ptl-navy); color: #fff; } #ptl .ptl-weltkarte__gruppen button:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-weltkarte__marker.ist-mandat::before { border-radius: 0; background: var(--ptl-navy); box-shadow: inset 0 0 0 6px var(--ptl-sand), 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-anerkannt::before { border-radius: 0; background: #fff; box-shadow: inset 0 0 0 6px var(--ptl-blau), 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-mandat:hover::before, #ptl .ptl-weltkarte__marker.ist-mandat:focus-visible::before { box-shadow: inset 0 0 0 6px var(--ptl-sand), 0 0 0 3px #fff, 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-anerkannt:hover::before, #ptl .ptl-weltkarte__marker.ist-anerkannt:focus-visible::before { box-shadow: inset 0 0 0 6px var(--ptl-blau), 0 0 0 3px #fff, 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-mandat.ist-aktiv::before { box-shadow: inset 0 0 0 6px var(--ptl-sand), 0 0 0 3px var(--ptl-blau-hell), 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-anerkannt.ist-aktiv::before { box-shadow: inset 0 0 0 6px var(--ptl-blau), 0 0 0 3px var(--ptl-blau-hell), 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__stecker.ist-mandat { border-radius: 0; background: var(--ptl-navy); box-shadow: inset 0 0 0 6px var(--ptl-sand); } #ptl .ptl-weltkarte__stecker.ist-anerkannt { border-radius: 0; background: #fff; box-shadow: inset 0 0 0 6px var(--ptl-blau); } #ptl .ptl-weltkarte__legende { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 600 13.5px/1.3 var(--ptl-fein); color: var(--ptl-navy); } #ptl .ptl-weltkarte__legende span { display: inline-flex; align-items: center; gap: 8px; } #ptl .ptl-weltkarte__legende i { width: 16px; height: 16px; } #ptl .ptl-weltkarte__legende i.ist-mandat { background: var(--ptl-navy); box-shadow: inset 0 0 0 3px var(--ptl-sand), 0 0 0 1px var(--ptl-navy); } #ptl .ptl-weltkarte__legende i.ist-anerkannt { background: #fff; box-shadow: inset 0 0 0 3px var(--ptl-blau); } #ptl .ptl-weltkarte__art.ist-mandat { background: var(--ptl-navy); color: #fff; } #ptl .ptl-weltkarte__art.ist-anerkannt { background: #dbe8f1; color: #0d4467; } @media (max-width: 600px) { #ptl .ptl-weltkarte__marker.ist-mandat::before, #ptl .ptl-weltkarte__marker.ist-anerkannt::before { box-shadow: inset 0 0 0 4px var(--ptl-sand), 2px 3px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-anerkannt::before { box-shadow: inset 0 0 0 4px var(--ptl-blau), 2px 3px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__gruppen button { flex: 1 1 auto; padding: 10px 10px; font-size: 13.5px; } } /* Werkzeugleiste: Ausschnitt, Suche, (Handy) Karte zeigen */ #ptl .ptl-weltkarte__leiste { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } #ptl .ptl-weltkarte__reiter { display: flex; gap: 6px; } #ptl .ptl-weltkarte__reiter button, #ptl .ptl-weltkarte__schalter { padding: 9px 14px; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: var(--ptl-navy); box-shadow: inset 0 0 0 2px var(--ptl-navy); font: 600 14px/1.2 var(--ptl-fein); text-transform: uppercase; letter-spacing: .03em; } #ptl .ptl-weltkarte__reiter button small { font-size: 12px; opacity: .75; } #ptl .ptl-weltkarte__reiter button[aria-pressed="true"] { background: var(--ptl-navy); color: #fff; } #ptl .ptl-weltkarte__reiter button:focus-visible, #ptl .ptl-weltkarte__schalter:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-weltkarte__suche { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border: 2px solid var(--ptl-navy); border-radius: 0; background: #fff; color: var(--ptl-navy); font: 500 15px/1.3 var(--ptl-fliess); } #ptl .ptl-weltkarte__suche:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 0; } /* Karte: Ebene je Ausschnitt, Marker in Prozent des Bildes */ #ptl .ptl-weltkarte__karte { position: relative; background: #355675; overflow: hidden; } #ptl .ptl-weltkarte__ebene { position: relative; width: 100%; } #ptl .ptl-weltkarte__ebene img { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #ptl .ptl-weltkarte__ort { position: absolute; width: 6px; height: 6px; transform: translate(-50%, -50%); pointer-events: none; background: var(--ptl-navy); box-shadow: 0 0 0 1px #fbefcf; } #ptl .ptl-weltkarte__ort.ist-aktiv { background: var(--ptl-blau-hell); width: 8px; height: 8px; } #ptl .ptl-weltkarte__marker { position: absolute; z-index: 2; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(calc(-50% + var(--ptl-dx, 0px)), calc(-50% + var(--ptl-dy, 0px))); } #ptl .ptl-weltkarte__marker::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--ptl-sand) center / 100% 100% no-repeat; image-rendering: pixelated; /* Flagge aus flaggen.css */ box-shadow: 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker:hover::before, #ptl .ptl-weltkarte__marker:focus-visible::before { box-shadow: 0 0 0 3px #fff, 3px 5px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-aktiv { z-index: 3; } #ptl .ptl-weltkarte__marker.ist-aktiv::before { box-shadow: 0 0 0 3px var(--ptl-blau-hell), 3px 5px 0 1px rgba(15, 21, 32, .35); } @media (max-width: 600px) { /* Handy: Karte ist ~330 px breit, Benelux-Flaggen ueberlappen sonst */ #ptl .ptl-weltkarte__marker { width: 30px; height: 30px; } #ptl .ptl-weltkarte__marker::before { width: 20px; height: 20px; margin: -10px 0 0 -10px; } #ptl .ptl-weltkarte__marker:hover::before, #ptl .ptl-weltkarte__marker:focus-visible::before { box-shadow: 0 0 0 2px #fff, 2px 3px 0 1px rgba(15, 21, 32, .35); } #ptl .ptl-weltkarte__marker.ist-aktiv::before { box-shadow: 0 0 0 2px var(--ptl-blau-hell), 2px 3px 0 1px rgba(15, 21, 32, .35); } } #ptl .ptl-weltkarte__marker.ist-gelandet::before { animation: ptl-landen .6s steps(4); } #ptl .ptl-weltkarte__marker.ist-blass { opacity: .3; } #ptl .ptl-weltkarte__marker:focus-visible { outline: 0; } @keyframes ptl-landen { 0% { transform: translateY(-8px); } 50% { transform: translateY(2px); } 100% { transform: none; } } #ptl .ptl-weltkarte__name { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); pointer-events: none; padding: 3px 7px; background: var(--ptl-navy); color: #fff; white-space: nowrap; font: 600 13px/1.2 var(--ptl-fein); opacity: 0; } #ptl .ptl-weltkarte__marker.ist-rechts .ptl-weltkarte__name { left: auto; right: 0; transform: none; } #ptl .ptl-weltkarte__marker.ist-links .ptl-weltkarte__name { left: 0; transform: none; } #ptl .ptl-weltkarte__marker:hover .ptl-weltkarte__name, #ptl .ptl-weltkarte__marker:focus-visible .ptl-weltkarte__name, #ptl .ptl-weltkarte__marker.ist-aktiv .ptl-weltkarte__name { opacity: 1; } /* Flug */ #ptl .ptl-weltkarte__flug { position: absolute; inset: 0; z-index: 4; pointer-events: none; } #ptl .ptl-weltkarte__flug canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #ptl .ptl-weltkarte__flug button { position: absolute; right: 10px; bottom: 10px; pointer-events: auto; cursor: pointer; padding: 8px 12px; border: 0; border-radius: 0; background: var(--ptl-navy); color: #fff; font: 600 13px/1.2 var(--ptl-fein); text-transform: uppercase; letter-spacing: .03em; } #ptl .ptl-weltkarte__flug button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Laenderliste (wie Ratgeber-Kacheln, aber eigene Klasse: kein „gelesen", nicht im Suchindex des Kopfes) */ #ptl .ptl-weltkarte__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } #ptl .ptl-weltkarte__liste li { margin: 0; } #ptl .ptl-weltkarte__land { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: #fff; border: 2px solid var(--ptl-rand); text-decoration: none; transition: transform .12s steps(2), border-color .12s steps(2), box-shadow .12s steps(2); } #ptl .ptl-weltkarte__land:hover, #ptl .ptl-weltkarte__land:focus-visible, #ptl .ptl-weltkarte__liste li.ist-aktiv .ptl-weltkarte__land { transform: translate(-2px, -2px); border-color: var(--ptl-navy); box-shadow: 4px 4px 0 var(--ptl-navy); outline: 0; } #ptl .ptl-weltkarte__land b { display: block; font: 700 16px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-weltkarte__land small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--ptl-fein); color: var(--ptl-grau); } #ptl .ptl-weltkarte__stecker { width: 30px; height: 30px; border-radius: 50%; background: var(--ptl-sand) center / 100% 100% no-repeat; image-rendering: pixelated; } #ptl .ptl-weltkarte__liste li.ist-aktiv .ptl-weltkarte__stecker { box-shadow: 0 0 0 3px var(--ptl-blau-hell); } /* Kachel eines Landes (unter der Zeile in der Liste) */ #ptl .ptl-weltkarte__detail { position: relative; margin: 2px 0 6px; padding: 16px 18px 18px; background: #fff; border: 2px solid var(--ptl-navy); box-shadow: 4px 4px 0 var(--ptl-navy); } #ptl .ptl-weltkarte__detail:focus { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-weltkarte__detail:focus:not(:focus-visible) { outline: 0; } #ptl .ptl-weltkarte__detail h4 { margin: 0 32px 6px 0; font: 800 23px/1.1 var(--ptl-kopf); color: var(--ptl-navy); } #ptl .ptl-weltkarte__detail p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ptl-text); } #ptl .ptl-weltkarte__detail ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; } #ptl .ptl-weltkarte__detail li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0; font-size: 14px; line-height: 1.45; } #ptl .ptl-weltkarte__detail li b { color: var(--ptl-navy); } #ptl .ptl-weltkarte__art { align-self: start; padding: 2px 6px; background: #e4ead9; color: #3d4726; font: 600 11.5px/1.3 var(--ptl-fein); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } #ptl .ptl-weltkarte__was { grid-column: 1 / -1; color: var(--ptl-text); } #ptl .ptl-weltkarte__weiter { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--ptl-blau); color: #fff; text-decoration: none; box-shadow: inset 0 -3px 0 #0b3d5d; font: 600 14px/1.25 var(--ptl-fein); text-transform: uppercase; letter-spacing: .02em; } #ptl .ptl-weltkarte__weiter i { width: 0; height: 0; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } #ptl .ptl-weltkarte__weiter:hover, #ptl .ptl-weltkarte__weiter:focus-visible { background: var(--ptl-blau-hover); outline: 2px solid var(--ptl-navy); outline-offset: 2px; } #ptl .ptl-weltkarte__bald { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--ptl-grau) !important; } #ptl .ptl-weltkarte__zu { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 26px/1 var(--ptl-kopf); color: var(--ptl-navy); } #ptl .ptl-weltkarte__zu:focus-visible { outline: 3px solid var(--ptl-blau-hell); } @media (min-width: 701px) { #ptl .ptl-weltkarte__schalter { display: none; } } @media (max-width: 700px) { #ptl .ptl-abzweig { margin-top: 24px; } #ptl .ptl-abzweig summary { padding: 12px 14px; gap: 12px; } #ptl .ptl-abzweig summary b { font-size: 18px; } #ptl .ptl-abzweig__schild { width: 28px; height: 28px; } #ptl .ptl-weltkarte { padding: 14px 12px; } #ptl .ptl-weltkarte.ist-bereit { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } #ptl .ptl-weltkarte:not(.zeigt-karte) .ptl-weltkarte__karte, #ptl .ptl-weltkarte:not(.zeigt-karte) .ptl-weltkarte__reiter { display: none; } #ptl .ptl-weltkarte__schalter { flex: 1 1 100%; } #ptl .ptl-weltkarte__detail { padding: 14px 14px 16px; } #ptl .ptl-weltkarte__weiter { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-abzweig summary::after, #ptl .ptl-weltkarte__marker.ist-gelandet::before { animation: none; } } /* ------------------------------------------------------------------ */ /* Phase 4: Ordensspange in der Checkliste + Urkunden-Dialog */ /* ------------------------------------------------------------------ */ #ptl .ptl-liste__spange { margin-top: 18px; padding-top: 14px; border-top: 2px solid rgba(15, 21, 32, .12); } #ptl .ptl-liste__spange h3 { margin: 0 0 8px; font: 700 15.5px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-liste__spange .ptl-knopf { width: 100%; margin-top: 8px; } #ptl .ptl-liste__spange .ptl-liste__klein { margin: 6px 0 0; } /* Stueck Uniformstoff (Koeper) mit Naht, darauf die Baender dicht an dicht */ #ptl .ptl-spange { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 2px; margin: 0; padding: 12px; list-style: none; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 6px), #1f2a3d; outline: 2px dashed rgba(0, 0, 0, .35); outline-offset: -6px; box-shadow: 0 3px 8px rgba(15, 21, 32, .35); } #ptl .ptl-spange__band { position: relative; height: 20px; margin: 0; border-radius: 2px; display: grid; place-items: center; background: rgba(0, 0, 0, .28); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .45); font: 600 11px/1 var(--ptl-fein); color: #c3ccd8; } #ptl .ptl-spange__band::after { /* abgesteppte Naht des Leerplatzes */ content: ""; position: absolute; inset: 3px 4px; border: 1px dashed rgba(205, 215, 227, .45); border-radius: 1px; } #ptl .ptl-spange__band.ist-entfallen { background: rgba(0, 0, 0, .14); box-shadow: none; color: rgba(195, 204, 216, .6); } #ptl .ptl-spange__band.ist-entfallen::after { display: none; } #ptl .ptl-spange__band.ist-fertig { background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .1) 20%, transparent 50%, rgba(0, 0, 0, .18) 82%, rgba(0, 0, 0, .45)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .13) 0 1px, rgba(255, 255, 255, .07) 1px 2px, transparent 2px 3px), linear-gradient(90deg, var(--a) 0 22%, var(--b) 22% 32%, var(--a) 32% 68%, var(--b) 68% 78%, var(--a) 78%); box-shadow: 1px 3px 4px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .45); } #ptl .ptl-spange__band.ist-fertig::after { display: none; } #ptl .ptl-urkunde { position: fixed; inset: 0; z-index: 74; display: grid; place-items: center; padding: 16px; padding-top: var(--ptl-oben-frei, 16px); background: rgba(15, 21, 32, .78); } #ptl .ptl-urkunde__karte { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 16px - var(--ptl-oben-frei, 16px)); overflow-y: auto; margin: 0; padding: 20px 22px 18px; background: var(--ptl-creme); color: var(--ptl-navy); } #ptl .ptl-urkunde__kopf { padding-right: 48px; } #ptl .ptl-urkunde h2 { margin: 0; font: 800 28px/1.05 var(--ptl-kopf); color: var(--ptl-navy); } #ptl .ptl-urkunde__zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; cursor: pointer; background: transparent; color: var(--ptl-navy); font: 700 28px/1 var(--ptl-fliess); } #ptl .ptl-urkunde__zu:focus-visible { outline: 3px solid var(--ptl-blau); } #ptl .ptl-urkunde__vorschau { margin: 14px 0 12px; display: grid; place-items: center; } #ptl .ptl-urkunde__vorschau canvas { display: block; max-width: 100%; max-height: 46vh; max-height: 46dvh; width: auto; height: auto; box-shadow: 0 4px 12px rgba(15, 21, 32, .35); } #ptl .ptl-urkunde__formate { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } #ptl .ptl-urkunde__formate legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; font: 700 15px/1.3 var(--ptl-fliess); } #ptl .ptl-urkunde__details { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 8px 0 0; font: 600 15px/1.3 var(--ptl-fliess); cursor: pointer; } #ptl .ptl-urkunde__details input { width: 20px; height: 20px; accent-color: var(--ptl-navy); } #ptl .ptl-urkunde__fest { margin: 8px 0 12px; font-size: 13px; line-height: 1.45; color: var(--ptl-grau); } #ptl .ptl-urkunde__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } #ptl .ptl-urkunde__knoepfe .ptl-knopf { flex: 1 1 150px; min-height: 44px; } #ptl .ptl-urkunde__meldung { margin: 10px 0 0; min-height: 1.4em; font: 600 14px/1.4 var(--ptl-fliess); color: var(--ptl-blau); } /* ------------------------------------------------------------------ */ /* Phase 5: FAQ „Was passiert, wenn …?" (Markup aus baue.py, Filter in profil-ui.js) */ #ptl .ptl-faq { padding: 56px 0 8px; } #ptl .ptl-faq h2 { margin: 0 0 10px; font-family: var(--ptl-pixel); font-size: 14px; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-faq__lead { margin: 0 0 20px; max-width: 640px; font: 400 16px/1.55 var(--ptl-fliess); color: var(--ptl-text); } #ptl .ptl-faq__werkzeug { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; } #ptl .ptl-faq__feld { display: grid; gap: 6px; min-width: 0; } #ptl .ptl-faq__feld label { font: 600 13.5px/1.2 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-faq__feld input, #ptl .ptl-faq__feld select { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; margin: 0; background: #fff; border: 2px solid var(--ptl-rand); border-radius: 0; color: var(--ptl-navy); font: 400 16px/1.2 var(--ptl-fliess); } #ptl .ptl-faq__feld input:focus-visible, #ptl .ptl-faq__feld select:focus-visible { border-color: var(--ptl-navy); outline: 2px solid var(--ptl-blau); outline-offset: 2px; } #ptl .ptl-faq__wahl { display: flex; } #ptl .ptl-faq__wahl button { min-height: 46px; padding: 10px 14px; margin: 0; background: #fff; color: var(--ptl-navy); border: 2px solid var(--ptl-navy); border-radius: 0; font: 600 14.5px/1.2 var(--ptl-fliess); cursor: pointer; } #ptl .ptl-faq__wahl button + button { border-left: 0; } #ptl .ptl-faq__wahl button[aria-pressed="true"] { background: var(--ptl-navy); color: #fff; } #ptl .ptl-faq__wahl button:focus-visible { outline: 2px solid var(--ptl-blau); outline-offset: 2px; position: relative; } #ptl .ptl-faq__zahl { margin: 18px 0 10px; font: 600 13.5px/1.2 var(--ptl-fliess); color: var(--ptl-grau); } #ptl .ptl-faq__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #ptl .ptl-faq__eintrag { background: #fff; border: 2px solid var(--ptl-rand); } #ptl .ptl-faq__eintrag[open] { border-color: var(--ptl-navy); box-shadow: 4px 4px 0 var(--ptl-navy); } #ptl .ptl-faq__eintrag summary { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; box-sizing: border-box; padding: 14px 18px; font: 600 16px/1.45 var(--ptl-fliess); color: var(--ptl-navy); cursor: pointer; list-style: none; } #ptl .ptl-faq__eintrag summary::-webkit-details-marker { display: none; } #ptl .ptl-faq__eintrag summary::before { content: "+"; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; background: var(--ptl-navy); color: #fff; font: 700 16px/22px var(--ptl-pixel); text-align: center; } #ptl .ptl-faq__eintrag[open] summary::before { content: "–"; background: var(--ptl-blau); } #ptl .ptl-faq__eintrag summary span { flex: 1 1 auto; min-width: 0; hyphens: auto; overflow-wrap: break-word; } #ptl .ptl-faq__antwort p { hyphens: auto; overflow-wrap: break-word; } #ptl .ptl-faq__eintrag summary:focus-visible { outline: 2px solid var(--ptl-blau); outline-offset: -4px; } #ptl .ptl-faq__entwurf { flex: 0 0 auto; padding: 3px 7px; background: var(--ptl-sand); color: var(--ptl-navy); font: 700 11px/1.2 var(--ptl-fein); text-transform: uppercase; } #ptl .ptl-faq__antwort { padding: 0 18px 16px 52px; } #ptl .ptl-faq__antwort p { margin: 0 0 10px; max-width: 720px; font: 400 15.5px/1.6 var(--ptl-fliess); color: var(--ptl-text); } #ptl .ptl-faq__antwort a { color: var(--ptl-blau); text-decoration: underline; text-underline-offset: 2px; } #ptl .ptl-faq__mehr { font-weight: 600 !important; } #ptl .ptl-faq__quellen { font-size: 13.5px !important; color: #4f5a6e !important; } #ptl .ptl-faq__leer { margin: 8px 0 0; font: 400 15px/1.5 var(--ptl-fliess); color: var(--ptl-text); } #ptl .ptl-faq__leer button { min-height: 44px; margin-left: 6px; padding: 8px 12px; background: #fff; border: 2px solid var(--ptl-navy); border-radius: 0; font: 600 14.5px/1.2 var(--ptl-fliess); color: var(--ptl-navy); cursor: pointer; } #ptl .ptl-faq__hinweis { margin: 16px 0 0; font: 400 13.5px/1.5 var(--ptl-fliess); color: #4f5a6e; } @media (max-width: 760px) { #ptl .ptl-faq__werkzeug { grid-template-columns: 1fr; } #ptl .ptl-faq__wahl button { flex: 1 1 50%; } #ptl .ptl-faq__antwort { padding: 0 14px 14px 14px; } #ptl .ptl-faq__eintrag summary { padding: 12px 14px; } } @media (prefers-reduced-motion: reduce) { #ptl .ptl-faq__eintrag { transition: none; } } /* Phase 5: Rückmeldeknopf (Dialog nutzt die Urkunden-Hülle .ptl-urkunde) */ #ptl .ptl-rm { padding-top: 22px; } #ptl .ptl-rm__knopf { min-height: 44px; padding: 10px 0; margin: 0; background: none; border: 0; cursor: pointer; font: 600 16px/1.3 var(--ptl-fliess); color: var(--ptl-blau); text-decoration: underline; text-underline-offset: 3px; } #ptl .ptl-rm__knopf:hover { color: var(--ptl-navy); } #ptl .ptl-rm__knopf:focus-visible { outline: 3px solid var(--ptl-navy); outline-offset: 2px; } #ptl .ptl-rm-dlg h2 { font-size: 24px; line-height: 1.15; } #ptl .ptl-rm__lead { margin: 10px 0 14px; font: 400 15.5px/1.55 var(--ptl-fliess); color: var(--ptl-text); } #ptl .ptl-rm__label { display: block; margin: 12px 0 6px; font: 700 14.5px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-rm-dlg textarea, #ptl .ptl-rm-dlg select { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; margin: 0; background: #fff; border: 2px solid var(--ptl-rand); border-radius: 0; color: var(--ptl-navy); font: 400 16px/1.45 var(--ptl-fliess); } #ptl .ptl-rm-dlg textarea { resize: vertical; min-height: 120px; } #ptl .ptl-rm-dlg textarea:focus-visible, #ptl .ptl-rm-dlg select:focus-visible { border-color: var(--ptl-navy); outline: 2px solid var(--ptl-blau); outline-offset: 2px; } #ptl .ptl-rm__zahl { margin: 4px 0 0; text-align: right; font: 600 13px/1.2 var(--ptl-fliess); color: #4f5a6e; } #ptl .ptl-rm__hinweis { margin: 14px 0 14px; font: 400 14px/1.5 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-rm__hinweis a { color: var(--ptl-blau); text-decoration: underline; } #ptl .ptl-urkunde__meldung.ist-fehler { color: #9b2c1f; } /* Mitnahme-Code (29.09.2026): Dialog nutzt die Urkunden-Huelle .ptl-urkunde wie der Rueckmeldeknopf */ #ptl .ptl-liste__mitnahme { margin: 14px 0 0; font: 400 14.5px/1.5 var(--ptl-fliess); } #ptl .ptl-liste__mitnahme .ptl-link, #ptl .ptl-blatt__datenschutz [data-mitnahme] { margin-left: 0; min-height: 44px; } #ptl .ptl-blatt__datenschutz [data-mitnahme] { margin-left: 8px; } #ptl .ptl-mn__qr { width: min(260px, 68vw); margin: 4px auto 6px; padding: 6px; background: #fff; box-shadow: inset 0 0 0 2px var(--ptl-navy); } #ptl .ptl-mn__qr svg { display: block; width: 100%; height: auto; } #ptl .ptl-mn__link { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0 0 12px; padding: 8px 10px; border: 2px solid #4f5a6e; background: #fff; font: 400 14px/1.3 var(--ptl-fliess); color: var(--ptl-navy); text-overflow: ellipsis; } #ptl .ptl-mn__link:focus-visible { border-color: var(--ptl-navy); outline: 2px solid var(--ptl-blau); outline-offset: 2px; } #ptl .ptl-mn a.ptl-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ---- 03.10.2026 Ratgeber-Konzept (Agent A): D-03, R-09, Zwei-Fragen-Karte, Dienstweg-Akte ---- */ /* HUD: besucht (Umriss) und verdient (voll) getrennt */ #ptl .ptl-hud__balken button.ist-erreicht { background: #33455f; box-shadow: inset 0 0 0 2px var(--ptl-akzent); } #ptl .ptl-hud__balken button.ist-verdient { background: var(--ptl-akzent); box-shadow: none; } #ptl .ptl-hud__balken button.ist-aktuell { background: #fff; } #ptl .ptl-hud__gel[hidden] { display: none; } /* R-09: an Station 9 keine Zähler im HUD, keine Etappen und keine Spange in der Liste */ #ptl .ptl-hud.ist-still .ptl-hud__werte, #ptl .ptl-hud.ist-still .ptl-hud__balken { visibility: hidden; } #ptl .ptl-liste.ist-still .ptl-liste__stand, #ptl .ptl-liste.ist-still .ptl-liste__spange { display: none; } /* Karte im Kopf: besucht leise, verdient mit Haken */ #ptl .ptl-karte a.ist-besucht:not(.ist-erreicht) span { color: #fff; } /* Zwei-Fragen-Karte */ #ptl .ptl-zwei .ptl-blatt__karte { width: min(620px, 100%); } #ptl .ptl-zwei__text { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ptl-text); } #ptl .ptl-zwei .ptl-feld { margin-top: 16px; } #ptl .ptl-zwei__fuss { align-items: center; justify-content: space-between; } #ptl .ptl-zwei__fuss .ptl-link { margin: 0; min-height: 44px; } #ptl .ptl-zwei__fuss .ptl-knopf[disabled] { opacity: .45; cursor: not-allowed; } @media (max-width: 720px) { #ptl .ptl-zwei .ptl-chip span { min-height: 40px; padding: 6px 10px; font-size: 14px; } #ptl .ptl-zwei .ptl-feld { margin-top: 12px; } #ptl .ptl-zwei__fuss { flex-direction: column-reverse; align-items: stretch; } } /* Lieferung 2: Lagebild (E-14), Probe (E-13), Kalender (E-12), Weitergeben (E-11) */ #ptl .ptl-lage { margin: 10px 0 2px; padding: 10px 12px; background: #fff; border: 2px solid rgba(15, 21, 32, .14); } #ptl .ptl-lage p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ptl-navy); } #ptl .ptl-lage__weiter { margin-top: 6px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } #ptl .ptl-lage__weiter small { color: var(--ptl-grau); } #ptl .ptl-lage__weiter .ptl-link { margin: 0; } #ptl .ptl-karte a.ist-angefangen { box-shadow: inset 0 -3px 0 var(--ptl-akzent); } #ptl .ptl-karte a.ist-geregelt { background: rgba(156, 175, 136, .32); } #ptl .ptl-probe { margin: 4px 0 12px; padding: 10px 12px; border: 2px dashed rgba(15, 21, 32, .25); background: #fff; } #ptl .ptl-probe p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--ptl-navy); } #ptl .ptl-probe.ist-bestanden { margin: 4px 0 12px; border-style: solid; border-color: var(--ptl-akzent); font-size: 14.5px; color: var(--ptl-navy); } #ptl .ptl-chips--stapel { flex-direction: column; align-items: stretch; } #ptl .ptl-chips--stapel .ptl-chip span { width: 100%; } #ptl .ptl-probe__frage legend { font-weight: 700; } #ptl .ptl-probe__erkl { margin: 8px 0 0; padding: 8px 10px; font-size: 14px; line-height: 1.45; background: #fff; color: var(--ptl-navy); } #ptl .ptl-probe__frage.ist-richtig .ptl-probe__erkl { border: 2px solid var(--ptl-akzent); } #ptl .ptl-probe__frage.ist-falsch .ptl-probe__erkl { border: 2px solid #b4441e; } #ptl .ptl-probe__ergebnis { margin: 16px 0 0; font: 700 15.5px/1.4 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-kal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; grid-column: 1 / -1; margin-top: 6px; font-size: 14px; color: var(--ptl-navy); } #ptl .ptl-kal .ptl-link { margin: 0; min-height: 32px; } #ptl .ptl-kal input[type="date"] { min-height: 40px; padding: 6px 8px; border: 2px solid rgba(15, 21, 32, .3); font: 500 15px var(--ptl-fliess); } #ptl .ptl-kal small { flex-basis: 100%; color: var(--ptl-grau); } #ptl .ptl-liste__weitergeben { margin: 10px 0 0; } #ptl .ptl-liste__weitergeben .ptl-link { margin: 0; min-height: 44px; } #ptl .ptl-liste.ist-still .ptl-lage, #ptl .ptl-liste.ist-still .ptl-liste__weitergeben { display: none; } /* ---- Nachtrag 07.10.2026 (SPIELOEKONOMIE § 9): Nachweis statt Abhaken, Vormerken, Nächste Schritte (E-39) ---- */ #ptl .ptl-punkt { grid-template-columns: 22px minmax(0, 1fr); align-items: start; } #ptl .ptl-punkt:focus { outline: none; } #ptl .ptl-punkt:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-punkt__marke { width: 18px; height: 18px; margin-top: 1px; border: 2px solid var(--ptl-navy); background: #fff; } #ptl .ptl-punkt.ist-ja .ptl-punkt__marke { background: var(--ptl-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } #ptl .ptl-punkt.ist-vor .ptl-punkt__marke { border-color: var(--ptl-blau); background: #fff linear-gradient(var(--ptl-blau), var(--ptl-blau)) center / 8px 8px no-repeat; } #ptl .ptl-punkt.ist-pruefen .ptl-punkt__marke { border-style: dashed; } #ptl .ptl-punkt__text { font-size: 15px; line-height: 1.3; } #ptl .ptl-punkt__text b { color: var(--ptl-navy); } #ptl .ptl-punkt.ist-ja .ptl-punkt__text b { color: var(--ptl-grau); } #ptl .ptl-punkt__text > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ptl-text); } #ptl .ptl-punkt__herkunft { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ptl-grau); } #ptl .ptl-punkt__zustand.ist-ja { background: #e3e9dc; color: #3d4726; } #ptl .ptl-punkt__zustand.ist-vor { background: #dbe8f1; color: #0d4467; } #ptl .ptl-punkt__zustand.ist-pruefen { background: #f1ead8; color: #5a4a1c; } #ptl .ptl-punkt__knoepfe, #ptl .ptl-erklaerung, #ptl .ptl-punkt .ptl-kal { grid-column: 2; } #ptl .ptl-punkt__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } #ptl .ptl-punkt__knoepfe:empty { display: none; } #ptl .ptl-punkt__knoepfe .ptl-knopf, #ptl .ptl-erklaerung .ptl-knopf { min-height: 40px; padding: 0 12px; font-size: 14px; text-decoration: none; } #ptl .ptl-punkt__merk[aria-pressed="true"] { background: #dbe8f1; color: #0d4467; box-shadow: inset 0 0 0 2px var(--ptl-blau); } #ptl .ptl-punkt__zurueck { margin: 0; min-height: 32px; font-size: 13px; color: var(--ptl-grau); } #ptl .ptl-erklaerung summary { cursor: pointer; padding: 6px 0; font-family: var(--ptl-fein); font-size: 13.5px; font-weight: 600; color: var(--ptl-blau); } #ptl .ptl-erklaerung summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); } #ptl .ptl-erklaerung p { margin: 2px 0 8px; font-size: 14px; line-height: 1.45; color: var(--ptl-text); } /* 07.10.2026 Kurzfrage vorne (Prüfstand-Vorschlag 8): Frage im Schritt, Antworten wie die Chips der Zwei-Fragen-Karte */ #ptl .ptl-kf { grid-column: 2; min-width: 0; margin: 8px 0 2px; padding: 10px 12px; border: 2px dashed rgba(15, 21, 32, .25); background: #fff; } #ptl .ptl-kf legend { padding: 0 4px; font: 700 14.5px/1.35 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-kf__wahl { display: grid; gap: 6px; margin-top: 4px; } #ptl .ptl-kf__antwort { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer; background: #fff; border: 2px solid rgba(15, 21, 32, .28); border-radius: 0; font: 600 14.5px/1.3 var(--ptl-fliess); color: var(--ptl-navy); } #ptl .ptl-kf__antwort:hover:not(:disabled) { border-color: var(--ptl-navy); } #ptl .ptl-kf__antwort:focus-visible { outline: 3px solid var(--ptl-blau-hell); outline-offset: 2px; } #ptl .ptl-kf__antwort:disabled { cursor: default; color: var(--ptl-text); } #ptl .ptl-kf__antwort.ist-falsch { border-style: dashed; border-color: #b4441e; } #ptl .ptl-kf__rueck { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--ptl-navy); } #ptl .ptl-kf__rueck:focus { outline: none; } #ptl .ptl-kf__danach { margin: 12px 0 0; padding: 8px 10px; border: 2px solid var(--ptl-akzent); background: #fff; font-size: 14px; line-height: 1.45; color: var(--ptl-navy); } #ptl .ptl-kf__danach a { color: var(--ptl-blau); font-weight: 700; } #ptl .ptl-punkt__weiss[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ptl-blau); } /* 22.10.2026 Stufenplan (SPIELOEKONOMIE § 13, E-49): einmaliger Vorschlag der vollen Stationsliste nach dem dritten Nachweis, ruhig wie die Rückmeldung der Kurzfrage, keine Bewegung */ #ptl .ptl-aufstieg { margin: 12px 0 0; padding: 10px 12px; border: 2px solid var(--ptl-akzent); background: #fff; font-size: 14px; line-height: 1.45; color: var(--ptl-navy); } #ptl .ptl-aufstieg p { margin: 0; } #ptl .ptl-aufstieg .ptl-aufstieg__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; } #ptl .ptl-aufstieg .ptl-aufstieg__spaeter { min-height: 44px; margin: 0; padding: 0 4px; } /* Nächste Schritte: höchstens drei, der Rest zugeklappt */ #ptl .ptl-schritte__titel { margin: 14px 0 2px; font-family: var(--ptl-fein); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ptl-navy); } #ptl .ptl-schritte { margin: 0; padding: 0; list-style: none; } #ptl .ptl-schritte__regel { margin: 8px 0 0; } #ptl .ptl-alle { margin-top: 14px; border-top: 2px solid rgba(15, 21, 32, .14); } #ptl .ptl-alle summary { padding: 12px 0 6px; cursor: pointer; font-family: var(--ptl-fein); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--ptl-blau); } #ptl .ptl-alle summary:focus-visible { outline: 3px solid var(--ptl-blau-hell); } #ptl .ptl-alle h4 { margin: 12px 0 2px; } #ptl .ptl-punkte--kompakt { margin: 0; padding: 0; list-style: none; } #ptl .ptl-punkt.ist-kompakt { padding: 8px 0; } #ptl .ptl-punkt.ist-kompakt .ptl-punkt__text { font-size: 14.5px; } @media (min-width: 601px) { #ptl .ptl-punkt.ist-kompakt { grid-template-columns: 22px minmax(0, 1fr) auto; } #ptl .ptl-punkt.ist-kompakt .ptl-punkt__knoepfe { grid-column: 3; grid-row: 1; margin-top: 0; justify-content: flex-end; } #ptl .ptl-punkt.ist-kompakt .ptl-erklaerung { grid-column: 2 / 4; } } /* 07.10.2026 (Rückblick „Hab ich schon geregelt“): Ab drei Knöpfen stehen sie unter dem Titel, sonst bleibt dem Titel in der schmalen Liste keine Breite (er lief Buchstabe für Buchstabe senkrecht). Gilt auch für „vermutlich erledigt“ mit drei Knöpfen. */ @media (min-width: 601px) { #ptl .ptl-punkt.ist-kompakt:has(.ptl-punkt__knoepfe > :nth-child(3)) { grid-template-columns: 22px minmax(0, 1fr); } #ptl .ptl-punkt.ist-kompakt:has(.ptl-punkt__knoepfe > :nth-child(3)) .ptl-punkt__knoepfe { grid-column: 2; grid-row: auto; margin-top: 4px; justify-content: flex-start; } } @media (max-width: 600px) { #ptl .ptl-punkt__knoepfe .ptl-knopf, #ptl .ptl-erklaerung .ptl-knopf { min-height: 44px; } } /* Station 9: leiser Verweis statt Partnerblock (20.10.2026, Strategie-Call Moritz Heilfort 19.10.; Vereine im Abschnitt „Engagement“ auf /ueber-uns/) */ #ptl .ptl-partner-verweis { max-width: 62ch; margin: 20px 0 0; font-size: 15px; line-height: 1.55; } #ptl .ptl-partner-verweis a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Pixel-Icons, erzeugt mit icons.py */ #ptl .ptl-kachel__icon { display: inline-block; background: center / contain no-repeat; image-rendering: pixelated; } #ptl .ptl-icon--klemmbrett { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoUlEQVR42mNkwAH4RRX+I/M/vn7AiE0dIy4N3f1TURSWFmYzYDOQEaa52lUMLtm6+xVWV6Gr+fj6ASMLii1LT0JoBvygO9oczmZioBCwYBMs6A5jmFC6ikEwvBlD7v3KWtwGFHSHMTAwMDBMKF2FVTE2gOIFmEZSAEYYkGrIaBhgCYP0ok4GBgYGhpl95ShhgMs7WPMCMQCWF3DmRkIAlr0BbalGgyVJ9lEAAAAASUVORK5CYII="); } #ptl .ptl-icon--stoppuhr { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkElEQVR42mNkwAH4RRX+I/M/vn7AiE0dEwMesNFQimGjoRQD2YBfVOE/ukvQASMxzifkDQwb7z998x8d3H/65j9eF+HSKBDWhNUgrIGoICVMMFzQ1TDBbL9w4QzRgXvhwhl4OLEQY7tgeDOc/X5lLaZaXP7HBdDDAW4IsQBnID549pag//GqIScdUDclDggAAAZ13gPFl+sSAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--sparschwein { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAsElEQVR42mNkwAH4RRX+w9gfXz9gxKWOiQEPuLWvkYEQwGvAvaunCBrAiMvZuAC6dxiRNd/u6yVoo2pRMYpBTMRqhmm83dfLcLuvF+5aJgYiAboFu5KzGPhFFf4z8Ysq/N+VnMVALmAkxf/oXvr4+gEj3Av3r94lWjOyWiZYiLrNnUaUIfev3mVwmzsNe+rkF1X4f7Ki6z+/qAJWDJND1sNCbILBlcgYic1AxGYu+gMAoURaBgj/J6sAAAAASUVORK5CYII="); } #ptl .ptl-icon--herzpuls { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAsUlEQVR42q1SKxbDIBBcePEoTBRXiE1FXCo5a2RcKqK5AioGxQm2ij7YsCR97Rg+szOwH4AfIdJGaYM5EYMX+Znju0QuQ184WweYglq8zMlp3T8By9DDNo9IX855pQ126WJad3g9H9XAFmTa1MR3IFtknhILpQ1y2OaxWCmUNshWmf6EpmjdATF4UczBVcGouKhBDF5Yd3wlPhXxyoSKq13gTGpito3UhBPfajE3yn/DG54ymGPGS/+2AAAAAElFTkSuQmCC"); } #ptl .ptl-icon--arztkoffer { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeElEQVR42mNgoBAwYhPkF1X4j0384+sHjESZis0AXIYy4pMkBD6+fsDIAuMklJqSpHlB92kGBgYGBiZKA5EFl8SE0lUo/ILuMKzqKHYBPITzu0L/Ewvyu0L/wwKeumGA7E+6hQHOWMBlI04Dbp94TX5moiQpU5wGANvTS85GaMhNAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--schirm { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkElEQVR42mNgwAP4RRX+84sq/MenhgWXRgYGBgaR7BkQgakZ/xkYGBg+vn7AiK6WEZ/Gt9dOoSj+v38eA7pBjMiacWlEB//3z4MbwkSqZgYGBgZGxyS4a5mQJYjRjGEYv6jCf0bHJAZywP/98yAGIDsNFlD4nE9IDUnpgImBQjAcDSAm4HDmBfQ8gSsDURUAAMGSO56A7NmdAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--zeitung { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVR42mNgoBAwMjAwMPCLKvwnVePH1w8Y4Rx+UYX/pAB+UYX/MEtZkE0VDG8maPP7lbUMDAwMDBcunGEwMDD5z4JNkhSAYsDspdtQJFOjvRjSizpRxGb2leM2ABtA14DXBdgAfV2QGu1FmQuwKSbJBdgU09wF8Lzw4dV9ohOPgJgiqgHkZCiUzEQJAADE12NAFlnz8QAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--pflaster { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVR42mNgGPKAkViF/KIK/5H5H18/YCTaAH5Rhf+39jWiiKk51TN8fP2AkYkUzfeuniLNC9hsRrYdrwH8ogr/L1w4gyFuYGAC18zAwMDAREjzi8P1ODXjtPn+0zco+PiK7P/osYA1DIjxMzpgIhTa+DTDXUCOzXgDkVjNKGGAK6nSHAAAgnVbT0GPRgcAAAAASUVORK5CYII="); } #ptl .ptl-icon--rechner { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjUlEQVR42mNkgAJ+UYX/DCSAj68fMDIwMDAwwjQzOiaRop/h//55DB9fP2BkQRckBiBbxoIu2TsrA6fGy7fPMizoPo0ixkSKs3VVjTHEMFxQnDaDpLBgweU3kgC/qMJ/gbCm/zCAj33Azer/ATer/7BoZ2KgEFCcDkj2wrzTL/7PO/1iOHmBYhcwUpqdAf+sp5OIurljAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--diagramm { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXklEQVR42mNgIBHwiyr8ZyAX8Isq/J+zvuM/siFMpGjunZXBwMDAwNA7K4M8l1DkAlyAhdgA+/j6ASM2NQRdIJI9A688db1AjJMJuqC7fypJLqDYCwNvACPFGWTAAQCpnR269fQvjQAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--haus { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmElEQVR42mNgoCXgF1X4zy+q8B+fGhZ8mjcaSjEwMDAw+J9n+P/x9QNGmDgDAwMDjM9ESDMDAwPDRkMpBlwuYSKkmZAhTMRoRjYE2fkoBhDSjMslTKRoxmYII6FoIjq+SQUwi1HSgWB4MwMDAwPD+5W1KBYIiCnC2R9e3ccfjbhAtasY4ZSIbjMxgInS8ENJ36QC5ARFNgAAAKNmMHnhL9oAAAAASUVORK5CYII="); } #ptl .ptl-icon--urkunde { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAv0lEQVR42mNkgAJ+UYX/DESAj68fMGKV4BdV+E8I8Isq/Ee3iAXdoPSiTgzDZ/aVw9kfXt1nEBBT/A9zCSOyCz68uo/X+QJiihjewTAAmwuwuUZATBE1PIgJA/TwIDoMcIUHybFAkQtw2kysC2BpAKYO5gImdIMEw5tRaFiIbzSUgmPk6MQw4P3KWgbB8GY4jQzsdx7FcDlRCQnmAhjwP/8Me0IilJFqRZkYml//g9MfXz9gZCGYy3BYQEg90QAA22PzNBogPN8AAAAASUVORK5CYII="); } #ptl .ptl-icon--karte { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAtElEQVR42mNkIBLwiyr8h7E/vn7ACGOzEKt5o6EUnO9/nuE/zBAmBhKA/c6jGGIkGXDQ3ZqBbMAvqvD/gJvVf+SwIMsQdDFGXBLEgI+vHzDCY6F3VgZcojhtBkP/thNwfqGXBYo8TA3JgYgNoBhQsvwXhgJstuM0oCeSDcUQZM3YDMfqhZ5INgZGxyQMm9ENx5uQ/u+fx8DomMRQsvwXiqaeSDYMtTjzAjbF2ADF6YDSWGQAAKR+QX5RJWBNAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--muenzen { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZklEQVR42mNgGGjASEgBv6jCf2ziH18/YCRoAL+owv9b+xqxyqk51TN8fP2AkYWQC+5dPYVXnoWQU5W0zXBo3YowAJdT1ZzqiXcBLoVEuQC3wq2jLqCGCzxytxLOC7gSEXKapxkAAMxmNQmfhCZdAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--koffer { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAc0lEQVR42mNgoBAwYhPkF1X4j0384+sHjESZis0AXIYy4pMkBD6+fsDIAuNUu4qRpLl19ysGBgYGBiZ0ifjKbJyasMkxUSUWqBoG8ZXZDAvbp6L4E58cCz4biAlY6oUBOdH48fUDRooDESO54jOMkPzAAAARQTEGtyU0hwAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--schildhaken { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAtklEQVR42mNkYGBg4BdV+M9ABvj4+gEjC4wjkj2DJM1vpmYwMDAwMLAgC769dooozcJaZnA2E6nOfr+yFoXPRIlmkgyAaRYMb8ZvADZbcGnG6QJkQ/BpZmBgYGCEMfhFFf6LZM9geHvtFIYrkDULa5kxvJmawfDx9QNGnC5A1oDLZgwXoLsCV/wj247hgo+vHzC+mZqBklDwacbqBWyG4NKM4QVs3oGle2yaCQJ+UYX/5OZUogEAeSFSMS6n8ekAAAAASUVORK5CYII="); } #ptl .ptl-icon--ordner { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVR42mNkQAL8ogr/GYgAH18/YISxWdAla0WZ8Gpufv0Phc+CTZGJjARWzWeevMAQw2qA/c6j2A3QVibOAAYGBob0ok4U/sy+cqzqcBqASwNRBhx0t2YgFuANcv/zzxj8zz8jzwD/888YPry6z/Dh1X28huAMg42GUgwCYopwNskGENJIVBhQHIh0MYCR0txIMQAAlxwnojcqDQcAAAAASUVORK5CYII="); } #ptl .ptl-icon--sanduhr { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAArklEQVR42mNkgAJ+UYX/DCSAj68fMDIwMDCwIAtWu4oRpbl19ys4m5FSFzAiC/KLKvy/cOEMA9e7rVg1fRPyZjAwMIFrZmBgYGBioBAwoTvLwMCE4ZuQN1G24wT8ogr/7z998//l5YX/X15e+P/+0zf/SQ0jBn5RBco033/6Bu4KfIYwYdN84cIZDIUXLpzBGtVMxGjGZwjOaOR6txWeHnClC5wGYNOAyxDGoZ+ZAJfOa5tlgjesAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--liegestuhl { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAc0lEQVR42mNgIAHwiyr85xdV+M9ADuAXVfj/8vLC/y8vL0QxhImBnoAiL9DMdJQwEMmewUCRE/lFFf4rN+z4T1dDGHEZIpI9g+HN1Ay8mj++fsDIiM8lItkz8BrwZmoGA14DqBK1ZBtOSBFeeWKdT5VkDQAilzEKb1bwLwAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--bruecke { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVR42mNgGPKAEZcEv6jCf2T+x9cPGIkyAKYxPCYDRXzlkhlYDWLEpRGmAQbQxWEGMcI041KAz4KPrx8wMvCLKvxPK+z4zy+q8B/d37jCBlkPIzGa8AEWbAFGLFi5ZAYDxS6A+wvmJ2zpAJ2NrJaJUstZ5p1+8b/QywIuMO/0C2QvYbDR1TKiaaA/AABvZ1JYHg2GTwAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--doktorhut { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfUlEQVR42t2SIQ6AMBAE5wi+qgbVL2BRYHgID+MPWExRvAOP4gWHJU1pGjCE0buTzeXg0xjr1FinqYzcFQGkGwBQPwJw7JskBWExJCaSnGJKJMY6zS3GRO8XPLnBVFe08yoAxTUQu3JImCne/spjwdI3ClDGJho/as78n3AC6705eAA8nz8AAAAASUVORK5CYII="); } #ptl .ptl-icon--pflegehaende { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVR42mNgoBAwInP4RRX+w9gfXz9gJCTOwMDAwIKsaKOhFFzC/zzD/4+vHzDiEofxmZA12+88Cle40VAKw1BkcRQDYOCguzWGYkKACeYv//PPiAo0//PPGDC8QKwh6JoxvIDPEGyaGRgYGJiQAwSXIdg0w/Xxiyr8f3l54X90g/hFFf4fcLPCEEfXA/fCrX2NGAkGl8239jViJiSYIWpO9f9xpU6YGoykjG4qMUDNqZ7h4+sHjPB0oOZUT7JmvJkJH8AWnWQDAPwmgvOhdrEEAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--stift { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVR42mNgIBLwiyr85xdV+I8uzkKs5o2GUgwMDAwM/ucZ/n98/YARJseIrAiXAQjNzxiQNWO44MOr+xiaBcQU8boOwwvpRZ1w9solM/DajuEFZBcIiCkS1IwRUP////+fVtjxn19U4f/Lywv/v7y88D++sMFqwP///+EGEKMZZxioOdUzhMdkMDAwMMANmdlXziAgpojdO8guwAfQXYU3FtDBzL5y4sKAFBcwoRuk0rgThWYgJbPAgHLDDqJdQFReQAcEExUpAABhpcr65DuFQgAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--umzugskarton { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlklEQVR42mNgGGjAiMzhF1X4T4ymj68fMGIYwC+q8H/HZG8GJW0zFMVqTvUMt/Y1YojBDGFC1kws2DHZG+5aRmKdjQuwwExEdzoDAwPDNyGIq7jebcWQu3f1FINH7laIFyh2AS6AzWa8Bqg51aNIooc+NoDhBUbHJAZGxyTyvfB//zzyw4AYJ+M04N7VU+TlBUoTEsUAAGiVLEKiQE8fAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--schluessel { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVR42mNgoBAwInP4RRX+I/M/vn7ASLQB/KIK/3tnZaBIFqfNIMoQBn5Rhf9z1nf8z+8K/c8vqvCfX1Thf35X6P856zv+o7sKHTAhcxZ0n2b4+PoB48fXDxgXdJ8mKgyYKA1EFAMSSk0ZYF5IKDUlLRawBSIsIHGBj68fMOKNRmwGEms43EBkDIsVGM0vqvCfBZ8ByGkAW3QSlUaweZFQ2hhpAAB3z0tYrWP6JQAAAABJRU5ErkJggg=="); } #ptl .ptl-icon--ringe { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAwElEQVR42mNgoAXgF1X4zy+q8J9szcoNO/7PO/2CKEOYcEm0br1AlIWM2FwAY398/YARlxiGATBF3f1T4ZKlhdkMDAwMDP3bTsDFCr0sUAyC24CsEQZY1I1xOr3Qy4Lh4+sHjCzoEths/XPzLFZxBgYGBiZk20sLszH8+OfmWQZk/8O80L/tBAO/qMJ/JkrTDPUNwJd4sMlhjYXSwmyG7v6pKLFQ6GWBEZ0fXz9gREkHxEYlTDNGSiQ2A6HHFEUAAIqmWls0aR+vAAAAAElFTkSuQmCC"); } #ptl .ptl-icon--schultafel { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAp0lEQVR42mNgoBAwMjAwMPCLKvwnR/PH1w8YWWCcalcxkjS37n7FwMDAwMCCLHjgBxdRmh04vsHZTOiSW9fuR6EJARZ0Ae9gR4ata/czeAc7YhgEE8NrAEwzjMamCRkwYXMBum1b1+7H6SUWYvyJzxUsuEIXGyhdepKhO9qcugkJRYBfVOF/V5QZTsO6osz+o1vGxEAtALMdn3ewqWFElsTpNxLUkAwAqCtDNSp92sUAAAAASUVORK5CYII="); } #ptl .ptl-icon--bald { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlklEQVR42mNgoBAwYhPkF1X4j0384+sHjAQN4BdV+B8ek8FgYqyLIn7m7GWGlUtmYDUERXNaYcd/XPJphR3/0V3HRGkYMFElEHEFGiHw8fUDRhYYp7t/KkmaSwuzCXuhtDAbrpDkMCgtzGb48Oo+w4dX9/EawoJLort/KoOAmCJB71EcCyz4JIkJWBbkpDog6YDSIGAAAO2yMtftY/l8AAAAAElFTkSuQmCC"); } #ptl .ptl-icon--station { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAaUlEQVR42mNkgAJ+UYX/DESAj68fMCLzWZA5vbMyCBpQnDbjP7IhTAwkgt5ZGSiuJdkAdEPIMqA4bQY8LJgo0czAwMDASNVYwKaAECArDEYNwGIAchQSG51wA7BpIMUQFmtbBRxSxBkCAB/rJmFEodnlAAAAAElFTkSuQmCC"); } /* Runde Pixel-Flaggen, erzeugt mit flaggen.py - nicht von Hand aendern */ #ptl .ptl-weltkarte__marker[data-land="belgien"]::before, #ptl .ptl-weltkarte__liste li[data-land="belgien"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAb0lEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZumd0dZMAwUsv6DYQgLPtuQwQM5BQYGBgYGBQaG/zADmIjRiG4ITD0TAwWAhRRbkW1XYGD4T5HNQ1UztpRDCCg8esDw8fUDRsqdTYrtMFspTtuMlOQqABskMjiKrCXLAAAAAElFTkSuQmCC); } #ptl .ptl-weltkarte__marker[data-land="frankreich"]::before, #ptl .ptl-weltkarte__liste li[data-land="frankreich"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAdUlEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZumD6/uYxgoIKaIYQgLssaPDi0MuMADHVEGBgYGBoUrDP9hBjARoxHdEJgLmRgoAEyk2IpuO2U2D1HNH18/YOQ/UEOSJoUrrxk+vn7ASLmzSbEdZivFaZuRklwFAHNkOuZOTfufAAAAAElFTkSuQmCC); } #ptl .ptl-weltkarte__marker[data-land="grossbritannien"]::before, #ptl .ptl-weltkarte__liste li[data-land="grossbritannien"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAxklEQVR42qVTMRKDIBBcGNI5YgqpxQ9Y5g1+xQf5Fd6QMh9Qay2ijrWkwkEFkoxb7s4uN7cHgQM8zfSRm4aOHDniMo19i+e92PjH+4VEyFMIs41zVMIHo3EobQKobVybGiGsTY05KrcJqS3SvPIGrE0Nmlc7jvE002Pf4hfYwYmQmgHYLccFp347jP0vLpmZ6TE0qkuHkGDT0JFEyK3jUF1m2/GiMA0dod/qCNXIzMlxKO0z2gHm1d15mgCfMV7U6bbJlV/1AT+yXzra7DGDAAAAAElFTkSuQmCC); } #ptl .ptl-weltkarte__marker[data-land="italien"]::before, #ptl .ptl-weltkarte__liste li[data-land="italien"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAeUlEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZumD6/uYxgoIKaIYQgLssaPtWoMuMB+MXEGBgYGBkcGhv8wA5iI0YhuCMyFTAwUABZSbEW23ZGB4T9FNg9VzR9fP2Dkb75FkibHVy8ZPr5+wEi5s0mxHWYrxWmbkZJcBQBL0znchqsVcwAAAABJRU5ErkJggg==); } #ptl .ptl-weltkarte__marker[data-land="litauen"]::before, #ptl .ptl-weltkarte__liste li[data-land="litauen"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAeklEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZumd0s+YxgoFMOLYQgjskZsmrAZAjOAiRSNMFfBXMjEQAFg5BdV+P8xVIVkjfyr71Bm8xDVzAiLqk1CvERr8nv3meHj6weMlDv74+sHjH7vPpNkK860jc0LMMOxpm1ychUAaoU5w1UoTCIAAAAASUVORK5CYII=); } #ptl .ptl-weltkarte__marker[data-land="niederlande"]::before, #ptl .ptl-weltkarte__liste li[data-land="niederlande"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAdklEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZum+ewcGAYm/vyBYQgjskZsmrAZAjOAiRSNMFfBXMjEQAngF1X4Tw7gF1X4T5HNQ1QzIyzQhAyzidb07vxUho+vHzBS7uyPrx8wvjs/lSRbcaZtbF6AGY41bZOTqwBJdWhp+rUMrQAAAABJRU5ErkJggg==); } #ptl .ptl-weltkarte__marker[data-land="polen"]::before, #ptl .ptl-weltkarte__liste li[data-land="polen"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAeUlEQVR42mNkwAL4RRX+o4t9fP2AEV2MEZumD6/uYxgoIKaI0xAGflGF/8QADFcRqxHdACYGSgCptiLbTpHNFGlmYWBgYLgraku6TkYKbWb6+PoBozHjE5I0GTM+Yfj4+gEj5QFGiu0wW3Gm7bP/ZbBqQk/bjJTkKgA8y7Gpx34JFQAAAABJRU5ErkJggg==); } #ptl .ptl-weltkarte__marker[data-land="usa-kanada"]::before, #ptl .ptl-weltkarte__liste li[data-land="usa-kanada"] .ptl-weltkarte__stecker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAvUlEQVR42qVTuw2DMBB9h9IiU2Bq06TLBskK2cAzpMsemYFREmUN00UCCiMGcIoI63CIFeB1Pt37nO5MmIGQyoW1vq0prO3mSLYxOB0vAIDr6wkA0IALRYgTD/vzV4r74zZ5Z0XpBRJOHBtDAodtjE9IMVcem0MPHfq2pkRI5WxjJo4xZwCo0hxCKkcx15hQVpSfmdeChFSuSvPFRD1025z9jpdgXNW2mbn7P7OPO56Q+W3Pieihw8/bXvOr3iXHfFr4kLzfAAAAAElFTkSuQmCC); }