:root{
  /* LIGHT (Standard) */
  --bg:#c9c9c9;
  --panel:#f5f7fb;
  --text:#0b0b0c;
  --muted:#4a4a55;

  --accent:#0b568b;
  --accent-2:#0a4a76;
  --ring:#1976b3;

  --link:#0b6bcb;
  --link-hover:#063e75;

  --card:#f7f8fb;
  --hairline: rgba(0,0,0,.10);
  --hairline-weak: rgba(0,0,0,.06);

  --nav-a: rgba(255,255,255,.92);
  --nav-b: rgba(255,255,255,.68);

  --hero-grad1: radial-gradient(1200px 600px at 70% -20%, rgba(11,107,203,.10), transparent 60%);
  --hero-grad2: radial-gradient(800px 400px at -10% 110%, rgba(9,86,171,.10), transparent 60%);

  --badge-bg: rgba(11,107,203,.14);
  --badge-border: rgba(11,107,203,.30);

  --input-bg:#ffffff;
  --input-border: rgba(0,0,0,.10);
  --ring-soft: rgba(25,118,179,.22);

  --hover-tint: rgba(11,107,203,.08);
  --price:#0b6bcb;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* DARK overrides */
:root[data-theme="dark"]{
  --bg:#0a0a0a;           
  --panel:#111317;        
  --text:#e9eef5;         
  --muted:#a4b0bf;        

  --accent:#0e4153;       
  --accent-2:#113e67;     
  --ring:#1d6b91;         

  --link:#cfe9ff;
  --link-hover:#ffffff;

  --card:#0c0e12;         
  --hairline: rgba(255,255,255,.06);
  --hairline-weak: rgba(255,255,255,.04);

  --nav-a: rgba(10,10,10,.9);
  --nav-b: rgba(10,10,10,.6);

  --hero-grad1: radial-gradient(1200px 600px at 70% -20%, rgba(17,62,103,.12), transparent 60%);
  --hero-grad2: radial-gradient(800px 400px at -10% 110%, rgba(14,65,83,.15), transparent 60%);

  --badge-bg: rgba(17,62,103,.18);
  --badge-border: rgba(17,62,103,.35);

  --input-bg:#0f1216;
  --input-border: rgba(255,255,255,.08);
  --ring-soft: rgba(29,107,145,.25);

  --hover-tint: rgba(17,62,103,.08);
  --price:#cfe9ff;
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  /* smoother theme switch */
  transition: background-color .18s ease, color .18s ease;
}

/* Links */
a{ color: var(--link); text-decoration:none; }
a:hover{ color: var(--link-hover); }

/* Layout */
.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 24px;
}

/* Nav */
.nav{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, var(--nav-a), var(--nav-b));
  border-bottom: 1px solid var(--hairline-weak);
  transition: background-color .18s ease, border-color .18s ease;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand img{ height:40px; width:auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.brand .name{ font-weight:700; letter-spacing:.5px; }
.brand .tag{ color: var(--muted); font-size:.9rem; }

/* Menu */
.menu{ display:flex; gap:18px; align-items:center; }
.menu a{
  position:relative; padding:10px 6px; border-radius: 12px; color: var(--text);
}
.menu a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
  scale: 0 1; transform-origin:center; transition: scale .25s ease;
}
.menu a:hover::after{ scale: 1 1; }

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:14px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  border:1px solid var(--hairline);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* Hero */
.hero{
  position: relative; isolation:isolate; overflow:hidden;
  min-height: 66vh; display:grid; place-items:center;
  text-align:center;
  background: var(--hero-grad1), var(--hero-grad2);
  border-bottom: 1px solid var(--hairline);
  transition: background-color .18s ease, border-color .18s ease;
}
.hero::before{
  /* big logo watermark */
  content:""; position:absolute; inset:-10% -10% -10% -10%; z-index:-1;
  background: url("./images/logo_no_bg.png") center/60% no-repeat;
  opacity: .12;
  filter: grayscale(0);
}
.hero h1{
  font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
  margin: 0 0 10px 0;
  letter-spacing: .5px;
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px; font-size:.95rem;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  box-shadow: inset 0 0 0 1px var(--hairline-weak);
  animation: float 6s ease-in-out infinite;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }

.subtitle{ color: var(--muted); max-width: 55ch; margin-inline:auto; }

/* Grid / Cards */
.grid{
  display:grid; gap:18px; margin: 36px auto; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.card{
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 18px; border-radius: 16px; box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background-color .18s ease, color .18s ease;
}
.card:hover{ transform: translateY(-3px); border-color: var(--ring); }
.card h3{ margin:8px 0 6px 0; }
.card p{ margin:0; color: var(--muted); }

/* Kicker */
.kicker{ text-transform: uppercase; letter-spacing: .18em; color: var(--muted); font-size:.8rem; }

/* Footer */
.footer{
  margin-top: 60px; padding: 28px 0; border-top: 1px solid var(--hairline);
  color: var(--muted);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.small{ font-size:.9rem; }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(8px); animation: rise .6s ease forwards; }
.reveal-2{ animation-delay:.12s; } .reveal-3{ animation-delay:.24s; } .reveal-4{ animation-delay:.36s; }
@keyframes rise{ to{ opacity:1; transform: translateY(0);} }

/* Contact page */
.form{
  display:grid; gap:14px; max-width: 680px; margin: 18px auto 0;
}
input, textarea{
  width:100%; padding:12px 14px; border-radius: 12px; color: var(--text);
  background: var(--input-bg); border:1px solid var(--input-border);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease, background-color .18s ease, color .18s ease;
}
input:focus, textarea:focus{ border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
textarea{ min-height:140px; resize: vertical; }

/* Angebote page */
.list{ list-style:none; padding:0; margin:0; }
.list li{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px 14px; border-bottom:1px dashed var(--hairline);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.list li:hover{ background: var(--hover-tint); border-radius: 12px; }
.price{ color: var(--price); }

/* Responsive logo in hero */
.logo-inline{ height:72px; width:auto; }
@media (max-width:560px){ .logo-inline{ height:56px; } }

/* Optional: Theme-Toggle Button (falls genutzt) */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:8px 10px; border-radius:12px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  line-height:0;
}
.theme-toggle:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.theme-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--ring-soft); }

:root:not([data-theme="dark"]) .icon-sun{ display:none; }  /* Light -> nur Sonne sichtbar */
:root[data-theme="dark"] .icon-moon{ display:none; }       /* Dark -> nur Mond sichtbar */