/* ===========================================================================
   go.ukmc.de — Kampagnen-Zusätze zum ukmc.de-Designsystem.
   Nur was die Akte nicht kennt: Cookie-Leiste, FAQ, Quellzeilen, Rechner.
   =========================================================================== */

/* ---------- Cookie-Leiste: vollbreit ganz oben, schiebt den Kopf herunter.
   lp.js misst die Höhe und setzt --ck-h; der feste Header rückt nach. ---------- */
.ck{position:fixed;top:0;left:0;right:0;z-index:95;background:#fff;
  border-bottom:1px solid var(--linie);box-shadow:0 10px 30px rgba(14,20,51,.08)}
.ck[hidden]{display:none}
.ck-in{max-width:1200px;margin:0 auto;padding:13px 40px;
  display:flex;align-items:center;gap:28px}
.ck-in p{font-size:13.5px;color:var(--text-l);line-height:1.5;margin:0;flex:1}
.ck-in a{color:var(--navy)}
.ck-kn{display:flex;gap:10px;flex:none;align-items:center}
.ck-kn .knopf{padding:11px 22px;font-size:11px}
.ck-nein{background:transparent;border:1px solid var(--linie);color:var(--text-l);
  padding:11px 22px;font-family:inherit;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.25s}
.ck-nein:hover{border-color:var(--navy);color:var(--navy)}
header{top:var(--ck-h,0)}
.menue-flaeche{padding-top:calc(130px + var(--ck-h,0px))}
@media (max-width:760px){
  .ck-in{flex-direction:column;align-items:stretch;gap:12px;padding:14px 22px}
}

/* ---------- Presse-Laufband — die UK-Veröffentlichungen, in die Akte
   übersetzt: zwischen Haarlinien, Logos dunkel eingefärbt und gedämpft ---------- */
.presse-band{background:#fff;border-block:1px solid var(--linie);padding:34px 0 30px}
.pl-kick{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-xl);text-align:center;margin-bottom:22px}
.pl-band{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%)}
.pl-track{display:flex;gap:64px;width:max-content;align-items:center;
  animation:plauf 62s linear infinite}
.pl-band:hover .pl-track{animation-play-state:paused}
.pl-logo{width:auto;flex:0 0 auto;filter:brightness(0);opacity:.34;transition:opacity .35s}
.pl-logo:hover{opacity:.7}
@keyframes plauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:1080px){.pl-track{gap:44px;animation-duration:46s}}
@media (prefers-reduced-motion:reduce){
  .pl-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;
    gap:30px 44px;max-width:900px;margin:0 auto}
  .pl-band{mask-image:none;-webkit-mask-image:none}
}

/* ---------- Quellzeilen — klein, ruhig, unter Zitaten und Kapiteln ---------- */
.quelle{font-size:12.5px;color:var(--text-xl);line-height:1.6;max-width:640px;
  margin-top:10px}

/* ---------- FAQ im Akte-Stil: Haarlinien, Serifen-Frage, kein Kasten ---------- */
.faq{margin-top:36px;border-top:1px solid var(--linie);max-width:760px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:18px;padding:22px 0;font-family:"Playfair Display",Georgia,serif;
  font-size:19px;color:var(--navy);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';font-family:Jost,sans-serif;font-weight:400;
  font-size:20px;color:var(--rot);flex:none;width:18px;line-height:1;
  transition:transform .3s var(--ez)}
.faq details[open] summary::before{content:'−'}
.faq summary:hover{color:var(--rot)}
.faq details p{padding:0 0 24px 36px;font-size:16px;color:var(--text-l);
  max-width:640px}

/* ---------- Rechner-Rahmen: Haarlinie, Papier, dynamische Höhe ---------- */
#ukRechner{width:100%;height:760px;border:1px solid var(--linie);
  background:#fff;margin-top:44px;transition:height .3s ease}

/* Formular-Danke nach dem Senden sichtbar schalten (Klasse aus kampagne.js) */
.form-danke.an{display:block}

/* ---------- Die Formular-Karte in Kapitel 06: Creme-Tafel mit roter
   Oberkante — dieselbe Sprache wie die Stichtags-Tafeln in Kapitel 02 ---------- */
.formkarte{background:var(--creme);border:1px solid var(--linie);
  border-top:2px solid var(--rot);padding:38px 36px 32px}
.formkarte .fk-kick{display:flex;align-items:center;gap:14px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--rot);
  margin-bottom:10px}
.formkarte .fk-kick::before{content:'';width:26px;height:2px;background:currentColor;flex:none}
.formkarte h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;
  font-size:26px;color:var(--navy);margin:0 0 6px}
.formkarte .fk-sub{font-size:14.5px;color:var(--text-l);margin:0 0 30px}
.formkarte .formular{margin-top:0;max-width:none}
.formkarte .feld{margin-bottom:24px}
.formkarte .feld input,.formkarte .feld select,.formkarte .feld textarea{
  background:#fff;border:1px solid var(--linie);padding:12px 14px}
.formkarte .feld select{background-color:#fff;background-position:right 12px center}
.formkarte .feld input:focus,.formkarte .feld select:focus,
.formkarte .feld textarea:focus{border-color:var(--navy)}
.formkarte .form-fuss{margin-top:28px;flex-direction:column;align-items:stretch;
  gap:14px}
.formkarte .form-fuss .knopf{width:100%;padding:17px 30px}
.formkarte .form-erwartung{text-align:center}
.formkarte .form-alternativ{text-align:center}
.formkarte .form-alternativ p{max-width:none}
.formkarte .form-alternativ .knopf{width:100%}
@media (max-width:1080px){.formkarte{padding:28px 22px 24px}}