/* === JDTEC Theme (Bootstrap via CSS Vars) === */
:root{
  /* Brand / Primärfarbe */
  --bs-primary:  #770000;         /* JDTEC Rot */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #940000;

  /* Brand-Ergänzungen */
  --bs-danger:   #C2272D;
  --bs-success:  #15A27C;
  --bs-warning:  #FFC857;

  /* Typografie & Flächen */
  --bs-body-color:      #2B2B2B;
  --bs-secondary-color: #6B6B6B;
  --bs-body-bg:         #F6F8FB;

  /* UI-Design Tokens */
  --jd-red:        #770000;
  --jd-red-hover:  #940000;
  --radius:        16px;
  --shadow:        0 2px 10px rgba(20,22,36,.06);
  --shadow-xs:     0 1px 6px rgba(20,22,36,.05);
}

/* ====== Global Look & Feel ====== */
.bg-surface{ background: var(--bs-body-bg); }
.shadow-xs{ box-shadow: var(--shadow-xs); }
.shadow-sm{ box-shadow: var(--shadow); }
.card, .btn, .form-control, .badge, .breadcrumb, .alert { border-radius: var(--radius); }

/* Brand-Textgradient (Logo/Heading) */
.brand-gradient{
  background: linear-gradient(90deg, #770000, #940000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero-Hintergrund (dezent, JD-rot) */
.gradient-hero{
  background:
    radial-gradient(900px 300px at 12% -10%, rgba(148,0,0,.10), transparent 60%),
    radial-gradient(800px 260px at 88% -18%, rgba(119,0,0,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

/* Tabellen-Hover in Rot-Ton */
.table-hover tbody tr:hover{ background: rgba(148,0,0,.05); }

/* Links rot – aber NICHT bei Buttons */
a:not(.btn), .link-primary { color: var(--jd-red); }
a:not(.btn):hover, .link-primary:hover { color: var(--jd-red-hover); }

/* Button-Text garantiert weiß */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff !important;
}

/* ====== Buttons – harte Overrides, damit sicher rot ====== */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--jd-red);
  --bs-btn-border-color: var(--jd-red);
  --bs-btn-hover-bg: var(--jd-red-hover);
  --bs-btn-hover-border-color: var(--jd-red-hover);
  --bs-btn-active-bg: var(--jd-red-hover);
  --bs-btn-active-border-color: var(--jd-red-hover);
  --bs-btn-disabled-bg: var(--jd-red);
  --bs-btn-disabled-border-color: var(--jd-red);
}

/* Outline-Primary konsistent in Rot */
.btn-outline-primary{
  --bs-btn-color: var(--jd-red);
  --bs-btn-border-color: var(--jd-red);
  --bs-btn-hover-bg: var(--jd-red);
  --bs-btn-hover-border-color: var(--jd-red);
  --bs-btn-hover-color:#fff;
}

/* Optional: zweite CTA-Klasse (falls genutzt) */
.btn-brand{
  --bs-btn-bg: var(--jd-red);
  --bs-btn-border-color: var(--jd-red);
  --bs-btn-hover-bg: var(--jd-red-hover);
  --bs-btn-hover-border-color: var(--jd-red-hover);
  color:#fff;
}

/* Badges leicht angepasst (dezente Töne) */
.badge.text-bg-warning{ background-color:#FFF3CD!important; color:#8A6D00!important; }
.badge.text-bg-success{ background-color:#D1F2E5!important; color:#116B4F!important; }
.badge.text-bg-danger { background-color:#F8D7DA!important; color:#842029!important; }

/* ===== Mega-Menü Stabilität & Abhebung ===== */
.navbar .dropdown.mega .dropdown-toggle::after{ margin-left:.25rem; }

/* Panel ohne vertikale Lücke direkt unter dem Toggle */
.mega-menu{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.10),
    0 2px 8px rgba(0,0,0,.05);
  z-index: 1055;
  margin-top: 0;            /* <— WICHTIG: kein Gap */
  padding: 1.25rem 1rem;
  position: absolute;
  left: 0; right: 0;
}

/* Hover-Bridge: schließt die „Hover-Lücke“ über dem Panel */
.mega-menu::before{
  content:"";
  position:absolute;
  top:-10px; left:0; right:0;
  height:10px;              /* <— „Brücke“ zwischen Toggle und Panel */
}

/* Links im Panel */
.mega-menu .dropdown-item{
  border-radius: 8px;
  color: var(--bs-body-color);
}
.mega-menu .dropdown-item:hover{
  background: rgba(148,0,0,.06);
  color: var(--jd-red);
}

/* Kompakt-Dropdowns (nicht-mega): gleiche Optik wie Mega, aber auto-breit */
.navbar .dropdown:not(.mega) .dropdown-menu{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  padding: .5rem;
}
.navbar .dropdown:not(.mega) .dropdown-item{
  border-radius: 8px;
}
.navbar .dropdown:not(.mega) .dropdown-item:hover{
  background: rgba(148,0,0,.06);
  color: var(--jd-red);
}

/* Mega-Menü: Multi-Column für flache Listen */
.mega-columns{
  column-count: 3;
  column-gap: 2rem;
}
.mega-columns > li{
  break-inside: avoid;
}
.mega-columns .dropdown-item{
  display: inline-block; /* verhindert, dass die Spalte item-weise zerreißt */
  width: 100%;
  border-radius: 8px;
}

/* Brand-Logo Größe (responsive) */
.brand-logo{ height:100px; width:auto; }
@media (min-width: 992px){ .brand-logo{ height:100px; } }

/* Hero-Layering & Look */
.hero{
  position: relative;
}
.hero::before{
  /* dezente rot/weiße Lichtkegel */
  content:"";
  position:absolute; inset:-8rem -10% -4rem -10%;
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(148,0,0,.12), transparent 60%),
    radial-gradient(800px 280px at 88% -18%, rgba(119,0,0,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }

/* Karten-Optik im Hero */
.hero-card.card{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

/* Eyebrow/Breadcrumb-artiger Header im Hero */
.hero-eyebrow .badge{
  border: 1px solid rgba(0,0,0,.06);
}

/* kleine Trennlinie in Metadaten */
.vr{
  width:1px; height:14px; background:rgba(0,0,0,.1);
}


/* Feature-Karten */
.feature-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.05);
}

/* kleine Icon-Badge links neben Überschrift */
.icon-circle{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background: rgba(148,0,0,.08);
  color: var(--jd-red);
}

/* Solutions-Listen */
.solutions-list li{ margin:.35rem 0; }
.solutions-list a{ text-decoration:none; }
.solutions-list a:hover{ text-decoration:underline; }

/* Partner & Zertifizierungen */
.partner-strip{
  display:flex; flex-wrap:wrap; gap:24px;
  align-items:center;
}
.partner-logo{
  height:80px; width:auto; filter: grayscale(1) contrast(1.05) opacity(.85);
  transition: filter .15s ease, transform .15s ease;
}
.partner-logo:hover{
  filter: grayscale(0) opacity(1);
  transform: translateY(-1px);
}
@media (min-width: 992px){
  .partner-logo{ height:80px; }
}

/* Lesefluss */
.card p { line-height: 1.55; }

/* Prozess-Schritte */
.step { padding: .5rem .25rem; }
.step-index{
  width:28px;height:28px;border-radius:50%;
  display:inline-grid;place-items:center;
  background: rgba(148,0,0,.08); color: var(--jd-red);
  font-weight:600; margin-bottom:.5rem;
}

/* Links im Fließtext dezenter */
.link-primary, a.link-primary { text-decoration: none; }
.link-primary:hover, a.link-primary:hover { text-decoration: underline; }

.avatar-illu{
  width:56px; height:56px; object-fit:contain; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding:6px;
}

/* Split-Cards (Text | Illustration) */
.split-card{ border:1px solid rgba(0,0,0,.06); border-radius:16px; }
.split{ display:grid; grid-template-columns: 1fr 200px; align-items:center; gap:1rem; }
.split-illu{ display:flex; justify-content:center; align-items:center; }
.illu{ max-width:180px; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.10)); }
@media (max-width: 991.98px){ .split{ grid-template-columns:1fr; } .split-illu{ order:-1; } .illu{ max-width:220px; } }

/* Hosting-Tiles */
.tile-card{ border:1px solid rgba(0,0,0,.06); border-radius:16px; }
.tile-illu-wrap{ flex:0 0 64px; height:64px; width:64px; border-radius:14px; background: rgba(148,0,0,.06); display:grid; place-items:center; }
.tile-illu{ max-height:48px; width:auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.08)); }

/* Prozess-Sticker */
.sticker{ position:absolute; right:-10px; top:-24px; width:120px; opacity:.15; pointer-events:none; transform:rotate(8deg); }

/* Mini-Avatar im Kundencenter */
.avatar-illu{ width:56px; height:56px; object-fit:contain; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 18px rgba(0,0,0,.06); padding:6px; }

/* Partner-Logos */
.partner-strip{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.partner-logo{ height:32px; width:auto; filter: grayscale(1) contrast(1.05) opacity(.85); transition: filter .15s ease, transform .15s ease; }
.partner-logo:hover{ filter: grayscale(0) opacity(1); transform: translateY(-1px); }
@media (min-width: 992px){ .partner-logo{ height:36px; } }

/* Eyecatcher & Plan-Card Goodies */
.bg-soft-primary {
  background: rgba(119,0,0,.08); /* JDTEC-Rot sehr soft */
  color: #770000;
  border: 1px solid rgba(119,0,0,.15);
}

.hero-illus { max-height: 220px; object-fit: contain; }

.plan-card { position: relative; }
.plan-card.plan-recommended {
  border: 1px solid rgba(119,0,0,.25);
  box-shadow: 0 6px 24px rgba(119,0,0,.10);
}

.ribbon {
  width: 120px; height: 120px; overflow: hidden; position: absolute; top: -6px; right: -6px;
}
.ribbon span {
  position: absolute; display: block; width: 170px; padding: 6px 0;
  background: #770000; color: #fff; text-align: center; font-weight: 600;
  transform: rotate(45deg); top: 22px; right: -30px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.plan-features li + li { margin-top: .25rem; }

.partner-strip .partner-logo {
  height: 26px; opacity: .85; filter: grayscale(100%);
  transition: opacity .15s ease, filter .15s ease;
}
.partner-strip .partner-logo:hover { opacity: 1; filter: none; }

/* /public/assets/app.css – Ergänzen falls noch nicht vorhanden */
.badge-soft{background:#f7ecec;border:1px solid #edd9d9;color:#770000;padding:.375rem .6rem;border-radius:999px;font-weight:600}
.incl-tile{background:#fff;border:1px solid #eee;border-radius:14px;padding:12px;text-align:center}
.incl-tile i{font-size:20px;margin-bottom:6px;color:#770000;display:block}
.plan-card .price{line-height:1}
.plan-card .ribbon{background:#770000;color:#fff;border-radius:999px;padding:.15rem .5rem;font-size:.75rem}
.hero-illus{max-height:220px}
.sticky-cta{position:sticky;bottom:16px;margin-top:24px;border-radius:14px;background:#fff;border:1px solid #eee;padding:.75rem 1rem}

.shadow-xs{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
.brand-gradient{ background:linear-gradient(90deg,#770000,#940000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

  /* dezenter, wertiger Slider – JDTEC Rot, nicht nachgebaut */
  .svclvl {
    --track-h: 6px;
    --thumb: 18px;
    --c: var(--bs-primary);
  }
  .svclvl input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height: var(--track-h);
    background: linear-gradient(90deg, var(--c), #c44444); border-radius:999px; outline:none;
  }
  .svclvl input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width: var(--thumb); height: var(--thumb);
    border-radius:50%; background:#fff; border:2px solid var(--c); box-shadow:0 1px 6px rgba(0,0,0,.15);
    cursor:pointer; margin-top: calc((var(--track-h) - var(--thumb))/2);
  }
  .svclvl input[type=range]::-moz-range-thumb{
    width: var(--thumb); height: var(--thumb); border-radius:50%;
    background:#fff; border:2px solid var(--c); box-shadow:0 1px 6px rgba(0,0,0,.15); cursor:pointer;
  }
  .svclvl .labels{
    display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.5rem;
  }
  .svclvl .labels .item{
    text-align:center; font-size:.875rem;
  }
  .svclvl .labels .name{ font-weight:600; }
  .svclvl .labels .badge{
    display:inline-block; padding:.2rem .5rem; border-radius:999px;
    background: rgba(119,0,0,.08); color: var(--bs-primary); font-size:.75rem;
  }
  .svclvl .labels .active .name{ color: var(--bs-primary); }
  .svclvl .labels .active .badge{ background: var(--bs-primary); color:#fff; }
  .shadow-xs{ box-shadow:0 2px 8px rgba(0,0,0,.06); }

  .ref-card{transition:transform .2s ease, box-shadow .2s ease}
  .ref-card:hover{transform:translateY(-2px); box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08)}
  .ref-cover{aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:.75rem}
  .badge-soft{background:rgba(55,134,255,.1); color:#2b6ad9}
  .badge-soft-green{background:rgba(16,185,129,.12); color:#087b5c}
  .badge-soft-orange{background:rgba(255,140,66,.12); color:#b3561c}
  .filter-pill{border-radius:999px}
  .ref-logo{height:28px; width:auto}

  .job-card{transition:transform .2s ease, box-shadow .2s ease}
  .job-card:hover{transform:translateY(-2px); box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08)}
  .badge-soft{background:rgba(55,134,255,.1); color:#2b6ad9}
  .filter-pill{border-radius:999px}

  .job-badge { background: rgba(55,134,255,.1); color:#2b6ad9; border-radius:999px; padding:.35rem .75rem; font-size:.85rem; }
  .job-meta  { gap: .75rem; }
  .k-card    { border:0; box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06); border-radius:.75rem; }
  .k-section { border-left:3px solid rgba(55,134,255,.18); padding-left:1rem; }
  .k-li li   { margin:.35rem 0; }
  .sticky-apply { position: sticky; top: 1.25rem; }
  .muted     { color: var(--bs-secondary-color, #6c757d); }
  .toc a     { text-decoration:none; }
  .toc a:hover { text-decoration:underline; }
  .k-chip    { background:#f6f7fb; border:1px solid #eceff5; border-radius:999px; padding:.25rem .6rem; font-size:.8rem; }
  .k-icon    { width: 1.25rem; display:inline-flex; justify-content:center; }
  .k-divider { height:1px; background:#edf0f6; margin:1rem 0; }
  .share-btn { cursor:pointer; }