/* un-bedingt.ch — Wasserwelt: tief, ruhig, dynamisch */

html { scroll-behavior: smooth; }

body {
    font-feature-settings: "ss01", "liga", "kern";
    text-rendering: optimizeLegibility;
    background-color: #F4F9FB;
}

.font-serif { font-feature-settings: "kern", "liga", "calt"; }

.headline-tight   { letter-spacing: -0.02em;  line-height: 0.98; }
.headline-display { letter-spacing: -0.025em; line-height: 0.95; font-weight: 400; }

.eyebrow {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: #F4F9FB; }
::-webkit-scrollbar-thumb    { background: #B5D8E5; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2C6E8C; }

/* ----------------------------- Buttons ---------------------------- */

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.7rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #FBFCFD;
    background: linear-gradient(135deg, #2C6E8C 0%, #0E3149 100%);
    border-radius: 999px;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    box-shadow: 0 1px 2px rgba(14,49,73,0.10), 0 14px 30px -14px rgba(14,49,73,0.50);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 1px 2px rgba(14,49,73,0.10), 0 18px 36px -14px rgba(14,49,73,0.55);
}
.btn-primary .arrow { transition: transform 240ms ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0E3149;
    border: 1px solid rgba(14,49,73,0.18);
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    transition: border-color 220ms ease, background 220ms ease;
}
.btn-ghost:hover { border-color: #0E3149; background: rgba(255,255,255,0.8); }

.btn-on-dark {
    color: #FBFCFD;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
}
.btn-on-dark:hover { background: rgba(255,255,255,0.18); border-color: #FBFCFD; }

/* Click-Ripple-Element (von JS injiziert) */
.click-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,0.55);
    pointer-events: none;
    animation: clickRipple 600ms ease-out forwards;
}
@keyframes clickRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ----------------------------- Links ------------------------------ */

.link-quiet {
    color: #0E3149;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(14,49,73,0.3);
    text-underline-offset: 6px;
    transition: text-decoration-color 220ms ease, color 220ms ease;
}
.link-quiet:hover { text-decoration-color: #0E3149; }

.link-on-dark {
    color: #E8F4F8;
    text-decoration-color: rgba(232,244,248,0.4);
}
.link-on-dark:hover { text-decoration-color: #FFFFFF; color: #FFFFFF; }

/* ---------------------------- Karten ------------------------------ */

.card-water {
    position: relative;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(216,229,236,0.8);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    transition: transform 360ms cubic-bezier(.2,.7,.2,1), box-shadow 360ms ease, border-color 360ms ease;
    overflow: hidden;
}
.card-water::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(181,216,229,0) 0%, rgba(181,216,229,0.18) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
}
.card-water:hover {
    transform: translateY(-3px);
    border-color: rgba(107,169,199,0.6);
    box-shadow: 0 1px 3px rgba(14,49,73,0.06), 0 24px 48px -24px rgba(14,49,73,0.30);
}
.card-water:hover::before { opacity: 1; }

.card-deep {
    background: linear-gradient(165deg, rgba(14,49,73,0.92) 0%, rgba(26,74,102,0.92) 100%);
    border: 1px solid rgba(107,169,199,0.18);
    color: #E8F4F8;
}

/* ----------------------- Step-Number ------------------------------ */
.step-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #6BA9C7;
}

/* ----------------------- Wave-Divider ----------------------------- */
.wave-divider {
    width: 100%;
    display: block;
    line-height: 0;
}

/* ---------------------- Hero-Photo-Container ---------------------- */

.hero-photo {
    position: relative;
    background-image:
        linear-gradient(180deg, rgba(14,49,73,0.45) 0%, rgba(14,49,73,0.65) 60%, rgba(14,49,73,0.85) 100%),
        url('https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=2000&q=70');
    background-size: cover;
    background-position: center;
}
.hero-photo.parallax {
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .hero-photo.parallax { background-attachment: scroll; }
}

/* Foto-Hintergrund für Über-Mich-Sektion */
.water-surface {
    background-image:
        linear-gradient(180deg, rgba(244,249,251,0.92) 0%, rgba(244,249,251,0.70) 60%, rgba(244,249,251,0.95) 100%),
        url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=2000&q=70');
    background-size: cover;
    background-position: center;
}

/* ---------------------- Animierte Wellen-SVG ---------------------- */

.wave-anim path:nth-child(1) { animation: waveShift 12s ease-in-out infinite alternate; }
.wave-anim path:nth-child(2) { animation: waveShift 16s ease-in-out infinite alternate-reverse; }
.wave-anim path:nth-child(3) { animation: waveShift 20s ease-in-out infinite alternate; }

@keyframes waveShift {
    0%   { transform: translateX(0)     translateY(0); }
    100% { transform: translateX(-30px) translateY(-4px); }
}

/* ------------------------- Hero-Ripples --------------------------- */

.ripple-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ripple-circle {
    position: absolute;
    border: 1px solid rgba(232,244,248,0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    animation: heroRipple 8s linear infinite;
}
.ripple-circle:nth-child(2) { animation-delay: 2.6s; }
.ripple-circle:nth-child(3) { animation-delay: 5.3s; }

@keyframes heroRipple {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0;    }
    20%  { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0;    }
}

/* ------------------------- Drop / Bubbles ------------------------- */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.float-slow { animation: float 6s ease-in-out infinite; }

@keyframes shimmer {
    0%   { opacity: 0.4; }
    50%  { opacity: 1;   }
    100% { opacity: 0.4; }
}
.shimmer { animation: shimmer 4s ease-in-out infinite; }

/* --------------------- Sanftes Erscheinen ------------------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.rise         { animation: rise 800ms cubic-bezier(.2,.7,.2,1) both; }
.rise-delay-1 { animation-delay: 100ms; }
.rise-delay-2 { animation-delay: 200ms; }
.rise-delay-3 { animation-delay: 300ms; }

/* ---------------------- Header-Glas-Stil -------------------------- */

.header-glass {
    background: rgba(244, 249, 251, 0.78);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(216, 229, 236, 0);
    transition: border-color 260ms ease, background-color 260ms ease;
}
.header-glass.is-scrolled {
    border-bottom-color: #D8E5EC;
    background: rgba(244, 249, 251, 0.92);
}

/* Drawer mobile */
.drawer { transition: opacity 240ms ease, transform 280ms cubic-bezier(.2,.7,.2,1); }
.drawer.is-closed { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* ---------------------- Form: floating-style ---------------------- */

.field {
    position: relative;
    border-bottom: 1px solid rgba(216,229,236,0.9);
    transition: border-color 220ms ease;
    background: transparent;
}
.field:focus-within { border-color: #0E3149; }
.field input, .field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    padding: 1.7rem 0 0.8rem;
    color: #0E3149;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    resize: none;
}
.field label {
    position: absolute;
    left: 0;
    top: 1.1rem;
    color: #7A95A8;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    pointer-events: none;
    transition: top 200ms ease, font-size 200ms ease, color 200ms ease, letter-spacing 200ms ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2C6E8C;
}

/* ---------- Section-Snap: angenehmes Ankern beim Scrollen --------- */
section[id] { scroll-margin-top: 5rem; }

/* ----------------- Reduzierte Bewegung respektieren ---------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
    }
    .hero-photo.parallax { background-attachment: scroll !important; }
}