/* ============================================================
   KoenigHeineDE — Design System
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-deep:#0f1420; --bg-panel:#1a2030; --bg-panel-soft:#151b2a; --bg-raised:#252c3e; --bg-glass:rgba(26,32,48,0.85);
  --gold:#f7d56b; --gold-soft:#f6e7b0; --gold-deep:#c9a64a; --gold-glow:rgba(247,213,107,0.22);
  --cyan:#4fd1e4; --cyan-soft:rgba(79,209,228,0.14); --amber:#f5a623;
  --ivory:#e8ecf4; --ivory-muted:#8b94a8; --ivory-faint:rgba(139,148,168,0.65);
  --line:rgba(247,213,107,0.22); --line-soft:#2a3144; --line-strong:#3a4258;
  --green:#4ade80; --green-soft:rgba(74,222,128,0.14); --red:#f87171; --red-soft:rgba(248,113,113,0.14); --violet:#a855f7; --violet-soft:rgba(168,85,247,0.16);
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --fs-display:clamp(2.8rem,5vw,5rem); --fs-h1:clamp(2rem,3.2vw,3rem); --fs-h2:clamp(1.4rem,2vw,1.9rem); --fs-h3:1.15rem; --fs-body:1.02rem; --fs-small:0.86rem; --fs-micro:0.72rem;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px; --s-9:64px; --s-10:96px; --s-11:128px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-soft:0 18px 50px rgba(0,0,0,0.32); --shadow-strong:0 32px 80px rgba(0,0,0,0.48); --shadow-gold:0 10px 40px rgba(247,213,107,0.18);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1); --ease-in-out-quart:cubic-bezier(0.76,0,0.24,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:180ms; --dur-med:360ms; --dur-slow:640ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg-deep);scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;line-height:1.55;color:var(--ivory);background:transparent;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold-soft);text-decoration:none;transition:color var(--dur-fast) var(--ease-out-quart)}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--gold-glow);color:var(--ivory)}

.bg-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:-3;pointer-events:none;opacity:0;transition:opacity 800ms var(--ease-out-quart);will-change:opacity}
.bg-video.is-ready{opacity:1}
.bg-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(247,213,107,0.05),transparent 55%)}
.bg-stars{position:fixed;inset:-10%;z-index:-2;pointer-events:none;opacity:0.7;background-repeat:repeat;background-size:760px 760px;animation:starsDrift 180s linear infinite;will-change:transform;isolation:isolate;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 760'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='42' cy='73' r='1'/%3E%3Ccircle cx='180' cy='128' r='0.8' opacity='0.9'/%3E%3Ccircle cx='278' cy='52' r='1.2'/%3E%3Ccircle cx='402' cy='180' r='0.9' opacity='0.95'/%3E%3Ccircle cx='532' cy='90' r='1' opacity='0.96'/%3E%3Ccircle cx='686' cy='40' r='1.1'/%3E%3Ccircle cx='118' cy='256' r='0.9' opacity='0.94'/%3E%3Ccircle cx='342' cy='304' r='1.3'/%3E%3Ccircle cx='498' cy='246' r='0.8' opacity='0.88'/%3E%3Ccircle cx='616' cy='312' r='1' opacity='0.95'/%3E%3Ccircle cx='62' cy='402' r='1' opacity='0.95'/%3E%3Ccircle cx='216' cy='462' r='0.8' opacity='0.88'/%3E%3Ccircle cx='378' cy='446' r='1.1'/%3E%3Ccircle cx='550' cy='488' r='0.9' opacity='0.92'/%3E%3Ccircle cx='692' cy='526' r='1.2'/%3E%3Ccircle cx='148' cy='572' r='0.9' opacity='0.92'/%3E%3Ccircle cx='306' cy='616' r='1' opacity='0.95'/%3E%3Ccircle cx='466' cy='618' r='0.8' opacity='0.88'/%3E%3Ccircle cx='604' cy='678' r='1.1'/%3E%3Ccircle cx='38' cy='684' r='1' opacity='0.95'/%3E%3Ccircle cx='208' cy='728' r='0.8' opacity='0.88'/%3E%3Ccircle cx='420' cy='738' r='1' opacity='0.95'/%3E%3Ccircle cx='568' cy='752' r='0.7' opacity='0.82'/%3E%3Ccircle cx='724' cy='710' r='0.9' opacity='0.9'/%3E%3Ccircle cx='752' cy='168' r='0.8' opacity='0.88'/%3E%3Ccircle cx='760' cy='386' r='0.7' opacity='0.82'/%3E%3Ccircle cx='4' cy='150' r='0.7' opacity='0.82'/%3E%3Ccircle cx='10' cy='340' r='0.6' opacity='0.78'/%3E%3Ccircle cx='5' cy='560' r='0.9' opacity='0.9'/%3E%3Cg opacity='0.7'%3E%3Ccircle cx='86' cy='198' r='0.6'/%3E%3Ccircle cx='248' cy='178' r='0.5'/%3E%3Ccircle cx='462' cy='124' r='0.6'/%3E%3Ccircle cx='594' cy='208' r='0.5'/%3E%3Ccircle cx='168' cy='342' r='0.6'/%3E%3Ccircle cx='438' cy='358' r='0.5'/%3E%3Ccircle cx='264' cy='514' r='0.6'/%3E%3Ccircle cx='502' cy='558' r='0.5'/%3E%3Ccircle cx='102' cy='642' r='0.6'/%3E%3Ccircle cx='370' cy='678' r='0.5'/%3E%3Ccircle cx='258' cy='90' r='0.5'/%3E%3Ccircle cx='584' cy='154' r='0.6'/%3E%3Ccircle cx='720' cy='102' r='0.5'/%3E%3Ccircle cx='32' cy='248' r='0.6'/%3E%3Ccircle cx='192' cy='312' r='0.5'/%3E%3Ccircle cx='460' cy='292' r='0.6'/%3E%3Ccircle cx='560' cy='376' r='0.5'/%3E%3Ccircle cx='670' cy='420' r='0.6'/%3E%3Ccircle cx='120' cy='502' r='0.5'/%3E%3Ccircle cx='350' cy='540' r='0.6'/%3E%3Ccircle cx='510' cy='672' r='0.5'/%3E%3Ccircle cx='278' cy='704' r='0.6'/%3E%3Ccircle cx='630' cy='80' r='0.5'/%3E%3Ccircle cx='406' cy='62' r='0.6'/%3E%3Ccircle cx='742' cy='250' r='0.5'/%3E%3Ccircle cx='540' cy='670' r='0.5'/%3E%3Ccircle cx='90' cy='416' r='0.5'/%3E%3C/g%3E%3Cg opacity='0.4'%3E%3Ccircle cx='320' cy='20' r='0.4'/%3E%3Ccircle cx='500' cy='40' r='0.4'/%3E%3Ccircle cx='648' cy='220' r='0.4'/%3E%3Ccircle cx='736' cy='460' r='0.4'/%3E%3Ccircle cx='246' cy='244' r='0.4'/%3E%3Ccircle cx='90' cy='332' r='0.4'/%3E%3Ccircle cx='384' cy='128' r='0.4'/%3E%3Ccircle cx='572' cy='430' r='0.4'/%3E%3Ccircle cx='694' cy='614' r='0.4'/%3E%3Ccircle cx='246' cy='592' r='0.4'/%3E%3Ccircle cx='160' cy='694' r='0.4'/%3E%3Ccircle cx='448' cy='486' r='0.4'/%3E%3Ccircle cx='304' cy='378' r='0.4'/%3E%3Ccircle cx='40' cy='482' r='0.4'/%3E%3Ccircle cx='550' cy='560' r='0.4'/%3E%3Ccircle cx='640' cy='560' r='0.4'/%3E%3Ccircle cx='708' cy='340' r='0.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
@keyframes starsDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-760px,-380px,0)}}

.shooting-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.shooting-star{position:absolute;top:-10vh;transform-origin:top left}
.shooting-star > i{display:block;width:2px;height:170px;border-radius:999px;background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 60%,#fff 100%);box-shadow:0 0 8px rgba(255,255,255,0.85),0 0 18px rgba(120,200,255,0.45);opacity:0;transform:translate3d(0,0,0);will-change:transform,opacity}
.shooting-star:nth-child(1){left:78%;top:-6vh;transform:rotate(28deg)}
.shooting-star:nth-child(1) > i{animation:shootStreak 11s linear infinite;animation-delay:1s}
.shooting-star:nth-child(2){left:18%;top:-10vh;transform:rotate(332deg)}
.shooting-star:nth-child(2) > i{animation:shootStreak 16s linear infinite;animation-delay:6s}
.shooting-star:nth-child(3){left:92%;top:-14vh;transform:rotate(42deg)}
.shooting-star:nth-child(3) > i{animation:shootStreak 19s linear infinite;animation-delay:11s}
.shooting-star:nth-child(4){left:6%;top:-3vh;transform:rotate(318deg)}
.shooting-star:nth-child(4) > i{animation:shootStreak 24s linear infinite;animation-delay:16s}
@keyframes shootStreak{0%,92%{opacity:0;transform:translate3d(0,0,0)}93%{opacity:0;transform:translate3d(0,0,0)}94%{opacity:1}100%{opacity:0;transform:translate3d(0,140vh,0)}}

.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.container{width:min(1280px,calc(100% - var(--s-7)));margin-inline:auto}
.container-wide{width:min(1480px,calc(100% - var(--s-7)));margin-inline:auto}
.stack > * + *{margin-top:var(--s-4)}
.stack-lg > * + *{margin-top:var(--s-7)}

.panel{background:var(--bg-panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--shadow-soft)}

.btn{--btn-bg:rgba(247,213,107,0.10);--btn-border:rgba(247,213,107,0.42);--btn-color:var(--gold);--btn-bg-hover:rgba(247,213,107,0.18);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-6);border-radius:var(--r-pill);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);font-family:var(--font-body);font-size:0.95rem;font-weight:700;letter-spacing:0.02em;text-decoration:none;cursor:pointer;user-select:none;position:relative;overflow:hidden;transition:background var(--dur-fast) var(--ease-out-quart),border-color var(--dur-fast) var(--ease-out-quart),transform var(--dur-fast) var(--ease-out-quart),color var(--dur-fast) var(--ease-out-quart);will-change:transform}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--gold);color:var(--gold)}
.btn:active{transform:scale(0.97)}
.btn-primary{--btn-bg:var(--gold);--btn-border:var(--gold);--btn-color:#1a1408;--btn-bg-hover:var(--gold-soft)}
.btn-primary:hover{color:#1a1408}
.btn-ghost{--btn-bg:transparent;--btn-border:var(--line-strong);--btn-color:var(--ivory);--btn-bg-hover:rgba(255,255,255,0.06)}
.btn-ghost:hover{color:var(--ivory)}
.btn-sm{min-height:38px;padding:0 var(--s-4);font-size:0.85rem}

.badge{display:inline-flex;align-items:center;gap:var(--s-1);padding:4px 10px;border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--ivory);border:1px solid var(--line-soft);background:rgba(255,255,255,0.05);white-space:nowrap}
.badge-ok{background:var(--green-soft);border-color:rgba(74,222,128,0.30);color:#d8ffe5}
.badge-warn{background:rgba(247,213,107,0.14);border-color:var(--line);color:var(--gold-soft)}
.badge-err{background:var(--red-soft);border-color:rgba(248,113,113,0.30);color:#ffd9d9}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="tel"],input[type="date"],input[type="datetime-local"],textarea,select{width:100%;padding:14px var(--s-4);border-radius:var(--r-md);border:1px solid var(--line-soft);background:rgba(255,255,255,0.04);color:var(--ivory);font-size:1rem;transition:border-color var(--dur-fast) var(--ease-out-quart),background var(--dur-fast) var(--ease-out-quart)}
input::placeholder,textarea::placeholder{color:var(--ivory-faint)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,0.07)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--ivory) !important;-webkit-box-shadow:0 0 0 1000px rgba(20,20,28,0.95) inset !important;caret-color:var(--ivory);transition:background-color 9999s ease-in-out 0s}
textarea{min-height:130px;resize:vertical}

.notice{padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid rgba(74,222,128,0.30);background:var(--green-soft);color:#d8ffe5;margin-bottom:var(--s-4)}
.notice-error{border-color:rgba(248,113,113,0.30);background:var(--red-soft);color:#ffd9d9}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-quart);transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}
[data-reveal="fade"]{transform:none}

.muted{color:var(--ivory-muted)} .faint{color:var(--ivory-faint)} .gold{color:var(--gold)} .center{text-align:center} .hidden{display:none !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .shooting-star > i{animation:none;opacity:0}
  .bg-stars{animation:none}
}

/* Server-Chip: Copy-Feedback (überall gültig) */
.info-chip-server{cursor:pointer}
.info-chip-server.is-copied{border-color:rgba(74,222,128,0.5)}
.info-chip-server.is-copied .info-chip-label{color:#d8ffe5}
.info-chip-server.is-copied .info-chip-meta{display:none}