/* ========================================================== Fiore Felice — Design-System (abgeleitet aus Pflegehinweise-Referenz) ========================================================== */ :root { --gold-1: #C39955; --gold-2: #D9BD74; /* helles Champagner-Gold — das rechte Ende des Verlaufs im Logo */ --gold-3: #E6DDA4; --petrol: #3B7E96; --petrol-dark: #2E6579; --ink: #2B2620; --ink-soft: #6b6459; --paper: #FBF8F3; --paper-2: #F3ECE0; --line: rgba(43, 38, 32, 0.1); --serif: 'Cormorant Garamond', serif; --sans: 'Jost', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* Container für den gemeinsamen Gold-Verlauf der Logo-Blume — nicht sichtbar, muss aber im Layout bleiben, damit url(#ffGold) überall auflösbar ist. */ .ff-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Die Logo-Tulpe wird vom 46px-Header bis zur 320px-Illustration eingesetzt. Damit die Linien überall gleich fein wirken, skaliert die Strichstärke nicht mit — sie wird je Kontext in Pixeln gesetzt. */ .ff-tulip path { vector-effect: non-scaling-stroke; } .brand-mark path { stroke-width: 1.2px; } .footer-mark path { stroke-width: 1.6px; } .feature-ic .ff-tulip path { stroke-width: 1.9px; } .care-cta-illu .ff-tulip path { stroke-width: 2.1px; } a { color: inherit; text-decoration: none; } .container { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; } .eyebrow { font-family: var(--sans); letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.72rem; color: var(--gold-1); } /* ========================================================== Animationen — nur aktiv, wenn JavaScript läuft (.js auf ). Ohne JS bleiben alle Inhalte normal sichtbar (Progressive Enhancement), damit die Seite überall identisch aussieht, auch wenn JS mal ausfällt. ========================================================== */ /* ---------- Reveal-Animation ---------- */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Zeichen-Animation für Illustrationen (Linien "malen" sich) */ .js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease; } .js .reveal.is-visible .draw { stroke-dashoffset: 0; } /* Wasser läuft einmalig ins Glas */ .js .water { transform: scaleY(0); transform-origin: bottom; transition: transform 1s ease .9s; } .js .reveal.is-visible .water { transform: scaleY(1); } /* Trennlinie wächst von der Mitte aus */ .js .reveal .divider { width: 0; transition: width 0.7s ease .25s; } .js .reveal.is-visible .divider { width: 46px; } /* Gestaffeltes Erscheinen von Karten, Logos & Zeilen */ .features .feature-card:nth-child(1) { transition-delay: 0s; } .features .feature-card:nth-child(2) { transition-delay: .1s; } .features .feature-card:nth-child(3) { transition-delay: .2s; } .features .feature-card:nth-child(4) { transition-delay: .3s; } .js .partner-logo { opacity: 0; transform: scale(0.8); } .js .partners-strip.reveal.is-visible .partner-logo { opacity: 0.85; transform: scale(1); } .partners-strip .partner-logo:nth-child(1) { transition-delay: 0s; } .partners-strip .partner-logo:nth-child(2) { transition-delay: .1s; } .partners-strip .partner-logo:nth-child(3) { transition-delay: .2s; } .partners-strip .partner-logo:nth-child(4) { transition-delay: .3s; } .contact-card .contact-row { transition: opacity .6s ease, transform .6s ease; } .js .contact-card.reveal:not(.is-visible) .contact-row { opacity: 0; transform: translateX(-10px); } .contact-card .contact-row:nth-child(1) { transition-delay: .1s; } .contact-card .contact-row:nth-child(2) { transition-delay: .2s; } .contact-card .contact-row:nth-child(3) { transition-delay: .3s; } .contact-people .person { transition: opacity .6s ease, transform .6s ease; } .js .contact-people.reveal:not(.is-visible) .person { opacity: 0; transform: translateX(10px); } .contact-people .person:nth-child(1) { transition-delay: .15s; } .contact-people .person:nth-child(2) { transition-delay: .3s; } /* Hero: Text fährt beim Laden sanft und gestaffelt hoch */ @keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .js .hero .eyebrow, .js .hero h1, .js .hero .subtitle, .js .hero .btn-gold, .js .hero .btn-petrol { opacity: 0; animation: heroUp 0.9s ease forwards; } .js .hero .eyebrow { animation-delay: .2s; } .js .hero h1 { animation-delay: .35s; } .js .hero .subtitle { animation-delay: .55s; } .js .hero .btn-gold, .js .hero .btn-petrol { animation-delay: .75s; } .js .hero .scroll-hint { opacity: 0; animation: heroUp 0.9s ease .95s forwards, bob 2.4s ease-in-out infinite 1.9s; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 64px); /* Kein Balken: Der Hintergrund der jeweiligen Sektion bleibt sichtbar, nur die Schriftfarbe wechselt, sobald der Header das dunkle Hero verlässt (Klasse .scrolled kommt aus script.js). */ background: none; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { height: 52px; width: auto; } .brand .wordmark { font-family: var(--serif); font-size: 1.75rem; letter-spacing: 0.03em; color: var(--petrol); transition: color 0.4s ease; } /* Über dem dunklen Foto: aufgehelltes Petrol statt des dunklen Tons, sonst wäre der Kontrast ohne Balken zu schwach. */ .site-header:not(.scrolled) .brand .wordmark { color: #A9CEDD; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } .site-header.scrolled .brand .wordmark { text-shadow: 0 1px 8px rgba(251, 248, 243, 0.9); } /* Beide Zustände bekommen einen weichen Schein in der Gegenfarbe. Dadurch bleibt die Schrift auch in dem kurzen Moment lesbar, in dem der Header über dem Übergang von Foto zu Creme steht. */ .nav-link { transition: color 0.4s ease; } .site-header:not(.scrolled) .nav-link { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .site-header.scrolled .nav-link { color: var(--ink); text-shadow: 0 1px 8px rgba(251,248,243,0.9); } .nav-links { display: flex; align-items: center; /* Links sitzen mittig zur Höhe des Kontakt-Buttons */ gap: 38px; list-style: none; margin: 0; padding: 0; } .nav-links li { display: flex; align-items: center; } .nav-link { font-size: 1.05rem; letter-spacing: 0.02em; position: relative; padding: 4px 0; /* symmetrisch, damit die Textmitte auf der Button-Mitte liegt */ } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-1); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-link:hover::after { transform: scaleX(1); } .header-cta { display: inline-block; padding: 11px 28px; border-radius: 999px; border: 1px solid var(--gold-1); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-1) !important; text-shadow: none !important; transition: background 0.3s ease, color 0.3s ease; } .site-header:not(.scrolled) .header-cta { border-color: rgba(255,255,255,0.7); color: #fff !important; } .header-cta:hover { background: var(--gold-1); color: #fff !important; } .nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; z-index: 60; } .nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: #fff; transition: background 0.3s ease; } .site-header.scrolled .nav-toggle span, body.nav-open .nav-toggle span { background: var(--ink); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 20px 100px; color: #fff; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 30%; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,26,0.55) 0%, rgba(20,24,26,0.72) 55%, rgba(20,24,26,0.85) 100%); } /* Markenzeile über der Headline — deutlich größer und in Logo-Gold. */ .hero .eyebrow { font-family: var(--serif); font-size: clamp(1.35rem, 3.4vw, 2.1rem); font-weight: 500; letter-spacing: 0.16em; text-transform: none; color: var(--gold-2); background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0; } .hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.08; margin: 18px 0 22px; max-width: 16ch; } .hero .subtitle { font-size: 1.05rem; font-weight: 300; max-width: 46ch; color: rgba(255,255,255,0.88); margin: 0 0 40px; letter-spacing: 0.01em; } .btn-gold, .btn-petrol { display: inline-flex; align-items: center; gap: 10px; padding: 16px 38px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #fff; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(195,153,85,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-gold:hover, .btn-petrol:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(195,153,85,0.45); } /* Petrol-Variante — dieselbe Form, Farbe aus dem Logo-Hintergrund, Beschriftung in Gold statt Weiß. */ .btn-petrol { background: linear-gradient(135deg, var(--petrol), var(--petrol-dark)); box-shadow: 0 10px 30px rgba(59, 126, 150, 0.4); color: var(--gold-2); } .btn-petrol:hover { box-shadow: 0 14px 34px rgba(59, 126, 150, 0.5); } .scroll-hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- Sections ---------- */ .section { padding: 110px 0; } .section-tight { padding: 70px 0; } .section-alt { background: var(--paper-2); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; } .section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0 18px; } .section-head p { color: var(--ink-soft); font-size: 1.05rem; } .divider { width: 46px; height: 2px; margin: 0 auto; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); border-radius: 2px; } /* ---------- Pflege-CTA ---------- */ .care-cta { background: var(--paper-2); } .care-cta-inner { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; max-width: 900px; margin: 0 auto; } .care-cta-illu svg { width: 180px; height: auto; } .care-cta-text .eyebrow { display: block; margin-bottom: 12px; } .care-cta-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; margin-bottom: 16px; } .care-cta-text p { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 28px; } @media (max-width: 700px) { .care-cta-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; justify-items: center; } .care-cta-illu svg { width: 140px; } } /* ---------- Philosophie ---------- */ .philosophy { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .philosophy-illu svg { width: 100%; height: auto; max-width: 360px; margin: 0 auto; display: block; } /* Freigestelltes Strauß-Foto — breiter als die frühere Zeichnung, weil das Motiv querformatig ist. */ .philosophy-foto { width: 100%; height: auto; max-width: 500px; margin: 0 auto; display: block; } .philosophy-text .eyebrow { display: block; margin-bottom: 14px; } .philosophy-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 20px; line-height: 1.2; } .philosophy-text p { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 14px; } /* ---------- Feature cards ---------- */ .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .feature-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px 26px; text-align: center; transition: transform 0.35s ease, box-shadow 0.35s ease; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(43,38,32,0.08); } .feature-ic { width: 52px; height: 52px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .feature-ic svg { width: 100%; height: 100%; } .feature-card h3 { font-size: 1.3rem; margin-bottom: 10px; } .feature-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; } /* ---------- Geschichte ---------- */ .story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; } .story-photo { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(43,38,32,0.15); } .story-photo img { width: 100%; height: 100%; object-fit: cover; } .story-text .eyebrow { display: block; margin-bottom: 14px; } .story-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 20px; line-height: 1.2; } .story-text p { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 16px; } .quote { margin: 30px 0 0; padding: 24px 0 24px 26px; border-left: 2px solid var(--gold-1); font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); } .quote cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Partners ---------- */ .partners-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 80px); } .partner-logo { height: 64px; width: 64px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; filter: grayscale(45%); transition: filter 0.3s ease, opacity 0.6s ease, transform 0.6s ease; } .partner-logo img { width: 78%; height: 78%; object-fit: contain; } .partner-logo:hover { filter: grayscale(0%); opacity: 1; transform: translateY(-3px); } /* ---------- Kontakt ---------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .contact-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 40px; } .contact-card h3 { font-size: 1.4rem; margin-bottom: 18px; } .contact-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; } .contact-row:last-child { border-bottom: none; } .contact-row .ic { color: var(--gold-1); flex-shrink: 0; } .contact-row a:hover { color: var(--gold-1); } .contact-people { display: grid; gap: 18px; } .person { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .person .name { font-family: var(--serif); font-size: 1.2rem; } .person .phone { font-size: 0.95rem; color: var(--ink-soft); } .person .phone:hover { color: var(--gold-1); } /* ---------- Footer ---------- */ .site-footer { background: #201d18; color: rgba(255,255,255,0.7); padding: 70px 0 30px; text-align: center; } .footer-mark { height: 74px; width: auto; display: block; margin: 0 auto 18px; } .footer-slogan { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold-2); margin: 0 0 30px; } .footer-legal { font-size: 0.78rem; line-height: 1.9; color: rgba(255,255,255,0.45); border-top: 1px solid rgba(255,255,255,0.1); margin-top: 30px; padding-top: 26px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-links { position: fixed; inset: 0; background: var(--paper); flex-direction: column; align-items: center; justify-content: center; gap: 34px; transform: translateY(-100%); transition: transform 0.4s ease; z-index: 55; } .nav-links .nav-link { color: var(--ink) !important; text-shadow: none !important; font-size: 1.3rem; } .nav-links .header-cta { border-color: var(--gold-1); color: var(--gold-1) !important; } body.nav-open .nav-links { transform: translateY(0); } .nav-toggle { display: block; } .philosophy, .story, .contact { grid-template-columns: 1fr; } .story-photo { order: -1; } .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .features { grid-template-columns: 1fr; } .section { padding: 76px 0; } .person { flex-direction: column; align-items: flex-start; gap: 6px; } } /* Feinschliff: gleiche Farbwelt, klarere Kontraste und ruhigere Details. */ :focus-visible { outline: 2px solid var(--petrol); outline-offset: 6px; } .hero :focus-visible, .site-header:not(.scrolled) :focus-visible { outline-color: var(--gold-3); } section[id] { scroll-margin-top: 110px; } h1, h2 { text-wrap: balance; } .btn-gold { color: var(--ink); font-weight: 500; } .btn-petrol { color: #fff8e8; font-weight: 400; background: linear-gradient(135deg, #30677b, #254f60); } .header-cta::after { display: none; } .feature-card { border-color: rgba(195,153,85,.24); background: linear-gradient(160deg, #fff, #fdfaf5); } .partner-logo { width: 84px; height: 84px; } .footer-legal { color: rgba(255,255,255,.72); } .contact-row a, .person .phone { text-underline-offset: 4px; } .contact-row a:hover, .person .phone:hover { color: var(--petrol-dark); text-decoration: underline; } .nav-toggle { min-width: 44px; min-height: 44px; } .nav-toggle span { transition: transform .25s ease, opacity .25s ease, background .25s ease; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-links { visibility: hidden; transition: transform .4s ease, visibility .4s; } body.nav-open { overflow: hidden; } body.nav-open .nav-links { visibility: visible; } } @media (max-width: 560px) { .site-header { padding: 14px 20px; } .brand-mark { height: 44px; } .brand .wordmark { font-size: 1.5rem; } .hero { min-height: 100svh; } .contact-card { padding: 28px 22px; } .section-head { margin-bottom: 40px; } .philosophy, .story, .contact { gap: 36px; } } /* Bewegungsarme Darstellung respektiert die Systemeinstellung. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal, .js .partner-logo, .js .hero .eyebrow, .js .hero h1, .js .hero .subtitle, .js .hero .btn-gold, .js .hero .btn-petrol, .js .hero .scroll-hint, .js .contact-row, .js .person { opacity: 1 !important; } .js .reveal, .js .partner-logo, .js .contact-row, .js .person { transform: none !important; } .js .draw { stroke-dashoffset: 0 !important; } .js .water { transform: scaleY(1) !important; } }