/* Zustände, Stand 11.09.2026. Eine Sprache für alle Seiten.

   Jede Fläche hat ihren dunklen Partner. Er trägt jeden Zustand auf dieser
   Fläche: den gefüllten Knopf beim Überfahren, den Rahmen eines Kastens,
   den Balken unter einem Wort und jeden Text, der leiser sein soll.

   Fläche            Grund      dunkler Partner
   weiß                #FFFFFF   Lila 600  #4E3A7E
   Lavendel/Lila 100   #C9BDE8   Lila 600  #4E3A7E
   Mint                #A5CFB2   Mint 600  #1F4E31
   Apricot/Peach       #FFC9AE   Peach 600 #8A3F1C
   Hellgelb            #FAF6B4   Yellow 600 #7A6A1A
   Hellblau/Blue 100   #91B7C8   Blue 600  #1E4356

   Drei Regeln:
   1. Kein Grau auf einer Farbe. Leiser Text nimmt den dunklen Partner.
   2. Keine zwei Kästen nebeneinander. Die erste Aktion ist ein Kasten,
      jede weitere ist ein Wort mit Balken, so wie im Einstieg.
   3. Kein weißer und kein schwarzer Zustand. Der Zustand ist immer der
      dunkle Partner der Fläche. */

:root {
  --peach-100:#ffc9ae;  --peach-600:#8a3f1c;
  --blue-100:#91b7c8;   --blue-600:#1e4356;
  --mint-100:#a5cfb2;   --mint-600:#1f4e31;
  --yellow-100:#faf6b4; --yellow-600:#7a6a1a;
  --lila-100:#c9bde8;   --lila-600:#4e3a7e;
  /* Weiße Fläche: der Knopf bleibt im Lavendel der Website (#E8DEF4) mit
     schwarzer Schrift, Jen am 11.09.2026. Der Zustand ist Lila 600. */
  --feld-100:#e8def4;
  --feld-600:var(--lila-600);
  --feld-schrift:var(--ink);
  --mark:var(--mint-100);
}
[data-section-tone="white"]    { --feld-100:#e8def4;           --feld-600:var(--lila-600);   --feld-schrift:var(--ink); --mark:var(--mint-100); }
[data-section-tone="lavender"] { --feld-100:var(--lila-100);   --feld-600:var(--lila-600); --feld-schrift:var(--lila-600);   --mark:var(--lila-600); }
[data-section-tone="mint"]     { --feld-100:var(--mint-100);   --feld-600:var(--mint-600); --feld-schrift:var(--mint-600);   --mark:var(--mint-600); }
[data-section-tone="apricot"]  { --feld-100:var(--peach-100);  --feld-600:var(--peach-600); --feld-schrift:var(--peach-600);  --mark:var(--peach-600); }
[data-section-tone="yellow"]   { --feld-100:var(--yellow-100); --feld-600:var(--yellow-600); --feld-schrift:var(--yellow-600); --mark:var(--yellow-600); }
[data-section-tone="blue"]     { --feld-100:var(--blue-100);   --feld-600:var(--blue-600); --feld-schrift:var(--blue-600);   --mark:var(--blue-600); }

/* ---------- 1. Wörter mit Balken ---------- */
.text-link,
.brand-program-links a,
.mcp-example-questions > button,
.booking-fallback,
.motion-control,
.actions .btn ~ .btn,
.actions .button ~ .button,
.hero-actions .btn ~ .btn,
.hero-actions .button ~ .button,
.booking-actions .btn ~ .btn,
.split .btn ~ .btn {
  position:relative; text-decoration:none;
}
.text-link, .brand-program-links a, .mcp-example-questions > button { --mark-lift:9px; }
.motion-control { --mark-lift:5px; }
.booking-fallback { --mark-lift:0px; }

.text-link::before,
.brand-program-links a::before,
.mcp-example-questions > button::before,
.booking-fallback::before,
.motion-control::before,
.actions .btn ~ .btn::before,
.actions .button ~ .button::before,
.hero-actions .btn ~ .btn::before,
.hero-actions .button ~ .button::before,
.booking-actions .btn ~ .btn::before,
.split .btn ~ .btn::before {
  content:""; position:absolute; z-index:-1; left:0;
  top:calc(100% - var(--mark-lift, 0px) - 0.5rem);
  width:0; height:0.375rem; overflow:hidden; background:var(--mark);
  transform:rotate(-1deg); transition:width .3s cubic-bezier(.23,1,.32,1);
}
.text-link:hover::before, .text-link:focus-visible::before,
.brand-program-links a:hover::before, .brand-program-links a:focus-visible::before,
.mcp-example-questions > button:hover::before,
.mcp-example-questions > button:focus-visible::before,
.booking-fallback:hover::before, .booking-fallback:focus-visible::before,
.motion-control:hover::before, .motion-control:focus-visible::before,
.actions .btn ~ .btn:hover::before, .actions .btn ~ .btn:focus-visible::before,
.actions .button ~ .button:hover::before, .actions .button ~ .button:focus-visible::before,
.hero-actions .btn ~ .btn:hover::before, .hero-actions .btn ~ .btn:focus-visible::before,
.hero-actions .button ~ .button:hover::before, .hero-actions .button ~ .button:focus-visible::before,
.booking-actions .btn ~ .btn:hover::before, .booking-actions .btn ~ .btn:focus-visible::before,
.split .btn ~ .btn:hover::before, .split .btn ~ .btn:focus-visible::before { width:100%; }

/* Ein Balken liegt hinter dem Wort. Jede Fläche braucht dafür einen eigenen
   Stapelbereich, sonst verschwindet er dahinter. */
[data-section-tone], .mcp-example-questions, .brand-program-links,
.actions, .hero-actions, .booking-actions { isolation:isolate; }

/* ---------- 2. Keine zwei Kästen nebeneinander ---------- */
/* Die erste Aktion einer Gruppe bleibt ein Kasten. Jede weitere wird ein Wort. */
.actions .btn ~ .btn,
.actions .button ~ .button,
.hero-actions .btn ~ .btn,
.hero-actions .button ~ .button,
.booking-actions .btn ~ .btn,
.split .btn ~ .btn,
.inner-page .actions .btn ~ .btn,
.inner-page .btn.secondary,
.inner-page[data-page] main [data-section-tone] .btn.secondary {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding-inline:0 !important;
  min-height:0 !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ---------- 3. Der Knopf ---------- */
/* Ein Knopf trägt das Paar seiner Fläche: die helle Fläche als Grund, den
   dunklen Partner als Schrift. Auf einer farbigen Fläche trägt er zusätzlich
   einen Rahmen in genau dieser Schriftfarbe; auf Weiß keinen. Beim Überfahren
   wird der Grund der dunkle Partner und die Schrift weiß. Eine Regel für alle
   Farben, Jen am 11.09.2026.

   Weiß  → Lavendel   #E8DEF4 mit schwarzer Schrift, Zustand Lila 600 #4E3A7E
   Mint  → Mint 100   #A5CFB2 auf Mint 600   #1F4E31
   Peach → Peach 100  #FFC9AE auf Peach 600  #8A3F1C
   Yellow→ Yellow 100 #FAF6B4 auf Yellow 600 #7A6A1A
   Blue  → Blue 100   #91B7C8 auf Blue 600   #1E4356 */
.btn,
.button,
.button-white,
.inner-page .btn,
.inner-page[data-page] main [data-section-tone] .btn,
.inner-page[data-page] main [data-section-tone] .btn.secondary,
.automation-home .button,
.automation-home .button:not(.button-white),
.automation-home .hero .button,
.automation-home .booking-section .button,
.automation-home [data-section-tone] .button,
.automation-home [data-section-tone] .button-white,
[data-section-tone] .btn,
[data-section-tone] .button,
[data-section-tone] .button-white {
  background:var(--feld-100, #e8def4);
  color:var(--feld-schrift, var(--ink));
  border:0;
}
/* Der Rahmen gilt nur auf einer farbigen Fläche, in der Farbe der Schrift.
   Auf Weiß trägt der Knopf keinen Rahmen. Jen am 11.09.2026. */
[data-section-tone]:not([data-section-tone="white"]) .btn,
[data-section-tone]:not([data-section-tone="white"]) .button,
[data-section-tone]:not([data-section-tone="white"]) .button-white,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button-white {
  border:1px solid var(--feld-schrift, var(--ink));
}
[data-section-tone]:not([data-section-tone="white"]) .btn:hover,
[data-section-tone]:not([data-section-tone="white"]) .button:hover,
[data-section-tone]:not([data-section-tone="white"]) .button-white:hover,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn:hover,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button:hover {
  border:1px solid var(--feld-600, #4e3a7e);
}
.btn:hover, .btn:focus-visible,
.button:hover, .button:focus-visible,
.button-white:hover, .button-white:focus-visible,
.inner-page .btn:hover, .inner-page .btn:focus-visible,
.inner-page[data-page] main [data-section-tone] .btn:hover,
.inner-page[data-page] main [data-section-tone] .btn:focus-visible,
.automation-home .button:hover, .automation-home .button:focus-visible,
.automation-home .hero .button:hover,
.automation-home .booking-section .button:hover,
.automation-home [data-section-tone] .button:hover,
.automation-home [data-section-tone] .button-white:hover,
[data-section-tone] .btn:hover,
[data-section-tone] .button:hover,
[data-section-tone] .button-white:hover {
  background:var(--feld-600, #4e3a7e);
  color:#fff;
  border:0;
  transform:none;
}
/* Der Pfeil im Knopf folgt der Schrift. */
.btn svg, .button svg { color:inherit; }

/* ---------- 4. Kästen ---------- */
/* Filter, Reiter, runde Schaltflächen: der Grund bleibt, der Rahmen wechselt. */
.inner-page .filter,
.inner-page .icon-btn,
.mcp-tab,
.brand-header .language-toggle,
.circle-button,
.scroll-cue {
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.inner-page .filter:hover,
.inner-page[data-page] main [data-section-tone] .filter:hover,
.brand-header .language-toggle:hover,
.circle-button:hover:not(:disabled) {
  background:#fff; border-color:var(--feld-600, #4e3a7e);
  box-shadow:3px 3px 0 0 var(--feld-600, #4e3a7e); transform:none;
}
.inner-page .icon-btn:hover {
  background:transparent; border-color:var(--feld-600, #4e3a7e); transform:none;
}
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .icon-btn:hover {
  background:#fff; border-color:var(--feld-600, #4e3a7e); transform:none;
}
.mcp-tab:hover { background:transparent; border-color:var(--feld-600, #4e3a7e); }
.inner-page .filter[aria-pressed="true"],
.inner-page[data-page] main [data-section-tone] .filter[aria-pressed="true"],
.mcp-tab[aria-selected="true"] {
  background:#fff; border-color:var(--feld-600, #4e3a7e);
  box-shadow:3px 3px 0 0 var(--feld-600, #4e3a7e);
}
/* Der Punkt im gewählten Kasten ist voll, das ist das Zeichen der Auswahl. */
.choice[aria-pressed="true"] .radio-dot,
.shop-choice[aria-pressed="true"] .radio-dot {
  background:var(--feld-600, #4e3a7e);
  border-color:var(--feld-600, #4e3a7e);
  box-shadow:inset 0 0 0 4px #fff;
  opacity:1;
}

/* ---------- 5. Kein Grau, nirgends ---------- */
/* Leiser Text nimmt den dunklen Partner seiner Fläche. Auf Weiß ist das
   Lila 600, weil Weiß zur Lila-Familie gehört. Jede Regel, die vorher einen
   Grauton gesetzt hat, steht hier einzeln; gefunden am 11.09.2026 über alle
   ausgelieferten Stylesheets. */
.mega small,
.trust p,
.footer h3,
.footer-bottom,
.image-disclosure,
.booking-note,
.booking-card .booking-note,
.booking-intro .booking-note,
.brand-header .brand-menu-description,
.testimonial-editorial .testimonial-copy .draft-notice,
.brand-program-tabs button,
.brand-program-story > p.brand-program-condition,
.brand-entry-nav button:not([aria-pressed="true"]),
.program-window-bar > span:nth-child(2),
.program-window-heading > span,
.program-product-caption > span,
.program-window-footnote,
.program-window-footnote > span:last-child,
.program-system-source > span,
.choice small,
.addon small,
.field-help,
.fineprint,
.muted,
[data-section-tone]:not([data-section-tone="white"]) small {
  color:var(--feld-600, #4e3a7e);
}
/* Auf einer dunklen Fläche gibt es auch kein Grau: leiser Text ist dort weiß,
   nur leiser. */
.program-order-receipt > div > span,
.program-finance-route > span:first-child,
.program-finance-route > span:not(:first-child),
.program-system-hub > span {
  color:rgba(255,255,255,.74);
}
.field input::placeholder,
.field textarea::placeholder { color:color-mix(in srgb, var(--feld-600, #4e3a7e) 62%, #fff); }

/* ---------- 6. Kleinteile, die vorher gar keinen Zustand hatten ---------- */
.step-dot { transition:background .18s ease, transform .18s ease; }
.step-dot:hover { background:var(--feld-600, #4e3a7e); transform:scale(1.25); }
.carousel-dots button:hover::after,
.carousel-dots button:focus-visible::after { background:var(--feld-600, #4e3a7e); }
.brand-names a { transition:opacity .18s ease; }
.brand-names a:hover { opacity:.55; }
.scroll-cue:hover { transform:translateY(4px); border-color:var(--feld-600, #4e3a7e); }

/* Ein Wort trägt nur ein Zeichen: den Balken beim Überfahren.
   Die feste Unterstreichung darunter entfällt. */
.text-link { border-bottom:0; }

/* Die Rhythmusdatei setzt für farbige Bänder eigene Regeln mit höherem Gewicht
   (`:not([data-section-tone="white"])`). Damit das Paar auch dort gilt, stehen
   dieselben Wähler hier noch einmal. 11.09.2026. */
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button-white {
  background:var(--feld-100, #e8def4);
  color:var(--feld-schrift, var(--ink));
  border:1px solid var(--feld-schrift, var(--ink));
}
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn:hover,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn:focus-visible,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button:hover,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .button-white:hover {
  background:var(--feld-600, #4e3a7e);
  color:#fff;
  border:1px solid var(--feld-600, #4e3a7e);
}
/* Auswahlkästen bleiben neutral, tragen aber keinen grauen Rahmen auf Farbe. */
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .filter,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .icon-btn {
  background:#fff; color:var(--ink); border-color:var(--feld-600, #4e3a7e);
}
/* Ein Kasten wird beim Überfahren nicht gefüllt. Er bekommt denselben starken
   Rand wie jeder andere Kasten, der Grund bleibt weiß. 11.09.2026. */
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .filter:hover,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .icon-btn:hover {
  background:#fff;
  color:var(--feld-600, #4e3a7e);
  border-color:var(--feld-600, #4e3a7e);
  box-shadow:3px 3px 0 0 var(--feld-600, #4e3a7e);
}
/* Das zweite Wort einer Gruppe bleibt ein Wort, auch auf einem farbigen Band. */
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .actions .btn ~ .btn,
.inner-page[data-page] main [data-section-tone]:not([data-section-tone="white"]) .btn.secondary {
  background:transparent !important; border:0 !important; color:var(--ink) !important;
}

/* ---------- 7. Kästen, überall dieselbe Sprache ---------- */
/* Gilt für Auswahlkästen, Filter, Reiter, Eingabefelder und Ankreuzfelder,
   auf der Website wie in der Buchungsstrecke. Jen am 11.09.2026:
   „die regeln gelten immer nicht nur für buchungsseite".

   Ruhe        weißer Grund, Rand der dunkle Partner mit 28 Prozent
   Überfahren  weißer Grund, Rand der dunkle Partner, zwei Pixel stark
   Gewählt     wie beim Überfahren, dazu der volle Punkt oder Haken
   Schrift, Punkt und Haken sind immer der dunkle Partner. */
.choice, .shop-choice, .addon,
.inner-page .filter, .inner-page .icon-btn, .mcp-tab,
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  border:2px solid color-mix(in srgb, var(--feld-600, #4e3a7e) 28%, transparent);
  color:var(--feld-600, #4e3a7e);
}
.choice *, .shop-choice *, .addon * { color:var(--feld-600, #4e3a7e); }
.choice:hover, .shop-choice:hover, .addon:hover,
.inner-page .filter:hover, .inner-page .icon-btn:hover, .mcp-tab:hover,
.field input:hover, .field select:hover, .field textarea:hover,
input[type="text"]:hover, input[type="email"]:hover, select:hover, textarea:hover {
  border-color:var(--feld-600, #4e3a7e);
  box-shadow:none;
}
.field input:focus, .field select:focus, .field textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
  border-color:var(--feld-600, #4e3a7e);
  box-shadow:inset 0 0 0 1px var(--feld-600, #4e3a7e);
}
.choice[aria-pressed="true"], .shop-choice[aria-pressed="true"], .addon:has(input:checked),
.inner-page .filter[aria-pressed="true"],
.inner-page[data-page] main [data-section-tone] .filter[aria-pressed="true"],
.mcp-tab[aria-selected="true"] {
  background:#fff;
  border-color:var(--feld-600, #4e3a7e);
  color:var(--feld-600, #4e3a7e);
  box-shadow:3px 3px 0 0 var(--feld-600, #4e3a7e);
}
/* Punkt und Haken tragen den dunklen Partner, nie Schwarz. */
.radio-dot { border-color:var(--feld-600, #4e3a7e); }
.choice[aria-pressed="true"] .radio-dot, .shop-choice[aria-pressed="true"] .radio-dot {
  background:var(--feld-600, #4e3a7e);
  border-color:var(--feld-600, #4e3a7e);
  box-shadow:inset 0 0 0 4px var(--feld-100, #e8def4);
  opacity:1;
}
input[type="checkbox"], input[type="radio"] { accent-color:var(--feld-600, #4e3a7e); }

/* ---------- 8. Ein Zustand für alle Kästchen ---------- */
/* Jen am 11.09.2026: „hover für alle kästchen muss gleich sein".
   Überfahren, Tastaturfokus und Gewählt zeigen dasselbe Bild: ein Rahmen von
   zwei Pixeln im dunklen Partner und ein harter Schatten von drei Pixeln nach
   unten rechts. In Ruhe ist der Rahmen ebenso breit, nur blasser, damit beim
   Wechsel nichts springt. Kein dicker schwarzer Ring,
   keine zweite Sprache für Eingabefelder. Der Unterschied zwischen Überfahren
   und Gewählt liegt allein im Grund. */
.choice, .shop-choice, .addon,
.inner-page .filter, .inner-page .icon-btn, .mcp-tab,
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], select, textarea {
  outline:0;
  box-shadow:none;
  transition:border-color .18s ease, background .18s ease;
}
.choice:hover, .shop-choice:hover, .addon:hover,
.inner-page .filter:hover, .inner-page .icon-btn:hover, .mcp-tab:hover,
.field input:hover, .field select:hover, .field textarea:hover,
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover,
input[type="url"]:hover, input[type="number"]:hover, input[type="search"]:hover,
select:hover, textarea:hover,
.choice:focus-visible, .shop-choice:focus-visible, .addon:focus-within,
.inner-page .filter:focus-visible, .inner-page .icon-btn:focus-visible, .mcp-tab:focus-visible,
.field input:focus, .field select:focus, .field textarea:focus,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color:var(--feld-600, #4e3a7e);
  outline:0;
  /* Zwei Pixel Rahmen und ein harter Schatten nach unten rechts. Der Rahmen
     ist schon in Ruhe zwei Pixel breit, nur blasser, deshalb springt nichts. */
  box-shadow:3px 3px 0 0 var(--feld-600, #4e3a7e);
}
/* Der Tastaturring der Seite ist nicht mehr schwarz und nicht mehr dick. */
:focus-visible,
.inner-page :focus-visible,
.brand-header :is(a,button,summary):focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--feld-600, #4e3a7e);
  outline-offset:3px;
}
.choice:focus-visible, .shop-choice:focus-visible, .addon:focus-within,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:0; }

/* ---------- 9. Fotos haben keine runden Ecken ---------- */
/* Regel von Jen am 11.09.2026, sie deckt sich mit dem Markenbuch:
   Radius 0 auf Fotos. Runde Formen bleiben Knöpfen, Pillen und Punkten
   vorbehalten. */
.hero-photo,
.hero-photo img,
.inner-page .inner-hero-photo,
.inner-page .story-photo img,
.inner-page .split > img,
.inner-page .gallery-card,
.inner-page .editorial img,
.testimonial-portrait img,
.relationship-section img,
.chapter-visual > img,
figure > img,
.feature-art img,
.moment img,
.automation-home .hero-stack .hero-photo,
.automation-home .hero-stack .hero-photo img,
.testimonial-editorial .testimonial-portrait img,
.brand-program-photo img,
.inner-page[data-page] main [data-section-tone] .editorial img,
.inner-page[data-page] main [data-section-tone] .gallery-card {
  border-radius:0;
}
/* Rund bleibt, was rund gemeint ist: Punkte, Knöpfe, Profilbilder in den
   nachgebauten Oberflächen. */
.program-window-bar img, .brand-menu-icon, .radio-dot { border-radius:50%; }