/* site.css — Basis-Styles & Chrome (Header/Footer/CI) aus index.html extrahiert,
   damit Unterseiten wie landingpage.html dieselbe dein-stadtwerk-CI nutzen. */
    :root {
      --green:#008b63;
      --green-dark:#006b56;
      --navy:#061b3a;
      --text:#10213f;
      --muted:#667085;
      --line:#e8eef3;
      --soft:#f6faf8;
      --white:#ffffff;
      --shadow:0 18px 45px rgba(15,35,66,.14);
      --radius:18px;
    }
    * { box-sizing:border-box; }
    body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:#fff; }
    a { color:inherit; text-decoration:none; }
    .page { overflow:hidden; }
    .container { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
    header { height:82px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; position:sticky; top:0; z-index:10; }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:10px; font-weight:800; line-height:1.02; color:var(--navy); font-size:21px; }
    .logo-mark { width:45px; height:42px; display:grid; place-items:center; }
    .menu { display:flex; gap:30px; align-items:center; color:#1c2b43; font-size:14px; font-weight:600; }
    .menu span::after { content:"⌄"; font-size:13px; margin-left:8px; color:#667085; }
    .actions { display:flex; align-items:center; gap:22px; color:#0d1b33; font-weight:700; font-size:14px; }
    .hero { position:relative; min-height:630px; padding:70px 0 190px; background:linear-gradient(90deg, rgba(246,251,252,.98) 0%, rgba(246,251,252,.86) 39%, rgba(246,251,252,.18) 66%), url('assets/img/hero.webp') center right/cover no-repeat; }
    .hero::after { content:""; position:absolute; inset:auto 0 0; height:180px; background:linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events:none; }
    .eyebrow { color:var(--green); font-weight:800; letter-spacing:.02em; margin:0 0 24px; }
    h1 { font-size:64px; line-height:1.03; letter-spacing:-.04em; margin:0 0 24px; max-width:560px; color:var(--navy); }
    h1 span { color:var(--green); display:block; }
    .lead { max-width:500px; color:#233753; font-size:18px; line-height:1.7; margin:0 0 34px; font-weight:500; }
    .button { display:inline-flex; align-items:center; gap:14px; border-radius:8px; background:var(--navy); color:#fff; padding:17px 25px; font-weight:800; box-shadow:0 10px 18px rgba(6,27,58,.18); }
    .badge { position:absolute; right:13%; top:230px; width:170px; height:170px; background:#fff; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:22px; line-height:1.25; font-weight:900; color:var(--navy); box-shadow:var(--shadow); transform:rotate(8deg); }
    .badge small { color:var(--green); display:block; font-size:34px; line-height:1; margin-bottom:4px; }
    .availability { position:relative; z-index:2; margin-top:-140px; }
    .availability-card { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); padding:30px; }
    .availability-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
    .availability h2, .section h2 { margin:0; color:var(--navy); letter-spacing:-.02em; }
    .availability p { margin:5px 0 0; color:var(--muted); }
    .pill { border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-size:13px; color:#43546a; font-weight:700; background:#fff; }
    .search { display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:22px; }
    .input { border:1px solid #d9e2ea; height:54px; border-radius:8px; display:flex; align-items:center; gap:12px; padding:0 18px; color:#98a2b3; font-weight:600; }
    .search button { border:0; border-radius:8px; background:var(--navy); color:white; padding:0 26px; font-weight:800; }
    .products { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .product { border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
    .icon { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:25px; }
    .product strong { display:block; font-size:15px; color:var(--navy); margin-bottom:3px; }
    .product small { color:var(--muted); font-weight:600; }
    .status { display:inline-flex; gap:5px; align-items:center; margin-top:10px; font-size:12px; font-weight:800; }
    .green { color:#009966; } .blue { color:#1c8fe3; } .orange { color:#d89b13; } .red { color:#ca3f5f; }
    .features { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; padding:66px 0 70px; }
    .feature { display:flex; gap:18px; align-items:flex-start; }
    .feature h3 { margin:2px 0 8px; color:var(--navy); font-size:18px; }
    .feature p { margin:0; color:#536176; line-height:1.55; font-weight:500; }
    .grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding-bottom:75px; }
    .section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
    .link { color:var(--green); font-weight:900; }
    .news-item { display:grid; grid-template-columns:150px 1fr auto; gap:22px; align-items:center; padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
    .thumb { height:96px; border-radius:10px; object-fit:cover; background:linear-gradient(135deg,#d5ebe2,#6ea3c1); }
    .date { color:var(--green); font-size:13px; font-weight:900; margin-bottom:8px; }
    .news-item h3 { margin:0 0 8px; font-size:19px; color:var(--navy); }
    .news-item p { margin:0; color:#536176; line-height:1.45; }
    .services { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .service { border:1px solid var(--line); border-radius:14px; padding:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:132px; }
    .service strong { color:var(--navy); }
    .service p { color:#667085; margin:6px 0 0; line-height:1.45; font-weight:500; }
    .cta { background:linear-gradient(90deg, #00875f, #009b7a); color:#fff; padding:55px 0; }
    .cta-inner { display:grid; grid-template-columns:250px 1fr auto; gap:40px; align-items:center; }
    .line-art { font-size:70px; opacity:.8; }
    .cta h2 { margin:0 0 10px; font-size:30px; }
    .cta p { margin:0; line-height:1.6; opacity:.92; }
    .cta .white-button { background:#fff; color:var(--navy); border-radius:8px; padding:16px 27px; font-weight:900; }
    footer { background:#061b3a; color:#dce6f1; padding:55px 0 30px; }
    .footer-grid { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:50px; }
    footer h4 { color:#fff; margin:0 0 20px; }
    footer p, footer li { color:#b9c6d6; line-height:1.8; }
    footer ul { list-style:none; padding:0; margin:0; }
    .social { display:flex; gap:14px; margin-top:22px; }
    .social span { width:34px; height:34px; border:1px solid rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; }
    .legal { border-top:1px solid rgba(255,255,255,.14); margin-top:45px; padding-top:24px; display:flex; gap:34px; color:#aebbd0; font-size:14px; }
    @media (max-width:900px) {
      .menu { display:none; } h1 { font-size:44px; } .hero { padding-top:48px; } .badge { display:none; }
      .products,.features,.grid,.footer-grid,.cta-inner { grid-template-columns:1fr; } .search { grid-template-columns:1fr; } .services { grid-template-columns:1fr; }
      .news-item { grid-template-columns:110px 1fr; } .news-item > span { display:none; }
    }