/* default styles for extension "tx_frontend" */ .ce-align-left { text-align: left; } .ce-align-center { text-align: center; } .ce-align-right { text-align: right; } .ce-table td, .ce-table th { vertical-align: top; } .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; } .ce-left .ce-gallery, .ce-column { float: left; } .ce-center .ce-outer { position: relative; float: right; right: 50%; } .ce-center .ce-inner { position: relative; float: right; right: -50%; } .ce-right .ce-gallery { float: right; } .ce-gallery figure { display: table; margin: 0; } .ce-gallery figcaption { display: table-caption; caption-side: bottom; } .ce-gallery img { display: block; } .ce-gallery iframe { border-width: 0; } .ce-border img, .ce-border iframe { border: 2px solid #000000; padding: 0px; } .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery { margin-bottom: 13px; } .ce-image .ce-gallery { margin-bottom: 0; } .ce-intext.ce-right .ce-gallery { margin-left: 13px; } .ce-intext.ce-left .ce-gallery { margin-right: 13px; } .ce-below .ce-gallery { margin-top: 13px; } .ce-column { margin-right: 20px; } .ce-column:last-child { margin-right: 0; } .ce-row { margin-bottom: 19px; } .ce-row:last-child { margin-bottom: 0; } .ce-above .ce-bodytext { clear: both; } .ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; } /* Headline */ .ce-headline-left { text-align: left; } .ce-headline-center { text-align: center; } .ce-headline-right { text-align: right; } /* Uploads */ .ce-uploads { margin: 0; padding: 0; } .ce-uploads li { list-style: none outside none; margin: 1em 0; } .ce-uploads img { float: left; padding-right: 1em; vertical-align: top; } .ce-uploads span { display: block; } /* Table */ .ce-table { width: 100%; max-width: 100%; } .ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; } .ce-table thead th { border-bottom: 2px solid #dadada; } .ce-table th, .ce-table td { border-top: 1px solid #dadada; } .ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); } .ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; } /* Space */ .frame-space-before-extra-small { margin-top: 1em; } .frame-space-before-small { margin-top: 2em; } .frame-space-before-medium { margin-top: 3em; } .frame-space-before-large { margin-top: 4em; } .frame-space-before-extra-large { margin-top: 5em; } .frame-space-after-extra-small { margin-bottom: 1em; } .frame-space-after-small { margin-bottom: 2em; } .frame-space-after-medium { margin-bottom: 3em; } .frame-space-after-large { margin-bottom: 4em; } .frame-space-after-extra-large { margin-bottom: 5em; } /* Frame */ .frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; } .frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; } .frame-indent { margin-left: 15%; margin-right: 15%; } .frame-indent-left { margin-left: 33%; } .frame-indent-right { margin-right: 33%; } .form-fieldset { border: 0; width: 100%; max-width: 800px; } .form-fieldset-label { padding: 16px 0; font-size: 1.25em; font-weight: 600; } .form-row { display: flex; } .form-row > div { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); margin-right: 20px; } .form-row > div:last-child { margin-right: 0; } @media only screen and (max-width: 800px) { .form-row { flex-direction: column; } .form-row > div { flex: 1 1 100%; max-width: 100%; margin-right: 0; } } .form-group, .btn-group { max-width: 100%; margin-bottom:1em; overflow:hidden; } .btn-group .previous{margin-right:24px;} .form-group-show_company_name { margin-top: 1em; } .form-group-company_name { max-width: 100%; transition: max-width 400ms; } .form-group-company_name.hidden-by-sliding-left { max-width: 0; } label.form-check-label { width:100%; } .inputs-list .radio { overflow:hidden; } input[type="radio"] { margin-right:1em; } /* show labels as coloured buttons */ .show-labels-as-coloured-buttons { display: flex; flex-wrap: wrap; } .show-labels-as-coloured-buttons .form-check { margin-right: 8px; border-top: none; } .form-group-amount .show-labels-as-coloured-buttons .form-check { flex: 1 1 90px; max-width: 90px; } .show-labels-as-coloured-buttons .form-check-label { padding: 12px 16px 12px 16px; background-color: #094f9e; color: white; font-size: 18px; font-weight: 700; text-align: center; line-height: 1; letter-spacing: .5px; cursor: pointer; } .show-labels-as-coloured-buttons .form-check-label:has(input:checked) { background-color:#F45E5E; color:white; } .show-labels-as-coloured-buttons .form-check-label input[type="radio"] { position: absolute; z-index: -10; visibility: hidden; } .form-group-amount .form-check.contains-input-field { flex:1 1 166px; max-width:166px; } .form-check.contains-input-field .input-group { display: flex; } .form-check.contains-input-field input[type="number"] { padding-top: 12px; padding-bottom: 11px; padding-left: 20px; } .show-labels-as-coloured-buttons .form-check.contains-input-field { position: relative; } .show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"] { background-color: transparent; border: none; box-shadow: none; color:white; font-weight: 600; } .show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"]::placeholder { color: white; font-weight: 600; text-align: left; } .show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label { padding: 0; background-color: #094f9e; } .show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label:has(input:checked) { background-color: #f95050; color: white; } .show-labels-as-coloured-buttons .form-check.contains-input-field .input-group-addon { position: absolute; top: 0; right: -16px; padding: 11px 0 0 2px; border: none; background-color: transparent; color: #202020; font-size: 18px; font-weight: 600; } /* progress bar */ .progress { height: 44px; margin-bottom: 0; border: unset; border-radius: unset; box-shadow: unset; background-color: #ccc; overflow: hidden; } .progress-bar { height: 100%; padding-top: 5px; color: #fff; font-size: 12px; line-height: 20px; text-align: center; overflow: hidden; transition: width 1s ease; } .progress-bar span { font-size: 20px; line-height: 30px; } .donation-goal p { margin-bottom: 0; } .finisher-confirmation-message { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 20px; } .toggle-next-fieldset { cursor: pointer; color: #8da700; } .inpersoneventform > h2 { visibility: hidden; height: 0; } .orderform-veto .form-group-amountstatictext { padding-top: 18px; } .orderform-veto .form-group-amountstatictext p { line-height: 1.4; } /* ── Spendenformular: Zwei-Klick-Einwilligung ───────────────────────────────── Markup baut .../custom_forms/Resources/Public/JavaScript/donateActivate.js, eingehängt in .../Resources/Private/Templates/Fundraisingbox/Donationform.html. ⚠️⚠️ DIE WERTE SIND ABSICHTLICH DIESELBEN wie bei den beiden Geschwistern — wer hier etwas ändert, ändert es dort mit, sonst laufen die drei Flächen auseinander: Karte: .../md_events/Resources/Public/Css/listMap.css (.map-activate) Video: .../custom_md2022/Resources/Public/Css/styles-plugins.css .../custom_sprezu/Resources/Public/Css/styles.css (.video-shariff-preview-*) Gemeinsam sind: Symbol 3rem, Lücke 0.625rem, Anbieterband 0.8125rem/700, Hinweisband max 32rem mit 1rem Abstand und 0.625rem/1rem Innenabstand, Kopfzeile 1.125rem, Hinweis fett mit 0.25rem Abstand, Schleier weiß 0.2. Diese Datei liegt über page.includeCSS.custom_forms ohnehin auf jeder Seite jeder Site — deshalb steht der Block hier und nicht doppelt in den Sitepackages. Der Cache-Buster ist die mtime, hier gibt es also NICHTS von Hand hochzuzählen (anders als bei der JS-Datei und bei md_events). */ /* ── Stellschrauben: das Einzige, was eine Site überschreiben sollte ── */ .donate-embed { /* f3d1 = money-bill-1, ausgewählt vom User am 10.8.2026. ⚠️ Die Glyphe gibt es in FA 6.2.1 Free in ZWEI Schnitten: solid (900, gefüllter Schein) und regular (400, nur Umriss). Die Sites binden aber nur fontawesome + solid + brands ein — regular.min.css liegt nirgends. ⚠️⚠️ Das fällt NICHT auf: gemessen am 10.8.2026 (Chrome 151, örtlicher Prüfstand) ergibt font-weight:400 exakt dieselben Maße wie 900. Weil die Familie nur einen Schnitt hat, nimmt der CSS-Schriftabgleich ihn auch für 400 — es bleibt also kein leeres Kästchen stehen, sondern still die SOLIDE Form. Wer den Umriss wirklich will, muss regular.min.css einbinden; die 900 steht hier ausgeschrieben, damit niemand die 400 für den Umriss hält. Nachgesehen in .../custom_md2022/…/fontawesome-free-6.2.1-web/metadata/icons.json und in den includeCSS-Zweigen beider Sitepackages. */ --donate-icon: "\f3d1"; --donate-icon-weight: 900; --donate-host: "FundraisingBox (secure.fundraisingbox.com)"; /* --color-red ist nur in custom_sprezu gesetzt (#ff6157); überall sonst greift der Rückfallwert, das MD-Dunkelblau. Genau wie bei der Karte. */ --donate-icon-color: var(--color-red, #003567); --donate-surface-bg: #e9edf1; --donate-band-bg: #1271ee; /* deckend — weiß darauf ergibt 4,54:1 */ /* Rückmeldung beim Zeigen, derselbe Sprung wie bei den Buttons der Site (styles-defaultscreen.css:833/866), beim Video (--video-band-bg-hover) und auf der Karte (--map-band-bg-hover). ⚠️ Weiß darauf sind nur noch 3,15:1 statt 4,54:1 — bewusste Entscheidung des Users am 12.8.2026 zugunsten der Einheitlichkeit. Wer sie zurücknimmt, nimmt sie an allen vier Stellen zurück. */ --donate-band-bg-hover: #2e92ff; --donate-band-color: #ffffff; --donate-band-radius: 0; /* mehr-demokratie.de ist eckig */ /* ⚠️⚠️ EIGENE Stellschraube, NICHT --donate-icon-color mitbenutzen. Die Symbolfarbe darf hell sein: sprezu setzt dort sein Rot, und das ergibt als Fokusring auf creme nur 2,79:1 — unter den 3:1, die ein Fokusindikator braucht. Gekoppelt würde sprezu still schlechter, während md (dunkelblau, 10,5:1 auf der Fläche) gut aussieht. Am 12.8.2026 gerechnet. */ --donate-focus-ring: var(--color-blue, #003567); /* Platzhalterhöhe. Das fertige Formular ist höher und wächst per fbResize selbst; hier geht es nur darum, dass die Fläche vor dem Klick nicht wie ein vergessener Streifen aussieht. Eine Zeile, wenn sie jemand anpassen will. */ --donate-min-height: 25rem; position: relative; } .donate-embed .donate-activate { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--donate-min-height); padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--donate-surface-bg); font: inherit; /* nimmt eventuelle button-Regeln der Site zurück */ color: inherit; text-align: center; } .donate-embed .donate-activate--busy { cursor: progress; } .donate-embed .donate-activate--error { cursor: pointer; } /* ⚠️ KEINE Vorschau — hier fehlt absichtlich das Gegenstück zu .map-activate__preview (Kartenpunkte) und zum Standbild des Videos. Angedeutete Formularzeilen waren gebaut und am 10.8.2026 vom User abgelehnt: „keine vertikalen balken im Hintergrund bitte". Die Fläche bleibt einfarbig; wer die Symmetrie zu den Geschwistern „repariert", baut genau das zurück, was weg sollte. Der Schleier bleibt: er trägt den Aufhell-Wechsel beim Überfahren. */ .donate-embed .donate-activate__overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); transition: background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .donate-embed .donate-activate:hover .donate-activate__overlay, .donate-embed .donate-activate:focus .donate-activate__overlay { background: transparent; } .donate-embed .donate-activate__group { position: relative; z-index: 1; display: block; width: 100%; padding: 0 1rem; } .donate-embed .donate-activate__icon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem; margin: 0 auto; color: var(--donate-icon-color); font: inherit; } .donate-embed .donate-activate__icon::before { content: var(--donate-icon); font-family: 'Font Awesome 6 Free'; font-weight: var(--donate-icon-weight); font-style: normal; font-size: 3rem; line-height: 1; } /* Ziel des Klicks im Klartext neben dem Symbol, eigener deckender Grund wie beim Video. ⚠️ Für Vorlesesoftware ist per CSS erzeugter Text zweite Wahl — der lange Hinweis im Band darunter ist echtes Markup und trägt die Aussage allein. */ .donate-embed .donate-activate__icon::after { content: var(--donate-host); padding: 0.25rem 0.5rem; border-radius: var(--donate-band-radius); background: var(--donate-band-bg); color: var(--donate-band-color); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; } .donate-embed .donate-activate__text { display: block; max-width: 32rem; margin: 1rem auto 0; padding: 0.625rem 1rem; border-radius: var(--donate-band-radius); background: var(--donate-band-bg); color: var(--donate-band-color); font-size: 0.9375rem; line-height: 1.45; } .donate-embed .donate-activate__title { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.3; } .donate-embed .donate-activate__hint { display: block; margin-top: 0.25rem; font-weight: 700; } /* Rückmeldung an den BÄNDERN — dieselbe wie beim Video und auf der Karte. ⚠️⚠️ WARUM NICHT DER SCHLEIER REICHT: die Fläche hat hier bewusst KEINE Vorschau (siehe Kasten oben), der Schleier liegt also auf glattem --donate-surface-bg. Nachgerechnet am 12.8.2026: 20 % Weiß auf #e9edf1 ergibt #edf1f4 — eine Differenz von 4/4/3 Stufen von 255. Der Schleier-Hover ist hier also nicht schwach, sondern praktisch nicht vorhanden. Auf der Karte lag wenigstens noch ein Bild darunter. Der Schleier bleibt trotzdem: er kostet nichts und trägt, sobald jemand der Fläche doch einmal einen Hintergrund gibt. */ .donate-embed .donate-activate__text, .donate-embed .donate-activate__icon::after { transition: background-color 120ms ease-in-out; } .donate-embed .donate-activate:hover .donate-activate__text, .donate-embed .donate-activate:hover .donate-activate__icon::after, .donate-embed .donate-activate:focus-visible .donate-activate__text, .donate-embed .donate-activate:focus-visible .donate-activate__icon::after { background: var(--donate-band-bg-hover); } /* ⚠️⚠️ DUNKEL, NICHT HELL. Bis zum 12.8.2026 stand hier var(--color-light, #fbf8f4), also nahezu Weiß — auf --donate-surface-bg (#e9edf1) unsichtbar, der Knopf mit der Tastatur damit nicht auffindbar. Dieselbe Stelle war bei Video und Karte genauso falsch; alle drei sind am 12.8.2026 zusammen umgestellt worden. */ .donate-embed .donate-activate:focus-visible { outline: 0.1875rem solid var(--donate-focus-ring); outline-offset: -0.3125rem; } /** * extension md_report */ /* overview */ form.tx_mdreport__countrySelector { float:right; width:25%; margin-left:2em; } form.tx_mdreport__countrySelector select { width:100%; } div.tx_mdreport__introtext { max-width:75%; margin-bottom:2em; padding-right:32px;} .tx-md-report .barTable__wrapper { display:flex; } .tx-md-report .barTable__wrapper ul.barSelector { flex:1 1 25%; list-style:none; margin-top:10px; } .tx-md-report .barTable__wrapper ul.barSelector li { margin:0 40px 20px 0; padding:10px; box-shadow:0 0 3px 3px #b0b0b0; cursor:pointer; } .tx-md-report .barTable__wrapper .barSelector_numberInitiatives { border-right:10px solid #e40d77; } .tx-md-report .barTable__wrapper .barSelector_numberPetitionsForReferendum { border-right:10px solid #8064a3; } .tx-md-report .barSelector_numberReferendums { border-right:10px solid #adb901; } .tx-md-report .barTable__wrapper .barSelector_incidencePer10Years { border-right:10px solid #5182ba; } .tx-md-report .barTable__wrapper .barSelector_successRate { border-right:10px solid #ffd400; } .tx-md-report .barTable__wrapper table.barTable { flex:1 1 75%; width:75%; } .tx-md-report .barTable__wrapper table.barTable th div.digits { display:flex;width:calc(100% - 32px);margin-bottom:10px; } .tx-md-report .barTable__wrapper table.barTable th div.digits > div { width:20%;height:20px; font-size:1.25em; color:#03548a; font-weight:700; } .tx-md-report .barTable__wrapper table.barTable th div.digits > div:nth-last-child(2) { width:18%; } .tx-md-report .barTable__wrapper table.barTable th div.digits > div:last-child { width:2%; } .tx-md-report .barTable__wrapper table.barTable th div.borders { display:flex;width:calc(100% - 32px);margin-bottom:20px; } .tx-md-report .barTable__wrapper table.barTable th div.borders > div { width:20%;height:6px;border-bottom:1px solid black;border-left:1px solid black; } .tx-md-report .barTable__wrapper table.barTable th div.borders > div:last-child { border-right:1px solid black; } .tx-md-report .barTable__wrapper .barTable tr { border-bottom:none; } .tx-md-report .barTable__wrapper .barTable tr:first-child td { padding-top:0; } .tx-md-report .barTable__wrapper .barTable_colValue { width:66.6%; padding-left:0; padding-right:32px; border-top:none; } .tx-md-report .barTable__wrapper .barTable_colTitle { opacity:0; transition:opacity 1.2s ease-in-out; width:33.3%; padding-left:0; padding-right:0; border-top:none; font-size:1em; font-weight:700; } .tx-md-report .barTable__wrapper .barTable_colTitle a { color:inherit; text-decoration:none; } .tx-md-report .barTable__wrapper .barTable_colValue__barWrapper { height:24px; background-color:#f0f0f0; } .tx-md-report .barTable__wrapper .barTable_colValue__bar { float:left; width:0; height:24px; transition: width 0.8s ease-in-out; } .tx-md-report .barTable__wrapper .numberInitiatives .barTable_colValue__bar { background-color:#e40d77; } .tx-md-report .barTable__wrapper .numberPetitionsForReferendum .barTable_colValue__bar { background-color:#8064a3; } .tx-md-report .barTable__wrapper .numberReferendums .barTable_colValue__bar { background-color:#adb901; } .tx-md-report .barTable__wrapper .incidencePer10Years .barTable_colValue__bar { background-color:#5182ba; } .tx-md-report .barTable__wrapper .successRate .barTable_colValue__bar { background-color:#ffd400; } .tx-md-report .barTable__wrapper .barTable_colValue__value { display:inline-block; margin-left:6px; padding:6px 0; font-size:12px; font-weight:700; line-height:1; } .tx-md-report .barTable__wrapper .barTable_colValue__value.fullWidth { margin-left:-32px; color:white; } .tx-md-report .layer-gray__figure img { height: 90px; margin-top:2em; margin-bottom:1em;} .tx-md-report .layer-gray__label { min-height: 50px; margin-bottom:0; padding:0 80px;} .tx-md-report .chart__wrapper { padding-top: 16px; } .tx-md-report .chart__wrapper .chartSelector { display:flex; justify-content:center; list-style:none; } .tx-md-report .chart__wrapper .chartSelector > li { margin: 0 40px 20px 0; padding: 10px; box-shadow: 0 0 3px 3px #b0b0b0; cursor: pointer; -ms-transition:0.4s; -moz-transition:0.4s; -webkit-transition:0.4s; -o-transition:0.4s; transition:0.4s; } .tx-md-report .chart__wrapper .chartSelector > li.active { background-color:#004079; color:white; } .tx-md-report .chart { width:600px; height:600px; margin:0 auto; text-align:center; display:none; } .tx-md-report .chart.active { display:block; } .no-touch .tx-md-report .chart__wrapper .chartSelector > li:hover { background-color:#004079; color:white; } .tx-md-report .chart > h2 { margin:2em 0 0 0; } table.tx_mdreport_noscript th { padding-bottom:30px; } table.tx_mdreport_noscript td { padding-left:0; } table.tx_mdreport_noscript .title { font-size:1em; font-weight:700; } table.tx_mdreport_noscript .title a { color:inherit; text-decoration:none; } /* country view */ .tx-md-report .flex-row { display:flex; } .tx-md-report .flex-row-reverse { display:flex; flex-direction:row-reverse; } .tx-md-report .flex-row-reverse .tx_mdreport__label { flex:1 1 25%; margin-left:2em; } .tx-md-report .flex-row-reverse .tx_mdreport__value { flex:1 1 calc(75% - 2em); } .tx-md-report .flex-row .tx_mdreport__label { flex:1 1 calc(50% - 80px); margin-right:80px } .tx-md-report .flex-row .tx_mdreport__value { flex:1 1 50%; } .tx_mdreport__summary { margin-bottom:0; } .tx-md-report h3 { color:#03548a; } .tx-md-report .flex-row-reverse h3 { color:#202020; font-size:1em; } .tx-md-report div.digits { display:flex;width:100%; margin-bottom:24px; } .tx-md-report div.digits > div { width:20%;height:20px; font-size:1.25em; color:#03548a; font-weight:700; } .tx-md-report div.digits > div:nth-last-child(2) { width:18%; } .tx-md-report div.digits > div:last-child { width:2%; } .tx-md-report div.borders { display:flex; width:100%; margin-bottom:20px; } .tx-md-report div.borders > div { width:20%;height:12px;border-bottom:1px solid black;border-left:1px solid black; } .tx-md-report div.borders > div:last-child { border-right:1px solid black; } .tx_mdreport__property .barTable_colValue__grade { float:left; width:20px; margin-right:80px; color:#03548a; font-size:1em; font-weight:700; } .tx_mdreport__property .barTable_colValue__barWrapper { float:left; width:100%; height:24px; background-color:#f0f0f0; } .tx_mdreport__property .showGradeBeneathBar .barTable_colValue__barWrapper { width:calc(100% - 100px); } .tx_mdreport__property .barTable_colValue__bar { float:left; width:0; height:24px; transition: 0.8s all ease; } .tx_mdreport__property.successRate .barTable_colValue__bar { background-color:#ffd400; border-left:3px solid #ffd400; } .tx_mdreport__property.incidencePer10Years .barTable_colValue__bar { background-color:#5182ba; border-left:3px solid #5182ba; } .tx_mdreport__property.average .barTable_colValue__bar { background-color:#a0a0a0; border-left:3px solid #a0a0a0; } .tx_mdreport__property .barTable_colValue__value { display:inline-block; margin-left:6px; padding:4px 0; font-size:1em; font-weight:700; line-height:1; } .tx_mdreport__property .barTable_colValue__value.fullWidth { margin-left:-32px; color:white; } .tx_mdreport__label { line-height:1.5; } .overflow-x-scroll {overflow-x: auto; } @media only screen and (max-width:800px) and (orientation:portrait),only screen and (max-width:800px) and (orientation:landscape) { div.tx_mdreport__introtext { max-width:100%; } } .button { margin-top:1.5em; } .button a.magnificpopupvideo { display:inline-block; background:none; background-color:#ADB71F; border:none; color:white; padding:0.5em 2em; line-height:1; text-align:center; text-decoration:none; } .button a.magnificpopupvideo i.fa { display:inline-block; margin-right:1em; } .no-touch .button a.magnificpopupvideo:hover { position:relative; top:1px; left:1px; } .magnificpopupgalery-container { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:2em; } .magnificpopupgalery-container .galery-item a.magnificpopup { display:block; height:100%; line-height:0.6; } .magnificpopupgalery-container .galery-item { flex:1 1 50%; margin-bottom:1em; } .magnificpopupgalery-container figure:nth-child(odd) { padding-right:0.5em; } .magnificpopupgalery-container figure:nth-child(even) { padding-left:0.5em; } .magnificpopupgalery-container[data-preview="1"] figure.galery-item { flex:1 1 100%; margin-bottom:0; } .magnificpopupgalery-container[data-preview="2"] figure.galery-item { margin-bottom:0; } .magnificpopupgalery-container[data-preview="3"] figure.galery-item { flex:1 1 33.3%; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n-2) { padding-right:0.66em; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n-1) { padding-left:0.33em; padding-right:0.33em; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n) { padding-left:0.66em; } .magnificpopupgalery-container[data-preview="5"] figure.galery-item { flex:1 1 33.3%; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n-2) { padding-right:0.66em; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n-1) { padding-left:0.33em; padding-right:0.33em; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n) { padding-left:0.66em; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(5) { padding-right:0; } .magnificpopupgalery-container[data-preview="6"] figure.galery-item { flex:1 1 33.3%; } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n-2) { padding-right:0.66em; } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n-1) { padding-left:0.33em; padding-right:0.33em; } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n) { padding-left:0.66em; } .magnificpopupgalery-container[data-preview="9"] figure.galery-item { flex:1 1 33.3%; } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n-2) { padding-right:0.66em; } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n-1) { padding-left:0.33em; padding-right:0.33em; } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n) { padding-left:0.66em; } @media screen and (max-width:992px) { .magnificpopupgalery-container[data-preview="3"] figure.galery-item, .magnificpopupgalery-container[data-preview="5"] figure.galery-item, .magnificpopupgalery-container[data-preview="6"] figure.galery-item, .magnificpopupgalery-container[data-preview="9"] figure.galery-item { flex:1 1 50.0%; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n-2) { padding-right:0; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n-1) { padding-left:0; padding-right:0 } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(3n) { padding-left:0; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n-2) { padding-right:0; } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n-1) { padding-left:0; padding-right:0 } .magnificpopupgalery-container[data-preview="5"] figure:nth-child(3n) { padding-left:0; } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n-2) { padding-right:0; } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n-1) { padding-left:0; padding-right:0 } .magnificpopupgalery-container[data-preview="6"] figure:nth-child(3n) { padding-left:0; } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n-2) { padding-right:0; } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n-1) { padding-left:0; padding-right:0 } .magnificpopupgalery-container[data-preview="9"] figure:nth-child(3n) { padding-left:0; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(odd), .magnificpopupgalery-container[data-preview="5"] figure:nth-child(odd), .magnificpopupgalery-container[data-preview="6"] figure:nth-child(odd), .magnificpopupgalery-container[data-preview="9"] figure:nth-child(odd) { padding-left:0; padding-right:0.5em; } .magnificpopupgalery-container[data-preview="3"] figure:nth-child(even), .magnificpopupgalery-container[data-preview="5"] figure:nth-child(even), .magnificpopupgalery-container[data-preview="6"] figure:nth-child(even), .magnificpopupgalery-container[data-preview="9"] figure:nth-child(even) { padding-left:0.5em; padding-right:0; } } @media screen and (max-width:768px) and (orientation:portrait), screen and (max-width:800px) and (orientation:landscape) { .magnificpopupgalery-container .galery-item { flex:1 1 100%; padding:0; } div.magnificpopupgalery-container[data-preview="3"] figure.galery-item, div.magnificpopupgalery-container[data-preview="5"] figure.galery-item, div.magnificpopupgalery-container[data-preview="6"] figure.galery-item, div.magnificpopupgalery-container[data-preview="9"] figure.galery-item { flex:1 1 100.0%; padding:0; } } .campaigncounter .dynamicLayer { overflow: hidden; } .campaigncounter .staticLayer .countervalue { color: #202020; } .campaigncounter .dynamicLayer h2 { font-size: 1.5em; text-transform:none; } .campaigncounter .dynamicLayer .progressbar_container { width: 100%; height: 48px; margin-bottom: 0.25em; border-bottom: 2px solid black; /*background-color:#004078;*/ } .campaigncounter .dynamicLayer .progressbar { height: 100%; /*background-color: #80A0BC;*/ text-align: right; } .campaigncounter .dynamicLayer .progressbar .countervalue { display: block; margin-right: 10px; margin-left: 10px; padding-top: 10px; color: white; } .tx-userdata .sharerButtons {display:flex;flex-wrap:wrap} .tx-userdata .sharerButtons a.btn{min-width:235px} .tx-userdata .sharer:hover {color:#fff!important;border:none;outline:none;} .tx-userdata .sharer_facebook {background-color:#3b5998;} .tx-userdata .sharer_facebook:hover {background-color:#3b5998E6;} .tx-userdata .sharer_whatsapp {background-color:#3aaa34;} .tx-userdata .sharer_whatsapp:hover {background-color:#3aaa34E6;} .tx-userdata .sharer_bluesky {background-color:#0085ff;} .tx-userdata .sharer_bluesky:hover {background-color:#0085ffE6;} .tx-userdata .sharer_linkedin {background-color:#0073b1;} .tx-userdata .sharer_linkedin:hover {background-color:#0073b1E6;} .tx-userdata .sharer_email {background-color:#86bc26;} .tx-userdata .sharer_email:hover {background-color:#9ec951;} /*.tx-userdata .sharer_donate {background-color:#86bc26;font-size:1.5rem;padding:0.96rem 3rem;min-height:55px;} .tx-userdata .sharer_donate:hover {background-color:#9ec951;}*/ .tx-userdata .sharer_exampletext {width:100%;min-height:200px;} /* ====================================================================== */ /* MD-Design fuer orestbida/cookieconsent 3 (ab Fassung 2.4, 17.8.2026) */ /* ====================================================================== */ /* ⚠️ Die Bibliothek wird ueber IHRE Variablen eingefaerbt, nicht durch Ueberschreiben ihrer Regeln. Ein Update der Bibliothek bringt sonst jedes Mal die Gestaltung durcheinander, und man merkt es erst am fertigen Banner. Die vollstaendige Liste der erlaubten Variablen steht in Libs/orestbida/cookieconsent.css - was dort nicht vorkommt, faellt hier STILL aus. ⚠️⚠️ UMSTELLUNG AM 17.8.2026 - HELL STATT DUNKEL. Ansage des Nutzers: das Cookie-Fenster soll aussehen wie der Termin-Dialog der Veranstaltungskarte (md_events/Resources/Public/Css/listMap.css, `dialog.dialog-event`), und das ganze Plugin soll moeglichst KEINE eigenen Werte mitbringen, sondern Bestehendes benutzen. Bis dahin stand hier ein dunkles Banner (rgba(0,15,41,0.92), weisse Schrift) aus der Osano-Zeit. Bemerkenswert: die Bibliothek ist von Haus aus HELL (--cc-bg:#fff) - der Umbau nimmt also groesstenteils eigene Uebersteuerungen WEG, statt neue zu setzen. ⚠️⚠️ ALLE FARBEN STAMMEN AUS DER FARBSEITE der Site (/testseite-farben), keine einzige ist erfunden: #1271ee blue #2e92ff blue:hover #000f29 darkblue #ffffff white #ebebeb gray #cccccc lightgray #a0a0a0 mediumgray #606060 darkgray #003567 "Background" ⚠️ Wer hier einen Wert ergaenzt, nimmt ihn von dieser Seite - nicht aus dem Gefuehl. ⚠️⚠️ DIE BEIDEN KNOEPFE BLEIBEN GLEICHGEWICHTIG (OH Digitale Dienste Rn. 135). Die Bibliothek besorgt das ueber `equalWeightButtons: true`; wer hier unterschiedliche Groessen oder Schriftstaerken setzt, hebelt es aus. Deshalb unterscheiden sich "Zustimmen" und "Ablehnen" unten NUR in der Fuellung, nicht in Groesse oder Gewicht - dieselbe Loesung, die das dunkle Banner schon hatte. ── KONTRASTE, am 17.8.2026 GERECHNET (nicht geschaetzt) ────────────────────── Fliesstext #000f29 auf #ffffff .......... 19,08:1 OK Zweitrang #606060 auf #ffffff ........... 6,29:1 OK Zweitrang #606060 auf #ebebeb ........... 5,27:1 OK Link #1271ee auf #ffffff ........... 4,54:1 OK Knopf #ffffff auf #1271ee ........... 4,54:1 OK Fokusring #003567 auf #ffffff ........... 12,32:1 OK ⚠️ ZWEI bewusst in Kauf genommene Werte, beide GEERBT und nicht hier entstanden: Knopf-Hover #ffffff auf #2e92ff ........... 3,15:1 unter 4,5 -> derselbe Sprung, den die Buttons der Site, das Video und die Karte machen. Vom Nutzer am 12.8.2026 ausdruecklich so entschieden ("wie bei den buttons auch #2e92ff"). Wer das aendert, aendert es an allen vier Stellen. Schalter AUS #cccccc gegen #ffffff ........ 1,61:1 unter 3,0 -> das ist EXAKT der Aus-Zustand der Kartenlegende (listMap.css, .slider). Uebernommen, weil der Auftrag "an die Karte angleichen" lautet. Der Unterschied AN/AUS traegt trotzdem: #1271ee gegen #cccccc. ⏰ Wer die 3:1 will, setzt --cc-toggle-off-bg auf #606060 (6,29:1) - dann weicht der Schalter aber sichtbar von der Karte ab. Das ist eine Entscheidung, keine Reparatur. ────────────────────────────────────────────────────────────────────────────── */ #cc-main { /* Schrift der Site, nicht die Systemschrift der Bibliothek. */ --cc-font-family: "Source Sans Pro", sans-serif; /* Grund und Schrift wie die weissen Inhaltskarten des Karten-Dialogs (listMap.css: `dialog .dialog-event-item { background:#ffffff }`). */ --cc-bg: #ffffff; --cc-primary-color: #000f29; --cc-secondary-color: #606060; --cc-link-color: #1271ee; /* Zustimmen - die Aktionsfarbe der Site, wie die Zoomknoepfe der Karte und der Schliessknopf des Termin-Dialogs. */ --cc-btn-primary-bg: #1271ee; --cc-btn-primary-color: #ffffff; --cc-btn-primary-border-color: #1271ee; --cc-btn-primary-hover-bg: #2e92ff; --cc-btn-primary-hover-color: #ffffff; --cc-btn-primary-hover-border-color: #2e92ff; /* Ablehnen - GLEICHE Groesse und Schriftstaerke, nur ungefuellt. Auf hellem Grund ist die Kontur die blaue Aktionsfarbe (auf dem alten dunklen Banner war sie weiss); im Hover fuellt sie sich wie der Erstknopf. */ --cc-btn-secondary-bg: #ffffff; --cc-btn-secondary-color: #1271ee; --cc-btn-secondary-border-color: #1271ee; --cc-btn-secondary-hover-bg: #2e92ff; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: #2e92ff; /* Eckig wie alles andere auf der Site - die Bibliothek haette .4rem. */ --cc-btn-border-radius: 0; --cc-modal-border-radius: 0; /* Trenner und Gruppenbloecke in den Grautoenen der Palette. ⚠️⚠️ HOVER GEHT HELLER, NICHT DUNKLER. Vom Nutzer am 17.8.2026 gemeldet: "normales button / hover verhalten ist, dass das element dunkler / gesaettigter ist und auf hover heller wird." Genau so macht es die ganze Site - #1271ee wird im Hover zu #2e92ff, also heller. Mein erster Entwurf hatte es umgedreht (#ebebeb -> #cccccc) und damit gegen die Hausregel gebaut. ⚠️ Zweiter Einwand desselben Satzes: der Hover war #cccccc - und das ist die Farbe des AUSGESCHALTETEN Schalters. Dieselbe Farbe fuer "hier zeigt die Maus hin" und fuer "dieser Schalter ist aus" laesst zwei verschiedene Aussagen gleich aussehen. Der Hover ist deshalb jetzt Weiss. ⚠️ Damit der Block auf weissem Grund nicht verschwindet, traegt er in BEIDEN Zustaenden eine #cccccc-Kontur. Die Kontur ist kein Fuellton und kollidiert deshalb nicht mit der Aussage des Schalters. ⚠️ FESTGELEGT VOM NUTZER am 17.8.2026: "deaktiviertes toggle auf a0a0a0, ausklapper auf ccc, hover auf ebebeb". Damit steht eine durchgehende Staffelung, in der jeder Zustand seinen eigenen Ton hat und keiner doppelt vorkommt: #a0a0a0 Schalter AUS (am dunkelsten, siehe --cc-toggle-off-bg unten) #cccccc Gruppenblock Ruhe #ebebeb Gruppenblock Hover -> heller als Ruhe, wie ueberall auf der Site #ffffff Gruppenblock aufgeklappt Die frueheren Fassungen dieses Blocks hatten den Hover teils dunkler als die Ruhe und teils in der Farbe des ausgeschalteten Schalters - beides ist damit erledigt. */ --cc-separator-border-color: #ebebeb; --cc-section-category-border: #cccccc; --cc-cookie-category-block-bg: #cccccc; --cc-cookie-category-block-border: #cccccc; --cc-cookie-category-block-hover-bg: #ebebeb; --cc-cookie-category-block-hover-border: #cccccc; /* ⚠️ AUFGEKLAPPT BLEIBT DER BLOCK FARBIG, nicht weiss. Vom Nutzer am 17.8.2026 gemeldet: "aufgeklappt soll es auch eine hintergrundfarbe fuer das element geben, nicht nur weiss." Sonst loest sich der Block beim Aufklappen im weissen Fenstergrund auf, und man sieht nicht mehr, wo eine Gruppe anfaengt und aufhoert. ⚠️⚠️ FALLE: die zweite Variable heisst zwar "...-hover-bg", die Bibliothek benutzt sie im aufgeklappten Zustand aber als RAHMENFARBE: .pm__section--toggle.is-expanded { --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg); --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg); } Wer sie nach dem Namen belegt und Weiss einsetzt, macht den Rahmen unsichtbar - ohne dass eine Regel fehlt oder etwas meldet. Deshalb steht hier die Konturfarbe. ⚠️ ENDSTAND nach drei Zwischenschritten am 17.8.2026 - hier kurz, damit niemand einen davon fuer den gewollten Zustand haelt: erst weiss (Block loeste sich im Fenstergrund auf), dann #ebebeb ("kann heller sein"), dann wieder weiss, und schliesslich die Ansage "aufgeklappt auch ccc". Aufgeklappt traegt die Kopfzeile also DIESELBE Farbe wie zugeklappt: der Block behaelt sein Aussehen, geoeffnet wie geschlossen, und nur der gedrehte Pfeil zeigt den Zustand an. ⚠️ Gemessen: die Inhaltsflaeche darunter (.pm__section-desc) ist transparent und war von all dem nie betroffen - es ging immer nur um die Kopfzeile. */ --cc-cookie-category-expanded-block-bg: #cccccc; --cc-cookie-category-expanded-block-hover-bg: #cccccc; /* ── Schalter wie die Kartenlegende ────────────────────────────────────── Vorbild: listMap.css, `.mdevents_map .legend-item .toggleswitch`. Dort: 40x24 Pille, Radius 24px, weisser 18px-Knopf, AUS #cccccc, AN = die Kategoriefarbe. Hier ist "AN" die Aktionsfarbe der Site. ⚠️ Der GESPERRTE Zustand (Gruppe "notwendig", nicht abwaehlbar) hat in der Karte KEIN Vorbild - dort ist nichts gesperrt. Deshalb ist er der einzige Wert, der frei zu waehlen war: #606060 (darkgray, 6,29:1). Die naechstliegende Wahl #a0a0a0 kam nur auf 2,61:1 und haette die 3:1 gerissen. */ --cc-toggle-on-bg: #1271ee; /* ⚠️ #a0a0a0, festgelegt vom Nutzer am 17.8.2026 - nicht mehr das #cccccc der Kartenlegende. Zwei Gruende, beide gemessen: der Ton gehoert allein dem AUS-Zustand und kommt sonst nirgends im Fenster vor, und der Kontrast steigt von 1,61:1 auf 2,61:1 gegen Weiss. Die 3:1 fuer grafische Bedienelemente sind damit immer noch knapp verfehlt - #606060 kaeme auf 6,29:1, weicht aber deutlicher von der Karte ab. Bewusste Wahl des Nutzers, kein Versehen. */ --cc-toggle-off-bg: #a0a0a0; --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-off-knob-bg: #ffffff; --cc-toggle-readonly-bg: #606060; --cc-toggle-readonly-knob-bg: #ffffff; --cc-toggle-enabled-icon-color: #ffffff; --cc-toggle-disabled-icon-color: #ffffff; --cc-toggle-readonly-knob-icon-color: #606060; --cc-pm-toggle-border-radius: 24px; --cc-footer-bg: #ebebeb; --cc-footer-color: #606060; --cc-footer-border-color: #cccccc; /* Der Schleier hinter dem Einstellungsdialog - wie der Grund des Karten-Dialogs. */ --cc-overlay-bg: rgba(0, 15, 41, 0.8); } /* SCHRIFTGROESSE = FLIESSTEXT (Ansage des Nutzers 17.8.2026). ⚠️ Die Bibliothek stellt dafuer KEINE Variable bereit - die --cc-Liste kennt nur --cc-font-family. Deshalb ausnahmsweise eine echte Regel statt einer Variablen. Gemessen auf dev: body steht auf 16px/24px, also 1rem/1.5. Vorher lief das Banner auf der Vorgabe der Bibliothek und war damit kleiner als der Text daneben. */ #cc-main, #cc-main .cm__desc, #cc-main .pm__section-desc { font-size: 1rem; line-height: 1.5; } /* ── Schriftstufen: 24 / 18 / 16 ───────────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 in zwei Schritten vorgegeben: "cookie-einstellung groesser wie eine ueberschrift", dann "Gruppennamen auch etwas groesser, dann auch 'wir fragen, bevor wir laden' genau so gross. und cookie-einstellung groesser als diese." Vorher lagen alle drei fast gleichauf und die Rangfolge war nicht zu sehen: Cookie-Einstellungen 16,0 px Wir fragen … 16,8 px Gruppennamen 15,2 px ⚠️⚠️ DIE WERTE STAMMEN AUS DER SCHRIFTSEITE DER SITE, /testseite-schriften - das ist die verbindliche Skala, nicht mein Augenmass: H1 28px / 35px / 600 H2 24px / 30px / 600 -> Fenstertitel "Cookie-Einstellungen" H3 20px / 30px / 600 -> Abschnitts- und Gruppennamen H4 18px / 27px / 600 p 16px / 24px / 400 -> Fliesstext ⚠️ Ich hatte zuvor an einzelnen Inhaltselementen der Startseite gemessen und war dabei auf 18px/27px fuer die Gruppennamen gekommen - die Seite lieferte dort ein H4. Richtig ist H3. Und mein damaliger Vermerk "h3 ist 32px" war ein Messfehler an einem Element mit eigener Klasse; laut Schriftseite ist H3 20px. Im Zweifel die Schriftseite lesen, nicht ein beliebiges Element abgreifen. ⚠️ Weight 600 stand ueberall schon so - gefehlt hat allein die Groesse. */ #cc-main .pm__title { font-size: 1.5rem; line-height: 1.875rem; } #cc-main .cm__title, #cc-main .pm__section-title { font-size: 1.25rem; line-height: 1.875rem; } /* Knoepfe: 18px und BOLD 700. ⚠️ Die Schriftseite sagt es woertlich in ihrer Richtlinie: "4) Buttons sind Bold 700." Am `.btn` der Site nachgemessen: 18px / 18px / 700. Die Bibliothek liefert ihre Knoepfe kleiner und mit Gewicht 600 - sie standen damit unter der Fliesstext- groesse des Fensters daneben. ⚠️⚠️ Groesse und Gewicht gelten fuer BEIDE Knoepfe gleich. "Alle erlauben" und "Nur notwendige" muessen gleichgewichtig bleiben (OH Digitale Dienste Rn. 135) - eine Abstufung genau hier waere der klassische Weg, die Ablehnung unauffaelliger zu machen. Deshalb steht in beiden Selektoren derselbe Wert. */ #cc-main .cm__btn, #cc-main .pm__btn { font-size: 1.125rem; font-weight: 700; } /* Rahmen des Fensters wie beim Karten-Dialog: eckig, ohne Schlagschatten-Spielerei. ⚠️ Der Weichzeichner des alten dunklen Banners ist WEG. Er hatte dort einen Zweck (die Seite schien durch den halbdurchsichtigen Grund), auf weissem Grund erzeugt er nur Rechenlast ohne sichtbare Wirkung. */ #cc-main .cm, #cc-main .pm { border: 1px solid #cccccc; } /* ⚠️ KEIN ANIMIERTER UNTERSTREICHUNGS-HOVER (Ansage des Nutzers 17.8.2026). Der Link "Weitere Informationen zum Datenschutz" traegt die Klasse `cc__link` und erbt sonst die Link-Gestaltung der Site, die die Unterstreichung einblendet. Hier steht sie fest an: sichtbar, ohne Uebergang. ⚠️⚠️ Der Fokusring darf dabei NICHT mitverschwinden - er ist eine Barrierefreiheits-Anforderung, keine Zier. Deshalb nur `transition` und `background-image` zuruecknehmen, NICHT `outline`. */ #cc-main .cc__link { background-image: none; text-decoration: underline; transition: none; } #cc-main .cc__link:hover { color: #2e92ff; text-decoration: underline; } /* Schliessknopf wie im Karten-Dialog. Vorbild: listMap.css, `dialog.dialog-event .btn-close-container > button.close` - 45x45, #1271ee, weisses Kreuz, Hover #2e92ff, Uebergang 0.4s. ⚠️⚠️ DAS KREUZ IST DAS SVG DER BIBLIOTHEK, KEINE FONT-AWESOME-GLYPHE. Der erste Entwurf am 17.8.2026 blendete das SVG aus und setzte stattdessen ein ::before mit "\f00d" - wie es die Karte tut. Ergebnis auf dev: ein blaues Quadrat OHNE Kreuz. Nachgemessen war der Inhalt korrekt (Zeichencodes 0x22, 0xf00d, 0x22), die Schrift geladen und weiss - die Glyphe wurde trotzdem nicht sichtbar; der Knopf traegt overflow:hidden und line-height:normal aus der Bibliothek. Statt das weiter aufzudroeseln, bleibt das mitgelieferte SVG stehen und wird nur eingefaerbt. Das ist ZUGLEICH das, was der Auftrag verlangt ("keine neuen Styles, auf Bestehendes zurueckgreifen") - und es ueberlebt ein Update der Bibliothek. ⚠️ Nicht "reparieren", indem die Glyphe zurueckkommt. Der Weg war gemessen erfolglos. ⚠️ Messfalle, die dabei fast eine Fehldiagnose erzeugt haette: getComputedStyle() liefert den Inhalt als Zeichenkette mit einem PUA-Zeichen, und das ueberlebt den Weg aus dem Browserwerkzeug NICHT - der Wert sah wie ein leerer String aus. Erst die Ausgabe als ZAHLENliste zeigte, dass er stimmt. */ /* ⚠️ Der Knopf liegt UEBER dem Fenster, nicht darin - wie beim Karten-Dialog, wo `.btn-close-container` mit margin-bottom:1rem ueber der weissen Karte steht und `dialog.dialog-event` selbst gar keinen Grund hat. ⚠️⚠️ `.pm` traegt von der Bibliothek `overflow:hidden` und wuerde den herausragenden Knopf abschneiden. Das Aufheben ist hier gefahrlos, weil das INNERE Scrollen an `.pm__body` haengt (eigenes overflow:auto, gemessen 686x445) und nicht an `.pm`. */ #cc-main .pm { overflow: visible; } /* ── Hoehe waechst mit dem Inhalt, wie beim Karten-Dialog ──────────────────────── ⚠️ Vom Nutzer am 17.8.2026 gemeldet ("hoehe automatisch anpassen ... oder hoehe wie beim dialog"): bei drei zugeklappten Gruppen stand unter dem letzten Block ein grosses leeres Feld. Ursache ist die Bibliothek: #cc-main .pm--box { height: calc(100% - 2em); max-height: 37.5em } also eine feste Hoehe, unabhaengig vom Inhalt. Der Karten-Dialog macht es umgekehrt und genau so, wie es hier sein soll: das Fenster selbst waechst mit, gedeckelt wird nur der INHALTSBEREICH (listMap.css: `dialog .dialog-event-group { max-height:70vh; overflow:auto }`). ⚠️ Die Deckelung an `.pm` bleibt trotzdem stehen - ohne sie koennte das Fenster bei vielen aufgeklappten Cookie-Tabellen ueber den Schirm hinauswachsen, und der Schliessknopf sitzt oberhalb der Oberkante. Er waere dann nicht mehr erreichbar. */ #cc-main .pm--box { height: auto; max-height: calc(100% - 2em); } #cc-main .pm__body { max-height: 70vh; } #cc-main .pm__close-btn, #cc-main .cm__close-btn { position: absolute; top: -3.8125rem; /* 45px Knopf + 16px Abstand, entspricht dem margin-bottom:1rem der Karte */ right: 0; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; border: none; border-radius: 0; background: #1271ee; transition: 0.4s; } /* ⚠️⚠️ DAS SVG DER BIBLIOTHEK WIRD AUSGEBLENDET, das Kreuz kommt als Font-Awesome-Glyphe - so macht es der Karten-Dialog (listMap.css: `button.close::before { content:"\f00d" }`), und der Nutzer hat den Unterschied am 17.8.2026 gesehen: das SVG der Bibliothek ist duenner gestrichelt und sitzt anders im Quadrat. ⚠️ Ausgeblendet wird das umschliessende , NICHT nur das darin. Beim ersten Versuch stand nur `svg { display:none }` da - der leere span blieb als Flex-/Blockelement stehen, und die ::before-Glyphe war im 45px-Quadrat nicht zu sehen. Zusammen mit display:flex + Zentrierung sitzt sie jetzt mittig. ⚠️ font-weight:900 gehoert dazu: "Font Awesome 6 Free" liegt auf den Sites nur als solid-Schnitt, und ohne die 900 waehlt der Schriftabgleich zwar denselben Schnitt, aber man verlaesst sich dabei auf ein Verhalten statt auf eine Angabe. */ #cc-main .pm__close-btn > span, #cc-main .cm__close-btn > span { display: none; } #cc-main .pm__close-btn::before, #cc-main .cm__close-btn::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 1.5rem; line-height: 1; color: #ffffff; } .no-touchevents #cc-main .pm__close-btn:hover, .no-touchevents #cc-main .cm__close-btn:hover, #cc-main .pm__close-btn:active, #cc-main .cm__close-btn:active { background: #2e92ff; } /* ── Schalter wie die Kartenlegende ────────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 gemeldet: "bei den toggles der karte gibt es keine harken und kein x, auch sehen die toggles insgesamt anders aus." Stimmt - die Bibliothek legt ein ✓ und ein ✗ in die Bahn und baut 50x23 statt 40x24. Vorbild (listMap.css, `.mdevents_map .legend-item .toggleswitch`): Bahn 40x24, Radius 24px, ohne Ring und ohne Schatten Knopf 18x18, weiss, 3px Rand, im Ein-Zustand translateX(16px) ⚠️ Die fuenf Zahlen 40/24/18/3/16 sind EIN Satz und haengen zusammen - genau wie drueben in listMap.css vermerkt. Wer eine davon aendert, aendert alle. */ #cc-main .toggle__icon-on, #cc-main .toggle__icon-off { display: none; } #cc-main .toggle__icon { width: 40px; height: 24px; border-radius: 24px; box-shadow: none; } #cc-main .toggle__icon-circle { top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; box-shadow: none; } #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(16px); } /* ── Ausklapp-Pfeile und Uebergangszeit ────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 nachgereicht: "auch die ausklapper pfeile und die transision von 0.4 bitte aus dem design uebernehmen." Vorbild ist der Karten-Dialog (listMap.css): dialog.dialog-event .event-item-category::before -> "\f0da" zugeklappt (caret-right) "\f0d7" aufgeklappt (caret-down) ⚠️ Hier wird NICHT der Inhalt getauscht, sondern EIN Zeichen gedreht: "\f0da" um 90 Grad ist deckungsgleich mit "\f0d7", und nur so laesst sich der Wechsel ueberhaupt weich fuehren. Ein Inhaltswechsel springt hart - und die 0,4 s, die ausdruecklich mitgewuenscht sind, waeren wirkungslos. Dieselbe Loesung benutzt die Kartenlegende bereits (`.legend-filter-angle::before`, dort mit "\f105"). ⚠️ Das Icon sitzt VORNE, an der Stelle, an der die Bibliothek ihren eigenen Pfeil hat: ein 20px-SVG in einem gefuellten Kreis, absolut bei left:18px, wofuer der Titel bereits padding-left:3.4em reserviert. Der Kreis entfaellt ersatzlos - der Karten-Dialog setzt dort einen blanken Caret ohne Hintergrund. ⚠️⚠️ ZWEI Stolpersteine, beide am 17.8.2026 auf dev gemessen, nicht vermutet: 1. `#cc-main .pm__section-arrow { display:none }` GREIFT NICHT. Die Bibliothek schreibt `#cc-main .pm__section--expandable .pm__section-arrow{display:flex}` - Spezifitaet 1-2-0 gegen 1-1-0, ihre Regel gewinnt. Es standen dadurch zwei Pfeile nebeneinander. Der Selektor unten nennt deshalb dieselbe Klassenkette. 2. Der Aufklapp-Zustand haengt an der Klasse `is-expanded` AM ABSCHNITT, nicht an `aria-expanded` am Knopf. Mit dem Attributselektor drehte sich nichts (gemessen: transform blieb in beiden Zustaenden "none"). */ #cc-main .pm__section--expandable .pm__section-arrow { display: none; } /* ⚠️ ABSTAND: der Pfeil steht DICHT am Text, nicht in einem breiten Feld davor. Vom Nutzer am 17.8.2026 an einem Akkordeon der Site gezeigt ("Ausklapper wie hier ... bzgl. abstaende"). Die Bibliothek reserviert fuer ihren Kreis-Pfeil `padding-left: 3.4em` am Titel - bei den 20px Schriftgroesse dieser Zeile sind das rund 68px, und der blanke Caret stand darin verloren weit links. Gerechnet wird jetzt wie im Karten-Dialog, der `margin-right: 8px` hinter dem Caret setzt: Pfeil bei 1rem, Pfeil 1rem breit -> endet bei 2rem Text bei 2.5rem -> 0,5rem = 8px Abstand ⚠️ NUR padding-left ueberschreiben. Die senkrechten Innenabstaende der Zeile stammen aus derselben Kurzschreibweise der Bibliothek - wer `padding` statt `padding-left` setzt, plattet die Zeile mit. */ #cc-main .pm__section--expandable .pm__section-title { padding-left: 2.5rem; } /* ⚠️ DIE AUFGEKLAPPTE INHALTSFLAECHE BLEIBT WEISS. Ansage des Nutzers am 17.8.2026 ("den bereich nicht faerben ... oder weiss faerben"), nachdem die Kopfzeile auf #cccccc gesetzt wurde: die Bibliothek zieht denselben Wert auch unter Beschreibung und Cookie-Tabelle, weil beide `--cc-cookie-category-block-bg` benutzen und die Variable im aufgeklappten Zustand umdefiniert wird. Gefaerbt werden soll aber nur die KOPFZEILE - der Text darunter steht auf dem Fenstergrund. ⚠️ Ausgeschrieben und nicht ueber die Variable geloest: die Variable traegt hier zwei Bedeutungen (Kopfzeile UND Inhaltsflaeche), eine Aenderung an ihr faerbt immer beides. Nur eine eigene Regel trennt die zwei. */ #cc-main .pm__section--toggle .pm__section-desc-wrapper, #cc-main .pm__section--toggle .pm__section-desc { background: #ffffff; } #cc-main .pm__section--expandable .pm__section-title::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 1rem; line-height: 1; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; text-align: center; transition: transform 0.4s; } #cc-main .pm__section--expandable.is-expanded .pm__section-title::before { transform: translateY(-50%) rotate(90deg); } /* ⚠️ 0,4 s ueberall, wie im Kartendesign. Die Bibliothek liefert 0,25 s an den Schaltern und 0,15 s an den Knoepfen - beides schneller als alles andere auf der Site (`transition:0.4s` steht in listMap.css an Zoomknoepfen, Schliessknopf, Schalter und Kategoriezeile). ⚠️ An den Knoepfen werden die EINZELNEN Eigenschaften genannt und nicht `all`: ein pauschales `all` zoege auch Groessen- und Positionswechsel mit, und die Knoepfe muessen gleichgewichtig BLEIBEN (OH Rn. 135) - ein animierter Groessenunterschied waere genau das, was die Regel verhindern soll. */ #cc-main .toggle__icon, #cc-main .toggle__icon-circle { transition: transform 0.4s ease, background-color 0.4s ease; } #cc-main .cm__btn, #cc-main .pm__btn { transition: background-color 0.4s, border-color 0.4s, color 0.4s; } /* ── DAS BANNER STEHT HOEHER, STATT PLATZ ANZUHAENGEN (18.8.2026) ──────────── Ansage des Nutzers: "setz den banner etwas hoeher, so dass man einen kleinen abstand unter dem banner hat, so das man, wenn man moechte dazwischen das Impressum oder Datenschutz anklicken kann. Ohne Fussraumluecke" - fester Wert fuer ALLE Sites. Zuerst 50px probiert, am 18.8.2026 auf 100px erhoeht. Vorher haengte fussraumFreihalten() dem die volle BANNERHOEHE als padding-bottom an, damit die Fusszeile ueber das Banner geschoben werden kann. Auf sprezu LIVE gemessen: 397px bei 1920 Breite, 373px bei 390 - ein leerer Streifen unter dem Footer, solange das Banner steht. Genau der sollte weg. ⚠️ Die Bibliothek setzt `#cc-main .cm--bottom { bottom: var(--cc-modal-margin) }`, also 1rem = 16px. Hier werden daraus 100px. ⚠️⚠️ DIE ZWEI REGELN UNTEN GEHOEREN ZUSAMMEN. Das Anheben allein bringt gar nichts: fussraumFreihalten() bemisst den Fussraum an der HOEHE des Banners, nicht an seiner Lage - die Luecke bliebe stehen und der Abstand kaeme obendrauf. Wer eine der beiden Regeln entfernt, bekommt entweder die Luecke zurueck oder ein Banner, das die Fusszeile wieder verdeckt. ⚠️ Der Fussraum ist ein INLINE-Stil am - den schlaegt nur `!important`. Eng gefasst auf `html.show--consent`, weil er genau dann gesetzt wird; vorher geprueft, dass keine der Sites selbst ein padding-bottom am body fuehrt (die Treffer waren durchweg `body:after`-Debugmarken). ⚠️ Das Skript RECHNET den Wert weiterhin und setzt ihn - er wird hier nur ueberschrieben. Das ist fuer den Versuch Absicht: vollstaendig reversibel und ohne die Fassungsnummer des eID-Skripts anzufassen (eine CSS-Datei bekommt ihren Cache-Brecher aus der mtime, das eID-Skript nicht). Bleibt die Loesung, gehoert das Abschalten in fussraumFreihalten() selbst - dann MIT v=-Bump. 🔴🔴 OFFEN UND UNGEPRUEFT, BEVOR DAS AUF PROD GEHT: ob 100px reichen, damit Impressum und Datenschutz am Seitenende anklickbar BLEIBEN (OH Digitale Dienste, Rn. 121). Der Spalt zeigt am Scroll-Anschlag die letzten 100px des Dokuments - liegt die Linkzeile hoeher, ist sie verdeckt, und das war der ganze Zweck des Fussraums. Der bisherige Weg war haesslich, aber er MASS und zog automatisch nach (247-499px je nach Breite und Textlaenge); dieser hier ist ein fester Wert an einer Rechtspflicht. Im Browser nachmessen. */ #cc-main .cm--bottom { bottom: 100px; } html.show--consent body { padding-bottom: 0 !important; } /* Der dauerhafte Widerrufsreiter. ⚠️⚠️ Er ersetzt den `.cc-revoke`-Reiter der alten Bibliothek. orestbida bringt keinen mit, und ohne ihn gaebe es nach der Entscheidung KEINEN sichtbaren Weg mehr, sie zu aendern - Verstoss gegen Art. 7 Abs. 3 S. 4 DS-GVO und OH Rn. 126. Am 14.8.2026 nachgemessen: ohne diesen Knopf null Widerrufswege auf der Seite. ⚠️⚠️ ER BLEIBT UNVERAENDERT, auch nachdem das Fenster hell geworden ist. Beim Umbau am 17.8.2026 hatte ich ihn auf deckendes #1271ee gezogen; der Nutzer hat das noch am selben Tag zurueckgewiesen ("das flag auf der Startseite links am rand unten soll wieder aussehen wie vorher"). Der Grund traegt auch fachlich: der Reiter liegt ueber der SEITE, nicht im Fenster, und muss sich gegen beliebige Seiteninhalte behaupten - der durchscheinende Weissschleier mit Weichzeichner tut das auf hellen wie auf dunklen Hintergruenden. Nicht erneut an die Fenstergestaltung angleichen. */ .md-consent-reiter { position: fixed; left: 0; bottom: 100px; z-index: 100; display: flex; justify-content: center; align-items: center; text-align: center; /* ⚠️ Die 1.875rem OBEN sind kein Zierrat - sie sind der Platz, auf dem das Cookie-Symbol sitzt (`::before`, absolut bei top:8px). Wer sie kuerzt, legt das Symbol in das Wort "Cookies". Genau das ist bis zum 19.8.2026 auf den Landesverbands-Sites passiert, weil der Reiter als