:root[data-theme="dark"] .top-news-content {
  background: var(--dark-bg-card) !important;
}

:root[data-theme="dark"] .top-news-content p {
  color: #fff !important;
}
:root[data-theme="dark"] .blog-card:nth-child(1) {
  background: var(--dark-bg-card) !important;
}
:root[data-theme="dark"] .blog-card {
  background: var(--dark-bg-card) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
/* Kategorie-Label für Referenzprojekte */
.category-label {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px 4px 10px;
  border-radius: 11px;
  font-weight: 400;
  color: #fff;
  font-size: 0.95rem;
  z-index: 2;
  letter-spacing: 0.01em;
  background: rgba(30,34,40,0.09);
  box-shadow: none;
  border: none;
  transition: background 0.18s;
  text-shadow: none;
  filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.category-label.energie {
  color: #fff;
  background: rgba(15,140,255,0.10);
}
.category-label.mobilitaet {
  color: #fff;
  background: rgba(46,125,109,0.10);
}
.category-label.infrastruktur {
  color: #fff;
  background: rgba(120,60,10,0.18);
  font-weight: 500;
}
/* Social Share Buttons */
.share-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 0 0 8px 0;
}
.share-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f7f5;
  color: #2E7D6D;
  font-size: 1.25rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(46,125,109,.08);
  border: 1.5px solid #e0e7e6;
  transition: background .18s, color .18s, border .18s, transform .18s;
}
.share-buttons a:hover {
  background: #2E7D6D;
  color: #fff;
  border-color: #2E7D6D;
  transform: translateY(-2px) scale(1.08);
}
.share-buttons a:active {
  background: #276e60;
  color: #fff;
  border-color: #276e60;
}

:root[data-theme="dark"] .share-buttons a {
  background: #232b2b;
  color: #a7f3d0;
  border: 1.5px solid #2E7D6D;
  box-shadow: 0 2px 8px rgba(46,125,109,.18);
}
:root[data-theme="dark"] .share-buttons a:hover {
  background: #2E7D6D;
  color: #fff;
  border-color: #2E7D6D;
}
:root[data-theme="dark"] .share-buttons a:active {
  background: #276e60;
  color: #fff;
  border-color: #276e60;
}
.blog-content .share-buttons {
  margin-top: 0;
  margin-bottom: 8px;
}
/* News Modal Styles */
.news-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(28,34,40,0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.news-modal-content {
  background: #fff;
  color: #101418;
  border-radius: 18px;
  max-width: 420px;
  width: 90%;
  padding: 32px 24px 24px 24px;
  box-shadow: 0 8px 32px rgba(46,125,109,.18), 0 0 24px 2px rgba(46,125,109,.10);
  position: relative;
  animation: modalZoomIn .4s cubic-bezier(.22,.68,.43,1.01);
  max-height: 80vh;
  overflow-y: auto;
}
@keyframes modalZoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.news-modal-close {
  transition: color .2s, transform .2s;
}
.news-modal-close:hover {
  color: #22c55e;
  transform: rotate(90deg) scale(1.2);
}
.news-modal-content::-webkit-scrollbar {
  width: 8px;
}
.news-modal-content::-webkit-scrollbar-thumb {
  background: #e0f7ef;
  border-radius: 8px;
}
.news-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
:root[data-theme="dark"] .news-modal-content::-webkit-scrollbar-thumb {
  background: #276e60;
}
.news-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #2E7D6D;
  cursor: pointer;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
:root[data-theme="dark"] .news-modal-content {
  background: var(--dark-bg-card);
  color: var(--dark-text-primary);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}
:root{
  --green:#2E7D6D;
  --green-2:#2b7567;
  --graphite:#3A3A3A;
  --white:#EAEAEA;
  --ink:#101418;
  --bg:#f7f9f9;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.08);
  --blog-card-bg:#fff;
  --ink:#101418;
  --label-bg:rgba(15,140,255,0.10);
  --label-color:#0f8cff;
  --date-color:#6c6c6c;
:root[data-theme="dark"] {
  --blog-card-bg: #23272a;
  --ink:#f7f9f9;
  --label-bg:rgba(15,140,255,0.18);
  --label-color:#8ecbff;
  --date-color:#b0b8be;
}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);}

/* --- globaler, bewegter Hintergrund --- */
body{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(46,125,109,.18), transparent 50%),
    radial-gradient(900px 400px at 120% 120%, rgba(58,58,58,.10), transparent 55%),
    linear-gradient(135deg, #f7faf9, #eaf3f1 50%, #ffffff 100%);
  background-attachment: fixed,fixed,fixed;
  -webkit-animation:bgMove 22s ease-in-out infinite alternate;
  animation:bgMove 22s ease-in-out infinite alternate;
}
@-webkit-keyframes bgMove{
  0%{background-position:0 0, 100% 100%, 0 0}
  50%{background-position:4% -2%, 96% 102%, 0 0}
  100%{background-position:0 0, 100% 100%, 0 0}
}
@keyframes bgMove{
  0%{background-position:0 0, 100% 100%, 0 0}
  50%{background-position:4% -2%, 96% 102%, 0 0}
  100%{background-position:0 0, 100% 100%, 0 0}
}

/* Header/Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.84);backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:12px clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:44px;height:44px}
.wordmark .name{font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.5px}
.wordmark .tagline{display:block;font-size:.86rem;color:#4c5258;margin-top:2px}

.main-nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.main-nav a{color:#24282c;text-decoration:none;font-weight:600}
.main-nav a:hover{color:var(--green)}
.main-nav a.active{color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--green-2)}
.btn-outline{border:1px solid #dfe4e6;color:#1f2428;background:#fff}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-ghost{color:#1f2428}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:none;margin-left:auto}
.nav-toggle span{display:block;width:24px;height:2px;background:#1f2428;margin:4px 0}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.06);
  will-change:transform;contain:layout style paint}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg img{position:absolute;inset:auto 0 0 auto;opacity:.18;width:min(60vw,900px)}
.hero-noise{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:14px 14px;opacity:.15;mix-blend-mode:multiply}
.hero-grid{position:absolute;inset:0;background:
  linear-gradient(90deg, transparent 95%, rgba(58,58,58,.08) 96%, transparent 97%) 0 0/80px 100%,
  linear-gradient(180deg, transparent 95%, rgba(58,58,58,.08) 96%, transparent 97%) 0 0/100% 80px;opacity:.16}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding: clamp(56px,8vw,120px) clamp(16px,3vw,40px)}
.hero h1{font-family:Montserrat,sans-serif;font-size: clamp(32px,5vw,56px);margin:0 0 10px;color:#182024}
.hero p{font-size: clamp(16px,2.1vw,20px);color:#4a5056;max-width:760px;margin:0}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;max-width:860px}
.hero-stats div{background:#ffffffc4;border:1px solid #e8ecee;border-radius:14px;padding:14px 16px}
.hero-stats strong{font-family:Montserrat,sans-serif;color:var(--green);font-size:1.4rem}

/* Features */
.section-head{text-align:center;max-width:900px;margin:0 auto;padding:64px 16px 16px}
.section-head h2{font-family:Montserrat,sans-serif;font-size: clamp(24px,3vw,34px);margin:0 0 6px}
.section-head p{color:#51585e;margin:0 auto;max-width:680px}
.feature-grid{max-width:1200px;margin:0 auto 56px;padding:0 16px;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid #e9edef;border-radius:16px;box-shadow:var(--shadow);padding:18px;
  will-change:transform;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
.card h3{font-family:Montserrat,sans-serif;margin:12px 0 6px}
.card p{color:#4b5156;margin:0 0 8px}
.card .link{color:var(--green);font-weight:600;text-decoration:none}
.card .link:hover{text-decoration:underline}
.card-media{height:140px;border-radius:12px;background:#eef3f2;margin:-18px -18px 12px -18px;
  contain:layout style paint;background-size:cover;background-position:center}

/* Technik-Muster */
.pattern{background: url("assets/pattern-tech.svg") center/cover no-repeat, linear-gradient(180deg,#f6fbfa,#eef5f3)}
.pattern.alt{filter:hue-rotate(20deg) saturate(1.1)}
.pattern.dark{filter:contrast(1.1) saturate(1.2)}

/* Projekte-Teaser */
.projects-teaser{background:linear-gradient(180deg,#ffffffcc,#f6fbfa)}
.project-grid{max-width:1200px;margin:0 auto 64px;padding:0 16px;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.project{position:relative;border:1px solid #e7ecee;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  will-change:transform;transition:transform .3s ease,box-shadow .3s ease}
.project:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
.project .thumb{height:160px;background:#eaf2f0;contain:layout style paint}
.tech-bg{background: url("assets/pattern-tech.svg") center/cover no-repeat, linear-gradient(180deg,#f6fbfa,#eef5f3)}
.tech-bg.alt{filter:hue-rotate(10deg)}
.tech-bg.dark{filter:contrast(1.15)}
.project .badge{position:absolute;top:12px;left:12px;background:#fff;border:1px solid #e4e9ea;color:var(--green);padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.badge .icon{width:12px;height:12px;border-radius:50%;display:inline-block}
.badge .icon.mob{background:#2E7D6D;box-shadow:0 0 0 2px rgba(46,125,109,.18)}
.badge .icon.energy{background:#0f8cff;box-shadow:0 0 0 2px rgba(15,140,255,.18)}
.badge .icon.infra{background:#f4a11e;box-shadow:0 0 0 2px rgba(244,161,30,.18)}
.project .meta {
  padding: 14px;
}
.project .meta h3 {
  margin: 0 0 7px 0;
  font-size: 1.13em;
  font-weight: 600;
}
.project .meta .more {
  display: block;
  font-size: 1em;
  font-weight: 400;
  opacity: 0.82;
  margin-top: 2px;
}

/* Blog/News Bereich */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0;
  align-items: stretch;
  grid-template-areas:
    "main main"
    "left right";
}
/* Apple-Style große Kachel oben */
.blog-card:nth-child(1) {
  grid-area: main;
  min-height: 320px;
  width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.blog-card:nth-child(1) .blog-img {
  border-radius: 0;
  min-height: 180px;
  aspect-ratio: 2/1;
}
.blog-card:nth-child(1) .blog-content {
  border-radius: 0;
  padding: 28px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.blog-card:nth-child(2), .blog-card:nth-child(3) {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.blog-card {
  background: var(--blog-card-bg);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(46,125,109,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  transition: box-shadow .2s;
}
.blog-card:hover {
  box-shadow: 0 12px 32px rgba(46,125,109,.18);
}
.blog-img {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.blog-content {
  padding: 24px 20px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
}
.blog-content h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.35rem;
}
.blog-content .date {
  font-size: .95rem;
  color: #4c5258;
  margin-bottom: 12px;
}
.blog-content p {
  margin-bottom: 18px;
}
.blog-content .btn {
  align-self: flex-start;
  margin-top: 10px;
}
.blog-content .share-buttons {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 10px;
  margin: 0;
  z-index: 2;
}

/* Dark Mode für Blog/News Bereich */

/* About */
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;max-width:1200px;margin:0 auto;padding:64px 16px}
.about-media{min-height:260px;aspect-ratio:4/3;border-radius:16px;border:1px solid #e6eaeb;box-shadow:var(--shadow);
  background: linear-gradient(135deg,#ffffff,#f2f7f5);
  background-color:#f2f7f5;
  background-size:cover;
  background-position:center;
  overflow:hidden;
 }
.parallax{background-attachment: scroll;}
.about-text h2{font-family:Montserrat,sans-serif;margin:0 0 8px}
.about-text p{color:#4b5156;margin:0 0 8px}
.bullets{margin:10px 0 0;padding-left:18px}
.bullets li{margin:6px 0}
.about-cta{margin-top:12px}

/* FAQ */
.faq .accordion{max-width:900px;margin:0 auto 64px;padding:0 16px}
details{background:#fff;border:1px solid #e8ecef;border-radius:12px;padding:14px 16px;margin:8px 0;box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:700}
details[open]{border-color:#dfe7e5}

/* CTA band */
.cta-band{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:22px 16px;border-top:1px solid #e7ecee;border-bottom:1px solid #e7ecee;background:linear-gradient(180deg,#fff,#f6fbfa)}
.cta-band h3{margin:0;font-family:Montserrat,sans-serif}

/* Service-Seiten */
.subpage .page-hero{max-width:1200px;margin:0 auto;padding:56px 16px 18px}
.service-sections{max-width:1100px;margin:12px auto 56px;padding:0 16px;display:grid;gap:20px}
.service{display:grid;grid-template-columns:320px 1fr;gap:18px;background:#fff;border:1px solid #e8ecee;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.service-media{min-height:220px;background-size:cover;background-position:center;contain:layout style paint}
.service-body{padding:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;list-style:none}
.tags li{background:#f2f7f6;border:1px solid #e5ecea;color:#2a2f34;border-radius:999px;padding:6px 10px;font-weight:600;font-size:.86rem}

/* Projekt-Details */
.project-list{max-width:1100px;margin:12px auto 64px;padding:0 16px;display:grid;gap:20px}
.project-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;background:#fff;border:1px solid #e8ecee;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.pd-media{min-height:260px}
.pd-body{padding:18px}
.stats{display:flex;gap:12px;list-style:none;padding:0;margin:12px 0 0}
.stats li{background:#f4f9f7;border:1px solid #e5ecea;border-radius:12px;padding:8px 10px}

/* Kontakt */
.contact .contact-form{max-width:900px;margin:0 auto 56px;padding:0 16px}
.contact-form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid #dfe6e8;border-radius:12px;background:#fff;font:inherit}
.contact-form button{margin-top:12px}

/* Legal */
.legal{max-width:900px;margin:0 auto 28px;padding:0 16px}
.legal h3{font-family:Montserrat,sans-serif;font-size:1.1rem;margin:24px 0 8px;color:#24282c}
.legal ul{margin:8px 0;padding-left:24px}
.legal li{margin:4px 0;color:#4b5156}
.legal strong{color:#24282c}

/* Footer */
.site-footer{display:flex;justify-content:space-between;align-items:center;padding:22px 16px;border-top:1px solid #e8ecee;background:#fff}
.site-footer nav a{color:#4b5156;margin-left:12px;text-decoration:none}
.site-footer nav a:hover{color:var(--green)}

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

/* Scroll-to-Top Button */
.scroll-to-top{
  position:fixed;
  bottom:200px;
  right:24px;
  width:50px;
  height:50px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(46,125,109,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
  z-index:100;
}
.scroll-to-top.visible{
  opacity:1;
  visibility:visible;
}
.scroll-to-top:hover{
  background:var(--green-2);
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(46,125,109,.4);
}
.scroll-to-top:active{
  transform:translateY(-2px);
}

/* 404 Error Page */
.error-page{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 16px;
}
.error-content{
  text-align:center;
  max-width:600px;
}
.error-code{
  font-family:Montserrat,sans-serif;
  font-size:clamp(80px,15vw,140px);
  font-weight:700;
  color:var(--green);
  margin:0;
  line-height:1;
  text-shadow:0 4px 12px rgba(46,125,109,.2);
}
.error-content h2{
  font-family:Montserrat,sans-serif;
  font-size:clamp(24px,4vw,32px);
  margin:16px 0 12px;
}
.error-content p{
  color:#51585e;
  font-size:1.1rem;
  margin:0 0 32px;
}
.error-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.quick-links{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid #e7ecee;
}
.quick-links h3{
  font-family:Montserrat,sans-serif;
  font-size:1.1rem;
  margin:0 0 16px;
}
.quick-links ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.quick-links a{
  color:var(--green);
  text-decoration:none;
  font-weight:500;
  transition:color .2s;
}
.quick-links a:hover{
  color:var(--green-2);
  text-decoration:underline;
}

/* Snowfall */
.snowfall{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}
.snowflake{
  position:absolute;
  top:-10px;
  color:#fff;
  font-size:1rem;
  opacity:.8;
  animation:fall linear infinite;
  text-shadow:0 0 8px rgba(255,255,255,.6);
}
@keyframes fall{
  0%{
    transform:translateY(0) rotate(0deg);
    opacity:.8;
  }
  100%{
    transform:translateY(100vh) rotate(360deg);
    opacity:.3;
  }
}
:root[data-theme="dark"] .snowflake{
  color:#e0f2fe;
  text-shadow:0 0 10px rgba(224,242,254,.8);
}

/* Form Feedback */
.form-feedback{
  margin:24px 0;
  padding:20px;
  border-radius:12px;
  border:1px solid #d1f0e5;
  background:linear-gradient(135deg,#f0fdf9,#ecfdf5);
  display:flex;
  align-items:flex-start;
  gap:16px;
  animation:slideDown .4s ease;
}
@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.form-feedback.error{
  border-color:#fecaca;
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
}
.form-feedback .feedback-icon{
  flex-shrink:0;
  stroke:var(--green);
}
.form-feedback.error .feedback-icon{
  stroke:#dc2626;
}
.form-feedback .feedback-content{
  flex:1;
}
.form-feedback .feedback-title{
  font-family:Montserrat,sans-serif;
  font-size:1.1rem;
  color:#065f46;
  display:block;
  margin:0 0 6px;
}
.form-feedback.error .feedback-title{
  color:#991b1b;
}
.form-feedback .feedback-message{
  color:#047857;
  margin:0;
  line-height:1.6;
}
.form-feedback.error .feedback-message{
  color:#b91c1c;
}

/* Responsiv */
@media (max-width:980px){
  .main-nav{position:fixed;inset:64px 0 auto 0;background:#fff;border-top:1px solid #e7ecee;padding:14px 16px;display:none;flex-direction:column}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .feature-grid,.project-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .service{grid-template-columns:1fr}
  .project-detail{grid-template-columns:1fr}
}

/* Tablet-spezifische Anpassungen */
@media (min-width:768px) and (max-width:980px){
  .feature-grid,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Kleine Mobile-Geräte */
@media (max-width:480px){
  .hero h1{font-size:28px}
  .hero p{font-size:16px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center}
  .cta-band{flex-direction:column;text-align:center}
  .snowflake { font-size: 0.18rem !important; }

  /* Noch weniger Schneeflocken auf dem Handy anzeigen */
  .snowfall .snowflake:nth-child(n+6) {
    display: none !important;
  }

  /* Blog/News Bereich: Mobile Optimierung */
  .blog-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 24px 0;
    padding: 0 4px;
    max-width: 100vw;
  }
  .blog-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px !important;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .blog-card:nth-child(1),
  .blog-card:nth-child(2),
  .blog-card:nth-child(3),
  .blog-card:nth-child(4) {
    min-height: unset;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 16px !important;
  }
  .blog-card .blog-img,
  .blog-card:nth-child(1) .blog-img {
    min-height: 140px;
    height: 160px;
    aspect-ratio: 16/9;
    border-radius: 16px 16px 0 0 !important;
    width: 100%;
    margin: 0;
    object-fit: cover;
  }
  .blog-card .blog-content,
  .blog-card:nth-child(1) .blog-content {
    padding: 18px 12px 16px 12px !important;
    border-radius: 0 0 16px 16px !important;
    min-height: unset;
    font-size: 1rem;
  }
  .blog-content h2 {
    font-size: 1.15rem !important;
    margin-bottom: 10px;
  }
  .blog-content .date {
    font-size: 0.95rem !important;
    margin-bottom: 10px;
  }
  .category-label {
    top: 10px !important;
    left: 10px !important;
    font-size: 0.95rem !important;
    padding: 4px 10px 4px 10px !important;
    border-radius: 9px !important;
  }
  .blog-content .btn {
    font-size: 1rem !important;
    padding: 10px 18px !important;
    margin-top: 8px;
  }
  .blog-content .share-buttons {
    right: 10px !important;
    bottom: 10px !important;
    gap: 6px;
  }
  /* Modal auf Mobilgeräten anpassen */
  .news-modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: unset !important;
    padding: 10px 4px !important;
    border-radius: 14px !important;
  }
  .news-modal-close {
    top: 8px !important;
    right: 8px !important;
    font-size: 2rem !important;
  }
}

/* Toggle-Button */
.mode-toggle{
  margin-left:8px;border:1px solid #dfe4e6;background:#fff;color:#1f2428;
  border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:600;
  transition:all .3s ease;
}
.mode-toggle:hover{
  background:#f5f7f9;
  border-color:var(--green);
}

/* Nur die große News/Blog-Kachel auf kleinen Bildschirmen wie die anderen anzeigen */
@media (max-width: 600px) {
  .blog-card:nth-child(1) {
    min-height: unset !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  .blog-card:nth-child(1) .blog-img {
    min-height: 140px !important;
    height: 160px !important;
    aspect-ratio: 16/9 !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
  }
  .blog-card:nth-child(1) .blog-content {
    padding: 18px 12px 16px 12px !important;
    border-radius: 0 0 16px 16px !important;
    min-height: unset !important;
    font-size: 1rem !important;
  }
  /* Top News Label nur auf Handy ausblenden */
  .blog-card:nth-child(1) .category-label.energie {
    display: none !important;
  }
}
/* ============================================
   DARK MODE - Neu implementiert
   ============================================ */

/* Farbpalette für Dark Mode */
:root[data-theme="dark"]{
  /* Hintergründe */
  --dark-bg-base: #0a0e11;
  --dark-bg-elevated: #161b20;
  --dark-bg-card: #1c2228;
  --dark-bg-input: #232930;
  
  /* Borders */
  --dark-border: #2a3138;
  --dark-border-light: #353d45;
  
  /* Texte */
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #d1d5db;
  --dark-text-tertiary: #9ca3af;
  
  /* Akzente */
  --dark-green: #4ade80;
  --dark-green-hover: #22c55e;
}

/* Body & Grundlagen */
:root[data-theme="dark"] body{
  color:var(--dark-text-secondary);
  background:var(--dark-bg-base);
}

/* Header */
:root[data-theme="dark"] .site-header{
  background:rgba(22,27,32,.95);
  border-color:var(--dark-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

:root[data-theme="dark"] .wordmark .name{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .wordmark .tagline{
  color:var(--dark-text-tertiary);
}

:root[data-theme="dark"] .mode-toggle{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .mode-toggle:hover{
  background:var(--dark-bg-input);
  border-color:var(--dark-green);
}

/* Navigation */
:root[data-theme="dark"] .main-nav a{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .main-nav a:hover,
:root[data-theme="dark"] .main-nav a.active{
  color:var(--dark-green);
}

:root[data-theme="dark"] .main-nav.open{
  background:var(--dark-bg-base);
  border-color:var(--dark-border);
}

/* Buttons */
:root[data-theme="dark"] .btn-primary{
  background:var(--dark-green);
  color:#000;
}

:root[data-theme="dark"] .btn-primary:hover{
  background:var(--dark-green-hover);
}

:root[data-theme="dark"] .btn-outline{
  background:transparent;
  border-color:var(--dark-border-light);
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .btn-outline:hover{
  border-color:var(--dark-green);
  color:var(--dark-green);
  background:rgba(74,222,128,.1);
}

:root[data-theme="dark"] .btn-ghost{
  color:var(--dark-text-secondary);
}

/* Hero */
:root[data-theme="dark"] .hero{
  border-color:var(--dark-border);
}

:root[data-theme="dark"] .hero h1{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .hero p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .hero-stats div{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
}

:root[data-theme="dark"] .hero-stats strong{
  color:var(--dark-green);
}

:root[data-theme="dark"] .hero-stats span{
  color:var(--dark-text-tertiary);
}

/* Section Headers */
:root[data-theme="dark"] .section-head h2,
:root[data-theme="dark"] .page-hero h1,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .section-head p,
:root[data-theme="dark"] .page-hero p{
  color:var(--dark-text-secondary);
}

/* Cards */
:root[data-theme="dark"] .card{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  border-color:var(--dark-border-light);
}

:root[data-theme="dark"] .card h3{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .card p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .card .link{
  color:var(--dark-green);
}

:root[data-theme="dark"] .card .link:hover{
  color:var(--dark-green-hover);
}

:root[data-theme="dark"] .card-media{
  background:var(--dark-bg-elevated);
  opacity:.9;
}

/* Projects */
:root[data-theme="dark"] .projects-teaser{
  background:transparent;
}

:root[data-theme="dark"] .project{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .project:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  border-color:var(--dark-border-light);
}

:root[data-theme="dark"] .project .badge{
  background:var(--dark-bg-elevated);
  border-color:var(--dark-border);
  color:var(--dark-green);
}

:root[data-theme="dark"] .project .meta h3{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .project .more{
  color:var(--dark-text-tertiary);
}

:root[data-theme="dark"] .project .thumb{
  background:var(--dark-bg-elevated);
  opacity:.9;
}

/* Project Details */
:root[data-theme="dark"] .project-detail{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .pd-body h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .pd-body p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .pd-media{
  background:var(--dark-bg-elevated);
  opacity:.9;
}

:root[data-theme="dark"] .stats li{
  background:var(--dark-bg-elevated);
  border-color:var(--dark-border);
}

:root[data-theme="dark"] .stats strong{
  color:var(--dark-green);
}

/* About */
:root[data-theme="dark"] .about h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .about p,
:root[data-theme="dark"] .bullets li{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .about-media{
  background:var(--dark-bg-card);
  background-size:cover !important;
  background-position:center !important;
  border-color:var(--dark-border);
}

/* FAQ */
:root[data-theme="dark"] details{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

:root[data-theme="dark"] summary{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] details div{
  color:var(--dark-text-secondary);
}

/* CTA Band */
:root[data-theme="dark"] .cta-band{
  background:var(--dark-bg-elevated);
  border-color:var(--dark-border);
}

:root[data-theme="dark"] .cta-band h3{
  color:var(--dark-text-primary);
}

/* Services */
:root[data-theme="dark"] .service{
  background:var(--dark-bg-card);
  border-color:var(--dark-border);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .service h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .service p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .service-media{
  background-size:cover !important;
  background-position:center !important;
  opacity:.9;
}

:root[data-theme="dark"] .tags li{
  background:var(--dark-bg-elevated);
  border-color:var(--dark-border);
  color:var(--dark-text-secondary);
}

/* Forms */
:root[data-theme="dark"] .contact-form input,
:root[data-theme="dark"] .contact-form textarea{
  background:var(--dark-bg-input);
  border-color:var(--dark-border);
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .contact-form input:focus,
:root[data-theme="dark"] .contact-form textarea:focus{
  border-color:var(--dark-green);
  outline:none;
}

:root[data-theme="dark"] .contact-form input::placeholder,
:root[data-theme="dark"] .contact-form textarea::placeholder{
  color:var(--dark-text-tertiary);
}

:root[data-theme="dark"] .contact-form label{
  color:var(--dark-text-secondary);
}

/* Form Feedback Dark Mode */
:root[data-theme="dark"] .form-feedback{
  background:linear-gradient(135deg,var(--dark-bg-elevated),var(--dark-bg-card));
  border-color:rgba(74,222,128,.3);
}

:root[data-theme="dark"] .form-feedback.error{
  border-color:rgba(239,68,68,.3);
  background:linear-gradient(135deg,rgba(127,29,29,.3),rgba(153,27,27,.2));
}

:root[data-theme="dark"] .form-feedback .feedback-title{
  color:var(--dark-green);
}

:root[data-theme="dark"] .form-feedback.error .feedback-title{
  color:#ef4444;
}

:root[data-theme="dark"] .form-feedback .feedback-message{
  color:var(--dark-text-secondary);
}

/* Legal/Footer */
:root[data-theme="dark"] .legal h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .legal h3{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .legal p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .legal li{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .legal strong{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .site-footer{
  background:var(--dark-bg-elevated);
  border-color:var(--dark-border);
  color:var(--dark-text-tertiary);
}

:root[data-theme="dark"] .site-footer nav a{
  color:var(--dark-text-tertiary);
}

:root[data-theme="dark"] .site-footer nav a:hover{
  color:var(--dark-green);
}

/* 404 Error Page Dark Mode */
:root[data-theme="dark"] .error-code{
  color:var(--dark-green);
}

:root[data-theme="dark"] .error-content h2{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .error-content p{
  color:var(--dark-text-secondary);
}

:root[data-theme="dark"] .quick-links{
  border-top-color:var(--dark-border);
}

:root[data-theme="dark"] .quick-links h3{
  color:var(--dark-text-primary);
}

:root[data-theme="dark"] .quick-links a{
  color:var(--dark-green);
}

:root[data-theme="dark"] .quick-links a:hover{
  color:var(--dark-green-hover);
}