/* ========================================================================== Webseite 3.0 — Palo-IT-inspirierte Design-Ebene (PILOT) -------------------------------------------------------------------------- Wird ZUSÄTZLICH nach style.css geladen und greift nur auf Seiten mit . So bleibt der Rest der Website unverändert vergleichbar. Zielbild: https://www.palo-it.com/en/ Übernommene Prinzipien (mit DCG-Marke Limette/Petrol): • dunkle, kontraststarke Hero-/Kopfbereiche (Dark-Mode-Anmutung) • große, kräftige Display-Typografie mit starkem Gewichtssprung • alternierende Sektionen (hell/dunkel), viel Weißraum • randlose, bildbetonte Cards mit ruhigem Hover-Lift • klare CTA-Cluster, animierte Pfeile, dezente Scroll-Reveals ========================================================================== */ /* 0. Farb-Token: Hero-Hintergrund = dunkles Anthrazit (statt Fast-Schwarz/Ink) */ body.v3 { --v3-hero-bg: #2D3338; } /* 1. Display-Typografie — größer & kräftiger ----------------------------- */ body.v3 h1 { letter-spacing: -.035em; line-height: 1.03; } body.v3 h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.03em; line-height: 1.08; } body.v3 .hero h1 { font-size: clamp(2.8rem, 6.2vw, 4.7rem); font-weight: 800; } body.v3 .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; } body.v3 .eyebrow { font-size: .8rem; letter-spacing: .2em; } body.v3 .lead { font-size: 1.27rem; line-height: 1.6; } /* 2. Dunkler Hero (Startseite) — Palo-IT-Signatur ----------------------- */ body.v3 .hero { background: radial-gradient(1000px 620px at 86% -12%, rgba(201,213,9,.18), transparent 60%), radial-gradient(720px 520px at -6% 112%, rgba(0,172,173,.16), transparent 55%), var(--v3-hero-bg); } body.v3 .hero h1, body.v3 .hero h1 .hl { color: #fff; } body.v3 .hero .lead { color: #C9CDD3; } body.v3 .hero .eyebrow { color: var(--dcg-lime); } body.v3 .hero .hero-trust { color: #9AA0A8; } body.v3 .hero .hero-trust span::before { color: var(--dcg-lime); } body.v3 .hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); } body.v3 .hero .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); } body.v3 .hero-visual { filter: drop-shadow(0 26px 55px rgba(0,0,0,.45)); } /* 3. Dunkle Page-Heroes (Innenseiten) ----------------------------------- */ body.v3 .page-hero { background: radial-gradient(820px 440px at 90% -20%, rgba(201,213,9,.17), transparent 60%), radial-gradient(600px 400px at 0% 120%, rgba(0,172,173,.12), transparent 55%), var(--v3-hero-bg); } body.v3 .page-hero h1 { color: #fff; } body.v3 .page-hero .lead { color: #C9CDD3; } body.v3 .page-hero .eyebrow { color: var(--dcg-lime); } body.v3 .page-hero .crumbs, body.v3 .page-hero .crumbs a { color: #8A9099; } body.v3 .page-hero .crumbs a:hover { color: var(--dcg-lime); } body.v3 .page-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); } body.v3 .page-hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); } /* 4. Sektions-Rhythmus — mehr Luft -------------------------------------- */ body.v3 .section { padding-block: clamp(82px, 9.5vw, 160px); } body.v3 .sec-head { margin-bottom: clamp(44px, 6vw, 68px); } /* 5. Cards — randlos, weicher Schatten, kräftigerer Hover --------------- */ body.v3 .card { border-color: transparent; border-radius: 20px; box-shadow: var(--shadow-sm); } body.v3 .card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(28,32,36,.14); } body.v3 .card .ico { border-radius: 16px; } body.v3 .pillar { border-radius: 22px; } /* 6. Buttons — größer, klarer, Pfeil mit Schwung ----------------------- */ body.v3 .btn { padding: .98em 1.7em; font-size: 1.02rem; border-radius: 999px; } body.v3 .btn--primary { box-shadow: 0 10px 26px rgba(201,213,9,.30); } body.v3 .btn--primary:hover { box-shadow: 0 16px 34px rgba(201,213,9,.38); } body.v3 .textlink::after { transition: transform .25s var(--ease); } body.v3 .textlink:hover::after { transform: translateX(6px); } /* 7. Prozess-Steps — größere Nummern (Palo-IT „big numbers") ----------- */ body.v3 .steps .step .n { width: 56px; height: 56px; font-size: 1.2rem; } /* 8. Ruhige Reveal-Animation mit etwas mehr Slide ---------------------- */ body.v3 .reveal { transform: translateY(34px); } @media (prefers-reduced-motion: reduce) { body.v3 .reveal { transform: none; } } /* 9. Sticky-Header — feiner Blur beim Scrollen ------------------------- */ body.v3 .site-header.is-scrolled { background: rgba(255,255,255,.85); -webkit-backdrop-filter: saturate(150%) blur(9px); backdrop-filter: saturate(150%) blur(9px); } /* 10. Kennzahlen-Band & Logo-Marquee etwas markanter ------------------- */ body.v3 .stat .num em { color: var(--dcg-lime-dark); } body.v3 .logo-marquee { padding-block: 6px; } /* 11. Kontakt-/CTA-Band: stärkerer Glow -------------------------------- */ body.v3 .cta-band::after { width: 380px; height: 380px; } /* 12. Echtes Drescher-Consulting-Logo ---------------------------------- */ /* Header weiß (sonst stünde das graue Logo kontrastarm auf dem Anthrazit-Hero) */ body.v3 .site-header { background: #fff; box-shadow: var(--shadow-sm); } .brand { align-items: center; gap: 0; } .brand-logo { height: 40px; width: auto; display: block; } .site-header .brand-logo { height: 38px; } /* Footer ist dunkel -> Logo in Weiß (monochrom) */ .site-footer .brand-logo { height: 44px; filter: brightness(0) invert(1); opacity: .9; } @media (max-width: 760px) { .site-header .brand-logo { height: 32px; } } /* 13. Termin-Buchung (Microsoft Bookings) ------------------------------ */ /* „Termin buchen"-Button je Ansprechpartner */ .cp-links .btn-book { margin-top: .55rem; display: inline-flex; align-items: center; gap: .5em; background: var(--dcg-lime); color: var(--dcg-ink); font-family: var(--font-head); font-weight: 700; font-size: .92rem; padding: .62em 1.15em; border-radius: 999px; transition: all .2s var(--ease); } .cp-links .btn-book:hover { background: var(--dcg-lime-dark); color: var(--dcg-ink); transform: translateY(-1px); } .cp-links .btn-book svg { width: 16px; height: 16px; } /* Eingebetteter Buchungskalender (Kontaktseite) */ .booking-embed-wrap { border: 1px solid var(--dcg-line); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); } .booking-embed { display: block; width: 100%; height: 700px; border: 0; } .booking-placeholder { padding: clamp(40px, 7vw, 76px) 28px; text-align: center; max-width: 640px; margin-inline: auto; } .booking-placeholder .bk-ico { width: 74px; height: 74px; border-radius: 18px; background: var(--dcg-lime-soft); color: var(--dcg-lime-dark); display: grid; place-items: center; margin: 0 auto 22px; } .booking-placeholder .bk-ico svg { width: 36px; height: 36px; } .booking-placeholder h3 { font-size: 1.45rem; margin-bottom: .5rem; } .booking-placeholder .hint { font-size: .85rem; color: var(--dcg-grey-light); margin-top: 1.1rem; } .booking-benefits { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--dcg-grey); } .booking-benefits li { display: inline-flex; align-items: center; gap: .5em; } .booking-benefits li::before { content: "✓"; color: var(--dcg-lime-dark); font-weight: 800; } .booking-privacy { text-align: center; max-width: 700px; margin: 20px auto 0; font-size: .85rem; color: var(--dcg-grey-light); } /* ==== Flip-Karten (Inhalte von der bisherigen Website übernommen, Optik neu) ==== */ .flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .flip { perspective: 1000px; min-height: 210px; } .flip-inner { position: relative; height: 100%; min-height: 210px; transition: transform .5s; transform-style: preserve-3d; } .flip:hover .flip-inner, .flip:focus-within .flip-inner { transform: rotateY(180deg); } .flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; padding: 1.15rem 1.25rem; display: flex; flex-direction: column; } .flip-front { background: var(--dcg-ink); color: var(--dcg-white); justify-content: center; } .flip-front h3 { color: var(--dcg-white); margin: 0; font-size: 1.02rem; line-height: 1.3; } .flip-front .flip-sub { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: .45rem; } .flip-front .flip-hint { position: absolute; left: 1.25rem; bottom: .85rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dcg-lime); } .flip-back { background: var(--dcg-white); border: 2px solid var(--dcg-lime); transform: rotateY(180deg); font-size: .86rem; line-height: 1.5; color: var(--dcg-grey); justify-content: center; overflow: auto; } @media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } } /* ==== Aufklapp-Liste (Anliegen-Fragenkatalog, von der bisherigen Website übernommen) ==== */ .faq details { border: 1px solid var(--dcg-line); border-radius: 12px; background: var(--dcg-white); margin-bottom: .6rem; } .faq summary { cursor: pointer; padding: .95rem 1.15rem; font-weight: 600; color: var(--dcg-ink); } .faq summary::marker { color: var(--dcg-lime-dark); } .faq details[open] summary { border-bottom: 1px solid var(--dcg-line); } .faq details .faq-a { padding: .8rem 1.15rem 1rem; color: var(--dcg-grey); font-size: .92rem; } /* ==== Contact Form 7 im Entwurfs-Look ==== */ .cf7-wrap .wpcf7-form p { margin: 0 0 1rem; } .cf7-wrap .wpcf7-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--dcg-ink); margin-bottom: .3rem; } .cf7-wrap .wpcf7-form input[type="text"], .cf7-wrap .wpcf7-form input[type="email"], .cf7-wrap .wpcf7-form input[type="tel"], .cf7-wrap .wpcf7-form textarea, .cf7-wrap .wpcf7-form select { width: 100%; padding: .7rem .9rem; border: 1px solid var(--dcg-line); border-radius: 10px; font: inherit; color: var(--dcg-ink); background: var(--dcg-white); box-sizing: border-box; } .cf7-wrap .wpcf7-form input:focus, .cf7-wrap .wpcf7-form textarea:focus { outline: 2px solid var(--dcg-lime); outline-offset: 1px; } .cf7-wrap .wpcf7-form input[type="submit"] { display: inline-block; padding: .8rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--dcg-lime); color: var(--dcg-ink); font-weight: 700; font-family: var(--font-head); } .cf7-wrap .wpcf7-form input[type="submit"]:hover { background: var(--dcg-lime-dark); } .cf7-wrap .wpcf7-not-valid-tip { color: #b3261e; font-size: .85rem; } .cf7-wrap .wpcf7-response-output { border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0 0; } /* ==== Legacy-Inhalte (unveränderte Alt-Seiten, z. B. Rechtstexte) ==== */ .legacy-content { overflow-wrap: break-word; } .legacy-content h2, .legacy-content h3 { margin: 1.6em 0 .5em; } .legacy-content p, .legacy-content ul, .legacy-content ol { margin: 0 0 1em; } .legacy-content a { color: var(--dcg-teal-dark); } .legacy-content table { border-collapse: collapse; width: 100%; font-size: .9rem; } .legacy-content td, .legacy-content th { border: 1px solid var(--dcg-line); padding: .5rem .7rem; text-align: left; } /* breite Tabellen (z. B. Cookie-Listen) scrollen im eigenen Rahmen statt die Seite zu sprengen */ .legacy-content { max-width: 100%; } .legacy-content table { display: block; overflow-x: auto; } /* ==== Standort-Karte (Übergangslösung statt Kartenbild) ==== */ .loc-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 2rem 1.2rem; color: var(--dcg-ink); width: 100%; } .loc-card svg { color: var(--dcg-lime-dark); } .loc-card p { margin: 0; color: var(--dcg-grey); }