/* ============================================================ Zahnarztpraxis Graf — Shared Design System Wird von allen Seiten geladen (index.html, leistungen.html, jobs.html). Page-spezifische Styles bleiben inline im jeweiligen . ============================================================ */ /* Reset */ *,*::before,*::after{box-sizing:border-box} /* Design Tokens (Single Source of Truth: Farben, Fonts, Spacing) */ :root{ color-scheme:light; --font-body:'Jost','Inter',system-ui,sans-serif; --font-display:'Jost','Inter',sans-serif; --tracking:-.02em; --h1-weight:800; --h2-weight:800; --primary:#276cb0; --primary-deep:#1b4e85; --primary-light:#5b8fc7; --primary-soft:#e6eff7; --accent:#f2b928; --accent-deep:#d99e15; --ink:#1f2933; --ink-strong:#0d1b26; --muted:#6b7785; --line:#e6ecf1; --bg:#f6f9fb; --dark:#0a1929; } /* Base */ html,body{margin:0;padding:0;color-scheme:light} body{ background:#fff;color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; /* verhindert seitliches Scrollen, ohne position:sticky auf der Nav zu brechen */ overflow-x:clip; } @media (prefers-color-scheme: dark){ html,body,.nav,.footer{background-color:initial} } h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--tracking);margin:0} h2{font-size:clamp(30px,3.4vw,44px);font-weight:var(--h2-weight);line-height:1.05;margin:0 0 18px;color:var(--ink-strong)} h2 .accent{color:var(--primary)} /* Eyebrow (Section-Label oben über Headlines) */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:12px;color:var(--primary);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--primary)} /* Kicker (Hero-Pill mit Punkt) */ .kicker{ display:inline-flex;align-items:center;gap:10px;align-self:flex-start; background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(10px); padding:8px 14px;border-radius:999px;font-weight:600;font-size:12.5px; letter-spacing:.04em;margin-bottom:22px;border:1px solid rgba(255,255,255,.18); text-shadow:0 1px 6px rgba(0,0,0,.35); } .kicker::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px rgba(255,255,255,.18)} /* Nav (Sticky Header) */ .nav{ display:flex;align-items:center;justify-content:space-between; padding:18px 40px;border-bottom:1px solid var(--line);background:#fff; position:sticky;top:0;z-index:90; } .logo{display:flex;align-items:center;gap:14px;text-decoration:none} .logo img{height:54px;width:auto;display:block} .version-tag{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px;line-height:1.3;color:var(--muted); padding:4px 9px;border-radius:6px;background:var(--bg); border:1px solid var(--line);white-space:nowrap;letter-spacing:.01em; } .nav-right{display:flex;align-items:center;gap:24px} .nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0} .nav ul a{color:var(--ink);text-decoration:none;font-weight:500;font-size:14.5px} .nav ul a:hover{color:var(--primary)} .nav ul a.active{color:var(--primary);font-weight:600} .nav-mobile-menu{display:none;background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--ink)} /* Nav-Dropdown (für Home → Home 1 / Home 2 / Home 3) */ .nav ul li.has-dropdown{position:relative} .nav ul li.has-dropdown > a{ cursor:pointer;display:inline-flex;align-items:center;gap:5px; user-select:none; } .nav ul li.has-dropdown > a::after{ content:"";width:6px;height:6px; border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .15s; } .nav ul li.has-dropdown.open > a::after{ transform:rotate(225deg) translate(-1px,-1px); } .nav ul .dropdown{ position:absolute;top:100%;left:-12px;margin:8px 0 0;padding:6px; background:#fff;border:1px solid var(--line);border-radius:12px; min-width:148px;list-style:none;z-index:100; box-shadow:0 18px 40px -16px rgba(0,0,0,.18),0 6px 12px -6px rgba(0,0,0,.08); opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .15s,transform .15s,visibility .15s; } .nav ul li.has-dropdown.open .dropdown{ opacity:1;visibility:visible;transform:translateY(0); } .nav ul .dropdown li{display:block;margin:0} .nav ul .dropdown a{ display:block;padding:8px 12px;border-radius:8px; font-size:14px;color:var(--ink);font-weight:500;text-decoration:none; } .nav ul .dropdown a:hover{background:var(--bg);color:var(--primary)} .nav ul .dropdown a.active{color:var(--primary);font-weight:600;background:var(--primary-soft)} /* Buttons */ .btn{ background:var(--primary);color:#fff;padding:11px 20px;border-radius:999px; font:600 14px var(--font-body);border:0;cursor:pointer; display:inline-flex;align-items:center;gap:8px;transition:background .2s; text-decoration:none; } .btn:hover{background:var(--primary-deep)} .btn-ghost{ background:transparent;color:var(--ink);border:1.5px solid var(--line); padding:11px 20px;border-radius:999px;font:600 14px var(--font-body);cursor:pointer; } /* Deaktivierte Buttons / FABs (z.B. Termin-Buchen, kommt später per Tool) */ .btn.disabled, .fab-main.disabled{ opacity:0.55;cursor:not-allowed;pointer-events:none; } /* CTA Bar (gelber Banner mit Headline + Button) */ .cta-bar{ background:var(--accent);color:var(--primary-deep); display:flex;align-items:center;justify-content:space-between;gap:24px; padding:32px 48px;flex-wrap:wrap; } .cta-bar h3{margin:0;font-size:26px;font-weight:800;font-family:var(--font-display)} .cta-bar p{margin:4px 0 0;font-size:15px;opacity:.85} .cta-bar .btn{background:var(--primary-deep);color:#fff} .cta-bar .btn:hover{background:#000} /* Divider — schmaler blauer Strich vor dem Footer (mit Bottom-Abstand) */ .divider{height:6px;background:var(--primary);margin:40px 0 0} /* Map-Heading — schwarze Überschrift über dem Map-Block */ .map-heading{ padding-block:80px 32px; padding-inline:max(48px, calc(50% - 620px)); } .map-heading h2{margin:0} @media (max-width:880px){ .map-heading{padding-block:48px 24px;padding-inline:20px} } /* Footer */ .footer{ background:#fff;color:var(--ink);padding:30px 48px 16px; display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } /* Jede Spalte als Karte im Stil der Bewertungskarten, mittig zentriert */ .footer > div:not(.footer-bottom){ background:#fff;border:1px solid var(--line);border-radius:14px; padding:22px;text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; } .footer-bottom{padding-inline:22px} .footer h4{color:var(--ink-strong);margin:0 0 8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-display)} .footer p,.footer li{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 6px} .footer ul{list-style:none;padding:0;margin:0} .footer img{height:34px;width:auto;margin-bottom:10px;display:block} .footer .footer-hours{margin-inline:auto} .footer a{color:inherit;text-decoration:none} .footer a:hover{color:var(--primary)} .footer .tel-icon{ width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; display:inline-block;vertical-align:-1px;margin-right:5px;color:var(--primary); } .footer .footer-notdienst-tel a{font-weight:700;color:var(--ink-strong)} .footer .footer-notdienst-tel a:hover{color:var(--primary)} .footer p a:not([href^="tel"]){text-decoration:underline} .footer-bottom{ grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px; display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;flex-wrap:wrap;gap:8px; } /* Footer-Öffnungszeiten Tabelle */ .footer-hours{ border-collapse:collapse; font-size:12px;line-height:1.5;color:var(--muted); font-variant-numeric:tabular-nums; } .footer-hours thead th{ font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:600; padding:0 12px 5px 0;text-align:left;white-space:nowrap; } .footer-hours thead th:last-child{padding-right:0} .footer-hours tbody th{ font-weight:700;color:var(--ink-strong); text-align:left;padding:2px 12px 2px 0;font-size:12px; } .footer-hours td{padding:2px 12px 2px 0;white-space:nowrap} .footer-hours td:last-child{padding-right:0} .footer-hours .closed{opacity:.65} /* ============================================================ Dev-Gate (Login Overlay) — wird via assets/auth.js eingespielt ============================================================ */ html.auth-locked{overflow:hidden} html.auth-locked body > *:not(.auth-overlay){visibility:hidden} .auth-overlay{ position:fixed;inset:0;z-index:99999; background:var(--bg); display:flex;align-items:center;justify-content:center; padding:24px; } .auth-card{ background:#fff;border:1px solid var(--line); border-radius:18px;padding:40px 36px; width:100%;max-width:380px; box-shadow:0 30px 60px -20px rgba(0,0,0,.18); display:flex;flex-direction:column;gap:14px; text-align:center; } .auth-card img{height:48px;width:auto;align-self:center;margin:0 0 8px} .auth-card h1{ font-size:22px;color:var(--ink-strong);margin:0; font-weight:var(--h2-weight);letter-spacing:var(--tracking); font-family:var(--font-display); } .auth-card > p{ font-size:14px;color:var(--muted);margin:0 0 8px;line-height:1.55; } .auth-card label{ display:flex;flex-direction:column;gap:6px; text-align:left;font-size:13px;font-weight:600;color:var(--ink-strong); } .auth-card input{ border:1.5px solid var(--line);border-radius:10px; padding:12px 14px;font:500 15px var(--font-body); color:var(--ink-strong);background:#fff; transition:border-color .15s; } .auth-card input:focus{outline:none;border-color:var(--primary)} .auth-card button{ background:var(--primary);color:#fff; border:0;border-radius:999px; padding:12px 22px;font:600 15px var(--font-body); cursor:pointer;transition:background .2s; margin-top:6px; } .auth-card button:hover{background:var(--primary-deep)} .auth-error{color:#c0392b;font-weight:500;margin:4px 0 0;font-size:13.5px} /* Sticky FABs (Anrufen · Termin · Scroll-to-Top, unten rechts) */ .sticky-fab{ position:fixed;right:32px;bottom:115px; z-index:120;display:flex;flex-direction:column;align-items:center;gap:14px; } .sticky-fab .fab-call, .sticky-fab .fab-main, .sticky-fab .fab-top{ background:var(--primary);color:#fff; width:52px;height:52px;border-radius:999px;border:0;cursor:pointer; display:grid;place-items:center; box-shadow:0 18px 36px -8px rgba(15,111,157,.45),0 6px 14px -4px rgba(0,0,0,.18); transition:transform .2s, box-shadow .2s, opacity .25s; text-decoration:none; } .sticky-fab .fab-call:hover, .sticky-fab .fab-main:hover, .sticky-fab .fab-top:hover{ transform:translateY(-2px) scale(1.06); box-shadow:0 22px 44px -10px rgba(15,111,157,.55); } .sticky-fab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sticky-fab .fab-top{ opacity:0;pointer-events:none;transform:translateY(8px) scale(.92); } .sticky-fab.show-top .fab-top{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)} .sticky-fab .fab-top svg{width:20px;height:20px;stroke-width:2.2} /* Responsive — globale Komponenten ≤880px */ @media (max-width:880px){ .nav{padding:14px 16px} .logo img{height:38px} .version-tag{display:none} .nav ul, .nav-right .btn{display:none} .nav-mobile-menu{display:block} /* Hamburger-Menü geöffnet → Dropdown unter der Nav */ .nav.is-open ul{ display:flex;flex-direction:column; position:absolute;top:100%;left:0;right:0; background:#fff;border-bottom:1px solid var(--line); padding:14px 20px 18px;gap:0;margin:0; box-shadow:0 22px 40px -18px rgba(0,0,0,.18); z-index:60;list-style:none; } .nav.is-open ul li{margin:0} .nav.is-open ul a{ display:block;padding:12px 4px;font-size:16px; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); } .nav.is-open ul li:last-child a{border-bottom:0} .nav-mobile-menu{transition:transform .2s, color .2s} .nav.is-open .nav-mobile-menu{color:var(--primary);transform:rotate(90deg)} .cta-bar{padding:24px 20px;flex-direction:column;align-items:flex-start} .cta-bar h3{font-size:21px} .cta-bar .btn{width:100%;justify-content:center} .footer{grid-template-columns:1fr;gap:18px;padding:26px 20px 14px} .footer-bottom{flex-direction:column;align-items:flex-start} .sticky-fab{right:18px;bottom:95px;gap:12px} .sticky-fab .fab-call, .sticky-fab .fab-main, .sticky-fab .fab-top{width:46px;height:46px} .sticky-fab svg{width:20px;height:20px} } /* ============================================================ Cookie-Banner / Consent-Modal / Map-Placeholder ============================================================ */ .cookie-banner{ position:fixed;left:16px;right:16px;bottom:16px; background:#fff;border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px -20px rgba(0,0,0,.35), 0 6px 14px -4px rgba(0,0,0,.18); z-index:9999;max-width:1080px;margin:0 auto; padding:18px 22px;font-family:var(--font-body); transform:translateY(20px);opacity:0; transition:transform .25s ease, opacity .25s ease; } .cookie-banner.visible{transform:translateY(0);opacity:1} .cookie-banner-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .cookie-banner-text{flex:1;min-width:280px} .cookie-banner-text strong{ display:block;font-family:var(--font-display);font-weight:700; color:var(--ink-strong);font-size:16px;margin-bottom:4px;letter-spacing:var(--tracking); } .cookie-banner-text p{margin:0;font-size:14px;color:var(--ink);line-height:1.5} .cookie-banner-text a{color:var(--primary);text-decoration:underline} .cookie-banner-text a:hover{color:var(--primary-deep)} .cookie-banner-actions{display:flex;gap:8px;flex-wrap:wrap} .cb-btn{ border:0;padding:10px 18px;border-radius:999px; font:600 13.5px var(--font-body);cursor:pointer; transition:background .15s, color .15s, border-color .15s; text-decoration:none;display:inline-flex;align-items:center;justify-content:center; } .cb-btn-primary{background:var(--primary);color:#fff} .cb-btn-primary:hover{background:var(--primary-deep)} .cb-btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line)} .cb-btn-secondary:hover{border-color:var(--primary);color:var(--primary)} /* Modal */ .cookie-modal{ position:fixed;inset:0;z-index:10000; display:flex;align-items:center;justify-content:center; padding:24px; } .cookie-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)} .cookie-modal-content{ position:relative;background:#fff;border-radius:22px; max-width:540px;width:100%;max-height:90vh;overflow-y:auto; padding:32px;font-family:var(--font-body); box-shadow:0 40px 80px -20px rgba(0,0,0,.4); } .cookie-modal-close{ position:absolute;top:14px;right:14px; width:36px;height:36px;border-radius:999px; background:var(--bg);border:0;cursor:pointer; font-size:16px;color:var(--muted); display:grid;place-items:center; } .cookie-modal-close:hover{background:var(--line)} .cookie-modal-content h2{ margin:0 0 8px;font-family:var(--font-display); font-size:22px;color:var(--ink-strong); letter-spacing:var(--tracking);font-weight:700; } .cookie-modal-intro{ color:var(--muted);font-size:14px;line-height:1.55; margin:0 0 20px; } .cookie-category{border-top:1px solid var(--line);padding:18px 0} .cookie-category-head{display:flex;align-items:center;gap:12px;margin-bottom:6px} .cookie-category-head strong{ font-family:var(--font-display);color:var(--ink-strong);font-size:15.5px; } .cookie-category p{ margin:0;padding-left:54px; font-size:13.5px;color:var(--muted);line-height:1.55; } .cookie-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0} .cookie-switch input{opacity:0;width:0;height:0;position:absolute} .cookie-switch-slider{ position:absolute;cursor:pointer;inset:0; background:#cdd6dd;border-radius:999px; transition:background .2s; } .cookie-switch-slider::before{ content:"";position:absolute;height:18px;width:18px; left:3px;bottom:3px;background:#fff;border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); } .cookie-switch input:checked + .cookie-switch-slider{background:var(--primary)} .cookie-switch input:checked + .cookie-switch-slider::before{transform:translateX(18px)} .cookie-switch input:disabled + .cookie-switch-slider{opacity:.55;cursor:not-allowed} .cookie-modal-actions{ display:flex;gap:8px;flex-wrap:wrap; margin-top:18px;padding-top:18px; border-top:1px solid var(--line); } .cookie-modal-actions .cb-btn{flex:1;justify-content:center;min-width:140px} /* Map placeholder (vor Consent) */ .map-placeholder{ width:100%;min-height:460px;background:var(--bg); border-top:1px solid var(--line);border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:center; text-align:center;padding:32px; } .map-placeholder-content{max-width:380px} .map-placeholder-icon{ width:56px;height:56px;border-radius:16px;background:var(--primary-soft); color:var(--primary);display:grid;place-items:center;margin:0 auto 16px; } .map-placeholder-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .map-placeholder-content h4{ margin:0 0 6px;font-family:var(--font-display);font-size:18px;color:var(--ink-strong);font-weight:700; } .map-placeholder-content p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.55} .map-placeholder-content button{ background:var(--primary);color:#fff; border:0;padding:10px 22px;border-radius:999px; font:600 13.5px var(--font-body);cursor:pointer; transition:background .15s; } .map-placeholder-content button:hover{background:var(--primary-deep)} @media (max-width:880px){ .cookie-banner{padding:14px 16px;left:10px;right:10px;bottom:10px;border-radius:14px} .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:10px} .cookie-banner-text{min-width:0} .cookie-banner-text strong{font-size:14px;margin-bottom:2px} .cookie-banner-text p{font-size:12.5px;line-height:1.45} .cookie-banner-actions{gap:6px} .cookie-banner-actions .cb-btn{flex:1;justify-content:center;padding:9px 8px;font-size:12.5px;white-space:nowrap} .cookie-modal-content{padding:24px 18px} .cookie-modal-actions{flex-direction:column} .cookie-modal-actions .cb-btn{width:100%;min-width:0} .map-placeholder{min-height:340px;padding:24px} } /* ============================================================ Block-Design — Inhalte auf max. 1240px breit zentriert. Pro Seite via aktiviert. ============================================================ */ @media (min-width:881px){ body.block .nav{padding-inline:max(40px, calc(50% - 620px))} body.block .hero, body.block .page-hero{ max-width:1240px;margin:24px auto 0; border-radius:18px; } body.block .info-strip{margin-inline:max(56px, calc(50% - 620px))} body.block .intro, body.block .testimonials{ padding-inline:max(48px, calc(50% - 620px)); } body.block .team-image{max-width:1240px;margin-inline:auto;border-radius:18px} /* team-intro hat eigene padding:48px — wir verschieben sie so, dass ihr Inhalt mit der 1240px-Säule fluchtet (50% - 620 - 48 = 50% - 668) */ body.block .team-intro{margin-inline-start:max(0px, calc(50% - 668px))} body.block .map-section{ max-width:1240px;margin:0 auto; border-radius:18px;overflow:hidden; } body.block .map-section .map-card{right:32px} body.block .footer{padding-inline:max(48px, calc(50% - 620px))} } @media (max-width:880px){ body.block .hero, body.block .page-hero{ /* width:auto verhindert Overflow durch width:100% + margin-inline-Kombi */ width:auto;margin-inline:16px;border-radius:14px; } }