/* ═══════════════════════════════════════════════════════════════════════════
   Roboto – lokal statt Google Fonts (keine externen Requests, kein Tracking).
   Variable Fassung: font-weight 100 900 deckt jedes Gewicht ab, auch die 600
   und 750 im Projekt, die das alte Static-Set (300;400;500;700;900) nur
   angenaehert hat. Zwei Subsets: latin + latin-ext (Namen wie Dvorak, Lukasz).
   ═══════════════════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Karriere-Portal – Hansemut GmbH  ·  Design v2
   Warm Cream · LED Progress Strip · Bricolage Grotesque
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes (aus Design-Prototype) ────────────────────────────────────── */
@keyframes scBlend {
  from { opacity: 0; transform: translateY(12px); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@keyframes scLamp {
  0%,100% {
    box-shadow: 0 2px 9px rgba(255,204,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 2px 18px rgba(255,204,0,.7), inset 0 1px 0 rgba(255,255,255,.85);
    filter: brightness(1.08);
  }
}

@keyframes scFlash {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.4); box-shadow: 0 2px 22px rgba(255, 204, 0, .75), inset 0 1px 0 rgba(255,255,255,.9); }
  100% { filter: brightness(1); }
}

@keyframes scPop {
  0%   { transform: scale(.4);    opacity: 0; }
  55%  { transform: scale(1.14);              }
  100% { transform: scale(1);     opacity: 1; }
}

@keyframes scBloom {
  0%   { opacity: 0; transform: scale(.6);  }
  40%  { opacity: .8;                        }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes ledHue {
  to { filter: hue-rotate(360deg); }
}

/* ── Reset & Custom Properties ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #faf7f1;
  --gold-lt:  #ffe168;
  --gold:     #FFCC00;
  --gold-dk:  #FFCC00;
  --gold-glow:rgba(255,204,0,.4);
  --gold-bg:  rgba(255,204,0,.1);
  --gold-bg2: rgba(255,204,0,.07);
  --t1:       #767b8f;
  --t2:       #767b8f;
  --t3:       #a89e8d;
  --t4:       #bdb4a3;
  --sep:      rgba(0,0,0,.09);
  --sep-lt:   rgba(0,0,0,.06);
  --seg-off-bg: #ece6db;
  --white:    #ffffff;
  --red:      #ff6554;
  --red-bg:   rgba(214,69,69,.08);
  --red-border:rgba(214,69,69,.3);
  --ff-head:  'Bricolage Grotesque', sans-serif;
  --ff-body:  'Hanken Grotesk', sans-serif;
  --ff-mono:  'Space Mono', monospace;
}

::selection { background: var(--gold); color: var(--t1); }

/* ── Base ────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  justify-content: center;
}

.header-inner {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo-img {
  display: block;
  height: 36px;
  width: auto;
}

.logo-name {
  font: 600 14px/1 var(--ff-head);
  letter-spacing: .01em;
}

.shop-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t2);
  text-decoration: none;
  transition: color .25s;
}

.shop-link:hover { color: #1fa9b5; }

/* ── Main ────────────────────────────────────────────────────────────────── */
.main-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 8px 24px 80px;
}

/* LED border shell */
.page-inner {
  width: 100%;
  max-width: 700px;
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 48px rgba(36,31,24,.07), 0 0 0 1px rgba(0,0,0,.06);
  padding: 32px 40px 40px;
}

/* LED border glow – follows mouse, only visible on the frame */
.page-inner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: radial-gradient(
    circle 280px at var(--led-x, 50%) var(--led-y, -60px),
    rgba(255,255,255,.95) 0%,
    rgba(255, 230, 0, 0.7) 22%,
    rgba(255, 153, 0, 0.55) 40%,
    transparent 65%
  );
  filter: hue-rotate(0deg);
  animation: ledHue 4s linear infinite;
  opacity: var(--led-op, 0);
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
  /* Frame mask: shows only the 2px border strip */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}

/* ── LED Progress Strip ──────────────────────────────────────────────────── */
.progress-wrap {
  margin-bottom: 38px;
  cursor: default;
}

.segments-row {
  display: flex;
  gap: 5px;
  margin-bottom: 11px;
}

/* Each segment built by JS */
.seg {
  flex: 1;
  height: 14px;
  border-radius: 7px;
  border: 1px solid var(--sep-lt);
  transition: background .6s cubic-bezier(.4,0,.2,1),
              box-shadow .6s cubic-bezier(.4,0,.2,1),
              filter .6s;
}

.seg.off {
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.04) 7px 8px),
              var(--seg-off-bg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  cursor: default;
}

.seg.off.clickable {
  cursor: pointer;
}
.seg.off.clickable:hover {
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.04) 7px 8px),
              #ddd6c7;
}

.seg.lit {
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.35) 7px 8px),
              linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: 0 2px 9px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.6);
}

.seg.lit.clickable {
  cursor: pointer;
}

.seg.lit.active-seg {
  animation: scLamp 1.9s ease-in-out infinite;
}

/* Hover: boost glow on all lit segments */
.segments-row.hot .seg.lit {
  box-shadow: 0 2px 18px rgba(255,204,0,.7), inset 0 1px 0 rgba(255,255,255,.7);
}

/* All-lit flash (on submit) */
.seg.all-lit {
  animation: scFlash .75s ease both;
}

.segments-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-mono {
  font: 700 11px/1 var(--ff-mono);
  letter-spacing: .14em;
  color: var(--gold-dk);
}

.lit-mono {
  font: 400 11px/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.step {
  animation: scBlend .45s ease both;
}

.step.hidden { display: none !important; }

/* Schritt-Ueberschrift gleitet von links ein. Kein JS noetig: das Umschalten
   von .hidden nimmt den Schritt aus display:none und startet die Animation neu. */
@keyframes stepHeadSlide {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}

.step > header {
  animation: stepHeadSlide .5s cubic-bezier(.22,1,.36,1) .08s both;
}

@media (prefers-reduced-motion: reduce) {
  .step > header { animation: none; }
}

/* ── Step Heading ────────────────────────────────────────────────────────── */
.step-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}

.orange-bar {
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 54px;
  border-radius: 3px;
  background: linear-gradient(180deg, #FFC76A, var(--gold));
  box-shadow: 0 0 12px rgba(255,204,0,.5);
  margin-top: 4px;
}

.step-h {
  font: 700 34px/1.04 var(--ff-head);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--t1);
}

.step-sub {
  font: 400 15px/1.5 var(--ff-body);
  color: var(--t2);
  margin: 0;
}

/* ── Kultur-Match Teaser / Badge ─────────────────────────────────────────── */
.match-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--t2);
  background: #ffcc004f;
  text-decoration: none;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}

.match-teaser:hover {
  border-color: rgba(255,204,0,.5);
  box-shadow: 0 6px 18px -12px rgba(40,30,10,.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -12px rgba(250, 167, 2, 0.911);
  text-decoration: none;
}

.match-teaser-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
}

.match-teaser-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.match-teaser-title {
  font: 700 13.5px/1.3 var(--ff-body);
  color: var(--t4);
}

.match-teaser-sub {
  font: 400 12.5px/1.3 var(--ff-body);
  color: var(--t3);
}

.match-teaser-arrow {
  flex: 0 0 auto;
  color: var(--gold-dk);
}

.match-teaser.hidden { display: none !important; }

.match-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  /* volles CI-Gelb: die 10%-Lasur war auf dunklem Grund nicht lesbar */
  background: var(--gold);
  color: var(--t1);
  font: 500 13px/1 var(--ff-body);
}

.match-badge-icon {
  display: flex;
  color: var(--gold-dk);
}

.match-badge strong { font-weight: 700; }

.match-badge.hidden { display: none !important; }

/* ── Job Grid ────────────────────────────────────────────────────────────── */

/* Job card */
.job-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px 15px 20px;
  /* unten eckig: der "Weitere Informationen"-Button sitzt bündig darunter
     und trägt die untere 15px-Rundung des Stapels */
  border-radius: 15px 15px 0 0;
  border: 1px solid var(--sep);
  background: var(--white);
  color: var(--t1);
  cursor: pointer;
  box-shadow: 0 4px 14px -10px rgba(40,30,10,.3);
  transition: border-color .25s, background .25s, box-shadow .25s;
}

.job-card:hover {
  border-color: rgba(255,204,0,.5);
}

.job-card.selected {
  border-color: rgba(255,204,0,.5);
  background: var(--gold-bg);
  box-shadow: 0 10px 26px -12px rgba(255,204,0,.6);
}

/* Left accent bar (absolutely positioned) */

/* Icon */
.job-icon {
  display: flex;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
  color: var(--t2);
  padding: 9px;
  transition: background .25s, color .25s, box-shadow .25s;
}

.job-card.selected .job-icon {
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  box-shadow: 0 4px 14px rgba(255,204,0,.5);
}

.job-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.job-title {
  font: 600 15.5px/1.25 var(--ff-head);
  color: var(--t1);
}

.job-desc {
  font: 400 12.5px/1.5 var(--ff-body);
  color: var(--t2);
}

/* Karten gleich hoch, ohne die Hoehe ueber die Reihe zu teilen (das wuerde
   aufgeklappte Karten wieder an alle anderen weiterreichen). Stattdessen
   bekommt nur der Textblock ein Mindestmass, bemessen an der laengsten Karte:
   2 Titelzeilen + 4 Textzeilen = 2*19.4 + 3 + 4*18.75 = 117px.
   ("Onlineshop Manager" bricht den Titel zweizeilig und den Text vierzeilig.)
   Nur ab lg, darunter steht jede Karte allein.
   Ceiling: wird eine Beschreibung noch laenger, ist diese Zahl die Stellschraube –
   alternativ die Texte auf gleiche Zeilenzahl kuerzen. */
@media (min-width: 992px) {
  .job-body { min-height: 117px; }
}

/* Check badge */
.job-check {
  display: flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
  margin-top: 2px;
}

.job-card.selected .job-check {
  opacity: 1;
  transform: scale(1);
}

/* ── Job Item (wrapper for card + expand) ────────────────────────────────── */
.job-item {
  display: flex;
  flex-direction: column;
}

/* Bewusst KEIN flex-grow auf .job-card und kein stretch auf #job-grid:
   sonst reicht eine aufgeklappte Karte ihre Hoehe an alle anderen weiter. */

.job-item:has(.job-card.selected) .job-more-btn {
  border-color: rgba(255,204,0,.4);
}

.job-item:has(.job-card.selected) .job-details {
  border-color: rgba(255,204,0,.4);
}

.job-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 16px;
  border: 1px solid var(--sep);
  border-top: none;
  border-radius: 0 0 15px 15px;
  /* deckend statt transparentem Schwarz – sonst schlaegt der dunkle
     Seitenhintergrund durch und der Button wird zum schwarzen Balken */
  background: #f8f9fa;
  color: var(--t2);
  font: 500 11.5px/1 var(--ff-body);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .25s;
}

.job-more-btn:hover {
  background: rgba(255,204,0,.08);
  color: var(--gold-dk);
}

.job-item.details-open .job-more-btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.job-more-chevron {
  transition: transform .25s ease;
  flex-shrink: 0;
}

.job-more-btn.open .job-more-chevron {
  transform: rotate(180deg);
}

.job-details {
  overflow: hidden;
  max-height: 0;
  border-top: none;
  border-radius: 0 0 15px 15px;
  background: #f8f9fa;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), border-color .25s;
}

.job-details.open {
  max-height: 700px;
}

/* Spalten kommen aus dem Bootstrap-Grid (.row > .col-md-4) – ein eigenes
   CSS-Grid hier legt beide Systeme uebereinander und laesst den Text kollidieren */
.job-details-inner {
  padding: 0px;
}

.job-detail-section {
  padding-right: 18px;
  border-right: 1px solid var(--sep-lt);
}

.job-detail-section:last-child {
  padding-right: 0;
  border-right: none;
}

.job-detail-h {
  font: 700 10px/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Gelb auf dem hellen Panel war unlesbar */
  color: var(--t1);
  margin: 0 0 9px;
}

.job-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.job-detail-list li {
  font: 400 12px/1.4 var(--ff-body);
  color: var(--t2);
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.job-detail-list li::before {
  content: '–';
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1.4;
  font-size: 11px;
}

/* ── Chat Widget ─────────────────────────────────────────────────────────── */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-toggle {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px rgba(255,204,0,.75);
  color: #1a1a1a;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.chat-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 0 32px rgb(255,204,0);
}

.chat-icon-open, .chat-icon-close { display: block; }
.chat-icon-open.hidden, .chat-icon-close.hidden { display: none; }

.chat-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 10px/18px var(--ff-mono);
  text-align: center;
  border: 2px solid #1a1730;
}
.chat-badge.hidden { display: none; }

.chat-panel {
  width: 320px;
  background: #211e3a;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 480px;
  animation: scBlend .22s ease both;
}
.chat-panel.hidden { display: none; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: #1a1730;
  border-bottom: 1px solid rgba(255,204,0,.35);
  color: #ffffff;
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,204,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-header-info { flex: 1; }
.chat-header .chat-name { font: 700 13px/1 var(--ff-head); color: #ffffff; }
.chat-header .chat-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 400 11px/1 var(--ff-body);
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}
.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22,163,74,.2);
}

.chat-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.chat-close:hover { background: #ffcc00; color: #1a1a1a; }

.chat-messages {
  background: #16132b;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: #ffcc00; }

.chat-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font: 400 13px/1.55 var(--ff-body);
}
.chat-messages .chat-msg p { margin: 0; color: inherit; font-size: inherit; max-width: none; }

.chat-msg--bot {
  background: #211e3a;
  border: 1px solid rgba(255,255,255,.10);
  border-bottom-left-radius: 4px;
  color: #ffffff;
  align-self: flex-start;
}

.chat-msg--user {
  background: #ffcc00;
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  background: #211e3a;
  border: 1px solid rgba(255,255,255,.10);
  border-bottom-left-radius: 4px;
  border-radius: 14px;
  align-self: flex-start;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffcc00;
  animation: chatDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes chatDot {
  0%, 60%, 100% { opacity: .3; transform: scale(.8); }
  30% { opacity: 1; transform: scale(1.1); }
}

.chat-questions {
  background: #16132b;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-q-btn {
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: #211e3a;
  color: #ffffff;
  font: 500 12.5px/1.4 var(--ff-body);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chat-q-btn:hover {
  background: #2b2540;
  border-color: #ffcc00;
  color: #ffcc00;
}
.chat-q-btn.used { opacity: .4; pointer-events: none; }

/* ── Fields ──────────────────────────────────────────────────────────────── */

.field-label {
  display: block;
  font: 700 10.5px/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 10px;
}

.req { color: var(--gold-dk); }
.opt { color: var(--t3); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Underline inputs */

/* ── Wochenstunden-Buttons ───────────────────────────────────────────────────
   Gleiche Flaechen wie die Job-Karten (#211e3a / #2b2540), damit sie sich auf
   das dunkle Panel legen statt als weisse Bloecke darauf zu stehen.
   Das Raster kommt aus dem Bootstrap-Grid (#stunden-grid .row > .col-md-3). */
.hour-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: #211e3a;
  color: #ffffff;
  cursor: pointer;
  transition: border-color .22s, background .22s, box-shadow .22s, color .22s;
}

.hour-btn:hover {
  border-color: rgba(255,204,0,.5);
  background: #2b2540;
}

/* ausgewaehlt: voller gelber Rand + Schein – wie .job-card.selected.
   Ein Gelb-Schleier als Flaeche wuerde auf dunklem Grund nur schlammig. */
.hour-btn.selected {
  border-color: #ffcc00;
  background: #2b2540;
  box-shadow: 0 0 16px rgba(255,204,0,.45);
}

.hour-main {
  font: 600 15px/1.2 var(--ff-head);
  color: #ffffff;
}

.hour-sub {
  font: 400 12px/1.2 var(--ff-body);
  color: rgba(255,255,255,.55);
}

.hour-btn.selected .hour-main { color: #ffcc00; }

/* ── Motivation Textarea ─────────────────────────────────────────────────── */

/* ── CV Drop Zone ────────────────────────────────────────────────────────── */
.cv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* gestrichelt in Anthrazit – auf dem gelben Grund sichtbar,
     rgba(0,0,0,.16) verschwand darin komplett */
  border: 2px dashed rgba(26,26,26,.45);
  border-radius: 14px;
  padding: 28px;
  cursor: pointer;
  text-align: center;
  background: #ffcc00;
  color: #141414;
  /* hebt die Flaeche vom dunklen Panel ab (Grundschein wie .btn-glow) */
  box-shadow: 0 0 4px rgba(255,204,0,.75);
  transition: border-color .25s, background .25s, box-shadow .25s, color .25s;
  margin-top: 12px;
}

/* Hover/Drag invertieren auf Anthrazit – wie .btn-primary:hover im Shop.
   Vorher wurde die Flaeche auf 7% Gelb heruntergezogen und war auf dem
   dunklen Panel praktisch weg. */
.cv-drop:hover,
.cv-drop.drag-over {
  border-color: var(--gold);
  background: #1a1a1a;
  color: #ffffff;
  box-shadow: 0 0 32px rgb(255,204,0);
}

.cv-drop:hover .cv-drop-link,
.cv-drop.drag-over .cv-drop-link { color: var(--gold); }

.cv-drop:hover .cv-drop-hint,
.cv-drop.drag-over .cv-drop-hint { color: rgba(255,255,255,.6); }

.cv-drop-label {
  font: 600 14px/1.3 var(--ff-body);
}

.cv-drop-link { color: var(--gold-dk); }

.cv-drop-hint {
  font: 400 11px/1 var(--ff-mono);
  color: #202020;
}

/* Selected file pill */
.cv-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gold-bg);
  border: 1px solid rgba(255,204,0,.4);
  border-radius: 14px;
  padding: 15px 16px;
  margin-top: 10px;
  box-shadow: 0 6px 18px -10px rgba(255,204,0,.5);
}

.cv-selected svg { color: var(--gold-dk); flex-shrink: 0; }

.cv-filename {
  flex: 1;
  min-width: 0;
  font: 600 14px/1.3 var(--ff-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-remove {
  background: none;
  border: none;
  color: var(--t2);
  font: 400 22px/0.6 sans-serif;
  cursor: pointer;
  padding: 0 4px;
  transition: color .2s;
}

.cv-remove:hover { color: var(--gold-dk); }

/* ── Summary Table ───────────────────────────────────────────────────────── */
.summary-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #211e3a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 16px;
}

.summary-row-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  border-radius: 11px;
  padding: 13px 12px;
  cursor: pointer;
  color: var(--t1);
  transition: background .2s;
  font-family: var(--ff-body);
}

.summary-row-btn:hover {
  background: var(--gold-bg);
}

.summary-lbl {
  flex: 0 0 96px;
  font: 700 10.5px/1.5 var(--ff-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-dk);
  padding-top: 2px;
}

.summary-val {
  flex: 1;
  font: 500 14px/1.5 var(--ff-body);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--t3);
}

.summary-edit {
  display: flex;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--t3);
  margin-top: 3px;
}

/* ── Consent Checkboxes ──────────────────────────────────────────────────── */
.consent-block {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  background: #211e3a;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: #fff;
}

.consent-intro {
  font: 400 italic 12.5px/1.5 var(--ff-body);
  color: var(--t3);
  margin-bottom: 16px;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sep-lt);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consent-row:last-child { border-bottom: none; padding-bottom: 0; }
.consent-row:first-of-type { padding-top: 0; }

/* Visually hidden native checkbox */
.consent-cb {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Custom checkbox box */
.consent-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(0,0,0,.22);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.consent-check-icon {
  width: 10px;
  height: 9px;
  color: #1a1208;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
}

/* Checked state */
.consent-cb:checked + .consent-box {
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 1px 6px rgba(255,204,0,.35);
}
.consent-cb:checked + .consent-box .consent-check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Keyboard focus */
.consent-cb:focus-visible + .consent-box {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}

/* Error state */
.consent-row.consent-error .consent-box {
  border-color: var(--red);
  background: var(--red-bg);
  box-shadow: none;
}

/* Text */
.consent-text {
  font: 400 13px/1.65 var(--ff-body);
  color: var(--t3);
  flex: 1;
}

.consent-row--optional .consent-text { color: var(--t3); }

.consent-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(190,122,16,.4);
  transition: color .15s, text-decoration-color .15s;
}
.consent-link:hover { color: var(--t1); text-decoration-color: var(--t1); }

/* Badges */
.consent-badge {
  display: inline-block;
  font: 600 9.5px/1 var(--ff-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  margin-left: 7px;
  vertical-align: middle;
  white-space: nowrap;
}
.consent-badge--req { background: rgba(255,204,0,.12); color: var(--gold); }
.consent-badge--opt { background: rgba(255,204,0,.12); color: var(--gold); }

/* ── Error Box ───────────────────────────────────────────────────────────── */
.error-box {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  background: #020024;
  background: linear-gradient(360deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 43, 1) 100%);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--red);
  font: 600 13px/1.4 var(--ff-body);
}

.error-box svg { flex-shrink: 0; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.form-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

/* Back button */
.btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 13px;
  padding: 14px 18px;
  color: #5c5547;
  font: 600 14px/1 var(--ff-head);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.btn-back:hover {
  border-color: rgba(0,0,0,.4);
  color: var(--t1);
}

/* Next button */
.btn-next {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  border: none;
  border-radius: 13px;
  padding: 14px 26px;
  color: #1a1208;
  font: 700 15px/1 var(--ff-head);
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(255,204,0,.8);
  transition: box-shadow .25s, transform .25s;
}

.btn-next:hover {
  box-shadow: 0 14px 32px -8px rgba(255,204,0,1);
  transform: translateY(-1px);
}

/* Submit button */
.btn-submit {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  border: none;
  border-radius: 13px;
  padding: 14px 28px;
  color: #1a1208;
  font: 700 15px/1 var(--ff-head);
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(255,204,0,.9);
  transition: box-shadow .25s, transform .25s;
}

.btn-submit:hover {
  box-shadow: 0 16px 36px -6px rgba(255,204,0,1);
  transform: translateY(-1px);
}

.btn-submit.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(26,18,8,.25);
  border-top-color: #1a1208;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

/* ── Footer Tagline ──────────────────────────────────────────────────────── */
.page-footer {
  text-align: center;
  font: 400 10.5px/1.5 var(--ff-mono);
  letter-spacing: .14em;
  color: var(--t4);
  margin: 30px 0 0;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Success Overlay ─────────────────────────────────────────────────────── */
.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(70% 50% at 50% 36%, rgba(255,204,0,.2), transparent 62%),
              rgba(250,247,241,.93);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.success-inner {
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: scBlend .5s ease both;
}

/* Bulb + bloom */
.success-bulb-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
}

.bloom {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,0,.55), transparent 70%);
  animation: scBloom 1s ease-out .15s both;
}

.success-bulb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scPop .55s ease both;
  box-shadow: 0 10px 40px rgba(255,204,0,.6);
}

.success-h {
  font: 700 32px/1.05 var(--ff-head);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.success-p {
  font: 400 15px/1.6 var(--ff-body);
  color: var(--t2);
  margin: 0 0 26px;
}

.success-p strong { color: var(--t1); }

.success-card {
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 15px;
  padding: 4px 18px;
  box-shadow: 0 14px 40px -22px rgba(40,30,10,.35);
}

.success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.success-row.no-border { border-bottom: none; }

.success-lbl {
  font: 700 10.5px/1 var(--ff-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.success-val {
  font: 600 13px/1.3 var(--ff-body);
  text-align: right;
}

.btn-reset {
  margin-top: 24px;
  background: none;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 13px;
  padding: 13px 22px;
  color: #5c5547;
  font: 600 13px/1 var(--ff-head);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.btn-reset:hover {
  border-color: var(--gold);
  color: var(--gold-dk);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  .header-inner { padding: 18px 20px; max-width: 100%; }
  .main-wrap { padding: 4px 12px 60px; }
  .page-inner { padding: 22px 18px 28px; border-radius: 16px; }
  .page-inner::before { border-radius: 18px; }
  .step-h { font-size: 28px; }
  .summary-lbl { flex: 0 0 72px; font-size: 9.5px; }
  .btn-next, .btn-submit { padding: 13px 18px; font-size: 14px; }
  .btn-back { padding: 13px 14px; font-size: 13px; }
  .chat-panel { width: calc(100vw - 32px); }
  .chat-widget { right: 16px; bottom: 16px; }
  .job-detail-section {
    padding-right: 0;
    border-right: none;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sep-lt);
  }
  .job-detail-section:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Karriere-Portal (index.html) – aus dem <style>-Tag zusammengefuehrt
   Laedt nach Bootstrap/FontAwesome/artikel_19.css, daher gewinnen diese Regeln
   Gleichstaende – genau wie vorher als letzter <style>-Block im <head>.
   ═══════════════════════════════════════════════════════════════════════════ */
/* CI-Mapping: die Tokens aus :root auf die Shop-Palette umstellen.
   Bewusst auf .hdr statt :root – match.html laedt dieselbe style.css, hat die
   Klasse aber nicht und behaelt damit sein Creme/Bricolage-Design. Custom
   Properties vererben, .hdr sitzt am <body>, also gilt es fuer die ganze Seite. */
.hdr {
  --cream:      #ffffff;
  --gold-lt:    #ffd633;
  --gold:       #ffcc00;
  --gold-dk:    #9f7a00;
  --gold-glow:  rgba(255, 204, 0, .4);
  --gold-bg:    rgba(255, 204, 0, .10);
  --gold-bg2:   rgba(255, 204, 0, .07);
  --t1:         #1a1a1a;
  --t2:         #666666;
  --t3:         #adb5bd;
  --t4:         #adb5bd;
  --sep:        #e9ecef;
  --sep-lt:     #f1f3f5;
  --seg-off-bg: #40464d;
  --ff-head:    'Roboto', sans-serif;
  --ff-body:    'Roboto', sans-serif;
  --ff-mono:    'Roboto', sans-serif;
}

/* Shop-CI: Bootstrap-Primary = Hansemut-Gelb (Regel identisch zu auto.css) */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus {
  background-color: #ffcc00;
  border-color: #ffcc00;
  color: #1a1a1a;
  box-shadow: none;
}
/* Hover-Invertierung wie .button-anleitung im Shop */
.btn-primary:hover { background-color: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }

/* Glow wie .lumen-berater – auf einer gefuellten Flaeche greift text-shadow
   nicht, box-shadow ist das Pendant. Muss nach .btn-primary:focus stehen,
   sonst loescht dessen box-shadow:none den Schein wieder. */
.btn-glow,
.btn-glow:focus { box-shadow: 0 0 4px rgba(255, 204, 0, 0.75); transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out; }
.btn-glow:hover,
.btn-glow:focus-visible { box-shadow: 0 0 32px rgb(255, 204, 0); }

/* Bootstrap-Dunkel auf das CI-Anthrazit ziehen (#343a40 -> #1a1a1a) */
.bg-dark { background-color: #1a1a1a !important; }
.btn-outline-dark { border-color: #1a1a1a; color: #1a1a1a; }
.btn-outline-dark:hover { background-color: #1a1a1a; border-color: #1a1a1a; }

/* FontAwesome-Glyphen in den vorhandenen Icon-Containern skalieren
   (die Container waren auf 100%-breite SVGs ausgelegt) */
.job-icon .fa          { font-size: 3rem; line-height: 1; }
.job-check .fa         { font-size: .7rem; }
.match-teaser-icon .fa { font-size: 1rem; }
.match-badge-icon .fa  { font-size: .7rem; }
.cv-drop > .fa         { font-size: 1.6rem; }
.cv-selected > .fa     { font-size: 1rem; color: var(--gold-dk); }
.success-bulb .fa      { font-size: 2rem; }
.br_8 { border-radius: 8px !important; }
/* Zustandsklassen, die script.js setzt – Bootstrap kennt sie nicht */
.form-control.field-error                       { border-color: #c0392b; }
#stunden-grid.field-error .hour-btn:not(.selected) { border-color: rgba(192, 57, 43, .5); }
#btn-submit.loading                             { opacity: .6; pointer-events: none; }
.lumen-berater{color:#FFCC00; text-shadow:0 0 4px rgba(255, 204, 0, 0.75); transition:all .2s ease-in-out; cursor:pointer;}
.lumen-berater:hover{text-shadow: 0 0 32px rgb(255, 204, 0);}
/* Wortmarke: gleicher Glow wie .lumen-berater – auf einem <img> greift
   text-shadow nicht, drop-shadow ist das Pendant */
.hdr-logo-svg{width:220px; cursor:pointer; max-width:60%; height:auto; filter:drop-shadow(0 0 4px rgba(255, 204, 0, 0.75)); transition:filter .2s ease-in-out;}
.hdr-logo-svg:hover{filter:drop-shadow(0 0 32px rgb(255, 204, 0));}
/* .hdr sitzt am <body>. overflow:hidden hat dort das ganze Dokument gekappt –
   aufgeklappte Job-Karten wurden abgeschnitten und die Seite liess sich nicht
   scrollen. Gebraucht wird die Kappung nur waagerecht, fuer die Deko-Kreise in
   ::before/::after (right:-70px).
   clip statt hidden ist hier entscheidend: bei overflow-x:hidden wuerde das
   overflow-y:visible laut Spec zu auto werden – also wieder ein Scrollcontainer.
   clip laesst die andere Achse in Ruhe. (Chrome 90+, Firefox 81+, Safari 16+) */
.hdr{background:linear-gradient(135deg,#0e0e1a 0%,#181630 55%,#1a1826 100%);margin-bottom:26px;position:relative;overflow-x:clip;overflow-y:visible}

.hdr::before{content:'';position:absolute;top:-70px;right:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,64,.13) 0%,transparent 65%);pointer-events:none}

.hdr::after{content:'';position:absolute;bottom:-50px;left:40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(61,217,160,.08) 0%,transparent 65%);pointer-events:none}

.hdr p{color:rgba(255,255,255,.48);font-size:14.5px;max-width:520px;line-height:1.6}

/* Fliesstext, der direkt auf dem dunklen .hdr-Panel liegt – Bootstrap-Muted
   (#6c757d) und die hellgrauen Tokens verschwinden dort */
.hdr .text-muted,
.hdr .form-text,
.hdr .lit-mono   { color: rgba(255, 255, 255, .6) !important; }
.hdr .field-label { color: #ffcc00; }
/* Flaechen im dunklen Panel bleiben weiss (CI) – Text darin wieder dunkel */

/* ── Job-Karten auf dem dunklen Panel ─────────────────────────────────
   Weisse Karten stehen als harte Bloecke auf dem Verlauf. Stattdessen
   angehobene dunkle Flaechen; Weiss traegt den Text, Gelb den Akzent.
   Auf .hdr gescopet – auf hellem Grund gilt weiter das Original. */
.hdr .job-card    { background: #211e3a; border-color: rgba(255,255,255,.10); }
.hdr .job-more-btn{ background: #1a1730; border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.5); }
.hdr .job-details { background: #16132b; border-color: rgba(255,255,255,.10); }

.hdr .job-title { color: #ffffff; }
.hdr .job-desc  { color: rgba(255,255,255,.55); }
.hdr .job-icon  { background: rgba(255,204,0,.14); color: #ffcc00; }

.hdr .job-more-btn:hover { background: rgba(255,204,0,.12); color: #ffcc00; }

/* ausgewaehlt: gelber Rand statt Farbschleier – der Tint wuerde auf
   dem dunklen Grund nur schlammig werden */
.hdr .job-card.selected { background: #2b2540; border-color: #ffcc00; }

.hdr .job-detail-h       { color: #ffcc00; font-size:large; font-weight:750;}
.hdr .job-detail-list li { color: rgba(255,255,255,.6);font-size: 1rem; font-weight: 100; }
.hdr .job-detail-section { border-color: rgba(255,255,255,.08); }
/* Skaliert stufenlos mit der Viewport-Breite statt an Breakpoints zu springen –
   5rem bleibt ab ~1250px erhalten.
   Untergrenze 1.5rem: das laengste Wort ("EIGENTLICH?", 11 Zeichen) passt damit
   auf 375px noch in die col-10. Stellschraube ist der 6vw-Mittelwert. */
.head_step { color: #ffcc00; font-size: clamp(1.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; display: inline-block; overflow-wrap: break-word; max-width: 100%; }

/* Mobil: die weite Versalien-Sperrung kostet Zeilenbreite, die auf einem
   Telefon fehlt – Zeilenhoehe enger, damit zweizeilige Headlines kompakt bleiben. */
@media (max-width: 767.98px) {
  .head_step { letter-spacing: .02em; line-height: 1.1; }
}
.icon_step { background-color: #ffcc00; font-size: 3.5rem; border-radius:16px; text-align:center; color:#1a1a1a }
.daten {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
color: #ffffff;
background-color: #ffffff00;
background-clip: padding-box;
border: 1px solid rgba(255,255,255,.10);
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.daten:focus {
color: #ffffff;
background-color: #ffffff00;
font-weight: 750;
border-color: #ffcc00;
outline: 0;
box-shadow: 0 0 10px .2rem rgba(255,204,0,.5);}

/* Kalender-Button von <input type="date">: liegt im Shadow DOM des Browsers und
   wird als Hintergrundbild gezeichnet – color/fill greifen dort nicht. Deshalb
   das schwarze Standard-Glyph durch ein eigenes SVG in CI-Gelb ersetzen.
   Firefox kennt das Pseudoelement nicht und zeigt weiterhin sein eigenes Icon. */
.daten::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.1em;
  height: 1.1em;
  opacity: 1;
  cursor: pointer;
  transition: filter .2s ease-in-out;
}

/* Hover/Fokus: gleicher Schein wie .lumen-berater, nur als drop-shadow –
   auf einem Hintergrundbild greift text-shadow nicht. */
.daten::-webkit-calendar-picker-indicator:hover,
.daten:focus::-webkit-calendar-picker-indicator {
  filter: drop-shadow(0 0 4px rgba(255, 204, 0, .75));
}