Line up the consent notice footer in 1.14.2

"Einzeln wählen" sits on the left and the legal links on the right, on one baseline; opened, the disclosure takes the full width and the links move below it, right-aligned. `.consent-bar p` outranked `.consent-links` and took the right margin away, so the links selector now carries the element. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-15 07:04:08 +02:00
1 parent 65b11563a8
commit 99ebe70e42
@@ -4,6 +4,10 @@ Lokaler CMS-Prototyp für PHP-Webhosting mit erstem visuellen Editor. Symfony 7.

 Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.

+## Fußzeile des Einwilligungshinweises (ab 1.14.2)
+
+„Einzeln wählen“ steht links, Datenschutz und Impressum rechts auf einer Linie; aufgeklappt nimmt die Einzelwahl die volle Breite, die Links rutschen rechtsbündig darunter.
+
 ## Einwilligungshinweis gestalten, Nach-oben-Knopf auch bei offener Frage (ab 1.14.1)

 **Der Einwilligungshinweis lässt sich gestalten**, unter **Einstellungen → Einwilligung → Aussehen des Hinweises**: Anordnung (Karte unten in der Mitte, Leiste über die volle Breite, kleine Karte rechts unten), Form (abgerundet, rund, eckig – gilt für Fläche und Knöpfe zusammen), eigene Überschrift und vier Farben (Fläche, Schrift, Knopf „Alle akzeptieren“, Schrift auf dem Knopf), jeweils als `#hex` oder `@schlüssel` aus der Palette. Leer heißt Papier, Tinte und Akzent aus dem Design. Die Fläche trägt einen schmalen Streifen und ein Symbol in der Knopffarbe; „Nur notwendige“ bleibt ein gleich großer Rahmenknopf daneben. Dieselben Farben gelten auf `/einwilligung` und in den Beitragsarchiven.
@@ -1 +1 @@
-1.14.1
+1.14.2
@@ -1,5 +1,13 @@
 # Projektstatus

+## 1.14.2 – Einwilligungshinweis: Fußzeile aufgeräumt (15.09.2026)
+
+**Anlass:** Umut fand „Einzeln wählen“ und die Rechtslinks unordentlich und schlug links/rechts vor.
+
+**Umgesetzt (`consent-banner.html.twig`, `site.css`):** Beide stehen in einer Zeile `.consent-foot` – Einzelwahl links, Datenschutz · Impressum rechts, auf gemeinsamer Grundlinie. Aufgeklappt nimmt die Einzelwahl die volle Breite (`[open]{flex-basis:100%}`), die Links rutschen rechtsbündig darunter. Die Links stehen ohne Punkt dazwischen mit 14 px Abstand; ohne beide Adressen entfällt die Zeile. Ein Stolperstein: `.consent-bar p` schlug `.consent-links` und nahm den rechten Rand weg – der Selektor heißt jetzt `.consent-bar p.consent-links`.
+
+**Geprüft:** vier Gestaltungsvarianten auf 1440 und 390 px, zu- und aufgeklappt (Screenshots `reports/consent-look/*-offen.png`), sechs Einwilligungstests grün. Veröffentlicht als 1.14.2, siehe Eintrag oben.
+
 ## 1.14.1 veröffentlicht (15.09.2026)

 Tag `v1.14.1` (Commit `0bdcc7f`), Release: https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.14.1. Enthält den gestaltbaren Einwilligungshinweis, den bei offener Frage erreichbaren Nach-oben-Knopf, den korrigierten Abstand unten und die orangen Beschriftungen im Editor; dazu `860bed9` (Seed-Skript Tagespflege Moldovan, nicht im Archiv).
@@ -143,7 +143,11 @@ p{hyphens:auto}
 .consent-button:hover{filter:brightness(.94)}
 .consent-decline:hover,.consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)}
 .consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px}
-.consent-details{margin-top:14px}
+/* Fusszeile der Frage: Einzelwahl links, Rechtslinks rechts, auf einer Linie. Aufgeklappt
+   nimmt die Einzelwahl die volle Breite und die Links rutschen rechtsbuendig darunter. */
+.consent-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-top:14px}
+.consent-details{flex:0 1 auto;min-width:0}
+.consent-details[open]{flex-basis:100%}
 .consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
 .consent-details>summary::-webkit-details-marker{display:none}
 .consent-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
@@ -153,7 +157,8 @@ p{hyphens:auto}
 .consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
 .consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
 .consent-choice{margin-top:14px;flex:none;width:auto}
-.consent-links{margin:14px 0 0;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
+/* Eigener Selektor mit Element, sonst gewinnt `.consent-bar p` und nimmt den Rand rechts weg. */
+.consent-bar p.consent-links{margin:0 0 0 auto;display:flex;gap:14px;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
 .consent-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
 .consent-links a:hover{color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
 /* Leiste: über die ganze Breite am unteren Rand, auf breiten Bildschirmen Text links und Knöpfe
@@ -18,6 +18,9 @@
            <button class="consent-button consent-accept" type="submit" name="choice" value="all">Alle akzeptieren</button>
            <button class="consent-button consent-decline" type="submit" name="choice" value="none">Nur notwendige</button>
        </div>
+        {# Eine Zeile: links die Einzelwahl, rechts die Rechtslinks. Aufgeklappt nimmt die
+           Einzelwahl die ganze Breite, die Links rutschen darunter. #}
+        <div class="consent-foot">
        <details class="consent-details">
            <summary>Einzeln wählen</summary>
            <ul class="consent-groups">
@@ -32,9 +35,12 @@
            </ul>
            <button class="consent-button consent-choice" type="submit" name="choice" value="some">Auswahl speichern</button>
        </details>
+        {% if consent.privacyPath or consent.imprintPath %}
        <p class="consent-links">
            {% if consent.privacyPath %}<a href="/{{ consent.privacyPath }}">Datenschutz</a>{% endif %}
-            {% if consent.imprintPath %} · <a href="/{{ consent.imprintPath }}">Impressum</a>{% endif %}
+            {% if consent.imprintPath %}<a href="/{{ consent.imprintPath }}">Impressum</a>{% endif %}
        </p>
+        {% endif %}
+        </div>
    </form>
 </section>
@@ -1 +1 @@
 .14.1
 .14.2