/* Aufwertung der Startseite (Look und Bewegung im Stil von 21st.dev), liegt über dem Webflow-Stil.
   Nur Transform, Opacity, Clip-Path und Farben werden animiert. Alles Bewegte hat einen Ruhezustand
   für "Bewegung reduzieren". Die Texte und der Aufbau der Seite bleiben unverändert. */

:root {
  --au-gold: #dac78d;
  --au-gold-hell: #ebd9a1;
  --au-gold-dunkel: #926f34;
  --au-ink: #111111;
  --au-radius: var(--_ui-styles---radius--large, 12px);
  --au-ease-out: cubic-bezier(.22, 1, .36, 1);
  --au-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --au-ease-inout: cubic-bezier(.76, 0, .24, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Kopfzeile: bleibt oben, wird beim Scrollen kompakt und leicht durchscheinend ---------- */
.navbar1_component-2 {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color .3s ease, box-shadow .3s ease, min-height .3s var(--au-ease-out);
}
.navbar1_component-2.au-gescrollt {
  background-color: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, .06), 0 14px 34px -24px rgba(17, 17, 17, .28);
  min-height: 3.75rem;
}
.navbar1_link-2 { position: relative; transition: color .2s ease; }
.au-lesebalken {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--au-gold-dunkel), var(--au-gold-hell) 55%, var(--au-gold));
  transform: scaleX(0); transform-origin: left center; transition: transform .12s linear;
}
.navbar1_link-2::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .55rem; height: 2px;
  background: var(--au-gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--au-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .navbar1_link-2:hover::after { transform: scaleX(1); }
}

/* ---------- Buttons: Glanz beim Darüberfahren, geben beim Drücken nach ---------- */
.button {
  position: relative;
  overflow: hidden;
  transition: transform .14s var(--au-ease-out), box-shadow .3s ease, background-color .2s ease, translate .2s ease-out;
}
.button::after {
  content: ""; position: absolute; inset: -20% -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .62) 50%, transparent 62%);
  transform: translateX(-70%);
  transition: transform .8s var(--au-ease-out);
}
.button > div { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(146, 111, 52, .6); }
  .button:hover::after { transform: translateX(70%); }
}
.button:active { transform: scale(.97); }
.button.au-zurueck { transition: transform .14s var(--au-ease-out), box-shadow .3s ease, background-color .2s ease, translate .6s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Startbereich: feines Punktraster und warmer Lichtschein hinter der Überschrift ---------- */
.section_header127 { position: relative; overflow: hidden; }
.section_header127::before,
.section_header127::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.section_header127::before {
  background-image: radial-gradient(rgba(17, 17, 17, .16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 28% 22%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 70% at 28% 22%, #000 10%, transparent 72%);
  opacity: .55;
}
.section_header127::after {
  inset: auto; left: 16%; top: 28%; width: 1000px; height: 660px; max-width: 92vw;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 217, 161, .44), rgba(235, 217, 161, .16) 48%, transparent 76%);
  will-change: transform;
  animation: au-schein-a 18s ease-in-out infinite alternate;
}
.section_header127 > .padding-global { position: relative; z-index: 1; }
/* zweiter Lichtfleck rechts unten, liegt hinter dem Inhalt der Startfläche */
.section_header127 > .padding-global::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 86%; top: 62%; width: 820px; height: 600px; max-width: 92vw;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(218, 199, 141, .36), rgba(218, 199, 141, .12) 48%, transparent 76%);
  will-change: transform;
  animation: au-schein-b 23s ease-in-out infinite alternate;
}
@keyframes au-schein-a {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-42%, -58%) scale(1.12); }
  100% { transform: translate(-56%, -46%) scale(.96); }
}
@keyframes au-schein-b {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-58%, -42%) scale(1.1); }
  100% { transform: translate(-44%, -56%) scale(.94); }
}

/* Wort-für-Wort-Überschrift: jedes Wort steigt aus seiner eigenen Zeile auf */
.au-wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.au-wort > span { display: inline-block; }
.au-wort > span.text-color-gold {
  -webkit-background-clip: text; background-clip: text;
  /* oben ein Lichtstreifen, der alle paar Sekunden durch das Wort läuft, darunter der gewohnte Goldverlauf */
  background-image:
    linear-gradient(100deg, rgba(255, 251, 235, 0) 42%, rgba(255, 251, 235, .92) 50%, rgba(255, 251, 235, 0) 58%),
    radial-gradient(circle closest-corner at 50% 100%, var(--main-1), var(--main-2-für-verlauf));
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 130% 0, 0 0;
  animation: au-schimmer 6.5s ease-in-out infinite;
}
@keyframes au-schimmer { 0%, 52% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }

/* Bild von Dennis: wird beim Laden aufgedeckt. Die Benachrichtigungs-Kärtchen bleiben wie im Original vor dem Foto. */
.header127_image-wrapper1 { position: relative; z-index: 1; }
.header127_image-wrapper2,
.header127_image-wrapper3 { z-index: 2; }
.header127_image-wrapper1::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.header127_image-group { position: relative; }
.header127_image-wrapper2 > *,
.header127_image-wrapper3 > * {
  filter: drop-shadow(0 10px 24px rgba(17, 17, 17, .18));
}

/* ---------- Branchen: Karten leuchten unter dem Zeiger auf und heben sich leicht ---------- */
.layout237_item {
  position: relative;
  transition: transform .4s var(--au-ease-out), box-shadow .4s ease, border-color .4s ease;
}
.layout237_item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--au-mx, 50%) var(--au-my, 50%), rgba(235, 217, 161, .38), transparent 62%);
  opacity: 0; transition: opacity .4s ease;
}
.layout237_item .icon-1x1-large { transition: transform .45s var(--au-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .layout237_item:hover {
    transform: translateY(-5px);
    border-style: solid;
    border-color: rgba(218, 199, 141, .95);
    box-shadow: 0 30px 50px -28px rgba(17, 17, 17, .6), 0 0 0 1px rgba(235, 217, 161, .35);
    filter: none;
  }
  .layout237_item:hover::after { opacity: 1; }
  .layout237_item:hover .icon-1x1-large { transform: translateY(-4px) scale(1.07); }
  .layout237_item.cta-item:hover { box-shadow: 0 30px 50px -30px rgba(146, 111, 52, .45), 0 0 0 1px rgba(218, 199, 141, .6); }
}

/* ---------- Über Dennis: Foto bekommt einen weichen Lichtschein ---------- */
.header26_image-wrapper { position: relative; }
.header26_image-wrapper::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 60%; height: 55%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(235, 217, 161, .55), transparent);
  filter: blur(24px); pointer-events: none; z-index: 0;
}

/* ---------- Vergleich: die TALENTJAGD-Seite bekommt den goldenen Rahmen ---------- */
.layout18_content-right {
  position: relative;
  transition: box-shadow .4s ease, transform .4s var(--au-ease-out);
}
@media (min-width: 992px) {
  .layout18_content-right {
    box-shadow: 0 0 0 1px rgba(218, 199, 141, .75), 0 34px 70px -34px rgba(146, 111, 52, .45);
  }
}
.layout18_item { transition: transform .3s var(--au-ease-out); }

/* ---------- Buch: Lichtstrahl läuft um die dunkle Karte, das Buch schwebt ---------- */
@property --au-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta1_component_buchcover { position: relative; isolation: isolate; }
.cta1_component_buchcover::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: var(--au-radius); padding: 1.5px;
  background: conic-gradient(from var(--au-winkel), transparent 0 58%, rgba(235, 217, 161, .95) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cta1_image-wrapper { position: relative; perspective: 1000px; }
.cta1_image-wrapper::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(235, 217, 161, .5), transparent);
  filter: blur(30px); pointer-events: none; z-index: 0;
}
.cta1_image_buchcover_coming-soon { position: relative; z-index: 1; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .cta1_component_buchcover::before { animation: au-strahl 7s linear infinite; }
}
@keyframes au-strahl { to { --au-winkel: 360deg; } }

/* ---------- Ablauf: Bild bleibt stehen, die Schritte ziehen vorbei und leuchten der Reihe nach auf ---------- */
/* Seitliche Einblendungen dürfen auf dem Handy nie über den rechten Rand ragen (sonst zoomt die Seite heraus) */
.section_layout121, .section_layout18, .section_header26 { overflow-x: clip; }
@media (min-width: 992px) {
  .layout121_content { align-items: start; }
  .layout121_content-left { position: sticky; top: 6.5rem; }
}
.layout121_timeline-step { transition: opacity .45s ease; }
.au-ablauf-aktiv .layout121_timeline-step:not(.is-active) { opacity: .45; }
.layout121_timeline-icon-wrapper { border-radius: 50%; transition: box-shadow .45s ease, transform .45s var(--au-ease-out); }
.layout121_timeline-step.is-active .layout121_timeline-icon-wrapper {
  box-shadow: 0 0 0 3px rgba(218, 199, 141, .95), 0 0 32px rgba(218, 199, 141, .55);
  transform: scale(1.06);
}

/* ---------- Kundenstimmen: weiche Ränder am Laufband, Karten heben sich unter dem Zeiger ---------- */
.au-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.au-marquee .testimonial21_component {
  animation: au-laufband var(--au-lauf-dauer, 60s) linear infinite;
  will-change: transform;
}
@keyframes au-laufband { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--au-lauf, 135rem))); } }
.testimonial21_card {
  border-radius: 16px;
  transition: background-color .3s ease, box-shadow .3s ease, translate .3s var(--au-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .au-marquee:hover .testimonial21_component { animation-play-state: paused; }
  .testimonial21_card:hover {
    background-color: #fff;
    box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .35), 0 0 0 1px rgba(218, 199, 141, .5);
    translate: 0 -3px;
  }
}

/* ---------- Schlusswort: warmer Lichtschein hinter der Aussage ---------- */
.section_layout484 { position: relative; overflow: hidden; }
.section_layout484::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 70%; height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(235, 217, 161, .35), transparent); pointer-events: none;
}
.section_layout484 > .padding-global { position: relative; }

/* ---------- Fußzeile: großes TALENTJAGD, unten angeschnitten, fährt beim Ankommen hoch ---------- */
.footer4_component { overflow: hidden; }
.au-fuss-wort {
  margin-top: -3.25rem; margin-bottom: -.14em; overflow: hidden; text-align: center; white-space: nowrap;
  font-size: clamp(3.4rem, 13.2vw, 12.4rem); font-weight: 600; line-height: .86; letter-spacing: -.035em;
  user-select: none;
}
.au-fuss-wort > span {
  display: inline-block;
  background-image: linear-gradient(180deg, rgba(218, 199, 141, .62), rgba(218, 199, 141, .08));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Bewerbungs-Meldungen als echte Kärtchen (für Seiten mit eigenen Stellen, z. B. Pflege) ---------- */
.header127_image-wrapper2, .header127_image-wrapper3 { container-type: inline-size; }
.au-meldung {
  display: flex; align-items: center; gap: 3.3cqw; box-sizing: border-box; width: 100%;
  margin-top: .5rem; padding: 3.2cqw 3.8cqw; border-radius: 6.2cqw;
  background: rgba(37, 37, 37, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 3.5cqw; line-height: 1.25; text-align: left;
}
.au-meldung_icon { width: 10.3cqw; height: 10.3cqw; flex: none; border-radius: 2.4cqw; }
.au-meldung_text { flex: 1; min-width: 0; }
.au-meldung_kopf { display: flex; justify-content: space-between; gap: 1em; color: rgba(255, 255, 255, .62); font-size: .86em; margin-bottom: .1em; }
.au-meldung_titel { font-weight: 500; }

/* ---------- Branchen-Karten auf der Startseite führen zu den Branchen-Seiten ---------- */
.layout237_item .au-karte-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.au-karte-mehr { display: inline-flex; align-items: center; gap: .4em; margin-top: .25rem; font-size: .875rem; color: var(--au-gold-hell); }
.au-karte-mehr svg { width: 1em; height: 1em; transition: transform .3s var(--au-ease-out); }
.layout237_item:hover .au-karte-mehr svg { transform: translateX(4px); }
/* Bereiche-Karten auf den Branchen-Seiten: ohne Foto, dunkel mit Goldschein */
.layout237_item.au-ohne-foto {
  background-image: radial-gradient(circle closest-corner at 50% 0%, var(--gold-transparenz-28), transparent),
    linear-gradient(180deg, #2c2c2c, #121212);
}

/* ---------- Anfrage: kurzes Formular (Versand über Make) ---------- */
.section_anfrage { position: relative; overflow: hidden; border-top: 1px solid rgba(218, 199, 141, .35); background: linear-gradient(180deg, #fff, #faf7ee); }
.section_anfrage::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(235, 217, 161, .35), transparent);
}
.section_anfrage > .padding-global { position: relative; }
.au-anfrage_raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.au-anfrage_punkte { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.au-anfrage_punkte li { position: relative; padding-left: 2rem; }
.au-anfrage_punkte li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"), linear-gradient(139deg, var(--au-gold), var(--au-gold-hell) 40%, var(--au-gold));
  background-size: 62%, 100%; background-position: center; background-repeat: no-repeat;
}
.au-anfrage_kontakt a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--au-gold); }
.au-anfrage_formular {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0;
  background: #fff; border-radius: 1.25rem; padding: 2rem;
  box-shadow: 0 0 0 1px rgba(218, 199, 141, .75), 0 34px 70px -34px rgba(146, 111, 52, .45);
}
.au-feld { display: grid; gap: .35rem; grid-column: 1 / -1; }
.au-feld--halb { grid-column: auto; }
.au-feld label, .au-feld--haken span { font-size: .875rem; font-weight: 500; line-height: 1.4; }
.au-feld input, .au-feld select, .au-feld textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; margin: 0; border: 1px solid #d9d5c8; border-radius: .75rem;
  background: #fff; font: inherit; font-size: 1rem; color: var(--au-ink); transition: border-color .2s, box-shadow .2s;
}
.au-feld select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 1rem no-repeat; }
.au-feld textarea { min-height: 5.5rem; resize: vertical; }
.au-feld input::placeholder, .au-feld textarea::placeholder { color: #9a968c; }
.au-feld input:focus, .au-feld select:focus, .au-feld textarea:focus { outline: none; border-color: var(--au-gold-dunkel); box-shadow: 0 0 0 3px rgba(218, 199, 141, .45); }
.au-feld--fehler input, .au-feld--fehler select, .au-feld--fehler textarea { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
.au-feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au-feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; cursor: pointer; }
.au-feld--haken span { font-weight: 400; }
.au-feld--haken input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .15rem; padding: 0; accent-color: var(--au-gold-dunkel); }
.au-feld--haken a { color: inherit; }
.au-feld--fehler.au-feld--haken span { color: #b3261e; }
.au-anfrage_fehler { grid-column: 1 / -1; color: #b3261e; font-size: .875rem; }
.au-anfrage_fehler:empty { display: none; }
.au-anfrage_knopf { grid-column: 1 / -1; justify-self: start; cursor: pointer; font: inherit; font-size: 1rem; line-height: 1.5; border-width: 1px; }
.au-anfrage_knopf[disabled] { opacity: .7; cursor: wait; }
.au-anfrage_formular > p { grid-column: 1 / -1; margin: 0; }
.au-anfrage_danke { grid-column: 1 / -1; padding: .5rem 0; }
.au-anfrage_danke[hidden] { display: none; }
.au-anfrage_formular--fertig > :not(.au-anfrage_danke) { display: none; }
@media (max-width: 991px) { .au-anfrage_raster { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 479px) { .au-anfrage_formular { padding: 1.25rem; } .au-feld--halb { grid-column: 1 / -1; } }

/* ---------- Lesbarkeit: Hinweistexte etwas dunkler (Kontrast mindestens 4,5:1) ---------- */
.text-color-grau { color: #6a675f; }

/* ---------- Bewegung reduzieren: alles steht still, nichts bleibt versteckt ---------- */
@media (prefers-reduced-motion: reduce) {
  .button::after, .layout237_item::after { transition: none; }
  .au-ablauf-aktiv .layout121_timeline-step:not(.is-active) { opacity: 1; }
  .section_header127::after, .section_header127 > .padding-global::before, .au-wort > span.text-color-gold { animation: none; }
  .au-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .au-marquee .testimonial21_component { animation: au-laufband-still 1s linear paused; }
  .au-lesebalken { display: none; }
}
@keyframes au-laufband-still { from, to { transform: none; } }

/* Fußzeile: zweite Reihe mit den Branchen-Seiten */
.au-fuss-listen { display: grid; row-gap: 1rem; justify-items: center; }
.au-fuss-branchen .footer4_link { font-size: .9375rem; color: #6b6b6b; transition: color .2s ease; }
.au-fuss-branchen .footer4_link:hover, .au-fuss-branchen .footer4_link.w--current { color: var(--au-gold-dunkel, #926f34); }
@media screen and (max-width: 767px) {
  .au-fuss-listen { row-gap: 1.5rem; }
  .au-fuss-branchen { flex-flow: row wrap; justify-content: center; column-gap: 1.25rem; row-gap: .75rem; }
}

/* ---------- Einwilligungs-Fenster (Cookies und Anzeigen-Messung): assets/js/einwilligung.js baut es, gleiche Technik wie dennismende.de ---------- */
.cookie[hidden], .cookie [hidden] { display: none !important; }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; padding: 0 .75rem calc(.75rem + env(safe-area-inset-bottom)); pointer-events: none; font-family: Geist, Arial, sans-serif; }
.cookie__in { pointer-events: auto; max-width: 28rem; max-height: calc(100svh - 1.5rem - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; margin: 0 auto; background: #fff; color: #121212; border-top: 2px solid var(--au-gold); border-radius: 4px; box-shadow: 0 12px 40px rgba(18, 18, 18, .24); padding: 1.25rem 1.25rem 1.1rem; opacity: 0; transform: translateY(16px); transition: opacity .26s var(--au-ease-out), transform .26s var(--au-ease-out); }
.cookie.is-in .cookie__in { opacity: 1; transform: none; }
.cookie__titel { margin: 0 0 .5rem; font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.cookie__text { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.5; color: #6b6b6b; }
.cookie__text a { color: #121212; text-decoration: underline; }
.cookie__liste { display: grid; gap: .25rem; margin: 0 0 1rem; border-top: 1px solid #e6e2d6; }
.cookie__dienst { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 .75rem; padding: .75rem 0; border-bottom: 1px solid #e6e2d6; }
.cookie__kat { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; align-items: start; margin: 0; font-size: .9375rem; font-weight: 400; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cookie__kat input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: #121212; }
.cookie__kat b { display: block; font-weight: 600; }
.cookie__kat small { display: block; font-size: .875rem; color: #6b6b6b; line-height: 1.4; }
.cookie__kat--fest { cursor: default; grid-column: 1 / -1; }
.cookie__details { background: none; border: 0; padding: .1rem 0; font: inherit; font-size: .9375rem; color: var(--au-gold-dunkel); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cookie__info { grid-column: 1 / -1; margin-top: .6rem; padding: .75rem .85rem; background: #f4f1e8; font-size: .875rem; line-height: 1.45; color: #121212; }
.cookie__info p { margin: 0 0 .5rem; }
.cookie__info table { width: 100%; border-collapse: collapse; }
.cookie__info th, .cookie__info td { text-align: left; vertical-align: top; padding: .3rem .5rem .3rem 0; border-top: 1px solid #e6e2d6; }
.cookie__info th, .cookie__info td:first-child, .cookie__info td:last-child { white-space: nowrap; }
.cookie__info th { font-weight: 600; border-top: 0; color: #6b6b6b; }
.cookie__info code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.cookie__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookie__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0 .75rem; border-radius: 4px; border: 1px solid #121212; font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--au-ease-out), background-color .2s ease, color .2s ease; }
.cookie__btn:active { transform: scale(.97); }
.cookie__btn--voll { background: #121212; color: #fff; }
.cookie__btn--rand { background: #fff; color: #121212; }
.cookie__speichern { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) {
  .cookie__btn--voll:hover { background: #2c2c2c; }
  .cookie__btn--rand:hover { background: #121212; color: #fff; }
}
@media (min-width: 48em) {
  .cookie { left: 1.5rem; right: auto; bottom: 1.5rem; padding: 0; }
  .cookie__in { max-width: 26rem; max-height: calc(100svh - 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cookie__in { transition: none; }
}