/* ============================================================================
   HejGast — Design System
   Brand: Minze #3DA57A · Tanne #1F3D33 · Frischweiß #F3F7F1 · Plus Jakarta Sans
   Ratio: ~70 % Weiß / 20 % Tanne / 10 % Minze. Kein reines Schwarz.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --mint: #3DA57A;
  --mint-dark: #2E8A63;
  --mint-deep: #2B7F5E;   /* Buttons und Links: weiß darauf 4,9:1, auf Frischweiß 4,8:1 (WCAG AA) */
  --mint-light: #DCEFE4;
  --mint-soft: #F3F4F2;   /* heller Hintergrund für Tabellenköpfe, Beispiele usw. – seit 17.10.2026 neutral statt mintgrün (#EEF6F1) */
  --fir: #1E2220;         /* dunkle Flächen, Schrift, Chat-Blasen: neutrales Fast-Schwarz (bis 16.10.2026 Tannengrün #1F3D33) */
  --fir-2: #3A403D;
  --white: #F8F8F6;       /* seit 17.10.2026 neutral (vorher Frischweiß #F3F7F1 mit Grünstich) */
  --card: #FFFFFF;
  --gray: #5E6D67;        /* Nebentext: 5,1:1 auf Frischweiß (vorher #6B7A74 mit 4,2:1) */
  --line: #E1E8E3;
  --danger: #C2410C;
  --danger-bg: #FDECE3;
  --warn: #B45309;
  --warn-bg: #FEF3C7;
  --ok: #2E8A63;
  --ok-bg: #DCEFE4;

  /* Hausschriften seit 22.10.2026: Plus Jakarta Sans (die Schrift der App) für Text und Bedienung, Source Serif 4 für
     Überschriften (h1, h2). Inter (16.–22.10.) ist ersetzt – Website und App sehen jetzt wie eine Marke aus. */
  --font: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-app: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ink: #1B1E1D;         /* fast Schwarz für Knöpfe und Überschriften (Alpin Klar; bis 16.10.2026 Tannengrün #16302A) */
  --fs-0: 0.875rem;  /* 14 */
  --fs-1: 1rem;      /* 16 */
  --fs-2: 1.125rem;  /* 18 */
  --fs-3: 1.25rem;   /* 20 – Kartentitel, eine Größe für alle h3 */
  --fs-4: 1.75rem;   /* 28 */
  --fs-5: 2.25rem;   /* 36 */
  --fs-6: clamp(2.5rem, 2rem + 2.6vw, 4rem);
  /* Feste Skala: 14 · 16(17) · 18 · 20 · 28 · 36–44 · 40–64. Nichts unter 14 px außerhalb des Handy-Mockups. */

  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(31, 61, 51, .05), 0 3px 10px rgba(31, 61, 51, .06);
  --sh-md: 0 6px 24px rgba(31, 61, 51, .10);
  --sh-lg: 0 20px 60px rgba(31, 61, 51, .16);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms; --t-med: 260ms; --t-slow: 480ms;

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(4rem, 8vw, 7.5rem);
  --section-sm: clamp(3rem, 5vw, 4rem);      /* Zahlenleiste, kurze Zwischenstücke */
  --section-lg: clamp(5rem, 10vw, 9rem);     /* Preise, Formular – mehr Luft vor den wichtigen Stellen */
  --card-pad: 1.5rem;                        /* ein Innenabstand für alle Karten, ab 800 px 2rem */
  --header-h: 80px;        /* Kopfleiste luftiger (17.10.2026, vorher 72px) */
  color-scheme: light;
}
@media (min-width: 800px) { :root { --card-pad: 2rem; } }

/* ---------- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-1); line-height: 1.6;
  color: var(--fir); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } } /* 17 px Fließtext am Desktop – Zielgruppe 60+ */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mint-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fir); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mint-light); color: var(--fir); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--fir); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); z-index: 1000; transition: top var(--t-fast); }
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; color: var(--fir); text-wrap: balance; }
h1, h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; color: var(--ink); }
h1 em, h2 em { font-style: italic; font-weight: 500; }
h1 { font-size: var(--fs-6); }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); }
h3 { font-size: var(--fs-3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: var(--fs-2); font-weight: 600; line-height: 1.3; }
/* Handy-Darstellungen zeigen die App – dort bleibt deren Schrift, auch für Überschriften im Mockup */
.phone, .phone h1, .phone h2, .phone h3, .stage, .hc { font-family: var(--font-app); }
p { margin: 0 0 1em; }
main p { max-width: 48ch; } /* ≈ 70–75 Zeichen je Zeile: die „0“ von Plus Jakarta Sans ist 0,73 em breit, ein Buchstabe im Mittel nur 0,46 em */
.center p, .section-head--center p, .cta-band p, .map__consent-card p, .weather__day p { margin-inline: auto; }
.lead { font-size: var(--fs-2); color: var(--gray); max-width: 46ch; }
.muted { color: var(--gray); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fir-2); margin-bottom: .9rem; }
.eyebrow::before { content: ''; width: 1.6rem; height: 3px; background: var(--mint); border-radius: 2px; }
.small { font-size: var(--fs-0); }
.tabular { font-variant-numeric: tabular-nums; }
strong { font-weight: 700; }

/* ---------- 4. Layout ---------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { --container: 800px; }
.container--wide { --container: 1360px; }
.section { padding-block: var(--section); }
.section--tight, .section--sm { padding-block: var(--section-sm); }
.section--lg { padding-block: var(--section-lg); }
.section--alt { background: var(--mint-soft); }
.section--dark { background: var(--fir); color: #E8F0EB; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead, .section--dark .muted { color: #B9CCC2; }
.section--dark .eyebrow { color: #8FD3B4; }
.section-head { max-width: 50ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } .split--rev > :first-child { order: 2; } }
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --bg: var(--card); --fg: var(--fir); --bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.4rem; border-radius: 10px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font-weight: 600; font-size: var(--fs-1); text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); color: var(--fg); }
.btn:active { transform: translateY(0); }
.btn--primary { --bg: var(--ink); --fg: #fff; --bd: var(--ink); font-size: 1.0625rem; }
.btn--primary:hover { --bg: #0B1D18; --bd: #0B1D18; box-shadow: 0 8px 22px rgba(22, 48, 42, .3); }
.btn--secondary { --bg: var(--fir); --fg: #fff; --bd: var(--fir); }
.btn--secondary:hover { --bg: var(--fir-2); --bd: var(--fir-2); }
.btn--ghost { --bg: transparent; --bd: transparent; }
.btn--ghost:hover { --bg: var(--mint-light); box-shadow: none; }
.btn--outline { --bg: transparent; --bd: var(--fir); }
.btn--outline:hover { --bg: var(--fir); --fg: #fff; }
.btn--sm { min-height: 44px; padding: .5rem 1rem; font-size: var(--fs-0); }
.btn--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: var(--fs-2); }
.btn--block { width: 100%; }
.btn .icon { flex: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.section--dark .btn--ghost { --fg: #fff; } .section--dark .btn--ghost:hover { --bg: rgba(255,255,255,.1); }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--mint-deep); }
.link-arrow .icon { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- 6. Header ---------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid transparent; transition: border-color var(--t-med), box-shadow var(--t-med); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 24px rgba(31, 61, 51, .06); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
/* Logo: Original aus dem Brand-Guide (Pfade). Schutzraum = Höhe der Bildmarke, deshalb Padding statt enger Kanten. */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--fir); padding: .35rem 0; }
.logo .logo-mark { display: block; height: 30px; width: auto; min-width: 110px; }
.logo-word span { color: var(--mint); }
.site-nav { margin-left: auto; display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.site-nav a { display: block; padding: .65rem .85rem; border-radius: var(--r-pill); color: var(--fir); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background var(--t-fast); }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--mint-light); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.site-header__actions .btn--ghost, .site-header__actions .btn--primary, .site-header__actions .btn--outline { display: none; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--r-pill); text-decoration: none; font-weight: 700; font-size: var(--fs-0); color: var(--fir); border: 1.5px solid var(--line); background: var(--card); }
.lang-switch:hover { background: var(--mint-light); }
.menu-toggle { width: 48px; height: 48px; border: 0; background: transparent; border-radius: var(--r-pill); position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { content: ''; position: absolute; left: 13px; width: 22px; height: 2.5px; background: var(--fir); border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
.menu-toggle__bars { top: 23px; }
.menu-toggle__bars::before { top: -7px; left: 0; } .menu-toggle__bars::after { top: 7px; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--line); background: var(--white); padding-block: 1rem 1.5rem; max-height: calc(100dvh - var(--header-h)); overflow: auto; }
.mobile-menu ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.mobile-menu li a { display: block; padding: .8rem .5rem; font-weight: 700; font-size: var(--fs-2); text-decoration: none; color: var(--fir); border-bottom: 1px solid var(--line); }
.mobile-menu__cta { display: grid; gap: .6rem; }
.mobile-menu__lang { text-align: center; padding: .6rem; font-weight: 600; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__actions { margin-left: 0; }
  .site-header__actions .btn--ghost, .site-header__actions .btn--primary, .site-header__actions .btn--outline { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}
/* Zwischen 1024 und 1279 px ist kein Platz für alle drei Knöpfe – „Live-Demo“ bleibt über Seiteninhalt und Fußzeile erreichbar */
.site-nav a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .site-header__actions .site-header__demo { display: none; } .site-nav a { padding-inline: .5rem; font-size: .9rem; } .site-header__inner { gap: 1rem; } }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--white); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(0px); opacity: .9; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 248, 246, .35) 0%, rgba(248, 248, 246, .85) 55%, var(--white) 100%); }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--mint-dark); }
.hero .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; color: var(--gray); font-size: var(--fs-0); font-weight: 600; }
.hero__proof span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__proof .icon { color: var(--mint-dark); }
.hero__phone { display: flex; justify-content: center; }

/* Hero-Video (Seedance) hinter Text und Handy; links ein heller Schleier, damit Tannengrün lesbar bleibt */
.hero--video { min-height: min(92vh, 860px); display: flex; align-items: center; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #DCE7DF; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__media img { z-index: 0; }
.hero__media video { z-index: 1; opacity: 0; transition: opacity 1.2s ease; }
.hero__media video.is-playing { opacity: 1; }
.hero__media::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(248, 248, 246, .94) 0%, rgba(248, 248, 246, .82) 38%, rgba(248, 248, 246, .35) 68%, rgba(248, 248, 246, .12) 100%), linear-gradient(180deg, rgba(248, 248, 246, .35) 0%, rgba(248, 248, 246, 0) 30%, rgba(248, 248, 246, 0) 70%, var(--white) 100%); }
@media (max-width: 959px) { .hero__media::after { background: linear-gradient(180deg, rgba(248, 248, 246, .92) 0%, rgba(248, 248, 246, .82) 55%, rgba(248, 248, 246, .6) 80%, var(--white) 100%); } }
.hero--video .hero__proof { color: var(--fir-2); }
/* Kennzeichnung „KI-generiert“ direkt am Bild (KI-VO Art. 50 Abs. 4): klein, aber lesbar (14 px, Kontrast > 7:1) */
.hero__ai-label { position: absolute; right: var(--gutter); bottom: .75rem; z-index: 2; margin: 0; max-width: none; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9); color: var(--fir); font-size: var(--fs-0); font-weight: 600; line-height: 1.3; }
.hero__ai-label .icon { color: var(--mint-deep); flex: none; }
/* Ist das Handy zum Live-Chat gedreht, ist kein KI-Bild zu sehen – der Hinweis tritt zurück und verdeckt den Chat nicht */
.hero:has(.flip.is-open) .hero__ai-label { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
@media (max-width: 959px) { .hero__ai-label { position: static; order: 2; margin: 1.25rem auto 0; width: max-content; max-width: calc(100% - 2 * var(--gutter)); } .hero--video { flex-direction: column; } }
/* Handy: kompakter Einstieg – kleinere Überschrift, weniger Luft, Handy-Foto schmaler, damit es in die erste Bildschirmhöhe rückt */
@media (max-width: 959px) {
  .hero { padding-block: 2rem 2.5rem; }
  .hero--video { min-height: 0; }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 2.5rem); margin-bottom: 1rem; }
  .hero .lead { margin-bottom: 1.5rem; }
  .hero__cta { margin-bottom: 1.1rem; }
  .hero__grid { gap: 2rem; }
}

/* Feste Leiste am unteren Rand (nur Handy und Tablet): erscheint nach der ersten Sektion, verschwindet beim Formular und Footer */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: .6rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
.sticky-cta .btn { flex: 1; min-width: 0; padding-inline: .75rem; }
.sticky-cta.is-on { transform: none; }
/* Handy: Seite darf nie seitlich wandern (auch bei großer Systemschrift) – Buttons umbrechen statt überstehen */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@media (max-width: 1023px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .hero__grid > *, .split > *, .grid > * { min-width: 0; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .sticky-cta .btn { font-size: .95rem; padding-block: .55rem; }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .checklist li { overflow-wrap: anywhere; }
  .seg { flex-wrap: wrap; justify-content: center; max-width: 100%; border-radius: 1.4rem; }
}
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* Handy als Foto (aus der Tourismusbüro-Präsentation): Studio-Bühne mit weichem Schatten dahinter */
.hero__phone--shot::before { display: none; }
.stage { position: relative; display: grid; place-items: center; padding: .5rem 0; isolation: isolate; }
.stage::before, .stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.stage::before { width: min(560px, 124%); height: min(620px, 104%); background: radial-gradient(closest-side, rgba(40,80,64,.26) 0%, rgba(44,96,76,.17) 44%, rgba(52,120,94,.06) 72%, rgba(61,165,122,0) 100%); filter: blur(26px); transform: translateX(-8%); }
.stage::after { width: min(360px, 80%); height: min(420px, 72%); background: radial-gradient(closest-side, rgba(38,82,66,.18) 0%, rgba(38,82,66,0) 74%); filter: blur(34px); transform: translate(16%, 14%); }
.stage__shot { display: block; position: relative; width: min(300px, 100%); height: auto; filter: drop-shadow(-16px 24px 34px rgba(31,61,51,.22)) drop-shadow(-3px 7px 11px rgba(31,61,51,.12)); animation: floatY 7s ease-in-out infinite; }
@media (max-width: 959px) { .stage__shot { width: min(230px, 68%); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .stage__shot { animation: none; } }
/* Hinweis senkrecht neben dem Handy: „Antworten sind Beispiele und frei erfunden“ */
.stage__note { position: absolute; left: calc(50% + 170px); top: 50%; transform: translateY(-50%); margin: 0; writing-mode: vertical-rl; font-size: var(--fs-0); font-weight: 600; letter-spacing: .04em; color: var(--fir-2); white-space: nowrap; pointer-events: none; }
@media (max-width: 959px) { .stage__note { position: static; transform: none; writing-mode: horizontal-tb; text-align: center; margin-top: .75rem; letter-spacing: 0; white-space: normal; } }
/* Drehen: Foto vorne, echter Demo-Chat dahinter. Beim Antippen dreht das Foto weg und der Chat frontal herein. */
.flip { perspective: 1400px; }
.flip__front { all: unset; display: block; width: min(300px, 100%); cursor: pointer; transform-origin: 50% 50%; transition: transform .7s var(--ease), opacity .4s ease; }
.flip__front .stage__shot { width: 100%; }
.flip__front:focus-visible { outline: 3px solid var(--mint); outline-offset: 6px; border-radius: 44px; }
.flip__back { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: rotateY(32deg) scale(.92); transform-origin: 50% 50%; transition: transform .7s var(--ease), opacity .4s ease .15s; }
.flip__back .phone { --phone-w: 300px; margin: 0; }
/* Schmale Bildschirme: Handy und Hinweis untereinander (nebeneinander wurde das Handy auf wenige Pixel gequetscht);
   Foto und Live-Chat gleich breit, damit der gedrehte Chat nicht über den Hero hinausragt */
@media (max-width: 959px) {
  .hero__phone--shot { flex-direction: column; align-items: center; }
  .hero__phone--shot .stage { width: 100%; }
  .flip__front { width: min(262px, 76%); }
  .flip__back .phone { --phone-w: min(262px, 76vw); }
}
.flip.is-open .flip__front { transform: rotateY(-32deg) scale(.92); opacity: 0; pointer-events: none; }
.flip.is-open .flip__back { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- 8. Cards & glass -------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--sh-sm); }
.card--flat { box-shadow: none; }
.card--hover { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card--accent { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-light), var(--sh-md); }
.card--dark { background: var(--fir); color: #E8F0EB; border-color: var(--fir); }
.card--dark h3, .card--dark h4 { color: #fff; }
/* .glass heißt aus Gewohnheit noch so – seit 22.10.2026 eine deckende Fläche ohne Milchglas (backdrop-filter galt als KI-Vorlagenmuster) */
.glass { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.glass--strong { background: #fff; }
.photo-band { position: relative; isolation: isolate; overflow: hidden; }
.photo-band__bg { position: absolute; inset: -20px; z-index: -1; }
.photo-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.06); }
.photo-band__bg::after { content: ''; position: absolute; inset: 0; background: rgba(31, 61, 51, .28); }
.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--mint-light); color: var(--mint-dark); flex: none; }
.icon-badge--dark { background: rgba(255,255,255,.12); color: #8FD3B4; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--r-pill); background: var(--mint-light); color: var(--fir); font-size: var(--fs-0); font-weight: 700; }
.pill--gray { background: #EAEFEC; color: var(--gray); }
.pill--dark { background: var(--fir); color: #fff; }

/* ---------- 9. Phone mockup & chat -------------------------------------- */
.phone {
  --phone-w: 340px;
  width: var(--phone-w); max-width: 100%; aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px;
  background: linear-gradient(160deg, #2A3B35, #14211C); box-shadow: var(--sh-lg), inset 0 0 0 2px rgba(255,255,255,.08);
  position: relative; margin-inline: auto;
}
.phone::before { content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #0E1613; border-radius: 20px; z-index: 5; }
.phone__screen { position: absolute; inset: 12px; border-radius: 36px; overflow: hidden; background: #E9F0EA; display: flex; flex-direction: column; isolation: isolate; }
.phone__screen::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/media/phone-bg-1x.jpg') center/cover; filter: blur(7px) saturate(105%); transform: scale(1.08); }
.phone__screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(200, 220, 208, .55), rgba(233, 240, 234, .78) 45%, rgba(248, 248, 246, .9)); }
.phone--lg { --phone-w: 400px; }
.phone--full { --phone-w: min(440px, 100%); aspect-ratio: auto; height: min(860px, calc(100dvh - var(--header-h) - 3rem)); }

.chat { display: flex; flex-direction: column; height: 100%; color: var(--fir); font-size: 14px; line-height: 1.45; }
/* Kopfkarte – Aufbau wie in der echten App: Logo-Kachel, Hausname mit Neon-Punkt, „Ihr Concierge · rund um die Uhr“, SOS rot, Sprache */
.chat__head { margin: 52px 10px 8px; padding: 9px 10px; border-radius: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(31,61,51,.06); }
.chat__avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--host-color, var(--mint)); color: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat__avatar svg { width: 24px; height: 24px; }
/* Mitte (Name + Untertitel) darf schrumpfen und wird mit … gekürzt; SOS und Sprache bleiben fest und immer in der Karte */
.chat__head > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.chat__title { font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--host-color, var(--fir)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__title .live-dot { display: inline-block; vertical-align: middle; margin-left: 4px; }
.chat__sub { font-size: 11px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__tools { margin-left: auto; display: flex; gap: 5px; flex: none; }
.chat__tool { height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--fir); display: grid; place-items: center; font-size: 11px; font-weight: 700; white-space: nowrap; flex: none; }
.chat__tool--sos { background: #C94A3A; border-color: #C94A3A; color: #fff; font-weight: 800; letter-spacing: .02em; }
/* Wetterleiste – vier kleine Karten: Tag, Symbol, Tal-Temperatur, Regen, Berg */
.weather-strip { margin: 0 10px 6px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.weather-strip > div { background: rgba(243,247,241,.95); border: 1px solid var(--line); border-radius: 9px; padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.weather-strip__day { font-size: 10px; color: var(--fir); font-weight: 700; }
.weather-strip__temp { font-size: 11.5px; font-weight: 800; }
.weather-strip__temp small { font-weight: 600; color: var(--gray); }
.weather-strip .icon { margin: 1px auto; color: var(--mint-dark); }
.weather-strip__rain { font-size: 9.5px; color: var(--gray); }
.weather-strip__berg { font-size: 9px; color: var(--gray); border-top: 1px solid var(--line); width: 100%; padding-top: 2px; margin-top: 1px; }
.chat__log { flex: 1; overflow-y: auto; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.chat__log::-webkit-scrollbar { width: 0; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 18px; box-shadow: 0 2px 8px rgba(31,61,51,.08); animation: msgIn var(--t-med) var(--ease) both; }
.msg--bot { align-self: flex-start; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-left-radius: 6px; border: 1px solid rgba(255,255,255,.9); }
.msg--user { align-self: flex-end; background: var(--fir); color: #fff; border-bottom-right-radius: 6px; }
/* Zeile: kleine Bildmarke links, Sprechblase, runder Vorlesen-Knopf rechts (wie in der App) */
.msg-row { display: flex; align-items: flex-end; gap: 6px; max-width: 96%; }
.msg-row .msg { max-width: none; min-width: 0; }
.msg__avatar { width: 22px; height: 22px; border-radius: 6px; background: var(--host-color, var(--mint)); color: #fff; display: grid; place-items: center; flex: none; overflow: hidden; margin-bottom: 4px; }
.msg__avatar svg { width: 14px; height: 14px; } .msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg__speak { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--gray); display: grid; place-items: center; flex: none; align-self: center; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.msg__speak:hover { color: var(--fir); transform: scale(1.06); }
.msg__speak.is-on { color: var(--host-color, var(--mint-dark)); border-color: currentColor; animation: livePulse 1.6s infinite; }
.msg p { margin: 0; } .msg p + p { margin-top: 6px; }
.msg ul { margin: 6px 0 0; padding-left: 16px; }
.msg a { color: inherit; font-weight: 700; }
.msg--bot .msg__ai { display: block; margin-top: 6px; font-size: 10px; color: var(--gray); }
.msg__img { margin-top: 8px; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--mint-light); display: grid; place-items: center; color: var(--mint-dark); }
.msg__img svg { width: 60%; height: 60%; }
/* „schreibt …“ – Pille mit wanderndem Farbrand (Rosé → Hausfarbe → Gold) */
.msg--typing { display: inline-flex; gap: 5px; align-items: center; padding: 11px 14px; position: relative; }
.msg--typing::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--a, 0deg), #F4A6C1, var(--host-color, var(--mint)), #F6C177, #F4A6C1); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 2.2s linear infinite; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); opacity: .6; animation: bounce 1.1s infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; } .msg--typing i:nth-child(3) { animation-delay: .3s; }
.msg--typing span { font-size: 13px; color: var(--fir); margin-left: 4px; }
/* Schnellfragen – umrandete Chips in der Hausfarbe */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 10px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 34px; padding: 6px 13px; border-radius: var(--r-pill); border: 1.5px solid var(--host-color, var(--mint-dark)); background: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 600; color: var(--host-color, var(--mint-dark)); white-space: nowrap; transition: background var(--t-fast), transform var(--t-fast); }
.chip:hover { background: #fff; transform: translateY(-1px); }
.chip:active { transform: scale(.97); }
/* Eingabezeile – Textfeld, Kamera, Mikrofon, runder Senden-Knopf mit Pfeil */
.chat__input { margin: 0 10px 12px; padding: 6px; border-radius: 22px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 16px rgba(31,61,51,.10); }
.chat__input input, .chat__field { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 9px 12px; font-size: 14px; outline: none; color: var(--fir); }
.chat__field { color: var(--gray); }
.chat__input input::placeholder { color: var(--gray); }
.chat__input input:focus { border-color: var(--host-color, var(--mint)); }
.chat__ibtn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--gray); display: grid; place-items: center; flex: none; }
.chat__ibtn--send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--host-color, var(--mint)); color: #fff; }
.chat__ibtn--send:hover { filter: brightness(.94); }
.chat__ai-note { font-size: 10px; color: var(--gray); text-align: center; margin: -6px 12px 10px; }
.chat__ai-note b { color: var(--fir); }
/* Gäste-Concierge auf allen Handys (Stand Software 25.09.2026, Stil „Elegant“): Grundton #F3F7F1 mit sanft eingemischter
   Hauptfarbe, Haarlinien = Hauptfarbe mit 38 % Deckkraft, Serifenschrift Lora für Name, Begrüßung, Türen und Schnellfragen
   (selbst gehostet in /fonts, Fallback Georgia), Plus Jakarta Sans für alles andere. */
.phone__screen--hc { --host-color: #3DA57A; --hc-line: #ADD8C3; --hc-line: color-mix(in srgb, var(--host-color) 38%, transparent); --hc-bg: #F3F7F1; --hc-bg: color-mix(in srgb, var(--host-color) 4%, #F3F7F1); --hc-serif: 'Lora', Georgia, 'Noto Serif', 'Times New Roman', serif; background: var(--hc-bg); }
.phone__screen--hc::before, .phone__screen--hc::after { display: none; }
/* Startseite: Live-Chat hinter dem Handy-Foto im selben, etwas dunkleren Ton wie der Bildschirm im Foto */
.flip__back .phone__screen--hc { --hc-bg: #E4EBE5; }
/* Hotel Alpenrose (Stand App v1.6, 27.09.2026): Creme-Grund, Gold als Hauptfarbe, fast schwarze Schrift, Logo bleibt HejGast-Grün */
.phone__screen--hc[data-concierge="hotel"] { --host-color: #B08D57; --hc-bg: #F7F3EC; --hc-line: #DCCCB3; --hc-logo: #3DA57A; --fir: #2C2B27; }
.flip__back .phone__screen--hc[data-concierge="hotel"] { --hc-bg: #E8E7E0; }
.hc { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--fir); font-size: 13px; line-height: 1.45; background: var(--hc-bg); }
.hc--soft { background: radial-gradient(60% 40% at 85% 12%, color-mix(in srgb, var(--host-color) 22%, transparent), transparent 70%), radial-gradient(55% 35% at 10% 88%, color-mix(in srgb, var(--host-color) 16%, transparent), transparent 70%), var(--hc-bg); }
.hc button { font-family: inherit; }
/* Kopf: Start = Logo · Name mittig · Sprache; Chat = Zurück · Logo · Name · Notruf · Sprache */
.hc__head { display: flex; align-items: center; gap: 5px; padding: 44px 9px 6px; }
.hc__brand { flex: 1; min-width: 0; text-align: center; line-height: 1.15; }
.hc__name { font-family: var(--hc-serif); font-weight: 500; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc__stars { font-size: 6.5px; letter-spacing: .3em; color: var(--host-color); margin: 2px 0 1px; }
.hc__stars b { font-size: 7px; letter-spacing: 0; }
.hc__sub { font-size: 6.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); white-space: nowrap; }
.hc__logo { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1.5px solid var(--hc-line); display: grid; place-items: center; }
.hc__logo > span { width: 21px; height: 21px; border-radius: 7px; background: var(--hc-logo, var(--host-color)); color: #fff; display: grid; place-items: center; overflow: hidden; }
.hc__logo svg { width: 14px; height: 14px; } .hc__logo img { width: 100%; height: 100%; object-fit: cover; }
.hc__round { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--hc-line); background: rgba(255,255,255,.7); color: var(--fir); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hc__sos { color: #A83E30; border-color: rgba(168, 62, 48, .45); }
.hc[data-mode="start"] .hc__back, .hc[data-mode="start"] .hc__sos { display: none; }
.hc__lang { position: relative; flex: none; }
.hc__langbtn { height: 26px; padding: 0 7px 0 9px; border-radius: 999px; border: 1.5px solid var(--hc-line); background: rgba(255,255,255,.7); color: var(--fir); font: 800 10.5px/1 var(--font); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.hc__langmenu { position: absolute; right: 0; top: 30px; z-index: 6; min-width: 130px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 10px 24px rgba(31,61,51,.14); }
.hc__langmenu button { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.hc__langmenu button b { width: 20px; font-size: 10px; color: var(--gray); }
.hc__langmenu button:hover, .hc__langmenu button:focus-visible { background: #F4F1EB; }
.hc__langmenu button[aria-checked="true"] { color: var(--mint-dark); font-weight: 700; }
.hc :is(button, a, input):focus-visible { outline: 2px solid var(--host-color); outline-offset: 2px; }
/* Oberer Chatbereich: Anzeige des Ortes, Wetterleiste, Schnellfragen – nur im Gespräch */
.hc__top { display: none; flex-direction: column; gap: 5px; padding: 0 9px 5px; }
.hc[data-mode="chat"] .hc__top { display: flex; }
.hc__ad { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--hc-line); font-size: 9.5px; white-space: nowrap; overflow: hidden; }
.hc__ad span { flex: none; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 999px; padding: 1px 5px; }
.hc__ad b { font-weight: 700; } .hc__ad em { font-style: normal; color: var(--gray); overflow: hidden; text-overflow: ellipsis; }
.hc__wx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hc__wx > div { display: grid; justify-items: center; gap: 0; padding: 3px 2px; border-radius: 8px; background: #fff; border: 1px solid var(--hc-line); font-size: 8.5px; line-height: 1.2; }
.hc__wx span { color: var(--gray); } .hc__wx svg { color: var(--host-color); margin: 1px 0; } .hc__wx b { font-size: 10px; } .hc__wx small { color: var(--gray); font-size: 7.5px; }
.hc__chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.hc__chips::-webkit-scrollbar { display: none; }
.hc__chip { flex: none; min-height: 26px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hc-line); background: #fff; font-family: var(--hc-serif) !important; font-size: 11.5px; color: var(--fir); white-space: nowrap; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
.hc__chip:hover { border-color: var(--host-color); transform: translateY(-1px); }
/* Willkommensbildschirm */
.hc__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hc__body::-webkit-scrollbar { width: 0; }
.hc__start { padding: 0 12px; }
.hc[data-mode="chat"] .hc__start { display: none; }
.hc__greet { font-family: var(--hc-serif); font-weight: 500; font-size: 18.5px; line-height: 1.27; letter-spacing: -.005em; text-align: center; margin: 10px 2px 9px; color: var(--fir); }
.hc__rule { display: block; width: 28px; height: 1.5px; margin: 0 auto 10px; background: var(--host-color); opacity: .6; }
.hc__topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hc-line); }
.hc__topics li { border-bottom: 1px solid var(--hc-line); }
.hc__topic { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 4px; font-family: var(--hc-serif) !important; font-size: 14px; color: var(--fir); cursor: pointer; transition: background var(--t-fast), padding var(--t-fast); }
.hc__topic svg { color: var(--host-color); flex: none; }
.hc__topic:hover { background: rgba(255,255,255,.6); padding-left: 8px; }
.hc__disc { font-size: 8.5px; line-height: 1.5; color: #7D8B85; text-align: center; margin: 10px 6px 8px; max-width: none; }
/* Begrüßung blendet sich langsam ein (2,6 s), die Türen erscheinen nacheinander */
.hc--anim .hc__greet { animation: hcGreet 2.6s ease both; }
.hc--anim .hc__rule { animation: hcIn .6s ease 1.2s both; }
.hc--anim .hc__topics li { animation: hcIn .5s var(--ease) both; animation-delay: calc(1.3s + var(--i) * .18s); }
.hc--anim .hc__disc { animation: hcIn .5s ease 2.1s both; }
@keyframes hcGreet { 0% { opacity: .06; } 35% { opacity: .35; } 100% { opacity: 1; } }
@keyframes hcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Gespräch */
.hc__log { display: none; flex-direction: column; gap: 8px; padding: 6px 10px; }
.hc[data-mode="chat"] .hc__log { display: flex; }
.hc .msg { font-size: 12.5px; padding: 9px 12px; box-shadow: none; }
.hc .msg--bot { background: #fff; border: 1px solid var(--hc-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hc .msg--user { background: var(--host-color); color: #fff; }
.hc .msg__ai { font-size: 9.5px; }
.hc .msg__avatar { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--hc-line); color: var(--host-color); }
.hc .msg__avatar svg { width: 13px; height: 13px; }
.hc .msg__speak { width: 26px; height: 26px; border: 1px solid var(--hc-line); background: #fff; }
.hc .msg--dots { display: inline-flex; gap: 5px; align-items: center; padding: 10px 13px; }
.hc .msg--dots i { width: 6px; height: 6px; border-radius: 50%; background: #9AA6A1; animation: bounce 1.1s infinite; }
.hc .msg--dots i:nth-child(2) { animation-delay: .15s; } .hc .msg--dots i:nth-child(3) { animation-delay: .3s; }
.hc .msg--dots span { font-size: 12px; color: var(--gray); margin-left: 3px; }
.hc__photo { margin-top: 6px; border-radius: 10px; aspect-ratio: 4/3; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.hc__photo--bot { background: #F4F1EB; color: var(--host-color); }
.hc__actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
/* Frage-Pille unten: die einzige Glaskarte */
.hc__input { display: flex; align-items: center; gap: 2px; margin: 4px 8px 6px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(255,255,255,.88); border: 1.5px solid var(--hc-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hc__input:focus-within { border-color: var(--host-color); }
.hc__input input, .hc__field { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 13px/1.2 var(--font); color: var(--fir); outline: none; padding: 8px 0; }
.hc__field, .hc__input input::placeholder { color: #8E9A95; }
.hc__ibtn { width: 32px; height: 32px; border: 0; background: transparent; color: #56645E; display: grid; place-items: center; border-radius: 50%; flex: none; cursor: pointer; }
.hc__ibtn:hover { background: #F4F1EB; color: var(--fir); }
.hc__send { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--host-color); color: #fff; display: grid; place-items: center; flex: none; cursor: pointer; }
.hc__send:hover { filter: brightness(.94); }
.hc__foot { font-size: 8.5px; color: var(--gray); text-align: center; margin: 0 0 9px; }
.hc__foot b { color: #56645E; }
.hc__foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Notfall-Fenster */
.hc__overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; background: rgba(31,61,51,.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hc__overlay[hidden] { display: none; }
.hc__sheet { width: 100%; max-height: 88%; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 12px 12px 14px; font-size: 11.5px; animation: hcIn .3s var(--ease) both; }
.hc__sheet-head { display: flex; justify-content: space-between; align-items: center; }
.hc__sheet-head strong { color: #A83E30; font-size: 17px; }
.hc__sheet p { margin: 4px 0 8px; max-width: none; }
.hc__addr { background: #EEF4EF; border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 13px; }
.hc__loc { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.hc__loc p { font-size: 10px; color: var(--gray); margin: 6px 0 0; }
.hc__locbtn { width: 100%; min-height: 30px; border-radius: 999px; border: 1.5px solid var(--host-color); background: #fff; font-weight: 700; font-size: 11px; color: var(--fir); cursor: pointer; }
.hc__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc__nums a { display: grid; justify-items: center; padding: 6px 4px; border-radius: 10px; background: #C8462F; color: #fff; text-decoration: none; line-height: 1.2; }
.hc__nums b { font-size: 15px; } .hc__nums span { font-size: 9.5px; }
.hc__sheet h4 { font-size: 11px; margin: 10px 0 5px; }
.hc__near { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hc__near li { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #F8F6F1; border: 1px solid var(--line); }
.hc__near a { color: var(--mint-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Stil „Klassisch“ (der bisherige Look): runde Pillen, weiche Karten mit Schatten */
.hc--classic .hc__topics { border: 0; display: grid; gap: 7px; }
.hc--classic .hc__topics li { border: 0; }
.hc--classic .hc__topic { background: #fff; border-radius: 999px; padding: 9px 14px; font-family: var(--font-app) !important; font-weight: 600; font-size: 12.5px; box-shadow: 0 3px 10px rgba(31,61,51,.08); }
.hc--classic .hc__greet, .hc--classic .hc__name, .hc--classic .hc__chip { font-family: var(--font-app) !important; }
.hc--classic .hc__greet { font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; }
.hc--classic .hc__name { font-weight: 800; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.hc--classic .msg--bot, .hc--classic .hc__chip, .hc--classic .hc__wx > div, .hc--classic .hc__ad { border-color: transparent; box-shadow: 0 2px 8px rgba(31,61,51,.08); }
.hc--classic .hc__chip { border: 1.5px solid var(--host-color); color: var(--host-color); font-weight: 600; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .hc--anim * { animation: none !important; } }
@media (max-width: 959px) {
  .hc__head { gap: 4px; padding-inline: 8px; }
  .hc__logo { width: 30px; height: 30px; } .hc__logo > span { width: 20px; height: 20px; }
  .hc__round { width: 26px; height: 26px; }
  .hc__name { font-size: 9px; letter-spacing: .14em; }
  .hc__langbtn { height: 24px; padding: 0 5px 0 7px; font-size: 10px; }
  .hc__greet { font-size: 16.5px; margin-top: 8px; }
  .hc__topic { font-size: 13px; padding-block: 7px; }
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --a: 360deg; } }

/* ---------- 10. Steps ---------------------------------------------------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: var(--card-pad); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-weight: 800; font-size: var(--fs-0); color: var(--mint-dark); letter-spacing: .08em; }
.step.is-active { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-light), var(--sh-md); transform: translateY(-3px); }
.step__art { height: 120px; margin: .75rem 0 1rem; display: grid; place-items: center; }
.step__art svg { height: 100%; width: auto; }
.step__art--tile svg { height: 104px; filter: drop-shadow(0 10px 22px rgba(61, 165, 122, .28)); transition: transform var(--t-med) var(--ease); }
.step.is-active .step__art--tile svg, .step:hover .step__art--tile svg { transform: translateY(-4px) scale(1.04); }
.step h3 { margin-bottom: .35rem; }
.step p { margin: 0; color: var(--gray); }
.step__progress { height: 3px; background: var(--line); border-radius: 2px; margin-top: 1.25rem; overflow: hidden; }
.step__progress i { display: block; height: 100%; width: 0; background: var(--mint); }
.step.is-active .step__progress i { animation: progress 3.2s linear forwards; }
@keyframes progress { to { width: 100%; } }

/* ---------- 11. Feature tiles -------------------------------------------- */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--t-med), border-color var(--t-med); }
.tile:has(.tile__toggle[aria-expanded="true"]) { border-color: var(--mint); box-shadow: var(--sh-md); }
/* Kopfzeile: Symbol · Titel · Pfeil; die Beschreibung darunter über die volle Kachelbreite (kein schmaler Textstreifen) */
.tile__toggle { width: 100%; text-align: left; background: none; border: 0; padding: var(--card-pad); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .75rem; align-items: center; color: var(--fir); }
.tile__toggle h3 { margin: 0; min-width: 0; overflow-wrap: break-word; }
.tile__toggle p { grid-column: 1 / -1; margin: 0; color: var(--gray); font-size: .95rem; overflow-wrap: break-word; }
.tile__toggle .icon-chevronDown { color: var(--gray); transition: transform var(--t-med) var(--ease); }
.tile__toggle[aria-expanded="true"] .icon-chevronDown { transform: rotate(180deg); }
.tile__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.tile__body[data-open] { grid-template-rows: 1fr; }
.tile__body > div { overflow: hidden; }
.tile__example { margin: 0 var(--card-pad) var(--card-pad); padding: 1rem; border-radius: var(--r-md); background: var(--mint-soft); display: grid; gap: .6rem; font-size: .95rem; }
.tile__example { grid-template-columns: minmax(0, 1fr); }
.tile__example .q, .tile__example .a { padding: .65rem .9rem; border-radius: 14px; max-width: 92%; overflow-wrap: break-word; hyphens: auto; }
.tile__example .q { background: var(--mint); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.tile__example .a { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.tile__example .a p { margin: 0; } .tile__example .a p + p { margin-top: .4rem; }

/* ---------- 12. Trust ---------------------------------------------------- */
.trust { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.trust__item { display: flex; gap: 1rem; align-items: flex-start; padding: var(--card-pad); border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.trust__item h3 { margin-bottom: .25rem; }
.trust__item p { margin: 0; color: #B9CCC2; font-size: .95rem; }

/* ---------- 13. Comparison ---------------------------------------------- */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--mint-light); gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: var(--r-pill); padding: .55rem 1.1rem; font-weight: 700; font-size: var(--fs-0); color: var(--fir); min-height: 40px; transition: background var(--t-fast), box-shadow var(--t-fast); }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: var(--sh-sm); }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare tbody th { font-weight: 600; }
.compare thead th { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .05em; color: var(--gray); background: var(--mint-soft); }
.compare thead th.is-us { color: var(--fir); background: var(--mint-light); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.is-us { background: rgba(220, 239, 228, .35); font-weight: 600; }
.compare .yes, .compare .no, .compare .part { display: inline-flex; align-items: flex-start; gap: .4rem; }
/* Symbol nie zusammendrücken – sonst rutscht es bei längerem Text (Handy, große Schrift) in die Schrift hinein */
.compare .yes .icon, .compare .no .icon, .compare .part .icon { flex: none; width: 18px; height: 18px; margin-top: .15em; }
.compare .yes .icon { color: var(--ok); } .compare .no .icon { color: var(--danger); } .compare .part .icon { color: var(--warn); }
.compare td small { display: block; color: var(--gray); font-weight: 400; }
/* Handy: statt seitlich scrollender Tabelle eine Karte je Merkmal, Spaltenname steht links vor dem Wert (data-col) */
@media (max-width: 719px) {
  .table-wrap { border: 0; background: transparent; overflow: visible; }
  .compare { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody, .compare tr { display: block; }
  .compare tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: .35rem 1rem .6rem; margin-bottom: .75rem; }
  .compare tbody th { display: block; padding: .7rem 0 .5rem; font-weight: 700; border-bottom: 1px solid var(--line); }
  .compare td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 0; align-items: start; }
  .compare td::before { content: attr(data-col); font-size: var(--fs-0); color: var(--gray); font-weight: 600; line-height: 1.4; padding-top: .1rem; min-width: 0; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; }
  .compare td > * { min-width: 0; }
  .compare td.is-us { background: transparent; }
  .compare td.is-us::before { color: var(--fir); }
}

/* ---------- 14. Pricing & calculator ------------------------------------ */
.price-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card__head { margin-bottom: 1rem; }
.price-card__amount { font-size: var(--fs-5); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: .5rem 0 .2rem; }
.price-card__amount small { font-size: var(--fs-1); font-weight: 600; color: var(--gray); letter-spacing: 0; }
.price-card__amount--text { font-size: var(--fs-4); line-height: 1.15; }
.price-card__gross { color: var(--gray); font-size: var(--fs-0); }
.price-card ul { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .55rem; flex: 1; align-content: start; } /* nicht auf die Höhe der Nachbarkarte strecken – sonst große Lücken zwischen den Punkten */
.price-card li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.price-card li .icon { color: var(--mint-dark); flex: none; margin-top: .15rem; }
.addon { margin-top: 1.25rem; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
.addon > * { min-width: 0; }
@media (min-width: 860px) { .addon { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.addon h3 { font-size: var(--fs-4); margin-bottom: .35rem; }
.addon__intro .checklist { margin-top: 1rem; }
.addon__label { font-weight: 700; margin: 0 0 .4rem; }
.addon__tiers { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .45rem; }
.addon__tiers li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; padding: .65rem .9rem; border-radius: var(--r-sm); background: var(--mint-soft); }
.addon__tiers span small { display: block; color: var(--gray); font-size: var(--fs-0); }
.addon__tiers strong { font-size: var(--fs-2); white-space: nowrap; }
.addon__tiers strong small { font-size: var(--fs-0); font-weight: 600; color: var(--gray); }
.addon .btn { margin-top: .75rem; }
.price-card .btn { margin-top: auto; white-space: normal; text-align: center; line-height: 1.25; padding-inline: 1rem; }
.calc { display: grid; gap: 2rem; }
@media (min-width: 900px) { .calc { grid-template-columns: 1.1fr .9fr; } }
.field { display: grid; gap: .45rem; margin-bottom: 1.25rem; }
.field label, .field .label { font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.field label output, .field .label output { font-weight: 800; color: var(--mint-deep); font-variant-numeric: tabular-nums; }
.field .hint { color: var(--gray); font-size: var(--fs-0); margin: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mint) var(--pct, 0%), var(--line) var(--pct, 0%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--mint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--mint); margin-top: -10px; box-shadow: var(--sh-sm); transition: transform var(--t-fast); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mint); box-shadow: var(--sh-sm); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.switch { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; font-weight: 700; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; transition: background var(--t-fast); flex: none; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform var(--t-med) var(--ease); }
.switch input:checked + .switch__track { background: var(--mint); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--mint); outline-offset: 3px; }
.calc__result { position: sticky; top: calc(var(--header-h) + 1rem); }
.calc__big { font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--fir); font-variant-numeric: tabular-nums; }
.calc__big small { font-size: var(--fs-1); font-weight: 600; color: var(--gray); letter-spacing: 0; }
.calc__rows { display: grid; gap: .5rem; margin: 1.25rem 0; padding: 1rem 0; border-block: 1px solid var(--line); font-size: .95rem; }
.calc__rows div { display: flex; justify-content: space-between; gap: 1rem; }
.calc__rows div strong { font-variant-numeric: tabular-nums; }
.calc__time { padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--mint-light); }
.calc__time strong { font-size: var(--fs-3); color: var(--fir); }

/* ---------- 15. Testimonials & logos ------------------------------------ */
.quote { position: relative; padding: var(--card-pad); }
.quote blockquote { margin: 0; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.quote figcaption { margin-top: 1.25rem; display: flex; align-items: center; gap: .9rem; color: var(--gray); }
.quote__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }   /* nur echte Fotos, keine Initialen (22.10.2026) */
.slider { position: relative; }
.slider__track { display: grid; }
.slider__track > * { grid-area: 1 / 1; opacity: 0; transition: opacity var(--t-slow) var(--ease); pointer-events: none; }
.slider__track > .is-active { opacity: 1; pointer-events: auto; }
.slider__nav { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }
.slider__dot { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; }
.slider__dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background var(--t-fast), transform var(--t-fast); }
.slider__dot[aria-pressed="true"] i { background: var(--mint); transform: scale(1.25); }

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.faq summary, .faq__body { overflow-wrap: break-word; hyphens: auto; } /* lange Wörter bei großer Handy-Schrift trennen statt überstehen */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.faq details[open] { border-color: var(--mint); box-shadow: var(--sh-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 700; font-size: var(--fs-2); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--gray); transition: transform var(--t-med) var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .faq__body { padding: 0 1.25rem 1.25rem; color: var(--fir); }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- 17. Forms ---------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { font-weight: 700; display: block; margin-bottom: .35rem; }
.form label .opt { font-weight: 500; color: var(--gray); }
.input, .form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .form select, .form textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--fir); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-light); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--danger); }
.form .error { color: var(--danger); font-size: var(--fs-0); margin: .35rem 0 0; }
.form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form__note { color: var(--gray); font-size: var(--fs-0); margin: 0; }
.form__status { padding: 1rem 1.25rem; border-radius: var(--r-md); font-weight: 600; }
.form__status--ok { background: var(--ok-bg); color: var(--fir); }
.form__status--err { background: var(--danger-bg); color: var(--danger); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.check input { width: 24px; height: 24px; margin-top: .1rem; accent-color: var(--mint-deep); flex: none; }
.check { min-height: 44px; }
/* Kleine Textlinks (Anrufen, WhatsApp, Datenschutz) bekommen 44 px Klickfläche, ohne dass sich das Layout verschiebt */
p.small a, .form__note a, .check a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }

/* ---------- 18. Footer --------------------------------------------------- */
.site-footer { background: var(--fir); color: #C9D8D0; padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: auto; }
.site-footer a { color: #E8F0EB; text-decoration: none; }
.site-footer ul a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; } /* 44 px hoch, Zeilenabstand bleibt */
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .logo { color: #fff; } /* Variante „Hell“: Gast weiß, Minze bleibt */
.site-footer .logo .logo-mark { height: 34px; }
.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.site-footer h3 { color: #fff; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer__brand p { margin: 1rem 0 0; max-width: 32ch; }
.site-footer__made { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: var(--r-pill); background: rgba(255,255,255,.08); font-size: var(--fs-0); font-weight: 700; color: #fff; }
.site-footer__social { display: flex; gap: .5rem; margin-top: .5rem; }
.site-footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); }
.site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: .75rem; font-size: var(--fs-0); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__bottom p { margin: 0; }

/* ---------- 19. Reveal & counters --------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } .reveal[data-delay="4"] { transition-delay: 320ms; }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stat { text-align: center; padding: 1.5rem 1rem; }
.stat__num { font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--fir); font-variant-numeric: tabular-nums; }
.stat__num span { color: var(--mint-dark); }
.stat__label { color: var(--gray); font-weight: 600; margin-top: .4rem; }

/* ---------- 20. Map, weather, QR, configurator -------------------------- */
.map { height: clamp(320px, 50vw, 520px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--mint-soft); z-index: 0; position: relative; }
/* Klick-Freigabe für die Luftbildkarte (Kartenbilder von basemap.at, Server der Stadt Wien) */
.map__consent { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at 50% 40%, rgba(61,165,122,.25), transparent 70%), url('/media/hero-still-1x.jpg') center/cover; }
.map__consent::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(10px) saturate(80%); -webkit-backdrop-filter: blur(10px) saturate(80%); background: rgba(243,247,241,.45); }
.map__consent-card { position: relative; max-width: 26rem; padding: 1.5rem; text-align: center; display: grid; justify-items: center; gap: .5rem; }
.map__consent-card .icon { color: var(--mint-dark); }
.map__consent-card h3 { margin: 0; }
.map__consent-card p { margin: 0 0 .5rem; color: var(--gray); font-size: .95rem; }
.map.is-loaded .map__consent { display: none; }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content-wrapper { border-radius: var(--r-md); box-shadow: var(--sh-md); }
.leaflet-popup-content { margin: 14px 16px; font-size: .95rem; line-height: 1.5; }
.leaflet-popup-content h4 { margin: 0 0 .35rem; }
.leaflet-popup-content ul { margin: .35rem 0 0; padding-left: 1rem; }
.hg-pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mint); border: 3px solid #fff; box-shadow: var(--sh-md); display: grid; place-items: center; }
.hg-pin::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.map-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); margin-top: 1rem; }
.map-list button { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: .7rem .9rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; min-height: 44px; transition: border-color var(--t-fast), background var(--t-fast); }
.map-list button:hover, .map-list button[aria-pressed="true"] { border-color: var(--mint); background: var(--mint-soft); }
.map-list .icon { color: var(--mint-dark); }
.weather { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.weather__day { text-align: center; padding: 1.1rem .75rem; }
.weather__day .icon { margin: .4rem auto; color: var(--mint-dark); }
.weather__name { font-weight: 800; }
.weather__temp { font-size: var(--fs-3); font-weight: 800; letter-spacing: -.02em; }
.weather__temp small { font-size: var(--fs-0); color: var(--gray); font-weight: 600; }
.weather__meta { color: var(--gray); font-size: var(--fs-0); margin: .25rem 0 0; }
.weather__status { color: var(--gray); font-size: var(--fs-0); margin-top: .75rem; }
.qr-tool { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .qr-tool { grid-template-columns: 1fr 1fr; } }
.qr-sign { width: min(100%, 360px); aspect-ratio: 105 / 148; margin-inline: auto; border-radius: 16px; background: linear-gradient(170deg, #fff 0%, var(--mint-soft) 100%); border: 1px solid var(--line); box-shadow: var(--sh-lg); padding: 7%; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; }
.qr-sign::before { content: ''; position: absolute; inset: auto -20% -25% -20%; height: 45%; background: var(--fir); clip-path: polygon(0 55%, 15% 40%, 30% 52%, 45% 30%, 60% 48%, 75% 26%, 90% 44%, 100% 34%, 100% 100%, 0 100%); opacity: .95; }
.qr-sign__hello { font-size: clamp(1rem, 4cqw, 1.4rem); font-weight: 800; letter-spacing: -.02em; color: var(--fir); margin: 0; }
.qr-sign__name { font-size: clamp(.8rem, 3.4cqw, 1.05rem); font-weight: 600; color: var(--gray); margin: .15rem 0 .8rem; }
.qr-sign__code { width: 56%; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 6%; box-shadow: var(--sh-sm); display: grid; place-items: center; }
.qr-sign__code svg, .qr-sign__code img, .qr-sign__code canvas { width: 100%; height: 100%; }
.qr-sign__hint { font-size: clamp(.65rem, 2.6cqw, .85rem); color: var(--fir); margin: .8rem 0 0; font-weight: 600; }
.qr-sign__brand { margin-top: auto; position: relative; z-index: 1; color: #fff; display: inline-flex; align-items: center; }
.qr-sign__brand .qr-sign__logo { height: clamp(14px, 5cqw, 22px); width: auto; }
.qr-sign__langs { position: relative; z-index: 1; color: #B9CCC2; font-size: clamp(.55rem, 2.2cqw, .7rem); margin: .2rem 0 0; letter-spacing: .04em; }
.qr-sign { container-type: inline-size; }
.config { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .config { grid-template-columns: .9fr 1.1fr; } }
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-sm); cursor: pointer; transition: transform var(--t-fast); }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fir); }
.color-input { display: flex; align-items: center; gap: .75rem; }
.color-input input[type="color"] { width: 56px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 4px; background: #fff; cursor: pointer; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 1.25rem; text-align: center; color: var(--gray); transition: border-color var(--t-fast), background var(--t-fast); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--mint); background: var(--mint-soft); }
.dropzone input { display: none; }

/* ---------- 21. Portal (app shell) ------------------------------------- */
.app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: #F6F9F7; font-size: 15px; }
@media (min-width: 1024px) { .app { grid-template-columns: 264px 1fr; grid-template-rows: 1fr; } }
.app__side { background: var(--fir); color: #D6E3DC; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .app__side { position: sticky; top: 0; height: 100dvh; overflow: auto; } }
.app__side .logo { color: #fff; }
.app__role { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8FB8A5; font-weight: 700; padding: 0 .75rem; margin-bottom: .35rem; }
.app__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app__nav a, .app__nav button { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: var(--r-sm); color: #D6E3DC; text-decoration: none; font-weight: 600; font-size: 15px; border: 0; background: transparent; width: 100%; text-align: left; min-height: 44px; transition: background var(--t-fast), color var(--t-fast); }
.app__nav a:hover, .app__nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.app__nav a[aria-current="page"], .app__nav button[aria-current="page"] { background: var(--mint); color: #fff; }
.app__nav .badge { margin-left: auto; }
/* Gruppenüberschriften im Ortsbereich (Baustein 1 · Baustein 2 · Admin-Bereich); nicht gebuchte Bausteine erscheinen gesperrt */
.app__group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8FB8A5; font-weight: 700; padding: .9rem .8rem .35rem; }
.app__group:first-child { padding-top: 0; }
.app__group.is-locked { color: #C9A96B; }
.app__nav li.is-locked button { opacity: .55; }
.month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.month-strip div { text-align: center; font-size: 12px; padding: .5rem .2rem; border-radius: 8px; background: #EEF2EF; color: var(--gray); }
.month-strip .is-paid { background: var(--mint); color: #fff; font-weight: 700; }
.month-strip .is-free { background: var(--mint-light); color: var(--fir); font-weight: 700; }
.app__side-foot { margin-top: auto; display: grid; gap: .5rem; font-size: 13px; color: #8FB8A5; }
.app__side-foot a { color: #D6E3DC; }
.app__main { padding: clamp(1rem, 3vw, 2rem); min-width: 0; }
.app__top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.app__top h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 0; }
.app__top .sub { color: var(--gray); margin: .2rem 0 0; }
.app__top .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.app__mobile-nav { display: flex; gap: .4rem; overflow-x: auto; padding: 0 0 .5rem; margin-bottom: 1rem; scrollbar-width: none; }
.app__mobile-nav::-webkit-scrollbar { display: none; }
.app__mobile-nav button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: .5rem .9rem; font-weight: 700; font-size: 14px; min-height: 40px; }
.app__mobile-nav button[aria-current="page"] { background: var(--fir); color: #fff; border-color: var(--fir); }
@media (min-width: 1024px) { .app__mobile-nav { display: none; } }
.view { display: none; }
.view.is-active { display: block; animation: fadeIn var(--t-med) var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: 1.5rem; }
.kpi { padding: 1.25rem; }
.kpi__label { color: var(--gray); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: .5rem; }
.kpi__value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .4rem 0 .2rem; font-variant-numeric: tabular-nums; }
.kpi__delta { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.kpi__delta.up { color: var(--ok); } .kpi__delta.down { color: var(--danger); } .kpi__delta.flat { color: var(--gray); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.panel__head h2 { font-size: 1.2rem; margin: 0; letter-spacing: -.01em; }
.panel__head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.panel__head p { margin: 0; color: var(--gray); font-size: 14px; width: 100%; }
.two { display: grid; gap: 1.25rem; }
@media (min-width: 1100px) { .two { grid-template-columns: 1fr 1fr; } .two--wide { grid-template-columns: 1.4fr 1fr; } }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: .8rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); font-weight: 700; }
.table tbody tr:hover { background: var(--mint-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.badge--ok { background: var(--ok-bg); color: var(--fir); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--err { background: var(--danger-bg); color: var(--danger); }
.badge--gray { background: #EAEFEC; color: var(--gray); }
.badge--mint { background: var(--mint); color: #fff; }
.bars { display: grid; gap: .6rem; }
.bar { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr auto; gap: .75rem; align-items: center; font-size: 14px; }
.bar__track { height: 10px; border-radius: 5px; background: var(--mint-light); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 5px; background: var(--mint); width: 0; transition: width 900ms var(--ease); }
.bar__val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); }
.chart .grid { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .label { fill: var(--gray); font-size: 11px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--mint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line--2 { stroke: var(--fir); stroke-dasharray: 5 4; opacity: .55; }
.chart .area { fill: url(#areaGrad); }
.chart .bar { fill: var(--mint); }
.chart .bar--muted { fill: var(--mint-light); }
.chart .dot { fill: #fff; stroke: var(--mint); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 13px; color: var(--gray); margin-top: .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 14px; height: 4px; border-radius: 2px; background: var(--mint); display: inline-block; }
.legend i.l2 { background: var(--fir); opacity: .55; }
.heat { display: grid; grid-template-columns: auto repeat(8, 1fr); gap: 4px; font-size: 12px; align-items: center; }
.heat__cell--sum { background: #EEF2EF; color: var(--gray); }
.heat__lbl { color: var(--gray); font-weight: 600; padding-right: .5rem; white-space: nowrap; }
.heat__cell { aspect-ratio: 1.6; border-radius: 6px; background: color-mix(in oklab, var(--mint) calc(var(--v) * 1%), var(--mint-soft)); display: grid; place-items: center; font-weight: 700; color: var(--fir); font-size: 11px; }
.heat__cell[style*="--v: 6"], .heat__cell[style*="--v: 7"], .heat__cell[style*="--v: 8"], .heat__cell[style*="--v: 9"], .heat__cell[style*="--v: 1"][style*="0"] { color: #fff; }
.heat__head { text-align: center; color: var(--gray); font-weight: 700; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; border: 0; background: transparent; padding: .7rem 1rem; font-weight: 700; color: var(--gray); border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 44px; }
.tabs button[aria-selected="true"] { color: var(--fir); border-color: var(--mint); }
.tabpanel[hidden] { display: none; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list li { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--r-md); background: #F6F9F7; border: 1px solid var(--line); }
.list li .icon { flex: none; color: var(--mint-dark); margin-top: .1rem; }
.list li .meta { color: var(--gray); font-size: 13px; margin: .15rem 0 0; }
.list li .actions { margin-left: auto; display: flex; gap: .4rem; flex: none; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--line); display: grid; gap: 1rem; }
.timeline li { position: relative; font-size: 14px; }
.timeline li::before { content: ''; position: absolute; left: calc(-1.25rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.timeline .when { color: var(--gray); font-size: 12.5px; display: block; }
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--warn-bg); color: #7C2D12; font-size: 14px; }
.notice--info { background: var(--mint-light); color: var(--fir); }
.prose .notice--info { display: block; }
.notice .icon { flex: none; margin-top: .1rem; }
.notice p { margin: 0; }
.progress { height: 10px; background: var(--mint-light); border-radius: 5px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--mint); border-radius: 5px; }
.login { min-height: calc(100dvh - var(--header-h)); display: grid; place-items: center; padding-block: 3rem; }
.login__card { width: min(100%, 440px); }
.login__roles { display: grid; gap: .75rem; margin-top: 1.5rem; }
.role-btn { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1.5px solid var(--line); background: #fff; text-decoration: none; color: var(--fir); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.role-btn:hover { border-color: var(--mint); box-shadow: var(--sh-sm); transform: translateY(-2px); color: var(--fir); }
.role-btn strong { display: block; } .role-btn small { color: var(--gray); }
.app-form { display: grid; gap: 1rem; }
.app-form .field { margin: 0; }
.app-form input:not([type="checkbox"]):not([type="range"]), .app-form select, .app-form textarea { width: 100%; min-height: 46px; padding: .6rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 15px; }
.app-form textarea { min-height: 100px; resize: vertical; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-light); }
.app-form__row { display: grid; gap: 1rem; }
@media (min-width: 720px) { .app-form__row { grid-template-columns: 1fr 1fr; } }
/* YAML-Bereich im Portal */
.yaml-editor { display: grid; grid-template-columns: auto 1fr; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-size: 13.5px; line-height: 1.55; }
.yaml-editor__gutter { padding: .9rem .6rem; background: var(--mint-soft); color: var(--gray); text-align: right; white-space: pre; user-select: none; border-right: 1px solid var(--line); min-width: 2.6rem; }
.yaml-editor__text { border: 0; outline: none; padding: .9rem 1rem; min-height: 420px; resize: vertical; background: transparent; color: var(--fir); font: inherit; white-space: pre; overflow: auto; tab-size: 2; }
.yaml-editor:focus-within { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-light); }
.yaml-editor__status { margin: .5rem 0 .9rem; }
.yaml-editor__status.is-ok { color: var(--ok); font-weight: 600; }
.yaml-editor__status.is-err { color: var(--danger); font-weight: 600; }
.chip-editor { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-editor .chip { min-height: 38px; background: var(--mint-light); border-color: var(--mint-light); display: inline-flex; align-items: center; gap: .4rem; }
.chip-editor .chip button { border: 0; background: transparent; padding: 0; display: grid; color: var(--gray); }
.preview-chat { max-width: 380px; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); background: var(--fir); color: #fff; padding: .8rem 1.2rem; border-radius: var(--r-pill); font-weight: 600; box-shadow: var(--sh-lg); opacity: 0; transition: opacity var(--t-med), transform var(--t-med) var(--ease); z-index: 500; pointer-events: none; font-size: 15px; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 22. Prose (blog, legal) ------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .35rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--gray); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .05em; }
/* Handy: lange Bezeichnungen („UNTERNEHMENSGEGENSTAND“) schoben die rechte Spalte aus dem Bild – Bezeichnung über den Wert stellen */
.prose td { overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: auto; }
  .prose thead { display: none; }
  .prose tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .prose th, .prose td { border-bottom: 0; padding: .1rem 0; overflow-wrap: anywhere; }
}
.prose .todo { background: var(--warn-bg); color: #7C2D12; padding: .1rem .4rem; border-radius: 4px; font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.article-head { padding-block: clamp(2.5rem, 6vw, 5rem) 2rem; }
.article-head .meta { color: var(--gray); font-weight: 600; display: flex; gap: 1rem; flex-wrap: wrap; }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post-card__art { aspect-ratio: 16/9; border-radius: var(--r-md); background: var(--mint-light); margin-bottom: 1rem; display: grid; place-items: center; color: var(--mint-dark); overflow: hidden; }
.post-card h3 { margin-bottom: .4rem; }
.post-card p { color: var(--gray); margin: 0; flex: 1; }
.post-card .link-arrow { margin-top: 1rem; }

/* Rechtstexte: Absätze mit (1), (2) …, Hinweiskästen, Muster-Formular */
.prose ol.abs { list-style: none; padding-left: 0; counter-reset: abs; }
.prose ol.abs > li { counter-increment: abs; position: relative; padding-left: 2.2rem; margin-bottom: .7rem; }
.prose ol.abs > li::before { content: '(' counter(abs) ')'; position: absolute; left: 0; top: 0; font-weight: 700; font-size: .9em; color: var(--mint-dark); font-variant-numeric: tabular-nums; }
.prose .notice { display: flex; }
.prose .notice p { margin: 0; }
.form-sheet { border-style: dashed; }
.form-line { margin: 1rem 0 .25rem; }
.form-line span { display: block; border-bottom: 1px solid var(--line); height: 2rem; }
.form-line small { display: block; margin-top: .25rem; font-size: var(--fs-0); }
.form-sheet .field { margin: .75rem 0 0; }
.form-sheet textarea { width: 100%; }
.print-only { display: none; }
@media print {
  body:not(.print-qr) .site-header, body:not(.print-qr) .site-footer, body:not(.print-qr) .no-print, body:not(.print-qr) .sticky-cta, body:not(.print-qr) .fx-bg { display: none !important; }
  .print-only { display: block; }
  .form-sheet { border: 1px solid #999; box-shadow: none; }
  .form-sheet .input, .form-sheet textarea { border: 0; border-bottom: 1px solid #999; border-radius: 0; background: none; }
}
/* Zahlen und Fakten (Über uns): gleich hohe Karten, Zahl links oben, Erklärung darunter */
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; min-height: 9rem; }
.fact__num { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--mint-dark); font-variant-numeric: tabular-nums; }
.fact__label { color: var(--fir); font-weight: 600; line-height: 1.4; }
/* „Unser Ziel“: drei Länderkacheln */
.goal-map { display: grid; gap: .75rem; }
.goal-map__tile { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #E8F0EB; }
.goal-map__tile strong { font-size: 1.6rem; letter-spacing: -.02em; color: #8FD3B4; width: 3rem; }
.goal-map__tile.is-active { border-color: var(--neon-2); box-shadow: 0 0 0 1px rgba(111,227,176,.3), 0 0 24px rgba(61,165,122,.25); }
.section--dark .goal-map__tile span { color: #C9D8D0; }
/* Zwei-Spalten-Raster darf nie breiter als der Bildschirm werden */
.split > * { min-width: 0; }
/* ---------- 23. Misc components ---------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist .icon { color: var(--mint-dark); flex: none; margin-top: .2rem; }
.pain { display: flex; gap: 1rem; align-items: flex-start; }
.pain__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; flex: none; }
.pain h3 { font-size: var(--fs-2); margin-bottom: .3rem; }
.pain p { margin: 0; color: var(--gray); }
.cta-band { border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 4rem); background: var(--fir); color: #E8F0EB; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/media/hero-still-1x.jpg') center/cover; opacity: .28; filter: blur(2px) saturate(80%); }
.cta-band h2 { color: #fff; }
/* Zweiter Button („Live-Demo“) auf dem dunklen Band: weiß mit hellem Rand, sonst ist er unsichtbar */
.cta-band .btn--ghost { --fg: #fff; --bd: rgba(255, 255, 255, .6); }
.cta-band .btn--ghost:hover { --bg: rgba(255, 255, 255, .12); --fg: #fff; }
.cta-band .lead { color: #C9D8D0; }
.breadcrumb { font-size: var(--fs-0); color: var(--gray); margin-bottom: 1rem; }
.breadcrumb a { color: var(--gray); }
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-head .lead { margin-bottom: 0; }
.qr-demo { width: 120px; height: 120px; }
.avatar-photo { width: 100%; max-width: 380px; aspect-ratio: 4/5; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--mint-light), var(--mint-soft)); display: grid; place-items: center; color: var(--mint-dark); border: 1px solid var(--line); box-shadow: var(--sh-md); overflow: hidden; }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar-photo svg { width: 40%; height: 40%; }
.avatar-photo--team { aspect-ratio: 2 / 3; background: var(--mint-soft); }
.avatar-photo--team img { object-position: 50% 30%; }
.tri { display: grid; gap: 1rem; }
@media (min-width: 720px) { .tri { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 24. Print (QR sign) ---------------------------------------- */
@media print {
  body.print-qr > *:not(#qr-print) { display: none !important; }
  #qr-print { display: block !important; }
  .qr-sign { box-shadow: none; width: 105mm; height: 148mm; border: 1px solid #ccc; page-break-inside: avoid; }
}

/* ---------- 26. KI-Look: Orb („Jarvis“), Neon, Schweife, Spotlight -------
   Alles hier ist Akzent auf der bestehenden Marke: Minze leuchtet, Tanne bleibt ruhig. Bewegung ist langsam und
   pausiert, wenn sie nicht sichtbar ist (fx.js). Ganz abschalten: <html data-fx="off">. */
:root { --neon: #3DA57A; --neon-2: #6FE3B0; --neon-3: #B8F5DA; --neon-rgb: 61, 165, 122; --neon-live: #39FFA0; --neon-live-rgb: 57, 255, 160; }

/* Live-Punkt (aus der ZIP-Vorlage): kleiner Neon-Punkt mit auslaufendem Puls-Ring */
.live-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--neon-live); box-shadow: 0 0 12px 3px rgba(var(--neon-live-rgb), .7); animation: livePulse 2s infinite; flex: none; }
.live-dot--sm { width: 8px; height: 8px; box-shadow: 0 0 8px 2px rgba(var(--neon-live-rgb), .6); }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 12px 3px rgba(var(--neon-live-rgb), .7), 0 0 0 0 rgba(var(--neon-live-rgb), .6); } 70% { box-shadow: 0 0 12px 3px rgba(var(--neon-live-rgb), .7), 0 0 0 16px rgba(var(--neon-live-rgb), 0); } }
.eyebrow--live { gap: .6rem; } .eyebrow--live::before { display: none; }

/* Hintergrundebene (aus der ZIP-Vorlage): Neonschweif oben + Netz-Kugel, fix hinter der ganzen Seite.
   Seiten schalten sie mit `fxBg: true` ein (src/layout.mjs). Inhalt liegt darüber: main und footer haben z-index 1. */
.fx-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Ruhiger Look (16.10.2026): Lichtwolken, Raster, Neonschweif und Netz-Kugel sind ausgeschaltet – Code bleibt für später. */
.fx-bg { display: none; }
/* Aktiver Hintergrund: vier weiche Lichtwolken, die dauerhaft langsam driften (nur transform → günstig für die GPU) */
.fx-aurora { position: absolute; inset: 0; }
.fx-aurora i { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(64px); will-change: transform; }
.fx-aurora i:nth-child(1) { left: -14%; top: -22%; background: radial-gradient(circle, rgba(var(--neon-rgb), .5), rgba(var(--neon-rgb), 0) 66%); animation: auroraA 26s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { right: -18%; top: -6%; background: radial-gradient(circle, rgba(111, 227, 176, .46), rgba(111, 227, 176, 0) 66%); animation: auroraB 34s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { left: 18%; bottom: -34%; background: radial-gradient(circle, rgba(31, 61, 51, .16), rgba(31, 61, 51, 0) 66%); animation: auroraC 40s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(4) { right: 8%; bottom: -18%; width: 42vmax; height: 42vmax; background: radial-gradient(circle, rgba(184, 245, 218, .6), rgba(184, 245, 218, 0) 66%); animation: auroraA 22s ease-in-out infinite alternate-reverse; }
@keyframes auroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vw, 10vh) scale(1.18); } }
@keyframes auroraB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12vw, 14vh) scale(.92); } }
@keyframes auroraC { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(10vw, -12vh) rotate(25deg); } }
/* Feines Raster, das endlos diagonal gleitet (Periode 64 px = nahtlos) */
.fx-grid { position: absolute; inset: -64px 0 0 -64px; width: calc(100% + 64px); height: calc(100% + 64px); background-image: linear-gradient(rgba(31, 61, 51, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 61, 51, .05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 100%); animation: gridDrift 48s linear infinite; will-change: transform; }
@keyframes gridDrift { from { transform: translate(0, 0); } to { transform: translate(64px, 64px); } }
/* Abschnitte mit Farbfläche werden leicht durchscheinend, damit der Hintergrund sichtbar bleibt */
.section--alt { background: rgba(238, 246, 241, .72); }
.fx-sweep { position: absolute; top: -20px; left: 0; width: 100vw; height: 110px; border-radius: 999px; opacity: .8; filter: blur(34px); will-change: transform; background: linear-gradient(90deg, rgba(150, 255, 210, .85) 0%, rgba(90, 255, 180, .6) 12%, rgba(var(--neon-live-rgb), .35) 35%, rgba(var(--neon-live-rgb), .12) 70%, rgba(var(--neon-live-rgb), 0) 100%); animation: sweep 7s linear infinite; }
@keyframes sweep { 0% { transform: translateX(110%); } 100% { transform: translateX(-115%); } }
.fx-net { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(80vh, 80vw); height: min(80vh, 80vw); opacity: .8; }
main, .site-footer { position: relative; z-index: 1; }
/* Hero-Landschaft wird durchscheinend, damit das Netz dahinter sichtbar bleibt */
.hero__bg { background: transparent; }
.hero__bg img { opacity: .55; }
.hero__bg::after { background: linear-gradient(180deg, rgba(248, 248, 246, .15) 0%, rgba(248, 248, 246, .55) 55%, rgba(248, 248, 246, .92) 100%); }
.hero__grid { position: relative; z-index: 1; }
.hero__phone { position: relative; }
.hero__phone::before { content: ''; position: absolute; inset: 8% -12% 4% -12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side at 40% 40%, rgba(var(--neon-rgb), .38), transparent), radial-gradient(closest-side at 70% 75%, rgba(111, 227, 176, .3), transparent); filter: blur(34px); animation: glowDrift 9s ease-in-out infinite alternate; pointer-events: none; }
.has-fx.fine .hero__phone .phone { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
@keyframes glowDrift { from { transform: translate(-4%, 2%) scale(1); } to { transform: translate(4%, -4%) scale(1.1); } }
.section--fx { position: relative; overflow: hidden; isolation: isolate; }
.section--fx > .container { position: relative; z-index: 1; }
.section--dark.section--fx::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }

/* Neon-Rahmen: wandernder Lichtbogen um hervorgehobene Karten */
.neon-border { position: relative; }
.neon-border::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--a, 0deg), transparent 0 42%, var(--neon-2) 52%, var(--neon) 60%, transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 3.6s linear infinite; }

/* Spotlight: Lichtfleck folgt dem Zeiger (fx.js setzt --mx/--my) */
.has-fx .spot { position: relative; }
.has-fx .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-med); z-index: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--neon-rgb), .16), transparent 62%); }
.has-fx .spot:hover::after { opacity: 1; }
.has-fx .trust__item.spot::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 227, 176, .22), transparent 62%); }
.has-fx .spot > * { position: relative; z-index: 1; }
.has-fx .spot > .neon-border::before, .has-fx .spot.neon-border::before { z-index: 2; }
.has-fx .tile.spot:hover, .has-fx .card--flat.spot:hover { border-color: rgba(var(--neon-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .15), 0 10px 30px rgba(31, 61, 51, .08); }

/* Buttons: Schimmer beim Hover, sanfter Puls für den Haupt-Button der Hero */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }
.btn--primary:hover::after { animation: shimmer .9s var(--ease); }
.btn--glow { animation: btnPulse 2.8s ease-out infinite; }
.btn--glow:hover { animation: none; }
@keyframes shimmer { to { transform: translateX(130%); } }
@keyframes btnPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--neon-rgb), .5); } 70% { box-shadow: 0 0 0 14px rgba(var(--neon-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0); } }

/* Drei Schritte: Lichtimpuls wandert hinter den Karten entlang */
@media (min-width: 800px) {
  .steps { position: relative; isolation: isolate; }
  .steps::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: calc(3.9rem + 60px); height: 2px; background: var(--line); border-radius: 2px; }
  .steps::after { content: ''; position: absolute; z-index: -1; left: 6%; top: calc(3.9rem + 59px); width: 16%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--neon-2), var(--neon), transparent); box-shadow: 0 0 14px rgba(var(--neon-rgb), .8); animation: beam 9.6s linear infinite; }
}
@keyframes beam { from { transform: translateX(-100%); } to { transform: translateX(550%); } }

/* Zahlen leuchten */
.stats--card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: .5rem; }
.stat__num span { text-shadow: 0 0 22px rgba(var(--neon-rgb), .35); }
.is-bump { animation: bump .55s var(--ease); }
@keyframes bump { 0% { text-shadow: 0 0 18px rgba(var(--neon-rgb), .7); transform: scale(1.04); } 100% { text-shadow: none; transform: none; } }
.calc__big span, .calc__time strong { display: inline-block; }

/* Sprachwahl: Aufklappmenü unter dem „DE ▾“-Knopf */
.chat__tools { position: relative; }
.chat__langmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12; min-width: 168px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-md); padding: 6px; display: grid; gap: 2px; animation: fadeIn var(--t-fast) var(--ease); }
.chat__langmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--fir); text-align: left; }
.chat__langmenu button:hover { background: var(--mint-soft); }
.chat__langmenu button[aria-checked="true"] { background: var(--mint-light); }
.chat__langcode { width: 26px; font-size: 10.5px; font-weight: 800; color: var(--mint-dark); }
/* Hinweis „Beispieldarstellung“ über dem Chatverlauf */
.chat__notice { margin: 0 10px 6px; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.75); border: 1px dashed var(--line); font-size: 10.5px; color: var(--gray); text-align: center; }
.chat__notice:empty { display: none; }
/* Neon-Live-Punkt neben dem Hausnamen im Chat-Kopf */
.chat__title .live-dot { width: 9px; height: 9px; box-shadow: 0 0 8px 2px rgba(var(--neon-live-rgb), .65); }

/* Scroll-Leuchtlinie */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: var(--p, 0%); z-index: 200; pointer-events: none; background: linear-gradient(90deg, var(--mint), var(--neon-2)); box-shadow: 0 0 10px rgba(var(--neon-rgb), .7); transition: width .1s linear; }

/* ---------- 25. Motion preferences ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .steps::after, .scroll-progress, .fx-bg { display: none !important; }
  .hero__phone::before { animation: none; }
}

/* ==========================================================================
   18. Look „Alpin Klar“ für die ganze Website (seit 16.10.2026, vorher nur Startseite)
   Weiß, warmes Hellgrau, Nachtgrün; feine Linien statt Schatten; Serifen-Überschriften.
   Hero mit Video: Nachtgrün, das Video läuft blass und ruhig im Hintergrund (halbe Geschwindigkeit, gedeckte Farben).
   Startseiten-eigene Teile (Bildgeschichte, Karten, Chat) stehen in public/css/home.css.
   ========================================================================== */
:root { --warm: #F6F4EF; --soft: #F4F6F5; --night: #121413; --line: #E4E6E5; --text: #3F4442; --muted: #6C716F; --mint-pale: #8FD1B1; --shadow-soft: 0 28px 60px -32px rgba(18, 20, 19,.45); }
body { background: #fff; color: var(--text); }
h3, h4 { color: var(--ink); }
.lead { color: var(--text); }
.muted { color: var(--muted); }
.site-header { background: rgba(255, 255, 255, .94); }
.mobile-menu { background: #fff; }
.sticky-cta { background: #fff; }
.section--alt { background: var(--warm); }
.section--dark { background: var(--night); color: #C9CCCA; }
.section--dark .lead, .section--dark .muted { color: #C9CCCA; }
.eyebrow { color: var(--mint-deep); letter-spacing: .14em; font-weight: 600; font-size: .78rem; }
.eyebrow::before { height: 1.5px; width: 1.4rem; background: currentColor; border-radius: 0; }
.section--dark .eyebrow { color: var(--mint-pale); }
.link-arrow { color: var(--ink); border-bottom: 1px solid var(--mint-deep); min-height: 0; padding-bottom: 2px; }
.section--dark .link-arrow { color: #fff; border-color: var(--mint-pale); }

/* Karten, Kacheln, Schritte: ruhig, feine Linie, 14 px Radius */
.card, .tile, .step, .trust__item { border-radius: 14px; box-shadow: none; }
.card, .tile, .step { border-color: var(--line); }
.card--hover:hover { box-shadow: var(--shadow-soft); }
.card--accent { border: 1.5px solid var(--ink); box-shadow: var(--shadow-soft); }
.card--dark { background: var(--night); border-color: var(--night); }
.neon-border::before, .neon-border::after { display: none !important; }
.icon-badge { width: 46px; height: 46px; border-radius: 12px; background: #E3F0E9; color: var(--mint-deep); }
.icon-badge--dark { background: rgba(255, 255, 255, .1); color: var(--mint-pale); }
.tile:has(.tile__toggle[aria-expanded="true"]) { border-color: var(--ink); box-shadow: var(--shadow-soft); }
.tile__example { background: var(--soft); }
.tile__example .q { background: var(--ink); }
.step::before { color: var(--mint-deep); }
.step.is-active { border-color: var(--ink); box-shadow: var(--shadow-soft); }
.step__art--tile svg { filter: none; }
.stat__num { font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
.stat__num span { color: var(--mint-deep); }
.seg { background: var(--soft); border: 1px solid var(--line); }
.compare thead th { background: var(--soft); }
.compare thead th.is-us { background: #E3F0E9; }
.compare td.is-us { background: rgba(227, 240, 233, .45); }
.quote blockquote { font-family: var(--font-serif); font-weight: 500; color: var(--ink); }
.post-card__art { background: var(--soft); border: 1px solid var(--line); }
.cta-band { background: var(--night); border-radius: 18px; }
.cta-band::before { opacity: .22; }

/* Preise */
.price-card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
.price-card__amount { font-weight: 700; color: var(--ink); }
.price-card__amount--text { font-family: var(--font-serif); font-weight: 600; }
.price-card li .icon { color: var(--mint-deep); }
.addon { background: var(--soft); border-radius: 14px; }
.addon h3 { font-family: var(--font-serif); font-weight: 600; }
.addon__tiers li { background: #fff; border: 1px solid var(--line); }

/* Knöpfe auf dunklem Grund */
.btn--light { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--light:hover { --bg: #F1F5F3; --bd: #F1F5F3; }
.btn--glass { --bg: rgba(255, 255, 255, .08); --fg: #fff; --bd: rgba(255, 255, 255, .55); }
.btn--glass:hover { --bg: rgba(255, 255, 255, .16); --fg: #fff; }

/* Hero mit Video (Startseite .hp-hero, Unterseiten .hero--video): Nachtgrün, Video blass und ruhig im Hintergrund */
.hero--video, .hp-hero { background: var(--night); color: #fff; }
.hero__media { background: var(--night); }
/* Seit 17.10.2026 (eigene Drohnenaufnahme): Video klar und in Originalfarben, ohne Abblassen, Entsättigen oder Einblenden.
   Nur am Computer, wo die Schrift auf dem Video steht, ein dunkler Verlauf links hinter dem Text – damit sie lesbar bleibt. */
.hero__media img { opacity: 1; filter: none; }
.hero__media video { filter: none; transition: none; }
.hero__media video.is-playing { opacity: 1; }
.hero__media::after { background: linear-gradient(90deg, rgba(18, 20, 19, .68) 0%, rgba(18, 20, 19, .45) 34%, rgba(18, 20, 19, .08) 62%, rgba(18, 20, 19, 0) 75%); }
.hero--video h1, .hp-hero h1 { color: #fff; }
.hero--video h1 em, .hp-hero h1 em { color: #BDE6D2; font-style: italic; font-weight: 500; }
.hero--video .lead, .hp-hero .lead { color: rgba(255, 255, 255, .9); }
.hero--video .eyebrow { color: var(--mint-pale); }
.hero--video .hero__proof { color: rgba(255, 255, 255, .9); }
.hero--video .hero__proof .icon { color: var(--mint-pale); }
.hero--video .hero__cta .btn--primary { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.hero--video .hero__cta .btn--outline, .hero--video .hero__cta .btn--ghost, .hero--video .hero__cta .btn--secondary { --bg: rgba(255, 255, 255, .08); --fg: #fff; --bd: rgba(255, 255, 255, .55); }
.hero--video .stage__note { color: rgba(255, 255, 255, .72); }
.hero--video .stage::before, .hero--video .stage::after { opacity: .35; }
.hero__ai-label { position: absolute; z-index: 3; top: 1rem; bottom: auto; right: var(--gutter); background: rgba(10, 11, 11, .62); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .9); }
.hero__ai-label .icon { color: var(--mint-pale); }
/* Handy: Video oben in voller Breite, Text darunter auf Nachtgrün */
@media (max-width: 959px) {
  .hero--video, .hp-hero { display: block; min-height: 0; padding-top: 0; }
  .hero--video .hero__media, .hp-hero .hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
  .hero__media::after { display: none; }   /* am Handy steht die Schrift unter dem Video – kein Verlauf nötig */
  .hero__ai-label { position: absolute; top: .6rem; right: .6rem; margin: 0; width: auto; }
}

/* Fußzeile und Ziel-Kacheln wie auf der Startseite */
.site-footer { background: var(--night); }
.goal-map__tile { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.goal-map__tile strong { font-family: var(--font-serif); font-weight: 600; color: #fff; }
.goal-map__tile.is-active { background: rgba(255, 255, 255, .94); border-color: transparent; box-shadow: none; }
.goal-map__tile.is-active strong, .goal-map__tile.is-active span { color: var(--ink); }

/* ==========================================================================
   19. Feinschliff 17.10.2026: ohne Grünstich
   Dunkle Flächen fast schwarz (--night, --fir, --ink), Symbole überall in der Farbe der dunklen Flächen,
   Handys hell und warm statt grünlich, kein Lichtfleck unter der Maus, Kopfleiste mit mehr Luft.
   ========================================================================== */
/* Kopfleiste: Abstand zwischen Logo und Menü, Knöpfe rechts, ruhiges Grau beim Darüberfahren */
.site-header { background: #fff; }   /* deckend, ohne Milchglas (22.10.2026) */
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(18, 20, 19, .06); }
.site-nav a { color: var(--ink); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: #F1F2F1; }
.site-nav a[aria-current="page"] { font-weight: 600; }
.lang-switch:hover { background: #F1F2F1; }
.btn--ghost:hover { --bg: #F1F2F1; }
/* Ab 1024 px: alles etwas kleiner (sechs Menüpunkte seit „Campingplätze“), damit zwischen Logo und Menü Luft bleibt */
@media (min-width: 1024px) {
  .site-header__inner { gap: 0; }
  .logo { margin-right: 2rem; }
  .logo .logo-mark { height: 27px; min-width: 99px; }
  .site-nav { margin-left: auto; margin-right: 0; }   /* der freie Platz liegt zwischen Logo und Menü */
  .site-nav ul { gap: .1rem; }
  .site-nav a { font-size: .8rem; padding: .45rem .55rem; }
  .site-header__actions { margin-left: 1.1rem; gap: .4rem; }
  .site-header__actions .btn--sm { min-height: 36px; padding: .35rem .8rem; font-size: .79rem; border-radius: 8px; }
  .lang-switch { min-width: 36px; min-height: 36px; font-size: .75rem; }
}
/* Schmalere Fenster: unter 1280 px fällt „Live-Demo“ weg, unter 1100 px auch „Login“ (beide bleiben über Seiteninhalt,
   Fußzeile und Handy-Menü erreichbar) */
@media (min-width: 1024px) and (max-width: 1279px) { .site-header__actions .site-header__demo { display: none; } }
@media (min-width: 1024px) and (max-width: 1099px) { .site-header__actions .btn--ghost { display: none; } .site-header__actions { margin-left: .75rem; } }

/* Kein Lichtfleck und kein grüner Rahmen unter der Maus */
.has-fx .spot::after { display: none !important; }
.has-fx .tile.spot:hover, .has-fx .card--flat.spot:hover { border-color: var(--line); box-shadow: none; }

/* Symbole: dunkel wie die dunklen Flächen, auf hellem neutralem Grund (auch die früher roten bei „Kennen Sie das?“) */
.icon-badge, .pain__icon { background: #EDEFEE; color: var(--night); }
.icon-badge--dark { background: rgba(255, 255, 255, .1); color: #fff; }
.price-card li .icon, .checklist .icon, .list li .icon, .map-list .icon, .map__consent-card .icon, .weather__day .icon, .hero__proof .icon { color: var(--night); }
.section--dark .checklist .icon, .section--dark .list li .icon, .cta-band .checklist .icon, .card--dark .checklist .icon, .hero--video .hero__proof .icon { color: var(--mint-pale); }

/* Handys: Rahmen in Graphit, Bildschirm auf ALLEN Handys (Ferienwohnung, Hotel, Campingplatz, Ort, Live-Demo) in einem
   einheitlichen, edlen Elfenbein – ohne Verlauf, ohne Grünstich */
.phone { background: linear-gradient(160deg, #3A3D40, #141617); box-shadow: 0 20px 60px rgba(18, 20, 19, .18), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.phone::before { background: #0B0C0C; }
.phone__screen { background: #F6F3ED; }
.phone__screen::after { background: rgba(246, 243, 237, .9); }
.phone__screen--hc, .phone__screen--hc[data-concierge], .flip__back .phone__screen--hc[data-concierge] { --hc-bg: #F6F3ED; --hc-line: #E2DACD; }
.hc--soft { background: radial-gradient(60% 40% at 85% 12%, rgba(255, 221, 176, .3), transparent 70%), radial-gradient(55% 35% at 10% 88%, rgba(255, 236, 214, .45), transparent 70%), var(--hc-bg); }
.hc__langmenu button:hover, .hc__langmenu button:focus-visible, .hc__ibtn:hover { background: #EFEBE3; }
.scroll-progress { background: var(--night); box-shadow: none; }
.msg--user { background: var(--fir); }
/* Kein grünes Leuchten hinter dem Handy (Live-Demo, Ferienwohnungen, Hotels, Tourismusbüros), Schatten neutral */
.hero__phone::before { display: none; }
.stage::before { background: radial-gradient(closest-side, rgba(18, 20, 19, .2) 0%, rgba(18, 20, 19, .12) 44%, rgba(18, 20, 19, .04) 72%, rgba(18, 20, 19, 0) 100%); }
.stage::after { background: radial-gradient(closest-side, rgba(18, 20, 19, .14) 0%, rgba(18, 20, 19, 0) 74%); }
.stage__shot { filter: drop-shadow(-16px 24px 34px rgba(18, 20, 19, .22)) drop-shadow(-3px 7px 11px rgba(18, 20, 19, .12)); }

/* Dunkle Flächen ohne Grün */
.site-footer { color: #C6CAC8; }
.site-footer a { color: #ECEEED; }
.card--dark, .cta-band { color: #ECEEED; }
.photo-band__bg::after { background: rgba(18, 20, 19, .28); }
.compare thead th.is-us { background: #ECEAE4; }
.compare td.is-us { background: rgba(236, 234, 228, .45); }
.hero__ai-label .icon { color: var(--night); }
.hero--video .hero__ai-label .icon { color: #fff; }

/* Preise: vier Karten (Ferienwohnung, Pension/Hotel, Campingplatz, Tourismusbüro) – ab 760 px zwei nebeneinander */
@media (min-width: 760px) { .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* WhatsApp-Logo in Markenfarbe (21.10.2026) */
.icon-whatsapp { color: #25D366; flex: none; vertical-align: -0.15em; }
.site-footer__whatsapp { display: inline-flex; align-items: center; gap: .4em; }