/* Baaken 39 – Hair by Patrick Lutz Nachbau der Divi-Seite (Stand 10/2026) ohne Divi: gleiche Abschnitte, Farben, Schriften, Trenner und Einblend-Animationen. Werte stammen aus altbestand/css/ (Divi-Cache der alten Seite). */ @font-face { font-family: "Open Sans"; font-weight: 300; font-display: swap; src: url("/fonts/open-sans-latin-300-normal.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); } :root { --creme: #fff9f3; --schiefer: #353d40; --fuss: #3c3d41; --text: #666; --dunkel: #333; --weiss: #fff; --zeile: 1080px; --kopf-h: 72px; } @media (max-width: 980px) { :root { --kopf-h: 64px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf-h); overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--creme); color: var(--text); font: 400 14px/1.7 "Open Sans", Arial, sans-serif; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } picture { display: contents; } a { color: inherit; } h1, h2, h3 { margin: 0; color: var(--dunkel); font-weight: 500; line-height: 1.2; } p { margin: 0 0 1em; } figure { margin: 0; } .icon { width: 1em; height: 1em; flex: none; } .unsichtbar { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 8px; background: var(--schiefer); color: var(--weiss); padding: 8px 14px; z-index: 200; } .skip:focus { left: 8px; } :focus-visible { outline: 2px solid var(--schiefer); outline-offset: 3px; } /* Knöpfe wie Divi: Rahmen 2px, eckig, Open Sans 20px, Pfeil beim Hover */ .knopf { position: relative; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 1em; border: 2px solid var(--dunkel); border-radius: 3px; background: transparent; color: var(--dunkel); font: 400 20px/1.7 "Open Sans", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 0.3s, padding 0.3s; } .knopf::after { content: "›"; position: absolute; right: 0.6em; font-size: 1.2em; line-height: 1; opacity: 0; transition: opacity 0.3s; } .knopf:hover { background: rgba(0, 0, 0, 0.05); padding-right: 2em; } .knopf:hover::after { opacity: 1; } .knopf--hell { color: var(--weiss); border-color: var(--weiss); } .knopf--hell:hover { background: rgba(255, 255, 255, 0.2); } .knopf--icon .icon { font-size: 0.85em; } .knopf--klein { font-size: 15px; } /* ---------- Kopf (Theme-Builder-Header) ---------- */ .kopf { position: sticky; top: 0; z-index: 90; background: var(--creme); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); } .kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 30px; min-height: var(--kopf-h); } .kopf__logo img { height: 52px; width: auto; } .kopf__nav { display: flex; align-items: center; gap: 20px; font: 400 16px/1 "Poppins", Arial, sans-serif; color: #383838; } .kopf__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; } .kopf__link .icon { font-size: 18px; } .kopf__link:hover { color: #000; } .kopf__kontakt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 25px 8px 22px; background: rgba(53, 61, 64, 0.85); color: var(--weiss); text-decoration: none; border-radius: 3px; transition: background-color 0.3s; } .kopf__kontakt:hover { background: #000; } .kopf__menue { display: none; } @media (max-width: 980px) { .kopf__innen { padding: 10px 20px; min-height: 64px; } .kopf__logo img { height: 44px; } .kopf__menue { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; z-index: 120; } .kopf__menue span, .kopf__menue span::before, .kopf__menue span::after { display: block; width: 24px; height: 2px; background: #383838; position: relative; transition: transform 0.3s, background-color 0.3s; } .kopf__menue span::before, .kopf__menue span::after { content: ""; position: absolute; left: 0; } .kopf__menue span::before { top: -7px; } .kopf__menue span::after { top: 7px; } /* Kein Vollbild-Menü mehr: der Hamburger öffnet das Kontakt-Fenster */ .kopf__nav { display: none; } } /* ---------- Bildslider (Divi Fullwidth Slider, 90vh, Auto 6 s, Überblenden) ---------- */ .slider { position: relative; height: 90vh; min-height: 420px; overflow: hidden; background: var(--schiefer); } .slider__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider__bild.ist-aktiv { opacity: 1; z-index: 1; } .slider__bild img { width: 100%; height: 100%; object-fit: cover; } .slider__pfeil { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; background: none; color: var(--weiss); font-size: 48px; cursor: pointer; opacity: 0; transition: opacity 0.3s, transform 0.3s; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .slider__pfeil--zurueck { left: 22px; transform: translateX(-20px); } .slider__pfeil--weiter { right: 22px; transform: translateX(20px); } .slider:hover .slider__pfeil, .slider__pfeil:focus-visible { opacity: 1; transform: none; } .slider__punkte { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; justify-content: center; gap: 0; } /* Tippfläche 24 px, sichtbar bleibt der 7-px-Punkt (::before) */ .slider__punkte button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .slider__punkte button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .slider__punkte button[aria-current="true"]::before { background: var(--weiss); } @media (max-width: 767px) { .slider { height: 60vh; } } /* ---------- Willkommen ---------- */ .willkommen { text-align: center; padding: 54px 20px 29px; } .willkommen h1 { font-weight: 400; } .willkommen__vor { display: block; font: 400 30px/1.2 "Open Sans", Arial, sans-serif; color: var(--dunkel); margin-bottom: 30px; } .willkommen__logo { width: min(36%, 390px); min-width: 260px; margin: 0 auto; } @media (max-width: 767px) { .willkommen__vor { font-size: 27px; } .willkommen__logo { width: 91%; } } /* ---------- Öffnungszeiten + Patrick ---------- */ .patrick { display: grid; grid-template-columns: 29.6% 1fr; gap: 5.5%; padding: 26px 0; align-items: stretch; } .patrick__zeiten { background: var(--schiefer); color: var(--weiss); border-radius: 0 40px 40px 0; padding: 50px 60px 40px 28px; display: flex; flex-direction: column; } .patrick__zeiten h2 { color: var(--weiss); font: 700 28px/1.2 "Open Sans", Arial, sans-serif; margin-bottom: 25px; } .zeiten { margin: 0; flex: 1; } .zeiten__zeile { display: flex; align-items: center; margin-bottom: 25px; color: var(--weiss); } .zeiten__zeile dd { margin: 0; white-space: nowrap; } .zeiten__linie { flex: 1; margin: 0 15px; border-top: 1px solid rgba(255, 255, 255, 0.44); } .patrick__knopf { text-align: center; margin: 20px 0 0; } .patrick__bild { position: relative; border-radius: 40px 0 0 40px; overflow: hidden; min-height: 563px; } .patrick__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .patrick__zitat { position: absolute; left: 18%; right: 18%; bottom: 40px; margin: 0; display: flex; gap: 14px; padding: 20px; background: rgba(53, 61, 64, 0.57); border-radius: 8px; color: var(--weiss); font-size: 16px; line-height: 1.6; } .patrick__zitat p { margin: 0; } .patrick__zitat-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--weiss); border-radius: 50%; font-size: 14px; } .patrick__name { font-weight: 700; font-size: 18px; margin-bottom: 4px !important; } @media (max-width: 980px) { /* Mobil wie im Original: Foto oben (Ecken oben rund), Zitat darunter, dann die Karte */ .patrick { display: flex; flex-direction: column; gap: 0; padding: 13px 6px 23px; } .patrick__bild { order: -1; display: flex; flex-direction: column; min-height: 0; border-radius: 18px 16px 0 0; overflow: hidden; } .patrick__bild img { position: static; height: auto; aspect-ratio: 16 / 10; } .patrick__zitat { position: static; margin: 0; border-radius: 0; background: var(--schiefer); font-size: 15px; padding: 24px 20px 10px; } .patrick__zeiten { border-radius: 0 0 32px 32px; padding: 24px 20px 20px; } .patrick__zeiten h2 { text-align: center; } } /* ---------- Salon-Erlebnis ---------- */ .erlebnis { max-width: var(--zeile); width: 90%; margin: 0 auto; padding: 50px 0 10px; text-align: center; } .erlebnis__titel { font: 400 34px/1.2 "Open Sans", Arial, sans-serif; margin-bottom: 34px; } .erlebnis__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .erlebnis__liste li:nth-child(2) { transition-delay: 0.1s; } .erlebnis__liste li:nth-child(3) { transition-delay: 0.2s; } .erlebnis__liste li:nth-child(4) { transition-delay: 0.3s; } .erlebnis__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--schiefer); color: var(--creme); font-size: 28px; margin-bottom: 14px; } .erlebnis__icon .icon, .spende__icon .icon { width: 30px; height: 30px; } .erlebnis h3 { font: 600 17px/1.3 "Open Sans", Arial, sans-serif; margin-bottom: 6px; } .erlebnis p { font-size: 14.5px; margin: 0; } @media (max-width: 860px) { .erlebnis__liste { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .erlebnis__titel { font-size: 28px; } } /* ---------- Trenner (Original-SVGs aus Divi: mountains2, asymmetric2) ---------- */ .team::before { top: 0; height: 100px; background-size: 100% 100px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23FFF9F3'%3E%3Cpath d='M978.81 122.25L0 0h1280l-262.1 116.26a73.29 73.29 0 0 1-39.09 5.99z' fill-opacity='.5'/%3E%3Cpath d='M983.19 95.23L0 0h1280l-266 91.52a72.58 72.58 0 0 1-30.81 3.71z'/%3E%3C/g%3E%3C/svg%3E"); } @media (max-width: 767px) { .team::before { height: 32px; background-size: 100% 32px; } } /* ---------- Aveda-Wald ---------- */ @media (max-width: 767px) { .wald { padding: 110px 20px 100px; } } /* ---------- Prime Hair ---------- */ .partner { text-align: center; padding: 34px 20px 11px; } .partner__logo { display: inline-block; width: 30vh; max-width: 260px; perspective: 800px; } .partner__logo img { transition: transform 0.4s ease-out; transform-style: preserve-3d; } .partner__linie { width: 60vh; max-width: 90%; margin: 7px auto 30px; border: 0; border-top: 1px solid #333; } .partner__text { font-size: 22px; text-transform: uppercase; color: var(--schiefer); } @media (max-width: 767px) { .partner__logo { width: 20vh; } .partner__linie { width: 36vh; } .partner__text { font-size: 18px; } } /* ---------- 3D-Rundgang ---------- */ .rundgang { max-width: 1023px; width: 90%; margin: 0 auto; padding: 12px 0 80px; } .rundgang__rahmen { position: relative; aspect-ratio: 1023 / 576; overflow: hidden; background: #ddd; } .rundgang__rahmen img { width: 100%; height: 100%; object-fit: cover; } .rundgang__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; } .rundgang__ueber { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; background: rgba(53, 61, 64, 0.45); color: var(--weiss); } .rundgang__hinweis { max-width: 32em; margin: 0; font-size: 13px; } .rundgang__hinweis a { color: var(--weiss); } .rundgang__alt { text-align: center; } @media (max-width: 560px) { .rundgang__rahmen { aspect-ratio: 4 / 5; } } /* ================= Strecke Aveda → Team ================= */ :root { --sand: #efe3d4; --sand-tief: #e3d2bd; --rost: #b5523b; } /* Aveda-Pflege: Bild mit Tiefe, Kennzahlen zählen hoch */ @media (max-width: 860px) { .pflege { padding: 70px 0 60px; } .pflege__raster { grid-template-columns: 1fr; gap: 30px; } .zahlen { grid-template-columns: 1fr 1fr; margin-top: 40px; } .zahlen li { padding: 18px 12px 18px 0 !important; border-left: 0 !important; border-bottom: 1px solid rgba(53,61,64,.12); } .zahlen li:nth-child(even) { padding-left: 14px !important; border-left: 1px solid rgba(53,61,64,.12) !important; } } /* Rundgang: bildschirmbreites Band, zoomt beim Scrollen; Prime Hair als drehendes Siegel */ .rundgang-band { position: relative; height: clamp(460px, 78vh, 760px); overflow: hidden; color: #fff; display: grid; place-items: center; text-align: center; } .rundgang-band__bild { position: absolute; inset: 0; transform: scale(var(--zoom, 1.12)); will-change: transform; } .rundgang-band__bild img { width: 100%; height: 100%; object-fit: cover; } .rundgang-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20,24,26,.38) 0%, rgba(20,24,26,.58) 100%); } .rundgang-band__inhalt { position: relative; z-index: 2; padding: 0 20px; display: flex; flex-direction: column; align-items: center; } .rundgang-band__inhalt.ist-geladen { position: absolute; inset: 0; padding: 0; } .rundgang-band__inhalt iframe { width: 100%; height: 100%; border: 0; } .rundgang-band__kicker { font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 16px; } .rundgang-band h2 { color: #fff; font: 400 clamp(36px, 6vw, 84px)/1.05 "Open Sans", Arial, sans-serif; letter-spacing: -.02em; margin-bottom: 34px; text-wrap: balance; } .rundgang-band__play { display: inline-flex; align-items: center; gap: 16px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: 500 17px/1 "Poppins", Arial, sans-serif; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .3s; } .rundgang-band__play span { width: 54px; height: 54px; border-radius: 50%; background: #fff; position: relative; } .rundgang-band__play span::after { content: ""; position: absolute; left: 22px; top: 18px; border-left: 15px solid var(--schiefer); border-top: 9px solid transparent; border-bottom: 9px solid transparent; } .rundgang-band__play span::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: band-puls 2.4s ease-out infinite; } @keyframes band-puls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .rundgang-band__play:hover { background: rgba(255,255,255,.24); } .rundgang-band .rundgang__hinweis { margin-top: 18px; font-size: 12px; opacity: .75; max-width: 34em; } .rundgang-band .rundgang__hinweis a { color: #fff; } .siegel { position: absolute; z-index: 3; right: clamp(16px, 5vw, 70px); bottom: clamp(16px, 5vw, 60px); width: clamp(120px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%; background: #fff9f3; display: grid; place-items: center; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); } .siegel img { width: 52%; } .siegel__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: siegel-dreh 22s linear infinite; } .siegel__ring text { font: 600 12.5px "Poppins", Arial, sans-serif; letter-spacing: .14em; fill: var(--schiefer); } @keyframes siegel-dreh { to { transform: rotate(360deg); } } @media (max-width: 860px) { .rundgang-band { height: 520px; } .siegel { right: 14px; top: 14px; bottom: auto; width: 92px; } .siegel__ring text { font-size: 15px; } } /* Gutschein: Sandband mit Wellen, 3D-Karte */ .gutschein { position: relative; z-index: 2; background: var(--sand); padding: 110px 0 120px; } .gutschein::before, .gutschein::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; background-repeat: no-repeat; background-size: 100% 100%; } .gutschein::before { top: -59px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23efe3d4' d='M0 60V30c220-34 460-40 720-16s500 20 720-8v54z'/%3E%3C/svg%3E"); } .gutschein::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff9f3' d='M0 60h1440V30c-260 26-520 30-760 6S220 10 0 40z'/%3E%3C/svg%3E"); } .gutschein__raster { max-width: var(--zeile); width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .gutschein__kicker { font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rost); margin-bottom: 14px; } .gutschein h2 { font: 400 clamp(32px, 4.4vw, 58px)/1.08 "Open Sans", Arial, sans-serif; letter-spacing: -.02em; color: var(--dunkel); margin-bottom: 20px; } .gutschein p { font-size: 16px; color: #5a5450; max-width: 34em; } .knopf--voll { background: var(--schiefer); border-color: var(--schiefer); color: #fff; margin-top: 10px; } .knopf--voll:hover { background: #000; border-color: #000; } .gutschein__countdown { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 16px; padding: 7px 14px; border-radius: 999px; background: #fff9f3; color: var(--rost) !important; font: 600 13px/1.2 "Poppins", Arial, sans-serif; letter-spacing: .02em; box-shadow: 0 6px 18px -10px rgba(53,61,64,.35); } .gutschein__countdown::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: gs-puls 1.8s ease-in-out infinite; } .gutschein__countdown[hidden] { display: none; } @keyframes gs-puls { 50% { opacity: .25; } } .gutschein__vorteile { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 9px; } .gutschein__vorteile li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--dunkel); } .gutschein__vorteile li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--rost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } .gutschein__knopf { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 15px 28px; font-size: 17px; border-radius: 999px; box-shadow: 0 14px 30px -14px rgba(53,61,64,.7); transition: transform .2s, box-shadow .2s, background .2s; } .gutschein__knopf svg { width: 18px; height: 18px; flex: none; } .gutschein__knopf:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(53,61,64,.8); } [data-anlass="weihnachten"] .gutschein__vorteile li::before { background-color: #2f5546; } [data-anlass="ostern"] .gutschein__vorteile li::before { background-color: #6f8a5d; } [data-anlass="ostern"] .gutschein__knopf { background: #5f7a4f; border-color: #5f7a4f; } [data-anlass="ostern"] .gutschein__knopf:hover { background: #4d6142; border-color: #4d6142; } [data-anlass="ostern"] .gutschein__countdown { color: #5f7a4f !important; } /* ===== Festliche Anlässe ===== */ .gutschein__deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; } .gutschein__raster { position: relative; z-index: 1; } [data-anlass="weihnachten"] .gutschein__deko, [data-anlass="ostern"] .gutschein__deko { display: block; } /* Weihnachten: Schnee und Lichterkette reichen bis in die geschwungene Kante (Maske = Wellenform) */ [data-anlass="weihnachten"] .gutschein__deko { top: -59px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30c220-34 460-40 720-16s500 20 720-8v54z'/%3E%3C/svg%3E") 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30c220-34 460-40 720-16s500 20 720-8v54z'/%3E%3C/svg%3E") 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; } /* Weihnachten: Winterabend, Schnee, Lichterkette, rote Karte mit Goldband */ .gutschein[data-anlass="weihnachten"] { background: radial-gradient(ellipse at 75% 55%, rgba(226,194,127,.22), transparent 55%), linear-gradient(180deg, #1d3a30 0%, #142a22 100%); } .gutschein[data-anlass="weihnachten"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%231d3a30' d='M0 60V30c220-34 460-40 720-16s500 20 720-8v54z'/%3E%3C/svg%3E"); } [data-anlass="weihnachten"] .gutschein__deko::before, [data-anlass="weihnachten"] .gutschein__deko::after { content: ""; position: absolute; left: 0; right: 0; top: -300px; bottom: 0; background-image: radial-gradient(circle at 23% 31%, rgba(255,255,255,.95) 0 1.8px, transparent 2.4px), radial-gradient(circle at 71% 64%, rgba(255,255,255,.7) 0 1.3px, transparent 1.9px), radial-gradient(circle at 46% 12%, rgba(255,255,255,.8) 0 2.2px, transparent 2.9px), radial-gradient(circle at 87% 41%, rgba(255,255,255,.55) 0 1px, transparent 1.6px); background-size: 137px 151px, 89px 103px, 211px 193px, 61px 73px; opacity: .75; animation: schnee 16s linear infinite; } [data-anlass="weihnachten"] .gutschein__deko::after { background-size: 173px 167px, 113px 127px, 257px 241px, 79px 97px; background-position: 40px 70px, 13px 37px, 90px 20px, 31px 5px; opacity: .6; animation-duration: 26s; filter: blur(.6px); } @keyframes schnee { to { transform: translate3d(-30px, 300px, 0); } } .gutschein__lichter { display: none; } [data-anlass="weihnachten"] .gutschein__lichter { display: block; position: absolute; left: 0; right: 0; top: 26px; height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='54' viewBox='0 0 150 54'%3E%3Cpath d='M0 6 Q37 34 75 6 T150 6' fill='none' stroke='%230d1a15' stroke-width='1.6'/%3E%3Cg%3E%3Crect x='20' y='15' width='5' height='5' rx='1' fill='%233a4a40'/%3E%3Cellipse cx='22.5' cy='26' rx='5' ry='7.5' fill='%23ffd36b'/%3E%3C/g%3E%3Cg%3E%3Crect x='52' y='22' width='5' height='5' rx='1' fill='%233a4a40'/%3E%3Cellipse cx='54.5' cy='33' rx='5' ry='7.5' fill='%23ff6b5a'/%3E%3C/g%3E%3Cg%3E%3Crect x='93' y='22' width='5' height='5' rx='1' fill='%233a4a40'/%3E%3Cellipse cx='95.5' cy='33' rx='5' ry='7.5' fill='%23fff2c8'/%3E%3C/g%3E%3Cg%3E%3Crect x='125' y='15' width='5' height='5' rx='1' fill='%233a4a40'/%3E%3Cellipse cx='127.5' cy='26' rx='5' ry='7.5' fill='%238fe0a8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 150px 54px repeat-x; filter: drop-shadow(0 0 6px rgba(255,211,107,.85)); animation: funkeln 2.4s ease-in-out infinite alternate; } @keyframes funkeln { from { opacity: .75; } to { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,211,107,1)); } } [data-anlass="weihnachten"] h2 { color: #fff8ee; } [data-anlass="weihnachten"] .gutschein__kicker { color: #e2c27f; } .gutschein[data-anlass="weihnachten"] p, [data-anlass="weihnachten"] .gutschein__vorteile li { color: #eadfcd; } [data-anlass="weihnachten"] .gutschein__countdown { background: rgba(226,194,127,.16); color: #f1d79d !important; box-shadow: inset 0 0 0 1px rgba(226,194,127,.45); } [data-anlass="weihnachten"] .gutschein__vorteile li::before { background-color: #c9a35a; } [data-anlass="weihnachten"] .gutschein__knopf { background: linear-gradient(135deg, #f1d79d, #c9a35a); border-color: #c9a35a; color: #1b2b24; box-shadow: 0 0 0 0 rgba(226,194,127,.6), 0 14px 30px -12px rgba(0,0,0,.6); animation: knopf-glanz 2.6s ease-out infinite; } [data-anlass="weihnachten"] .gutschein__knopf:hover { background: linear-gradient(135deg, #f7e3b6, #d8b46c); border-color: #d8b46c; color: #1b2b24; } @keyframes knopf-glanz { 0% { box-shadow: 0 0 0 0 rgba(226,194,127,.55), 0 14px 30px -12px rgba(0,0,0,.6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(226,194,127,0), 0 14px 30px -12px rgba(0,0,0,.6); } } [data-anlass="weihnachten"] .karte3d__tipp { color: #cbbfa8; } [data-anlass="weihnachten"] .karte3d__vorne { background: linear-gradient(135deg, #a8353a 0%, #7d1f25 55%, #5a1418 100%); color: #f7e7cf; } [data-anlass="weihnachten"] .karte3d__fuss { color: #f0d6c4; } [data-anlass="weihnachten"] .karte3d__hinten { background: linear-gradient(135deg, #2f5546, #182f27); } [data-anlass="weihnachten"] .karte3d__karte { filter: drop-shadow(0 0 40px rgba(226,194,127,.25)); } /* Ostern: Frühlingshimmel, bemalte Eier, Tulpenwiese */ .gutschein[data-anlass="ostern"] { background: radial-gradient(ellipse at 78% 40%, rgba(255,236,170,.7), transparent 55%), linear-gradient(180deg, #fdf3df 0%, #eef6e6 100%); padding-bottom: 150px; } .gutschein[data-anlass="ostern"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf3df' d='M0 60V30c220-34 460-40 720-16s500 20 720-8v54z'/%3E%3C/svg%3E"); } [data-anlass="ostern"] .gutschein__deko::before { content: ""; position: absolute; inset: 40px 0 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z' fill='%23f6c4cf'/%3E%3Cg clip-path='url%28%23e%29' fill='%23fff'%3E%3Crect y=%2230%22 width=%2260%22 height=%227%22/%3E%3Crect y=%2246%22 width=%2260%22 height=%224%22/%3E%3C/g%3E%3C/svg%3E") 3% 12% / 46px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z' fill='%23bcdcf0'/%3E%3Cg clip-path='url%28%23e%29' fill='%23f7e08a'%3E%3Ccircle cx=%2218%22 cy=%2230%22 r=%224%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%224%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%224%22/%3E%3Ccircle cx=%2214%22 cy=%2252%22 r=%224%22/%3E%3Ccircle cx=%2244%22 cy=%2250%22 r=%224%22/%3E%3C/g%3E%3C/svg%3E") 95% 8% / 40px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z' fill='%23f7df8e'/%3E%3Cg clip-path='url%28%23e%29' fill='%239cc58a'%3E%3Cpath d=%22M0 40l10-8 10 8 10-8 10 8 10-8 10 8v6l-10-8-10 8-10-8-10 8-10-8-10 8z%22/%3E%3C/g%3E%3C/svg%3E") 48% 4% / 34px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z' fill='%23cdb8e8'/%3E%3Cg clip-path='url%28%23e%29' fill='%23fff'%3E%3Cpath d=%22M0 34h60v4H0zM0 52h60v3H0z%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E") 91% 78% / 44px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M30 2C14 2 3 28 3 46s12 28 27 28 27-10 27-28S46 2 30 2z' fill='%23bcdcf0'/%3E%3Cg clip-path='url%28%23e%29' fill='%23f7e08a'%3E%3Ccircle cx=%2218%22 cy=%2230%22 r=%224%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%224%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%224%22/%3E%3Ccircle cx=%2214%22 cy=%2252%22 r=%224%22/%3E%3Ccircle cx=%2244%22 cy=%2250%22 r=%224%22/%3E%3C/g%3E%3C/svg%3E") 6% 88% / 36px auto no-repeat; animation: eier 5s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes eier { to { transform: translateY(-6px); } } [data-anlass="ostern"] .gutschein__deko::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='120' viewBox='0 0 290 120'%3E%3Cpath d='M10 120c4 -23.0 5.6 -36.800000000000004 8 -46' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M60 120c-5 -30.0 -7.0 -48.0 -10 -60' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 120c6 -20.0 8.399999999999999 -32.0 12 -40' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M230 120c-4 -27.0 -5.6 -43.2 -8 -54' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M270 120c3 -19.0 4.199999999999999 -30.400000000000002 6 -38' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M40 120C40 80 42 60 40 54' stroke='%236f9a5c' stroke-width='3' fill='none'/%3E%3Cpath d='M40 56c-7-2-9-11-7-18 3 4 5 4 7 0 2 4 4 4 7 0 2 7 0 16-7 18z' fill='%23f08aa0'/%3E%3Cpath d='M196 120C196 68 198 48 196 42' stroke='%236f9a5c' stroke-width='3' fill='none'/%3E%3Cpath d='M196 44c-7-2-9-11-7-18 3 4 5 4 7 0 2 4 4 4 7 0 2 7 0 16-7 18z' fill='%23f7c948'/%3E%3Cpath d='M118 120C120 94 118 79 118 70' stroke='%236f9a5c' stroke-width='2.5' fill='none'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='118' cy='63' r='4'/%3E%3Ccircle cx='123' cy='67' r='4'/%3E%3Ccircle cx='113' cy='67' r='4'/%3E%3Ccircle cx='121' cy='73' r='4'/%3E%3Ccircle cx='115' cy='73' r='4'/%3E%3C/g%3E%3Ccircle cx='118' cy='68' r='3' fill='%23f2c94c'/%3E%3C/svg%3E") 0 100% / 290px 120px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='410' height='120' viewBox='0 0 410 120'%3E%3Cpath d='M30 120c5 -17.0 7.0 -27.200000000000003 10 -34' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M120 120c-6 -25.0 -8.399999999999999 -40.0 -12 -50' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M250 120c5 -22.0 7.0 -35.2 10 -44' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M330 120c-5 -29.0 -7.0 -46.400000000000006 -10 -58' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M390 120c4 -15.0 5.6 -24.0 8 -30' stroke='%237fa96b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M90 120C90 92 92 72 90 66' stroke='%236f9a5c' stroke-width='3' fill='none'/%3E%3Cpath d='M90 68c-7-2-9-11-7-18 3 4 5 4 7 0 2 4 4 4 7 0 2 7 0 16-7 18z' fill='%23c79be0'/%3E%3Cpath d='M300 120C300 76 302 56 300 50' stroke='%236f9a5c' stroke-width='3' fill='none'/%3E%3Cpath d='M300 52c-7-2-9-11-7-18 3 4 5 4 7 0 2 4 4 4 7 0 2 7 0 16-7 18z' fill='%23f08aa0'/%3E%3Cpath d='M210 120C212 102 210 87 210 78' stroke='%236f9a5c' stroke-width='2.5' fill='none'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='210' cy='71' r='4'/%3E%3Ccircle cx='215' cy='75' r='4'/%3E%3Ccircle cx='205' cy='75' r='4'/%3E%3Ccircle cx='213' cy='81' r='4'/%3E%3Ccircle cx='207' cy='81' r='4'/%3E%3C/g%3E%3Ccircle cx='210' cy='76' r='3' fill='%23f2c94c'/%3E%3Cpath d='M370 120C370 100 372 80 370 74' stroke='%236f9a5c' stroke-width='3' fill='none'/%3E%3Cpath d='M370 76c-7-2-9-11-7-18 3 4 5 4 7 0 2 4 4 4 7 0 2 7 0 16-7 18z' fill='%23f7c948'/%3E%3C/svg%3E") 137px 100% / 410px 120px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='60' viewBox='0 0 170 60'%3E%3Cpath d='M82 60c-2 -13.0 -3.0 -20.8 -4 -26' stroke='%239cc58a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 60c-3 -15.5 -4.5 -24.8 -6 -31' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M93 60c-3 -15.0 -4.5 -24.0 -6 -30' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9 60c-3 -13.5 -4.5 -21.6 -6 -27' stroke='%237fa96b' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M17 60c-2 -8.0 -3.0 -12.8 -4 -16' stroke='%239cc58a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M108 60c-3 -16.0 -4.5 -25.6 -6 -32' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M57 60c-3 -16.0 -4.5 -25.6 -6 -32' stroke='%239cc58a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M101 60c-3 -10.5 -4.5 -16.8 -6 -21' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M142 60c-2 -11.5 -3.0 -18.400000000000002 -4 -23' stroke='%237fa96b' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M36 60c-3 -16.0 -4.5 -25.6 -6 -32' stroke='%237fa96b' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M143 60c-2 -8.5 -3.0 -13.600000000000001 -4 -17' stroke='%239cc58a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M146 60c-2 -12.5 -3.0 -20.0 -4 -25' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140 60c-3 -16.0 -4.5 -25.6 -6 -32' stroke='%238db878' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M158 60c-2 -14.5 -3.0 -23.200000000000003 -4 -29' stroke='%239cc58a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M136 60c3 -12.0 4.5 -19.200000000000003 6 -24' stroke='%237fa96b' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M149 60c3 -12.5 4.5 -20.0 6 -25' stroke='%237fa96b' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 60px 100% / 170px 60px repeat-x, linear-gradient(180deg, transparent, rgba(156,197,138,.28)) 0 100% / 100% 100% no-repeat; } [data-anlass="ostern"] .gutschein__kicker { color: #5f7a4f; } [data-anlass="ostern"] .gutschein__countdown { background: #fff; } [data-anlass="ostern"] .karte3d__vorne { background: linear-gradient(135deg, #fffbe9 0%, #fbeeb8 55%, #f3d98a 100%); } [data-anlass="ostern"] .karte3d__karte { filter: drop-shadow(0 0 36px rgba(255,220,120,.45)); } @media (max-width: 860px) { [data-anlass="ostern"] .gutschein__deko::before { background-size: 34px auto, 30px auto, 26px auto, 32px auto, 28px auto; } } @media (prefers-reduced-motion: reduce) { .gutschein__deko::before, .gutschein__deko::after, .gutschein__lichter, .gutschein__knopf { animation: none !important; } } .karte3d { perspective: 1200px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .karte3d__karte { position: relative; width: min(420px, 100%); aspect-ratio: 1.586; cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent; } .karte3d__karte:focus-visible { outline: 2px solid var(--schiefer); outline-offset: 8px; border-radius: 20px; } .karte3d__dreher { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(calc(var(--ry, -10deg) + var(--dreh, 0deg))); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .karte3d.ist-gedreht .karte3d__dreher { --dreh: 180deg; } /* Seiten per Sichtbarkeit zur Hälfte der Drehung tauschen – Safari ignoriert backface-visibility, sobald Blend-Effekte im Spiel sind */ .karte3d__hinten { opacity: 0; transition: opacity 0s .15s; } .karte3d__vorne { transition: opacity 0s .15s; } .karte3d.ist-gedreht .karte3d__hinten { opacity: 1; } .karte3d.ist-gedreht .karte3d__vorne { opacity: 0; } .karte3d__vorne, .karte3d__hinten { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 26px 28px; box-shadow: 0 50px 60px -30px rgba(53,61,64,.55), 0 1px 0 rgba(255,255,255,.6) inset; } .karte3d__vorne { transform: rotateY(0deg) translateZ(1px); background: linear-gradient(135deg, #fffaf4 0%, #f1e4d3 55%, #e2cdb3 100%); color: var(--schiefer); } .karte3d__vorne img { width: 58%; } .karte3d__art { margin-top: 8px; font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--rost); } .karte3d__fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font: 500 12px/1 "Poppins", Arial, sans-serif; color: #8a7e72; letter-spacing: .06em; } .karte3d__chip { width: 44px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #e7c88f, #b98d4a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .karte3d__glanz { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.45), transparent 45%); pointer-events: none; } .karte3d__hinten { transform: rotateY(180deg) translateZ(1px); background: linear-gradient(135deg, #3f474a, #262c2e); color: #fff9f3; justify-content: center; gap: 10px; } .karte3d__wert { position: absolute; bottom: 22px; right: 26px; display: flex; flex-direction: column; align-items: flex-end; font: 600 30px/1 "Poppins", Arial, sans-serif; color: #e7a48f; } .karte3d__wert small { font: 500 10px/1 "Poppins", Arial, sans-serif; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; } [data-anlass="weihnachten"] .karte3d__wert { color: #e2c27f; } [data-anlass="ostern"] .karte3d__wert { color: #f2d27a; } .karte3d__fuer { font: 600 34px/1 "Poppins", Arial, sans-serif; } .karte3d__satz { font-size: 15px; line-height: 1.5; opacity: .9; max-width: 26ch; } .karte3d__unterschrift { margin-top: 6px; font: italic 400 15px/1 "Open Sans", Arial, sans-serif; color: #e7a48f; } /* Anlässe (seite.js setzt data-anlass): Geschenkband quer über die Karte, Farben je Anlass */ .karte3d__band { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 72%, var(--band, #c9765f) 72%, var(--band, #c9765f) 79%, transparent 79%), linear-gradient(0deg, transparent 26%, var(--band, #c9765f) 26%, var(--band, #c9765f) 34%, transparent 34%); opacity: .85; } .karte3d__deko { position: absolute; left: 75.5%; top: 70%; width: 54px; height: 54px; transform: translate(-50%, -50%); pointer-events: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23a8563f'%3E%3Cpath d='M30 30C18 14 6 16 8 26s14 6 22 4zM30 30c12-16 24-14 22-4s-14 6-22 4z'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E"); } .karte3d__vorne > img, .karte3d__art, .karte3d__fuss > span:first-child { position: relative; } [data-anlass="weihnachten"] .karte3d__vorne > img { filter: brightness(0) invert(1) sepia(.25); } [data-anlass="weihnachten"] .karte3d__art { color: #e2c27f; } [data-anlass="weihnachten"] .karte3d__band { --band: #c9a35a; } [data-anlass="weihnachten"] .karte3d__deko { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23e2c27f' d='M30 4l6 18 18 2-14 11 5 19-15-10-15 10 5-19L6 24l18-2z'/%3E%3C/svg%3E"); } [data-anlass="weihnachten"] .karte3d__unterschrift { color: #e2c27f; } [data-anlass="ostern"] .karte3d__art { color: #5f7a4f; } [data-anlass="ostern"] .karte3d__band { --band: #9db48b; } [data-anlass="ostern"] .karte3d__deko { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23f2d27a'%3E%3Ccircle cx='30' cy='14' r='10'/%3E%3Ccircle cx='46' cy='30' r='10'/%3E%3Ccircle cx='30' cy='46' r='10'/%3E%3Ccircle cx='14' cy='30' r='10'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='8' fill='%23e39a4f'/%3E%3C/svg%3E"); } [data-anlass="ostern"] .karte3d__hinten { background: linear-gradient(135deg, #4d6142, #2f3d29); } [data-anlass="ostern"] .karte3d__unterschrift { color: #f2d27a; } .karte3d__tipp { margin: 0; font: 500 12px/1 "Poppins", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a7e72; } @media (max-width: 860px) { .gutschein { padding: 90px 0; } .gutschein__raster { grid-template-columns: 1fr; gap: 44px; } .karte3d { order: -1; } } /* Haare spenden: eine Strähne zeichnet sich beim Scrollen */ .spende { position: relative; padding: 90px 0 110px; overflow: hidden; } .spende__straehne { position: absolute; left: 0; top: 20px; width: 100%; height: 420px; pointer-events: none; } .spende__straehne path { fill: none; stroke: #b98a5f; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: calc(1600 - 1600 * var(--zeichnen, 0)); opacity: .55; } .spende__straehne path:nth-child(odd) { stroke: #8a6342; } .spende__straehne path:nth-child(3n) { stroke: #d2ae86; stroke-width: 2.4; } .spende__inhalt { position: relative; max-width: var(--zeile); width: 90%; margin: 0 auto; } .spende__kicker { font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rost); margin: 90px 0 14px; } .spende h2 { font: 400 clamp(34px, 5vw, 66px)/1.05 "Open Sans", Arial, sans-serif; letter-spacing: -.02em; color: var(--dunkel); margin-bottom: 22px; } .spende h2 em { font-style: normal; color: var(--rost); } .spende__lead { font-size: 17px; max-width: 38em; color: #5a5450; } .spende__schritte { list-style: none; counter-reset: s; margin: 40px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(53,61,64,.15); } .spende__schritte li { counter-increment: s; padding: 22px 26px 0 0; display: flex; flex-direction: column; gap: 6px; } .spende__schritte li + li { padding-left: 26px; border-left: 1px solid rgba(53,61,64,.15); } .spende__schritte b { font: 600 19px/1.2 "Poppins", Arial, sans-serif; color: var(--schiefer); } .spende__schritte b::before { content: counter(s) " "; color: var(--rost); } .spende__schritte span { font-size: 15px; } .spende__wirkung { margin: 0 0 34px; padding: 26px 30px; border-radius: 18px; background: var(--sand); max-width: 760px; position: relative; } .spende__wirkung::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 2px; background: var(--rost); } .spende__wirkung-kicker { font: 600 12px/1 "Poppins", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rost); margin: 0 0 10px; } .spende__wirkung-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--dunkel); } .spende__wirkung-text strong { font-weight: 600; } @media (max-width: 860px) { .spende { padding: 80px 0; } .spende__wirkung { padding: 22px 22px; } .spende__kicker { margin-top: 70px; } .spende__schritte { grid-template-columns: 1fr; } .spende__schritte li { padding: 16px 0 !important; border-left: 0 !important; border-bottom: 1px solid rgba(53,61,64,.12); } .spende__straehne { height: 300px; } } @media (prefers-reduced-motion: reduce) { .siegel__ring, .rundgang-band__play span::before { animation: none; } .spende__straehne path { stroke-dashoffset: 0; } } /* ---------- Team ---------- */ .team { background: var(--schiefer); padding: 150px 0 200px; color: var(--weiss); overflow: hidden; } .team__innen { max-width: 1180px; width: 90%; margin: 0 auto; } .team__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; } .team h2 { color: var(--weiss); font: 400 clamp(40px, 6vw, 76px)/1 "Open Sans", Arial, sans-serif; letter-spacing: -.02em; margin: 0; } .team__unter { margin: 0; color: rgba(255,255,255,.7); font-size: 16px; } .team__tipp { color: #e7a48f; } /* Desktop: Akkordeon aus hohen Karten – die offene wird breit und zeigt Schwerpunkte + Zitat */ .team__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; height: 560px; } .person { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow .7s cubic-bezier(.2,.8,.2,1); } .person.ist-offen { flex-grow: 2.6; } .person__karte { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer; text-align: left; color: #fff; background: #2a3033; font: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate; } .person__karte:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .person__foto { position: absolute; inset: 0; z-index: -2; } .person__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 8%); transform-origin: var(--fokus, 50% 8%); filter: grayscale(.85) contrast(1.05); transform: scale(1.04); transition: filter .7s, transform 1.2s cubic-bezier(.2,.8,.2,1); } .person.ist-offen .person__foto img { filter: none; transform: scale(1); } .person__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,26,0) 35%, rgba(20,24,26,.88) 100%); } /* Zwei feste Ebenen statt Umbruch: die senkrechte Beschriftung blendet aus, der Infoblock (feste Breite, unten verankert) blendet ein – nichts muss sich beim Aufklappen neu setzen. */ .person__senkrecht { position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 clamp(26px, 2.6vw, 38px)/1 "Poppins", Arial, sans-serif; letter-spacing: -.01em; white-space: nowrap; transition: opacity .35s ease; } .person.ist-offen .person__senkrecht { opacity: 0; transition-delay: 0s; } .person:not(.ist-offen) .person__senkrecht { transition-delay: .25s; } .person__info { position: absolute; left: 26px; bottom: 26px; width: min(430px, calc(100% - 52px)); min-width: 300px; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .person.ist-offen .person__info { opacity: 1; transform: none; transition-delay: .28s, .28s; } .person__name { font: 600 clamp(26px, 2.6vw, 38px)/1 "Poppins", Arial, sans-serif; letter-spacing: -.01em; } .person__rolle { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45); } .person__sprachen { white-space: nowrap; } .person__mehr { display: flex; flex-direction: column; } .person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .person__tags span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 13px/1 "Poppins", Arial, sans-serif; } .person__zitat { display: block; margin-top: 14px; max-width: 36ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.9); } .person__zitat small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.55); } .person__buchen { position: absolute; z-index: 2; top: 20px; right: 20px; padding: 9px 16px; border-radius: 999px; background: #fff9f3; color: var(--schiefer); text-decoration: none; font: 600 13px/1 "Poppins", Arial, sans-serif; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; pointer-events: none; } .person.ist-offen .person__buchen { opacity: 1; transform: none; pointer-events: auto; } .person__text { display: block; margin-top: 12px; max-width: 40ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); } /* Neue Kollegin: kleines Studiobookr-Porträt (nur 166 px) als Kreis statt Vollbild */ .person--neu .person__karte { background: radial-gradient(circle at 50% 30%, #4a5357 0%, #2a3033 70%); } .person__portrait { position: absolute; left: 50%; top: 22%; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; overflow: hidden; z-index: -1; box-shadow: 0 0 0 4px rgba(255,249,243,.9), 0 0 0 12px rgba(231,164,143,.25); transition: transform .7s cubic-bezier(.2,.8,.2,1); } .person__portrait img { width: 100%; height: 100%; object-fit: cover; } .person:not(.ist-offen) .person__portrait { width: 110px; height: 110px; margin-left: -55px; top: 14%; } .person__neu { position: absolute; top: 20px; left: 20px; padding: 7px 12px; border-radius: 999px; background: #c4553b; color: #fff; font: 600 12px/1 "Poppins", Arial, sans-serif; letter-spacing: .06em; animation: hv-puls 2.4s ease-out infinite; } .person:not(.ist-offen) .person__neu { left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0; padding: 7px; } .person:not(.ist-offen) .person__neu::after { content: "Neu"; font-size: 12px; } /* Platzhalter für die vierte Person */ .person--bald .person__karte { background: repeating-linear-gradient(135deg, #30373a 0 14px, #2c3235 14px 28px); border: 1.5px dashed rgba(255,255,255,.25); } .person__bald { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; } .person__bald span { font: 600 120px/1 "Poppins", Arial, sans-serif; color: rgba(255,255,255,.08); animation: bald-puls 3s ease-in-out infinite; } @keyframes bald-puls { 50% { color: rgba(255,255,255,.16); transform: scale(1.06); } } @media (max-width: 860px) { /* Handy: wischbares Karussell */ .team { padding: 90px 0 130px; } .team__innen { width: 100%; } .team__kopf { padding: 0 5%; margin-bottom: 22px; } .team__liste { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 5% 6px; gap: 12px; scrollbar-width: none; } .team__liste::-webkit-scrollbar { display: none; } .person, .person.ist-offen { flex: 0 0 78vw; height: 560px; scroll-snap-align: center; } /* Handy: Foto oben, Infos darunter auf eigener Fläche – kein Gesicht wird überdeckt */ .person__foto { bottom: 230px; } .person__karte { background: #262c2f; } .person__karte::before { background: linear-gradient(180deg, rgba(38,44,47,0) 45%, rgba(38,44,47,1) calc(100% - 230px)); } /* Handy: alles sichtbar, nichts klappt */ .person__senkrecht { display: none; } .person__info, .person:not(.ist-offen) .person__info { opacity: 1; transform: none; min-width: 0; width: calc(100% - 44px); left: 22px; bottom: 22px; } .person__buchen, .person:not(.ist-offen) .person__buchen { opacity: 1; transform: none; pointer-events: auto; } .team__tipp { display: none; } .person__foto img { filter: none; } } @media (prefers-reduced-motion: reduce) { .person, .person__info, .person__senkrecht, .person__foto img { transition: none; } .person__bald span { animation: none; } } /* ---------- Bewertungen: schwebende Wolke (seite.js), ohne JS eine Liste ---------- */ .stimmen { padding: 40px 0 70px; overflow: hidden; } .stimmen__kopf { text-align: center; width: 90%; margin: 0 auto 10px; } .stimmen__titel { font: 400 34px/1.2 "Open Sans", Arial, sans-serif; color: var(--dunkel); margin-bottom: 10px; } .stimmen__schnitt { font-size: 16px; color: var(--dunkel); } .stimmen__schnitt strong { font-size: 20px; } .stimmen__schnitt a { color: inherit; } .stimmen__quelle { white-space: nowrap; } .stimmen__trenner { margin: 0 6px; } @media (max-width: 600px) { .stimmen__trenner { display: none; } .stimmen__quelle { display: block; } } .sterne, .stimme__sterne { color: #f6bb06; letter-spacing: 1px; } .stimmen__aufruf { max-width: 560px; margin: 36px auto 0; padding: 28px 24px; border-radius: 24px; background: #fff; box-shadow: 0 20px 40px -26px rgba(53,61,64,.45); text-align: center; } .stimmen__aufruf-sterne { display: block; color: #f6bb06; font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; } .stimmen__aufruf-titel { margin: 0 0 6px; font: 600 22px/1.25 "Poppins", Arial, sans-serif; color: var(--dunkel); } .stimmen__aufruf-text { margin: 0 auto 18px; font-size: 15.5px; line-height: 1.55; color: #5a5450; max-width: 36ch; } .stimmen__aufruf .knopf { margin-top: 0; font-size: 16px; } @media (max-width: 767px) { .stimmen__aufruf { margin: 28px 16px 0; padding: 24px 18px; } .stimmen__aufruf .knopf { display: block; } } .stimme { background: var(--weiss); border-radius: 10px; padding: 18px 20px 14px; box-shadow: 0 10px 30px -12px rgba(53, 61, 64, 0.35); text-align: left; } .stimme__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .stimme__initiale { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #689f38; color: var(--weiss); font-size: 16px; } .stimme__autor { flex: 1; font-weight: 700; color: #000; line-height: 1.3; } .stimme__google { font-size: 18px; display: grid; } .stimme__google[hidden] { display: none; } .stimme__sterne { font-size: 17px; line-height: 1; margin: 0 0 8px; } .stimme__text { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: #222; } .stimme__text p { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .stimme__datum { margin: 0; font-size: 12px; color: #888; } /* Ohne JS: Liste */ .wolke__liste { list-style: none; margin: 20px auto 0; padding: 0 5%; max-width: var(--zeile); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } /* Mit JS: Bühne mit frei schwebenden Karten */ .wolke.ist-aktiv { position: relative; z-index: 0; isolation: isolate; height: clamp(520px, 62vh, 640px); margin-top: 10px; } .wolke.ist-aktiv .wolke__liste { display: none; } .wolke__karte { position: absolute; left: 0; top: 0; width: 290px; margin: 0; cursor: pointer; will-change: transform, opacity; transform-origin: center; border: 0; font: inherit; color: inherit; } .wolke__karte:focus-visible { outline: 3px solid var(--schiefer); outline-offset: 4px; } .wolke__karte .stimme__text p { -webkit-line-clamp: 6; } .wolke__mehr { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--schiefer); text-decoration: underline; } @media (max-width: 767px) { .wolke.ist-aktiv { height: 520px; } .wolke__karte { width: min(300px, 82vw); } .stimmen__titel { font-size: 28px; } } /* Lightbox mit der ganzen Bewertung */ .bewertung { width: min(640px, 92vw); max-height: 86vh; border: 0; border-radius: 12px; padding: 34px 32px 26px; overflow-y: auto; } .bewertung::backdrop { background: rgba(0, 0, 0, 0.55); } .bewertung[open] { animation: popup-auf 0.3s ease-out; } .bewertung .stimme__kopf { padding-right: 44px; } .bewertung .popup__zu { position: absolute; top: 14px; right: 14px; background: #f3ebe1; box-shadow: none; } .bewertung .popup__zu:focus:not(:focus-visible) { outline: none; } .bewertung__leistung { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .bewertung__leistung span { padding: 5px 11px; border-radius: 999px; background: #f3ebe1; color: #6b5f55; font: 500 12.5px/1.2 "Poppins", Arial, sans-serif; } .bewertung__leistung span + span { background: #e9eef0; color: var(--schiefer); } .bewertung__text { font-size: 16px; line-height: 1.65; color: #222; white-space: pre-line; margin: 6px 0 14px; } /* ---------- Fuß mit Karte ---------- */ /* Karte schiebt sich mit einer weichen Welle in den dunklen Team-Bereich */ .fuss__karte { position: relative; z-index: 1; margin-top: -120px; background: #f4ede4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 10 480 0 720 34s480 58 720 0V120H0z'/%3E%3C/svg%3E") top / 100% 120px no-repeat, linear-gradient(#000 0 0) 0 119px / 100% calc(100% - 119px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 10 480 0 720 34s480 58 720 0V120H0z'/%3E%3C/svg%3E") top / 100% 120px no-repeat, linear-gradient(#000 0 0) 0 119px / 100% calc(100% - 119px) no-repeat; } /* Unterseiten: kein dunkler Team-Bereich darüber – Karte nicht hochziehen, Welle auf Creme */ body:not(.start) .fuss { margin-top: 60px; background: linear-gradient(var(--creme), var(--creme)) top / 100% 120px no-repeat, var(--fuss); } body:not(.start) .fuss__karte { margin-top: 0; } @media (max-width: 767px) { body:not(.start) .fuss { background-size: 100% 70px, auto; } } .fuss__titel-karte { position: absolute; z-index: 3; left: 5%; bottom: 110px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,249,243,.92); color: var(--schiefer); font: 600 14px/1 "Poppins", Arial, sans-serif; box-shadow: 0 10px 26px -12px rgba(0,0,0,.45); white-space: nowrap; margin: 0; } .fuss__titel-karte span { font-weight: 400; color: #6f6862; } @media (max-width: 767px) { .fuss__karte { margin-top: -70px; -webkit-mask-size: 100% 70px, 100% calc(100% - 69px); mask-size: 100% 70px, 100% calc(100% - 69px); -webkit-mask-position: top, 0 69px; mask-position: top, 0 69px; } .fuss__titel-karte { left: 50%; transform: translateX(-50%); bottom: 96px; font-size: 12px; padding: 8px 14px; } .team { padding-bottom: 150px; } } .fuss__karte-quelle { position: absolute; right: 8px; bottom: 4px; margin: 0; font-size: 11px; color: #666; background: rgba(255, 255, 255, 0.7); padding: 0 6px; z-index: 2; } .fuss { color: var(--weiss); background: var(--fuss); } .fuss__innen { max-width: var(--zeile); width: 80%; margin: 0 auto; padding: 50px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.5%; font-size: 15px; line-height: 1.85; } .fuss__innen a { text-decoration: none; } .fuss__innen a:hover { text-decoration: underline; } .fuss__logo { width: 65%; filter: invert(1) contrast(0.35); opacity: 0.8; } .fuss__titel { font: 700 18px/1.4 "Open Sans", Arial, sans-serif; color: #666; text-transform: uppercase; margin-bottom: 8px; } .fuss__insta { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ea2c59; color: var(--weiss); font-size: 16px; margin-bottom: 14px; } .fuss__insta:hover { filter: brightness(1.1); } .fuss__copy { color: #666; } .fuss__zeiten { margin: 0; } .fuss__zeiten div { display: flex; justify-content: space-between; gap: 16px; max-width: 230px; } .fuss__zeiten dd { margin: 0; } .fuss__gutschein { margin: 0 0 8px; } .fuss__gutschein a { text-decoration: underline !important; } @media (max-width: 767px) { .fuss__innen { grid-template-columns: 1fr; gap: 24px; text-align: center; padding-bottom: 90px; } .fuss__zeiten div { margin: 0 auto; } } /* ---------- Handy: feste Buchungsleiste ---------- */ .mobil-cta { display: none; } @media (max-width: 860px) { /* Ausgeblendet: volle Höhe + Abstand + Home-Balken (safe-area) nach unten, danach unsichtbar – sonst ragt die Leiste auf iPhones mit Home-Balken halb ins Bild (140 % reichten nur ohne safe-area). */ .mobil-cta { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom))); visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; } .mobil-cta.ist-sichtbar { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; } .mobil-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 14px; text-decoration: none; font: 600 16px/1 "Poppins", Arial, sans-serif; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); } .mobil-cta__buchen { flex: 1; background: var(--schiefer); color: #fff; } .mobil-cta__tel { width: 52px; background: #fff; color: var(--schiefer); } .mobil-cta .icon { font-size: 18px; } } /* ---------- Kontakt-Popup ---------- */ .popup { width: min(1180px, 94vw); max-height: 92vh; border: 0; border-radius: 16px; padding: 0; background: var(--creme); color: var(--text); overflow-y: auto; overscroll-behavior: contain; } .popup:focus { outline: none; } .popup::backdrop { background: rgba(0, 0, 0, 0.6); } .popup[open] { animation: popup-auf 0.35s ease-out; } @keyframes popup-auf { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .popup__leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--creme); box-shadow: 0 1px 0 rgba(53,61,64,.08); } .popup__logo { height: 38px; width: auto; } .popup__zu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #000; font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); } .popup__inhalt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; padding: 26px 28px 30px; align-items: start; } .popup__titel { font: 400 30px/1.2 "Open Sans", Arial, sans-serif; color: var(--dunkel); margin: 0 0 18px; } .popup__buchen { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 18px; border-radius: 12px; background: var(--schiefer); color: #fff; text-decoration: none; font: 600 17px/1.2 "Poppins", Arial, sans-serif; } .popup__buchen:hover { background: #000; } .popup__buchen .icon { font-size: 19px; } .popup__aktionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 22px; } .popup__aktionen a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 12px; background: #fff; color: var(--schiefer); text-decoration: none; font: 500 13.5px/1.2 "Poppins", Arial, sans-serif; box-shadow: 0 1px 3px rgba(53,61,64,.1); } .popup__aktionen a:hover { box-shadow: 0 4px 14px rgba(53,61,64,.16); } .popup__aktionen .icon { font-size: 20px; color: #b5523b; } .popup__karte-info { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(53,61,64,.08); } .popup__karte-info h3 { font: 600 12px/1 "Poppins", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #b5523b; margin: 0 0 10px; } .popup__karte-info p { margin: 0 0 6px; font-size: 15px; color: var(--dunkel); line-height: 1.6; } .popup__karte-info p a { color: var(--dunkel); } .popup__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px !important; color: var(--text) !important; } .popup__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c7c7c7; } .popup__status.ist-offen::before { background: #2fa552; box-shadow: 0 0 0 4px rgba(47,165,82,.18); } .popup__status.ist-zu::before { background: #d9634b; } .popup__halte { list-style: none; margin: 0; padding: 0; } .popup__halte li + li { border-top: 1px solid #efe7dd; } .popup__halte a { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--dunkel); text-decoration: none; } .popup__halte a > span:last-of-type { flex: 1; display: flex; flex-direction: column; margin-left: 6px; } .popup__halte strong { font-weight: 600; font-size: 15px; } .popup__halte small { font-size: 13px; color: var(--text); } .popup__halte .icon { color: #b3a89c; font-size: 14px; } .halt { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 5px; border-radius: 5px; color: #fff; font: 700 13px/1 "Poppins", Arial, sans-serif; } .halt--bus { background: #d6002f; } .halt--u { background: #1b5aa6; } .halt--s { background: #2a8b3e; border-radius: 12px; } .popup__hinweis { font-size: 12.5px !important; color: #8a8178 !important; margin: 4px 0 0 !important; } .popup__karte { margin: 0; position: sticky; top: 90px; } .popup__karte .karte-bild { border-radius: 12px; } .popup__karte figcaption { font-size: 11px; margin-top: 6px; color: #8a8178; } @media (max-width: 860px) { /* Handy: Vollbild-Blatt, alles untereinander */ .popup { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .popup__inhalt { grid-template-columns: 1fr; gap: 0; padding: 20px 16px 28px; } .popup__titel { font-size: 24px; text-align: center; margin-bottom: 16px; } .popup__karte { position: static; order: 3; margin-top: 2px; } .popup__logo { height: 32px; } } /* ---------- Lageplan (Bild aus scripts/lageplan.py, Puls als HTML darüber) ---------- */ .karte-bild { position: relative; overflow: hidden; background: #f4ede4; } .karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .karte-bild__puls { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid #353d40; border-radius: 50%; opacity: 0; animation: puls 2.8s ease-out infinite; pointer-events: none; will-change: transform, opacity; } .karte-bild__puls--spaet { animation-delay: 1.4s; } @keyframes puls { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } } .popup__karte .karte-bild { border-radius: 6px; aspect-ratio: var(--seite); } /* Klick auf den Pin „BAAKEN 39“ öffnet Google Maps */ .karte-pin { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 15%; max-width: 160px; aspect-ratio: 1.6; transform: translate(-50%, -78%); border-radius: 12px; } .karte-pin:hover, .karte-pin:focus-visible { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px #353d40; } .karte-bild--fuss .karte-pin { --x: var(--xb); --y: var(--yb); } @media (max-width: 767px) { .karte-bild--fuss .karte-pin { --x: var(--xq); --y: var(--yq); width: 26%; } } .karte-halt { position: absolute; z-index: 2; border-radius: 6px; } .karte-halt:hover, .karte-halt:focus-visible { background: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 2px #353d40; } .karte-halte { position: absolute; inset: 0; } .karte-halte--quadrat { display: none; } @media (max-width: 767px) { .karte-halte--breit { display: none; } .karte-halte--quadrat { display: block; } } /* Karte über dem Fuß: Desktop der 3:1-Streifen, Handy das quadratische Bild (alle drei Stationen sichtbar) */ .karte-bild--fuss img { width: 100%; height: auto; } .karte-bild--fuss .karte-bild__puls { --x: var(--xb); --y: var(--yb); } @media (max-width: 767px) { .karte-bild--fuss .karte-bild__puls { --x: var(--xq); --y: var(--yq); } } /* ---------- Einblend-Animationen (Divi: slide, fade, flip; 1 s, ease-in-out) ---------- */ .js [data-anim] { transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .js [data-anim="fade"] { opacity: 0; } .js [data-anim="slide-unten"] { opacity: 0; transform: translateY(60px); } .js [data-anim="slide-links"] { opacity: 0; transform: translateX(-60px); } .js [data-anim="slide-rechts"] { opacity: 0; transform: translateX(60px); } .js [data-anim="slide-von-rechts"] { opacity: 0.78; transform: translateX(80px); } .js [data-anim="flip"] { opacity: 0.33; transform: perspective(2000px) rotateY(-54deg); transform-origin: left center; } .js [data-anim].ist-sichtbar { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1 !important; transform: none !important; transition: none; } .slider__bild { transition: none; } .karte-bild__puls { animation: none; opacity: 0.4; } } /* Mobil: nur Patricks Foto blendet ein; Zitat, Öffnungszeiten und Button stehen sofort da */ @media (max-width: 980px) { .js .patrick__bild[data-anim] { opacity: 1; transform: none; transition: none; } .js .patrick__bild[data-anim] > img, .js .patrick__bild[data-anim] picture img { opacity: 0; transition: opacity 1s ease-in-out; } .js .patrick__bild[data-anim].ist-sichtbar > img, .js .patrick__bild[data-anim].ist-sichtbar picture img { opacity: 1; } .js .patrick__zeiten[data-anim], .js .patrick__zitat[data-anim], .js .patrick__knopf[data-anim] { opacity: 1; transform: none; transition: none; } } /* ---------- Rechtstexte ---------- */ .rechtstext { max-width: var(--zeile); width: 80%; margin: 0 auto; padding: 60px 0 80px; overflow-wrap: anywhere; } .rechtstext ul { padding-left: 1.2em; } .rechtstext__zurueck { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(53,61,64,.15); } .rechtstext__zurueck .knopf { font-size: 17px; } .rechtstext h1 { font: 500 30px/1.3 "Open Sans", Arial, sans-serif; margin-bottom: 30px; } .rechtstext h2 { font: 500 22px/1.3 "Open Sans", Arial, sans-serif; margin: 1.8em 0 0.6em; } .rechtstext h3 { font: 500 18px/1.3 "Open Sans", Arial, sans-serif; margin: 1.5em 0 0.5em; } .rechtstext h4 { font: 600 15px/1.3 "Open Sans", Arial, sans-serif; color: var(--dunkel); margin: 1.2em 0 0.4em; } /* ---------- Quicklinks (Landingpage fürs Handy) ---------- */ .quicklinks { background: var(--schiefer); } .quicklinks main { min-height: 100svh; } .ql { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: var(--weiss); } .ql__bild { position: absolute; inset: -20px; background: url("/images/slide-2.jpg") center / cover no-repeat; background-image: image-set(url("/images/slide-2.webp") type("image/webp"), url("/images/slide-2.jpg") type("image/jpeg")); filter: blur(2px); transform: scale(1.04); } .ql__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53, 61, 64, 0.55) 0%, rgba(53, 61, 64, 0.82) 45%, rgba(53, 61, 64, 0.95) 100%); } .ql__inhalt { position: relative; width: min(420px, 100%); padding: 48px 22px calc(28px + env(safe-area-inset-bottom)); text-align: center; } .ql__logo { width: 230px; margin: 0 auto 18px; filter: invert(1); } .ql__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 14px; } .ql__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c7c7c7; } .ql__status.ist-offen::before { background: #5ad17a; box-shadow: 0 0 0 4px rgba(90, 209, 122, 0.25); } .ql__status.ist-zu::before { background: #e5735c; } .ql__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ql__knopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 10px; border-radius: 16px; background: rgba(255, 249, 243, 0.12); border: 1px solid rgba(255, 249, 243, 0.22); color: var(--weiss); text-decoration: none; font: 500 16px/1.2 "Poppins", Arial, sans-serif; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.15s, background-color 0.2s; } .ql__knopf .icon { font-size: 24px; } .ql__knopf:active { transform: scale(0.97); } .ql__knopf:hover { background: rgba(255, 249, 243, 0.2); } .ql__knopf--haupt { grid-column: 1 / -1; flex-direction: row; min-height: 64px; background: var(--creme); color: var(--schiefer); border-color: var(--creme); font-size: 18px; font-weight: 600; } .ql__knopf--haupt:hover { background: var(--weiss); } .ql__knopf--haupt .icon { font-size: 22px; } .ql__knopf--breit { grid-column: 1 / -1; flex-direction: row; min-height: 60px; } .ql__knopf--leise { grid-column: 1 / -1; flex-direction: row; min-height: 52px; background: transparent; } .ql__knopf--leise .icon { font-size: 16px; order: 2; } .ql__bewertung { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 26px 0 18px; color: var(--weiss); text-decoration: none; font-size: 14px; } .ql__bewertung strong { font-size: 18px; } .ql__sterne { color: #f6bb06; letter-spacing: 1px; font-size: 17px; } .ql__adresse { font-size: 13px; opacity: 0.8; margin-bottom: 6px; } .ql__recht { font-size: 12px; opacity: 0.6; margin: 0; } .ql__recht a { color: inherit; } @media (prefers-reduced-motion: no-preference) { .ql__inhalt > * { animation: ql-auf 0.6s ease-out both; } .ql__inhalt > *:nth-child(2) { animation-delay: 0.08s; } .ql__inhalt > *:nth-child(3) { animation-delay: 0.16s; } .ql__inhalt > *:nth-child(4) { animation-delay: 0.24s; } @keyframes ql-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } /* ---------- Haarverlängerung: Hinweis im Slider (A) und Scroll-Strecke (B) ---------- */ /* Hinweis im Slider */ /* Zentriert ohne translateX (vorher sprang die Pille nach der Einblendung) */ .hv-chip { position: absolute; z-index: 4; left: 0; right: 0; bottom: 70px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; display: inline-flex; align-items: center; gap: 16px; padding: 10px 12px 10px 10px; border-radius: 999px; background: var(--schiefer); color: #fff; text-decoration: none; font: 400 19px/1.2 "Poppins", Arial, sans-serif; white-space: nowrap; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,249,243,.35), 0 20px 44px -12px rgba(0,0,0,.6); animation: hv-auf .9s 1s cubic-bezier(.2,.8,.2,1) both, hv-hops 6s 3.5s ease-in-out infinite; transition: box-shadow .25s; } .hv-chip:hover { box-shadow: 0 0 0 6px rgba(255,249,243,.5), 0 26px 50px -12px rgba(0,0,0,.65); } /* Glanz, der regelmäßig über die Pille läuft */ .hv-chip::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: hv-glanz 6s 2.4s ease-in-out infinite; pointer-events: none; } .hv-chip__neu { position: relative; padding: 8px 14px; border-radius: 999px; background: #c4553b; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; animation: hv-puls 2.2s 2s ease-out infinite; } .hv-chip strong { font-weight: 600; } .hv-chip__pfeil { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--schiefer); } .hv-chip .icon { width: 16px; height: 16px; } @keyframes hv-auf { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes hv-hops { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-7px); } 96% { transform: translateY(0); } 98% { transform: translateY(-3px); } } @keyframes hv-glanz { 0%, 70% { left: -40%; } 100% { left: 130%; } } @keyframes hv-puls { 0% { box-shadow: 0 0 0 0 rgba(196,85,59,.75); } 70%, 100% { box-shadow: 0 0 0 16px rgba(196,85,59,0); } } @media (prefers-reduced-motion: reduce) { .hv-chip, .hv-chip::after, .hv-chip__neu { animation: none; } } @media (max-width: 560px) { .hv-chip { font-size: 15px; gap: 10px; bottom: 58px; padding: 8px 9px 8px 8px; } .hv-chip__neu { font-size: 12px; padding: 7px 10px; } .hv-chip__pfeil { width: 30px; height: 30px; } } /* Abschnitt */ .hv { max-width: var(--zeile); width: 90%; margin: 0 auto; padding: 70px 0 40px; text-align: center; } .hv__raster { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6%; align-items: center; text-align: left; } .hv__kicker { font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b5523b; margin-bottom: 14px; } .hv h2 { font: 400 32px/1.25 "Open Sans", Arial, sans-serif; margin-bottom: 18px; } .hv p { font-size: 15.5px; } .hv__punkte { list-style: none; padding: 0; margin: 0 0 26px; } .hv__punkte li { padding: 6px 0 6px 28px; position: relative; font-size: 15px; } .hv__punkte li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 8px; border-left: 2px solid #b5523b; border-bottom: 2px solid #b5523b; transform: rotate(-45deg); } .hv__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .hv__knoepfe .knopf { font-size: 18px; } .hv__tel { font-size: 14px; color: var(--schiefer); } /* B: Einzelbilder aus KI-Video, per Canvas beim Scrollen abgespielt */ .hv__buehne { position: relative; } .hv-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #e9dfd2; box-shadow: 0 24px 50px -24px rgba(53,61,64,.45); } .hv-foto__start, .hv-foto__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-foto__film { opacity: 0; transition: opacity .3s; } .hv-foto.ist-bereit .hv-foto__film { opacity: 1; } .ki-hinweis { position: absolute; z-index: 5; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 500 11px/1.4 "Poppins", Arial, sans-serif; letter-spacing: .02em; pointer-events: none; } .hv__regler { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; } .hv__regler button { border: 1px solid #d8cbbb; background: #fff; color: var(--schiefer); border-radius: 999px; padding: 7px 14px; font: 500 14px/1 "Poppins", Arial, sans-serif; cursor: pointer; transition: background-color .2s, color .2s; } .hv__regler button[aria-pressed="true"] { background: var(--schiefer); color: #fff; border-color: var(--schiefer); } /* Scroll-Strecke: Häkchen kommen pro Längenstufe, Button + Telefon zum Schluss */ /* Häkchen laufen synchron zum Haarwachstum: gleiche Dauer, gleicher Verlauf */ .hv--scroll .hv__punkte li, .hv--scroll .hv__schluss { transition: opacity 1.1s cubic-bezier(.4,.1,.2,1), transform 1.1s cubic-bezier(.4,.1,.2,1); } .js .hv--scroll [data-hv-text] .hv__punkte li { opacity: 0; transform: translateX(-14px); } .js .hv--scroll [data-hv-text] .hv__schluss { opacity: 0; transform: translateY(14px); pointer-events: none; } .js .hv--scroll [data-hv-text][data-stufe="1"] .hv__punkte li:nth-child(-n+1), .js .hv--scroll [data-hv-text][data-stufe="2"] .hv__punkte li:nth-child(-n+2), .js .hv--scroll [data-hv-text][data-stufe="3"] .hv__punkte li, .js .hv--scroll [data-hv-text][data-stufe="4"] .hv__punkte li { opacity: 1; transform: none; } .js .hv--scroll [data-hv-text][data-stufe="4"] .hv__schluss { opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .js .hv--scroll [data-hv-text] .hv__punkte li, .js .hv--scroll [data-hv-text] .hv__schluss { opacity: 1; transform: none; pointer-events: auto; } } /* B als Scroll-Strecke: Inhalt klebt, Länge folgt dem Scrollen */ .hv--scroll { max-width: none; width: auto; padding: 40px 0 0; } .hv__spur { position: relative; height: 320vh; } .hv__sticky { position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); height: calc(100svh - var(--kopf-h)); display: flex; align-items: center; } .hv--scroll .hv__raster { max-width: var(--zeile); width: 90%; margin: 0 auto; } .hv--scroll .hv-foto { max-height: calc(100svh - var(--kopf-h) - 110px); margin: 0 auto; } .hv__fortschritt { height: 3px; margin: 14px auto 0; max-width: 300px; background: #e5d9ca; border-radius: 2px; overflow: hidden; } .hv__fortschritt span { display: block; height: 100%; width: calc(var(--hv-p, 0) * 100%); background: #b5523b; } @media (max-width: 860px) { .hv__spur { height: 300vh; } .hv--scroll .hv__raster { gap: 14px; } .hv--scroll .hv__lang { display: none; } .hv--scroll .hv-foto { max-height: 52svh; width: auto; } .hv--scroll .hv__text { display: contents; text-align: center; } /* Mobil: Kicker und Titel über dem Bild, darunter Häkchen und Button */ .hv--scroll .hv__raster { justify-items: center; text-align: center; gap: 0; } .hv--scroll .hv__kicker { order: 1; margin: 0 0 6px; } .hv--scroll .hv__text h2 { order: 2; margin: 0 0 18px; font-size: 18px; line-height: 1.3; max-width: 92vw; } .hv--scroll .hv__text h2 br { display: none; } .hv--scroll .hv__buehne { order: 3; margin-bottom: 20px; } .hv--scroll .hv__liste, .hv--scroll .hv__schluss { order: 4; } .hv--scroll .hv__text h2 { font-size: 21px; margin-bottom: 10px; } .hv--scroll .hv__kicker { margin-bottom: 6px; } .hv--scroll .hv__knoepfe { justify-content: center; } .hv--scroll .hv__knoepfe .knopf { font-size: 16px; } .hv--scroll .hv__tel { font-size: 13px; } .hv--scroll .hv__punkte { display: inline-block; text-align: left; margin: 0 0 20px; } .hv--scroll .hv__punkte li { padding: 2px 0 2px 24px; font-size: 14px; line-height: 1.5; } .hv--scroll .hv__punkte li::before { top: 8px; } /* Bild füllt den Platz, der nach Titel, Knöpfen, Häkchen und Button übrig bleibt */ .hv__sticky { height: calc(100svh - var(--kopf-h)); padding-bottom: 18px; } /* Ruhige, gleichmäßige Abstände; Inhalt vertikal mittig. Bild höchstens 56 % der Bildschirmhöhe (größer wirkt es erdrückend), schrumpft auf kleinen Geräten mit. */ .hv--scroll .hv__raster { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .hv--scroll .hv__buehne { flex: 0 1 56svh; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; container-type: size; } .hv--scroll .hv-foto { height: calc(100cqh - 42px); max-height: none; width: auto; max-width: 94vw; aspect-ratio: 4 / 5; } .hv__sticky { align-items: stretch; padding-top: 16px; } .hv--scroll .hv__schluss { flex-direction: column; gap: 10px; margin: 0; } .hv--scroll .hv__schluss .knopf { font-size: 16px; padding: .3em 1.2em; } .hv--scroll .hv__fortschritt { display: none; } /* Mobil: Längen als schlanke Skala unter dem Bild (Linie läuft mit, aktive Länge betont) */ .hv--scroll .hv__fortschritt { display: none; } .hv--scroll .hv__regler { position: relative; width: min(300px, 82vw); margin: 12px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 10px; } .hv--scroll .hv__regler::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px; border-radius: 1px; background: #e5d9ca; } .hv--scroll .hv__regler::after { content: ""; position: absolute; top: 0; left: 12.5%; height: 2px; border-radius: 1px; background: #b5523b; width: calc(75% * min(1, var(--hv-p, 0) * 4 / 3)); } /* Stufe n beginnt bei p = n/4 → Balken trifft Punkt n genau dann */ .hv--scroll .hv__regler button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 0 0; font: 500 12px/1 "Poppins", Arial, sans-serif; color: #9a9088; border-radius: 0; } .hv--scroll .hv__regler button::before { content: ""; position: absolute; top: -14px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #e5d9ca; transition: background-color .3s, transform .3s; } .hv--scroll .hv__regler button[aria-pressed="true"] { background: none; color: var(--schiefer); font-weight: 600; } .hv--scroll .hv__regler button.ist-erreicht::before { background: #b5523b; } .hv--scroll .hv__regler button[aria-pressed="true"]::before { background: #b5523b; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { .hv__spur { height: auto; } .hv__sticky { position: static; height: auto; } } @media (max-width: 860px) { .hv__raster { grid-template-columns: 1fr; gap: 28px; } .hv h2 { font-size: 26px; } } /* ===== Vorschlag: Bühne im ersten Bild ===== */ .slider { height: calc(100svh - 72px); min-height: 560px; } .slider::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(20,24,26,0) 30%, rgba(20,24,26,.35) 55%, rgba(20,24,26,.82) 100%), linear-gradient(90deg, rgba(20,24,26,.45), transparent 60%); } .slider__bild.ist-aktiv img { animation: kenburns 9s ease-out both; } @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } } .slider__punkte { left: auto; right: 5%; bottom: 40px; } .buehne { position: absolute; z-index: 4; left: 5%; right: 5%; bottom: 56px; max-width: 620px; color: #fff; } @media (min-width: 768px) { .buehne { padding: 34px 38px 30px; border-radius: 26px; background: rgba(30,35,37,.55); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); } .buehne .buehne__titel { font-size: clamp(38px, 4.2vw, 60px); } } .buehne__neu { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; text-decoration: none; font: 500 14px/1 "Poppins", Arial, sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); margin-bottom: 22px; } .buehne__neu span { padding: 6px 10px; border-radius: 999px; background: #c4553b; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .buehne__neu .icon { width: 14px; height: 14px; } .buehne__kicker { display: block; text-shadow: none; margin: 0 0 10px; font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f0c2b2; } .buehne .buehne__titel { color: #fff; margin: 0 0 14px; font: 400 clamp(38px, 5.6vw, 76px)/1.04 "Open Sans", Arial, sans-serif; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .buehne__unter { margin: 0 0 26px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 34em; } .buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .buehne__buchen, .buehne__zweit { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; text-decoration: none; font: 600 16px/1 "Poppins", Arial, sans-serif; transition: transform .2s, background .2s; } .buehne__buchen { background: #fff9f3; color: var(--schiefer); box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); } .buehne__buchen .icon { width: 18px; height: 18px; } .buehne__zweit { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } .buehne__buchen:hover, .buehne__zweit:hover { transform: translateY(-2px); } .buehne__zweit:hover { background: rgba(255,255,255,.12); } .buehne__fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 14px/1.3 "Poppins", Arial, sans-serif; color: rgba(255,255,255,.9); } .buehne__fakten a { color: inherit; text-decoration: none; } .buehne__fakten a:hover { text-decoration: underline; } .buehne__status { display: inline-flex; align-items: center; gap: 8px; } .buehne__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #a9a9a9; } .buehne__status.ist-offen::before { background: #5cd17f; box-shadow: 0 0 0 4px rgba(92,209,127,.25); } .buehne__status.ist-zu::before { background: #f0a050; } .buehne__sterne { color: #f6bb06; letter-spacing: 1px; } /* Einblenden nacheinander */ .buehne > * { animation: buehne-ein .8s cubic-bezier(.2,.8,.2,1) both; } .buehne > :nth-child(2) { animation-delay: .1s; } .buehne > :nth-child(3) { animation-delay: .2s; } .buehne > :nth-child(4) { animation-delay: .3s; } .buehne > :nth-child(5) { animation-delay: .4s; } .buehne > :nth-child(6) { animation-delay: .5s; } @keyframes buehne-ein { from { opacity: 0; transform: translateY(18px); } } @media (max-width: 767px) { .slider { height: calc(100svh - 64px); } .slider::after { background: linear-gradient(180deg, rgba(20,24,26,.05) 0%, rgba(20,24,26,.6) 38%, rgba(20,24,26,.93) 100%); } .buehne__buchen { flex: 1 1 auto; justify-content: center; } .slider__punkte { right: 0; left: 0; top: 16px; bottom: auto; } .buehne { bottom: 28px; } .buehne__neu { font-size: 13px; margin-bottom: 16px; } .buehne__knoepfe { margin-bottom: 18px; } .buehne__fakten { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .slider__bild.ist-aktiv img, .buehne > * { animation: none; } } /* ===== Vorschlag: Patrick + Wochenleiste ===== */ .patrick { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px 64px; align-items: center; max-width: 1240px; width: 90%; margin: 0 auto; padding: 90px 0 70px; } .patrick__bild { position: relative; border-radius: 32px; overflow: hidden; min-height: 0; aspect-ratio: 4 / 3.3; box-shadow: 0 40px 70px -40px rgba(53,61,64,.55); } .patrick__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; } .patrick__marke { position: absolute; left: 20px; bottom: 20px; padding: 9px 16px; border-radius: 999px; background: rgba(255,249,243,.92); color: var(--schiefer); font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .04em; } .patrick__kicker { margin: 0 0 14px; font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--rost); } .patrick .patrick__zitat { position: static; display: block; padding: 0; background: none; border-radius: 0; margin: 0 0 20px; color: var(--dunkel); font: 400 clamp(28px, 3vw, 42px)/1.18 "Open Sans", Arial, sans-serif; letter-spacing: -.02em; text-wrap: balance; } .patrick__lauf { margin: 0 0 28px; font-size: 16.5px; line-height: 1.65; color: #5a5450; max-width: 36em; } .patrick__fakten { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .patrick__fakten li { padding: 16px 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px -18px rgba(53,61,64,.5); display: flex; flex-direction: column; gap: 6px; } .patrick__fakten strong { font: 600 22px/1 "Poppins", Arial, sans-serif; color: var(--schiefer); white-space: nowrap; } .patrick__fakten span { font-size: 13px; line-height: 1.35; color: #7a716a; } .patrick__unterschrift { margin: 0; font: italic 400 26px/1 "Georgia", serif; color: var(--rost); } /* Wochenleiste */ .woche { grid-column: 1 / -1; background: var(--schiefer); color: #fff; border-radius: 28px; padding: 28px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 36px; align-items: center; } .woche__kopf { display: flex; flex-direction: column; gap: 8px; } .woche .woche__titel { margin: 0; color: #fff; font: 600 22px/1.1 "Poppins", Arial, sans-serif; } .woche__status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 "Poppins", Arial, sans-serif; color: rgba(255,255,255,.8); } .woche__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #a9a9a9; flex: none; } .woche__status.ist-offen::before { background: #5cd17f; box-shadow: 0 0 0 4px rgba(92,209,127,.25); } .woche__status.ist-zu::before { background: #f0a050; } .woche__tage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .woche__tag { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: center; } .woche__name abbr { text-decoration: none; font: 600 12px/1 "Poppins", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); } .woche__zeit { font: 600 17px/1.1 "Poppins", Arial, sans-serif; white-space: nowrap; } .woche__zeit i { font-style: normal; opacity: .6; margin: 0 1px; } .woche__uhr { font-size: 11px; color: rgba(255,255,255,.55); } .woche__tag.ist-zu { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .woche__zeit--zu { color: rgba(255,255,255,.4); font-weight: 500; } .woche__tag.ist-heute { background: #fff9f3; color: var(--schiefer); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); } .woche__tag.ist-heute .woche__name abbr { color: var(--rost); } .woche__tag.ist-heute .woche__uhr, .woche__tag.ist-heute .woche__zeit--zu { color: #8a7e72; } .woche .patrick__knopf { margin: 0; text-align: right; } .woche__knopf { display: inline-flex; padding: 15px 26px; border-radius: 999px; background: #fff9f3; color: var(--schiefer); text-decoration: none; font: 600 16px/1 "Poppins", Arial, sans-serif; white-space: nowrap; transition: transform .2s; } .woche__knopf:hover { transform: translateY(-2px); } @media (max-width: 1080px) { .woche { grid-template-columns: 1fr; } .woche .patrick__knopf { text-align: left; } } @media (max-width: 860px) { .patrick { grid-template-columns: 1fr; gap: 28px; padding: 50px 0 40px; width: auto; margin: 0 16px; } .patrick__bild { aspect-ratio: 4 / 3.2; border-radius: 24px; } .patrick__fakten { gap: 8px; } .patrick__fakten li { padding: 12px 10px; } .patrick__fakten strong { font-size: 15px; } .patrick__fakten span { font-size: 12px; } .woche { padding: 22px 16px; border-radius: 24px; } .woche__tage { gap: 4px; } .woche__tag { padding: 10px 2px; border-radius: 12px; } .woche__zeit { font-size: 13px; } .woche__zeit i { display: block; height: 0; overflow: hidden; } .woche__knopf { width: 100%; justify-content: center; } } /* Bühne: Neu-Hinweis mit Glanz, pulsierendem „Neu“ und kleinem Hüpfer; grüner Punkt „Jetzt geöffnet“ pulsiert */ .buehne .buehne__neu { position: relative; overflow: hidden; animation: buehne-ein .8s cubic-bezier(.2,.8,.2,1) both, hv-hops 6s 3s ease-in-out infinite; } .buehne__neu::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: hv-glanz 6s 2.4s ease-in-out infinite; pointer-events: none; } .buehne__neu span { animation: hv-puls 2.2s 1.6s ease-out infinite; } .buehne__status.ist-offen::before, .woche__status.ist-offen::before { animation: offen-puls 2s ease-out infinite; } @keyframes offen-puls { 0% { box-shadow: 0 0 0 0 rgba(92,209,127,.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(92,209,127,0); } } @media (prefers-reduced-motion: reduce) { .buehne .buehne__neu, .buehne__neu::after, .buehne__neu span, .buehne__status.ist-offen::before, .woche__status.ist-offen::before { animation: none; } } /* ===== Aveda: ein Abschnitt, Wald als Grund, Produktfoto, belegte Kennzahlen, Anlass-Text ===== */ .aveda { position: relative; margin-top: 60px; padding: 130px 0 120px; color: #fff; overflow: hidden; background: linear-gradient(100deg, rgba(18,34,27,.94) 0%, rgba(18,34,27,.82) 45%, rgba(18,34,27,.35) 100%), url("/images/wald.webp") center / cover no-repeat, #1b2f26; } .aveda::before, .aveda::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; } .aveda::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff9f3' d='M0 0h1440v22c-240 30-520 34-760 12S220 6 0 30z'/%3E%3C/svg%3E"); } .aveda::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff9f3' d='M0 60h1440V30c-260 26-520 30-760 6S220 10 0 40z'/%3E%3C/svg%3E"); } .aveda__raster { position: relative; z-index: 2; max-width: var(--zeile); width: 90%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; } .aveda__logo { width: 150px; margin-bottom: 30px; opacity: .95; } .aveda__kicker { margin: 0 0 12px; font: 600 13px/1 "Poppins", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #b9d3a6; } .aveda h2 { margin: 0 0 18px; color: #fff; font: 400 clamp(34px, 4.2vw, 58px)/1.06 "Open Sans", Arial, sans-serif; letter-spacing: -.025em; text-wrap: balance; } .aveda__lauf { margin: 0 0 30px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 34em; } .aveda__fakten { list-style: none; margin: 0 0 32px; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgba(255,255,255,.18); } .aveda__fakten li { display: flex; flex-direction: column; gap: 6px; } .aveda__fakten b { font: 600 clamp(28px, 3vw, 40px)/1 "Poppins", Arial, sans-serif; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; } .aveda__fakten li > span { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.72); } .aveda__fakten sup { font-size: .7em; } .aveda__knopf { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 999px; background: #fff9f3; color: #1b2f26; text-decoration: none; font: 600 16px/1 "Poppins", Arial, sans-serif; box-shadow: 0 18px 36px -16px rgba(0,0,0,.6); transition: transform .2s, gap .2s; } .aveda__knopf .icon { width: 16px; height: 16px; } .aveda__knopf:hover { transform: translateY(-2px); gap: 16px; } .aveda__quelle { margin: 22px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.5); max-width: 46em; } .aveda__bild { position: relative; margin: 0; } .aveda__bild img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 26px; box-shadow: 0 50px 80px -40px rgba(0,0,0,.8); } /* Anlässe: nur Akzente, kein Schmuck */ .aveda[data-anlass="weihnachten"] { background: linear-gradient(100deg, rgba(40,14,16,.95) 0%, rgba(58,20,23,.85) 45%, rgba(30,46,38,.45) 100%), url("/images/wald.webp") center / cover no-repeat, #2a1214; } .aveda[data-anlass="weihnachten"] .aveda__kicker { color: #e2c27f; } .aveda[data-anlass="weihnachten"] .aveda[data-anlass="weihnachten"] .aveda__bild img { box-shadow: 0 0 0 1px rgba(226,194,127,.5), 0 50px 80px -40px rgba(0,0,0,.8); } .aveda[data-anlass="ostern"] .aveda__kicker { color: #f2d27a; } .aveda[data-anlass="ostern"] { background: linear-gradient(100deg, rgba(34,58,40,.92) 0%, rgba(52,84,56,.78) 45%, rgba(120,150,90,.25) 100%), url("/images/wald.webp") center / cover no-repeat, #2f4a35; } @media (max-width: 900px) { .aveda { padding: 100px 0 90px; background: linear-gradient(180deg, rgba(18,34,27,.75), rgba(18,34,27,.95) 40%), url("/images/wald.webp") center top / cover no-repeat, #1b2f26; } .aveda[data-anlass="weihnachten"] { background: linear-gradient(180deg, rgba(58,20,23,.8), rgba(40,14,16,.96) 40%), url("/images/wald.webp") center top / cover no-repeat, #2a1214; } .aveda[data-anlass="ostern"] { background: linear-gradient(180deg, rgba(52,84,56,.75), rgba(34,58,40,.95) 40%), url("/images/wald.webp") center top / cover no-repeat, #2f4a35; } .aveda__raster { grid-template-columns: 1fr; gap: 44px; width: auto; margin: 0 16px; } .aveda__bild { order: -1; } .aveda__bild img { aspect-ratio: 4 / 3.2; } .aveda__fakten { gap: 10px; } .aveda__fakten li > span { font-size: 12.5px; } .aveda__knopf { width: 100%; justify-content: center; } } /* Aveda – Feinschliff: weicher Übergang in den Rundgang, festliche Anlässe */ .aveda { z-index: 2; padding-bottom: 150px; -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 59px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30c-260 26-520 30-760 6S220 10 0 40z'/%3E%3C/svg%3E") bottom / 100% 60px no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 59px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30c-260 26-520 30-760 6S220 10 0 40z'/%3E%3C/svg%3E") bottom / 100% 60px no-repeat; } .aveda::after { display: none; } .aveda + .rundgang-band { margin-top: -60px; z-index: 1; } .aveda__licht { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; } .aveda__schmuck { position: absolute; pointer-events: none; display: none; } /* Weihnachten: warme Lichtpunkte, Geschenkband mit Schleife ums Foto */ .aveda[data-anlass="weihnachten"] .aveda__licht, .aveda[data-anlass="ostern"] .aveda__licht { display: block; } .aveda[data-anlass="weihnachten"] .aveda__licht { background: radial-gradient(circle at 8% 22%, rgba(255,214,140,.55) 0 5.7px, rgba(255,214,140,.18) 7.6px, transparent 26.6px), radial-gradient(circle at 18% 78%, rgba(255,214,140,.45) 0 3.8px, rgba(255,214,140,.15) 5.7px, transparent 22.8px), radial-gradient(circle at 46% 12%, rgba(255,200,120,.5) 0 3.8px, transparent 19px), radial-gradient(circle at 57% 86%, rgba(255,214,140,.4) 0 5.7px, rgba(255,214,140,.12) 9.5px, transparent 34.2px), radial-gradient(circle at 92% 14%, rgba(255,226,160,.55) 0 5.7px, rgba(255,226,160,.2) 9.5px, transparent 38px), radial-gradient(circle at 96% 70%, rgba(255,214,140,.45) 0 3.8px, transparent 22.8px), radial-gradient(circle at 70% 4%, rgba(255,214,140,.35) 0 2.85px, transparent 15.2px), radial-gradient(circle at 34% 92%, rgba(255,226,160,.35) 0 2.85px, transparent 15.2px), radial-gradient(circle at 30% 40%, rgba(255,214,140,.3) 0 3px, transparent 16px), radial-gradient(circle at 82% 52%, rgba(255,226,160,.35) 0 4px, rgba(255,226,160,.12) 7px, transparent 26px), radial-gradient(circle at 4% 52%, rgba(255,214,140,.3) 0 3px, transparent 18px), radial-gradient(ellipse at 75% 45%, rgba(226,160,90,.22), transparent 50%); animation: aveda-funkeln 3.6s ease-in-out infinite alternate; } @keyframes aveda-funkeln { from { opacity: .65; } to { opacity: 1; } } .aveda[data-anlass="weihnachten"] .aveda__bild { isolation: isolate; } .aveda[data-anlass="weihnachten"] .aveda__bild::before, .aveda[data-anlass="weihnachten"] .aveda__bild::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #e2c27f 0 2px, #a8353a 2px calc(100% - 2px), #e2c27f calc(100% - 2px)); box-shadow: 0 4px 14px rgba(0,0,0,.35); } .aveda[data-anlass="weihnachten"] .aveda__bild::before { top: 0; bottom: 0; right: 16%; width: 30px; border-radius: 0; } .aveda[data-anlass="weihnachten"] .aveda__bild::after { left: 0; right: 0; top: 16%; height: 30px; background: linear-gradient(180deg, #e2c27f 0 2px, #a8353a 2px calc(100% - 2px), #e2c27f calc(100% - 2px)); } .aveda[data-anlass="weihnachten"] .aveda__bild img { clip-path: inset(0 round 26px); } .aveda[data-anlass="weihnachten"] .aveda__schmuck { display: block; z-index: 2; width: 140px; height: 105px; right: calc(16% + 15px); top: calc(16% + 15px); transform: translate(50%, -50%) rotate(-6deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath d='M60 46C40 20 8 14 6 34s30 22 54 12z' fill='%23b3383d'/%3E%3Cpath d='M60 46c20-26 52-32 54-12s-30 22-54 12z' fill='%23b3383d'/%3E%3Cpath d='M60 46C44 30 22 28 20 36s18 12 40 10zM60 46c16-16 38-18 40-10s-18 12-40 10z' fill='%238e252a'/%3E%3Cpath d='M56 50l-18 36 10-4 6 8 8-40zM64 50l18 36-10-4-6 8-8-40z' fill='%23a8353a'/%3E%3Crect x='51' y='37' width='18' height='18' rx='6' fill='%23c9454b' stroke='%23e2c27f' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); } /* Ostern: helles Frühlingslicht, Blütenzweig über der Fotoecke */ .aveda[data-anlass="ostern"] .aveda__licht { background: radial-gradient(circle at 10% 18%, rgba(255,240,180,.5) 0 3px, transparent 14px), radial-gradient(circle at 22% 84%, rgba(247,198,211,.45) 0 3px, transparent 14px), radial-gradient(circle at 52% 10%, rgba(255,240,180,.4) 0 2px, transparent 10px), radial-gradient(circle at 94% 20%, rgba(247,198,211,.5) 0 3px, transparent 16px), radial-gradient(circle at 90% 82%, rgba(255,240,180,.45) 0 3px, transparent 14px), radial-gradient(ellipse at 80% 30%, rgba(255,236,170,.25), transparent 55%); animation: aveda-funkeln 4s ease-in-out infinite alternate; } .aveda[data-anlass="ostern"] .aveda__schmuck { display: block; z-index: 2; width: 230px; height: 146px; left: -46px; top: -40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Cpath d='M4 10c40 18 80 30 120 62s70 48 92 56' stroke='%236b4e3a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M70 40c6-14 20-20 30-18M130 80c10-12 24-14 34-10' stroke='%236b4e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cg transform='translate%2840 26%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cg transform='translate%2898 22%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cg transform='translate%28112 60%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cg transform='translate%28166 70%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cg transform='translate%28190 110%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23f7c6d3'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23f7c6d3'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cg transform='translate%2870 46%29'%3E%3Ccircle r='7' cx='0' cy='-7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='0' cy='7' fill='%23fbe0e8'/%3E%3Ccircle r='7' cx='-7' cy='0' fill='%23fbe0e8'/%3E%3Ccircle r='4' fill='%23f2c94c'/%3E%3C/g%3E%3Cpath d='M150 92c8 2 14 8 14 16-8-2-14-8-14-16zM84 34c-8 0-14-4-16-12 8 0 14 4 16 12z' fill='%238db878'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); animation: zweig-wiegen 6s ease-in-out infinite alternate; transform-origin: 10% 10%; } @keyframes zweig-wiegen { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } } @media (max-width: 900px) { .aveda { padding-bottom: 120px; } .aveda[data-anlass="weihnachten"] .aveda__schmuck { width: 100px; height: 75px; } .aveda[data-anlass="weihnachten"] .aveda__bild::before { width: 22px; } .aveda[data-anlass="weihnachten"] .aveda__bild::after { height: 22px; } .aveda[data-anlass="ostern"] .aveda__schmuck { width: 160px; height: 102px; left: -20px; top: -30px; } } @media (prefers-reduced-motion: reduce) { .aveda__licht, .aveda__schmuck { animation: none !important; } } /* Anfahrt mit dem Auto */ .halt--p { background: #1b5aa6; border-radius: 5px; } .popup__parken { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14.5px; } .popup__hinweis + h3 { margin-top: 20px !important; } /* ===== Übergänge: Welle nur über dem Gutschein und am Kartenrand im Fuß; sonst schieben sich Abschnitte als Flächen mit runden oberen Ecken übereinander (gestapelte Karten), keine Verläufe ===== */ .aveda { border-radius: 48px 48px 0 0; -webkit-mask: none; mask: none; padding-bottom: 170px; } .aveda::before, .aveda::after { display: none; } .aveda + .rundgang-band { margin-top: -48px; z-index: 3; border-radius: 48px 48px 0 0; } .gutschein::after { display: none; } .gutschein { padding-bottom: 170px; } .gutschein + .spende { position: relative; z-index: 3; margin-top: -48px; border-radius: 48px 48px 0 0; background: #fff9f3; } @media (max-width: 900px) { .aveda, .aveda + .rundgang-band, .gutschein + .spende { border-radius: 28px 28px 0 0; } .aveda + .rundgang-band, .gutschein + .spende { margin-top: -28px; } } /* Osterwiese steht auf der Kante der darüberliegenden Fläche */ [data-anlass="ostern"] .gutschein__deko::after { bottom: 46px; } @media (max-width: 900px) { [data-anlass="ostern"] .gutschein__deko::after { bottom: 26px; } } /* Stapelreihenfolge: jeder Abschnitt liegt über dem vorherigen – sonst verdeckt der Rundgang die Gutschein-Welle */ .aveda { z-index: 1; } .aveda + .rundgang-band { z-index: 2; } .gutschein { z-index: 3; } .gutschein + .spende { z-index: 4; } /* ===== Handy-Korrekturen (07.10.2026) ===== */ @media (max-width: 767px) { /* Slider: keine Pfeile über dem Text, stattdessen wischen; Punkte gut sichtbar oben */ .slider__pfeil { display: none; } .slider__punkte button::before { box-shadow: 0 0 0 1px rgba(0,0,0,.25); } /* Bewertungen: nur „Bewertung schreiben“ */ /* Team: keine Termin-Pillen auf den Fotos */ .person__buchen, .person:not(.ist-offen) .person__buchen { display: none; } /* Wellen flacher – am schmalen Bildschirm wirkten sie gestaucht */ .gutschein::before { top: -29px; height: 30px; } [data-anlass="weihnachten"] .gutschein__deko { top: -29px; -webkit-mask-size: 100% 30px, 100% calc(100% - 29px); mask-size: 100% 30px, 100% calc(100% - 29px); -webkit-mask-position: 0 0, 0 29px; mask-position: 0 0, 0 29px; } [data-anlass="weihnachten"] .gutschein__lichter { top: 4px; } .fuss__karte { margin-top: -40px; -webkit-mask-size: 100% 40px, 100% calc(100% - 39px); mask-size: 100% 40px, 100% calc(100% - 39px); -webkit-mask-position: top, 0 39px; mask-position: top, 0 39px; } body:not(.start) .fuss { background-size: 100% 40px, auto; } /* Gutschein: unten kein leerer Sandstreifen vor der Spenden-Fläche */ .gutschein { padding-bottom: 90px; } } @media (max-width: 767px) { /* Aveda: über dem Foto nur so viel Grün wie links und rechts; Ecken passend zur Fläche */ .aveda { padding-top: 16px; } .aveda__bild img { border-radius: 16px; } } @media (max-width: 767px) { .team { padding-bottom: 80px; } } /* Handy: Pflanzenbild ist das erste Bild – auch schon bevor das Skript läuft */ @media (max-width: 767px) { .slider:not(.ist-gestartet) .slider__bild.ist-aktiv { opacity: 0; } .slider:not(.ist-gestartet) .slider__bild--mobil-start { opacity: 1; z-index: 1; } } /* Haarspende: persönlicher Kontakt statt Buchung */ .spende__kontakt { margin-top: 34px; padding: 26px 28px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -26px rgba(53,61,64,.45); } .spende__kontakt-titel { text-wrap: balance; margin: 0 0 6px; font: 600 20px/1.3 "Poppins", Arial, sans-serif; color: var(--dunkel); } .spende__kontakt-text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: #5a5450; max-width: 46em; } .spende__kontakt-wege { display: flex; flex-wrap: wrap; gap: 10px; } .spende__kontakt-wege .knopf { display: inline-flex; align-items: center; gap: 10px; margin: 0; } .spende__kontakt-wege .icon { width: 18px; height: 18px; } @media (max-width: 767px) { .spende__kontakt { padding: 22px 18px; } .spende__kontakt-wege .knopf { flex: 1 1 100%; justify-content: center; } } /* ===== Aveda als eigenständige Karte, Rundgang als gerades Band – keine Überlappung ===== */ .aveda { width: min(1320px, calc(100% - 10vw)); margin: 70px auto; border-radius: 36px; padding: 90px 0; } .aveda__raster { width: 86%; } .aveda + .rundgang-band { margin-top: 0; border-radius: 0; } @media (max-width: 900px) { .aveda { width: calc(100% - 32px); margin: 40px auto; border-radius: 24px; padding: 16px 0 44px; } .aveda__raster { width: auto; margin: 0 16px; } .aveda + .rundgang-band { border-radius: 0; margin-top: 0; } } /* Rundgang: hochauflösendes Salonfoto, kräftiger abgedunkelt für gut lesbaren Text */ .rundgang-band::after { background: radial-gradient(ellipse at center, rgba(20,24,26,.5) 0%, rgba(20,24,26,.7) 100%); } @media (max-width: 767px) { .rundgang-band::after { background: rgba(20,24,26,.6); } .rundgang-band__bild img { object-position: 72% center; } } /* Spenden: Strähnen in voller Höhe, Text beginnt erst darunter */ .spende__kicker { margin-top: 260px; } @media (max-width: 860px) { .spende__kicker { margin-top: 185px; } }