/* ============================================================ MörsbergerIT — Theme-Overlay (Stage). Lädt NACH den Alt-Styles und zieht alle Seiten auf das neue Design um: Geist/Inter, Navy/Teal-Palette, ruhige Karten, klare Buttons. Eine Datei für alle ~150 Seiten — Änderungen nur hier. ============================================================ */ @font-face{font-family:'Geist';src:url('/assets/fonts/geist.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/assets/fonts/inter.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} :root{ --primary-color:#226f80; /* alte Variable -> neue Palette */ --secondary-color:#f6f8f9; --dark-color:#0d1a1f; --navy:#0c1a20; --teal:#2d8fa3; --teal-700:#226f80; --teal-100:#e3eff2; --ink:#0d1a1f; --slate:#4e6167; --muted:#5a7076; --line:rgba(13,26,31,.10); --shadow-sm:0 1px 2px rgba(12,26,32,.05),0 2px 8px rgba(12,26,32,.04); } body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif!important; color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.section-title,.logo,.calc-hero h1{ font-family:'Geist','Inter',system-ui,sans-serif!important; font-weight:650;letter-spacing:-.022em;line-height:1.14;color:var(--ink)} h1{font-weight:600} p,li{color:var(--slate)} a{color:var(--teal-700)} /* Kopfzeile */ .header{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(12px); border-bottom:1px solid var(--line);box-shadow:none!important} .nav-link{color:var(--slate)!important;font-weight:450;font-size:.94rem} .nav-link:hover{color:var(--ink)!important} .contact-btn{background:var(--navy)!important;color:#fff!important;border-radius:8px!important; font-weight:550!important;border:none!important;transition:background .18s} .contact-btn:hover{background:#16323c!important} /* Buttons */ .btn,button[type=submit],.wa-btn,.lead-bar-call,.lead-bar-wa{ border-radius:8px!important;font-weight:550!important; transition:background .18s,border-color .18s} .btn{background:var(--teal-700)!important;color:#fff!important;border:1px solid transparent!important} .btn:hover{filter:brightness(1.1);transform:none!important} /* Sektionen & Karten */ .section-title{font-size:clamp(1.7rem,2.9vw,2.3rem)} .section-subtitle{color:var(--slate)} .card,.tool-card,.feature-card,.price-card,[class*="-card"]{ border-radius:12px!important;border:1px solid var(--line)!important; box-shadow:var(--shadow-sm)!important;transition:border-color .2s} .card:hover,.tool-card:hover,[class*="-card"]:hover{border-color:var(--teal)!important; transform:none!important;box-shadow:var(--shadow-sm)!important} /* Tool-Seiten (calc-hero) */ .calc-hero{background:var(--navy)!important;border-radius:12px;color:#e8f0f2} .calc-hero h1{color:#fff!important} .calc-hero .lede,.calc-hero p{color:#adc6cc!important} .calc-hero .eyebrow{color:#5fb6c9!important;text-transform:uppercase; letter-spacing:.09em;font-size:.78rem;font-weight:600} /* Lead-Bar & Footer */ .lead-bar{background:var(--navy)!important;border:none!important} .footer{background:var(--navy)!important;color:#adc6cc!important} .footer a{color:#dbe9ec!important} .footer a:hover{color:#5fb6c9!important} .footer h4,.footer .footer-col h4{color:#8fa9b0!important;text-transform:uppercase; letter-spacing:.09em;font-size:.77rem;font-weight:600} /* Bilder & Feinheiten */ img{border-radius:8px} .header img,.footer img,svg img{border-radius:0} ::selection{background:var(--teal-100);color:var(--navy)} :focus-visible{outline:2px solid var(--teal);outline-offset:3px} /* Feinschliff nach Sichtprüfung */ .calc-hero{padding:38px 42px!important;margin-bottom:26px} .tool-meta{margin-top:14px} .wa-btn,.lead-bar-wa{background:#1da851!important;border:none!important} /* WhatsApp: gedecktes Grün statt Neon */ .breadcrumb a,.breadcrumbs a{color:var(--slate)} article img,.blog-content img{border:1px solid var(--line)} /* ---- Rollout-Feinschliff Runde 2 ---- */ /* Blog-Titelbilder: bändigen statt Vollbild (Inline-Styles überstimmen) */ img[src*="bilderBlog"]{max-height:340px!important;width:100%!important; object-fit:cover;object-position:center 30%} /* Landingpages: eigener Inline-Hero (.lp-hero) auf die neue Palette */ .lp-hero{background:var(--navy)!important;border-radius:12px!important} .lp-hero h1{font-weight:600!important;letter-spacing:-.022em!important} .lp-hero .lede{color:#adc6cc!important} /* Emoji-Badges (tools.html): Icene ausblenden, Text bleibt */ .feature-icon{display:none!important} .feature-badge,.hero-feature{border-radius:8px!important} /* Logo: definierte Größe, keine Radius-Verfremdung */ .logo img{height:40px!important;width:auto!important;border-radius:0!important} .lp-cta-primary{background:var(--teal-700)!important;border-radius:8px!important; font-weight:550!important;border:none!important} .lp-cta-primary:hover{filter:brightness(1.1)} .lp-cta-secondary{background:transparent!important;border:1px solid rgba(255,255,255,.28)!important; border-radius:8px!important;color:#dbe9ec!important;font-weight:550!important} .lp-trust strong{font-family:'Geist',sans-serif;font-weight:600} /* Kopfzeile: identische Optik wie die neue Startseite */ .brand-neu{display:flex;align-items:center;gap:10px;font-family:'Geist','Inter',sans-serif; font-weight:650;font-size:1.06rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none} .brand-neu .mark{width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff; display:grid;place-items:center;font-size:.85rem;font-weight:600} .nav-tel{font-weight:550;font-size:.94rem;color:var(--ink)!important} .contact-btn{padding:.72em 1.3em!important} @media(max-width:940px){.nav-tel{display:none}} .nav-tel{text-decoration:none!important} /* ============================================================ Tiefen-Umbau: Blog, Artikel, Tool-Seiten ============================================================ */ /* --- Artikel: ruhige Lese-Typografie --- */ .content-section .container,article.content-section{max-width:780px!important} .content-section h1{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.12;margin:18px 0 10px} .content-section h2{font-size:1.45rem;margin:2.2em 0 .6em;padding-top:.4em;border-top:1px solid var(--line)} .content-section h3{font-size:1.15rem;margin:1.6em 0 .5em} .content-section p,.content-section li{font-size:1.02rem;line-height:1.75;color:var(--slate)} .content-section strong{color:var(--ink)} .content-section a{text-decoration:underline;text-underline-offset:3px} .callout-box{background:var(--teal-100)!important;border:none!important; border-left:3px solid var(--teal)!important;border-radius:0 10px 10px 0!important;padding:18px 22px!important} /* --- Blog-Übersicht & Tool-Teaser: klares Kartenraster --- */ .article-teaser{border:1px solid var(--line)!important;border-radius:12px!important; background:var(--paper)!important;box-shadow:none!important;padding:26px!important; transition:border-color .2s!important;transform:none!important} .article-teaser:hover{border-color:var(--teal)!important;transform:none!important;box-shadow:var(--shadow-sm)!important} .article-teaser h2,.article-teaser h3{font-size:1.12rem!important;line-height:1.3} .article-teaser img{max-height:170px;object-fit:cover;width:100%;margin-bottom:14px} .teaser-content p{font-size:.95rem;line-height:1.6} .teaser-header-badge{background:var(--teal-100)!important;color:var(--teal-700)!important; border:none!important;border-radius:6px!important;font-size:.72rem!important; font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px!important} /* --- Tools-Hero: Navy-Karte statt Verlaufsband --- */ .tools-hero{background:var(--navy)!important;border-radius:12px;margin:20px auto 30px; max-width:1140px;padding:46px 42px!important;text-align:left!important} .tools-hero h1{color:#fff!important;font-weight:600} .tools-hero p{color:#adc6cc!important;max-width:60ch;margin-left:0!important} .hero-features{justify-content:flex-start!important;gap:10px!important;margin-top:18px} .hero-feature{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.15)!important; border-radius:6px!important;color:#cfe4e9!important;font-size:.84rem!important; font-weight:500!important;padding:6px 12px!important;box-shadow:none!important} /* --- Formulare (Rechner/Tools): einheitliche Eingaben --- */ input[type=text],input[type=number],input[type=email],select,textarea{ border:1px solid var(--line)!important;border-radius:8px!important; font-family:inherit!important;color:var(--ink)!important;background:var(--paper)!important; transition:border-color .15s!important;box-shadow:none!important} input:focus,select:focus,textarea:focus{border-color:var(--teal)!important; outline:2px solid var(--teal-100)!important} label{color:var(--ink);font-weight:550;font-size:.92rem} .button-group .btn,.button-group button{border-radius:8px!important} /* Breadcrumbs & Meta ruhiger */ .tool-meta,.breadcrumb,.breadcrumbs{color:var(--muted);font-size:.86rem} /* ============================================================ Schrift-Gleichschaltung: EXAKT wie die Hauptseite, überall. Alte Font-Variablen (FKGroteskNeue etc.) werden gekapert und jede direkte font-family-Zuweisung überstimmt. Keine Icon- Fonts im Projekt — der Universal-Override ist daher sicher. ============================================================ */ :root{ --font-family-base:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --font-family-mono:ui-monospace,'SF Mono',Menlo,monospace; } *,*::before,*::after{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif!important} code,pre,kbd,samp,code *,pre *{font-family:var(--font-family-mono)!important} h1,h2,h3,h4,h5,h6,.section-title,.logo,.brand-neu,.num, .calc-hero h1,.tools-hero h1,.lp-hero h1,.article-teaser h2,.article-teaser h3{ font-family:'Geist','Inter',system-ui,sans-serif!important} /* Kopfzeile: exakte Maße der Hauptseite (84px, 1140px, sticky) */ .header{position:sticky!important;top:0} .header .container{max-width:1140px!important;padding:20px 28px!important} body{padding-top:0!important} /* fixed-Header-Ausgleich der Alt-CSS neutralisieren */ /* Alte Teal-CTA-Flächen (ueber-mich, Artikel, Index-Altbestand) -> Navy */ .cta-section{background:var(--navy)!important;border-radius:12px!important} .cta-section h2,.cta-section h3{color:#fff!important;border:none!important} .cta-section p{color:#adc6cc!important} .cta-section a:not(.btn){color:#5fb6c9!important} .cta-section .btn,.cta-section a.button{background:#fff!important;color:var(--navy)!important} .highlight-box{background:var(--cloud)!important;border-left:3px solid var(--teal)!important; border-radius:0 10px 10px 0!important} .lp-service-icon{display:none!important} .lp-service h3{margin-top:0!important} /* Zielgruppen-/Kontaktblöcke: Grün-Verlauf -> Navy, Buttons sichtbar */ .lp-contact-box{background:var(--navy)!important;border-radius:12px!important} .lp-contact-box h2,.lp-contact-box h3{color:#fff!important} .lp-contact-box p{color:#adc6cc!important} .lp-contact-btn{background:#fff!important;color:var(--navy)!important; border-radius:8px!important;font-weight:600!important;border:none!important} .lp-price-box{border-color:var(--line)!important} .lp-price-value{color:var(--teal-700)!important} /* ============================================================ Fremdfarben-Sanierung: Inline-Verläufe (Grün + Alt-Blau) über Attribut-Selektoren einfangen — greift überall, auch in Tools. Semantik-Farben (rot=Warnung, orange=Hinweis) bleiben bewusst. ============================================================ */ [style*="linear-gradient"][style*="065f46"], [style*="linear-gradient"][style*="16a34a"], [style*="linear-gradient"][style*="0c3a4a"], [style*="linear-gradient"][style*="154b5d"], [style*="linear-gradient"][style*="1d6fb8"], [style*="linear-gradient"][style*="2d8fa3"]{ background:var(--navy)!important;color:#dbe9ec} [style*="linear-gradient"][style*="065f46"] h1,[style*="linear-gradient"][style*="065f46"] h2, [style*="linear-gradient"][style*="065f46"] h3,[style*="linear-gradient"][style*="0c3a4a"] h1, [style*="linear-gradient"][style*="0c3a4a"] h2,[style*="linear-gradient"][style*="2d8fa3"] h2{ color:#fff!important} /* Inline-Textfarben in Alt-Grün/Alt-Blau -> Teal */ [style*="color:#16a34a"],[style*="color: #16a34a"], [style*="color:#065f46"],[style*="color: #065f46"], [style*="color:#1d6fb8"],[style*="color: #1d6fb8"]{color:var(--teal-700)!important} /* Weiße Buttons auf dunklen Inline-Flächen sichtbar halten */ [style*="linear-gradient"] a[style*="background"][style*="fff"]{color:var(--navy)!important} /* Tool-Heros (.hero der Alt-Tools): dunkle Karte, lesbare Schrift */ .hero{background:var(--navy)!important} .hero h1,.hero h2{color:#fff!important} .hero p,.hero .subtitle,.hero li{color:#adc6cc!important} .hero .btn,.hero-buttons a{border-radius:8px!important} /* Border-Color-Fehlgriff neutralisieren */ [style*="border-color:#16a34a"]{color:inherit} /* Royalblau-Variante (#1e40af) der Website-Entwicklung -> Navy */ [style*="linear-gradient"][style*="1e40af"]{background:var(--navy)!important} [style*="linear-gradient"][style*="1e40af"] h1{color:#fff!important} /* Telefon-Link auf dunklen Heroflächen immer lesbar */ [style*="linear-gradient"] a[href^="tel:"]{color:#fff!important;font-weight:600} /* website-entwicklung: eigener