/* Design Tokens */
:root{
  --bg: #f7f9fc;           /* app background */
  --bg-elev: #ffffff;       /* elevated surfaces */
  --panel: #ffffff;         /* panels */
  --card: #ffffff;          /* cards */
  --line: #e5e7eb;          /* borders */
  --muted: #64748b;         /* text-muted */
  --text: #0f172a;          /* text */
  --brand: #1d4ed8;         /* primary */
  --brand-2: #2563eb;       /* primary alt */
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow: 0 8px 24px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
  --radius: 14px;
  --radius-s: 10px;
  --radius-xs: 8px;
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
img{max-width:100%;}

/* Layout utilities */
.container{max-width:var(--container); margin-inline:auto; padding: clamp(16px, 2vw, 24px);}
.section{padding: clamp(32px, 6vw, 84px) 0;}
.section.alt{background: #f3f6fa;}
.row{display:flex; gap: 16px;}
.row.center{align-items:center}
.row.space-between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap: 16px;}
.stack.s{gap:8px}
.stack.l{gap:24px}
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns: repeat(1, minmax(0,1fr));}
.grid.three{grid-template-columns: repeat(1, minmax(0,1fr));}
@media(min-width: 880px){
  .grid.two{grid-template-columns: 1.2fr .8fr}
  .grid.three{grid-template-columns: repeat(3, 1fr)}
}

/* Align So funktioniert's section start with slight left bias like hero */
@media(min-width: 880px){
  section#ablauf .grid.two{ grid-template-columns: 1.2fr .8fr; }
}
.gap{gap: 12px}
.gap.s{gap:8px}
.gap-xl{gap: 32px}
.m-top{margin-top:16px}
.m-bottom{margin-bottom:8px}
.lead{font-size: clamp(1.05rem, 1.2vw + .6rem, 1.25rem); color: var(--muted)}
.display{font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); line-height:1.2}
.small{font-size:.9rem}
.muted{color:var(--muted)}


/* Header */
.site-header{position:sticky; top:0; z-index: 20; backdrop-filter:saturate(1.2) blur(10px); background: rgba(255,255,255,.85); border-bottom:1px solid var(--line)}
.brand{color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.3px}
.brand .logo{width:28px; height:28px; border-radius:8px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-right:10px}
.brand .logo-img{height:70px; width:auto; object-fit:contain; border-radius:8px; margin-right:10px; background:#fff0}
.brand-text{font-size:1.02rem}

.site-nav{position:fixed; inset:64px 0 auto 0; background: #ffffff; border-top:1px solid var(--line); transform: translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;}
.site-nav ul{list-style:none; margin:0; padding:16px 24px; display:flex; flex-direction:column; gap:8px}
.site-nav a{color:var(--text); text-decoration:none; padding:10px 12px; display:block; border-radius:10px}
.site-nav a:hover{background:#f1f5f9}
.site-nav .btn{display:inline-block}
.site-nav .divider{height:1px; background: var(--line); margin:6px 0}

@media(min-width: 980px){
  .site-nav{position:static; transform:none; opacity:1; pointer-events:auto; background:transparent; border:0}
  .site-nav ul{flex-direction:row; padding:0}
  .site-nav .divider{display:none}
}

.nav-toggle{display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; border:1px solid var(--line); background:#ffffff; color:var(--text); border-radius:10px}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin-inline:auto}
@media(min-width:980px){.nav-toggle{display:none}}

/* Buttons */
.btn{--bg: #f8fafc; --fg: var(--text); background:var(--bg); color:var(--fg); padding:10px 14px; border-radius:12px; border:1px solid var(--line); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn:hover{background:#f1f5f9}
.btn.primary{--bg: linear-gradient(135deg, var(--brand), var(--brand-2)); --fg:#ffffff; border: none; color: var(--fg)}
.btn.ghost{background:transparent; border:1px solid #cbd5e1; color:var(--text)}
.btn.lg{padding:12px 18px}
.btn.block{display:block; width:100%}
.btn.on-dark{--bg:#ffffff; --fg:#0f172a}

/* Hero */
.hero{position:relative}
.hero .gradient{position:absolute; inset:-2px 0 0; z-index:-1; background: radial-gradient(900px 600px at 70% -10%, rgba(37,99,235,.08), transparent 60%)}
.hero .card{background: linear-gradient(180deg, #ffffff, #ffffff); border: 1px solid var(--line); box-shadow: var(--shadow)}
.card{
  border-radius: var(--radius);
  /* subtle gradient border with white fill */
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(180deg, #e9edf5, #dfe5ef) border-box;
  border: 1px solid transparent;
  box-shadow: 0 1.5px 2.5px rgba(2,6,23,.04), 0 1px 1.5px rgba(2,6,23,.03);
}
.card.inset{background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); border:1px solid var(--line)}
.card.hoverable{transition:.2s transform ease, .2s box-shadow ease}
.card.hoverable:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  /* brand‑tinted border on hover */
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(180deg, rgba(37,99,235,.25), rgba(37,99,235,.12)) border-box;
}
.card.float{transform: translateY(0); animation: float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 12px 18px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #fcfdff, #f7f9fc);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card-body{padding:18px 18px 18px 22px}
/* removed window dots to keep headers clean */

/* Dashboard video inside hero card */
.hero-card .dashboard-video{display:block; width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#000}
.hero-card .dashboard-video + .chart{display:none}

.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.kpi{background: #f8fafc; border:1px solid var(--line); border-radius:12px; padding:10px}
.kpi-val{font-weight:800; font-size:1.2rem}
.kpi-val .up{color: #22c55e; font-size:.85rem}
.kpi-label{color:var(--muted); font-size:.85rem}
.chart{display:grid; grid-template-columns: repeat(8, 1fr); gap:10px; align-items:end; height:120px; margin-top: 16px}
.chart .bar{background: linear-gradient(180deg, rgba(37,99,235,.7), rgba(37,99,235,.4)); border-radius:6px}
.chart .bar.a{height:40%}
.chart .bar.b{height:65%}
.chart .bar.c{height:80%}
.chart .bar.d{height:55%}

/* Logos */
.logos .logo-pill{opacity:.8; border:1px solid #e2e8f0; color:#64748b; padding:10px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:.2em}

/* Lists */
.list{padding-left:18px}
.list li{margin:8px 0}
.list.check{list-style:none; padding-left:0}
.list.check li{padding-left:26px; position:relative}
.list.check li::before{content:"✔"; position:absolute; left:0; color:#22c55e}

.icon{width:40px; height:40px; border-radius:12px; background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(37,99,235,.08)); border:1px solid #e2e8f0}
.icon.shield{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2l7 3v6c0 5-3.4 9.4-7 10-3.6-.6-7-5-7-10V5l7-3z"/></svg>') center/60% no-repeat; background: linear-gradient(135deg, rgba(10,132,255,.8), rgba(0,212,255,.6))}
.icon.hammer{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 21l10-10 3 3L5 24H2v-3zm9-13l3-3 3 3-3 3-3-3z"/></svg>') center/60% no-repeat; background: linear-gradient(135deg, rgba(10,132,255,.8), rgba(0,212,255,.6))}
.icon.chart{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M3 3h2v18H3V3zm6 8h2v10H9V11zm6-6h2v16h-2V5zm6 12h2v4h-2v-4z"/></svg>') center/60% no-repeat; background: linear-gradient(135deg, rgba(10,132,255,.8), rgba(0,212,255,.6))}

/* Steps */
.steps{counter-reset: step; list-style:none; padding:0; margin:0; display:grid; gap:16px}
.steps li{background: #ffffff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.steps h4{margin:.2rem 0}

/* So funktioniert's (Ablauf) — center and pad the Mandantenportal card */
section#ablauf .grid.two > .card.inset{
  padding: 20px 24px;
  margin-top: 95px;
}
@media(min-width: 880px){
  section#ablauf .grid.two{ grid-template-columns: 1fr 1fr; align-items: start; justify-items: start; }
  section#ablauf .grid.two > .card.inset{ justify-self: center; width: auto; max-width: 520px; }
}

/* Pricing */
.price .price-tag{margin:10px 0 16px; color:var(--muted)}
.price .big{font-size:1.6rem; font-weight:800; color:var(--text)}
.price.featured{outline: 2px solid rgba(37,99,235,.25); position:relative}
.price .tag{position:absolute; top:12px; right:12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#041420; border-radius:999px; padding:6px 10px; font-weight:800}

/* Sicherheit card: show embedded video */
.shield-card{position:relative; min-height:220px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.shield-card .shield-video{display:block; width:100%; height:100%; object-fit:cover; border-radius: var(--radius);}

/* CTA */
.section.cta{background: linear-gradient(135deg, #1d4ed8, #2563eb); color:#ffffff; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.section.cta .btn{box-shadow: 0 8px 24px rgba(2,6,23,.12)}

/* Footer */
.site-footer{padding:40px 0; border-top:1px solid var(--line); background: var(--bg)}
.footer-grid{display:grid; gap:24px; align-items:start}
@media(min-width:880px){
  .footer-grid{grid-template-columns: 1.2fr 1fr auto}
  .footer-grid > nav.footer-nav{ justify-self: end; }
}
@media(min-width:880px){
  section#ablauf .grid.two{ grid-template-columns: 1.2fr .8fr; align-items: start; justify-items: start; }
}
.footer-heading{margin:0 0 8px; font-size:1rem; font-weight:700; color:#0f172a}
.footer-nav a{color:#475569; text-decoration:none; margin-left:16px}
.footer-nav a:hover{color:var(--brand)}
.footer-nav.column a{display:block; margin:6px 0 0 0}
@media(min-width:880px){
  .footer-nav.column{display:block}
  .footer-nav.column .footer-heading{margin-bottom:8px}
  .footer-nav.column a{display:inline-block; margin:0 16px 0 0}
}

/* Footer contact list */
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{display:flex; align-items:flex-start; gap:10px; margin:6px 0; color:#334155}
.contact-list a{color:#0f172a; text-decoration:none}
.contact-list a:hover{color:var(--brand); text-decoration:underline}

/* Small icons for footer */
.icon.small{width:18px; height:18px; border-radius:6px}
.icon.phone{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6.6 10.8c1.5 2.9 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h2.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z"/></svg>') center/70% no-repeat; background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(37,99,235,.15)); border:1px solid #e2e8f0}
.icon.mail{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') center/70% no-repeat; background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(37,99,235,.15)); border:1px solid #e2e8f0}
.icon.map{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/></svg>') center/70% no-repeat; background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(37,99,235,.15)); border:1px solid #e2e8f0}

/* Footer/Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Animation on view */
[data-animate]{opacity:0; transform: translateY(10px); transition:.4s ease}
[data-animate].in{opacity:1; transform: translateY(0)}

/* Cards */
.hero-card{max-width: 520px}
/* Portal preview card centering and sizing */
.portal-card{ max-width: 420px; margin-left:auto; margin-right:auto; justify-self:center; }
.portal-card .card-header{ padding:14px 20px; }
.portal-card .card-body{ padding:22px 24px; }

/* Portal section uses default container and grid; background set via .section.light in HTML */

/* Elevation border on scroll */
[data-elevate]{transition: box-shadow .2s ease}
.scrolled{box-shadow: 0 8px 20px rgba(2,6,23,.08)}

/* Light sections helper (kept for compatibility) */
.section.light{background:#ffffff}
.section.light .card{
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(180deg, #e9edf5, #dfe5ef) border-box;
  border-color: transparent;
}
.section.light .btn.ghost{border-color:#cbd5e1}
.section.light .logos .logo-pill, .section.light.logos .logo-pill{opacity:1; border-color: #e2e8f0; color:#64748b}

/* Forms */
.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; color:#0f172a}
.field .hint{font-size:.9rem; color:#64748b}
input[type="text"], input[type="email"], input[type="password"], .input{
  appearance:none; width:100%;
  border:1px solid var(--line);
  background:#ffffff; color:#0f172a;
  padding:12px 12px; border-radius:10px; font-size:1rem;
}
input::placeholder{color:#94a3b8}
input:focus{outline:none; border-color:#93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,.12)}
.checkbox{display:flex; align-items:center; gap:10px}
.form .actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px}
.auth{min-height:70vh; display:grid; place-items:center; background:#f8fafc}
.auth .auth-card{max-width:400px; width:100%}
.auth .auth-card .card-body{ padding:20px 20px 22px 22px }
.auth .brand-center{justify-content:center}

/* Form error */
.form-error{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; padding:10px 12px; border-radius:10px; font-weight:600}

/* Centered section helper for card content */
.section.centered .card{ text-align:center; }
.section.centered .icon{ margin: 2px auto 8px; display:block; }
.section.centered .list{ display:inline-block; text-align:left; margin: 8px auto 0; }
.section.centered .price{ text-align:center; }