/* ==========================================================================
   melicus.akademie — Potential-Analyse
   Gestaltung: Partitur als Leitbild. Probenbuchstaben als Gliederung,
   Notenlinien als Trennlinien, Rotstift als Markierung des Dirigenten.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* --- Flächen: Notenpapier und Sonne ------------------------------------
     Drei Helligkeitsstufen geben der Seite ihren Rhythmus.
     ---------------------------------------------------------------------- */
  --paper:    #FEFCF8;   /* Grundfläche, fast weiß */
  --warm:     #F6F0E3;   /* Wechselfläche, Sand */
  --tint:     #F7E4BC;   /* Betonungsfläche, Honig */
  --tint-2:   #EFD9A9;   /* Fußzeile, etwas tiefer */
  --soft:     #EDE3CE;

  /* Linien */
  --rule:     #E6DCC6;
  --rule-2:   #CDBF9F;

  /* --- Schrift: warmes Dunkelbraun --- */
  --ink:      #2E2318;   /* Überschriften */
  --ink-2:    #5A4B3B;   /* Fließtext */
  --ink-3:    #6F6152;   /* leise */

  /* --- Messing: Flügelhorn und Logo --- */
  --brass:    #B0791A;   /* Akzente, Notenköpfe, Linien */
  --brass-d:  #7C5510;   /* kleine Schrift auf hellem Grund */
  --brass-l:  #C68A1E;
  --brass-p:  #F5E9CC;

  /* Haupt-Button — wärmeres Orange statt Messing, damit er stärker heraussticht */
  --cta:      #E2912B;
  --cta-h:    #EE9E3C;   /* Mauszeiger darüber */
  --cta-p:    #C87A1B;   /* gedrückt */
  --cta-fg:   #2E2318;

  /* Rotstift des Dirigenten */
  --pencil:   #C0402E;

  /* Schatten, warm statt kühl */
  --sh-1: 0 1px 2px rgba(84, 62, 26, .06), 0 4px 14px rgba(84, 62, 26, .05);
  --sh-2: 0 10px 28px rgba(84, 62, 26, .10), 0 24px 60px rgba(84, 62, 26, .07);

  /* --- Schriften (alle serifenlos, alle frei/SIL OFL) --------------------
     Onest, variabel. Überschriften 600, Fließtext 400.
     ---------------------------------------------------------------------- */
  --display: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans:    "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-tr: -.018em;   /* Laufweite der Überschriften */
  --head-w:     600;       /* Gewicht der Überschriften */

  --wrap: 1320px;
  --wrap-narrow: 780px;
  --pad: clamp(20px, 4vw, 40px);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --band-y: clamp(72px, 8.5vw, 132px);
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 700px) { body { font-size: 1.125rem; } }

img, iframe, svg { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: var(--head-w);
  color: var(--ink);
  letter-spacing: var(--display-tr);
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--brass-p); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-d);
  outline-offset: 3px;
  border-radius: 2px;
}

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cta); color: var(--cta-fg);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skiplink:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------- Struktur */
.wrap {
  width: 100%;
  /* --breite wird vom Layout-Modus je Abschnitt gesetzt. */
  max-width: var(--breite, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: var(--breite, var(--wrap-narrow)); }

.band {
  position: relative;
  /* --abstand ist ein Faktor auf den vorhandenen Bereich, kein fester Wert.
     Dadurch bleibt der Abstand auch auf kleinen Geräten mitwachsend. */
  padding-block: calc(var(--band-y) * var(--abstand, 1));
}
.band--paper { background: var(--paper); }
.band--warm  { background: var(--warm); }
.band--tint  { background: var(--tint); }

.band--warm + .band--warm,
.band--paper + .band--paper { padding-top: 0; }

/* Notenlinien als Trennung zwischen hellen Bändern */
.band--paper + .band--warm::before,
.band--warm + .band--paper::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 33px;
  background: repeating-linear-gradient(to bottom,
      var(--rule) 0 1px, transparent 1px 8px);
  opacity: .8;
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------- Typo-Bausteine */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: calc(.76rem * var(--groesse, 1));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin: 0 0 22px;
  line-height: 1.3;
}

.mark {
  flex: none;
  display: grid; place-items: center;
  width: 25px; height: 25px;
  border: 1.5px solid currentColor;
  font-size: .78rem;
  letter-spacing: 0;
  line-height: 1;
  padding-top: 1px;
}

.secthead { margin: 0 0 clamp(40px, 5.5vw, 68px); }
.secthead h2 {
  font-size: calc(clamp(1.55rem, 1rem + 1.75vw, 2.35rem) * var(--groesse, 1));
  line-height: 1.2;
  margin: 0 0 20px;
  max-width: min(var(--zeilenbreite, 24ch), 100%);
}
.secthead .lead {
  font-size: calc(clamp(1.03rem, .96rem + .4vw, 1.22rem) * var(--groesse, 1));
  line-height: 1.62;
  color: var(--ink-2);
  max-width: min(var(--zeilenbreite, 56ch), 100%);
  margin: 0;
}

/* Rotstift-Markierung */
.pencil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C42 4 71 11 109 7s72-5 106 1 63-3 82-2' fill='none' stroke='%23C0402E' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M9 12.4c44-3 90 1.6 134-1.4 43-2.9 108 1 150 .4' fill='none' stroke='%23C0402E' stroke-width='1.3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .34em;
  padding-bottom: .16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pencil--thin { background-size: 100% .26em; }

.ctarow { margin: clamp(44px, 5vw, 68px) 0 0; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--lg { padding: 18px 32px; font-size: 1.06rem; }
.btn--sm { padding: 11px 18px; font-size: .93rem; }

.btn--brass {
  background: var(--cta);
  color: var(--cta-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
              0 1px 2px rgba(120, 66, 10, .18),
              0 6px 18px rgba(120, 66, 10, .14);
}
.btn--brass:hover { background: var(--cta-h); transform: translateY(-1px); }
.btn--brass:active { transform: translateY(0); background: var(--cta-p); }

/* ---------------------------------------------------------------- Marke */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.005em;
}
.brand__dot { color: var(--brass); font-style: normal; }
.brand__sub { font-style: normal; font-weight: 400; color: var(--ink-3); }

/* ------------------------------------------------------------- Kopfleiste */
.masthead {
  position: fixed; inset-inline: 0; top: 0; z-index: 80;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(247, 228, 188, .92), rgba(247, 228, 188, 0));
  opacity: 1; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.masthead.is-stuck {
  background: rgba(254, 252, 248, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--rule-2), 0 8px 24px rgba(84, 62, 26, .07);
}
.masthead.is-stuck::before { opacity: 0; }

.masthead__in {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--pad);
  /* Drei Spalten: die beiden äußeren gleich breit, damit die Links in der
     Mitte wirklich mittig sitzen und nicht nur zwischen den Nachbarn. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.masthead__in > .brand { justify-self: start; }
.masthead__cta { justify-self: end; }

.mainnav { justify-self: center; display: flex; align-items: center; gap: 30px; }
.mainnav > a,
.drop__btn {
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.mainnav > a:hover, .drop__btn:hover,
.drop:hover .drop__btn { color: var(--ink); border-bottom-color: var(--brass); }

.masthead__cta { white-space: nowrap; }

.drop { position: relative; }
.drop__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  margin-top: 12px;
  min-width: 292px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  box-shadow: var(--sh-2);
  padding: 6px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.drop:hover .drop__menu,
.drop:focus-within .drop__menu,
.drop__menu.is-open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.drop__menu a {
  padding: 11px 16px;
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 2px;
}
.drop__menu a:hover { background: var(--warm); color: var(--ink); }

.burger {
  display: none;
  position: relative;
  margin-left: auto;
  width: 44px; height: 40px;
  background: none; border: 1px solid var(--rule-2);
  border-radius: 3px; cursor: pointer;
  padding: 0;
}
/* Absolut positioniert, damit die Drehung zum X das Layout nicht auseinanderschiebt. */
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 19px; height: 1.6px;
  background: var(--ink);
  transition: transform .22s var(--ease);
}
.burger span:first-child { transform: translate(-50%, -50%) translateY(-3.3px); }
.burger span + span      { transform: translate(-50%, -50%) translateY(3.3px); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span + span      { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(clamp(106px, 11vw, 146px) * var(--abstand, 1))
                 calc(clamp(72px, 8vw, 104px) * var(--abstand, 1));
  background: var(--tint);
}
/* Wo der Schleier zumacht, hängt vom Umbruch ab: im Breitbild steht der
   Inhalt ab 43 %, gestapelt auf dem Handy schon ab 30 %. */
.hero { --veil-open: 36%; --veil-close: 47%; --veil-flat: 56%; }
@media (max-width: 899px) {
  .hero { --veil-open: 26%; --veil-close: 32%; --veil-flat: 40%; }
  /* Im Hochformat schneidet "cover" sehr eng. Der Ausschnitt wandert deshalb
     aufs Rapsfeld statt auf ein Gesicht in Großaufnahme. */
  .hero .hero__bg img { object-position: 30% 24%; }
}

.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% 26%;
  opacity: 1;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Schleier, senkrecht gestaffelt an der echten Textlage:
     Vorzeile 13-16 %, Überschrift 18-37 %, Inhalt ab 43 %.
     Oben dünn, damit das Foto trägt. Ab 47 % dicht, damit der kleine
     Text und das Video auf einer ruhigen Fläche sitzen. */
  background:
    /* waagrecht: links, wo der Text steht, etwas dichter.
       Rechts bleibt Daniel mit dem Flügelhorn frei. */
    linear-gradient(to right,
      rgba(247, 228, 188, .42)  0%,
      rgba(247, 228, 188, .36) 34%,
      rgba(247, 228, 188, .12) 60%,
      rgba(247, 228, 188, 0)   78%),
    /* senkrecht: dünn bis zum Ende der Überschrift, dann dicht */
    linear-gradient(to bottom,
      rgba(247, 228, 188, .58)  0%,
      rgba(247, 228, 188, .50) 10%,
      rgba(247, 228, 188, .50) var(--veil-open),
      rgba(247, 228, 188, .93) var(--veil-close),
      var(--tint)              var(--veil-flat),
      var(--tint)             100%);
}
.hero__in { position: relative; }

.hero .eyebrow { max-width: 62ch; letter-spacing: .12em; color: var(--ink); }

.hero__title {
  font-weight: var(--head-w);
  font-size: calc(clamp(1.75rem, 1rem + 2.4vw, 2.85rem) * var(--groesse, 1));
  line-height: 1.15;
  letter-spacing: var(--display-tr);
  color: var(--ink);
  max-width: min(var(--zeilenbreite, 17em), 100%);
  margin: 0 0 clamp(40px, 4.4vw, 58px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 58px);
  align-items: start;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: var(--spalten, 1.08fr .92fr); }
}

.frame {
  position: relative;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--soft);
  box-shadow: var(--sh-2);
}
.frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* --- Vorschaubild statt Abspieler ----------------------------------------
   Die Videos laden erst auf Klick. Das spart beim ersten Aufruf mehrere
   Megabyte, und es geht vorher kein Aufruf an YouTube hinaus. main.js
   tauscht das Bild dann gegen den echten Abspieler. */
.videofassade {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; margin: 0;
  background: var(--soft);
  cursor: pointer;
  overflow: hidden;
}
.videofassade img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease), filter .3s var(--ease);
}
.videofassade:hover img { transform: scale(1.035); filter: brightness(.92); }

.videofassade__knopf {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--cta); color: var(--cta-fg);
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  transition: transform .25s var(--ease), background .2s var(--ease);
}
/* Das Dreieck sitzt optisch mittig, wenn es leicht nach rechts rückt. */
.videofassade__knopf svg { margin-left: 3px; }
.videofassade:hover .videofassade__knopf {
  transform: translate(-50%, -50%) scale(1.09);
  background: var(--cta-h);
}
.videofassade:active .videofassade__knopf {
  transform: translate(-50%, -50%) scale(1.02);
  background: var(--cta-p);
}
.videofassade:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .videofassade img,
  .videofassade__knopf { transition: none; }
  .videofassade:hover img { transform: none; }
  .videofassade:hover .videofassade__knopf { transform: translate(-50%, -50%); }
}

.hero__claim {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(clamp(1.22rem, 1.05rem + .6vw, 1.5rem) * var(--groesse, 1));
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 26px;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}

/* Häkchen-Liste */
.ticks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 15px; }
.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: calc(1rem * var(--groesse, 1));
  line-height: 1.55;
  color: var(--ink-2);
  max-width: min(var(--zeilenbreite, 100%), 100%);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .34em;
  width: 17px; height: 10px;
  border-left: 2.2px solid var(--brass);
  border-bottom: 2.2px solid var(--brass);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--brass-d); font-weight: 700; }

.proof { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.proof__faces { display: flex; }
.proof__faces img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
}
.proof__faces img + img { margin-left: -13px; }
.proof__text { font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
.proof__stars { display: block; color: var(--brass); letter-spacing: 3px; font-size: 1rem; }
.proof__text strong { color: var(--ink); }

/* ------------------------------------------------- B · Sehnsucht/Blockade */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: var(--spalten, .92fr 1.08fr); }
}

.split__head {
  font-family: var(--sans);
  font-size: calc(.8rem * var(--groesse, 1)); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}

.doubts { list-style: none; margin: 0 0 24px; padding: 0; }
.doubts li {
  position: relative;
  padding: 16px 0 16px 26px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: calc(1.02rem * var(--groesse, 1));
  line-height: 1.55;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}
.doubts li:last-child { border-bottom: 1px solid var(--rule); }
.doubts li::before {
  content: "";
  position: absolute; left: 0; top: 1.42em;
  width: 11px; height: 1.5px;
  background: var(--rule-2);
}
.doubts__sum {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.16rem * var(--groesse, 1));
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  padding-left: 26px;
  position: relative;
}
.doubts__sum::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 12px; height: 12px;
  border-top: 2px solid var(--pencil);
  border-right: 2px solid var(--pencil);
  transform: rotate(45deg);
}

.panel {
  padding: clamp(30px, 4vw, 46px);
  border-radius: 4px;
}
.panel--tint {
  background: var(--tint);
  border: 1px solid var(--rule-2);
  box-shadow: var(--sh-1);
}
.panel--tint .ticks { margin-bottom: 0; }

/* ------------------------------------------------------- C · Transformation */
.wandel { overflow: hidden; }
.wandel__tex {
  position: absolute; inset: 0;
  background: url("assets/noten-partitur.webp") center right / cover no-repeat;
  opacity: .09;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(125% 105% at 116% 50%, #000 8%, transparent 64%);
  mask-image: radial-gradient(125% 105% at 116% 50%, #000 8%, transparent 64%);
  z-index: 0;
  pointer-events: none;
}
.wandel .wrap { position: relative; z-index: 1; }

.outcomes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-2);
}
@media (min-width: 760px) {
  .outcomes { grid-template-columns: 1fr 1fr; }
  .outcomes li:nth-child(odd)  { padding-right: clamp(24px, 3.6vw, 56px); }
  .outcomes li:nth-child(even) {
    padding-left: clamp(24px, 3.6vw, 56px);
    border-left: 1px solid var(--rule-2);
  }
  .outcomes li:nth-child(-n+2) { border-top: 0; }
}
.outcomes li {
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--rule-2);
}
.outcomes li:first-child { border-top: 0; }
.outcomes h4 {
  font-size: calc(1.3rem * var(--groesse, 1));
  line-height: 1.25;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 11px;
}
.outcomes h4::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  background: var(--brass);
  transform: rotate(45deg);
  translate: 0 -2px;
}
.outcomes p { color: var(--ink-2); font-size: calc(1.01rem * var(--groesse, 1)); line-height: 1.6; margin: 0;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}

/* ---------------------------------------------------------- D · Das System */
.score { position: relative; padding-top: 74px; }
.score__staff {
  position: absolute; top: 10px; left: 0;
  width: 100%; height: 40px;
  color: var(--rule-2);
  overflow: visible;
}
.score__line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.15s var(--ease);
}
.score.is-on .score__line { stroke-dashoffset: 0; }
.score.is-on .score__line:nth-child(2) { transition-delay: .07s; }
.score.is-on .score__line:nth-child(3) { transition-delay: .14s; }
.score.is-on .score__line:nth-child(4) { transition-delay: .21s; }
.score.is-on .score__line:nth-child(5) { transition-delay: .28s; }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(38px, 4vw, 56px);
}
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; }
.step__note {
  position: absolute; left: 1px;
  width: 17px; height: 12px;
  border-radius: 50%;
  background: var(--brass);
  transform: rotate(-22deg);
  opacity: 0; scale: .3;
  transition: opacity .4s var(--ease), scale .55s cubic-bezier(.24, 1.35, .4, 1);
}
.step__note::after {
  content: "";
  position: absolute; right: 0; bottom: 5px;
  width: 1.7px; height: 30px;
  background: var(--brass);
  transform: rotate(22deg);
  transform-origin: bottom center;
}
.step:nth-child(1) .step__note { top: -32px; }
.step:nth-child(2) .step__note { top: -42px; }
.step:nth-child(3) .step__note { top: -52px; }
.score.is-on .step__note { opacity: 1; scale: 1; }
.score.is-on .step:nth-child(1) .step__note { transition-delay: .5s; }
.score.is-on .step:nth-child(2) .step__note { transition-delay: .68s; }
.score.is-on .step:nth-child(3) .step__note { transition-delay: .86s; }
@media (max-width: 819px) {
  .step__note, .score__staff { display: none; }
  .score { padding-top: 0; }
}

.step__num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(1.65rem * var(--groesse, 1));
  letter-spacing: .02em;
  line-height: 1;
  color: var(--brass);
  margin-bottom: 12px;
}
.step h4 {
  font-size: calc(1.42rem * var(--groesse, 1));
  line-height: 1.2;
  margin: 0 0 12px;
}
.step p { color: var(--ink-2); font-size: calc(1.01rem * var(--groesse, 1)); line-height: 1.62;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}
.step p.step__kick {
  font-weight: 700;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 0;
}

/* ------------------------------------------------------- E · Vermarktung */
.verlag {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 860px) {
  .verlag { grid-template-columns: var(--spalten, .88fr 1.12fr); }
}
.verlag__pic { margin: 0; }
.verlag__pic img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 42% 62%;
  border-radius: 3px;
  border: 1px solid var(--rule-2);
  box-shadow: var(--sh-2);
}
.verlag__body article + article {
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--rule-2);
}
.verlag__body h4 {
  font-size: calc(1.3rem * var(--groesse, 1));
  line-height: 1.25;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 11px;
}
.verlag__body h4::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  background: var(--brass);
  transform: rotate(45deg);
  translate: 0 -2px;
}
.verlag__body p { color: var(--ink-2); font-size: calc(1.01rem * var(--groesse, 1)); line-height: 1.62; margin: 0;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}

/* --------------------------------------------------- F · Kundenergebnisse */
.faelle .frame { box-shadow: var(--sh-2); }

.cases { display: grid; gap: clamp(56px, 7vw, 96px); }

.case {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}
@media (min-width: 880px) {
  .case { grid-template-columns: var(--spalten, 1.04fr .96fr); }
  .case--flip .case__media { order: 2; }
}

.case h3 {
  font-size: calc(clamp(1.35rem, 1.1rem + .8vw, 1.75rem) * var(--groesse, 1));
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 20px;
}
.ba { margin: 0 0 24px; }
.ba dt {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-d);
  margin-bottom: 5px;
}
.ba dd {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: calc(1rem * var(--groesse, 1)); line-height: 1.6;
}
.ba dd:last-child { margin-bottom: 0; }

.case blockquote {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--brass);
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: calc(1.1rem * var(--groesse, 1));
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  max-width: min(var(--zeilenbreite, 100%), 100%);
}
.case blockquote::before { content: "„"; }
.case blockquote::after  { content: "“"; }

/* ----------------------------------------- F · Weitere Kundenstimmen */
.stimmen {
  margin-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.stimmen > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 18px;
  padding: 24px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.06rem, .98rem + .4vw, 1.28rem);
  letter-spacing: -.006em;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.stimmen > summary::-webkit-details-marker { display: none; }
.stimmen > summary:hover { color: var(--brass-d); }
.stimmen > summary .faq__sign { margin-left: auto; translate: 0 0; }

.stimmen__gitter {
  list-style: none;
  margin: 0;
  padding: 4px 0 34px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 30px);
}
@media (min-width: 620px) { .stimmen__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .stimmen__gitter { grid-template-columns: repeat(3, 1fr); } }

/* Alles mit data-video zeigt zunächst nur ein Vorschaubild. YouTube wird
   erst beim Klick geladen. Gilt für den Hero wie für die Kacheln. */
[data-video], [data-bunny] {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--soft);
  cursor: pointer;
}
[data-video] img, [data-bunny] img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[data-video] iframe, [data-bunny] iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.stimme__bild {
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stimme__bild:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

/* Abspielknopf, damit die Fläche als Video erkennbar ist */
.videoplay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(46, 35, 24, .18);
  transition: background .18s var(--ease);
}
.videoplay::before {
  content: "";
  width: 54px; height: 38px;
  border-radius: 9px;
  background: rgba(46, 35, 24, .78);
  transition: background .18s var(--ease);
}
.videoplay::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #FEFCF8;
  translate: 2px 0;
}
[data-video]:hover .videoplay, [data-bunny]:hover .videoplay { background: rgba(46, 35, 24, .06); }
.stimme__bild:hover .videoplay::before { background: var(--cta); }

.hero__media .videoplay::before { width: 76px; height: 53px; border-radius: 12px; }
.hero__media .videoplay::after { border-width: 11px 0 11px 18px; }

.stimme__titel {
  margin: 12px 0 0;
  font-size: calc(.97rem * var(--groesse, 1));
  line-height: 1.45;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- G · Daniel */
.bio {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
@media (min-width: 860px) {
  .bio { grid-template-columns: var(--spalten, minmax(260px, .8fr) 1.2fr); }
}
.bio__pic { position: relative; margin: 0; max-width: 420px; }
.bio__pic img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 70% 30%;
  border-radius: 3px;
}
.bio__pic::before {
  content: "";
  position: absolute; z-index: 0;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--brass);
  border-radius: 3px;
}
.bio__name {
  font-weight: 700;
  font-size: calc(clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem) * var(--groesse, 1));
  line-height: 1.1;
  margin: 0 0 10px;
}
.bio__role {
  font-family: var(--sans);
  font-size: calc(.8rem * var(--groesse, 1)); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-d);
  margin: 0 0 26px;
}
.bio__body p { color: var(--ink-2); max-width: min(var(--zeilenbreite, 58ch), 100%); }

/* ------------------------------------------------------------- H · Ablauf */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 40px);
  counter-reset: flow;
}
@media (min-width: 780px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow li {
  padding-top: 24px;
  border-top: 2px solid var(--rule-2);
  position: relative;
}
.flow li::after {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 46px; height: 2px;
  background: var(--brass);
}
.flow__num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(1.3rem * var(--groesse, 1));
  letter-spacing: .02em;
  line-height: 1;
  color: var(--brass-d);
  margin-bottom: 12px;
}
.flow h4 {
  font-size: calc(1.26rem * var(--groesse, 1));
  margin: 0 0 10px;
}
.flow p { color: var(--ink-2); font-size: calc(1rem * var(--groesse, 1)); line-height: 1.6; margin: 0;
  max-width: min(var(--zeilenbreite, 100%), 100%);
}

/* -------------------------------------------------------------- I · Fragen */
.faq { border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(clamp(1.02rem, .96rem + .3vw, 1.16rem) * var(--groesse, 1));
  line-height: 1.4;
  letter-spacing: -.006em;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-d); }
.faq__sign {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 17px; height: 17px;
  translate: 0 .3em;
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute; inset: calc(50% - .9px) 0 auto 0;
  height: 1.8px; background: var(--brass);
  transition: transform .25s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq details[open] .faq__sign::after { transform: rotate(180deg); }
.faq__a {
  padding: 0 56px 26px 0;
  color: var(--ink-2);
  font-size: calc(1.01rem * var(--groesse, 1));
  line-height: 1.65;
  max-width: min(var(--zeilenbreite, 62ch), 100%);
}

/* ---------------------------------------------------------- J · Final-CTA */
.finale { overflow: hidden; text-align: center; padding-block: calc(clamp(88px, 10vw, 152px) * var(--abstand, 1)); }
.finale__bg { position: absolute; inset: 0; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: .5; }
.finale__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 92% at 50% 42%, rgba(247, 228, 188, .82) 0%, var(--tint) 76%);
}
.finale__in { position: relative; }
.finale__title {
  font-size: calc(clamp(1.72rem, 1.1rem + 2.2vw, 2.75rem) * var(--groesse, 1));
  line-height: 1.16;
  letter-spacing: var(--display-tr);
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: min(var(--zeilenbreite, 19ch), 100%);
  text-wrap: balance;
}
.finale__lead {
  font-size: calc(clamp(1.05rem, .98rem + .4vw, 1.22rem) * var(--groesse, 1));
  line-height: 1.6;
  color: var(--ink-2);
  max-width: min(var(--zeilenbreite, 52ch), 100%);
  margin: 0 auto 38px;
}
.finale__alt {
  margin: 30px 0 0;
  font-size: .95rem;
  color: var(--ink-3);
}
.finale__alt a {
  color: var(--brass-d);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.finale__alt a:hover { color: var(--ink); }

/* -------------------------------------------------------------- Fußzeile */
.footer { background: var(--tint-2); color: var(--ink-2); padding: clamp(56px, 6vw, 84px) 0 28px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__brand p {
  margin: 18px 0 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34ch;
}
.footer__col h5 {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-d);
  margin: 0 0 18px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.footer__col a,
.footer__col .tracking-schalter {
  display: inline-block;
  padding: 4px 0;
  font-size: .96rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.footer__col a:hover { color: var(--brass-d); }
.footer__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink-2);
}
/* Der Hinweis zu Facebook und Google. Bewusst leiser als der Rest der
   Fußzeile: er muss dastehen, soll aber nichts überstrahlen. */
.footer__haftung { margin-top: 16px; }
.footer__haftung p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 100ch;
}
/* Der Widerspruchs-Knopf steht in einer Linkliste und muss aussehen wie ein Link. */
.footer__col .tracking-schalter { font-size: .96rem; color: var(--ink-2); }
.footer__col .tracking-schalter:hover { color: var(--brass-d); }

/* Noch nicht ausgefüllte Platzhalter bekommen Besucher nicht zu sehen.
   main.js entfernt das Attribut, sobald ein eigener Text hinterlegt ist. */
[data-platzhalter] { display: none; }

/* -------------------------------------------------------------- Animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Mobil */
@media (max-width: 1024px) {
  .burger { display: block; }
  /* Auf schmalen Geräten wieder eine Reihe: Logo, Button, Menüknopf. */
  .masthead__in { display: flex; gap: 14px; }
  .masthead__in > .brand { margin-right: auto; }
  .masthead__cta { padding: 10px 15px; font-size: .88rem; }
  .mainnav {
    position: absolute; top: 100%; inset-inline: 0;
    margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(254, 252, 248, .98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule-2);
    padding: 8px var(--pad) 22px;
    display: none;
  }
  .mainnav.is-open { display: flex; }
  .mainnav > a, .drop__btn {
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    justify-content: flex-start;
    font-size: 1.05rem;
  }
  .drop { width: 100%; }
  .drop__btn { display: flex; }
  .drop__menu {
    position: static; transform: none; margin: 0 0 8px;
    min-width: 0; opacity: 1; visibility: visible;
    background: none; border: 0; box-shadow: none;
    padding: 4px 0 8px 14px;
    display: none;
  }
  .drop__menu.is-open { display: flex; }
  /* Der Versatz um die halbe Breite gehört zur aufklappenden Desktop-Fassung.
     Hier steht das Untermenü im Fluss — ohne diese Zeilen bliebe der Versatz
     aus ".drop:focus-within .drop__menu" stehen, sobald jemand antippt, und
     die Einträge liefen links aus dem Bild. */
  .drop:hover .drop__menu,
  .drop:focus-within .drop__menu,
  .drop__menu.is-open { transform: none; left: auto; }
  .drop__menu a { color: var(--ink-2); padding: 9px 0; }
  .drop__menu a:hover { background: none; color: var(--brass-d); }

  /* Der Buchungs-Button sitzt hier im Klappmenü. Ohne diese Regeln würden
     ihn die allgemeinen Link-Regeln der Navigation flach machen. */
  .mainnav > a.masthead__cta {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    padding: 15px 18px;
    font-size: 1rem;
    font-weight: 700;
    white-space: normal;
    background: var(--cta);
    color: var(--cta-fg);
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
                0 1px 2px rgba(120, 66, 10, .18);
  }
  .mainnav > a.masthead__cta:hover { background: var(--cta-h); color: var(--cta-fg); }
}

@media (max-width: 560px) {
  .brand img { height: 32px; }
  .brand__word { font-size: 1.16rem; }
  .masthead__cta { padding: 10px 13px; font-size: .84rem; }
  .faq__a { padding-right: 0; }
  .proof__faces img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .score__line { stroke-dashoffset: 0; transition: none; }
  .step__note { opacity: 1; scale: 1; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* Skalierung einzelner Blöcke aus dem Layout-Modus.
   --groesse wird auf dem Element selbst gesetzt und multipliziert den
   vorhandenen Wert, damit clamp() weiterhin greift. */

/* ==========================================================================
   Rechtsseiten — Impressum, Datenschutz, AGB
   Eigene, schlanke Hülle: schmale Spalte, kompakte Kopfleiste, kurze Fußzeile.
   Die Startseite bleibt davon unberührt.
   ========================================================================== */
.rechtskopf {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.rechtskopf__in {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.rechtskopf__zurueck {
  font-size: .93rem; color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .18s var(--ease);
}
.rechtskopf__zurueck:hover { color: var(--brass-d); }
/* Auf schmalen Geräten passen Logo und voller Linktext nicht nebeneinander.
   Dann bleibt vom Link nur „Zurück“ stehen; das Logo bleibt vollständig. */
@media (max-width: 560px) {
  .rechtskopf__in { padding: 12px var(--pad); gap: 12px; }
  .rechtskopf__zurueck .rechtskopf__lang { display: none; }
}

.rechtstext { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 110px); background: var(--paper); }
.rechtstext__in { max-width: 72ch; margin: 0 auto; padding: 0 var(--pad); }
.rechtstext h1 {
  font-family: var(--display); font-weight: var(--head-w);
  letter-spacing: var(--display-tr); color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.12;
  margin: 0 0 10px;
}
.rechtstext__stand { font-size: .86rem; color: var(--ink-3); margin: 0 0 clamp(30px, 4vw, 48px); }
.rechtstext h2 {
  font-family: var(--display); font-weight: var(--head-w);
  letter-spacing: var(--display-tr); color: var(--ink);
  font-size: 1.32rem; line-height: 1.28;
  margin: 2.6em 0 .7em; padding-top: 1.5em;
  border-top: 1px solid var(--rule);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 {
  font-family: var(--display); font-weight: var(--head-w); color: var(--ink);
  font-size: 1.06rem; line-height: 1.35; margin: 2em 0 .55em;
}
.rechtstext h4 {
  font-family: var(--sans); font-weight: 600; color: var(--ink-2);
  font-size: .96rem; margin: 1.6em 0 .45em;
}
.rechtstext p,
.rechtstext li { font-size: .97rem; line-height: 1.72; color: var(--ink-2); }
.rechtstext p { margin: 0 0 1.05em; }
.rechtstext ul { margin: 0 0 1.05em; padding-left: 1.15em; display: grid; gap: .35em; }
.rechtstext a { color: var(--brass-d); overflow-wrap: anywhere; }
.rechtstext a:hover { color: var(--ink); }
.rechtstext__hinweis {
  margin: 0 0 clamp(30px, 4vw, 44px);
  padding: 18px 20px;
  background: var(--brass-p);
  border-left: 3px solid var(--brass);
  border-radius: 0 8px 8px 0;
  font-size: .92rem; line-height: 1.65; color: var(--ink-2);
}
.rechtstext__hinweis p { font-size: inherit; margin: 0 0 .6em; }
.rechtstext__hinweis p:last-child { margin: 0; }

/* Kurze Fußzeile der Rechtsseiten */
.rechtsfuss { background: var(--tint-2); color: var(--ink-2); padding: 34px 0 30px; }
.rechtsfuss__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; gap: 16px;
}
.rechtsfuss__links { display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: .9rem; }
.rechtsfuss__links a,
.rechtsfuss__links .tracking-schalter { display: inline-block; padding: 5px 0; color: var(--ink-2); text-decoration: none; }
.rechtsfuss__links a:hover { color: var(--brass-d); }
.rechtsfuss__links a[aria-current] { color: var(--brass-d); font-weight: 600; }
.rechtsfuss__klein { font-size: .78rem; line-height: 1.6; color: var(--ink-2); max-width: 92ch; }

/* ==========================================================================
   Cookie-Hinweis
   Schmale Leiste am unteren Rand, ein Knopf. Sie hält die Messung nicht auf,
   sie informiert nur. Der Widerspruch sitzt im Fußbereich.
   ========================================================================== */
.hinweis {
  position: fixed; inset: auto 0 0 0; z-index: 999;
  padding: 0 var(--pad) var(--pad);
  display: flex; justify-content: center;
  pointer-events: none;
}
.hinweis__karte {
  pointer-events: auto;
  width: min(720px, 100%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  box-shadow: var(--sh-2);
  padding: 14px 18px;
  animation: hinweis-auf .3s var(--ease) both;
}
@keyframes hinweis-auf { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .hinweis__karte { animation: none; } }

.hinweis p {
  flex: 1 1 320px;
  margin: 0;
  font-size: .87rem; line-height: 1.55; color: var(--ink-2);
}
.hinweis a { color: var(--brass-d); }
.hinweis .btn { flex: 0 0 auto; }

/* Widerspruchs-Knopf im Fußbereich — sieht aus wie die Links daneben. */
.tracking-schalter {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; text-decoration: none;
}
.tracking-schalter:hover { color: var(--brass-d); }