/* THIMKO – clean, light, mobile-first (2026-02-25) */
:root{
  --bg:#f4f6f8;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --primary:#3f7fa6;
  --primary-dark:#356d8f;

  --shadow:0 18px 40px rgba(0,0,0,.08);
  --shadow-soft:0 10px 25px rgba(0,0,0,.06);

  --radius:16px;
  --max:1120px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  line-height:1.6;
}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.section{padding:72px 0}
.section-tight{padding:48px 0}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:22px;
}

.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(63,127,166,.08);
  border:1px solid rgba(63,127,166,.18);
  padding:7px 11px;
  border-radius:999px;
}

h1{margin:12px 0 10px;font-size:clamp(28px, 4.6vw, 42px);line-height:1.08;letter-spacing:-.6px;}
h2{margin:0 0 10px;font-size:26px;letter-spacing:-.3px}
h3{margin:0 0 8px;font-size:18px}
p{margin:0;color:var(--muted);line-height:1.75}
.lead{font-size:16px;max-width:78ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);
  background:#fff;color:var(--text);
  font-weight:800;font-size:14px;text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(63,127,166,.35);box-shadow:var(--shadow)}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 18px 35px rgba(63,127,166,.22);
}
.btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}

.pill{
  font-size:12px;color:var(--muted);
  border:1px solid var(--border);
  background:#fff;
  padding:7px 10px;border-radius:999px;
}

.list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
/*
  Saubere Listen-Optik (mobile-friendly):
  - Icon bleibt links fix
  - Text bricht sauber darunter um
*/
.list li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;line-height:1.6}
.list li strong{color:var(--text)}
.check{
  width:20px;height:20px;border-radius:7px;
  background:rgba(63,127,166,.10);
  border:1px solid rgba(63,127,166,.25);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--primary);flex:0 0 auto;margin-top:1px;

/* --- Mobile robustness / overflow guards --- */
html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
/* Prevent long words/URLs from breaking layout */
p,li,a,h1,h2,h3,h4,blockquote{overflow-wrap:anywhere;word-break:break-word;hyphens:auto;}
/* Ensure grids/flex children can shrink */
.grid > *, .nav, .nav-links, .card, .hero-card{min-width:0;}

}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top);
}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:54px;width:auto;display:block}

.nav-links{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.nav-links a.nav-item{
  text-decoration:none;
  color:var(--text);
  font-size:14px;font-weight:800;
  padding:10px 12px;border-radius:12px;
  border:1px solid transparent;
}
.nav-links a.nav-item:hover{color:var(--primary);border-color:var(--border);background:#fff}
.nav-links a.nav-item.active{
  color:var(--primary);
  border-color:rgba(63,127,166,.30);
  background:rgba(63,127,166,.08);
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;
  width:20px;height:2px;background:var(--text);
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";position:absolute;left:0;
  width:20px;height:2px;background:var(--text);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

@media(max-width:980px){
  .brand img{height:44px}
  .nav > .btn.primary.desktop-cta{display:none}
  .nav-toggle{display:inline-flex}

  .nav-links{
    display:none !important;
    /* iPhone/Safari friendly: fixed + scrollable so nothing is cut off */
    position:fixed;
    left:12px;right:12px;
    top:calc(64px + env(safe-area-inset-top) + 10px);
    margin-top:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:10px;
    flex-direction:column;
    gap:6px;
    z-index:100;
    max-height:calc(100vh - (64px + env(safe-area-inset-top) + 22px));
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav-links{display:flex !important;}
  .nav-links a.nav-item{width:100%;padding:12px}
  .nav-links a.btn{width:100%}

  body.nav-open .nav-toggle span{background:transparent}
  body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
  body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
  /* Mobile: Dropdown als Liste im Offcanvas */
  .dropdown{width:100%;}
  body.nav-open .dropdown-menu{
    display:block;
    position:static;
    min-width:unset;
    max-width:100%;
    width:100%;
    border:0;
    box-shadow:none;
    padding:0;
    margin:4px 0 10px;
    background:transparent;
  }
  body.nav-open .dropdown-menu a{
    padding:10px 0;
    border-radius:0;
    font-weight:800;
  }

}


.hero{padding:64px 0 28px}
.hero-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:30px;
}
.hero-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head p{font-size:14px;max-width:72ch}

.faq{
  background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-soft);overflow:hidden;
}
details{border-top:1px solid var(--border)}
details:first-child{border-top:none}
summary{
  cursor:pointer;list-style:none;
  padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:900;
}
summary::-webkit-details-marker{display:none}
.faq-content{padding:0 20px 18px;color:var(--muted);line-height:1.75;font-size:14px}
.chev{width:30px;height:30px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}

.contact-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
@media(max-width:980px){.contact-wrap{grid-template-columns:1fr}}

.field{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  outline:none;
}
.field:focus{border-color:rgba(63,127,166,.5);box-shadow:0 0 0 4px rgba(63,127,166,.12)}
textarea.field{min-height:130px;resize:vertical}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:980px){.form-row{grid-template-columns:1fr}}

.small{font-size:12px;color:var(--muted);line-height:1.6}
.sep{border:none;border-top:1px solid var(--border);margin:16px 0}

.alert{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fff;
}
.alert.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.alert.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}

footer{
  background:#fff;border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  padding:26px 0;
}
.footer-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-row a{text-decoration:underline;text-underline-offset:3px}

/* SEO site additions */
.hero-split{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
@media(max-width:980px){.hero-split{grid-template-columns:1fr}}
.badge-row{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--border);background:#fff;padding:7px 10px;border-radius:999px}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.toc a{font-size:13px;text-decoration:none;border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:12px}
.toc a:hover{border-color:rgba(63,127,166,.35);color:var(--primary)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.kpi .card{padding:16px}
.kpi strong{font-size:18px}
@media(max-width:980px){.kpi{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kpi{grid-template-columns:1fr}}

/* Navigation fixes */
.mobile-only{display:none}
.nav > .btn.primary.desktop-cta{display:inline-flex}
@media(max-width:980px){
  .mobile-only{display:inline-flex}
  .nav > .btn.primary.desktop-cta{display:none}
}

/* Dropdown menu */
.dropdown{position:relative}
.dropdown-toggle{display:inline-flex;align-items:center;gap:8px}
.dropdown-toggle::after{
  content:"▾";
  font-size:12px;
  color:var(--muted);
  transform:translateY(-1px);
}
.dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:min(320px, calc(100vw - 36px));
  max-width:calc(100vw - 36px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:8px;
  z-index:200;
}
.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  color:var(--text);
  border:1px solid transparent;
}
.dropdown-menu a:hover{
  color:var(--primary);
  background:rgba(63,127,166,.08);
  border-color:rgba(63,127,166,.18);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}

@media(max-width:980px){
  .dropdown{width:100%}
  .dropdown-toggle::after{display:none}
  .dropdown-menu{
    position:static;
    display:block;
    min-width:0;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0 0 0 10px;
  }
  .dropdown-menu a{
    margin-top:6px;
    border:1px solid var(--border);
    background:#fff;
  }
}

/* Portrait on About page */
.portrait{
  width:100%;
  max-width:340px;
  height:auto;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  display:block;
  margin-left:auto;
}
@media(max-width:980px){
  .portrait{margin:14px auto 0;max-width:320px}
}

/* --- Header CTAs (Telefon/WhatsApp) --- */
.header-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;white-space:nowrap}
.phone-btn{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.phone-btn:hover{background:var(--primary);color:#fff}
.whatsapp-btn{background:#25D366;color:#fff;border:0}
.whatsapp-btn:hover{filter:brightness(0.95)}
.mobile-cta{display:none}
@media (max-width:980px){
  /* Keep the icon CTAs visible on mobile; the big button is hidden elsewhere via .desktop-cta */
  .header-cta{display:flex;gap:8px}
  .btn.icon-btn{width:40px;height:40px}
  .btn.icon-btn .icon{width:21px;height:21px}
  .mobile-cta{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
}
/* --- Dropdown usability on touch --- */
.dropdown-menu a{white-space:normal}

/* --- Icon Buttons (Telefon/WhatsApp) --- */
.btn.icon-btn{
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}
.btn.icon-btn .icon{width:22px;height:22px;fill:currentColor}
.mobile-icons{display:flex;gap:10px;align-items:center}


@media(max-width:520px){
  .container{padding:0 14px;}
  .hero-card{padding:22px;}
  .card{padding:18px;}
  .btn{width:100%;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .pill{width:auto;}
}