:root{--navy:#06325a;--navy-2:#0c4a6e;--aqua:#57d7df;--aqua-soft:#e6fbfc;--aqua-pale:#f3ffff;--yellow:#ffd85a;--coral:#f46d78;--ink:#123448;--muted:#587488;--cream:#fffdf8;--line:#cbe8e8;--shadow:0 22px 60px rgba(9,56,80,.14);--radius:28px}






*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--cream);font-size:16px;line-height:1.5}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.site-header{height:82px;display:flex;align-items:center;gap:34px;padding:0 clamp(24px,5vw,82px);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(10,70,90,.08);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:800;color:#052b50;white-space:nowrap}.brand img{width:46px;height:46px;border-radius:12px}.brand>span>span{background:linear-gradient(90deg,#2356d8,#e24eab,#ff7a47);background-clip:text;-webkit-background-clip:text;color:transparent}.main-nav{display:flex;align-items:center;gap:31px;margin-left:auto}.main-nav a{font-weight:650;color:#163e5f;font-size:15px}.main-nav a:hover{color:#008ea0}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 25px;border-radius:999px;font-weight:750;transition:.22s ease;border:1.5px solid transparent}.button:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(9,70,100,.15)}.button-yellow{background:var(--yellow);color:#123448}.button-outline{border-color:#31b3c2;background:rgba(255,255,255,.76);color:#095071}.header-cta{margin-left:15px;min-height:44px;padding:9px 24px}.menu-button{display:none;border:0;background:none;font-size:28px;color:var(--navy)}






.hero{min-height:600px;display:grid;grid-template-columns:minmax(440px,43%) 1fr;overflow:hidden;background:linear-gradient(90deg,#fffefa 0%,#fffefa 42%,#f4fbf8 100%)}.hero-copy{padding:92px 28px 60px max(42px,calc((100vw - 1440px)/2));z-index:3}.hero h1{font-size:clamp(43px,4.4vw,69px);line-height:1.06;letter-spacing:-.045em;color:#07385f;margin:0 0 25px;max-width:680px}.hero-copy>p{font-size:clamp(18px,1.4vw,22px);line-height:1.45;max-width:590px;margin:0 0 30px;color:#315b76}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.origin{margin-top:22px;color:#59798b;font-size:14px}.origin span{color:#ff6b82;font-size:20px;margin-right:7px}.hero-visual{position:relative;min-height:600px;background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(221,249,244,.2));isolation:isolate}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fffefa 0%,rgba(255,255,255,.05) 25%,rgba(255,255,255,0) 100%);z-index:-1}.tablet{background:#13191c;border:7px solid #252b2d;border-radius:22px;padding:6px;box-shadow:0 24px 55px rgba(0,30,50,.33);overflow:hidden}.tablet img{width:100%;height:100%;object-fit:cover;border-radius:11px}.camera{position:absolute;width:5px;height:5px;border-radius:50%;background:#45525b;top:5px;left:50%;z-index:2}.hero-tablet{position:absolute;width:min(43vw,585px);aspect-ratio:1.72;left:26%;bottom:54px;transform:perspective(1200px) rotateY(-6deg) rotateX(1deg);z-index:4}.daughter-card{position:absolute;right:5%;top:40px;width:188px;height:188px;border:7px solid white;border-radius:50%;box-shadow:var(--shadow);overflow:visible;background:#e5f4ec;z-index:5}.daughter-photo{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#e2f6f0,#a6dbcb)}.notification{position:absolute;left:-45px;bottom:20px;background:white;border-radius:13px;padding:10px 14px;box-shadow:0 12px 28px rgba(0,55,75,.18);min-width:142px;font-size:12px;display:flex;flex-direction:column}.notification b{font-size:12px}.notification span{margin-left:24px;line-height:1.25}.note{position:absolute;right:3%;bottom:62px;background:#fffaf0;padding:18px 15px;border-radius:9px;transform:rotate(-2deg);font-family:"Segoe Print","Comic Sans MS",cursive;color:#6b5e50;line-height:1.25;box-shadow:0 8px 20px rgba(100,80,50,.15);z-index:4}






.statement{min-height:116px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:50px;padding:20px clamp(35px,9vw,150px);background:#fffaf0;border-top:1px solid #f5ead4;border-bottom:1px solid #f5ead4}.statement p{text-align:center;margin:0;font-size:20px;line-height:1.35;color:#224d62}.statement p strong{font-size:25px;color:#073d5d}.house-icon{font-size:47px;color:#087a9a;justify-self:start}.hand-note{font-family:"Segoe Print","Comic Sans MS",cursive;color:#147c99;font-size:21px;line-height:1.25;transform:rotate(-5deg);justify-self:end}






.normality{padding:58px clamp(24px,4vw,70px) 72px;background:linear-gradient(180deg,#e9fbfc,#f8ffff)}.normality>h2{text-align:center;color:#073a60;font-size:clamp(30px,3vw,47px);letter-spacing:-.035em;margin:0 0 36px}.feature-showcase{max-width:1480px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.showcase-card{min-width:0;background:rgba(255,255,255,.9);border:1px solid rgba(42,160,170,.14);border-radius:22px;padding:20px 20px 0;box-shadow:0 16px 40px rgba(21,100,112,.11);overflow:hidden}.card-heading{display:flex;gap:14px;align-items:flex-start;min-height:92px}.card-heading h3{margin:2px 0 4px;font-size:20px;color:#07385d}.card-heading p{margin:0;color:#577488;line-height:1.35;font-size:14px}.round-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;font-size:24px;flex:0 0 auto;color:#083f59}.round-icon.aqua{background:#bdf3f4}.round-icon.yellow{background:#ffe382}.screen-frame{height:270px;background:#17252e;border-radius:17px 17px 0 0;padding:7px 7px 0;overflow:hidden;box-shadow:0 10px 28px rgba(8,51,72,.24)}.screen-frame img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px 10px 0 0}.split-screen{display:grid;grid-template-columns:1.2fr .8fr;gap:6px}.split-screen img{min-width:0}.split-screen img:last-child{object-position:left top}






.independence{max-width:1440px;margin:auto;padding:110px clamp(28px,6vw,95px);display:grid;grid-template-columns:.86fr 1.14fr;gap:76px;align-items:center}.eyebrow{display:inline-block;color:#00899c;letter-spacing:.15em;font-size:13px;font-weight:850;margin-bottom:14px}.section-copy h2,.all-copy h2,.price-intro h2,.faq h2{color:#07385f;font-size:clamp(36px,4vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0 0 23px}.section-copy>p,.all-copy>p,.price-intro>p{font-size:19px;color:#536f81;max-width:590px}.check-list{padding:0;margin:28px 0;list-style:none;display:grid;gap:14px}






.all-copy .check-list{grid-column:1/-1;margin:4px 0 0;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:15px 38px}






.all-copy .check-list li{color:#0e4258;font-size:16px;align-items:flex-start}






.all-copy .check-list li span{flex:0 0 27px;margin-top:-1px;background:#d8f7ea;color:#06885f;box-shadow:0 1px 3px rgba(6,136,95,.18)}.check-list li{display:flex;align-items:center;gap:12px;font-weight:650}.check-list li span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#c8f6e8;color:#06885f}.text-link{font-weight:800;color:#007f96;border-bottom:2px solid #91e0e5;padding-bottom:4px}.device-stage{position:relative;min-height:490px;display:grid;place-items:center;background:radial-gradient(circle at 55% 45%,#b5f2ee 0,#eafaf8 47%,transparent 69%);border-radius:50%}.large-tablet{position:relative;width:92%;aspect-ratio:1.72;transform:rotate(2deg)}.push-card{position:absolute;right:-15px;bottom:17px;max-width:350px;background:white;border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;gap:12px}.push-mark{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#ffe8e2;color:#ee5c56;font-weight:900}.push-card div{display:grid}.push-card small{color:#607685;line-height:1.25;margin-top:3px}






.all-in-one{padding:58px clamp(25px,6vw,90px) 76px;background:linear-gradient(125deg,#fff1dc 0%,#fffaec 40%,#f2fdfd 78%,#e9fbfc 100%);color:#0c3b52}.all-copy{max-width:1180px;margin:0 auto 26px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}.all-copy .eyebrow{grid-column:1/-1;margin-bottom:-40px;color:#0a8fa0}.all-copy h2{color:#07385f;margin:0}.all-copy p{color:#4c6472;margin:0}.app-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:18px}.app-card{margin:0;background:#fff;border-radius:22px;overflow:hidden;color:#073650;padding:13px 13px 0;box-shadow:0 14px 34px rgba(10,70,95,.15)}.app-card img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:left top;background:#fff;border-radius:14px}






/* Die breite Kachel ist 5:3 so breit wie die schmalen – dieses Verhältnis






   hält alle drei exakt gleich hoch, bei jeder Fensterbreite. */






.app-card.wide img{aspect-ratio:20/9}.app-card figcaption{padding:14px 8px 17px;font-weight:750}






.benefits{padding:70px clamp(25px,7vw,110px);display:grid;grid-template-columns:repeat(3,1fr);gap:45px;background:#fff}.benefits article{text-align:center}.benefits article>span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:18px;background:#d7f6f4;color:#06748c;font-size:29px}.benefits h3{color:#07385f;font-size:21px;margin:0 0 8px}.benefits p{color:#657b89;margin:0 auto;max-width:330px}






.pricing{padding:100px clamp(28px,9vw,160px);display:grid;grid-template-columns:1fr 480px;gap:80px;align-items:start;background:linear-gradient(135deg,#f1fdfb 0%,#fff9e9 100%)}.price-card{position:relative;background:white;padding:42px;border-radius:27px;box-shadow:var(--shadow);border:1px solid #d4eded}.price-badge{position:absolute;right:22px;top:-15px;background:#0a8e9e;color:white;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800}.price-card h3{font-size:25px;color:#07385f;margin:0 0 15px}.price{display:flex;align-items:baseline;gap:8px}.price strong{font-size:52px;line-height:1;color:#07385f}.price-card>p{color:#69808d;margin:8px 0 22px}.price-card ul{list-style:none;margin:0 0 27px;padding:0;display:grid;gap:10px}.price-card li{color:#35576b}.price-card .button{width:100%}






.story{padding:88px 20px;text-align:center;background:#fff}.story-mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#ffeff0;color:#e8586a;font-family:Georgia,serif;font-size:48px;line-height:1}.story blockquote{max-width:900px;margin:25px auto;font-family:Georgia,serif;font-size:clamp(24px,2.4vw,35px);line-height:1.38;color:#174561}.story p{color:#70838f}






.faq{padding:100px clamp(28px,9vw,150px);display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;background:#eefafa}.faq-list details{border-bottom:1px solid #b9dddd;padding:22px 0}.faq-list summary{cursor:pointer;list-style:none;font-size:19px;font-weight:750;color:#07385f;display:flex;justify-content:space-between;gap:20px}.faq-list summary:after{content:"+";font-size:25px;color:#008da0}.faq-list details[open] summary:after{content:"–"}.faq-list p{color:#567285;margin:12px 40px 0 0}






.final-cta{text-align:center;padding:95px 25px;background:linear-gradient(135deg,#0c4667,#086f82);color:white}.final-cta>span{font-weight:800;color:#87edf0}.final-cta h2{font-size:clamp(39px,5vw,67px);line-height:1.05;letter-spacing:-.045em;margin:15px 0}.final-cta p{font-size:19px;color:#d6eef3;margin:0 0 28px}footer{padding:32px clamp(25px,6vw,90px);display:flex;align-items:center;gap:35px;background:#062d46;color:#c9dce5}.footer-brand{font-size:21px;color:white}.footer-brand img{width:36px;height:36px}.footer-brand>span>span{color:#67dfe5;background:none;-webkit-text-fill-color:initial}footer p{margin:0}footer nav{margin-left:auto;display:flex;gap:24px;font-size:14px}footer a:hover{color:white}






@media(max-width:1100px){.site-header{gap:18px}.main-nav{gap:18px}.main-nav a{font-size:14px}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:70px 7vw 45px}.hero-visual{min-height:540px}.hero-visual:after{background:linear-gradient(180deg,#fffefa 0%,transparent 20%)}.hero-tablet{width:min(70vw,570px);left:17%;bottom:42px}.daughter-card{right:8%}.feature-showcase{grid-template-columns:1fr 1fr}.showcase-card:last-child{grid-column:1/-1}.independence{gap:30px}.pricing{grid-template-columns:1fr 420px;gap:40px}.app-grid{grid-template-columns:1fr 1fr}.app-card.wide{grid-column:1/-1}}






@media(max-width:820px){.site-header{height:72px;padding:0 20px}.brand{font-size:23px}.brand img{width:40px;height:40px}.menu-button{display:block;margin-left:auto}.header-cta{display:none}.main-nav{display:none;position:absolute;left:16px;right:16px;top:66px;background:white;border-radius:18px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.hero-copy{padding-top:52px}.hero h1{font-size:44px}.statement{grid-template-columns:auto 1fr;gap:20px;padding:28px}.statement .hand-note{display:none}.statement p{text-align:left}.statement p strong{font-size:21px}.feature-showcase{grid-template-columns:1fr}.showcase-card:last-child{grid-column:auto}.screen-frame{height:310px}.independence{grid-template-columns:1fr;padding-top:80px}.device-stage{min-height:380px}.all-copy{grid-template-columns:1fr;gap:15px}.all-copy .eyebrow{grid-column:auto;margin-bottom:0}.app-grid{grid-template-columns:1fr}.app-card.wide{grid-column:auto}.benefits{grid-template-columns:1fr;gap:35px}.pricing{grid-template-columns:1fr}.faq{grid-template-columns:1fr;gap:30px}footer{flex-wrap:wrap}footer nav{width:100%;margin-left:0;flex-wrap:wrap}}






@media(max-width:560px){.hero h1{font-size:38px}.hero-copy>p{font-size:18px}.hero-actions{display:grid}.hero-visual{min-height:430px}.hero-tablet{left:6%;width:88vw;bottom:25px}.daughter-card{width:125px;height:125px;right:4%;top:12px}.notification{left:-42px;bottom:-12px;min-width:128px}.family-connection,.family-dot,.note{display:none}.statement .house-icon{display:none}.statement{grid-template-columns:1fr}.statement p{text-align:center}.normality{padding-left:15px;padding-right:15px}.screen-frame{height:230px}.independence{padding-left:22px;padding-right:22px}.device-stage{min-height:300px}.large-tablet{width:100%}.push-card{right:0;bottom:-5px;max-width:290px}.all-in-one,.pricing,.faq{padding-left:22px;padding-right:22px}.app-card img{height:220px}.price-card{padding:32px 23px}.price-badge{position:static;display:inline-block;margin-bottom:17px}.price strong{font-size:43px}footer{align-items:flex-start;flex-direction:column}footer nav{flex-direction:column;gap:12px}}






@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}






.daughter-photo{background:url("assets/daughter-v2.png") 50% 40%/152% no-repeat}













/* Hero sizing: compact at ordinary desktop zoom and stable across widths. */






@media(min-width:1101px){













  .hero-copy{padding-top:62px;padding-bottom:48px}






  .hero h1{font-size:clamp(42px,3.65vw,59px);margin-bottom:20px}






  .hero-copy>p{font-size:clamp(17px,1.2vw,20px);margin-bottom:25px}













  .hero-photo{object-position:38% center}






  .hero-tablet{width:min(38vw,520px);left:34%;bottom:34px}






  .daughter-card{width:158px;height:158px;top:30px;right:5%}






  .note{bottom:38px}






}













.family-connection{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none;border:0;transform:none}






.family-connection path{fill:none;stroke:#16bfd0;stroke-width:3.2;stroke-dasharray:9 8;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(255,255,255,.8))}






.family-connection circle,.family-connection ellipse{fill:#35cbd8;vector-effect:non-scaling-stroke}






.family-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#35cbd8;






  box-shadow:0 0 0 2.5px rgba(255,255,255,.9);transform:translate(-50%,-50%);






  z-index:8;pointer-events:none}






.family-dot.start{left:64.5%;top:26%}






.family-dot.ende{left:86%;top:8.5%}






.daughter-card{z-index:7}













@media(max-width:1100px){.hero-photo{object-position:50% center}}






@media(max-width:560px){.hero-photo{object-position:57% center}}













/* Compact desktop hero – proportions follow the selected design preview. */






@media(min-width:1101px){






  .site-header{height:70px;padding-left:clamp(26px,4vw,70px);padding-right:clamp(26px,4vw,70px)}






  .brand{font-size:24px}.brand img{width:40px;height:40px}






  .main-nav{gap:24px}.main-nav a{font-size:14px}






  .header-cta{min-height:40px;padding:8px 20px;font-size:14px}













  .hero-copy{padding:44px 30px 30px max(38px,calc((100vw - 1580px)/2 + 28px));overflow:hidden}






  .hero h1{font-size:clamp(39px,3vw,48px);line-height:1.04;margin-bottom:17px}






  .hero-copy>p{font-size:17px;line-height:1.42;margin-bottom:20px;max-width:555px}






  .hero-actions{gap:10px;flex-wrap:nowrap}






  .hero-actions .button{min-height:42px;padding:9px 18px;font-size:14px;white-space:nowrap}






  .origin{margin-top:15px;font-size:13px}













  .hero-photo{object-position:50% center}






  .daughter-card{width:126px;height:126px;top:24px;right:4%;border-width:5px}






  .notification{left:-145px;bottom:12px;width:132px;min-width:132px;padding:8px 10px;font-size:11px}






  .notification b{font-size:11px}.notification span{margin-left:18px}






  .note{right:2%;bottom:22px;padding:11px 9px;font-size:13px}






}













@media(min-width:1101px) and (max-width:1400px){













  .hero-copy{padding:37px 22px 26px 34px}






  .hero h1{font-size:38px}






  .hero-copy>p{font-size:16px;margin-bottom:17px}






  .hero-actions .button{padding:8px 13px;font-size:13px}













  .daughter-card{width:114px;height:114px;top:20px;right:3%}






  .notification{left:-133px;bottom:7px;width:122px;min-width:122px}






}













@media(min-width:1101px) and (max-width:1400px){






  .site-header{height:72px;padding-left:28px;padding-right:28px}













  .hero-copy{padding:52px 24px 42px max(34px,calc((100vw - 1240px)/2))}






  .hero h1{font-size:clamp(40px,3.8vw,51px)}













  .hero-photo{object-position:34% center}






  .hero-tablet{width:min(39vw,475px);left:29%;bottom:28px}






  .daughter-card{width:138px;height:138px;right:3%;top:24px}






  .notification{left:-54px;bottom:7px}






}













/* Final hero composition: compact panorama with a clean 1:3 text/image ratio. */






@media(min-width:1101px){






  .hero{






    height:390px;






    min-height:390px;






    grid-template-columns:27% 73%;






  }






  .hero-copy{






    padding:30px 18px 22px max(34px,calc((100vw - 1760px)/2 + 28px));






    display:flex;






    flex-direction:column;






    justify-content:center;






  }






  .hero h1{






    font-size:clamp(31px,2.15vw,39px);






    line-height:1.04;






    margin-bottom:13px;






    max-width:470px;






  }






  .hero-copy>p{






    font-size:16px;






    line-height:1.38;






    margin-bottom:15px;






    max-width:455px;






  }






  .hero-actions{gap:8px;flex-wrap:wrap}






  .hero-actions .button{






    min-height:38px;






    padding:7px 12px;






    font-size:12.5px;






  }






  .origin{margin-top:11px;font-size:12px}






  .origin span{font-size:17px;margin-right:5px}






  .hero-visual{height:390px;min-height:390px}






  .hero-photo{object-position:50% 52%}






  .daughter-card{






    width:108px;






    height:108px;






    top:18px;






    right:3.8%;






    border:4px solid #fff;






    box-shadow:0 12px 30px rgba(9,56,80,.17);






  }






  .daughter-photo{






background-size:152%;






background-position:50% 40%;






  }






  .notification{






    left:-109px;






    bottom:6px;






    width:116px;






    min-width:116px;






    padding:7px 9px;






    border-radius:10px;






    font-size:10px;






  }






  .notification b{font-size:10px}






  .notification span{margin-left:18px;line-height:1.2}






  .family-connection path{stroke-width:2.7;stroke-dasharray:8 7}






  .note{






    right:2.9%;






    bottom:42px;






    width:72px;






    padding:0;






    background:transparent;






    border-radius:0;






    box-shadow:none;






    color:#6c5d4d;






    font-size:10.5px;






    line-height:1.18;






    text-align:center;






    transform:rotate(-2deg);






  }






}













@media(min-width:1101px) and (max-width:1400px){






  .hero{height:365px;min-height:365px;grid-template-columns:30% 70%}






  .hero-copy{padding:25px 15px 20px 28px}






  .hero h1{font-size:31px}






  .hero-copy>p{font-size:15px}






  .hero-visual{height:365px;min-height:365px}






  .daughter-card{width:100px;height:100px;top:15px;right:3%}






  .notification{left:-104px;width:111px;min-width:111px}






  .note{right:2.2%;bottom:36px;font-size:10px}






}













/* Nutzenbotschaft links in der Verbindungsleiste */






.left-note{position:relative;justify-self:start;text-align:center;font-family:"Segoe Print","Comic Sans MS",cursive;color:#147c99;font-size:21px;line-height:1.22;transform:rotate(3deg)}






.left-note:after{content:"";position:absolute;left:7%;right:4%;bottom:-10px;height:8px;border-top:2px solid #35bfd0;border-radius:50%;transform:rotate(-3deg)}













/* Alexa-Anleitung */






.alexa-guide{padding:88px clamp(28px,8vw,140px);display:grid;grid-template-columns:minmax(300px,.8fr) minmax(480px,1.2fr);gap:clamp(45px,7vw,100px);align-items:center;background:linear-gradient(135deg,#f0fcfc 0%,#fff9e8 100%)}






.alexa-intro{max-width:570px}.alexa-mark{display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;border-radius:19px;background:#c7f3f3;font-size:28px;box-shadow:0 12px 28px rgba(16,115,135,.12)}






.alexa-intro h2{margin:0 0 18px;color:#07385f;font-size:clamp(36px,4vw,58px);line-height:1.06;letter-spacing:-.045em}






.alexa-intro p{margin:0;color:#536f81;font-size:18px;line-height:1.55}






.alexa-steps{display:grid;gap:14px}.alexa-steps article{display:flex;gap:17px;align-items:flex-start;padding:20px 22px;background:rgba(255,255,255,.94);border:1px solid #cce9e9;border-radius:20px;box-shadow:0 12px 30px rgba(9,70,95,.09)}






.alexa-steps article>span{flex:0 0 35px;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#0a8e9e;color:#fff;font-weight:850}






.alexa-steps h3{margin:1px 0 5px;color:#07385f;font-size:19px}.alexa-steps p{margin:0;color:#536f81;line-height:1.45}






.alexa-example p{margin-top:5px;padding:8px 12px;border-left:3px solid #ffd85a;background:#fffaf0;border-radius:0 10px 10px 0;color:#174b65}













/* FamilyCal-Assistent */






.chatbot-launcher{position:fixed;right:24px;bottom:22px;z-index:80;width:78px;height:78px;padding:3px;border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#55dbe1,#0b7894);box-shadow:0 16px 38px rgba(4,48,79,.27);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}






.chatbot-launcher img{width:100%;height:100%;object-fit:contain;border-radius:50%}.chatbot-launcher:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(4,48,79,.32)}






.chatbot-launcher-label{position:absolute;right:67px;top:9px;width:max-content;padding:8px 13px;border:1px solid #cce9e9;border-radius:999px;background:#fff;color:#073b60;box-shadow:0 8px 22px rgba(4,48,79,.13);font-size:13px;font-weight:750;pointer-events:none}






.chatbot-panel{position:fixed;right:24px;bottom:112px;z-index:81;width:min(410px,calc(100vw - 30px));height:min(560px,calc(100vh - 138px));display:none;grid-template-rows:auto minmax(170px,1fr) auto;overflow:hidden;background:#f7fdfd;border:1px solid #b9e3e5;border-radius:25px;box-shadow:0 26px 75px rgba(4,48,79,.3)}






.chatbot-panel.open{display:grid;animation:chatbot-in .2s ease-out}.chatbot-panel header{display:flex;align-items:center;gap:12px;padding:16px 17px;background:linear-gradient(135deg,#073b60 0%,#087b90 100%);color:#fff}






.chatbot-avatar{width:46px;height:46px;flex:0 0 auto;object-fit:contain;border:2px solid rgba(255,255,255,.72);border-radius:50%;background:#62dbe1}.chatbot-panel header div{display:grid;line-height:1.25}.chatbot-panel header strong{font-size:18px}.chatbot-panel header small{margin-top:3px;color:#d8f4f5;font-size:13px}.chatbot-close{width:36px;height:36px;margin-left:auto;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:27px;line-height:1;cursor:pointer}.chatbot-close:hover{background:rgba(255,255,255,.24)}






.chatbot-messages{padding:18px;overflow:auto;background:linear-gradient(180deg,#eefafa 0%,#f9fdfd 100%)}.chat-message{width:fit-content;max-width:88%;margin:0 0 12px;padding:12px 14px;border-radius:17px;font-size:15px;line-height:1.43}.chat-message a{color:#007f96;text-decoration:underline}.bot-message{background:#fff;border:1px solid #d5eaea;border-bottom-left-radius:5px;box-shadow:0 5px 15px rgba(9,70,95,.07)}.user-message{margin-left:auto;background:#d4f4f3;color:#073b60;border:1px solid #a8e1e2;border-bottom-right-radius:5px}






.chat-typing{display:flex;gap:4px;width:54px;margin:0 0 12px;padding:12px 15px;border:1px solid #d5eaea;border-radius:17px 17px 17px 5px;background:#fff}.chat-typing span{width:6px;height:6px;border-radius:50%;background:#0a8e9e;animation:chatbot-dot 1s infinite alternate}.chat-typing span:nth-child(2){animation-delay:.18s}.chat-typing span:nth-child(3){animation-delay:.36s}






.chatbot-form{display:grid;grid-template-columns:1fr 48px;gap:9px;padding:13px;background:#fff;border-top:1px solid #dbecec}.chatbot-form input{min-width:0;padding:12px 14px;border:1.5px solid #abdadd;border-radius:14px;background:#fff;color:#123448;font:inherit;outline:none}.chatbot-form input:focus{border-color:#18aebe;box-shadow:0 0 0 3px rgba(24,174,190,.13)}.chatbot-form button{border:0;border-radius:14px;background:#ffd85a;color:#07385f;font-size:21px;cursor:pointer}.chatbot-form button:hover{background:#ffcf32}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}






@keyframes chatbot-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes chatbot-dot{to{opacity:.3;transform:translateY(-2px)}}













@media(max-width:900px){.alexa-guide{grid-template-columns:1fr;padding-top:68px;padding-bottom:68px}.alexa-intro{max-width:680px}}






@media(max-width:560px){.statement .left-note{display:none}.alexa-guide{padding:56px 22px;gap:30px}.alexa-intro h2{font-size:36px}.alexa-intro p{font-size:16px}.alexa-steps article{padding:17px 16px}.chatbot-launcher{right:14px;bottom:14px;width:68px;height:68px}.chatbot-launcher-label{display:none}.chatbot-panel{right:10px;bottom:92px;width:calc(100vw - 20px);height:min(540px,calc(100vh - 112px));border-radius:21px}}













/* Rechtliche Seiten */






.legal-page{min-height:calc(100vh - 150px);padding:70px clamp(24px,8vw,150px) 90px;background:linear-gradient(145deg,#f1fcfc 0%,#fffdf8 55%,#fff8e8 100%)}






.legal-card{max-width:960px;margin:auto;padding:clamp(28px,5vw,62px);border:1px solid #cce9e9;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}






.legal-card h1{margin:0 0 35px;color:#07385f;font-size:clamp(38px,5vw,58px);line-height:1.05;letter-spacing:-.04em}.legal-card h2{margin:34px 0 10px;color:#07385f;font-size:23px}.legal-card h3{margin:26px 0 8px;color:#07516f;font-size:19px}.legal-card p,.legal-card li{color:#385d72;line-height:1.7}.legal-card a{color:#007f96;text-decoration:underline}.legal-card ul{padding-left:22px}.legal-back{display:inline-flex;margin-bottom:27px;color:#087f94;font-weight:750}.legal-meta{padding:12px 15px;border-left:4px solid #ffd85a;background:#fffaf0;border-radius:0 10px 10px 0}






@media(max-width:560px){.legal-page{padding:34px 15px 55px}.legal-card{padding:25px 20px;border-radius:20px}.legal-card h1{font-size:36px}}




















/* ═══════════════════════════════════════════════════════════






   Kaufweg in der Preiskarte – Umschalter Monat/Jahr + PayPal






   ═══════════════════════════════════════════════════════════ */






.plan-umschalter{display:flex;gap:6px;background:#eef7f8;border-radius:12px;






  padding:5px;margin:0 0 18px}






.plan-knopf{flex:1;border:0;background:transparent;border-radius:9px;






  padding:10px 12px;font:650 14px/1.25 inherit;color:#42636f;cursor:pointer;






  transition:background .15s,color .15s}






.plan-knopf.aktiv{background:#fff;color:#07385f;






  box-shadow:0 2px 7px rgba(10,70,95,.14)}






.plan-block .price{margin-bottom:2px}






.plan-neben{color:#6d8592;font-size:14px;margin:0 0 4px}






.paypal-feld{max-width:400px;margin:20px auto 0;min-height:52px}






.kauf-hinweis{margin:16px 0 18px;font-size:13px;line-height:1.6;color:#6d8592}






.kauf-hinweis a{color:#0a8fa0}






.button.breit{display:block;width:100%;text-align:center}




















/* ═══════════════════════════════════════════════════════════






   Gemeinsame Bausteine der Unterseiten






   (Demenzuhr, Demenz-Begleiter, Anleitungen)






   ═══════════════════════════════════════════════════════════ */






.seiten-kopfzeile{max-width:820px;margin:0 auto 38px;text-align:center}






.seiten-kopfzeile .eyebrow{display:block;margin-bottom:12px}






.seiten-kopfzeile p{color:#5a7481}













.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));






  gap:22px;max-width:1080px;margin:0 auto}






.schritte.vier{grid-template-columns:repeat(auto-fit,minmax(232px,1fr));max-width:1180px}






.schritt{background:#fff;border-radius:18px;padding:26px 24px;






  box-shadow:0 10px 26px rgba(10,70,95,.1)}






.schritt .nr{width:40px;height:40px;border-radius:12px;background:#e2f7f8;






  color:#0a8fa0;display:grid;place-items:center;font-weight:700;font-size:19px;






  margin-bottom:14px}






.schritt .nr.gelb{background:#fff2d0;color:#b57d10}






.schritt .nr.rosa{background:#fde8ef;color:#c14b7c}






.schritt h3{margin:0 0 8px;font-size:19px;color:#07385f}






.schritt p{margin:0;color:#5a7481;font-size:15.5px;line-height:1.6}













.faq-liste{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}






.faq-liste details{background:#fff;border-radius:14px;padding:2px 20px;






  box-shadow:0 6px 18px rgba(10,70,95,.09)}






.faq-liste summary{cursor:pointer;padding:16px 0;font-weight:700;color:#07385f;






  font-size:17px;list-style:none;display:flex;justify-content:space-between;






  align-items:center;gap:14px}






.faq-liste summary::-webkit-details-marker{display:none}






.faq-liste summary::after{content:"+";font-size:22px;color:#0a8fa0;font-weight:400;






  flex-shrink:0;transition:transform .18s}






.faq-liste details[open] summary::after{transform:rotate(45deg)}






.faq-liste p{margin:0 0 17px;color:#5a7481;line-height:1.65;font-size:15.5px}













.seiten-hinweis{max-width:820px;margin:22px auto 0;text-align:center;






  color:#5a7481;font-size:15.5px;line-height:1.65}






.seiten-hinweis a{color:#0a8fa0;font-weight:650}













.merkmal-wolke{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;






  gap:11px;justify-content:center}






.merkmal-wolke span{background:#fff;border-radius:9999px;padding:10px 19px;






  font-size:15.5px;color:#2c5266;box-shadow:0 4px 13px rgba(10,70,95,.09)}




















/* Kennzeichnung der KI-erzeugten Personenaufnahmen */






.ki-hinweis{position:absolute;right:12px;bottom:10px;z-index:9;






  background:rgba(255,255,255,.82);color:#3d5a66;font-size:11.5px;






  padding:4px 10px;border-radius:9999px;letter-spacing:.01em;






  backdrop-filter:blur(3px);pointer-events:none}






@media(max-width:560px){.ki-hinweis{right:8px;bottom:6px;font-size:10.5px;padding:3px 8px}}




















/* ═══════════════════════════════════════════════════════════






   Fußzeile: mehrspaltig statt einer langen Reihe.






   Rechts unten bleibt Platz für den Chat-Knopf.






   ═══════════════════════════════════════════════════════════ */






footer{display:grid;grid-template-columns:minmax(200px,1fr) auto auto;






  align-items:start;gap:28px 56px;padding:44px clamp(25px,6vw,90px) 120px}






footer > .footer-brand{grid-row:1;align-self:center}






footer > p{grid-row:2;grid-column:1;margin:0;font-size:14px;color:#9ebccb}






footer nav{margin-left:0;flex-direction:column;gap:11px;grid-row:span 2;






  align-items:flex-start;width:auto}






footer nav a{white-space:nowrap;color:#c9dce5;text-decoration:none}






footer nav a:hover{color:#67dfe5}






footer nav::before{content:attr(aria-label);display:block;font-size:12px;






  letter-spacing:.09em;text-transform:uppercase;color:#6e93a6;margin-bottom:3px}













@media(max-width:900px){






  footer{grid-template-columns:1fr 1fr;gap:26px 34px;padding-bottom:130px}






  footer > .footer-brand{grid-column:1/-1}






  footer > p{grid-column:1/-1;grid-row:2}






  footer nav{grid-row:3}






}






@media(max-width:520px){






  footer{grid-template-columns:1fr}






  footer nav{grid-row:auto}






}




















/* ═══════════════════════════════════════════════════════════






   Sprungziele: Der Kopf klebt oben und ist 82 px hoch. Ohne






   diesen Abstand landet man beim Klick in der Navigation






   hinter dem Kopf — die Überschrift bleibt verdeckt.






   ═══════════════════════════════════════════════════════════ */






html{scroll-padding-top:104px}






@media(max-width:1100px){html{scroll-padding-top:96px}}






@media(max-width:820px){html{scroll-padding-top:88px}}













/* Die Karten im Abschnitt „Ein Kalender. Ein Begleiter.“ sind Sprungziele –






   etwas Luft darüber, damit die Überschrift der Karte sichtbar bleibt. */






.showcase-card{scroll-margin-top:14px}




















/* ═══════════════════════════════════════════════════════════






   Muster-Widerrufsformular auf der Widerrufsseite






   ═══════════════════════════════════════════════════════════ */






.widerruf-formular{border:1px solid #cfe0e6;border-radius:12px;padding:22px 26px;






  margin:18px 0 6px;background:#fbfeff}






.widerruf-formular p{margin:0 0 14px;line-height:1.7}






.widerruf-formular p:last-child{margin-bottom:0}






.widerruf-formular .strich{display:inline-block;min-width:180px;






  border-bottom:1px solid #9db8c2;margin-left:8px}






.widerruf-formular .linie{border-bottom:1px solid #9db8c2;height:1.6em;margin-bottom:18px}






.legal-anschrift{background:#f4fbfc;border-radius:10px;padding:15px 18px;line-height:1.7}


















/* Einwilligung, bevor PayPal geladen wird */





.paypal-hinweis{margin:20px 0 0;background:#f4fbfc;border:1px solid #cfe0e6;





  border-radius:12px;padding:16px 18px}





.paypal-hinweis p{margin:0 0 13px;font-size:13.5px;line-height:1.6;color:#5a7481}





.paypal-hinweis a{color:#0a8fa0}





.paypal-hinweis .button{min-height:44px;font-size:15px}










/* Kündigungsschaltfläche nach § 312k BGB – muss deutlich erkennbar sein */




footer nav a.kuend-link{color:#ffd166;font-weight:700}




footer nav a.kuend-link:hover{color:#fff}












/* Pflichtangaben unmittelbar vor der Bestellung (§ 312j BGB) */



.bestellangaben{margin:18px 0 0;background:#fff;border:1px solid #cfe0e6;



  border-radius:12px;padding:16px 18px}



.bestellangaben > b{display:block;color:#07385f;font-size:15px;margin-bottom:10px}



.bestellangaben dl{margin:0;display:grid;grid-template-columns:auto 1fr;



  gap:6px 14px;font-size:14px;line-height:1.5}



.bestellangaben dt{color:#6d8592}



.bestellangaben dd{margin:0;color:#25454f}



.bestellangaben dd strong{color:#07385f}



.bestellangaben a{color:#0a8fa0}



.pflicht-hinweis{margin:12px 0 0;padding-top:11px;border-top:1px solid #e2eef1;



  font-size:13.5px;line-height:1.55;color:#5a7481}



.pflicht-hinweis strong{color:#07385f}









/* ═══════════════════════════════════════════════════════════


   Der Fernzugriff steht jetzt gleich unter dem Aufmacher –


   er ist das, was FamilyCal von einer reinen Erinnerungs-App


   unterscheidet.


   ═══════════════════════════════════════════════════════════ */


.fernzugriff{padding:56px clamp(25px,6vw,90px) 46px;


  background:linear-gradient(180deg,#f4fbfc,#fff)}


.fernzugriff h2{max-width:1180px;margin:0 auto 30px;text-align:center;


  font-size:clamp(23px,2.4vw,30px);color:#07385f}


.fern-drei{max-width:1080px;margin:0 auto;display:grid;


  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}


.fern-schritt{background:#fff;border-radius:18px;padding:26px 24px;


  box-shadow:0 10px 26px rgba(10,70,95,.1)}


.fern-schritt .nr{display:grid;place-items:center;width:38px;height:38px;


  border-radius:12px;background:#0a2a33;color:#fff;font-weight:700;font-size:17px;


  margin-bottom:14px}


.fern-schritt b{display:block;font-size:19px;color:#07385f;margin-bottom:8px}


.fern-schritt p{margin:0;color:#4c6472;font-size:15.5px;line-height:1.6}


@media(max-width:560px){.fernzugriff{padding:40px 22px 34px}}






/* ═══════════════════════════════════════════════════════════

   Barrierefreiheit: sichtbare Tastaturführung. Wer nicht mit der

   Maus arbeitet, muss sehen, wo er gerade ist.

   ═══════════════════════════════════════════════════════════ */

a:focus-visible,button:focus-visible,summary:focus-visible,

input:focus-visible,select:focus-visible,textarea:focus-visible,

details:focus-visible{outline:3px solid #0a6b7c;outline-offset:2px;border-radius:4px}

.plan-knopf:focus-visible{outline-offset:-1px}



/* Fließtext etwas dunkler – die Zielgruppe sieht oft schlechter */

.hero-copy>p,.all-copy p,.seiten-kopfzeile p{color:#3d5866}

.schritt p,.vorzug div,.faq-liste p{color:#42606d}



/* Bei stark vergrößerter Darstellung nicht überlaufen */

@media(max-width:640px){

  .plan-umschalter{flex-direction:column}

  .v-fuss,.r-fuss{flex-wrap:wrap}

}



/* Ausdrückliche Erklärung vor dem Abschluss – ohne sie kein Wertersatz (§ 357a BGB) */
.sofort-erklaerung{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;
  padding:14px 16px;background:#fffaec;border:1px solid #f0d99a;border-radius:11px;
  font-size:13.5px;line-height:1.55;color:#5c4a1f;cursor:pointer}
.sofort-erklaerung input{margin-top:2px;width:19px;height:19px;flex-shrink:0;accent-color:#0a8fa0}
.sofort-erklaerung a{color:#0a6b7c;font-weight:650}
.sofort-erklaerung.fehlt{background:#fdeef1;border-color:#e5809f;color:#6b2543}
.sofort-erklaerung.fehlt input{accent-color:#b31e56;outline:2px solid #b31e56;outline-offset:2px}

.datenschutz-hinweis{background:#f4fbfc;border-left:4px solid #0a8fa0;border-radius:0 10px 10px 0;
  padding:13px 17px;font-size:14.5px;line-height:1.65}

/* Foto im Kopfbereich der Demenz-Seite */
.hero-foto{max-width:940px;margin:0 auto;padding:0 20px 8px}
.hero-foto img{width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:0 18px 44px rgba(10,60,80,.16)}
.hero-foto figcaption{margin-top:10px;text-align:center;font-size:13.5px;
  line-height:1.55;color:#5c7480}
.hero-foto figcaption span{display:block;font-size:12px;color:#8aa0aa;margin-top:3px}
@media (max-width:640px){.hero-foto{padding:0 14px 4px}
  .hero-foto img{border-radius:13px}}

/* Vorlauf verkuerzt, damit die Bildschirmfotos nach dem Sprung auf
   "Familienkalender" mit auf den Bildschirm passen. Der Abschnitt war
   1773 px hoch, davon 618 px bevor ueberhaupt ein Bild kam. */
.all-in-one h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12;margin:6px 0 0}
.all-in-one .eyebrow{margin-bottom:6px}
.all-copy{gap:44px}
.all-copy p{margin:0}
.all-vorteile{margin:18px 0 0;gap:14px 34px}
.app-card{padding:10px 10px 0}
.app-card img{max-height:none}
@media(min-width:1101px){
  .app-grid{gap:16px}
  .app-card img{height:auto}
}

/* Leistungen und Demo-Knopf stehen jetzt links neben der Bestellkarte.
   In der Karte bleibt nur, was zur Bestellung gehoert. */
.price-leistungen{list-style:none;margin:26px 0 24px;padding:0;display:grid;gap:11px}
.price-leistungen li{font-size:16.5px;line-height:1.5;color:#0f4a63}
.price-intro .button-outline.breit{display:inline-flex;width:auto;min-width:280px}
.price-intro .test-hinweis{margin-top:12px;font-size:14.5px;line-height:1.6;color:#5b7887}

/* Das Foto steht in einem eigenen Abschnitt -- in der Hero-Section
   wuerde es durch deren overflow:hidden unten abgeschnitten. */
.hero-bildband{padding:0 clamp(16px,4vw,40px) 30px;background:linear-gradient(180deg,#fffefa,#fdfbf4)}
.hero-bildband .hero-foto{margin:0 auto;padding:0}

/* Zweiter Knopf links: Demo ansehen (Umriss) und Familie anlegen (gelb).
   Vorher war das Anlegen nur ein Textlink und ging unter. */
.price-intro .button-yellow.breit{display:inline-flex;width:auto;min-width:280px;margin-top:14px}
.price-intro .test-hinweis{margin:14px 0 0}

/* Abschluss-Abschnitt "Selbst ansehen". Die Klasse war im CSS nie
   definiert -- der Text klebte deshalb am linken Rand, waehrend die
   Knoepfe durch ihr eigenes justify-content mittig standen. */
.try-out{padding:70px clamp(25px,6vw,90px) 84px;text-align:center;
  background:linear-gradient(180deg,#fffdf6 0%,#f3fbfa 100%)}
.try-out .eyebrow{display:block;margin-bottom:12px}
.try-out h2{font-size:clamp(28px,3.2vw,42px);line-height:1.15;margin:0 0 14px}
.try-out p{max-width:660px;margin:0 auto 26px;font-size:17px;line-height:1.6;color:#3f6577}
.try-out .hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
@media(max-width:560px){
  .try-out{padding:52px 20px 60px}
  .try-out .hero-actions .button{width:100%}
}

/* Der Verweis auf alle Funktionen war ein nackter Textlink zwischen
   lauter Knoepfen -- jetzt einheitlich und mittig. */
.seiten-hinweis{text-align:center;margin:26px 0 0}
.seiten-hinweis .button{display:inline-flex}

/* Aktuelle Seite im Menue kenntlich machen -- vorher verschwand der
   Punkt einfach, was die Orientierung kostete. */
.main-nav a[aria-current="page"]{color:#00778a;position:relative}
.main-nav a[aria-current="page"]::after{content:"";position:absolute;
  left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:#31b3c2}
@media(max-width:820px){.main-nav a[aria-current="page"]::after{display:none}}

/* ══ Hoehe des Aufmachers ═══════════════════════════════════════════
   Im CSS stehen 19 verstreute min-height-Regeln fuer .hero, von 600px
   bis 365px -- Ergebnis mehrfacher Ueberarbeitung. Diese Regel steht
   zuletzt und gewinnt deshalb.

   Der Wert waechst mit der Fensterbreite: Das Foto ist 16:9, ein sehr
   flacher Rahmen wuerde Kopf und Tablet gleichzeitig abschneiden. Bei
   34vw bleibt das Verhaeltnis nah genug am Bild, ohne dass der
   Aufmacher auf kleinen Bildschirmen den ganzen Platz frisst. */
@media(min-width:1101px){
  .hero,
  .hero-visual{min-height:clamp(430px,34vw,560px)}
  .hero-photo{object-position:50% 36%}
}

/* Familienbereich "Ein Tagesplan für jedes Familienmitglied" (08.09.2026) */
.tagesplan-bereich{background:linear-gradient(125deg,#eefaf6 0%,#f6fdfb 45%,#fff7e6 100%)}
.tp-karten{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:26px 0 4px;padding:0;list-style:none}
.tp-karten li{background:#fff;border-radius:18px;padding:22px 22px 20px;box-shadow:0 10px 28px rgba(10,70,95,.10);color:#0e4258;font-size:16px;line-height:1.5}
.tp-karten li b{display:block;font-size:19px;color:#07385f;margin-bottom:8px}
.tp-karten li .tp-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#d8f7ea;font-size:24px;margin-bottom:12px}
.tp-hinweis{max-width:1180px;margin:26px auto 0;display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:center}
.tp-hinweis p{margin:0;color:#4c6472}
.tp-hinweis p b{color:#07385f}
.tp-hinweis .tp-links{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:760px){.tp-hinweis{grid-template-columns:1fr}}
.tp-karten li{position:relative}
.tp-karten li .tp-geraet{position:absolute;top:18px;right:18px;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#00899c}

/* Brücke "Ein Abo. Zwei Welten." vor dem Preis (08.09.2026) */
.zwei-welten{padding:64px clamp(25px,6vw,90px) 40px;background:linear-gradient(180deg,#f2fbfc,#fffdf6);color:#0c3b52}
.zw-kopf{max-width:860px;margin:0 auto 30px;text-align:center}
.zw-kopf h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12;color:#07385f;margin:6px 0 14px}
.zw-kopf p{color:#4c6472;font-size:18px;margin:0}
.zw-karten{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.zw-karte{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:22px;padding:28px 28px 24px;box-shadow:0 14px 34px rgba(10,70,95,.12);color:#0e4258;text-decoration:none;border:2px solid transparent;transition:border-color .15s,transform .15s}
.zw-karte:hover{border-color:#31b3c2;transform:translateY(-2px)}
.zw-karte .eyebrow{margin-bottom:0}
.zw-karte b{font-size:22px;color:#07385f;line-height:1.25}
.zw-karte p{margin:0;color:#4c6472;font-size:16px;flex:1}
.zw-karte .zw-link{font-weight:750;color:#00899c;margin-top:6px}

/* "Einkaufen mit Bildern" (08.09.2026) */
.einkauf-bilder{padding:64px clamp(25px,6vw,90px) 70px;background:#fff;color:#0c3b52}
.eb-innen{max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
.eb-innen h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12;color:#07385f;margin:6px 0 14px}
.eb-innen>div>p{color:#4c6472;font-size:18px;margin:0}
.eb-innen .check-list{grid-template-columns:1fr;margin:22px 0 26px}
.eb-innen .app-card img{aspect-ratio:auto}
@media(max-width:860px){.eb-innen{grid-template-columns:1fr}}

/* Familienkalender-Seite "Sonnen und Wunschbox" (12.09.2026) */
.sonnen-bereich{background:linear-gradient(125deg,#fff6df 0%,#fffbef 45%,#eefaf6 100%)}
.sonnen-bereich .tp-icon.sn-icon{background:#ffefc2}
.sonnen-bereich .app-card img{aspect-ratio:auto;object-fit:contain}

/* Bilder zum Vergroessern (12.09.2026) */
.bild-klickbar{cursor:zoom-in}
.bild-gross{position:fixed;inset:0;z-index:9999;display:none;overflow:auto;padding:28px;background:rgba(6,32,46,.9);cursor:zoom-out;-webkit-overflow-scrolling:touch}
.bild-gross.offen{display:block}
/* Volle Breite statt Einpassen: hohe Bilder bleiben lesbar, man scrollt nach unten (Annett 12.09.2026) */
.bild-gross img{display:block;width:100%;max-width:1500px;height:auto;margin:0 auto;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);background:#fff}
.bild-gross button{position:absolute;top:14px;right:18px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:#07385f;font-size:28px;line-height:1;cursor:pointer}
@media(max-width:640px){.bild-gross{padding:12px}}

/* Belohnungssystem: grosses Aufgabenbild oben, zwei Karten darunter (13.09.2026) */
.sonnen-medien{max-width:1380px;margin:auto;display:grid;gap:18px}
.sonnen-medien .app-card img{aspect-ratio:auto;object-fit:contain;object-position:center top}
.sonnen-nebenkarten{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:700px){.sonnen-nebenkarten{grid-template-columns:1fr;gap:16px}}

/* Demenzuhr-Seite: Text links, Tablet rechts (14.09.2026) */
section.hero.hero-uhr{display:grid;grid-template-columns:minmax(340px,46%) 1fr;height:auto;min-height:auto;align-items:center;gap:0 2vw;padding-bottom:0}
section.hero.hero-uhr>.hero-copy{display:block;text-align:left;max-width:none;margin:0;padding:52px 20px 44px max(34px,calc((100vw - 1440px)/2));overflow:visible}
section.hero.hero-uhr>.hero-copy h1{max-width:none}
section.hero.hero-uhr>.hero-copy>p{margin-left:0;margin-right:0;max-width:560px}
section.hero.hero-uhr .hero-actions,section.hero.hero-uhr .origin{justify-content:flex-start}
section.hero.hero-uhr>.hero-uhr-bild{padding:44px max(24px,calc((100vw - 1440px)/2)) 24px 0}
section.hero.hero-uhr>.hero-uhr-bild img{width:100%;max-width:760px;height:auto;display:block;margin-left:auto}
@media(max-width:900px){
  section.hero.hero-uhr{grid-template-columns:1fr}
  section.hero.hero-uhr>.hero-copy{text-align:center;padding:52px 7vw 20px}
  section.hero.hero-uhr>.hero-copy>p{margin-left:auto;margin-right:auto}
  section.hero.hero-uhr .hero-actions,section.hero.hero-uhr .origin{justify-content:center}
  section.hero.hero-uhr>.hero-uhr-bild{padding:0 6vw 34px}
  section.hero.hero-uhr>.hero-uhr-bild img{margin:0 auto}
}

/* Startseite Belohnungssystem: Wandfoto mit Kindern über den Screenshots (14.09.2026) */
.sonnen-foto{max-width:1380px;margin:30px auto 22px;padding:0}
.sonnen-foto img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 18px 44px rgba(10,70,95,.16)}
.sonnen-foto figcaption{text-align:center;padding:14px 8px 0;font-weight:650;color:#0e4258}
.sonnen-foto figcaption span{display:block;font-size:12px;font-weight:400;color:#8aa0aa;margin-top:3px}