/* ===================== SERVITECH GLOBAL CSS ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap');

:root{
  --brand-start:#0f4c64;
  --brand-end:#0f4c64;
  --brand-solid:#0f4c64;
  --wa-start:#25d366;
  --wa-end:#0ba360;
  --bg:#f5fbfe;
  --panel:#ffffff;
  --ink:#0b2f3e;
  --ink-2:#2e4955;
  --muted:#5b7886;
  --line:#e7eef3;
  --accent:#2b6df2;
  --radius:16px;
  --shadow:0 12px 35px rgba(9,38,59,.10), 0 2px 8px rgba(9,38,59,.06);
  --shadow-soft:0 6px 18px rgba(9,38,59,.08);
--brand-rgb: 15, 76, 100;
  /* 2025 GLASS THEME */
  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(73,147,189,.22);
  --glass-shadow: rgba(7,35,53,.12);
  --glass-brand: #4993bd;
  --glass-ink: #0b2f3e;
  --glass-ink-light: #3c5461;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
html,body{height:100%;font-family:'Inter',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#f0f8fb 0%, #f7fbfe 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
[hidden]{display:none !important}

/* ===================== TYPOGRAPHY ===================== */
h1{font-weight:800;letter-spacing:-.01em;margin:0 0 8px;font-size:clamp(28px,5.5vw,42px);line-height:1.1}
h2{font-weight:800;letter-spacing:-.01em;font-size:clamp(22px,4.4vw,30px);margin:0 0 12px;color:var(--glass-ink)}
h3{font-weight:800;letter-spacing:-.01em;margin:0 0 6px;font-size:20px}
.lead{color:var(--glass-ink-light);font-size:clamp(16px,3.8vw,18px)}
.vorteile-note{color:var(--glass-ink-light);font-size:clamp(16px,2.4vw,18px);line-height:1.6;font-weight:500}

/* ===================== LAYOUT ===================== */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
section{padding:48px 0} /* ← GAP BETWEEN SECTIONS */
.hero{padding-top:20px}
.wrap{display:block}

/* ===================== HEADER / NAV ===================== */
.header{
  position:sticky;top:0;z-index:50;background:#fff;
  box-shadow:0 8px 24px rgba(10,50,80,.06);
}
.header .inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand .logo{display:block;height:32px}
.brand .logo-h{height:34px}
.brand .logo-m{display:none;height:36px}
.main-nav{display:flex;gap:16px;align-items:center}
.nav-link{
  color:var(--ink);padding:8px 10px;border-radius:10px;
  font-weight:800;letter-spacing:-0.01em;
}
.nav-link[aria-current="page"], .nav-link:hover{background:#f1f7fb}

/* ===================== MOBILE MENU ===================== */
@media (max-width: 979px) {
  .main-nav { display: none !important; }
  .menu-trigger {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    gap: 8px;
    padding: 8px 0;
    position: relative;
  }
  .brand .logo-h { display: none; }
  .brand .logo-m { display: block; }
}
@media (min-width: 980px) {
  .menu-trigger, .menu-panel { display: none !important; }
}

/* ===================== PLAYFUL MOBILE MENU ===================== */
.menu-panel {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(9,38,59,.15);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease;
  z-index: 49;
  transform: translateY(-12px);
}
.menu-panel.is-open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}
.menu-panel a {
  display: block;
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  min-height: 62px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.menu-panel a::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 70px solid var(--brand-start);
  border-left: 70px solid transparent;
  opacity: 0;
  transform: translate(16px, 16px) scale(0.6);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 1;
}
.menu-panel a:hover::before,
.menu-panel a:active::before {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.menu-panel.is-open a {
  opacity: 1;
  transform: translateY(0);
}
.menu-panel.is-open a:nth-child(1) { transition-delay: 0.10s; }
.menu-panel.is-open a:nth-child(2) { transition-delay: 0.16s; }
.menu-panel.is-open a:nth-child(3) { transition-delay: 0.22s; }
.menu-panel.is-open a:nth-child(4) { transition-delay: 0.28s; }
.menu-panel.is-open a:nth-child(5) { transition-delay: 0.34s; }
.menu-panel.is-open a:nth-child(6) { transition-delay: 0.40s; }
.menu-panel a:hover,
.menu-panel a:active {
  background: #f8fcff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.12);
  z-index: 2;
}
.menu-panel a:active {
  transform: translateY(0) scale(0.98);
  background: #eef5ff;
}
.menu-panel a:focus-visible {
  outline: 2px solid var(--brand-start);
  outline-offset: -2px;
  border-radius: 0;
}
.menu-panel a:last-child {
  border-bottom: none;
}

/* ===================== HAMBURGER TO X ===================== */
.menu-trigger span,
.menu-trigger span::before,
.menu-trigger span::after {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}
.menu-trigger span::before,
.menu-trigger span::after {
  content: '';
  position: absolute;
  left: 0;
}
.menu-trigger span::before { top: -7px; }
.menu-trigger span::after { top: 7px; }
.menu-trigger[aria-expanded="true"] span {
  background: transparent;
}
.menu-trigger[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}
.menu-trigger[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===================== GRID & CARDS (2025 GLASS) ===================== */
.grid{display:grid;gap:16px}

/* MAIN CARD = FULL GLASS */
.card{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:2px solid var(--glass-border);
  border-radius:0;
  padding:32px 36px;
  box-shadow:0 32px 64px var(--glass-shadow),0 16px 32px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9);
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
  margin-bottom:24px
}
.card:hover{
  transform:translateY(-12px);
  box-shadow:0 48px 96px var(--glass-shadow),0 24px 48px rgba(0,0,0,.1),0 0 0 1px var(--glass-brand),inset 0 1px 0 rgba(255,255,255,1)
}
.card .stripe{
  position:absolute;bottom:0;right:0;width:0;height:0;
  border-bottom:90px solid var(--glass-brand);border-left:90px solid transparent;
  opacity:.7;transform:translate(30px,30px) scale(.7);
  transition:all .7s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:1
}
.card:hover .stripe{opacity:1;transform:translate(0,0) scale(1)}

/* INNER CARDS = CLEAN STACKED (NO GRID) */
.card .grid.cards{
  display:block !important;
  gap:0 !important
}
.card .grid.cards .card{
  margin-bottom:16px;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:none
}
.card .grid.cards .card:hover{
  transform:none;
  box-shadow:var(--shadow)
}
.card .grid.cards .card .stripe{display:none}

/* RESPONSIVE */
@media (max-width:640px){
  .card{padding:28px 24px}
  .card .grid.cards .card{padding:18px}
}

/* ===================== BUTTONS ===================== */
.btn{
  --btn-bg:#fff; --btn-fg:var(--ink); --btn-br:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border:1px solid var(--btn-br);border-radius:14px;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;
  box-shadow:var(--shadow-soft);text-decoration:none;cursor:pointer
}
.btn.primary{background:linear-gradient(180deg,var(--brand-start),var(--brand-end));color:#fff;border-color:var(--brand-solid)}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{background:#fff;border-color:rgba(0,0,0,.08);color:var(--ink)}
.btn.wa{background:linear-gradient(180deg,var(--wa-start),var(--wa-end));color:#fff;border-color:var(--wa-end)}
.btn.dashed{border-style:dashed !important}

/* ===================== FORMS ===================== */
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:#b9d8ea;box-shadow:0 0 0 3px rgba(53,152,219,.15)}
label{color:var(--muted);font-weight:600;display:block}

/* ===================== FOOTER ===================== */
footer{margin-top:24px;background:#0e2f3e;color:#eaf5f8}
footer a{color:#eaf5f8}
.foot-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr;max-width:1180px;margin:0 auto;padding:26px 20px}
.foot-sm{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.license{border-top:1px solid rgba(255,255,255,.12);padding:12px 20px;color:#cde6ee;max-width:1180px;margin:0 auto}
footer .btn.ghost{background:#fff;border-color:rgba(255,255,255,.3);color:var(--brand)}
@media (max-width:840px){.foot-grid{grid-template-columns:1fr}}

/* ===================== WHATSAPP FLOAT ===================== */
.wa-float{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:999px;
  background:linear-gradient(180deg,var(--wa-start),var(--wa-end));
  box-shadow:0 18px 35px rgba(13,117,94,.35);display:grid;place-items:center;
  color:#fff;z-index:60;border:0
}
.wa-float svg{fill:#fff;width:28px;height:28px}

/* ===================== MINI NAVIGATION ===================== */
.mini-nav-buero{
  position:sticky;top:64px;z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:10px 0;
  font-weight:700;
  font-size:15px;
  margin:0 auto;
  max-width:1100px
}
.mini-nav-buero .container{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:0 20px
}
.mini-nav-buero a{
  color:var(--ink);text-decoration:none;
  padding:6px 0;position:relative;
  transition:color .3s ease
}
.mini-nav-buero a:hover,
.mini-nav-buero a[aria-current="true"]{
  color:var(--glass-brand)
}
.mini-nav-buero a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;background:var(--glass-brand);
  transition:width .35s cubic-bezier(.2,.8,.2,1)
}
.mini-nav-buero a:hover::after,
.mini-nav-buero a[aria-current="true"]::after{
  width:100%
}
.mini-nav-buero .spacer{flex:1}
.mini-nav-buero .btn.dashed{
  border-color:var(--ink-2) !important;
  color:var(--ink) !important;
}
.mini-nav-buero .btn.dashed:hover{
  border-color:var(--glass-brand) !important;
  color:var(--glass-brand) !important
}
@media (max-width:640px){
  .mini-nav-buero .container{gap:14px;font-size:14px;padding:0 16px}
  .mini-nav-buero a{padding:4px 0}
}

/* ===================== MISC ===================== */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:9px;font-weight:700;color:var(--brand-start);
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 6px 18px rgba(15,76,100,.08), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-link:hover{background:rgba(15,76,100,.06);box-shadow:0 6px 14px rgba(15,76,100,.08)}
footer .btn.ghost{background:#fff;border-color:rgba(255,255,255,.30);color:#0f4c64}
.header .main-nav a,.main-nav .nav-link,header nav a,.menu-panel a{
  font-weight:800;letter-spacing:-0.01em;
}
.hero-img-soft .hero-card .stripe{
  /* ... */
  opacity: 0.98; /* ← add this ; */
  transform: translate(34px, 34px) scale(0.7);
}


/* ==== X ==== */

/* ===== Über uns (about) ===== */
.eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  font-size:13px;
  color:#1e4f7a;
  margin:0 0 6px;
}

#ueber-uns h2{ margin:0 0 18px }

.about-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:start;
  margin-top: 6px;
}

.about-copy p{
  margin:0 0 14px;
  color:var(--glass-ink-light);
  line-height:1.7;
  font-weight:500;
}

/* Check list with brand ticks */
.about-checks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}
.about-checks li{
  position:relative;
  padding-left:36px;
  color:#6a7782;
  font-weight:700;
  line-height:1.5;
}
.about-checks li::before{
  content:"";
  position:absolute;left:0;top:2px;
  width:22px;height:22px;border-radius:6px;
  background: linear-gradient(180deg, var(--brand-start), var(--brand-end));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z"/></svg>') center/18px 18px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z"/></svg>') center/18px 18px no-repeat;
  box-shadow:0 6px 16px rgba(var(--brand-rgb), .18);
}

/* CTA alignment */
.about-cta{
  justify-content:center;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 900px){
  .about-split{ grid-template-columns:1fr; gap:18px }
  .about-cta{ justify-content:flex-start }
}

/* Slim section so Vorteile feels lighter than cards */
.section-slim{padding:36px 0 28px}

/* Compact tick-list (visual match with about-checks, but lighter) */
.tick-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.tick-list.two{grid-template-columns:repeat(2,minmax(220px,1fr))}
.tick-list.three{grid-template-columns:repeat(3,minmax(220px,1fr))}
@media (max-width:900px){.tick-list.three{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media (max-width:600px){.tick-list,.tick-list.two,.tick-list.three{grid-template-columns:1fr}}

.tick-list li{
  position:relative;padding-left:32px;line-height:1.55;
  color:var(--glass-ink-light);font-weight:600
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px;
  background: linear-gradient(180deg,var(--brand-start),var(--brand-end));
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z"/></svg>')
             center/16px 16px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z"/></svg>')
             center/16px 16px no-repeat;
  box-shadow:0 6px 14px rgba(var(--brand-rgb),.14);
}
/* ===== Pain Points 2025 – minimal tiles with line icons ===== */
.problems-2025{padding:56px 0;background:linear-gradient(180deg,#f6fbfe, #f9fdff)}
.problems-2025 h2{margin:0 0 6px}
.problems-2025 .lead{margin:0 0 16px}

.pgrid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  align-items:stretch;
  margin-top:18px;
}

.pitem{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 20px 20px 20px;
  box-shadow:0 10px 28px rgba(9,38,59,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pitem:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(9,38,59,.12);
  border-color:rgba(73,147,189,.35);
}

/* Circular line-icon badge with subtle “glass ring” */
.badge{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.9) 0%, rgba(241,247,251,.9) 60%, rgba(230,241,248,.85) 100%);
  border:1px solid rgba(73,147,189,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 18px rgba(73,147,189,.12);
  color:#0f4c64;
  margin-bottom:10px;
}
.badge svg{width:22px;height:22px;display:block;opacity:.9}

/* Titles + copy */
.pitem h3{margin:2px 0 6px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.pitem p{margin:0;color:var(--glass-ink-light);line-height:1.55;font-weight:500}

/* Sharp corners for the pain tiles only */
.problems-2025 .pitem { border-radius: 1px; }
.problems-2025 .pitem:hover { border-radius: 1px; }

/* If you also want the round icon badges to be sharp */
.problems-2025 .badge { border-radius: 1px; }

.problems-2025 .badge svg{ stroke-width:1.4; }       /* 1.2–1.8 looks good */
.problems-2025 .badge{ color:#0f4c64; }               /* brand ink */

/* Make anchor-cards behave like your normal cards */
.linkcard { display:block; color:var(--ink); text-decoration:none; }
.linkcard h3 { margin:0; }