/* Modernisierung 03.10.2026 (User: „wir müssen noch Sachen verbessern, kannst du alles moderner machen“).
   Gilt für alle Seiten und lädt nach styles.css + seiten.css. Taste-Skill: ein Akzent, Radius 0, keine Eyebrows, kein Glow,
   Bewegung nur mit Zweck und mit prefers-reduced-motion. Vorstand: website/design/vor-modern-2026-10-03/. */

/* ---------- Grundlagen ---------- */
:root { interpolate-size: allow-keywords; }
html { scrollbar-color: #2c2f2e var(--bg); }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.btn .ico { width: 1.25em; height: 1.25em; margin-right: 10px; flex: none; }
.btn { transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(1px) scale(.985); }

/* Seitenwechsel: weich überblenden, die Kopfzeile bleibt stehen (Cross-Document View Transitions; ältere Browser: normaler Wechsel) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: kopf; }
::view-transition-old(root) { animation: vtAus .2s ease both; }
::view-transition-new(root) { animation: vtEin .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vtAus { to { opacity: 0; } }
@keyframes vtEin { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Kopfzeile ---------- */
.site-header.is-solid { background: rgba(14, 15, 15, .8); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
/* offenes Menü (04.10., User: „beim Runterscrollen passiert was Schreckliches mit dem Burger-Menü“): backdrop-filter an der Kopfzeile macht
   sie zum Bezugsrahmen für das fixierte Vollbild-Menü (dann nur 72 px hoch, ohne Hintergrund). Solange das Menü offen ist: kein Milchglas,
   Kopfzeile deckend, Handy-Leiste weg (lag mit z-index 60 über dem Menü). Klasse setzt main.js, :has als Rückfall. */
.site-header.menue-offen, .site-header:has(.nav.is-open) { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menue-offen .mobile-bar, body:has(.nav.is-open) .mobile-bar { visibility: hidden; }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta .ico { width: 1.15em; height: 1.15em; margin-right: 8px; }
.mobile-bar .btn .ico { width: 1.2em; height: 1.2em; margin-right: 8px; }

/* ---------- Brotkrumen ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .88rem; margin-bottom: clamp(18px, 2vw, 28px); }
.crumbs span { color: var(--text); }
.crumbs-pfeil { width: 12px; height: 12px; color: var(--muted); flex: none; }

/* ---------- Unterseiten-Hero: Text links, Foto rechts im Rahmen ---------- */
.hero.hero-seite { min-height: 0; display: block; padding: calc(var(--header-h) + clamp(28px, 4.4vw, 64px)) 0 clamp(56px, 7vw, 104px); }
.hero-seite .smoke-hero { opacity: .6; }
.hs-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hs-text { min-width: 0; }
.hs-titel { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; margin: 0 0 clamp(20px, 2.4vw, 30px); overflow-wrap: break-word; hyphens: manual; }
.hs-haupt { display: block; font-size: clamp(2.7rem, 5.6vw, 5.4rem); }
.hs-unter { display: block; font-size: clamp(1.3rem, 2.1vw, 1.95rem); font-weight: 800; line-height: 1.05; color: var(--muted); margin-top: .45em; }
.hero-seite .hero-sub { max-width: 58ch; font-size: clamp(1.05rem, 1.25vw, 1.16rem); line-height: 1.65; color: #d6d3cc; margin-bottom: 2rem; }
.hero-seite .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hs-bild { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: min(74vh, 720px); overflow: hidden; background: var(--bg-3); justify-self: end; }
.hs-bild picture, .hs-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (prefers-reduced-motion: no-preference) {
  .js .hs-bild[data-intro] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
  .js .is-loaded .hs-bild[data-intro] { clip-path: inset(0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .15s; }
  .js .is-loaded .hs-bild img { animation: hsZoom 1.8s var(--ease) .15s both; }
}
@keyframes hsZoom { from { transform: scale(1.12); } }
@media (max-width: 900px) {
  .hs-raster { grid-template-columns: 1fr; }
  .hs-bild { aspect-ratio: 4 / 3; max-height: none; }
}
@media (max-width: 767px) {
  .hero-seite .hero-ctas .btn { width: 100%; }
  .hs-haupt { font-size: 12.5vw; }
}

/* ---------- Sprungleiste „Auf dieser Seite“ ---------- */
.sprung { border-block: 1px solid var(--line); }
.sprung-innen { display: flex; align-items: center; gap: 12px 24px; padding-block: 14px; }
.sprung-titel { margin: 0; flex: none; font-size: .9rem; color: var(--muted); }
.sprung-liste { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-block: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.sprung-liste::-webkit-scrollbar { display: none; }
.sprung-liste li { flex: none; scroll-snap-align: start; }
.sprung-liste a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; font-size: .9rem; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.sprung-liste a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 767px) { .sprung-innen { flex-direction: column; align-items: stretch; } }

/* ---------- Lesespalte: Überschrift über dem Text, große Schrift, Luft statt Linien ---------- */
.block { padding: clamp(56px, 7vw, 104px) 0 0; border-top: 0; background: none; }
.block:last-of-type { padding-bottom: clamp(56px, 7vw, 104px); }
.block-alt { background: none; }
.wrap.block-spalte { max-width: calc(46rem + 2 * var(--gutter)); }
.block-title { position: static; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: .94; margin: 0 0 clamp(18px, 2vw, 26px); max-width: 18ch; }
.prose { max-width: none; font-size: 1.1rem; line-height: 1.75; color: #d2cfc8; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: 2em; }
.prose table { margin-block: 1.6em; font-size: .98rem; border-top: 1px solid var(--line-strong); }
.prose th { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; color: var(--text); }
.prose td, .prose th { padding: 13px 16px 13px 0; }
.prose .pic { margin-block: 2em; }
.prose .pic picture { overflow: hidden; background: var(--bg-3); }
.quote-inline { margin: 2em 0; padding: 22px 24px; border-top: 0; border-left: 3px solid var(--accent); background: var(--bg-2); }
.quote-inline figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted); }
.quote-inline figcaption strong { color: var(--text); margin-right: 8px; }
.prose .pic-hoch img { width: auto; max-width: 100%; max-height: min(78vh, 760px); margin-inline: auto; }
.prose .pic-hoch picture { background: none; }
@media (min-width: 1100px) {
  .prose > .pic-quer { margin-inline: -8vw; }   /* Querformate dürfen breiter sein als die Textspalte */
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .block-title, .prose > .pic { animation: aufsteigen linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes aufsteigen { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- Häufige Fragen: öffnen sich weich ---------- */
.faq-list summary { transition: color .2s var(--ease); }
.faq-list details::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq-list details::details-content { transition: none; } }

/* ---------- Anfrage-Band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 9vw, 140px) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.cta-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.cta-band .cta-title { font-size: clamp(2.8rem, 6.4vw, 6.2rem); line-height: .86; max-width: 12ch; margin: 0 0 18px; }
.cta-band .muted { margin: 0; font-size: 1.1rem; }
.cta-knoepfe { display: grid; gap: 12px; }
.cta-zeichen { position: absolute; z-index: -1; right: max(-4vw, calc((100vw - var(--max)) / 2 - 2vw)); top: 50%; width: clamp(260px, 30vw, 460px); transform: translateY(-50%) rotate(-8deg); opacity: .045; pointer-events: none; }
@media (max-width: 900px) {
  .cta-raster { grid-template-columns: 1fr; align-items: start; }
  .cta-knoepfe .btn { width: 100%; }
}

/* ---------- Fußzeile: Marke + Schnellkontakt, Linkspalten, großer Schriftzug ---------- */
.site-footer { padding: clamp(64px, 8vw, 112px) 0 0; overflow: hidden; }
.fuss-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.footer-brand img { width: 46px; }
.footer-brand p { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; }
.footer-brand .muted { display: block; font-family: var(--f-body); font-weight: 400; text-transform: none; font-size: .92rem; margin-top: 4px; }
.fuss-kontakt { display: flex; flex-wrap: wrap; gap: 8px; }
.fuss-kontakt a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; font-size: .95rem;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fuss-kontakt a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.fuss-kontakt .ico { width: 20px; height: 20px; color: var(--accent); }
.fuss-kontakt a:hover .ico { color: var(--bg); }
.fuss-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 48px; margin-bottom: 0; border-bottom: 0; }
.footer-inner { padding: 22px 0; border-top: 1px solid var(--line); }
.fuss-wort { margin: 12px 0 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: min(17vw, 16rem); line-height: .76; letter-spacing: -.01em;
  color: var(--bg-3); white-space: nowrap; text-align: center; user-select: none; pointer-events: none; }
@media (max-width: 900px) { .fuss-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .site-footer { padding-bottom: 0; }
  .fuss-wort { margin-bottom: 76px; }
  .fuss-kontakt { width: 100%; }
  .fuss-kontakt li { flex: 1 1 45%; }
  .fuss-kontakt a { width: 100%; padding: 0 12px; gap: 8px; font-size: .9rem; white-space: nowrap; }
}