/* ═══════════════════ ROSENGRAT — styles.css ═══════════════════ */
:root {
    --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4;
    --stone-300: #d6d3d1; --stone-400: #a8a29e; --stone-600: #57534e;
    --stone-700: #44403c; --stone-800: #292524; --stone-900: #1c1917;
    --rose-400: #e87461; --rose-500: #d4553e; --rose-600: #b8412e;
    --amber-300: #f5c882; --amber-400: #e8a948;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Outfit', 'Segoe UI', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); color:var(--stone-800); background:var(--stone-50); line-height:1.7; overflow-x:hidden; }

/* NAV — always dark */
nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:0.9rem 2rem;
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(28,25,23,0.95); backdrop-filter:blur(12px);
    box-shadow:0 1px 12px rgba(0,0,0,0.15);
    transition:padding 0.3s;
}
nav.scrolled { padding:0.7rem 2rem; }
.nav-logo { font-family:var(--font-display); font-size:1.4rem; color:#fff; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:0.5rem; }
.nav-logo span { color:var(--rose-400); font-weight:700; }
.nav-logo-img { width:28px; height:28px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.nav-links { display:flex; gap:1.6rem; list-style:none; }
.nav-links a { color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.88rem; font-weight:400; letter-spacing:0.03em; transition:color 0.3s; }
.nav-links a:hover { color:var(--amber-300); }
.nav-burger { display:none; background:none; border:none; cursor:pointer; width:28px; height:20px; position:relative; }
.nav-burger span { display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; transition:all 0.3s; }
.nav-burger span:nth-child(1){top:0} .nav-burger span:nth-child(2){top:9px} .nav-burger span:nth-child(3){top:18px}

/* COMMON */
section { padding:5rem 2rem; }
.container { max-width:1080px; margin:0 auto; }
.section-label { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--rose-500); font-weight:600; margin-bottom:0.8rem; }
.section-title { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--stone-900); line-height:1.2; margin-bottom:1rem; font-weight:500; }
.section-desc { font-size:1.05rem; color:var(--stone-600); max-width:640px; line-height:1.7; font-weight:300; }

/* HERO */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; background-size:cover; background-position:center 40%; filter:brightness(0.4) saturate(1.2); }
.hero-gradient { position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,25,23,0.2) 0%, rgba(140,50,30,0.15) 50%, rgba(28,25,23,0.85) 88%, var(--stone-900) 100%); }
.hero-content { position:relative; z-index:2; max-width:800px; padding:2rem; animation:fadeUp 1.2s ease-out; }
.hero-logo { width:clamp(80px,15vw,130px); height:auto; margin-bottom:1.5rem; filter:brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.4)); }
.hero-brand { font-family:var(--font-display); font-size:clamp(3.5rem,8vw,6rem); color:#fff; font-weight:700; letter-spacing:0.02em; margin-bottom:0.5rem; line-height:1; }
.hero-brand span { color:var(--rose-400); }
.hero-tagline { font-family:var(--font-display); font-size:clamp(1.1rem,2.5vw,1.6rem); color:var(--amber-300); font-weight:400; font-style:italic; margin-bottom:1.5rem; }
.hero-sub { font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(255,255,255,0.7); max-width:520px; margin:0 auto 2.5rem; font-weight:300; line-height:1.6; }
.btn-primary { display:inline-flex; align-items:center; gap:0.6rem; padding:0.9rem 2rem; background:var(--rose-500); color:#fff; text-decoration:none; font-size:0.95rem; font-weight:600; border-radius:8px; transition:all 0.3s; box-shadow:0 4px 20px rgba(212,85,62,0.4); border:none; cursor:pointer; }
.btn-primary:hover { background:var(--rose-600); transform:translateY(-2px); box-shadow:0 6px 28px rgba(212,85,62,0.5); }
.btn-primary svg { width:18px; height:18px; }
.btn-secondary { display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 1.6rem; border:1px solid rgba(255,255,255,0.3); color:#fff; text-decoration:none; font-size:0.9rem; font-weight:500; border-radius:8px; transition:all 0.3s; }
.btn-secondary:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5); }

/* ALERT */
.alert-section { background:var(--stone-900); color:#fff; }
.alert-section .section-label { color:var(--rose-400); }
.alert-section .section-title { color:#fff; }
.alert-box { background:rgba(212,85,62,0.08); border:1px solid rgba(212,85,62,0.25); border-radius:12px; padding:1.8rem; margin-top:1.5rem; max-width:780px; }
.alert-box p { color:var(--stone-300); font-size:0.97rem; line-height:1.7; }
.alert-box strong { color:var(--rose-400); }
.alert-box .source { font-size:0.82rem; color:var(--stone-400); margin-top:0.8rem; font-style:italic; }

/* CARDS */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; margin-top:2rem; }
.card { background:#fff; border-radius:12px; padding:1.8rem; border:1px solid var(--stone-200); transition:transform 0.3s,box-shadow 0.3s; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.card-icon { width:44px; height:44px; background:linear-gradient(135deg,var(--rose-500),var(--amber-400)); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.card-icon svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { font-family:var(--font-display); font-size:1.15rem; margin-bottom:0.4rem; color:var(--stone-900); font-weight:500; }
.card p { color:var(--stone-600); font-size:0.92rem; }

/* LEISTUNGEN */
.leistungen-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.leistung { display:flex; gap:0.8rem; align-items:flex-start; padding:1rem; border-radius:8px; border:1px solid transparent; transition:all 0.3s; }
.leistung:hover { background:var(--stone-100); border-color:var(--stone-200); }
.leistung-dot { width:8px; height:8px; background:var(--rose-500); border-radius:50%; margin-top:0.5rem; flex-shrink:0; }
.leistung h4 { font-size:0.98rem; margin-bottom:0.15rem; color:var(--stone-800); font-weight:600; }
.leistung p { font-size:0.88rem; color:var(--stone-600); font-weight:300; }

/* PAKETE */
.pakete { background:var(--stone-900); color:#fff; }
.pakete .section-label { color:var(--amber-300); }
.pakete .section-title { color:#fff; }
.pakete .section-desc { color:var(--stone-400); }
.paket-addon { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.paket-addon p { color:var(--stone-300); font-size:0.9rem; }
.paket-addon .price { color:var(--amber-300); font-weight:600; white-space:nowrap; font-size:0.9rem; }

/* NUMBERS */
.numbers { background:var(--stone-100); }
.numbers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem; margin-top:2rem; text-align:center; }
.numbers-item h3 { font-family:var(--font-display); font-size:2.2rem; color:var(--rose-500); margin-bottom:0.2rem; font-weight:500; }
.numbers-item p { color:var(--stone-600); font-size:0.88rem; }

/* KONTAKT PAGE */
.kontakt-section { background:linear-gradient(135deg,var(--stone-800),var(--stone-900)); color:#fff; text-align:center; }
.kontakt-section .section-label { color:var(--amber-300); }
.kontakt-section .section-title { color:#fff; }
.kontakt-section .section-desc { color:var(--stone-400); margin:0 auto 2rem; }
.kontakt-mail { font-family:var(--font-display); font-size:clamp(1.3rem,2.5vw,1.8rem); color:var(--amber-300); text-decoration:none; border-bottom:2px solid transparent; transition:border-color 0.3s; font-weight:400; }
.kontakt-mail:hover { border-color:var(--amber-300); }
.kontakt-avatar { width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:center top; border:3px solid rgba(255,255,255,0.1); margin-bottom:1.5rem; }

/* ÜBER UNS */
.about-split { display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:start; margin-top:2rem; }
.about-img { width:200px; border-radius:16px; border:3px solid var(--stone-200); }

/* FOOTER */
footer { background:var(--stone-900); border-top:1px solid rgba(255,255,255,0.06); padding:1.5rem 2rem; text-align:center; }
footer p { color:var(--stone-600); font-size:0.82rem; margin-bottom:0.3rem; }
footer a { color:var(--stone-400); text-decoration:none; margin:0 0.4rem; }
footer a:hover { color:var(--amber-300); }

/* SUBPAGES */
.page-hero { padding:7rem 2rem 3rem; text-align:center; background:var(--stone-900); color:#fff; }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem); color:#fff; font-weight:500; }
.page-hero p { color:var(--stone-400); margin-top:0.6rem; font-size:1rem; font-weight:300; }

.prose { max-width:760px; margin:0 auto; }
.prose h2 { font-family:var(--font-display); font-size:1.6rem; margin:2.5rem 0 0.8rem; color:var(--stone-900); font-weight:500; }
.prose h3 { font-family:var(--font-display); font-size:1.2rem; margin:1.8rem 0 0.6rem; color:var(--stone-800); font-weight:500; }
.prose p { margin-bottom:0.9rem; color:var(--stone-700); line-height:1.8; }
.prose ul, .prose ol { margin:0.8rem 0; padding-left:1.5rem; color:var(--stone-700); }
.prose li { margin-bottom:0.4rem; line-height:1.6; }
.prose blockquote { border-left:3px solid var(--rose-500); padding:1rem 1.5rem; margin:1.5rem 0; background:var(--stone-100); border-radius:0 8px 8px 0; font-style:italic; color:var(--stone-600); }
.prose img.inline-img { width:100%; border-radius:12px; margin:1.5rem 0; }
.prose .legend { background:linear-gradient(135deg,rgba(212,85,62,0.05),rgba(232,169,72,0.05)); border:1px solid rgba(212,85,62,0.15); border-radius:12px; padding:1.8rem; margin:2rem 0; }
.prose .legend h3 { color:var(--rose-600); margin-top:0; }
.prose .callout { background:var(--stone-100); border:1px solid var(--stone-200); border-radius:10px; padding:1.2rem 1.5rem; margin:1.5rem 0; }
.prose .callout strong { color:var(--rose-500); }
.legal { font-size:0.93rem; }
.legal h2 { font-size:1.3rem; } .legal h3 { font-size:1.1rem; }

/* NERD TOGGLE */
.nerd-toggle { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; background:var(--stone-800); color:var(--amber-300); border:1px solid var(--stone-700); border-radius:8px; cursor:pointer; font-size:0.88rem; font-weight:600; font-family:var(--font-body); margin:1.5rem 0 0.5rem; transition:all 0.3s; }
.nerd-toggle:hover { background:var(--stone-700); }
.nerd-content { display:none; background:var(--stone-900); color:var(--stone-300); border-radius:10px; padding:1.5rem; margin:0.5rem 0 1.5rem; font-size:0.9rem; line-height:1.7; }
.nerd-content.open { display:block; }
.nerd-content code { background:rgba(255,255,255,0.08); padding:0.15rem 0.4rem; border-radius:4px; font-size:0.85rem; color:var(--amber-300); }
.nerd-content ul { padding-left:1.2rem; margin:0.5rem 0; }
.nerd-content li { margin-bottom:0.3rem; }

/* KONTAKT FORM */
.kontakt-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2rem; text-align:left; }
.kontakt-info h3 { font-family:var(--font-display); color:#fff; font-size:1.2rem; margin-bottom:0.8rem; font-weight:500; }
.kontakt-info p { color:var(--stone-400); font-size:0.92rem; margin-bottom:0.3rem; }
.kontakt-info a { color:var(--amber-300); text-decoration:none; }
.kontakt-info a:hover { text-decoration:underline; }
.kontakt-form { display:flex; flex-direction:column; gap:0.8rem; }
.kontakt-form input, .kontakt-form textarea {
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; padding:0.8rem 1rem; color:#fff; font-family:var(--font-body);
    font-size:0.92rem; outline:none; transition:border-color 0.3s;
}
.kontakt-form input:focus, .kontakt-form textarea:focus { border-color:var(--rose-400); }
.kontakt-form input::placeholder, .kontakt-form textarea::placeholder { color:var(--stone-400); }
.kontakt-form textarea { min-height:120px; resize:vertical; }
.kontakt-form button { align-self:flex-start; }

/* APP CARDS (apps page) */
.app-detail { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; padding:2rem; background:#fff; border:1px solid var(--stone-200); border-radius:12px; margin-bottom:1.2rem; }
.app-detail:hover { box-shadow:0 8px 30px rgba(0,0,0,0.05); }
.app-icon-large { width:56px; height:56px; background:linear-gradient(135deg,var(--rose-500),var(--amber-400)); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.app-icon-large svg { width:28px; height:28px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.app-detail h3 { font-family:var(--font-display); font-size:1.15rem; color:var(--stone-900); font-weight:500; margin-bottom:0.3rem; }
.app-detail .app-replaces { font-size:0.82rem; color:var(--rose-500); font-weight:500; margin-bottom:0.5rem; }
.app-detail p { color:var(--stone-600); font-size:0.92rem; }
.app-detail ul { margin:0.5rem 0 0; padding-left:1.2rem; color:var(--stone-600); font-size:0.9rem; }
.app-detail li { margin-bottom:0.2rem; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease-out,transform 0.6s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:768px) {
    .nav-links{display:none} .nav-burger{display:block}
    .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(28,25,23,0.98);padding:1.2rem 2rem;gap:0.8rem;}
    .leistungen-grid{grid-template-columns:1fr}
    section{padding:3.5rem 1.5rem}
    .about-split{grid-template-columns:1fr;text-align:center;}
    .about-img{margin:0 auto;}
    .paket-addon{flex-direction:column;align-items:flex-start;gap:0.5rem;}
    .kontakt-grid{grid-template-columns:1fr;}
    .app-detail{grid-template-columns:1fr;text-align:center;}
    .app-icon-large{margin:0 auto;}
}