/* ============================================================
SIGGI2026 — eigenständiges Template, kein Kindtemplate.
Dieses Blatt bringt ALLES mit: Grundgerüst, Raster, Kopf,
Blattfuß, Typografie, Farben, Bausteine. Es wird kein
Cassiopeia-Stil geladen.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
left: 1rem; top: 1rem; z-index: 20;
padding: 0.6rem 1rem;
background: var(--sef-akzent);
color: #fff;
}
/* Rasenstreifen über dem Kopf — der einzige Zierzug */
.rasenstreifen { height: 6px; background: var(--sef-akzent); }
/* Container und Raster */
.grid-child {
max-width: var(--sef-breite);
margin-inline: auto;
padding-inline: 1.5rem;
}
.site-grid {
display: grid;
gap: 2.75rem;
max-width: var(--sef-breite);
margin-inline: auto;
padding: 2.5rem 1.5rem 3rem;
}
.site-grid.mit-spalte { grid-template-columns: 1fr 300px; }
.site-grid.ohne-spalte { max-width: 800px; }
.container-component { min-width: 0; }
/* Kopf */
.container-header { background: var(--sef-flaeche); border-bottom: 1px solid var(--sef-linie); }
.container-header .grid-child {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding-block: 1.6rem 0;
}
.wortmarke a { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; }
.wortmarke__name {
font-family: var(--sef-schrift-titel);
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sef-text);
}
.wortmarke__zusatz {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sef-akzent);
}
.container-nav { width: 100%; }
.metismenu.mod-menu {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.metismenu.mod-menu > li > a { display: inline-block; text-decoration: none; }
/* Karten in der Seitenspalte */
.card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.25rem;
background: var(--sef-flaeche);
border: 1px solid var(--sef-linie);
}
.card + .card { margin-top: 1.4rem; }
.card h3 { margin: 0; font-size: 1.05rem; }
.card--kreide { background: var(--sef-kreide); border: 0; }
/* Beitragsliste */
.blog-item { padding-bottom: 1.8rem; border-bottom: 1px solid var(--sef-linie); }
.blog-item + .blog-item { margin-top: 1.9rem; }
.blog-item h2, .blog-item h3 { margin: 0 0 0.5rem; }
/* Knöpfe */
.btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 1.15rem;
font-family: var(--sef-schrift-titel);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn--zweit { background: transparent; color: var(--sef-text); border: 1px solid #c9c2b5; }
.btn--zweit:hover { border-color: var(--sef-akzent); color: var(--sef-akzent); }
/* Blattfuß */
.container-footer { margin-top: 3rem; }
.container-footer .grid-child {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1.4rem;
}
.fuss-links { display: flex; gap: 1.1rem; }
@media (max-width: 47.99rem) {
.site-grid.mit-spalte { grid-template-columns: 1fr; }
}
/* ============================================================
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: var(--sef-spalte); /* 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: var(--sef-spalte); }
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: var(--sef-spalte);
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-nebenspalte, .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: var(--sef-spalte);
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: var(--sef-spalte);
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: var(--sef-spalte);
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: 100%; font-size: 1rem; line-height: 1.72; }
/* Aufzählung EINSPALTIG — zweispaltig brechen die längeren
Vergehen dreizeilig um. */
.regelkasten__liste { max-width: 100%; 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: 100%;
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: 100%; 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: var(--sef-spalte); 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;
/* Hoehe am Schreibtisch ist einstellbar (320/420/520).
buehne.php setzt --sef-folienhoehe an der Buehne; ohne
Angabe gilt 420. Am Telefon nicht einstellbar: 240,
siehe die Regel weiter unten. */
min-height: var(--sef-folienhoehe, 420px);
max-width: var(--sef-rahmen);
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; }
}
/* ============================================================
Klassen, die index.php und die Overrides ausgeben.
Werte aus dem Entwurf, siehe MASSTABELLE.md.
============================================================ */
/* --- Inhaltsbreite als Parameter ----------------------------- */
body.breite-1080 { --sef-breite: 1080px; }
body.breite-fluid { --sef-breite: 100%; }
/* --- Suchfeld im Kopf ---------------------------------------- */
.container-search { display: flex; align-items: center; }
.container-search input[type="search"],
.container-search input[type="text"] {
min-height: 40px;
min-width: 200px;
padding: 0 0.85rem;
font: inherit;
font-size: 0.95rem;
color: var(--sef-text);
background: var(--sef-grund);
border: 1px solid var(--sef-linie);
}
.container-search input::placeholder {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.78rem;
color: var(--sef-text-leise);
}
.container-search button { display: none; } /* Eingabetaste genügt */
/* --- Klapptaste fürs Telefon --------------------------------- */
.menue-taste {
display: none; /* am Schreibtisch nicht nötig */
align-items: center;
gap: 0.6rem;
min-height: 44px;
padding: 0 0.7rem;
font-family: var(--sef-schrift-titel);
font-size: 1rem;
font-weight: 600;
color: var(--sef-akzent);
background: transparent;
border: 1px solid var(--sef-linie);
cursor: pointer;
}
.menue-taste__striche,
.menue-taste__striche::before,
.menue-taste__striche::after {
display: block;
width: 20px;
height: 2px;
background: var(--sef-akzent);
}
.menue-taste__striche { position: relative; }
.menue-taste__striche::before,
.menue-taste__striche::after { content: ""; position: absolute; left: 0; }
.menue-taste__striche::before { top: -6px; }
.menue-taste__striche::after { top: 6px; }
@media (max-width: 47.99rem) {
.menue-taste { display: inline-flex; }
.container-nav { display: none; width: 100%; }
.container-nav.offen { display: block; }
.metismenu.mod-menu { flex-direction: column; gap: 0; }
.metismenu.mod-menu > li > a { min-height: 46px; display: flex; align-items: center; border-bottom: 1px solid var(--sef-linie); }
.container-search { order: 3; width: 100%; }
.container-search input { width: 100%; }
}
/* --- Statusstreifen für Angemeldete (Ansicht 06) ------------- */
.statusstreifen {
background: var(--sef-kreide);
border-bottom: 1px solid var(--sef-linie);
font-size: 0.95rem;
}
.statusstreifen .grid-child {
display: flex;
align-items: center;
gap: 0.9rem;
padding-block: 0.6rem;
}
.statusstreifen__punkt {
width: 10px; height: 10px; border-radius: 50%;
background: var(--sef-frei);
}
.statusstreifen__abmelden {
margin-left: auto;
font-family: ui-monospace, Menlo, monospace;
font-size: 0.75rem;
}
/* --- Werkbank (Ansicht 06) ----------------------------------- */
.werkbank {
display: flex;
flex-direction: column;
gap: 0.95rem;
padding: 1.4rem;
background: var(--sef-flaeche);
border: 1px solid var(--sef-linie);
}
.werkbank__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.werkbank__kopf h2 { margin: 0; font-size: 1.25rem; }
.werkbank__stand { font-family: ui-monospace, Menlo, monospace; font-size: 0.69rem; color: var(--sef-text-leise); }
.werkbank__tasten { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.werkbank__zuletzt { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--sef-kreide); }
.werkbank__zuletzt > span {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sef-text-leise);
}
.werkbank__zeile {
display: flex;
align-items: baseline;
gap: 0.9rem;
padding: 0.45rem 0;
border-bottom: 1px solid var(--sef-kreide);
text-decoration: none;
}
.werkbank__zeile .datum { flex: none; width: 74px; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; color: var(--sef-text-leise); }
.werkbank__zeile .titel { flex: 1; color: var(--sef-text); }
/* --- Redaktion (Ansicht 07) ---------------------------------- */
.redaktion { max-width: 1240px; margin-inline: auto; }
.redaktion__reiter { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--sef-linie); }
.redaktion__reiter a {
padding: 0.8rem 1.1rem;
font-family: var(--sef-schrift-titel);
font-weight: 600;
text-decoration: none;
color: var(--sef-text-leise);
border-bottom: 2px solid transparent;
}
.redaktion__reiter a[aria-current="page"] { color: var(--sef-akzent); border-bottom-color: var(--sef-akzent); }
.redaktion__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.1rem 0; }
.redaktion__auswahl {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--sef-kreide);
border-left: 3px solid var(--sef-akzent);
}
/* Aktionsspalte mindestens 186px — darunter überlappen die Knöpfe
die Zugriffszahl. */
.redaktion__tabelle { display: flex; flex-direction: column; background: var(--sef-flaeche); border: 1px solid var(--sef-linie); }
.redaktion__kopfzeile,
.redaktion__zeile {
display: grid;
grid-template-columns: 34px 52px 1fr 116px 108px 96px 186px;
gap: 12px;
align-items: center;
padding: 0.7rem 0.75rem;
}
.redaktion__kopfzeile {
background: var(--sef-kreide);
border-bottom: 1px solid var(--sef-linie);
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sef-text-leise);
}
.redaktion__zeile { border-bottom: 1px solid var(--sef-kreide); }
.redaktion__zeile:hover { background: var(--sef-grund); }
.redaktion__zeile .titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redaktion__zeile .zugriffe,
.redaktion__kopfzeile .zugriffe { text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; }
.redaktion__zeile .aktion,
.redaktion__kopfzeile .aktion { display: flex; justify-content: flex-end; gap: 0.5rem; }
.redaktion__zeile .aktion a { padding: 0.35rem 0.7rem; font-size: 0.88rem; font-weight: 600; border: 1px solid var(--sef-akzent); text-decoration: none; }
.redaktion__zeile .aktion a.ansehen { border-color: #c9c2b5; color: var(--sef-text-leise); font-weight: 400; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.kennzahl {
display: flex; flex-direction: column; gap: 0.3rem;
width: 288px; padding: 1.1rem;
background: var(--sef-flaeche); border: 1px solid var(--sef-linie);
}
.kennzahl__was {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--sef-akzent);
}
.kennzahl__wert { font-family: var(--sef-schrift-titel); font-size: 1.75rem; font-weight: 700; }
.kennzahl__dazu { font-size: 0.88rem; line-height: 1.55; color: var(--sef-text-leise); }
/* Balken: Breite kommt als style="--anteil: 72%" aus dem Override */
.balken { height: 7px; background: var(--sef-kreide); }
.balken__wert { height: 7px; width: var(--anteil, 0%); background: var(--sef-akzent); }
.balken--glossar .balken__wert { background: var(--sef-blau); }
.balken--kabine .balken__wert { background: var(--sef-ocker); }
.saeulen { display: flex; align-items: flex-end; gap: 0.6rem; height: 120px; }
.saeule { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; }
.saeule__wert { width: 100%; height: var(--hoehe, 0); background: var(--sef-akzent); }
.saeule__jahr,
.saeule__anzahl { font-family: ui-monospace, Menlo, monospace; font-size: 0.69rem; color: var(--sef-text-leise); }
/* --- Videoreihe (Ansicht 01) --------------------------------- */
.videoreihe { display: flex; flex-direction: column; gap: 0.85rem; }
.videoreihe > h3 { margin: 0; font-size: 1.25rem; }
.videoreihe__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.videokachel { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; }
.videokachel__bild { position: relative; aspect-ratio: 16 / 9; background: var(--sef-kreide); overflow: hidden; }
.videokachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Abspieltaste: Dreieck aus Rändern, kein Bild, kein SVG */
.videokachel__bild::after {
content: "";
position: absolute; left: 50%; top: 50%;
width: 0; height: 0;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
filter: drop-shadow(0 0 3px rgba(0,0,0,0.55));
}
.videokachel:hover .videokachel__bild::after { border-left-color: var(--sef-kontakt); }
.videokachel__titel { font-size: 0.95rem; line-height: 1.45; color: var(--sef-text); }
.videokachel__dauer { font-family: ui-monospace, Menlo, monospace; font-size: 0.69rem; color: var(--sef-text-leise); }
.videoreihe__hinweis { font-family: ui-monospace, Menlo, monospace; font-size: 0.69rem; line-height: 1.6; color: var(--sef-text-leise); }
/* --- Karte "Einstiege" (Ansicht 01) -------------------------- */
.einstiege a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0; text-decoration: none; }
.einstiege a + a { border-top: 1px solid var(--sef-kreide); }
.einstiege a strong { font-size: 1.05rem; font-weight: 600; color: var(--sef-akzent); }
.einstiege a span { font-size: 0.88rem; line-height: 1.55; color: var(--sef-text-leise); }
/* --- Fehlerseite und Suche ---------------------------------- */
.fehlerseite { max-width: var(--sef-spalte); }
.fehlerseite h1 { font-size: 2rem; max-width: 480px; }
.fehlerseite__nummer {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sef-ocker);
}
.suche__treffer { margin: 1.4rem 0 0; padding: 0; list-style: none; }
.suche__leer { padding: 1.1rem; background: var(--sef-kreide); max-width: var(--sef-spalte); }
@media (max-width: 47.99rem) {
.videoreihe__liste { grid-template-columns: 1fr; }
.redaktion__kopfzeile { display: none; }
.redaktion__zeile { grid-template-columns: 24px 1fr; row-gap: 0.3rem; }
.redaktion__zeile .kategorie,
.redaktion__zeile .datum,
.redaktion__zeile .zugriffe { grid-column: 2; text-align: left; }
.redaktion__zeile .aktion { grid-column: 2; justify-content: flex-start; }
.kennzahl { width: 100%; }
}
/* ============================================================
MASSSYSTEM 640 — die sechs Korrekturen aus MASSE-640.md
Eingesetzt am 27.08.2026, vom Betreiber als entschieden benannt.
Ein Mass: 640. Die Bilder unter images/Blog-Bilder_640x360/ sind
640 px breit; jede breitere Spalte laesst das Bild schmaler stehen
als den Text. Also wird die Spalte an das Bild angepasst.
Textspalte 640 · Seitenspalte 300 · Luecke 44
Inhalt 984 (640+44+300) · Seite 1028 (984 + 2 x 22 Rand)
============================================================ */
/* --- 1. Masse als Zahlen, nicht als Zeichenmass --------------
`ch` haengt an der Schrift: Source Sans und Helvetica ergeben
fuer dasselbe Zeichenmass verschiedene Breiten — deshalb sassen Titel und Absatz
nicht auf einer Linie. `px` haengt an nichts. */
:root {
--sef-rahmen: 984px;
--sef-spalte: 640px;
--sef-seitenspalte: 300px;
--sef-luecke: 44px;
--sef-rand: 22px;
/* Der alte Name wird an mehreren Stellen der user.css benutzt.
Er zeigt jetzt auf den Rahmen, damit nichts ins Leere laeuft. */
--sef-breite: var(--sef-rahmen);
}
/* --- 2. Der Lesedeckel gilt nur auf der Leseseite -------------
Vorher stand der Lesedeckel auch auf `.item-content p` — also
in der Blogliste, deren Spalte ohnehin schon 640 breit ist. */
.com-content-article__body,
.com-content-article__body p,
.com-content-category-blog__item .item-content p,
.blog-item .intro p {
max-width: none;
}
.item-page .com-content-article__body,
.com-content-article.item-page .com-content-article__body {
max-width: var(--sef-spalte);
}
/* --- 3. Das Raster kommt aus den Zahlen -----------------------
`1fr` nahm, was uebrig war — das waren 736. Feste 640 statt `1fr`.
Ohne `content-box` frisst der Rand die Luecke und die Seitenspalte
ragt um genau 44 px rechts heraus. */
.site-grid {
max-width: var(--sef-rahmen);
margin-inline: auto;
padding-inline: var(--sef-rand);
box-sizing: content-box;
}
.site-grid.mit-spalte {
display: grid;
grid-template-columns: var(--sef-spalte) var(--sef-seitenspalte);
gap: var(--sef-luecke);
}
.site-grid.ohne-spalte,
.site-grid:not(.mit-spalte) {
max-width: var(--sef-rahmen);
padding-inline: var(--sef-rand);
}
.site-grid:not(.mit-spalte) > .container-component {
width: var(--sef-spalte);
margin-inline: auto;
}
/* Kopf, Fuss und Slider laufen auf JEDER Seite ueber die ganzen 984.
Wechselt die Kopfbreite zwischen zwei Seiten, ist etwas falsch. */
.grid-child,
.container-header .grid-child,
.container-footer > .grid-child,
.container-top-a,
.container-bottom-a {
max-width: var(--sef-rahmen);
margin-inline: auto;
padding-inline: var(--sef-rand);
box-sizing: content-box;
}
/* --- 4. Bilder ohne eigene Breitenangaben ---------------------
`figure { margin: 0 auto }` zentrierte das 640er Bild in der
736er Spalte — das waren die gemeldeten 48 px Versatz links. */
figure { margin-inline: 0; }
figure img { width: 100%; height: auto; display: block; }
/* --- 5. Kopfhoehen gesetzt, nicht summiert --------------------
Vorher summierten sich Innenabstaende in `rem` auf zwei Zeilen
zu rund 180 px, wo 112 gemeint waren. Feste Hoehen sind hier
richtig, weil der Inhalt feststeht: eine Zeile Wortmarke, eine
Zeile Menue.
MASSE-640.md nennt die Klasse `.kopf__marke`. Dieses Template
nennt sie `.wortmarke` — gemeldet, hier auf den vorhandenen
Namen angewandt. */
.wortmarke { height: 72px; }
.container-nav { height: 40px; }
/* 72 + 40 = 112 geht nur ohne senkrechten Innenabstand und ohne
Zeilenabstand am Kopfkind. Gemessen waren dort 25,6 px Polster
oben und 16 px Zeilenabstand — zusammen die 49 px, um die der
Kopf zu hoch stand. Der seitliche Innenabstand (22 px) bleibt,
der traegt Korrektur 3. */
.container-header .grid-child {
padding-block: 0;
row-gap: 0;
}
.metismenu > li > a,
.metismenu.mod-menu > li > a {
display: flex;
align-items: center;
height: 100%;
}
/* --- 6. Am Telefon faellt das Raster, nicht das Mass ----------
Der Umbruch gehoert bei 1024, nicht bei 768: bei 984 Inhalt plus
Rand ist vorher schon kein Platz fuer zwei Spalten. Bei 375 px
bleiben 339 px Text. Die Grundschrift bleibt 17 px. */
@media (max-width: 63.99rem) {
:root { --sef-spalte: 100%; --sef-rand: 18px; }
.site-grid.mit-spalte { grid-template-columns: 1fr; }
.site-grid:not(.mit-spalte) > .container-component { width: 100%; }
/* Das Polster von 1,1 rem an der Inhaltsspalte nahm noch einmal
35 px — damit blieben 289 px Text statt der 339 aus MASSE-640.
Den Rand traegt am Telefon allein `--sef-rand` (18 px). */
.container-component { padding-inline: 0; }
.wortmarke { height: auto; }
.container-nav { height: auto; }
}
/* ============================================================
AUS ergaenzung.css UEBERNOMMEN — 27.08.2026
Bis hierher stand der Inhalt in einer zweiten Datei, die nach
user.css geladen wurde. Der Betreiber hat am 27.08.2026 die
Aufloesung freigegeben: eine Datei, ein Ort.
Die Reihenfolge ist unveraendert — dieser Block steht am Ende,
also genau dort, wo die zweite Datei gewirkt hat. Die Kopie
liegt als ergaenzung.css.vor-aufloesung daneben.
============================================================ */
/* ============================================================
Ergaenzungen zur gelieferten user.css
Die gelieferte Fassung bleibt unangetastet. Hier steht nur, was
sie nicht abdeckt — mit Begruendung, damit es beim naechsten
Buendel leicht zu ersetzen ist.
============================================================ */
/* ------------------------------------------------------------
1. Slider: Umschalten und Punkte
user.css gestaltet EINE Folie (.folie, .folie__text), nicht das
Wechseln. Ohne JavaScript steht die erste Folie, die Punkte sind
Sprungmarken — so verlangt es Abschnitt 7.
------------------------------------------------------------ */
.sef-slider__buehne { position: relative; }
/* Sichtbarkeit ueber `hidden`, nicht ueber eine Klasse — das ist das
Modell, das slider.js aus dem Buendel bedient. Die Klasse `.is-an`
bleibt als Merkmal der ersten Folie stehen, steuert aber nichts mehr.
Ohne JavaScript steht genau die erste Folie: die uebrigen tragen
`hidden` schon in der Auszeichnung. */
.sef-slider .folie { display: flex; }
.sef-slider__punkte {
display: flex;
gap: .5rem;
justify-content: center;
padding: .9rem 0;
background: var(--sef-flaeche);
}
.sef-slider__punkt {
width: 12px;
height: 12px;
border: 1px solid var(--sef-akzent);
border-radius: 50%;
background: transparent;
text-decoration: none;
}
.sef-slider__punkt.is-an { background: var(--sef-akzent); }
.sef-slider__punkt:hover { border-color: var(--sef-kontakt); background: var(--sef-kontakt); }
.sef-slider__punkt:focus-visible { outline: 3px solid var(--sef-akzent); outline-offset: 3px; }
/* ------------------------------------------------------------
2. Joomlas Bearbeitungsschicht
Erscheint nur fuer Angemeldete mit Bearbeitungsrecht. Joomla
schiebt neben jedes Modul einen Stift und einen Erklaerkasten;
der Kasten stuende sonst als Fliesstext mitten im Layout.
------------------------------------------------------------ */
.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;
}
.jmodedit:hover, .jmenuedit:hover { opacity: 1; background: var(--sef-kontakt); }
.jmodedit .icon-edit, .jmenuedit .icon-edit { display: none; }
.jmodedit::before, .jmenuedit::before { content: "\270E"; font-size: 13px; line-height: 1; }
[role="tooltip"][id^="tip-"] {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html.stifte-aus .jmodedit,
html.stifte-aus .jmenuedit { display: none !important; }
/* Schalter dafuer 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__abmelden form { margin: 0; }
.statusstreifen__abmelden button {
padding: 0; border: 0; background: none;
color: var(--sef-akzent); font: inherit;
text-decoration: underline; cursor: pointer;
}
/* ------------------------------------------------------------
3. Grundregeln, die der gelieferten user.css fehlen
Nachgemessen: visually-hidden, Formularfelder, Blaetterung,
Systemmeldungen und der Listenaufhebung fehlen darin ganz.
Ohne sie standen die Foliennamen sichtbar auf der Seite und die
Brotkrume als nummerierte Liste.
------------------------------------------------------------ */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Joomlas Modul- und Menuelisten */
.mod-list, .nav, .metismenu, ol.breadcrumb, .tags-list, .uebersicht__liste {
list-style: none;
margin: 0;
padding: 0;
}
ol.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
ol.breadcrumb li { display: flex; gap: .45rem; }
/* Formularfelder — vor allem das Suchfeld im Kopf */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea, .form-control {
width: 100%;
padding: .55rem .75rem;
background: var(--sef-flaeche);
border: 1px solid var(--sef-linie);
border-radius: 4px;
font: inherit;
color: inherit;
}
/* Die Beschriftung des Suchfelds ueberlappte das Feld. */
.container-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.container-search { max-width: 260px; }
/* Blaetterung und Systemmeldungen */
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.5rem 0 0; }
.page-link { display: block; padding: .4rem .7rem; border: 1px solid var(--sef-linie); text-decoration: none; }
.page-item.active .page-link { background: var(--sef-akzent); border-color: var(--sef-akzent); color: #fff; }
.page-item.disabled .page-link { opacity: .5; }
.alert {
padding: .9rem 1.1rem;
margin: 0 0 1.2rem;
background: var(--sef-kreide);
border: 1px solid var(--sef-linie);
border-left: 3px solid var(--sef-akzent);
}
.alert-danger, .alert-error { border-left-color: var(--sef-ocker); }
/* Abstandsklassen aus Joomlas eigenen Ausgaben */
.mb-4 { margin-bottom: 1.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.ms-0 { margin-left: 0; }
.float-start { float: left; }
/* ------------------------------------------------------------
4. Der Kopf ist ein Band ueber die volle Breite
Die gelieferte user.css begrenzt `.container-header` auf
--sef-breite, zentriert ihn aber nicht — dadurch endete das
weisse Band mitten im Fenster. Die Breite traegt das Kind
`.grid-child`, das bereits zentriert ist. Ansicht 01 zeigt den
Kopf als durchgehendes Band.
------------------------------------------------------------ */
.container-header { max-width: none; }
/* Die Unterstreichung ist fuer Verweise im Fliesstext gedacht; sie
erwischt in der gelieferten Fassung auch Ueberschriften und Knoepfe. */
.item-title a,
.com-content-category-blog__item .btn,
.readmore .btn { text-decoration: none; }
.item-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ============================================================
5. Masse nach MASSTABELLE.md
Entscheidung des Betreibers vom 26.08.2026: Bei Widerspruch
zwischen user.css und Maßtabelle gilt die Maßtabelle.
============================================================ */
/* Innenabstand des Rasters: 40 px, nicht 24.
Nur damit geht die Rechnung der Maßtabelle auf:
1080 − 40 − 40 − 300 − 44 = 656 ≈ 654 (Rahmenlinie). */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): Innenabstand 40 px — MASSE-640 nennt 22
.site-grid { padding-inline: 2.5rem; } */
/* Kopf auf 153 px. Zusammensetzung laut Maßtabelle:
26 oben · Wortmarke 57 · 20 Abstand · Menuezeile 50.
Gemessen waren es 177 — der Zeilenabstand des Namens betrug
48 px statt 33, und die Menuezeile 56 statt 50. */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): Kopf 153 px — MASSE-640 nennt 112 ueber feste Hoehen
.container-header .grid-child { row-gap: 20px; } */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): Kopfhoehe wird jetzt gesetzt, nicht summiert
.wortmarke__name { line-height: 1.2; } */ /* 27,2 px → 33 */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): dito
.wortmarke__zusatz { line-height: 1.8; } */ /* 11 px → 20 */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): dito
.metismenu.mod-menu > li > a { line-height: 26px; } */ /* 12 + 26 + 12 = 50 */
/* Leseseite und Uebersicht: Rahmen 760, Innenabstand 44, Textspalte 670.
Die gelieferte Fassung setzt 800 ohne eigenen Innenabstand — damit
kaeme die Textspalte auf 720 statt 670.
760 − 44 − 44 = 672 ≈ 670 (Maßtabelle, Ansichten 03, 04 und 08). */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): Rahmen 760 — MASSE-640 nennt 984 auf jeder Seite
.site-grid.ohne-spalte {
max-width: 760px;
padding-inline: 44px;
} */
/* ------------------------------------------------------------
6. Wartungsseite (Ansicht 8)
Ohne Kopf und Menue — die Seite ist aus. Zentrierter Kasten,
hoechstens 460 px, auf Papier. Kein Anmeldeformular.
------------------------------------------------------------ */
.wartung {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
}
.wartung__kasten {
max-width: 460px;
margin: auto;
padding: 2.5rem 2rem;
background: var(--sef-flaeche);
border-top: 6px solid var(--sef-akzent);
text-align: left;
}
.wartung__kasten .wortmarke { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.2rem; }
.wartung__fuss { margin-top: auto; }
/* Fundstelle in den Suchtreffern. Der Begriff wird hervorgehoben —
auf Kreide, nicht im Browsergelb (Spezifikation Ansicht 8). */
.suche__fundstelle {
margin: -.3rem 0 .7rem;
padding-left: calc(62px + 1rem);
max-width: 100%;
font-size: .92rem;
line-height: 1.55;
color: var(--sef-text-leise);
}
.suche__fundstelle mark {
background: var(--sef-kreide);
color: var(--sef-text);
padding: 0 .15em;
}
.suche__leer ul { margin: .7rem 0 0; padding-left: 1.2rem; }
.suche__leer li + li { margin-top: .3rem; }
/* ------------------------------------------------------------
7. Videokacheln
Die gelieferte CSS gestaltet `.videokachel` als Verweis. Bei uns
ist die Kachel ein KNOPF — sie startet das Video, statt zu einer
Seite zu fuehren. Der Verweis auf den Beitrag steht darunter;
das ist eine Vorgabe des Betreibers, die Spezifikation nennt in
der Unterschrift nur Titel und Dauer.
------------------------------------------------------------ */
.videoreihe__stueck { display: flex; flex-direction: column; gap: .35rem; }
button.videokachel {
width: 100%;
padding: 0;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.videokachel__artikel {
font-family: ui-monospace, Menlo, monospace;
font-size: .69rem;
color: var(--sef-akzent);
text-decoration: underline;
text-underline-offset: 3px;
}
.videokachel__artikel:hover { color: var(--sef-kontakt); }
.videoreihe__video { width: 100%; height: auto; background: #000; }
@media (max-width: 768px) {
.videoreihe__liste { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
8. Redaktion braucht Platz
Die Tabelle hat feste Spalten von zusammen 592 px plus Abstaende.
Im 760er Leserahmen blieben fuer den Titel acht Pixel — er war
schlicht nicht zu sehen. Ansicht 07 nennt 1240 px.
------------------------------------------------------------ */
body.redaktionsseite .site-grid.ohne-spalte {
max-width: 1240px;
padding-inline: 28px;
}
/* ------------------------------------------------------------
9. Bearbeitungsansicht braucht Platz
Wie die Redaktion: der Leserahmen von 760 px ist fuer eine
Maske mit Seitenspalte zu schmal. Ansicht 09 nennt 1240 px.
------------------------------------------------------------ */
body.bearbeitenseite .site-grid.ohne-spalte {
/* 1240 Rahmen + zweimal 28 px Aussenabstand */
max-width: 1296px;
padding-inline: 28px;
}
/* ------------------------------------------------------------
10. Zwischenueberschriften im Beitrag
Wunsch des Betreibers, 26.08.2026: "fett und nur geringfuegig
groesser als Text".
Die gelieferte user.css setzt h2 auf 1.6rem = 27,2 px gegen 17 px
Fliesstext. Das liest sich wie eine Kapitelueberschrift, nicht wie
eine Zwischenzeile. In den 52 Beitraegen stehen 55 solcher h2.
Nur IM BEITRAG geaendert. Die h2 der Module ("Meistgelesen",
"Sehen statt lesen") und die Sliderueberschrift bleiben, wie der
Entwurf sie vorsieht.
------------------------------------------------------------ */
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4,
.com-content-category-blog__item .item-content h2,
.com-content-category-blog__item .item-content h3 {
/* Absolut, nicht in rem: rem ist 16 px, der Fliesstext aber 17.
1.12rem waeren 17,92 px gewesen — kein sichtbarer Unterschied. */
font-size: 19px; /* gegen 17 px Fliesstext */
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
margin-block: 1.9em 0.45em;
max-width: var(--sef-zeilenlaenge);
}
/* Die erste Zwischenueberschrift braucht oben keinen Anlauf. */
.com-content-article__body > h2:first-child,
.com-content-article__body > h3:first-child { margin-block-start: 0; }
/* ------------------------------------------------------------
11. Zweite Runde der Durchsicht, 27.08.2026
------------------------------------------------------------ */
/* Der Kopf des Regelkastens hatte eine leere Zeile zu viel.
Grund: `.regelkasten__titel` ist ein Flex-Element ohne Wachstum.
Ist der Titel lang, fuellt er die Zeile, und das +/- Zeichen mit
seinem `margin-left: auto` rutscht auf eine EIGENE Zeile — rund
30 px Leerraum. Gemessen: Kopfzeile 158 px statt der 52 px
Mindesthoehe. Mit `flex: 1` bleibt das Zeichen daneben. */
.regelkasten > summary { align-items: center; }
.regelkasten__titel { flex: 1; min-width: 0; }
/* ------------------------------------------------------------
12. Der Merksatz sieht aus wie der Zitatkasten
Vorgabe des Betreibers, 27.08.2026: „Merksätze sollen generell
wie im Screenshot aussehen" — das Bild zeigt den Zitatkasten aus
Ansicht 03 des Entwurfs.
Damit gilt EIN Aussehen für alle hervorgehobenen Sätze: Kreide,
Rasenkante links, kursiv, linksbündig. Die frühere Fassung
(zentriert, fett, Linien oben und unten) ist damit hinfällig —
auch für Beitrag 45, wo sie zuvor ausdrücklich gewünscht war.
Werte aus dem Entwurf abgelesen, nicht geschätzt:
margin 4px 0 · padding 16px 22px · Kreide
border-left 3px Rasen · Breite auf der Textschiene
20px / 1.6 · kursiv
------------------------------------------------------------ */
.com-content-article__body .merksatz,
.com-content-article__body blockquote {
max-width: var(--sef-spalte);
margin-block: 1.1rem;
padding: 1rem 1.35rem;
background: var(--sef-kreide);
border: 0;
border-left: 3px solid var(--sef-akzent);
font-family: var(--sef-schrift-text);
/* Absolut, weil rem hier 16 px rechnet, der Fliesstext aber auf
17 px steht. Der Entwurf nennt 20 px; der Betreiber hat am
27.08.2026 in sechs Notizen „Schriftgroesse wie Text" verlangt.
Bei Widerspruch entscheidet der Betreiber. */
font-size: 17px;
font-weight: 400;
font-style: italic;
line-height: 1.6;
letter-spacing: normal;
text-align: left;
color: var(--sef-text);
}
.com-content-article__body blockquote p:last-child,
.com-content-article__body .merksatz:last-child { margin-bottom: 0; }
.com-content-article__body blockquote p { margin-block: 0 .6em; font-size: inherit;
font-style: inherit; line-height: inherit; max-width: none; }
/* -------------------------------------------------------------------
13. Merksatz fett, Zitat kursiv (27.08.2026)
Der Betreiber unterscheidet in seinen Notizen ausdruecklich:
beim Merksatz „bleibt aber Fett" (sechsmal), beim Zitatkasten
„es bleibt aber beim Kursiv". Beide behalten die Kreideflaeche
mit Rasenkante aus seinem Screenshot vom 26.08.
------------------------------------------------------------------- */
.com-content-article__body .merksatz {
font-weight: 700;
font-style: normal;
}
.com-content-article__body blockquote,
.com-content-article__body blockquote p {
font-weight: 400;
font-style: italic;
}
/* -------------------------------------------------------------------
14. Kein Bild wird hochskaliert (27.08.2026)
`.pull-left` / `.pull-right` setzen `width: 300px`. Steht die Klasse
an einem frei stehenden `![]()
` (nicht an einem ``), wird ein
kleineres Bild auf 300 px gestreckt.
Gemessen: `Razzie_Awards.png` in Beitrag 35 ist 219 px breit und
wurde um 37 % vergroessert — die feinen Linien zerfielen. Das war
die Meldung „nur noch punktierte Linien".
`width: auto` mit `max-width` laesst das Bild in seiner echten
Groesse stehen und deckelt nur nach oben.
------------------------------------------------------------------- */
.com-content-article__body img.pull-left,
.com-content-article__body img.pull-right {
width: auto;
max-width: 300px;
}
/* Die Groessenstufen wirken bisher nur an ``. An einem frei
stehenden Bild blieben sie wirkungslos — ohne Fehlermeldung. */
.com-content-article__body img.klein { max-width: 200px; }
.com-content-article__body img.mittel { max-width: 300px; }
.com-content-article__body img.gross { max-width: 460px; float: none; }
.com-content-article__body img.voll { max-width: 100%; float: none; }
/* -------------------------------------------------------------------
15. Kein doppeltes Fett im Beitragstext (27.08.2026)
Vom Betreiber „TextfehlerG" genannt, gemeldet an Beitrag 15 und 08.
Der Merksatz-Kasten setzt `font-weight: 700`. Ein `` aus dem
Bestand darin bedeutet „fetter als die Umgebung" — also 900. Bei
Helvetica/Arial greift der Browser dann zu Arial Black.
Gemessen an einem Satz aus Beitrag 15:
Gewicht 700 -> 630,14 px
Gewicht 900 -> 722,48 px (+15 %)
Das ist sichtbar eine andere Schrift. Beitrag 15 enthaelt beide
Faelle nebeneinander: der Satz im Kasten stand auf 900, der gleich
ausgezeichnete Satz ohne Kasten auf 700.
Im Beitragstext gibt es keinen Grund fuer mehr als 700. Die Regel
deckelt das ueberall — nicht nur im Merksatz.
------------------------------------------------------------------- */
.com-content-article__body strong,
.com-content-article__body b,
.com-content-article__body .merksatz strong,
.com-content-article__body blockquote strong,
.com-content-article__body .anmerkung strong,
.com-content-article__body .regelkasten strong {
font-weight: 700;
}
/* -------------------------------------------------------------------
16. `hidden` muss wirken (27.08.2026)
Meldung des Betreibers: „Die Suche in der Redaktion funktioniert
nicht."
Ursache: Die Suche setzt `z.hidden = true`. Das Ausblenden kommt
aber aus dem Browser-Stylesheet (`[hidden] { display: none }`) und
steht damit in einer schwaecheren Ebene als jede Autorenregel.
`.redaktion__zeile { display: grid }` gewinnt immer — die Zeile
bleibt stehen.
Betroffen war nur die Redaktion: dort haben Suche UND Kategorie-
filter nichts ausgeblendet. In der Uebersicht traegt die Zeile
keine eigene display-Regel, deshalb fiel es dort nicht auf.
Diese Regel macht das HTML-Merkmal `hidden` ueberall verlaesslich —
auch fuer alles, was spaeter dazukommt.
------------------------------------------------------------------- */
[hidden] {
display: none !important;
}
/* -------------------------------------------------------------------
17. Das Aufmacherbild bekommt Masse (27.08.2026)
Befund: Das Bild des ersten Beitrags auf der Startseite wurde
**nie angefordert** — kein einziger Netzwerkaufruf.
Ursache: `.item-image img` hatte nur `max-width: 100%`, also keine
eigene Breite. Vor dem Laden ist ein Bild ohne Masse 0 x 0, das
umschliessende `` ist inline und damit ebenfalls 0 x 0 — und
Chromes `loading="lazy"` springt bei einem Element ohne Flaeche
nicht an. Das Bild wartet auf das Laden, das Laden wartet auf die
Groesse.
Masse nach MASSTABELLE.md:
Startseite, Aufmacher 654 x 260
Leseseite, Aufmacher 670 x 300
------------------------------------------------------------------- */
.item-image a { display: block; }
.blog-item .item-image img,
.com-content-category-blog__item .item-image img {
width: 100%;
height: 260px;
object-fit: cover;
}
.item-page .item-image img,
.com-content-article .item-image img {
width: 100%;
height: 300px;
object-fit: cover;
}
/* -------------------------------------------------------------------
18. Die Zeilenlaenge gehoert an den Absatz, nicht an die Spalte
(27.08.2026)
MASSTABELLE.md, Regel 2:
„Nur die Zeilenlaenge wird rechts begrenzt, nicht die Spalte.
Absaetze enden bei 68 ch (643 px). Titel, Bilder und Kaesten
laufen ueber die volle Spaltenbreite. Deshalb sind Bilder
breiter als der Text — das ist gewollt."
Die gelieferte user.css setzt `max-width` aber auf
`.com-content-article__body` SELBST — also auf die ganze Spalte.
Gemessen auf der Leseseite: Koerper 643 statt 670. Damit ist jedes
Bild um 27 px zu schmal, und ein umflossenes Bild hat weniger Platz
neben sich, als die Maßtabelle einraeumt.
Der Hintergrundkasten bleibt bei 643 — die Maßtabelle nennt ihn
ausdruecklich: „Der Hintergrundkasten ist 643 px breit, nicht 670:
er liegt auf der Textmasslinie." Absolut, nicht in `ch`: `ch`
rechnet mit der Schrift des Elements (15 px im Kasten) statt mit
den 17 px des Fliesstexts und ergaebe 100 px zu wenig.
------------------------------------------------------------------- */
/* STILLGELEGT wegen MASSE-640 (27.08.2026): ersetzt durch Korrektur 2: Deckel nur auf .item-page
.com-content-article__body {
max-width: none;
} */
/* Textfuehrende Bloecke bleiben auf der Textmasslinie. */
.com-content-article__body ul,
.com-content-article__body ol,
.com-content-article__body dl,
.com-content-article__body > .anmerkung,
.com-content-article__body > .regelkasten,
.com-content-article__body > details.regelkasten {
max-width: var(--sef-spalte);
}
/* Bilder fuellen die Spalte, in der sie stehen. */
.com-content-article__body > figure,
.com-content-article__body > p > img:only-child,
.com-content-article__body .item-image {
max-width: 100%;
}
/* -------------------------------------------------------------------
19. H1 der Leseseite auf 602 px (27.08.2026)
MASSTABELLE.md, Ansicht 03: „H1 (max. 30 ch) — 602".
Gemessen waren 552. Ursache ist dieselbe wie beim
Hintergrundkasten: `ch` rechnet mit der Schrift des Elements, hier
35,84 px — 30 ch ergeben damit 552 statt der 602 des Entwurfs.
Deshalb absolut.
------------------------------------------------------------------- */
.com-content-article__title,
.item-page h1 {
max-width: 602px;
}
/* -------------------------------------------------------------------
20. Umflossene Bilder IM Kasten (27.08.2026)
Ein `.pull-right` ist sonst 300 px breit. Im Anmerkungskasten
bleiben davon 608 - 300 - 22 = 286 px Text, also rund 38 Zeichen je
Zeile — unter der Grenze von 42 aus der Masstabelle.
Mit 240 px bleiben 346 px, rund 46 Zeichen. Das traegt.
------------------------------------------------------------------- */
.com-content-article__body .anmerkung img.pull-right,
.com-content-article__body .anmerkung img.pull-left,
.com-content-article__body .regelkasten img.pull-right,
.com-content-article__body .regelkasten img.pull-left {
width: auto;
max-width: 240px;
margin-block: 0.2em 0.8em;
}
/* Der Kasten muss den umflossenen Teil einschliessen, sonst ragt das
Bild unten heraus. */
.com-content-article__body .anmerkung { overflow: hidden; }
/* ============================================================
ANTWORTEN-27-08.md — die Entscheidungen des Betreibers
Eingesetzt am 27.08.2026.
============================================================ */
/* --- Konflikt 3: Flaechen voll, Inhalt auf der Schiene -------
Die Flaechen gehen von Kante zu Kante, der Inhalt sitzt mittig
auf der 984er Schiene — auch innerhalb dieser Flaechen. Damit
richten sich Wortmarke, Menue, Folientext und Fuss an derselben
Linie aus wie der Artikel darunter.
Textzeilen werden dabei NICHT breiter: 1800 px Fenster ergaeben
bei 17 px Schrift ueber 200 Zeichen je Zeile. */
.container-header,
.container-slider,
.container-footer,
.rasenstreifen {
width: 100%;
max-width: none;
}
.container-header > .grid-child,
.container-slider > .grid-child,
.container-footer > .grid-child,
.site-grid {
max-width: var(--sef-rahmen);
margin-inline: auto;
padding-inline: var(--sef-rand);
box-sizing: content-box;
}
/* Die Buehne des Sliders ist eine Flaeche; ihr Inhalt gehoert auf
die Schiene. Das Modul liegt ohne eigenes .grid-child darin. */
.container-slider > .mod-custom,
.container-slider .folien {
max-width: var(--sef-rahmen);
margin-inline: auto;
padding-inline: var(--sef-rand);
box-sizing: content-box;
}
/* --- Konflikt 9 und Vorschlag 4: feste Werte statt ch ---------
Kein `ch` mehr, nirgends. Alles auf 640; innerhalb der Kaesten
`100 %`, weil die Polster die Breite ergeben — eine eigene Zahl
braechte eine zweite rechte Kante zurueck. */
:root { --sef-zeilenlaenge: var(--sef-spalte); }
h1,
.com-content-article__title,
.item-page h1,
.com-content-article__body .einleitung,
.com-content-article__body blockquote,
.com-content-article__body .merksatz,
.com-content-article__body .regelkasten,
.com-content-article__body details.regelkasten,
.einleitung,
.fehlerseite,
.suche__leer {
max-width: var(--sef-spalte);
}
/* Innerhalb der Kaesten: die Polster ergeben die Breite. */
.regelkasten p,
.regelkasten__liste,
.regelkasten__stufen dd,
.regelkasten .quelle,
.anmerkung p,
.com-content-article__body blockquote p,
.suche__fundstelle {
max-width: 100%;
}
/* Die Ueberschrift der Fehlerseite stand auf 24ch. Sie bleibt
kuerzer als die Textbreite, jetzt aber als Zahl. */
.fehlerseite h1 { max-width: 480px; }
/* --- Konflikt 4: Kopf 6h, beim Scrollen eingerastet -----------
Volle Leiste 112 px, beim Herunterscrollen auf 44 px. Den
Zustand schaltet `data-kurz`, gesetzt von einem
IntersectionObserver auf einem 1 px hohen Merker ueber dem
Kopf — kein Scroll-Ereignis abhoeren.
Begruendung des Betreibers: 14 der 49 Beitraege sind
Glossarbegriffe. Wer ueber einen Verweis dort ankommt, hat das
Menue nie gesehen. */
.container-header {
position: sticky;
top: 0;
z-index: 20;
transition: none;
}
.container-header[data-kurz] .kopf__zusatz,
.container-header[data-kurz] .wortmarke__zusatz,
.container-header[data-kurz] .container-search { display: none; }
.container-header[data-kurz] .wortmarke { height: 44px; }
.container-header[data-kurz] .wortmarke__name { font-size: 17px; }
.container-header[data-kurz] .container-nav { height: 0; overflow: hidden; }
/* Der Merker selbst — 1 px hoch, unsichtbar, ueber dem Kopf. */
/* ersetzt, siehe „Der Kopf huepfte bei leichtem Scrollen" */
@media (prefers-reduced-motion: reduce) {
.container-header { transition: none; }
}
/* ============================================================
Slider-Fortschritt — Balkenreihe unter der Bühne
Gehört in media/templates/site/SIGGI2026/css/user.css
Maße abgelesen aus dem Entwurf, nicht geschätzt.
============================================================ */
/* Die Zeile unter der Bühne: links die Balken, rechts der Stand.
Fläche ist Papier, nicht Kreide — die Zeile soll nicht als
eigener Kasten lesen. */
.folien__leiste {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
height: 44px; /* Tippfläche, auch am Telefon */
/* Die Flaeche laeuft ueber die volle Breite — sie gehoert zur
Buehne. Ihr INHALT gehoert auf dieselbe Schiene wie die Folie,
sonst steht der erste Balken links neben dem Bild.
Die Folie sitzt ueber `max-width: var(--sef-rahmen)` und
`margin-inline: auto` mittig im selben Elternelement. Dieselbe
Rechnung von Hand ergibt denselben Rand; `max()` haelt am
Telefon die 22 px, wo die Schiene breiter waere als das Fenster.
Bis 27.08.2026 lag die Schiene auf `.container-slider > .mod-custom`.
Seit die Buehne ein mod_articles_category ist, trifft der
Selektor nicht mehr — daher der Versatz. */
padding-inline: max(22px, calc(50% - var(--sef-rahmen) / 2));
background: var(--sef-grund);
border-bottom: 1px solid var(--sef-linie);
}
/* Balkenreihe. 6 px Abstand, nicht mehr — die zehn Balken sollen
als eine Reihe lesen, nicht als zehn Schaltflächen. */
.folien__punkte {
display: flex;
gap: 6px;
}
/* Ein Balken. 24 × 4 px, rechteckig, keine Rundung, kein Rand.
Die Trefferfläche ist größer als der Balken: 14 px Polster oben
und unten ergeben 32 px Höhe — am Telefon auf 44 px erhöht. */
.folien__punkt {
width: 24px;
height: 32px;
padding: 14px 0;
border: 0;
background: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.folien__punkt::before {
content: "";
display: block;
height: 4px;
background: #c9c2b5; /* Sand — nicht gewählt */
transition: background 120ms linear;
}
.folien__punkt:hover::before {
background: #8a8377;
}
.folien__punkt[aria-current="true"]::before {
background: var(--sef-akzent); /* Rasen — die laufende Folie */
}
.folien__punkt:focus-visible {
outline: 2px solid var(--sef-akzent);
outline-offset: 1px;
}
/* Der Stand rechts. Monospace, 11 px, leise — er ist Auskunft,
keine Überschrift. Genauer Wortlaut:
"10 von 10 · Wechsel nach 6 s, Pause bei Mauskontakt" */
.folien__stand {
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
line-height: 1;
white-space: nowrap;
color: var(--sef-text-leise);
}
/* Am Telefon: Balken schmaler, Stand kürzer (siehe HTML unten),
Trefferfläche bleibt 44 px. */
@media (max-width: 40rem) {
.folien__leiste { padding-inline: 18px; gap: 12px; }
.folien__punkt { width: 18px; height: 44px; padding: 20px 0; }
.folien__punkt::before { height: 3px; }
}
/* Bewegung nur, wenn gewünscht. Bei prefers-reduced-motion läuft
der Slider nicht selbsttätig weiter — der Stand sagt das auch. */
@media (prefers-reduced-motion: reduce) {
.folien__punkt::before { transition: none; }
}
/* ============================================================
Vorschlag 3 — Kopf am Telefon: 56 px geschlossen
Freigegeben am 27.08.2026.
Die Klapptaste war da, aber ohne den Umbau der Auszeichnung
wirkungslos: das Suchfeld stand als dritte Zeile im Kopf.
`kopf.js` haengt es unter 768 px in das Klappmenue.
============================================================ */
@media (max-width: 47.99rem) {
/* Wortmarke und Klapptaste in einer Zeile, zusammen 56 px. */
.container-header .grid-child {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
min-height: 56px;
}
.wortmarke { height: auto; }
.wortmarke__name { font-size: 19px; line-height: 1.2; }
.wortmarke__zusatz { display: none; }
.menue-taste {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding-inline: .6rem;
background: none;
border: 0;
color: var(--sef-text);
cursor: pointer;
}
/* Das Klappmenue: geschlossen nimmt es keine Hoehe. */
.container-nav {
height: auto;
flex-basis: 100%;
order: 9;
}
.container-nav[hidden],
.menue-taste[aria-expanded="false"] + .container-nav {
display: none;
}
/* Jeder Eintrag mindestens 46 px — Menuepunkte und Suchfeld. */
.container-nav .metismenu > li > a,
.container-nav .metismenu.mod-menu > li > a {
min-height: 46px;
height: auto;
padding-block: .6rem;
}
/* Das Suchfeld sitzt unter den fuenf Punkten. */
.container-nav .container-search {
display: block;
padding-block: .6rem 1rem;
}
.container-nav .container-search input {
width: 100%;
min-height: 46px;
}
/* Eingerastet gibt es am Telefon nichts zu verkuerzen — der Kopf
ist ohnehin schon 56. */
.container-header[data-kurz] .wortmarke { height: auto; }
}
}
/* ============================================================
Menuezeile: der Verweis fuellt sie genau aus (27.08.2026)
`height: 100%` blieb wirkungslos, weil das keine Hoehe
hatte — der Verweis wurde durch sein Polster 56 px hoch und
seine 2-px-Unterkante landete 15 px unter der Menuezeile,
also im Slider. Gemessen: Zeile 85-125, Verweis 85-141,
Slider ab 126.
============================================================ */
.container-nav { display: flex; align-items: stretch; }
.container-nav .metismenu,
.container-nav .mod-menu { display: flex; align-items: stretch; margin: 0; }
/* Absolute 40 px statt `height: 100%`: die Prozentkette laeuft ueber
einen Wrapper des Moduls und bricht dort — der Verweis wurde dann
19 px hoch und seine Unterkante sass mitten in der Zeile. */
.container-nav .metismenu > li > a,
.container-nav .mod-menu > li > a,
.container-nav .metismenu > li > span,
.container-nav .mod-menu > li > span {
display: flex;
align-items: center;
height: 40px;
padding-block: 0;
line-height: 1;
}
/* ============================================================
Der Kopf huepfte bei leichtem Scrollen (27.08.2026)
Zwei Merker statt einem, 100 px auseinander, absolut am
Dokumentanfang: sie bewegen sich NICHT mit, wenn der Kopf beim
Einrasten 68 px niedriger wird. Der obere schaltet auf, der
untere zu — damit gibt es einen toten Bereich statt einer
einzigen Kipplinie.
`overflow-anchor: none`: Chrome zieht sonst `scrollY` nach, wenn
der Kopf schrumpft und alles darunter hochrueckt. Genau das hat
den Merker zurueck ins Bild geholt und das Hin und Her erzeugt.
============================================================ */
html { overflow-anchor: none; }
.kopf__merker {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100px;
pointer-events: none;
visibility: hidden;
}
.kopf__merker span {
position: absolute;
left: 0;
width: 1px;
height: 1px;
display: block;
}
.kopf__merker-auf { top: 0; } /* ganz oben: Kopf geht auf */
.kopf__merker-zu { top: 99px; } /* ab hier: Kopf rastet ein */
/* Der Uebergang bleibt aus: eine Bewegung an dieser Stelle macht
das Umschalten sichtbar, statt es zu verbergen. */
.container-header,
.container-header .wortmarke,
.container-header .container-nav { transition: none; }
/* ============================================================
Folienbilder (27.08.2026)
Vom Betreiber entschieden: die zehn WebP aus images/slider2/
stehen hinter den Textkarten. Damit weicht die Seite von
SPEZIFIKATION.md 7 („Kreide, ohne Bild") ab — die gestreifte
Flaeche war der Platzhalter des Entwurfs, nicht die Gestaltung.
Die Zuordnung stammt aus der Sicherung des alten Sliders
(sicherung-folien-20260826.sql), nicht aus dem Dateinamen.
In der CSS statt in der Auszeichnung: Hintergrundbilder
verborgener Elemente laedt der Browser nicht: neun der zehn
Folien tragen `hidden`, also kommt nur das erste Bild beim
Aufbau der Seite. Das ist die Wirkung, die der Entwurf mit
„loading=lazy ab Folie 2" meint.
============================================================ */
.sef-slider .folie {
background-color: var(--sef-kreide);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: none; /* das Streifenmuster des Platzhalters faellt weg */
}
@media (max-width: 47.99rem) {
.sef-slider .folie { background-position: center top; }
}
/* ============================================================
Folienbilder ueber die Reihenfolge, nicht ueber Kennungen
(27.08.2026)
Die Bilder hingen an `#folie-1` bis `#folie-10`. Beim Speichern
des Moduls in der Verwaltung wirft TinyMCE `id`, `role` und
`hidden` weg — belegt am Vergleich zweier Sicherungen:
12:22 Uhr zehn Kennungen, 13:21 Uhr keine. Damit waren die
Bilder fort, obwohl an der CSS nichts falsch war.
`:nth-of-type()` haengt an der Stellung im Elternelement und
ueberlebt jedes Speichern.
============================================================ */
/* Die zehn Bildregeln nach Stellung sind am 27.08.2026 entfallen.
Sie stammten aus der mod_custom-Zeit, als TinyMCE beim Speichern
id, role, hidden und den Inline-Stil aus dem Modul warf und die
Bilder deshalb in der CSS haengen mussten.
Seit die Buehne ein mod_articles_category mit eigenem Layout ist,
setzt buehne.php das Bild je Karte aus images.image_intro. Die
Regeln nach Stellung waren ab da schaedlich: sie gaben JEDER
Folie ein Bild — auch einer, die bewusst keins hat, und der
elften ueberhaupt keins. */
/* Ohne JavaScript steht die erste Folie — auch dann, wenn `hidden`
aus der Auszeichnung geflogen ist. Sobald das Skript laeuft,
traegt genau eine Folie kein `hidden`, und diese Regel greift
nicht mehr. */
.sef-slider__buehne:not(:has(.folie[hidden])) .folie:nth-of-type(n+2) {
display: none;
}
/* ============================================================
Sprüche pflegen — Ansicht A (27.08.2026)
Maße aus MASSE-spruechekarten.md, alle in px.
Die Kette, die dort ausdrücklich genannt wird:
Seite 1028 − 2 Rahmen − 44 Polster − 2 Zeilenlinie = 980
Feldspalte 336 + Zwischenraum 44 + Vorschau 600 = 980
Die 600 der Vorschau sind gesetzt. Fehlt Platz, gibt die
Feldspalte ihn her — deshalb `minmax(0, 336px)` links und
`600px` rechts, nicht umgekehrt.
============================================================ */
body.spruechekarten .site-grid.ohne-spalte {
max-width: 1028px;
padding-inline: 0;
}
body.spruechekarten .site-grid > .container-component { width: 100%; }
.folien { --f-linie: #ddd8ce; --f-stark: #c9c2b5; --f-aus: #faf8f4; }
.folien__kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.2rem;
}
.folien__kopf h1 { margin: 0; }
.folien__neu { min-height: 44px; }
/* --- Liste ------------------------------------------------- */
.folien__liste {
border: 1px solid var(--f-linie);
background: #fff;
}
.folien__kopfzeile,
.folien__zeile {
display: grid;
grid-template-columns: 58px 96px minmax(0, 1fr) 180px 120px 150px;
gap: 14px;
align-items: center;
padding-inline: 22px;
}
.folien__kopfzeile {
height: 30px;
background: var(--sef-kreide);
border-bottom: 1px solid var(--f-linie);
font: 10px/1 ui-monospace, Menlo, monospace;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sef-text-leise);
}
.folien__zeile {
min-height: 66px;
border-bottom: 1px solid var(--f-linie);
}
.folien__zeile.ist-aus { background: var(--f-aus); }
.folien__zeile.ist-aus .folien__spruch { color: var(--sef-text-leise); }
.folien__zeile.ist-offen { display: block; padding-block: 14px; }
/* Folge */
.folien__folge { display: flex; flex-direction: column; gap: 2px; }
.folien__pfeil {
width: 26px; height: 30px;
border: 1px solid var(--f-linie);
background: #fff; cursor: pointer;
font-size: 10px; line-height: 1; color: var(--sef-text);
}
.folien__pfeil:hover:not(:disabled) { border-color: var(--sef-akzent); color: var(--sef-akzent); }
.folien__pfeil:disabled { color: var(--f-stark); cursor: default; }
/* Miniatur — Kante sagt, ob ein Bild gesetzt ist */
.folien__mini {
width: 96px; height: 46px;
overflow: hidden; background: var(--sef-kreide);
border-left: 3px solid var(--sef-akzent);
}
.folien__mini.ohne { border-left-style: dashed; border-left-color: var(--f-stark); }
.folien__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folien__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folien__spruch { font-size: 16px; font-weight: 600; }
.folien__satz {
font-size: 13px; color: var(--sef-text-leise);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folien__beitrag { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.folien__ohne { color: var(--sef-ocker); font-size: 13px; }
/* Status — Farbe, Schalterlage und Wort sagen dasselbe */
.folien__schalter {
display: inline-flex; align-items: center; gap: .5rem;
background: none; border: 0; cursor: pointer; padding: 0;
font: inherit; color: var(--sef-ocker);
}
.folien__schieber {
width: 26px; height: 14px; border-radius: 7px;
background: var(--sef-ocker); position: relative; flex: none;
}
.folien__schieber::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 8px; height: 8px; border-radius: 50%; background: #fff;
transition: left 120ms linear;
}
.folien__schalter[aria-pressed="true"] { color: var(--sef-akzent); }
.folien__schalter[aria-pressed="true"] .folien__schieber { background: var(--sef-akzent); }
.folien__schalter[aria-pressed="true"] .folien__schieber::after { left: 15px; }
.folien__wort { font-size: 14px; font-weight: 600; }
.folien__aktion { display: flex; gap: .4rem; justify-content: flex-end; }
.folien__klein {
min-height: 32px; padding-inline: .7rem;
border: 1px solid var(--sef-akzent); background: #fff;
color: var(--sef-akzent); font: inherit; font-size: 14px; cursor: pointer;
}
.folien__klein--grau { border-color: var(--f-stark); color: var(--sef-text-leise); }
.folien__klein:hover { border-color: var(--sef-kontakt); color: var(--sef-kontakt); }
/* --- Aufgeklappt: 336 + 44 + 600 = 980 --------------------- */
.folien__editor {
display: grid;
grid-template-columns: minmax(0, 336px) 600px;
gap: 44px;
align-items: start;
padding-top: 14px;
}
.folien__felder { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.folien__feld { display: flex; flex-direction: column; gap: .3rem; }
.folien__feld > span:first-child {
font: 11px/1 ui-monospace, Menlo, monospace;
letter-spacing: .08em; text-transform: uppercase; color: var(--sef-text-leise);
}
.folien__feld input[type="text"] {
height: 46px; padding-inline: .7rem; font-size: 17px;
border: 1px solid var(--f-linie); background: #fff; color: var(--sef-text);
}
.folien__feld textarea {
padding: .6rem .7rem; font: 15px/1.6 var(--sef-schrift-text);
border: 1px solid var(--f-linie); background: #fff; color: var(--sef-text); resize: vertical;
}
.folien__zaehlerklein {
font: 11px ui-monospace, Menlo, monospace; color: var(--sef-text-leise); min-height: 13px;
}
.folien__suche { height: 44px; padding-inline: .7rem; border: 1px solid var(--f-linie); background: #fff; }
.folien__treffer { list-style: none; margin: .3rem 0 0; padding: 0; max-height: 148px; overflow-y: auto; }
.folien__treffer button {
display: flex; flex-direction: column; width: 100%; text-align: left;
gap: 1px; padding: .45rem .6rem; background: #fff; border: 0;
border-bottom: 1px solid var(--f-linie); cursor: pointer; font: inherit;
}
.folien__treffer button:hover { background: var(--sef-kreide); }
.folien__treffer small { font-size: 12px; color: var(--sef-text-leise); }
.folien__gewaehlt {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
padding: .5rem .7rem; background: var(--sef-kreide); border-left: 3px solid var(--sef-akzent);
}
.folien__gitter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.folien__gitter3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.folien__bild {
padding: 0; border: 3px solid transparent; background: var(--sef-kreide);
cursor: pointer; aspect-ratio: 980 / 475; overflow: hidden;
}
.folien__gitter3 .folien__bild { aspect-ratio: 640 / 360; }
.folien__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folien__bild.ist-an { border-color: var(--sef-akzent); }
.folien__beitragsbilder {
padding: .7rem; border: 1px solid var(--sef-blau); margin-bottom: .6rem;
}
.folien__frage { margin: 0 0 .5rem; font-size: 14px; }
.folien__warn { margin: .5rem 0 0; font-size: 12px; color: var(--sef-ocker); }
.folien__hinweis { margin: 0; font-size: 13px; color: var(--sef-text-leise); }
.folien__knopfreihe { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.folien__knopfreihe .btn { min-height: 44px; }
.folien__knopfreihe .btn:disabled { background: var(--f-stark); border-color: var(--f-stark); cursor: default; }
.folien__pflicht { font-size: 13px; color: var(--sef-text-leise); }
/* --- Vorschau: 600, echte Schrift, echte Farben ------------- */
.folien__vorschau { width: 600px; }
.folie--vorschau {
width: 600px; min-height: 300px;
display: flex; align-items: flex-end;
background-color: var(--sef-kreide);
background-size: cover; background-position: center;
}
.folie--vorschau.ohne-bild { border-left: 4px dashed var(--sef-akzent); }
.folie--vorschau .folie__text { max-width: 544px; margin: 1.2rem; }
.folie--vorschau h2 { font-size: 32px; font-weight: 700; margin: 0 0 .5rem; }
.folie--vorschau p { font-size: 17px; line-height: 1.6; margin: 0 0 .8rem; }
.folie--vorschau .ist-leer { color: var(--f-stark); }
.folien__vmasse { margin: .4rem 0 0; font: 11px ui-monospace, Menlo, monospace; color: var(--sef-text-leise); }
/* --- Widerrufen -------------------------------------------- */
.folien__widerruf {
display: flex; align-items: center; gap: .8rem;
height: 52px; padding-inline: 22px;
background: var(--sef-kreide); border-left: 4px solid var(--sef-ocker);
border-bottom: 1px solid var(--f-linie);
}
.folien__wtext { flex: 1; font-size: 15px; }
.folien__wzeit { font: 12px ui-monospace, Menlo, monospace; color: var(--sef-text-leise); }
/* --- Leerzustand ------------------------------------------- */
.folien__leer {
max-width: 640px; margin: 1.2rem 22px; padding: 1.2rem;
background: var(--sef-kreide); border-left: 4px solid var(--sef-ocker);
}
.folien__leermarke {
display: block; margin-bottom: .4rem;
font: 11px ui-monospace, Menlo, monospace;
letter-spacing: .08em; text-transform: uppercase; color: var(--sef-ocker);
}
.folien__neumarke {
display: block; margin-bottom: .6rem;
font: 11px ui-monospace, Menlo, monospace;
letter-spacing: .08em; text-transform: uppercase; color: var(--sef-ocker);
}
.folien__zaehler { margin: .8rem 0 0; font: 12px ui-monospace, Menlo, monospace; color: var(--sef-text-leise); }
.folien__meldung { margin: .6rem 0; font-size: 14px; }
.folien__meldung--fehler { color: var(--sef-ocker); }
.folien__meldung--gut { color: var(--sef-akzent); }
/* --- Einstellungen (nur Verwaltung) ------------------------- */
.folien__einstellungen {
margin-bottom: 1.2rem; padding: 0 22px 1rem;
background: #fff; border: 1px solid var(--f-linie);
}
.folien__einstellungen > summary {
padding: .8rem 0; cursor: pointer; font-weight: 600;
}
.folien__eraster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.folien__elabel {
display: block; margin-bottom: .3rem;
font: 11px ui-monospace, Menlo, monospace;
letter-spacing: .08em; text-transform: uppercase; color: var(--sef-text-leise);
}
.folien__ewahl { display: flex; flex-wrap: wrap; gap: 6px; }
.folien__ewert {
min-height: 40px; padding-inline: .8rem;
border: 1px solid var(--f-linie); background: #fff;
font: inherit; font-size: 14px; cursor: pointer; color: var(--sef-text);
}
.folien__ewert.ist-an { background: var(--sef-akzent); border-color: var(--sef-akzent); color: #fff; }
.folien__ehinweis { margin: .8rem 0 0; font-size: 13px; color: var(--sef-text-leise); }
.folien__efest { margin: .3rem 0 0; font-size: 13px; color: var(--sef-text-leise); }
/* --- Schmales Fenster: die Feldspalte gibt nach ------------- */
@media (max-width: 1099px) {
.folien__editor { grid-template-columns: 1fr; gap: 20px; }
.folien__vorschau, .folie--vorschau { width: 600px; max-width: 100%; }
}
/* ============================================================
Nachtrag 27.08.2026 zur Gegenpruefung der Spruecheliste
============================================================ */
/* Der Speichern-Knopf traegt jetzt aria-disabled statt disabled.
Ein mit `disabled` gesperrter Knopf ist mit der Tastatur nicht
erreichbar — und damit ist auch der Hinweis „Spruch und Satz sind
Pflicht" daneben nicht auffindbar, der ueber aria-describedby an
ihm haengt. Das Aussehen bleibt dasselbe. */
.folien__knopfreihe .btn[aria-disabled="true"] {
background: var(--f-stark);
border-color: var(--f-stark);
cursor: default;
}
/* Das gewaehlte Bild war allein an der Rahmenfarbe zu erkennen.
Im Projekt gilt: Form UND Wort, nicht nur Farbe. Der Haken sitzt
in der Ecke, das Wort traegt aria-pressed fuer Vorleseprogramme. */
.folien__bild { position: relative; }
.folien__bild[aria-pressed="true"]::after {
content: "\2713";
position: absolute;
right: 3px;
bottom: 2px;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
font-size: 13px;
color: #fff;
background: var(--sef-akzent);
border-radius: 2px;
}
/* Die Meldung ueber der Liste ist im Ruhezustand leer und dann auch
nicht da — sonst bliebe eine leere Zeile stehen. */
.folien__meldung[hidden] { display: none !important; }
/* ============================================================
Bewegung beim Folienwechsel (27.08.2026)
Vier Arten, einstellbar unter /index.php/spruechekarten:
schnitt harter Wechsel, wie bisher — die Vorgabe
ueberblenden die alte Folie wird durchsichtig, die neue klar
wischen die neue schiebt von der Seite herein, die alte
zur anderen Seite hinaus; die Richtung folgt der
Blaetterrichtung
heben Ueberblenden mit einem kurzen Weg nach oben
Waehrend der Bewegung sind ZWEI Folien da. Die gehende nimmt
`.geht` und liegt absolut ueber der Buehne; die kommende steht im
Fluss und gibt der Buehne ihre Hoehe. Danach setzt slider.js die
alte wieder auf `hidden`.
Bei „Bewegung reduzieren" und eingeschalteter Ruhe schneidet
slider.js ohne Ruecksicht auf die Einstellung — die Klassen werden
dann gar nicht erst gesetzt.
============================================================ */
/* Das Fenster ist genau so breit wie eine Folie und schneidet ab.
Bis 27.08.2026 lag `overflow: hidden` auf `.sef-slider__buehne` —
die geht aber ueber die volle Fensterbreite, waehrend die Folie
nur 984 breit und mittig ist. Beim Wischen wurde deshalb erst am
Fensterrand geschnitten, und links und rechts neben der Folie
stand die jeweils andere sichtbar daneben.
Die Buehne selbst laesst sich nicht begrenzen: die
Fortschrittsleiste liegt darin und laeuft ueber die volle
Breite. */
.sef-slider__fenster {
position: relative;
max-width: var(--sef-rahmen);
margin-inline: auto;
overflow: hidden;
}
.sef-slider .folie.geht {
position: absolute;
inset: 0;
z-index: 1;
}
.sef-slider .folie.kommt { z-index: 2; }
/* --- Ueberblenden --- */
.sef-slider[data-art="ueberblenden"] .folie.kommt { animation: sef-klar 420ms ease both; }
.sef-slider[data-art="ueberblenden"] .folie.geht { animation: sef-blass 420ms ease both; }
/* --- Wischen --- */
.sef-slider[data-art="wischen"] .folie.kommt.vor { animation: sef-von-rechts 460ms cubic-bezier(.22,.61,.36,1) both; }
.sef-slider[data-art="wischen"] .folie.geht.vor { animation: sef-nach-links 460ms cubic-bezier(.22,.61,.36,1) both; }
.sef-slider[data-art="wischen"] .folie.kommt.zurueck { animation: sef-von-links 460ms cubic-bezier(.22,.61,.36,1) both; }
.sef-slider[data-art="wischen"] .folie.geht.zurueck { animation: sef-nach-rechts 460ms cubic-bezier(.22,.61,.36,1) both; }
/* --- Heben --- */
.sef-slider[data-art="heben"] .folie.kommt { animation: sef-heben-ein 440ms cubic-bezier(.22,.61,.36,1) both; }
.sef-slider[data-art="heben"] .folie.geht { animation: sef-heben-aus 440ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes sef-klar { from { opacity: 0; } to { opacity: 1; } }
@keyframes sef-blass { from { opacity: 1; } to { opacity: 0; } }
@keyframes sef-von-rechts { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sef-nach-links { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes sef-von-links { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sef-nach-rechts { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes sef-heben-ein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sef-heben-aus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }
/* Im Fenster ist die Folie so breit wie das Fenster. Ihre eigene
Begrenzung auf --sef-rahmen wuerde nichts mehr aendern, macht die
Rechnung beim Wischen aber schwer nachvollziehbar. */
.sef-slider__fenster > .folie { max-width: none; margin-inline: 0; }
/* ============================================================
Dreiteilige Navigation am Beitragsende (27.08.2026)
Nachbar links, Liste in der Mitte, Nachbar rechts. Vorher standen
dort nur die beiden Nachbarn, und „Zurück" las sich wie „eine Ebene
hoeher" — gemeint war aber der vorherige Beitrag.
Die leeren Spannen tragen keinen Inhalt, nehmen aber Platz ein.
Ohne sie ruckte die Mitte nach links, sobald ein Beitrag keinen
Vorgaenger hat — also beim neuesten.
============================================================ */
.pagenav { align-items: center; }
.pagenav > * { flex: 1 1 0; min-width: 0; }
.pagenav a { max-width: none; }
.pagenav__nach { text-align: right; }
.pagenav__hoch {
flex: 0 1 auto;
text-align: center;
white-space: nowrap;
font-family: ui-monospace, Menlo, monospace;
font-size: 0.72rem;
font-weight: 400;
color: var(--sef-akzent);
border: 1px solid var(--sef-linie);
border-radius: 2px;
padding: 0.55rem 0.9rem;
}
.pagenav__hoch:hover,
.pagenav__hoch:focus-visible {
border-color: var(--sef-akzent);
background: var(--sef-kreide);
}
/* Am Telefon stehen die drei untereinander. Die leeren Platzhalter
waeren dort leere Zeilen — sie entfallen. */
@media (max-width: 40rem) {
.pagenav__leer { display: none; }
.pagenav__hoch { align-self: stretch; }
}
/* Trennzeichen zwischen den Stufen der Brotkrume. Es steht nur fuer das
Auge da (aria-hidden) — eine Vorlesesoftware liest die Stufen ohnehin
als Liste. */
.breadcrumb__trenner { color: var(--sef-linie); padding-right: .45rem; }
/* Die Titel der Nachbarbeitraege sind lang — in einem Drittel der
640er Spalte ergeben sie sonst fuenf Zeilen, und der Block unter dem
Beitrag wird hoeher als noetig. Drei Zeilen: die Kennzeichnung
(„Vorheriger Beitrag") und zwei Zeilen Titel.
Abgeschnitten wird nur fuer das Auge — Vorleseprogramme lesen den
vollen Titel, und der steht auch im Titel-Attribut. */
.pagenav__vor,
.pagenav__nach {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
}
@media (max-width: 40rem) {
.pagenav__vor,
.pagenav__nach { -webkit-line-clamp: 2; }
}
/* ⚠ Am Telefon steht die Navigation als Spalte (bestehende Regel weiter
oben). Dort meint `flex: 1 1 0` die HOEHE, nicht die Breite — die
beiden Nachbarverweise waren damit null Pixel hoch und unsichtbar.
In der Spalte darf die Hoehe nur der Inhalt bestimmen. */
@media (max-width: 40rem) {
.pagenav > * { flex: 0 0 auto; }
}
/* ============================================================
Navigation am Beitragsende — lockerer (27.08.2026)
Vorher klebten die drei Teile nebeneinander, der Kasten in der Mitte
drueckte die Nachbarn auf je 184 px, und die Videoreihe darunter
schloss ohne Luft an. Drei Aenderungen:
1. Die Rangfolge ist umgedreht. Gross und gruen ist jetzt die
RICHTUNG („Vorheriger Beitrag") — das ist die Entscheidung, die
der Leser trifft. Der Titel steht klein und leise darunter; er
erlaeutert nur, wohin es geht.
2. Die Liste rueckt auf eine EIGENE ZEILE unter die beiden Nachbarn
und ist ein schlichter Verweis statt eines Kastens.
3. Mehr Luft: nach oben zur Trennlinie, zwischen den Zeilen und nach
unten zur Videoreihe.
============================================================ */
.pagenav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"vor nach"
"hoch hoch";
gap: 1.7rem 2.4rem;
align-items: start;
margin-top: 2.2rem;
margin-bottom: 2.6rem;
padding-top: 1.5rem;
}
.pagenav__vor { grid-area: vor; }
.pagenav__nach { grid-area: nach; text-align: right; }
.pagenav__hoch { grid-area: hoch; justify-self: center; }
/* Die leeren Platzhalter braucht das Raster nicht mehr — fehlt ein
Nachbar, bleibt seine Zelle einfach leer, und der andere steht
trotzdem an seiner Seite. */
.pagenav__leer { display: none; }
/* Der Titel: klein, leise, hoechstens zwei Zeilen. */
.pagenav a {
max-width: none;
font-size: 0.85rem;
font-weight: 400;
line-height: 1.45;
color: var(--sef-text-leise);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Die Richtung: gross, gruen, mit Pfeil. Das ist der Teil, den man
liest, bevor man sich entscheidet. */
.pagenav a > span {
display: block;
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.3;
color: var(--sef-akzent);
margin-bottom: 0.15rem;
}
.pagenav__vor > span::before { content: "\2190\00a0"; }
.pagenav__nach > span::after { content: "\00a0\2192"; }
.pagenav a:hover > span,
.pagenav a:focus-visible > span { color: var(--sef-kontakt); }
/* Die Liste in der Mitte: kein Kasten, nur ein Verweis mit einer
feinen Unterkante. */
.pagenav__hoch {
display: inline-block;
border: 0;
border-bottom: 1px solid var(--sef-linie);
border-radius: 0;
padding: 0 0 0.2rem;
background: none;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--sef-akzent);
white-space: nowrap;
}
.pagenav__hoch:hover,
.pagenav__hoch:focus-visible {
background: none;
border-bottom-color: var(--sef-kontakt);
color: var(--sef-kontakt);
}
/* Am Telefon untereinander: erst die beiden Nachbarn, dann die Liste. */
@media (max-width: 40rem) {
.pagenav {
grid-template-columns: 1fr;
grid-template-areas: "vor" "nach" "hoch";
gap: 1.3rem;
}
.pagenav__nach { text-align: left; }
.pagenav__hoch { justify-self: start; }
}
/* ============================================================
Glossar — Ansicht 02 des Entwurfs (28.08.2026)
Vorher zerfielen 14 Begriffe in ZEHN Bloecke mit je einer grossen
Buchstaben-Ueberschrift — im Schnitt 1,4 Begriffe je Block. Der
Entwurf macht daraus eine durchgehende Liste; die Buchstaben stehen
als Sprungmarken darueber.
FARBEN: die der uebrigen Seite, nicht die des Entwurfsbildes.
Im Entwurf stehen die Begriffe in Stahlblau; auf der Website ist
ein anklickbarer Titel ueberall Rasen #17553a bei Gewicht 600 —
Blogtitel, Einstiege-Karte, Seitenspalte. Die Buchstabenleiste
uebernimmt die Knoepfe der Uebersicht: ruhend Kohle auf Weiss mit
Rand #c9c2b5, laufend Weiss auf Rasen, 40 px hoch, ohne Rundung.
Gemessen an der laufenden Seite, nicht geschaetzt.
============================================================ */
.glossar h1 { margin-bottom: 0.6rem; }
.glossar .einleitung { margin-bottom: 1.6rem; }
/* Das Suchfeld steht ueber der Buchstabenleiste. */
.glossar__suche { margin: 0 0 0.9rem; }
.glossar__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);
}
/* Die Buchstabenleiste SPRINGT, sie filtert nicht — im Entwurf ist „A"
hervorgehoben, waehrend darunter Begriffe mit F, H und T stehen. */
.glossar__buchstaben {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.8rem;
}
.glossar__buchstabe {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding-inline: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
color: var(--sef-text);
background: var(--sef-flaeche);
border: 1px solid var(--f-stark, #c9c2b5);
border-radius: 0;
text-decoration: none;
}
.glossar__buchstabe:hover,
.glossar__buchstabe:focus-visible {
border-color: var(--sef-akzent);
color: var(--sef-akzent);
}
.glossar__buchstabe.ist-an {
color: #ffffff;
background: var(--sef-akzent);
border-color: var(--sef-akzent);
}
/* Ein Buchstabe, zu dem die Suche nichts uebrig laesst, fuehrt ins
Leere — blass und nicht anspringbar. */
.glossar__buchstabe.ist-leer {
color: var(--sef-text-leise);
border-color: var(--sef-linie);
opacity: 0.4;
pointer-events: none;
}
/* Die Liste: ein Eintrag je Begriff, getrennt durch eine feine Linie —
keine Kaesten, keine Zwischenueberschriften. */
.glossar__eintrag {
padding: 0 0 1.3rem;
margin-bottom: 1.3rem;
border-bottom: 1px solid var(--sef-linie);
scroll-margin-top: 140px; /* der Kopf rastet ein und deckt sonst zu */
}
.glossar__eintrag:last-child { border-bottom: 0; }
.glossar__begriff {
margin: 0 0 0.35rem;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.3;
}
.glossar__begriff a {
color: var(--sef-akzent);
text-decoration: none;
}
.glossar__begriff a:hover,
.glossar__begriff a:focus-visible {
color: var(--sef-kontakt);
text-decoration: underline;
}
.glossar__erklaerung {
margin: 0;
max-width: var(--sef-zeilenlaenge);
font-size: 1rem;
line-height: 1.6;
color: var(--sef-text);
}
.glossar__leer { color: var(--sef-text-leise); }
/* Abschluss langer Listen und der Site-Seiten (28.08.2026).
Der Knopf steht VOR der Videoreihe: erst die Rueckkehr nach oben,
dann das Angebot weiterzugehen. */
.seitenende {
margin: 2.4rem 0 2.6rem;
}
.seitenende .btn { min-height: 44px; }
/* Der Kopf rastet ein und wuerde den Seitenanfang sonst zudecken. */
#inhalt { scroll-margin-top: 130px; }
/* ⚠ Nebenknoepfe, zum zweiten Mal (28.08.2026).
`.btn--zweit` steht in Zeile 111, die gruene Fuellung fuer `.btn` in
Zeile 400. Gleiche Spezifitaet — die spaetere Regel gewinnt, und ALLE
Nebenknoepfe der Seite waren gefuellt: „Alle 49 Beitraege in der
Uebersicht", „Weiterlesen", die Tasten der Werkbank.
Am 26.08. schon einmal behoben; beim Zusammenfuehren von
ergaenzung.css in user.css ist die Reparatur verlorengegangen.
Deshalb steht sie jetzt am ENDE des Blattes, wo keine spaetere Regel
sie mehr ueberholt.
Merksatz: Beim Zusammenfuehren zweier Stylesheets zaehlt die
Reihenfolge. Was im einen als Sonderfall NACH dem Grundfall steht,
kann im anderen davor landen. */
.btn--zweit,
.readmore .btn--zweit {
background: transparent;
color: var(--sef-text);
border: 1px solid #c9c2b5;
}
.btn--zweit:hover,
.btn--zweit:focus-visible,
.readmore .btn--zweit:hover {
background: transparent;
border-color: var(--sef-akzent);
color: var(--sef-akzent);
}
/* Videokacheln: gleiche Unterkante (28.08.2026)
Die Kacheln enden schon alle auf derselben Hoehe — das Raster streckt
sie. Ungleich war nur ihr INHALT: ein Titel braucht eine Zeile, der
naechste zwei, und dadurch sassen Dauer und Verweis um eine Zeilenhoehe
verschoben.
Behoben ueber die Ausrichtung, nicht ueber die Schriftgroesse: die
Kachel fuellt ihre Zelle, und die Dauer wird ans untere Ende
geschoben. Damit stehen Dauer und „Dazu der Artikel" bei jeder Kachel
auf derselben Linie — unabhaengig davon, ob der Titel eine Zeile
braucht oder drei.
Den Titel zu verkleinern haette dasselbe nur MEISTENS erreicht: lange
Titel wie „Sportclub: Ittrich über Fingerspitzengefühl" brechen auch
klein noch um. Und er waere so gross wie seine Nebenangaben gewesen. */
.videoreihe__stueck > .videokachel { flex: 1; }
.videokachel__dauer { margin-top: auto; }
/* Nachtrag: fester Platz fuer die Bildunterschrift (28.08.2026)
Mit `margin-top: auto` allein wandert der Leerraum: bei einzeiligem
Titel steht er zwischen Titel und Dauer, bei zweizeiligem gar nicht.
Gleiche Unterkante ja — gleicher Abstand nein.
Beides zugleich geht, wenn der Titel einen festen Platz bekommt.
Gemessen: von sechs Titeln brauchen vier zwei Zeilen, zwei brauchen
eine, KEINER braucht drei. Zwei Zeilen reserviert also genau richtig —
der Leerraum liegt dann immer im Titelblock, nie zwischen den
Angaben.
1.45 ist die Zeilenhoehe des Titels; 2.9em sind zwei Zeilen davon.
`margin-top: auto` an der Dauer bleibt als Netz: braeuchte ein
kuenftiger Titel doch drei Zeilen, stimmt die Unterkante trotzdem.
Am Telefon steht nur eine Kachel je Reihe. Dort ist jeder Titel
einzeilig, und reservierter Platz waere nur eine leere Zeile. */
@media (min-width: 48rem) {
.videokachel__titel { min-height: 2.9em; }
}
/* ============================================================
Nebenspalte der Unterseiten mit Leseempfehlungen (28.08.2026)
Die Startseite nutzte ihre Schiene ganz aus (640 + 44 + 300 = 984),
alle Unterseiten nur zu zwei Dritteln. Die Nebenspalte fuellt die
Rechnung auf — mit derselben Aufteilung wie die Startseite.
Sie sass zuerst LINKS. Gemessen auf einer Beitragsseite bei 1280 px:
Wortmarke, Menue, Kasten 141
H1, Text, Bild, Videoreihe 485
Der Beitrag stand damit 344 px neben allem anderen DERSELBEN Seite —
eine gebrochene Fluchtlinie, die man ohne jeden Seitenwechsel sieht.
Rechts stehen Rahmen und Text wieder auf 141.
Dazu kommt der Bestand: sieben Beitraege lassen ihr Bild LINKS
umfliessen, 300 px breit. Ein 300-px-Kasten daneben haette dieselbe
Breite an derselben Kante gehabt — zwei Dinge, die aussehen, als
gehoerten sie zusammen.
Der Text bleibt 640 breit. Die Lesbarkeit aendert sich nicht.
============================================================ */
.site-grid.mit-neben {
display: grid;
grid-template-columns: var(--sef-spalte) 300px;
gap: 44px;
align-items: start;
}
.site-grid.mit-neben > .container-component { grid-column: 1; grid-row: 1; }
.site-grid.mit-neben > .container-nebenspalte { grid-column: 2; grid-row: 1; min-width: 0; }
.empfehlung__stueck {
padding-bottom: 0.9rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--sef-linie);
}
.empfehlung__stueck:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.empfehlung__titel {
display: block;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--sef-akzent);
text-decoration: none;
}
.empfehlung__titel:hover,
.empfehlung__titel:focus-visible { color: var(--sef-kontakt); }
.empfehlung__anriss {
margin: 0.25rem 0 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--sef-text-leise);
}
/* Am Telefon: eine Spalte, Text zuerst, Kasten darunter mit Abstand. */
@media (max-width: 47.99rem) {
.site-grid.mit-neben { grid-template-columns: 1fr; gap: 2rem; }
.site-grid.mit-neben > .container-component { grid-column: 1; grid-row: 1; }
.site-grid.mit-neben > .container-nebenspalte { grid-column: 1; grid-row: 2; }
}
/* ============================================================
Kabine: Text und Fachbeschriftungen (28.08.2026)
Der Kabinentext steht als Kategoriebeschreibung und hat mehrere
Absaetze. Die zwei Beschriftungen „In Arbeit" und „Unter Verschluss"
trennen Werkstatt und Tresor — dieselbe Form wie „ZULETZT BEARBEITET"
in der Werkbank.
============================================================ */
.kabinentext { margin: 0 0 1.8rem; }
.kabinentext p { margin: 0 0 0.9rem; }
.kabinentext p:last-child { margin-bottom: 0; }
.kabine__fach {
margin: 1.8rem 0 0.6rem;
font-family: ui-monospace, Menlo, monospace;
font-size: 0.69rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sef-text-leise);
}
.kabine__fach + .gesperrt { margin-top: 0; }
/* Wer einen gesperrten Beitrag lesen darf, bekommt den Titel als
Verweis — er soll aber nicht aus der Zeile herausstechen. */
.gesperrt a { color: inherit; text-decoration: none; }
.gesperrt a:hover,
.gesperrt a:focus-visible { color: var(--sef-akzent); text-decoration: underline; }
/* ============================================================
Redaktion und Bearbeitungsmaske: Inhaltsspalte fuellt das
verbreiterte Raster (28.08.2026)
Beide Seiten setzen das Raster auf 1240 px, aber die Regel
`.site-grid:not(.mit-spalte) > .container-component` haelt die
Inhaltsspalte auf 640. Die Redaktionstabelle braucht 688 px —
ihre Titelspalte (1fr) fiel dadurch auf 0 und der Titel
verschwand hinter `overflow: hidden`.
Die Sprucheseite hat diese Regel seit dem 27.08. (Zeile 2312);
hier wird sie fuer die zwei aelteren Werkzeugseiten nachgeholt.
============================================================ */
body.redaktionsseite .site-grid > .container-component,
body.bearbeitenseite .site-grid > .container-component {
width: 100%;
/* `.container-component` ist global auf --sef-breite (1080) gedeckelt.
Ansicht 07 und 09 nennen 1240 — der Deckel muss hier weg. */
max-width: none;
}
/* ------------------------------------------------------------
Redaktionstabelle am Telefon (28.08.2026)
Die bisherigen Telefonregeln sprachen `.kategorie` und `.datum`
an — Klassen, die in der Auszeichnung nicht vorkommen. Der Titel
landete dadurch in der 24-px-Spalte des Zustandspunkts und war
hinter `overflow: hidden` unsichtbar (gemessen: 24 px breit).
Statt einzelne Klassen aufzuzaehlen, geht jetzt ALLES ausser dem
Zustandspunkt in die zweite Spalte. Das haelt auch, wenn die
Auszeichnung sich wieder aendert.
------------------------------------------------------------ */
@media (max-width: 47.99rem) {
.redaktion__zeile > *:not(.sef-status) { grid-column: 2; }
.redaktion__zeile .titel { white-space: normal; overflow: visible; font-weight: 600; }
.redaktion__zeile .zugriffe { text-align: left; }
}