/* =========================================================
Golden Light Beauty — Soft Rose & Cream Theme
Clean, airy, feminine — inspiriert an "Glatt & Schön"
========================================================= */
:root {
color-scheme: light only;
/* Base — alles in einer Rose-Creme-Familie */
--bg-0: #fdf5f2; /* main page background — soft blush-cream */
--bg-1: #fbe8e1; /* section bg — warm blush */
--bg-2: #fff9f5; /* cards / surfaces — warm off-white mit rose-Ton */
--bg-3: #f9dad0; /* deeper blush für Akzentflächen */
--surface: #fff9f5; /* alias — alle "weißen" Flächen */
--surface-soft: #fefaf7; /* noch etwas heller */
--bg-peach: linear-gradient(180deg, #fbe8e1 0%, #f6c8ba 100%);
--line: rgba(74, 35, 49, 0.09);
--line-strong: rgba(74, 35, 49, 0.18);
/* Rose — eine durchgehende Akzentfamilie */
--rose-50: #fef1ec;
--rose-100: #fbdcd3;
--rose-200: #f4bbb0;
--rose-300: #e69791;
--rose-400: #d4757e; /* primary button */
--rose-500: #c15968; /* hover / price / accent */
--rose-600: #a0424f;
--rose-700: #7c3341;
/* Text — alle in der Rose-Charcoal-Familie (keine Gold-/Navy-Akzente) */
--text-0: #2d1820; /* headline — tief rose-charcoal */
--text-1: #3d2830; /* body strong */
--text-2: #6a4f58; /* body normal */
--text-3: #a08288; /* muted / hints */
/* Footer */
--footer-bg: linear-gradient(180deg, #6b2b38 0%, #4a2029 100%);
--footer-fg: #f8dfd9;
--footer-accent: #eab5af;
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 32px;
--radius-pill: 999px;
--ease: cubic-bezier(.2,.7,.2,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--shadow-xs: 0 4px 12px -4px rgba(61, 38, 48, 0.08);
--shadow-sm: 0 10px 28px -14px rgba(61, 38, 48, 0.15);
--shadow-md: 0 24px 50px -24px rgba(61, 38, 48, 0.20);
--shadow-rose: 0 18px 40px -14px rgba(204, 125, 135, 0.45);
--font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
--font-script: 'Allura', 'Great Vibes', 'Cormorant Garamond', cursive;
--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Globale Regel: HTML [hidden] Attribut muss immer greifen, auch
wenn eine Klasse display:flex/inline-flex/grid setzt */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
overflow-x: clip;
width: 100%;
max-width: 100%;
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: var(--text-1);
background: var(--bg-0);
overflow-x: clip;
width: 100%;
max-width: 100%;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
em { font-style: italic; }
body.is-modal-open { overflow: hidden; }
/* Grain (subtil, kaum sichtbar) ---------------------------- */
.grain { display: none; }
/* Typography ----------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
color: var(--text-0);
letter-spacing: -0.005em;
line-height: 1.12;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; }
h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: 0; }
h4 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
h1 em, h2 em {
font-style: italic;
color: var(--rose-400);
font-weight: 400;
}
p { color: var(--text-2); }
.section {
position: relative;
padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 4vw, 3rem);
max-width: 1240px;
margin: 0 auto;
}
.section__head {
text-align: center;
max-width: 780px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-500);
margin-bottom: 1rem;
}
.section__eyebrow::before,
.section__eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--rose-300);
}
.section__title {
margin-bottom: 1rem;
}
.section__lead {
font-size: 1.05rem;
color: var(--text-2);
max-width: 640px;
margin: 0 auto;
line-height: 1.75;
}
/* Buttons --------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 1rem 2rem;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: var(--radius-pill);
transition: all .3s var(--ease);
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
line-height: 1;
}
.btn__arrow {
display: inline-block;
transition: transform .3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary {
background: var(--rose-400);
color: #fff;
box-shadow: var(--shadow-rose);
}
.btn--primary:hover {
background: var(--rose-500);
transform: translateY(-2px);
box-shadow: 0 22px 44px -14px rgba(184, 98, 112, 0.55);
}
.btn--primary:active { transform: translateY(0); }
/* Disabled state — klar sichtbar, aber erkennbar deaktiviert */
.btn:disabled,
.btn[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.btn--primary:disabled,
.btn--primary[disabled] {
background: var(--rose-100);
color: var(--rose-400);
box-shadow: none;
transform: none;
border: 1.5px solid var(--rose-200);
opacity: 1;
}
.btn--primary:disabled .btn__arrow,
.btn--primary[disabled] .btn__arrow { color: var(--rose-400); }
.btn--ghost:disabled,
.btn--ghost[disabled] {
opacity: 0.55;
color: var(--text-3);
border-color: var(--line);
}
.btn--ghost {
background: transparent;
color: var(--text-1);
border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
background: var(--bg-3);
border-color: var(--rose-300);
color: var(--rose-500);
}
.btn--block { width: 100%; }
/* Navigation ----------------------------------------------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(253, 245, 242, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: all .3s var(--ease);
}
.nav.is-scrolled {
background: rgba(253, 245, 242, 0.96);
border-bottom-color: var(--rose-100);
box-shadow: 0 4px 18px -10px rgba(160, 66, 79, 0.12);
}
.nav__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0.9rem clamp(1rem, 2.5vw, 2rem);
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.nav__inner > * { min-width: 0; }
.nav__logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--text-0);
font-weight: 500;
letter-spacing: 0.05em;
}
.nav__logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--rose-400);
font-size: 1.3rem;
flex-shrink: 0;
}
/* Wenn nav__logo-mark ein ![]()
ist (statt Text-Triangle), Bild rund schneiden
und an die Box-Maße anpassen. object-fit:cover sorgt dafuer, dass das Logo
die Box komplett ausfuellt — das Bild ist quadratisch, also kein Verzerren. */
img.nav__logo-mark {
border-radius: 50%;
object-fit: cover;
background: transparent;
}
.nav__logo-text {
line-height: 1;
}
.nav__logo-text em {
color: var(--rose-400);
font-style: italic;
}
.nav__links {
display: flex;
align-items: center;
gap: 0.05rem;
margin-left: auto;
}
.nav__links a {
position: relative;
display: inline-block;
padding: 0.55rem 0.7rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
transition: color .3s var(--ease);
white-space: nowrap;
}
.nav__links a:hover { color: var(--rose-500); }
.nav__links a.is-active {
color: var(--rose-500);
}
.nav__links a.is-active::after {
content: "";
position: absolute;
left: 0.7rem; right: 0.7rem;
bottom: 0.15rem;
height: 2px;
background: var(--rose-400);
border-radius: 2px;
}
.nav__links-termine a {
color: var(--rose-500);
}
/* Wrapper um CTA + Cart-Button: auf Desktop transparent (display:contents)
sodass Layout unverändert bleibt; auf Mobile dient er im offenen Burger-
Menü als zentrierter Flex-Container für die beiden Buttons. */
.nav__actions { display: contents; }
.nav__cta {
height: 44px;
padding: 0 1.6rem;
font-size: 0.72rem;
gap: 0.45rem;
}
.nav__cta::before {
content: "";
width: 14px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.nav__cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: rgba(255, 249, 245, 0.8);
border: 1px solid var(--rose-100);
color: var(--text-1);
transition: all .3s var(--ease);
}
.nav__cart:hover {
background: var(--surface);
color: var(--rose-500);
border-color: var(--rose-200);
transform: translateY(-1px);
}
.nav__cart:focus-visible {
outline: 2px solid var(--rose-400);
outline-offset: 2px;
}
.nav__cart-icon { width: 22px; height: 22px; }
.nav__cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--rose-400);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.4);
transition: all .25s var(--ease);
box-shadow: 0 4px 10px -2px rgba(204, 125, 135, 0.45);
}
.nav__cart.has-items .nav__cart-badge {
opacity: 1;
transform: scale(1);
}
.nav__cart.is-bump { animation: navCartBump .5s var(--ease); }
@keyframes navCartBump {
0% { transform: scale(1); }
45% { transform: scale(1.15); }
100% { transform: scale(1); }
}
/* nav__right gruppiert Konto-Button + Burger als rechte Gruppe.
Auf Desktop transparent (display:contents) — Account und Burger verhalten
sich wie direkte children von nav__inner. Auf Mobile (siehe Burger-Block,
max-width 1440px) wird er zum Flex-Container, der die Gruppe per
margin-left:auto rechtsbuendig schiebt — damit Account direkt links neben
dem Burger sitzt, ohne Selector-Akrobatik mit ~ oder :has(). */
.nav__right { display: contents; }
/* ----- Konto-Menü im Header (eingeloggter User) ----- */
.nav__account {
position: relative;
display: inline-flex;
}
.nav__account-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 44px;
padding: 0 0.85rem 0 0.4rem;
background: rgba(255, 249, 245, 0.8);
border: 1px solid var(--rose-100);
border-radius: var(--radius-pill);
color: var(--text-1);
font: inherit;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: all .3s var(--ease);
}
.nav__account-btn:hover {
background: var(--surface);
color: var(--rose-500);
border-color: var(--rose-200);
transform: translateY(-1px);
}
.nav__account-btn:focus-visible {
outline: 2px solid var(--rose-400);
outline-offset: 2px;
}
.nav__account-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400), var(--rose-500));
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Gast-Variante: dezenter, mit Person-Icon statt Initialen */
.nav__account--guest .nav__account-avatar {
background: var(--surface);
color: var(--rose-500);
border: 1px solid var(--rose-200);
}
.nav__account--guest .nav__account-avatar svg { width: 18px; height: 18px; }
.nav__account-caret {
font-size: 0.7rem;
opacity: 0.7;
transition: transform .2s var(--ease);
}
.nav__account-btn[aria-expanded="true"] .nav__account-caret { transform: rotate(180deg); }
.nav__account-menu {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
min-width: 240px;
background: #fff;
border: 1px solid var(--rose-100);
border-radius: var(--radius-md);
box-shadow: 0 16px 40px -12px rgba(70, 30, 35, 0.18);
padding: 0.5rem;
z-index: 100;
animation: navAccountMenuIn .18s var(--ease);
}
@keyframes navAccountMenuIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.nav__account-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 0.85rem 0.85rem;
border-bottom: 1px solid var(--rose-100);
margin-bottom: 0.4rem;
}
.nav__account-name { color: var(--rose-400); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }
.nav__account-email { color: var(--text-2); font-size: 0.78rem; word-break: break-word; }
.nav__account-link {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.65rem 0.85rem;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-1);
font: inherit;
font-size: 0.86rem;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__account-link:hover,
.nav__account-link:focus-visible {
background: var(--rose-50, #fdecee);
color: var(--rose-500);
outline: none;
}
.nav__account-link svg { color: var(--rose-500); flex-shrink: 0; }
.nav__account-logout { color: var(--text-2); }
.nav__account-logout svg { color: var(--text-2); }
.nav__account-logout:hover svg { color: var(--rose-500); }
/* Mobile: Label/Caret weg, Button bleibt 44px hoch und damit gleich groß
wie nav__cta und nav__cart (siehe Mobile-Block für nav__cart). */
@media (max-width: 880px) {
.nav__account-btn {
padding: 0 0.4rem;
}
.nav__account-label,
.nav__account-caret { display: none; }
.nav__account-menu {
right: 0;
min-width: 220px;
}
}
.nav__burger {
display: none;
flex-direction: column;
gap: 5px;
width: 28px;
z-index: 3;
}
.nav__burger span {
display: block;
height: 2px;
background: var(--text-1);
border-radius: 2px;
transition: all .3s var(--ease);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Hero ----------------------------------------------------- */
.hero {
position: relative;
padding-top: clamp(6rem, 11vw, 8rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
/* Warm-beige-rosa Gradient, der farblich zum Bild (warmer beige Hintergrund,
goldene Laser-Effekte) passt — so wirken Bild + Hintergrund wie ein Ganzes */
background: linear-gradient(135deg, #fdf5f2 0%, #f5e6d8 45%, #f6d5c9 100%);
overflow: hidden;
}
/* Hide the old decorative layers */
.hero__bg, .hero__gradient, .hero__rays, .hero__core, .hero__beam, .particles { display: none; }
.hero__inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
order: 1;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-500);
margin-bottom: 1.6rem;
}
.pulse-dot {
width: 8px; height: 8px;
background: var(--rose-400);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(204, 125, 135, 0.6);
animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(204, 125, 135, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(204, 125, 135, 0); }
100% { box-shadow: 0 0 0 0 rgba(204, 125, 135, 0); }
}
.hero__title {
font-size: clamp(2.6rem, 5.8vw, 5rem);
font-weight: 500;
line-height: 1.04;
margin-bottom: 1.6rem;
color: var(--text-0);
letter-spacing: -0.01em;
}
.hero__title span { display: block; }
.hero__title-accent {
color: var(--rose-400);
font-style: italic;
font-weight: 400;
}
/* Preserve split animation skeleton (used by script.js) */
.hero__title.split span > span { display: inline-block; }
.hero__subtitle {
font-size: 1.08rem;
color: var(--text-2);
max-width: 560px;
margin-bottom: 2rem;
line-height: 1.75;
}
.hero__subtitle em {
color: var(--rose-500);
font-style: italic;
font-weight: 500;
}
/* Check-Liste direkt unter Subtitle */
.hero__checks {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 2.2rem;
}
.hero__checks li {
display: flex;
align-items: center;
gap: 0.9rem;
font-size: 0.98rem;
color: var(--text-1);
font-weight: 500;
}
.hero__checks .check-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid var(--rose-300);
color: var(--rose-500);
flex-shrink: 0;
background: var(--surface);
}
.hero__checks .check-circle svg { width: 14px; height: 14px; }
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.2rem;
}
/* Social proof strip */
.hero__proof {
display: flex;
align-items: center;
gap: 1rem;
}
.hero__proof-avatars {
display: inline-flex;
}
.hero__proof-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--bg-0);
margin-right: -14px;
object-fit: cover;
box-shadow: 0 2px 6px -2px rgba(160, 66, 79, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--surface);
}
.hero__proof-avatar:last-child {
margin-right: 0;
}
.hero__proof-avatar--initial {
background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
color: #fff;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
}
.hero__proof-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.hero__proof-stars {
color: var(--rose-400);
font-size: 0.95rem;
letter-spacing: 0.1em;
}
.hero__proof-label {
font-size: 0.85rem;
color: var(--text-2);
}
/* Hero image side */
.hero__image {
position: relative;
order: 2;
aspect-ratio: 4 / 5;
/* Abgerundete Ecken — Hero-Gradient scheint an weichen Kanten durch,
weil der Container-Hintergrund transparent ist */
border-radius: var(--radius-lg);
overflow: hidden;
background: transparent;
box-shadow: 0 18px 42px -20px rgba(180, 135, 110, 0.25);
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
/* Moderater Fade — Frau bleibt klar erkennbar, nur die Ränder verblassen sanft */
-webkit-mask-image: radial-gradient(ellipse 80% 87% at 50% 45%, black 40%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.2) 92%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 87% at 50% 45%, black 40%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.2) 92%, transparent 100%);
}
.hero__image-frame { display: none; }
/* Round badge over hero image */
.hero__badge {
position: absolute;
right: -24px;
bottom: 4%;
width: clamp(150px, 17vw, 200px);
height: clamp(150px, 17vw, 200px);
border-radius: 50%;
background: var(--surface);
box-shadow: 0 16px 36px -12px rgba(61, 38, 48, 0.22);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
font-family: var(--font-serif);
line-height: 1.3;
}
.hero__badge-heart {
color: var(--rose-400);
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.hero__badge-top,
.hero__badge-bottom {
font-size: 0.95rem;
color: var(--text-0);
font-weight: 500;
}
.hero__badge-mid {
font-style: italic;
color: var(--rose-400);
font-size: 1.35rem;
font-weight: 400;
margin: 0.1rem 0;
}
/* Old hero__stats — hide */
.hero__stats { display: none; }
/* Feature strip (unter Hero) -------------------------------- */
.features-strip {
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border-top: 1px solid var(--rose-100);
border-bottom: 1px solid var(--rose-100);
}
.features-strip__inner {
max-width: 1240px;
margin: 0 auto;
padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.feature-item__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rose-500);
background: var(--rose-50);
}
.feature-item__icon svg { width: 22px; height: 22px; }
.feature-item__body h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--text-0);
margin-bottom: 0.3rem;
}
.feature-item__body p {
font-size: 0.9rem;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
/* Trust bar ------------------------------------------------- */
.trustbar {
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-3) 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.trustbar__inner {
max-width: 1400px;
margin: 0 auto;
padding: 1.2rem clamp(1rem, 3vw, 2rem);
display: flex;
align-items: center;
justify-content: space-around;
gap: 1rem;
flex-wrap: wrap;
}
.trustbar__item {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-1);
}
.trustbar__icon {
color: var(--rose-400);
font-size: 1rem;
}
.trustbar__divider {
width: 1px;
height: 14px;
background: var(--line-strong);
}
/* Showcase — "Entdecke die Freiheit glatter Haut" ---------- */
.showcase {
background: var(--bg-peach);
padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem);
position: relative;
overflow: hidden;
}
.showcase__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.showcase__text {
padding-right: 1rem;
}
.showcase__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-500);
margin-bottom: 1rem;
}
.showcase__eyebrow::after {
content: "";
width: 34px;
height: 1px;
background: var(--rose-300);
}
.showcase__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
color: var(--text-0);
line-height: 1.15;
margin-bottom: 1rem;
}
.showcase__title em {
color: var(--rose-400);
font-style: italic;
}
.showcase__lead {
font-size: 1rem;
color: var(--text-2);
max-width: 440px;
}
.showcase__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.showcase-card {
background: var(--surface);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all .35s var(--ease);
display: flex;
flex-direction: column;
}
.showcase-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.showcase-card__image {
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--rose-50);
}
.showcase-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.showcase-card:hover .showcase-card__image img { transform: scale(1.05); }
.showcase-card__body {
padding: 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.showcase-card__body h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 600;
color: var(--text-0);
}
.showcase-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--rose-500);
transition: all .3s var(--ease);
}
.showcase-card:hover .showcase-card__arrow {
background: var(--rose-400);
border-color: var(--rose-400);
color: #fff;
}
/* About ---------------------------------------------------- */
.about {
padding-top: clamp(5rem, 9vw, 7.5rem);
padding-bottom: clamp(5rem, 9vw, 7.5rem);
}
.about__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.about__visual {
position: relative;
}
.about__image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-md);
}
.about__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about__shimmer { display: none; }
.about__badge {
position: absolute;
bottom: -20px;
right: -20px;
background: var(--surface);
padding: 1rem 1.4rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 0.15rem;
max-width: 80%;
border: 1px solid var(--line);
}
.about__badge strong {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--text-0);
font-weight: 600;
}
.about__badge span {
font-size: 0.82rem;
color: var(--rose-500);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.about__text { max-width: 540px; }
.about__text h2 { margin-bottom: 1.2rem; }
.about__text p {
color: var(--text-2);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.about__list {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 2rem;
}
.about__list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-1);
font-size: 0.98rem;
}
.check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--rose-50);
color: var(--rose-500);
font-weight: 700;
font-size: 0.85rem;
}
/* Services ------------------------------------------------- */
.services {
background: linear-gradient(180deg, var(--bg-1) 0%, var(--rose-50) 100%);
max-width: none;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.services .section__head { max-width: 820px; }
.tabs {
position: relative;
display: inline-flex;
background: var(--surface);
padding: 6px;
border-radius: var(--radius-pill);
margin: 0 auto 2.5rem;
box-shadow: var(--shadow-xs);
border: 1px solid var(--line);
gap: 2px;
}
.tabs {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.tabs__btn {
position: relative;
z-index: 2;
padding: 0.7rem 1.8rem;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
border-radius: var(--radius-pill);
transition: color .3s var(--ease);
}
.tabs__btn.is-active {
color: #fff;
background: var(--rose-400);
}
.tabs__indicator { display: none; }
.services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.services__grid[hidden] { display: none; }
.service-card {
position: relative;
background: var(--surface);
border-radius: var(--radius-md);
/* padding-right erhöht, damit Platz für das rechts positionierte Produktbild bleibt */
padding: 2rem calc(110px + 1.8rem) 1.7rem 1.6rem;
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
transition: all .35s var(--ease);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-sm);
border-color: var(--rose-200);
}
/* Icon (Fallback, wenn Bild fehlt) — rechts oben in der Karte,
gleiche Position wie .service-card__image */
.service-card__icon {
position: absolute;
top: 1.4rem;
right: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--rose-50);
color: var(--rose-500);
font-size: 2.4rem;
border: 1.5px solid var(--rose-100);
transition: all .3s var(--ease);
z-index: 1;
}
/* Produktbild in Service-Karten — rechts oben positioniert. */
.service-card__image {
position: absolute;
top: 1.4rem;
right: 1.4rem;
display: block;
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 1.5px solid var(--rose-100);
background: var(--rose-50);
padding: 7px;
box-shadow: 0 8px 18px -6px rgba(160, 66, 79, 0.2);
transition: all .3s var(--ease);
z-index: 1;
}
.service-card:hover .service-card__image,
.service-card:hover .service-card__icon {
border-color: var(--rose-300);
transform: scale(1.05);
box-shadow: 0 12px 24px -8px rgba(160, 66, 79, 0.3);
}
/* Tablet: etwas kleiner, mit genug Platz für Bild + 1rem Textabstand */
@media (max-width: 768px) {
.service-card { padding: 1.8rem calc(80px + 2.4rem) 1.6rem 1.3rem; }
.service-card__image,
.service-card__icon { width: 80px; height: 80px; top: 1.2rem; right: 1.2rem; }
.service-card__icon { font-size: 2rem; }
}
/* Mobile L: kleiner, mit garantiertem Textabstand zum Bild */
@media (max-width: 480px) {
.service-card { padding: 1.5rem calc(68px + 2.2rem) 1.4rem 1.1rem; }
.service-card__image,
.service-card__icon { width: 68px; height: 68px; top: 1rem; right: 1rem; padding: 5px; }
.service-card__icon { font-size: 1.7rem; }
}
/* Mobile S: minimal, trotzdem klarer Textabstand */
@media (max-width: 380px) {
.service-card { padding: 1.3rem calc(56px + 1.9rem) 1.3rem 1rem; }
.service-card__image,
.service-card__icon { width: 56px; height: 56px; top: 0.9rem; right: 0.9rem; padding: 4px; }
.service-card__icon { font-size: 1.4rem; }
}
.service-card h3 {
font-family: var(--font-serif);
font-size: 1.65rem;
font-weight: 600;
color: var(--text-0);
line-height: 1.15;
letter-spacing: -0.005em;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rose-100);
margin-bottom: 0.1rem;
}
.service-card p {
font-size: 0.92rem;
color: var(--text-2);
line-height: 1.65;
flex-grow: 1;
}
.service-card__price {
font-family: var(--font-serif);
font-size: 1.8rem;
color: var(--rose-500);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.service-card__list { flex-grow: 1; }
.service-card__actions {
margin-top: auto;
}
.service-card__add {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 1.3rem;
border-radius: var(--radius-pill);
background: var(--rose-100);
color: var(--rose-600);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: all .3s var(--ease);
border: 1px solid transparent;
}
.service-card__add:hover {
background: var(--rose-400);
color: #fff;
}
.service-card__add.is-added {
background: var(--rose-500);
color: #fff;
}
.service-card__add-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
font-size: 0.9rem;
line-height: 1;
}
.service-card__add.is-added .service-card__add-icon::before {
content: "✓";
}
.service-card__add.is-added .service-card__add-icon {
background: rgba(255,255,255,0.3);
font-size: 0;
}
.service-card__add.is-added .service-card__add-icon::before { font-size: 0.85rem; }
.service-card__badge {
position: absolute;
top: -14px;
left: 1.6rem;
background: var(--rose-400);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.45rem 0.95rem;
border-radius: var(--radius-pill);
box-shadow: 0 8px 20px -6px rgba(204, 125, 135, 0.55);
z-index: 2;
}
.service-card__badge--gold {
background: linear-gradient(135deg, var(--rose-500), var(--rose-700));
color: #fff;
box-shadow: 0 8px 20px -6px rgba(160, 66, 79, 0.55);
}
.service-card--featured {
background:
linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat,
linear-gradient(160deg, var(--surface) 0%, var(--rose-50) 60%, var(--rose-100) 100%);
background-size: 260% 100%, auto;
background-position: -120% 0, 0 0;
border: 1.5px solid var(--rose-300);
position: relative;
animation: packageGlow 5s ease-in-out infinite;
transition: background-position 1s var(--ease), transform .5s var(--ease), border-color .3s var(--ease);
}
.service-card--featured:hover {
transform: scale(1.04);
border-color: var(--rose-400);
background-position: 220% 0, 0 0;
animation: none;
box-shadow:
0 24px 50px -18px rgba(204, 125, 135, 0.42),
0 0 50px 8px rgba(223, 160, 162, 0.5);
}
.service-card--featured .service-card__price {
color: var(--rose-600);
}
.service-card--package {
position: relative;
padding: 2.6rem 1.8rem 2rem;
background:
linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat,
linear-gradient(145deg, var(--surface) 0%, var(--rose-50) 100%);
background-size: 260% 100%, auto;
background-position: -120% 0, 0 0;
border: 1.5px solid var(--rose-200);
overflow: visible;
margin-top: 14px;
animation: packageGlow 5s ease-in-out infinite;
transition: background-position 1s var(--ease), transform .5s var(--ease), border-color .3s var(--ease);
}
.service-card--package:hover {
transform: scale(1.04);
border-color: var(--rose-400);
background-position: 220% 0, 0 0;
animation: none;
box-shadow:
0 32px 60px -18px rgba(160, 66, 79, 0.45),
0 0 60px 10px rgba(223, 160, 162, 0.55);
}
.service-card--package .service-card__icon {
font-size: 2rem;
color: var(--rose-600);
filter: drop-shadow(0 2px 6px rgba(160, 66, 79, 0.4));
}
.service-card--package h3 {
font-size: 1.6rem;
color: var(--text-0);
font-weight: 600;
}
.service-card--package .service-card__price {
font-size: 2.4rem;
color: var(--rose-600);
font-weight: 600;
}
.service-card--package .service-card__list li {
font-size: 0.95rem;
color: var(--text-1);
}
.service-card--package .service-card__add {
background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 100%);
color: #fff;
padding: 0.85rem 1.6rem;
box-shadow: 0 10px 22px -6px rgba(160, 66, 79, 0.5);
}
.service-card--package .service-card__add:hover {
background: linear-gradient(135deg, var(--rose-600) 0%, var(--rose-700) 100%);
transform: translateY(-1px);
}
.service-card--package .service-card__badge {
left: 50%;
top: -16px;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 100%);
color: #fff;
box-shadow: 0 10px 24px -6px rgba(160, 66, 79, 0.65);
padding: 0.55rem 1.4rem;
font-size: 0.78rem;
letter-spacing: 0.2em;
font-weight: 700;
border: 2px solid #fff;
}
/* Ganzkörper 2 — Bestes Angebot (nur einen Hauch kräftiger als GK1) */
.service-card--package-gold {
background:
linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat,
linear-gradient(145deg, var(--rose-50) 0%, var(--rose-100) 100%);
background-size: 260% 100%, auto;
background-position: -120% 0, 0 0;
border: 1.5px solid var(--rose-300);
}
.service-card--package-gold:hover {
transform: scale(1.04);
border-color: var(--rose-400);
background-position: 220% 0, 0 0;
animation: none;
box-shadow:
0 32px 60px -18px rgba(160, 66, 79, 0.45),
0 0 60px 10px rgba(223, 160, 162, 0.55);
}
.service-card--package-gold .service-card__icon {
color: var(--rose-600);
filter: drop-shadow(0 2px 6px rgba(160, 66, 79, 0.4));
}
.service-card--package-gold .service-card__price {
color: var(--rose-600);
}
.service-card--package-gold .service-card__add {
background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 100%);
color: #fff;
box-shadow: 0 10px 22px -6px rgba(160, 66, 79, 0.5);
}
.service-card--package-gold .service-card__add:hover {
background: linear-gradient(135deg, var(--rose-600) 0%, var(--rose-700) 100%);
}
.service-card--package-gold .service-card__badge {
background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 100%);
color: #fff;
box-shadow: 0 10px 24px -6px rgba(160, 66, 79, 0.65);
border-color: #fff;
}
.service-card--package-gold .service-card__badge::before {
content: "★ ";
color: #fff;
margin-right: 0.2rem;
letter-spacing: 0;
}
.service-card__list {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0.5rem 0 0.8rem;
}
.service-card__list li {
position: relative;
padding-left: 1.2rem;
font-size: 0.9rem;
color: var(--text-2);
}
.service-card__list li::before {
content: "•";
position: absolute;
left: 0.2rem;
top: 0;
color: var(--rose-400);
font-weight: 700;
}
.service-card__list-bonus {
color: var(--rose-600) !important;
font-weight: 600;
}
.service-card__list-bonus::before { color: var(--rose-500) !important; content: "✦" !important; font-size: 0.85rem; }
.services__packages {
grid-column: 1 / -1;
margin-top: 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--line);
}
.services__packages-eyebrow {
display: block;
text-align: center;
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-500);
margin-bottom: 2rem;
}
.services__packages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Consult (Telefon-Beratung) ------------------------------- */
.consult {
padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
max-width: 1240px;
margin: 0 auto;
}
.consult__inner {
position: relative;
background:
conic-gradient(
from 100deg at 50% -5%,
transparent 0deg,
rgba(255, 255, 255, 0.22) 15deg,
transparent 35deg,
rgba(255, 255, 255, 0.14) 55deg,
transparent 75deg,
rgba(255, 255, 255, 0.2) 95deg,
transparent 115deg,
rgba(255, 255, 255, 0.14) 135deg,
transparent 155deg,
rgba(255, 255, 255, 0.2) 165deg,
transparent 170deg
),
linear-gradient(180deg, var(--rose-100) 0%, var(--rose-50) 60%, var(--surface) 100%);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-lg);
padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
text-align: center;
max-width: 1100px;
margin: 0 auto;
box-shadow: 0 22px 48px -20px rgba(160, 66, 79, 0.22);
overflow: hidden;
}
.consult__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--rose-100);
color: var(--rose-500);
font-size: 1.6rem;
margin-bottom: 1.2rem;
}
.consult__title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 500;
color: var(--text-0);
margin-bottom: 1rem;
}
.consult__title em { color: var(--rose-400); font-style: italic; }
.consult__text {
color: var(--text-2);
line-height: 1.8;
margin-bottom: 1.5rem;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.consult__perks {
display: flex;
flex-direction: column;
gap: 0.6rem;
align-items: flex-start;
max-width: 520px;
margin: 0 auto 2rem;
text-align: left;
}
.consult__perks li {
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--text-1);
font-size: 0.95rem;
}
.consult__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--rose-400);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
.consult__note {
font-size: 0.85rem;
color: var(--text-3);
margin-top: 1rem;
font-style: italic;
}
/* Technology ----------------------------------------------- */
.technology {
background: linear-gradient(180deg, var(--bg-0) 0%, var(--rose-50) 100%);
max-width: none;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.technology .section__head { max-width: 820px; }
.tech__grid {
max-width: 1200px;
margin: 0 auto 3.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.tech__viz {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(193, 89, 104, 0.35), var(--shadow-md);
background:
radial-gradient(ellipse 70% 55% at 50% 50%, rgba(244, 187, 176, 0.55) 0%, transparent 70%),
linear-gradient(135deg, var(--bg-1) 0%, var(--rose-50) 100%);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
position: relative;
isolation: isolate;
border: 1px solid var(--rose-200);
}
.tech__viz::before {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(circle at 50% 50%, rgba(223, 160, 162, 0.45) 0%, transparent 55%);
filter: blur(12px);
z-index: -1;
animation: techGlow 6s ease-in-out infinite;
}
.tech__viz::after {
content: "";
position: absolute;
top: -30%;
left: -30%;
width: 60%;
height: 160%;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
transform: translateX(-120%) rotate(8deg);
pointer-events: none;
transition: transform 1s var(--ease);
}
.tech__viz:hover::after {
transform: translateX(260%) rotate(8deg);
}
.tech__image {
width: 100%;
max-width: 100%;
height: auto;
max-height: 420px;
object-fit: contain;
display: block;
filter: drop-shadow(0 18px 28px rgba(193, 89, 104, 0.35));
transition: transform .5s var(--ease), filter .5s var(--ease);
}
.tech__viz:hover .tech__image {
transform: scale(1.04);
filter: drop-shadow(0 22px 34px rgba(193, 89, 104, 0.48));
}
@keyframes techGlow {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes packageGlow {
0%, 100% {
box-shadow:
0 18px 38px -20px rgba(160, 66, 79, 0.25),
0 0 22px 2px rgba(223, 160, 162, 0.35);
}
50% {
box-shadow:
0 26px 54px -16px rgba(160, 66, 79, 0.38),
0 0 70px 16px rgba(223, 160, 162, 0.75);
}
}
@media (prefers-reduced-motion: reduce) {
.tech__viz::before { animation: none; }
.tech__viz::after { transition: none; }
.service-card--package,
.service-card--featured { animation: none; }
}
.tech__steps {
display: flex;
flex-direction: column;
gap: 2.2rem;
position: relative;
}
.tech__steps::before {
content: "";
position: absolute;
left: 27px;
top: 55px;
bottom: 55px;
width: 2px;
background: linear-gradient(180deg, var(--rose-300) 0%, var(--rose-200) 100%);
opacity: 0.5;
}
.tech__step {
display: flex;
gap: 1.6rem;
align-items: flex-start;
position: relative;
transition: transform .35s var(--ease);
}
.tech__step:hover {
transform: translateX(6px) scale(1.02);
z-index: 2;
}
.tech__step > div:last-child {
transition: color .3s var(--ease);
}
.tech__step:hover h3 {
color: var(--rose-600);
}
.tech__step-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
color: #fff;
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.02em;
box-shadow: 0 10px 24px -8px rgba(212, 117, 126, 0.5);
position: relative;
z-index: 1;
transition: transform .3s var(--ease);
}
.tech__step:hover .tech__step-num {
transform: scale(1.05);
}
.tech__step > div:last-child {
padding-top: 0.7rem;
}
.tech__step h3 {
font-size: 1.35rem;
font-family: var(--font-serif);
font-weight: 600;
color: var(--text-0);
margin-bottom: 0.45rem;
}
.tech__step p {
font-size: 0.98rem;
color: var(--text-2);
line-height: 1.75;
margin: 0;
}
.wavelengths {
max-width: 1200px;
margin: 0 auto 3rem;
}
.wavelengths__title {
text-align: center;
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 500;
margin-bottom: 2rem;
}
.wavelengths__title em { color: var(--rose-400); font-style: italic; }
.wavelengths__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.wavelength-card {
position: relative;
padding: 1.8rem 1.4rem;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-md);
text-align: center;
transition: all .35s var(--ease);
}
.wavelength-card:hover {
border-color: var(--rose-300);
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.wavelength-card--featured {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, var(--rose-200) 0%, transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--rose-100) 100%);
border: 2px solid var(--rose-400);
box-shadow: 0 24px 50px -20px rgba(212, 117, 126, 0.45);
transform: scale(1.04);
z-index: 1;
}
.wavelength-card--featured:hover {
transform: scale(1.06) translateY(-3px);
box-shadow: 0 30px 60px -20px rgba(212, 117, 126, 0.55);
border-color: var(--rose-500);
}
.wavelength-card--featured .wavelength-card__nm {
color: var(--rose-600);
font-size: 2.4rem;
}
.wavelength-card__badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-600) 100%);
color: #fff;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.5rem 1.1rem;
border-radius: var(--radius-pill);
box-shadow: 0 10px 22px -6px rgba(160, 66, 79, 0.55);
border: 2px solid var(--surface);
white-space: nowrap;
}
.wavelength-card__nm {
display: block;
font-family: var(--font-serif);
font-size: 2.2rem;
font-weight: 500;
color: var(--rose-500);
line-height: 1;
margin-bottom: 0.3rem;
}
.wavelength-card__nm small {
font-size: 0.9rem;
color: var(--text-3);
margin-left: 0.15rem;
font-weight: 400;
}
.wavelength-card__tech {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.7rem;
}
.wavelength-card p {
font-size: 0.88rem;
color: var(--text-2);
line-height: 1.6;
}
.tech__features {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.tech__feature {
padding: 2rem 1.4rem;
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1.5px solid var(--rose-300);
border-radius: var(--radius-md);
text-align: center;
transition: all .35s var(--ease);
}
.tech__feature:hover {
transform: translateY(-3px);
border-color: var(--rose-400);
box-shadow: 0 20px 36px -20px rgba(160, 66, 79, 0.25);
}
.tech__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--rose-50);
color: var(--rose-500);
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.tech__feature h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
margin-bottom: 0.4rem;
}
.tech__feature p {
font-size: 0.88rem;
color: var(--text-2);
line-height: 1.6;
}
/* Compare -------------------------------------------------- */
.compare {
max-width: 1240px;
margin: 0 auto;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.compare__table {
background: var(--surface);
border-radius: var(--radius-md);
overflow: hidden;
border: 1.5px solid var(--rose-200);
box-shadow: var(--shadow-xs);
}
.compare__row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 1rem;
padding: 1.3rem 1.5rem;
border-bottom: 1.5px solid var(--rose-200);
align-items: center;
font-size: 0.9rem;
}
.compare__row:last-child { border-bottom: none; }
.compare__row--head {
background: var(--bg-1);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-1);
}
.compare__row--highlight {
background: linear-gradient(90deg, var(--rose-50) 0%, var(--surface) 100%);
}
.compare__row--highlight .compare__method strong { color: var(--text-0); }
.compare__method strong {
display: block;
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--text-0);
}
.compare__method span {
display: block;
font-size: 0.78rem;
color: var(--text-3);
margin-top: 0.15rem;
}
.compare__row > div:not(.compare__method) {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.bar {
height: 6px;
border-radius: var(--radius-pill);
background: var(--bg-1);
overflow: hidden;
position: relative;
}
.bar::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--rose-300), var(--rose-400));
width: var(--fill, 0%);
transition: width .8s var(--ease);
border-radius: var(--radius-pill);
}
.compare__row > div:not(.compare__method) span {
font-size: 0.78rem;
color: var(--text-2);
}
/* Process -------------------------------------------------- */
.process {
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
max-width: 1240px;
margin: 0 auto;
}
.process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.process__steps {
counter-reset: step;
}
.process__step {
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
padding: 3.4rem 2rem 2.4rem;
border-radius: var(--radius-lg);
border: 1.5px solid var(--rose-200);
position: relative;
transition: all .4s var(--ease);
display: flex;
flex-direction: column;
gap: 0.6rem;
overflow: hidden;
isolation: isolate;
}
.process__step::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--rose-300), var(--rose-400), var(--rose-500));
transform: scaleX(0.3);
transform-origin: left;
transition: transform .5s var(--ease);
border-radius: var(--radius-pill);
}
.process__step:hover {
transform: translateY(-6px);
border-color: var(--rose-400);
background: var(--surface);
box-shadow: 0 30px 50px -24px rgba(160, 66, 79, 0.3);
}
.process__step:hover::before { transform: scaleX(1); }
.process__step:hover .process__num {
transform: scale(1.05);
}
.process__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
color: #fff;
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 600;
font-style: normal;
line-height: 1;
margin-bottom: 0.6rem;
box-shadow: 0 10px 24px -8px rgba(212, 117, 126, 0.55);
transition: all .4s var(--ease);
letter-spacing: -0.02em;
}
.process__step h3 {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 600;
color: var(--text-0);
margin-bottom: 0.1rem;
}
.process__step p {
font-size: 0.98rem;
color: var(--text-2);
line-height: 1.7;
margin: 0;
}
/* Care ----------------------------------------------------- */
.care {
background: linear-gradient(180deg, var(--rose-50) 0%, var(--bg-1) 100%);
max-width: none;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.care .section__head { max-width: 780px; }
.care__stack {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 1180px;
margin: 0 auto;
}
.care__panel {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: stretch;
position: relative;
}
.care__panel--after {
direction: rtl;
}
.care__panel--after > * {
direction: ltr;
}
.care__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 360px;
background:
radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
linear-gradient(160deg, var(--rose-100) 0%, var(--rose-200) 55%, var(--rose-300) 100%);
box-shadow: 0 22px 50px -24px rgba(193, 89, 104, 0.45);
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.care__panel--after .care__media {
background:
radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 60%),
linear-gradient(160deg, #fff 0%, var(--rose-50) 50%, var(--rose-100) 100%);
}
.care__media::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 100%, rgba(193, 89, 104, 0.25), transparent 60%);
z-index: -1;
}
.care__phase {
position: absolute;
top: 1.2rem;
left: 1.2rem;
padding: 0.45rem 0.9rem;
background: rgba(255, 255, 255, 0.92);
color: var(--rose-600);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
border-radius: 999px;
backdrop-filter: blur(6px);
box-shadow: 0 6px 18px -8px rgba(193, 89, 104, 0.4);
z-index: 2;
}
.care__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.care__sparkle {
position: absolute;
right: 1.4rem;
bottom: 1.2rem;
font-size: 2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1;
filter: drop-shadow(0 4px 10px rgba(193, 89, 104, 0.4));
animation: careSparkle 4s ease-in-out infinite;
}
.care__panel--after .care__sparkle { color: var(--rose-400); }
@keyframes careSparkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
50% { transform: scale(1.15) rotate(18deg); opacity: 1; }
}
.care__body {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
}
.care__label {
align-self: flex-start;
padding: 0.35rem 0.9rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--rose-100);
color: var(--rose-600);
}
.care__heading {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
font-weight: 600;
color: var(--text-0);
line-height: 1.15;
margin: 0;
}
.care__lead {
color: var(--text-2);
line-height: 1.65;
margin: 0 0 0.6rem;
max-width: 52ch;
}
.care__tips {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
counter-reset: caretip;
}
.care__tips li {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: var(--surface);
border-radius: var(--radius-md);
border: 1px solid var(--rose-100);
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.care__tips li:hover {
transform: translateX(4px);
border-color: var(--rose-300);
box-shadow: 0 10px 22px -14px rgba(193, 89, 104, 0.35);
}
.care__tip-num {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--rose-400);
font-style: italic;
line-height: 1;
min-width: 1.8rem;
}
.care__tip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.care__tip-icon--ok { background: var(--rose-100); color: var(--rose-600); }
.care__tip-icon--no { background: rgba(154, 74, 88, 0.08); color: var(--rose-600); }
.care__tips p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-1);
}
.care__tips p strong { color: var(--text-0); font-weight: 600; }
/* Testimonials --------------------------------------------- */
.testimonials {
max-width: 1240px;
margin: 0 auto;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.8rem;
align-items: center;
padding: 2rem 0;
}
.testimonial {
background:
linear-gradient(180deg, #fffcf9 0%, #fef6f0 100%);
padding: 2.6rem 2.2rem 2rem;
border-radius: 6px 18px 6px 18px;
border: 1px solid rgba(154, 74, 88, 0.12);
display: flex;
flex-direction: column;
gap: 1.3rem;
position: relative;
box-shadow:
0 1px 2px rgba(154, 74, 88, 0.08),
0 14px 30px -12px rgba(154, 74, 88, 0.22);
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonials__grid .testimonial:nth-child(1) {
transform: rotate(-1.6deg);
}
.testimonials__grid .testimonial:nth-child(2) {
transform: rotate(0.6deg);
}
.testimonials__grid .testimonial:nth-child(3) {
transform: rotate(-0.8deg);
}
.testimonial:hover {
box-shadow:
0 2px 4px rgba(154, 74, 88, 0.1),
0 24px 44px -14px rgba(154, 74, 88, 0.3);
z-index: 2;
}
.testimonials__grid .testimonial:nth-child(1):hover {
transform: rotate(-1.6deg) scale(1.05);
}
.testimonials__grid .testimonial:nth-child(2):hover {
transform: rotate(0.6deg) scale(1.05);
}
.testimonials__grid .testimonial:nth-child(3):hover {
transform: rotate(-0.8deg) scale(1.05);
}
.testimonial::before {
content: "\201C";
position: absolute;
top: 0.8rem;
left: 1.6rem;
font-family: var(--font-serif);
font-size: 6rem;
color: var(--rose-300);
line-height: 1;
opacity: 0.85;
transition: transform .45s var(--ease), color .45s var(--ease);
}
.testimonial:hover::before {
color: var(--rose-400);
transform: translateY(-2px) scale(1.05);
}
.testimonial__stars {
color: var(--rose-400);
letter-spacing: 0.18em;
font-size: 1.25rem;
margin-top: 0.5rem;
text-shadow: 0 2px 8px rgba(193, 89, 104, 0.18);
}
.testimonial p {
color: var(--text-1);
font-family: var(--font-serif);
font-size: 1.3rem;
font-style: italic;
line-height: 1.6;
flex-grow: 1;
}
.testimonial footer {
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--rose-100);
}
.testimonial__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
color: #fff;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0;
box-shadow: 0 6px 14px -4px rgba(193, 89, 104, 0.4);
flex-shrink: 0;
}
.testimonial__avatar--photo {
object-fit: cover;
background: var(--surface);
border: 2px solid #fff;
}
.testimonial__name {
color: var(--rose-500);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
font-style: normal;
}
.testimonial__meta {
display: block;
margin-top: 0.15rem;
color: var(--text-3);
font-size: 0.78rem;
letter-spacing: 0.04em;
font-style: normal;
text-transform: none;
}
/* ----- Reviews-Slider (Live-Daten) -----
Track ist ein horizontaler Grid; Viewport beschneidet, Pfeile schieben
den Track per translateX um eine Karten-Breite. CSS-Variablen erlauben
JS, "sichtbare Karten" auf 1 (Mobile) oder 3 (Desktop) zu setzen. */
.testimonials__slider {
--reviews-visible: 3;
--reviews-gap: 1.8rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem;
padding: 2rem 0;
}
.testimonials__viewport {
overflow: hidden;
padding: 1.4rem 0.4rem;
}
.testimonials__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
gap: var(--reviews-gap);
align-items: center;
transition: transform 0.55s var(--ease);
will-change: transform;
}
.testimonials__track > .testimonial:nth-child(3n+1) { transform: rotate(-1.4deg); }
.testimonials__track > .testimonial:nth-child(3n+2) { transform: rotate(0.6deg); }
.testimonials__track > .testimonial:nth-child(3n+3) { transform: rotate(-0.7deg); }
.testimonials__track > .testimonial:nth-child(3n+1):hover { transform: rotate(-1.4deg) scale(1.05); }
.testimonials__track > .testimonial:nth-child(3n+2):hover { transform: rotate(0.6deg) scale(1.05); }
.testimonials__track > .testimonial:nth-child(3n+3):hover { transform: rotate(-0.7deg) scale(1.05); }
.testimonials__nav {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(154, 74, 88, 0.18);
background: linear-gradient(180deg, #fffcf9 0%, #fef6f0 100%);
color: var(--rose-500);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
0 1px 2px rgba(154, 74, 88, 0.08),
0 8px 18px -8px rgba(154, 74, 88, 0.28);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
flex-shrink: 0;
}
.testimonials__nav svg { width: 22px; height: 22px; }
.testimonials__nav:hover {
color: var(--rose-600);
transform: scale(1.08);
box-shadow:
0 2px 4px rgba(154, 74, 88, 0.12),
0 14px 26px -10px rgba(154, 74, 88, 0.38);
}
.testimonials__nav:focus-visible {
outline: 2px solid var(--rose-500);
outline-offset: 3px;
}
.testimonials__nav[disabled] {
opacity: 0.3;
cursor: not-allowed;
box-shadow: none;
}
.testimonials__nav[disabled]:hover {
transform: none;
color: var(--rose-500);
}
.testimonials__nav[hidden] { display: none; }
/* Google-Reviews Summary (Gesamt-Rating + Branding) --------- */
.testimonials__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem 2.4rem;
margin: 0 auto 2rem;
padding: 1.4rem 2rem;
max-width: 640px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
}
.testimonials__summary-rating {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.testimonials__summary-score {
font-family: var(--font-serif);
font-size: 2.6rem;
font-weight: 600;
color: var(--text-0);
line-height: 1;
}
.testimonials__summary-stars {
font-size: 1.4rem;
letter-spacing: 0.1em;
color: #f5b400;
line-height: 1;
}
.testimonials__summary-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
color: var(--text-2);
font-size: 0.92rem;
}
.testimonials__summary-count {
font-weight: 500;
}
.testimonials__summary-source {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: var(--text-3);
letter-spacing: 0.02em;
}
.testimonials__google-logo {
width: 15px;
height: 15px;
flex: none;
}
.testimonials__footer {
margin-top: 2.4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.9rem 1.2rem;
}
.testimonials__cta-link,
.testimonials__all-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.6rem;
border-radius: var(--radius-pill);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color .3s var(--ease), border-color .3s var(--ease),
color .3s var(--ease), transform .3s var(--ease),
box-shadow .3s var(--ease);
}
/* Primary CTA: "Bewerte uns auf Google" */
.testimonials__cta-link {
background: linear-gradient(180deg, var(--rose-400) 0%, var(--rose-500) 100%);
border: 1px solid transparent;
color: #fff;
box-shadow: var(--shadow-rose);
}
.testimonials__cta-link:hover {
background: linear-gradient(180deg, var(--rose-500) 0%, var(--rose-600) 100%);
transform: translateY(-1px);
box-shadow: 0 22px 44px -16px rgba(204, 125, 135, 0.55);
}
.testimonials__cta-star {
width: 18px;
height: 18px;
flex: none;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
/* Secondary: "Alle Bewertungen ansehen" */
.testimonials__all-link {
background: var(--surface);
border: 1px solid var(--rose-200);
color: var(--rose-500);
padding: 0.7rem 1.4rem;
font-size: 0.92rem;
}
.testimonials__all-link:hover {
background: var(--rose-50);
border-color: var(--rose-300);
color: var(--rose-600);
transform: translateY(-1px);
}
/* FAQ ------------------------------------------------------ */
.faq {
position: relative;
max-width: 880px;
margin: 0 auto;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
isolation: isolate;
}
.faq::before,
.faq::after {
content: "";
position: absolute;
inset: -4rem -18vw;
z-index: -1;
pointer-events: none;
filter: blur(50px);
}
.faq::before {
background:
radial-gradient(ellipse 66% 46% at 46% 12%, rgba(244, 187, 176, 0.35) 0%, transparent 70%),
radial-gradient(ellipse 70% 48% at 54% 32%, rgba(230, 151, 145, 0.24) 0%, transparent 70%),
radial-gradient(ellipse 74% 52% at 50% 55%, rgba(251, 220, 211, 0.35) 0%, transparent 70%),
radial-gradient(ellipse 68% 46% at 52% 78%, rgba(244, 187, 176, 0.26) 0%, transparent 70%),
radial-gradient(ellipse 64% 44% at 48% 95%, rgba(230, 151, 145, 0.22) 0%, transparent 70%);
animation: faqCloudsA 24s ease-in-out infinite;
}
.faq::after {
background:
radial-gradient(ellipse 62% 42% at 50% 5%, rgba(251, 220, 211, 0.28) 0%, transparent 70%),
radial-gradient(ellipse 66% 46% at 48% 25%, rgba(244, 187, 176, 0.2) 0%, transparent 75%),
radial-gradient(ellipse 60% 42% at 52% 48%, rgba(230, 151, 145, 0.22) 0%, transparent 70%),
radial-gradient(ellipse 64% 44% at 50% 72%, rgba(244, 187, 176, 0.2) 0%, transparent 75%),
radial-gradient(ellipse 62% 42% at 52% 98%, rgba(251, 220, 211, 0.26) 0%, transparent 70%);
animation: faqCloudsB 30s ease-in-out infinite;
}
@keyframes faqCloudsA {
0%, 100% { transform: scale(1) translate(0, 0); }
33% { transform: scale(1.06) translate(12px, -8px); }
66% { transform: scale(0.96) translate(-10px, 10px); }
}
@keyframes faqCloudsB {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.08) translate(-14px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
.faq::before,
.faq::after { animation: none; }
}
.faq__list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.faq__item {
background: var(--surface);
border: 1px solid var(--rose-200);
border-radius: var(--radius-md);
overflow: hidden;
transition: all .3s var(--ease);
box-shadow: 0 8px 20px -14px rgba(160, 66, 79, 0.18);
}
.faq__item:hover {
border-color: var(--rose-300);
box-shadow: 0 12px 28px -14px rgba(160, 66, 79, 0.28);
transform: translateY(-1px);
}
.faq__item[open] {
border-color: var(--rose-400);
box-shadow: 0 16px 36px -14px rgba(160, 66, 79, 0.35);
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
}
.faq__item summary {
padding: 1.25rem 1.6rem;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--text-0);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Plus/Minus als Inline-SVG-Linien — Text-Glyphen liegen in den meisten
Fonts nicht geometrisch in der Mitte (Baseline-Offset bei "+"; "−"
sitzt nochmal anders), und auch flex-Zentrierung kompensiert das nur
teilweise. SVG-Linien sind exakt in der Mitte des Viewbox-Quadrats und
verhalten sich auf jedem Hauttyp identisch. */
.faq__item summary::after {
content: "";
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--rose-400);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 56% 56%;
box-shadow: 0 4px 10px -2px rgba(204, 117, 126, 0.5);
transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item:hover summary::after {
background-color: var(--rose-500);
transform: scale(1.05);
}
.faq__item[open] summary::after {
background-color: var(--rose-600);
/* Geöffnet → nur die horizontale Linie (Minus). Kein rotate() mehr noetig. */
background-image: url("data:image/svg+xml;utf8,");
}
.faq__item p {
padding: 0 1.6rem 1.4rem;
color: var(--text-2);
line-height: 1.8;
font-size: 0.98rem;
}
/* Contact -------------------------------------------------- */
.contact {
max-width: 1240px;
margin: 0 auto;
padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.contact__card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
box-shadow: var(--shadow-sm);
}
.contact__text {
padding: clamp(2rem, 4vw, 3.2rem);
}
.contact__text h2 { margin-bottom: 1rem; }
.contact__text p {
color: var(--text-2);
line-height: 1.75;
margin-bottom: 1.8rem;
}
.contact__call {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
padding: 1rem 1.3rem;
margin-bottom: 1.4rem;
border-radius: var(--radius-md);
background: var(--rose-400);
color: #fff;
box-shadow: var(--shadow-rose);
text-decoration: none;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.contact__call:hover {
background: var(--rose-500);
transform: translateY(-2px);
box-shadow: 0 22px 44px -14px rgba(184, 98, 112, 0.55);
}
.contact__call-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #fff;
flex-shrink: 0;
}
.contact__call-icon svg { width: 18px; height: 18px; }
.contact__call-body {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.contact__call-label {
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
opacity: 0.85;
}
.contact__call-number {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 600;
letter-spacing: 0.01em;
}
.contact__call-arrow {
font-size: 1.4rem;
line-height: 1;
transition: transform .3s var(--ease);
}
.contact__call:hover .contact__call-arrow { transform: translateX(4px); }
.contact__info {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
margin-bottom: 2.4rem;
}
.contact__info li {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.9rem;
align-items: center;
font-size: 0.92rem;
line-height: 1.45;
padding: 0.85rem 1rem;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--rose-100);
}
.contact__info-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--rose-50);
color: var(--rose-500);
flex-shrink: 0;
}
.contact__info-icon svg {
width: 16px;
height: 16px;
}
.contact__info-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.contact__info strong {
color: var(--rose-400);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact__info a, .contact__info span {
color: var(--text-1);
font-weight: 500;
}
.contact__info a { transition: color .25s var(--ease); }
.contact__info a:hover { color: var(--rose-500); }
.contact__cta {
margin-top: 0.8rem;
}
.contact__map {
min-height: 400px;
position: relative;
}
.contact__map iframe {
width: 100%;
height: 100%;
min-height: 400px;
border: none;
filter: saturate(0.9);
}
/* Footer --------------------------------------------------- */
.footer {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204, 125, 135, 0.18) 0%, transparent 60%),
var(--footer-bg);
color: var(--footer-fg);
padding: 4rem clamp(1.25rem, 4vw, 3rem) 2rem;
margin-top: 4rem;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--rose-300), transparent);
opacity: 0.5;
}
.footer__inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4rem;
text-align: center;
position: relative;
z-index: 1;
}
.footer__brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--footer-fg);
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 500;
}
.footer__brand .nav__logo-mark {
color: var(--footer-accent);
font-size: 1.4rem;
}
.footer__brand .nav__logo-text em { color: var(--footer-accent); }
.footer__tagline {
font-size: 1.2rem;
color: rgba(245, 228, 220, 0.85);
max-width: 600px;
line-height: 1.6;
font-style: italic;
font-family: var(--font-serif);
}
.footer__social-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.88rem;
color: var(--footer-fg);
padding: 0.6rem 1.2rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(245, 228, 220, 0.18);
transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.footer__social-link:hover {
color: #fff;
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border-color: transparent;
box-shadow: 0 12px 26px -12px rgba(220, 39, 67, 0.55);
transform: translateY(-2px);
}
.footer__social-link svg { width: 20px; height: 20px; }
.footer__links {
display: inline-flex;
flex-wrap: wrap;
gap: 1.4rem;
justify-content: center;
}
.footer__links a {
font-size: 0.82rem;
color: rgba(245, 228, 220, 0.75);
letter-spacing: 0.12em;
text-transform: uppercase;
transition: color .25s var(--ease);
position: relative;
}
.footer__links a::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -4px;
height: 1px;
background: var(--footer-accent);
transform: scaleX(0);
transition: transform .3s var(--ease);
transform-origin: center;
}
.footer__links a:hover { color: var(--footer-accent); }
.footer__links a:hover::after { transform: scaleX(1); }
.footer__copy {
padding-top: 1.6rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(245, 228, 220, 0.1);
width: 100%;
font-size: 0.8rem;
color: rgba(245, 228, 220, 0.55);
max-width: 760px;
line-height: 1.65;
}
/* Cart bar ------------------------------------------------- */
.cart-bar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(120%);
z-index: 95;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
padding: 0.75rem 0.75rem 0.75rem 1.4rem;
display: flex;
align-items: center;
gap: 1.4rem;
max-width: calc(100% - 2rem);
transition: transform .4s var(--ease-out), opacity .4s var(--ease-out);
opacity: 0;
}
.cart-bar.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.cart-bar__inner {
display: flex;
align-items: center;
gap: 1.4rem;
width: 100%;
}
.cart-bar__summary {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--text-1);
white-space: nowrap;
}
.cart-bar__icon {
color: var(--rose-400);
font-size: 1.1rem;
}
.cart-bar__divider { color: var(--text-3); }
.cart-bar__count, .cart-bar__total {
color: var(--rose-500);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.checkout__total-row strong { font-variant-numeric: tabular-nums; }
.cart-bar__actions {
display: inline-flex;
gap: 0.5rem;
}
.cart-bar__btn {
padding: 0.65rem 1.1rem;
font-size: 0.72rem;
}
/* Modal ---------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity .3s var(--ease);
}
.modal.is-open {
opacity: 1;
pointer-events: auto;
}
.modal[hidden] { display: none !important; }
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(45, 24, 32, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.modal__dialog {
position: relative;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
max-width: 640px;
width: 100%;
max-height: calc(100vh - 3rem);
overflow-y: auto;
padding: clamp(1.8rem, 3vw, 2.5rem);
transform: translateY(20px);
transition: transform .35s var(--ease-out);
}
.modal.is-open .modal__dialog { transform: translateY(0); }
.modal__dialog--narrow { max-width: 500px; }
.modal__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-1);
color: var(--text-1);
font-size: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .25s var(--ease);
z-index: 2;
}
.modal__close:hover { background: var(--rose-400); color: #fff; }
.modal__header {
margin-bottom: 1.5rem;
}
.modal__header--centered {
text-align: center;
}
.modal__header .section__eyebrow {
margin-bottom: 0.8rem;
}
.modal__title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 500;
color: var(--text-0);
margin-bottom: 0.6rem;
line-height: 1.2;
}
.modal__title em { color: var(--rose-400); font-style: italic; }
.modal__lead {
color: var(--text-2);
font-size: 0.95rem;
line-height: 1.7;
}
/* Consult popup */
.consult-popup__phone {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.2rem 1.4rem;
background: linear-gradient(135deg, var(--rose-400), var(--rose-500));
color: #fff;
border-radius: var(--radius-md);
margin: 0 0 1.5rem;
transition: all .3s var(--ease);
box-shadow: var(--shadow-rose);
}
.consult-popup__phone:hover {
transform: translateY(-2px);
box-shadow: 0 22px 44px -14px rgba(184, 98, 112, 0.55);
}
.consult-popup__phone-icon {
width: 28px; height: 28px;
flex-shrink: 0;
}
.consult-popup__phone-body {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.consult-popup__phone-label {
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
}
.consult-popup__phone-number {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 500;
}
.consult-popup__alt {
padding: 1.2rem;
background: var(--bg-1);
border-radius: var(--radius-md);
margin-bottom: 1.2rem;
}
.consult-popup__alt-label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.7rem;
text-align: center;
}
.consult-popup__alt-links {
display: flex;
gap: 0.6rem;
justify-content: center;
flex-wrap: wrap;
}
.consult-popup__alt-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1rem;
background: var(--surface);
border-radius: var(--radius-pill);
font-size: 0.82rem;
color: var(--text-1);
border: 1px solid var(--line);
transition: all .25s var(--ease);
}
.consult-popup__alt-link:hover {
color: var(--rose-500);
border-color: var(--rose-300);
}
.consult-popup__alt-link svg {
width: 16px; height: 16px;
}
.consult-popup__hours {
font-size: 0.85rem;
color: var(--text-2);
text-align: center;
line-height: 1.65;
}
.consult-popup__hours strong { color: var(--text-0); }
/* Checkout ------------------------------------------------- */
.checkout__summary {
background: var(--bg-1);
border-radius: var(--radius-md);
padding: 1.2rem 1.4rem;
margin-bottom: 1.5rem;
}
.checkout__subtitle {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-500);
margin-bottom: 0.8rem;
}
.checkout__list {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 0.8rem;
}
.checkout__list li,
.checkout__item {
display: grid;
grid-template-columns: 1fr auto 28px;
align-items: center;
column-gap: 0.9rem;
padding: 0.55rem 0;
border-bottom: 1px dashed var(--line);
font-size: 0.92rem;
color: var(--text-1);
}
.checkout__list li:last-child,
.checkout__item:last-child { border-bottom: none; }
.checkout__item-name { min-width: 0; overflow-wrap: break-word; }
.checkout__item-price {
color: var(--rose-500);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
justify-self: end;
white-space: nowrap;
}
.checkout__list li strong { color: var(--rose-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout__empty {
display: block !important;
grid-template-columns: none !important;
border-bottom: none !important;
color: var(--text-3);
font-style: italic;
text-align: center;
padding: 0.8rem 0 !important;
}
.checkout__item-remove,
.checkout__list-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: transparent;
color: var(--text-3);
font-size: 1.1rem;
line-height: 1;
transition: all .2s var(--ease);
justify-self: end;
}
.checkout__item-remove:hover,
.checkout__list-remove:hover { background: var(--rose-400); color: #fff; }
.checkout__total-row {
display: grid;
grid-template-columns: 1fr auto 28px;
align-items: center;
column-gap: 0.9rem;
padding-top: 0.8rem;
margin-top: 0.3rem;
border-top: 1px solid var(--line);
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
color: var(--text-0);
}
.checkout__total-row strong {
color: var(--rose-500);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
justify-self: end;
white-space: nowrap;
}
.checkout__payment {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.9rem 1rem;
background: var(--surface);
border-radius: var(--radius-sm);
margin-top: 0.8rem;
font-size: 0.85rem;
color: var(--text-2);
line-height: 1.55;
}
.checkout__payment-icon {
width: 22px; height: 22px;
color: var(--rose-500);
flex-shrink: 0;
margin-top: 0.1rem;
}
.checkout__payment strong { color: var(--text-0); font-weight: 600; }
.checkout__form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.checkout__auth-banner {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: var(--rose-50, #fdecee);
border: 1px solid var(--rose-200, #f5c5cb);
border-radius: var(--radius-sm);
color: var(--text-1);
font-size: 0.9rem;
}
.checkout__auth-banner-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--rose-500);
color: #fff;
flex-shrink: 0;
}
.checkout__auth-banner-icon svg {
width: 16px;
height: 16px;
}
.checkout__auth-banner strong { color: var(--text-0); font-weight: 600; }
.checkout__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem 1rem;
}
.checkout__field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.checkout__field--full {
grid-column: 1 / -1;
}
.checkout__field > span,
.checkout__field-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.checkout__field input,
.checkout__field textarea {
font-family: var(--font-sans);
font-size: 0.95rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text-0);
transition: all .25s var(--ease);
width: 100%;
}
.checkout__field input:focus,
.checkout__field textarea:focus {
outline: none;
border-color: var(--rose-400);
box-shadow: 0 0 0 3px rgba(204, 125, 135, 0.15);
}
.checkout__field textarea { resize: vertical; min-height: 80px; }
.checkout__slots {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
min-height: 58px;
align-items: center;
padding: 0.5rem;
background: var(--bg-1);
border-radius: var(--radius-sm);
}
.checkout__slots-hint {
color: var(--text-3);
font-size: 0.88rem;
padding: 0 0.7rem;
}
.checkout__slots[data-state="ready"] {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
background: transparent;
}
.checkout__slots-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
background: var(--bg-1);
padding: 0.4rem;
border-radius: var(--radius-md);
margin-bottom: 0.6rem;
}
.checkout__slot-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.6rem 0.4rem;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-2);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
transition: all .25s var(--ease);
}
.checkout__slot-tab.is-active {
background: var(--surface);
color: var(--rose-500);
box-shadow: var(--shadow-xs);
}
.checkout__slot-tab.is-empty {
opacity: 0.4;
cursor: not-allowed;
}
.checkout__slot-tab-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; }
.checkout__slot-tab-meta { font-size: 0.72rem; color: var(--text-3); font-weight: 500; }
.checkout__slot-tab.is-active .checkout__slot-tab-meta { color: var(--rose-400); }
.checkout__slots-body {
padding: 0.5rem;
background: var(--bg-1);
border-radius: var(--radius-md);
}
.checkout__slot-group {
display: none;
flex-wrap: wrap;
gap: 0.4rem;
}
.checkout__slot-group.is-active { display: flex; }
.checkout__slot {
padding: 0.55rem 0.95rem;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--line-strong);
color: var(--text-1);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all .25s var(--ease);
}
.checkout__slot:hover {
border-color: var(--rose-300);
color: var(--rose-500);
}
.checkout__slot.is-selected,
.checkout__slot.is-active {
background: var(--rose-400);
border-color: var(--rose-400);
color: #fff;
}
.checkout__consent {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.checkout__check {
display: flex;
gap: 0.7rem;
align-items: flex-start;
cursor: pointer;
font-size: 0.88rem;
line-height: 1.55;
color: var(--text-1);
}
.checkout__check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkout__check-box {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 5px;
border: 1.5px solid var(--line-strong);
background: var(--surface);
margin-top: 0.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s var(--ease);
}
.checkout__check input:checked ~ .checkout__check-box {
background: var(--rose-400);
border-color: var(--rose-400);
}
.checkout__check input:checked ~ .checkout__check-box::after {
content: "✓";
color: #fff;
font-size: 0.8rem;
font-weight: 700;
}
.checkout__check a {
color: var(--rose-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.checkout__status {
font-size: 0.88rem;
padding: 0.6rem 0.9rem;
border-radius: var(--radius-sm);
display: none;
}
.checkout__status.is-error {
display: block;
background: rgba(184, 98, 112, 0.08);
color: var(--rose-600);
border: 1px solid rgba(184, 98, 112, 0.2);
}
.checkout__status.is-success {
display: block;
background: rgba(120, 165, 120, 0.1);
color: #3a6b3a;
border: 1px solid rgba(120, 165, 120, 0.3);
}
.checkout__status.is-loading {
display: block;
background: var(--bg-1);
color: var(--text-2);
}
.checkout__actions {
display: flex;
gap: 0.7rem;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Legal pages ---------------------------------------------- */
.legal {
max-width: 920px;
margin: 0 auto;
padding: clamp(6rem, 12vw, 9rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}
.legal__back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--rose-500);
margin-bottom: 2rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
background: var(--rose-50);
border: 1px solid var(--rose-100);
transition: all .25s var(--ease);
}
.legal__back:hover {
color: var(--rose-600);
background: var(--rose-100);
transform: translateX(-2px);
}
/* Legal hero block (wraps the .section__head of legal pages) */
.legal .section__head {
text-align: left;
max-width: none;
margin: 0 0 1rem;
position: relative;
padding-left: 1.2rem;
}
.legal .section__head::before {
content: "";
position: absolute;
left: 0; top: 0.8rem;
bottom: 0.8rem;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--rose-400), var(--rose-300));
}
.legal .section__head .section__eyebrow {
margin-bottom: 0.6rem;
}
.legal .section__head .section__title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
color: var(--text-0);
}
.legal__meta {
font-size: 0.9rem;
color: var(--text-2);
margin-top: 0.5rem;
margin-bottom: 2rem;
padding: 1rem 1.3rem;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1px solid var(--rose-100);
line-height: 1.65;
font-style: italic;
}
.legal__content {
background: var(--surface);
padding: clamp(2rem, 4vw, 3.5rem);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
line-height: 1.8;
color: var(--text-2);
}
.legal__content h2 {
font-family: var(--font-serif);
font-size: 1.55rem;
font-weight: 600;
margin: 2.5rem 0 1rem;
color: var(--text-0);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rose-100);
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
}
.legal__content h2::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rose-400);
flex-shrink: 0;
box-shadow: 0 0 0 3px var(--rose-50);
}
.legal__content h2:first-child { margin-top: 0; }
.legal__content h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 600;
color: var(--text-1);
margin: 1.6rem 0 0.6rem;
}
.legal__content p {
margin-bottom: 1rem;
color: var(--text-2);
}
.legal__content p strong,
.legal__content address strong {
color: var(--text-0);
font-weight: 600;
}
.legal__content address {
font-style: normal;
background: var(--bg-1);
padding: 1rem 1.3rem;
border-left: 3px solid var(--rose-300);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: 0.6rem 0 1rem;
color: var(--text-1);
}
.legal__content address strong {
color: var(--rose-500);
font-size: 1.05rem;
font-family: var(--font-serif);
}
.legal__content a {
color: var(--rose-500);
text-decoration: none;
border-bottom: 1px solid var(--rose-200);
font-weight: 500;
transition: all .2s var(--ease);
}
.legal__content a:hover {
color: var(--rose-600);
border-bottom-color: var(--rose-400);
}
.legal__content ul, .legal__content ol {
padding-left: 1.4rem;
margin-bottom: 1rem;
list-style: disc;
}
.legal__content ul { list-style: none; padding-left: 0; }
.legal__content ul li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.5rem;
color: var(--text-2);
}
.legal__content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rose-300);
}
.legal__content ol { padding-left: 1.4rem; }
.legal__content ol li { margin-bottom: 0.5rem; color: var(--text-2); }
/* Highlight Box — für wichtige Punkte */
.legal__highlight,
.legal__content blockquote {
background: linear-gradient(135deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1px solid var(--rose-200);
border-left: 4px solid var(--rose-400);
border-radius: var(--radius-md);
padding: 1.2rem 1.4rem;
margin: 1.5rem 0;
position: relative;
color: var(--text-1);
}
.legal__highlight strong,
.legal__content blockquote strong { color: var(--rose-600); }
/* Kontakt/Info-Box inline */
.legal__content p:has(strong:first-child) {
/* no-op, just semantic marker */
}
/* Reveal animations ---------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Cookie banner (falls vorhanden) -------------------------- */
.cookie-banner {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
max-width: 480px;
width: calc(100% - 2rem);
background: var(--surface);
border-radius: var(--radius-md);
padding: 1.2rem 1.4rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--line);
z-index: 90;
font-size: 0.88rem;
color: var(--text-1);
}
.cookie-banner__actions {
display: flex;
gap: 0.5rem;
margin-top: 0.8rem;
}
/* Responsive ----------------------------------------------- */
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.hero__content { order: 2; text-align: center; align-items: center; }
.hero__content > * { text-align: left; }
.hero__image { order: 1; max-width: 520px; margin: 0 auto; }
.hero__checks { align-items: flex-start; }
.about__grid { grid-template-columns: 1fr; }
.about__badge { position: static; margin-top: 1rem; max-width: none; }
.tech__grid { grid-template-columns: 1fr; }
.showcase__inner { grid-template-columns: 1fr; }
.wavelengths__grid { grid-template-columns: repeat(2, 1fr); }
.tech__features { grid-template-columns: repeat(2, 1fr); }
.process__steps { grid-template-columns: repeat(2, 1fr); }
.testimonials__grid { grid-template-columns: 1fr; }
.testimonials__slider {
--reviews-visible: 2;
--reviews-gap: 1.4rem;
gap: 0.6rem;
}
.testimonials__nav { width: 42px; height: 42px; }
.testimonials__nav svg { width: 20px; height: 20px; }
.contact__card { grid-template-columns: 1fr; }
.contact__map { min-height: 320px; }
.services__grid, .services__packages-grid { grid-template-columns: repeat(2, 1fr); }
.features-strip__inner { grid-template-columns: repeat(2, 1fr); }
.showcase__grid { grid-template-columns: repeat(3, 1fr); }
.nav__inner { gap: 1rem; }
.nav__links a { padding: 0.55rem 0.7rem; }
.compare__row {
grid-template-columns: 1fr;
text-align: left;
}
.compare__row--head { display: none; }
.compare__row > div:not(.compare__method)::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.2rem;
}
}
/* Burger-Nav schon ab 1024 px aktivieren — mit 8 Items + Logo + CTA + Cart
ist die horizontale Nav darunter zu eng, einzelne Links würden sich
überlappen oder umbrechen. */
@media (max-width: 1024px) {
.nav:not(.nav--simple) .nav__links,
.nav:not(.nav--simple) .nav__actions {
display: none;
}
.nav:not(.nav--simple).is-open .nav__links {
display: flex;
position: fixed;
top: 64px; left: 0; right: 0;
background: var(--surface);
flex-direction: column;
padding: 5rem 2rem 2rem;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.nav:not(.nav--simple).is-open .nav__links a {
display: block;
padding: 0.9rem 0;
font-size: 0.95rem;
border-bottom: 1px solid var(--line);
}
/* CTA exakt mittig auf der Viewport-Mitte (an der STARTSEITE-Linie),
Cart als kleiner runder Button rechts daneben mit moderatem Abstand. */
.nav:not(.nav--simple).is-open .nav__actions { display: contents; }
.nav:not(.nav--simple).is-open .nav__cta,
.nav:not(.nav--simple).is-open .nav__cart {
display: inline-flex;
align-items: center;
justify-content: center;
position: fixed;
top: 76px;
height: 40px;
z-index: 4;
}
.nav:not(.nav--simple).is-open .nav__cta {
left: 50%;
transform: translateX(-50%);
padding: 0 1rem;
}
.nav:not(.nav--simple).is-open .nav__cart {
left: calc(50% + 6rem);
width: 40px;
padding: 0;
}
.nav:not(.nav--simple).is-open .nav__cart-icon { width: 20px; height: 20px; }
.nav:not(.nav--simple) .nav__burger { display: flex; }
/* Rechte Gruppe (Account + Burger) zusammenhalten und nach rechts pushen */
.nav:not(.nav--simple) .nav__right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
}
@media (max-width: 768px) {
.hero__badge {
width: 130px; height: 130px;
right: -10px; bottom: 8%;
font-size: 0.85rem;
}
.hero__badge-mid { font-size: 1.1rem; }
.showcase__grid { grid-template-columns: 1fr; }
.services__grid, .services__packages-grid { grid-template-columns: 1fr; }
.features-strip__inner { grid-template-columns: 1fr; }
.wavelengths__grid { grid-template-columns: 1fr 1fr; }
.tech__features { grid-template-columns: 1fr 1fr; }
.process__steps { grid-template-columns: 1fr; }
.care__panel { grid-template-columns: 1fr; }
.care__panel--after { direction: ltr; }
.care__media { min-height: 220px; }
.care__stack { gap: 2.2rem; }
.btn { padding: 0.9rem 1.5rem; font-size: 0.78rem; }
.cart-bar { padding: 0.6rem 0.6rem 0.6rem 1rem; gap: 0.8rem; }
.cart-bar__summary { font-size: 0.82rem; }
.cart-bar__btn { padding: 0.55rem 0.9rem; font-size: 0.68rem; }
.contact__info {
grid-template-columns: 1fr;
}
.contact__info li {
grid-template-columns: auto 1fr;
column-gap: 0.8rem;
}
.contact__info li:last-child { grid-column: auto; }
.contact__call { padding: 0.85rem 1rem; gap: 0.8rem; }
.contact__call-icon { width: 36px; height: 36px; }
.contact__call-number { font-size: 1.1rem; }
.checkout__grid { grid-template-columns: 1fr; }
.trustbar__inner { justify-content: flex-start; gap: 0.8rem; flex-wrap: nowrap; overflow-x: auto; padding-left: 1rem; padding-right: 1rem; }
.trustbar__item { font-size: 0.72rem; flex-shrink: 0; }
.trustbar__divider { flex-shrink: 0; }
/* Sub-pages — reduzierte Paddings und Kartengrößen */
.legal__content { padding: 1.6rem 1.3rem; }
.legal__content h2 { font-size: 1.3rem; margin: 1.8rem 0 0.8rem; }
.legal__content h3 { font-size: 1.1rem; }
.legal__content address { padding: 0.8rem 1rem; }
.legal .section__head { padding-left: 0.9rem; }
.bookings-list__grid { grid-template-columns: 1fr; }
.bookings-list__head { gap: 0.5rem; margin-bottom: 1rem; }
.booking-card { padding: 1.3rem 1.2rem 1.2rem; }
.booking-card__service { font-size: 1.25rem; }
.booking-card__meta > div { grid-template-columns: 95px 1fr; gap: 0.5rem; }
.thankyou__contact { grid-template-columns: 90px 1fr; gap: 0.6rem; padding: 0.85rem 0.95rem; }
.thankyou__booking-head { grid-template-columns: 1fr; gap: 1rem; }
.thankyou__booking-date strong,
.thankyou__booking-customer strong { font-size: 1.05rem; }
.thankyou__booking-item {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
padding: 0.9rem;
}
.thankyou__booking-item-side { text-align: left; }
.thankyou__step h3 { font-size: 1.1rem; }
.thankyou__section-title { font-size: 1.3rem; margin-bottom: 1.2rem; }
.cancel { padding-top: clamp(4rem, 10vw, 6rem); }
.cancel__card { padding: 1.6rem 1.3rem; }
.cancel__item { padding: 1rem 1.1rem; gap: 0.8rem; }
.cancel__item-body strong { font-size: 1.15rem; }
.cancel__item-box { width: 22px; height: 22px; }
.cancel__item-box::after { width: 10px; height: 5px; }
.cancel__actions { justify-content: stretch; }
.cancel__actions .btn { flex: 1 1 140px; }
.testimonial { padding: 2.4rem 1.6rem 1.8rem; }
.testimonial p { font-size: 1.1rem; }
.testimonial::before { font-size: 4rem; left: 1.2rem; top: 0.6rem; }
.testimonials__grid .testimonial:nth-child(1),
.testimonials__grid .testimonial:nth-child(2),
.testimonials__grid .testimonial:nth-child(3) { transform: none; }
.testimonials__grid .testimonial:nth-child(1):hover,
.testimonials__grid .testimonial:nth-child(2):hover,
.testimonials__grid .testimonial:nth-child(3):hover { transform: scale(1.03); }
.testimonials__slider {
--reviews-visible: 1;
--reviews-gap: 1.2rem;
gap: 0.45rem;
padding: 1.2rem 0;
}
.testimonials__viewport { padding: 1rem 0.2rem; }
.testimonials__track > .testimonial:nth-child(3n+1),
.testimonials__track > .testimonial:nth-child(3n+2),
.testimonials__track > .testimonial:nth-child(3n+3) { transform: none; }
.testimonials__track > .testimonial:nth-child(3n+1):hover,
.testimonials__track > .testimonial:nth-child(3n+2):hover,
.testimonials__track > .testimonial:nth-child(3n+3):hover { transform: scale(1.03); }
.testimonials__nav { width: 42px; height: 42px; }
.testimonials__nav svg { width: 20px; height: 20px; }
.process__step { padding: 2.8rem 1.4rem 1.8rem; }
.tech__step { gap: 1.1rem; }
.tech__step-num { width: 48px; height: 48px; font-size: 1.15rem; }
.tech__steps::before { left: 23px; }
.tech__viz { min-height: 240px; padding: 1rem; }
.modal { padding: 1rem; }
.modal__dialog { padding: 1.4rem 1.2rem; max-height: calc(100vh - 2rem); }
.modal__close { top: 0.6rem; right: 0.6rem; width: 32px; height: 32px; }
.tabs__btn { padding: 0.6rem 1rem; font-size: 0.75rem; letter-spacing: 0.12em; }
.faq__item summary { padding: 1rem 1.1rem; font-size: 1.02rem; gap: 0.6rem; }
.faq__item summary::after { width: 28px; height: 28px; font-size: 1.2rem; }
.faq__item p { padding: 0 1.1rem 1.1rem; font-size: 0.94rem; }
.service-card { padding: 1.6rem calc(80px + 2.4rem) 1.5rem 1.3rem; }
.service-card h3 { font-size: 1.4rem; }
.service-card__price { font-size: 1.6rem; }
.service-card--package { padding: 2.2rem calc(80px + 2.4rem) 1.7rem 1.4rem; }
.service-card--package .service-card__price { font-size: 2rem; }
.wavelength-card { padding: 1.4rem 1rem; }
.wavelength-card__nm { font-size: 1.8rem; }
.wavelength-card--featured .wavelength-card__nm { font-size: 2rem; }
.contact__info li strong { white-space: normal; }
.contact__info a, .contact__info span { word-break: break-word; }
.login-form { padding: 1.8rem 1.3rem; }
.bookings-page__user { gap: 0.6rem; padding: 0.5rem 0.9rem; font-size: 0.85rem; flex-wrap: wrap; justify-content: center; }
.footer { padding: 3rem 1.2rem 1.6rem; }
.footer__links { gap: 0.9rem; }
.footer__links a { font-size: 0.78rem; letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
.hero__title { font-size: clamp(2.2rem, 8vw, 3rem); }
.hero__actions { flex-direction: column; align-items: stretch; }
.hero__actions .btn { width: 100%; }
.section__title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
/* Cart-Bar auf engen Geräten: Summary über Actions zentriert,
Leeren + Zur Kasse nebeneinander mit gleicher Breite. */
.cart-bar { padding: 0.7rem 0.7rem; }
.cart-bar__inner { flex-direction: column; gap: 0.6rem; align-items: stretch; }
.cart-bar__summary { justify-content: center; flex-wrap: wrap; }
.cart-bar__actions { flex-direction: row; gap: 0.5rem; width: 100%; }
.cart-bar__btn { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.8rem; }
/* Navigation — kompakter auf sehr kleinen Geräten */
.nav__inner { padding: 0.7rem 1rem; gap: 0.5rem; }
.nav__logo { font-size: 1.3rem; gap: 0.45rem; }
.nav__logo-mark { width: 32px; height: 32px; font-size: 1.2rem; }
/* Auf Mobile L (≤ 480 px): Buttons-Reihe + Panel höher, Panel-Padding-
Top entsprechend, damit die zentrierte Buttons-Reihe Platz hat. */
.nav.is-open .nav__cta,
.nav.is-open .nav__cart { top: 68px; }
.nav.is-open .nav__links {
top: 56px;
padding: 4.4rem 1.4rem 2rem;
max-height: calc(100vh - 56px);
}
/* Hero badge weiter verkleinern */
.hero__badge {
width: 100px; height: 100px;
right: 0; bottom: 6%;
font-size: 0.72rem;
padding: 0.5rem;
}
.hero__badge-top, .hero__badge-bottom { font-size: 0.78rem; }
.hero__badge-mid { font-size: 0.95rem; }
/* Grids auf 1 Spalte */
.wavelengths__grid { grid-template-columns: 1fr; }
.tech__features { grid-template-columns: 1fr; }
/* Sub-pages — weitere Optimierungen */
.legal { padding: clamp(5rem, 14vw, 7rem) 0.9rem 3rem; }
.legal__back { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
.legal__content { padding: 1.2rem 1rem; border-radius: var(--radius-md); }
.legal__content h2 { font-size: 1.15rem; padding-bottom: 0.4rem; gap: 0.5rem; }
.legal__content h2::before { width: 6px; height: 6px; }
.legal__content address { padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.legal__content address strong { font-size: 0.98rem; }
.legal__meta { padding: 0.8rem 1rem; font-size: 0.85rem; }
.legal__highlight, .legal__content blockquote { padding: 1rem 1.1rem; margin: 1.2rem 0; }
/* Booking-Cards auf kleinen Smartphones */
.booking-card { padding: 1.1rem 1rem; gap: 0.9rem; border-radius: var(--radius-md); }
.booking-card__head { gap: 0.5rem; padding-bottom: 0.7rem; }
.booking-card__service { font-size: 1.15rem; }
.booking-card__badge { padding: 0.35rem 0.7rem; font-size: 0.68rem; letter-spacing: 0.1em; }
.booking-card__meta > div {
grid-template-columns: 1fr;
gap: 0.15rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--rose-100);
}
.booking-card__meta > div:last-child { border-bottom: none; padding-bottom: 0; }
.booking-card__meta dt { font-size: 0.7rem; letter-spacing: 0.12em; }
.booking-card__meta dd { font-size: 0.92rem; }
.booking-card__actions { gap: 0.4rem; }
.booking-card__action { padding: 0.55rem 0.9rem; font-size: 0.68rem; letter-spacing: 0.1em; }
.bookings-page { padding-left: 0.9rem; padding-right: 0.9rem; }
.bookings-page__head { margin-bottom: 2rem; padding-bottom: 1.4rem; }
.bookings-page__empty { padding: 2rem 1.2rem; }
.bookings-page__empty-icon { width: 72px; height: 72px; }
.bookings-page__empty-title { font-size: 1.3rem; }
.login-form { padding: 1.5rem 1.1rem; border-radius: var(--radius-md); }
.login-form__title { font-size: 1.4rem; }
.login-form__field input { font-size: 0.92rem; padding: 0.75rem 0.9rem; }
.login-form__divider { margin: 1.2rem 0 1rem; font-size: 0.7rem; letter-spacing: 0.16em; }
/* Thankyou-Seite */
.thankyou { padding-left: 0.9rem; padding-right: 0.9rem; gap: 1.2rem; }
.thankyou__card { padding: 1.3rem 1.1rem; border-radius: var(--radius-md); }
.thankyou__check { width: 76px; height: 76px; margin-bottom: 1rem; }
.thankyou__section-title { font-size: 1.2rem; margin-bottom: 0.9rem; }
.thankyou__contact {
grid-template-columns: 1fr;
gap: 0.15rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--line);
}
.thankyou__contact:last-child { border-bottom: none; padding-bottom: 0; }
.thankyou__booking-head { flex-direction: column; align-items: flex-start; }
.thankyou__step { gap: 0.8rem; }
.thankyou__step-num { width: 32px; height: 32px; font-size: 0.9rem; }
.thankyou__tips-icon { width: 24px; height: 24px; font-size: 0.8rem; }
.thankyou__booking-actions { gap: 0.4rem; }
.thankyou__booking-actions .btn { flex: 1 1 140px; font-size: 0.7rem; padding: 0.7rem 0.9rem; }
.thankyou__booking-cancel-btn { flex: 1 1 140px; padding: 0.65rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.1em; }
.thankyou__calendar-buttons { gap: 0.35rem; }
.thankyou__calendar-btn { font-size: 0.76rem; padding: 0.45rem 0.8rem; }
/* Cancel-Seite */
.cancel { padding-left: 0.9rem; padding-right: 0.9rem; }
.cancel__card { padding: 1.3rem 1rem; border-radius: var(--radius-md); }
.cancel__header { margin-bottom: 1.4rem; padding-bottom: 1rem; }
.cancel__icon { width: 68px; height: 68px; margin-bottom: 1rem; }
.cancel__icon svg { width: 34px; height: 34px; }
.cancel__lead { font-size: 0.95rem; }
.cancel__item { padding: 0.9rem; gap: 0.7rem; grid-template-columns: auto 1fr; }
.cancel__item-body strong { font-size: 1.05rem; gap: 0.35rem; }
.cancel__item-body > span { font-size: 0.88rem; }
.cancel__item-meta { font-size: 0.7rem !important; letter-spacing: 0.04em !important; }
.cancel__reason textarea { padding: 0.8rem 1rem; font-size: 0.92rem; }
.cancel__note { padding: 0.8rem 1rem; font-size: 0.85rem; }
.cancel__actions { gap: 0.5rem; }
.cancel__actions .btn { width: 100%; flex: 1 1 100%; }
/* Footer kompakter */
.footer { padding: 2.4rem 1rem 1.4rem; margin-top: 2.5rem; }
.footer__brand { font-size: 1.4rem; }
.footer__tagline { font-size: 0.9rem; }
.footer__links { gap: 0.7rem 1rem; }
.footer__social-link { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.footer__copy { font-size: 0.75rem; padding-top: 1.2rem; }
/* Checkout-Slots kompakter */
.checkout__slots-tabs { padding: 0.3rem; gap: 0.25rem; }
.checkout__slot-tab { padding: 0.5rem 0.3rem; font-size: 0.72rem; }
.checkout__slot-tab-label { font-size: 0.7rem; letter-spacing: 0.1em; }
.checkout__slot { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
.checkout__summary { padding: 1rem 1.1rem; }
.checkout__total-row { font-size: 1.1rem; }
.checkout__actions .btn { flex: 1 1 140px; }
/* Cookie-Banner auf vollen Viewport */
.cookie-banner { left: 0.5rem; right: 0.5rem; transform: none; width: auto; max-width: none; }
/* Cart-Bar — bleibt am Boden, aber noch kompakter (Padding symmetrisch,
damit Summary und Buttons nicht verschoben wirken) */
.cart-bar { bottom: 12px; padding: 0.5rem; gap: 0.5rem; max-width: calc(100% - 1rem); }
.cart-bar__inner { gap: 0.5rem; }
.cart-bar__summary { font-size: 0.76rem; gap: 0.3rem; }
.cart-bar__divider { display: none; }
.cart-bar__btn { padding: 0.55rem 0.6rem; font-size: 0.65rem; letter-spacing: 0.08em; }
/* Hero section tighter */
.hero__subtitle { font-size: 1rem; }
.hero__proof { gap: 0.6rem; }
.hero__proof-avatar { width: 36px; height: 36px; margin-right: -11px; }
.hero__proof-avatar--initial { font-size: 0.95rem; }
.hero__proof-label { font-size: 0.78rem; }
/* Services/Care cards tighter */
.care__tips li { padding: 0.7rem 0.85rem; gap: 0.6rem; }
.care__tip-num { font-size: 1.05rem; min-width: 1.5rem; }
.care__heading { font-size: 1.6rem; }
.consult__inner { padding: 2rem 1.2rem; }
.consult__perks { padding: 0 0.5rem; }
}
/* Sehr kleine Smartphones (iPhone SE, ältere Geräte) -------- */
@media (max-width: 380px) {
html { font-size: 15px; }
.nav__inner { padding: 0.6rem 0.8rem; }
.nav__logo-text { font-size: 1.1rem; }
.nav__cart { width: 44px; height: 44px; }
.nav__cart-icon { width: 22px; height: 22px; }
.nav__burger { width: 24px; }
.btn { padding: 0.8rem 1.2rem; font-size: 0.72rem; letter-spacing: 0.1em; }
.service-card { padding: 1.3rem calc(56px + 1.9rem) 1.3rem 1rem; }
.service-card h3 { font-size: 1.25rem; }
.booking-card { padding: 1rem 0.9rem; }
.booking-card__service { font-size: 1.05rem; }
.cancel__item { padding: 0.8rem; }
.cancel__item-body strong { font-size: 0.98rem; }
.thankyou__card { padding: 1.1rem 0.9rem; }
.legal__content { padding: 1rem 0.85rem; }
.hero__badge {
width: 84px; height: 84px;
font-size: 0.65rem;
}
.hero__badge-top, .hero__badge-bottom { font-size: 0.7rem; }
.hero__badge-mid { font-size: 0.82rem; }
.tabs { padding: 3px; }
.tabs__btn { padding: 0.55rem 0.8rem; font-size: 0.7rem; letter-spacing: 0.08em; }
.checkout__slot-tab-label { font-size: 0.66rem; }
.checkout__slot-tab-meta { font-size: 0.66rem; }
.hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}
/* Landscape-Modus auf kurzen Handys — Nav kompakter --------- */
@media (max-height: 480px) and (orientation: landscape) {
.nav.is-open .nav__links {
padding: 1rem 1.5rem;
max-height: calc(100vh - 56px);
}
.hero { padding-top: clamp(5rem, 10vh, 7rem); }
}
/* Utility — accessibility */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
Sub-pages: danke.html, cancel.html, meine-termine.html
========================================================= */
/* Thankyou (danke.html) ------------------------------------ */
/* Thank-You-Seite — Design an Hauptseite angepasst ---------- */
.thankyou {
max-width: 920px;
margin: 0 auto;
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem) 4rem;
display: flex;
flex-direction: column;
gap: 1.8rem;
}
.thankyou__back {
display: inline-flex;
align-items: center;
align-self: center;
color: var(--rose-500);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 0.5rem;
transition: color .25s var(--ease), transform .25s var(--ease);
}
.thankyou__back:hover { color: var(--rose-600); transform: translateX(-3px); }
.thankyou__hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1rem 0.5rem;
gap: 0.9rem;
}
.thankyou__check {
width: 96px;
height: 96px;
display: block;
margin: 0 0 0.8rem;
filter: drop-shadow(0 10px 22px rgba(193, 89, 104, 0.28));
}
.thankyou__hero .section__eyebrow {
align-self: center;
}
.thankyou__check-bg {
fill: var(--rose-50);
stroke: var(--rose-300);
stroke-width: 2;
}
.thankyou__check-tick {
fill: none;
stroke: var(--rose-500);
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: thankyouTick 1s .3s var(--ease-out) forwards;
}
@keyframes thankyouTick {
to { stroke-dashoffset: 0; }
}
.thankyou__title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4.5vw, 3rem);
font-weight: 500;
color: var(--text-0);
line-height: 1.15;
margin: 0.5rem 0 1rem;
}
.thankyou__title em { color: var(--rose-400); font-style: italic; }
.thankyou__lead {
color: var(--text-2);
line-height: 1.75;
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
}
/* Karten im Stil der Hauptseite (care__panel, booking-card) */
.thankyou__card {
background: var(--surface);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-lg);
padding: clamp(1.8rem, 3.5vw, 2.6rem);
box-shadow: 0 18px 38px -22px rgba(204, 125, 135, 0.28);
}
.thankyou__card--info {
background: linear-gradient(160deg, var(--surface) 0%, var(--rose-50) 60%, var(--rose-100) 100%);
border-color: var(--rose-300);
}
.thankyou__card--tips {
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border-color: var(--rose-200);
}
.thankyou__section-title {
font-family: var(--font-serif);
font-size: clamp(1.55rem, 2.4vw, 1.8rem);
font-weight: 600;
color: var(--text-0);
line-height: 1.2;
margin: 0 0 1.6rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rose-100);
letter-spacing: 0.01em;
}
.thankyou__section-title em { color: var(--rose-400); font-style: italic; font-weight: 500; }
/* Schritte — wie process__step auf der Hauptseite */
.thankyou__steps {
display: grid;
gap: 1.6rem;
}
.thankyou__step {
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 1.1rem;
row-gap: 0.3rem;
align-items: start;
}
.thankyou__step-num {
grid-row: 1 / span 2;
grid-column: 1;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
color: #fff;
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px -6px rgba(193, 89, 104, 0.45);
line-height: 1;
align-self: start;
margin-top: 0.15rem;
}
.thankyou__step h3 {
grid-column: 2;
grid-row: 1;
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 600;
color: var(--text-0);
margin: 0 0 0.15rem;
line-height: 1.3;
text-align: left;
}
.thankyou__step p {
grid-column: 2;
grid-row: 2;
font-size: 0.95rem;
color: var(--text-2);
line-height: 1.65;
margin: 0;
text-align: left;
}
/* Tipps — wie care__tips */
.thankyou__tips {
display: flex;
flex-direction: column;
gap: 0.8rem;
list-style: none;
padding: 0;
margin: 0;
}
.thankyou__tips li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.9rem;
align-items: flex-start;
padding: 0.9rem 1rem;
background: var(--surface);
border-radius: var(--radius-md);
border: 1px solid var(--rose-100);
transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.thankyou__tips li:hover {
transform: translateX(3px);
border-color: var(--rose-300);
}
.thankyou__tips-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rose-100);
color: var(--rose-600);
font-size: 1rem;
}
.thankyou__tips li strong {
display: block;
font-weight: 600;
color: var(--text-0);
margin-bottom: 0.2rem;
}
.thankyou__tips li p {
margin: 0;
font-size: 0.92rem;
color: var(--text-2);
line-height: 1.55;
}
.thankyou__card--info p {
color: var(--text-2);
line-height: 1.7;
margin: 0 0 1.2rem;
font-size: 0.98rem;
}
/* Kontakt-Kacheln — wie contact__info auf der Mainseite */
.thankyou__contacts {
display: grid;
gap: 0.6rem;
}
.thankyou__contact {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
padding: 0.9rem 1.1rem;
background: var(--surface);
border-radius: var(--radius-md);
border: 1px solid var(--rose-100);
color: var(--text-1);
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.thankyou__contact:hover {
border-color: var(--rose-300);
transform: translateX(3px);
box-shadow: 0 10px 22px -14px rgba(193, 89, 104, 0.3);
}
.thankyou__contact-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rose-50);
color: var(--rose-500);
flex-shrink: 0;
}
.thankyou__contact-icon svg { width: 18px; height: 18px; }
.thankyou__contact-body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
overflow-wrap: anywhere;
}
.thankyou__contact-label {
font-size: 0.66rem;
color: var(--rose-500);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.thankyou__contact-value {
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--text-0);
font-weight: 600;
letter-spacing: 0.01em;
}
.thankyou__note {
font-size: 0.85rem;
color: var(--text-2);
font-style: italic;
text-align: center;
margin-top: 1.2rem;
line-height: 1.65;
}
.thankyou__note a { color: var(--rose-500); font-weight: 600; }
.thankyou__note strong { color: var(--rose-600); font-style: normal; }
/* Buchungs-Karte — Header */
.thankyou__booking-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem;
padding-bottom: 1.4rem;
margin-bottom: 1.4rem;
border-bottom: 1px solid var(--rose-100);
}
.thankyou__booking-date,
.thankyou__booking-customer {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.thankyou__booking-date strong,
.thankyou__booking-customer strong {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--text-0);
line-height: 1.3;
}
.thankyou__booking-customer span:not(.thankyou__booking-label) {
font-size: 0.88rem;
color: var(--text-2);
font-weight: 400;
}
.thankyou__booking-time {
color: var(--rose-500);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.04em;
margin-top: 0.1rem;
}
.thankyou__booking-label {
color: var(--rose-500);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.65rem;
margin-bottom: 0.15rem;
}
/* Buchungs-Liste */
.thankyou__booking-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 1.2rem;
list-style: none;
padding: 0;
}
.thankyou__booking-item {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
background: var(--rose-50);
border: 1px solid var(--rose-100);
border-radius: var(--radius-md);
align-items: center;
}
.thankyou__booking-item-main {
display: flex;
align-items: center;
gap: 0.9rem;
flex: 1;
}
.thankyou__booking-time-cell {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
color: var(--rose-600);
min-width: 58px;
}
.thankyou__booking-item-main strong {
display: block;
font-family: var(--font-serif);
font-weight: 600;
color: var(--text-0);
font-size: 1.1rem;
line-height: 1.3;
}
.thankyou__booking-code {
display: block;
font-size: 0.72rem;
color: var(--text-3);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.15rem;
}
.thankyou__booking-price {
color: var(--rose-600);
font-weight: 700;
font-size: 1.1rem;
font-family: var(--font-serif);
}
.thankyou__booking-total {
display: flex;
justify-content: space-between;
padding: 1rem 1.2rem;
background: linear-gradient(135deg, var(--rose-100), var(--rose-200));
border-radius: var(--radius-md);
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--text-0);
}
.thankyou__booking-total strong { color: var(--rose-700); }
/* Zahlungshinweis */
.thankyou__booking-payment {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 1rem;
font-size: 0.92rem;
color: var(--text-1);
padding: 0.95rem 1.1rem;
background: var(--surface);
border: 1px solid var(--rose-100);
border-radius: var(--radius-md);
line-height: 1.5;
}
.thankyou__booking-payment svg { color: var(--rose-500); flex-shrink: 0; }
.thankyou__booking-payment strong {
color: var(--rose-600);
font-weight: 600;
letter-spacing: 0.02em;
}
/* Kalender-Einbindung */
.thankyou__calendar {
margin-top: 1.6rem;
padding-top: 1.6rem;
border-top: 1px solid var(--rose-100);
}
.thankyou__calendar-head {
display: flex;
gap: 0.9rem;
align-items: flex-start;
margin-bottom: 1rem;
color: var(--text-1);
}
.thankyou__calendar-head svg {
color: var(--rose-500);
flex-shrink: 0;
margin-top: 0.25rem;
}
.thankyou__calendar-head strong {
display: block;
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--text-0);
font-weight: 600;
margin-bottom: 0.2rem;
line-height: 1.3;
}
.thankyou__calendar-head span {
display: block;
font-size: 0.88rem;
color: var(--text-2);
line-height: 1.55;
}
.thankyou__calendar-buttons {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.thankyou__calendar-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 1.2rem;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--rose-200);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-1);
cursor: pointer;
transition: all .25s var(--ease);
}
.thankyou__calendar-btn:hover {
border-color: var(--rose-400);
color: var(--rose-600);
background: var(--rose-50);
transform: translateY(-1px);
}
/* Aktionen — Stornieren-Button */
.thankyou__booking-actions {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
margin-top: 1.6rem;
padding-top: 1.6rem;
border-top: 1px solid var(--rose-100);
}
.thankyou__booking-cancel-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--rose-600);
border: 1.5px solid var(--rose-300);
padding: 0.75rem 1.4rem;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: all .25s var(--ease);
}
.thankyou__booking-cancel-btn:hover {
background: var(--rose-50);
color: var(--rose-700);
border-color: var(--rose-400);
}
/* Outro */
.thankyou__outro {
text-align: center;
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
align-items: center;
}
.thankyou__outro-text { color: var(--text-2); margin: 0; }
.thankyou__ig {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--rose-600);
font-weight: 700;
padding: 0.7rem 1.4rem;
border: 1.5px solid var(--rose-300);
border-radius: var(--radius-pill);
font-size: 0.88rem;
transition: all .25s var(--ease);
}
.thankyou__ig:hover {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: #fff;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 12px 26px -12px rgba(220, 39, 67, 0.55);
}
/* Cancel (cancel.html) ------------------------------------- */
.cancel {
max-width: 820px;
margin: 0 auto;
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}
.cancel__card {
background: linear-gradient(180deg, var(--rose-50) 0%, var(--rose-100) 100%);
border: 1.5px solid var(--rose-300);
border-radius: var(--radius-lg);
padding: clamp(2rem, 4vw, 3rem);
box-shadow: 0 24px 50px -20px rgba(160, 66, 79, 0.28);
}
.cancel__header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
position: relative;
}
.cancel__header::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--rose-400), transparent);
}
.cancel__header .section__eyebrow { margin-bottom: 0.8rem; }
.cancel__icon {
width: 88px;
height: 88px;
margin: 0 auto 1.4rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
color: #fff;
box-shadow: 0 14px 30px -10px rgba(212, 117, 126, 0.55);
}
.cancel__icon svg { width: 44px; height: 44px; }
.cancel__icon--success {
background: linear-gradient(135deg, #6aa06a 0%, #4d7a4d 100%);
color: #fff;
box-shadow: 0 14px 30px -10px rgba(120, 165, 120, 0.55);
}
.cancel__icon--error {
background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 100%);
color: #fff;
box-shadow: 0 14px 30px -10px rgba(160, 66, 79, 0.55);
}
.cancel__icon-bg { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.35; }
.cancel__icon-mark, .cancel__icon-tick {
fill: none;
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
.cancel__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 500;
color: var(--text-0);
margin-bottom: 0.6rem;
line-height: 1.15;
}
.cancel__title em { color: var(--rose-400); font-style: italic; }
.cancel__lead {
color: var(--text-2);
line-height: 1.75;
font-size: 1.02rem;
max-width: 600px;
margin: 0 auto;
}
.cancel__form {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.cancel__note {
color: var(--text-1);
font-size: 0.92rem;
line-height: 1.65;
padding: 1rem 1.3rem;
background: var(--rose-50);
border-left: 3px solid var(--rose-400);
border-radius: var(--radius-sm);
}
.cancel__note strong { color: var(--rose-600); }
.cancel__note a {
color: var(--rose-500);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.cancel__list-wrap {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.cancel__list-label {
display: block;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-500);
}
.cancel__list {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.cancel__list-empty {
text-align: center;
padding: 1.6rem;
color: var(--text-3);
background: var(--surface);
border: 1.5px dashed var(--rose-200);
border-radius: var(--radius-md);
font-size: 0.92rem;
font-style: italic;
}
/* Terminkarten mit klickbarer Checkbox */
.cancel__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
padding: 1.2rem 1.4rem;
background: var(--surface);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-md);
cursor: pointer;
transition: all .25s var(--ease);
position: relative;
}
.cancel__item:hover {
border-color: var(--rose-400);
box-shadow: 0 10px 24px -12px rgba(160, 66, 79, 0.25);
}
/* Native Checkbox/Radio komplett versteckt */
.cancel__item input[type="checkbox"],
.cancel__item input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
}
.cancel__item-box {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 7px;
border: 2px solid var(--rose-300);
background: var(--surface);
position: relative;
transition: all .2s var(--ease);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cancel__item-box::after {
content: "";
width: 13px;
height: 7px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg) translateY(-2px);
opacity: 0;
transition: opacity .15s var(--ease);
}
.cancel__item input:checked ~ .cancel__item-box {
border-color: var(--rose-500);
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
box-shadow: 0 4px 10px -2px rgba(212, 117, 126, 0.5);
}
.cancel__item input:checked ~ .cancel__item-box::after { opacity: 1; }
.cancel__item input:focus-visible ~ .cancel__item-box {
box-shadow: 0 0 0 3px rgba(212, 117, 126, 0.25);
}
.cancel__item:has(input:checked) {
border-color: var(--rose-400);
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
}
.cancel__item-body {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.cancel__item-body strong {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--text-0);
font-weight: 600;
line-height: 1.2;
padding-bottom: 0.4rem;
margin-bottom: 0.15rem;
border-bottom: 1px solid var(--rose-100);
width: 100%;
}
.cancel__item-body strong::before {
content: "✦";
color: var(--rose-400);
font-size: 0.9rem;
flex-shrink: 0;
}
.cancel__item-body > span {
font-size: 0.95rem;
color: var(--rose-500);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.cancel__item-meta {
font-size: 0.78rem !important;
color: var(--text-3) !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
}
/* Grund-Textarea */
.cancel__reason {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0;
}
.cancel__reason-label {
display: block;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-500);
margin: 0;
}
.cancel__reason textarea {
width: 100%;
padding: 1rem 1.2rem;
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.98rem;
background: var(--surface);
color: var(--text-0);
resize: vertical;
min-height: 100px;
line-height: 1.6;
transition: all .25s var(--ease);
}
.cancel__reason textarea:focus {
outline: none;
border-color: var(--rose-400);
box-shadow: 0 0 0 3px rgba(212, 117, 126, 0.18);
}
.cancel__reason-hint {
display: block;
font-size: 0.82rem;
color: var(--text-3);
text-align: right;
font-variant-numeric: tabular-nums;
margin: 0;
}
.cancel__status {
font-size: 0.92rem;
padding: 0.9rem 1.2rem;
border-radius: var(--radius-md);
display: none;
margin: 0;
line-height: 1.5;
}
.cancel__status.is-pending {
display: block;
background: var(--rose-50);
color: var(--rose-600);
border: 1.5px solid var(--rose-200);
}
.cancel__status.is-error {
display: block;
background: rgba(184, 98, 112, 0.1);
color: var(--rose-700);
border: 1.5px solid rgba(184, 98, 112, 0.3);
}
.cancel__status.is-success {
display: block;
background: rgba(120, 165, 120, 0.12);
color: #2e5a2e;
border: 1.5px solid rgba(120, 165, 120, 0.35);
}
.cancel__actions {
display: flex;
gap: 0.8rem;
justify-content: flex-end;
flex-wrap: wrap;
padding-top: 0.4rem;
}
.cancel__state { padding: 0.5rem 0; }
.cancel__state[data-state="success"],
.cancel__state[data-state="error"],
.cancel__state[data-state="missing"] {
text-align: center;
}
.cancel__state[data-state="success"] .cancel__actions,
.cancel__state[data-state="error"] .cancel__actions,
.cancel__state[data-state="missing"] .cancel__actions {
justify-content: center;
margin-top: 1.4rem;
}
/* Meine Termine (meine-termine.html) ----------------------- */
.bookings-page {
max-width: 1040px;
margin: 0 auto;
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}
.bookings-page__head {
text-align: center;
margin-bottom: 3rem;
position: relative;
padding-bottom: 2rem;
}
.bookings-page__head::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--rose-400), transparent);
}
.bookings-page__head .section__eyebrow {
margin-bottom: 0.8rem;
}
.bookings-page__title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
font-weight: 500;
color: var(--text-0);
line-height: 1.1;
}
.bookings-page__title em { color: var(--rose-400); font-style: italic; }
.bookings-page__lead {
color: var(--text-2);
margin-top: 0.8rem;
max-width: 560px;
margin-left: auto;
margin-right: auto;
line-height: 1.75;
font-size: 1.02rem;
}
.bookings-page__user {
margin-top: 1.4rem;
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 0.92rem;
color: var(--text-2);
background: var(--surface);
padding: 0.6rem 1.2rem;
border-radius: var(--radius-pill);
border: 1.5px solid var(--rose-200);
}
.bookings-page__user strong { color: var(--rose-500); font-weight: 600; }
.bookings-page__login,
.login-form {
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-lg);
padding: clamp(2.2rem, 4vw, 3rem);
max-width: 480px;
margin: 0 auto;
box-shadow: 0 20px 44px -20px rgba(160, 66, 79, 0.2);
}
.login-form__title {
font-family: var(--font-serif);
font-size: 1.7rem;
font-weight: 600;
color: var(--text-0);
text-align: center;
margin-bottom: 0.5rem;
}
.login-form__lead {
font-size: 0.95rem;
color: var(--text-2);
margin-bottom: 1.8rem;
line-height: 1.65;
text-align: center;
}
.login-form__field {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}
.login-form__field label,
.login-form__field > span {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rose-500);
}
.login-form__field input {
padding: 0.85rem 1.1rem;
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 0.95rem;
background: var(--surface);
color: var(--text-0);
transition: all .25s var(--ease);
}
.login-form__field input:focus {
outline: none;
border-color: var(--rose-400);
box-shadow: 0 0 0 3px rgba(212, 117, 126, 0.18);
}
.login-form__submit {
width: 100%;
margin-top: 0.8rem;
}
.login-form__status {
margin-top: 0.8rem;
font-size: 0.9rem;
min-height: 1.2em;
color: var(--rose-600);
text-align: center;
line-height: 1.5;
}
.login-form__status.is-success {
color: #2e6a2e;
background: rgba(120, 165, 120, 0.12);
border: 1px solid rgba(120, 165, 120, 0.3);
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
font-weight: 500;
}
.login-form__status.is-error {
color: var(--rose-700);
background: rgba(184, 98, 112, 0.08);
border: 1px solid rgba(184, 98, 112, 0.25);
padding: 0.6rem 0.9rem;
border-radius: var(--radius-sm);
}
.login-form__status.is-pending { color: var(--rose-500); font-style: italic; }
/* Register-Flow: Email-Bestätigung ausstehend */
.login-form__status.is-pending-verification {
color: var(--rose-600);
background: linear-gradient(135deg, rgba(212, 117, 126, 0.08) 0%, rgba(251, 220, 211, 0.25) 100%);
border: 1px solid var(--rose-300);
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
line-height: 1.5;
font-size: 0.88rem;
}
.login-form__status.is-pending-verification strong {
display: block;
color: var(--rose-700);
font-size: 0.95rem;
margin-bottom: 0.3rem;
font-weight: 600;
}
/* Tabs (Anmelden / Registrieren) */
.login-form__tabs {
display: flex;
gap: 0.3rem;
padding: 0.3rem;
margin-bottom: 1.5rem;
background: var(--rose-50);
border-radius: var(--radius-pill);
border: 1px solid var(--rose-100);
}
.login-form__tab {
flex: 1;
padding: 0.7rem 1.2rem;
border-radius: var(--radius-pill);
border: none;
background: transparent;
color: var(--text-2);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s var(--ease);
}
.login-form__tab:hover { color: var(--rose-600); }
.login-form__tab.is-active {
background: var(--surface);
color: var(--rose-600);
box-shadow: 0 4px 12px -4px rgba(193, 89, 104, 0.25);
}
.login-form__panel { display: none; }
.login-form__panel.is-active { display: block; }
/* Tabs auf engen Viewports kompakter, sonst sprengt der zweite Tab
("REGISTRIEREN" -- 12 Zeichen mit Letter-Spacing) den halben Container und
schiebt sich ueber den Form-Rand. min-width:0 erlaubt das Schrumpfen unter
die Default-min-content-Breite, falls noetig. */
@media (max-width: 480px) {
.login-form__tabs { padding: 0.25rem; gap: 0.2rem; }
.login-form__tab {
padding: 0.65rem 0.4rem;
font-size: 0.7rem;
letter-spacing: 0.06em;
min-width: 0;
}
}
@media (max-width: 360px) {
.login-form__tab {
padding: 0.6rem 0.3rem;
font-size: 0.65rem;
letter-spacing: 0.04em;
}
}
.login-form__help {
text-align: center;
font-size: 0.85rem;
color: var(--text-3);
margin-top: 1.2rem;
line-height: 1.6;
}
.login-form__divider {
margin: 1.6rem 0 1.2rem;
display: flex;
align-items: center;
gap: 0.8rem;
color: var(--text-3);
font-size: 0.76rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 600;
}
/* Social-Login-Buttons (Google / Apple) */
.login-form__social {
display: flex;
flex-direction: column;
gap: 0.6rem;
align-items: center;
margin: 0.2rem 0 0.4rem;
}
.login-form__social:empty {
display: none;
}
.login-form__social-slot {
min-height: 40px;
display: flex;
justify-content: center;
width: 100%;
}
.login-form__social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.65rem 1.4rem;
width: 100%;
max-width: 320px;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 500;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all .2s var(--ease);
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text-0);
}
.login-form__social-btn:hover {
background: var(--bg-1);
border-color: var(--text-1);
}
.login-form__social-btn--google {
background: #fff;
color: #1f1f1f;
border-color: #dadce0;
font-weight: 500;
letter-spacing: 0.01em;
}
.login-form__social-btn--google:hover {
background: #f8f9fa;
border-color: #c3c6c9;
box-shadow: 0 2px 6px -1px rgba(0,0,0,0.08);
}
.login-form__social-btn--apple {
background: #000;
color: #fff;
border-color: #000;
}
.login-form__social-btn--apple:hover {
background: #1a1a1a;
border-color: #1a1a1a;
}
.login-form__social-icon {
flex-shrink: 0;
}
.login-form__divider::before,
.login-form__divider::after {
content: "";
flex-grow: 1;
height: 1px;
background: var(--rose-200);
}
.login-form__register {
width: 100%;
justify-content: center;
margin-top: 0.6rem;
}
/* Fallback — dezent, nicht aufdringlich, aber klickbar */
.login-form__fallback {
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
margin-top: 1rem;
padding: 0.9rem 1.1rem;
background: var(--rose-50);
border: 1px dashed var(--rose-200);
border-radius: var(--radius-md);
color: var(--text-1);
text-align: left;
cursor: pointer;
transition: all .25s var(--ease);
}
.login-form__fallback:hover {
background: var(--surface);
border-color: var(--rose-400);
border-style: solid;
transform: translateY(-1px);
box-shadow: 0 8px 20px -10px rgba(193, 89, 104, 0.25);
}
.login-form__fallback-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--surface);
color: var(--rose-500);
flex-shrink: 0;
border: 1px solid var(--rose-200);
transition: all .25s var(--ease);
}
.login-form__fallback:hover .login-form__fallback-icon {
background: var(--rose-400);
color: #fff;
border-color: var(--rose-400);
}
.login-form__fallback-icon svg { width: 16px; height: 16px; }
.login-form__fallback-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
line-height: 1.3;
}
.login-form__fallback-text strong {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-0);
}
.login-form__fallback-text small {
font-size: 0.78rem;
color: var(--text-3);
font-weight: 400;
}
/* "Zurück zu meinen Terminen" Button im Login-Form */
.login-form__cancel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 1rem;
padding: 0.7rem 1rem;
background: transparent;
border: none;
color: var(--text-3);
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: color .25s var(--ease);
width: 100%;
}
.login-form__cancel:hover { color: var(--rose-500); }
/* Passwort-Stärke-Regeln (Live-Feedback) */
.password-rules {
list-style: none;
padding: 0.8rem 1rem;
margin: -0.4rem 0 0.9rem;
background: var(--rose-50);
border: 1px dashed var(--rose-200);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.82rem;
line-height: 1.4;
}
.password-rules li {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text-3);
transition: color .2s var(--ease);
padding-left: 0;
}
.password-rules li::before {
content: "○";
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
text-align: center;
color: var(--rose-200);
font-weight: 700;
font-size: 0.95rem;
transition: color .2s var(--ease), content .2s var(--ease);
}
.password-rules li.is-ok {
color: #2e6a2e;
}
.password-rules li.is-ok::before {
content: "✓";
color: #4a8a4a;
}
/* "Passwort vergessen?" — dezenter Text-Link unter dem Anmelden-Button */
.login-form__forgot {
display: block;
margin: 0.9rem auto 0;
padding: 0.5rem 0.8rem;
background: transparent;
border: none;
color: var(--rose-500);
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color .25s var(--ease);
}
.login-form__forgot:hover { color: var(--rose-700); }
/* Schritt-Liste im "Passwort vergessen"-Panel */
.login-form__steps {
list-style: none;
counter-reset: step;
padding: 0;
margin: 1rem 0 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.login-form__steps li {
counter-increment: step;
position: relative;
padding-left: 2.2rem;
font-size: 0.9rem;
color: var(--text-1);
line-height: 1.5;
}
.login-form__steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--rose-400);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
font-weight: 700;
}
/* Sync-Hint Banner — gleiches Look & Breite wie .bookings-page__empty
(gleicher Gradient, gleiche Border, gleiche 540px Breite) */
.bookings-sync-hint {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.2rem;
margin: 0 auto 1.5rem;
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-lg);
max-width: 540px;
box-shadow: 0 12px 28px -16px rgba(160, 66, 79, 0.18);
}
.bookings-sync-hint__body {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
min-width: 0;
}
.bookings-sync-hint__icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
color: #fff;
flex-shrink: 0;
box-shadow: 0 6px 14px -4px rgba(212, 117, 126, 0.45);
}
.bookings-sync-hint__icon svg { width: 18px; height: 18px; }
.bookings-sync-hint__text {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.bookings-sync-hint__text strong {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
color: var(--text-0);
letter-spacing: 0;
line-height: 1.3;
}
.bookings-sync-hint__text span {
font-size: 0.8rem;
color: var(--text-2);
line-height: 1.45;
}
.bookings-sync-hint .btn { flex-shrink: 0; }
@media (max-width: 600px) {
.bookings-sync-hint {
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
padding: 1rem 1.1rem;
margin-bottom: 1.4rem;
}
.bookings-sync-hint__body { align-items: flex-start; }
.bookings-sync-hint .btn { width: 100%; }
}
@media (max-width: 400px) {
.bookings-sync-hint { padding: 0.9rem 1rem; }
.bookings-sync-hint__icon { width: 32px; height: 32px; }
.bookings-sync-hint__icon svg { width: 16px; height: 16px; }
.bookings-sync-hint__text strong { font-size: 0.88rem; }
.bookings-sync-hint__text span { font-size: 0.78rem; }
}
/* Guest-Zustand: "Zur Startseite" Button (gleicher Look wie bookings-page__user) */
.bookings-page__guest {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.2rem;
}
.bookings-list {
margin-bottom: 3rem;
}
.bookings-list__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--rose-200);
flex-wrap: wrap;
}
.bookings-list__title {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 600;
color: var(--text-0);
}
.bookings-list__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 28px;
padding: 0 0.7rem;
background: var(--rose-400);
color: #fff;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
box-shadow: 0 4px 10px -2px rgba(212, 117, 126, 0.45);
}
.bookings-list__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.2rem;
}
/* Select-Toggle Button im Section-Header */
.bookings-list__select-toggle {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.95rem;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose-500);
background: var(--surface);
border: 1px solid var(--rose-200);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all .25s var(--ease);
margin-left: auto;
}
.bookings-list__select-toggle:hover {
background: var(--rose-50);
border-color: var(--rose-300);
color: var(--rose-600);
}
.bookings-list.is-selecting .bookings-list__select-toggle {
background: var(--rose-400);
color: #fff;
border-color: var(--rose-400);
}
/* Sticky Action-Bar unter der Grid, sichtbar im Auswahl-Modus */
.bookings-list__actionbar {
position: sticky;
bottom: 1rem;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.2rem;
padding: 0.85rem 1.1rem;
background: var(--surface);
border: 1.5px solid var(--rose-300);
border-radius: var(--radius-pill);
box-shadow: 0 12px 28px -8px rgba(160, 66, 79, 0.28);
flex-wrap: wrap;
}
.bookings-list__actionbar-count {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 600;
color: var(--rose-600);
}
.bookings-list__actionbar-actions {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.bookings-list__actionbar { flex-direction: column; align-items: stretch; padding: 0.85rem 1rem; border-radius: var(--radius-md); }
.bookings-list__actionbar-count { text-align: center; }
.bookings-list__actionbar-actions { justify-content: center; }
.bookings-list__actionbar-actions .btn { flex: 1 1 80px; }
.bookings-list__select-toggle { margin-left: 0; }
}
/* Checkbox-Slot in der Booking-Card (position: absolute oben links) */
.booking-card { position: relative; }
.booking-card__select {
position: absolute;
top: 1rem;
left: 1rem;
display: none;
cursor: pointer;
z-index: 2;
}
.booking-card__select-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.booking-card__select-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 2px solid var(--rose-300);
border-radius: 6px;
background: var(--surface);
color: #fff;
transition: all .2s var(--ease);
box-shadow: 0 2px 6px -2px rgba(160, 66, 79, 0.2);
}
.booking-card__select-box svg {
width: 14px;
height: 14px;
opacity: 0;
transform: scale(0.5);
transition: all .2s var(--ease);
}
.booking-card__select-input:checked ~ .booking-card__select-box {
background: var(--rose-500);
border-color: var(--rose-500);
}
.booking-card__select-input:checked ~ .booking-card__select-box svg {
opacity: 1;
transform: scale(1);
}
/* Im Auswahl-Modus: Checkbox sichtbar, Card-Padding-Left erhöht,
Aktions-Buttons unten ausgeblendet (verhindert Doppel-Aktionen) */
.bookings-list.is-selecting .booking-card__select { display: inline-flex; }
.bookings-list.is-selecting .booking-card { padding-left: 3rem; cursor: pointer; }
.bookings-list.is-selecting .booking-card__actions { opacity: 0.4; pointer-events: none; }
.bookings-list.is-selecting .booking-card:has(.js-booking-select:checked) {
border-color: var(--rose-400);
box-shadow: 0 16px 36px -14px rgba(160, 66, 79, 0.35);
}
@media (max-width: 480px) {
.bookings-list.is-selecting .booking-card { padding-left: 2.6rem; }
.booking-card__select { top: 0.9rem; left: 0.85rem; }
.booking-card__select-box { width: 22px; height: 22px; }
}
.booking-card {
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border: 1.5px solid var(--rose-200);
border-radius: var(--radius-lg);
padding: 1.8rem 2rem 1.6rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
transition: all .35s var(--ease);
position: relative;
overflow: hidden;
}
.booking-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--rose-300), var(--rose-400), var(--rose-500));
transform: scaleX(0.3);
transform-origin: left;
transition: transform .5s var(--ease);
}
.booking-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -22px rgba(160, 66, 79, 0.3);
border-color: var(--rose-300);
background: var(--surface);
}
.booking-card:hover::before { transform: scaleX(1); }
/* Head: Service-Name + Status-Badge */
.booking-card__head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
padding-bottom: 1rem;
border-bottom: 1px solid var(--rose-100);
}
.booking-card__service {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
color: var(--text-0);
line-height: 1.3;
margin: 0;
flex-grow: 1;
}
/* Badges */
.booking-card__badge {
padding: 0.45rem 1rem;
border-radius: var(--radius-pill);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.booking-card__badge--confirmed { background: rgba(120, 165, 120, 0.22); color: #2e5a2e; }
.booking-card__badge--pending { background: var(--rose-100); color: var(--rose-700); }
.booking-card__badge--cancelled { background: rgba(184, 98, 112, 0.22); color: var(--rose-700); }
.booking-card__badge--past { background: var(--rose-100); color: var(--rose-700); }
.booking-card__badge--rescheduled {
background: #f5b100;
color: #3d2830;
box-shadow: 0 6px 14px -4px rgba(245, 177, 0, 0.5);
animation: rescheduleBlink 2.4s ease-in-out infinite;
}
@keyframes rescheduleBlink {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* Warnung in der Buchungs-Karte bei Verschiebung */
.booking-card.is-rescheduled {
border-color: #f5b100;
box-shadow: 0 0 0 2px rgba(245, 177, 0, 0.22), 0 20px 40px -18px rgba(245, 177, 0, 0.35);
}
.booking-card__warning {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 1.1rem;
margin-bottom: 1.2rem;
background: linear-gradient(135deg, #fff5d9, #ffe8a8);
border: 1.5px solid #f5b100;
border-radius: var(--radius-md);
color: #3d2830;
}
.booking-card__warning-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
color: #c98700;
margin-top: 0.15rem;
}
.booking-card__warning-body { flex: 1; }
.booking-card__warning-body strong {
display: block;
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: #7a5100;
margin-bottom: 0.4rem;
line-height: 1.3;
}
.booking-card__warning-body p {
margin: 0 0 0.8rem;
font-size: 0.92rem;
line-height: 1.6;
color: var(--text-1);
}
.booking-card__warning-old {
text-decoration: line-through;
color: var(--text-3);
font-weight: 500;
}
.booking-card__warning-new {
color: var(--rose-600);
font-weight: 700;
}
.booking-card__warning-ack {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: #f5b100;
color: #3d2830;
border: none;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s var(--ease);
}
.booking-card__warning-ack:hover {
background: #d99800;
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(245, 177, 0, 0.55);
}
/* Meta: Datum / Zeit / Buchungs-ID / Notiz als dl */
.booking-card__meta {
display: grid;
gap: 0.85rem;
margin: 0;
}
.booking-card__meta > div {
display: grid;
grid-template-columns: 110px 1fr;
gap: 0.8rem;
align-items: baseline;
}
.booking-card__meta dt {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rose-500);
}
.booking-card__meta dd {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: var(--text-0);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
line-height: 1.4;
letter-spacing: 0.005em;
}
.booking-card__meta dd code {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
color: var(--text-2);
background: var(--rose-50);
padding: 0.25rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid var(--rose-100);
letter-spacing: 0.04em;
}
.booking-card__actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.4rem;
}
.booking-card__action {
padding: 0.6rem 1.1rem;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--rose-400);
color: #fff;
border: 1.5px solid transparent;
transition: all .25s var(--ease);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
box-shadow: 0 6px 14px -4px rgba(212, 117, 126, 0.4);
}
.booking-card__action:hover {
background: var(--rose-500);
transform: translateY(-1px);
box-shadow: 0 10px 20px -4px rgba(212, 117, 126, 0.5);
}
.booking-card__action--cancel {
background: transparent;
color: var(--rose-600);
border-color: var(--rose-300);
box-shadow: none;
}
.booking-card__action--cancel:hover {
background: var(--rose-50);
color: var(--rose-700);
border-color: var(--rose-400);
box-shadow: 0 6px 14px -4px rgba(160, 66, 79, 0.2);
}
.booking-card__action--delete {
background: transparent;
color: var(--text-2);
border-color: var(--line);
box-shadow: none;
}
.booking-card__action--delete:hover {
background: var(--rose-50);
color: var(--rose-700);
border-color: var(--rose-300);
}
.bookings-page__empty {
text-align: center;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
background: linear-gradient(180deg, var(--surface) 0%, var(--rose-50) 100%);
border-radius: var(--radius-lg);
border: 1.5px solid var(--rose-200);
max-width: 540px;
margin: 0 auto;
box-shadow: 0 20px 44px -20px rgba(160, 66, 79, 0.2);
}
.bookings-page__empty-icon {
width: 88px;
height: 88px;
margin: 0 auto 1.4rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 14px 30px -10px rgba(212, 117, 126, 0.55);
}
.bookings-page__empty-icon svg { width: 40px; height: 40px; }
.bookings-page__empty-title {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 0.7rem;
color: var(--text-0);
}
.bookings-page__empty-text {
color: var(--text-2);
line-height: 1.7;
margin-bottom: 1.8rem;
max-width: 420px;
margin-left: auto;
margin-right: auto;
font-size: 1rem;
}
.bookings-page__empty-actions {
display: flex;
gap: 0.7rem;
justify-content: center;
flex-wrap: wrap;
}
/* Button small variant */
.btn--small {
padding: 0.55rem 1rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
}
/* nav--legal = simpler nav on sub-pages (keep same style) */
.nav--legal { /* same as .nav */ }
/* nav--simple = reduzierte Nav auf Unterseiten: nur Logo + "Meine Termine" + CTA
Keine vielen Menü-Links, kein Warenkorb, kein Burger nötig */
.nav--simple .nav__inner {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: nowrap;
min-width: 0;
}
.nav--simple .nav__logo {
flex: 0 1 auto;
min-width: 0;
/* KEIN overflow — sonst schneidet die Font-Metrik des "G" ab */
}
.nav--simple .nav__logo-text {
white-space: nowrap;
/* KEIN overflow:hidden / text-overflow:ellipsis — der Text ist kurz genug
und die serif-Fonts brauchen den vollen Überhang (G, B). */
}
.nav__simple-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-1);
padding: 0.55rem 0.9rem;
border-radius: var(--radius-pill);
transition: all .25s var(--ease);
white-space: nowrap;
flex-shrink: 0;
margin-left: auto; /* drückt sich + alles Folgende rechts */
}
.nav__simple-link:hover,
.nav__simple-link[aria-current="page"] {
color: var(--rose-500);
background: var(--rose-50);
}
.nav--simple .nav__cta {
flex-shrink: 0;
white-space: nowrap;
}
/* In der Simple-Nav übernimmt der Account-Button die Rolle des Spacers,
den vorher .nav__simple-link mit margin-left:auto innehatte. So bleiben
Konto-Button + "Termin buchen" rechts ausgerichtet. */
.nav--simple .nav__account { margin-left: auto; }
/* Tablet: "Meine Termine" als Icon + Kurztext */
@media (max-width: 768px) {
.nav--simple .nav__inner { gap: 0.6rem; padding: 0.75rem 1rem; }
.nav__simple-link {
padding: 0.5rem 0.75rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.nav--simple .nav__cta { padding: 0.55rem 0.95rem; font-size: 0.72rem; letter-spacing: 0.08em; }
}
/* Mobile L: "Meine Termine" → nur Kalender-Icon */
@media (max-width: 480px) {
.nav--simple .nav__inner { gap: 0.45rem; padding: 0.65rem 0.85rem; }
.nav__simple-link {
padding: 0.5rem;
font-size: 0;
width: 40px;
height: 40px;
justify-content: center;
background: var(--rose-50);
border: 1px solid var(--rose-100);
}
.nav__simple-link::before {
content: "";
width: 18px;
height: 18px;
font-size: 0;
background: currentColor;
color: var(--rose-500);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.nav--simple .nav__cta {
padding: 0.55rem 0.9rem;
font-size: 0.7rem;
letter-spacing: 0.06em;
}
.nav--simple .nav__logo { font-size: 1.05rem; }
.nav--simple .nav__logo-mark { width: 26px; height: 26px; font-size: 1rem; }
}
/* Mobile M: "Termin buchen" als runder Icon-Button (Kalender), symmetrisch
zum Konto-Button rechts. Sonst kollidiert der Logo-Text auf engen Screens
mit den beiden Buttons (z.B. 320 px iPhone SE 1. Gen). */
@media (max-width: 420px) {
.nav--simple .nav__cta {
width: 44px;
height: 44px;
padding: 0;
font-size: 0; /* Text "Termin buchen" verschwindet */
letter-spacing: 0;
gap: 0;
border-radius: 50%;
justify-content: center;
flex-shrink: 0;
}
.nav--simple .nav__cta::before {
width: 18px;
height: 18px;
}
}
/* Mobile S: Logo kompakter, CTA bleibt Icon-Button (von 420er-Block) */
@media (max-width: 360px) {
.nav--simple .nav__inner { padding: 0.55rem 0.7rem; gap: 0.4rem; }
.nav__simple-link { display: none; }
.nav--simple .nav__logo-text { font-size: 0.9rem; }
.nav--simple .nav__logo-mark { width: 22px; height: 22px; font-size: 0.9rem; }
.nav--simple .nav__cta { width: 40px; height: 40px; }
}
/* =========================================================
Sub-pages — Responsive Overrides (muss NACH Base-Styles stehen)
========================================================= */
@media (max-width: 768px) {
.legal__content { padding: 1.6rem 1.3rem; }
.legal__content h2 { font-size: 1.3rem; margin: 1.8rem 0 0.8rem; }
.legal__content h3 { font-size: 1.1rem; }
.legal__content address { padding: 0.8rem 1rem; }
.legal .section__head { padding-left: 0.9rem; }
.bookings-list__grid { grid-template-columns: 1fr; }
.bookings-list__head { gap: 0.5rem; margin-bottom: 1rem; }
.booking-card { padding: 1.3rem 1.2rem 1.2rem; }
.booking-card__service { font-size: 1.25rem; }
.booking-card__meta > div { grid-template-columns: 95px 1fr; gap: 0.5rem; }
.thankyou__contact { grid-template-columns: 90px 1fr; gap: 0.6rem; padding: 0.85rem 0.95rem; }
.thankyou__booking-head { grid-template-columns: 1fr; gap: 1rem; }
.thankyou__booking-date strong,
.thankyou__booking-customer strong { font-size: 1.05rem; }
.thankyou__booking-item {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
padding: 0.9rem;
}
.thankyou__booking-item-side { text-align: left; }
.thankyou__step h3 { font-size: 1.1rem; }
.thankyou__section-title { font-size: 1.3rem; margin-bottom: 1.2rem; }
.cancel { padding-top: clamp(4rem, 10vw, 6rem); }
.cancel__card { padding: 1.6rem 1.3rem; }
.cancel__item { padding: 1rem 1.1rem; gap: 0.8rem; }
.cancel__item-body strong { font-size: 1.15rem; }
.cancel__item-box { width: 22px; height: 22px; }
.cancel__item-box::after { width: 10px; height: 5px; }
.cancel__actions { justify-content: stretch; }
.cancel__actions .btn { flex: 1 1 140px; }
.login-form { padding: 1.8rem 1.3rem; }
.bookings-page__user {
gap: 0.6rem;
padding: 0.5rem 0.9rem;
font-size: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
/* Legal-Seiten */
.legal { padding: clamp(5rem, 14vw, 7rem) 0.9rem 3rem; }
.legal__back { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
.legal__content { padding: 1.2rem 1rem; border-radius: var(--radius-md); }
.legal__content h2 { font-size: 1.15rem; padding-bottom: 0.4rem; gap: 0.5rem; }
.legal__content h2::before { width: 6px; height: 6px; }
.legal__content address { padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.legal__content address strong { font-size: 0.98rem; }
.legal__meta { padding: 0.8rem 1rem; font-size: 0.85rem; }
.legal__highlight, .legal__content blockquote { padding: 1rem 1.1rem; margin: 1.2rem 0; }
/* Meine Termine */
.bookings-page { padding-left: 0.9rem; padding-right: 0.9rem; }
.bookings-page__head { margin-bottom: 2rem; padding-bottom: 1.4rem; }
.bookings-page__empty { padding: 2rem 1.2rem; }
.bookings-page__empty-icon { width: 72px; height: 72px; }
.bookings-page__empty-title { font-size: 1.3rem; }
.login-form { padding: 1.5rem 1.1rem; border-radius: var(--radius-md); }
.login-form__title { font-size: 1.4rem; }
.login-form__field input { font-size: 0.92rem; padding: 0.75rem 0.9rem; }
.login-form__divider { margin: 1.2rem 0 1rem; font-size: 0.7rem; letter-spacing: 0.16em; }
.booking-card { padding: 1.1rem 1rem; gap: 0.9rem; border-radius: var(--radius-md); }
.booking-card__head { gap: 0.5rem; padding-bottom: 0.7rem; }
.booking-card__service { font-size: 1.15rem; }
.booking-card__badge { padding: 0.35rem 0.7rem; font-size: 0.68rem; letter-spacing: 0.1em; }
.booking-card__meta > div {
grid-template-columns: 1fr;
gap: 0.15rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--rose-100);
}
.booking-card__meta > div:last-child { border-bottom: none; padding-bottom: 0; }
.booking-card__meta dt { font-size: 0.7rem; letter-spacing: 0.12em; }
.booking-card__meta dd { font-size: 0.92rem; }
.booking-card__actions { gap: 0.4rem; }
.booking-card__action { padding: 0.55rem 0.9rem; font-size: 0.68rem; letter-spacing: 0.1em; }
/* Thankyou */
.thankyou { padding-left: 0.9rem; padding-right: 0.9rem; gap: 1.2rem; }
.thankyou__card { padding: 1.3rem 1.1rem; border-radius: var(--radius-md); }
.thankyou__check { width: 76px; height: 76px; margin-bottom: 1rem; }
.thankyou__section-title { font-size: 1.2rem; margin-bottom: 0.9rem; }
.thankyou__contact {
grid-template-columns: 1fr;
gap: 0.15rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--line);
}
.thankyou__contact:last-child { border-bottom: none; padding-bottom: 0; }
.thankyou__booking-head { flex-direction: column; align-items: flex-start; }
.thankyou__step { gap: 0.8rem; }
.thankyou__step-num { width: 32px; height: 32px; font-size: 0.9rem; }
.thankyou__tips-icon { width: 24px; height: 24px; font-size: 0.8rem; }
.thankyou__booking-actions { gap: 0.4rem; }
.thankyou__booking-actions .btn { flex: 1 1 140px; font-size: 0.7rem; padding: 0.7rem 0.9rem; }
.thankyou__booking-cancel-btn { flex: 1 1 140px; padding: 0.65rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.1em; }
.thankyou__calendar-buttons { gap: 0.35rem; }
.thankyou__calendar-btn { font-size: 0.76rem; padding: 0.45rem 0.8rem; }
/* Cancel */
.cancel { padding-left: 0.9rem; padding-right: 0.9rem; }
.cancel__card { padding: 1.3rem 1rem; border-radius: var(--radius-md); }
.cancel__header { margin-bottom: 1.4rem; padding-bottom: 1rem; }
.cancel__icon { width: 68px; height: 68px; margin-bottom: 1rem; }
.cancel__icon svg { width: 34px; height: 34px; }
.cancel__lead { font-size: 0.95rem; }
.cancel__item { padding: 0.9rem; gap: 0.7rem; grid-template-columns: auto 1fr; }
.cancel__item-body strong { font-size: 1.05rem; gap: 0.35rem; }
.cancel__item-body > span { font-size: 0.88rem; }
.cancel__item-meta { font-size: 0.7rem !important; letter-spacing: 0.04em !important; }
.cancel__reason textarea { padding: 0.8rem 1rem; font-size: 0.92rem; }
.cancel__note { padding: 0.8rem 1rem; font-size: 0.85rem; }
.cancel__actions { gap: 0.5rem; }
.cancel__actions .btn { width: 100%; flex: 1 1 100%; }
}
@media (max-width: 380px) {
.booking-card { padding: 1rem 0.9rem; }
.booking-card__service { font-size: 1.05rem; }
.cancel__item { padding: 0.8rem; }
.cancel__item-body strong { font-size: 0.98rem; }
.thankyou__card { padding: 1.1rem 0.9rem; }
.legal__content { padding: 1rem 0.85rem; }
}
/* =========================================================
Globale Responsive-Overrides (FINAL — überschreibt alles oben)
Breakpoints: Tablet 1024, Tablet-Portrait 768,
Mobile L 480, Mobile M 400, Mobile S 360, Tiny 340
========================================================= */
/* Globale Absicherung — gegen horizontales Scrollen */
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
iframe { border: 0; }
.contact__map iframe { width: 100%; height: 100%; display: block; }
/* Tablet landscape ---------------------------------------- */
@media (max-width: 1024px) {
.section { padding: clamp(3.5rem, 8vw, 6rem) clamp(1.1rem, 3.5vw, 2rem); }
.hero__inner { padding: 0 clamp(1.1rem, 3.5vw, 2rem); }
.showcase { padding: clamp(3.5rem, 7vw, 6rem) clamp(1.1rem, 3.5vw, 2rem); }
.footer { padding-left: clamp(1.1rem, 3.5vw, 2rem); padding-right: clamp(1.1rem, 3.5vw, 2rem); }
.features-strip__inner { padding: 1rem clamp(1rem, 3vw, 2rem); gap: 1rem; }
.trustbar__inner { padding: 1rem clamp(1rem, 3vw, 2rem); gap: 0.9rem; }
.contact { padding: clamp(3.5rem, 8vw, 6rem) clamp(1.1rem, 3.5vw, 2rem); }
.consult__inner { padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2rem); }
.services__grid, .services__packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services__grid > *, .services__packages-grid > * { min-width: 0; }
}
/* Tablet portrait / kleiner ------------------------------- */
@media (max-width: 768px) {
.section { padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 1.5rem); }
.hero { padding-top: clamp(5rem, 14vw, 7rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero__inner { padding: 0 clamp(1rem, 4vw, 1.5rem); }
.showcase { padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 1.5rem); }
.footer { padding: 2.8rem clamp(1rem, 4vw, 1.5rem) 1.6rem; }
.contact { padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 1.5rem); }
/* Typografie kleiner skalieren */
h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
h2, .section__title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
.section__lead { font-size: 0.98rem; }
/* Grids garantiert 1-spaltig */
.services__grid,
.services__packages-grid,
.features-strip__inner,
.process__steps,
.care__panel,
.care__stack,
.showcase__grid,
.testimonials__grid,
.checkout__grid,
.bookings-list__grid,
.tech__grid,
.showcase__inner,
.about__grid,
.contact__card { grid-template-columns: 1fr; }
/* Grid-Kinder dürfen nicht überlaufen */
.services__grid > *,
.services__packages-grid > *,
.process__steps > *,
.wavelengths__grid > *,
.tech__features > *,
.features-strip__inner > *,
.showcase__grid > *,
.testimonials__grid > * { min-width: 0; max-width: 100%; }
/* 2er-Grids bleiben 2-spaltig, aber sicher */
.wavelengths__grid, .tech__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
/* Hero Image kleiner */
.hero__image { max-width: 420px; width: 100%; }
/* Service/Booking/Thankyou Karten mit schmalerem Padding */
.service-card, .service-card--package, .service-card--featured { padding: 1.5rem 1.2rem; }
.service-card--package { padding-top: 2rem; }
/* Actions/Buttons stack auf Mobile */
.hero__actions,
.thankyou__booking-actions,
.cancel__actions,
.checkout__actions { flex-direction: column; align-items: stretch; width: 100%; }
.hero__actions .btn,
.thankyou__booking-actions .btn,
.cancel__actions .btn,
.checkout__actions .btn { width: 100%; flex: 1 1 auto; }
.hero__content { width: 100%; }
/* Kontakt-Karte */
.contact__text { padding: 1.6rem 1.2rem; }
.contact__map { min-height: 280px; }
/* Modals schmaler */
.modal { padding: 0.8rem; }
.modal__dialog { padding: 1.4rem 1.1rem; max-height: calc(100vh - 1.6rem); border-radius: var(--radius-md); }
/* Process/Feature Karten padding */
.process__step, .feature-item { padding: 1.4rem 1.2rem; }
/* FAQ Akkordeon */
.faq__item summary { padding: 1rem 1rem; font-size: 0.98rem; gap: 0.5rem; }
.faq__item p { padding: 0 1rem 1.1rem; font-size: 0.92rem; }
/* Footer */
.footer__inner { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; justify-items: center; }
.footer__links { justify-content: center; flex-wrap: wrap; }
/* Tab-Buttons sollen umbrechen */
.tabs { flex-wrap: wrap; max-width: 100%; }
/* Cart-Bar */
.cart-bar { width: calc(100% - 1.5rem); max-width: 520px; }
.cart-bar__inner { flex-wrap: wrap; }
}
/* Mobile L -------------------------------------------------- */
@media (max-width: 480px) {
.section { padding: clamp(2.5rem, 10vw, 4rem) 1rem; }
.hero { padding-top: clamp(4.5rem, 16vw, 6rem); }
.hero__inner { padding: 0 1rem; }
.showcase { padding: clamp(2.5rem, 10vw, 4rem) 1rem; }
.contact { padding: clamp(2.5rem, 10vw, 4rem) 1rem; }
.footer { padding: 2.2rem 1rem 1.3rem; }
.consult__inner { padding: 1.8rem 1rem; border-radius: var(--radius-md); }
/* Typografie */
h1, .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.1; }
h2, .section__title { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; }
.section__lead { font-size: 0.92rem; }
.hero__subtitle { font-size: 0.98rem; line-height: 1.65; }
/* Buttons kompakter */
.btn { padding: 0.85rem 1.2rem; font-size: 0.76rem; letter-spacing: 0.1em; }
.btn__arrow { display: none; }
/* Karten schmäler */
.service-card, .service-card--package, .service-card--featured,
.booking-card, .thankyou__card, .cancel__card,
.login-form, .process__step, .testimonial, .feature-item,
.wavelength-card { padding: 1.2rem 1rem; border-radius: var(--radius-md); }
.service-card--package { padding-top: 1.8rem; }
.service-card h3 { font-size: 1.25rem; }
.service-card__price { font-size: 1.5rem; }
.service-card--package .service-card__price { font-size: 1.8rem; }
.service-card__add { padding: 0.65rem 1rem; font-size: 0.72rem; }
/* Grids garantiert 1-spaltig inkl. 2er-Grids */
.wavelengths__grid, .tech__features { grid-template-columns: 1fr; }
/* Kontakt */
.contact__card { border-radius: var(--radius-md); }
.contact__text { padding: 1.3rem 1rem; }
.contact__map { min-height: 240px; }
.contact__call { padding: 0.8rem 0.9rem; grid-template-columns: auto 1fr; column-gap: 0.7rem; }
.contact__call-arrow { display: none; }
.contact__call-icon { width: 34px; height: 34px; }
.contact__call-number { font-size: 1rem; }
.contact__info li { padding: 0.75rem 0.85rem; font-size: 0.88rem; }
.contact__info-icon { width: 32px; height: 32px; }
/* Modal Vollbildartig */
.modal { padding: 0.6rem; }
.modal__dialog { padding: 1.2rem 1rem; }
.modal__title { font-size: 1.3rem; }
.modal__close { top: 0.5rem; right: 0.5rem; width: 30px; height: 30px; font-size: 1.2rem; }
/* Hero-Bild kleiner, Badge ausblenden */
.hero__image { max-width: 100%; }
.hero__badge { display: none; }
/* Proof minimalisieren */
.hero__proof { flex-wrap: wrap; }
/* Navigation: CTA/Cart aus Menü-Hülle ausblenden, Burger bleibt sichtbar */
.nav__inner { padding: 0.6rem 0.9rem; gap: 0.4rem; }
.nav__logo { font-size: 1.25rem; }
.nav__logo-mark { width: 30px; height: 30px; font-size: 1.15rem; }
/* Trustbar horizontal scrollbar — aber schmal */
.trustbar__inner { gap: 0.7rem; padding: 0.8rem 1rem; }
.trustbar__item { font-size: 0.68rem; }
/* Features strip klein */
.features-strip__inner { padding: 0.8rem 1rem; gap: 0.8rem; }
.feature-item { gap: 0.8rem; }
.feature-item__icon { width: 40px; height: 40px; }
/* FAQ */
.faq__item summary { padding: 0.9rem 0.9rem; font-size: 0.94rem; }
.faq__item summary::after { width: 26px; height: 26px; font-size: 1.15rem; }
.faq__item p { padding: 0 0.9rem 1rem; font-size: 0.88rem; }
/* Tabs */
.tabs__btn { padding: 0.6rem 1rem; font-size: 0.72rem; letter-spacing: 0.1em; }
/* Footer */
.footer__inner { gap: 1.3rem; }
.footer__links { gap: 0.6rem 1rem; }
.footer__links a { font-size: 0.75rem; }
/* Cart-Bar fast voll — Buttons in einer Zeile gleich breit, kein
Wrap, damit die Bar geschlossen wirkt. */
.cart-bar { left: 0.5rem; right: 0.5rem; transform: translateY(120%); width: auto; max-width: none; }
.cart-bar.is-visible { transform: translateY(0); }
.cart-bar__summary { font-size: 0.78rem; justify-content: center; }
.cart-bar__actions { flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; width: 100%; }
.cart-bar__btn { flex: 1 1 0; min-width: 0; font-size: 0.68rem; padding: 0.55rem 0.9rem; }
/* Cookie-Banner voll */
.cookie-banner { left: 0.5rem; right: 0.5rem; transform: none; width: auto; max-width: none; }
}
/* Mobile M -------------------------------------------------- */
@media (max-width: 400px) {
html { font-size: 15.5px; }
.section { padding: clamp(2.2rem, 10vw, 3.5rem) 0.9rem; }
.hero__inner { padding: 0 0.9rem; }
.footer { padding: 2rem 0.9rem 1.2rem; }
.nav__inner { padding: 0.55rem 0.75rem; gap: 0.35rem; }
.nav__logo { font-size: 1.15rem; gap: 0.4rem; }
.nav__logo-mark { width: 28px; height: 28px; font-size: 1.05rem; }
.btn { padding: 0.8rem 1rem; font-size: 0.72rem; letter-spacing: 0.08em; }
h1, .hero__title { font-size: clamp(1.75rem, 9vw, 2.15rem); }
h2, .section__title { font-size: clamp(1.5rem, 7.5vw, 1.85rem); }
h3 { font-size: 1.08rem; }
.service-card, .service-card--package, .service-card--featured,
.booking-card, .thankyou__card, .cancel__card,
.login-form, .process__step, .testimonial, .feature-item,
.wavelength-card { padding: 1rem 0.85rem; }
.hero__proof-avatars { gap: 0; }
.hero__proof-avatar { width: 32px; height: 32px; margin-right: -10px; border-width: 2px; }
.modal__dialog { padding: 1rem 0.85rem; }
.modal__title { font-size: 1.15rem; }
.tabs__btn { padding: 0.5rem 0.75rem; font-size: 0.68rem; }
.checkout__slot-tab { padding: 0.45rem 0.25rem; font-size: 0.68rem; }
.checkout__slot { padding: 0.45rem 0.7rem; font-size: 0.75rem; }
.checkout__summary { padding: 0.9rem 0.95rem; }
.trustbar__inner { padding: 0.75rem 0.9rem; gap: 0.6rem; }
.trustbar__item { font-size: 0.64rem; letter-spacing: 0.08em; gap: 0.4rem; }
.contact__call { padding: 0.75rem 0.85rem; }
.contact__info li { padding: 0.7rem 0.8rem; font-size: 0.85rem; grid-template-columns: auto 1fr; }
.contact__info-icon { width: 30px; height: 30px; }
.faq__item summary { padding: 0.85rem 0.8rem; font-size: 0.9rem; }
.faq__item p { padding: 0 0.8rem 0.9rem; font-size: 0.85rem; }
.footer__brand { font-size: 1.3rem; }
.footer__tagline { font-size: 0.85rem; }
.footer__links a { font-size: 0.72rem; letter-spacing: 0.06em; }
}
/* Mobile S -------------------------------------------------- */
@media (max-width: 360px) {
html { font-size: 15px; }
.section { padding: 2rem 0.8rem; }
.hero__inner { padding: 0 0.8rem; }
.footer { padding: 1.8rem 0.8rem 1.1rem; }
.btn { padding: 0.72rem 0.9rem; font-size: 0.68rem; }
h1, .hero__title { font-size: clamp(1.6rem, 9vw, 1.95rem); }
h2, .section__title { font-size: clamp(1.35rem, 7.5vw, 1.7rem); }
.service-card, .service-card--package, .service-card--featured,
.booking-card, .thankyou__card, .cancel__card,
.login-form, .process__step, .testimonial, .feature-item,
.wavelength-card { padding: 0.9rem 0.75rem; border-radius: 14px; }
.modal { padding: 0.4rem; }
.modal__dialog { padding: 0.9rem 0.75rem; max-height: calc(100vh - 0.8rem); }
.modal__title { font-size: 1.05rem; }
.nav__inner { padding: 0.5rem 0.65rem; }
.nav__logo-text { font-size: 1.05rem; }
.nav__cart { width: 40px; height: 40px; }
.nav__cart-icon { width: 20px; height: 20px; }
.tabs__btn { padding: 0.45rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.06em; }
.trustbar__item { font-size: 0.6rem; letter-spacing: 0.06em; }
.features-strip__inner { padding: 0.7rem 0.85rem; gap: 0.6rem; }
.contact__info li { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
.contact__call { padding: 0.65rem 0.75rem; gap: 0.5rem; }
.contact__call-label { font-size: 0.55rem; }
.contact__call-number { font-size: 0.92rem; }
.contact__call-icon { width: 30px; height: 30px; }
.faq__item summary { padding: 0.75rem 0.7rem; font-size: 0.86rem; }
.faq__item summary::after { width: 24px; height: 24px; font-size: 1rem; }
.footer__brand { font-size: 1.2rem; }
.footer__links { gap: 0.5rem 0.8rem; }
.footer__links a { font-size: 0.68rem; }
.footer__social-link { padding: 0.4rem 0.7rem; font-size: 0.76rem; }
/* Proof-Text kleiner, damit Avatare + Text passen */
.hero__proof-stars { font-size: 0.85rem; }
.hero__proof-label { font-size: 0.72rem; }
}
/* Tiny (unter iPhone SE / sehr alte Android) --------------- */
@media (max-width: 340px) {
html { font-size: 14.5px; }
.hero__proof-avatar { width: 28px; height: 28px; margin-right: -9px; }
.btn { padding: 0.68rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.06em; }
.nav__logo-text { font-size: 0.95rem; }
.nav__logo-mark { width: 24px; height: 24px; font-size: 0.95rem; }
}
/* =========================================================
Navigation — Burger-Modus ab ≤ 1440 px
(7 Menü-Links + CTA + Cart brauchen ~1300 px Platz, unter 1440 px
Viewport wird's zu eng — daher Burger aktivieren, bevor Links
mit dem "Termin buchen"-Button überlappen)
========================================================= */
@media (max-width: 1440px) {
/* Alle Desktop-Nav-Elemente ausblenden — ausser auf der
schlanken Unterseiten-Nav, die hat nur wenige Elemente */
.nav:not(.nav--simple) .nav__links,
.nav:not(.nav--simple) .nav__actions {
display: none;
}
.nav:not(.nav--simple) .nav__burger { display: flex; }
/* Rechte Gruppe (Account + Burger) zusammenhalten und nach rechts pushen.
Account wird per JS in .nav__right prepended — dadurch sitzt er direkt
links neben dem Burger, ohne ~ - oder :has()-Selector. */
.nav:not(.nav--simple) .nav__right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
/* Offenes Menü: Links als Fullwidth-Dropdown */
.nav.is-open .nav__links {
display: flex;
position: fixed;
top: 64px;
left: 0;
right: 0;
background: var(--surface);
flex-direction: column;
padding: 4.8rem 1.4rem 2rem;
gap: 0.4rem;
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
max-height: calc(100vh - 64px);
overflow-y: auto;
z-index: 3;
}
.nav.is-open .nav__links a {
display: block;
padding: 0.85rem 0.4rem;
font-size: 0.98rem;
border-bottom: 1px solid var(--line);
width: 100%;
}
.nav.is-open .nav__links li:last-child a { border-bottom: none; }
/* CTA exakt mittig (an der STARTSEITE-Linie), Cart rechts daneben mit
moderatem Abstand. Beide einzeln position:fixed, damit das CTA seine
eigene Mitte zentriert hat statt der GRUPPE. */
.nav.is-open .nav__actions { display: contents; }
.nav.is-open .nav__cta,
.nav.is-open .nav__cart {
display: inline-flex;
align-items: center;
justify-content: center;
position: fixed;
top: 76px;
height: 40px;
z-index: 4;
}
.nav.is-open .nav__cta {
left: 50%;
transform: translateX(-50%);
padding: 0 1rem;
font-size: 0.72rem;
}
.nav.is-open .nav__cart {
left: calc(50% + 6rem);
width: 40px;
padding: 0;
}
.nav.is-open .nav__cart-icon { width: 20px; height: 20px; }
}
/* Auf Mobile L und kleiner: CTA/Cart im offenen Nav ausblenden
(Platzmangel), stattdessen in den Menü-Links integriert */
@media (max-width: 480px) {
/* Auf Mobile L (≤ 480 px): Header rückt enger zusammen — Panel
beginnt schon bei 56 px statt 64 px, also auch CTA + Cart höher
und Panel-Padding-Top entsprechend kleiner. */
.nav.is-open .nav__cta,
.nav.is-open .nav__cart { top: 68px; }
.nav.is-open .nav__links {
top: 56px;
padding-top: 4.4rem;
max-height: calc(100vh - 56px);
}
}
/* =========================================================
Service-Card Paddings — garantiert genug Platz für das
rechts positionierte Produktbild UND unter der Badge
(bei Paket-Karten wie "Ganzkörper"). Höhere Spezifität
schlägt alle späteren .service-card Overrides in Media Queries.
========================================================= */
.services__grid .service-card,
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-right: calc(100px + 2.8rem);
}
/* Paket-Karten mit Badge brauchen mehr padding-top, damit der Titel
NICHT von der mittig-zentrierten Badge überdeckt wird */
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-top: 3.2rem;
}
@media (max-width: 768px) {
.services__grid .service-card,
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-right: calc(80px + 2.4rem);
}
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-top: 3rem;
}
}
@media (max-width: 480px) {
.services__grid .service-card,
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-right: calc(68px + 2.2rem);
}
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-top: 2.8rem;
}
}
@media (max-width: 380px) {
.services__grid .service-card,
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-right: calc(56px + 1.9rem);
}
.services__grid .service-card--package,
.services__grid .service-card--featured,
.services__packages-grid .service-card--package,
.services__packages-grid .service-card--featured {
padding-top: 2.6rem;
}
}
/* Wavelength-Card (808 nm) — Badge "STANDARD" mittig oben, Titel
darf nicht darunter rutschen → mehr padding-top */
.wavelengths__grid .wavelength-card--featured {
padding-top: 2.6rem;
}
@media (max-width: 768px) {
.wavelengths__grid .wavelength-card--featured { padding-top: 2.4rem; }
}
@media (max-width: 480px) {
.wavelengths__grid .wavelength-card--featured { padding-top: 2.2rem; }
}
@media (max-width: 380px) {
.wavelengths__grid .wavelength-card--featured { padding-top: 2rem; }
}