/* ============================================================
   KLIEBIWEB.COM – gemeinsames Stylesheet
   Schrift wird lokal geladen (kein Google-Fonts-Request).
   Schriftdateien einmalig erzeugen:  bash fonts/download-fonts.sh
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/inter-100.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/inter-200.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 300;
    color: #1f2937;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

.thin-display { font-weight: 100; letter-spacing: -0.02em; }

/* HEADER & LOGO */
header { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); padding-top: 15px; }
.logo-img { height: 160px; width: auto; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
header.scrolled { padding-top: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
header.scrolled .logo-img { height: 70px; }
header.scrolled .nav-container { height: 90px; }

/* Logo auf Mobilgeräten kleiner */
@media (max-width: 767px) {
    .logo-img { height: 64px; }
    header.scrolled .logo-img { height: 52px; }
}

/* TEXT-ROTATION */
.text-slide-up { display: inline-block; opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.text-slide-up.active { opacity: 1; transform: translateY(0); }
.text-slide-up.exit { opacity: 0; transform: translateY(-20px); }

/* TYPOGRAFIE */
.nav-link { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #4b5563; font-weight: 400; transition: 0.3s; }
.nav-link:hover { color: #C5112E; }
.lorem-text { color: #374151; font-size: 1rem; line-height: 1.7; font-weight: 300; }
.section-heading { font-size: 14px; text-transform: uppercase; letter-spacing: 0.35em; color: #C5112E; font-weight: 600; }
.meta-label { font-size: 12px; text-transform: uppercase; color: #6b7280; font-weight: 500; }

/* Lesbarer Fließtext für Rechtsseiten */
.legal { color: #374151; font-weight: 300; line-height: 1.75; }
.legal h1 { font-weight: 100; letter-spacing: -0.02em; }
.legal h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.3em; color: #111827; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; }
.legal a { color: #C5112E; }
.legal a:hover { text-decoration: underline; }

/* 3D-EFFEKT PORTFOLIO */
.project-container { perspective: 1200px; }
.project-visual { transform: rotateX(8deg) rotateY(-8deg); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 15px 15px 40px rgba(0,0,0,0.08); }
.project-card:hover .project-visual { transform: rotateX(0deg) rotateY(0deg) scale(1.02); box-shadow: 0 25px 50px rgba(197, 17, 46, 0.15); }

/* Scroll-Reveal (ersetzt AOS, kein externes Script) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .text-slide-up { transition: none; }
}

/* Mobile-Menü */
.mobile-menu { transition: opacity 0.3s ease, visibility 0.3s ease; }

/* Anker-Sprünge: Versatz, damit der fixe Header die Überschrift nicht verdeckt */
section[id] { scroll-margin-top: 96px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 120px; } }

/* Kontaktformular */
.contact-form { width: 100%; }
.form-row { margin-bottom: 1.25rem; text-align: left; }
.contact-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: #6b7280; font-weight: 500; margin-bottom: 0.4rem; }
.contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid #d1d5db; background: transparent; padding: 0.5rem 0; font: inherit; color: #1f2937; transition: border-color 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #C5112E; }
.contact-form textarea { resize: vertical; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; gap: 0.6rem; align-items: flex-start; text-transform: none; letter-spacing: normal; font-size: 0.85rem; line-height: 1.5; color: #374151; font-weight: 300; margin: 0.5rem 0 1.5rem; }
.form-consent input { width: auto; margin-top: 0.25rem; }
.form-consent a { color: #C5112E; text-decoration: underline; }
.form-btn { background: #C5112E; color: #fff; border: 0; padding: 0.9rem 2rem; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s; }
.form-btn:hover { opacity: 0.88; }
.form-btn:disabled { opacity: 0.5; cursor: default; }
.form-status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; }
.form-status.ok { color: #15803d; }
.form-status.err { color: #C5112E; }