/* ============================================================
   Farbfassung „Rasen, hell" — empfohlene Fassung
   Gehört nach: media/templates/site/cassiopeia/css/user.css
   (ersetzt den Farbblock; Maße, Typografie, Slider bleiben)

   Papier als Grund, Kohle als Schrift, Rasengrün für alles
   Anklickbare, Kreide als zweite Fläche. Rot kommt nicht vor.

   Zustände nie über Farbe allein: Rasen dunkel / Stahlblau / Ocker
   unterscheiden sich in der Helligkeit (4, 9 und 13 Prozent
   Leuchtdichte) und tragen zusätzlich Wort und eigene Form.

   Kontrast gegen den Papierton #f5f3ef, nach WCAG 2.1:
     Kohle           #1c1f22  14,9 : 1   AAA
     Kohle gedämpft  #5c6366   5,5 : 1   AA
     Rasen           #17553a   7,9 : 1   AAA
     Rasen dunkel    #0e3d29  11,0 : 1   AAA
     Stahlblau       #1a5a7a   6,8 : 1   AA
     Ocker           #8a5a12   5,3 : 1   AA
     Kreide          #ebe7e0   1,1 : 1   nur Fläche, kein Text
   Weiß auf Rasen (Schaltflächen): 8,8 : 1
   ============================================================ */

:root {
  --sef-grund: #f5f3ef;        /* Papier, warm getönt statt reinweiß */
  --sef-flaeche: #ffffff;      /* Kopfzeile, Karten */
  --sef-kreide: #ebe7e0;       /* Zitate, Einschübe — ersetzt Linien */
  --sef-linie: #ddd8ce;
  --sef-text: #1c1f22;         /* Kohle */
  --sef-text-leise: #5c6366;

  --sef-akzent: #17553a;       /* Rasen — Verweise, Schaltflächen */
  --sef-kontakt: #0e3d29;      /* Rasen dunkel — Mauskontakt */

  --sef-frei: #0e3d29;         /* Zustand frei — dunkler als Rasen */
  --sef-blau: #1a5a7a;         /* Zustand registriert */
  --sef-ocker: #8a5a12;        /* Zustand versteckt, Hinweise */

  --sef-schrift-titel: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  --sef-schrift-text: Helvetica, Arial, sans-serif;

  --sef-grundgroesse: 17px;
  --sef-zeilenabstand: 1.78;
  --sef-zeilenlaenge: 68ch;   /* rund 70 Zeichen */
  --sef-breite: 1080px;
}

/* --- Grundlage ------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--sef-grund);
  color: var(--sef-text);
  font-family: var(--sef-schrift-text);
  font-size: var(--sef-grundgroesse);
  line-height: var(--sef-zeilenabstand);
}

.container-header,
.container-component,
.container-footer > .grid-child,
.container-top-a,
.container-bottom-a { max-width: var(--sef-breite); }

a { color: var(--sef-akzent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--sef-kontakt); }

/* --- Titel ---------------------------------------------------- */

h1, h2, h3, h4, h5, .page-header > h1, .item-title {
  font-family: var(--sef-schrift-titel);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sef-text);
  text-wrap: pretty;
}

h1, .com-content-article__title { font-size: 2.24rem; line-height: 1.15; max-width: 30ch; }
h2 { font-size: 1.6rem; line-height: 1.22; }
h3 { font-size: 1.24rem; }
h2 a, h3 a, .item-title a { color: var(--sef-text); }
h2 a:hover, h3 a:hover, .item-title a:hover { color: var(--sef-kontakt); }

/* --- Lesespalte ----------------------------------------------- */

.com-content-article__body,
.com-content-article__body p,
.com-content-category-blog__item .item-content p,
.blog-item .intro p {
  max-width: var(--sef-zeilenlaenge);
  font-size: var(--sef-grundgroesse);
  line-height: var(--sef-zeilenabstand);
}

/* Der Editor hat font-family und font-size in die Artikel geschrieben.
   Die Angaben werden bewusst überschrieben, sonst bleibt es bei 12pt. */
.com-content-article__body span[style],
.com-content-category-blog__item span[style] {
  font-family: var(--sef-schrift-text) !important;
  font-size: inherit !important;
}

/* Blocksatz aus dem Altbestand aufheben — mit deutschen Wörtern
   reißt er Löcher in die Zeile. */
.com-content-article__body p[style*="justify"],
.com-content-category-blog__item p[style*="justify"] { text-align: left !important; }

.com-content-article__body > * + * { margin-top: 1.15em; }

blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.3em;
  border-left: 3px solid var(--sef-akzent);
  max-width: 60ch;
  font-size: 1.18rem;
  font-style: italic;
  color: var(--sef-text);
}

/* --- Beitragsangaben ------------------------------------------ */

.article-info, .com-content-article__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.5rem 0 1.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.76rem;
  color: #808080;
}
.article-info dd { margin: 0; }
.article-info dt { display: none; }

/* --- Bilder --------------------------------------------------- */

.com-content-article__body img,
.item-image img,
figure img { max-width: 100%; height: auto; display: block; }

.item-image { margin: 0 0 1.4rem; float: none !important; width: auto !important; }

/* --- Kopf und Menü ------------------------------------------- */

.metismenu.mod-menu > li > a,
.metismenu.mod-menu > li > span {
  font-family: var(--sef-schrift-titel);
  font-size: 1.06rem;
  padding: 0.75rem 0;
  color: var(--sef-text);
  border-bottom: 2px solid transparent;
}
.metismenu.mod-menu > li > a:hover { color: var(--sef-kontakt); }
.metismenu.mod-menu > li.current > a,
.metismenu.mod-menu > li.active > a {
  color: var(--sef-akzent);
  border-bottom-color: var(--sef-akzent);
}

/* --- Blattfuß ------------------------------------------------- */

.container-footer {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.76rem;
}

/* --- Slider: Ladeverhalten und Größe ------------------------- */

.n2-section-smartslider { margin: 0 0 2rem; contain: layout paint; }
.n2-ss-slider img { max-width: 100%; height: auto; }

/* Reserviert die Höhe, damit der Slider den Inhalt darunter
   beim Laden nicht verschiebt. */
#n2-ss-1-align { min-height: 420px; }

/* --- Telefon zuerst: 375 px ---------------------------------- */

@media (max-width: 47.99rem) {
  :root { --sef-grundgroesse: 17px; --sef-zeilenlaenge: 100%; }

  h1, .com-content-article__title { font-size: 1.65rem; max-width: none; }
  h2 { font-size: 1.32rem; }

  .container-component { padding-inline: 1.1rem; }

  #n2-ss-1-align { min-height: 240px; }

  /* Tippflächen nie unter 44 px */
  .metismenu.mod-menu > li > a,
  .btn, .readmore .btn, .pagination a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Randspalten wandern unter den Text, nicht daneben */
  .container-sidebar-left, .container-sidebar-right { margin-top: 2rem; }
}

/* --- Bewegung nur, wenn gewünscht ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Druck ---------------------------------------------------- */

@media print {
  body { background: #ffffff; color: #000000; font-size: 12pt; }
  .n2-section-smartslider, .container-header nav, .container-footer { display: none; }
  a { color: #000000; }
}

/* ============================================================
   Helle Fassung: Farben, Zustände, Bilder, Bausteine
   ============================================================ */


/* Verweise im Fließtext: Farbe allein genügt nicht, deshalb
   unterstrichen. */
.com-content-article__body a,
.com-content-category-blog__item a {
  color: var(--sef-akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.com-content-article__body a:hover,
.com-content-category-blog__item a:hover {
  color: var(--sef-kontakt);
  text-decoration-thickness: 2px;
}

/* Kopfzeile hebt sich als Fläche ab, nicht durch eine Linie.
   Darüber der Rasenstreifen — der einzige Zierzug der Seite. */
.container-header {
  background: var(--sef-flaeche);
  border-top: 6px solid var(--sef-akzent);
  border-bottom: 1px solid var(--sef-linie);
}

.metismenu.mod-menu > li > a { color: #3f4649; }
.metismenu.mod-menu > li > a:hover { color: var(--sef-akzent); }
.metismenu.mod-menu > li.current > a,
.metismenu.mod-menu > li.active > a {
  color: var(--sef-akzent);
  border-bottom-color: var(--sef-akzent);
}

/* Zitat: Fläche plus Kante, kein Kursiv-Grau. */
blockquote {
  background: var(--sef-kreide);
  border-left: 3px solid var(--sef-akzent);
  padding: 0.7em 1.1em;
  color: var(--sef-text);
}

/* Zustände: Punkt plus Wort plus Form. */
.sef-status { display: inline-flex; align-items: center; gap: 0.5em; }
.sef-status::before { content: ""; width: 0.8em; height: 0.8em; border: 2px solid currentColor; }

.sef-status--frei        { color: var(--sef-frei); }
.sef-status--frei::before        { border-radius: 50%; background: currentColor; }

.sef-status--registriert { color: var(--sef-blau); }
.sef-status--registriert::before { border-radius: 50%; background: transparent; }

.sef-status--versteckt   { color: var(--sef-ocker); }
.sef-status--versteckt::before   { border-radius: 0; background: transparent; }

/* Schaltflächen: Weiß auf Rasen, 8,8:1. */
.btn, .readmore .btn { background: var(--sef-akzent); color: #ffffff; border: 0; }
.btn:hover, .readmore .btn:hover { background: var(--sef-kontakt); color: #ffffff; }

/* Blattfuß: der einzige Ort, an dem Kohle Fläche wird. */
.container-footer { background: var(--sef-text); color: #cfd3d5; border: 0; }
.container-footer a { color: #a8d3bd; }
.container-footer a:hover { color: #ffffff; }

:focus-visible { outline: 3px solid var(--sef-akzent); outline-offset: 2px; }

@media (prefers-contrast: more) {
  :root { --sef-text-leise: #3f4649; --sef-linie: #a9a196; }
}

/* Wer sein Gerät auf dunkel gestellt hat, bekommt die Fassung
   „Abendspiel" — dieselben Maße, dunkle Töne. */
@media (prefers-color-scheme: dark) {
  :root {
    --sef-grund: #15181b;
    --sef-flaeche: #1d2125;
    --sef-kreide: #232830;
    --sef-linie: #2c3237;
    --sef-text: #e4e7ea;
    --sef-text-leise: #a4acb3;
    --sef-akzent: #7fb0c8;
    --sef-kontakt: #e8c9a6;
    --sef-blau: #7fb0c8;
    --sef-ocker: #e8c9a6;
  }
  .container-header { background: var(--sef-flaeche); border-top-color: #2f6b4a; }
  .btn, .readmore .btn { background: var(--sef-akzent); color: #10141a; }
  .container-footer { background: #101316; color: var(--sef-text-leise); }
}

/* Umflossene Bilder im Beitrag ("Ball gespielt": Karikatur rechts
   neben dem Text). Der Editor setzt pull-right; die Breite kommt
   aus dem Stylesheet, nicht aus dem Artikel. */
.com-content-article__body .pull-right,
.com-content-article__body figure.rechts {
  float: right;
  width: 300px;
  margin: 0.3em 0 1em 1.4em;
}
.com-content-article__body .pull-left,
.com-content-article__body figure.links {
  float: left;
  width: 300px;
  margin: 0.3em 1.4em 1em 0;
}
.com-content-article__body figcaption {
  margin-top: 0.4em;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--sef-text-leise);
}

/* Auf dem Telefon kein Umfluss — 300 px neben 17-px-Text ergeben
   vierzehn Zeichen je Zeile. Das Bild steht dann über dem Absatz. */
@media (max-width: 40rem) {
  .com-content-article__body .pull-right,
  .com-content-article__body .pull-left,
  .com-content-article__body figure.rechts,
  .com-content-article__body figure.links {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

/* Bildgrößen im Beitrag. Vier Stufen statt freier Pixelangaben —
   der Redakteur wählt eine Klasse, die Breite steht hier. */
.com-content-article__body figure.klein  { width: 200px; }
.com-content-article__body figure.mittel { width: 300px; }
.com-content-article__body figure.gross  { width: 460px; float: none; margin: 1.2em 0; }
.com-content-article__body figure.voll   { width: 100%;  float: none; margin: 1.2em 0; }

/* "gross" und "voll" sind zu breit für Umfluss: neben 460 px neben
   17-px-Text bleiben 25 Zeichen je Zeile. Deshalb hebt die Regel
   oben den Umfluss auf, auch wenn "rechts" gesetzt ist. */

.com-content-article__body figure.breit {
  width: calc(100% + 6rem);
  max-width: none;
  margin-inline: -3rem;
  float: none;
}

@media (max-width: 40rem) {
  .com-content-article__body figure.klein,
  .com-content-article__body figure.mittel,
  .com-content-article__body figure.gross,
  .com-content-article__body figure.breit {
    width: 100%;
    margin-inline: 0;
    float: none;
  }
}

/* Verlinkte Bilder: der Verweis muss sichtbar sein, sonst klickt
   niemand darauf. Rahmen bei Mauskontakt, dazu ein Pfeilzeichen
   an der Bildunterschrift, wenn das Ziel außerhalb liegt. */
.com-content-article__body figure a { display: block; }
.com-content-article__body figure a img {
  border: 1px solid var(--sef-linie);
  transition: border-color 0.15s;
}
.com-content-article__body figure a:hover img,
.com-content-article__body figure a:focus-visible img {
  border-color: var(--sef-akzent);
}
.com-content-article__body figure a[target="_blank"] + figcaption::after,
.com-content-article__body figure a[target="_blank"] ~ figcaption::after {
  content: " \2197";   /* Pfeil nach außen */
  color: var(--sef-akzent);
}

/* ============================================================
   Bausteine der Beitragsseiten
   Diese Klassen erzeugen die Overrides; die Maße stehen hier,
   nicht im Artikel.
   ============================================================ */

/* Vorspann — trägt die Behauptung des Textes */
.com-content-article__body .vorspann {
  max-width: 62ch;
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--sef-text);
}

/* Merksatz zwischen zwei Rasenlinien, ersetzt zentrierten Fettdruck */
.com-content-article__body .merksatz {
  max-width: 62ch;
  margin-block: 1.6rem;
  padding-block: 1.3rem;
  border-block: 2px solid var(--sef-akzent);
  font-family: 'Source Sans 3', Helvetica, sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sef-text);
}

/* Verweis auf einen Vorgängerbeitrag */
.com-content-article__body .vorgeschichte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  max-width: 62ch;
  padding: 0.7rem 1rem;
  background: var(--sef-kreide);
}
.vorgeschichte .marke {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sef-ocker);
}

/* --- Hintergrundkasten für langen Fremdtext ------------------ */

.regelkasten {
  max-width: 643px;
  margin-block: 1.6rem;
  background: var(--sef-kreide);
  border-left: 4px solid var(--sef-blau);
}
.regelkasten > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  min-height: 52px;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.regelkasten > summary::-webkit-details-marker { display: none; }
.regelkasten > summary::after {
  content: "+";
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1rem;
  color: var(--sef-blau);
}
.regelkasten[open] > summary::after { content: "–"; }
.regelkasten__marke {
  flex-basis: 100%;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sef-blau);
}
.regelkasten__titel { font-size: 1.05rem; font-weight: 600; color: var(--sef-text); }
.regelkasten__umfang {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  color: var(--sef-text-leise);
}

.regelkasten > *:not(summary) { margin-inline: 1.1rem; }
.regelkasten > *:last-child { margin-bottom: 1.2rem; }
.regelkasten p { max-width: 62ch; font-size: 1rem; line-height: 1.72; }

/* Aufzählung EINSPALTIG — zweispaltig brechen die längeren
   Vergehen dreizeilig um. */
.regelkasten__liste { max-width: 62ch; padding-left: 1.1rem; list-style: none; }
.regelkasten__liste li { position: relative; padding: 0.18rem 0; font-size: 1rem; line-height: 1.55; }
.regelkasten__liste li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--sef-blau);
}

/* Stufen: Wort und Folge in einer Zeile, Bedeutung darunter über
   die volle Breite. Dreispaltig bliebe für die Bedeutung zu wenig. */
.regelkasten__stufen { display: flex; flex-direction: column; gap: 1px; background: var(--sef-linie); }
.regelkasten__stufen > div { padding: 0.7rem 0.9rem; background: var(--sef-grund); }
.regelkasten__stufen dt {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
}
.regelkasten__stufen dt .folge {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sef-blau);
}
.regelkasten__stufen dd {
  margin: 0.25rem 0 0;
  max-width: 58ch;
  font-size: 0.94rem;
  line-height: 1.65;
}

.regelkasten .auslassung { font-family: ui-monospace, Menlo, monospace; color: var(--sef-text-leise); }

/* Anmerkung der Redaktion — eigene Stimme, klar getrennt vom Zitat */
.anmerkung {
  padding: 0.85rem 1rem;
  background: var(--sef-flaeche);
  border-left: 3px solid var(--sef-ocker);
}
.anmerkung__marke {
  display: block;
  margin-bottom: 0.35rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sef-ocker);
}
.anmerkung p { max-width: 60ch; margin: 0; font-size: 0.94rem; line-height: 1.7; }

.regelkasten .quelle,
figcaption { font-family: ui-monospace, Menlo, monospace; font-size: 0.68rem; color: var(--sef-text-leise); }

/* --- Schlagworte am FUSS des Beitrags ------------------------ */

.tags { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--sef-linie); }
.tags__marke {
  display: block;
  margin-bottom: 0.55rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sef-text-leise);
}
.tags-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.tags-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 0.7rem;
  font-size: 0.88rem;
  color: var(--sef-text);
  background: var(--sef-flaeche);
  border: 1px solid var(--sef-linie);
  text-decoration: none;
}
.tags-list a:hover { border-color: var(--sef-akzent); color: var(--sef-akzent); }

/* --- Blätterung ---------------------------------------------- */

.pagenav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--sef-linie);
}
.pagenav a { max-width: 46%; font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.pagenav__nach { text-align: right; }
.pagenav span {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--sef-text-leise);
}

/* --- Kennzeichnung, Brotkrume, Einleitung -------------------- */

.kennzeichen {
  display: block;
  margin-bottom: 0.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sef-ocker);
}
.breadcrumb { font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; color: var(--sef-text-leise); }
.einleitung { max-width: 60ch; font-size: 1.05rem; line-height: 1.75; }

/* --- Übersicht: alle Beiträge nach Jahr ---------------------- */

.uebersicht__suche input {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0 0.85rem;
  font: inherit;
  background: var(--sef-flaeche);
  border: 1px solid var(--sef-linie);
  color: var(--sef-text);
}
.uebersicht__suche label { position: absolute; left: -9999px; }
.uebersicht__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.6rem; }
.filter {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 0.95rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--sef-text);
  background: var(--sef-flaeche);
  border: 1px solid #c9c2b5;
}
.filter--an { background: var(--sef-akzent); border-color: var(--sef-akzent); color: #fff; }

.uebersicht__jahr + .uebersicht__jahr { margin-top: 1.9rem; }
.uebersicht__jahr h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #c9c2b5;
  font-size: 1.4rem;
}
.uebersicht__jahr h2 span {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sef-text-leise);
}
.uebersicht__liste { margin: 0; padding: 0; list-style: none; }
.uebersicht__zeile a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--sef-linie);
  text-decoration: none;
  color: var(--sef-text);
}
.uebersicht__zeile a:hover { background: var(--sef-kreide); color: var(--sef-akzent); }
.uebersicht__zeile .datum {
  flex: none;
  width: 62px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--sef-text-leise);
}
.uebersicht__zeile .titel { flex: 1; line-height: 1.45; }
.uebersicht__zeile .kat { font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; }
.kat--blog { color: var(--sef-akzent); }
.kat--glossar { color: var(--sef-blau); }
.kat--kabine { color: var(--sef-ocker); }

/* --- Kabine: gesperrte Einträge und Schließfach -------------- */

.gesperrt { margin: 1.4rem 0; padding: 0; list-style: none; }
.gesperrt li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.4rem;
  background: var(--sef-kreide);
  color: var(--sef-text-leise);
}
.gesperrt .sef-status { order: 2; margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; }

.schliessfach {
  max-width: 520px;
  margin-top: 2.2rem;
  padding: 1.6rem;
  background: var(--sef-flaeche);
  border: 1px solid var(--sef-linie);
  border-top: 4px solid var(--sef-akzent);
}
.schliessfach h2 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.schliessfach__zusatz { margin: 0 0 1.2rem; font-size: 0.95rem; line-height: 1.6; color: var(--sef-text-leise); }
.schliessfach .feld { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; }
.schliessfach label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sef-text-leise);
}
.schliessfach input[type="text"],
.schliessfach input[type="password"] {
  min-height: 46px;
  padding: 0 0.85rem;
  font: inherit;
  background: var(--sef-grund);
  border: 1px solid #c9c2b5;
  color: var(--sef-text);
}
.schliessfach .feld--haken { flex-direction: row; align-items: center; gap: 0.6rem; }
.schliessfach .feld--haken label { font-family: inherit; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--sef-text); }
.schliessfach__aktion { display: flex; align-items: center; gap: 1.1rem; margin: 0; }

/* --- Slider-Folie (Smart Slider liefert die Struktur) -------- */

.container-slider { background: var(--sef-flaeche); border-bottom: 1px solid var(--sef-linie); }
.folie {
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  max-width: 1080px;
  margin-inline: auto;
  background: repeating-linear-gradient(135deg, #e4e0d6 0 14px, #ebe7e0 14px 28px);
}
.folie__text {
  max-width: 600px;
  margin: 1.5rem;
  padding: 1.6rem 1.9rem;
  background: rgba(245, 243, 239, 0.94);
  border-left: 4px solid var(--sef-akzent);
}
.folie__text h2 { margin: 0 0 0.6rem; font-size: 2.3rem; font-weight: 700; }
.folie__text p { margin: 0 0 1rem; font-size: 1.12rem; line-height: 1.6; }

@media (max-width: 40rem) {
  .folie { min-height: 240px; }
  .folie__text { margin: 0.75rem; padding: 0.9rem 1rem; }
  .folie__text h2 { font-size: 1.5rem; }
  .regelkasten { max-width: 100%; }
  .pagenav { flex-direction: column; }
  .pagenav a, .pagenav__nach { max-width: 100%; text-align: left; }
}

/* ============================================================
   Ergaenzung — Sprueche-Slider
   Smart Slider bringt seine Gestaltung fuer Fotofolien mit:
   weisse Schrift, dunkler Balken hinter der Ueberschrift,
   absolut gesetzte Ebenen. Auf der hellen Textkarte passt
   davon nichts. Aus der eigenen Fassung uebernommen.
   ============================================================ */
#n2-ss-2 .n2-ss-item-image-content { display: none !important; }
#n2-ss-2 .n2-ss-layer-with-background {
  --n2bggradient: none !important;
  background: var(--sef-flaeche) !important;
  border: 1px solid var(--sef-linie) !important;
  border-radius: 10px !important;
  padding: 2rem 2.25rem !important;
}
#n2-ss-2 h1, #n2-ss-2 h2, #n2-ss-2 h3,
#n2-ss-2 p, #n2-ss-2 .n2-ss-item-content {
  color: var(--sef-text) !important;
  font-family: "Source Sans 3", system-ui, sans-serif !important;
  text-shadow: none !important;
}
#n2-ss-2 h2 {
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
#n2-ss-2 p {
  color: var(--sef-text-leise) !important;
  line-height: 1.6 !important;
}
#n2-ss-2 div.n2-ss-text::after {
  content: "Dazu der Artikel \2192";
  display: inline-block;
  margin-top: 1.1rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--sef-akzent);
  color: #fff;
  font: 600 .95rem/1 "Source Sans 3", system-ui, sans-serif;
}
#n2-ss-2 .n2-ss-slide:hover div.n2-ss-text::after { background: var(--sef-kontakt); }
#n2-ss-2 h2,
#n2-ss-2 [class*="-heading"] {
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
#n2-ss-2 .n2-ss-layer-with-background {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: .55rem !important;
  padding: 1.7rem 2.2rem !important;
}
#n2-ss-2 .n2-ss-layer[data-sstype="layer"] {
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#n2-ss-2 div.n2-ss-text,
#n2-ss-2 div.n2-ss-text > div,
#n2-ss-2 h2 { text-align: left !important; }
#n2-ss-2 div.n2-ss-text > div { max-width: 62ch; }
#n2-ss-2 h2 { display: block !important; }
/* ============================================================
   Ergaenzung — Verweise in den Karten der Seitenspalte
   Das Grundgeruest gestaltet `.card` und `.card h3`, nicht aber
   die Verweise mit ihrer Erklaerzeile.
   ============================================================ */
.card a:not(.btn) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid var(--sef-kreide);
  font-size: 17px;
  font-weight: 600;
  color: var(--sef-akzent);
  text-decoration: none;
}
.card a:not(.btn):hover { color: var(--sef-kontakt); }
.card a:not(.btn) span {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sef-text-leise);
}
.card--kreide a:not(.btn) { display: inline; padding: 0; border: 0; }
.card--kreide p { margin: 0; font-size: 15px; line-height: 1.7; }
.card--kreide strong { font-size: 19px; color: var(--sef-ocker); }

/* ============================================================
   Korrekturen an der gelieferten Fassung
   ============================================================ */

/* Sie begrenzt Kopf, Inhalt und Fuss auf --sef-breite, zentriert sie
   aber nie — dadurch klebt die ganze Seite am linken Rand. Bei uns
   ist `.container-header` das volle Band; die Breite traegt das
   Kind `.grid-child`, das schon zentriert ist. */
.container-header,
.container-top-a,
.container-bottom-a,
.container-component { max-width: none; }
.container-footer > .grid-child { max-width: var(--sef-breite); margin-inline: auto; }

/* Der Slider ist bei uns Smart Slider, nicht die Beispielfolie `.folie`.
   Er braucht dieselbe Begrenzung wie der uebrige Inhalt. */
.container-slider .n2-section-smartslider {
  max-width: var(--sef-breite);
  margin-inline: auto;
}

/* Joomla gibt die Brotkrume als nummerierte Liste aus. */
ol.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
ol.breadcrumb li { display: flex; gap: .45rem; }

/* Die Unterstreichung ist fuer Verweise im Fliesstext gedacht; sie
   erwischt aber auch die Ueberschrift des Beitrags. */
.item-title a { text-decoration: none; }
.item-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Sprueche-Slider — eigenes Modul statt Smart Slider
   Die Gestaltung der Folie selbst steht weiter oben in der
   gelieferten Fassung (.folie, .folie__text). Hier nur das
   Weiterschalten.
   ============================================================ */
.sef-slider { position: relative; }
.sef-slider .folie {
  display: none;
  background-size: cover;
  background-position: center;
}
.sef-slider .folie.is-an { display: flex; }

.sef-slider__punkte {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding: .9rem 0 0;
}
.sef-slider__punkt {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--sef-akzent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.sef-slider__punkt.is-an { background: var(--sef-akzent); }
.sef-slider__punkt:hover { border-color: var(--sef-kontakt); }

/* ============================================================
   Ansicht 06 — Statusstreifen und Werkbank
   ============================================================ */
.statusstreifen {
  background: var(--sef-kreide);
  border-bottom: 1px solid var(--sef-linie);
  font-size: .92rem;
}
.statusstreifen .grid-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: .5rem;
}
.statusstreifen__aktion { display: flex; align-items: center; gap: 1.1rem; }
.statusstreifen__aktion form { margin: 0; }
.statusstreifen__aktion button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sef-akzent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.statusstreifen__aktion button:hover { color: var(--sef-kontakt); }

.werkbank__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.werkbank__hinweis {
  margin: .4rem 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .72rem;
  color: var(--sef-text-leise);
}

/* ============================================================
   Ansicht 07 — Redaktion
   ============================================================ */
.redaktion__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.redaktion__tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.redaktion__tabelle th {
  padding: .55rem .6rem;
  border-bottom: 2px solid var(--sef-linie);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--sef-text-leise);
}
.redaktion__tabelle td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--sef-linie);
  vertical-align: top;
}
.redaktion__titel { max-width: 34ch; }
.redaktion__zeile[hidden] { display: none; }
.redaktion__tabelle tr:hover td { background: var(--sef-kreide); }

/* Die Redaktion braucht mehr Platz als der Lesetext. */
.redaktion { max-width: 1240px; }

/* ============================================================
   Joomlas Bearbeitungsschicht im Frontend
   Sichtbar nur fuer Angemeldete mit Bearbeitungsrecht. Joomla
   schiebt neben jedes Modul einen Stift UND einen Erklaerkasten.
   Ohne diese Regeln steht der Kasten als Fliesstext mitten auf
   der Seite und zerreisst das Layout.
   ============================================================ */

/* Der Stift: klein, zurueckhaltend, erst bei Mauskontakt kraeftig. */
.jmodedit,
.jmenuedit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--sef-akzent);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
  opacity: .3;
  transition: opacity .15s ease;
}
.jmodedit:hover, .jmodedit:focus-visible,
.jmenuedit:hover, .jmenuedit:focus-visible {
  opacity: 1;
  background: var(--sef-kontakt);
  color: #ffffff;
}

/* Der Erklaerkasten bleibt fuer Vorlesesoftware erhalten
   (er haengt per aria-describedby am Stift), verschwindet aber
   aus dem Sichtfeld. */
[role="tooltip"][id^="tip-"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Das Symbol der Bearbeitungsschicht kommt aus der Icon-Schrift und
   blieb leer. Eigenes Zeichen, unabhaengig von jeder Schriftdatei. */
.jmodedit .icon-edit,
.jmenuedit .icon-edit { display: none; }
.jmodedit::before,
.jmenuedit::before {
  content: "\270E";
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
}

/* Joomlas mod_custom-Huelle spannt sonst ueber die volle Fensterbreite —
   der Stift landete dadurch am aeussersten linken Seitenrand. */
.container-slider .mod-custom {
  max-width: var(--sef-breite);
  margin-inline: auto;
  position: relative;
}

/* Die Unterstreichung der Beitragsverweise erwischt auch die Knoepfe. */
.readmore .btn,
.com-content-category-blog__item .btn { text-decoration: none; }

/* Die Bearbeitungsstifte sollen keinen Platz im Fluss beanspruchen. */
.card > .jmodedit,
.container-nav .jmodedit,
.mod-breadcrumbs__wrapper > .jmodedit { float: right; margin-left: .4rem; }

/* Schalter fuer die Bearbeitungsstifte, oben rechts im Statusstreifen. */
.statusstreifen__schalter {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sef-akzent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.statusstreifen__schalter:hover { color: var(--sef-kontakt); }
.statusstreifen__schalter[aria-pressed="true"] { color: var(--sef-text-leise); }

html.stifte-aus .jmodedit,
html.stifte-aus .jmenuedit { display: none !important; }

/* ============================================================
   Joomlas Benutzerprofil — ungestaltet, seit das Template
   eigenstaendig ist. Erscheint beim Klick auf den eigenen Namen.
   ============================================================ */
.com-users-profile__edit {
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.com-users-profile fieldset { border: 0; margin: 0 0 1.8rem; padding: 0; }
.com-users-profile legend {
  padding: 0 0 .5rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sef-text-leise);
  border-bottom: 1px solid var(--sef-linie);
  width: 100%;
}
.com-users-profile dl {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr;
  gap: .3rem 1.4rem;
  margin: .8rem 0 0;
}
.com-users-profile dt { margin: 0; font-weight: 600; }
.com-users-profile dd { margin: 0; color: var(--sef-text-leise); }
@media (max-width: 600px) {
  .com-users-profile dl { grid-template-columns: 1fr; }
  .com-users-profile dd { margin-bottom: .6rem; }
}

/* Der Nebenknopf steht im Grundgeruest vor der Farbregel fuer .btn und
   wurde davon ueberschrieben. Hier wieder hergestellt. */
.btn--zweit {
  background: transparent;
  color: var(--sef-text);
  border: 1px solid #c9c2b5;
}
.btn--zweit:hover {
  background: transparent;
  border-color: var(--sef-akzent);
  color: var(--sef-akzent);
}

/* ============================================================
   Videoreihe auf der Startseite — Ansicht 01
   Standbild plus Abspieltaste; das Video laedt erst auf Klick.
   ============================================================ */
.videoreihe { margin-top: 3rem; }
.videoreihe h2 { margin: 0 0 .3rem; }
.videoreihe__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.videoreihe__stueck { margin: 0; }

.videoreihe__start {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.videoreihe__start img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sef-linie);
}
.videoreihe__taste {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.videoreihe__taste::before {
  content: "\25B6";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(23, 85, 58, .85);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
}
.videoreihe__start:hover .videoreihe__taste::before,
.videoreihe__start:focus-visible .videoreihe__taste::before {
  background: var(--sef-kontakt);
}

.videoreihe__video { width: 100%; height: auto; background: #000; }

.videoreihe figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .5rem;
  font-size: .92rem;
  line-height: 1.35;
}
.videoreihe__masse {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--sef-text-leise);
}

@media (max-width: 760px) {
  .videoreihe__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .videoreihe__raster { grid-template-columns: 1fr; }
}

/* Bildunterschrift der Videokacheln: Titel, Beitrag, Masse. */
.videoreihe__titel { font-weight: 600; }
.videoreihe__artikel {
  color: var(--sef-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.videoreihe__artikel:hover { color: var(--sef-kontakt); }