/* digirelation CI — Crystal Arctic (aus drwebsite/ci.html · docs/03-brand-ci.md)
   Black #070F16 · Accent #AECFE4 · Top #C8DFEF · Hover #7DAACD · Deep #4F82A8 · Ink #0A2540 */

:root {
  --dr-black: #070F16;
  --dr-accent: #AECFE4;
  --dr-accent-top: #C8DFEF;
  --dr-accent-hover: #7DAACD;
  --dr-accent-deep: #4F82A8;
  --dr-accent-soft: #EFF6FB;
  --dr-accent-ink: #0A2540;
  --dr-glow-sm: 0 0 18px rgba(174, 207, 228, 0.45);
  --dr-glow-md: 0 0 32px rgba(174, 207, 228, 0.55);
}

::selection { background: var(--dr-accent); color: var(--dr-accent-ink); }

/* ---------- Primary CTA: Accent-Gradient + Glow (CI: nie Flat-Fill) ---------- */
.ci-btn {
  background: linear-gradient(180deg, var(--dr-accent-top) 0%, var(--dr-accent) 100%);
  color: var(--dr-accent-ink) !important;
  box-shadow: var(--dr-glow-sm);
  transition: all .3s ease;
}
.ci-btn:hover {
  background: linear-gradient(180deg, var(--dr-accent) 0%, var(--dr-accent-hover) 100%);
  box-shadow: var(--dr-glow-md);
}

/* ---------- Dunkle Seiten (Landing/Preview/Danke): Hero-Glow + Fokus ---------- */
.ci-dark {
  background:
    radial-gradient(1100px 620px at 60% -5%, rgba(174,207,228,0.10) 0%, rgba(15,34,38,0.35) 40%, transparent 70%),
    radial-gradient(circle at 60% 45%, #0f2226 0%, #0a151c 35%, #070F16 75%) !important;
}
.ci-dark input:focus, .ci-dark select:focus, .ci-dark textarea:focus {
  border-color: var(--dr-accent) !important;
  box-shadow: var(--dr-glow-sm) !important;
  outline: none !important;
}
.ci-dark a:not([class*="bg-"]):hover { color: var(--dr-accent-top); }

/* ---------- Helle App-Seiten: generische Blau-Utilities auf CI mappen ---------- */
.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900 { color: var(--dr-accent-deep) !important; }
.bg-blue-600 { background: linear-gradient(180deg, #5E90B4 0%, var(--dr-accent-deep) 100%) !important; box-shadow: var(--dr-glow-sm); }
.hover\:bg-blue-700:hover { background: #3D6C90 !important; box-shadow: var(--dr-glow-md); }
.bg-blue-50 { background-color: var(--dr-accent-soft) !important; }
.bg-blue-100 { background-color: #DCEBF6 !important; }
.text-blue-500 { color: var(--dr-accent-hover) !important; }
.border-blue-100, .border-blue-50 { border-color: #DCEBF6 !important; }
.hover\:border-blue-400:hover, .focus\:border-blue-500:focus { border-color: var(--dr-accent-hover) !important; }
.focus\:ring-blue-200:focus, .focus\:ring-blue-100:focus { box-shadow: var(--dr-glow-sm) !important; }
.from-blue-600 { --tw-gradient-from: #5E90B4 !important; }
.to-blue-400 { --tw-gradient-to: var(--dr-accent-deep) !important; }
.hover\:from-blue-700:hover { --tw-gradient-from: var(--dr-accent-deep) !important; }
.hover\:to-blue-600:hover { --tw-gradient-to: #3D6C90 !important; }

/* Karten & Flächen einen Hauch arktischer */
.glassmorph, .glassmorph-card { border-color: #E4E7EC !important; }

/* ---------- Haus-Font: Satoshi (Fontshare) ---------- */
body, button, input, select, textarea {
  font-family: 'Satoshi', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   CI-Modernisierung der dunklen Public-Seiten (Landing/Preview/Danke)
   — rein visuell, Markup & Copy bleiben unangetastet
   ============================================================ */

/* Sektions-Hintergründe: durchgehender CI-Gradient statt Grau-Flickenteppich */
.ci-dark section[class*="from-gray-950"],
.ci-dark section[class*="bg-gray-950"],
.ci-dark section[class*="bg-black"],
.ci-dark div[class*="from-gray-950"] {
  background: transparent !important;
}
.ci-dark .bg-gray-900 { background-color: rgba(242, 248, 250, 0.045) !important; }
.ci-dark .bg-gray-800 { background-color: rgba(242, 248, 250, 0.07) !important; }
.ci-dark .bg-gray-850 { background-color: rgba(242, 248, 250, 0.05) !important; }

/* Rahmen: arktisch statt grau */
.ci-dark .border-gray-800, .ci-dark .border-gray-700 {
  border-color: rgba(174, 207, 228, 0.16) !important;
}
.ci-dark .hover\:border-gray-600:hover, .ci-dark .hover\:border-gray-500:hover {
  border-color: rgba(174, 207, 228, 0.45) !important;
  box-shadow: var(--dr-glow-sm);
}

/* Headline-Verlaufstext: Crystal Arctic statt Grau */
.ci-dark .gradient-text {
  background: linear-gradient(-45deg, #F2F8FA, var(--dr-accent-top), var(--dr-accent), #F2F8FA) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Formulare: weiche Radien, Glas-Optik, kein Zoom-Gezappel */
.ci-dark input, .ci-dark select, .ci-dark textarea {
  border-radius: 0.75rem !important;
  background-color: rgba(242, 248, 250, 0.05) !important;
  border-color: rgba(174, 207, 228, 0.25) !important;
}
.ci-dark input:focus, .ci-dark select:focus, .ci-dark textarea:focus {
  transform: none !important;
  background-color: rgba(242, 248, 250, 0.08) !important;
}
.ci-dark button[type="submit"] { border-radius: 0.9rem !important; }

/* Trust-Badges */
.ci-dark .trust-badge {
  background: rgba(174, 207, 228, 0.08) !important;
  border: 1px solid rgba(174, 207, 228, 0.22) !important;
  color: var(--dr-accent-top) !important;
  border-radius: 0.6rem !important;
}

/* Karten generell weicher */
.ci-dark .rounded-lg { border-radius: 0.9rem !important; }

/* Grüne Punkte/Status in CI-Success */
.ci-dark .bg-green-500 { background-color: #10D180 !important; box-shadow: 0 0 12px rgba(16,209,128,.6); }
.ci-dark .text-green-400 { color: #34E3A0 !important; }

/* Logo-Topbar der Public-Seiten */
.ci-topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px 2px;
}
.ci-topbar img { height: 22px; width: auto; }
.ci-topbar .ai-badge {
  margin-left: 8px; font-weight: 700; font-size: 12px;
  padding: 2px 7px; border-radius: 6px;
  background: linear-gradient(180deg, var(--dr-accent-top), var(--dr-accent));
  color: var(--dr-accent-ink);
  box-shadow: var(--dr-glow-sm);
}

/* ---------- Hero-Showcase (Video + Report-Vorschau) ---------- */
.hero-showcase { min-height: 420px; }
.hero-aurora {
  position: absolute; inset: -60px -40px;
  background:
    radial-gradient(320px 220px at 70% 25%, rgba(174,207,228,0.22), transparent 70%),
    radial-gradient(260px 200px at 20% 80%, rgba(79,130,168,0.25), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.hero-video-card {
  border-radius: 1.1rem; overflow: hidden;
  border: 1px solid rgba(174,207,228,0.3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), var(--dr-glow-sm);
  transform: rotate(-1.2deg);
  transition: transform .4s ease, box-shadow .4s ease;
}
.hero-video-card:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 28px 70px rgba(0,0,0,.55), var(--dr-glow-md); }
.hero-play {
  background: linear-gradient(180deg, var(--dr-accent-top), var(--dr-accent));
  box-shadow: var(--dr-glow-md);
}
.hero-report-card {
  position: relative; width: 250px;
  margin: -46px 0 0 -8px;
  background: rgba(10, 21, 28, 0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(174,207,228,0.35); border-radius: 0.9rem;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), var(--dr-glow-sm);
  padding: 10px 12px 12px;
}
.hrc-head { display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.hrc-dot { width:7px; height:7px; border-radius:50%; background:rgba(174,207,228,.35); }
.hrc-title { margin-left:6px; font-size:10px; font-weight:700; color:#C8DFEF; letter-spacing:.3px; }
.hrc-body { display:flex; gap:12px; align-items:center; }
.hrc-score { position:relative; width:52px; height:52px; flex:none; }
.hrc-score svg { width:52px; height:52px; transform:rotate(-90deg); }
.hrc-ring-bg { fill:none; stroke:rgba(174,207,228,.15); stroke-width:4; }
.hrc-ring { fill:none; stroke:url(#hrcGrad); stroke:#AECFE4; stroke-width:4; stroke-linecap:round; }
.hrc-score-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; color:#F2F8FA; }
.hrc-bars { flex:1; display:flex; flex-direction:column; gap:7px; }
.hrc-bar-row { display:flex; align-items:center; gap:8px; font-size:10px; color:#9db4c6; }
.hrc-bar-row span { width:52px; flex:none; }
.hrc-bar { flex:1; height:5px; border-radius:99px; background:rgba(174,207,228,.15); overflow:hidden; }
.hrc-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--dr-accent-deep), var(--dr-accent)); }
.hero-chip {
  position:absolute; right:-14px; top:-18px;
  background: rgba(10,21,28,.92); border:1px solid rgba(16,209,128,.4);
  color:#B8F5DC; font-size:12px; font-weight:600;
  padding:8px 12px; border-radius:99px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 16px rgba(16,209,128,.25);
}
@media (max-width: 1023px) {
  .hero-report-card { margin-left: 8px; }
  .hero-chip { right: 4px; }

}

/* ---------- Helle Zwischen-Sektionen der Landing: CI-Polish ---------- */
.ci-dark .bg-white.border, .ci-dark .bg-gray-100 .bg-white, .ci-dark .bg-white[class*="border"] {
  border-radius: 1rem !important;
  border-color: #E4E7EC !important;
  box-shadow: 0 10px 30px rgba(7, 15, 22, 0.06) !important;
}
/* Schwarze Chips/Nummern-Badges → Accent-Ink mit Eisblau-Kante */
.ci-dark div.bg-black:not([class*="bg-opacity"]):not([class*="absolute"]),
.ci-dark span.bg-black:not([class*="bg-opacity"]),
.ci-dark a.bg-black:not([class*="bg-opacity"]) {
  background: linear-gradient(180deg, #103150, var(--dr-accent-ink)) !important;
  border-radius: 0.6rem !important;
  box-shadow: 0 0 0 1px rgba(174, 207, 228, 0.35), 0 4px 14px rgba(10, 37, 64, 0.25) !important;
}

/* Trust-Punkte im Hero (rechte Spalte unter Video/Score) */
.hero-trust-grid {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.htg-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #C8DFEF;
  background: rgba(174, 207, 228, 0.06);
  border: 1px solid rgba(174, 207, 228, 0.18);
  border-radius: 0.6rem; padding: 9px 12px;
}
@media (max-width: 1023px) {
  .hero-trust-grid { margin-top: 16px; }
}

/* "Warum kostenlos?"-Sektion: CI-Gradient statt (kaputtem) Team-Foto */
.ci-why-bg {
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(174,207,228,0.14), transparent 70%),
    radial-gradient(600px 360px at 85% 80%, rgba(79,130,168,0.18), transparent 70%),
    linear-gradient(160deg, #0f2226 0%, #0a151c 45%, #070F16 100%);
}

/* ---------- Mobile: Overflow-Bremsen für das Hero-Grid ---------- */
@media (max-width: 1023px) {
  .ci-dark .grid > div { min-width: 0; }
  .hero-showcase, .hero-video-card, .hero-video-card img { max-width: 100% !important; }
  .hero-aurora { inset: -20px -8px; }
  .hero-chip { right: 2px; }
  .hero-report-card { margin-left: 0; max-width: calc(100% - 8px); }
  .ci-dark h1, .ci-dark p { overflow-wrap: break-word; }
}