:root {
  /* Farben — ein Rot, eine Stimme (abgestimmt auf das COWORK-Portal-Design) */
  --red: #A3152F;          /* Markenrot: Buttons, Akzente, kleine rote Texte (7.8:1 auf Weiß) */
  --red-deep: #7A0F22;     /* dunkles Flächenrot: Gradient-Ende (10.9:1 mit Weiß) */
  --red-dark: #A3152F;     /* Alias: rotes Text-Element auf Weiß */
  --red-soft: #F6D0D8;     /* gedämpfter Text auf Rotflächen (5.5:1 auf --red) */
  --ink: #1A1A1A;
  --body: #3A3D45;         /* Fließtext auf Weiß (10.9:1) */
  --paper: #FFFFFF;
  --tint: #FBEAED;         /* Markenrot-Tint für Flächen und Chips */
  --line: #E5E7EB;

  --font: "Roboto", system-ui, sans-serif;          /* wie Live-Seite (Body) */
  --font-head: "DM Sans", system-ui, sans-serif;  /* wie Live-Seite (Ueberschriften) */
  --radius: 12px;
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* Z-Skala */
  --z-sticky: 10;
  --z-nav: 20;
  --z-cta-bar: 30;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sanfter Übergang beim Seitenwechsel (progressiv, nur unterstützende Browser) */
@view-transition { navigation: auto; }

/* Anker landen nicht unter dem Sticky-Header */
[id] { scroll-margin-top: 88px; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--body);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
}

h1, h2, h3 { color: var(--ink); line-height: 1.08; text-wrap: balance; font-weight: 800; }
p { max-width: 65ch; text-wrap: pretty; }

a { color: var(--red-dark); }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
/* Auf roten und dunklen Flächen ist der rote Ring unsichtbar → weißer Ring */
.why :focus-visible,
.b2b .inner :focus-visible, footer :focus-visible { outline-color: #fff; }

img { display: block; max-width: 100%; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: var(--z-cta-bar);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo strong { font-weight: 800; font-size: 1.15rem; line-height: 1.05; letter-spacing: -0.01em; }
.logo strong span { display: block; font-weight: 400; }
.logo-mark { width: 40px; height: 40px; flex: none; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.main-nav a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
  padding: 12px 14px; border-radius: 8px;
}
.main-nav a:hover { background: var(--tint); color: var(--red-dark); }
.main-nav a[aria-current="page"] { color: var(--red-dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  min-height: 48px; padding: 0 26px; border-radius: 12px; border: 2px solid transparent;
  transition: background .18s var(--ease-out), transform .15s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn svg { transition: transform .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(4px); }
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); }
.btn-white { background: #fff; color: var(--red-dark); }
.btn-white:hover { background: var(--red-soft); }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-ghost-dark { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost-dark:hover { background: var(--ink); color: #fff; }

.nav-toggle { display: none; }

/* Foto-Layer: Regen-auf-Glas-Textur, über Blend-Mode in die Flächenfarbe
   eingefärbt. Aktiviert per --hero-img auf dem Element; die Maske hält die
   Textseite links frei, Kontrast bleibt unangetastet. */
[style*="--hero-img"] { position: relative; isolation: isolate; }
[style*="--hero-img"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--hero-img) center / cover no-repeat;
  mix-blend-mode: luminosity; opacity: .2;
  mask-image: linear-gradient(105deg, transparent 30%, #000 78%);
  pointer-events: none;
}

/* ---------- Hero (Startseite): hell, Foto hinter den Strecken-Karten (Entwurf B) ---------- */
.hero {
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
  color: var(--ink); border-bottom: 1px solid var(--line);
  overflow: clip; position: relative;
}
.hero .strecken-stage { position: relative; }
.hero .stage-pic {
  position: absolute; top: -20px; right: -8px; width: 82%; height: 64%;
  object-fit: cover; border-radius: 22px;
  box-shadow: 0 20px 50px rgba(163, 21, 47, .20);
}
.hero .strecken-stage .strecken { position: relative; margin-top: 110px; margin-right: 72px; }
.hero .pcard { border-color: #EADFE2; box-shadow: 0 12px 34px rgba(20,20,30,.13); }
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-block: clamp(56px, 9vw, 120px);
}
.hero h1 {
  color: var(--ink); font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -0.02em;
}
/* Akzent-Wort in Vollton-Markenrot (Kontur-Effekt entfernt, Johannes 10.07.2026) */
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lede { margin-top: 20px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--body); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .props { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.hero .props li { display: flex; gap: 8px; align-items: center; color: var(--red-soft); font-weight: 600; font-size: .92rem; }
.hero .props svg { flex: none; }

/* Einstiegs-Choreografie: gestaffeltes Aufsteigen beim Laden
   (Stagger 70–80ms – kürzer wirkt gehetzt, länger träge) */
@media (prefers-reduced-motion: no-preference) {
  .rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: heroRise .7s var(--ease-out) both; }
  .rise-2 { animation-delay: .07s; }
  .rise-3 { animation-delay: .14s; }
  .rise-4 { animation-delay: .22s; }
  .rise-5 { animation-delay: .3s; }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
  }
}

/* Schaden-Picker: das Herzstück statt Stockfoto */
.picker {
  background: #fff; color: var(--ink); border-radius: 20px;
  padding: clamp(22px, 3vw, 32px); box-shadow: 0 24px 60px rgba(23,24,28,.25);
}
.picker h2 { font-size: 1.3rem; margin-bottom: 4px; }
.picker > p { font-size: .95rem; margin-bottom: 18px; }
.picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.picker-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 8px 14px; min-height: 44px; border: 1.5px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .88rem; text-align: center;
  transition: border-color .15s ease-out, background .15s ease-out, transform .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .picker-grid a:hover { border-color: var(--red); background: var(--tint); transform: translateY(-3px); }
}
.picker-grid a:active { transform: scale(.97); }
.picker-grid svg { color: var(--red-dark); }
.picker-foot { margin-top: 16px; font-size: .85rem; color: var(--body); }
.picker-foot a { font-weight: 600; }

/* ---------- Seiten-Hero (Unterseiten): hell & ruhig, dezentes Foto rechts ---------- */
.page-hero, .page-hero.dark {
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
  color: var(--ink); border-bottom: 1px solid var(--line);
  overflow: clip; position: relative;
}
.page-hero .wrap {
  position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.page-hero h1 { color: var(--ink); font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -0.02em; max-width: 20ch; }
.page-hero .lede, .page-hero.dark .lede { margin-top: 16px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--body); }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-hero .hero-pic {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 18px;
  box-shadow: 0 14px 36px rgba(163, 21, 47, .12);
}
.page-hero .hero-pic.contain { aspect-ratio: auto; object-fit: contain; box-shadow: none; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; margin-bottom: 20px; }
.breadcrumb li, .page-hero.dark .breadcrumb li { display: flex; gap: 6px; align-items: center; color: var(--body); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--red); }
.breadcrumb li + li::before { content: "/"; opacity: .6; }
@media (max-width: 860px) {
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero .hero-pic { max-height: 240px; aspect-ratio: auto; }
}

/* ---------- Sektionen ---------- */
section { padding-block: clamp(64px, 8vw, 112px); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -0.015em; }
.section-head p { margin-top: 14px; font-size: 1.08rem; }

/* Schritte — asymmetrisch: Titel klebt links, die Sequenz läuft rechts als Zeilen */
.steps .wrap { display: grid; grid-template-columns: minmax(240px, .9fr) 1.6fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.steps .section-head { position: sticky; top: 104px; margin-bottom: 0; }
.steps ol { list-style: none; display: grid; gap: 16px; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: clamp(56px, 7vw, 72px) 1fr;
  column-gap: clamp(16px, 3vw, 28px); align-items: start;
  padding: clamp(20px, 2.6vw, 28px);
  background: #fff; border: 1px solid #EFE3E6; border-radius: 16px;
  box-shadow: 0 6px 22px rgba(122, 15, 34, .05);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .steps li:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(122, 15, 34, .10); }
}
.steps li:last-child { border-bottom: 1px solid #EFE3E6; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-weight: 800; font-size: clamp(2.4rem, 3.6vw, 3.2rem); line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.steps h3 { grid-column: 2; font-size: 1.25rem; margin-bottom: 10px; }
.steps p { grid-column: 2; font-size: .98rem; }
/* Foto füllt die Sticky-Spalte unter dem Titel */
.steps .section-head img {
  width: 100%; max-width: 340px; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); margin-top: 28px;
}

/* Foto-Band: eingefasst (Quellbilder der Site sind max. ~850px breit), sanfter Zoom beim Scrollen */
.photo-band { padding-block: 0; overflow: clip; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.photo-band .frame { border-radius: 20px; overflow: clip; }
.photo-band img { width: 100%; height: clamp(260px, 36vw, 440px); object-fit: cover; }
.photo-band figcaption {
  font-size: .88rem; color: var(--body); padding: 12px 4px;
}

/* Vorteile — dunkle Fläche, kein Kartenraster */
.why { background: var(--ink); color: #fff; }
.why h2, .why h3 { color: #fff; }
.why .rows { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.why .row {
  display: grid; grid-template-columns: minmax(200px, .8fr) 1.4fr; gap: 12px 48px;
  padding-block: 30px; border-bottom: 1px solid rgba(255,255,255,.16); align-items: start;
  transition: transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .why .row:hover { transform: translateX(14px); } }
.why h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
.why p { color: #C9CBD3; line-height: 1.72; }

/* Zahlen & Partner */
.trust { background: var(--tint); }
.trust .facts { display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 84px); margin-bottom: clamp(40px, 5vw, 64px); }
/* Standort-Foto neben den Zahlen */
.trust .top {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.trust .top .facts {
  margin-bottom: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  align-content: center;
}
.trust .top img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.trust .top figcaption { font-size: .85rem; color: var(--body); padding-top: 10px; }
.trust .fact strong { display: block; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; color: var(--red-dark); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.trust .fact span { font-weight: 600; color: var(--ink); }
.partners { border-top: 1px solid var(--line); padding-top: 28px; }
.partners > p { font-size: .9rem; margin-bottom: 14px; }

/* Partner-Marquee: Endlosband, steht bei reduzierter Motion still */
.marquee {
  overflow: clip; display: flex; gap: 48px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 48px; align-items: center;
}
.marquee ul li { font-weight: 600; color: var(--ink); opacity: .7; font-size: 1.05rem; white-space: nowrap; }
.marquee ul[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .marquee ul { flex-wrap: nowrap; animation: marquee 36s linear infinite; }
  .marquee ul[aria-hidden="true"] { display: flex; }
  .marquee:hover ul { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(calc(-100% - 48px)); } }
}

/* Wissenswertes — Magazin-Layout: ein großer Aufmacher, kompakte Teaser daneben */
.know-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.know-grid article { display: flex; flex-direction: column; }
.know-grid .pic { border-radius: var(--radius); overflow: clip; }
.know-grid img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .know-grid article:hover img { transform: scale(1.05); }
}
.know-grid h3 { font-size: 1.3rem; margin: 18px 0 8px; }
.know-grid p { font-size: .96rem; flex: 1; }
.know-grid .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; text-decoration: none; min-height: 44px; }
.know-grid .more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .know-grid img { transition: none; } }

/* Aufmacher: erster Artikel groß über beide Zeilen */
.know-grid article:first-child { grid-row: 1 / span 2; }
.know-grid article:first-child img { aspect-ratio: 16/10; }
.know-grid article:first-child h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
/* Teaser: kompakt, Bild links, Text rechts */
.know-grid article:not(:first-child) {
  display: grid; grid-template-columns: minmax(110px, 150px) 1fr;
  column-gap: 20px; align-content: start;
  border-top: 1px solid var(--line); padding-top: clamp(18px, 2.5vw, 26px);
}
.know-grid article:not(:first-child) .pic { grid-row: 1 / span 3; }
.know-grid article:not(:first-child) img { aspect-ratio: 1; }
.know-grid article:not(:first-child) h3 { grid-column: 2; margin: 0 0 6px; font-size: 1.15rem; }
.know-grid article:not(:first-child) p { grid-column: 2; }
.know-grid article:not(:first-child) .more { grid-column: 2; margin-top: 8px; min-height: 36px; }

/* Zwei Wege (Privatkunden): Foto + Text nebeneinander, abwechselnd */
.path { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.path + .path { margin-top: clamp(48px, 6vw, 88px); }
.path:nth-of-type(even) .path-pic { order: 2; }
.path-pic { border-radius: 20px; overflow: clip; }
.path-pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.path h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.path .btn { margin-top: 24px; }
.checklist { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.checklist li { display: flex; gap: 12px; align-items: baseline; }
.checklist svg { flex: none; color: var(--red-dark); translate: 0 3px; }

/* B2B */
.b2b .inner {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); color: #fff; border-radius: 24px;
  padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px);
}
.b2b h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.b2b .inner > div > p { color: #fff; margin-top: 14px; }
.b2b ul { list-style: none; display: grid; gap: 6px; align-content: start; }
.b2b ul a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
  padding: 15px 4px; min-height: 44px; border-bottom: 1px solid rgba(255,255,255,.28);
}
.b2b ul a svg { transition: transform .18s var(--ease-out); }
.b2b ul a:hover svg { transform: translateX(6px); }
.b2b .btn { margin-top: 28px; }

/* B2B-Segmente (firmenkunden.html) */
.segments { display: grid; gap: clamp(48px, 6vw, 80px); }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.segment:nth-child(even) .segment-pic { order: 2; }
.segment-pic { border-radius: 20px; overflow: clip; }
.segment-pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.segment-pic.screen img { aspect-ratio: auto; }  /* Portal-Screenshot nicht beschneiden */

/* Echte App-Screens statt Mock — schwebt kaum merklich */
.app-shot { justify-self: center; width: min(320px, 76%); filter: drop-shadow(0 24px 48px rgba(23,24,28,.28)); }
@media (prefers-reduced-motion: no-preference) {
  .app-shot { animation: float 7s ease-in-out infinite alternate; }
  @keyframes float {
    to { transform: translateY(-14px) rotate(1.2deg); }
  }
}
.segment h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.segment .btn { margin-top: 24px; }

/* App */
.app-teaser .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.app-teaser h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.app-teaser .stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.phone-mock {
  justify-self: center; width: min(260px, 70%); aspect-ratio: 9/17;
  border-radius: 36px; background: var(--ink); padding: 12px;
  box-shadow: 0 30px 70px rgba(23,24,28,.28);
}
.phone-mock .screen {
  height: 100%; border-radius: 26px; background: var(--tint);
  display: flex; flex-direction: column; gap: 10px; padding: 22px 16px; overflow: hidden;
}
.phone-mock .screen .bar { height: 12px; border-radius: 6px; background: var(--line); }
.phone-mock .screen .bar.red { background: var(--red); width: 62%; height: 16px; }
.phone-mock .screen .box { flex: 1; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.phone-mock .screen .cta { height: 44px; border-radius: 999px; background: var(--red); }

/* Artikel (Wissenswertes-Detail) */
.article .wrap { max-width: 820px; }
.article h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 40px 0 14px; }
.article p + p { margin-top: 16px; }
.article-hero-pic { margin-top: clamp(-56px, -5vw, -40px); position: relative; z-index: 2; }
.article-hero-pic .wrap { max-width: 980px; }
.article-hero-pic img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 60px rgba(23,24,28,.18); }
.callout {
  background: var(--tint); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 24px 28px; margin: 32px 0; display: flex; gap: 16px; align-items: flex-start;
}
.callout svg { flex: none; color: var(--red-dark); margin-top: 3px; }
.callout strong { color: var(--ink); }
.article .cta-inline { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Kontakt-CTA — asymmetrisch: Frage links, Aktionen rechts */
.contact { background: var(--tint); }
.contact .wrap {
  display: grid; grid-template-columns: 1.4fr 1fr;
  grid-template-areas: "title cta" "phone cta" "hours cta";
  column-gap: clamp(32px, 6vw, 96px); align-items: center;
}
.contact h2 { grid-area: title; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.contact .phone {
  grid-area: phone; justify-self: start;
  display: inline-flex; align-items: center; gap: 14px; margin-top: 22px;
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--red-dark); text-decoration: none;
}
.contact .phone:hover { text-decoration: underline; }
.contact .hours { grid-area: hours; margin: 14px 0 0; font-size: .95rem; }
.contact .cta-row {
  grid-area: cta; display: flex; flex-direction: column; align-items: stretch;
  gap: 14px; margin: 0; padding-left: clamp(24px, 4vw, 48px);
  border-left: 1px solid var(--line);
}

/* Footer */
footer { background: var(--ink); color: #C9CBD3; padding-block: clamp(48px, 6vw, 72px) 32px; font-size: .95rem; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
footer h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer ul { list-style: none; display: grid; gap: 10px; }
footer .legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .85rem;
}
footer .legal ul { display: flex; gap: 22px; }

/* Mobile Sticky-CTA */
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-cta-bar);
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.cta-bar .btn { flex: 1; }
.cta-bar .btn-ghost-dark { flex: 0 0 auto; width: 52px; padding: 0; }

/* Scroll-Reveal: rein per CSS (view timeline). Ohne Browser-Support
   oder mit reduzierter Motion bleiben alle Inhalte einfach sichtbar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    /* Nebeneinanderliegende Elemente steigen gestaffelt auf */
    .facts .fact:nth-child(2) { animation-range: entry 15% entry 55%; }
    .facts .fact:nth-child(3) { animation-range: entry 25% entry 65%; }
    .facts .fact:nth-child(4) { animation-range: entry 35% entry 75%; }
    @keyframes rise {
      from { opacity: 0; transform: translateY(18px); }
    }
    /* Fotos zoomen beim Scrollen ganz leicht heraus */
    .photo-band img, .path-pic img, .segment-pic img {
      animation: settle both;
      animation-timeline: view();
      animation-range: entry exit;
    }
    @keyframes settle {
      from { transform: scale(1.1); }
      to { transform: scale(1); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .b2b ul a svg, .picker-grid a, .why .row, .main-nav { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .stage-pic { display: none; }
  .hero .strecken-stage .strecken { margin: 0; }
  .steps .wrap { grid-template-columns: 1fr; gap: 8px; }
  .steps .section-head { position: static; margin-bottom: 28px; }
  .steps .section-head img { display: none; }
  .trust .top { grid-template-columns: 1fr; }
  .why .row { grid-template-columns: 1fr; gap: 8px; }
  .know-grid { grid-template-columns: 1fr; }
  .know-grid article:first-child { grid-row: auto; }
  .contact .wrap { grid-template-columns: 1fr; grid-template-areas: "title" "phone" "hours" "cta"; }
  .contact .cta-row { border-left: 0; padding-left: 0; margin-top: 28px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .b2b .inner { grid-template-columns: 1fr; }
  .app-teaser .wrap { grid-template-columns: 1fr; }
  .path, .segment { grid-template-columns: 1fr; }
  .path:nth-of-type(even) .path-pic, .segment:nth-child(even) .segment-pic { order: 0; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .know-grid article:not(:first-child) { grid-template-columns: 1fr; }
  .know-grid article:not(:first-child) .pic { grid-row: auto; margin-bottom: 14px; }
  .know-grid article:not(:first-child) img { aspect-ratio: 3/2; }
  .know-grid article:not(:first-child) h3,
  .know-grid article:not(:first-child) p,
  .know-grid article:not(:first-child) .more { grid-column: 1; }
}
@media (max-width: 520px) {
  /* Lange deutsche Komposita (Schadenmanagement …) sauber trennen statt überlaufen */
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 760px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 16px;
    background: #fff; border-bottom: 1px solid var(--line);
    /* Einblenden statt Aufpoppen; Browser ohne allow-discrete zeigen instant */
    opacity: 0; transform: translateY(-6px);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), display .2s allow-discrete;
  }
  .main-nav.open {
    display: flex; opacity: 1; transform: translateY(0);
  }
  @starting-style {
    .main-nav.open { opacity: 0; transform: translateY(-6px); }
  }
  .main-nav a { padding: 14px; font-size: 1.05rem; }
  .main-nav .btn { margin-top: 8px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 48px; height: 48px; border: none; background: none; cursor: pointer; color: var(--ink);
  }
  .header-cta { display: none; }
  .picker-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-bar { display: flex; }
  body { padding-bottom: 76px; }
  footer .cols { grid-template-columns: 1fr; }
}

/* ================================================================
   Portal-Sprache (COWORK-Referenz: Startseite Community,
   KFZ-/Haushalt-Schadenstrecke)
   ================================================================ */

/* Eyebrow + Schritt-Chips im Hero */
.hero .eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.hero-steps { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; list-style: none; }
.hero-steps li { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.hero-steps .n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--red); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; flex: none;
}

/* Zwei Hauptstrecken-Karten (KFZ / Eigenheim & Haushalt) */
.strecken { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 26px 24px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  box-shadow: 0 10px 30px rgba(20,20,30,.09);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(163,21,47,.16); }
}
.pcard:active { transform: scale(.98); }
.pcard .ic {
  width: 56px; height: 56px; border-radius: 14px; background: var(--tint); color: var(--red);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.pcard .tag {
  align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--red);
  background: var(--tint); padding: 4px 10px; border-radius: 20px; margin-bottom: 12px;
}
.pcard h3 { font-size: 1.3rem; margin-bottom: 6px; }
.pcard p { font-size: .92rem; color: var(--body); flex: 1; margin-bottom: 18px; }
.pcard .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--red); }

/* Sparten-/Themen-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .85rem; line-height: 1.3;
  transition: transform .15s var(--ease-out), border-color .15s ease-out, box-shadow .15s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-2px); border-color: #f0c9d1; box-shadow: 0 8px 20px rgba(20,20,30,.07); }
}
.tile:active { transform: scale(.97); }
.tile .ic {
  width: 44px; height: 44px; border-radius: 11px; background: var(--tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}

/* Kategorie-/Artikel-Listen (Wissensdatenbank) */
.kb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kb-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  text-decoration: none; color: var(--ink); font-weight: 600;
  transition: transform .15s var(--ease-out), border-color .15s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .kb-list a:hover { transform: translateY(-2px); border-color: #f0c9d1; }
}
.kb-list a svg { color: var(--red); flex: none; }

/* Timeline (Über uns) */
.timeline { list-style: none; border-left: 2px solid var(--tint); padding-left: 28px; display: grid; gap: 26px; max-width: 720px; }
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -35px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--red); border: 2px solid #fff;
}
.timeline .year { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.timeline p { font-size: .95rem; }

/* Formular (Kontakt) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.fld label .req { color: var(--red); }
.fld .hint { font-size: .8rem; color: var(--body); }
.inp {
  min-height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px;
  font: 400 1rem/1.4 var(--font); background: #fff; color: var(--ink); width: 100%;
}
textarea.inp { min-height: 120px; padding: 12px 14px; resize: vertical; }
.inp:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }

/* Rechtstexte & lange Prosa (AGB, Impressum) */
.prose .wrap { max-width: 820px; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 40px 0 12px; }
.prose h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }

/* Info-Zeile (Kontakt-Kanäle) */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.channel {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.channel .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.channel b { font-size: 1rem; }
.channel a { font-weight: 600; text-decoration: none; }
.channel a:hover { text-decoration: underline; }
.channel .sub { font-size: .88rem; color: var(--body); }

@media (max-width: 760px) {
  .strecken, .kb-list, .form-grid { grid-template-columns: 1fr; }
}

/* Hauptstrecken im Hero (Startseite) */
.hero .strecken { grid-template-columns: 1fr; gap: 14px; }
.hero .pcard { padding: 20px 22px 18px; }
.hero .pcard .ic { width: 44px; height: 44px; margin-bottom: 10px; }
.hero .pcard p { margin-bottom: 12px; }
.hero .picker-foot { color: var(--body); font-size: .88rem; margin-top: 14px; }
.hero .picker-foot a { color: var(--red); }

/* ===== Ergänzungen 10.07.2026 (Claude): WhatsApp-CTA, Vorteils-Vergleich, Bewertungen, FAQ ===== */
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:#1EBE5D;color:#fff;border-radius:999px;padding:14px 24px;font-weight:600}
.btn-wa:hover{background:#17A34E}
.vergleich{background:#F6F4F1;padding:clamp(56px,8vw,110px) 0}
.vergleich .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.vcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:30px}
.vcard.partner{border:2px solid var(--red);box-shadow:0 16px 40px rgba(163,21,47,.10);position:relative}
.vcard.partner .vbadge{position:absolute;top:-13px;left:26px;background:var(--red);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:4px 14px;border-radius:999px}
.vcard h3{font-size:1.25rem;margin-bottom:14px}
.vcard ul{list-style:none;margin:0;padding:0}
.vcard li{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(0,0,0,.1);line-height:1.5}
.vcard li:last-child{border:none}
.vcard .x{color:#B3413F;font-weight:800}.vcard .ok{color:#1E7A46;font-weight:800}
.vcard .btn{margin-top:18px}
@media(max-width:760px){.vergleich .cols{grid-template-columns:1fr}}
.reviews{padding:clamp(56px,8vw,110px) 0}
.reviews .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.rcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:26px}
.rcard .stars{color:#E9A13B;letter-spacing:2px;margin-bottom:10px}
.rcard .who{margin-top:14px;font-size:.88rem;color:#6b6b6b;font-weight:600}
@media(max-width:760px){.reviews .grid{grid-template-columns:1fr}}
.faq{background:#F6F4F1;padding:clamp(56px,8vw,110px) 0}
.faq details{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;margin-bottom:12px}
.faq summary{padding:18px 22px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
/* Emil: ein "+" das zum "×" rotiert statt Zeichen-Tausch — 200ms ease-out */
.faq summary::after{content:"+";font-size:1.4rem;color:var(--red);line-height:1;transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:#555;line-height:1.65}
/* Emil: Antwort steigt beim Öffnen dezent auf (nur transform+opacity, ease-out, <300ms) */
@media (prefers-reduced-motion: no-preference){
  .faq details[open] .a{animation:faqIn 220ms var(--ease-out) both}
  @keyframes faqIn{from{opacity:0;transform:translateY(6px)}}
}
@media (hover: hover) and (pointer: fine){
  .faq summary:hover{color:var(--red)}
  .vcard{transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
  .vcard:hover{transform:translateY(-2px)}
  .vcard.partner:hover{box-shadow:0 20px 48px rgba(163,21,47,.14)}
}
@media (prefers-reduced-motion: reduce){
  .faq summary::after,.vcard{transition:none}
}

/* ---------- Header-Telefon (Desktop) ---------- */
.header-phone { margin-left: auto; text-align: right; line-height: 1.25; white-space: nowrap; }
.header-phone a { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.02rem; display: block; }
.header-phone .hp-sub { font-size: .7rem; color: #77787B; display: block; }
.header-phone + .main-nav { margin-left: 18px; }
@media (max-width: 1080px) {
  .header-phone { display: none; }
  .header-phone + .main-nav { margin-left: auto; }
}

/* ---------- Trust-Band unter dem Hero ---------- */
.trust-band { background: #fff; border-block: 1px solid #ECECEA; padding: 22px 0 18px; }
.trust-band .wrap { display: flex; flex-wrap: wrap; gap: 18px 44px; align-items: center; justify-content: center; }
.tb-item { text-align: center; line-height: 1.3; }
.tb-item .stars { color: #F5B301; font-size: 1.05rem; letter-spacing: 2px; display: block; }
.tb-item strong { font-family: var(--font-head); font-size: 1.12rem; color: var(--ink); display: block; }
.tb-item span { font-size: .82rem; color: #77787B; }
.tb-google { flex: 0 0 auto; }
.tb-logos { margin-top: 14px; text-align: center; font-size: .82rem; color: #9A9B9E; }
.tb-logos b { color: #55565A; font-weight: 600; }

/* ---------- Wissensartikel: "Auf einen Blick"-Tabellen ---------- */
.tbl-scroll { overflow-x: auto; margin-block: 8px 24px; }
.kb-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.kb-table th { background: var(--tint); color: var(--ink); text-align: left; padding: 12px 14px; font-family: var(--font-head); }
.kb-table td { padding: 12px 14px; border-bottom: 1px solid #ECECEA; vertical-align: top; }
.kb-table tr:nth-child(even) td { background: #FAFAF8; }

/* Kontaktformular: Honeypot unsichtbar, Status-Meldung */
.fld-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 600; color: var(--red-dark); min-height: 1.4em; }

/* Versicherer-Leiste im Trust-Band: praegnante Chips (Logos erst nach Markenfreigabe) */
.tb-versicherer { margin-top: 16px; text-align: center; }
.tb-claim { margin: 0 auto 10px; font-size: .95rem; color: var(--body); }
.tb-claim strong { color: var(--ink); }
.tb-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 0; }
.tb-chips li {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--ink);
  background: #F7F7F5; border: 1px solid #E7E7E5; border-radius: 999px;
  padding: 8px 18px; letter-spacing: .01em;
}

/* Vorteils-Zeilen: Fetttext + Beschreibung fliessen als ein Text (kein Spalten-Umbruch) */
.vcard li .li-txt { flex: 1; min-width: 0; }