/* Code Hive GmbH: Bausteine. Werte aus docs/styleguide.md, Kapitel 07. */

/* ================= Schaltflaechen ================= */
.btn {
  --btn-bg: var(--hive-tuerkis);
  --btn-fg: var(--tiefsee);
  --btn-border: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 48px; padding: 14px 28px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem;
  letter-spacing: 0.04em; white-space: nowrap; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-border); border-radius: 999px; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform 200ms var(--ease); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--weiss); opacity: 0;
  transform: translateY(101%); transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover::after { transform: translateY(0); opacity: 0.18; }
  .btn:hover .icon { transform: translateX(4px); }
}
.btn:active { transform: scale(0.97); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--band-heading, var(--petrol));
  --btn-border: var(--hive-tuerkis);
}
@media (hover: hover) and (pointer: fine) {
  .btn--secondary:hover { --btn-bg: var(--hive-tuerkis); --btn-fg: var(--tiefsee); }
  .btn--secondary:hover::after { opacity: 0; }
}
/* Dritte Fassung: auf Foto und Video. Liquid-Glass-Web-Approximation, kein offizielles Apple-Material. */
.btn--onmedia {
  --btn-bg: rgb(15 59 70 / 0.6);
  --btn-fg: var(--weiss);
  --btn-border: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
@media (hover: hover) and (pointer: fine) {
  .btn--onmedia:hover { --btn-bg: rgb(15 59 70 / 0.82); }
}
.btn--sm { min-height: 40px; padding: 10px 20px; font-size: 0.8125rem; }
.btn--block { display: flex; width: 100%; }
/* Auf Telefonen darf die Beschriftung umbrechen statt ueberzulaufen. Mit
   white-space: nowrap schob "Erstgespraech vereinbaren" (320px) und "Send a
   speculative application" (375px) die ganze Seite seitlich weg. Umgebrochen
   wird nur, wenn eine Zeile nicht reicht. */
@media (max-width: 559px) {
  .btn { max-width: 100%; white-space: normal; }
}
/* Auf 320px zusaetzlich kleiner setzen. Gemessen: 14px Schrift und 16px
   Innenabstand ergeben 221px Beschriftung in 232px Platz, also bleibt
   "Erstgespraech vereinbaren" einzeilig. */
@media (max-width: 359px) {
  .btn { padding-inline: 16px; font-size: 0.875rem; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Textlink mit Pfeil */
.linkarrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  color: var(--band-link); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.linkarrow .icon { width: 1em; height: 1em; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .linkarrow:hover .icon { transform: translateX(4px); } }

/* ================= Liquid Glass ================= */
/* Liquid-Glass-Web-Approximation, kein offizielles Apple-Material.
   Nur ueber Foto, Video oder dunkler Flaeche einsetzen. */
.glass {
  position: relative; isolation: isolate;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)), rgb(15 59 70 / 0.44);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 18px 60px rgb(7 31 38 / 0.32);
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgb(255 255 255 / 0.32), transparent 38%);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgb(15 59 70 / 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 59 70 / 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ================= Karten ================= */
.card {
  background: var(--band-surface); border: 1px solid var(--band-line);
  border-radius: var(--radius); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.card__icon { color: var(--band-accent); }
.card h3, .card h4 { margin-bottom: 2px; }
.card p { color: var(--band-muted); }

/* ================= Header ================= */
/* Das Menue schwebt als Pille ueber dem Inhalt, nicht als Leiste ueber die
   volle Breite. Die Leiste selbst ist unsichtbar und laesst Klicks durch,
   nur die Pille faengt sie ab. */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding-block: var(--header-gap);
  pointer-events: none;
  transition: padding-block 220ms var(--ease);
}
.header__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--header-h);
  padding-inline: clamp(14px, 1.6vw, 22px);
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(15 59 70 / 0.58);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 10px 34px rgb(7 31 38 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.12);
  transition: height 220ms var(--ease), background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .header__inner { background: rgb(15 59 70 / 0.97); } }
.header.is-scrolled { padding-block: 10px; }
.header.is-scrolled .header__inner {
  height: 62px; background: rgb(10 41 49 / 0.82);
  box-shadow: 0 12px 38px rgb(7 31 38 / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.header__logo { display: flex; align-items: center; flex: none; }
/* Im Kopf laeuft logo-main-ui-light.svg, die Sperrflaeche mit Wortmarke und
   Claim "Gemeinsam digital.", beides weiss. Seitenverhaeltnis 4,08:1 statt
   3,1:1, deshalb sind die Hoehen unter 560px kleiner als vorher: Das Logo wird
   breiter, die drei 44px-Knoepfe daneben bleiben. Gemessen passt es so bis
   320px, darunter uebernimmt das Signet. */
/* Hoehenstaffel. Das Seitenverhaeltnis der Sperrflaeche ist 4,08:1, das Logo
   ist also gut viermal so breit wie hoch. Daneben stehen drei Knoepfe zu je 44px, die
   aus Gruenden der Bedienbarkeit nicht kleiner werden. Gemessen passt in die
   Pille: ab 560px 52px Logo, ab 420px 40px, darunter 32px. Unter 360px zeigt
   <picture> nur noch das Signet. */
.header__logo img { height: 52px; width: auto; transition: height 220ms var(--ease); }
.header.is-scrolled .header__logo img { height: 40px; }
@media (max-width: 559px) { .header__logo img { height: 40px; } .header.is-scrolled .header__logo img { height: 36px; } }
@media (max-width: 419px) { .header__logo img { height: 32px; } .header.is-scrolled .header__logo img { height: 30px; } }
.header__spacer { flex: 1 1 auto; }

.nav { position: relative; display: none; }
/* Nachgemessen am 16.09.2026: Bei 1280px lief der Kontaktknopf um 35px aus der
   Pille, das war schon vor der groesseren Wortmarke so. Menuepunkte (588px),
   Logo, Sprach- und Ansichtsknopf, Kontaktknopf und Menuesymbol brauchen
   zusammen 1360px. Darunter uebernimmt das Menuesymbol, wie bisher schon
   zwischen 1080 und 1280. */
@media (min-width: 1360px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 0; font-family: "LFT Etica Mono", ui-monospace, monospace; font-size: 0.75rem; }
.nav__sep { color: rgb(255 255 255 / 0.4); padding-inline: 2px; user-select: none; }
/* 5px statt 7px waagerecht: Die Pille ist ab etwa 1368px durch die
   max-width von .wrap gedeckelt und wuchs nicht mehr mit. Mit 7px blieben
   dauerhaft nur 4px Luft bis zum Rand, das traegt keine Schriftvariante. */
.nav__link {
  display: block; padding: 8px 5px; color: var(--weiss); text-decoration: none; white-space: nowrap;
  border-radius: 999px; transition: color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--hive-tuerkis); } }
.nav__link[aria-current="true"] { color: var(--hive-tuerkis); }
/* Gleitender Indikator unter dem aktiven Menuepunkt */
.nav__indicator {
  position: absolute; bottom: -2px; left: 0; height: 2px; width: 0;
  background: var(--hive-tuerkis); border-radius: 2px; opacity: 0;
  transition: transform 240ms var(--ease), width 240ms var(--ease), opacity 200ms var(--ease);
  pointer-events: none;
}

.header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
/* Unter 360px zeigt <picture> nur noch das Signet (siehe Kopfbereich im HTML).
   Die Wortmarke waere dort unter 10px Versalhoehe, also ohnehin nicht lesbar,
   und drei 44px-Knoepfe daneben passen sonst nicht in die Pille. Diese Regeln
   stehen bewusst nach .header__actions, sonst ueberschreibt die spaetere
   gap-Angabe den kleineren Abstand wieder. */
@media (max-width: 559px) { .header__inner { gap: var(--space-2); } .header__actions { gap: 6px; } }
@media (max-width: 359px) {
  .header__logo img { max-height: 34px; }
  .header.is-scrolled .header__logo img { max-height: 30px; }
  .header__inner { padding-inline: 10px; }
}
.header .btn { min-height: 42px; padding: 10px 22px; font-size: 0.8125rem; }
/* Der Kontaktknopf ist 256px breit. Neben dem Logo und den drei runden
   Knoepfen passt er erst ab 760px in die Pille, vorher war er ab 560px
   eingeblendet und wurde bis etwa 680px rechts abgeschnitten. Wer ihn dort
   nicht sieht, erreicht das Formular ueber das Menue. */
@media (max-width: 759px) { .header .btn--cta { display: none; } }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.22);
  background: transparent; color: var(--weiss); cursor: pointer;
  transition: background-color 200ms var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { background: rgb(255 255 255 / 0.12); } }
.iconbtn:active { transform: scale(0.94); }
.iconbtn .icon { width: 20px; height: 20px; }


/* Sprachumschalter im Kopfbereich, direkt neben dem Hell-Dunkel-Knopf.
   Ein einzelner Knopf mit dem Kuerzel der jeweils anderen Sprache. Zwei
   Felder nebeneinander waren zu breit fuer diese Kopfzeile. */
.langswitch {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: transparent; color: var(--weiss); text-decoration: none;
  font-family: "LFT Etica Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.04em;
  transition: background-color 200ms var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .langswitch:hover { background: rgb(255 255 255 / 0.12); } }
.langswitch:active { transform: scale(0.94); }
.langswitch:focus-visible { outline: 2px solid var(--hive-tuerkis); outline-offset: 2px; }
.theme-toggle .icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: block; }
}
.nav-toggle { display: inline-flex; }
/* Muss dieselbe Grenze haben wie .nav, sonst gaebe es zwischen 1280 und
   1360px weder Menuepunkte noch Menuesymbol. */
@media (min-width: 1360px) { .nav-toggle { display: none; } }

/* Mobiles Menue: Slide-in von rechts.
   Die Huelle ist fix und schneidet ab, damit das geschlossene Panel keine
   horizontale Seitenbreite erzeugt (sonst waechst der Viewport auf Mobilgeraeten). */
.navpanel-shell {
  position: fixed; inset: 0; z-index: 110; overflow: hidden; pointer-events: none;
}
.navpanel-shell:has(.navpanel[data-open="true"]) { pointer-events: auto; }
.navpanel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw); pointer-events: auto;
  background: var(--tiefsee); color: var(--weiss);
  padding: var(--space-5) var(--space-5) var(--space-7);
  transform: translateX(100%); transition: transform 260ms var(--ease);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: -20px 0 60px rgb(7 31 38 / 0.4);
}
.navpanel[data-open="true"] { transform: translateX(0); }
.navpanel__head { display: flex; align-items: center; justify-content: space-between; }
.navpanel__list { display: flex; flex-direction: column; gap: 2px; font-family: "LFT Etica Mono", ui-monospace, monospace; }
.navpanel__list a { display: block; padding: 12px 0; color: var(--weiss); text-decoration: none; border-bottom: 1px solid var(--petrol-tief); }
.navpanel__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.navpanel__foot a.phone { color: var(--hive-tuerkis); font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.scrim {
  position: fixed; inset: 0; z-index: 105; background: rgb(7 31 38 / 0.6);
  opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ================= Marquee (Logoband) ================= */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-inline: clamp(8px, 2vw, 20px); }
/* Die viewBox der Logodateien ist auf den Inhalt beschnitten, deshalb fuellt jedes Logo
   die Box aus. Breite Wortmarken begrenzt die Breite, hohe Wappen die Hoehe. */
.marquee img { height: clamp(46px, 5.4vw, 62px); width: clamp(124px, 14vw, 186px); object-fit: contain; opacity: 0.9; filter: grayscale(1); transition: opacity 200ms var(--ease), filter 200ms var(--ease); }
:root[data-theme="dark"] .marquee img, .band--dark .marquee img { filter: grayscale(1) invert(1) brightness(1.6); opacity: 0.75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marquee img { filter: grayscale(1) invert(1) brightness(1.6); } }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Das Logoband laeuft auf allen Geraeten (Entscheidung Operator 2026-09-16).
   Angehalten wird es ueber den Schalter rechts, das erfuellt WCAG 2.2.2. */
.marquee__wrap { position: relative; }
.marquee__track.is-paused { animation-play-state: paused; }
.marquee__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--band-line); background: var(--band-bg); color: var(--band-muted);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .marquee__btn:hover { color: var(--band-heading); border-color: var(--band-accent); } }
.marquee__btn-i { width: 16px; height: 16px; fill: currentColor; }
.marquee__btn .is-play { display: none; }
.marquee__btn[aria-pressed="true"] .is-pause { display: none; }
.marquee__btn[aria-pressed="true"] .is-play { display: inline; }

/* ================= Akkordeon ================= */
.acc { border-top: 1px solid var(--band-line); }
.acc__item { border-bottom: 1px solid var(--band-line); }
.acc__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-text); font-weight: 700; font-size: var(--type-h3-size);
  color: var(--band-heading); transition: color 200ms var(--ease);
}
.acc__item summary::-webkit-details-marker { display: none; }
/* min-width: 0, sonst kann das Flex-Element nicht unter die Breite seines
   laengsten Wortes schrumpfen. Bei "Digitalisierungsfahrplan" schob es auf
   320px den Pfeil aus der Zeile und die Seite seitlich weg. */
.acc__item summary h3 { font: inherit; color: inherit; margin: 0; letter-spacing: normal; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .acc__item summary:hover { color: var(--band-link); } }
.acc__item summary .icon { color: var(--band-accent); transition: transform 240ms var(--ease); margin-top: 3px; flex: none; }
.acc__item[open] summary .icon { transform: rotate(180deg); }
.acc__body { padding-bottom: var(--space-4); }
.acc__body p + p { margin-top: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .acc__item[open] .acc__body { animation: accIn 260ms var(--ease); }
  @keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ================= Formular ================= */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 0.9375rem; color: var(--band-heading); }
.field label .req { color: var(--band-link); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--band-line); background: var(--band-surface-2, var(--weiss));
  color: var(--band-text); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.band--dark .field input, .band--dark .field textarea, .band--dark .field select { background: var(--nacht); border-color: var(--petrol); }
.field input::placeholder, .field textarea::placeholder { color: var(--band-muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--hive-tuerkis); box-shadow: 0 0 0 3px rgb(42 181 185 / 0.28);
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: var(--type-klein-size); color: var(--band-muted); }
.field__error { font-size: var(--type-klein-size); color: #C0392B; font-weight: 700; }
.band--dark .field__error { color: #FF9A8B; }
.field--check { display: flex; gap: var(--space-2); align-items: flex-start; }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--hive-tuerkis); }
.field--check label { font-weight: 400; font-size: var(--type-klein-size); line-height: 1.5; color: var(--band-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-weight: 700; display: none; }
.form__status[data-state="ok"] { display: block; background: var(--tuerkis-wash); color: var(--tiefsee); }
.form__status[data-state="error"] { display: block; background: #FBE9E7; color: #8A2317; }

/* ================= Consent / Zwei-Klick ================= */
.twoclick {
  display: grid; place-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-6) var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--band-line); background: var(--band-surface);
  min-height: 320px;
}
.twoclick p { max-width: 46ch; color: var(--band-muted); }
.embed-frame { width: 100%; border: 0; border-radius: var(--radius); display: block; }

/* ================= Footer ================= */
.footer { background: var(--tiefsee); color: var(--nebel); padding-block: var(--space-8) var(--space-5); }
:root[data-theme="dark"] .footer { background: var(--nacht-tief); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer { background: var(--nacht-tief); } }
.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.footer h2, .footer h3 {
  font-family: "LFT Etica Mono", ui-monospace, monospace; font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hive-tuerkis); margin-bottom: var(--space-3);
}
.footer a { color: var(--nebel); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--hive-tuerkis); } }
.footer__list { display: grid; gap: 8px; }
.footer address { font-style: normal; line-height: 1.7; }
/* 44px waren zu klein: Versalhoehe 11px, der Claim "Gemeinsam digital."
   darunter nur 7px. Bei 64px sind es 17px und 10px. */
.footer__logo { height: 64px; width: auto; margin-bottom: var(--space-3); }
.social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.social a {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid var(--petrol); border-radius: 999px; transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .social a:hover { background: var(--hive-tuerkis); border-color: var(--hive-tuerkis); color: var(--tiefsee); } }
.footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--petrol-tief);
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  font-size: var(--type-klein-size); color: var(--dunst);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__badge { height: 56px; width: auto; opacity: 0.9; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ================= Cookie-Banner ================= */
.consent {
  position: fixed; z-index: 200; inset-inline: var(--space-3); inset-block-end: var(--space-3);
  max-width: 560px; margin-inline: auto; padding: var(--space-5);
  color: var(--weiss); border-radius: var(--radius);
}
.consent h2 { font-size: 1.25rem; color: var(--weiss); margin-bottom: var(--space-2); }
.consent p { font-size: var(--type-klein-size); color: var(--dunst); max-width: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.consent__actions .btn { flex: 1 1 200px; }
.consent__cats { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.consent__cat { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--type-klein-size); }
.consent__cat input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--hive-tuerkis); }
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consentIn 320ms var(--ease); }
  @keyframes consentIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* ================= Siegel =================
   Eigene Marke der Code Hive GmbH, kein Prüfsiegel einer fremden Stelle.
   Inline-SVG, damit LFT Etica Mono greift. */
.seal { width: clamp(132px, 15vw, 164px); height: auto; flex: none; }
.seal__ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.28; }
.seal__ring--in { stroke: var(--band-accent, var(--hive-tuerkis)); stroke-width: 1.5; opacity: 1; }
.seal__arc {
  font-family: "LFT Etica Mono", ui-monospace, monospace; font-weight: 600;
  font-size: 13px; letter-spacing: 0.16em; fill: var(--band-accent, var(--hive-tuerkis));
  text-transform: uppercase;
}
.seal__arc--bot { font-size: 10px; letter-spacing: 0.14em; fill: var(--band-muted, var(--schiefer)); }
.seal__rule { stroke: var(--band-accent, var(--hive-tuerkis)); stroke-width: 1; opacity: 0.5; }
.seal__c1 {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  fill: var(--band-heading, var(--petrol)); letter-spacing: -0.01em;
}
.seal__c2 {
  font-family: "LFT Etica Mono", ui-monospace, monospace; font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.18em; fill: var(--band-muted, var(--schiefer)); text-transform: uppercase;
}
.seal__dot { fill: var(--band-accent, var(--hive-tuerkis)); }
.seal--footer { width: 112px; color: var(--nebel); }
.seal--footer .seal__c1 { fill: var(--weiss); }
.seal--footer .seal__arc { fill: var(--hive-tuerkis); }
.seal--footer .seal__arc--bot, .seal--footer .seal__c2 { fill: var(--dunst); }

/* Siegel neben Text */
.sealrow { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.sealrow > div { flex: 1 1 280px; }

/* ================= Marken ================= */
.brands { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.brand {
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--band-surface); border: 1px solid var(--band-line);
  display: grid; gap: 6px;
}
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--band-heading); }
.brand p { font-size: 0.9375rem; color: var(--band-muted); }
.footer__seals { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }