*,*::before,*::after{box-sizing:border-box} /* ============================================================ Praxis Dr. Hoffmann — Design System Clean & modern-medizinisch · Grün + Blau · barrierefrei ============================================================ */ /* Nunito Sans – selbst gehostet (DSGVO: kein Google-CDN), variabler Schnitt */ @font-face{ font-family:'Nunito Sans'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/NunitoSans.woff2') format('woff2'); } :root{ /* Brand */ --blue-700:#0f4f86; --blue-600:#1668ad; --blue-500:#2f86c9; --blue-100:#dcebff; /* not used directly */ --blue-soft:#e7f1fa; --green-600:#6dc843; --green-500:#85e25c; --green-soft:#e4f4ec; /* Aliases – vom Rezept-Konfigurator (main.js) referenziert */ --black:var(--ink); --blue:var(--blue-600); --green:var(--green-500); --green-dark:var(--green-600); /* Ink / neutrals (cool, low chroma) */ --ink:#122430; --slate-700:#33485a; --slate-600:#46596a; --slate-500:#5e7585; --slate-400:#8298a6; --line:#e3ebf0; --line-strong:#d2dee6; /* Surfaces */ --bg:#ffffff; --bg-soft:#f2f7fa; --bg-tint:#eaf4f2; /* Effects */ --grad:linear-gradient(120deg,var(--green-500),var(--blue-600)); --grad-soft:linear-gradient(140deg,var(--blue-soft),var(--green-soft)); --shadow-sm:0 1px 2px rgba(18,36,48,.06),0 2px 6px rgba(18,36,48,.05); --shadow:0 2px 8px rgba(18,36,48,.06),0 14px 36px rgba(18,36,48,.09); --shadow-lg:0 8px 24px rgba(18,36,48,.10),0 30px 60px rgba(18,36,48,.14); --r-sm:10px; --r:14px; --r-lg:22px; --r-pill:999px; --maxw:1200px; --pad:clamp(20px,5vw,64px); /* Accessibility text scale (set by JS on ) */ font-size:17px; } html[data-text="lg"]{ font-size:19px; } html[data-text="xl"]{ font-size:21px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Nunito Sans",system-ui,sans-serif; color:var(--slate-700); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea,a{font-family:"Nunito Sans",system-ui,sans-serif} h1,h2,h3,h4{ font-family:"Nunito Sans",sans-serif; color:var(--ink); font-weight:700; line-height:1.16; margin:0; letter-spacing:-.01em; text-wrap:balance; } p{margin:0;text-wrap:pretty} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .section{padding-block:clamp(56px,8vw,104px)} .eyebrow{ display:inline-flex;align-items:center;gap:.5em; font-family:"Nunito Sans",sans-serif; font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; color:var(--blue-600); } .eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(to right,var(--green-500),var(--blue-600));border-radius:2px} .section-head{max-width:640px;margin-bottom:clamp(32px,5vw,52px)} .section-head.center{margin-inline:auto;text-align:center} .section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;margin-top:.5rem} .section-head p{font-size:1.08rem;color:var(--slate-500);margin-top:.9rem} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:"Nunito Sans",sans-serif;font-weight:600;font-size:1rem; padding:.85em 1.5em;border-radius:12px;border:none;overflow:hidden; cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s; min-height:52px;line-height:1;white-space:nowrap; } .btn:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px} .btn-primary{background:linear-gradient(120deg,var(--green-500) 0%,var(--blue-600) 100%);color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(22,104,173,.28)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,104,173,.36)} .btn-ghost{background:#fff;color:var(--blue-700);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blue-500);color:var(--blue-600);transform:translateY(-2px)} .btn-green{background:var(--green-500);color:#fff;box-shadow:0 6px 18px rgba(133,226,92,.35)} .btn-green:hover{transform:translateY(-2px);background:var(--green-600)} .btn-lg{font-size:1.08rem;padding:1em 1.8em;min-height:60px} .btn svg{width:1.15em;height:1.15em} /* ---------- Image placeholder ---------- */ .ph{ position:relative;overflow:hidden;border-radius:var(--r-lg); background: repeating-linear-gradient(135deg,#e9f0f5 0 14px,#eef4f8 14px 28px); display:grid;place-items:center;color:var(--slate-400); } .ph::after{ content:attr(data-label); font-family:"Nunito Sans",monospace;font-size:.78rem;letter-spacing:.04em; text-transform:uppercase;color:var(--slate-400); background:rgba(255,255,255,.7);padding:.35em .8em;border-radius:var(--r-pill); backdrop-filter:blur(2px); } /* ---------- Cards / chips ---------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .chip{ display:inline-flex;align-items:center;gap:.5em; background:var(--blue-soft);color:var(--blue-700); font-weight:600;font-size:.86rem;padding:.4em .9em;border-radius:var(--r-pill); } .chip.green{background:var(--green-soft);color:var(--green-600)} /* simple geometric icon frame */ .ico{ width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center; background:var(--blue-soft);color:var(--blue-600); } .ico.green{background:var(--green-soft);color:var(--green-600)} .ico svg{width:26px;height:26px;stroke-width:1.8} /* ============================================================ HEADER ============================================================ */ .topbar{background:var(--ink);color:#cdd9e1;font-size:.85rem} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap} .topbar a{color:#cdd9e1} .topbar a:hover{color:#fff} .topbar .left{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap} .status-dot{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:#fff} .status-dot .dot{width:9px;height:9px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px rgba(133,226,92,.3)} .status-dot .dot.closed{background:#e0a23a;box-shadow:0 0 0 3px rgba(224,162,58,.22)} .topbar .tb-item{display:inline-flex;align-items:center;gap:.45em} .topbar svg{width:15px;height:15px} header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s,transform .4s ease} header.site.hide{transform:translateY(-100%)} header.site.scrolled{box-shadow:0 4px 20px rgba(18,36,48,.07);border-color:var(--line)} header.site .wrap{display:flex;align-items:center;gap:2rem;min-height:80px} .brand{display:flex;align-items:center;gap:.7rem;font-family:"Nunito Sans";font-weight:700;color:var(--ink);font-size:1.18rem} .brand .mark{width:42px;height:42px;border-radius:12px;background:var(--green-500);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 4px 12px rgba(22,104,173,.3)} .brand .mark svg{width:24px;height:24px} .brand small{display:block;font-family:"Nunito Sans";font-weight:500;font-size:.7rem;color:var(--slate-500);letter-spacing:.02em} nav.main{display:flex;align-items:center;gap:.25rem} nav.main a{display:inline-flex;align-items:center;gap:.3em;font-weight:600;color:var(--slate-600);padding:.5em .7em;border-radius:var(--r-pill);font-size:.88rem;transition:background .15s,color .15s;white-space:nowrap} nav.main a:hover{background:var(--bg-soft);color:var(--ink)} nav.main a svg{width:16px;height:16px;flex:none} /* Notfall: ohne Rahmen, roter Chip, sticht hervor */ .nav-notfall{color:#c0392b !important;font-weight:700;background:rgba(192,57,43,.10)} .nav-notfall:hover{background:rgba(192,57,43,.18) !important;color:#a5281c !important} /* Etwas engere Nav, damit Icons + Text auch auf schmaleren Desktops passen */ @media(max-width:1140px){nav.main{gap:.1rem}nav.main a{padding:.5em .55em;font-size:.85rem;gap:.28em}nav.main a svg{width:15px;height:15px}} .header-actions{display:flex;align-items:center;gap:1rem;margin-left:auto} .a11y{display:flex;align-items:center;gap:2px;background:var(--bg-soft);border-radius:var(--r-pill);padding:3px} .a11y button{border:none;background:transparent;color:var(--slate-600);font-weight:700;border-radius:var(--r-pill);cursor:pointer;width:34px;height:34px;display:grid;place-items:center;font-family:"Nunito Sans"} .a11y button:hover{background:#fff;color:var(--blue-600)} .a11y button.active{background:#fff;color:var(--blue-600);box-shadow:var(--shadow-sm)} .a11y .s1{font-size:.78rem}.a11y .s2{font-size:.95rem}.a11y .s3{font-size:1.12rem} .burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-strong);background:#fff;cursor:pointer;align-items:center;justify-content:center} .burger svg{width:24px;height:24px;color:var(--ink)} /* ============================================================ HERO ============================================================ */ .hero{position:relative;background: radial-gradient(1100px 520px at 88% -8%,var(--green-soft) 0,transparent 55%), radial-gradient(900px 480px at 4% 0%,var(--blue-soft) 0,transparent 50%),#fff; overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(44px,6vw,84px);position:relative;z-index:1} /* Hero – schwebende Medizin-Icons (dekorativer Hintergrund) */ .hero-floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hero-floaters .fi{position:absolute;color:var(--blue-500);opacity:.10;will-change:transform} .hero-floaters .fi svg{width:100%;height:100%} /* Optionale weiche Farb-Blobs (nur dort, wo .fl im Markup steht – z. B. Team-Sektion) */ .hero-floaters .fl{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34;will-change:transform} .hero-floaters .b1{width:360px;height:360px;left:-120px;top:2%;background:radial-gradient(circle,var(--green-500),rgba(133,226,92,0) 70%);animation:hfloat1 22s ease-in-out infinite} .hero-floaters .b2{width:400px;height:400px;right:-140px;bottom:-70px;background:radial-gradient(circle,var(--blue-500),rgba(47,134,201,0) 70%);animation:hfloat2 26s ease-in-out infinite} .hero-floaters .i1{width:54px;height:54px;left:4%;top:16%;animation:hfloat1 18s ease-in-out infinite} .hero-floaters .i2{width:42px;height:42px;left:9%;bottom:14%;animation:hfloat3 22s ease-in-out infinite} .hero-floaters .i3{width:58px;height:58px;left:2.5%;top:50%;color:var(--green-600);animation:hfloat2 26s ease-in-out infinite} .hero-floaters .i4{width:48px;height:48px;right:6%;top:13%;animation:hfloat2 21s ease-in-out infinite} .hero-floaters .i5{width:44px;height:44px;right:9%;bottom:20%;color:var(--green-600);animation:hfloat1 24s ease-in-out infinite reverse} .hero-floaters .i6{width:56px;height:56px;right:3%;top:52%;animation:hfloat3 19s ease-in-out infinite} @keyframes hfloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-30px)}} @keyframes hfloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,34px) scale(1.08)}} @keyframes hfloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-38px)}} @media (prefers-reduced-motion:reduce){.hero-floaters .fi{animation:none}} @media (max-width:760px){.hero-floaters{display:none}} .hero h1{font-size:2.5rem;font-weight:800;margin:.7rem 0 0;line-height:1.1;text-wrap:pretty} .hero h1 em{font-style:italic} @media(max-width:560px){.hero h1{font-size:1.9rem}} .hero h1 .accent{color:var(--green-500)} .hero .lead{font-size:1.18rem;color:var(--slate-600);margin-top:1.2rem;max-width:46ch} .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem} @media(max-width:560px){.hero-cta{flex-direction:column;gap:.7rem}.hero-cta .btn{width:100%;white-space:normal;font-size:1rem;min-height:54px;text-align:center}} .hero-trust{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;color:var(--slate-500);font-size:.95rem} .stars{color:#f0a91e;letter-spacing:1px;font-size:1rem} .hero-visual{position:relative} .hero-visual .ph{aspect-ratio:4/4.4;height:100%;min-height:380px} .float-card{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:.9rem 1.1rem;display:flex;align-items:center;gap:.7rem;border:1px solid var(--line)} .float-card .ico{width:42px;height:42px;border-radius:11px} .float-card .ico svg{width:21px;height:21px} .float-card b{display:block;color:var(--ink);font-size:.98rem;font-family:"Nunito Sans"} .float-card span{font-size:.84rem;color:var(--slate-500)} .fc-1{top:24px;left:-18px} .fc-2{bottom:30px;right:-16px} /* Quick actions */ .quick{position:relative;z-index:2;margin-top:-6px} .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .qa{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.15rem;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;text-align:left;width:100%} .qa:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-500)} .qa b{display:block;color:var(--ink);font-size:1rem;font-family:"Nunito Sans";font-weight:600} .qa span{font-size:.86rem;color:var(--slate-500)} /* Stats */ .stats{border-block:1px solid var(--line);background:var(--bg-soft)} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:38px} .stat{text-align:center} .stat .num{font-family:"Nunito Sans";font-weight:800;font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--ink);line-height:1} .stat .num em{font-style:normal;color:var(--blue-700)} .stat .lbl{font-size:.92rem;color:var(--slate-500);margin-top:.4rem} /* ============================================================ LEISTUNGEN ============================================================ */ .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem} .service{padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;transition:transform .18s,box-shadow .2s;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)} .service:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .service h3{font-size:1.2rem;font-weight:700} .service p{font-size:.98rem;color:var(--slate-500)} .service .more{margin-top:auto;color:var(--blue-600);font-weight:600;font-size:.94rem;display:inline-flex;align-items:center;gap:.4em} .service .more svg{width:16px;height:16px;transition:transform .15s} .service:hover .more svg{transform:translateX(3px)} /* ============================================================ WEG ZU UNS (timeline) ============================================================ */ .weg{background:var(--ink);color:#c4d2dc} .weg .section-head h2{color:#fff} .weg .section-head p{color:#9fb3c0} .weg .eyebrow{color:#7fd6c0} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative} .step{background:#1b3140;border:1px solid #294455;border-radius:var(--r-lg);padding:1.5rem;position:relative} .step .n{width:46px;height:46px;border-radius:12px;background:linear-gradient(120deg,var(--green-500),var(--blue-600));color:#fff;display:grid;place-items:center;font-family:"Nunito Sans";font-weight:800;font-size:1.2rem;margin-bottom:1rem} .step h3{color:#fff;font-size:1.18rem;margin-bottom:.4rem} .step p{font-size:.95rem;color:#9fb3c0} /* ============================================================ TEAM ============================================================ */ /* Team – Liquid-Glass-„Schublade" GENAU hinter dem Foto, scroll-gesteuert. --p (0..1) wird per JS aus der Scrollposition gesetzt: 0 = Box hinter Foto versteckt, 1 = Box ist als Schublade nach unten herausgefahren. Ohne JS: --p:1 (Namen sichtbar). */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;align-items:start;--p:1;--dh:108px} .member{position:relative;padding-bottom:var(--dh)} .member-photo{position:relative;z-index:2;aspect-ratio:1/1.08;border-radius:var(--r-lg);overflow:hidden;background:#eef3f7;box-shadow:var(--shadow-sm)} .member-photo img{width:100%;height:100%;object-fit:cover;display:block} .member-photo.ph{display:grid;place-items:center;background:linear-gradient(160deg,#e7f1fa,#e4f4ec)} .member-photo.ph .ph-ico{color:#a9c2d6;line-height:0} .member-photo.ph .ph-ico svg{width:60px;height:60px} /* Schublade: liegt exakt deckungsgleich hinter dem Foto (gleiche Breite + Radius), z-index darunter */ .member-info{ position:absolute;left:0;right:0;top:0;bottom:var(--dh);z-index:1; display:flex;flex-direction:column;justify-content:flex-end;gap:.28rem; padding:0 16px 18px;border-radius:var(--r-lg);color:#fff; background:linear-gradient(155deg,rgba(20,49,86,.88),rgba(12,30,55,.82)); -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%); border:1px solid rgba(255,255,255,.14); box-shadow:0 16px 30px rgba(12,30,55,.30); transform:translateY(calc(var(--p) * var(--dh))); will-change:transform; } .member-info h3{color:#fff;font-size:1.02rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance} .member-info .role{color:#9fd0ff;font-weight:600;font-size:.8rem;line-height:1.25} @media(prefers-reduced-motion:reduce){.team-grid{--p:1}} .team-photo{width:100%;aspect-ratio:16/6;margin-top:1.8rem;border-radius:var(--r-lg);background:repeating-linear-gradient(135deg,#e9f0f5 0 14px,#eef4f8 14px 28px);background-size:cover;background-position:center} @media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}} @media(max-width:480px){.team-grid{grid-template-columns:1fr 1fr;gap:1rem;--dh:132px}.member-info h3{font-size:.94rem}} @media(max-width:640px){.team-photo{aspect-ratio:4/3}} /* ============================================================ BEWERTUNGEN ============================================================ */ .reviews{background:var(--bg-soft)} .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .review{padding:1.6rem} .review .stars{font-size:1.05rem;margin-bottom:.8rem} .review blockquote{margin:0;font-size:1.05rem;color:var(--slate-700);line-height:1.55} .review .who{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem} .review .av{width:42px;height:42px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;font-family:"Nunito Sans";font-weight:700;color:var(--blue-700);font-size:1rem} .review .who b{color:var(--ink);font-size:.96rem;display:block} .review .who span{font-size:.84rem;color:var(--slate-500)} /* ============================================================ ÖFFNUNGSZEITEN / ANFAHRT ============================================================ */ .kontakt-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6rem;align-items:stretch} .hours{padding:1.8rem} .hours h3{font-size:1.3rem;margin-bottom:1.1rem} .hours table{width:100%;border-collapse:separate;border-spacing:0} .hours td{padding:.75em .7em;border-top:1px solid var(--line);font-size:1rem} .hours tr:first-child td{border-top:none} .hours td:last-child{text-align:right;font-weight:600;color:var(--ink)} /* Geschlossene Tage (Sa/So) klar abgesetzt */ .hours tr.closed-day td{color:var(--slate-400)} .hours .closed{color:var(--slate-400);font-weight:600} /* Heutiger Tag: sanft-grüne Pille, komplett grün OHNE Trennlinie (oben + unten weg) + „HEUTE" mit Punkt */ .hours tr.is-today td{background:var(--green-soft);border-top-color:transparent} .hours tr.is-today + tr td{border-top-color:transparent} .hours tr.is-today td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;color:var(--green-600);font-weight:700} .hours tr.is-today td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px} .hours tr.is-today td:first-child::before{content:"●";color:var(--green-500);margin-right:.45em;font-size:.7em;vertical-align:middle} /* Mobil: Zeilen als Flex → Tag + Zeit garantiert nebeneinander auf EINER Linie; HEUTE als saubere grüne Pille (eine Zeile, keine Trennlinie) */ @media(max-width:560px){ .hours{padding:1.1rem} .hours table,.hours tbody{display:block;width:100%} .hours tr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:1px solid var(--line)} .hours tr:first-child{border-top:none} .hours td{border:none!important;background:transparent;padding:.6em 0;font-size:.78rem;white-space:nowrap;min-width:0} .hours td:first-child{font-size:.74rem;letter-spacing:-.01em} .hours td:last-child{text-align:right;color:var(--ink)} .hours tr.is-today{background:var(--green-soft);border-radius:12px;border-top-color:transparent;padding:.12rem .6rem;margin:.12rem 0} .hours tr.is-today + tr{border-top-color:transparent} } @media(max-width:374px){ .hours td{font-size:.72rem} .hours td:first-child{font-size:.68rem} } .map{position:relative;min-height:340px} .map .ph{height:100%} .map .addr{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:1rem 1.2rem;max-width:280px} .map .addr b{color:var(--ink);font-family:"Nunito Sans"} .map .addr p{font-size:.92rem;color:var(--slate-500);margin-top:.3rem} /* Google-Maps Einwilligungs-Platzhalter (DSGVO) */ .map-embed{position:relative;width:100%;min-height:340px;height:100%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#eef4f9,#e3ecf3);display:flex;align-items:center;justify-content:center;text-align:center} .map-embed.is-loaded{display:block;background:none} .map-embed-box{max-width:380px;padding:1.8rem 1.6rem} .map-embed-pin{width:34px;height:34px;color:var(--blue-600);margin-bottom:.6rem} .map-embed-title{font-weight:700;color:var(--ink);font-size:1.05rem;margin-bottom:.35rem} .map-embed-text{font-size:.9rem;line-height:1.6;color:var(--slate-600);margin-bottom:1.1rem} .map-embed-btn{background:linear-gradient(120deg,var(--green),var(--blue));color:#fff;border:none;font-family:inherit;font-weight:700;font-size:.92rem;padding:.72em 1.5em;border-radius:var(--r-pill);cursor:pointer;transition:filter .15s} .map-embed-btn:hover{filter:brightness(1.07)} .map-embed-note{font-size:.8rem;color:var(--slate-500);margin-top:.8rem} .map-embed-note a{color:var(--blue-600)} /* ============================================================ FAQ ============================================================ */ .faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem} .faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,border-color .2s} .faq-item.open{box-shadow:var(--shadow-sm);border-color:var(--line-strong)} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;background:none;border:none;cursor:pointer;text-align:left;font-family:"Nunito Sans";font-weight:600;font-size:1.08rem;color:var(--ink)} .faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue-600);display:grid;place-items:center;transition:transform .25s,background .2s} .faq-item.open .pm{transform:rotate(45deg);background:var(--blue-600);color:#fff} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq-a .inner{padding:0 1.4rem 1.3rem;color:var(--slate-500);font-size:1rem} /* ============================================================ CTA BAND + FOOTER ============================================================ */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--green-500),var(--blue-600));color:#fff;border-radius:var(--r-lg);padding:clamp(36px,5vw,60px);text-align:center} .cta-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)} .cta-band p{color:rgba(255,255,255,.9);margin:.8rem auto 1.8rem;max-width:46ch;font-size:1.1rem} .cta-band .btn-white{background:#fff;color:var(--blue-700)} .cta-band .btn-white:hover{transform:translateY(-2px)} .cta-band .btn-clear{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)} .cta-band .deco{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.18)} .cta-band .deco.d1{width:280px;height:280px;top:-120px;left:-60px} .cta-band .deco.d2{width:200px;height:200px;bottom:-100px;right:-30px} /* Dezenter Hinweis "Aktuell keine Neuaufnahme" (ersetzt das frühere "Patient werden"-CTA) */ .info-note{max-width:760px;margin:0 auto;display:flex;gap:1.3rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow)} .info-note-ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--blue-soft);color:var(--blue-600);display:grid;place-items:center} .info-note-ic svg{width:26px;height:26px} .info-note h2{font-size:1.3rem;margin:0 0 .45rem} .info-note p{color:var(--slate-600);margin:0 0 1.1rem;line-height:1.65;max-width:54ch} .info-note .btn{margin:0} @media (max-width:560px){.info-note{flex-direction:column;gap:.9rem}.info-note h2{font-size:1.2rem}} footer.site{background:var(--ink);color:#9fb3c0;padding-block:clamp(48px,6vw,72px) 0} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid #243a49} footer .brand{color:#fff} footer .brand small{color:#7e94a2} footer .fcol h4{color:#fff;font-size:1rem;margin-bottom:1rem;font-family:"Nunito Sans"} footer .fcol a{display:block;padding:.3em 0;color:#9fb3c0;font-size:.95rem} footer .fcol a:hover{color:#fff} footer .about{font-size:.95rem;color:#9fb3c0;margin-top:1rem;max-width:34ch} footer .legal{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.5rem;font-size:.86rem;color:#7e94a2} footer .legal a{color:#9fb3c0} /* Mobil: Cookie-Icon sitzt unten links → Rechtslinks nach rechts + etwas höher, damit Platz bleibt */ @media(max-width:640px){ footer .legal{flex-direction:column;align-items:flex-end;text-align:right;gap:.5rem;padding-bottom:66px} } /* Agentur-Credit im Footer – og-Logo mit Schatten, damit es auf dunklem Grund absteht */ .footer-credit{display:flex;align-items:center;justify-content:center;gap:.5em;padding:1rem 0 1.6rem;font-size:.72rem;color:#6f8593;letter-spacing:.2px;flex-wrap:wrap} .footer-credit .credit-logo{height:20px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(255,255,255,.18))} .footer-credit a{display:inline-flex;align-items:center;line-height:0;transition:transform .15s,filter .15s} .footer-credit a:hover{transform:translateY(-1px)} .footer-credit a:hover .credit-logo{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(255,255,255,.34))} /* ============================================================ UNTERSEITEN-NAVBAR + LANDINGPAGES (Leistungen) ============================================================ */ .sub-header .wrap{display:flex;align-items:center;gap:1.2rem;min-height:70px} .sub-nav{flex:1;display:flex;align-items:center} .sub-back{display:inline-flex;align-items:center;gap:.45em;color:var(--slate-500);font-size:.92rem;font-weight:600;padding:.4em .7em;border-radius:var(--r-pill);transition:color .15s,background .15s} .sub-back:hover{color:var(--blue-600);background:var(--bg-soft)} .sub-back svg{width:16px;height:16px;flex:none} /* Termin-Button auch mobil sichtbar (Unterseiten haben keine Sticky-Bar) */ .sub-header .header-actions .btn-grad{display:inline-flex !important} .lp-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ink) 0%,#1a3a50 100%);color:#fff} .lp-hero>.wrap{padding-block:clamp(3rem,7vw,5rem) clamp(2.6rem,6vw,4rem);padding-inline:clamp(1.3rem,5vw,2.8rem)} .lp-hero.has-img>.wrap{display:grid;grid-template-columns:1.05fr .9fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center} .lp-hero-text{max-width:680px;min-width:0} .lp-hero .eyebrow{color:var(--green-500);margin-bottom:.55rem} .lp-hero h1{font-size:clamp(1.9rem,4.6vw,2.8rem);line-height:1.14;color:#fff;margin:.3rem 0 .9rem} .lp-hero .lead{font-size:clamp(1.02rem,2.3vw,1.18rem);color:rgba(255,255,255,.82);line-height:1.7;max-width:620px} .lp-hero-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 22px 50px rgba(0,0,0,.4);background:#16344a} .lp-hero-media img{width:100%;height:100%;object-fit:cover;display:block} .lp-info{background:var(--bg-soft);padding-block:clamp(2.4rem,6vw,4rem)} .lp-info>.wrap{max-width:840px} .lp-cards{display:grid;gap:1rem;margin-top:1.6rem} .lp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.6rem) clamp(1.3rem,3vw,1.8rem);box-shadow:var(--shadow-sm)} .lp-card h2{font-size:1.18rem;font-weight:700;color:var(--ink);margin-bottom:.4rem} .lp-card p{color:var(--slate-500);line-height:1.75} /* Info als lesbare Absätze (statt Boxen) */ .lp-prose{max-width:760px;margin:1.7rem auto 0} .lp-prose h2{font-size:1.3rem;font-weight:700;color:var(--ink);line-height:1.3;margin:1.9rem 0 .55rem} .lp-prose h2:first-child{margin-top:0} .lp-prose h3{font-size:1.08rem;font-weight:700;color:var(--ink);margin:1.4rem 0 .4rem} .lp-prose p{color:var(--slate-600);line-height:1.85;margin-bottom:1.05rem} .lp-prose ul{color:var(--slate-600);line-height:1.8;margin:0 0 1.05rem 1.2rem} .lp-prose li{margin-bottom:.4rem} .lp-prose strong{color:var(--ink)} .lp-cta-s{padding-block:clamp(2.6rem,6vw,4.2rem)} .lp-cta-s>.wrap{max-width:840px} .lp-cta{background:linear-gradient(120deg,var(--green-500),var(--blue-600));border-radius:var(--r-lg);padding:clamp(2rem,5vw,3rem);text-align:center;color:#fff} .lp-cta h3{font-size:clamp(1.3rem,3vw,1.65rem);color:#fff;margin-bottom:.5rem} .lp-cta p{color:rgba(255,255,255,.9);margin-bottom:1.4rem;font-size:1.02rem} .lp-cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem} /* AIDA: Abschnitts-Köpfe */ .lp-shead{text-align:center;max-width:700px;margin:0 auto 2rem} .lp-shead .eyebrow{margin-bottom:.45rem} .lp-shead h2{font-size:clamp(1.5rem,3.5vw,2.05rem);color:var(--ink);line-height:1.2} .lp-shead p{color:var(--slate-500);margin-top:.6rem;line-height:1.6} /* AIDA: Desire – 3 Benefits */ .lp-benefits{padding-block:clamp(2.4rem,6vw,4rem)} .lp-benefits>.wrap{max-width:1000px} .lp-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .lp-benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.6rem;text-align:center;box-shadow:var(--shadow-sm)} .lp-benefit .ic{width:58px;height:58px;margin:0 auto 1.1rem;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:#fff;background:linear-gradient(120deg,var(--green-500),var(--blue-600))} .lp-benefit h3{font-size:1.12rem;color:var(--ink);margin-bottom:.45rem;font-weight:700} .lp-benefit p{font-size:.92rem;color:var(--slate-500);line-height:1.6} /* AIDA: Action – Ansprechpartner / Kontakt */ .lp-contact{padding-block:clamp(2.4rem,6vw,4rem);background:var(--bg-soft)} .lp-contact>.wrap{max-width:900px} .lp-contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .lp-contact-top{padding:1.3rem 1.7rem;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem} .lp-contact-top .addr{display:inline-flex;align-items:center;gap:.5em;color:var(--slate-600);font-weight:600;font-size:.95rem} .lp-contact-top .addr svg{width:18px;height:18px;color:var(--blue-600);flex:none} .lp-doc-table{width:100%;border-collapse:collapse} .lp-doc-table th,.lp-doc-table td{text-align:left;padding:.9rem 1.7rem;font-size:.93rem;border-bottom:1px solid var(--line)} .lp-doc-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400);font-weight:700} .lp-doc-table tr:last-child td{border-bottom:none} .lp-doc-table .nm{font-weight:700;color:var(--ink)} .lp-doc-table .rl{color:var(--slate-500)} .lp-call{display:inline-flex;align-items:center;gap:.4em;color:var(--blue-600);font-weight:600;white-space:nowrap} .lp-call svg{width:15px;height:15px} .lp-contact-actions{padding:1.2rem 1.7rem;display:flex;flex-wrap:wrap;gap:.7rem;background:var(--bg)} @media(max-width:820px){.lp-hero.has-img>.wrap{grid-template-columns:1fr}.lp-hero-media{max-width:560px;aspect-ratio:16/9}.lp-benefit-grid{grid-template-columns:1fr}} @media(max-width:600px){ .lp-doc-table thead{display:none} .lp-doc-table tr{display:block;border-bottom:1px solid var(--line);padding:.5rem 0} .lp-doc-table tr:last-child{border-bottom:none} .lp-doc-table td{display:flex;justify-content:space-between;gap:1rem;border:none;padding:.35rem 1.5rem;font-size:.9rem} .lp-doc-table td::before{content:attr(data-l);color:var(--slate-400);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em} } @media(max-width:560px){ .sub-header .wrap{gap:.5rem} .sub-back{font-size:0;padding:.4em .5em} .sub-back svg{width:20px;height:20px} .sub-header .header-actions .btn-grad{padding:.55em .9em;font-size:.85rem} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ nav.main{display:none} .burger{display:flex} .hero .wrap{grid-template-columns:1fr} .hero-visual{order:-1;display:none} .quick-grid{grid-template-columns:repeat(2,1fr)} .stats .wrap{grid-template-columns:repeat(2,1fr);gap:2rem 1rem} .services-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .review-grid{grid-template-columns:1fr} .kontakt-grid{grid-template-columns:minmax(0,1fr)} .kontakt-grid > *{min-width:0;max-width:100%} .map,.map-embed{max-width:100%} .map iframe,.map-embed iframe{width:100%!important;max-width:100%} footer.site .cols{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .quick-grid{grid-template-columns:1fr} .services-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .stats .wrap{grid-template-columns:1fr 1fr} .header-actions .a11y{display:none} footer.site .cols{grid-template-columns:1fr} /* Hero füllt den ersten Screen genau bis zu den Google-Bewertungen – der Schnellzugriff ("Termin buchen / Online-Kalender") rutscht unter die Falz. Inhalt mittig zentriert; "safe center" rückt bei sehr hohem Inhalt nach oben, damit das Eyebrow nie hinter dem Sticky-Header verschwindet. 97px = Topbar(42)+Header(61) minus 6px Überlapp von .quick (margin-top:-6px), damit keine Karte durchblitzt. */ .hero{display:flex;flex-direction:column;justify-content:safe center;min-height:calc(100svh - 97px)} .hero .wrap{padding-block:clamp(16px,4vw,32px)} } /* Mobile nav drawer */ .mobile-nav{position:fixed;inset:0;z-index:60;background:rgba(18,36,48,.5);opacity:0;pointer-events:none;transition:opacity .2s} .mobile-nav.open{opacity:1;pointer-events:auto} .mobile-nav .panel{position:absolute;right:0;top:0;bottom:0;width:min(82vw,340px);background:linear-gradient(160deg,var(--ink) 0%,#1a3a50 100%);padding:1.3rem;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;gap:.2rem;overflow-y:auto} .mobile-nav.open .panel{transform:none} .mobile-nav a:not(.btn){padding:.62em 1em;border-radius:12px;font-weight:600;color:#fff;font-size:1.02rem} .mobile-nav a:not(.btn):hover{background:rgba(255,255,255,.12)} /* Drawer: Trenner, Öffnungszeiten, Cookie-Button (nur mobil sichtbar) */ .mn-divider{height:1px;background:rgba(255,255,255,.16);margin:.9rem 0 .3rem;flex:none} .mn-hours{padding:.1rem .2rem .2rem;flex:none} .mn-hours-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#9ec6e6;font-weight:700;margin-bottom:.55rem} .mn-hours-row{display:flex;flex-direction:column;gap:.05rem;padding:.28rem 0} .mn-hours-row span:first-child{color:#fff;font-weight:600;font-size:.86rem} .mn-hours-row span:last-child{color:#bcd3e6;font-size:.82rem} .mn-cookie{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.55em;width:100%;padding:.85em 1em;margin-bottom:env(safe-area-inset-bottom);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;font-family:inherit;font-weight:600;font-size:.98rem;cursor:pointer;transition:background .15s} .mn-cookie:hover{background:rgba(255,255,255,.16)} .mn-cookie svg{width:20px;height:20px;flex:none} .mobile-nav .close{align-self:flex-end;width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.08);cursor:pointer;font-size:1.4rem;color:#fff;margin-bottom:.5rem} .mobile-nav .panel a.mn-notfall{display:flex;align-items:center;gap:.6em;background:rgba(196,38,46,.20);color:#ff8a7a;border:1px solid rgba(196,38,46,.5);margin-bottom:.5rem} .mobile-nav .panel a.mn-notfall:hover{background:rgba(196,38,46,.32);color:#ffb0a4} .mobile-nav .panel a.mn-notfall svg{width:20px;height:20px;flex:none} /* ============================================================ REZEPT-KONFIGURATOR ============================================================ */ .rk{max-width:760px;margin-inline:auto} .rk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .rk-head{padding:1.4rem clamp(1.2rem,3vw,2rem) 1.2rem;border-bottom:1px solid var(--line);background:#fff} .rk-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem} .rk-progress-top b{font-family:"Nunito Sans";color:var(--ink);font-size:1.05rem} .rk-progress-top span{font-size:.9rem;color:var(--slate-500)} .rk-bar{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden} .rk-bar i{display:block;height:100%;background:linear-gradient(to right,var(--green-500),var(--blue-600));border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)} .rk-dots{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap} .rk-dot{display:flex;align-items:center;gap:.4em;font-size:.8rem;color:var(--slate-400);font-weight:600} .rk-dot .b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);color:var(--slate-400);font-size:.78rem;flex:none;transition:all .2s} .rk-dot.done .b{background:var(--green-soft);color:var(--green-600)} .rk-dot.active .b{background:var(--green-500);color:#fff;box-shadow:0 3px 8px rgba(22,104,173,.3)} .rk-dot.active{color:var(--ink)} @media (max-width:620px){.rk-dots{display:none}} .rk-body{padding:clamp(1.3rem,3vw,2rem)} .rk-body h3{font-size:1.4rem;font-weight:700;margin-bottom:.4rem} .rk-body .sub{color:var(--slate-500);margin-bottom:1.4rem;font-size:1rem} /* selectable option cards */ .rk-grid{display:grid;gap:.8rem} .rk-grid.cols2{grid-template-columns:1fr 1fr} @media (max-width:520px){.rk-grid.cols2{grid-template-columns:1fr}} .rk-opt{display:flex;align-items:flex-start;gap:.9rem;width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;min-height:64px} .rk-opt:hover{border-color:var(--blue-500);transform:translateY(-1px)} .rk-opt:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px} .rk-opt.sel{border-color:var(--green-500);background:var(--green-soft)} .rk-opt .ico{width:46px;height:46px;border-radius:12px} .rk-opt .ico svg{width:22px;height:22px} .rk-opt .txt b{display:block;color:var(--ink);font-family:"Nunito Sans";font-weight:600;font-size:1.06rem} .rk-opt .txt span{font-size:.92rem;color:var(--slate-500)} .rk-opt .check{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:grid;place-items:center;color:#fff;transition:all .15s} .rk-opt.sel .check{background:var(--green-500);border-color:var(--green-500)} .rk-opt .check svg{width:15px;height:15px;opacity:0} .rk-opt.sel .check svg{opacity:1} /* form fields */ .rk-fields{display:grid;gap:1.1rem} .rk-fields.cols2{grid-template-columns:1fr 1fr} @media (max-width:520px){.rk-fields.cols2{grid-template-columns:1fr}} .rk-field{display:flex;flex-direction:column;gap:.4rem} .rk-field.full{grid-column:1/-1} .rk-field label{font-weight:600;color:var(--ink);font-size:.96rem} .rk-field label .opt{color:var(--slate-400);font-weight:500;font-size:.85rem} .rk-input,.rk-select,.rk-textarea{ font-family:inherit;font-size:1.02rem;padding:.85em 1em;border:2px solid var(--line-strong); border-radius:12px;background:#fff;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s;min-height:54px; } .rk-textarea{min-height:96px;resize:vertical;line-height:1.5} .rk-input:focus,.rk-select:focus,.rk-textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(47,134,201,.15)} .rk-input.err,.rk-select.err{border-color:#d8563f;box-shadow:0 0 0 4px rgba(216,86,63,.12)} .rk-errmsg{color:#c0432c;font-size:.86rem;font-weight:500;display:flex;align-items:center;gap:.35em} .rk-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235e7585' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.8em} /* medication rows */ .rk-med{display:grid;grid-template-columns:1.5fr 1fr auto;gap:.6rem;align-items:end} @media (max-width:520px){.rk-med{grid-template-columns:1fr 1fr}} .rk-med .rm{width:54px;height:54px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--slate-500);cursor:pointer;font-size:1.4rem;display:grid;place-items:center;flex:none} .rk-med .rm:hover{border-color:#d8563f;color:#d8563f} @media (max-width:520px){.rk-med .rm{grid-column:2;justify-self:end;width:46px;height:46px}} .rk-addmed{display:inline-flex;align-items:center;gap:.5em;background:var(--blue-soft);color:var(--blue-700);border:none;border-radius:12px;padding:.7em 1.1em;font-weight:600;cursor:pointer;font-family:"Nunito Sans";font-size:.95rem} .rk-addmed:hover{background:#d8e9f7} /* checkbox */ .rk-checkbox{display:flex;gap:.8rem;align-items:flex-start;background:var(--bg-soft);border:2px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;cursor:pointer;transition:border-color .15s,background .15s} .rk-checkbox.sel{border-color:var(--green-500);background:var(--green-soft)} .rk-checkbox.err{border-color:#d8563f} .rk-checkbox .box{width:26px;height:26px;border-radius:7px;border:2px solid var(--line-strong);flex:none;display:grid;place-items:center;background:#fff;color:#fff;margin-top:1px} .rk-checkbox.sel .box{background:var(--green-500);border-color:var(--green-500)} .rk-checkbox .box svg{width:15px;height:15px;opacity:0} .rk-checkbox.sel .box svg{opacity:1} .rk-checkbox p{font-size:.94rem;color:var(--slate-600)} .rk-checkbox a{color:var(--blue-600);font-weight:600;text-decoration:underline} /* summary */ .rk-summary{background:var(--bg-soft);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:1.3rem} .rk-sumrow{display:flex;justify-content:space-between;gap:1rem;padding:.85em 1.1em;border-bottom:1px solid var(--line);font-size:.98rem} .rk-sumrow:last-child{border-bottom:none} .rk-sumrow .k{color:var(--slate-500)} .rk-sumrow .v{color:var(--ink);font-weight:600;text-align:right} /* footer */ .rk-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem clamp(1.2rem,3vw,2rem);border-top:1px solid var(--line);background:var(--bg-soft)} .rk-back{background:none;border:none;color:var(--slate-600);font-weight:600;font-family:"Nunito Sans";cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;gap:.4em;padding:.6em .4em} .rk-back:hover{color:var(--ink)} .rk-back svg{width:18px;height:18px} .rk-foot .spacer{flex:1} .rk-secure{display:flex;align-items:center;gap:.45em;font-size:.85rem;color:var(--slate-500)} .rk-secure svg{width:15px;height:15px;color:var(--green-600)} /* success */ .rk-success{text-align:center;padding:clamp(2rem,5vw,3.2rem)} .rk-success .badge{width:88px;height:88px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 1.4rem;color:var(--green-500)} .rk-success .badge svg{width:46px;height:46px;stroke-width:2.4} .rk-success h3{font-size:1.7rem;margin-bottom:.6rem} .rk-success p{color:var(--slate-500);max-width:42ch;margin:0 auto 1.6rem;font-size:1.05rem} .rk-refbox{display:inline-flex;flex-direction:column;gap:.2rem;background:var(--bg-soft);border:1px dashed var(--line-strong);border-radius:var(--r);padding:1rem 1.8rem;margin-bottom:1.6rem} .rk-refbox span{font-size:.82rem;color:var(--slate-500);text-transform:uppercase;letter-spacing:.08em} .rk-refbox b{font-family:"Nunito Sans";font-size:1.5rem;color:var(--blue-700);letter-spacing:.04em} @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* ── Topbar Rezept-CTA Pill ── */ .tb-notfall{display:inline-flex;align-items:center;gap:.45em;background:transparent;color:#ff6b6b !important;font-weight:700;font-size:.82rem;padding:.28em .6em;border-radius:var(--r-pill);transition:opacity .15s;letter-spacing:.01em;border:1px solid rgba(255,107,107,.4)} .tb-notfall:hover{opacity:.8} .tb-notfall svg{width:13px;height:13px;stroke:#ff6b6b} .tb-rezept{display:inline-flex;align-items:center;gap:.45em;background:transparent;color:#fff !important;font-weight:700;font-size:.82rem;padding:.28em .6em;border-radius:var(--r-pill);transition:opacity .15s;letter-spacing:.01em} .tb-rezept:hover{opacity:.75} .tb-rezept svg{width:13px;height:13px} /* ── Logo nur als Bild, kein Text ── */ .brand-logo-only img,.logo-img{height:60px;width:auto;object-fit:contain;display:block} .brand-logo-only{display:flex;align-items:center;gap:.5rem} /* ── Hero Termin-Button Gradient ── */ .btn-grad{background:linear-gradient(120deg,var(--green-500) 0%,var(--blue-600) 100%);color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(22,104,173,.28)} .btn-grad:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,104,173,.38)} /* Weißer Button für farbige/dunkle Hintergründe (Blog-/Landing-CTA) */ .btn-white{background:#fff;color:var(--blue-700);font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.12)} .btn-white:hover{filter:brightness(1.02);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)} /* Transparenter Outline-Button für dunkle Hintergründe (Hero) */ .btn-clear{background:rgba(255,255,255,.12);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)} .btn-clear:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)} /* ── Reviews Infinity Loop ── */ .reviews-loop{overflow:hidden} .rv-static{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .rv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-sm)} .rv-stars{color:#f0a91e;font-size:1rem} .rv-text{font-size:.95rem;color:var(--slate-600);line-height:1.6;flex:1} .rv-author{font-size:.84rem;color:var(--slate-400);font-weight:600} .rv-nav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.8rem} .rv-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue-600);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .2s} .rv-arrow:hover{border-color:var(--blue-500);transform:translateY(-2px)} .rv-dots{display:flex;gap:.45rem} .rv-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .2s} .rv-dot.active{background:var(--blue-600)} @media(max-width:760px){.rv-static{grid-template-columns:1fr}} /* Mobile: wischbares Bewertungs-Carousel */ .rv-static.rv-swipe{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1rem;scrollbar-width:none;padding-bottom:.3rem} .rv-static.rv-swipe::-webkit-scrollbar{display:none} .rv-static.rv-swipe .rv-card{flex:0 0 86%;scroll-snap-align:center} /* ── Benefit-Blöcke (vor Rezept-Formular) ── */ .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:2.2rem} .benefit-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-sm)} .bc-head{display:flex;align-items:center;gap:.7rem} .bc-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(120deg,var(--green-500),var(--blue-600));color:#fff} .bc-ico svg{width:20px;height:20px} .benefit-card h4{font-size:1.05rem;font-weight:700;color:var(--ink);font-family:"Nunito Sans"} .benefit-card p{font-size:.92rem;color:var(--slate-600);line-height:1.6} .benefit-card p strong{color:var(--ink)} @media(max-width:720px){.benefit-grid{grid-template-columns:1fr}} /* ── Mobile Sticky Bar ── */ body.has-sticky{padding-bottom:76px} .mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(18,36,48,.09);padding:.5rem .9rem .6rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)} .mb-inner{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .mb-btn{display:flex;flex-direction:column;align-items:center;gap:.22rem;padding:.55rem .5rem;border-radius:14px;border:none;font-weight:700;font-size:.72rem;text-align:center;cursor:pointer;font-family:"Nunito Sans",sans-serif} .mb-btn svg{width:22px;height:22px;flex:none} .mb-termin{background:linear-gradient(120deg,var(--green-500) 0%,var(--blue-600) 100%);color:#fff;border:none;overflow:hidden} .mb-rezept{background:var(--blue-soft);color:var(--blue-700);border:1.5px solid var(--blue-600) !important} @media(max-width:900px){.mobile-bar{display:block}} .mobile-bar.visible{transform:translateY(0)} /* ── Topbar Mobil: nur Status ── */ @media(max-width:640px){ .topbar .tb-tel,.topbar .tb-addr,.topbar .tb-rezept{display:none} .topbar .wrap{justify-content:center;padding-block:7px} .topbar .left{justify-content:center} } /* ── Kontakt Karte (ohne E-Mail) ── */ .hours table td:last-child{text-align:right;font-weight:600;color:var(--ink)} /* ── Notfall (eigener Hintergrund) ── */ .notfall-s{background:#fff3f3;border-top:3px solid #c0392b;padding-block:clamp(52px,7vw,96px)} .notfall-s .section-head h2{color:#c0392b} .notfall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .nf-card{background:#fff;border-radius:var(--r-lg);padding:1.3rem;border:1.5px solid #f5c0c0;display:flex;flex-direction:column;gap:.45rem} .nf-card h4 svg{width:18px;height:18px;vertical-align:middle;margin-right:.35em;stroke:currentColor} .nf-card h4{font-size:.96rem;font-weight:700;color:var(--ink)} .nf-num{font-size:1.25rem;font-weight:800;color:#c0392b} .nf-card p{font-size:.84rem;color:var(--slate-500)} .nf-btn{display:inline-flex;align-items:center;gap:.4em;background:#c0392b;color:#fff;border-radius:var(--r-pill);padding:.48em 1em;font-size:.87rem;font-weight:700;margin-top:.3rem;transition:background .15s} .nf-btn:hover{background:#a93226} .nf-btn svg{width:14px;height:14px} @media(max-width:800px){.notfall-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.notfall-grid{grid-template-columns:1fr}} /* ── Liquid Glass Header beim Scrollen ── */ header.site{ background: rgba(255,255,255,0.6); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,0.3); transition: background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s; } header.site.scrolled{ background: rgba(255,255,255,0.75); backdrop-filter: saturate(200%) blur(28px); -webkit-backdrop-filter: saturate(200%) blur(28px); box-shadow: 0 2px 20px rgba(18,36,48,.08), 0 1px 0 rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,0.5); } /* ── Topbar gleichmäßiger Abstand ── */ .topbar .wrap{padding-inline:var(--pad);gap:.8rem} .tb-rezept{border-radius:8px !important;padding:.3em 1em !important;border:1.5px solid rgba(255,255,255,.25)} /* ── Service-Cards: kein Überlap, saubere Icons ── */ .service{overflow:hidden} .service h3{font-size:1.1rem;line-height:1.25;word-break:break-word} .svc-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--blue-600)} .svc-ico.green{background:var(--green-soft);color:var(--green-600)} .svc-ico svg{width:26px;height:26px;stroke-width:1.8} /* ── Öffnungszeiten-Buttons gleichmäßig ── */ .hours .btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem} .hours .btn-row .btn{flex:1;min-width:120px;justify-content:center;min-height:46px;font-size:.96rem} /* ── Notfall-Cards: alles gleich hoch, Text-Alignment ── */ .notfall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:stretch} .nf-card{display:flex;flex-direction:column;gap:.5rem;height:100%} .nf-card h4 svg{width:18px;height:18px;vertical-align:middle;margin-right:.35em;stroke:currentColor} .nf-card h4{font-size:.93rem;font-weight:700;min-height:2.4em;display:flex;align-items:center;gap:.4em} .nf-num{font-size:1.2rem;font-weight:800;color:#c0392b;white-space:nowrap} .nf-card p{font-size:.83rem;color:var(--slate-500);flex:1} .nf-btn{display:flex;align-items:center;justify-content:center;gap:.4em;text-align:center;border-radius:var(--r-pill);padding:.5em 1em;font-size:.87rem;font-weight:700;margin-top:auto;transition:background .15s;width:100%} .nf-btn svg{width:14px;height:14px;flex:none} /* ── Rezept-Formular Fokus-Modus ── */ .rk-focused-overlay{ position:fixed;inset:0;z-index:200; background:rgba(18,36,48,.55); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:1.5rem 1rem 3rem; } .rk-focused-overlay.active{display:flex} .rk-focused-inner{width:100%;max-width:780px;margin:0 auto;position:relative} .rk-close-btn{ position:absolute;top:-48px;right:0; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3); color:#fff;border-radius:10px;padding:.4em .9em; font-size:.9rem;font-weight:600;cursor:pointer; display:flex;align-items:center;gap:.4em; transition:background .15s; } .rk-close-btn:hover{background:rgba(255,255,255,.25)} .rk-close-btn svg{width:16px;height:16px} /* Trigger-Button */ .rk-trigger{ width:100%;padding:1.1rem;background:#fff; border:2px dashed var(--line-strong);border-radius:var(--r-lg); color:var(--slate-500);font-size:1rem;font-weight:500; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6em; transition:border-color .15s,background .15s,color .15s; min-height:70px; } .rk-trigger:hover{border-color:var(--green-500);background:var(--green-soft);color:var(--green-600)} .rk-trigger svg{width:22px;height:22px} @media(max-width:520px){ .notfall-grid{grid-template-columns:1fr 1fr} .rk-focused-overlay{padding:.5rem .5rem 2rem} } /* ── Inline-Formular mit Fokus-Aktivierung ── */ .rk-inline-wrap { position: relative; max-width: 760px; margin: 0 auto; border-radius: var(--r-lg); /* Leichter Preview-Effekt: etwas ausgeblendet */ opacity: .88; transition: opacity .2s; pointer-events: none; /* Formular selbst nicht interaktiv — Shield fängt alles */ } /* Transparenter Klick-Fänger über dem Formular */ .rk-inline-shield { position: absolute; inset: 0; z-index: 10; cursor: pointer; border-radius: var(--r-lg); border: 2px dashed var(--line-strong); background: transparent; transition: border-color .2s, background .2s; } .rk-inline-shield::after { content: 'Klicken zum Ausfüllen'; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--green-500); color: #fff; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: .85rem; padding: .4em 1.1em; border-radius: var(--r-pill); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: var(--shadow); } .rk-inline-wrap:hover .rk-inline-shield { border-color: var(--green-500); background: rgba(31,157,107,.04); } .rk-inline-wrap:hover { opacity: 1; } .rk-inline-wrap:hover .rk-inline-shield::after { opacity: 1; } /* ── Fokus-Overlay überarbeitet ── */ .rk-focused-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(18,36,48,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 2rem 1rem; } .rk-focused-overlay.active { display: flex; } .rk-focused-inner { width: 100%; max-width: 780px; margin: 0 auto; animation: rkFadeIn .22s ease; } @keyframes rkFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Abbrechen-Button UNTER dem Formular, zentriert */ .rk-close-btn-inline { display: inline-flex; align-items: center; gap: .5em; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.35); color: rgba(255,255,255,.9); border-radius: var(--r-pill); padding: .6em 1.4em; font-size: .95rem; font-weight: 600; font-family: 'Nunito Sans', sans-serif; cursor: pointer; transition: background .15s, color .15s; margin-top: .8rem; } .rk-close-btn-inline:hover { background: rgba(255,255,255,.25); color: #fff; } .rk-close-btn-inline svg { width: 16px; height: 16px; } /* alten rk-close-btn nicht mehr benötigt */ .rk-close-btn { display: none; } /* Glassmorphism Button (Step-4-Karte) */ .step4-glass-btn{ background:rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-weight:700; border:1.5px solid rgba(255,255,255,.35) !important; box-shadow:0 4px 16px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25); overflow:visible !important; } .step4-glass-btn:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35); } /* Step-4 Gradient-Karte: border überschreiben */ .step[style*='linear-gradient']{border:none !important} /* Hero-Foto */ .hero-img-wrap{ position:relative;overflow:hidden;border-radius:var(--r-lg); aspect-ratio:4/4.4;height:100%;min-height:380px; } .hero-img{ width:100%;height:100%; object-fit:cover; object-position:60% center; /* Stuhl im Fokus */ display:block; border-radius:var(--r-lg); } /* Mobile: Termin-buchen Button weg, Logo groß */ @media (max-width:980px){ .header-actions .btn-grad,.header-actions .btn-primary{display:none !important} .brand-logo-only img{height:48px !important} } @media (max-width:560px){ .header-actions .btn-grad,.header-actions .btn-primary{display:none !important} .brand-logo-only img{height:44px !important} header.site .wrap{min-height:60px;gap:1rem} } /* iPad-Optimierungen */ @media (min-width:561px) and (max-width:980px){ .hero .wrap{padding-block:3rem 2.5rem} .wrap{padding-inline:1.5rem} .notfall-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} } /* Footer: Platz für Mobile Sticky-Bar */ @media(max-width:900px){ footer.site{padding-bottom:calc(76px + env(safe-area-inset-bottom))} } /* Overflow-Fix Mobile */ @media (max-width:980px){ .wrap{padding-inline:clamp(.9rem, 4vw, 1.5rem)} img, video, svg{max-width:100%} .hero-img-wrap{max-width:100%} .notfall-grid{overflow-x:hidden} .services-grid, .team-stack, .review-grid{overflow-x:hidden} /* Float-Cards im Hero auf Mobile ausblenden (ragen raus) */ .float-card{display:none} } @media (max-width:560px){ .hero-trust{font-size:.8rem;gap:.3rem .6rem;flex-wrap:wrap;white-space:normal} .stars{font-size:.85rem} } @media (max-width:560px){ .eyebrow{white-space:normal;text-align:center} } @media (max-width:560px){ .notfall-grid{grid-template-columns:1fr !important} .nf-card{min-width:0} } /* Leistungen aufklappbar */ .services-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; overflow:hidden; } .services-more > div{min-height:0} .services-more.open{grid-template-rows:1fr} .services-toggle-wrap{display:flex;justify-content:center;margin-top:2rem} .services-toggle{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.8em} .toggle-chevron{width:18px;height:18px;transition:transform .35s ease;flex:none} .services-toggle[aria-expanded="true"] .toggle-chevron{transform:rotate(180deg)} /* ── Blog-Karussell (Endlosschleife) ──────────────────────────────────────── */ .blog-static{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} @media(max-width:860px){.blog-static{grid-template-columns:1fr 1fr}} @media(max-width:560px){.blog-static{grid-template-columns:1fr}} .blog-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:1.6rem;display:flex;flex-direction:column;gap:.7rem; box-shadow:var(--shadow-sm); color:inherit;text-decoration:none; transition:transform .2s,box-shadow .2s,border-color .2s; cursor:pointer; } .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-400)} .blog-tag{ display:inline-block; background:var(--green-soft);color:var(--green-600); font-size:.72rem;font-weight:700; padding:.2em .75em;border-radius:var(--r-pill); text-transform:uppercase;letter-spacing:.05em; width:fit-content; } .blog-card h3{ font-size:1rem;font-weight:700;line-height:1.35;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .blog-card p{ font-size:.88rem;color:var(--slate-500);line-height:1.55; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; flex:1; } .blog-more{ font-size:.88rem;font-weight:600;color:var(--blue-600); margin-top:auto; } /* Thumbnail im Karussell (Bild oder Marken-Verlauf als Fallback) */ .blog-card-thumb{ height:140px;border-radius:12px;margin-bottom:.3rem; background:linear-gradient(120deg,var(--green-500),var(--blue-600)); background-size:cover;background-position:center;flex:none; } /* ── Blog-Übersicht (blog/index.php) ──────────────────────────────────────── */ .blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.3rem} .bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s} .bl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-400)} .bl-thumb{height:170px;background:linear-gradient(120deg,var(--green-500),var(--blue-600));background-size:cover;background-position:center} .bl-body{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .bl-body h3{font-size:1.08rem;font-weight:700;line-height:1.32;color:var(--ink)} .bl-body p{font-size:.9rem;color:var(--slate-500);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1} .bl-meta{font-size:.8rem;color:var(--slate-400);display:flex;gap:.4rem;margin-top:.2rem} /* ── Leistungs-Tabs ─────────────────────────────────────────────────────── */ .svc-tabs{ display:flex;gap:.5rem;margin-bottom:2rem; flex-wrap:wrap; background:var(--bg-soft); padding:.4rem; border-radius:var(--r-lg); border:1px solid var(--line); } .svc-tab{ display:inline-flex;align-items:center;gap:.5em; padding:.6em 1.2em;border-radius:10px; font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:.9rem; color:var(--slate-500);background:transparent; border:none;cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; flex:1;justify-content:center;white-space:nowrap; } .svc-tab svg{width:17px;height:17px;flex:none} .svc-tab:hover{background:#fff;color:var(--ink)} .svc-tab.active{ background:#fff;color:var(--ink); box-shadow:0 2px 8px rgba(18,36,48,.1); } /* ── Tab-Panels ─────────────────────────────────────────────────────────── */ .svc-panel{display:none} .svc-panel.active{display:block} .svc-cat{display:none} /* Mobile: Tabs seitlich scrollbar (Fade + Ruck signalisieren das) + Panels als Swipe-Carousel (zwischen Kategorien wischen, Tabs synchron) */ @media(max-width:640px){ .svc-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)} .svc-tabs::-webkit-scrollbar{display:none} .svc-tab{flex:none;font-size:.94rem;padding:.7em 1.15em} .svc-tab svg{width:19px;height:19px} .svc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start} .svc-track::-webkit-scrollbar{display:none} .svc-panel{display:block;flex:0 0 100%;min-width:0;scroll-snap-align:start} } /* ============================================================ Cookie-Consent – Blur-Glass-Overlay, Fokus-Modal ============================================================ */ .cc-overlay{ position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(18,36,48,.42); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease; } .cc-overlay.cc-open{opacity:1;visibility:visible} html.cc-lock,body.cc-lock{overflow:hidden !important} .cc-modal{ font-family:'Nunito Sans',system-ui,sans-serif; background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%); border:1px solid rgba(255,255,255,.65);width:100%;max-width:560px;max-height:88vh;max-height:88dvh; display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateY(16px) scale(.985);transition:transform .25s ease; } .cc-overlay.cc-open .cc-modal{transform:none} .cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:24px 26px 0;flex:none} .cc-head h3{font-size:20px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em} .cc-x{background:none;border:none;font-size:1.7rem;line-height:1;color:var(--slate-400);cursor:pointer;padding:0 .2rem;border-radius:8px} .cc-x:hover{color:var(--ink)} .cc-tabs{display:flex;gap:2px;margin:16px 26px 0;border-bottom:1px solid var(--line);flex:none} .cc-tab{appearance:none;background:none;border:none;font:inherit;font-weight:700;font-size:14px;color:var(--slate-500); padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s} .cc-tab:hover{color:var(--ink)} .cc-tab.cc-active{color:var(--blue-600);border-bottom-color:var(--blue-600)} .cc-body{flex:1;overflow-y:auto;padding:18px 26px} .cc-body p{font-size:14px;line-height:1.6;color:var(--slate-500);margin:0} .cc-body p+p{margin-top:12px} .cc-body a{color:var(--blue-600);font-weight:600} .cc-panel{display:none} .cc-panel.cc-active{display:block} .cc-cats{display:grid;gap:10px} .cc-cat{border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;align-items:flex-start;gap:12px} .cc-cat-txt{flex:1;min-width:0} .cc-cat-txt b{display:block;font-size:14px;color:var(--ink)} .cc-cat-txt span{font-size:12.5px;color:var(--slate-500);line-height:1.5;display:block;margin-top:3px} /* Schalter (Pill) */ .cc-sw{position:relative;flex:none;width:48px;height:28px;border-radius:999px;background:#c3d0de;cursor:pointer;border:none;padding:0;margin-top:2px;transition:background .22s} .cc-sw::after{content:"";position:absolute;top:50%;left:0;transform:translate(3px,-50%);width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,36,48,.3);transition:transform .22s} .cc-sw.cc-on{background:var(--blue-600)} .cc-sw.cc-on::after{transform:translate(23px,-50%)} .cc-sw.cc-locked{cursor:not-allowed} .cc-sw.cc-locked.cc-on{background:var(--green-500)} /* Aktionen */ .cc-actions{display:flex;gap:10px;flex-wrap:wrap;padding:16px 26px;border-top:1px solid var(--line);flex:none} .cc-btn{appearance:none;border:none;font:inherit;font-weight:700;font-size:14px;padding:12px 16px;border-radius:var(--r-sm);cursor:pointer; flex:1;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;line-height:1.1;text-align:center; transition:transform .15s ease,filter .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease} .cc-btn-grad{background:linear-gradient(120deg,var(--green-500) 0%,var(--blue-600) 100%);color:#fff;box-shadow:0 6px 18px rgba(22,104,173,.22)} .cc-btn-grad:hover{filter:brightness(1.07);transform:translateY(-1px)} .cc-btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong)} .cc-btn-ghost:hover{border-color:var(--blue-600);color:var(--blue-600)} /* Floating Cookie-Icon (unten links) */ .cc-fab{position:fixed;left:18px;bottom:18px;z-index:99990;width:54px;height:54px;border-radius:50%;background:#fff; border:1px solid #e3ebf0;box-shadow:0 6px 20px rgba(18,36,48,.18);align-items:center;justify-content:center;cursor:pointer; color:var(--blue-600,#1668ad);display:none;transition:transform .15s ease,box-shadow .2s ease} .cc-fab.cc-show{display:flex} .cc-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,36,48,.26)} .cc-fab svg{width:26px;height:26px} /* Cookie-Icon weicht der mobilen Sticky-Bar (Termin buchen) aus, wenn sie sichtbar ist */ /* Mobile: Cookie-Button immer ÜBER der Sticky-CTA-Leiste, damit nichts verdeckt wird */ /* Mobile: Cookie-FAB raus aus der Ecke – Einstellungen stehen im Menü-Drawer */ @media(max-width:900px){.cc-fab{display:none!important}} /* ============================================================ Urlaubs-Popup ============================================================ */ .url-ov{position:fixed;inset:0;z-index:99000;display:flex;align-items:center;justify-content:center;padding:1rem; background:rgba(18,36,48,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .url-ov.url-open{opacity:1;visibility:visible} .url-card{font-family:'Nunito Sans',system-ui,sans-serif;background:#fff;max-width:460px;width:100%;border-radius:18px; padding:2.3rem 2rem;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3); transform:translateY(14px) scale(.98);transition:transform .25s ease} .url-ov.url-open .url-card{transform:none} .url-emoji{font-size:3rem;line-height:1;margin-bottom:.5rem} .url-h{font-size:1.5rem;font-weight:800;color:var(--ink,#122430);margin:0 0 .5rem} .url-range{font-size:1.05rem;color:var(--blue-600,#1668ad);font-weight:600;margin:0 0 .9rem} .url-range b{color:var(--ink,#122430)} .url-text{font-size:.95rem;color:var(--slate-500,#5e7585);line-height:1.6;margin:0 0 1.6rem} .url-btn{appearance:none;border:none;font-family:inherit;font-weight:700;font-size:1rem;color:#fff;padding:.85em 2.2em;border-radius:12px;cursor:pointer; background:linear-gradient(120deg,var(--green-500,#85e25c),var(--blue-600,#1668ad));box-shadow:0 6px 18px rgba(22,104,173,.28);transition:filter .2s,transform .15s} .url-btn:hover{filter:brightness(1.07);transform:translateY(-1px)} @media(max-width:600px){.url-card{padding:1.9rem 1.3rem}.url-h{font-size:1.3rem}.url-emoji{font-size:2.6rem}} /* ============================================================ Aktuelles-Popup (Ankündigung mit Bild/Button) ============================================================ */ .nws-ov{position:fixed;inset:0;z-index:98900;display:flex;align-items:center;justify-content:center;padding:1rem; background:rgba(18,36,48,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .nws-ov.nws-open{opacity:1;visibility:visible} .nws-card{position:relative;font-family:'Nunito Sans',system-ui,sans-serif;background:#fff;max-width:460px;width:100%;border-radius:18px; padding:2.1rem 2rem;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3);transform:translateY(14px) scale(.98);transition:transform .25s ease} .nws-ov.nws-open .nws-card{transform:none} .nws-x{position:absolute;top:.6rem;right:.7rem;background:none;border:none;font-size:1.6rem;line-height:1;color:#8298a6;cursor:pointer;padding:.1rem .35rem;border-radius:8px} .nws-x:hover{color:var(--ink,#122430);background:#f2f7fa} .nws-img{display:block;max-width:100%;max-height:220px;width:auto;margin:0 auto 1.2rem;border-radius:12px;object-fit:contain} .nws-text{font-size:1rem;color:var(--slate-600,#46596a);line-height:1.6;margin:0 0 1.5rem} .nws-actions{display:flex;flex-direction:column;gap:.55rem;align-items:center} .nws-btn,.nws-close{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none; color:#fff;border:none;padding:.85em 2.1em;border-radius:12px;background:linear-gradient(120deg,var(--green-500,#85e25c),var(--blue-600,#1668ad));box-shadow:0 6px 18px rgba(22,104,173,.28);transition:filter .2s,transform .15s} .nws-btn:hover,.nws-close:hover{filter:brightness(1.07);transform:translateY(-1px)} .nws-close.nws-close-sec{background:none;color:var(--slate-500,#5e7585);box-shadow:none;font-weight:600;padding:.4em .6em} .nws-close.nws-close-sec:hover{color:var(--ink,#122430);filter:none;transform:none} @media(max-width:600px){.nws-card{padding:1.7rem 1.3rem}.nws-img{max-height:180px}} @media(max-width:600px){ .cc-overlay{padding:0;align-items:flex-end} .cc-modal{max-width:none;max-height:94vh;border-radius:18px 18px 0 0} .cc-actions{flex-direction:column} .cc-tab{font-size:13px;padding:10px 12px} .cc-fab{left:14px;bottom:calc(86px + env(safe-area-inset-bottom));width:44px;height:44px} }