/* ===== Brand ===== */
:root{
  --isar:#388BBE; --isar-rgb:56,139,190;
  --muc:#71AACC;  --muc-rgb:113,170,204;
  --soft:#B6CEDA; --soft-rgb:182,206,218;
  --dark:#0F172A;
  --paper1:#FAF3E8; --paper2:#EFF6FB;
}

/* ===== Base / Reset ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--dark);
  background:linear-gradient(180deg, var(--paper1), rgba(var(--soft-rgb), .18), var(--paper2));
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
svg{display:block}
:focus-visible{outline:3px solid rgba(var(--isar-rgb), .5); outline-offset:2px}

/* ===== Layout ===== */
.container{max-width:1200px; margin-inline:auto; padding-inline:16px; position:relative; z-index:1}
section{position:relative; z-index:0; padding-block:72px; scroll-margin-top:80px}
@media(min-width:768px){ section{padding-block:100px} }

.tints{position:fixed; inset:0; z-index:-3; pointer-events:none}
.hero-river{position:absolute; inset:0; z-index:-2; pointer-events:none}
.ribbon{position:absolute; inset-inline:0; top:-40px; height:140px; pointer-events:none; will-change:transform; z-index:0}
#leistungen .container, #pakete .container, #prozess .container{z-index:1}

.divider{
  height:1px; margin-top:36px;
  background:linear-gradient(90deg, rgba(var(--isar-rgb), .35), rgba(var(--muc-rgb), .35), rgba(var(--soft-rgb), .35));
  opacity:.7; background-size:200% 100%; animation:divider-flow 14s linear infinite
}
@keyframes divider-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ===== Header & Nav ===== */
header{
  position:sticky; top:0; z-index:400;
  backdrop-filter:saturate(1.1) blur(12px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(255,255,255,.35)
}
.head{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-title .isar{color:var(--isar)}
.brand-title .dark{color:var(--dark)}
.brand-sub{font-size:10px; color:#334155}
nav ul{display:flex; gap:14px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
a.nav{position:relative; color:#334155; text-decoration:none; padding:6px 4px; border-radius:6px}
a.nav.active{color:var(--dark)}
a.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg, var(--muc), var(--paper1), var(--isar));
  transform:scaleX(0); transform-origin:left; transition:transform .25s
}
a.nav:hover::after, a.nav.active::after{transform:scaleX(1)}

/* ===== Progress ===== */
.progress{
  position:fixed; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--muc), var(--paper1), var(--isar));
  transform-origin:left; z-index:500
}

/* ===== Hero ===== */
.hero-wrap{display:grid; gap:18px; align-items:center; justify-items:center; padding-top:28px; padding-bottom:8px}
.hero-panel{
  max-width:900px; text-align:center;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:24px 20px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.hero-ribbon{margin-top:10px}

/* ===== Typography ===== */
h1{font-size:clamp(34px, 6.2vw, 72px); line-height:1.05; margin:0}
h2{font-size:clamp(22px, 3.6vw, 32px); margin:0 0 8px}
h3{font-size:18px; margin:8px 0 6px}
.lead{font-size:18px; color:#334155; margin:8px 0 0}
.soft{opacity:.95}

/* ===== CTA ===== */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  color:white;
  background:linear-gradient(90deg, var(--muc), var(--paper1), var(--isar));
  box-shadow:0 8px 24px rgba(56,139,190,.15);
  border:1px solid rgba(255,255,255,.35);
  transform:translateZ(0); transform-style:preserve-3d; will-change:transform;
  transition:transform .2s, box-shadow .2s
}
.cta:hover{box-shadow:0 10px 28px rgba(56,139,190,.2)}
.cta:active{transform:scale(.98)}
.cta.outline{background:white; color:var(--dark)}
.cta.sm{padding:10px 14px; font-weight:700}

/* hero ctas */
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}

/* ===== Grid & Cards ===== */
.grid{display:grid; gap:16px}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr}
@media(min-width:640px){ .cols-3{grid-template-columns:repeat(2,1fr)} .cols-4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} }

.card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
  border-radius:16px; padding:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  overflow:hidden; will-change:transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.card p{margin:6px 0 0; color:#334155}
.card .tag{font-size:12px; font-weight:700; color:var(--isar)}
.card ul.pkg{margin:10px 0 14px; padding-left:18px}
.card ul.pkg li{margin:4px 0}

/* Tilt Glow */
.card.tiltable::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%), rgba(var(--isar-rgb), .28), transparent 40%);
  opacity:0; transition:opacity .25s
}
.card.tiltable:hover::after{opacity:.85}

/* Micro-Flows in Prozesskarten */
.flow-card .micro-flow{
  position:absolute; right:-14px; bottom:-18px; width:180px; height:100px; opacity:.85; pointer-events:none
}

.row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.badge{
  height:32px; width:32px; border-radius:10px; display:grid; place-items:center; color:white; font-weight:800;
  background:linear-gradient(135deg, var(--muc), var(--paper1), var(--isar));
  box-shadow:0 8px 16px rgba(56,139,190,.18)
}
.hint{font-size:12px; color:#64748b}

/* ===== Stats ===== */
.stats{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:768px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stat{
  display:block; text-decoration:none; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  padding:14px; border-radius:14px; box-shadow:0 8px 24px rgba(15,23,42,.06);
  color:inherit; will-change:transform; transition: transform .25s ease
}
.stat:hover{transform:translateY(-2px)}
.stat-value{
  font-size:32px; font-weight:800;
  background:linear-gradient(90deg, var(--muc), var(--paper1), var(--isar));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.stat-label{font-size:14px; color:#334155; margin-top:4px}
.stat-src{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:#64748b}
.stat-src .dot{width:6px; height:6px; border-radius:999px; background:var(--isar)}

/* ===== Form ===== */
.form{width:100%}
.form-grid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:768px){ .form-grid{grid-template-columns:1fr 1fr} .form-grid .full{grid-column:1 / -1} }
.field label{display:block; font-size:12px; font-weight:700; color:#334155; margin:0 0 6px}
.input{
  width:100%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.96);
  border-radius:12px; padding:12px 14px; font:inherit; color:var(--dark);
  outline:none; box-shadow:0 4px 12px rgba(15,23,42,.04)
}
.input:focus{border-color:var(--isar); box-shadow:0 0 0 4px rgba(var(--isar-rgb), .16)}
textarea.input{min-height:140px; resize:vertical}
.checkboxline{display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#475569}
.checkboxline input{margin-top:3px}
.form-actions{display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap}
.note{font-size:12px; color:#64748b}
#kontakt .card{max-width:820px; margin:16px auto 0}

/* ===== Reveal ===== */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ===== Silhouette ===== */
.sil{margin-top:32px; opacity:.9}

/* ===== Utilities ===== */
.isar{color:var(--isar)}
.dark{color:var(--dark)}