/* Weiße Elfen MKK - 1:1 rebuild of the old Elementor one-pager. Desktop values measured on the old site (2026-10-12). */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --crimson:#A21036; --primary:#96153C; --ink:#0F0F0D; --text:#3D3D3D; --gold:#C6A24C;
  --cream:#FCF4E9; --sand:#F7E8CB; --peach:#FCBB91; --blue:#4D7299; --sage:#ABC1AC; --navy:#0C1B3A;
  --glass:rgba(255,255,255,.15); --white:#fff;
  --head:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1200px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--cream);color:var(--text);font:400 16px/1.5 var(--body);overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--head);overflow-wrap:break-word;hyphens:manual}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
blockquote,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ic{flex:none;width:1em;height:1em;display:block}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.h2{font-size:42px;font-weight:700;line-height:1.2}
.lead{font-size:18px}
.head{display:flex;flex-direction:column;gap:20px}
.head--center{text-align:center;align-items:center;gap:15px}
.head--narrow{max-width:600px;margin-inline:auto;gap:20px}
.label{display:flex;align-items:center;gap:10px;font-weight:500;line-height:1.5}
.label .ic{width:18px;height:18px;color:var(--crimson)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}

/* pill button with arrow tile (old "jkit" button) */
.pill{display:inline-flex;align-items:center;gap:15px;padding:7px 7px 5px 24px;border:1px solid var(--glass);border-radius:50px;background:var(--crimson);color:#fff;font-weight:500;line-height:1.5;transition:background-color .3s,color .3s;min-height:50px}
.pill__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--glass);transform:translateY(-1px);transition:background-color .3s}
.pill__ic .ic{width:18px;height:18px}
.pill:hover,.pill:focus-visible{background:var(--glass);color:var(--crimson)}
.pill:hover .pill__ic,.pill:focus-visible .pill__ic{background:var(--crimson);color:#fff}

/* phone box: crimson circle + Festnetz + number */
.phonebox{display:inline-flex;align-items:center;gap:15px;color:var(--ink)}
.phonebox__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--crimson);color:#fff}
.phonebox__ic .ic{width:24px;height:24px}
.phonebox__txt{display:flex;flex-direction:column}
.phonebox__label{line-height:1.5}
.phonebox__num{font-family:var(--head);font-size:20px;font-weight:600;line-height:1.5;white-space:nowrap}
.phonebox:hover .phonebox__num{color:var(--crimson)}

/* ---------- header (sticky, overlays the hero) ---------- */
.hd{position:sticky;top:0;z-index:99;min-height:100px;margin-bottom:-100px;padding:0 20px;display:flex;align-items:center}
.hd__in{width:min(100%,var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:20px}
.hd__logo{flex:0 0 calc(25% - 15px)}
.hd__logo img{width:180px}
.hd__bar{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:0 15px 0 30px;border:1px solid var(--glass);border-radius:50px;background:var(--glass);box-shadow:0 0 30px rgba(0,0,0,.07)}
.hd__bar::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:-1}
.hd__nav{display:flex;align-items:center}
.hd__nav a{display:flex;align-items:center;min-height:70px;padding:0 15px;color:var(--primary);font-weight:500;line-height:1.5;transition:color .3s}
.hd__nav a:hover,.hd__nav a:focus-visible{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;padding:80px 20px 0;background:linear-gradient(90deg,var(--sage) 75%,transparent 75%);border-radius:0 0 0 30px}
.hero__in{width:min(100%,var(--wrap));margin:0 auto -50px;display:flex}
.hero__text{flex:0 0 40%;min-width:0;position:relative;z-index:3;display:flex;flex-direction:column;gap:20px;padding:100px 0 110px}
.hero__h1{width:800px;max-width:none;font-size:66px;font-weight:600;line-height:1;margin-bottom:5px}
.hero__h1 .nb-lg{display:block}
.hero__lead{max-width:472px}
.hero .actions{margin-top:10px}
.hero__media{flex:1;min-width:0;margin-left:21px}
.hero__media img{width:100%;margin-left:100px;border-radius:500px;aspect-ratio:1000/1150;object-fit:cover}

/* ---------- about ---------- */
.about{padding:100px 0 87px}
.about__in{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about__media{position:relative;container-type:inline-size;aspect-ratio:575/630}
.about__arch{position:absolute;left:25%;top:0;width:52.17%;height:84.3%;border:1px solid var(--peach);border-bottom-width:10px;border-radius:150px;background:linear-gradient(180deg,var(--peach) 20%,transparent 70%)}
.oval{position:absolute;z-index:2;width:46.96%;height:71.43%;padding:1.74cqi 1.74cqi 1.74cqi 0;background:var(--cream);border-radius:150px}
.oval--up{left:0;top:7.14%}
.oval:not(.oval--up){left:53.04%;top:21.43%;padding:1.74cqi 0 1.74cqi 1.74cqi}
.oval img{width:100%;height:100%;object-fit:cover;border-radius:150px}
.badge{position:absolute;z-index:3;left:32%;top:35.7%;width:31.3%;aspect-ratio:1;padding:1.74cqi;background:var(--cream);border-radius:50%}
.badge p{display:grid;place-items:center;height:100%;padding:0 12%;border-radius:50%;background:var(--peach);text-align:center;font-family:var(--head);font-size:4.52cqi;font-weight:600;line-height:1.5;color:var(--ink)}
.about__text{display:flex;flex-direction:column;gap:40px}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mini{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--sand);border-radius:20px}
.mini::before{content:"";position:absolute;left:0;top:20px;width:4px;height:70px;background:var(--gold)}
.mini__ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:15px;border-radius:50%;background:var(--crimson);color:#fff}
.mini__ic .ic{width:24px;height:24px}
.mini h3{font-size:24px;font-weight:600;line-height:1.4;margin-bottom:5px}

/* ---------- services bento ---------- */
.services{padding:0 0 100px}
.services .head{margin-bottom:50px}
.bento{display:grid;grid-template-columns:531fr 649fr;gap:20px}
.bento__side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:255px 255px minmax(275px,auto);gap:20px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:20px;border-radius:20px;overflow:hidden}
.tile h3{font-size:24px;font-weight:600;line-height:1.4;margin-bottom:5px}
.tile .tile__h-lg{font-size:42px;font-weight:700;line-height:1.2}
.tile__ic{align-self:flex-start;width:auto;height:35px;margin-bottom:0}
.tile--photo{min-height:550px;color:#fff}
.tile__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--navy) 100%)}
.tile__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;max-width:400px}
.tile__body .tile__ic{height:30px}
.tile--photo h3,.tile--blue h3,.tile--gold h3{color:#fff}
.tile--peach{background:var(--peach)}
.tile--peach .tile__ic{color:var(--primary);height:37px}
.tile--blue{background:var(--blue);color:#fff}
.tile--blue .tile__ic{height:34px}
.tile--gold{background:var(--gold);color:#fff;grid-column:1/-1}
.tile--gold p{max-width:400px}
.tile--gold .actions{margin-top:15px}

/* ---------- steps (ring graphic) ---------- */
.steps{padding:0 0 80px}
.steps .head p{color:var(--text)}
.rings{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:20px;min-height:420px;margin-top:30px;padding:0 40px;background:url(../img/process-rings.webp) center/contain no-repeat}
.ring{display:flex;flex-direction:column;align-items:center;gap:5px;padding:25px;border-radius:20px;text-align:center}
.ring__ic{width:auto;height:39px;color:var(--primary)}
.ring:last-child .ring__ic{height:44px}
.ring h3{font-size:30px;font-weight:600;line-height:1.3;margin:5px 0}
.ring__no{margin-top:15px;font-family:var(--head);font-size:30px;font-weight:600;line-height:1.3;color:var(--crimson)}

/* ---------- testimonials ---------- */
.voices{padding:100px 0 100px;overflow:hidden}
.voices__in{display:grid;grid-template-columns:464fr 696fr;gap:40px;align-items:stretch}
.voices__text{display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;z-index:2}
.voices__text .head{gap:15px}
.voices__row{display:flex;gap:20px;align-items:flex-start}
.voices__cta{flex:0 0 240px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.quote{position:relative;z-index:2;flex:0 0 360px;display:flex;flex-direction:column;gap:20px;padding:25px;border:1px solid var(--glass);border-radius:20px;background:var(--glass)}
.quote::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:-1}
.quote--1{margin-bottom:-50px}
.quote__top{display:flex;align-items:center;gap:20px}
.quote__top img{width:55px;height:55px;border-radius:50%;object-fit:cover}
.quote figcaption{font-weight:500;color:var(--ink)}
.stars{display:flex;gap:6px}
.star{position:relative;width:20px;height:20px;color:var(--primary)}
.star .ic{width:20px;height:20px;opacity:.25}
.star .star__on{position:absolute;inset:0;opacity:1;clip-path:inset(0 calc(100% - var(--f)) 0 0)}
.voices__media{position:relative;min-height:400px;border-radius:20px;display:flex;flex-direction:column;justify-content:center}
.voices__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
.voices__media::before{content:"";position:absolute;inset:0;border-radius:20px;background:rgba(0,0,0,.2);z-index:1}
.quote--2{position:absolute;right:-110px;top:50%;width:360px;transform:translateY(-50%)}

/* ---------- FAQ ---------- */
.faq{padding:70px 0 100px}
.faq .head{margin-bottom:50px}
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start}
.faq__panel{display:flex;flex-direction:column;gap:10px;min-height:100%;padding:30px;border-radius:20px;background:var(--sand)}
.faq__grid{align-items:stretch}
.acc__h{font-family:var(--body);font-size:16px;font-weight:500;line-height:1.5}
.acc__h button{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:56px;padding:16px 30px;border-radius:10px;background:var(--cream);color:var(--text);text-align:left;transition:background-color .3s}
.acc.is-open .acc__h button{background:#fff}
.acc__h .ic{width:18px;height:18px}
.acc__up,.acc.is-open .acc__down{display:none}
.acc.is-open .acc__up{display:block}
.acc__body{padding:20px 30px}
.regions{columns:2;column-gap:30px;list-style:disc;padding-left:18px}
.regions li{break-inside:avoid}

/* ---------- jobs (old custom HTML block) ---------- */
.jobs{padding:0 10px}
.jobs__in{position:relative;overflow:hidden;width:min(100%,var(--wrap));margin-inline:auto;padding:100px 30px;background:linear-gradient(135deg,#f5f1e8 0%,#f9f7f3 100%)}
.jobs__in::before{content:"";position:absolute;top:-100px;right:-200px;width:400px;height:400px;border-radius:50%;background:#e8a89a;opacity:.15}
.jobs__head,.jobs__card{position:relative;z-index:1;max-width:900px;margin-inline:auto}
.jobs__head{text-align:center;margin-bottom:80px}
.jobs__head .jobs__label{color:#97163C;font-size:.85em;font-weight:600;letter-spacing:1px;margin-bottom:15px}
.jobs__head h2{font-size:2.8em;font-weight:700;line-height:1.2;color:#2d2d2d;margin-bottom:20px}
.jobs__head p{max-width:700px;margin-inline:auto;font-size:1.05em;line-height:1.8;color:#555}
.jobs__card{padding:60px 50px;border:1px solid #f0ebe3;border-radius:16px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.jobs__card h3{font-size:1.8em;font-weight:700;line-height:1.3;color:#2d2d2d;margin-bottom:30px}
.jobs__card>p{color:#555;line-height:1.8;margin-bottom:25px}
.jobs__list{margin:35px 0;padding:25px 25px 25px 73px;border:1px solid rgba(151,22,60,.16);border-radius:14px;background:#f5f1e8}
.jobs__list li{position:relative;padding:10px 0 10px 25px;margin-bottom:8px;font-size:.95em;color:#555}
.jobs__list li:last-child{margin-bottom:0}
.jobs__list li::before{content:"→";position:absolute;left:0;color:#97163C;font-weight:700}
.jobs__mail{margin:30px 0;padding:25px;border:2px solid #f0ebe3;border-radius:8px;background:#f9f7f3;text-align:center}
.jobs__mail p{font-size:.95em;color:#555;margin-bottom:12px}
.jobs__mail a{display:inline-block;padding:10px 5px;font-weight:700;color:#555;word-break:break-all}
.jobs__mail a:hover{color:#97163C}
.jobs__btn{text-align:center}
.apply{display:inline-block;padding:16px 50px;border-radius:30px;background:#97163C;color:#fff;font-size:1.05em;font-weight:700;letter-spacing:.5px;box-shadow:0 4px 15px rgba(151,22,60,.35);transition:all .3s ease}
.apply:hover,.apply:focus-visible{background:#6f0e2c;transform:scale(1.05);box-shadow:0 6px 20px rgba(151,22,60,.45)}

/* ---------- contact ---------- */
.contact__band{position:relative;min-height:300px;background:var(--bg) center/cover no-repeat}
.contact__band::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
@media (min-width:1025px) and (hover:hover){.contact__band{background-attachment:fixed}}
.contact__wrap{position:relative;z-index:1;width:min(100% - 40px,var(--wrap));margin:-120px auto 0}
.contact__card{position:relative;display:flex;gap:40px;padding:40px;border-radius:20px;background:var(--glass);box-shadow:0 0 30px rgba(0,0,0,.04)}
.contact__card::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);z-index:-1}
.contact__text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px}
.contact__text .label .ic{width:20px;height:20px}
.callbox{position:relative;flex:0 0 40%;display:flex;flex-direction:column;gap:20px;padding:30px;border:1px solid var(--glass);border-radius:20px;background:var(--glass);isolation:isolate}
.callbox::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#fff 0%,var(--sand) 100%);opacity:.3;z-index:-1}
.callbox__h{display:flex;align-items:center;gap:15px;font-family:var(--head);font-size:24px;font-weight:600;line-height:1.4;color:var(--ink)}
.callbox__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:22px;background:var(--primary);color:#fff}
.callbox__ic .ic{width:20px;height:20px}
.callbox__num{display:inline-block;min-height:44px;font-family:var(--head);font-size:42px;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap}
.callbox__num:hover{color:var(--crimson)}
.callbox__or{display:flex;align-items:center;gap:10px;font-family:var(--head);font-size:20px;font-weight:600;line-height:1.5;color:var(--text)}
.callbox__or::before,.callbox__or::after{content:"";flex:1;height:1px;background:var(--sand)}
.callbox__btn{display:flex;align-items:center;justify-content:center;gap:4px;min-height:50px;padding:12px 24px;border:1px solid var(--gold);border-radius:50px;background:var(--primary);color:#fff;font-weight:500;line-height:1.5;transition:background-color .3s}
.callbox__btn .ic{width:16px;height:16px}
.callbox__btn:hover,.callbox__btn:focus-visible{background:var(--crimson)}

/* ---------- footer ---------- */
.ft{padding:80px 20px 40px;background:var(--sand)}
.ft__grid{width:min(100%,var(--wrap));margin-inline:auto;display:grid;grid-template-columns:358fr 357fr 405fr;gap:40px}
.ft__brand{display:flex;flex-direction:column;gap:20px;padding:30px 20px;border-radius:20px;background:var(--sage)}
.ft__brand img{width:160px}
.ft__col{display:flex;flex-direction:column;gap:20px}
.ft__col--map{gap:30px}
.ft__h{position:relative;padding-bottom:20px;font-size:24px;font-weight:600;line-height:1.4}
.ft__h::after{content:"";position:absolute;left:0;bottom:0;width:130px;height:1px;background:var(--peach)}
.ft__links{display:flex;flex-direction:column;gap:0}
.ft__links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:-4px 0;transition:color .3s}
.ft__links .ic{width:20px;height:20px;color:var(--gold)}
.ft__links a:hover,.ft__links a:focus-visible{color:var(--gold)}
.ft__copy{width:min(100%,var(--wrap));margin:50px auto 0;padding-top:30px;border-top:1px solid var(--peach);text-align:center}
.totop{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.15);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.totop .ic{width:18px;height:18px}
.totop.is-on{opacity:1;visibility:visible}

/* ---------- legal pages + 404 ---------- */
.legal{width:min(100% - 40px,900px);margin:0 auto;padding:180px 0 100px}
.legal h1{font-size:56px;font-weight:600;line-height:1.1;margin-bottom:40px}
.legal__body h2{font-size:24px;font-weight:600;line-height:1.4;margin:36px 0 12px}
.legal__body p,.legal__body ul{margin-bottom:14px}
.legal__body ul{list-style:disc;padding-left:22px}
.legal__body a{color:var(--crimson);text-decoration:underline;overflow-wrap:anywhere}
.legal--404 p{margin-bottom:24px}

/* ---------- entrance animations (like Elementor: fadeIn / fadeInLeft / fadeInRight / bounce) ---------- */
@keyframes wem-fade{from{opacity:0}to{opacity:1}}
@keyframes wem-left{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes wem-right{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes wem-bounce{0%,20%,53%,80%,to{transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1)}40%,43%{transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}90%{transform:translate3d(0,-4px,0)}}
html.js [data-anim]{opacity:0}
html.js [data-anim].is-in{opacity:1;animation:wem-fade 1.25s both;animation-delay:var(--d,0s)}
html.js [data-anim="fade-left"].is-in{animation-name:wem-left}
html.js [data-anim="fade-right"].is-in{animation-name:wem-right}
html.js [data-anim="bounce"].is-in{animation:wem-bounce 1.25s both;transform-origin:center bottom}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-anim]{opacity:1}
  html.js [data-anim].is-in{animation:none}
  *{transition-duration:.01ms!important}
}

/* ================= tablet ================= */
@media (max-width:1024px){
  .hd__bar{flex:0 0 auto;min-height:0;padding:0;border:0;background:none;box-shadow:none}
  .hd__bar::before,.hd__nav{display:none}
  .hd__in{justify-content:space-between}
  .hd__logo{flex:0 0 auto}
  .hero{padding:130px 20px 0;background:var(--sage)}
  .hero__in{flex-direction:column;align-items:center;margin-bottom:-50px}
  .hero__text{flex:none;align-items:center;text-align:center;padding:0}
  .hero__h1{width:auto;max-width:100%}
  .hero .actions{justify-content:center}
  .hero__media{width:min(100%,620px);margin:40px 0 0}
  .hero__media img{margin-left:0}
  .about__in{grid-template-columns:1fr;gap:60px}
  .about__media{width:min(100%,575px);margin-inline:auto}
  .about__text{text-align:center;align-items:center}
  .about__text .head{align-items:center}
  .about__text .actions{justify-content:center}
  .mini{text-align:left}
  .bento{grid-template-columns:1fr}
  .bento__side{grid-template-rows:auto}
  .tile--peach,.tile--blue{min-height:255px}
  .rings{grid-template-columns:repeat(2,1fr);min-height:0;padding:0;background:none}
  .ring{height:100%;padding:30px;border:1px solid var(--sand);background:var(--cream)}
  .voices__in{grid-template-columns:1fr}
  .voices__text .head{align-items:center;text-align:center}
  .voices__row{justify-content:center}
  .voices__media{min-height:400px}
  .quote--2{right:20px}
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .contact__band{min-height:600px}
  .contact__card{flex-direction:column}
  .callbox{flex:none}
  .ft__grid{grid-template-columns:1fr 1fr}
}

/* ================= mobile ================= */
@media (max-width:767px){
  .wrap,.contact__wrap{width:calc(100% - 40px)}
  .hd{min-height:80px;margin-bottom:-80px}
  .hd__logo img{width:160px}
  .pill.hd__cta{padding:6px 5px 6px 15px;gap:10px;min-height:44px}
  .hd__cta .pill__ic{width:30px;height:30px}
  .hd__cta .pill__ic .ic{width:12px;height:12px}
  .h2{font-size:32px}
  .hero{padding:110px 20px 0}
  .hero__h1{font-size:min(46px,10.4vw);line-height:1.05}
  .hero__media{margin-top:40px}
  .about{padding:90px 0 70px}
  .minis{grid-template-columns:1fr;width:100%}
  .about__media{aspect-ratio:auto;container-type:normal}
  .about__pics{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px}
  .oval,.oval--up,.oval:not(.oval--up){position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:350/500;padding:10px 10px 10px 0}
  .oval:not(.oval--up){padding:10px 0 10px 10px}
  .about__arch{left:0;top:200px;width:300px;height:596px}
  .badge{display:none}
  .services{padding-bottom:70px}
  .bento__side{grid-template-columns:1fr}
  .tile .tile__h-lg{font-size:min(32px,7.2vw)}
  .tile--peach,.tile--blue{min-height:0}
  .tile--gold .actions{justify-content:flex-start}
  .rings{grid-template-columns:1fr}
  .ring h3,.ring__no{font-size:24px}
  .voices{padding:70px 0}
  .voices__in{gap:40px}
  .voices__text{gap:40px}
  .voices__row{flex-direction:column;align-items:stretch}
  .voices__cta{flex:none;align-items:center}
  .quote{flex:none;width:auto}
  .quote--1{margin-bottom:-50px}
  .voices__media{min-height:400px;margin-top:0}
  .quote--2{left:0;right:0;top:153px;width:auto;transform:none}
  .faq{padding:50px 0 70px}
  .faq__panel{padding:20px}
  .acc__h button{padding:14px 20px}
  .acc__body{padding:16px 20px}
  .regions{column-gap:20px}
  .jobs{padding:0}
  .jobs__in{padding:60px 20px}
  .jobs__in::before{width:300px;height:300px;top:-150px;right:-250px}
  .jobs__head{margin-bottom:40px}
  .jobs__head h2{font-size:1.8em}
  .jobs__card{padding:30px 20px}
  .jobs__card h3{font-size:1.4em;margin-bottom:20px}
  .jobs__list{padding:20px 20px 20px 24px;margin:25px 0}
  .jobs__mail{padding:20px}
  .apply{padding:14px 32px;font-size:1em;white-space:normal}
  .contact__card{padding:25px;gap:25px}
  .callbox{padding:20px}
  .callbox__num{font-size:clamp(28px,8.6vw,42px)}
  .ft{padding:60px 20px 30px}
  .ft__grid{grid-template-columns:1fr}
  .legal{padding:130px 0 70px}
  .legal h1{font-size:min(46px,7.4vw);margin-bottom:28px}
  .legal__body h2{font-size:20px}
}
@media (max-width:400px){.regions{columns:1}}

/* ================= Plus: improvements on top of the 1:1 design (2026-10-12) ================= */
/* hero photo (reframed without AI watermark) keeps the tall oval */
.hero__media img{object-position:45% 50%}
/* menu: active section + softer hover */
.hd__nav a{position:relative}
.hd__nav a::after{content:"";position:absolute;left:50%;bottom:16px;width:6px;height:6px;border-radius:50%;background:var(--crimson);transform:translateX(-50%) scale(0);transition:transform .3s}
.hd__nav a.is-active::after,.hd__nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.hd__toggle{display:none}
/* readable glass: reviews + contact card */
.quote{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.6);box-shadow:0 18px 40px -24px rgba(12,27,58,.45)}
.contact__card{background:rgba(252,244,233,.84);border:1px solid rgba(255,255,255,.6)}
/* service tiles: lift on hover, photo zoom */
.tile{transition:transform .35s cubic-bezier(.22,.8,.24,1),box-shadow .35s}
.tile:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(12,27,58,.45)}
.tile__bg{transition:transform .9s cubic-bezier(.22,.8,.24,1)}
.tile--photo:hover .tile__bg{transform:scale(1.05)}
.tile--gold,.tile--gold h3{color:var(--ink)}
.tile--gold .tile__ic{color:var(--primary)}
.mini{transition:transform .35s cubic-bezier(.22,.8,.24,1),border-color .35s,background-color .35s}
.mini:hover{transform:translateY(-4px);border-color:var(--gold);background:#fff}
.mini__ic{transition:transform .35s}
.mini:hover .mini__ic{transform:rotate(-8deg) scale(1.06)}
.ring__ic{transition:transform .35s}
.ring:hover .ring__ic{transform:translateY(-4px)}
.oval img{transition:transform .9s cubic-bezier(.22,.8,.24,1)}
.oval{overflow:hidden}
.oval:hover img{transform:scale(1.04)}
/* header: sticky on all screens (Ammar QA 15.10.2026; was not sticky since 12.10.). On scroll only the original pill turns white glass, no full-width background */
.hd{position:sticky;top:0;z-index:999;transition:all .3s ease-in-out}
.hd__bar{transition:background .3s ease-in-out,box-shadow .3s ease-in-out,border-color .3s ease-in-out}
.hd.is-scrolled .hd__bar{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.hd.is-scrolled .hd__bar::before{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html{scroll-padding-top:110px}
/* only one active dot: the scroll spy wins over "Home" */
.hd__nav:has(a.is-active) a[aria-current="page"]:not(.is-active)::after{transform:translateX(-50%) scale(0)}
@media (max-width:1024px){
  /* tablet/phone: logo, Kontakt and menu button sit in the same white glass pill once scrolled */
  .hd__in{padding:6px 8px 6px 14px;border-radius:50px;transition:background .3s ease-in-out,box-shadow .3s ease-in-out,margin .3s ease-in-out}
  .hd.is-scrolled .hd__in{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
  .hd.is-scrolled .hd__bar{background:none;box-shadow:none}
  html{scroll-padding-top:90px}
}
@media (min-width:1025px){.quote--2{right:-40px}}
/* footer: contact data instead of social icons without links */
.ft__contact{display:flex;flex-direction:column;gap:2px}
.ft__contact a,.ft__contact span{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.ft__contact .ic{width:18px;height:18px;color:var(--primary)}
.ft__contact a:hover{color:var(--primary)}
.totop{background:var(--crimson)}
@media (prefers-reduced-motion:reduce){.tile:hover,.mini:hover{transform:none}.tile--photo:hover .tile__bg,.oval:hover img{transform:none}}

@media (max-width:1024px){
  .hd__bar{gap:10px}
  .hd__toggle{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.08)}
  .hd__bars{display:grid;gap:5px;width:20px}
  .hd__bars i{display:block;height:2px;border-radius:2px;background:var(--primary);transition:transform .3s,opacity .3s}
  .hd.is-open .hd__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd.is-open .hd__bars i:nth-child(2){opacity:0}
  .hd.is-open .hd__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hd__nav{position:absolute;right:0;top:calc(100% + 10px);display:flex;flex-direction:column;align-items:stretch;min-width:240px;padding:10px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 20px 40px -20px rgba(0,0,0,.3);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .3s,visibility .25s}
  .hd.is-open .hd__nav{visibility:visible;opacity:1;transform:none}
  .hd__nav a{min-height:48px;padding:0 16px;border-radius:12px}
  .hd__nav a:hover,.hd__nav a.is-active{background:var(--cream);color:var(--primary)}
  .hd__nav a::after{display:none}
  .hd__in{position:relative}
  /* steps: each card as a coloured ring like the desktop graphic */
  .ring{border:8px solid var(--rc,var(--sage));border-radius:140px;background:var(--cream);padding:34px 28px}
  .ring:nth-child(1){--rc:var(--sage)}
  .ring:nth-child(2){--rc:#FFB08F}
  .ring:nth-child(3){--rc:var(--blue)}
  .ring:nth-child(4){--rc:var(--gold)}
  .contact__band{min-height:360px}
  .ft{padding-bottom:84px}
  .quote--2{box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
}
@media (max-width:767px){
  .hd__toggle{width:44px;height:44px}
  .hd__in{gap:10px}
}
@media (max-width:400px){
  .hd__logo img{width:118px}
  .hd__bar{gap:6px}
  .hd__nav{min-width:220px}
  .ring{border-width:7px;border-radius:120px}
  .contact__band{min-height:300px}
}

/* ================= Plus: entrance effects (page load + scroll) ================= */
@keyframes wem-up{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes wem-pop{from{opacity:0;transform:translateY(-50%) scale(.85)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes wem-pop-m{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
html.js [data-anim="up"].is-in{animation:wem-up .9s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--d,0s)}
html.js [data-anim="pop"].is-in{animation:wem-pop .8s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--d,0s)}
@media (max-width:1024px){html.js [data-anim="pop"].is-in{animation-name:wem-pop-m}}
/* labels above headings draw in */
html.js .head .label .ic{transition:transform .6s cubic-bezier(.22,.8,.24,1) .1s,opacity .6s .1s}
html.js .head:not(:has(.is-in)) .label .ic{transform:rotate(-90deg) scale(.4);opacity:0}

/* page load: header, green panel, heading word by word, text, buttons, photo */
.hero__h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero__h1 .w>span{display:inline-block}
html.js .hd__logo,html.js .hd__bar{opacity:0;transform:translateY(-24px)}
html.js .hero{clip-path:inset(-20px 100% -300px 0)}
html.js .hero__h1 .w>span{transform:translateY(110%)}
html.js .hero__lead,html.js .hero .actions{opacity:0;transform:translateY(24px)}
html.js .hero__media img{opacity:0;transform:scale(1.12);clip-path:circle(0% at 60% 50%)}
html.js.is-loaded .hd__logo,html.js.is-loaded .hd__bar{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.24,1)}
html.js.is-loaded .hd__bar{transition-delay:.12s}
html.js.is-loaded .hero{clip-path:inset(-20px 0 -300px 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
html.js.is-loaded .hero__h1 .w>span{transform:none;transition:transform .9s cubic-bezier(.22,.8,.24,1);transition-delay:calc(.45s + var(--i) * .09s)}
html.js.is-loaded .hero__lead{opacity:1;transform:none;transition:opacity .8s ease 1s,transform .8s cubic-bezier(.22,.8,.24,1) 1s}
html.js.is-loaded .hero .actions{opacity:1;transform:none;transition:opacity .8s ease 1.15s,transform .8s cubic-bezier(.22,.8,.24,1) 1.15s}
html.js.is-loaded .hero__media img{opacity:1;transform:none;clip-path:circle(75% at 60% 50%);transition:opacity .6s ease .55s,transform 1.6s cubic-bezier(.22,.8,.24,1) .55s,clip-path 1.3s cubic-bezier(.7,0,.2,1) .55s}
@media (prefers-reduced-motion:reduce){
  html.js .hd__logo,html.js .hd__bar,html.js .hero__lead,html.js .hero .actions,html.js .hero__media img,html.js .hero__h1 .w>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html.js .hero{clip-path:none!important;transition:none!important}
  html.js [data-anim].is-in{animation:none!important}
  html.js .head .label .ic{opacity:1!important;transform:none!important}
}
/* smooth scrolling (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Standort section with My Store Locator map (Ammar QA 15.10.2026) */
.locator{padding:100px 0 160px}
.locator__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center}
.locator__info{display:flex;flex-direction:column;gap:20px}
.locator__facts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.locator__facts li{display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.locator__facts li>span:last-child{display:flex;flex-direction:column;color:var(--text);font-size:.95rem}
.locator__facts strong{color:var(--ink);font-size:1.05rem}
.locator__facts a{color:var(--primary)}
.locator__ic{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff}
.locator__ic .ic{width:18px;height:18px;fill:currentColor}
.locator__map{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06);outline:8px solid rgba(255,255,255,.7)}
.map--msl{height:640px;max-width:100%;border-radius:0;background:linear-gradient(135deg,var(--sand),var(--cream))}
.map--msl iframe{display:block;width:100%;height:640px;border:0;max-width:100%}
@media (max-width:1024px){.locator{padding:80px 0 150px}.locator__grid{grid-template-columns:1fr;gap:30px}}
@media (max-width:767px){.locator{padding:60px 0 140px}.map--msl,.map--msl iframe{height:520px}}

/* ---------- 1.4.0 (19.10.2026): map without click, contact form, privacy notice ---------- */
.map--msl{position:relative;overflow:hidden}
.locator__facts li>span:last-child{min-width:0;overflow-wrap:anywhere}
.locator__route{margin:4px 0 0}
.map__credit{margin:0;font-size:14px;color:var(--text)}
.map__credit a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.map__credit a:hover{color:var(--crimson)}
/* contact card: text + form left, call box right (phones: text, call box, form) */
.contact__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);grid-template-areas:"text call" "form call";column-gap:40px;row-gap:30px;align-items:start}
.contact__text{grid-area:text}
.callbox{grid-area:call;position:sticky;top:120px}
.contact__form{grid-area:form;display:flex;flex-direction:column;gap:8px}
.contact__form-h{margin:0;font-family:var(--head);font-size:24px;font-weight:600;line-height:1.3;color:var(--ink)}
.contact__form-p{margin:0 0 8px}
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.cform__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cform__field--full,.cform__alert,.cform__foot{grid-column:1/-1}
.cform label{font-weight:500;color:var(--ink);font-size:15px}
.cform input[type=text],.cform input[type=tel],.cform input[type=email],.cform textarea{width:100%;min-height:48px;padding:12px 16px;border:1px solid rgba(15,15,13,.14);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{outline:3px solid rgba(150,21,60,.28);outline-offset:1px;border-color:var(--primary)}
.cform [aria-invalid=true]{border-color:#B3261E}
.cform__req{color:var(--primary)}
.cform__error{margin:0;color:#B3261E;font-size:14px}
.cform__consent{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:14px!important;color:var(--text)!important}
.cform__consent input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--primary)}
.cform__consent a{color:var(--primary);text-decoration:underline}
.cform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.cform__note{margin:0;font-size:14px}
.cform__btn{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:6px 6px 6px 24px;border:1px solid var(--gold);border-radius:50px;background:var(--primary);color:#fff;font:500 16px var(--body);cursor:pointer}
.cform__btn:hover,.cform__btn:focus-visible{background:var(--crimson)}
.cform__btn .pill__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18)}
.cform__btn .pill__ic .ic{width:12px;height:12px}
.cform__alert{padding:14px 18px;border-radius:14px;font-size:15px}
.cform__alert ul{margin:6px 0 0;padding-left:18px}
.cform__alert a{color:inherit;text-decoration:underline}
.cform__alert--ok{background:#E7F2EA;color:#185C33}
.cform__alert--error{background:#FBEAEA;color:#8A1C1C}
/* footer office (replaces the Google map) */
.ft__office{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:25px;background:var(--cream)}
.ft__addr{display:flex;gap:12px;margin:0;color:var(--ink)}
.ft__addr .ic{flex:0 0 20px;width:20px;height:20px;margin-top:2px;color:var(--primary);fill:currentColor}
.ft__addr strong{display:block;font-family:var(--head)}
.ft__links2{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0}
.ft__links2 a{display:inline-flex;align-items:center;min-height:44px;color:var(--primary);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.ft__notice{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
.ft__notice:hover{color:var(--primary)}
/* privacy notice */
.cc{display:none;position:fixed;z-index:1000;left:20px;bottom:20px;width:min(440px,calc(100% - 40px));padding:22px 24px;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 18px 50px rgba(12,27,58,.22);font-size:15px}
html.wem-cc .cc,.cc.is-open{display:block}
.cc:focus{outline:none}
.cc__in{display:flex;flex-direction:column;gap:12px}
.cc__h{margin:0;font-family:var(--head);font-size:20px;font-weight:600;color:var(--ink)}
.cc p{margin:0}
.cc a{color:var(--primary);text-decoration:underline}
.cc__btn{align-self:flex-start;min-height:46px;padding:10px 28px;border:1px solid var(--gold);border-radius:50px;background:var(--primary);color:#fff;font:500 16px var(--body);cursor:pointer}
.cc__btn:hover,.cc__btn:focus-visible{background:var(--crimson)}
@media (max-width:1024px){
  .contact__card{grid-template-columns:1fr;grid-template-areas:"text" "call" "form"}
  .callbox{position:static}
}
@media (max-width:767px){
  .cform{grid-template-columns:1fr}
  .cform__btn{width:100%;justify-content:space-between}
  .cc{left:12px;bottom:12px;width:calc(100% - 24px);padding:18px}
}
.cform__alert:focus{outline:none}
/* very small phones (320 px): header pill fits without overflow */
@media (max-width:349px){.hd{padding:0 10px}.hd__logo img{width:100px}.pill.hd__cta{padding-left:12px;gap:8px}}
/* phones: the side-in animation of the mini cards must not widen the layout viewport (seen at 360/390 px) */
html{overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
.about,.services{overflow-x:clip}