/* ============================================================================
   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;
  --dp-fundal:        #ffffff;
  --dp-fundal-bara:   #f5f6f7;
  --dp-fundal-cauta:  #eff1f2;
  --dp-linie:         rgba(210, 215, 217, .75);

  /* 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;
  --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: 13pt; }
/* 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: 12pt; } }
@media (max-width: 1280px) { html { font-size: 11pt; } }
@media (max-width:  360px) { html { font-size: 10pt; } }

/* border-box direkt, NICHT ueber `box-sizing: inherit`.
   Gemessen 23.08.2026 in Chromium 151: die verbreitete inherit-Schreibweise
   bricht innerhalb von <details>. Der Inhalt haengt dort im UA-Schattenbaum an
   einem <slot>; 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 <details> waere content-box —
   auch <summary>. 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 <strong>),
   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 <details> — 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 <details open> 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 — <details>, 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-mut);
}
.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 <i>, 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 <iframe> ist
   der Rueckfall — umgekehrt zur ersten Fassung dieses Stylesheets.
   Grund, und er ist keine Geschmacksfrage: auf iPhone und iPad zeigt Safari
   ein PDF in einem eingebetteten Rahmen nur mit der ersten Seite oder gar
   nicht. Der Betrachter der laufenden Seite ist auf Buergerbeschwerden hin
   entstanden. Alle vier Werte hier am Original gemessen. */
.dp-document { margin: 0 0 var(--dp-sp-5) 0; }
.dp-document-titlu { font-size: 1.25rem; margin-bottom: var(--dp-sp-6); }
.dp-vizor {
  border: var(--dp-linie-1) solid #ddd;
  background: #f5f5f5;
  max-height: 80vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.dp-vizor-pagini { display: block; }
.dp-vizor canvas {
  display: block;
  width: 100%; height: auto;
  margin: 0 auto 8px auto;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.dp-vizor-nota {
  padding: 1em;
  text-align: center;
  color: #666;
  font-size: .95em;
}
.dp-document-cadru {
  width: 100%;
  height: 80vh;
  min-height: 30rem;
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: var(--dp-raza);
  background: var(--dp-fundal-bara);
}
.dp-document-jos { margin: var(--dp-sp-6) 0 0 0; }

/* Weiterblaettern — mittig, wie gemessen */
.dp-navigare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dp-sp-2);
  margin: var(--dp-sp-5) 0 0 0;
}

/* --- 10. dp-subsol — die Fusszeile der Leiste ------------------------------ */

/* Kontaktliste — am Original gemessen: Einrueckung 43,2px (3x --dp-bara-em),
   Symbol 21,6px (1,5x), und zwischen zwei Zeilen dieselbe Haarlinie wie im
   Menue, mit 21,6px Luft darueber und darunter. Die erste Zeile ohne Linie. */
.dp-contact { margin: 0; padding: 0; list-style: none; }
.dp-contact li {
  position: relative;
  padding-left: calc(var(--dp-bara-em) * 3);
  margin: 0;
}
.dp-contact li + li {
  margin-top: calc(var(--dp-bara-em) * 1.5);
  padding-top: calc(var(--dp-bara-em) * 1.5);
  border-top: var(--dp-linie-1) solid var(--dp-linie);
}
/* DIE HOEHE FUEHRT, DIE BREITE FOLGT — und das ist kein Schoenheitsdetail.
   Die Font-Awesome-Glyphen liegen alle auf einer Hoehe von 512 Einheiten, aber
   NICHT alle auf einer Breite: fa-home ist 576 breit, fa-truck 640, fa-bars
   448. Steht so eine Glyphe in einem QUADRATISCHEN Kasten, passt der Browser
   sie nach der laengeren Seite ein (`preserveAspectRatio` mit `meet`) und
   verkleinert sie um genau 512/Breite — bei fa-home 11,1 %, bei 640 um 20 %.
   Am 25.08.2026 von Lukas am Bild gesehen und danach gemessen:

     Original (Glyphe im Text, 21,6px)   Umschlag 22x16 · Telefon 23x23 · Haus 25x19
     Neubau vorher (quadratischer Kasten) Umschlag 21,6x16,2 · Telefon 21,6x21,6 · Haus 21,6x16,8

   Im Original ist das Haus das GROESSTE der drei, im Neubau war es das
   kleinste. Dieselbe Klasse wie der `fa-flag`-Fund vom 24.08.: eine Glyphe
   bringt ihre eigene Vorschubbreite mit, und wer 512 annimmt, liegt daneben.
   Die Kacheln (`dp-placa-sim`) waren nie betroffen — dort fuehrt schon immer
   die Hoehe. */
.dp-contact .dp-sim {
  position: absolute;
  left: .34rem;
  top: .12em;
  width: auto;                            /* folgt der Glyphenbreite */
  height: calc(var(--dp-bara-em) * 1.5);  /* 21,6px, gemessen */
  color: var(--dp-accent);
}
.dp-contact li + li .dp-sim { top: calc(var(--dp-bara-em) * 1.5 + .12em); }
.dp-contact a:hover { color: var(--dp-accent); }

/* Foerdererkennzeichnung. Wird NICHT neu gestaltet — 1:1 am Original
   gemessen: Logo 84x84, Abstand 16px, Text 12,96px/21,384px in --dp-mut,
   und der Verweis auf digicomuna.ro traegt DIESELBE Farbe wie der Text,
   nicht die Akzentfarbe. Nur der gepunktete Unterstrich zeigt ihn an. */
.dp-subsol { display: flex; align-items: flex-start; gap: var(--dp-sp-4); }
.dp-subsol img { width: 5.25rem; height: 5.25rem; flex: 0 0 auto; }
.dp-subsol-drept { color: var(--dp-mut); font-size: .81rem; }
.dp-subsol-drept a { color: inherit; }
.dp-subsol-drept a:hover { color: var(--dp-accent); }

/* --- 11. dp-lipici — die Aufkleber am Rand (DESIGN.md 7.9) ----------------- */

.dp-lipici-mol {
  position: fixed;
  right: 0; top: 7.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--dp-sp-2);
  padding: var(--dp-sp-4) var(--dp-sp-3);
  border: 0;
  border-radius: var(--dp-raza) 0 0 var(--dp-raza);
  flex-direction: column;
  background: var(--dp-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
}
/* Die Schrift laeuft von UNTEN NACH OBEN, nicht von oben nach unten:
   `vertical-rl` plus 180-Grad-Drehung. Gemessen am Original — dort steht die
   Drehung als matrix(-1,0,0,-1,0,0) auf dem Label, die Huelle bleibt
   waagerecht. Und der Text ist in VERSALIEN. */
.dp-lipici-mol span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-transform: uppercase;
}
.dp-lipici-mol .dp-sim { width: 1.125rem; height: 1.125rem; }  /* 18px, gemessen */

@media (max-width: 736px) { .dp-lipici-mol { display: none; } }

/* --- 11b. Symbole ----------------------------------------------------------
   Die Umrisse stammen 1:1 aus Font Awesome 5.9.0 — derselbe Satz und dieselbe
   Fassung, die das laufende Theme laedt. Gemessen am Bild, nicht geglaubt:
   das Theme laedt fa-solid-900.woff2 (HTTP 200) und rendert die Kontakt-
   Symbole mit Gewicht 900 = SOLID; nur die Uhr der Datumszeile ist REGULAR.
   Erzeugt mit werkzeug/glyphen_bauen.mjs, ausgeliefert als Pfad im Markup —
   kein Webfont, kein Netzabruf, 9 Symbole statt 78 KB Schriftdatei. */
.dp-sim { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

/* --- 12. Hilfsklasse ------------------------------------------------------- */

/* Nur fuer Screenreader. Nicht display:none — das nimmt es ihnen auch weg. */
.dp-ascuns {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 13. dp-lista — die Listenansicht (DESIGN.md 7.8, LISTE.md) ------------ */

/* Keine Blaetterleiste. Gemessen: 137 Eintraege stehen heute auf einer Seite.
   Begruendung und Messung: LISTE.md 1. */

.dp-lista-antet { padding: var(--dp-sect-t) 0 0 0; }
/* Der Seitentitel der Liste ist heute 28px — gemessen. Die Ebene bleibt h1
   (die laufende Seite hat dort gar keine h1), die Groesse folgt dem Bild. */
.dp-lista-antet h1 { font-size: 1.75rem; line-height: 1.5; }
@media (max-width: 736px) { .dp-lista-antet h1 { font-size: 1.5rem; } }
.dp-lista-antet > :last-child { margin-bottom: 0; }

/* Die Zahl vor der Liste: sagt vor dem Scrollen, was kommt. */
.dp-numar {
  margin: var(--dp-sp-6) 0 0 0;
  color: var(--dp-meta);
  font-size: .9rem;
  letter-spacing: var(--dp-spatiere);
}

/* Jahresmarke — Landmarke in einer langen Liste, nimmt nichts weg. */
.dp-an {
  margin: var(--dp-sp-9) 0 var(--dp-sp-6) 0;
  padding-bottom: var(--dp-sp-2);
  border-bottom: var(--dp-linie-3) solid var(--dp-accent);
  font-family: var(--dp-font-titlu);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dp-titlu);
}
.dp-an:first-child { margin-top: var(--dp-sp-6); }

/* Zwischenraum und Haarstriche wie im Original: der Abstand ist ein
   RASTERZWISCHENRAUM, die Striche sind Pseudoelemente und nehmen keinen Platz.
   Vorher trug die Karte Innenrand und `border-right`; der Rahmen nahm 1px von
   der Textbreite, und bei DREI Spalten (oberhalb 1680) wurden daraus drei
   ungleich breite Karten — 408 / 382 / 409 statt dreimal 400,8. Am 24.08.
   gemessen und umgestellt. */
.dp-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dp-sp-8);                 /* 48px, wie im Original 3em */
  margin: 0 0 var(--dp-sp-5) 0;
}

.dp-carte {
  position: relative;
  /* Spalte, damit der Knopf am FUSS der Karte sitzt und nicht direkt unter
     dem Text: `margin-top: auto` schiebt ihn nach unten, und alle Karten
     einer Reihe fluchten. Im Original steht dafuer
     `.posts article { display:flex; flex-direction:column }` mit
     `.posts article .actions { margin-top:auto }`. Ohne das standen die drei
     juengsten Anuntzuri auf der Startseite ungleich und versetzt. */
  display: flex;
  flex-direction: column;
}
.dp-carte > :last-child { margin-bottom: 0; }
.dp-carte-jos { margin-top: auto; }
.dp-carte::before, .dp-carte::after {
  content: "";
  position: absolute;
  background: var(--dp-linie);
}
/* senkrecht, links neben der Karte, mittig im Zwischenraum */
.dp-carte::before {
  top: 0; left: calc(-1 * var(--dp-sp-6));
  width: 1px; height: calc(100% + var(--dp-sp-8));
}
/* waagerecht, unter der Karte */
.dp-carte::after {
  right: 0; bottom: calc(-1 * var(--dp-sp-6));
  height: 1px; width: calc(100% + var(--dp-sp-8));
}
.dp-carte:nth-child(2n+1)::before { display: none; }
.dp-carte:nth-child(2n+1)::after  { width: 100%; }
.dp-carte:nth-last-child(-n+2)::after  { display: none; }
.dp-carte:nth-last-child(-n+2)::before { height: 100%; }

/* Abstand unter dem Kartentitel: 1em der eigenen Schrift, nicht --dp-sp-6.
   Hier stand 24px; am Original gemessen sind es 28px (= 1em von 1,75rem).
   Der Unterschied ist klein und ADDIERT SICH: ueber die 24 Reihen der
   MOL-Liste waren es 96px. Mit 1em stimmt derselbe Baustein auch dort,
   wo er kleiner gesetzt ist — auf der Startseite 20px, ebenfalls gemessen. */
.dp-carte-titlu { margin: 0 0 1em 0; font-size: 1.75rem; }
.dp-carte-titlu a { color: inherit; border-bottom: 0; }
.dp-carte-titlu a:hover { color: var(--dp-accent); }
.dp-carte-rezumat { margin: 0 0 var(--dp-sp-5) 0; }

/* DREI Spalten oberhalb 1680 px — so haelt es das Original (`.posts` traegt
   dort `repeat(3, 1fr)`). Der Neubau blieb bis zum 24.08. bei zwei und zeigte
   auf einem grossen Schirm 400,8 px breite Karten als 693,94 px breite.
   Die Haarstriche folgen mit: senkrecht zwischen den Spalten, waagerecht
   zwischen den Reihen — dieselbe Regel, nur mit 3n statt 2n. */
@media (min-width: 1681px) {
  .dp-lista { grid-template-columns: repeat(3, 1fr); }
  .dp-carte:nth-child(2n+1)::before { display: block; }
  .dp-carte:nth-child(2n+1)::after  { width: calc(100% + var(--dp-sp-8)); }
  .dp-carte:nth-last-child(-n+2)::after  { display: block; }
  .dp-carte:nth-last-child(-n+2)::before { height: calc(100% + var(--dp-sp-8)); }
  .dp-carte:nth-child(3n+1)::before { display: none; }
  .dp-carte:nth-child(3n+1)::after  { width: 100%; }
  .dp-carte:nth-last-child(-n+3)::after  { display: none; }
  .dp-carte:nth-last-child(-n+3)::before { height: 100%; }
}

/* Eine Spalte, sobald zwei nicht mehr lesbar sind */
@media (max-width: 980px) {
  .dp-lista { grid-template-columns: 1fr; }
  .dp-carte::before { display: none; }
  .dp-carte::after  { display: block; width: 100%; }
  .dp-carte:last-child::after { display: none; }
}

/* --- 14. dp-gol — der Leerzustand (LISTE.md 2) ----------------------------- */

/* Eine Anzeige muss sagen, was sie nicht hat.
   Auf den RUBRIKSEITEN gibt es diesen Kasten im Original bereits
   (`.empty-state`) — die Werte hier sind von dort gemessen:
   Grund #f8f9fa, linke Kante 3px #ccc, Radius 4px, Text #6c757d,
   15,2px/22,8px, Innenrand 20px/24px.
   Auf der MOL-LISTE gibt es ihn im Original NICHT (dort steht weisse
   Flaeche, siehe LISTE.md 2) — derselbe Baustein, dort als Zusatz. */
.dp-gol {
  margin: 0 0 var(--dp-sp-5) 0;
  padding: 20px 24px;
  border-left: var(--dp-linie-3) solid var(--dp-linie);
  border-radius: 4px;
  background: var(--dp-gol-fundal);
  color: var(--dp-gol-text);
  font-size: 15.2px;
  line-height: 1.5;
}
.dp-gol > :last-child { margin-bottom: 0; }
.dp-gol p { margin-bottom: var(--dp-sp-3); }
.dp-gol-titlu {
  margin: 0 0 var(--dp-sp-2) 0;
  font-family: var(--dp-font-titlu);
  font-size: 17.6px;
  font-weight: 700;
  color: var(--dp-titlu);
}
.dp-gol .dp-buton { margin-top: var(--dp-sp-3); }

/* --- 15. dp-vorschau — Streifen der Vorschau-Instanz ----------------------- */

/* NUR auf der Vorschau unter preg.ro. Gehoert NICHT auf eine Gemeindeseite. */
.dp-vorschau {
  position: relative;
  z-index: 300;
  padding: var(--dp-sp-3) var(--dp-sp-6);
  background: #7c2d12;
  color: #fff;
  font-size: .85rem;
  /* GANZE Pixel: 12 + 20 + 12 = 44. Mit line-height 1.5 waeren es 44,4 px,
     und die halbe Pixelphase verschiebt JEDE 1px-Linie darunter um eine
     Zeile. Beim Bildvergleich gegen die laufende Seite sah das aus wie ein
     Designfehler und war der Streifen selbst. */
  line-height: 1.25rem;
  text-align: center;
}
.dp-vorschau strong { color: #fff; }
.dp-vorschau a { color: #fff; border-bottom-color: rgba(255,255,255,.6); }

/* --- 16. Das Rubrik-Muster (DESIGN.md 7.10) --------------------------------
   EIN Muster, drei Seiten: Informatii (9 Rubriken), Transparenta (5 aus der
   Maske + 2, die das System selbst fuellt), Integritate (3).
   Alle Werte am Massstab gemessen, 1440px. */

/* Zusaetzliche Farben, jede mit genau einer Aufgabe */
:root {
  --dp-desc:         #555555;   /* Beschreibungstext unter einer Ueberschrift */
  --dp-titlu-tare:   #1a1a1a;   /* Rubriktitel — dunkler als --dp-titlu */
  --dp-gol-fundal:   #f8f9fa;   /* Grund des Leerzustands */
  --dp-gol-text:     #6c757d;   /* dessen Text */
  --dp-accent-adanc: #1d5290;   /* Unterrubrik-Titel, Querverweis */
  --dp-accent-clar:  #eaf1f9;   /* Grund des Querverweises */
}

/* 16.1 Der Kopf einer Rubrikseite */
.dp-hero { margin: 0 0 48px 0; }
.dp-hero-imagine {
  display: block;
  width: 100%;
  max-height: 310px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 32px;
}
.dp-hero-titlu {
  margin: 0 0 12px 0;                              /* fest */
  font-size: 1.75rem; line-height: 1.5;            /* waechst mit: h2 des Themes */
}
.dp-hero-desc {
  margin: 0;
  color: var(--dp-desc);
  font-size: 15.2px; line-height: 1.6;             /* 15,2/24,32 */
}
.dp-hero-desc + .dp-hero-desc { margin-top: 0; }

/* 16.2 Gefuellter Knopf — die zweite Knopfform, nur fuer Verweise nach aussen */
.dp-cta-rand {
  display: flex; flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.dp-cta {
  display: inline-block;
  padding: 10px 22px;
  border: 0; border-radius: 4px;
  background: var(--dp-accent);
  color: #fff;
  font-family: var(--dp-font-text);
  font-size: 16px; font-weight: 500;   /* gemessen; Open Sans v44 ist variabel */
  text-decoration: none;
  transition: background-color .2s ease-in-out;
}
.dp-cta:hover { background: var(--dp-accent-adanc); color: #fff; }

/* 16.3 Die Rubrik */
.dp-rubrica { margin: 0 0 32px 0; }
.dp-rubrica-titlu {
  margin: 0 0 8px 0;                               /* fest */
  font-size: 1.25rem; line-height: 1.5;            /* waechst mit */
  font-weight: 600;
  color: var(--dp-titlu-tare);
}
.dp-desc {
  margin: 0 0 20px 0;
  color: var(--dp-desc);
  font-size: 15.2px; line-height: 1.55;            /* 15,2/23,56 */
}
.dp-subrubrica { margin-bottom: 22.4px; }          /* 1,4rem des Originals */
/* Innerhalb einer Rubrik traegt der Leerzustand keinen eigenen Abstand —
   den Abstand macht die Rubrik. Gemessen: margin-bottom 0. */
.dp-rubrica > .dp-gol, .dp-subrubrica > .dp-gol { margin-bottom: 0; }
.dp-subrubrica-titlu {
  margin: 0 0 5.6px 0;
  font-size: 16px; line-height: 1.5;               /* 16/24 */
  font-weight: 700;
  color: var(--dp-accent-adanc);
}

/* 16.4 Die Tabelle: Denumire | Data | Acces */
.dp-tabel-huelle { overflow-x: auto; margin: 0 0 25px 0; }
.dp-tabel { width: 100%; border-collapse: collapse; }
.dp-tabel th {
  padding: 10px;                                   /* fest */
  border-bottom: var(--dp-linie-2) solid var(--dp-linie);
  color: var(--dp-titlu);
  font-size: .9rem; font-weight: 600;              /* waechst mit */
  text-align: left;
  white-space: nowrap;
}
.dp-tabel td {
  padding: 10px;
  border-bottom: var(--dp-linie-1) solid var(--dp-linie);
  vertical-align: top;
}
.dp-tabel-data { white-space: nowrap; }
.dp-tabel-acces { white-space: nowrap; }

/* 16.5 Querverweis — wenn eine Rubrik auf eine andere Seite zeigt */
.dp-legaturi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dp-legatura {
  display: inline-block;
  padding: 9px 16px;
  /* 6px FEST, nicht --dp-raza: der Querverweis gehoert zur festen Skala des
     Originals (`.iip-reflink { border-radius: 6px }`), waehrend --dp-raza mit
     dem Fuss waechst wie der Knopf, dessen Radius im Theme in `em` steht. */
  border: 0; border-radius: 6px;
  background: var(--dp-accent-clar);
  color: var(--dp-accent-adanc);
  font-size: 14.72px; font-weight: 600;
  text-decoration: none;
}
/* 1px Rahmen wie im Original gemessen (rgb(214,227,240)).
   Der Pfeil ist Dekoration, keine Inhaltsangabe — im Original haengt ihn das
   Twig-Template an den Text, hier steht er im CSS. So bleibt der Text in den
   Daten der reine Titel. */
.dp-legatura { border: var(--dp-linie-1) solid #d6e3f0; }
.dp-legatura::after { content: " \2192"; }
.dp-legatura:hover { background: var(--dp-accent); color: #fff; }

@media (max-width: 736px) {
  .dp-cta-rand { justify-content: flex-start; }
  .dp-legatura { display: block; width: 100%; }
}

/* --- 17. dp-contact — die Kontaktseite (DESIGN.md 7.11) --------------------
   Gemessen an /ro/sesizari-contact, 1440px. */

/* Die Karte ist im Original ein SEITENVERHAELTNIS, kein fester Kasten:
   `.map-responsive { padding-bottom: 40.25%; height: 0 }` mit einem <iframe>,
   das 90% davon fuellt. Also 40,25 x 0,9 = 36,225% der eigenen Breite.
   Vorher stand hier eine feste Hoehe von 21,5rem; bei 1440px traf sie auf
   0,3px genau und bei 1920px um 100px daneben. Am 24.08. nachgemessen. */
.dp-harta {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 362.25;        /* = 36,225% der Breite */
  height: auto;
  border: 0;
  border-radius: 10px;
  margin-bottom: var(--dp-sp-5);
}

.dp-contact-caseta { padding-top: var(--dp-sp-6); }   /* 40px oben, s.u. */
.dp-contact-raster {
  display: flex; flex-wrap: wrap;
  align-items: flex-start;            /* Kaesten so hoch wie ihr Inhalt */
  gap: 40px;
}
/* Der Textblock ist im Symbol ZENTRIERT, nicht oben ausgerichtet.
   Gemessen: Zeile 82,5px hoch, Text 72px, Versatz 5,3px = (82,5-72)/2. Ist
   der Text hoeher als 82,5, waechst die Zeile und der Versatz wird 0 —
   beides mit `center` getroffen. Am Original nachgemessen (1440px):

       Zeile 1  289,59 x 82,5   Text 72 bei dy 5,25
       Zeile 2  289,61 x 82,5   Text 72 bei dy 5,25
       Zeile 3  289,61 x 96     Text 96 bei dy 0

   DIE 82,5 STEHEN SEIT 25.08.2026 HIER und nicht mehr am Symbol. Vorher
   hielt `min-height` am `.dp-sim` die Zeile — als Nebenwirkung. Sobald das
   Symbol seine eigene Hoehe bekam (50px, wie im Original), fiel die Zeile
   auf 72 und alles darunter rueckte 10,5px hoch. Gemessen, nicht vermutet:
   die Kastenpruefung ueber sechs Haltepunkte hat es gezeigt.
   Eine Hoehe, die einem Kind gehoert und eine Zeile haelt, haelt sie nur
   so lange, wie niemand das Kind anfasst. */
.dp-contact-teil {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1 1 250px;                    /* min-width: 250px im Original */
  min-height: 82.5px;                 /* die Zeilenhoehe, gemessen */
}
.dp-contact-teil > .dp-sim {
  /* HOEHE FUEHRT, BREITE FOLGT — am Original gemessen, 25.08.2026 (web-v4).
     Die drei Zellen sind dort NICHT gleich breit: `.map-contact__icon` traegt
     `flex: 0 0 auto`, und die Glyphe bestimmt die Breite ueber ihre
     Vorschubbreite. An allen sechs Haltepunkten identisch:

         fa-house         vb 576   Zelle 56 x 82,5   Glyphe 56 x 50
         fa-calendar-days vb 448   Zelle 44 x 82,5   Glyphe 44 x 50
         fa-comment-dots  vb 512   Zelle 50 x 82,5   Glyphe 50 x 50

     `flex: 0 0 56px` war deshalb ZWEIMAL falsch: es quetschte das Haus
     (576 in 56 statt 56,25 -> 11,1 % zu klein, der sichtbare Fund) UND es
     machte Kalender und Sprechblase um 12 bzw. 6 px zu breit.

     `width: 50px; height: 50px` bestimmte den Kasten dabei GAR NICHT —
     die Flex-Basis und `min-height` ueberschrieben beide. Ein Tausch auf
     `width: auto` allein haette nichts geaendert; nachgemessen. */
  flex: 0 0 auto;
  width: auto; height: 50px;          /* Glyphe 50px hoch, Breite frei */
  align-self: flex-start;
  margin-top: 14px;                   /* Versatz der Glyphe in der Zelle */
  color: #1e3050;                     /* eigene, dunklere Blaustufe */
}
.dp-contact-teil > div { flex: 1 1 auto; min-width: 0; }
/* Der Seitentitel der Kontaktseite traegt 28px Abstand, nicht 12 wie auf den
   Rubrikseiten — gemessen. */
.dp-contact-titlu { margin-bottom: var(--dp-sp-5); }
.dp-contact-text {
  margin: 0;
  color: #1b1b1b;
  font-size: 15px; line-height: 1.6;       /* 15/24 */
}
/* Im Kontaktkasten sind die WERTE schwarz — die Beschriftungen wie die
   Adressen. Gemessen: strong #000, und der E-Mail-Verweis ebenfalls #000. */
.dp-contact-text strong,
.dp-contact-text .dp-adresa { color: #000; }
.dp-contact-text strong { font-weight: 600; }

/* Formular. Feld und Knopf sind schon da (dp-camp, dp-buton) — hier nur
   Beschriftung, Abstand und das mehrzeilige Feld. */
.dp-formular { margin: 0 0 var(--dp-sp-5) 0; }
.dp-camp-grup { margin-bottom: var(--dp-sp-4); }
.dp-eticheta-camp {
  display: block;
  margin: 15px 0 5px 0;
  color: var(--dp-titlu);
  font-size: 15px; line-height: 1.65;
  font-weight: 600;
}
.dp-camp-lung {
  height: auto; min-height: 78.8px;
  padding: 12px 16px;
  resize: vertical;
}
.dp-camp-nota {
  margin: var(--dp-sp-2) 0 0 0;
  color: var(--dp-gol-text);
  font-size: .9rem;
}

/* Auswahlfeld und Ankreuzfeld — dieselbe Feldhoehe wie dp-camp */
select.dp-camp { appearance: none; padding-right: var(--dp-sp-7); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dp-text) 50%),
                    linear-gradient(135deg, var(--dp-text) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; }
.dp-bifa { display: flex; gap: var(--dp-sp-3); align-items: flex-start;
  margin-top: var(--dp-sp-4); font-size: .9375rem; line-height: 1.65; cursor: pointer; }
.dp-bifa input { margin-top: .35em; flex: 0 0 auto; }

/* dp-nota — ein Hinweis, der KEIN Leerzustand ist.
   dp-gol sagt "hier ist nichts". dp-nota sagt "das hier geht noch nicht".
   Zwei verschiedene Aussagen, deshalb zwei Bausteine und zwei Farben. */
.dp-nota {
  margin: 0 0 var(--dp-sp-5) 0;
  padding: 1.25rem 1.5rem;
  border-left: var(--dp-linie-3) solid var(--dp-accent);
  border-radius: .25rem;
  background: var(--dp-accent-clar);
  color: var(--dp-text);
  font-size: .95rem;
  line-height: 1.55;
}
.dp-nota > :last-child { margin-bottom: 0; }
.dp-nota p { margin-bottom: var(--dp-sp-3); }
.dp-nota-titlu {
  margin: 0 0 var(--dp-sp-2) 0;
  font-family: var(--dp-font-titlu);
  font-size: 1rem; font-weight: 700;
  color: var(--dp-accent-adanc);
}

/* Ein Formular ohne Empfaenger zeigt das. Die Felder bleiben sichtbar — sie
   sind der Entwurf dessen, was kommt — aber sie nehmen nichts an, und der
   Knopf ist kein toter Knopf, sondern der Weg, der heute funktioniert. */
.dp-formular-aus .dp-camp,
.dp-formular-aus .dp-bifa input { background: var(--dp-gol-fundal); color: var(--dp-gol-text); cursor: not-allowed; }
.dp-formular-aus .dp-eticheta-camp,
.dp-formular-aus .dp-bifa { color: var(--dp-gol-text); }

/* Abschlussblock am Fuss einer Rubrikseite (Documente & Servicii) */
.dp-incheiere { margin: 0 0 var(--dp-sp-5) 0; }
.dp-incheiere-titlu {
  margin: .9375rem 0 1.375rem 0;      /* 15px / 22px, gemessen */
  font-size: 1.375rem; line-height: 1.5;   /* 22/33 */
  font-weight: 700;
  color: var(--dp-titlu);
}

/* Documente & Servicii traegt drei Masse, die von den uebrigen Rubrikseiten
   abweichen. Sie sind AM ORIGINAL GEMESSEN und werden reproduziert, weil
   Angleichen eine sichtbare Aenderung waere (Entscheidung C, 24.08.).
   Ob sie spaeter angeglichen werden, ist eine Entscheidung, kein Versehen. */
.dp-servicii .dp-hero-imagine { margin-bottom: .9375rem; }   /* 15px statt 32 */
.dp-servicii .dp-hero-titlu   { margin-bottom: 1.75rem; }        /* 28px statt 12 */
.dp-servicii .dp-hero-desc    { color: #333; font-size: .9375rem; line-height: 1.6;
                                margin-bottom: 1.5625rem; }  /* #333/15/24 statt #555/15,2/24,32 */
.dp-servicii .dp-tabel-huelle { margin-bottom: 1.5625rem; }  /* 25px */

/* SCHICHT 1 des Spam-Schutzes: das Koederfeld.
   NICHT `display: none` allein — das erkennen Bots. Weggeschoben statt
   ausgeblendet; `aria-hidden` und `tabindex="-1"` im Markup halten es aus
   Screenreader und Tastaturfolge heraus. */
.dp-capcana {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- 18. Primăria: drei Formen, die es nur hier gibt (DESIGN.md 7.12) ------
   Gemessen an /ro/primaria, 1440px. */

/* 18.1 dp-persoana — die Personenkarte. NICHT dp-carte: die Listenkarte sitzt
   im Zweispaltenraster mit Haarlinien, diese hier ist ein eigener Kasten mit
   Bild links. Zwei Formen, nicht eine (MUSTER.md, Vorschlag B). */
/* DREI Karten in einer Reihe — Entscheidung von Lukas, DESIGN.md 8, 14.
   Die laufende Seite zeigt heute zwei oben und den Secretar darunter: die
   Karte ist dort 525px breit und die dritte bricht um. Genommen wird die
   KOMPAKTE Form, die dasselbe Theme fuer schmale Spalten schon mitbringt —
   Bild oben (100% breit, 250px hoch), Text darunter, Innenrand 15px. */
.dp-persoane {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* GESTRECKT, nicht `start`: alle Karten einer Reihe schliessen gleich hoch
     ab. Zusammen mit dem festen Seitenverhaeltnis des Bildes und dem
     reservierten CV-Platz steht die Reihe damit gerade. */
  align-items: stretch;
  padding: var(--dp-sp-4) 0;
}
.dp-persoana {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: 10px;
  background: #f9fafa;
  overflow: hidden;
}
/* Das Bild traegt ein FESTES SEITENVERHAELTNIS — DESIGN.md 8, 17.
   Warum ueberhaupt eines: die Gemeinden schicken ueberwiegend HOCHFORMAT,
   oft kleine Portraets. `cover` + `object-position: top` schneidet unten weg
   — der Kopf bleibt drin, Brust und Hintergrund fallen heraus.

   WELCHES: das des Originals, 200 x 228 = 0,877. Am Massstab gemessen, und
   zwar ueber alle sechs Haltepunkte — es steht dort bei jeder Breite gleich.
   Der Kasten ist damit HOCHKANT, nicht quer.

   Vorher stand hier 6/5 (1,2, also quer). Das schnitt zu viel weg: bei einer
   Bilddatei von 0,741 (der Viceprimar) fielen 38,2% der Hoehe heraus statt
   der 15,5% des Originals — dem Buergermeister fuellte das Gesicht den
   ganzen Rahmen, dem Viceprimar war der Kopf oben angeschnitten.
   Gemessen, nicht geschaetzt: die drei Bilddateien tragen 0,795 / 0,741 /
   0,747 — alle drei hochkant. */
/* Das Seitenverhaeltnis traegt der KASTEN, nicht das Bild — sonst faellt die
   Hoehe weg, sobald kein Foto da ist, und die Reihe steht schief. */
.dp-persoana-bild {
  position: relative;               /* das Bild liegt DARIN, nicht darunter */
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 200 / 228;          /* = 0,877, am Original gemessen */
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  background: #eef0f1;              /* traegt, solange kein Bild da ist */
}
/* Absolut gesetzt, damit die Eigenhoehe des Bildes den Kasten NICHT
   auseinandertreibt: mit `height: 100%` gegen einen Kasten ohne feste Hoehe
   faellt ein Bild auf seine eigene Hoehe zurueck, und drei verschieden hohe
   Portraets ergaben drei verschieden hohe Kaesten (382,9 / 410,9 / 407,5 —
   nachgemessen, bevor es so dastand). */
.dp-persoana-bild img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
}
.dp-persoana-text {
  flex: 1 1 auto; min-width: 0; padding: 15px;
  display: flex; flex-direction: column;
}
/* Der leere CV-Platz: eine Zeile hoch, damit die Karten gleich schliessen. */
.dp-persoana-luecke { height: 21px; margin-bottom: 0; }
.dp-persoana-nume {
  margin: 0 0 4px 0;               /* 4px */
  font-family: var(--dp-font-text);
  font-size: 17px; line-height: 1.65;   /* 17/28,05 */
  font-weight: 400; color: #444;
  /* ZWEI Zeilen reserviert, wie beim CV-Platz. Gemessen ueber die
     Haltepunkte: "Valerica Lăcrămioara HRIȚULEAC" — der laengste Name im
     Bestand — bricht bei 981, 1000 und 1281px um, die beiden Nachbarn nicht.
     Die Karten blieben zwar gleich hoch (das Raster streckt sie), aber die
     Textzeilen darunter standen versetzt. Der Preis sind 28px Weissraum,
     wo alle Namen kurz sind; der Gewinn ist eine gerade Reihe. */
  min-height: 3.3em;               /* 2 x 1,65 = 56,1px */
}
.dp-persoana-rol {
  margin: 0 0 20px 0;              /* 20px */
  font-size: 15px; line-height: 1.65;    /* 15/24,75 */
  font-weight: 600; color: #222;
}
.dp-persoana-rand {
  margin: 0 0 6px 0;              /* 6px */
  font-size: 15px; line-height: 1.4;     /* 15/21 */
  color: #555;
}
.dp-persoana-rand:last-child { margin-bottom: 0; }

/* 18.2 dp-consiliu — Namen nach Partei. Bewusst KEINE Karten:
   dreizehn Ratsmitglieder ohne Foto bekaemen dreizehn leere Bildplaetze,
   und eine Leerstelle sieht aus wie fehlende Daten (MUSTER.md, Vorschlag D). */
.dp-consiliu {
  padding: var(--dp-sp-4) var(--dp-sp-6) var(--dp-sp-6) var(--dp-sp-6);
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: 10px;
  background: #f9fafa;
}
/* Symbol LINKS, die Parteien daneben — im Original `.primaria-council-inner`
   mit Innenrand 20px links und 40px Abstand zum Bild. */
.dp-consiliu-inner {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 40px; padding-left: 20px;
}
.dp-consiliu-simbol { flex: 0 0 auto; width: 220px; height: auto; object-fit: contain; }
.dp-consiliu-coloane { display: flex; flex-wrap: wrap; gap: 60px; }   /* 60px */
/* Die Spalte richtet sich nach ihrem Inhalt, mit 180px als Untergrenze.
   Fest auf 180px brachen lange Namen um ("Gheorghe-Danut DUMITRAS"), im
   Original tun sie das nicht. */
.dp-consiliu-partid { flex: 0 1 auto; min-width: 180px; }
.dp-consiliu-partid > strong { display: block; margin-bottom: var(--dp-sp-2);
  font-size: 16px; line-height: 1.5; color: var(--dp-titlu); }   /* 16/24, mb 8 */
.dp-consiliu-partid ul { margin: 0 0 32px 0; padding-left: 18px; }  /* mb 32, pl 18 */
.dp-consiliu-partid li { font-size: 15px; line-height: 1.2; color: #333; margin-bottom: 3px; }  /* 3px, gemessen */
/* Der erklaerende Satz steht ZENTRIERT unter dem Kasteninhalt, nicht links.
   Gemessen: `.primaria-council-description { text-align:center; font-size:15px;
   color:#666; margin-bottom:20px }`. */
.dp-consiliu-nota {
  margin: 32px 0 20px 0;
  font-size: 15px; line-height: 1.5; color: #666;
  text-align: center;
}

/* 18.3 dp-cariera — zwei Kaesten nebeneinander */
.dp-cariera { display: grid; grid-template-columns: 1fr 1.75fr; gap: var(--dp-sp-4); }
.dp-cariera-kasten {
  padding: 17.6px 20px;            /* 17,6 / 20 */
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: 12px;              /* 12px */
  background: #f4f5f7;
}
.dp-cariera-kopf {
  display: flex; align-items: center; gap: var(--dp-sp-2);
  margin-bottom: var(--dp-sp-3);
  font-family: var(--dp-font-titlu); font-weight: 700; color: var(--dp-titlu);
}
.dp-cariera-kopf .dp-sim { width: 17.6px; height: 17.6px; color: var(--dp-accent); }
.dp-cariera-kasten p { font-size: 15.2px; line-height: 1.55; }
.dp-cariera-kasten > :last-child { margin-bottom: 0; }

/* Die Concursuri im zweiten Kasten. Form am Original abgelesen
   (`cariera-item` / `-meta` / `-links`): Titel, darunter eine Zeile aus
   Marke, Art und Datum, darunter die Dokumente. Die Klassennamen sind eigene
   — uebernommen ist die FORM, nicht der Code. */
.dp-cariera-posten + .dp-cariera-posten {
  margin-top: var(--dp-sp-4);
  padding-top: var(--dp-sp-4);
  border-top: var(--dp-linie-1) solid var(--dp-linie);
}
.dp-cariera-titlu {
  margin: 0 0 var(--dp-sp-2) 0;
  font-weight: 700; color: var(--dp-titlu);
}
.dp-cariera-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-sp-2);
  margin: 0 0 var(--dp-sp-3) 0;
}
/* Die Marke sagt, WO das Verfahren steht. Sie ist die einzige Farbflaeche im
   Kasten und deshalb bewusst ruhig — kein Signalton fuer einen Zustand, der
   meistens "abgeschlossen" heisst. */
.dp-cariera-marca {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--dp-accent); color: #fff;
  font-size: 12.8px; font-weight: 700; line-height: 1.6;
}
.dp-cariera-tip {
  padding: 2px 10px;
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: 999px;
  font-size: 12.8px; line-height: 1.6; color: var(--dp-desc);
}
.dp-cariera-datum { font-size: 12.8px; color: var(--dp-mut); }
/* Untereinander, nicht nebeneinander: die Beschriftungen sind ganze Saetze
   ("Rezultat selecție dosare"), und nebeneinander bricht das in eine Wand. */
.dp-cariera-verweise { display: flex; flex-direction: column; gap: var(--dp-sp-2); margin: 0; }
.dp-cariera-verweise a {
  display: flex; align-items: center; gap: var(--dp-sp-2);
  font-size: 14.4px; line-height: 1.5;
}
.dp-cariera-verweise .dp-sim { color: var(--dp-accent); flex: 0 0 auto; }

/* Die Logoleiste am Seitenende — Consiliul Judetean, APIA, MAI DSU, 112.
   Am Original gemessen: Innenrand 25px oben und unten, Abstand 50px,
   Bildhoehe 100px, Breite nach Verhaeltnis, mittig.
   Das Wappen des Kreisrats ist je Kreis ein anderes und kommt aus den
   Daten — Dersca: Botosani, Balta Alba: Buzau. */
.dp-sigle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 25px 0;
}
.dp-sigle a { border-bottom: 0; line-height: 0; }
.dp-sigla { display: block; height: 100px; width: auto; }
@media (max-width: 736px) { .dp-sigle { gap: 30px; } .dp-sigla { height: 70px; } }

/* Der kurze blaue Trenner zwischen den Abschnitten. Im Original
   `.primaria-hr { border: 2px solid #2467AF; width: 25% }` — ein Anteil, kein
   fester Wert. Hier stand 237,2px; das ist 25% von 948,81 und stimmte
   deshalb nur bei 1440px. Er steht auf FUENF Seiten, nicht auf zweien:
   Informatii (14x), Transparenta (9x), Integritate (5x), Primaria (5x),
   Kontakt (1x) — jeweils ZWISCHEN zwei Abschnitten. */
.dp-taietura {
  width: 25%; height: 4px;
  margin: var(--dp-sp-5) 0;
  border: 0; border-top: 2px solid var(--dp-accent); border-bottom: 2px solid var(--dp-accent);
}

/* Primăria traegt zwei eigene Masse gegenueber den Rubrikseiten — am
   Original gemessen, wie bei .dp-servicii (DESIGN.md 8, 4c). */
.dp-primaria .dp-hero-titlu { margin-bottom: 5px; }        /* 5px */
.dp-primaria > .dp-articol > .dp-desc {
  color: var(--dp-text);                                         /* nicht #555 */
  font-size: 15px; line-height: 1.6;                         /* 15/24 */
  margin-bottom: 25px;                                      /* 25px */
}

/* Unterhalb 981px wird die Karte breiter, und ein hochkantes Verhaeltnis an
   voller Kartenbreite ergibt ein sehr hohes Bild (bei 736px waeren es 770px).
   Ab hier gilt deshalb die feste Hoehe, die das Original in seiner kompakten
   Form selbst benutzt: 250px, volle Breite. Der Zuschnitt wird dort staerker
   — genau wie im Original. */
@media (max-width: 980px) {
  .dp-persoane { grid-template-columns: repeat(2, 1fr); }
  .dp-persoana-bild { aspect-ratio: auto; height: 250px; }
}
@media (max-width: 736px) {
  .dp-persoane { grid-template-columns: 1fr; }
  .dp-cariera { grid-template-columns: 1fr; }
  .dp-consiliu-inner { padding-left: 0; gap: 20px; }
  .dp-consiliu-simbol { width: 100%; }
}

/* --- 19. dp-galerie — M4, Bildkacheln (DESIGN.md 7.13) ---------------------
   Gemessen an der LAUFENDEN Seite, nicht am Abzug: die Galeriebilder sind
   Grav-Bildderivate, die im Abzug fehlen (Ursache A im Befund). */

.dp-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dp-sp-6);                 /* 24px -> Spalte 300,3 */
  margin: var(--dp-sp-4) 0;
}
.dp-galerie-zelle { text-align: center; }

/* Die Kachel ist schmaler als die Zelle: 268,3 in 300,3, also 16px je Seite. */
.dp-galerie-kachel {
  position: relative;
  display: block;
  margin: var(--dp-sp-4) var(--dp-sp-4) var(--dp-sp-2) var(--dp-sp-4);
  border-radius: var(--dp-raza);
  overflow: hidden;
  border-bottom: 0;
}
.dp-galerie-bild {
  display: block; width: 100%;
  aspect-ratio: 3 / 2;                 /* 268,3 x 178,4 gemessen */
  object-fit: cover;
}

/* Die Ueberlagerung erscheint erst bei Beruehrung — im Ruhezustand ist sie
   unsichtbar (opacity 0), gemessen. Sie ist Zugabe, keine Information:
   Titel und Text stehen auch darunter bzw. im alt-Text. */
.dp-galerie-schleier,
.dp-galerie-details {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.dp-galerie-schleier { background: rgba(0, 0, 0, .7); }
.dp-galerie-details {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--dp-sp-4);
  color: #fff;
}
.dp-galerie-kachel:hover .dp-galerie-schleier,
.dp-galerie-kachel:hover .dp-galerie-details,
.dp-galerie-kachel:focus-visible .dp-galerie-schleier,
.dp-galerie-kachel:focus-visible .dp-galerie-details { opacity: 1; }

.dp-galerie-titlu {
  margin: 0 0 .625rem 0;               /* 10px */
  font-family: var(--dp-font-titlu);
  font-size: 1.25rem; line-height: 1.5;   /* 20/30 */
  font-weight: 500; color: #fff;
}
.dp-galerie-text { margin: 0; font-size: .9rem; line-height: 1.45; color: #fff; }

/* Die Beschriftung UNTER der Kachel — sie traegt die Information, nicht die
   Ueberlagerung. 18px/27 Gewicht 700, gemessen. */
.dp-galerie-eticheta {
  margin: 0 0 .625rem 0;
  font-family: var(--dp-font-titlu);
  font-size: 1.125rem; line-height: 1.5;
  font-weight: 700; color: var(--dp-titlu-tare);
}

@media (max-width: 980px) { .dp-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 736px) { .dp-galerie { grid-template-columns: 1fr; } }

/* --- 20. dp-sectiune — die Abschnitts-Ueberschrift des Hauptteils ----------
   Dieselbe FORM wie dp-bara-titlu und dp-an (Zeile mit 3px-Akzentstrich
   darunter), aber in der Groesse des Hauptteils. Im Original ist das kein
   Sonderfall, sondern eine allgemeine Regel:

     header.major > :last-child { border-bottom: 3px solid #2467af;
       display:inline-block; margin: 0 0 2em 0; padding: 0 .75em .5em 0 }

   Alle drei Masse stehen in `em` der Ueberschrift — die eine Ausnahme, die
   DESIGN.md 1 zulaesst. Gemessen bei 1440px: 28px/42, pr 21, pb 14, mb 56. */

.dp-sectiune { margin: 0 0 var(--dp-sp-5) 0; }
.dp-sectiune > :last-child { margin-bottom: 0; }

.dp-sectiune-titlu {
  display: inline-block;
  margin: 0 0 2em 0;                  /* 56px bei 28px Schrift */
  padding: 0 .75em .5em 0;            /* 21px / 14px */
  border-bottom: var(--dp-linie-3) solid var(--dp-accent);
  font-size: 1.75rem;                 /* = h2, hier ausgeschrieben */
}

/* --- 21. Die Startseite (M7) ----------------------------------------------
   Fuenf Teilstuecke, am Original bei 1440px gemessen:
   Kopfbild · Kasten mit Text und Karte · Kacheln · die drei juengsten
   Anuntzuri · die Amtstraeger.

   ZWEI der fuenf brauchen GAR KEINEN neuen Baustein:
   die Anuntzuri sind dp-lista + dp-carte (dasselbe Raster wie die
   Listenseite — 450,41 + 48 + 450,41, nachgerechnet identisch), und der
   Abschnittskopf ist dp-sectiune aus 20. Neu sind drei: Kopfbild, Kasten,
   Kacheln, dazu die Personenkarten. */

.dp-acasa { padding: var(--dp-sect-t) 0 var(--dp-sect-b) 0; }

/* 21.1 Das Kopfbild.
   Im Original steckt es in einem inline-block-Kasten; darunter bleiben
   gemessene 7,39px stehen — das ist die Unterlaenge der Zeilenschachtel
   (Open Sans, 16px in 26,4px Zeile), nicht ein Abstand, den jemand gesetzt
   hat. Hier entsteht sie durch DENSELBEN Mechanismus: das Bild bleibt
   inline. Damit stimmt sie auch bei jedem anderen Fuss von selbst. */
.dp-erou { margin: 0 0 var(--dp-sp-5) 0; }
.dp-erou-imagine { width: 100%; border-radius: var(--dp-raza); }

/* 21.2 Der Kasten — im Original `.box` bzw. `.box.light`, eine allgemeine
   Form des Themes: Radius 6px, 1px Linie, Innenrand 24px, Abstand 32px.
   Alle vier Werte sind bereits DigiPagina-Werte, nur zusammengesetzt. */
.dp-caseta {
  margin: 0 0 var(--dp-sp-5) 0;
  padding: var(--dp-sp-6);
  border: var(--dp-linie-1) solid var(--dp-linie);
  border-radius: var(--dp-raza);
}
.dp-caseta > :last-child { margin-bottom: 0; }
/* `.light`: heller Grund, und der Text wird zur Ueberschriftenfarbe.
   Gemessen: der Absatz im Kasten ist rgb(46,52,56), nicht rgb(69,69,73). */
.dp-caseta-clara { background: rgba(230, 235, 237, .25); color: var(--dp-titlu); }

/* Text und Karte nebeneinander, 70/30. Gemessen 606,77 zu 260,05 — das ist
   genau 70:30 der Innenbreite ohne den 32px-Zwischenraum. */
.dp-despre { display: flex; gap: 32px; justify-content: space-between; }  /* 2rem des Originals — fest */
.dp-despre-text  { width: 70%; }
.dp-despre-harta { width: 30%; }
/* Die Ueberschrift im Kasten ist im Original ein <h4> — 17,6px. Die GROESSE
   bleibt, die EBENE wird h2: eine h4 unter einer h1 ueberspringt zwei
   Stufen. Dieselbe Korrektur wie beim Dokumentblock, DESIGN.md 7.8b. */
.dp-despre-titlu { font-size: 1.1rem; }
/* Die Karte fuellt ihre Spalte in der Hoehe — sie ist so hoch wie der Text
   daneben, nicht hoeher. Im Original per height="100%" am <iframe>. */
.dp-despre-harta iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 21.3 Die Kacheln — der letzte fehlende Baustein aus MUSTER.md.
   Raster: zwei Spalten, 48px Zwischenraum. Im Original ueber negative
   Aussenabstaende gebaut (-3em am Kasten, +3em/-1.5em je Kachel); das Netz
   davon ist genau dieses Raster, nachgerechnet: 450,41 + 48 + 450,41 =
   948,81 = die Inhaltsbreite. Dasselbe Raster wie dp-lista. */
.dp-placi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dp-sp-8);                /* 48px, waagerecht wie senkrecht */
  /* Die Zellen strecken sich NICHT: eine kuerzere Kachel bleibt so hoch wie
     ihr Inhalt, sonst saesse ihr mittig gesetzter Inhalt tiefer als im
     Original. Dort steht dafuer `align-items: start` am Kachelkasten. */
  align-items: start;
  margin: 0 0 var(--dp-sp-5) 0;
}
.dp-placa { display: flex; align-items: center; }

/* Der Symbolkasten: 10rem im Quadrat, darin eine RAUTE — ein um 45 Grad
   gedrehtes Quadrat von 7rem mit 2px Linie und 4px Radius. Die Raute stand
   in keiner Messung, sondern im Bild: sie ist ein ::after, das ohne
   Bildschuss unsichtbar bleibt. */
.dp-placa-sim {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem; height: 10rem;
  margin-right: var(--dp-sp-5);
  color: var(--dp-accent);
}
.dp-placa-sim::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7rem; height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border: var(--dp-linie-2) solid var(--dp-linie);
  border-radius: 4px;
  transform: rotate(45deg);
}
/* Die Glyphe wird ueber die HOEHE bemessen, nicht ueber die Breite:
   fa-money-bill-alt ist 640 von 512 Einheiten breit, und ein 1em-Quadrat
   wuerde sie um ein Fuenftel schrumpfen. Mit height + width:auto trifft sie
   dieselbe Groesse wie der Webfont bei 2,75rem. */
.dp-placa-sim .dp-sim {
  width: auto;
  height: 44px;                       /* 2,75rem des Originals — fest */
  position: relative;
  top: 2.2px;                         /* = .05em der 44px-Glyphe, gemessen */
  vertical-align: baseline;
}
.dp-placa-corp { flex: 1 1 auto; min-width: 0; }
.dp-placa-corp > :last-child { margin-bottom: 0; }

/* 21.4 Die Amtstraeger der Startseite.
   NICHT dp-persoana: das ist die querliegende Karte auf /primaria
   (525x250, Bild links, grauer Grund). Hier steht das Bild ueber dem Text,
   die Karte traegt einen Schatten und keinen Rahmen, und die Angaben sind
   andere — dieselben drei Personen aus einer ANDEREN Datenquelle.
   MUSTER.md B: Daten zusammenlegen ja, Darstellung nein. */
.dp-echipa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;                       /* 36px, gemessen */
  margin: 0 0 var(--dp-sp-5) 0;
  /* Im Original traegt JEDE Karte 36px Abstand nach unten, auch die der
     letzten Reihe. Das Raster hier kennt nur Zwischenraeume — die 36px am
     Fuss stehen deshalb hier, sonst endet die Seite 36px zu frueh. */
  padding-bottom: 2.25rem;
}
.dp-echipa-membru {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  box-shadow: var(--dp-umbra);
}
.dp-echipa-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dp-echipa-bild {
  height: 125px;
  width: auto;
  border-radius: 50%;
  margin-bottom: 10px;
}
.dp-echipa-nume { margin-bottom: 1em; }              /* 20px, = h3-Vorgabe */
.dp-echipa-rol {
  margin: -5px 0 var(--dp-sp-5) 0;    /* -5px fest, 2em darunter waechst mit */
  color: var(--dp-accent);
}
.dp-echipa-desc { margin: 10px; width: 90%; }

/* 21.5 Die drei juengsten Anuntzuri — dp-lista/dp-carte, nur der Titel ist
   kleiner: im Original h3 20/30 statt h2 28/42 auf der Listenseite.
   Ein Modifikator am Behaelter, wie .dp-servicii und .dp-primaria. */
.dp-lista-recente .dp-carte-titlu { font-size: 1.25rem; }

/* DREI Spalten, nicht zwei — Entscheidung von Lukas, DESIGN.md 8, 15.
   Das Original zeigt hier unterhalb 1681px zwei Karten und die dritte
   darunter; der Block traegt aber immer genau drei Eintraege (`limit: 3`),
   und drei nebeneinander sind gleich hoch und symmetrisch. Oberhalb 1681px
   tut das Original ohnehin dasselbe. */
@media (min-width: 981px) {
  .dp-lista-recente { grid-template-columns: repeat(3, 1fr); }
  .dp-lista-recente .dp-carte:nth-child(2n+1)::before { display: block; }
  .dp-lista-recente .dp-carte:nth-child(2n+1)::after  { width: calc(100% + var(--dp-sp-8)); }
  .dp-lista-recente .dp-carte:nth-last-child(-n+2)::after  { display: block; }
  .dp-lista-recente .dp-carte:nth-last-child(-n+2)::before { height: calc(100% + var(--dp-sp-8)); }
  .dp-lista-recente .dp-carte:nth-child(3n+1)::before { display: none; }
  .dp-lista-recente .dp-carte:nth-child(3n+1)::after  { width: 100%; }
  .dp-lista-recente .dp-carte:nth-last-child(-n+3)::after  { display: none; }
  .dp-lista-recente .dp-carte:nth-last-child(-n+3)::before { height: 100%; }
}

/* Haltepunkte. Die Kacheln stapeln im Original erst bei 480px — dieser
   Haltepunkt gehoert DigiPagina nicht (DESIGN.md 2 kennt fuenf, und jeder
   tut etwas). Er wird deshalb auf `s` (736) gezogen; siehe DESIGN.md 8. */
@media (max-width: 980px) {
  .dp-placi { grid-template-columns: 1fr; }
  .dp-placa-sim { width: 8rem; height: 8rem; }
  .dp-placa-sim::after { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; }
  .dp-placa-sim .dp-sim { height: 36px; top: 1.8px; }
  .dp-echipa { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 736px) {
  .dp-despre { flex-direction: column; gap: 0; }
  .dp-despre-text, .dp-despre-harta { width: 100%; }
  /* Untereinander hat die Karte keinen Nachbarn mehr, an dessen Hoehe sie
     sich haelt: `height: 100%` gegen einen Kasten ohne eigene Hoehe faellt
     auf die Vorgabehoehe eines <iframe> zurueck — 150px. Gemessen im
     Original: Karte 150, Kasten 156,2 (die 6,2 sind wieder die Unterlaenge
     der Zeilenschachtel). Hier entsteht dieselbe Zahl aus demselben
     Mechanismus; sie wird NICHT als Wert hingeschrieben. */
  .dp-placa { flex-direction: column; align-items: flex-start; }
  .dp-placa-sim {
    width: 6rem; height: 6rem;
    margin: 0 0 var(--dp-sp-6) 0;
  }
  .dp-placa-sim::after { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; }
  .dp-placa-sim .dp-sim { height: 20px; top: 1px; }
  .dp-echipa { grid-template-columns: 1fr; }
}

/* --- 22. dp-text — M5, die Textseite --------------------------------------
   Politica de confidentialitate und die Fehlerseite. Titel, Fliesstext,
   sonst nichts. Der einzige eigene Wert ist der Abstand unter der h1:
   1em statt der ueblichen 0,5em. Ursache benannt und gemessen — im Original
   steht der Titel dieser Seiten in `header.main`, und dort gilt
   `header.main > :last-child { margin: 0 0 1em 0 }`. Auf der Anunt-Seite
   steht er in einem nackten <header> und traegt 0,5em (28px). */

.dp-text-titlu { margin-bottom: 1em; }               /* 56px, gemessen */
.dp-text-corp > :last-child { margin-bottom: 0; }

/* --- 23. dp-ip-ref — der Querverweis auf die Intreprinderi publice --------
   Eine Zeile zwischen Carieră und der Logoleiste, im Theme ohne Bedingung.
   Am Original gemessen: 15,2px/24,32, Farbe wie der Fliesstext. */
.dp-ip-ref { margin: 0; }
.dp-ip-ref p { margin: 0; font-size: 15.2px; line-height: 1.6; }

/* --- Die Suchseite (Stufe A) ---------------------------------------------
   Sie hat kein Gegenstueck im Original: die laufende Seite hat SimpleSearch
   als Grav-Plugin, das statisch nicht existieren kann. Die Masse folgen
   deshalb der Rubrikliste (`dp-rubrica`), nicht einem gemessenen Vorbild —
   und das steht hier, damit niemand spaeter eine Messung dazu sucht. */
.dp-cautare-form { display: flex; gap: var(--dp-sp-3); flex-wrap: wrap;
  align-items: center; margin-bottom: var(--dp-sp-3); }
.dp-cautare-form .dp-camp-cauta { flex: 1 1 18rem; }
.dp-cautare-zahl { margin: var(--dp-sp-4) 0 var(--dp-sp-2);
  font-weight: 600; color: var(--dp-mut); }
.dp-cautare-rezultate { list-style: none; padding: 0; margin: 0; }
.dp-cautare-rezultate > li { padding: var(--dp-sp-3) 0;
  border-top: 1px solid var(--dp-linie); }
.dp-cautare-rezultate > li > a { font-weight: 600; }
.dp-cautare-meta, .dp-cautare-anexa { margin: 0.25rem 0 0;
  font-size: 0.9rem; color: var(--dp-mut); }
.dp-cautare-anexa { overflow-wrap: anywhere; }
.dp-cautare-rubrici { margin-top: var(--dp-sp-5); }
.dp-cautare-rubrici-lista { margin: 0; padding-left: 1.2rem; }
.dp-cautare-rubrici-lista > li { margin: 0.2rem 0; }

/* --- Die Empfangsseite nach einer Sesizare -------------------------------
   Kein Gegenstueck im Original: die laufende Seite hat diesen Weg nicht, sie
   bestaetigt im Formular selbst. Die Masse folgen dem Hinweiskasten des
   gesperrten Formulars (`.dp-nota`), damit der Buerger dieselbe Sprache
   sieht wie zwei Klicks vorher. */
.dp-primire-kasten {
  border-left: var(--dp-linie-3) solid var(--dp-accent);
  background: var(--dp-accent-slab);
  padding: var(--dp-sp-4) var(--dp-sp-6);
  border-radius: 0 var(--dp-raza) var(--dp-raza) 0;
  margin: var(--dp-sp-4) 0 var(--dp-sp-5);
}
.dp-primire-satz { margin: 0; font-weight: 600; color: var(--dp-titlu); }
.dp-primire-kasten p + p { margin: var(--dp-sp-2) 0 0; }
.dp-primire-weiter { display: flex; gap: var(--dp-sp-4);
  align-items: center; flex-wrap: wrap; }

/* --- Die Pruefung am Formularfeld ----------------------------------------
   OHNE JAVASCRIPT. `:user-invalid` greift erst, nachdem der Buerger das Feld
   angefasst und wieder verlassen hat — `:invalid` allein wuerde beim Laden
   jedes leere Pflichtfeld rot anstreichen, bevor jemand etwas falsch gemacht
   hat. Das ist der ganze Unterschied zwischen einem Hinweis und einem Vorwurf.

   Browser ohne `:user-invalid` sehen den Hinweis nie und behalten die
   eingebaute Pruefung des Browsers — die Blase beim Absenden. Das ist der
   Rueckfall, und er ist stumm, aber nicht tot: abgeschickt wird trotzdem
   nichts Unvollstaendiges. */
.dp-camp-fehler {
  display: none;
  margin: var(--dp-sp-2) 0 0;
  font-size: .9rem;
  color: #a4262c;                     /* eigener Rotton, nur hier */
}
.dp-camp:user-invalid, .dp-bifa input:user-invalid {
  border-color: #a4262c;
  outline-color: #a4262c;
}
.dp-camp:user-invalid ~ .dp-camp-fehler,
.dp-bifa:has(input:user-invalid) ~ .dp-camp-fehler {
  display: block;
}
/* Das Skript darf denselben Hinweis auch OHNE `:user-invalid` zeigen —
   beim Klick auf einen Knopf, der noch nicht abschicken kann. */
.dp-camp-grup[data-fehler] .dp-camp-fehler { display: block; }
.dp-camp-grup[data-fehler] .dp-camp,
.dp-camp-grup[data-fehler] .dp-bifa input { border-color: #a4262c; outline-color: #a4262c; }
/* Das Kaestchen selbst zeichnet der Browser; ein Rahmen allein traegt dort
   nicht. Der Umriss macht es sichtbar, ohne die Zeichnung zu ersetzen. */
.dp-camp-grup[data-fehler] .dp-bifa input,
.dp-bifa input:user-invalid { outline: 2px solid #a4262c; outline-offset: 2px; }

/* Der Absendeknopf, solange Pflichtfelder fehlen. `aria-disabled` statt
   `disabled`: der Knopf bleibt erreichbar und wird angesagt, und ein Klick
   fuehrt zu den Fehlern statt ins Nichts. Ein wirklich abgeschalteter Knopf
   sagt einem Screenreader nur "nicht verfuegbar" und nie, warum. */
.dp-buton[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}