/* ==========================================================================
   Tourismusconsult — Corporate Design 2026
   Eine Schrift. Eine Akzentfarbe. Ein Signature-Element.
   Verbindliche Quelle: Tourismusconsult_CD_Manual_2026 und
   Tourismusconsult_Web-Umsetzung_CD-2026_Anleitung.
   ========================================================================== */

/* --- Schrift: DM Sans, selbst gehostet (kein Drittanbieter-Request) ------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/static/fonts/dmsans-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: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/static/fonts/dmsans-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;
}

/* --- Token ---------------------------------------------------------------- */
:root {
  /* CD-Farben 2026 */
  --tc-graphit-deep: #232322;
  --tc-graphit: #232322;
  --tc-graphit-hell: #4a4a49;
  --tc-gold: #c9a94e;
  --tc-gold-tief: #b0912f;
  --tc-hellgold: #e6d9a8;
  --tc-nebel: #eae7de;
  --tc-warmweiss: #f4f2ed;
  --tc-weiss: #ffffff;
  --tc-grau: #6b6b69;

  /* Rollen */
  --bg: var(--tc-warmweiss);
  --bg-alt: var(--tc-nebel);
  --bg-card: var(--tc-weiss);
  --fg: var(--tc-graphit);
  --fg-soft: var(--tc-graphit-hell);
  --fg-muted: var(--tc-grau);
  --accent: var(--tc-gold-tief); /* auf hellem Grund */
  --accent-bright: var(--tc-gold); /* auf dunklem Grund */
  --hairline: #ddd9cf;

  /* Typo-Skala (fluid, Desktop-Richtwerte aus dem CD-Manual) */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --step-4: clamp(2.35rem, 1.75rem + 3vw, 4rem);

  /* Raum */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 68ch;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 10px;
  --radius-sm: 8px;

  --shadow-soft: 0 1px 2px rgba(35, 35, 34, 0.04), 0 8px 28px rgba(35, 35, 34, 0.06);
  --shadow-lift: 0 2px 4px rgba(35, 35, 34, 0.06), 0 18px 48px rgba(35, 35, 34, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
  /* Sicherheitsnetz gegen Ueberlauf. Greift nur, wenn ein Wort allein
     nicht in die Zeile passt — sonst bleibt der Umbruch unangetastet. */
  overflow-wrap: break-word;
}

/* Silbentrennung ausschliesslich auf Telefonbreiten.
   Deutsche Komposita brauchen sie dort wirklich: «Geschaeftsbedingungen»
   misst 441px, die Spalte 359px. Ab etwa 560px passt jedes Wort, und
   dann richtet die Trennung nur Schaden an — zusammen mit
   text-wrap: balance trennte der Browser auch Woerter, die bequem in die
   Zeile passen, und aus «hospitality» wurde «hos-pitality», aus
   «marketing» «mar-keting». */
@media (max-width: 35rem) {
  h1, h2, h3, h4 { hyphens: auto; }
}
h1 { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.028em; }
h2 { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.024em; }
h3 { font-size: var(--step-1); line-height: 1.22; }
h4 { font-size: var(--step-0); line-height: 1.3; font-weight: 500; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--tc-gold-tief); }

strong { font-weight: 700; }
small { font-size: var(--step--1); color: var(--fg-muted); }

::selection { background: var(--tc-hellgold); color: var(--tc-graphit); }

:focus-visible {
  outline: 2px solid var(--tc-gold-tief);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Eyebrow — Label mit feiner Goldlinie (Signature-Element) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: var(--tc-gold);
}
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 58ch;
  font-weight: 400;
}

.muted { color: var(--fg-muted); }
.gold { color: var(--accent); }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - var(--gutter) * 2, 1240px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 820px); }
.wrap--mid { width: min(100% - var(--gutter) * 2, 1020px); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--tc-warmweiss); }
.section--dark .lead { color: #cdc9bf; }
.section--dark .eyebrow { color: var(--accent-bright); }
.section--dark a { color: var(--accent-bright); }
.section--dark .muted { color: #a8a49a; }

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Beitragskacheln gleich gross. Zwischen Raster und Kachel sitzt ein
   Filter-Container; der streckt sich auf die Reihenhoehe, die Kachel darin
   blieb aber auf ihrer Inhaltshoehe stehen — ein zweizeiliger Titel machte
   sie 45 Pixel hoeher als die Nachbarn. Als Raster reicht der Container die
   Hoehe an die Kachel weiter, grid-auto-rows gleicht zusaetzlich die Reihen
   untereinander an. Gilt nur fuer die Blogliste, nicht fuer jedes .grid. */
.grid > [data-post] { display: grid; }
.grid:has(> [data-post]) { grid-auto-rows: 1fr; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-first > :first-child { order: -1; }
}

.stack > * + * { margin-top: 1rem; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.rule--gold { height: 1px; width: 3.5rem; background: var(--tc-gold); border: 0; margin: 0 0 1.5rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--tc-gold);
  color: var(--tc-graphit);
}
.btn--primary:hover { background: var(--tc-gold-tief); color: var(--tc-graphit); }

.btn--secondary {
  background: transparent;
  border-color: var(--tc-graphit);
  color: var(--tc-graphit);
}
.btn--secondary:hover { background: var(--tc-graphit); color: var(--tc-warmweiss); }

.section--dark .btn--secondary {
  border-color: rgba(244, 242, 237, 0.4);
  color: var(--tc-warmweiss);
}
.section--dark .btn--secondary:hover {
  background: var(--tc-warmweiss);
  color: var(--tc-graphit);
  border-color: var(--tc-warmweiss);
}

.btn--ghost {
  padding-inline: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
}
.btn--ghost::after { content: '→'; transition: transform 0.2s var(--ease); }
.btn--ghost:hover::after { transform: translateX(3px); }
.section--dark .btn--ghost { color: var(--accent-bright); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  margin-top: 2rem;
}
.btn-row--center { justify-content: center; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.phone-link:hover { color: var(--accent); }
.section--dark .phone-link:hover { color: var(--accent-bright); }

/* --- Kopfzeile ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--tc-graphit);
  color: var(--tc-warmweiss);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--tc-warmweiss); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 242, 237, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.site-logo { display: flex; align-items: center; flex: none; }
.site-logo img { width: 152px; height: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding-block: 0.4rem;
  position: relative;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--tc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-switch { display: flex; align-items: center; gap: 0.15rem; font-size: 0.8125rem; font-weight: 500; }
.lang-switch a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.lang-switch a:hover { color: var(--fg); }
.lang-switch a[aria-current='true'] { color: var(--tc-graphit); background: var(--tc-nebel); }
/* Drei Sprachkuerzel nebeneinander waren nur 29px hoch — auf dem Telefon
   zu klein und zu dicht, um sicher zu treffen. Die Hoehe waechst deshalb
   auf 44px, das Mass von Apple und Google fuer Beruehrungsziele. Eine
   feste Breite bekommen sie nicht: drei mal 44px sprengten neben Logo und
   Menueknopf die Kopfzeile eines 320px breiten Telefons. */
@media (max-width: 48rem) {
  .lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    min-height: 2.75rem;
  }
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--tc-graphit);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--tc-graphit);
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.999rem) {
  .nav-toggle { display: inline-flex; }
  .site-logo img { width: 108px; }
  .site-header__inner { min-height: 4.25rem; gap: 0.75rem; }
  .header-actions { gap: 0.5rem; }
  .site-nav { inset-block-start: 4.25rem; max-height: calc(100dvh - 4.25rem); }
  .site-nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--tc-warmweiss);
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-120%);
    transition: transform 0.32s var(--ease);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding-block: 0.85rem; border-bottom: 1px solid var(--hairline); font-size: 1.125rem; }
  .site-nav a::after { display: none; }
  .header-actions .btn { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(84vh, 46rem);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  background: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(35, 35, 34, 0.62) 0%, rgba(35, 35, 34, 0.24) 42%, rgba(35, 35, 34, 0.88) 100%);
}
.hero__content { max-width: 40ch; }
.hero h1 { color: var(--tc-warmweiss); }
.hero .eyebrow { color: var(--accent-bright); }
.hero .lead { color: #dedad0; }
.hero--compact { min-height: min(58vh, 32rem); }

.hero-sub {
  background: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.75rem, 5vw, 4rem);
}
.hero-sub h1 { color: var(--tc-warmweiss); }
.hero-sub .eyebrow { color: var(--accent-bright); }
.hero-sub .lead { color: #cdc9bf; }

/* --- Trust-Leiste (wiederverwendbare Komponente) -------------------------- */
.trustbar { border-block: 1px solid var(--hairline); background: var(--tc-warmweiss); }
.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Der Abstand war so gross, dass die Reihe bei 1240px Inhaltsbreite
     gerade eben umbrach, sobald ein Logo groesser wurde. */
  gap: clamp(1rem, 3vw, 2.75rem);
  padding-block: 1.75rem;
}
.trustbar__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.trustbar__item {
  display: inline-flex;
  align-items: center;
  /* 0.62 war zu blass: Die beiden Badges tragen Kleinschrift ("Premier
     Partner", "2025 Partner"), die bei dieser Deckung nicht mehr lesbar
     war. Grau bleibt es — ruhig, aber lesbar. */
  filter: grayscale(1);
  opacity: 0.82;
  transition: filter 0.28s var(--ease), opacity 0.28s var(--ease);
}
.trustbar__item:hover,
.trustbar__item:focus-visible { filter: grayscale(0); opacity: 1; }
/* Die vier Logos haben sehr unterschiedliche Seitenverhaeltnisse — von
   fast quadratisch (Google) bis 5:1 (vdh) — und sehr unterschiedliche
   Schriftgroessen darin. Gleiche Hoehe hiesse ungleiches Gewicht: Der
   vdh-Schriftzug erschlug die beiden Badges. Normalisiert wird deshalb
   auf vergleichbare optische Flaeche, nicht auf gleiche Hoehe. */
.trustbar__item img { height: 2.8rem; width: auto; max-width: 9.5rem; object-fit: contain; }
.trustbar__item--google-premier-partner img { height: 3.5rem; }
.trustbar__item--microsoft-advertising-partner img { height: 3rem; }
.trustbar__item--hotelleriesuisse img { height: 2.8rem; }
.trustbar__item--vdh img { height: 1.75rem; }

.trustbar--dark { background: var(--tc-graphit-deep); border-color: rgba(244, 242, 237, 0.12); }
.trustbar--dark .trustbar__label { color: #8f8b82; }
.trustbar--dark .trustbar__item { filter: grayscale(1) brightness(2.4) contrast(0.55); opacity: 0.7; }
.trustbar--dark .trustbar__item:hover { filter: grayscale(0) brightness(1); opacity: 1; }

.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 500;
}
.rating__score { font-size: 1.35rem; font-weight: 700; }
.rating__stars { color: var(--tc-gold); letter-spacing: 0.08em; }
/* In der Logoleiste sind die goldenen Sterne der einzige Farbfleck
   zwischen vier grauen Bildmarken — sie ziehen das Auge auf sich und
   machen die Reihe unruhig. Dort tragen sie den Textton: Die Wertung
   steht ohnehin als Zahl und als Zeile daneben. */
.trustbar .rating,
.trustbar .rating__stars { color: var(--fg); }
.rating__meta { font-size: 0.8125rem; color: var(--fg-muted); font-weight: 400; }
.trustbar--dark .rating__meta { color: #8f8b82; }

/* --- Karten --------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}
.card p { max-width: none; }
a.card { text-decoration: none; color: inherit; }
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #cfc9b8;
}
.card__title { font-size: var(--step-1); font-weight: 700; margin: 0; }
.card__meta { font-size: var(--step--1); color: var(--fg-muted); letter-spacing: 0.04em; }
.card__more { margin-top: auto; padding-top: 0.75rem; color: var(--accent); font-weight: 500; }
.card__more::after { content: ' →'; }

.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: clamp(1.25rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tc-nebel); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
a.card--media:hover .card__img img { transform: scale(1.035); }

.icon-badge {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tc-nebel);
  color: var(--tc-gold-tief);
  flex: none;
}
.icon-badge svg { width: 1.25rem; height: 1.25rem; }

/* --- Kennzahlen ----------------------------------------------------------- */
.stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stat__value {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tc-warmweiss);
}
.stat__label { margin-top: 0.6rem; font-size: var(--step--1); color: #a8a49a; line-height: 1.45; max-width: 22ch; }
.section:not(.section--dark) .stat__value { color: var(--tc-graphit); }
.section:not(.section--dark) .stat__label { color: var(--fg-muted); }

/* --- Preis-/Paketkarten --------------------------------------------------- */
/* Alle Paketkarten gleich hoch. align-items: start liess sie auf ihrer
   Inhaltshoehe stehen — bei sechs Paketen ergab das 639 bis 785 Pixel und
   eine unruhige Reihe. Ohne die Angabe greift stretch, und grid-auto-rows
   gleicht zusaetzlich die Zeilen untereinander an, sodass auch beim
   Umbruch auf zwei Reihen jede Karte dieselbe Hoehe hat. Der Knopf sitzt
   dank margin-top: auto weiterhin unten buendig. */
.plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  grid-auto-rows: 1fr;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  position: relative;
}
/* Auf der Startseite ist die ganze Paketkarte ein Link. Ohne diese Regel
   greift die globale Linkunterstreichung und legt sich ueber jede Zeile
   der Karte — Paketname, Preis, Credits und Beschreibung. Dieselbe
   Behandlung wie bei a.card. */
a.plan { text-decoration: none; color: inherit; }
a.plan:hover,
a.plan:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #cfc9b8;
}
a.plan { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
a.plan.plan--recommended:hover,
a.plan.plan--recommended:focus-visible { border-color: var(--tc-gold); }

.plan--recommended { border-color: var(--tc-gold); box-shadow: var(--shadow-soft); }
.plan__flag {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  padding: 0.3rem 0.7rem;
  background: var(--tc-gold);
  color: var(--tc-graphit);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
}
.plan__name { font-size: var(--step-1); font-weight: 700; margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan__amount { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; }
.plan__per { font-size: var(--step--1); color: var(--fg-muted); }
.plan__credits {
  padding: 0.75rem 0;
  border-block: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--fg-soft);
}
.plan__credits b { font-size: 1.05rem; color: var(--fg); }
.plan__for { font-size: var(--step--1); color: var(--fg-soft); line-height: 1.55; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); }
.plan__list li { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--fg-soft); }
.plan__list li::before { content: '—'; color: var(--tc-gold); flex: none; }
.plan .btn { margin-top: auto; }

/* --- Massnahmen-Matrix ---------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-card); }
.table-scroll:focus-visible { outline: 2px solid var(--tc-gold); outline-offset: 2px; }
table.matrix { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 46rem; }
table.matrix th,
table.matrix td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--hairline); }
table.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--tc-nebel);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-soft);
  white-space: nowrap;
}
table.matrix tbody tr:hover { background: #faf9f6; }
table.matrix td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.matrix td.mark { text-align: center; }
.mark-yes { color: var(--tc-gold-tief); font-weight: 700; }
.mark-no { color: #c4c0b6; }
/* Massnahmennummer. Zurückhaltend gesetzt: Sie ist eine Fundstelle für
   Angebot und Reporting, kein Verkaufsargument — sie soll auffindbar
   sein, ohne den Titel zu überstimmen. */
.measure-no {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  vertical-align: 0.15em;
}
table.matrix td.num.muted { font-size: 0.8125rem; }

/* --- Accordion / FAQ ------------------------------------------------------ */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 500;
  list-style: none;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.45rem;
  border-right: 1.5px solid var(--tc-gold-tief);
  border-bottom: 1.5px solid var(--tc-gold-tief);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--accent); }
.faq__answer { padding-bottom: 1.5rem; color: var(--fg-soft); }

/* --- Blog ----------------------------------------------------------------- */
.filters {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .filters { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; }
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--tc-warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--tc-gold); background: var(--tc-weiss); outline: none; }
.field textarea { min-height: 8rem; resize: vertical; }

.filters__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
  margin-bottom: 1.5rem;
}
.filters__meta button {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
  align-items: center;
}
.post-meta .dot { color: var(--hairline); }
.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--tc-nebel);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-soft);
  letter-spacing: 0.02em;
}

/* Fliesstext etwas enger fuehren als den Rest der Seite. Der globale Wert
   1.62 aus body ist fuer kurze Abschnitte richtig, laesst einen langen
   Beitrag aber auseinanderfallen. Bei rund 64 Zeichen je Zeile traegt 1.5
   bequem — das Auge findet den Zeilenanfang weiterhin ohne Suchen.
   Gilt fuer Blogbeitraege und die Rechtsseiten, die dieselbe Klasse
   verwenden. */
.article { max-width: 44rem; line-height: 1.5; }
.article > * { max-width: none; }
/* Abstand vor den Zwischentiteln. 2.5em ergaben beim H2 79 Pixel — mehr
   als das Dreifache des Absatzabstands von 22 Pixeln, was den Beitrag in
   lose Bloecke zerfallen liess. Jetzt 54 und 33 Pixel: die Staffelung
   H2 > H3 > Absatz bleibt deutlich, ohne Loecher zu reissen. */
.article h2 { font-size: var(--step-2); margin-top: 1.7em; }
.article h3 { font-size: var(--step-1); margin-top: 1.4em; }
.article h2:first-child,
.article h3:first-child { margin-top: 0; }
.article p,
.article li { color: var(--fg-soft); }
.article ul,
.article ol { padding-left: 1.25rem; margin: 0 0 1.3em; display: grid; gap: 0.45rem; }
.article li::marker { color: var(--tc-gold); }
.article img { border-radius: var(--radius); margin: 2rem 0; }
.article blockquote {
  margin: 2rem 0;
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 2px solid var(--tc-gold);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--fg);
}
.article a { font-weight: 500; }

.toc {
  padding: 1.25rem 1.4rem;
  background: var(--tc-nebel);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}
.toc h2 {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: var(--step--1); }
.toc a { color: var(--fg-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.article-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 68rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
  .article-aside { position: sticky; top: 6.5rem; }
}
.aside-box {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.aside-box h2 { font-size: var(--step-0); font-weight: 700; }

/* --- Kundenstimmen --------------------------------------------------------
   Die Zitate sind zwischen 100 und 250 Zeichen lang. In einem Raster mit
   gleich hohen Karten entstehen dadurch grosse Leerräume. Sie fliessen
   deshalb in Spalten: jede Stimme ist so hoch, wie sie sein muss. */
.quotes {
  columns: 1;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48rem) { .quotes { columns: 2; } }
@media (min-width: 78rem) { .quotes { columns: 3; } }

/* Kein Kasten, kein Rahmen: nur die feine Goldlinie als Marker und viel
   Weissraum. Das ist die Vorgabe des CD — Wertigkeit entsteht durch
   Zurückhaltung, nicht durch Dekor. */
.quote {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  padding: 0 0 0 clamp(1.25rem, 2vw, 1.75rem);
  border-left: 1px solid var(--tc-gold);
}
.quote__text {
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  line-height: 1.58;
  color: var(--fg);
  margin: 0 0 1rem;
  max-width: none;
  quotes: '«' '»';
  text-wrap: pretty;
}
.quote__text::before { content: open-quote; color: var(--tc-gold-tief); }
.quote__text::after { content: close-quote; color: var(--tc-gold-tief); }
/* Name und Herkunft stehen untereinander. Vorher lagen sie als
   umbrechende Flex-Zeile nebeneinander — sobald der Name eine eigene
   Zeile brauchte, begann die naechste mit einem haengenden Trennpunkt.
   Der Punkt zwischen Rolle und Quelle steht weiterhin im Text selbst. */
.quote__author {
  font-size: var(--step--1);
  line-height: 1.45;
}
.quote__author strong { display: block; color: var(--fg); font-weight: 500; }
.quote__author span { color: var(--fg-muted); }

/* --- Team ----------------------------------------------------------------- */
.team {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.team__member { margin: 0; }
.team__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tc-nebel);
  margin-bottom: 0.85rem;
  filter: grayscale(0.15) contrast(1.02);
  transition: filter 0.35s var(--ease), transform 0.35s var(--ease);
}
.team__member:hover .team__photo { filter: none; transform: translateY(-2px); }
.team__initials {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--tc-nebel);
  color: var(--tc-gold-tief);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}
.team__name { font-weight: 500; margin: 0 0 0.15rem; }
.team__role { font-size: var(--step--1); color: var(--fg-muted); margin: 0; line-height: 1.4; }

/* --- Logowand der Kundschaft ---------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.chip {
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-soft);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.chip:hover { border-color: var(--tc-gold); color: var(--fg); }
.chip.is-active {
  background: var(--tc-graphit-deep);
  border-color: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
}

/* Ausgewaehlte Logos, gross und mit Luft. Die frueheren Rasterlinien
   ergaben bei ueber hundert Kacheln ein Gitter voller Kaestchen; bei rund
   dreissig Logos traegt der Weissraum die Ordnung besser. */
.client-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(44%, 12.5rem), 1fr));
  align-items: center;
}
.client {
  display: grid;
  place-items: center;
  min-height: 5rem;
}
@media (max-width: 30rem) {
  .client { min-height: 4rem; }
}
/* Ruhige, einheitliche Wand: alle Logos als Graphit-Silhouette, das
   Original erscheint beim Hover. Rund 40 Prozent der Logos sind weiss und
   wären auf hellem Grund sonst unsichtbar — die Silhouette löst das für
   alle gleich, statt Sonderfälle zu behandeln.

   Silhouette und Original liegen im selben Rasterfeld übereinander. Der
   Container muss deshalb ein Raster sein — bei verlinkten Kacheln ist das
   das <a>, bei den übrigen das <li> selbst. */
.client,
.client a {
  display: grid;
  place-items: center;
  width: 100%;
}
.client a { height: 100%; }

.client img {
  grid-area: 1 / 1;
  /* Optischer Ausgleich: Eine breite Wortmarke, die die volle Zellenbreite
     fuellt, wirkt deutlich groesser als eine quadratische Marke gleicher
     Hoehe. Die Breite wird deshalb begrenzt, die Hoehe darf dafuer etwas
     mehr — so wiegen beide Formen ungefaehr gleich schwer. */
  max-width: 84%;
  max-height: 4.75rem;
  width: auto;
  object-fit: contain;
  transition: opacity 0.28s var(--ease), filter 0.28s var(--ease);
}

/* Paar aus Silhouette und Original. Die Zustände werden nur über die
   Deckkraft gesteuert; beide Regeln haben dieselbe Spezifität wie die
   Ausnahme darunter, deshalb entscheidet allein die Reihenfolge. */
.client__mono { opacity: 0.62; }
.client__colour { opacity: 0; }
.client:hover .client__mono,
.client:focus-within .client__mono { opacity: 0; }
.client:hover .client__colour,
.client:focus-within .client__colour { opacity: 1; }

/* Einzelbild ohne Silhouette (SVG oder nicht freistellbar): grau, beim
   Hover farbig. :not() schliesst das Paar oben ausdrücklich aus — sonst
   überschreibt diese Regel dessen Deckkraft und beide Bilder erscheinen
   gleichzeitig. */
.client img:not(.client__mono):not(.client__colour) {
  filter: grayscale(1);
  opacity: 0.55;
}
.client:hover img:not(.client__mono):not(.client__colour),
.client:focus-within img:not(.client__mono):not(.client__colour) {
  filter: none;
  opacity: 1;
}

.client[hidden] { display: none; }

/* Vollstaendige Kundenliste. Traegt die Vollstaendigkeit, die die Logowand
   bewusst aufgibt — und ist als Text durchsuchbar und maschinenlesbar. */
.client-groups {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: 2rem;
}
.client-group[hidden] { display: none; }
.client-group__title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.client-group__count {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tc-gold);
}
.client-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  font-size: var(--step--1);
}
.client-names li { color: var(--fg-soft); }
.client-names a {
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.client-names a:hover,
.client-names a:focus-visible { color: var(--fg); border-bottom-color: var(--tc-gold); }

/* --- Fusszeile ------------------------------------------------------------ */
.site-footer { background: var(--tc-graphit-deep); color: #b6b2a8; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.site-footer h2, .site-footer h3 { color: var(--tc-warmweiss); }
.site-footer a { color: #d6d2c8; text-decoration: none; }
.site-footer a:hover { color: var(--accent-bright); }
.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: 3rem;
}
.footer-col h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8b82;
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.footer-claim { font-size: var(--step-2); font-weight: 700; color: var(--tc-warmweiss); letter-spacing: -0.02em; max-width: 14ch; line-height: 1.15; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(244, 242, 237, 0.12);
  font-size: 0.8125rem;
  color: #8f8b82;
}
/* Die Rechtslinks brauchen einen Umbruch: auf Deutsch sind die vier
   Beschriftungen zusammen breiter als ein Telefon. Ohne wrap schob die
   Zeile die ganze Seite auf 509px und erzeugte waagrechtes Scrollen. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-logo img { width: 168px; margin-bottom: 1.5rem; }

.newsletter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.newsletter-form input {
  flex: 1 1 12rem;
  padding: 0.75rem 0.9rem;
  background: rgba(244, 242, 237, 0.06);
  border: 1px solid rgba(244, 242, 237, 0.2);
  border-radius: var(--radius-sm);
  color: var(--tc-warmweiss);
}
.newsletter-form input::placeholder { color: #8f8b82; }
.newsletter-form input:focus { border-color: var(--tc-gold); outline: none; }

/* --- CTA-Band ------------------------------------------------------------- */
.cta-band { background: var(--tc-graphit-deep); color: var(--tc-warmweiss); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cta-band h2 { color: var(--tc-warmweiss); max-width: 20ch; }
.cta-band .lead { color: #cdc9bf; }
.cta-band .eyebrow { color: var(--accent-bright); }

/* --- Glossar -------------------------------------------------------------- */
.glossary-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.glossary-group > h2 {
  font-size: var(--step-1);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.75rem;
}
.term { padding-block: 1.25rem; }
.term + .term { border-top: 1px solid var(--hairline); }
.term h3 { margin-bottom: 0.5rem; scroll-margin-top: 6.5rem; }
.term__definition { color: var(--fg); }
.term__context { font-size: var(--step--1); color: var(--fg-muted); }
.term__related { margin-top: 0.6rem; font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline; }

/* --- Chat ----------------------------------------------------------------- */
.chat-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  background: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
  border: 0;
  border-radius: 100px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.chat-launcher:hover { transform: translateY(-2px); background: #2f2f2d; }
/* Auf dem Telefon deckt der breite Knopf sonst dauerhaft Inhalt zu —
   auf der Massnahmen-Tabelle war es eine ganze Zeile. Dort bleibt nur
   das Symbol; der Name steht weiterhin im aria-label. */
@media (max-width: 34rem) {
  .chat-launcher { padding: 0; width: 3.25rem; height: 3.25rem; justify-content: center; }
  .chat-launcher__label { position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.chat-launcher svg { width: 1.1rem; height: 1.1rem; color: var(--tc-gold); }

.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100dvh - 2rem));
  display: flex;
  flex-direction: column;
  background: var(--tc-weiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--tc-graphit-deep);
  color: var(--tc-warmweiss);
}
.chat-panel__head strong { font-weight: 500; }
.chat-panel__close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem; }
.chat-log { flex: 1; overflow-y: auto; padding: 1.15rem; display: grid; gap: 0.9rem; align-content: start; }
.chat-msg { padding: 0.75rem 0.95rem; border-radius: var(--radius-sm); font-size: 0.9375rem; line-height: 1.55; max-width: 92%; }
.chat-msg--user { background: var(--tc-graphit-deep); color: var(--tc-warmweiss); margin-left: auto; }
.chat-msg--bot { background: var(--tc-nebel); color: var(--fg); }
.chat-msg--note { background: none; color: var(--fg-muted); font-size: 0.8125rem; padding: 0; max-width: none; }
.chat-msg p { margin: 0 0 0.6em; max-width: none; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-sources { margin-top: 0.5rem; font-size: 0.8125rem; display: grid; gap: 0.25rem; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.15rem 0.75rem; }
.chat-suggestions button {
  padding: 0.4rem 0.7rem;
  background: var(--tc-warmweiss);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--fg-soft);
}
.chat-suggestions button:hover { border-color: var(--tc-gold); color: var(--fg); }
.chat-form { display: flex; gap: 0.5rem; padding: 0.85rem 1.15rem 1.15rem; border-top: 1px solid var(--hairline); }
.chat-form input { flex: 1; padding: 0.7rem 0.85rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--tc-warmweiss); }
.chat-form input:focus { border-color: var(--tc-gold); outline: none; }
.chat-form button { padding: 0.7rem 1.1rem; background: var(--tc-gold); color: var(--tc-graphit); border: 0; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; }
.chat-form button:disabled { opacity: 0.5; cursor: default; }
.chat-notice { padding: 0 1.15rem 0.85rem; font-size: 0.75rem; color: var(--fg-muted); line-height: 1.45; }

/* --- Consent -------------------------------------------------------------- */
.consent {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background: var(--tc-weiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.consent[hidden] { display: none; }
.consent h2 { font-size: var(--step-1); }
.consent p { font-size: 0.9375rem; color: var(--fg-soft); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.consent__actions .btn { padding: 0.7rem 1.15rem; font-size: 0.9375rem; }
.consent__cats { display: grid; gap: 0.6rem; margin-top: 1rem; font-size: 0.9375rem; }
.consent__cats label { display: flex; gap: 0.6rem; align-items: center; color: var(--fg-soft); }
.consent__link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.9375rem; }

/* --- Consent-Platzhalter für externe Einbettungen ------------------------- */
.embed-placeholder {
  display: grid;
  gap: 1rem;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  background: var(--tc-nebel);
  border: 1px dashed #cfc9b8;
  border-radius: var(--radius);
}
.embed-placeholder p { max-width: 42ch; color: var(--fg-soft); font-size: 0.9375rem; }
.embed-frame { width: 100%; min-height: 42rem; border: 0; border-radius: var(--radius); }

/* --- Hilfsklassen --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* Sanftes Einblenden beim Scrollen — respektiert reduced motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .chat-launcher, .chat-panel, .consent, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* Logos, die sich nicht freistellen liessen und zu hell für den
   Warmweiss-Grund sind, sitzen auf Graphit. Ein Dutzend Ausnahmen in einer
   Wand von 111 — sichtbar zu sein wiegt schwerer als völlige Gleichheit. */


/* Hinweis über einem Beitrag, der in dieser Sprache noch nicht vorliegt. */
.notice {
  margin: 0 0 2rem;
  padding: 0.85rem 1.1rem;
  background: var(--tc-nebel);
  border-left: 2px solid var(--tc-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9375rem;
  color: var(--fg-soft);
  max-width: none;
}

/* --- Werte (Über uns) ----------------------------------------------------- */
/* Zwei Spalten statt vier: Die Sätze sind ganze Gedanken, keine Stichworte —
   in einer Viererreihe stünden sie als schmale Türme nebeneinander. */
.values {
  display: grid;
  gap: 1.75rem 3rem;
  /* 26rem ergibt auf Desktopbreite genau zwei Spalten. Bei vier Werten
     stünde sonst einer allein in einer zweiten Reihe. */
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}
@media (max-width: 30rem) {
  .values { grid-template-columns: 1fr; }
}
.value { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.value__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
  color: var(--fg);
}
/* Wie oben: auf --bg-alt reicht --fg-muted nicht für 4.5:1. */
.value p { margin: 0; color: var(--fg-soft); }

/* --- Ansprechpartner (Erstgespräch) -------------------------------------- */
.ansprechpartner { display: flex; align-items: center; gap: 0.9rem; }
.ansprechpartner__foto {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Abo-Karte: zwei Bausteine nebeneinander ----------------------------- */
/* Preis und Credits gleich gross, durch eine Linie getrennt: Das Abo besteht
   aus einer Grundleistung im Monatspreis und einem Jahresguthaben. Genau das
   soll die Karte zeigen, bevor man einen Satz liest. */
.plan__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-block: 1px solid var(--hairline);
}
.plan__half { display: flex; flex-direction: column; gap: 0.1rem; }
.plan__half--credits {
  border-left: 1px solid var(--hairline);
  padding-left: 1rem;
}
.plan__half--credits .plan__amount { color: var(--accent); }
.plan__half .plan__per { line-height: 1.3; }

.plan__label {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.plan__reach {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--fg-soft);
}

/* Die beiden Abschnitte je Betriebsgrösse. */
.plan-group { margin-top: clamp(2.75rem, 5vw, 4rem); }
.plan-group .section-head { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }

/* Vier Karten je Gruppe: die drei Pakete und das Abo nach Mass. Mit
   auto-fit springt die vierte je nach Fensterbreite in eine eigene Reihe
   und steht dort allein — deshalb feste Spaltenzahlen. */
.plans--vier { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .plans--vier { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 40rem) { .plans--vier { grid-template-columns: 1fr; } }

/* Das Abo nach Mass trägt keinen Preis und kein Guthaben. Gestrichelter
   Rand auf hellem Grund: gleiche Reihe, aber sichtbar offenes Angebot. */
.plan--custom { border-style: dashed; background: transparent; }
.plan--custom .plan__split { grid-template-columns: 1fr; }
.plan--custom .plan__split .plan__amount {
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  white-space: normal;
}

/* Mit vier statt drei Karten reicht die Breite für «Kostenloses
   Erstgespräch» nicht mehr in einer Zeile. Weniger Seitenpolster im
   Knopf genügt — die Tippfläche bleibt über die Höhe erhalten. */
@media (min-width: 64rem) {
  .plans--vier .btn { padding-inline: 1rem; }
}

/* Die Karten tragen unterschiedlich lange Beschreibungen: «Für
   Hotelgruppen und Destinationen …» braucht vier Zeilen, «Für Betriebe
   im Ausbau …» drei. In einer Flex-Spalte verschiebt das alles
   darunter — Preis, Grundleistung und Knopf standen in der zweiten
   Gruppe auf verschiedenen Höhen. Mit subgrid teilen sich alle Karten
   dieselben sieben Zeilen, und jede Zeile ist so hoch wie ihr längster
   Inhalt. Ohne subgrid bleibt es beim bisherigen Verhalten. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .plans--vier { grid-auto-rows: auto; row-gap: 1rem; }
    .plans--vier .plan {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 7;
    }
  }
}

/* Knopf und Fussnote als ein Feld — siehe plan__fuss in build.py. */
.plan__fuss { margin-top: auto; display: grid; gap: 0.6rem; align-content: start; }
.plan__fuss .btn { margin-top: 0; }
/* In der subgrid-Reihe oben im Feld ausrichten statt unten: Sonst sitzt
   der Knopf der Karte mit Fussnote hoeher als die beiden ohne. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .plans--zeilen6 .plan__fuss { margin-top: 0; align-self: start; }
  }
}
.plan__fussnote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Der Vorbehalt schliesst jede Gruppe ab, nicht erst die Seite. */
.plan-group__excl { margin-top: 1.25rem; margin-bottom: 0; font-size: 0.9375rem; }

/* Im halben Feld ist die grosse Preisziffer zu breit: «CHF 1'080» brach um
   und schob die Karte auseinander. Etwas kleiner, und nie umbrechen. */
.plan__split .plan__amount {
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  white-space: nowrap;
}

/* --- Vertrauensleiste als Text (Startseite) ------------------------------ */
/* Wortlaut statt Logos: In einer Zeile steht, worum es geht, und die
   goldenen Sterne sind nicht mehr der einzige Farbfleck zwischen grauen
   Bildmarken. Feine senkrechte Striche trennen die Zellen, eine Goldlinie
   schliesst nach oben ab — dasselbe Signature-Element wie sonst. */
.trustbar-text {
  border-top: 1px solid var(--tc-gold);
  padding-block: 1.25rem;
}
.tb__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 0;
}
.tb__zelle {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-inline: 1.5rem;
  border-left: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.tb__zelle:first-child { padding-left: 0; border-left: 0; }
.tb__stark {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}
.tb__note { font-size: 0.8125rem; color: var(--fg-muted); }
.tb__sterne { color: var(--tc-gold); letter-spacing: 0.08em; font-size: 0.9375rem; }
.tb__zelle:hover .tb__stark { color: var(--accent); }

/* Auf dunklem Grund — die Leiste sitzt unter dem Bild im Seitenkopf. */
.trustbar-text--dark .tb__stark { color: var(--tc-warmweiss); }
.trustbar-text--dark .tb__note { color: #a8a49a; }
.trustbar-text--dark .tb__zelle { border-color: rgba(244, 242, 237, 0.22); }

@media (max-width: 40rem) {
  .tb__reihe { grid-template-columns: 1fr 1fr; gap: 1.1rem 0; }
  .tb__zelle { padding-inline: 1rem; }
  .tb__zelle:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Auf der Startseite schliesst die Leiste an den dunklen Seitenkopf an und
   liest sich als dessen Fuss — wie auf der bisherigen Website. */
.trustbar-text--dark {
  background: var(--tc-graphit-deep);
  border-top-color: var(--tc-gold);
  padding-block: 1.5rem 1.75rem;
}

/* --- Auf dem Telefon kürzen ---------------------------------------------- */
/* Elf Leistungskacheln untereinander sind auf dem Telefon eine lange Strecke
   bis zum nächsten Abschnitt. Sichtbar bleiben drei; der Knopf «Alle
   Leistungen» steht ohnehin direkt darunter und führt zur vollen Liste. */
@media (max-width: 48rem) {
  .grid--kurz > :nth-child(n + 4) { display: none; }
}

/* Auf der Leistungsseite steht die Kachel mit den Credits auf dem Telefon
   vor dem Fliesstext: Sie beantwortet die erste Frage — was kostet das an
   Guthaben — bevor man scrollt. Ab zwei Spalten sitzt sie ohnehin daneben. */
@media (max-width: 68rem) {
  .article-layout--leistung { display: flex; flex-direction: column; }
  .article-layout--leistung > .article-aside { order: -1; }
}

/* --- Massnahmen- und Abo-Rechner ----------------------------------------- */
.rechner { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 62rem) {
  .rechner { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .rechner__ergebnis { position: sticky; top: 6.5rem; }
}
/* Auf dem Telefon steht das Ergebnis oben — aber nicht klebrig. Der Kasten
   ist dort rund 560px hoch; am oberen Rand festgehalten verdeckte er genau
   die Liste, die man antippen will. Sichtbar bleibt die Summe stattdessen
   über eine schmale Leiste am unteren Rand, die erst erscheint, wenn etwas
   gewählt ist. */
@media (max-width: 62rem) {
  .rechner { display: flex; flex-direction: column; }
  .rechner__ergebnis { order: -1; }
}

.rechner__leiste { display: none; }
@media (max-width: 62rem) {
  .rechner__leiste[data-sichtbar] {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--tc-graphit-deep);
    color: var(--tc-warmweiss);
    box-shadow: 0 -2px 18px rgba(35, 35, 34, 0.22);
  }
  /* Platz am Seitenende, damit die Leiste den letzten Eintrag nicht deckt. */
  .rechner-seite { padding-bottom: 5rem; }
}
.rechner__leiste-zahl {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--tc-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rechner__leiste-wort { font-size: 0.75rem; color: #cdc9bf; }
.rechner__leiste-paket { margin-left: auto; font-size: 0.875rem; text-align: right; }
.rechner__leiste-paket b { display: block; }

/* Der Chat-Knopf sitzt unten rechts und lag sonst über dem Paketnamen.
   Solange die Leiste steht, rückt er darüber. */
@media (max-width: 62rem) {
  body.hat-rechnerleiste .chat-launcher { bottom: calc(68px + clamp(1rem, 3vw, 2rem)); }
}

.rechner__gruppe {
  border-bottom: 1px solid var(--hairline);
}
.rechner__gruppe > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.rechner__gruppe > summary::-webkit-details-marker { display: none; }
.rechner__gruppe > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--accent);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
}
.rechner__gruppe[open] > summary::after { content: '–'; }
.rechner__zahl {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fg-muted);
}

.rechner__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.15rem; }
.rechner__zeile label {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 0.65rem;
  /* min-height 44px: Die Zeile ist die Tippfläche, nicht das 13px kleine
     Kästchen darin. Einzeilige Einträge kamen sonst auf 40px. */
  min-height: 44px;
  align-content: center;
  padding: 0.55rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
}
.rechner__zeile label:hover { background: var(--bg-alt); }
.rechner__zeile input { margin: 0; accent-color: var(--tc-gold-tief); }
.rechner__nr { font-size: 0.6875rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.rechner__cr {
  font-size: 0.8125rem;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rechner__summe { display: flex; align-items: baseline; gap: 0.5rem; }
.rechner__summe-zahl {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rechner__summe-wort { font-size: var(--step--1); color: var(--fg-muted); }
.rechner__gewaehlt { font-size: 0.8125rem; margin: 0.35rem 0 0; }
.rechner__paket { margin: 0; font-size: 1.0625rem; }
.rechner__ueber,
.rechner__offerte { font-size: 0.875rem; margin: 1rem 0 0; }
.rechner__ergebnis .btn { width: 100%; margin-top: 0.5rem; }

/* --- Vergleich: Festanstellung, Agentur, Digital-Abo --------------------- */
/* Drei gleich aussehende Karten sind kein Vergleich. Die eigene Spalte steht
   erhoben und hell, die beiden Alternativen bleiben flach im Hintergrund;
   die Punkte tragen unterschiedliche Zeichen. Die Aussage ist damit sichtbar,
   bevor man den ersten Satz liest. */
.vergleich {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}
.vgl {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
}
.vgl__titel { font-size: 1.125rem; margin: 0 0 0.25rem; }
.vgl__unter {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* --fg-muted käme auf dem Grauton nur auf 4.32:1. */
  color: var(--fg-soft);
  margin: 0 0 1.25rem;
}
.vgl__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vgl__liste li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.vgl__liste li::before { font-weight: 700; line-height: 1.45; }

/* Die Alternativen: flach, zurückgenommen, neutraler Strich. */
.vgl--fremd { background: transparent; color: var(--fg-soft); }
.vgl--fremd .vgl__liste li::before { content: '–'; color: var(--fg-muted); font-weight: 400; }

/* Das eigene Angebot: erhoben, Goldkante, Haken. */
.vgl--eigen {
  background: var(--bg-card);
  border-color: var(--tc-gold);
  box-shadow: var(--shadow-lift);
}
.vgl--eigen .vgl__titel { color: var(--fg); }
/* Gold käme auf Weiss nur auf 3.03:1. Die eigene Karte ist ohnehin die
   hervorgehobene — hier trägt die Schriftfarbe die Betonung. */
.vgl--eigen .vgl__unter { color: var(--fg); font-weight: 600; }
.vgl--eigen .vgl__liste li::before { content: '✓'; color: var(--accent); }

/* Auf dem Telefon steht das eigene Angebot zuoberst — dort beginnt man zu
   lesen, und die Alternativen sind der Vergleich dazu, nicht umgekehrt. */
@media (max-width: 52rem) {
  .vergleich { grid-template-columns: 1fr; }
  .vgl--eigen { order: -1; }
}

/* --- KPI-Legende ---------------------------------------------------------- */
/* Eine Nachschlageseite. Der Begriff steht gross und allein, die Erklärung
   darunter als Definitionsliste — so findet das Auge den Begriff, ohne den
   Text zu lesen. */
.kpi__sprung { margin-top: 2rem; }
.kpi__sprung ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.kpi__sprung a {
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--tc-gold);
  padding-bottom: 1px;
}

.kpi { border-top: 1px solid var(--hairline); padding: 1.5rem 0; }
.kpi:first-of-type { border-top: 0; padding-top: 0; }
.kpi__term {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
  font-variant-ligatures: none;
}
.kpi__liste { margin: 0; display: grid; gap: 0.35rem 1.25rem; }
@media (min-width: 46rem) {
  .kpi__liste { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}
.kpi__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.kpi__wert { margin: 0 0 0.4rem; color: var(--fg-soft); }
.kpi__wert:last-child { margin-bottom: 0; }
.kpi__formel {
  font-variant-numeric: tabular-nums;
  background: var(--bg-alt);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Die drei Funnel-Stufen nebeneinander, mit dem Goldfaden als Verbindung. */
.funnel {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: 2.5rem;
}
.funnel__stufe {
  border-top: 2px solid var(--tc-gold);
  padding-top: 0.9rem;
}
.funnel__stufe h3 {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--accent);
}
.funnel__stufe p { font-size: 0.9375rem; color: var(--fg-soft); margin: 0; }

/* --- Formulare, Übergabe ans Mailprogramm --------------------------------- */
/* Zwischenlösung, solange keine Gegenstelle für POST besteht. Der Kasten
   erscheint erst nach dem Absenden und trägt denselben Text, den das
   Mailprogramm bekommt — damit nichts verloren geht, wenn keines
   eingerichtet ist. */
.mailform__hinweis {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--tc-gold);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 0.75rem;
}
.mailform__hinweis p { margin: 0; font-size: var(--step--1); color: var(--fg-soft); }
.mailform__hinweis textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--fg);
  resize: vertical;
}
.mailform__hinweis .btn { justify-self: start; }
/* Nach erfolgreicher Zustellung: gruene Kante statt goldener. */
.mailform__hinweis--ok { border-left-color: #2f6b45; }

/* --- Kampagnen-Landingpages ---------------------------------------------- */
/* Zwei Seiten ausserhalb der Navigation, Verkehr kommt aus Anzeigen. Sie
   nutzen die vorhandenen Bausteine; hier steht nur, was ihnen fehlt. */
.lp__note { margin: 1rem 0 0; font-size: var(--step--1); color: #cdc9bf; }
.lp__delta {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--tc-gold);
  border-radius: 0 4px 4px 0;
  font-weight: 600;
  max-width: 70ch;
}

/* Der Vergleich hat hier zwei Spalten statt drei. */
.vergleich--zwei { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .vergleich--zwei { grid-template-columns: 1fr 1fr; } }
.vgl__label {
  margin: 0 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.vergleich--zwei .plan__split { grid-template-columns: 1fr; margin-block: 0.25rem 0.9rem; }

/* Kostenaufstellung: zwei Zahlenspalten, die Summe abgesetzt. */
.lp-tab td.num, .lp-tab th[scope="col"]:not(:first-child) { text-align: right; }
.lp-tab__summe th, .lp-tab__summe td {
  border-top: 2px solid var(--tc-gold);
  font-weight: 700;
}

.lp-fall__tags {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Die drei Rechnungsbloecke der Fallzahlen nebeneinander. */
.lp-fall { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .lp-fall { grid-template-columns: repeat(3, 1fr); } }
.lp-fall .rbsp { margin: 0; }

/* Die Kennzahlenreihe gibt es bisher nur auf dunklem Grund. */
.stats--hell .stat__value { color: var(--fg); }
.stats--hell .stat__label { color: var(--fg-soft); }

/* --- KI-Abo -------------------------------------------------------------- */
/* Grundleistung zuerst, Guthaben-Stufen darunter: Das Abo hat zwei Teile,
   und die Karten allein zeigten nur den zweiten. Nebeneinander blieb für
   drei Stufen zu wenig Breite — sie brachen auf 2+1 um. */
.ki-abo { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.ki-abo__basis {
  max-width: 46rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.ki-abo .plan__label { margin-top: 0; margin-bottom: 0.9rem; }
.plans--drei { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .plans--drei { grid-template-columns: repeat(3, 1fr); } }
/* Wie bei den Digital-Abo-Karten: gleiche Zeilen für alle Karten einer
   Reihe, damit Preis und Knopf nicht je nach Textlänge wandern. subgrid
   muss die Spannweite kennen, deshalb steht die Zeilenzahl in der
   Klasse — die KI-Stufen haben vier Zeilen, die Kampagnenpakete sechs. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .plans--zeilen4,
    .plans--zeilen6 { grid-auto-rows: auto; row-gap: 1rem; }
    .plans--zeilen4 .plan,
    .plans--zeilen6 .plan { display: grid; grid-template-rows: subgrid; }
    .plans--zeilen4 .plan { grid-row: span 4; }
    .plans--zeilen6 .plan { grid-row: span 6; }
  }
}
/* Die Stufen tragen keinen Frankenbetrag, nur das Guthaben — deshalb
   steht die Zahl allein statt in zwei Hälften. */
.plans--drei .plan__split { grid-template-columns: 1fr; }
.plans--drei .plan__half--credits { border-left: 0; padding-left: 0; }

/* --- Rechner auf der Startseite ------------------------------------------ */
/* Der Rechner war nur von zwei Unterseiten aus erreichbar, beide Male als
   Nebenknopf. Als eigener Abschnitt mit gerechnetem Beispiel: Man sieht,
   was er tut, bevor man ihn öffnet. */
.section--rechner { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rechner-band {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
@media (min-width: 56rem) {
  .rechner-band { grid-template-columns: 1.15fr 1fr; }
}
/* Auf der KI-Seite steht dasselbe Band ohne Beispielkarte — dann soll der
   Text nicht in der halben Breite kleben. */
.rechner-band > :only-child { grid-column: 1 / -1; max-width: 62ch; }
.rechner-band h2 { margin-top: 0.35rem; }
.rechner-band .lead { margin-bottom: 0; }

/* Das Beispiel: drei Massnahmen, ihre Summe, das Paket das sie trägt. */
.rbsp {
  margin: 0;
  padding: 1.25rem 1.5rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.rbsp__kopf {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.75rem;
}
.rbsp__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rbsp__liste li,
.rbsp__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: var(--step--1);
}
.rbsp__liste li { border-top: 1px solid var(--hairline); color: var(--fg-soft); }
.rbsp__liste li:first-child { border-top: 0; }
.rbsp__liste b { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; white-space: nowrap; }
.rbsp__summe {
  margin: 0;
  border-top: 2px solid var(--tc-gold);
  font-weight: 600;
  color: var(--fg);
}
.rbsp__summe b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rbsp__treffer {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  /* Nicht in Gold: 15px fett braucht 4.5:1, das Gold liefert 3.03:1. */
  color: var(--fg);
}

/* --- Massnahmen-Katalog, nach Einstiegspaket gruppiert -------------------- */
/* Vorher eine Tabelle mit 58 Zeilen und sechs Paketspalten: 4264px hoch,
   fünf Bildschirme, 40 Prozent der Seite — auf dem Telefon dazu 1113px
   breit. Weil die Paketspalten streng verschachtelt sind, steckt jede
   Zeile in einer Angabe: dem kleinsten Paket, das die Massnahme trägt.
   Zugeklappt sind das sechs Zeilen statt 58. */
.mm__gruppe { border-bottom: 1px solid var(--hairline); }
.mm__gruppe > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.mm__gruppe > summary::-webkit-details-marker { display: none; }
.mm__gruppe > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--accent);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
}
.mm__gruppe[open] > summary::after { content: '–'; }
.mm__zahl { font-size: 0.8125rem; font-weight: 400; color: var(--fg-muted); }

.mm__hinweis {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  color: var(--fg-soft);
  max-width: none;
}
.mm__liste { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.1rem; }
/* Auf dem Desktop ist die Breite da: 26 Einträge in zwei Spalten sind
   13 Zeilen statt 26. Ab 80rem drei. */
@media (min-width: 60rem) { .mm__liste { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 80rem) { .mm__liste { grid-template-columns: repeat(3, 1fr); } }
.mm__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name cr' 'nr cr';
  gap: 0 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid var(--hairline);
  min-height: 44px;
  align-content: center;
}
.mm__zeile a { grid-area: name; font-size: 0.9375rem; text-decoration: none; }
.mm__zeile a:hover { text-decoration: underline; }
.mm__nr {
  grid-area: nr;
  font-size: 0.6875rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.mm__cr {
  grid-area: cr;
  font-size: 0.8125rem;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}