/* ============================================================ beautykollektiv — Live-Site Styles Baut auf brand/tokens.css auf (dort liegen Farben, Typo, Spacing). Build-frei, mobile-first ab 390px. ============================================================ */ @import url("brand/tokens.css"); /* ---------- Reset / Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bk-bg); color: var(--bk-text); font-family: var(--bk-font-body); font-size: var(--bk-text-base); line-height: var(--bk-leading-normal); font-weight: var(--bk-weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--bk-font-display); font-weight: var(--bk-weight-regular); line-height: var(--bk-leading-tight); letter-spacing: var(--bk-tracking-tight); margin: 0 0 var(--bk-space-md); color: var(--bk-text); } h1 { font-size: var(--bk-text-3xl); } h2 { font-size: var(--bk-text-2xl); } h3 { font-size: var(--bk-text-xl); } p { margin: 0 0 var(--bk-space-md); } /* sichtbarer Fokus fuer Tastatur-Navigation */ :focus-visible { outline: 2px solid var(--bk-rose); outline-offset: 3px; border-radius: var(--bk-radius-xs); } /* ---------- Layout-Helfer ---------- */ .wrap { width: 100%; max-width: var(--bk-container); margin-inline: auto; padding-inline: var(--bk-space-md); } .narrow { max-width: var(--bk-container-narrow); } .section { padding-block: var(--bk-space-2xl); } .section--tint { background: var(--bk-bg-surface); border-block: 1px solid var(--bk-border); } .eyebrow { display: inline-block; font-family: var(--bk-font-body); font-size: var(--bk-text-xs); font-weight: var(--bk-weight-semibold); letter-spacing: var(--bk-tracking-wide); text-transform: uppercase; color: var(--bk-rose); margin-bottom: var(--bk-space-sm); } .lead { font-size: var(--bk-text-lg); color: var(--bk-text-muted); line-height: var(--bk-leading-snug); } .muted { color: var(--bk-text-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bk-space-xs); font-family: var(--bk-font-body); font-size: var(--bk-text-base); font-weight: var(--bk-weight-semibold); line-height: 1; padding: 0.95rem 1.6rem; border-radius: var(--bk-radius-pill); border: 1px solid transparent; cursor: pointer; transition: transform var(--bk-dur) var(--bk-ease), background-color var(--bk-dur) var(--bk-ease), border-color var(--bk-dur) var(--bk-ease), color var(--bk-dur) var(--bk-ease); text-align: center; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--bk-espresso); color: var(--bk-creme); } .btn--primary:hover { background: #3a302b; } .btn--accent { background: var(--bk-rose); color: #fff; } .btn--accent:hover { background: #9c726d; } .btn--ghost { background: transparent; color: var(--bk-text); border-color: var(--bk-border-strong); } .btn--ghost:hover { border-color: var(--bk-espresso); } /* WhatsApp-Buttons: nur sichtbar, wenn die Nummer hinterlegt ist. Standard = ausgeblendet. JS setzt data-wa-ready="true" am , wenn WA_NUMBER nicht leer ist. */ .btn--wa { background: #25d366; color: #07371f; } .btn--wa:hover { background: #1fb957; } .wa-only { display: none !important; } html[data-wa-ready="true"] .wa-only { display: inline-flex !important; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244, 238, 231, 0.86); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--bk-border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-md); min-height: 64px; } .nav__logo { display: inline-flex; align-items: center; } .nav__logo img { height: 28px; width: auto; } .nav__links { display: none; align-items: center; gap: var(--bk-space-lg); } .nav__links a { font-size: var(--bk-text-sm); font-weight: var(--bk-weight-medium); color: var(--bk-text-muted); transition: color var(--bk-dur) var(--bk-ease); } .nav__links a:hover { color: var(--bk-text); } .nav__cta { display: none; } @media (min-width: 820px) { .nav__links, .nav__cta { display: inline-flex; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: var(--bk-space-2xl) var(--bk-space-2xl); } .hero__inner { display: grid; gap: var(--bk-space-xl); align-items: center; } .hero h1 { font-size: clamp(2.2rem, 7.5vw, var(--bk-text-4xl)); max-width: 14ch; } .hero__sub { font-size: var(--bk-text-lg); color: var(--bk-text-muted); line-height: var(--bk-leading-snug); max-width: 46ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--bk-space-sm); margin-top: var(--bk-space-md); } .hero__note { margin-top: var(--bk-space-md); font-size: var(--bk-text-sm); color: var(--bk-text-muted); } /* warmes Marken-Motiv: weicher Bogen statt Stock-Foto */ .hero__art { position: relative; border-radius: var(--bk-radius-lg); background: linear-gradient(180deg, #fbf8f4 0%, #f4eee7 100%); border: 1px solid var(--bk-border); box-shadow: var(--bk-shadow-md); padding: var(--bk-space-lg); overflow: hidden; } .hero__art svg { width: 100%; height: auto; } @media (min-width: 920px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } } /* ---------- Problem (Geld-Bezug) ---------- */ .problem-grid { display: grid; gap: var(--bk-space-md); margin-top: var(--bk-space-lg); } .problem-card { background: var(--bk-bg-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-md); padding: var(--bk-space-lg); } .problem-card h3 { margin-bottom: var(--bk-space-xs); } .problem-card p { margin: 0; color: var(--bk-text-muted); font-size: var(--bk-text-sm); } .money-line { margin-top: var(--bk-space-lg); padding: var(--bk-space-lg); border-radius: var(--bk-radius-md); background: var(--bk-beere); color: var(--bk-creme); } .money-line strong { color: var(--bk-gold); font-weight: var(--bk-weight-semibold); } .money-line p { margin: 0; font-size: var(--bk-text-lg); line-height: var(--bk-leading-snug); } @media (min-width: 760px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- Lösung (4 Bausteine) ---------- */ .system-grid { display: grid; gap: var(--bk-space-md); margin-top: var(--bk-space-lg); } .system-card { position: relative; padding: var(--bk-space-lg); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-md); background: #fff; } .system-card__num { font-family: var(--bk-font-display); font-size: var(--bk-text-lg); color: var(--bk-rose); margin-bottom: var(--bk-space-sm); } .system-card h3 { font-size: var(--bk-text-lg); margin-bottom: var(--bk-space-xs); } .system-card p { margin: 0; color: var(--bk-text-muted); font-size: var(--bk-text-sm); } @media (min-width: 720px) { .system-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .system-grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- So funktioniert es (3 Schritte) ---------- */ .steps { display: grid; gap: var(--bk-space-lg); margin-top: var(--bk-space-lg); counter-reset: step; } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--bk-space-md); align-items: start; } .step__badge { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--bk-radius-pill); background: var(--bk-creme); border: 1px solid var(--bk-border-strong); font-family: var(--bk-font-display); font-size: var(--bk-text-lg); color: var(--bk-espresso); } .step h3 { margin-bottom: var(--bk-space-2xs); font-size: var(--bk-text-lg); } .step p { margin: 0; color: var(--bk-text-muted); } @media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } } /* ---------- Demo ---------- */ .demo-section { text-align: center; } .demo-section .narrow { margin-inline: auto; } .demo-frame { margin-top: var(--bk-space-lg); display: flex; justify-content: center; } /* ---------- Pakete ---------- */ .pricing-grid { display: grid; gap: var(--bk-space-lg); margin-top: var(--bk-space-xl); align-items: stretch; } .price-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); padding: var(--bk-space-lg); } .price-card--featured { border: 2px solid var(--bk-rose); box-shadow: var(--bk-shadow-lg); position: relative; } .price-card--featured .price-card__tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--bk-rose); color: #fff; font-size: var(--bk-text-xs); font-weight: var(--bk-weight-semibold); letter-spacing: var(--bk-tracking-wide); text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: var(--bk-radius-pill); white-space: nowrap; } .price-card__name { font-family: var(--bk-font-display); font-size: var(--bk-text-xl); margin-bottom: var(--bk-space-2xs); } .price-card__for { color: var(--bk-text-muted); font-size: var(--bk-text-sm); margin-bottom: var(--bk-space-md); min-height: 2.8em; } .price-card__price { margin-bottom: var(--bk-space-md); padding-bottom: var(--bk-space-md); border-bottom: 1px solid var(--bk-border); } .price-card__setup { font-family: var(--bk-font-display); font-size: var(--bk-text-2xl); display: block; line-height: 1.1; } .price-card__setup small { font-family: var(--bk-font-body); font-size: var(--bk-text-sm); color: var(--bk-text-muted); font-weight: var(--bk-weight-regular); } .price-card__monthly { font-size: var(--bk-text-base); color: var(--bk-text-muted); margin-top: var(--bk-space-2xs); } .price-card__monthly strong { color: var(--bk-text); font-weight: var(--bk-weight-semibold); } .feature-list { list-style: none; padding: 0; margin: 0 0 var(--bk-space-lg); display: grid; gap: var(--bk-space-sm); flex: 1; } .feature-list li { display: grid; grid-template-columns: 1.4em 1fr; gap: var(--bk-space-xs); font-size: var(--bk-text-sm); align-items: start; } .feature-list .mark { font-weight: var(--bk-weight-semibold); line-height: 1.5; } .feature-list .yes .mark { color: var(--bk-rose); } .feature-list .no { color: var(--bk-text-muted); } .feature-list .no .mark { color: var(--bk-border-strong); } .feature-list .no span:last-child { text-decoration: line-through; text-decoration-color: var(--bk-border-strong); opacity: 0.7; } .pricing-note { margin-top: var(--bk-space-lg); text-align: center; font-size: var(--bk-text-sm); color: var(--bk-text-muted); } @media (min-width: 860px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } .price-card--featured { transform: translateY(-12px); } } /* ---------- FAQ / Einwände ---------- */ .faq { margin-top: var(--bk-space-lg); display: grid; gap: var(--bk-space-sm); } .faq details { border: 1px solid var(--bk-border); border-radius: var(--bk-radius-md); background: #fff; overflow: hidden; } .faq summary { cursor: pointer; list-style: none; padding: var(--bk-space-md) var(--bk-space-lg); font-family: var(--bk-font-display); font-size: var(--bk-text-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-md); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--bk-font-body); font-size: var(--bk-text-xl); color: var(--bk-rose); transition: transform var(--bk-dur) var(--bk-ease); line-height: 1; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: 0; padding: 0 var(--bk-space-lg) var(--bk-space-md); color: var(--bk-text-muted); } /* ---------- Über (Brand Story) ---------- */ .story { background: var(--bk-beere); color: var(--bk-creme); border-radius: var(--bk-radius-lg); padding: var(--bk-space-xl); margin-top: var(--bk-space-lg); } .story .eyebrow { color: var(--bk-gold); } .story h2 { color: var(--bk-creme); } .story p { color: #efe6dd; font-size: var(--bk-text-lg); line-height: var(--bk-leading-snug); } .story p:last-child { margin-bottom: 0; } .story .signoff { margin-top: var(--bk-space-lg); font-family: var(--bk-font-display); font-size: var(--bk-text-lg); color: var(--bk-gold); } /* ---------- Abschluss-CTA ---------- */ .final-cta { text-align: center; } .final-cta__box { background: var(--bk-bg-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); padding: var(--bk-space-xl); box-shadow: var(--bk-shadow-md); } .final-cta h2 { max-width: 22ch; margin-inline: auto; } .final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--bk-space-sm); justify-content: center; margin-top: var(--bk-space-lg); } .final-cta__mail { margin-top: var(--bk-space-md); font-size: var(--bk-text-sm); color: var(--bk-text-muted); } .final-cta__mail a { color: var(--bk-rose); font-weight: var(--bk-weight-medium); } /* ---------- Footer ---------- */ .site-footer { background: var(--bk-espresso); color: #d8cfc6; padding-block: var(--bk-space-xl); font-size: var(--bk-text-sm); } .site-footer .wrap { display: grid; gap: var(--bk-space-lg); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--bk-space-lg); justify-content: space-between; align-items: flex-start; } .footer-brand img { height: 26px; width: auto; filter: brightness(0) invert(1) opacity(0.9); } .footer-tag { margin-top: var(--bk-space-sm); max-width: 34ch; color: #b7ada3; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--bk-space-md); } .footer-links a { color: #d8cfc6; transition: color var(--bk-dur) var(--bk-ease); } .footer-links a:hover { color: var(--bk-gold); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--bk-space-md); color: #9c9289; display: flex; flex-wrap: wrap; gap: var(--bk-space-sm) var(--bk-space-md); justify-content: space-between; } /* ---------- Legal-Seiten (Impressum / Datenschutz) ---------- */ .legal { padding-block: var(--bk-space-2xl); } .legal h1 { font-size: var(--bk-text-2xl); } .legal h2 { font-size: var(--bk-text-xl); margin-top: var(--bk-space-xl); } .legal p, .legal li { color: var(--bk-text); } .legal address { font-style: normal; line-height: var(--bk-leading-snug); margin-bottom: var(--bk-space-md); } .legal a { color: var(--bk-rose); } .back-link { display: inline-flex; align-items: center; gap: var(--bk-space-2xs); font-size: var(--bk-text-sm); color: var(--bk-text-muted); margin-bottom: var(--bk-space-lg); } /* ---------- Skip-Link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--bk-espresso); color: var(--bk-creme); padding: 0.6rem 1rem; border-radius: 0 0 var(--bk-radius-sm) 0; z-index: 100; } .skip-link:focus { left: 0; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }