/*
Phönix Bestattungen – Premium HTML 1B Layout Fix
Confirmed visual direction: bright editorial funeral-home design,
ivory / sand / taupe / restrained gold, official logo, no staff section.
*/
:root{
--ivory:#f8f3eb;
--cream:#fffdf8;
--paper:#fbf8f2;
--sand:#e7ddcf;
--stone:#d7ccbd;
--taupe:#887c70;
--muted:#6f675e;
--charcoal:#262421;
--ink:#151412;
--gold:#bd8740;
--gold-dark:#986b34;
--line:rgba(151,124,92,.28);
--line-strong:rgba(151,124,92,.42);
--shadow:0 34px 90px rgba(55,45,35,.12);
--container:min(1640px, calc(100vw - 96px));
--container-narrow:min(1320px, calc(100vw - 96px));
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--charcoal);font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} .serif,h1,h2,h3{font-family:Georgia, "Times New Roman", Times, serif;font-weight:400;letter-spacing:-.035em} h1,h2,h3,p{margin:0}.eyebrow{color:var(--gold-dark);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.container{width:var(--container);margin-inline:auto}.container-narrow{width:var(--container-narrow);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site{overflow:hidden;background:linear-gradient(180deg,#fffdf8 0%,#fbf8f2 38%,#f8f2e9 100%)}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.91);backdrop-filter:saturate(135%) blur(18px);border-bottom:1px solid rgba(139,114,83,.17)}
.header-inner{height:92px;width:var(--container);margin:auto;display:grid;grid-template-columns:270px 1fr 220px;align-items:center;gap:28px}.brand{display:flex;align-items:center}.brand img{width:230px;height:auto}.nav{display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.15vw,38px);font-size:.94rem;color:#2e2b28}.nav a{position:relative;padding:20px 0}.nav a:after{content:"";position:absolute;left:0;bottom:13px;width:0;height:1px;background:var(--gold);transition:.25s ease}.nav a:hover:after,.nav a[aria-current="page"]:after{width:100%}.call-head{justify-self:end;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;color:var(--gold-dark)}.call-head .phone-icon{width:34px;height:34px;border:1px solid rgba(189,135,64,.35);border-radius:99px;display:grid;place-items:center}.call-head span{display:block;font-size:.82rem;font-weight:800;letter-spacing:.08em}.call-head strong{font-size:1.35rem;line-height:1;color:#3a332b;font-weight:500;letter-spacing:.035em}.menu-toggle{display:none;border:0;background:transparent;padding:10px;margin-left:auto}.menu-toggle i{display:block;width:28px;height:1px;background:#2d2924;margin:7px 0}
/* Buttons */
.btn{--bg:transparent;--fg:var(--charcoal);--bd:var(--line-strong);display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 26px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:750;letter-spacing:.015em;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(66,48,28,.12)}.btn-gold{--bg:var(--gold);--fg:#fffdf8;--bd:var(--gold)}.btn-light{--bg:rgba(255,253,248,.55);--fg:var(--charcoal);--bd:rgba(151,124,92,.44)}.btn svg{width:18px;height:18px}.arrow{font-size:1.15em;color:var(--gold-dark)}
/* Shared utilities */
.icon-line{color:var(--gold);width:44px;height:44px}.thin-line{width:72px;height:2px;background:var(--gold);margin:28px 0 24px}.muted{color:var(--muted)}.gold{color:var(--gold-dark)}
/* Home hero */
.home-hero{min-height:730px;position:relative;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#fffdf8 0%,#fffdf8 42%,rgba(255,253,248,.72) 55%,rgba(255,253,248,.02) 100%)}.home-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fffdf8 0%,rgba(255,253,248,.96) 37%,rgba(255,253,248,.64) 50%,rgba(255,253,248,0) 70%);z-index:1}.home-hero:after{content:"";position:absolute;inset:auto 0 0;height:170px;background:linear-gradient(0deg,#fffdf8,rgba(255,253,248,0));z-index:2}.hero-photo{position:absolute;right:0;top:0;bottom:0;width:61%;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-content{position:relative;z-index:3;width:var(--container);margin:auto;padding:142px 0 100px}.hero-copy{max-width:650px}.hero-copy h1{font-size:clamp(3.6rem,6.2vw,6.9rem);line-height:.98;color:#24211f}.hero-copy p{max-width:495px;font-size:1.1rem;color:#4d473f}.hero-actions{display:flex;gap:20px;margin-top:42px}.entry-strip{position:relative;z-index:5;width:100%;background:rgba(255,253,248,.95);border-bottom:1px solid var(--line)}.entry-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}.entry{min-height:138px;display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;padding:26px 40px 26px 0;border-right:1px solid var(--line)}.entry:last-child{border-right:0}.entry h3{font-size:1.68rem;line-height:1.1}.entry p{font-size:.96rem;color:#5f574f}.entry .arrow{font-size:1.6rem;padding-left:10px}
/* Home sections */
.about-home{display:grid;grid-template-columns:44% 56%;border-bottom:1px solid var(--line);background:#fffdf8}.about-image{min-height:460px;position:relative;overflow:hidden}.about-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,248,0) 30%,#fffdf8 96%)}.about-image img{width:100%;height:100%;object-fit:cover}.about-text{position:relative;padding:92px 11vw 86px 80px}.about-text h2{font-size:clamp(2.25rem,3.3vw,4rem);line-height:1.07;margin-top:18px}.about-text p{max-width:690px;color:#4e4841}.quote{margin-top:32px;color:var(--gold-dark);font-family:Georgia,serif;font-size:1.15rem;line-height:1.45}.botanical{position:absolute;right:7vw;bottom:70px;width:190px;height:250px;opacity:.58;color:var(--gold)}
.forms-preview{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fffdf8,#fbf7ef);}.forms-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:300px repeat(6,1fr);align-items:stretch}.forms-intro{padding:56px 34px 56px 0;border-right:1px solid var(--line)}.forms-intro h2{font-size:2.1rem;line-height:1.04;margin:8px 0 16px}.text-link{display:inline-flex;align-items:center;gap:10px;color:#443b32;font-weight:700;font-size:.95rem}.form-mini{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;border-right:1px solid var(--line);transition:.25s ease}.form-mini:hover{background:rgba(189,135,64,.05)}.form-mini:last-child{border-right:0}.form-mini svg{width:52px;height:52px;color:var(--gold)}.form-mini span{font-weight:600;color:#4a443e}.services-vorsorge{display:grid;grid-template-columns:47% 53%;border-bottom:1px solid var(--line)}.services-panel{padding:56px 0 56px calc((100vw - var(--container))/2);display:grid;grid-template-columns:280px 1fr;background:#fffdf8;border-right:1px solid var(--line)}.service-list{padding-right:34px}.service-item{border:0;background:transparent;width:100%;padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.service-item span{font-weight:600}.service-item i{transition:.25s ease}.service-item[aria-expanded="true"] i{transform:rotate(180deg)}.service-detail{display:none;padding:14px 0 3px;color:var(--muted);font-size:.94rem}.service-detail.is-open{display:block}.services-image{min-height:360px;overflow:hidden}.services-image img{width:100%;height:100%;object-fit:cover}.vorsorge-panel{position:relative;min-height:360px;display:grid;grid-template-columns:1fr 52%;background:#f9f2e8}.vorsorge-copy{padding:58px 64px}.vorsorge-copy h2{font-size:2.7rem;line-height:1.08;margin:8px 0 22px}.vorsorge-copy p{max-width:420px;color:#5a5148}.vorsorge-photo{overflow:hidden}.vorsorge-photo img{width:100%;height:100%;object-fit:cover}.impressions{background:#fffdf8;border-bottom:1px solid var(--line)}.impression-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:160px repeat(5,1fr) 150px;align-items:center;gap:18px;padding:36px 0}.impression-grid img{height:104px;width:100%;object-fit:cover}.impression-grid .text-link{justify-self:end}.contact-map{background:#fbf7ef;border-bottom:1px solid var(--line)}.contact-map-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:320px 1fr;gap:54px;align-items:stretch;padding:44px 0}.contact-card h2{font-size:1.7rem;line-height:1.1;margin:10px 0 22px}.contact-lines{display:grid;gap:13px;color:#4b463f}.contact-lines p{display:grid;grid-template-columns:24px 1fr;gap:12px}.map-box{min-height:250px;overflow:hidden;border-left:1px solid var(--line)}.map-box img{width:100%;height:100%;object-fit:cover}
/* Subpage */
.sub-hero{position:relative;border-bottom:1px solid var(--line);background:#fffdf8}.sub-hero-inner{width:var(--container);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 52%;min-height:500px}.sub-hero-copy{padding:84px 70px 70px 0}.breadcrumb{font-size:.86rem;margin-bottom:38px;color:#5f574e}.breadcrumb a{color:#3b3631}.sub-hero h1{font-size:clamp(3.4rem,5vw,6rem);line-height:1.02;margin:14px 0 28px}.sub-hero p{max-width:620px;color:#49443e;font-size:1.06rem}.sub-hero-actions{display:flex;gap:18px;margin-top:36px}.sub-hero-image{position:relative;overflow:hidden}.sub-hero-image:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#fffdf8 0%,rgba(255,253,248,.72) 18%,rgba(255,253,248,0) 55%)}.sub-hero-image img{width:100%;height:100%;object-fit:cover}.help-strip{border-bottom:1px solid var(--line);background:rgba(255,253,248,.96)}.help-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}.help-item{min-height:120px;display:grid;grid-template-columns:52px 1fr;gap:24px;align-items:center;border-right:1px solid var(--line);padding:26px 46px 26px 0}.help-item:last-child{border-right:0}.help-item h3{font-size:1.55rem;line-height:1.1}.help-item p{font-size:.92rem;color:#6a625a}.check-content{background:#fffdf8}.check-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:1fr 410px;gap:90px;padding:70px 0 64px}.check-list{display:grid;gap:0}.check-row{display:grid;grid-template-columns:90px 1fr;gap:25px;padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--line)}.check-row:last-child{border-bottom:0;margin-bottom:0}.check-num{font-family:Georgia,serif;font-size:4.35rem;line-height:1;color:var(--gold);letter-spacing:-.05em}.check-row h2{font-size:1.86rem;line-height:1.12;margin-bottom:10px}.check-row p{max-width:720px;color:#4f4941}.side-stack{display:grid;gap:18px;align-content:start;position:sticky;top:118px}.side-box{border:1px solid var(--line);background:rgba(255,253,248,.75);padding:34px}.side-logo{width:128px;margin:18px auto 24px}.side-contact{display:grid;gap:9px;margin:18px 0}.side-contact p{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:1.1rem}.side-note{padding-top:18px;border-top:1px solid var(--line);color:#554d45}.doc-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:13px}.doc-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:#4b453f}.doc-list svg{color:var(--gold);margin-top:2px}.side-photo{height:160px;overflow:hidden}.side-photo img{width:100%;height:100%;object-fit:cover}.takeover{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbf7ef,#fffdf8)}.takeover-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:1fr 240px 1fr;gap:60px;align-items:center;padding:58px 0}.takeover h2{font-size:2.35rem;line-height:1.1;margin-bottom:20px}.takeover p{max-width:600px;color:#5d554c}.takeover .botanical-mini{width:210px;color:var(--gold);opacity:.55}.checks{list-style:none;margin:0;padding:0;display:grid;gap:16px}.checks li{display:grid;grid-template-columns:26px 1fr;gap:13px}.checks svg{color:var(--gold);margin-top:2px}.next-links{background:#fffdf8;border-bottom:1px solid var(--line)}.next-grid{width:var(--container);margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}.next-link{display:grid;grid-template-columns:56px 1fr auto;gap:22px;align-items:center;min-height:130px;padding:26px 36px 26px 0;border-right:1px solid var(--line)}.next-link:last-child{border-right:0}.next-link h3{font-size:1.42rem}.next-link p{color:#5f574f;font-size:.92rem}.next-link svg{color:var(--gold);width:46px;height:46px}
/* Footer */
.site-footer{background:#fffdf8}.footer-inner{width:var(--container);height:112px;margin:auto;display:grid;grid-template-columns:270px 1fr 300px;align-items:center;gap:32px}.footer-logo img{width:210px}.footer-links{justify-self:center;display:flex;gap:48px;font-size:.92rem}.footer-links a{position:relative}.footer-links a+a:before{content:"";position:absolute;left:-24px;top:2px;width:1px;height:18px;background:var(--line-strong)}.copyright{justify-self:end;color:#6b6259;font-size:.9rem}.mobile-call{display:none}
/* Responsive */
@media (max-width:1180px){:root{--container:calc(100vw - 48px);--container-narrow:calc(100vw - 48px)}.header-inner{grid-template-columns:230px 1fr 190px}.brand img{width:210px}.nav{gap:18px;font-size:.86rem}.home-hero{min-height:640px}.hero-photo{width:58%}.hero-copy h1{font-size:4.6rem}.entry{grid-template-columns:48px 1fr;gap:18px;padding-right:22px}.entry .arrow{grid-column:2}.forms-grid{grid-template-columns:260px repeat(3,1fr)}.form-mini:nth-child(5),.form-mini:nth-child(6),.form-mini:nth-child(7){border-top:1px solid var(--line)}.services-vorsorge{grid-template-columns:1fr}.services-panel{padding-right:24px}.check-grid{grid-template-columns:1fr 350px;gap:48px}.takeover-grid{grid-template-columns:1fr 160px 1fr}}
@media (max-width:900px){body{font-size:15px}.site-header{position:sticky}.header-inner{height:78px;grid-template-columns:1fr auto;gap:14px}.brand img{width:178px}.call-head,.nav{display:none}.menu-toggle{display:block}.nav.is-open{position:fixed;display:flex;left:0;right:0;top:78px;background:#fffdf8;border-bottom:1px solid var(--line);box-shadow:0 24px 60px rgba(35,30,25,.12);padding:24px;flex-direction:column;align-items:flex-start;gap:4px;font-size:1.15rem}.nav.is-open a{width:100%;padding:13px 0}.home-hero{min-height:auto;background:#fffdf8}.home-hero:before,.home-hero:after{display:none}.hero-photo{position:relative;width:100%;height:420px;order:1}.home-hero{display:flex;flex-direction:column}.hero-content{width:var(--container);padding:54px 0 36px;order:2}.hero-copy h1{font-size:clamp(3.1rem,12vw,4.3rem)}.hero-copy p{font-size:1rem}.hero-actions,.sub-hero-actions{flex-direction:column;align-items:stretch}.btn{width:100%}.entry-grid,.help-grid,.forms-grid,.services-panel,.vorsorge-panel,.impression-grid,.contact-map-grid,.about-home,.services-vorsorge,.sub-hero-inner,.check-grid,.takeover-grid,.next-grid,.footer-inner{grid-template-columns:1fr}.entry,.help-item,.form-mini,.next-link{border-right:0;border-bottom:1px solid var(--line)}.entry{padding:24px 0;min-height:112px}.about-image{min-height:330px}.about-image:after{background:linear-gradient(0deg,#fffdf8 0%,rgba(255,253,248,0) 42%)}.about-text{padding:46px 24px}.botanical{display:none}.forms-intro{border-right:0;border-bottom:1px solid var(--line);padding:36px 0}.form-mini{min-height:132px}.services-panel{padding:42px 24px}.service-list{padding:0}.services-image{height:260px}.vorsorge-copy{padding:42px 24px}.vorsorge-photo{height:260px}.impression-grid{gap:12px;padding:26px 0}.impression-grid img{height:160px}.sub-hero-inner{min-height:unset}.sub-hero-copy{padding:44px 0 34px}.sub-hero h1{font-size:3.2rem}.sub-hero-image{height:320px;grid-row:1}.sub-hero-image:before{background:linear-gradient(0deg,#fffdf8 0%,rgba(255,253,248,0) 45%)}.check-grid{padding:42px 0}.check-row{grid-template-columns:62px 1fr;gap:16px;padding-bottom:24px;margin-bottom:24px}.check-num{font-size:3.4rem}.side-stack{position:static}.takeover-grid{gap:24px;padding:42px 0}.takeover .botanical-mini{display:none}.next-link{padding:22px 0}.contact-map-grid{gap:28px}.map-box{border-left:0;min-height:220px}.footer-inner{height:auto;padding:34px 0;gap:22px}.footer-links{justify-self:start;gap:32px;flex-wrap:wrap}.copyright{justify-self:start}.mobile-call{position:fixed;z-index:80;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;background:var(--gold);color:#fff;border-radius:0;box-shadow:0 18px 48px rgba(79,54,27,.28);font-weight:800}.mobile-call svg{width:18px;height:18px}body{padding-bottom:82px}}
@media (max-width:520px){:root{--container:calc(100vw - 32px);--container-narrow:calc(100vw - 32px)}.brand img{width:154px}.hero-photo{height:350px}.sub-hero-image{height:280px}.home-hero .hero-content{padding-top:42px}.hero-copy h1,.sub-hero h1{font-size:2.75rem}.entry{grid-template-columns:44px 1fr}.check-row{grid-template-columns:1fr}.check-num{font-size:3rem}.side-box{padding:26px}.forms-grid{grid-template-columns:1fr}.footer-logo img{width:170px}}
/* =========================================================
PHOEBES PREMIUM HTML 1B – LAYOUT FIX / BOXED SYSTEM
Ziel: ruhiger, eingefasster Agentur-Look; keine ausufernden Icons,
keine Vollbreite auf großen Browsern, stabilere Map-/Sidebar-Blöcke.
========================================================= */
:root{
--shell: min(1480px, calc(100vw - 64px));
--container: min(1240px, calc(100vw - 104px));
--container-narrow: min(1080px, calc(100vw - 104px));
}
body{
background: radial-gradient(circle at 50% 0%, #fffdf8 0, #f6eee3 58%, #eee2d3 100%);
}
.site{
max-width: var(--shell);
margin: 28px auto;
background: linear-gradient(180deg,#fffdf8 0%,#fbf8f2 48%,#f8f2e9 100%);
box-shadow: 0 42px 110px rgba(67,50,33,.12);
border: 1px solid rgba(151,124,92,.18);
overflow: clip;
}
.site-header{position:sticky;top:0;max-width:var(--shell);margin:0 auto;background:rgba(255,253,248,.95)}
.header-inner{width:var(--container);height:84px;grid-template-columns:235px 1fr 210px}.brand img{width:205px}.nav{gap:clamp(14px,1.45vw,28px);font-size:.9rem}.call-head strong{font-size:1.22rem}.call-head .phone-icon svg{width:19px;height:19px}.phone-icon{overflow:hidden}
/* Ein sauberer Browser-/Agenturrahmen: Innenbereiche begrenzen */
.home-hero{min-height:620px;width:var(--container);margin:0 auto;background:#fffdf8;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.home-hero:before{background:linear-gradient(90deg,#fffdf8 0%,rgba(255,253,248,.98) 35%,rgba(255,253,248,.70) 50%,rgba(255,253,248,.05) 72%)}
.hero-content{width:100%;padding:112px 0 88px 46px}.hero-copy{max-width:560px}.hero-copy h1{font-size:clamp(3.9rem,5.15vw,5.65rem);line-height:1.0}.hero-copy p{font-size:1.02rem;max-width:500px}.hero-photo{right:0;width:58%}.hero-actions{margin-top:34px}.btn{min-height:54px;padding-inline:24px}
.entry-strip{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.entry-grid{width:100%}.entry{min-height:118px;padding:22px 28px;grid-template-columns:48px 1fr 32px;gap:18px}.entry h3{font-size:1.42rem}.entry p{font-size:.92rem}.entry .icon-line{width:34px;height:34px}.entry .arrow{font-size:1.35rem}
.about-home{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);grid-template-columns:45% 55%}.about-image{min-height:400px}.about-text{padding:72px 74px 70px}.about-text h2{font-size:clamp(2.35rem,3.1vw,3.55rem)}.botanical{right:56px;width:130px;height:190px;opacity:.45}
.forms-preview{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.forms-grid{width:100%;grid-template-columns:260px repeat(6,1fr)}.forms-intro{padding:46px 26px}.forms-intro h2{font-size:1.85rem}.form-mini{min-height:156px}.form-mini svg{width:38px;height:38px}.form-mini span{font-size:.92rem}
.services-vorsorge{width:var(--container);margin:0 auto;grid-template-columns:1fr 1fr;border-left:1px solid var(--line);border-right:1px solid var(--line)}.services-panel{padding:44px;grid-template-columns:270px 1fr}.services-image{min-height:300px}.vorsorge-panel{min-height:300px}.vorsorge-copy{padding:48px 52px}.vorsorge-copy h2{font-size:2.35rem}.impressions{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.impression-grid{width:100%;grid-template-columns:140px repeat(5,1fr) 130px;padding:30px 28px}.impression-grid img{height:88px}
.contact-map{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.contact-map-grid{width:100%;grid-template-columns:290px minmax(0,1fr);gap:34px;padding:38px 36px}.contact-card h2{font-size:1.55rem}.map-box{height:255px;min-height:0;border-left:1px solid var(--line);background:#f3efe6}.map-box img{width:100%;height:100%;object-fit:cover;object-position:center}
.site-footer{max-width:var(--shell);margin:0 auto}.footer-inner{width:var(--container);height:98px;grid-template-columns:220px 1fr 270px}.footer-logo img{width:178px}
/* Unterseite: Container, Sidebar und Icons bändigen */
.sub-hero{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.sub-hero-inner{width:100%;grid-template-columns:minmax(0,1fr) 50%;min-height:450px}.sub-hero-copy{padding:70px 58px 62px 42px}.sub-hero h1{font-size:clamp(3.25rem,4.65vw,5.3rem)}.sub-hero-image img{object-position:center}.help-strip{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.help-grid{width:100%}.help-item{min-height:104px;padding:22px 34px;grid-template-columns:42px 1fr}.help-item .icon-line{width:32px;height:32px}.help-item h3{font-size:1.35rem}.check-content{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.check-grid{width:100%;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:62px 46px 58px}.check-row{grid-template-columns:72px 1fr;padding-bottom:26px;margin-bottom:26px}.check-num{font-size:3.6rem}.check-row h2{font-size:1.62rem}.check-row p{max-width:670px}.side-stack{gap:16px;top:104px}.side-box{padding:28px;background:rgba(255,253,248,.88)}.side-logo{width:124px;margin:14px auto 20px}.side-contact p{grid-template-columns:22px 1fr;font-size:1rem}.side-note{font-size:.92rem}.doc-list li{grid-template-columns:20px 1fr;font-size:.93rem}.side-photo{height:132px}.takeover{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.takeover-grid{width:100%;grid-template-columns:1.15fr 160px 1fr;gap:42px;padding:54px 46px}.takeover h2{font-size:2.05rem}.takeover .botanical-mini{width:145px}.checks li{grid-template-columns:22px 1fr}.next-links{width:var(--container);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.next-grid{width:100%}.next-link{min-height:112px;padding:22px 28px;grid-template-columns:42px 1fr 24px}.next-link svg{width:34px;height:34px}.next-link h3{font-size:1.22rem}
/* HARTE SVG-SICHERUNG: verhindert explodierende Icons */
.call-head svg,.btn svg,.entry svg,.help-item svg,.form-mini svg,.next-link svg,
.contact-lines svg,.side-contact svg,.doc-list svg,.checks svg,.mobile-call svg{
display:block;flex:0 0 auto;max-width:100%;max-height:100%;overflow:visible;
}
.contact-lines svg{width:20px;height:20px;color:var(--gold);margin-top:3px}.side-contact svg{width:19px;height:19px;color:var(--gold);margin-top:4px}.doc-list svg{width:18px;height:18px;color:var(--gold);margin-top:3px}.checks svg{width:19px;height:19px;color:var(--gold);margin-top:3px}.contact-lines p{grid-template-columns:22px 1fr;align-items:start}.side-contact p{align-items:start}.doc-list li,.checks li{align-items:start}
@media (max-width:1180px){
:root{--shell:calc(100vw - 28px);--container:calc(100vw - 68px);--container-narrow:calc(100vw - 68px)}
.site{margin:14px auto}.header-inner{width:var(--container);grid-template-columns:205px 1fr 180px}.brand img{width:186px}.nav{gap:13px;font-size:.82rem}.call-head strong{font-size:1.02rem}.home-hero{min-height:560px}.hero-content{padding-left:34px}.hero-copy h1{font-size:4.15rem}.forms-grid{grid-template-columns:240px repeat(3,1fr)}.services-vorsorge{grid-template-columns:1fr}.services-panel{padding:42px;grid-template-columns:260px 1fr}.check-grid{grid-template-columns:1fr 315px;gap:38px;padding-inline:34px}.takeover-grid{grid-template-columns:1fr 120px 1fr}.impression-grid{grid-template-columns:120px repeat(3,1fr) 110px}.impression-grid img:nth-of-type(n+4){display:none}
}
@media (max-width:900px){
:root{--shell:100vw;--container:calc(100vw - 36px);--container-narrow:calc(100vw - 36px)}
body{background:#fffdf8}.site{margin:0;border:0;box-shadow:none;max-width:none}.site-header{max-width:none}.header-inner{width:var(--container);height:76px}.brand img{width:164px}.home-hero,.entry-strip,.about-home,.forms-preview,.services-vorsorge,.impressions,.contact-map,.sub-hero,.help-strip,.check-content,.takeover,.next-links{width:100%;border-left:0;border-right:0}.home-hero{display:flex;min-height:0}.hero-photo{height:390px}.hero-content{width:var(--container);padding:46px 0 40px}.hero-copy h1{font-size:clamp(3rem,11vw,4.1rem)}.entry-grid,.help-grid,.about-home,.forms-grid,.services-panel,.vorsorge-panel,.impression-grid,.contact-map-grid,.sub-hero-inner,.check-grid,.takeover-grid,.next-grid{width:var(--container);grid-template-columns:1fr;margin:auto}.entry,.help-item,.next-link{padding-left:0;padding-right:0}.about-text,.services-panel,.vorsorge-copy,.check-grid,.takeover-grid,.contact-map-grid{padding-left:0;padding-right:0}.sub-hero-copy{padding-left:0;padding-right:0}.sub-hero h1{font-size:3.1rem}.check-grid{gap:30px}.side-stack{position:static}.map-box{height:240px}.contact-map-grid{gap:26px}.footer-inner{width:var(--container)}
}
@media (max-width:520px){
:root{--container:calc(100vw - 30px)}.brand img{width:148px}.hero-photo{height:330px}.hero-copy h1,.sub-hero h1{font-size:2.65rem}.entry{grid-template-columns:38px 1fr 22px}.entry h3{font-size:1.25rem}.check-row{grid-template-columns:1fr}.check-num{font-size:2.8rem}.side-box{padding:24px}.footer-logo img{width:160px}
}
/* =========================================================
PHOEBES PREMIUM HTML 1C – BILDSPRACHE + RESPONSIVE FEINSCHLIFF
Fokus: neue Premium-Bilder, Original-Galerie-Leiste, feinere Crops,
stabilere Tablet-/Mobile-Komposition für Startseite + Checkliste.
========================================================= */
.hero-photo img,
.sub-hero-image img,
.about-image img,
.services-image img,
.vorsorge-photo img,
.side-photo img,
.impression-grid img{
filter: saturate(.95) contrast(.98) brightness(1.03);
}
.hero-photo img{ object-position: 62% center; }
.sub-hero-image img{ object-position: 62% center; }
.about-image img{ object-position: 42% center; }
.services-image img{ object-position: 65% center; }
.vorsorge-photo img{ object-position: 58% center; }
.side-photo img{ object-position: 56% center; }
/* Galerie bewusst authentisch: Originalbilder, aber ruhig veredelt */
.impressions{ background: rgba(255,253,248,.95); }
.impression-grid{
align-items:center;
gap:18px;
}
.impression-grid img{
width:100%;
height:92px;
object-fit:cover;
border:1px solid rgba(190,167,136,.32);
box-shadow:0 12px 26px rgba(92,72,45,.08);
transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}
.impression-grid img:hover{
transform: translateY(-2px);
filter: saturate(1) contrast(1) brightness(1.05);
box-shadow:0 18px 34px rgba(92,72,45,.13);
}
.gallery-more{ white-space:nowrap; justify-self:end; }
/* Hero visuell näher am bestätigten Mockup: Bild feiner, Text bleibt lesbar */
.home-hero{ position:relative; }
.home-hero:after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:1px;
background:var(--line);
pointer-events:none;
}
.hero-photo:after,
.sub-hero-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(255,253,248,.52) 0%, rgba(255,253,248,.08) 34%, rgba(255,253,248,0) 70%);
pointer-events:none;
}
.sub-hero-image:after{ background:linear-gradient(90deg, rgba(255,253,248,.58) 0%, rgba(255,253,248,.12) 38%, rgba(255,253,248,0) 75%); }
/* Kleine Qualitätsschärfung: Buttons und Links bleiben klar tastbar */
.btn,
.entry,
.form-mini,
.next-link,
.text-link{
-webkit-tap-highlight-color: transparent;
}
.btn:focus-visible,
.entry:focus-visible,
.form-mini:focus-visible,
.next-link:focus-visible,
.text-link:focus-visible,
.menu-toggle:focus-visible{
outline:2px solid rgba(185,132,60,.65);
outline-offset:4px;
}
@media (max-width:1180px){
.hero-photo img{ object-position:68% center; }
.sub-hero-image img{ object-position:67% center; }
.impression-grid img{height:84px;}
}
@media (max-width:900px){
.hero-photo:after,
.sub-hero-image:after{display:none;}
.home-hero{background:#fffdf8;}
.hero-photo,
.sub-hero-image{
width:100%;
border-bottom:1px solid var(--line);
}
.hero-photo img{object-position:62% center;}
.sub-hero-image img{object-position:70% center;}
.entry-grid{border-top:1px solid var(--line);}
.entry{min-height:auto;padding-block:24px;}
.about-image{min-height:320px;}
.about-image img{object-position:48% center;}
.services-image{min-height:260px;}
.vorsorge-photo{min-height:260px;}
.impression-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
padding-top:26px;
padding-bottom:30px;
}
.impression-grid .eyebrow{margin:0 0 2px;}
.impression-grid img{
height:170px;
width:100%;
}
.gallery-more{justify-self:start;margin-top:4px;}
.side-photo{height:190px;}
.takeover-grid .botanical-mini{display:none;}
.footer-inner{min-height:112px;height:auto;padding-block:20px;}
}
@media (max-width:640px){
.hero-photo{height:360px;}
.sub-hero-image{height:310px;}
.hero-copy p,
.sub-hero-copy p{font-size:1rem;}
.hero-actions,
.sub-hero-actions{display:grid;grid-template-columns:1fr;gap:12px;max-width:360px;}
.btn{justify-content:center;width:100%;}
.about-image{min-height:260px;}
.services-image,.vorsorge-photo{min-height:220px;}
.impression-grid img{height:145px;}
.map-box{height:210px;}
}
@media (max-width:420px){
.hero-photo{height:310px;}
.sub-hero-image{height:270px;}
.impression-grid img{height:126px;}
}
/* =========================================================
PHOEBES PREMIUM HTML 1D – DESKTOP-BILDHÖHEN + WEBP-FINISH
Ziel: Leistungen/Vorsorge-Bereich ruhiger, linkes Bild voller,
WebP-Bilder als Standard, Desktop-Bildrhythmus sauberer.
========================================================= */
.services-vorsorge{
align-items:stretch;
}
.services-panel{
padding:0;
grid-template-columns:270px minmax(0,1fr);
align-items:stretch;
min-height:430px;
}
.service-list{
padding:48px 36px;
border-right:1px solid var(--line);
align-self:stretch;
display:flex;
flex-direction:column;
justify-content:center;
}
.services-image{
min-height:430px;
height:100%;
align-self:stretch;
background:#f6efe5;
}
.services-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:54% center;
}
.vorsorge-panel{
min-height:430px;
}
.vorsorge-copy{
display:flex;
flex-direction:column;
justify-content:center;
}
.vorsorge-photo img{
object-position:60% center;
}
/* Bildflächen wirken wertiger, wenn sie bei Desktop nicht wie kleine Einleger stehen */
.about-image,
.hero-photo,
.sub-hero-image,
.services-image,
.vorsorge-photo,
.side-photo{
background:#f4ede3;
}
/* Performance-Hinweis im CSS: tatsächliche Optimierung erfolgt über WebP-Dateien im /assets/img/ Ordner. */
@media (max-width:1180px){
.services-panel{
min-height:390px;
grid-template-columns:300px minmax(0,1fr);
}
.service-list{
padding:42px 34px;
}
.services-image,
.vorsorge-panel{
min-height:390px;
}
}
@media (max-width:900px){
.services-panel{
padding:0;
min-height:0;
grid-template-columns:1fr;
width:var(--container);
}
.service-list{
padding:42px 0 30px;
border-right:0;
border-bottom:1px solid var(--line);
}
.services-image{
height:280px;
min-height:280px;
width:100%;
}
.vorsorge-panel{
min-height:0;
}
.vorsorge-copy{
padding:42px 0 34px;
}
.vorsorge-photo{
height:280px;
min-height:280px;
}
}
@media (max-width:640px){
.services-image,
.vorsorge-photo{
height:235px;
min-height:235px;
}
}
/* 1L map image replacement */
.map-box{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
.map-image{min-height:0;overflow:hidden}
.map-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.map-credit{margin:8px 2px 0 0;font-size:.68rem;line-height:1.25;color:#b8b1a6;text-align:right;letter-spacing:.01em}
@media (max-width:900px){
.map-credit{font-size:.66rem;margin-top:6px}
}
/* =========================================================
PHOEBES PREMIUM HTML 1M – ISOLIERTER MOBILE-PASS
Basis bleibt 1L. Desktop-Regeln bleiben unangetastet.
Änderungen greifen ausschließlich in mobilen Breakpoints.
========================================================= */
@media (max-width:900px){
/* Header mobil: Logo links, Menü rechts – keine mittige Button-Position */
.site-header{
position:sticky;
top:0;
z-index:120;
background:rgba(255,253,248,.96);
border-bottom:1px solid rgba(139,114,83,.16);
}
.header-inner{
width:var(--container);
height:74px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:0 auto;
}
.brand{
flex:0 1 auto;
min-width:0;
}
.brand img{
width:162px;
max-width:48vw;
display:block;
}
.menu-toggle{
display:inline-flex;
width:46px;
height:46px;
flex:0 0 46px;
align-items:center;
justify-content:center;
flex-direction:column;
gap:6px;
margin:0;
padding:0;
border:1px solid rgba(139,114,83,.20);
background:#fffdf8;
box-shadow:0 10px 28px rgba(44,37,30,.06);
}
.menu-toggle i{
width:22px;
height:1px;
margin:0;
background:#2e2924;
transition:transform .22s ease, opacity .22s ease;
}
.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobiles Menü als ruhiges Overlay statt gequetschter Desktop-Navigation */
.call-head,
.nav{
display:none;
}
.nav.is-open{
position:fixed;
z-index:110;
left:16px;
right:16px;
top:86px;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding:10px 22px 18px;
background:rgba(255,253,248,.985);
border:1px solid rgba(139,114,83,.20);
box-shadow:0 24px 70px rgba(38,31,24,.18);
font-size:1.08rem;
color:#2d2924;
}
.nav.is-open a{
width:100%;
padding:15px 0;
border-bottom:1px solid rgba(139,114,83,.13);
}
.nav.is-open a:last-child{border-bottom:0}
.nav.is-open a:after{display:none}
/* Home-Hero mobil bewusst textgeführt, Bild danach als starke Fläche */
.home-hero{
display:flex;
flex-direction:column;
background:#fffdf8;
border-bottom:1px solid var(--line);
}
.hero-content{
order:1;
width:var(--container);
padding:42px 0 30px;
}
.hero-photo{
order:2;
position:relative;
width:var(--container);
height:360px;
margin:0 auto 28px;
border:1px solid var(--line);
overflow:hidden;
}
.hero-copy{max-width:620px}
.hero-copy h1{
font-size:clamp(2.65rem,10.6vw,4rem);
line-height:.98;
letter-spacing:-.045em;
}
.hero-copy p{
max-width:560px;
font-size:1rem;
}
.hero-actions{
display:grid;
grid-template-columns:1fr;
gap:12px;
max-width:390px;
}
.btn{
width:100%;
min-height:54px;
justify-content:center;
}
/* Mobile Sektionen: klarer Rhythmus, keine zerquetschten Spalten */
.entry-grid,
.help-grid,
.about-home,
.forms-grid,
.services-panel,
.vorsorge-panel,
.impression-grid,
.contact-map-grid,
.sub-hero-inner,
.check-grid,
.takeover-grid,
.next-grid,
.footer-inner{
width:var(--container);
margin-left:auto;
margin-right:auto;
grid-template-columns:1fr;
}
.entry-strip,
.forms-preview,
.impressions,
.contact-map,
.sub-hero,
.help-strip,
.check-content,
.takeover,
.next-links{
width:100%;
border-left:0;
border-right:0;
}
.entry-grid{border-top:1px solid var(--line)}
.entry{
grid-template-columns:42px 1fr 20px;
gap:16px;
min-height:auto;
padding:24px 0;
}
.entry .icon-line{width:34px;height:34px}
.about-image{
min-height:300px;
border-bottom:1px solid var(--line);
}
.about-text{
padding:42px 0;
}
.forms-intro{
padding:40px 0 30px;
}
.form-mini{
min-height:118px;
padding:22px 0;
}
.form-mini svg{width:42px;height:42px}
.services-panel{
padding:0;
min-height:0;
}
.service-list{
padding:40px 0 28px;
}
.services-image,
.vorsorge-photo{
height:270px;
min-height:270px;
}
.vorsorge-copy{
padding:40px 0 30px;
}
/* Galerie mobil als hochwertige Bildleiste, nicht als Mini-Würfel */
.impression-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
padding:30px 0;
}
.impression-grid img{
height:165px;
width:100%;
object-fit:cover;
}
.impression-grid .text-link{
justify-self:start;
}
/* Unterseite mobil: Text zuerst, Bild danach; ruhige Checkliste */
.sub-hero-inner{
display:flex;
flex-direction:column;
}
.sub-hero-copy{
order:1;
padding:42px 0 28px;
}
.sub-hero-image{
order:2;
width:var(--container);
height:315px;
margin:0 auto 26px;
border:1px solid var(--line);
overflow:hidden;
}
.sub-hero h1{
font-size:clamp(2.55rem,10.4vw,3.85rem);
line-height:1;
}
.sub-hero-actions{
display:grid;
grid-template-columns:1fr;
gap:12px;
max-width:390px;
}
.help-item{
grid-template-columns:38px 1fr;
min-height:auto;
padding:22px 0;
}
.help-item .icon-line{width:30px;height:30px}
.check-grid{
gap:32px;
padding:42px 0;
}
.check-row{
grid-template-columns:58px 1fr;
gap:16px;
padding-bottom:24px;
margin-bottom:24px;
}
.check-num{
font-size:3rem;
line-height:.9;
}
.check-row h2{font-size:1.42rem}
.side-stack{position:static;gap:16px}
.side-box{padding:26px}
.side-logo{width:126px}
.side-photo{height:185px}
.takeover-grid{
gap:24px;
padding:40px 0;
}
.takeover .botanical-mini{display:none}
.next-link{
grid-template-columns:38px 1fr 18px;
min-height:auto;
padding:22px 0;
}
/* Kontakt/Karte mobil sauber untereinander */
.contact-map-grid{
gap:26px;
padding:36px 0;
}
.contact-card h2{font-size:1.55rem}
.map-box{
height:245px;
min-height:0;
border-left:0;
}
/* Footer mobil ruhig stapeln */
.footer-inner{
height:auto;
min-height:0;
display:grid;
gap:20px;
padding:30px 0;
text-align:left;
}
.footer-logo img{width:168px}
.footer-links{
justify-self:start;
display:flex;
flex-wrap:wrap;
gap:26px;
}
.footer-links a+a:before{display:none}
.copyright{
justify-self:start;
font-size:.86rem;
}
.mobile-call{
position:fixed;
z-index:130;
left:18px;
right:18px;
bottom:18px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:56px;
background:var(--gold);
color:#fff;
box-shadow:0 18px 48px rgba(79,54,27,.28);
font-weight:800;
}
body{padding-bottom:82px}
}
@media (max-width:640px){
:root{--container:calc(100vw - 30px)}
.header-inner{height:70px}
.brand img{width:148px;max-width:55vw}
.menu-toggle{width:44px;height:44px;flex-basis:44px}
.nav.is-open{top:80px;left:12px;right:12px;padding-inline:18px}
.hero-content{padding-top:36px}
.hero-photo{height:315px;margin-bottom:22px}
.hero-copy h1,
.sub-hero h1{font-size:clamp(2.45rem,12.5vw,3.25rem)}
.entry{grid-template-columns:36px 1fr 18px}
.about-image{min-height:255px}
.services-image,
.vorsorge-photo{height:230px;min-height:230px}
.impression-grid img{height:140px}
.sub-hero-image{height:275px;margin-bottom:22px}
.check-row{grid-template-columns:1fr;gap:8px}
.check-num{font-size:2.6rem}
.side-box{padding:24px}
.map-box{height:218px}
}
@media (max-width:420px){
:root{--container:calc(100vw - 26px)}
.brand img{width:140px}
.hero-photo{height:285px}
.sub-hero-image{height:250px}
.impression-grid img{height:124px}
}
/* 1N mobile-only hero / entry refinement
Desktop bleibt unverändert. */
@media (max-width:900px){
/* Die zwei großen Hero-CTA-Buttons mobil ausblenden. */
.home-hero .hero-actions{
display:none !important;
}
/* Das große Hero-Bild mobil nicht mehr als eigener Vollblock unter dem Text. */
.home-hero .hero-photo{
display:none !important;
}
/* Bildwirkung stattdessen rechts in die Höhe der drei Einstiege integrieren. */
.entry-strip{
position:relative;
overflow:hidden;
background:#fffdf8;
}
.entry-strip::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width:39%;
background:
linear-gradient(90deg, rgba(255,253,248,.96) 0%, rgba(255,253,248,.58) 34%, rgba(255,253,248,.05) 72%),
url("../img/hero-home.webp") center right / cover no-repeat;
border-left:1px solid var(--line);
opacity:.94;
pointer-events:none;
}
.entry-strip::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,253,248,0) 0%, rgba(251,247,239,.18) 100%);
pointer-events:none;
z-index:1;
}
.entry-grid{
position:relative;
z-index:2;
width:61%;
margin-left:max(15px, calc((100vw - var(--container))/2));
margin-right:auto;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.entry{
grid-template-columns:34px minmax(0,1fr) 18px;
gap:14px;
padding:20px 0;
min-height:118px;
align-items:start;
}
.entry .icon-line{
width:30px;
height:30px;
margin-top:4px;
}
.entry h3{
font-size:clamp(1.5rem,5.4vw,2.05rem);
line-height:1.04;
margin:0 0 6px;
}
.entry p{
font-size:.98rem;
line-height:1.35;
max-width:24ch;
}
.entry > .arrow{
align-self:center;
justify-self:end;
font-size:1.45rem;
line-height:1;
}
}
@media (max-width:640px){
.hero-content{
padding-bottom:34px;
}
.entry-strip::after{
width:36%;
background:
linear-gradient(90deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.62) 36%, rgba(255,253,248,.04) 78%),
url("../img/hero-home.webp") center right / cover no-repeat;
}
.entry-grid{
width:65%;
}
.entry{
grid-template-columns:30px minmax(0,1fr) 16px;
gap:12px;
min-height:112px;
padding:18px 0;
}
.entry .icon-line{
width:27px;
height:27px;
}
.entry p{
font-size:.94rem;
line-height:1.32;
}
}
@media (max-width:420px){
.entry-strip::after{
width:34%;
background-position:62% center;
}
.entry-grid{
width:68%;
}
.entry{
min-height:106px;
padding:16px 0;
}
.entry h3{
font-size:1.48rem;
}
.entry p{
font-size:.9rem;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1O – MOBILE HERO SIMPLIFY
Nur Startseite mobil. Desktop bleibt unverändert.
Ziel: kein Bild im oberen Hero, 3 Einstiege klar sichtbar,
danach das Hero-Bild als eigener ruhiger Bildblock.
========================================================= */
@media (max-width:900px){
/* Oberer Hero mobil: rein redaktioneller Einstieg, ohne Bild und ohne CTAs */
.home-hero{
display:block;
background:linear-gradient(180deg,#fffdf8 0%,#fbf7ef 100%);
border-bottom:1px solid var(--line);
}
.home-hero .hero-content{
width:var(--container);
padding:54px 0 42px;
}
.home-hero .hero-copy{
max-width:760px;
}
.home-hero .hero-copy h1{
max-width:760px;
font-size:clamp(2.7rem,9.8vw,4.05rem);
line-height:1.02;
letter-spacing:-.045em;
margin-bottom:22px;
}
.home-hero .hero-copy h1:after{
margin-top:24px;
width:82px;
}
.home-hero .hero-copy p{
max-width:680px;
font-size:1.06rem;
line-height:1.72;
}
.home-hero .hero-actions,
.home-hero .hero-photo{
display:none !important;
}
/* Einstiegsmodule mobil ohne seitliches Hintergrundbild */
.entry-strip{
position:relative;
overflow:visible;
background:#fffdf8;
border-bottom:1px solid var(--line);
}
.entry-strip::before{
display:none !important;
}
.entry-strip::after{
content:"";
position:relative;
display:block;
inset:auto;
width:var(--container);
height:310px;
margin:30px auto 34px;
border:1px solid var(--line);
background:url("../img/hero-home.webp") center center / cover no-repeat;
opacity:1;
pointer-events:none;
}
.entry-grid{
position:relative;
z-index:1;
width:var(--container);
margin:0 auto;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:1fr;
}
.entry{
width:100%;
grid-template-columns:42px minmax(0,1fr) 30px;
gap:18px;
min-height:auto;
padding:28px 0;
align-items:start;
border-right:0;
border-bottom:1px solid var(--line);
}
.entry:last-child{border-bottom:0}
.entry .icon-line{
width:34px;
height:34px;
margin-top:6px;
}
.entry h3{
font-size:clamp(1.9rem,6.5vw,2.45rem);
line-height:1.03;
margin:0 0 8px;
}
.entry p{
max-width:36ch;
font-size:1.02rem;
line-height:1.42;
}
.entry > .arrow{
align-self:center;
justify-self:end;
font-size:1.65rem;
line-height:1;
}
}
@media (max-width:640px){
.home-hero .hero-content{
padding:44px 0 36px;
}
.home-hero .hero-copy h1{
font-size:clamp(2.45rem,11.4vw,3.55rem);
line-height:1.04;
}
.home-hero .hero-copy p{
font-size:1rem;
line-height:1.68;
}
.entry-strip::after{
height:278px;
margin:26px auto 30px;
background-position:center center;
}
.entry{
grid-template-columns:36px minmax(0,1fr) 24px;
gap:15px;
padding:24px 0;
}
.entry .icon-line{
width:30px;
height:30px;
margin-top:4px;
}
.entry h3{
font-size:clamp(1.68rem,8.4vw,2.15rem);
}
.entry p{
font-size:.98rem;
max-width:31ch;
}
}
@media (max-width:420px){
.home-hero .hero-content{
padding:38px 0 32px;
}
.home-hero .hero-copy h1{
font-size:clamp(2.18rem,11.8vw,3.05rem);
letter-spacing:-.04em;
}
.entry-strip::after{
height:238px;
margin:22px auto 26px;
}
.entry{
grid-template-columns:32px minmax(0,1fr) 20px;
gap:13px;
padding:21px 0;
}
.entry h3{font-size:1.62rem}
.entry p{font-size:.94rem}
}
/* =========================================================
PHOEBES PREMIUM HTML 1P – MOBILE ENTRY FLATTEN
Nur mobil. Desktop bleibt unberührt.
Ziel:
- Einstiege flacher
- Icons größer
- Bild darunter früher sichtbar
========================================================= */
@media (max-width:900px){
.home-hero .hero-content{
padding:46px 0 30px;
}
.home-hero .hero-copy h1{
margin-bottom:18px;
}
.home-hero .hero-copy h1:after{
margin-top:20px;
}
.home-hero .hero-copy p{
line-height:1.62;
}
.entry-strip::after{
height:280px;
margin:18px auto 26px;
background-position:center center;
}
.entry{
grid-template-columns:48px minmax(0,1fr) 24px;
gap:14px;
padding:18px 0;
min-height:auto;
}
.entry .icon-line{
width:38px;
height:38px;
margin-top:2px;
}
.entry h3{
font-size:clamp(1.72rem,5.9vw,2.1rem);
line-height:1.02;
margin:0 0 6px;
}
.entry p{
max-width:34ch;
font-size:.98rem;
line-height:1.34;
}
.entry > .arrow{
font-size:1.5rem;
align-self:center;
}
}
@media (max-width:640px){
.home-hero .hero-content{
padding:40px 0 26px;
}
.entry-strip::after{
height:248px;
margin:16px auto 22px;
}
.entry{
grid-template-columns:44px minmax(0,1fr) 22px;
gap:12px;
padding:16px 0;
}
.entry .icon-line{
width:34px;
height:34px;
}
.entry h3{
font-size:clamp(1.56rem,7vw,1.95rem);
margin-bottom:5px;
}
.entry p{
font-size:.94rem;
line-height:1.3;
max-width:30ch;
}
}
@media (max-width:420px){
.home-hero .hero-content{
padding:34px 0 24px;
}
.entry-strip::after{
height:220px;
margin:14px auto 18px;
}
.entry{
grid-template-columns:40px minmax(0,1fr) 18px;
gap:11px;
padding:14px 0;
}
.entry .icon-line{
width:32px;
height:32px;
}
.entry h3{
font-size:1.46rem;
}
.entry p{
font-size:.9rem;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1Q – MOBILE SECTION REFINEMENTS
Nur mobil. Desktop bleibt unverändert.
Ziele:
- Über-uns-Bild mobil unter den Text
- Bestattungsformen mobil als 2er-Grid
- Leistungen-Akkordeon klarer als Aufklapper darstellen
- Kontakt / Karte / Footer mobil ruhiger strukturieren
- Mobiles Menü sichtbarer mit kleinen Symbolen
========================================================= */
@media (max-width:900px){
/* 1) Über uns: Text zuerst, Bild darunter */
.about-home{
display:grid;
grid-template-columns:1fr;
}
.about-text{
order:1;
padding:44px 0 28px;
}
.about-image{
order:2;
min-height:280px;
border-top:1px solid var(--line);
border-bottom:0;
}
.about-image:after{
background:linear-gradient(0deg, rgba(255,253,248,.16) 0%, rgba(255,253,248,0) 28%);
}
/* 2) Bestattungsformen: 2er-Grid statt Einzelsäulen */
.forms-grid{
width:var(--container);
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
align-items:stretch;
}
.forms-intro{
grid-column:1 / -1;
padding:38px 0 28px;
}
.forms-intro h2{
max-width:9.5ch;
}
.form-mini{
min-height:148px;
padding:20px 12px;
border-right:0;
border-bottom:1px solid var(--line);
gap:12px;
}
.form-mini:nth-of-type(odd){
border-right:1px solid var(--line);
}
.form-mini svg{
width:44px;
height:44px;
}
.form-mini span{
font-size:1rem;
line-height:1.28;
}
/* 3) Leistungen: klarer als Akkordeon / Aufklapper */
.service-list{
padding:38px 0 26px;
}
.service-list .eyebrow{
margin-bottom:16px;
}
.service-list .eyebrow::after{
content:"\AZum Öffnen tippen";
display:block;
white-space:pre;
margin-top:8px;
font-size:.76rem;
font-weight:600;
letter-spacing:.06em;
text-transform:none;
color:#8b7253;
}
.service-item{
padding:18px 16px;
margin-bottom:-1px;
border:1px solid var(--line);
background:#fffdf8;
}
.service-item span{
font-size:1.06rem;
line-height:1.3;
}
.service-item i{
width:30px;
height:30px;
flex:0 0 30px;
display:grid;
place-items:center;
border:1px solid rgba(189,135,64,.35);
border-radius:99px;
background:#fff;
color:var(--gold-dark);
font-style:normal;
font-size:.95rem;
line-height:1;
}
.service-item[aria-expanded="true"]{
background:#fbf7ef;
}
.service-item[aria-expanded="true"] i{
background:#fbf7ef;
}
.service-detail{
padding:0 16px 18px;
margin-top:-1px;
border:1px solid var(--line);
border-top:0;
background:#fbf7ef;
font-size:.95rem;
line-height:1.62;
}
/* 4) Kontakt: klarer gliedern */
.contact-map-grid{
gap:18px;
padding:34px 0 30px;
}
.contact-card{
padding:24px 20px;
border:1px solid var(--line);
background:#fffdf8;
}
.contact-card h2{
margin:10px 0 18px;
font-size:clamp(2rem,7.2vw,2.5rem);
line-height:1.04;
}
.contact-lines{
gap:0;
}
.contact-lines p{
grid-template-columns:26px 1fr;
gap:14px;
padding:14px 0;
border-top:1px solid rgba(139,114,83,.14);
font-size:1.02rem;
}
.contact-lines p:first-child{
border-top:0;
padding-top:0;
}
.contact-lines p:last-child{
padding-bottom:0;
}
.contact-lines svg{
width:22px;
height:22px;
margin-top:2px;
}
.map-box{
height:auto;
border:1px solid var(--line);
background:#f5f0e7;
overflow:hidden;
}
.map-image{
aspect-ratio:1.5 / 1;
}
.map-box img{
width:100%;
height:100%;
object-fit:cover;
}
.map-credit{
padding:10px 12px 12px;
font-size:.82rem;
line-height:1.35;
text-align:right;
color:#9a8d80;
background:#f5f0e7;
}
/* 4b) Footer: zusammenhängender und weniger zerrissen */
.site-footer{
background:#fffdf8;
}
.footer-inner{
gap:18px;
padding:26px 0 96px;
border-top:1px solid var(--line);
}
.footer-logo{
display:block;
padding-bottom:16px;
border-bottom:1px solid rgba(139,114,83,.16);
}
.footer-links{
width:100%;
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:6px 18px;
padding-bottom:16px;
border-bottom:1px solid rgba(139,114,83,.16);
}
.footer-links a{
padding:6px 0;
}
.footer-links a:last-child{
grid-column:1 / -1;
}
.copyright{
padding-top:2px;
font-size:.92rem;
}
/* 5) Mobiles Menü sichtbarer, mit kleinen Symbolen */
.nav.is-open{
padding:12px 18px 16px;
}
.nav.is-open a{
display:grid;
grid-template-columns:28px 1fr 14px;
align-items:center;
gap:14px;
width:100%;
padding:16px 0;
font-size:1.03rem;
font-weight:600;
border-bottom:1px solid rgba(139,114,83,.13);
}
.nav.is-open a::before{
width:24px;
height:24px;
display:grid;
place-items:center;
border:1px solid rgba(189,135,64,.28);
border-radius:99px;
color:var(--gold-dark);
font-size:.82rem;
line-height:1;
}
.nav.is-open a::after{
content:"›";
position:static;
display:block;
width:auto;
height:auto;
background:none;
color:#8b7253;
font-size:1.05rem;
}
.nav.is-open a[href="index.html"]::before{content:"⌂";}
.nav.is-open a[href="#ueber-uns"]::before{content:"✦";}
.nav.is-open a[href="#bestattungsformen"]::before{content:"❀";}
.nav.is-open a[href="#leistungen"]::before{content:"⌄";}
.nav.is-open a[href="#vorsorge"]::before{content:"♡";}
.nav.is-open a[href="#impressionen"]::before{content:"▣";}
.nav.is-open a[href="#standort"]::before{content:"⌖";}
.nav.is-open a[href="#kontakt"]::before{content:"✉";}
}
@media (max-width:640px){
.about-text{
padding:40px 0 24px;
}
.about-image{
min-height:245px;
}
.forms-intro{
padding:34px 0 24px;
}
.form-mini{
min-height:134px;
padding:18px 10px;
}
.form-mini svg{
width:40px;
height:40px;
}
.form-mini span{
font-size:.94rem;
}
.service-item{
padding:16px 14px;
}
.service-item span{
font-size:1rem;
}
.service-detail{
padding:0 14px 16px;
}
.contact-card{
padding:22px 18px;
}
.contact-card h2{
font-size:clamp(1.8rem,8.5vw,2.2rem);
}
.footer-links{
grid-template-columns:1fr;
gap:2px;
}
.footer-links a:last-child{
grid-column:auto;
}
}
@media (max-width:420px){
.forms-intro h2{
max-width:8.8ch;
}
.form-mini{
min-height:126px;
padding:16px 8px;
}
.form-mini span{
font-size:.9rem;
}
.nav.is-open a{
grid-template-columns:26px 1fr 12px;
gap:12px;
font-size:.99rem;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1R – MOBILE FOOTER + CTA POLISH
Nur mobil. Desktop bleibt unverändert.
Ziele:
- Footer mittig und ruhiger ausrichten
- Sticky Call Button unten in dezenterem warmem Grau/Taupe
========================================================= */
@media (max-width:900px){
.footer-inner{
justify-items:center;
align-items:center;
text-align:center;
gap:20px;
padding:26px 0 102px;
}
.footer-logo{
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.footer-logo img{
margin:0 auto;
}
.footer-links{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 0;
text-align:center;
}
.footer-links a{
display:block;
width:100%;
padding:3px 0;
}
.copyright{
width:100%;
justify-self:center;
text-align:center;
padding-top:2px;
}
.mobile-call{
left:24px;
right:24px;
bottom:20px;
min-height:56px;
background:#8d857a;
color:#fffdf8;
border:1px solid rgba(255,253,248,.22);
box-shadow:0 16px 36px rgba(53,47,41,.16);
}
.mobile-call:hover,
.mobile-call:focus-visible{
background:#847c72;
}
}
@media (max-width:640px){
.footer-inner{
gap:18px;
padding:24px 0 98px;
}
.footer-links{
gap:8px;
}
.mobile-call{
left:20px;
right:20px;
bottom:18px;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1S – MOBILE SUBPAGE HERO ALIGNMENT
Nur mobil. Desktop bleibt unverändert.
Ziele:
- Unterseiten mobil an die Startseitenlogik annähern
- Hero-Aktionsbuttons oben mobil ausblenden
- Sticky Call Button unten bleibt der führende Call-to-Action
- Footer mittig auch auf Unterseiten sicherstellen
========================================================= */
@media (max-width:900px){
.sub-hero-copy{
padding:40px 0 26px;
}
.sub-hero-actions{
display:none;
}
.sub-hero-copy p:last-of-type{
margin-bottom:0;
}
.site-footer .footer-inner{
justify-items:center;
text-align:center;
}
.site-footer .footer-logo,
.site-footer .footer-links,
.site-footer .copyright{
justify-self:center;
text-align:center;
}
}
@media (max-width:640px){
.sub-hero-copy{
padding:36px 0 22px;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1T – LEGAL PAGES + DEV CREDIT
Ziel:
- Impressum / Datenschutz im bestätigten Premium-Editorial-Stil
- Footer-Links korrekt setzen
- DEV-CP-Hinweis im Footer sehr klein und dezent
========================================================= */
.legal-hero{
background:#fffdf8;
border-bottom:1px solid var(--line);
}
.legal-hero-inner{
width:var(--container-narrow);
margin:auto;
padding:86px 0 62px;
}
.legal-hero h1{
margin:12px 0 20px;
font-family:var(--serif);
font-size:clamp(3.4rem,8vw,6.8rem);
line-height:.9;
font-weight:400;
letter-spacing:-.045em;
color:#2c2824;
}
.legal-hero p:not(.eyebrow){
max-width:720px;
color:#5f5750;
font-size:1.12rem;
line-height:1.75;
}
.legal-content{
background:#fffdf8;
}
.legal-grid{
width:var(--container-narrow);
margin:auto;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
padding:62px 0 86px;
}
.legal-card{
background:#fffdf8;
}
.legal-card-main{
padding-right:0;
}
.legal-card h2{
margin:38px 0 12px;
font-family:var(--serif);
font-size:clamp(1.65rem,3vw,2.25rem);
line-height:1.08;
font-weight:400;
color:#342f2a;
}
.legal-card h2:first-child{margin-top:0}
.legal-card p{
margin:0 0 18px;
color:#5f5750;
line-height:1.78;
}
.legal-card a{
color:var(--gold-dark);
text-decoration:none;
border-bottom:1px solid rgba(189,135,64,.28);
}
.legal-side{
display:flex;
flex-direction:column;
gap:18px;
}
.legal-note{
border:1px solid var(--line);
background:#fbf7ef;
padding:24px 22px;
}
.legal-note p:not(.eyebrow){
margin:0;
color:#5f5750;
line-height:1.65;
font-size:.96rem;
}
.developer-credit{
justify-self:end;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:10px;
margin-top:8px;
color:#6f665e;
font-size:.66rem;
line-height:1;
letter-spacing:.10em;
text-transform:uppercase;
opacity:.86;
white-space:nowrap;
text-decoration:none;
transition:opacity .25s ease, color .25s ease;
}
.developer-credit:hover{
color:#3a332d;
opacity:1;
}
.developer-credit img{
display:block;
width:auto;
max-width:98px;
max-height:20px;
object-fit:contain;
opacity:.92;
}
@media (max-width:900px){
.legal-hero-inner{
width:var(--container);
padding:46px 0 32px;
}
.legal-hero h1{
font-size:clamp(3rem,13vw,4.4rem);
margin-bottom:18px;
}
.legal-hero p:not(.eyebrow){
font-size:1rem;
line-height:1.65;
}
.legal-grid{
width:var(--container);
grid-template-columns:1fr;
gap:26px;
padding:38px 0 72px;
}
.legal-card-main{
padding-right:0;
}
.legal-card h2{
margin-top:30px;
font-size:1.72rem;
}
.legal-note{
padding:20px 18px;
}
.developer-credit{
justify-self:center;
justify-content:center;
margin-top:0;
font-size:.62rem;
gap:8px;
opacity:.82;
}
.developer-credit img{
max-width:88px;
max-height:18px;
}
}
@media (max-width:520px){
.developer-credit{
flex-direction:column;
gap:5px;
}
}
/* =========================================================
PHOEBES PREMIUM HTML 1V – FOOTER DEV CREDIT DESKTOP + LEGAL
Ziele:
- Hosting/Development/Design-Hinweis auch Desktop unten mittig
- DEV-CP sichtbarer, aber weiterhin dezent
- Footer-Link bleibt komplett klickbar und öffnet neu
========================================================= */
.footer-inner{
height:auto;
min-height:118px;
padding:22px 0 18px;
grid-template-rows:auto auto;
row-gap:14px;
}
.developer-credit{
grid-column:1 / -1;
justify-self:center;
justify-content:center;
margin-top:0;
padding-top:4px;
color:#8a8178;
font-size:.68rem;
letter-spacing:.16em;
opacity:1;
}
.developer-credit img{
max-width:118px;
max-height:24px;
opacity:.98;
}
.developer-credit:hover,
.developer-credit:focus-visible{
color:#3a332d;
opacity:1;
}
.legal-service-note{
margin-top:42px;
padding-top:28px;
border-top:1px solid var(--line);
}
.legal-service-note a{
font-weight:700;
}
@media (max-width:900px){
.footer-inner{
min-height:0;
padding:26px 0 102px;
}
.developer-credit{
padding-top:0;
font-size:.62rem;
letter-spacing:.13em;
}
.developer-credit img{
max-width:104px;
max-height:22px;
}
}
/* =========================================================
PHOEBES CONTENT 2H – MOBILE MENU FIX
Nur mobiles Menü. Desktop und Seitenlayouts bleiben unverändert.
Problem: Bei neuen .html-Navigationszielen griffen alte Icon-Regeln
nicht mehr sauber; Pfeile/Icon-Spalten wirkten zerbrochen.
========================================================= */
@media (max-width:900px){
.nav.is-open{
z-index:120;
left:14px;
right:14px;
top:86px;
padding:0 22px;
background:#fffdf8;
border:1px solid rgba(139,114,83,.22);
box-shadow:0 26px 72px rgba(38,31,24,.20);
opacity:1;
}
.nav.is-open a{
position:relative;
display:flex;
align-items:center;
min-height:68px;
width:100%;
padding:0 38px 0 54px;
border-bottom:1px solid rgba(139,114,83,.15);
font-size:1.05rem;
font-weight:650;
line-height:1.12;
color:#2d2924;
white-space:normal;
}
.nav.is-open a:last-child{
border-bottom:0;
}
.nav.is-open a::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
display:grid;
place-items:center;
border:1px solid rgba(189,135,64,.30);
border-radius:999px;
color:var(--gold-dark);
font-size:.9rem;
line-height:1;
background:rgba(255,253,248,.88);
}
.nav.is-open a::after{
content:"›";
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
display:block;
width:auto;
height:auto;
background:none;
color:#8b7253;
font-size:1.45rem;
line-height:1;
}
.nav.is-open a[href="index.html"]::before{content:"⌂";}
.nav.is-open a[href="ueber-uns.html"]::before{content:"✦";}
.nav.is-open a[href="im-trauerfall.html"]::before{content:"☎";}
.nav.is-open a[href="bestattungsformen.html"]::before{content:"❀";}
.nav.is-open a[href="leistungen.html"]::before{content:"☑";}
.nav.is-open a[href="bestattungsvorsorge.html"]::before{content:"♡";}
.nav.is-open a[href="bestattungskosten.html"]::before{content:"€";}
.nav.is-open a[href="kontakt.html"]::before{content:"✉";}
}
@media (max-width:420px){
.nav.is-open{
left:10px;
right:10px;
top:82px;
padding:0 18px;
}
.nav.is-open a{
min-height:64px;
padding-left:50px;
padding-right:34px;
font-size:1rem;
}
.nav.is-open a::before{
width:30px;
height:30px;
}
}
/* =========================================================
PHOEBES CONTENT 2I – Galerie + lokale SEO + Vorsorgeinfo
Neue Klassen nur für neue/erweiterte Contentseiten.
========================================================= */
.gallery-soft{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:#fffdf8;
padding:58px 46px 64px;
}
.gallery-soft-intro{
max-width:760px;
margin-bottom:34px;
}
.gallery-soft-intro p{
color:#5d554c;
}
.gallery-mosaic{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:18px;
}
.gallery-card{
position:relative;
min-height:260px;
overflow:hidden;
border:1px solid var(--line);
background:#f7f0e5;
}
.gallery-card.large{
min-height:540px;
grid-row:span 2;
}
.gallery-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:saturate(.94) contrast(.98) brightness(1.04);
transform:scale(1.01);
}
.gallery-card:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg, rgba(255,253,248,.24), rgba(255,253,248,0) 48%);
pointer-events:none;
}
.gallery-caption{
position:absolute;
left:22px;
right:22px;
bottom:18px;
z-index:2;
display:inline-flex;
width:max-content;
max-width:calc(100% - 44px);
background:rgba(255,253,248,.88);
border:1px solid rgba(139,114,83,.18);
padding:8px 12px;
font-size:.78rem;
letter-spacing:.18em;
text-transform:uppercase;
color:#7b5a31;
}
.local-proof{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:linear-gradient(180deg,#fffdf8,#fbf7ef);
padding:58px 46px;
}
.local-proof-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
}
.local-box{
border:1px solid var(--line);
background:rgba(255,253,248,.72);
padding:30px;
}
.local-box h2{
font-size:1.75rem;
line-height:1.12;
margin-bottom:12px;
}
.local-box p{
color:#5d554c;
}
.info-panel{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:#fffdf8;
padding:58px 46px 64px;
}
.info-panel-grid{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:46px;
align-items:start;
}
.info-panel h2{
font-size:clamp(2.1rem,3.2vw,3.35rem);
line-height:1.05;
margin:12px 0 18px;
}
.info-card-list{
display:grid;
gap:14px;
}
.info-card{
border:1px solid var(--line);
background:rgba(255,253,248,.76);
padding:22px 24px;
}
.info-card h3{
font-size:1.28rem;
margin-bottom:8px;
}
.info-card p{
color:#5d554c;
}
@media (max-width:900px){
.gallery-soft,
.local-proof,
.info-panel{
width:100%;
border-left:0;
border-right:0;
padding:42px var(--container-gap, 24px);
}
.gallery-mosaic,
.local-proof-grid,
.info-panel-grid{
grid-template-columns:1fr;
}
.gallery-card,
.gallery-card.large{
min-height:245px;
grid-row:auto;
}
.gallery-caption{
left:14px;
right:14px;
bottom:14px;
max-width:calc(100% - 28px);
}
.local-box,
.info-card{
padding:24px;
}
}
@media (max-width:520px){
.gallery-soft,
.local-proof,
.info-panel{
padding-left:16px;
padding-right:16px;
}
.gallery-card,
.gallery-card.large{
min-height:210px;
}
}
/* =========================================================
PHOEBES CONTENT 2K – PDF Download Dokumente im Trauerfall
Download-Komponente fuer Ratgeber- und Hilfeseiten.
========================================================= */
.download-panel{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:linear-gradient(180deg,#fffdf8,#fbf7ef);
padding:46px;
}
.download-card{
display:grid;
grid-template-columns:58px minmax(0,1fr) auto;
gap:24px;
align-items:center;
border:1px solid rgba(139,114,83,.22);
background:rgba(255,253,248,.86);
padding:28px;
box-shadow:0 16px 40px rgba(82,62,36,.08);
}
.download-icon{
color:var(--gold-dark);
width:48px;
height:48px;
}
.download-card h2{
font-size:1.75rem;
line-height:1.12;
margin:0 0 8px;
}
.download-card p{
color:#5d554c;
max-width:760px;
}
.download-meta{
margin-top:10px;
font-size:.82rem;
letter-spacing:.13em;
text-transform:uppercase;
color:#8b7253;
}
.download-card .btn{
white-space:nowrap;
}
@media (max-width:900px){
.download-panel{
width:100%;
border-left:0;
border-right:0;
padding:34px var(--container-gap, 24px);
}
.download-card{
grid-template-columns:42px 1fr;
gap:18px;
padding:24px;
}
.download-icon{
width:38px;
height:38px;
}
.download-card .btn{
grid-column:1 / -1;
width:100%;
}
}
@media (max-width:520px){
.download-panel{
padding-left:16px;
padding-right:16px;
}
.download-card{
grid-template-columns:1fr;
}
.download-icon{
margin-bottom:2px;
}
}
/* =========================================================
PHOEBES CONTENT 2L – interne Verlinkung / Themen-Hub
Neue Hub-Komponenten, keine Navigations-Logik.
========================================================= */
.topic-hub{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:#fffdf8;
padding:58px 46px 64px;
}
.topic-hub-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:18px;
}
.topic-hub-card{
border:1px solid var(--line);
background:rgba(255,253,248,.82);
padding:28px;
min-height:230px;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.topic-hub-card:hover{
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(82,62,36,.10);
border-color:rgba(185,132,60,.32);
}
.topic-hub-card svg{
width:38px;
height:38px;
color:var(--gold-dark);
margin-bottom:22px;
}
.topic-hub-card h2{
font-size:1.5rem;
line-height:1.1;
margin-bottom:10px;
}
.topic-hub-card p{
color:#5d554c;
font-size:.96rem;
}
.topic-hub-card b{
color:var(--gold-dark);
font-weight:700;
margin-top:18px;
}
@media (max-width:900px){
.topic-hub{
width:100%;
border-left:0;
border-right:0;
padding:42px var(--container-gap, 24px);
}
.topic-hub-grid{
grid-template-columns:1fr;
}
.topic-hub-card{
min-height:auto;
}
}
@media (max-width:520px){
.topic-hub{
padding-left:16px;
padding-right:16px;
}
}
/* =========================================================
PHOEBES NAV 3A – echte Desktop-Navigation mit Untermenüs
Ziel: Keine Anker-/Sprungnavigation mehr, echte HTML-Links.
========================================================= */
/* Desktop Dropdown Navigation */
@media (min-width:901px){
.nav-main{
gap:clamp(12px,1.35vw,24px);
}
.nav-main,
.nav-group{
position:relative;
}
.nav-group{
display:flex;
align-items:center;
}
.nav-group > a{
display:inline-flex;
align-items:center;
gap:6px;
}
.nav-group > a::before{
content:"";
}
.nav-group > a::after{
content:"";
position:static;
width:6px;
height:6px;
border-right:1px solid currentColor;
border-bottom:1px solid currentColor;
background:transparent;
transform:rotate(45deg) translateY(-2px);
opacity:.58;
transition:transform .22s ease, opacity .22s ease;
}
.nav-group:hover > a::after,
.nav-group:focus-within > a::after{
transform:rotate(225deg) translateY(-1px);
opacity:.9;
}
.nav-dropdown{
position:absolute;
top:calc(100% + 12px);
left:50%;
z-index:95;
min-width:246px;
transform:translateX(-50%) translateY(8px);
display:grid;
gap:0;
padding:10px;
background:rgba(255,253,248,.985);
border:1px solid rgba(139,114,83,.20);
box-shadow:0 24px 72px rgba(38,31,24,.16);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:before{
content:"";
position:absolute;
left:0;
right:0;
top:-14px;
height:14px;
}
.nav-dropdown-wide{
min-width:310px;
grid-template-columns:1fr 1fr;
column-gap:8px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{
display:flex;
align-items:center;
min-height:38px;
padding:9px 12px;
color:#2d2924;
font-size:.9rem;
line-height:1.15;
border-bottom:1px solid rgba(139,114,83,.10);
}
.nav-dropdown a:last-child{
border-bottom:0;
}
.nav-dropdown-wide a:nth-last-child(-n+2){
border-bottom:0;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{
background:rgba(185,132,60,.08);
}
.nav-dropdown a:after{
display:none;
}
}
/* Mobile: Gruppen sichtbar, Unterpunkte direkt darunter */
@media (max-width:900px){
.nav-main.is-open{
overflow:auto;
max-height:calc(100vh - 104px);
overscroll-behavior:contain;
}
.nav-main.is-open .nav-group{
width:100%;
display:block;
border-bottom:1px solid rgba(139,114,83,.15);
}
.nav-main.is-open .nav-group > a,
.nav-main.is-open > a{
position:relative;
display:flex;
align-items:center;
min-height:64px;
width:100%;
padding:0 36px 0 52px;
border-bottom:0;
font-size:1.03rem;
font-weight:700;
line-height:1.12;
color:#2d2924;
}
.nav-main.is-open .nav-group > a::before,
.nav-main.is-open > a::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
display:grid;
place-items:center;
border:1px solid rgba(189,135,64,.30);
border-radius:999px;
color:var(--gold-dark);
font-size:.86rem;
line-height:1;
background:rgba(255,253,248,.88);
}
.nav-main.is-open .nav-group > a::after,
.nav-main.is-open > a::after{
content:"›";
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
display:block;
width:auto;
height:auto;
background:none;
color:#8b7253;
font-size:1.35rem;
line-height:1;
}
.nav-main.is-open .nav-home::before{content:"⌂";}
.nav-main.is-open .nav-group:nth-of-type(1) > a::before{content:"✦";}
.nav-main.is-open .nav-group:nth-of-type(2) > a::before{content:"☎";}
.nav-main.is-open .nav-group:nth-of-type(3) > a::before{content:"❀";}
.nav-main.is-open .nav-group:nth-of-type(4) > a::before{content:"☑";}
.nav-main.is-open .nav-group:nth-of-type(5) > a::before{content:"♡";}
.nav-main.is-open > a[href="kontakt.html"]::before{content:"✉";}
.nav-main.is-open .nav-dropdown{
position:static;
display:grid;
visibility:visible;
opacity:1;
pointer-events:auto;
transform:none;
min-width:0;
box-shadow:none;
border:0;
border-top:1px solid rgba(139,114,83,.10);
background:rgba(247,240,229,.46);
padding:8px 0 10px 52px;
gap:0;
}
.nav-main.is-open .nav-dropdown-wide{
grid-template-columns:1fr;
}
.nav-main.is-open .nav-dropdown a{
min-height:38px;
padding:9px 28px 9px 0;
border-bottom:0;
font-size:.91rem;
font-weight:500;
color:#5d554c;
}
.nav-main.is-open .nav-dropdown a::before,
.nav-main.is-open .nav-dropdown a::after{
display:none;
content:none;
}
.nav-main.is-open .nav-dropdown a:hover{
color:#2d2924;
}
}
@media (max-width:420px){
.nav-main.is-open .nav-group > a,
.nav-main.is-open > a{
min-height:60px;
padding-left:48px;
font-size:.98rem;
}
.nav-main.is-open .nav-dropdown{
padding-left:48px;
}
}
/* =========================================================
PHOEBES NAV 3B – Dropdown-/Mobile-Menü-Fix
Fix:
- Desktop-Caret überschreibt alte Unterstrich-Pseudoelemente sauber
- Mobile Untermenüs sind nicht mehr alle offen, sondern klappen per Tap auf
========================================================= */
/* Desktop: Caret sauber halten, keine langen Linien/kaputten Pfeile */
@media (min-width:901px){
.nav-main > .nav-group > a::after{
content:"";
position:static !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
top:auto !important;
display:inline-block !important;
width:8px !important;
height:8px !important;
min-width:8px;
margin-left:8px;
border:0;
border-right:1.5px solid rgba(45,41,36,.62);
border-bottom:1.5px solid rgba(45,41,36,.62);
background:transparent !important;
transform:rotate(45deg) translateY(-2px);
opacity:1;
transition:transform .22s ease, border-color .22s ease;
}
.nav-main > .nav-group:hover > a::after,
.nav-main > .nav-group:focus-within > a::after{
width:8px !important;
transform:rotate(225deg) translateY(-1px);
border-color:rgba(126,91,48,.88);
}
.nav-main > .nav-group > a:hover::after{
width:8px !important;
}
.nav-main > .nav-home::after,
.nav-main > a[href="kontakt.html"]::after{
content:"";
position:absolute;
left:0;
bottom:13px;
width:0;
height:1px;
background:var(--gold);
transition:.25s ease;
}
.nav-main > .nav-home:hover::after,
.nav-main > a[href="kontakt.html"]:hover::after{
width:100%;
}
.nav-dropdown a::after,
.nav-dropdown a:hover::after{
display:none !important;
content:none !important;
width:0 !important;
}
}
/* Mobile: Untermenüs standardmäßig zu, per Tap aufklappen */
@media (max-width:900px){
.nav-main.is-open{
overflow:auto;
max-height:calc(100vh - 104px);
}
.nav-main.is-open .nav-group{
width:100%;
display:block;
border-bottom:1px solid rgba(139,114,83,.15);
}
.nav-main.is-open .nav-group > a{
cursor:pointer;
}
.nav-main.is-open .nav-group > a::after{
content:"+";
font-size:1.15rem;
transform:translateY(-50%);
}
.nav-main.is-open .nav-group.submenu-open > a::after{
content:"–";
font-size:1.35rem;
}
.nav-main.is-open .nav-dropdown{
display:none;
position:static;
visibility:visible;
opacity:1;
pointer-events:auto;
transform:none;
min-width:0;
box-shadow:none;
border:0;
border-top:1px solid rgba(139,114,83,.10);
background:rgba(247,240,229,.46);
padding:6px 0 10px 52px;
gap:0;
}
.nav-main.is-open .nav-group.submenu-open .nav-dropdown{
display:grid;
}
.nav-main.is-open .nav-dropdown-wide{
grid-template-columns:1fr;
}
.nav-main.is-open .nav-dropdown a{
position:relative;
display:flex;
align-items:center;
min-height:38px;
padding:8px 28px 8px 0;
border-bottom:0;
font-size:.91rem;
font-weight:500;
color:#5d554c;
}
.nav-main.is-open .nav-dropdown a::before,
.nav-main.is-open .nav-dropdown a::after{
display:none !important;
content:none !important;
}
}
/* =========================================================
PHOEBES NAV 3C – Desktop Navigation kompakter
Start-Link entfernt, da Logo bereits zur Startseite führt.
========================================================= */
@media (min-width:901px){
.nav-main{
gap:clamp(14px,1.15vw,24px);
}
.nav-main > .nav-group > a,
.nav-main > a[href="kontakt.html"]{
white-space:nowrap;
}
.nav-main > .nav-group > a{
gap:4px;
}
.nav-main > .nav-group > a::after{
margin-left:7px;
}
}
@media (max-width:900px){
.nav-main.is-open .nav-group:nth-of-type(1) > a::before{content:"✦";}
.nav-main.is-open .nav-group:nth-of-type(2) > a::before{content:"☎";}
.nav-main.is-open .nav-group:nth-of-type(3) > a::before{content:"❀";}
.nav-main.is-open .nav-group:nth-of-type(4) > a::before{content:"☑";}
.nav-main.is-open .nav-group:nth-of-type(5) > a::before{content:"♡";}
}
/* =========================================================
PHOEBES NAV 3D – Mobile Menü Plus-Icon separieren
Fix: Plus/Minus überlagert nicht mehr das runde Themen-Icon.
========================================================= */
@media (max-width:900px){
.nav-main.is-open .nav-group > a,
.nav-main.is-open > a[href="kontakt.html"]{
padding-left:54px;
padding-right:54px;
}
.nav-main.is-open .nav-group > a::before,
.nav-main.is-open > a[href="kontakt.html"]::before{
left:0;
z-index:1;
}
.nav-main.is-open .nav-group > a::after{
right:12px;
left:auto;
z-index:2;
width:28px;
height:28px;
display:grid;
place-items:center;
border:1px solid rgba(189,135,64,.22);
border-radius:999px;
background:rgba(255,253,248,.90);
color:#8b7253;
font-size:1.05rem;
line-height:1;
}
.nav-main.is-open .nav-group.submenu-open > a::after{
font-size:1.22rem;
}
.nav-main.is-open > a[href="kontakt.html"]::after{
right:12px;
}
}
@media (max-width:420px){
.nav-main.is-open .nav-group > a,
.nav-main.is-open > a[href="kontakt.html"]{
padding-left:50px;
padding-right:50px;
}
.nav-main.is-open .nav-group > a::after{
right:8px;
width:26px;
height:26px;
}
}
/* =========================================================
PHOEBES HOME MOBILE 3M – Atmosphäre ohne Bild-Dublette
Basis bewusst 3D, nicht 3L:
- Desktop bleibt wie vor den Hero-Bild-Experimenten
- Mobile bekommt Atmosphäre als dezentes Hintergrundbild im Hero
- Das alte mobile Bild unter den Einstiegen wird ausgeblendet
- Kein separater Bildstreifen, keine doppelte Bildausgabe
========================================================= */
.mobile-hero-note{
display:none;
}
@media (max-width:900px){
/* Nur Startseiten-Hero: atmosphärischer Hintergrund statt separatem Bildblock */
.home-hero{
display:flex !important;
flex-direction:column !important;
min-height:auto !important;
border-bottom:1px solid var(--line) !important;
background:
linear-gradient(180deg, rgba(255,253,248,.80) 0%, rgba(255,253,248,.92) 44%, #fffdf8 100%),
linear-gradient(90deg, rgba(255,253,248,.92) 0%, rgba(255,253,248,.70) 48%, rgba(255,253,248,.34) 100%),
url("../img/hero-home.webp") 72% 0 / cover no-repeat,
#fffdf8 !important;
}
.home-hero:before,
.home-hero:after{
display:none !important;
content:none !important;
}
/* Wichtig: altes mobiles Hero-Bild unten komplett entfernen */
.home-hero .hero-photo{
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
opacity:0 !important;
}
.home-hero .hero-content{
order:1 !important;
width:var(--container) !important;
padding:46px 0 34px !important;
}
.home-hero .hero-copy{
max-width:720px !important;
}
.home-hero .hero-copy h1{
font-size:clamp(2.65rem,9.7vw,4rem) !important;
line-height:.99 !important;
letter-spacing:-.045em !important;
margin-bottom:22px !important;
}
.home-hero .thin-line{
width:86px !important;
margin:0 0 24px !important;
}
.home-hero .hero-copy p{
max-width:690px !important;
font-size:1rem !important;
line-height:1.62 !important;
}
.home-hero .hero-actions{
display:none !important;
}
.mobile-hero-note{
display:inline-flex !important;
margin-top:18px !important;
padding:10px 14px !important;
border:1px solid rgba(139,114,83,.20) !important;
background:rgba(255,253,248,.82) !important;
color:#6d5740 !important;
font-size:.86rem !important;
line-height:1.2 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
font-weight:750 !important;
}
/* Schnelleinstiege etwas ruhiger und flacher */
.entry-grid{
width:var(--container) !important;
margin:0 auto !important;
border-top:1px solid var(--line) !important;
}
.entry{
grid-template-columns:40px 1fr 26px !important;
gap:16px !important;
min-height:auto !important;
padding:20px 0 !important;
}
.entry .icon-line{
width:30px !important;
height:30px !important;
}
.entry h3{
font-size:clamp(1.75rem,7vw,2.35rem) !important;
line-height:1.03 !important;
}
.entry p{
max-width:520px !important;
font-size:.98rem !important;
line-height:1.42 !important;
}
.entry > .arrow{
align-self:center !important;
justify-self:end !important;
font-size:2rem !important;
color:#95662e !important;
}
}
@media (max-width:520px){
.home-hero{
background:
linear-gradient(180deg, rgba(255,253,248,.84) 0%, rgba(255,253,248,.94) 46%, #fffdf8 100%),
linear-gradient(90deg, rgba(255,253,248,.95) 0%, rgba(255,253,248,.76) 54%, rgba(255,253,248,.38) 100%),
url("../img/hero-home.webp") 76% 0 / auto 250px no-repeat,
#fffdf8 !important;
}
.home-hero .hero-content{
padding:38px 0 30px !important;
}
.home-hero .hero-copy h1{
font-size:clamp(2.35rem,10.7vw,3.22rem) !important;
line-height:1.0 !important;
}
.home-hero .hero-copy p{
font-size:.98rem !important;
line-height:1.56 !important;
}
.mobile-hero-note{
width:100% !important;
justify-content:center !important;
text-align:center !important;
}
.entry{
grid-template-columns:36px 1fr 22px !important;
gap:14px !important;
padding:18px 0 !important;
}
.entry h3{
font-size:clamp(1.6rem,8.5vw,2.05rem) !important;
}
.entry p{
font-size:.94rem !important;
}
}
/* =========================================================
PHOEBES SEO 1C – FAQ-, Bild- und Content-SEO
Sichtbare FAQ-Blöcke für Kernseiten.
========================================================= */
.faq-section{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
background:#fffdf8;
padding:58px 46px 64px;
}
.faq-intro{
max-width:760px;
margin-bottom:28px;
}
.faq-intro h2{
font-size:clamp(2.1rem,3.2vw,3.35rem);
line-height:1.05;
margin:10px 0 14px;
}
.faq-intro p{
color:#5d554c;
}
.faq-list{
display:grid;
gap:12px;
}
.faq-item{
border:1px solid rgba(139,114,83,.20);
background:rgba(255,253,248,.78);
padding:24px 26px;
}
.faq-item h3{
font-size:1.18rem;
line-height:1.25;
margin-bottom:9px;
color:#2d2924;
}
.faq-item p{
color:#5d554c;
line-height:1.65;
}
@media (max-width:900px){
.faq-section{
width:100%;
border-left:0;
border-right:0;
padding:42px var(--container-gap, 24px);
}
.faq-item{
padding:22px 20px;
}
}
@media (max-width:520px){
.faq-section{
padding-left:16px;
padding-right:16px;
}
}
/* =========================================================
PHOEBES COOKIE 1A – Consent Banner
Datensparsamer Cookie-/Consent-Hinweis im Website-Stil.
========================================================= */
.cookie-consent[hidden]{
display:none !important;
}
.cookie-consent{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:9999;
padding:22px;
background:linear-gradient(0deg, rgba(36,33,31,.18), rgba(36,33,31,0));
}
.cookie-consent__panel{
width:min(1040px, calc(100vw - 44px));
margin:0 auto;
display:grid;
grid-template-columns:1fr auto;
gap:28px;
align-items:end;
padding:28px;
border:1px solid rgba(139,114,83,.24);
background:rgba(255,253,248,.98);
box-shadow:0 26px 90px rgba(38,31,24,.22);
}
.cookie-consent__content h2{
font-size:clamp(1.55rem,2.5vw,2.2rem);
line-height:1.08;
margin:4px 0 10px;
}
.cookie-consent__content p{
max-width:720px;
color:#5d554c;
line-height:1.6;
}
.cookie-consent__options{
display:grid;
gap:10px;
margin-top:18px;
}
.cookie-option{
display:grid;
grid-template-columns:22px 1fr;
gap:12px;
align-items:start;
padding:12px 14px;
border:1px solid rgba(139,114,83,.15);
background:rgba(247,240,229,.46);
}
.cookie-option input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#bd873f;
}
.cookie-option strong{
display:block;
color:#2d2924;
font-size:.96rem;
}
.cookie-option small{
display:block;
margin-top:3px;
color:#6d665e;
line-height:1.4;
}
.cookie-option--required{
opacity:.88;
}
.cookie-consent__actions{
display:grid;
gap:10px;
min-width:220px;
}
.cookie-consent__actions .btn{
width:100%;
justify-content:center;
min-height:46px;
padding:0 18px;
font-size:.92rem;
white-space:nowrap;
}
.footer-links a[data-cookie-open]{
cursor:pointer;
}
@media (max-width:900px){
.cookie-consent{
padding:14px;
}
.cookie-consent__panel{
width:100%;
grid-template-columns:1fr;
gap:18px;
padding:22px;
max-height:calc(100vh - 28px);
overflow:auto;
}
.cookie-consent__actions{
min-width:0;
}
.cookie-consent__actions{
grid-template-columns:1fr;
}
}
@media (max-width:520px){
.cookie-consent{
padding:10px;
}
.cookie-consent__panel{
padding:18px;
}
.cookie-option{
padding:11px 12px;
}
}
/* =========================================================
PHOEBES COOKIE 1B – Logo, dunklerer Hintergrund, Laufzeit-Hinweis
========================================================= */
.cookie-consent{
background:
radial-gradient(circle at 50% 100%, rgba(255,253,248,.10), rgba(255,253,248,0) 42%),
rgba(36,33,31,.46) !important;
backdrop-filter:blur(3px);
}
.cookie-consent__panel{
position:relative;
}
.cookie-consent__brand{
margin-bottom:16px;
padding-bottom:14px;
border-bottom:1px solid rgba(139,114,83,.14);
}
.cookie-consent__brand img{
width:178px;
max-width:55vw;
height:auto;
display:block;
}
@media (max-width:900px){
.cookie-consent{
background:rgba(36,33,31,.54) !important;
backdrop-filter:blur(2px);
}
.cookie-consent__brand img{
width:156px;
}
}
/* FINAL 1A FIX – Cookie-Einstellungen als Button statt href="#" */
.footer-cookie-link,
.cookie-inline-link{
appearance:none;
border:0;
background:none;
padding:0;
margin:0;
font:inherit;
color:inherit;
cursor:pointer;
}
.footer-cookie-link:hover,
.cookie-inline-link:hover{
color:var(--gold-dark);
}
/* =========================================================
PHOEBES FINAL 1C – Bestattungsformen Hero Lesbarkeit
Fix für Bestattungsformen-Seiten:
Headline/Text dürfen nicht vom Hero-Bild überlagert werden.
Betrifft nur Seiten mit .forms-hero-safe.
========================================================= */
@media (min-width:901px){
.forms-hero-safe{
overflow:hidden;
}
.forms-hero-safe .sub-hero-inner{
position:relative;
isolation:isolate;
grid-template-columns:minmax(0, 55%) 45% !important;
}
.forms-hero-safe .sub-hero-copy{
position:relative;
z-index:5;
padding-right:54px !important;
}
.forms-hero-safe .sub-hero-copy::before{
content:"";
position:absolute;
z-index:-1;
inset:42px 8px 42px -34px;
background:linear-gradient(90deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.94) 68%, rgba(255,253,248,.62) 100%);
border:1px solid rgba(139,114,83,.12);
box-shadow:0 18px 42px rgba(82,62,36,.06);
pointer-events:none;
}
.forms-hero-safe .sub-hero-image{
position:relative;
z-index:1;
}
.forms-hero-safe .sub-hero-image::before{
display:block !important;
content:"" !important;
position:absolute;
z-index:2;
inset:0;
background:linear-gradient(90deg, #fffdf8 0%, rgba(255,253,248,.90) 20%, rgba(255,253,248,.38) 48%, rgba(255,253,248,0) 78%) !important;
pointer-events:none;
}
.forms-hero-safe .sub-hero-image::after{
display:none !important;
}
.forms-hero-safe .sub-hero h1,
.forms-hero-safe h1{
position:relative;
z-index:6;
}
}
@media (max-width:900px){
.forms-hero-safe .sub-hero-copy{
position:relative;
z-index:3;
background:#fffdf8;
}
.forms-hero-safe .sub-hero-image{
position:relative;
z-index:1;
}
.forms-hero-safe .sub-hero-image::before{
display:block !important;
content:"" !important;
position:absolute;
z-index:2;
inset:0;
background:linear-gradient(0deg, #fffdf8 0%, rgba(255,253,248,.20) 42%, rgba(255,253,248,0) 74%) !important;
pointer-events:none;
}
.forms-hero-safe .sub-hero-image::after{
display:none !important;
}
}
/* =========================================================
PHOEBES HOME 1A – Jens Kestner Vertrauensblock
Startseite: Persönlicher Vertrauensabschnitt zwischen
Schnelleinstiegen und Über-uns-Bereich.
========================================================= */
.personal-note{
width:var(--container);
margin:0 auto;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
background:linear-gradient(180deg,#fffdf8 0%,#fbf7ef 100%);
}
.personal-note-inner{
display:grid;
grid-template-columns:minmax(0,1fr) 41%;
align-items:stretch;
min-height:520px;
}
.personal-note-copy{
padding:72px 70px 68px 70px;
position:relative;
}
.personal-note-copy h2{
font-size:clamp(2.7rem,4.2vw,5rem);
line-height:1.02;
margin:10px 0 28px;
letter-spacing:-.035em;
}
.personal-note-copy blockquote{
margin:0 0 30px;
padding:0 0 0 26px;
border-left:3px solid var(--gold);
max-width:780px;
}
.personal-note-copy blockquote p{
font-family:var(--font-serif);
color:#2d2924;
font-size:clamp(1.55rem,2.1vw,2.35rem);
line-height:1.24;
letter-spacing:-.018em;
}
.personal-note-copy cite{
display:block;
margin-top:12px;
font-style:normal;
color:#8b7253;
font-size:.92rem;
}
.personal-note-copy > p{
max-width:780px;
color:#534d46;
line-height:1.72;
}
.personal-note-standout{
margin-top:22px;
font-weight:700;
color:#2d2924 !important;
}
.personal-note-values{
margin-top:8px;
font-weight:800;
letter-spacing:.02em;
color:#8b5f2c !important;
}
.personal-signature{
margin-top:34px;
display:grid;
gap:4px;
}
.personal-signature strong{
font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
color:var(--gold-dark);
font-size:clamp(2.2rem,3vw,3.25rem);
line-height:1;
font-weight:400;
}
.personal-signature span{
color:#70675e;
font-size:.92rem;
}
.personal-note-image{
position:relative;
margin:0;
overflow:hidden;
min-height:100%;
border-left:1px solid var(--line);
background:#f4ede3;
}
.personal-note-image:before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, rgba(251,247,239,.88) 0%, rgba(251,247,239,.30) 30%, rgba(251,247,239,0) 58%),
linear-gradient(0deg, rgba(255,253,248,.36) 0%, rgba(255,253,248,0) 42%);
pointer-events:none;
}
.personal-note-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
filter:saturate(.94) contrast(.98) brightness(1.04);
}
@media (max-width:1100px){
.personal-note-inner{
grid-template-columns:1fr;
}
.personal-note-image{
min-height:310px;
border-left:0;
border-top:1px solid var(--line);
order:2;
}
.personal-note-copy{
order:1;
}
}
@media (max-width:900px){
.personal-note{
width:100%;
border-left:0;
border-right:0;
}
.personal-note-inner{
width:var(--container);
margin:0 auto;
}
.personal-note-copy{
padding:48px 0 36px;
}
.personal-note-copy h2{
font-size:clamp(2.35rem,9.6vw,3.45rem);
margin-bottom:22px;
}
.personal-note-copy blockquote{
padding-left:20px;
margin-bottom:24px;
}
.personal-note-copy blockquote p{
font-size:clamp(1.35rem,5.4vw,1.8rem);
}
.personal-note-image{
width:100%;
min-height:230px;
margin:0 0 34px;
border:1px solid var(--line);
}
.personal-signature{
margin-top:28px;
}
}
@media (max-width:520px){
.personal-note-copy{
padding:42px 0 30px;
}
.personal-note-copy > p{
font-size:.98rem;
line-height:1.62;
}
.personal-note-image{
min-height:190px;
}
.personal-signature strong{
font-size:2.35rem;
}
}
/* =========================================================
PHOEBES HOME 1D – Mobile Hero Einzelbild-Fix
Ziel:
- Mobil genau EIN Herobild: das originale .hero-photo
- direkt nach Headline/Text und vor den 3 Einstiegen
- kein zusätzliches mobiles Duplikat
- Jens-Kestner-Block nutzt eigenes Jens-Bild
- Desktop bleibt unverändert
========================================================= */
/* Sicherheitsnetz: eventuell alte Mobile-Dubletten aus Zwischenständen ausblenden */
.mobile-hero-before-entries{
display:none !important;
}
@media (max-width:900px){
.home-hero{
display:flex !important;
flex-direction:column !important;
background:#fffdf8 !important;
}
.home-hero::before,
.home-hero::after{
display:none !important;
content:none !important;
}
.home-hero .hero-content{
order:1 !important;
}
/* Das vorhandene Desktop-Herobild wird mobil genau einmal als Bildblock verwendet. */
.home-hero .hero-photo{
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
position:relative !important;
width:var(--container) !important;
height:255px !important;
min-height:255px !important;
max-height:255px !important;
margin:0 auto 28px !important;
padding:0 !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
box-shadow:0 14px 34px rgba(82,62,36,.08) !important;
}
.home-hero .hero-photo img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:62% center !important;
filter:saturate(.96) contrast(.98) brightness(1.04);
}
.home-hero .hero-photo::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(0deg, rgba(255,253,248,.32) 0%, rgba(255,253,248,0) 48%);
pointer-events:none;
}
/* Jens-Block mobil garantiert mit Text zuerst und eigenem Bild danach. */
.personal-note-copy{
order:1 !important;
}
.personal-note-image{
order:2 !important;
}
}
@media (max-width:520px){
.home-hero .hero-photo{
height:215px !important;
min-height:215px !important;
max-height:215px !important;
margin-bottom:24px !important;
}
}
/* =========================================================
PHOEBES UI 1A – Dezente Gold-Scrollbar
Weißer/ivory Scrollbar-Hintergrund mit goldbraunem Regler
passend zur Jens-Kestner-Signaturfarbe.
========================================================= */
/* Firefox */
html{
scrollbar-width:thin;
scrollbar-color:var(--gold-dark) #fffdf8;
}
/* Chromium / Safari / Edge */
::-webkit-scrollbar{
width:12px;
height:12px;
}
::-webkit-scrollbar-track{
background:#fffdf8;
border-left:1px solid rgba(139,114,83,.12);
}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, var(--gold-dark), #bd873f);
border:3px solid #fffdf8;
border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, #8b5f2c, var(--gold-dark));
}
::-webkit-scrollbar-corner{
background:#fffdf8;
}
/* Mobile Browser zeigen Scrollbars oft systemseitig/overlay an.
Diese Regeln wirken hauptsächlich auf Desktop und unterstützten Browsern. */
/* =========================================================
PHOEBES MOBILE 1E – Bild-Dublette + Erreichbar-Fix
Ziel:
- Mobile Startseite: unten vor dem Jens-Kestner-Block kein zweites Hero-Bild mehr.
- Das atmosphärische obere Bild bleibt erhalten.
- Desktop bleibt unverändert.
- "24h erreichbar" wurde textlich auf "Erreichbar" gekürzt.
========================================================= */
@media (max-width:900px){
/* Sicherheitsregel gegen Zwischenstände:
Falls das originale .hero-photo mobil als zweiter Bildblock im normalen Dokumentfluss landet,
wird es mobil ausgeblendet. Das obere mobile Bild/Hintergrund bleibt davon unberührt. */
.home-hero .hero-photo{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
}
/* Falls aus älteren Zwischenständen ein eigener mobiler Bildblock vorhanden ist,
darf er ebenfalls nicht zusätzlich vor dem Jens-Kestner-Block erscheinen. */
.mobile-hero-before-entries{
display:none !important;
}
/* Der Kontakt-/Erreichbar-Button darf mobil etwas kompakter laufen. */
.hero-callstrip,
.mobile-callstrip,
.availability-strip{
letter-spacing:.08em;
white-space:normal;
}
}
/* =========================================================
PHOEBES MOBILE 1G – Erreichbar bleibt Desktop, Box nur mobil weg
Ziel:
- Desktop bleibt mit "Erreichbar" + Telefonnummer.
- Mobil verschwindet nur die Erreichbar-/Telefon-Box im Hero.
- Mobil bleibt das obere Hero-Bild sichtbar.
- Mobil verschwindet das untere Jens-Kestner-Bild.
========================================================= */
@media (max-width:900px){
/* Mobile: Erreichbar-/Telefon-Box unter dem Hero-Text ausblenden. */
.home-hero .hero-call,
.home-hero .hero-callstrip,
.home-hero .mobile-callstrip,
.home-hero .availability-strip,
.hero-content .hero-call,
.hero-content .hero-callstrip,
.hero-content .mobile-callstrip,
.hero-content .availability-strip{
display:none !important;
}
/* Mobile: oberes Hero-Bild sichtbar erzwingen. */
.home-hero{
display:flex !important;
flex-direction:column !important;
background:#fffdf8 !important;
}
.home-hero .hero-content{
order:1 !important;
}
.home-hero .hero-photo{
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
position:relative !important;
width:var(--container) !important;
height:255px !important;
min-height:255px !important;
max-height:255px !important;
margin:0 auto 28px !important;
padding:0 !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
box-shadow:0 14px 34px rgba(82,62,36,.08) !important;
}
.home-hero .hero-photo img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:62% center !important;
filter:saturate(.96) contrast(.98) brightness(1.04);
}
.home-hero .hero-photo::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(0deg, rgba(255,253,248,.32) 0%, rgba(255,253,248,0) 48%);
pointer-events:none;
}
/* Keine zusätzliche mobile Bild-Dublette. */
.mobile-hero-before-entries{
display:none !important;
}
/* Mobile: Bild im Jens-Kestner-Block unten ausblenden. */
.personal-note .personal-note-image{
display:none !important;
}
.personal-note-inner{
grid-template-columns:1fr !important;
}
}
@media (max-width:520px){
.home-hero .hero-photo{
height:215px !important;
min-height:215px !important;
max-height:215px !important;
margin-bottom:24px !important;
}
}
/* =========================================================
PHOEBES MOBILE 1H – Final: Hero oben, Jens-Bild sichtbar, Mobile-Erreichbar raus
Ausschließlich Mobile:
- Erreichbar-/Telefon-Zeile unter Hero-Text ausblenden
- Ein Hero-Bild oben anzeigen
- Keine zusätzliche Mobile-Hero-Dublette
- Jens-Kestner-Bild im persönlichen Block wieder anzeigen
Desktop bleibt unverändert.
========================================================= */
@media (max-width:900px){
/* Diese mobile Textzeile war noch sichtbar: raus damit. */
.home-hero .mobile-hero-note{
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
/* Nur falls andere Varianten der Erreichbar-Box existieren: mobil ebenfalls ausblenden. */
.home-hero .hero-call,
.home-hero .hero-callstrip,
.home-hero .mobile-callstrip,
.home-hero .availability-strip,
.hero-content .hero-call,
.hero-content .hero-callstrip,
.hero-content .mobile-callstrip,
.hero-content .availability-strip{
display:none !important;
}
/* Oben genau ein Hero-Bild zeigen. */
.home-hero{
display:flex !important;
flex-direction:column !important;
background:#fffdf8 !important;
}
.home-hero .hero-content{
order:1 !important;
}
.home-hero .hero-photo{
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
position:relative !important;
width:var(--container) !important;
height:255px !important;
min-height:255px !important;
max-height:255px !important;
margin:0 auto 28px !important;
padding:0 !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
box-shadow:0 14px 34px rgba(82,62,36,.08) !important;
}
.home-hero .hero-photo img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:62% center !important;
filter:saturate(.96) contrast(.98) brightness(1.04);
}
.home-hero .hero-photo::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(0deg, rgba(255,253,248,.32) 0%, rgba(255,253,248,0) 48%);
pointer-events:none;
}
/* Kein separates Hero-Duplikat aus älteren Zwischenständen. */
.mobile-hero-before-entries{
display:none !important;
}
/* WICHTIG: Jens-Kestner-Bild im persönlichen Block wieder anzeigen. */
.personal-note .personal-note-image{
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
width:100% !important;
min-height:220px !important;
height:220px !important;
margin:0 0 34px !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
}
.personal-note .personal-note-image img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
.personal-note-inner{
grid-template-columns:1fr !important;
}
.personal-note-copy{
order:1 !important;
}
}
@media (max-width:520px){
.home-hero .hero-photo{
height:215px !important;
min-height:215px !important;
max-height:215px !important;
margin-bottom:24px !important;
}
.personal-note .personal-note-image{
min-height:190px !important;
height:190px !important;
}
}
/* =========================================================
PHOEBES MOBILE 1I – FINAL: nur eine Frau oben, Jens unten
Ausschließlich mobil:
- keine Erreichbar-Zeile im Hero
- genau ein Bild der Frau: oben im Hero
- kein zweites Frauenbild als Hero-Hintergrund / Zwischenbild
- Jens-Kestner-Bild bleibt sichtbar
========================================================= */
@media (max-width:900px){
/* Sicherheit: Mobile-Textzeile entfernt / verborgen */
.home-hero .mobile-hero-note{
display:none !important;
content:none !important;
}
/* ENTSCHEIDEND:
Das zweite Frauenbild kam aus der mobilen Hintergrundbild-Variante.
Deshalb mobil sämtliches Hero-Hintergrundbild deaktivieren. */
.home-hero{
background:#fffdf8 !important;
background-image:none !important;
}
.home-hero::before,
.home-hero::after{
display:none !important;
content:none !important;
background:none !important;
background-image:none !important;
}
/* Oberes Hero-Bild bleibt das EINZIGE Frauenbild. */
.home-hero .hero-photo{
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
width:var(--container) !important;
height:255px !important;
min-height:255px !important;
max-height:255px !important;
margin:0 auto 28px !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
}
.home-hero .hero-photo img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:62% center !important;
}
/* Falls noch ein historischer Zwischenblock existieren sollte: nicht zeigen. */
.mobile-hero-before-entries{
display:none !important;
}
/* Jens-Kestner-Bild bleibt mobil sichtbar. */
.personal-note .personal-note-image{
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:100% !important;
height:220px !important;
min-height:220px !important;
margin:0 0 34px !important;
border:1px solid var(--line) !important;
overflow:hidden !important;
background:#f4ede3 !important;
}
.personal-note .personal-note-image img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
.personal-note-inner{
grid-template-columns:1fr !important;
}
.personal-note-copy{
order:1 !important;
}
}
@media (max-width:520px){
.home-hero .hero-photo{
height:215px !important;
min-height:215px !important;
max-height:215px !important;
margin-bottom:24px !important;
}
.personal-note .personal-note-image{
height:190px !important;
min-height:190px !important;
}
}
/* =========================================================
PHOEBES MOBILE 1J – Verantwortlicher Fehlerfix
Ursache:
Das zweite Frauenbild kam NICHT aus dem HTML und NICHT aus dem
Jens-Kestner-Block, sondern aus einer alten mobilen CSS-Regel:
.entry-strip::after mit background:url("../img/hero-home.webp")
Diese Pseudo-Fläche wurde nach den drei Einstiegen ausgegeben.
Fix ausschließlich mobil:
- .entry-strip::after als Bildblock deaktivieren
- .entry-strip::before sicher neutralisieren
- oberes Hero-Bild bleibt
- Jens-Kestner-Bild bleibt
- Desktop bleibt unverändert
========================================================= */
@media (max-width:900px){
.entry-strip::after{
display:none !important;
content:none !important;
background:none !important;
background-image:none !important;
width:0 !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
opacity:0 !important;
}
.entry-strip::before{
display:none !important;
content:none !important;
background:none !important;
background-image:none !important;
opacity:0 !important;
}
/* Sicherheit: Das echte obere Hero-Bild bleibt sichtbar. */
.home-hero .hero-photo{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* Sicherheit: Das echte Jens-Kestner-Bild bleibt sichtbar. */
.personal-note .personal-note-image{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
}
/* =========================================================
PHOEBES UI 1B – Scroll-to-top Button + Scrollbar final
- dezenter Button im Phönix-Design
- Desktop und Mobile
- Scrollbar: Ivory-Hintergrund, goldbrauner Regler
========================================================= */
/* Scrollbar final – Firefox */
html{
scrollbar-width:thin;
scrollbar-color:#9b672d #fffdf8;
}
/* Scrollbar final – Chromium / Safari / Edge */
::-webkit-scrollbar{
width:12px;
height:12px;
}
::-webkit-scrollbar-track{
background:#fffdf8;
border-left:1px solid rgba(139,114,83,.14);
}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#bd873f 0%,#9b672d 100%);
border:3px solid #fffdf8;
border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg,#9b672d 0%,#7d5125 100%);
}
::-webkit-scrollbar-corner{
background:#fffdf8;
}
/* Back-to-top */
.scroll-top{
position:fixed;
right:28px;
bottom:28px;
z-index:8500;
width:54px;
height:54px;
display:grid;
place-items:center;
border:1px solid rgba(139,114,83,.34);
background:rgba(255,253,248,.94);
color:#9b672d;
box-shadow:0 18px 46px rgba(38,31,24,.14);
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:
opacity .22s ease,
transform .22s ease,
visibility .22s ease,
background .22s ease,
color .22s ease,
border-color .22s ease;
cursor:pointer;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
}
.scroll-top.is-visible{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.scroll-top svg{
width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.scroll-top:hover,
.scroll-top:focus-visible{
background:linear-gradient(135deg,#bd873f,#9b672d);
color:#fffdf8;
border-color:#9b672d;
outline:none;
transform:translateY(-2px);
}
.scroll-top:active{
transform:translateY(0);
}
@media (max-width:900px){
.scroll-top{
right:18px;
bottom:92px; /* oberhalb des mobilen Telefonbuttons */
width:48px;
height:48px;
background:rgba(255,253,248,.92);
}
.scroll-top svg{
width:22px;
height:22px;
}
}
@media (max-width:520px){
.scroll-top{
right:14px;
bottom:88px;
width:46px;
height:46px;
}
}
/* =========================================================
PHOEBES UI 1C – Scrolltop Sichtbarkeit-Fix
Button muss über Mobile-Sticky-Call und Cookie-Layern sauber sichtbar sein.
========================================================= */
.scroll-top{
z-index:9998 !important;
pointer-events:auto;
}
.scroll-top.is-visible{
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
}
@media (max-width:900px){
.scroll-top{
bottom:104px !important;
right:18px !important;
}
}
@media (max-width:520px){
.scroll-top{
bottom:98px !important;
right:14px !important;
}
}