/* MW Bau Consulting — Monochrom, radikal reduziert */
:root{
  --bg:#000; /* dark mode default */
  --fg:#fff;
  --line:#333; 
  --muted:#888;
}

/* Night Mode — sehr ähnlich zu Dark mit etwas gedämpfteren Kontrasten */
body[data-theme="night"]{
  --bg:#0a0a0a;
  --fg:#e8e8e8;
  --line:#2a2a2a;
  --muted:#777;
}

body[data-theme="light"]{
  --bg:#fafafa;
  --fg:#1a1a1a;
  --line:#e5e5e5;
  --muted:#666;
}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); margin:0; transition:background .35s ease, color .35s ease; 
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
line-height:1.6; font-size:16px; padding:0}

/* Layout */
.container{max-width:60rem; margin:0 auto; padding:0 0.5rem}
.theme-toggle-container{position:fixed; top:15px; right:15px; z-index:1000}

/* Theme Toggle — 3-state with SVG icons */
.theme-toggle{border:1px solid rgba(255,255,255,.25); border-radius:20px; background:transparent; padding:4px; position:relative; width:60px; height:32px; cursor:pointer; transition:border-color .3s ease}
.theme-toggle:focus{outline:2px solid var(--fg); outline-offset:2px}
.theme-toggle:hover{border-color:rgba(255,255,255,.4)}
body[data-theme="light"] .theme-toggle{border-color:rgba(0,0,0,.15)}
body[data-theme="light"] .theme-toggle:hover{border-color:rgba(0,0,0,.25)}

/* Sliding dot indicator */
.theme-toggle .theme-icon{width:14px; height:14px; background:var(--fg); border-radius:50%; transition:transform .35s ease; position:absolute; top:8px; left:6px; opacity:.9}

/* Icon positions */
body[data-theme="dark"] .theme-toggle .theme-icon{transform: translateX(0)}
body[data-theme="night"] .theme-toggle .theme-icon{transform: translateX(16px)}
body[data-theme="light"] .theme-toggle .theme-icon{transform: translateX(32px)}

/* Background SVG icons */
.theme-toggle .theme-labels{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); padding:0 8px; pointer-events:none}
.theme-toggle .theme-labels span{opacity:.35; transition:opacity .3s ease; display:flex; align-items:center}
.theme-toggle .theme-labels svg{width:10px; height:10px}
body[data-theme="dark"] .theme-toggle .label-dark{opacity:.85}
body[data-theme="night"] .theme-toggle .label-night{opacity:.85}
body[data-theme="light"] .theme-toggle .label-light{opacity:.85}

/* Hero */
.hero{padding:1rem 0 0.8rem; text-align:center; background:rgba(255,255,255,0.02); border-radius:8px; margin:0.5rem 0; animation: fadeInUp 0.8s ease-out; transition: transform 0.3s ease, box-shadow 0.3s ease}
.hero:hover{transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)}
body[data-theme="light"] .hero{background:rgba(0,0,0,0.03)}
.logo-section{margin-bottom:0.5rem; background:var(--bg); padding:0.5rem; border-radius:6px; border:1px solid var(--line); position:relative; overflow:hidden;}
.logo-section::before {
  content: 'MW';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 5s infinite;
  z-index: -1;
  opacity: 0.5;
}
.main-logo{max-width:120px; height:auto; display:block; margin:0 auto; filter: brightness(0) invert(1)}

body[data-theme="light"] .main-logo{filter: brightness(1) invert(0)}
.bau-consulting{font-size:1rem; font-weight:300; letter-spacing:0.2em; margin-top:0.5rem; color:var(--fg)}
.hero h1{font-size:2.5rem; font-weight:700; letter-spacing:-.02em; line-height:.95; margin:0 0 2rem}
.hero .lead{font-size:0.9rem; color:var(--muted); max-width:32rem; margin:0 auto; padding: 0.8rem; animation: fadeIn 1s ease-out 0.6s both; transition: all 0.3s ease}
.hero .lead:hover{transform: scale(1.02)}
body[data-theme="light"] .hero .lead{}


/* About */
.about{padding:1rem; background:rgba(255,255,255,0.02); border-radius:8px; margin:0.5rem 0; animation: fadeInUp 0.8s ease-out 0.2s both; transition: transform 0.3s ease, box-shadow 0.3s ease}
.about:hover{transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)}
body[data-theme="light"] .about{background:rgba(0,0,0,0.03)}
.about-grid{display:grid; grid-template-columns: 1fr 180px; gap:1rem; align-items:center}
.about h2{font-size:1.4rem; font-weight:600; margin:0 0 0.5rem; letter-spacing:-.01em}
.about small{color:var(--muted); font-size:0.95rem; line-height:1.5; margin:0 0 0.5rem; display:block}
.about small:last-child{margin-bottom:0}
.about-image{display:flex; justify-content:center; margin:0;}
.about-image .profile{overflow:hidden}
.about-image .profile {width:180px;}
.about-image .profile img{width:100%; height:auto; display:block;}


/* Section Dividers */
.section-divider{border:none; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:1rem 0; opacity:.6}

/* Footer */
.footer{border-top:1px solid var(--line); padding:0.8rem; margin:0.5rem 0; color:var(--muted); text-align:center; background:rgba(255,255,255,0.02); border-radius:8px; animation: fadeInUp 0.8s ease-out 0.4s both; transition: transform 0.3s ease, box-shadow 0.3s ease}
.footer:hover{transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)}
body[data-theme="light"] .footer{background:rgba(0,0,0,0.03)}
.footer-content{display:flex; flex-direction:column; gap:0.5rem; align-items:center}
.footer-main{line-height:1.6; font-size:.9rem}
.footer-legal{margin-top:.5rem}
.footer small{color:var(--muted); font-size:.8rem}
.footer-address p{margin:.15rem 0}
.text-link{display:inline-block; margin-top:.4rem; color:inherit; text-decoration:none; position:relative}
.text-link:after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(.2); opacity:.5; transition:transform .35s ease, opacity .35s ease}
.text-link:hover:after{transform:scaleX(1); opacity:.9}

/* Mikro-Animationen */
.reveal{opacity:0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform: translateY(0)}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

@media (max-width: 860px){
  .about-grid{grid-template-columns: 1fr; gap:1rem}
  .about-image{order:2}
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .container{padding:0 1rem; max-width:100%}
  
  /* Theme toggle adjustments */
  .theme-toggle-container{top:15px; right:15px}
  .theme-toggle{width:52px; height:28px}
  .theme-toggle .theme-icon{width:12px; height:12px; top:7px; left:5px}
  .theme-toggle .theme-labels svg{width:8px; height:8px}
  body[data-theme="night"] .theme-toggle .theme-icon{transform: translateX(14px)}
  body[data-theme="light"] .theme-toggle .theme-icon{transform: translateX(28px)}
  
  /* Hero section */
  .hero{padding:1rem 0 0.8rem}
  .logo-section{margin-bottom:0.5rem}
  .main-logo{max-width:100px}
  .bau-consulting{font-size:0.9rem; letter-spacing:0.15em}
  .hero h1{font-size:1.5rem; line-height:1.1; margin-bottom:1rem}
  .hero .lead{font-size:0.85rem; line-height:1.3}
  
  /* Sections */
  .about{padding:1rem; margin:0.5rem 0}
  .about-grid{grid-template-columns:1fr; gap:1rem; text-align:center}
  .about h2{font-size:1.2rem; margin-bottom:0.5rem}
  .about small{font-size:0.85rem; line-height:1.4}
  .about-image{float:none; margin:0 auto 0.5rem}
  .about-image .profile {width:150px; height:150px;}
  .about-image img{object-fit:cover;}
  

  
  /* Footer */
  .footer{padding:1.5rem; margin:1rem 0}
  .footer-main{font-size:.85rem; line-height:1.5}
  .footer small{font-size:.75rem}
  
  /* Reveal animations - reduce on mobile */
  .reveal{transform:translateY(20px)}
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  body{transition:none}
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  20% { background-position: -200% 0; }
  100% { background-position: -200% 0; }
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}