:root{--brand:#0ea5e9;--brand-dark:#0284c7;--bg:#f8fafc;--text:#0f172a}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:#ffffffd8;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;z-index:20}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;gap:10px;align-items:center}
.logo svg{height:36px;width:36px}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.lang-switch{display:flex;gap:8px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:var(--brand);color:white;font-weight:600;box-shadow:0 8px 20px rgba(2,132,199,.25)}
.btn:hover{background:var(--brand-dark)}
.section{padding:64px 0}
.hero{position:relative;min-height:65vh;display:grid;place-items:center;background:#000;color:#fff;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:url('https://upload.wikimedia.org/wikipedia/commons/9/9c/Dresden_-_Window_cleaners_-_1749.jpg') center/cover no-repeat;opacity:.55}
.hero .content{position:relative;z-index:1}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;box-shadow:0 12px 24px rgba(2,6,23,.04)}
.card img{display:block;width:100%;height:220px;object-fit:cover}
.card .p{padding:16px}
.list{display:grid;gap:10px}
.badge{padding:6px 10px;border-radius:10px;background:#e0f2fe;color:#075985;font-weight:600;display:inline-block}
.prices .price{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px dashed #cbd5e1;border-radius:12px;background:#fff}
.footer{background:#0b1220;color:#cbd5e1}
.footer a{color:#93c5fd}
.whatsapp{position:fixed;right:18px;bottom:18px;z-index:50;background:#25D366;color:#fff;border-radius:999px;padding:12px 16px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;display:none;z-index:60;box-shadow:0 10px 30px rgba(2,6,23,.12)}
.cookie.show{display:flex;align-items:center;justify-content:space-between;gap:12px}
.notice{font-size:.9rem;color:#475569}
.small{font-size:.9rem}








/* ========== Design Tokens ========== */
:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted:#f1f5f9;
  --line:#e2e8f0;

  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --accent:#22c55e;
  --danger:#ef4444;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-sm: 0 4px 12px rgba(2,6,23,.06);
  --shadow-md: 0 10px 30px rgba(2,6,23,.08);

  --container: 1100px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e5e7eb;
    --muted:#111827;
    --line:#1f2937;

    --brand:#38bdf8;
    --brand-600:#0ea5e9;
  }
}

/* ========== Reset/Normalize ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg,video{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}

/* ========== Base Typo ========== */
body{
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h2{font-size:clamp(1.4rem,2.4vw,1.8rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
p{margin:.5rem 0 1rem}

/* ========== Layout Helpers ========== */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.section{padding:64px 0}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ========== Header / Nav ========== */
.header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  border-bottom:1px solid var(--line);
}
.header .inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{
  display:inline-block;padding:8px 10px;border-radius:999px;
  color:var(--fg);text-decoration:none;border:1px solid transparent
}
.nav a:hover{background:var(--muted)}
.nav .cta{
  background:var(--brand);color:#fff;border-color:var(--brand);
  box-shadow:var(--shadow-sm);font-weight:700
}
.nav .cta:hover{background:var(--brand-600)}

/* ========== Hero ========== */
.hero{
  position:relative;min-height:60vh;display:grid;place-items:center;
  background:linear-gradient(120deg, color-mix(in oklab, var(--brand) 12%, var(--bg)) 0%, var(--bg) 70%);
}
.hero .wrap{display:grid;gap:24px;grid-template-columns:1.1fr .9fr;align-items:center}
.hero .badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  background:var(--muted);border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;font-weight:600;font-size:.9rem
}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
@media (max-width:960px){ .hero .wrap{grid-template-columns:1fr} }

/* ========== Cards ========== */
.card{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  overflow:hidden
}
.card .p{padding:16px}
.card h3{margin:.2rem 0 .4rem}
.card img{height:220px;object-fit:cover}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;border:2px solid var(--brand);
  background:var(--brand);color:#fff;font-weight:800;box-shadow:var(--shadow-sm)
}
.btn:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.outline{background:transparent;color:var(--brand)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg)}
.btn.block{display:flex;justify-content:center;width:100%}

/* ========== Forms ========== */
.form{display:grid;gap:12px}
.input, .select, .textarea, input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)
}
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus{
  outline:2px solid color-mix(in oklab, var(--brand) 30%, transparent)
}
.help{font-size:.9rem;color:gray}
.success{
  background:color-mix(in oklab, var(--accent) 15%, var(--bg));
  border:1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  color:color-mix(in oklab, var(--accent) 80%, #063);
  padding:10px 12px;border-radius:var(--radius-sm)
}
.error{
  background:color-mix(in oklab, var(--danger) 10%, var(--bg));
  border:1px solid color-mix(in oklab, var(--danger) 40%, var(--line));
  color:color-mix(in oklab, var(--danger) 80%, #600);
  padding:10px 12px;border-radius:var(--radius-sm)
}

/* ========== Tables ========== */
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:var(--radius-sm)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.table thead th{background:var(--muted);font-weight:800}

/* ========== Footer ========== */
.footer{
  background:#0b1220;color:#cbd5e1;margin-top:40px;padding:40px 0
}
.footer a{color:#93c5fd}
.footer .cols{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
@media (max-width:960px){ .footer .cols{grid-template-columns:1fr} }

/* ========== Utilities ========== */
.m0{margin:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}.mt4{margin-top:32px}
.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px}.mb4{margin-bottom:32px}
.p1{padding:8px}.p2{padding:16px}.p3{padding:24px}
.center{text-align:center}
.right{text-align:right}
.hidden{display:none !important}
.round{border-radius:999px}
.divider{height:1px;background:var(--line);margin:16px 0}

/* ========== Cookie Banner & WhatsApp FAB (optional) ========== */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:12px 14px;box-shadow:var(--shadow-md)
}
.cookie.show{display:flex}
#whatsapp-fab{
  position:fixed;right:18px;bottom:18px;z-index:50;
  background:#25D366;color:#fff;border-radius:999px;padding:12px 16px;
  display:flex;align-items:center;gap:8px;font-weight:900;box-shadow:var(--shadow-md)
}






/* --- Grundlayout Header --- */
.header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Logo --- */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo strong {
  font-size: 1.2rem;
  color: #333;
}

/* --- Navigation Desktop --- */
nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #0078d4;
}

/* --- Sprachumschalter --- */
.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-switch .btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  padding: 6px 8px;
  transition: color 0.3s;
}

.lang-switch .btn:hover {
  color: #0078d4;
}

/* --- Hamburger Button (mobil) --- */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
}

.menu-btn div {
  height: 3px;
  width: 100%;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  /* Menübutton einblenden */
  .menu-btn {
    display: flex;
  }

  /* Navigation ausblenden */
  nav {
    position: absolute;
    top: 60px;
    left: -100%;
    width: 100%;
    background: #fff;
    text-align: center;
    transition: left 0.3s ease;
    border-top: 1px solid #ddd;
  }

  nav ul {
    flex-direction: column;
    gap: 0;
  }

  nav ul li {
    border-bottom: 1px solid #eee;
  }

  nav ul li a {
    display: block;
    padding: 15px 0;
    color: #333;
  }

  /* Sprachumschalter in mobile Ansicht unten */
  .lang-switch {
    display: none;
  }

  /* Aktives Menü */
  nav.active {
    left: 0;
  }

  /* Animation des Icons */
  .menu-btn.open div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-btn.open div:nth-child(2) {
    opacity: 0;
  }

  .menu-btn.open div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}