/* 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}.m-0{margin:0}.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}.list-none{list-style-type:none}.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-8{gap:2rem}.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}.overflow-x-auto{overflow-x:auto}.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(--wpb24-brand-rgb,27 128 22)/var(--tw-bg-opacity,1))}.bg-brand-50{background-color:color-mix(in srgb,var(--wpb24-brand,#1b8016) 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}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.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{padding-top:.5rem;padding-bottom:.5rem}.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(--wpb24-brand-ink-kopf,#1b8016)}.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))}.no-underline{text-decoration-line:none}.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)}.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(--wpb24-brand-rgb,27 128 22)/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(--wpb24-brand-rgb,27 128 22)/0.3)}.hover\:gap-3:hover{gap:.75rem}.hover\:border-brand:hover{--tw-border-opacity:1;border-color:rgb(var(--wpb24-brand-rgb,27 128 22)/var(--tw-border-opacity,1))}.hover\:bg-brand:hover{--tw-bg-opacity:1;background-color:rgb(var(--wpb24-brand-rgb,27 128 22)/var(--tw-bg-opacity,1))}.hover\:bg-brand-700:hover{--tw-bg-opacity:1;background-color:rgb(var(--wpb24-brand-dark-rgb,20 99 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(--wpb24-brand-ink-kopf,#1b8016)}.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(--wpb24-brand-rgb,27 128 22)/var(--tw-border-opacity,1))}.focus\:bg-brand:focus{--tw-bg-opacity:1;background-color:rgb(var(--wpb24-brand-rgb,27 128 22)/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(--wpb24-brand-rgb,27 128 22)/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(--wpb24-brand-rgb,27 128 22)/.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-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\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.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\:flex{display:flex}.xl\:hidden{display:none}}
/*
 * Gestaltung von waermepumpenberatung24.de.
 *
 * Handgeschrieben, ohne Build-Schritt. 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
 * wpb24_farb_variablen() in functions.php) — ein neues Portal bekommt seine
 * Farbgebung damit ohne Codeaenderung.
 */

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

:root {
	/* --wpb24-brand und --wpb24-brand-dark setzt functions.php. Die Werte hier sind
	   nur der Rueckfall, falls das Core-Plugin fehlt. */
	--wpb24-brand: #1b8016;
	--wpb24-brand-dark: #146310;

	/* Kontraste gegen Weiss, nachgerechnet am 05.09.2026 (WCAG 2.x, 4,5:1):
	   --wpb24-text       #1f2430 = 15,52:1
	   --wpb24-muted      #55596b =  6,94:1
	   --wpb24-brand      #1b8016 =  5,07:1  (auch als Flaeche mit weisser Schrift)
	   --wpb24-brand-dark #146310 =  7,44:1
	   Das Divi-Gruen des Portals, #23a01c, kommt auf 3,43:1 und faellt damit
	   durch — als Text auf Weiss ebenso wie als Flaeche unter weisser Schrift.
	   Deshalb ist der Markenton hier um eine Stufe abgedunkelt; erkennbar
	   bleibt dasselbe Gruen. */
	--wpb24-text: #1f2430;
	--wpb24-muted: #55596b;
	--wpb24-line: #dfe3ea;
	--wpb24-bg: #ffffff;
	--wpb24-bg-soft: #f5f7fa;

	/*
	 * DER MARKENTON ALS SCHRIFT — getrennt von der Marke als FLAECHE.
	 *
	 * Im Hellmodus sind beide gleich: #1b8016 haelt 5,07: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,70:1 und faellt
	 * durch. Ein aufgehellter Ton wiederum ist als Knopffarbe unbrauchbar,
	 * weil die weisse Schrift darauf verschwindet.
	 *
	 * Also zwei Token: --wpb24-brand bleibt die Flaeche, --wpb24-brand-ink ist die
	 * Schrift. Dieselbe Dreiteilung wie auf wertaugtwas.de.
	 */
	--wpb24-brand-ink: var(--wpb24-brand);

	/*
	 * UND DASSELBE NOCH EINMAL FUER KOPF UND FUSS.
	 *
	 * --wpb24-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 05.09.2026: #1b8016 kommt auf dem dunklen Kopf (#0B1220) auf
	 * 3,70:1 — bei 18 Pixel fett gilt die Schwelle 4,5:1, also aufhellen.
	 * #7fd47a haelt dort 10,34:1.
	 */
	--wpb24-brand-ink-kopf: var(--wpb24-brand);

	--wpb24-radius: 10px;
	--wpb24-space: 1rem;
	--wpb24-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.
	 */
	--wpb24-container-breit: 80rem;

	/* Systemschrift: keine Verbindung zu einem Fremdserver, kein Nachladen,
	   kein Text ohne Schrift beim ersten Aufbau. */
	--wpb24-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(--wpb24-bg);
	color: var(--wpb24-text);
	font-family: var(--wpb24-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. */
.wpb24-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`
 * (#146310) — 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(--wpb24-brand-ink);
	text-underline-offset: 0.15em;
}

:where(a:hover) {
	color: var(--wpb24-brand-dark);
}

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(--wpb24-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. */
.wpb24-main:focus {
	outline: none;
}

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

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

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

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

.wpb24-prose img {
	border-radius: var(--wpb24-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 wpb24_inhalt_ausgeben()).
 */
.wpb24-anfragewidget #page-container .et_pb_section,
.wpb24-anfragewidget #page-container .et_pb_row {
	width: 100%;
	max-width: none;
	padding: 0;
	background: transparent;
}

/*
 * Impressum (`.wpb24-vollbreit`, gesetzt in page.php nach
 * wpb24_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.
 */
.wpb24-vollbreit #page-container .et_pb_row {
	width: 100%;
	max-width: none;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.wpb24-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 `wpb24-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.wpb24-divi-dunkel #page-container {
		color: #e6e9f2;
	}

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

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

	/* Kaesten, die Divi selbst weiss zeichnet. */
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_toggle,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_tab,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_tabs_controls,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_tabs_controls li,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_pricing_table,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_pricing_heading,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_testimonial,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_team_member,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_blog_grid .et_pb_post,
	html:not(.light) body.wpb24-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.wpb24-divi-dunkel #page-container input[type="text"],
	html:not(.light) body.wpb24-divi-dunkel #page-container input[type="email"],
	html:not(.light) body.wpb24-divi-dunkel #page-container input[type="tel"],
	html:not(.light) body.wpb24-divi-dunkel #page-container input[type="url"],
	html:not(.light) body.wpb24-divi-dunkel #page-container input[type="number"],
	html:not(.light) body.wpb24-divi-dunkel #page-container input[type="search"],
	html:not(.light) body.wpb24-divi-dunkel #page-container textarea,
	html:not(.light) body.wpb24-divi-dunkel #page-container select {
		background-color: #131b2b;
		border-color: rgb(255 255 255 / .16);
		color: #e6e9f2;
	}

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

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

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

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

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

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

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

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

html.dark body.wpb24-divi-dunkel #page-container hr,
html.dark body.wpb24-divi-dunkel #page-container table,
html.dark body.wpb24-divi-dunkel #page-container th,
html.dark body.wpb24-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.wpb24-divi-dunkel #page-container .et_pb_menu .et-menu li a,
	html:not(.light) body.wpb24-divi-dunkel #page-container .et_pb_menu .et_mobile_menu li a {
		color: #e6e9f2;
	}
}

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

/*
 * 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.wpb24-divi-seite:not(.wpb24-divi-dunkel) article:not(.wpb24-anfragewidget) #page-container {
		color: #15171f;
	}
}

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

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

/*
 * Hier standen rund 150 Zeilen fuer `.wpb24-header`, `.wpb24-brand`, `.wpb24-menu`,
 * `.wpb24-nav-toggle`, `.wpb24-mobile-nav`, `.wpb24-skip-link` und `.wpb24-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. `wpb24_menue()` in functions.php
 * ist die letzte Verwenderin von `.wpb24-menu` und wird selbst nirgends
 * aufgerufen.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.wpb24-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(--wpb24-line);
	border-radius: var(--wpb24-radius);
	text-decoration: none;
	color: var(--wpb24-text);
}

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

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

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

.wpb24-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.
 *
 * --wpb24-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(--wpb24-brand);
	--w24dir-accent-ink: var(--wpb24-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 `.wpb24-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`.
 */
.wpb24-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.
 */

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

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

/*
 * `input[type=search]` statt `.wpb24-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.
 */
.wpb24-suche__form input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .75rem 1rem;
	border: 1px solid var(--wpb24-line);
	border-radius: var(--wpb24-radius);
	background: var(--wpb24-bg);
	color: inherit;
	font: inherit;
}

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

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

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

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

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

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

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

.wpb24-suche__knopf.is-aktiv {
	background: var(--wpb24-brand);
	border-color: var(--wpb24-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.
 */
.wpb24-suche__knopf-zahl {
	padding: 0 .45rem;
	border-radius: 999px;
	background: rgb(0 0 0 / .07);
	color: inherit;
	font-size: .8125rem;
	font-weight: 700;
}

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

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

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

.wpb24-suche__treffer {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--wpb24-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.
 */
.wpb24-suche__bild {
	flex: none;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border: 1px solid var(--wpb24-line);
	border-radius: var(--wpb24-radius);
	background: var(--wpb24-bg-soft);
}

.wpb24-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.
 */
.wpb24-suche__bild--leer {
	display: grid;
	place-items: center;
	color: var(--wpb24-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. */
.wpb24-suche__inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 480px) {
	.wpb24-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.
 */
.wpb24-suche__kennung {
	margin: 0 0 .25rem;
	color: var(--wpb24-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

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

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

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

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

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

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

.wpb24-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(--wpb24-line);
	border-radius: var(--wpb24-radius);
	background: var(--wpb24-bg-soft);
}

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

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

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

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

/*
 * ALLES UEBER DIE TOKEN, KEINE EINZELREGELN. Jede Komponente in dieser Datei
 * bezieht ihre Farben aus --wpb24-text, --wpb24-muted, --wpb24-line, --wpb24-bg,
 * --wpb24-bg-soft und --wpb24-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.wpb24-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`):
 *   --wpb24-text  #e6e9f2  = 15,1:1
 *   --wpb24-muted #9aa3b8  =  6,9:1
 *   --wpb24-brand-ink      =  7,7:1  (Marke zu 55 % mit Weiss gemischt)
 * Der Rueckfall #7fd47a steht davor, weil color-mix() erst ab Chrome 111,
 * Safari 16.2 und Firefox 113 kann.
 */

@media (prefers-color-scheme: dark) {
	/* Ohne die Divi-Ausnahme: Kopf und Fuss sind dort ebenfalls dunkel. */
	:where(html:not(.light)) {
		--wpb24-brand-ink-kopf: #7fd47a;
		--wpb24-brand-ink-kopf: color-mix(in srgb, var(--wpb24-brand) 55%, #ffffff);
	}

	:where(html:not(.light)) body:not(.wpb24-divi-seite) {
		--wpb24-text: #e6e9f2;
		--wpb24-muted: #9aa3b8;
		--wpb24-line: rgb(255 255 255 / .12);
		--wpb24-bg: #111a2e;
		--wpb24-bg-soft: #131c31;
		--wpb24-brand-ink: #7fd47a;
		--wpb24-brand-ink: color-mix(in srgb, var(--wpb24-brand) 55%, #ffffff);
	}
}

html.dark {
	--wpb24-brand-ink-kopf: #7fd47a;
	--wpb24-brand-ink-kopf: color-mix(in srgb, var(--wpb24-brand) 55%, #ffffff);
}

html.dark body:not(.wpb24-divi-seite) {
	--wpb24-text: #e6e9f2;
	--wpb24-muted: #9aa3b8;
	--wpb24-line: rgb(255 255 255 / .12);
	--wpb24-bg: #111a2e;
	--wpb24-bg-soft: #131c31;
	--wpb24-brand-ink: #7fd47a;
	--wpb24-brand-ink: color-mix(in srgb, var(--wpb24-brand) 55%, #ffffff);
}

/*
 * 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
 *    --wpb24-bg — deshalb steht --wpb24-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(.wpb24-divi-seite) .wpb24-suche__knopf-zahl {
		background: rgb(255 255 255 / .12);
	}
}

html.dark body:not(.wpb24-divi-seite) .wpb24-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;
}