/**
 * site-kit.css
 * Nur die Klassen, die durch den Einstellungs-Tab der Blöcke entstehen.
 * Das Design der Seite bleibt im eigenen Stylesheet.
 */

:root {
  --container: 1280px;
  --abstand-klein: 2rem;
  --abstand-normal: 4rem;
  --abstand-gross: 7rem;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container--schmal { max-width: 46rem; }
.container--normal { max-width: var(--container); }
.container--breit  { max-width: 1600px; }
.container--voll   { max-width: none; padding-inline: 0; }

/* Sections -------------------------------------------------------- */
.section { position: relative; }
.section__inner { position: relative; z-index: 1; }

.section--pt-keiner { padding-top: 0; }
.section--pt-klein  { padding-top: var(--abstand-klein); }
.section--pt-normal { padding-top: var(--abstand-normal); }
.section--pt-gross  { padding-top: var(--abstand-gross); }
.section--pb-keiner { padding-bottom: 0; }
.section--pb-klein  { padding-bottom: var(--abstand-klein); }
.section--pb-normal { padding-bottom: var(--abstand-normal); }
.section--pb-gross  { padding-bottom: var(--abstand-gross); }

.section--bg-hell    { background: var(--farbe-hell, #f5f5f5); }
.section--bg-dunkel  { background: var(--farbe-dunkel, #111); color: #fff; }
.section--bg-primaer { background: var(--farbe-primaer, #0b5); color: #fff; }
.section--bg-akzent  { background: var(--farbe-akzent, #f60); color: #fff; }
.section[style*="--section-bg"] { background: var(--section-bg); }

.section__bg { position: absolute; inset: 0; overflow: hidden; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section__overlay { position: absolute; inset: 0; background: #000; }
.section--bg-fixed .section__bg img { position: fixed; }

@media (max-width: 767px) { .section--only-desktop { display: none; } }
@media (min-width: 768px) { .section--only-mobil { display: none; } }

/* Consent --------------------------------------------------------- */
.consent { position: fixed; z-index: 9999; inset-inline: 0; bottom: 0; }
.consent--box { inset-inline: auto 1rem; max-width: 26rem; bottom: 1rem; }
.consent--modal { inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.5); }
.consent__inner { background: #fff; color: #111; padding: 1.5rem; border-radius: var(--radius, 8px); box-shadow: 0 10px 40px rgb(0 0 0 / 0.2); max-height: 85vh; overflow: auto; }
.consent__kategorie { display: flex; gap: .75rem; padding: .5rem 0; }
.consent__buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.embed { position: relative; aspect-ratio: var(--verhaeltnis, 16/9); }
.embed iframe { width: 100%; height: 100%; border: 0; }
.embed__blocker { position: absolute; inset: 0; display: grid; place-content: center; gap: 1rem; text-align: center; padding: 1.5rem; background: var(--farbe-hell, #eee); }
.embed.is-erlaubt .embed__blocker { display: none; }

.formular__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10000; background: #fff; padding: .5rem 1rem; }