@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

/* Liebesfunken.eu — mobile first */
:root {
    --bg: #111526; --bg-soft: #171d31; --card: #1b2036;
    --text: #f7f8ff; --muted: #b8bdd0; --accent: #ff527d;
    --accent-light: #ff9eb7; --border: rgba(255,255,255,.12);
    --font: 'Inter', Arial, sans-serif;
    --display: 'Playfair Display', Georgia, serif;
    --white: #f7f8ff; --gray-200: #b8bdd0; --transition: .2s ease;
    --gradient-pink: linear-gradient(110deg,#ff9eb7,#ff527d);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 100% 0%,rgba(143,76,190,.13),transparent 40rem),var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffd166; outline-offset: 4px; }
img { display: block; max-width: 100%; }
.site-header, .hero, .footer { width: calc(100% - 32px); max-width: 1160px; margin-inline: auto; }
.site-header { padding-block: 18px; border-bottom: 1px solid var(--border); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.7px; }
.logo-heart { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,82,125,.4); border-radius: 11px; color: var(--accent); font: 30px/1 Arial,sans-serif; }
.logo-dot { color: var(--accent); }
.hero { padding-block: 30px 24px; display: grid; gap: 27px; }
.hero-content { min-width: 0; }
.header-online { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-bottom: 20px; padding: 8px 12px; border: 1px solid rgba(80,211,171,.24); border-radius: 9px; background: rgba(80,211,171,.08); color: #b4f2da; font-size: 14px; white-space: nowrap; }
.online-pulse { width: 7px; height: 7px; border-radius: 50%; background: #50d3ab; box-shadow: 0 0 8px rgba(80,211,171,.35); animation: pulse 2s ease infinite; }
.header-online-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.header-online-count.bump-up { animation: countBumpUp .35s ease; }
.header-online-count.bump-down { animation: countBumpDown .35s ease; }
h1 { margin: 0 0 20px; font: 700 clamp(2rem,9vw,2.85rem)/1.12 var(--display); letter-spacing: -.035em; }
h1 span { display: block; color: var(--accent); }
.hero-text { margin: 0 0 24px; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.cta-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: var(--accent); color: #111526; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; box-shadow: 0 8px 26px rgba(255,82,125,.16); transition: background .2s ease,transform .2s ease; }
.cta-button:active { transform: scale(.985); }
.trust-strip { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 17px; color: var(--muted); font-size: 14px; }
.trust-strip span::first-letter { color: #b4f2da; }
.profiles-showcase { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg,#20273e,#181e32); box-shadow: 0 15px 45px rgba(0,0,0,.15); }
.profiles-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 8px; margin-bottom: 19px; }
.profiles-header > div:first-child { flex: 1 1 180px; min-width: 0; }
.profiles-label { display: block; margin-bottom: 8px; color: var(--accent-light); font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.profiles-header h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.5px; }
.profiles-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.profiles-line { display: block; width: 38px; height: 3px; margin-top: 13px; border-radius: 3px; background: var(--accent); }
.profiles-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.profiles-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: #171d31; color: var(--text); font-size: 25px; line-height: 1; }
.profiles-nav button:disabled { opacity: .35; cursor: default; }
.profiles-slider { min-width: 0; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; }
.profiles-slider::-webkit-scrollbar { display: none; }
.hero-photos { display: flex; width: 100%; gap: 10px; }
.photo-card { flex: 0 0 calc((100% - 10px)/2); min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #14192d; color: var(--text); text-align: left; scroll-snap-align: start; transition: border-color .2s ease; }
.photo-frame { position: relative; display: block; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #222b43; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.82); transform: scale(1.075); transition: transform .25s ease; }
.photo-heart { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(17,21,38,.7); color: #fff; font: 24px/1 Arial,sans-serif; }
.photo-overlay { display: flex; flex-direction: column; gap: 3px; min-height: 94px; padding: 11px 10px; }
.photo-overlay strong { font-size: 15px; line-height: 1.3; }
.photo-overlay small { color: var(--muted); font-size: 13px; }
.photo-overlay::after { content: 'Profil ansehen  →'; margin-top: 5px; color: var(--accent-light); font-size: 12px; font-weight: 600; }
.profiles-progress { height: 3px; margin-top: 17px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.profiles-progress span { display: block; width: 24%; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.ai-note { margin: -12px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.footer { padding-block: 23px calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.footer p { margin: 0 0 10px; font-size: 13px; }
.affiliate-disclosure { max-width: 850px; line-height: 1.7; }
.affiliate-disclosure strong { color: #d4d8e8; }
.sticky-cta { position: fixed; z-index: 500; inset: auto 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(17,21,38,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sticky-button { max-width: 480px; margin-inline: auto; min-height: 52px; }
.age-modal { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: max(76px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); overflow-y: auto; background: rgba(8,11,22,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease,visibility .22s ease; }
.age-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.age-modal-close { position: fixed; top: max(16px,env(safe-area-inset-top)); right: 16px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: #1b2036; color: var(--text); font-size: 26px; }
.age-modal-content { width: min(100%,520px); padding: 30px 20px 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: 0 24px 100px rgba(0,0,0,.45); text-align: center; transform: translateY(12px); transition: transform .22s ease; }
.age-modal.active .age-modal-content { transform: translateY(0); }
.age-modal-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border: 1px solid rgba(255,158,183,.28); border-radius: 50%; background: rgba(255,82,125,.1); color: var(--accent); font: 32px/1 Arial,sans-serif; }
.age-step-label { display: block; margin-bottom: 10px; color: #b4f2da; font-size: 14px; }
.age-modal h2 { margin: 0; font: 700 clamp(30px,8vw,44px)/1.15 var(--display); color: var(--text); }
.age-modal-content > p { max-width: 410px; margin: 14px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.age-modal-options { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
.age-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #14192d; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.4; text-align: left; transition: border-color .2s ease,background .2s ease; }
.age-option span:last-child { color: var(--accent-light); }
.age-option:disabled { cursor: wait; opacity: .55; }
body.age-modal-open { overflow: hidden; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes countBumpUp { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-2px); } }
@keyframes countBumpDown { 0%,100% { transform: translateY(0); } 40% { transform: translateY(2px); } }
/* Większy telefon / tablet */
@media (min-width:540px) {
    .site-header, .hero, .footer { width: calc(100% - 48px); }
    .site-header { padding-block: 24px; }
    .hero { padding-top: 40px; gap: 32px; }
    h1 { max-width: 680px; font-size: clamp(44px,6.5vw,58px); }
    .hero-content > .cta-button { width: fit-content; min-width: 280px; }
    .hero-text { font-size: 17px; }
    .profiles-showcase { padding: 24px; border-radius: 22px; }
    .profiles-header > div:first-child { flex-basis: 240px; }
    .profiles-header h2 { font-size: 25px; }
    .profiles-label { letter-spacing: .14em; }
    .hero-photos { gap: 14px; }
    .photo-card { flex-basis: calc((100% - 28px)/3); }
    .photo-overlay { padding: 13px; }
    .photo-overlay strong { font-size: 17px; }
    .age-modal-content { padding: 38px 30px 30px; }
    .age-modal-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Desktop */
@media (min-width:1000px) {
    .hero { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: 28px 50px; padding-block: 64px 32px; }
    h1 { font-size: clamp(48px,4.2vw,60px); }
    .hero-text { max-width: 430px; }
    .photo-card { flex-basis: calc((100% - 14px)/2); }
    .ai-note { grid-column: 1/-1; margin: 0; }
    .sticky-cta { display: none; }
    .footer { padding-bottom: 36px; }
}
@media (hover:hover) {
    .cta-button:hover { background: #ff7194; }
    .profiles-nav button:hover { background: #2a304b; border-color: var(--accent-light); }
    .photo-card:hover { border-color: rgba(255,158,183,.6); }
    .photo-card:hover img { transform: scale(1.1); }
    .age-option:hover { background: #242139; border-color: var(--accent); }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}