:root{--ink:#142338;--blue:#0878d3;--muted:#617085;--line:#e6ebf0;--gray:#777;--bg:#f6f8fb;--shadow:0 22px 55px rgba(16,33,57,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}
a{color:inherit}
.wrap{width:min(1120px,calc(100% - 40px));margin:auto}
header{padding:25px 0 18px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{display:block;width:min(300px,55vw);height:auto}
.tiny{font-weight:650;font-size:13px;color:#69788c;letter-spacing:.03em}
.pill{display:inline-flex;align-items:center;gap:8px;color:#395a77;background:#e9f2fa;border:1px solid #d8e6f4;border-radius:100px;font-weight:700;letter-spacing:.03em;padding:8px 15px;font-size:12px}
.pill:before{content:"";height:8px;width:8px;border-radius:50%;background:#1687d3;box-shadow:0 0 0 4px #d5eafb}
.hero{margin-top:14px;min-height:548px;background:white;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.13fr .87fr}
.hero-content{padding:66px 58px 54px;position:relative;z-index:2}
h1{font-size:clamp(2.4rem,5vw,4.65rem);line-height:1.10;letter-spacing:-.055em;margin:25px 0 21px;font-weight:790;max-width:760px}
h1 span{color:var(--blue)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.65;max-width:510px;color:#536276;margin:0 0 30px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:740;border-radius:13px;padding:14px 20px;white-space:nowrap;transition:filter .15s, transform .15s}
.button:hover{filter:brightness(.94);transform:translateY(-1px)}
.button.main{background:#0678d5;color:white;box-shadow:0 8px 19px rgba(0,107,209,.2)}
.button.alt{background:#f3f6fa;color:#243c56;border:1px solid #dfe6ed}
.button svg{width:19px;height:19px;flex-shrink:0}
.extra{font-size:13px;color:#8592a2;margin:16px 0 0}
.hero-art{position:relative;overflow:hidden;background:linear-gradient(143deg,#142539 0%,#243f59 49%,#0a6cb7 100%);min-height:440px}
.hero-art:before{content:"";width:550px;height:550px;border:1px solid rgba(255,255,255,.16);border-radius:50%;position:absolute;top:-210px;right:-230px}
.hero-art:after{content:"";width:360px;height:360px;border:1px solid rgba(255,255,255,.14);border-radius:50%;position:absolute;bottom:-220px;left:-160px}
.tech{position:absolute;inset:0;width:100%;height:100%;opacity:.96}
.art-stamp{position:absolute;bottom:39px;right:37px;color:#dceffd;letter-spacing:.21em;text-transform:uppercase;font-weight:700;font-size:11px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:24px 0 25px}
.info-card{background:white;border:1px solid var(--line);border-radius:18px;padding:23px;min-height:157px}
.info-card .card-top{font-size:12px;color:var(--blue);font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.info-card h2{font-size:19px;letter-spacing:-.018em;margin:8px 0 5px}
.info-card p{color:var(--muted);margin:0;font-size:14px;line-height:1.55}
footer{padding:20px 0 35px}
.footer-inner{border-top:1px solid #dce3eb;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px}
footer p{margin:0;color:#718194;font-size:13px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:14px;color:#47576b;text-decoration:none;font-weight:650}
.footer-links a:hover{text-decoration:underline;color:var(--blue)}
.legal{background:#fff;border:1px solid var(--line);border-radius:23px;padding:42px 48px;box-shadow:var(--shadow);margin:15px auto 25px;max-width:875px}
.legal h1{font-size:42px;letter-spacing:-.038em;margin:5px 0 24px}
.legal h2{font-size:21px;margin:26px 0 8px}
.legal h3{font-size:16px;margin:20px 0 7px}
.legal p,.legal li{color:#44556a;line-height:1.72}
.legal p{margin:0 0 14px}
.legal a{color:#086cbd}
.legal ul{padding-left:23px}
.notice{margin:22px 0;padding:17px 20px;background:#fff7e8;border:1px solid #f4d798;border-radius:13px;font-size:14px;color:#684b0d}
.breadcrumb{display:inline-block;text-decoration:none;color:#2279b7;font-weight:700;font-size:14px;margin-bottom:11px}
.contact-line a{color:#086cbd}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-content{padding:46px 30px 36px}.hero-art{min-height:245px}.art-stamp{bottom:19px;right:24px}.info-grid{grid-template-columns:1fr;gap:12px}.info-card{min-height:auto}.footer-inner{align-items:flex-start;flex-direction:column}.legal{padding:28px 25px}.tiny{display:none}}
@media(max-width:460px){.wrap{width:min(100% - 26px,1120px)}header{padding:20px 0 12px}.brand img{width:225px}.hero{border-radius:20px}.hero-content{padding:35px 22px 31px}h1{font-size:2.55rem;letter-spacing:-.05em}.lead{font-size:16px}.ctas{flex-direction:column}.button{width:100%}.hero-art{min-height:205px}.info-grid{margin-top:16px}.legal h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}}

/* Mobile hero illustration: give the artwork enough height to retain its proportions. */
@media (max-width: 800px) {
  .hero-art {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 460px) {
  .hero-art {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .art-stamp {
    right: 18px;
    bottom: 17px;
    font-size: 10px;
    letter-spacing: .13em;
  }
}


/* Kontakt über Instagram und WhatsApp */
.social-contact{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:29px 32px;margin:0 0 27px;border:1px solid #dfe8f0;border-radius:20px;background:linear-gradient(125deg,#ffffff 0%,#eff5fb 100%)}
.social-copy{flex:1;min-width:0;max-width:560px}
.social-kicker{display:block;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.social-copy h2{font-size:clamp(22px,2.5vw,26px);line-height:1.22;letter-spacing:-.024em;margin:7px 0 8px}
.social-copy p{font-size:14px;color:#526479;line-height:1.6;margin:0}
.social-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.social-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:750;font-size:14px;white-space:nowrap;transition:transform .15s,filter .15s}
.social-button svg{width:22px;height:22px;flex:0 0 auto}
.social-button.whatsapp{background:white;color:#293c57;border:1px solid #cedae7}
.social-button.whatsapp svg{color:#15803d}
.social-button.instagram{background:white;color:#293c57;border:1px solid #cedae7}
.social-button.instagram svg{color:#b13d90}
.social-button:hover{filter:brightness(.96);transform:translateY(-1px)}
.social-button:focus-visible{outline:3px solid #1c83ce;outline-offset:3px}
@media(max-width:1000px){.social-contact{flex-direction:column;align-items:stretch}.social-buttons{justify-content:flex-start}}
@media(max-width:460px){.social-contact{padding:23px 20px;margin-bottom:18px}.social-buttons{flex-direction:column}.social-button{width:100%}}
@media(prefers-reduced-motion:reduce){.social-button{transition:none}}