/* ---------- SELF-HOSTED FONTS ---------- */
/* Dateien ablegen unter: /assets/fonts/ (Pfade sind relativ zur jeweiligen HTML-Seite im Root) */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/MaterialIcons-Regular.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

:root{
    --base:#1D6E8D;
    --blue-1:#1C78D5;
    --blue-2:#4BF3FF;
    --blue-5:#D1E4F7;
    --blue-6:#CCEDED;
    --blue-7:#A4D2E4;
    --orange-1:#FF8800;
    --orange-2:#F8BF7F;
    --red-1:#E41616;
    --green-2:#00A5A5;
    --green-3:#0F803B;
    --purple-1:#880097;
    --grey-3:#707070;
    --grey-4:#F2F2F2;
    --grey-5:#888888;
    --grey-6:#DDD;
    --grey-7:#484F51;
    --white:#FFFFFF;
    --black:#000000;
    --display:'Manrope', sans-serif;
    --body:'Inter', sans-serif;
    --radius:12px;
    --shadow:0 4px 18px rgba(29,110,141,0.09);
  }

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
    background:var(--white);
    color:var(--grey-7);
    font-family:var(--body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

img,svg{display:block; max-width:100%;}

a{color:inherit; text-decoration:none;}

ul{list-style:none;}

a:focus-visible, button:focus-visible{
    outline:2px solid var(--base);
    outline-offset:3px;
    border-radius:4px;
  }

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

.hero .wrap{max-width:1180px;}

.eyebrow{
    font-family:var(--body); font-weight:600;
    font-size:12.5px; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--base);
  }

/* ---------- NAV ---------- */

header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--grey-6);
  }

nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px; max-width:1180px; margin:0 auto;
  }

.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:20px; color:var(--base);}

.nav-links{display:flex; gap:30px; font-size:14.5px; color:var(--grey-7); font-weight:500;}

.nav-links a:hover{color:var(--base);}

.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px; border-radius:8px;
    font-size:14.5px; font-weight:600; font-family:var(--body);
    border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }

.btn:hover{transform:translateY(-1px);}

.btn-orange{background:var(--orange-1); color:#fff;}

.btn-orange:hover{background:#e67a00; box-shadow:0 6px 16px rgba(255,136,0,0.28);}

.btn-base{background:var(--base); color:#fff;}

.btn-base:hover{background:#175a73; box-shadow:0 6px 16px rgba(29,110,141,0.25);}

.btn-ghost{background:#fff; border-color:var(--base); color:var(--base);}

.btn-ghost:hover{background:var(--blue-5);}

.nav-cta{display:flex; align-items:center; gap:14px;}


/* ---------- HERO ---------- */

.hero{padding:76px 0 84px; background:linear-gradient(180deg,#fff 0%, var(--blue-5) 130%); border-bottom:1px solid var(--grey-6);}

.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}

.trust-bar{
    margin-top:52px; padding-top:26px; border-top:1px solid var(--grey-6);
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }

.trust-item{display:flex; align-items:center; gap:12px; max-width:230px;}

.trust-item .ico{
    width:38px; height:38px; border-radius:11px;
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,0.12);
  }

.trust-item .ico svg{width:19px; height:19px;}

.ico-blue{background:var(--blue-1);}

.ico-purple{background:var(--purple-1);}

.ico-green{background:var(--green-2);}

.ico-base{background:var(--base);}

.trust-item strong{display:block; font-size:13.5px; color:var(--black); font-weight:800; font-family:var(--display);}

.trust-item span{font-size:11.5px; color:var(--grey-5);}

@media (max-width:760px){.trust-bar{gap:20px 28px;}}

h1{
    font-family:var(--display); font-weight:800;
    font-size:clamp(30px,4vw,46px); line-height:1.12;
    color:var(--black); margin:16px 0 20px;
  }

h1 em{font-style:normal; color:var(--base);}

.hero p.lead{font-size:16.5px; color:var(--grey-3); max-width:470px; margin-bottom:30px;}

.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}

.hero-note{font-size:13px; color:var(--grey-5); display:flex; align-items:center; gap:8px;}

.hero-note .dot{width:7px; height:7px; border-radius:50%; background:var(--green-3);}

/* dashboard mock card */

.panel{
    background:var(--white); border:1px solid var(--blue-7);
    border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:hidden; position:relative; z-index:1;
  }

.panel-head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:14px 18px; border-bottom:1px solid var(--grey-6);
  }

.panel-head .title{font-weight:700; color:var(--black); font-size:14.5px;}

.panel-head .sub{font-size:11.5px; color:var(--grey-5);}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--grey-6);}

.stat{padding:14px 10px; text-align:center; border-right:1px solid var(--grey-6);}

.stat:last-child{border-right:none;}

.stat .num{font-family:var(--display); font-weight:800; font-size:21px; color:var(--black);}

.stat .num.accent{color:var(--orange-1);}

.stat .lbl{font-size:10.5px; color:var(--grey-5); margin-top:2px;}

.tour-list{padding:10px 14px 4px;}

.tour-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 4px; border-bottom:1px solid var(--grey-4);
    font-size:12px;
  }

.tour-row:last-child{border-bottom:none;}

.tour-row .tname{font-weight:700; color:var(--black); width:28px; flex-shrink:0;}

.tour-row .pill{
    font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px;
    flex-shrink:0; white-space:nowrap;
  }

.pill.wait{background:var(--grey-4); color:var(--grey-5);}

.pill.go{background:var(--blue-6); color:var(--base);}

.pill.done{background:#EBF5CA; color:var(--green-3);}

.tour-row .bar{flex:1; height:5px; background:var(--grey-4); border-radius:4px; overflow:hidden;}

.tour-row .bar span{display:block; height:100%; background:var(--base);}

.map-strip{
    margin:12px 14px 16px; height:76px; border-radius:8px;
    background:linear-gradient(135deg,#EAF3E6,#DDEFE0);
    position:relative; overflow:hidden;
  }

.map-strip .map-label{
    position:absolute; top:6px; left:8px;
    font-size:9.5px; font-weight:600; color:var(--grey-5);
    letter-spacing:0.04em; text-transform:uppercase;
  }

.map-cluster{
    position:absolute; border-radius:50%; border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:10px; font-weight:700;
  }

/* smartphone mockup: Fahreransicht (iPhone-Stil) */

.hero-visual{position:relative; padding:0 86px 20px 0; margin-bottom:70px;}

@media (max-width:900px){.hero-visual{padding:0; margin-bottom:0; max-width:420px;}}

.phone-mock{
    position:absolute; right:-58px; bottom:-14px; z-index:2;
    width:188px; height:404px; background:#111114; border-radius:38px;
    padding:9px; box-shadow:10px 22px 34px rgba(0,0,0,0.26);
    transform:rotate(7deg);
    transform-origin:bottom center;
  }

.phone-mock::before{
    content:""; position:absolute; right:-3px; top:88px;
    width:3px; height:58px; background:#111114; border-radius:2px 0 0 2px;
  }

.phone-mock::after{
    content:""; position:absolute; left:-3px; top:66px;
    width:3px; height:30px; background:#111114; border-radius:0 2px 2px 0;
    box-shadow:0 42px 0 0 #111114;
  }

@media (max-width:900px){
    .phone-mock{position:static; margin:22px auto 0; transform:none;}
  }

.phone-screen{background:#fff; border-radius:29px; overflow:hidden; position:relative; height:100%; display:flex; flex-direction:column;}

.island{
    position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:60px; height:18px; background:#111114; border-radius:11px; z-index:3;
  }

.phone-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 10px 8px; flex-shrink:0;
  }

.icon-btn{
    width:22px; height:22px; border-radius:50%; border:1px solid var(--grey-6);
    display:flex; align-items:center; justify-content:center;
    font-size:10.5px; color:var(--base); flex-shrink:0;
  }

.topbar-title{text-align:center; font-size:11.5px; font-weight:700; color:var(--base);}

.topbar-title span{display:block; font-size:8.5px; font-weight:500; color:var(--grey-5);}

.phone-banner{
    background:var(--orange-1); color:#fff; font-size:10px; font-weight:700;
    padding:7px 12px; display:flex; align-items:center; gap:7px; flex-shrink:0;
  }

.phone-banner .badge{
    background:#fff; color:var(--orange-1); width:15px; height:15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:8.5px; flex-shrink:0;
  }

.phone-list{flex:1; overflow:hidden;}

.prow{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--grey-4);}

.prow.flag{background:var(--orange-2);}

.prow .bar{width:3px; height:24px; border-radius:2px; flex-shrink:0;}

.bar.red{background:var(--red-1);}

.bar.base{background:var(--base);}

.bar.grey{background:var(--grey-6);}

.prow-main{flex:1; min-width:0;}

.prow-time{font-size:8px; color:var(--red-1); font-weight:700;}

.prow-addr{font-size:10px; font-weight:700; color:var(--black); line-height:1.25;}

.prow-addr.muted{color:var(--grey-5); font-weight:600;}

.check{
    width:19px; height:19px; border-radius:50%; background:var(--base); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0;
  }

.check.dcheck{background:#fff; border:1px solid var(--grey-6); color:var(--grey-5); font-size:7.5px;}

.phone-home{width:110px; height:5px; background:#1C1C1E; border-radius:3px; margin:8px auto 10px; opacity:0.85; flex-shrink:0;}

/* ---------- PROCESS ---------- */

.process{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.section-head{max-width:560px; margin-bottom:52px;}

.section-head h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,2.6vw,32px); color:var(--black); margin-top:10px;}

.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}

@media (max-width:900px){.steps{grid-template-columns:1fr;}}

.step{
    position:relative; background:var(--white); border:1px solid var(--blue-7);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 18px 22px;
  }

.step-num{
    width:34px; height:34px; border-radius:50%; background:var(--base); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:800; font-size:13px;
    margin-bottom:14px;
  }

.step h3{font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--black); margin-bottom:6px;}

.step p{font-size:13.5px; color:var(--grey-3);}

/* ---------- SPLIT ---------- */

.split{padding:84px 0; border-bottom:1px solid var(--grey-6); background:var(--grey-4);}

.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}

@media (max-width:760px){.split-grid{grid-template-columns:1fr;}}

.split-card{background:var(--white); border:1px solid var(--blue-7); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px;}

.split-card .tag{font-size:12px; font-weight:700; color:var(--base); text-transform:uppercase; letter-spacing:0.06em;}

.split-card h3{font-family:var(--display); font-weight:800; font-size:21px; color:var(--black); margin:10px 0 10px;}

.split-card p{color:var(--grey-3); font-size:14px; margin-bottom:16px;}

.split-card ul{display:flex; flex-direction:column; gap:9px;}

.split-card li{font-size:13.5px; color:var(--grey-7); display:flex; gap:9px; align-items:flex-start;}

.split-card li::before{
    content:"done"; font-family:'Material Icons'; font-size:17px; line-height:1.35;
    color:var(--green-3); flex-shrink:0;
  }

.split-card.orange li::before{color:var(--orange-1);}

/* ---------- QUOTE ---------- */

.quote-section{padding:88px 0; background:var(--blue-5);}

.quote-card{
    max-width:720px; margin:0 auto; background:var(--white);
    border:1px solid var(--blue-7); border-radius:18px; box-shadow:var(--shadow);
    padding:44px 46px 36px; position:relative;
  }

.quote-mark{
    width:44px; height:34px; color:var(--blue-5); margin-bottom:10px;
  }

blockquote{
    font-family:var(--display); font-weight:700;
    font-size:clamp(19px,2.4vw,25px); color:var(--black);
    line-height:1.4; margin-bottom:26px;
  }

.quote-divider{height:1px; background:var(--grey-6); margin-bottom:22px;}

.quote-footer{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}

.quote-attribution{display:flex; align-items:center; gap:13px;}

.quote-avatar{
    width:46px; height:46px; border-radius:10px; background:#fff;
    border:1px solid var(--grey-6);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    overflow:hidden; padding:4px;
  }

.quote-avatar img{width:100%; height:100%; object-fit:contain;}

.quote-name{font-size:14px; font-weight:700; color:var(--black);}

.quote-role{font-size:12.5px; color:var(--grey-5);}

.verified-badge{
    display:flex; align-items:center; gap:5px;
    background:#EBF5CA; color:var(--green-3);
    font-size:11.5px; font-weight:700;
    padding:5px 11px; border-radius:20px; flex-shrink:0;
  }

.verified-badge .material-icons{font-size:14px;}

/* ---------- PRICING ---------- */

.pricing-teaser{padding:80px 0;}

/* ---------- CONTACT ---------- */

.contact-section{padding:0 0 84px;}

.contact-grid{display:flex; justify-content:center; gap:20px; flex-wrap:wrap;}

.contact-card{
    display:flex; align-items:center; gap:14px;
    background:var(--white); border:1px solid var(--blue-7); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px 26px; min-width:270px;
    transition:transform .15s ease, box-shadow .15s ease;
  }

.contact-card:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(29,110,141,0.14);}

.contact-card .ico{
    width:42px; height:42px; border-radius:11px; background:var(--base); color:#fff;
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }

.contact-card .ico .material-icons{font-size:20px;}

.contact-card .label{font-size:11.5px; color:var(--grey-5); font-weight:600; text-transform:uppercase; letter-spacing:0.05em;}

.contact-card .value{font-family:var(--display); font-size:15.5px; font-weight:700; color:var(--black);}

.pricing-band{
    background:var(--white); border:1px solid var(--blue-7); border-radius:16px; box-shadow:var(--shadow);
    padding:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }

.pricing-band h3{font-family:var(--display); font-weight:800; font-size:20px; color:var(--black); margin-bottom:8px;}

.pricing-band p{color:var(--grey-3); font-size:14.5px; max-width:380px;}

.pricing-band .price{font-family:var(--display); font-weight:800; font-size:38px; color:var(--orange-1);}

.pricing-band .price span{font-family:var(--body); font-weight:500; font-size:13.5px; color:var(--grey-5);}

/* ---------- FOOTER ---------- */

footer{padding:36px 0; background:var(--grey-4); border-top:1px solid var(--grey-6);}

.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--grey-5);}

.footer-links{display:flex; gap:20px;}

.footer-links a:hover{color:var(--base);}

.footer-made-by{
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin-top:22px; padding-top:22px; border-top:1px solid var(--grey-6);
    font-size:12.5px; color:var(--grey-5);
  }

.footer-made-by img{height:19px; width:auto; display:block;}

/* ---------- MOBILE NAV ---------- */

.hamburger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
  }

.hamburger span{width:100%; height:2px; background:var(--black); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}

.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}

.hamburger.active span:nth-child(2){opacity:0;}

.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-menu{display:contents;}

@media (max-width:760px){
    nav{position:relative;}
    .hamburger{display:flex;}
    .nav-menu{
      display:none; position:absolute; top:100%; left:0; right:0;
      background:#fff; border-bottom:1px solid var(--grey-6); box-shadow:0 12px 24px rgba(0,0,0,0.08);
      flex-direction:column; padding:8px 32px 20px; gap:0; z-index:60;
    }
    .nav-menu.open{display:flex;}
    .nav-links{display:flex; flex-direction:column; gap:0; width:100%;}
    .nav-links li{width:100%;}
    .nav-links a{display:block; padding:12px 0; border-bottom:1px solid var(--grey-4); width:100%;}
    .nav-cta{width:100%; padding-top:14px;}
    .nav-cta .btn{width:100%; justify-content:center;}
  }

.ico-orange{background:var(--orange-1);}

/* ---------- PAGE HERO (subpages) ---------- */

.page-hero{padding:76px 0 64px; background:linear-gradient(180deg,#fff 0%, var(--blue-5) 130%); border-bottom:1px solid var(--grey-6); text-align:center;}

.page-hero .wrap{max-width:760px;}

.page-hero h1{margin:16px auto 18px;}

.page-hero p.lead{margin:0 auto 26px; max-width:560px; text-align:center;}

.page-hero .hero-ctas{justify-content:center; margin-bottom:0;}

/* ---------- FEATURE GRID (Produkt) ---------- */

.feature-section{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

@media (max-width:960px){.feature-grid{grid-template-columns:repeat(2,1fr);}}

@media (max-width:600px){.feature-grid{grid-template-columns:1fr;}}

.feature-card{background:var(--white); border:1px solid var(--blue-7); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px;}

.feature-card .ico{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 3px 8px rgba(0,0,0,0.12);}

.feature-card .ico svg{width:20px; height:20px;}

.feature-card h3{font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--black); margin-bottom:6px;}

.feature-card p{font-size:13.5px; color:var(--grey-3);}

/* ---------- CALLOUT ---------- */

.callout{
    max-width:900px; margin:0 auto; background:var(--blue-5); border:1px solid var(--blue-7);
    border-radius:var(--radius); padding:28px 32px; display:flex; align-items:center; gap:18px;
  }

.callout .ico{width:44px; height:44px; border-radius:12px; background:var(--base); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.callout .ico .material-icons{font-size:22px;}

.callout h3{font-family:var(--display); font-weight:700; font-size:16px; color:var(--black); margin-bottom:4px;}

.callout p{font-size:13.5px; color:var(--grey-7);}

/* ---------- SOLUTION CARDS (Loesungen) ---------- */

.solutions-section{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.solution-card{
    background:var(--white); border:1px solid var(--blue-7); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:36px; display:grid; grid-template-columns:200px 1fr; gap:32px; margin-bottom:22px;
  }

.solution-card:last-child{margin-bottom:0;}

@media (max-width:760px){.solution-card{grid-template-columns:1fr; gap:16px; padding:26px;}}

.solution-card .side .ico{width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}

.solution-card .side .ico svg{width:24px; height:24px;}

.solution-card .tag{font-size:12px; font-weight:700; color:var(--base); text-transform:uppercase; letter-spacing:0.06em;}

.solution-card h3{font-family:var(--display); font-weight:800; font-size:22px; color:var(--black); margin:8px 0 0; overflow-wrap:break-word; word-break:break-word; hyphens:auto;}

.solution-card .body p{font-size:14px; color:var(--grey-3); margin:10px 0 14px;}

.solution-card ul{display:flex; flex-direction:column; gap:8px;}

.solution-card li{font-size:13.5px; color:var(--grey-7); display:flex; gap:9px; align-items:flex-start;}

.solution-card li::before{content:"done"; font-family:'Material Icons'; font-size:16px; color:var(--green-3); flex-shrink:0;}

.solution-card .ref-note{
    margin-top:14px; font-size:12.5px; color:var(--base); font-weight:600;
    background:var(--blue-5); display:inline-block; padding:7px 13px; border-radius:8px;
  }

/* ---------- PRICING PLANS (Preise) ---------- */

.plans-section{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.plans-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px; margin:0 auto;}

@media (max-width:760px){.plans-grid{grid-template-columns:1fr;}}

.plan-card{
    position:relative; background:var(--white); border:1px solid var(--blue-7); border-radius:16px;
    box-shadow:var(--shadow); padding:34px 30px;
  }

.plan-card.highlight{border-color:var(--orange-1); box-shadow:0 10px 28px rgba(255,136,0,0.16);}

.plan-card .ribbon{
    position:absolute; top:-13px; right:24px; background:var(--orange-1); color:#fff;
    font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px;
  }

.plan-card .plan-name{font-family:var(--display); font-weight:700; font-size:16px; color:var(--black); margin-bottom:8px;}

.plan-card .plan-price{font-family:var(--display); font-weight:800; font-size:34px; color:var(--black);}

.plan-card .plan-price span{font-family:var(--body); font-weight:500; font-size:13px; color:var(--grey-5);}

.plan-card .plan-desc{font-size:13px; color:var(--grey-3); margin:10px 0 22px;}

.plan-card ul{display:flex; flex-direction:column; gap:10px; margin-bottom:26px;}

.plan-card li{font-size:13.5px; color:var(--grey-7); display:flex; gap:9px; align-items:flex-start;}

.plan-card li::before{content:"done"; font-family:'Material Icons'; font-size:16px; color:var(--green-3); flex-shrink:0;}

.plan-card .btn{width:100%; justify-content:center;}

/* ---------- FAQ ---------- */

.faq-section{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}

.faq-item{background:var(--white); border:1px solid var(--blue-7); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}

.faq-item summary{
    padding:18px 22px; font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--black);
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
  }

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{content:"expand_more"; font-family:'Material Icons'; color:var(--base); font-size:20px; flex-shrink:0;}

.faq-item[open] summary::after{content:"expand_less";}

.faq-item .faq-body{padding:0 22px 20px; font-size:13.5px; color:var(--grey-3); line-height:1.6;}

/* ---------- DEMO FORM ---------- */

.form-section{padding:56px 0 84px;}

.form-card{max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--blue-7); border-radius:16px; box-shadow:var(--shadow); padding:40px;}

@media (max-width:600px){.form-card{padding:28px 22px;}}

.form-row{margin-bottom:20px;}

.form-row label{display:block; font-size:13px; font-weight:600; color:var(--black); margin-bottom:6px;}

.form-row label .req{color:var(--orange-1);}

.form-row .hint{font-weight:400; color:var(--grey-5); font-size:11.5px;}

.form-row input, .form-row select, .form-row textarea{
    width:100%; padding:11px 14px; border:1px solid var(--grey-6); border-radius:8px;
    font-family:var(--body); font-size:14px; color:var(--black); background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
  }

.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
    outline:none; border-color:var(--base); box-shadow:0 0 0 3px var(--blue-5);
  }

.form-row textarea{resize:vertical; min-height:100px; font-family:var(--body);}

.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

@media (max-width:600px){.form-grid-2{grid-template-columns:1fr;}}

.form-note{font-size:12px; color:var(--grey-5); margin-top:16px; text-align:center;}

.form-submit{width:100%; justify-content:center; padding:13px; font-size:15px;}

/* ---------- ABOUT ---------- */

.about-section{padding:84px 0; border-bottom:1px solid var(--grey-6);}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}

@media (max-width:900px){.about-grid{grid-template-columns:1fr;}}

.about-grid p{font-size:14.5px; color:var(--grey-3); margin-bottom:14px;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

@media (max-width:960px){.values-grid{grid-template-columns:repeat(2,1fr);}}

@media (max-width:600px){.values-grid{grid-template-columns:1fr;}}

.maker-card{
    max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--blue-7);
    border-radius:16px; box-shadow:var(--shadow); padding:40px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  }

.maker-card img{height:34px; width:auto;}

.maker-card p{font-size:14px; color:var(--grey-3); margin-top:8px;}

.maker-card h3{font-family:var(--display); font-weight:700; font-size:16px; color:var(--black);}

/* ---------- LEGAL PAGES ---------- */

.legal-section{padding:64px 0 88px;}

.legal-content{max-width:760px; margin:0 auto;}

.legal-content h2{
    font-family:var(--display); font-weight:700; font-size:19px; color:var(--black);
    margin:38px 0 12px;
  }

.legal-content h2:first-child{margin-top:0;}

.legal-content h3{
    font-family:var(--display); font-weight:700; font-size:15px; color:var(--black);
    margin:22px 0 8px;
  }

.legal-content p{font-size:14px; color:var(--grey-7); margin-bottom:12px;}

.legal-content ul{margin:0 0 12px 20px;}

.legal-content li{font-size:14px; color:var(--grey-7); margin-bottom:6px;}

.legal-content a{color:var(--base); text-decoration:underline;}

.legal-placeholder{
    background:var(--blue-5); border:1px solid var(--blue-7); border-radius:6px;
    padding:1px 6px; font-family:var(--mono, monospace); color:var(--base); font-size:13px;
  }