/* Aubrey Company · Button-System (final, Runde 10)
   Rudi 20.10. nach der Auswahlseite: Primär ist „Kontur“ (P7), kompakter: Rahmen enger am Text, oben, unten und
   außen weniger Rand. Beim Rübergehen ändert nur der Slash die Farbe: auf hellem Grund wird er dunkler (Tinte),
   auf dunklem Grund heller (fast weiß). Sekundär ist der Textbutton „Leitstrich“ (Text 1, „das, was ich am Anfang
   gesagt habe“): Slash vor dem Text, gleiche Farbregel, danach zieht unten die Linie herein.
   Die Varianten 2 bis 8, der ?btn-Schalter und der Speicher „aubrey-btn-v“ sind entfernt.

   Rollen
     Primär   .btn (ohne --line), Cookie „Alle akzeptieren“ (.ck__b--main, gefüllt)
     Sekundär .btn--line, Cookie „Nur notwendige“ (.ck__b--alt, gleich hoch, Linie in Ruhe sichtbar) und „Einstellungen“ (.ck__b--ghost)
     Regel (Rudi R11): normalerweise der Textbutton. Rahmen nur, wo eine klare Hauptaktion nötig ist: Kopfzeile,
     Hero, Abschluss „Projekt anfragen“, Formular absenden, Cookie „Alle akzeptieren“.
   Zustände
     Aktiv = Maus-Hover (nur Geräte mit echtem Hover), Tastaturfokus (:focus-visible, kein Kasten) und kurz nach
     einem Fingertipp (.is-tap vom Kopf-Skript, ca. 650ms). Primär: Slash wechselt die Farbe, Rahmen wird minimal
     kräftiger (1,5 auf 2px). Sekundär: Slash wechselt die Farbe, Linie zieht in 420ms von links herein und beim
     Verlassen ebenso zurück.
     Gedrückt: Primär bekommt einen Hauch Fläche, Sekundär wird kurz etwas zurückgenommen.
     Deaktiviert: gedämpfter Rahmen, keine Reaktion.
     Ruhige Bewegung (html.rm): keine Animation. Hover zeigt nur den Farbwechsel; Tastaturfokus zeigt beim
     Sekundärbutton zusätzlich die Linie (ohne Animation), damit Fokus nicht allein über Farbe erkennbar ist.

   Technik: --on (0/1, vererbt) schaltet die Zustände, --lon (0/1) die Linie. Der Slash (::after) mischt seine vier
   Verlaufsfarben aus Ruhe- und Aktivfarben und animiert selbst. Geometrie exakt der Marken-Slash
   (M832.418 0H1500L667.582 1500H0z), Schräge 0,5549 = 61°.
   Nur Website (body:not(.panel-body)); Admin, Portal und Login behalten ihre eigenen Buttons. */

@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lon { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --x1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --x2 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --x3 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --x4 { syntax: "<color>"; inherits: false; initial-value: transparent; }

/* ---------- Gemeinsame Basis, Ton „hell“ ---------- */
html body:not(.panel-body) :is(.btn, .ck__b) {
  --bt-d: .42s; --bt-e: cubic-bezier(.45, .08, .2, 1);
  --bt-c: var(--ink); --bt-f: var(--ink); --bt-ln: #9c6b43;
  /* Slash in Ruhe: Markenverlauf; aktiv: ganz Tinte (dunkler) */
  --s1: #0f202d; --s2: #2d4353; --s3: #b9875f; --s4: #f1c398;
  --h1: #0f202d; --h2: #0f202d; --h3: #0f202d; --h4: #0f202d;
  position: relative; align-items: center; justify-content: flex-start;
  width: fit-content; max-width: 100%; min-height: 0; border: 0; border-radius: 0; clip-path: none; overflow: visible; isolation: isolate;
  background: none; box-shadow: none; color: var(--bt-c); font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transform: none; transition: none;
}
html body:not(.panel-body) :is(.btn, .ck__b)::before, html body:not(.panel-body) :is(.btn, .ck__b)::after {
  content: ""; position: absolute; inset: auto; pointer-events: none; transform: none; opacity: 1; clip-path: none; box-shadow: none; border: 0; animation: none; background: none;
}
/* Slash vor dem Text */
html body:not(.panel-body) :is(.btn, .ck__b)::after {
  z-index: 0; left: var(--bt-sx); top: calc(50% - var(--bt-gh) / 2); width: var(--bt-gh); height: var(--bt-gh);
  --x1: color-mix(in oklab, var(--h1) calc(var(--on) * 100%), var(--s1));
  --x2: color-mix(in oklab, var(--h2) calc(var(--on) * 100%), var(--s2));
  --x3: color-mix(in oklab, var(--h3) calc(var(--on) * 100%), var(--s3));
  --x4: color-mix(in oklab, var(--h4) calc(var(--on) * 100%), var(--s4));
  background: linear-gradient(29deg, var(--x1) 0%, var(--x2) 38%, var(--x3) 74%, var(--x4) 100%);
  clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%);
  transition: --x1 var(--bt-d) var(--bt-e), --x2 var(--bt-d) var(--bt-e), --x3 var(--bt-d) var(--bt-e), --x4 var(--bt-d) var(--bt-e);
}
html body:not(.panel-body) .btn svg { width: 16px; height: 16px; flex: none; transform: none; transition: none; }
html body:not(.panel-body) .btn[hidden], html body:not(.panel-body) .ck__b[hidden] { display: none !important; }

/* ---------- Primär: Kontur (P7), kompakt ---------- */
html body:not(.panel-body) :is(.btn:not(.btn--line), .ck__b--main) {
  /* Runde 11 (Rudi): Inhalt größer statt Luft, gleicher Rahmen. Text 16,5px, Slash 17px, Pfeil 16px; Rand innen 14px */
  --bt-h: 44px; --bt-px: 14px; --bt-gh: 17px; --bt-gv: 9px; --bt-fw: 1.5px; --bt-pz: 0;
  --bt-sx: var(--bt-px);
  justify-content: center; gap: 9px; height: var(--bt-h);
  padding: 0 var(--bt-px) 0 calc(var(--bt-px) + var(--bt-gh) + var(--bt-gv));
  font-size: 16.5px; line-height: 1;
  box-shadow: inset 0 0 0 calc(var(--bt-fw) + .5px * var(--on)) var(--bt-f);
  background: color-mix(in oklab, var(--bt-f) calc(var(--bt-pz) * 8%), transparent);
  transition: box-shadow .25s var(--bt-e), background-color .12s linear;
}
/* Trefferfläche mindestens 44px, auch wenn der Rahmen kleiner ist */
html body:not(.panel-body) :is(.btn:not(.btn--line), .ck__b--main)::before {
  left: 0; right: 0; top: min(0px, (var(--bt-h) - 44px) / 2); bottom: min(0px, (var(--bt-h) - 44px) / 2); pointer-events: auto; z-index: -1;
}
html body:not(.panel-body) .btn.btn--sm:not(.btn--line), html body:not(.panel-body) .btn.hd__cta:not(.btn--line) { --bt-h: 38px; --bt-px: 11px; --bt-gh: 14.5px; --bt-gv: 8px; gap: 7px; font-size: 15px; }
html body:not(.panel-body) .btn--sm:not(.btn--line) svg { width: 14px; height: 14px; }

/* ---------- Sekundär: Textbutton „Leitstrich“ (Text 1) ---------- */
html body:not(.panel-body) :is(.btn--line, .ck__b--ghost, .ck__b--alt) {
  --bt-h: 54px; --bt-gh: 17px; --bt-gv: 11px; --bt-pr: 6px; --bt-ul: .8em; --bt-lw: 1.5px; --bt-sx: 1px;
  gap: 9px; height: var(--bt-h); min-height: 44px;
  padding: 0 var(--bt-pr) 0 calc(var(--bt-sx) + var(--bt-gh) + var(--bt-gv)); font-size: 16.5px; line-height: 1;
}
/* Linie: in Ruhe nicht da, aktiv zieht sie vom Slash aus nach rechts */
html body:not(.panel-body) :is(.btn--line, .ck__b--ghost, .ck__b--alt)::before {
  z-index: -1; left: calc(var(--bt-sx) + var(--bt-gh) + var(--bt-gv)); right: var(--bt-pr); top: calc(50% + var(--bt-ul)); height: var(--bt-lw);
  background: var(--bt-ln); transform: scaleX(var(--lon)); transform-origin: 0 50%;
  transition: transform var(--bt-d) var(--bt-e);
}
html body:not(.panel-body) .btn--line.btn--sm { --bt-h: 44px; --bt-gh: 14.5px; --bt-gv: 10px; font-size: 15px; }
html body:not(.panel-body) .btn--line.btn--sm svg { width: 14px; height: 14px; }

/* ---------- Rahmen- und Textbutton nebeneinander: eine Mittellinie, eine Grundlinie (Rudi R11) ----------
   Beide Rollen haben line-height 1 und dieselbe Schriftgröße je Stufe (16,5 normal, 15 klein). Die Zeile zentriert,
   damit Text, Slash und Pfeil beider Buttons auf derselben Höhe sitzen, egal wie hoch die Trefferflächen sind. */
html body:not(.panel-body) :has(> :is(.btn:not(.btn--line), .ck__b--main)):has(> :is(.btn--line, .ck__b--alt)) { align-items: center; }

/* ---------- Zustände: nur der Schalter ---------- */
html body:not(.panel-body) :is(.btn, .ck__b):is(.is-hover, .is-tap, .is-focus, .is-press, :active),
html:not(.ptr) body:not(.panel-body) :is(.btn, .ck__b):focus-visible { --on: 1; --lon: 1; }
@media (hover: hover) {
  html body:not(.panel-body) :is(.btn, .ck__b):hover { --on: 1; --lon: 1; }
}
html body:not(.panel-body) :is(.btn, .ck__b):is(:focus-visible, .is-focus) { outline: none; text-decoration: none; }
html body:not(.panel-body) :is(.btn, .ck__b):is(:hover, :focus-visible)::before { opacity: 1; }
/* Gedrückt */
html body:not(.panel-body) :is(.btn:not(.btn--line), .ck__b--main):is(:active, .is-press) { --bt-pz: 1; }
html body:not(.panel-body) :is(.btn--line, .ck__b--ghost, .ck__b--alt):is(:active, .is-press) { opacity: .8; }
/* Deaktiviert */
html body:not(.panel-body) :is(.btn, .ck__b):is(:disabled, [aria-disabled="true"]) {
  pointer-events: none; cursor: default; --on: 0 !important; --lon: 0 !important; --bt-pz: 0 !important;
  --bt-c: #8b969e; --bt-f: rgba(15, 32, 45, .22); --s1: #b7bec3; --s2: #b7bec3; --s3: #cfd4d8; --s4: #cfd4d8;
}

/* ---------- Kopfzeile: folgt der Kopfzeilenfarbe ---------- */
@media (max-width: 1023px) and (min-width: 340px) {
  html body:not(.panel-body) .hd__cta.hd__cta--portal { --bt-h: 36px; --bt-px: 9px; --bt-gh: 13px; --bt-gv: 7px; font-size: 14px; gap: 6px; }
}
/* Breite folgt dem Inhalt, auch wo das Raster streckt */
html body:not(.panel-body) .fx__send .btn { justify-content: center; width: fit-content; }

/* ---------- Ton „dunkel“: Film, dunkle Bänder, Verlauf, Menü, Cookie-Banner ---------- */
html body:not(.panel-body) :is(.btn, .ck__b):where(.btn--light, .on-dark .btn, .hero .btn, .sent .btn, .sigfs .btn, .fx-done .btn, .menu .btn, .hd.is-dark:not(.is-solid) .hd__cta, body.menu-open .hd__cta, .ck .ck__b) {
  --bt-c: #fff; --bt-f: #fff; --bt-ln: #e2b07f;
  /* Ruhe: Markenverlauf auf dunkel; aktiv: fast weiß (heller) */
  --s1: #6f8496; --s2: #b9875f; --s3: #e2b07f; --s4: #f6d3ad;
  --h1: #f4ece4; --h2: #ffffff; --h3: #ffffff; --h4: #ffffff;
}
/* R13 (Rudi): Eine Regel für alle Rahmen-Buttons auf dunklem oder farbigem Grund: in Ruhe der normale Kupfer-Verlauf,
   aktiv (Hover, Fokus, Fingertipp direkt am Button) weiß. Keine Ausnahme mehr mit weißem oder schwarzem Ruhe-Slash.
   Auf Kupferflächen (Leistungs-Kopf, gezündete Kopfzeile) ist das der Marken-Verlauf von Tinte zu Kupfer, der dort sichtbar bleibt. */
html body:not(.panel-body) .btn:where(.svc-hero .btn) { --s1: #0f202d; --s2: #2d4353; --s3: #b9875f; --s4: #f1c398; }
/* Kopfzeile „Projekt anfragen“ und „Zum Kundenportal“: Der Slash reagiert nur auf den Button selbst (Hover, Fokus, Fingertipp).
   Das Rübergehen über die Kopfzeile (Licht-Zelle, .is-lit) ändert nur den Grund: der Slash bleibt in Ruhe beim normalen Verlauf.
   Dunkler Film, Licht-Zelle, offenes Menü, dunkles Milchglas: aktiv weiß. Heller Grund ohne Licht-Zelle (nur Fingertipp mobil):
   aktiv helles Kupfer bis Weiß, reines Weiß verschwände dort auf dem weißen Milchglas. */
html body:not(.panel-body) .btn.hd__cta { --h1: #e2b07f; --h2: #f1c398; --h3: #f6d3ad; --h4: #ffffff; }
html body:not(.panel-body) .btn.hd__cta:where(.hd.is-dark:not(.is-solid) *, .hd.is-lit *, .hd.is-glass *, body.menu-open *) { --h1: #ffffff; --h2: #ffffff; --h3: #ffffff; --h4: #ffffff; }
/* Gezündete Kopfzeile: nur Schrift und Rahmen werden weiß, der Slash behält seinen Ruhe-Verlauf (hell: Tinte zu Kupfer, über dunklem Film: Kupfer) */
html body:not(.panel-body) .btn.hd__cta:where(.hd.is-lit *) { --bt-c: #fff; --bt-f: #fff; --bt-ln: #e2b07f; }
html body:not(.panel-body) .btn.hd__cta:where(body.menu-open *) { --s1: #6f8496; --s2: #b9875f; --s3: #e2b07f; --s4: #f6d3ad; }
/* Verlaufsflächen (Bestätigung, Formular fertig): Linie in Weiß, Kupfer hätte dort zu wenig Abstand */
html body:not(.panel-body) .btn:where(.sent *, .fx-done *) { --bt-ln: #fff; }
html body:not(.panel-body) :is(.btn, .ck__b):where(.btn--light, .on-dark *, .hero *, .ck *):is(:disabled, [aria-disabled="true"]) {
  --bt-c: rgba(255, 255, 255, .45); --bt-f: rgba(255, 255, 255, .25); --s1: #4f6577; --s2: #4f6577; --s3: #6f8496; --s4: #6f8496;
}

html body:not(.panel-body) .ck__b { display: inline-flex; }
/* ---------- Cookie-Banner: „Alle akzeptieren“ und „Nur notwendige“ gleich groß, beide auf der ersten Ebene ---------- */
html body:not(.panel-body) .ck .ck__b--main { --bt-h: 44px; --bt-px: 14px; --bt-gh: 14.5px; --bt-gv: 9px; gap: 7px; font-size: 15px; width: fit-content; flex: 0 1 auto; }
html body:not(.panel-body) .ck .ck__acts { column-gap: 22px; align-items: center; }
/* „Nur notwendige“: gleicher Rahmen, nur ruhiger, klar lesbar */
/* „Nur notwendige“ (Rudi R11): Textbutton rechts, gleich hoch (44px), gleiche Schrift, voll weiß. Damit die Ablehnung so
   leicht erkennbar bleibt wie die Zustimmung (DSGVO, gleichwertige Wahl auf der ersten Ebene), liegt die Linie schon in
   Ruhe dünn darunter; aktiv zieht die kräftige Kupferlinie darüber. */
html body:not(.panel-body) .ck .ck__b--alt {
  --bt-h: 44px; --bt-gh: 14.5px; --bt-gv: 9px; --bt-pr: 2px; font-size: 15px; width: fit-content; flex: 0 1 auto; min-height: 44px;
  --s1: #6f8496; --s2: #b9875f; --s3: #e2b07f; --s4: #f6d3ad;
  background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)) no-repeat;
  background-size: calc(100% - var(--bt-sx) - var(--bt-gh) - var(--bt-gv) - var(--bt-pr)) 1px;
  background-position: calc(var(--bt-sx) + var(--bt-gh) + var(--bt-gv)) calc(50% + var(--bt-ul) + .25px);
}
html body:not(.panel-body) .ck .ck__b--ghost { --bt-h: 44px; --bt-gh: 12px; --bt-gv: 10px; --bt-pr: 4px; --bt-lw: 1px; font-size: 14px; --bt-c: rgba(255, 255, 255, .86); --s1: #6f8496; --s2: #9fb0bd; --s3: #d5dde3; --s4: #ffffff; }
html body:not(.panel-body) .ck.is-more .ck__b--ghost { --bt-gh: 13px; --bt-lw: 1.5px; --bt-c: #fff; --s1: #6f8496; --s2: #b9875f; --s3: #f1c398; --s4: #ffffff; font-size: 14.5px; }

/* Prüfform für das Button-Audit (council/r5/audit/btn-audit.mjs): das Element selbst */
html body:not(.panel-body) :is(.btn, .ck__b) { --btn-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- Ruhige Bewegung (html.rm, Footer-Schalter oder Systemeinstellung): keine Animation ---------- */
html.rm body:not(.panel-body) :is(.btn, .ck__b), html.rm body:not(.panel-body) :is(.btn, .ck__b)::before, html.rm body:not(.panel-body) :is(.btn, .ck__b)::after, html.rm body:not(.panel-body) .btn svg { transition: none !important; animation: none !important; }
html.rm body:not(.panel-body) :is(.btn, .ck__b):is(:hover, .is-hover, .is-tap) { --lon: 0; }
html.rm body:not(.panel-body) :is(.btn, .ck__b).is-focus, html.rm:not(.ptr) body:not(.panel-body) :is(.btn, .ck__b):focus-visible { --lon: 1; }

/* Hohe Kontraste (Windows): sichtbarer Fokus über Systemfarben */
@media (forced-colors: active) {
  html body:not(.panel-body) :is(.btn, .ck__b) { box-shadow: none; border: 1px solid ButtonText; }
  html body:not(.panel-body) :is(.btn--line, .ck__b--ghost) { border: 0; }
  html body:not(.panel-body) :is(.btn, .ck__b):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Cookie „Alle akzeptieren“ sticht heraus: gefüllte Fläche (Rudi, Runde 10). „Nur notwendige“ bleibt gleich groß
   und als Rahmen klar sichtbar auf der ersten Ebene. Slash auf der hellen Fläche: Kupfer, aktiv dunkler (Tinte). */
html body:not(.panel-body) .ck .ck__b--main {
  --bt-c: #0f202d; --bt-f: #fff;
  --s1: #b9875f; --s2: #c8935f; --s3: #b9875f; --s4: #a5764f;
  --h1: #0f202d; --h2: #0f202d; --h3: #0f202d; --h4: #0f202d;
  background: #fff; color: #0f202d;
}
html body:not(.panel-body) .ck .ck__b--main:is(:active, .is-press) { background: #e9edf0; }