:root{
  --bg:#ffffff;
  --bg-soft:#f6f8fa;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;
  --line:#e5e7eb;
  --card:#ffffff;

  --accent:#156082;
  --accent-2:#0e4e69;
  --accent-soft: rgba(21,96,130,.10);
  --accent-soft-2: rgba(21,96,130,.06);

  --shadow: 0 12px 28px rgba(2, 6, 23, .08);
  --radius: 18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
    radial-gradient(900px 460px at 10% -10%, var(--accent-soft-2), transparent 60%),
    radial-gradient(900px 460px at 90% 0%, rgba(21,96,130,.05), transparent 55%),
    var(--bg);
}

.container{width:min(1120px, 92vw); margin:0 auto;}
a{color:inherit;}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}
.muted{color:var(--muted);}
.tiny{font-size:12px;}

.skip{
  position:absolute; left:-999px; top:8px;
  padding:10px 12px; background:var(--card);
  border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
}
.skip:focus{left:10px; z-index:999;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height: 58px;          /* Standard Desktop */
  width: auto;
  display:block;
}

@media (max-width: 920px){
  .brand-logo{
    height: 34px;        /* etwas kleiner auf Mobile */
  }
}
.brand-name{font-weight:800; letter-spacing:.2px;}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px;}

.nav{display:flex; align-items:center; gap:10px;}
.nav-menu{
  list-style:none; display:flex; gap:10px;
  margin:0; padding:0;
}
.nav-sep{
  width:1px; height:22px; background:var(--line);
  align-self:center; margin:0 4px;
}
.nav-link{
  text-decoration:none;
  color:var(--muted);
  font-weight:650;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link:hover{
  color:var(--text);
  background:var(--bg-soft);
  border-color:var(--line);
}
.nav-link.active{
  color:var(--accent-2);
  background:var(--accent-soft);
  border-color: rgba(21,96,130,.18);
}

.nav-toggle{
  display:none;
  appearance:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  padding:10px 12px;
}
.nav-toggle-lines{
  display:block; width:22px; height:12px; position:relative;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:""; position:absolute; left:0;
  width:22px; height:2px; background:#111827; border-radius:99px;
}
.nav-toggle-lines::before{top:1px;}
.nav-toggle-lines::after{bottom:1px;}

/* Static menu for legal pages */
.nav-menu-static{display:flex;}

/* Hero */
.hero{padding:60px 0 18px;}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:start;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background:var(--accent-soft-2);
  border:1px solid rgba(21,96,130,.16);
  color:var(--accent-2);
  font-size:13px; font-weight:650;
}
.pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow: 0 0 0 4px rgba(21,96,130,.10);
}
h1{
  margin:16px 0 10px;
  font-size: clamp(28px, 3.0vw, 42px);
  line-height:1.15;
  letter-spacing:-.4px;
}
.h1-small{
  margin:0 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing:-.2px;
}
.lead{
  margin:0;
  color:var(--muted);
  font-size:16px;
  max-width: 64ch;
}
.hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:750;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active{transform: translateY(1px);}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color: rgba(21,96,130,.35);
  box-shadow: 0 14px 26px rgba(21,96,130,.18);
  margin-left: 20%;
}
.btn-primary:hover{box-shadow: 0 16px 30px rgba(21,96,130,.22);}
.btn-secondary{
  background:#fff;
  color:var(--accent-2);
  border-color: rgba(21,96,130,.25);
}
.btn-secondary:hover{background: var(--accent-soft-2);}

.trust-row{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}
.trust-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}
.trust-icon{
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:9px;
  background:var(--accent-soft);
  border:1px solid rgba(21,96,130,.20);
  color:var(--accent-2);
  font-weight:900;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card-header{margin-bottom:14px;}
.card-title{margin:0 0 6px; font-size:16px; letter-spacing:-.1px;}
.card-sub{margin:0; color:var(--muted); font-size:13px;}
.card-footer{margin-top:14px;}

.kv{margin:0;}
.kv-row{
  display:grid; grid-template-columns: 140px 1fr;
  gap:12px; padding:10px 0;
  border-top:1px solid var(--line);
}
.kv-row:first-child{border-top:0; padding-top:0;}
.kv dt{color:var(--muted-2); font-size:13px;}
.kv dd{margin:0; font-weight:650; color:var(--text);}

/* Sections */
.section{padding:62px 0;}
.section-soft{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{max-width:78ch; margin-bottom:26px;}
.section-head h2{margin:0 0 8px; font-size:26px; letter-spacing:-.2px;}
.section-head p{margin:0; color:var(--muted);}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;}
.grid-4{margin-top: 1%; display:grid; grid-template-columns: repeat(1, 1fr); gap:16px;}

.feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.feature h3{margin:0 0 8px; font-size:16px;}
.feature p{margin:0; color:var(--muted);}

/* Steps */
.steps{display:grid; gap:12px;}
.step{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  gap: 16px;
}
.step-no{
  width:34px; height:34px; border-radius:12px;
  background:var(--accent-soft);
  border:1px solid rgba(21,96,130,.20);
  color:var(--accent-2);
  display:grid; place-items:center;
  font-weight:900;
  flex-shrink: 0;
}
.step h3{margin:0 0 4px; font-size:16px;}
.step p{margin:0;}

/* Lists */
.list-check{margin:10px 0 0; padding-left:0; list-style:none;}
.list-check li{
  position:relative; padding-left:28px; margin:10px 0; color:var(--text);
}
.list-check li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid rgba(21,96,130,.20);
  color:var(--accent-2);
  font-weight:900;
  font-size:12px;
}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px;}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  background:#fff;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer-links{display:flex; align-items:center; gap:10px;}
.dot-sep{color:var(--muted-2);}

.text-link{
  color:var(--accent-2);
  text-decoration:none;
  font-weight:750;
}
.text-link:hover{text-decoration:underline;}

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

@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr;}
  .grid-3{grid-template-columns: 1fr;}
  .grid-2{grid-template-columns: 1fr;}
  .contact-grid{grid-template-columns: 1fr;}
  .kv-row{grid-template-columns: 120px 1fr;}

  .nav-toggle{display:inline-flex;}
  .nav-menu{
    display:none;
    position:absolute;
    right:4vw;
    top:64px;
    width:min(340px, 92vw);
    flex-direction:column;
    gap:6px;
    background: rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px;
    box-shadow:var(--shadow);
  }
  .nav-menu.open{display:flex;}
  .nav-sep{display:none;}
  .nav-link{width:100%;}
  .nav-menu-static{display:flex; position:static; width:auto; flex-direction:row; box-shadow:none; border:0; background:transparent; padding:0;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; transform:none; opacity:1;}
}

/* Premium Hero (ohne Seitenkarte) */
.hero-premium{ padding: 72px 0 26px; }
.hero-premium-inner{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items: center;
}

.hero-premium-visual{
  display:flex;
  justify-content:flex-end;
}
.visual-card{
  width: min(360px, 92%);
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #ffffff, var(--bg-soft));
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.visual-card::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(21,96,130,.18), transparent 60%);
  transform: rotate(12deg);
}
.visual-line{
  height: 12px;
  border-radius: 999px;
  background: rgba(21,96,130,.10);
  border: 1px solid rgba(21,96,130,.16);
  margin: 12px 0;
}
.visual-line.short{ width: 62%; }
.visual-badge{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(21,96,130,.08);
  border: 1px solid rgba(21,96,130,.16);
  color: var(--accent-2);
  font-weight: 800;
  font-size: 12px;
}

/* Responsive hero */
@media (max-width: 920px){
  .hero-premium-inner{ grid-template-columns: 1fr; }
  .hero-premium-visual{ justify-content:flex-start; }
}

/* ===== Banner Hero (Background image + overlay + text on top) ===== */
.hero-banner{
  position: relative;
  min-height: clamp(560px, 65vh, 760px);
  display: flex;
  align-items: center;
  padding: 100px 0;
  overflow: hidden;
}

.hero-banner-bg{
  position: absolute;
  inset: 0;
  background-image: url("assets/hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 90%;
}

/* PROFESSIONELLES OVERLAY */
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.65) 35%,
      rgba(0,0,0,.35) 65%,
      rgba(0,0,0,.15) 100%
    );
}

/* sanfter Übergang nach unten */
.hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 60%,
      rgba(255,255,255,1) 100%
    );
}

.hero-banner-content{
  position: relative;
  z-index: 1;
  max-width: 720px;
}

/* Hero Typo im Banner: weiß auf dunklem Teil */
.hero-banner h1{
  color: var(--accent);
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  margin-top: 55%;
  font-weight: 750;
  text-shadow: #3c4353 0px 1px 3px, #b8b8b8 0px 1px 5px;
}

.hero-banner .lead{
  color: var(--accent-2);
  margin-top: 40%;
  font-size: 21px;
  max-width: 60ch;
}

.hero-banner .pill{
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.hero-banner .pill .dot{
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(21,96,130,.22);
}

/* Buttons im Banner */
.hero-banner .btn-secondary{
  background: rgba(255,255,255,.90);
  color: var(--accent-2);
  border-color: rgba(255,255,255,.65);
}
.hero-banner .btn-secondary:hover{
  background: #ffffff;
}

/* Meta Chips */
.hero-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-weight: 650;
  font-size: 13px;
}

/* Mobile spacing */
@media (max-width: 920px){
  .hero-banner{
    padding-top: 92px;
    padding-bottom: 34px;
    min-height: 520px;
  }
  .hero-banner-content{ max-width: 100%; }
}

.containerlong{
width:min(1120px, 92vw); margin:0 auto; text-align: justify;
}

.cardinfo{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  width: fit-content;
  height: fit-content;
}

.introtext{
  margin:0; 
  color:var(--muted);
  text-align: justify;
  width: 1080px;
}

.butinfotext{
    margin:0;
  color:var(--muted);
  font-size:16px;
  max-width: 64ch;
  margin-left: 20%;
}