@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#07111e;--panel:#0b1928;--panel2:#0d2031;--line:#1b3a50;--text:#e9f5ff;--muted:#8ba4b8;--cyan:#55b8ff;--blue:#1769d2;--amber:#78c7ff;--font:'Manrope',Arial,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 66% 5%,#12304a 0,transparent 36%),var(--bg);color:var(--text);font-family:var(--font);font-size:14px;overflow-x:hidden}.ambient{position:fixed;pointer-events:none;border-radius:50%;filter:blur(100px);opacity:.12;z-index:-1}.ambient-a{width:300px;height:300px;background:#00d9ff;top:22%;left:30%}.ambient-b{width:250px;height:250px;background:#1269d3;right:4%;bottom:0}.topbar{height:76px;border-bottom:1px solid #1b3548;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#06101bd9;backdrop-filter:blur(18px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-icon{width:39px;height:39px;display:grid;place-items:center;color:var(--cyan);font-size:23px;border:1px solid #3a9eb4;border-radius:12px;box-shadow:0 0 22px #38dfff22,inset 0 0 12px #38dfff12}.brand strong{display:block;font-size:16px;letter-spacing:2px}.brand strong span{color:var(--cyan)}.brand small{display:block;color:#668399;font:9px var(--mono);letter-spacing:1.4px;margin-top:3px}.system-online{display:flex;gap:9px;align-items:center;color:#9fc5d4;font:10px var(--mono);letter-spacing:1.2px}.system-online i,.panel-indicator,.demo-label i{width:7px;height:7px;border-radius:50%;background:#4df5b5;box-shadow:0 0 12px #4df5b5;display:inline-block}.back-link{color:#91aabc;text-decoration:none;font-size:12px}.back-link:hover{color:var(--cyan)}.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);max-width:1600px;margin:auto;min-height:calc(100vh - 76px)}.sidebar{border-right:1px solid #1b3548;padding:28px 16px;display:flex;flex-direction:column;background:#07131fe0}.side-caption{font:10px var(--mono);letter-spacing:1.8px;color:#54748a;padding:0 12px 13px}.nav-button{width:100%;display:flex;align-items:center;gap:12px;padding:13px 12px;background:transparent;border:1px solid transparent;border-radius:9px;color:#8ba5b8;text-align:left;cursor:pointer;font:500 12px var(--font);margin-bottom:5px}.nav-button>span{font-size:18px;color:#7295aa;width:20px}.nav-button kbd{margin-left:auto;font:10px var(--mono);color:#4f7188}.nav-button:hover,.nav-button.active{background:linear-gradient(100deg,#15344a,#10273a);border-color:#26526a;color:#eafaff}.nav-button.active>span{color:var(--cyan)}.side-divider{height:1px;background:#193449;margin:22px 7px}.mini-status{display:flex;align-items:center;gap:9px;padding:12px;background:#0a1a28;border:1px solid #1b3a4d;border-radius:10px}.pulse{width:7px;height:7px;background:#54f5b6;border-radius:50%;box-shadow:0 0 10px #54f5b6}.mini-status strong,.mini-status small{display:block}.mini-status strong{font-size:11px}.mini-status small{font-size:9px;color:#7895a8;margin-top:4px}.mini-status b{font:9px var(--mono);color:#62e9bd;margin-left:auto}.side-footer{margin-top:auto;padding:16px 9px 0;border-top:1px solid #183246;display:flex;gap:11px;align-items:flex-start}.tiny-reactor{display:grid;place-items:center;width:28px;height:28px;border:1px solid #3c8fa5;border-radius:50%;color:var(--cyan);box-shadow:0 0 12px #2ddfff20}.side-footer p{font-size:10px;line-height:1.7;color:#aac0ce;margin:0}.side-footer small{color:#67869b}.main-area{padding:38px clamp(22px,4vw,62px) 30px;min-width:0}.view{display:none;max-width:1180px;margin:0 auto}.view.active{display:block}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px}.eyebrow{font:10px var(--mono);letter-spacing:1.7px;color:#76a3bc;display:flex;align-items:center;gap:9px}.eyebrow-line{width:23px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}h1{font-size:clamp(30px,4vw,45px);letter-spacing:-1.8px;line-height:1.17;margin:17px 0 11px;font-weight:700}h1 span{color:var(--cyan)}.lead{font-size:13px;color:#91aabd;line-height:1.7;margin:0}.reactor{width:132px;height:132px;position:relative;display:grid;place-items:center;flex-shrink:0;margin-right:7%}.reactor-ring{position:absolute;border-radius:50%;border:1px solid #42dfff77;inset:7px;box-shadow:0 0 28px #31dfff13,inset 0 0 24px #31dfff0a}.ring-one{border-style:dashed;animation:spin 24s linear infinite}.ring-two{inset:20px;border-color:#58a9ff77;animation:spin 16s linear infinite reverse}.reactor-core{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#c5f9ff 0,#39d9f8 20%,#146b9c 58%,#09253d 72%);color:#eaffff;font-weight:800;font-size:22px;box-shadow:0 0 20px #41e4ffb0,0 0 55px #30b8ff44}.orbit{position:absolute;width:5px;height:5px;background:var(--amber);border-radius:50%;box-shadow:0 0 10px var(--amber)}.orbit-one{top:13px;right:24px}.orbit-two{bottom:13px;left:20px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}@keyframes spin{to{transform:rotate(360deg)}}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:31px 0 22px}.quick-card{position:relative;text-align:left;min-height:113px;padding:16px;background:linear-gradient(135deg,#0e2334,#0a1927);border:1px solid #1b3d52;border-radius:12px;color:var(--text);cursor:pointer;transition:.18s}.quick-card:hover{border-color:#46cce9;transform:translateY(-2px);box-shadow:0 9px 30px #00cfff0b}.quick-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#12364a;color:var(--cyan);font-size:17px;margin-bottom:12px}.quick-card strong,.quick-card small{display:block}.quick-card strong{font-size:12px}.quick-card small{color:#7896a9;font-size:10px;margin-top:5px}.card-arrow{position:absolute;right:14px;top:14px;color:#54768b}.chat-panel,.image-preview-panel,.controls-panel{background:#0a1927d9;border:1px solid #1c3d52;border-radius:13px;overflow:hidden;box-shadow:0 15px 50px #00000018}.panel-top{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #19374b;background:#0c1e2d}.panel-top>div{display:flex;align-items:center;gap:9px}.panel-top strong{font-size:11px;letter-spacing:.2px}.tiny-label{font:9px var(--mono);letter-spacing:1px;color:#5e849c}.text-button{background:transparent;border:0;color:#7da0b5;font:10px var(--mono);cursor:pointer}.text-button:hover{color:var(--cyan)}.chat-messages{min-height:188px;max-height:340px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:18px}.message{display:flex;gap:11px;align-items:flex-start;max-width:92%}.message.user{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;border:1px solid #28738a;border-radius:9px;color:var(--cyan);background:#0e2b3c}.message.user .message-avatar{border-color:#73552e;color:var(--amber);background:#2b2115;font-size:10px}.message-name{font:9px var(--mono);letter-spacing:1px;color:#7da3b9;margin:1px 0 7px}.message-name span{margin-left:7px;color:#47687e}.message-bubble{background:#102638;border:1px solid #1b3e54;border-radius:2px 10px 10px 10px;padding:12px 14px;color:#d0e1ec;line-height:1.7;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.message.user .message-bubble{background:#142d3d;border-color:#28536a;border-radius:10px 2px 10px 10px}.composer{display:flex;align-items:flex-end;gap:12px;margin:0 16px;padding:9px 10px 9px 15px;border:1px solid #28536b;border-radius:11px;background:#06121e}.composer:focus-within{border-color:#44d7f0;box-shadow:0 0 0 3px #32d8f00d}.composer textarea{resize:vertical;max-height:130px;min-height:31px;flex:1;background:transparent;border:0;outline:0;color:#e8f8ff;font:12px/1.7 var(--font);padding:5px 0}.composer textarea::placeholder{color:#58758a}.composer button{width:34px;height:34px;flex-shrink:0;border:1px solid #4be1f4;border-radius:8px;background:linear-gradient(135deg,#51eaff,#2b9fc9);color:#061522;font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 0 15px #30dfff25}.composer-bottom{display:flex;justify-content:space-between;gap:10px;padding:11px 19px 14px;color:#55768b;font:9px var(--mono);letter-spacing:.2px}.demo-label{display:flex;align-items:center;gap:6px}.demo-label i{width:5px;height:5px}.fineprint{font-size:10px;line-height:1.6;color:#607f93;margin:15px 2px 0}.image-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);gap:16px;margin-top:28px}.preview-stage{min-height:390px;padding:20px;display:grid;place-items:center;background-color:#081521;background-image:linear-gradient(#19324744 1px,transparent 1px),linear-gradient(90deg,#19324744 1px,transparent 1px);background-size:25px 25px}.empty-preview{text-align:center;display:flex;flex-direction:column;align-items:center}.upload-symbol{width:57px;height:57px;display:grid;place-items:center;border:1px dashed #4a829b;border-radius:17px;color:var(--cyan);font-size:28px;margin-bottom:18px;background:#102638}.empty-preview strong{font-size:13px}.empty-preview p{font-size:11px;color:#7897ab;margin:8px 0 17px}.empty-preview small{font:9px var(--mono);color:#55768a;margin-top:12px;letter-spacing:1.2px}.preview-stage canvas{display:block;max-width:100%;max-height:500px;width:auto;height:auto;box-shadow:0 10px 40px #0008}.hidden{display:none!important}.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 16px;border-top:1px solid #19374b;color:#65879c;font:9px var(--mono)}.controls-panel{padding-bottom:14px}.upload-row{margin:15px 15px 19px;padding:12px;display:flex;align-items:center;gap:10px;border:1px dashed #2c5369;border-radius:9px;background:#0c2030;cursor:pointer}.upload-row>span:first-child{font-size:20px;color:var(--cyan)}.upload-row strong,.upload-row small{display:block}.upload-row strong{font-size:11px}.upload-row small{font-size:9px;color:#7594a9;margin-top:4px}.upload-row b{margin-left:auto;color:var(--cyan);font-size:18px}.control-group{padding:0 17px;margin:17px 0}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:#c3d7e4}.control-label output{font:10px var(--mono);color:var(--cyan)}input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer;height:4px}.filter-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:3px 15px 16px}.filter-button{border:1px solid #24465b;border-radius:7px;padding:9px 5px;background:#0c2030;color:#91aabd;font:10px var(--mono);cursor:pointer}.filter-button.active,.filter-button:hover{border-color:#3fcde7;color:var(--cyan);background:#103146}.edit-actions{display:flex;gap:8px;padding:0 15px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:37px;padding:0 13px;border-radius:7px;font:600 10px var(--font);text-decoration:none;cursor:pointer}.primary-button{background:linear-gradient(120deg,#59e8f8,#45b8e5);border:1px solid #64eafa;color:#041522}.primary-button:hover{filter:brightness(1.07)}.primary-button:disabled{opacity:.4;cursor:not-allowed}.secondary-button{background:#102638;border:1px solid #2a4b5e;color:#9bb5c6}.edit-actions .primary-button{flex:1}.privacy-note{font-size:9px;line-height:1.6;color:#5d8295;padding:0 16px;margin:13px 0 0}.nav-button:focus-visible,.quick-card:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.filter-button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:850px){.app-shell{grid-template-columns:68px minmax(0,1fr)}.sidebar{padding:24px 9px}.side-caption,.nav-button kbd,.mini-status>div,.mini-status b,.side-footer p{display:none}.nav-button{justify-content:center;padding:13px 5px;font-size:0}.nav-button>span{font-size:20px}.mini-status{justify-content:center;padding:12px 5px}.side-footer{justify-content:center}.tiny-reactor{flex-shrink:0}.main-area{padding:28px 22px}.image-layout{grid-template-columns:1fr}.preview-stage{min-height:280px}.controls-panel{max-width:none}}
@media(max-width:560px){.topbar{height:65px;padding:0 15px}.system-online{display:none}.brand small{font-size:7px}.app-shell{min-height:calc(100vh - 65px)}.main-area{padding:25px 14px}.hero-row{align-items:flex-start}.reactor{width:75px;height:75px;margin:0 0 0 3px}.reactor-core{width:31px;height:31px;font-size:16px}.ring-one{inset:3px}.ring-two{inset:12px}.quick-grid{grid-template-columns:1fr;gap:8px;margin:22px 0 16px}.quick-card{min-height:82px;padding:13px 13px 13px 53px}.quick-icon{position:absolute;left:13px;top:14px}.quick-card strong{padding-top:2px}.image-layout{margin-top:20px}.preview-stage{min-height:230px;padding:12px}.composer-bottom{font-size:8px}.back-link{font-size:10px}h1{font-size:30px}}

/* Klaro KI motion design: the AI insignia and reactor remain subtly animated */
.brand-icon{animation:orion-mark-turn 12s linear infinite;transform-origin:center;position:relative}
.brand-icon::after{content:"";position:absolute;inset:-5px;border:1px solid #57e7ff25;border-top-color:#57e7ff99;border-radius:15px;animation:orion-halo-turn 7s linear infinite}
.reactor-core{animation:orion-core-pulse 3s ease-in-out infinite}
.reactor-core::after{content:"";position:absolute;width:60px;height:60px;border:1px solid #57e7ff66;border-radius:50%;animation:orion-core-ring 2.8s ease-out infinite;pointer-events:none}
.reactor-core{position:relative}
@keyframes orion-mark-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orion-halo-turn{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes orion-core-pulse{0%,100%{filter:brightness(.92);box-shadow:0 0 20px #41e4ff80,0 0 45px #30b8ff30}50%{filter:brightness(1.2);box-shadow:0 0 28px #41e4ffdc,0 0 65px #30b8ff65}}
@keyframes orion-core-ring{0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Blau schimmernde, futuristische Oberfläche */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 15%,#1676ff08 35%,#6bc5ff12 48%,transparent 64%);background-size:220% 100%;animation:blueShimmer 12s ease-in-out infinite}
@keyframes blueShimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.brand-icon,.tiny-reactor{border-color:#4b9eff;box-shadow:0 0 22px #238bff35,inset 0 0 12px #238bff20}
.nav-button.active{background:linear-gradient(100deg,#123b70,#102a4b);border-color:#2466a8}
.primary-button,.composer button{background:linear-gradient(135deg,#1676e8,#1550a8);border-color:#3e9aff;box-shadow:0 0 22px #1676e833}
.primary-button:hover,.composer button:hover{filter:brightness(1.14)}


/* Klaro KI – freundlichere, ruhigere Oberfläche */
:root {
  --klaro-ink: #14233d;
  --klaro-muted: #5b6b83;
  --klaro-blue: #2f6fed;
  --klaro-sky: #eaf3ff;
  --klaro-card: rgba(255,255,255,.88);
}
body {
  background:
    radial-gradient(ellipse at 12% 4%, rgba(191,219,254,.58), transparent 36%),
    radial-gradient(ellipse at 92% 14%, rgba(196,244,232,.5), transparent 34%),
    linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);
  color: var(--klaro-ink);
}
.klaro-purpose {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 980px;
  margin: 26px auto;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(126,160,205,.28);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,247,255,.92));
  box-shadow: 0 18px 50px rgba(38,75,125,.09);
  color: var(--klaro-ink);
}
.purpose-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #dceaff, #d9f7ef);
  color: #245cc6;
  font-size: 25px;
  box-shadow: inset 0 0 0 1px rgba(67,112,184,.12);
}
.purpose-copy { min-width: 0; }
.purpose-eyebrow {
  margin: 0 0 6px;
  color: var(--klaro-blue);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.klaro-purpose h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  color: #14233d;
}
.klaro-purpose p {
  margin: 0 0 12px;
  color: #465875;
  line-height: 1.65;
}
.klaro-purpose .purpose-honesty {
  padding: 14px 16px;
  border-left: 3px solid #2f6fed;
  border-radius: 0 12px 12px 0;
  background: rgba(225,238,255,.68);
  color: #263d60;
}
.klaro-purpose .purpose-footnote {
  margin-bottom: 0;
  font-size: .88rem;
  color: #66758b;
}
@media (max-width: 600px) {
  .klaro-purpose {
    gap: 12px;
    margin: 18px 12px;
    padding: 18px;
    border-radius: 18px;
  }
  .purpose-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}


/* Moderner, gut sichtbarer Klaro-KI-Wordmark oben links */
.klaro-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 18px clamp(18px, 4vw, 48px);
}
.klaro-brand {
  display: inline-grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-decoration: none !important;
  color: #14213d !important;
  line-height: 1;
  max-width: max-content;
}
.klaro-brand-mark {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5b5ce2 0%, #8a5cf6 48%, #22c9b8 100%);
  box-shadow: 0 8px 22px rgba(91,92,226,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transform: rotate(-4deg);
}
.klaro-brand-mark span {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 9px rgba(255,255,255,.35);
}
.klaro-brand-mark span:nth-child(1) { height: 15px; opacity: .78; }
.klaro-brand-mark span:nth-child(2) { height: 25px; }
.klaro-brand-mark span:nth-child(3) { height: 19px; opacity: .88; }
.klaro-brand-word {
  align-self: end;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.45rem);
  font-weight: 850;
  letter-spacing: -.075em;
  line-height: .94;
  color: #17213e;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.klaro-brand-ai {
  display: inline-block;
  margin-left: 5px;
  font-size: .64em;
  font-weight: 900;
  letter-spacing: -.045em;
  vertical-align: .12em;
  color: #fff;
  padding: 6px 7px 5px;
  border-radius: 8px;
  background: linear-gradient(120deg, #5b5ce2, #8057e8 55%, #10a99b);
  box-shadow: 0 4px 12px rgba(91,92,226,.22);
}
.klaro-brand-tag {
  align-self: start;
  margin-top: 6px;
  color: #66718a;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .19em;
  line-height: 1.2;
}
.klaro-brand:hover .klaro-brand-mark {
  transform: rotate(0deg) scale(1.04);
  transition: transform .2s ease;
}
@media (max-width: 520px) {
  .klaro-topbar { min-height: 74px; padding: 14px 16px; }
  .klaro-brand { grid-template-columns: 42px auto; column-gap: 10px; }
  .klaro-brand-mark { width: 42px; height: 42px; border-radius: 14px; }
  .klaro-brand-word { font-size: 1.8rem; }
  .klaro-brand-tag { font-size: .54rem; letter-spacing: .13em; }
}

/* ── Klaro KI: neues Erscheinungsbild nach dem Referenzmotiv ── */
:root{
  --klaro-navy:#071a48;--klaro-deep:#061334;--klaro-electric:#087cff;
  --klaro-cyan:#10e4f4;--klaro-violet:#a51cff;--klaro-white:#f8fbff;
}
html{scroll-behavior:smooth}
body{
  color:#f8fbff;
  background:
    radial-gradient(ellipse at 78% 13%,rgba(0,198,255,.36),transparent 32%),
    radial-gradient(ellipse at 8% 8%,rgba(0,115,255,.56),transparent 36%),
    radial-gradient(ellipse at 70% 64%,rgba(113,30,255,.16),transparent 34%),
    linear-gradient(135deg,#0875c9 0%,#0b3c91 34%,#071b4c 70%,#06112e 100%);
  color:#f8fbff;min-height:100vh;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;background:linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.16) 49%,transparent 55%),radial-gradient(ellipse at 50% 110%,#7d2cff 0,transparent 55%)}
.ambient-a{width:560px;height:560px;left:35%;top:10%;background:#04dfff;opacity:.18;filter:blur(125px)}
.ambient-b{width:520px;height:520px;right:-5%;bottom:0;background:#9c20ff;opacity:.2;filter:blur(130px)}
.topbar{
  height:auto;min-height:112px;padding:18px clamp(20px,5vw,76px);
  background:linear-gradient(100deg,rgba(3,22,66,.84),rgba(4,34,94,.62));
  border-bottom:1px solid rgba(119,225,255,.32);box-shadow:0 12px 40px rgba(0,10,45,.18);
  backdrop-filter:blur(18px)
}
.klaro-brand{grid-template-columns:auto;grid-template-rows:auto auto;gap:4px;max-width:none}
.klaro-brand-mark{display:none}
.klaro-brand-word{font-size:clamp(3.2rem,7vw,6rem);font-weight:900;letter-spacing:-.075em;line-height:.82;color:#fff;text-shadow:0 3px 0 #1649a4,0 8px 28px rgba(0,0,0,.25)}
.klaro-brand-ai{margin-left:9px;padding:7px 12px 8px;font-size:.55em;vertical-align:.14em;border:1px solid rgba(255,255,255,.75);border-radius:13px;background:linear-gradient(135deg,#087eff,#123edc 54%,#a318ff);box-shadow:0 0 28px rgba(0,224,255,.38)}
.klaro-brand-tag{margin:11px 0 0 5px;color:#d7f7ff;font-size:clamp(.58rem,1.2vw,.82rem);letter-spacing:.34em;font-weight:800}
.system-online{color:#d5fbff;padding:10px 15px;border:1px solid rgba(112,239,255,.32);border-radius:999px;background:rgba(3,24,69,.48);box-shadow:inset 0 0 18px rgba(0,210,255,.08)}
.app-shell{display:block;max-width:1480px;min-height:calc(100vh - 112px);margin:0 auto}
.sidebar{display:none}
.main-area{padding:clamp(24px,4vw,56px) clamp(18px,4.5vw,72px) 46px}
.view{max-width:1240px}
.hero-row{position:relative;min-height:235px;align-items:center;gap:28px;padding:10px 0 24px}
.hero-copy{max-width:900px;position:relative;z-index:1}
.eyebrow{color:#b7f6ff;font-size:11px;font-weight:800;letter-spacing:2.6px}
.eyebrow-line{height:3px;width:38px;background:linear-gradient(90deg,#14f2ff,#a52dff);box-shadow:0 0 14px #15e8ff}
h1{margin:20px 0 16px;font-size:clamp(2.7rem,6.4vw,6rem);line-height:.98;letter-spacing:-.065em;font-weight:900;color:#fff;text-shadow:0 4px 0 rgba(3,33,103,.35),0 12px 36px rgba(0,0,0,.15)}
h1 span{color:#14e5f2;background:linear-gradient(90deg,#35f5ff,#7eeaff 45%,#c1a4ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lead{max-width:760px;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:#e1f4ff}
.reactor{width:clamp(105px,15vw,190px);height:clamp(105px,15vw,190px);margin:0 3% 0 0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#a5efff 5%,#168eff 18%,#07194a 47%,rgba(5,17,49,.1) 69%);box-shadow:0 0 0 1px #75f4ff,0 0 28px #0ce8ff77,0 0 80px #2b68ff55,inset 0 0 35px #0ff8ff77;flex-shrink:0}
.reactor-ring{inset:0;border:1px solid #75f5ff;box-shadow:0 0 25px #10ddff88,inset 0 0 20px #10ddff44}
.ring-one{border-style:solid}.ring-two{inset:14%;border:2px solid #a42aff;border-left-color:#12efff;border-bottom-color:#12efff}
.reactor-core{width:44%;height:44%;display:grid;place-items:center;border-radius:50%;font-size:clamp(24px,4vw,48px);color:#fff;background:linear-gradient(135deg,#11dff6,#1757ee 56%,#a318ff);box-shadow:0 0 26px #20e7ffbb;border:1px solid #b7fbff}
.reactor-core::after{width:100%;height:100%;border-color:#9afaff}
.orbit{border-color:#8ef9ff}
.klaro-purpose{max-width:none;margin:12px 0 26px;padding:clamp(20px,2.6vw,32px);gap:18px;border:1px solid rgba(180,238,255,.48);border-radius:22px;background:linear-gradient(115deg,rgba(5,25,76,.86),rgba(9,56,129,.72));box-shadow:0 20px 55px rgba(0,11,46,.22),inset 0 1px 0 rgba(255,255,255,.12);color:#f5fbff;backdrop-filter:blur(14px)}
.purpose-icon{flex-basis:50px;width:50px;height:50px;border-radius:16px;color:white;background:linear-gradient(135deg,#00bdf2,#234be9 55%,#a71dff);box-shadow:0 0 24px rgba(0,218,255,.3)}
.purpose-eyebrow{color:#50f0ff;letter-spacing:.16em}
.klaro-purpose h2{color:#fff;font-size:clamp(1.35rem,2.3vw,2rem);margin-bottom:9px}
.klaro-purpose p{color:#d9eaff;line-height:1.65}
.klaro-purpose .purpose-honesty{border-left:3px solid #16e6f4;background:rgba(0,181,255,.12);color:#f4fcff;border-radius:0 12px 12px 0}
.klaro-purpose .purpose-footnote{color:#a9c9eb}
.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 24px}
.quick-card{position:relative;min-height:164px;padding:20px 17px 18px;border:1px solid rgba(255,255,255,.62);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,240,255,.88));box-shadow:0 12px 30px rgba(0,14,59,.18),inset 0 1px 0 #fff;color:#112044;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.quick-card:hover{transform:translateY(-5px);border-color:#73f5ff;box-shadow:0 18px 38px rgba(0,12,52,.27),0 0 0 2px rgba(25,223,255,.16)}
.quick-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;font-size:25px;font-weight:800;color:#fff;background:linear-gradient(145deg,#0dc9f3,#1766ee 58%,#702aff);box-shadow:0 0 0 4px rgba(37,178,255,.12),0 6px 18px rgba(0,111,255,.26)}
.quick-card:nth-child(2) .quick-icon{background:linear-gradient(145deg,#bd35ff,#6323e9)}
.quick-card:nth-child(3) .quick-icon{background:linear-gradient(145deg,#05d6c3,#008c9b)}
.quick-card:nth-child(4) .quick-icon{background:linear-gradient(145deg,#ffc928,#e99a00)}
.quick-card strong{display:block;font-size:clamp(.92rem,1.2vw,1.08rem);font-weight:850;line-height:1.2;margin-bottom:7px}
.quick-card small{font-size:.88rem;color:#4c5b76;line-height:1.35}
.card-arrow{position:absolute;right:13px;top:10px;color:#8a9ab4;opacity:0;transition:opacity .2s}.quick-card:hover .card-arrow{opacity:1}
.chat-panel{overflow:hidden;border:1px solid rgba(128,231,255,.5);border-radius:24px;background:linear-gradient(145deg,rgba(4,20,61,.95),rgba(5,34,87,.94));box-shadow:0 24px 70px rgba(0,7,36,.34),inset 0 1px 0 rgba(255,255,255,.1)}
.panel-top{padding:18px 22px;border-bottom:1px solid rgba(118,221,255,.2);background:rgba(5,18,54,.6);color:#f5fbff}
.panel-top strong{font-size:14px;letter-spacing:.01em}.panel-indicator{background:#18f4b0;box-shadow:0 0 12px #18f4b0}
.text-button{color:#aeeaff}.text-button:hover{color:#fff}
.chat-messages{padding:22px;min-height:150px;max-height:480px}
.message{gap:13px;margin-bottom:22px}.message-avatar{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#05c9ef,#2459e8 60%,#8e24ff);box-shadow:0 0 20px #12dfff2e;font-weight:800}
.message-name{color:#b7eaff;font-size:11px;letter-spacing:.07em}.message-name span{color:#50e9f7}
.message-bubble{margin-top:8px;padding:15px 17px;border:1px solid rgba(129,207,255,.24);border-radius:4px 16px 16px 16px;background:rgba(13,49,103,.62);color:#eff8ff;line-height:1.7;white-space:pre-wrap}
.message.user .message-avatar{background:linear-gradient(135deg,#8d2cff,#4c3bda)}.message.user .message-bubble{background:rgba(21,77,158,.7);border-color:rgba(63,196,255,.34)}
.composer{display:flex;align-items:flex-end;gap:12px;margin:0 18px;padding:10px 11px 10px 17px;border:1px solid rgba(113,218,255,.5);border-radius:18px;background:rgba(2,16,49,.86);box-shadow:inset 0 0 18px rgba(0,130,255,.1)}
.composer textarea{min-height:43px;max-height:130px;padding:11px 0;background:transparent;color:#fff;font:500 14px var(--font);line-height:1.5}.composer textarea::placeholder{color:#8daed4}
.composer button{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#00dff2,#1768f3 58%,#a31cff);border:1px solid rgba(255,255,255,.65);box-shadow:0 0 24px rgba(0,207,255,.25);font-size:25px;color:#fff}
.composer-bottom{padding:12px 23px 17px;color:#87a9d0;font-size:9px;letter-spacing:.04em}.demo-label{color:#b8e9ff}.demo-label i{background:#19f4b0}
.nav-button:focus-visible,.quick-card:focus-visible,.composer button:focus-visible{outline:3px solid #1af0ff;outline-offset:3px}
@media(max-width:900px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-row{min-height:190px}.reactor{margin-right:1%}}
@media(max-width:600px){.topbar{min-height:84px;padding:15px 17px}.klaro-brand-word{font-size:3.25rem}.klaro-brand-tag{font-size:.5rem;letter-spacing:.19em;margin-top:8px}.system-online{font-size:8px;padding:8px 10px}.main-area{padding:25px 14px 32px}.hero-row{min-height:0;align-items:flex-start;padding:8px 0 18px}.hero-copy{max-width:100%}.hero-row .reactor{position:absolute;right:0;top:0;width:70px;height:70px;opacity:.78}.eyebrow{font-size:9px;letter-spacing:1.4px}h1{font-size:clamp(2.45rem,11vw,3.6rem);padding-right:24px;margin-top:17px}.lead{font-size:.98rem;padding-right:5px}.klaro-purpose{padding:17px;margin:8px 0 18px;gap:11px;border-radius:18px}.purpose-icon{width:36px;height:36px;flex-basis:36px;border-radius:12px;font-size:19px}.klaro-purpose h2{font-size:1.2rem}.klaro-purpose p{font-size:.9rem}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:18px 0}.quick-card{min-height:150px;padding:15px 9px 13px;border-radius:16px}.quick-icon{width:40px;height:40px;font-size:21px;margin-bottom:10px}.quick-card strong{font-size:.9rem}.quick-card small{font-size:.78rem}.panel-top{padding:15px}.chat-messages{padding:15px}.composer{margin:0 10px;padding:7px 7px 7px 12px;gap:7px}.composer button{flex-basis:42px;width:42px;height:42px}.composer-bottom{padding:11px 14px 14px;font-size:8px;gap:8px}.composer-bottom span:first-child{max-width:65%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.quick-card,.quick-icon{transition:none}}



/* Live-Websuche und freigegebene Quellen */
.live-search-status { margin: 10px 0 0; color: #9fc8ef; font-size: .86rem; line-height: 1.5; }
.live-search-status.error { color: #ffb4b4; }
.live-results { display: grid; gap: 10px; margin-top: 12px; }
.live-result { padding: 13px 15px; border: 1px solid rgba(124, 178, 239, .23); border-radius: 12px; background: rgba(8, 24, 49, .48); }
.live-result a { color: #8bd2ff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.live-result a:hover { text-decoration: underline; }
.live-result p { margin: 7px 0; color: #d0dced; line-height: 1.55; font-size: .9rem; }
.live-result small { color: #8ca7c9; }
.live-sources-footer { position: relative; z-index: 1; margin: 28px 24px 24px; border: 1px solid rgba(130,166,220,.22); border-radius: 18px; background: linear-gradient(145deg,rgba(13,32,66,.96),rgba(10,22,45,.98)); color: #eaf2ff; }
.live-sources-inner { max-width: 1280px; margin: 0 auto; padding: 22px 24px; }
.live-sources-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.live-sources-kicker { margin:0 0 7px; color:#76c7ff; font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.live-sources-heading h2 { margin:0; color:#fff; font-size:clamp(1.15rem,2.2vw,1.5rem); }
.live-sources-heading p:not(.live-sources-kicker) { max-width:850px; color:#b8c8df; line-height:1.55; font-size:.88rem; margin-bottom:14px; }
.method-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px; }
.method-steps article { display:flex; gap:11px; padding:14px; border:1px solid rgba(155,183,222,.17); border-radius:12px; background:rgba(255,255,255,.035); }
.method-steps article > span { color:#76c7ff; font-size:.76rem; font-weight:800; letter-spacing:.08em; }
.method-steps strong,.transparency-note strong { color:#fff; font-size:.9rem; }
.method-steps p,.transparency-note p { margin:6px 0 0; color:#b8c8df; font-size:.82rem; line-height:1.55; }
.transparency-note { margin-top:13px; padding:14px 16px; border-left:3px solid #76c7ff; border-radius:0 10px 10px 0; background:rgba(118,199,255,.07); }
.live-sources-note { margin:12px 0 0; color:#94a9c7; font-size:.78rem; line-height:1.5; }
@media(max-width:850px){.method-steps{grid-template-columns:1fr;gap:8px}}
@media(max-width:560px){.live-sources-footer{margin:22px 12px 12px}.live-sources-inner{padding:17px 14px}}


/* Monetarisierung: Premium, Anzeigenplatz und Einwilligungsdialog */
.monetization-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;margin:0 0 18px;padding:20px 22px;border:1px solid rgba(95,180,255,.3);border-radius:16px;background:linear-gradient(115deg,rgba(18,54,91,.85),rgba(9,26,45,.88));}
.monetization-copy h2{margin:8px 0 5px;color:#f4f9ff;font-size:1.16rem}.monetization-copy p{margin:0;color:#b4c8dc;line-height:1.5;font-size:.88rem}
.premium-pill{display:inline-flex;padding:5px 9px;border:1px solid rgba(111,207,255,.4);border-radius:999px;color:#8fdbff;font:700 .67rem var(--mono);letter-spacing:.12em}
.premium-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}.premium-actions strong{color:#e7f3ff;font-size:.9rem}
.premium-button{border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(110deg,#45b7ff,#3678ed);color:#041427;font-weight:800;cursor:pointer}.premium-button:hover{filter:brightness(1.08)}.premium-button:disabled{opacity:.55;cursor:wait}
.manage-premium-button,.consent-secondary{border:1px solid #42627e;border-radius:10px;padding:10px 13px;background:#10273b;color:#d7e9fa;cursor:pointer}
.premium-status{grid-column:1/-1;margin:0;color:#9bb4cc;font-size:.8rem;line-height:1.5}.ad-container{margin:0 0 18px;padding:12px 16px;border:1px solid rgba(137,164,191,.18);border-radius:12px;background:rgba(5,17,29,.48);min-height:100px}.ad-label{font:10px var(--mono);letter-spacing:.12em;color:#7994aa}.ad-slot{min-height:75px;display:flex;align-items:center;justify-content:center;text-align:center;color:#71899d;font-size:.8rem}.ad-slot ins.adsbygoogle{display:block;width:100%}
.premium-modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(1,8,17,.78);backdrop-filter:blur(9px)}.premium-modal-backdrop[hidden],.ad-container[hidden],.consent-banner[hidden],#managePremiumButton[hidden]{display:none}.premium-modal{position:relative;width:min(100%,480px);padding:30px;border:1px solid rgba(102,185,255,.35);border-radius:20px;background:#0c1d2e;box-shadow:0 25px 80px #0009}.premium-modal h2{margin:16px 0 8px;color:#f3f8ff}.premium-modal p,.premium-modal li{color:#b8cadd;line-height:1.65}.premium-modal ul{padding-left:20px}.premium-modal small{display:block;margin-top:13px;color:#7f9ab2;line-height:1.5}.premium-button.wide{width:100%;margin-top:12px}.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#c9dced;font-size:28px;cursor:pointer}.consent-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:110;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 20px;border:1px solid #3c6483;border-radius:15px;background:#0b1d2e;box-shadow:0 12px 50px #0008}.consent-banner p{max-width:720px;margin:6px 0 0;color:#adc2d6;font-size:.85rem;line-height:1.55}.consent-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:700px){.monetization-bar{grid-template-columns:1fr;padding:17px}.premium-actions{justify-content:flex-start}.consent-banner{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:stretch;gap:12px}.consent-actions>*{flex:1}.premium-modal{padding:24px 20px}}

/* Lokale Wissensdatenbank */
.knowledge-box{margin-top:14px;padding:17px;border:1px solid rgba(118,199,255,.24);border-radius:14px;background:rgba(4,18,34,.5)}
.knowledge-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.knowledge-head strong{color:#fff;font-size:.95rem}.knowledge-head p{margin:5px 0 0;color:#b8c8df;font-size:.82rem;line-height:1.5}.knowledge-count{flex-shrink:0;padding:5px 8px;border-radius:999px;background:rgba(118,199,255,.1);color:#9bd7ff;font-size:.72rem}
.knowledge-form{display:grid;gap:10px;margin-top:14px}.knowledge-form label{display:grid;gap:5px;color:#d7e6f6;font-size:.8rem}.knowledge-form input,.knowledge-form textarea{width:100%;box-sizing:border-box;border:1px solid #314b65;border-radius:8px;padding:10px 11px;background:#091827;color:#f4f8ff;font:inherit;font-size:.85rem}.knowledge-form input:focus,.knowledge-form textarea:focus{outline:2px solid #54c4ff;outline-offset:1px}.knowledge-form textarea{resize:vertical}.knowledge-form-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.knowledge-form-bottom span{color:#91a9c1;font-size:.75rem;line-height:1.45}.knowledge-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.knowledge-entry{min-width:0;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(155,183,222,.12)}.knowledge-entry strong,.knowledge-match-title{color:#bde4ff;font-size:.82rem}.knowledge-entry p{margin:5px 0;color:#b8c8df;font-size:.78rem;line-height:1.5;white-space:pre-wrap}.knowledge-entry small{color:#819db8;font-size:.7rem;overflow-wrap:anywhere}.knowledge-matches{margin:8px 0 12px}.knowledge-match-title{display:block;margin-top:12px}.knowledge-match strong{color:#d7f0ff}.knowledge-match p{white-space:pre-wrap}.live-result small{overflow-wrap:anywhere}
@media(max-width:650px){.knowledge-head{flex-direction:column}.knowledge-entries{grid-template-columns:1fr}}

/* Human-reviewed learning loop */
.learning-review{margin-top:18px;padding-top:15px;border-top:1px solid rgba(118,199,255,.18)}.learning-candidates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.learning-candidate{min-width:0;padding:12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(118,199,255,.18)}.learning-candidate strong{display:block;color:#e4f4ff;font-size:.84rem;line-height:1.4}.learning-candidate p{color:#b8c8df;font-size:.78rem;line-height:1.5;white-space:pre-wrap}.learning-candidate a{display:block;color:#8ed4ff;font-size:.75rem;overflow-wrap:anywhere}.learning-candidate small{display:block;margin-top:7px;color:#f0c98b;font-size:.7rem;line-height:1.4}.learning-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.learning-actions button{font-size:.75rem;padding:8px 10px}.learning-message,.learning-empty{color:#9bb1c9;font-size:.78rem;line-height:1.5;margin:8px 0}.learning-actions .text-button{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 10px}@media(max-width:650px){.learning-candidates{grid-template-columns:1fr}}