/* =====================================
   BERIFIX – Renovierung aus einer Hand
   Stylesheet
   ===================================== */

/* --- Custom Properties --- */
:root {
  --color-primary: #1F2937;
  --color-primary-light: #374151;
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-light: #FEF3C7;
  --color-bg: #F8F6F4;
  --color-bg-alt: #F3F4F6;
  --color-bg-card: #FFFFFF;
  --color-text: #374151;
  --color-text-light: #6B7280;
  --color-heading: #111827;
  --color-border: #E5E7EB;
  --color-white: #FFFFFF;
  --color-success: #059669;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1200px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --header-height: 72px;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --transition: 200ms ease;
}

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);font-size:16px;line-height:1.7;color:var(--color-text);background:var(--color-bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color var(--transition);touch-action:manipulation}
a:hover{color:var(--color-accent-hover)}
button,.btn,.form-group input,.form-group textarea,.form-group select,.menu-toggle{touch-action:manipulation}
ul{list-style:none}

/* --- Typography --- */
h1,h2,h3,h4{color:var(--color-heading);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-0.02em}
h2{font-size:clamp(1.5rem,3.5vw,2.5rem);letter-spacing:-0.01em}
h3{font-size:clamp(1.125rem,2vw,1.375rem)}
h4{font-size:1.125rem}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

/* --- Container --- */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 32px}}
@media(min-width:1024px){.container{padding:0 48px}}

/* --- Section --- */
.section{padding:80px 0}
@media(min-width:768px){.section{padding:100px 0}}
.section-label{display:inline-block;font-size:0.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}
.section-title{margin-bottom:16px}
.section-subtitle{font-size:clamp(0.95rem,3vw,1.125rem);color:var(--color-text-light);max-width:640px;margin-bottom:clamp(32px,6vw,48px)}
.section-subtitle.centered{margin-left:auto;margin-right:auto;text-align:center}
.section-title.centered{text-align:center}
.section.centered .section-subtitle{text-align:center;margin-left:auto;margin-right:auto}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-family:var(--font-sans);font-size:1rem;font-weight:600;line-height:1;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.btn-primary{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-white);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary);color:var(--color-white);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--color-white);border-color:var(--color-white)}
.btn-outline:hover{background:var(--color-white);color:var(--color-primary);transform:translateY(-1px)}
.btn-lg{padding:18px 36px;font-size:1.125rem}

/* =====================================
   HEADER / NAVIGATION
   ===================================== */
.header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);z-index:1000;padding-top:var(--safe-area-top);background:rgba(248,246,244,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:all var(--transition)}
.header.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.header-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-primary)}
.header-logo img{height:36px;width:auto}
.header-logo span{font-size:1.25rem;font-weight:800;letter-spacing:2px}
.nav{display:none}
@media(min-width:1024px){
  .nav{display:flex;align-items:center;gap:32px}
  .nav a{font-size:0.9rem;font-weight:500;color:var(--color-text-light);letter-spacing:0.3px;position:relative;padding:4px 0}
  .nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition)}
  .nav a:hover{color:var(--color-primary)}
  .nav a:hover::after{width:100%}
}
.header-cta{display:none}
@media(min-width:768px){.header-cta{display:inline-flex;align-items:center;gap:8px;font-size:0.9rem;font-weight:600;color:var(--color-primary);text-decoration:none}}
@media(min-width:1024px){.header-cta{margin-left:16px}}
.header-cta svg{color:var(--color-accent)}
.menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
@media(min-width:1024px){.menu-toggle{display:none}}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--color-primary);transition:all var(--transition);border-radius:1px}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile Nav */
.mobile-nav{position:fixed;top:var(--header-height);left:0;width:100%;height:calc(100vh - var(--header-height) - var(--safe-area-top));background:var(--color-bg);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transform:translateX(100%);transition:transform 300ms ease;padding:24px}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{font-size:1.25rem;font-weight:600;color:var(--color-primary);padding:12px 16px;min-height:44px;display:flex;align-items:center}
.mobile-nav a:hover{color:var(--color-accent)}
.form-group input,.form-group textarea,.form-group select{min-height:48px}

/* =====================================
   HERO
   ===================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--color-primary);overflow:hidden;padding-top:var(--header-height)}
.hero::before{content:'';position:absolute;inset:0;opacity:0.08;background-image:radial-gradient(circle at 25% 50%, var(--color-accent) 0%, transparent 50%),radial-gradient(circle at 75% 50%, var(--color-white) 0%, transparent 50%);background-size:100% 100%}
.hero-pattern{position:absolute;inset:0;opacity:0.04;background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,var(--color-white) 40px,var(--color-white) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,var(--color-white) 40px,var(--color-white) 41px)}
.hero .container{position:relative;z-index:1;padding-top:40px;padding-bottom:60px}
.hero-content{max-width:720px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(217,119,6,0.15);color:var(--color-accent);padding:8px 16px;border-radius:100px;font-size:0.85rem;font-weight:500;margin-bottom:24px;border:1px solid rgba(217,119,6,0.2)}
.hero h1{color:var(--color-white);margin-bottom:20px}
.hero p{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,0.8);line-height:1.8;margin-bottom:32px;max-width:600px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:48px}
.hero-trust{display:flex;flex-wrap:wrap;gap:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.1)}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:rgba(255,255,255,0.6)}
.hero-trust-item svg{color:var(--color-accent);flex-shrink:0}

@media(max-width:767px){.hero{min-height:calc(100vh - var(--header-height) - var(--safe-area-top))}.hero-content{padding-top:24px}}
@media(min-width:768px){
  .hero{min-height:90vh}
  .hero-content{max-width:800px}
}

/* =====================================
   SERVICES (Leistungen)
   ===================================== */
.services{background:var(--color-white)}
.services-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-card{background:var(--color-bg);border-radius:var(--radius);padding:32px;border:1px solid var(--color-border);transition:all var(--transition)}
.service-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.service-card-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--color-accent-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.service-card-icon svg{width:24px;height:24px;color:var(--color-accent)}
.service-card h3{margin-bottom:8px}
.service-card p{font-size:0.9rem;color:var(--color-text-light)}
.service-card-tag{display:inline-block;font-size:0.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--color-accent);margin-top:12px}

/* =====================================
   PROCESS (So funktioniert's)
   ===================================== */
.process{background:var(--color-bg-alt)}
.process-grid{display:grid;grid-template-columns:1fr;gap:0;position:relative;counter-reset:step}
@media(min-width:768px){.process-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.process-step{text-align:center;padding:32px 16px;position:relative}
@media(min-width:768px){
  .process-step::after{content:'';position:absolute;top:40px;right:-16px;width:32px;height:2px;background:var(--color-border)}
  .process-step:last-child::after{display:none}
}
.process-step-number{width:64px;height:64px;border-radius:50%;background:var(--color-primary);color:var(--color-white);font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.process-step h3{font-size:1rem;margin-bottom:8px}
.process-step p{font-size:0.85rem;color:var(--color-text-light);max-width:240px;margin:0 auto}

/* =====================================
   BENEFITS (Ihre Vorteile)
   ===================================== */
.benefits-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card{background:var(--color-bg-card);border-radius:var(--radius);padding:32px;border:1px solid var(--color-border);transition:all var(--transition)}
.benefit-card:hover{box-shadow:var(--shadow-md)}
.benefit-card-icon{width:40px;height:40px;border-radius:50%;background:var(--color-accent-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.benefit-card-icon svg{width:20px;height:20px;color:var(--color-accent)}
.benefit-card h3{font-size:1rem;margin-bottom:6px}
.benefit-card p{font-size:0.85rem;color:var(--color-text-light)}

/* =====================================
   NETWORK (Eigene Leistungen & Partner)
   ===================================== */
.network{background:var(--color-primary);color:var(--color-white)}
.network .section-title{color:var(--color-white)}
.network .section-subtitle{color:rgba(255,255,255,0.7)}
.network-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.network-grid{grid-template-columns:repeat(2,1fr)}}
.network-column{background:rgba(255,255,255,0.05);border-radius:var(--radius);padding:32px;border:1px solid rgba(255,255,255,0.1)}
.network-column-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.network-column-header svg{color:var(--color-accent);flex-shrink:0}
.network-column h3{color:var(--color-white);font-size:1.125rem}
.network-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.95rem;color:rgba(255,255,255,0.8)}
.network-item:last-child{border-bottom:none}
.network-item svg{margin-top:3px;color:var(--color-accent);flex-shrink:0}
.network-badge{display:inline-block;background:var(--color-accent);color:var(--color-white);font-size:0.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-top:16px}

/* =====================================
   ABOUT (Über Berifix)
   ===================================== */
.about-content{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:768px){.about-content{grid-template-columns:minmax(0,380px) 1fr}}
.about-text .about-highlight{font-size:1.1rem;font-weight:600;color:var(--color-primary);margin-bottom:16px}
.about-values{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.about-value{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--color-text-light)}
.about-value svg{color:var(--color-accent);flex-shrink:0}
.about-image{background:var(--color-bg);border-radius:var(--radius);border:1px solid var(--color-border);line-height:0}
.about-image img{display:block;width:100%;height:auto}
.about-image-placeholder{text-align:center;color:var(--color-text-light)}
.about-image-placeholder svg{margin-bottom:8px;color:var(--color-text-light)}
.about-image-placeholder span{display:block;font-size:0.85rem}

/* =====================================
   REFERENCES (Referenzen)
   ===================================== */
.references{background:var(--color-bg-alt)}
.ref-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.ref-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ref-grid{grid-template-columns:repeat(3,1fr)}}
.ref-card{background:var(--color-white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);transition:all var(--transition)}
.ref-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ref-card-image{aspect-ratio:16/9;background:var(--color-bg-alt);display:flex;align-items:center;justify-content:center;color:var(--color-text-light);font-size:0.85rem}
.ref-card-body{padding:24px}
.ref-card-body h3{font-size:1rem;margin-bottom:6px}
.ref-card-body p{font-size:0.85rem;color:var(--color-text-light);margin-bottom:0}
.ref-card-tag{display:inline-block;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--color-accent);margin-bottom:8px}

/* =====================================
   CONTACT (Kontakt)
   ===================================== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1fr}}

/* Contact Form */
.contact-form{background:var(--color-white);padding:40px;border-radius:var(--radius);border:1px solid var(--color-border)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.85rem;font-weight:500;color:var(--color-primary);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;font-family:var(--font-sans);font-size:1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition);-webkit-appearance:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(217,119,6,0.1)}
.form-group textarea{resize:vertical;min-height:120px}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:0.8rem;color:var(--color-text-light);line-height:1.5}
.form-checkbox input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--color-accent);flex-shrink:0;cursor:pointer}
.form-error{color:#DC2626;font-size:0.8rem;margin-top:4px;display:none}
.form-success{display:none;text-align:center;padding:40px}
.form-success svg{margin-bottom:16px}
.form-success h3{color:var(--color-success);margin-bottom:8px}
.form-success p{color:var(--color-text-light)}

/* Contact Info */
.contact-info h3{font-size:1.25rem;margin-bottom:16px}
.contact-info-item{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--color-border)}
.contact-info-item:last-child{border-bottom:none}
.contact-info-item svg{color:var(--color-accent);margin-top:2px;flex-shrink:0}
.contact-info-item a{font-weight:500}
.contact-info-item .label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-light);margin-bottom:2px}
.contact-info-item .value{font-size:1rem;color:var(--color-primary);font-weight:500}
.contact-note{background:var(--color-accent-light);border-radius:var(--radius);padding:24px;margin-top:24px;border:1px solid rgba(217,119,6,0.2)}
.contact-note p{font-size:0.9rem;color:var(--color-primary);margin-bottom:0}

/* =====================================
   CTA BANNER
   ===================================== */
.cta-banner{background:var(--color-primary);padding:64px 0;text-align:center}
.cta-banner h2{color:var(--color-white);margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,0.8);margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto}

/* =====================================
   FOOTER
   ===================================== */
.footer{background:var(--color-primary);color:rgba(255,255,255,0.7);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:24px}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand .footer-logo{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.footer-brand .footer-logo img{height:32px;width:auto;filter:brightness(0) invert(1)}
.footer-brand p{font-size:0.85rem;max-width:320px}
.footer h4{color:var(--color-white);font-size:0.9rem;margin-bottom:16px;letter-spacing:1px;text-transform:uppercase}
.footer a{color:rgba(255,255,255,0.7);font-size:0.85rem;display:block;padding:4px 0}
.footer a:hover{color:var(--color-accent)}
.footer-bottom{text-align:center;font-size:0.8rem}
.footer-bottom a{display:inline;padding:0 4px}

/* Legal */
.legal-section{padding-top:24px;margin-top:24px;border-top:1px solid rgba(255,255,255,0.08)}
.legal-section h4{color:var(--color-accent);font-size:0.85rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.legal-section p,.legal-section li{font-size:0.8rem;color:rgba(255,255,255,0.6);line-height:1.6}
.legal-section ul{padding-left:16px;list-style:disc}
.legal-section li{margin-bottom:4px}

/* =====================================
   MOBILE STICKY CTA
   ===================================== */
.mobile-sticky{display:none}
@media(max-width:767px){
  .mobile-sticky{display:flex;position:fixed;bottom:0;left:0;width:100%;z-index:999;background:var(--color-white);border-top:1px solid var(--color-border);padding:12px 16px;padding-bottom:calc(12px + var(--safe-area-bottom));gap:8px;box-shadow:0 -2px 10px rgba(0,0,0,0.1)}
  .mobile-sticky a{flex:1;text-align:center;padding:12px;font-size:0.9rem;font-weight:600;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:6px}
  .mobile-sticky .ms-call{background:var(--color-primary);color:var(--color-white);text-decoration:none}
  .mobile-sticky .ms-form{background:var(--color-accent);color:var(--color-white);text-decoration:none}
  body{padding-bottom:calc(72px + var(--safe-area-bottom))}
}

/* =====================================
   ANIMATIONS
   ===================================== */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 600ms ease,transform 600ms ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in-delay-1{transition-delay:100ms}
.fade-in-delay-2{transition-delay:200ms}
.fade-in-delay-3{transition-delay:300ms}
.fade-in-delay-4{transition-delay:400ms}

@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}.fade-in{opacity:1;transform:none}}

/* =====================================
   UTILITIES
   ===================================== */
.text-center{text-align:center}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}


@media(prefers-color-scheme:dark){:root{--color-bg:#1a1a1a;--color-bg-alt:#242424;--color-bg-card:#2a2a2a;--color-text:#e0e0e0;--color-text-light:#a0a0a0;--color-heading:#ffffff;--color-border:#333;--color-primary:#e0e0e0;--color-primary-light:#cccccc}.header{background:rgba(26,26,26,0.95)}.process-step-number{background:var(--color-accent);color:var(--color-primary)}.network-badge{color:var(--color-primary)}}