/* ============================================================ meine-nebenkosten – gemeinsames Stylesheet aller Seiten Farb- und Typo-Token unverändert aus CI-Briefing 1.2, Abschnitt 2.2 / 3.3 Enthält den kompletten Seitenrahmen (Token, Basis, Header, Navigation, Footer, Cookie-Banner) sowie die Bausteine der Startseite. Jede Regel steht genau einmal; Abweichungen einzelner Seiten werden über eine Klasse am gesteuert (z. B. body.mn-seite--rechner). Der Preisrechner-Block bleibt bewusst getrennt in assets/css/preisrechner.css – er ist vollständig gekapselt und soll zusammen mit seinem Markup 1:1 übertragbar bleiben. ============================================================ */ :root{ --mn-petrol:#0F4353; --mn-petrol-dark:#0A2F3A; --mn-petrol-500:#3F6975; --mn-petrol-100:#DBE3E5; --mn-gruen:#86B152; --mn-gruen-text:#5E7C39; --mn-gruen-050:#E1ECD4; --mn-sand:#FAF7F2; --mn-flaeche:#F4F6F5; --mn-linie:#D8DEE1; --mn-text:#1A1A1A; --mn-text-sek:#6B7280; --mn-text-sek-dark:#4B5563; --mn-warn:#B45309; --mn-fehler:#A3251E; --mn-radius:6px; --mn-font: system-ui, -apple-system, "Segoe UI", Carlito, Calibri, Roboto, "Helvetica Neue", Arial, sans-serif; --mn-rand:clamp(20px, 5vw, 96px); /* Seitenrand wächst mit der Bildschirmbreite, mobil 20px */ --mn-breite:1920px; /* Inhalt nutzt die Breite, Grenze erst bei sehr breiten Monitoren */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--mn-font); font-size:17px; line-height:1.6; color:var(--mn-text); background:#fff; } img,svg{max-width:100%} h1,h2,h3{margin:0 0 12px;color:var(--mn-petrol);line-height:1.25} h1{font-size:40px;line-height:1.15;letter-spacing:-0.01em} h2{font-size:28px} h3{font-size:20px;line-height:1.3} p{margin:0 0 16px} a{color:var(--mn-petrol)} :focus-visible{outline:2px solid var(--mn-petrol);outline-offset:2px} .section--petrol :focus-visible{outline-color:#fff} .skip{ position:absolute;left:-9999px;top:0;background:#fff;color:var(--mn-petrol); padding:12px 16px;z-index:100;border-radius:0 0 var(--mn-radius) 0;font-weight:600; } .skip:focus{left: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; } /* ---------- Raster ---------- */ .wrap{max-width:var(--mn-breite);margin:0 auto;padding:0 var(--mn-rand)} .section{padding:56px 0;background:#fff} .section--sand{background:var(--mn-sand)} .section--flaeche{background:var(--mn-flaeche)} .section--petrol{background:var(--mn-petrol);color:#fff} .section--petrol h2,.section--petrol h3{color:#fff} .section__kopf{max-width:34em;margin-bottom:32px} .section__kopf p{color:var(--mn-text-sek-dark);margin:0} .section--petrol .section__kopf p{color:var(--mn-petrol-100)} .eyebrow{ display:block;font-size:14px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--mn-text-sek-dark);margin-bottom:8px; } .section--petrol .eyebrow{color:var(--mn-petrol-100)} /* ---------- Akzentbalken (Wiedererkennungselement) ---------- */ .mn-balken{display:flex;height:6px;width:100%} .mn-balken span:first-child{width:17%;background:var(--mn-gruen)} .mn-balken span:last-child{width:83%;background:var(--mn-petrol)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:14px 24px;border-radius:var(--mn-radius); font-family:inherit;font-size:17px;font-weight:600;line-height:1.2; text-decoration:none;border:1.5px solid transparent;cursor:pointer; } .btn--primary{background:var(--mn-petrol);color:#fff} .btn--primary:hover{background:var(--mn-petrol-dark)} .btn--sek{background:transparent;color:var(--mn-petrol);border-color:var(--mn-petrol)} .btn--sek:hover{background:var(--mn-petrol-100)} .section--petrol .btn--primary{background:#fff;color:var(--mn-petrol)} .section--petrol .btn--primary:hover{background:var(--mn-petrol-100)} .section--petrol .btn--sek{color:#fff;border-color:#fff} .section--petrol .btn--sek:hover{background:var(--mn-petrol-dark)} .btn-gruppe{display:flex;flex-direction:column;gap:12px;margin-top:24px} .btn-gruppe .btn{width:100%} /* ---------- Liste mit grünem Quadrat ---------- */ .mn-liste{list-style:none;margin:0;padding:0 0 0 18px} .mn-liste li{position:relative;margin-bottom:8px} .mn-liste li::before{ content:"";position:absolute;left:-16px;top:.6em; width:7px;height:7px;background:var(--mn-gruen); } .mn-liste--inline{display:flex;flex-direction:column;gap:4px; font-size:15px;color:var(--mn-text-sek-dark)} .section--petrol .mn-liste--inline{color:var(--mn-petrol-100)} /* ---------- Karte ---------- */ .karte{ background:#fff;border:1px solid var(--mn-linie); border-radius:var(--mn-radius);padding:24px; } .karte h3{margin-bottom:8px} .karte p:last-child{margin-bottom:0} .raster{display:grid;gap:16px} /* ---------- Header ---------- */ .header{background:#fff;position:sticky;top:0;z-index:50} .header__inner{ display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:72px; } .logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo svg{display:block;height:40px;width:auto} .logo__wort{font-size:18px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap} .logo__wort .a{color:var(--mn-petrol)} .logo__wort .b{color:var(--mn-gruen-text)} .burger{ width:48px;height:48px;display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--mn-linie);border-radius:var(--mn-radius); cursor:pointer;color:var(--mn-petrol); } .nav{display:none;padding:8px 0 20px;border-top:1px solid var(--mn-linie)} .nav[data-offen="true"]{display:block} .no-js .nav{display:block} .nav ul{list-style:none;margin:0 0 12px;padding:0} /* Link-Regeln nur für die Menüpunkte (.nav ul a), nicht für den Button – sonst überschreiben sie Farbe, Zentrierung und Innenabstand von .btn */ .nav ul a{ display:block;padding:12px 0;min-height:44px; text-decoration:none;color:var(--mn-text);font-weight:600; } .nav ul a:hover{color:var(--mn-petrol)} .nav ul a[aria-current="page"]{color:var(--mn-petrol)} .nav .btn{width:100%} /* ---------- Hero ---------- */ .hero{padding:40px 0 56px} .hero h1{margin-bottom:16px} .hero__sub{font-size:19px;color:var(--mn-petrol);font-weight:600;margin-bottom:12px} .hero__text{color:var(--mn-text-sek-dark);max-width:32em} .hero__trust{margin:24px 0 32px} /* Stilisierte Abrechnung (Hero-Visual) */ .beleg{ border:1px solid var(--mn-linie);border-radius:var(--mn-radius); background:#fff;overflow:hidden;max-width:420px; } .beleg__kopf{padding:20px 20px 16px} .beleg__titel{font-weight:700;color:var(--mn-petrol);font-size:16px} .beleg__meta{font-size:14px;color:var(--mn-text-sek);margin-top:2px} .beleg__zeile{ display:flex;justify-content:space-between;gap:16px; padding:11px 20px;border-top:1px solid var(--mn-linie);font-size:15px; } .beleg__zeile span:last-child{font-variant-numeric:tabular-nums;text-align:right} .beleg__zeile--summe{ border-top:2px solid var(--mn-petrol);font-weight:700;color:var(--mn-petrol); } .beleg__fuss{ display:flex;align-items:center;gap:8px;padding:14px 20px; border-top:1px solid var(--mn-linie);background:var(--mn-flaeche); font-size:14px;color:var(--mn-text-sek-dark); } .beleg__punkt{width:8px;height:8px;background:var(--mn-gruen);flex:0 0 auto} /* ---------- Problem / Lösung ---------- */ .problem{padding-bottom:4px} .problem h3{font-size:18px;margin-bottom:6px} .problem p{color:var(--mn-text-sek-dark);margin:0} .loesung{ margin-top:40px;padding-top:32px;border-top:1px solid var(--mn-linie); } .loesung__stark{ font-size:22px;font-weight:700;color:var(--mn-petrol); border-left:3px solid var(--mn-gruen);padding-left:16px;margin:0 0 16px; } /* ---------- Schritte ---------- */ .schritt{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--mn-linie)} .schritt:last-of-type{border-bottom:1px solid var(--mn-linie)} .schritt__nr{ flex:0 0 auto;font-size:15px;font-weight:700;color:var(--mn-petrol); width:36px;padding-top:2px;font-variant-numeric:tabular-nums; } .schritt h3{font-size:18px;margin-bottom:4px} .schritt p{margin:0;color:var(--mn-text-sek-dark)} .hinweis{ margin-top:24px;background:var(--mn-flaeche);border-left:3px solid var(--mn-gruen); padding:16px 20px;border-radius:0 var(--mn-radius) var(--mn-radius) 0; font-size:15px;color:var(--mn-text-sek-dark); } .hinweis strong{color:var(--mn-petrol)} .hinweis p{margin:0} .section--petrol .hinweis{ background:var(--mn-petrol-dark);color:var(--mn-petrol-100);border-left-color:var(--mn-gruen); } .section--petrol .hinweis strong{color:#fff} /* ---------- Vorteile ---------- */ .vorteil h3{font-size:18px;margin-bottom:6px} .vorteil p{margin:0;color:var(--mn-text-sek-dark)} .vorteil__icon{display:block;margin-bottom:10px;color:var(--mn-petrol)} .abgrenzung{ margin-top:40px;background:#fff;border:1px solid var(--mn-linie); border-left:3px solid var(--mn-gruen);border-radius:0 var(--mn-radius) var(--mn-radius) 0; padding:24px; } .abgrenzung h3{font-size:20px;margin-bottom:8px} .abgrenzung p{margin:0;color:var(--mn-text-sek-dark)} /* ---------- Preis ---------- */ .preis__trust{margin:24px 0 0} /* ---------- Gründer ---------- */ .portrait{ aspect-ratio:4/5;background:var(--mn-flaeche);border:1px solid var(--mn-linie); border-radius:var(--mn-radius);display:flex;align-items:center;justify-content:center; color:var(--mn-text-sek-dark);font-size:14px;text-align:center;padding:20px; margin-bottom:24px;max-width:340px; } .gruender__name{font-weight:700;color:var(--mn-petrol);margin:24px 0 0} .gruender__rolle{font-size:15px;color:var(--mn-text-sek-dark);margin:0 0 24px} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--mn-linie)} .faq details{border-bottom:1px solid var(--mn-linie)} .faq summary{ list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative; font-weight:600;color:var(--mn-petrol);min-height:44px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:26px;width:10px;height:10px; border-right:2px solid var(--mn-petrol);border-bottom:2px solid var(--mn-petrol); transform:rotate(45deg); } .faq details[open] summary::after{transform:rotate(-135deg);top:30px} .faq p{padding:0 0 20px;margin:0;color:var(--mn-text-sek-dark);max-width:60ch} /* ---------- Abschluss ---------- */ .claim-gross{ font-size:26px;font-weight:700;line-height:1.25; border-left:3px solid var(--mn-gruen);padding-left:16px;margin:24px 0 0; } /* ---------- Unterseiten-Einstieg (Preisrechner, Platzhalterseiten) ---------- */ .einstieg{padding:32px 0 8px} .einstieg p{color:var(--mn-text-sek-dark);max-width:34em} .einstieg__trust{font-size:15px;color:var(--mn-text-sek-dark);margin:0} .seite{padding-bottom:64px} /* ---------- Footer ---------- */ .footer{background:var(--mn-petrol-dark);color:var(--mn-petrol-100);padding:48px 0 32px} .footer a{color:var(--mn-petrol-100);text-decoration:none} .footer a:hover{color:#fff;text-decoration:underline} .footer :focus-visible{outline-color:#fff} .footer__marke{font-size:20px;font-weight:700;color:#fff;margin-bottom:8px} .footer__claim{font-size:15px;max-width:34em;margin-bottom:32px} .footer__raster{display:grid;gap:28px} .footer h3{font-size:15px;color:#fff;margin-bottom:10px; letter-spacing:.06em;text-transform:uppercase} /* auf .footer__raster eingegrenzt, damit die kompakte Footer-Variante (.footer__links, siehe unten) ihre eigenen Abstände behält */ .footer__raster ul{list-style:none;margin:0;padding:0;font-size:15px} .footer__raster li{margin-bottom:8px} .footer__recht{ margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18); font-size:14px; } /* ---------- Footer, kompakte Variante (Preisrechner) ---------- Aktiv über . Reine Rahmenvariante, keine inhaltliche Abweichung. */ .footer__links{ list-style:none;margin:0 0 20px;padding:0; display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px; } .footer__links a{text-decoration:none} .footer__links a:hover{color:#fff;text-decoration:underline} .mn-seite--rechner .footer{padding:40px 0 28px} .mn-seite--rechner .footer__marke{font-size:18px;margin-bottom:12px} .mn-seite--rechner .footer__recht{margin-top:0;padding-top:16px} /* ---------- Cookie-Consent-Banner (Namespace mn-consent) ---------- */ .footer__linkbtn{ background:none;border:0;padding:0;margin:0;cursor:pointer; font:inherit;color:var(--mn-petrol-100);text-decoration:none; } .footer__linkbtn:hover{color:#fff;text-decoration:underline} .mn-consent{ position:fixed;left:0;right:0;bottom:0;z-index:200; background:#fff;border-top:1px solid var(--mn-linie); padding:20px var(--mn-rand); } .mn-consent__inner{ max-width:var(--mn-breite);margin:0 auto; display:flex;flex-direction:column;gap:16px; } .mn-consent__text{margin:0;font-size:15px;color:var(--mn-text-sek-dark);max-width:70ch} .mn-consent__aktionen{display:flex;flex-direction:column;gap:10px} .mn-consent__aktionen .btn{width:100%;min-height:48px} @media (min-width:600px){ .mn-consent__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:24px} .mn-consent__aktionen{flex-direction:row} .mn-consent__aktionen .btn{width:auto} } /* ---------- Desktop ---------- */ @media (min-width:768px){ .section{padding:88px 0} h1{font-size:52px} h2{font-size:34px} .raster--2{grid-template-columns:1fr 1fr;gap:24px} .raster--4{grid-template-columns:1fr 1fr;gap:32px} .btn-gruppe{flex-direction:row;flex-wrap:wrap} .btn-gruppe .btn{width:auto} .hero{padding:64px 0 88px} .hero__inner{display:grid;grid-template-columns:55fr 45fr;gap:56px;align-items:center} .beleg{width:100%;max-width:520px;justify-self:end} .schritt__nr{width:48px;font-size:16px} .gruender__inner{display:grid;grid-template-columns:40fr 60fr;gap:56px;align-items:center} .portrait{margin-bottom:0;max-width:440px} .einstieg{padding:48px 0 8px} .seite{padding-bottom:96px} .footer__raster{grid-template-columns:repeat(4,1fr);gap:32px} } @media (min-width:1024px){ .raster--4{grid-template-columns:repeat(4,1fr)} .header__inner{min-height:80px} .burger{display:none} .nav{display:block;padding:0;border-top:0} .nav__inner{display:flex;align-items:center;gap:28px} .nav ul{display:flex;gap:24px;margin:0} .nav ul a{padding:8px 0;font-size:16px} .nav .btn{display:none} /* Desktop: kein Button in der Menüleiste – „Preis berechnen" steht direkt im Hero */ } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }