@font-face {
font-family: "EB Garamond";
src: url("../../schriften/eb-garamond.woff2") format("woff2");
font-weight: 400 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("../../schriften/eb-garamond-kursiv.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Garamond Ersatz";
src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"), local("Times");
size-adjust: 92.5%;
ascent-override: 108%;
descent-override: 33%;
line-gap-override: 0%;
}
:root {
--papier: #f5efe3;
--papier-2: #ece4d3;
--papier-3: #e2d7c1;
--tinte: #231d16;
--tinte-2: #5a5044;
--tinte-3: #776b5c;
--rubrik: #a3301c;
--rubrik-tief: #8a2716;
--auf-rubrik: #fbf6ec;
--knopf: #a3301c;
--knopf-tief: #8a2716;
--auf-knopf: #fbf6ec;
--gold: #a87c22;
--gold-zart: rgb(168 124 34 / .55);
--linie: #d6c8ae;
--linie-2: #c3b08f;
--hervor: rgb(168 124 34 / .12);
--schatten: 0 1px 2px rgb(60 40 20 / .08), 0 8px 28px rgb(60 40 20 / .12);
--initiale-aus: grayscale(1) brightness(.5);
--gewicht: 400;
color-scheme: light;
--schrift: "EB Garamond", "Garamond Ersatz", Garamond, Georgia, serif;
--rand: clamp(1rem, 4vw, 2.5rem);
--mass: 36rem;
--kopf-h: 3.5rem;
--feder: cubic-bezier(.2, .9, .25, 1.05);
--kap: "smcp", "c2sc", "kern", "locl" 0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--papier: #15141b;
--papier-2: #1d1b25;
--papier-3: #27242f;
--tinte: #ece4d1;
--tinte-2: #b8ae99;
--tinte-3: #9a907d;
--rubrik: #e8806a;
--rubrik-tief: #f09a86;
--auf-rubrik: #1b1217;
--knopf: #a8402a;
--knopf-tief: #b94c35;
--auf-knopf: #f7efe1;
--gold: #d8b366;
--gold-zart: rgb(216 179 102 / .6);
--linie: #33303b;
--linie-2: #4a4452;
--hervor: rgb(216 179 102 / .1);
--schatten: 0 1px 2px rgb(0 0 0 / .4), 0 10px 32px rgb(0 0 0 / .45);
--initiale-aus: grayscale(1) brightness(1.55);
--gewicht: 430;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--papier: #15141b;
--papier-2: #1d1b25;
--papier-3: #27242f;
--tinte: #ece4d1;
--tinte-2: #b8ae99;
--tinte-3: #9a907d;
--rubrik: #e8806a;
--rubrik-tief: #f09a86;
--auf-rubrik: #1b1217;
--knopf: #a8402a;
--knopf-tief: #b94c35;
--auf-knopf: #f7efe1;
--gold: #d8b366;
--gold-zart: rgb(216 179 102 / .6);
--linie: #33303b;
--linie-2: #4a4452;
--hervor: rgb(216 179 102 / .1);
--schatten: 0 1px 2px rgb(0 0 0 / .4), 0 10px 32px rgb(0 0 0 / .45);
--initiale-aus: grayscale(1) brightness(1.55);
--gewicht: 430;
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background: var(--papier);
scroll-padding-top: 1rem;
}
body {
margin: 0;
background: var(--papier);
color: var(--tinte);
font-family: var(--schrift);
font-size: 1.1875rem;
line-height: 1.5;
font-weight: var(--gewicht);
font-kerning: normal;
font-variant-numeric: oldstyle-nums proportional-nums;
font-feature-settings: "liga", "kern";
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 60rem) { body { font-size: 1.25rem; } }
a { color: inherit; text-decoration-color: var(--linie-2); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--rubrik); outline-offset: 3px; border-radius: 2px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
p { margin: 0 0 .9em; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
.versteckt {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.symbolsammlung { position: absolute; width: 0; height: 0; overflow: hidden; }
.s { width: 1.4rem; height: 1.4rem; flex: none; }
.kapitaelchen, .klein-k {
font-feature-settings: var(--kap);
letter-spacing: .07em;
}
.sprung {
position: absolute; left: 1rem; top: -4rem; z-index: 50;
background: var(--tinte); color: var(--papier); padding: .5rem 1rem; border-radius: .3rem;
}
.sprung:focus { top: .5rem; }
.kopf {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
height: var(--kopf-h);
padding: 0 var(--rand);
border-bottom: 1px solid var(--linie);
}
.marke {
display: inline-flex; align-items: baseline; gap: .35rem;
text-decoration: none; font-size: 1.12rem; white-space: nowrap;
font-feature-settings: var(--kap); letter-spacing: .09em;
}
.marke-zeichen { color: var(--rubrik); font-size: 1.25em; line-height: 1; font-feature-settings: normal; letter-spacing: 0; }
.kopf-werkzeuge { display: flex; align-items: center; gap: .15rem; }
.kopf-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
min-width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
background: none; border: 0; border-radius: .4rem; color: var(--tinte-2); text-decoration: none;
font-feature-settings: var(--kap); letter-spacing: .08em; font-size: 1.05rem;
}
.kopf-knopf .s { width: 1.3rem; height: 1.3rem; }
.zahl {
min-width: 1.15rem; padding: 0 .25rem; border-radius: 1rem; font-size: .8rem; line-height: 1.15rem;
background: var(--knopf); color: var(--auf-knopf); font-variant-numeric: lining-nums; text-align: center;
letter-spacing: 0; font-feature-settings: normal;
}
.zahl:empty { display: none; }
.schema-symbol { display: none; }
:root:not([data-theme]) .schema-auto, :root[data-theme="auto"] .schema-auto,
:root[data-theme="light"] .schema-hell, :root[data-theme="dark"] .schema-dunkel { display: block; }
@media (max-width: 26rem) { .marke { font-size: 1.02rem; letter-spacing: .07em; } }
abbr[title] { text-decoration: none; }
.buehne {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
height: calc(100svh - var(--kopf-h));
min-height: 30rem;
max-height: 52rem;
padding: .9rem var(--rand) 1.1rem;
position: relative;
}
@media (min-width: 60rem) {
.buehne { height: clamp(34rem, calc(100svh - var(--kopf-h) - 6rem), 46rem); padding-top: 1.6rem; }
}
.kolumne {
display: flex; align-items: center; gap: .9rem; justify-content: center;
font-size: 1rem; color: var(--tinte-2); text-align: center;
font-feature-settings: var(--kap); letter-spacing: .1em;
}
.kolumne::before, .kolumne::after { content: ""; height: 1px; flex: 0 1 3.5rem; min-width: 1rem; background: var(--linie-2); }
@media (max-width: 30rem) { .kolumne { font-size: .94rem; letter-spacing: .08em; gap: .6rem; } }
@media (min-width: 60rem) { .kolumne { font-size: 1.1rem; } }
.tag-marke {
margin: .35rem 0 0; text-align: center; font-size: .92rem; color: var(--tinte-3);
font-feature-settings: var(--kap); letter-spacing: .08em;
}
.buehne[data-art="thema"] .kolumne {
display: block; font-size: clamp(1.5rem, 4vw + .9rem, 2.2rem); line-height: 1.12;
font-feature-settings: normal; letter-spacing: 0; color: var(--tinte);
}
.buehne[data-art="thema"] .kolumne::before, .buehne[data-art="thema"] .kolumne::after { content: none; }
.flaeche {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: center;
justify-items: center;
min-height: 0;
overflow: hidden;
margin-inline: calc(-1 * var(--rand));
padding: .5rem var(--rand);
}
.vers-block {
margin: 0;
width: 100%;
max-width: 34rem;
container-type: inline-size;
}
.vers-block[data-stufe="5"], .vers-block[data-stufe="6"] { max-width: 38rem; }
@media (min-width: 60rem) { .vers-block { max-width: 40rem; } .vers-block[data-stufe="1"] { max-width: 34rem; } }
.vers {
--gr: 1.6rem;
--lh: 1.3;
margin: 0;
font-size: calc(var(--gr) * var(--skala, 1));
line-height: var(--lh);
text-wrap: balance;
hyphens: manual;
font-variant-numeric: oldstyle-nums;
overflow-wrap: break-word;
}
.vers-block[data-stufe="1"] .vers { --gr: clamp(2.6rem, 7vw + 1.2rem, 4.4rem); --lh: 1.12; }
.vers-block[data-stufe="2"] .vers { --gr: clamp(2.2rem, 5vw + 1.05rem, 3.4rem); --lh: 1.16; }
.vers-block[data-stufe="3"] .vers { --gr: clamp(1.85rem, 3.6vw + 1rem, 2.8rem); --lh: 1.22; }
.vers-block[data-stufe="4"] .vers { --gr: clamp(1.55rem, 2.6vw + .9rem, 2.25rem); --lh: 1.28; }
.vers-block[data-stufe="5"] .vers { --gr: clamp(1.3rem, 1.7vw + .85rem, 1.8rem); --lh: 1.34; }
.vers-block[data-stufe="6"] .vers { --gr: clamp(1.12rem, 1vw + .8rem, 1.45rem); --lh: 1.4; }
.w { display: inline-block; }
.ini {
position: relative;
color: var(--rubrik);
float: left;
font-size: calc(var(--lh) * 2.06em);
line-height: 1;
margin: -.035em .07em -.2em -.02em;
}
.vers-block[data-stufe="1"] .ini { float: none; font-size: 1.12em; margin: 0 .01em 0 0; line-height: inherit; }
.vor { position: absolute; right: 100%; top: .05em; font-size: .42em; line-height: 1; color: var(--tinte-2); padding-right: .08em; }
.vers-block[data-stufe="1"] .vor { position: static; font-size: 1em; color: inherit; padding: 0; }
.ausl { color: var(--tinte-3); }
.bind { white-space: nowrap; }
.sela { color: var(--tinte-3); font-style: italic; }
.geist { z-index: 1; }
.geist .stelle { visibility: hidden; }
.stelle {
display: flex; align-items: center; gap: .3rem;
margin-top: 1.05rem;
font-size: 1.12rem; line-height: 1.6rem;
}
.stelle-ref, .tr { font-feature-settings: var(--kap); letter-spacing: .085em; white-space: nowrap; }
.stelle-ref { color: var(--rubrik); }
.tr { color: var(--tinte-2); }
.tr::before { content: "·"; margin: 0 .45em 0 .2em; color: var(--tinte-3); }
.rolle { display: inline-block; height: 1.6rem; overflow: hidden; vertical-align: top; }
.rolle-spur { display: block; }
.rolle-spur > span { display: block; height: 1.6rem; }
.verlauf-knopf {
display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: -.4rem 0;
border: 0; background: none; color: var(--tinte-3); border-radius: 50%;
}
.verlauf-knopf:disabled { visibility: hidden; }
.verlauf-knopf .s { width: 1.15rem; height: 1.15rem; }
.stelle .verlauf-knopf:first-child { margin-left: -.75rem; }
.js-aus .verlauf-knopf { visibility: hidden; }
.band-huelle {
position: absolute; top: -1px; right: max(1rem, calc(50% - 20rem)); z-index: 2;
width: 1.4rem; height: 5.6rem; overflow: hidden; pointer-events: none;
}
.band {
display: block; width: 100%; height: 5.5rem; color: var(--rubrik);
transform: translateY(-100%);
}
.band.an { transform: none; }
.band path { fill: currentColor; }
.werkzeuge {
display: flex; justify-content: center; gap: .1rem;
margin: .55rem auto 0;
width: 100%; max-width: 30rem;
}
.werkzeug[aria-expanded="true"] { color: var(--rubrik); }
.werkzeug {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: .1rem;
padding: .4rem .1rem .3rem; min-height: 3.3rem;
background: none; border: 0; border-radius: .45rem; color: var(--tinte-2);
font-size: .98rem; line-height: 1.1;
font-feature-settings: var(--kap); letter-spacing: .06em;
}
.werkzeug[aria-pressed="true"] { color: var(--rubrik); }
.werkzeug[aria-pressed="true"] .s path { fill: currentColor; }
.zieh-zone { display: grid; justify-items: center; gap: .45rem; }
.ziehen {
position: relative;
width: min(100%, 22rem); min-height: 3.4rem;
padding: .55rem 1.5rem .65rem;
background: var(--knopf); color: var(--auf-knopf);
border: 0; border-radius: .45rem;
font-size: 1.4rem; line-height: 1;
font-feature-settings: var(--kap); letter-spacing: .1em;
box-shadow: 0 1px 0 var(--knopf-tief), 0 .35rem 1rem -.4rem rgb(120 30 15 / .5);
transition: transform .18s var(--feder), box-shadow .18s;
}
.ziehen:active { transform: translateY(1px) scale(.985); }
.ziehen:disabled { opacity: .45; cursor: not-allowed; }
.zieh-info { margin: 0; font-size: 1rem; color: var(--tinte-2); text-align: center; min-height: 1.5rem; }
.link-knopf {
background: none; border: 0; padding: 0; color: var(--tinte); text-decoration: underline;
text-decoration-color: var(--linie-2); text-underline-offset: .18em;
}
.zieh-info .link-knopf { display: inline-flex; align-items: center; gap: .25rem; vertical-align: baseline; }
.zieh-info .s { width: 1rem; height: 1rem; align-self: center; }
.vers-wartet .flaeche, .buehne-wartet .flaeche,
.buehne-wartet [data-tag-marke], .buehne-wartet [data-heute-datum] { visibility: hidden; }
body:not(:has(> #seiten-ende)) :is(main > .buehne ~ *, .fuss) { visibility: hidden; animation: unterbau-zeigen 0s 3s forwards; }
.buehne-wartet :is(main > .buehne ~ *, .fuss) { visibility: hidden; }
@keyframes unterbau-zeigen { to { visibility: visible; } }
.abschnitt { padding: 2.6rem var(--rand); border-top: 1px solid var(--linie); }
.abschnitt > * { max-width: var(--mass); margin-left: auto; margin-right: auto; }
.abschnitt-titel {
display: flex; align-items: center; gap: .9rem; justify-content: center;
font-size: 1.3rem; margin-bottom: 1.4rem; text-align: center;
font-feature-settings: var(--kap); letter-spacing: .1em; color: var(--tinte);
}
.abschnitt-titel::before, .abschnitt-titel::after { content: ""; height: 1px; flex: 0 1 3rem; background: var(--linie-2); }
.seitenkopf { padding: 2.4rem var(--rand) 1.4rem; text-align: center; }
.seitenkopf h1 { font-size: clamp(2.1rem, 5vw + 1rem, 3.4rem); line-height: 1.08; }
.seitenkopf .unterzeile { margin: .8rem auto 0; max-width: 32rem; color: var(--tinte-2); }
.platzhalter { color: var(--rubrik); font-feature-settings: var(--kap); letter-spacing: .08em; }
.filter-form { display: grid; gap: 1.25rem; }
.filter-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter-gruppe > legend, .filter-name {
display: block; padding: 0; margin-bottom: .45rem; font-size: 1rem; color: var(--tinte-2);
font-feature-settings: var(--kap); letter-spacing: .09em;
}
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--linie-2); border-radius: .45rem; padding: .2rem; gap: .2rem; }
.segment label { position: relative; display: block; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment span {
display: block; padding: .45rem .5rem; border-radius: .3rem; text-align: center; line-height: 1.25;
transition: background-color .2s, color .2s;
}
.segment input:checked + span { background: var(--tinte); color: var(--papier); }
.segment input:focus-visible + span { outline: 2px solid var(--rubrik); outline-offset: 2px; }
.hinweis-text { margin-block: .5rem 0; font-size: 1rem; color: var(--tinte-2); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
display: inline-flex; align-items: center; gap: .35rem;
padding: .3rem .85rem .35rem; border: 1px solid var(--linie-2); border-radius: 2rem; line-height: 1.3;
transition: background-color .2s, border-color .2s, color .2s;
}
.chip input:checked + span { background: var(--hervor); border-color: var(--gold); color: var(--tinte); }
.chip input:checked + span::before {
content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rubrik);
}
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.chip input:focus-visible + span { outline: 2px solid var(--rubrik); outline-offset: 2px; }
.filter-reihe { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .filter-reihe { grid-template-columns: 1fr 1fr; } }
.auswahl {
width: 100%; min-height: 2.8rem; padding: .35rem 2.2rem .4rem .75rem;
border: 1px solid var(--linie-2); border-radius: .45rem; background-color: var(--papier);
appearance: none; -webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--tinte-2) 50%), linear-gradient(135deg, var(--tinte-2) 50%, transparent 50%);
background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%;
background-size: .32rem .32rem; background-repeat: no-repeat;
}
.auswahl option:disabled { color: var(--tinte-3); }
.gesperrt { opacity: .45; }
.filter-leer { color: var(--rubrik); margin: 0; }
.register { columns: 2 10rem; column-gap: 2rem; padding: 0; margin-block: 0; list-style: none; }
.register li { break-inside: avoid; padding: .2rem 0; }
.register a { text-decoration: none; }
.register-buchstabe { color: var(--rubrik); font-feature-settings: var(--kap); letter-spacing: .08em; margin-right: .4rem; }
.wege { display: grid; gap: .5rem; padding: 0; margin: 1.6rem auto 0; list-style: none; }
.wege a { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.wege .s { color: var(--rubrik); width: 1.1rem; height: 1.1rem; }
.so { list-style: none; padding: 0; margin-block: 0; display: grid; gap: 1rem; }
.so li { position: relative; padding-left: 1.6rem; }
.so li::before { content: "¶"; position: absolute; left: 0; top: 0; color: var(--rubrik); }
.so b { font-weight: 500; }
.fliesstext { hyphens: auto; text-wrap: pretty; }
.fliesstext h2 { font-size: 1.45rem; margin: 1.6em 0 .6em; }
.fliesstext h3 { font-size: 1.2rem; margin: 1.4em 0 .5em; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
list-style: none; cursor: pointer; padding: .8rem 2rem .8rem 0; position: relative; font-size: 1.15rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; position: absolute; right: .3rem; top: 1.15rem; width: .55rem; height: .55rem;
border-right: 1.5px solid var(--rubrik); border-bottom: 1.5px solid var(--rubrik); transform: rotate(45deg);
transition: transform .25s var(--feder);
}
.faq details[open] summary::after { transform: rotate(225deg); top: 1.35rem; }
.faq .antwort { padding: 0 0 1rem; color: var(--tinte-2); }
.kontext { padding: 1.4rem var(--rand) 2.4rem; }
.kontext[hidden] { display: none; }
.kontext-innen { max-width: var(--mass); margin: 0 auto; }
.kontext-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kontext-titel { font-size: 1.6rem; }
.kontext-titel .tr { font-size: 1.05rem; }
.kapitel-titel { font-style: italic; color: var(--tinte-2); margin: 0 0 1rem; font-size: 1.05rem; }
.kapitel-titel sup { font-style: normal; }
.kapiteltext p { margin: 0 0 .8em; hyphens: auto; text-wrap: pretty; font-size: 1.12rem; line-height: 1.62; }
@media (min-width: 60rem) { .kapiteltext p { font-size: 1.2rem; } }
.kapiteltext sup, .kapitel-titel sup {
color: var(--rubrik); font-size: .68em; line-height: 0; margin-right: .18em; vertical-align: .45em;
font-variant-numeric: oldstyle-nums;
}
.v.ziel {
text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .09em;
text-underline-offset: .24em; text-decoration-skip-ink: auto;
background: var(--hervor); box-decoration-break: clone; -webkit-box-decoration-break: clone;
border-radius: .15em;
}
.v.leer { color: var(--tinte-3); font-style: italic; font-size: .92em; }
.kontext-zu { display: inline-flex; align-items: center; gap: .3rem; }
.kontext-zu .s { width: 1.1rem; height: 1.1rem; }
.versliste { list-style: none; padding: 0; margin: 0 auto; max-width: var(--mass); counter-reset: vers; }
.eintrag { padding: 1.3rem 0 1.1rem; border-bottom: 1px solid var(--linie); }
.eintrag-ref { font-size: 1.12rem; color: var(--rubrik); font-feature-settings: var(--kap); letter-spacing: .085em; margin-bottom: .35rem; }
.eintrag-ref a { text-decoration: none; }
.eintrag-text { margin: 0 0 .55rem; font-size: 1.2rem; line-height: 1.5; hyphens: auto; text-wrap: pretty; }
.eintrag-aktionen { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-left: -.35rem; }
.klein-knopf {
display: inline-flex; align-items: center; gap: .3rem; min-height: 2.6rem; padding: 0 .35rem;
background: none; border: 0; color: var(--tinte-2); border-radius: .35rem;
font-feature-settings: var(--kap); letter-spacing: .07em; font-size: 1.02rem;
}
.klein-knopf .s { width: 1.15rem; height: 1.15rem; }
.eintrag .kontext { padding: .6rem 0 0; }
.buch-trenner { margin: 2rem 0 .2rem; font-size: 1.05rem; color: var(--tinte-2); font-feature-settings: var(--kap); letter-spacing: .1em; }
.woche { list-style: none; margin: 0 auto; padding: 0; max-width: var(--mass); }
.woche li { display: grid; gap: .1rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.woche-datum { font-size: 1rem; color: var(--tinte-2); font-feature-settings: var(--kap); letter-spacing: .08em; }
.woche-text { margin: 0; font-size: 1.12rem; }
.woche-ref { color: var(--rubrik); font-feature-settings: var(--kap); letter-spacing: .08em; }
.datumzeile { color: var(--tinte-2); font-size: 1.05rem; text-align: center; margin: -.4rem var(--rand) 1.6rem; }
.quellen-tabelle { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.quellen-tabelle th, .quellen-tabelle td { text-align: left; vertical-align: top; padding: .6rem .5rem .6rem 0; border-bottom: 1px solid var(--linie); }
.quellen-tabelle th { font-weight: 400; color: var(--tinte-2); font-feature-settings: var(--kap); letter-spacing: .08em; }
.tabelle-huelle { overflow-x: auto; }
.extern { display: inline-flex; align-items: center; gap: .2rem; }
.extern .s { width: .95rem; height: .95rem; }
@media (max-width: 40rem) {
.quellen-tabelle thead { display: none; }
.quellen-tabelle tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.quellen-tabelle td { display: block; border: 0; padding: .1rem 0; }
}
dialog {
border: 0; padding: 0; color: var(--tinte); background: var(--papier);
width: min(100% - 1.5rem, 58rem); max-height: min(100svh - 1.5rem, 54rem);
border-radius: .7rem; box-shadow: var(--schatten);
}
dialog::backdrop { background: rgb(20 14 10 / .45); }
.dialog-kopf {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .7rem .7rem .7rem 1.2rem; border-bottom: 1px solid var(--linie);
position: sticky; top: 0; background: var(--papier); z-index: 1;
}
.dialog-kopf h2 { font-size: 1.25rem; font-feature-settings: var(--kap); letter-spacing: .09em; }
.dialog-zu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; border-radius: 50%; color: var(--tinte-2); }
.dialog-inhalt { padding: 1.1rem 1.2rem 1.3rem; }
@media (max-width: 40rem) {
dialog { width: 100%; max-width: 100%; max-height: 100svh; height: 100svh; margin: 0; border-radius: 0; }
}
.karte-raster { display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .karte-raster { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; } }
.karte-buehne {
display: grid; place-items: center; background: var(--papier-2); border-radius: .5rem;
padding: 1rem; height: min(56svh, 30rem);
}
@media (min-width: 48rem) { .karte-buehne { height: min(70svh, 34rem); } }
.karte-rahmen { position: relative; max-width: 100%; max-height: 100%; box-shadow: var(--schatten); border-radius: 2px; line-height: 0; }
.karte-rahmen canvas { width: 100%; height: 100%; border-radius: 2px; }
.karte-steuerung { display: grid; gap: 1.1rem; align-content: start; }
.karte-steuerung .segment { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
.karte-stile.segment { grid-template-columns: 1fr 1fr 1fr; }
.karte-aktionen { display: grid; gap: .55rem; }
.knopf {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 3rem; padding: .4rem 1.2rem; border-radius: .45rem; border: 1px solid var(--linie-2);
background: var(--papier); text-decoration: none; font-size: 1.15rem;
font-feature-settings: var(--kap); letter-spacing: .08em;
}
.knopf-voll { background: var(--knopf); border-color: var(--knopf); color: var(--auf-knopf); }
.knopf[hidden] { display: none; }
.karte-hinweis { font-size: .95rem; color: var(--tinte-2); margin: 0; }
.merkliste { list-style: none; margin: 0; padding: 0; }
.merkliste li { padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.merkliste .ml-ref { color: var(--rubrik); font-feature-settings: var(--kap); letter-spacing: .08em; }
.merkliste .ml-text { margin: .1rem 0 .3rem; }
.merk-titel { font-size: 1.1rem; margin: 1.6rem 0 .3rem; color: var(--tinte-2); font-feature-settings: var(--kap); letter-spacing: .09em; }
.merk-titel:first-child { margin-top: 0; }
.toast {
position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
translate: -50% 0;
display: flex; align-items: center; gap: .5rem;
padding: .55rem 1.1rem .6rem; border-radius: 2rem;
background: var(--tinte); color: var(--papier); box-shadow: var(--schatten);
opacity: 0; transform: translateY(.6rem); pointer-events: none;
transition: opacity .2s, transform .3s var(--feder);
}
.toast.an { opacity: 1; transform: none; }
.toast .s { width: 1.1rem; height: 1.1rem; }
.fuss {
padding: 2.2rem var(--rand) 2.6rem; border-top: 1px solid var(--linie);
text-align: center; color: var(--tinte-2); font-size: 1rem;
}
.fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.4rem; margin-bottom: .8rem; }
.fuss nav a {
text-decoration: none; color: var(--tinte); font-feature-settings: var(--kap); letter-spacing: .09em;
display: inline-block; padding: .35rem 0;
}
.fuss p { margin: 0 auto; max-width: 30rem; }
.fuss-zeichen { color: var(--rubrik); display: block; margin-bottom: .6rem; font-size: 1.3rem; }
.brot { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: 0 0 .7rem; font-size: .98rem; color: var(--tinte-2); }
.brot li + li::before { content: "/"; margin-right: .4rem; color: var(--tinte-3); }
.brot a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01s !important; scroll-behavior: auto !important; }
}
@media print {
:root, :root[data-theme="dark"] {
--papier: #fff; --papier-2: #fff; --tinte: #000; --tinte-2: #333; --rubrik: #a3301c; --linie: #ccc; --gold: #a87c22;
color-scheme: light;
}
.kopf-werkzeuge, .werkzeuge, .zieh-zone, .filter, .verlauf-knopf, .sprung, .eintrag-aktionen, .toast, .band { display: none !important; }
.buehne { height: auto; min-height: 0; max-height: none; }
}
.kommt .w, .kommt .ini { opacity: 0; }
.register-einleitung { text-align: center; margin-bottom: 1.2rem; }
.quellen-tabelle b, .so b { font-weight: 500; }
.brot-leiste { height: 2.6rem; padding: .85rem var(--rand) 0; }
.brot-leiste .brot { margin: 0; }
.brot-leiste + .buehne { height: calc(100svh - var(--kopf-h) - 2.6rem); padding-top: .5rem; }
@media (min-width: 60rem) {
.brot-leiste + .buehne { height: clamp(34rem, calc(100svh - var(--kopf-h) - 8.6rem), 46rem); }
.stelle { font-size: 1.25rem; }
}
.unterzeile-buehne { text-align: center; margin: .3rem 0 0; color: var(--tinte-2); font-size: 1.02rem; }
.buehne.ohne-zieh { height: auto; min-height: 0; max-height: none; grid-template-rows: auto clamp(23rem, 64svh, 34rem); }
button, a, summary, label { -webkit-tap-highlight-color: transparent; }
[tabindex="-1"]:focus { outline: none; }
.brot { font-size: .9rem; color: var(--tinte-3); }
.pfeil-runter { transform: rotate(90deg); }
.zieh-info .link-knopf { display: inline; }
.zieh-info .s { display: inline-block; vertical-align: -.14em; margin-right: .25rem; }
.pfeil-hoch { transform: rotate(-90deg); }
@media (max-width: 40rem) {
.kolumne, .abschnitt-titel { display: block; }
.kolumne::after, .abschnitt-titel::after { content: none; }
.kolumne::before, .abschnitt-titel::before { display: block; width: 2.5rem; margin: 0 auto .6rem; }
.abschnitt-titel { font-size: 1.12rem; letter-spacing: .08em; }
}
@media (max-width: 22.5rem) {
.marke { font-size: .92rem; letter-spacing: .05em; }
.kopf-knopf { min-width: 2.5rem; padding: 0 .3rem; }
.werkzeug { font-size: .86rem; letter-spacing: .02em; }
}
.werkzeug { flex: 1 1 auto; }
.werkzeuge { gap: .5rem; }
@media (max-width: 30rem) {
:lang(de) .werkzeug { font-size: .86rem; letter-spacing: .03em; }
}
@media (max-width: 22.5rem) {
.werkzeuge { gap: .2rem; }
:lang(de) .werkzeug { font-size: .76rem; letter-spacing: 0; padding-inline: 0; }
}
.filter-ziehen { display: grid; justify-items: center; gap: .4rem; margin-top: .4rem; text-align: center; }
.filter-ziehen .knopf { width: min(100%, 22rem); }
.filter-ziehen .hinweis-text { margin: 0; }
.abschnitt-register { padding-top: 3.4rem; }
.register { columns: 2; column-gap: 1.5rem; }
@media (min-width: 40rem) { .register { columns: 3; } }
@media (min-width: 60rem) { .abschnitt-register > .register { max-width: 48rem; columns: 4; } }
.register li { padding-left: 1.3rem; position: relative; }
.register-neu::before {
content: attr(data-b); position: absolute; left: 0; top: .2rem; color: var(--rubrik);
font-feature-settings: var(--kap); letter-spacing: 0;
}
@media (min-width: 60rem) {
.abschnitt-so > .so { max-width: 58rem; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.abschnitt-text + .faq, .abschnitt-text + .abschnitt-liste { border-top: 0; padding-top: .6rem; }
.abschnitt-titel-leise { display: block; font-size: 1.12rem; color: var(--tinte-2); text-align: left; margin-bottom: .6rem; }
.abschnitt-titel-leise::before, .abschnitt-titel-leise::after { content: none !important; }
.abschnitt-text .fliesstext > p:first-child::first-letter { color: var(--rubrik); font-size: 1.9em; float: left; line-height: .9; margin: .08em .08em 0 0; }
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .5rem; margin-bottom: .2rem; }
.eintrag-kopf .eintrag-ref { margin: 0; }
.eintrag-aktionen { flex-wrap: nowrap; gap: 0; margin: 0 -.4rem 0 auto; }
.eintrag-text { margin: 0; }
.eintrag { padding: 1rem 0 1.1rem; }
@media (max-width: 40rem) {
.eintrag-aktionen .klein-knopf { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0; }
.eintrag-aktionen .knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.buch-trenner {
display: flex; align-items: center; gap: .8rem; margin: 2.4rem 0 .3rem;
font-size: 1.2rem; color: var(--tinte);
}
.buch-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie-2); }
.sprungleiste {
display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.1rem; margin-bottom: 1rem;
font-feature-settings: var(--kap); letter-spacing: .07em; font-size: 1rem;
}
.sprungleiste a { text-decoration: none; color: var(--tinte-2); padding: .35rem 0; }
.kontext-ende { margin: 1.4rem 0 0; text-align: center; }
.karte-aktionen {
position: sticky; bottom: 0; z-index: 1; background: var(--papier); border-top: 1px solid var(--linie);
padding: .7rem 1.2rem calc(.7rem + env(safe-area-inset-bottom));
display: grid; grid-template-columns: 1fr; gap: .55rem;
}
.karte-aktionen.mit-teilen { grid-template-columns: 3fr 2fr; }
.karte-aktionen .knopf { padding-inline: .5rem; white-space: nowrap; font-size: 1.02rem; gap: .35rem; }
.karte-formate.segment { grid-template-columns: repeat(4, 1fr); }
.karte-formate span { padding-inline: .2rem; font-size: .95rem; }
@media (max-width: 40rem) {
dialog.karte-dialog { display: none; }
dialog.karte-dialog[open] { display: flex; flex-direction: column; }
.karte-dialog .dialog-inhalt { flex: 1 1 auto; overflow-y: auto; padding-bottom: .8rem; }
.karte-buehne { height: min(44svh, 24rem); padding: .7rem; }
.karte-raster { gap: .9rem; }
.karte-steuerung { gap: .8rem; }
}
@media (min-width: 48rem) {
.karte-formate.segment { grid-template-columns: 1fr 1fr; }
.karte-aktionen { position: static; border-top: 0; padding-top: 0; justify-content: end; grid-template-columns: minmax(0, 17rem); }
.karte-aktionen.mit-teilen { grid-template-columns: repeat(2, minmax(0, 13rem)); }
}
@media (hover: hover) {
a:hover { text-decoration-color: var(--rubrik); }
.kopf-knopf:hover { color: var(--tinte); background: var(--papier-2); }
.verlauf-knopf:hover:not(:disabled) { color: var(--tinte); background: var(--papier-2); }
.werkzeug:hover { color: var(--tinte); background: var(--papier-2); }
.ziehen:hover { background: var(--knopf-tief); }
.link-knopf:hover { text-decoration-color: var(--rubrik); }
.register a:hover { text-decoration: underline; text-decoration-color: var(--rubrik); }
.wege a:hover { color: var(--rubrik); }
.klein-knopf:hover { color: var(--tinte); background: var(--papier-2); }
.dialog-zu:hover { background: var(--papier-2); color: var(--tinte); }
.knopf:hover { border-color: var(--tinte-2); }
.knopf-voll:hover { background: var(--knopf-tief); border-color: var(--knopf-tief); }
.fuss nav a:hover { color: var(--rubrik); }
}
.psalm-buch { max-width: var(--mass); margin: 0 auto; border-bottom: 1px solid var(--linie-2); }
.psalm-buch > summary {
display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; min-height: 3rem; padding: .7rem 0;
cursor: pointer; font-size: 1.2rem; color: var(--tinte); font-feature-settings: var(--kap); letter-spacing: .08em;
}
.psalm-buch > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.psalm-bereich { color: var(--tinte-2); font-size: 1.02rem; }
.psalm-buch .eintrag:first-child { padding-top: .4rem; }
.eintrag-titel { margin: 0 0 .25rem; font-style: italic; color: var(--tinte-2); font-size: 1rem; line-height: 1.4; }
.abschnitt-psalmen .eintrag-titel, .abschnitt-psalmen .eintrag-text.gekuerzt {
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.abschnitt-psalmen .eintrag-titel { -webkit-line-clamp: 2; line-clamp: 2; }
.abschnitt-psalmen .eintrag-text.gekuerzt { -webkit-line-clamp: 2; line-clamp: 2; }