/* KITKA, Stilblatt. Gebaut und gemessen, nicht geschaetzt.
   Aenderungen gehoeren in diese Datei, nicht in den Customizer. */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../schrift/instrument-sans-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../schrift/instrument-sans-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../schrift/instrument-sans-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../schrift/instrument-sans-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("../schrift/inter-tight-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url("../schrift/inter-tight-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url("../schrift/inter-tight-latin-800-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{margin:0;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:18px;line-height:1.55;letter-spacing:-.008em;background:#f6f5f4;color:#211f1e;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.d1,.d2,.d3,.hl2,.tile h3,.bigscore,.bigquote,.chaptext{font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif}
h1,h2,h3,.d1,.d2,.d3,.hl2,.facts b{overflow-wrap:break-word}
a{color:#211f1e}
a,button,article,summary,img{transition:background-color 140ms cubic-bezier(.2,.6,.2,1),color 140ms cubic-bezier(.2,.6,.2,1),border-color 140ms cubic-bezier(.2,.6,.2,1),opacity 140ms cubic-bezier(.2,.6,.2,1)}
[data-cta]:hover{background:#de3713 !important}
[data-cta]:active{background:#c73100 !important}
@media (prefers-reduced-motion:no-preference){
  [data-cta]{transition:background-color 180ms cubic-bezier(.2,.7,.2,1)}
  [data-ghost]{transition:background-color 180ms cubic-bezier(.2,.7,.2,1),color 180ms,border-color 180ms}
}
[data-ghost]:hover{background:#211f1e !important;color:#f6f5f4 !important;border-color:#211f1e !important}
.on-dark [data-ghost]:hover{background:#f6f5f4 !important;color:#211f1e !important;border-color:#f6f5f4 !important}
[data-link]:hover{text-decoration-thickness:3px}
[data-row]:hover img{opacity:.88}
:focus-visible{outline:2px solid #211f1e;outline-offset:3px}
.on-dark :focus-visible{outline-color:#ffffff}
input:focus,select:focus,textarea:focus{border-color:#211f1e;outline:2px solid #211f1e;outline-offset:2px}
.skip{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;overflow:visible}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
input,select,textarea,button{font-family:inherit}
textarea{field-sizing:content}
h1,h2,h3{text-wrap:balance}
section[id]{scroll-margin-top:120px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
p{text-wrap:pretty}
.lbl{font-size:15px;font-weight:600;letter-spacing:.005em;color:#5d5a59}
.lbl.on,.on-dark .lbl{color:#b9b9b9}
.d1{font-size:106px;line-height:.96;letter-spacing:-.026em;font-weight:800;margin:0}
.d3{font-size:54px;line-height:1.06;letter-spacing:-.02em;font-weight:800;margin:0}
.hl2{display:block;font-size:50px;line-height:1.08;letter-spacing:-.018em;font-weight:700;color:#dcdcdc;margin-top:22px}
.d2{font-size:70px;line-height:1.02;letter-spacing:-.021em;font-weight:800;margin:0}
.glassbar{background:rgba(247,245,242,.94)}
.glassbar.dark{background:rgba(48,45,43,.88);border-bottom-color:rgba(255,255,255,.14) !important}
.glassbar.fest{background:#302d2b !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
header.kopfleiste{transition:background-color 320ms ease,backdrop-filter 320ms ease,border-color 320ms ease}
.kopfcta{transition:background-color 160ms ease}
.kopfcta:hover{background:#b02e05 !important}
.hero .heroinner{justify-content:flex-end !important;padding-bottom:clamp(104px,9vw,132px) !important}
header.kopfleiste:not(.gescrollt):not(.fest):not(:has(details.menu[open])){background:transparent !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-bottom-color:transparent !important}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glassbar{background:rgba(247,245,242,.68);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.glassbar.dark{background:rgba(48,45,43,.5);-webkit-backdrop-filter:saturate(170%) blur(22px);backdrop-filter:saturate(170%) blur(22px)}}
@media (prefers-reduced-transparency:reduce){.glassbar{background:#f6f5f4;-webkit-backdrop-filter:none;backdrop-filter:none}.glassbar.dark{background:#302d2b}}
@media (prefers-contrast:more),(forced-colors:active){
  .glassbar,.glassbar.dark{background:#302d2b !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  header svg{forced-color-adjust:none}}
.steps{display:block;list-style:none;margin:0;padding:0}
.steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
  gap:0 clamp(18px,2.2vw,38px);padding:clamp(22px,2.4vw,34px) 0}
.stepnum{position:relative;display:block;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(46px,5.6vw,80px);line-height:.86;font-weight:800;letter-spacing:-.048em;color:#211f1e;
  font-variant-numeric:tabular-nums;padding-right:clamp(26px,3.4vw,58px)}
.stepnum::after{content:"";position:absolute;right:clamp(10px,1.4vw,23px);top:-3%;bottom:-7%;width:2px;
  background:#cfcbc7;transform:rotate(15deg)}
.stepbody{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,5fr);gap:0 clamp(24px,3vw,56px);
  align-items:start;padding-top:clamp(2px,.7vw,12px)}
.stephead{margin:0;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(25px,2.9vw,42px);line-height:1.06;font-weight:700;letter-spacing:-.024em}
.steptext{margin:0;padding-top:clamp(4px,.9vw,15px);font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#5d5a59;max-width:46ch}
@media (max-width:1180px){
  .stepbody{grid-template-columns:minmax(0,1fr)}
  .steptext{padding-top:12px;max-width:56ch}
}
@media (max-width:620px){.stepnum::after{transform:rotate(13deg);right:8px}.stepbody{padding-top:0}}
.kosten{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.kosten-fix{position:static}
.kfaktor{padding:34px 0;border-top:1px solid #dad8d6}
.kfaktor:first-child{padding-top:0;border-top:0}
.kfaktor h3{margin:0 0 12px;font-size:33px;line-height:1.1;font-weight:700;letter-spacing:-.016em}
.kfaktor p{margin:0;font-size:20px;line-height:1.6;color:#5d5a59;max-width:46ch}
.kschluss{margin:40px 0 0;padding-top:30px;border-top:1px solid #dad8d6;font-size:17px;line-height:1.62;color:#6e6b69;max-width:52ch}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tile{grid-column:span 2}
.tile.gross{grid-column:span 6}
.tile.gross .tileimg{height:330px}
.tile.gross h3{font-size:44px}
.tile.gross p{font-size:21px;max-width:58ch}
.tile{--tp-x:24px;--tp-y:22px;position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-flaeche);padding:var(--tp-y) var(--tp-x) 26px;background:#2a2725;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(60,12,2,.28)}
@media (prefers-contrast:more),(forced-colors:active){.tile{background:#1c1a19;border-color:#ffffff;box-shadow:none}}
.tileimg{width:auto;height:182px;filter:saturate(.88);object-fit:cover;display:block;border-radius:0;
  margin:calc(var(--tp-y) * -1) calc(var(--tp-x) * -1) 20px}
.tile h3{margin:0 0 12px;font-size:31px;line-height:1.12;font-weight:700;letter-spacing:-.018em;color:#ffffff}
.tile p{margin:0 0 26px;font-size:19px;line-height:1.58;color:#e8ddd9}
.tilelink{margin-top:auto;font-size:18px;font-weight:600;color:#ffffff;text-decoration:underline;text-decoration-color:#f14d23;text-decoration-thickness:2px;text-underline-offset:7px}
.tile:hover{background:#332f2c;border-color:rgba(255,255,255,.26)}
#leistungen .tile{background:#ffffff;border:1px solid #e7e3df;
  box-shadow:0 20px 46px rgba(70,14,2,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
#leistungen .tile h3{color:#211f1e}
#leistungen .tile p{color:#5d5a59}
#leistungen .tilelink{color:#211f1e;text-decoration-color:#d63909}
#leistungen .tilepfeil{color:#211f1e;border:1px solid #d5d0cb;background:#f6f5f4}
#leistungen .tile:hover,#leistungen .tile:focus-within{background:#ffffff;border-color:#b62c00}
#leistungen .tile:hover .tilepfeil,#leistungen .tile:focus-within .tilepfeil{
  background:#d63909;border-color:#d63909;color:#ffffff}
#leistungen .tile :focus-visible{outline-color:#211f1e}
@media (prefers-contrast:more),(forced-colors:active){
  #leistungen .tile{background:#ffffff;border-color:#211f1e;box-shadow:none}}
.tile .tilelink::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tilepfeil{position:absolute;right:24px;bottom:26px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:#ffffff;border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.10)}
.tile:hover .tilepfeil,.tile:focus-within .tilepfeil{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:no-preference){
  .tilepfeil{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease}
  .tile:hover .tilepfeil,.tile:focus-within .tilepfeil{transform:rotate(-45deg)}
  #leistungen .tile{transition:background .3s ease,border-color .3s ease}}

.mobilebar{background:rgba(246,245,244,.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-top:1px solid rgba(33,31,30,.10);transform:translateY(calc(100% + 14px));opacity:0;visibility:hidden;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility 0s linear .42s}
.mobilebar.sichtbar{transform:none;opacity:1;visibility:visible;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility 0s}
@media (prefers-contrast:more),(forced-colors:active){.mobilebar{background:#f6f5f4;-webkit-backdrop-filter:none;backdrop-filter:none}}
.hero{height:100vh !important;min-height:480px;overflow:hidden}
@supports (height:100svh){.hero{height:100svh !important}}
.stickycol{position:static}
label:has(input:focus-visible),label:has(select:focus-visible),label:has(textarea:focus-visible){color:#211f1e}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
 }
}
@keyframes reveal{from{transform:translateY(24px)}to{transform:none}}
.rise{animation:rise 560ms cubic-bezier(.2,.6,.2,1) both}
.r1{animation-delay:70ms}.r2{animation-delay:140ms}.r3{animation-delay:210ms}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:1180px){
 .facts{grid-template-columns:repeat(2,minmax(0,1fr)) !important;row-gap:36px !important}
 .facts>div:nth-child(odd){padding-left:0 !important;border-left:0 !important}
 .d1{font-size:82px !important}.d2{font-size:46px !important}.d3{font-size:50px !important}.hl2{font-size:34px !important}.chaptext{font-size:44px !important}
}
@media (max-width:900px){
 header>nav,header>a[data-ghost],header>a.kopfcta{display:none !important}
 .menu{display:block}
 .split,.col2,.kosten{grid-template-columns:minmax(0,1fr) !important;gap:44px !important}
 .kosten-fix{position:static !important}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 .tile{grid-column:span 1 !important}.tile.gross{grid-column:span 2 !important}.kfaktor h3{font-size:28px !important}
 .tile.gross h3{font-size:34px !important}.tile.gross .tileimg{height:260px !important}
 .footgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px !important}
 .facts{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 .stickycol{position:static !important}
 .svchead{flex-direction:column !important;align-items:stretch !important;gap:16px !important}
 .d1{font-size:66px !important}.hl2{font-size:32px !important}
 .d2{font-size:40px !important}.d3{font-size:44px !important}.chaptext{font-size:42px !important}
}
@media (max-width:820px) and (min-width:621px){
 .d1{font-size:52px !important}.hl2{font-size:25px !important}
 .d2{font-size:31px !important}.d3{font-size:35px !important}.chaptext{font-size:32px !important}
 .abschnitt h3,.tile h3{font-size:23px !important}
 .heroinner{padding:182px var(--gut) 56px !important;height:100% !important}
 .heroinner{padding-bottom:56px !important}
}
@media (max-width:620px){
 form>div[style*="repeat(2"],section#anfrage form>div{grid-template-columns:minmax(0,1fr) !important}
 section#anfrage form{padding:24px 20px 22px !important}
 section{padding-block:56px !important}
 section#anfrage{padding-bottom:64px !important}
 section.hero,section.chapter{padding:0 !important}
 footer{padding-block:48px 28px !important}
 header{height:84px !important;gap:16px !important}
 header svg{height:52px !important}
 .deskonly{display:none !important}
 .toprow{display:none !important}
 .seitenhero .zusagen,.hero .herotrust{display:none !important}
 .seitenhero{min-height:100svh !important;margin-top:-84px !important}
 .heroin{padding:calc(84px + 22px) var(--gut) clamp(94px,16vw,112px) !important}
 .hero{height:100svh !important;margin-top:-84px !important}
 .heroinner{justify-content:flex-end !important;padding:calc(84px + 20px) var(--gut) clamp(106px,18vw,126px) !important}
 .d1{font-size:36px !important;line-height:1.08 !important;letter-spacing:-.02em !important}.d3{font-size:29px !important;line-height:1.12 !important}.hl2{font-size:18px !important;margin-top:12px !important;line-height:1.5 !important}
 .d2{font-size:27px !important;line-height:1.16 !important;letter-spacing:-.012em !important}
 .abschnitt h3,.stephead,.kfaktor h3{font-size:20px !important;line-height:1.25 !important}
 .blick dt,.blick4 dt{font-size:18px !important;line-height:1.25 !important}
 .absled,.abschnitt .absled{font-size:17px !important;line-height:1.6 !important}
 .heroinner>div{max-width:none !important}
 .scrimA{background:linear-gradient(180deg,#13131394 0%,#131313ad 42%,#131313eb 100%) !important}
 .heroinner .lbl{font-size:11px !important;letter-spacing:.1em !important}
 .scrimB{display:none !important}
 .herocta{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:10px !important}
 .herocta>a{justify-content:center !important}
 .chapter{height:340px !important}
 .chapter p{font-size:29px !important;line-height:1.18 !important;max-width:none !important}
 .facts,.col2,.split{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
 .tiles{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
 .tile,.tile.gross{grid-column:span 1 !important}
 .tile.gross h3{font-size:25px !important}.tile.gross .tileimg{height:168px !important}
 .kosten{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
 .kfaktor{padding:24px 0 !important}.kfaktor h3{font-size:24px !important}.kfaktor p{font-size:17px !important}
 .tile{--tp-x:18px;--tp-y:18px;border-radius:18px !important;padding:18px 18px 22px !important}
 .tile h3{font-size:25px !important}
 .tileimg{height:168px !important}
 .svchead{flex-direction:column !important;align-items:stretch !important;gap:18px !important;margin-bottom:30px !important}
 #leistungen{padding-block:64px 72px !important}
 .facts>div,.col2>div{border-left:0 !important;padding-left:0 !important;padding-top:18px !important;padding-bottom:18px !important;border-top:1px solid #dad8d6}
 .blick>div,.blick4>div,.blick>div:nth-child(3n+1),.blick4>div:nth-child(3n+1){border-left:0 !important;padding-left:0 !important}
 .split{gap:40px !important}
 .stickycol{position:static !important}
 .bigscore{font-size:76px !important}
 .bigquote{font-size:23px !important;line-height:1.38 !important}
 #kosten dl>div,#einsatzgebiet dl>div{grid-template-columns:minmax(0,1fr) !important;gap:5px !important;padding:14px 0 !important}
 .faqrow>span:first-child{font-size:18px !important}
 .faqans{padding:0 0 20px !important;font-size:16px !important}
 .footgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px !important}
 .footbrand,.footcontact{grid-column:1 / -1 !important}
 .mobilebar{display:grid !important}
 main{padding-bottom:0}
}
@media (min-width:621px){.mobilebar{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

.ht-sterne{display:flex;gap:3px;color:#ffb020;flex:0 0 auto}
.r4{animation-delay:280ms}

:root{
  --breite:1312px;
  --gut:64px;
  --sp1:8px;--sp2:16px;--sp3:28px;--sp4:48px;--sp5:88px;
  /* Abschnittsrhythmus: kompakt, normal, tragend */
  --sekS:clamp(40px,4.4vw,72px);--sekM:clamp(56px,6.4vw,104px);--sekL:clamp(72px,8.2vw,136px);
  /* Radienskala: Flaechen, Bilder in Flaechen, Eingaben, Knoepfe, Pillen */
  --r-flaeche:16px;--r-bild:10px;--r-feld:10px;--r-knopf:0px;--r-pille:999px;
}
@media (max-width:1180px){:root{--gut:40px}}
@media (max-width:620px){:root{--gut:20px;--sp4:32px;--sp5:56px}}
.menu{display:none;margin-left:auto;position:static}

.menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:0;cursor:pointer;color:#ffffff;background:transparent}
.menuicon{position:relative;display:block;width:22px;height:16px}
.menuicon i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform 300ms cubic-bezier(.2,.7,.2,1),opacity 160ms ease}
.menuicon i:nth-child(1){top:0}
.menuicon i:nth-child(2){top:7px}
.menuicon i:nth-child(3){top:14px}
.menu[open] .menuicon i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[open] .menuicon i:nth-child(2){opacity:0}
.menu[open] .menuicon i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu>summary::-webkit-details-marker{display:none}
details:not([open])>.menupanel{display:none}
.menupanel{position:fixed;inset:0;box-sizing:border-box;background:#d63909;color:#ffffff;z-index:60;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom))}
@supports (height:100svh){.menupanel{height:100svh}}
@supports (height:100dvh){.menupanel{height:100dvh}}
/* Solange das Menue offen ist, darf die Kopfleiste kein Weichzeichner-Feld sein:
   sonst wird sie zum Bezugsrahmen fuer das feste Menuepanel. */
/* Beim offenen Menue traegt die orange Flaeche des Panels den ganzen Bildschirm.
   Die Kopfleiste wird deshalb durchsichtig, egal ob gescrollt wurde oder nicht.
   Logo und Schalter liegen weiter oben und bleiben sichtbar. */
/* Sobald das Menue offen ist, wird die Seite festgestellt und verliert damit
   ihren Rollbereich. Eine klebende Kopfleiste faellt in diesem Moment an ihren
   Platz im Dokument zurueck und waere nach dem Scrollen nicht mehr zu sehen,
   samt Logo und Schliesszeichen. Sie haengt deshalb waehrend des offenen
   Menues fest am oberen Rand, der Ausgleich am Rumpf haelt die Seite ruhig. */
body.menuoffen header.kopfleiste{position:fixed !important;top:0;left:0;right:0}
body.menuoffen{padding-top:108px}
@media (max-width:620px){body.menuoffen{padding-top:84px}}
body.menuoffen header.kopfleiste.glassbar,header.kopfleiste:has(details.menu[open]),
body.menuoffen header,header:has(details.menu[open]){z-index:62 !important;
  background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-bottom-color:transparent !important}
.menugruppe{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#a8a29c;margin:0 0 6px}
.menupanel .menuhaupt{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:62px;text-decoration:none;color:#ffffff;border-bottom:1px solid rgba(255,255,255,.16);
  font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(26px,6.6vw,38px);line-height:1.05;font-weight:700;letter-spacing:-.024em}
.menupanel .menuhaupt span{flex:0 0 auto;color:#f14d23;font-size:26px;line-height:1}
.menupanel .menuhaupt[aria-current="page"]{color:#f5b8a5}
.menunebenliste{display:flex;flex-wrap:wrap;gap:0 26px;margin:0}
.menupanel .menuneben{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;
  color:#e4e0dc;font-size:17px;font-weight:600;border-bottom:0}
.menupanel .menuneben:hover{color:#ffffff;text-decoration:underline;text-decoration-color:#f14d23;
  text-decoration-thickness:2px;text-underline-offset:6px}
.menufuss{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:8px}
.menupanel .menutel{display:inline-flex;align-items:center;gap:10px;min-height:52px;text-decoration:none;
  color:#ffffff;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.menupanel .menuwa{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:#e4e0dc;font-size:17px}
.menupanel .menucta{display:inline-flex;align-items:center;justify-content:center;background:#d63909;
  color:#ffffff;min-height:58px;font-size:17px;font-weight:600;text-decoration:none;margin-top:6px}
.menublock{margin-bottom:var(--sp2)}
html.menuoffen,body.menuoffen{overflow:hidden}
footer nav a,.footcontact a{min-height:44px;display:inline-flex;align-items:center}
/* Zwischen 901 und 1300 wird die Kopfleiste enger, darunter entfallen die Sprungmarken. */
@media (min-width:901px) and (max-width:1300px){
  header.kopfleiste{gap:24px !important}
  .hauptnav{gap:22px !important;font-size:16px !important}
  header.kopfleiste>a[data-ghost]{padding:16px 18px !important}
}
@media (min-width:901px) and (max-width:1160px){
  .hauptnav .navneben{display:none}
}
.toprow{height:48px;padding:0 var(--gut);display:flex;align-items:center;gap:26px;font-size:15px}
.toprow a{min-height:44px;display:inline-flex;align-items:center;gap:8px}

.herotrust{display:grid;gap:var(--sp2);margin-top:var(--sp3);max-width:760px}
.bewertung{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.ht-sterne{display:flex;gap:3px;color:#ffb020;flex:0 0 auto}
.ht-zahl{font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;font-weight:700;
  font-size:28px;line-height:1;letter-spacing:-.02em;color:#ffffff}
.ht-quelle{font-size:16px;color:#d4d4d4}
.zusagen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp3)}
.zusagen li{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:600;color:#ffffff;min-height:28px}
@media (max-width:900px){.menu{display:block}}
@media (max-width:620px){.herotrust{margin-top:var(--sp3);padding-top:var(--sp2)}.ht-zahl{font-size:24px}}

.tilelink,.toprow a,.footcontact a,footer nav a,a[data-link]{min-height:44px;display:inline-flex;align-items:center}
.tilelink{align-self:flex-start;max-width:calc(100% - 64px)}
.kopftel,.navtel{min-height:44px;display:inline-flex;align-items:center}

@media (max-width:900px){#bewertungen .col2{gap:var(--sp4) !important}}
@media (max-width:620px){#bewertungen .split{gap:var(--sp4) !important}}

.orte{list-style:none;margin:0 0 var(--sp4);padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.orte li{display:inline-flex;align-items:center;padding:0 18px;border:1px solid #e3dfdb;
  border-radius:999px;background:#ffffff;font-size:16.5px;line-height:1;min-height:44px;
  box-shadow:0 1px 2px rgba(33,31,30,.06)}
.orte .plz{display:inline-flex;align-items:center;color:#9c3007;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;letter-spacing:.01em;
  padding-right:13px;margin-right:13px;border-right:1px solid #e8e2dd;height:19px}
/* Zwei Knoepfe gehoeren gleich breit. Auf dem Telefon stehen sie untereinander und
   fuellen die Breite, auf dem Tablet nebeneinander in zwei gleichen Spalten. */
.knopfpaar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:620px){
  .knopfpaar,.herocta,.seitencta{display:grid !important;grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;align-items:stretch !important}
  /* Knoepfe laufen auf dem Telefon grundsaetzlich ueber die volle Breite.
     Ausgenommen: Menuezeile und Schnellleiste, dort stehen zwei Felder nebeneinander. */
  .knopfA,.knopfG,.knopfL,.anfrageform button[type=submit],.anfrageform input[type=submit]{
    width:100% !important;justify-content:center !important}
  .menuzeile .knopfA,.menuzeile .knopfG,.menuzeile .knopfL,
  .mobilebar .knopfA,.mobilebar .knopfG,.mobilebar .knopfL{width:auto !important}
}
@media (min-width:621px) and (max-width:900px){
  .knopfpaar,.herocta,.seitencta{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
    gap:12px;align-items:stretch}
  .knopfpaar>a,.herocta>a,.seitencta>a{width:100%;justify-content:center}
}
.ortecta{margin:0 0 var(--sp4);padding-top:26px;border-top:1px solid #dad8d6;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ortecta p{margin:0;font-size:18px;line-height:1.55;color:#5d5a59;max-width:34ch}
@media (max-width:620px){.ortecta{flex-direction:column;align-items:stretch}
  .ortecta a{justify-content:center}}
.napblock{display:grid;gap:6px;font-size:17px;line-height:1.6;font-style:normal}
.napblock .zeile{color:#ffffff}
.napblock strong{color:#ffffff;font-weight:600}

header>nav a{min-height:44px;display:inline-flex;align-items:center}
.napblock a{min-height:44px;display:inline-flex;align-items:center}

/* Aufklapper: ein Zeichen, das sich dreht, statt zwei getauschter Grafiken */
.fragzeichen{flex:0 0 auto;display:inline-flex;width:22px;height:22px;color:#d63909}
.fragzeichen .quer,.fragzeichen .hoch{transform-origin:11px 11px}
@media (prefers-reduced-motion:no-preference){
  .fragzeichen .hoch{transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
  .fragzeichen{transition:color 200ms}
}
details[open] .fragzeichen{color:#d63909}
details[open] .fragzeichen .hoch{transform:rotate(90deg)}
summary:hover .fragzeichen{color:#b02e05}
details[open] summary:hover .fragzeichen{color:#b02e05}

/* Auf- und Zuklappen weich, wo der Browser es kann */
@supports selector(details::details-content){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;
    transition:block-size 340ms cubic-bezier(.2,.7,.2,1),content-visibility 340ms allow-discrete}
  details[open]::details-content{block-size:auto}
  @media (prefers-reduced-motion:reduce){
    details::details-content{transition:none}
  }
}

/* Haken in der Gegenueberstellung laufen nacheinander ein */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .mitliste{view-timeline-name:--mitliste;view-timeline-axis:block}
    .mitliste>li>svg{animation:hakenauf linear both;animation-timeline:--mitliste}
    .mitliste>li:nth-child(1)>svg{animation-range:entry 14% entry 30%}
    .mitliste>li:nth-child(2)>svg{animation-range:entry 26% entry 42%}
    .mitliste>li:nth-child(3)>svg{animation-range:entry 38% entry 54%}
    .mitliste>li:nth-child(4)>svg{animation-range:entry 50% entry 66%}
    .mitliste>li:nth-child(5)>svg{animation-range:entry 62% entry 78%}
    .mitliste>li:nth-child(6)>svg{animation-range:entry 74% entry 90%}
  }
}
@keyframes hakenauf{
  from{opacity:0;transform:scale(.4) rotate(-14deg)}
  60%{opacity:1;transform:scale(1.12) rotate(0deg)}
  to{opacity:1;transform:scale(1) rotate(0deg)}
}

@media (max-width:620px){.tilepfeil{right:18px;bottom:22px;width:40px;height:40px}}

.anfrageform{background:#ffffff;border:1px solid #e0ddd9;border-radius:var(--r-flaeche);
  padding:clamp(24px,2.6vw,42px) clamp(20px,2.6vw,42px) clamp(26px,2.6vw,40px);
  display:grid;gap:22px;box-shadow:0 20px 50px rgba(33,31,30,.09)}
.anfrageform input,.anfrageform select,.anfrageform textarea{border-radius:var(--r-feld)}
.anfrageform button[type=submit],.anfrageform input[type=submit]{border-radius:var(--r-knopf)}
@media (max-width:620px){.anfrageform{border-radius:16px}}

@media (max-width:620px){
  .orte{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
  .orte li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;
    border:0;border-radius:0;background:transparent;box-shadow:none;padding:7px 0;min-height:0;
    font-size:15.5px;line-height:1.3}
  .orte .plz{font-size:14px;padding-right:10px;margin-right:0;height:16px}
}

/* Abschnitte abwechselnd: schwere Spalte einmal rechts, einmal links */
@media (min-width:901px){
  #fragen .faqans{padding-right:40px}
  #fragen h2{font-size:clamp(32px,3.4vw,50px)}
}

@media (max-width:900px){.svchead>a{justify-content:center}}
@media (max-width:370px){.orte{grid-template-columns:minmax(0,1fr)}}

.bybeyond{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex:0 0 auto}
.bybeyond svg{height:16px;width:auto;display:block}
.bybeyond svg g{opacity:.88}
@media (prefers-reduced-motion:no-preference){.bybeyond svg g{transition:opacity 260ms ease}}
.bybeyond:hover svg g,.bybeyond:focus-visible svg g{opacity:1}
@media (max-width:620px){.bybeyond svg{height:13px}}
.menukopf{display:flex;align-items:center;min-height:62px;margin-bottom:var(--sp3)}
.menukopf svg{height:46px;width:auto;display:block;color:#ffffff}


/* Menue auf Telefon und Tablet: die Kopfleiste bleibt unveraendert stehen und traegt
   Logo und Schalter. Das Panel beginnt darunter, dadurch springt beim Oeffnen nichts. */
@media (max-width:900px){
  /* Das Panel liegt im Kopfbereich selbst. Damit Logo und Schalter darueber bleiben,
     bekommen beide eine eigene Ebene oberhalb der Panelebene. */
  body.menuoffen header>a,header:has(details.menu[open])>a,
  .menu[open]>summary{position:relative;z-index:61}
  /* Die Wortmarke traegt eigene Farben im Sprite. Auf der orangen Flaeche muss sie
     rein weiss sein, deshalb wird sie hier hart entfaerbt. */
  body.menuoffen header>a svg,header:has(details.menu[open])>a svg{filter:brightness(0) invert(1)}
  .menupanel{padding:126px var(--gut) calc(18px + env(safe-area-inset-bottom))}
  .menuhauptliste-ul{counter-reset:menuzahl}
  .menupanel .menuhaupt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:0 18px;min-height:58px;padding:13px 0;counter-increment:menuzahl;color:#211f1e;
    font-size:clamp(26px,7vw,38px);line-height:1.04;letter-spacing:-.032em;
    border-bottom:1px solid rgba(255,255,255,.3)}
  .menuhauptliste-ul li:last-child .menuhaupt{border-bottom:0}
  .menupanel .menuhaupt::before{content:counter(menuzahl) " /";
    color:#ffffff;font-size:clamp(30px,8.2vw,44px);font-weight:700;
    letter-spacing:.02em;line-height:1}
  .menupanel .menuhaupt[aria-current="page"]{color:#ffffff}
  .menublock{margin-bottom:0}
  .menufuss{padding-top:28px;border-top:0}
  .menuzeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
  .menupanel .menuzeile>a{height:54px;min-height:54px;margin:0;box-sizing:border-box;
    font-size:15px;font-weight:600;padding:0 8px;display:inline-flex;
    align-items:center;justify-content:center;line-height:1;white-space:nowrap}
  .menupanel .menutel{gap:7px;font-size:15px;font-weight:600;padding:0 8px;
    border:1px solid rgba(255,255,255,.6);color:#ffffff}
  .menupanel .menutel svg{width:15px;height:15px;flex:0 0 auto}
  .menupanel .menucta{font-size:15.5px;padding:0 8px;background:#211f1e;color:#ffffff;border:0}
}
@media (max-width:620px){
  .menupanel{padding-top:102px;padding-left:20px;padding-right:20px}
  .menupanel .menuhaupt{min-height:54px}
}
@media (prefers-reduced-motion:no-preference){
  details.menu[open] .menupanel{animation:menublende 240ms ease both}
  details.menu[open] .menuhaupt,details.menu[open] .menufuss{animation:menurein 480ms cubic-bezier(.2,.7,.2,1) both}
  details.menu[open] .menuhauptliste-ul li:nth-child(1) .menuhaupt{animation-delay:70ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(2) .menuhaupt{animation-delay:115ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(3) .menuhaupt{animation-delay:160ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(4) .menuhaupt{animation-delay:205ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(5) .menuhaupt{animation-delay:250ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(6) .menuhaupt{animation-delay:295ms}
  details.menu[open] .menuhauptliste-ul li:nth-child(n+7) .menuhaupt{animation-delay:340ms}
  details.menu[open] .menufuss{animation-delay:370ms}
  details.menu.schliesst .menupanel{animation:menuaus 220ms ease both}
  details.menu.schliesst .menuhaupt,details.menu.schliesst .menufuss{animation:none}
}
@keyframes menuaus{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
@keyframes menublende{from{opacity:0}to{opacity:1}}
@keyframes menurein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:620px){
  .menupanel .menuhaupt{min-height:50px}
}
@media (max-height:620px) and (orientation:landscape){.d1{font-size:52px !important}.hl2{font-size:26px !important;margin-top:12px !important}.heroinner{padding-top:196px !important;padding-bottom:34px !important}.hero{height:auto !important;min-height:0 !important}}
@media (max-height:460px) and (orientation:landscape){.d1{font-size:38px !important}.hl2{font-size:20px !important}.heroinner{padding-top:186px !important}.herotrust{margin-top:18px !important;padding-top:14px !important}}
@media (max-width:620px){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .mobilebar{padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important}
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
html{scroll-padding-top:124px}
.tilepfeil{pointer-events:none}
.menurecht{display:flex;gap:22px;margin:10px 0 0}
.menurecht a{display:inline-flex;align-items:center;min-height:44px;color:#c9c4bf;font-size:15px;text-decoration:none}
.menurecht a:hover{color:#ffffff;text-decoration:underline}

/* Druck: Aufklapper offen, dunkle Flaechen hell, Leisten weg */
@media print{
  .toprow,header,.mobilebar,.menu,.skip,[data-cta],[data-ghost],.tilepfeil{display:none !important}
  html,body{background:#ffffff !important;color:#000000 !important;font-size:11pt}
  main{padding:0 !important}
  section,footer,.abschnitt{background:#ffffff !important;color:#000000 !important;
    padding-block:14pt !important;border-top:1pt solid #999999 !important;box-shadow:none !important}
  .on-dark,.on-dark *{color:#000000 !important}
  .tile{background:#ffffff !important;border:1pt solid #999999 !important;box-shadow:none !important}
  .hero{height:auto !important;min-height:0 !important;margin-top:0 !important}
  .hero img,.scrimA,.scrimB,.seitenhero img,.seitenhero .schleier{display:none !important}
  .heroinner,.heroin{padding:0 0 14pt !important;height:auto !important}
  details>div,details>p,details::details-content{display:block !important;block-size:auto !important;
    content-visibility:visible !important;overflow:visible !important}
  .fragzeichen{display:none !important}
  .d1{font-size:24pt !important}.d2{font-size:17pt !important}.d3{font-size:15pt !important}
  .hl2{font-size:13pt !important}.chaptext{font-size:14pt !important}
  .stepnum{font-size:22pt !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#444444}
  a[href^="#"]::after,a[href$=".html"]::after{content:""}
  section,article,li,figure,.steps>li{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  img{max-width:100% !important}
}
@media (min-width:901px){
  #einsatzgebiet .split>div:last-child{align-self:stretch}
}
.facts b{font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif}
@media (max-width:620px){.facts>div:first-child{border-top:0 !important}
  .facts>div{border-top-color:rgba(255,255,255,.34) !important}}
.kschluss{max-width:none}
.kschluss>span{display:block;max-width:52ch}
.kfaktor p{max-width:58ch}

header>a[data-ghost]{white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){header>nav{gap:18px !important}header{gap:26px !important}}
.bybeyond svg g{opacity:.95}
@media (min-width:901px){.tile.gross{padding-bottom:26px}.tile.gross .tilezeile{display:flex;align-items:center;gap:14px}
  .tile.gross .tilepfeil{position:static;width:40px;height:40px;flex:0 0 auto}}


/* ---- Abschnitte der Unterseiten ---- */

.glassbar.fest{background:#302d2b !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

.bewgrid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,4.4vw,88px);align-items:start}
.bewsterne{display:flex;gap:5px;color:#ffffff;margin-bottom:18px}
.bewzahl{display:block;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;font-size:clamp(64px,7vw,104px);font-weight:600;letter-spacing:-.045em;line-height:.88;color:#ffffff}
.bewquelle{margin:18px 0 26px;font-size:17px;line-height:1.55;color:#ffffff}
.bewlink{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;color:#ffffff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.7);text-decoration-thickness:2px;text-underline-offset:7px}
.bewzitate{display:grid;gap:clamp(24px,3vw,40px)}
.bewzitate figure{margin:0}
.bewzitate blockquote{margin:0 0 14px;font-size:clamp(20px,1.7vw,26px);line-height:1.42;font-weight:500;font-style:italic;hanging-punctuation:first;color:#ffffff}
.bewzitate figcaption{font-size:16px;color:#ffffff}
.bewzitate figure+figure blockquote{font-size:clamp(17px,1.25vw,19px);line-height:1.5;font-weight:400}
.orte{margin:clamp(28px,3vw,44px) 0 0}
@media (max-width:900px){.bewgrid{grid-template-columns:minmax(0,1fr)}}

.blickkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.blicktel{display:inline-flex;align-items:center;min-height:44px;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;color:#ffffff;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.blick{margin:clamp(28px,3vw,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.blick>div{padding:24px clamp(18px,2vw,34px);border-left:1px solid rgba(255,255,255,.34)}
.blick>div:nth-child(3n+1){border-left:0;padding-left:0}
.blick dt{margin:0 0 10px;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(20px,1.7vw,25px);line-height:1.14;font-weight:700;letter-spacing:-.018em;color:#ffffff}
.blick dd{margin:0;font-size:17px;line-height:1.55;color:#ffffff}
.ortecta{margin:clamp(30px,3.4vw,48px) 0 0;padding-top:28px;border-top:1px solid #dad8d6;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ortecta p{margin:0;font-size:18px;line-height:1.55;color:#5d5a59;max-width:46ch}
.weiter3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(28px,3vw,48px)}
.weiter3>.tile,.weiter4>.tile{grid-column:auto}
.weiter4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,22px);margin-top:clamp(28px,3vw,48px)}
@media (max-width:900px){
  .blick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blick>div:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.34);padding-left:clamp(18px,2vw,34px)}
  .blick>div:nth-child(2n+1){border-left:0;padding-left:0}
  .weiter3,.weiter4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .blick,.weiter3,.weiter4{grid-template-columns:minmax(0,1fr)}
  .blick>div{border-left:0;padding-left:0}
  .ortecta{flex-direction:column;align-items:flex-start}
  .ortecta .knopfA{width:100%;justify-content:center}
}
@media (min-width:901px){
}
/* Abschnitte wechseln die Seite: Ueberschrift einmal links, einmal rechts */
@media (min-width:901px){
  .voll.rechts .innen>h2,.voll.rechts .innen>.absled,
  .voll.rechts .innen>.svchead,.voll.rechts .innen>.blickkopf{margin-left:33.333%}
}
.wechsel .split{display:grid !important;grid-template-columns:minmax(0,1fr) !important;
  gap:clamp(30px,3.2vw,56px) !important;align-items:start !important}
@media (min-width:901px){
  .wechsel .split{grid-template-columns:4fr 8fr !important}
  .wechsel.rechts .split{grid-template-columns:8fr 4fr !important}
  .wechsel.rechts .split>*:first-child{order:2}
  .wechsel.rechts .split>*:last-child{order:1}
}
.abschnitt .wechselkopf h2{margin:0 0 22px}
.abschnitt .wechselkopf .absled{margin:0 0 26px;max-width:38ch}
.abschnitt .wechselkopf .absled:last-child{margin-bottom:0}
.rechtskopf{display:block !important}
.d3klein{margin:0;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(21px,1.9vw,27px);line-height:1.14;font-weight:700;letter-spacing:-.018em}
.rechtsblock{padding-block:clamp(26px,2.6vw,40px) !important;border-top:1px solid #dad8d6}
.rechtsblock .split{align-items:start !important}
.rechtsblock .fliess a{color:#211f1e;text-decoration:underline;text-decoration-color:#d63909;
  text-decoration-thickness:2px;text-underline-offset:5px}
.mehrlink{color:#211f1e;font-weight:600;text-decoration:underline;text-decoration-color:#d63909;
  text-decoration-thickness:2px;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
.quellkopf{margin:clamp(26px,2.6vw,38px) 0 12px;font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#5d5a59}
.quellen{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.quellen li{font-size:16px;line-height:1.5}
.quellen a{color:#5d5a59;text-decoration:underline;text-decoration-color:#bdb8b4;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px}
.quellen a:hover{color:#211f1e;text-decoration-color:#d63909}
.selbst{list-style:none;margin:clamp(28px,3vw,48px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,72px)}
.selbst li{padding:22px 0;border-top:1px solid #dad8d6}
.selbst b{display:block;margin-bottom:8px;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.018em;line-height:1.14}
.selbst span{font-size:17.5px;line-height:1.6;color:#5d5a59}
@media (max-width:900px){.selbst{grid-template-columns:minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1180px){.weiter4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Kopfzeile mit Knopf rechts: darf umbrechen, der Text schrumpft mit. */
.abschnitt .svchead{flex-wrap:wrap}
.abschnitt .svchead>div{flex:1 1 380px;min-width:0}
.abschnitt .svchead>a{flex:0 0 auto}
@media (max-width:520px){.abschnitt h2,.abschnitt h3,.selbst b,.blick dt{hyphens:auto;-webkit-hyphens:auto}}
.krume{font-size:15px}
.kruminner{max-width:var(--breite);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:10px;color:#b9b9b9;flex-wrap:wrap}
.kruminner a{color:#ffffff;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.kruminner a:hover{text-decoration:underline;text-decoration-color:#f14d23;text-decoration-thickness:2px;text-underline-offset:5px}
.kruminner span[aria-current]{color:#d6cdc8}
.seitenhero{position:relative;background:#302d2b;overflow:hidden}
.seitenhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:saturate(.55) contrast(1.05)}
.seitenhero .schleier{position:absolute;inset:0;background:linear-gradient(95deg,#131313f2 0%,#131313e0 48%,#131313a6 74%,#13131352 100%)}
.seitenhero{display:flex;align-items:flex-end;min-height:min(92svh,860px);margin-top:-108px}
.heroin{position:relative;width:100%;max-width:var(--breite);margin:0 auto;
  padding:calc(108px + clamp(56px,7vw,112px)) var(--gut) clamp(96px,8vw,128px)}
.seitenlead{margin:18px 0 26px;font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:#d6d6d6;max-width:56ch}
.seitencta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px)}
.knopfA{background:#d63909;color:#ffffff;font-size:17px;font-weight:600;line-height:1;padding:0 34px;min-height:60px;
  box-sizing:border-box;display:inline-flex;align-items:center;text-decoration:none}
.knopfA:hover{background:#c73100}
.knopfG{color:#ffffff;border:1px solid #ffffff;font-size:17px;font-weight:600;line-height:1;padding:0 28px;min-height:60px;
  box-sizing:border-box;display:inline-flex;align-items:center;text-decoration:none}
.knopfL{color:#211f1e;border:1px solid #211f1e;font-size:17px;font-weight:600;line-height:1;padding:0 28px;min-height:60px;
  box-sizing:border-box;display:inline-flex;align-items:center;text-decoration:none}
.zusagen.hell{padding-top:0;max-width:820px}
.zusagen.hell li{color:#ffffff}
.abschnitt{padding:var(--sekM) var(--gut);border-top:1px solid #dad8d6}
.abschnitt.voll,.abschnitt.anfrageblock,.abschnitt.leistungsraster{padding:var(--sekL) var(--gut)}
.abschnitt.blickband{padding:var(--sekS) var(--gut)}
.abschnitt.on-dark{border-top:0}
.innen{max-width:var(--breite);margin:0 auto}
.abschnitt h2{margin:0}
.abschnitt h2.d2{font-size:clamp(30px,3.6vw,52px);line-height:1.06}
.abschnitt.wechsel h2.d2{font-size:clamp(28px,2.9vw,42px);line-height:1.1}
.abschnitt h2.d3{font-size:clamp(28px,3.2vw,46px);line-height:1.08}
.absled{margin:26px 0 0;font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:#5d5a59;max-width:62ch}
.on-dark .absled{color:#b9b9b9}
.liste{list-style:none;margin:clamp(28px,3vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,72px)}
.liste li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:11px 0;font-size:18px;line-height:1.5}
.liste svg{margin-top:4px}
.zweispalt{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,4.4vw,88px);align-items:start}
.zweispalt h2{font-size:clamp(27px,3vw,44px);line-height:1.08}
.zweispalt img{width:100%;height:clamp(260px,30vw,460px);object-fit:cover;display:block}
.fliess{font-size:clamp(18px,1.35vw,20px);line-height:1.65;color:#5d5a59;max-width:64ch}
.fliess p{margin:0 0 18px}
.fliess p:last-child{margin-bottom:0}
.fliess strong{color:#211f1e;font-weight:600}
.faktoren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,72px);margin-top:clamp(28px,3vw,48px)}
.faktoren article{padding:26px 0;border-top:1px solid #dad8d6}
.faktoren h3{margin:0 0 10px;font-size:clamp(21px,1.8vw,27px);line-height:1.12;font-weight:700;letter-spacing:-.018em}
.faktoren p{margin:0;font-size:17.5px;line-height:1.6;color:#5d5a59;max-width:46ch}
.weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3vw,44px)}
.weiter a{display:flex;flex-direction:column;gap:8px;padding:26px;
  border:1px solid #dad8d6;background:#ffffff;text-decoration:none}
.weiter a:hover{border-color:#211f1e}
.weiter span{margin-top:auto;padding-top:14px}
.weiter b{font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;font-size:23px;font-weight:700;letter-spacing:-.018em}
.weiter span{font-size:16px;color:#5d5a59}
@media (max-width:900px){
  .zweispalt,.liste,.faktoren,.weiter{grid-template-columns:minmax(0,1fr)}
  .abschnitt .split{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .weiter a{min-height:0}
}
@media (max-width:620px){
  .seitencta{display:grid;grid-template-columns:minmax(0,1fr)}
  .seitencta a{justify-content:center}
}

/* ==========================================================================
   Ergaenzungen fuer WordPress
   Die Menues kommen aus wp_nav_menu und bringen ul und li mit. Die Regeln
   unten holen dieselbe Darstellung wie im statischen Entwurf zurueck.
   ========================================================================== */

.hauptnav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-size:17.5px}
.hauptnav li{margin:0}
.hauptnav a{text-decoration:none;color:#ffffff;font-weight:500;display:inline-flex;align-items:center;min-height:44px}
@media (min-width:901px){.hauptnav{position:absolute;left:50%;transform:translateX(-50%)}}
.hauptnav a:hover{color:#ffffff}
.hauptnav .current-menu-item>a,.hauptnav [aria-current="page"]{color:#ffffff;border-bottom:2px solid #f14d23}
@media (min-width:901px) and (max-width:1300px){.hauptnav ul{gap:22px;font-size:16px}}
@media (min-width:901px) and (max-width:1160px){.hauptnav li.navneben{display:none}}
@media (max-width:900px){.hauptnav{display:none}}

.menuhauptliste ul,.menunebenliste ul{list-style:none;margin:0;padding:0}
.menuhauptliste li,.menunebenliste li{margin:0}

/* ---- Formular ---- */
.formularspalte{min-width:0}
.anfrageform{margin-top:clamp(24px,2.6vw,36px)}
.feldreihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,26px)}
@media (max-width:620px){.feldreihe{grid-template-columns:minmax(0,1fr)}}
.feld{margin:0 0 20px}
.feld label{display:block;margin-bottom:8px;font-size:16px;font-weight:600;color:#211f1e}
.on-dark .feld label{color:#ffffff}
.pflichtzeichen{color:#d63909}
.feld input[type=text],.feld input[type=tel],.feld input[type=email],.feld input[type=date],.feld select,.feld textarea{
  width:100%;box-sizing:border-box;min-height:56px;padding:15px 16px;font:inherit;font-size:17px;
  color:#211f1e;background:#ffffff;border:1px solid #bdb8b4;border-radius:0;appearance:none}
.feld textarea{min-height:120px;line-height:1.55;resize:vertical}
.feld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23211f1e' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:3px solid #211f1e;outline-offset:2px;border-color:#211f1e}
.feld [aria-invalid="true"]{border-color:#b32d2e;border-width:2px}
.feldfehler{display:block;margin-top:7px;font-size:15.5px;line-height:1.45;color:#a3271f;font-weight:600}
.on-dark .feldfehler{color:#ffd9d0}
.zustimmung label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;
  font-weight:400;font-size:16px;line-height:1.55;cursor:pointer}
.zustimmung input{width:24px;height:24px;margin:0;accent-color:#d63909}
.zustimmung a{color:inherit;text-decoration:underline;text-decoration-color:#d63909;
  text-decoration-thickness:2px;text-underline-offset:4px}
.absenden{margin-top:26px}
.absenden button{border:0;cursor:pointer;font:inherit;font-size:17px;font-weight:600;
  min-height:60px;padding:0 34px}
.honigtopf{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hinweis{margin:0 0 22px;padding:16px 18px;font-size:17px;line-height:1.55;
  border:1px solid;border-radius:var(--r-feld)}
.hinweis.erfolg{background:#eef6ef;border-color:#1a7f37;color:#123f1e}
.hinweis.warnung{background:#fdeeec;border-color:#b32d2e;color:#6d1d19}
.formargumente{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;gap:0}
.formargumente li{padding:18px 0;border-top:1px solid #dad8d6}
.formargumente b{display:block;margin-bottom:6px;font-family:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  font-size:19px;font-weight:700;letter-spacing:-.015em}
.formargumente span{font-size:16.5px;line-height:1.55;color:#5d5a59}
.on-dark .formargumente li{border-top-color:#57524c}
.on-dark .formargumente b,.on-dark .formargumente span{color:#ffffff}

/* ---- Bild, Video, Galerie ---- */
.kmedien{margin:clamp(24px,3vw,40px) 0 0}
.kmedien img,.kvideo{width:100%;height:auto;display:block}
.medienvoll .kmedien{margin-inline:calc(var(--gut) * -1)}
.kmedien figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:#5d5a59}
.on-dark .kmedien figcaption{color:#d6d6d6}
.textfigur{margin:clamp(28px,3vw,44px) 0 0}
.textfigur img{width:100%;height:clamp(220px,22vw,360px);object-fit:cover;display:block}
.videohuelle{position:relative;background:#211f1e;aspect-ratio:16/9}
.videohuelle img{width:100%;height:100%;object-fit:cover;display:block}
.videohuelle iframe{width:100%;height:100%;display:block;border:0}
.videostart{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;width:100%;border:0;background:rgba(19,19,19,.34);color:#ffffff;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.videostart:hover{background:rgba(19,19,19,.5)}
.videoikon{display:flex;align-items:center;justify-content:center;width:74px;height:74px;
  border-radius:50%;background:#d63909}
.videostart:hover .videoikon{background:#de3713}
.videohuelle noscript a{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#ffffff}
.kgalerie{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.4vw,20px)}
.kgalerie img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.kgalerie span{display:block;margin-top:8px;font-size:15px;color:#5d5a59}

/* ---- Preistabelle ---- */
.preise{width:100%;border-collapse:collapse;margin-top:clamp(20px,2.4vw,32px);font-size:17px}
.preise th,.preise td{padding:16px 14px 16px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid #dad8d6;line-height:1.5}
.preise thead th{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5d5a59}
.preise tbody th{font-weight:600;color:#211f1e}
.preise td{color:#5d5a59;font-variant-numeric:tabular-nums}
.preisfuss{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:#5d5a59}
.visuell-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:620px){
  .preise,.preise tbody,.preise tr,.preise th,.preise td{display:block;width:100%;box-sizing:border-box}
  .preise thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .preise tr{padding:14px 0;border-bottom:1px solid #dad8d6}
  .preise th,.preise td{border:0;padding:2px 0}
}

/* ---- Brotkrume von Yoast ---- */
.kruminner #breadcrumbs,.kruminner .breadcrumbs{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kruminner a{color:#ffffff;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.kruminner a:hover{text-decoration:underline;text-decoration-color:#f14d23;text-decoration-thickness:2px;text-underline-offset:5px}
.kruminner .breadcrumb_last{color:#d6cdc8}

/* ---- Agenturlogo in der Fusszeile ---- */
.agenturlogo{height:18px;width:auto;display:inline-block;vertical-align:middle;margin-left:6px}
.footbottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:26px}
.footrecht{display:flex;gap:22px;flex-wrap:wrap}
.footrecht a{color:#ffffff;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.footagentur{font-size:15px;color:#ffffff;display:inline-flex;align-items:center;gap:4px}
.footagentur a{color:#ffffff;display:inline-flex;align-items:center}

/* Menuelisten aus wp_nav_menu: die Aufzaehlung darf nichts hinzufuegen. */
.menuhauptliste ul,.menunebenliste ul{list-style:none;margin:0;padding:0}
.menuhauptliste li,.menunebenliste li{margin:0}
.menunebenliste ul{display:flex;flex-wrap:wrap;gap:0 26px}

/* Einzelnes Zitat als eigener Abschnitt. Die Farbe kommt vom Grund,
   nicht wie im Bewertungsblock fest von Weiss. */
.einzelzitat{margin:0}
.einzelzitat blockquote{margin:0 0 14px;font-size:clamp(20px,1.7vw,26px);line-height:1.42;font-weight:500;
  font-style:italic;hanging-punctuation:first;color:#211f1e;max-width:34ch}
.einzelzitat figcaption{font-size:16px;color:#5d5a59}
.on-dark .einzelzitat blockquote{color:#ffffff}
.on-dark .einzelzitat figcaption{color:#ffffff}

/* Der Verweis auf die Agentur muss dieselbe Zielgroesse haben wie jeder Link. */
.footagentur a{min-height:44px}

/* Das Vollbildmenue soll auf einen Telefonbildschirm passen, ohne zu scrollen.
   Mit fuenf Leistungen wird es dafuer bei niedrigen Fenstern enger. Darunter
   scrollt es innerhalb der Flaeche weiter, die Zielgroesse bleibt ueber 44px. */
@media (max-height:900px){
  .menupanel .menuhaupt{min-height:52px}
  .menupanel .menukopf{min-height:48px;margin-bottom:18px}
  .menupanel .menublock{margin-bottom:18px}
  .menupanel .menuneben{min-height:44px}
}
@media (max-height:760px){
  .menupanel .menuhaupt{min-height:48px;padding:9px 0;font-size:clamp(22px,6vw,28px)}
  .menupanel .menuhaupt::before{font-size:clamp(25px,7vw,32px)}
  .menupanel .menukopf svg{height:38px}
  .menupanel .menutel{min-height:46px;font-size:21px}
  .menupanel .menucta{min-height:52px}
  .menupanel .menuzeile>a{height:48px;min-height:48px;font-size:14.5px}
  .menupanel .menufuss{padding-top:14px}
}

/* Der Honigtopf darf das Raster nicht sprengen, auch nicht unsichtbar. */
.honigtopf input{width:1px;height:1px;padding:0;border:0}

/* Bei erzwungenen Systemfarben verliert der Schleier seinen Verlauf, das Foto
   bleibt aber farbig stehen. Dann waere die Ueberschrift schwarz auf Bild.
   Also weg mit dem Bild, so wie es im Druckblock schon geloest ist. */
@media (forced-colors: active){
  .hero img,.seitenhero img,.scrimA,.scrimB,.seitenhero .schleier,.hero .schleier{display:none !important}
  .hero,.seitenhero{background:Canvas !important}
  .hero *,.seitenhero *{color:CanvasText !important}
}

/* Leere Formularfelder gehoeren nicht auf Papier. */
@media print{
  form,.anfrageform,.mobilebar{display:none !important}
}

/* Das Pflichtkaestchen soll auf dem Telefon zu treffen sein. */
.zustimmung label{min-block-size:44px}
.zustimmung input{width:28px;height:28px}

/* Nachgetragen: Regeln, die im gemessenen Entwurf als Inline-Stil am Element standen. */
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;filter:saturate(.70) contrast(1.03) brightness(1.02)}
/* Langsamer Zoom im Einstieg: das Bild waechst in zehn Sekunden um acht Prozent
   und bleibt dann stehen. Wer weniger Bewegung eingestellt hat, sieht es nicht. */
.hero,.seitenhero{overflow:hidden}
.heroimg,.seitenhero>img{backface-visibility:hidden}
@keyframes einstiegzoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:no-preference){
  .heroimg,.seitenhero>img{transform-origin:50% 50%;will-change:transform;
    animation:einstiegzoom 10s cubic-bezier(.33,0,.2,1) both}
}
.videoposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;border-top:1px solid #dad8d6;box-shadow:0 -6px 24px rgba(34,31,28,.10);padding:12px 20px;grid-template-columns:1fr 1fr;gap:10px}
.mobiltel{background:transparent;color:#211f1e;border:1px solid #211f1e;font-size:16px;font-weight:600;line-height:1;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.mobilcta{background:#d63909;color:#ffffff;font-size:16px;font-weight:600;line-height:1;min-height:52px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.vglkopf{max-width:900px;margin-bottom:60px}
.vglkopf h2{margin:0 0 24px}
.vglkopf .absled{margin:0;max-width:62ch}
.col2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
.vgltitel{display:block;font-size:15px;font-weight:600;color:#6e6b69;margin-bottom:20px}
.vglliste{list-style:none;margin:0;padding:0}
.vglliste li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;padding:15px 0;
  border-top:1px solid #dad8d6;font-size:18px;line-height:1.45;color:#5d5a59;align-items:start}
.vglliste svg{margin-top:4px}
.vglja li{color:#211f1e}
.vglcta{margin:36px 0 0}
/* Die Zeichen der Gegenueberstellung laufen nacheinander ein. Die Nummer --n
   steht in der Zeile, die Kreuze tragen die niedrigeren Nummern und starten
   deshalb zuerst. Versteckt wird nur, was das Skript auch wieder einblendet. */
.vergleich.zeichenbereit .vglliste li>svg{opacity:0}
.vergleich.zeichenlauf .vglliste li>svg{animation:zeichenein 480ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--n,0) * 85ms)}
@keyframes zeichenein{from{opacity:0;transform:translateY(-9px) scale(.78)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .vergleich.zeichenbereit .vglliste li>svg{opacity:1}
  .vergleich.zeichenlauf .vglliste li>svg{animation:none}
}
@media (max-width:900px){.col2{gap:44px}}
.blick4{grid-template-columns:repeat(4,minmax(0,1fr))}
.blick4>div:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.34);padding-left:clamp(18px,2vw,34px)}
.blick4>div:nth-child(4n+1){border-left:0;padding-left:0}
.blick4 dt{font-size:clamp(26px,2.3vw,34px);line-height:1.02;letter-spacing:-.02em}
@media (max-width:900px){
  .blick4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blick4>div:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.34);padding-left:clamp(18px,2vw,34px)}
  .blick4>div:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:620px){.blick4{grid-template-columns:minmax(0,1fr)}}
.bewkopf{margin-bottom:clamp(28px,3vw,44px);max-width:900px}
.bewkopf h2{margin:0}
.chaptext{font-size:62px;line-height:1.08;font-weight:800;letter-spacing:-.02em;max-width:17ch}
.svchead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.anfrageform .feldhilfe{display:block;margin-top:9px;font-size:15px;line-height:1.5;color:#5d5a59}
.anfrageform details.feldgruppe{border-top:1px solid #dad8d6;padding-top:18px}
.anfrageform details.feldgruppe>summary{cursor:pointer;display:flex;align-items:center;gap:10px;
  min-height:48px;font-size:17px;font-weight:600;color:#211f1e}
.anfrageform details.feldgruppe>.feld{margin-top:14px}
.anfrageform .formschluss{margin:0;font-size:16px;line-height:1.6;color:#211f1e}

/* Der WhatsApp-Weg steht als zweite Moeglichkeit neben dem Formular, nicht als
   dritter Knopf. Zeichen und Wort gehoeren zusammen, darum inline-flex. */
.walink{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  min-height:44px;line-height:1.3}
.walink svg{flex:0 0 auto}
.walink span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  text-decoration-color:#f14d23}
.walink:hover span{text-decoration-color:#211f1e}
.waspur{margin:18px 0 0}
.waspur .waform{color:#211f1e;font-size:17px}
.on-dark .waspur .waform,.abschnitt.dunkel .waspur .waform{color:#ffffff}
.on-dark .walink:hover span,.footer .walink:hover span{text-decoration-color:#ffffff}
.napblock .wafuss{color:#ffffff;font-weight:600;margin-top:2px}
.footcontact{display:flex;flex-direction:column;align-items:flex-start}
.footcontact .wakontakt{color:#ffffff;margin-top:16px;font-size:16px}
@media (max-width:620px){
  .waspur{margin-top:16px}
  .waspur .waform{font-size:16px}
  .footcontact{align-items:center}
  .footcontact .wakontakt{justify-content:center;width:100%}
}

/* Contact Form 7 bringt eigene Huellen und Meldungen mit. Sie bekommen hier
   dieselbe Gestaltung wie die uebrigen Felder, damit von aussen kein
   Unterschied zu sehen ist. */
.anfrageform .wpcf7-form-control-wrap{display:block}
.anfrageform .wpcf7-not-valid-tip{display:block;margin-top:7px;font-size:15.5px;line-height:1.45;
  color:#a3271f;font-weight:600}
.anfrageform .wpcf7-not-valid{border-color:#b32d2e}
.anfrageform input[type=submit]{background:#d63909;color:#ffffff;font-size:17px;font-weight:600;
  line-height:1;padding:0 34px;min-height:60px;border:0;cursor:pointer;font-family:inherit;
  box-sizing:border-box;-webkit-appearance:none;appearance:none}
.anfrageform input[type=submit]:hover{background:#c73100}
.wpcf7 form.anfrageform .wpcf7-response-output{margin:2px 0 0;padding:16px 18px;font-size:17px;
  line-height:1.55;border:1px solid #b32d2e;border-radius:var(--r-feld);background:#fdeeec;color:#6d1d19}
.wpcf7 form.anfrageform.sent .wpcf7-response-output{border-color:#1a7f37;background:#eef6ef;color:#123f1e}
.anfrageform .wpcf7-spinner{margin:0 0 0 14px;vertical-align:middle}
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.anfrageform .formdsgvo{font-size:15px;line-height:1.55;color:#5d5a59}
.gebietfakten{margin:0 0 var(--sp4);font-size:18px;line-height:1.5}
.gebietfakten>div{display:grid;grid-template-columns:3fr 9fr;gap:32px;padding:18px 0;border-top:1px solid #dad8d6}
.gebietfakten>div:last-child{border-bottom:1px solid #dad8d6}
.gebietfakten dd{margin:0}
@media (max-width:620px){.gebietfakten>div{grid-template-columns:minmax(0,1fr);gap:6px}}

/* Nachbesserungen aus der Abnahme */
.gebietfakten{margin-top:clamp(34px,3.8vw,56px)}
.ortecta{margin-top:clamp(34px,3.8vw,56px)}
.bewzitate figure{padding-top:clamp(20px,2.2vw,30px);border-top:1px solid rgba(255,255,255,.34)}
.bewzitate figure:first-child{padding-top:0;border-top:0}
.bewzitate figcaption{margin-top:12px;font-size:15.5px;letter-spacing:.01em;color:#ffffff}
.krumeimhero{margin:0 0 26px;font-size:15px}
.krumeimhero .kruminner{max-width:none;margin:0;padding:0}
.krumeimhero a,.krumeimhero span{color:#ffffff}
.krumeimhero .breadcrumb_last{color:rgba(255,255,255,.72)}
.gebietfakten+.ortecta{margin-top:0;border-top:0;padding-top:clamp(20px,2.2vw,28px)}


/* ---- Bewertungen: eigene Komposition statt des Zweispalters ---- */
.bewband{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:clamp(28px,4vw,72px);align-items:start;
  padding-bottom:clamp(30px,3.4vw,48px);border-bottom:1px solid rgba(255,255,255,.34)}
.bewleit{margin:0;font-size:clamp(23px,2.3vw,34px);line-height:1.34;font-weight:500;
  font-style:italic;color:#ffffff;hanging-punctuation:first}
.bewleit cite{display:block;margin-top:16px;font-size:15.5px;font-style:normal;
  letter-spacing:.01em;color:#ffffff}
.bewrest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,64px);margin-top:clamp(30px,3.4vw,48px)}
.bewrest blockquote{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.52;
  font-style:italic;color:#ffffff}
.bewrest cite{display:block;margin-top:12px;font-size:15.5px;font-style:normal;color:#ffffff}
@media (max-width:900px){
  .bewband{grid-template-columns:minmax(0,1fr)}
  .bewrest{grid-template-columns:minmax(0,1fr)}
}

/* ---- Einsatzgebiet: volle Breite, Bild unten neben den Eckdaten ---- */
.gebietkopf{max-width:62ch;margin-bottom:clamp(30px,3.4vw,48px)}
.gebietkopf .absled{margin:0;max-width:58ch}
.gebietunten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,3.6vw,64px);align-items:start;margin-top:clamp(30px,3.4vw,48px)}
.gebietbild{width:100%;height:100%;min-height:clamp(240px,26vw,380px);object-fit:cover;
  display:block;border-radius:var(--r-bild)}
@media (max-width:900px){.gebietunten{grid-template-columns:minmax(0,1fr)}}

/* ---- Taktile Rueckmeldung und Hover ---- */
@media (prefers-reduced-motion:no-preference){
  .knopfA,.knopfG,.knopfL,.anfrageform button[type=submit]{transition:transform .12s ease,background .2s ease}
  .orte li{transition:border-color .2s ease,box-shadow .2s ease}
  .faqrow{transition:background .2s ease}
}
.knopfA:active,.knopfG:active,.knopfL:active,.anfrageform button[type=submit]:active{transform:translateY(1px)}
.orte li:hover{border-color:#c9c3bd;box-shadow:0 2px 6px rgba(33,31,30,.10)}
details:hover>.faqrow,details[open]>.faqrow{background:rgba(33,31,30,.028)}
.on-dark details:hover>.faqrow,.on-dark details[open]>.faqrow{background:rgba(255,255,255,.06)}
.abschnitt.anfrageblock h2.d2{font-size:clamp(30px,3.6vw,52px);line-height:1.06}
.bewkopf{margin-bottom:clamp(30px,3.4vw,52px)}
.gebietkopf h2{margin:0 0 22px}

/* Zweispaltige Abschnitte: der Kopf laeuft mit, statt eine leere Spalte zu hinterlassen. */
@media (min-width:901px){
  .wechsel .split>.wechselkopf{align-self:start}
}
@media (prefers-reduced-motion:reduce){
  .wechsel .split>.wechselkopf{position:static}
}



/* ---- Anfrageabschnitt ueber die volle Breite ---- */
.formkopf{max-width:62ch;margin-bottom:clamp(30px,3.4vw,48px)}
.formkopf h2{margin:0 0 20px}
.formkopf .absled{margin:0;max-width:58ch}
.formularspalte{max-width:1020px}
@media (max-width:900px){
  .anfrageform .feldreihe{grid-template-columns:minmax(0,1fr)}
}
/* ---- Fusszeile auf Telefon und Tablet ---- */
@media (max-width:900px){
  .footbottom{flex-direction:column;align-items:center;justify-content:center;gap:18px;
    text-align:center;padding-top:30px}
  .footrecht{justify-content:center;gap:26px}
  .footagentur{display:flex;justify-content:center;width:100%;margin-top:4px}
}
@media (max-width:620px){
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:30px 20px !important;
    text-align:center;padding-bottom:34px !important}
  .footbrand,.footcontact{grid-column:1 / -1 !important}
  .footbrand>span:first-child{display:block;margin:0 auto 20px !important}
  .footbrand>span:first-child svg{margin:0 auto}
  .napblock{justify-items:center}
  .napblock a{justify-content:center}
  .footbrand>p{max-width:34ch !important;margin-left:auto !important;margin-right:auto !important}
  .footgrid nav{display:flex;flex-direction:column;align-items:center}
  .footgrid nav a{justify-content:center}
  .footcontact .knopfG,.footcontact a{width:100%;justify-content:center}
  .footbottom{gap:16px}
}
.footagenturlogo{max-width:100%}
/* Das Agenturlogo traegt einen Verlauf fuer helle Flaechen. Auf der orangen
   Fusszeile geht der unter, deshalb steht es hier einfarbig weiss. */
.footagenturlogo .agenturlogo{height:22px;width:auto;max-width:100%;margin-left:0;
  filter:brightness(0) invert(1)}
@media (max-width:900px){
  .footagenturlogo .agenturlogo{height:auto;width:min(340px,70%);display:block;margin:2px auto 0}
}
@media (max-width:620px){
  .footagenturlogo .agenturlogo{width:min(300px,86%)}
}


/* Telefon: Einstieg tiefer setzen, die Knoepfe schliessen unten ab.
   Der Textblock haengt am unteren Rand, also entscheidet allein das untere
   Polster, wie weit er unter der Kopfleiste steht. Der Einstieg der Unterseiten
   bekam zusaetzlich die allgemeine Abschnittspolsterung ab und war dadurch
   112 Pixel hoeher als der Bildschirm. */
@media (max-width:620px){
  section.seitenhero{padding:0 !important}
  .hero .heroinner{padding-bottom:clamp(36px,9vw,52px) !important}
  .seitenhero .heroin{padding-bottom:clamp(36px,9vw,52px) !important}
}
@media (max-width:620px) and (max-height:700px){
  .hero .heroinner{padding-bottom:clamp(28px,7vw,40px) !important}
  .seitenhero .heroin{padding-bottom:clamp(28px,7vw,40px) !important}
}

/* Kontaktseite: der Einstieg bleibt kurz und der Formularabschnitt ruecht nach,
   damit das erste Feld ohne Scrollen dasteht. Die Seite ist das Ziel der Anzeigen,
   dort zaehlt der erste Blick. */
body.page-id-157 .seitenhero,.seitenhero:has(+ section#anfrage){
  min-height:0 !important;align-items:flex-start !important}
body.page-id-157 .heroin,.seitenhero:has(+ section#anfrage) .heroin{
  padding-top:calc(108px + 14px) !important;padding-bottom:32px !important}
body.page-id-157 section#anfrage,.seitenhero:has(+ section#anfrage) + section#anfrage{
  padding-top:clamp(40px,4vw,60px) !important}
@media (max-width:620px){
  body.page-id-157 .heroin,.seitenhero:has(+ section#anfrage) .heroin{
    padding-top:calc(84px + 18px) !important;padding-bottom:24px !important}
  body.page-id-157 section#anfrage,.seitenhero:has(+ section#anfrage) + section#anfrage{
    padding-top:36px !important}
}