/* ============================================================================ DigiPagina 0.1 — Designsprache der Bürgerseite Massgeblich ist DESIGN.md. Wer hier einen Wert aendert, aendert ihn dort mit. Kein Framework. Kein JavaScript. Jedes Mass steht einmal, hier oben. ============================================================================ */ /* --- 1. Fuss und Verzeichnis ---------------------------------------------- */ :root { /* Farben — DESIGN.md 3 */ --dp-text: #454549; --dp-titlu: #2e3438; --dp-accent: #2467af; --dp-accent-slab: rgba(91, 178, 226, .18); --dp-meta: #7c6556; --dp-tag: #5a2908; /* --dp-mut (#9fa3a6) ist am 26.08.2026 AUSSER DIENST gestellt und steht deshalb nicht mehr hier. Er war am laufenden Bild gemessen und getreu uebernommen — und er traegt 2.54:1 gegen Weiss. Das reisst WCAG 1.4.3 (4,5:1) und verfehlt auch die 3:1 fuer grossen Text und fuer Zustandszeichen (1.4.11). Er stand an sechs Stellen, fuenf davon mit Text: Fusszeile, Datumzeile der Concursuri, Trefferzahl und Trefferzeilen der Suche. Alle sechs tragen jetzt --dp-desc (#555555, 7.46:1). DESIGN.md 3 und berichte/ZUGAENGLICHKEIT_2026-08-26.md §3.3. Ein Token, das niemand benutzt, aber jeder greifen kann, ist eine Falle. */ --dp-fundal: #ffffff; --dp-fundal-bara: #f5f6f7; --dp-fundal-cauta: #eff1f2; --dp-linie: rgba(210, 215, 217, .75); /* DIE KANTE EINES BEDIENELEMENTS — und sie ist eine andere als die Kante einer Karte. `--dp-linie` traegt gegen den Leistengrund 1,22:1; das reicht fuer einen Haarstrich zwischen zwei Karten (er trennt, er bedient nicht), aber nicht fuer den Rand eines Tastziels: WCAG 2.1 AA 1.4.11 verlangt dort 3:1, weil dieser Rand SAGT, wo das Ziel aufhoert. Gemessen: 3,31:1 auf `--dp-fundal-bara`, 3,58:1 auf `--dp-fundal`. */ --dp-linie-tinta: #83888c; /* Der Vergroesserungsfaktor des Zugaenglichkeits-Bedienteils. Er steht hier auf 1 und wird vom Skript am ueberschrieben. JEDE Schriftgroesse rechnet ihn ein — auch die 25, die in px stehen; ohne sie waere auf /ro/primaria fast nichts gewachsen, denn dort ist der Fliesstext px-gemessen. Eine Variable, eine Stelle, alles zieht mit. */ --dp-lupe: 1; /* Schrift — DESIGN.md 4 */ --dp-font-text: "Open Sans", system-ui, -apple-system, sans-serif; --dp-font-titlu: "Roboto Slab", Georgia, serif; --dp-inaltime: 1.65; /* Zeilenhoehe des Fliesstextes, einzige */ --dp-spatiere: .075em; /* Sperrung der Versalien-Beschriftung */ /* Abstaende — DESIGN.md 5 */ --dp-sp-1: .25rem; --dp-sp-2: .5rem; --dp-sp-3: .75rem; --dp-sp-4: 1rem; --dp-sp-5: 2rem; --dp-sp-6: 1.5rem; --dp-sp-7: 2.5rem; --dp-sp-8: 3rem; --dp-sp-9: 4rem; --dp-sp-10: 5rem; /* Rahmen, Radien, Hoehen — DESIGN.md 5 */ --dp-raza: .375rem; --dp-linie-1: 1px; --dp-linie-2: 2px; --dp-linie-3: 3px; --dp-linie-antet: 5px; --dp-buton-h: 2.8rem; /* Das Zugaenglichkeits-Bedienteil (DESIGN.md 7.17). Vier Masse in px und nicht in rem, und das mit Absicht: der Knopf ist ein Tastziel und der Rand ein Sicherheitsabstand zur Schirmkante — beides muss stehen bleiben, wenn die Schriftstufe waechst. `--dp-acces-knopf` und `--dp-acces-w` sind am alten Theme-Widget gemessen (50 px, 320 px), `--dp-acces-tinta` ist WCAG 2.5.5, `--dp-acces-rand` ist gesetzt. */ --dp-acces-knopf: 50px; /* Kantenlaenge des Auslaesers — gemessen */ --dp-acces-w: 320px; /* Panelbreite, hoechstens — gemessen */ --dp-acces-tinta: 44px; /* Tastziel-Mindesthoehe im Panel */ /* Die Luft ueber der sichtbaren Reiterflaeche. 44 - 8 = 36 px sichtbar, 44 px treffbar. Ein Wert, zwei Bauteile: Reiter und Filterknopf. */ --dp-fila-luft: 8px; --dp-acces-rand: 12px; /* Abstand des Panels zur Schirmkante */ --dp-camp-h: 2.75rem; --dp-bara-w: 20.7rem; --dp-umbra: 0 5px 15px 0 rgba(0, 0, 0, .15); /* die EINZIGE Schatten- angabe. Kommt genau an einer Stelle vor: der Personenkarte der Startseite, dort gemessen. */ --dp-bara-em: .9rem; /* 14,4px — Schriftgroesse der Leiste; Untermenue und Kontaktliste sind Vielfache davon */ /* Hoehe des Leisteninhalts. DIE EINZIGE GEMESSENE KONSTANTE in dieser Datei — alles andere folgt aus den Massen darueber. Sie wird gebraucht, weil CSS die Eigenhoehe eines Kastens nicht kennt (siehe Kommentar bei .dp-bara-corp). Auf allen Seitentypen einer Gemeinde ist sie gleich (Menue und Kontaktblock sind ueberall dieselben, nachgemessen: 1417,59 px auf Liste, Einzelseite und Rubrikseite). Sie AENDERT SICH, wenn das Menue laenger wird oder der Kontaktblock anders umbricht — dann hier nachtragen. Faellt sie falsch aus, bleibt die Leiste ein paar Pixel zu frueh oder zu spaet stehen. Nichts bricht. */ --dp-bara-h: 88.3rem; /* 1412,8px bei Fuss 16px — gemessen */ /* Die Groessen, die je Haltepunkt wechseln. Sonst keine. Sie wechseln NICHT nur nach unten: oberhalb 1680 px setzt das laufende Theme groessere Vielfache (6em statt 5em, 26em statt 23em Leiste). Das stand bis zum 24.08. nirgends, weil bei 1440 px beides zusammenfaellt — DESIGN.md 2. */ --dp-inner-x: var(--dp-sp-10); /* Innenrand des Hauptteils, seitlich */ --dp-sect-t: var(--dp-sp-10); /* Abschnitt im Hauptteil, oben */ --dp-sect-b: var(--dp-sp-8); /* Abschnitt im Hauptteil, unten */ --dp-antet-t: var(--dp-sp-10); /* Innenrand des Seitenkopfs, oben */ --dp-bara-pad: var(--dp-sp-6); /* Innenrand der Leiste */ --dp-bara-pad-b: 1.2rem; /* derselbe, unten — 19,2px, gemessen */ --dp-bara-luft: var(--dp-sp-8); /* Abstand unter dem Suchband */ } /* Der Fuss. Vier Stufen, DESIGN.md 2. */ html { font-size: calc(13pt * var(--dp-lupe, 1)); } /* Bei Fuss 13pt bricht der Kontaktblock eine Zeile anders um — nachgemessen */ /* OBERHALB 1680 px setzt das Original groessere Vielfache. Bis zum 24.08. stand hier nur die Leistenhoehe, und der Neubau war dort 81 px breiter im Inhalt und 47 px schmaler in der Leiste als die laufende Seite. Alle Werte am Massstab bei 1920 px gemessen. */ @media (min-width: 1681px) { :root { --dp-bara-h: 90.86rem; /* 1574,9px */ --dp-bara-w: 23.4rem; /* 26em der Leiste (0,9em) = 405,6px */ --dp-bara-pad: 2rem; /* 2,2222em der Leiste = 34,67px */ --dp-bara-pad-b: 2.2rem; /* 2,4444em der Leiste = 38,13px */ --dp-bara-luft: 4rem; /* 4,4444em der Leiste = 69,33px */ --dp-inner-x: 6rem; /* 6em statt 5em = 104px */ --dp-sect-t: 6rem; --dp-sect-b: 4rem; --dp-antet-t: 6rem; } } @media (max-width: 1680px) { html { font-size: calc(12pt * var(--dp-lupe, 1)); } } @media (max-width: 1280px) { html { font-size: calc(11pt * var(--dp-lupe, 1)); } } @media (max-width: 360px) { html { font-size: calc(10pt * var(--dp-lupe, 1)); } } /* border-box direkt, NICHT ueber `box-sizing: inherit`. Gemessen 23.08.2026 in Chromium 151: die verbreitete inherit-Schreibweise bricht innerhalb von
. Der Inhalt haengt dort im UA-Schattenbaum an einem ; die Vererbung folgt dem flachen Baum, der author-seitige *-Selektor trifft den Slot nicht, und der Slot traegt den Anfangswert content-box. Ergebnis: JEDES Kind einer
waere content-box — auch . Betrifft nur nicht-vererbte Eigenschaften mit ausgeschriebenem `inherit`; color und font gehen normal durch. */ *, *::before, *::after { box-sizing: border-box; } /* --- 2. Grundstellung ------------------------------------------------------ */ body { margin: 0; background: var(--dp-fundal); color: var(--dp-text); font-family: var(--dp-font-text); font-size: 1rem; font-weight: 400; line-height: var(--dp-inaltime); -webkit-text-size-adjust: none; } h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; color: var(--dp-titlu); font-family: var(--dp-font-titlu); font-weight: 700; line-height: 1.5; } h1 { font-size: 3.5rem; line-height: 1.3; margin-bottom: .5em; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } h5 { font-size: .9rem; } h6 { font-size: .7rem; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; border-bottom: 0; } /* Die Ueberschriftenstufen je Haltepunkt — DESIGN.md 4. Diese Regeln stehen NACH der Grundregel oben, nicht im Variablenblock: bei gleicher Spezifitaet entscheidet die Reihenfolge, und eine Haltepunktregel vor der Grundregel verliert stillschweigend. */ @media (min-width: 1681px) { h1 { font-size: 2.5rem; } } @media (max-width: 980px) { h1 { font-size: 3.25rem; } } @media (max-width: 736px) { h1 { font-size: 2rem; line-height: 1.4; } h2 { font-size: 1.5rem; } } p { margin: 0 0 var(--dp-sp-5) 0; } ul, ol { margin: 0 0 var(--dp-sp-5) 0; } /* Einrueckung am Original gemessen (24.08.), nicht geschaetzt: ul 16px, ol 20px, ol li 4px. Hier stand vorher 24px fuer beide — der erste Fliesstext MIT Liste ist die Textseite (M5), dort faellt es auf. */ ul { padding-left: var(--dp-sp-4); } ol { padding-left: 1.25rem; } ol li { padding-left: var(--dp-sp-1); } strong, b { color: var(--dp-titlu); font-weight: 600; } em, i { font-style: italic; } img { max-width: 100%; height: auto; } hr { border: 0; border-bottom: var(--dp-linie-1) solid var(--dp-linie); margin: var(--dp-sp-5) 0; } blockquote { margin: 0 0 var(--dp-sp-5) 0; padding: var(--dp-sp-2) 0 var(--dp-sp-2) var(--dp-sp-5); border-left: var(--dp-linie-3) solid var(--dp-linie); font-style: italic; } a { color: var(--dp-accent); text-decoration: none; border-bottom: var(--dp-linie-1) dotted currentColor; transition: color .2s ease-in-out, border-bottom-style .2s ease-in-out; } a:hover { border-bottom-style: solid; } /* dp-adresa — EINE Regel fuer alle Verweise, die selbst die Angabe SIND. Eine E-Mail-Adresse oder eine Telefonnummer fuehrt nicht woandershin, sie IST der Wert. Deshalb traegt sie die Farbe ihres Umfelds; nur der gepunktete Unterstrich zeigt an, dass man sie anklicken kann. Gemessen: im Kontaktkasten der Seite rgb(0,0,0) (er erbt aus ), in der Seitenleiste rgb(69,69,73) — beide Male die Umgebungsfarbe, nie der Akzent. Zweimal aufgetaucht, deshalb hier einmal geloest. */ .dp-adresa { color: inherit; } .dp-adresa:hover { color: var(--dp-accent); } /* Zustand — DESIGN.md 6. Gilt fuer jedes bedienbare Element. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- 3. dp-pagina — der Rumpf (DESIGN.md 7.1) ------------------------------ */ /* Sprungmarke. Die Leiste steht im Quelltext VOR dem Inhalt — das ist die Lesereihenfolge, die ein Screenreader bei einer linken Leiste erwartet. Damit die Tastatur nicht jedes Mal durch zehn Menuepunkte muss, steht davor dieser Sprung. Er ist sichtbar, sobald er den Fokus hat. */ .dp-sari { position: absolute; left: var(--dp-sp-2); top: var(--dp-sp-2); z-index: 200; padding: var(--dp-sp-2) var(--dp-sp-4); border: 0; border-radius: var(--dp-raza); background: var(--dp-accent); color: #fff; transform: translateY(-200%); } .dp-sari:focus { transform: none; } .dp-pagina { display: flex; min-height: 100vh; } .dp-continut { flex: 1 1 auto; width: 100%; min-width: 0; } .dp-continut-inner { max-width: 110rem; margin: 0 auto; padding: 0 var(--dp-inner-x); } @media (max-width: 1280px) { :root { --dp-inner-x: var(--dp-sp-9); --dp-sect-t: var(--dp-sp-9); --dp-sect-b: var(--dp-sp-5); } .dp-pagina { flex-direction: column; } } @media (max-width: 736px) { :root { --dp-inner-x: var(--dp-sp-5); --dp-sect-t: var(--dp-sp-8); --dp-sect-b: var(--dp-sp-4); } } /* --- 4. dp-antet — der Seitenkopf (DESIGN.md 7.2) -------------------------- */ .dp-antet { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-sp-4); padding: var(--dp-antet-t) 0 var(--dp-sp-4) 0; border-bottom: var(--dp-linie-antet) solid var(--dp-accent); } .dp-antet-titlu { margin: 0; font-family: var(--dp-font-titlu); font-size: 2.125rem; font-weight: 700; line-height: var(--dp-inaltime); color: var(--dp-titlu); } .dp-antet-titlu a { color: inherit; border-bottom: 0; } .dp-antet-social { display: flex; gap: var(--dp-sp-4); margin: 0; padding: 0; list-style: none; } .dp-antet-social a { color: var(--dp-text); border-bottom: 0; line-height: 1; } .dp-antet-social a:hover { color: var(--dp-accent); } .dp-antet-social .dp-sim { display: block; width: 1rem; height: 1rem; } @media (max-width: 736px) { .dp-antet { flex-direction: column; align-items: flex-start; gap: var(--dp-sp-4); } } /* Grundregel fuer jedes Symbol, das keine eigene bekommt: die HOEHE fuehrt. Die Teilstuecke tragen `width="1em" height="1em"` als Attribut; Attribute sind die schwaechste Quelle, diese Regel gewinnt. Begruendung bei `.dp-contact .dp-sim`. */ .dp-sim { width: auto; height: 1em; } /* --- 5. dp-bara — die Seitenleiste (DESIGN.md 7.3) ------------------------- */ .dp-bara { flex: 0 0 var(--dp-bara-w); width: var(--dp-bara-w); background: var(--dp-fundal-bara); font-size: .9rem; line-height: var(--dp-inaltime); } .dp-bara-corp { padding: var(--dp-bara-pad); } /* Der Griff. Ein Kontrollkaestchen, kein
— und zwar deshalb: die beiden Haltepunkte brauchen die UMGEKEHRTE Grundstellung. Am Schirm ist die Leiste offen und der Griff klappt sie WEG (gemessen: #main waechst dabei von 1108,8 auf 1440 px). Am Telefon ist sie zu und der Griff klappt sie AUF. Ein
kann nur eines von beidem. Kaestchen und Griff stehen NEBEN der Leiste, nicht darin, damit `:checked ~ .dp-bara` die ganze graue Spalte trifft. */ .dp-bara-comutator { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); } .dp-bara-clapa { position: absolute; left: var(--dp-bara-w); top: 0; z-index: 150; width: 4.5rem; height: 5.625rem; line-height: 5.625rem; text-align: center; color: var(--dp-accent); font-size: 1.5rem; /* 24px, gemessen */ cursor: pointer; transition: left .5s ease; } .dp-bara-clapa > .dp-sim { vertical-align: -.15em; } .dp-bara-clapa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .dp-bara-comutator:focus-visible + .dp-bara-clapa { outline: 2px solid var(--dp-accent); outline-offset: -4px; } /* Die graue Spalte. Sie ist so hoch wie das ganze Dokument — gemessen ist das auch im Original so (#sidebar h=9255 auf der langen Liste). Deshalb bleibt unter dem Inhalt nie eine helle Luecke. */ .dp-bara { flex: 0 0 var(--dp-bara-w); width: var(--dp-bara-w); background: var(--dp-fundal-bara); font-size: var(--dp-bara-em); line-height: var(--dp-inaltime); } /* Der Inhalt wandert erst mit und bleibt dann am EIGENEN ENDE stehen — wie das Original. Gemessene Bahn des Originals bei 900px Fenster: scrollY 0→400 wandert mit (-1,00) scrollY 400→600 Uebergang scrollY ab 600 steht bei y = -548 Die Formel dahinter, aus drei Fensterhoehen abgelesen: top = min(0, Fensterhoehe - Inhaltshoehe - 30) also 0 / -548 / -848 bei 1700 / 900 / 600. Das Original rechnet sie per JavaScript. In CSS geht dieselbe Formel wortwoertlich — `min()` und `calc()` koennen das —, sie braucht nur die Inhaltshoehe. Deshalb --dp-bara-h. NICHT gegangen, jeweils nachgemessen und verworfen (Chromium 151, im isolierten Kleinstfall: 6000px hoher Elternkasten, 1400px hohes Kind): `bottom: 0` wandert durch, klebt nie `bottom: 30px` dito `top: 0` und `bottom: 0` zusammen `top` gewinnt, klebt sofort oben Flex-Spalte mit `bottom: 0` wandert durch Flex + `margin-bottom: auto` wandert durch Grid mit `align-content: start` wandert durch `bottom`-Sticky zieht einen Kasten nicht nach unten; es haelt ihn nur davon ab, nach oben aus dem Fenster zu wandern, sobald er die Unterkante von unten her erreicht hat — was hier nie eintritt. */ .dp-bara-corp { position: sticky; top: min(0px, calc(100vh - var(--dp-bara-h) - 30px)); /* unten 19,2px statt 24 — am Original gemessen. Die 4,8px waren der ganze Unterschied im Grau unter dem Logo, ueber alle Fensterhoehen konstant. */ padding: var(--dp-bara-pad) var(--dp-bara-pad) var(--dp-bara-pad-b) var(--dp-bara-pad); /* DECKENDER Grund, und das ist kein Schoenheitsfehler: `position: sticky` hebt den Kasten auf eine eigene Compositing-Ebene. Kennt Chromium deren Grund nicht als deckend, schaltet es von Subpixel- auf Graustufen-Kantenglaettung — und Graustufen rendert Text schwerer. Gemessen an derselben Stelle, mittlere Pixelabweichung gegen die laufende Seite (von 765 moeglichen): sticky ohne Grund 4,85 sticky mit Grund 0,83 ohne sticky 0,83 Der Grund steht ohnehin auf .dp-bara; hier wiederholt er sich nur, damit die Ebene deckend ist. */ background: var(--dp-fundal-bara); } /* Am Schirm: angehakt = Leiste weg, Inhalt waechst — und zwar WEICH. Am Original gemessen (24.08., Bahn alle 50ms abgetastet): die Leiste wandert in 500 ms von x=0 auf x=-331,2, der Inhalt waechst im selben Zug von 1108,8 auf 1440. Die Eigenschaft ist `margin-left`, die Kurve die Vorgabe `ease`: #sidebar { transition: margin-left 0.5s ease, box-shadow 0.5s ease } #sidebar.inactive { margin-left: -23em } .toggle { transition: left 0.5s ease } Vorher stand hier `display: none` — das kann nichts animieren, weil es den Kasten aus dem Fluss nimmt. Mit einem negativen Aussenabstand in Hoehe der Leistenbreite bleibt sie im Fluss, schiebt sich genau bis zur Kante hinaus und der Inhalt waechst von selbst nach. Weiterhin kein JavaScript. `prefers-reduced-motion: reduce` schaltet den Uebergang ab (die Regel dazu steht in Abschnitt 2 und gilt fuer jedes Element) — wer Bewegung abbestellt hat, bekommt den Sprung. */ .dp-bara { transition: margin-left .5s ease; } .dp-bara-clapa { transition: left .5s ease; } @media (min-width: 1281px) { .dp-bara-comutator:checked ~ .dp-bara { margin-left: calc(-1 * var(--dp-bara-w)); } .dp-bara-comutator:checked ~ .dp-bara-clapa, .dp-bara-comutator:checked + .dp-bara-clapa { left: 0; } } /* Am Telefon: umgekehrt — zu, bis angehakt. Der Griff ist ein Balken oben, und nichts klebt: die Leiste ist dort eine gewoehnliche Schublade. */ @media (max-width: 1280px) { .dp-bara-clapa { position: static; width: 100%; height: 3.5rem; line-height: 3.5rem; padding: 0 var(--dp-sp-6); text-align: left; background: var(--dp-fundal-bara); font-family: var(--dp-font-titlu); font-size: var(--dp-bara-em); font-weight: 700; text-transform: uppercase; letter-spacing: var(--dp-spatiere); } .dp-bara-clapa > .dp-sim { margin-right: var(--dp-sp-3); } .dp-bara-clapa-text { position: static; width: auto; height: auto; clip-path: none; } .dp-bara { display: none; flex: 0 0 auto; width: 100%; } .dp-bara-comutator:checked ~ .dp-bara { display: block; } .dp-bara-corp { position: static; max-height: none; overflow: visible; } } /* Abschnitte der Leiste */ .dp-bara-sectiune { margin-bottom: calc(var(--dp-bara-em) * 3.5); /* 50,4px, gemessen */ padding-bottom: calc(var(--dp-bara-em) * 3.5); border-bottom: var(--dp-linie-2) solid var(--dp-linie); } .dp-bara-sectiune:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .dp-bara-sectiune > :last-child { margin-bottom: 0; } .dp-bara-sectiune p { margin-bottom: calc(var(--dp-bara-em) * 2); } /* 28,8px */ .dp-bara-titlu { display: inline-block; margin: 0 0 var(--dp-sp-7) 0; padding: 0 .9375rem .625rem 0; /* 15px / 10px, gemessen */ border-bottom: var(--dp-linie-3) solid var(--dp-accent); font-family: var(--dp-font-titlu); font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: var(--dp-titlu); } /* Das Suchband — volle Breite ueber den Innenrand hinaus */ .dp-bara-cauta { margin: calc(-1 * var(--dp-bara-pad)) 0 var(--dp-bara-luft) calc(-1 * var(--dp-bara-pad)); padding: var(--dp-bara-pad); width: calc(100% + 2 * var(--dp-bara-pad)); background: var(--dp-fundal-cauta); } /* Die Lupe im Suchfeld — dieselbe Glyphe wie im Original: FA5 solid U+F002, 21,6px, --dp-text bei Deckkraft 0,325, waagerecht GESPIEGELT (der Griff zeigt nach links unten), zentriert in einem 43,19px-Quadrat rechts im Feld. Sie zeigt nur an, sie bedient nicht — deshalb aria-hidden und pointer-events aus, damit der Klick im Feld landet. */ .dp-cauta-form { position: relative; } .dp-cauta-form > .dp-sim { position: absolute; right: 0; top: 0; width: 2.7rem; height: 2.7rem; /* 43,2px, gemessen */ padding: .675rem; /* Glyphe 21,6px mittig im Quadrat */ color: var(--dp-text); opacity: .325; transform: scaleX(-1); pointer-events: none; } .dp-camp-cauta { padding-right: 2.75rem; } /* 44px, gemessen */ /* --- 6. dp-meniu — die Navigation (DESIGN.md 7.3) -------------------------- */ .dp-meniu, .dp-meniu ul { margin: 0; padding: 0; list-style: none; } .dp-meniu > li { border-top: var(--dp-linie-1) solid var(--dp-linie); } .dp-meniu > li:first-child { border-top: 0; } .dp-meniu a { display: block; border-bottom: 0; color: var(--dp-titlu); font-family: var(--dp-font-titlu); font-size: .9rem; font-weight: 400; line-height: 3.5em; text-transform: uppercase; letter-spacing: var(--dp-spatiere); } .dp-meniu a:hover { color: var(--dp-accent); } /* Untermenue —
, kein Aufklapp-Skript */ .dp-meniu-grup > summary { display: block; color: var(--dp-titlu); font-family: var(--dp-font-titlu); font-size: .9rem; line-height: 3.5em; text-transform: uppercase; letter-spacing: var(--dp-spatiere); cursor: pointer; list-style: none; } .dp-meniu-grup > summary::-webkit-details-marker { display: none; } /* Der Pfeil ist dieselbe Glyphe wie die Kontaktsymbole: FA5 solid U+F053 (chevron-left), 14,4px, --dp-mut, rechtsbuendig, auf der Textzeile. ZUSTANDSWECHSEL, gemessen: es gibt keinen. Der Pfeil zeigt offen wie zu nach links, `transform: none` in beiden Faellen, dieselbe Glyphe, dieselbe Farbe. Uebernommen wie gemessen — den Zustand zeigt das aufgeklappte Untermenue selbst, nicht der Pfeil. */ .dp-meniu-grup > summary > .dp-sim { float: right; width: var(--dp-bara-em); height: var(--dp-bara-em); margin-top: calc((3.5em - var(--dp-bara-em)) / 2); color: var(--dp-desc); } .dp-meniu-grup > summary:hover { color: var(--dp-accent); } /* Untermenue — Geometrie am Original gemessen (23.08.2026, 1440px): Einrueckung 14,4px · Zeilenhoehe 16px (eng, damit lange Titel wie "STATUTUL UNITATII ADMINISTRATIV-TERITORIALE" dreizeilig kompakt umbrechen) · 14,4px Luft ueber, 10px unter einem Eintrag · Verweisfarbe --dp-text. Alle Werte sind Vielfache von --dp-bara-em (14,4px), ausser den 10px. */ .dp-meniu .dp-meniu-sub { margin: calc(var(--dp-bara-em) * .5) 0 calc(var(--dp-bara-em) * 1.5) 0; padding-left: var(--dp-bara-em); } .dp-meniu-sub > li { padding-top: var(--dp-bara-em); margin-bottom: .625rem; border-top: 0; } .dp-meniu-sub a { display: inline-block; color: var(--dp-text); line-height: 1rem; } .dp-meniu-sub a:hover { color: var(--dp-accent); } /* Der geoeffnete Elternpunkt faerbt sich — wie im Original */ .dp-meniu-grup[open] > summary { color: var(--dp-accent); } /* --- 7. dp-buton, dp-camp (DESIGN.md 7.4, 7.5) ----------------------------- */ .dp-buton { display: inline-block; height: var(--dp-buton-h); line-height: var(--dp-buton-h); padding: 0 2.25em; border: 0; border-radius: var(--dp-raza); box-shadow: inset 0 0 0 2px var(--dp-accent); background: transparent; color: var(--dp-accent); font-family: var(--dp-font-titlu); font-size: .8rem; font-weight: 700; letter-spacing: var(--dp-spatiere); text-transform: uppercase; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s ease-in-out; } .dp-buton:hover, .dp-buton:active { background: var(--dp-accent-slab); } .dp-camp { width: 100%; height: var(--dp-camp-h); line-height: var(--dp-inaltime); padding: 0 var(--dp-sp-4); border: var(--dp-linie-1) solid var(--dp-linie); border-radius: var(--dp-raza); background: var(--dp-fundal); color: var(--dp-text); font-family: var(--dp-font-text); font-size: 1rem; } /* --- 8. dp-data, dp-eticheta (DESIGN.md 7.6, 7.7) -------------------------- */ .dp-data { margin: 0 0 .9rem 0; /* 14,4px, gemessen (nicht 16) */ color: var(--dp-meta); font-size: .9rem; letter-spacing: var(--dp-spatiere); } .dp-data .dp-sim { width: .81rem; height: .81rem; /* 12,96px, gemessen */ margin-right: var(--dp-sp-1); } /* In der Listenkarte traegt dieselbe Zeile WEDER Symbol NOCH Sperrung — gemessen am Original: kein , letter-spacing: normal, 14,4px. Nur auf der Einzelseite steht die Uhr davor. */ .dp-data-lista { font-size: var(--dp-bara-em); letter-spacing: normal; } /* Kategorie-Zeile und Teilen-Zeile stehen nebeneinander */ .dp-partaja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dp-sp-4); margin: 0 0 var(--dp-sp-5) 0; } .dp-etichete { margin: 0; } .dp-etichete > .dp-sim { width: 1rem; height: 1rem; /* 16px, gemessen */ margin-right: var(--dp-sp-2); color: var(--dp-text); } .dp-partaja-lista { display: flex; align-items: center; gap: var(--dp-sp-4); margin: 0; padding: 0; list-style: none; } .dp-partaja-lista a { color: var(--dp-text); border-bottom: 0; line-height: 1; } .dp-partaja-lista a:hover { color: var(--dp-accent); } .dp-partaja-lista svg { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; } .dp-eticheta { color: var(--dp-tag); font-size: .9rem; border-bottom: 0; } .dp-eticheta:hover { border-bottom: var(--dp-linie-1) solid currentColor; } .dp-eticheta + .dp-eticheta { margin-left: var(--dp-sp-3); } /* --- 9. dp-articol — die Einzelseite --------------------------------------- */ .dp-articol { padding: var(--dp-sect-t) 0 var(--dp-sect-b) 0; } /* Ein Abschnitt, der direkt auf einen Trenner folgt, braucht oben keinen zweiten Abstand — der Trenner bringt seinen eigenen mit. */ .dp-articol-anschluss { padding-top: 0; } .dp-articol > :last-child { margin-bottom: 0; } /* Der Dokumentblock. Der BETRACHTER ist die Grundstellung, der