/* ==========================================================================
   CampWeb.ch – Stylesheet
   Reines CSS, ohne Framework, ohne Build-Schritt, ohne JavaScript.
   Stand: 16.09.2026 · ShopOnDemand GmbH

   Inhalt
   01  Schriften (@font-face)
   02  Design-Tokens (:root)
   03  Basis / Reset
   04  Hilfsklassen (Layout, Screenreader, SVG-Sprite, Icons)
   05  Buttons & Links
   06  Header & Navigation (Desktop)
   07  Überschriften & Handschrift (Kicker, Kursiv-Akzent, Nummern-Schilder)
   08  Motivsystem: Grat, Lager, Schweizerkreuz
   09  Startseite – Hero & Editor-Vorschau
   10  Startseite – Trust-Leiste, Intro, Feature-Karten, «Für wen»
   11  Startseite – Integration-Teaser
   12  Abschluss-CTA (alle Seiten)
   13  Footer
   14  Seite «Funktionen» (inkl. FAQ)
   15  Seite «CampSoft Integration»
   16  Seite 404
   17  Bewegung (Live-Signale, Aufrichten, Scroll-Reveal)
   18  Responsive – bis 900px (inkl. Mobile-Menü)
   19  Responsive – bis 600px
   20  Startseite – Hero «Dunkle Waldbühne» (überschreibt 06/09/10 für die Startseite)
   21  Reduzierte Bewegung

   Motivsystem in drei Bausteinen (siehe 08):
   – Grat:       Bergsilhouette als Übergang zu farbigen Sektionen
   – Lager:      Tannen, Zelt, Sonne (aus dem Social-Media-Bild og.png)
   – Höhenlinien: wie auf der Landeskarte, nur auf der 404-Seite
   Der Hero der Startseite ist seit 17.09.2026 die «Dunkle Waldbühne» (Abschnitt 20):
   Bergketten in vielen Grüntönen, keine Sonne, keine Höhenlinien, kein Lime-Zelt.
   Die Grafiken liegen als <symbol> im SVG-Sprite am Anfang jeder HTML-Seite.
   ========================================================================== */


/* ==========================================================================
   01  Schriften
   Geist & Geist Mono (SIL Open Font License), selbst gehostet – keine
   Anfragen an Google oder andere Drittanbieter.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrisch angepasste Ersatzschrift: verhindert Layout-Sprünge beim Laden */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}


/* ==========================================================================
   02  Design-Tokens
   Alle Farben, Schriften, Masse und Bewegungen an einer Stelle.
   ========================================================================== */

:root {
  /* Markenfarben */
  --forest: #0b684d;          /* Primärgrün – Buttons, Akzente */
  --forest-dark: #0c3e31;     /* Text, dunkle Sektionen */
  --forest-night: #092f26;    /* Footer */
  --forest-light: #1f8a66;    /* helle Facette der Tannen-Grafik */
  --lime: #d8ef68;            /* Akzent hell */
  --lime-deep: #b9d14a;       /* Schattenseite des Zelts */
  --sun: #f2c74f;             /* Akzent warm */
  --cream: #f8f6ef;           /* Seitenhintergrund */
  --paper: #fffefa;           /* Karten */
  --ink-muted: #587067;       /* gedämpfter Fliesstext */
  --border: #d9ded5;
  --swiss-red: #d52b1e;       /* ausschliesslich für das Schweizerkreuz */

  /* Flächen */
  --surface-sand: #f1efe7;    /* Trust-Leiste */
  --surface-sage: #e6efd9;    /* helle Grünflächen */

  /* Schriften */
  --font-sans: "Geist", "Geist Fallback", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Radien & Schatten */
  --radius-pill: 999px;
  --radius-card: 24px;
  --shadow-button: 0 10px 28px rgba(11, 104, 77, .2);
  --shadow-button-hover: 0 14px 34px rgba(11, 104, 77, .26);

  /* Layout */
  --shell: 1180px;
  --gutter: 48px;             /* Summe links + rechts */
  --header-height: 82px;

  /* Gratlinie (Bergsilhouette über farbigen Sektionen) */
  --ridge-h: clamp(32px, 5vw, 72px);       /* dunkle Sektionen, Footer */
  --ridge-h-soft: clamp(24px, 3.5vw, 48px); /* hellgrüne Sektionen */

  /* Bewegung */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-hover: .22s;
  --dur-settle: .45s;

  /* Fokus-Rahmen für Buttons (Tastaturbedienung) */
  --focus-ring: 0 0 0 3px var(--cream), 0 0 0 5px var(--forest);
}


/* ==========================================================================
   03  Basis / Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.5;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;          /* Dekor-Grafiken dürfen seitlich nicht scrollen */
}

body {
  min-height: 100vh;
  background: var(--cream);
  color: var(--forest-dark);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;            /* «clip» statt «hidden»: Sticky-Header bleibt intakt */
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

b, strong { font-weight: bolder; }
small { font-size: 80%; }
ul, ol { list-style: none; }

img, svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] { display: none !important; }

/* Tastatur-Fokus: grün auf hellen, lime auf dunklen Flächen */
:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: 6px;
}

.integration-teaser :focus-visible,
.integration-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--lime);
}

::selection {
  background: var(--lime);
  color: var(--forest-dark);
}


/* ==========================================================================
   04  Hilfsklassen
   ========================================================================== */

.section-shell,
.nav-shell {
  width: min(var(--shell), 100% - var(--gutter));
  margin-inline: auto;
}

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* «Zum Inhalt springen» – erscheint nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--forest-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus-visible { transform: none; }

/* SVG-Sprite am Anfang jeder Seite.
   Nicht display:none – Safari zeigt die Symbole sonst nicht zuverlässig. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Linien-Icons (Lucide, ISC-Lizenz): <svg class="icon"><use href="#icon-…"/></svg> */
.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   05  Buttons & Links
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: #fff;
  font-weight: 730;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow-button);
  transition: transform .2s ease, box-shadow .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.button:focus-visible {
  outline: 2px solid transparent;   /* sichtbar im Windows-Kontrastmodus */
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.button-small {
  min-height: 42px;
  padding: 0 17px;
  font-size: 13px;
}

.button-light {
  margin-top: 25px;
  background: var(--lime);
  color: var(--forest-dark);
  box-shadow: none;
}

.button-light:focus-visible {
  box-shadow: 0 0 0 3px var(--forest-dark), 0 0 0 5px var(--lime);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}

.text-link:hover { color: var(--forest); }

/* Pfeil rückt beim Überfahren ein Stück nach vorne */
.button .icon,
.text-link .icon,
.footer-grid a .icon {
  transition: translate var(--dur-hover) var(--ease-soft);
}

.button:hover .icon,
.text-link:hover .icon { translate: 3px 0; }

.footer-grid a:hover .icon { translate: 2px -2px; }


/* ==========================================================================
   06  Header & Navigation (Desktop)
   Mobile-Menü: siehe Abschnitt 18.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(12, 62, 49, .11);
  background: rgba(248, 246, 239, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: var(--header-height);
}

/* Logo: Wortmarke + Bildmarke (zwei Zelte im Kreis) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 22px;
  font-weight: 790;
  letter-spacing: -.045em;
}

.brand small {
  color: var(--forest);
  font-size: .58em;
  letter-spacing: -.01em;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50% 50% 47% 53%;
  background: var(--forest);
  transform: rotate(-7deg);
}

.brand-mark span:first-child {
  position: absolute;
  bottom: 6px;
  left: 5px;
  width: 17px;
  height: 22px;
  background: var(--lime);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.brand-mark span:last-child {
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 13px;
  height: 17px;
  background: var(--paper);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Hauptnavigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  color: #35594d;
  font-size: 14px;
  font-weight: 640;
}

.main-nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur-hover);
}

.main-nav > a:hover { color: var(--forest); }
.main-nav > a[aria-current="page"] { color: var(--forest-dark); }

/* Gipfelmarke: kleine Bergspitze unter dem aktiven Link, steigt beim Überfahren auf */
.main-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 12px;
  height: 7px;
  background: var(--forest);
  clip-path: polygon(0 100%, 30% 20%, 50% 55%, 70% 0, 100% 100%);
  opacity: 0;
  translate: -50% 4px;
  transition: opacity var(--dur-hover), translate var(--dur-hover) var(--ease-soft);
}

.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a:not(.nav-cta):focus-visible::after,
.main-nav > a[aria-current="page"]::after {
  opacity: 1;
  translate: -50% 0;
}

/* Nur im Mobile-Menü sichtbar (Abschnitt 18) */
.nav-toggle-input,
.nav-toggle,
.nav-backdrop,
.main-nav .nav-cta,
.nav-camp { display: none; }


/* ==========================================================================
   07  Überschriften & Handschrift
   ========================================================================== */

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eyebrow {
  padding: 8px 12px;
  border: 1px solid rgba(11, 104, 77, .14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .7);
}

/* Kleine Gratlinie vor jedem Sektions-Kicker */
.section-kicker::before {
  content: "";
  flex: none;
  width: 16px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 100%, 28% 15%, 46% 60%, 66% 0, 100% 100%);
}

.light-kicker { color: var(--lime); }

h1 {
  max-width: 650px;
  margin: 24px 0 22px;
  font-size: clamp(46px, 5.35vw, 74px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* Kursiver Serifen-Akzent: ein Wort (eine Wortgruppe) pro Überschrift */
h1 em,
h2 em {
  color: var(--forest);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

h2 em { letter-spacing: -.01em; }

.integration-teaser h2 em,
.integration-hero h1 em { color: var(--lime); }

/* Nummern als kleine Stellplatz-Schilder – wie «A12» in der Buchungs-Vorschau */
.card-number,
.detail-feature-card > span,
.faq-number {
  padding: 3px 7px;
  border: 1px solid rgba(12, 62, 49, .15);
  border-radius: 6px;
  background: var(--paper);
  letter-spacing: .06em;
  line-height: 1;
  transition: border-color var(--dur-hover), color var(--dur-hover);
}

.home-feature-card:hover .card-number,
.detail-feature-card:hover > span {
  border-color: rgba(11, 104, 77, .35);
  color: var(--forest);
}


/* ==========================================================================
   08  Motivsystem: Grat, Lager, Schweizerkreuz
   ========================================================================== */

/* --- Grat ------------------------------------------------------------------
   Bergsilhouette, die aus einer farbigen Sektion in die Sektion darüber ragt.
   Markup: <svg class="ridge" …><use href="#glyph-ridge"/></svg> als erstes
   Kind der Sektion. Farbe über --ridge-fill (muss dem Sektionshintergrund
   entsprechen). --ridge-back steuert den blasseren hinteren Grat. */
.integration-teaser,
.ai-showcase,
.sync-story,
.site-footer { position: relative; }

.ridge {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(100% - 1px);    /* 1px Überlappung: keine Haarlinie */
  left: 0;
  display: block;
  width: 100%;
  height: var(--ridge-h);
  pointer-events: none;
}

.integration-teaser { --ridge-fill: var(--forest-dark); }
.site-footer { --ridge-fill: var(--forest-night); }

.ai-showcase,
.sync-story {
  --ridge-fill: var(--surface-sage);
  --ridge-back: 0;
}

.ai-showcase .ridge,
.sync-story .ridge { height: var(--ridge-h-soft); }

/* --- Lager im Footer --------------------------------------------------------
   Tannen und Zelt als Silhouette auf dem flachen Stück des Footer-Grats.
   Das Plateau liegt bei 69–83 % der Breite und 45 % der Grathöhe. */
.footer-camp {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + var(--ridge-h) * .45 - 4px);
  left: 70%;
  width: clamp(60px, 8vw, 116px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

/* --- Schweizerkreuz ---------------------------------------------------------
   Ersetzt visuell das Flaggen-Emoji, das unter Windows nur als «CH» erscheint.
   Das Emoji bleibt für Screenreader im Text. */
.swiss-cross {
  flex: none;
  width: 14px;
  height: 14px;
}


/* ==========================================================================
   09  Startseite – Hero & Editor-Vorschau
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: .91fr 1.09fr;
  align-items: center;
  gap: 60px;
  min-height: 690px;
  padding-top: 74px;
  padding-bottom: 82px;
}

.hero-lead {
  max-width: 580px;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.63;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

.benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 30px;
  color: #46665b;
  font-size: 12px;
  font-weight: 630;
}

.benefit-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.benefit-list .icon { color: var(--forest); }

/* Bühne für die Editor-Vorschau */
.editor-stage {
  position: relative;
  padding: 17px 0 52px 22px;
}

.editor-stage::before {
  content: "";
  position: absolute;
  inset: 0 18px 36px 0;
  border-radius: 42% 58% 48% 52%;
  background: linear-gradient(145deg, #e6efca, #dbe7dc);
  transform: rotate(-3deg);
}

/* Editor-Fenster (reine HTML/CSS-Illustration) */
.editor-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(12, 62, 49, .15);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 32px 75px rgba(24, 61, 49, .18);
  transform: rotate(1.25deg);
}

.editor-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid #e7ebe7;
  background: #fbfcfa;
  font-size: 9px;
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6ddd8;
}

.editor-url {
  padding: 6px 18px;
  border-radius: 8px;
  background: #eef2ee;
  color: #60736c;
}

.live-pill {
  justify-self: end;
  color: #17875f;
  font-weight: 700;
}

.editor-body {
  display: grid;
  grid-template-columns: 112px 1fr;
  min-height: 386px;
}

.editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 12px;
  background: #153c31;
  color: rgba(255, 255, 255, .64);
  font-size: 9px;
}

.editor-sidebar strong {
  margin: 4px 6px 2px;
  color: #fff;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.editor-sidebar > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 6px;
}

.editor-sidebar .sidebar-active {
  background: rgba(216, 239, 104, .14);
  color: var(--lime);
}

.sidebar-divider {
  height: 1px;
  margin: 8px 4px;
  background: rgba(255, 255, 255, .1);
}

.color-row {
  display: flex;
  gap: 5px;
  padding: 7px;
}

.color-row i {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: #0b684d;
}

.color-row i:nth-child(2) { background: #f2c74f; }
.color-row i:nth-child(3) { background: #f7f0dc; }

.site-preview {
  padding: 20px 22px;
  background: #f4f1e6;
}

.preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  color: #294c40;
  font-size: 7px;
}

.preview-nav b {
  margin-left: 5px;
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: #164d3d;
  color: #fff;
}

.preview-logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
}

.preview-logo i {
  width: 9px;
  height: 13px;
  background: #0b684d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.preview-hero {
  position: relative;
  height: 265px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(#b7d9db 0 56%, #93ac75 56%);
}

.sun-orb {
  position: absolute;
  top: 28px;
  right: 55px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #f6d65f;
}

.mountain {
  position: absolute;
  bottom: 0;
  inset-inline: -20px;
  clip-path: polygon(0 80%, 20% 38%, 33% 68%, 52% 20%, 67% 63%, 80% 42%, 100% 76%, 100% 100%, 0 100%);
}

.mountain-back {
  height: 180px;
  background: #6f9b83;
  opacity: .82;
  transform: translateY(-20px);
}

.mountain-front {
  height: 160px;
  background: #315d4a;
}

.preview-copy {
  position: absolute;
  z-index: 2;
  bottom: 27px;
  left: 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.preview-copy small {
  margin-bottom: 8px;
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.preview-copy strong {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 500;
  line-height: .95;
}

.preview-copy span {
  margin-top: 14px;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  background: var(--sun);
  color: #274238;
  font-size: 7px;
  font-weight: 800;
}

.preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 8px;
}

.preview-cards span {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  color: #688078;
  font-size: 6px;
}

.preview-cards i {
  color: #164d3d;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

/* Schwebende KI-Karte über der Vorschau */
.ai-prompt-card {
  position: absolute;
  z-index: 5;
  right: -28px;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(390px, 82%);
  padding: 14px;
  border: 1px solid rgba(12, 62, 49, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 50px rgba(24, 61, 49, .18);
}

.ai-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--forest-dark);
}

.ai-prompt-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
}

.ai-prompt-card p {
  color: #5d716a;
  font-size: 9px;
  line-height: 1.4;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: var(--radius-pill);
  background: #e5f3e9;
  color: #177453;
  font-size: 8px;
  font-weight: 750;
}


/* ==========================================================================
   10  Startseite – Trust-Leiste, Intro, Feature-Karten, «Für wen»
   ========================================================================== */

.trust-strip {
  border-block: 1px solid rgba(12, 62, 49, .1);
  background: var(--surface-sand);
}

.trust-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 112px;
}

.trust-inner p {
  font-size: 13px;
  font-weight: 750;
}

.trust-inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 28px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 620;
}

.trust-inner li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 90px;
  padding-top: 110px;
  padding-bottom: 120px;
}

.intro h2 {
  max-width: 680px;
  margin-top: 18px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.intro p {
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.7;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  padding-bottom: 120px;
}

.home-feature-card {
  position: relative;
  min-height: 315px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(12, 62, 49, .11);
  border-radius: var(--radius-card);
  background: var(--paper);
}

.home-feature-card.feature-wide {
  grid-row: span 2;
  min-height: 648px;
  background: var(--surface-sage);
}

.home-feature-card.device-card {
  min-height: 355px;
  padding-bottom: 150px;
}

.home-feature-card.device-card p {
  position: relative;
  z-index: 2;
}

.feature-icon,
.detail-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 13px;
  background: var(--lime);
  color: var(--forest-dark);
}

.card-number {
  position: absolute;
  top: 32px;
  right: 30px;
  color: #92a39c;
  font: 650 11px / 1 var(--font-mono);
}

.home-feature-card h3 {
  margin: 55px 0 13px;
  font-size: 31px;
  line-height: 1.5;
  letter-spacing: -.035em;
}

.home-feature-card p {
  max-width: 490px;
  color: var(--ink-muted);
  line-height: 1.65;
}

/* Mini-Chat in Karte 01 */
.mini-chat {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px 12px;
  margin-top: 55px;
  padding: 25px;
  border: 1px solid rgba(12, 62, 49, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .77);
  box-shadow: 0 18px 50px rgba(40, 70, 54, .08);
}

.mini-chat > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #d8dfd7;
  font-size: 8px;
  font-weight: 800;
}

.mini-chat > span.mini-ai {
  background: var(--forest);
  color: var(--lime);
  font-size: 13px;
}

.home-feature-card .mini-chat p {
  padding: 10px 12px;
  border-radius: 3px 13px 13px 13px;
  background: #fff;
  font-size: 12px;
}

.home-feature-card .mini-chat .mini-response {
  background: var(--forest);
  color: rgba(255, 255, 255, .86);
}

/* Geräte in Karte 02 – mit kleinem Seiten-Skelett auf dem Bildschirm */
.device-stack {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 115px;
}

.device-stack i {
  position: absolute;
  bottom: -8px;
  overflow: hidden;
  border: 3px solid #255b4a;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(var(--sun), var(--sun)) 14% 70% / 24% 7% no-repeat,                              /* Button */
    repeating-linear-gradient(rgba(12, 62, 49, .15) 0 2px, transparent 2px 7px) 14% 48% / 58% 14% no-repeat, /* Textzeilen */
    linear-gradient(var(--forest), var(--forest)) 0 0 / 100% 32% no-repeat,                           /* Titelbild */
    #e7efdd;
  transition: translate .35s var(--ease-soft);
}

.device-stack i:first-child { left: calc(50% - 85px); width: 170px; height: 95px; }

.device-stack i:nth-child(2) {
  left: 32px;
  width: 80px;
  height: 80px;
  background-size: 30% 8%, 66% 16%, 100% 34%;
}

.device-stack i:last-child {
  right: 38px;
  width: 51px;
  height: 68px;
  background-position: 18% 66%, 18% 44%, 0 0;
  background-size: 44% 7%, 64% 18%, 100% 38%;
}

.device-card:hover .device-stack i:first-child { translate: 0 -6px; }
.device-card:hover .device-stack i:nth-child(2) { translate: 0 -4px; transition-delay: .05s; }
.device-card:hover .device-stack i:last-child { translate: 0 -8px; transition-delay: .1s; }

/* Sync-Anzeige in Karte 03 */
.sync-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 43px;
}

.sync-line span {
  padding: 10px 13px;
  border-radius: 10px;
  background: #edf2ed;
  color: var(--forest);
  font-size: 11px;
  font-weight: 800;
}

.sync-line i {
  color: var(--forest);
  font-style: normal;
}

/* «Für wen ist CampWeb» – drei ruhige Aussagen */
.audience {
  padding-bottom: 110px;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 26px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}

.audience-item {
  position: relative;
  padding-right: 24px;
}

.audience-item + .audience-item::before {
  content: "";
  position: absolute;
  top: .3em;
  bottom: .3em;
  left: -16px;
  width: 1px;
  background: var(--border);
}

.audience-for {
  display: block;
  margin-bottom: 12px;
  color: var(--forest);
  font: italic 500 clamp(32px, 3vw, 40px) / 1 var(--font-serif);
}

.audience-item p {
  max-width: 32ch;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}


/* ==========================================================================
   11  Startseite – Integration-Teaser
   ========================================================================== */

.integration-teaser {
  padding: 110px 0;
  background: var(--forest-dark);
  color: #fff;
}

.integration-teaser-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 100px;
}

.integration-teaser h2 {
  max-width: 590px;
  margin: 20px 0;
  font-size: clamp(40px, 4.7vw, 64px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.integration-teaser p {
  max-width: 560px;
  color: rgba(255, 255, 255, .65);
  font-size: 17px;
  line-height: 1.7;
}

.cloud-flow {
  display: grid;
  grid-template-columns: 1fr 135px 1fr;
  align-items: center;
}

.cloud-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .07);
}

.cloud-node.primary-node {
  background: var(--paper);
  color: var(--forest-dark);
  transform: rotate(-2deg);
}

.cloud-node strong { font-size: 20px; }
.cloud-node small { color: rgba(255, 255, 255, .68); }
.cloud-node.primary-node small { color: var(--ink-muted); }
.cloud-node .brand-mark { margin-bottom: 10px; }

.soft-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 9px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--forest-dark);
  font-weight: 850;
}

.cloud-connector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--lime);
  font-size: 8px;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.cloud-connector i {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
}

.cloud-connector b { padding: 10px 0; }


/* ==========================================================================
   12  Abschluss-CTA (alle Seiten)
   ========================================================================== */

.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 130px;
  text-align: center;
}

.final-cta h2 {
  max-width: 800px;
  margin: 22px auto 16px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.final-cta p {
  margin-bottom: 32px;
  color: var(--ink-muted);
  font-size: 17px;
}

.compact-cta {
  padding-top: 110px;
  padding-bottom: 115px;
}


/* ==========================================================================
   13  Footer
   ========================================================================== */

.site-footer {
  padding-top: 80px;
  background: var(--forest-night);
  color: #fff;
}

.site-footer .brand-mark { background: var(--lime); }
.site-footer .brand-mark span:first-child { background: var(--forest); }
.site-footer .brand-mark span:last-child { background: var(--paper); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 55px;
  padding-bottom: 65px;
}

.footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-grid strong {
  margin-bottom: 4px;
  color: var(--lime);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-grid a,
.footer-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
}

.footer-grid a:hover,
.footer-grid a[aria-current="page"] { color: #fff; }

/* Logo im Footer: gleiche Grösse wie im Header, helle Farben */
.footer-grid .brand {
  gap: 11px;
  color: #fff;
  font-size: 22px;
}

.footer-grid .brand > span:last-child {
  display: inline;
  color: #fff;
  font-size: inherit;
}

.footer-grid .brand small { color: var(--lime); }

.footer-brand p {
  max-width: 330px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
  line-height: 1.65;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
}

.footer-bottom > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ==========================================================================
   14  Seite «Funktionen»
   ========================================================================== */

.subhero {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 75px;
  min-height: 625px;
  padding-block: 90px;
}

.subhero h1 {
  margin-top: 22px;
  font-size: clamp(50px, 6vw, 78px);
}

.subhero > div:first-child > p {
  max-width: 590px;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.7;
}

/* Orbit-Grafik mit Funktions-Chips */
.feature-orbit {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1.2;
  border: 1px solid rgba(11, 104, 77, .16);
  border-radius: 50%;
  background: radial-gradient(circle, #edf2dc 0 24%, transparent 25% 52%, rgba(255, 255, 255, .45) 53%);
}

.feature-orbit::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(11, 104, 77, .24);
  border-radius: 50%;
}

.orbit-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 23px;
  border-radius: 18px;
  background: var(--forest);
  color: #fff;
  box-shadow: 0 22px 45px rgba(11, 104, 77, .23);
  transform: translate(-50%, -50%);
}

.orbit-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid rgba(11, 104, 77, .14);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 11px;
  font-weight: 720;
  box-shadow: 0 12px 30px rgba(29, 65, 52, .1);
  transition: translate .25s var(--ease-soft), box-shadow .25s;
}

.orbit-chip:hover {
  translate: 0 -3px;
  box-shadow: 0 16px 34px rgba(29, 65, 52, .16);
}

.chip-one { top: 18%; left: 6%; }
.chip-two { top: 28%; right: 2%; }
.chip-three { bottom: 16%; left: 10%; }
.chip-four { right: 9%; bottom: 12%; }

/* Funktionsübersicht */
.feature-index {
  padding-top: 110px;
  padding-bottom: 120px;
}

.section-heading.centered {
  max-width: 750px;
  margin: 0 auto 65px;
  text-align: center;
}

.section-heading h2 {
  margin: 18px 0 16px;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.section-heading p {
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.7;
}

.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.detail-feature-card {
  position: relative;
  min-height: 300px;
  padding: 25px;
  border: 1px solid rgba(12, 62, 49, .11);
  border-radius: 19px;
  background: var(--paper);
  transition: transform .2s ease, border-color .2s ease;
}

.detail-feature-card:hover {
  border-color: rgba(11, 104, 77, .35);
  transform: translateY(-4px);
}

.detail-feature-card > span {
  position: absolute;
  top: 28px;
  right: 23px;
  color: #9aaba4;
  font: 650 10px / 1 var(--font-mono);
}

.detail-feature-card h3 {
  margin: 45px 0 12px;
  font-size: 20px;
  letter-spacing: -.025em;
}

.detail-feature-card p {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* KI-Showcase */
.ai-showcase {
  padding: 110px 0;
  background: var(--surface-sage);
}

.ai-showcase-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 100px;
}

.ai-showcase h2,
.sync-story h2,
.swiss-service h2 {
  margin: 20px 0;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.ai-showcase-grid > div:first-child > p,
.sync-story-grid > div:last-child > p,
.swiss-copy p {
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  color: #365d4f;
  font-size: 14px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.check-list .icon { color: var(--forest); }

.ai-conversation {
  padding: 26px;
  border: 1px solid rgba(12, 62, 49, .13);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(42, 72, 56, .12);
}

.conversation-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e8e2;
  font-size: 13px;
  font-weight: 800;
}

.conversation-top span {
  margin-left: auto;
  color: var(--forest);
  font-size: 9px;
}

.chat-bubble {
  max-width: 78%;
  margin-top: 25px;
  padding: 15px 17px;
  font-size: 13px;
  line-height: 1.55;
}

.user-bubble {
  margin-left: auto;
  border-radius: 15px 3px 15px 15px;
  background: #e8ece8;
}

.assistant-bubble {
  display: flex;
  gap: 10px;
  border-radius: 3px 15px 15px 15px;
  background: var(--forest);
  color: #fff;
}

.assistant-bubble b { color: var(--lime); }

.suggestion-row {
  display: flex;
  gap: 8px;
  margin: 18px 0 0 32px;
}

.suggestion-row span {
  padding: 7px 10px;
  border: 1px solid rgba(11, 104, 77, .2);
  border-radius: var(--radius-pill);
  color: var(--forest);
  font-size: 9px;
  font-weight: 750;
}

/* Drei Schritte – verbunden durch eine gestrichelte Route wie auf der Karte */
.three-steps {
  padding-top: 120px;
  padding-bottom: 40px;
}

.step-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Route: vom Mittelpunkt des ersten zum Mittelpunkt des letzten Kreises */
.step-grid::before {
  content: "";
  position: absolute;
  top: 53px;
  right: calc((100% - 36px) / 3 - 53px);
  left: 53px;
  border-top: 2px dashed rgba(12, 62, 49, .27);
}

.step-grid article {
  padding: 34px;
  border-top: 1px solid transparent;
}

.step-grid article > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--forest-dark);
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--cream);
}

.step-grid h3 {
  margin: 25px 0 10px;
  font-size: 23px;
}

.step-grid p {
  color: var(--ink-muted);
  line-height: 1.65;
}

/* Häufige Fragen – aufklappbar ohne JavaScript (<details>) */
.faq {
  padding-top: 100px;
  padding-bottom: 30px;
}

.faq-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: start;
  gap: 70px;
}

.faq-grid .section-heading {
  position: sticky;
  top: 100px;
}

.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: grid;
  grid-template-columns: auto 1fr 24px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.015em;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-number {
  color: #92a39c;
  font: 650 11px / 1 var(--font-mono);
}

.faq-icon {
  width: 22px;
  height: 22px;
  color: var(--forest);
  transition: rotate .25s var(--ease-soft);
}

.faq-item[open] .faq-icon { rotate: 45deg; }
.faq-item summary:hover .faq-question { color: var(--forest); }

.faq-answer {
  max-width: 620px;
  padding: 0 0 24px 45px;              /* bündig mit dem Fragetext */
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
}

.faq-answer .text-link {
  margin-top: 10px;
  color: var(--forest-dark);
}

.faq-item[open] .faq-answer {
  animation: faq-in .28s var(--ease-soft) both;
}

/* Weiches Aufklappen in Browsern, die das schon können (sonst sofort offen) */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height .3s var(--ease-soft), content-visibility .3s allow-discrete;
  }

  .faq-item[open]::details-content { height: auto; }
}


/* ==========================================================================
   15  Seite «CampSoft Integration»
   ========================================================================== */

.integration-hero {
  padding: 96px 0 104px;
  background: var(--forest-dark);
  color: #fff;
}

.integration-hero-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 72px;
  min-height: 520px;
}

.inverse-eyebrow {
  border-color: rgba(216, 239, 104, .28);
  background: rgba(255, 255, 255, .06);
  color: var(--lime);
}

.integration-hero h1 {
  margin-top: 23px;
  font-size: clamp(50px, 5.5vw, 75px);
}

.integration-hero p {
  max-width: 570px;
  color: rgba(255, 255, 255, .65);
  font-size: 18px;
  line-height: 1.7;
}

/* Verbindungs-Grafik CampWeb ↔ CampSoft */
.integration-map {
  position: relative;
  display: grid;
  align-content: center;
  gap: 26px;
  min-height: 405px;
  padding: 38px 34px 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .024));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

/* feines Punktraster im Hintergrund */
.integration-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: radial-gradient(rgba(216, 239, 104, .24) 1px, transparent 1px);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
}

.map-grid,
.map-benefits {
  position: relative;
  z-index: 1;
}

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.map-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 176px;
  padding: 22px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .16);
}

.map-card strong {
  font-size: 20px;
  letter-spacing: -.03em;
}

.map-card small { font-size: 11px; }

.map-web { background: linear-gradient(145deg, #1b604c, #124235); }
.map-web .brand-mark { margin-bottom: 6px; background: var(--lime); }
.map-web .brand-mark span:first-child { background: var(--forest-dark); }
.map-web .brand-mark span:last-child { background: var(--paper); }
.map-web small { color: rgba(255, 255, 255, .68); }

.map-soft {
  background: var(--paper);
  color: var(--forest-dark);
}

.map-soft small { color: var(--ink-muted); }

.map-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}

.map-connector::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 239, 104, .8) 16% 84%, transparent);
}

.connector-orb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(216, 239, 104, .45);
  border-radius: 50%;
  background: var(--forest-dark);
  color: var(--lime);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 0 0 8px rgba(12, 62, 49, .76);
}

.map-connector small {
  position: absolute;
  top: calc(50% + 30px);
  color: var(--lime);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.map-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .8);
  font-size: 10px;
  font-weight: 650;
}

.map-benefits .icon { color: var(--lime); }

/* Das System dahinter */
.system-intro {
  padding-top: 115px;
  padding-bottom: 120px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.system-grid article {
  padding: 30px;
  border: 1px solid rgba(12, 62, 49, .11);
  border-radius: 18px;
  background: var(--paper);
}

.system-grid article > .icon { color: var(--forest); }

.system-grid h3 {
  margin: 27px 0 10px;
  font-size: 20px;
}

.system-grid p {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Sync-Story mit Buchungs-Vorschau */
.sync-story {
  padding: 115px 0;
  background: var(--surface-sage);
}

.sync-story-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 95px;
}

.sync-visual { position: relative; }

.sync-browser {
  overflow: hidden;
  border: 1px solid rgba(12, 62, 49, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(42, 72, 56, .15);
  transform: rotate(-1.5deg);
}

.sync-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  padding: 0 14px;
  background: #edf0eb;
}

.sync-browser-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccd5cf;
}

.sync-browser-bar span {
  margin-left: 18px;
  padding: 6px 15px;
  border-radius: 7px;
  background: #fff;
  color: #899791;
  font-size: 8px;
}

.sync-browser-body { padding: 26px; }

.sync-browser-body > strong {
  display: block;
  margin-bottom: 20px;
  font-size: 20px;
}

.date-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce3dd;
  border-radius: 10px;
  font-size: 10px;
}

.date-strip i {
  margin-left: auto;
  color: #6d827a;
  font-style: normal;
}

.pitch-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f5f5ef;
}

.pitch-row > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--forest);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.pitch-row p {
  font-size: 11px;
  font-weight: 700;
}

.pitch-row small {
  color: #70827b;
  font-weight: 500;
}

.pitch-row b { font-size: 11px; }

.live-sync-badge {
  position: absolute;
  right: -18px;
  bottom: -20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--forest-dark);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 15px 35px rgba(38, 67, 50, .18);
}

/* Managed Service */
.swiss-service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 95px;
  padding-top: 120px;
  padding-bottom: 60px;
}

.service-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-points article {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(12, 62, 49, .11);
  border-radius: 15px;
  background: var(--paper);
}

.service-points .icon { color: var(--forest); }

.service-points div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-points strong { font-size: 14px; }

.service-points span {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}


/* ==========================================================================
   16  Seite 404 – «Der Wegweiser»
   ========================================================================== */

.not-found {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 70px;
  min-height: 600px;
  padding-top: 70px;
  padding-bottom: 130px;
}

.not-found h1 { font-size: clamp(40px, 5vw, 66px); }

/* Wegweiser: gelbe Pfeilschilder an einem dunklen Pfosten */
.signpost {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 34px;
  padding-left: 18px;
}

.signpost::before {
  content: "";
  position: absolute;
  top: -30px;
  bottom: -70px;
  left: 0;
  width: 10px;
  border-radius: 3px;
  background: var(--forest-dark);
}

.signpost li {
  background: var(--sun);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  transition: translate var(--dur-hover) var(--ease-soft);
}

.signpost li:hover { translate: 5px 0; }

.signpost a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 40px 0 18px;
  color: var(--forest-dark);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -.01em;
}

/* clip-path würde eine normale Outline abschneiden */
.signpost a:focus-visible {
  outline: 3px solid transparent;   /* sichtbar im Windows-Kontrastmodus */
  outline-offset: -5px;
  box-shadow: inset 0 0 0 3px var(--forest-dark);
}

.not-found-demo { margin-top: 96px; }

/* Landschaft: Höhenlinien, Sonne, Lager */
.not-found-visual {
  position: relative;
  min-height: 340px;
}

.not-found-contour {
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -10%;
  width: 120%;
  height: auto;
  color: var(--forest);
  opacity: .16;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

.not-found-sun {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 8%;
  width: 110px;
  height: 110px;
}

.not-found-camp {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  width: min(280px, 70%);
  height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 12px 18px rgba(11, 104, 77, .18));
}


/* ==========================================================================
   17  Bewegung
   Alles hier ist Zugabe: ohne Animation sieht die Seite gleich aus.
   Bei «Bewegung reduzieren» wird alles abgeschaltet (Abschnitt 21; die
   Schleifen der Waldbühne zusätzlich in 20.9).
   ========================================================================== */

/* --- Live-Signal: Ring um den Verbindungspunkt (CampSoft Integration) ------- */
.connector-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(216, 239, 104, .7);
  border-radius: 50%;
  pointer-events: none;
  animation: orb-ring 2.8s ease-out infinite;
}

/* --- Aufrichten: schräg gestellte Elemente richten sich beim Überfahren auf -- */
.brand-mark,
.editor-window,
.sync-browser,
.cloud-node.primary-node {
  transition: transform var(--dur-settle) var(--ease-spring), box-shadow var(--dur-settle);
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark,
.editor-stage:hover .editor-window,
.sync-visual:hover .sync-browser,
.cloud-node.primary-node:hover {
  transform: rotate(0);
}

/* --- Scroll-Reveal: Karten gleiten beim Scrollen ins Bild -------------------
   Nur in Browsern mit Scroll-Timelines. Andere zeigen alles sofort. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-feature-card,
    .audience-item,
    .cloud-node,
    .detail-feature-card,
    .step-grid article,
    .faq-item,
    .system-grid article,
    .service-points article {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    .detail-feature-card:nth-child(4n+2),
    .system-grid article:nth-child(3n+2) { animation-range: entry 10% entry 45%; }

    .detail-feature-card:nth-child(4n+3),
    .system-grid article:nth-child(3n+3) { animation-range: entry 15% entry 50%; }

    .detail-feature-card:nth-child(4n+4) { animation-range: entry 20% entry 55%; }
  }
}

@keyframes orb-ring {
  0% { opacity: .8; scale: 1; }
  100% { opacity: 0; scale: 2.1; }
}

@keyframes rise-in {
  from { opacity: .001; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes faq-in {
  from { opacity: 0; translate: 0 -6px; }
}


/* ==========================================================================
   18  Responsive – bis 900px (Tablet)
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Header bleibt beim Scrollen oben ----------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
  }

  /* Anker und Tastaturfokus nicht unter der klebenden Kopfzeile verstecken */
  html { scroll-padding-top: calc(var(--header-height) + 12px); }

  .nav-shell { gap: 14px; }

  .header-cta {
    order: 2;
    margin-left: auto;
  }

  /* --- Mobile-Menü ---------------------------------------------------------
     Eine unsichtbare Checkbox merkt sich «offen/zu». Das Label mit den drei
     Balken schaltet sie um. Funktioniert ohne JavaScript. */
  /* Die (unsichtbare) Checkbox liegt genau über dem Hamburger-Symbol,
     damit Screenreader und Sprachsteuerung sie dort finden. */
  .nav-toggle-input {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: calc(var(--gutter) / 2);
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0;
    translate: 0 -50%;
    cursor: pointer;
  }

  .nav-toggle {
    order: 3;
    flex: none;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(11, 104, 77, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--forest-dark);
    transition: translate var(--dur-hover) var(--ease-soft), rotate var(--dur-hover) var(--ease-soft), opacity var(--dur-hover), scale var(--dur-hover);
  }

  .nav-toggle-input:focus-visible ~ .nav-toggle {
    outline: 3px solid var(--forest);
    outline-offset: 3px;
  }

  /* Drei Balken werden zum X */
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; scale: .4 1; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

  /* Menü-Panel unter der Kopfzeile */
  .main-nav {
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(14px, 4vw, 24px) 24px;
    border-bottom: 1px solid rgba(12, 62, 49, .11);
    background: var(--cream);
    box-shadow: 0 24px 50px rgba(24, 61, 49, .14);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .25s, translate .25s var(--ease-soft), visibility 0s linear .25s;
  }

  .nav-toggle-input:checked ~ .main-nav {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity .25s, translate .25s var(--ease-soft), visibility 0s;
  }

  .main-nav > a:not(.nav-cta) {
    z-index: 1;
    min-height: 56px;
    padding-left: 26px;
    border-top: 1px solid var(--border);
    color: var(--forest-dark);
    font-size: 18px;
    font-weight: 660;
  }

  .main-nav > a:first-child { border-top: 0; }

  /* Gipfelmarke steht im Menü vor dem Text */
  .main-nav > a:not(.nav-cta)::after {
    top: calc(50% - 3px);
    bottom: auto;
    left: 0;
    translate: -6px 0;
  }

  .main-nav > a:not(.nav-cta):hover::after,
  .main-nav > a:not(.nav-cta):focus-visible::after,
  .main-nav > a[aria-current="page"]::after { translate: 0 0; }

  /* Kleines Lager in der Ecke des Menüs */
  .nav-camp {
    position: absolute;
    z-index: 0;
    top: 14px;
    right: 20px;
    display: block;
    width: 72px;
    height: auto;
    opacity: .9;
    pointer-events: none;
  }

  /* Dunkle Fläche unter dem Menü – ein Tipp darauf schliesst es */
  .nav-toggle-input:checked ~ .nav-backdrop {
    position: absolute;
    z-index: 0;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    height: 100vh;
    background: rgba(12, 62, 49, .2);
    cursor: pointer;
  }

  /* Seite hinter dem offenen Menü nicht scrollen (moderne Browser) */
  @supports selector(:has(*)) {
    html:has(.nav-toggle-input:checked) { overflow: hidden; }
  }

  /* --- Inhalte ----------------------------------------------------------- */
  .hero {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-top: 58px;
  }

  .hero-copy { text-align: center; }
  .hero-copy h1,
  .hero-copy .hero-lead { margin-inline: auto; }

  /* Rasterspalten dürfen nicht breiter werden als der Bildschirm */
  .hero > * { min-width: 0; }

  .hero-actions,
  .benefit-list { justify-content: center; }

  .editor-stage {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  .trust-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 28px;
  }

  .trust-inner ul { justify-content: flex-start; }

  .intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .integration-teaser-grid,
  .ai-showcase-grid,
  .integration-hero-grid,
  .sync-story-grid,
  .swiss-service,
  .subhero,
  .not-found {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .home-feature-grid { grid-template-columns: 1fr 1fr; }

  .home-feature-card.feature-wide {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 580px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .audience-item {
    padding: 22px 0 0;
    border-top: 1px solid var(--border);
  }

  .audience-item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .audience-item + .audience-item::before { display: none; }

  .feature-card-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-orbit { justify-self: center; }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .faq-grid .section-heading { position: static; }

  /* Footer: alle Spalten bleiben sichtbar – die Telefonnummer ist mobil wichtig */
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
  }

  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div { gap: 6px; }

  .footer-grid a,
  .footer-grid > div > span { min-height: 44px; }

  .integration-map {
    justify-self: center;
    width: min(620px, 100%);
  }

  .system-grid { grid-template-columns: repeat(2, 1fr); }

  .not-found {
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 110px;
  }

  .not-found-visual {
    order: -1;
    min-height: 260px;
  }

  .not-found-demo { margin-top: 80px; }
}


/* ==========================================================================
   19  Responsive – bis 600px (Smartphone)
   ========================================================================== */

@media (max-width: 600px) {

  :root {
    --gutter: 28px;
    --header-height: 70px;
  }

  .nav-shell { gap: 12px; }

  .brand,
  .footer-grid .brand { font-size: 20px; }

  .button-small {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 11px;
  }

  .header-cta .icon { display: none; }
  .nav-camp { top: 10px; width: 64px; }

  h1 { font-size: 46px; }

  .hero {
    min-height: 0;
    padding-top: 45px;
    padding-bottom: 55px;
  }

  .hero-lead { font-size: 16px; }

  .editor-stage { padding-left: 0; }
  .editor-body { grid-template-columns: 80px 1fr; }
  .editor-sidebar { padding-inline: 6px; }
  .site-preview { padding: 12px; }
  .editor-url { padding-inline: 10px; }
  .preview-nav span:last-child { display: none; }
  .preview-hero { height: 220px; }

  .ai-prompt-card {
    right: -4px;
    grid-template-columns: auto 1fr;
    width: 92%;
  }

  .ai-status { display: none; }

  .trust-inner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .intro { padding-block: 80px; }

  .home-feature-grid,
  .feature-card-grid,
  .system-grid,
  .step-grid { grid-template-columns: 1fr; }

  .home-feature-card.feature-wide {
    grid-column: auto;
    min-height: 600px;
  }

  .home-feature-card {
    min-height: 300px;
    padding: 25px;
  }

  .audience { padding-bottom: 90px; }

  .integration-teaser { padding-block: 80px; }

  .cloud-flow {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cloud-connector {
    flex-direction: row;
    align-items: center;
  }

  .cloud-connector i { width: 100%; }
  .cloud-node { min-height: 160px; }

  .subhero {
    min-height: 0;
    padding-block: 65px;
  }

  .subhero h1,
  .integration-hero h1 { font-size: 48px; }

  .feature-orbit { aspect-ratio: 1; }

  .orbit-chip {
    padding: 8px;
    font-size: 9px;
  }

  .chip-one { left: 0; }
  .chip-two { right: 0; }
  .chip-three { left: 1%; }
  .chip-four { right: 0; }

  .feature-index,
  .system-intro,
  .ai-showcase,
  .sync-story { padding-block: 80px; }

  .ai-showcase-grid,
  .sync-story-grid { gap: 55px; }

  .live-sync-badge { right: -4px; }

  /* Schritte untereinander: jede Etappe mit eigener gestrichelter Linie */
  .step-grid::before { display: none; }
  .step-grid article { border-top: 2px dashed rgba(12, 62, 49, .27); }

  .faq { padding-top: 80px; }

  .faq-item summary {
    grid-template-columns: auto 1fr 22px;
    font-size: 16px;
  }


  .integration-hero { padding: 64px 0 72px; }

  .integration-map {
    gap: 16px;
    min-height: 0;
    padding: 22px;
    border-radius: 22px;
  }

  .map-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .map-card { min-height: 138px; }
  .map-connector { min-height: 48px; }

  .map-connector::before {
    top: 0;
    right: auto;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(216, 239, 104, .8) 16% 84%, transparent);
  }

  .connector-orb {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .map-connector small {
    top: 50%;
    left: calc(50% + 24px);
    transform: translateY(-50%);
  }

  .map-benefits {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .map-benefits li {
    justify-content: flex-start;
    padding-left: 15px;
  }

  .swiss-service { padding-top: 85px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 22px;
  }

  .footer-camp { left: 68%; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding-block: 16px;
  }

  .final-cta { padding-block: 90px; }
  .final-cta h2 { font-size: 43px; }

  .not-found-visual { min-height: 220px; }
  .not-found-camp { width: 200px; }

  .not-found-sun {
    width: 72px;
    height: 72px;
  }
}

/* Sehr schmale Geräte: der Demo-Button wandert aus der Kopfzeile ins Menü */
@media (max-width: 359px) {
  .header-cta { display: none; }

  .nav-toggle { margin-left: auto; }

  .main-nav .nav-cta {
    display: inline-flex;
    align-self: flex-start;
    min-height: 48px;
    margin-top: 16px;
    font-size: 14px;
  }
}


/* Windows-Kontrastmodus: Hamburger-Balken sichtbar halten */
@media (forced-colors: active) {
  .nav-toggle span {
    forced-color-adjust: none;
    background: CanvasText;
  }
}


/* ==========================================================================
   20  Startseite – Hero «Dunkle Waldbühne»
   Der Hero der Startseite als dunkle Bühne in der Dämmerung: dunkle
   Kopfzeile, Nachthimmel, vier Bergketten in abgestuften Grüntönen, Dunst,
   kleine Lichter im Tal, leuchtendes Editor-Fenster, dunkle Trust-Leiste.

   Dieser Abschnitt überschreibt die hellen Werte aus 06, 09 und 10 und steht
   bewusst NACH den Responsive-Abschnitten 18/19, damit er dort gewinnt.
   Kopfzeile und Menü sind mit .page-home eingegrenzt (<body class="page-home">
   in index.html) – die anderen Seiten behalten ihre helle Kopfzeile.

   Zurück zum hellen Hero: diesen Abschnitt löschen, in index.html die Klasse
   page-home am <body> und die mit «Waldbühne» markierten Blöcke entfernen.
   ========================================================================== */

/* --- 20.0  Farben und Masse der Bühne --------------------------------------- */
.page-home {
  --wb-sky-top: #092f26;                 /* Nachthimmel oben (= --forest-night) */
  --wb-sky-mid: #0c3e31;                 /* (= --forest-dark) */
  --wb-sky-horizon: #135545;             /* hellere Dämmerung am Horizont */
  --wb-ridge-far: #2c8a68;               /* fernster Grat: hell und dunstig */
  --wb-ridge-3: #0f6b4f;
  --wb-ridge-2: #0c3e31;
  --wb-ridge-1: #092f26;                 /* vorderster Grat = Farbe der Trust-Leiste */
  --wb-mist: rgba(230, 239, 217, .2);
  --wb-text: #fffefa;
  --wb-text-soft: rgba(255, 255, 255, .72);
  --wb-line: rgba(255, 255, 255, .09);
  --wb-valley-h: clamp(150px, 21vw, 300px);   /* Höhe der Tal-Kulisse */
  --wb-stage-shift: clamp(40px, 6vw, 88px);   /* Editor rückt nach unten in die Kulisse */
}

/* --- 20.1  Kopfzeile dunkel (nur Startseite) -------------------------------- */
.page-home .site-header {
  border-bottom-color: var(--wb-line);
  background: rgba(9, 47, 38, .94);
  color: var(--wb-text);
}

.page-home .site-header .brand { color: var(--wb-text); }
.page-home .site-header .brand small { color: var(--lime); }

.page-home .site-header .brand-mark {
  background: var(--forest-light);
  box-shadow: 0 0 0 1px rgba(216, 239, 104, .28), 0 8px 20px rgba(0, 0, 0, .35);
}

.page-home .site-header .main-nav { color: rgba(255, 255, 255, .74); }

.page-home .site-header .main-nav > a:not(.nav-cta):hover,
.page-home .site-header .main-nav > a:not(.nav-cta):focus-visible { color: #fff; }

.page-home .site-header .main-nav > a:not(.nav-cta)::after { background: var(--lime); }

.page-home .site-header .header-cta,
.page-home .site-header .nav-cta {
  background: var(--lime);
  color: var(--forest-dark);
  box-shadow: 0 10px 28px rgba(216, 239, 104, .16);
}

.page-home .site-header .header-cta:hover { box-shadow: 0 14px 34px rgba(216, 239, 104, .24); }

.page-home .site-header :focus-visible { outline-color: var(--lime); }

.page-home .site-header .header-cta:focus-visible,
.page-home .site-header .nav-cta:focus-visible,
.hero .button:focus-visible {
  box-shadow: 0 0 0 3px var(--forest-dark), 0 0 0 5px var(--lime);
}

/* «Zum Inhalt springen» muss sich von der dunklen Kopfzeile abheben */
.page-home .skip-link {
  background: var(--lime);
  color: var(--forest-dark);
  outline-color: var(--lime);
}

/* --- 20.2  Bühne: vollbreiter Nachthimmel ----------------------------------- */
.hero {
  position: relative;
  isolation: isolate;                     /* eigene Stapelordnung: Kulisse bleibt im Hero */
  min-height: 0;
  padding-top: 50px;
  padding-bottom: calc(var(--wb-valley-h) * .52);   /* Text endet über dem flachen linken Talrand */
  color: var(--wb-text);
}

/* Himmel: oben dunkel, Dämmerung am Horizont, weiches Grün-Glühen hinter dem Editor.
   Reicht seitlich weit über den Inhalt hinaus – html/body schneiden den Überstand ab. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0 -100vw;
  background:
    radial-gradient(52% 60% at 74% 48%, rgba(31, 138, 102, .34), transparent 70%),
    radial-gradient(40% 36% at 18% 12%, rgba(11, 104, 77, .28), transparent 70%),
    linear-gradient(180deg, var(--wb-sky-top) 0%, var(--wb-sky-mid) 46%, var(--wb-sky-horizon) 100%);
}

/* --- 20.3  Text auf dunklem Grund ------------------------------------------- */
.hero .eyebrow {
  border-color: rgba(216, 239, 104, .34);
  background: rgba(216, 239, 104, .09);
  color: var(--lime);
}

.hero h1 { color: var(--wb-text); }
.hero h1 em { color: var(--lime); }
.hero .hero-lead { color: var(--wb-text-soft); }

.hero .button {
  background: var(--lime);
  color: var(--forest-dark);
  box-shadow: 0 12px 30px rgba(216, 239, 104, .22);
}

.hero .button:hover { box-shadow: 0 16px 36px rgba(216, 239, 104, .3); }

.hero .text-link { color: rgba(255, 255, 255, .86); }
.hero .text-link:hover { color: var(--lime); }

.hero .benefit-list { color: rgba(255, 255, 255, .7); }
.hero .benefit-list .icon { color: var(--lime); }
.hero :focus-visible { outline-color: var(--lime); }

/* Die Textspalte liegt über allen Dekorschichten */
.hero-copy {
  position: relative;
  z-index: 3;
}

/* --- 20.4  Editor auf der Bühne --------------------------------------------- */
.editor-stage {
  z-index: 4;                              /* vor der Kulisse */
  translate: 0 var(--wb-stage-shift);      /* rückt leicht in die Bergketten */
}

/* Der helle Farbklecks wird zum dunkelgrünen Bühnenlicht */
.editor-stage::before {
  background: linear-gradient(145deg, rgba(31, 138, 102, .62), rgba(11, 104, 77, .3) 60%, rgba(12, 62, 49, 0));
}

/* Lime-Glühen hinter dem Fenster (atmet langsam) */
.editor-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% 8% 14% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 239, 104, .3), rgba(216, 239, 104, 0));
  filter: blur(26px);
  animation: wb-breathe 10s ease-in-out infinite alternate;
}

.hero .editor-window {
  border-color: rgba(216, 239, 104, .22);
  box-shadow:
    0 0 0 1px rgba(216, 239, 104, .12),
    0 30px 80px rgba(0, 0, 0, .45),
    0 0 90px rgba(216, 239, 104, .12);
}

.hero .ai-prompt-card {
  color: var(--forest-dark);             /* die Karte bleibt hell – ihr Text darf das Weiss des Heros nicht erben */
  border-color: rgba(216, 239, 104, .3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 40px rgba(216, 239, 104, .1);
}

/* Kleine Produkt-Chips am Editor (dunkles Glas, Lime-Punkt) */
.stage-chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(216, 239, 104, .28);
  border-radius: var(--radius-pill);
  background: rgba(9, 47, 38, .82);
  color: var(--wb-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.stage-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px 1px rgba(216, 239, 104, .7);
}

.stage-chip .icon { color: var(--lime); }

.chip-saved {
  top: -4px;
  left: 6px;
  animation: wb-float 9s ease-in-out infinite alternate;
}

/* rechts am Fensterrand auf Höhe der Kennzahlen – berührt die KI-Karte auf keiner Breite */
.chip-sync {
  right: -22px;
  bottom: 122px;
  animation: wb-float 12s ease-in-out infinite alternate-reverse;
}

/* --- 20.5  Tal-Kulisse: Bergketten, Dunst, Lager, Lichter ------------------- */
.wb-valley {
  position: absolute;
  z-index: -2;
  bottom: 0;
  left: 50%;
  width: 108vw;                            /* etwas breiter als der Bildschirm: kein Spalt neben dem Scrollbalken */
  height: var(--wb-valley-h);
  overflow: hidden;
  pointer-events: none;
  translate: -50% 0;
}

/* Dämmerungsglühen hinter dem fernsten Grat, rechts bei den Gipfeln */
.wb-valley::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 62% at 76% 96%, rgba(216, 239, 104, .22), rgba(31, 138, 102, .14) 45%, transparent 72%);
  animation: wb-breathe 12s ease-in-out infinite alternate;
}

/* Vier Bergketten: hinten hell und dunstig, vorne dunkel (Luftperspektive) */
.wb-ridge {
  position: absolute;
  bottom: 0;
  left: -2%;
  display: block;
  width: 104%;
}

.wb-ridge-far { height: 100%; fill: var(--wb-ridge-far); opacity: .55; animation: wb-drift 14s ease-in-out infinite alternate; }
.wb-ridge-3 { height: 86%; fill: var(--wb-ridge-3); animation: wb-drift 12s ease-in-out infinite alternate-reverse; }
.wb-ridge-2 { height: 68%; fill: var(--wb-ridge-2); }
/* vorderster Grat 2px tiefer: keine helle Haarlinie zur Trust-Leiste bei krummen Pixelhöhen */
.wb-ridge-1 { bottom: -2px; height: calc(46% + 2px); fill: var(--wb-ridge-1); }

/* Dunstbänder zwischen den Bergketten – nur im rechten Talteil, fern der Textspalte */
.wb-mist {
  position: absolute;
  left: 28%;
  width: 96%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--wb-mist) 28%, rgba(230, 239, 217, .24) 50%, var(--wb-mist) 72%, transparent);
  filter: blur(16px);
}

.wb-mist-a { bottom: 24%; height: 60px; animation: wb-mist 14s ease-in-out infinite alternate; }
.wb-mist-b { bottom: 9%; height: 44px; opacity: .8; animation: wb-mist 11s ease-in-out infinite alternate-reverse; }

/* Kleine Lager-Silhouette (nur Nachtgrün) auf dem mittleren Grat */
.wb-camp {
  position: absolute;
  bottom: 27%;
  left: 52.5%;
  width: clamp(54px, 5.4vw, 78px);
  height: auto;
  overflow: visible;
}

/* Lichter im Tal: winzige Lime-Punkte, jedes flackert in seinem eigenen Rhythmus.
   Die Position steht direkt am Element (style="left:…;bottom:…"). */
.wb-light {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px 1px rgba(216, 239, 104, .75), 0 0 18px 4px rgba(216, 239, 104, .22);
  animation: wb-light 10s ease-in-out infinite;
}

.wb-light:nth-of-type(2) { animation-duration: 12s; animation-delay: -3s; }
.wb-light:nth-of-type(3) { width: 3px; height: 3px; animation-duration: 9s; animation-delay: -6s; }
.wb-light:nth-of-type(4) { animation-duration: 13s; animation-delay: -1.5s; }
.wb-light:nth-of-type(5) { width: 3px; height: 3px; animation-duration: 11s; animation-delay: -8s; }
.wb-light:nth-of-type(6) { animation-duration: 10s; animation-delay: -4.5s; }
.wb-light:nth-of-type(7) { width: 3px; height: 3px; animation-duration: 12s; animation-delay: -9s; }

/* --- 20.6  Sterne (nur Desktop, rechte Himmelshälfte) ------------------------ */
.wb-star {
  position: absolute;
  z-index: -1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--paper);
  opacity: .4;
  pointer-events: none;
  animation: wb-star 9s ease-in-out infinite alternate;
}

.wb-star:nth-of-type(2) { width: 2px; height: 2px; animation-duration: 12s; animation-delay: -4s; }
.wb-star:nth-of-type(3) { animation-duration: 8s; animation-delay: -2s; }
.wb-star:nth-of-type(4) { width: 2px; height: 2px; animation-duration: 11s; animation-delay: -7s; }
.wb-star:nth-of-type(5) { width: 2px; height: 2px; animation-duration: 13s; animation-delay: -5s; }
.wb-star:nth-of-type(6) { animation-duration: 10s; animation-delay: -1s; }
.wb-star:nth-of-type(7) { width: 2px; height: 2px; animation-duration: 12s; animation-delay: -6s; }
.wb-star:nth-of-type(8) { animation-duration: 9s; animation-delay: -3s; }

/* --- 20.7  Trust-Leiste als dunkles Band (der vorderste Grat fliesst hinein) -- */
.trust-strip {
  border-block: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: var(--forest-night);
  color: var(--wb-text);
}

.trust-inner ul { color: rgba(255, 255, 255, .66); }

/* --- 20.8  Bewegung: langsame Schleifen, nur opacity / translate / scale ----- */
@keyframes wb-breathe {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes wb-drift {
  from { translate: 0 0; }
  to { translate: 1.4% 0; }
}

@keyframes wb-mist {
  from { opacity: .7; translate: -4% 0; }
  to { opacity: 1; translate: 4% 0; }
}

@keyframes wb-float {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}

@keyframes wb-light {
  0% { opacity: .35; }
  9% { opacity: 1; }
  16% { opacity: .55; }
  38% { opacity: .95; }
  55% { opacity: .4; }
  74% { opacity: 1; }
  88% { opacity: .6; }
  100% { opacity: .35; }
}

@keyframes wb-star {
  from { opacity: .2; scale: .9; }
  to { opacity: .8; scale: 1.15; }
}

/* --- 20.9  Responsive -------------------------------------------------------- */

/* KI-Karte und Chip ragen nicht über den Bildschirmrand (die Karte steht sonst 28px über,
   der Seitenrand ist aber nur 24px breit, solange der Inhalt schmaler als 1180px ist).
   Bewusst nur mit max-width (ohne min-width-Gegenstück): bei krummen Bildschirmbreiten
   wie 900.5px würde sonst keine der beiden Regeln greifen. */
@media (max-width: 1260px) {
  .hero .ai-prompt-card { right: -10px; }
  .chip-sync { right: -8px; }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 44px;
    padding-bottom: calc(var(--wb-valley-h) * .3);
  }

  /* gestapelt: Editor unten, Kulisse dahinter – der Text steht weit darüber */
  .editor-stage { translate: 0 0; }

  .wb-star { display: none; }
  .wb-camp { left: 12%; }

  /* Mobile-Menü der Startseite: dunkles Panel, helle Links */
  .page-home .nav-toggle {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
  }

  .page-home .nav-toggle span { background: var(--wb-text); }
  .page-home .nav-toggle-input:focus-visible ~ .nav-toggle { outline-color: var(--lime); }

  .page-home .main-nav {
    border-bottom-color: var(--wb-line);
    background: var(--forest-night);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
  }

  .page-home .main-nav > a:not(.nav-cta) {
    border-top-color: rgba(255, 255, 255, .1);
    color: var(--wb-text);
  }

  .page-home .nav-toggle-input:checked ~ .nav-backdrop { background: rgba(9, 47, 38, .55); }
}

@media (max-width: 600px) {
  .page-home { --wb-valley-h: 190px; }

  .hero { padding-bottom: 44px; }
  .hero .ai-prompt-card { right: -4px; }   /* wie in Abschnitt 19 */

  /* schwere Dekoration weg: Dunst, Chips, Lager, Glühen – Bergketten und vier Lichter bleiben */
  .wb-mist,
  .stage-chip,
  .wb-camp,
  .wb-light:nth-of-type(n+5) { display: none; }

  .editor-stage::after { display: none; }

  .wb-ridge-far {
    left: -4%;
    width: 108%;
  }
}

/* Reduzierte Bewegung: ruhige Endzustände statt Schleifen */
@media (prefers-reduced-motion: reduce) {
  .editor-stage::after,
  .wb-valley::before,
  .wb-ridge,
  .wb-mist,
  .stage-chip,
  .wb-light,
  .wb-star { animation: none; }

  .editor-stage::after,
  .wb-valley::before,
  .wb-light { opacity: .85; }

  .wb-star { opacity: .5; }
}

/* Windows-Kontrastmodus: die Kulisse ist reines Dekor; Balken und Häkchen in Systemfarbe */
@media (forced-colors: active) {
  .wb-valley,
  .wb-star,
  .stage-chip,
  .editor-stage::after { display: none; }

  .page-home .nav-toggle span { background: CanvasText; }
  .hero .benefit-list .icon { color: CanvasText; }
}


/* ==========================================================================
   21  Reduzierte Bewegung
   Wer im Betriebssystem «Bewegung reduzieren» aktiviert hat, sieht keine
   Animationen und Übergänge. Inhalte bleiben vollständig sichtbar.
   ========================================================================== */

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

  .connector-orb::after,
  .faq-item[open] .faq-answer { animation: none; }

  .connector-orb::after { display: none; }

  /* eigene Regel: ältere Browser kennen ::details-content nicht */
  .faq-item::details-content { transition: none; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}