/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-y-0{top:0;bottom:0}.left-3{left:.75rem}.top-0{top:0}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-8{height:2rem}.h-\[68px\]{height:68px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-\[70ch\]{max-width:70ch}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.scroll-mt-24{scroll-margin-top:6rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-200\/70{border-color:rgba(226,232,240,.7)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[\#F9FAFB\]{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-\[\#F9FAFB\]\/85{background-color:rgba(249,250,251,.85)}.bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--ua24-brand-rgb,168 75 26)/var(--tw-bg-opacity,1))}.bg-brand-50{background-color:color-mix(in srgb,var(--ua24-brand,#a84b1a) 8%,#fff)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/60{background-color:hsla(0,0%,100%,.6)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pl-10{padding-left:2.5rem}.pl-9{padding-left:2.25rem}.pr-1{padding-right:.25rem}.pr-3{padding-right:.75rem}.pt-0{padding-top:0}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-sans{font-family:Plus Jakarta Sans,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-brand-ink{color:var(--ua24-brand-ink-kopf,#a84b1a)}.text-ink{--tw-text-opacity:1;color:rgb(21 23 31/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-slate-900\/5{--tw-shadow-color:rgba(15,23,42,.05);--tw-shadow:var(--tw-shadow-colored)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.placeholder\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.placeholder\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.focus-within\:border-brand:focus-within{--tw-border-opacity:1;border-color:rgb(var(--ua24-brand-rgb,168 75 26)/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-brand\/30:focus-within{--tw-ring-color:rgb(var(--ua24-brand-rgb,168 75 26)/0.3)}.hover\:gap-3:hover{gap:.75rem}.hover\:bg-brand:hover{--tw-bg-opacity:1;background-color:rgb(var(--ua24-brand-rgb,168 75 26)/var(--tw-bg-opacity,1))}.hover\:bg-brand-700:hover{--tw-bg-opacity:1;background-color:rgb(var(--ua24-brand-dark-rgb,125 53 16)/var(--tw-bg-opacity,1))}.hover\:bg-slate-200\/60:hover{background-color:rgba(226,232,240,.6)}.hover\:text-brand-ink:hover{color:var(--ua24-brand-ink-kopf,#a84b1a)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:z-\[60\]:focus{z-index:60}.focus\:m-3:focus{margin:.75rem}.focus\:rounded-2xl:focus{border-radius:1rem}.focus\:border-brand:focus{--tw-border-opacity:1;border-color:rgb(var(--ua24-brand-rgb,168 75 26)/var(--tw-border-opacity,1))}.focus\:bg-brand:focus{--tw-bg-opacity:1;background-color:rgb(var(--ua24-brand-rgb,168 75 26)/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-brand\/40:focus{--tw-ring-color:rgb(var(--ua24-brand-rgb,168 75 26)/0.4)}.active\:scale-\[\.98\]:active{--tw-scale-x:.98;--tw-scale-y:.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:block:is(.dark *){display:block}.dark\:hidden:is(.dark *){display:none}.dark\:border-white\/10:is(.dark *){border-color:hsla(0,0%,100%,.1)}.dark\:border-white\/20:is(.dark *){border-color:hsla(0,0%,100%,.2)}.dark\:bg-brand\/15:is(.dark *){background-color:rgb(var(--ua24-brand-rgb,168 75 26)/.15)}.dark\:bg-night:is(.dark *){--tw-bg-opacity:1;background-color:rgb(11 18 32/var(--tw-bg-opacity,1))}.dark\:bg-night\/85:is(.dark *){background-color:rgba(11,18,32,.85)}.dark\:bg-panel:is(.dark *){--tw-bg-opacity:1;background-color:rgb(17 26 46/var(--tw-bg-opacity,1))}.dark\:bg-panel\/60:is(.dark *){background-color:rgba(17,26,46,.6)}.dark\:bg-white\/5:is(.dark *){background-color:hsla(0,0%,100%,.05)}.dark\:bg-white\/\[\.03\]:is(.dark *){background-color:hsla(0,0%,100%,.03)}.dark\:bg-white\/\[\.04\]:is(.dark *){background-color:hsla(0,0%,100%,.04)}.dark\:text-slate-100:is(.dark *){--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.dark\:text-slate-200:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:hover\:bg-white\/10:hover:is(.dark *){background-color:hsla(0,0%,100%,.1)}@media (min-width:640px){.sm\:inline-flex{display:inline-flex}.sm\:grid{display:grid}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-2{gap:.5rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:pb-14{padding-bottom:3.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1fr_360px\]{grid-template-columns:1fr 360px}.lg\:gap-12{gap:3rem}}@media (min-width:1280px){.xl\:block{display:block}.xl\:flex{display:flex}.xl\:hidden{display:none}}
/*
 * Gestaltung von umzugsangebote24.de (abgeleitet von waermepumpenberatung24.de).
 *
 * Handgeschrieben; bauen.py haengt diese Datei hinter den Tailwind-Lauf. Die Verzeichnisseiten bringen ihr
 * eigenes CSS aus Web24-Directory mit; hier steht das Geruest drumherum sowie
 * die Gestaltung der uebrigen Seiten.
 *
 * Die Farbwerte kommen als CSS-Variablen aus dem Portal-Profil (siehe
 * ua24_farb_variablen() in functions.php) — ein neues Portal bekommt seine
 * Farbgebung damit ohne Codeaenderung.
 */

/* --------------------------------------------------------------------------
   Token
   -------------------------------------------------------------------------- */

:root {
	/* --ua24-brand und --ua24-brand-dark setzt functions.php. Die Werte hier sind
	   nur der Rueckfall, falls das Core-Plugin fehlt. */
	--ua24-brand: #a84b1a;
	--ua24-brand-dark: #7d3510;

	/* Kontraste gegen Weiss, nachgerechnet am 27.09.2026 (WCAG 2.x, 4,5:1):
	   --ua24-text       #1f2430 = 15,52:1
	   --ua24-muted      #55596b =  6,94:1
	   --ua24-brand      #a84b1a =  5,70:1  (auch als Flaeche mit weisser Schrift;
	                                         5,45:1 auf dem Seitengrund #F9FAFB,
	                                         5,10:1 auf brand.50 #f8f1ed)
	   --ua24-brand-dark #7d3510 =  8,79:1
	   --ua24-link       #1f7a72 =  5,14:1  (Petrol; 4,92:1 auf #F9FAFB)
	   Der vorgeschlagene Kartonton #b8531f kam nur auf 4,89:1 auf Weiss und
	   4,38:1 auf brand.50 und fiel dort durch; #a84b1a ist dieselbe Farbe eine
	   Stufe dunkler. */
	--ua24-text: #1f2430;
	--ua24-muted: #55596b;
	--ua24-line: #dfe3ea;
	--ua24-bg: #ffffff;
	--ua24-bg-soft: #f5f7fa;

	/*
	 * DER MARKENTON ALS SCHRIFT — getrennt von der Marke als FLAECHE.
	 *
	 * Im Hellmodus sind beide gleich: #a84b1a haelt 5,70:1 auf Weiss und taugt
	 * als Text wie als Knopffarbe mit weisser Schrift. Im Dunkelmodus geht das
	 * nicht mehr auf: derselbe Ton auf #0B1220 kommt auf 3,29:1 und faellt
	 * durch. Ein aufgehellter Ton wiederum ist als Knopffarbe unbrauchbar,
	 * weil die weisse Schrift darauf verschwindet.
	 *
	 * Also zwei Token: --ua24-brand bleibt die Flaeche, --ua24-brand-ink ist die
	 * Schrift. Dieselbe Dreiteilung wie auf wertaugtwas.de.
	 */
	--ua24-brand-ink: var(--ua24-brand);

	/*
	 * UND DASSELBE NOCH EINMAL FUER KOPF UND FUSS.
	 *
	 * --ua24-brand-ink gilt fuer den Seitengrund und bleibt auf Divi-gebauten
	 * Seiten absichtlich dunkel, weil deren Abschnitte fest auf Weiss stehen
	 * (siehe unten). Kopf- und Fusszeile sind dort aber trotzdem dunkel — sie
	 * kommen aus dem Theme und faerben ueber Tailwind-Klassen. Der Markenton
	 * im Logo braucht deshalb ein Token, das dem Modus IMMER folgt.
	 *
	 * Gemessen am 27.09.2026: #a84b1a kommt auf dem dunklen Kopf (#0B1220) auf
	 * 3,29:1, bei 18 Pixel fett gilt die Schwelle 4,5:1, also aufhellen.
	 * #f0a878 haelt dort 9,43:1 (8,73:1 auf den Karten #111a2e).
	 */
	--ua24-brand-ink-kopf: var(--ua24-brand);

	/*
	 * ZWEITFARBE PETROL fuer Links im Fliesstext und Hinweise.
	 *
	 * Getrennt von der Markenfarbe, damit ein Link nicht wie ein Knopf aussieht
	 * und die orangebraunen Flaechen die Knoepfe bleiben. Hell #1f7a72
	 * (5,14:1 auf Weiss), beim Zeigen #1a6b64 (6,30:1). Dunkel #4fb3a9
	 * (7,45:1 auf #0B1220, 6,90:1 auf #111a2e), beim Zeigen #7fcbc2.
	 */
	--ua24-link: #1f7a72;
	--ua24-link-hover: #1a6b64;

	--ua24-radius: 10px;
	--ua24-space: 1rem;
	--ua24-container: 72rem;
	/*
	 * Kopf und Fuss laufen breiter als der Fliesstext - wie auf wertaugtwas.de
	 * (dort max-w-7xl gegen max-w-5xl). Grund ist nicht Geschmack: Das
	 * Hauptmenue dieses Portals hat sechs Punkte auf oberster Ebene und daneben
	 * die Servicenavigation. In 72rem bricht die Leiste auf zwei Zeilen um und
	 * der Kopf wird 93 statt 68 Pixel hoch.
	 */
	--ua24-container-breit: 80rem;

	/* Systemschrift: keine Verbindung zu einem Fremdserver, kein Nachladen,
	   kein Text ohne Schrift beim ersten Aufbau. */
	--ua24-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ua24-bg);
	color: var(--ua24-text);
	font-family: var(--ua24-font);
	/* 17px statt der 14px aus dem Divi-Bestand — mit Blick auf die Zielgruppe. */
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;

	/* Haelt die Fusszeile auch auf kurzen Seiten unten. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Nimmt den verbleibenden Platz ein, damit `margin-top: auto` am Fuss greift. */
.ua24-main {
	flex: 1 0 auto;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
 * GRUNDFARBE FUER LINKS — IN :where() UND DAMIT MIT SPEZIFITAET NULL.
 *
 * Diese Datei wird NACH Tailwind zusammengezogen. Ohne :where() haette
 * `a:hover` (0,1,1) Vorrang vor jeder Tailwind-Utility (0,1,0), und die
 * Utility verloere bei Gleichstand ohnehin durch die Reihenfolge. Genau das
 * ist passiert: Der Knopf "Betrieb eintragen" traegt `text-white` auf
 * `bg-brand`, beim Ueberfahren wechselt der Hintergrund auf `brand-700`
 * (#7d3510) — und `a:hover` faerbte die Schrift auf denselben Ton. Weisse
 * Schrift wurde dunkelblau auf dunkelblau, der Knopf war leer.
 *
 * Mit :where() zaehlt die Regel als Spezifitaet 0: Sie gilt weiterhin fuer
 * jeden Link im Fliesstext und in Divi-Inhalten, aber JEDE ausdrueckliche
 * Farbangabe schlaegt sie. Das ist dieselbe Loesung wie bei .sl-prose auf
 * smartleads24.
 *
 * Die Zeile mit den Ueberschriften darunter braucht das nicht: Dort steht
 * keine Farbe, nur Groesse und Abstand.
 */
:where(a) {
	color: var(--ua24-link);
	text-underline-offset: 0.15em;
}

:where(a:hover) {
	color: var(--ua24-link-hover);
}

h1, h2, h3, h4 {
	line-height: 1.25;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

/*
 * DIE UNTERGRENZE VON h2 IST 1.5rem UND NICHT 1.375rem (22 px).
 *
 * Divi deckelt Ueberschriften in schmalen Spalten fest auf 23 Pixel
 * (`.et_pb_column_1_3 h2` und die Geschwister fuer 1_4, 1_5, 1_6, 2_5) — ein
 * fester Wert, der nicht mitwaechst und nicht mitschrumpft. Auf dem Desktop
 * steht die Abschnittsueberschrift mit 30 px klar darueber; unter 768 Pixeln
 * fiel sie mit 22 px UNTER die Karten, die sie einleitet. Das betraf jede
 * Divi-Seite mit Kartenraster, nicht eine einzelne.
 *
 * 1.5rem sind 24 Pixel und damit wieder mehr als die 23 der Karten. Am oberen
 * Ende aendert sich nichts: Ab 533 Pixeln Fensterbreite uebernimmt ohnehin der
 * mittlere Term.
 */
h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem); }
h3 { font-size: 1.25rem; }

/*
 * KARTEN-UEBERSCHRIFTEN AUF HANDYS EINE STUFE KLEINER.
 *
 * Divi staffelt Ueberschriften in schmalen Spalten fest: 26/23/20/18/16/15 px
 * fuer h1 bis h6, ohne Medienabfrage. Der Gedanke dahinter stimmt am Desktop —
 * eine Drittel-Spalte traegt weniger — aber unter 768 Pixeln stapeln die
 * Spalten auf volle Breite, und die Verkleinerung hat keinen Anlass mehr.
 * Uebrig bleibt nur ihr Nebeneffekt: Die Karte stand mit 23 px fast gleichauf
 * mit der Abschnittsueberschrift darueber (24 px, siehe den Clamp oben), und
 * ein Groessensprung war nicht mehr zu sehen.
 *
 * 1.25rem sind 20 Pixel — dieselbe Stufe wie h3 im Theme. Damit steht auf dem
 * Handy wieder eine erkennbare Reihe: 28 / 24 / 20.
 *
 * `body` davor hebt die Spezifitaet auf (0,1,2) und schlaegt Divis (0,1,1)
 * unabhaengig von der Ladereihenfolge — Divis Regel steht je nach Seite mal im
 * Stylesheet, mal im eingebetteten Critical CSS.
 *
 * DER PREIS DAFUER: Eine im Builder gesetzte Schriftgroesse eines Textmoduls
 * kommt als `.et_pb_text_N h2` (0,1,1) und verliert hier unter 768 px. Auf
 * diesem Portal faellt das nicht auf — die zwoelf Textmodule in schmalen
 * Spalten mit eigener Groesse (angebote, angebote-a-h, angebote-i-z,
 * u-wert-bei-fenster) stehen fuer Handys ohnehin auf genau diesen 20 px.
 * Wer kuenftig eine Karte auf dem Handy groesser haben will, aendert sie
 * hier und nicht im Builder.
 */
@media (max-width: 767px) {
	body .et_pb_column_1_3 h2,
	body .et_pb_column_1_4 h2,
	body .et_pb_column_1_5 h2,
	body .et_pb_column_1_6 h2,
	body .et_pb_column_2_5 h2 {
		font-size: 1.25rem;
	}
}

p, ul, ol {
	margin: 0 0 1em;
}

/*
 * Sichtbarer Fokus.
 *
 * Divi setzt global `:focus{outline:0}` ohne Ersatz — wer die Seite per
 * Tastatur bedient, sieht nicht, wo er steht. Hier kommt der Ring zurueck,
 * und zwar mit !important, weil Divis Regel auf Builder-Seiten noch geladen ist.
 */
:focus-visible {
	outline: 3px solid var(--ua24-brand-ink) !important;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Der Wrapper traegt tabindex="-1"; ohne das hier bekaeme er nach dem Sprung
   einen Fokusring um die halbe Seite. */
.ua24-main:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ua24-container {
	width: min(100% - 2rem, var(--ua24-container));
	margin-inline: auto;
}

.ua24-content {
	display: block;
	padding-block: 2.5rem 4rem;
}

.ua24-prose {
	max-width: 42rem;
}

.ua24-prose img {
	border-radius: var(--ua24-radius);
}

/*
 * Anfrage-Widget von daa.net in einem Divi-Code-Modul (20 Landingpages,
 * etwa /maler-in-der-naehe-finden/). Die Seite laeuft in der breiten Bahn
 * (1232 px), aber Divi deckelt seine Reihe auf 80 % und 1080 px — das
 * Widget saehe 985 px und legte seine Projektkarten in zwei Spalten statt
 * vier (Umschaltpunkt 1080 px, gemessen am 02.09.2026). Reihe und Abschnitt
 * deshalb auf volle Breite, ohne Divis Prozent-Abstaende: Den Abstand nach
 * oben und unten gibt schon der Rahmen der Vorlage (py-10 / py-14), und die
 * weisse Flaeche des Abschnitts wuerde im Dunkelmodus als heller Block
 * stehen. `#page-container` im Selektor, weil Divi seine Regeln ebenfalls
 * daran haengt (siehe ua24_inhalt_ausgeben()).
 */
.ua24-anfragewidget #page-container .et_pb_section,
.ua24-anfragewidget #page-container .et_pb_row {
	width: 100%;
	max-width: none;
	padding: 0;
	background: transparent;
}

/*
 * Impressum (`.ua24-vollbreit`, gesetzt in page.php nach
 * ua24_seite_ist_vollbreit()): Divi deckelt seine Reihe auf 80 % des
 * Abschnitts und 1080 px — bei 1440 px Fenster standen 986 px Text in einer
 * 1232 px breiten weissen Flaeche. Auf Anweisung vom 12.09.2026 laeuft die
 * Reihe ueber die ganze Flaeche; der Abschnitt behaelt Polster und Grund,
 * die Reihe bekommt seitlich den Rand des Rahmens (1rem / 1.5rem wie px-4 /
 * sm:px-6), damit der Text nicht an der weissen Kante klebt.
 */
.ua24-vollbreit #page-container .et_pb_row {
	width: 100%;
	max-width: none;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.ua24-vollbreit #page-container .et_pb_row {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Divi-Seiten im Dunkelmodus
   --------------------------------------------------------------------------

   AUSGANGSLAGE, gemessen am 12.09.2026 ueber alle 53 Divi-Seiten: Der Body
   traegt `dark:text-slate-100` (header.php), und das erbt bis in die
   Divi-Abschnitte hinein — deren Grund aber ist fest weiss (Divis Vorgabe
   `.et_pb_section{background-color:#fff}`). Auf /photovoltaik-mit-speicher/
   standen 164 von 224 Textstellen unter 3:1.

   ZWEI SCHICHTEN, und die Reihenfolge der Ueberlegung traegt:

   1. HIER stehen Divis feste Selektoren — Abschnitt, Modulkaesten,
      Formularfelder, Ueberschriften. Die heissen auf jeder Seite gleich.
   2. Die Farben, die jemand JE MODUL im Builder gesetzt hat, kommen aus
      inc/dunkelmodus.php: Es liest Divis fertiges CSS zur Seite und rechnet
      jede Angabe ins Dunkle. Diese Regeln tragen `!important` und schlagen
      damit alles hier — so gewinnt immer die konkretere Angabe.

   DIE KLASSE `ua24-divi-dunkel` setzt dunkelmodus.php nur, wenn Schicht 2
   auch wirklich steht. Fehlt Divis CSS-Datei (die baut Divi beim ersten
   Aufruf erst), bleibt die Klasse weg und der Block ganz unten greift: Der
   Inhalt behaelt dann die Farben des Hellmodus. Unschoen, aber lesbar.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	html:not(.light) body.ua24-divi-dunkel #page-container {
		color: #e6e9f2;
	}

	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_section {
		background-color: #0c121f;
	}

	html:not(.light) body.ua24-divi-dunkel #page-container h1,
	html:not(.light) body.ua24-divi-dunkel #page-container h2,
	html:not(.light) body.ua24-divi-dunkel #page-container h3,
	html:not(.light) body.ua24-divi-dunkel #page-container h4,
	html:not(.light) body.ua24-divi-dunkel #page-container h5,
	html:not(.light) body.ua24-divi-dunkel #page-container h6,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_module_header,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h1,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h2,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h3,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h4,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h5,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h6 {
		color: #f1f5f9;
	}

	/* Kaesten, die Divi selbst weiss zeichnet. */
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_toggle,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_tab,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_tabs_controls,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_tabs_controls li,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_pricing_table,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_pricing_heading,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_testimonial,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_team_member,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_blog_grid .et_pb_post,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_shop .product {
		background-color: #18202f;
		border-color: rgb(255 255 255 / .12);
	}

	/* Eingabefelder: dunkle Mulde statt weisser Kasten. */
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="text"],
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="email"],
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="tel"],
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="url"],
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="number"],
	html:not(.light) body.ua24-divi-dunkel #page-container input[type="search"],
	html:not(.light) body.ua24-divi-dunkel #page-container textarea,
	html:not(.light) body.ua24-divi-dunkel #page-container select {
		background-color: #131b2b;
		border-color: rgb(255 255 255 / .16);
		color: #e6e9f2;
	}

	html:not(.light) body.ua24-divi-dunkel #page-container ::placeholder {
		color: #9aa3b8;
	}

	html:not(.light) body.ua24-divi-dunkel #page-container hr,
	html:not(.light) body.ua24-divi-dunkel #page-container table,
	html:not(.light) body.ua24-divi-dunkel #page-container th,
	html:not(.light) body.ua24-divi-dunkel #page-container td {
		border-color: rgb(255 255 255 / .12);
	}
}

html.dark body.ua24-divi-dunkel #page-container {
	color: #e6e9f2;
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_section {
	background-color: #0c121f;
}

html.dark body.ua24-divi-dunkel #page-container h1,
html.dark body.ua24-divi-dunkel #page-container h2,
html.dark body.ua24-divi-dunkel #page-container h3,
html.dark body.ua24-divi-dunkel #page-container h4,
html.dark body.ua24-divi-dunkel #page-container h5,
html.dark body.ua24-divi-dunkel #page-container h6,
html.dark body.ua24-divi-dunkel #page-container .et_pb_module_header,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h1,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h2,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h3,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h4,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h5,
html.dark body.ua24-divi-dunkel #page-container .et_pb_bg_layout_light h6 {
	color: #f1f5f9;
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_toggle,
html.dark body.ua24-divi-dunkel #page-container .et_pb_tab,
html.dark body.ua24-divi-dunkel #page-container .et_pb_tabs_controls,
html.dark body.ua24-divi-dunkel #page-container .et_pb_tabs_controls li,
html.dark body.ua24-divi-dunkel #page-container .et_pb_pricing_table,
html.dark body.ua24-divi-dunkel #page-container .et_pb_pricing_heading,
html.dark body.ua24-divi-dunkel #page-container .et_pb_testimonial,
html.dark body.ua24-divi-dunkel #page-container .et_pb_team_member,
html.dark body.ua24-divi-dunkel #page-container .et_pb_blog_grid .et_pb_post,
html.dark body.ua24-divi-dunkel #page-container .et_pb_shop .product {
	background-color: #18202f;
	border-color: rgb(255 255 255 / .12);
}

html.dark body.ua24-divi-dunkel #page-container input[type="text"],
html.dark body.ua24-divi-dunkel #page-container input[type="email"],
html.dark body.ua24-divi-dunkel #page-container input[type="tel"],
html.dark body.ua24-divi-dunkel #page-container input[type="url"],
html.dark body.ua24-divi-dunkel #page-container input[type="number"],
html.dark body.ua24-divi-dunkel #page-container input[type="search"],
html.dark body.ua24-divi-dunkel #page-container textarea,
html.dark body.ua24-divi-dunkel #page-container select {
	background-color: #131b2b;
	border-color: rgb(255 255 255 / .16);
	color: #e6e9f2;
}

html.dark body.ua24-divi-dunkel #page-container ::placeholder {
	color: #9aa3b8;
}

html.dark body.ua24-divi-dunkel #page-container hr,
html.dark body.ua24-divi-dunkel #page-container table,
html.dark body.ua24-divi-dunkel #page-container th,
html.dark body.ua24-divi-dunkel #page-container td {
	border-color: rgb(255 255 255 / .12);
}

/* --------------------------------------------------------------------------
   Helle Kaesten aus fremden Bausteinen
   --------------------------------------------------------------------------

   NICHT AUF DIVI-SEITEN BESCHRAENKT, und das ist der Punkt: Diese Kaesten
   kommen aus Plugins und tragen ihre helle Flaeche fest im eigenen CSS. Auf
   JEDER Seite im Dunkelmodus steht darin die helle Schrift des Themes auf
   hellem Grund.

   Gemessen am 12.09.2026: der Werbekasten des AdManagers (#f8f9fa) auf
   /kontakt/ und allen Stadtseiten, die Kategoriekacheln von BetterDocs
   (#ffffff) auf /ihre-frage-an-experten/.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	html:not(.light) .w24mf-admanager-output,
	html:not(.light) .betterdocs-single-category-inner,
	html:not(.light) .betterdocs-category-grid-inner {
		background-color: #18202f !important;
		border-color: rgb(255 255 255 / .12);
	}

	/*
	 * Der Beschreibungstext im Werbekasten steht auf #50575e — auf der
	 * hellen Flaeche des Plugins richtig, auf der dunklen mit 2,2:1 zu
	 * schwach. #9aa3b8 haelt dort 6,2:1.
	 */
	html:not(.light) .w24mf-adm-textblock,
	html:not(.light) .w24mf-admanager-output .w24mf-adm-textblock p {
		color: #9aa3b8;
	}
}

html.dark .w24mf-admanager-output,
html.dark .betterdocs-single-category-inner,
html.dark .betterdocs-category-grid-inner {
	background-color: #18202f !important;
	border-color: rgb(255 255 255 / .12);
}

html.dark .w24mf-adm-textblock,
html.dark .w24mf-admanager-output .w24mf-adm-textblock p {
	color: #9aa3b8;
}

/*
 * DAS MENUE-MODUL VON DIVI. Seine Verweise stehen fest auf
 * `rgba(0,0,0,.6)` — eine Grundregel ohne Modulnummer, die weder die
 * berechnete Schicht erwischt (die sieht nur nummerierte Selektoren) noch
 * eine der Regeln oben. Auf den sechs Stadtseiten von Nordrhein-Westfalen
 * stand das Staedtemenue dadurch mit 1,1:1 im Dunkeln.
 */
@media (prefers-color-scheme: dark) {
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_menu .et-menu li a,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_menu .et_mobile_menu li a {
		color: #e6e9f2;
	}
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_menu .et-menu li a,
html.dark body.ua24-divi-dunkel #page-container .et_pb_menu .et_mobile_menu li a {
	color: #e6e9f2;
}

/* --------------------------------------------------------------------------
   Divis Preistabellen: Grundfarben mit zu wenig Kontrast
   --------------------------------------------------------------------------

   Auf Anweisung des Betreibers vom 12.09.2026. Divi liefert den Kopf einer
   Preistabelle in `#bebebe` mit weisser Schrift (1,9:1) und die Zusaetze
   neben dem Preis ("mtl.", Waehrungszeichen) in `#999` auf Weiss (2,8:1).
   Gemessen auf einer Landingpage des Vorbilds (waermepumpenberatung24.de), wo die Tabellen Divis Vorgaben
   tragen.

   `html` DAVOR hebt das Gewicht genau um einen Typselektor: genug, um Divis
   Grundregel (`.et_pb_pricing_heading`, 0,1,0) zu schlagen, zu wenig gegen
   eine im Builder gesetzte Farbe (`.et_pb_pricing_table_0 ...`, 0,2,0).
   Wer eine Tabelle selbst gefaerbt hat, behaelt seine Farbe — die rechnet
   dann inc/dunkelmodus.php nach.

   #4b5563 traegt weisse Schrift mit 7,6:1, #6b7280 haelt auf Weiss 4,8:1.
   -------------------------------------------------------------------------- */

html .et_pb_pricing_heading {
	background-color: #4b5563;
}

html .et_pb_frequency,
html .et_pb_dollar_sign {
	color: #6b7280;
}

/* Im Dunkelmodus braucht der Zusatz den hellen Ton; der Kopf steht oben. */
@media (prefers-color-scheme: dark) {
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_frequency,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_dollar_sign {
		color: #9aa3b8;
	}
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_frequency,
html.dark body.ua24-divi-dunkel #page-container .et_pb_dollar_sign {
	color: #9aa3b8;
}

/*
 * DIVIS BLOG-MODUL IM DUNKELMODUS. Auszuege und Meta-Zeile tragen Divis Grau
 * `#666` fest (`.et_pb_bg_layout_light .et_pb_post p`, `.et_pb_post
 * .post-meta a`). Auf der dunklen Karte kam das auf 2,8:1, gemessen am
 * 12.09.2026 auf dienstleister-portal.com/blog/. #c3c9d6 haelt auf der Karte
 * 9,8:1, #9aa3b8 fuer die Meta-Zeile 6,2:1.
 */
@media (prefers-color-scheme: dark) {
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_post p,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_post .post-content {
		color: #c3c9d6;
	}

	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_post .post-meta,
	html:not(.light) body.ua24-divi-dunkel #page-container .et_pb_post .post-meta a {
		color: #9aa3b8;
	}
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_post p,
html.dark body.ua24-divi-dunkel #page-container .et_pb_post .post-content {
	color: #c3c9d6;
}

html.dark body.ua24-divi-dunkel #page-container .et_pb_post .post-meta,
html.dark body.ua24-divi-dunkel #page-container .et_pb_post .post-meta a {
	color: #9aa3b8;
}

/*
 * DIE SUCHVORSCHLAEGE VON BETTERDOCS ("Beliebt: haus, elek ...") stehen in
 * `#99a3ca` auf Weiss, 2,5:1, in beiden Modi. Gemessen am 12.09.2026 auf
 * dienstleister-portal.com/dienstleister-suche/. Nicht auf Divi-Seiten
 * beschraenkt, weil das Suchfeld auch anderswo steht. `html` davor schlaegt
 * die Plugin-Regel (0,2,0) unabhaengig von der Ladereihenfolge. #4b5563
 * haelt auf Weiss 7,6:1.
 */
html .betterdocs-popular-search-keyword .popular-keyword {
	color: #4b5563;
}

@media (prefers-color-scheme: dark) {
	html:not(.light) .betterdocs-popular-search-keyword .popular-keyword {
		background-color: #18202f;
		border-color: rgb(255 255 255 / .16);
		color: #c3c9d6;
	}
}

html.dark .betterdocs-popular-search-keyword .popular-keyword {
	background-color: #18202f;
	border-color: rgb(255 255 255 / .16);
	color: #c3c9d6;
}

/*
 * NOTLOESUNG, wenn die berechnete Schicht fehlt (siehe oben): Der
 * Divi-Inhalt behaelt die Schriftfarbe des Hellmodus. NUR im <article> —
 * also auf den Textseiten, nicht auf den randlosen gestalteten Seiten,
 * deren Baender ihre Farben selbst setzen. Und nicht auf den
 * Anfrage-Widget-Seiten: Dort ist der Abschnitt weiter oben transparent
 * gestellt und liegt auf dem dunklen Seitengrund.
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) body.ua24-divi-seite:not(.ua24-divi-dunkel) article:not(.ua24-anfragewidget) #page-container {
		color: #15171f;
	}
}

html.dark body.ua24-divi-seite:not(.ua24-divi-dunkel) article:not(.ua24-anfragewidget) #page-container {
	color: #15171f;
}

/* --------------------------------------------------------------------------
   Kopfzeile, Navigation und Fusszeile: entfernt am 01.09.2026
   -------------------------------------------------------------------------- */

/*
 * Hier standen rund 150 Zeilen fuer `.ua24-header`, `.ua24-brand`, `.ua24-menu`,
 * `.ua24-nav-toggle`, `.ua24-mobile-nav`, `.ua24-skip-link` und `.ua24-footer` — das
 * Geruest des Themes VOR dem Wechsel auf Tailwind am 30.08.2026. Seitdem
 * bauen header.php und footer.php Kopf, Navigation, Sprungmarke und Fuss aus
 * Utility-Klassen; keine dieser Regeln hatte noch ein Gegenstueck im Markup.
 *
 * Nachgemessen im ausgelieferten HTML von Startseite, Magazin, Impressum,
 * Suche und /branchen/: kein einziges Vorkommen. `ua24_menue()` in functions.php
 * ist die letzte Verwenderin von `.ua24-menu` und wird selbst nirgends
 * aufgerufen.
 */

/* --------------------------------------------------------------------------
   Listen und Karten
   -------------------------------------------------------------------------- */

.ua24-archive__title {
	margin-bottom: 0.25rem;
}

.ua24-archive__meta,
.ua24-article__meta,
.ua24-card__meta {
	color: var(--ua24-muted);
	font-size: 0.9375rem;
}

.ua24-list {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	margin-block: 1.5rem;
}

.ua24-card {
	padding: 1.25rem;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	background: var(--ua24-bg);
}

.ua24-card__title {
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

.ua24-card__title a {
	text-decoration: none;
}

.ua24-card__title a:hover {
	text-decoration: underline;
}

.ua24-card__excerpt {
	color: var(--ua24-muted);
	margin-bottom: 0;
}

.ua24-empty {
	padding: 1.25rem;
	background: var(--ua24-bg-soft);
	border-radius: var(--ua24-radius);
}

/* --------------------------------------------------------------------------
   Schaltflaechen und Formulare
   -------------------------------------------------------------------------- */

.ua24-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border-radius: var(--ua24-radius);
	background: var(--ua24-brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.ua24-button:hover {
	background: var(--ua24-brand-dark);
	color: #fff;
}

.ua24-content input[type="search"],
.ua24-content input[type="text"],
.ua24-content input[type="email"],
.ua24-content textarea {
	min-height: 44px;
	width: 100%;
	max-width: 28rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	font: inherit;
	color: var(--ua24-text);
	background: var(--ua24-bg);
}

.ua24-content .search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-block: 1.5rem;
}

.ua24-content .search-form label {
	flex: 1 1 18rem;
}

.ua24-content .search-submit {
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: var(--ua24-radius);
	background: var(--ua24-brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ua24-content .search-submit:hover {
	background: var(--ua24-brand-dark);
}

/* --------------------------------------------------------------------------
   Blaetternavigation
   -------------------------------------------------------------------------- */

.ua24-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.ua24-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding-inline: 0.5rem;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	text-decoration: none;
	color: var(--ua24-text);
}

.ua24-pagination .page-numbers:hover {
	border-color: var(--ua24-brand-ink);
	color: var(--ua24-brand-ink);
}

.ua24-pagination .page-numbers.current {
	background: var(--ua24-brand);
	border-color: var(--ua24-brand);
	color: #fff;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.ua24-404 {
	max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Bewegung
   -------------------------------------------------------------------------- */

/*
 * Divis Basis-CSS setzt `transition-property: all !important` und laesst im
 * Kopfbereich einen Parallax-Effekt laufen — ohne Ruecksicht auf
 * prefers-reduced-motion. Auf Builder-Seiten ist das noch geladen, deshalb
 * greift die Regel hier bewusst global.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.et_parallax_bg {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Verzeichnis: Farben des Portals durchreichen
   -------------------------------------------------------------------------- */

/*
 * Web24-Directory haelt sein Frontend themeneutral und deklariert seine
 * Variablen auf einer festen Liste von Wurzelklassen. Eine Zuweisung auf
 * :root wuerde davon ueberboten — die Angleichung muss deshalb dieselben
 * Klassen treffen, und das `html`-Vorzeichen sichert den Vorrang, weil das
 * Plugin-CSS erst beim Rendern des Shortcodes eingebunden wird und damit NACH
 * diesem Stylesheet steht.
 *
 * --ua24-brand haelt auf Weiss 5,07:1 und taugt damit auch als Flaeche mit
 * weisser Schrift.
 */
html .w24dir-home,
html .w24dir-single,
html .w24dir-archive,
html .w24dir-search,
html .w24dir-results,
html .w24dir-listings,
html .w24dir-leadform,
html .w24dir-submit,
html .w24dir-mylistings,
html .w24dir-claim,
html .w24dir-login-required,
html .w24dir-latest-reviews,
html .w24dir-reviewform {
	--w24dir-accent: var(--ua24-brand);
	--w24dir-accent-ink: var(--ua24-brand-ink);
}

/*
 * Symbole aus dem Inline-Sprite. Sie erben Groesse und Farbe vom Umfeld -
 * deshalb width/height in em und fill:currentColor im Markup.
 *
 * HIER STEHT BEWUSST KEIN `display`. Diese Datei wird NACH Tailwind
 * zusammengezogen, und `.ua24-icon` haette dieselbe Spezifitaet wie Tailwinds
 * `.hidden` (beides 0,1,0) - bei Gleichstand gewinnt die spaetere Regel.
 * Ergebnis war ein Hell/Dunkel-Schalter, der Mond UND Sonne gleichzeitig
 * zeigte, weil `hidden dark:block` wirkungslos blieb. Tailwinds Preflight
 * setzt fuer svg ohnehin `display: block`.
 */
.ua24-icon {
	vertical-align: middle;
	flex: none;
}

/* --------------------------------------------------------------------------
   Portalweite Suche (search.php)
   -------------------------------------------------------------------------- */

/*
 * HANDGESCHRIEBEN AUF EIGENEN KLASSENNAMEN, nicht als Tailwind-Utilities:
 * Diese Datei wird NACH dem Tailwind-Lauf angehaengt und faellt selbst nicht
 * hinein. Eine Utility, die zum Bauzeitpunkt in keiner gescannten Vorlage
 * stand, landet nicht im Stylesheet und wird stillschweigend ignoriert —
 * dieselbe Begruendung wie bei listing.css und artikel.css.
 *
 * Die Trefferliste ist eine LISTE, kein Kartenraster: Vier verschiedene
 * Inhaltsarten in gleich grossen Kacheln taeuschen eine Gleichrangigkeit vor,
 * die es nicht gibt. Untereinander liest man sie in Relevanzreihenfolge.
 */

.ua24-suche__zahl {
	margin-top: .5rem;
	color: var(--ua24-muted);
	font-size: .9375rem;
}

.ua24-suche__form {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
	max-width: 40rem;
}

/*
 * `input[type=search]` statt `.ua24-suche__form input`: Divis Stylesheet traegt
 * `input[type=text] { padding: 2px }` (0,1,1) und laege auf den Divi-gebauten
 * Seiten darueber. Der Typ steht hier ohnehin fest.
 */
.ua24-suche__form input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .75rem 1rem;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	background: var(--ua24-bg);
	color: inherit;
	font: inherit;
}

.ua24-suche__form input[type="search"]:focus-visible {
	outline: 2px solid var(--ua24-brand-ink);
	outline-offset: 1px;
	border-color: var(--ua24-brand-ink);
}

.ua24-suche__form button {
	padding: .75rem 1.5rem;
	border: 0;
	border-radius: var(--ua24-radius);
	background: var(--ua24-brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ua24-suche__form button:hover {
	background: var(--ua24-brand-dark);
}

/* ------------------------------------------------------------ Filterknoepfe */

.ua24-suche__filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
}

.ua24-suche__knopf {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .4rem 1rem;
	border: 1px solid var(--ua24-line);
	border-radius: 999px;
	background: var(--ua24-bg);
	color: var(--ua24-text);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 600;
}

.ua24-suche__knopf:hover {
	border-color: var(--ua24-brand-ink);
	color: var(--ua24-brand-ink);
}

.ua24-suche__knopf.is-aktiv {
	background: var(--ua24-brand);
	border-color: var(--ua24-brand);
	color: #fff;
}

/*
 * Die Zahl steht auf getoenter Flaeche statt in Grau: Auf dem aktiven,
 * blauen Knopf waere grauer Text auf Blau nicht mehr lesbar (2,3:1).
 * `color: inherit` mit halbdurchsichtigem Grund haelt beide Zustaende ueber
 * der Schwelle.
 */
.ua24-suche__knopf-zahl {
	padding: 0 .45rem;
	border-radius: 999px;
	background: rgb(0 0 0 / .07);
	color: inherit;
	font-size: .8125rem;
	font-weight: 700;
}

.ua24-suche__knopf.is-aktiv .ua24-suche__knopf-zahl {
	background: rgb(255 255 255 / .22);
}

/* ------------------------------------------------------------- Trefferliste */

.ua24-suche__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ua24-line);
}

.ua24-suche__treffer {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--ua24-line);
}

/*
 * Bildkasten mit fester Groesse und `object-fit: cover`.
 *
 * QUADRATISCH, NICHT IM SEITENVERHAELTNIS DES BILDES: In derselben Liste
 * stehen Firmenlogos (hochkant), Branchenmotive (3:2) und Artikelbilder (16:9)
 * untereinander. Ohne festen Kasten haetten die Zeilen unterschiedlich breite
 * Bilder, und die Textspalte begaenne bei jeder Zeile woanders.
 *
 * Der Kasten faellt weg, wenn es kein Bild gibt — ein leerer Platzhalter waere
 * fuenfzehnmal untereinander auffaelliger als eine Zeile, die links beginnt.
 */
.ua24-suche__bild {
	flex: none;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	background: var(--ua24-bg-soft);
}

.ua24-suche__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Der Platzhalter fuer Treffer ohne Bild. Gedaempft und ohne eigene Farbe: Er
 * haelt die Flucht der Textspalte, soll aber nicht mit den echten Bildern
 * daneben um Aufmerksamkeit streiten.
 */
.ua24-suche__bild--leer {
	display: grid;
	place-items: center;
	color: var(--ua24-muted);
	font-size: 1.75rem;
}

/* `min-width: 0` ist Pflicht: Ohne das laesst ein Flex-Kind seinen Inhalt
   nicht umbrechen, und ein langer Firmenname schoebe den Kasten aus der
   Zeile. */
.ua24-suche__inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 480px) {
	.ua24-suche__bild {
		width: 3.25rem;
		height: 3.25rem;
	}
}

/*
 * Das Kennzeichen ist Grossbuchstaben-klein statt eines farbigen Etiketts:
 * Bei vier Arten nebeneinander waeren vier Farben ein Rateverfahren, und die
 * Markenfarbe ist auf dieser Seite schon fuer den aktiven Filter vergeben.
 */
.ua24-suche__kennung {
	margin: 0 0 .25rem;
	color: var(--ua24-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ua24-suche__titel {
	margin: 0 0 .25rem;
	font-size: 1.125rem;
	line-height: 1.35;
}

.ua24-suche__titel a {
	color: inherit;
	text-decoration: none;
}

.ua24-suche__titel a:hover,
.ua24-suche__titel a:focus-visible {
	color: var(--ua24-brand-ink);
	text-decoration: underline;
}

.ua24-suche__meta {
	margin: 0;
	color: var(--ua24-muted);
	font-size: .9375rem;
}

.ua24-suche__auszug {
	margin: .35rem 0 0;
	color: var(--ua24-muted);
}

/* ----------------------------------------------------- Hinweis Umkreissuche */

.ua24-suche__hinweis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ua24-line);
	border-radius: var(--ua24-radius);
	background: var(--ua24-bg-soft);
}

.ua24-suche__hinweis p {
	margin: 0;
	max-width: 46ch;
}

.ua24-suche__hinweis-knopf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem 1.25rem;
	border-radius: var(--ua24-radius);
	background: var(--ua24-brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ua24-suche__hinweis-knopf:hover {
	background: var(--ua24-brand-dark);
}

/* --------------------------------------------------------------------------
   Dunkelmodus
   -------------------------------------------------------------------------- */

/*
 * ALLES UEBER DIE TOKEN, KEINE EINZELREGELN. Jede Komponente in dieser Datei
 * bezieht ihre Farben aus --ua24-text, --ua24-muted, --ua24-line, --ua24-bg,
 * --ua24-bg-soft und --ua24-brand-ink. Werden die sechs umdefiniert, folgt der
 * Rest von selbst — Karten, Formulare, Blaetternavigation, Trefferliste.
 * Die Ausnahmen unten sind die drei Stellen, an denen eine Farbe fest im
 * Regelwerk steht.
 *
 * ZWEI FASSUNGEN, weil das Theme mit der KLASSENSTRATEGIE arbeitet
 * (tailwind.config.js: darkMode 'class'; header.php setzt html.dark bzw.
 * html.light), die Systemeinstellung aber ebenfalls greifen soll, solange
 * niemand von Hand umgeschaltet hat.
 *
 * NICHT AUF DIVI-SEITEN (`body.ua24-divi-seite`, gesetzt in functions.php):
 * Deren Abschnitte tragen ihre Hintergrundfarbe fest im Shortcode —
 * /impressum/ ein ausdrueckliches #ffffff. Helle Schrift und ein aufgehellter
 * Linkton auf weisser Flaeche waeren unlesbar (2,1:1). Kopf und Fuss folgen
 * dem Dunkelmodus dort trotzdem, weil sie ueber Tailwind-Klassen faerben.
 *
 * Gegengerechnet auf dem Seitengrund #0B1220 (Tailwind `night`):
 *   --ua24-text  #e6e9f2  = 15,1:1
 *   --ua24-muted #9aa3b8  =  6,9:1
 *   --ua24-brand-ink #f0a878 =  9,43:1  (fest, siehe unten)
 *   --ua24-link      #4fb3a9 =  7,45:1
 *
 * FEST STATT color-mix(): Das Vorbild mischt die Marke zu 55 % mit Weiss.
 * Bei diesem Orangebraun ergaebe das #cf9c81 mit nur 7,78:1, und die
 * color-mix-Zeile schluege den gemessenen Wert in jedem neuen Browser.
 * Wer die Markenfarbe aendert, rechnet diesen Wert neu nach.
 */

@media (prefers-color-scheme: dark) {
	/* Ohne die Divi-Ausnahme: Kopf und Fuss sind dort ebenfalls dunkel. */
	:where(html:not(.light)) {
		--ua24-brand-ink-kopf: #f0a878;
	}

	:where(html:not(.light)) body:not(.ua24-divi-seite) {
		--ua24-text: #e6e9f2;
		--ua24-muted: #9aa3b8;
		--ua24-line: rgb(255 255 255 / .12);
		--ua24-bg: #111a2e;
		--ua24-bg-soft: #131c31;
		--ua24-brand-ink: #f0a878;
		--ua24-link: #4fb3a9;
		--ua24-link-hover: #7fcbc2;
	}
}

html.dark {
	--ua24-brand-ink-kopf: #f0a878;
}

html.dark body:not(.ua24-divi-seite) {
	--ua24-text: #e6e9f2;
	--ua24-muted: #9aa3b8;
	--ua24-line: rgb(255 255 255 / .12);
	--ua24-bg: #111a2e;
	--ua24-bg-soft: #131c31;
	--ua24-brand-ink: #f0a878;
	--ua24-link: #4fb3a9;
	--ua24-link-hover: #7fcbc2;
}

/*
 * Die drei Stellen mit fester Farbe.
 *
 * 1. Die Zahl am Filterknopf liegt auf einer abgetoenten Flaeche. Im Hellmodus
 *    ist das Schwarz mit 7 Prozent; auf dunklem Grund waere das unsichtbar.
 * 2. `body` traegt seinen Grund ueber Tailwind (`dark:bg-night`), nicht ueber
 *    --ua24-bg — deshalb steht --ua24-bg im Dunkelmodus fuer die KARTEN und ist
 *    absichtlich heller als der Seitengrund.
 * 3. Der Bildkasten der Trefferliste braucht einen sichtbaren Rahmen, weil
 *    viele Branchenmotive selbst hell sind.
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) body:not(.ua24-divi-seite) .ua24-suche__knopf-zahl {
		background: rgb(255 255 255 / .12);
	}
}

html.dark body:not(.ua24-divi-seite) .ua24-suche__knopf-zahl {
	background: rgb(255 255 255 / .12);
}

/* --------------------------------------------------------------------------
   Startseite: „Betriebe nach Ort" — Laender sind ein Schalter, Orte sind Links
   -------------------------------------------------------------------------- */

/*
 * DAS PROBLEM: Beide Zeilen des Abschnitts kommen aus dem Plugin als
 * WEISSE PILLEN mit demselben Rand, demselben Radius und derselben
 * Schriftgroesse — oben sechzehn Bundeslaender, darunter die Orte des
 * gewaehlten Landes. Auf dem grauen Band der Startseite sehen sie damit aus
 * wie EINE fortlaufende Sammlung von Marken, und niemand erkennt, dass die
 * obere Zeile umschaltet, waehrend die untere wegfuehrt.
 *
 * DIE LOESUNG IST DIE FORM, NICHT DIE FARBE: Die Laender bekommen eine
 * gemeinsame weisse Schiene und liegen darin als randlose Schalter — das
 * bekannte Bild eines Segment-Schalters. Die Orte bleiben, was sie sind:
 * einzelne Pillen mit eigenem Rand und Abstand dazwischen. Ueber Farbe allein
 * waere der Unterschied fuer Farbfehlsichtige keiner.
 *
 * WARUM `html` DAVOR: Das Plugin-CSS wird erst beim Rendern des Shortcodes
 * eingebunden und steht damit NACH diesem Stylesheet. Bei gleicher
 * Spezifitaet gewaenne es. Dieselbe Begruendung wie beim Farbblock weiter
 * oben.
 *
 * NUR HIER, NICHT IM PLUGIN: Die anderen Portale der Familie zeigen denselben
 * Abschnitt. Eine Aenderung im Plugin wuerde ihr Aussehen mitverschieben,
 * ohne dass jemand danach gefragt hat.
 */
html .w24dir-home__region-tabs {
	gap: 0.25rem;
	padding: 0.3rem;
	border: 1px solid var(--w24dir-border);
	border-radius: 14px;
	background: var(--w24dir-surface-card);
}

html .w24dir-home__region-tab {
	border-color: transparent;
	background: transparent;
	border-radius: 10px;
	padding: 0.35rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/*
 * Der Zeiger faerbt die Flaeche, nicht den Rand: Ein Rand in der Schiene
 * saehe aus wie ein zweiter, verrutschter Kasten.
 */
html .w24dir-home__region-tab:hover {
	border-color: transparent;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

html .w24dir-home__region-tab[aria-selected="true"] {
	border-color: transparent;
	border-radius: 10px;
}

/*
 * Die Orte ruecken vom Schalter ab. Ohne diesen Abstand kleben Schiene und
 * erste Pillenreihe aneinander, und der Bruch zwischen „umschalten" und
 * „hingehen" faellt wieder weg.
 */
html .w24dir-home__region-panel {
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Eigene Bausteine: Partnerleiste und Umzugsfahrplan
   -------------------------------------------------------------------------- */

/*
 * HANDGESCHRIEBEN STATT TAILWIND, aus einem Grund, der nur hier zaehlt: Die
 * Farben laufen ueber die Token (--ua24-text, --ua24-muted, --ua24-line,
 * --ua24-bg, --ua24-brand-ink, --ua24-link). Die folgen dem Dunkelmodus ueber
 * BEIDE Schalter, `prefers-color-scheme` und `html.dark` (Block "Dunkelmodus"
 * weiter oben). Tailwinds `dark:` kennt nur die Klasse.
 *
 * SPEZIFITAET (0,2,0): Beide Bausteine stehen auf der Startseite im Rahmen
 * `.w24dir-home` des Plugins, und dessen Regeln `.w24dir-home h2` (0,1,1)
 * werden NACH diesem Stylesheet geladen. Mit dem Wurzelnamen davor gewinnen
 * die eigenen Regeln unabhaengig von der Reihenfolge.
 *
 * Masse und Abstaende folgen der Startseite des Plugins (Bahn 1200 px,
 * Abschnittsabstand --w24dir-home-gap), damit die Bausteine nicht wie
 * Fremdkoerper zwischen deren Abschnitten stehen. Ausserhalb der Startseite
 * greifen die Rueckfallwerte.
 */

.ua24-partnerleiste,
.ua24-fahrplan {
	--ua24-baustein-flaeche: #f8f1ed;
	--ua24-baustein-flaeche: color-mix(in srgb, var(--ua24-brand) 8%, #ffffff);
	--ua24-baustein-schatten: 0 1px 2px rgb(125 53 16 / .06), 0 8px 24px -12px rgb(125 53 16 / .18);
	padding-block: var(--w24dir-home-gap, clamp(2.5rem, 6vw, 5rem));
	color: var(--ua24-text);
}

.ua24-partnerleiste .ua24-partnerleiste__innen,
.ua24-fahrplan .ua24-fahrplan__innen {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--w24dir-container, 1200px);
	margin-inline: auto;
	padding-left: max(var(--w24dir-container-pad, 1rem), env(safe-area-inset-left));
	padding-right: max(var(--w24dir-container-pad, 1rem), env(safe-area-inset-right));
}

/* Kennzeichnung "Anzeige": neben der Ueberschrift, nicht darunter versteckt. */
.ua24-anzeige {
	display: inline-block;
	margin-left: .6rem;
	padding: .15rem .55rem;
	border: 1px solid var(--ua24-line);
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.4;
	vertical-align: middle;
	color: var(--ua24-muted);
}

/* Knopf ausserhalb von Tailwind, fuer die Bausteine. Flaeche #a84b1a, weisse
   Schrift 5,70:1; beim Zeigen #7d3510, 8,79:1. */
.ua24-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	border-radius: 1rem;
	background: var(--ua24-brand);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease;
}

.ua24-knopf:hover {
	background: var(--ua24-brand-dark);
	color: #fff;
}

.ua24-knopf:active {
	transform: translateY(1px);
}

/* ---- Partnerleiste ---- */

.ua24-partnerleiste .ua24-partnerleiste__kopf {
	max-width: 44rem;
	margin-bottom: 2rem;
}

.ua24-partnerleiste .ua24-partnerleiste__titel {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ua24-text);
}

.ua24-partnerleiste .ua24-partnerleiste__text {
	margin: .6rem 0 0;
	color: var(--ua24-muted);
	line-height: 1.6;
}

/*
 * SECHS KACHELN, DREI STUFEN: eine Spalte auf dem Telefon, zwei ab 640 px,
 * drei ab 1024 px. Sechs in einer Reihe waeren bei 1200 px keine 190 px
 * breit, und der Beschreibungstext braeche Wort fuer Wort um.
 */
.ua24-partnerleiste .ua24-partnerleiste__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ua24-partnerleiste .ua24-partnerleiste__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ua24-partnerleiste .ua24-partnerleiste__liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ua24-partnerleiste .ua24-partnerleiste__eintrag {
	margin: 0;
	display: flex;
}

/*
 * Die ganze Kachel ist der Link: groesste Klickflaeche, ein Tabulatorhalt je
 * Partner. Symbol links, Text rechts.
 */
.ua24-partnerleiste .ua24-partnerleiste__kachel {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"symbol name"
		"symbol beschreibung"
		"symbol knopf";
	align-content: start;
	column-gap: 1rem;
	row-gap: .25rem;
	width: 100%;
	padding: 1.25rem;
	border: 1px solid var(--ua24-line);
	border-radius: 1.25rem;
	background: var(--ua24-bg);
	color: var(--ua24-text);
	text-decoration: none;
	box-shadow: var(--ua24-baustein-schatten);
	transition: border-color .2s ease, transform .2s ease;
}

.ua24-partnerleiste .ua24-partnerleiste__kachel:hover {
	border-color: var(--ua24-brand-ink);
	color: var(--ua24-text);
	transform: translateY(-2px);
}

.ua24-partnerleiste .ua24-partnerleiste__kachel:focus-visible {
	outline: 3px solid var(--ua24-brand-ink);
	outline-offset: 3px;
}

.ua24-partnerleiste .ua24-partnerleiste__symbol {
	grid-area: symbol;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: var(--ua24-baustein-flaeche);
	color: var(--ua24-brand);
	font-size: 1.5rem;
}

.ua24-partnerleiste .ua24-partnerleiste__name {
	grid-area: name;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.ua24-partnerleiste .ua24-partnerleiste__beschreibung {
	grid-area: beschreibung;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--ua24-muted);
}

.ua24-partnerleiste .ua24-partnerleiste__knopf {
	grid-area: knopf;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ua24-link);
}

.ua24-partnerleiste .ua24-partnerleiste__kachel:hover .ua24-partnerleiste__knopf {
	color: var(--ua24-link-hover);
	text-decoration: underline;
}

/* ---- Umzugsfahrplan ---- */

/* Getoentes Band, damit die Zeitleiste sich von den weissen Abschnitten
   davor und danach absetzt, ohne das Theme zu wechseln. */
.ua24-fahrplan {
	background: var(--ua24-baustein-flaeche);
	border-block: 1px solid var(--ua24-line);
}

.ua24-fahrplan .ua24-fahrplan__kopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.ua24-fahrplan .ua24-fahrplan__kopf {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.ua24-fahrplan .ua24-fahrplan__titel {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ua24-text);
}

.ua24-fahrplan .ua24-fahrplan__text {
	margin: .6rem 0 0;
	max-width: 40rem;
	color: var(--ua24-muted);
	line-height: 1.6;
}

/*
 * DIE ZEITLEISTE.
 *
 * Telefon und Tablett: senkrecht, eine Linie links, auf ihr je Schritt ein
 * Punkt. Ab 1024 px: zwei Reihen zu vier, eine farbige Oberkante an jeder
 * Karte. Die Linie zeigt die Richtung der Zeit und ist kein Zierbild.
 */
.ua24-fahrplan .ua24-fahrplan__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 0 .4rem;
	padding: 0 0 0 1.25rem;
	list-style: none;
	border-left: 2px solid #d8ae98;
	border-left-color: color-mix(in srgb, var(--ua24-brand) 45%, transparent);
}

@media (min-width: 1024px) {
	.ua24-fahrplan .ua24-fahrplan__liste {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem 1.25rem;
		margin: 0;
		padding: 0;
		border-left: 0;
	}
}

.ua24-fahrplan .ua24-fahrplan__schritt {
	position: relative;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--ua24-line);
	border-radius: 1.25rem;
	background: var(--ua24-bg);
	box-shadow: var(--ua24-baustein-schatten);
}

/* Punkt auf der Linie, senkrechte Fassung. */
.ua24-fahrplan .ua24-fahrplan__schritt::before {
	content: "";
	position: absolute;
	top: 1.55rem;
	left: calc(-1.25rem - 8px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ua24-brand);
	box-shadow: 0 0 0 3px var(--ua24-baustein-flaeche);
}

@media (min-width: 1024px) {
	.ua24-fahrplan .ua24-fahrplan__schritt {
		border-top: 3px solid #d8ae98;
		border-top-color: color-mix(in srgb, var(--ua24-brand) 45%, transparent);
	}

	.ua24-fahrplan .ua24-fahrplan__schritt::before {
		display: none;
	}
}

/* Der Umzugstag selbst traegt die volle Markenfarbe. */
.ua24-fahrplan .ua24-fahrplan__schritt--tag {
	border-color: var(--ua24-brand-ink);
}

@media (min-width: 1024px) {
	.ua24-fahrplan .ua24-fahrplan__schritt--tag {
		border-top-color: var(--ua24-brand);
	}
}

.ua24-fahrplan .ua24-fahrplan__marke {
	display: inline-block;
	margin: 0 0 .5rem;
	padding: .1rem .6rem;
	border-radius: 999px;
	background: var(--ua24-baustein-flaeche);
	color: var(--ua24-brand-ink);
	font-size: .875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.ua24-fahrplan .ua24-fahrplan__schritt--tag .ua24-fahrplan__marke {
	background: var(--ua24-brand);
	color: #fff;
}

.ua24-fahrplan .ua24-fahrplan__schritt-titel {
	margin: 0 0 .75rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ua24-text);
}

.ua24-fahrplan .ua24-fahrplan__aufgaben {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
	line-height: 1.45;
}

.ua24-fahrplan .ua24-fahrplan__aufgaben li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem;
	margin: 0;
}

.ua24-fahrplan .ua24-fahrplan__aufgaben .ua24-icon {
	margin-top: .2em;
	color: var(--ua24-link);
}

.ua24-fahrplan .ua24-fahrplan__hinweis {
	margin: 1rem 0 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--ua24-line);
	font-size: .875rem;
	line-height: 1.45;
	color: var(--ua24-muted);
}

.ua24-fahrplan .ua24-fahrplan__hinweis a {
	color: var(--ua24-link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.ua24-fahrplan .ua24-fahrplan__hinweis a:hover {
	color: var(--ua24-link-hover);
}

.ua24-fahrplan .ua24-fahrplan__hinweis a:focus-visible {
	outline: 2px solid var(--ua24-link);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * DUNKELMODUS DER BAUSTEINE, BEIDE SCHALTER.
 *
 * Die Token drehen sich oben von selbst. Was hier bleibt, sind die Werte mit
 * fester Mischung: die getoente Flaeche (8 % Marke in Weiss waere im Dunkeln
 * ein heller Fleck) und der Schatten (braun auf fast Schwarz ist unsichtbar,
 * also weg). Die Tagesmarke bleibt #a84b1a mit weisser Schrift, 5,70:1; das
 * Symbol der Kacheln wechselt auf brand-ink (#f0a878, 8,73:1 auf #111a2e).
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) body:not(.ua24-divi-seite) .ua24-partnerleiste,
	:where(html:not(.light)) body:not(.ua24-divi-seite) .ua24-fahrplan {
		--ua24-baustein-flaeche: rgb(255 255 255 / .05);
		--ua24-baustein-schatten: none;
	}

	:where(html:not(.light)) body:not(.ua24-divi-seite) .ua24-partnerleiste .ua24-partnerleiste__symbol {
		color: var(--ua24-brand-ink);
	}
}

html.dark body:not(.ua24-divi-seite) .ua24-partnerleiste,
html.dark body:not(.ua24-divi-seite) .ua24-fahrplan {
	--ua24-baustein-flaeche: rgb(255 255 255 / .05);
	--ua24-baustein-schatten: none;
}

html.dark body:not(.ua24-divi-seite) .ua24-partnerleiste .ua24-partnerleiste__symbol {
	color: var(--ua24-brand-ink);
}

/* Bewegung nur, wenn sie erwuenscht ist. */
@media (prefers-reduced-motion: reduce) {
	.ua24-partnerleiste .ua24-partnerleiste__kachel,
	.ua24-knopf {
		transition: none;
	}

	.ua24-partnerleiste .ua24-partnerleiste__kachel:hover,
	.ua24-knopf:active {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Nachtrag aus der Pruefung gegen die Web Interface Guidelines (27.09.2026)
   -------------------------------------------------------------------------- */

/*
 * SPRUNGZIELE UNTER DEM KLEBENDEN KOPF. Der Knopf "Angebote erhalten" fuehrt
 * auf /#anfrage, Partnerleiste und Fahrplan haben eigene Kennungen. Ohne
 * Abstand landete die Ueberschrift des Ziels unter der 68 Pixel hohen,
 * klebenden Kopfzeile. 5.5rem = Kopf plus Luft.
 */
html {
	scroll-padding-top: 5.5rem;
}

/*
 * NATIVE BEDIENELEMENTE IM DUNKELMODUS. Ohne `color-scheme` zeichnet der
 * Browser Bildlaufleisten, Auswahllisten und Datumsfelder hell auf dunkler
 * Seite. Beide Schalter, wie ueberall.
 */
@media (prefers-color-scheme: dark) {
	html:not(.light) {
		color-scheme: dark;
	}
}

html.dark {
	color-scheme: dark;
}

html.light {
	color-scheme: light;
}

/* Ueberschriften der Bausteine ohne einzelnes Wort in der letzten Zeile. */
.ua24-partnerleiste .ua24-partnerleiste__titel,
.ua24-fahrplan .ua24-fahrplan__titel,
.ua24-fahrplan .ua24-fahrplan__schritt-titel {
	text-wrap: balance;
}

/* Kein Doppeltipp-Zoom-Warten auf Kacheln und Knoepfen. */
.ua24-knopf,
.ua24-partnerleiste .ua24-partnerleiste__kachel {
	touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   Umzugsmaske (inc-umzugsmaske.php): Anfrageleiste im Aufmacher der
   Startseite und Shortcode [ua24_umzugsmaske]
   -------------------------------------------------------------------------- */

/*
 * FORMENREGEL: Flaeche 1.25rem wie die Kacheln der Partnerleiste, Knopf 1rem
 * wie .ua24-knopf, Felder und Reiter .75rem.
 *
 * FELDRAND MIT 3:1. Die Linienfarbe --ua24-line (#dfe3ea) liegt auf Weiss bei
 * 1,3:1 und reicht fuer Trennlinien, nicht fuer die Grenze eines Eingabefelds
 * (WCAG 1.4.11). #858c9e kommt auf Weiss auf 3,3:1, im Dunkelmodus Weiss mit
 * 38 % auf der Karte #111a2e auf rund 3,6:1.
 *
 * SPEZIFITAET: `.ua24-content input[type="text"]` (0,2,1) weiter oben setzt
 * Hoehe, Rand und max-width 28rem fuer Suchfelder. Die Feldregeln hier haengen
 * deshalb an Klasse plus Attribut (0,3,0) und gewinnen unabhaengig von der
 * Reihenfolge.
 *
 * CONTAINER-ABFRAGE statt Bildschirmbreite: Die Maske steht im Aufmacher ueber
 * die ganze Bahn, als Shortcode aber vielleicht in einer schmalen Spalte. Sie
 * richtet sich nach ihrer eigenen Breite.
 */
.ua24-umzugsmaske {
	--ua24-feld-rand: #858c9e;
	--ua24-feld-grund: var(--ua24-bg-soft, #f5f7fa);
	--ua24-maske-flaeche: #f8f1ed;
	--ua24-maske-flaeche: color-mix(in srgb, var(--ua24-brand) 8%, #ffffff);
	--ua24-maske-schatten: 0 1px 2px rgb(125 53 16 / .06), 0 14px 36px -16px rgb(125 53 16 / .28);
	--ua24-fehler: #b42318;
	container-type: inline-size;
	box-sizing: border-box;
	min-width: 0;
	color: var(--ua24-text);
}

.ua24-umzugsmaske *,
.ua24-umzugsmaske *::before,
.ua24-umzugsmaske *::after {
	box-sizing: border-box;
}

.ua24-umzugsmaske--block {
	margin-block: 2rem;
}

.ua24-umzugsmaske .ua24-umzugsmaske__titel {
	margin: 0 0 1rem;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ua24-text);
}

.ua24-umzugsmaske .ua24-umzugsmaske__form {
	margin: 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--ua24-line);
	border-radius: 1.25rem;
	background: var(--ua24-bg);
	box-shadow: var(--ua24-maske-schatten);
}

.ua24-umzugsmaske .ua24-umzugsmaske__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Reiter: vier Optionsfelder, gezeichnet als Reiter ---- */

.ua24-umzugsmaske .ua24-umzugsmaske__arten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	min-width: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

@container (min-width: 36rem) {
	.ua24-umzugsmaske .ua24-umzugsmaske__arten {
		display: flex;
		flex-wrap: wrap;
	}
}

.ua24-umzugsmaske .ua24-umzugsmaske__art {
	position: relative;
	display: flex;
	min-width: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Fuer Tastatur und Vorlesehilfe vorhanden, fuer das Auge unsichtbar. Liegt
   ueber der ganzen Flaeche, damit Tippen und Klicken ueberall treffen. */
.ua24-umzugsmaske .ua24-umzugsmaske__art-wahl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ua24-umzugsmaske .ua24-umzugsmaske__art-flaeche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	min-height: 2.75rem;
	padding: .5rem .95rem;
	border: 1px solid var(--ua24-feld-rand);
	border-radius: .75rem;
	background: var(--ua24-bg);
	color: var(--ua24-text);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	/* "Klaviertransport" in der halben Breite eines 320-px-Telefons. */
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ua24-umzugsmaske .ua24-umzugsmaske__art-flaeche .ua24-icon {
	flex: none;
	font-size: 1.25rem;
}

.ua24-umzugsmaske .ua24-umzugsmaske__art:hover .ua24-umzugsmaske__art-flaeche {
	border-color: var(--ua24-brand-ink);
}

/* Gewaehlt: getoente Flaeche, Markenfarbe, doppelter Rand. Nicht nur Farbe:
   Der Rand wird sichtbar dicker. #a84b1a auf #f8f1ed = 5,10:1. */
.ua24-umzugsmaske .ua24-umzugsmaske__art-wahl:checked + .ua24-umzugsmaske__art-flaeche {
	border-color: var(--ua24-brand-ink);
	box-shadow: inset 0 0 0 1px var(--ua24-brand-ink);
	background: var(--ua24-maske-flaeche);
	color: var(--ua24-brand-ink);
	font-weight: 700;
}

.ua24-umzugsmaske .ua24-umzugsmaske__art-wahl:focus-visible + .ua24-umzugsmaske__art-flaeche {
	outline: 3px solid var(--ua24-brand-ink);
	outline-offset: 2px;
}

/* ---- Felder: gestapelt, ab 36rem zwei Spalten, ab 52rem eine Zeile ---- */

.ua24-umzugsmaske .ua24-umzugsmaske__felder {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .875rem;
	align-items: end;
}

@container (min-width: 36rem) {
	.ua24-umzugsmaske .ua24-umzugsmaske__felder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ua24-umzugsmaske .ua24-umzugsmaske__knopf {
		grid-column: 1 / -1;
	}
}

@container (min-width: 52rem) {
	.ua24-umzugsmaske .ua24-umzugsmaske__felder {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto;
		gap: .75rem;
	}

	.ua24-umzugsmaske .ua24-umzugsmaske__knopf {
		grid-column: auto;
		width: auto;
	}
}

.ua24-umzugsmaske .ua24-umzugsmaske__feld {
	min-width: 0;
	margin: 0;
}

.ua24-umzugsmaske .ua24-umzugsmaske__label {
	display: block;
	margin: 0 0 .375rem;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ua24-text);
}

.ua24-umzugsmaske .ua24-umzugsmaske__eingabe[name] {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 3rem;
	margin: 0;
	padding: .625rem .85rem;
	border: 1px solid var(--ua24-feld-rand);
	border-radius: .75rem;
	background: var(--ua24-feld-grund);
	color: var(--ua24-text);
	font: inherit;
	/* 16 px: darunter zoomt iOS beim Antippen in die Seite. */
	font-size: 1rem;
	line-height: 1.25;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ua24-umzugsmaske .ua24-umzugsmaske__eingabe[name]::placeholder {
	color: var(--ua24-muted);
	opacity: 1;
}

.ua24-umzugsmaske .ua24-umzugsmaske__eingabe[name]:focus {
	border-color: var(--ua24-brand-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua24-brand-ink) 22%, transparent);
}

/* Fehler erst nach einer Eingabe, nicht schon beim Laden. */
.ua24-umzugsmaske .ua24-umzugsmaske__eingabe[name]:user-invalid {
	border-color: var(--ua24-fehler);
	box-shadow: inset 0 0 0 1px var(--ua24-fehler);
}

/* Einheit "m²" im Feld. */
.ua24-umzugsmaske .ua24-umzugsmaske__einheit-rahmen {
	position: relative;
	display: block;
}

.ua24-umzugsmaske .ua24-umzugsmaske__einheit-rahmen .ua24-umzugsmaske__eingabe[name] {
	padding-right: 2.75rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ua24-umzugsmaske .ua24-umzugsmaske__einheit-rahmen .ua24-umzugsmaske__eingabe[name]::-webkit-inner-spin-button,
.ua24-umzugsmaske .ua24-umzugsmaske__einheit-rahmen .ua24-umzugsmaske__eingabe[name]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ua24-umzugsmaske .ua24-umzugsmaske__einheit {
	position: absolute;
	top: 50%;
	right: .85rem;
	transform: translateY(-50%);
	color: var(--ua24-muted);
	font-size: .9375rem;
	font-weight: 600;
	pointer-events: none;
}

.ua24-umzugsmaske .ua24-umzugsmaske__knopf {
	width: 100%;
	min-height: 3rem;
	padding-inline: 1.5rem;
	border: 0;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

/* ---- Haekchen ---- */

.ua24-umzugsmaske .ua24-umzugsmaske__vorteile {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--ua24-muted);
}

.ua24-umzugsmaske .ua24-umzugsmaske__vorteile li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
}

.ua24-umzugsmaske .ua24-umzugsmaske__vorteile .ua24-icon {
	flex: none;
	font-size: 1.125rem;
	color: var(--ua24-brand-ink);
}

/* ---- Im Aufmacher der Startseite ----
   Direktes Kind des Rasters .w24dir-home__hero-inner (inc-startseite.php).
   Auf dem Telefon in Quellreihenfolge: Einleitung, Maske, Karte. Ab 60rem
   (Umschaltpunkt des Plugins auf zwei Spalten) eine eigene Zeile ueber beide
   Spalten; Text und Karte ruecken von selbst in die erste Zeile. */
.w24dir-home__hero-inner > .ua24-umzugsmaske--hero {
	grid-column: 1 / -1;
}

@media (min-width: 60rem) {
	.w24dir-home__hero-inner > .ua24-umzugsmaske--hero {
		grid-row: 2;
	}
}

/* ---- Dunkelmodus, beide Schalter ---- */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) body:not(.ua24-divi-seite) .ua24-umzugsmaske {
		--ua24-feld-rand: rgb(255 255 255 / .38);
		--ua24-feld-grund: rgb(255 255 255 / .04);
		--ua24-maske-flaeche: rgb(240 168 120 / .12);
		--ua24-maske-schatten: none;
		--ua24-fehler: #f97066;
	}
}

html.dark body:not(.ua24-divi-seite) .ua24-umzugsmaske {
	--ua24-feld-rand: rgb(255 255 255 / .38);
	--ua24-feld-grund: rgb(255 255 255 / .04);
	--ua24-maske-flaeche: rgb(240 168 120 / .12);
	--ua24-maske-schatten: none;
	--ua24-fehler: #f97066;
}

@media (prefers-reduced-motion: reduce) {
	.ua24-umzugsmaske .ua24-umzugsmaske__art-flaeche,
	.ua24-umzugsmaske .ua24-umzugsmaske__eingabe[name] {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Inhaltsseiten in der vollen Bahn (Anweisung 27.09.2026)
   --------------------------------------------------------------------------
   Die Seiteninhalte aus setup/inhalte/ bringen ihren Rahmen `.ua24` mit
   max-width 64rem als eingebettetes CSS mit (Spezifitaet 0,1,0). page.php
   setzt in der breiten Bahn `ua24-seite-breit` an den Artikel; damit laeuft
   der Rahmen ueber die ganze Bahn. Absaetze bleiben durch ihre eigene Grenze
   (68ch) lesbar. */
.ua24-seite-breit .ua24 {
	max-width: none;
}