/* barrierefreiheit.css */
:root {
--buero81-bf-zeichen: 2.7rem;
--buero81-bf-polster: 0.35rem;
--buero81-fuss-freiraum: calc(
var(--buero81-bf-zeichen) + 2 * var(--buero81-bf-polster)
+ 2 * var(--wp--custom--rand, 1.25rem)
);
}
html.b81-ruhe,
html.b81-ruhe body {
scroll-behavior: auto !important;
scroll-snap-type: none !important;
}
html.b81-ruhe *,
html.b81-ruhe *::before,
html.b81-ruhe *::after {
animation: none !important;
transition: none !important;
scroll-snap-type: none !important;
}
html.b81-kontrast-1 {
--wp--preset--color--schrift-leise: var(--wp--preset--color--schrift, #1c1c1c);
--wp--preset--color--rand: var(--wp--preset--color--schrift-leise, #595959);
--wp--custom--linie-stark: var(--wp--preset--color--schrift, #1c1c1c);
}
html.b81-kontrast-2 {
--wp--preset--color--papier: #000;
--wp--preset--color--grund: #000;
--wp--preset--color--flaeche: #000;
--wp--preset--color--flaeche-hoch: #000;
--wp--preset--color--schrift: #fff;
--wp--preset--color--schrift-leise: #fff;
--wp--preset--color--akzent: #fff;
--wp--preset--color--rand: #fff;
--wp--custom--linie-stark: #fff;
}
html.b81-kontrast-2 img,
html.b81-kontrast-2 video,
html.b81-kontrast-2 .b81-hat-bild {
filter: grayscale(1) contrast(1.1);
}
html.b81-schrift-1 {
font-size: 112.5%;
}
html.b81-schrift-2 {
font-size: 125%;
}
html.b81-linien a:not(.wp-element-button):not(.wp-block-button__link):not(:has(> svg)):not(:has(> img)) {
text-decoration: underline;
text-underline-offset: 0.15em;
}
html.b81-grau {
filter: grayscale(1);
}
html.b81-bilder-aus img,
html.b81-bilder-aus picture,
html.b81-bilder-aus video,
html.b81-bilder-aus iframe {
visibility: hidden;
}
html.b81-bilder-aus .b81-hat-bild {
background-image: none !important;
}
html.b81-lesbar {
--wp--preset--font-family--sans: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
html.b81-lesbar body {
font-family: var(--wp--preset--font-family--sans);
}
html.b81-lesbar :is(h1, h2, h3, h4, h5, h6) {
letter-spacing: normal;
}
html.b81-lesbar :is(p, li, dd, dt, blockquote, figcaption) {
line-height: 1.8;
letter-spacing: 0.02em;
word-spacing: 0.08em;
}
.buero81-bf-knopf {
position: fixed;
left: var(--wp--custom--rand, 1.25rem);
bottom: var(--wp--custom--rand, 1.25rem);
z-index: 45;
display: block;
padding: var(--buero81-bf-polster);
border: 0;
border-radius: 50%;
background: var(--wp--preset--color--grund, #fff);
color: var(--wp--preset--color--akzent, #333);
font-family: inherit;
line-height: 0;
cursor: pointer;
}
.buero81-bf-knopf[hidden] {
display: none;
}
.buero81-bf-knopf__zeichen {
display: block;
width: var(--buero81-bf-zeichen);
height: var(--buero81-bf-zeichen);
}
.buero81-bf-knopf__haken {
position: absolute;
right: 0.25rem;
bottom: 0.25rem;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
background: var(--wp--preset--color--grund, #fff);
display: none;
}
.buero81-bf-knopf--aktiv .buero81-bf-knopf__haken {
display: block;
}
.buero81-bf-knopf__stand {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.buero81-bf-knopf:hover .buero81-bf-knopf__zeichen,
.buero81-bf-knopf:focus-visible .buero81-bf-knopf__zeichen {
color: var(--wp--preset--color--schrift, #1c1c1c);
}
.buero81-bf-knopf:focus-visible {
outline: 2px solid var(--wp--preset--color--akzent, #333);
outline-offset: 3px;
border-radius: 50%;
}
.buero81-bf-knopf__wort {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.buero81-bf-panel {
position: fixed;
inset: auto auto var(--wp--custom--rand, 1.25rem) var(--wp--custom--rand, 1.25rem);
margin: 0;
width: min(27rem, calc(100vw - 2 * var(--wp--custom--rand, 1.25rem)));
max-width: none;
max-height: calc(100vh - 2 * var(--wp--custom--rand, 1.25rem));
height: auto;
padding: 2.5rem 1.5rem 1.5rem;
border: 1px solid var(--wp--preset--color--akzent, #333);
border-radius: 1rem;
background: var(--wp--preset--color--grund, #fff);
color: var(--wp--preset--color--schrift, #1c1c1c);
font-family: inherit;
overflow-y: auto;
}
.buero81-bf-panel::backdrop {
background: rgb(0 0 0 / 0.6);
}
.buero81-bf-panel__zu {
position: absolute;
top: 0.4rem;
right: 0.4rem;
margin: 0;
}
.buero81-bf-panel__zu button {
padding: 0.2rem 0.5rem;
border: 0;
background: none;
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.buero81-bf-panel__titel {
margin: 0 0 0.3rem;
font-size: 1.05rem;
font-weight: 700;
}
.buero81-bf-panel__satz {
margin: 0 0 1.2rem;
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 0.85rem;
line-height: 1.5;
}
.buero81-bf-schalter {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.2rem 0.7rem;
align-items: start;
padding: 0.7rem 0;
border-top: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
}
.buero81-bf-schalter input {
width: 1.15rem;
height: 1.15rem;
margin: 0.1rem 0 0;
accent-color: var(--wp--preset--color--akzent, #333);
cursor: pointer;
}
.buero81-bf-schalter label {
display: block;
cursor: pointer;
}
.buero81-bf-schalter__titel {
display: block;
font-weight: 600;
line-height: 1.3;
}
.buero81-bf-schalter__hilfe {
display: block;
margin-top: 0.15rem;
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 0.8rem;
line-height: 1.45;
}
.buero81-bf-stufen {
margin: 0;
padding: 0.9rem 0 1.3rem;
border: 0;
border-top: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
}
.buero81-bf-stufen legend {
float: left;
width: 100%;
padding: 0;
margin: 0 0 0.6rem;
font-weight: 600;
}
.buero81-bf-stufen__reihe {
clear: both;
display: grid;
grid-auto-flow: column;
gap: 0.4rem;
}
.buero81-bf-stufen__zeichen-reihe {
display: inline-flex;
align-items: center;
gap: 0.05rem;
margin-right: 0.35rem;
vertical-align: -0.2em;
}
.buero81-bf-stufen__zeichen {
width: 1.05em;
height: 1.05em;
}
.buero81-bf-stufen input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.buero81-bf-stufen label {
padding: 0.4rem 0.8rem;
border: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
border-radius: var(--wp--custom--radius--knopf, 3px);
font-size: 0.85rem;
cursor: pointer;
}
.buero81-bf-stufen input:checked + label {
border-color: var(--wp--preset--color--akzent, #333);
background: var(--wp--preset--color--akzent, #333);
color: var(--wp--preset--color--grund, #fff);
font-weight: 600;
}
.buero81-bf-stufen input:focus-visible + label {
outline: 2px solid var(--wp--preset--color--akzent, #333);
outline-offset: 2px;
}
.buero81-bf-panel__zurueck {
margin-top: 1.2rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
border-radius: var(--wp--custom--radius--knopf, 3px);
background: none;
color: inherit;
font-family: inherit;
font-size: 0.85rem;
cursor: pointer;
}
.buero81-bf-panel__zurueck:hover,
.buero81-bf-panel__zurueck:focus-visible {
border-color: var(--wp--preset--color--akzent, #333);
color: var(--wp--preset--color--akzent, #333);
}
.buero81-bf-knopf--rechts {
left: auto;
right: var(--wp--custom--rand, 1.25rem);
}
.buero81-bf-panel--rechts {
inset: auto var(--wp--custom--rand, 1.25rem) var(--wp--custom--rand, 1.25rem) auto;
}
/* bausteine.css */
.werkzeuge {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wp--preset--spacing--20);
}
.werkzeug {
position: relative;
flex: 0 1 7rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: var(--wp--preset--spacing--20) 0.5rem;
color: var(--wp--preset--color--schrift-leise);
text-align: center;
}
.werkzeug__name {
font-size: var(--wp--preset--font-size--klein);
letter-spacing: 0.04em;
}
.werkzeug__zeichen {
display: block;
}
@keyframes werkzeug-tropfen {
0% {
transform: scale(2.4);
opacity: 0;
}
70% {
transform: scale(0.94);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes werkzeug-welle {
0%,
55% {
transform: translate(-50%, -50%) scale(0.3);
opacity: 0;
}
65% {
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
}
}
.werkzeuge.tropft .werkzeug {
--tropfen-dauer: 0.7s;
--tropfen-takt: 0.05s;
animation: werkzeug-tropfen var(--tropfen-dauer) cubic-bezier(0.34, 1.2, 0.64, 1) both;
animation-delay: calc(var(--tropfen-platz, 0) * var(--tropfen-takt));
}
.werkzeuge.tropft .werkzeug::after {
content: "";
position: absolute;
top: calc(var(--wp--preset--spacing--20) + 1.25rem);
left: 50%;
width: 3.5rem;
height: 3.5rem;
border: 1px solid currentColor;
border-radius: 50%;
pointer-events: none;
animation: werkzeug-welle var(--tropfen-dauer) ease-out both;
animation-delay: calc(var(--tropfen-platz, 0) * var(--tropfen-takt));
}
@media (prefers-reduced-motion: reduce) {
.werkzeuge.tropft .werkzeug,
.werkzeuge.tropft .werkzeug::after {
animation: none;
}
.werkzeuge.tropft .werkzeug::after {
display: none;
}
}
.abschnitt:has(.werkzeuge--hintergrund) {
position: relative;
overflow: hidden;
}
.abschnitt:has(.werkzeuge--hintergrund) > *:not(.werkzeuge--hintergrund) {
position: relative;
z-index: 1;
}
.werkzeuge--hintergrund {
position: absolute;
inset: 0;
z-index: 0;
display: block;
pointer-events: none;
}
.werkzeuge--hintergrund .werkzeug {
position: absolute;
left: var(--w-x, 50%);
top: var(--w-y, 50%);
transform: translate(-50%, -50%);
flex: none;
padding: 0;
--w-deckkraft: 0.15;
opacity: var(--w-deckkraft);
}
.werkzeuge--hintergrund .werkzeug__zeichen {
width: calc(var(--w-groesse, 1) * clamp(1.75rem, 3vw, 3.25rem));
height: auto;
}
.werkzeuge--hintergrund.tropft .werkzeug::after {
content: none;
}
.werkzeuge--hintergrund.tropft .werkzeug {
--tropfen-dauer: 6s;
--tropfen-takt: 0.778s;
--w-puls: 0.4;
animation-name: werkzeug-schweben;
animation-timing-function: linear;
}
@keyframes werkzeug-schweben {
0% {
transform: translate(-50%, -50%) scale(2.4);
opacity: 0;
color: var(--wp--preset--color--schrift-leise);
}
20% {
transform: translate(-50%, -50%) scale(1.02);
opacity: var(--w-deckkraft, 0.15);
color: var(--wp--preset--color--schrift-leise);
}
25% {
transform: translate(-50%, -50%) scale(1);
opacity: var(--w-deckkraft, 0.15);
color: var(--wp--preset--color--schrift-leise);
}
33% {
transform: translate(-50%, -50%) scale(1.06);
opacity: var(--w-puls, 0.4);
color: var(--wp--preset--color--akzent);
}
42% {
transform: translate(-50%, -50%) scale(1);
opacity: var(--w-deckkraft, 0.15);
color: var(--wp--preset--color--schrift-leise);
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
color: var(--wp--preset--color--schrift-leise);
}
}
.werkzeuge--hintergrund .werkzeug:nth-child(1) { --w-x: 11.0%; --w-y: 7.3%; --w-groesse: 1.08; }
.werkzeuge--hintergrund .werkzeug:nth-child(2) { --w-x: 22.5%; --w-y: 13.7%; --w-groesse: 0.97; }
.werkzeuge--hintergrund .werkzeug:nth-child(3) { --w-x: 35.0%; --w-y: 13.0%; --w-groesse: 1.51; }
.werkzeuge--hintergrund .werkzeug:nth-child(4) { --w-x: 46.4%; --w-y: 26.4%; --w-groesse: 1.26; }
.werkzeuge--hintergrund .werkzeug:nth-child(5) { --w-x: 69.5%; --w-y: 17.5%; --w-groesse: 1.52; }
.werkzeuge--hintergrund .werkzeug:nth-child(6) { --w-x: 82.6%; --w-y: 18.2%; --w-groesse: 1.32; }
.werkzeuge--hintergrund .werkzeug:nth-child(7) { --w-x: 92.9%; --w-y: 18.1%; --w-groesse: 0.81; }
.werkzeuge--hintergrund .werkzeug:nth-child(8) { --w-x: 7.5%; --w-y: 51.6%; --w-groesse: 1.46; }
.werkzeuge--hintergrund .werkzeug:nth-child(9) { --w-x: 21.8%; --w-y: 51.5%; --w-groesse: 0.75; }
.werkzeuge--hintergrund .werkzeug:nth-child(10) { --w-x: 28.0%; --w-y: 47.3%; --w-groesse: 0.96; }
.werkzeuge--hintergrund .werkzeug:nth-child(11) { --w-x: 51.5%; --w-y: 59.2%; --w-groesse: 1.37; }
.werkzeuge--hintergrund .werkzeug:nth-child(12) { --w-x: 66.1%; --w-y: 56.9%; --w-groesse: 1.27; }
.werkzeuge--hintergrund .werkzeug:nth-child(13) { --w-x: 77.0%; --w-y: 43.3%; --w-groesse: 0.82; }
.werkzeuge--hintergrund .werkzeug:nth-child(14) { --w-x: 98.4%; --w-y: 55.5%; --w-groesse: 0.76; }
.werkzeuge--hintergrund .werkzeug:nth-child(15) { --w-x: 4.6%; --w-y: 87.0%; --w-groesse: 0.89; }
.werkzeuge--hintergrund .werkzeug:nth-child(16) { --w-x: 20.2%; --w-y: 93.4%; --w-groesse: 1.14; }
.werkzeuge--hintergrund .werkzeug:nth-child(17) { --w-x: 31.5%; --w-y: 82.4%; --w-groesse: 1.10; }
.werkzeuge--hintergrund .werkzeug:nth-child(18) { --w-x: 57.8%; --w-y: 92.7%; --w-groesse: 0.84; }
.werkzeuge--hintergrund .werkzeug:nth-child(19) { --w-x: 67.6%; --w-y: 83.4%; --w-groesse: 0.72; }
.werte {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wp--preset--spacing--20);
color: var(--wp--preset--color--grund);
}
.wert {
flex: 0 1 7rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
}
.wert__kreis {
position: relative;
display: grid;
place-items: center;
width: var(--wert-groesse, 5rem);
height: var(--wert-groesse, 5rem);
}
.wert__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.wert__bahn,
.wert__bogen {
fill: none;
stroke-width: 5;
}
.wert__bahn {
stroke: currentColor;
opacity: 0.2;
}
.wert__bogen {
stroke: currentColor;
stroke-linecap: round;
stroke-dasharray: var(--anteil, 0) 100;
animation: wert-fuellen 1.2s cubic-bezier(0.33, 1, 0.68, 1) both;
}
@keyframes wert-fuellen {
from {
stroke-dasharray: 0 100;
}
}
@media (prefers-reduced-motion: reduce) {
.wert__bogen {
animation: none;
}
}
.wert__zahl {
position: relative;
font-size: var(--wp--preset--font-size--gross);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.wert__name {
align-self: center;
font-size: var(--wp--preset--font-size--gross);
font-weight: 700;
line-height: 1.3;
background: var(--wp--preset--color--grund);
color: var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.werte-rahmen {
position: relative;
container-type: inline-size;
color: var(--wp--preset--color--grund);
}
.werte-rahmen__geraet {
display: block;
width: 100%;
height: auto;
}
.werte-bildschirm {
position: absolute;
left: 0.8%;
right: 6.92%;
top: 0.49%;
bottom: 22.23%;
padding: 6cqw;
--wert-groesse: 38cqw;
}
.werte-bildschirm .werte:not(.werte--schieber) {
display: grid;
grid-template-columns: 1fr 1fr;
align-content: center;
justify-items: center;
gap: 7cqw 4cqw;
height: 100%;
}
.werte-bildschirm .wert {
flex: none;
gap: 2.5cqw;
}
.werte-bildschirm .wert__kreis {
color: var(--wp--preset--color--weiss, #fff);
}
.werte-bildschirm .wert__zahl {
font-size: 9cqw;
}
.werte-bildschirm .wert__name {
margin-top: 4cqw;
font-size: 6.5cqw;
letter-spacing: 0;
}
.werte-bildschirm .wert__text {
font-size: 5.2cqw;
}
.werte-bildschirm .werte-schieber__steuerung {
margin-top: 5cqw;
}
.werte-bildschirm .werte-schieber__steuer {
gap: 3cqw;
}
.werte-bildschirm .werte-schieber__punkte {
gap: 1.6cqw;
}
.werte-bildschirm .werte-schieber__punkt {
width: 1.4cqw;
height: 6cqw;
}
.werte-bildschirm .werte-schieber__punkt:hover {
height: 6.8cqw;
}
.werte-bildschirm .werte-schieber__punkt--aktiv {
height: 7.5cqw;
}
.werte-bildschirm .werte-schieber__pfeil {
width: 9cqw;
}
.werte-bildschirm .wert__bahn,
.werte-bildschirm .wert__bogen {
stroke-width: 3;
}
.werte-schieber {
position: relative;
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
}
.werte--schieber {
align-content: center;
}
.werte--schieber {
display: grid;
}
.wert--folie {
grid-area: 1 / 1;
width: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 0.35s;
}
@media (prefers-reduced-motion: reduce) {
.wert--folie {
transition: none;
}
}
.werte-schieber__wahl {
appearance: none;
-webkit-appearance: none;
}
.werte-schieber__wahl:nth-of-type(1):checked ~ .werte--schieber .wert--folie:nth-child(1),
.werte-schieber__wahl:nth-of-type(2):checked ~ .werte--schieber .wert--folie:nth-child(2),
.werte-schieber__wahl:nth-of-type(3):checked ~ .werte--schieber .wert--folie:nth-child(3),
.werte-schieber__wahl:nth-of-type(4):checked ~ .werte--schieber .wert--folie:nth-child(4),
.werte-schieber__wahl:nth-of-type(5):checked ~ .werte--schieber .wert--folie:nth-child(5),
.werte-schieber__wahl:nth-of-type(6):checked ~ .werte--schieber .wert--folie:nth-child(6) {
visibility: visible;
opacity: 1;
}
.werte--schieber .wert__bogen {
animation: none;
}
.werte-schieber__wahl:nth-of-type(1):checked ~ .werte--schieber .wert--folie:nth-child(1) .wert__bogen,
.werte-schieber__wahl:nth-of-type(2):checked ~ .werte--schieber .wert--folie:nth-child(2) .wert__bogen,
.werte-schieber__wahl:nth-of-type(3):checked ~ .werte--schieber .wert--folie:nth-child(3) .wert__bogen,
.werte-schieber__wahl:nth-of-type(4):checked ~ .werte--schieber .wert--folie:nth-child(4) .wert__bogen,
.werte-schieber__wahl:nth-of-type(5):checked ~ .werte--schieber .wert--folie:nth-child(5) .wert__bogen,
.werte-schieber__wahl:nth-of-type(6):checked ~ .werte--schieber .wert--folie:nth-child(6) .wert__bogen {
animation: wert-fuellen 1.2s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.werte-schieber__steuerung {
display: grid;
margin-top: 1rem;
}
.werte-schieber__steuer {
grid-area: 1 / 1;
display: none;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.werte-schieber__punkte {
display: flex;
align-items: center;
gap: 0.5rem;
}
.werte-schieber__punkt {
width: 0.25rem;
height: 1.1rem;
background: var(--wp--preset--color--weiss, #fff);
cursor: pointer;
transition: height 0.2s, background-color 0.2s;
}
.werte-schieber__punkt:hover {
height: 1.3rem;
}
.werte-schieber__punkt--aktiv {
height: 1.5rem;
background: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.werte-schieber__punkt {
transition: none;
}
}
.werte-schieber__wahl:nth-of-type(1):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(1),
.werte-schieber__wahl:nth-of-type(2):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(2),
.werte-schieber__wahl:nth-of-type(3):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(3),
.werte-schieber__wahl:nth-of-type(4):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(4),
.werte-schieber__wahl:nth-of-type(5):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(5),
.werte-schieber__wahl:nth-of-type(6):checked ~ .werte-schieber__steuerung .werte-schieber__steuer:nth-child(6) {
display: flex;
}
.werte-schieber__pfeil {
display: flex;
color: var(--wp--preset--color--weiss, #fff);
cursor: pointer;
transition: color 0.2s;
}
.werte-schieber__pfeil:hover,
.werte-schieber__pfeil:active {
color: var(--wp--preset--color--grund);
}
.werte-schieber__pfeil svg {
display: block;
width: 100%;
height: auto;
}
.werte-schieber:has(.werte-schieber__wahl:focus-visible) .werte-schieber__steuer {
outline: 2px solid currentColor;
outline-offset: 6px;
}
.werte-bildschirm .werte--schieber .wert--folie {
flex-direction: column;
align-items: center;
}
.wert__text {
font-size: var(--wp--preset--font-size--klein);
line-height: 1.4;
opacity: 0.85;
text-wrap: balance;
}
.werkzeuge--raster {
display: grid;
grid-template-columns: repeat(var(--werkzeuge-spalten, 6), 1fr);
gap: 0;
color: var(--wp--preset--color--akzent);
clip-path: inset(0 1px 1px 0);
}
.werkzeuge--raster .werkzeug {
flex: none;
padding: 0;
color: var(--wp--preset--color--akzent);
aspect-ratio: 1;
display: grid;
place-items: center;
border-right: 1px solid var(--wp--custom--linie-stark);
border-bottom: 1px solid var(--wp--custom--linie-stark);
}
.werkzeuge--raster .werkzeug:last-child {
border-right: 0;
}
.werkzeuge--raster .werkzeug__zeichen {
width: 45%;
height: auto;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s;
}
.werkzeuge--raster .werkzeug:hover .werkzeug__zeichen,
.werkzeuge--raster .werkzeug:focus-visible .werkzeug__zeichen {
color: var(--wp--preset--color--schrift);
transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
.werkzeuge--raster .werkzeug__zeichen {
transition: color 0.25s;
}
.werkzeuge--raster .werkzeug:hover .werkzeug__zeichen,
.werkzeuge--raster .werkzeug:focus-visible .werkzeug__zeichen {
transform: none;
}
}
@keyframes werkzeug-aufblenden {
from {
opacity: 0;
transform: scale(0.85);
}
}
.werkzeuge--raster.tropft .werkzeug {
animation: none;
}
.werkzeuge--raster.tropft .werkzeug::after {
content: none;
}
.werkzeuge--raster.tropft .werkzeug__zeichen {
--raster-dauer: 1s;
--raster-takt: 0.5s;
animation: werkzeug-aufblenden var(--raster-dauer) ease-out both;
animation-delay: calc(var(--tropfen-platz, 0) * var(--raster-takt));
}
@media (prefers-reduced-motion: reduce) {
.werkzeuge--raster.tropft .werkzeug__zeichen {
animation: none;
}
}
.abschnitt:has(.flaechen) {
position: relative;
overflow: hidden;
isolation: isolate;
}
.flaechen {
position: absolute;
inset: 0;
z-index: -1;
margin: 0;
pointer-events: none;
}
.flaechen__bild {
display: block;
width: 100%;
height: 100%;
}
.flaeche__schraffur {
stroke: var(--wp--preset--color--akzent);
stroke-width: 2.2;
}
.flaeche__blatt {
fill: var(--wp--preset--color--grund);
stroke: var(--wp--preset--color--akzent);
stroke-width: 1.5;
}
.flaeche__strich {
stroke: var(--wp--custom--linie-stark);
stroke-width: 2;
stroke-linecap: round;
opacity: 0.5;
}
.flaeche__titel {
stroke: var(--wp--custom--linie-stark);
stroke-width: 8;
stroke-linecap: round;
opacity: 0.6;
}
.flaeche__kasten {
fill: var(--wp--custom--linie-stark);
stroke: none;
opacity: 0.28;
}
@keyframes flaechen-band-vor {
0% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
50% {
transform: translateY(var(--flaechen-schleife, 330px));
}
100% {
transform: translateY(var(--flaechen-schleife, 330px));
}
}
@keyframes flaechen-band-nach {
0% {
transform: translateY(var(--flaechen-schleife, 330px));
animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
25% {
transform: translateY(calc(var(--flaechen-schleife, 330px) * 2));
}
50% {
transform: translateY(calc(var(--flaechen-schleife, 330px) * 2));
animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
75% {
transform: translateY(calc(var(--flaechen-schleife, 330px) * 3));
}
100% {
transform: translateY(calc(var(--flaechen-schleife, 330px) * 3));
}
}
@keyframes flaechen-hervor {
0% {
transform: scale(1);
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
10% {
transform: scale(1.5);
}
90% {
transform: scale(1.5);
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
100% {
transform: scale(1);
}
}
@keyframes flaechen-rand {
0%,
100% {
stroke: var(--wp--preset--color--akzent);
stroke-width: 1.5;
}
10%,
90% {
stroke: var(--wp--preset--color--schrift);
stroke-width: 2.5;
}
}
.flaechen.laeuft .flaechen__band {
--flaechen-dauer: 1.3s;
--flaechen-schritte: 1;
--flaechen-pause: 7.5s;
--flaechen-weiter: 2;
--flaechen-halt: calc(var(--flaechen-dauer) * var(--flaechen-schritte));
animation:
flaechen-band-vor calc(var(--flaechen-dauer) * var(--flaechen-schritte)) linear forwards,
flaechen-band-nach calc(var(--flaechen-dauer) * var(--flaechen-weiter)) linear forwards;
animation-delay: 0s, calc(var(--flaechen-halt) + var(--flaechen-pause));
}
.flaechen.laeuft .flaeche--hervor {
transform-box: fill-box;
transform-origin: center;
animation: flaechen-hervor var(--flaechen-pause) linear forwards;
animation-delay: var(--flaechen-halt);
}
.flaechen.laeuft .flaeche--hervor .flaeche__blatt {
animation: flaechen-rand var(--flaechen-pause) linear forwards;
animation-delay: var(--flaechen-halt);
}
.flaeche__lupe {
offset-distance: 0%;
offset-rotate: 0deg;
opacity: 0;
fill: none;
stroke: var(--wp--preset--color--akzent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes flaechen-lupe {
from {
offset-distance: 0%;
opacity: 0;
animation-timing-function: ease-in-out;
}
10% {
opacity: 1;
}
30% {
offset-distance: 34%;
animation-timing-function: ease-in-out;
}
52% {
offset-distance: 46%;
animation-timing-function: ease-in-out;
}
78% {
offset-distance: 84%;
animation-timing-function: ease-in-out;
}
88% {
opacity: 1;
}
to {
offset-distance: 100%;
opacity: 0;
}
}
.flaechen.laeuft .flaeche--hervor .flaeche__lupe {
animation: flaechen-lupe 4.2s linear forwards;
animation-delay: calc(var(--flaechen-halt) + 0.7s);
}
.flaeche__haken {
opacity: 0;
fill: none;
stroke: var(--wp--preset--color--akzent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.flaeche__haken-strich {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
@keyframes flaechen-haken-zeigen {
from {
opacity: 0;
}
8%,
88% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes flaechen-haken-zeichnen {
to {
stroke-dashoffset: 0;
}
}
.flaechen.laeuft .flaeche--hervor .flaeche__haken {
animation: flaechen-haken-zeigen 2s linear forwards;
animation-delay: calc(var(--flaechen-halt) + 5s);
}
.flaechen.laeuft .flaeche--hervor .flaeche__haken-strich {
animation: flaechen-haken-zeichnen 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
animation-delay: calc(var(--flaechen-halt) + 5.15s);
}
.flaechen.ruht .flaechen__band,
.flaechen.ruht .flaeche--hervor,
.flaechen.ruht .flaeche--hervor .flaeche__blatt,
.flaechen.ruht .flaeche--hervor .flaeche__lupe,
.flaechen.ruht .flaeche--hervor .flaeche__haken,
.flaechen.ruht .flaeche--hervor .flaeche__haken-strich {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.flaechen.laeuft .flaechen__band {
animation: none;
}
.flaechen.laeuft .flaeche--hervor {
animation: none;
transform: scale(1.5);
}
.flaechen.laeuft .flaeche--hervor .flaeche__blatt {
animation: none;
stroke: var(--wp--preset--color--akzent);
stroke-width: 2;
}
.flaechen.laeuft .flaeche--hervor .flaeche__lupe {
animation: none;
}
.flaechen.laeuft .flaeche--hervor .flaeche__haken {
animation: none;
opacity: 1;
}
.flaechen.laeuft .flaeche--hervor .flaeche__haken-strich {
animation: none;
stroke-dashoffset: 0;
}
}
.ballast {
position: absolute;
inset: 0;
}
.ballast__bild {
display: block;
width: 100%;
height: 100%;
}
.ballast__flaeche {
fill: var(--wp--preset--color--grund);
}
.ballast__zeile {
stroke: var(--wp--preset--color--grund);
stroke-width: 3;
stroke-linecap: butt;
}
.ballast__stoerer {
fill: var(--wp--preset--color--schrift);
}
.ballast__stueck {
--ballast-dauer: 0.75s;
--ballast-takt: 0.85s;
}
.ballast.laeuft .ballast__stueck--links,
.ballast.laeuft .ballast__stueck--rechts {
animation-duration: var(--ballast-dauer);
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
animation-fill-mode: forwards;
animation-delay: calc(var(--ballast-platz, 0) * var(--ballast-takt));
}
.ballast.laeuft .ballast__stueck--links {
animation-name: ballast-links;
}
.ballast.laeuft .ballast__stueck--rechts {
animation-name: ballast-rechts;
}
@keyframes ballast-links {
to {
transform: translateX(-190px);
opacity: 0;
}
}
@keyframes ballast-rechts {
to {
transform: translateX(190px);
opacity: 0;
}
}
@keyframes ballast-ruecken {
to {
transform: translate(var(--ballast-rueck-x, 0px), var(--ballast-rueck-y, 0px));
}
}
.ballast.laeuft .ballast__stueck--rueckt {
animation: ballast-ruecken 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(
(var(--ballast-stuecke, 1) - 1) * var(--ballast-takt) + var(--ballast-dauer) + 0.25s
);
}
@media (prefers-reduced-motion: reduce) {
.ballast.laeuft .ballast__stueck--links,
.ballast.laeuft .ballast__stueck--rechts {
animation: none;
opacity: 0;
}
.ballast.laeuft .ballast__stueck--rueckt {
animation: none;
transform: translate(var(--ballast-rueck-x, 0px), var(--ballast-rueck-y, 0px));
}
}
.tafel {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wp--preset--spacing--20);
perspective: 700px;
}
.tafel__reihe {
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
align-items: start;
gap: var(--wp--preset--spacing--20) clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem);
}
.tafel__gruppe {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.tafel__gruppe:first-child {
grid-column: 1 / -1;
container-type: inline-size;
}
.tafel__blaetter {
display: flex;
gap: 0.25rem;
}
.tafel__gruppe:first-child .tafel__blaetter {
width: 100%;
}
.tafel__gruppe:first-child .tafel__blatt {
font-size: calc(29.4cqw - 2.4px);
flex: 1;
}
.tafel__blatt {
display: block;
min-width: 1ch;
padding: 0.6em 0.3em;
background: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--grund);
border-radius: 0.13em;
font-size: clamp(1.75rem, 1rem + 3vw, 4rem);
font-weight: 700;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
position: relative;
transform-origin: top center;
}
.tafel__blatt::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--wp--preset--color--grund);
}
.tafel__name {
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--schrift-leise);
}
@keyframes tafel-fallen {
from {
transform: rotateX(-92deg);
}
to {
transform: rotateX(0);
}
}
.tafel.faellt .tafel__blatt {
animation: tafel-fallen 0.34s cubic-bezier(0.34, 1.3, 0.64, 1) backwards;
animation-delay: calc(var(--tafel-platz, 0) * 0.11s);
}
.tafel__blatt.kippt {
animation: tafel-fallen 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
.tafel.faellt .tafel__blatt,
.tafel__blatt.kippt {
animation: none;
}
}
/* erreichbarkeit.css */
.buero81-erreichbar,
.buero81-erreichbar-fenster {
--b81-zustand: var(--wp--preset--color--schrift-leise, #595959);
--b81-zustand-schrift: var(--wp--preset--color--grund, #fff);
--b81-ring: var(--wp--preset--color--akzent, #333);
}
.buero81-erreichbar,
.buero81-erreichbar-fenster {
--b81-foto: 4.5rem;
--b81-foto-luft: 0.7rem;
}
.buero81-erreichbar--da,
.buero81-erreichbar-fenster--da {
--b81-zustand: var(--wp--preset--color--erreichbar, #81da89);
--b81-zustand-schrift: #14261a;
--b81-ring: var(--b81-zustand);
}
.buero81-erreichbar {
position: fixed;
right: var(--wp--custom--rand, 1.25rem);
bottom: var(--wp--custom--rand, 1.25rem);
z-index: 45;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
border: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
border-radius: var(--wp--custom--radius--knopf, 3px);
background: var(--wp--preset--color--flaeche, #f6f6f6);
color: var(--wp--preset--color--schrift, #1c1c1c);
font-size: var(--wp--preset--font-size--klein, 0.875rem);
font-family: inherit;
line-height: 1.3;
text-align: left;
text-decoration: none;
box-shadow: 0 2px 12px rgb(0 0 0 / 0.15);
}
button.buero81-erreichbar {
cursor: pointer;
}
button.buero81-erreichbar:hover,
button.buero81-erreichbar:focus-visible {
border-color: var(--wp--preset--color--akzent, #333);
}
.buero81-erreichbar--foto {
display: block;
padding: 0 0 var(--b81-foto-luft);
border: 0;
background: none;
box-shadow: none;
}
.buero81-erreichbar__rund {
display: block;
position: relative;
width: var(--b81-foto);
height: var(--b81-foto);
}
.buero81-erreichbar__foto {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--b81-ring);
box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
display: block;
}
.buero81-erreichbar--foto .buero81-erreichbar__marke {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
z-index: 1;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var(--b81-zustand);
color: var(--b81-zustand-schrift);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
body:has(.buero81-erreichbar-fenster[open]) .buero81-erreichbar__marke {
visibility: hidden;
}
.buero81-erreichbar__punkt {
flex: none;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--b81-zustand);
}
.buero81-erreichbar__text {
display: flex;
flex-direction: column;
}
.buero81-erreichbar__text span {
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 0.85em;
}
.buero81-erreichbar-fenster {
position: fixed;
margin: 0;
width: min(24rem, calc(100vw - 2 * var(--wp--custom--rand, 1.25rem)));
max-width: none;
height: auto;
inset: var(--wp--custom--rand, 1.25rem);
left: auto;
bottom: calc(var(--wp--custom--rand, 1.25rem) + var(--b81-foto-luft));
max-height: none;
padding: 2.5rem 1.75rem calc(var(--b81-foto) + var(--b81-foto-luft) + 1rem);
border: 1px solid var(--wp--preset--color--akzent, #333);
border-radius: 1rem 1rem calc(var(--b81-foto) / 2) 1rem;
background: var(--wp--preset--color--grund, #fff);
color: var(--wp--preset--color--schrift, #1c1c1c);
font-family: inherit;
text-align: left;
overflow-y: auto;
translate: 100% 0;
opacity: 0;
transition:
translate 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}
.buero81-erreichbar-fenster[open] {
translate: 0 0;
opacity: 1;
}
@starting-style {
.buero81-erreichbar-fenster[open] {
translate: 100% 0;
opacity: 0;
}
}
.buero81-erreichbar-fenster::backdrop {
background: rgb(0 0 0 / 0);
transition:
background 0.35s ease,
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}
.buero81-erreichbar-fenster[open]::backdrop {
background: rgb(0 0 0 / 0.6);
}
@starting-style {
.buero81-erreichbar-fenster[open]::backdrop {
background: rgb(0 0 0 / 0);
}
}
@media (prefers-reduced-motion: reduce) {
.buero81-erreichbar-fenster,
.buero81-erreichbar-fenster::backdrop {
transition: none;
}
}
.buero81-erreichbar-fenster__zu {
position: absolute;
top: 0.4rem;
right: 0.4rem;
margin: 0;
}
.buero81-erreichbar-fenster__zu button {
padding: 0.2rem 0.5rem;
border: 0;
background: none;
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.buero81-erreichbar-fenster__zu button:hover {
color: var(--wp--preset--color--schrift, #1c1c1c);
}
.buero81-erreichbar-fenster__rund {
position: absolute;
right: 0;
bottom: 0;
display: block;
width: var(--b81-foto);
height: var(--b81-foto);
}
.buero81-erreichbar-fenster__foto {
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid var(--b81-ring);
box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
}
.buero81-erreichbar-fenster__name {
margin: 0 0 0.3rem;
font-size: 1.15rem;
font-weight: 700;
}
.buero81-erreichbar-fenster__zustand {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
color: var(--wp--preset--color--schrift-leise, #595959);
font-size: 0.9rem;
}
.buero81-erreichbar-fenster__wege {
margin: 1.4rem 0 0;
padding: 0;
list-style: none;
border-bottom: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
}
.buero81-erreichbar-fenster__wege li {
border-top: 1px solid var(--wp--custom--linie-stark, #8c8c8c);
}
.buero81-erreichbar-fenster__wege a {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 0.2rem;
color: inherit;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.buero81-erreichbar-fenster__zeichen {
flex: 0 0 auto;
width: 1.4rem;
height: 1.4rem;
color: var(--wp--preset--color--akzent, #333);
transition: transform 0.2s;
}
.buero81-erreichbar-fenster__wege a:hover,
.buero81-erreichbar-fenster__wege a:focus-visible {
color: var(--wp--preset--color--akzent, #333);
}
.buero81-erreichbar-fenster__wege a:hover .buero81-erreichbar-fenster__zeichen,
.buero81-erreichbar-fenster__wege a:focus-visible .buero81-erreichbar-fenster__zeichen {
transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
.buero81-erreichbar-fenster__zeichen {
transition: none;
}
.buero81-erreichbar-fenster__wege a:hover .buero81-erreichbar-fenster__zeichen,
.buero81-erreichbar-fenster__wege a:focus-visible .buero81-erreichbar-fenster__zeichen {
transform: none;
}
}
@media (min-width: 75rem) {
.buero81-erreichbar-fenster {
top: auto;
max-height: 50vh;
}
}
@media (max-width: 47.99rem) {
.buero81-erreichbar {
display: none;
}
}
/* theme.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--kopf-hoehe, 0px);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
}
img,
video {
max-width: 100%;
height: auto;
}
:focus-visible {
outline: 2px solid var(--wp--preset--color--akzent);
outline-offset: 2px;
}
::selection {
background: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--grund);
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sprungmarke {
position: absolute;
left: -9999px;
z-index: 100;
}
.sprungmarke:focus {
left: var(--wp--preset--spacing--20);
top: var(--wp--preset--spacing--20);
background: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--grund);
padding: 0.5rem 1rem;
border-radius: var(--wp--custom--radius--knopf);
font-weight: 600;
text-decoration: none;
}
.huelle {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
padding-inline: var(--wp--custom--rand);
}
.seitenkopf {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
--kopf-polster: 2vw;
padding-block: calc(var(--kopf-polster) * (1 - var(--kopf-deckung, 0))) !important;
}
.seitenkopf::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--preset--color--papier);
opacity: calc(var(--kopf-deckung, 0) * 0.8);
}
.text > .aufmacher:first-child {
margin-block-start: calc(-1 * var(--kopf-hoehe, 0px)) !important;
}
body:has(.inhalt .text > .alignfull.has-background:last-child) .seitenfuss {
margin-top: 0;
}
.seitenkopf__innen {
padding-block: var(--wp--preset--spacing--20);
}
.marke {
min-width: 0;
}
.marke__name {
font-size: var(--wp--preset--font-size--gross);
font-weight: 900;
letter-spacing: -0.02em;
text-decoration: none;
color: inherit;
margin: 0;
}
.marke__spruch {
margin: 0;
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--schrift-leise);
border-left: 1px solid var(--wp--preset--color--rand);
padding-left: var(--wp--preset--spacing--20);
white-space: nowrap;
}
@media (max-width: 40rem) {
.marke__spruch {
display: none;
}
}
.seitenkopf .wp-block-navigation {
font-size: var(--wp--preset--font-size--klein);
font-weight: 500;
}
.seitenkopf .wp-block-navigation a {
text-decoration: none;
color: var(--wp--preset--color--schrift-leise);
transition: color .15s;
}
.seitenkopf .wp-block-navigation a:hover,
.seitenkopf .wp-block-navigation .current-menu-item > a {
color: var(--wp--preset--color--akzent);
}
.seitenkopf .wp-block-navigation__responsive-container-open {
border: 1px solid var(--wp--preset--color--rand);
border-radius: var(--wp--custom--radius--knopf);
padding: 0.5rem 0.9rem;
}
.wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--papier);
color: var(--wp--preset--color--schrift);
padding: var(--wp--preset--spacing--40) var(--wp--custom--rand);
}
.wp-block-navigation__responsive-container.is-menu-open a {
color: var(--wp--preset--color--schrift);
text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
color: var(--wp--preset--color--akzent);
}
.seitenfuss .wp-block-navigation {
font-size: var(--wp--preset--font-size--klein);
gap: var(--wp--preset--spacing--10);
}
.seitenfuss .wp-block-navigation a {
text-decoration: none;
color: var(--wp--preset--color--schrift-leise);
transition: color .15s;
}
.seitenfuss .wp-block-navigation a:hover {
color: var(--wp--preset--color--akzent);
}
.inhalt {
padding-block: var(--wp--preset--spacing--40);
}
.inhalt:has(.text > .alignfull:first-child) {
padding-block-start: 0;
}
.inhalt:has(.text > .alignfull:last-child) {
padding-block-end: 0;
}
.seitentitel {
max-width: var(--wp--style--global--content-size);
margin-bottom: var(--wp--preset--spacing--30);
}
.seitentitel h1 {
margin: 0;
text-wrap: balance;
}
.kennzeichen,
.seitentitel__kennzeichen {
margin: 0 0 var(--wp--preset--spacing--10);
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wp--preset--color--akzent);
}
.seitentitel__datum,
.seitentitel__vorspann {
margin: var(--wp--preset--spacing--10) 0 0;
color: var(--wp--preset--color--schrift-leise);
}
.text > *,
.seitentitel,
.beitragsbild {
margin-inline: auto;
padding-inline: var(--wp--custom--rand);
}
.text > * {
max-width: var(--wp--style--global--content-size);
}
.text > .alignwide {
max-width: var(--wp--style--global--wide-size);
}
.text > .alignfull {
max-width: none;
margin-inline: 0;
}
.text > .alignfull.has-background {
padding-inline: 0;
}
.abschnitt {
padding-block: var(--wp--preset--spacing--40);
}
.voll-innen {
max-width: var(--wp--style--global--content-size);
margin-inline: auto;
padding-inline: var(--wp--custom--rand);
}
.text > .alignfull img {
width: 100%;
}
.beitragsbild {
max-width: var(--wp--style--global--wide-size);
margin-bottom: var(--wp--preset--spacing--30);
}
.karte {
border: 1px solid var(--wp--preset--color--rand);
border-radius: var(--wp--custom--radius--knopf);
background: var(--wp--preset--color--flaeche);
padding: var(--wp--preset--spacing--30);
transition: border-color .15s;
}
.karte:hover {
border-color: color-mix(in srgb, var(--wp--preset--color--akzent) 50%, transparent);
}
.aufforderung {
border: 1px solid var(--wp--preset--color--rand);
border-radius: var(--wp--custom--radius--knopf);
background: var(--wp--preset--color--flaeche);
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
text-align: center;
}
.aufforderung h2 {
text-wrap: balance;
}
.team__bild img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--wp--custom--radius--knopf);
}
.team__bild {
margin-bottom: var(--wp--preset--spacing--20);
}
.team__funktion {
margin-top: calc(var(--wp--preset--spacing--10) * -1);
color: var(--wp--preset--color--akzent);
}
.fragen > details {
border-top: 1px solid var(--wp--preset--color--rand);
padding-block: var(--wp--preset--spacing--20);
}
.fragen > details:last-child {
border-bottom: 1px solid var(--wp--preset--color--rand);
}
.fragen summary {
cursor: pointer;
font-weight: 600;
list-style: none;
}
.fragen summary::-webkit-details-marker {
display: none;
}
.fragen summary::after {
content: "+";
float: right;
margin-left: var(--wp--preset--spacing--20);
color: var(--wp--preset--color--akzent);
font-weight: 400;
}
.fragen details[open] summary::after {
content: "–";
}
.fragen summary:hover {
color: var(--wp--preset--color--akzent);
}
.zahlen__wert {
margin: 0;
font-size: var(--wp--preset--font-size--titel);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--akzent);
}
.zahlen__wort {
margin-top: var(--wp--preset--spacing--10);
color: var(--wp--preset--color--schrift-leise);
}
.zitat {
margin: 0;
border-left: 2px solid var(--wp--preset--color--akzent);
padding-left: var(--wp--preset--spacing--30);
}
.zitat p {
text-wrap: balance;
}
.zitat cite {
display: block;
margin-top: var(--wp--preset--spacing--20);
font-size: var(--wp--preset--font-size--klein);
font-style: normal;
color: var(--wp--preset--color--schrift-leise);
}
.logos img {
max-height: 3rem;
width: auto;
opacity: 0.6;
filter: grayscale(1);
transition: opacity .2s, filter .2s;
}
.logos img:hover {
opacity: 1;
filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce) {
.logos img {
transition: none;
}
}
.liste {
display: grid;
gap: var(--wp--preset--spacing--30);
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.liste__eintrag {
border: 1px solid var(--wp--preset--color--rand);
border-radius: var(--wp--custom--radius--knopf);
background: var(--wp--preset--color--flaeche);
padding: var(--wp--preset--spacing--30);
transition: border-color .15s;
}
.liste__eintrag:hover {
border-color: color-mix(in srgb, var(--wp--preset--color--akzent) 50%, transparent);
}
.liste__bild img {
border-radius: var(--wp--custom--radius--knopf);
margin-bottom: var(--wp--preset--spacing--20);
}
.liste__titel {
margin: 0;
font-size: var(--wp--preset--font-size--gross);
}
.liste__titel a {
text-decoration: none;
color: inherit;
}
.liste__titel a:hover {
color: var(--wp--preset--color--akzent);
}
.liste__vorspann {
color: var(--wp--preset--color--schrift-leise);
margin-bottom: 0;
}
.leer {
color: var(--wp--preset--color--schrift-leise);
}
.blaettern {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--20);
margin-top: var(--wp--preset--spacing--40);
}
.blaettern--beitrag {
justify-content: space-between;
border-top: 1px solid var(--wp--preset--color--rand);
padding-top: var(--wp--preset--spacing--30);
}
.suche {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--wp--preset--spacing--20);
margin-top: var(--wp--preset--spacing--40);
}
.suche__beschriftung {
display: block;
width: 100%;
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--schrift-leise);
}
.suche__feld {
flex: 1 1 14rem;
background: var(--wp--preset--color--flaeche-hoch);
border: 1px solid var(--wp--custom--linie-stark);
border-radius: var(--wp--custom--radius--knopf);
color: inherit;
padding: 0.6rem 0.75rem;
font: inherit;
}
.suche__feld:focus {
border-color: var(--wp--preset--color--akzent);
outline: none;
}
.knopf,
.wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
background: transparent;
color: var(--wp--preset--color--akzent);
padding: 0.75rem 1.5rem;
font: inherit;
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.knopf:hover,
.knopf:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
background: var(--wp--preset--color--akzent);
border-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--grund);
}
.knopf--schlicht,
.is-style-schlicht .wp-block-button__link {
border-color: color-mix(in srgb, var(--wp--preset--color--schrift) 40%, transparent);
color: var(--wp--preset--color--schrift);
}
.knopf--schlicht:hover,
.is-style-schlicht .wp-block-button__link:hover {
background: var(--wp--preset--color--schrift);
border-color: var(--wp--preset--color--schrift);
color: var(--wp--preset--color--grund);
}
.seitenfuss {
margin-top: var(--wp--preset--spacing--50);
padding-block-end: var(--buero81-fuss-freiraum, 0px);
}
.seitenfuss__spalten {
display: grid;
gap: var(--wp--preset--spacing--30);
padding-block: var(--wp--preset--spacing--40);
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.seitenfuss__spalten {
grid-template-columns: repeat(2, 1fr);
}
.seitenfuss__marke {
grid-column: span 2;
}
}
@media (min-width: 64rem) {
.seitenfuss__spalten {
grid-template-columns: repeat(4, 1fr);
}
}
.seitenfuss__beschreibung {
max-width: 24rem;
margin: var(--wp--preset--spacing--10) 0 0;
font-size: var(--wp--preset--font-size--klein);
line-height: 1.7;
color: var(--wp--preset--color--schrift-leise);
}
.seitenfuss__kontakt {
margin: var(--wp--preset--spacing--20) 0 0;
font-style: normal;
font-size: var(--wp--preset--font-size--klein);
line-height: 1.7;
color: var(--wp--preset--color--schrift-leise);
}
.seitenfuss__kontakt p {
margin: 0;
}
.seitenfuss__kontakt a {
color: inherit;
text-decoration: none;
}
.seitenfuss__kontakt a:hover,
.seitenfuss__kontakt a:focus-visible {
color: var(--wp--preset--color--akzent);
}
.seitenfuss__ueberschrift {
margin: 0 0 var(--wp--preset--spacing--20);
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wp--preset--color--schrift-leise);
}
.seitenfuss__liste {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--10);
font-size: var(--wp--preset--font-size--klein);
}
.seitenfuss__liste a {
color: var(--wp--preset--color--schrift-leise);
text-decoration: none;
transition: color .15s;
}
.seitenfuss__liste a:hover {
color: var(--wp--preset--color--akzent);
}
.seitenfuss__zeile {
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--schrift-leise);
}
.seitenfuss__zeile p {
margin: 0;
padding-block: var(--wp--preset--spacing--20);
}
.seitenfuss__trenner {
margin-inline: 0.5em;
}
.seitenfuss__herz {
color: var(--wp--preset--color--akzent);
}
@media (max-width: 47.99rem) {
.mobil-aus { display: none !important; }
}
@media (min-width: 48rem) {
.mobil-nur { display: none !important; }
}
@media (max-width: 63.99rem) {
.tablet-aus { display: none !important; }
}
@media (max-width: 47.99rem) {
.mobil-mitte,
.mobil-mitte * { text-align: center; }
.mobil-eng { padding-block: var(--wp--preset--spacing--30) !important; }
.mobil-randlos { padding-inline: 0 !important; }
.mobil-umkehren { flex-direction: column-reverse !important; }
.mobil-umkehren.wp-block-media-text { display: flex; }
}
mark {
padding: 0;
border-radius: var(--wp--custom--radius--knopf);
background-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--grund);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
mark.mark--wischt {
background-image: linear-gradient(to right, var(--mark-farbe) 0 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
--mark-dauer: 0.9s;
--mark-takt: 0.22s;
animation: mark-wischen var(--mark-dauer) cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--mark-platz, 0) * var(--mark-takt));
}
@keyframes mark-wischen {
from {
background-color: transparent;
background-size: 0% 100%;
color: var(--mark-schrift-vorher);
}
to {
background-color: transparent;
background-size: 100% 100%;
color: var(--mark-schrift);
}
}
@media (prefers-reduced-motion: reduce) {
mark.mark--wischt {
animation: none;
}
}
html:has(body.schnappen) {
scroll-snap-type: y mandatory;
}
.abschnittssprung {
position: fixed;
right: var(--wp--custom--rand);
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.abschnittssprung[hidden] {
display: none;
}
.abschnittssprung__knopf {
display: flex;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--schrift);
cursor: pointer;
transition: opacity 0.2s, color 0.2s;
}
.abschnittssprung__knopf:hover,
.abschnittssprung__knopf.getippt {
color: var(--wp--preset--color--akzent);
}
.abschnittssprung__knopf[disabled] {
opacity: 0.3;
cursor: default;
}
@keyframes abschnitt-pulsieren {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.18);
opacity: 1;
}
}
.abschnittssprung__zeichen {
transform-origin: center;
animation: abschnitt-pulsieren 1.8s ease-in-out infinite;
}
.abschnittssprung__knopf[data-richtung="1"] .abschnittssprung__zeichen {
animation-delay: 0.9s;
}
.abschnittssprung.gesehen .abschnittssprung__zeichen,
.abschnittssprung__knopf[disabled] .abschnittssprung__zeichen {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.abschnittssprung__zeichen {
animation: none !important;
}
}
body.schnappen .text > .abschnitt {
scroll-snap-align: start;
scroll-margin-top: calc(-1 * var(--kopf-hoehe, 0px));
}
body.schnappen .seitenfuss {
scroll-snap-align: end;
}
@media (prefers-reduced-motion: reduce) {
html:has(body.schnappen) {
scroll-snap-type: none;
}
}
/* projekt.css */
/*
 * Ergänzungen dieses Projekts. Wird vom Eltern-Theme automatisch hinter dessen Stylesheet
 * geladen (siehe inc/assets.php, Handle "buero81-kind") -- eine Datei unter diesem Pfad
 * genügt, es ist nichts anzumelden.
 *
 * WAS HIER NICHT HINGEHÖRT: Farben, Schriften, Abstände. Die stehen in der theme.json,
 * damit der Block-Editor sie kennt. Hier steht nur, was sich in Presets nicht ausdrücken
 * lässt.
 */

/* ================================================================================
 * WEISSER VORSPANN AUF DER AKZENTFLÄCHE
 * ============================================================================== */

/*
 * WARUM DIESE REGEL EXISTIERT -- und warum sie so eng gefasst ist.
 *
 * Zwei Abschnitte tragen die Akzentfarbe als Fläche und weißen Text darauf. Weiß auf dem
 * Akzent ergibt 3,02:1. Das genügt für GROSSEN Text (WCAG verlangt dort 3:1) und genügt
 * NICHT für gewöhnlichen (4,5:1).
 *
 * "Groß" ist dabei kein Gefühl, sondern definiert: ab 24 px normal, oder ab 18,66 px fett.
 * Die Überschriften erfüllen das von selbst -- nachgemessen 22 px bei Gewicht 900. Der
 * Vorspann nicht: Er steht auf schmalen Geräten bei 18 px und Gewicht 400, also knapp
 * darunter. Genau diese beiden Absätze meldet Lighthouse.
 *
 * DREI WEGE STANDEN ZUR WAHL, und die Entscheidung fiel gegen zwei davon:
 *
 *   Schrift auf "grund" umstellen  -- 7,11:1, kostet keine Zeile CSS. Verworfen, weil der
 *                                     weiße Text hier gestalterisch gewollt ist.
 *   Akzent stärker abdunkeln       -- für 4,5:1 bräuchte es #aa6454, 27 % dunkler. Damit
 *                                     fällt der Akzent als SCHRIFTFARBE auf dunklem Grund
 *                                     auf 4,04:1 und reißt dort jeden Link mit. Kontrast ist
 *                                     symmetrisch: Was Weiß darauf hilft, schadet dem Akzent
 *                                     darauf. Und optisch war es kein Lachs mehr.
 *   Text groß genug machen         -- dieser Weg. Hebt die Schwelle von 4,5 auf 3, und die
 *                                     ist mit der leicht abgedunkelten Fläche erreicht.
 *
 * max() UND NICHT EIN FESTER WERT: Auf breiten Fenstern steht der Vorspann ohnehin bei 36 px.
 * Ein festes 1.5rem würde ihn dort VERKLEINERN -- eine Kontrastregel, die das Layout
 * verschlechtert, hätte ihren Zweck verfehlt. So greift sie nur dort, wo die Kurve unter
 * 24 px läuft (unterhalb rund 937 px Fensterbreite).
 *
 * !important, WEIL WORDPRESS ES BENUTZT: Die Preset-Klasse .has-einleitung-font-size trägt
 * "font-size: … !important". Ohne dasselbe Gewicht verliert diese Regel lautlos. Die höhere
 * Spezifität (drei Klassen gegen eine) entscheidet dann zu unseren Gunsten.
 *
 * NUR AUF DER AKZENTFLÄCHE: Jeder andere Vorspann steht auf dunklem Grund bei 15:1 und
 * braucht nichts. Die mobile Typografie ist in zwei Runden bewusst zurückgenommen worden --
 * sie global wieder anzuheben, um zwei Absätze zu retten, wäre der falsche Hebel.
 */
.abschnitt.has-akzent-background-color .has-einleitung-font-size {
	font-size: max(1.5rem, var(--wp--preset--font-size--einleitung)) !important;
}