:root { --creendo-purple: #333a9e; --creendo-blue: #3d72c2; --creendo-cyan: #43d3de; --creendo-dark: #27254d; } body { font-family: 'Montserrat', Arial, sans-serif; color: #373737; background: var(--bs-body-bg); } .navbar { background: var(--bs-body-bg); } /* Dark-Mode-Umschalter (gleiches Muster wie auf 2mstudio.de: data-bs-theme auf , zwei uebereinanderliegende Icons, per CSS je nach Theme ein-/ausgeblendet) */ .theme-toggle { border: none; background: transparent; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-body-color); font-size: 1.15rem; } .theme-toggle:hover { background: rgba(51, 58, 158, 0.08); } .theme-toggle__icon-light { display: none; } [data-bs-theme="dark"] .theme-toggle__icon-dark { display: none; } [data-bs-theme="dark"] .theme-toggle__icon-light { display: inline; } /* Dark-Mode-Feinschliff fuer eigene Komponenten (Bootstrap-eigene passen sich ueber data-bs-theme automatisch an, unsere Custom-Klassen brauchen ein paar explizite Overrides) */ [data-bs-theme="dark"] body { color: #d4d6db; } [data-bs-theme="dark"] .service-card { background: #1b1d22; border-color: #2a2d33; } [data-bs-theme="dark"] .service-card p { color: #9296a1; } [data-bs-theme="dark"] footer.site-footer { background: #1b1d22; color: #9296a1; } [data-bs-theme="dark"] footer.site-footer a { color: #9296a1; } [data-bs-theme="dark"] footer.site-footer a:hover { color: var(--creendo-cyan); } [data-bs-theme="dark"] .legal p, [data-bs-theme="dark"] .legal address, [data-bs-theme="dark"] .legal ul { color: #c2c4ca; } [data-bs-theme="dark"] .archive-widget { background: #1b1d22; border-color: #2a2d33; } [data-bs-theme="dark"] .archive-widget ul a { color: #c2c4ca; } [data-bs-theme="dark"] .archive-widget ul a:hover { color: var(--creendo-cyan); } [data-bs-theme="dark"] .tag-pill { background: #202329; color: #c2c4ca; } h1, h2, h3, h4, .navbar-brand { font-weight: 800; letter-spacing: -0.01em; } a { text-decoration: none; } /* ---- Wiederverwendbarer Verlauf + Partikel-Hintergrund (dieselbe Technik wie auf der neuen "under construction"-Seite: Verlauf + Punkte/Linien aus db-ip.com nachgebaut) ---- */ .creendo-glow { position: relative; overflow: hidden; background: linear-gradient(to top right, var(--creendo-purple) 0%, var(--creendo-blue) 55%, var(--creendo-cyan) 100%); color: #fff; } .creendo-glow canvas.creendo-particles { position: absolute; inset: 0; display: block; } .creendo-glow .creendo-glow-content { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .creendo-glow canvas.creendo-particles { display: none; } } /* Hero */ .hero { padding: 7rem 0 6rem; text-align: center; } .hero .badge-soft { display: inline-block; padding: 6px 18px; margin-bottom: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } .hero h1 { font-size: clamp(32px, 5.5vw, 58px); line-height: 1.2; margin-bottom: 1rem; } .hero h1 .accent { color: var(--creendo-cyan); } .hero p.lead { color: rgba(255, 255, 255, 0.82); font-size: clamp(15px, 1.6vw, 19px); max-width: 640px; margin: 0 auto 2rem; } .hero .btn-glow { background: #fff; color: var(--creendo-dark); font-weight: 700; padding: 0.7rem 1.8rem; border-radius: 999px; border: none; } .hero .btn-glow:hover { background: var(--creendo-cyan); color: #fff; } /* Leistungen */ .services { padding: 5.5rem 0; } .service-card { height: 100%; padding: 2rem 1.6rem; border-radius: 18px; background: #f7f8fc; border: 1px solid #ecedf5; transition: transform .18s ease, box-shadow .18s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(51, 58, 158, 0.12); } .service-card .icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, var(--creendo-purple), var(--creendo-cyan)); color: #fff; font-size: 1.4rem; margin-bottom: 1.1rem; } .service-card h3 { font-size: 1.15rem; margin-bottom: .6rem; } .service-card p { color: #6b6e78; margin: 0; font-size: .95rem; } /* Über uns */ .about { padding: 5.5rem 0; } .about p.lead-text { font-weight: 600; font-size: 1.1rem; color: var(--creendo-purple); margin-bottom: 1.1rem; } .about p { color: #444; } .checklist-title { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: #6b6e78; margin-bottom: 1.25rem; } .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #ecedf5; } .checklist li:last-child { border-bottom: none; } .checklist li i { color: var(--creendo-cyan); font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; } .checklist li strong { display: block; margin-bottom: 2px; } .checklist li span { color: #6b6e78; font-size: .92rem; } [data-bs-theme="dark"] .about p { color: #c2c4ca; } [data-bs-theme="dark"] .about p.lead-text { color: var(--creendo-cyan); } [data-bs-theme="dark"] .checklist li { border-bottom-color: #2a2d33; } [data-bs-theme="dark"] .checklist li span { color: #9296a1; } [data-bs-theme="dark"] .checklist-title { color: #9296a1; } /* CTA-Band */ .cta-band { padding: 4.5rem 0; text-align: center; } .cta-band h2 { font-size: clamp(24px, 3.5vw, 34px); margin-bottom: .75rem; } .cta-band p.lead { color: rgba(255,255,255,.82); margin-bottom: 1.75rem; } /* Footer */ footer.site-footer { padding: 2.5rem 0; background: #f7f8fc; color: #6b6e78; font-size: .9rem; } footer.site-footer a { color: #6b6e78; } footer.site-footer a:hover { color: var(--creendo-purple); } /* Archiv-Seite: Jahres-Sprungnav */ .year-nav { padding: 1.25rem 0; background: #f7f8fc; border-bottom: 1px solid #ecedf5; position: sticky; top: 62px; z-index: 5; } .year-pill { padding: 4px 14px; border-radius: 999px; background: #fff; border: 1px solid #ecedf5; color: #373737; font-weight: 600; font-size: .85rem; } .year-pill:hover { background: var(--creendo-purple); color: #fff; border-color: var(--creendo-purple); } [data-bs-theme="dark"] .year-nav { background: #1b1d22; border-bottom-color: #2a2d33; } [data-bs-theme="dark"] .year-pill { background: #16181c; border-color: #2a2d33; color: #d4d6db; } /* Archiv-Seite: Timeline (Beitrag links, Datum als Ankerpunkt rechts mit verbindender Linie — auf Wunsch analog zu einer klassischen Firmen- Chronik-Timeline, aber mit den Datumsmarken rechts statt links/mittig) */ .timeline-item { display: grid; grid-template-columns: 1fr 150px; grid-template-areas: "content date"; gap: 1.5rem; margin-bottom: 2.5rem; } .timeline-item:last-child { margin-bottom: 0; } .timeline-content { grid-area: content; } .timeline-date { grid-area: date; position: relative; padding: .6rem 0 .6rem 26px; color: #6b6e78; font-size: .85rem; font-weight: 700; text-decoration: none; scroll-margin-top: 130px; } .timeline-date:hover { color: var(--creendo-purple); } .timeline-date::before { content: ''; position: absolute; left: 5px; top: 0; bottom: -2.5rem; width: 2px; background: #ecedf5; } .timeline-item:last-child .timeline-date::before { display: none; } .timeline-dot { position: absolute; left: 0; top: .8rem; width: 12px; height: 12px; border-radius: 50%; background: var(--creendo-purple); border: 2px solid #fff; box-shadow: 0 0 0 2px #ecedf5; } .timeline-content h2 { font-size: 1.2rem; margin-bottom: .75rem; } .timeline-img { max-width: 220px; width: 100%; height: auto; border-radius: 12px; float: right; margin: 0 0 .75rem 1.25rem; border: 1px solid #ecedf5; } .timeline-text { color: #444; } .timeline-text p { margin-bottom: .8rem; } .timeline-text a { color: var(--creendo-purple); text-decoration: underline; } .timeline-text::after { content: ''; display: block; clear: both; } @media (max-width: 767px) { .timeline-item { grid-template-columns: 1fr; grid-template-areas: "date" "content"; gap: .5rem; } .timeline-date::before { display: none; } .timeline-img { float: none; max-width: 100%; margin: 0 0 .75rem; } } [data-bs-theme="dark"] .timeline-date { color: #9296a1; } [data-bs-theme="dark"] .timeline-date:hover { color: var(--creendo-cyan); } [data-bs-theme="dark"] .timeline-date::before { background: #2a2d33; } [data-bs-theme="dark"] .timeline-dot { box-shadow: 0 0 0 2px #16181c; } [data-bs-theme="dark"] .timeline-text { color: #c2c4ca; } [data-bs-theme="dark"] .timeline-text a { color: var(--creendo-cyan); } [data-bs-theme="dark"] .timeline-img { border-color: #2a2d33; } /* Archiv-Seite: Sidebar-Widgets (Kategorien/Blogroll/Cloud) */ .archive-widget { padding: 1.5rem; border-radius: 16px; background: #f7f8fc; border: 1px solid #ecedf5; margin-bottom: 1.5rem; } .archive-widget h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; color: var(--creendo-purple); } .archive-widget ul { list-style: none; padding: 0; margin: 0; } .archive-widget ul li { margin-bottom: .5rem; } .archive-widget ul a { color: #373737; } .archive-widget ul a:hover { color: var(--creendo-purple); } .tag-pill { display: inline-block; padding: 4px 12px; margin: 0 6px 6px 0; border-radius: 999px; background: #ecedf5; color: #373737; font-size: .82rem; } .tag-pill:hover { background: var(--creendo-purple); color: #fff; } /* Legal pages */ .legal h1.headline { font-weight: 800; margin-bottom: 1.5rem; } .legal h2.subheadline, .legal h3.subheadline, .legal h4.subheadline { font-weight: 700; margin-top: 1.4rem; margin-bottom: .5rem; } .legal p, .legal address, .legal ul { color: #444; }