/* ============================================================ MH MEDITEC — Website (Info + Google-Ads) · Design system Systemschriften · Blau #1D5FD6 + Rot #D92D3B · freundlich-klinisch Geteiltes Stylesheet für alle Seiten (lokal, kein Build, DSGVO). ============================================================ */ :root{ --font:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans',sans-serif; --bg:#FFFFFF; --surface:#FFFFFF; --surface-soft:#F2F7FF; --surface-soft2:#EAF2FE; --ink:#0F2545; --ink-2:#41597B; --muted:#6A7C93; --border:#E6EDF7; --border-strong:#D4E0F0; --primary:#1D5FD6; --primary-strong:#164BAF; --primary-700:#123C8F; --primary-100:#E9F1FF; --primary-200:#D3E4FF; --red:#D92D3B; --red-strong:#B81F2C; --red-100:#FDECED; --t-blue-bg:#E9F1FF; --t-blue-fg:#1D5FD6; --t-red-bg:#FDEBEC; --t-red-fg:#D92D3B; --t-teal-bg:#E1F5F3; --t-teal-fg:#0E9488; --t-amber-bg:#FFF3E2;--t-amber-fg:#C2760F; --t-green-bg:#E8F6EE;--t-green-fg:#1C9B54; --t-violet-bg:#EDEAFE;--t-violet-fg:#6A54EF; --star:#F5A524; --shadow-sm:0 1px 2px rgba(15,37,69,.05),0 3px 10px rgba(23,64,120,.06); --shadow-md:0 10px 28px rgba(23,64,120,.10); --shadow-lg:0 24px 56px rgba(23,64,120,.16); --shadow-primary:0 14px 30px rgba(29,95,214,.30); --shadow-red:0 14px 30px rgba(217,45,59,.28); --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --container:1160px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} /* Sicherheitsnetz gegen horizontales Wischen/Scrollen auf Mobil. overflow-x:clip verhindert Seitwärts-Scroll, ohne den sticky-Header zu brechen. Der Fallback overflow-x:hidden steht nur auf (dort sticky-sicher, da Wurzel); auf nur clip, damit ältere Browser ohne clip-Support den sticky-Header behalten. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink-2);background:#EEF4FF;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} /* Seitenweiter, ruhiger Verlaufs-Hintergrund (Vektor → skaliert verlustfrei, kein Beschnitt auf Mobil) */ body::before{content:"";position:fixed;inset:0;z-index:-1;background:#F1F6FF url("../img/bg-ambient.svg") center center/cover no-repeat} img,svg{max-width:100%;display:block} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{color:var(--ink);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800} h2{font-size:clamp(1.7rem,3.4vw,2.45rem)} h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em} p{margin:0 0 1rem} strong{font-weight:700;color:var(--ink)} :focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px} ::selection{background:rgba(29,95,214,.18)} button{cursor:pointer;font-family:inherit} .skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:300} .skip:focus{left:0} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.25rem)} .section{padding-block:clamp(3rem,6.5vw,5.5rem)} .section--tight{padding-block:clamp(2.25rem,4.5vw,3.5rem)} .section--soft{background:transparent} .center{text-align:center} .mx-auto{margin-inline:auto} .measure{max-width:64ch} .section-head{max-width:56ch;margin:0 auto 2.4rem} .section-head.left{margin-inline:0} .lead{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-2)} .note{font-size:.85rem;color:var(--muted)} /* ---------- Eyebrow ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.8rem;letter-spacing:.02em;color:var(--primary);background:var(--primary-100);padding:.4rem .85rem;border-radius:var(--r-pill);margin:0 0 1.05rem} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)} .eyebrow--red{color:var(--red);background:var(--red-100)} .eyebrow--red::before{background:var(--red)} .eyebrow--onDark{color:#fff;background:rgba(255,255,255,.18)} .eyebrow--onDark::before{background:#fff} /* Eyebrow-Labels über den Abschnitten ausgeblendet (auf Wunsch) */ .eyebrow{display:none} /* ---------- Buttons ---------- */ .btn{--bg:var(--primary);--fg:#fff;--bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:1rem;line-height:1;min-height:52px;padding:.9em 1.55em;border-radius:var(--r-pill);border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s} .btn:hover{text-decoration:none;transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn svg{width:1.15em;height:1.15em;flex:none} .btn--primary:hover{--bg:var(--primary-strong);box-shadow:var(--shadow-primary)} .btn--red{--bg:var(--red)} .btn--red:hover{--bg:var(--red-strong);box-shadow:var(--shadow-red)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--border-strong)} .btn--ghost:hover{--bd:var(--primary);--fg:var(--primary);box-shadow:none} .btn--white{--bg:#fff;--fg:var(--primary-700)} .btn--white:hover{--bg:#fff;box-shadow:var(--shadow-lg)} .btn--onDark.btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.5)} .btn--onDark.btn--ghost:hover{--bd:#fff;--fg:#fff} .btn--lg{min-height:58px;padding:1em 1.9em;font-size:1.06rem} .btn--sm{min-height:44px;padding:.6em 1.1em;font-size:.95rem} .btn--block{width:100%} .btn--disabled,.btn[disabled]{opacity:.5;pointer-events:none} .btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} /* ---------- Header + Navigation ---------- */ .site-header{position:sticky;top:0;z-index:100;background:transparent;border:0;padding-block:clamp(.5rem,1.1vw,.8rem)} .site-header__inner{display:flex;align-items:center;gap:1rem;min-height:60px;padding:.3rem .55rem .3rem 1.15rem;background:#fff;border:1px solid rgba(15,37,69,.08);border-radius:var(--r-pill);box-shadow:0 10px 30px rgba(23,64,120,.12)} .brand{display:inline-flex;align-items:center;text-decoration:none;flex:none} .brand img{height:66px;width:auto} .nav{display:flex;align-items:center;gap:.15rem;margin-left:auto} .nav a:not(.btn){font-weight:600;font-size:.98rem;color:var(--ink-2);padding:.55rem .8rem;border-radius:var(--r-sm);transition:color .18s,background .18s} .nav a:not(.btn):hover{color:var(--primary);background:var(--primary-100);text-decoration:none} .nav a[aria-current="page"]:not(.btn){color:var(--primary)} .nav__actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem} .header-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.98rem;color:var(--ink);background:var(--primary-100);border:1.5px solid transparent;padding:.55rem .9rem;border-radius:var(--r-pill);min-height:46px;transition:background .2s,color .2s,transform .18s var(--ease)} .header-phone:hover{text-decoration:none;color:var(--primary-700);background:var(--primary-200);transform:translateY(-1px)} .header-phone svg{width:19px;height:19px;color:var(--primary);flex:none} .header-phone .num{display:none} .nav-toggle{display:none;width:48px;height:48px;flex:none;margin-left:auto;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);align-items:center;justify-content:center} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s} .nav-toggle span{position:relative} .nav-toggle span::before{position:absolute;top:-6px} .nav-toggle span::after{position:absolute;top:6px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:900px){ .nav-toggle{display:inline-flex} .site-header__inner{position:relative;padding-left:1rem;padding-right:.7rem} .nav{position:absolute;top:calc(100% + .5rem);left:0;right:0;flex-direction:column;align-items:stretch;gap:.15rem;margin:0;background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--border);border-radius:var(--r-lg);padding:.8rem;box-shadow:var(--shadow-lg);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)} .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto} .nav a:not(.btn){padding:.85rem .7rem;font-size:1.05rem} .nav__actions{margin:.6rem 0 0;flex-direction:column;align-items:stretch} .nav__actions .btn,.nav__actions .header-phone{width:100%;justify-content:center} } /* ---------- Chips ---------- */ .chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);padding:.45rem .8rem;border-radius:var(--r-pill)} .chip .dot{width:8px;height:8px;border-radius:50%;background:#1CB57A;box-shadow:0 0 0 4px rgba(28,181,122,.16)} .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 0;padding:0;list-style:none} /* ---------- Hero (mit Foto) ---------- */ .hero{position:relative;overflow:hidden;background:radial-gradient(60% 90% at 92% 0%,var(--primary-100),transparent 60%),radial-gradient(50% 70% at 0% 100%,#FBEDEE,transparent 60%),linear-gradient(180deg,#FBFDFF,#F3F8FF)} .hero__inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.4rem,5vw,4rem)} .hero h1{color:var(--ink);font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:1rem;text-wrap:balance} .hero h1 .grad{background:linear-gradient(90deg,var(--primary),#3B86FF);-webkit-background-clip:text;background-clip:text;color:transparent} .hero h1 .red{color:var(--red)} .hero__sub{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-2);max-width:46ch;margin-bottom:1.5rem} .hero .btn-row{margin-bottom:1.2rem} .hero__mini{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem} .hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--surface-soft2)} .hero-photo>img{width:100%;height:100%;object-fit:cover} .hero__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:linear-gradient(135deg,#DCEAFF,#EAF2FE)} .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center} .hero-figs{position:absolute;inset:0;pointer-events:none} .float{position:absolute;display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.96);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:.55rem .75rem;animation:floaty 5s ease-in-out infinite} .float small{display:block;font-size:.7rem;color:var(--muted);font-weight:600;line-height:1.2} .float strong{display:block;font-size:.9rem;color:var(--ink);font-weight:700;line-height:1.2} .float__icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none} .float__icon svg{width:19px;height:19px} .float--tl{top:14px;left:14px;animation-delay:.2s} .float--br{bottom:14px;right:14px;animation-delay:1.1s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* ---------- Hero: Trust-Badge, Checkliste, Stats-Karte ---------- */ .badge-trust{display:inline-flex;align-items:center;gap:.5rem;background:var(--t-green-bg);color:#157040;font-weight:700;font-size:.85rem;letter-spacing:.01em;padding:.5rem .95rem;border-radius:var(--r-pill);margin:0 0 1.1rem} .badge-trust svg{width:16px;height:16px;color:#1C9B54;flex:none} .hero-checks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem} .hero-checks li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;font-weight:600;color:var(--ink);font-size:1rem} .hero-checks .hc{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#3B86FF);color:#fff;display:grid;place-items:center;flex:none} .hero-checks .hc svg{width:15px;height:15px} .hero-checks .muted{color:var(--muted);font-weight:500;font-size:.92rem} .hero__visual{position:relative} .hero-stats{position:relative;z-index:3;width:88%;margin:-72px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:1.1rem} .hero-stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .hstat{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-md);padding:.85rem .95rem} .hstat b{display:block;font-size:1.55rem;font-weight:800;color:var(--primary);line-height:1;letter-spacing:-.02em} .hstat.red b{color:var(--red)} .hstat span{display:block;font-size:.78rem;color:var(--muted);font-weight:600;margin-top:.3rem} .hero-accredit{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.7rem;background:var(--primary-100);color:var(--primary-700);font-weight:700;font-size:.85rem;padding:.7rem;border-radius:var(--r-md);text-align:center} .hero-accredit svg{width:18px;height:18px;color:var(--primary);flex:none} /* ---------- Hero mit Geräte-Hintergrundbild ---------- */ .hero--device{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(520px,70vh,660px);background:linear-gradient(180deg,#EDF3FF 0%,#F4F8FF 55%,#EAF1FE 100%)} .hero--device .hero__bg{position:absolute;top:0;right:0;height:100%;width:54%;object-fit:cover;object-position:50% center;z-index:0} .hero--device .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#F1F6FF 38%,rgba(241,246,255,.9) 46%,rgba(241,246,255,.45) 55%,rgba(241,246,255,0) 66%)} .hero--device>.container{position:relative;z-index:2;width:100%} .hero--device .hero__content{max-width:600px;padding-block:clamp(2.2rem,5vw,3.2rem)} .hero--device .hero__sub{max-width:38ch} @media (max-width:900px){ .hero--device{min-height:auto;background:#EAF2FE} .hero--device .hero__bg{width:100%;object-position:58% 26%} .hero--device .hero__scrim{background:linear-gradient(180deg,rgba(243,248,255,.93) 0%,rgba(243,248,255,.8) 48%,rgba(243,248,255,.88) 100%)} .hero--device .hero__content{max-width:none} } /* ============================================================ AKTION · Gold-Akzent · Vollbild-Hero (Kampagnen-Landingpage) ============================================================ */ :root{ --gold:#A16207; --gold-strong:#845309; --gold-700:#6B4308; --gold-100:#FBF1DC; --gold-200:#F1DEB2; } /* ---------- Aktions-Bar (über dem Header) ---------- */ .promo-bar{position:relative;z-index:120;background:linear-gradient(90deg,#0E9E8C,#14B3A2 55%,#1CC3B2);color:#fff} .promo-bar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .9rem;min-height:46px;padding-block:.5rem;text-align:center} .promo-bar p{margin:0;font-size:.92rem;font-weight:600;line-height:1.4;display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:center} .promo-bar svg{width:18px;height:18px;flex:none} .promo-bar strong{color:#fff;font-weight:800} .promo-bar__note{font-weight:600;color:#C7EFE7} .promo-bar__cta{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;font-size:.88rem;color:#0B6E56;background:#fff;padding:.4rem .9rem;border-radius:var(--r-pill);white-space:nowrap;transition:transform .18s var(--ease),box-shadow .2s} .promo-bar__cta svg{width:15px;height:15px} .promo-bar__cta:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.2)} /* ---------- Vollbild-Hero ---------- */ .hero-full{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:clamp(540px,72vh,700px);background:#E9F1FE;margin-top:-108px;padding-top:108px} .hero-full__bg{position:absolute;top:0;bottom:0;right:0;left:auto;width:62%;max-width:none;height:100%;object-fit:cover;object-position:50% center;z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 20%,#000 48%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 20%,#000 48%)} .hero-full__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(237,243,255,.97) 0%,rgba(237,243,255,.93) 30%,rgba(237,243,255,.72) 46%,rgba(238,244,255,.3) 62%,rgba(238,244,255,0) 80%)} .hero-full::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;z-index:-1;background:linear-gradient(to bottom,rgba(238,244,255,0),#EEF4FF);pointer-events:none} .hero-full__inner{position:relative;width:100%;padding-block:clamp(2.6rem,6vw,4.4rem)} .hero-full__copy{max-width:600px} .hero-full h1{color:var(--ink);font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:1rem;text-wrap:balance} .hero-full h1 .grad{background:linear-gradient(90deg,var(--primary),#3B86FF);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-full h1 .red{color:var(--red)} .hero-full .hero__sub{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-2);max-width:45ch;margin-bottom:1.5rem} .hero-full .btn-row{margin-bottom:0} /* Glas-Look Kennzahlen-Leiste */ .glass-stats{display:flex;align-items:center;justify-content:center;gap:clamp(1.4rem,5vw,4rem);max-width:960px;margin:0 auto;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.65);box-shadow:0 12px 34px rgba(23,64,120,.13);border-radius:var(--r-lg);padding:clamp(.9rem,2.2vw,1.35rem) clamp(1.3rem,4vw,2.6rem)} .glass-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;min-width:0} .glass-stat--right{text-align:center;align-items:center} .glass-stat__label{font-size:.9rem;font-weight:600;color:var(--ink-2);line-height:1.3;max-width:30ch} .glass-stat__num{font-size:clamp(1.55rem,3vw,2.15rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.05} .glass-stats__divider{align-self:stretch;width:1px;flex:none;background:linear-gradient(rgba(15,37,69,0),rgba(15,37,69,.18),rgba(15,37,69,0))} @media (max-width:560px){ .glass-stats{flex-direction:column;gap:.85rem;padding:1.15rem 1.3rem;align-items:stretch} .glass-stat,.glass-stat--right{text-align:center;align-items:center;gap:.1rem} .glass-stat__label{font-size:.85rem;max-width:none} .glass-stats__divider{align-self:stretch;width:auto;height:1px;background:linear-gradient(90deg,rgba(15,37,69,0),rgba(15,37,69,.18),rgba(15,37,69,0))} } /* Aktions-Badge im Hero */ .badge-aktion{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold-100);color:var(--gold-strong);border:1px solid var(--gold-200);font-weight:800;font-size:.85rem;letter-spacing:.01em;padding:.5rem .95rem;border-radius:var(--r-pill);margin:0 0 1.1rem;box-shadow:0 3px 12px rgba(161,98,7,.16)} .badge-aktion svg{width:17px;height:17px;flex:none;color:var(--gold)} .hero-note{margin:1.5rem 0 0;font-size:.85rem;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:.45rem} .hero-note svg{width:16px;height:16px;flex:none;color:var(--gold)} /* Tablet: Gerät bleibt rechts (wie Desktop), Text-Spalte schmaler */ @media (max-width:1024px){ .hero-full__copy{max-width:56%} .hero-full .hero__sub{max-width:38ch} .hero-full__bg{width:70%} } /* Mobil: Gerät als kompaktes, weich eingeblendetes Hintergrundbild rechts – Text links */ @media (max-width:767px){ .hero-full{margin-top:-80px;padding-top:80px;background:linear-gradient(180deg,#EDF3FF 0%,#F4F8FF 55%,#EAF1FE 100%)} .hero-full__copy{max-width:none} .hero-full h1{max-width:63%;font-size:1.9rem} .hero-full .hero__sub{max-width:60%} .hero-full__scrim{display:block;z-index:-1;background:linear-gradient(90deg,rgba(240,245,255,.92) 0%,rgba(240,245,255,.72) 30%,rgba(240,245,255,.3) 52%,rgba(240,245,255,0) 72%)} .hero-full__bg{position:absolute;inset:auto;top:0;bottom:0;right:-6%;width:80%;height:100%;object-fit:cover;object-position:48% 50%;transform:none;border-radius:0;box-shadow:none;z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 52%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 52%)} } @media (max-width:560px){ .promo-bar p{font-size:.84rem} .promo-bar__cta{display:none} } /* ---------- Trust bar ---------- */ .trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem 1.4rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:1.1rem 1.4rem;margin-top:clamp(1.6rem,3vw,2.4rem)} .trust-item{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.25} .trust-item svg{width:24px;height:24px;color:var(--primary);flex:none} .trust-item.red svg{color:var(--red)} /* ---------- Grids ---------- */ .grid{display:grid;gap:clamp(1rem,2.2vw,1.5rem)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} /* 5 items in a 3-col grid: center the two cards in the last row */ .grid--center-last{grid-template-columns:repeat(6,1fr)} .grid--center-last>*{grid-column:span 2} .grid--center-last>*:nth-child(4){grid-column:2/span 2} .grid--center-last>*:nth-child(5){grid-column:4/span 2} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} /* ---------- Feature / benefit tiles ---------- */ .feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem 1.45rem;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s;height:100%} .feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)} .tile-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.05rem} .tile-icon svg{width:27px;height:27px} .tile-icon.blue{background:var(--t-blue-bg);color:var(--t-blue-fg)} .tile-icon.red{background:var(--t-red-bg);color:var(--t-red-fg)} .tile-icon.teal{background:var(--t-teal-bg);color:var(--t-teal-fg)} .tile-icon.amber{background:var(--t-amber-bg);color:var(--t-amber-fg)} .tile-icon.green{background:var(--t-green-bg);color:var(--t-green-fg)} .tile-icon.violet{background:var(--t-violet-bg);color:var(--t-violet-fg)} .feature h3{margin-bottom:.4rem} .feature p{margin:0;color:var(--ink-2);font-size:.97rem} /* ---------- Explainer / Prosa-Panel ---------- */ .explain{max-width:860px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.6rem,3.4vw,2.8rem)} .explain__toggle{display:none} .explain p{margin:0 0 1.05rem;color:var(--ink-2);line-height:1.72} .explain p:last-child{margin-bottom:0} /* Mobil: als aufklappbares Panel (Accordion); Tablet/Desktop unverändert */ @media (max-width:767px){ #was-ist-kaltplasma .section-head{display:none} .explain{padding:0;overflow:hidden} .explain__toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;margin:0;cursor:pointer;font:inherit;text-align:left;padding:1.15rem 1.2rem;background:var(--primary-100);border:0;border-radius:var(--r-lg);transition:background .2s} .explain__toggle:active{background:var(--primary-200)} .explain.is-open .explain__toggle{border-radius:var(--r-lg) var(--r-lg) 0 0} .explain__toggle-text{display:flex;flex-direction:column;gap:.18rem} .explain__toggle-title{font-weight:800;color:var(--ink);font-size:1.1rem;line-height:1.2} .explain__toggle-hint{font-weight:600;color:var(--primary);font-size:.82rem} .explain.is-open .explain__toggle-hint{display:none} .explain__chevron-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)} .explain.is-open .explain__chevron-badge{transform:rotate(180deg)} .explain__chevron{width:20px;height:20px} .explain__body{display:none;padding:1.05rem 1.2rem 1.35rem;border-top:1px solid var(--border)} .explain.is-open .explain__body{display:block} } /* ---------- Field cards (mit Foto) ---------- */ .field-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s;height:100%;display:flex;flex-direction:column} .field-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)} .field-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-soft2)} .field-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .field-card:hover .field-card__media img{transform:scale(1.04)} .field-card__badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:#fff;background:rgba(15,37,69,.55);backdrop-filter:blur(4px);padding:.35rem .7rem;border-radius:var(--r-pill)} .field-card__badge svg{width:15px;height:15px} .field-card__body{padding:1.4rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column} .field-card__body h3{margin-bottom:.4rem} .field-card__body p{margin:0;color:var(--ink-2);font-size:.97rem} .field-card__link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--primary);background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:var(--r-pill);padding:.6rem 1.05rem;box-shadow:0 4px 14px rgba(23,64,120,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-decoration:none;transition:transform .2s var(--ease),box-shadow .25s,border-color .2s,background .2s} .field-card__link svg{width:16px;height:16px;transition:transform .2s var(--ease)} .field-card__link:hover{background:#fff;border-color:var(--primary);transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,64,120,.14);text-decoration:none} .field-card__link:hover svg{transform:translateX(3px)} .field-card__link:focus-visible{outline:2px solid var(--primary);outline-offset:3px} .field-card__foot{margin-top:auto;padding-top:1.15rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem} .field-card__foot .field-card__link{margin-top:0} .field-card__hint{display:inline-flex;align-items:center;gap:.42rem;font-size:.78rem;font-weight:700;color:var(--primary-700);background:var(--primary-100);padding:.34rem .68rem;border-radius:var(--r-pill)} .field-card__hint svg{width:15px;height:15px;flex:none;color:var(--primary)} .aktion-hint{display:inline-flex;align-items:center;gap:.4rem;margin:.15rem 0 .6rem;font-size:.85rem;font-weight:700;color:#0B6E56;background:var(--t-teal-bg);border:1px solid #B9E6D8;padding:.35rem .7rem;border-radius:var(--r-pill)} .aktion-hint svg{width:15px;height:15px;flex:none;color:#0E9488} .aktion-acc{max-width:600px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden} .aktion-acc__head{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:clamp(.85rem,2vw,1.1rem) clamp(1rem,2.4vw,1.35rem)} .aktion-acc__head::-webkit-details-marker{display:none} .aktion-acc__title{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ink);font-size:clamp(.98rem,1.9vw,1.15rem);min-width:0} .aktion-acc__title svg{width:18px;height:18px;color:#14B3A2;flex:none} .aktion-acc__toggle{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.85rem;color:#0E9E8C;white-space:nowrap;flex:none} .aktion-acc__toggle svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)} .aktion-acc[open] .aktion-acc__toggle svg{transform:rotate(180deg)} .aktion-acc .lbl-less{display:none} .aktion-acc[open] .lbl-more{display:none} .aktion-acc[open] .lbl-less{display:inline} .aktion-acc__body{padding:0 clamp(1rem,2.4vw,1.35rem) clamp(1rem,2.4vw,1.35rem)} @media (max-width:480px){ .aktion-acc__head{gap:.6rem} .aktion-acc__toggle span{display:none!important} .aktion-acc__toggle{gap:0} } .aktion-terms__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .aktion-terms__list li{position:relative;padding-left:1.25rem;font-size:.83rem;color:var(--ink-2);line-height:1.5} .aktion-terms__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:#0E9488} .aktion-terms__list strong{color:var(--ink);font-weight:700} /* ---------- Split media ---------- */ .media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border);aspect-ratio:4/3;background:var(--surface-soft2)} .media img{width:100%;height:100%;object-fit:cover} .media--tall{aspect-ratio:3/4} .media-free{display:flex;justify-content:center} .media-free img{width:100%;max-width:460px;height:auto;display:block} .media--wide{aspect-ratio:16/9} /* ---------- Steps (Prozess) ---------- */ .steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;counter-reset:step} .steps.grid--3{grid-template-columns:repeat(3,1fr)} .step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);height:100%} .step__num{counter-increment:step;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),#3B86FF);margin-bottom:1rem} .step__num::before{content:counter(step,decimal-leading-zero)} .step h3{margin:0 0 .4rem;font-size:1.12rem} .step p{margin:0;color:var(--ink-2);font-size:.97rem} /* ---------- Ticks ---------- */ .ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.8rem} .ticks li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;color:var(--ink-2)} .ticks .tick{width:24px;height:24px;border-radius:50%;background:var(--t-green-bg);color:var(--t-green-fg);display:grid;place-items:center;margin-top:.1rem;flex:none} .ticks .tick svg{width:15px;height:15px} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.2rem);text-align:center} .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.7rem 1rem;box-shadow:var(--shadow-sm)} .stat__num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--primary)} .stat--red .stat__num{color:var(--red)} .stat__label{font-size:.92rem;font-weight:600;color:var(--muted);margin-top:.55rem} /* ---------- Testimonials ---------- */ /* Erfahrungen – kompakte Karten in endloser Laufleiste */ .tmq{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .tmq__track{display:flex;gap:1rem;width:max-content;padding:.5rem 0;animation:tmqScroll 80s linear infinite;will-change:transform} .tmq:hover .tmq__track,.tmq:focus-within .tmq__track{animation-play-state:paused} @keyframes tmqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tcard{flex:0 0 clamp(258px,78vw,316px);box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem} .tcard .stars{color:var(--star);font-size:.82rem;letter-spacing:1.5px} .tcard blockquote{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink)} .tcard__author{display:flex;align-items:center;gap:.6rem;margin-top:.15rem} .tcard__avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem;color:#fff;background:linear-gradient(135deg,var(--primary),#3B86FF);flex:none} .tcard__name{display:block;font-weight:700;color:var(--ink);font-size:.85rem;line-height:1.2} .tcard__role{display:block;font-size:.77rem;color:var(--muted);margin-top:1px} @media (prefers-reduced-motion:reduce){.tmq{overflow-x:auto}.tmq__track{animation:none}} /* ---------- Founder statement ---------- */ .founder{position:relative;max-width:56rem;margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:clamp(1.9rem,4vw,3.2rem)} .founder::before{content:"\201C";position:absolute;top:clamp(-.3rem,1vw,.4rem);left:clamp(1rem,3vw,2rem);font-family:Georgia,"Times New Roman",serif;font-size:clamp(4.5rem,11vw,8rem);line-height:1;color:var(--primary);opacity:.13;pointer-events:none} .founder blockquote{margin:clamp(1.1rem,3vw,2.2rem) 0 0;position:relative;font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.5;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty} .founder__author{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem} .founder__avatar{width:112px;height:112px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,var(--primary),#3B86FF);box-shadow:var(--shadow-sm);object-fit:cover;object-position:center} img.founder__avatar{border:2px solid #fff;object-position:62% center} .founder__name{display:block;font-weight:800;color:var(--ink);font-size:1.05rem;line-height:1.2} .founder__role{display:block;font-size:.9rem;color:var(--muted);margin-top:2px} /* ---------- FAQ ---------- */ .faq{display:grid;gap:.85rem;max-width:56rem;margin-inline:auto} .faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden} .faq__item[open]{border-color:var(--border-strong)} .faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;font-weight:700;color:var(--ink);font-size:1.03rem;min-height:56px} .faq__q::-webkit-details-marker{display:none} .faq__q .ic{width:28px;height:28px;flex:none;border-radius:50%;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;transition:transform .25s var(--ease),background .2s} .faq__q .ic svg{width:16px;height:16px} .faq__item[open] .faq__q .ic{transform:rotate(45deg);background:var(--primary);color:#fff} .faq__a{padding:0 1.3rem 1.2rem;color:var(--ink-2)} .faq__a p{margin:0} /* ---------- CTA band ---------- */ .cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(2.4rem,5vw,3.8rem);text-align:center;color:#fff;background:radial-gradient(80% 120% at 12% 12%,#3B86FF,var(--primary) 45%,var(--primary-700));box-shadow:var(--shadow-lg)} .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 88% 20%,rgba(217,45,59,.35),transparent 70%);pointer-events:none} .cta>*{position:relative} .cta h2{color:#fff} .cta p{color:rgba(255,255,255,.92);max-width:52ch;margin-inline:auto} .cta .btn-row{justify-content:center;margin-top:1.6rem} /* ---------- Page hero (Unterseiten) ---------- */ .pagehero{position:relative;overflow:hidden;background:radial-gradient(60% 100% at 90% 0%,var(--primary-100),transparent 60%),linear-gradient(180deg,#FBFDFF,#F3F8FF);padding-block:clamp(2.4rem,5vw,3.8rem);border-bottom:1px solid var(--border)} .pagehero__inner{max-width:60ch} .pagehero h1{color:var(--ink);font-size:clamp(2rem,4.4vw,3rem);margin-bottom:.6rem} .pagehero p{color:var(--ink-2);font-size:clamp(1.04rem,1.6vw,1.22rem);margin:0 0 .9rem} .pagehero p:last-child{margin-bottom:0} .pagehero p.pagehero__lead{color:var(--ink);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;line-height:1.35;margin:0 0 .8rem} .breadcrumb{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:.9rem} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--primary)} /* ---------- Prose (Rechtstexte) ---------- */ .prose{max-width:72ch} .prose h2{margin-top:2rem;font-size:1.35rem} .prose h3{margin-top:1.5rem;font-size:1.08rem} .prose p,.prose li{color:var(--ink-2)} .prose ul{margin:0 0 1rem;padding-left:1.2rem} .prose li{margin-bottom:.4rem} .prose a{color:var(--primary);text-decoration:underline} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start} .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm);display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem} .contact-card__icon{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary)} .contact-card__icon svg{width:22px;height:22px} .contact-card h3{font-size:1rem;margin:0 0 .2rem} .contact-card a,.contact-card p{margin:0;color:var(--ink-2);font-size:1rem;word-break:break-word} .contact-card a:hover{color:var(--primary)} /* ---------- Form fields (shared) ---------- */ .field{margin-bottom:1rem} .field label{display:block;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.4rem} .field .req{color:var(--red)} .field input,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:.85rem .95rem;transition:border-color .18s,box-shadow .18s} .field textarea{min-height:120px;resize:vertical} .field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,95,214,.16)} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,45,59,.14)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-note{font-size:.86rem;color:var(--muted)} /* ---------- Stepper (React-Bits-Stil, Vanilla) ---------- */ .stepper-wrap{max-width:640px;margin:0 auto} .stepper{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:clamp(1.4rem,3.2vw,2.2rem);position:relative} .stepper__head{display:flex;align-items:center;gap:0;max-width:430px;margin:0 auto 1.6rem} .stepper__dot{flex:none;display:flex;align-items:center;justify-content:center} .stepper__circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;border:2px solid var(--border-strong);color:var(--muted);background:#fff;transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s} .stepper__circle svg{width:18px;height:18px;opacity:0;position:absolute;transition:opacity .2s} .stepper__circle .num{transition:opacity .2s} .stepper__conn{flex:1;min-width:16px;height:3px;border-radius:2px;background:var(--border-strong);position:relative;overflow:hidden} .stepper__conn::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--primary),#3B86FF);transition:width .45s var(--ease)} .stepper__dot.is-active .stepper__circle{border-color:var(--primary);color:#fff;background:linear-gradient(135deg,var(--primary),#3B86FF);box-shadow:0 0 0 5px rgba(29,95,214,.15);transform:scale(1.06)} .stepper__dot.is-done .stepper__circle{border-color:var(--primary);background:var(--primary);color:#fff} .stepper__dot.is-done .stepper__circle .num{opacity:0} .stepper__dot.is-done .stepper__circle svg{opacity:1} .stepper__conn.is-filled::after{width:100%} .stepper__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;font-size:.85rem;font-weight:600;color:var(--muted)} .stepper__meta .pct{color:var(--primary)} .step-panel{display:none} .step-panel.is-active{display:block;animation:panelIn .38s var(--ease)} .step-panel.is-active.back{animation:panelInBack .38s var(--ease)} @keyframes panelIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes panelInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} .step-panel legend,.step-panel .q-title{padding:0;font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.25;margin-bottom:.3rem} .step-panel .q-help{font-size:.92rem;color:var(--muted);margin:0 0 1.15rem} .step-panel fieldset{border:0;margin:0;padding:0;min-inline-size:auto} .opts{display:grid;gap:.6rem} .opt{position:relative;display:flex;align-items:center;gap:.85rem;cursor:pointer;border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:.9rem 1rem;background:var(--surface);transition:border-color .18s,background .18s,box-shadow .18s;min-height:56px} .opt:hover{border-color:var(--primary);background:var(--primary-100)} .opt input{position:absolute;opacity:0;width:1px;height:1px} .opt__tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);flex:none;display:grid;place-items:center;transition:border-color .18s,background .18s} .opt__tick svg{width:14px;height:14px;color:#fff;opacity:0;transition:opacity .18s} .opt__label{font-weight:600;color:var(--ink);font-size:1rem} .opt:has(input:checked){border-color:var(--primary);background:var(--primary-100);box-shadow:0 0 0 3px rgba(29,95,214,.14)} .opt:has(input:checked) .opt__tick{background:var(--primary);border-color:var(--primary)} .opt:has(input:checked) .opt__tick svg{opacity:1} .opt input:focus-visible + .opt__tick{outline:3px solid var(--primary);outline-offset:2px} /* Sonstiges – Freitextfeld, erscheint nur bei Auswahl "Sonstiges" */ .opt-other{display:none;margin-top:.65rem} .step-panel fieldset:has(input[value="Sonstiges"]:checked) .opt-other{display:block;animation:panelIn .3s var(--ease)} .opt-other label{display:block;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.4rem} .opt-other input{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:.8rem .95rem;transition:border-color .18s,box-shadow .18s} .opt-other input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,95,214,.16)} .consent{display:flex;gap:.7rem;align-items:flex-start;margin:.4rem 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.45} .consent input{margin-top:.15rem;width:20px;height:20px;flex:none;accent-color:var(--primary)} .privacy-note{font-size:.82rem;color:var(--muted);margin:1rem 0 0;display:flex;align-items:center;gap:.45rem;justify-content:center} .privacy-note svg{width:15px;height:15px;color:var(--t-green-fg);flex:none} .step-err{color:var(--red);font-size:.9rem;font-weight:600;margin:.9rem 0 0;display:none} .stepper__foot{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem} .stepper__foot .grow{flex:1} .step-back{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;color:var(--muted);font-weight:700;font-size:.95rem;padding:.6rem .4rem;min-height:46px;visibility:hidden} .step-back.is-shown{visibility:visible} .step-back:hover{color:var(--primary)} .step-back svg{width:18px;height:18px} /* ---------- Loader-Overlay ---------- */ .loader{position:fixed;inset:0;z-index:400;display:none;place-items:center;text-align:center;background:radial-gradient(60% 60% at 50% 40%,#F3F8FF,#E7F0FF);backdrop-filter:blur(4px)} .loader.is-on{display:grid} .loader__inner{padding:2rem} .loader__ring{width:88px;height:88px;margin:0 auto 1.4rem} .loader__ring svg{width:100%;height:100%} .loader__ring .spin{transform-origin:center;animation:spin 1.1s linear infinite} .loader__glow{animation:pulse 1.6s ease-in-out infinite} .loader h2{font-size:1.4rem;margin:0 0 .4rem} .loader p{color:var(--ink-2);margin:0;max-width:34ch;margin-inline:auto} @keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} /* ---------- Footer ---------- */ .site-footer{background:#fff;color:var(--ink-2);padding-block:clamp(2.6rem,5vw,4rem) 1.8rem;position:relative;border-top:1px solid var(--border)} .site-footer::before{content:none} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2rem} .footer-brand .fbrand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none} .footer-brand .flogo{height:72px;width:auto;flex:none} .footer-brand .mark{width:36px;height:36px;flex:none} .footer-brand b{color:var(--ink);font-weight:800;font-size:1.12rem;letter-spacing:-.01em} .footer-brand b span{color:var(--primary)} .footer-brand p{margin-top:1rem;max-width:260px;color:var(--ink-2);font-size:.95rem;line-height:1.5} .footer-social{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.3rem} .footer-ig{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;transition:color .2s} .footer-ig svg{width:22px;height:22px;color:var(--primary)} .footer-ig:hover{color:var(--primary);text-decoration:none} .site-footer h4{color:var(--ink);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:700} .footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem} .site-footer a{color:var(--ink-2)} .site-footer a:hover{color:var(--primary);text-decoration:none} .footer-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.84rem;color:var(--muted)} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.07s} .reveal[data-delay="2"]{transition-delay:.14s} .reveal[data-delay="3"]{transition-delay:.21s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .float,.loader__ring .spin,.loader__glow,.cta::before,.field-card:hover .field-card__media img{animation:none} .btn:hover,.feature:hover,.field-card:hover,.header-phone:hover{transform:none} .step-panel.is-active{animation:none} } /* ---------- Responsive ---------- */ @media (max-width:900px){ .hero__inner{grid-template-columns:1fr;gap:1.6rem} .hero-photo{aspect-ratio:16/10} .hero__media{aspect-ratio:16/10} .split{grid-template-columns:1fr} .trust-bar{grid-template-columns:1fr 1fr} .grid--4{grid-template-columns:1fr 1fr} .grid--3,.steps.grid--3{grid-template-columns:1fr} .grid--center-last{grid-template-columns:1fr} .grid--center-last>*,.grid--center-last>*:nth-child(4),.grid--center-last>*:nth-child(5){grid-column:auto} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ body{font-size:16px} .header-phone .label{display:none} .header-phone .num{display:inline} .grid--4,.grid--2{grid-template-columns:1fr} .trust-bar{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .btn-row .btn{width:100%} .stepper__circle{width:34px;height:34px;font-size:.85rem} .hero-stats{width:100%;margin-top:-52px;padding:.9rem} .hstat b{font-size:1.35rem} } /* ============================================================ LEITLINIE · Download-Ordner · React-Bits "Folder" (Vanilla) Grauer, interaktiver Ordner: öffnet/lädt die AWMF-Leitlinie. ============================================================ */ .leitlinie{align-items:center} .leitlinie__actions{margin-top:1.5rem} .leitlinie__meta{margin:1.15rem 0 0;display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--muted)} .leitlinie__meta svg{width:16px;height:16px;color:var(--red);flex:none} /* Bühne für den Ordner (reserviert Platz nach oben für die aufgefächerten Blätter) */ .folder-stage{display:flex;flex-direction:column;align-items:center;gap:1.05rem;padding-top:124px;padding-bottom:.5rem} .folder-caption{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center} .folder-name{font-weight:800;color:var(--ink);font-size:1.02rem;letter-spacing:-.01em} .folder-hint{font-size:.85rem;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:.5rem;transition:color .2s var(--ease)} .folder-hint svg{width:16px;height:16px;color:var(--primary);flex:none;transition:transform .35s var(--ease)} .folder-stage.is-open .folder-hint{color:var(--primary)} .folder-stage.is-open .folder-hint svg{transform:translateY(-2px) rotate(180deg)} /* Grau-Palette des Ordners */ .folder{ --folder-color:#9AA7BD; --folder-back:#7B8AA4; --paper-1:#E8ECF3; --paper-2:#F3F6FA; --paper-3:#FFFFFF; position:relative;cursor:pointer;transition:transform .2s ease-in; filter:drop-shadow(0 18px 24px rgba(23,64,120,.18)); } .folder:not(.open):hover{transform:translateY(-8px)} .folder:not(.open):hover .paper{transform:translate(-50%,0)} .folder:not(.open):hover .folder__front{transform:skew(15deg) scaleY(.6)} .folder:not(.open):hover .right{transform:skew(-15deg) scaleY(.6)} .folder.open{transform:translateY(-8px)} .folder:focus-visible{outline:3px solid var(--primary);outline-offset:6px;border-radius:12px} .folder__back{position:relative;width:132px;height:104px;background:var(--folder-back);border-radius:0 12px 12px 12px} .folder__back::after{content:"";position:absolute;z-index:0;bottom:98%;left:0;width:42px;height:12px;background:var(--folder-back);border-radius:6px 6px 0 0} .paper{position:absolute;z-index:2;bottom:10%;left:50%;transform:translate(-50%,10%);width:70%;height:80%;background:var(--paper-1);border-radius:12px;box-shadow:0 2px 6px rgba(15,37,69,.10);transition:transform .3s var(--ease),height .3s var(--ease);text-decoration:none} .paper:nth-child(2){background:var(--paper-2);width:80%;height:70%} .paper:nth-child(3){background:var(--paper-3);width:90%;height:60%;display:flex;align-items:flex-start;justify-content:flex-start;padding:9px} .paper:hover{text-decoration:none} .paper__tag{font-size:.6rem;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--red);padding:.14rem .38rem;border-radius:5px;line-height:1} .paper--doc::after{content:"";position:absolute;left:9px;right:9px;bottom:12px;height:0;border-top:2px solid #E1E7F0;box-shadow:0 8px 0 -1px #E9EEF5,0 16px 0 -1px #EEF2F8} .folder__front{position:absolute;z-index:3;inset:0;width:100%;height:100%;background:var(--folder-color);border-radius:6px 12px 12px 12px;transform-origin:bottom;transition:transform .3s var(--ease)} /* Aufgeklappt: Blätter fächern nach oben auf, klickbar (öffnen das PDF) */ .folder.open .paper{z-index:5;cursor:pointer} .folder.open .paper:nth-child(1){transform:translate(-118%,-70%) rotateZ(-15deg)} .folder.open .paper:nth-child(2){transform:translate(12%,-70%) rotateZ(15deg);height:80%} .folder.open .paper:nth-child(3){transform:translate(-50%,-104%) rotateZ(5deg);height:80%} .folder.open .paper:nth-child(1):hover{transform:translate(-118%,-70%) rotateZ(-15deg) scale(1.06)} .folder.open .paper:nth-child(2):hover{transform:translate(12%,-70%) rotateZ(15deg) scale(1.06)} .folder.open .paper:nth-child(3):hover{transform:translate(-50%,-104%) rotateZ(5deg) scale(1.06)} .folder.open .folder__front{transform:skew(15deg) scaleY(.6)} .folder.open .right{transform:skew(-15deg) scaleY(.6)} @media (max-width:900px){ .folder-stage{padding-top:116px} } @media (prefers-reduced-motion:reduce){ .folder,.folder .paper,.folder__front,.folder-hint svg{transition:none} .folder:not(.open):hover{transform:none} .folder:not(.open):hover .paper,.folder:not(.open):hover .folder__front,.folder:not(.open):hover .right{transform:none} } /* ============================================================ FALLBEISPIELE · Behandlungsverläufe mit „Sensible Inhalte"-Gate Wundfotos sind zunächst verpixelt; erst per Klick sichtbar. ============================================================ */ .faelle{display:grid;gap:1.6rem} .fall{background:#DBE1EB;border:1px solid #CDD6E3;border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.4rem)} .fall__head{text-align:center;max-width:64ch;margin:0 auto clamp(1.3rem,2.6vw,1.9rem)} .fall__title{color:var(--ink);font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .5rem} .fall__sub{color:var(--ink-2);font-size:.96rem;margin:0} .fall__toggle{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--primary);background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--r-pill);padding:.5rem 1.05rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s} .fall__toggle svg{width:16px;height:16px;flex:none} .fall__toggle:hover{border-color:var(--primary);background:var(--primary-100)} /* Raster der Fallbeispiele: gleich breite Spalten (1fr), die den Innenraum symmetrisch füllen – dadurch stehen die Karten immer exakt mittig. */ .fall__grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(.85rem,1.6vw,1.35rem)} /* min-width:0 erlaubt das Schrumpfen der Spalten, damit auf Mobil nichts nach rechts über den Rand hinausläuft. */ .fall__item{display:flex;flex-direction:column;gap:.75rem;min-width:0;width:100%;margin:0} /* Tablet: zwei Spalten. */ @media (max-width:820px){ .fall__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Handy: eine Spalte (volle Breite, mittig) – so entsteht keine einzelne nach links versetzte Restkarte bei 3er-Reihen. */ @media (max-width:560px){ .fall__grid{grid-template-columns:minmax(0,1fr)} } /* Sensibles Bild mit Blur-Gate */ .sens{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:#0F2545;box-shadow:var(--shadow-sm)} .sens__img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(18px) saturate(1.15);transform:scale(1.2);transition:filter .45s var(--ease),transform .45s var(--ease)} .sens.is-revealed .sens__img{filter:none;transform:none} .sens__gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:1rem;border:0;cursor:pointer;color:#fff;text-align:center;background:linear-gradient(180deg,rgba(15,37,69,.42),rgba(15,37,69,.55));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .35s var(--ease)} .sens__gate svg{width:30px;height:30px;opacity:.95} .sens__ttl{font-weight:800;font-size:1rem;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.35)} .sens__btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.15rem;font-weight:700;font-size:.9rem;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.85);border-radius:var(--r-pill);padding:.5rem 1.1rem;transition:background .2s,color .2s} .sens__gate:hover .sens__btn{background:#fff;color:var(--ink)} .sens.is-revealed .sens__gate{opacity:0;pointer-events:none} .sens__gate:focus-visible{outline:3px solid #fff;outline-offset:-4px} .sens__hide{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;display:none;place-items:center;color:#fff;background:rgba(15,37,69,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:background .2s} .sens__hide svg{width:17px;height:17px} .sens__hide:hover{background:rgba(15,37,69,.8)} .sens.is-revealed .sens__hide{display:grid} /* Bildunterschrift: Tag/Woche + Behandlungsart */ .fall__cap{text-align:center;line-height:1.35} .fall__cap strong{display:block;color:var(--ink);font-size:.98rem;font-weight:800;letter-spacing:-.01em} .fall__cap span{display:block;color:var(--ink-2);font-size:.85rem;margin-top:.1rem} /* Zusammenfassung unter der Reihe */ .fall__note{text-align:center;color:var(--primary-700);font-weight:700;font-size:.98rem;line-height:1.5;max-width:74ch;margin:clamp(1.3rem,2.4vw,1.8rem) auto 0} .faelle__foot{margin:1.6rem auto 0;max-width:78ch;text-align:center;font-size:.82rem;color:var(--muted);line-height:1.6} @media (prefers-reduced-motion:reduce){ .sens__img,.sens__gate{transition:none} }