/* =========================  KI_ana – Global Styles  =========================
   Mood: Apple + WhatsApp (warm, freundlich, ruhig), mit Lila/Blau Akzenten
   ========================================================================= */

/* Farbpalette & Tokens */
:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #1f2430;
  --muted: #667085;
  /* Erzwinge helles Farbschema für Form Controls auf Mobilgeräten */
  color-scheme: light;

  --brand-1: #7f7fd5;  /* Lila/Blau Verlauf */
  --brand-2: #86a8e7;
  --brand-3: #91eae4;

  --ok:   #22c55e;
  --warn: #f59e0b;
  --err:  #ef4444;

  --navH: 64px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(24,39,75,.06), 0 2px 6px rgba(24,39,75,.05);
}

/* Inter Variable Fonts (offline-ready) */
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Inter-roman.var.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Inter-italic.var.woff2') format('woff2');
}

/* Basis */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(145,234,228,.25), transparent 60%),
    radial-gradient(900px 600px at -10% 0%, rgba(161,140,209,.20), transparent 50%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  line-height: 1.45;
}

/* Medien-Safety */
img { max-width: 100%; height: auto; }

.container{ width: min(1200px, 92vw); margin: 0 auto; }
.container.narrow{ width: min(980px, 94vw); }

/* -------------------------  NAVIGATION / HEADER  ------------------------- */

.site-header{
  position: fixed; left:0; right:0; top:0; z-index:1000;
  backdrop-filter: saturate(120%) blur(8px);
  background: rgba(20, 24, 40, 0.7);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .nav-inner{
  display:flex; align-items:center; gap:16px; min-height: var(--navH);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  box-shadow: 0 8px 18px rgba(24,39,75,.10);
}
.site-header .brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.3px; color:#fff; text-decoration:none;
}
.site-header .brand img{
  width:28px; height:28px; border-radius:50%; object-fit:cover; aspect-ratio:1/1;
}
/* Brand-Picture nur im Header scopen */
.site-header .brand picture{
  display:inline-block; width:28px; height:28px; border-radius:50%; overflow:hidden;
}
.site-header .brand picture img{ width:100%; height:100%; object-fit:cover; }

.site-header .nav-links{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.site-header .nav-links a{
  color:#e9ecf5; text-decoration:none; padding:10px 12px;
  border-radius:8px; transition: background .2s ease, color .2s ease; font-weight:500;
}
.site-header .nav-links a:hover{ background: rgba(255,255,255,0.08); color:#ffffff; }
.site-header .nav-links a.active{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); color:#fff;
}
.site-header .nav-links .spacer{ flex:1 1 auto; }

/* Worker status lamp */
.nav-lamp{ display:inline-block; width:10px; height:10px; border-radius:999px; background: #8a8a8a; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; vertical-align: middle; }
.nav-lamp.on{ background:#30d158; }
.nav-lamp.off{ background:#ff453a; }

/* System status pill */
.nav-pill{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#e6e6e6; color:#222; font-size: 12px; font-weight:600;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset;
}

/* Dropdowns */
.site-header .nav-links details.dropdown {
  position: relative;
}
.site-header .nav-links details.dropdown > summary {
  list-style: none;
  cursor: pointer;
  color:#e9ecf5; padding:10px 12px; border-radius:8px; font-weight:500;
}
.site-header .nav-links details.dropdown > summary::marker,
.site-header .nav-links details.dropdown > summary::-webkit-details-marker { display:none; }
.site-header .nav-links details.dropdown > summary::after{
  content:"▾"; display:inline-block; margin-left:6px; font-size:.8em; opacity:.9;
}
.site-header .nav-links details[open] > summary,
.site-header .nav-links details.dropdown > summary:hover{
  background: rgba(255,255,255,0.08); color:#fff;
}
.site-header .nav-links details.dropdown .submenu{
  position:absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  display: none; padding:8px; border-radius:12px; box-shadow: var(--shadow);
  background: #ffffff; color: var(--text);
  border: 1px solid rgba(0,0,0,0.06);
}
.site-header .nav-links details[open] .submenu{ display:block; }
.site-header .nav-links details.dropdown .submenu a{
  display:block; padding:10px 12px; border-radius:8px; color: var(--text);
}
.site-header .nav-links details.dropdown .submenu a:hover{
  background: rgba(127,127,213,0.08);
}

/* Mobile: Dropdowns innerhalb der aufgeklappten Liste */
@media (max-width: 900px){
  .site-header .nav-links details.dropdown { width:100%; }
  .site-header .nav-links details.dropdown .submenu{
    position: static; display: none; padding: 6px; background: transparent;
    border: 0; box-shadow: none;
  }
  .site-header .nav-links details[open] .submenu{ display:block; }
  .site-header .nav-links details.dropdown > summary{ padding:12px; }
  /* Ensure submenu links have light text on dark mobile panel */
  .site-header .nav-links details.dropdown .submenu a{
    color: #e9ecf5;
  }
  .site-header .nav-links details.dropdown .submenu a:hover{
    background: rgba(255,255,255,0.08);
    color: #ffffff;
  }
}

.nav-toggle{
  display:none; margin-left:auto; width:42px; height:36px;
  border:0; border-radius:8px; background: rgba(255,255,255,0.08); cursor:pointer;
}
.nav-toggle:focus{ outline:2px solid rgba(255,255,255,0.35); outline-offset:2px; }
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px; }
@media (max-width: 900px){
  .site-header .nav-links{
    position:absolute; left:0; right:0; top: var(--navH); display:none;
    flex-direction:column; align-items:stretch; background: rgba(20,24,40,0.96);
    padding:12px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .site-header .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .site-header .nav-links a{ padding:12px; } /* größere Tap-Targets */
}

/* Fokus sichtbar (A11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.site-header .nav-links a:focus-visible{
  outline: 3px solid rgba(127,127,213,.5);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Fallback für fehlende backdrop-filter-Unterstützung */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .site-header{ background: rgba(20,24,40,0.92); }
}

/* Platz unter Topbar für Seiteninhalte */
body, body.page{ padding-top: var(--navH); }

/* -----------------------------  HERO / SEITEN  ---------------------------- */

/* Hero final: 100% zentriert, zweispaltig */
.hero{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 40px;
  align-items: center;
  justify-content: center;   /* Spaltenblock zentrieren */
  justify-items: center;     /* Inhalte in Spalten zentrieren */
  text-align: center;
  padding: 48px 0 26px;
}
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(840px, 94vw);
    padding: 28px 0;
  }
}
@media (min-width: 1280px){ .hero{ width: min(1100px, 92vw); } }

.brand-row, .hero .hero-copy, .hero .cta, .hero .hero-media{
  justify-content: center; text-align: center;
}
.hero-media figure{ margin: 0 auto; }

/* Karten / Flächen */
.card{ background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.paper{ background:#fff; border-radius:16px; box-shadow: var(--shadow); padding: 24px; }

/* Typo */
h1{ font-size: clamp(2rem, 2.8vw + 1rem, 3.2rem); margin: 6px 0 10px; }
h2{ font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);  margin: 12px 0 10px; }
p.lead{ color: var(--muted); font-size: 1.05rem; }

.gradient-text{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:12px 18px; font-weight:700;
  transition:.22s ease; text-decoration:none;
  background: rgba(20,24,40,.06);
  color: var(--text);
}
.btn-primary,
.primary,
#send, #sendBtn, .send{
  color:#fff;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  box-shadow: var(--shadow);
}
.btn-ghost,
.btn.alt,
.btn.secondary{
  background: transparent;
  color: var(--text);
  border:1px solid rgba(0,0,0,.12);
}
.btn-primary:hover,
.primary:hover,
#send:hover, #sendBtn:hover, .send:hover{
  transform: translateY(-1px) scale(1.01); filter: brightness(1.02);
}
.btn-primary:active,
.primary:active,
#send:active, #sendBtn:active, .send:active{
  transform: translateY(0) scale(.99);
}

/* Features: zentriertes Grid */
.features{
  display:grid; gap:18px;
  grid-template-columns: repeat(3,1fr);
  width: min(1200px, 92vw);
  margin: 10px auto 40px;
  justify-items: center;
}
.features .feature{ max-width: 360px; text-align: center; }
@media (max-width: 980px){ .features{ grid-template-columns: 1fr } }

/* Bildbox */
.hero .photo.card{ padding:0; overflow:hidden }
.hero .photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* Avatar (rund, freundlich) */
.avatar-ki{
  width: 88px; height: 88px; border-radius:50%; object-fit:cover;
  box-shadow:0 4px 10px rgba(0,0,0,.20);
  border:3px solid #6a5acd; transition:transform .25s ease;
}
.avatar-ki:hover{ transform:scale(1.05) }
.mt-avatar{ margin-top: 10px; }

/* -----------------------------  FORMULARE  -------------------------------- */

.form{ display:grid; gap:14px; }
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12); background:#fff; outline:0; font-size:1rem;
}
.help{ color: var(--muted); font-size:.9rem }
input, textarea, select { font-size: 16px; } /* iOS Zoom verhindern */
/* Sichtbare Texte in Formularfeldern (verhindert weiße Schrift auf weißem Grund bei Dark‑Mode Geräten) */
input, textarea, select {
  color: var(--text);
  background-color: #fff;
  border-color: rgba(0,0,0,.12);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, #fff 0%); }

/* Buttons als echte, helle Buttons – unabhängig vom System-Dark-Mode */
button.btn, input[type="button"].btn, input[type="submit"].btn {
  color: var(--text);
  background: rgba(20,24,40,.06);
}

/* Einheitliches Focus-Styling für Textarea/Input (#msg) */
#msg{
  flex:1; min-height: 40px; max-height: 36vh; resize: vertical;
  padding: 12px 14px; border-radius: 14px;
  border:1px solid rgba(0,0,0,.14); background:#fff; font-size:1rem; line-height:1.4; outline:none;
}
#msg:focus{
  /* Fallback zuerst, dann moderne Variante */
  border-color: var(--brand-2);
  border-color: color-mix(in srgb, var(--brand-2) 55%, #000 0%);
  box-shadow: 0 0 0 4px rgba(127,127,213,.15);
}

/* ------------------------------  CHAT  ------------------------------------ */

.chat-wrap{
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width: 960px){ .chat-wrap{ max-width: 96vw; border-radius: 14px; } }

#chat{
  height: auto;
  min-height: calc(100vh - 300px);
  padding: 18px 18px 10px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}

.msg{
  max-width: 68%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 1rem; line-height: 1.5;
  background:#fff; box-shadow: var(--shadow);
}
.msg.kiana{ align-self:flex-start; background: #eef1ff; }
.msg.user { align-self:flex-end;   background: #e6ffef; }

/* Small meta line under messages (e.g., cid) */
.msg .meta{
  margin-top: 6px; font-size: 12px; color: var(--muted);
}

.msg .meta .copy-btn{
  display: inline-flex; align-items: center; gap:4px;
  margin-left: 8px; padding: 2px 6px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03);
  color: var(--muted); font-size: 11px; cursor: pointer;
}
.msg .meta .copy-btn:hover{ background: rgba(0,0,0,0.06); }

/* Eingabebereich */
#input-area{
  display:flex; gap:12px; padding:12px;
  background:#fff; border-top:1px solid rgba(0,0,0,.06);
  position: sticky; bottom:0;
}
.primary, #send, #sendBtn, .send{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 140px; padding: 12px 18px; border-radius:999px; border:0; cursor:pointer; font-weight:700;
}

/* Typing-Indicator (… KI_ana denkt) */
.typing{
  align-self:flex-start; display:inline-flex; gap:6px; padding:10px 14px;
  background:#eef1ff; border-radius:18px; box-shadow: var(--shadow);
}
.dot{
  width:6px; height:6px; border-radius:50%;
  background:#6a5acd; opacity:.6; animation: blink 1.2s infinite;
}
.dot:nth-child(2){ animation-delay:.2s }
.dot:nth-child(3){ animation-delay:.4s }
@keyframes blink{
  0%, 80%, 100%{ transform: translateY(0); opacity:.6 }
  40%{ transform: translateY(-4px); opacity:1 }
}

/* Mobile Tuning */
@media (max-width: 640px){
  .msg{ max-width: 82%; font-size: .98rem; }
  #msg{ min-height: 40px; }
}

/* ------------------------------  FOOTER  ---------------------------------- */
footer{ color: var(--muted); font-size:.9rem; padding: 20px 0 60px; }

/* Kleinzeug */
.inline{ display:inline-flex; align-items:center; gap:8px }
.mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px }

/* Weniger Bewegung – Accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* --- HERO: auf einspaltiges Flex umstellen und wirklich zentrieren --- */
.hero{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal mittig */
  justify-content: center;  /* vertikal in der Section */
  text-align: center;
  gap: 24px;
  padding: 48px 0 26px;
}

.hero .hero-inner{
  width: 100%;
  max-width: 820px;         /* angenehme Zeilenlänge für Text */
  margin: 0 auto;
}

/* Mobil bleibt alles schön schmal */
@media (max-width: 980px){
  .hero{
    width: min(840px, 94vw);
    padding: 28px 0;
  }
}