/* ===================================================================== CARCHECK Direkt Termin – Button mit Doming- (Kuppel-) und Glaseffekt Einbau: Größe: über --cct-w (Standard 340px), z. B. style="--cct-w:420px" ===================================================================== */ .cc-termin{ --cct-w:340px; /* Breite des Buttons */ --cct-blue:#03A3FA; /* Logo-Blau für Aura und Glasrand */ --cct-r:clamp(14px,calc(var(--cct-w) * .065),28px); /* Eckenradius wächst mit der Breite */ --cct-shadow-base: inset 0 1.5px 1px rgba(255,255,255,1), /* Lichtkante oben */ inset 0 -1px 0 rgba(255,255,255,.55), /* Lichtreflex unten (Glaskante) */ inset 0 -7px 14px rgba(6,58,118,.20), /* Wölbung: Schatten zur Unterkante */ inset 0 0 0 1px rgba(255,255,255,.7), /* innerer Glasrand */ inset 0 0 26px rgba(6,58,118,.11), /* Linsen-Vignette */ inset 0 -14px 28px -10px rgba(6,58,118,.16), /* Wölbung: tiefer Schatten unten */ 0 1px 0 rgba(255,255,255,.45), 0 3px 3px rgba(4,18,36,.22), /* Kontaktschatten */ 0 0 20px 3px rgba(3,163,250,.36), /* Aura */ 0 12px 28px rgba(3,163,250,.28); --cct-shadow-hover: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.55), inset 0 -7px 14px rgba(6,58,118,.18), inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 24px rgba(6,58,118,.06), 0 1px 0 rgba(255,255,255,.45), 0 5px 5px rgba(4,18,36,.22), 0 0 34px 10px rgba(3,163,250,.55), 0 18px 36px rgba(3,163,250,.38); --cct-shadow-active: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 -4px 10px rgba(6,58,118,.22), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 3px 10px rgba(6,58,118,.16), /* gedrückt: Schatten von oben */ 0 1px 2px rgba(4,18,36,.25), 0 0 14px 2px rgba(3,163,250,.30), 0 6px 16px rgba(3,163,250,.22); position:relative;display:inline-block;box-sizing:border-box; width:min(100%,var(--cct-w)); border-radius:var(--cct-r); border:1px solid rgba(3,130,210,.50); text-decoration:none;cursor:pointer; isolation:isolate;overflow:hidden; -webkit-tap-highlight-color:transparent; /* Glas: leicht durchscheinend, Hintergrund wird weichgezeichnet */ background: radial-gradient(120% 90% at 50% 118%,rgba(3,163,250,.22) 0%,rgba(3,163,250,0) 56%), radial-gradient(130% 110% at 50% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 62%), linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(240,247,253,.90) 48%,rgba(206,225,245,.90) 100%); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:var(--cct-shadow-base); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease; will-change:transform; } .cc-termin > picture{display:block} .cc-termin__bild{ position:relative;z-index:1;display:block; width:90%;height:auto;margin:4.4% auto 4.6%; -webkit-user-drag:none;user-select:none;pointer-events:none; filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)) drop-shadow(0 2px 4px rgba(6,58,118,.16)); } /* Doming: Glanzkuppel über dem Motiv – oben hell, läuft nach unten und zu den Seiten weich aus */ .cc-termin::before{ content:"";position:absolute;z-index:2;pointer-events:none; left:1px;right:1px;top:1px;height:54%; border-radius:calc(var(--cct-r) - 1px) calc(var(--cct-r) - 1px) 50% 50% / calc(var(--cct-r) - 1px) calc(var(--cct-r) - 1px) 32% 32%; background: radial-gradient(48% 70% at 22% 10%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 72%), /* Glanzpunkt links oben */ linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.30) 62%,rgba(255,255,255,.10) 100%); /* Kuppelreflex mit weicher, gewölbter Unterkante */ -webkit-mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); transition:opacity .28s; } /* Lichtstreifen, der über die Kuppel läuft */ .cc-termin::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.62) 50%,transparent 60%) no-repeat; background-size:300% 100%;background-position:100% 0; } .cc-termin:hover,.cc-termin:focus-visible{ transform:translateY(-2px) scale(1.012); box-shadow:var(--cct-shadow-hover); animation:none; } .cc-termin:active{ transform:translateY(1px) scale(.985); box-shadow:var(--cct-shadow-active); transition-duration:.08s; } .cc-termin:active::before{opacity:.55} .cc-termin:focus-visible{outline:3px solid var(--cct-blue);outline-offset:4px} @media (prefers-reduced-motion:no-preference){ .cc-termin{animation:cct-aura 3.4s ease-in-out infinite} .cc-termin::after{animation:cct-glanz 7s 1.6s cubic-bezier(.4,0,.2,1) infinite} .cc-termin:hover::after,.cc-termin:focus-visible::after{animation:cct-glanz-sofort .85s cubic-bezier(.4,0,.2,1) forwards} } @keyframes cct-aura{ 0%,100%{box-shadow:var(--cct-shadow-base)} 50%{box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.55), inset 0 -7px 14px rgba(6,58,118,.20), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 0 24px rgba(6,58,118,.08), 0 1px 0 rgba(255,255,255,.45), 0 3px 3px rgba(4,18,36,.22), 0 0 34px 11px rgba(3,163,250,.58), 0 14px 32px rgba(3,163,250,.38)} } @keyframes cct-glanz{0%{background-position:100% 0}13%{background-position:0 0}100%{background-position:0 0}} @keyframes cct-glanz-sofort{0%{background-position:100% 0}100%{background-position:0 0}} /* Dunkler Hintergrund (Hero / Titelbild): etwas mehr Glas, kräftigere Aura */ .cc-termin--dunkel{ border-color:rgba(120,205,255,.55); background: radial-gradient(120% 90% at 50% 118%,rgba(3,163,250,.30) 0%,rgba(3,163,250,0) 56%), radial-gradient(130% 110% at 50% 28%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 62%), linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(236,245,253,.84) 48%,rgba(196,219,243,.84) 100%); } /* ===================================================================== Kopfbereich der Startseite Handy und Tablet (bis 1000 px): schlanker Knopf „Direkt Termin“ (weiße Glas-Pille mit Kalender-Symbol) PC (ab 1001 px): der Glas-Button mit Logo, verkleinert auf Kopfhöhe ===================================================================== */ .hdr-termin{display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.42rem .9rem .42rem .6rem;border-radius:14px; border:1px solid rgba(3,130,210,.5);text-decoration:none;white-space:nowrap;color:#0B2D59; font:700 1.04rem/1 var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif);letter-spacing:.005em; background:radial-gradient(130% 110% at 50% 20%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFFFF 0%,#E6F0FA 100%); box-shadow:inset 0 1.5px 1px #fff,inset 0 -5px 10px rgba(6,58,118,.14),inset 0 0 0 1px rgba(255,255,255,.7),0 2px 5px rgba(4,18,36,.28),0 0 14px rgba(3,163,250,.34); -webkit-tap-highlight-color:transparent;transition:transform .2s,box-shadow .2s} .hdr-termin svg{display:block;width:1.75rem;height:1.75rem;flex:none} .hdr-termin b{font-weight:inherit;color:#D7141A} .hdr-termin:active{transform:translateY(1px) scale(.98)} .hdr-termin:focus-visible{outline:3px solid #03A3FA;outline-offset:3px} @media (prefers-reduced-motion:no-preference){.hdr-termin{animation:hdr-termin-puls 3.4s ease-in-out infinite}} @keyframes hdr-termin-puls{0%,100%{box-shadow:inset 0 1.5px 1px #fff,inset 0 -5px 10px rgba(6,58,118,.14),inset 0 0 0 1px rgba(255,255,255,.7),0 2px 5px rgba(4,18,36,.28),0 0 12px rgba(3,163,250,.3)} 50%{box-shadow:inset 0 1.5px 1px #fff,inset 0 -5px 10px rgba(6,58,118,.14),inset 0 0 0 1px rgba(255,255,255,.7),0 2px 5px rgba(4,18,36,.28),0 0 22px 4px rgba(3,163,250,.52)}} @media (max-width:380px){.hdr-termin{padding:.38rem .7rem .38rem .5rem;font-size:.96rem}.hdr-termin svg{width:1.55rem;height:1.55rem}} @media (min-width:1001px){.hdr-termin{display:none}} .hdr-termin-pc{display:none} @media (min-width:1001px){ .hdr-termin-pc{--cct-w:150px;display:inline-block;flex:none; --cct-shadow-base:inset 0 1.5px 1px #fff,inset 0 -1px 0 rgba(255,255,255,.55),inset 0 -7px 14px rgba(6,58,118,.20),inset 0 0 0 1px rgba(255,255,255,.7),0 2px 4px rgba(4,18,36,.25),0 0 14px 2px rgba(3,163,250,.34)} } /* ===================================================================== Schnellkontakt-Leiste unten (Handy): vierter Knopf „Termin“ Weiße Glas-Pille wie der Knopf im Kopfbereich, mit blauer Aura. Symbol: kleines Kalenderblatt mit dem heutigen Tag (wie das Kalender- Symbol auf dem Handy) und rotem Haken, der sich alle paar Sekunden neu „stempelt“. Das HTML setzt /includes/css-inline.php automatisch in jede Seite mit der Leiste (
) ein. ===================================================================== */ @media (max-width:760px){ .cta-bar.cta-bar--termin{grid-template-columns:1fr 1.15fr 1fr 1fr;gap:.4rem} .cta-bar__termin{color:#0B2D59;border:1px solid rgba(3,130,210,.5); background:radial-gradient(130% 110% at 50% 20%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFFFF 0%,#E6F0FA 100%); box-shadow:inset 0 1.5px 1px #fff,inset 0 -5px 10px rgba(6,58,118,.14),inset 0 0 0 1px rgba(255,255,255,.7),0 2px 5px rgba(4,18,36,.22),0 0 12px rgba(3,163,250,.3)} .cta-bar__termin:hover{background:radial-gradient(130% 110% at 50% 20%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFFFF 0%,#D9E9F9 100%)} /* Kalenderblatt */ .ctb-kal{position:relative;flex:none;display:flex;flex-direction:column;width:1.55rem;height:1.55rem;margin-top:.12rem;border-radius:5px;background:#fff; box-shadow:inset 0 0 0 1.5px #0A5FBF,0 1px 2px rgba(6,58,118,.2)} .ctb-kal__kopf{position:relative;flex:none;height:.5rem;border-radius:4px 4px 0 0;background:#0A5FBF} .ctb-kal__kopf::before,.ctb-kal__kopf::after{content:"";position:absolute;top:-.18rem;width:.17rem;height:.42rem;border-radius:2px;background:#8795A6;box-shadow:0 0 0 1px #fff} .ctb-kal__kopf::before{left:.3rem} .ctb-kal__kopf::after{right:.3rem} .ctb-kal__tag{flex:1;display:flex;align-items:center;justify-content:center;padding:1px .12rem 0 0;color:#0B2D59;letter-spacing:-.03em; font:800 .8rem/1 var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif)} /* roter Haken rechts unten */ .ctb-kal__ok{position:absolute;right:-.44rem;bottom:-.38rem;width:.8rem;height:.8rem;border-radius:50%;background:#D7141A; box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3);transform-origin:50% 50%} .ctb-kal__ok::after{content:"";position:absolute;left:.27rem;top:.11rem;width:.18rem;height:.38rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} } /* Schmale Handys: vier Knöpfe nebeneinander passen nur mit Symbol über dem Text */ @media (max-width:479px){ body:has(.cta-bar--termin){padding-bottom:4.6rem} .cta-bar.cta-bar--termin{grid-template-columns:repeat(4,1fr);gap:.35rem;padding-top:.35rem} .cta-bar.cta-bar--termin a{flex-direction:column;gap:.18rem;min-height:3.05rem;padding:.26rem .1rem;font-size:.98rem} } @media (max-width:359px){ .cta-bar.cta-bar--termin a{font-size:.9rem} } @media (max-width:760px) and (prefers-reduced-motion:no-preference){ .cta-bar__termin{animation:hdr-termin-puls 3.4s ease-in-out infinite} .ctb-kal__ok{animation:ctb-stempel 3s cubic-bezier(.34,1.56,.64,1) 1.5s infinite} } /* Haken „blinkt“ alle drei Sekunden: kurz weg, dann mit rotem Lichtring neu gestempelt */ @keyframes ctb-stempel{0%,58%{transform:scale(1);box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3)} 64%{transform:scale(0);box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3)} 74%{transform:scale(1.22);box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(215,20,26,.3),0 1px 3px rgba(0,0,0,.3)} 88%,100%{transform:scale(1);box-shadow:0 0 0 2px #fff,0 0 0 0 rgba(215,20,26,0),0 1px 3px rgba(0,0,0,.3)}} @media (prefers-reduced-motion:reduce){ .cta-bar__termin,.cta-bar__termin *{animation:none} } /* Lichtstreifen („Glanz“) wie beim WhatsApp-Knopf, aber als eine Welle über alle vier Knöpfe: läuft alle gut vier Sekunden von links nach rechts über die Leiste. Auf den hellen Knöpfen (Rückruf, Termin) wäre weißes Licht unsichtbar, dort ist es leicht blau. */ @media (max-width:760px){ .cta-bar.cta-bar--termin a[href]::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%) 100% 0/300% 100% no-repeat; animation:ctb-glanz 4.2s ease-in-out 1.2s infinite} .cta-bar.cta-bar--termin a[href]:nth-child(2)::after{animation-delay:1.55s} .cta-bar.cta-bar--termin a[href]:nth-child(3)::after{animation-delay:1.9s} .cta-bar.cta-bar--termin a[href]:nth-child(4)::after{animation-delay:2.25s} .cta-bar.cta-bar--termin a[href*="rueckruf"]::after,.cta-bar.cta-bar--termin a.cta-bar__termin::after{ background-image:linear-gradient(105deg,transparent 40%,rgba(60,170,255,.5) 50%,transparent 60%)} } @media (max-width:760px) and (prefers-color-scheme:dark){ .cta-bar.cta-bar--termin a[href*="rueckruf"]::after{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%)} } @keyframes ctb-glanz{0%{background-position:100% 0}20%,100%{background-position:0 0}} @media (prefers-reduced-motion:reduce){ .cta-bar.cta-bar--termin a[href]::after{animation:none} }