:root{
  --bg:#ffffff; --ink:#0a0a0a; --muted:#6e6e73; --line:#e5e5ea;
  --btn:#1d1d1f; --btn-text:#ffffff; --brand:#0071e3;
  --radius: 18px; /* NEU: einheitlicher Eckenradius */
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial;
  color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}

.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* Header */
header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
/* === Nav Pills (einheitlich) === */
.links { display:flex; gap:12px; align-items:center; }   /* gleichmäßige Abstände */

.pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-weight: 500;
  font: inherit;
  text-decoration: none;
  color: #1d1d1f;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.pill:hover { background:#f7f7f8; }

/* Dunkle Akzent-Pill (CTA) */
.pill.accent {
  background: var(--btn);
  color: var(--btn-text);
  border-color: var(--btn);
}
.pill.accent:hover { opacity:.92; }

/* Button-Reset für .menu-trigger (damit er wie Link-Pills aussieht) */
.menu-trigger {
  border: 1px solid var(--line);
  background: #fff;
  color: #1d1d1f;
  border-radius: 999px;
  padding: 10px 14px;
}

.brand-logo{height:80px; display:block}   /* von 56px → 80px */
@media (max-width:480px){ .brand-logo{height:60px} }   /* von 44px → 60px */

.nav .links a{color:#1d1d1f;margin:0 14px;font-weight:500}


/* Hero */
.hero{padding:86px 0 40px;text-align:center}
h1{font-size:clamp(40px,6.2vw,74px);line-height:1.06;margin:0 0 16px;letter-spacing:-.02em}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:820px;margin:0 auto 22px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{padding:14px 22px;border-radius:16px;font-weight:700;border:1px solid var(--line);background:var(--btn);color:var(--btn-text)}
.btn.light{background:#fff;color:#1d1d1f}

.hero-frame{
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;

 /* Pfad relativ zu assets/styles.css */
  background-color: #fff;
  background-image: url("images/hero-mock.svg?v=7");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;

  aspect-ratio: 16 / 9;
  min-height: 520px; /* falls ein alter Browser aspect-ratio ignoriert */
}

.hero-img{
  display:block;
  width:100%;
  height:auto;
}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:960px){.features{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{margin:8px 0 6px}
.card p{color:var(--muted)}
.icon{width:36px;height:36px;margin-bottom:4px}

/* Sections */
.section{padding:64px 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(28px,4.4vw,44px);margin:0 0 10px}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
@media(max-width:960px){.two{grid-template-columns:1fr}}

/* === Cards (globale Box-Styles) === */
:root { --radius: 18px; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px;
  display:flex;            /* NEU */
  flex-direction:column;   /* NEU */
  height:100%;             /* NEU */
}

.mock-card{
  aspect-ratio:4/3;
  width:100%;
  background:#f5f5f7;
  border:1px solid var(--line);
  border-radius: var(--radius);
  display:grid; place-items:center;
}

/* Grids sollen die Kinder strecken */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; align-items:stretch; } /* NEU: align-items */
.two{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:stretch; } /* NEU: align-items */
@media(max-width:960px){ .features{grid-template-columns:1fr} .two{grid-template-columns:1fr} }

/* Optional: kleine Infokacheln (proof) gleichmäßig rund */
.proof{ border-radius: var(--radius); }

/* Über uns Tabelle */
.about-table{
  width:100%; border-collapse:collapse; margin-top:10px;
}
.about-table tr{border-bottom:1px solid var(--line)}
.about-table td{padding:8px 0}

/* Footer */
footer{border-top:1px solid var(--line);padding:26px 0;color:#6e6e73;font-size:14px}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .hero { padding: 64px 0 28px; }
  h1 { font-size: clamp(34px, 8vw, 44px); }
  .lead { font-size: 16px; }
  .actions { gap: 10px; }
  .btn { width: 100%; padding: 14px 18px; }
  .features { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; border-radius: 14px; }
  .two { grid-template-columns: 1fr; gap: 18px; }
}
/* === MOBILE NAV FIX: horizontal scrollbare Leiste === */
@media (max-width: 880px) {
  .nav { gap: 8px; }

  header .links {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    width: 100%;
  }
  header .links::-webkit-scrollbar { display: none; } /* Safari/Chrome */

  header .links .pill {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 15px;
  }

  header .brand img { height: 32px; }
}
/* === Logo-Größe (Desktop & Mobile) === */
header .brand img {
  height: 64px;            /* Desktop */
}
@media (max-width: 880px) {
  header .brand img {
    height: 48px;          /* Mobile */
  }
}

/* === Burger-Button (nur Mobile sichtbar) === */
.nav-toggle {
  display: none;           /* Desktop aus */
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: #1d1d1f;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

/* Button zu X animieren, wenn Menü offen */
.links.open ~ .nav-toggle,
.nav-toggle[aria-expanded="true"] { /* fallback */
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* === Mobile-Menü Panel === */
@media (max-width: 880px) {
  .nav { gap: 8px; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Panel zunächst verstecken */
  header .links {
    display: none;
    position: absolute;
    top: calc(64px + 8px);      /* unter dem Sticky-Header; passe an falls Header höher */
    right: 16px;
    left: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    padding: 10px;
    z-index: 100;
    flex-direction: column;
    gap: 8px;
  }
  header .links.open { display: flex; }

  header .links .pill {
    display: block;
    padding: 12px 14px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
  }

  /* Body nicht scrollen, wenn Panel offen */
  body.no-scroll { overflow: hidden; }
}

/* Optional: Desktop-Abstände der Nav leicht anpassen */
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }

/* Hero-Mockup auf Mobile kleiner machen */
@media (max-width: 768px){
  .hero-frame{
    aspect-ratio: 16 / 10;       /* etwas flacher */
    background-size: 90% auto;   /* kleineres Bild auf Mobile */
    margin-top: 18px;
  }
}


@media (max-width: 480px) {
  .hero-frame {
    max-width: 100%;      
    background-size: 120% auto !important; /* leicht größer für Phones */
    min-height: 200px;    /* noch kompakter */
  }
}
.proof-row{display:flex;gap:16px;flex-wrap:wrap}
.proof{
  flex:1 1 120px; text-align:center; border:1px solid var(--line);
  border-radius:12px; padding:16px; font-weight:700;
}
.proof span{display:block; color:var(--muted); font-weight:400}

.form{display:grid; gap:12px}
.form label{display:grid; gap:6px; font-weight:600}
.form input,.form textarea{
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  font:inherit; width:100%; background:#fff;
}
.form input:focus,.form textarea:focus{
  outline:none; border-color:#c9c9cf; box-shadow:0 0 0 3px rgba(0,113,227,.12)
}
.form .btn{justify-self:start}

/* ===== Dropdown "Unternehmen" ===== */
.menu-group { position: relative; display: inline-block; }
.menu-trigger { cursor: pointer; }

/* Submenu-Panel */
.submenu{
  position:absolute; top:48px; left:0;
  display:none; min-width:220px;
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  padding:8px;
  z-index: 120;
}
.submenu.open{ display:block; }
.submenu a{
  display:block; padding:10px 12px; border-radius:10px; color:#1d1d1f;
}
.submenu a:hover{ background:#f6f6f7; }

/* Akzent-Pill rechts */
.pill.accent{
  background: var(--btn);
  color: var(--btn-text);
  border-color: var(--btn);
}
.pill.accent:hover{ opacity:.92; }

/* ===== Footer ===== */
.site-footer{
  margin-top: 56px;
  background:#2f2f31;
  color:#e9e9ea;
  padding: 40px 0 24px;
}
.footer-grid{
  display:grid; gap: 26px;
  grid-template-columns: repeat(3,1fr);
}
.footer-grid h4{
  margin:0 0 12px; font-size:16px; color:#fff;
}
.footer-grid a{
  display:block; color:#d4d4d6; text-decoration:none; padding:6px 0;
}
.footer-grid a:hover{ color:#fff; }
.footer-copy{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top: 22px; padding-top: 14px; font-size:14px; color:#cfcfd2;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}