, und dafür gibt es keinen Kernblock. Als
wäre sie ein gewöhnlicher Absatz — aber gemessen
NICHT gleich aussehend: `.callout p` (0-1-1) schlägt `.callout__label`
(0-1-0), die Zeile käme in 17 statt 12 Pixeln und mit 2,72 statt 1,92 Pixel
Laufweite. Der zweite Selektor hebt sie über `.callout p` (0-2-1) und stellt
die gemessenen Werte des wieder her. */
.callout__label,
.callout p.callout__label {
display: block;
font: var(--eyebrow);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--petrol);
}
/* Ergänzung 2b — die Lesebreite des Hinweiskastens der Startseite.
Statisch steht sie als style="max-width:41rem" am Kasten. theme.json
schaltet die Maßfelder bewusst ab, ein Kernblock kann den Wert also nicht
tragen; der ganze Kasten musste deshalb HTML bleiben. Als Klasse steht der
Wert dort, wo Gestaltung hingehört — und der Kasten wird ein Gruppenblock.
Gemessen: ohne den Wert wächst er bei 1400 px von 656 auf 848 Pixel, die
Zeile von rund 66 auf rund 86 Zeichen. Das ist jenseits der Lesebreite, für
die diese Seite sonst überall gebaut ist. */
.callout--schmal { max-width: 41rem; }
.callout--dark { background: var(--petrol); border-left-color: var(--green); color: rgba(255,255,255,0.9); }
.callout--dark .callout__label { color: var(--green); }
.callout--dark strong { color: #fff; }
/* Signatur unter Texten */
.signoff {
margin-top: 2.5rem;
font-size: 1.1875rem;
font-style: italic;
color: var(--petrol);
}
/* --- Tabellen ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-block: 2rem; -webkit-overflow-scrolling: touch; }
.datatable {
width: 100%;
min-width: 34rem;
border-collapse: collapse;
font-family: var(--sans);
font-size: 0.9375rem;
line-height: 1.5;
}
.datatable caption {
margin-bottom: 0.9rem;
text-align: left;
font: var(--eyebrow);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.datatable th, .datatable td {
padding: 0.7rem 0.9rem;
text-align: left;
vertical-align: top;
}
.datatable thead th {
background: var(--petrol);
color: #fff;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.datatable tbody tr:nth-child(even) { background: var(--mint); }
.datatable tbody th { font-weight: 600; color: var(--petrol); white-space: nowrap; }
.datatable tbody td { color: var(--ink); }
.datatable tbody tr.is-active { background: var(--green); }
.datatable tbody tr.is-active th, .datatable tbody tr.is-active td { color: var(--petrol); }
.table-hint {
margin-top: 0.75rem;
font: 500 0.8125rem/1.5 var(--sans);
color: var(--ink-soft);
}
/* Definitionsliste (Lexikon) */
.deflist { border-top: 1px solid var(--rule); }
.deflist > div {
display: grid;
gap: 0.35rem 1.5rem;
padding-block: 1.15rem;
border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) {
.deflist > div { grid-template-columns: 12rem minmax(0, 1fr); }
}
.deflist dt {
font: 600 0.9375rem/1.5 var(--sans);
letter-spacing: 0.02em;
color: var(--petrol);
}
.deflist dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.deflist dd > * + * { margin-top: 0.7rem; }
.minitable {
border-collapse: collapse;
font-family: var(--sans);
font-size: 0.9375rem;
}
.minitable td { padding: 0.3rem 1.5rem 0.3rem 0; vertical-align: top; }
.minitable tr + tr td { border-top: 1px solid var(--rule); }
.minitable td:first-child { color: var(--petrol); font-weight: 500; }
/* --- Wirbelsäulen-Navigator (Signaturelement) ----------------------------- */
.spine {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: start;
margin-block: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 56rem) {
.spine {
grid-template-columns: minmax(12rem, 15rem) minmax(0, 34rem);
justify-content: start;
}
}
.spine__stage {
display: flex;
justify-content: center;
padding: 1.25rem;
background: var(--paper-off);
border: 1px solid var(--rule);
}
.spine__svg { display: block; width: 100%; max-width: 13rem; height: auto; }
.spine__cord { fill: none; stroke: var(--mint-line); stroke-width: 2; }
.spine__zone text {
font: 600 9px/1 var(--sans);
letter-spacing: 0.14em;
text-transform: uppercase;
fill: var(--ink-soft);
}
.spine__zone line { stroke: rgba(53, 69, 71, 0.28); stroke-width: 1; }
.vertebra { cursor: pointer; }
.vertebra__hit { fill: transparent; stroke: none; }
.vertebra__dot {
fill: var(--green);
stroke: var(--paper-off);
stroke-width: 1.5;
pointer-events: none;
transition: fill 0.16s ease;
}
.vertebra:hover .vertebra__dot { fill: var(--green-ink); }
.vertebra.is-active .vertebra__dot { fill: var(--petrol); }
.vertebra:focus { outline: none; }
.vertebra:focus-visible .vertebra__dot { stroke: var(--petrol); stroke-width: 2.5; }
.vertebra text {
font-family: var(--sans);
font-weight: 600;
fill: var(--petrol);
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
letter-spacing: 0.02em;
}
.vertebra:hover text, .vertebra.is-active text { fill: #fff; }
.spine__readout {
position: sticky;
top: 2rem;
padding: clamp(1.35rem, 3vw, 1.85rem);
background: var(--mint);
border-top: 3px solid var(--green);
}
.spine__code {
font: 600 0.75rem/1 var(--sans);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.spine__name {
margin-top: 0.85rem;
font-family: var(--sans);
font-size: clamp(1.35rem, 3vw, 1.75rem);
line-height: 1.15;
color: var(--petrol);
}
.spine__dl { margin-top: 1.35rem; }
.spine__dl dt {
font: 600 0.6875rem/1 var(--sans);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--petrol-soft);
}
.spine__dl dd { margin: 0.45rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.spine__dl dd + dt { margin-top: 1.15rem; }
.spine__hint {
margin-top: 1.35rem;
padding-top: 1.1rem;
border-top: 1px solid var(--mint-line);
font: 500 0.8125rem/1.55 var(--sans);
color: var(--petrol-soft);
}
/* Ohne JavaScript bleibt der Navigator verborgen — die Tabelle trägt alles. */
.no-js .spine { display: none; }
/* Auszug aus der Wirbeltabelle auf der Startseite */
.excerpt { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--petrol); }
.excerpt__row {
display: grid;
gap: 0.35rem 1.5rem;
padding-block: 1.1rem;
border-bottom: 1px solid var(--rule);
font-family: var(--sans);
}
@media (min-width: 44rem) {
.excerpt__row { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.excerpt__vertebra {
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.excerpt__organ { font-size: 1rem; color: var(--petrol); }
.excerpt__effect { font-size: 1rem; color: var(--ink-soft); }
.excerpt__more { margin-top: 1.5rem; }
.excerpt__more a {
font: 600 0.8125rem/1 var(--sans);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
text-decoration: none;
}
.excerpt__more a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 0.35em; }
/* --- Telefonzeiten: gleiche Sprache wie der Angabenblock der Startseite ---- */
.hours { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--petrol); }
.hours h2 {
font: 600 0.6875rem/1 var(--sans);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.hours p { margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; }
.hours__table {
margin-top: 1.1rem;
border-collapse: collapse;
font: 400 1rem/1.6 var(--sans);
font-variant-numeric: tabular-nums;
}
.hours__table th {
padding: 0.3rem 1.25rem 0.3rem 0;
text-align: left;
font-weight: 600;
color: var(--green-ink);
vertical-align: top;
white-space: nowrap;
}
.hours__table td { padding: 0.3rem 0; color: var(--petrol); vertical-align: top; }
.hours__note {
margin-top: 1.1rem;
font: 400 0.875rem/1.55 var(--sans);
color: var(--ink-soft);
}
/* --- Kontaktseite --------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-block > * + * { margin-top: 1.75rem; }
.contact-block h2 {
font: var(--eyebrow);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.contact-block address {
font-style: normal;
font-size: 1.1875rem;
line-height: 1.7;
}
.contact-block address strong { font-weight: 600; color: var(--petrol); }
.deflines {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.5rem 1.25rem;
font: 500 1rem/1.6 var(--sans);
}
.deflines dt {
font-weight: 600;
font-size: 0.75rem;
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
padding-top: 0.28em;
}
.deflines dd { margin: 0; color: var(--petrol); }
/* Karte mit Zwei-Klick-Lösung */
.map {
position: relative;
aspect-ratio: 4 / 3;
background: var(--mint);
border: 1px solid var(--mint-line);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__consent {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
text-align: left;
}
.map__consent p { font-size: 1rem; line-height: 1.6; color: var(--petrol); }
.map__consent .btn { align-self: flex-start; }
/* --- Fußbereich: gesetzt wie der Fuß des Briefbogens ---------------------- */
.footer {
padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
background: var(--petrol-deep);
color: rgba(255, 255, 255, 0.76);
font-family: var(--sans);
font-size: 0.9375rem;
line-height: 1.7;
}
.footer a { color: rgba(255, 255, 255, 0.76); text-decoration: none; }
.footer a:hover { color: var(--green); text-decoration: underline; }
.footer__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 44rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer h2 {
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green);
}
.footer address { font-style: normal; }
.footer strong { color: #fff; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 0.4rem; }
.footer__mark { display: block; width: 8.5rem; margin-bottom: 1.5rem; }
.footer__mark img { display: block; width: 100%; filter: brightness(0) invert(1); opacity: 0.9; }
.footer__bdc { margin-top: 1.5rem; }
.footer__bdc img { width: 8rem; height: auto; background: #fff; padding: 0.5rem; }
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.75rem;
align-items: center;
justify-content: space-between;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.55);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal li + li { margin-top: 0; }
/* --- Weiterlesen ---------------------------------------------------------- */
.pager {
display: flex;
flex-wrap: wrap;
gap: 1rem 3rem;
justify-content: space-between;
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: 1.25rem;
border-top: 1px solid var(--petrol);
}
.pager a { text-decoration: none; }
.pager span {
display: block;
font: 600 0.6875rem/1 var(--sans);
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--green-ink);
}
.pager b {
display: block;
margin-top: 0.5rem;
font: 500 1.0625rem/1.35 var(--sans);
color: var(--petrol);
}
.pager a:hover b { color: var(--green-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.pager a:last-child:nth-child(2) { text-align: right; }
/* --- Rechtstexte ---------------------------------------------------------- */
.legal { font-size: 1.0625rem; line-height: 1.65; }
.legal h2 { font-size: clamp(1.375rem, 2.6vw, 1.625rem); margin-top: 2.75rem; }
.legal h3 { font-size: 1.125rem; margin-top: 2rem; }
.legal h4 { margin-top: 1.5rem; font-family: var(--sans); font-size: 1rem; color: var(--petrol); }
.legal > * + * { margin-top: 1.1rem; }
/* --- Drucken -------------------------------------------------------------- */
@media print {
.masthead, .footer, .pager, .plate, .spine, .skip-link, .map { display: none !important; }
body { font-size: 11pt; color: #000; }
.article, .pagehead { padding-block: 0; }
a { color: #000; text-decoration: none; }
.datatable thead th { background: none; color: #000; border-bottom: 1.5pt solid #000; }
.prose { max-width: none; }
}
/* --- Bewegung reduzieren -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}