/* ==========================================================================
   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;
  /* Deutsche Komposita sind laenger als ein Telefon breit ist:
     «Geschaeftsbedingungen» und «Tourismusbetriebe» schoben die Seite
     sonst ueber den Rand hinaus. hyphens setzt den Trennstrich an der
     richtigen Stelle, overflow-wrap ist die Rueckfallebene, falls der
     Browser fuer die Sprache kein Trennmuster kennt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
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); }
.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;
  gap: clamp(1.5rem, 5vw, 3.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;
  filter: grayscale(1);
  opacity: 0.62;
  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). Einheitliche Hoehe wuerde die
   optische Gewichtung verzerren, deshalb wird je Logo auf eine
   vergleichbare Flaeche normalisiert. */
.trustbar__item img { height: 2.2rem; width: auto; max-width: 9.5rem; object-fit: contain; }
.trustbar__item--google-premier-partner img { height: 2.9rem; }
.trustbar__item--vdh img { height: 1.9rem; }
.trustbar__item--hotelleriesuisse img { height: 2.1rem; }
.trustbar__item--microsoft-advertising-partner img { height: 2.2rem; }

.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; }
.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 --------------------------------------------------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.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;
}
.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; }
.badge-new {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--tc-gold);
  border-radius: 3px;
  color: var(--tc-gold-tief);
  vertical-align: 0.1em;
}

/* --- 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;
}

.article { max-width: 44rem; }
.article > * { max-width: none; }
.article h2 { font-size: var(--step-2); margin-top: 2.5em; }
.article h3 { font-size: var(--step-1); margin-top: 2em; }
.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);
}

.client-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  /* min(50%, ...) verfehlte auf dem Telefon zwei Spalten um genau den
     einen Pixel Rasterabstand — die Wand fiel auf eine Spalte zurueck und
     wurde mit 111 Kacheln elf Meter lang. 45% laesst den Abstand zu. */
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 10.5rem), 1fr));
}
.client {
  display: grid;
  place-items: center;
  padding: 1.35rem 1rem;
  background: var(--bg-card);
  min-height: 6.5rem;
}
@media (max-width: 30rem) {
  .client { padding: 1rem 0.75rem; min-height: 5.25rem; }
}
/* 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;
  max-width: 100%;
  max-height: 3.25rem;
  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; }

/* --- 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. */
.client--dark { background: var(--tc-graphit-deep); }
.client--dark img:not(.client__mono):not(.client__colour) { filter: none; opacity: 0.9; }
.client--dark:hover img:not(.client__mono):not(.client__colour),
.client--dark:focus-within img:not(.client__mono):not(.client__colour) { opacity: 1; }

/* 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;
}