/* ============================================================
   CASA One Marketing — main.css
   Basis (Fonts, Grundlayout, Keyframes), danach die generierten
   Utility-Klassen (fruehere Inline-Styles), am Ende die
   seiten-spezifischen Mobile-Queries (gescoped ueber body-Klassen
   page-home / page-install / page-legal).
   ============================================================ */

/* Instrument Sans — lokal gehostet, keine Google-Fonts-Anfrage (DSGVO) */
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

html { scroll-behavior: smooth; }
html, body { margin: 0; background: #eef3f6; font-family: 'Instrument Sans', 'Helvetica Neue', sans-serif; }
a { color: #269e92; text-decoration: none; }
a:hover { color: #35c4b5; }
input::placeholder, textarea::placeholder { color: #8296a8; opacity: 1; }

@keyframes blobT1 { 0%,100% { transform: translate(0,0) scale(1); } 30% { transform: translate(140px,-70px) scale(1.18); } 65% { transform: translate(-70px,90px) scale(0.92); } }
@keyframes blobT2 { 0%,100% { transform: translate(0,0) scale(1); } 45% { transform: translate(-160px,60px) scale(1.12); } 75% { transform: translate(90px,-50px) scale(0.9); } }
@keyframes blobT3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(100px,100px) scale(1.22); } }
@keyframes ridgeGlow { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
@keyframes lightSweep { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes typingDot { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(53,196,181,0.45); } 70% { box-shadow: 0 0 0 14px rgba(53,196,181,0); } 100% { box-shadow: 0 0 0 0 rgba(53,196,181,0); } }
@keyframes barGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes tickerMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bounceDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* ==== Generierte Utility-Klassen (aus den frueheren Inline-Styles) ==== */
.f-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#5b7189; }
.f-field { display:flex; flex-direction:column; gap:7px; }
.f-input { width:100%; box-sizing:border-box; background:#ffffff; border:1px solid #d5e0e8; border-radius:10px; padding:14px; font-size:15px; color:#1c2b3d; font-family:inherit; outline:none; transition:border-color 0.2s; }
.bullet-row { display:flex; gap:12px; align-items:flex-start; }
.bullet-dot { width:8px; height:8px; border-radius:50%; background:#35c4b5; margin-top:7px; flex-shrink:0; }
.bullet-text { font-size:15px; color:#3d5468; line-height:1.5; }
.txt-gray { color:#8296a8; }
.txt-teal { margin-top:12px; font-size:13px; font-weight:700; letter-spacing:3px; color:#269e92; }
.lbl-note { text-transform:none; font-weight:500; color:#8296a8; }
.txt-slate { color:#5b7189; }
.sec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:56px; align-items:center; }
.ghost-teal { font-size:clamp(80px, 10vw, 150px); font-weight:700; line-height:0.85; color:transparent; -webkit-text-stroke:2px rgba(53,196,181,0.32); user-select:none; will-change:transform; }
.h2-section { margin:14px 0 0; font-size:clamp(28px, 3.4vw, 42px); font-weight:700; line-height:1.15; letter-spacing:-0.4px; }
.p-intro { margin:18px 0 0; font-size:16px; line-height:1.65; color:#5b7189; text-wrap:pretty; }
.bullet-list { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.mc-1 { color:#269e92; }
.ghost-blue { font-size:clamp(80px, 10vw, 150px); font-weight:700; line-height:0.85; color:transparent; -webkit-text-stroke:2px rgba(63,118,184,0.28); user-select:none; will-change:transform; }
.pos-rel { position:relative; }
.sticky-side { position:sticky; top:120px; }
.f-field8 { display:flex; flex-direction:column; gap:8px; }
.f-label-dark { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#8fb5ae; }
.txt-meta { font-size:12px; color:#8296a8; }
.txt-center { text-align:center; }
.h2-center { margin:14px auto 0; max-width:680px; font-size:clamp(28px, 3.4vw, 42px); font-weight:700; line-height:1.15; letter-spacing:-0.4px; text-wrap:balance; }
.f-input-dark { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.07); border:1px solid rgba(53,196,181,0.28); border-radius:10px; padding:15px; font-size:15px; color:#eaf4f2; font-family:inherit; outline:none; transition:border-color 0.2s; }
.flex-gap20 { display:flex; gap:20px; }
.logo-40 { height:40px; width:auto; display:block; }
.kicker-plain { font-size:13px; font-weight:700; letter-spacing:3px; color:#269e92; }
.h2-step { margin:18px 0 0; font-size:clamp(26px, 3vw, 38px); font-weight:700; letter-spacing:-0.4px; }
.p-step { margin:12px 0 0; max-width:380px; font-size:15px; line-height:1.6; color:#5b7189; }
.mc-2 { display:flex; flex-direction:column; gap:16px; max-width:560px; }
.mc-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.mc-4 { display:flex; align-items:center; gap:12px; }
.mc-5 { display:flex; flex-direction:column; gap:4px; }
.mc-6 { font-size:clamp(22px, 3.4vh, 32px); font-weight:700; color:#269e92; }
.mc-7 { font-size:13px; color:#5b7189; }
.mc-8 { position:relative; max-width:1380px; margin:0 auto; padding:70px 28px; scroll-margin-top:70px; }
.mc-9 { position:relative; min-height:100vh; background:#eef3f6; color:#1c2b3d; }
.mc-10 { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 30px; background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid #dde7ec; }
.mc-11 { font-size:14px; font-weight:600; color:#5b7189; }
.mc-12 { max-width:820px; margin:0 auto; padding:140px 28px 80px; animation:cardIn 0.6s ease-out both; }
.mc-13 { margin:14px 0 0; font-size:clamp(34px, 5vw, 54px); font-weight:700; letter-spacing:-0.8px; }
.mc-14 { margin-top:44px; }
.mc-15 { margin:0; font-size:20px; font-weight:700; letter-spacing:-0.2px; }
.mc-16 { margin:12px 0 0; font-size:15.5px; line-height:1.7; color:#3d5468; text-wrap:pretty; }
.mc-17 { margin:48px 0 0; font-size:13px; line-height:1.6; color:#8296a8; }
.mc-18 { border-top:1px solid #e3ecef; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8296a8; }
.mc-19 { position:relative; min-height:100vh; background:#eef3f6; color:#1c2b3d; overflow-x:clip; }
.mc-20 { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.mc-21 { position:absolute; bottom:-20%; right:-10%; width:62vw; height:62vw; border-radius:50%; background:radial-gradient(circle, rgba(53,196,181,0.16) 0%, transparent 65%); filter:blur(54px); animation:blobT2 34s ease-in-out infinite; }
.mc-22 { position:absolute; inset:0; width:100%; height:100%; animation:ridgeGlow 12s ease-in-out infinite; }
.mc-23 { height:100%; width:0%; background:linear-gradient(90deg, #35c4b5, #269e92); }
.mc-24 { display:flex; align-items:center; gap:56px; }
.mc-25 { color:#35c4b5; }
.mc-26 { position:relative; max-width:1380px; margin:0 auto; padding:110px 28px 70px; scroll-margin-top:70px; }
.mc-27 { font-size:14px; font-weight:600; }
.mc-28 { align-self:flex-end; max-width:85%; background:rgba(53,196,181,0.16); border:1px solid rgba(53,196,181,0.25); border-radius:14px 14px 4px 14px; padding:10px 14px; color:#0e3f39; }
.mc-29 { order:2; }
.mc-30 { order:1; background:#ffffff; backdrop-filter:blur(22px); border:1px solid #dde7ec; border-radius:22px; padding:22px; box-shadow:0 12px 32px rgba(28,43,61,0.08); }
.mc-31 { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.mc-32 { color:#1c2b3d; }
.mc-33 { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.mc-34 { position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:5vw; padding:11vh 6vw; border-top:1px solid #dde7ec; background:rgba(255,255,255,0.55); }
.mc-35 { font-size:clamp(110px, 16vw, 220px); font-weight:700; line-height:0.8; color:transparent; -webkit-text-stroke:2px rgba(53,196,181,0.35); user-select:none; will-change:transform; }
.mc-36 { display:grid; grid-template-columns:110px 1fr; gap:16px; }
.mc-37 { position:relative; display:flex; flex-direction:column; gap:7px; }
.mc-38 { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#ffffff; border:1px solid #d5e0e8; border-radius:10px; padding:14px; font-size:15px; color:#1c2b3d; cursor:pointer; user-select:none; }
.mc-39 { padding:11px 14px; font-size:14px; color:#1c2b3d; cursor:pointer; }
.mc-40 { position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:5vw; padding:11vh 6vw; border-top:1px solid #dde7ec; }
.mc-41 { font-size:clamp(110px, 16vw, 220px); font-weight:700; line-height:0.8; color:transparent; -webkit-text-stroke:2px rgba(63,118,184,0.3); user-select:none; will-change:transform; }
.mc-42 { width:18px; height:18px; border-radius:50%; border:2px solid #35c4b5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-43 { width:9px; height:9px; border-radius:50%; background:#35c4b5; }
.mc-44 { font-size:17px; font-weight:700; }
.mc-45 { margin-left:auto; font-size:12px; font-weight:700; color:#1c7a6f; background:rgba(53,196,181,0.14); border-radius:7px; padding:4px 10px; }
.mc-46 { margin-top:10px; font-size:14px; line-height:1.6; color:#5b7189; }
.mc-47 { position:absolute; top:-14%; left:-8%; width:56vw; height:56vw; border-radius:50%; background:radial-gradient(circle, rgba(63,118,184,0.2) 0%, transparent 65%); filter:blur(46px); animation:blobT1 28s ease-in-out infinite; }
.mc-48 { position:absolute; top:30%; right:24%; width:38vw; height:38vw; border-radius:50%; background:radial-gradient(circle, rgba(160,200,240,0.28) 0%, transparent 60%); filter:blur(40px); animation:blobT3 24s ease-in-out infinite; }
.mc-49 { position:absolute; inset:0; overflow:hidden; }
.mc-50 { position:absolute; top:0; left:0; width:200px; height:100%; background:linear-gradient(90deg, transparent, rgba(53,196,181,0.07), transparent); animation:lightSweep 16s ease-in-out infinite; }
.mc-51 { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 34px; background:rgba(255,255,255,0.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid #dde7ec; }
.mc-52 { height:80px; width:auto; }
.mc-53 { display:none; align-items:center; gap:26px; font-size:14px; font-weight:500; }
.mc-54 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:14px; padding:11px 20px; border-radius:11px; white-space:nowrap; }
.mc-55 { position:absolute; left:0; right:0; bottom:0; height:3px; }
.mc-56 { position:relative; height:480vh; }
.mc-57 { position:sticky; top:0; height:100vh; overflow-x:clip; }
.mc-58 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity; pointer-events:none; }
.mc-59 { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; mix-blend-mode:multiply; }
.mc-60 { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(70px, 11vh, 112px) 6vw clamp(92px, 14vh, 118px); box-sizing:border-box; will-change:opacity, transform; }
.mc-61 { animation:cardIn 0.8s ease-out both; }
.mc-62 { width:min(260px, 52vw, 26vh); height:auto; animation:floatSoft 7s ease-in-out infinite; }
.mc-63 { animation:cardIn 0.8s ease-out 0.15s both; margin-top:clamp(14px, 2.4vh, 26px); max-width:820px; }
.mc-64 { margin:0 auto; font-size:clamp(30px, min(6vw, 8vh), 84px); line-height:1.05; font-weight:700; letter-spacing:-1.2px; text-wrap:balance; }
.mc-65 { margin:clamp(12px, 2.2vh, 22px) auto 0; max-width:640px; font-size:clamp(15px, min(2vw, 2.4vh), 19px); line-height:1.55; color:#5b7189; text-wrap:pretty; }
.mc-66 { animation:cardIn 0.8s ease-out 0.3s both; display:flex; gap:14px; margin-top:clamp(18px, 3.4vh, 34px); flex-wrap:wrap; justify-content:center; }
.mc-67 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:16px; padding:15px 30px; border-radius:12px; animation:pulseRing 3s ease-out infinite; }
.mc-68 { border:1px solid rgba(53,196,181,0.35); color:#269e92; font-weight:600; font-size:16px; padding:15px 30px; border-radius:12px; background:#ffffff; }
.mc-69 { animation:cardIn 0.8s ease-out 0.45s both; display:flex; gap:clamp(20px, 5vw, 64px); margin-top:clamp(22px, 5vh, 60px); flex-wrap:wrap; justify-content:center; }
.mc-70 { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:#5b7189; font-size:13px; font-weight:600; pointer-events:none; }
.mc-71 { width:34px; height:34px; border-radius:50%; border:1px solid #d5e0e8; background:#ffffff; display:flex; align-items:center; justify-content:center; animation:bounceDown 2s ease-in-out infinite; }
.mc-72 { position:relative; overflow:hidden; border-top:1px solid #e3ecef; border-bottom:1px solid #e3ecef; background:rgba(255,255,255,0.6); padding:16px 0; }
.mc-73 { display:flex; gap:56px; width:max-content; animation:tickerMove 36s linear infinite; font-size:14px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#8296a8; white-space:nowrap; }
.mc-74 { background:#ffffff; backdrop-filter:blur(22px); border:1px solid #dde7ec; border-radius:22px; padding:22px; box-shadow:0 12px 32px rgba(28,43,61,0.08); }
.mc-75 { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid #e3ecef; }
.mc-76 { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, #35c4b5, #269e92); display:flex; align-items:center; justify-content:center; font-weight:700; color:#ffffff; font-size:13px; }
.mc-77 { font-size:11px; color:#8296a8; }
.mc-78 { margin-left:auto; width:9px; height:9px; border-radius:50%; background:#35c4b5; animation:pulseRing 2.4s ease-out infinite; }
.mc-79 { display:flex; flex-direction:column; gap:12px; padding:18px 2px 4px; font-size:13.5px; line-height:1.5; }
.mc-80 { align-self:flex-start; max-width:90%; background:#f4f8fa; border:1px solid #e2ecf1; border-radius:14px 14px 14px 4px; padding:10px 14px; color:#3d5468; }
.mc-81 { align-self:flex-start; display:flex; gap:5px; padding:12px 14px; background:#f4f8fa; border:1px solid #e2ecf1; border-radius:14px 14px 14px 4px; }
.mc-82 { width:7px; height:7px; border-radius:50%; background:#35c4b5; animation:typingDot 1.2s ease-in-out infinite; }
.mc-83 { width:7px; height:7px; border-radius:50%; background:#35c4b5; animation:typingDot 1.2s ease-in-out 0.15s infinite; }
.mc-84 { width:7px; height:7px; border-radius:50%; background:#35c4b5; animation:typingDot 1.2s ease-in-out 0.3s infinite; }
.mc-85 { display:flex; align-items:center; gap:10px; background:#f4f8fa; border:1px solid #d5e0e8; border-radius:10px; padding:12px 14px; font-size:14px; color:#5b7189; }
.mc-86 { display:flex; align-items:center; gap:12px; background:#ffffff; border:1px solid #e2ecf1; border-radius:12px; padding:12px 14px; cursor:pointer; transition:border-color 0.2s; }
.mc-87 { font-size:11px; font-weight:700; color:#ffffff; background:linear-gradient(135deg, #35c4b5, #269e92); border-radius:6px; padding:4px 8px; flex-shrink:0; }
.mc-88 { min-width:0; }
.mc-89 { font-size:14px; font-weight:600; color:#1c2b3d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-90 { background:#ffffff; backdrop-filter:blur(22px); border:1px solid #dde7ec; border-radius:22px; padding:22px; box-shadow:0 12px 32px rgba(28,43,61,0.08); font-size:13.5px; }
.mc-91 { display:flex; flex-direction:column; gap:6px; padding-bottom:14px; border-bottom:1px solid #e3ecef; }
.mc-92 { display:flex; justify-content:space-between; gap:10px; }
.mc-93 { font-weight:600; color:#1c2b3d; }
.mc-94 { color:#5b7189; line-height:1.5; }
.mc-95 { margin-top:14px; background:rgba(53,196,181,0.08); border:1px solid rgba(53,196,181,0.3); border-radius:14px; padding:16px; }
.mc-96 { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:1.5px; color:#269e92; }
.mc-97 { margin-top:10px; color:#3d5468; line-height:1.6; }
.mc-98 { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.mc-99 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:9px; cursor:pointer; }
.mc-100 { border:1px solid rgba(53,196,181,0.35); color:#269e92; font-weight:600; font-size:12.5px; padding:9px 16px; border-radius:9px; cursor:pointer; }
.mc-101 { position:relative; padding:90px 0; background:#e7eef3; border-top:1px solid #dde7ec; border-bottom:1px solid #dde7ec; scroll-margin-top:70px; }
.mc-102 { max-width:1380px; margin:0 auto; padding:0 28px; text-align:center; }
.mc-103 { margin:14px auto 0; max-width:720px; font-size:clamp(28px, 3.4vw, 42px); font-weight:700; line-height:1.15; letter-spacing:-0.4px; text-wrap:balance; }
.mc-104 { margin:18px auto 0; max-width:640px; font-size:16px; line-height:1.65; color:#5b7189; text-wrap:pretty; }
.mc-105 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:44px; text-align:left; }
.mc-106 { background:#ffffff; border:1px solid #dde7ec; border-radius:16px; padding:20px; transition:transform 0.25s, border-color 0.25s; }
.mc-107 { display:flex; align-items:center; gap:10px; }
.mc-108 { width:36px; height:36px; border-radius:10px; background:#e3ecef; border:1px solid rgba(53,196,181,0.3); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#269e92; flex-shrink:0; }
.mc-109 { margin:0; font-size:15px; font-weight:700; color:#1c2b3d; }
.mc-110 { margin-top:10px; font-size:13px; line-height:1.55; color:#5b7189; }
.mc-111 { background:#ffffff; backdrop-filter:blur(22px); border:1px solid #dde7ec; border-radius:22px; padding:24px; box-shadow:0 12px 32px rgba(28,43,61,0.08); }
.mc-112 { display:flex; justify-content:space-between; align-items:baseline; }
.mc-113 { color:#269e92; font-weight:700; }
.mc-114 { display:flex; align-items:flex-end; gap:7px; height:150px; margin-top:18px; }
.mc-115 { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.mc-116 { display:flex; justify-content:space-between; font-size:11px; color:#8296a8; margin-top:8px; }
.mc-117 { margin-top:18px; display:flex; align-items:center; gap:12px; background:rgba(53,196,181,0.08); border:1px solid rgba(53,196,181,0.3); border-radius:12px; padding:12px 14px; }
.mc-118 { flex-shrink:0; }
.mc-119 { font-size:13px; color:#3d5468; line-height:1.5; }
.mc-120 { font-size:14px; font-weight:600; padding-bottom:12px; border-bottom:1px solid #e3ecef; }
.mc-121 { display:flex; align-items:center; gap:12px; background:#ffffff; border:1px solid #e2ecf1; border-radius:12px; padding:12px 14px; }
.mc-122 { min-width:0; flex:1; }
.mc-123 { font-size:14px; font-weight:600; color:#1c2b3d; }
.mc-124 { font-size:13px; font-weight:700; color:#269e92; white-space:nowrap; }
.mc-125 { display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid #e3ecef; font-size:12.5px; color:#5b7189; flex-wrap:wrap; }
.mc-126 { position:relative; max-width:1380px; margin:0 auto; padding:90px 28px 70px; scroll-margin-top:70px; }
.mc-127 { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-top:44px; }
.mc-128 { background:#ffffff; border:1px solid #dde7ec; border-radius:16px; padding:20px; box-shadow:0 2px 10px rgba(28,43,61,0.04); transition:transform 0.25s, border-color 0.25s; }
.mc-129 { display:inline-block; background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:12.5px; padding:5px 11px; border-radius:8px; }
.mc-130 { margin:12px 0 0; font-size:15px; font-weight:700; color:#1c2b3d; }
.mc-131 { margin-top:6px; font-size:13px; line-height:1.55; color:#5b7189; }
.mc-132 { position:relative; padding:90px 0; background:#e7eef3; border-top:1px solid #dde7ec; scroll-margin-top:70px; }
.mc-133 { max-width:1380px; margin:0 auto; padding:0 28px; }
.mc-134 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-top:40px; }
.mc-135 { background:#ffffff; border:1px solid #dde7ec; border-radius:14px; padding:18px; transition:transform 0.25s, border-color 0.25s; }
.mc-136 { margin:0; font-size:14.5px; font-weight:700; color:#1c2b3d; }
.mc-137 { margin-top:6px; font-size:12.5px; line-height:1.5; color:#5b7189; }
.mc-138 { position:relative; max-width:1380px; margin:0 auto; padding:110px 28px 40px; scroll-margin-top:70px; }
.mc-139 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:48px; align-items:center; margin-top:76px; }
.mc-140 { font-size:12px; font-weight:700; letter-spacing:2.5px; color:#269e92; }
.mc-141 { margin:10px 0 0; font-size:clamp(22px, 2.6vw, 30px); font-weight:700; letter-spacing:-0.3px; }
.mc-142 { margin:12px 0 0; font-size:15.5px; line-height:1.65; color:#5b7189; text-wrap:pretty; }
.mc-143 { margin-top:36px; text-align:center; font-size:13px; color:#8296a8; }
.mc-144 { position:fixed; inset:0; z-index:300; background:rgba(12,20,33,0.8); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:4vw; cursor:zoom-out; animation:cardIn 0.25s ease-out; }
.mc-145 { position:relative; max-width:1380px; margin:0 auto; padding:70px 28px 20px; scroll-margin-top:70px; }
.mc-146 { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin-top:44px; }
.mc-147 { background:#ffffff; border:1px solid #dde7ec; border-radius:18px; padding:26px; box-shadow:0 2px 10px rgba(28,43,61,0.04); text-align:center; transition:transform 0.25s, border-color 0.25s; }
.mc-148 { margin:14px 0 0; font-size:16px; font-weight:700; color:#1c2b3d; }
.mc-149 { margin-top:8px; font-size:13.5px; line-height:1.6; color:#5b7189; }
.mc-150 { position:relative; max-width:1380px; margin:0 auto; padding:70px 28px 90px; scroll-margin-top:70px; }
.mc-151 { position:relative; width:min(420px, 100%); margin:0 auto; }
.mc-152 { position:absolute; inset:-14px; border-radius:24px; background:linear-gradient(135deg, rgba(53,196,181,0.18), rgba(63,118,184,0.14)); animation:floatSoft 8s ease-in-out infinite; }
.mc-153 { position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden; border:1px solid #dde7ec; box-shadow:0 18px 44px rgba(28,43,61,0.14); }
.mc-154 { width:100%; height:100%; object-fit:cover; display:block; }
.mc-155 { margin:14px 0 0; font-size:clamp(28px, 3.4vw, 42px); font-weight:700; line-height:1.15; letter-spacing:-0.4px; text-wrap:balance; }
.mc-156 { margin:18px 0 0; max-width:520px; font-size:16px; line-height:1.65; color:#5b7189; text-wrap:pretty; }
.mc-157 { margin:18px 0 0; max-width:520px; font-size:17px; line-height:1.6; color:#1c2b3d; font-weight:600; text-wrap:pretty; }
.mc-158 { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.mc-159 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:15px; padding:14px 26px; border-radius:12px; }
.mc-160 { border:1px solid rgba(53,196,181,0.35); color:#269e92; font-weight:600; font-size:15px; padding:14px 26px; border-radius:12px; background:#ffffff; }
.mc-161 { position:relative; background:linear-gradient(135deg, #0f172a 0%, #1a3a4a 100%); color:#eaf4f2; scroll-margin-top:70px; overflow:hidden; }
.mc-162 { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mc-163 { position:absolute; top:-30%; left:-6%; width:46vw; height:46vw; border-radius:50%; background:radial-gradient(circle, rgba(63,118,184,0.45) 0%, transparent 65%); filter:blur(48px); animation:blobT1 28s ease-in-out infinite; }
.mc-164 { position:absolute; bottom:-34%; right:-8%; width:52vw; height:52vw; border-radius:50%; background:radial-gradient(circle, rgba(53,196,181,0.3) 0%, transparent 65%); filter:blur(54px); animation:blobT2 34s ease-in-out infinite; }
.mc-165 { position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:6vw; padding:14vh 6vw; }
.mc-166 { font-size:clamp(80px, 10vw, 150px); font-weight:700; line-height:0.85; color:transparent; -webkit-text-stroke:2px rgba(53,196,181,0.4); user-select:none; will-change:transform; }
.mc-167 { margin-top:12px; font-size:13px; font-weight:700; letter-spacing:3px; color:#4fd8c8; }
.mc-168 { margin:16px 0 0; max-width:520px; font-size:clamp(30px, 4vw, 54px); font-weight:700; line-height:1.08; letter-spacing:-1px; text-wrap:balance; }
.mc-169 { margin:20px 0 0; max-width:460px; font-size:16px; line-height:1.65; color:#a9c4bf; text-wrap:pretty; }
.mc-170 { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.mc-171 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:16px; padding:15px 28px; border-radius:12px; }
.mc-172 { border:1px solid rgba(53,196,181,0.35); color:#7fe6d9; font-weight:600; font-size:16px; padding:15px 28px; border-radius:12px; background:rgba(255,255,255,0.05); }
.mc-173 { display:flex; flex-direction:column; gap:16px; max-width:620px; width:100%; }
.mc-174 { font-size:13px; font-weight:700; letter-spacing:3px; color:#4fd8c8; }
.mc-175 { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.07); border:1px solid rgba(53,196,181,0.28); border-radius:10px; padding:15px; font-size:15px; color:#eaf4f2; font-family:inherit; outline:none; resize:vertical; min-height:130px; transition:border-color 0.2s; }
.mc-176 { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mc-177 { background:linear-gradient(135deg, #35c4b5, #269e92); color:#ffffff; font-weight:700; font-size:16px; padding:16px 34px; border-radius:12px; cursor:pointer; }
.mc-178 { font-size:13.5px; color:#7fe6d9; font-weight:600; }
.mc-179 { font-size:13px; line-height:1.6; color:#6f8d88; }
.mc-180 { position:relative; border-top:1px solid #e3ecef; padding:26px 34px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8296a8; }
.mc-181 { position:absolute; top:-14%; left:-8%; width:56vw; height:56vw; border-radius:50%; background:radial-gradient(circle, rgba(63,118,184,0.18) 0%, transparent 65%); filter:blur(46px); animation:blobT1 28s ease-in-out infinite; }
.mc-182 { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid #dde7ec; }
.mc-183 { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 30px; }
.mc-184 { font-size:13px; color:#5b7189; font-weight:600; display:flex; align-items:center; gap:8px; }
.mc-185 { height:3px; background:#e3ecef; }
.mc-186 { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 6vw 80px; box-sizing:border-box; }
.mc-187 { animation:cardIn 0.8s ease-out both; max-width:1100px; }
.mc-188 { margin:18px 0 0; font-size:clamp(42px, 7vw, 92px); line-height:1.02; font-weight:700; letter-spacing:-1.5px; text-wrap:balance; }
.mc-189 { margin:26px 0 0; max-width:620px; font-size:clamp(16px, 1.6vw, 19px); line-height:1.65; color:#5b7189; text-wrap:pretty; }
.mc-190 { position:absolute; bottom:34px; left:6vw; display:flex; align-items:center; gap:12px; color:#5b7189; font-size:13px; font-weight:600; }
.mc-191 { width:38px; height:38px; border-radius:50%; border:1px solid #d5e0e8; background:#ffffff; display:flex; align-items:center; justify-content:center; animation:bounceDown 2s ease-in-out infinite; }
.mc-192 { position:absolute; top:100%; left:0; min-width:160px; margin-top:6px; background:#ffffff; border:1px solid #d5e0e8; border-radius:10px; overflow:hidden; z-index:20; box-shadow:0 14px 34px rgba(28,43,61,0.16); }
.mc-193 { display:grid; grid-template-columns:110px 1fr 1fr; gap:16px; }
.mc-194 { position:absolute; top:100%; right:0; min-width:200px; margin-top:6px; background:#ffffff; border:1px solid #d5e0e8; border-radius:10px; overflow:hidden; z-index:20; box-shadow:0 14px 34px rgba(28,43,61,0.16); }
.mc-195 { font-size:12.5px; line-height:1.55; color:#8296a8; }
.mc-196 { font-size:15px; font-weight:600; color:#1c2b3d; }
.mc-197 { display:flex; flex-direction:column; gap:16px; }
.mc-198 { position:relative; border-top:1px solid #dde7ec; background:linear-gradient(135deg, #0f172a 0%, #1a3a4a 100%); color:#eaf4f2; padding:13vh 6vw; text-align:center; }
.mc-199 { max-width:660px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:0; }
.mc-200 { height:58px; width:auto; }
.mc-201 { margin:26px 0 0; font-size:clamp(28px, 3.6vw, 44px); font-weight:700; letter-spacing:-0.5px; text-wrap:balance; }
.mc-202 { margin:16px 0 0; font-size:14px; line-height:1.65; color:#a9c4bf; max-width:520px; text-wrap:pretty; }
.mc-203 { margin-top:30px; background:linear-gradient(135deg, #35c4b5, #269e92); color:#06211d; font-weight:700; font-size:17px; padding:17px 44px; border-radius:12px; cursor:pointer; user-select:none; }
.mc-204 { margin-top:18px; display:flex; align-items:center; gap:10px; background:rgba(53,196,181,0.12); border:1px solid rgba(53,196,181,0.35); border-radius:12px; padding:13px 20px; animation:cardIn 0.4s ease-out; }
.mc-205 { font-size:14px; color:#7fe6d9; font-weight:600; }
.mc-206 { margin-top:18px; display:flex; align-items:center; gap:10px; background:rgba(194,84,84,0.14); border:1px solid rgba(194,84,84,0.4); border-radius:12px; padding:13px 20px; animation:cardIn 0.4s ease-out; }
.mc-207 { font-size:14px; color:#e8a2a2; font-weight:600; }
.mc-208 { margin-top:44px; font-size:12.5px; color:#6f8d88; }

/* ==== Startseite (body.page-home) — Mobile / iPhone ==== */
@media (max-height: 620px) {
  .page-home [data-hero-hint] { display: none !important; }
}
@media (max-width: 900px) {
  .page-home [data-nav] { padding: 10px 16px !important; }
  .page-home [data-nav] img { height: 34px !important; }
  .page-home [data-nav] a[href="#kontakt"] { font-size: 13px !important; padding: 10px 14px !important; }
}
@media (max-width: 700px) {
  body.page-home { overflow-x: clip; }
  .page-home #ki, .page-home #wissen, .page-home #email, .page-home #rms, .page-home #newsletter, .page-home #galerie, .page-home #warum, .page-home #wer { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 48px !important; }
  .page-home #schnittstellen, .page-home #module { padding-top: 60px !important; padding-bottom: 60px !important; }
  .page-home #schnittstellen > div, .page-home #module > div { padding-left: 20px !important; padding-right: 20px !important; }
  .page-home [data-reveal], .page-home [data-gal-item] { grid-template-columns: 1fr !important; gap: 26px !important; }
  .page-home [data-reveal] > div.mc-29 { order: 0 !important; }
  .page-home [data-gal-item] { margin-top: 44px !important; }
  .page-home [data-ghost] { font-size: 62px !important; }
  .page-home #kontakt > div.mc-165 { grid-template-columns: 1fr !important; gap: 34px !important; padding: 64px 20px !important; }
  .page-home #kontakt .sticky-side { position: static !important; }
  .page-home #formular { max-width: 100% !important; }
  .page-home #formular div.mc-33 { grid-template-columns: 1fr !important; }
  .page-home #formular h2, .page-home #kontakt h2 { font-size: 30px !important; }
}
@media (max-width: 700px) { /* Hero mobil */
  .page-home [data-hero-content] { padding: 56px 20px 74px !important; }
  .page-home [data-hero-content] img { width: min(170px, 42vw) !important; }
  .page-home [data-hero-content] h1 { font-size: 27px !important; line-height: 1.12 !important; }
  .page-home [data-hero-content] p { font-size: 14.5px !important; margin-top: 12px !important; }
  .page-home [data-hero-content] > div:nth-child(3) { margin-top: 18px !important; gap: 10px !important; }
  .page-home [data-hero-content] > div:nth-child(3) a { font-size: 14px !important; padding: 12px 18px !important; }
  .page-home [data-hero-content] > div:nth-child(4) { margin-top: 20px !important; gap: 18px !important; }
  .page-home [data-hero-content] > div:nth-child(4) span:first-child { font-size: 20px !important; }
  .page-home [data-hero-content] > div:nth-child(4) span:last-child { font-size: 11.5px !important; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .page-home [data-hero-content] > div:nth-child(4) { display: none !important; }
}
@media (max-width: 420px) {
  .page-home [data-ghost] { font-size: 52px !important; }
  .page-home #kontakt h2 { font-size: 26px !important; }
}

/* ==== Installationsseite (body.page-install) — Mobile / iPhone ==== */
@media (max-width: 700px) {
  body.page-install { overflow-x: hidden; }
  .page-install [data-sec] { grid-template-columns: 1fr !important; gap: 22px !important; padding: 56px 20px !important; }
  .page-install [data-sec] .sticky-side { position: static !important; }
  .page-install [data-ghost] { font-size: 74px !important; }
  .page-install [data-fields] { max-width: 100% !important; }
  .page-install [data-fields] div.mc-36, .page-install [data-fields] div.mc-193 { grid-template-columns: 1fr 1fr !important; }
}

/* ==== Rechtsseiten (body.page-legal) — Mobile / iPhone ==== */
@media (max-width: 700px) {
  body.page-legal { overflow-x: hidden; }
  .page-legal h1 { font-size: 32px !important; }
}