/* ============================================================
   Schriften, selbst gehostet

   Jost, Spectral und IBM Plex Mono liegen unter schriften/ und
   werden von dieser Domain geladen — nicht von Google. Damit
   fließen beim Seitenaufruf keine Daten an Dritte, und es braucht
   dafür auch keine Einwilligung.

   Alle drei stehen unter der SIL Open Font License 1.1: freie
   Nutzung, auch gewerblich, Weitergabe nur unter derselben Lizenz
   und nicht als Verkauf der Schriftdatei selbst.

   Zeichensatz latin + latin-ext — letzterer wird für ç, ü, í und
   die übrigen katalanischen und spanischen Zeichen gebraucht.
   font-display: swap sorgt dafür, dass der Text sofort lesbar ist
   und die Schrift nachrückt, statt zu blockieren.
   ============================================================ */

@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../schriften/jost-v20-latin_latin-ext-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../schriften/jost-v20-latin_latin-ext-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../schriften/jost-v20-latin_latin-ext-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('../schriften/spectral-v15-latin_latin-ext-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../schriften/spectral-v15-latin_latin-ext-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../schriften/spectral-v15-latin_latin-ext-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../schriften/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../schriften/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   alteamar.es — Stilbasis
   Palette und Schrift aus dem Markensatz abgeleitet.
   ============================================================ */

:root{
  --tiefsee:#0E3B5C;
  --azulejo:#1B5FA8;
  --ocker:#E8A33D;
  --tinte:#08263B;
  --kalk:#F3F6F8;
  --kalk-tief:#E3EBF1;
  --grau:#5A7288;   /* 4,6:1 auf Kalk — WCAG AA auch bei kleiner Schrift */
  --linie:#CBD9E4;
  --weiss:#FFFFFF;

  --breit:1140px;
  --eng:760px;

  --display:"Jost",ui-sans-serif,system-ui,sans-serif;
  --lese:"Spectral",Georgia,"Times New Roman",serif;
  --daten:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--kalk);
  color:var(--tinte);
  font-family:var(--lese);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}

a{color:var(--azulejo);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--tiefsee)}
:focus-visible{outline:2px solid var(--ocker);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.06}
h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.14}
h3{font-size:1.15rem;font-weight:500;line-height:1.3}
p{margin:0 0 1.05em}

code{font-family:var(--daten);font-size:.85em;background:var(--kalk-tief);padding:1px 6px;border-radius:2px}

.hoch{font-weight:500;color:var(--azulejo)}
.ocker{color:var(--ocker)}

/* --- Bausteine ------------------------------------------------ */

.bahn{max-width:var(--breit);margin:0 auto;padding:0 24px}
.bahn-eng{max-width:var(--eng);margin:0 auto;padding:0 24px}

.block{padding:clamp(52px,7vw,92px) 0}
.block-hell{background:var(--weiss)}

.marke{
  font-family:var(--daten);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grau);
  display:block;
  margin-bottom:14px;
}
.marke::before{
  content:"";display:inline-block;width:18px;height:1px;
  background:var(--ocker);vertical-align:.34em;margin-right:10px;
}

.vorspann{
  font-size:clamp(1.05rem,1.7vw,1.25rem);
  color:#3D5B72;
  max-width:62ch;
}

/* --- Kachelband: Signaturelement ------------------------------ */

.kachelband{
  height:26px;
  background-color:var(--azulejo);
  background-image:
    radial-gradient(circle at 0 100%, transparent 11px, rgba(255,255,255,.55) 11px, rgba(255,255,255,.55) 12.1px, transparent 12.2px),
    radial-gradient(circle at 24px 100%, transparent 11px, rgba(255,255,255,.55) 11px, rgba(255,255,255,.55) 12.1px, transparent 12.2px),
    radial-gradient(circle at 12px 0, transparent 11px, rgba(255,255,255,.28) 11px, rgba(255,255,255,.28) 12.1px, transparent 12.2px);
  background-size:24px 26px;
}
.kachelband-schmal{height:13px;background-size:24px 13px}

/* --- Kopf ------------------------------------------------------ */

.kopf{
  position:sticky;top:0;z-index:40;
  background:rgba(243,246,248,.92);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{
  max-width:var(--breit);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:26px;justify-content:space-between;
}
.kopf-marke{display:flex;align-items:center;text-decoration:none}
.kopf-marke svg{width:auto;display:block}   /* Höhe weiter unten */

.navi{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.navi a{
  font-family:var(--display);font-size:1rem;font-weight:400;
  color:var(--tiefsee);text-decoration:none;padding:4px 0;
  border-bottom:1.5px solid transparent;
}
.navi a:hover{border-bottom-color:var(--ocker)}
.navi a[aria-current="page"]{border-bottom-color:var(--azulejo);font-weight:500}

@media (max-width:720px){
  .navi{gap:16px}
  .navi a{font-size:.9rem}
}

/* --- Auftakt (Startseite) -------------------------------------- */

.auftakt{background:var(--weiss);border-bottom:1px solid var(--linie)}
.auftakt-innen{
  max-width:var(--breit);margin:0 auto;padding:clamp(44px,6vw,76px) 24px clamp(30px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
@media (max-width:900px){.auftakt-innen{grid-template-columns:1fr;padding-top:38px}}

.auftakt h1 em{font-style:normal;color:var(--azulejo);font-weight:400}
.auftakt .vorspann{margin-top:20px}

.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.knopf{
  font-family:var(--display);font-size:1rem;font-weight:500;letter-spacing:.02em;
  padding:11px 21px;border-radius:2px;text-decoration:none;display:inline-block;
  background:var(--tiefsee);color:#fff;border:1.5px solid var(--tiefsee);
  transition:background .18s ease,color .18s ease;
}
.knopf:hover{background:var(--azulejo);border-color:var(--azulejo);color:#fff}
.knopf-leer{background:transparent;color:var(--tiefsee);border-color:var(--linie)}
.knopf-leer:hover{background:transparent;color:var(--azulejo);border-color:var(--azulejo)}

/* --- Zahlenband ------------------------------------------------ */

.zahlen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border-top:1px solid var(--linie);
}
.zahl{padding:22px 24px 22px 0;border-right:1px solid var(--linie)}
.zahl:last-child{border-right:0}
.zahl b{
  display:block;font-family:var(--display);font-weight:300;
  font-size:1.85rem;line-height:1.1;color:var(--tiefsee);
}
.zahl span{
  display:block;font-family:var(--daten);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau);margin-top:7px;
}
@media (max-width:620px){.zahl{border-right:0;border-bottom:1px solid var(--linie);padding-right:0}}

/* --- Höhenschnitt der Zonen ------------------------------------ */

.schnitt{margin:0 0 8px;overflow:hidden;border-radius:2px}
.schnitt svg{display:block;width:100%;height:auto}

.zonen-legende{
  display:flex;gap:6px;flex-wrap:wrap;margin:0 0 40px;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);
}
.zonen-legende i{font-style:normal;display:flex;align-items:center;gap:7px;margin-right:18px}
.zonen-legende b{width:10px;height:10px;display:inline-block;border-radius:50%}

.zonen-gruppe{margin-bottom:38px}
.zonen-gruppe > h3{
  font-family:var(--daten);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tiefsee);
  padding-bottom:9px;border-bottom:1px solid var(--linie);margin-bottom:20px;
  display:flex;align-items:center;gap:9px;
}
.zonen-gruppe > h3 b{width:9px;height:9px;border-radius:50%;display:inline-block}

.zonen{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px}
.zone h4{font-size:1rem;font-weight:500;color:var(--tiefsee);margin-bottom:5px}
.zone p{font-size:.9rem;color:#3D5B72;margin:0}
.zone .lage{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);display:block;margin-bottom:3px;
}

/* --- Ämterkacheln ---------------------------------------------- */

.aemter{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:2px;background:var(--linie);border:1px solid var(--linie)}
.amt{
  background:var(--weiss);padding:26px 24px 24px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:9px;position:relative;
  transition:background .18s ease;
}
.amt:hover{background:#FBFCFD}
.amt::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--azulejo);
  transform:scaleY(0);transform-origin:top;transition:transform .22s ease;
}
.amt:hover::after{transform:scaleY(1)}
.amt .es{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ocker);
}
.amt h3{color:var(--tiefsee)}
.amt p{font-size:.9rem;color:#3D5B72;margin:0}
.amt .weiter{
  font-family:var(--display);font-size:.9rem;font-weight:500;color:var(--azulejo);margin-top:auto;padding-top:10px;
}

/* --- Bildstrecke ----------------------------------------------- */

/* Historisches Dokument im Fließtext — der Siegelabdruck von 1876.
   Weißer Grund auch im Dunkelmodus: eine Archivalie wird gezeigt,
   nicht eingefärbt. */
/* Montage im Fließtext — volle Spaltenbreite, Nachweis an der
   Bildunterschrift. */
.zeitbild{margin:26px 0 10px}
.zeitbild img{
  width:100%;height:auto;display:block;border:1px solid var(--linie);
  background:var(--weiss);
}
.zeitbild figcaption{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grau);margin-top:9px;line-height:1.5;
}
.zeitbild .nachweis{
  display:block;margin-top:4px;text-transform:none;letter-spacing:0;
  font-size:.62rem;opacity:.85;
}
.zeitbild .nachweis a{color:var(--grau);text-decoration:underline}

.dokumente{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
  margin:26px 0 10px;
}
.dokumente .dokument{margin:0;max-width:none}
.dokument{margin:26px auto 10px;max-width:258px;text-align:center}
.dokument img{
  width:100%;height:auto;display:block;background:#FFFFFF;
  border:1px solid var(--linie);padding:10px;box-sizing:border-box;
}
.dokument figcaption{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grau);margin-top:10px;line-height:1.5;
}
.dokument figcaption a{color:var(--grau);text-decoration:underline}
.dokument .nachweis{
  display:block;margin-top:5px;text-transform:none;letter-spacing:0;
  font-size:.62rem;opacity:.85;
}
@media (max-width:460px){
  .dokumente{gap:14px}
  .dokument figcaption{font-size:.62rem;letter-spacing:.06em}
}

.bild{margin:0}


.bild figcaption{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grau);margin-top:9px;
}
.bild .nachweis{
  display:block;margin-top:4px;text-transform:none;letter-spacing:0;
  font-size:.62rem;opacity:.85;line-height:1.5;
}
.bild .nachweis a{color:var(--grau);text-decoration:underline}

/* --- Unterseiten ----------------------------------------------- */

.seitenkopf{background:var(--tiefsee);color:#fff;padding:clamp(40px,5.5vw,68px) 0 clamp(34px,4.5vw,52px)}
.seitenkopf .marke{color:#9BB6C9}
.seitenkopf .marke::before{background:var(--ocker)}
.seitenkopf h1{color:#fff;max-width:16ch}
.seitenkopf .es{
  font-family:var(--daten);font-size:.8rem;letter-spacing:.06em;color:var(--ocker);margin-top:14px;display:block;
}
.seitenkopf p{color:#C8DBE8;max-width:58ch;margin-top:18px;margin-bottom:0}

.brotkrumen{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 0;color:var(--grau);
}
.brotkrumen a{color:var(--grau);text-decoration:none}
.brotkrumen a:hover{color:var(--azulejo)}

.gerippe{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4vw,54px);align-items:start;
}
@media (max-width:880px){.gerippe{grid-template-columns:1fr}}

.karte{background:var(--weiss);border:1px solid var(--linie);padding:26px 26px 24px}
.karte + .karte{margin-top:20px}
.karte > h2{font-size:1.4rem;font-weight:500;color:var(--tiefsee);margin-bottom:16px}

.datenliste{margin:0;font-size:1rem}
.datenliste div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid #EDF2F6}
.datenliste div:last-child{border-bottom:0}
.datenliste dt{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau);padding-top:4px;
}
.datenliste dd{margin:0}
.datenliste a{text-decoration:none;border-bottom:1px solid var(--linie)}
.datenliste a:hover{border-bottom-color:var(--azulejo)}
@media (max-width:520px){.datenliste div{grid-template-columns:1fr;gap:2px}}

/* Feste Spaltenbreiten. Vorher durfte die rechte Spalte nicht
   umbrechen — bei einem langen Wert wie „solo con cita" quetschte das
   die linke Spalte auf ein Wort je Zeile zusammen. Jetzt bekommt jede
   Spalte ihren Anteil, und beide dürfen umbrechen. */
.zeiten{width:100%;border-collapse:collapse;font-size:1rem;table-layout:fixed}
.zeiten th{
  text-align:left;font-family:var(--daten);font-size:.68rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grau);
  padding:0 0 9px;border-bottom:1px solid var(--linie);
}
.zeiten td{padding:10px 0;border-bottom:1px solid #EDF2F6;vertical-align:top}
.zeiten td:last-child{text-align:right;font-family:var(--daten);font-size:.9rem;color:var(--tiefsee)}
@media (min-width:621px){
  .zeiten td:first-child{width:52%}
  .zeiten td:last-child{padding-left:18px}
}
.zeiten tr:last-child td{border-bottom:0}

.punkte{list-style:none;margin:0;padding:0}
.punkte li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid #EDF2F6;font-size:1rem}
.punkte li:last-child{border-bottom:0}
.punkte li::before{
  content:"";position:absolute;left:0;top:18px;width:9px;height:1.5px;background:var(--ocker);
}
.punkte b{font-weight:600;color:var(--tiefsee)}

.personen{list-style:none;margin:0;padding:0}
.personen li{padding:13px 0;border-bottom:1px solid #EDF2F6}
.personen li:last-child{border-bottom:0}
.personen strong{display:block;font-family:var(--display);font-weight:500;font-size:1rem;color:var(--tiefsee)}
.personen span{font-size:.9rem;color:#3D5B72}
.personen .offen{color:var(--grau);font-style:italic}

.hinweis{
  background:#FDF6E9;border-left:3px solid var(--ocker);padding:18px 20px;font-size:.9rem;
}
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{color:#9B6412}

.mapsrahmen{border:1px solid var(--linie);background:var(--kalk-tief);line-height:0}
.mapsrahmen iframe{width:100%;height:300px;border:0;display:block}
.mapsfuss{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 14px;background:var(--weiss);border-top:1px solid var(--linie);line-height:1.5;
}
.mapsfuss a{text-decoration:none}

.stand{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.05em;color:var(--grau);
  margin-top:26px;padding-top:14px;border-top:1px solid var(--linie);line-height:1.7;
}

/* --- Fuß -------------------------------------------------------- */

.fuss{background:var(--tiefsee);color:#C8DBE8;padding:52px 0 30px;font-size:.9rem}
.fuss-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px}
.fuss h4{
  font-family:var(--daten);font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#9BB6C9;margin-bottom:13px;
}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{padding:4px 0}
.fuss a{color:#EAF3F9;text-decoration:none}
.fuss a:hover{color:var(--ocker)}
.fuss svg{height:78px;width:auto;display:block;margin-bottom:20px;max-width:100%}
@media (max-width:560px){
  .fuss svg{height:64px}
}

/* Die Marke auf dunklem Grund: dieselbe Zeichnung, nur andere Töne.
   Die Farbwerte sind Variablen und vererben sich in das eingebundene
   Symbol hinein — deshalb genügt es, sie hier lokal umzusetzen. */
/* Helle Fassung der Marke für dunkle Flächen. Es braucht kein zweites
   Symbol: Benutzerdefinierte Eigenschaften wirken in den Schattenbaum
   von <use> hinein, deshalb genügt es, sie hier umzudefinieren. */
.marke-invers{
  --marke-tief:#EAF3F9;
  --marke-blau:#7FB6E8;
  --marke-ocker:#F0B45C;
  --marke-ocker-schrift:#F0B45C;
  --marke-hell:#0E3B5C;
}
.fuss-schluss{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.07em;color:#9BB6C9;
}

/* ============================================================
   Ergänzungen: Rechtsseiten, Cookie-Einwilligung, Kartensperre
   ============================================================ */

.luecke{
  font-family:var(--daten);font-size:.86em;color:#9B6412;
  background:#FDF3E2;border-bottom:1.5px dotted var(--ocker);
  padding:1px 6px;border-radius:2px;
}

.klein{font-size:.9rem;color:var(--grau);line-height:1.6}

.rechtstext{max-width:74ch}
.rechtstext h2{
  font-size:1.4rem;font-weight:500;color:var(--tiefsee);
  margin:44px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--linie);
}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext .datenliste{margin:14px 0 18px}
.rechtstext .punkte{margin:6px 0 18px}
.rechtstext .hinweis{margin:18px 0}

.rechtstabelle{width:100%;border-collapse:collapse;font-size:.9rem;margin:14px 0 20px}
.rechtstabelle th{
  text-align:left;font-family:var(--daten);font-size:.68rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grau);
  padding:0 10px 9px 0;border-bottom:1px solid var(--linie);vertical-align:bottom;
}
.rechtstabelle td{padding:10px 10px 10px 0;border-bottom:1px solid #EDF2F6;vertical-align:top}
.rechtstabelle td:last-child,.rechtstabelle th:last-child{padding-right:0}
.rechtstabelle td.gruppe{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tiefsee);background:var(--kalk);padding:9px 10px 9px 0;
}
@media (max-width:620px){
  .rechtstabelle,.rechtstabelle tbody,.rechtstabelle tr,.rechtstabelle td{display:block;width:100%}
  .rechtstabelle thead{display:none}
  .rechtstabelle tr{border-bottom:1px solid var(--linie);padding:10px 0}
  .rechtstabelle td{border:0;padding:3px 0}
}

.hinweis-warn{background:#FBEDED;border-left-color:#B4423C}
.hinweis-warn strong{color:#8E2F2A}

.inhaltsverzeichnis{
  background:var(--weiss);border:1px solid var(--linie);padding:20px 24px;margin-bottom:36px;
}
.inhaltsverzeichnis ol{margin:0;padding-left:1.2em;font-size:.9rem}
.inhaltsverzeichnis li{padding:3px 0}
.inhaltsverzeichnis a{text-decoration:none}
.inhaltsverzeichnis a:hover{text-decoration:underline}

/* --- Kartensperre --------------------------------------------- */

.kartensperre{
  border:1px solid var(--linie);background:var(--kalk-tief);
  min-height:300px;display:flex;align-items:center;justify-content:center;
  padding:26px 22px;text-align:center;
}
.kartensperre p{font-size:.9rem;color:#3D5B72;max-width:38ch;margin:0 auto 8px}
.kartensperre .klein{margin-bottom:16px}
.kartensperre .knopfreihe{justify-content:center}
.kartensperre .knopf{font-size:.9rem;padding:9px 16px}

/* --- Amtsfoto -------------------------------------------------- */

.amtfoto{margin:0 0 20px}
.amtfoto .rahmen{
  aspect-ratio:3/2;border:1px solid var(--linie);background:var(--kalk-tief);overflow:hidden;
}
.amtfoto img{width:100%;height:100%;object-fit:cover;display:block}
.amtfoto figcaption{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau);margin-top:9px;
}
.amtfoto figcaption a{text-decoration:none;color:var(--azulejo)}

/* Amtsfotos können auch fremde Bilder sein. Dann tritt im Flex-Fuß
   eine dritte Zeile hinzu: der Lizenznachweis. Er bekommt die ganze
   Breite, damit er nicht neben die Straßenansicht rutscht. */
.amtfoto .nachweis{
  flex-basis:100%;text-transform:none;letter-spacing:0;
  font-size:.62rem;opacity:.85;line-height:1.5;
}
.amtfoto .nachweis a{color:var(--grau);text-decoration:underline}

/* --- Ablauf in Schritten --------------------------------------- */

.schritte{list-style:none;counter-reset:s;margin:0;padding:0}
.schritte li{
  counter-increment:s;position:relative;padding:0 0 20px 42px;
  border-left:1px solid var(--linie);margin-left:13px;
}
.schritte li:last-child{border-left-color:transparent;padding-bottom:0}
.schritte li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:-13px;top:-2px;width:26px;height:26px;border-radius:50%;
  background:var(--tiefsee);color:#fff;font-family:var(--daten);font-size:.68rem;
  display:flex;align-items:center;justify-content:center;
}
.schritte strong{display:block;font-family:var(--display);font-weight:500;color:var(--tiefsee)}
.schritte span{font-size:.9rem;color:#3D5B72}

/* --- Fragen und Antworten -------------------------------------- */

.faq details{border-bottom:1px solid #EDF2F6;padding:12px 0}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;font-family:var(--display);font-weight:500;font-size:1rem;
  color:var(--tiefsee);list-style:none;display:flex;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ocker);font-size:1.15rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:.9rem;color:#3D5B72;margin:10px 0 0}

/* --- Cookie-Banner --------------------------------------------- */

.cookiebanner{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--weiss);border-top:3px solid var(--azulejo);
  box-shadow:0 -8px 28px rgba(8,38,59,.14);
  padding:22px 0 20px;
}
.cookiebanner[hidden]{display:none}
.cookiebanner h2{font-size:1.15rem;font-weight:500;color:var(--tiefsee);margin-bottom:8px}
.cookiebanner p{font-size:.9rem;color:#3D5B72;max-width:70ch;margin-bottom:14px}
.cookiebanner .knopfreihe{margin-top:0}
.cookiebanner .knopf{font-size:.9rem;padding:10px 18px}
.cookieoptionen{margin:4px 0 16px;display:grid;gap:10px}
.cookieoptionen[hidden]{display:none}
.cookieoptionen label{
  display:flex;gap:11px;align-items:flex-start;font-size:.9rem;
  background:var(--kalk);border:1px solid var(--linie);padding:12px 14px;
}
.cookieoptionen input{margin-top:4px;accent-color:var(--azulejo)}
.cookieoptionen b{display:block;color:var(--tiefsee);font-weight:600}
.cookieoptionen span{color:#3D5B72;font-size:.9rem}
.cookiebanner .feinlink{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  margin-top:14px;display:block;color:var(--grau);
}
.cookiebanner .feinlink a{color:var(--grau)}

.fussrecht{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.fussrecht button{
  background:none;border:0;padding:0;cursor:pointer;color:#EAF3F9;
  font:inherit;text-decoration:underline;text-underline-offset:.18em;
}
.fussrecht button:hover{color:var(--ocker)}

/* --- E-Mail-Adressen, verschleiert ------------------------------ */
.epost .at{font-size:.9em;color:var(--grau)}
.epost-fertig{word-break:break-word}

/* --- Sprachwahl -------------------------------------------------- */
.kopf-rechts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sprachwahl{position:relative}
.sprachwahl summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:.9rem;color:var(--tiefsee);
  border:1px solid var(--linie);background:var(--weiss);padding:6px 12px;border-radius:2px;
}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary:hover{border-color:var(--azulejo)}
.sprachwahl .flagge{font-size:1.15rem;line-height:1}
.sprachwahl .pfeil{color:var(--grau);font-size:.68rem}
.sprachwahl[open] .pfeil{transform:rotate(180deg)}
.sprachwahl ul{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;margin:0;padding:6px;
  list-style:none;background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 10px 28px rgba(8,38,59,.14);min-width:190px;
}
.sprachwahl li a{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  text-decoration:none;color:var(--tiefsee);font-family:var(--display);font-size:.9rem;
}
.sprachwahl li a:hover{background:var(--kalk)}
.sprachwahl li a[aria-current="true"]{font-weight:500;background:var(--kalk-tief)}
@media (max-width:720px){
  .sprachwahl ul{max-height:60vh;overflow-y:auto;min-width:170px}
  .sprachwahl li a{padding:11px 14px;min-height:44px;box-sizing:border-box}
}

/* --- Hinweis auf fehlende Übersetzung ---------------------------- */
.uebersetzung-offen{
  background:#FDF6E9;border-bottom:1px solid var(--ocker);
  font-family:var(--daten);font-size:.68rem;letter-spacing:.04em;color:#9B6412;
  padding:9px 0;
}

/* --- Verweis auf die amtliche Quelle ----------------------------- */
.pruefen{
  margin:14px 0 0;padding:11px 13px;background:var(--kalk);
  border-left:2px solid var(--azulejo);font-size:.9rem;line-height:1.55;
}
.pruefen span{display:block;color:var(--grau);font-size:.8rem;margin-bottom:3px}
.pruefen a{text-decoration:none;border-bottom:1px solid var(--linie);font-weight:500}
.pruefen a:hover{border-bottom-color:var(--azulejo)}
.zahl .quelle{
  display:block;font-family:var(--daten);font-size:.68rem;letter-spacing:.08em;
  color:var(--grau);margin-top:4px;text-transform:none;
}
.zahl .quelle a{color:var(--grau);text-decoration:none;border-bottom:1px dotted var(--linie)}

/* ════════════════════════════════════════════════════════════
   Handy: Kopfzeile, Menü und Feinschliff
   ════════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%}
/* ── Silbentrennung ──────────────────────────────────────────────────
   Automatisch getrennt wird nur im deutschen Fließtext: Dort gibt es
   Wörter wie „Meldebescheinigung“, die ohne Trennung hässliche Lücken
   reißen. Spanisch, Englisch und Französisch kommen ohne aus.

   Selbst im Deutschen wird erst ab zwölf Zeichen getrennt, mit
   mindestens vier Zeichen vor und nach dem Strich. Damit bleiben
   Namen wie Alicante, Benidorm oder Extranjería unversehrt — die
   Browser trennten sie vorher schon dann, wenn sie bequem in die
   Zeile gepasst hätten.
   ------------------------------------------------------------------ */
body{overflow-wrap:break-word;hyphens:none}
html[lang="de"] p,
html[lang="de"] li,
html[lang="de"] dd{
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:12 4 4;
  -webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;
  -webkit-hyphenate-limit-chars:12;
}
h1,h2,h3,h4{hyphens:none;overflow-wrap:break-word}

/* Menü ist auf dem Desktop unsichtbar, die breite Navigation auf dem Handy */
.menue{display:none}
/* Nur der Menüknopf selbst, nicht die Zusammenklapper im Menü.
   Ohne die Einschränkung auf das unmittelbare Kind erbt jedes
   <details> innerhalb des Menüs die Knopfgestaltung — Rahmen, runde
   Ecken, inline-Verhalten — und die Gruppen stehen als versetzte
   Kästchen untereinander statt als Menüzeilen. */
.menue > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:1rem;font-weight:500;color:var(--tiefsee);
  border:1px solid var(--linie);background:var(--weiss);
  padding:9px 15px;border-radius:2px;min-height:44px;box-sizing:border-box;
}
.menue summary::-webkit-details-marker{display:none}

.menue .balken{
  width:16px;height:10px;position:relative;display:inline-block;
  border-top:1.5px solid var(--tiefsee);border-bottom:1.5px solid var(--tiefsee);
}
.menue .balken::after{
  content:"";position:absolute;left:0;top:4px;width:16px;
  border-top:1.5px solid var(--tiefsee);
}
.menue[open] > summary{border-color:var(--azulejo)}

@media (max-width:980px){
  .navi-breit{display:none}
  .menue{display:block;flex:1 1 auto}
  .kopf-innen{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 18px;flex-wrap:nowrap;
  }
  .kopf-rechts{
    width:auto;flex-direction:row;align-items:center;gap:10px;
    flex:0 1 auto;justify-content:flex-end;
  }
  /* Die Fläche spannt sich über die volle Bildschirmbreite. Bezugsrahmen
     ist die Kopfzeile, weil sie klebend positioniert ist. Alles darin
     wird auf diese Breite begrenzt und darf umbrechen — sonst schiebt
     ein langer Eintrag wie „Comunidad de propietarios“ die Fläche über
     den Rand hinaus. */
  /* ── Mobilmenü ──────────────────────────────────────────────────
     Eigene, flache Liste. Die Fläche liegt unter der Kopfzeile, geht
     über die volle Breite und scrollt bei Bedarf. Lange Einträge
     brechen um, statt seitlich hinauszulaufen.
     -------------------------------------------------------------- */
  .menue .navi-mobil{
    position:absolute;left:0;right:0;top:100%;z-index:55;
    width:100%;max-width:100vw;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:var(--weiss);border-top:1px solid var(--linie);
    border-bottom:3px solid var(--azulejo);
    box-shadow:0 14px 30px rgba(8,38,59,.14);
    max-height:76vh;overflow-y:auto;overflow-x:hidden;padding:4px 0 10px;
  }
  .menue .navi-mobil a{
    display:block;width:100%;box-sizing:border-box;
    padding:13px 20px;min-height:44px;
    border-bottom:1px solid #EDF2F6;
    font-family:var(--display);font-size:1rem;color:var(--tiefsee);
    text-decoration:none;white-space:normal;overflow-wrap:anywhere;
  }
  .menue .navi-mobil a[aria-current="page"]{
    background:var(--kalk);box-shadow:inset 3px 0 0 var(--azulejo);font-weight:500;
  }
  .menue .navi-mobil .gruppentitel{
    display:block;padding:18px 20px 6px;
    font-family:var(--daten);font-size:.68rem;letter-spacing:.15em;
    text-transform:uppercase;color:var(--grau);
  }
  .menue .navi-mobil .gruppentitel + a{border-top:1px solid #EDF2F6}

  .kopf{position:sticky}
  .sprachwahl summary{padding:9px 11px;min-height:44px;box-sizing:border-box}
  .sprachwahl .sprachname{display:none}
}

@media (max-width:560px){
  body{font-size:16px}
  .bahn,.bahn-eng{padding:0 18px}
  .block{padding:38px 0}
  .karte{padding:20px 18px 18px}
  .seitenkopf{padding:28px 0 24px}
  .knopf{width:100%;text-align:center}
  .knopfreihe{gap:9px}
  .kartensperre .knopf{width:auto}
  .schritte li{padding-left:34px}
  .faq summary{padding:6px 0;min-height:44px;align-items:center}
  .amtfoto figcaption{flex-direction:column;gap:4px}
  .fuss{padding:36px 0 24px}
  .fuss-gitter{gap:26px}
}

/* Der Einwilligungsdialog darf das Telefon nicht zunageln */
@media (max-width:720px){
  .cookiebanner{max-height:82vh;overflow-y:auto;padding:18px 0 16px}
  .cookiebanner .knopf{width:100%;text-align:center}
  .cookieoptionen label{padding:11px 12px}
}

/* Kein waagerechtes Wegrutschen durch lange Adressen oder Links */
.datenliste dd,.pruefen,.punkte li{overflow-wrap:anywhere}
.mapsrahmen iframe{max-width:100%}

/* ════════════════════════════════════════════════════════════
   Dunkelmodus

   Wichtig ist nicht nur, dass es dunkel aussieht: Ohne eigene
   Fassung schalten Handybrowser die Hintergründe eigenmächtig um
   und lassen fest gesetzte Schriftfarben stehen — dunkelblau auf
   Schwarz. Mit color-scheme und dieser Fassung übernehmen wir das
   selbst, und der Browser hält sich heraus.

   Grundton ist kein reines Schwarz, sondern das Tiefsee-Blau der
   Marke. Die Farben werden aufgehellt statt umgedreht, damit die
   Seite dieselbe bleibt.
   ════════════════════════════════════════════════════════════ */

:root{color-scheme:light dark}

@media (prefers-color-scheme:dark){
  :root{
    --tiefsee:#A8CBE4;      /* aus Textfarbe wird helle Schrift  */
    --azulejo:#7FB6E8;      /* Links, auf Dunkel angehoben       */
    --ocker:#F0B45C;
    --tinte:#E4EEF5;
    --kalk:#0B1F2D;         /* Seitengrund                       */
    --kalk-tief:#193648;
    --grau:#9BB6C9;
    --linie:#27455C;
    --weiss:#122A3B;        /* Kartengrund                       */
  }

  body{background:var(--kalk);color:var(--tinte)}

  /* Flächen, die vorher hell waren */
  .block-hell{background:#0E2434}
  .kopf{background:rgba(11,31,45,.93)}
  .karte,.inhaltsverzeichnis,.menue summary,.sprachwahl summary,
  .sprachwahl ul,.cookiebanner,.mapsfuss,.schnitt svg{background:var(--weiss)}
  .auftakt{background:#0E2434}
  .zahl b{color:var(--tiefsee)}

  /* Fest gesetzte Zwischentöne aufhellen */
  .zone p,.amt p,.faq p,.personen span,.aemter .amt p{color:#C8DBE8}
  .vorspann{color:#C8DBE8}
  .datenliste div,.zeiten td,.punkte li,.personen li,.faq details,
  .rechtstabelle td{border-bottom-color:#1E3A4E}
  .rechtstabelle td.gruppe{background:#0E2434;color:var(--tiefsee)}
  .pruefen{background:#0E2434}
  .amt:hover{background:#163346}
  .menue .navi-mobil a{border-bottom-color:#1E3A4E}
  .menue .navi-mobil a[aria-current="page"],.sprachwahl li a[aria-current="true"],
  .sprachwahl li a:hover,.menue .navi-mobil a:hover{background:#163346}

  /* Hinweiskästen: Ockerton bleibt, nur der Grund wird dunkel */
  .hinweis{background:#241C0C;border-left-color:var(--ocker)}
  .hinweis strong{color:#F0B45C}
  .hinweis-warn{background:#2A1614;border-left-color:#D96A63}
  .hinweis-warn strong{color:#E88C85}
  .uebersetzung-offen{background:#241C0C;color:#F0B45C;border-bottom-color:var(--ocker)}
  .luecke{background:#2A2110;color:#F0B45C;border-bottom-color:var(--ocker)}
  code{background:#16334A;color:#C8DBE8}

  /* Kopf- und Fußbereich waren schon dunkel — nur Kontrast nachziehen */
  .seitenkopf{background:#0E2434;border-bottom:1px solid var(--linie)}
  .seitenkopf h1{color:#EAF3F9}
  .seitenkopf p{color:#C8DBE8}
  .fuss{background:#081925;border-top:1px solid var(--linie)}

  .kartensperre{background:#0E2434;border-color:var(--linie)}
  .kartensperre p{color:#C8DBE8}
  .amtfoto .rahmen{background:#0E2434}
  .knopf{background:var(--azulejo);border-color:var(--azulejo);color:#08202E}
  .knopf:hover{background:#A3CCF0;border-color:#A3CCF0;color:#08202E}
  .knopf-leer{background:transparent;color:var(--tiefsee);border-color:var(--linie)}
  .knopf-leer:hover{color:var(--azulejo);border-color:var(--azulejo);background:transparent}
  .cookieoptionen label{background:#0E2434;border-color:var(--linie)}
  /* Ablaufschritte: Im Hellmodus stehen Titel in Tiefsee-Blau und die
     Beschreibung in Grau. Auf dunklem Grund sind beide unlesbar —
     1,27:1 und 2,07:1. Hier die aufgehellten Werte. */
  .schritte li::before{background:var(--azulejo);color:#08202E}
  .schritte strong{color:#EAF3F9}
  .schritte span{color:#9BB6C9}
  .schritte li{border-left-color:#27455C}

  /* Zeichnungen bleiben hell wie Fotos, nur entschärft */
  .auftaktbild,.schnitt{filter:brightness(.9)}
}

/* Zwischenüberschriften im Fließtext, etwa in der Quellenliste */
.rechtstext h3{
  font-family:var(--display);font-weight:500;color:var(--tiefsee);
  letter-spacing:.01em;
}
.rechtstext h3 + .punkte{margin-top:0}

/* ── Markenfarben: von der Wortmarke genutzt, im Dunkelmodus aufgehellt ── */
:root{
  --marke-tief:#0E3B5C;
  --marke-blau:#1B5FA8;
  /* Zwei Ockertöne, weil sie zwei Aufgaben haben:
     Flächen (Kuppelsockel, Turm) tragen den warmen Originalton — dort
     zählt die Wirkung, nicht die Lesbarkeit. Schrift (.es, Slogan)
     braucht Kontrast und steht deshalb im dunkleren Ton:
     4,58:1 auf hellem Grund statt 1,99:1. */
  --marke-ocker:#E8A33D;
  --marke-ocker-schrift:#9B6412;
  --marke-hell:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    --marke-tief:#CBE0EF;   /* war fast unsichtbar auf Dunkel */
    --marke-blau:#7FB6E8;
    --marke-ocker:#F0B45C;
    --marke-ocker-schrift:#F0B45C;   /* auf Dunkel genügt ein Ton */
    --marke-hell:#0B1F2D;   /* Kachelfugen der Kuppel, jetzt dunkel */
  }
}

/* ── Zeitschieber: Luftbild 1956 gegen heute ─────────────────────── */
.zeitschieber{
  /* figure hat im Browser 40 px Außenabstand links und rechts. Mit
     width:100% ergibt das 80 px mehr als Platz ist — die Seite ließ
     sich seitlich schieben. */
  margin:18px 0;
  position:relative;width:100%;aspect-ratio:4/3;max-height:520px;
  border:1px solid var(--linie);background:var(--kalk-tief);overflow:hidden;
}
.zeitschieber .zs-karte{position:absolute;inset:0}
.zeitschieber .leaflet-container{background:var(--kalk-tief);font-family:var(--lese)}
.zs-alt{will-change:clip-path}

.zs-griff{
  position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:500;
  cursor:ew-resize;display:flex;align-items:center;justify-content:center;
  touch-action:none;             /* verhindert Scrollen beim Ziehen */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;    /* kein Kontextmenü beim Halten */
}
@media (max-width:640px){
  /* Am Telefon ist der Griff die einzige Bedienung — breiter greifen. */
  .zs-griff{width:60px;margin-left:-30px}
  .zs-knopf{width:44px;height:44px}
}
.zs-griff:focus-visible{outline:2px solid var(--ocker);outline-offset:-2px}
.zs-linie{position:absolute;top:0;bottom:0;width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(8,38,59,.35)}
.zs-knopf{
  width:38px;height:38px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(8,38,59,.35);position:relative;
}
.zs-knopf::before,.zs-knopf::after{
  content:"";position:absolute;top:50%;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.zs-knopf::before{left:9px;border-right:6px solid var(--tiefsee)}
.zs-knopf::after{right:9px;border-left:6px solid var(--tiefsee)}

.zs-jahr{
  position:absolute;top:12px;z-index:490;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(8,38,59,.78);color:#fff;padding:5px 10px;border-radius:2px;
}
.zs-links{left:12px}
.zs-rechts{right:12px}

.zs-sperre{
  position:absolute;inset:0;z-index:600;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:26px 22px;background:var(--kalk-tief);
}
.zs-sperre p{font-size:.9rem;color:#3D5B72;max-width:40ch;margin:0 auto 8px}
.zs-sperre .klein{margin-bottom:16px}

.zs-fehler{
  position:absolute;inset:0;z-index:610;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:26px 22px;
  background:var(--weiss);
}
.zs-fehler[hidden]{display:none}
.zs-fehler p{font-size:.9rem;color:#3D5B72;max-width:40ch;margin:0 0 10px}

@media (prefers-color-scheme:dark){
  .zs-sperre p,.zs-fehler p{color:#C8DBE8}
  .zs-knopf{background:#12293B}
  .zs-knopf::before{border-right-color:#A8CBE4}
  .zs-knopf::after{border-left-color:#A8CBE4}
  .zs-linie{background:#A8CBE4}
  .zeitschieber .leaflet-control-attribution{background:rgba(11,31,45,.85);color:#C8DBE8}
  .zeitschieber .leaflet-control-attribution a{color:#7FB6E8}
}

@media (max-width:560px){
  .zeitschieber{aspect-ratio:1/1}
  .zs-jahr{font-size:.68rem;padding:4px 8px}
}

/* ── Untermenü in der Navigation ─────────────────────────────────── */
.untermenue{position:relative;display:inline-block}
.untermenue summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:1rem;color:var(--tiefsee);
  padding:4px 0;border-bottom:1.5px solid transparent;
}
.untermenue summary::-webkit-details-marker{display:none}
.untermenue summary:hover{border-bottom-color:var(--ocker)}
.untermenue[data-hier] summary{border-bottom-color:var(--azulejo);font-weight:500}
.untermenue .pfeil{color:var(--grau);font-size:.68rem}
.untermenue[open] .pfeil{transform:rotate(180deg)}
.untermenue ul{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;margin:0;padding:6px;
  list-style:none;background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 10px 28px rgba(8,38,59,.14);min-width:230px;
}
.untermenue li a{
  display:block;padding:8px 13px;text-decoration:none;color:var(--tiefsee);
  font-family:var(--display);font-size:.9rem;border-bottom:0;
}
.untermenue li a:hover{background:var(--kalk)}
.untermenue li a[aria-current="page"]{background:var(--kalk-tief);font-weight:500}

@media (max-width:980px){

}
@media (prefers-color-scheme:dark){
  .untermenue ul{background:var(--weiss)}
  .untermenue li a:hover,.untermenue li a[aria-current="page"]{background:#163346}
  .menue .navi-mobil{background:var(--weiss)}

}

/* Verschachtelte Aufzählung, etwa die Ausgabeformen einer Zeitung */
.punkte .punkte{margin:8px 0 0;padding:0}
.punkte .punkte li{font-size:.9rem;padding:5px 0 5px 20px;border-bottom:0}
.punkte .punkte li::before{top:14px;width:7px;background:var(--linie)}

/* ── Marke in der Kopfzeile ──────────────────────────────────────────
   Die Marke trägt jetzt den Slogan und braucht mehr Höhe. Damit sie
   auf dem Handy nicht mit Menü und Sprachwahl um die Zeile ringt,
   schrumpfen dort die beiden Schaltflächen auf ihre Zeichen.
   ------------------------------------------------------------------ */
.kopf-marke svg{height:60px}
.kopf-marke{padding:4px 0}

@media (max-width:980px){
  .kopf-marke svg{height:52px}
  .menue > summary .beschriftung{display:none}
  .menue > summary{padding:9px 13px}
}
@media (max-width:400px){
  .kopf-marke svg{height:46px}
  .kopf-innen{padding:8px 14px;gap:8px}
  .menue > summary{padding:9px 11px}
  .sprachwahl summary{padding:9px 9px}
}

/* ── Slogan in der Kopfzeile: vorerst nicht verwendet ────────────────
   Die Marke steht im Kopf 42 px hoch. Ein Slogan darunter käme bei
   markengerechten Proportionen auf knapp sechs Pixel — unlesbar. Die
   Regeln bleiben hier stehen, falls die Marke im Kopf einmal größer
   wird; das Markup dafür steht in bau.py, Funktion kopf().
   ------------------------------------------------------------------ */
.marke-block{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.marke-slogan{
  margin-top:-1.05em;margin-left:27%;
  font-family:var(--display);font-weight:300;font-size:.68rem;line-height:1;
  letter-spacing:.18em;color:var(--marke-ocker);white-space:nowrap;
  pointer-events:none;
}

/* ── Titelbild im Seitenkopf ─────────────────────────────────────────
   Beim Umbau der Kopfzeile waren diese Regeln versehentlich mit
   entfernt worden. Ohne sie steht das Foto in seiner vollen Höhe im
   Raster und sprengt das Layout.
   ------------------------------------------------------------------ */
.titelbild{margin:0}
.titelbild img{
  display:block;width:100%;height:auto;
  border:1px solid var(--linie);
  aspect-ratio:4/3;object-fit:cover;
}
@media (max-width:900px){
  .titelbild img{aspect-ratio:16/10}
}

/* ── Zwecksatz auf der Startseite ────────────────────────────────────
   Steht zwischen Slogan und Vorspann. Größer und kräftiger als der
   Fließtext, aber leichter als die Überschrift: Der Slogan trägt die
   Marke, diese Zeile den Nutzen.
   ------------------------------------------------------------------ */
.klartext{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  line-height:1.35;
  color:var(--azulejo);
  margin:16px 0 14px;
  max-width:30ch;
}
@media (max-width:900px){
  .klartext{font-size:1.15rem;max-width:none}
}
@media (prefers-color-scheme:dark){
  .klartext{color:#7FB6E8}
}

/* ── Bildergalerie ───────────────────────────────────────────────────
   Raster, das sich der Breite anpasst. Hoch- und Querformate mischen
   sich, ohne Löcher zu reißen: Querbilder füllen eine Zelle, Hochbilder
   zwei Zeilen. Die Bildmaße stehen im Markup, damit beim Laden nichts
   springt.
   ------------------------------------------------------------------ */
.galerie-gruppe{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);
  margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--linie);
}
/* Gleichmäßiges Raster mit festem Seitenverhältnis. Ein Mauerwerk-
   Raster mit gespannten Zeilen sah bei gemischten Formaten kaputt aus:
   Die Kachel bekam ihre Höhe aus dem Raster, der Bildknopf darin wuchs
   aber nicht mit. Jetzt bestimmt das Seitenverhältnis die Höhe, und
   das Bild füllt die Kachel formatfüllend. Die vollständige Aufnahme
   zeigt die Großansicht. */
.galerie{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.galerie .bild{margin:0;display:flex;flex-direction:column}
.galerie .bild-knopf{
  display:block;width:100%;padding:0;border:1px solid var(--linie);
  background:var(--kalk-tief);cursor:zoom-in;overflow:hidden;
  aspect-ratio:4/3;
}
.galerie .bild-knopf img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.galerie .bild-knopf:hover img{transform:scale(1.03)}

/* Montagen „damals und heute“: ganzes Bild zeigen, nicht zuschneiden.
   Die Vorlagen sind mal breit (vier Zeitebenen nebeneinander), mal hoch —
   ein fester 4:3-Ausschnitt würde Jahre abschneiden. */
.galerie-damals .bild-knopf{aspect-ratio:auto;background:var(--weiss)}
.galerie-damals .bild-knopf img{height:auto;object-fit:contain}
/* Spaltenfluss statt Raster: die Montagen sind mal breit, mal hoch, und
   ein Raster ließe dazwischen große Löcher. */
.galerie-damals{display:block;columns:2 240px;column-gap:18px}
.galerie-damals .bild{break-inside:avoid;margin:0 0 20px}
@media (max-width:520px){ .galerie-damals{columns:1} }
.galerie .bild-knopf:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}
.galerie figcaption{
  font-size:.9rem;color:var(--grau);margin-top:8px;line-height:1.45;
}
@media (max-width:560px){
  .galerie{grid-template-columns:1fr;gap:22px}
  .galerie .bild-knopf{aspect-ratio:3/2;cursor:default}
}
@media (prefers-color-scheme:dark){
  .galerie .bild-knopf{border-color:#27455C;background:#0E2434}
  .galerie figcaption{color:#9BB6C9}
}

/* Großansicht */
.lupe{
  position:fixed;inset:0;z-index:900;display:flex;align-items:center;
  justify-content:center;background:rgba(8,38,59,.94);padding:20px;
}
.lupe[hidden]{display:none}
.lupe figure{margin:0;max-width:min(1200px,92vw);text-align:center}
.lupe img{
  max-width:100%;max-height:78vh;display:block;margin:0 auto;
  background:#0B1F2D;
}
.lupe figcaption{
  color:#C8DBE8;font-size:.9rem;margin-top:14px;max-width:60ch;
  margin-left:auto;margin-right:auto;
}
.lupe-zu,.lupe-pfeil{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  line-height:1;padding:12px;min-width:44px;min-height:44px;
}
.lupe-zu{top:12px;right:14px;font-size:2.2rem}
.lupe-pfeil{top:50%;transform:translateY(-50%);font-size:3rem;opacity:.8}
.lupe-pfeil:hover{opacity:1}
.lupe-links{left:6px}
.lupe-rechts{right:6px}
.lupe-zu:focus-visible,.lupe-pfeil:focus-visible{outline:2px solid var(--ocker)}
@media (max-width:560px){
  .lupe-pfeil{font-size:2.2rem;bottom:14px;top:auto;transform:none}
  .lupe-links{left:10px}
  .lupe-rechts{right:10px}
  .lupe img{max-height:66vh}
}

/* Verweis auf die Straßenansicht, wo noch kein eigenes Foto vorliegt */
.strassenansicht{
  margin:0 0 26px;padding:13px 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;
}
.strassenansicht a{color:var(--azulejo);text-decoration:none}
.strassenansicht a:hover{color:var(--ocker)}
@media (prefers-color-scheme:dark){
  .strassenansicht{border-color:#27455C}
  .strassenansicht a{color:#7FB6E8}
}

/* Verweis auf die Karte, direkt unter der Anschrift */
/* Eigene Zeile, mit Abstand. Vorher klebte der Verweis direkt hinter
   der Telefonnummer, weil er ein inline-Element in derselben Zeile war. */
.datenliste .kartenlink{
  display:flex;width:fit-content;align-items:center;gap:6px;
  margin-top:8px;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azulejo);text-decoration:none;
}
.datenliste .kartenlink::before{content:"\2197";font-size:.9rem;line-height:1}
.datenliste .kartenlink:hover{color:var(--ocker)}
.datenliste .kartenlink::before{margin-right:1px}
@media (prefers-color-scheme:dark){
  .datenliste .kartenlink{color:#7FB6E8}
  .datenliste .kartenlink:hover{color:#F0B45C}
}

/* ── Suche ───────────────────────────────────────────────────────────
   Eigene Suche ohne fremden Dienst: Das Verzeichnis entsteht beim Bau,
   liegt auf derselben Domain und wird erst beim ersten Öffnen geladen.
   Der Suchbegriff verlässt das Gerät nicht.
   ------------------------------------------------------------------ */
.suchknopf{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:9px 13px;
  border:1px solid var(--linie);border-radius:2px;background:var(--weiss);
  color:var(--tiefsee);font-size:1.15rem;cursor:pointer;line-height:1;
}
.suchknopf:hover{border-color:var(--azulejo);color:var(--azulejo)}
.suchknopf:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}

.suche{position:fixed;inset:0;z-index:800;background:rgba(8,38,59,.55);
  backdrop-filter:blur(3px);padding:0 16px}
.suche[hidden]{display:none}
.suche-innen{
  max-width:660px;margin:8vh auto 0;background:var(--weiss);
  border:1px solid var(--linie);box-shadow:0 24px 60px rgba(8,38,59,.28);
  max-height:80vh;display:flex;flex-direction:column;
}
.suche-zeile{display:flex;align-items:center;border-bottom:1px solid var(--linie)}
.suche-feld{
  flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font-family:var(--display);font-size:1.15rem;color:var(--tinte);
  padding:18px 20px;
}
.suche-zu{
  border:0;background:none;cursor:pointer;color:var(--grau);
  font-size:1.7rem;line-height:1;min-width:44px;min-height:44px;
}
.suche-zu:hover{color:var(--tiefsee)}
.suche-hinweis{
  margin:0;padding:16px 20px;font-size:.9rem;color:var(--grau);
}
.suche-treffer{list-style:none;margin:0;padding:0;overflow-y:auto}
.suche-treffer li a{
  display:block;padding:13px 20px;text-decoration:none;
  border-bottom:1px solid #EDF2F6;
}
.suche-treffer li:last-child a{border-bottom:0}
.suche-treffer li a:hover,.suche-treffer li a:focus-visible{background:var(--kalk)}
.suche-treffer strong{
  display:block;font-family:var(--display);font-weight:500;
  color:var(--tiefsee);font-size:1rem;
}
.suche-treffer span{
  display:block;font-size:.9rem;color:var(--grau);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:560px){
  .suche-innen{margin-top:0;max-height:100vh;height:100%;border:0}
  .suche{padding:0}
}
@media (prefers-color-scheme:dark){
  .suchknopf{background:var(--weiss);border-color:#27455C;color:#C8DBE8}
  .suche{background:rgba(3,12,20,.7)}
  .suche-innen{background:#12293B;border-color:#27455C}
  .suche-zeile{border-bottom-color:#27455C}
  .suche-feld{color:#C8DBE8}
  .suche-treffer li a{border-bottom-color:#1E3A4E}
  .suche-treffer li a:hover,.suche-treffer li a:focus-visible{background:#163346}
  .suche-treffer strong{color:#EAF3F9}
  .suche-treffer span,.suche-hinweis{color:#9BB6C9}
}

/* Verweis auf die Karte in den Zonenkarten */
.zone .zonenlink{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azulejo);text-decoration:none;
}
.zone .zonenlink::before{content:"\2197";font-size:.9rem;line-height:1}
.zone .zonenlink:hover{color:var(--ocker)}
@media (prefers-color-scheme:dark){
  .zone .zonenlink{color:#7FB6E8}
  .zone .zonenlink:hover{color:#F0B45C}
}

/* ── Notrufband auf der Startseite ───────────────────────────────────
   Steht direkt unter den Eckdaten, ohne Klick sichtbar. Die Nummern
   sind Telefonlinks: auf dem Handy genügt ein Tipp. Kein roter Kasten
   und keine Ausrufezeichen — wer sie braucht, sucht sie ohnehin, und
   Daueralarm auf der Startseite nutzt sich ab.
   ------------------------------------------------------------------ */
.notrufband{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:26px;padding:16px 0 4px;border-top:1px solid var(--linie);
}
.notruf-titel{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grau);width:100%;
}
.notruf{
  display:flex;flex-direction:column;text-decoration:none;
  min-height:44px;justify-content:center;
}
.notruf b{
  font-family:var(--daten);font-size:1.15rem;font-weight:500;
  color:var(--tiefsee);letter-spacing:.02em;line-height:1.2;
}
.notruf span{font-size:.8rem;color:var(--grau);margin-top:2px}
.notruf:hover b{color:var(--ocker)}
.notruf-mehr{
  font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--azulejo);text-decoration:none;
  min-height:44px;display:flex;align-items:center;
}
.notruf-mehr:hover{color:var(--ocker)}
@media (max-width:560px){
  .notrufband{gap:14px 22px}
  .notruf b{font-size:1rem}
}
@media (prefers-color-scheme:dark){
  .notrufband{border-top-color:#27455C}
  .notruf b{color:#EAF3F9}
  .notruf span,.notruf-titel{color:#9BB6C9}
  .notruf-mehr{color:#7FB6E8}
  .notruf:hover b,.notruf-mehr:hover{color:#F0B45C}
}

/* ── Ausführlicher Zonentext ─────────────────────────────────────────
   Anreißer bleibt sichtbar, der Rest kommt auf Tipp. So passen lange
   Texte in die Kachelübersicht, ohne sie zu sprengen.
   ------------------------------------------------------------------ */
.zone-mehr{margin-top:12px}
.zone-mehr summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--daten);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azulejo);
  min-height:44px;
}
.zone-mehr summary::-webkit-details-marker{display:none}
.zone-mehr summary::after{content:"\25BE";font-size:.8rem;transition:transform .2s}
.zone-mehr[open] summary::after{transform:rotate(180deg)}
.zone-mehr summary:hover{color:var(--ocker)}
.zone-mehr summary:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}
.zone-mehr div{
  padding-top:4px;border-top:1px solid var(--linie);margin-top:2px;
}
.zone-mehr p{font-size:.9rem;line-height:1.62;color:var(--tinte);margin:12px 0 0}
@media (prefers-color-scheme:dark){
  .zone-mehr summary{color:#7FB6E8}
  .zone-mehr summary:hover{color:#F0B45C}
  .zone-mehr div{border-top-color:#27455C}
  .zone-mehr p{color:#C8DBE8}
}

/* ── Marktgrafik: Preis gegen Angebot ────────────────────────────── */
.marktgrafik{margin:26px 0 6px}
.marktgrafik svg{width:100%;height:auto;overflow:visible}
.marktgrafik .raster{stroke:var(--linie);stroke-width:1}
.marktgrafik .achse{
  font-family:var(--daten);font-size:11px;fill:var(--grau);
}
.marktgrafik .achstitel{
  font-family:var(--daten);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--grau);
}
.marktgrafik .punkt{stroke:var(--kalk);stroke-width:2}
.marktgrafik .punkt.steigt{fill:var(--azulejo)}
.marktgrafik .punkt.faellt{fill:var(--ocker)}
.marktgrafik .marke-text{
  font-family:var(--schrift);font-size:13px;font-weight:500;fill:var(--tiefsee);
}
.marktgrafik .marke-wert{font-family:var(--daten);font-size:11px;fill:var(--grau)}
.marktgrafik figcaption{
  font-size:.8rem;color:var(--grau);margin-top:10px;line-height:1.5;
}
@media (prefers-color-scheme:dark){
  .marktgrafik .raster{stroke:#27455C}
  .marktgrafik .achse,.marktgrafik .achstitel,
  .marktgrafik .marke-wert,.marktgrafik figcaption{fill:#9BB6C9;color:#9BB6C9}
  .marktgrafik .marke-text{fill:#EAF3F9}
  .marktgrafik .punkt{stroke:#0B1F2D}
  .marktgrafik .punkt.steigt{fill:#7FB6E8}
  .marktgrafik .punkt.faellt{fill:#F0B45C}
}
@media (max-width:560px){
  .marktgrafik .marke-text{font-size:15px}
  .marktgrafik .achse{font-size:13px}
}

/* ── Kontaktformular ─────────────────────────────────────────────────
   Großzügige Felder, ruhige Linien, kein Kästchengitter. Die Schrift
   in den Feldern ist dieselbe wie im Fließtext — Formulare, die nach
   Formular aussehen, schrecken ab.
   ------------------------------------------------------------------ */
.kontaktform{margin:30px 0 10px;max-width:640px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media (max-width:560px){.feldpaar{grid-template-columns:1fr}}

.feld{display:block;margin-bottom:22px}
.feld > span{
  display:block;font-family:var(--daten);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);margin-bottom:7px;
}
.feld input,.feld textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--schrift);font-size:1rem;color:var(--tinte);
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  padding:9px 2px;border-radius:0;
  transition:border-color .18s;
}
.feld textarea{resize:vertical;line-height:1.6;min-height:130px}
.feld input:hover,.feld textarea:hover{border-bottom-color:var(--grau)}
.feld input:focus,.feld textarea:focus{
  outline:none;border-bottom-color:var(--azulejo);border-bottom-width:2px;
  padding-bottom:8px;
}

.haken{display:flex;gap:12px;align-items:flex-start;margin:6px 0 26px}
.haken input{
  appearance:none;flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  border:1px solid var(--grau);border-radius:3px;background:transparent;
  cursor:pointer;position:relative;
}
.haken input:checked{background:var(--azulejo);border-color:var(--azulejo)}
.haken input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.haken input:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}
.haken span{font-size:.9rem;line-height:1.55;color:var(--tinte)}

.formknopf{
  display:inline-block;background:var(--tiefsee);color:#fff;
  font-family:var(--daten);font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;
  padding:15px 34px;border:0;border-radius:2px;cursor:pointer;
  transition:background .18s;
}
.formknopf:hover{background:var(--azulejo)}
.formknopf:focus-visible{outline:2px solid var(--ocker);outline-offset:3px}

.formhinweis{margin-top:16px}
.direktmail{margin-top:34px;padding-top:22px;border-top:1px solid var(--linie)}
.versteckt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (prefers-color-scheme:dark){
  .feld input,.feld textarea{color:#C8DBE8;border-bottom-color:#27455C}
  .feld > span{color:#9BB6C9}
  .feld input:hover,.feld textarea:hover{border-bottom-color:#4E7A99}
  .feld input:focus,.feld textarea:focus{border-bottom-color:#7FB6E8}
  .haken input{border-color:#4E7A99}
  .haken input:checked{background:#1B5FA8;border-color:#1B5FA8}
  .haken span{color:#C8DBE8}
  .formknopf{background:#1B5FA8}
  .formknopf:hover{background:#2E7BD1}
  .direktmail{border-top-color:#27455C}
}

/* ── Kontaktband im Fuß ──────────────────────────────────────────────
   Steht über den Spalten, nicht darin: Wer bis hierher gelesen hat,
   hat meist einen Grund zu schreiben. */
.fuss-kontakt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 30px;padding-bottom:34px;margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.fuss-kontakt h4{
  font-family:var(--schrift);color:#EAF3F9;font-size:1.15rem;font-weight:500;
  letter-spacing:0;text-transform:none;
}
/* Zwei Fallstricke auf einmal: Der Fuß ist immer dunkel, auch im hellen
   Modus — eine Farbvariable würde dort mitwechseln und hell auf hell
   ergeben. Und `.fuss a` ist spezifischer als eine einzelne Klasse,
   färbt den Knopftext also hell ein. Deshalb feste Werte und der
   Elternselektor davor. */
.fuss .formknopf-hell{
  background:#EAF3F9;color:#08202E;white-space:nowrap;
}
.fuss .formknopf-hell:hover{background:#F0B45C;color:#08202E}
@media (max-width:560px){
  .fuss-kontakt{flex-direction:column;align-items:flex-start;gap:16px}
  .fuss .formknopf-hell{align-self:flex-start;padding:14px 30px}
}

/* ── Tabellen am Telefon ─────────────────────────────────────────────
   Gestapelte Zellen bekommen den Spaltennamen vorangestellt, den der
   ausgeblendete Tabellenkopf sonst geliefert hätte. Ohne ihn stünde
   in der Immobilientabelle eine nackte 53. */
@media (max-width:620px){
  /* Nur für Tabellen, die am Telefon gestapelt werden und ihren Kopf
     verlieren. Die Öffnungszeiten behalten zwei Spalten samt Kopfzeile —
     dort stünde der Spaltenname sonst doppelt. */
  .rechtstabelle td[data-spalte]::before{
    content:attr(data-spalte) " ";
    font-family:var(--daten);font-size:.68rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--grau);
    display:block;margin-bottom:1px;
  }
  .rechtstabelle td[data-spalte]{margin-top:7px}
  .rechtstabelle tr{padding:14px 0}
  .rechtstabelle td:first-child{font-weight:500;color:var(--tiefsee)}
}
@media (max-width:620px) and (prefers-color-scheme:dark){
  .rechtstabelle td[data-spalte]::before{color:#9BB6C9}
  .rechtstabelle td:first-child{color:#EAF3F9}
}

/* ── Sehr schmale Geräte ─────────────────────────────────────────────
   In der Statistik taucht 320 px auf — kleinere iPhones und Android-
   Geräte mit vergrößerter Systemschrift. Dort ist jede Zeile knapp,
   und lange deutsche Komposita wie „Ausländeridentifikationsnummer"
   oder Adressen wie sede.agenciatributaria.gob.es laufen sonst über
   den Rand hinaus.
   ------------------------------------------------------------------ */
body{overflow-wrap:break-word}
a,td,li,p,h1,h2,h3,h4{overflow-wrap:break-word}

@media (max-width:380px){
  .bahn,.bahn-eng{padding-left:16px;padding-right:16px}
  h1{font-size:1.7rem;line-height:1.18}
  h2{font-size:1.4rem}
  .vorspann{font-size:1rem}
  .notrufband{gap:12px 18px}
  .notruf b{font-size:1rem}
  .notruf span{font-size:.8rem}
  /* Die Marke im Kopf braucht sonst mehr Platz, als da ist */
  .kopf .marke-bild{max-width:150px}
  .rechtstabelle,.zeiten{font-size:.9rem}
  .marktgrafik .marke-text{font-size:17px}
  .marktgrafik .achse{font-size:.9rem}
  .zs-jahr{font-size:.68rem;padding:4px 7px}
  .zs-links{left:8px}
  .zs-rechts{right:8px}
}


/* ── Kein seitlicher Überlauf ────────────────────────────────────────
   figure bringt im Browser 40 px Außenabstand links und rechts mit.
   Zusammen mit width:100% schiebt das die ganze Seite zur Seite —
   am Telefon sofort spürbar, am Rechner kaum. Einmal für alle.
   ------------------------------------------------------------------ */
figure{margin-left:0;margin-right:0}
/* Nur body: overflow auf html gälte für den ganzen Sichtbereich und
   nähme iOS Safari die untere Leiste. Siehe handyleiste.py. */
body{overflow-x:clip;max-width:100%}

/* ── Höhenschnitt: Farben und Handyverhalten ─────────────────────────
   Der Schnitt hatte einen fest weißen Grund — im Dunkelmodus ein
   greller Kasten mitten in der Seite. Und unter 760 px sind seine
   Beschriftungen ohnehin ausgeblendet: Dort zeigt er nur noch Punkte
   ohne Namen und nimmt eine halbe Bildschirmhöhe ein. Deshalb ist er
   am Telefon ganz aus; die Zonenkarten darunter sagen dasselbe, nur
   lesbar.
   ------------------------------------------------------------------ */
:root{
  --schnitt-grund:#FFFFFF;
  --schnitt-land:#EDF3F7;
  --schnitt-kante:#CBD9E4;
  --schnitt-schrift:#0E3B5C;
}
@media (prefers-color-scheme:dark){
  :root{
    --schnitt-grund:#0F2438;
    --schnitt-land:#15304A;
    --schnitt-kante:#2B4E69;
    --schnitt-schrift:#DCEAF4;
  }
}
@media (max-width:760px){
  .schnitt{display:none}
  /* Legende und Farbpunkte gehören zum Schnitt. Ohne ihn verweisen sie
     auf nichts: In der Legende stünden drei Punkte ohne Bezug, und vor
     jeder Gruppenüberschrift ein farbiger Kreis, dessen Bedeutung
     nirgends mehr erklärt wird. Die Überschrift selbst sagt bereits
     alles — „In den Hügeln und im Hinterland" braucht keinen Punkt. */
  .zonen-legende{display:none}
  .zonen-gruppe > h3 b{display:none}
  .zonen-gruppe > h3{gap:0}
}

/* ── Abschnittsüberschriften in Artikeln ─────────────────────────────
   Bisher unterschieden sie sich vom Fließtext fast nur durch die Größe
   — beim Überfliegen am Telefon gingen sie unter. Der Kompromiss:
   Größe und Gewicht bleiben zurückhaltend, aber ein kurzer Strich in
   Ockerstein davor macht sie auf einen Blick als Überschrift kenntlich.
   Derselbe Strich wie über den Rubrikbezeichnungen — die Seite bekommt
   dadurch ein einziges, wiedererkennbares Zeichen für „hier fängt
   etwas Neues an".
   ------------------------------------------------------------------ */
.rechtstext h2{
  font-size:1.4rem;
  color:var(--tiefsee);
  margin:52px 0 16px;
  padding-bottom:11px;
  border-bottom:1px solid var(--linie);
  position:relative;
}
.rechtstext h2::before{
  content:"";position:absolute;top:-14px;left:0;
  width:34px;height:2px;background:var(--ocker);
}
.rechtstext h2:first-of-type{margin-top:6px}

@media (max-width:620px){
  .rechtstext h2{font-size:1.4rem;margin:46px 0 14px}
}
@media (prefers-color-scheme:dark){
  .rechtstext h2{color:#EAF3F9}
}

/* ── Ein Überschriftenbild für die ganze Seite ───────────────────────
   Bisher hatten die beiden Seitengerüste eigene Abschnittsüberschriften:
   die Ämterseiten eine schlichte Zeile im Kasten, die Fließtextseiten
   eine größere mit Linie. Wer von der Rathausseite zur Geschichte
   wechselte, musste sich neu orientieren. Jetzt gilt für beide dieselbe
   Regel — Ockerstrich, Größe, Linie, Abstand.
   ------------------------------------------------------------------ */
.rechtstext h2,
.karte > h2{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  line-height:1.2;
  color:var(--tiefsee);
  padding-bottom:11px;
  border-bottom:1px solid var(--linie);
  position:relative;
}
.rechtstext h2::before,
.karte > h2::before{
  content:"";position:absolute;top:-14px;left:0;
  width:34px;height:2px;background:var(--ocker);
}
.rechtstext h2{margin:52px 0 16px}
.rechtstext h2:first-of-type{margin-top:6px}
/* Im Kasten sitzt die Überschrift schon im Innenabstand; sie braucht
   oben nur so viel Luft, dass der Ockerstrich Platz findet. */
.karte > h2{margin:8px 0 18px}

/* Ebenso die dritte Ebene: eine Schrift, ein Gewicht, eine Farbe. */
.rechtstext h3,
.karte h3,
.amt h3{
  font-family:var(--display);font-size:1.15rem;font-weight:500;
  letter-spacing:.01em;color:var(--tiefsee);line-height:1.32;
}

@media (max-width:620px){
  .rechtstext h2,.karte > h2{font-size:1.4rem}
  .rechtstext h2{margin:46px 0 14px}
  .karte > h2{margin:6px 0 16px}
}
@media (prefers-color-scheme:dark){
  .rechtstext h2,.karte > h2,
  .rechtstext h3,.karte h3,.amt h3{color:#EAF3F9}
}

/* ── Zonenkarten als Karten ──────────────────────────────────────────
   Bisher waren die Zonen reiner Text. Am Rechner trennte sie das Raster
   in Spalten; am Telefon fällt das Raster zu einer Spalte zusammen, und
   dann läuft alles ineinander — das Auge findet keine Grenze zwischen
   Cap Negret und L’Olla. Jetzt ist jede Zone ein Kasten wie auf den
   Ämterseiten: gleicher Rahmen, gleicher Innenabstand, gleiche Regel.
   ------------------------------------------------------------------ */
.zone{
  background:var(--weiss);border:1px solid var(--linie);
  padding:20px 22px 18px;
  display:flex;flex-direction:column;
}
.zone h4{margin-bottom:8px}
.zone .zonenlink{margin-top:auto;padding-top:14px}
.zone .zone-mehr + .zonenlink{margin-top:0;padding-top:12px}

@media (max-width:620px){
  .zonen{gap:14px}
  .zone{padding:18px 18px 16px}
}
@media (prefers-color-scheme:dark){
  .zone{background:#0F2438;border-color:#27455C}
}

/* ── Gruppenüberschriften der Zonen ──────────────────────────────────
   „Am Wasser", „Im Ort", „In den Hügeln" standen in kleinen Versalien
   der Datenschrift — als wären sie Rubriken. Sie gliedern aber siebzehn
   Karten in drei Blöcke; das ist eine Abschnittsüberschrift und bekommt
   dasselbe Bild wie jede andere: Titelschrift, Ockerstrich, Linie.
   ------------------------------------------------------------------ */
.zonen-gruppe > h3{
  font-family:var(--display);font-size:1.4rem;font-weight:400;
  letter-spacing:.01em;text-transform:none;line-height:1.2;
  color:var(--tiefsee);
  padding-bottom:11px;border-bottom:1px solid var(--linie);
  margin:14px 0 20px;position:relative;
  display:flex;align-items:center;gap:10px;
}
.zonen-gruppe > h3::before{
  content:"";position:absolute;top:-14px;left:0;
  width:34px;height:2px;background:var(--ocker);
}
.zonen-gruppe > h3 b{width:10px;height:10px}
.zonen-gruppe + .zonen-gruppe > h3{margin-top:22px}

@media (max-width:620px){
  .zonen-gruppe > h3{font-size:1.34rem}
}
@media (prefers-color-scheme:dark){
  .zonen-gruppe > h3{color:#EAF3F9}
}

/* ── Kontaktliste: ein Eintrag, eine Grenze ──────────────────────────
   Jeder Eintrag hatte drei waagerechte Linien: die Unterstreichung der
   Rufnummer, eine Linie über dem Kartenverweis, die Trennlinie zum
   nächsten Eintrag. Das Auge fand den Absatz nicht. Jetzt gibt es nur
   noch die Trennlinie — kräftiger und mit mehr Luft — und die
   Beschriftung hebt sich deutlicher ab, damit der Anfang eines Eintrags
   ebenso klar ist wie sein Ende.
   ------------------------------------------------------------------ */
.datenliste div{padding:14px 0;border-bottom:1px solid var(--linie)}
.datenliste dt{color:var(--tiefsee);font-weight:500}
.datenliste dd a[href^="tel:"]{text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:620px){
  .datenliste div{padding:16px 0}
  .datenliste dt{margin-bottom:2px}
}
@media (prefers-color-scheme:dark){
  .datenliste div{border-bottom-color:#27455C}
  .datenliste dt{color:#EAF3F9}
}

/* Der Fußknopf braucht dunkle Schrift auf hellem Grund — unabhängig vom
   Modus. Keine Variable, die mitwechselt; und die Regel steht bewusst
   ganz am Ende, damit keine spätere sie überschreibt. */
@media (prefers-color-scheme:dark){
  .fuss .formknopf-hell{color:#08202E}
  .fuss .formknopf-hell:hover{color:#08202E}
}

/* Hochformat im Fließtext: schmaler setzen, damit das Bild nicht die
   ganze Spalte füllt — beschnitten wird nichts. */
.zeitbild-hoch{max-width:420px;margin-inline:auto}
.zeitbild-hoch img{width:100%;height:auto}
@media (max-width:520px){ .zeitbild-hoch{max-width:100%} }

/* Galerie der Kapellenbilder: Seitenverhältnis behalten, weil diese
   Aufnahmen teils 3:2, teils 4:3 sind — ein fester Ausschnitt würde
   Glockenwände und Vorbauten abschneiden. */
.galerie-frei{display:block;columns:2 280px;column-gap:18px;margin:22px 0 8px}
.galerie-frei .bild{break-inside:avoid;margin:0 0 18px}
.galerie-frei .bild-knopf{aspect-ratio:auto;background:var(--weiss)}
.galerie-frei .bild-knopf img{width:100%;height:auto;object-fit:contain}
.galerie-frei figcaption{font-size:.86rem;line-height:1.4;padding-top:7px}
@media (max-width:520px){
  .galerie-frei{grid-template-columns:1fr}
}

/* Wappenblock auf der Startseite: Überschrift im Ton der Marken-
   zeile darüber, damit er sich nicht wie eine zweite H2 liest. */
.wappenkopf{
  font-family:var(--daten);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);font-weight:600;
  margin:38px 0 0;
}

/* ── Web-App-Leiste (nur im Home-Bildschirm-Modus, siehe webapp_leiste.py) ── */
.webapp-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 16px max(14px, env(safe-area-inset-bottom));
  background:var(--weiss);border-top:1px solid var(--linie);
  box-shadow:0 -4px 16px rgba(8,38,59,.08);
}
.webapp-leiste button{
  font:inherit;font-size:1rem;background:none;border:0;padding:8px 4px;
  color:var(--azulejo);cursor:pointer;min-height:44px;
}
.webapp-leiste button:disabled{color:var(--grau);opacity:.5}
html.webapp body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
@media (prefers-color-scheme: dark){
  .webapp-leiste{background:#0E2434;border-top-color:var(--linie)}
}

/* ── Bildnachweise am Seitenende (bildnachweise_ende.py) ── */
.bildnachweise{border-top:1px solid var(--linie);margin-top:clamp(36px,5vw,56px);
  padding:clamp(22px,3vw,32px) 0;color:var(--grau)}
.bildnachweise h2{font-family:var(--daten);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:400;margin:0 0 12px;color:var(--grau)}
.bildnachweise ul{list-style:none;margin:0;padding:0;font-size:.8rem;line-height:1.55}
.bildnachweise li{margin:0 0 6px}
.bildnachweise li:target{outline:1px solid var(--linie);outline-offset:3px}
.bildnachweise a{color:var(--grau);text-decoration:underline}
.bildnachweise .bn-bild{color:var(--tinte, inherit)}


/* Nicht amtlich (11.10.2026) */
.block-amtskasten{padding-top:22px;padding-bottom:0}
.amtskasten{margin:0}

/* „tu guía independiente“ (Axel, 11.10.2026): klein, kursiv, rechts auf der
   Trennlinie unter dem Kopf — bewusst getrennt vom Logo. Obere Hälfte in Kopffarbe,
   damit die Linie hinter dem Text aussetzt; untere durchsichtig (weiße Startseite). Beim Scrollen ausgeblendet. */
.kopf-innen{position:relative}
.kopf-claim{
  position:absolute;top:100%;right:24px;transform:translateY(-50%);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:13px;
  line-height:1.3;letter-spacing:.01em;color:var(--grau);
  background:linear-gradient(var(--kalk) 0 calc(50% + 1px),transparent 0);
  padding:0 10px;white-space:nowrap;pointer-events:none;
  transition:opacity .2s,visibility .2s;
}
.gerollt .kopf-claim{opacity:0;visibility:hidden}
@media (max-width:980px){ .kopf-claim{right:18px;font-size:12px;padding:0 8px} }
@media (max-width:400px){ .kopf-claim{right:14px} }
@media print{ .kopf-claim{display:none} }

/* Kopf auf dem Desktop in einer Zeile (11.10.2026): Bisher brauchte die
   deutsche Navigation mit Logo, Suche und Sprachwahl rund 1.315 px, der Kopf
   war auf 1.140 px begrenzt — Suche und Sprachwahl rutschten auf jedem
   Bildschirm in eine zweite Zeile. Jetzt: breiterer Kopf, engere Abstände,
   Sprachwahl nur mit Flagge; unterhalb von 1.320 px das Menü wie am Tablet
   (bei 1.240 px brach die deutsche Navigation noch in sich um). */
@media (min-width:981px){
  .kopf-innen{max-width:1360px;gap:20px}
  .kopf-rechts{gap:18px;flex-wrap:nowrap}
  .navi-breit{gap:18px;flex-wrap:nowrap}
  .navi-breit a{white-space:nowrap}
  .sprachwahl .sprachname{display:none}
}
@media (max-width:1319px){
  .navi-breit{display:none}
  .menue{display:block;flex:1 1 auto}
  .kopf-rechts{gap:10px;flex:0 1 auto;justify-content:flex-end}
}


/* Abschnittsleiste (Axel, 12.10.2026) — von seite.js erzeugt, ab vier
   Abschnitten. Hängt unter dem festen Kopf (absolut — sonst verschiebt
   sie beim Erscheinen die ganze Seite), erscheint nach dem Inhaltsverzeichnis.
   scroll-padding: Sprungziele landen unter Kopf + Leiste, nicht dahinter. */
html{scroll-padding-top:186px}
@media (max-width:980px){ html{scroll-padding-top:160px} }
.sprung{display:none;position:absolute;left:0;right:0;top:100%;margin-top:1px;
  background:var(--kalk);border-bottom:1px solid var(--linie)}
.sprung-an .sprung{display:block}
.sprung-innen{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px;position:relative}
.sprung-knopf{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;
  padding:9px 0;cursor:pointer;color:var(--tiefsee);text-align:left;font:inherit}
.sprung-nr{font-family:var(--daten);font-size:.72rem;letter-spacing:.08em;color:var(--grau);flex:0 0 auto}
.sprung-titel{font-family:var(--display);font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sprung-pfeil{color:var(--grau);font-size:.8rem;flex:0 0 auto;transition:transform .15s}
.sprung-auf .sprung-pfeil{transform:rotate(180deg)}
.sprung-oben{flex:0 0 auto;background:none;border:1px solid var(--linie);border-radius:4px;width:34px;height:30px;
  color:var(--tiefsee);cursor:pointer;font-size:1rem;line-height:1}
.sprung-knopf:focus-visible,.sprung-oben:focus-visible,.sprung-liste a:focus-visible{outline:2px solid var(--azulejo);outline-offset:2px}
.sprung-liste{display:none;position:absolute;left:24px;top:100%;width:440px;max-width:calc(100% - 48px);margin:0;padding:6px 0;
  list-style:none;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 10px 24px rgba(11,31,45,.14);
  max-height:65vh;overflow:auto}
.sprung-auf .sprung-liste{display:block}
.sprung-liste a{display:flex;gap:12px;padding:10px 16px;text-decoration:none;color:var(--tiefsee);
  font-family:var(--display);font-size:1rem;line-height:1.35}
.sprung-liste a span{font-family:var(--daten);font-size:.72rem;color:var(--grau);padding-top:3px;min-width:1.4em}
.sprung-liste a:hover{color:var(--azulejo)}
.sprung-liste a[aria-current]{background:var(--kalk);font-weight:500}
@media (max-width:980px){ .sprung-innen{padding:0 18px} .sprung-liste{left:12px;right:12px;width:auto;max-width:none} }
@media (max-width:400px){ .sprung-innen{padding:0 14px} }
@media print{ .sprung{display:none!important} }


/* Nächster Trinkwasserbrunnen (brunnen.html, 12.10.2026) */
.brunnen-finder{margin:6px 0 10px}
.brunnen-status{margin:14px 0 0;min-height:1.4em}
.brunnen-status:empty{display:none}
.brunnen-route{font-weight:600;white-space:nowrap}
li.brunnen-naechster{background:var(--kalk-tief);outline:6px solid var(--kalk-tief);border-radius:2px}