/* Shared phone/tablet rules, including Safari safe areas and text resizing. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:7rem}
body{min-width:0}
.wrap{width:calc(100% - 2 * max(20px,env(safe-area-inset-left),env(safe-area-inset-right)));max-width:1200px}
.herogrid>*,.cards>*,.split>*,.contactgrid>*,.requesthelp>*,.intro>*,.nav>*{min-width:0}
h1,h2,h3,p,.contactvalue,.contactlinks a{overflow-wrap:anywhere}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
.button{min-height:48px;white-space:normal;text-align:center;touch-action:manipulation}
.navlinks a,.mobile-nav a,.foot a{min-height:44px;display:inline-flex;align-items:center}
.cardbody>a:not(.button){min-height:44px;display:inline-flex;align-items:center}
.brand{flex-shrink:0}.brand img{flex-shrink:0}
.nav{position:relative}.photolabel{right:24px;max-width:440px}
.contactlinks span{margin-left:8px}
footer{padding-bottom:max(32px,env(safe-area-inset-bottom))}
.foot{flex-wrap:wrap}.foot>div{display:flex;flex-wrap:wrap;gap:8px 20px}.foot a{margin:0}
@media(max-width:1100px){
 .navlinks{display:none}.nav>details{display:block;flex-shrink:0}
 .nav>details>summary{list-style:none;min-width:64px;min-height:48px;padding:12px 15px;border:1px solid #c6d1dc;border-radius:4px;text-align:center;touch-action:manipulation}
 .nav>details>summary::-webkit-details-marker{display:none}
 .nav>details[open]>summary{background:var(--navy);color:white}
 .mobile-nav{position:absolute;top:calc(100% - 1px);left:0;right:0;padding:12px 18px;background:white;border:1px solid #dce4eb;box-shadow:0 12px 24px #061d421a;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto}
 .mobile-nav a{display:flex;min-height:48px;padding:12px 8px;font-size:16px;border-bottom:1px solid #edf1f5}
 .mobile-nav a:last-child{border:0}
 .herocopy h1{font-size:clamp(2.4rem,5vw,3.5rem)}
 .heroimage{margin-right:0}.herogrid{gap:24px;min-height:0}.herocopy{padding:45px 0}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .cardbody{padding:25px}.contactcards{grid-template-columns:1fr}
 .contactcards .cardbody{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center}
 .contactcards .number,.contactcards h3,.contactcards p{grid-column:1}
 .contactcards .contactvalue{grid-column:2;grid-row:1/3;align-self:end;font-size:20px!important}
 .contactcards .button{grid-column:2;grid-row:3/5}
 .contactcards p{margin:0}.split{gap:32px}.contactgrid{gap:30px}
 .contactlinks a{font-size:clamp(1.05rem,2.5vw,1.6rem)}
 .trustgrid{gap:22px}.trustgrid>div{align-items:flex-start;gap:12px}
 .intro{align-items:flex-start;gap:25px}.intro>*{flex:1}
}
@media(max-width:760px){
 .topbar .wrap{justify-content:center;text-align:center;font-size:13px}.topcontact{display:none}
 .nav{gap:10px;min-height:84px}.brand{gap:8px}.brand img{width:52px;height:52px}
 .brand strong{font-size:clamp(14px,3.8vw,19px)}.brand small{font-size:9px;letter-spacing:.1em}
 .nav>details>summary{min-width:58px;padding:12px 10px}
 .herogrid{display:flex;flex-direction:column;gap:0}.herocopy{padding:40px 0 32px}
 .herocopy h1{font-size:clamp(2.25rem,8.8vw,3.7rem);max-width:none}
 .herocopy p{max-width:100%}.heroimage{margin:0;height:clamp(280px,70vw,420px);min-height:0}
 .heroimage>img{object-position:center}.photolabel{left:16px;right:16px;bottom:16px;padding:12px 16px}
 .photolabel strong{font-size:15px}.photolabel span{font-size:13px}
 .actions .button{flex:1 1 180px;white-space:normal}
 .trustgrid,.cards,.extra,.split,.contactgrid,.requesthelp{grid-template-columns:minmax(0,1fr)}
 .trustgrid{gap:18px;padding:25px 0}.intro{display:block}.intro p{margin-top:20px;max-width:none}
 .section{padding:52px 0}.contact{padding:48px 0}.contactgrid{gap:18px}
 .portrait{height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%}
 .contactlinks a{font-size:clamp(1.1rem,5.3vw,1.6rem)}
 .pagehead{padding:40px 0 30px}.pagehead h1{font-size:clamp(2.2rem,8vw,3.6rem)}
 .contactcards .cardbody{display:flex;align-items:stretch;padding:24px}
 .contactcards .contactvalue{align-self:auto;font-size:clamp(16px,4.6vw,21px)!important}
 .contactcards .cardbody p{margin-bottom:10px}.contactcards .button{width:100%}
 .requesthelp{gap:15px;margin-top:40px;padding-top:35px}.requesthelp h2{font-size:2rem}
 .contactperson{gap:16px;align-items:flex-start}.contactperson img{width:76px;height:90px;border-radius:4px}
 .contactperson h2{font-size:1.45rem}.contactperson .eyebrow{font-size:11px}
 .foot{display:block}.foot>div{margin-top:14px}.legal{padding:30px 0 50px}
}
@media(max-width:360px){.wrap{width:calc(100% - 28px)}.brand img{width:42px;height:42px}.brand strong{font-size:14px}.brand small{font-size:8px}.brand{gap:6px}.nav{gap:6px}.cardbody,.contactcards .cardbody{padding:20px}.contactperson{flex-wrap:wrap}}
@media(orientation:landscape) and (max-height:500px){header{position:relative}.mobile-nav{max-height:65vh}.herocopy{padding-top:28px}.heroimage{max-height:380px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Four service cards, with customer service as a separate full-width section. */
#leistungen .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#leistungen .extra{grid-template-columns:minmax(0,1fr)}
#leistungen .extra p{max-width:760px}
@media(max-width:760px){#leistungen .cards{grid-template-columns:minmax(0,1fr)}}

/* Keep hero actions evenly sized and prevent iOS emoji/wrapping differences. */
.actions .button{gap:8px;white-space:nowrap}
.actions .button-arrow{display:block;flex:0 0 18px;width:18px;height:18px}
@media(max-width:1100px){
 .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-auto-rows:1fr;align-items:stretch}
 .actions .button{min-height:56px;padding:15px 16px}
}
/* Keep complete words in the main heading at every screen size. */
.herocopy h1{-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}