/* Plakat-Koordination – Kampagnen-Look des Nein-Komitees (Schwarz, Gelb #FFDD88, Barlow).
   Alles ist unter .frw-plk gekapselt; Kopf- und Fusszeile der Webseite bleiben unberührt. */

@font-face { font-family: 'FRW Barlow'; src: url(../fonts/barlow-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FRW Barlow'; src: url(../fonts/barlow-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'FRW Barlow'; src: url(../fonts/barlow-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'FRW Barlow Condensed'; src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'FRW Barlow Condensed'; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }

.frw-plk {
	--plk-black: #000; --plk-dark: #303030; --plk-line: #3d3d3d; --plk-field: #4a4a4a;
	--plk-yellow: #FFDD88; --plk-yellow-2: #FFCB05; --plk-white: #fff; --plk-grey: #c2c2c2; --plk-error: #ff8a8a;
	--plk-cond: 'FRW Barlow Condensed', 'Arial Narrow', sans-serif; --plk-body: 'FRW Barlow', system-ui, sans-serif;
	--plk-gutter: clamp(16px, 3vw, 40px);
	background: var(--plk-black); color: var(--plk-white); font-family: var(--plk-body); font-size: 18px; line-height: 1.55; text-align: left;
}
.frw-plk *, .frw-plk *::before, .frw-plk *::after { box-sizing: border-box; }
.frw-plk [hidden] { display: none !important; }
.frw-plk *:focus-visible { outline: 3px solid var(--plk-yellow); outline-offset: 3px; }
.frw-plk p { margin: 0; }
.frw-plk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--plk-gutter); }
.frw-plk-sec { padding: clamp(56px, 8vw, 104px) 0; }
.frw-plk-sec--dark { background: var(--plk-dark); }
.frw-plk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frw-plk-kicker { margin: 0 0 12px !important; font: 600 clamp(16px, 1.6vw, 20px)/1.25 var(--plk-cond); letter-spacing: .02em; color: var(--plk-white); }
.frw-plk-h1 { margin: 0; font: 800 clamp(46px, 8.6vw, 108px)/.92 var(--plk-cond); text-transform: uppercase; color: var(--plk-yellow); letter-spacing: 0; hyphens: auto; }
.frw-plk-h2 { margin: 0 0 14px; font: 800 clamp(34px, 5vw, 60px)/.98 var(--plk-cond); text-transform: uppercase; color: var(--plk-yellow); letter-spacing: 0; }
.frw-plk-h3 { margin: 0 0 6px; font: 800 26px/1.1 var(--plk-cond); text-transform: uppercase; color: var(--plk-yellow); letter-spacing: .01em; }
.frw-plk-lead { max-width: 690px; font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; color: var(--plk-white); }
.frw-plk a { color: var(--plk-yellow); }
.frw-plk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 30px; border-radius: 999px; border: 2px solid var(--plk-yellow); background: var(--plk-yellow); color: #000 !important; font: 800 20px/1 var(--plk-cond); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.frw-plk-btn:hover { background: transparent; color: var(--plk-yellow) !important; }
.frw-plk-btn[disabled] { opacity: .75; cursor: progress; }

/* A: Einstieg */
.frw-plk-hero { padding: clamp(36px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); background: radial-gradient(70% 90% at 80% 10%, rgba(255, 221, 136, .14), transparent 60%), #000; overflow: hidden; }
.frw-plk-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.frw-plk-hero .frw-plk-lead { margin: 22px 0 30px; }
.frw-plk-posters { position: relative; justify-self: center; width: min(340px, 100%); aspect-ratio: 760 / 1076; }
.frw-plk-posters img { position: absolute; width: 82%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08); }
.frw-plk-posters__back { right: 0; top: 0; transform: rotate(5deg); opacity: .85; }
.frw-plk-posters__front { left: 0; bottom: 0; transform: rotate(-3deg); }

/* Karte */
.frw-plk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 18px; }
.frw-plk-stat { background: #000; border: 1px solid var(--plk-line); border-radius: 14px; padding: 18px 20px; }
.frw-plk-stat b { display: block; font: 800 clamp(38px, 5vw, 56px)/1 var(--plk-cond); color: var(--plk-yellow); }
.frw-plk-stat span { font-size: 15px; color: var(--plk-grey); font-weight: 600; }
.frw-plk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.frw-plk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--plk-line); background: #000; color: #fff; font: 600 15px var(--plk-body); cursor: pointer; }
.frw-plk-chip[aria-pressed=true] { border-color: var(--plk-yellow); background: rgba(255, 221, 136, .12); }
.frw-plk-chip[aria-pressed=false] { opacity: .55; }
.frw-plk-map { position: relative; isolation: isolate; z-index: 0; height: clamp(380px, 56vh, 560px); border-radius: 18px; overflow: hidden; border: 1px solid var(--plk-line); background: #121212; }
.frw-plk-map__el { position: absolute; inset: 0; }
.frw-plk-map .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(.95); }
.frw-plk-map .leaflet-container { background: #121212; font-family: var(--plk-body); }
.frw-plk-map__touch { position: absolute; inset: 0; z-index: 800; display: none; align-items: flex-end; justify-content: center; padding: 18px; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); border: 0; color: #fff; font: 600 16px var(--plk-body); cursor: pointer; }
.frw-plk-map__touch span { padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .85); border: 1px solid var(--plk-yellow); }
.frw-plk-map.is-touch .frw-plk-map__touch { display: flex; }
.frw-plk-map__noscript, .frw-plk-map__fail { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: var(--plk-grey); text-align: center; }
.frw-plk-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 15px; color: var(--plk-grey); }
.frw-plk-legend span { display: inline-flex; align-items: center; gap: 8px; }
.frw-plk-note { margin-top: 10px !important; font-size: 14px; color: var(--plk-grey); }
/* Markierungen: Form und Farbe unterscheiden sich (auch bei Farbsehschwäche) */
.plk-m { display: inline-grid; place-items: center; font-style: normal; flex: none; }
.plk-m--pickup { width: 34px; height: 34px; border-radius: 8px; background: var(--plk-yellow, #FFDD88); border: 3px solid #000; box-shadow: 0 0 0 2px #FFDD88, 0 6px 14px rgba(0, 0, 0, .6); color: #000; }
.plk-m--reg { width: 22px; height: 22px; border-radius: 50%; background: #000; border: 4px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.plk-m--hung { width: 26px; height: 26px; border-radius: 50%; background: #FFCB05; border: 2px solid #000; box-shadow: 0 0 0 2px #FFCB05, 0 3px 10px rgba(0, 0, 0, .6); color: #000; font: 800 15px/1 var(--plk-body, sans-serif); }
.plk-m--xs { transform: scale(.62); margin: -6px; box-shadow: none; }
.plk-m--s { transform: scale(.8); }
.plk-badge { display: grid; place-items: center; flex: none; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; background: #E3000F; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); color: #fff; font: 800 16px/1 var(--plk-body, sans-serif); font-style: normal; }
.plk-badge-wrap { display: flex; align-items: center; justify-content: center; }
.plk-badge--group { min-width: 46px; height: 46px; font-size: 18px; }
.plk-badge--s { transform: scale(.8); margin: 0; box-shadow: none; min-width: 30px; height: 30px; font-size: 14px; }
.plk-sw { display: inline-block; flex: none; width: 22px; height: 16px; border-radius: 4px; border: 2px solid #E3000F; background: rgba(227, 0, 15, .5); font-style: normal; }
.plk-pop-n { color: #ff4d55; font-size: 20px; }
.frw-plk .leaflet-popup-content-wrapper { border-radius: 14px; background: #000; color: #fff; border: 1px solid var(--plk-yellow); }
.frw-plk .leaflet-popup-tip { background: var(--plk-yellow); }
.frw-plk .leaflet-popup-content { margin: 14px 18px; font: 600 15px/1.45 var(--plk-body); }
.frw-plk .leaflet-popup-content strong { display: block; font: 800 20px/1.1 var(--plk-cond); color: var(--plk-yellow); text-transform: uppercase; }
.frw-plk .leaflet-popup-content em { color: var(--plk-grey); }
.frw-plk .leaflet-container a.leaflet-popup-close-button { color: #fff; }
.frw-plk .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 22px; color: #000; }
.frw-plk .leaflet-control-attribution { font-size: 11px; }
.frw-plk .leaflet-control-attribution a { color: #0b5ea8; }

/* B: Ablauf */
.frw-plk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; counter-reset: plks; }
.frw-plk-step { position: relative; background: #000; border: 1px solid var(--plk-line); border-radius: 18px; padding: 26px 24px 24px; }
.frw-plk-step svg { width: 44px; height: 44px; color: var(--plk-yellow); margin-bottom: 14px; }
.frw-plk-step::before { counter-increment: plks; content: counter(plks); position: absolute; top: 18px; right: 22px; font: 800 44px/1 var(--plk-cond); color: #2e2e2e; }
.frw-plk-step p { color: var(--plk-grey); font-size: 17px; }

/* C: Formular */
.frw-plk-form { margin-top: 30px; display: grid; gap: 18px; }
.frw-plk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.frw-plk-fs { margin: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--plk-line); border-radius: 18px; background: #0d0d0d; min-width: 0; }
.frw-plk-fs legend { padding: 0 10px; margin-left: -10px; font: 800 26px/1 var(--plk-cond); text-transform: uppercase; color: var(--plk-yellow); }
.frw-plk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 14px; }
.frw-plk-grid--plz { grid-template-columns: 160px minmax(0, 1fr); }
.frw-plk-full { grid-column: 1 / -1; }
.frw-plk-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.frw-plk-f label, .frw-plk-q { font-weight: 600; font-size: 17px; color: #fff; }
.frw-plk-req { color: var(--plk-yellow); }
.frw-plk-opt { font-weight: 400; color: var(--plk-grey); font-size: 15px; }
.frw-plk input[type=text], .frw-plk input[type=tel], .frw-plk input[type=email], .frw-plk input[type=number], .frw-plk textarea { width: 100%; min-height: 54px; margin: 0; padding: 13px 16px; border-radius: 12px; border: 2px solid var(--plk-field); background: #fff; color: #000; font: 600 18px/1.3 var(--plk-body); box-shadow: none; }
.frw-plk textarea { min-height: 110px; resize: vertical; }
.frw-plk textarea.frw-plk-short { min-height: 80px; }
.frw-plk input::placeholder, .frw-plk textarea::placeholder { color: #707070; font-weight: 400; }
.frw-plk input:focus, .frw-plk textarea:focus { border-color: var(--plk-yellow); outline: none; box-shadow: 0 0 0 3px rgba(255, 221, 136, .45); }
.frw-plk .is-invalid input, .frw-plk .is-invalid textarea { border-color: var(--plk-error); }
.frw-plk-hint { font-size: 15px; color: var(--plk-grey); font-weight: 400; }
.frw-plk-hint b { color: var(--plk-yellow); font-weight: 600; }
.frw-plk-err { display: none; font-size: 15px; font-weight: 600; color: var(--plk-error); }
.frw-plk .is-invalid .frw-plk-err, .frw-plk .is-invalid > .frw-plk-err { display: block; }
.frw-plk-err--block { margin-top: 10px; }
.frw-plk-err--indent { margin: 6px 0 0 40px; }
.frw-plk-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.frw-plk-choice { position: relative; }
.frw-plk-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.frw-plk-choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--plk-field); font-weight: 600; font-size: 16px; }
.frw-plk-choice input:checked + span { border-color: var(--plk-yellow); background: var(--plk-yellow); color: #000; }
.frw-plk-choice input:focus-visible + span { outline: 3px solid var(--plk-yellow); outline-offset: 3px; }
.frw-plk-count { display: flex; align-items: stretch; max-width: 220px; }
.frw-plk-count button { flex: none; width: 54px; border: 2px solid var(--plk-field); background: #1d1d1d; color: #fff; font: 700 24px var(--plk-body); cursor: pointer; }
.frw-plk-count button:first-child { border-radius: 12px 0 0 12px; }
.frw-plk-count button:last-child { border-radius: 0 12px 12px 0; }
.frw-plk .frw-plk-count input { border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.frw-plk-count input::-webkit-inner-spin-button, .frw-plk-count input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.frw-plk-pickups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.frw-plk-pick { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; border-radius: 14px; border: 2px solid var(--plk-field); background: #000; cursor: pointer; transition: border-color .15s, background .15s; }
.frw-plk-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.frw-plk-pick__dot { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; border: 2px solid #777; display: grid; place-items: center; }
.frw-plk-pick__body { display: flex; flex-direction: column; gap: 2px; font-size: 16px; color: var(--plk-grey); min-width: 0; }
.frw-plk-pick__body strong { font: 800 22px/1.1 var(--plk-cond); color: #fff; text-transform: uppercase; }
.frw-plk-pick__note { color: var(--plk-yellow); }
.frw-plk-pick__sub { margin: 0 0 4px; font-size: 14px; color: var(--plk-grey); }
.plk-pop-sub { display: block; margin: 2px 0 6px; font-size: 13px; color: var(--plk-grey, #c2c2c2); }
.frw-plk-pick__body a { margin-top: 6px; font-weight: 600; font-size: 15px; }
.frw-plk-pick:hover { border-color: #8a8a8a; }
.frw-plk-pick:has(input:checked), .frw-plk-pick.is-on { border-color: var(--plk-yellow); background: rgba(255, 221, 136, .1); }
.frw-plk-pick:has(input:checked) .frw-plk-pick__dot, .frw-plk-pick.is-on .frw-plk-pick__dot { border-color: var(--plk-yellow); background: var(--plk-yellow); }
.frw-plk-pick:has(input:checked) .frw-plk-pick__dot::after, .frw-plk-pick.is-on .frw-plk-pick__dot::after { content: '✓'; color: #000; font-weight: 800; font-size: 15px; }
.frw-plk-pick:focus-within { outline: 3px solid var(--plk-yellow); outline-offset: 3px; }
.frw-plk-consents { display: grid; gap: 16px; margin-top: 12px; }
.frw-plk-facts { margin: 0; padding: 16px 18px 16px 38px; border-radius: 12px; background: #000; border: 1px solid var(--plk-line); display: grid; gap: 8px; font-size: 15px; color: var(--plk-grey); }
.frw-plk-facts li::marker { color: var(--plk-yellow); }

/* Standorte (mehrere PLZ / Ortschaften) */
.frw-plk-fs__intro { display: block; margin: 8px 0 4px; }
.frw-plk-locs { display: grid; gap: 12px; margin-top: 14px; }
.frw-plk-loc { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) 200px; gap: 14px 18px; padding: 18px 56px 18px 18px; border-radius: 14px; border: 1px solid var(--plk-line); background: #000; }
.frw-plk-loc__z { grid-column: 1 / -1; }
.frw-plk-loc__rm { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--plk-field); background: #1d1d1d; color: #fff; font: 700 22px/1 var(--plk-body); cursor: pointer; }
.frw-plk-loc__rm:hover { border-color: var(--plk-error); color: var(--plk-error); }
.frw-plk-locs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; }
.frw-plk-add { min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 2px dashed var(--plk-yellow); background: transparent; color: var(--plk-yellow); font: 700 16px var(--plk-body); cursor: pointer; }
.frw-plk-add:hover { background: rgba(255, 221, 136, .1); }
.frw-plk-total { font-weight: 600; color: var(--plk-grey); }
.frw-plk-total b { color: var(--plk-yellow); font: 800 26px/1 var(--plk-cond); }
.frw-plk-combo { position: relative; }
.frw-plk-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: #fff; color: #000; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.frw-plk-combo__list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 17px; }
.frw-plk-combo__list li span { color: #666; font-size: 14px; }
.frw-plk-combo__list li:hover, .frw-plk-combo__list li.is-active { background: var(--plk-yellow); }
.frw-plk-combo__list li.is-empty { color: #666; cursor: default; background: none; }
.frw-plk-check { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; font-weight: 400 !important; cursor: pointer; }
.frw-plk-check input { flex: none; width: 26px; height: 26px; margin: 1px 0 0; accent-color: #FFDD88; }
.frw-plk-submit { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.frw-plk-submit .frw-plk-btn { min-width: 260px; }
.frw-plk-alert { display: none; padding: 14px 18px; border-radius: 12px; background: #3a1414; border: 1px solid #ff6b6b; color: #ffd2d2; font-weight: 600; }
.frw-plk-alert.is-on { display: block; }
.frw-plk .cf-turnstile { min-height: 0; }

/* D: Bestätigung */
.frw-plk-done { padding: clamp(24px, 4vw, 44px); border-radius: 18px; border: 2px solid var(--plk-yellow); background: #0d0d0d; }
.frw-plk-done dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 22px 0 0; }
.frw-plk-done dt { color: var(--plk-grey); }
.frw-plk-done dd { margin: 0; font-weight: 600; }
.frw-plk-done__loc { display: block; }
.frw-plk-done__loc b { display: inline-grid; place-items: center; min-width: 28px; height: 24px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--plk-yellow); color: #000; font-size: 14px; }

/* E: Abholung */
.frw-plk-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.frw-plk-info div { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 14px; background: #000; border: 1px solid var(--plk-line); }
.frw-plk-info b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--plk-yellow); color: #000; font-weight: 800; }

@media (max-width: 900px) {
	.frw-plk-hero__grid { grid-template-columns: 1fr; }
	.frw-plk-posters { justify-self: start; width: min(260px, 70%); }
	.frw-plk-steps, .frw-plk-pickups, .frw-plk-info { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.frw-plk { font-size: 17px; }
	.frw-plk-grid, .frw-plk-grid--plz { grid-template-columns: 1fr; }
	.frw-plk-loc { grid-template-columns: 1fr; padding: 16px 14px; }
	.frw-plk-loc__q label { padding-right: 44px; }
	.frw-plk-add { width: 100%; }
	.frw-plk-stat { padding: 14px 16px; }
	.frw-plk-submit .frw-plk-btn, .frw-plk-hero .frw-plk-btn { width: 100%; }
	.frw-plk-done dl { grid-template-columns: 1fr; gap: 2px; }
	.frw-plk-done dd { margin-bottom: 10px; }
	.frw-plk-map { height: 420px; }
}
/* Im neuen Design schwebt die Kopfzeile über dem Inhalt: Platz dafür lassen */
.frw-new .frw-plk-hero { padding-top: clamp(128px, 16vh, 170px); }
@media (max-width: 1240px) { .frw-new .frw-plk-hero { padding-top: 112px; } }