/* ========== Coretek Theme – konsolidiert ========== */
:root{
  /* Farben */
  --bg:#0b1020; --fg:#e7ecf7; --muted:#aab6d3;
  --card:#121833; --card-2:#0f1530;
  --primary:#2b6cff; --primary-2:#1f55cc;
  --accent:#ff7a18; --success:#19c37d; --danger:#ff4d4d;
  --brand:#0e6582;           /* Blau */
  --accent-brand:#ff7a59;    /* Orange/CTA */

  /* Layoutbreiten */
  --container: 1180px;       /* Standard */
  --container-wide: 1600px;  /* Wide */

  /* Sonstiges */
  --radius:18px; --shadow:0 8px 30px rgba(0,0,0,.25);
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Reset & Typo */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  color:var(--fg);
  font:500 16px/1.55 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}


/* Header / Nav (hell, sticky) */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eaf0f4}
header .row{max-width:var(--container);margin:0 auto;padding:0 18px;height:64px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px;color:#0f3441}
.brand img{height:32px}
nav{margin-left:auto;display:flex;gap:18px;align-items:center}
nav a{padding:10px 12px;border-radius:12px;color:#0f3441} nav a:hover{background:#f3f7fb}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid transparent;background:var(--accent-brand);color:#fff;font-weight:700}
.btn:hover{filter:brightness(.96)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #dfe8f1;color:#0f3441;background:#fff}
.btn-accent{background:var(--accent-brand);border-color:var(--accent-brand)}

/* Cards & Grid */
.card{background:#fff;border:1px solid #e6eef3;border-radius:14px;padding:22px;color:#0b1020}
.grid{display:grid;gap:22px}
.grid.cols-1{grid-template-columns:1fr}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

h1{font-size:40px;line-height:1.15;color:#0f3441;margin:0 0 12px}
h2{font-size:28px;line-height:1.25;color:#0f3441;margin:0 0 14px}
h3{font-size:20px;line-height:1.35;color:#0f3441;margin:0 0 10px}
.small{font-size:13px;color:#60778a}
p{color:#2a3d47}

/* ===== Abschnittsbreiten ===== */
.section{ padding:56px 0; }
.section .inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 18px;
}
.section--wide .inner{ max-width: var(--container-wide); }
.section--full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.section--full .inner{ max-width:100%; padding-inline:0; }

/* ===== Hintergrund-Presets (per Builder auswählbar) ===== */
.section--bg-light{ background:#f7fbff; }
.section--bg-tint{ background:linear-gradient(180deg,#f7fbff 0%, #ffffff 100%); }
.section--bg-brand{ background:#0e6582; color:#fff; }
.section--bg-dark { background:#0b1229; color:#e6eeff; }
.section--bgimg{ background-size:cover; background-position:center; }

/* Elemente, die bei dunklem BG heller werden sollen */
.section--bg-brand .card,
.section--bg-dark .card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e9f1ff }

/* ===== Hero / Mini-Chat / Collagen / Kategorien ===== */
.ja-hero-copy h1{ font-size:40px; line-height:1.1; margin:0 0 8px; }
.ja-mini-chat{ background:#fff; border-radius:14px; padding:12px; width:320px; box-shadow:0 10px 26px rgba(0,0,0,.10); }
.ja-mini-chat textarea{ width:100%; min-height:120px; border:1px solid #e0e7ff; border-radius:10px; padding:10px; resize:vertical; }
.ja-mini-chat .btn{ margin-top:10px; width:100%; }

.ja-collage{ display:grid; gap:12px; }
.ja-colimg{ width:220px; height:200px; border-radius:16px; background-size:cover; background-position:center; }
.ja-collage.left{ justify-items:end; }
.ja-collage.right{ justify-items:start; }

.ja-catbar{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; padding:12px 0; }
.ja-catbar a{ color:#0e6582; font-weight:600; }

/* Handy-Mockup */
.ja-how h2, .ja-experts h2, .ja-why h2{ margin:0 0 14px; }
.ja-step{ background:#eaf6ff; color:#0b1020; }
.ja-phone .screen{ width:260px; height:420px; background:#eaf2ff; border-radius:26px; padding:16px; }
.ja-phone .bubble{ background:#fff; border-radius:14px; padding:10px 12px; margin:10px 0; max-width:86%; box-shadow:0 6px 14px rgba(0,0,0,.12); }
.ja-phone .bubble.left{ margin-right:auto; }
.ja-phone .bubble.right{ margin-left:auto; background:#dff1ff; }

/* Listen / Logos */
.ja-check{ list-style:none; padding:0; margin:0; }
.ja-check li::before{ content:"✓ "; color:#19c37d; font-weight:900; margin-right:6px; }

.ja-logos{ display:flex; gap:36px; justify-content:center; align-items:center; }
.ja-logos img{ height:32px; opacity:.9; filter:grayscale(10%); }

/* ===== Builder-UI (leicht) ===== */
.builder-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.builder-canvas{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.block{border:1px dashed rgba(0,0,0,.15);border-radius:12px;padding:12px;background:#fff;color:#0f3441}
.block:hover{border-color:#0f6e7e}
.block .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.block .title{font-weight:700;color:#0f3441}
.block .ctrls{display:flex;gap:8px}
.block input[type=text], .block textarea, .block input[type=number], .block select{
  width:100%;background:#fff;border:1px solid #dbe7ef;border-radius:10px;padding:10px;color:#0f3441
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.item-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.handle{cursor:grab;padding:4px 8px;border:1px solid #dbe7ef;border-radius:8px}
.smallmuted{font-size:12px;color:#6a7f8a}

.builder-row{display:grid;gap:12px}
.builder-col{border:1px dashed #d3e8ef;border-radius:10px;padding:10px;background:#f7fdff}
.builder-col-toolbar{display:flex;gap:6px;margin-bottom:8px}
.col-grid{display:grid;gap:8px}
.btn-xs{padding:6px 10px;border-radius:8px;border:1px solid #cfe5ec;background:#fff;color:#0f3441}
.btn-xs.danger{border-color:#ffb3b3;color:#a10000;background:#fff}
/* Experten-Slider */
.experts-slider .track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.experts-slider .exp{ scroll-snap-align: start; }
.experts-slider .nav{
  border:1px solid #e6eef3; background:#fff; color:#0f3441;
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.exps{ display:flex; align-items:center; gap:10px; }
.experts-slider .avatar{ width:48px; height:48px; border-radius:50%; margin-right:10px; }
.experts-slider .exp .exp-top{ display:flex; align-items:center; }
.experts-slider .rating{ color:#f39c12; }