/* ==========================================================================
darthmax78/contao-inventar – Basis-CSS (seit v1.1.0)
Inventar, Wiki-Elemente, Kalender-Bezug, Detailseite.
Lädt automatisch auf jeder Seite (InventarCssListener, eigenes im Kopf) – NACH den Stylesheets
des Layouts (Theme und custom.css). Hier stehen KEINE Farben: alles läuft über
Variablen, die jede Seite in ihrer custom.css festlegt. Vorgaben für
Stellschrauben stehen in :where(:root) (Spezifität 0) – ein :root-Wert in der
custom.css gewinnt also immer. Abschnittsnummern wie auf strenge-angelique.eu.
Pflicht-Variablen der Seite
- Palette: --sa-ebenholz --sa-nacht --sa-mahagoni --sa-mahagoni-hell --sa-messing
--sa-messing-tief --sa-messing-rgb --sa-ochsenblut --sa-rubin --sa-text
--sa-text-leise --sa-linie --sa-salbei --sa-salbei-rgb --sa-warn --sa-warn-rgb
--sa-rot-hell --sa-bernstein --sa-karte
- Schrift: --sa-schrift-titel --sa-schrift-zitat --sa-schrift-text --sa-schrift-ui
- Effekte: --sa-schatten-rgb --sa-schatten-staerke --sa-auf-akzent --sa-kachel-toenung
- rohrstock-Namen (Abschnitt 29): --rs-paper --rs-paper-shade --rs-tint --rs-line
--rs-line-strong --rs-muted --rs-text --rs-ink --rs-dark --rs-accent
--rs-accent-dark --rs-accent-light --rs-cognac --rs-cognac-dark --rs-ok
--rs-font-heading
- Epochen: je Kürzel eine Regel .epoche-- { --epoche: ; }
(dazu ggf. Tab-Anker und .erfahrung-) – nur in der Seite.
========================================================================== */
/* 28. Zuchtkalender-Filter (Modul „Zuchtkalender-Filter") -----------------
HTML: templates/frontend_module/kalender_filter.html.twig
Inaktiv: Mahagoni-Kästchen, Icon in der Badge-Farbe.
Aktiv: Farben des jeweiligen Badges (Abschnitt 26), „Alle" in Messing. */
body .sa-filter ul {
display: flex;
flex-wrap: wrap;
gap: .5em;
margin: 0 0 1.75em;
padding: 0;
list-style: none;
}
body .sa-filter li { margin: 0; padding: 0; }
body .sa-filter li::before,
body .sa-filter li::marker { content: none; }
body .sa-filter a.sa-filter-link {
display: inline-flex;
align-items: center;
gap: .5em;
padding: .5em 1em;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
color: var(--sa-text-leise);
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none;
transition: background-color .2s, border-color .2s, color .2s;
}
body .sa-filter a.sa-filter-link[class*="sa-badge--"]::before {
content: "";
width: 1.15em;
height: 1.15em;
background-color: var(--sa-badge-rand);
-webkit-mask: var(--sa-badge-icon) center / contain no-repeat;
mask: var(--sa-badge-icon) center / contain no-repeat;
}
body .sa-filter a.sa-filter-link:hover,
body .sa-filter a.sa-filter-link:focus-visible {
background: var(--sa-mahagoni-hell);
border-color: var(--sa-messing-tief);
color: var(--sa-text);
}
/* Aktiv */
body .sa-filter a.sa-filter-link.is-aktiv {
background: var(--sa-messing);
border-color: var(--sa-messing);
color: var(--sa-ebenholz);
}
body .sa-filter a.sa-filter-link.is-aktiv[class*="sa-badge--"] {
background: var(--sa-badge-grund);
border-color: var(--sa-badge-rand);
color: var(--sa-badge-text);
}
body .sa-filter a.sa-filter-link.is-aktiv[class*="sa-badge--"]::before { background-color: currentColor; }
body .sa-filter a.sa-filter-link.is-aktiv.sa-badge--lieferung { background: rgba(var(--sa-messing-rgb), .14); }
/* 28b. Filter: gleiche Höhe und Zentrierung ---------------------------------
Alle Schaltflächen gleich hoch, egal ob mit oder ohne Icon.
Zentrieren: CSS-Klasse „centered" am Modul (Experteneinstellungen). */
body .sa-filter ul { align-items: center; }
body .sa-filter li { display: flex; }
body .sa-filter a.sa-filter-link {
box-sizing: border-box;
height: 2.5rem;
margin: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
vertical-align: middle;
}
body .centered .sa-filter ul,
body .sa-filter.centered ul { justify-content: center; }
/* 29. Inventar – Der Schrank und Die Shops (Paket sa-05) -------------------
Übernommen von rohrstock.at (dort Abschnitt 6). Die Regeln verwenden --rs-*;
jede Seite legt diese Variablen fest (strenge-angelique: Brücke auf --sa-*).
Epochen: .epoche-- setzt --epoche – die Zuordnung Kürzel → Farbe steht
in der custom.css der Seite. */
/* Tab-Inhalt als Tafel (auf rohrstock war der Seitengrund selbst das Papier) */
.has-tabs .inventar-tab-panel { background: var(--rs-paper); }
/* Überschriften im Inventar: h2-Etiketten in UI-Schrift statt Cinzel-Versal */
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-karte-kopf h2,
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-zuchtflaechen h2,
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-bewertung h2 {
font-family: var(--sa-schrift-ui);
}
/* Text in Epochenfarbe – nur für Labels, Nummern, kurze Überschriften,
nicht für Fließtext */
.epoche-text {
color: var(--epoche, var(--rs-accent));
}
/* Farbstreifen links, z. B. für Eintragskarten oder Textblöcke */
.epoche-rand {
border-left: 4px solid var(--epoche, var(--rs-accent));
padding-left: 1em;
}
/* Kleiner Punkt vor einem Text, z. B. in Listen und Legenden
HTML: Linda */
.epoche-punkt::before {
content: "";
display: inline-block;
width: 0.65em;
height: 0.65em;
margin-right: 0.45em;
border-radius: 50%;
vertical-align: 0.05em;
background: var(--epoche, var(--rs-accent));
}
/* Badge mit weißer Schrift (Inventarnummer, Epochenname)
HTML: BR-01 */
.epoche-badge {
display: inline-block;
padding: 0.2em 0.7em;
border-radius: 999px;
font-size: 0.85em;
font-weight: bold;
letter-spacing: 0.03em;
line-height: 1.4;
color: var(--sa-ebenholz);
background: var(--epoche, var(--rs-accent));
}
/* Legende aller Epochen nebeneinander
HTML: */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.epoche-legende {
display: flex;
flex-wrap: wrap;
gap: 0.5em 1.5em;
margin: 1em 0;
padding: 0;
list-style: none;
font-size: 0.9em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.epoche-legende > li {
margin: 0;
padding: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.epoche-legende > li:not(.epoche-punkt)::before {
content: none;
}
/* ----------------------------------------------------------
Inventar – Detailseite eines Instruments (Modul „Inventar-Leser“)
Template: contao/templates/frontend_module/inventar_leser.html.twig
Baut auf den Epochen-Klassen (.epoche--*) und Bausteinen
(.epoche-badge, .epoche-punkt) weiter oben in diesem Abschnitt auf.
---------------------------------------------------------- */
.inventar-eintrag {
--karte-bg: var(--sa-karte);
--epoche-hell: color-mix(in srgb, var(--epoche, var(--rs-accent)) 8%, var(--rs-paper));
--zf-gut: var(--sa-salbei);
--zf-bedingt: var(--sa-bernstein);
--zf-schlecht: var(--sa-rot-hell);
}
/* ── Breadcrumb ── */
.inventar-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 0.25em 0;
margin: 0 0 1.5em;
padding: 1em 0 0;
list-style: none;
font-size: 0.8em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rs-muted);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-breadcrumb li {
margin: 0;
padding: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-breadcrumb li::before {
content: none;
}
.inventar-breadcrumb li + li::before {
content: "›" !important;
display: inline !important;
margin: 0 0.6em;
color: var(--rs-line-strong);
}
.inventar-breadcrumb a {
color: var(--rs-muted);
text-decoration: none;
}
.inventar-breadcrumb a:is(:hover, :focus-visible) {
color: var(--rs-accent);
}
.inventar-breadcrumb [aria-current] {
color: var(--epoche, var(--rs-accent));
font-weight: bold;
}
/* ── Kopf ── */
.inventar-kopf {
margin: 0 0 1.75em;
text-align: center;
}
.inventar-kicker {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5em 1em;
margin: 0 0 0.75em;
font-size: 0.85em;
color: var(--rs-muted);
}
.inventar-kicker .epoche-badge {
font-size: 1em;
letter-spacing: 0.08em;
}
.inventar-position {
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-titel {
margin: 0 auto 0.4em;
max-width: 22em;
text-wrap: balance;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat {
position: relative;
width: fit-content;
max-width: 40em;
margin: 1em auto 0;
padding: 0 1.5em;
border: 0;
font-family: var(--sa-schrift-zitat);
font-size: 1.3em;
font-style: italic;
line-height: 1.5;
color: var(--rs-text);
}
.inventar-zitat p {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat::before,
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat::after {
position: absolute;
top: auto;
bottom: auto;
left: auto;
right: auto;
margin: 0;
font-size: 2.4em;
font-weight: bold;
line-height: 1;
opacity: 1;
color: color-mix(in srgb, var(--epoche, var(--rs-accent)) 45%, transparent);
}
/* Deutsche Anführung: „ links oben am Textanfang, “ rechts unten am Textende */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat::before { content: "„"; left: -0.15em; top: -0.55em; }
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat::after { content: "“"; right: -0.15em; bottom: -0.55em; }
@media screen and (max-width: 599px) {
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) blockquote.inventar-zitat {
margin-left: auto;
}
}
/* ── Panoramabild ── */
.inventar-panorama {
margin: 0 0 2em;
}
.inventar-panorama figure {
margin: 0;
}
.inventar-panorama img {
display: block;
width: 100%;
height: auto;
}
/* ── Steckbrief: Inventarkarte + Zuchtflächen ── */
.inventar-steckbrief {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 1.5em;
align-items: start;
margin: 0 0 2.5em;
}
@media (max-width: 800px) {
.inventar-steckbrief {
grid-template-columns: 1fr;
}
}
/* Inventarkarte im Stil einer Archiv-Karteikarte */
.inventar-karte {
position: relative;
padding: 0 1.25em 1.1em;
border: 1px solid var(--rs-line);
border-top: 6px solid var(--epoche, var(--rs-accent));
border-radius: 3px;
background: var(--karte-bg);
box-shadow: 2px 3px 0 var(--rs-tint), 0 1px 6px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
}
.inventar-karte-kopf {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1em;
margin: 0 -1.25em 0.9em;
padding: 0.75em 1.25em 0.6em;
border-bottom: 2px solid color-mix(in srgb, var(--epoche, var(--rs-accent)) 35%, var(--rs-line));
background: var(--epoche-hell);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-karte-kopf h2 {
margin: 0;
font-size: 0.85em;
font-weight: bold;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--epoche, var(--rs-accent));
}
.inventar-karte-nr {
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
font-size: 0.95em;
font-weight: bold;
letter-spacing: 0.05em;
color: var(--rs-ink);
}
.inventar-karte-label {
display: block;
font-size: 0.72em;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rs-muted);
}
/* Intensität: fünf Punkte */
.inventar-intensitaet {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 0.3em 0.8em;
margin: 0 0 0.9em;
}
.inventar-intensitaet .inventar-karte-label {
grid-column: 1 / -1;
}
.intensitaet-skala {
display: inline-flex;
gap: 0.3em;
}
.intensitaet-punkt {
width: 0.95em;
height: 0.95em;
border: 2px solid var(--rs-accent);
border-radius: 50%;
background: transparent;
}
.intensitaet-punkt.is-aktiv {
background: var(--rs-accent);
}
.intensitaet-text {
font-weight: bold;
color: var(--rs-accent);
}
/* Daten der Karteikarte */
.inventar-karte-daten {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.35em 1em;
margin: 0;
font-size: 0.92em;
}
.inventar-karte-daten dt,
.inventar-karte-daten dd {
padding-bottom: 0.35em;
border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 55%, transparent);
}
.inventar-karte-daten dt {
margin: 0;
font-weight: bold;
color: var(--rs-ink);
}
.inventar-karte-daten dd {
margin: 0;
padding: 0;
color: var(--rs-text);
}
@media (max-width: 420px) {
.inventar-karte-daten {
grid-template-columns: 1fr;
gap: 0;
}
.inventar-karte-daten dt {
padding-bottom: 0;
border-bottom: 0;
}
.inventar-karte-daten dd {
margin-bottom: 0.5em;
}
}
.inventar-karte-fuss {
margin: 1em -1.25em -1.1em;
padding: 0.8em 1.25em 1em;
border-top: 1px dashed var(--rs-line);
background: var(--karte-bg);
}
.inventar-karte-fuss p {
margin: 0 0 0.6em;
}
.inventar-karte-fuss p:last-child {
margin-bottom: 0;
}
.inventar-einsatz {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3em 1em;
font-size: 0.9em;
}
.inventar-einsatz .inventar-karte-label {
flex-basis: 100%;
}
.inventar-auszeichnungen {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
}
/* Auszeichnungen */
.auszeichnung {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.25em 0.75em;
border-radius: 999px;
font-size: 0.82em;
font-weight: bold;
letter-spacing: 0.02em;
line-height: 1.3;
}
.auszeichnung--pet {
color: var(--epoche, var(--rs-cognac-dark));
border: 1.5px solid currentColor;
background: color-mix(in srgb, currentColor 8%, var(--karte-bg));
}
.auszeichnung--albtraum {
color: var(--sa-text);
background: var(--rs-dark);
border: 1.5px solid var(--rs-accent);
}
.auszeichnung--albtraum::before {
content: "";
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--rs-accent-light);
}
/* Zuchtflächen-Raster */
.inventar-zuchtflaechen {
padding: 1em 1.25em 1.1em;
border: 1px solid var(--rs-line);
border-radius: 3px;
background: var(--rs-paper);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-zuchtflaechen h2 {
margin: 0 0 0.8em;
font-size: 0.85em;
font-weight: bold;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rs-ink);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.zf-raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr));
gap: 0.45em;
margin: 0;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.zf-raster > li {
margin: 0;
}
@media (min-width: 801px) {
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-steckbrief ul.zf-raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-steckbrief .zf-raster .zf {
padding-block: 0.7em;
}
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.zf-raster > li::before {
content: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .zf-raster .zf {
display: flex;
flex-direction: column;
gap: 0.1em;
padding: 0.5em 0.7em 0.5em 0.85em;
border: 1px solid var(--rs-line);
border-left: 4px solid var(--zf-farbe, var(--rs-line));
border-radius: 3px;
background: color-mix(in srgb, var(--zf-farbe, var(--rs-line)) 10%, var(--rs-paper));
}
.zf-name {
font-weight: bold;
font-size: 0.9em;
color: var(--rs-ink);
}
.zf-status {
font-size: 0.78em;
color: var(--zf-farbe, var(--rs-muted));
}
.zf--geeignet { --zf-farbe: var(--zf-gut); }
.zf--bedingt { --zf-farbe: var(--zf-bedingt); }
.zf--ungeeignet { --zf-farbe: var(--zf-schlecht); }
.zf-raster .zf--ungeeignet .zf-name {
color: var(--rs-muted);
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, var(--zf-schlecht) 50%, transparent);
}
.zf-raster .zf--offen {
border-style: dashed;
background: transparent;
}
.zf-legende {
display: flex;
flex-wrap: wrap;
gap: 0.4em 1.2em;
margin: 0.9em 0 0;
font-size: 0.78em;
color: var(--rs-muted);
}
.zf-legende .zf::before {
content: "";
display: inline-block;
width: 0.7em;
height: 0.7em;
margin-right: 0.4em;
border-radius: 2px;
vertical-align: -0.05em;
background: var(--zf-farbe);
}
/* ── Freier Inhaltsbereich ── */
.inventar-inhalt {
margin: 0 0 2.5em;
}
/* ── Erfahrungen der Erzieher (Tabs) ── */
.inventar-erfahrungen {
margin: 2.5em 0;
clear: both;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-erfahrungen > h2 {
text-align: center;
}
.inventar-tabs-nav {
display: none; /* erst mit JavaScript sichtbar */
}
.has-tabs .inventar-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 0.3em;
border-bottom: 1px solid var(--rs-line);
}
.has-tabs .inventar-tab-panel[hidden] {
display: none;
}
.inventar-erfahrungen .inventar-tab {
position: relative;
margin: 0 0 -1px;
padding: 0.7em 1.2em 0.6em;
border: 1px solid var(--rs-line);
border-top: 3px solid var(--epoche);
border-bottom: 0;
border-radius: 3px 3px 0 0;
font: inherit;
font-size: 0.9em;
font-weight: bold;
color: var(--rs-text);
text-shadow: none;
background: var(--rs-paper-shade);
box-shadow: none;
cursor: pointer;
}
.inventar-erfahrungen .inventar-tab:is(:hover, :focus-visible) {
color: var(--epoche);
background: var(--rs-paper);
background-image: none;
}
.inventar-erfahrungen .inventar-tab.is-aktiv {
color: var(--epoche);
background: var(--rs-paper);
background-image: none;
box-shadow: 0 1px 0 var(--rs-paper);
}
.inventar-tab-pet {
color: var(--rs-cognac);
}
.inventar-tab-panel {
padding: 1.25em 0 0;
}
.has-tabs .inventar-tab-panel {
padding: 1.5em 1.5em 1em;
border: 1px solid var(--rs-line);
border-top: 0;
border-radius: 0 0 3px 3px;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-tab-panel h3 {
margin-top: 0;
color: var(--epoche);
}
@media (max-width: 599px) {
.has-tabs .inventar-tab-panel {
padding: 1em 0.9em;
}
.inventar-erfahrungen .inventar-tab {
flex: 1 1 45%;
padding: 0.6em 0.7em;
}
}
/* Hinweis „folgt noch“ – wie die Stub-Box, in Epochenfarbe */
.inventar-hinweis {
padding: 0.9em 1.2em;
border: 1px solid color-mix(in srgb, var(--epoche) 30%, var(--rs-line));
border-left: 4px solid var(--epoche);
border-radius: 3px;
color: var(--rs-text);
background: color-mix(in srgb, var(--epoche) 6%, var(--rs-paper));
}
.inventar-hinweis p {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-hinweis h3 {
margin: 0 0 0.3em;
font-size: 1.05em;
}
.inventar-hinweis--leise {
font-style: italic;
border-left-color: var(--rs-line-strong);
background: var(--rs-paper-shade);
}
/* ── Maße & Strafmaß ── */
.inventar-details {
display: grid;
gap: 0.6em;
margin: 0 0 2.5em;
}
.inventar-akkordeon {
border: 1px solid var(--rs-line);
border-radius: 3px;
background: var(--rs-paper);
}
.inventar-akkordeon > summary {
position: relative;
padding: 0.85em 2.8em 0.85em 1.2em;
font-weight: bold;
color: var(--rs-text);
list-style: none;
cursor: pointer;
}
.inventar-akkordeon > summary::-webkit-details-marker {
display: none;
}
.inventar-akkordeon > summary::after {
content: "+";
position: absolute;
right: 1.1em;
top: 50%;
transform: translateY(-50%);
font-size: 1.3em;
font-weight: normal;
color: var(--rs-muted);
}
.inventar-akkordeon[open] > summary::after {
content: "–";
}
.inventar-akkordeon > summary:is(:hover, :focus-visible) {
color: var(--rs-accent);
}
.inventar-akkordeon[open] > summary {
border-bottom: 1px solid var(--rs-line);
}
.inventar-masse {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
gap: 1em 2em;
padding: 1.1em 1.2em 1.2em;
background: var(--rs-tint);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-masse h3 {
margin: 0 0 0.5em;
font-size: 0.8em;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rs-muted);
}
.inventar-masse dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25em 1em;
margin: 0;
}
.inventar-masse dt {
margin: 0;
font-weight: bold;
color: var(--rs-ink);
}
.inventar-masse dd {
margin: 0;
padding: 0;
}
.inventar-strafmass {
overflow-x: auto;
padding: 0.8em 1em 1em;
background: var(--rs-tint);
}
.inventar-strafmass table {
width: 100%;
min-width: 32em;
border-collapse: collapse;
font-size: 0.88em;
background: var(--rs-paper);
}
.inventar-strafmass th,
.inventar-strafmass td {
padding: 0.55em 0.7em;
border: 1px solid var(--rs-line);
text-align: left;
vertical-align: top;
}
.inventar-strafmass thead th {
font-size: 0.85em;
letter-spacing: 0.04em;
color: var(--rs-ink);
background: var(--rs-paper-shade);
}
.inventar-strafmass tbody th {
white-space: nowrap;
font-weight: bold;
border-left: 4px solid var(--stufe-farbe, var(--rs-line));
color: var(--rs-ink);
}
.inventar-strafmass td {
color: var(--rs-text);
}
/* Stufen: steigende Intensität im Akzentton */
.inventar-strafmass .stufe--mild { --stufe-farbe: color-mix(in srgb, var(--rs-accent) 20%, var(--rs-paper)); }
.inventar-strafmass .stufe--ermahnung { --stufe-farbe: color-mix(in srgb, var(--rs-accent) 40%, var(--rs-paper)); }
.inventar-strafmass .stufe--normal { --stufe-farbe: color-mix(in srgb, var(--rs-accent) 60%, var(--rs-paper)); }
.inventar-strafmass .stufe--streng { --stufe-farbe: color-mix(in srgb, var(--rs-accent) 80%, var(--rs-paper)); }
.inventar-strafmass .stufe--wuetend { --stufe-farbe: var(--rs-accent); }
/* ── Blättern ── */
.inventar-blaettern {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
margin: 0 0 2em;
padding-top: 1.5em;
border-top: 1px solid var(--rs-line);
}
.inventar-blaettern a {
display: flex;
flex-direction: column;
gap: 0.2em;
padding: 0.8em 1em;
border: 1px solid var(--rs-line);
border-radius: 3px;
text-decoration: none;
color: var(--rs-text);
background: var(--rs-paper);
transition: border-color 0.2s, background-color 0.2s;
}
.inventar-blaettern a:is(:hover, :focus-visible) {
border-color: var(--rs-accent);
background: var(--rs-paper-shade);
}
.inventar-blaettern-next {
grid-column: 2;
text-align: right;
}
.inventar-blaettern-richtung {
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rs-accent);
}
.inventar-blaettern-titel {
font-size: 0.9em;
}
@media (max-width: 599px) {
.inventar-blaettern {
grid-template-columns: 1fr;
}
.inventar-blaettern-next {
grid-column: 1;
}
}
/* Link per Insert-Tag {{inventar::…}} */
a.inventar-link {
text-decoration-style: dotted;
text-underline-offset: 0.18em;
}
/* ── Detailseite: Silbentrennung für Blocksatz (weniger Löcher) ── */
.inventar-eintrag .rte p,
.inventar-eintrag .inventar-erfahrung-text p {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 7 3 3;
}
/* ----------------------------------------------------------
Inventar – Detailseite, Ergänzung 2b
Bewertung (frühere Skill Bars), Sprungleiste, Kartenleiste
„Weitere …“ und Blättern über Sub-Kategorien hinweg.
---------------------------------------------------------- */
/* ── Rechte Spalte im Steckbrief: Zuchtflächen + Bewertung ── */
.inventar-steckbrief-seite {
display: flex;
flex-direction: column;
gap: 1.5em;
min-width: 0;
}
/* ── Bewertung ── */
.inventar-bewertung {
padding: 1em 1.25em 1.1em;
border: 1px solid var(--rs-line);
border-radius: 3px;
background: var(--rs-paper);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-bewertung h2 {
margin: 0 0 0.9em;
font-size: 0.85em;
font-weight: bold;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rs-ink);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.bewertung-liste {
display: grid;
gap: 0.85em;
margin: 0;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.bewertung-liste > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.bewertung-liste > li::before {
content: none;
}
.bewertung {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 0.3em 1em;
}
.bewertung-label {
font-size: 0.78em;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rs-ink);
}
.bewertung-wert {
justify-self: end;
font-size: 0.78em;
letter-spacing: 0.06em;
text-align: right;
text-transform: uppercase;
color: var(--rs-muted);
}
.bewertung-skala {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
}
.bewertung-segment {
height: 0.55em;
background: color-mix(in srgb, var(--epoche, var(--rs-accent)) 14%, var(--rs-paper));
}
.bewertung-segment:first-child {
border-radius: 2px 0 0 2px;
}
.bewertung-segment:last-child {
border-radius: 0 2px 2px 0;
}
.bewertung-segment.is-aktiv {
background: var(--epoche, var(--rs-accent));
}
/* ── Sprungleiste (wird per JavaScript unter dem Header fixiert) ── */
.inventar-sprung-huelle {
margin: 0 0 2.5em;
}
.inventar-sprung {
position: relative;
z-index: 15;
border-block: 1px solid var(--rs-line);
background: var(--rs-paper);
box-shadow: 0 6px 8px -8px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
}
.inventar-sprung[hidden] {
display: none;
}
.inventar-sprung.is-fixiert {
position: fixed;
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-sprung-liste {
display: flex;
justify-content: safe center;
gap: 0.25em;
margin: 0;
padding: 0.45em 0.25em;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* weiche Kanten deuten an, dass sich die Leiste wischen lässt */
mask-image: linear-gradient(to right, transparent, #000 1em, #000 calc(100% - 1em), transparent);
}
.inventar-sprung-liste::-webkit-scrollbar {
display: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-sprung-liste > li {
flex: none;
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-sprung-liste > li::before {
content: none;
}
.inventar-sprung-liste a {
display: block;
padding: 0.4em 0.75em;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.72em;
font-weight: bold;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--rs-muted);
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.inventar-sprung-liste a:is(:hover, :focus-visible) {
color: var(--rs-accent);
}
.inventar-sprung-liste a.is-aktiv {
border-color: color-mix(in srgb, var(--epoche, var(--rs-accent)) 35%, transparent);
color: var(--epoche, var(--rs-accent));
background: var(--epoche-hell);
}
/* ── Kartenleiste „Weitere …“ (gleiche Sub-Kategorie) ── */
.inventar-reihe {
margin: 0 0 2em;
padding-top: 1.5em;
border-top: 1px solid var(--rs-line);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-reihe h2 {
margin: 0 0 0.8em;
text-align: center;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-reihe-liste {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(9.5em, 11em);
gap: 0.75em;
margin: 0;
padding: 0.25em 0.1em 0.75em;
list-style: none;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-reihe-liste > li {
margin: 0;
scroll-snap-align: start;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ol.inventar-reihe-liste > li::before {
content: none;
}
.inventar-reihe-eintrag a {
display: flex;
flex-direction: column;
gap: 0.3em;
height: 100%;
padding: 0.5em 0.5em 0.65em;
border: 1px solid var(--rs-line);
border-radius: 3px;
text-decoration: none;
color: var(--rs-text);
background: var(--karte-bg);
transition: border-color 0.2s, transform 0.2s;
}
.inventar-reihe-eintrag a:is(:hover, :focus-visible) {
border-color: var(--rs-accent);
transform: translateY(-2px);
}
.inventar-reihe-eintrag.is-aktiv a {
border: 2px solid var(--epoche, var(--rs-accent));
background: var(--epoche-hell);
}
.inventar-reihe-bild {
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
margin-bottom: 0.2em;
background: var(--rs-paper);
}
.inventar-reihe-bild :is(img, picture) {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.inventar-reihe-nr {
font-size: 0.72em;
font-weight: bold;
letter-spacing: 0.08em;
color: var(--epoche, var(--rs-accent));
}
.inventar-reihe-titel {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
font-size: 0.8em;
line-height: 1.35;
}
/* ── Blättern: Übergang zur nächsten Sub-Kategorie ── */
.inventar-blaettern a.is-kategorie {
border-style: dashed;
}
/* Zuchtflächen am Handy zweispaltig statt zehn Kacheln untereinander */
@media (max-width: 800px) {
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-steckbrief ul.zf-raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-steckbrief .zf-raster .zf {
padding: 0.45em 0.55em 0.45em 0.7em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-steckbrief .zf-name {
font-size: 0.82em;
}
}
/* ----------------------------------------------------------
Inventar – Einstiegsseite (Stufe 3a)
Module „Inventar-Zahlen“ (Zählerboxen + Gesamtfortschritt)
und „Inventar-Raster“ (Kategorie-Kacheln mit Fortschritt).
---------------------------------------------------------- */
:where(:root) {
--inv-fertig: var(--rs-ok); /* Moosgrün – wie „geeignet“ bei den Zuchtflächen */
--inv-arbeit: var(--sa-bernstein); /* wie „bedingt“ */
--inv-offen: rgba(var(--sa-messing-rgb), .3);
}
/* ── Fortschrittsbalken (SVG) ── */
.inventar-balken {
display: block;
width: 100%;
height: 0.5em;
border-radius: 2px;
overflow: hidden;
}
.inventar-balken-offen { fill: var(--inv-offen); }
.inventar-balken-fertig { fill: var(--inv-fertig); }
.inventar-balken-arbeit { fill: var(--inv-arbeit); }
/* ── Gesamtfortschritt unter den Zählerboxen ── */
.inventar-fortschritt--gesamt {
max-width: 46em;
margin: 1.5em auto 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-fortschritt-kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.25em 1em;
margin: 0 0 0.5em;
}
.inventar-fortschritt-titel {
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rs-ink);
}
.inventar-fortschritt-wert {
font-size: 0.85em;
color: var(--rs-muted);
}
.inventar-fortschritt-wert strong {
color: var(--inv-fertig);
}
.inventar-fortschritt--gesamt .inventar-balken {
height: 0.75em;
}
.inventar-fortschritt-prozent {
font-family: var(--rs-font-heading);
font-size: 1.6em;
line-height: 1;
color: var(--inv-fertig);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-fortschritt-fuss {
margin: 0.45em 0 0;
font-size: 0.85em;
text-align: right;
color: var(--rs-muted);
}
.inventar-fortschritt-fuss strong {
color: var(--inv-fertig);
}
/* ── Kategorie-Raster ── */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
gap: 1.25em;
margin: 1.5em 0 1em;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster > li::before {
content: none;
}
.inventar-kachel {
display: flex;
flex-direction: column;
gap: 0.6em;
padding: 0 0 1em;
border: 1px solid var(--rs-line);
border-radius: 3px;
background: var(--rs-paper);
box-shadow: 0 1px 4px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.inventar-kachel:not(.is-vorbereitung):is(:hover, :focus-within) {
border-color: var(--rs-accent);
box-shadow: 0 4px 12px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
transform: translateY(-2px);
}
.inventar-kachel > :not(.inventar-kachel-link) {
margin-inline: 1em;
}
a.inventar-kachel-link,
div.inventar-kachel-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
a.inventar-kachel-link:hover {
text-decoration: none;
}
.inventar-kachel-bild {
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rs-paper-shade);
}
.inventar-kachel-bild :is(img, picture) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.inventar-kachel:hover .inventar-kachel-bild img {
transform: scale(1.04);
}
.inventar-kachel-kuerzel {
font-family: var(--rs-font-heading);
font-size: 3em;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--rs-accent) 35%, var(--rs-paper-shade));
}
.inventar-kachel-kopf {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5em;
padding: 0.8em 1em 0;
}
.inventar-kachel-titel {
font-family: var(--rs-font-heading);
font-size: 1.3em;
line-height: 1.2;
color: var(--rs-accent);
}
.inventar-kachel-anzahl {
flex: none;
font-size: 0.75em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rs-muted);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-kachel-teaser {
margin-block: 0;
font-size: 0.85em;
line-height: 1.45;
color: var(--rs-text);
}
.inventar-kachel .inventar-fortschritt {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.6em;
}
.inventar-kachel .inventar-fortschritt-wert {
font-size: 0.75em;
white-space: nowrap;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-kachel-subs {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
margin-block: 0.1em 0;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-kachel-subs > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-kachel-subs > li::before {
content: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs :is(a, span) {
display: inline-block;
padding: 0.25em 0.75em;
border: 1px solid var(--rs-line-strong);
border-radius: 999px;
font-size: 0.78em;
line-height: 1.4;
text-decoration: none;
color: var(--rs-ink);
background: var(--rs-paper-shade);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs a:is(:hover, :focus-visible) {
border-color: var(--rs-accent);
color: var(--sa-ebenholz);
background: var(--rs-accent);
}
/* Sub-Kategorie ohne eigene Seite */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs span {
border-style: dashed;
}
/* Bearbeitungsstand der Sub-Kategorie: Punkt in Statusfarbe */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs :is(a, span)::before {
content: "";
display: inline-block;
width: 0.55em;
height: 0.55em;
margin-right: 0.45em;
border-radius: 50%;
vertical-align: 0.05em;
background: var(--inv-offen);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs .is-in-arbeit :is(a, span)::before { background: var(--inv-arbeit); }
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs .is-fertig :is(a, span)::before { background: var(--inv-fertig); }
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs a:is(:hover, :focus-visible)::before { background: var(--sa-ebenholz); }
/* noch nicht begonnen: grau */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs .is-offen :is(a, span) {
color: var(--rs-muted);
background: transparent;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-kachel-subs .is-fertig :is(a, span) {
border-color: var(--inv-fertig);
}
/* Kachel noch nicht begonnen: Bild entsättigt, Titel grau */
.inventar-kachel.is-offen .inventar-kachel-bild {
filter: grayscale(0.85);
opacity: 0.75;
}
.inventar-kachel.is-offen .inventar-kachel-titel {
color: var(--rs-muted);
}
.inventar-kachel.is-offen:is(:hover, :focus-within) .inventar-kachel-bild {
filter: none;
opacity: 1;
}
/* Kategorie noch ohne Inhalte */
.inventar-kachel.is-vorbereitung {
background: transparent;
box-shadow: none;
border-style: dashed;
}
.inventar-kachel.is-vorbereitung .inventar-kachel-bild {
filter: grayscale(1);
opacity: 0.55;
}
.inventar-kachel.is-vorbereitung .inventar-kachel-titel {
color: var(--rs-muted);
}
/* Legende */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-legende {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em 1.25em;
margin: 0.5em 0 2em;
font-size: 0.8em;
color: var(--rs-muted);
}
.inventar-legende span::before {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-right: 0.4em;
border-radius: 2px;
vertical-align: -0.08em;
background: var(--inv-offen);
}
.inventar-legende span.inventar-legende-fertig::before { background: var(--inv-fertig); }
.inventar-legende span.inventar-legende-arbeit::before { background: var(--inv-arbeit); }
/* ── Detailseite: Bearbeitungsstand im Kopf ── */
.inventar-status {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.15em 0.7em;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.85em;
letter-spacing: 0.04em;
color: var(--rs-muted);
}
.inventar-status::before {
content: "";
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: currentColor;
}
.inventar-status--fertig { color: var(--inv-fertig); }
.inventar-status--in-arbeit { color: var(--inv-arbeit); }
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-status-hinweis {
margin: -0.25em auto 0.75em;
font-size: 0.8em;
font-style: italic;
text-align: center;
color: var(--rs-muted);
}
/* ----------------------------------------------------------
Inventar – Kategorie-Seiten (Stufe 3b)
Module „Inventar-Navigation“, „Inventar-Liste“ sowie die
Kategorie-Variante von „Inventar-Zahlen“ und „Inventar-Raster“.
---------------------------------------------------------- */
/* ── Kategorie-Leiste ── */
.inventar-katnav {
margin: 0 0 0.25em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-katnav-liste,
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-subnav-liste {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-katnav-liste {
gap: 0.3em 0.2em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) :is(.inventar-katnav-liste, .inventar-subnav-liste) > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) :is(.inventar-katnav-liste, .inventar-subnav-liste) > li::before {
content: none;
}
.inventar-katnav-liste :is(a, span) {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.45em 0.75em;
border-bottom: 2px solid transparent;
font-size: 0.8em;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: var(--rs-text);
}
.inventar-katnav-liste > li:not(.inventar-katnav-start) :is(a, span)::before {
content: "";
flex: none;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: var(--inv-offen);
}
.inventar-katnav-liste .is-in-arbeit :is(a, span)::before { background: var(--inv-arbeit); }
.inventar-katnav-liste .is-fertig :is(a, span)::before { background: var(--inv-fertig); }
.inventar-katnav-liste span {
color: var(--rs-muted);
opacity: 0.7;
}
.inventar-katnav-liste a:is(:hover, :focus-visible) {
color: var(--rs-accent);
border-bottom-color: var(--rs-line-strong);
text-decoration: none;
}
.inventar-katnav-liste .is-aktiv a {
font-weight: bold;
color: var(--rs-accent);
border-bottom-color: var(--rs-accent);
}
.inventar-katnav-start a {
color: var(--rs-muted);
}
/* ── Sub-Kategorie-Chips ── */
.inventar-subnav {
margin: 0 0 1.5em;
padding: 0.9em 0 0;
border-top: 1px solid var(--rs-tint);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-subnav-liste {
gap: 0.5em;
}
.inventar-subnav-liste a {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.35em 0.9em;
border: 1px solid var(--rs-line-strong);
border-radius: 999px;
font-size: 0.85em;
line-height: 1.4;
text-decoration: none;
color: var(--rs-ink);
background: var(--rs-paper-shade);
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.inventar-subnav-liste > li:not(.inventar-subnav-alle) a::before {
content: "";
flex: none;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--inv-offen);
}
.inventar-subnav-liste .is-in-arbeit a::before { background: var(--inv-arbeit); }
.inventar-subnav-liste .is-fertig a::before { background: var(--inv-fertig); }
.inventar-subnav-liste .is-offen a {
color: var(--rs-muted);
background: transparent;
}
.inventar-subnav-liste a:is(:hover, :focus-visible),
.inventar-subnav-liste .is-aktiv a {
border-color: var(--rs-accent);
color: var(--sa-ebenholz);
background: var(--rs-accent);
text-decoration: none;
}
.inventar-subnav-liste :is(a:hover, a:focus-visible, .is-aktiv a)::before {
background: var(--sa-ebenholz);
}
/* ── Zahlen + Fortschritt auf dunklem Band (Abschnitt mit „-color-inverted“) ── */
.-color-inverted .inventar-fortschritt-titel {
color: var(--rs-tint);
}
.-color-inverted :is(.inventar-fortschritt-prozent, .inventar-fortschritt-fuss strong, .inventar-fortschritt-wert strong) {
color: var(--sa-salbei);
}
.-color-inverted :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-fortschritt-fuss,
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .-color-inverted p.inventar-fortschritt-fuss {
color: var(--rs-line);
}
.-color-inverted .inventar-balken-offen { fill: var(--rs-text); }
.-color-inverted .inventar-balken-fertig { fill: var(--sa-salbei); }
.-color-inverted .inventar-balken-arbeit { fill: var(--sa-bernstein); }
/* ── Raster der Sub-Kategorien ── */
/* Sub-Kategorien größer: Desktop 3, Tablet 2, Handy 1 Kachel pro Reihe;
eine unvollständige letzte Reihe wird mittig ausgerichtet */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster--sub {
--sub-spalten: 3;
--sub-abstand: 1.75em;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sub-abstand);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster--sub > li {
flex: 0 0 calc((100% - (var(--sub-spalten) - 1) * var(--sub-abstand)) / var(--sub-spalten));
min-width: 0;
}
@media (max-width: 899px) {
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster--sub { --sub-spalten: 2; --sub-abstand: 1.25em; }
}
@media (max-width: 599px) {
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-raster--sub { --sub-spalten: 1; }
}
.inventar-raster--sub .inventar-kachel-titel {
font-size: 1.45em;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-raster--sub p.inventar-kachel-teaser {
font-size: 0.95em;
line-height: 1.55;
}
.inventar-raster--sub .inventar-kachel-anzahl {
font-size: 0.8em;
}
.inventar-raster--sub .inventar-kachel-kopf {
flex-wrap: wrap;
}
/* ── Instrumenten-Liste ── */
.inventar-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
margin: 0 0 1.75em;
}
.inventar-filter[hidden] {
display: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) button.inventar-filter-knopf {
display: inline-flex;
align-items: center;
gap: 0.45em;
margin: 0;
padding: 0.35em 0.95em;
border: 1px solid var(--rs-line-strong);
border-radius: 999px;
font: inherit;
font-size: 0.82em;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--rs-ink);
background: var(--rs-paper);
box-shadow: none;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) button.inventar-filter-knopf:not(.is-alle)::before {
content: "";
flex: none;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: var(--epoche);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) button.inventar-filter-knopf:is(:hover, :focus-visible) {
border-color: var(--epoche, var(--rs-ink));
color: var(--rs-ink);
background: var(--rs-paper-shade);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) button.inventar-filter-knopf[aria-pressed="true"] {
border-color: var(--epoche, var(--rs-ink));
color: var(--sa-ebenholz);
background: var(--epoche, var(--rs-ink));
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) button.inventar-filter-knopf[aria-pressed="true"]::before {
background: var(--sa-ebenholz);
}
.inventar-gruppe {
margin: 0 0 2em;
scroll-margin-top: 7em;
}
.inventar-gruppe[hidden] {
display: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) h3.inventar-gruppe-kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.25em 1em;
margin: 0 0 0.9em;
padding-bottom: 0.35em;
border-bottom: 1px solid var(--rs-line);
text-align: left;
color: var(--rs-ink);
}
.inventar-gruppe-kopf a {
color: inherit;
text-decoration: none;
}
.inventar-gruppe-kopf a:hover {
color: var(--rs-accent);
}
.inventar-gruppe-info {
font-family: Lato, "Helvetica Neue", Arial, sans-serif;
font-size: 0.6em;
letter-spacing: 0.02em;
color: var(--rs-muted);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-gruppe-info--einzeln {
margin: 0 0 0.9em;
font-size: 0.85em;
text-align: center;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-gruppe-weitere,
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-filter-leer {
margin: 0.75em 0 0;
font-size: 0.85em;
font-style: italic;
text-align: center;
color: var(--rs-muted);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-filter-leer[hidden] {
display: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-objekte {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
gap: 1em;
margin: 0;
padding: 0;
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-objekte > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-objekte > li::before {
content: none;
}
.inventar-objekt[hidden] {
display: none;
}
.inventar-objekt-link {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--rs-line-strong);
border-top: 4px solid var(--epoche, var(--rs-line));
border-radius: 3px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: var(--karte-bg, var(--sa-karte));
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
a.inventar-objekt-link:is(:hover, :focus-visible) {
border-color: var(--rs-accent);
border-top-color: var(--epoche, var(--rs-accent));
box-shadow: 0 4px 12px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
transform: translateY(-2px);
text-decoration: none;
}
.inventar-objekt-bild {
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rs-paper-shade);
}
.inventar-objekt-bild :is(picture, img) {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.inventar-objekt-text {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.4em;
padding: 0.65em 0.8em 0.8em;
}
.inventar-objekt-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3em 0.5em;
}
.inventar-objekt-nr {
padding: 0.05em 0.6em;
border-radius: 999px;
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.04em;
color: var(--sa-ebenholz);
background: var(--epoche, var(--rs-muted));
}
.inventar-objekt-pos {
font-size: 0.75em;
color: var(--rs-muted);
}
.inventar-objekt-status {
margin-left: auto;
font-size: 0.7em;
letter-spacing: 0.04em;
color: var(--rs-muted);
}
.inventar-objekt-status--fertig { color: var(--inv-fertig); }
.inventar-objekt-status--in-arbeit { color: var(--inv-arbeit); }
.inventar-objekt-titel {
font-size: 0.9em;
line-height: 1.35;
color: var(--rs-ink);
}
.inventar-objekt-fuss {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5em;
margin-top: auto;
padding-top: 0.4em;
border-top: 1px dashed var(--rs-line);
font-size: 0.75em;
color: var(--rs-muted);
}
.inventar-objekt-intensitaet {
display: inline-flex;
gap: 0.2em;
}
.inventar-objekt-intensitaet > span {
width: 0.75em;
height: 0.75em;
border: 1.5px solid var(--rs-accent);
border-radius: 50%;
box-sizing: border-box;
}
.inventar-objekt-intensitaet > span.is-voll {
background: var(--rs-accent);
}
.inventar-objekt-masse {
margin-left: auto;
white-space: nowrap;
}
/* Platzhalter: geplant, noch nicht erfasst */
.inventar-objekt.is-geplant .inventar-objekt-link {
border-style: dashed;
border-top: 4px solid color-mix(in srgb, var(--epoche, var(--rs-line)) 35%, var(--rs-line));
background: transparent;
}
.inventar-objekt.is-geplant .inventar-objekt-nr {
background: color-mix(in srgb, var(--epoche, var(--rs-muted)) 45%, var(--sa-text-leise));
}
.inventar-objekt.is-geplant .inventar-objekt-titel {
color: var(--rs-text);
}
.inventar-objekt-alt {
margin-top: auto;
font-size: 0.75em;
color: var(--rs-muted);
}
a.inventar-objekt-link:hover .inventar-objekt-alt {
color: var(--rs-accent);
}
/* ==========================================================
Kategorietexte Instrumenten-Wiki
========================================================== */
.rs-kategorie-text {
--rs-akzent: var(--sa-messing);
max-width: 72ch;
}
.rs-kategorie-text p {
line-height: 1.7;
margin-bottom: 1em;
}
.rs-kategorie-text .rs-intro {
font-size: 1.15em;
font-weight: 500;
}
.rs-kategorie-text h3 {
margin-top: 2em;
margin-bottom: .5em;
padding-bottom: .25em;
border-bottom: 1px solid color-mix(in srgb, var(--rs-akzent) 35%, transparent);
}
.rs-kategorie-text strong {
color: var(--rs-akzent);
}
.rs-kategorie-text .rs-persoenlich {
margin-top: 1.5em;
padding: .75em 1em;
border-left: 3px solid var(--rs-akzent);
background: color-mix(in srgb, var(--rs-akzent) 6%, transparent);
font-style: italic;
}
@media (max-width: 767px) {
.rs-kategorie-text .rs-intro { font-size: 1.05em; }
}
/* Kategorie-Seite: Feinschliff */
.inventar-blaettern--kategorie a.is-kategorie {
border-style: solid;
}
.mod_inventar_liste.centered :is(.inventar-objekt-text, .inventar-gruppe-kopf) {
text-align: left;
}
/* ----------------------------------------------------------
Inventar – Shops (Stufe 4)
Inventarkarte: Links (Shop, Geschichte) · Modul „Inventar-Shops“
---------------------------------------------------------- */
/* Links in der Inventarkarte (Shop-Website, Geschichte der initialen Bestrafung) */
.inventar-karte-daten a.inventar-karte-verweis {
color: var(--rs-accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--rs-accent) 35%, transparent);
}
.inventar-karte-daten a.inventar-karte-verweis:is(:hover, :focus-visible) {
color: var(--rs-accent-dark);
border-bottom-color: currentColor;
}
/* ── Shop-Übersicht ── */
/* Gesamtzahlen über den Shops */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) dl.inventar-shops-summe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
gap: 0.75em;
max-width: 46em;
margin: 0 auto 2em;
}
.inventar-shops-summe > div {
padding: 0.7em 0.9em;
border: 1px solid var(--rs-line);
border-top: 3px solid var(--rs-cognac);
border-radius: 3px;
text-align: center;
background: var(--karte-bg, var(--sa-karte));
}
.inventar-shops-summe dt {
font-size: 0.72em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rs-muted);
}
.inventar-shops-summe dd {
margin: 0.1em 0 0;
font-family: var(--rs-font-heading);
font-size: 1.8em;
line-height: 1.2;
color: var(--rs-accent);
}
.inventar-shops {
display: grid;
gap: 1.5em;
}
.inventar-shop {
scroll-margin-top: 7em;
border: 1px solid var(--rs-line);
border-top: 4px solid var(--rs-cognac);
border-radius: 3px;
background: var(--rs-paper);
box-shadow: 0 1px 4px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
overflow: hidden;
}
.inventar-shop:target {
border-color: var(--rs-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-accent) 20%, transparent);
}
.inventar-shop--geschlossen {
border-top-color: var(--rs-line-strong);
}
.inventar-shop-kopf {
display: flex;
align-items: center;
gap: 1em;
padding: 0.9em 1.25em;
border-bottom: 1px solid var(--rs-tint);
background: var(--rs-paper-shade);
}
.inventar-shop-logo {
flex: none;
max-width: 7em;
}
.inventar-shop-logo :is(img, picture) {
display: block;
max-width: 100%;
height: auto;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-shop-titel h3 {
margin: 0;
text-align: left;
color: var(--rs-ink);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-shop-meta {
display: flex;
flex-wrap: wrap;
gap: 0.2em 1em;
margin: 0.2em 0 0;
font-size: 0.85em;
color: var(--rs-muted);
}
/* Zustand als Plakette rechts in der Kopfzeile */
.inventar-shop-zustand {
flex: none;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.3em 0.9em;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.78em;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: var(--rs-muted);
background: var(--rs-paper);
}
.inventar-shop-zustand::before {
content: "";
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: currentColor;
}
.inventar-shop--offen .inventar-shop-zustand {
color: var(--sa-ebenholz);
border-color: var(--rs-ok);
background: var(--rs-ok);
}
.inventar-shop--umgestellt .inventar-shop-zustand {
color: var(--sa-bernstein);
background: color-mix(in srgb, var(--sa-bernstein) 10%, var(--rs-paper));
}
.inventar-shop--geschlossen .inventar-shop-zustand {
color: var(--rs-accent);
background: color-mix(in srgb, var(--rs-accent) 8%, var(--rs-paper));
}
.inventar-shop--offen { border-top-color: var(--rs-ok); }
.inventar-shop--umgestellt { border-top-color: var(--sa-bernstein); }
.inventar-shop-meta a {
font-weight: bold;
text-decoration: none;
}
.inventar-shop-inhalt {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 1.5em;
padding: 1.1em 1.25em;
}
@media (max-width: 767px) {
.inventar-shop-inhalt {
grid-template-columns: 1fr;
}
}
.inventar-shop-beschreibung > :first-child {
margin-top: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) p.inventar-shop-fazit {
margin: 0.75em 0 0;
padding: 0.6em 0.9em;
border-left: 3px solid var(--rs-cognac);
font-family: var(--sa-schrift-zitat);
font-size: 1.1em;
font-style: italic;
color: var(--rs-accent-dark);
background: var(--rs-paper-shade);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) dl.inventar-shop-zahlen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5em;
margin: 0 0 1em;
}
.inventar-shop-zahlen > div {
padding: 0.4em 0.6em;
border: 1px solid var(--rs-tint);
border-radius: 3px;
background: var(--karte-bg, var(--sa-karte));
}
.inventar-shop-zahlen dt {
font-size: 0.7em;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rs-muted);
}
.inventar-shop-zahlen dd {
margin: 0;
font-family: var(--rs-font-heading);
font-size: 1.2em;
color: var(--rs-ink);
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-shop-instrumente {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
margin: 0;
padding: 0.8em 1.25em 1em;
border-top: 1px dashed var(--rs-line);
list-style: none;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-shop-instrumente > li {
margin: 0;
}
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.inventar-shop-instrumente > li::before {
content: none;
}
.inventar-shop-instrumente :is(a, span) {
display: inline-block;
padding: 0.1em 0.65em;
border: 1px solid var(--rs-line-strong);
border-radius: 999px;
font-size: 0.78em;
font-weight: bold;
letter-spacing: 0.04em;
text-decoration: none;
color: var(--rs-ink);
background: var(--rs-paper-shade);
}
.inventar-shop-instrumente span {
border-style: dashed;
color: var(--rs-muted);
background: transparent;
}
.inventar-shop-instrumente a:is(:hover, :focus-visible) {
border-color: var(--rs-accent);
color: var(--sa-ebenholz);
background: var(--rs-accent);
}
.inventar-shop-inhalt.is-ohne-text {
grid-template-columns: minmax(0, 1fr);
max-width: 32em;
}
/* Kategorie-Leiste: Querverweis auf die Shops (rechts, abgesetzt) */
.inventar-katnav-liste > li.inventar-katnav-extra {
display: flex;
align-items: center;
}
.inventar-katnav-liste > li.inventar-katnav-extra::before {
content: "";
width: 1px;
height: 1.1em;
margin: 0 0.5em 0 0.3em;
background: var(--rs-line-strong);
}
.inventar-katnav-liste > li.inventar-katnav-extra a {
color: var(--rs-muted);
}
.inventar-katnav-liste > li.inventar-katnav-extra a::before {
content: none;
}
.inventar-katnav-liste > li.inventar-katnav-extra a:is(:hover, :focus-visible) {
color: var(--rs-accent);
}
/* Kategorie-Leiste: aktive „Der Schrank“ bzw. „Die Shops“ */
.inventar-katnav-liste > li:is(.inventar-katnav-start, .inventar-katnav-extra).is-aktiv a {
font-weight: bold;
color: var(--rs-accent);
border-bottom-color: var(--rs-accent);
}
/* Kategorie-Leiste ohne Sub-Kategorien (Einstiegsseite, Shops, Detailseite ohne Subs): Abstand nach unten */
.inventar-katnav:last-child {
margin-bottom: 1.5em;
padding-bottom: 0.4em;
border-bottom: 1px solid var(--rs-tint);
}
/* Mitgebracht (Epoche als Bezugsquelle): Epochenfarbe statt Zustand, schmalere Kacheln nebeneinander */
:is(.main-content, [class*="mod_inventar"], .inventar-eintrag) h2.inventar-shops-abschnitt {
margin: 2.5em 0 1em;
text-align: center;
}
.inventar-shop--erzieher {
border-top-color: var(--epoche, var(--rs-cognac));
}
.inventar-shop--erzieher .inventar-shop-kopf {
background: color-mix(in srgb, var(--epoche, var(--rs-cognac)) 8%, var(--rs-paper));
}
.inventar-shop-zustand--erzieher {
color: var(--sa-ebenholz);
border-color: var(--epoche, var(--rs-cognac));
background: var(--epoche, var(--rs-cognac));
text-transform: none;
letter-spacing: 0.02em;
}
.inventar-shop--erzieher .inventar-shop-instrumente a:is(:hover, :focus-visible) {
border-color: var(--epoche, var(--rs-accent));
background: var(--epoche, var(--rs-accent));
}
/* 30. Lieferungen: Zuchtkalender ↔ Inventar (Paket sa-05) ------------------
HTML: templates/_sa_lieferung.html.twig (im Termin) und
Modul „Inventar-Shops“ (.inventar-shop-lieferungen)
Instrument-Chips in der Epochenfarbe, sonst Messing wie das Badge
„Lieferung“ (Abschnitt 26). */
body .sa-lieferung {
margin: 1.5em 0;
padding: 1em 1.25em 1.1em;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--epoche, var(--sa-messing));
box-shadow: 0 12px 30px rgba(var(--sa-schatten-rgb), calc(.35 * var(--sa-schatten-staerke)));
}
body .sa-lieferung p.sa-lieferung-kopf {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25em .6em;
margin: 0 0 .75em;
}
body .sa-lieferung-label {
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-text-leise);
}
body .sa-lieferung-quelle {
font-family: var(--sa-schrift-titel);
font-size: 1.15em;
letter-spacing: .04em;
color: var(--epoche, var(--sa-messing));
text-decoration: none;
}
body a.sa-lieferung-quelle:hover { color: var(--sa-text); }
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) ul.sa-lieferung-liste,
body ul.sa-lieferung-liste {
display: flex;
flex-wrap: wrap;
gap: .45em;
margin: 0;
padding: 0;
list-style: none;
}
body ul.sa-lieferung-liste > li { margin: 0; padding: 0; }
body ul.sa-lieferung-liste > li::before,
body ul.sa-lieferung-liste > li::marker { content: none; }
body .sa-lieferung-chip {
display: inline-flex;
align-items: baseline;
gap: .5em;
padding: .35em .85em .35em .4em;
border: 1px solid color-mix(in srgb, var(--epoche, var(--sa-messing)) 45%, transparent);
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 8%, var(--sa-ebenholz));
color: var(--sa-text);
font-family: var(--sa-schrift-text);
line-height: 1.3;
text-decoration: none;
transition: background-color .2s, border-color .2s;
}
body a.sa-lieferung-chip:hover,
body a.sa-lieferung-chip:focus-visible {
border-color: var(--epoche, var(--sa-messing));
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 20%, var(--sa-ebenholz));
color: var(--sa-text);
}
body .sa-lieferung-chip .sa-lieferung-nr {
padding: .1em .55em;
background: var(--epoche, var(--sa-messing));
color: var(--sa-ebenholz);
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .06em;
white-space: nowrap;
}
body .sa-lieferung-chip.is-ohne-link { border-style: dashed; color: var(--sa-text-leise); }
body .sa-lieferung p.sa-lieferung-leer {
margin: 0;
font-family: var(--sa-schrift-zitat);
font-style: italic;
color: var(--sa-text-leise);
}
/* Eine Zeile in der Kalender-Übersicht */
body p.sa-lieferung--kompakt {
margin: .4em 0 .6em;
padding: 0;
background: none;
border: 0;
box-shadow: none;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .04em;
color: var(--sa-text-leise);
}
body p.sa-lieferung--kompakt .sa-lieferung-nr {
color: var(--epoche, var(--sa-messing));
font-weight: 500;
}
/* Shop-Übersicht: Bestellungen bzw. Lieferungen aufklappbar */
.inventar-shop-lieferungen {
margin: 0;
padding: .6em 1.25em .8em;
border-top: 1px dashed var(--rs-line);
}
.inventar-shop-lieferungen > summary {
cursor: pointer;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sa-text-leise);
}
.inventar-shop-lieferungen > summary:hover { color: var(--sa-messing); }
.inventar-shop-lieferungen > summary::marker { color: var(--sa-messing-tief); }
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-shop-lieferungen ol {
margin: .6em 0 0;
padding-left: 1.4em;
font-size: .95em;
}
.inventar-shop-lieferungen li { margin: .2em 0; color: var(--sa-text); }
.inventar-shop-lieferungen li::marker { color: var(--sa-messing-tief); }
.inventar-shop-lieferungen a { text-decoration: none; }
/* Geschlossener Shop: helles Rot statt Messing (Messing ist hier der Akzent) */
.inventar-shop--geschlossen .inventar-shop-zustand {
color: var(--sa-rot-hell);
background: color-mix(in srgb, var(--sa-rot-hell) 8%, var(--rs-paper));
}
/* Zahlenleiste (Modul „Inventar-Zahlen“, TAO-Zählerboxen): Zahl in Messing,
Beschriftung als kleine UI-Zeile statt Cinzel-Überschrift */
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-zahlen .counter-boxes-item p.-counter {
font-family: var(--sa-schrift-titel);
color: var(--sa-messing);
}
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-zahlen .counter-boxes-item h3 {
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-text-leise);
}
body :is(.main-content, [class*="mod_inventar"], .inventar-eintrag) .inventar-zahlen .counter-boxes-item::before { color: var(--sa-messing-tief); }
/* 33. Abschnittstitel und Merkmale (Paket sa-06) ----------------------------
Abschnittstitel: templates/content_element/sa_abschnitt.html.twig
p.sa-kicker (Abschnitt 8) + Überschrift + p.sa-abschnitt-lead
Merkmale: templates/content_element/sa_merkmale.html.twig
dl.sa-merkmale > div.sa-merkmal > dt + dd
Die Merkmal-Kästchen stehen in einer schmalen Spalte untereinander und
in breiten Bereichen nebeneinander (auto-fit).
Stellschraube: --sa-merkmal-breite (Mindestbreite eines Kästchens). */
:where(:root) { --sa-merkmal-breite: 13rem; }
/* Überzeile direkt über der Überschrift */
body .main-content p.sa-kicker { margin: 0 0 .35em; }
body .main-content p.sa-kicker + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }
/* Einleitung unter der Überschrift */
body .main-content p.sa-abschnitt-lead {
max-width: 68ch;
margin: .5em 0 0;
font-family: var(--sa-schrift-zitat);
font-style: italic;
font-size: 1.25em;
line-height: 1.5;
color: var(--sa-text-leise);
}
/* Merkmal-Kästchen */
body .main-content dl.sa-merkmale {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--sa-merkmal-breite), 100%), 1fr));
gap: .75rem;
margin: 0;
padding: 0;
}
body .main-content .sa-merkmal {
margin: 0;
padding: .9em 1.2em 1em;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-messing-tief);
box-shadow: 0 10px 24px rgba(var(--sa-schatten-rgb), calc(.3 * var(--sa-schatten-staerke)));
}
body .main-content .sa-merkmal dt {
margin: 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-messing);
}
body .main-content .sa-merkmal dd {
margin: .2em 0 0;
padding: 0;
color: var(--sa-text);
line-height: 1.45;
}
/* 33b. Abschnittstitel und Merkmale – Nachschärfung -------------------------
Überschrift nach der Überzeile immer groß in Cinzel, unabhängig von der
gewählten Ebene (h2 empfohlen; h4–h6 wären sonst kursiv in Cormorant).
Merkmale als getrennte Kästchen mit sicherem Abstand; auf Mahagoni-Flächen
(zentrierter Bereich „hell“) eine Stufe dunkler, damit sie sich abheben.
Die doppelte Klasse hebt die Spezifität über TAOs Listen-Regeln.
Stellschrauben: --sa-abschnitt-titel (Größe), --sa-merkmal-abstand. */
:where(:root) {
--sa-abschnitt-titel: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
--sa-merkmal-abstand: 1rem;
}
body .main-content p.sa-kicker + :is(h1, h2, h3, h4, h5, h6) {
margin: 0 0 .9em;
font-family: var(--sa-schrift-titel);
font-size: var(--sa-abschnitt-titel);
font-style: normal;
font-weight: 500;
line-height: 1.2;
letter-spacing: .04em;
color: var(--sa-messing);
}
body .main-content dl.sa-merkmale.sa-merkmale {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--sa-merkmal-breite), 100%), 1fr));
gap: var(--sa-merkmal-abstand);
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
body .main-content dl.sa-merkmale.sa-merkmale > .sa-merkmal {
margin: 0;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-messing-tief);
box-shadow: 0 10px 24px rgba(var(--sa-schatten-rgb), calc(.35 * var(--sa-schatten-staerke)));
}
/* Auf Mahagoni-Flächen: Kästchen in Ebenholz */
body .centered-wrapper.-background-color-2 dl.sa-merkmale.sa-merkmale > .sa-merkmal {
background: var(--sa-ebenholz);
}
/* 33c. Merkmale umflossen (Klasse „sa-umfliessen“ am Merkmale-Element) -----
Reihenfolge im Artikel: Abschnittstitel → Merkmale (sa-umfliessen) → Text.
Ab 900px schwebt die Merkmal-Spalte rechts, der folgende Text läuft links
daran vorbei und darunter über die volle Breite weiter. Darunter (Handy)
stehen die Kästchen über dem Text.
Abstand zwischen den Kästchen über margin statt gap – greift unabhängig
von der display-Art der Liste.
Stellschrauben: --sa-umfliessen-breite (Breite der Merkmal-Spalte),
--sa-umfliessen-lesebreite (max. Zeilenlänge des Textes). */
:where(:root) {
--sa-umfliessen-breite: 19rem;
--sa-umfliessen-lesebreite: none;
}
body .content-sa-merkmale.sa-umfliessen dl.sa-merkmale.sa-merkmale {
display: block;
}
body .content-sa-merkmale.sa-umfliessen dl.sa-merkmale.sa-merkmale > .sa-merkmal + .sa-merkmal {
margin-top: var(--sa-merkmal-abstand, 1rem);
}
@media (min-width: 900px) {
body .content-sa-merkmale.sa-umfliessen {
float: right;
width: var(--sa-umfliessen-breite);
margin: .5em 0 1.5em 2.5em;
}
/* Der Text darf neben und unter der Spalte die volle Breite nutzen */
body .content-sa-merkmale.sa-umfliessen ~ .rs-kategorie-text {
max-width: var(--sa-umfliessen-lesebreite);
}
/* Der Bereich umschließt die schwebende Spalte, auch bei kurzem Text */
body :has(> .content-sa-merkmale.sa-umfliessen) {
display: flow-root;
}
}
@media (max-width: 899px) {
body .content-sa-merkmale.sa-umfliessen { margin: 0 0 1.5em; }
}
/* 34. Zeitleiste (Element „Zeitleiste – Station“, Paket sa-07) --------------
HTML: templates/content_element/sa_station.html.twig
div.content-sa-station > span.sa-station-punkt
+ div.sa-station-inhalt > p.sa-station-zeit + hN + .sa-station-text
Senkrechte Linie links, je Station ein Punkt. Direkt aufeinanderfolgende
Stationen verbinden sich zu einer Linie; nach der letzten endet sie.
Punktfarbe: Messing – oder die Epochenfarbe, wenn am Element die Klasse
epoche--magnus | epoche--linda | epoche--angie | epoche--angelique steht.
Ohne „.main-content“ im Selektor, damit es in jedem Bereich greift.
Stellschrauben: --sa-station-einzug (Abstand Text zur Linie),
--sa-station-abstand (Abstand zwischen Stationen). */
:where(:root) {
--sa-station-einzug: 2.5rem;
--sa-station-abstand: 2.25rem;
--sa-station-punkt: 1rem;
--sa-flaeche: var(--sa-ebenholz); /* Grund hinter dem Punkt-Ring */
}
body .centered-wrapper.-background-color-2 { --sa-flaeche: var(--sa-mahagoni); }
body .centered-wrapper.-background-color-1 { --sa-flaeche: var(--sa-nacht); }
body div.content-sa-station {
--sa-station-farbe: var(--epoche, var(--sa-messing));
position: relative;
margin: 0;
padding: 0 0 var(--sa-station-abstand) var(--sa-station-einzug);
}
/* Linie: vom Punkt bis zum Punkt der nächsten Station */
body div.content-sa-station::before {
content: "";
position: absolute;
left: calc(var(--sa-station-punkt) / 2 - 1px);
top: .4rem;
bottom: -.4rem;
width: 2px;
background: var(--sa-messing-tief);
}
body div.content-sa-station:not(:has(+ .content-sa-station))::before {
display: none;
}
/* Punkt mit Ring in der Farbe des Untergrunds */
body div.content-sa-station > .sa-station-punkt {
position: absolute;
left: 0;
top: .4rem;
width: var(--sa-station-punkt);
height: var(--sa-station-punkt);
border-radius: 50%;
background: var(--sa-station-farbe);
box-shadow: 0 0 0 4px var(--sa-flaeche), 0 0 0 5px var(--sa-messing-tief);
z-index: 1;
}
/* Zeitraum */
body div.content-sa-station p.sa-station-zeit {
margin: 0 0 .25em;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-station-farbe);
}
/* Titel – egal welche Ebene gewählt ist (h3 empfohlen) */
body div.content-sa-station .sa-station-inhalt > :is(h1, h2, h3, h4, h5, h6) {
margin: 0 0 .4em;
font-family: var(--sa-schrift-zitat);
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var(--sa-text);
}
/* Text */
body div.content-sa-station .sa-station-text {
max-width: 72ch;
color: var(--sa-text);
}
body div.content-sa-station .sa-station-text > :first-child { margin-top: 0; }
body div.content-sa-station .sa-station-text > :last-child { margin-bottom: 0; }
@media (max-width: 599px) {
:where(:root) { --sa-station-einzug: 2rem; --sa-station-abstand: 1.75rem; }
body div.content-sa-station .sa-station-inhalt > :is(h1, h2, h3, h4, h5, h6) { font-size: 1.35rem; }
}
/* 33d. Korrekturen zu 33c ----------------------------------------------------
- Jeder Abschnittstitel beginnt unterhalb schwebender Merkmale (clear),
auch wenn der Text daneben kürzer ist als die Merkmal-Spalte.
- Volle Textbreite nur für den Text DIREKT nach den Merkmalen; alle
späteren Texte im Bereich behalten ihre Lesebreite (72ch). */
body div.content-sa-abschnitt { clear: both; }
@media (min-width: 900px) {
body .content-sa-merkmale.sa-umfliessen ~ .rs-kategorie-text { max-width: 72ch; }
body .content-sa-merkmale.sa-umfliessen + .rs-kategorie-text { max-width: var(--sa-umfliessen-lesebreite); }
}
/* 33e. Merkmale ohne .main-content (z. B. Instrumenten-Detailseite) ---------
Die Regeln in 33/33b hängen an „.main-content“. Steht das Element in
einem Bereich ohne diese Klasse, greifen nur die Browser-Vorgaben:
dd 40px eingerückt, dt als nackte Zeile, keine Messing-Oberkante – und
die Kästchen kleben als Streifen aneinander. Hier dieselben Regeln ohne
Bereichsbindung; doppelte Klassen heben die Spezifität über TAOs
dl/dt/dd-Regeln. */
body dl.sa-merkmale.sa-merkmale {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--sa-merkmal-breite), 100%), 1fr));
gap: var(--sa-merkmal-abstand, 1rem);
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
body dl.sa-merkmale.sa-merkmale > .sa-merkmal.sa-merkmal {
margin: 0;
padding: .9em 1.2em 1em;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-messing-tief);
box-shadow: 0 10px 24px rgba(var(--sa-schatten-rgb), calc(.35 * var(--sa-schatten-staerke)));
}
body .centered-wrapper.-background-color-2 dl.sa-merkmale.sa-merkmale > .sa-merkmal.sa-merkmal {
background: var(--sa-ebenholz);
}
body .content-sa-merkmale.sa-umfliessen dl.sa-merkmale.sa-merkmale > .sa-merkmal + .sa-merkmal {
margin-top: var(--sa-merkmal-abstand, 1rem);
}
body dl.sa-merkmale.sa-merkmale .sa-merkmal dt {
margin: 0;
padding: 0;
background: transparent;
border: 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-messing);
}
body dl.sa-merkmale.sa-merkmale .sa-merkmal dd {
margin: .2em 0 0;
padding: 0;
background: transparent;
border: 0;
line-height: 1.45;
color: var(--sa-text);
}
body dl.sa-merkmale.sa-merkmale .sa-merkmal :is(dt, dd)::before { content: none; }
/* 34b. Zeitleiste waagrecht (ab 900px) ---------------------------------------
Aufeinanderfolgende Stationen stehen nebeneinander; die Linie läuft
waagrecht durch die Punkte. Spaltenzahl automatisch nach Anzahl der
Stationen im Bereich (2–5). Der Text nach der letzten Station beginnt
darunter. Handy: senkrecht wie in Abschnitt 34.
Senkrecht erzwingen: Klasse „sa-senkrecht“ an den Stationen.
Stellschraube: --sa-station-titel-quer (Titelgröße waagrecht). */
:where(:root) { --sa-stationen: 4; --sa-station-titel-quer: 1.35rem; }
body :has(> .content-sa-station + .content-sa-station) { --sa-stationen: 2; }
body :has(> .content-sa-station + .content-sa-station + .content-sa-station) { --sa-stationen: 3; }
body :has(> .content-sa-station + .content-sa-station + .content-sa-station + .content-sa-station) { --sa-stationen: 4; }
body :has(> .content-sa-station + .content-sa-station + .content-sa-station + .content-sa-station + .content-sa-station) { --sa-stationen: 5; }
@media (min-width: 900px) {
body div.content-sa-station:not(.sa-senkrecht) {
float: left;
box-sizing: border-box;
width: calc(100% / var(--sa-stationen));
padding: 2rem 1.75rem var(--sa-station-abstand) 0;
}
/* Linie waagrecht: vom eigenen Punkt bis zum Punkt der nächsten Station */
body div.content-sa-station:not(.sa-senkrecht)::before {
left: 0;
right: 0;
top: calc(var(--sa-station-punkt) / 2 - 1px);
bottom: auto;
width: auto;
height: 2px;
}
body div.content-sa-station:not(.sa-senkrecht) > .sa-station-punkt { top: 0; }
body div.content-sa-station:not(.sa-senkrecht) .sa-station-inhalt > :is(h1, h2, h3, h4, h5, h6) {
font-size: var(--sa-station-titel-quer);
}
body div.content-sa-station:not(.sa-senkrecht) .sa-station-text { max-width: none; }
/* Was nach der letzten Station kommt, beginnt unter der Zeitleiste */
body div.content-sa-station + :not(.content-sa-station) { clear: both; }
}
/* 34c. Zeitleiste breiter als der Text (ab 1200px) ---------------------------
Die Stationen stehen im selben zentrierten Bereich wie der Text, die
waagrechte Reihe ragt aber links und rechts um --sa-zeitleiste-ueberstand
über die Textbreite hinaus und bleibt dabei mittig.
Erste Station: negativer Rand links; letzte: negativer Rand rechts, damit
die Reihe nicht umbricht. Unter 1200px: normale Breite (34b).
Stellschraube: --sa-zeitleiste-ueberstand (Überstand je Seite). */
:where(:root) { --sa-zeitleiste-ueberstand: min(8vw, 10rem); }
@media (min-width: 1200px) {
body div.content-sa-station:not(.sa-senkrecht) {
width: calc((100% + 2 * var(--sa-zeitleiste-ueberstand)) / var(--sa-stationen));
}
/* erste Station der Reihe */
body div.content-sa-station:not(.sa-senkrecht):not(.content-sa-station + .content-sa-station) {
margin-left: calc(-1 * var(--sa-zeitleiste-ueberstand));
}
/* letzte Station der Reihe */
body div.content-sa-station:not(.sa-senkrecht):not(:has(+ .content-sa-station)) {
margin-right: calc(-1 * var(--sa-zeitleiste-ueberstand));
}
}
/* 35. Profil (Element „Profil“, Paket sa-08) --------------------------------
HTML: templates/content_element/sa_profil.html.twig
.content-sa-profil > .sa-profil
> .sa-profil-achsen (p.sa-kicker + hN + ul.sa-profil-skala-liste)
> .sa-profil-urteil (h3 + ul.sa-profil-liste--fuer, h3 + ul.sa-profil-liste--gegen)
Tafel in Mahagoni (auf Mahagoni-Flächen in Ebenholz), ab 900px zweispaltig.
Balken in Messing – oder in der Epochenfarbe mit Klasse epoche--.
Stellschraube: --sa-profil-name-breite (Spalte der Achsen-Namen). */
:where(:root) { --sa-profil-name-breite: 9.5rem; }
body .content-sa-profil { margin: 0 0 2.5rem; clear: both; }
body .sa-profil {
--sa-profil-farbe: var(--epoche, var(--sa-messing));
--sa-profil-grund: var(--sa-mahagoni);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem 3rem;
padding: 2rem 2.25rem 2.25rem;
background: var(--sa-profil-grund);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-messing-tief);
box-shadow: 0 14px 30px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
}
body .centered-wrapper.-background-color-2 .sa-profil { --sa-profil-grund: var(--sa-ebenholz); }
@media (min-width: 900px) {
body .sa-profil:has(> .sa-profil-urteil) {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
}
/* Achsen-Liste */
body ul.sa-profil-skala-liste.sa-profil-skala-liste {
display: grid;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
body ul.sa-profil-skala-liste.sa-profil-skala-liste > li {
margin: 0;
padding: 0;
}
body ul.sa-profil-skala-liste.sa-profil-skala-liste > li::before {
content: none;
display: none;
}
body .sa-profil-achse {
display: grid;
grid-template-columns: var(--sa-profil-name-breite) minmax(0, 1fr);
column-gap: 1rem;
row-gap: .2rem;
align-items: center;
}
body .sa-profil-name {
grid-row: 1;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sa-text);
}
body .sa-profil-balken {
grid-row: 1;
grid-column: 2;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
}
body .sa-profil-segment {
display: block;
height: .6rem;
background: color-mix(in srgb, var(--sa-profil-farbe) 14%, var(--sa-profil-grund));
}
body .sa-profil-segment.is-aktiv { background: var(--sa-profil-farbe); }
body .sa-profil-pole {
grid-row: 2;
grid-column: 2;
display: flex;
justify-content: space-between;
gap: 1rem;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
color: var(--sa-text-leise);
}
/* Für / Gegen */
body .sa-profil h3.sa-profil-urteil-titel {
margin: 0 0 .6em;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
font-style: normal;
font-weight: 500;
line-height: 1.4;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-messing);
}
body .sa-profil h3.sa-profil-urteil-titel--gegen {
margin-top: 1.75rem;
color: var(--sa-rot-hell, #E07A88);
}
body .sa-profil h3.sa-profil-urteil-titel:first-child { margin-top: 0; }
body .sa-profil ul.sa-profil-liste { margin: 0; }
body .sa-profil ul.sa-profil-liste--fuer li::marker { color: var(--sa-messing); }
body .sa-profil ul.sa-profil-liste--gegen li::marker { color: var(--sa-rot-hell, #E07A88); }
/* Handy: Name über dem Balken */
@media (max-width: 599px) {
body .sa-profil { padding: 1.5rem 1.25rem 1.75rem; }
body .sa-profil-achse { grid-template-columns: minmax(0, 1fr); }
body .sa-profil-name { grid-row: 1; }
body .sa-profil-balken { grid-row: 2; grid-column: 1; }
body .sa-profil-pole { grid-row: 3; grid-column: 1; }
}
/* 35b. Profil: Für in Grün, Gegen in Rot -------------------------------------
Jede Gruppe (.sa-profil-gruppe--fuer / --gegen) ist eine getönte Tafel wie
die Hinweisboxen (Abschnitt 14): farbige Kante links, Verlauf nach rechts.
Grün = --sa-salbei (Bestätigung), Rot = --sa-warn (Warnung), Schrift im
Rot heller (--sa-rot-hell) für den Kontrast.
Stellschraube: --sa-profil-toenung (Deckkraft des Verlaufs links). */
:where(:root) { --sa-profil-toenung: .22; }
body .sa-profil-urteil {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
body .sa-profil-gruppe--fuer { --sa-gruppe: var(--sa-salbei); --sa-gruppe-rgb: var(--sa-salbei-rgb, 143, 168, 118); --sa-gruppe-text: var(--sa-salbei); }
body .sa-profil-gruppe--gegen { --sa-gruppe: var(--sa-warn); --sa-gruppe-rgb: var(--sa-warn-rgb, 200, 56, 76); --sa-gruppe-text: var(--sa-rot-hell, #E07A88); }
body .sa-profil-gruppe {
padding: 1rem 1.25rem 1.1rem;
background: linear-gradient(90deg,
rgba(var(--sa-gruppe-rgb), var(--sa-profil-toenung)) 0%,
rgba(var(--sa-gruppe-rgb), calc(var(--sa-profil-toenung) * .3)) 45%,
transparent 90%);
border: 1px solid rgba(var(--sa-gruppe-rgb), .25);
border-left: 3px solid var(--sa-gruppe);
}
body .sa-profil .sa-profil-gruppe h3.sa-profil-urteil-titel {
margin: 0 0 .6em;
color: var(--sa-gruppe-text);
}
body .sa-profil .sa-profil-gruppe ul.sa-profil-liste li::marker { color: var(--sa-gruppe); }
/* 38. Zuchtkalender-Bezug (Modul „Im Zuchtkalender“, Paket sa-10) -----------
Modul: templates/frontend_module/inventar_kalender.html.twig
.sa-kb > dl.sa-kb-zahlen (3 Kennzahlen) + ol.sa-kb-liste (Termine) + .sa-kb-alle
Badges wie im Kalender (Abschnitt 26), Chips wie Lieferungen (Abschnitt 30).
Termin: templates/_sa_einsatz.html.twig
section.sa-einsatz (wie .sa-lieferung, Kante in Ochsenblut) bzw.
p.sa-einsatz--kompakt in Übersicht und Liste. */
/* Kennzahlen */
body dl.sa-kb-zahlen.sa-kb-zahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
gap: 1rem;
margin: 0 0 1.75rem;
padding: 0;
}
body .sa-kb-zahl {
margin: 0;
padding: 1rem 1.25rem 1.1rem;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-messing-tief);
box-shadow: 0 10px 24px rgba(var(--sa-schatten-rgb), calc(.3 * var(--sa-schatten-staerke)));
}
body .centered-wrapper.-background-color-2 .sa-kb-zahl { background: var(--sa-ebenholz); }
body .sa-kb-zahl--zuletzt { border-top-color: var(--sa-ochsenblut); }
body .sa-kb-zahl dt {
margin: 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-messing);
}
body .sa-kb-zahl dd { margin: 0; padding: 0; }
body .sa-kb-zahl dd.sa-kb-wert {
margin: .15em 0 .1em;
font-family: var(--sa-schrift-titel);
font-size: 1.9rem;
line-height: 1.15;
color: var(--sa-text);
}
body .sa-kb-zahl--zuletzt dd.sa-kb-wert { color: var(--sa-messing); }
body .sa-kb-zahl dd.sa-kb-wert--leer { color: var(--sa-text-leise); font-size: 1.4rem; }
body .sa-kb-zahl dd.sa-kb-detail {
font-size: .95rem;
line-height: 1.4;
color: var(--sa-text-leise);
}
/* Terminliste */
body ol.sa-kb-liste.sa-kb-liste {
margin: 0 0 1.5rem;
padding: 0;
list-style: none;
border-top: 1px solid var(--sa-linie);
}
body ol.sa-kb-liste.sa-kb-liste > li {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: .25rem 1.25rem;
margin: 0;
padding: .9rem 0;
border-bottom: 1px solid var(--sa-linie);
}
body ol.sa-kb-liste.sa-kb-liste > li::before { content: none; display: none; }
body .sa-kb-datum {
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .08em;
line-height: 1.9;
color: var(--sa-messing-tief);
}
body p.sa-kb-titel {
margin: 0 0 .35em;
font-family: var(--sa-schrift-zitat);
font-size: 1.25rem;
line-height: 1.3;
}
body p.sa-kb-titel a { color: var(--sa-text); text-decoration: none; }
body p.sa-kb-titel a:hover { color: var(--sa-messing); }
body .sa-kb-inhalt .sa-markierung { margin: .2em 0 .5em; }
body .sa-kb-inhalt ul.sa-lieferung-liste { margin-top: .25em; }
body p.sa-kb-leer {
margin: 0 0 1.5rem;
font-family: var(--sa-schrift-zitat);
font-style: italic;
color: var(--sa-text-leise);
}
body p.sa-kb-alle { margin: 0; text-align: right; }
/* Kategorie ohne genaues Instrument */
body .sa-lieferung-chip.sa-einsatz-kategorie {
padding-left: .85em;
border-style: dashed;
font-style: italic;
}
/* Im Termin: wie die Lieferung, Kante in Ochsenblut */
body .sa-einsatz {
margin: 1.5em 0;
padding: 1em 1.25em 1.1em;
background: var(--sa-mahagoni);
border: 1px solid var(--sa-linie);
border-top: 2px solid var(--sa-ochsenblut);
box-shadow: 0 12px 30px rgba(var(--sa-schatten-rgb), calc(.35 * var(--sa-schatten-staerke)));
}
body .sa-einsatz p.sa-lieferung-kopf { margin: 0 0 .75em; }
body p.sa-einsatz--kompakt {
margin: .4em 0 .6em;
padding: 0;
background: none;
border: 0;
box-shadow: none;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .04em;
color: var(--sa-text-leise);
}
body p.sa-einsatz--kompakt .sa-lieferung-nr { color: var(--sa-messing); font-weight: 500; }
@media (max-width: 599px) {
body ol.sa-kb-liste.sa-kb-liste > li { grid-template-columns: minmax(0, 1fr); }
}
/* 38b. Kategoriefilter im Zuchtkalender-Filter (sa-10) ------------------------
Chip „Haarbürsten ד am Ende der Leiste, abgesetzt durch eine feine Linie.
Gefüllt wie ein aktiver Filter; beim Überfahren Rubin = „aufheben“. */
body .sa-filter li.sa-filter-kategorie {
margin-left: .5em;
padding-left: 1em;
border-left: 1px solid var(--sa-linie);
}
body .sa-filter a.sa-filter-link--kategorie span[aria-hidden] {
margin-left: .35em;
font-size: 1.1em;
line-height: 1;
}
body .sa-filter a.sa-filter-link--kategorie.is-aktiv:is(:hover, :focus-visible) {
background: var(--sa-rubin);
border-color: var(--sa-rubin);
color: var(--sa-auf-akzent);
}
/* 38c. Kategorie-Auswahl im Zuchtkalender-Filter (sa-10c) --------------------
Zweite Zeile „Aus dem Schrank“ unter Alle · Bestrafung · …: nur Kategorien
mit verknüpften Terminen. Hauptkategorien gefüllt-dezent, Sub-Kategorien
kleiner und ohne Rahmen. Aktiv = gefüllt mit ×, beim Überfahren Rubin.
Ersetzt den Einzel-Chip aus 38b (Regeln dort bleiben harmlos stehen). */
body .sa-filter .sa-filter-schrank {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .5rem 1rem;
margin-top: .9rem;
padding-top: .9rem;
border-top: 1px solid var(--sa-linie);
}
body .sa-filter .sa-filter-titel {
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-messing-tief);
white-space: nowrap;
}
body .sa-filter .sa-filter-schrank ul { flex: 1 1 20rem; }
body .sa-filter .sa-filter-schrank li.sa-filter-sub a.sa-filter-link {
font-size: .9em;
border-color: transparent;
color: var(--sa-text-leise);
}
body .sa-filter .sa-filter-schrank li.sa-filter-sub a.sa-filter-link:is(:hover, :focus-visible) {
border-color: var(--sa-linie);
color: var(--sa-text);
}
body .sa-filter .sa-filter-schrank a.sa-filter-link--kategorie.is-aktiv {
background: var(--sa-ochsenblut);
border-color: var(--sa-ochsenblut);
color: var(--sa-auf-akzent);
}
body .sa-filter .sa-filter-schrank a.sa-filter-link--kategorie span[aria-hidden] {
margin-left: .35em;
font-size: 1.1em;
line-height: 1;
}
body .sa-filter .sa-filter-schrank a.sa-filter-link--kategorie.is-aktiv:is(:hover, :focus-visible) {
background: var(--sa-rubin);
border-color: var(--sa-rubin);
}
/* 38d. Kategorie-Auswahl: Korrektur (sa-10c) --------------------------------
Sub-Kategorien kleiner als die Hauptkategorie (vorher .9em vom Fließtext →
größer), Beschriftung und Chips gemeinsam zentriert bzw. linksbündig wie die
obere Zeile, Abstände zwischen den beiden Zeilen enger. */
body .sa-filter ul:has(+ .sa-filter-schrank) { margin-bottom: 0; }
body .sa-filter .sa-filter-schrank {
align-items: center;
margin-bottom: 1.75em;
}
body .sa-filter .sa-filter-schrank ul {
flex: 0 1 auto;
margin: 0;
}
body .centered .sa-filter .sa-filter-schrank,
body .sa-filter.centered .sa-filter-schrank { justify-content: center; }
/* Sub-Kategorien: kleiner, niedriger, ohne Rahmen */
body .sa-filter .sa-filter-schrank li.sa-filter-sub a.sa-filter-link {
height: 2.1rem;
padding: 0 .85em;
font-size: .6875rem;
letter-spacing: .12em;
}
/* aktive Sub-Kategorie bleibt klar erkennbar */
body .sa-filter .sa-filter-schrank li.sa-filter-sub a.sa-filter-link.is-aktiv {
border-color: var(--sa-ochsenblut);
color: var(--sa-auf-akzent);
}
/* 37. Sprungleiste (Element „Sprungleiste“, Paket sa-09) --------------------
HTML: .sa-sprung-huelle > nav.sa-sprung > ol.sa-sprung-liste > li > a
Sprungziele: span.sa-anker in Abschnittstitel und Profil.
JS (files/strenge-angelique/js/sprungleiste.js) setzt .is-fixiert sowie
top/left/width, sobald die Leiste unter den Header scrollt, und markiert
den aktuellen Abschnitt mit a.is-aktiv.
Fixiert läuft die Fläche über die volle Fensterbreite (box-shadow +
clip-path), die Links bleiben in der Spalte.
Stellschraube: --sa-anker-abstand (Abstand Abschnittsbeginn zum Rand
beim Springen ohne JavaScript). */
:where(:root) { --sa-anker-abstand: 9rem; }
body .sa-anker {
display: block;
height: 0;
scroll-margin-top: var(--sa-anker-abstand);
}
body .sa-sprung-huelle { margin: 0 0 1.25rem; }
body nav.sa-sprung {
position: relative;
z-index: 25;
background: var(--sa-nacht);
border-top: 1px solid var(--sa-linie);
border-bottom: 1px solid var(--sa-linie);
}
body nav.sa-sprung.is-fixiert {
position: fixed;
margin: 0;
border-top-color: transparent;
box-shadow: 0 0 0 100vmax var(--sa-nacht);
clip-path: inset(0 -100vmax);
}
body ol.sa-sprung-liste.sa-sprung-liste {
position: relative;
display: flex;
justify-content: safe center;
gap: .25rem;
margin: 0;
padding: .45rem .25rem;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent, #000 1em, #000 calc(100% - 1em), transparent);
mask-image: linear-gradient(to right, transparent, #000 1em, #000 calc(100% - 1em), transparent);
}
body ol.sa-sprung-liste.sa-sprung-liste::-webkit-scrollbar { display: none; }
body ol.sa-sprung-liste.sa-sprung-liste > li {
flex: none;
margin: 0;
padding: 0;
}
body ol.sa-sprung-liste.sa-sprung-liste > li::before {
content: none;
display: none;
}
body .sa-sprung-liste a {
display: block;
padding: .4rem .9rem;
border: 1px solid transparent;
border-radius: 999px;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--sa-text-leise);
transition: color .2s, background-color .2s, border-color .2s;
}
body .sa-sprung-liste a:is(:hover, :focus-visible) {
color: var(--sa-messing);
border-color: var(--sa-linie);
}
body .sa-sprung-liste a.is-aktiv {
color: var(--sa-ebenholz);
background: var(--sa-messing);
border-color: var(--sa-messing);
}
/* 39c. Abschlussband (Element „Abschlussband“, Paket sa-11) ------------------
HTML: .sa-abschluss > .sa-abschluss-text (h2.sa-abschluss-titel +
p.sa-abschluss-info) + a.sa-abschluss-knopf
Wie im Entwurf: Mahagoni-Tafel mit feiner Messingkante, Titel in Cinzel,
Knopf in Messing. Auf Mahagoni-Flächen wird die Tafel Ebenholz. */
body .content-sa-abschluss { clear: both; margin-top: 3rem; }
body .sa-abschluss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem 2rem;
padding: 2.25rem 2.5rem;
background: var(--sa-mahagoni);
box-shadow: inset 0 0 0 1px rgba(var(--sa-messing-rgb), .35), 0 16px 36px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
}
body .centered-wrapper.-background-color-2 .sa-abschluss { background: var(--sa-ebenholz); }
body .sa-abschluss .sa-abschluss-titel {
margin: 0 0 .35em;
padding: 0;
font-family: var(--sa-schrift-titel);
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
font-weight: 400;
font-style: normal;
line-height: 1.25;
letter-spacing: .02em;
text-transform: none;
color: var(--sa-messing);
}
body .sa-abschluss .sa-abschluss-titel::before,
body .sa-abschluss .sa-abschluss-titel::after { content: none; }
body .sa-abschluss p.sa-abschluss-info {
margin: 0;
font-family: var(--sa-schrift-ui);
font-size: .875rem;
line-height: 1.6;
color: var(--sa-text-leise);
}
body .sa-abschluss p.sa-abschluss-info a {
color: var(--sa-text);
text-decoration: none;
border-bottom: 1px solid var(--sa-linie);
}
body .sa-abschluss p.sa-abschluss-info a:is(:hover, :focus-visible) {
color: var(--sa-messing);
border-bottom-color: var(--sa-messing-tief);
}
body .sa-abschluss .sa-abschluss-trenner { margin: 0 .5em; color: var(--sa-messing-tief); }
body .sa-abschluss a.sa-abschluss-knopf {
display: inline-flex;
align-items: center;
min-height: 44px;
box-sizing: border-box;
padding: .85rem 1.75rem;
background: var(--sa-messing);
border: 1px solid var(--sa-messing);
color: var(--sa-ebenholz);
font-family: var(--sa-schrift-ui);
font-size: .875rem;
font-weight: 500;
letter-spacing: .18em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s, border-color .2s, color .2s;
}
body .sa-abschluss a.sa-abschluss-knopf:is(:hover, :focus-visible) {
background: var(--sa-rubin);
border-color: var(--sa-rubin);
color: var(--sa-auf-akzent);
}
@media (max-width: 599px) {
body .sa-abschluss { padding: 1.5rem 1.25rem; }
body .sa-abschluss a.sa-abschluss-knopf { width: 100%; justify-content: center; }
}
/* 40b. Navigationsband unter dem Zähler (Kategorie- und Sub-Kategorieseiten) --
Backend: Centered Wrapper Start (Hintergrund „dunkel“ = Nacht, CSS-Klasse
sa-navband) → Modul „Inventar-Navigation“ (Leisten) → Element
„Sprungleiste“ → Centered Wrapper Stop, direkt nach dem Ochsenblut-Band.
Zeile 1: Sub-Kategorie-Chips (Geschwister), aktive in Ochsenblut.
Zeile 2: Sprungleiste (Abschnitt 37), durch eine feine Linie getrennt.
Die Kategorie-Leiste (Bürsten · Paddel · …) ist im Band ausgeblendet;
mit zusätzlicher Klasse sa-navband--voll erscheint sie wieder. */
body .centered-wrapper.sa-navband.sa-navband {
margin-top: 0;
padding-top: .9rem;
padding-bottom: 0;
border-bottom: 1px solid var(--sa-linie);
}
/* Kategorie-Leiste nur auf Wunsch */
body .sa-navband:not(.sa-navband--voll) .inventar-katnav { display: none; }
body .sa-navband .inventar-katnav:last-child { margin-bottom: .75rem; border-bottom: 0; }
/* Sub-Kategorie-Chips */
body .sa-navband .inventar-subnav.inventar-subnav {
margin: 0;
padding: 0 0 .8rem;
border-top: 0;
}
body .sa-navband ul.inventar-subnav-liste.inventar-subnav-liste {
gap: .5rem;
justify-content: center;
}
body .sa-navband .inventar-subnav-liste a {
min-height: 2.25rem;
box-sizing: border-box;
padding: 0 1rem;
border: 1px solid var(--sa-linie);
border-radius: 0;
background: transparent;
color: var(--sa-text);
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .16em;
line-height: 1;
text-transform: uppercase;
}
body .sa-navband .inventar-subnav-liste a::before { width: .5em; height: .5em; }
body .sa-navband .inventar-subnav-liste a:is(:hover, :focus-visible) {
border-color: var(--sa-messing);
color: var(--sa-messing);
background: transparent;
}
/* „Alle …“ zurückhaltend */
body .sa-navband .inventar-subnav-liste > li.inventar-subnav-alle a { color: var(--sa-text-leise); }
/* aktive Sub-Kategorie (bzw. „Alle“ auf der Kategorieseite) */
body .sa-navband .inventar-subnav-liste > li.is-aktiv a,
body .sa-navband .inventar-subnav-liste > li.is-aktiv a:is(:hover, :focus-visible) {
border-color: var(--sa-ochsenblut);
background: var(--sa-ochsenblut);
color: var(--sa-auf-akzent);
}
/* Sprungleiste im Band: kein eigener Abstand, Linie als Trenner */
body .sa-navband .sa-sprung-huelle { margin: 0; }
body .sa-navband nav.sa-sprung:not(.is-fixiert) {
border-top: 1px solid var(--sa-linie);
border-bottom: 0;
}
@media (max-width: 599px) {
body .sa-navband ul.inventar-subnav-liste.inventar-subnav-liste {
flex-wrap: nowrap;
justify-content: safe center;
overflow-x: auto;
scrollbar-width: none;
padding-inline: .25rem;
}
body .sa-navband .inventar-subnav-liste > li { flex: none; }
}
/* 33f. Abschnittstitel zentriert: Einleitung mittig (sa-09c) ----------------
Die Einleitung ist auf eine Lesebreite begrenzt; bei „zentriert“
(Klasse .centered) muss auch der Kasten selbst in die Mitte. */
body .content-sa-abschnitt.centered .sa-abschnitt-lead {
margin-left: auto;
margin-right: auto;
}
/* 33g. Abschnittstitel: Einleitung näher an der Überschrift (sa-09c) -------
Folgt auf die Überschrift eine Einleitung, schrumpft der h2-Abstand.
Stellschraube: margin-bottom der h2 (Abstand Überschrift → Einleitung). */
body .main-content .content-sa-abschnitt h2:has(+ p.sa-abschnitt-lead) {
margin-bottom: .2em;
}
body .main-content .content-sa-abschnitt p.sa-abschnitt-lead.sa-abschnitt-lead {
margin-top: 0;
}
/* 39d. Abschlussband auf der Instrumenten-Detailseite (sa-13) ----------------
Das Band ist dort das letzte Element des Inventar-Lesers und stand direkt
auf der Footer-Linie. Abstand nach unten wie nach oben (3rem). */
body .inventar-abschluss { margin-bottom: 3rem; }
@media (max-width: 599px) {
body .inventar-abschluss { margin-bottom: 2rem; }
}
/* 41. Kennwerte aus dem Inventar (Element „Kennwerte“, Paket sa-kennwerte) --
HTML: dl.sa-kennwerte > div.sa-kennwert > dt + dd.sa-kennwert-wert
(+ dd.sa-kennwert-zusatz, dd.sa-kennwert-basis „aus 3 von 10 Stücken“)
Boxen wie die Merkmale: Mahagoni (auf Mahagoni-Flächen Ebenholz),
Messingkante oben. In schmaler Spalte eine Box je Zeile, sonst Raster. */
body dl.sa-kennwerte.sa-kennwerte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
gap: .75rem;
margin: 0;
padding: 0;
}
body .sa-kennwert {
margin: 0;
padding: 1rem 1.25rem 1.05rem;
background: var(--sa-mahagoni);
border-top: 2px solid var(--sa-messing-tief);
}
body .centered-wrapper.-background-color-2 .sa-kennwert { background: var(--sa-ebenholz); }
body .sa-kennwert dt {
margin: 0 0 .2rem;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sa-messing);
}
body .sa-kennwert dd { margin: 0; padding: 0; }
body .sa-kennwert dd.sa-kennwert-wert {
font-family: var(--sa-schrift-text);
font-size: 1.15rem;
line-height: 1.35;
color: var(--sa-text);
}
body .sa-kennwert dd.sa-kennwert-wert a {
color: var(--sa-text);
text-decoration: none;
border-bottom: 1px solid var(--sa-linie);
}
body .sa-kennwert dd.sa-kennwert-wert a:is(:hover, :focus-visible) {
color: var(--sa-messing);
border-bottom-color: var(--sa-messing-tief);
}
body .sa-kennwert dd.sa-kennwert-zusatz {
margin-top: .1rem;
font-size: .95rem;
line-height: 1.4;
color: var(--sa-text-leise);
}
body .sa-kennwert dd.sa-kennwert-basis {
margin-top: .45rem;
font-family: var(--sa-schrift-ui);
font-size: .6875rem;
letter-spacing: .08em;
color: var(--sa-text-leise);
}
/* Epochen als Punkte in der Epochenfarbe */
body ul.sa-kennwert-epochen.sa-kennwert-epochen {
display: flex;
flex-wrap: wrap;
gap: .25rem 1rem;
margin: .15rem 0 0;
padding: 0;
list-style: none;
}
body ul.sa-kennwert-epochen.sa-kennwert-epochen > li {
display: inline-flex;
align-items: center;
gap: .4em;
margin: 0;
padding: 0;
}
body ul.sa-kennwert-epochen.sa-kennwert-epochen > li::before { content: none; display: none; }
body .sa-kennwert-punkt {
width: .6em;
height: .6em;
border-radius: 50%;
background: var(--epoche, var(--sa-messing));
}
body .sa-kennwert-zahl {
font-family: var(--sa-schrift-ui);
font-size: .75rem;
color: var(--sa-text-leise);
}
/* 42. Epochenblock (Element „Epochenblock“, Paket sa-epochenblock) ---------
HTML: .sa-epoche.epoche-- > .sa-epoche-kopf (p.sa-epoche-label,
h3.sa-epoche-name, p.sa-epoche-zeit) + .sa-epoche-inhalt (.rte,
ul.sa-epoche-stuecke mit Lieferungs-Chips, Abschnitt 30)
Wie im Entwurf: Mahagoni-Tafel mit Epochenfarbe als Oberkante, links
Name in Cinzel, rechts Text. Auf Mahagoni-Flächen wird die Tafel Ebenholz.
Schmal: Kopf über dem Text. */
body .content-sa-epoche { margin: 0 0 1.5rem; }
body .sa-epoche {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 3rem;
padding: 1.9rem 2.1rem 1.75rem;
background: var(--sa-mahagoni);
box-shadow: inset 0 4px 0 var(--epoche, var(--sa-messing)), 0 12px 30px rgba(var(--sa-schatten-rgb), calc(.3 * var(--sa-schatten-staerke)));
}
body .centered-wrapper.-background-color-2 .sa-epoche { background: var(--sa-ebenholz); }
body .sa-epoche-kopf {
flex: 0 1 13.75rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: .35rem;
}
body .sa-epoche p.sa-epoche-label {
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sa-text);
}
body .sa-epoche-punkt {
width: .75rem;
height: .75rem;
border-radius: 50%;
background: var(--epoche, var(--sa-messing));
}
body .sa-epoche h3.sa-epoche-name.sa-epoche-name {
margin: 0;
padding: 0;
border: 0;
background: none;
font-family: var(--sa-schrift-titel);
font-size: 1.75rem;
font-weight: 400;
font-style: normal;
line-height: 1.2;
letter-spacing: .02em;
text-align: left;
text-transform: none;
color: var(--epoche, var(--sa-messing));
}
body .sa-epoche h3.sa-epoche-name::before,
body .sa-epoche h3.sa-epoche-name::after { content: none; display: none; }
body .sa-epoche p.sa-epoche-zeit {
margin: 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
letter-spacing: .1em;
color: var(--sa-text-leise);
}
body .sa-epoche-inhalt {
flex: 1 1 26rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
body .sa-epoche-inhalt .rte p { max-width: 68ch; }
body .sa-epoche-inhalt .rte > :last-child { margin-bottom: 0; }
@media (max-width: 599px) {
body .sa-epoche { padding: 1.4rem 1.25rem 1.25rem; }
}
/* 42b. Epochenblock: einheitliche Linien und ausgefeilte Chips -------------
1. Alte Klassen erfahrung-* (Erfahrungsboxen) am selben Element setzen
Rahmen, linken Balken und Rundung – im Epochenblock neutralisiert,
es gilt nur die Oberkante in der Epochenfarbe.
2. Chips: Nummer als durchgehendes Feld in der Epochenfarbe, Titel
mittig in der UI-Schrift, Rahmen in der Epochenfarbe. */
body .main-content .content-sa-epoche.content-sa-epoche {
border: 0;
border-radius: 0;
overflow: visible;
background: none;
box-shadow: none;
}
body .sa-epoche-stuecke a.sa-lieferung-chip,
body .sa-epoche-stuecke span.sa-lieferung-chip {
display: inline-flex;
align-items: stretch;
gap: 0;
min-height: 2.25rem;
box-sizing: border-box;
padding: 0;
border: 1px solid color-mix(in srgb, var(--epoche, var(--sa-messing)) 45%, transparent);
border-radius: 0;
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 6%, var(--sa-ebenholz));
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .03em;
line-height: 1.25;
color: var(--sa-text);
text-decoration: none;
transition: border-color .2s, background-color .2s;
}
body .sa-epoche-stuecke .sa-lieferung-chip .sa-lieferung-nr {
display: flex;
align-items: center;
padding: 0 .7em;
font-size: .75rem;
font-weight: 500;
letter-spacing: .08em;
}
body .sa-epoche-stuecke .sa-lieferung-chip .sa-lieferung-titel {
display: flex;
align-items: center;
padding: .45em .95em;
}
body .sa-epoche-stuecke a.sa-lieferung-chip:is(:hover, :focus-visible) {
border-color: var(--epoche, var(--sa-messing));
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 16%, var(--sa-ebenholz));
color: var(--sa-text);
}
body .sa-epoche-stuecke span.sa-lieferung-chip.is-ohne-link { border-style: dashed; color: var(--sa-text-leise); }
body .sa-epoche-stuecke span.sa-lieferung-chip.is-ohne-link .sa-lieferung-nr { opacity: .7; }
/* 37b. Sprungleiste unter dem Kopfbereich (Mega-Menü) ----------------------
TAO-Kopf (.page-header) ist fixiert mit z-index 20, das Mega-Menü klappt
darin auf. Die Leiste lag mit 25 darüber und verdeckte es – jetzt knapp
darunter, aber weiterhin über dem Seiteninhalt. */
body nav.sa-sprung,
body nav.sa-sprung.is-fixiert {
z-index: 19;
}
/* 43. Instrumenten-Detailseite: Sprungleiste oben, vereinte Inventarkarte --
a) Die Sprungleiste (.inventar-sprung-huelle) steht im Template nach dem
Steckbrief. Per Flex-Reihenfolge rückt sie an den Anfang des Eintrags,
direkt unter die Menüleiste – wie das Navigationsband der Kategorie-
und Sub-Kategorieseiten (37/40b). Template und Skript bleiben unverändert;
das Fixieren beim Scrollen funktioniert weiter.
b) Inventarkarte und Zuchtflächen bilden eine gemeinsame Karte über die
volle Breite, ganz im sanften Epochenton (wie bisher nur der Kopf).
.inventar-karte und .inventar-steckbrief-seite werden dazu „aufgelöst“
(display: contents); ihre Kinder liegen in einem gemeinsamen Raster:
Zeile 1 Kopf (volle Breite)
Zeile 2 Intensität │ Zuchtflächen (Zeilen 2–5)
Zeile 3 Daten │
Zeile 4 Fuß │
Zeile 5 (Ausgleich) │
Zeile 6 Bewertung (volle Breite, eigene Karte)
Die Kartenfläche selbst zeichnet ::before über die Zeilen 1–5. */
/* a) Sprungleiste oben --------------------------------------------------- */
body .inventar-eintrag {
display: flex;
flex-direction: column;
}
body .inventar-eintrag > * {
min-width: 0;
}
body .inventar-eintrag > .inventar-sprung-huelle {
order: -1;
margin: 0 0 1.25rem;
}
body .inventar-eintrag nav.inventar-sprung {
z-index: 19;
border-block: 1px solid var(--sa-linie);
background: var(--sa-nacht);
box-shadow: none;
}
body .inventar-eintrag nav.inventar-sprung.is-fixiert {
border-top-color: transparent;
box-shadow: 0 0 0 100vmax var(--sa-nacht);
clip-path: inset(0 -100vmax);
}
/* b) Vereinte Inventarkarte ---------------------------------------------- */
body .inventar-eintrag .inventar-steckbrief {
--karte-ton: color-mix(in srgb, var(--epoche, var(--rs-accent)) 8%, var(--rs-paper));
--karte-kopf: color-mix(in srgb, var(--epoche, var(--rs-accent)) 15%, var(--rs-paper));
--karte-linie: color-mix(in srgb, var(--epoche, var(--rs-accent)) 22%, transparent);
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
grid-template-rows: auto auto auto auto 1fr auto;
gap: 0;
align-items: start;
}
body .inventar-eintrag .inventar-steckbrief::before {
content: "";
grid-column: 1 / -1;
grid-row: 1 / 6;
align-self: stretch;
border-top: 6px solid var(--epoche, var(--rs-accent));
border-radius: 3px;
background: var(--karte-ton);
box-shadow: 2px 3px 0 var(--rs-tint), 0 1px 6px rgba(var(--sa-schatten-rgb), calc(.4 * var(--sa-schatten-staerke)));
}
body .inventar-eintrag .inventar-steckbrief .inventar-karte,
body .inventar-eintrag .inventar-steckbrief .inventar-steckbrief-seite {
display: contents;
}
/* Kopf über die volle Breite */
body .inventar-eintrag .inventar-steckbrief .inventar-karte-kopf {
grid-column: 1 / -1;
grid-row: 1;
margin: 6px 0 0;
padding: 0.75em 1.25em 0.6em;
border-bottom: 2px solid color-mix(in srgb, var(--epoche, var(--rs-accent)) 35%, var(--rs-line));
background: var(--karte-kopf);
}
/* Linke Spalte: Intensität, Daten, Fuß */
body .inventar-eintrag .inventar-steckbrief .inventar-intensitaet {
grid-column: 1;
grid-row: 2;
margin: 1.1em 1.25em 0.9em;
}
body .inventar-eintrag .inventar-steckbrief .inventar-karte-daten {
grid-column: 1;
grid-row: 3;
margin: 0 1.25em 1.1em;
}
body .inventar-eintrag .inventar-steckbrief .inventar-karte-daten :is(dt, dd) {
border-bottom-color: var(--karte-linie);
}
body .inventar-eintrag .inventar-steckbrief .inventar-karte-fuss {
grid-column: 1;
grid-row: 4;
margin: 0;
padding: 0.8em 1.25em 1.1em;
border-top: 1px dashed var(--karte-linie);
background: transparent;
}
/* Rechte Spalte: Zuchtflächen, durch eine feine Linie abgesetzt */
body .inventar-eintrag .inventar-steckbrief .inventar-zuchtflaechen {
grid-column: 2;
grid-row: 2 / 6;
margin: 1.1em 1.25em 1.25em 0;
padding: 0 0 0 1.5em;
border: 0;
border-left: 1px solid var(--karte-linie);
border-radius: 0;
background: transparent;
}
body .inventar-eintrag .inventar-steckbrief .zf-raster .zf {
background: color-mix(in srgb, var(--zf-farbe, var(--rs-line)) 10%, var(--sa-kachel-toenung));
}
body .inventar-eintrag .inventar-steckbrief .zf-raster .zf--offen {
background: transparent;
}
/* Bewertung: eigene Karte, volle Breite, fünf Kriterien nebeneinander */
body .inventar-eintrag .inventar-steckbrief .inventar-bewertung {
grid-column: 1 / -1;
grid-row: 6;
margin-top: 1.5em;
}
body .inventar-eintrag .inventar-steckbrief ul.bewertung-liste {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.85em 1.75em;
}
body .inventar-eintrag .inventar-steckbrief .bewertung {
grid-template-columns: minmax(0, 1fr);
gap: 0.15em;
}
body .inventar-eintrag .inventar-steckbrief .bewertung-wert {
justify-self: start;
text-align: left;
}
body .inventar-eintrag .inventar-steckbrief .bewertung-skala {
margin-top: 0.35em;
}
@media (max-width: 999px) {
body .inventar-eintrag .inventar-steckbrief ul.bewertung-liste {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .inventar-eintrag .inventar-steckbrief .bewertung:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
/* Schmal: alles untereinander, Zuchtflächen unter den Daten */
@media (max-width: 800px) {
body .inventar-eintrag .inventar-steckbrief {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
body .inventar-eintrag .inventar-steckbrief .inventar-zuchtflaechen {
grid-column: 1;
grid-row: 5;
margin: 0 1.25em 1.25em;
padding: 1em 0 0;
border-left: 0;
border-top: 1px solid var(--karte-linie);
}
}
@media (max-width: 599px) {
body .inventar-eintrag .inventar-steckbrief ul.bewertung-liste {
grid-template-columns: minmax(0, 1fr);
}
}
/* 44. Instrument-Chips einheitlich (Lieferung, Einsatz, Zuchtkalender) ------
Abschnitt 30 setzte die Nummer als kleines Etikett mit Abstand an die
Grundlinie – im Termin (Tafel „Bestellung bei …“) wirkte das unruhig.
Jetzt überall die Form aus 42b (Epochenblock): Nummer als Feld über die
volle Höhe in der Epochenfarbe, Titel mittig in der UI-Schrift, Rahmen
in der Epochenfarbe. Gilt für alle ul.sa-lieferung-liste.
Chips ohne Nummer (Kategorie ohne genaues Instrument) behalten ihren
Innenabstand. */
body ul.sa-lieferung-liste .sa-lieferung-chip {
display: inline-flex;
align-items: stretch;
gap: 0;
min-height: 2.25rem;
box-sizing: border-box;
padding: 0;
border: 1px solid color-mix(in srgb, var(--epoche, var(--sa-messing)) 45%, transparent);
border-radius: 0;
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 6%, var(--sa-ebenholz));
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .03em;
line-height: 1.25;
color: var(--sa-text);
text-decoration: none;
transition: border-color .2s, background-color .2s;
}
body ul.sa-lieferung-liste .sa-lieferung-chip .sa-lieferung-nr {
display: flex;
align-items: center;
padding: 0 .7em;
font-size: .75rem;
font-weight: 500;
letter-spacing: .08em;
}
body ul.sa-lieferung-liste .sa-lieferung-chip .sa-lieferung-titel {
display: flex;
align-items: center;
padding: .45em .95em;
}
body ul.sa-lieferung-liste a.sa-lieferung-chip:is(:hover, :focus-visible) {
border-color: var(--epoche, var(--sa-messing));
background: color-mix(in srgb, var(--epoche, var(--sa-messing)) 16%, var(--sa-ebenholz));
color: var(--sa-text);
}
body ul.sa-lieferung-liste .sa-lieferung-chip.is-ohne-link { border-style: dashed; color: var(--sa-text-leise); }
body ul.sa-lieferung-liste .sa-lieferung-chip.is-ohne-link .sa-lieferung-nr { opacity: .7; }
/* Kategorie ohne Nummer: Text braucht eigenen Innenabstand */
body ul.sa-lieferung-liste .sa-lieferung-chip.sa-einsatz-kategorie {
align-items: center;
padding: .45em .95em;
}
/* 46. Profil: Vergleich mit der Hauptkategorie (Paket sa-49) ----------------
Auf Sub-Kategorien markiert ein blasser Rahmen je Achse die Stufe, auf der
die Hauptkategorie liegt (.sa-profil-segment.is-vergleich). Darunter eine
kleine Legende. Abschalten: Klasse „sa-ohne-vergleich“ am Profil-Element.
Stellschraube: --sa-profil-vergleich (Farbe des Rahmens). */
:where(:root) { --sa-profil-vergleich: var(--sa-text); }
body .sa-profil-segment.is-vergleich {
position: relative;
outline: 1px solid color-mix(in srgb, var(--sa-profil-vergleich) 70%, transparent);
outline-offset: 2px;
}
body .sa-profil p.sa-profil-vergleich-hinweis {
display: flex;
align-items: center;
gap: .6em;
margin: 1.1rem 0 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
letter-spacing: .06em;
color: var(--sa-text-leise);
}
body .sa-profil-vergleich-muster {
flex: none;
width: 1.4em;
height: .6rem;
outline: 1px solid color-mix(in srgb, var(--sa-profil-vergleich) 70%, transparent);
outline-offset: 2px;
background: color-mix(in srgb, var(--sa-profil-farbe, var(--sa-messing)) 14%, var(--sa-profil-grund, var(--sa-mahagoni)));
}
/* 47. Strafeintrag im Kalender (v1.3.0) -------------------------------------
HTML: templates/_sa_zuechtigung.html.twig (event_full ausführlich,
event_teaser/event_list als eine Zeile .sa-zue-kurz).
Farben nur über die Palette: Epoche (--epoche) für Steckbrief und Linien,
Verschärfung aus --sa-warn, Milderung aus --sa-salbei – jeweils als Tönung
der Seitenfläche, damit es auf hellem (rohrstock) und dunklem Grund
(strenge-angelique) passt. Reiter ohne JavaScript (Radio-Knöpfe).
Stellschrauben: --sa-zue-steckbrief-breite, --sa-zue-toenung. */
:where(:root) {
--sa-zue-steckbrief-breite: 17.5rem;
--sa-zue-toenung: 10%;
}
body .sa-zue {
--sa-zue-akzent: var(--epoche, var(--sa-messing));
margin: 1.5em 0 2em;
color: var(--sa-text);
}
body .sa-zue :is(h2, h3) { margin: 0; }
/* Spanking-Art */
body .sa-zue-arten { margin: 0 0 1.5em; }
body .sa-zue-art-badges {
display: flex;
flex-wrap: wrap;
gap: .4em;
margin: 0;
padding: 0;
list-style: none;
}
body .sa-zue-art-badges li { margin: 0; padding: 0; }
body .sa-zue-art-badges li::before,
body .sa-zue-art-badges li::marker { content: none; }
body .sa-zue-art-badges li.sa-zue-art {
padding: .3em .85em;
background: var(--sa-ochsenblut);
color: var(--sa-auf-akzent, #fff);
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .04em;
line-height: 1.4;
}
body .sa-zue-art-gruppe { opacity: .78; }
body .sa-zue-art-info { margin-top: .6em; font-size: .9375rem; }
body .sa-zue-art-info summary {
cursor: pointer;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .06em;
color: var(--sa-text-leise);
}
body .sa-zue-art-info summary:hover,
body .sa-zue-art-info summary:focus-visible { color: var(--sa-text); }
body .sa-zue-art-info dl { margin: .6em 0 0; display: grid; gap: .35em; }
body .sa-zue-art-info dt { font-weight: 700; color: var(--sa-text); }
body .sa-zue-art-info dd { margin: 0 0 .35em; max-width: 65ch; }
/* Raster: Steckbrief links, Inhalt rechts */
body .sa-zue-raster {
display: grid;
grid-template-columns: var(--sa-zue-steckbrief-breite) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
body .sa-zue-raster > * { min-width: 0; }
@media (max-width: 860px) {
body .sa-zue-raster { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* Steckbrief */
body .sa-zue-steckbrief {
border: 1px solid var(--sa-linie);
background: var(--sa-karte, var(--sa-mahagoni));
box-shadow: 0 1px 3px rgba(var(--sa-schatten-rgb, 0, 0, 0), calc(var(--sa-schatten-staerke, .3) * .4));
}
body .sa-zue-steckbrief-kopf {
display: grid;
gap: .1em;
padding: .75em 1em;
background: var(--sa-zue-akzent);
color: var(--sa-ebenholz);
}
body .sa-zue-kicker {
font-family: var(--sa-schrift-ui);
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
opacity: .85;
}
body .sa-zue-erzieher {
font-family: var(--sa-schrift-titel);
font-size: 1.25rem;
line-height: 1.25;
}
body .sa-zue-daten { margin: 0; padding: .35em 1em .75em; }
body .sa-zue-daten > div {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: .6em;
padding: .55em 0;
border-bottom: 1px solid var(--sa-linie);
font-size: .9375rem;
}
body .sa-zue-daten > div:last-child { border-bottom: 0; }
body .sa-zue-daten dt { color: var(--sa-text-leise); font-family: var(--sa-schrift-ui); font-size: .8125rem; letter-spacing: .03em; }
body .sa-zue-daten dd { margin: 0; color: var(--sa-text); font-variant-numeric: tabular-nums; }
body .sa-zue-punkte { display: inline-flex; gap: .25em; vertical-align: middle; }
body .sa-zue-punkte i {
width: .7em;
height: .7em;
border: 1px solid var(--sa-ochsenblut);
border-radius: 50%;
}
body .sa-zue-punkte i.is-an { background: var(--sa-ochsenblut); }
body .sa-zue-stufen { display: flex; gap: 3px; }
body .sa-zue-stufe {
flex: 1;
display: grid;
padding: .15em .3em;
border: 1px solid var(--sa-linie);
background: var(--sa-mahagoni);
color: var(--sa-text-leise);
font-family: var(--sa-schrift-ui);
font-size: .75rem;
line-height: 1.3;
text-align: center;
}
body .sa-zue-stufe small { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
body .sa-zue-stufe.is-an {
background: var(--sa-ochsenblut);
border-color: var(--sa-ochsenblut);
color: var(--sa-auf-akzent, #fff);
}
/* Blöcke */
body .sa-zue-block { margin: 0 0 2rem; }
body .sa-zue-titel {
margin: 0 0 .6em !important;
font-family: var(--sa-schrift-titel);
font-size: 1.5rem;
line-height: 1.2;
}
body .sa-zue-block h3 {
margin: 0 0 .5em;
font-family: var(--sa-schrift-titel);
font-size: 1.0625rem;
line-height: 1.25;
}
body .sa-zue-anlass {
padding: .25em 0 .25em 1em;
border-left: 3px solid var(--sa-messing);
}
body .sa-zue-anlass p { margin: 0 0 .4em; max-width: 65ch; }
body .sa-zue-anlass-text { font-size: 1.0625rem; color: var(--sa-text); }
body .sa-zue-vorgeschichte { font-size: .875rem; color: var(--sa-text-leise); }
/* Summen */
body .sa-zue-summen {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin: 0 0 1rem;
}
body .sa-zue-summe {
flex: 1 1 9rem;
display: grid;
gap: .1em;
padding: .6em .9em;
border: 1px solid var(--sa-linie);
background: var(--sa-karte, var(--sa-mahagoni));
}
body .sa-zue-summe-k {
font-family: var(--sa-schrift-ui);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sa-text-leise);
}
body .sa-zue-summe-v {
font-family: var(--sa-schrift-titel);
font-size: 1.75rem;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--sa-text);
}
body .sa-zue-summe-h { font-size: .75rem; color: var(--sa-text-leise); }
body .sa-zue-pfeil { margin: 0 .3em; font-size: .75em; color: var(--sa-text-leise); }
body .sa-zue-abw {
margin-left: .35em;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
}
body .sa-zue-abw.is-mehr { color: var(--sa-warn); }
body .sa-zue-abw.is-weniger { color: var(--sa-salbei); }
/* Rundentabelle */
body .sa-zue-tabelle {
overflow-x: auto;
border: 1px solid var(--sa-linie);
background: var(--sa-karte, var(--sa-mahagoni));
}
body .sa-zue-tabelle table {
width: 100%;
min-width: 38rem;
margin: 0;
border: 0;
border-collapse: collapse;
background: transparent;
font-size: .875rem;
}
body .sa-zue-tabelle :is(th, td) {
padding: .55em .75em;
border: 0;
border-top: 1px solid var(--sa-linie);
text-align: left;
vertical-align: middle;
}
body .sa-zue-tabelle thead th {
border-top: 0;
font-family: var(--sa-schrift-ui);
font-size: .75rem;
font-weight: 500;
letter-spacing: .06em;
color: var(--sa-text-leise);
white-space: nowrap;
}
body .sa-zue-tabelle .is-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body .sa-zue-tabelle tfoot td { font-weight: 700; }
body .sa-zue-nr { font-family: var(--sa-schrift-titel); font-size: 1rem; color: var(--sa-messing-tief, var(--sa-messing)); }
body .sa-zue-einheit { margin-left: .25em; font-size: .75em; font-weight: 400; color: var(--sa-text-leise); }
body .sa-zue-stellung {
display: inline-block;
padding: .1em .55em;
background: var(--sa-mahagoni);
font-size: .8125rem;
white-space: nowrap;
}
body .sa-zue-instrument .sa-lieferung-chip { font-size: .8125rem; }
/* Verschärfungen (rötlich) und Milderungen (grünlich) */
body .sa-zue-anpassungen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .9rem;
margin-top: 1.1rem;
}
body .sa-zue-anpassung {
--ton: var(--sa-warn);
padding: .8em 1em;
border: 1px solid color-mix(in srgb, var(--ton) 45%, transparent);
background: color-mix(in srgb, var(--ton) var(--sa-zue-toenung), var(--sa-ebenholz));
}
body .sa-zue-anpassung--milderungen { --ton: var(--sa-salbei); }
body .sa-zue-anpassung h3 { color: var(--ton); }
body .sa-zue-anpassung ul { display: grid; gap: .4em; margin: 0; padding: 0; list-style: none; }
body .sa-zue-anpassung li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: .75em;
margin: 0;
padding: 0;
font-size: .9375rem;
align-items: baseline;
}
body .sa-zue-anpassung li::before,
body .sa-zue-anpassung li::marker { content: none; }
body .sa-zue-menge { font-weight: 700; color: var(--ton); white-space: nowrap; font-variant-numeric: tabular-nums; }
body .sa-zue-bezug { color: var(--sa-text-leise); }
/* Maßnahmen und andere Strafen */
body .sa-zue-strafen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .9rem;
margin-top: 1.1rem;
}
body .sa-zue-kasten {
padding: .8em 1em;
border: 1px solid var(--sa-linie);
background: var(--sa-karte, var(--sa-mahagoni));
}
body .sa-zue-tags { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; padding: 0; list-style: none; }
body .sa-zue-tags li {
margin: 0;
padding: .2em .65em;
background: var(--sa-mahagoni);
font-size: .8125rem;
}
body .sa-zue-tags li::before,
body .sa-zue-tags li::marker,
body .sa-zue-liste li::before,
body .sa-zue-liste li::marker { content: none; }
body .sa-zue-liste { margin: 0; padding: 0; list-style: none; }
body .sa-zue-liste li {
display: flex;
justify-content: space-between;
gap: 1em;
margin: 0;
padding: .45em 0;
border-top: 1px solid var(--sa-linie);
font-size: .9375rem;
}
body .sa-zue-liste li:first-child { border-top: 0; }
body .sa-zue-anmerkung { display: block; font-size: .8125rem; color: var(--sa-text-leise); }
body .sa-zue-umfang { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Verlauf: Reiter */
body .sa-zue-reiter-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
body .sa-zue-reiter {
display: flex;
flex-wrap: wrap;
gap: 2px;
border-bottom: 1px solid var(--sa-linie);
}
body .sa-zue-verlauf.is-einzeln .sa-zue-reiter { display: none; }
body .sa-zue-reiter-label {
margin-bottom: -1px;
padding: .5em 1.1em;
border: 1px solid var(--sa-linie);
border-bottom: 0;
background: var(--sa-mahagoni);
color: var(--sa-text-leise);
font-family: var(--sa-schrift-ui);
font-size: .875rem;
letter-spacing: .03em;
cursor: pointer;
}
body .sa-zue-reiter-label small { margin-left: .4em; font-size: .75em; opacity: .75; }
body .sa-zue-reiter-label:hover { color: var(--sa-text); }
body .sa-zue-panel {
display: none;
padding: 1em 1.25em;
border: 1px solid var(--sa-linie);
border-top: 0;
background: var(--sa-karte, var(--sa-mahagoni));
}
body .sa-zue-verlauf.is-einzeln .sa-zue-panel { border-top: 1px solid var(--sa-linie); }
body .sa-zue-reiter-input:nth-of-type(1):checked ~ .sa-zue-panel--1,
body .sa-zue-reiter-input:nth-of-type(2):checked ~ .sa-zue-panel--2,
body .sa-zue-reiter-input:nth-of-type(3):checked ~ .sa-zue-panel--3 { display: block; }
body .sa-zue-reiter-input:nth-of-type(1):checked ~ .sa-zue-reiter .sa-zue-reiter-label--1,
body .sa-zue-reiter-input:nth-of-type(2):checked ~ .sa-zue-reiter .sa-zue-reiter-label--2,
body .sa-zue-reiter-input:nth-of-type(3):checked ~ .sa-zue-reiter .sa-zue-reiter-label--3 {
background: var(--sa-karte, var(--sa-mahagoni));
color: var(--sa-zue-akzent);
box-shadow: inset 0 2px 0 var(--sa-zue-akzent);
}
body .sa-zue-reiter-input:nth-of-type(1):focus-visible ~ .sa-zue-reiter .sa-zue-reiter-label--1,
body .sa-zue-reiter-input:nth-of-type(2):focus-visible ~ .sa-zue-reiter .sa-zue-reiter-label--2,
body .sa-zue-reiter-input:nth-of-type(3):focus-visible ~ .sa-zue-reiter .sa-zue-reiter-label--3 {
outline: 2px solid var(--sa-messing);
outline-offset: 2px;
}
body .sa-zue-sicht {
margin: 0 0 .6em;
font-family: var(--sa-schrift-ui);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sa-messing-tief, var(--sa-messing));
}
body .sa-zue-text > :last-child { margin-bottom: 0; }
body .sa-zue-text p { max-width: 65ch; }
body .sa-zue-fakten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: .6rem;
margin: .9em 0 0;
}
body .sa-zue-fakten > div { padding: .5em .75em; background: var(--sa-mahagoni); }
body .sa-zue-fakten dt {
font-family: var(--sa-schrift-ui);
font-size: .6875rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sa-text-leise);
}
body .sa-zue-fakten dd { margin: 0; font-size: .9375rem; }
/* Liste und Übersicht: eine Zeile */
body .sa-zue-kurz {
margin: .35em 0 0;
font-family: var(--sa-schrift-ui);
font-size: .8125rem;
letter-spacing: .03em;
color: var(--sa-text-leise);
}