/* ==========================================================================
   s-media v2 – Komplett-Redesign (Vorschau, 22.10.2026, Website Willy)
   Eigenständiges Stylesheet. Farben ausschließlich aus tokens.css
   (#F7FAFC, #ffffff, #153059, #C1121F, #9E0E19, #E8EEF5) + Abstufungen/Transparenz.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("assets/v2/fonts/inter-var-opsz-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #F7FAFC;
  --white: #ffffff;
  --navy: #153059;
  --navy-2: color-mix(in srgb, #153059 88%, #ffffff);
  --navy-3: color-mix(in srgb, #153059 78%, #ffffff);
  --red: #C1121F;
  --red-dark: #9E0E19;
  --wash: #E8EEF5;
  --text: #153059;
  --muted: color-mix(in srgb, #153059 74%, #F7FAFC);
  --on-dark: #ffffff;
  --on-dark-muted: color-mix(in srgb, #ffffff 80%, #153059);
  --line: color-mix(in srgb, #153059 12%, transparent);
  --line-dark: color-mix(in srgb, #ffffff 16%, transparent);
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
  --r-xl: 32px;
  --r-lg: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gnav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v2 {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.5;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--red-dark); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.sec-dark :focus-visible { outline-color: #ffffff; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.center { text-align: center; }
.narrow { max-width: 820px; }

/* --- Globale Navigation: schlank, sticky, transluzent ------------------- */
.gnav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, #F7FAFC 80%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gnav { background: #F7FAFC; } }
@media (prefers-reduced-transparency: reduce) { .gnav { background: #F7FAFC; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.gnav-inner { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; height: var(--gnav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; line-height: 0; border-radius: 8px; }
.brand-logo { width: auto; height: 54px; }
.nav-desktop { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-desktop a { display: block; padding: 0.45rem 0.85rem; border-radius: 999px; color: var(--text); font-size: 0.82rem; font-weight: 500; text-decoration: none; letter-spacing: 0.005em; }
.nav-desktop a:hover { background: color-mix(in srgb, #153059 7%, transparent); }
.nav-desktop a[aria-current="page"] { font-weight: 650; }
.nav-desktop li:last-child a { background: var(--red); color: #ffffff; font-weight: 600; }
.nav-desktop li:last-child a:hover { background: var(--red-dark); }
.menu-toggle { display: none; min-height: 40px; padding: 0.4rem 0.95rem; border: 0; border-radius: 999px; background: color-mix(in srgb, #153059 8%, transparent); color: var(--text); font: 600 0.9rem/1 var(--font); cursor: pointer; }
.menu-toggle:hover { background: color-mix(in srgb, #153059 14%, transparent); }
@media (max-width: 760px) { .nav-desktop { display: none; } .menu-toggle { display: inline-flex; align-items: center; } }

.nav-drawer { display: none; }
.nav-drawer.is-open, .nav-drawer.is-open[hidden] { display: block !important; }
.nav-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #153059 40%, transparent); }
.nav-drawer-panel { position: fixed; z-index: 61; top: 0; right: 0; height: 100%; width: min(320px, 88vw); background: #ffffff; padding: 1rem 1.1rem 1.5rem; display: flex; flex-direction: column; box-shadow: -12px 0 40px color-mix(in srgb, #153059 18%, transparent); border-radius: 24px 0 0 24px; }
.nav-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.nav-drawer-head h2 { font-size: 1rem; }
.nav-drawer-close { width: 44px; height: 44px; border: 0; border-radius: 999px; background: color-mix(in srgb, #153059 7%, transparent); color: var(--text); font-size: 1.5rem; cursor: pointer; }
.nav-mobile { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.nav-mobile a { display: block; padding: 0.85rem 1rem; border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { background: color-mix(in srgb, #153059 7%, transparent); }

/* --- Lokale Unter-Leiste (Angebotsseite) -------------------------------- */
.lnav { position: sticky; top: var(--gnav-h); z-index: 45; background: color-mix(in srgb, #ffffff 82%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid var(--line); }
@media (prefers-reduced-transparency: reduce) { .lnav { background: #ffffff; backdrop-filter: none; } }
.lnav-inner { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lnav .back { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.lnav .back a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.lnav .back a:hover { color: var(--red-dark); }
.lnav-cta { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.lnav-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lnav-cta a { padding: 0.45rem 1rem; min-height: 36px; font-size: 0.82rem; }
@media (max-width: 640px) { .lnav .back { font-size: 0.92rem; } }

/* --- Typo-System im Apple-Stil ------------------------------------------ */
.h-hero { font-size: clamp(3rem, 9.5vw, 7.5rem); font-weight: 750; line-height: 1.02; letter-spacing: -0.045em; }
.h-page { font-size: clamp(2.3rem, 6.4vw, 5.25rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.04em; max-width: 15ch; margin-inline: auto; }
.h-sec { font-size: clamp(2.1rem, 5.6vw, 4.5rem); font-weight: 750; line-height: 1.06; letter-spacing: -0.035em; }
.sub { margin: 1.1rem auto 0; max-width: 40rem; font-size: clamp(1.08rem, 2vw, 1.45rem); line-height: 1.45; font-weight: 500; color: var(--muted); }
.sec-dark .sub { color: var(--on-dark-muted); }
.grad-text { background: linear-gradient(100deg, #153059 0%, #153059 45%, #C1121F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
@media (forced-colors: active) { .grad-text { color: CanvasText; background: none; } }

/* --- Pillen-Buttons ------------------------------------------------------ */
.pill, .btn, .card-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0.7rem 1.4rem; border-radius: 999px; border: 0;
  background: var(--red); color: #ffffff; font: 500 1rem/1.2 var(--font); letter-spacing: 0;
  text-decoration: none; text-transform: none; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.pill:hover, .btn:hover, .card-pill:hover { background: var(--red-dark); color: #ffffff; text-decoration: none; }
a.btn:visited, .card-pill:visited { color: #ffffff; }
.pill-lg { font-size: 1.08rem; padding: 0.85rem 1.7rem; }
a.btn.btn-outline, a.btn.btn-outline:visited { background: transparent; color: var(--red-dark); box-shadow: inset 0 0 0 1.5px var(--red-dark); }
a.btn.btn-outline:hover { background: var(--red-dark); color: #ffffff; }

/* --- Abschnitte hell / navy --------------------------------------------- */
.sec { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.sec-light { background: var(--bg); }
.sec-white { background: #ffffff; }
.sec-dark { background: var(--navy); color: var(--on-dark); }
.sec-dark a:not(.btn):not(.pill):not(.card-pill):not(.tile) { color: #ffffff; }
.sec-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* --- Startseite: Hero ---------------------------------------------------- */
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.hero-logo { width: clamp(150px, 16vw, 210px); height: auto; margin: 0 auto 1.5rem; }
.hero .tagline { margin: 1.4rem auto 0; max-width: 44rem; font-size: clamp(1.08rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 500; color: var(--muted); }
.stage { width: min(1280px, 100% - 1.5rem); margin: clamp(2rem, 5vw, 3.5rem) auto 0; }
.stage img { width: 100%; border-radius: var(--r-xl); }
.hero .stage img { background: var(--wash); }

/* --- Angebote: große Kacheln (Desktop Grid, Mobil Karussell) ------------- */
.tiles { --cx-w: min(84%, 380px); }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: #ffffff; color: var(--text); text-decoration: none;
  min-height: 100%; isolation: isolate;
  transition: transform .5s var(--ease);
}
.tile:hover { transform: scale(1.012); }
.tile-copy { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem) 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.tile-title { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); }
.tile-sub { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 26rem; }
.tile .card-pill { margin-top: 0.75rem; padding: 0.5rem 1.1rem; min-height: 36px; font-size: 0.92rem; }
.tile-img { margin-top: auto; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wash); transition: transform .8s var(--ease); }
.tile:hover .tile-img { transform: scale(1.03); }
.tile:focus-visible { outline-offset: 4px; border-radius: var(--r-xl); }

/* --- GEO-Moment ---------------------------------------------------------- */
.geo .lead { margin: 1.5rem auto 0; max-width: 46rem; font-size: clamp(1.1rem, 2.1vw, 1.55rem); line-height: 1.5; font-weight: 500; color: var(--text); }
.geo .pill { margin-top: 2rem; }
.geo .stage { max-width: 1100px; }
.geo .stage img { box-shadow: 0 30px 80px color-mix(in srgb, #153059 25%, transparent); }

/* --- Karussell (scroll-snap) -------------------------------------------- */
.cx { position: relative; }
.cx-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--cx-w, min(82%, 380px));
  gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--cx-pad);
  padding: 0.5rem var(--cx-pad) 1.25rem; margin: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  --cx-pad: max(1.25rem, calc((100vw - var(--wrap)) / 2));
}
.cx-track::-webkit-scrollbar { display: none; }
.cx-track > * { scroll-snap-align: start; min-width: 0; }
.cx-track:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
@media (prefers-reduced-motion: no-preference) { .cx-track { scroll-behavior: smooth; } }
.cx-ctrl { width: min(var(--wrap), 100% - 2.5rem); margin: 0.75rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cx-dots { display: flex; gap: 0.15rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, #153059 7%, transparent); }
.sec-dark .cx-dots { background: color-mix(in srgb, #ffffff 12%, transparent); }
.cx-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.cx-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, #153059 40%, transparent); transition: width .3s var(--ease), background-color .3s; }
.sec-dark .cx-dot::before { background: color-mix(in srgb, #ffffff 50%, transparent); }
.cx-dot[aria-current="true"]::before { width: 22px; background: var(--navy); }
.sec-dark .cx-dot[aria-current="true"]::before { background: #ffffff; }
.cx-dot[aria-current="true"] { width: 36px; }
.cx-arrows { display: flex; gap: 0.6rem; }
.cx-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: color-mix(in srgb, #153059 8%, transparent); color: var(--navy); transition: background-color .2s, opacity .2s; }
.cx-btn:hover:not(:disabled) { background: color-mix(in srgb, #153059 16%, transparent); }
.cx-btn:disabled { opacity: 0.35; cursor: default; }
.cx-btn svg { width: 20px; height: 20px; }
.sec-dark .cx-btn { background: color-mix(in srgb, #ffffff 14%, transparent); color: #ffffff; }
.sec-dark .cx-btn:hover:not(:disabled) { background: color-mix(in srgb, #ffffff 24%, transparent); }
@media (max-width: 760px) { .cx-arrows { display: none; } .cx-ctrl { justify-content: center; } }
.cx[data-carousel="mobile"] .cx-ctrl { display: none; }
@media (min-width: 761px) {
  .cx[data-carousel="mobile"] .cx-track { display: grid; grid-auto-flow: row; overflow: visible; padding: 0; width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; scroll-snap-type: none; }
  .cx[data-carousel="mobile"] .cx-track.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx[data-carousel="mobile"] .cx-track.cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .cx[data-carousel="mobile"] .cx-ctrl { display: flex; } }

/* --- Warum-Karten ("Highlights") --------------------------------------- */
.why { --cx-w: min(80%, 360px); counter-reset: why; }
.why-card { counter-increment: why; border-radius: var(--r-lg); background: var(--navy-2); padding: 2rem 1.75rem 2.2rem; min-height: 100%; border: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 0.7rem; }
.why-card::before { content: counter(why, decimal-leading-zero); font-size: 3.2rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1; color: color-mix(in srgb, #ffffff 92%, #153059); margin-bottom: 1.5rem; }
.why-card h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.why-card p { color: var(--on-dark-muted); font-size: 1.02rem; }

/* --- Kontakt-Finale ------------------------------------------------------ */
.finale p { margin: 1.1rem auto 0; max-width: 34rem; font-size: clamp(1.08rem, 2vw, 1.4rem); color: var(--muted); }
.sec-dark.finale p { color: var(--on-dark-muted); }
.finale .pill { margin-top: 2rem; }

/* --- Footer -------------------------------------------------------------- */
.footer { background: var(--wash); color: var(--muted); font-size: 0.85rem; }
.footer-inner { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; padding: 1.75rem 0 2.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--line); }
.footer a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, #153059 30%, transparent); }
.footer a:hover { color: var(--red-dark); }

/* ===================== WEBDESIGN-SEITE ================================= */
.phero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 0; overflow: hidden; }
.phero .lede { margin: 1.4rem auto 0; max-width: 42rem; font-size: clamp(1.08rem, 2vw, 1.45rem); line-height: 1.45; font-weight: 500; color: var(--muted); }
.speed-badge { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.15rem 0.5rem; margin: 1.5rem auto 0; padding: 0.55rem 1.1rem; border-radius: 999px; background: color-mix(in srgb, #C1121F 10%, #ffffff); border: 1px solid color-mix(in srgb, #C1121F 22%, transparent); font-weight: 650; font-size: 0.98rem; }
.speed-badge small { font-weight: 450; font-size: 0.85rem; color: color-mix(in srgb, #153059 88%, #ffffff); }
.phero .cta-inline { margin: 1.6rem 0 0; }
.phero .cta-inline .card-pill { font-size: 1.08rem; padding: 0.85rem 1.7rem; }
.phero .stage { margin-bottom: 0; }
.phero .stage img { border-radius: var(--r-xl) var(--r-xl) 0 0; }

.section-intro { margin: 1.2rem auto 0; max-width: 44rem; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.5; color: var(--muted); }
.sec-dark .section-intro { color: var(--on-dark-muted); }
.sec-dark .section-intro strong { color: #ffffff; }
.media-figure { margin: 0 auto; width: min(1100px, 100% - 2.5rem); }
.media-figure img { border-radius: var(--r-xl); background: var(--wash); }
.duo { width: min(var(--wrap), 100% - 2.5rem); margin: 1.25rem auto 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1.15fr 1fr; } }
.feature { border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.5rem); }
.feature h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.feature p { margin-top: 0.6rem; font-size: 1.02rem; }
.feature-highlight { background: #ffffff; color: var(--text); }
.feature-highlight p { color: var(--muted); }
.feature-highlight .btn { margin-top: 0.4rem; }
.feature-highlight p:has(> .btn) { margin-top: 1.1rem; }
.feature-tag { display: inline-block; margin-bottom: 0.9rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, #C1121F 10%, #ffffff); color: var(--red-dark); font-size: 0.8rem; font-weight: 650; letter-spacing: 0.02em; }
.feature-speed { font-weight: 600; color: var(--text) !important; font-size: 0.95rem !important; }
.feature-dark { background: var(--navy-2); border: 1px solid var(--line-dark); color: #ffffff; }
.feature-dark p { color: var(--on-dark-muted); }
.note { width: min(var(--wrap), 100% - 2.5rem); margin: 1.5rem auto 0; text-align: center; font-size: 0.88rem; color: var(--on-dark-muted); }

.cards3 { --cx-w: min(82%, 360px); }
.card3 { background: #ffffff; border-radius: var(--r-xl); padding: 2rem 1.75rem; min-height: 100%; box-shadow: 0 1px 0 var(--line); }
.card3 h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.card3 p { margin-top: 0.7rem; color: var(--muted); font-size: 1.02rem; }
.card3 .feature-tag { margin: 0 0.4rem 0 0; vertical-align: 0.2em; }
.card3::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 1.4rem; background: linear-gradient(135deg, #153059, color-mix(in srgb, #153059 70%, #C1121F)); }
.card3:nth-child(2)::before { background: linear-gradient(135deg, #C1121F, #9E0E19); }

/* Details in Karussell-Karten: immer offen, ohne Marker */
details.fold > summary, details.acc > summary { list-style: none; }
details.fold > summary::-webkit-details-marker, details.acc > summary::-webkit-details-marker { display: none; }
.cx details.fold > summary { pointer-events: none; }
@media (min-width: 761px) { details.fold > summary { cursor: default; } }
@media (max-width: 760px) {
  .duo details.fold > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
  .duo details.fold > summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, #ffffff 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
  .duo details.fold[open] > summary::after { transform: rotate(45deg); }
}

/* Ablauf */
.steps-band { width: min(var(--wrap), 100% - 2.5rem); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; background: #ffffff; border-radius: var(--r-xl); overflow: hidden; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.steps-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; background: var(--wash); }
.steps-band h3 { margin: 1.75rem 1.5rem 1.4rem; text-align: center; font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 750; letter-spacing: -0.03em; }
.steps-cond { display: block; margin-top: 0.45rem; font-size: 0.95rem; font-weight: 450; letter-spacing: 0; color: var(--muted); }
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0 1.5rem; display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
.steps li { counter-increment: st; position: relative; padding-left: 3rem; color: var(--muted); font-size: 0.98rem; line-height: 1.4; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: -0.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--navy); color: #ffffff; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; }
.steps li strong { display: block; color: var(--text); font-weight: 650; }
@media (min-width: 761px) {
  .steps { grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 1.25rem; padding: 0 2rem; text-align: center; }
  .steps li { padding: 3.2rem 0 0; }
  .steps li::before { left: 50%; transform: translateX(-50%); top: 0; width: 2.5rem; height: 2.5rem; }
  .steps li:last-child::before { background: var(--red); }
}

/* Beispiele-Karussell */
.work { --cx-w: min(86%, 780px); }
.work-item { display: flex; flex-direction: column; background: var(--navy-2); border: 1px solid var(--line-dark); border-radius: var(--r-xl); overflow: hidden; min-height: 100%; }
.work-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-3); }
.work-item h3 { margin: 1.5rem 1.6rem 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.work-item p { margin: 0.55rem 1.6rem 0; color: var(--on-dark-muted); font-size: 1.02rem; }
.work-item .work-demo { margin: auto 1.6rem 1.6rem; padding-top: 1.25rem; }

/* FAQ-Akkordeon */
.acc-list { width: min(860px, 100% - 2.5rem); margin: 0 auto; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0.25rem; min-height: 44px; }
.acc-item summary h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.acc-item summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, #153059 7%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153059' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .35s var(--ease); }
.acc-item details[open] summary::after { transform: rotate(45deg); }
.acc-item p { padding: 0 3.5rem 1.5rem 0.25rem; color: var(--muted); font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  body.v2 { interpolate-size: allow-keywords; }
  details.acc::details-content, .duo details.fold::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
  details.acc[open]::details-content, .duo details.fold[open]::details-content { block-size: auto; }
}

/* --- Cookie-Hinweis (Funktion aus cookies.js, Optik neu) ---------------- */
.cookie-banner { position: fixed; z-index: 70; right: 1rem; bottom: 1rem; width: min(30rem, calc(100vw - 2rem)); padding: 1.1rem 1.2rem; background: #ffffff; color: var(--text); border-radius: 22px; box-shadow: 0 20px 60px color-mix(in srgb, #153059 24%, transparent); border: 1px solid var(--line); }
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { font-size: 1rem; margin-bottom: 0.35rem; }
.cookie-banner p { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.cookie-banner a { color: var(--red-dark); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.cookie-actions .btn { min-width: 9.5rem; font-size: 0.9rem; padding: 0.55rem 1rem; }
.cookie-actions .btn-ghost { background: transparent; color: var(--red-dark); box-shadow: inset 0 0 0 1.5px var(--red-dark); }
.cookie-actions .btn-ghost:hover { background: var(--red-dark); color: #ffffff; }
.cookie-details { margin-top: 0.7rem; font-size: 0.82rem; }
.cookie-details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.cookie-options { display: flex; gap: 0.6rem 1rem; flex-wrap: wrap; margin: 0.6rem 0; }
.cookie-option { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 600; }
.cookie-option input { accent-color: var(--red); width: 1rem; height: 1rem; margin: 0; }
.cookie-essential { border: 0; padding: 0; background: none; color: var(--red-dark); font: 700 0.82rem var(--font); text-decoration: underline; cursor: pointer; }

/* --- Mobil: wenig Text, wenig Scrollen ---------------------------------- */
@media (max-width: 640px) {
  body.v2 { font-size: 16px; }
  .sec { padding: 3.25rem 0; }
  .sec-head { margin-bottom: 1.6rem; }
  .hero { padding-top: 2rem; padding-bottom: 1.5rem; }
  .hero-logo { width: 96px; margin-bottom: 0.7rem; }
  .h-hero { font-size: 3.1rem; }
  .h-sec { font-size: 2.1rem; }
  .h-page { font-size: 2.3rem; }
  .stage { width: calc(100% - 1.5rem); margin-top: 1.6rem; }
  .stage img { border-radius: 22px; }
  .tile-copy { padding: 1.4rem 1.2rem 0.6rem; }
  .tile-title { font-size: 1.6rem; }
  .tile-sub { font-size: 0.98rem; }
  .why-card { padding: 1.5rem 1.35rem 1.6rem; }
  .why-card::before { font-size: 2.4rem; margin-bottom: 0.9rem; }
  .why-card h3 { font-size: 1.25rem; }
  .card3 { padding: 1.5rem 1.35rem; }
  .card3::before { width: 36px; height: 36px; margin-bottom: 1rem; }
  .card3 h3 { font-size: 1.25rem; }
  .feature { padding: 1.3rem 1.25rem; border-radius: 24px; }
  .feature-dark { padding: 0.6rem 1.25rem; }
  .feature-dark details[open] { padding-bottom: 0.7rem; }
  .steps-band { border-radius: 24px; }
  .steps-band img { aspect-ratio: 2.4 / 1; }
  .steps-band h3 { margin: 1.2rem 1rem 1rem; font-size: 1.4rem; }
  .steps { padding: 0 1.1rem; gap: 0.7rem; }
  .steps li { font-size: 0.92rem; }
  .steps li strong { display: inline; }
  .steps li strong::after { content: ": "; }
  .work-item h3 { margin: 1.1rem 1.2rem 0; font-size: 1.2rem; }
  .work-item p { margin: 0.45rem 1.2rem 0; font-size: 0.95rem; }
  .work-item .work-demo { margin: auto 1.2rem 1.2rem; padding-top: 1rem; }
  .acc-item summary { padding: 1rem 0.1rem; }
  .acc-item p { padding: 0 0.5rem 1.1rem 0.1rem; font-size: 0.98rem; }
  .speed-badge { font-size: 0.9rem; }
  .phero .stage img { border-radius: 22px 22px 0 0; }
  .finale .pill, .geo .pill { width: 100%; max-width: 22rem; }
  .footer-inner { flex-direction: column; }
}

/* ===================== EFFEKTE ========================================== */
/* 1) Scroll-Reveal (IntersectionObserver, gestaffelt) – nur mit JS und ohne reduce */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rv-delay, 0ms); }
  .js .rv.is-in { opacity: 1; transform: none; }

  /* 2) Scroll-getriebene Momente (CSS scroll-driven animations, kein Hijack) */
  @supports (animation-timeline: view()) {
    .stage-grow img { animation: v2-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; transform-origin: 50% 30%; }
    @keyframes v2-grow { from { transform: scale(0.84); border-radius: 56px; } to { transform: scale(1); } }
    .text-sweep { animation: v2-sweep linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
    @keyframes v2-sweep { from { color: color-mix(in srgb, #153059 30%, #F7FAFC); } to { color: #153059; } }
  }
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Mobil straffen (Robert: wenig Scrollen) ---------------------------- */
@media (max-width: 640px) {
  .sec { padding: 2.4rem 0; }
  .sec-head { margin-bottom: 1.2rem; }
  .h-sec { font-size: 1.8rem; letter-spacing: -0.03em; }
  .h-page { font-size: 2rem; }
  .h-hero { font-size: 2.9rem; }
  .sub, .hero .tagline, .phero .lede, .section-intro, .geo .lead, .finale p { font-size: 1rem; line-height: 1.45; margin-top: 0.8rem; }
  .geo .pill, .finale .pill { margin-top: 1.2rem; }
  .phero { padding-top: 1.6rem; }
  .speed-badge { margin-top: 0.9rem; padding: 0.45rem 0.9rem; }
  .phero .cta-inline { margin-top: 1rem; }
  .stage { margin-top: 1.3rem; }
  .cx-track { padding-bottom: 0.6rem; gap: 0.8rem; }
  .cx-ctrl { margin-top: 0.4rem; }
  .tile-img { aspect-ratio: 16 / 11; }
  .tile .card-pill { margin-top: 0.4rem; }
  .why-card::before { font-size: 2rem; margin-bottom: 0.5rem; }
  .why-card { gap: 0.45rem; }
  .media-figure { width: calc(100% - 1.5rem); }
  .media-figure img { border-radius: 20px; }
  .duo { width: calc(100% - 1.5rem); margin-top: 0.9rem; gap: 0.8rem; }
  .feature-highlight p { font-size: 0.95rem; }
  .note { margin-top: 1rem; font-size: 0.8rem; }
  .card3 { padding: 1.3rem 1.2rem; }
  .card3::before { display: none; }
  .steps-band { margin-top: 1.6rem; width: calc(100% - 1.5rem); }
  .steps-band img { aspect-ratio: 3 / 1; }
  .steps-band h3 { font-size: 1.25rem; margin: 1rem 1rem 0.8rem; }
  /* Schritte als wischbare Chips statt Liste */
  .steps { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 1rem 0.2rem; gap: 0.6rem; }
  .steps::-webkit-scrollbar { display: none; }
  .steps li { scroll-snap-align: start; background: var(--bg); border-radius: 16px; padding: 0.8rem 0.9rem 0.8rem 3rem; }
  .steps li::before { left: 0.75rem; top: 0.8rem; width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
  .steps li strong { display: block; }
  .steps li strong::after { content: none; }
  .work-item h3 { margin-top: 0.9rem; }
  .acc-item summary { padding: 0.8rem 0.1rem; }
  .acc-item summary::after { width: 32px; height: 32px; }
  .footer-inner { padding: 1.25rem 0 1.5rem; }
}

/* ===================== v2 – ALLE SEITEN (22.10.2026) ======================= */
/* Logo präsenter (unverändertes Logo, nur Rand beschnitten) */
.brand { padding: 2px 0; }
.footer-inner { align-items: center; }
.footer-logo { width: auto; height: 44px; flex: none; }
@media (max-width: 640px) {
  :root { --gnav-h: 60px; }
  .brand-logo { height: 46px; }
  .footer-logo { height: 40px; }
}
button.btn { font-family: var(--font); }
.btn-ghost, .btn.btn-ghost { background: transparent; color: var(--red-dark); box-shadow: inset 0 0 0 1.5px var(--red-dark); }
.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--red-dark); color: #ffffff; }
.sec-light .note, .sec-white .note { color: var(--muted); }
.sec-white .steps-band, .sec-white .card3 { background: var(--bg); }

/* Angebotskarten-Karussell (Print, Fotografie, Social Media) */
.ocards { --cx-w: min(84%, 400px); }
.ocard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: #ffffff; min-height: 100%; box-shadow: 0 1px 0 var(--line); }
.sec-white .ocard { background: var(--bg); box-shadow: none; }
.sec-dark .ocard { background: var(--navy-2); border: 1px solid var(--line-dark); box-shadow: none; color: #ffffff; }
.ocard-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wash); }
.ocard-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ocard:not(.has-img) .ocard-body::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 0.8rem; background: linear-gradient(135deg, #153059, color-mix(in srgb, #153059 70%, #C1121F)); }
.ocard:not(.has-img):nth-child(even) .ocard-body::before { background: linear-gradient(135deg, #C1121F, #9E0E19); }
.ocard h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ocard p { color: var(--muted); font-size: 1.02rem; }
.sec-dark .ocard p { color: var(--on-dark-muted); }
.sec-dark .ocard .feature-speed { color: #ffffff !important; }
.ocard details > p { margin-top: 0.6rem; }
.cx .ocard details.fold > summary { pointer-events: none; }
.work-4 { --cx-w: min(86%, 560px); }

/* Fotografie: Claim unter dem Bild, Galerie-Karussell */
.ph-stage { position: relative; }
.media-band-text { text-align: center; margin-top: clamp(1.25rem, 3vw, 2rem); }
.media-band-claim { font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; color: var(--navy); }
.phero .ph-stage { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.phero .ph-stage img { border-radius: var(--r-xl); }
.gal { --cx-w: min(86%, 640px); align-items: center; }
.gal-item { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-3); }
.gal-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Kontakt */
.back-inline { margin: 0 0 1.5rem; font-size: 0.95rem; font-weight: 600; }
.back-inline a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.back-inline a:hover { color: var(--red-dark); text-decoration: underline; }
.kontakt-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.portrait-xl { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.6rem; box-shadow: 0 0 0 6px #ffffff, 0 18px 50px color-mix(in srgb, #153059 26%, transparent); }
.kontakt-sec { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 2rem; } .contact-card { position: sticky; top: calc(var(--gnav-h) + 1.5rem); } }
.contact-card { background: var(--navy); color: #ffffff; border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.4rem); font-size: 1.08rem; line-height: 1.6; display: grid; gap: 1.1rem; }
.contact-card strong { font-size: 1.35rem; letter-spacing: -0.02em; }
.contact-card a { color: #ffffff; font-weight: 600; }
.contact-card :focus-visible { outline-color: #ffffff; }
.form-card { background: var(--bg); border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.4rem); }
.kontakt-form { display: grid; gap: 1rem; }
.kontakt-form label { display: grid; gap: 0.4rem; }
.kontakt-form label > span { font-weight: 600; font-size: 0.95rem; }
.kontakt-form small { font-weight: 450; color: var(--muted); }
.kontakt-form input:not([type=hidden]), .kontakt-form select, .kontakt-form textarea, .gc-form input[type=text] {
  width: 100%; font: 400 1.05rem/1.4 var(--font); color: var(--text); background: #ffffff;
  border: 1.5px solid color-mix(in srgb, #153059 22%, transparent); border-radius: 14px; padding: 0.85rem 1rem; min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kontakt-form textarea { resize: vertical; min-height: 9rem; }
.kontakt-form select { appearance: none; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153059' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 18px no-repeat; padding-right: 2.8rem; }
.kontakt-form input:focus-visible, .kontakt-form select:focus-visible, .kontakt-form textarea:focus-visible, .gc-form input[type=text]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--navy); }
.kontakt-form .hp, .gc-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis, .form-hint { font-size: 0.88rem; color: var(--muted); }
.kontakt-form .btn { justify-self: start; font-size: 1.05rem; padding: 0.85rem 1.8rem; }

/* Danke */
.danke-hero { padding-bottom: clamp(4rem, 9vw, 8rem); }
.danke-check { display: block; width: 84px; height: 84px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 40px no-repeat; }
.danke-hero .cta-inline { margin-top: 2rem; }

/* Rechtsseiten: ruhig, gut lesbar, keine Effekte */
.v2-legal .legal-hero { background: var(--bg); padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.legal-wrap { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.legal-hero .back-inline { margin-bottom: 0.75rem; }
.h-legal { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; }
.legal-body { background: #ffffff; padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }
.legal .prose { font-size: 1.05rem; line-height: 1.7; color: var(--text); }
.legal .prose h2 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 2.4rem 0 0.6rem; }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose h3 { font-size: 1.1rem; font-weight: 650; margin: 1.6rem 0 0.4rem; }
.legal .prose p, .legal .prose ul, .legal .prose ol { margin: 0 0 1rem; }
.legal .prose ul, .legal .prose ol { padding-left: 1.3rem; }
.legal .prose li { margin: 0.3rem 0; }
.legal .prose a { color: var(--red-dark); overflow-wrap: anywhere; }
.legal .prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0 0 1rem; display: block; overflow-x: auto; }
.legal .prose th, .legal .prose td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal .prose code { font-size: 0.92em; background: var(--wash); padding: 0.05rem 0.3rem; border-radius: 4px; overflow-wrap: anywhere; }

/* Mobil: Bilder kompakter, damit die Seiten nicht unnötig lang werden */
@media (max-width: 640px) {
  .stage img, .media-figure img { aspect-ratio: 16 / 9.5; object-fit: cover; }
  .ocard-img { aspect-ratio: 2 / 1; }
  .ocard-body { padding: 1.1rem 1.2rem 1.3rem; gap: 0.45rem; }
  .ocard:not(.has-img) .ocard-body::before { display: none; }
  .ocard h3 { font-size: 1.2rem; }
  .ocard p { font-size: 0.95rem; }
  .work-img { aspect-ratio: 2 / 1; }
  .gal-item img { aspect-ratio: 16 / 10; }
  .media-band-claim { font-size: 1.6rem; }
  .phero .ph-stage { padding-bottom: 1.8rem; }
  .media-band-text { margin-top: 1rem; }
  .back-inline { margin-bottom: 0.5rem; font-size: 0.9rem; }
  .portrait-xl { width: 120px; height: 120px; margin-bottom: 1rem; box-shadow: 0 0 0 4px #ffffff, 0 12px 30px color-mix(in srgb, #153059 24%, transparent); }
  .kontakt-hero { padding-bottom: 1.6rem; }
  .kontakt-sec { padding-top: 1.2rem; }
  .contact-grid { width: calc(100% - 1.5rem); gap: 0.9rem; }
  .contact-card { padding: 1.3rem 1.25rem; font-size: 1rem; gap: 0.7rem; border-radius: 24px; }
  .form-card { padding: 1.2rem 1rem; border-radius: 24px; }
  .kontakt-form { gap: 0.8rem; }
  .kontakt-form .btn { width: 100%; justify-self: stretch; }
  .legal .prose { font-size: 1rem; line-height: 1.6; }
  .legal .prose h2 { margin-top: 1.6rem; }
  .legal .prose p, .legal .prose ul, .legal .prose ol { margin-bottom: 0.8rem; }
  .danke-check { width: 64px; height: 64px; background-size: 30px; }
}
.lnav-cta a { white-space: nowrap; }
@media (max-width: 400px) { .lnav .back { font-size: 0.85rem; } .lnav-cta a { padding: 0.4rem 0.8rem; font-size: 0.78rem; } }

/* --- Fix 22.10.2026: Karussells nur horizontal wischbar ------------------
   Ursache: overflow-x:auto ohne overflow-y macht die Spur auch vertikal scrollbar
   (overflow-y wird zu auto). Noch nicht eingeblendete Karten (.rv, translateY 36px)
   ragten unten heraus, dadurch ließ sich der Inhalt im Karussell nach oben schieben. */
.cx-track {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
}
@media (max-width: 760px) {
  .steps { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
}
/* Karten im Karussell: kein eigener Scroll-Container, nichts vertikal verschieben */
.cx-track > * { overflow: hidden; overflow: clip; }
.js .cx-track > .rv, .js .steps > .rv { transform: none; transition: opacity .9s var(--ease); transition-delay: var(--rv-delay, 0ms); }
@media (hover: none) { .tile:hover, .tile:hover .tile-img { transform: none; } }

/* --- Fix 320 px (22.10.2026, 20261022b) --------------------------------- */
.contact-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); } }
@media (max-width: 400px) {
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .h-legal { font-size: 1.65rem; }
}
/* Turnstile-Widget ist fix 300 px breit: unter 360 px Formular-Karte randlos, damit innen 300 px frei sind */
@media (max-width: 359px) {
  .contact-grid { width: 100%; }
  .contact-card { margin-inline: 10px; }
  .form-card { border-radius: 0; padding: 1.1rem 10px; }
}