:root { --brand:#007fae; --brand-600:#006b92; --brand-700:#005e87; --ink:#132027; --muted:#5b6b74; --bg:#eef5f8; --surface:#ffffff; --ring:36,153,198; --radius:14px; --shadow-1:0 6px 18px rgba(0,0,0,.07); --shadow-2:0 10px 30px rgba(0,0,0,.10); }
    html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"}
    body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;background:radial-gradient(60vmax 60vmax at 10% -10%, rgba(0,127,174,.10), transparent 50%),radial-gradient(40vmax 40vmax at 120% 20%, rgba(0,127,174,.08), transparent 40%),linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.9));filter:blur(.4px)}

    .container{max-width:1200px;margin:0 auto;padding:0 20px}
    header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#f8fafc,#e8f1f8);border-bottom:1px solid #d0d7de;box-shadow:0 2px 4px rgba(0,0,0,.05)}
    header .brand{color:#0a2540;font-weight:700;letter-spacing:.3px} header .nav a{color:#1e293b;opacity:.8;transition:opacity .2s ease} header .nav a:hover{opacity:1}
    .nav{display:flex;align-items:center;justify-content:space-between;height:80px}
    .brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);text-decoration:none}
    .nav a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.8} .nav a:hover{opacity:1} .nav-links{display:flex;gap:1.25rem;align-items:center}

    .hero{position:relative;padding:48px 0 56px} .hero h1{margin:0 0 .5rem;font-weight:800;letter-spacing:-.015em;font-size:clamp(28px,4.2vw,44px)} .hero p{margin:0 0 1.25rem;color:var(--muted);font-size:clamp(16px,2vw,18px)}
    .cta{display:inline-flex;gap:.6rem;align-items:center;padding:.9rem 1.2rem;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;font-weight:700;text-decoration:none;box-shadow:var(--shadow-2);transform:translateZ(0);transition:transform .2s ease,box-shadow .2s ease} .cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,127,174,.20)}

    main section{padding:56px 0} h2{margin:0 0 20px;color:var(--ink);font-size:clamp(22px,3vw,28px);letter-spacing:-.01em} .lead{color:var(--muted);max-width:74ch}

    .tiles-grid{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:560px){.tiles-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.tiles-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1200px){.tiles-grid{grid-template-columns:repeat(4,1fr)}}
    .tile{display:block;position:relative;background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-1);transition:transform .25s ease,box-shadow .25s ease;overflow:hidden;text-decoration:none;color:inherit;min-height:160px}
    .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .tile::after{content:"";position:absolute;inset:-60% -20% auto auto;height:200px;width:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,127,174,.18),transparent 70%);transform:translate(20px,-20px)} .tile h3{margin:0 0 .35rem;font-size:1.15rem;color:var(--brand-700)} .tile p{margin:0;color:var(--ink);opacity:.9} .tile .icon{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;margin-bottom:.6rem;background:linear-gradient(135deg,rgba(0,127,174,.15),rgba(0,127,174,.30))}

    .case-grid{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:900px){.case-grid{grid-template-columns:repeat(2,1fr)}} .case{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-1)} .case h3{margin:0 0 .25rem;color:var(--brand-700)} .case strong{display:inline-block;margin-top:.4rem;color:var(--ink)}

    .contact-card{text-align:center;background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));border-radius:calc(var(--radius) + 2px);padding:28px;box-shadow:var(--shadow-1)} .contact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
    .button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;text-decoration:none;font-weight:700 box-shadow:var(--shadow-2); transform:translateZ(0); transition:transform .2s ease,box-shadow .2s ease;} .button.primary{background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff} .button.primary:hover{background:var(--brand-600) transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,127,174,.20); } .button.ghost{background:rgba(0,0,0,.04);color:var(--ink)}
.button.ghost:hover{background:rgba(0,0,0,.06)}

    footer{background:#0a3c59;color:#e9f3f7;padding:28px 0;margin-top:56px} footer a{color:#fff;text-decoration:underline}

    .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .reveal.visible{opacity:1;transform:none}
    .muted{color:var(--muted)} .stack-l{display:grid;gap:18px} .stack-xl{display:grid;gap:28px} .stack-xxl{display:grid;gap:40px}
    .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:.6rem .8rem;background:#fff;box-shadow:var(--shadow-1);border-radius:10px}
    :focus-visible{outline:3px solid rgba(var(--ring), .55);outline-offset:3px;border-radius:10px}

    .brand-image{height:70px;width:auto;display:block} @media(min-width:900px){.brand-image{height:80px}} @media(max-width:820px){.brand-image{height:56px}}

    /* Link-Kacheln: dunkles Hover + Micro-Animation (bereits für Kunden/Partner genutzt) */
    a.tile{transition:background-color .3s ease,color .3s ease;will-change:transform,background-color}
    a.tile:hover, a.tile:focus-visible{background:#0a3c59;color:#fff}
    a.tile:hover h3, a.tile:hover p, a.tile:focus-visible h3, a.tile:focus-visible p{color:#fff}
    a.tile:hover .icon, a.tile:focus-visible .icon{background:rgba(255,255,255,.18)}
    a.tile:hover::after, a.tile:focus-visible::after{opacity:0}
    a.tile::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,0) 20%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 60%);transform:translateX(-120%);transition:transform .6s ease,opacity .2s ease;pointer-events:none;opacity:0}
    a.tile:hover::before, a.tile:focus-visible::before{transform:translateX(120%);opacity:1}

    .menu-toggle{display:none;background:rgba(0,0,0,.04);border:1px solid #d6e2ea;border-radius:12px;padding:.5rem}
    .menu-toggle:hover{background:rgba(0,0,0,.06)}
    @media (max-width:820px){ .nav{height:64px} .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
      header .nav-links{position:fixed;left:0;right:0;top:64px;background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.96));backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);display:grid;gap:10px;padding:16px 20px 24px;transform:translateY(-8px);opacity:0;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.08)}
      header.open .nav-links{transform:none;opacity:1;pointer-events:auto} header .nav-links a{padding:10px 2px;font-weight:700} .brand-image{height:56px} .container{padding:0 16px} .hero{padding:40px 0 40px} .tile{min-height:140px} a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)} html{-webkit-text-size-adjust:100%} }

    .hero{padding-bottom:40px} #focus{padding-top:56px}

.hero {
      position: relative;
      padding: 6rem 0 4rem;
      background: radial-gradient(1200px 600px at 20% 0%, rgba(25,118,210,.10), transparent 60%),
                  radial-gradient(1200px 600px at 80% 0%, rgba(0,200,150,.10), transparent 60%);
    }
    .hero .eyebrow { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: .4rem 0 1rem; }
    .hero p.lead { font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 60ch; opacity: .9; }
    .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
    .section { padding: 3rem 0; }
    .grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .card {
      background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
      border: 1px solid rgba(0,0,0,.06); border-radius: 1.1rem; padding: 1.25rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.05);
    }
    .kpi { display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); margin-top:1.25rem; }
    .kpi div { padding:.9rem 1rem; border-radius:.8rem; border:1px dashed rgba(0,0,0,.08); }
    .muted { opacity:.8 }
    .tag { display:inline-block; font-size:.85rem; padding:.25rem .55rem; border-radius:.55rem; background:rgba(0,0,0,.06); }
    .img-row { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); margin-top:1rem; }
    .img-card { overflow:hidden; border-radius:1rem; border:1px solid rgba(0,0,0,.08); }
    .img-card img { width:100%; display:block; }
    .img-card { aspect-ratio: 16 / 10; }
    .img-card img { width: 100%; height: 100%; object-fit: cover; }

    .pill { font-size:.85rem; padding:.35rem .6rem; border-radius: 999px; background: rgba(14,165,233,.12); color:#0ea5e9; }

/* Hover-Fix: Buttons sollen NICHT verschwinden */
  .button:hover{opacity:1; visibility:visible; filter:none;}
  .button.primary{border-radius:999px;}
  .button.primary:hover{
    background:linear-gradient(135deg,var(--brand),var(--brand-700));
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(0,127,174,.20);
  }
  .button.ghost:hover{background:rgba(0,0,0,.06)}


/* === Icon-Buttons: Plus/Minus mittig ausrichten (iOS/Safari-safe) === */
button, .button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.button.icon, .icon-btn, .btn.icon, .table-controls button, .table-controls .button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  line-height: 1; /* verhindert optische Verschiebung in iOS */
  -webkit-appearance: none;
}

.button.icon.sm, .icon-btn.sm, .btn.icon.sm {
  width: 32px;
  height: 32px;
}

.button.icon.lg, .icon-btn.lg, .btn.icon.lg {
  width: 48px;
  height: 48px;
}

button svg, .button svg, .btn svg {
  display: block;        /* entfernt baseline-Offset */
  width: 1em;
  height: 1em;
  pointer-events: none;
  transform: none;       /* verhindert "schräg" durch geerbte Transforms */
}

button .icon, .button .icon, .btn .icon {
  display: block;
  line-height: 1;
}

.table-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.table-controls .spacer { flex: 1; }

/* Wenn Plus/Minus per Text-Zeichen (+/-) gesetzt ist, sauber zentrieren */
.button.icon span, .icon-btn span, .btn.icon span {
  display: block;
  line-height: 1;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Touch-Ziele auf iOS angenehmer */
@media (hover: none) and (pointer: coarse) {
  .button.icon, .icon-btn, .btn.icon { width: 44px; height: 44px; }
}