:root {
--orange:       #f39200;
--orange-hell:  #ffb03d;
--orange-tief:  #d47e00;
--orange-text:  #9a5b00;
--navy:         #152f4e;
--navy-mittel:  #1d3a5e;
--navy-tief:    #101f33;
--weiss:        #ffffff;
--flaeche:      #f4f7f9;
--flaeche-warm: #fdf7ee;
--linie:        #dfe7ee;
--linie-stark:  #c3d1de;
--text:         #23303f;
--text-leise:   #55636e;
--text-hell:    #c6d4e2;
--text-hell-leise: #a4b8ce;
--rot:          #a51f18;
--luft-min:     clamp(1rem, 3vw, 1.5rem);
--luft-s:       clamp(1.25rem, 3.5vw, 2rem);
--luft-m:       clamp(2rem, 5vw, 3.5rem);
--luft-l:       clamp(3.25rem, 7.5vw, 6rem);
--breite:       1220px;
--breite-eng:   760px;
--rund:         18px;
--rund-s:       10px;
--schatten-1: 0 1px 2px rgba(21,47,78,.05), 0 2px 8px rgba(21,47,78,.05);
--schatten-2: 0 2px 4px rgba(21,47,78,.06), 0 12px 28px rgba(21,47,78,.08);
--schatten-3: 0 4px 8px rgba(21,47,78,.07), 0 24px 56px rgba(21,47,78,.14);
--uebergang: 220ms cubic-bezier(.2, .7, .3, 1);
--schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scroll-padding-top: 6.5rem;
}
body {
margin: 0;
font-family: var(--schrift);
font-size: clamp(1rem, .97rem + .2vw, 1.09rem);
line-height: 1.68;
color: var(--text);
background: var(--weiss);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
color: var(--navy);
line-height: 1.16;
margin: 0 0 .6em;
font-weight: 750;
text-wrap: pretty;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
overflow-wrap: break-word;
}
.satzteil { display: inline-block; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.2rem, .92rem + 2.5vw, 2.6rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.1rem, 1.06rem + 1.25vw, 1.9rem); letter-spacing: -.017em; }
h3 { font-size: clamp(1rem, .99rem + .38vw, 1.24rem); letter-spacing: -.008em; }
h4 { font-size: 1rem; }
p, li, dd, dt, figcaption, summary, td, th {
hyphens: auto;
overflow-wrap: anywhere;
}
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a {
color: var(--orange-text);
text-decoration-color: rgba(154,91,0,.4);
text-decoration-thickness: 1.5px;
text-underline-offset: .18em;
overflow-wrap: break-word;
transition: color var(--uebergang), text-decoration-color var(--uebergang);
}
a:hover { color: var(--navy); text-decoration-color: var(--orange); }
:where(a, button, input, textarea, select, summary):focus-visible {
outline: 3px solid var(--orange-tief);
outline-offset: 3px;
border-radius: 5px;
}
strong { color: var(--navy); font-weight: 700; }
::selection { background: var(--orange); color: #241500; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
.bewegt .band :is(
.kopfzeile,
.raster > *,
.ablauf > li,
.galerie > figure,
.paar > *,
.fragen > .frage,
.merkzeile > li,
.belege > *
) {
opacity: 0;
transform: translateY(20px);
transition: opacity 620ms cubic-bezier(.2,.7,.3,1), transform 620ms cubic-bezier(.2,.7,.3,1);
}
.bewegt .sichtbar { opacity: 1 !important; transform: none !important; }
.bewegt .band :is(.raster, .ablauf, .galerie, .fragen, .merkzeile, .belege) > *:nth-child(2) { transition-delay:  80ms; }
.bewegt .band :is(.raster, .ablauf, .galerie, .fragen, .merkzeile, .belege) > *:nth-child(3) { transition-delay: 160ms; }
.bewegt .band :is(.raster, .ablauf, .galerie, .fragen, .merkzeile, .belege) > *:nth-child(4) { transition-delay: 240ms; }
.bewegt .band :is(.raster, .ablauf, .galerie, .fragen, .merkzeile, .belege) > *:nth-child(5) { transition-delay: 300ms; }
.bewegt .band :is(.raster, .ablauf, .galerie, .fragen, .merkzeile, .belege) > *:nth-child(n+6) { transition-delay: 340ms; }
.bewegt .band .paar > *:nth-child(2) { transition-delay: 120ms; }
@keyframes herauf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.aufmacher .paar > *  { animation: herauf 700ms cubic-bezier(.2,.7,.3,1) both; }
.aufmacher .paar > *:nth-child(2) { animation-delay: 160ms; }
.aufmacher .merkzeile li { animation: herauf 600ms cubic-bezier(.2,.7,.3,1) both; }
.aufmacher .merkzeile li:nth-child(1) { animation-delay: 240ms; }
.aufmacher .merkzeile li:nth-child(2) { animation-delay: 300ms; }
.aufmacher .merkzeile li:nth-child(3) { animation-delay: 360ms; }
.aufmacher .merkzeile li:nth-child(4) { animation-delay: 420ms; }
.huelle {
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-inline: var(--luft-min);
}
.huelle--eng { max-width: var(--breite-eng); }
.band { padding-block: var(--luft-l); position: relative; }
.band--knapp { padding-block: var(--luft-m); }
.band--hell, .band--grau { background: var(--flaeche); }
.band--warm { background: var(--flaeche-warm); }
.band--navy {
background-color: var(--navy);
background-image: radial-gradient(120% 90% at 88% 0%, #24466f 0%, rgba(36,70,111,0) 62%);
color: var(--text-hell);
}
.band--navy h2, .band--navy h3, .band--navy h4 { color: var(--weiss); }
.band--navy a { color: var(--orange-hell); text-decoration-color: rgba(255,176,61,.5); }
.band--navy a:hover { color: var(--weiss); }
.band--navy strong { color: var(--weiss); }
.band--linie { border-top: 1px solid var(--linie); }
.auge { max-width: 62ch; }
.mitte { text-align: center; }
.mitte .auge { margin-inline: auto; }
.kopfzeile { margin-bottom: var(--luft-m); }
.vorzeile {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--orange-text);
margin-bottom: .85rem;
}
.vorzeile::before {
content: "";
width: 1.6rem; height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--orange), var(--orange-hell));
flex: none;
}
.band--navy .vorzeile { color: var(--orange-hell); }
.mitte .vorzeile { justify-content: center; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); color: var(--text-leise); line-height: 1.62; }
.band--navy .lead { color: var(--text-hell-leise); }
.raster { display: grid; grid-template-columns: 1fr; gap: var(--luft-s); }
@media (min-width: 620px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 940px) { .raster--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 940px) { .raster--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.paar { display: grid; grid-template-columns: 1fr; gap: var(--luft-m); align-items: center; }
.paar > * { min-width: 0; }
@media (min-width: 900px) {
.paar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--luft-l); }
.paar--breit-links  { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.paar--breit-rechts { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
}
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .88rem 1.6rem;
min-height: 52px;
border: 2px solid transparent;
border-radius: 10px;
font: inherit;
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
letter-spacing: -.005em;
text-align: center;
text-decoration: none;
text-wrap: balance;
max-width: 100%;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
transition: background-color 180ms ease, border-color 180ms ease,
color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.knopf svg { flex: none; }
.knopf > * { position: relative; z-index: 1; }
.knopf--haupt {
background: var(--navy);
border-color: var(--navy);
color: #fff;
box-shadow: 0 1px 2px rgba(21,47,78,.18), 0 6px 18px rgba(21,47,78,.16);
}
.knopf--haupt:hover {
color: #fff;
background: var(--navy-mittel);
border-color: var(--navy-mittel);
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(21,47,78,.2), 0 12px 26px rgba(21,47,78,.24);
}
.knopf--haupt:active { transform: translateY(0); }
.knopf--haupt::before {
content: "";
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(105deg,
transparent 30%,
rgba(243,146,0,.0) 42%,
rgba(255,176,61,.55) 50%,
rgba(243,146,0,.0) 58%,
transparent 70%);
transform: translateX(-120%);
}
.knopf--haupt:hover::before,
.knopf--haupt:focus-visible::before { animation: stromfluss 1.5s ease-in-out infinite; }
.knopf--haupt::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; z-index: -1;
background: linear-gradient(90deg, var(--orange), var(--orange-hell), var(--orange));
transform: scaleX(0); transform-origin: left;
transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.knopf--haupt:hover::after,
.knopf--haupt:focus-visible::after { transform: scaleX(1); }
@keyframes stromfluss {
0%   { transform: translateX(-120%); }
60%  { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
.knopf--rand {
background: #e7eef5;
border-color: #cfdce8;
color: var(--navy);
}
.knopf--rand:hover {
background: var(--navy); border-color: var(--navy); color: #fff;
transform: translateY(-2px);
}
.band--navy .knopf--rand, .ruf .knopf--rand {
background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: var(--weiss);
}
.band--navy .knopf--rand:hover, .ruf .knopf--rand:hover {
background: rgba(255,255,255,.22); color: var(--weiss); border-color: rgba(255,255,255,.72);
}
.band--navy .knopf--haupt, .ruf .knopf--haupt {
background: var(--orange); border-color: var(--orange); color: #241500;
box-shadow: none;
}
.band--navy .knopf--haupt:hover, .ruf .knopf--haupt:hover {
background: var(--orange-hell); border-color: var(--orange-hell); color: #241500;
}
.band--navy .knopf--haupt::before, .ruf .knopf--haupt::before {
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0) 42%,
rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%, transparent 70%);
}
.band--navy .knopf--haupt::after, .ruf .knopf--haupt::after {
background: linear-gradient(90deg, var(--navy), #2b5480, var(--navy));
}
.knopf--klein { padding: .6rem 1.1rem; min-height: 42px; font-size: .92rem; border-radius: 8px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: var(--luft-min); }
.mitte .knopfreihe { justify-content: center; }
.weiterlink {
display: inline-flex; align-items: center; gap: .45rem;
font-weight: 700; text-decoration: none; color: var(--orange-text);
}
.weiterlink::after {
content: "\2192";
transition: transform var(--uebergang);
}
.weiterlink:hover::after { transform: translateX(4px); }
.karte {
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: var(--luft-s);
box-shadow: var(--schatten-1);
min-width: 0;
position: relative;
transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
container-type: inline-size;
}
.karte h3 { margin-bottom: .5rem; }
.karte p:last-child { margin-bottom: 0; }
.karte--verlinkt {
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
overflow: hidden;
}
.karte--verlinkt::before {
content: "";
position: absolute; inset: 0 auto auto 0;
height: 3px; width: 100%;
background: linear-gradient(90deg, var(--orange), var(--orange-hell));
transform: scaleX(0); transform-origin: left;
transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.karte--verlinkt:hover {
color: inherit;
transform: translateY(-4px);
box-shadow: var(--schatten-3);
border-color: var(--linie-stark);
}
.karte--verlinkt:hover::before { transform: scaleX(1); }
.karte--verlinkt:hover .zeichen { background: var(--orange); color: #241500; transform: rotate(-4deg) scale(1.06); }
.karte:hover .zeichen { transform: scale(1.05); }
.karte--verlinkt .weiter {
margin-top: auto; padding-top: 1.15rem;
font-weight: 700; color: var(--orange-text);
display: inline-flex; align-items: center; gap: .45rem;
}
.karte--verlinkt .weiter::after { content: "\2192"; transition: transform var(--uebergang); }
.karte--verlinkt:hover .weiter::after { transform: translateX(5px); }
.band--navy .karte {
background: rgba(255,255,255,.055);
border-color: rgba(255,255,255,.14);
color: var(--text-hell);
box-shadow: none;
backdrop-filter: blur(2px);
}
.band--navy .karte--verlinkt:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.karte--betont { border-color: var(--orange); box-shadow: var(--schatten-2); }
.zeichen {
width: 50px; height: 50px;
display: grid; place-items: center;
border-radius: 14px;
background: linear-gradient(145deg, rgba(243,146,0,.2), rgba(243,146,0,.09));
color: var(--orange-text);
margin-bottom: 1.1rem;
flex: none;
transition: background-color var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.zeichen svg { width: 25px; height: 25px; }
.band--navy .zeichen { background: rgba(243,146,0,.2); color: var(--orange-hell); }
.zahl {
display: block;
font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.35rem);
font-weight: 750; line-height: 1.05;
letter-spacing: -.035em;
color: var(--orange-text);
font-variant-numeric: tabular-nums;
}
.zahl + span { display: block; font-size: .93rem; color: var(--text-leise); margin-top: .5rem; line-height: 1.45; }
.bewegt .band .raster > *.sichtbar .zahl { animation: zahl-herauf 620ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes zahl-herauf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.band--navy .zahl { color: var(--orange-hell); }
.band--navy .zahl + span { color: var(--text-hell-leise); }
.liste { list-style: none; margin: 0 0 1.15em; padding: 0; display: grid; gap: .78rem; }
.liste li { position: relative; padding-left: 2.05rem; }
.liste li::before {
content: "";
position: absolute; left: 0; top: .32em;
width: 1.35rem; height: 1.35rem;
border-radius: 50%;
background: rgba(243,146,0,.16);
}
.liste li::after {
content: "";
position: absolute; left: .3rem; top: .55em;
width: .78rem; height: .78rem;
background: var(--orange-text);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.4 4.2 12.05l1.6-1.6 3.75 3.75 8.65-8.65 1.6 1.6z'/%3E%3C/svg%3E") center/100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.4 4.2 12.05l1.6-1.6 3.75 3.75 8.65-8.65 1.6 1.6z'/%3E%3C/svg%3E") center/100% no-repeat;
}
.band--navy .liste li::before { background: rgba(243,146,0,.24); }
.band--navy .liste li::after  { background: var(--orange-hell); }
.liste--warnung li::before { background: rgba(165,31,24,.12); }
.liste--warnung li::after {
background: var(--rot);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 15.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4M11 9h2v6h-2z'/%3E%3C/svg%3E") center/100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 15.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4M11 9h2v6h-2z'/%3E%3C/svg%3E") center/100% no-repeat;
}
.ablauf {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: var(--luft-s);
counter-reset: schritt;
}
@media (min-width: 760px)  { .ablauf { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .ablauf--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ablauf li { counter-increment: schritt; position: relative; padding-top: 3.6rem; min-width: 0; }
.ablauf li::before {
content: counter(schritt);
position: absolute; top: 0; left: 0;
width: 2.7rem; height: 2.7rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--navy);
color: #fff; font-weight: 750; font-size: 1.08rem;
box-shadow: 0 0 0 5px rgba(21,47,78,.07);
}
.band--navy .ablauf li::before {
background: var(--orange);
color: #241500;
box-shadow: 0 0 0 5px rgba(243,146,0,.16);
}
@media (min-width: 1040px) {
.ablauf--4 li:not(:last-child)::after {
content: "";
position: absolute; top: 1.35rem; left: 3.1rem; right: -1rem;
height: 2px;
background: repeating-linear-gradient(90deg, var(--linie-stark) 0 6px, transparent 6px 12px);
}
.band--navy .ablauf--4 li:not(:last-child)::after {
background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px);
}
}
.ablauf h3 { margin-bottom: .4rem; }
.ablauf p { color: var(--text-leise); margin: 0; }
.band--navy .ablauf p { color: var(--text-hell-leise); }
.ablauf--gestapelt { grid-template-columns: 1fr !important; }
.bild-rahmen {
border-radius: var(--rund);
overflow: hidden;
box-shadow: var(--schatten-3);
background: var(--flaeche);
position: relative;
}
.bild-rahmen img { width: 100%; transition: transform 900ms cubic-bezier(.2,.7,.3,1); }
.bild-rahmen--hoch img { aspect-ratio: 3 / 4; object-fit: cover; }
.bild-rahmen--quer img { aspect-ratio: 4 / 3; object-fit: cover; }
.bild-rahmen--band img { aspect-ratio: 16 / 9; object-fit: cover; }
.bild-rahmen--frei { box-shadow: none; background: transparent; }
.bild-rahmen--zoom:hover img { transform: scale(1.035); }
figure { margin: 0; }
figcaption { font-size: .89rem; color: var(--text-leise); padding-top: .65rem; line-height: 1.5; }
.galerie { display: grid; grid-template-columns: 1fr; gap: var(--luft-min); }
@media (min-width: 560px) { .galerie { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.galerie figure {
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: var(--rund);
overflow: hidden;
box-shadow: var(--schatten-1);
min-width: 0;
transition: box-shadow var(--uebergang), transform var(--uebergang);
}
.galerie figure:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 900ms cubic-bezier(.2,.7,.3,1); }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { padding: .95rem var(--luft-min) 1.15rem; }
.dokumente { display: grid; grid-template-columns: 1fr; gap: var(--luft-s); }
@media (min-width: 560px)  { .dokumente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .dokumente { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dokumente figure {
display: flex; flex-direction: column;
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: var(--rund);
overflow: hidden;
box-shadow: var(--schatten-1);
min-width: 0;
transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
}
.dokumente figure:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.dokumente a {
display: block; position: relative;
background: var(--flaeche);
padding: .7rem;
text-decoration: none;
}
.dokumente img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: contain;
object-position: center top;
background: var(--weiss);
border-radius: 4px;
}
.dokumente a::after {
content: "";
position: absolute; right: 1.1rem; bottom: 1.1rem;
width: 2rem; height: 2rem;
border-radius: 50%;
background: rgba(21,47,78,.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8m3.7 9.1 1.4-1.4 5.3 5.3-1.4 1.4zM9 7h2v2h2v2h-2v2H9v-2H7V9h2z'/%3E%3C/svg%3E") center/58% no-repeat;
opacity: 0; transform: scale(.85);
transition: opacity var(--uebergang), transform var(--uebergang);
}
.dokumente a:hover::after, .dokumente a:focus-visible::after { opacity: 1; transform: none; }
.dokumente figcaption {
padding: .9rem var(--luft-min) 1.1rem;
font-size: .84rem; line-height: 1.5; color: var(--text-leise);
border-top: 1px solid var(--linie);
}
.dokumente figcaption strong { display: block; color: var(--navy); font-size: .92rem; margin-bottom: .2rem; }
.kopf {
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,.86);
backdrop-filter: saturate(1.6) blur(14px);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--uebergang), box-shadow var(--uebergang), background-color var(--uebergang);
}
.kopf[data-gescrollt="ja"] {
background: rgba(255,255,255,.96);
border-bottom-color: var(--linie);
box-shadow: 0 6px 22px rgba(21,47,78,.07);
}
.kopf__innen {
display: flex; align-items: center; gap: var(--luft-min);
min-height: 78px;
padding-block: .8rem;
}
.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex: none; min-width: 0; }
.marke img { width: 152px; transition: transform var(--uebergang); }
.marke:hover img { transform: scale(1.03); }
@media (max-width: 400px) { .marke img { width: 122px; } }
.marke__zusatz {
display: none;
font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--navy);
border-left: 2px solid var(--orange);
padding-left: .8rem; line-height: 1.45;
white-space: nowrap;
}
.marke__zusatz b { display: block; font-weight: 700; color: var(--orange-text); letter-spacing: .05em; }
@media (min-width: 1120px) { .marke__zusatz { display: block; } }
.navi { margin-left: auto; display: flex; align-items: center; gap: .35rem; min-width: 0; }
.navi__liste { display: none; list-style: none; margin: 0; padding: 0; gap: .1rem; }
@media (min-width: 960px) { .navi__liste { display: flex; } }
.navi__liste > li > a {
display: block; position: relative;
padding: .6rem .68rem;
font-size: .93rem; font-weight: 600;
color: var(--navy); text-decoration: none;
white-space: nowrap;
border-radius: var(--rund-s);
transition: color var(--uebergang), background-color var(--uebergang);
}
.navi__liste > li > a::after {
content: "";
position: absolute; left: .68rem; right: .68rem; bottom: .28rem;
height: 2px; border-radius: 2px;
background: var(--orange);
transform: scaleX(0);
transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.navi__liste > li > a:hover { color: var(--orange-text); }
.navi__liste > li > a:hover::after { transform: scaleX(1); }
.navi__liste > li > a[aria-current="page"] { color: var(--orange-text); }
.navi__liste > li > a[aria-current="page"]::after { transform: scaleX(1); }
.navi__mit-mega { position: static; }
.navi__knopf {
display: flex; align-items: center; gap: .35rem;
padding: .6rem .62rem;
background: none; border: 0; cursor: pointer;
font: inherit; font-size: .93rem; font-weight: 600;
color: var(--navy); white-space: nowrap;
border-radius: var(--rund-s);
position: relative;
transition: color var(--uebergang);
}
.navi__knopf svg { transition: rotate var(--uebergang); opacity: .6; }
.navi__knopf::after {
content: "";
position: absolute; left: .62rem; right: .62rem; bottom: .28rem;
height: 2px; border-radius: 2px; background: var(--orange);
transform: scaleX(0);
transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.navi__knopf:hover, .navi__knopf[aria-expanded="true"] { color: var(--orange-text); }
.navi__knopf:hover::after, .navi__knopf[aria-expanded="true"]::after { transform: scaleX(1); }
.navi__knopf[aria-expanded="true"] svg { rotate: 180deg; opacity: 1; }
.navi__mit-mega:has(a[aria-current="page"]) > .navi__knopf { color: var(--orange-text); }
.navi__mit-mega:has(a[aria-current="page"]) > .navi__knopf::after { transform: scaleX(1); }
.mega {
position: absolute;
left: 0; right: 0; top: 100%;
background: var(--weiss);
border-top: 1px solid var(--linie);
box-shadow: 0 20px 44px rgba(21,47,78,.14);
z-index: 70;
animation: mega-auf 220ms cubic-bezier(.2,.7,.3,1);
}
.mega[hidden] { display: none; }
@keyframes mega-auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega__innen {
width: 100%; max-width: var(--breite);
margin-inline: auto;
padding: var(--luft-s) var(--luft-min) var(--luft-s);
display: grid;
gap: var(--luft-min) var(--luft-s);
grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 700px) {
.mega__innen--1 { grid-template-columns: minmax(0, 1fr); }
.mega__innen--2,
.mega__innen--3,
.mega__innen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.mega__innen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__innen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mega__spalte > ul { max-width: 46ch; }
.mega__spalte { min-width: 0; }
@media (min-width: 1040px) {
.mega__spalte + .mega__spalte { border-left: 1px solid var(--linie); padding-left: var(--luft-s); }
}
.mega__titel {
margin: 0 0 .7rem;
font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--text-leise);
}
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.mega a:not(.knopf) {
display: block;
padding: .6rem .75rem;
border-radius: var(--rund-s);
text-decoration: none;
color: var(--navy);
white-space: normal;
transition: background-color var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.mega a:not(.knopf) span { display: block; font-weight: 700; font-size: .96rem; line-height: 1.3; overflow-wrap: normal; }
.mega a:not(.knopf) small { display: block; margin-top: .2rem; font-size: .84rem; color: var(--text-leise); line-height: 1.45; }
.mega a:not(.knopf):not(:has(small)) { font-weight: 600; font-size: .94rem; padding-block: .5rem; }
.mega a:not(.knopf):hover { background: var(--flaeche); color: var(--orange-text); transform: translateX(3px); }
.mega a:not(.knopf):hover small { color: var(--text-leise); }
.mega a:not(.knopf)[aria-current="page"] { background: rgba(243,146,0,.11); color: var(--orange-text); }
.mega a.mega__mit-bild { display: flex; align-items: flex-start; gap: .85rem; }
.mega a.mega__mit-bild > img {
width: 56px; height: 56px; flex: none;
border-radius: 10px; object-fit: cover;
background: var(--flaeche);
border: 1px solid var(--linie);
transition: transform var(--uebergang), border-color var(--uebergang);
}
.mega a.mega__mit-bild:hover > img { transform: scale(1.05); border-color: var(--orange); }
.mega__text { min-width: 0; }
.mega__vitrine {
--vitrine-breite: 104px;
--vitrine-hoehe: 132px;
position: relative;
grid-column: 1 / -1;
align-self: start;
display: grid;
grid-template-columns: var(--vitrine-breite) minmax(0, 1fr);
gap: var(--luft-min);
align-items: start;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: var(--luft-min);
min-width: 0;
}
.mega__vitrine-bildbox {
position: relative;
align-self: start;
width: var(--vitrine-breite);
flex: none;
}
.mega__vitrine-bild {
width: 100%; height: var(--vitrine-hoehe);
object-fit: cover;
object-position: 72% 55%;
border-radius: 12px;
border: 1px solid var(--linie);
background: var(--weiss);
}
.mega__vitrine-text { min-width: 0; }
.mega__vitrine-text > * + * { margin-top: .5rem; }
.mega__vitrine-siegel {
position: absolute;
right: -18px; bottom: -14px;
width: 54px; height: 54px;
border: 3px solid var(--weiss);
border-radius: 50%;
box-shadow: var(--schatten-1);
object-fit: contain;
background: var(--weiss);
}
.mega__vitrine p { margin: 0; font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.35; }
.mega__vitrine .knopf { clear: both; }
.mega__vitrine small { display: block; max-width: 74ch; font-size: .86rem; color: var(--text-leise); line-height: 1.55; }
.mega__vitrine .knopf { justify-self: start; margin-top: .7rem; }
@media (min-width: 860px) {
.mega__vitrine { align-items: center; }
.mega__vitrine-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--luft-s); align-items: center; }
.mega__vitrine-text > p { grid-column: 1; }
.mega__vitrine-text > small { grid-column: 1; }
.mega__vitrine-text > .knopf { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
.mega__vitrine-text > * + * { margin-top: 0; }
.mega__vitrine-text > small { margin-top: .35rem; }
}
@media (max-width: 520px) {
.mega__vitrine { --vitrine-breite: 84px; --vitrine-hoehe: 108px; }
.mega__vitrine-siegel { width: 44px; height: 44px; right: -14px; bottom: -12px; }
}
.schublade__gruppe > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1rem; border-radius: var(--rund-s);
font-weight: 600; color: var(--navy);
transition: background-color var(--uebergang);
}
.schublade__gruppe > summary::-webkit-details-marker { display: none; }
.schublade__gruppe > summary::after {
content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--navy);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E") center/100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E") center/100% no-repeat;
transition: rotate var(--uebergang);
}
.schublade__gruppe[open] > summary { background: var(--flaeche); }
.schublade__gruppe[open] > summary::after { rotate: 180deg; }
.schublade__gruppe > ul { padding: .2rem 0 .6rem .8rem; border-left: 2px solid var(--linie); margin-left: 1rem; }
.schublade__gruppe > ul a { font-weight: 600; font-size: .96rem; }
.siegelreihe {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--luft-s) var(--luft-m);
}
.siegel { text-align: center; min-width: 0; }
.siegel img { margin-inline: auto; }
.siegel--rund img {
width: 158px; height: 158px;
border-radius: 50%;
box-shadow: var(--schatten-2);
background: var(--weiss);
object-fit: cover;
}
.siegel:not(.siegel--rund) img { width: 205px; height: auto; }
.siegel figcaption {
padding-top: .7rem;
font-size: .8rem; font-weight: 700; line-height: 1.4;
color: var(--text-leise);
}
.kopf__ruf { display: none; white-space: nowrap; }
@media (min-width: 700px) { .kopf__ruf { display: inline-flex; margin-left: .45rem; } }
.klapp {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
margin-left: .35rem; padding: .65rem 1rem; min-height: 46px;
background: var(--navy); color: #fff; border: 0; border-radius: var(--rund-s);
font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
transition: background-color var(--uebergang);
}
.klapp:hover { background: var(--navy-mittel); }
@media (min-width: 960px) { .klapp { display: none; } }
.klapp__balken { display: block; width: 20px; height: 14px; position: relative; flex: none; }
.klapp__balken span {
position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
transition: transform 260ms cubic-bezier(.2,.7,.3,1), opacity 160ms linear;
}
.klapp__balken span:nth-child(1) { top: 0; }
.klapp__balken span:nth-child(2) { top: 6px; }
.klapp__balken span:nth-child(3) { top: 12px; }
.klapp[aria-expanded="true"] .klapp__balken span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.klapp[aria-expanded="true"] .klapp__balken span:nth-child(2) { opacity: 0; }
.klapp[aria-expanded="true"] .klapp__balken span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.schublade {
display: grid; grid-template-rows: 0fr;
border-top: 1px solid transparent;
background: var(--weiss);
transition: grid-template-rows 320ms cubic-bezier(.2,.7,.3,1), border-color var(--uebergang);
overflow: hidden;
}
.schublade > div { overflow: hidden; min-height: 0; }
.schublade[data-offen="ja"] { grid-template-rows: 1fr; border-top-color: var(--linie); }
@media (min-width: 960px) { .schublade { display: none !important; } }
.schublade ul { list-style: none; margin: 0; padding: var(--luft-min) 0 var(--luft-s); display: grid; gap: .25rem; }
.schublade a:not(.knopf) {
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1rem; border-radius: var(--rund-s);
font-weight: 600; color: var(--navy); text-decoration: none;
transition: background-color var(--uebergang), color var(--uebergang);
}
.schublade a:not(.knopf)::after { content: "\2192"; color: var(--linie-stark); transition: transform var(--uebergang), color var(--uebergang); }
.schublade a:not(.knopf):hover { background: var(--flaeche); color: var(--orange-text); }
.schublade a:not(.knopf):hover::after { transform: translateX(4px); color: var(--orange); }
.schublade a:not(.knopf)[aria-current="page"] { background: rgba(243,146,0,.11); color: var(--orange-text); }
.schublade .knopf { margin-top: .8rem; width: 100%; }
.schublade .knopf::after { content: none; }
.sprungmarke {
position: absolute; top: 0; left: 0;
width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
background: var(--navy); color: #fff; z-index: 100;
}
.sprungmarke:focus {
width: auto; height: auto; overflow: visible;
clip: auto; clip-path: none;
padding: .9rem 1.3rem; color: #fff;
}
.aufmacher {
position: relative;
padding-block: var(--luft-l);
background-color: var(--flaeche);
background-image:
radial-gradient(78% 62% at 96% 6%, rgba(243,146,0,.16) 0%, rgba(243,146,0,0) 58%),
radial-gradient(70% 70% at 4% 96%, rgba(21,47,78,.09) 0%, rgba(21,47,78,0) 60%),
linear-gradient(172deg, #ffffff 0%, var(--flaeche) 100%);
overflow: hidden;
}
.aufmacher::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(21,47,78,.09) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
pointer-events: none;
}
.aufmacher > * { position: relative; }
.aufmacher::after {
content: "";
position: absolute;
top: -30%; right: 0;
width: min(52vw, 560px); aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(243,146,0,.22) 0%, rgba(243,146,0,0) 66%);
pointer-events: none;
animation: sonnenstand 18s ease-in-out infinite alternate;
}
@keyframes sonnenstand {
from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
to   { transform: translate3d(-6%, 6%, 0) scale(1.1); opacity: 1; }
}
.vorzeile::before { animation: linie-laden 900ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes linie-laden { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
.aufmacher h1 { margin-bottom: .6rem; }
.aufmacher .lead { margin-bottom: var(--luft-min); max-width: 54ch; }
.aufmacher--schmal { padding-block: var(--luft-m) var(--luft-l); }
.merkzeile { display: flex; flex-wrap: wrap; gap: .55rem; margin: var(--luft-min) 0 0; padding: 0; list-style: none; }
.merkzeile li {
display: inline-flex; align-items: center; gap: .45rem;
background: rgba(255,255,255,.92);
border: 1px solid var(--linie);
border-radius: 999px; padding: .45rem .95rem;
font-size: .85rem; font-weight: 600; color: var(--navy);
box-shadow: var(--schatten-1);
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.merkzeile li:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.merkzeile li::before {
content: ""; width: 1rem; height: 1rem; flex: none;
background: var(--orange-text);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.4 4.2 12.05l1.6-1.6 3.75 3.75 8.65-8.65 1.6 1.6z'/%3E%3C/svg%3E") center/100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.4 4.2 12.05l1.6-1.6 3.75 3.75 8.65-8.65 1.6 1.6z'/%3E%3C/svg%3E") center/100% no-repeat;
}
.aufmacher__bild { position: relative; }
.aufmacher__marke {
position: absolute; left: var(--luft-min); bottom: -1.1rem;
display: flex; align-items: center; gap: .7rem;
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: 14px;
padding: .7rem .95rem;
box-shadow: var(--schatten-2);
font-size: .82rem; font-weight: 700; color: var(--navy); line-height: 1.3;
max-width: calc(100% - var(--luft-min) * 2);
}
.aufmacher__marke img { width: 46px; height: auto; flex: none; }
.aufmacher__marke span { min-width: 0; }
.aufmacher__marke small { display: block; font-weight: 600; color: var(--text-leise); font-size: .76rem; }
.belege { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--luft-s); }
.belege img { max-height: 74px; width: auto; }
.belege__wort { font-size: .88rem; font-weight: 600; color: var(--text-leise); text-align: center; }
.fragen { display: grid; gap: .8rem; }
.frage {
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: var(--rund);
box-shadow: var(--schatten-1);
overflow: hidden;
transition: box-shadow var(--uebergang), border-color var(--uebergang);
}
.frage:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.frage[open] { border-color: var(--orange); box-shadow: var(--schatten-2); }
.frage > summary {
list-style: none; cursor: pointer;
padding: 1.15rem var(--luft-min);
padding-right: 3.6rem;
position: relative;
font-weight: 700; color: var(--navy); font-size: clamp(.95rem, .93rem + .1vw, 1.01rem); line-height: 1.45;
text-wrap: pretty;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
overflow-wrap: break-word;
transition: color var(--uebergang);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:hover { color: var(--orange-text); }
.frage > summary::after {
content: "";
position: absolute; right: var(--luft-min); top: 1.2rem;
width: 1.7rem; height: 1.7rem;
border-radius: 50%;
background: rgba(243,146,0,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a5b00'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E") center/62% no-repeat;
transition: transform 260ms cubic-bezier(.2,.7,.3,1), background-color var(--uebergang);
}
.frage[open] > summary::after { transform: rotate(180deg); background-color: rgba(243,146,0,.26); }
.frage > div { padding: 0 var(--luft-min) 1.35rem; }
.frage[open] > div { animation: auffalten 300ms cubic-bezier(.2,.7,.3,1); }
@keyframes auffalten { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hinweis {
position: relative;
background: var(--flaeche-warm);
border: 1px solid rgba(243,146,0,.34);
border-left: 4px solid var(--orange);
border-radius: 0 var(--rund-s) var(--rund-s) 0;
padding: var(--luft-min);
margin-block: var(--luft-s);
}
.hinweis strong:first-child { display: block; margin-bottom: .35rem; color: var(--navy); }
.band--navy .hinweis { background: rgba(255,255,255,.06); border-color: rgba(243,146,0,.4); border-left-color: var(--orange); }
.band--navy .hinweis strong:first-child { color: var(--weiss); }
.tabellenrolle { margin-block: var(--luft-s); border-radius: var(--rund-s); border: 1px solid var(--linie); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--weiss); color: var(--text); }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
th { background: var(--flaeche); color: var(--navy); font-weight: 700; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
@container (max-width: 430px) {
.tabellenrolle table, .tabellenrolle tbody, .tabellenrolle tr,
.tabellenrolle th, .tabellenrolle td { display: block; width: 100%; }
.tabellenrolle tr { border-bottom: 1px solid var(--linie); }
.tabellenrolle tbody tr:last-child { border-bottom: 0; }
.tabellenrolle th {
border-bottom: 0; padding-bottom: .2rem; background: transparent;
font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
}
.tabellenrolle td { border-bottom: 0; padding-top: 0; padding-bottom: 1rem; }
}
@media (max-width: 560px) {
.tabellenrolle table, .tabellenrolle tbody, .tabellenrolle tr,
.tabellenrolle th, .tabellenrolle td { display: block; width: 100%; }
.tabellenrolle tr { border-bottom: 1px solid var(--linie); }
.tabellenrolle tbody tr:last-child { border-bottom: 0; }
.tabellenrolle th {
border-bottom: 0; padding-bottom: .2rem; background: transparent;
font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
}
.tabellenrolle td { border-bottom: 0; padding-top: 0; padding-bottom: 1rem; }
}
.ruf {
position: relative;
overflow: hidden;
background-color: var(--navy);
background-image:
radial-gradient(90% 130% at 92% 0%, rgba(243,146,0,.28) 0%, rgba(243,146,0,0) 58%),
linear-gradient(140deg, var(--navy-mittel) 0%, var(--navy) 58%, var(--navy-tief) 100%);
color: var(--text-hell);
border-radius: var(--rund);
padding: var(--luft-m);
box-shadow: var(--schatten-3);
}
.ruf h2 { color: #fff; }
.ruf .lead { color: var(--text-hell-leise); }
.ruf a:not(.knopf) { color: #fff; }
.ruf .vorzeile { color: var(--orange-hell); }
.kontaktdaten { list-style: none; margin: var(--luft-min) 0 0; padding: 0; display: grid; gap: 1rem; }
.kontaktdaten li { display: flex; align-items: flex-start; gap: .85rem; }
.kontaktdaten a { font-weight: 700; }
.kontaktdaten svg { width: 22px; height: 22px; flex: none; margin-top: .28rem; color: var(--orange-hell); }
.fuss {
background: var(--navy-tief);
color: #adbecf;
padding-block: var(--luft-m) var(--luft-s);
font-size: .95rem;
border-top: 4px solid var(--orange);
}
.fuss h3 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.fuss a { color: #d3dde8; text-decoration: none; transition: color var(--uebergang), padding-left var(--uebergang); }
.fuss a:hover { color: var(--orange-hell); }
.fuss__raster { display: grid; grid-template-columns: 1fr; gap: var(--luft-s); }
@media (min-width: 640px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--luft-m); } }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fuss__marke img { width: 158px; margin-bottom: 1.1rem; filter: brightness(0) invert(1); }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss__schluss {
margin-top: var(--luft-m); padding-top: var(--luft-min);
border-top: 1px solid rgba(255,255,255,.13);
display: flex; flex-wrap: wrap; gap: .6rem var(--luft-min);
align-items: center; justify-content: space-between;
font-size: .88rem;
}
.fuss__schluss ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.14rem, 1.02rem + .6vw, 1.42rem); margin-top: var(--luft-m); }
.rechtstext h3 { font-size: 1.02rem; margin-top: var(--luft-s); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.35rem; display: grid; gap: .45rem; margin: 0 0 1.15em; }
.rechtstext address { font-style: normal; line-height: 1.75; }
.rechtstext a, .fuss a { overflow-wrap: anywhere; }
.rechtstext .stand { font-size: .9rem; color: var(--text-leise); margin-top: var(--luft-m); }
.krumen { font-size: .85rem; color: var(--text-leise); }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.krumen li:not(:last-child)::after { content: "\203A"; margin-left: .5rem; color: var(--linie-stark); }
.krumen a { color: var(--text-leise); text-decoration-color: var(--linie-stark); }
.krumen a:hover { color: var(--orange-text); }
.nur-fuer-vorleser {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.abstand-oben { margin-top: var(--luft-m); }
.abstand-oben-klein { margin-top: var(--luft-s); }
.lichtkasten {
width: min(94vw, 860px);
max-width: none;
max-height: 92dvh;
padding: 0;
border: 0;
border-radius: var(--rund);
background: var(--weiss);
color: var(--text);
box-shadow: 0 24px 70px rgba(8, 18, 31, .45);
overflow: visible;
}
.lichtkasten::backdrop {
background: rgba(8, 18, 31, .72);
backdrop-filter: blur(3px);
}
.lichtkasten[open] { animation: kasten-auf 240ms cubic-bezier(.2,.7,.3,1); }
@keyframes kasten-auf {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to   { opacity: 1; transform: none; }
}
.lichtkasten figure {
display: flex; flex-direction: column;
max-height: 92dvh;
border-radius: var(--rund);
overflow: hidden;
}
.lichtkasten img {
width: 100%;
min-height: 0;
flex: 1 1 auto;
object-fit: contain;
object-position: center;
background: var(--flaeche);
padding: var(--luft-min);
}
.lichtkasten figcaption {
flex: none;
padding: .95rem var(--luft-s) 1.1rem;
border-top: 1px solid var(--linie);
background: var(--weiss);
font-size: .87rem; line-height: 1.5; color: var(--text-leise);
}
.lichtkasten figcaption strong { display: block; color: var(--navy); font-size: .96rem; margin-bottom: .15rem; }
.lichtkasten__zu {
position: absolute; top: -.85rem; right: -.85rem;
width: 2.6rem; height: 2.6rem;
display: grid; place-items: center;
border: 2px solid var(--weiss);
border-radius: 50%;
background: var(--navy); color: #fff;
cursor: pointer;
box-shadow: var(--schatten-2);
transition: background-color var(--uebergang), transform var(--uebergang);
z-index: 2;
}
.lichtkasten__zu svg { width: 1.05rem; height: 1.05rem; }
.lichtkasten__zu:hover { background: var(--orange); color: #241500; transform: rotate(90deg); }
.lichtkasten__blaettern {
position: absolute; top: 50%; translate: 0 -50%;
width: 2.8rem; height: 2.8rem;
display: grid; place-items: center;
border: 1px solid var(--linie);
border-radius: 50%;
background: rgba(255,255,255,.94); color: var(--navy);
cursor: pointer;
box-shadow: var(--schatten-2);
transition: background-color var(--uebergang), color var(--uebergang);
z-index: 2;
}
.lichtkasten__blaettern svg { width: 1.3rem; height: 1.3rem; }
.lichtkasten__blaettern:hover { background: var(--navy); color: #fff; }
.lichtkasten__blaettern--zurueck { left: -1.4rem; }
.lichtkasten__blaettern--vor     { right: -1.4rem; }
.lichtkasten__zaehler {
position: absolute; left: 50%; bottom: -2.4rem; translate: -50% 0;
margin: 0;
font-size: .84rem; font-weight: 600; color: #e7eef5;
white-space: nowrap;
}
@media (max-width: 700px) {
.lichtkasten { width: 94vw; }
.lichtkasten__zu { top: .55rem; right: .55rem; width: 2.3rem; height: 2.3rem; }
.lichtkasten__blaettern--zurueck { left: .4rem; }
.lichtkasten__blaettern--vor     { right: .4rem; }
.lichtkasten__blaettern { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,.96); }
.lichtkasten__zaehler { bottom: -1.9rem; }
}
.dokumente a[aria-haspopup="dialog"] { cursor: zoom-in; }
.galerie--befunde figcaption {
padding: 1rem var(--luft-min) 1.15rem;
font-size: .87rem;
line-height: 1.55;
}
.galerie--befunde figcaption strong {
display: block;
margin-bottom: .3rem;
color: var(--navy);
font-size: .97rem;
line-height: 1.35;
}
.galerie--befunde a { display: block; position: relative; cursor: zoom-in; }
.galerie--befunde a::after {
content: "";
position: absolute; right: .85rem; bottom: .85rem;
width: 2.2rem; height: 2.2rem;
border-radius: 50%;
background: rgba(21,47,78,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8m3.7 9.1 1.4-1.4 5.3 5.3-1.4 1.4zM9 7h2v2h2v2h-2v2H9v-2H7V9h2z'/%3E%3C/svg%3E") center/56% no-repeat;
opacity: 0; transform: scale(.85) translateY(4px);
transition: opacity var(--uebergang), transform var(--uebergang);
}
.galerie--befunde figure:hover a::after,
.galerie--befunde a:focus-visible::after { opacity: 1; transform: none; }
.galerie--befunde figure { position: relative; }
.galerie--befunde figure::before {
content: "";
position: absolute; left: 0; top: 0; z-index: 1;
width: 0; height: 0;
border-top: 2.6rem solid var(--orange);
border-right: 2.6rem solid transparent;
opacity: .92;
}
.galerie--befunde figure::after {
content: "";
position: absolute; left: .5rem; top: .5rem; z-index: 2;
width: 1.05rem; height: 1.05rem;
background: #241500;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 15.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4M11 9h2v6h-2z'/%3E%3C/svg%3E") center/100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 15.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4M11 9h2v6h-2z'/%3E%3C/svg%3E") center/100% no-repeat;
}
li { text-wrap: pretty; }
.formular {
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: var(--rund);
box-shadow: var(--schatten-1);
padding: var(--luft-s);
min-width: 0;
}
.formular__stand { min-width: 0; }
.formular__stand iframe { display: block; width: 100%; border: 0; }
.formular[data-zustand="wartet"] .formular__stand,
.formular[data-zustand="laedt"]  .formular__stand { min-height: 460px; }
.formular__laden {
display: flex; align-items: center; gap: .6rem;
margin-bottom: var(--luft-min);
font-size: .95rem; color: var(--text-leise);
}
.formular__laden::before {
content: ""; flex: none;
width: 15px; height: 15px; border-radius: 50%;
border: 2px solid var(--linie-stark); border-top-color: var(--orange);
animation: formular-dreht 900ms linear infinite;
}
@keyframes formular-dreht { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
.formular__laden::before { animation: none; }
}
.formular[data-zustand="fertig"] .formular__laden,
.formular[data-zustand="fehler"] .formular__laden { display: none; }
.formular[data-zustand="fehler"] .formular__stand { display: none; }
.formular__ausweg {
background: var(--flaeche-warm);
border: 1px solid rgba(243,146,0,.34);
border-left: 4px solid var(--orange);
border-radius: 0 var(--rund-s) var(--rund-s) 0;
padding: var(--luft-min);
}
.formular__ausweg p:last-child { margin-bottom: 0; }
.formular__ausweg .liste { margin-block: .75rem; }
.partner {
display: flex; flex-wrap: wrap;
align-items: center; justify-content: center;
gap: var(--luft-s) var(--luft-m);
margin-top: var(--luft-s);
}
.partner img {
height: 44px; width: auto;
max-width: 100%; object-fit: contain;
}
@media (max-width: 480px) {
.partner { gap: var(--luft-min) var(--luft-s); }
.partner img { height: 34px; }
}
.partner__wort {
margin: 0; text-align: center;
font-size: .92rem; font-weight: 600; color: var(--text-leise);
}
.rechtstext code {
font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
font-size: .92em;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: 5px;
padding: .06em .38em;
overflow-wrap: anywhere;
}
.paar--formular { align-items: start; }
@media (min-width: 900px) {
.paar--formular { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--luft-m); }
}
@media (min-width: 1040px) {
.ablauf--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ablauf--3 li:not(:last-child)::after {
content: "";
position: absolute; top: 1.35rem; left: 3.1rem; right: -1rem;
height: 2px;
background: repeating-linear-gradient(90deg, var(--linie-stark) 0 6px, transparent 6px 12px);
}
}
.partnerblock {
margin-top: var(--luft-m);
padding-top: var(--luft-m);
border-top: 1px solid var(--linie);
}
.abstand-oben-mini { margin-top: var(--luft-min); }
.abstand-oben-satz { margin-top: 1rem; }
.ohne-abstand-unten { margin-bottom: 0; }
.mittig-block { margin-inline: auto; }
.portraet { width: min(240px, 100%); margin-inline: auto; }
.siegel-mini { width: 46px; border-radius: 50%; }
.krumen--oben { padding-top: 0; padding-bottom: var(--luft-s); }
@media (max-width: 640px) {
.bild-rahmen img,
.galerie img {
aspect-ratio: auto;
height: 200px;
object-fit: cover;
}
.portraet { width: auto; height: 200px; object-fit: cover; }
.dokumente img {
aspect-ratio: auto;
height: 200px;
object-fit: cover;
object-position: center top;
}
}
.fuss__schwester a {
text-decoration: underline;
text-decoration-color: rgba(211,221,232,.55);
text-underline-offset: .18em;
}
.fuss__schwester a:hover { text-decoration-color: var(--orange); }
.formular__hinweis {
font-size: .88rem;
line-height: 1.55;
color: var(--text-leise);
background: var(--flaeche);
border: 1px solid var(--linie);
border-left: 3px solid var(--orange);
border-radius: var(--rund-klein, 6px);
padding: .85rem 1rem;
margin: 0 0 1.1rem;
}
.formular__hinweis strong { color: var(--text); }