/*
Theme Name: Hoopoe Day
Theme URI: https://www.hoopoeday.de
Author: Hoopoe Day GmbH
Description: Individuelles Theme fuer Hoopoe Day GmbH - Gebaeudereinigung, Hausmeisterservice, Security, Umzug, Mietwagen und Hotels zur Pacht.
Version: 1.0
Requires PHP: 7.4
Text Domain: hoopoe-day
*/


:root{--navy:#0B1F4B;--deep:#061230;--green:#22B14C;--mint:#7BEFA9;--paper:#F4F7FB;--ink:#0B1F4B;--mute:#51607F;--line:#D5DCEA;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0A1834;--ink:#EAF0FF;--mute:#9FB0D3;--line:#1E3160}}
:root[data-theme="dark"]{--paper:#0A1834;--ink:#EAF0FF;--mute:#9FB0D3;--line:#1E3160}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.05rem/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;letter-spacing:-.03em;line-height:1.05}
a{color:inherit}:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:4px;background:var(--green);transform:scaleX(0);transform-origin:left;z-index:9}
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;z-index:8;color:#fff;mix-blend-mode:normal;pointer-events:none}
.top b{font:800 1.05rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.top a{pointer-events:auto;background:var(--green);color:#fff;text-decoration:none;font-weight:700;padding:.55rem 1rem;border-radius:2rem;font-size:.95rem}
.dark{background:radial-gradient(120% 90% at 70% 20%,#123070,var(--deep) 65%);color:#fff}
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:6rem 1.25rem 4rem;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.6rem,9vw,6.4rem);font-weight:800;max-width:14ch;margin:1.5rem auto 1rem}
.hero p{color:#B9C6E6;max-width:34rem;margin:0 auto;font-size:1.15rem}
.hint{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;font-size:.9rem;color:#B9C6E6;display:grid;justify-items:center;gap:.5rem}
.hint i{width:2px;height:38px;background:linear-gradient(var(--mint),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.logo{width:min(200px,42vw);margin:0 auto}
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:dr 2.2s .2s cubic-bezier(.6,0,.2,1) forwards}
.chk{stroke-dasharray:200;stroke-dashoffset:200;animation:dr 1s 2s ease-out forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.story{height:650vh}
.stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;padding:5rem 6vw 2rem;overflow:hidden}
.texts{position:relative;height:20rem}
.p{position:absolute;inset:0;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .6s;pointer-events:none}
.p.on{opacity:1;transform:none}
.p small{color:var(--mint);font-weight:700;font-size:1rem}
.p h2{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:800;margin:.6rem 0 1rem}
.p p{color:#C6D2EE;max-width:28rem;font-size:1.15rem;margin:0}
.dots{display:flex;gap:.5rem;position:absolute;bottom:-3.2rem;left:0}
.dots i{width:2.2rem;height:4px;border-radius:2px;background:#ffffff33;transition:background .4s}
.dots i.on{background:var(--green)}
.shieldbox{perspective:1000px;justify-self:center;width:min(100%,460px)}
#shield{width:100%;transition:transform .15s linear;filter:drop-shadow(0 30px 40px #0008)}
.q{opacity:.14;transition:opacity .7s,transform .7s;transform-origin:120px 130px}
.q.on{opacity:1}
.tw{animation:tw 1.6s infinite}.tw2{animation-delay:.6s}
@keyframes tw{50%{opacity:.15;transform:scale(.6)}}
.tw{transform-box:fill-box;transform-origin:center}.q.q5{opacity:0;transform:scale(.3)}.q.q5.on{opacity:1;transform:none}
.wr{transform-box:fill-box;transform-origin:center;animation:wr 4s ease-in-out infinite}
@keyframes wr{50%{transform:rotate(25deg)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pl 2s infinite}
@keyframes pl{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.promises{padding:5rem 1.25rem;max-width:1080px;margin:0 auto}
.promises h2{font-size:clamp(2rem,5vw,3.4rem);max-width:16ch;margin-bottom:2.5rem}
.pl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.pl div{padding:1.4rem 1.2rem;border-left:3px solid var(--green)}
.pl b{display:block;font:700 1.2rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom:.3rem}.pl span{color:var(--mute)}
.contact{padding:6rem 1.25rem;text-align:center}
.contact h2{font-size:clamp(2.2rem,7vw,5rem);font-weight:800;max-width:14ch;margin:0 auto 1rem}
.contact p{color:#B9C6E6;max-width:32rem;margin:0 auto 2rem}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:1rem 1.6rem;border-radius:3rem;background:var(--green);color:#fff}
.btn.o{background:transparent;border:2px solid #ffffff66}
.info{margin-top:3rem;color:#B9C6E6;display:grid;gap:.3rem;font-style:normal}
footer{background:var(--deep);color:#7F90B8;text-align:center;padding:1.5rem;font-size:.9rem}
@media (max-width:800px){.stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;padding-top:5rem;gap:1rem}.shieldbox{width:min(62vw,280px)}.texts{height:15rem;order:2}.dots{bottom:-1.8rem}.p p{font-size:1.02rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.draw,.chk{stroke-dashoffset:0}html{scroll-behavior:auto}}

[data-page]{display:none}[data-page].show{display:block;animation:fi .5s}@keyframes fi{from{opacity:0}}
.top{pointer-events:auto;background:rgba(6,18,48,.94);backdrop-filter:blur(10px);gap:.6rem 1rem;flex-wrap:wrap}
.top a{background:none;padding:.3rem .1rem;border-radius:0;color:#fff;text-decoration:none}.top a.on{color:var(--mint)}
.top .brand{font:800 1.1rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.top .cta-s{background:var(--green);padding:.5rem 1rem;border-radius:2rem;color:#fff}
.top nav{display:flex;gap:1.2rem;font-weight:600;font-size:.95rem;overflow-x:auto;white-space:nowrap}
.page{max-width:1080px;margin:0 auto;padding:8rem 1.25rem 4rem}
.page h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;margin-bottom:1rem;max-width:16ch}
.lead{font-size:1.2rem;color:var(--mute);max-width:36rem;margin:0 0 2.5rem}.dark .lead{color:#C6D2EE}
.svc{padding:1.8rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}.svc h2{font-size:1.8rem}.svc p{margin:0;color:var(--mute)}.svc ul{grid-row:1/3;grid-column:2;margin:0;padding-left:1.1rem}
.hgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
#hotel{width:min(100%,300px);justify-self:center}#win rect{fill:#12306F;animation:lt 4s infinite}@keyframes lt{40%,60%{fill:#FFD98A}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:3.5rem 0}.box{padding:1.6rem;border:1px solid #ffffff2e;border-radius:1rem}.box h2{font-size:1.5rem;margin-bottom:.6rem}.box p{margin:0;color:#C6D2EE}
.sh{font-size:1.9rem;margin:2.5rem 0 1.2rem}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}.steps li{counter-increment:s;border-top:3px solid var(--green);padding-top:.8rem;color:#C6D2EE}.steps li::before{content:counter(s);font:800 1.6rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--mint);display:block}.steps b{display:block;color:#fff;font-size:1.1rem}
form#anfrage{display:grid;gap:.9rem;max-width:34rem;margin-top:3.5rem}form#anfrage label{display:grid;gap:.3rem;font-weight:600}
.dark input,.dark select,.dark textarea{background:#ffffff12;color:#fff;border:1.5px solid #ffffff44}.dark select option{color:#000}
input,select,textarea{font:inherit;padding:.75rem .9rem;border-radius:.5rem;width:100%}
.team{display:flex;gap:1.2rem;align-items:center;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.team h2{font-size:1.6rem}.team p{margin:.2rem 0}.av{width:5rem;height:5rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 1.5rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;flex:none}
details{border-bottom:1px solid var(--line);padding:1rem 0}summary{font-weight:700;cursor:pointer}details p{color:var(--mute);margin:.6rem 0 0}
footer a{color:#B9C6E6}
@media (max-width:760px){.svc,.hgrid,.two{grid-template-columns:1fr}.svc ul{grid-row:auto;grid-column:auto}.steps{grid-template-columns:1fr 1fr}.top nav{order:3;width:100%}.page{padding-top:8rem}.hero{padding-top:8rem}.stage{padding-top:7rem}}

.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}.chips a{border:2px solid var(--line);border-radius:2rem;padding:.4rem 1rem;text-decoration:none;font-weight:600}
.svc2{padding:3rem 0;border-top:1px solid var(--line);scroll-margin-top:9rem}.svc2 h2{font-size:clamp(1.9rem,4vw,2.8rem)}.svc2>p{max-width:40rem;color:var(--mute)}
.tg{color:var(--green);font-weight:700;margin:.4rem 0 1rem;font-size:1.1rem}
.stat{display:flex;gap:1rem;align-items:center;background:var(--navy);color:#fff;border-radius:1rem;padding:1.2rem 1.5rem;margin:1.5rem 0;flex-wrap:wrap}.stat b{font:800 clamp(2rem,6vw,3.2rem) system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--mint)}
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem 1.6rem;margin-top:1.6rem}.dg div{border-left:3px solid var(--green);padding-left:1rem;color:var(--mute)}.dg b{display:block;color:var(--ink);margin-bottom:.2rem}

.ill svg{display:block;width:100%;max-width:640px;border-radius:1rem;margin:1rem 0 1.4rem;box-shadow:0 18px 40px #0b1f4b33}.lw{fill:#12306F;animation:lt 4s infinite}
.req{margin-top:2.2rem;border:2px solid var(--green);border-radius:1rem;padding:0 1.3rem}.req summary{padding:1.1rem 0;font:800 1.25rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--green);list-style:none}.req[open] summary{border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.fm{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;padding-bottom:1.4rem}.fl{display:grid;gap:.3rem;font-weight:600;align-content:start}.fl[hidden]{display:none}.fl.w,.acts,.calc{grid-column:1/-1}
.fm input,.fm select,.fm textarea{border:1.5px solid var(--line);background:transparent;color:var(--ink)}.fm option{color:#000}
.ck{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-weight:400}.ck label{display:flex;gap:.4rem;align-items:center}.ck input{width:auto}
.acts{display:flex;gap:.8rem;flex-wrap:wrap}.btn.o2{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.calc{background:var(--navy);color:#fff;border-radius:1rem;padding:1.2rem 1.4rem;font-weight:400}.calc strong{display:block;font:800 clamp(1.8rem,5vw,2.6rem) system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--mint)}.calc small{display:block;color:#B9C6E6;margin-top:.5rem}.calc ul{margin:.6rem 0 0;padding-left:1.1rem;color:#DCE6FF}
@media (max-width:760px){.fm{grid-template-columns:1fr}}
.top .lgb{background:none;border:1.5px solid #ffffff77;color:#fff;border-radius:2rem;padding:.3rem .85rem;font:700 .9rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;cursor:pointer}.top .lgb:hover{border-color:var(--mint);color:var(--mint)}

.top .lgs{display:flex;gap:.25rem}.top .lgs button{background:none;border:1.5px solid #ffffff55;color:#fff;border-radius:2rem;padding:.25rem .65rem;font:700 .8rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;cursor:pointer}.top .lgs button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#061230}
html[lang="ar"] *{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;letter-spacing:0!important}html[lang="ar"] svg text{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
[dir="rtl"] .bar{transform-origin:right}[dir="rtl"] .dots{left:auto;right:0}
[dir="rtl"] .dg div{border-left:0;padding-left:0;border-right:3px solid var(--green);padding-right:1rem}[dir="rtl"] .pl div{border-left:0;border-right:3px solid var(--green)}
[dir="rtl"] .calc ul{padding-left:0;padding-right:1.1rem}
.legal h2{font-size:1.25rem;margin:1.8rem 0 .5rem}.legal p{max-width:46rem;color:var(--mute)}.legal h1{margin-top:3rem;max-width:none}.legal h1:first-child{margin-top:0}

.top .lgs{display:flex;gap:.25rem}.top .lgs button{background:none;border:1.5px solid #ffffff55;color:#fff;border-radius:2rem;padding:.25rem .65rem;font:700 .8rem system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;cursor:pointer}.top .lgs button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#061230}
html[dir="rtl"] .bar{transform-origin:right}html[dir="rtl"] .dots{left:auto;right:0}
html[dir="rtl"] .dg div{border-left:0;padding-left:0;border-right:3px solid var(--green);padding-right:1rem}html[dir="rtl"] .pl div{border-left:0;border-right:3px solid var(--green)}
html[dir="rtl"] .calc ul{padding-left:0;padding-right:1.1rem}
.legal h2{font-size:1.25rem;margin:1.8rem 0 .5rem}.legal p{max-width:46rem;color:var(--mute)}.legal h1{margin-top:3rem;max-width:none}.legal h1:first-child{margin-top:0}.legal .h1like{font-size:clamp(2rem,5vw,3rem);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.02em;margin-top:3rem;max-width:none}
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:2rem}
.hub a{display:block;padding:1.5rem;border:1.5px solid var(--line);border-radius:1rem;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.hub a:hover{border-color:var(--green);transform:translateY(-2px)}
.hub h2{font-size:1.4rem;margin-bottom:.5rem}.hub p{margin:0;color:var(--mute);font-size:.98rem}
.hub span{color:var(--green);font-weight:700;font-size:.9rem;display:inline-block;margin-top:.8rem}
.crumb{color:var(--mute);font-size:.95rem;margin-bottom:1rem}.crumb a{color:var(--green);text-decoration:none}
.top .brand{display:flex;align-items:center;gap:.5rem}.top .brand svg{width:1.5rem;height:1.5rem}
.dark .dg div{color:#C6D2EE}.dark .dg b{color:#fff}.dark .crumb{color:#B9C6E6}.dark .crumb a{color:var(--mint)}

.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}.related h2{font-size:1.4rem;margin-bottom:1rem}.relcards{display:flex;gap:.8rem;flex-wrap:wrap}.relcards a{border:1.5px solid var(--line);border-radius:2rem;padding:.6rem 1.2rem;text-decoration:none;color:inherit;font-weight:600}.relcards a:hover{border-color:var(--green);color:var(--green)}.dark .related{border-color:#ffffff2e}

.service-fallback{margin-top:2rem;padding:1.4rem 0}.service-fallback h2{margin-bottom:1rem}.service-fallback .dg{margin-top:0}