/* Imperial-Ebene der Pichler-Website. Ausgelagert am 28.08.2026 aus dem Footer-Template 990390 (Widget primperial01). Grund: 107 KB Inline-CSS je Seitenaufruf, seitenuebergreifend nicht cachebar. Wird per pr-css-datei.php eingebunden — im Kopf vorgeladen, an der alten Position in der Fusszeile verlinkt, damit die Kaskade unveraendert bleibt. */ /* ============================================================ IMPERIAL — Palais-Palette (Marmor / Gold / gedämpftes Grün) Additiv nach dem Original-Stylesheet geladen. ============================================================ */ /* ---------- 1. Farbwelt ---------- */ :root{ /* Basis: warmer Alabaster statt Dunkelgrün */ --bg:#F6F2EB; --bg2:#FFFFFF; --panel:#FBF8F2; /* Gold ersetzt Lime als Leitakzent */ --lime:#A5813C; /* alle Alt-Regeln, die var(--lime) nutzen, werden damit Gold */ --gold:#A5813C; --gold-lt:#C9A75F; --gold-pale:#E7D5AC; /* Tinte: das Kanzleigrün, auf Textrolle reduziert */ --ink:#16261E; --green:#12211A; --green-dp:#0C1712; --mut:#5E6A62; --mut2:#8C968E; --line:rgba(22,38,30,.13); --line-gold:rgba(165,129,60,.30); } /* Marmor-Grund: feine Calacatta-Aderung, sehr zurückhaltend */ html,body{background:var(--bg)!important} #pr-home{ background:var(--bg); color:var(--ink); background-image: radial-gradient(1200px 700px at 78% -8%, rgba(201,167,95,.13), transparent 62%), radial-gradient(900px 600px at 6% 22%, rgba(22,38,30,.045), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.0035' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.54 0 0 0 0 0.51 0 0 0 -1.55 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-attachment:fixed,fixed,fixed; } #pr-home a{color:inherit} /* ---------- 2. Typografie: klassischer, ruhiger ---------- */ #pr-home .eyebrow{ color:var(--gold);letter-spacing:3.2px;font-size:11.5px;font-weight:700; } #pr-home .eyebrow::before{background:var(--gold);opacity:.85;width:30px} #pr-home .hero h1,#pr-home h2{font-family:'Spectral',serif} #pr-home .hero h1{color:var(--ink);font-weight:300;letter-spacing:-1.8px} #pr-home .hero h1 em{color:var(--gold);font-style:italic} #pr-home h2{color:var(--ink);font-weight:400} #pr-home .lead{color:var(--mut)} #pr-home .shine{ background:linear-gradient(100deg,#8E6C2E,#D8BC7C 42%,#F0E2C0 52%,#A5813C 68%,#8E6C2E); background-size:200% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* Doppellinie wie eine Stuckleiste */ #pr-home .divider{ height:3px;opacity:1; background: linear-gradient(90deg,transparent,var(--line-gold) 12%,var(--gold) 50%,var(--line-gold) 88%,transparent) 0 0/100% 1px no-repeat, linear-gradient(90deg,transparent,var(--line-gold) 20%,var(--line-gold) 80%,transparent) 0 3px/100% 1px no-repeat; } /* ---------- 3. Kopfzeile ---------- */ #pr-home .hd.scr{ background:rgba(250,247,241,.88); -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1); border-bottom:1px solid var(--line-gold); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 30px -24px rgba(22,38,30,.5); } #pr-home .hd .logo,#pr-home .logo img{background:transparent;padding:0;border-radius:0} #pr-home .nav a,#pr-home .prnav a{color:#3E4B44} #pr-home .nav a:hover,#pr-home .prnav a:hover{color:var(--ink)} #pr-home .nav a::after,#pr-home .prnav .elementor-item::after{background:var(--gold)} /* ---------- 4. Schaltflächen: Gold statt Lime ---------- */ #pr-home .btn-lime, #pr-home .hdbtn .elementor-button, #pr-home .wp-block-button__link,#pr-home .wp-element-button{ background:linear-gradient(135deg,#B08C42,#8A6A2B 46%,#C7A45C)!important; color:#FFFDF7!important; box-shadow:0 12px 28px -16px rgba(138,106,43,.75),inset 0 1px 0 rgba(255,255,255,.28)!important; } #pr-home .btn-lime:hover, #pr-home .hdbtn .elementor-button:hover, #pr-home .wp-block-button__link:hover,#pr-home .wp-element-button:hover{ background:linear-gradient(135deg,#C09A48,#96742F 46%,#D4B570)!important; color:#FFFDF7!important; box-shadow:0 20px 42px -16px rgba(138,106,43,.85),inset 0 1px 0 rgba(255,255,255,.35)!important; } #pr-home .btn-ghost{ background:rgba(255,255,255,.6);color:var(--ink); border:1px solid var(--line-gold); box-shadow:0 10px 26px -20px rgba(22,38,30,.5); } #pr-home .btn-ghost:hover{background:#fff;border-color:var(--gold)} /* ---------- 5. Hero: Kronleuchter-Licht statt Aurora ---------- */ #pr-home .hero{padding:150px 0 90px} #pr-home .aurora span{filter:blur(90px);mix-blend-mode:normal;opacity:.5} #pr-home .a1{background:radial-gradient(circle,rgba(232,212,164,.55),transparent 62%);width:700px;height:700px;top:-220px;left:8%} #pr-home .a2{background:radial-gradient(circle,rgba(201,167,95,.30),transparent 62%)} #pr-home .a3{background:radial-gradient(circle,rgba(22,38,30,.06),transparent 62%)} #pr-home .grain{opacity:.028} /* Bildrahmen: Marmorkante + Goldlinie */ #pr-home .hmedia .frame,#pr-home #h-frame{ border-radius:4px; border:1px solid var(--line-gold); box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--line-gold), 0 46px 90px -44px rgba(22,38,30,.55)!important; } #pr-home .hmedia .glass{ background:rgba(255,255,255,.82); border:1px solid var(--line-gold);border-radius:3px; box-shadow:0 22px 46px -26px rgba(22,38,30,.45)!important; } #pr-home .hmedia .glass b{color:var(--ink)} #pr-home .hmedia .glass small{color:var(--mut)} #pr-home .hmedia .glass .st{color:var(--gold-lt)} #pr-home .hmedia .chip{ background:linear-gradient(135deg,#B08C42,#8A6A2B);color:#FFFDF7; border-radius:999px;box-shadow:0 14px 28px -14px rgba(138,106,43,.7); } #pr-home .scrolldot{border-color:var(--line-gold)} #pr-home .scrolldot i{background:var(--gold)} /* ---------- 6. Vertrauensband ---------- */ #pr-home .trust{ background:rgba(255,255,255,.55); border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold); } #pr-home .marq .it{color:var(--mut)} #pr-home .marq .it b{color:var(--gold);font-weight:500} #pr-home .marq .star{color:var(--gold-lt)} /* ---------- 7. Zitat & Porträt ---------- */ #pr-home .quote{color:var(--ink)} #pr-home .quote em{color:var(--gold);font-style:italic} #pr-home .sign{color:var(--mut)} #pr-home .sign .ln{background:var(--gold)} #pr-home .portrait .pimg{ border-radius:3px;border:1px solid var(--line-gold); box-shadow:0 0 0 7px #fff,0 0 0 8px var(--line-gold),0 40px 78px -44px rgba(22,38,30,.5)!important; } #pr-home .portrait::before{border-color:var(--gold);opacity:.55;border-radius:3px} #pr-home .portrait::after{background:radial-gradient(circle,rgba(201,167,95,.5),transparent 70%)} /* ---------- 8. Kennzahlen ---------- */ #pr-home .stats{border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)} #pr-home .stat .num{color:var(--ink)} #pr-home .stat .num .u{color:var(--gold)} #pr-home .stat .lbl{color:var(--mut);letter-spacing:.3px} /* ---------- 9. Karten: Marmorplatten mit Goldkante ---------- */ #pr-home .card,#pr-home [id^="h-svc"],#pr-home [id^="t-m"]{ background:linear-gradient(180deg,#FFFFFF,#FBF8F2)!important; border:1px solid var(--line)!important;border-radius:3px!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -30px rgba(22,38,30,.45)!important; } #pr-home .card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,167,95,.16),transparent 46%)} #pr-home .card:hover,#pr-home [id^="h-svc"]:hover,#pr-home [id^="t-m"]:hover{ border-color:var(--line-gold)!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -32px rgba(22,38,30,.5),0 0 0 1px var(--line-gold)!important; } #pr-home .card .no{color:var(--gold);font-weight:500} #pr-home .card h3{color:var(--ink)} #pr-home .card p{color:var(--mut)} #pr-home .card .arr{color:var(--gold)} /* Leistungs-Karten (Buttons) */ #pr-home .lcard a.elementor-button{ background:linear-gradient(180deg,#FFFFFF,#FBF8F2)!important; color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:3px!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 30px -26px rgba(22,38,30,.4)!important; } #pr-home .lcard a.elementor-button:hover{ border-color:var(--line-gold)!important;color:var(--ink)!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 48px -28px rgba(22,38,30,.5),0 0 0 1px var(--line-gold)!important; } /* ---------- 10. Team-Feature ---------- */ #pr-home .feat-img{border-radius:3px;box-shadow:0 0 0 7px #fff,0 0 0 8px var(--line-gold),0 40px 78px -44px rgba(22,38,30,.5)} #pr-home .feat-img .badge{ background:rgba(255,255,255,.88);border:1px solid var(--line-gold);border-radius:3px; } #pr-home .feat-img .badge .n{color:var(--ink)} #pr-home .feat-img .badge .r{color:var(--mut)} #pr-home .feat li{color:var(--mut);border-bottom:1px solid var(--line)} #pr-home .feat li i{color:var(--gold)} /* ---------- 11. CTA-Band: dunkelgrün mit Gold (der einzige große Grünblock) ---------- */ #pr-home .cta{ background:linear-gradient(140deg,var(--green) 0%,var(--green-dp) 60%,#16261E 100%)!important; color:#F3EFE6; box-shadow:inset 0 1px 0 var(--line-gold)!important; } #pr-home .cta h2{color:#FAF6EC} #pr-home .cta p{color:#B9C2BA} #pr-home .cta .lk{ background:rgba(255,255,255,.055);color:#FAF6EC; border:1px solid var(--line-gold);border-radius:3px; } #pr-home .cta .lk b{color:#FAF6EC} #pr-home .cta .lk small{color:var(--gold-lt);opacity:1;letter-spacing:2px} #pr-home .cta .lk.soft{background:transparent;color:#FAF6EC;border:1px solid rgba(255,255,255,.16)} #pr-home .cta .lk:hover{border-color:var(--gold);background:rgba(201,167,95,.10)} #pr-home .cta:hover{box-shadow:inset 0 1px 0 var(--line-gold)!important;transform:none} /* ---------- 12. Footer ---------- */ #pr-home .ft,#prFt{ background:linear-gradient(180deg,#12211A,#0C1712)!important; border-top:1px solid var(--line-gold); } #pr-home .ft h4,#prFt h4{color:var(--gold-pale);letter-spacing:2.4px} #pr-home .ft a,#pr-home .ft p,#prFt a,#prFt p{color:#9BA69D} #pr-home .ft a:hover,#prFt a:hover{color:var(--gold-lt)} #pr-home .ft .bot,#prFt .bot{border-top:1px solid rgba(201,167,95,.18);color:#6E7A71} #pr-home .ft .logo,#prFt .logo img{background:transparent;padding:0} /* ---------- 13. Unterseiten (Single-Template) auf hell ---------- */ .elementor-location-single{color:var(--mut)} .elementor-location-single h1,.elementor-location-single h2,.elementor-location-single h3, .elementor-location-single h4,.elementor-location-single h5,.elementor-location-single h6{color:var(--ink)!important} .elementor-location-single p,.elementor-location-single li,.elementor-location-single td, .elementor-location-single th,.elementor-location-single blockquote,.elementor-location-single strong, .elementor-location-single b,.elementor-location-single em,.elementor-location-single figcaption, .elementor-location-single .prx-body{color:var(--mut)!important} .elementor-location-single a{color:var(--gold)!important} .elementor-location-single a:hover{color:var(--ink)!important} .elementor-location-single .prx-body h3,.elementor-location-single .prx-body h4{color:var(--ink)!important} .elementor-location-single p,.elementor-location-single li{color:#4F5A53!important} .elementor-location-single .prx-body h2::before{background:var(--gold)} /* Unterseiten-Hero: dunkelgrünes Band mit Goldschimmer (Kontrast zur hellen Seite) */ .elementor-location-single>.e-con:first-child{ background:linear-gradient(140deg,#12211A 0%,#16261E 55%,#0C1712 100%)!important; box-shadow:inset 0 -1px 0 var(--line-gold)!important; } .elementor-location-single>.e-con:first-child::before{ background:radial-gradient(circle,rgba(232,212,164,.20),transparent 60%)!important; } .elementor-location-single>.e-con:first-child::after{ background:radial-gradient(circle,rgba(201,167,95,.14),transparent 60%)!important; } .prx-eyebrow{color:var(--gold-lt)!important;letter-spacing:3.2px!important} .prx-eyebrow::before{background:var(--gold-lt)!important} .prx-ptitle{color:#FAF6EC!important;-webkit-text-fill-color:#FAF6EC!important} .prx-hsub{color:#B9C2BA!important} .prx-cdark{background:transparent!important} /* ---------- 14. Cursor-Glow / Fortschritt ---------- */ #pr-home .prog{background:linear-gradient(90deg,var(--gold),var(--gold-pale));box-shadow:0 0 10px rgba(165,129,60,.45)} #pr-home .cglow{background:radial-gradient(circle,rgba(201,167,95,.13),transparent 62%);mix-blend-mode:multiply} /* ---------- 15. Formular auf hell ---------- */ .wpcf7{background:#fff!important;border:1px solid var(--line-gold)!important;border-radius:3px!important;color:var(--ink)!important} .wpcf7 p,.wpcf7 label{color:var(--ink)!important} .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{ background:#FBF8F2!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:2px!important; } .wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{border-color:var(--gold)!important;outline:none!important} .wpcf7 input[type=submit]{ background:linear-gradient(135deg,#B08C42,#8A6A2B 46%,#C7A45C)!important;color:#FFFDF7!important;border:0!important;border-radius:999px!important; } .wpcf7 a{color:var(--gold)!important} /* ============================================================ 16. NATIVE ELEMENTOR-IDs (Header #prHd, Footer #prFt, Home #h-*) Diese Blöcke laden nach dem Basis-Stylesheet -> hier gezielt kontern. ============================================================ */ /* Seiten-eigener SUPP-Block setzt den dunklen Grund erneut */ html,body{background:#F6F2EB!important} #pr-home{background-color:#F6F2EB!important} /* --- Kopfzeile --- */ #prHd.scr{ background:rgba(250,247,241,.90)!important; border-bottom:1px solid var(--line-gold)!important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 14px 34px -26px rgba(22,38,30,.55); } #prHd .logo img{background:transparent!important;padding:0!important;border-radius:0!important} #prHd .prnav a.elementor-item{color:#3E4B44!important} #prHd .prnav a.elementor-item::after{background:var(--gold)!important} #prHd .prnav a.elementor-item:hover, #prHd .prnav a.elementor-item.elementor-item-active{color:var(--ink)!important} #prHd .prnav .elementor-menu-toggle{ background:rgba(22,38,30,.05)!important;border:1.5px solid var(--line-gold)!important;border-radius:3px!important; } #prHd .prnav .elementor-menu-toggle.elementor-active{background:rgba(201,167,95,.14)!important;border-color:var(--gold)!important} #prHd .prnav .elementor-menu-toggle i{color:var(--ink)!important} #prHd .prnav .elementor-nav-menu--dropdown{ background:rgba(250,247,241,.98)!important; border-bottom:1px solid var(--line-gold)!important;border-radius:0!important; box-shadow:0 30px 60px -30px rgba(22,38,30,.4)!important; } #prHd .prnav .elementor-nav-menu--dropdown .menu-item{border-bottom:1px solid var(--line)!important} #prHd .prnav .elementor-nav-menu--dropdown a.elementor-item{color:var(--ink)!important} #prHd .prnav .elementor-nav-menu--dropdown a.elementor-item:hover, #prHd .prnav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{color:var(--gold)!important} #prHd .hdbtn .elementor-button{ background:linear-gradient(135deg,#B08C42,#8A6A2B 46%,#C7A45C)!important; color:#FFFDF7!important;fill:#FFFDF7!important; box-shadow:0 12px 28px -16px rgba(138,106,43,.75),inset 0 1px 0 rgba(255,255,255,.28)!important; } #prHd .hdbtn .elementor-button:hover{ background:linear-gradient(135deg,#C09A48,#96742F 46%,#D4B570)!important; box-shadow:0 20px 42px -16px rgba(138,106,43,.85),inset 0 1px 0 rgba(255,255,255,.35)!important; } /* --- Fußzeile --- */ #prFt{background:linear-gradient(180deg,#12211A,#0C1712)!important;border-top:1px solid var(--line-gold)!important} #prFt h4{color:var(--gold-pale)!important;letter-spacing:2.4px!important} #prFt p,#prFt a{color:#9BA69D!important} #prFt a:hover{color:var(--gold-lt)!important} #prFt .logo img{background:transparent!important;padding:0!important;border-radius:0!important} #prFt .frate p{color:var(--gold-lt)!important} #prFt .frate small{color:#7E8B7B!important} #prFt-bot{border-top:1px solid rgba(201,167,95,.18)!important} #prFt-bot p,#prFt-bot a,#prFt-bot span{color:#6E7A71!important} /* --- Startseite: Hero-Rahmen --- */ #h-frame{ border-radius:4px!important;border:1px solid var(--line-gold)!important; box-shadow:0 0 0 7px #fff,0 0 0 8px var(--line-gold),0 46px 92px -44px rgba(22,38,30,.55)!important; } #h-media .glass{ background:rgba(255,255,255,.86)!important;border:1px solid var(--line-gold)!important;border-radius:3px!important; box-shadow:0 22px 46px -26px rgba(22,38,30,.45)!important; } #h-media .glass .st{color:var(--gold-lt)!important} #h-media .glass b{color:var(--ink)!important} #h-media .glass small{color:var(--mut)!important} #h-media .chip{ background:linear-gradient(135deg,#B08C42,#8A6A2B)!important;color:#FFFDF7!important; box-shadow:0 14px 28px -14px rgba(138,106,43,.7)!important; } #pr-home #h-hero h1{color:var(--ink)!important;letter-spacing:-1.8px!important} #pr-home #h-hero h1 em{color:var(--gold)!important} /* --- Startseite: Leistungsband + Karten --- */ #h-leistungen{ background:linear-gradient(180deg,#FFFFFF,#FCFAF6)!important; border-top:1px solid var(--line-gold)!important;border-bottom:1px solid var(--line-gold)!important; } #pr-home [id^="h-svc"]{ background:linear-gradient(180deg,#FFFFFF,#FBF8F2)!important; border:1px solid var(--line)!important;border-radius:3px!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -30px rgba(22,38,30,.45)!important; } #pr-home [id^="h-svc"]:hover{ border-color:var(--line-gold)!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 62px -32px rgba(22,38,30,.5),0 0 0 1px var(--line-gold)!important; } #pr-home [id^="h-svc"]::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,167,95,.16),transparent 46%)!important} #pr-home [id^="h-svc"] .no{color:var(--gold)!important} #pr-home [id^="h-svc"] h3{color:var(--ink)!important} #pr-home [id^="h-svc"] p{color:var(--mut)!important} #pr-home [id^="h-svc"] .arr{color:var(--gold)!important} /* --- Startseite: Team-Liste --- */ #pr-home #h-feat li{color:var(--mut)!important;border-bottom:1px solid var(--line)!important} #pr-home #h-feat li i{color:var(--gold)!important} /* --- Startseite: CTA-Band (dunkelgrün + Gold) --- */ #h-cta{ background:linear-gradient(140deg,#12211A 0%,#0C1712 60%,#16261E 100%)!important; color:#F3EFE6!important;box-shadow:inset 0 1px 0 var(--line-gold)!important; } #h-cta h2{color:#FAF6EC!important} #pr-home #h-cta p{color:#B9C2BA!important} #pr-home #h-cta .lk{ background:rgba(255,255,255,.055)!important;color:#FAF6EC!important; border:1px solid var(--line-gold)!important;border-radius:3px!important; } #pr-home #h-cta .lk b{color:#FAF6EC!important} #pr-home #h-cta .lk small{color:var(--gold-lt)!important;opacity:1!important;letter-spacing:2px} #pr-home #h-cta .lk.soft{background:transparent!important;color:#FAF6EC!important;border:1px solid rgba(255,255,255,.16)!important} #pr-home #h-cta .lk:hover{border-color:var(--gold)!important;background:rgba(201,167,95,.10)!important} /* Sonstige Karten-/Team-Raster auf hell */ #pr-home [id^="t-m"]{background:linear-gradient(180deg,#FFFFFF,#FBF8F2)!important;border:1px solid var(--line)!important;border-radius:3px!important} #pr-home [id^="t-m"]:hover{border-color:var(--line-gold)!important} /* ---------- 17. Hero-Bild: Empfang Karlsplatz (4:3, ungeschnitten) ---------- */ #h-frame,#pr-home .hmedia .frame{aspect-ratio:4/3!important} #pr-home #h-frame img,#pr-home .hmedia .frame img{height:100%!important;object-position:center 42%!important} @media(max-width:980px){#h-frame,#pr-home .hmedia .frame{aspect-ratio:4/3!important}} /* Das Foto bringt eigenes warmes Licht mit -> Chip/Badge etwas zurücknehmen */ #h-media .chip{opacity:.96} /* ============================================================ 18. LESBARKEIT: dunkleres Gold für Kleintext auf hellem Grund #A5813C erreicht auf #F6F2EB nur 3,2:1 — für Text unter 24px ist 4,5:1 nötig. --gold-ink löst das, --gold bleibt für Linien, Rahmen und Deko (dort gilt die Textschwelle nicht). ============================================================ */ :root{--gold-ink:#846529} /* Kleintext auf Hell -> gold-ink */ #pr-home .eyebrow{color:var(--gold-ink)} #pr-home .marq .it b,#pr-home .marq .star{color:var(--gold-ink)} #pr-home .hmedia .glass .st,#h-media .glass .st{color:var(--gold-ink)!important} #pr-home .card .no,#pr-home .card .arr{color:var(--gold-ink)} #pr-home [id^="h-svc"] .no,#pr-home [id^="h-svc"] .arr{color:var(--gold-ink)!important} #pr-home .feat li i,#pr-home #h-feat li i{color:var(--gold-ink)!important} #pr-home .quote em{color:var(--gold-ink)} #pr-home .lcard a.elementor-button::after{color:var(--gold-ink)} .elementor-location-single a{color:var(--gold-ink)!important} .wpcf7 a{color:var(--gold-ink)!important} /* Großtext (>=24px) darf beim helleren Gold bleiben - dort reicht 3:1 */ #pr-home .hero h1 em,#pr-home #h-hero h1 em{color:#A5813C!important} #pr-home .stat .num .u{color:#A5813C} /* Auf DUNKLEM Grund bleibt das helle Gold (dort ist es der kontraststarke Ton) */ #pr-home #h-cta .lk small{color:var(--gold-lt)!important} .prx-eyebrow{color:var(--gold-lt)!important} #prFt h4{color:var(--gold-pale)!important} #prFt a:hover{color:var(--gold-lt)!important} /* ============================================================ 19. Kontrast-Feinschliff (WCAG AA) Weiss auf Gold erreicht nur 3,2:1. Dunkelgrün auf Gold liegt bei 4,8:1 — und entspricht dem Ursprungsmuster (dunkle Schrift auf dem Akzentton). Fussnoten-Grau im Footer aufgehellt. ============================================================ */ #pr-home .btn-lime, #pr-home .hdbtn .elementor-button,#prHd .hdbtn .elementor-button, #pr-home .wp-block-button__link,#pr-home .wp-element-button, #pr-home .hmedia .chip,#h-media .chip{ color:#16261E!important; } #prHd .hdbtn .elementor-button,#prHd .hdbtn .elementor-button svg{fill:#16261E!important} #pr-home .btn-lime:hover, #pr-home .hdbtn .elementor-button:hover,#prHd .hdbtn .elementor-button:hover, #pr-home .wp-block-button__link:hover,#pr-home .wp-element-button:hover{color:#16261E!important} /* Formular-Absendeknopf gleich behandeln */ .wpcf7 input[type=submit]{color:#16261E!important;font-weight:700!important} /* Footer-Fusszeile: 3,9:1 -> 4,7:1 */ #prFt-bot p,#prFt-bot a,#prFt-bot span,#pr-home .ft .bot{color:#838E86!important} /* ============================================================ 20. Übrige Bespoke-Seiten: fest verdrahtete Hell-Farben Diese Seiten bringen eigenes CSS mit, das für DUNKLEN Grund geschrieben wurde (weisse Headings, #D6DED2-Text). Auf hellem Grund verschwindet der Text -> hier auf Tinte umbiegen. ============================================================ */ /* Fliesstext-Bereiche (Leistungen, Erstberatung, Standort, Karriere, Team) */ #pr-home .prose{color:#4F5A53!important} #pr-home .prose h2,#pr-home .prose h3,#pr-home .prose h4{color:var(--ink)!important} #pr-home .prose strong,#pr-home .prose b{color:var(--ink)!important} #pr-home .prose a{color:var(--gold-ink)!important} #pr-home .prose h2::before{background:var(--gold)} /* Team-Namen auf den Kacheln */ #pr-home .tname,#pr-home [id^="t-m"] .tname{color:var(--ink)!important} #pr-home .trole{color:var(--mut)!important} /* CTA-Band: auf ALLEN Seiten dunkelgrün (Home nutzt #h-cta, die übrigen #n-cta) */ #pr-home .cta,#pr-home #h-cta,#pr-home #n-cta{ background:linear-gradient(140deg,#12211A 0%,#0C1712 60%,#16261E 100%)!important; color:#F3EFE6!important; } #pr-home .cta h2,#pr-home #n-cta h2{color:#FAF6EC!important} #pr-home .cta p,#pr-home #n-cta p{color:#B9C2BA!important} #pr-home .lk,#pr-home .ctalk{ background:rgba(255,255,255,.055)!important;color:#FAF6EC!important; border:1px solid var(--line-gold)!important;border-radius:3px!important; } #pr-home .lk b,#pr-home .ctalk b{color:#FAF6EC!important} #pr-home .lk small,#pr-home .ctalk small{color:var(--gold-lt)!important;opacity:1!important} #pr-home .lk.soft,#pr-home .ctalk.soft{background:transparent!important;border:1px solid rgba(255,255,255,.16)!important} #pr-home .lk:hover,#pr-home .ctalk:hover{border-color:var(--gold)!important;background:rgba(201,167,95,.10)!important} /* Kontaktformular: restliche Beschriftungen (Radio/Checkbox/Meldungen) */ .prx-fh{color:var(--ink)!important} .prx-fsub{color:var(--mut)!important} .wpcf7-radio .wpcf7-list-item-label, .wpcf7-checkbox .wpcf7-list-item-label{color:var(--ink)!important} .wpcf7-acceptance .wpcf7-list-item-label{color:var(--mut)!important} .wpcf7 .wpcf7-response-output{color:var(--ink)!important;border-color:var(--line-gold)!important} .wpcf7 label{color:var(--ink)!important} /* ============================================================ 21. HERO-GRUND: ruhig statt wolkig Rauschtextur + drei weiche Farbwolken wirken auf hellem Grund fleckig. Stattdessen: eine klare, leicht verlaufende Fläche und EIN sehr weiter, warmer Lichtschein von oben (Luster). ============================================================ */ #pr-home{ background-color:#F7F4EF!important; background-image:linear-gradient(180deg,#FCFAF6 0%,#F7F4EF 42%,#F1ECE3 100%)!important; background-attachment:scroll!important; } /* Rauschen aus */ #pr-home .grain{opacity:0!important} /* Farbwolken aus - dafür ein einziger, breiter Lichtkegel */ #pr-home .aurora span{display:none!important} #pr-home .a1{ display:block!important; width:min(1500px,130vw)!important;height:820px!important; top:-380px!important;left:50%!important;right:auto!important; transform:translateX(-50%)!important; background:radial-gradient(ellipse at center,rgba(226,205,163,.46) 0%,rgba(226,205,163,.14) 46%,transparent 72%)!important; filter:blur(50px)!important;opacity:1!important; mix-blend-mode:normal!important;animation:none!important; } /* Feine Goldlinie schliesst den Hero ab - Stuckkante statt Kantenlosigkeit */ #pr-home .hero::after,#pr-home #h-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--line-gold) 18%,var(--line-gold) 82%,transparent); pointer-events:none;z-index:3; } /* ============================================================ 22. LOGO Das Original-PNG hatte einen weissen Hintergrund - deshalb lag darunter eine weisse Kachel. Jetzt freigestellte Fassungen: Header = Tinte+Gold auf Hell, Footer = Creme+Gold auf Dunkel. ============================================================ */ #prHd .logo img,#pr-home .hd .logo,#pr-home .logo img{ background:transparent!important;padding:0!important;border-radius:0!important; height:44px!important;width:auto!important; } #prHd.scr .logo img{height:38px!important;transition:height .4s} #prFt .logo img{ background:transparent!important;padding:0!important;border-radius:0!important; height:38px!important;width:auto!important; } #prFt .logo{margin-bottom:18px;display:inline-block} /* ============================================================ 23. HERO MIT RAUMFOTO ALS HINTERGRUND Das Empfangsfoto liegt jetzt als Bild hinter dem Hero, unter einem warmen Schleier (~72 %). Der Raum bleibt sichtbar, die dunkle Schrift kommt trotzdem auf ~12:1 Kontrast. Der gerahmte Zweitabdruck desselben Fotos entfaellt dafuer. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-image: linear-gradient(180deg,rgba(250,247,241,.62) 0%,rgba(249,246,240,.74) 45%,rgba(247,244,238,.90) 88%,#F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; background-attachment:scroll,scroll!important; } /* Lichtkegel + Rauschen entfallen - das Foto bringt sein eigenes Licht mit */ #pr-home #h-hero .aurora,#pr-home .hero .aurora, #pr-home #h-hero .grain,#pr-home .hero .grain{display:none!important} /* Gerahmtes Duplikat ausblenden, Hero einspaltig und mittig */ #pr-home #h-heromedia,#pr-home .hmedia{display:none!important} #pr-home #h-herowrap,#pr-home .hero .wrap{ grid-template-columns:1fr!important; max-width:1000px!important;margin:0 auto!important; text-align:center!important;justify-items:center!important; } #pr-home #h-herotext{align-items:center!important;text-align:center!important} #pr-home #h-hero .lead,#pr-home .hero .lead{margin-left:auto!important;margin-right:auto!important;max-width:620px!important} #pr-home #h-hero .hero-cta,#pr-home #h-herotext .hero-cta{justify-content:center!important} #pr-home #h-hero .eyebrow{justify-content:center} /* Etwas mehr Luft, damit der Raum wirken kann */ #pr-home #h-hero,#pr-home .hero{min-height:100vh;padding:186px 0 120px!important} @media(max-width:760px){ #pr-home #h-hero,#pr-home .hero{padding:150px 0 88px!important;background-position:center 38%,center 38%!important} } /* ============================================================ 24. UNTERSEITEN (Single-Template 990391 / Single-Post 990392) Die Baender kommen aus Elementor-Einstellungen: Hero #070A08, Inhalt #0E1A14. Beide muessen zur hellen Seite passen: Hero bleibt als dunkles Auftaktband (Kontrast), der INHALT wird hell wie der Rest der Seite. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child{ background-color:transparent!important; background-image:linear-gradient(140deg,#12211A 0%,#16261E 55%,#0C1712 100%)!important; box-shadow:inset 0 -1px 0 var(--line-gold)!important; position:relative;overflow:hidden; } .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2){ background-color:#F7F4EF!important;background-image:none!important; } /* Hero-Titel: eigene Regel MUSS die allgemeine Ueberschriften-Regel schlagen (.elementor-location-single h1 ist spezifischer als .prx-ptitle allein) */ .elementor-location-single .prx-ptitle, .elementor-location-single h1.prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1{ color:#FAF6EC!important;-webkit-text-fill-color:#FAF6EC!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow{color:var(--gold-lt)!important} .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow::before{background:var(--gold-lt)!important} .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub{color:#B9C2BA!important} /* Inhaltsband: Text dunkel auf hell */ .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) h1, .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) h2, .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) h3, .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) h4{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important} .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) p, .elementor-location-single .elementor > .e-con.e-parent:nth-child(n+2) li{color:#4F5A53!important} /* ============================================================ 25. Restliche Kleinbefunde ============================================================ */ /* Kontakt: Beschriftungen ("Telefon", "Kanzleisitz") - 2,8:1 -> Gold-Tinte */ #pr-home .lbl{color:var(--gold-ink)!important;letter-spacing:2px} #pr-home .val{color:var(--ink)!important} /* Formular-Links (u.a. "Datenschutzhinweise") - hoehere Spezifitaet noetig */ #pr-home .wpcf7 a,.wpcf7 .wpcf7-list-item-label a,.wpcf7-acceptance .wpcf7-list-item-label a, .wpcf7 p a,.wpcf7 label a,.wpcf7 .wpcf7-acceptance a{ color:var(--gold-ink)!important;text-decoration:underline!important;text-underline-offset:2px; } /* Leistungen: "Mehr erfahren"-Hinweis in den Gebiets-Karten */ #pr-home .gmore{color:var(--gold-ink)!important} /* ============================================================ 26. HERO-SCHLEIER ZURÜCKGENOMMEN (Wunsch: Raum sichtbarer) Vorher lag ein flaechiger Schleier von 62-90 % darueber. Jetzt: nur ~22-30 % Grundschleier, dafuer ein weicher Lichthof hinter dem Textblock (damit die Schrift nicht im Luster liegt) und ein Ausblenden nach unten zur naechsten Sektion. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 68% 52% at 50% 45%, rgba(250,247,241,.74) 0%, rgba(250,247,241,.46) 52%, rgba(250,247,241,0) 100%), linear-gradient(180deg, rgba(250,247,241,.30) 0%, rgba(249,246,240,.18) 38%, rgba(248,245,239,.42) 74%, rgba(247,244,238,.88) 94%, #F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; background-size:cover,cover,cover!important; background-position:center 45%,center center,center 45%!important; background-repeat:no-repeat,no-repeat,no-repeat!important; } /* Etwas mehr Zeichnung im Foto - das Handybild ist von Haus aus flau */ #pr-home #h-hero,#pr-home .hero{ isolation:isolate; } /* Textblock bekommt minimal mehr Gewicht, damit er sich vom Raum abhebt */ #pr-home #h-hero h1,#pr-home .hero h1{text-shadow:0 1px 0 rgba(255,255,255,.55)} #pr-home #h-hero .lead,#pr-home .hero .lead{color:#46514A!important} @media(max-width:760px){ /* Auf schmalen Schirmen steht der Text enger - dort etwas mehr Schleier */ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 96% 46% at 50% 46%, rgba(250,247,241,.86) 0%, rgba(250,247,241,.58) 58%, rgba(250,247,241,.12) 100%), linear-gradient(180deg,rgba(250,247,241,.34) 0%,rgba(249,246,240,.26) 40%,rgba(247,244,238,.90) 92%,#F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } } /* ============================================================ 27. Schleier weiter runter — Messung ergab reichlich Reserve Lichthof 74 % -> 55 %, Grundschleier 20 % -> 12 %. Gerechnet am echten Foto hinter dem Textblock: dunkelste Stelle 6,1:1, Mittel 10,0:1 (noetig 4,5:1). ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 72% 54% at 50% 45%, rgba(250,247,241,.55) 0%, rgba(250,247,241,.30) 55%, rgba(250,247,241,0) 100%), linear-gradient(180deg, rgba(250,247,241,.16) 0%, rgba(249,246,240,.08) 36%, rgba(248,245,239,.30) 72%, rgba(247,244,238,.82) 93%, #F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } /* Text bekommt etwas mehr Halt, jetzt wo mehr Raum durchkommt */ #pr-home #h-hero h1,#pr-home .hero h1{text-shadow:0 1px 2px rgba(255,255,255,.7)} #pr-home #h-hero .lead,#pr-home .hero .lead{ color:#3B4640!important;text-shadow:0 1px 2px rgba(255,255,255,.65); } #pr-home #h-hero .eyebrow{text-shadow:0 1px 2px rgba(255,255,255,.7)} @media(max-width:760px){ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 98% 48% at 50% 46%, rgba(250,247,241,.78) 0%, rgba(250,247,241,.48) 60%, rgba(250,247,241,.10) 100%), linear-gradient(180deg,rgba(250,247,241,.22) 0%,rgba(249,246,240,.14) 38%,rgba(247,244,238,.86) 92%,#F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } } /* ============================================================ 28. HINTERGRUND FAST OFFEN Messung: hinter dem Textband liegt das 5. Perzentil bei 107-126, unter 0,3 % der Flaeche sind dunkler als 80. Der fruehere Tiefstwert 26 waren ein paar Ausreisser-Pixel, kein Bereich. -> 15 % Grundschleier + 10 % Lichthof = ~23 % hinter dem Text. Dunkelster realer Punkt 4,7:1, Mittel 6,8:1 (noetig 4,5:1). Das Foto ist damit zu rund drei Vierteln offen. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 76% 50% at 50% 46%, rgba(250,247,241,.10) 0%, rgba(250,247,241,.05) 60%, rgba(250,247,241,0) 100%), linear-gradient(180deg, rgba(250,247,241,.15) 0%, rgba(250,247,241,.15) 62%, rgba(249,246,240,.30) 80%, rgba(247,244,238,.80) 94%, #F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } /* Bei so wenig Schleier traegt der Text sich selbst: kraeftigerer, weicher Lichtsaum trennt die Glyphen vom Luster-Detail. */ #pr-home #h-hero h1,#pr-home .hero h1{ color:#16261E!important; text-shadow:0 0 22px rgba(255,255,255,.85),0 0 9px rgba(255,255,255,.9),0 1px 2px rgba(255,255,255,.95)!important; } #pr-home #h-hero h1 em,#pr-home .hero h1 em{ color:#8A6A2B!important; /* Gold auf offenem Foto -> dunklere Stufe */ } #pr-home #h-hero .lead,#pr-home .hero .lead{ color:#16261E!important; /* hellere Graustufen halten bei 23 % Schleier nicht mehr */ text-shadow:0 0 18px rgba(255,255,255,.85),0 0 7px rgba(255,255,255,.9),0 1px 2px rgba(255,255,255,.95)!important; } #pr-home #h-hero .eyebrow{ color:#6E5320!important; text-shadow:0 0 16px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.95)!important; } /* Buttons stehen ohnehin auf eigener Flaeche - dort keinen Saum */ #pr-home #h-hero .btn,#pr-home .hero .btn{text-shadow:none!important} @media(max-width:760px){ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 100% 46% at 50% 46%, rgba(250,247,241,.34) 0%, rgba(250,247,241,.20) 62%, rgba(250,247,241,.04) 100%), linear-gradient(180deg,rgba(250,247,241,.18) 0%,rgba(250,247,241,.18) 60%,rgba(247,244,238,.84) 93%,#F7F4EF 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } } /* ============================================================ 29. HERO: kein Gold als TEXT mehr Bei 24 % Schleier ist der Grund ein Mittelton (141-171) — Gold ist ebenfalls Mittelton und faellt durch: Eyebrow 2,2:1, Kursiv-Akzent 1,5:1 (noetig 4,5 bzw. 3). Loesung: im Hero durchgehend Tinte. Gold bleibt Linie/Deko und behaelt seine Rolle auf allen festen Flaechen darunter. ============================================================ */ #pr-home #h-hero .eyebrow,#pr-home .hero .eyebrow{ color:#16261E!important; } /* der Strich vor dem Eyebrow bleibt golden - Deko, keine Textschwelle */ #pr-home #h-hero .eyebrow::before,#pr-home .hero .eyebrow::before{ background:#8A6A2B!important;opacity:1;height:2px; } /* Kursiv-Akzent in der Headline: Betonung traegt jetzt die Kursive, nicht die Farbe */ #pr-home #h-hero h1 em,#pr-home .hero h1 em{ color:#16261E!important;font-style:italic; } /* Scroll-Punkt am Hero-Fuss steht auf offenem Foto -> dunkel statt gold */ #pr-home #h-hero .scrolldot,#pr-home .hero .scrolldot{ border-color:rgba(22,38,30,.45)!important; background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } #pr-home #h-hero .scrolldot i,#pr-home .hero .scrolldot i{background:#16261E!important} /* ============================================================ 30. SCHATTEN DEZENTER + KOPFZEILE ABGESICHERT Foto bleibt unveraendert (1:1 wie jetzt). a) Hero-Saum von 3 Lagen (.85/.90/.95) auf 2 leichte runter. b) Kopfzeilen-Band ist dunkler als gedacht (Mittel 104-136, 5. Perzentil 40-89) -> Menue lag bei 1,9:1. Weich auslaufender Lichtverlauf hebt es auf ~5:1, ohne Balken. ============================================================ */ /* --- a) dezenterer Saum im Hero --- */ #pr-home #h-hero h1,#pr-home .hero h1{ text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 9px rgba(255,255,255,.45)!important; } #pr-home #h-hero .lead,#pr-home .hero .lead{ text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 8px rgba(255,255,255,.4)!important; } #pr-home #h-hero .eyebrow,#pr-home .hero .eyebrow{ text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 7px rgba(255,255,255,.5)!important; } /* --- b) Kopfzeile: Lichtverlauf statt Balken --- */ #prHd::before,#pr-home .hd::before{ content:"";position:absolute;inset:0 0 auto 0;height:190px; background:linear-gradient(180deg, rgba(250,247,241,.62) 0%, rgba(250,247,241,.42) 45%, rgba(250,247,241,.16) 78%, rgba(250,247,241,0) 100%); pointer-events:none;z-index:-1;transition:opacity .4s; } /* sobald die Kopfzeile beim Scrollen fest wird, traegt sie sich selbst */ #prHd.scr::before,#pr-home .hd.scr::before{opacity:0} /* Menue + Logo etwas tiefer und mit feinem Saum */ #prHd .prnav a.elementor-item{ color:#35423B!important; text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 6px rgba(255,255,255,.5); } #prHd.scr .prnav a.elementor-item{text-shadow:none} #prHd .prnav a.elementor-item:hover, #prHd .prnav a.elementor-item.elementor-item-active{color:#16261E!important} /* Telefon-Button steht auf eigener Goldflaeche -> kein Saum */ #prHd .hdbtn .elementor-button{text-shadow:none!important} #prHd .logo img{filter:drop-shadow(0 1px 3px rgba(255,255,255,.75))} #prHd.scr .logo img{filter:none} /* ============================================================ 31. KEIN AUSLAUF NACH UNTEN — Foto laeuft durch Bisher lief der Grundschleier ab 62 % Hoehe auf volle Deckung hoch (.15 -> .30 -> .80 -> deckend). Jetzt bleibt er ueber die ganze Hoehe flach, das Foto reicht bis zur Unterkante. Der Uebergang zum Vertrauensband traegt die Goldlinie. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 76% 50% at 50% 46%, rgba(250,247,241,.10) 0%, rgba(250,247,241,.05) 60%, rgba(250,247,241,0) 100%), linear-gradient(180deg, rgba(250,247,241,.15) 0%, rgba(250,247,241,.15) 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } /* Abschluss zum naechsten Band: klare Goldlinie statt Verwischung */ #pr-home #h-hero,#pr-home .hero{ border-bottom:1px solid rgba(165,129,60,.45)!important; } #pr-home .trust{ background:rgba(255,255,255,.78)!important; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-top:0!important; } /* Scroll-Punkt sitzt jetzt auf dem Parkett -> etwas mehr Halt */ #pr-home #h-hero .scrolldot,#pr-home .hero .scrolldot{ background:rgba(255,255,255,.50)!important; border-color:rgba(22,38,30,.5)!important; } @media(max-width:760px){ #pr-home #h-hero,#pr-home .hero{ background-image: radial-gradient(ellipse 100% 46% at 50% 46%, rgba(250,247,241,.34) 0%, rgba(250,247,241,.20) 62%, rgba(250,247,241,.04) 100%), linear-gradient(180deg, rgba(250,247,241,.18) 0%, rgba(250,247,241,.18) 100%), url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg")!important; } } /* ============================================================ 32. UNTERSEITEN AUF DIE NEUE LINIE Bisher: dunkelgruenes Auftaktband auf allen Unterseiten — passte zur alten dunklen Startseite, jetzt ein Bruch. Neu: dasselbe Raumfoto als Auftakt, Schleier 32 % (etwas mehr als im Hero, weil das Band niedriger und der Text laenger ist). Gerechnet: Tiefpunkt 5,5:1, Mittel 7,6:1 (noetig 4,5:1). Betrifft Single-Template (Schwerpunkte/Beitraege) UND die Bespoke-Seiten (Leistungen, Team, Kontakt, Profile ...). ============================================================ */ :root{ --hero-foto:url("https://seashell-dolphin-565932.hostingersite.com/wp-content/uploads/2026/08/kanzlei-pichler-empfang-karlsplatz-wien.jpg"); } /* --- a) Single-Template: Schwerpunkte, Beitraege --- */ .elementor-location-single .elementor > .e-con.e-parent:first-child{ background-color:transparent!important; background-image: linear-gradient(180deg,rgba(250,247,241,.32) 0%,rgba(250,247,241,.32) 100%), var(--hero-foto)!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; box-shadow:none!important; border-bottom:1px solid rgba(165,129,60,.45)!important; } /* die alten Aurora-Schleier des dunklen Bandes weg */ .elementor-location-single .elementor > .e-con.e-parent:first-child::before, .elementor-location-single .elementor > .e-con.e-parent:first-child::after{ display:none!important; } /* Texte im Auftaktband: von hell auf Tinte */ .elementor-location-single .prx-ptitle, .elementor-location-single h1.prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 9px rgba(255,255,255,.45)!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow{ color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 7px rgba(255,255,255,.5)!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow::before{ background:#8A6A2B!important;height:2px;opacity:1; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub{ color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 8px rgba(255,255,255,.4)!important; } /* --- b) Bespoke-Seiten: Leistungen, Team, Kontakt, Profile ... --- */ #pr-home #n-hero{ background-color:transparent!important; background-image: linear-gradient(180deg,rgba(250,247,241,.32) 0%,rgba(250,247,241,.32) 100%), var(--hero-foto)!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; border-bottom:1px solid rgba(165,129,60,.45)!important; } #pr-home #n-hero .eyebrow{ color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 7px rgba(255,255,255,.5)!important; } #pr-home #n-hero .eyebrow::before{background:#8A6A2B!important;height:2px;opacity:1} #pr-home #n-hero h1{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 9px rgba(255,255,255,.45)!important; } #pr-home #n-hero .lead{ color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 8px rgba(255,255,255,.4)!important; } /* Portraet-Rahmen auf den Team-Profilen steht jetzt auf dem Foto */ #pr-home #n-hero .pframe,#pr-home .pframe{ box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(165,129,60,.45),0 30px 60px -34px rgba(22,38,30,.5)!important; } /* ============================================================ 33. „Zufall" + Eyebrow — die zwei echten Befunde a) „Zufall" ist : Gold-Verlaufstext mit -webkit-text-fill-color:transparent. Meine em-Regel traf ihn nie, und der Kontrasttest ueberspringt Verlaufstext. b) Der Eyebrow ist ein Heading-Widget — die Farbe sass am aeusseren div, die Schrift steckt im inneren , das sein Gold weiter aus dem Elementor-Kit zog. ============================================================ */ #pr-home #h-hero .shine,#pr-home .hero .shine, #pr-home #h-hero h1 .shine,#pr-home #h-hero h1 em{ background:none!important;background-image:none!important; -webkit-background-clip:border-box!important;background-clip:border-box!important; -webkit-text-fill-color:#16261E!important;color:#16261E!important; animation:none!important;font-style:italic; } /* Eyebrow: inneres Heading-Span mitfassen (ueberall, nicht nur Startseite) */ #pr-home .eyebrow .elementor-heading-title, #pr-home #h-hero .eyebrow .elementor-heading-title, #pr-home #n-hero .eyebrow .elementor-heading-title, #pr-home .eyebrow span,#pr-home #h-hero .eyebrow span{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 7px rgba(255,255,255,.5)!important; } /* ============================================================ 34. GANZES HERO-BILD SICHTBAR (kein Beschnitt) Bisher „cover": auf 1920x900 fielen 37 % des Fotos weg. Jetzt volle Breite in Originalhoehe (4:3) -> nichts wird abgeschnitten. Nebeneffekt, der das Leseproblem loest: die ruhige Marmorflaeche des Tresens kommt ins Bild. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-size:100% auto,100% auto,100% auto!important; background-position:center top,center top,center top!important; background-repeat:no-repeat,no-repeat,no-repeat!important; background-color:#F7F4EF!important; min-height:75vw!important; padding:150px 0 90px!important; display:flex!important;align-items:center!important; } /* Unterseiten-Baender: ebenfalls das ganze Bild */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ background-size:100% auto,100% auto!important; background-position:center top,center top!important; background-repeat:no-repeat,no-repeat!important; background-color:#F7F4EF!important; min-height:75vw!important; display:flex!important;align-items:flex-end!important; } /* Der Text der Unterseiten rutscht dadurch auf die ruhige Tresenflaeche */ .elementor-location-single .elementor > .e-con.e-parent:first-child{ padding-bottom:64px!important; } #pr-home #n-hero{padding-bottom:64px!important} /* ============================================================ 35. UNTERSEITEN: ganzes Bild, aber als Tafel statt Vollbreite Vollbreite hiess 1025 px hohes Band auf JEDER Unterseite, und der Text landete auf der Kante Parkett/Marmor (Spannweite 178). Jetzt: das komplette Foto fuellt die Bandhoehe und steht rechts, der Text links auf ruhigem Marmorgrund. Nichts beschnitten, Band bleibt bei ~420 px, Textgrund gleichmaessig. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ background-image: linear-gradient(180deg,rgba(250,247,241,.06) 0%,rgba(250,247,241,.06) 100%), var(--hero-foto)!important; background-size:auto 100%,auto 100%!important; /* Hoehe fuellen, Breite proportional -> kein Beschnitt */ background-position:right center,right center!important; background-repeat:no-repeat,no-repeat!important; background-color:#F7F4EF!important; min-height:420px!important; display:flex!important;align-items:center!important; padding-top:150px!important;padding-bottom:56px!important; position:relative; } /* weicher Ansatz zwischen Marmorgrund und Bildkante */ .elementor-location-single .elementor > .e-con.e-parent:first-child::after, #pr-home #n-hero::after{ content:"";position:absolute;inset:0;pointer-events:none;display:block!important; background:linear-gradient(90deg, #F7F4EF 0%, rgba(247,244,239,.96) 34%, rgba(247,244,239,.55) 46%, rgba(247,244,239,0) 58%)!important; z-index:0; } .elementor-location-single .elementor > .e-con.e-parent:first-child > *, #pr-home #n-hero > *{position:relative;z-index:1} /* Text bleibt links der Bildkante */ .elementor-location-single .elementor > .e-con.e-parent:first-child .e-con-inner, #pr-home #n-hero .e-con-inner,#pr-home #n-herowrap{ max-width:min(1240px,100%)!important;margin:0 auto!important; padding-right:clamp(0px,42vw,620px)!important; } @media(max-width:900px){ /* schmal: Bild als Band oben, Text darunter auf Marmor */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ background-size:100% auto,100% auto!important; background-position:center top,center top!important; min-height:calc(75vw + 190px)!important; align-items:flex-end!important; padding-top:calc(75vw + 24px)!important;padding-bottom:40px!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child::after, #pr-home #n-hero::after{ background:linear-gradient(180deg,rgba(247,244,239,0) 0%,rgba(247,244,239,.6) 72%,#F7F4EF 84%)!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .e-con-inner, #pr-home #n-hero .e-con-inner,#pr-home #n-herowrap{padding-right:22px!important} } /* ============================================================ 36. Unterseiten-Titel in der ruhigen Zone halten Der 66-px-Titel lief ueber die Bildkante (Spannweite 98). Ruhige Zone etwas nach rechts gezogen + Titel gebremst, damit er innerhalb des Marmorgrunds umbricht. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child::after, #pr-home #n-hero::after{ background:linear-gradient(90deg, #F7F4EF 0%, rgba(247,244,239,.97) 42%, rgba(247,244,239,.62) 54%, rgba(247,244,239,0) 68%)!important; } .elementor-location-single .prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1, #pr-home #n-hero h1{ font-size:clamp(32px,3.6vw,50px)!important; line-height:1.06!important;letter-spacing:-1.1px!important; max-width:min(600px,52%)!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead{max-width:min(560px,50%)!important} .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow, #pr-home #n-hero .eyebrow{max-width:min(560px,50%)!important} @media(max-width:900px){ .elementor-location-single .prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1, #pr-home #n-hero h1, .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead, .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow, #pr-home #n-hero .eyebrow{max-width:100%!important} } /* ============================================================ 37. EYEBROW BEKOMMT FESTEN GRUND 4,8:1 war formal bestanden, aber unter der Zeile schwankte der Grund um 59 Stufen — bei 12 px gesperrten Versalien reicht das nicht. Kontrastwert allein greift hier zu kurz. Loesung: schmale Marmortafel mit Goldhaarlinie. Damit liegt der Grund fest (Spannweite ~0) statt auf dem Luster. ============================================================ */ #pr-home #h-hero .eyebrow,#pr-home .hero .eyebrow, #pr-home #n-hero .eyebrow, .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow{ display:inline-flex!important;width:fit-content!important; align-items:center!important;gap:10px!important; background:rgba(250,247,241,.94)!important; border:1px solid rgba(165,129,60,.38)!important; border-radius:2px!important; padding:8px 15px 8px 13px!important; font-size:12.5px!important;letter-spacing:2.6px!important;font-weight:700!important; color:#16261E!important; text-shadow:none!important; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); box-shadow:0 2px 12px -7px rgba(22,38,30,.4); margin-bottom:22px!important; } #pr-home #h-hero .eyebrow .elementor-heading-title, #pr-home #n-hero .eyebrow .elementor-heading-title, #pr-home #h-hero .eyebrow span{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; text-shadow:none!important;font-size:inherit!important;letter-spacing:inherit!important; } /* der Goldstrich bleibt, sitzt jetzt auf der Tafel */ #pr-home #h-hero .eyebrow::before,#pr-home #n-hero .eyebrow::before, .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow::before{ width:22px!important;height:2px!important;background:#8A6A2B!important;opacity:1!important;flex:0 0 auto!important; } /* ============================================================ 38. UNTERSEITEN: EINHEITLICHE BANDHOEHE Bisher richtete sich die Hoehe nach der Textlaenge: Kontakt 592, Unterseite 627, Leistungen 736 — sichtbar ungleich. Gemessene Textbloecke: 251 / 342 / 342 / 485 (max Leistungen). 680 px fasst den groessten Block samt Abstaenden, alle anderen werden darauf aufgefuellt. Startseite bleibt unberuehrt. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ min-height:680px!important; padding-top:132px!important;padding-bottom:56px!important; } @media(max-width:900px){ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ min-height:calc(75vw + 260px)!important; padding-top:calc(75vw + 24px)!important;padding-bottom:40px!important; } } /* ============================================================ 39. BANDHOEHE WIRKLICH EINHEITLICH Zwei Ursachen fuer die Ungleichheit: a) Beim Single-Template wirkte min-height auf die INHALTSBOX, das Padding kam obendrauf -> 680+132+56 = 868 statt 680. border-box normalisiert das. b) Leistungen hat den laengsten Textblock (563 px) und sprengte die 680. Einheitswert daher 760 px — fasst den groessten Block, alle anderen werden darauf aufgefuellt. Startseite bleibt bei ihrer Bildhoehe (75vw) unberuehrt. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ box-sizing:border-box!important; min-height:760px!important; height:auto!important; } @media(max-width:900px){ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ box-sizing:border-box!important; min-height:calc(75vw + 300px)!important; } } /* ============================================================ 40. UNTERSEITEN: BILD UEBER DIE GANZE BREITE, HOEHE FUELLEND Bisher stand das Foto als Tafel rechts. Jetzt spannt es ueber die volle Bandbreite und fuellt die Hoehe (cover). Damit der Text trotzdem ruhig steht: weicher Marmoranlauf von links, der nach rechts auslaeuft — das Bild bleibt ueber die ganze Breite sichtbar, der Textbereich bekommt festen Grund. ============================================================ */ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ background-image: linear-gradient(180deg,rgba(250,247,241,.13) 0%,rgba(250,247,241,.13) 100%), var(--hero-foto)!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; } /* Marmoranlauf links, laeuft nach rechts aus */ .elementor-location-single .elementor > .e-con.e-parent:first-child::after, #pr-home #n-hero::after{ background:linear-gradient(90deg, rgba(247,244,239,.94) 0%, rgba(247,244,239,.86) 26%, rgba(247,244,239,.55) 46%, rgba(247,244,239,.20) 66%, rgba(247,244,239,0) 84%)!important; } /* Text darf jetzt wieder breiter laufen */ .elementor-location-single .elementor > .e-con.e-parent:first-child .e-con-inner, #pr-home #n-hero .e-con-inner,#pr-home #n-herowrap{ padding-right:clamp(0px,20vw,300px)!important; } .elementor-location-single .prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1, #pr-home #n-hero h1{max-width:min(760px,64%)!important} .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead{max-width:min(660px,58%)!important} .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-eyebrow, #pr-home #n-hero .eyebrow{max-width:none!important} /* Titel und Untertitel bekommen den feinen Lichtsaum zurueck */ .elementor-location-single .prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1, #pr-home #n-hero h1{ text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.5)!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead{ text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 8px rgba(255,255,255,.45)!important; } @media(max-width:900px){ .elementor-location-single .elementor > .e-con.e-parent:first-child, #pr-home #n-hero{ background-size:cover,cover!important; background-position:center 42%,center 42%!important; min-height:520px!important; align-items:center!important; padding-top:132px!important;padding-bottom:48px!important; } .elementor-location-single .elementor > .e-con.e-parent:first-child::after, #pr-home #n-hero::after{ background:linear-gradient(180deg,rgba(247,244,239,.80) 0%,rgba(247,244,239,.72) 60%,rgba(247,244,239,.55) 100%)!important; } .elementor-location-single .prx-ptitle, .elementor-location-single .elementor > .e-con.e-parent:first-child h1, #pr-home #n-hero h1, .elementor-location-single .elementor > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead{max-width:100%!important} } /* ============================================================ 41. STARTSEITE: BILD ZUGESCHNITTEN STATT VOLLSTAENDIG Unbeschnitten diktierte das Bildformat die Hoehe (75vw = 960 px, auf 1920er-Schirm 1440 px). Jetzt formatfuellend auf eine feste Hoehe zugeschnitten — wie auf den Unterseiten. ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-size:cover,cover,cover!important; background-position:center 42%,center 42%,center 42%!important; min-height:min(100vh,860px)!important; padding:150px 0 90px!important; } /* ============================================================ 42. GOLD ALS TEXTFARBE GENERELL DUNKLER #A5813C erreicht auf hellem Grund nur 3,3:1. Betraf verstreut „Weiterlesen", E-Mail-Links, Ziffern und Beschriftungen auf Aktuelles / Karriere / Standort. Statt jeden Einzelfall zu jagen: --gold auf #8A6A2B abdunkeln (4,6:1 auf Marmor, 5,0:1 auf Weiss). Linien und Rahmen werden dadurch nur unwesentlich tiefer — dort gilt keine Textschwelle. --gold-lt bleibt unveraendert; es steht ausschliesslich auf dunklem Grund (CTA-Band, Fusszeile) und ist dort korrekt. ============================================================ */ :root{--gold:#8A6A2B} /* ============================================================ 43. TEAM-PROFILSEITEN ANGLEICHEN Sie nutzen #n-mhero statt #n-hero und blieben deshalb bei allen Unterseiten-Regeln aussen vor. ============================================================ */ #pr-home #n-mhero{ background-image: linear-gradient(180deg,rgba(250,247,241,.13) 0%,rgba(250,247,241,.13) 100%), var(--hero-foto)!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; background-color:#F7F4EF!important; box-sizing:border-box!important; min-height:760px!important; display:flex!important;align-items:center!important; padding-top:132px!important;padding-bottom:56px!important; position:relative;border-bottom:1px solid rgba(165,129,60,.45)!important; } #pr-home #n-mhero::after{ content:"";position:absolute;inset:0;pointer-events:none;display:block!important;z-index:0; background:linear-gradient(90deg, rgba(247,244,239,.94) 0%,rgba(247,244,239,.86) 26%, rgba(247,244,239,.55) 46%,rgba(247,244,239,.20) 66%,rgba(247,244,239,0) 84%)!important; } #pr-home #n-mhero > *{position:relative;z-index:1} #pr-home #n-mhero .eyebrow,#pr-home #n-mhero h1,#pr-home #n-mhero .lead{ text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 9px rgba(255,255,255,.45)!important; } #pr-home #n-mhero h1{color:#16261E!important;-webkit-text-fill-color:#16261E!important} /* Portraet steht jetzt auf dem Foto -> Passepartout */ #pr-home #n-mportrait .pframe,#pr-home #n-mhero .pframe{ box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(165,129,60,.45),0 30px 60px -34px rgba(22,38,30,.5)!important; } @media(max-width:900px){ #pr-home #n-mhero{min-height:560px!important;padding-top:120px!important} #pr-home #n-mhero::after{ background:linear-gradient(180deg,rgba(247,244,239,.80) 0%,rgba(247,244,239,.72) 60%,rgba(247,244,239,.55) 100%)!important; } } /* --lime ist der Alt-Akzent aus dem Ursprungsdesign; viele Seiten-CSS greifen darauf zu (z.B. #pr-home .pcard .rd). Muss dieselbe dunklere Goldstufe bekommen, sonst bleiben Einzelstellen bei 3,3:1. */ :root{--lime:#8A6A2B} /* Datums-Schildchen auf Aktuelles: sein Grund ist der Goldton, der mit Abschnitt 42 dunkler wurde -> dunkle Schrift darauf nur noch 3,3:1. Helle Schrift bringt es auf 5,0:1. */ #pr-home .date,#pr-home .date *{color:#FFFDF7!important} #pr-home .date .m{opacity:.92} /* ============================================================ 44. VERLAUFSTEXT ÜBERALL ABSCHALTEN, NICHT NUR AUF DER STARTSEITE .shine ist der animierte Gold-Verlaufstext des Ursprungsdesigns. Er steckt im Akzentwort JEDER Bespoke-Überschrift — „Zivilrecht" (Leistungen), „Fall" (Kontakt), „Recht" (Team), „Wien" (Standort), „High Performance" (Karriere), „guten Recht" (Erstberatung), „Rechtswelt" (Aktuelles). Auf hellem Grund ist er unlesbar. Abschnitt 33 hat nur den Startseiten-Hero erfasst. Loesung mit `inherit` statt fester Farbe: Damit uebernimmt das Akzentwort immer die Farbe seiner Ueberschrift — Tinte in den hellen Baendern, Creme im dunklen CTA-Band und in der Fusszeile. Eine Regel, alle Zusammenhaenge richtig. ============================================================ */ #pr-home .shine, .elementor-location-single .shine{ background:none!important;background-image:none!important; -webkit-background-clip:border-box!important;background-clip:border-box!important; color:inherit!important;-webkit-text-fill-color:inherit!important; animation:none!important; } /* ============================================================ 45. ★ KORREKTUR: UNTERSEITEN-SELEKTOR WAR FALSCH Alle bisherigen Unterseiten-Regeln hingen an .elementor-location-single .elementor > .e-con.e-parent Auf der echten Seite gibt es diesen .elementor-Zwischen- container NICHT — die Baender sind DIREKTE Kinder von .elementor-location-single. Treffer: 0. Folge: Hintergruende blieben dunkel, waehrend die Textfarben (die an .elementor-location-single h1/p haengen) sehr wohl auf Tinte gingen -> dunkel auf dunkel. Hier alles noch einmal mit dem richtigen Selektor. ============================================================ */ /* --- Auftaktband --- */ .elementor-location-single > .e-con.e-parent:first-child{ background-color:#F7F4EF!important; background-image: linear-gradient(180deg,rgba(250,247,241,.13) 0%,rgba(250,247,241,.13) 100%), var(--hero-foto)!important; background-size:cover,cover!important; background-position:center 42%,center 42%!important; background-repeat:no-repeat,no-repeat!important; box-shadow:none!important; box-sizing:border-box!important; min-height:760px!important; display:flex!important;align-items:center!important; padding-top:132px!important;padding-bottom:56px!important; position:relative;overflow:hidden; border-bottom:1px solid rgba(165,129,60,.45)!important; } .elementor-location-single > .e-con.e-parent:first-child::before{display:none!important} .elementor-location-single > .e-con.e-parent:first-child::after{ content:"";position:absolute;inset:0;pointer-events:none;display:block!important;z-index:0; background:linear-gradient(90deg, rgba(247,244,239,.94) 0%,rgba(247,244,239,.86) 26%, rgba(247,244,239,.55) 46%,rgba(247,244,239,.20) 66%,rgba(247,244,239,0) 84%)!important; } .elementor-location-single > .e-con.e-parent:first-child > *{position:relative;z-index:1} /* --- Inhaltsbaender: hell --- */ .elementor-location-single > .e-con.e-parent:nth-child(n+2){ background-color:#F7F4EF!important;background-image:none!important; } /* --- Texte im Auftaktband --- */ .elementor-location-single > .e-con.e-parent:first-child h1, .elementor-location-single > .e-con.e-parent:first-child .prx-ptitle{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; font-size:clamp(32px,3.6vw,50px)!important;line-height:1.06!important;letter-spacing:-1.1px!important; max-width:min(760px,64%)!important; text-shadow:0 1px 2px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.5)!important; } .elementor-location-single > .e-con.e-parent:first-child .prx-hsub{ color:#16261E!important;max-width:min(660px,58%)!important; text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 8px rgba(255,255,255,.45)!important; } .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow{ display:inline-flex!important;width:fit-content!important;align-items:center!important;gap:10px!important; background:rgba(250,247,241,.94)!important; border:1px solid rgba(165,129,60,.38)!important;border-radius:2px!important; padding:8px 15px 8px 13px!important; font-size:12.5px!important;letter-spacing:2.6px!important;font-weight:700!important; color:#16261E!important;-webkit-text-fill-color:#16261E!important; text-shadow:none!important;margin-bottom:22px!important; box-shadow:0 2px 12px -7px rgba(22,38,30,.4); } .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow::before{ width:22px!important;height:2px!important;background:#8A6A2B!important;opacity:1!important;flex:0 0 auto!important; } /* --- Inhalt: Tinte auf hell --- */ .elementor-location-single > .e-con.e-parent:nth-child(n+2) h1, .elementor-location-single > .e-con.e-parent:nth-child(n+2) h2, .elementor-location-single > .e-con.e-parent:nth-child(n+2) h3, .elementor-location-single > .e-con.e-parent:nth-child(n+2) h4{ color:#16261E!important;-webkit-text-fill-color:#16261E!important;text-shadow:none!important; } .elementor-location-single > .e-con.e-parent:nth-child(n+2) p, .elementor-location-single > .e-con.e-parent:nth-child(n+2) li, .elementor-location-single > .e-con.e-parent:nth-child(n+2) td, .elementor-location-single > .e-con.e-parent:nth-child(n+2) th, .elementor-location-single > .e-con.e-parent:nth-child(n+2) blockquote{ color:#4F5A53!important;text-shadow:none!important; } .elementor-location-single > .e-con.e-parent:nth-child(n+2) a{color:#846529!important} .elementor-location-single > .e-con.e-parent:nth-child(n+2) a:hover{color:#16261E!important} @media(max-width:900px){ .elementor-location-single > .e-con.e-parent:first-child{ min-height:520px!important;padding-top:120px!important;padding-bottom:44px!important; } .elementor-location-single > .e-con.e-parent:first-child::after{ background:linear-gradient(180deg,rgba(247,244,239,.80) 0%,rgba(247,244,239,.72) 60%,rgba(247,244,239,.55) 100%)!important; } .elementor-location-single > .e-con.e-parent:first-child h1, .elementor-location-single > .e-con.e-parent:first-child .prx-ptitle, .elementor-location-single > .e-con.e-parent:first-child .prx-hsub{max-width:100%!important} } /* ============================================================ 46. AUFTAKTBAENDER ZENTRIEREN Text mittig statt linksbuendig — auf allen Unterseiten-Typen (Single-Template, Bespoke #n-hero, Profile #n-mhero). Der Marmoranlauf von links wird dadurch sinnlos: er ersetzt sich durch einen mittigen Lichthof, sonst saesse der Text direkt auf dem Luster. Gerechnet: 13 % Grundschleier + 28 % Hof = 37 % in der Mitte. Am Tiefpunkt des Fotos (107) ergibt das 6,1:1, im Mittel 7,9:1 — noetig sind 4,5:1. Zu den Raendern laeuft der Hof aus, dort bleibt das Foto offen. ============================================================ */ .elementor-location-single > .e-con.e-parent:first-child::after, #pr-home #n-hero::after, #pr-home #n-mhero::after{ background:radial-gradient(ellipse 74% 66% at 50% 50%, rgba(247,244,239,.28) 0%, rgba(247,244,239,.18) 52%, rgba(247,244,239,.04) 80%, rgba(247,244,239,0) 100%)!important; } /* Inhalt mittig ausrichten */ .elementor-location-single > .e-con.e-parent:first-child, #pr-home #n-hero,#pr-home #n-mhero{ text-align:center!important; justify-content:center!important; } .elementor-location-single > .e-con.e-parent:first-child .e-con-inner, #pr-home #n-hero .e-con-inner,#pr-home #n-herowrap, #pr-home #n-mhero .e-con-inner,#pr-home #n-mherowrap{ padding-right:0!important;padding-left:0!important; margin-left:auto!important;margin-right:auto!important; align-items:center!important;text-align:center!important; } /* Ueberschrift + Untertitel mittig und mittig begrenzt */ .elementor-location-single > .e-con.e-parent:first-child h1, .elementor-location-single > .e-con.e-parent:first-child .prx-ptitle, #pr-home #n-hero h1,#pr-home #n-mhero h1{ max-width:min(900px,86%)!important; margin-left:auto!important;margin-right:auto!important; text-align:center!important; } .elementor-location-single > .e-con.e-parent:first-child .prx-hsub, #pr-home #n-hero .lead,#pr-home #n-mhero .lead{ max-width:min(700px,80%)!important; margin-left:auto!important;margin-right:auto!important; text-align:center!important; } /* Die Eyebrow-Tafel ist inline-flex -> ueber auto-Raender zentrieren */ .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow, #pr-home #n-hero .eyebrow,#pr-home #n-mhero .eyebrow{ margin-left:auto!important;margin-right:auto!important; } /* Elementor-Widget-Wrapper mittig, sonst bleibt die Tafel links kleben */ .elementor-location-single > .e-con.e-parent:first-child .elementor-widget-heading, .elementor-location-single > .e-con.e-parent:first-child .elementor-widget-html, .elementor-location-single > .e-con.e-parent:first-child .elementor-widget-shortcode, #pr-home #n-hero .elementor-widget-heading,#pr-home #n-hero .elementor-widget-html, #pr-home #n-mhero .elementor-widget-heading,#pr-home #n-mhero .elementor-widget-html{ text-align:center!important; } /* Schaltflaechen im Auftaktband mittig */ .elementor-location-single > .e-con.e-parent:first-child .hero-cta, #pr-home #n-hero .hero-cta,#pr-home #n-mhero .hero-cta, #pr-home #n-mbtns{justify-content:center!important} /* ============================================================ 47. ★ TEAM-KACHELN: NAMEN WAREN SCHWARZ AUF SCHWARZ Abschnitt 20 hat .tname auf Tinte gesetzt — in der Annahme, die Kachel habe hellen Grund. Sie hat aber das PORTRAETFOTO als Grund, und die Portraets sind Studioaufnahmen auf fast schwarzem Hintergrund. Ergebnis: dunkle Schrift auf dunklem Foto, auf allen 12 Kacheln praktisch unlesbar. Namen daher wieder hell, plus ein Verlauf am Kachelfuss, damit sie unabhaengig vom Bildinhalt stehen. Ausserdem: der Pfeil .tgo trug noch das alte Lime als Grund. ============================================================ */ #pr-home [id^="t-m"]{position:relative!important;overflow:hidden!important} #pr-home [id^="t-m"]::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:46%; background:linear-gradient(180deg,rgba(10,18,14,0) 0%,rgba(10,18,14,.55) 55%,rgba(10,18,14,.86) 100%); pointer-events:none;z-index:1; } #pr-home [id^="t-m"] .tname,#pr-home .tname{ color:#FAF6EC!important;-webkit-text-fill-color:#FAF6EC!important; position:relative;z-index:2; text-shadow:0 1px 3px rgba(0,0,0,.55); } #pr-home [id^="t-m"] .trole,#pr-home .trole{ color:#CBD3C8!important;position:relative;z-index:2; text-shadow:0 1px 3px rgba(0,0,0,.5); } /* Pfeil: Lime-Rest raus, Gold rein */ #pr-home .tgo{ background:rgba(201,167,95,.22)!important; color:#FAF6EC!important; border:1px solid rgba(201,167,95,.45)!important; position:relative;z-index:2; } #pr-home [id^="t-m"]:hover .tgo{background:rgba(201,167,95,.38)!important} /* Overlay-Link muss ueber dem Verlauf bleiben */ #pr-home [id^="t-m"] > a,#pr-home [id^="t-m"] a[style*="inset"]{z-index:3!important} /* ============================================================ 48. FORMULAR: AUSWAHLFELDER WAREN UNSICHTBAR Radiobuttons und Checkbox trugen noch den weissen Rahmen des Dunkel-Designs (rgba(255,255,255,.3)) — auf dem hellen Formular praktisch nicht zu sehen. Dazu fehlte durchgehend eine sichtbare Fokusmarkierung fuer Tastaturbedienung. ============================================================ */ .wpcf7 input[type=radio],.wpcf7 input[type=checkbox]{ -webkit-appearance:none!important;appearance:none!important; width:20px!important;height:20px!important;flex:0 0 20px!important; background:#FFFFFF!important; border:1.5px solid rgba(22,38,30,.38)!important; box-shadow:inset 0 1px 2px rgba(22,38,30,.08)!important; cursor:pointer;transition:border-color .2s,background .2s; position:relative;margin:0 8px 0 0!important;vertical-align:middle; } .wpcf7 input[type=radio]{border-radius:50%!important} .wpcf7 input[type=checkbox]{border-radius:3px!important} .wpcf7 input[type=radio]:hover,.wpcf7 input[type=checkbox]:hover{border-color:#8A6A2B!important} .wpcf7 input[type=radio]:checked,.wpcf7 input[type=checkbox]:checked{ background:linear-gradient(135deg,#B08C42,#8A6A2B)!important; border-color:#8A6A2B!important; } .wpcf7 input[type=radio]:checked::after{ content:"";position:absolute;inset:4px;border-radius:50%;background:#FFFDF7; } .wpcf7 input[type=checkbox]:checked::after{ content:"";position:absolute;left:6px;top:2px;width:5px;height:10px; border:solid #FFFDF7;border-width:0 2px 2px 0;transform:rotate(42deg); } /* Sichtbare Fokusmarkierung — gilt fuer die ganze Seite, nicht nur das Formular */ #pr-home a:focus-visible,#pr-home button:focus-visible, #pr-home input:focus-visible,#pr-home select:focus-visible,#pr-home textarea:focus-visible, #prHd a:focus-visible,#prFt a:focus-visible, .elementor-location-single a:focus-visible, .wpcf7 input:focus-visible,.wpcf7 select:focus-visible,.wpcf7 textarea:focus-visible{ outline:2px solid #8A6A2B!important;outline-offset:3px!important; border-radius:2px; } /* Auf dunklem Grund (CTA-Band, Fusszeile) helleres Gold, sonst unsichtbar */ #pr-home #h-cta a:focus-visible,#pr-home #n-cta a:focus-visible,#prFt a:focus-visible{ outline-color:#E7D5AC!important; } /* ============================================================ 49. EYEBROW-TAFEL AUF SCHMALEN SCHIRMEN „PICHLER RECHTSANWALT · WIEN & DORNBIRN" braucht bei 12,5px und 2,6px Sperrung rund 450px — auf 390px-Schirmen bricht die Tafel auf zwei Zeilen (gemessen 291x56px) und wirkt klobig. Schrift und Sperrung enger, unter 480px faellt der Zierstrich weg; damit passt sie einzeilig. ============================================================ */ @media(max-width:900px){ #pr-home #h-hero .eyebrow,#pr-home .hero .eyebrow, #pr-home #n-hero .eyebrow,#pr-home #n-mhero .eyebrow, .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow{ font-size:10.5px!important;letter-spacing:1.4px!important; padding:7px 12px!important;gap:8px!important; white-space:nowrap!important;max-width:calc(100vw - 44px)!important; } } @media(max-width:480px){ #pr-home #h-hero .eyebrow::before,#pr-home .hero .eyebrow::before, #pr-home #n-hero .eyebrow::before,#pr-home #n-mhero .eyebrow::before, .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow::before{ display:none!important; } #pr-home #h-hero .eyebrow,#pr-home .hero .eyebrow, #pr-home #n-hero .eyebrow,#pr-home #n-mhero .eyebrow, .elementor-location-single > .e-con.e-parent:first-child .prx-eyebrow{ font-size:10px!important;letter-spacing:1.1px!important;padding:7px 13px!important; } } /* ============================================================ 50. ★ TEAM-PROFILSEITEN — vier Befunde a) PORTRAET WAR WEG: Die Zentrierung aus Abschnitt 46 hat das urspruenglich ZWEISPALTIGE Profil-Layout gesprengt. Das Portraet (729px) ist hoeher als die Inhaltsbox (572px), landete bei top:-1026px und wurde von overflow:hidden abgeschnitten. Jetzt bewusst einspaltig: Portraet oben mittig, Name und Schaltflaechen darunter. b) Eyebrow-Tafel: Abschnitt 37 listete #n-mhero nicht auf. c) Fuenf Links standen noch in Alt-Gruen rgb(62,125,44). d) Skill-Balken waren schwarz statt gold. ============================================================ */ /* --- a) Hero einspaltig, Portraet passend --- */ #pr-home #n-mhero{ flex-direction:column!important;align-items:center!important;justify-content:center!important; overflow:visible!important; } #pr-home #n-mherowrap,#pr-home #n-mhero .e-con-inner{ flex-direction:column!important;align-items:center!important;width:100%!important; } #pr-home #n-mportrait{ width:min(240px,54vw)!important;flex:0 0 auto!important; margin:0 auto 26px!important;height:auto!important; } #pr-home #n-mportrait img{ width:100%!important;height:auto!important;aspect-ratio:3/4;object-fit:cover; border-radius:3px!important; box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(165,129,60,.45),0 26px 54px -30px rgba(22,38,30,.5)!important; } #pr-home #n-mtext{align-items:center!important;text-align:center!important;width:100%!important} #pr-home #n-mbtns{justify-content:center!important;flex-wrap:wrap!important} /* --- b) Eyebrow-Tafel auch auf den Profilseiten --- */ #pr-home #n-mhero .eyebrow{ display:inline-flex!important;width:fit-content!important;align-items:center!important;gap:10px!important; background:rgba(250,247,241,.94)!important; border:1px solid rgba(165,129,60,.38)!important;border-radius:2px!important; padding:8px 15px 8px 13px!important; font-size:12.5px!important;letter-spacing:2.6px!important;font-weight:700!important; color:#16261E!important;text-shadow:none!important;margin:0 auto 22px!important; box-shadow:0 2px 12px -7px rgba(22,38,30,.4); } #pr-home #n-mhero .eyebrow .elementor-heading-title,#pr-home #n-mhero .eyebrow span{ color:#16261E!important;-webkit-text-fill-color:#16261E!important; font-size:inherit!important;letter-spacing:inherit!important;text-shadow:none!important; } #pr-home #n-mhero .eyebrow::before{ width:22px!important;height:2px!important;background:#8A6A2B!important;opacity:1!important;flex:0 0 auto!important; } /* --- c) Alt-Gruene Links auf Gold --- */ #pr-home .mback,#pr-home .mbio a,#pr-home #n-mwrap a, #pr-home .mwrap a,#pr-home .prose a{color:#846529!important} #pr-home .mback:hover,#pr-home .mbio a:hover,#pr-home #n-mwrap a:hover, #pr-home .mwrap a:hover,#pr-home .prose a:hover{color:#16261E!important} /* --- d) Skill-Balken in Gold statt Schwarz --- */ #pr-home .skill-track{background:rgba(22,38,30,.10)!important;border-radius:999px!important;overflow:hidden} #pr-home .skill-track > *{ background:linear-gradient(90deg,#8A6A2B,#C9A75F)!important;border-radius:999px!important; } #pr-home .skill-row .skill-name,#pr-home .skill-row{color:#16261E!important} @media(max-width:900px){ #pr-home #n-mportrait{width:min(200px,58vw)!important;margin-bottom:20px!important} } /* Nachtrag zu 50a: #n-mherowrap ist ein GRID (zwei Spalten), kein Flex — flex-direction lief deshalb ins Leere. Einspaltig ueber grid-template-columns. */ #pr-home #n-mherowrap{ display:grid!important; grid-template-columns:1fr!important; justify-items:center!important; align-items:center!important; gap:0!important; max-width:900px!important;margin:0 auto!important; } #pr-home #n-mportrait,#pr-home #n-mtext{grid-column:1!important;width:auto!important} #pr-home #n-mtext{max-width:760px!important} /* Korrektur des Nachtrags: width:auto liess das Portraet auf 0 schrumpfen, weil das Bild darin width:100% hat. Feste Breite zurueck. */ #pr-home #n-mportrait{width:min(240px,54vw)!important;justify-self:center!important} #pr-home #n-mtext{width:100%!important;max-width:760px!important;justify-self:center!important} /* ============================================================ 51. ★ GOLD-SCHALTFLAECHEN: VERLAUF WAR ZU HELL Befund aus der Code-Pruefung, gegengeprueft und bestaetigt. Verlauf war linear-gradient(135deg,#B08C42,#8A6A2B 46%,#C7A45C). Mit Tinte darauf: 5,02 / 3,14 / 6,68:1 — der dunkelste Stop sitzt bei 46 %, also unter der zentrierten Beschriftung; rund 80 % der Schriftflaeche lagen unter AA. Entscheidend: fuer DIESEN Verlauf gibt es keine Textfarbe, die durchgehend besteht (Weiss faellt auf #C7A45C auf 2,33:1). Also den Verlauf selbst abdunkeln und auf helle Schrift gehen: #8A6A2B / #6E5320 / #8A6A2B mit #FFFDF7 = 4,94 / 7,07 / 4,94:1. ============================================================ */ #pr-home .btn-lime, #pr-home .hdbtn .elementor-button,#prHd .hdbtn .elementor-button, #pr-home .wp-block-button__link,#pr-home .wp-element-button, .wpcf7 input[type=submit]{ background:linear-gradient(135deg,#8A6A2B 0%,#6E5320 46%,#8A6A2B 100%)!important; color:#FFFDF7!important;-webkit-text-fill-color:#FFFDF7!important; box-shadow:0 12px 28px -16px rgba(110,83,32,.75),inset 0 1px 0 rgba(255,255,255,.18)!important; } #prHd .hdbtn .elementor-button svg,#prHd .hdbtn .elementor-button i{fill:#FFFDF7!important;color:#FFFDF7!important} #pr-home .btn-lime:hover, #pr-home .hdbtn .elementor-button:hover,#prHd .hdbtn .elementor-button:hover, #pr-home .wp-block-button__link:hover,#pr-home .wp-element-button:hover, .wpcf7 input[type=submit]:hover{ background:linear-gradient(135deg,#9B7832 0%,#7E6027 46%,#9B7832 100%)!important; color:#FFFDF7!important;-webkit-text-fill-color:#FFFDF7!important; box-shadow:0 20px 42px -16px rgba(110,83,32,.85),inset 0 1px 0 rgba(255,255,255,.22)!important; } /* Das Chip „Seit 2008" traegt denselben Verlauf */ #pr-home .hmedia .chip,#h-media .chip{ background:linear-gradient(135deg,#8A6A2B,#6E5320)!important; color:#FFFDF7!important;-webkit-text-fill-color:#FFFDF7!important; } /* Fokusring auf dem Goldknopf: Tinte statt Gold, sonst verschwindet er */ .wpcf7 input[type=submit]:focus-visible, #pr-home .btn-lime:focus-visible, #prHd .hdbtn .elementor-button:focus-visible, #pr-home .wp-element-button:focus-visible{ outline:3px solid #16261E!important;outline-offset:3px!important; } /* ============================================================ 52. BILDAUSSCHNITT NACH UNTEN Bisher „center 42%" — das zeigte Stuckdecke, Luster und nur den oberen Wandbereich. Auf 70% gerueckt: der Ausschnitt wandert im Bild nach unten, Wand mit Wandleuchten und der Marmortresen kommen ins Bild, von der Decke bleibt der Ansatz. (Bei background-size:cover richtet der Prozentwert den gleichen Punkt in Bild und Rahmen aneinander aus — hoeherer Wert = tieferer Bildbereich.) ============================================================ */ #pr-home #h-hero,#pr-home .hero{ background-position:center 70%,center 70%,center 70%!important; } .elementor-location-single > .e-con.e-parent:first-child, #pr-home #n-hero,#pr-home #n-mhero{ background-position:center 70%,center 70%!important; } @media(max-width:900px){ #pr-home #h-hero,#pr-home .hero{ background-position:center 70%,center 70%,center 70%!important; } .elementor-location-single > .e-con.e-parent:first-child, #pr-home #n-hero,#pr-home #n-mhero{ background-position:center 70%,center 70%!important; } } /* Initialen-Fläche für Team-Mitglieder ohne Porträt (derzeit Mag. Paul Soyka). Gleiche Proportion wie die Fotokacheln, damit das Raster nicht springt. */ #pr-home .tph-ph{ aspect-ratio:3/4;width:100%;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#16261E 0%,#0C1712 100%); } #pr-home .tph-ph span{ font-family:'Spectral',serif;font-size:clamp(38px,4vw,58px);font-weight:300; color:#C9A75F;letter-spacing:3px; } /* Anrisstext auf den Beitragskarten (Aktuelles) — war auf der alten Seite vorhanden */ #pr-home .pcard .pex{ margin:10px 0 0;font-size:14.5px;line-height:1.65;color:#5E6A62; } /* ============================================================ 53. FLIESSTEXT-SEKTIONEN GLOBAL SETZEN Die .prose-Gestaltung lag bisher nur im seiteneigenen CSS der Bespoke-Seiten. Der auf Startseite und Kontakt wieder- hergestellte Text lief deshalb randlos über die volle Breite (Zeilen von ~1500px). Hier als globale Regel, mit Satzbreite, Rhythmus und Stuckleisten-Linie über den Zwischenüberschriften. ============================================================ */ #pr-home #n-prosesec{ padding:88px 0 96px!important; background:linear-gradient(180deg,#FBF9F5 0%,#F7F4EF 100%)!important; border-top:1px solid rgba(165,129,60,.20)!important; border-bottom:1px solid rgba(165,129,60,.20)!important; } #pr-home #n-prosewrap{ display:block!important;max-width:1240px!important;margin:0 auto!important;padding:0 40px!important; } #pr-home #n-prosewrap>.elementor-widget,#pr-home #n-prosewrap .prose{margin-left:auto;margin-right:auto} #pr-home .prose{ max-width:760px!important;margin:0 auto!important; font-family:'Manrope',sans-serif; font-size:17.5px!important;line-height:1.82!important; color:#4F5A53!important; } #pr-home .prose h2{ font-family:'Spectral',serif!important;font-weight:400!important; font-size:clamp(28px,3vw,36px)!important;line-height:1.16!important;letter-spacing:-.6px!important; color:#16261E!important;margin:0 0 .6em!important;position:relative;padding-top:26px; } /* feine Doppellinie über der Hauptüberschrift — greift das Stuckmotiv auf */ #pr-home .prose h2::before{ content:"";position:absolute;top:0;left:0;width:64px;height:3px; background: linear-gradient(90deg,#8A6A2B,rgba(165,129,60,.35)) 0 0/100% 1px no-repeat, linear-gradient(90deg,rgba(165,129,60,.35),transparent) 0 3px/100% 1px no-repeat; } #pr-home .prose h3{ font-family:'Spectral',serif!important;font-weight:500!important; font-size:clamp(21px,2.2vw,25px)!important;line-height:1.28!important; color:#16261E!important;margin:2em 0 .55em!important; } #pr-home .prose h4{ font-family:'Spectral',serif!important;font-weight:600!important;font-size:19px!important; color:#16261E!important;margin:1.8em 0 .5em!important; } #pr-home .prose p{margin:0 0 1.25em!important} /* Einleitungsabsatz etwas größer — führt ins Thema */ #pr-home .prose h2 + p{font-size:19px!important;line-height:1.75!important;color:#3E4B44!important} #pr-home .prose a{color:#846529!important;text-decoration:underline;text-underline-offset:3px} #pr-home .prose a:hover{color:#16261E!important} #pr-home .prose strong,#pr-home .prose b{color:#16261E!important;font-weight:600} #pr-home .prose ul,#pr-home .prose ol{margin:0 0 1.3em 1.2em!important} #pr-home .prose li{margin:.45em 0!important} #pr-home .prose blockquote{ border-left:3px solid #8A6A2B!important;padding:6px 0 6px 22px!important;margin:1.5em 0!important; font-family:'Spectral',serif!important;font-style:italic;color:#2C3A32!important; } @media(max-width:760px){ #pr-home #n-prosesec{padding:56px 0 62px!important} #pr-home #n-prosewrap{padding:0 22px!important} #pr-home .prose{font-size:16.5px!important;line-height:1.78!important} #pr-home .prose h2 + p{font-size:17.5px!important} } /* ============================================================ 54. BEITRAGSKARTEN GLOBAL .pgrid/.pcard waren nur im seiteneigenen CSS von „Aktuelles" definiert. Der neue Beitragsabschnitt auf der Startseite stand deshalb ohne Raster und ohne Kartenoptik da (Karten randlos untereinander, Datum fast unsichtbar). Hier global und in der Imperial-Palette: Marmorkarte mit Goldkante, Datumsplakette in Gold, klare Hover-Anhebung. ============================================================ */ #pr-home .pgrid{ display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important; } #pr-home .pcard{ display:flex!important;flex-direction:column!important;gap:14px!important; padding:30px 28px 26px!important; background:linear-gradient(180deg,#FFFFFF,#FBF8F2)!important; border:1px solid rgba(22,38,30,.13)!important;border-radius:3px!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -30px rgba(22,38,30,.45)!important; transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s!important; text-decoration:none!important; } #pr-home .pcard:hover{ transform:translateY(-6px)!important; border-color:rgba(165,129,60,.45)!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 62px -32px rgba(22,38,30,.5), 0 0 0 1px rgba(165,129,60,.30)!important; } /* Datumsplakette */ #pr-home .pcard .date{ align-self:flex-start!important; background:linear-gradient(135deg,#8A6A2B,#6E5320)!important; color:#FFFDF7!important;border-radius:2px!important; padding:9px 13px!important;text-align:center!important; font-family:'Spectral',serif!important;line-height:1.05!important; box-shadow:0 8px 18px -10px rgba(110,83,32,.6); } #pr-home .pcard .date *{color:#FFFDF7!important} #pr-home .pcard .date .d{font-size:23px!important;font-weight:600!important;display:block} #pr-home .pcard .date .m{font-size:11px!important;letter-spacing:1.2px!important;text-transform:uppercase;display:block;opacity:.92} /* Titel und Anriss */ #pr-home .pcard h3{ font-family:'Spectral',serif!important;font-weight:500!important; font-size:19px!important;line-height:1.32!important;color:#16261E!important;margin:0!important; } #pr-home .pcard .pex{ margin:0!important;font-size:14.5px!important;line-height:1.66!important;color:#5E6A62!important; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } #pr-home .pcard .rd{ color:#846529!important;font-size:14px!important;font-weight:600!important; margin-top:auto!important;padding-top:4px;display:inline-flex;gap:8px;transition:gap .3s; } #pr-home .pcard:hover .rd{gap:14px} /* Kopfzeile des Abschnitts: Knopf sauber neben die Überschrift */ #pr-home .head-row{align-items:flex-end!important;gap:30px!important;margin-bottom:44px!important} #pr-home .head-row .lead{margin:14px 0 0!important;max-width:520px!important} @media(max-width:900px){ #pr-home .pgrid{grid-template-columns:1fr 1fr!important} #pr-home .head-row{flex-direction:column;align-items:flex-start!important} } @media(max-width:600px){ #pr-home .pgrid{grid-template-columns:1fr!important} #pr-home .pcard{padding:24px 22px 22px!important} } /* >>> ZUSATZ CLAUDE — START */ /* ============================================================ 18. FOOTER-KURZANFRAGE (#prFt-form) CF7-Formular 990428, global im Footer-Template 990390. Das Formular sitzt als Marmorkarte auf dem dunklen Fuss und erbt bewusst die geprueften Bedienelemente aus Abschnitt 15/17 (Felder, Checkbox, Goldknopf, Fokusringe). Hier steht nur, was fuer diese Platzierung dazukommt. ============================================================ */ #prFt-form{ display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center; margin:0 0 54px!important;padding-bottom:50px!important; border-bottom:1px solid rgba(201,167,95,.18)!important; } @media(max-width:900px){#prFt-form{grid-template-columns:1fr!important;gap:30px;align-items:start}} /* --- Intro-Spalte (hell auf dunkel) --- */ #prFt #prFt-form .ff-eyebrow{ color:var(--gold-lt)!important;font-family:'Manrope',sans-serif;font-size:11px; font-weight:700;letter-spacing:3px;text-transform:uppercase;margin:0 0 13px!important;line-height:1.4; } #prFt #prFt-form h3{ font-family:'Spectral',serif;font-size:29px;line-height:1.24;font-weight:400; color:#F3EEE3!important;margin:0 0 15px!important;letter-spacing:-.4px; } #prFt #prFt-form h3 em{font-style:italic;color:var(--gold-lt)!important} #prFt #prFt-form .ff-lead{color:#9BA69D!important;font-size:14.5px;line-height:1.85;margin:0!important;max-width:380px} #prFt #prFt-form .ff-alt{margin:20px 0 0!important;font-size:14px;line-height:1.95;color:#8C978E!important} #prFt #prFt-form .ff-alt a{color:var(--gold-lt)!important;border-bottom:1px solid rgba(201,167,95,.32);padding-bottom:1px} #prFt #prFt-form .ff-alt a:hover{color:#E7D5AC!important;border-bottom-color:rgba(231,213,172,.6)} /* --- Marmorkarte um das Formular --- */ #prFt #prFt-form .wpcf7{ background:var(--panel)!important;border:1px solid var(--line-gold)!important; border-radius:3px!important;padding:30px 30px 28px!important;margin:0!important; box-shadow:0 26px 54px -30px rgba(6,14,10,.85)!important; } @media(max-width:560px){#prFt #prFt-form .wpcf7{padding:22px 20px 20px!important}} #prFt #prFt-form .wpcf7 p{color:var(--ink)!important;font-size:inherit!important;line-height:inherit!important} #prFt #prFt-form .wpcf7 a{color:var(--gold-ink,#846529)!important;text-decoration:underline!important;text-underline-offset:2px} #prFt #prFt-form .wpcf7 .hidden-fields-container{display:none} /* --- Feldraster: zwei Spalten fuer die vier Kurzfelder --- */ #prFt-form .wpcf7 form.wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0} #prFt-form .wpcf7 form.wpcf7-form > *{grid-column:1 / -1;margin:0!important} #prFt-form .wpcf7 form.wpcf7-form > p:has(.wpcf7-form-control-wrap[data-name="vorname"]), #prFt-form .wpcf7 form.wpcf7-form > p:has(.wpcf7-form-control-wrap[data-name="nachname"]), #prFt-form .wpcf7 form.wpcf7-form > p:has(.wpcf7-form-control-wrap[data-name="telefon"]), #prFt-form .wpcf7 form.wpcf7-form > p:has(.wpcf7-form-control-wrap[data-name="your-email"]){grid-column:span 1} @media(max-width:620px){ #prFt-form .wpcf7 form.wpcf7-form{grid-template-columns:1fr} #prFt-form .wpcf7 form.wpcf7-form > p{grid-column:1 / -1!important} } /* --- Beschriftungen --- */ #prFt #prFt-form .wpcf7 label{ display:block!important;color:#5E6A62!important;font-family:'Manrope',sans-serif; font-size:11px!important;font-weight:700!important;letter-spacing:1.2px!important; text-transform:uppercase!important;line-height:1.5!important; } #prFt-form .wpcf7 label br{display:none} #prFt-form .wpcf7 .wpcf7-form-control-wrap{display:block;margin-top:8px} /* --- Felder: Groesse und Innenabstand (Farben kommen aus Abschnitt 15) --- */ #prFt-form .wpcf7 input[type=text], #prFt-form .wpcf7 input[type=email], #prFt-form .wpcf7 input[type=tel], #prFt-form .wpcf7 textarea{ width:100%!important;box-sizing:border-box!important;display:block!important; padding:11px 13px!important;font-family:'Manrope',sans-serif!important; font-size:14.5px!important;line-height:1.5!important; } #prFt-form .wpcf7 textarea{height:116px!important;min-height:116px!important;resize:vertical} /* --- Datenschutz-Zeile --- */ #prFt #prFt-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0!important} #prFt #prFt-form .wpcf7 .wpcf7-acceptance label{ display:flex!important;gap:10px;align-items:flex-start;cursor:pointer; text-transform:none!important;letter-spacing:0!important;font-weight:400!important; font-size:13px!important;line-height:1.6!important;color:var(--mut)!important; } #prFt #prFt-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{color:var(--mut)!important} #prFt-form .wpcf7 .wpcf7-acceptance input[type=checkbox]{margin:1px 0 0!important} /* --- Absendezeile --- */ #prFt-form .wpcf7 input[type=submit]{ padding:14px 32px!important;font-family:'Manrope',sans-serif!important; font-size:12.5px!important;font-weight:800!important;letter-spacing:1.6px!important; text-transform:uppercase!important;cursor:pointer; } #prFt-form .wpcf7 .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle} /* --- Validierung und Rueckmeldung --- */ #prFt #prFt-form .wpcf7 .wpcf7-not-valid-tip{ color:#A6432A!important;font-size:12.5px!important;line-height:1.5;margin-top:7px; text-transform:none!important;letter-spacing:0!important;font-weight:500!important; } #prFt #prFt-form .wpcf7 .wpcf7-response-output{ margin:2px 0 0!important;padding:12px 15px!important;border-radius:3px!important; font-size:14px!important;line-height:1.6!important;text-transform:none!important;letter-spacing:0!important; } #prFt-form .screen-reader-response{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap; } /* ============================================================ 19. PUBLIKATIONS-SEITEN (Kinder von /publikationen/) Fundstellen-Block, PDF-Knopf, Hinweis, Fussnavigation. ============================================================ */ .elementor-location-single .prx-body .pub-lead{ font-family:'Spectral',serif!important;font-size:clamp(18px,2.1vw,21px)!important; line-height:1.62!important;color:var(--ink)!important;margin:0 0 30px!important; } /* --- Fundstelle --- */ .elementor-location-single .prx-body .pub-meta{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 30px; background:var(--panel);border:1px solid var(--line-gold);border-left:3px solid var(--gold); border-radius:3px;padding:24px 28px;margin:0 0 38px!important; } .elementor-location-single .prx-body .pub-meta dt{ font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:#846529!important;margin:0 0 4px; } .elementor-location-single .prx-body .pub-meta dd{ margin:0!important;color:var(--ink)!important;font-size:15px;line-height:1.5; } .elementor-location-single .prx-body .pub-meta .pm{margin:0} /* --- PDF-Knopf --- */ .elementor-location-single .prx-body .pub-dl{ display:inline-flex;align-items:center;gap:12px; background:linear-gradient(135deg,#8A6A2B 0%,#6E5320 46%,#8A6A2B 100%); color:#FFFDF7!important;-webkit-text-fill-color:#FFFDF7; padding:15px 30px;border-radius:999px;text-decoration:none!important; font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;letter-spacing:.4px; box-shadow:0 12px 28px -16px rgba(110,83,32,.75),inset 0 1px 0 rgba(255,255,255,.18); transition:transform .25s,box-shadow .25s,background .25s; } .elementor-location-single .prx-body .pub-dl:hover{ background:linear-gradient(135deg,#9B7832 0%,#7E6027 46%,#9B7832 100%); color:#FFFDF7!important;transform:translateY(-2px); box-shadow:0 20px 42px -16px rgba(110,83,32,.85),inset 0 1px 0 rgba(255,255,255,.22); } .elementor-location-single .prx-body .pub-dl:focus-visible{outline:3px solid #16261E!important;outline-offset:3px} .elementor-location-single .prx-body .pub-dl svg{width:17px;height:17px;flex:0 0 17px;fill:currentColor} .elementor-location-single .prx-body .pub-dl .sz{font-weight:500;opacity:.78} /* --- Hinweisblock --- */ .elementor-location-single .prx-body .pub-note{ background:rgba(165,129,60,.07);border:1px solid var(--line-gold);border-radius:3px; padding:17px 22px;margin:30px 0!important;font-size:14px;line-height:1.75;color:var(--mut)!important; } .elementor-location-single .prx-body .pub-note p{margin:0!important;font-size:14px!important;line-height:1.75!important} /* --- Fussnavigation --- */ .elementor-location-single .prx-body .pub-nav{ margin:46px 0 0!important;padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14.5px; } .elementor-location-single .prx-body .pub-nav a{font-weight:600} /* --- Uebersicht /publikationen/ --- */ .elementor-location-single .prx-body .publist{ list-style:none;margin:0!important;padding:0;display:grid;gap:14px; } .elementor-location-single .prx-body .publist li{ position:relative;overflow:hidden;background:var(--panel);border-radius:3px; padding:20px 24px 20px 27px;margin:0!important;list-style:none; border:1px solid rgba(165,129,60,.30); transition:border-color .25s,box-shadow .25s; } .elementor-location-single .prx-body .publist li::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#8A6A2B; } .elementor-location-single .prx-body .publist li:hover{ border-color:rgba(138,106,43,.7);box-shadow:0 14px 30px -22px rgba(12,23,18,.55); } .elementor-location-single .prx-body .publist .pl-t{ display:block;font-family:'Spectral',serif;font-size:19px;line-height:1.34;font-weight:500; color:var(--ink)!important;text-decoration:none!important;margin-bottom:7px; } .elementor-location-single .prx-body .publist .pl-t:hover{color:#846529!important} .elementor-location-single .prx-body .publist .pl-m{ display:block;font-size:13.5px;line-height:1.6;color:var(--mut)!important;margin-bottom:11px; } .elementor-location-single .prx-body .publist .pl-l{ display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;font-weight:600; } .elementor-location-single .prx-body .publist .pl-l a{color:#846529!important} @media(max-width:560px){.elementor-location-single .prx-body .publist li{padding:18px 18px}} /* <<< ZUSATZ CLAUDE — ENDE */