/* Veredelung: Tiefe, Blautoene und Interaktion fuer alle Seiten.
   Wird als letztes Stylesheet geladen und gewinnt daher bei gleicher Spezifitaet. */

:root{
  --blue-900:#0b1934;
  --blue-700:#14549f;
  --blue-500:#155eef;
  --blue-400:#3b82f6;
  --blue-300:#78a6ff;
  --blue-100:#eaf1ff;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Drei Ebenen Tiefe, weich und leicht blau getoent */
  --e1:0 1px 2px rgba(11,25,52,.06),0 6px 18px rgba(11,25,52,.06);
  --e2:0 2px 4px rgba(11,25,52,.06),0 14px 34px rgba(11,25,52,.12);
  --e3:0 10px 30px rgba(0,0,0,.28),0 40px 90px rgba(0,0,0,.35);
  --e3-hover:0 16px 40px rgba(0,0,0,.34),0 54px 110px rgba(0,0,0,.42),0 0 60px rgba(21,94,239,.14);
  --edge:inset 0 1px 0 rgba(255,255,255,.07);
}
:root[data-theme="dark"]{
  --e1:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.35);
  --e2:0 2px 4px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
}

/* ---------- Sanfter Moduswechsel ---------- */
body,.header,footer,.card,.price-card,.form{transition:background-color .3s ease,color .3s ease,border-color .3s ease}

/* ---------- Karten: gleiche Tiefe, gleiche Reaktion ---------- */
.card,.price-card,.catalog-card,.legal-card,.rk-legal-card,.rk-download,.web-scope-card,
.rk-data-grid article,.rk-feature-grid article,.web-feature-grid article,
.software-feasibility-grid article,.offer-included-grid article,.process-grid article,
.web-hosting-card,.web-hosting-factors article,.ai-note-card{
  box-shadow:var(--e1);
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease
}
.card:hover,.catalog-card:hover,.web-scope-card:hover,
.rk-data-grid article:hover,.rk-feature-grid article:hover,.web-feature-grid article:hover,
.software-feasibility-grid article:hover,.offer-included-grid article:hover,.process-grid article:hover,
.web-hosting-factors article:hover{
  transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(21,94,239,.35)
}
:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .catalog-card:hover,
:root[data-theme="dark"] .web-scope-card:hover,:root[data-theme="dark"] .rk-feature-grid article:hover,
:root[data-theme="dark"] .rk-data-grid article:hover,:root[data-theme="dark"] .web-feature-grid article:hover{border-color:rgba(120,166,255,.45)}

/* ---------- Bildschirm-Nachbauten: gerade, mit Kante und Tiefe ---------- */
.hero-system,.web-browser,.software-demo,.ai-chat-demo,.offer-home-panel,
.chatbot-home-preview .chatbot-home-panel,.website-home-preview .offer-home-panel,
.website-mini-browser,.chatbot-card-window,.software-card-window{
  transform:none;box-shadow:var(--e3),var(--edge);
  transition:transform .45s var(--ease),box-shadow .45s ease,border-color .45s ease
}
.hero-system:hover,.web-browser:hover,.software-demo:hover,.ai-chat-demo:hover,
.offer-home-panel:hover,.chatbot-home-preview .chatbot-home-panel:hover,
.website-home-preview .offer-home-panel:hover{
  transform:translateY(-6px);box-shadow:var(--e3-hover),var(--edge);border-color:rgba(120,166,255,.5)
}
.catalog-card:hover .website-mini-browser,.catalog-card:hover .chatbot-card-window,.catalog-card:hover .software-card-window{transform:translateY(-4px)}
.catalog-card:hover .catalog-card-visual img{transform:scale(1.03)}
@keyframes heroSystemIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- Buehnen: mehr Raum, ruhiger Verlauf in mehreren Blautoenen ---------- */
.hero,.rk-hero,.web-hero,.home-hero{
  background:
    radial-gradient(900px 520px at 82% 12%,rgba(21,94,239,.32),transparent 60%),
    radial-gradient(700px 480px at 10% 90%,rgba(20,84,159,.22),transparent 60%),
    linear-gradient(160deg,#05080f 0%,#0a1730 55%,#0b1934 100%)
}
.ai-hero{background:
    radial-gradient(900px 520px at 82% 12%,rgba(21,94,239,.42),transparent 60%),
    radial-gradient(700px 480px at 10% 90%,rgba(20,84,159,.22),transparent 60%),
    linear-gradient(160deg,#05080f 0%,#0a1730 55%,#0b1934 100%)}
.hero:after,.rk-hero:after,.web-hero:after,.home-hero:after{opacity:.09}
.home-cta,.rk-final,.web-final{
  background:
    radial-gradient(800px 420px at 50% -10%,rgba(21,94,239,.5),transparent 60%),
    linear-gradient(180deg,#0b1934 0%,#05080f 100%)
}
.hero h1 em,.rk-hero h1 em,.web-hero h1 em,.home-hero h1 em,.home-cta h2 em,.rk-final h2 em,.web-final h2 em{color:#8db6ff;-webkit-text-fill-color:#8db6ff}

/* ---------- Schaltflaechen und Links: spuerbar, aber nicht laut ---------- */
.button{box-shadow:0 10px 24px rgba(21,94,239,.24),0 2px 6px rgba(15,23,42,.12);transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease}
.button:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(21,94,239,.32),0 4px 10px rgba(15,23,42,.14)}
.button:active{transform:translateY(-1px)}
.button:focus-visible,.theme-toggle:focus-visible,.nav a:focus-visible,.text-link:focus-visible{outline:3px solid rgba(120,166,255,.9);outline-offset:3px}
.button-ghost,.rk-button-ghost{box-shadow:none}
.button-ghost:hover,.rk-button-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.text-link{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:currentColor;transition:text-decoration-color .3s ease,color .2s ease,text-underline-offset .3s var(--ease)}
.text-link:hover{color:var(--blue-400);text-decoration-color:transparent;text-underline-offset:9px}
.nav a{transition:color .2s ease,background .2s ease}
.nav a:hover{transform:none}

/* ---------- Kopfzeile: kein Kippen der Marke, dafuer ein Leuchten ---------- */
.brand-mark{box-shadow:0 6px 18px rgba(21,94,239,.28),var(--edge);transition:transform .3s var(--ease),box-shadow .3s ease}
.brand:hover .brand-mark{transform:scale(1.04);box-shadow:0 10px 26px rgba(21,94,239,.42),var(--edge)}

/* ---------- Abschnitts-Marken und Zahlen ---------- */
.eyebrow:before{background:linear-gradient(90deg,var(--blue-300),transparent)}
.rk-feature-grid article>span,.web-feature-grid article>span,.rk-data-grid article strong{letter-spacing:.12em}

/* ---------- Bewegung nur, wenn erwuenscht ---------- */
@media(prefers-reduced-motion:reduce){
  .card,.catalog-card,.web-scope-card,.rk-feature-grid article,.hero-system,.web-browser,.software-demo,.ai-chat-demo,.offer-home-panel,.button,.text-link,.brand-mark{transition:none!important;transform:none!important}
}

/* Dunkelmodus: Karten behalten ihre Tiefe */
:root[data-theme="dark"] .card,:root[data-theme="dark"] .price-card,:root[data-theme="dark"] .catalog-card,:root[data-theme="dark"] .legal-card,:root[data-theme="dark"] .rk-legal-card,:root[data-theme="dark"] .rk-download,:root[data-theme="dark"] .web-scope-card,:root[data-theme="dark"] .rk-data-grid article,:root[data-theme="dark"] .rk-feature-grid article,:root[data-theme="dark"] .web-feature-grid article,:root[data-theme="dark"] .software-feasibility-grid article,:root[data-theme="dark"] .offer-included-grid article,:root[data-theme="dark"] .process-grid article,:root[data-theme="dark"] .web-hosting-card,:root[data-theme="dark"] .web-hosting-factors article,:root[data-theme="dark"] .ai-note-card{box-shadow:var(--e1)}
:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .catalog-card:hover,:root[data-theme="dark"] .web-scope-card:hover,:root[data-theme="dark"] .rk-data-grid article:hover,:root[data-theme="dark"] .rk-feature-grid article:hover,:root[data-theme="dark"] .web-feature-grid article:hover,:root[data-theme="dark"] .software-feasibility-grid article:hover,:root[data-theme="dark"] .offer-included-grid article:hover,:root[data-theme="dark"] .process-grid article:hover,:root[data-theme="dark"] .web-hosting-factors article:hover{box-shadow:var(--e2)}

/* Schwerpunkt-Marken auf der Buehne: etwas heller, damit sie sicher lesbar bleiben */
.hero-meta{color:#8593a8}

/* Preiszusatz auf der Angebotskachel: lesbar auf hellem Grund */
.catalog-card-footer small{color:#5f6b7c}

/* Hell-Modus: zu blasse Beschriftungen auf hellem Grund nachgedunkelt */
.legal-card>span{color:#5f6b7c}
.legal-card-primary>span{color:#5f6b7c}
.legal-version{color:#5f6b7c}
.legal-version{color:#5f6b7c}
.content h2 em{color:var(--blue)}
:root[data-theme="dark"] .content h2 em{color:#8db6ff}

/* Datumszeile der Datenschutzerklaerung im hellen Modus */

/* Datumszeile im Datenschutz; Nummer auf der dunklen Impressum-Karte wieder hell */
.privacy-updated{color:#b7c3d6}
.legal-card-primary>span{color:#c7d3e6}

/* Formular-Einleitung: gleiche Spezifitaet wie die Ursprungsregel */
.form-intro>p:last-child{color:#5f6b7c}

/* Quellenzeile der Datenschutzerklaerung auf hellem Grund */
.privacy-document .privacy-source span{color:#5f6b7c}
:root[data-theme="dark"] .privacy-document .privacy-source span{color:#c6cbd2}

/* Dunkelmodus: Badges und Primaerknoepfe behalten ein sattes Blau mit weisser Schrift.
   --blue ist im Dunkelmodus fuer Schrift aufgehellt und taugt nicht als Hintergrund. */
:root[data-theme="dark"] .floating-badge,:root[data-theme="dark"] .offer-preview-badge,:root[data-theme="dark"] .rk-ready,:root[data-theme="dark"] .button-primary,:root[data-theme="dark"] .service-item:hover>b{background:#2563eb;color:#fff}
:root[data-theme="dark"] .floating-badge,:root[data-theme="dark"] .offer-preview-badge,:root[data-theme="dark"] .rk-ready{border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(37,99,235,.35),0 2px 6px rgba(0,0,0,.35)}