@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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;
}@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plusjakartasans_v12_LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.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;
}*,:before,:after{--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: rgb(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: rgb(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: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";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,samp,pre{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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{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}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background: 40 10% 97%;--foreground: 200 12% 19%;--card: 0 0% 100%;--card-foreground: 200 12% 19%;--popover: 0 0% 100%;--popover-foreground: 200 12% 19%;--primary: 37 25% 65%;--primary-foreground: 0 0% 100%;--secondary: 40 8% 95%;--secondary-foreground: 200 12% 19%;--muted: 40 8% 93%;--muted-foreground: 200 8% 45%;--accent: 37 25% 65%;--accent-foreground: 0 0% 100%;--destructive: 0 84% 60%;--destructive-foreground: 0 0% 98%;--border: 40 10% 88%;--input: 40 10% 88%;--ring: 37 25% 65%;--radius: .5rem;--sidebar-background: 200 12% 19%;--sidebar-foreground: 0 0% 100%;--sidebar-primary: 37 25% 65%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 200 10% 25%;--sidebar-accent-foreground: 0 0% 95%;--sidebar-border: 200 10% 25%;--sidebar-ring: 37 25% 65%;--staffsec-anthracite: #2D3436;--staffsec-dark: #1A1D1F;--staffsec-charcoal: #3D4449;--staffsec-champagne: #C4B08C;--staffsec-champagne-light: #D4C5A0;--staffsec-champagne-dark: #B09A72;--staffsec-gray: #7B7B7B;--staffsec-gray-medium: #6B7280;--staffsec-warm-white: #F8F7F4;--staffsec-warm-gray: #F2F0EB;--staffsec-border: #E8E5DE;--staffsec-white: #FFFFFF;--staffsec-gray-100: #F5F4F1;--staffsec-gray-200: #ECEAE5;--staffsec-gray-300: #D5D2CB;--staffsec-gray-400: #9B9690;--staffsec-gray-500: #6B6660;--staffsec-gray-600: #4A4640}*{border-color:hsl(var(--border))}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;letter-spacing:-.01em;color:#2d3436}h1,h2,h3,h4,h5,h6{font-family:Plus Jakarta Sans,Inter,system-ui,sans-serif;letter-spacing:-.03em;color:#2d3436}.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}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-bottom-20{bottom:-5rem}.-bottom-6{bottom:-1.5rem}.-left-12{left:-3rem}.-left-20{left:-5rem}.-left-4{left:-1rem}.-left-6{left:-1.5rem}.-right-12{right:-3rem}.-right-3{right:-.75rem}.-right-32{right:-8rem}.-right-40{right:-10rem}.-right-6{right:-1.5rem}.-top-12{top:-3rem}.-top-32{top:-8rem}.-top-40{top:-10rem}.-top-6{top:-1.5rem}.bottom-0{bottom:0}.bottom-1\/3{bottom:33.333333%}.bottom-1\/4{bottom:25%}.bottom-20{bottom:5rem}.bottom-6{bottom:1.5rem}.left-0{left:0}.left-1{left:.25rem}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-2{left:.5rem}.left-4{left:1rem}.left-6{left:1.5rem}.left-\[10\%\]{left:10%}.left-\[50\%\]{left:50%}.left-\[8\%\]{left:8%}.right-0{right:0}.right-1{right:.25rem}.right-1\/3{right:33.333333%}.right-1\/4{right:25%}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem}.right-8{right:2rem}.right-\[-10\%\]{right:-10%}.right-\[15\%\]{right:15%}.top-0{top:0}.top-1\.5{top:.375rem}.top-1\/2{top:50%}.top-1\/4{top:25%}.top-2{top:.5rem}.top-20{top:5rem}.top-3\.5{top:.875rem}.top-32{top:8rem}.top-4{top:1rem}.top-6{top:1.5rem}.top-\[-30\%\]{top:-30%}.top-\[1px\]{top:1px}.top-\[30\%\]{top:30%}.top-\[50\%\]{top:50%}.top-\[60\%\]{top:60%}.top-full{top:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[5\]{z-index:5}.col-span-2{grid-column:span 2 / span 2}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3\.5{margin-left:.875rem;margin-right:.875rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.-ml-4{margin-left:-1rem}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.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}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/5\]{aspect-ratio:4/5}.size-4{width:1rem;height:1rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-\[1\.5px\]{height:1.5px}.h-\[100px\]{height:100px}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[300px\]{height:300px}.h-\[330px\]{height:330px}.h-\[50\%\]{height:50%}.h-\[500px\]{height:500px}.h-\[800px\]{height:800px}.h-\[var\(--radix-navigation-menu-viewport-height\)\]{height:var(--radix-navigation-menu-viewport-height)}.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-0{max-height:0px}.max-h-96{max-height:24rem}.max-h-\[300px\]{max-height:300px}.max-h-\[500px\]{max-height:500px}.max-h-\[50px\]{max-height:50px}.max-h-\[80vh\]{max-height:80vh}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.min-h-0{min-height:0px}.min-h-\[200px\]{min-height:200px}.min-h-\[225px\]{min-height:225px}.min-h-\[265px\]{min-height:265px}.min-h-\[280px\]{min-height:280px}.min-h-\[400px\]{min-height:400px}.min-h-\[420px\]{min-height:420px}.min-h-\[480px\]{min-height:480px}.min-h-\[80px\]{min-height:80px}.min-h-\[80vh\]{min-height:80vh}.min-h-\[85vh\]{min-height:85vh}.min-h-screen{min-height:100vh}.min-h-svh{min-height:100svh}.w-0{width:0px}.w-1{width:.25rem}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[--sidebar-width\]{width:var(--sidebar-width)}.w-\[100px\]{width:100px}.w-\[1px\]{width:1px}.w-\[200px\]{width:200px}.w-\[2px\]{width:2px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[380px\]{width:380px}.w-\[3px\]{width:3px}.w-\[50\%\]{width:50%}.w-\[500px\]{width:500px}.w-\[800px\]{width:800px}.w-auto{width:auto}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-5{min-width:1.25rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[640px\]{min-width:640px}.min-w-\[8rem\]{min-width:8rem}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[--skeleton-width\]{max-width:var(--skeleton-width)}.max-w-\[120px\]{max-width:120px}.max-w-\[200px\]{max-width:200px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-max{max-width:-moz-max-content;max-width:max-content}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-2{--tw-translate-x: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-px{--tw-translate-x: -1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[-50\%\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-px{--tw-translate-x: 1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[slowZoom_20s_ease-in-out_infinite_alternate\]{animation:slowZoom 20s ease-in-out infinite alternate}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.scroll-mt-24{scroll-margin-top:6rem}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:.75rem}.rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.rounded-tl-sm{border-top-left-radius:calc(var(--radius) - 4px)}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[\#C4B08C\]\/30{border-color:#c4b08c4d}.border-\[\#C4B08C\]\/40{border-color:#c4b08c66}.border-\[\#E8E5DE\]{--tw-border-opacity: 1;border-color:rgb(232 229 222 / var(--tw-border-opacity, 1))}.border-\[\#F8F7F4\]{--tw-border-opacity: 1;border-color:rgb(248 247 244 / var(--tw-border-opacity, 1))}.border-\[--color-border\]{border-color:var(--color-border)}.border-blue-600{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.border-border\/50{border-color:hsl(var(--border) / .5)}.border-destructive{border-color:hsl(var(--destructive))}.border-destructive\/50{border-color:hsl(var(--destructive) / .5)}.border-input{border-color:hsl(var(--input))}.border-primary{border-color:hsl(var(--primary))}.border-sidebar-border{border-color:hsl(var(--sidebar-border))}.border-transparent{border-color:transparent}.border-white\/30{border-color:#ffffff4d}.border-white\/\[0\.04\]{border-color:#ffffff0a}.border-white\/\[0\.06\]{border-color:#ffffff0f}.border-l-transparent{border-left-color:transparent}.border-t-transparent{border-top-color:transparent}.bg-\[\#060709\]{--tw-bg-opacity: 1;background-color:rgb(6 7 9 / var(--tw-bg-opacity, 1))}.bg-\[\#060709\]\/75{background-color:#060709bf}.bg-\[\#060709\]\/90{background-color:#060709e6}.bg-\[\#080A0E\]{--tw-bg-opacity: 1;background-color:rgb(8 10 14 / var(--tw-bg-opacity, 1))}.bg-\[\#080A0E\]\/80{background-color:#080a0ecc}.bg-\[\#0A0C10\]\/80{background-color:#0a0c10cc}.bg-\[\#0A0F1C\]{--tw-bg-opacity: 1;background-color:rgb(10 15 28 / var(--tw-bg-opacity, 1))}.bg-\[\#0D0F11\]{--tw-bg-opacity: 1;background-color:rgb(13 15 17 / var(--tw-bg-opacity, 1))}.bg-\[\#0D0F11\]\/75{background-color:#0d0f11bf}.bg-\[\#0D0F11\]\/85{background-color:#0d0f11d9}.bg-\[\#111315\]\/85{background-color:#111315d9}.bg-\[\#1A1D1F\]{--tw-bg-opacity: 1;background-color:rgb(26 29 31 / var(--tw-bg-opacity, 1))}.bg-\[\#2D3436\]{--tw-bg-opacity: 1;background-color:rgb(45 52 54 / var(--tw-bg-opacity, 1))}.bg-\[\#2D3436\]\/85{background-color:#2d3436d9}.bg-\[\#F8F7F4\]{--tw-bg-opacity: 1;background-color:rgb(248 247 244 / var(--tw-bg-opacity, 1))}.bg-\[\#FAFAF8\]{--tw-bg-opacity: 1;background-color:rgb(250 250 248 / var(--tw-bg-opacity, 1))}.bg-\[--color-bg\]{background-color:var(--color-bg)}.bg-accent{background-color:hsl(var(--accent))}.bg-background{background-color:hsl(var(--background))}.bg-black\/80{background-color:#000c}.bg-border{background-color:hsl(var(--border))}.bg-card{background-color:hsl(var(--card))}.bg-destructive{background-color:hsl(var(--destructive))}.bg-foreground{background-color:hsl(var(--foreground))}.bg-muted{background-color:hsl(var(--muted))}.bg-muted\/50{background-color:hsl(var(--muted) / .5)}.bg-popover{background-color:hsl(var(--popover))}.bg-primary{background-color:hsl(var(--primary))}.bg-red-500\/20{background-color:#ef444433}.bg-secondary{background-color:hsl(var(--secondary))}.bg-sidebar{background-color:hsl(var(--sidebar-background))}.bg-sidebar-border{background-color:hsl(var(--sidebar-border))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/95{background-color:#fffffff2}.bg-white\/\[0\.06\]{background-color:#ffffff0f}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-\[\#060709\]\/70{--tw-gradient-from: rgb(6 7 9 / .7) var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 7 9 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#060709\]\/90{--tw-gradient-from: rgb(6 7 9 / .9) var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 7 9 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]{--tw-gradient-from: #0D0F11 var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]\/40{--tw-gradient-from: rgb(13 15 17 / .4) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]\/50{--tw-gradient-from: rgb(13 15 17 / .5) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]\/60{--tw-gradient-from: rgb(13 15 17 / .6) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]\/90{--tw-gradient-from: rgb(13 15 17 / .9) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#0D0F11\]\/95{--tw-gradient-from: rgb(13 15 17 / .95) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#C4B08C\]{--tw-gradient-from: #C4B08C var(--tw-gradient-from-position);--tw-gradient-to: rgb(196 176 140 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#F8F7F4\]{--tw-gradient-from: #F8F7F4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(248 247 244 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from: #f9fafb var(--tw-gradient-from-position);--tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from: #fff var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-\[\#060709\]\/60{--tw-gradient-to: rgb(6 7 9 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(6 7 9 / .6) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0D0F11\]\/40{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0D0F11\]\/50{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .5) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0D0F11\]\/60{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .6) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0D0F11\]\/70{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .7) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0D0F11\]\/75{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .75) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[\#060709\]\/15{--tw-gradient-to: rgb(6 7 9 / .15) var(--tw-gradient-to-position)}.to-\[\#060709\]\/25{--tw-gradient-to: rgb(6 7 9 / .25) var(--tw-gradient-to-position)}.to-\[\#0D0F11\]\/30{--tw-gradient-to: rgb(13 15 17 / .3) var(--tw-gradient-to-position)}.to-\[\#B09A72\]{--tw-gradient-to: #B09A72 var(--tw-gradient-to-position)}.to-\[\#D4C5A0\]{--tw-gradient-to: #D4C5A0 var(--tw-gradient-to-position)}.to-blue-50{--tw-gradient-to: #eff6ff var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.fill-\[\#C4B08C\]{fill:#c4b08c}.fill-current{fill:currentColor}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-top{-o-object-position:top;object-position:top}.p-0{padding:0}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-\[1px\]{padding:1px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.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}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.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-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-12{padding-left:3rem}.pl-16{padding-left:4rem}.pl-2\.5{padding-left:.625rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-2\.5{padding-right:.625rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[120px\]{font-size:120px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[40px\]{font-size:40px}.text-\[9px\]{font-size:9px}.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-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[0\.92\]{line-height:.92}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.15\]{line-height:1.15}.leading-\[1\.7\]{line-height:1.7}.leading-\[1\.8\]{line-height:1.8}.leading-\[1\.9\]{line-height:1.9}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#0D0F11\]{--tw-text-opacity: 1;color:rgb(13 15 17 / var(--tw-text-opacity, 1))}.text-\[\#2D3436\]{--tw-text-opacity: 1;color:rgb(45 52 54 / var(--tw-text-opacity, 1))}.text-\[\#4A4640\]{--tw-text-opacity: 1;color:rgb(74 70 64 / var(--tw-text-opacity, 1))}.text-\[\#6B7280\]{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-\[\#7B7B7B\]{--tw-text-opacity: 1;color:rgb(123 123 123 / var(--tw-text-opacity, 1))}.text-\[\#8B8B8B\]{--tw-text-opacity: 1;color:rgb(139 139 139 / var(--tw-text-opacity, 1))}.text-\[\#9B9690\]{--tw-text-opacity: 1;color:rgb(155 150 144 / var(--tw-text-opacity, 1))}.text-\[\#B09A72\]{--tw-text-opacity: 1;color:rgb(176 154 114 / var(--tw-text-opacity, 1))}.text-\[\#C4B08C\]{--tw-text-opacity: 1;color:rgb(196 176 140 / var(--tw-text-opacity, 1))}.text-\[\#D5D2CB\]{--tw-text-opacity: 1;color:rgb(213 210 203 / var(--tw-text-opacity, 1))}.text-accent-foreground{color:hsl(var(--accent-foreground))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-current{color:currentColor}.text-destructive{color:hsl(var(--destructive))}.text-destructive-foreground{color:hsl(var(--destructive-foreground))}.text-foreground{color:hsl(var(--foreground))}.text-foreground\/50{color:hsl(var(--foreground) / .5)}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-popover-foreground{color:hsl(var(--popover-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-sidebar-foreground{color:hsl(var(--sidebar-foreground))}.text-sidebar-foreground\/70{color:hsl(var(--sidebar-foreground) / .7)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/10{color:#ffffff1a}.text-white\/20{color:#fff3}.text-white\/25{color:#ffffff40}.text-white\/30{color:#ffffff4d}.text-white\/35{color:#ffffff59}.text-white\/40{color:#fff6}.text-white\/45{color:#ffffff73}.text-white\/50{color:#ffffff80}.text-white\/55{color:#ffffff8c}.text-white\/60{color:#fff9}.text-white\/70{color:#ffffffb3}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.placeholder-\[\#9B9690\]::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(155 150 144 / var(--tw-placeholder-opacity, 1))}.placeholder-\[\#9B9690\]::placeholder{--tw-placeholder-opacity: 1;color:rgb(155 150 144 / var(--tw-placeholder-opacity, 1))}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-20{opacity:.2}.opacity-40{opacity:.4}.opacity-5{opacity:.05}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-85{opacity:.85}.opacity-90{opacity:.9}.opacity-\[0\.015\]{opacity:.015}.opacity-\[0\.02\]{opacity:.02}.opacity-\[0\.03\]{opacity:.03}.opacity-\[0\.04\]{opacity:.04}.opacity-\[0\.06\]{opacity:.06}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{--tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(196\,176\,140\,0\.06\)\]{--tw-shadow: 0 0 30px rgba(196,176,140,.06);--tw-shadow-colored: 0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(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)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;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 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[\#C4B08C\]\/\[0\.06\]{--tw-shadow-color: rgb(196 176 140 / .06);--tw-shadow: var(--tw-shadow-colored)}.shadow-black\/\[0\.04\]{--tw-shadow-color: rgb(0 0 0 / .04);--tw-shadow: var(--tw-shadow-colored)}.shadow-black\/\[0\.06\]{--tw-shadow-color: rgb(0 0 0 / .06);--tw-shadow: var(--tw-shadow-colored)}.shadow-black\/\[0\.08\]{--tw-shadow-color: rgb(0 0 0 / .08);--tw-shadow: var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-0{--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(0px + 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)}.ring-2{--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)}.ring-ring{--tw-ring-color: hsl(var(--ring))}.ring-sidebar-ring{--tw-ring-color: hsl(var(--sidebar-ring))}.ring-offset-background{--tw-ring-offset-color: hsl(var(--background))}.blur{--tw-blur: blur(8px);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)}.blur-2xl{--tw-blur: blur(40px);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)}.blur-3xl{--tw-blur: blur(64px);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)}.blur-\[100px\]{--tw-blur: blur(100px);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)}.blur-xl{--tw-blur: blur(24px);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)}.brightness-0{--tw-brightness: brightness(0);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)}.invert{--tw-invert: invert(100%);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)}.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-2xl{--tw-backdrop-blur: blur(40px);-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)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-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)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-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,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[margin\,opa\]{transition-property:margin,opa;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;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}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-150{transition-delay:.15s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-700{transition-delay:.7s}.duration-1000{transition-duration:1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.fade-in-0{--tw-enter-opacity: 0}.fade-in-80{--tw-enter-opacity: .8}.zoom-in-95{--tw-enter-scale: .95}.duration-1000{animation-duration:1s}.duration-150{animation-duration:.15s}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-500{animation-duration:.5s}.duration-700{animation-duration:.7s}.delay-150{animation-delay:.15s}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{animation-timing-function:linear}.text-gradient{-webkit-background-clip:text;background-clip:text;color:transparent;background-image:linear-gradient(135deg,#c4b08c,#b09a72,#c4b08c)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius);padding:1rem 2rem;font-weight:600;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;animation-duration:.3s;background:linear-gradient(135deg,#c4b08c,#b09a72);color:#2D3436}.btn-primary:hover{background:linear-gradient(135deg,#d4c5a0,#c4b08c);box-shadow:0 8px 32px #c4b08c59;transform:translateY(-1px)}.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius);padding:1rem 2rem;font-weight:600;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;animation-duration:.3s;border:1.5px solid #D5D2CB;color:#2d3436;background:transparent}.btn-outline:hover{border-color:#c4b08c;background:#c4b08c0f;color:#2d3436}.btn-outline-light{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius);padding:1rem 2rem;font-weight:600;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;animation-duration:.3s;border:1.5px solid rgba(255,255,255,.25);color:#fff;background:transparent}.btn-outline-light:hover{border-color:#c4b08c80;background:#c4b08c14}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes lineGrow{0%{width:0}to{width:48px}}.animate-fade-in-up{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) forwards}.animate-fade-in{animation:fadeIn 1s ease-out forwards}.animate-slide-left{animation:slideInLeft .8s cubic-bezier(.16,1,.3,1) forwards}.animate-slide-right{animation:slideInRight .8s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-in{animation:scaleIn .8s cubic-bezier(.16,1,.3,1) forwards}.animate-shimmer{background-size:200% 100%;animation:shimmer 3s linear infinite}.animate-line-grow{animation:lineGrow .8s cubic-bezier(.16,1,.3,1) forwards}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.delay-600{animation-delay:.6s}.delay-700{animation-delay:.7s}.delay-800{animation-delay:.8s}.reveal-section{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f8f7f4}::-webkit-scrollbar-thumb{background:#d5d2cb;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9b9690}.hero-overlay{background:linear-gradient(180deg,#2d343633,#2d343680 40%,#2d3436eb)}.hero-overlay-strong{background:linear-gradient(180deg,#2d343666,#2d3436b3,#2d3436)}.image-overlay-dark{background:linear-gradient(135deg,#2d3436d9,#2d343666)}.image-overlay-champagne{background:linear-gradient(135deg,#2d3436e6,#c4b08c0d)}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.hero-text-outline{-webkit-text-stroke:1.5px rgba(255,255,255,.35);color:transparent}@media (min-width: 1024px){.hero-text-outline{-webkit-text-stroke:2px rgba(255,255,255,.3)}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes marquee-reverse{0%{transform:translate(-50%)}to{transform:translate(0)}}.animate-marquee{animation:marquee 40s linear infinite}.animate-marquee-reverse{animation:marquee-reverse 40s linear infinite}.animate-marquee:hover,.animate-marquee-reverse:hover{animation-play-state:paused}@keyframes floatParticle{0%,to{transform:translateY(0) translate(0) scale(1);opacity:.3}25%{transform:translateY(-30px) translate(10px) scale(1.5);opacity:.6}50%{transform:translateY(-15px) translate(-8px) scale(1);opacity:.2}75%{transform:translateY(-40px) translate(15px) scale(1.3);opacity:.5}}.animate-float-particle{animation:floatParticle 6s ease-in-out infinite}@keyframes gradientShift{0%,to{opacity:1;transform:scale(1) rotate(0)}33%{opacity:.8;transform:scale(1.05) rotate(1deg)}66%{opacity:1;transform:scale(.98) rotate(-1deg)}}.animate-gradient-shift{animation:gradientShift 12s ease-in-out infinite}@keyframes spinVerySlow{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinVerySlowReverse{0%{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}.animate-spin-very-slow{animation:spinVerySlow 60s linear infinite}.animate-spin-very-slow-reverse{animation:spinVerySlowReverse 45s linear infinite}@keyframes borderGlow{0%,to{box-shadow:0 0 8px #c4b08c1a,inset 0 0 8px #c4b08c0d}50%{box-shadow:0 0 20px #c4b08c33,inset 0 0 12px #c4b08c14}}.animate-border-glow{animation:borderGlow 3s ease-in-out infinite}.reveal-item.revealed{opacity:1!important;transform:none!important;filter:none!important}@keyframes slowZoom{0%{transform:scale(1)}to{transform:scale(1.08)}}::-moz-selection{background:#c4b08c4d;color:#2d3436}::selection{background:#c4b08c4d;color:#2d3436}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.file\:text-foreground::file-selector-button{color:hsl(var(--foreground))}.placeholder\:text-muted-foreground::-moz-placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--muted-foreground))}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-2:after{content:var(--tw-content);top:-.5rem;right:-.5rem;bottom:-.5rem;left:-.5rem}.after\:inset-y-0:after{content:var(--tw-content);top:0;bottom:0}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-1:after{content:var(--tw-content);width:.25rem}.after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.after\:-translate-x-1\/2:after{content:var(--tw-content);--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.first\:rounded-l-md:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.first\:border-l:first-child{border-left-width:1px}.last\:rounded-r-md:last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-20:focus-within{z-index:20}.hover\:-translate-x-3:hover{--tw-translate-x: -.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-0\.5:hover{--tw-translate-y: -.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-2:hover{--tw-translate-y: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:gap-3:hover{gap:.75rem}.hover\:border-\[\#C4B08C\]\/20:hover{border-color:#c4b08c33}.hover\:border-\[\#C4B08C\]\/30:hover{border-color:#c4b08c4d}.hover\:border-\[\#C4B08C\]\/40:hover{border-color:#c4b08c66}.hover\:border-white\/60:hover{border-color:#fff9}.hover\:border-white\/\[0\.06\]:hover{border-color:#ffffff0f}.hover\:border-white\/\[0\.12\]:hover{border-color:#ffffff1f}.hover\:bg-\[\#F8F7F4\]:hover{--tw-bg-opacity: 1;background-color:rgb(248 247 244 / var(--tw-bg-opacity, 1))}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-destructive\/80:hover{background-color:hsl(var(--destructive) / .8)}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive) / .9)}.hover\:bg-muted:hover{background-color:hsl(var(--muted))}.hover\:bg-muted\/50:hover{background-color:hsl(var(--muted) / .5)}.hover\:bg-primary:hover{background-color:hsl(var(--primary))}.hover\:bg-primary\/80:hover{background-color:hsl(var(--primary) / .8)}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary) / .9)}.hover\:bg-secondary:hover{background-color:hsl(var(--secondary))}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary) / .8)}.hover\:bg-sidebar-accent:hover{background-color:hsl(var(--sidebar-accent))}.hover\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/\[0\.03\]:hover{background-color:#ffffff08}.hover\:text-\[\#2D3436\]:hover{--tw-text-opacity: 1;color:rgb(45 52 54 / var(--tw-text-opacity, 1))}.hover\:text-\[\#6B7280\]:hover{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.hover\:text-\[\#C4B08C\]:hover{--tw-text-opacity: 1;color:rgb(196 176 140 / var(--tw-text-opacity, 1))}.hover\:text-\[\#D4C5A0\]:hover{--tw-text-opacity: 1;color:rgb(212 197 160 / var(--tw-text-opacity, 1))}.hover\:text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:text-foreground:hover{color:hsl(var(--foreground))}.hover\:text-muted-foreground:hover{color:hsl(var(--muted-foreground))}.hover\:text-primary-foreground:hover{color:hsl(var(--primary-foreground))}.hover\:text-sidebar-accent-foreground:hover{color:hsl(var(--sidebar-accent-foreground))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-white\/60:hover{color:#fff9}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-2xl:hover{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{--tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_30px_rgba\(196\,176\,140\,0\.15\)\]:hover{--tw-shadow: 0 0 30px rgba(196,176,140,.15);--tw-shadow-colored: 0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_40px_rgba\(196\,176\,140\,0\.3\)\]:hover{--tw-shadow: 0 0 40px rgba(196,176,140,.3);--tw-shadow-colored: 0 0 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_50px_rgba\(196\,176\,140\,0\.08\)\]:hover{--tw-shadow: 0 0 50px rgba(196,176,140,.08);--tw-shadow-colored: 0 0 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_50px_rgba\(196\,176\,140\,0\.3\)\]:hover{--tw-shadow: 0 0 50px rgba(196,176,140,.3);--tw-shadow-colored: 0 0 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_60px_rgba\(196\,176\,140\,0\.08\)\]:hover{--tw-shadow: 0 0 60px rgba(196,176,140,.08);--tw-shadow-colored: 0 0 60px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_8px_30px_rgba\(196\,176\,140\,0\.08\)\]:hover{--tw-shadow: 0 8px 30px rgba(196,176,140,.08);--tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_8px_40px_rgba\(196\,176\,140\,0\.08\)\]:hover{--tw-shadow: 0 8px 40px rgba(196,176,140,.08);--tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_8px_40px_rgba\(196\,176\,140\,0\.1\)\]:hover{--tw-shadow: 0 8px 40px rgba(196,176,140,.1);--tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(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)}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[\#C4B08C\]\/\[0\.05\]:hover{--tw-shadow-color: rgb(196 176 140 / .05);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-\[\#C4B08C\]\/\[0\.06\]:hover{--tw-shadow-color: rgb(196 176 140 / .06);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-\[\#C4B08C\]\/\[0\.08\]:hover{--tw-shadow-color: rgb(196 176 140 / .08);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-black\/25:hover{--tw-shadow-color: rgb(0 0 0 / .25);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-black\/\[0\.03\]:hover{--tw-shadow-color: rgb(0 0 0 / .03);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-black\/\[0\.04\]:hover{--tw-shadow-color: rgb(0 0 0 / .04);--tw-shadow: var(--tw-shadow-colored)}.hover\:shadow-black\/\[0\.08\]:hover{--tw-shadow-color: rgb(0 0 0 / .08);--tw-shadow: var(--tw-shadow-colored)}.hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:hsl(var(--sidebar-border))}.focus\:border-\[\#C4B08C\]\/50:focus{border-color:#c4b08c80}.focus\:bg-accent:focus{background-color:hsl(var(--accent))}.focus\:bg-primary:focus{background-color:hsl(var(--primary))}.focus\:text-accent-foreground:focus{color:hsl(var(--accent-foreground))}.focus\:text-primary-foreground:focus{color:hsl(var(--primary-foreground))}.focus\:opacity-100:focus{opacity:1}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1: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(1px + 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\: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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-\[\#C4B08C\]\/20:focus{--tw-ring-color: rgb(196 176 140 / .2)}.focus\:ring-ring:focus{--tw-ring-color: hsl(var(--ring))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--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(1px + 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-visible\:ring-2:focus-visible{--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-visible\:ring-ring:focus-visible{--tw-ring-color: hsl(var(--ring))}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color: hsl(var(--sidebar-ring))}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width: 1px}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color: hsl(var(--background))}.active\:bg-sidebar-accent:active{background-color:hsl(var(--sidebar-accent))}.active\:text-sidebar-accent-foreground:active{color:hsl(var(--sidebar-accent-foreground))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{opacity:1}.group:hover .group-hover\:translate-x-1{--tw-translate-x: .25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-y-\[-4px\]{--tw-translate-y: -4px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-12{--tw-rotate: 12deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-3{--tw-rotate: 3deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-6{--tw-rotate: 6deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:gap-3{gap:.75rem}.group:hover .group-hover\:gap-4{gap:1rem}.group:hover .group-hover\:text-\[\#2D3436\]{--tw-text-opacity: 1;color:rgb(45 52 54 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-\[\#B09A72\]{--tw-text-opacity: 1;color:rgb(176 154 114 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-\[\#C4B08C\]{--tw-text-opacity: 1;color:rgb(196 176 140 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-white\/60{color:#fff9}.group\/menu-item:hover .group-hover\/menu-item\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-95{opacity:.95}.group:hover .group-hover\:shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group.destructive .group-\[\.destructive\]\:border-muted\/40{border-color:hsl(var(--muted) / .4)}.group.toaster .group-\[\.toaster\]\:border-border{border-color:hsl(var(--border))}.group.toast .group-\[\.toast\]\:bg-muted{background-color:hsl(var(--muted))}.group.toast .group-\[\.toast\]\:bg-primary{background-color:hsl(var(--primary))}.group.toaster .group-\[\.toaster\]\:bg-background{background-color:hsl(var(--background))}.group.destructive .group-\[\.destructive\]\:text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.group.toast .group-\[\.toast\]\:text-muted-foreground{color:hsl(var(--muted-foreground))}.group.toast .group-\[\.toast\]\:text-primary-foreground{color:hsl(var(--primary-foreground))}.group.toaster .group-\[\.toaster\]\:text-foreground{color:hsl(var(--foreground))}.group.toaster .group-\[\.toaster\]\:shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{border-color:hsl(var(--destructive) / .3)}.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{background-color:hsl(var(--destructive))}.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{color:hsl(var(--destructive-foreground))}.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{--tw-text-opacity: 1;color:rgb(254 242 242 / var(--tw-text-opacity, 1))}.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{--tw-ring-color: hsl(var(--destructive))}.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1))}.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{--tw-ring-offset-color: #dc2626}.peer\/menu-button:hover~.peer-hover\/menu-button\:text-sidebar-accent-foreground{color:hsl(var(--sidebar-accent-foreground))}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-70{opacity:.7}.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){background-color:hsl(var(--sidebar-background))}.has-\[\:disabled\]\:opacity-50:has(:disabled){opacity:.5}.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8{padding-right:2rem}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-selected\:bg-accent[aria-selected=true]{background-color:hsl(var(--accent))}.aria-selected\:bg-accent\/50[aria-selected=true]{background-color:hsl(var(--accent) / .5)}.aria-selected\:text-accent-foreground[aria-selected=true]{color:hsl(var(--accent-foreground))}.aria-selected\:text-muted-foreground[aria-selected=true]{color:hsl(var(--muted-foreground))}.aria-selected\:opacity-100[aria-selected=true]{opacity:1}.aria-selected\:opacity-30[aria-selected=true]{opacity:.3}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true],.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical]{height:1px}.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical]{width:100%}.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y: .25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x: .25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked],.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end]{--tw-translate-x: var(--radix-toast-swipe-end-x);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move]{--tw-translate-x: var(--radix-toast-swipe-move-x);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up .2s ease-out}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down .2s ease-out}.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical]{flex-direction:column}.data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:hsl(var(--sidebar-accent))}.data-\[active\]\:bg-accent\/50[data-active]{background-color:hsl(var(--accent) / .5)}.data-\[selected\=\'true\'\]\:bg-accent[data-selected=true]{background-color:hsl(var(--accent))}.data-\[state\=active\]\:bg-background[data-state=active]{background-color:hsl(var(--background))}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:hsl(var(--primary))}.data-\[state\=on\]\:bg-accent[data-state=on],.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:hsl(var(--accent))}.data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:hsl(var(--accent) / .5)}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:hsl(var(--secondary))}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:hsl(var(--muted))}.data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:hsl(var(--input))}.data-\[active\=true\]\:font-medium[data-active=true]{font-weight:500}.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:hsl(var(--sidebar-accent-foreground))}.data-\[selected\=true\]\:text-accent-foreground[data-selected=true]{color:hsl(var(--accent-foreground))}.data-\[state\=active\]\:text-foreground[data-state=active]{color:hsl(var(--foreground))}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:hsl(var(--primary-foreground))}.data-\[state\=on\]\:text-accent-foreground[data-state=on],.data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:hsl(var(--accent-foreground))}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:hsl(var(--muted-foreground))}.data-\[disabled\=true\]\:opacity-50[data-disabled=true],.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=active\]\:shadow-sm[data-state=active]{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition-property:none}.data-\[state\=closed\]\:duration-300[data-state=closed]{transition-duration:.3s}.data-\[state\=open\]\:duration-500[data-state=open]{transition-duration:.5s}.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-],.data-\[state\=open\]\:animate-in[data-state=open],.data-\[state\=visible\]\:animate-in[data-state=visible]{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-],.data-\[state\=closed\]\:animate-out[data-state=closed],.data-\[state\=hidden\]\:animate-out[data-state=hidden],.data-\[swipe\=end\]\:animate-out[data-swipe=end]{animation-name:exit;animation-duration:.15s;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-rotate: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial}.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity: 0}.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-],.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity: 0}.data-\[state\=closed\]\:fade-out-80[data-state=closed]{--tw-exit-opacity: .8}.data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity: 0}.data-\[state\=open\]\:fade-in-0[data-state=open],.data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity: 0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale: .95}.data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale: .9}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale: .95}.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end]{--tw-enter-translate-x: 13rem}.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start]{--tw-enter-translate-x: -13rem}.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end]{--tw-exit-translate-x: 13rem}.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start]{--tw-exit-translate-x: -13rem}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y: -.5rem}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x: .5rem}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x: -.5rem}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y: .5rem}.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y: 100%}.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x: -100%}.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--tw-exit-translate-x: -50%}.data-\[state\=closed\]\:slide-out-to-right[data-state=closed],.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed]{--tw-exit-translate-x: 100%}.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y: -100%}.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{--tw-exit-translate-y: -48%}.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y: 100%}.data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x: -100%}.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{--tw-enter-translate-x: -50%}.data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x: 100%}.data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y: -100%}.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{--tw-enter-translate-y: -48%}.data-\[state\=open\]\:slide-in-from-top-full[data-state=open]{--tw-enter-translate-y: -100%}.data-\[state\=closed\]\:duration-300[data-state=closed]{animation-duration:.3s}.data-\[state\=open\]\:duration-500[data-state=open]{animation-duration:.5s}.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:0}.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:.25rem}.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state=open]{background-color:hsl(var(--sidebar-accent))}.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state=open]{color:hsl(var(--sidebar-accent-foreground))}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{left:calc(var(--sidebar-width) * -1)}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{right:calc(var(--sidebar-width) * -1)}.group[data-side=left] .group-data-\[side\=left\]\:-right-4{right:-1rem}.group[data-side=right] .group-data-\[side\=right\]\:left-0{left:0}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:-mt-8{margin-top:-2rem}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:hidden{display:none}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!size-8{width:2rem!important;height:2rem!important}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{width:var(--sidebar-width-icon)}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{width:calc(var(--sidebar-width-icon) + 1rem)}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:w-0{width:0px}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[data-side=right] .group-data-\[side\=right\]\:rotate-180,.group[data-state=open] .group-data-\[state\=open\]\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:overflow-hidden{overflow:hidden}.group[data-variant=floating] .group-data-\[variant\=floating\]\:rounded-lg{border-radius:var(--radius)}.group[data-variant=floating] .group-data-\[variant\=floating\]\:border{border-width:1px}.group[data-side=left] .group-data-\[side\=left\]\:border-r{border-right-width:1px}.group[data-side=right] .group-data-\[side\=right\]\:border-l{border-left-width:1px}.group[data-variant=floating] .group-data-\[variant\=floating\]\:border-sidebar-border{border-color:hsl(var(--sidebar-border))}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-0{padding:0!important}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-2{padding:.5rem!important}.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:opacity-0{opacity:0}.group[data-variant=floating] .group-data-\[variant\=floating\]\:shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:after\:left-full:after{content:var(--tw-content);left:100%}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover{background-color:hsl(var(--sidebar-background))}.peer\/menu-button[data-size=default]~.peer-data-\[size\=default\]\/menu-button\:top-1\.5{top:.375rem}.peer\/menu-button[data-size=lg]~.peer-data-\[size\=lg\]\/menu-button\:top-2\.5{top:.625rem}.peer\/menu-button[data-size=sm]~.peer-data-\[size\=sm\]\/menu-button\:top-1{top:.25rem}.peer[data-variant=inset]~.peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\]{min-height:calc(100svh - 1rem)}.peer\/menu-button[data-active=true]~.peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{color:hsl(var(--sidebar-accent-foreground))}.dark\:border-destructive:is(.dark *){border-color:hsl(var(--destructive))}@media (min-width: 640px){.sm\:bottom-0{bottom:0}.sm\:right-0{right:0}.sm\:top-auto{top:auto}.sm\:mt-0{margin-top:0}.sm\:flex{display:flex}.sm\:w-24{width:6rem}.sm\:max-w-sm{max-width:24rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-2\.5{gap:.625rem}.sm\:gap-5{gap:1.25rem}.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-left{text-align:left}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open]{--tw-enter-translate-y: 100%}}@media (min-width: 768px){.md\:absolute{position:absolute}.md\:col-span-3{grid-column:span 3 / span 3}.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{width:var(--radix-navigation-menu-viewport-width)}.md\:w-auto{width:auto}.md\:max-w-\[420px\]{max-width:420px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:opacity-0{opacity:0}.after\:md\:hidden:after{content:var(--tw-content);display:none}.peer[data-variant=inset]~.md\:peer-data-\[variant\=inset\]\:m-2{margin:.5rem}.peer[data-state=collapsed][data-variant=inset]~.md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2{margin-left:.5rem}.peer[data-variant=inset]~.md\:peer-data-\[variant\=inset\]\:ml-0{margin-left:0}.peer[data-variant=inset]~.md\:peer-data-\[variant\=inset\]\:rounded-xl{border-radius:.75rem}.peer[data-variant=inset]~.md\:peer-data-\[variant\=inset\]\:shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}}@media (min-width: 1024px){.lg\:-left-8{left:-2rem}.lg\:-right-12{right:-3rem}.lg\:left-1\/2{left:50%}.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-10{grid-column:span 10 / span 10}.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-7{grid-column:span 7 / span 7}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-28{height:7rem}.lg\:h-32{height:8rem}.lg\:min-h-\[480px\]{min-height:480px}.lg\:min-h-\[560px\]{min-height:560px}.lg\:w-28{width:7rem}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-start{justify-content:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-12{gap:3rem}.lg\:gap-14{gap:3.5rem}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:border-l{border-left-width:1px}.lg\:border-white\/10{border-color:#ffffff1a}.lg\:p-10{padding:2.5rem}.lg\:p-12{padding:3rem}.lg\:p-14{padding:3.5rem}.lg\:p-7{padding:1.75rem}.lg\:p-8{padding:2rem}.lg\:px-7{padding-left:1.75rem;padding-right:1.75rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:py-36{padding-top:9rem;padding-bottom:9rem}.lg\:py-40{padding-top:10rem;padding-bottom:10rem}.lg\:py-44{padding-top:11rem;padding-bottom:11rem}.lg\:pb-28{padding-bottom:7rem}.lg\:pb-32{padding-bottom:8rem}.lg\:pb-7{padding-bottom:1.75rem}.lg\:pl-0{padding-left:0}.lg\:pl-16{padding-left:4rem}.lg\:pt-40{padding-top:10rem}.lg\:pt-8{padding-top:2rem}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-7xl{font-size:4.5rem;line-height:1}.lg\:text-\[15px\]{font-size:15px}.lg\:text-\[16px\]{font-size:16px}.lg\:text-\[180px\]{font-size:180px}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1280px){.xl\:block{display:block}.xl\:text-7xl{font-size:4.5rem;line-height:1}.xl\:text-\[5\.5rem\]{font-size:5.5rem}}.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){background-color:hsl(var(--accent))}.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside){background-color:hsl(var(--accent) / .5)}.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.\[\&\>button\]\:hidden>button{display:none}.\[\&\>span\:last-child\]\:truncate>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\[\&\>span\]\:line-clamp-1>span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y: -3px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:left-4>svg{left:1rem}.\[\&\>svg\]\:top-4>svg{top:1rem}.\[\&\>svg\]\:size-3\.5>svg{width:.875rem;height:.875rem}.\[\&\>svg\]\:size-4>svg{width:1rem;height:1rem}.\[\&\>svg\]\:h-2\.5>svg{height:.625rem}.\[\&\>svg\]\:h-3>svg{height:.75rem}.\[\&\>svg\]\:w-2\.5>svg{width:.625rem}.\[\&\>svg\]\:w-3>svg{width:.75rem}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-destructive>svg{color:hsl(var(--destructive))}.\[\&\>svg\]\:text-foreground>svg{color:hsl(var(--foreground))}.\[\&\>svg\]\:text-muted-foreground>svg{color:hsl(var(--muted-foreground))}.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:hsl(var(--sidebar-accent-foreground))}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:1.75rem}.\[\&\>tr\]\:last\:border-b-0:last-child>tr{border-bottom-width:0px}.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{fill:hsl(var(--muted-foreground))}.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"]{stroke:hsl(var(--border) / .5)}.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{stroke:hsl(var(--border))}.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"]{stroke:transparent}.\[\&_\.recharts-layer\]\:outline-none .recharts-layer{outline:2px solid transparent;outline-offset:2px}.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"]{stroke:hsl(var(--border))}.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector,.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{fill:hsl(var(--muted))}.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"]{stroke:hsl(var(--border))}.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"]{stroke:transparent}.\[\&_\.recharts-sector\]\:outline-none .recharts-sector,.\[\&_\.recharts-surface\]\:outline-none .recharts-surface{outline:2px solid transparent;outline-offset:2px}.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{padding-left:.5rem;padding-right:.5rem}.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{padding-top:.375rem;padding-bottom:.375rem}.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{font-size:.75rem;line-height:1rem}.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{font-weight:500}.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{color:hsl(var(--muted-foreground))}.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:0}.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{padding-left:.5rem;padding-right:.5rem}.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{height:1.25rem}.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{width:1.25rem}.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{height:3rem}.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{padding-left:.5rem;padding-right:.5rem}.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{padding-top:.75rem;padding-bottom:.75rem}.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{height:1.25rem}.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{width:1.25rem}.\[\&_p\]\:leading-relaxed p{line-height:1.625}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-width:0px}.\[\&_tr\]\:border-b tr{border-bottom-width:1px}[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:-.5rem}[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:-.5rem}[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{cursor:e-resize}

/* === NACHTRAG STAFFSEC 27.07.2026 - fehlende Tailwind-Regeln, siehe werkzeuge/klassen-nachtrag.js ===
   Attribut-Selektoren, damit keine Escape-Fehler moeglich sind. Reihenfolge: zuletzt = gewinnt. */
[class~="from-[#0D0F11]/88"]{--tw-gradient-from: rgb(13 15 17 / .88) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
[class~="via-[#0D0F11]/58"]{--tw-gradient-to: rgb(13 15 17 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(13 15 17 / .58) var(--tw-gradient-via-position), var(--tw-gradient-to)}
[class~="to-[#0D0F11]/20"]{--tw-gradient-to: rgb(13 15 17 / .2) var(--tw-gradient-to-position)}
[class~="border-[#C4B08C]/25"]{border-color:rgb(196 176 140 / .25)}
[class~="border-white/[0.07]"]{border-color:rgb(255 255 255 / .07)}
[class~="leading-[1.1]"]{line-height:1.1}
[class~="duration-400"]{transition-duration:400ms}
[class~="hover:shadow-[0_8px_30px_rgba(45,52,54,0.06)]"]:hover{--tw-shadow:0 8px 30px rgba(45,52,54,0.06);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
/* === ENDE NACHTRAG === */










/* === NACHTRAG 3 STAFFSEC 27.07.2026 - Startseite Standorte === */
.ssx-hd{position:relative;display:grid;grid-template-columns:352px 1fr;gap:30px;min-height:486px}
.ssx-hd-liste{display:flex;flex-direction:column}
.ssx-hd-gruppe{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C4B08C;padding:0 4px 10px}
.ssx-hd-gruppe2{padding-top:18px;margin-top:14px;border-top:1px solid rgb(255 255 255 / .07)}
.ssx-hd-spalte{display:flex;flex-direction:column;gap:2px}
.ssx-hd-land{position:static}
.ssx-hd-titel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-radius:12px;border:1px solid transparent;text-decoration:none;transition:background .3s,border-color .3s}
.ssx-hd-land:hover>.ssx-hd-titel,.ssx-hd-land:focus-within>.ssx-hd-titel{background:rgb(255 255 255 / .06);border-color:rgb(196 176 140 / .3)}
.ssx-hd-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ssx-hd-name{font-size:14.5px;font-weight:700;color:rgb(255 255 255 / .74);transition:color .25s}
.ssx-hd-land:hover .ssx-hd-name,.ssx-hd-land:focus-within .ssx-hd-name{color:#C4B08C}
.ssx-hd-rolle{font-size:11.5px;color:rgb(255 255 255 / .38)}
.ssx-hd-pfeil{color:#C4B08C;font-size:16px;line-height:1;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.ssx-hd-land:hover .ssx-hd-pfeil,.ssx-hd-land:focus-within .ssx-hd-pfeil{opacity:1;transform:translateX(0)}
.ssx-hd-panel,.ssx-hd-standard{position:absolute;top:0;left:382px;right:0;bottom:0;border-radius:24px;padding:30px 34px;border:1px solid rgb(255 255 255 / .09)}
.ssx-hd-standard{display:flex;flex-direction:column;z-index:1;background:linear-gradient(135deg, rgb(255 255 255 / .05) 0%, rgb(255 255 255 / .015) 100%)}
/* Das Staedte-Panel liegt UEBER der Standardspalte: deckend, sonst scheinen beide Texte
   durcheinander (Befund 27.07. im Beleg-Bild). Zusaetzlich blendet :has() die Standardspalte
   aus, sobald ein Bundesland angefahren wird - beides zusammen ist auch ohne :has() sauber. */
.ssx-hd-panel{display:none;z-index:3;background:linear-gradient(135deg, rgb(11 13 18 / .97) 0%, rgb(8 10 14 / .95) 100%)}
.ssx-hd-land:hover>.ssx-hd-panel,.ssx-hd-land:focus-within>.ssx-hd-panel{display:flex;flex-direction:column}
.ssx-hd:has(.ssx-hd-land:hover) .ssx-hd-standard,.ssx-hd:has(.ssx-hd-land:focus-within) .ssx-hd-standard{display:none}
.ssx-hd-panel-kopf{margin-bottom:18px}
.ssx-hd-panel-rolle{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#C4B08C;margin-bottom:8px}
.ssx-hd-panel-name{font-size:30px;line-height:1.1;font-weight:900;color:#fff;letter-spacing:-.02em;margin:0 0 8px}
.ssx-hd-panel-zahl{font-size:13.5px;line-height:1.6;color:rgb(255 255 255 / .45);margin:0;max-width:52ch}
.ssx-hd-staedte{display:grid;grid-template-columns:repeat(3,1fr);gap:1px 14px;align-content:start;flex:1 1 auto;overflow-y:auto;margin-bottom:14px}
.ssx-hd-stadt{display:block;padding:5px 8px;border-radius:7px;font-size:13px;color:rgb(255 255 255 / .55);text-decoration:none;transition:background .15s,color .15s}
.ssx-hd-stadt:hover{background:rgb(255 255 255 / .07);color:#fff}
.ssx-hd-alle{align-self:flex-start;margin-top:auto;font-size:13px;font-weight:700;color:#C4B08C;text-decoration:none}
.ssx-hd-alle:hover{color:#fff}
.ssx-hd-karten{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px}
.ssx-hd-karte{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;border:1px solid rgb(255 255 255 / .08);text-decoration:none;transition:border-color .25s,background .25s}
.ssx-hd-karte:hover{border-color:rgb(196 176 140 / .35);background:rgb(255 255 255 / .04)}
.ssx-hd-karte strong{font-size:15px;font-weight:800;color:#fff}
.ssx-hd-karte span{font-size:12.5px;color:rgb(255 255 255 / .42)}
.ssx-hd-fakten{display:flex;gap:34px;margin-top:auto}
.ssx-hd-fakten strong{display:block;font-size:19px;font-weight:900;color:#fff}
.ssx-hd-fakten span{font-size:11.5px;color:rgb(255 255 255 / .38)}
.ssx-hd-fuss{margin-top:16px;font-size:12.5px;color:rgb(255 255 255 / .32)}
@media (max-width:1023px){
  .ssx-hd{grid-template-columns:1fr;min-height:0;gap:18px}
  .ssx-hd-spalte{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ssx-hd-panel{display:none !important}
  .ssx-hd-standard{position:static;left:auto;right:auto;bottom:auto;padding:22px 20px}
  .ssx-hd-titel{padding:11px 13px;border-color:rgb(255 255 255 / .07)}
  .ssx-hd-pfeil{opacity:.5;transform:none}
  .ssx-hd-fakten{gap:20px;flex-wrap:wrap}
}
@media (max-width:520px){ .ssx-hd-spalte{grid-template-columns:1fr} }
/* === ENDE NACHTRAG 3 === */

/* === NACHTRAG 6 STAFFSEC 27.07.2026 - Barrierefreiheit === */
.ssx-sprung{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ssx-sprung:focus{position:fixed;left:16px;top:14px;z-index:100;width:auto;height:auto;
  padding:12px 20px;border-radius:10px;background:#0D0F11;color:#fff;font-size:14px;font-weight:700;
  text-decoration:none;box-shadow:0 8px 30px rgb(0 0 0 / .35);outline:3px solid #C4B08C;outline-offset:2px}
/* Fokus im Standorte-Menue klar sichtbar (Tastaturbedienung) */
.ssx-land-titel:focus-visible,.ssx-stadt:focus-visible,.ssx-standard-karte:focus-visible,
.ssx-hd-titel:focus-visible,.ssx-hd-stadt:focus-visible,.ssx-hd-karte:focus-visible,
.ssx-staedte-alle:focus-visible,.ssx-hd-alle:focus-visible{outline:3px solid #C4B08C;outline-offset:2px;border-radius:6px}
/* === ENDE NACHTRAG 6 === */

/* === NACHTRAG 7 STAFFSEC 27.07.2026 - Aufklappmenue haelt beim Runterfahren === */
header nav > div.relative > button{padding-bottom:20px;margin-bottom:-12px}
header nav > div.relative > div{overflow:visible}
header nav > div.relative > div::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
/* die Staedte-Spalte des Standorte-Menues braucht die Rundung weiterhin sauber */
.ssx-menue-standorte .ssx-standorte{border-radius:12px;overflow:hidden}
/* === ENDE NACHTRAG 7 === */

/* === NACHTRAG 8 STAFFSEC 27.07.2026 - Ortschips im Einsatzumkreis === */
[class~="ssx-ortchip"]{text-decoration:none;display:inline-block}
[class~="ssx-ortchip"]:hover{border-color:#C4B08C;background:#fff}
[class~="ssx-ortchip"]:focus-visible{outline:2px solid #C4B08C;outline-offset:2px}
/* === ENDE NACHTRAG 8 === */



/* === NACHTRAG 10 STAFFSEC 27.07.2026 - Zitat-Baustein Startseite === */
.ssx-zitat-bild{width:150px;height:210px}
@media (min-width:1024px){.ssx-zitat-bild{width:200px;height:280px}}
.ssx-zitat-rolle{display:block;margin-top:10px;font-size:14px;color:#6B7280}
.ssx-zitat-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:1023px){.ssx-zitat-aktion{justify-content:center}}
/* === ENDE NACHTRAG 10 === */



/* === NACHTRAG 9 STAFFSEC 27.07.2026 - Abstaende, zentrierte Nachweise, Logoband === */

/* (a) Abstand zwischen den Abschnitten - MITWACHSEND statt in Stufen.
   Erste Fassung setzte feste Werte (56/64/72/80 auf dem Handy, 88-112 ab 1024 px). Claude Design
   hat am 28.07. den Kern benannt: die Vorlage hatte py-28/32/36/44 auf JEDER Breite, und das ist
   die Hauptursache der 18.841 px Handy-Hoehe. clamp() loest beides in einer Regel - unten so
   knapp wie noetig, oben so ruhig wie vorher. Werte aus seiner Spezifikation, Abschnitt 3. */
section[class~="py-20"],
section[class~="py-24"],
section[class~="py-28"]{padding-block:clamp(64px,6.6vw,88px)}
section[class~="py-32"]{padding-block:clamp(72px,7.4vw,96px)}
/* Tailwinds lg:-Regeln stehen selbst in einer Media Query und wuerden sonst wieder greifen */
@media (min-width:1024px){
  section[class~="lg:py-32"],
  section[class~="lg:py-36"]{padding-block:clamp(64px,6.6vw,88px)}
  section[class~="lg:py-40"],
  section[class~="lg:py-44"]{padding-block:clamp(72px,7.4vw,96px)}
}
/* der Nachweis-Block ist keine <section>, deshalb einzeln */
.ssx-vt{padding-block:clamp(56px,7vw,88px) clamp(60px,7.2vw,92px);padding-left:0;padding-right:0}

/* (b) Nachweise zentriert - Kopf, Karten und Siegel */
.ssx-vt-kopf{margin-left:auto;margin-right:auto;text-align:center}
.ssx-vt-karte{align-items:center;text-align:center;padding:26px 18px}
.ssx-vt-bild{width:58px;height:58px}
.ssx-vt-karte strong{font-size:15px}
.ssx-vt-ref{text-align:center}
.ssx-vt-reflabel{margin-bottom:24px}

/* (c) echte Kundennamen lesbar */
.ssx-vt-logo img{opacity:.68}
.ssx-vt-logo:hover img{opacity:1}

/* (c) laufendes Band der Referenzlogos - Inhalt ist im Bundle verdoppelt.
   NAHT-RECHNUNG (Befund von Claude Design, nachgerechnet und bestaetigt 27.07.2026):
   20 Kacheln haben nur 19 Luecken. scrollWidth = 20x168 + 19x12 = 3588, die Haelfte also 1794 -
   ein echter Kachelzyklus ist aber 10x168 + 10x12 = 1800. translateX(-50%) war damit 6 px zu kurz,
   das Band ist bei jedem Durchlauf um 6 px gesprungen. Auf 109 Seiten.
   Loesung: padding-right in Lueckenbreite -> scrollWidth 3600, Haelfte 1800 = Zyklus. Naht exakt 0. */
.ssx-vt-band{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ssx-vt-band .ssx-vt-logos{display:flex;width:max-content;gap:12px;padding-right:12px;animation:ssxBand 46s linear infinite}
.ssx-vt-band:hover .ssx-vt-logos{animation-play-state:paused}
.ssx-vt-band .ssx-vt-logo{flex:0 0 168px;height:78px}
@keyframes ssxBand{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* Ohne Bewegung ist die Umlaufkopie sichtbar - dann wieder auf die echten zehn Logos zurueck,
     im gleichen Raster wie die statische Fassung. Zweiter Befund von Claude Design. */
  .ssx-vt-band .ssx-vt-logos{animation:none;display:grid;grid-template-columns:repeat(5,1fr);width:auto;padding-right:0;justify-content:center}
  .ssx-vt-band .ssx-vt-logo:nth-child(n+11){display:none}
  .ssx-vt-band{mask-image:none;-webkit-mask-image:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:1023px){
  .ssx-vt-band .ssx-vt-logos{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce) and (max-width:639px){
  .ssx-vt-band .ssx-vt-logos{grid-template-columns:repeat(2,1fr)}
}

/* (d) Ansprechpartner mit Gesicht (ansprechpartner-block.js) - eigene Klassen, weil Tailwind
       nur kompiliert, was zur Bauzeit im Quelltext stand (L-108). */
.ssx-ap{display:grid;grid-template-columns:264px 1fr;gap:44px;align-items:center;
  padding:36px;border:1px solid #E8E5DE;border-radius:24px;background:#FAFAF8}
.ssx-ap-bildrahmen{position:relative;border-radius:20px;overflow:hidden;background:#EFEDE7;
  box-shadow:0 18px 44px rgb(45 52 54 / .10)}
.ssx-ap-bild{display:block;width:100%;height:auto;object-fit:cover}
/* min-width:0 verhindert, dass die Textspalte im Grid über den Rand hinauswächst -
   klassen-pruefung.js hatte ssx-ap-text zu Recht als Klasse ohne Regel gemeldet */
.ssx-ap-text{min-width:0}
.ssx-ap-label{display:block;font-size:11px;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase;color:#7A6435;margin-bottom:10px}
.ssx-ap-name{font-size:30px;line-height:1.15;font-weight:900;color:#2D3436;margin:0 0 6px}
.ssx-ap-rolle{display:block;font-size:14px;color:#6B7280;margin-bottom:18px}
.ssx-ap-satz{font-size:15px;line-height:1.9;color:#4B5563;margin:0 0 26px;max-width:46rem}
.ssx-ap-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767px){
  .ssx-ap{grid-template-columns:1fr;gap:26px;padding:24px;text-align:center}
  .ssx-ap-bildrahmen{max-width:220px;margin:0 auto}
  .ssx-ap-name{font-size:25px}
  .ssx-ap-satz{margin-left:auto;margin-right:auto}
  .ssx-ap-knoepfe{justify-content:center}
}
/* === ENDE NACHTRAG 9 === */


/* === NACHTRAG 4 STAFFSEC 27.07.2026 - Lesbarkeit === */
/* Knopfschrift: die Basisregel .btn-primary traegt color:#2D3436 selbst (5,8:1). Die frueher
   hier stehende Wiederholung ist am 28.07. entfernt worden - eine Regel, eine Wahrheit.
   Endzustand laut Abschnitt 4 der Spezifikation, gegengeprueft an 455 Knoepfen. */
/* 11-px-Goldlabels auf Weiss waren 2,54-2,72:1 (182 Stellen) -> dunkleres Gold = 4,9:1.
   Die dunkle Variante der Labels nutzt #C4B08C und bleibt unangetastet. */
[class~="text-[#B09A72]"]{color:#7A6435}
/* Kartentitel im Hover: Gold auf hellen Karten war 2,72:1 (1494 Stellen, 110 Seiten).
   Die Regel von gestern traf nur den Token text-[#B09A72], nicht die Hover-Variante -
   ~= vergleicht ganze Tokens, und group-hover:text-[...] ist ein anderer. Jetzt beide.
   #7A6435 ist derselbe Ton, den acht .ssx-Regeln fuer Gold auf Hell fuehren.
   Gemessen: 4,94:1 auf Weiss, 4,72:1 auf Kartenflaeche, 4,61:1 auf hellem Abschnitt. */
.group:hover [class~="group-hover:text-[#B09A72]"]{color:#7A6435}
/* Kleintext-Graustufen: die drei Ueberschreibungen sind am 28.07.2026 entfallen, weil das
   Markup jetzt die richtigen Namen traegt: text-[#5C6467] und text-[#6B7280]. Vorher rendete
   text-[#7B7B7B] als #5C6467 - die Farbe stimmte, der Name log. 275 Stellen auf 86 Seiten. */


/* SCHRITT 1 der Aufraeum-Reihenfolge (Claude Design, 28.07.2026): der NEUE Klassenname
   braucht seine Regel, BEVOR das Markup ihn traegt. Tailwind kompiliert nur, was zur
   Bauzeit im Quelltext stand - text-[#5C6467] gab es dort nie. Ohne diese Zeile faellt
   die Farbe der 25 umbenannten Elemente still auf den geerbten Wert.
   text-[#6B7280] braucht das nicht, seine Tailwind-Regel existiert (4891 Nutzungen). */
[class~="text-[#5C6467]"]{color:#5C6467}

/* Platzhalter im Kontaktformular lief ebenfalls auf #9B9690 */


[class~="placeholder-[#6B7280]"]::placeholder{color:#6B7280}
[class~="placeholder-[#6B7280]"]::-moz-placeholder{color:#6B7280}
/* Kopfzeilen-Navigation ueber mittelhellen Fotos: /70 war 3,3-4,5:1.
   ACHTUNG: Tailwind hat im Bundle nur Deckkraefte bis /70 kompiliert - /90 gab es nicht,
   die Menuepunkte erbten dadurch die dunkle Grundfarbe (dunkel auf dunklem Hero).
   Genau der Fehler aus L-108, hier in eigener Sache. Regel deshalb hier nachgetragen. */
[class~="text-white/90"]{color:rgb(255 255 255 / .9)}
/* Auch mit 90 % Weiss bleibt die Navigation über den hellsten Hero-Fotos unter 4,5:1
   (gemessen 3,3-4,5:1 auf /objektschutz, /staplerfahrer, Branchenseiten). Statt die Schrift
   weiter aufzuhellen bekommt die durchsichtige Kopfzeile einen dezenten dunklen Verlauf -
   er ist über dunklen Fotos praktisch unsichtbar und rettet die hellen. */
header[class*="bg-transparent"]{isolation:isolate}
header[class*="bg-transparent"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgb(8 10 14 / .62) 0%, rgb(8 10 14 / .38) 55%, rgb(8 10 14 / 0) 100%)}
/* === ENDE NACHTRAG 4 === */

/* === NACHTRAG 11 STAFFSEC 27.07.2026 - halbdurchsichtige weisse Texte === */
/* NACHGEZOGEN 28.07.2026: meine erste Fassung setzte alles pauschal auf 60 % und deckte nur
   /30, /35, /40 ab. Claude Designs Spezifikation (staffsec-design-tokens.md, Abschnitt 1) hat
   drei abgestufte Tokens statt eines Wertes - die Abstufung bleibt damit erhalten, statt drei
   Ebenen auf eine zu ziehen. Uebernommen mit seinen Werten und seiner Zuordnung:
     --auf-dunkel-2  .78 (10,3:1)  Fliesstext auf Dunkel        <- white/45, /50
     --auf-dunkel-3  .72 ( 9,1:1)  Karten-Text auf Dunkel       <- white/40
     --auf-dunkel-4  .62 ( 6,6:1)  kleinste Beschriftung, Brotkrume <- white/25, /30, /35
   Seine Regel dahinter: jede Deckkraft unter 50 % auf Dunkel wird ersetzt. Damit sind auch
   /25 (3 Stellen) und /45 (9 Stellen) erfasst, die ich uebersehen hatte; /50 (35 Stellen) lag
   knapp ueber 4,5:1 und wird trotzdem angehoben, weil es Fliesstext ist.
   /60, /70, /90 bleiben unberuehrt - die liegen ohnehin darueber. */
[class~="text-white/25"]{color:rgb(255 255 255 / .62)}
[class~="text-white/30"]{color:rgb(255 255 255 / .62)}
[class~="text-white/35"]{color:rgb(255 255 255 / .62)}
[class~="text-white/40"]{color:rgb(255 255 255 / .72)}
[class~="text-white/45"]{color:rgb(255 255 255 / .78)}
[class~="text-white/50"]{color:rgb(255 255 255 / .78)}
/* === ENDE NACHTRAG 11 === */

/* === NACHTRAG 12 STAFFSEC 28.07.2026 - Branchen-Karten als Listenzeile auf dem Handy === */
@media (max-width:639px){
  /* Raster: Zeilen stehen dichter als Karten, sonst fressen 8 Luecken a 20 px die Ersparnis
     teilweise wieder auf. :has() trifft nur genau dieses Raster - faellt die Unterstuetzung
     aus, bleibt es bei gap-5, also 20 px. Kein Schaden, nur weniger Ersparnis. */
  [class~="gap-5"]:has([class~="min-h-[280px]"]){gap:10px}
  /* die Karte selbst: aus dem Bildfeld wird eine zweispaltige Zeile */
  [class~="min-h-[280px]"]{
    display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;
    min-height:0;height:auto;padding:10px;border-radius:18px;
    background:#FAFAF8;border:1px solid #E8E5DE;overflow:hidden;
  }
  /* Vorschaubild links - raus aus der absoluten Lage, feste Kachel */
  [class~="min-h-[280px]"] > img{
    position:static;inset:auto;width:88px;height:88px;
    border-radius:12px;object-fit:cover;
  }
  /* Verlauf und Hover-Rahmen sind auf hellem Grund sinnlos */
  [class~="min-h-[280px]"] > div[class~="bg-gradient-to-t"]{display:none}
  [class~="min-h-[280px]"] > div[class~="opacity-0"]{display:none}
  /* Textblock rechts: aus absolut-unten wird normaler Fluss */
  [class~="min-h-[280px]"] > div[class~="p-7"]{position:static;inset:auto;padding:0;min-width:0}
  /* Schrift muss auf hellem Grund umgestellt werden - Titel war text-white,
     Beschreibung text-white/40 (Nachtrag 11 macht daraus .72 Weiss) */
  [class~="min-h-[280px]"] h3{color:#2D3436;font-size:16px;line-height:1.25;margin-bottom:4px}
  [class~="min-h-[280px]"] p{color:#5C6467;font-size:13px;line-height:1.5;margin-bottom:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* "Mehr erfahren" haengt an :hover - auf dem Handy gibt es kein Hover, es waere eine
     dauerhaft unsichtbare Zeile, die Platz kostet */
  [class~="min-h-[280px]"] div[class~="translate-y-4"]{display:none}
}
/* === ENDE NACHTRAG 12 === */


/* === NACHTRAG 5 STAFFSEC 27.07.2026 - Nachweise und Referenzen === */
.ssx-vt{position:relative;z-index:20;padding:88px 0 92px;background:#F8F7F4;border-top:1px solid #EDEAE3}
.ssx-vt-innen{max-width:80rem;margin:0 auto;padding:0 16px}
.ssx-vt-kopf{max-width:46rem;margin-bottom:38px}
.ssx-vt-label{display:block;font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#7A6435;margin-bottom:12px}
.ssx-vt-h2{font-size:clamp(1.65rem,3vw,2.6rem);line-height:1.1;font-weight:900;letter-spacing:-.02em;color:#2D3436;margin:0 0 14px}
.ssx-vt-text{font-size:16px;line-height:1.8;color:#6B7280;margin:0}
.ssx-vt-karten{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:46px}
.ssx-vt-karte{display:flex;flex-direction:column;gap:12px;padding:20px 18px;background:#fff;border:1px solid #E8E5DE;border-radius:16px;transition:border-color .3s,box-shadow .3s,transform .3s}
.ssx-vt-karte:hover{border-color:rgb(196 176 140 / .45);box-shadow:0 8px 30px rgb(45 52 54 / .06);transform:translateY(-2px)}
.ssx-vt-bild{width:46px;height:46px;object-fit:contain}
.ssx-vt-karte strong{display:block;font-size:14.5px;font-weight:800;color:#2D3436;margin-bottom:5px}
.ssx-vt-karte span{display:block;font-size:12.5px;line-height:1.6;color:#5C6467}
.ssx-vt-ref{border-top:1px solid #E8E5DE;padding-top:30px}
.ssx-vt-reflabel{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7A6435;margin-bottom:20px}
.ssx-vt-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ssx-vt-logo{display:flex;align-items:center;justify-content:center;height:84px;padding:14px;background:#FAFAF8;border:1px solid #E8E5DE;border-radius:14px;transition:border-color .4s}
.ssx-vt-logo:hover{border-color:rgb(196 176 140 / .4)}
.ssx-vt-logo img{max-width:112px;max-height:44px;object-fit:contain;opacity:.45;transition:opacity .4s}
.ssx-vt-logo:hover img{opacity:.85}
@media (max-width:1023px){
  .ssx-vt{padding:64px 0 68px}
  .ssx-vt-karten{grid-template-columns:repeat(2,1fr)}
  .ssx-vt-logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .ssx-vt-karten{grid-template-columns:1fr}
  .ssx-vt-logos{grid-template-columns:repeat(2,1fr)}
  .ssx-vt-logo{height:74px}
}
/* === ENDE NACHTRAG 5 === */

/* === NACHTRAG 2 STAFFSEC 27.07.2026 - Standorte-Menue === */
.ssx-menue-standorte{padding:0;min-width:0;width:900px;overflow:hidden}
.ssx-standorte{position:relative;display:flex;min-height:566px}
.ssx-laender{width:298px;flex:0 0 298px;border-right:1px solid #E8E5DE;padding:14px 0;background:#fff}
.ssx-gruppe{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7A6435;padding:0 22px 7px}
.ssx-gruppe-zwei{padding-top:13px;margin-top:9px;border-top:1px solid #F1EFEA}
.ssx-land{position:static}
.ssx-land-titel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 22px;font-size:13.5px;color:#4B5563;text-decoration:none;transition:background .15s,color .15s}
.ssx-land:hover>.ssx-land-titel,.ssx-land:focus-within>.ssx-land-titel{background:#F8F7F4;color:#2D3436;font-weight:600}
.ssx-pfeil{color:#C4B08C;font-size:15px;line-height:1;opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-3px)}
.ssx-land:hover .ssx-pfeil,.ssx-land:focus-within .ssx-pfeil{opacity:1;transform:translateX(0)}
.ssx-staedte{display:none;position:absolute;top:0;left:298px;right:0;bottom:0;background:#fff;padding:22px 26px 20px;z-index:2}
.ssx-land:hover>.ssx-staedte,.ssx-land:focus-within>.ssx-staedte{display:flex;flex-direction:column}
.ssx-staedte-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid #E8E5DE}
.ssx-staedte-name{font-size:15px;font-weight:800;color:#2D3436;letter-spacing:-.01em}
.ssx-staedte-rolle{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7A6435}
.ssx-staedte-liste{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;align-content:start;flex:1 1 auto;overflow-y:auto}
.ssx-stadt{display:block;padding:5px 8px;font-size:13px;color:#6B7280;text-decoration:none;border-radius:6px;transition:background .12s,color .12s}
.ssx-stadt:hover{background:#F8F7F4;color:#2D3436}
.ssx-staedte-hinweis{font-size:13px;line-height:1.6;color:#6B7280;max-width:46ch;flex:1 1 auto}
.ssx-staedte-alle{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:#7A6435;text-decoration:none}
.ssx-staedte-alle:hover{color:#2D3436}
.ssx-standard{position:absolute;top:0;left:298px;right:0;bottom:0;padding:22px 26px;display:flex;flex-direction:column;background:#fff;z-index:1}
.ssx-standard-kopf{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A6435;margin-bottom:14px}
.ssx-standard-liste{display:flex;flex-direction:column;gap:10px}
.ssx-standard-karte{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #E8E5DE;border-radius:10px;text-decoration:none;transition:border-color .15s,background .15s}
.ssx-standard-karte:hover{border-color:rgb(196 176 140 / .55);background:#F8F7F4}
.ssx-standard-karte strong{font-size:14px;color:#2D3436}
.ssx-standard-karte span{font-size:12px;color:#6B7280}
.ssx-standard-fuss{margin-top:auto;font-size:12px;color:#6B7280;line-height:1.5}
/* === ENDE NACHTRAG 2 === */

/* UEBERSCHRIFTEN-ROLLEN, Claude Design 28.07.2026. Zwei Regeln statt sieben Muster.
   Die Rolle steht als Attribut am h2 und kommt aus dem Feldnamen der Daten. Ein neuer
   Abschnitt erklaert damit seine Rolle, statt sie ueber die Klassenkette zufaellig zu erben.
   Die Tailwind-Groessenklassen bleiben im Markup stehen: faellt dieser Nachtrag weg, sehen
   die Ueberschriften aus wie vorher (48 px) und nicht wie ungestylter Text.
   Argument bleibt bei 48 - deshalb braucht "argument" keine eigene Regel. */
[data-rolle="struktur"]{font-size:clamp(21px,2.4vw,28px) !important}
[data-rolle="struktur-klein"]{font-size:clamp(20px,2.2vw,26px) !important}


/* ── NACHTRAG 12: Zwischen-CTA als helle Zaesur (08.08.2026) ───────────────────
   War ein 376 px hoher, vollflaechig schwarzer Balken mit ~190 Zeichen Inhalt auf
   109 Seiten (Manuel: "vollschwarze Balken ohne Foto, das geht halt nicht").
   Jetzt warmweiss mit Goldkante nach Claude Designs Spezifikation. Die Kante steht
   hier und nicht als Tailwind-Klasse, weil Tailwind nur gebaute Klassen kennt (L-108). */
.ssx-zwischen-cta{border-top:3px solid #C4B08C}
/* Breite und Polster hier und NICHT als max-w-[900px]: Tailwind erzeugt nur Klassen,
   die zur Bauzeit im Quelltext standen - nachtraeglich eingefuegte wirken nicht (L-108).
   Ohne diese Regel lief der Block ueber die volle Breite, waehrend alle anderen
   Abschnitte zentriert sind. Beim Ansehen aufgefallen, nicht beim Messen. */
.ssx-zwischen-cta>div{max-width:1120px;margin-left:auto;margin-right:auto}


/* === NACHTRAG 13 STAFFSEC 14.08.2026 - Mobile Optimierung (gemessen, nicht geraten) === */

/* ---------- (6) 100vh-Falle: auf Handys springt die Adressleiste ---------- */
@supports (height: 100dvh) {
  [class~="h-screen"]      { height: 100dvh; }
  [class~="min-h-screen"]  { min-height: 100dvh; }
}

/* ---------- (7) Notch und Home-Balken: gilt auf allen Geraeten ---------- */
/* Wirkt nur zusammen mit viewport-fit=cover im Viewport-Meta (wird separat gesetzt). */
@media (max-width: 1023px) {
  header, footer, .ssx-fuss {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  footer, .ssx-fuss { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

@media (max-width: 639px) {

  /* ---------- (1) Hero: Standbild sichtbar machen ---------- */
  /* Der Querverlauf ist fuer breite Bildschirme gebaut. Auf dem Handy von oben nach
     unten verlaufen, damit die Mitte des Bildes durchkommt und der Text unten trotzdem
     auf dunklem Grund steht. */
  div[class*="bg-gradient-to-r"][class*="from-[#060709]/90"] {
    background-image: linear-gradient(to bottom,
      rgba(6,7,9,.45) 0%, rgba(6,7,9,.30) 40%, rgba(6,7,9,.88) 100%) !important;
  }
  /* Der zweite Verlauf (unten dunkel) darf schwaecher werden, sonst summieren sich beide */
  div[class*="bg-gradient-to-t"][class*="from-[#060709]/70"] {
    background-image: linear-gradient(to top,
      rgba(6,7,9,.35) 0%, rgba(0,0,0,0) 55%) !important;
  }
  /* Hochformat: object-cover schneidet 16:9 hart zu. Etwas nach oben ruecken, damit die
     Silhouette im Bild bleibt und nicht nur der leere Himmel. */
  .ssx-hero-video { object-position: 50% 38%; }

  /* ---------- (2) Zweispaltige Kennzahlen-Raster einspaltig ---------- */
  /* Genau das Raster aus dem Befund: grid-cols-2 lg:grid-cols-4 (6 Fundstellen im Bundle) */
  [class~="grid-cols-2"][class~="lg:grid-cols-4"] { grid-template-columns: 1fr !important; }
  /* Innenabstand der Karten in diesem Raster war auf p-8 (32 px) — auf 393 px zu viel */
  [class~="grid-cols-2"][class~="lg:grid-cols-4"] > * { padding-left: 18px; padding-right: 18px; }

  /* ---------- (3) Rasterkinder duerfen schrumpfen ---------- */
  /* min-width:auto ist der Standardwert und der haeufigste Grund fuer beschnittenen
     Inhalt in Grid/Flex. Nur auf Raster-/Flex-Kinder angewandt, nicht global. */
  [class*="grid-cols"] > *, [class*="flex"] > * { min-width: 0; }
  /* lange Woerter und URLs sollen umbrechen statt zu ueberstehen */
  h1, h2, h3, h4, p, li, a, span { overflow-wrap: break-word; }

  /* ---------- (4) Tippziele auf Mindestmass ---------- */
  button[aria-label="Navigation"] { width: 44px !important; height: 44px !important; }
  /* Links in Kopf- und Fusszeile bekommen echte Trefflaeche, ohne die Optik zu verschieben */
  header nav a, footer a, .ssx-fuss a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Telefon- und Mail-Links sind die wichtigsten Knoepfe auf einem Handy */
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---------- (5) Schriftgroessen anheben (je eine Stufe, Fliesstext auf 16 px) ---------- */
  [class~="text-[11px]"] { font-size: 12px !important; }
  [class~="text-[12px]"] { font-size: 13px !important; }
  [class~="text-[13px]"] { font-size: 14px !important; }
  [class~="text-[14px]"] { font-size: 15px !important; }
  [class~="text-[15px]"] { font-size: 16px !important; }
  /* Zeilenabstand mitziehen, sonst wird es enger statt lesbarer */
  [class~="text-[11px]"], [class~="text-[12px]"], [class~="text-[13px]"] { line-height: 1.5; }
  [class~="text-[14px]"], [class~="text-[15px]"] { line-height: 1.6; }

  /* ---------- Feinschliff, der aus den Screenshots kam ---------- */
  /* Die Kennzahlen-Karten im Hero standen halb unter dem Bildrand */
  [class~="grid-cols-2"][class~="lg:grid-cols-4"] { gap: 12px !important; }
}
/* === ENDE NACHTRAG 13 === */





/* === NACHTRAG 13b STAFFSEC 14.08.2026 - Hero-Bildband, Wortumbruch, Tippziele === */
@media (max-width: 639px) {

  /* ---------- (1) Hero-Standbild als Bildband oben ---------- */
  /* Statt eines 5-fach vergroesserten Bildstreifens: ein Band im oberen Bereich,
     das nach unten in den dunklen Grund ausblendet.
     WICHTIG (Befund 14.08.): Das poster-Attribut allein malt auf dem Handy NICHTS —
     das <video> hat dort gar keine Quelle (src wird erst spaet aus data-ssx-src gesetzt,
     auf dem Desktop lief deshalb das Video, auf dem Handy blieb die Flaeche leer).
     Deshalb liegt das Standbild hier zusaetzlich als CSS-Hintergrund auf dem Element:
     das malt immer, und sobald echte Videobilder da sind, deckt das Video es ab. */
  /* Drei Befunde in Reihe, alle gemessen — deshalb dieser Weg:
     (a) Das Video stand auf opacity:0. Die Einblende-Logik schaltet es erst sichtbar,
         wenn Videobilder da sind (readyState>0); auf dem Handy bekommt es NIE eine
         Quelle (src fehlt), also blieb die Flaeche dauerhaft schwarz.
     (b) Mit erzwungener Sichtbarkeit malt der Browser das poster-Bild
         (/assets/video/hero-standbild.webp) — und darin ist das Logo als grosses
         Wasserzeichen EINGEBRANNT. Es lag genau hinter der Ueberschrift (sichtgeprueft).
     (c) Ein CSS-Hintergrund am Video hilft nicht, weil das poster darueber malt.
     Loesung: Video auf dem Handy ausblenden und das Bildband am Elternelement zeichnen,
     mit einem echten Staffsec-Foto ohne Wasserzeichen (Sicherheitsmitarbeiter mit
     unserem Namen auf der Weste). Ausschnitt 30%/45% stellt den dunklen Mitarbeiter
     nach vorn, damit weisse Schrift darauf traegt. */
  video.ssx-hero-video { display: none !important; }
  div[class~="z-[1]"]:has(> video.ssx-hero-video) {
    height: 42dvh;
    bottom: auto;
    background-image: url("/assets/staffsec/veranstaltungsschutz-ordner.webp");
    background-size: cover;
    background-position: 30% 45%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  }
  /* Geraete ohne dvh-Einheit */
  @supports not (height: 42dvh) {
    div[class~="z-[1]"]:has(> video.ssx-hero-video) { height: 42vh; }
  }
  /* Der Querverlauf darf ueber dem Bildband nicht mehr abdunkeln als noetig —
     unten bleibt es dunkel, damit die Schrift traegt. */
  div[class*="bg-gradient-to-r"][class*="from-[#060709]/90"] {
    background-image: linear-gradient(to bottom,
      rgba(6,7,9,.30) 0%, rgba(6,7,9,.42) 32%, rgba(6,7,9,.80) 62%, rgba(6,7,9,.96) 100%) !important;
  }

  /* ---------- (2) lange Komposita umbrechen ---------- */
  li, .ssx-liste li, ul[class*="space-y"] li { overflow-wrap: anywhere; hyphens: auto; }

  /* ---------- (3) restliche Tippziele ---------- */
  /* Brotkrumen */
  nav[aria-label] a, div[class*="items-center"][class*="gap-2"] > a[class*="hover:text-white"] {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Datenschutz-Link im Cookie-Hinweis */
  .ssx-cc-t a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* === ENDE NACHTRAG 13b === */

/* === NACHTRAG 13c STAFFSEC 14.08.2026 - mittige Ausrichtung auf dem Handy === */
@media (max-width: 639px) {

  /* ---------- 1) Mitte als Grundhaltung in den Inhaltsabschnitten ---------- */
  main section,
  main section > div,
  section[class*="py-"],
  section[class*="py-"] > div,
  div[class*="max-w-7xl"],
  div[class*="max-w-4xl"],
  div[class*="max-w-3xl"],
  div[class*="max-w-2xl"] {
    text-align: center;
  }
  /* SCHNITT 1: siehe Aufraeumplan */
  /* Bloecke, die per mx-auto schon mittig stehen sollen, aber am Rand kleben */
  section h1, section h2, section h3 { margin-left: auto; margin-right: auto; }

  /* ---------- 2) Ausnahmen: hier bleibt es linksbuendig ---------- */
  /* Manuels Vorgabe: Aufzaehlungen sind linksbuendig */
  /* 19.08.2026: Die alte Vorgabe "Aufzaehlungen sind linksbuendig" stammt vom Rechner.
     Am Handy erzeugte sie linksbuendige Listen unter mittigen Ueberschriften — Manuels
     Befund "Komischer Strich vor Leistungen und Aufzaehlung". Regel steht jetzt in
     Nachtrag 81; Rechtstexte und Formulare bleiben dort ausgenommen. */
  ul[data-links], ol[data-links] {
    text-align: left !important;
  }
  /* Tabellen und Formulare */
  table, th, td, form, label, input, textarea, select, fieldset, legend {
    text-align: left !important;
  }
  /* Kopfzeile unberuehrt (Logo links, Menue rechts) */
  header, header * { text-align: initial; }
  /* Fusszeile: die Linkspalten bleiben links, Ueberschriften darin auch */
  footer ul, footer li, footer nav, .ssx-fuss ul, .ssx-fuss li { text-align: left !important; }
  /* Brotkrumen bleiben links */
  nav[aria-label] ol, nav[aria-label] li, div[class*="items-center"][class*="gap-2"] { text-align: left !important; }
  /* Logo-Laufbaender: die laufen, Ausrichtung ist dort ohne Bedeutung */
  .ssx-vt-band, .ssx-vt-logos, div[class*="animate-marquee"] { text-align: initial !important; }
  /* Zitate/Anschriften im Impressum und Datenschutz linksbuendig lassen —
     dort sind es Adress- und Paragraphenbloecke, keine Werbetexte */
  main address, main pre { text-align: left !important; }
}
/* === ENDE NACHTRAG 13c === */

/* === NACHTRAG 13d STAFFSEC 14.08.2026 - Symbole, Striche und Icon-Zeilen mittig + Hero-Kontrast === */
@media (max-width: 639px) {

  /* ---------- 1) Senkrechte Bloecke in Abschnitten und Karten mittig ausrichten ----------
     Das ist der eine Hebel, der Symbolkachel + Ueberschrift + Text gemeinsam zentriert. */
  main section div[class*="flex-col"][class*="items-start"],
  main section div[class*="flex-col"]:not([class*="items-"]) {
    align-items: center;
  }

  /* ---------- 2) Symbolkacheln mittig ----------
     Die Kacheln sind quadratische Flex-Kaesten mit fester Groesse (w-12/14/16/20 + h-…).
     Mit margin-inline:auto stehen sie ueber der Ueberschrift statt links daneben. */
  main section [class*="rounded-xl"][class*="justify-center"][class*="items-center"],
  main section [class*="rounded-2xl"][class*="justify-center"][class*="items-center"],
  main section [class*="w-12"][class*="h-12"],
  main section [class*="w-14"][class*="h-14"],
  main section [class*="w-16"][class*="h-16"],
  main section [class*="w-20"][class*="h-20"] {
    margin-left: auto;
    margin-right: auto;
  }
  /* Ausnahme: in Aufzaehlungen und in der Fusszeilen-Linkspalte bleiben Symbole beim Text */
  li [class*="w-12"], li [class*="w-14"], li [class*="w-16"],
  footer ul [class*="w-"], .ssx-fuss ul [class*="w-"] { margin-left: 0; margin-right: 0; }

  /* ---------- 3) Goldene Trennstriche mittig ----------
     Kurze, breite Balken (Hoehe 1-4 px) sind Zierstriche unter Ueberschriften. */
  main section div[class*="h-1"][class*="w-"],
  main section span[class*="h-1"][class*="w-"],
  main section div[class*="h-0.5"][class*="w-"],
  footer div[class*="h-1"][class*="w-"] {
    margin-left: auto; margin-right: auto;
  }
  /* in den Fusszeilen-Spalten bleibt der Strich links unter der Spaltenueberschrift */
  footer div[class*="grid"] div[class*="h-1"] { margin-left: 0; margin-right: 0; }

  /* ---------- 4) Icon-Zeilen (Nadel + Anschrift, Telefon, Mail) mittig ---------- */
  footer div[class*="flex"][class*="items-center"]:not([class*="justify-between"]),
  .ssx-fuss div[class*="flex"][class*="items-center"]:not([class*="justify-between"]),
  main section div[class*="inline-flex"][class*="items-center"] {
    justify-content: center;
  }
  /* Der Logo-Block und die Anschrift im Fuss zentriert, Spaltenlisten unberuehrt */
  footer > div > div[class*="text-center"], footer address { text-align: center; }

  /* ---------- 5) Hero-Kontrast auf den INNEREN Seiten ----------
     Dort liegen teils helle Fotos (unscharfe Menschenmenge auf /veranstaltungsschutz);
     ohne kraeftigen Schleier ist weisse Schrift kaum lesbar. Der Schleier liegt UNTER
     dem Inhalt (z-index 1 gegen z-10 des Textblocks). */
  main section[class*="min-h-[85vh]"]::after,
  main section[class*="min-h-[80vh]"]::after {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(6,7,9,.55) 0%, rgba(6,7,9,.62) 45%, rgba(6,7,9,.88) 100%);
  }
  /* Sicherstellen, dass der Textblock ueber dem Schleier liegt */
  main section[class*="min-h-[85vh]"] > div[class*="z-10"],
  main section[class*="min-h-[80vh]"] > div[class*="z-10"] { position: relative; z-index: 10; }
}
/* === ENDE NACHTRAG 13d === */

/* === NACHTRAG 13e STAFFSEC 14.08.2026 - Zentrierung an den echten Bauformen === */
@media (max-width: 639px) {

  /* ---------- (A) Kicker-Zeilen: goldener Strich + Label ---------- */
  main section div[class~="flex"][class~="items-center"][class~="gap-3"]:not([class~="justify-between"]):not([class~="text-left"]),
  main section div[class~="flex"][class~="items-center"][class~="gap-2"]:not([class~="justify-between"]):not([class~="text-left"]) {
    justify-content: center;
  }

  /* ---------- (B) Nummer- oder Symbolkachel + Ueberschrift ---------- */
  main section div[class~="flex"][class~="items-center"][class~="gap-4"]:not([class~="justify-between"]):not([class~="text-left"]):not([class~="w-full"]),
  main section div[class~="flex"][class~="items-center"][class~="gap-5"]:not([class~="justify-between"]):not([class~="text-left"]):not([class~="w-full"]),
  main section div[class~="flex"][class~="items-center"][class~="gap-6"]:not([class~="justify-between"]):not([class~="text-left"]):not([class~="w-full"]) {
    justify-content: center;
  }

  /* ---------- (C) Symbol + Text in Kaesten: Symbol nach OBEN, alles mittig ----------
     Betrifft die bordierten Kaesten (border + p-5/p-6). Aus der Zeile wird eine Spalte,
     damit Symbol, Titel und Text auf einer Achse stehen. */
  main section div[class~="flex"][class~="p-5"]:not([class~="justify-between"]):not([class~="text-left"]),
  main section div[class~="flex"][class~="p-6"]:not([class~="justify-between"]):not([class~="text-left"]),
  main section div[class~="flex"][class~="p-7"]:not([class~="justify-between"]):not([class~="text-left"]),
  main section div[class~="flex"][class~="p-8"]:not([class~="justify-between"]):not([class~="text-left"]) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ---------- (D) Symbol links / Nummer rechts: Paar mittig statt auseinander ----------
     NUR in Karten, NICHT bei den FAQ-Schaltern (die tragen text-left und w-full). */
  main section div[class~="flex"][class~="items-center"][class~="justify-between"]:not([class~="text-left"]):not([class~="w-full"]) {
    justify-content: center;
    gap: 14px;
  }

  /* ---------- FAQ-Schalter ausdruecklich zurueck auf ihre Bauform ---------- */
  main section button[class~="w-full"],
  main section div[class~="w-full"][class~="justify-between"],
  main section [class~="text-left"] {
    justify-content: space-between !important;
    flex-direction: row !important;
    text-align: left !important;
  }
  main section [class~="text-left"] h3,
  main section [class~="text-left"] p { text-align: left !important; }
}
/* === ENDE NACHTRAG 13e === */

/* === NACHTRAG 13f STAFFSEC 14.08.2026 - umbrechende Reihen und Icon-Zeilen mittig === */
@media (max-width: 639px) {

  /* ---------- (A) umbrechende Reihen mittig ---------- */
  main section div[class~="flex-wrap"]:not([class~="text-left"]):not([class*="marquee"]) {
    justify-content: center;
  }

  /* ---------- (B)+(C) Symbol + Text ohne Innenabstand: Symbol nach oben ---------- */
  main section div[class~="flex"][class~="items-start"][class~="gap-4"]:not([class~="text-left"]):not([class~="w-full"]),
  main section div[class~="flex"][class~="items-start"][class~="gap-5"]:not([class~="text-left"]):not([class~="w-full"]),
  main section div[class~="flex"][class~="items-center"][class~="gap-5"]:not([class~="text-left"]):not([class~="w-full"]):not([class~="justify-between"]) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Laufbaender: unberuehrt lassen (sie sind absichtlich breiter als der Bildschirm) */
  div[class*="animate-marquee"] { justify-content: flex-start !important; flex-direction: row !important; }
}
/* === ENDE NACHTRAG 13f === */

/* === NACHTRAG 13g STAFFSEC 14.08.2026 - Silbentrennung statt Wortabbruch === */
@media (max-width: 639px) {
  /* Ueberschriften: nicht mitten im Wort abbrechen, sondern trennen */
  h1, h2, h3, h4 {
    /* 16.08.2026: overflow-wrap stand hier auf "normal !important" — ohne Rueckfall.
       Greift die Silbentrennung nicht, gibt es dann GAR keinen Umbruch, und das Wort
       laeuft aus dem Bild ("Sicherheitsdienstleistungen" auf allen Bundesland-Seiten).
       break-word bricht nur, wenn es sonst ueberlaufen wuerde — die Trennung behaelt
       ihren Vorrang. Dieselbe Staffelung hat der Fliesstext weiter unten schon. */
    overflow-wrap: break-word !important;
    word-break: normal !important;
    -webkit-hyphens: auto !important; hyphens: auto !important;
    -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  }
  /* Brotkrumen: jedes Glied bleibt ganz, die Zeile darf umbrechen */
  nav[aria-label] { flex-wrap: wrap; justify-content: center; }
  nav[aria-label] a, nav[aria-label] span { white-space: nowrap; overflow-wrap: normal; }
  /* Fliesstext: Trennung statt harter Umbruch, harte Trennung nur als letzter Ausweg */
  p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  /* Aufzaehlungen: die harte Trennung bleibt noetig ("Arbeitnehmerueberlassung" in 161 px),
     aber mit Silbentrennung sieht sie besser aus */
  li { -webkit-hyphens: auto; hyphens: auto; }
}
/* === ENDE NACHTRAG 13g === */

/* === NACHTRAG 14 STAFFSEC 14.08.2026 - zweite Bandreihe, kompakte Fusszeile, Milchglas-Kopfzeile === */

/* ---------- (1) Referenzband: zwei Reihen, gegenlaeufig (alle Breiten) ---------- */
.ssx-vt-band { display: flex; flex-direction: column; gap: 12px; }
.ssx-vt-band .ssx-vt-logos-rueck { animation: ssxBandRueck 46s linear infinite; }
@keyframes ssxBandRueck { from { transform: translateX(-50%) } to { transform: translateX(0) } }
.ssx-vt-band:hover .ssx-vt-logos-rueck { animation-play-state: paused; }
/* Ohne Bewegung waere die Umlaufkopie sichtbar — dann bleibt nur die erste Reihe */
@media (prefers-reduced-motion: reduce) {
  .ssx-vt-band .ssx-vt-logos-rueck { display: none; }
}

/* ---------- (3) Kopfzeile und Menue als Milchglas (bis Tablet) ---------- */
@media (max-width: 1023px) {
  header[class*="bg-white"] {
    background: rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
            backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid rgba(45,52,54,.08) !important;
    box-shadow: 0 10px 34px rgba(6,7,9,.10) !important;
  }
  /* das aufgeklappte Menue: gleiches Glas, unten abgerundet, deutlich abgesetzt */
  header div[class~="bg-white"][class~="border-t"] {
    background: rgba(255,255,255,.62) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid rgba(45,52,54,.08) !important;
    box-shadow: 0 26px 50px rgba(6,7,9,.18);
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
  }
  /* Geraete ohne Weichzeichnung: dann lieber deckend als unlesbar */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header[class*="bg-white"],
    header div[class~="bg-white"][class~="border-t"] { background: rgba(255,255,255,.96) !important; }
  }
}

/* ---------- (2) Fusszeile kompakt und ruhiger ---------- */
@media (max-width: 639px) {
  /* je Abschnitt die volle Breite statt zwei enger Spalten */
  footer div[class*="grid-cols-2"] { grid-template-columns: 1fr !important; gap: 26px !important; }
  /* die Links darin zweispaltig — halbiert die Hoehe der langen Standorte-Liste */
  footer ul { columns: 2; column-gap: 22px; }
  footer ul li { break-inside: avoid; margin: 0; }
  /* Tippziel in der Fusszeile 38 px (Nebenlinks) statt 44 px */
  footer a, .ssx-fuss a { min-height: 38px !important; }
  footer ul { --tw-space-y-reverse: 0; }
  footer ul > li + li { margin-top: 0 !important; }
  /* Spaltenueberschriften mit etwas Luft darueber, damit die Abschnitte trennbar bleiben */
  footer h3, footer h4, footer [class*="tracking-"] { margin-top: 2px; }
}
/* === ENDE NACHTRAG 14 === */

/* === NACHTRAG 15 STAFFSEC 14.08.2026 - Fusszeile reparieren (eigener Fehler aus 13+14) === */
@media (max-width: 639px) {
  /* Kein Grid mehr -> keine impliziten Spalten, kein col-span-Effekt.
     Jeder Abschnitt der Fusszeile steht auf voller Breite. */
  footer div[class*="grid-cols-2"] {
    display: block !important;
    grid-template-columns: none !important;
  }
  footer div[class*="grid-cols-2"] > * {
    width: auto !important;
    min-width: 0;
    margin: 0 0 26px 0 !important;
    display: block !important;
  }
  footer div[class*="grid-cols-2"] > *:last-child { margin-bottom: 0 !important; }
  /* Der Spann darf nichts mehr bewirken */
  footer [class*="col-span-"] { grid-column: auto !important; }

  /* Die Linkliste bleibt zweispaltig — jetzt auf der VOLLEN Breite, also je Spalte ~170 px */
  footer ul { columns: 2; column-gap: 22px; }
  footer ul li { break-inside: avoid; }
  /* Sicherheitsnetz gegen buchstabenweisen Umbruch: lieber trennen als zerlegen */
  footer ul li, footer ul a { overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
}
/* === ENDE NACHTRAG 15 === */

/* === NACHTRAG 16 STAFFSEC 14.08.2026 - margin-auto gegen justify-center, eigene Kleinschrift, Fehlerseite === */
@media (max-width: 639px) {

  /* ---------- (M-3) in Flex-Zeilen keine automatischen Aussenabstaende ----------
     Sonst frisst margin:auto den freien Platz und justify-content:center wirkt nicht mehr. */
  main section div[class*="flex"] > [class*="w-8"][class*="h-8"],
  main section div[class*="flex"] > [class*="w-10"][class*="h-10"],
  main section div[class*="flex"] > [class*="w-11"][class*="h-11"],
  main section div[class*="flex"] > [class*="w-12"][class*="h-12"],
  main section div[class*="flex"] > [class*="w-14"][class*="h-14"],
  main section div[class*="flex"] > [class*="w-16"][class*="h-16"],
  main section div[class*="flex"] > [class*="w-20"][class*="h-20"],
  main section div[class*="flex"] > [class*="rounded-xl"][class*="justify-center"],
  main section div[class*="flex"] > [class*="rounded-2xl"][class*="justify-center"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Die Zierstriche in Kicker-Zeilen ebenso — dort zentriert die Zeile selbst */
  main section div[class*="flex"] > [class*="h-[2px]"],
  main section div[class*="flex"] > [class*="h-[1.5px]"],
  main section div[class*="flex"] > [class*="h-1"] {
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* ---------- (M-4) eigene Kleinschrift-Klassen anheben ---------- */
  .ssx-ap-label, .ssx-vt-label, .ssx-vt-reflabel { font-size: 12px !important; line-height: 1.5; }
  .ssx-hd-rolle { font-size: 12.5px !important; line-height: 1.5; }

  /* ---------- (M-2) Fehlerseite: Tippziele ---------- */
  body > div a, main a { min-height: 44px; }
  main a[class*="inline"], main p a { min-height: 0; }   /* Links IM Fliesstext nicht aufblasen */
}
/* === ENDE NACHTRAG 16 === */



/* === NACHTRAG 17 STAFFSEC 14.08.2026 - unsichtbarer Text und Kontrast === */

/* (1) Helle Karten: weisse Schrift wird dunkel (alle Breiten).
   Kennzeichen einer hellen Karte ist der Rand-Token #E8E5DE bzw. der weisse Grund.
   Dort ist text-white immer ein Uebertragungsfehler aus einer dunklen Vorlage. */
[class*="border-[#E8E5DE]"] [class~="text-white"],
[class*="border-[#E8E5DE]"][class~="text-white"] { color: #2D3436 !important; }
[class*="border-[#E8E5DE]"] [class*="text-white/"] { color: #5C6467 !important; }

/* (2) Knopf auf dunklem Grund: die richtige Variante erzwingen.
   ACHTUNG: Der dunkle Abschnitt traegt seine Farbe als INLINE-STIL
   (style="background: rgb(13, 15, 17)"), NICHT als Klasse — ein klassenbasierter
   Selektor trifft ihn nie. Erster Anlauf ist genau daran gescheitert (gemessen:
   Knopfschrift blieb rgb(45,52,54) auf rgb(13,15,17)). Deshalb ueber das Stil-Attribut. */
section[style*="rgb(13, 15, 17)"] .btn-outline,
section[style*="rgb(13,15,17)"] .btn-outline,
section[style*="rgb(6, 7, 9)"] .btn-outline,
section[style*="rgb(45, 52, 54)"] .btn-outline,
section[class*="bg-[#0D0F11]"] .btn-outline,
section[class*="bg-[#060709]"] .btn-outline,
section[class*="bg-[#2D3436]"] .btn-outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* (3) Goldener Schriftverlauf auf hellem Grund abdunkeln: vorher 2,28-2,60:1.
   Der Verlauf als Gestaltungsmittel bleibt, nur die Stufen werden dunkler. */
.text-gradient {
  background-image: linear-gradient(135deg, #8A7346 0%, #75603A 55%, #8A7346 100%) !important;
}

/* (4) Startseiten-Baustein: Deckkraefte auf die eigene Grenze heben */
.ssx-hd-rolle { color: rgba(255,255,255,.80) !important; }
.ssx-hd-name  { color: rgba(255,255,255,.96) !important; }
.ssx-hd-text  { color: rgba(255,255,255,.78) !important; }
.ssx-hd-label { color: rgba(255,255,255,.82) !important; }

/* (5) Hero-Schleier auch oberhalb von 640 px, dort quer und schwaecher */
@media (min-width: 640px) {
  main section[class*="min-h-[85vh]"]::after,
  main section[class*="min-h-[80vh]"]::after {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(6,7,9,.62) 0%, rgba(6,7,9,.44) 45%, rgba(6,7,9,.20) 100%);
  }
  main section[class*="min-h-[85vh]"] > div[class*="z-10"],
  main section[class*="min-h-[80vh]"] > div[class*="z-10"] { position: relative; z-index: 10; }
}
/* === ENDE NACHTRAG 17 === */

/* === NACHTRAG 18 STAFFSEC 15.08.2026 - Bewegungsreduzierung auf der Startseite === */
@media (prefers-reduced-motion: reduce) {
  /* Laufbaender anhalten — die Logos bleiben sichtbar, nur die Bewegung faellt weg */
  [class*="animate-marquee"] { animation: none !important; transform: none !important; }
  /* Der Inhalt ist im Bundle verdoppelt (nahtloser Umlauf). Im Stillstand wuerde die
     Kopie als Dublette danebenstehen, deshalb umbrechen statt in einer Zeile lassen. */
  [class*="animate-marquee"] { flex-wrap: wrap !important; justify-content: center; width: auto !important; }
  /* Auch die uebrigen Dauerbewegungen der Startseite anhalten */
  [class*="animate-gradient-shift"], [class*="animate-pulse"], [class*="animate-float"] {
    animation: none !important;
  }
  .ssx-hero-video { animation: none !important; }
}
/* === ENDE NACHTRAG 18 === */







/* === NACHTRAG 22 STAFFSEC 15.08.2026 - Bilder hinter dunkle Flaechen (sichere Fassung) === */

/* (1) Risiko-Block auf 334 Seiten. Der HERO ist ausgenommen (min-h-[...]) — der hat
   bereits sein eigenes Bild, und ein zweiter Hintergrund waere dort Verschwendung. */
section[class*="bg-[#0D0F11]"]:not([class*="min-h-["]) {
  background-image:
    linear-gradient(to bottom, rgba(13,15,17,.74) 0%, rgba(13,15,17,.62) 45%, rgba(13,15,17,.84) 100%),
    url("/assets/staffsec/leerstandsbewachung-halle.webp") !important;
  background-size: cover, cover !important;
  background-position: center, 50% 45% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* (2) Info- und Rechtsseiten. Farbe steht dort im style-Attribut, daher ueber den Wert. */
section[style*="rgb(45, 52, 54)"],
section[style*="rgb(45,52,54)"],
section[style*="rgb(13, 15, 17)"],
section[style*="rgb(13,15,17)"],
section[class*="bg-[#2D3436]"] {
  background-image:
    linear-gradient(to bottom, rgba(45,52,54,.70) 0%, rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-buero.webp") !important;
  background-size: cover, cover !important;
  background-position: center, 50% 40% !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* === ENDE NACHTRAG 22 === */


/* === NACHTRAG 23 STAFFSEC 15.08.2026 - Farbsystem von Claude Design === */
/* .text-gradient auf hellem Grund: abschaffen statt nachschaerfen. Ein Verlauf hat zwei
   Endwerte, beide muessten bestehen - der helle Endwert war mit 2,28:1 genau das Problem.
   Auf dunklem Grund bleibt der Verlauf, dort traegt er (schlechtester Wert 7,42:1). */
.text-gradient{
  -webkit-background-clip:border-box;
  background-clip:border-box;
  background-image:none;
  color:#7A6435;
}
[class*="bg-[#0D0F11]"] .text-gradient,
[class*="bg-[#1A1D1F]"] .text-gradient,
[class*="bg-[#2D3436]"] .text-gradient,
[class*="bg-[#060709]"] .text-gradient,
[class*="bg-[#080A0E]"] .text-gradient,
[style*="rgb(13, 15, 17)"] .text-gradient,
[style*="rgb(26, 29, 31)"] .text-gradient,
[style*="rgb(45, 52, 54)"] .text-gradient,
[style*="rgb(6, 7, 9)"] .text-gradient,
[style*="rgb(8, 10, 14)"] .text-gradient{
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-image:linear-gradient(135deg,#D4C5A0,#C4B08C);
}
/* Das Standort-Menue in der Kopfzeile: weisse Schrift mit Deckkraft 0,32-0,5 lag unter Soll.
   Claude Design: mindestens 0,62 -> 7,69:1 auf #0D0F11. */
.ssx-hd-rolle,.ssx-hd-ort,.ssx-hd-label,.ssx-hd-mehr{opacity:1}
.ssx-hd-rolle{color:rgba(255,255,255,.82)}
/* === ENDE NACHTRAG 23 === */

/* NACHTRAG 24 (Kopfzeile durchgehend dunkel) ist am 16.08.2026 durch NACHTRAG 38
   ersetzt worden — er faerbte den Kopf in JEDEM Zustand und machte die Links in den
   weissen Aufklappmenues weiss. Alte Fassung: _arbeit\sicherungen\index-Dp8Q5d5u_vor-nachtrag38_2026-08-16.css */


/* NACHTRAG 25 ist am 16.08.2026 in NACHTRAG 38 aufgegangen. */


/* === NACHTRAG 26 STAFFSEC 15.08.2026 - Vorrang gegen aeltere !important-Regeln === */
/* Verlaufsschrift: auf hellem Grund einfarbig. Mit !important, weil ein frueherer Nachtrag
   das Hintergrundbild mit !important setzt und sonst als Flaeche stehen bleibt. */
.text-gradient,
h1 .text-gradient,h2 .text-gradient,h3 .text-gradient,
span.text-gradient,div.text-gradient{
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  color:#7A6435!important;
  -webkit-text-fill-color:#7A6435!important;
}
/* Auf dunklem Grund bleibt der Verlauf - ebenfalls mit Vorrang und hoeherer Spezifitaet. */
[class*="bg-[#0D0F11]"] .text-gradient,
[class*="bg-[#1A1D1F]"] .text-gradient,
[class*="bg-[#2D3436]"] .text-gradient,
[class*="bg-[#060709]"] .text-gradient,
[class*="bg-[#080A0E]"] .text-gradient,
[class*="bg-black"] .text-gradient,
[style*="rgb(13, 15, 17)"] .text-gradient,
[style*="rgb(26, 29, 31)"] .text-gradient,
[style*="rgb(45, 52, 54)"] .text-gradient,
[style*="rgb(6, 7, 9)"] .text-gradient,
[style*="rgb(8, 10, 14)"] .text-gradient{
  background-image:linear-gradient(135deg,#D4C5A0,#C4B08C)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

/* Der Kopfzeilen-Teil von NACHTRAG 26 ist am 16.08.2026 durch NACHTRAG 38 ersetzt.
   Die Verlaufsschrift-Regeln darueber bleiben unveraendert. */
/* === ENDE NACHTRAG 26 === */


/* === NACHTRAG 27 STAFFSEC 15.08.2026 - Lesbarkeit am Handy === */

/* 1. Fliesstext linksbuendig. Ueberschriften, Kicker und Knoepfe bleiben mittig. */
@media (max-width:1023px){
  p,li,dd,blockquote,
  div[class*="leading-relaxed"],div[class*="leading-[1.9]"],div[class*="leading-[1.8]"]{
    text-align:left;
    text-wrap:pretty;
  }/* SCHNITT 3 (18.08.2026): zentrierend (11px/12px/uppercase/tracking) entfernt - Schriftgroesse ist kein Ausrichtungsmerkmal, der Kontext entscheidet (Nachtrag 58). */
  h1,h2,h3,h4{text-wrap:balance}
}

/* 2. Ueberschriften und Sprungziele nicht hinter der klebenden Kopfzeile parken. */
h1,h2,h3,h4,section,[id]{scroll-margin-top:96px}
@media (max-width:1023px){h1,h2,h3,h4,section,[id]{scroll-margin-top:80px}}

/* 3. Abschnittspolster am Handy zuruecknehmen (gemessen 128 px oben und unten). */
@media (max-width:639px){
  section > div[class*="py-32"],section > div[class*="py-24"],
  div[class*="py-32"],div[class*="py-24"]{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
  /* 16.08.2026: Der Selektor war "section" und traf damit ALLE Abschnitte — auch die,
     deren Polster am <section> selbst haengt. Die standen dadurch auf 0 (21 % aller
     Abschnitte, gemessen mit polster-tragweite.js). Genullt wird jetzt nur noch dort,
     wo ein innerer Kasten das Polster wirklich traegt. Den Rest ordnet Nachtrag 52. */
  section:has(> div[class*="py-32"]),
  section:has(> div[class*="py-24"]){padding-top:0!important;padding-bottom:0!important}
}

/* 4. Menue: volldeckend und dunkel, passend zur Kopfzeile. Schrift hell. */
header div[class*="bg-white"][class*="border-t"]{
  background:#0D0F11!important;
  background-color:#0D0F11!important;
  border-top:1px solid rgba(196,176,140,.22)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
/* 16.08.2026: Knoepfe mit eigener Flaeche ausgenommen — sie tragen justify-center und
   ihren eigenen Goldverlauf. Claude Designs Prinzip: gar nicht erst faerben statt
   hinterher korrigieren. "btn-primary" allein trug nicht, der Knopf fuehrt die Klasse
   nicht; "rounded-md" auch nicht, das haben die Panel-Links ebenso. */
header div[class*="bg-white"][class*="border-t"] a:not([class*="justify-center"]),
header div[class*="bg-white"][class*="border-t"] button:not([class*="justify-center"]),
header div[class*="bg-white"][class*="border-t"] span:not([class*="btn"]):not([class*="justify-center"]){
  color:rgba(255,255,255,.88)!important;
}
header div[class*="bg-white"][class*="border-t"] a:hover,
header div[class*="bg-white"][class*="border-t"] button:hover{color:#fff!important}
header div[class*="bg-white"][class*="border-t"] [class*="btn-primary"],
header div[class*="bg-white"][class*="border-t"] [class*="btn-primary"] span{color:#2D3436!important}
/* Trennlinien im Menue an den dunklen Grund anpassen */
header div[class*="bg-white"][class*="border-t"] [class*="border-"]{border-color:rgba(255,255,255,.12)!important}

/* Scroll-Sperre, solange das Menue offen ist. Greift in Browsern mit :has (Safari 16.4+,
   Chrome 105+); wo es fehlt, bleibt es beim bisherigen Verhalten - schlimmer wird es nicht. */
/* 17.08.2026, SCHWERER FEHLER BEHOBEN — Manuel: "Auf der Handyseite kann ich nicht mal
   scrollen." Hier stand als Selektor `body:has(header div[class*="bg-white"][class*="border-t"])`
   mit `touch-action:none`. Gemeint war "waehrend das Aufklappmenue offen ist"; getroffen
   wurde JEDE Seite, denn das Menue steht auch geschlossen im DOM.
   Folge: touch-action:none am body auf allen Seiten — mit der Maus faellt das nicht auf
   (Mausrad scrollt weiter), mit dem Finger ist die Seite tot. Genau deshalb hat es keine
   meiner Messungen gefunden: Playwright simuliert die Fensterbreite, nicht Touch.
   Jetzt am ZUSTAND festgemacht: data-menue="offen" setzt das Bundle nur, wenn das Menue
   wirklich offen ist. */
body:has(header[data-menue="offen"]){
  overflow:hidden!important;
  touch-action:none;
}
/* === ENDE NACHTRAG 27 === */


/* === NACHTRAG 28 STAFFSEC 15.08.2026 - Restbefunde aus Manuels iPhone-Bildern === */

/* 1. Karten mit Foto: weisse Schrift bleibt weiss. Die aeltere Regel faerbt jede weisse
      Schrift in Kaesten mit hellem Rand dunkel - richtig fuer weisse Kaesten, falsch ueber
      einem Bild. :has() hebt die Spezifitaet ueber die aeltere Regel. */
[class*="border-[#E8E5DE]"]:has(img) [class~="text-white"],
[class*="border-[#E8E5DE]"]:has(img) h2,
[class*="border-[#E8E5DE]"]:has(img) h3,
[class*="border-[#E8E5DE]"]:has(img) h4{
  color:#fff!important;
}
[class*="border-[#E8E5DE]"]:has(img) p,
[class*="border-[#E8E5DE]"]:has(img) [class*="text-white/"]{
  color:rgba(255,255,255,.88)!important;
}

/* 2. Einblendung ohne Seitwaertsbewegung. Der X-Versatz von 60 px liess die Karten waehrend
      der Animation ueber den Rand ragen und die Flaeche seitlich verrutschen. */
.reveal-item{transform:none!important}
@media (prefers-reduced-motion:no-preference){
  .reveal-item{transition:opacity .5s ease!important}
}
/* 17.08.2026, SCHWERER FEHLER BEHOBEN — Manuel: "Auf der Handyseite kann ich nicht mal
   scrollen, also ich kann nicht mal die Startseite scrollen."
   Hier stand `overflow-x:clip` an html UND body, mit der Begruendung "clip statt hidden:
   verhindert auch das programmatische Verschieben zur Seite".
   Das war ein Trugschluss: Nach CSS-Spezifikation wird eine Achse, die auf `visible`
   steht, MIT GEKLIPPT, sobald die andere `clip` ist. Damit war overflow-y faktisch clip
   und die Seite liess sich ueberhaupt nicht mehr scrollen — gemessen "bewegt 0px" auf
   allen 6 gepruefeten Seiten, in beiden Breiten.
   `hidden` klippt nur die eine Achse und laesst die andere scrollen. Der Preis: seitliches
   Verschieben per Skript bleibt moeglich. Eine Seite, die nicht scrollt, ist der weit
   groessere Schaden.
   Warum es keine Pruefung gemeldet hat: Die Tiefenpruefung SCROLLT (window.scrollTo),
   pruefte aber nie, ob sich danach etwas bewegt hat. Sie meldete "durchgescrollt", wo
   nichts geschah. Behoben in _arbeit/scrollen-pruefen.js. */
html{overflow-x:hidden}
body{overflow-x:hidden}

/* 3. Deko-Ziffern einheitlich dezent - nicht mal unsichtbar, mal in voller Goldfarbe. */
[class*="text-[40px]"],[class*="text-[64px]"]{color:rgba(196,176,140,.28)!important}

/* === ENDE NACHTRAG 28 === */


/* === NACHTRAG 29 STAFFSEC 15.08.2026 - Typografie auch am Rechner === */

/* 1. Lesebereich begrenzen. Gemessen waren bis zu 95+ Zeichen je Zeile; lesbar sind 55-75.
      Gilt fuer Fliesstext, nicht fuer Ueberschriften und nicht fuer Tabellen oder Listen
      mit eigener Breite. */
p{max-width:68ch}
p[class*="max-w-"]{max-width:min(68ch,100%)}

/* 2. Laengerer Fliesstext linksbuendig - auch am Rechner. Kurze Einleitungen unter einer
      Ueberschrift duerfen mittig bleiben; die haben in diesem Auftritt durchweg eine
      Breitenbegrenzung (max-w-2xl/3xl) und bleiben unter drei Zeilen. */
/* SCHNITT 5 (19.08.2026): Diese Regel galt OHNE Bildschirmgrenze und damit auch am
   Handy. Dort war sie der Grund, warum unter einer mittigen Überschrift linksbündiger
   Text stand — Manuel hat das über Wochen auf jedem zweiten Bild gemeldet. Am Rechner
   ist sie richtig und bleibt, am Handy gilt Nachtrag 81. */
@media (min-width:768px){
  p:not([class*="max-w-2xl"]):not([class*="max-w-3xl"]):not([class*="text-[11px]"]):not([class*="text-[12px]"]):not([class*="uppercase"]),
  li,dd,blockquote{
    text-align:left;
  }
}

/* 3. Weiche Silbentrennung statt harter Wortbrueche, und ausgewogene Ueberschriften. */
p,li{hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;overflow-wrap:break-word;hyphens:manual}

/* === ENDE NACHTRAG 29 === */


/* === NACHTRAG 30 STAFFSEC 15.08.2026 - Fliesstext einheitlich linksbuendig === */
/* SCHNITT 2 (18.08.2026): p,li,dd,blockquote{text-align:left!important}/* SCHNITT 4 (18.08.2026): letzte groessenbasierte Ausrichtungsregel entfernt.
   Sie lieferte zwar das richtige Ergebnis, aber ueber die Schriftgroesse statt ueber
   den Kontext. Claude Designs Ziel: von sieben Regeln bleiben zwei - der
   Fliesstext-Standard und Nachtrag 58 (text-align:inherit). */

/* Der Absatz bleibt im mittigen Block stehen, wird aber selbst linksbuendig gesetzt und
   behaelt seine Breitenbegrenzung - dadurch bleibt die Seite optisch ruhig. */
[class*="text-center"] > p{margin-left:auto;margin-right:auto}
/* === ENDE NACHTRAG 30 === */


/* === NACHTRAG 31 STAFFSEC 15.08.2026 - Kicker genauer treffen === */
/* Die Ausnahme aus Nachtrag 30 zurueckgenommen: kleine Schrift ist kein Kicker.
   Kicker sind Grossbuchstaben mit Sperrung - alles andere ist Fliesstext. */
/* SCHNITT 3 (18.08.2026): Diese Regel ist mit dem Fall der zentrierenden Regel
   gegenstandslos geworden. Ihr Gedanke - "kleine Schrift ist kein Kicker" - stimmt,
   nur wird er jetzt ueber den Kontext ausgedrueckt (Nachtrag 58) statt ueber die
   Schriftgroesse. Sie war der Grund, warum die Team-Rollen linksbuendig blieben,
   obwohl ihre Karte text-center traegt. */

/* Auch die Anschrift im Fuss steht als span mit mehreren Zeilen mittig. */
footer span,footer address{text-align:left}
/* === ENDE NACHTRAG 31 === */


/* === NACHTRAG 32 STAFFSEC 15.08.2026 - ssx-vt-text ist Fliesstext === */
p.ssx-vt-text,.ssx-vt-text{text-align:left!important;max-width:68ch;margin-left:auto;margin-right:auto}
.ssx-vt-label,.ssx-vt-reflabel{text-align:center!important}
/* === ENDE NACHTRAG 32 === */


/* === NACHTRAG 33 STAFFSEC 15.08.2026 - Gestaltungs-Restpunkte === */

/* (Hero-Schleier-Block aus Nachtrag 33 entfernt - siehe Nachtrag 35) */

/* 2. Fusszeile aufgeraeumt: ruhige Trennlinien, lesbare Schrift, klare Abstaende. */
footer{border-top:1px solid rgba(196,176,140,.18)}
footer a{color:rgba(255,255,255,.82)}
footer a:hover{color:#fff}
footer h3,footer h4,footer [class*="text-[11px]"][class*="uppercase"]{
  color:#C4B08C;
  letter-spacing:.18em;
  margin-bottom:14px;
}
footer ul{gap:10px}
footer li{line-height:1.6}
footer [class*="border-t"]{border-color:rgba(255,255,255,.10)!important}
@media (max-width:767px){
  footer{padding-top:40px;padding-bottom:32px}
  footer > div{gap:28px}
}

/* 3. Laenge am Handy: Abstaende weiter zuruecknehmen, Hero begrenzen.
      Die Texte bleiben unangetastet. */
@media (max-width:767px){
  section > div[class*="py-"]{padding-top:48px!important;padding-bottom:48px!important}
  [class*="space-y-8"] > * + *{margin-top:20px!important}
  [class*="space-y-6"] > * + *{margin-top:16px!important}
  [class*="gap-8"]{gap:20px!important}
  [class*="gap-6"]{gap:16px!important}
  [class*="mb-16"]{margin-bottom:32px!important}
  [class*="mb-12"]{margin-bottom:24px!important}
  section[class*="min-h-[85vh]"],section[class*="min-h-screen"]{min-height:78vh!important}
}
/* === ENDE NACHTRAG 33 === */


/* === NACHTRAG 34 STAFFSEC 15.08.2026 - Verlaufsschrift nach Messung === */
/* Die Klassen setzt ssx-grad (Skript in jeder Seite) anhand der GEMESSENEN Hintergrund-
   helligkeit. Raten ueber Selektoren hat zweimal Stellen uebersehen. */
.text-gradient.ssx-grad-hell{
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  color:#7A6435!important;
  -webkit-text-fill-color:#7A6435!important;
}
.text-gradient.ssx-grad-dunkel{
  background-image:linear-gradient(135deg,#D4C5A0,#C4B08C)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}
/* === ENDE NACHTRAG 34 === */


/* === NACHTRAG 35 STAFFSEC 15.08.2026 - Hero-Schleier ohne Layout-Eingriff === */
/* Ersetzt den ::after-Ansatz aus Nachtrag 33, der die Startseite am Rechner zerlegt hat
   (L-296: "> *" macht aus absoluten Dekoebenen Flex-Elemente).
   Ein Innenschatten liegt ueber der Flaeche, ohne eine Ebene zu erzeugen - er kann daher
   weder Positionen noch Reihenfolgen veraendern. */
@media (min-width:640px){
  main > section:first-of-type,
  section[class*="min-h-[85vh]"],
  section[class*="min-h-screen"]{
    box-shadow:inset 0 90px 140px -40px rgba(8,10,14,.55),
               inset 0 -110px 150px -40px rgba(8,10,14,.50);
  }
}
/* === ENDE NACHTRAG 35 === */


/* === NACHTRAG 36 STAFFSEC 15.08.2026 - Klassen ohne Regel === */
/* Attribut-Selektoren statt Punkt-Notation, damit keine Escape-Fehler moeglich sind
   (so macht es auch der erste Nachtrag vom 27.07.). */
[class~="w-[26px]"]{width:26px}
[class~="mb-[14px]"]{margin-bottom:14px}
[class~="text-[#7A6435]"]{color:#7A6435}
/* Struktur-Striche: als Block waren sie so breit wie ihr Elternteil. */
[data-strich]{width:26px;flex:0 0 auto}
/* === ENDE NACHTRAG 36 === */


/* === NACHTRAG 37 STAFFSEC 15.08.2026 - Struktur-Striche nach Rolle (Claude Design) === */
/* Grundform: Hoehe 2 px, Radius 1 px, kein Schrumpfen im Flex-Kasten. */
[data-strich],
[class~="h-[2px]"][class~="rounded-full"],
[class~="h-[1.5px]"][class~="rounded-full"]{
  height:2px!important;
  border-radius:1px!important;
  flex:0 0 auto!important;
}

/* Abschnittsstrich - Struktur-Rolle: 48 px, 20 px Abstand darunter */
[data-strich="struktur"],
[data-rolle="struktur"] + [data-strich],
[data-rolle="struktur"] [data-strich]{
  flex:0 0 48px!important;
  width:48px!important;
  margin-bottom:20px!important;
}

/* Argumentstrich - Argument-Rolle: 64 px, 24 px Abstand darunter */
[data-strich="argument"],
[data-rolle="argument"] + [data-strich],
[data-rolle="argument"] [data-strich]{
  flex:0 0 64px!important;
  width:64px!important;
  margin-bottom:24px!important;
}

/* Kicker-Strich - die kurzen Striche neben Auszeichnungszeilen: 32 px, 12 px Abstand */
[class~="w-8"][class~="h-[1.5px]"],
[class~="w-10"][class~="h-[2px]"],
[class~="w-8"][class~="rounded-full"],
[class~="w-10"][class~="rounded-full"]{
  flex:0 0 32px!important;
  width:32px!important;
  margin-right:12px!important;
}

/* Farbe nach Grund - Gold-dunkel auf dunklen Flaechen, Gold-hell sonst. */
[data-strich]{background:#7A6435}
[class*="bg-[#0D0F11]"] [data-strich],
[class*="bg-[#1A1D1F]"] [data-strich],
[class*="bg-[#2D3436]"] [data-strich],
[style*="rgb(13, 15, 17)"] [data-strich],
[style*="rgb(45, 52, 54)"] [data-strich]{background:#C4B08C}

/* Am Handy alle drei auf 32 px. */
@media (max-width:640px){
  [data-strich],
  [data-rolle="struktur"] [data-strich],
  [data-rolle="argument"] [data-strich]{
    flex:0 0 32px!important;
    width:32px!important;
    margin-bottom:14px!important;
  }
}
/* === ENDE NACHTRAG 37 === */


/* === NACHTRAG 38 STAFFSEC 16.08.2026 - Kopfzeile als ZUSTAND, nicht als Farbe === */
/* Spezifikation Claude Design 16.08.2026, auf Manuels Befund: "Auf der Startseite soll
   das oben transparent sein, so wie es vorher war. Wenn man runterscrollt, kann der
   Balken kommen — aber nicht mit dem grauen Logo."
   Logo-Entscheidung des Designers: (c) Balken bleibt dunkel, Wortmarke bleibt wie sie ist.
   Gerechnet: #bfb5a0 erreicht auf #0D0F11 9,22:1, auf Weiss nur 2,05:1 — ein heller
   Balken ist damit ausgeschlossen, solange keine echte dunkle Wortmarke existiert.
   Die Zustaende liefert das Bundle selbst ueber die Klasse am <header>:
     bg-transparent = Scrollposition 0 ueber einem Kopfbild
     bg-white/95    = gescrollt (ab 64 px) oder Seite ohne Kopfbild
   Wir faerben nur, wir schalten nicht. */

/* ---------- Zustand 1: ueber dem Kopfbild, Scrollposition 0 ---------- */
header[class*="bg-transparent"]{
  background:transparent!important;
  background-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom:0!important;
  box-shadow:none!important;
  isolation:isolate;
}
/* Lesbarkeitsverlauf: 140 px statt 80, mit Haltepunkten. Die harte Kante entstand,
   weil der alte Verlauf auf Balkenhoehe endete und linear auslief. */
header[class*="bg-transparent"]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:140px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,10,14,.62) 0%,
    rgba(8,10,14,.46) 34%,
    rgba(8,10,14,.22) 64%,
    rgba(8,10,14,0) 100%);
}
@media (max-width:640px){
  header[class*="bg-transparent"]::before{
    height:120px;
    background:linear-gradient(to bottom,
      rgba(8,10,14,.68) 0%, rgba(8,10,14,.50) 34%,
      rgba(8,10,14,.24) 64%, rgba(8,10,14,0) 100%);
  }
}

/* ---------- Zustand 2 und 3: der Balken ---------- */
header[class*="bg-white"]{
  background:rgba(13,15,17,.92)!important;
  background-color:rgba(13,15,17,.92)!important;
  -webkit-backdrop-filter:blur(28px) saturate(180%)!important;
  backdrop-filter:blur(28px) saturate(180%)!important;
  border-bottom:1px solid rgba(196,176,140,.22)!important;
  box-shadow:none!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header[class*="bg-white"]{background:rgba(13,15,17,.98)!important}
}
header{transition:background-color .22s cubic-bezier(.16,1,.3,1),
  border-color .22s cubic-bezier(.16,1,.3,1),
  -webkit-backdrop-filter .22s cubic-bezier(.16,1,.3,1),
  backdrop-filter .22s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){header{transition:none}}

/* ---------- Schrift IN DER LEISTE (nur direkte Kinder der Navigation) ---------- */
/* Der Fehler vom 15.08. war der weite Selektor header a:not([class*="btn"]).
   Hier wird ausschliesslich die Leiste gefaerbt, nie ein Aufklappmenue. */
/* Das [class] am header ist kein Zierrat: die Schriftfarbe kommt aus einer Tailwind-Klasse
   AM ELEMENT (text-[#2D3436], Spezifitaet 0,1,0). Ein reiner Typ-Selektor verliert dagegen,
   egal wie lang er ist — gemessen am 16.08.: "Startseite" und "Kontakt" standen dunkel auf
   dem dunklen Balken (1,52:1), waehrend die Menueknoepfe weiss waren. */
header[class] > div > div > nav > a,
header[class] > div > div > nav > div.relative > button{color:rgba(255,255,255,.88)}
header[class] > div > div > nav > a:hover,
header[class] > div > div > nav > div.relative > button:hover{color:#fff}
header[class*="bg-transparent"] > div > div > nav > a,
header[class*="bg-transparent"] > div > div > nav > div.relative > button{color:#fff}
header[class] > div > div > nav > a[aria-current="page"]{color:#C4B08C}
header[class] > div > div > nav > a > svg,
header[class] > div > div > nav > div.relative > button > svg{color:currentColor}
/* Menueknopf am Handy: Tippziel 48 px, weisse Striche (aus Nachtrag 24 uebernommen) */
@media (max-width:1024px){
  header button[aria-label]{min-width:48px;min-height:48px;color:#fff}
}
/* Der Knopf im Kopf bleibt Goldverlauf mit dunkler Schrift (6,00:1) */
header [class*="btn-primary"],header [class*="btn-primary"] span{color:#2D3436!important}
header a:focus-visible,header button:focus-visible{outline:3px solid #C4B08C;outline-offset:3px}

/* ---------- Aufklappmenues: eigene Farbwelt, von der Leiste unabhaengig ---------- */
/* Claude Design: "Das Panel wird nie von Kopfzeilenregeln erfasst. Das !important gehoert
   auf die Panel-Links, nicht auf die Kopfzeile — die spezifischere Regel ist die, die den
   Ausnahmefall traegt." Sein Selektor [data-menu-panel] existiert im Bundle nicht; hier
   steht die gemessene Struktur: das Panel ist das absolut gesetzte Kind von div.relative. */
header nav div.relative > div[class*="absolute"] a:not([class*="justify-center"]),
header nav div.relative > div[class*="absolute"] a span,
header div[class~="bg-white"][class~="border-t"] a:not([class*="justify-center"]){color:#EDEAE4!important}
header nav div.relative > div[class*="absolute"] a:hover,
header div[class~="bg-white"][class~="border-t"] a:hover{color:#FFFFFF!important;background:rgba(255,255,255,.075)}
header nav div.relative > div[class*="absolute"] a[aria-current]{color:#C6B08A!important}
/* Das Standorte-Menue traegt eigene Rollen — die bleiben erhalten, damit die Abstufung
   zwischen Bundesland, Stadt und Hinweis nicht verlorengeht. */
header .ssx-land-titel{color:#DCD8D0!important}
header .ssx-land:hover>.ssx-land-titel,
header .ssx-land:focus-within>.ssx-land-titel{color:#FFFFFF!important}
header .ssx-stadt{color:rgba(237,234,228,.68)!important}
header .ssx-stadt:hover{color:#FFFFFF!important}
header .ssx-staedte-alle{color:#C6B08A!important}
header .ssx-standard-karte strong{color:#EDEAE4!important}
header .ssx-standard-karte span{color:rgba(237,234,228,.68)!important}
header .ssx-pfeil{color:#C4B08C!important}
/* === ENDE NACHTRAG 38 === */


/* === NACHTRAG 39 STAFFSEC 16.08.2026 - Struktur-Striche: Laenge ist nicht Hauptachse === */
/* Manuels Befund vom 16.08.: in der Fusszeile sitzt unter jeder Rubrik ein goldener KLOTZ
   statt eines Strichs. Gemessen: 32 x 32 px, obwohl Nachtrag 37 Hoehe 2 px vorschreibt.

   Ursache — dieselbe Falle wie L-306, nur andersherum: Nachtrag 37 setzt flex:0 0 <laenge>,
   damit der Flex-Kasten den Strich nicht wieder aufzieht. Das ist in einer ZEILE richtig.
   Die Fusszeilen-Striche stehen aber in einem Spalten-Kasten (flex flex-col items-start) —
   dort ist die Hauptachse senkrecht, flex-basis wird zur HOEHE, und flex-basis schlaegt
   height. Der Strich wurde also 32 px hoch.

   Lehre daraus: flex-basis darf nur setzen, wer die Richtung des Kastens kennt. Sicher ist
   die Kombination flex:0 0 auto (nicht schrumpfen) + width + height ausdruecklich. */
[data-strich],
[class~="h-[2px]"][class~="rounded-full"],
[class~="h-[1.5px]"][class~="rounded-full"],
[class~="w-8"][class~="rounded-full"],
[class~="w-10"][class~="rounded-full"],
[class~="w-8"][class~="h-[1.5px]"],
[class~="w-10"][class~="h-[2px]"]{
  flex:0 0 auto!important;
  flex-grow:0!important;
  flex-shrink:0!important;
  flex-basis:auto!important;
  height:2px!important;
  min-height:0!important;
  max-height:2px!important;
  border-radius:1px!important;
  /* gegen das Strecken durch align-items:stretch des Elternkastens (Claude Design 16.08.):
     die Breite kam dort aus dem Kasten, nicht aus width. */
  align-self:flex-start!important;
}
/* Die Laengen aus Claude Designs Spezifikation bleiben unveraendert - sie stehen jetzt nur
   in width statt in flex-basis. */
[class~="w-8"][class~="rounded-full"],
[class~="w-8"][class~="h-[1.5px]"]{width:32px!important}
[class~="w-10"][class~="rounded-full"],
[class~="w-10"][class~="h-[2px]"]{width:32px!important}
[data-strich="struktur"],
[data-rolle="struktur"] + [data-strich],
[data-rolle="struktur"] [data-strich]{width:48px!important}
[data-strich="argument"],
[data-rolle="argument"] + [data-strich],
[data-rolle="argument"] [data-strich]{width:64px!important}
/* === ENDE NACHTRAG 39 === */


/* === NACHTRAG 40 STAFFSEC 16.08.2026 - Abstands-Ordnung nach Rolle (Claude Design) === */
/* Manuel: "Das ist da einfach so angeknallt, so einfach so zwischendrin, da passt gar
   nichts rein. Das muss doch einfach mehr Abstand sein, viel zu wenig."

   Gemessen: Der Streifen "Erst zuhoeren, dann ein Konzept" ist 95 px hoch, obwohl im
   Markup py-14 steht. Ursache ist NICHT ein innerer Behaelter (Claude Designs Vermutung),
   sondern zum dritten Mal dieselbe Falle: .py-14 kommt in dieser Stilvorlage NICHT VOR
   (0 Treffer), ebensowenig .py-36. Tailwind kompiliert nur, was zur Bauzeit im Quelltext
   stand — nachtraeglich eingefuegte Klassen wirken nie (L-108, L-306).
   Der Streifen hatte also gar kein Polster, und die grossen Abschnitte bekamen auf dem
   Rechner nur py-28 statt des gemeinten lg:py-36.

   Claude Designs Ordnung vom 16.08.2026, Polster oben/unten:
     Rolle       Rechner   <=1024   <=640
     gross        96 px     72 px    56 px
     band        112 px     88 px    64 px
     streifen     64 px     56 px    44 px
     abschluss   128/96     96/72    72/56
   Die Rolle haengt hier an vorhandenen Merkmalen des Markups statt an einem neuen
   Attribut — sonst muesste an 387 Seiten geschrieben werden, um dasselbe zu sagen. */

/* --- gross: die normalen Inhaltsabschnitte --- */
section[class*="py-24"],
section[class*="py-28"]{
  padding-top:96px!important;
  padding-bottom:96px!important;
  margin-block:0!important;
}

/* --- band: die dunklen Zwischenbaender mit Bild. Steht NACH "gross" und gewinnt damit.
       Der Kopfbereich ist ausgenommen, er traegt min-h und seine eigene Hoehe. --- */
section[class*="bg-[#0D0F11]"]:not([class*="min-h-"]):not([class*="items-center"]){
  padding-top:112px!important;
  padding-bottom:112px!important;
}

/* --- streifen: der schmale Aufruf. Absichtlich niedriger als der Inhalt drumherum —
       ein Aufruf-Streifen soll unterbrechen, nicht mithalten (Claude Design). --- */
.ssx-zwischen-cta{
  padding-top:64px!important;
  padding-bottom:64px!important;
  margin-block:0!important;
}

@media (max-width:1024px){
  section[class*="py-24"],
  section[class*="py-28"]{padding-top:72px!important;padding-bottom:72px!important}
  section[class*="bg-[#0D0F11]"]:not([class*="min-h-"]):not([class*="items-center"]){
    padding-top:88px!important;padding-bottom:88px!important}
  .ssx-zwischen-cta{padding-top:56px!important;padding-bottom:56px!important}
}
@media (max-width:640px){
  section[class*="py-24"],
  section[class*="py-28"]{padding-top:56px!important;padding-bottom:56px!important}
  section[class*="bg-[#0D0F11]"]:not([class*="min-h-"]):not([class*="items-center"]){
    padding-top:64px!important;padding-bottom:64px!important}
  .ssx-zwischen-cta{padding-top:44px!important;padding-bottom:44px!important}
}
/* === ENDE NACHTRAG 40 === */


/* === NACHTRAG 41 STAFFSEC 16.08.2026 - Fusszeile: Verteilung statt Abstand (Claude Design) === */
/* Manuel: "Diese Impressumsleiste, so ein richtig dicker, schlimmer Balken, das sieht ganz
   furchtbar aus."
   Gemessen: Der "Balken" ist keine Flaeche, sondern LEERE. Das Raster hat sechs gleich
   breite Plaetze (lg:grid-cols-6), belegt sind fuenf, und die Spalten tragen 3 / 12 / 3 /
   5 / 23 Eintraege. Grid streckt alle Zellen auf die hoechste: 944 px. Unter der Spalte
   "Mobil" mit drei Eintraegen stehen dadurch ueber 500 px nichts.

   Claude Designs Loesung: die 23 Eintraege gehoeren nicht in eine Rubrikspalte, sondern in
   ein eigenes zweispaltiges Feld — 16 Laender x 2 Spalten sind 8 Zeilen statt 23.
   Sein Vorschlag legt zusaetzlich Rubriken zusammen (Sicherheit+Mobil, Personal+
   Unternehmen). Das ginge nur im Markup und hiesse, 387 Dateien anzufassen; hier steht
   deshalb die Fassung, die dasselbe Ziel ohne Markup-Eingriff erreicht: keine leere
   Spalte, ungleiche Breiten, Einsatzgebiete zweispaltig. */

@media (min-width:1024px){
  footer .grid[class*="grid-cols-6"]{
    /* Die letzte Spalte traegt zwei innere Spalten und braucht die doppelte Breite —
       mit Claude Designs 1.2fr brachen "Niedersach-sen" und "Mecklen-burg-Vorpommern"
       mitten im Wort, und die Liste wurde dadurch kaum kuerzer. Beim Ansehen gefunden. */
    grid-template-columns:1.25fr 1fr .8fr .95fr 2fr!important;
    align-items:start!important;
    column-gap:40px!important;
  }
}
/* Die Einsatzgebiete sind die zweite Liste ihrer Spalte — die einzige Stelle im ganzen
   Fussbereich, an der zwei Listen im selben Kasten stehen. */
footer div > ul:nth-of-type(2){
  columns:2;
  column-gap:18px;
}
footer div > ul:nth-of-type(2) > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
/* Ortsnamen werden nicht getrennt — lieber die Spalte breiter als ein zerhacktes Wort. */
footer div > ul:nth-of-type(2) a{
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
@media (max-width:640px){
  footer div > ul:nth-of-type(2){columns:1}
}

/* Impressumsleiste: keine zweite Flaeche, nur eine Trennlinie und Luft.
   Die Schrift stand auf text-white/30 = rund 3:1 und damit unter Soll; Claude Design
   setzt .62 -> 7,69:1. */
footer p[class*="text-white/30"],
footer a[class*="text-white/30"]{
  color:rgba(255,255,255,.62)!important;
  font-size:13px!important;
}
footer a[class*="text-white/30"]:hover{color:#C4B08C!important}
/* === ENDE NACHTRAG 41 === */


/* === NACHTRAG 42 STAFFSEC 16.08.2026 - Kachel "2x Doppelt zertifiziert" === */
/* Manuel: "ja beides ja" auf die Frage nach einem eigenen Motiv.
   Das Motiv ist jetzt `verschlussdienst-nacht` — Mitarbeiter mit Schluesselbund und Tablet
   an der Tuer, also genau Claude Designs Vorgabe "Arbeit, die geprueft wird" statt einer
   Urkunde. Es hat eine dunkle linke und eine hellere rechte Bildhaelfte; dafuer ist sein
   Schraeg-Verlauf gedacht: Die Zahl bekommt ihren Kontrast aus der dunklen Seite, das
   Motiv bleibt auf der hellen Seite erkennbar. Eine gleichmaessige Abdunkelung macht jedes
   Motiv gleich unsichtbar - dann kann man es auch weglassen (Claude Design, 16.08.2026).

   Die beiden vorhandenen Schleier (bg-gradient-to-t und bg-gradient-to-r) werden hier
   ersetzt statt im Markup geaendert - das spart einen Eingriff in 378 Dateien. */
img[src*="verschlussdienst-nacht"] ~ div[class*="bg-gradient-to-t"]{
  background-image:linear-gradient(105deg,
    rgba(13,15,17,.88) 0%,
    rgba(13,15,17,.72) 46%,
    rgba(13,15,17,.34) 100%)!important;
}
/* der zweite, quer laufende Schleier entfaellt - sonst liegen zwei uebereinander */
img[src*="verschlussdienst-nacht"] ~ div[class*="bg-gradient-to-r"]{
  background-image:none!important;
}
/* Bildausschnitt: Schwerpunkt liegt rechts, der Kopf des Mitarbeiters im oberen Drittel */
img[src*="verschlussdienst-nacht"]{
  object-position:center 40%;
}
/* Am Handy laeuft der Verlauf senkrecht, weil der Text dort oben steht und nicht links */
@media (max-width:640px){
  img[src*="verschlussdienst-nacht"] ~ div[class*="bg-gradient-to-t"]{
    background-image:linear-gradient(to bottom,
      rgba(13,15,17,.86) 0%,
      rgba(13,15,17,.76) 50%,
      rgba(13,15,17,.66) 100%)!important;
  }
}
/* === ENDE NACHTRAG 42 === */


/* === NACHTRAG 43 STAFFSEC 16.08.2026 - Uebergang zum vorgezogenen Nachweis-Abschnitt === */
/* Mit der neuen Reihenfolge (Nachweise direkt hinter "Ihre Vorteile") stossen auf einem Teil
   der Seiten zwei verschiedene Flaechenfarben ohne Blende aufeinander: Der Abschnitt davor
   ist dort weiss, der Nachweis-Abschnitt beige. Die passende Blende lag an der ALTEN Stelle
   und ist dort geblieben — sie ist ein eigenes Element im Seitenaufbau und wandert nicht mit.
   Statt ein Element zu verschieben, traegt der Abschnitt den Uebergang jetzt selbst: ein
   Verlauf ueber die ersten 96 px seines eigenen Hintergrunds. Kein neues Element, keine
   Positionierung, damit auch kein L-296-Risiko.
   Die Regel greift NUR, wenn der Vorgaenger wirklich weiss ist — steht dort schon beige
   (z. B. /paedagogische-sicherheit), bleibt der Uebergang nahtlos wie bisher. */
section[class*="bg-white"] + section.ssx-vt{
  background-image:linear-gradient(to bottom,#FFFFFF 0%,#F8F7F4 96px);
  background-repeat:no-repeat;
}
@media (max-width:640px){
  section[class*="bg-white"] + section.ssx-vt{
    background-image:linear-gradient(to bottom,#FFFFFF 0%,#F8F7F4 56px);
  }
}
/* === ENDE NACHTRAG 43 === */


/* === NACHTRAG 44 STAFFSEC 16.08.2026 - Sechs eigene Kopfbereiche (Claude Design) === */
/* AUSGANGSLAGE, nachgemessen: Diese sechs Seiten hatten nicht etwa kein Foto — sie hatten
   alle DASSELBE (`team-buero`) unter einem Schleier von .70 bis .82, gesetzt von
   Nachtrag 22 ueber einen Farbwert-Selektor. Deshalb wirkten sie wie schwarze Flaechen und
   waren untereinander nicht zu unterscheiden.
   Claude Designs Spezifikation: vier Inhaltsseiten mit je eigenem Motiv und aufgehelltem
   Verlauf, die zwei Rechtstexte bewusst anders — kein Mensch im Bild, gleichmaessige .88,
   dasselbe Gebaeude in zwei verschiedenen Ausschnitten. Woertlich: "Ein Team-Motiv ueber
   einer Datenschutzerklaerung wirkt wie eine Verkaufsseite, die sich als Rechtstext tarnt."
   Die Seiten unterscheidet `data-seite` am <html> — die einzige Stelle, die React beim
   Rendern nicht ersetzt, und sie steht schon im vorgerenderten HTML. */

/* ---------- die vier Inhaltsseiten ---------- */
/* Motiv am 16.08.2026 auf Claude Designs Entscheidung getauscht: `team-runde` war zu hell,
   der Fliesstext stand im hellen Auslauf des Verlaufs. Seine Begruendung gegen ein blosses
   Nachdunkeln: "Bei (a) muesste der Verlauf so dunkel auslaufen, dass das Motiv nichts mehr
   beitraegt — dann ist es wieder der Zustand, den wir gerade abgestellt haben."
   Werte deshalb unveraendert, nur ein ruhigeres und dunkleres Motiv. */
html[data-seite="ausbildung"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.82) 0%,rgba(13,15,17,.58) 100%),
    url("/assets/staffsec/team-besprechung-1440w.webp")!important;
  background-position:center, center 42%!important;
}
html[data-seite="karriere"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.84) 0%,rgba(13,15,17,.60) 100%),
    url("/assets/staffsec/einsatz-1-1440w.webp")!important;
  background-position:center, center 38%!important;
}
html[data-seite="unternehmensleitbild"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.80) 0%,rgba(13,15,17,.56) 100%),
    url("/assets/staffsec/team-buero-1440w.webp")!important;
  background-position:center, center 45%!important;
}
html[data-seite="kontakt"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.80) 0%,rgba(13,15,17,.56) 100%),
    url("/assets/staffsec/empfangsdienst-rezeption.webp")!important;
  background-position:center, center 50%!important;
}
html[data-seite="ausbildung"] main > section:first-of-type,
html[data-seite="karriere"] main > section:first-of-type,
html[data-seite="unternehmensleitbild"] main > section:first-of-type,
html[data-seite="kontakt"] main > section:first-of-type{
  background-size:cover, cover!important;
  background-repeat:no-repeat, no-repeat!important;
}

/* ---------- die zwei Rechtstexte ---------- */
/* Hier stecken Kopfbereich UND Rechtstext in EINER Sektion (2.627 px auf /impressum).
   Die Kopfhoehe laesst sich deshalb nicht ueber die Sektion begrenzen — begrenzt wird das
   BILD: 560 px hoch, darunter traegt die Flaechenfarbe. Damit die Kante nicht sichtbar
   wird, laeuft der Schleier auf dem letzten Zehntel von .88 auf volldeckend. */
/* 🔴 ERSTER VERSUCH WAR FALSCH, im Bild gesehen: Mit `background-size:100% 560px` rechnet
   `background-position:center 30%` NICHT im Bild, sondern im verbleibenden Raum der Flaeche.
   Auf /impressum (2.627 px hoch) landete das Foto dadurch bei rund 620 px — mitten im
   Rechtstext, und dort ohne Schleier darueber; der Text stand unlesbar auf der Glasfassade.
   Richtig ist der umgekehrte Weg: Das Bild deckt die Sektion wie ueberall (cover), und der
   SCHLEIER wird ab 620 px volldeckend. Optisch waechst der Kopfbereich damit nicht mit,
   ohne dass eine zweite Ebene noetig waere. */
html[data-seite="impressum"] main > section:first-of-type,
html[data-seite="datenschutz"] main > section:first-of-type{
  background-color:#2D3436!important;
  background-repeat:no-repeat, no-repeat!important;
  background-size:cover, cover!important;
}
html[data-seite="impressum"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.88) 0px,rgba(13,15,17,.88) 470px,rgba(45,52,54,1) 620px,rgba(45,52,54,1) 100%),
    url("/generate/images/1057872/2026-04-01/ac96f0c6-f267-4241-aa49-ec26c029c83d-960w.webp")!important;
  background-position:center top, center 30%!important;
}
html[data-seite="datenschutz"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.88) 0px,rgba(13,15,17,.88) 470px,rgba(45,52,54,1) 620px,rgba(45,52,54,1) 100%),
    url("/generate/images/1057872/2026-04-01/ac96f0c6-f267-4241-aa49-ec26c029c83d-960w.webp")!important;
  background-position:center top, center 55%!important;
}

/* ---------- Handy: dunkler, weil der flache Kasten unten staerker beschneidet ---------- */
@media (max-width:640px){
  html[data-seite="ausbildung"] main > section:first-of-type,
  html[data-seite="karriere"] main > section:first-of-type,
  html[data-seite="unternehmensleitbild"] main > section:first-of-type,
  html[data-seite="kontakt"] main > section:first-of-type{
    background-image:linear-gradient(to bottom,rgba(13,15,17,.86) 0%,rgba(13,15,17,.62) 100%),
      var(--ssx-kopfbild)!important;
  }
  html[data-seite="ausbildung"] main > section:first-of-type{--ssx-kopfbild:url("/assets/staffsec/team-besprechung-960w.webp");background-position:center, center 37%!important}
  html[data-seite="karriere"] main > section:first-of-type{--ssx-kopfbild:url("/assets/staffsec/einsatz-1-960w.webp");background-position:center, center 33%!important}
  html[data-seite="unternehmensleitbild"] main > section:first-of-type{--ssx-kopfbild:url("/assets/staffsec/team-buero-960w.webp");background-position:center, center 40%!important}
  html[data-seite="kontakt"] main > section:first-of-type{--ssx-kopfbild:url("/assets/staffsec/empfangsdienst-rezeption-480w.webp");background-position:center, center 45%!important}
  html[data-seite="impressum"] main > section:first-of-type,
  html[data-seite="datenschutz"] main > section:first-of-type{
    background-image:linear-gradient(to bottom,rgba(13,15,17,.88) 0px,rgba(13,15,17,.88) 300px,rgba(45,52,54,1) 420px,rgba(45,52,54,1) 100%),
      url("/generate/images/1057872/2026-04-01/ac96f0c6-f267-4241-aa49-ec26c029c83d-480w.webp")!important;
  }
}
/* === ENDE NACHTRAG 44 === */


/* === NACHTRAG 45 STAFFSEC 16.08.2026 - MOBILER DURCHLAUF (Claude Design) === */
/* Manuel: "Da müssen wir noch mal eine mobile komplette Optimierung machen, einen
   kompletten Durchlauf wegen der Zentrierung und den ganzen Fotos, weil du mit deiner
   gefakten Ansicht dir ja einfach eine mobile Ansicht fakest."
   Gemessen wurde daraufhin zum ersten Mal auf der ECHTEN Safari-Engine (Playwright-WebKit,
   iPhone-Profil, Bildpunktdichte 3, Touch) statt in einem schmalen Desktop-Chromium. */

/* ---------- (3) AUSRICHTUNG: durchgehend linksbuendig ---------- */
/* Gemessen: Im selben Kopfbereich standen mittige und linksbuendige Elemente nebeneinander
   (auf /objektschutz 7 mittig gegen 1 buendig, auf der Startseite 4 gegen 3). Am Rechner
   ist alles linksbuendig. Claude Design: "Zwei Ausrichtungen fuer dieselbe Seite sind immer
   der Fehler, nie die Absicht. Deutsche Komposita brechen am Handy haeufig — mittiger Text
   mit ungleichen Zeilenlaengen sieht dann nach Panne aus, linksbuendig nach Satz." */
@media (max-width:767px){
  /* 🔴 Erste Fassung listete h1/h2/p/nav/ol/div — die zentrierten Elemente auf der
     Startseite sind aber SPAN mit `display:block` ("Ihr Partner", "für", "Sicherheit.",
     die Kicker-Zeile). Gemessen: sechs Stellen blieben auf `center` stehen.
     Deshalb jetzt alle Textträger, und die Knöpfe ausdrücklich wieder mittig. */
  /* 19.08.2026 UMGEDREHT: Diese Regel stellte den Kopfbereich am Handy auf links.
     Manuel meldet seither durchgehend "nicht zentriert". Seine Entscheidung sticht die
     Design-Empfehlung vom 16.08. — am Handy gilt jetzt durchgehend Mitte (Nachtrag 81). */
  main > section:first-of-type,
  main > section:first-of-type :is(h1,h2,h3,p,span,div,li,nav,ol,dl,dd){
    text-align:center!important;
  }
  /* im Knopf bleibt die Beschriftung mittig — sonst klebt sie an der linken Rundung */
  main > section:first-of-type a[class*="btn-"],
  main > section:first-of-type a[class*="btn-"] span,
  main > section:first-of-type button,
  main > section:first-of-type button span{
    text-align:center!important;
  }
  /* die Kaesten, die den TEXT tragen, an dieselbe linke Kante — aber nur solche mit
     senkrechter Anordnung. `items-center` an einem waagerechten Kasten richtet dort die
     Hoehe aus; auf flex-start umzustellen verschiebt Symbole gegen ihre Beschriftung. */
  main > section:first-of-type [class*="flex-col"][class*="items-center"],
  main > section:first-of-type [class*="mx-auto"][class*="text-center"]{
    align-items:center!important;
  }
  /* die zwei Elemente, die nach der Umstellung noch echt zentriert waren (Startseite) */
  main > section:first-of-type [class*="hero-text-outline"],
  main > section:first-of-type [class*="text-center"]{
    text-align:left!important;
  }
  /* Struktur-Strich sitzt an der Textkante, nicht mittig */
  main > section:first-of-type [class~="mx-auto"][class*="rounded-full"]{
    margin-left:0!important;margin-right:0!important;
  }
}
  /* 19.08.2026 auf Mitte gedreht: Diese Regel stammt aus der Zeit, in der der
     Kopfbereich am Handy linksbuendig sein sollte (Nachtrag 45). Manuels Entscheidung
     vom 19.08. ist durchgehend Mitte — die Knoepfe klebten dadurch als einzige links
     (gemessen 0 px links gegen 38 px rechts), waehrend Ueberschrift und Text mittig standen. */
/* Knoepfe untereinander, volle Breite bis 320 px, linksbuendig.
   🔴 ERSTE FASSUNG WAR ZU BREIT: Sie griff auf jeden Kasten mit `gap-3`/`gap-4` und hat
   damit auch die drei Kennzahl-Kacheln der Startseite gestapelt — der Kopfbereich wuchs
   von 861 auf 1058 px, also das Gegenteil von Befund 4. Gemessen, nicht vermutet.
   Jetzt trifft die Regel nur Kaesten, die tatsaechlich einen Knopf als direktes Kind haben. */
@media (max-width:480px){
  main > section:first-of-type div:has(> a[class*="btn-"]),
  main > section:first-of-type div:has(> a[href^="tel:"]){
    flex-direction:column!important;
    align-items:center!important;
  }
  main > section:first-of-type a[class*="btn-"],
  main > section:first-of-type a[class*="rounded-xl"],
  main > section:first-of-type a[class*="rounded-2xl"]{
    width:100%!important;max-width:320px!important;justify-content:center!important;
  }
}

/* ---------- (4) KOPFHOEHE: die Adressleiste einrechnen ---------- */
/* Gemessen: Der Kopfbereich der Startseite war 861 px hoch bei 852 px Bildschirm = 101 %.
   Am echten Geraet kommt die Adressleiste dazu — der Aufruf-Knopf lag unter der Kante.
   `svh` ist die Einheit, die die Adressleiste einrechnet; `vh` ist bauartbedingt zu gross. */
@media (max-width:767px){
  main > section[class*="min-h-[85vh]"]{
    min-height:min(72svh,620px)!important;
    height:auto!important;
  }
  @supports not (height:1svh){
    main > section[class*="min-h-[85vh]"]{min-height:min(72vh,620px)!important}
  }
  /* 🔴 BEFUND, der bei Claude Design liegt: Die Mindesthoehe aendert nichts, weil der
     INHALT hoeher ist — 861 px auf der Startseite gegen 664 px Mindesthoehe, 788 px auf
     /kontrollfahrten gegen 613 px. Sein `min(72svh,620px)` greift also, wirkt aber nicht.
     ⚠️ Mein Versuch, das ueber das Polster zu loesen, war FALSCH und ist zurueckgenommen:
     `padding:72px` auf die inneren Kaesten machte den Kopf um 48 px HOEHER statt niedriger
     (dort galt am Handy bereits ein kleinerer Wert). Gemessen, nicht vermutet.
     Was den Kopf wirklich kuerzt, ist weniger Inhalt darin — und das ist eine
     Gestaltungsentscheidung, keine Umsetzung. Liegt bei ihm. */
}

/* ---------- (2) BILDAUSSCHNITT: nicht mehr blind die Mitte ---------- */
/* Gemessen: Am iPhone sind von den Kopfmotiven nur 22 bis 45 % der Bildbreite sichtbar
   (cover beschneidet im Hochformat seitlich), und ALLE standen auf 50 % 50 % — gezeigt
   wurde also immer die Bildmitte. Bei 10 von 21 Motiven liegt der Inhalt woanders;
   ermittelt ueber die Kantendichte in 20 senkrechten Streifen mit einem gleitenden Fenster
   in der Breite, die am Handy ueberhaupt sichtbar bleibt.
   Claude Designs zwei Korrekturen an meinen Werten sind eingearbeitet:
     - auf 12–88 % begrenzt ("0 % und 93 % heissen, dass das Motiv die Bildkante beruehrt —
       das liest sich als Beschnittfehler, auch wenn die Kantendichte dort am hoechsten ist")
     - senkrecht 42 % statt 50 % fuer ALLE Kopfbilder ("holt Gesichter in die obere
       Bildhaelfte, wo der Schleier am dunkelsten ist")
   ⚠️ Kantendichte ist nicht Bedeutung — diese Werte sind die bessere Vermutung als die
   Mitte, aber noch nicht abgenommen. Der Kontaktabzug fuer Claude Design folgt. */
@media (max-width:767px){
  /* Grundregel: senkrecht hoeher ansetzen, waagerecht bleibt die Mitte */
  main > section:first-of-type img{object-position:50% 42%!important}

  /* 🔴 NUR FUENF VON ELF VORSCHLAEGEN HABEN DEN AUGENSCHEIN UEBERSTANDEN.
     Der Kontaktabzug (je Motiv alt gegen neu, im echten Kopfmass gerendert) hat gezeigt,
     dass meine Kantendichte-Messung bei der Haelfte danebenlag — und zwar systematisch:
     Ein Mensch in dunkler Dienstkleidung hat WENIGER Kanten als ein strukturierter
     Hintergrund. Bei `objektschutz-zutritt` zeigte 50 % den Mitarbeiter und mein
     Vorschlag 12 % einen leeren Gang; bei `empfangsdienst-rezeption` dasselbe Muster.
     Claude Design hatte genau davor gewarnt: "Kantendichte ist nicht Bedeutung."
     Zurueckgesetzt auf 50 %: transport-logistik, objektschutz-zutritt, branche-industrie,
     empfangsdienst-rezeption, brandwache-uebung und paedagogische-sicherheit (dort war
     keine der beiden Fassungen ueberzeugend — im Zweifel die bekannte).
     Behalten sind die fuenf, bei denen der Gewinn im Bild sichtbar ist. */
  main > section:first-of-type img[src*="arbeitnehmerueberlassung"]{object-position:81% 42%!important}   /* Person ganz statt Helm angeschnitten */
  /* veranstaltungsschutz-ordner am 16.08.2026 auf 50 % zurueckgedreht. Claude Design hatte
     genau diesen Wert vorbehalten: "12 % ist der Wert, der aus meiner 12–88-Begrenzung
     entstand — urspruenglich 0 %. Bei einer Person am linken Bildrand rettet die Begrenzung
     den Beschnitt nicht immer; wenn der Ordner dort angeschnitten ist, ist 50 % besser als
     ein halber Mensch." Im Kontaktabzug nachgesehen: Bei 12 % ist nur die Weste im Bild,
     der Kopf faellt heraus. Also zurueck. */
  main > section:first-of-type img[src*="veranstaltungsschutz-ordner"]{object-position:50% 42%!important}
  /* 🔴 BEIDE am 16.08.2026 zurueck auf 50 %, nachdem der Kontaktabzug in ECHTER Breite
     (393 px statt 118 px) gerendert wurde. Claude Design hatte sie bestaetigt — aber auf
     Grundlage des verzerrten Abzugs, und bei richtiger Breite kippt das Urteil:
       mobile-sicherheit-flotte: bei 50 % ist "STAFF-SEC SOLUTION" am Fahrzeug vollstaendig
         lesbar, bei 27 % angeschnitten.
       diebstahlschutz-videoauswertung: bei 50 % sieht man den Mitarbeiter bei der Arbeit
         (Kopf im Profil, Hand am Steuerknueppel), bei 77 % nur Monitore ohne Person.
     Von elf Vorschlaegen aus der Kantendichte-Messung bleibt damit genau EINER. */

  /* einsatz-1 am 16.08.2026 zurueck auf 50 %: Claude Design hat den Abzug gesehen und
     widersprochen, ich habe es im Einzelvergleich bei voller Breite nachgeprueft — er hat
     recht. Bei 38 % beruehrt der Kopf fast den rechten Rand und das Brustlogo ist
     angeschnitten; bei 50 % sitzt das Gesicht frei und "STAFF-SEC SOLUTION" ist lesbar. */
  main > section:first-of-type img[src*="einsatz-1"]{object-position:50% 42%!important}

  /* dieselbe Regel fuer die Kopfbereiche, die ihr Motiv als Hintergrund tragen.
     /kontakt bleibt bei 50 % — im Abzug stand dort bei 12 % der leere Warteraum statt des
     Empfangsmitarbeiters. */
  html[data-seite="kontakt"] main > section:first-of-type{background-position:center, 50% 42%!important}
  html[data-seite="ausbildung"] main > section:first-of-type{background-position:center, 50% 42%!important}
  html[data-seite="karriere"] main > section:first-of-type{background-position:center, 38% 42%!important}
  html[data-seite="unternehmensleitbild"] main > section:first-of-type{background-position:center, 50% 42%!important}
}
/* === ENDE NACHTRAG 45 === */


/* === NACHTRAG 46 STAFFSEC 16.08.2026 - Ueberschrift neben Symbol linksbuendig === */
/* Claude Designs Rueckfrage zu den Bloecken mit "links 113 / rechts 49": Sitzt der KASTEN
   schief (Polsterfrage) oder der TEXT darin (Ausrichtungsfrage)? Gemessen ist es eine
   dritte Moeglichkeit, die genauer ist als beide:
     Elternknoten: `relative flex items-center gap-4 mb-5`, beginnt bei 49 px — richtig.
     Darin ein Symbol, daneben die Ueberschrift, die deshalb bei 113 px anfaengt — richtig.
     Und diese Ueberschrift hat `text-align:center` in einem 231 px schmalen Block — falsch.
   Der Text sitzt also mittig in einem Kasten, der neben einem Symbol steht. Am Rechner
   faellt es nicht auf, weil die Zeile dort breit genug fuer eine Zeile ist; am Handy bricht
   sie um, und die zweite Zeile steht zentriert unter der ersten.
   Behoben wird genau das, nicht pauschal alles: Text in einer waagerechten Zeile mit
   Symbol gehoert an die linke Kante. */
@media (max-width:767px){
  /* 19.08.2026 eingegrenzt: Seit NACHTRAG 82 dreht das Handy diese Zeilen auf Spalte —
     Symbol oben, Überschrift darunter, alles mittig. Die Begründung von Nachtrag 46
     ("Text neben einem Symbol gehört an die linke Kante") gilt dann nicht mehr, die Regel
     zog aber weiter Überschriften nach links und erzeugte genau das gemischte Bild, das
     Manuel gemeldet hat. Sie gilt jetzt nur noch dort, wo die Zeile WAAGERECHT bleibt:
     Pillen, Chip-Reihen und Zeilen mit einem Element am rechten Rand. */
  main [class*="items-center"][class*="gap-"]:is([class*="inline-flex"],[class*="flex-wrap"],[class*="justify-between"]) > :is(h2,h3,h4,p,span),
  main [class*="items-start"][class*="gap-"]:is([class*="inline-flex"],[class*="flex-wrap"],[class*="justify-between"]) > :is(h2,h3,h4,p,span){
    text-align:left!important;
  }
}
/* === ENDE NACHTRAG 46 === */


/* === NACHTRAG 47 STAFFSEC 16.08.2026 - Kopfbereich am Handy kuerzen === */
/* Claude Design: "Im Kopf muessen Kicker, H1, ein Satz und ein Knopf stehen, alles andere
   gehoert darunter. Sie sind Beleg, nicht Einstieg."
   Gemessen auf der Startseite (iPhone, 861 px Kopf) — was die Hoehe verursacht:
     Nachweis-Chips (ISO 9001 · DIN 77200 · DMB)          54 px + 24 Abstand =  78
     Vertrauensleiste (dieselben Nachweise als Textzeile) 132 px + 112 Abstand = 244
   Beides sind BELEGE, und beide stehen doppelt: dieselben Angaben fuellen weiter unten den
   Abschnitt "Geprueft, zertifiziert, nachweisbar" mit fuenf ausfuehrlichen Karten. Am Handy
   ausgeblendet geht deshalb keine Aussage verloren, sie steht nur eine Bildschirmlaenge
   spaeter. Am Rechner bleibt alles unveraendert.

   ⚠️ ABWEICHUNG von Claude Designs Vorgabe, mit Grund: Er wollte zusaetzlich den zweiten
   Knopf entfernen, weil er "ohnehin in der festen Handlungsleiste steht". Gemessen: Es
   GIBT keine feste Handlungsleiste — fixiert ist am Handy nur die Kopfzeile. Die
   Rufnummer im Kopf ist damit die einzige unmittelbare Anrufmoeglichkeit und bleibt. */
@media (max-width:767px){
  main > section:first-of-type [class*="delay-150"][class*="mb-6"],
  main > section:first-of-type [class*="mt-20"][class*="border-t"]{
    display:none!important;
  }
}
/* === ENDE NACHTRAG 47 === */


/* === NACHTRAG 48 STAFFSEC 16.08.2026 - Symbolkachel im Kopf der Leistungsseiten === */
/* Claude Design: "Die Kachel wiederholt, was die H1 daneben schon sagt, und sie kostet mit
   Abstand rund 150–170 px an der teuersten Stelle der Seite. Am Rechner bleibt sie: dort
   steht sie neben dem Text, nicht darueber, und kostet keine Hoehe."
   Gemessen: 64 x 64 px plus mb-8 (32 px) = 96 px je Seite, auf allen Leistungs- und
   Branchenseiten dieselbe Kachel (w-16 h-16 rounded-xl mit Symbol, ohne Text). */
@media (max-width:767px){
  main > section:first-of-type > div [class~="w-16"][class~="h-16"][class~="rounded-xl"]:not(:has(img)){
    display:none!important;
  }
}
/* === ENDE NACHTRAG 48 === */

/* Nachtrag 48b: Claude Designs zweite Stufe, weil die Kachel allein nicht bis 78 % reichte
   (objektschutz blieb bei 87 %). Fliesstext im Kopf schmaler und eine Stufe kleiner —
   nicht kuerzen, sondern die Zeilen besser fuellen. */
@media (max-width:767px){
  main > section:first-of-type > div p{
    max-width:34ch!important;
    font-size:16px!important;
    line-height:1.6!important;
  }
}


/* === NACHTRAG 49 STAFFSEC 16.08.2026 - eigene Stufe fuer kleine Geraete === */
/* Erster Lauf mit einem iPhone SE (375 x 667) zeigte: Dort sind die Koepfe weiter bei
   94 bis 106 %, weil der Inhalt gleich gross bleibt, der Bildschirm aber 185 px niedriger
   ist als beim 14 Pro. Claude Designs Entscheidung dazu:
     "Unter 700 px Bildschirmhoehe faellt die Brotkrume im Kopf weg (sie steht im JSON-LD
      und ist damit fuer Suchmaschinen unberuehrt) und der Fliesstext geht auf zwei Zeilen.
      Zusammen rund 90 px, damit /objektschutz bei ~617 px = 93 %. Nicht 78 % — auf 667 px
      Bildschirmhoehe ist das nicht erreichbar, ohne den Kopf seiner Aussage zu berauben.
      93 % heisst: Der Knopf liegt sicher im Bild, der naechste Abschnitt nicht mehr. Das
      ist der ehrliche Kompromiss fuer das kleinste Geraet." */
@media (max-height:700px) and (max-width:767px){
  /* Brotkrume nur im Kopfbereich — die Fusszeilen-Navigation bleibt.
     Gemessen: Es ist ein <nav aria-label="Breadcrumb"> ohne eigene Klasse und ohne <ol>,
     44 px hoch plus mb-10 = 84 px. Die erste Fassung suchte nach `nav ol` und einer
     Textfarbklasse — sie traf nichts. */
  main > section:first-of-type nav[aria-label="Breadcrumb"]{
    display:none!important;
  }
  main > section:first-of-type > div p{
    font-size:15px!important;
    line-height:1.55!important;
    max-width:32ch!important;
  }
}
/* === ENDE NACHTRAG 49 === */


/* === NACHTRAG 50a STAFFSEC 16.08.2026 - Kopfvideo am Handy, korrigiert ===
   Von Claude Design geliefert, ersetzt Nachtrag 50. Mein Fehler: Das Bildband wurde
   IMMER geloescht - auch wenn das Video gar nicht laeuft. Bei abgeschaltetem Video
   stand dann ein schwarzes Loch statt eines Bildes. */
@media (max-width:767px){
  video.ssx-hero-video{
    display:block!important;opacity:1!important;
    object-position:50% 38%!important;
  }
  div[class~="z-[1]"]:has(> video.ssx-hero-video:not([data-standbild])){
    height:auto!important;bottom:0!important;
    background-image:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  video.ssx-hero-video{display:none!important}
}
/* Dazu im Markup: poster= mit demselben Ausschnitt, sonst ist die erste
   Sekunde vor dem Laden schwarz statt Bild. */
/* === ENDE NACHTRAG 50a === */

/* === NACHTRAG 51 — Aufklappmenue: dunkles Glas statt weissem Block ===
   Manuel 16.08.2026: "so ein transparenter, coolerer Look als das, was wir haben —
   ist einfach so ein weisser Block, der dann aufgeht."

   Gemessener Ist-Zustand: bg-white, kein Weichzeichner, Rand #E8E5DE, Radius 12px.
   Die Kopfzeile darueber ist dunkel (transparent ueber dem Video bzw. rgba(13,15,17,.92)
   nach dem Scrollen, Nachtrag 38) — das weisse Panel bricht optisch mit ihr.

   Neu: dunkles Milchglas, das an die Leiste anschliesst. Weil damit der Grund kippt,
   ziehen ALLE 86 inventarisierten Elemente aus den vier Panels mit (panel-inventar.js):
   Links, Chevrons, Niederlassungs-Bloecke, Rubrik-Ueberschriften, Trennlinien.
   Genau das war beim ersten Versuch der Fehler — halbe Umfaerbung = tote Navigation.

   Nebenbefund, den der Umbau miterledigt: der Hinweistext im Standorte-Panel
   ("Bundesland links waehlen") stand auf rgba(255,255,255,.88) — weiss auf weiss,
   also unsichtbar. Auf dunklem Grund stimmt er von selbst. */

/* --- 1) Die Flaeche --- */
header div[class*="absolute"][class*="bg-white"]{
  background:rgba(16,19,22,.86)!important;
  -webkit-backdrop-filter:blur(24px) saturate(140%)!important;
          backdrop-filter:blur(24px) saturate(140%)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.48),0 2px 8px rgba(0,0,0,.30)!important;
}
/* Innere weisse Flaechen — im Standorte-Panel tragen die beiden Spalten eigenes bg-white */
header div[class*="absolute"][class*="bg-white"] [class*="bg-white"],
header div[class*="absolute"][class*="bg-white"] [class*="bg-[#F"],
header div[class*="absolute"][class*="bg-white"] [class*="bg-[#f"]{
  background:transparent!important;
}

/* --- 2) Die Schrift --- */
header div[class*="absolute"][class*="bg-white"] a,
header div[class*="absolute"][class*="bg-white"] a span,
header div[class*="absolute"][class*="bg-white"] a strong,
header div[class*="absolute"][class*="bg-white"] a div,
header div[class*="absolute"][class*="bg-white"] > div > span,
header div[class*="absolute"][class*="bg-white"] p,
header div[class*="absolute"][class*="bg-white"] li{
  color:#EDEAE4!important;
}
/* Beitexte eine Stufe leiser, damit die Namen fuehren */
header div[class*="absolute"][class*="bg-white"] a span[class*="text-[11"],
header div[class*="absolute"][class*="bg-white"] a span[class*="text-xs"],
header div[class*="absolute"][class*="bg-white"] p{
  color:rgba(237,234,228,.72)!important;
}
/* Rubrik-Ueberschriften bleiben Gold — auf dunkel im hellen Markenton statt #7A6435 */
header div[class*="absolute"][class*="bg-white"] [class~="text-[#B09A72]"],
header div[class*="absolute"][class*="bg-white"] .ssx-gruppe,
header div[class*="absolute"][class*="bg-white"] .ssx-staedte-rolle,
header div[class*="absolute"][class*="bg-white"] .ssx-standard-kopf,
header div[class*="absolute"][class*="bg-white"] .ssx-staedte-alle{
  color:#C6B08A!important;
}

/* --- 3) Kanten und Beruehrung --- */
header div[class*="absolute"][class*="bg-white"] *{
  border-color:rgba(255,255,255,.11)!important;
}
header div[class*="absolute"][class*="bg-white"] a:hover,
header div[class*="absolute"][class*="bg-white"] a:focus-visible{
  background:rgba(255,255,255,.075)!important;
}
header div[class*="absolute"][class*="bg-white"] a:hover span,
header div[class*="absolute"][class*="bg-white"] a:hover strong{
  color:#FFFFFF!important;
}

/* --- Nachtrag 51, Teil 2: die Stellen, die der Klassenselektor nicht erreicht ---
   Gemessen mit panel-klassen.js und regel-herkunft.js statt geraten:

   a) Das Standorte-Panel baut nicht auf Tailwind, sondern auf eigenen .ssx-Klassen —
      .ssx-laender und .ssx-staedte tragen ein eigenes Weiss (18 Flaechen).
   b) Das MOBILE Menue ist der Kasten mit bg-white + border-t. Das ist der "weisse Block,
      der dann aufgeht", den Manuel am Handy meint — er bekommt dasselbe Glas.
   c) Die Rubrik-Ueberschriften im Leistungen-Panel haben KEINE Farbklasse: React setzt
      color:#7A6435 als Inline-Stil. Ein Stylesheet-!important schlaegt Inline ohne
      !important — erreicht werden sie ueber ihre Trennlinie (border-b). */

header .ssx-standorte,
header .ssx-laender,
header .ssx-staedte,
header .ssx-land,
header .ssx-standard,
header .ssx-standard-karte{
  background:transparent!important;
}
header .ssx-land:hover,
header .ssx-standard-karte:hover{
  background:rgba(255,255,255,.07)!important;
}
header .ssx-laender,
header .ssx-staedte,
header .ssx-land,
header .ssx-standard-karte,
header .ssx-standorte *{
  border-color:rgba(255,255,255,.11)!important;
}

/* Mobiles Aufklappmenue */
header div[class~="bg-white"][class~="border-t"]{
  background:rgba(16,19,22,.94)!important;
  -webkit-backdrop-filter:blur(24px) saturate(140%)!important;
          backdrop-filter:blur(24px) saturate(140%)!important;
  border-top-color:rgba(255,255,255,.12)!important;
}
header div[class~="bg-white"][class~="border-t"] *{
  border-color:rgba(255,255,255,.11)!important;
}
header div[class~="bg-white"][class~="border-t"] [class*="bg-white"],
header div[class~="bg-white"][class~="border-t"] [class*="bg-[#F"]{
  background:transparent!important;
}

/* Rubrik-Ueberschriften (Inline-Gold) in allen Panels */
header nav div.relative > div[class*="absolute"] div[class*="border-b"],
header div[class~="bg-white"][class~="border-t"] div[class*="border-b"]{
  color:#C6B08A!important;
}
/* === ENDE NACHTRAG 51 === */

/* --- Nachtrag 51, Teil 3: die Kopfzeile bei offenem Handy-Menue ---
   Im Abzug (menue_handy.png) lief oben ein 185 px hoher Streifen ungedaempft weiter,
   waehrend darunter schon das Glas begann — eine harte Kante quer durchs Bild.
   Bei offenem Menue traegt die Leiste denselben Grund wie das Menue. */
/* 17.08.2026 — ZWILLING DES SCROLL-FEHLERS. Manuel: "Oben die Leiste wird nicht
   transparent, wenn man nach ganz oben scrollt."
   Hier stand `header:has(div[class~="bg-white"][class~="border-t"])`. Gemeint war
   "waehrend das Aufklappmenue offen ist"; getroffen wurde IMMER, denn das Menue steht
   auch geschlossen im DOM. Die Kopfleiste war dadurch dauerhaft dunkel (gemessen
   rgba(16,19,22,.94) bei Scrollposition 0, 200 und 1200 — kein Unterschied), und der
   Lesbarkeitsverlauf darunter war per opacity:0 abgeschaltet.
   Dieselbe Ursache wie bei touch-action (L-360): ein Selektor auf das VORHANDENSEIN
   statt auf den ZUSTAND. data-menue="offen" setzt das Bundle nur bei offenem Menue. */header[data-menue="offen"]{
  background:rgba(16,19,22,.94)!important;
  -webkit-backdrop-filter:blur(24px) saturate(140%)!important;
          backdrop-filter:blur(24px) saturate(140%)!important;
}
header[data-menue="offen"]::before{
  opacity:0!important;
}

/* === NACHTRAG 51a STAFFSEC 16.08.2026 - Aufklappmenue, gehaertet ===
   Von Claude Design geliefert, ersetzt Teil 4. Der Knopf wird gar nicht erst weiss
   gefaerbt statt hinterher korrigiert - damit bricht auch der naechste Knopf mit
   eigener Flaeche nicht wieder. */
header div[class*="absolute"][class*="bg-white"] a:not([class*="justify-center"]),
header div[class~="bg-white"][class~="border-t"] a:not([class*="justify-center"]){
  color:#EDEAE4!important;
}

/* Ersetzt meine Universalregel  header ...bg-white * { border-color }.
   Nur Elemente, die selbst einen Rand tragen - sonst erwischt es currentColor-Raender
   und SVG-Striche. */
header div[class*="absolute"][class*="bg-white"] [class*="border"],
header div[class~="bg-white"][class~="border-t"] [class*="border"]{
  border-color:rgba(255,255,255,.11)!important;
}

/* Ohne backdrop-filter schimmert die Seite durch .86 durch und die Schrift verliert
   Kontrast. Dann deckend. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header div[class*="absolute"][class*="bg-white"],
  header div[class~="bg-white"][class~="border-t"]{
    background:rgba(16,19,22,.97)!important;
  }
}

/* Teil 3 hing allein an :has() - auf aelterem Safari bleibt der 185-px-Streifen stehen.
   Attribut als Verlass, :has() als Komfort. Dazu setzt React beim Oeffnen
   data-menue="offen" aufs <header>. */
/* Claude Designs :has()-Rueckfall, Weg 1 (17.08.2026). Seine erste Fassung zielte auf
   ein Element h-[185px], das es nicht gibt — meine Diagnose (es ist die KOPFZEILE, nicht
   ein Streifen dieser Hoehe) hat er bestaetigt. React setzt das Attribut jetzt am
   <header>, damit die Regel auch dort greift, wo :has() fehlt (Firefox erst ab 121).
   Die :has()-Fassung bleibt daneben stehen: gleiche Werte, keine Kollision. */
header[data-menue="offen"]{
  background:rgba(16,19,22,.86)!important;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom-color:rgba(255,255,255,.11)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header[data-menue="offen"]{background:rgba(16,19,22,.97)!important}
}
/* === ENDE NACHTRAG 51a === */

/* === NACHTRAG 53a STAFFSEC 16.08.2026 - Tippziele im Inhalt, korrigiert ===
   Von Claude Design geliefert, ersetzt Nachtrag 53. Drei Fehler in meiner Fassung:
   min-height wirkt nicht auf inline-Elemente (mein zweiter Selektor lief ins Leere und
   meldete trotzdem "behoben"), items-center fasste auch Karten-Wrapper an, und die
   Flaeche wuchs auf Kosten des Satzspiegels. */
@media (max-width:767px){
  main a[class*="inline-flex"]:not([class*="btn"]):not([class*="rounded-md"]){
    min-height:44px;
    align-items:center;
    padding-block:10px;
    margin-block:-10px;   /* Flaeche waechst, Layout bleibt stehen */
  }
}
/* === ENDE NACHTRAG 53a === */


/* ============================================================================
   Nachtrag 54 — Abschnitt „Berufsbild" auf den fünf Personalseiten
   Gestaltung: Claude Design, 17.08.2026 (Auftrag 2). Einbau + Messung: einkauf 1.
   Anlass: „kommisionierer" bringt 7.028 Impressionen auf Position 3,3 — wer so
   sucht, will den Beruf verstehen, die Seite bot bisher nur „Personal mieten".
   ============================================================================ */

.ssx-berufsbild{
  background:#F8F7F4;
  padding-block:clamp(72px,7vw,104px);
}
.ssx-bb-innen{
  max-width:1216px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,32px);
}

/* ---- Kopfblock ---- */
.ssx-bb-kopf{max-width:736px;margin-bottom:46px}
.ssx-bb-label{
  display:block;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#856D3E;
  font-weight:600;
  margin-bottom:12px;
}
.ssx-bb-h2{
  font-size:clamp(27px,3.6vw,44px);
  line-height:1.16;
  letter-spacing:-.015em;
  color:#101316;
  font-weight:600;
  margin:0 0 16px;
}
.ssx-bb-lead{
  font-size:16px;
  line-height:1.66;
  color:#6B7280;
  margin:0;
}

/* ---- Dreiergrid ---- */
.ssx-bb-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;   /* NICHT stretch — Karten behalten ihre eigene Höhe */
}
.ssx-bb-karte{
  background:#fff;
  border:1px solid #E8E5DE;
  border-radius:20px;
  padding:clamp(26px,2.8vw,34px);
}

/* Struktur-Strich + Kartenlabel */
.ssx-bb-strich{
  display:block;
  width:26px;
  height:2px;
  background:#C9A961;
  margin-bottom:14px;
}
.ssx-bb-kartenlabel{
  display:block;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#98917F;
  font-weight:600;
  margin-bottom:8px;
}
.ssx-bb-h3{
  font-size:19px;
  line-height:1.32;
  color:#101316;
  font-weight:600;
  margin:0 0 18px;
}

/* ---- Spalte 1: Prüfliste ---- */
.ssx-bb-liste{list-style:none;margin:0;padding:0}
.ssx-bb-liste li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  color:#374151;
}
.ssx-bb-liste li + li{margin-top:12px}
.ssx-bb-haken{
  flex:0 0 auto;
  width:20px;height:20px;
  border-radius:50%;
  background:#F3EDDF;          /* Champagner */
  color:#856D3E;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.ssx-bb-haken svg{width:11px;height:11px;display:block}

/* ---- Spalte 2: Fließtext ---- */
.ssx-bb-text p{
  font-size:15px;
  line-height:1.62;
  color:#374151;
  margin:0;
}
.ssx-bb-text p + p{margin-top:14px}

/* ---- Spalte 3: Zeitleiste ---- */
/* Ein gemeinsames Grid statt eines je Marke: die erste Spalte richtet sich am
   breitesten Eintrag aus, damit die Textspalte buendig steht. Noetig, weil
   baulogistik Wochentage statt Uhrzeiten fuehrt (Montag/Mittwoch/Freitag) —
   tabular-nums wirkt nur auf Ziffern, gemessen 49,7/61,0/45,4px. */
.ssx-bb-zeit{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:12px;
  row-gap:16px;
  align-items:start;
}
.ssx-bb-marke{display:contents}
.ssx-bb-uhr{
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  color:#856D3E;
  letter-spacing:.02em;
  padding-top:1px;
  white-space:nowrap;
}
.ssx-bb-tun{
  font-size:14.5px;
  line-height:1.55;
  color:#374151;
}
/* Trennlinie zwischen den Marken, nicht darunter */
/* Trennlinie zwischen den Marken: bei display:contents liegen die Kinder direkt
   im Grid, die Linie gehoert deshalb an sie, nicht an die Marke selbst. */
.ssx-bb-marke + .ssx-bb-marke > *{
  border-top:1px solid #F0EDE6;
  padding-top:16px;
}

/* ---- Schlusszeile ---- */
.ssx-bb-schluss{
  max-width:60ch;
  margin:38px 0 0;
  font-size:15.5px;
  line-height:1.62;
  color:#4B5563;
}

/* ---- Ab 1024 einspaltig (Claude Design: bei drei Spalten wird es
        schon auf dem Tablet zu eng — nicht erst bei 767) ---- */
@media (max-width:1024px){
  .ssx-bb-grid{grid-template-columns:1fr;gap:16px}
  .ssx-bb-kopf{margin-bottom:34px}
}
@media (max-width:767px){
  .ssx-berufsbild{padding-block:64px}
  .ssx-bb-h2{margin-bottom:14px}
  .ssx-bb-schluss{margin-top:30px}
}

/* Der Abschnitt wird von ssxBloecke ausgegeben und trägt keine py-Klasse —
   die Abstands-Ordnung aus Nachtrag 52 greift hier nicht. Eigene Werte gelten. */

/* ============================================================================
   Nachtrag 55 — Label des Abschnitts „Für diese Branchen" (Auftrag 4)
   Der Abschnitt uebernimmt Kartenraster und Masse aus „Ergaenzende Leistungen".
   Dessen Label kommt aus einer React-Komponente, die in ssxBloecke nicht zur
   Verfuegung steht — deshalb hier in denselben Massen wie Claude Designs
   Berufsbild-Label (11px / .25em / #856D3E), damit die Bausteine gleich sprechen.
   ============================================================================ */
.ssx-fb-label{
  display:block;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#856D3E;
  font-weight:600;
  margin-bottom:12px;
}
/* ============================================================================
   Nachtrag 56 — Kontrast des Champagner-Labels auf hellem Verlaufsgrund
   Entscheidung: Claude Design, 17.08.2026 (Auftrag 5).
   Befund: Das Label "Jetzt kontaktieren" (11 px, #C4B08C) steht im Aufruf-Streifen
   auf einem Grund, der am Bildpunkt mit rgb(104,108,104) gemessen wurde — Kontrast
   2,53 gegen ein Soll von 4,5 fuer Kleintext. Der Chip selbst traegt nur
   rgba(196,176,140,.08), die Helligkeit kommt aus dem Verlauf der Sektion.
   Ein dunklerer Schriftton half nicht: #856D3E kaeme dort auf 1,08.
   Claude Design: "Der Grund bekommt rgba(16,19,22,.72) — der Wert, den das dunkle
   Glas im Aufklappmenue und der Kopf ohnehin fuehren. Damit ist der Goldton
   systemweit wieder eindeutig: #C4B08C auf dunkel, #856D3E auf hell, mittlere
   Gruende gibt es nicht."
   ============================================================================ */
section[class*="py-28"] div[class*="inline-flex"][class*="gap-3"]:has(> span[class*="text-[11px]"]){
  background:rgba(16,19,22,.72)!important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* ============================================================================
   Nachtrag 57 — Kopfmotiv fuer die Verteilerseite /standorte
   Manuel am 17.08.2026: "Es sollen auch keine schwarzen Balken irgendwo sein, ohne
   dass da irgendwie ein Bild im Hintergrund ist. Dann die Koepfe sollen ueberall
   Fotos sein."
   Gemessen ueber 16 Seitenarten x 2 Breiten: GENAU EINE Seite hatte einen dunklen
   Kopf ohne Bild — die Verteilerseite, die am selben Tag entstanden ist. Claude
   Design hatte sie als "Kopf, dunkel, kein Motiv" entworfen; Manuel entscheidet
   anders, und das ist seine Entscheidung.
   Werte uebernommen von den vier bestehenden Kopfregeln, Motiv standort-hamburg
   als das einzige mit Ortsbezug im Bestand.
   ============================================================================ */
html[data-seite="standorte"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.82) 0%,rgba(13,15,17,.58) 100%),
    url("/assets/staffsec/standort-hamburg-1440w.webp")!important;
  background-position:center, center 45%!important;
  background-size:cover, cover!important;
  background-repeat:no-repeat, no-repeat!important;
}
/* ============================================================================
   Nachtrag 58 — Handy-Befunde vom 17.08.2026
   Manuel hat die Vorschau auf dem iPhone geoeffnet und sieben Fotos geschickt:
   "hast ja doch keine Tiefenpruefung gemacht, da sind ja etliche Fehler".
   Er hatte recht. Regeln von Claude Design, Reihenfolge nach Schaden.
   ============================================================================ */

/* --- Befund 2: abgeschnittener Text in den Leistungskarten ---
   Gemessen: 42 px sichtbar, 63 px noetig — ein Drittel fehlte. Ursache war eine
   Zwei-Zeilen-Klammer (-webkit-line-clamp:2) auf dreizeiligem Text.
   Claude Design: "Deckel raus, nicht Text kuerzen. 42 statt 63 px ist eine
   Zwei-Zeilen-Klammer auf dreizeiligem Text; 'Sicherheit fuer Labor, Produktion
   & Gefahrgut' ohne das Ende ist kein kuerzerer Satz, sondern ein kaputter.
   Gleiche Kartenhoehe kommt vom Raster, nicht vom Element." */
[class~="min-h-[280px]"] p{
  -webkit-line-clamp:unset!important;
  display:block!important;
  overflow:visible!important;
}

/* --- Befund 1: die Zentrierung kippt ab der zweiten Zeile ---
   Der Elternknoten zentriert, das Textelement steht auf text-align:left. Bei einer
   Zeile faellt das nicht auf, ab zwei Zeilen kippt der Satz nach links — auf Manuels
   Foto steht "24/7/365 Einsatzbereitschaft" mittig und "Persoenliche Betreuung durch
   feste Ansprechpartner" links, in derselben Kartenreihe.
   :where() haelt die Spezifitaet auf 0 — jede bewusst gesetzte Klasse gewinnt weiter.
   Das :not() schuetzt die Stellen, an denen linksbuendig Absicht ist. */
[class*="text-center"] :where(p,h1,h2,h3,h4,span,li):not([class*="text-left"]):not([class*="text-start"]){
  text-align:inherit;
}
/* --- Befund 3: die Nachweise liefen am Handy aus dem Bild ---
   Gemessen bei 393 px Bildbreite: Karten bei x=722..1052 — also gar nicht sichtbar.
   Ursache: zwei Laufschriften (animate-marquee / -reverse) mit fest 380 px breiten,
   nicht schrumpfenden Karten. Auf dem Rechner ziehen sie vorbei, am Handy passt
   keine zweite ins Bild.
   Claude Design: "Untereinander stellen, nicht scrollbar. Die Sprungleiste durfte
   scrollen, weil sie Navigation ist. Diese Karten sind der Nachweis: ISO 9001,
   DIN 77200, eigene AUEG-Erlaubnis. Ein Nachweis, der hinter einer Wischbewegung
   liegt, ist fuer die Haelfte der Leser nicht vorhanden."
   Jede Reihe fuehrt ihre drei Karten zweimal (Endlosschleife) — am Handy bleibt
   die erste Haelfte stehen, die Wiederholung entfaellt. */
@media (max-width:767px){
  [class*="animate-marquee"]{
    animation:none!important;
    flex-direction:column!important;
    width:100%!important;
    gap:14px!important;
  }
  [class*="animate-marquee"] > *{
    width:100%!important;
    flex-shrink:1!important;
  }
  /* Die Wiederholung ab der vierten Karte ausblenden — sie war nur fuer den
     endlosen Lauf da und waere untereinander eine Dublette. */
  /* 19.08.2026 eingegrenzt: Diese Ausblendung gilt nur fuer die NACHWEIS-Karten, die
     am Handy untereinander stehen. Das Logoband laeuft seit Nachtrag 87 wieder — dort
     ist die Wiederholung kein Dublett, sondern die Voraussetzung fuer den endlosen Lauf.
     Ohne sie war das Band nur 424 px lang und bewegte sich 8 px je Sekunde. */
  [class*="animate-marquee"]:not(:has(img)) > *:nth-child(n+4){
    display:none!important;
  }
}
/* === NACHTRAG 59 STAFFSEC 17.08.2026 - der Standbild-Rueckfall wird angeschlossen ===
   Manuel: "Video laeuft nicht gut, Logo laeuft nicht ein." und
           "Es sollen keine schwarzen Balken sein, ohne dass da ein Bild im Hintergrund ist."

   Claude Design hat in Nachtrag 50a den richtigen Schalter gebaut:
       div[class~="z-[1]"]:has(> video.ssx-hero-video:not([data-standbild]))
   Traegt das Video die Marke data-standbild, wird das Bildband NICHT geleert. Seine
   Begruendung dort: "Bei abgeschaltetem Video stand dann ein schwarzes Loch statt eines
   Bildes." Gemessen am 17.08.: die Marke setzt niemand — weder JS noch HTML kennen sie.
   Der Rueckfall war toter Code, und genau deshalb blieb der Kopf schwarz, solange kein
   Video lief.

   Angeschlossen wird er an zwei Stellen:
     - im Markup als STARTZUSTAND (sonst ist der Kopf schwarz, bis das Video geladen hat -
       das Skript startet erst nach dem load-Ereignis)
     - in ssx-hero-video.js: entfernt bei "playing", zurueckgesetzt bei Ladefehler,
       verweigertem Autoplay oder wenn gar nicht geladen werden darf

   Was hier fehlte: der Zustand MIT Marke braucht dieselbe Geometrie wie der Zustand ohne,
   sonst springt der Kopf beim Umschalten von Bildband auf Video. Deshalb dieselbe Hoehe,
   keine Maske - und derselbe Bildausschnitt wie das object-position des Videos (50% 38%),
   damit man den Wechsel nicht sieht.
   === */
@media (max-width:767px){
  div[class~="z-[1]"]:has(> video.ssx-hero-video[data-standbild]){
    height:auto!important; bottom:0!important;
    -webkit-mask-image:none!important; mask-image:none!important;
    background-color:#060709;
    background-image:url("/assets/video/hero-standbild-480w.webp")!important;
    background-position:50% 38%!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }
}
/* Ab 768px gibt es kein Bildband - dort haelt das Elternfeld das Standbild selbst.
   Ohne das bliebe bei reduzierter Bewegung oder Datensparmodus der nackte dunkle Grund:
   ssx-hero-video.js setzt .ssx-hero-video{opacity:0} und schaltet erst bei "playing" auf 1,
   und ein unsichtbares <video> malt auch sein poster nicht. */
@media (min-width:768px){
  div[class~="z-[1]"]:has(> video.ssx-hero-video[data-standbild]){
    background-color:#060709;
    background-image:url("/assets/video/hero-standbild.webp");
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
  }
}
@media (min-width:768px) and (max-width:1100px){
  div[class~="z-[1]"]:has(> video.ssx-hero-video[data-standbild]){
    background-image:url("/assets/video/hero-standbild-960w.webp");
  }
}
/* === ENDE NACHTRAG 59 === */
/* === NACHTRAG 60 STAFFSEC 17.08.2026 - Scrollsperre bei offenem Menue vervollstaendigen ===
   Gemessen am 17.08.: Bei offenem Aufklappmenue steht body{overflow:hidden} korrekt, die
   Seite laesst sich aber trotzdem um 500 px scrollen. Der Grund: Gescrollt wird das
   Wurzelelement, nicht der body - eine Sperre am body allein greift dann nicht.

   VORSICHT an dieser Stelle (L-360): Genau hier stand einmal ein Selektor, der JEDE Seite
   traf, weil das Menue auch geschlossen im DOM steht - die Website war am Handy gar nicht
   mehr scrollbar. Deshalb wird hier auf den ZUSTAND geprueft, nicht auf das Vorhandensein.
   Belegt am 17.08.: geschlossen ist data-menue nicht gesetzt, offen steht "offen" darin.
   === */
html:has(header[data-menue="offen"]){
  overflow:hidden!important;
}
/* === ENDE NACHTRAG 60 === */

/* === NACHTRAG 61 STAFFSEC 18.08.2026 - Ausrichtung des Vertrauensstreifens ===
   Der Streifen (Claude Designs E1) traegt flex-wrap und geriet damit zwischen zwei
   bestehende Regeln, beide von ihm und beide fuer sich richtig:

     main section div[class~="flex-wrap"]:not([class~="text-left"]) { justify-content:center }
         "umbrechende Reihen mittig" - gedacht fuer Kennzahlenreihen
     main section [class~="text-left"] { justify-content:space-between !important }
         gedacht fuer Aufklapp-Schalter: Text links, Pfeil rechts

   Ohne text-left wurde der Streifen zentriert, waehrend H1, Lead und Knoepfe links
   stehen. MIT text-left rutschte die zweite Gruppe an den rechten Rand (gemessen:
   x=195 statt 44 bei 393px Bildbreite). Der Streifen ist weder eine Kennzahlenreihe
   noch ein Schalter - er braucht seine eigene Ansage.

   Der Aufbau in zwei Gruppen stammt von Claude Design (Weg 4, 18.08.): Strich und
   Bewertung bilden eine Einheit, damit der Umbruch am Handy zwischen Bewertung und
   Nachweisen faellt statt hinter dem Strich.
   === */
main section div.ssx-vertrauen{
  justify-content:flex-start!important;
  column-gap:12px!important;
  text-align:left!important;
}
/* === ENDE NACHTRAG 61 === */

/* === NACHTRAG 62 STAFFSEC 18.08.2026 - Ansprechpartner-Portraet (E2) ===
   Claude Designs Vorgabe vom 18.08., nachdem er seine erste Fassung selbst korrigiert hat:
     "Der Abschnitt bleibt hell. Position 9 ist die helle Insel zwischen 8 und 10, und die
      Isolation kommt hier von den Nachbarn, nicht von der eigenen Flaeche. ... Meine
      Vorgabe 'Ansprechpartner dunkel' galt fuer die Standortseiten, wo 8 und 10 hell
      sind; sie war ortsgebunden, nicht absolut."
     "Zeig es links auf gut einem Drittel der Breite, ungerahmt und ungeschnitten (kein
      Kreis, kein border-radius ueber 20 px), Text rechts. Am Handy Bild ueber Text, volle
      Breite, Hoehe gedeckelt auf clamp(320px,52vw,420px) mit object-position:50% 25%,
      damit der Kopf im Bild bleibt."
     "Das Portraet braucht auf #F8F7F4 eine Kante, sonst verlaeuft ein heller
      Bildhintergrund in die Flaeche: border:1px solid #E8E5DE, kein Schatten."

   Ist-Zustand vorher: 150x210 px am Handy, 200x280 ab 1024 px - also weit unter einem
   Drittel; dazu ein 3 px starker Champagner-Rahmen (inline) und shadow-xl.
   Das Bild ist 640x896, also 5:7 - aspect-ratio haelt es unverzerrt, ohne zu schneiden.
   === */
/* Die Breite gehoert an den ELTERNKNOTEN. Gemessen am 18.08.: Ein Prozentwert am Bild
   selbst bezieht sich auf dessen Container - und der traegt shrink-0 ohne eigene Breite.
   Ergebnis war 260 px statt 34 % am Rechner und 2 px (!) am Handy, weil width:100% dort
   auf einen Container zeigt, der sich nach dem Inhalt richtet. */
div:has(> .ssx-zitat-bild){ width:clamp(260px,34%,340px); }
.ssx-zitat-bild{
  width:100%!important;
  height:auto!important;
  aspect-ratio:5/7;
  border:1px solid #E8E5DE!important;
  box-shadow:none!important;
  border-radius:16px;
}
.ssx-zitat-bild img{
  width:100%;height:100%;object-fit:cover;
}
@media (max-width:1023px){
  div:has(> .ssx-zitat-bild){ width:100%; }
  .ssx-zitat-bild{
    width:100%!important;
    height:clamp(320px,52vw,420px)!important;
    aspect-ratio:auto;
  }
  .ssx-zitat-bild img{ object-position:50% 25%!important; }
}
/* === ENDE NACHTRAG 62 === */

/* === NACHTRAG 63 STAFFSEC 18.08.2026 - Vertrauensleiste, zweite Fassung ===
   Erste Fassung von Manuel abgelehnt: "das macht grafisch nichts mehr ... da oben so
   reingeschissen, so ganz kurz und knapp." Claude Designs Diagnose dazu: "Was Manuel als
   'macht grafisch nichts' beschreibt, war nicht die Leiste, sondern zwei Textenden ohne
   Mitte. Nicht die Elemente groesser machen, sondern die Flaeche gliedern."

   Dreiteilig, 46 px: Bewertung als Block - vier Siegel - Hotline, dazwischen Striche.
   Die Siegel duerfen hier stehen, obwohl der Hero ISO 9001 und DIN 77200 nennt: "ein
   Siegel ist ein Bild, 'ISO 9001' ist ein Wort. Zwei Kanaele, keine Wiederholung."
   DMB bleibt draussen - Mitgliedschaft, kein Nachweis, wie schon bei E1.
   === */
.ssx-leiste{
  position:relative; z-index:60;
  height:46px; background:#0D0F11;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ssx-leiste-innen{
  max-width:80rem; margin:0 auto; height:100%; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  line-height:1;
}
.ssx-leiste-bew{ display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ssx-leiste-zahl{ font-size:17px; font-weight:800; color:#C4B08C; letter-spacing:.01em; }
.ssx-leiste-stern{ font-size:12px; color:#C4B08C; }
.ssx-leiste-quelle{ font-size:11px; color:rgba(255,255,255,.62); }
/* Der Strich gliedert die Flaeche - er ersetzt Leere durch Ordnung */
.ssx-leiste-strich{ flex:none; width:1px; height:20px; background:rgba(255,255,255,.08); }
.ssx-leiste-siegel{ display:inline-flex; align-items:center; gap:20px; opacity:.72; }
.ssx-leiste-siegel img{ height:22px; width:auto; display:block; }
.ssx-leiste-tel{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:rgba(255,255,255,.62); white-space:nowrap;
  padding-block:14px; margin-block:-14px;   /* 44 px Tippflaeche ohne Mehrhoehe */
  transition:color .3s;
}
.ssx-leiste-hot{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.48); }
.ssx-leiste-nr{ font-size:15px; font-weight:600; color:#C4B08C; }
.ssx-leiste-tel:hover .ssx-leiste-nr,.ssx-leiste-tel:focus-visible .ssx-leiste-nr{ color:#D8C6A4; }

/* Die Kopfleiste ist fixed. Solange die Leiste im Bild steht, beginnt der Kopf 46 px
   tiefer; sobald gescrollt wird (Klassenwechsel bg-transparent -> bg-white/95), rutscht
   er nach oben. Geprueft wird der ZUSTAND, nicht das Vorhandensein (L-360). */
header.fixed{ top:46px; }
header.fixed[class*="bg-white"]{ top:0; }

/* Ab 1024 px die Siegel, ab 640 px die Bewertung - am Handy bleibt die Hotline */
@media (max-width:1023px){
  .ssx-leiste-siegel,.ssx-leiste-strich{ display:none; }
}
@media (max-width:639px){
  .ssx-leiste-quelle{ font-size:10px; }
  .ssx-leiste-hot{ display:none; }
  .ssx-leiste-nr{ font-size:13px; }
}
/* === ENDE NACHTRAG 63 === */

/* === NACHTRAG 64 STAFFSEC 18.08.2026 - H1 gegen Umbruch absichern ===
   Befund: "Ihr Sicherheitsdienst" brach bei 88 px auf 3 Zeilen um (Rechner), auf 4 am
   Handy. Bei 88 px passen etwa 12-14 Zeichen in die Spalte; das Wort hat 17.
   Manuel dazu: "ist gebrochen ... ganz schlecht so versenkt."

   Claude Designs Absicherungen, unabhaengig vom Text:
     clamp(34px,5.6vw,80px) statt 88 - bei 1440 ergibt 5,6vw rund 80, also dieselbe
       Wirkung mit 8 px Reserve
     text-wrap:balance - verteilt die Zeilen, statt die letzte hungern zu lassen
     hyphens:manual - kein auto, "das trennt irgendwo"

   Und die Regel fuer jeden kuenftigen H1-Text: hoechstens 14 Zeichen im laengsten Wort.
   Reisst ein Text sie, ist es ein Textproblem, kein Groessenproblem.
   === */
main > section:first-of-type h1{
  font-size:clamp(34px,5.6vw,80px)!important;
  text-wrap:balance;
  hyphens:manual;
}
main > section:first-of-type h1 > span{
  font-size:inherit!important;
}
/* === ENDE NACHTRAG 64 === */

/* === NACHTRAG 65 STAFFSEC 18.08.2026 - Touch-Scrollen im Aufklappmenue absichern ===
   Manuel am iPhone: "auch oben ueber den Reiter, ueber Standorte, da kann ich es auch
   nicht aufrufen ... da ist es auch leer und da ueberlappt sich das auch."

   Am Testbrowser scrollt das Menue einwandfrei: 682 px sichtbar von 4732, nach 600 px
   Wischen sind NRW, Hessen und Rheinland-Pfalz im Bild. Der Fehler ist also nicht die
   Hoehe, sondern iOS-eigen: Nachtrag 60 setzt bei offenem Menue html{overflow:hidden},
   und Safari behandelt Touch-Scrollen in Kindelementen dann anders als Chrome auf dem
   Rechner - die Bewegung landet am gesperrten Wurzelelement statt im Menue.

   Drei Zusaetze, alle nur fuer das Menue selbst:
     -webkit-overflow-scrolling:touch  gibt dem Element seinen eigenen Scroll-Kontext
     overscroll-behavior:contain       haelt die Bewegung im Menue, statt sie nach aussen
                                       durchzureichen (kein Rubberband am Dokument)
     touch-action:pan-y                erlaubt genau die senkrechte Bewegung, die es braucht
   Kein !important und keine Aenderung an Nachtrag 60 - die Sperre des Hintergrunds bleibt.
   === */
header[data-menue="offen"] div[class*="lg:hidden"][class*="overflow"]{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
/* === ENDE NACHTRAG 65 === */


/* === NACHTRAG 66 — Manuels drei Bildschirmfotos vom 18.08.2026 ===================
   Alles unten ist gemessen, nicht aus dem CSS geschlossen (L-366). Messskripte:
   _arbeit/menue-messen.js, menue-messen2.js, menue-quelle.js.

   Der erste Messlauf hat sich selbst im Weg gestanden: das offene Kopfmenue lag ueber
   dem Abschnitt "Bundesweit praesent" und fing die Maus ab. Erst getrennt gemessen
   wurden beide Befunde sauber sichtbar. Deshalb hier zwei verschiedene Ursachen.

   a) "bei den anderen ist alles verschoben"
      Das Kopfmenue zeigt ZWEI Panels uebereinander. .ssx-standard (die drei
      Niederlassungen) wird nie ausgeblendet - gedeckt wurde es allein durch das
      background:#fff von .ssx-staedte, das z-index:2 traegt. Nachtrag 51 hat beiden
      per background:transparent!important das Weiss genommen, um sie ins dunkle Glas
      zu holen. Seitdem stehen beide Texte uebereinander.
      Gemessen: .ssx-staedte -> rgba(0,0,0,0), .ssx-standard -> rgba(0,0,0,0).
      Der Fix blendet .ssx-standard aus, sobald ein Land angesteuert wird - so wie es
      die .ssx-hd-Fassung schon macht. Der deckende Grund bleibt als Rueckfall fuer
      Browser ohne :has() (Firefox vor 121).

   b) "beim ersten Bild kommt man nicht rueber"
      Das ist NICHT das Kopfmenue, sondern der Startseiten-Abschnitt "Bundesweit
      praesent" (.ssx-hd, dunkel, mit Rollen wie "Hauptsitz Neumuenster").
      .ssx-hd hat grid-template-columns:352px 1fr mit gap:30px, das Panel liegt
      absolut bei left:382px. Gemessen: Landzeile endet bei x=541, Panel beginnt bei
      x=571 - dazwischen 30 px, auf denen weder Land noch Panel liegt. Die Maus
      verliert dort den :hover, das Panel klappt zu, bevor man es erreicht.
      Der Fix legt eine unsichtbare Bruecke genau ueber diese 30 px. Sie gehoert zum
      gehoverten .ssx-hd-land, der :hover bleibt also erhalten. Layout unveraendert.

   c) "Veranstaltungsschu / tz"
      h1..h4 tragen overflow-wrap:break-word mit hyphens:manual. Passt ein langes Wort
      nicht in die Zeile, bricht der Browser hart mitten im Wort statt zu trennen.
      Gemessen auf /veranstaltungsschutz: font-size 80px, Container 768px,
      hyphens "manual", lang="de". Mit hyphens:auto trennt er an der Silbe -
      "Veranstaltungs-" / "schutz". break-word bleibt als letzter Notnagel stehen.
   ================================================================================= */

/* --- a) Kopfmenue: nur EIN Panel sichtbar --- */
header .ssx-standorte:has(.ssx-land:hover) .ssx-standard,
header .ssx-standorte:has(.ssx-land:focus-within) .ssx-standard{
  display:none!important;
}
/* Rueckfall ohne :has() - deckender Grund im Ton des .ssx-hd-panel */
header .ssx-staedte{
  background:rgba(11,13,18,.96)!important;
}

/* --- b) Abschnitt "Bundesweit praesent": die 30 px Luecke ueberbruecken ---
   Nur dort, wo das Panel ueberhaupt absolut liegt. Unter 1024px ist es
   display:none (Nachtrag der Mobilfassung), dann waere die Bruecke sinnlos. */
@media (min-width:1024px){
  .ssx-hd-land:hover::after,
  .ssx-hd-land:focus-within::after{
    content:"";
    position:absolute;
    left:352px;
    width:30px;
    top:0;
    bottom:0;
    z-index:2;
  }
}

/* --- c) Ueberschriften trennen statt zerhacken --- */
h1,h2,h3,h4{
  hyphens:auto!important;
  -webkit-hyphens:auto!important;
}
/* === ENDE NACHTRAG 66 === */

/* --- d) Nachzuegler der Umfaerbung: der Laendername im Panelkopf ---
   Erst sichtbar geworden, seit a) das Panel wieder deckt - vorher ging er im
   Durcheinander der zwei uebereinanderliegenden Panels unter.
   Gemessen (_arbeit/panelkopf-messen.js): rgb(45,52,54) auf rgb(11,13,18) =
   Kontrast 1,53:1. Zum Vergleich im selben Panel: Staedte 16,19:1, Rolle 9,23:1.
   .ssx-staedte-name ist ein <span> in .ssx-staedte-kopf und lag damit ausserhalb
   aller Selektoren von Nachtrag 51 - der Hellwert #2D3436 stand seitdem unveraendert. */
header .ssx-staedte-name{
  color:#FFFFFF!important;
}
/* === ENDE NACHTRAG 66, Teil d === */


/* === NACHTRAG 67 — Kopf-Durchlauf aus fuenf Fotos statt Video =====================
   Manuel am 18.08.2026: "es soll nicht das video sein sondern der durchlauf mit den
   5 fotos" und "was wir heute morgen hatten auch auf der startseite und stadtseiten".

   Bisher lief im Kopf eine MP4 (929 KB, crf 30, 1280x720), die der Browser auf 1440 px
   und mehr hochzieht - sichtbar weich. Dieselben fuenf Motive liegen als WebP im
   Bestand und werden hier direkt durchgeblendet:

       MP4                929 KB   hochskaliert
       fuenf WebP         335 KB   native Aufloesung
       davon am Handy      70 KB   (480w-Fassungen ueber srcset)

   Zeiten wie im Video: 4,6 s Standzeit je Motiv, 1,3 s Ueberblendung, Zyklus 17,8 s.
   Bei fuenf Bildern ist das je 20 % des Zyklus, die Ueberblendung 7,3 %.

   Die Kamerafahrt (das "Wacklige") kommt aus einer zweiten Animation auf transform.
   Richtung und Zoomrichtung wechseln von Motiv zu Motiv, damit es nicht eintoenig
   wirkt - dieselbe Logik wie im Bauskript hero-video-v5.ps1.

   Helligkeit und Saettigung je Motiv sind aus jenem Bauskript uebernommen, damit der
   Kopf so dunkel und entsaettigt bleibt wie bisher und die weisse Schrift darauf
   lesbar ist.
   ================================================================================= */

.ssx-durchlauf{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.ssx-df-bild{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  will-change:opacity,transform;
  animation:ssx-df-blende 17.8s linear infinite, ssx-df-fahrt 17.8s ease-in-out infinite;
}

/* Ein-/Ausblenden: 7,3 % Ueberblendung, dann 20 % stehen lassen */
@keyframes ssx-df-blende{
  0%    {opacity:0}
  7.3%  {opacity:1}
  20%   {opacity:1}
  27.3% {opacity:0}
  100%  {opacity:0}
}

/* Kamerafahrt - nur waehrend das Bild sichtbar ist, danach ist die Deckkraft 0 */
@keyframes ssx-df-fahrt{
  0%    {transform:scale(1.02) translate3d(0,0,0)}
  27.3% {transform:scale(1.10) translate3d(-1.2%,0,0)}
  100%  {transform:scale(1.10) translate3d(-1.2%,0,0)}
}
@keyframes ssx-df-fahrt-zurueck{
  0%    {transform:scale(1.10) translate3d(1.2%,0,0)}
  27.3% {transform:scale(1.02) translate3d(0,0,0)}
  100%  {transform:scale(1.02) translate3d(0,0,0)}
}

/* Versatz je Motiv: 20 % von 17,8 s = 3,56 s.
   Farbwerte aus hero-video-v5.ps1 (hell/satt je Motiv). */
.ssx-df-bild:nth-child(1){animation-delay:0s,0s;            filter:brightness(1.06) saturate(.75)}
.ssx-df-bild:nth-child(2){animation-delay:3.56s,3.56s;      filter:brightness(.70) saturate(.58);
                          animation-name:ssx-df-blende,ssx-df-fahrt-zurueck}
.ssx-df-bild:nth-child(3){animation-delay:7.12s,7.12s;      filter:brightness(.86) saturate(.60)}
.ssx-df-bild:nth-child(4){animation-delay:10.68s,10.68s;    filter:brightness(.82) saturate(.58);
                          animation-name:ssx-df-blende,ssx-df-fahrt-zurueck}
.ssx-df-bild:nth-child(5){animation-delay:14.24s,14.24s;    filter:brightness(.78) saturate(.62)}

/* Wer weniger Bewegung eingestellt hat, bekommt ein stehendes Bild - nie ein leeres
   Feld. Dieselbe Zusage wie beim Video (Standbild-Rueckfall, Nachtrag 59). */
@media (prefers-reduced-motion:reduce){
  .ssx-df-bild{animation:none;opacity:0;transform:none}
  .ssx-df-bild:nth-child(1){opacity:1}
}
/* === ENDE NACHTRAG 67 === */

/* === NACHTRAG 68 — der Mittelstandsbund in der Kopfleiste =========================
   Manuel am 18.08.2026: "oben in den reitern vllt noch dmb? mittelstandsbund" und
   direkt danach: "dmb musst du schoener machen, sieht doof aus". Er hat recht, und
   der Grund ist messbar:

       iso9001    205x272   Verhaeltnis 0,75   transparent, helle Zeichnung
       iso77200   199x272   0,73               transparent, helle Zeichnung
       avpq       160x126   1,27               transparent, helle Zeichnung
       ihk        160x160   1,00
       dmb        160x38    4,21               DECKEND WEISS, schwarze Schrift

   Zwei Fehler auf einmal: Ich hatte dem Logo width=22 height=22 gegeben wie den
   runden Siegeln - bei 4,21:1 wird es gequetscht. Und sein weisser Kasten steht als
   heller Block in einer Leiste, in der alles andere durchscheinend ist.

   a) Hoehe statt Breite bindet die Groesse. 13 px, Breite laeuft mit. Nicht 22 px:
      eine breite Wortmarke wiegt bei gleicher Hoehe optisch dreimal so schwer wie
      ein Rundsiegel. Ueber die Flaeche gerechnet (22x22 = 484 px2) entspraeche das
      knapp 11 px - 13 px ist der Kompromiss, damit der Schriftzug lesbar bleibt.
   b) grayscale + invert dreht Weiss zu Schwarz und die schwarze Schrift zu Weiss;
      screen laesst das nun schwarze Feld auf dem dunklen Grund verschwinden. Uebrig
      bleibt die helle Wortmarke - dieselbe Anmutung wie bei den anderen vier.
   ================================================================================= */
.ssx-leiste-siegel img[src*="dmb"]{
  height:12px;
  width:auto;
  filter:grayscale(1) invert(1);
  mix-blend-mode:screen;
  opacity:.72;
}
/* === ENDE NACHTRAG 68 === */

/* === NACHTRAG 69 — Verweis auf die eigenen Schwestermarken ========================
   Manuel am 18.08.2026: "Kontrollfahrt nach RSA 21, da fehlt noch die Verlinkung zu
   kontrollfahrten.com, also dass die Seiten gegenseitig verlinkt sind" und dasselbe
   fuer Baulogistik.

   Nachgesehen statt angenommen: Die GEGENRICHTUNG steht bereits — kontrollfahrten.com
   verweist 4x auf staffsec.de, baulogistik-nord.de 1x. Es fehlte nur unsere Richtung.
   Und die Domain heisst baulogistik-nord.DE; .com gibt es nicht (geprueft, 000).

   Der Kasten steht bewusst im Textfluss und nicht im Fuss: Wer auf der Leistungsseite
   ist, soll die Fachmarke sehen, solange er beim Thema ist. */
.ssx-marke{
  margin:34px 0 6px;
  padding:26px 30px;
  border:1px solid #E8E5DE;
  border-left:3px solid #C4B08C;
  border-radius:14px;
  background:#FBFAF8;
}
.ssx-marke-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7A6435;
  margin-bottom:8px;
}
.ssx-marke-name{
  font-size:19px;
  font-weight:800;
  color:#2D3436;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.ssx-marke-text{
  font-size:14.5px;
  line-height:1.65;
  color:#6B7280;
  margin:0 0 16px;
  max-width:62ch;
}
.ssx-marke-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#7A6435;
  text-decoration:none;
  border-bottom:1px solid rgb(196 176 140 / .45);
  padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.ssx-marke-link:hover{ color:#2D3436; border-color:#2D3436; }
.ssx-marke-link:focus-visible{ outline:3px solid #C4B08C; outline-offset:3px; border-radius:4px; }

/* Auf dunklen Flaechen (falls der Kasten dort einmal landet) */
section[class*="0D0F11"] .ssx-marke,
section[class*="060709"] .ssx-marke{
  background:rgb(255 255 255 / .04);
  border-color:rgb(255 255 255 / .10);
}
section[class*="0D0F11"] .ssx-marke-name,
section[class*="060709"] .ssx-marke-name{ color:#fff; }
section[class*="0D0F11"] .ssx-marke-text,
section[class*="060709"] .ssx-marke-text{ color:rgb(255 255 255 / .55); }

@media (max-width:640px){
  .ssx-marke{ padding:20px 18px; margin:26px 0 4px; }
  .ssx-marke-name{ font-size:17px; }
}
/* === ENDE NACHTRAG 69 === */

/* === NACHTRAG 70 — zwei Branchenbilder mit fremdem Schriftzug ====================
   Manuel am 18.08.2026: "An der Startseite bei ÖPNV auf jeden Fall das Bild ändern.
   Da steht irgendwie Transit Security" und "So wie auch das bei Einzelhandel."

   Nachgesehen: Auf dem OEPNV-Bild traegt die Weste gross lesbar TRANSIT SECURITY,
   auf dem Einzelhandel-Bild sitzt ein US-Sheriffstern und eine SECURITY-Muetze.
   Beides fremde Anmutung auf unserer Seite.

   Einzelhandel ist getauscht: assets/staffsec/branche-einzelhandel.webp, dasselbe
   Motiv, das die Branchenseite schon im Kopf fuehrt (Bekleidungsgeschaeft, kein Logo).

   Beim OEPNV gibt es im ganzen Bestand KEIN zweites Bahnmotiv — 28 generierte Bilder
   durchgesehen, nur dieses eine zeigt eine Bahn. Manuel wollte die Bahn behalten
   ("mit der Bahn ist es okay"). Deshalb hier der Ausschnitt statt eines neuen Bildes:
   Der Wachmann steht am rechten Rand; mit object-position links faellt er aus dem
   sichtbaren Bereich, uebrig bleiben Bahn, Bahnsteig und Fahrgaeste.
   ⚠️ Das ist ein Behelf. Ein eigenes Bahnmotiv ohne Fremdaufschrift bleibt offen. */
img[src*="b29c27f0-8e80-462f"]{
  object-position:0% center;
  transform:scale(1.5);
  transform-origin:8% center;
}
/* === ENDE NACHTRAG 70 === */

/* === NACHTRAG 71 — Rueckmeldung der Formulare ====================================
   Gehoert zu ssx-formular.js: Bisher hatte das Kontaktformular kein action-Attribut,
   beim Absenden lud die Seite neu und die Daten waren weg. Jetzt geht die Nachricht an
   partner.staffsec.de - und der Absender bekommt eine sichtbare Antwort statt gar keiner. */
.ssx-fm-meldung{
  margin-top:14px;
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  line-height:1.55;
  border:1px solid #E8E5DE;
  background:#F8F7F4;
  color:#2D3436;
}
.ssx-fm-meldung[data-gut="0"]{
  border-color:rgb(180 60 60 / .35);
  background:rgb(180 60 60 / .06);
  color:#8A2E2E;
}
.ssx-fm-meldung[data-gut="1"]{
  border-color:rgb(196 176 140 / .5);
  background:rgb(196 176 140 / .10);
}
/* Auf dunklen Flaechen lesbar bleiben */
section[class*="0D0F11"] .ssx-fm-meldung,
section[class*="060709"] .ssx-fm-meldung{
  background:rgb(255 255 255 / .06);
  border-color:rgb(255 255 255 / .14);
  color:#EDEAE4;
}
/* === ENDE NACHTRAG 71 === */

/* === NACHTRAG 72 — Download-Kasten fuer Mappen und Broschueren ====================
   Manuel: "die Broschuere dort auch zum Download auf jeden Fall anbieten auf der
   Homepage, dass sie da einen Einblick gewaehren koennen."
   Erst nach Pruefung der BILDRECHTE-Akte eingebaut: Die KRITIS-Mappe traegt eigene
   Motive und Pexels-Bilder (kommerziell nutzbar, keine Personen, keine fremden Anlagen).
   Die Einzelhandels-Broschuere bekommt KEINEN Download - dort stehen Kaufland- und
   Lidl-Logos, die auf staffsec.de bisher nicht oeffentlich sind. */
.ssx-dl{
  display:flex;
  align-items:center;
  gap:22px;
  margin:30px 0 6px;
  padding:24px 28px;
  border:1px solid #E8E5DE;
  border-radius:14px;
  background:#FBFAF8;
}
.ssx-dl-zeichen{
  flex:0 0 auto;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgb(196 176 140 / .16);
  color:#7A6435;
  font-size:11px;font-weight:800;letter-spacing:.06em;
}
.ssx-dl-text{flex:1 1 auto;min-width:0}
.ssx-dl-titel{font-size:16.5px;font-weight:800;color:#2D3436;margin:0 0 4px;letter-spacing:-.01em}
.ssx-dl-unter{font-size:13.5px;line-height:1.55;color:#6B7280;margin:0}
.ssx-dl-knopf{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:10px;
  background:#C4B08C;color:#1A1D21;
  font-size:14px;font-weight:700;text-decoration:none;
  transition:background .2s,transform .2s;
}
.ssx-dl-knopf:hover{background:#D4C29F;transform:translateY(-1px)}
.ssx-dl-knopf:focus-visible{outline:3px solid #7A6435;outline-offset:3px}
@media (max-width:680px){
  .ssx-dl{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px}
  .ssx-dl-knopf{width:100%;justify-content:center}
}
/* === ENDE NACHTRAG 72 === */

/* --- Nachtrag 71b: Angaben fuer ein Angebot --- */
.ssx-fm-angebot{
  margin:22px 0 18px;
  padding:20px 22px;
  border:1px dashed rgb(196 176 140 / .45);
  border-radius:12px;
  background:rgb(196 176 140 / .05);
}
.ssx-fm-angebot-kopf{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7A6435;
}
.ssx-fm-gitter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
}
.ssx-fm-feld{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#4B5563}
.ssx-fm-feld input,.ssx-fm-feld select{
  padding:9px 12px;
  border:1px solid #E8E5DE;
  border-radius:8px;
  font-size:14px;
  color:#2D3436;
  background:#fff;
}
.ssx-fm-feld input:focus,.ssx-fm-feld select:focus{
  outline:2px solid rgb(196 176 140 / .6);
  outline-offset:1px;
  border-color:#C4B08C;
}
/* Auf dunklem Grund lesbar */
section[class*="0D0F11"] .ssx-fm-angebot-kopf,
section[class*="060709"] .ssx-fm-angebot-kopf{color:#C4B08C}
section[class*="0D0F11"] .ssx-fm-feld,
section[class*="060709"] .ssx-fm-feld{color:rgb(255 255 255 / .6)}
@media (max-width:640px){ .ssx-fm-gitter{grid-template-columns:1fr} }



/* === NACHTRAG 73 — Angebotsanfrage in zwei Schritten =============================
   Manuel: "noch cooler waer, wenn man dann die Leistung auswaehlen kann. Das haben wir
   auch bei baulogistik-nord.de und kontrollfahrten.com gemacht."
   Nachgesehen auf kontrollfahrten.com: dunkler Kopf mit Pille, grosser Ueberschrift und
   Schrittanzeige, darunter helle Auswahlkarten, unten ein breiter Knopf. Dasselbe Muster
   hier, in unseren Farben. Gehoert zu ssx-angebot.js. */
.ssx-ang-huelle{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
.ssx-ang-grund{position:absolute;inset:0;background:rgb(6 7 9 / .66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ssx-ang-ein .35s ease both}
.ssx-ang-fenster{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow-y:auto;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgb(0 0 0 / .42);animation:ssx-ang-hoch .4s cubic-bezier(.16,1,.3,1) both}
@keyframes ssx-ang-ein{from{opacity:0}to{opacity:1}}
@keyframes ssx-ang-hoch{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* Kopf */
.ssx-ang-kopf{position:relative;padding:26px 30px 20px;background:linear-gradient(135deg,#12151A 0%,#1C2128 100%);color:#fff;border-radius:20px 20px 0 0}
.ssx-ang-zu{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;border-radius:9px;background:rgb(255 255 255 / .08);font-size:22px;line-height:1;color:#fff;cursor:pointer;transition:background .2s}
.ssx-ang-zu:hover{background:rgb(255 255 255 / .18)}
.ssx-ang-pille{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:rgb(196 176 140 / .16);color:#C4B08C;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ssx-ang-punkt{width:6px;height:6px;border-radius:50%;background:#C4B08C}
.ssx-ang-titel{margin:14px 0 8px;font-size:24px;line-height:1.2;font-weight:900;letter-spacing:-.02em;color:#fff}
.ssx-ang-unter{margin:0;font-size:14px;line-height:1.6;color:rgb(255 255 255 / .58);max-width:42ch}
.ssx-ang-schritte{display:flex;align-items:center;gap:12px;margin-top:18px}
.ssx-ang-schritt{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgb(255 255 255 / .42)}
.ssx-ang-schritt b{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgb(255 255 255 / .12);font-size:11.5px;font-weight:800}
.ssx-ang-schritt.aktiv{color:#fff}
.ssx-ang-schritt.aktiv b{background:#C4B08C;color:#12151A}
.ssx-ang-schritt.fertig b{background:rgb(196 176 140 / .35);color:#fff}
.ssx-ang-strich{flex:0 0 34px;height:1px;background:rgb(255 255 255 / .18)}

/* Koerper */
.ssx-ang-koerper{padding:24px 30px 26px}
.ssx-ang-frage{margin:0 0 14px;font-size:15px;font-weight:700;color:#2D3436}
.ssx-ang-karten{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ssx-ang-karte{display:flex;align-items:center;gap:14px;width:100%;padding:13px 15px;border:1px solid #E8E5DE;border-radius:12px;background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ssx-ang-karte:hover{border-color:rgb(196 176 140 / .6);background:#FBFAF8}
.ssx-ang-karte.gewaehlt{border-color:#C4B08C;background:rgb(196 176 140 / .09)}
.ssx-ang-zeichen{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgb(196 176 140 / .14);color:#7A6435}
.ssx-ang-zeichen svg{width:20px;height:20px}
.ssx-ang-kartentext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ssx-ang-kartentext b{font-size:14.5px;font-weight:700;color:#2D3436}
.ssx-ang-kartentext i{font-style:normal;font-size:12.5px;color:#6B7280}
.ssx-ang-punktwahl{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid #D8D4CC;transition:border-color .2s,box-shadow .2s}
.ssx-ang-karte.gewaehlt .ssx-ang-punktwahl{border-color:#C4B08C;box-shadow:inset 0 0 0 4px #C4B08C}

/* Formular */
.ssx-ang-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:14px}
.ssx-ang-feld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#4B5563}
.ssx-ang-breit{grid-column:1 / -1}
.ssx-ang-feld input,.ssx-ang-feld textarea{padding:10px 12px;border:1px solid #E8E5DE;border-radius:9px;font-size:14px;color:#2D3436;font-family:inherit;resize:vertical}
.ssx-ang-feld input:focus,.ssx-ang-feld textarea:focus{outline:2px solid rgb(196 176 140 / .6);outline-offset:1px;border-color:#C4B08C}
.ssx-ang-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ssx-ang-gewaehlt{margin:0 0 16px;font-size:12.5px;color:#6B7280}
.ssx-ang-gewaehlt b{color:#2D3436}
.ssx-ang-zurueck{border:0;background:transparent;color:#7A6435;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0 0 0 4px}

/* Knoepfe */
.ssx-ang-weiter{display:block;width:100%;padding:14px 20px;border:0;border-radius:11px;background:#C4B08C;color:#1A1D21;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.ssx-ang-weiter:hover:not([disabled]){background:#D4C29F;transform:translateY(-1px)}
.ssx-ang-weiter[disabled]{opacity:.42;cursor:not-allowed}
.ssx-ang-spaeter{display:block;margin:14px auto 0;border:0;background:transparent;font-size:13px;color:#9AA0A6;cursor:pointer;text-decoration:underline}
.ssx-ang-spaeter:hover{color:#2D3436}
.ssx-ang-meldung{margin:12px 0 0;font-size:13.5px;color:#6B7280;min-height:1px}
.ssx-ang-meldung[data-gut="0"]{color:#8A2E2E}
.ssx-ang-fertig{margin:0 0 18px;font-size:15px;line-height:1.65;color:#2D3436}
.ssx-ang-fertig b{display:block;margin-bottom:6px;font-size:17px}
.ssx-ang-fertig a{color:#7A6435;font-weight:700}
.ssx-ang-zu:focus-visible,.ssx-ang-karte:focus-visible,.ssx-ang-weiter:focus-visible,
.ssx-ang-spaeter:focus-visible,.ssx-ang-zurueck:focus-visible{outline:3px solid #7A6435;outline-offset:3px}
html[data-ssx-angebot="offen"]{overflow:hidden}
@media (prefers-reduced-motion:reduce){.ssx-ang-grund,.ssx-ang-fenster{animation:none}}
@media (max-width:560px){
  .ssx-ang-kopf{padding:22px 20px 16px}
  .ssx-ang-koerper{padding:20px}
  .ssx-ang-form{grid-template-columns:1fr}
  .ssx-ang-titel{font-size:21px}
}
/* === ENDE NACHTRAG 73 === */

/* === NACHTRAG 74: Leistungs-Panel mit vier Spalten ==========================
   Mit der vierten Gruppe (Baulogistik) blieb im Dreier-Raster die vierte Kachel
   allein unter Spalte 1 stehen - daneben zwei leere Spalten ueber die halbe
   Panelhoehe. Vier Spalten statt drei, das Panel entsprechend breiter, aber nie
   breiter als das Fenster. Der Zusatz :nth-last-child(1) sorgt dafuer, dass die
   Regel nur bei GENAU vier Gruppen greift - kommt eine fuenfte dazu, faellt das
   Menue in sein altes Verhalten zurueck statt still schief zu laufen. */
header .grid.grid-cols-3:has(> div:nth-child(4):nth-last-child(1)){
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:32px;
  width:772px;
  max-width:calc(100vw - 96px);
}
/* Auf schmalen Notebooks (das Kopfmenue erscheint ab 1024px) steht der Aufklapper
   schon weit rechts - 772px Raster liefen dort 41px aus dem Bild. Dort schmaler. */
@media (max-width:1120px){
  header .grid.grid-cols-3:has(> div:nth-child(4):nth-last-child(1)){
    width:686px;
    column-gap:24px;
  }
}
/* === ENDE NACHTRAG 74 === */

/* === NACHTRAG 75: Abgrenzung, Nutzen und Dringlichkeit (ssx-usp.js) ==========
   Nach dem Vorbild aquila-security.de (Manuel, 18.08.2026: "Das gleiche wie Aquila").
   Drei Bausteine, die uns fehlten: ein Dringlichkeits-Abschnitt weit oben, eine
   Gegenueberstellung "wir / haeufig am Markt" und die Uebersetzung in Nutzen.
   Aquila ist mit 4.112 Zeichen der textaermste Anbieter im Vergleich, hat aber die
   meisten Abschnitte (25) - viele kurze Bloecke statt weniger langer. Diese Regeln
   halten die Bloecke deshalb bewusst schmal und luftig. */

.ssx-usp{position:relative;padding:88px 0}
.ssx-usp-innen{max-width:1180px;margin:0 auto;padding:0 24px}
/* 900 statt 760 px: "Was uns von anderen Sicherheitsdienstleistern unterscheidet"
   brach sonst mitten im Wort um (hyphens:auto trennte "Sicher-heitsdienstleistern"). */
.ssx-usp-kopf{max-width:900px;margin:0 0 46px}
.ssx-usp-marke{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.25em;
  text-transform:uppercase;color:#7A6435;margin-bottom:16px}
.ssx-usp-titel{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.12;
  letter-spacing:-.02em;color:#2D3436;margin:0 0 14px;hyphens:auto}
.ssx-usp-unter{font-size:17px;line-height:1.7;color:#6B7280;margin:0}

/* --- Gegenueberstellung --- */
.ssx-usp-vergleich{background:#F8F7F4}
.ssx-usp-gitter{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:#E8E5DE;border:1px solid #E8E5DE;border-radius:16px;overflow:hidden}
.ssx-usp-spaltenkopf{padding:18px 24px;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;background:#fff}
.ssx-usp-spaltenkopf.ssx-usp-wir{color:#7A6435;background:#fff}
.ssx-usp-spaltenkopf.ssx-usp-markt{color:#9AA0A6;background:#FBFAF8}
.ssx-usp-zelle{display:flex;gap:12px;padding:20px 24px;background:#fff;
  font-size:15px;line-height:1.65}
.ssx-usp-zelle p{margin:0}
.ssx-usp-zelle.ssx-usp-wir{color:#2D3436}
.ssx-usp-zelle.ssx-usp-markt{color:#9AA0A6;background:#FBFAF8}
.ssx-usp-haken{flex:0 0 auto;color:#7A6435;font-weight:900;line-height:1.5}
.ssx-usp-strich{flex:0 0 auto;color:#C9CDD2;font-weight:700;line-height:1.5}

/* --- Nutzen --- */
.ssx-usp-nutzen{background:#fff}
.ssx-usp-nutzen-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ssx-usp-karte{padding:28px;border:1px solid #E8E5DE;border-radius:16px;background:#fff;
  transition:border-color .3s,transform .3s}
.ssx-usp-karte:hover{border-color:rgba(196,176,140,.55);transform:translateY(-3px)}
.ssx-usp-nummer{display:block;font-size:26px;font-weight:900;color:#C4B08C;
  line-height:1;margin-bottom:14px}
.ssx-usp-karte-titel{font-size:17px;font-weight:800;color:#2D3436;margin:0 0 9px;line-height:1.35}
.ssx-usp-karte-text{font-size:14.5px;line-height:1.8;color:#6B7280;margin:0}

/* --- Dringlichkeit --- */
.ssx-usp-akut{background:#0D0F11;color:#fff}
.ssx-usp-akut .ssx-usp-titel{color:#fff;max-width:820px}
.ssx-usp-akut .ssx-usp-marke{color:#C4B08C}
.ssx-usp-akut-text{max-width:860px}
.ssx-usp-akut-p{font-size:17px;line-height:1.85;color:rgba(255,255,255,.72);margin:0 0 26px}
.ssx-usp-akut-liste{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.ssx-usp-akut-liste li{position:relative;padding-left:26px;font-size:15.5px;
  line-height:1.7;color:rgba(255,255,255,.86)}
.ssx-usp-akut-liste li::before{content:"";position:absolute;left:0;top:10px;
  width:9px;height:9px;border-radius:50%;background:#C4B08C}
.ssx-usp-knopf{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;
  border-radius:12px;background:#C4B08C;color:#0D0F11;font-weight:800;font-size:16px;
  text-decoration:none;transition:background .25s,transform .25s}
.ssx-usp-knopf:hover{background:#D4C5A0;transform:translateY(-2px)}

@media (max-width:900px){
  .ssx-usp{padding:64px 0}
  .ssx-usp-nutzen-gitter{grid-template-columns:1fr}
  .ssx-usp-gitter{grid-template-columns:1fr}
  /* Auf dem Handy stehen die Spaltenkoepfe nicht mehr nebeneinander - dann verwirren
     sie mehr, als sie helfen. Die Zellen tragen ihre Zuordnung ueber Haken und Strich. */
  .ssx-usp-spaltenkopf.ssx-usp-markt{display:none}
  .ssx-usp-spaltenkopf.ssx-usp-wir{background:#fff}
}
/* === ENDE NACHTRAG 75 === */

/* === NACHTRAG 76: "Wenn es eilt" neu gefasst ================================
   Manuel zur ersten Fassung (18.08.2026): "Das finde ich zu gross und auch nicht
   grafisch gemacht und auch der Hintergrund ist schwarz ... das muss grafisch viel
   besser sein. Das finde ich einfach nicht ansprechend."
   Gemessen war es 771 px dunkle Flaeche zwischen zwei hellen Abschnitten (Position 3
   hell, 4 DUNKEL, 5 hell) - ein Klotz im Rhythmus, dazu ein fuenfzeiliger Absatz.
   Neu: heller Grund, die Zusage als grosse Zahl in einem goldenen Feld (der
   grafische Anker), daneben ein Satz und drei Merkmale als Chips. Rund halb so hoch.
   Die Regeln aus Nachtrag 75 fuer .ssx-usp-akut werden hier bewusst ueberschrieben -
   Nachtrag 76 steht spaeter in der Datei und gewinnt in der Kaskade (L-375). */

.ssx-usp-akut{background:#F8F7F4;color:#2D3436;padding:64px 0}
.ssx-usp-akut .ssx-usp-marke{color:#7A6435}

.ssx-usp-akut-karte{display:grid;grid-template-columns:270px 1fr;gap:40px;
  align-items:center;background:#fff;border:1px solid #E8E5DE;border-radius:22px;
  padding:38px 42px;box-shadow:0 18px 44px rgba(13,15,17,.06)}

/* --- Der Blickfang: die Zahl --- */
.ssx-usp-akut-zahl{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;padding:30px 28px;border-radius:18px;
  background:linear-gradient(140deg,#C4B08C 0%,#D4C5A0 55%,#B9A277 100%);
  color:#0D0F11;min-height:220px;overflow:hidden}
.ssx-usp-akut-zahl::after{content:"";position:absolute;right:-38px;bottom:-46px;
  width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.22)}
.ssx-usp-akut-ring{position:relative;z-index:1;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:rgba(13,15,17,.12)}
.ssx-usp-akut-ring svg{width:23px;height:23px}
.ssx-usp-akut-gross{position:relative;z-index:1;display:block;font-size:58px;
  font-weight:900;line-height:.95;letter-spacing:-.03em}
.ssx-usp-akut-einheit{position:relative;z-index:1;display:block;font-size:19px;
  font-weight:800;margin-top:2px}
.ssx-usp-akut-fuss{position:relative;z-index:1;display:block;margin-top:12px;
  font-size:13px;line-height:1.5;font-weight:600;color:rgba(13,15,17,.72);max-width:190px}

/* --- Rechts: Text --- */
.ssx-usp-akut-titel{font-size:clamp(24px,2.6vw,33px);font-weight:900;line-height:1.15;
  letter-spacing:-.02em;color:#2D3436;margin:6px 0 12px}
.ssx-usp-akut-p{font-size:16px;line-height:1.75;color:#6B7280;margin:0 0 20px;max-width:640px}

.ssx-usp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.ssx-usp-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid #E8E5DE;border-radius:999px;background:#FBFAF8;
  font-size:13.5px;font-weight:600;color:#2D3436}
.ssx-usp-chip svg{width:16px;height:16px;color:#7A6435;flex:0 0 auto}

.ssx-usp-akut .ssx-usp-knopf{padding:14px 26px;font-size:15.5px}
.ssx-usp-akut .ssx-usp-knopf svg{width:18px;height:18px}
.ssx-usp-akut .ssx-usp-knopf:hover{background:#0D0F11;color:#fff}

@media (max-width:980px){
  .ssx-usp-akut-karte{grid-template-columns:1fr;gap:26px;padding:30px 26px}
  .ssx-usp-akut-zahl{min-height:0;padding:24px}
  .ssx-usp-akut-gross{font-size:48px}
  .ssx-usp-akut-fuss{max-width:none}
}
@media (max-width:560px){
  .ssx-usp-akut{padding:48px 0}
  .ssx-usp-akut-karte{border-radius:18px;padding:24px 20px}
  .ssx-usp-chip{font-size:12.5px;padding:8px 13px}
  .ssx-usp-akut .ssx-usp-knopf{width:100%;justify-content:center;text-align:center}
}
/* === ENDE NACHTRAG 76 === */

/* === NACHTRAG 77: Gegenueberstellung als echte Vergleichstabelle =============
   Manuel am 18.08.2026: "Auch dieses, was uns unterscheidet, muss noch grafisch
   geiler gemacht werden."
   Vorher: zwei Textspalten mit Haken und Gedankenstrich - man musste sie LESEN.
   Jetzt drei Spalten: vorn das Merkmal mit Nummer, dann unsere Seite hervorgehoben
   (weisser Grund, goldener Haken im Kreis), dann der Markt zurueckgenommen (blass,
   graues Kreuz). Damit laesst sich die Tabelle ueberfliegen, und das Auge weiss
   sofort, welche Spalte die unsere ist.
   Diese Regeln stehen nach Nachtrag 75 und gewinnen deshalb in der Kaskade (L-375). */

.ssx-usp-gitter{grid-template-columns:170px 1fr 1fr;gap:1px;
  background:#E8E5DE;border:1px solid #E8E5DE;border-radius:18px;overflow:hidden}

.ssx-usp-spaltenkopf{display:flex;align-items:center;gap:9px;padding:16px 22px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ssx-usp-spaltenkopf svg{width:16px;height:16px}
.ssx-usp-spaltenkopf.ssx-usp-merkmal{background:#F3F1EC}
.ssx-usp-spaltenkopf.ssx-usp-wir{color:#7A6435;background:#fff;
  box-shadow:inset 0 3px 0 #C4B08C}
.ssx-usp-spaltenkopf.ssx-usp-markt{color:#9AA0A6;background:#FBFAF8}

/* Merkmalsspalte */
.ssx-usp-zelle.ssx-usp-merkmal{display:flex;flex-direction:column;gap:4px;
  align-items:flex-start;background:#F3F1EC;padding:20px 22px}
.ssx-usp-nr{font-size:12px;font-weight:900;color:#C4B08C;letter-spacing:.06em}
.ssx-usp-merkmal-text{font-size:14.5px;font-weight:800;color:#2D3436;line-height:1.35}

/* Unsere Spalte: hervorgehoben */
.ssx-usp-zelle.ssx-usp-wir{background:#fff;color:#2D3436;align-items:flex-start;
  padding:20px 22px;gap:13px}
.ssx-usp-marke-kreis{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:rgba(196,176,140,.18);color:#7A6435}
.ssx-usp-marke-kreis svg{width:15px;height:15px;stroke-width:2.4}

/* Marktspalte: zurueckgenommen */
.ssx-usp-zelle.ssx-usp-markt{background:#FBFAF8;color:#9AA0A6;align-items:flex-start;
  padding:20px 22px;gap:13px}
.ssx-usp-markt-kreis{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:rgba(154,160,166,.14);color:#B4B9BE}
.ssx-usp-markt-kreis svg{width:14px;height:14px;stroke-width:2.2}

@media (max-width:980px){
  /* Gestapelt: je Merkmal ein Block. Die Merkmalszeile wird zur Ueberschrift, damit
     ohne Spaltenkoepfe klar bleibt, worum es in den zwei Zeilen darunter geht. */
  .ssx-usp-gitter{grid-template-columns:1fr}
  .ssx-usp-spaltenkopf{display:none}
  .ssx-usp-zelle.ssx-usp-merkmal{flex-direction:row;align-items:baseline;gap:10px;
    padding:16px 20px 12px;background:#F3F1EC}
  .ssx-usp-zelle.ssx-usp-wir,.ssx-usp-zelle.ssx-usp-markt{padding:14px 20px}
  .ssx-usp-zelle.ssx-usp-markt{padding-bottom:18px}
}
/* === ENDE NACHTRAG 77 === */

/* Nachtrag 77b: "Was uns von anderen Sicherheitsdienstleistern unterscheidet" wurde
   als "Sicher-heitsdienstleistern" getrennt. hyphens:auto ist auf dieser Seite global
   gesetzt (Nachtrag 66) und half im Fliesstext - in einer 44-px-Ueberschrift sieht es
   nach Fehler aus. Fuer die Bloecke aus Nachtrag 75 deshalb nur Umbruch zwischen
   Woertern, und etwas mehr Breite dafuer. */
.ssx-usp-titel,.ssx-usp-akut-titel{hyphens:manual!important}
.ssx-usp-kopf{max-width:1000px}

/* === NACHTRAG 78: Bewerbungsformular auf /karriere ==========================
   Die Seite hatte den Abschnitt "Fragen zur Bewerbung" und Florian als
   Ansprechpartner - aber kein Formular, nur einen mailto auf info@staffsec.de.
   Manuel am 18.08.2026: "es muss halt ankommen, wenn die das Formular absenden."
   Baustein: assets\ssx-karriere.js, Versand ueber ssx-formular.js (Ziel bewerbung). */

.ssx-bw{background:#F8F7F4;padding:80px 0}
.ssx-bw-innen{max-width:900px;margin:0 auto;padding:0 24px}
.ssx-bw-kopf{margin:0 0 34px}
.ssx-bw-marke{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.25em;
  text-transform:uppercase;color:#7A6435;margin-bottom:14px}
.ssx-bw-titel{font-size:clamp(26px,3vw,38px);font-weight:900;line-height:1.15;
  letter-spacing:-.02em;color:#2D3436;margin:0 0 12px;hyphens:manual}
.ssx-bw-unter{font-size:16px;line-height:1.75;color:#6B7280;margin:0;max-width:640px}

.ssx-bw-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;
  background:#fff;border:1px solid #E8E5DE;border-radius:20px;padding:32px;
  box-shadow:0 16px 40px rgba(13,15,17,.05)}
.ssx-bw-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.ssx-bw-breit{grid-column:1 / -1}
.ssx-bw-feld label{font-size:13px;font-weight:700;color:#2D3436}
.ssx-bw-feld input,.ssx-bw-feld select,.ssx-bw-feld textarea{
  font:inherit;font-size:15px;padding:12px 14px;border:1px solid #E8E5DE;border-radius:10px;
  background:#FBFAF8;color:#2D3436;transition:border-color .2s,background .2s;width:100%}
.ssx-bw-feld textarea{resize:vertical;min-height:104px}
.ssx-bw-feld input:focus,.ssx-bw-feld select:focus,.ssx-bw-feld textarea:focus{
  outline:none;border-color:#C4B08C;background:#fff}
.ssx-bw-feld input::placeholder,.ssx-bw-feld textarea::placeholder{color:#9AA0A6}

.ssx-bw-abschluss{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.ssx-bw-knopf{font:inherit;font-size:16px;font-weight:800;padding:15px 30px;border:0;
  border-radius:12px;background:#C4B08C;color:#0D0F11;cursor:pointer;
  transition:background .25s,transform .25s}
.ssx-bw-knopf:hover{background:#0D0F11;color:#fff;transform:translateY(-2px)}
.ssx-bw-knopf:focus-visible{outline:3px solid #7A6435;outline-offset:3px}
.ssx-bw-hinweis{flex:1 1 260px;margin:0;font-size:13px;line-height:1.65;color:#6B7280}

@media (max-width:720px){
  .ssx-bw{padding:56px 0}
  .ssx-bw-form{grid-template-columns:1fr;padding:24px 20px}
  .ssx-bw-knopf{width:100%}
}
/* === ENDE NACHTRAG 78 === */

/* === NACHTRAG 79: Teamfotos verteilen, Karriere ohne Portraet =================
   Manuel am 19.08.2026, zwei Beobachtungen in einem Satz:
   (1) "ich bin immer noch zu sehen als ansprechpartner mit dem bild bei jetzt
       bewerben" — der Kopf von /karriere trug `einsatz-1.webp`, sein Einzelportraet.
       Auf einer Bewerberseite ist das doppelt falsch: Wer sich bewirbt, will das
       Team sehen, nicht den Gesellschafter — und Ansprechpartner ist Florian.
   (2) "bei Unternehmensleitbild, ueber uns, Ausbildung etc. ist immer das gleiche
       Teamfoto zu sehen" — stimmt: Nachtrag 22 legt `team-buero.webp` hinter JEDE
       dunkle Flaeche dieser Seiten. Die Kopfbilder waren schon verschieden, der
       Untergrund darunter nicht.

   Es gibt drei Aufnahmen derselben Besprechung aus verschiedenen Blickwinkeln
   (team-buero, team-besprechung, team-runde). Sie werden hier auf die Seiten
   verteilt, statt dreimal dieselbe zu zeigen. Neue Fotos wuerden mehr bringen —
   die stehen bei Manuel aus (Punkt 12). */

/* (1) Karriere: Teamfoto statt Einzelportraet */
html[data-seite="karriere"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.84) 0%,rgba(13,15,17,.60) 100%),
    url("/assets/staffsec/team-runde-1440w.webp")!important;
  background-position:center, 50% 38%!important;
}

/* (2) Der Untergrund hinter dunklen Flaechen — je Seite ein anderer Blickwinkel.
   Diese Regeln stehen nach Nachtrag 22 und gewinnen deshalb in der Kaskade (L-375). */
html[data-seite="unternehmen"] section[style*="rgb(45, 52, 54)"],
html[data-seite="unternehmen"] section[style*="rgb(45,52,54)"],
html[data-seite="unternehmen"] section[class*="bg-[#2D3436]"]{
  background-image:linear-gradient(to bottom,rgba(45,52,54,.70) 0%,rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-runde.webp")!important;
}
html[data-seite="unternehmensleitbild"] section[style*="rgb(45, 52, 54)"],
html[data-seite="unternehmensleitbild"] section[style*="rgb(45,52,54)"],
html[data-seite="unternehmensleitbild"] section[class*="bg-[#2D3436]"]{
  background-image:linear-gradient(to bottom,rgba(45,52,54,.70) 0%,rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-besprechung.webp")!important;
}
html[data-seite="team"] section[style*="rgb(45, 52, 54)"],
html[data-seite="team"] section[style*="rgb(45,52,54)"],
html[data-seite="team"] section[class*="bg-[#2D3436]"]{
  background-image:linear-gradient(to bottom,rgba(45,52,54,.70) 0%,rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-besprechung.webp")!important;
}
/* /karriere und /ausbildung behalten team-buero als Untergrund — ihre Kopfbilder
   (team-runde bzw. team-besprechung) unterscheiden sie bereits voneinander. */
/* === ENDE NACHTRAG 79 === */

/* === NACHTRAG 80: "Wenn es eilt" zentriert, eine Reihe, in Markenfarben =======
   Manuel am 19.08.2026: "vielleicht zentrieren, eine Reihe … die sind einfach nur
   in Staffsec-Farben im Hintergrund … bei ein bis drei Stunden das einfach mal ein
   bisschen grafisch noch geiler machen."
   Vorher: links ein goldenes Feld mit der Zahl, rechts Text und Chips - zweispaltig
   und linksbuendig. Jetzt: alles mittig, drei gleichrangige Kacheln in EINER Reihe,
   alle im Goldton der Marke, die Zusagen als grosse Zahlen.
   Diese Regeln stehen nach Nachtrag 76 und gewinnen in der Kaskade (L-375). */

.ssx-usp-akut{background:#F8F7F4;padding:76px 0}
.ssx-usp-akut .ssx-usp-innen{max-width:1080px}

.ssx-usp-akut-kopf{max-width:760px;margin:0 auto 40px;text-align:center}
.ssx-usp-akut-titel{font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.12;
  letter-spacing:-.02em;color:#2D3436;margin:6px 0 14px;hyphens:manual}
.ssx-usp-akut-p{font-size:16.5px;line-height:1.8;color:#6B7280;margin:0}

/* --- Die Reihe --- */
.ssx-usp-akut-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ssx-usp-akut-kachel{position:relative;overflow:hidden;text-align:center;
  padding:34px 26px 30px;border-radius:20px;
  background:linear-gradient(150deg,#C4B08C 0%,#D4C5A0 52%,#B9A277 100%);
  color:#0D0F11;box-shadow:0 16px 38px rgba(196,176,140,.28);
  transition:transform .3s,box-shadow .3s}
.ssx-usp-akut-kachel:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(196,176,140,.38)}
/* Lichtkreis wie im Kopfbereich - gibt der Flaeche Tiefe, ohne ein Bild zu laden */
.ssx-usp-akut-kachel::after{content:"";position:absolute;right:-50px;bottom:-60px;
  width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.20)}

.ssx-usp-akut-ring{position:relative;z-index:1;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  background:rgba(13,15,17,.13)}
.ssx-usp-akut-ring svg{width:24px;height:24px}
.ssx-usp-akut-gross{position:relative;z-index:1;display:block;font-size:clamp(38px,4.6vw,54px);
  font-weight:900;line-height:1;letter-spacing:-.03em}
.ssx-usp-akut-einheit{position:relative;z-index:1;display:block;font-size:15px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;
  color:rgba(13,15,17,.78)}
.ssx-usp-akut-fuss{position:relative;z-index:1;display:block;margin:14px auto 0;
  font-size:13.5px;line-height:1.6;font-weight:600;color:rgba(13,15,17,.72);max-width:230px}

/* --- Aufruf darunter, mittig --- */
.ssx-usp-akut-fussleiste{display:flex;justify-content:center;margin-top:36px}
.ssx-usp-akut .ssx-usp-knopf{padding:16px 32px;font-size:16px;background:#0D0F11;color:#fff}
.ssx-usp-akut .ssx-usp-knopf svg{width:19px;height:19px}
.ssx-usp-akut .ssx-usp-knopf:hover{background:#C4B08C;color:#0D0F11}

@media (max-width:900px){
  .ssx-usp-akut-reihe{grid-template-columns:1fr;gap:16px}
  .ssx-usp-akut-kachel{padding:28px 22px 26px}
  .ssx-usp-akut-fuss{max-width:none}
}
@media (max-width:560px){
  .ssx-usp-akut{padding:52px 0}
  .ssx-usp-akut .ssx-usp-knopf{width:100%;justify-content:center}
}
/* === ENDE NACHTRAG 80 === */

/* Nachtrag 80b: Der Karriere-Kopf trug eine Abdunklung von 84 % auf 60 % — sinnvoll,
   solange dort ein Portraet lag. Seit Nachtrag 79 steht da ein Teamfoto, und von dem
   war nichts mehr zu erkennen. Wer ein Team zeigt, um Bewerber anzusprechen, sollte
   es auch sehen lassen. Schrift bleibt weiss auf dunklem Grund, der Kontrast traegt. */
html[data-seite="karriere"] main > section:first-of-type{
  background-image:linear-gradient(to bottom,rgba(13,15,17,.72) 0%,rgba(13,15,17,.46) 100%),
    url("/assets/staffsec/team-runde-1440w.webp")!important;
}

/* Nachtrag 80c: Am Handy brach der Telefonknopf mitten in der Nummer um
   ("+49 4321 78 33 / 590"). Eine Rufnummer, die auf zwei Zeilen steht, sieht nach
   Fehler aus - und sie ist das Element, auf das in diesem Block alles zulaeuft.
   Kleinere Schrift und kein Umbruch. */
@media (max-width:560px){
  .ssx-usp-akut .ssx-usp-knopf{font-size:14.5px;white-space:nowrap;padding:15px 18px}
  .ssx-usp-akut .ssx-usp-knopf span{white-space:nowrap}
}

/* === NACHTRAG 81 STAFFSEC 19.08.2026 - HANDY: EINE AUSRICHTUNG, KEINE ZWEI === */
/* Manuel, nach einer Serie von Handy-Bildern: "Überall.. Zentrierungen, Strich falsch etc.
   Deine Tiefenprüfung war schlecht, ich könnte so die ganze Zeit weitermachen."
   Er hat recht — und die Ursache war nicht ein Abschnitt, sondern die Schichtung:

     Nachtrag 13c (14.08.) stellt am Handy die CONTAINER auf Mitte  -> Überschrift mittig
     Nachtrag 29  (15.08.) stellt p/li/dd/blockquote auf links,
                           OHNE Media Query und damit auch am Handy  -> Text links

   Nachtrag 29 steht später in der Datei und gewinnt bei allem, was er direkt trifft.
   Ergebnis auf jedem Bild: Überschrift mittig, Strich und Fließtext links daneben.

   Dieser Nachtrag beendet den Streit. Am Handy gilt EINE Haltung: Mitte.
   Er greift über `body main` (höhere Spezifität als alle Vorgänger) und `!important`,
   damit er sich nicht erneut von einer älteren Regel überstimmen lässt.
   Die Kopf- und Fußzeile stehen außerhalb von `main` und bleiben unberührt. */

@media (max-width:767px){

  /* ---------- 1) Alles, was Text trägt, in die Mitte ---------- */
  body main section,
  body main section :is(h1,h2,h3,h4,h5,p,span,div,li,ul,ol,dl,dd,dt,blockquote,figcaption,strong,em,a){
    text-align:center!important;
  }

  /* ---------- 2) Der goldene Strich aus ssxKopf() ---------- */
  /* Ein Block mit fester Breite (w-[26px]) wandert nicht mit text-align — er braucht
     eigene Ränder. Genau das war Manuels "komischer Strich vor Leistungen". */
  body main [data-strich],
  body main section > div > [class*="w-[26px]"],
  body main section [class*="h-[2px]"][class*="w-["],
  body main section [class*="h-px"][class*="w-["],
  body main section hr{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* ---------- 3) Senkrechte Kästen: Inhalt mittig statt an der linken Kante ---------- */
  /* Symbol, Kicker, Zahl und Text einer Karte stehen in flex-Spalten. text-align bewegt
     dort nur die Zeile, nicht den Kasten. */
  body main section [class*="flex-col"],
  body main section [class*="items-start"]{
    align-items:center!important;
  }
  /* Waagerechte Symbolzeilen (Symbol + Beschriftung) mittig statt links */
  body main section [class*="flex"]:not([class*="flex-col"]):not([class*="justify-between"]):not([class*="grid"]){
    justify-content:center!important;
  }

  /* ---------- 4) Aufzählungen: mittig heißt ohne hängende Punkte ---------- */
  /* Ein Aufzählungszeichen links neben mittigem Text sieht nach Panne aus. */
  body main section ul:not([class*="grid"]),
  body main section ol:not([class*="grid"]){
    list-style:none!important;
    padding-left:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* ---------- 5) Absätze mittig ausrichten UND mittig stellen ---------- */
  /* Nachtrag 29 gibt p eine Breitenbegrenzung (68ch). Ohne automatische Ränder klebt der
     begrenzte Absatz links, auch wenn seine Zeilen mittig stehen. */
  body main section p{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* ---------- 6) Ausnahmen: hier wäre Mitte falsch ---------- */
  /* Eingaben und Beschriftungen — mittiger Text in einem Feld ist unbedienbar */
  body main :is(form,label,input,textarea,select,fieldset,legend,option),
  body main :is(form,label,fieldset) :is(p,span,div,li){
    text-align:left!important;
  }
  body main form [class*="flex-col"]{align-items:stretch!important;}

  /* Tabellen behalten ihre Spaltenlogik */
  body main :is(table,thead,tbody,tr,th,td),
  body main :is(th,td) :is(p,span,div){text-align:left!important;}

  /* Brotkrume bleibt an der linken Kante — sie ist Wegweiser, kein Inhalt */
  body main nav[aria-label] :is(ol,li,a,span){text-align:left!important;}
  body main nav[aria-label] ol{justify-content:flex-start!important;}

  /* Rechtstexte: Impressum, Datenschutz, AGB — Paragraphen und Anschriften bleiben links,
     dort zählt Lesbarkeit des Wortlauts, nicht der Auftritt */
  body main :is(address,pre,code){text-align:left!important;}

  /* Logo-Laufbänder laufen; Ausrichtung ist dort ohne Bedeutung und stört die Bewegung */
  body main :is(.ssx-vt-band,.ssx-vt-logos,[class*="animate-marquee"]),
  body main :is(.ssx-vt-band,.ssx-vt-logos,[class*="animate-marquee"]) *{
    text-align:initial!important;
    justify-content:flex-start!important;
  }

  /* Aufklapp-Schalter: Beschriftung links, Pfeil rechts */
  body main :is(details,summary),
  body main [class*="justify-between"]{
    justify-content:space-between!important;
  }
  body main summary{text-align:left!important;}
}
/* === ENDE NACHTRAG 81 === */

/* === NACHTRAG 82 STAFFSEC 19.08.2026 - HANDY: WAS AUF DEN BILDERN AUFFIEL === */
/* Nicht gemessen, sondern angesehen (L-390). Fünf Befunde aus den Handy-Bildern
   vom 19.08., die keine Messung gefunden hätte, weil an ihnen technisch nichts
   falsch war — sie sahen nur schlecht aus. */

@media (max-width:767px){

  /* ---------- 1) Der Inhalt lief unter die Kopfzeile ---------- */
  /* Gemessen auf /kritis: die fixierte Kopfzeile endet bei 126 px, die Brotkrume
     beginnt bei 94 px — sie stand nachweislich dahinter. Manuel: "Zu nah am Logo oben,
     wird alle Seiten betreffen." Stimmt: der Abstand steckt im Kopfbereich, den jede
     Seite verwendet. Das Hintergrundbild darf weiter unter die Kopfzeile reichen,
     der TEXT nicht. */
  body main > section:first-of-type{ padding-top:9rem!important; }
  /* Die Startseite trägt ein Vollbild und bringt ihren Abstand selbst mit */
  body main > section:first-of-type[class*="min-h-screen"],
  body main > section:first-of-type[class*="h-screen"]{ padding-top:7rem!important; }

  /* ---------- 2) Karten: Nummer und Überschrift standen nebeneinander ---------- */
  /* Auf /kritis: "03" links, "Zutrittsregelung für drei Gruppen" linksbündig daneben,
     der Fließtext darunter mittig. Manuel: "siehst ja, dass das nicht passt in die
     Kästen." Am Handy ist für zwei Spalten kein Platz — Nummer nach oben, alles mittig.
     Ausgenommen: Pillen und Knöpfe (inline-flex), Chip-Reihen (flex-wrap) und
     Aufklapp-Schalter (justify-between) — die sollen nebeneinander bleiben. */
  /* 19.08.2026 ergaenzt: Kicker-Zeilen (Haarstrich + Beschriftung) sind ausgenommen —
     gedreht landete der Strich allein ueber dem Text, genau Manuels Befund auf
     /branchen/oepnv. Erkannt am Kind, nicht an der Klasse, damit alle Schreibweisen
     erfasst sind (w-8 h-px ebenso wie w-10 h-[2px]). */
  body main section [class*="flex"]:not([class*="flex-col"]):not([class*="inline-flex"]):not([class*="flex-wrap"]):not([class*="justify-between"]):not([class*="animate-"]):not(nav):not([role="list"]):not(:has(> [class*="h-px"])):not(:has(> [class*="h-[1px]"])):not(:has(> [class*="h-[1.5px]"])):not(:has(> [class*="h-[2px]"])):not(:has(> [class*="h-[3px]"])){
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
  }
  /* 🔴 Erste Fassung drehte auch die Brotkrume auf Spalte: aus
     "Startseite > Sicherheitslösungen > KRITIS" wurden fünf Zeilen untereinander,
     jedes Trennzeichen eine eigene. Wegweiser bleiben eine Zeile. */
  body main nav[aria-label],
  body main nav[aria-label] *,
  body main nav[aria-label] [class*="flex"]{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
  }
  body main nav[aria-label] > * > *{ margin-bottom:0!important; }
  /* Die Nummer/das Symbol bekommt Luft nach unten, statt Luft zur Seite */
  body main section [class*="flex"]:not([class*="flex-col"]):not([class*="inline-flex"]):not(nav) > :first-child{
    margin-bottom:.75rem;
  }

  /* ---------- 3) Keine automatische Silbentrennung in mittigem Text ---------- */
  /* Nachtrag 29 setzt hyphens:auto. Am Rechner mit linksbündigem Satz ist das richtig.
     Mittig gesetzt ergibt es ein unruhiges Bild: auf /kritis stand "Dachge-setz",
     "Sa-botage" und "Kata-log" in einem einzigen Absatz. */
  body main :is(p,li,dd,span,h1,h2,h3,h4){
    hyphens:manual!important;
    -webkit-hyphens:manual!important;
  }

  /* ---------- 4) Überschriften brachen mitten im Wort ---------- */
  /* "Was das KRITIS-Dachgesetz verlangt" wurde zu "KRITIS-Dachge- setz". Ursache ist
     nicht die Trennung, sondern die Schriftgröße: deutsche Komposita brauchen bei
     390 px Breite schlicht weniger Punkte. */
  body main h1{ font-size:clamp(1.75rem,8.4vw,2.5rem)!important; line-height:1.14!important; }
  body main h2{ font-size:clamp(1.5rem,7.2vw,2rem)!important;    line-height:1.18!important; }
  body main h3{ font-size:clamp(1.125rem,5.2vw,1.5rem)!important;line-height:1.25!important; }

  /* ---------- 5) Die Umriss-Schrift im Kopfbild war unlesbar ---------- */
  /* "Ihr Partner" ist als Kontur gesetzt (-webkit-text-stroke). Über der hellen Stelle
     des Fotos verschwindet sie fast vollständig. Ein weicher dunkler Schatten hebt die
     Kontur ab, ohne den Effekt aufzugeben. */
  body main [style*="text-stroke"],
  body main [class*="text-stroke"],
  body main [class*="text-transparent"][class*="stroke"]{
    text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.5)!important;
  }
}
/* === ENDE NACHTRAG 82 === */

/* === NACHTRAG 83 STAFFSEC 19.08.2026 - EINSEITIGE EINZUEGE BEI MITTIGER AUSRICHTUNG === */
/* Gemessen auf /sicherheitsdienst-hamburg: Der Karten-Absatz trägt `pl-16` — 64 px
   Einzug links. Der stammt aus dem zweispaltigen Aufbau, in dem links die Nummer stand.
   Seit Nachtrag 82 steht die Nummer oben; der Einzug schob den Text stumm nach rechts
   (gemessen 67 px Luft links gegen 3 px rechts). Bei mittiger Ausrichtung ist ein
   einseitiger Einzug immer falsch — er verschiebt genau das, was mittig stehen soll. */
@media (max-width:767px){
  body main section :is(p,h2,h3,h4,span,div)[class*="pl-"]:not([class*="pl-0"]){
    padding-left:0!important;
  }
  body main section :is(p,h2,h3,h4,span,div)[class*="pr-"]:not([class*="pr-0"]){
    padding-right:0!important;
  }
  /* Absätze, die eine Breitengrenze tragen, mittig stellen statt links kleben lassen */
  body main section p[class*="max-w-"]{ margin-left:auto!important; margin-right:auto!important; }
}
/* === ENDE NACHTRAG 83 === */

/* === NACHTRAG 84 STAFFSEC 19.08.2026 - PROVENEXPERT IN DER VERTRAUENSLEISTE === */
/* Manuel: "Und auch von ProvenExpert haben wir 29 Bewertungen und 5,0 Sterne."
   An der Quelle belegt (19.08.2026): 5,00 von 5 aus 29 Bewertungen, Bewertung "SEHR GUT".
   Bei derselben Gelegenheit fiel auf, dass die Google-Zahl in der Leiste mit 55 falsch
   stand — belegt sind 34 (Neumünster). Beides ist korrigiert. */
.ssx-leiste-pe{ margin-left:2px; }
.ssx-leiste-strich-pe{ margin:0 4px; }
/* Am Handy ist für zwei Bewertungsquellen neben der Rufnummer kein Platz — dort bleibt
   die Google-Zahl allein stehen, sie ist die bekanntere Quelle. */
@media (max-width:639px){
  .ssx-leiste-pe,.ssx-leiste-strich-pe{ display:none!important; }
}
/* === ENDE NACHTRAG 84 === */

/* === NACHTRAG 85 STAFFSEC 19.08.2026 - KUNUNU-BLOCK AUF /KARRIERE === */
/* Manuel: "Vielleicht bauen wir sogar kununu noch rein. Da haben wir ja auch eine
   positive Bewertung für Staffsec." Belegt am 19.08.2026: 4,8 aus 7 Bewertungen,
   100 % Weiterempfehlung. Steht vor dem Bewerbungsformular — dort, wo jemand gerade
   überlegt, ob er sich bewirbt. */
.ssx-kununu{
  margin:0 0 34px; padding:22px 20px 18px;
  border:1px solid #E8E5DE; border-radius:16px;
  background:linear-gradient(180deg,#FBFAF8 0%,#F6F4F0 100%);
  text-align:center;
}
.ssx-kununu-marke{
  display:block; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#8A7A5E; margin-bottom:16px;
}
.ssx-kununu-reihe{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start;
}
.ssx-kununu-kachel{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.ssx-kununu-zahl{ display:flex; align-items:baseline; gap:4px; justify-content:center; }
.ssx-kununu-zahl strong{ font-size:29px; font-weight:800; color:#1F2937; line-height:1; }
.ssx-kununu-einheit{ font-size:12px; font-weight:600; color:#8A7A5E; }
.ssx-kununu-text{ font-size:12px; line-height:1.4; color:#6B7280; max-width:15ch; }
.ssx-kununu-quelle{
  display:inline-block; margin-top:16px; font-size:12px; font-weight:600;
  color:#8A7A5E; text-decoration:underline; text-underline-offset:3px;
}
.ssx-kununu-quelle:hover,.ssx-kununu-quelle:focus-visible{ color:#5E5238; }
/* Am Handy untereinander — drei Spalten à 100 px ergeben Wortsalat */
@media (max-width:520px){
  .ssx-kununu-reihe{ grid-template-columns:1fr; gap:16px; }
  .ssx-kununu-text{ max-width:26ch; }
}
/* === ENDE NACHTRAG 85 === */

/* === NACHTRAG 86 STAFFSEC 19.08.2026 - KICKER-ZEILEN BLEIBEN EINE ZEILE === */
/* Manuel, zwei Tage in Folge: "Komischer Strich vor Leistungen und Aufzählung —
   nicht darüber und auch nicht zentriert" und "Überall so wo dieser Strich ist".
   Auf /branchen/oepnv im Bild bestätigt: der goldene Strich stand ALLEIN LINKS OBEN,
   der Kicker "ÜBERBLICK" mittig darunter.

   Ursache war ausgerechnet Nachtrag 82: der dreht Karten-Zeilen am Handy auf Spalte,
   damit Nummer und Überschrift untereinander stehen. Eine Kicker-Zeile ist aber auch
   eine flex-Zeile — Strich und Beschriftung gehören dort NEBENEINANDER. Gedreht ergab
   das genau das Bild, das Manuel gemeldet hat.

   Unterschieden wird am Inhalt statt an der Klasse: Wer einen Haarstrich als Kind hat,
   ist eine Kicker-Zeile. Das trifft alle Schreibweisen (w-8 h-px, w-10 h-[2px]) und
   nicht nur die Tailwind-Sonderform mit eckigen Klammern, an der Nachtrag 81 vorbeigriff. */
@media (max-width:767px){
  body main [class*="flex"]:has(> [class*="h-px"]),
  body main [class*="flex"]:has(> [class*="h-[1px]"]),
  body main [class*="flex"]:has(> [class*="h-[1.5px]"]),
  body main [class*="flex"]:has(> [class*="h-[2px]"]),
  body main [class*="flex"]:has(> [class*="h-[3px]"]){
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }
  /* Der Abstand nach unten aus Nachtrag 82 gilt hier nicht — der Strich steht daneben */
  body main [class*="flex"]:has(> [class*="h-px"]) > *,
  body main [class*="flex"]:has(> [class*="h-[2px]"]) > *{
    margin-bottom:0!important;
  }
  /* Der Haarstrich selbst darf nicht schrumpfen, sonst verschwindet er in der Mitte */
  body main [class*="h-px"],
  body main [class*="h-[1px]"],
  body main [class*="h-[1.5px]"],
  body main [class*="h-[2px]"],
  body main [class*="h-[3px]"]{
    flex:none!important;
  }
  /* Steht der Strich als eigener Block über einer Überschrift (ssxKopf), gehört er mittig */
  body main section > div > [class*="h-[2px]"][class*="w-["],
  body main section > div > [class*="h-px"][class*="w-"]{
    margin-left:auto!important; margin-right:auto!important;
  }
}
/* === ENDE NACHTRAG 86 === */

/* === NACHTRAG 87 STAFFSEC 19.08.2026 - REFERENZBAND LÄUFT AM HANDY WIEDER === */
/* Manuel: "4 Referenzen läuft nicht durch, steht still."
   Belegt: Am Handy stand `animation-name: none`, `animation-duration: 0s`.
   Ursache ist NACHTRAG 53a. Der ist inhaltlich richtig — er stellt die Nachweis-Karten
   (ISO 9001, DIN 77200, AUEG-Erlaubnis) am Handy untereinander, mit der guten Begründung:
   "Ein Nachweis, der hinter einer Wischbewegung liegt, ist für die Hälfte der Leser
   nicht vorhanden." Nur trifft sein Selektor `[class*="animate-marquee"]` ALLE vier
   Laufbänder der Startseite, also auch die Kundenlogos.

   Unterschieden wird am Inhalt: Bänder mit Bildern sind die Referenz-Logos und laufen.
   Bänder mit Textkarten sind die Nachweise und bleiben untereinander stehen.

   Die Bewegungsreduzierung aus NACHTRAG 18 bleibt unangetastet: Wer am Gerät
   "Bewegung reduzieren" eingestellt hat, bekommt weiterhin ein stehendes Band —
   deshalb `prefers-reduced-motion: no-preference` in der Bedingung. */
@media (max-width:767px) and (prefers-reduced-motion: no-preference){
  [class*="animate-marquee"]:has(img){
    animation-name:marquee!important;
    animation-duration:40s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    animation-play-state:running!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    gap:24px!important;
  }
  [class*="animate-marquee-reverse"]:has(img){
    animation-name:marquee-reverse!important;
  }
  /* Der Abstand nach unten aus Nachtrag 82 gilt hier nicht — die Logos stehen nebeneinander */
  [class*="animate-marquee"]:has(img) > *{
    margin-bottom:0!important;
    flex:none!important;
  }
}
/* === ENDE NACHTRAG 87 === */

/* === NACHTRAG 88 STAFFSEC 19.08.2026 - ANSPRECHPARTNER-PORTRÄT AM HANDY === */
/* Manuel: "mein Foto sieht doof aus, auch das Größe anpassen."
   Angesehen auf /objektschutz am Handy — drei Dinge stimmten nicht:
     1. 220 × 308 px, damit fast eine halbe Bildschirmhöhe nur für das Porträt.
     2. Der Ausschnitt zeigte das Studio-Logo im Hintergrund quer hinter dem Kopf.
        Zusammen mit dem Logo auf dem Polohemd und dem in der Kopfzeile stand die
        Marke dreimal auf einem Bildschirm.
     3. Der Bildausschnitt saß auf 50 % Höhe, dadurch war der Kopf oben angeschnitten.
   Ein rundes Porträt in kompakter Größe löst alle drei: es zeigt das Gesicht und
   schneidet den unruhigen Hintergrund weg. */
@media (max-width:767px){
  .ssx-ap-bild{
    width:132px!important;
    height:132px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    object-position:50% 22%!important;
    margin:0 auto 6px!important;
    display:block!important;
    box-shadow:0 8px 26px rgba(31,41,55,.16);
    border:3px solid #fff;
  }

  /* Der Rahmen um das Bild ist eckig (20 px Radius, heller Grund, 18 px Schatten).
     Hinter einem runden Porträt bleibt davon ein sichtbares Quadrat stehen — er wird
     mitgerundet statt entfernt, damit Schatten und Abstand erhalten bleiben. */
  .ssx-ap-bildrahmen{
    width:132px!important;
    height:132px!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }
}
/* === ENDE NACHTRAG 88 === */

/* === NACHTRAG 89 STAFFSEC 19.08.2026 - KICKER IM KOPFBILD BRICHT UM === */
/* Gemessen auf der Startseite am Handy: "Sicherheit · Personal · Vertrauen" steht bei
   12 px Schrift mit 3,6 px Sperrung auf 383 px Breite — verfügbar sind 338. Die Zeile
   brach also um, und zwar so, dass der Trennpunkt am Zeilenende hing:
       SICHERHEIT · PERSONAL ·
       VERTRAUEN
   Ein Kicker ist eine Zeile, keine zwei. Kleinere Schrift und engere Sperrung bringen
   ihn auf rund 300 px und damit sicher in eine Zeile — die Wirkung als Vorzeile bleibt,
   weil Großbuchstaben und Sperrung erhalten bleiben. */
@media (max-width:767px){
  /* 🔴 Erste Fassung traf JEDES Element mit "tracking-" im Kopfbereich — also auch die
     Teile der Hauptueberschrift, die "tracking-tight" tragen. Die H1 stand damit auf
     11 px statt 34 (Manuel: "alles verzogen"). Der Kicker ist daran erkennbar, dass er
     GROSSBUCHSTABEN traegt; danach wird jetzt unterschieden. */
  body main > section:first-of-type [class*="uppercase"][class*="tracking-"]:not(h1):not(h2):not(h3){
    font-size:11px!important;
    letter-spacing:.13em!important;
    line-height:1.5!important;
  }
}
/* === ENDE NACHTRAG 89 === */

/* === NACHTRAG 90 STAFFSEC 19.08.2026 - TEXTRASTER AM HANDY EINSPALTIG === */
/* Angesehen auf der Startseite, Abschnitt "Woran Sie uns messen können": Die
   Nachweis-Karten standen am Handy in zwei Spalten zu je rund 170 px. Bei dieser Breite
   passt kein deutsches Kompositum mehr in eine Zeile, und `overflow-wrap:break-word`
   trennt dann mitten im Wort:
       "Höchster deutscher Sicherheitsstandard – geprüfte Qualität bei
        Sicherheitsdienstleist
        ungen."
       "Mittelstandsbun
        d"
   Zwei Spalten sind am Handy nur für Zahlen oder Symbole sinnvoll, nicht für Fließtext.
   Deshalb: Raster, die Absätze enthalten, werden einspaltig. Raster ohne Text
   (Logo-Gitter, Symbolreihen) bleiben unangetastet. */
@media (max-width:639px){
  body main section [class*="grid-cols-2"]:has(p),
  body main section [class*="grid-cols-3"]:has(p),
  body main section [class*="grid-cols-4"]:has(p),
  body main section [class*="sm:grid-cols-2"]:has(p),
  body main section [class*="md:grid-cols-2"]:has(p){
    grid-template-columns:1fr!important;
  }
  /* Mit voller Breite braucht es keinen harten Wortbruch mehr */
  body main section :is(h2,h3,h4,p,li){
    overflow-wrap:break-word;
    word-break:normal!important;
  }
}
/* === ENDE NACHTRAG 90 === */

/* === NACHTRAG 91 STAFFSEC 19.08.2026 - BRANCHENKACHELN AM HANDY === */
/* Angesehen im Abschnitt "Branchenexpertise, die zählt": Die Kacheln standen als Raster
   aus 88 px Bild links und 234 px Text rechts — der Text darin aber mittig. Neben einer
   Bildkante wirkt mittiger Text immer wie verrutscht, weil das Bild die linke Kante setzt
   und der Text ihr nicht folgt. Genau der Bruch, den Manuel als "grafisch nicht modern"
   und "passt nicht in die Kästen" gemeldet hat.

   Zwei Wege wären möglich gewesen: Text linksbündig an die Bildkante, oder Bild nach oben
   und alles mittig. Gewählt ist der zweite — er hält die Seite bei EINER Ausrichtung,
   und genau die durchgehende Mitte war Manuels Vorgabe. */
@media (max-width:639px){
  body main section a[class*="min-h-[280px]"]{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-content:start!important;
    gap:12px!important;
    padding:20px 18px 22px!important;
    min-height:0!important;
    text-align:center!important;
  }
  body main section a[class*="min-h-[280px]"] > img{
    position:static!important;
    width:88px!important;
    height:88px!important;
    object-fit:cover!important;
    border-radius:18px!important;
    margin:0 auto!important;
  }
  body main section a[class*="min-h-[280px]"] > div[class*="bottom-0"]{
    position:static!important;
    padding:0!important;
    width:100%!important;
    text-align:center!important;
  }
}
/* === ENDE NACHTRAG 91 === */

/* === NACHTRAG 92 STAFFSEC 19.08.2026 - ZEILEN MIT PFEIL BLEIBEN LINKSBÜNDIG === */
/* Angesehen im Abschnitt "Bundesweit präsent": In den Standort-Zeilen stand der
   Bundeslandname mittig, die Beschreibung darunter linksbündig und rechts der Pfeil.
   Jede Zeile sah dadurch anders aus:
       "        Schleswig-Holstein        ›"
       "Hauptsitz Neumünster"
   Eine Zeile mit einem Element am rechten Rand ist eine Listenzeile, keine Karte. Dort
   setzt der Pfeil die rechte Kante — der Text muss der linken folgen, sonst wirkt jede
   Zeile verrutscht. Das ist keine Ausnahme von Manuels "alles mittig", sondern dieselbe
   Regel: in einer Zeile gibt es EINE Ausrichtung, nicht zwei. */
@media (max-width:767px){
  /* 🔴 Erste Fassung traf JEDEN Container mit justify-between — auch Karten mit
     "flex-col justify-between". Dort verteilt justify-between den Inhalt SENKRECHT und
     sagt über die waagerechte Ausrichtung nichts aus. Die Regel hat damit ganze Kacheln
     linksbündig gemacht (Manuel: "beim zweiten Bild ist alles verschoben").
     Jetzt nur noch waagerechte Zeilen, und nur deren direkte Kinder. */
  body main [class*="justify-between"]:not([class*="flex-col"]),
  body main [class*="justify-between"]:not([class*="flex-col"]) > :is(h2,h3,h4,h5,p,span,div,li,strong),
  /* Die Standortliste heißt ssx-hd-* und holt ihr space-between aus eigener CSS,
     nicht aus einer Tailwind-Klasse — nach "justify-between" im Klassennamen zu
     suchen fand sie deshalb nicht. */
  body main :is(.ssx-hd-titel,.ssx-hd-text,.ssx-hd-name,.ssx-hd-land,.ssx-hd-zusatz),
  body main :is(.ssx-hd-titel,.ssx-hd-text,.ssx-hd-land) :is(span,div,p,h3,h4){
    text-align:left!important;
  }
  /* Der Pfeil bleibt rechts, der Textblock nimmt den Rest */
  body main [class*="justify-between"]:not([class*="flex-col"]){
    align-items:center!important;
  }
}
/* === ENDE NACHTRAG 92 === */

/* === NACHTRAG 93 STAFFSEC 19.08.2026 - VERWEIS-REIHEN BRECHEN UNRUHIG UM === */
/* Angesehen auf /unternehmen: Drei Verweise mit Pfeil ("Unser Team", "Unser Leitbild",
   "Ausbildung") stehen in einer umbrechenden Reihe. Zwei passen in die erste Zeile, der
   dritte rutscht allein in die zweite und steht dort mittig unter der Lücke:
       Unser Team →      Unser Leitbild →
                Ausbildung →
   Das wirkt wie ein Satzfehler, nicht wie eine Gliederung. Untereinander gestellt ist es
   ruhig und jeder Verweis gleich gewichtet — bei drei Zielen kein Platzproblem.
   Chip-Reihen (Ortsnamen auf den Standortseiten) sind ausgenommen: dort sind es zwanzig
   kurze Einträge, die untereinander eine endlose Liste ergäben. */
@media (max-width:767px){
  body main [class*="flex-wrap"]:has(> a[class*="inline-flex"]):not(:has(> a[class*="ortchip"])):not(:has(> a[class*="chip"])){
    flex-direction:column!important;
    align-items:center!important;
    gap:12px!important;
  }
}
/* === ENDE NACHTRAG 93 === */

/* === NACHTRAG 94 STAFFSEC 19.08.2026 - FUSSZEILE: EINE AUSRICHTUNG === */
/* Angesehen am Handy: In der Fußzeile stand der Kicker "EINSATZGEBIETE" mittig, der
   goldene Strich darunter links, und die Liste der Bundesländer linksbündig. Dasselbe
   Muster, das Manuel im Inhalt gemeldet hat ("überall so wo dieser Strich ist") — nur
   dass die Fußzeile außerhalb von `main` liegt und deshalb von den Nachträgen 81 bis 93
   nicht erfasst wurde.

   In der Fußzeile ist LINKS die richtige Haltung: Sie besteht aus Spaltenlisten, und eine
   Liste liest sich an einer Kante. Also folgen Kicker und Strich der Liste, statt dass die
   Liste dem Kicker folgt. */
@media (max-width:767px){
  footer :is([class*="tracking-"],[class*="uppercase"]):not([class*="text-center"]){
    text-align:left!important;
  }
  footer :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"]){
    margin-left:0!important;
    margin-right:auto!important;
  }
  /* Der Logo-Block und die Anschrift bleiben, wie sie sind — dort ist Mitte gewollt
     (Nachtrag 13c) und die Bauform ist eine andere. */
  footer [class*="text-center"],
  footer [class*="text-center"] *{
    text-align:center!important;
  }
}
/* === ENDE NACHTRAG 94 === */

/* === NACHTRAG 95 STAFFSEC 19.08.2026 - HAARSTRICHE: EINE REGEL FÜR ALLE FÄLLE === */
/* Dritter Anlauf beim selben Befund ("überall so wo dieser Strich ist"). Die bisherigen
   Regeln waren an die Verschachtelung gebunden — Nachtrag 86 traf nur Striche als direktes
   Kind eines direkten Kindes von `section`. Auf /baulogistik steht der Strich tiefer, in
   einer Karte, und blieb links stehen, während der Kicker darüber mittig saß.

   Statt eine vierte Sonderregel: eine allgemeine plus genau eine Ausnahme.
     - Jeder Haarstrich in `main` bekommt automatische Seitenränder und steht damit mittig.
     - Ausgenommen sind Striche in einer WAAGERECHTEN Zeile: dort stehen sie neben ihrer
       Beschriftung, und der Container zentriert die Gruppe (Nachtrag 86). Automatische
       Ränder würden den Strich dort von seinem Text wegdrücken.
   Alle vier im Bundle vorkommenden Schreibweisen sind erfasst: h-px, h-[1px],
   h-[1.5px], h-[2px] — die 1.5er hatte im ersten Anlauf gefehlt. */
@media (max-width:767px){
  /* Neben den Tailwind-Schreibweisen gibt es benannte Zierstriche mit eigener Klasse.
     Gepruegt am 19.08.2026: ssx-bb-strich (Baulogistik-Karten), ssx-ang-strich,
     ssx-usp-strich. Die Leisten-Striche (ssx-leiste-strich) sind ausgenommen — sie sind
     senkrechte Trenner in der Kopfleiste, nicht waagerechte Zierstriche. */
  body main :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"],.ssx-bb-strich,.ssx-ang-strich,.ssx-usp-strich){
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body main [class*="flex"]:not([class*="flex-col"]) > :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"]){
    margin-left:0!important;
    margin-right:0!important;
  }
}
/* === ENDE NACHTRAG 95 === */

/* === NACHTRAG 96 STAFFSEC 19.08.2026 - NICHT DREIMAL DASSELBE TEAMFOTO === */
/* Manuel: "Bei Unternehmensleitbild, über uns, Ausbildung ist immer das gleiche Teamfoto
   zu sehen, wenn man mehrere Teamfotos von uns vom Büro [hat]."
   Nachgemessen am 19.08.2026 — der Befund war noch offen und schlimmer als gedacht:
     /unternehmen           team-buero, team-buero, team-buero   (dreimal auf EINER Seite)
     /unternehmensleitbild  team-buero, team-besprechung
     /ausbildung            team-besprechung, team-buero
     /team                  team-buero
   Ursache ist NACHTRAG 22: Er legt team-buero unter jede dunkle Fläche, erkannt am
   Farbwert — also auf jeder Seite und in jedem Abschnitt. Nachtrag 44 hat später nur die
   KOPFbereiche von sechs Seiten ausgetauscht, nicht die Flächen im Seiteninneren.

   Statt jede Seite einzeln zu belegen (und die nächste neue Seite wieder zu vergessen):
   Die dunklen Flächen wechseln sich über ihre Position ab. Drei Aufnahmen stehen zur
   Verfügung — team-buero, team-besprechung, team-runde. Bei drei dunklen Flächen auf
   einer Seite ergibt das drei verschiedene Bilder, und es gilt für jede künftige Seite
   automatisch mit. */
:is(section[style*="rgb(45, 52, 54)"],
    section[style*="rgb(45,52,54)"],
    section[style*="rgb(13, 15, 17)"],
    section[style*="rgb(13,15,17)"],
    section[class*="bg-[#2D3436]"]):nth-of-type(3n+2){
  background-image:
    linear-gradient(to bottom, rgba(45,52,54,.70) 0%, rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-besprechung.webp") !important;
}
:is(section[style*="rgb(45, 52, 54)"],
    section[style*="rgb(45,52,54)"],
    section[style*="rgb(13, 15, 17)"],
    section[style*="rgb(13,15,17)"],
    section[class*="bg-[#2D3436]"]):nth-of-type(3n){
  background-image:
    linear-gradient(to bottom, rgba(45,52,54,.70) 0%, rgba(45,52,54,.82) 100%),
    url("/assets/staffsec/team-runde.webp") !important;
}
/* === ENDE NACHTRAG 96 === */

/* === NACHTRAG 97 STAFFSEC 19.08.2026 - ANSPRECHPARTNER AUF /KARRIERE === */
/* Manuel: "Foto von Florian als Ansprechpartner bei Karriere?"
   Nachgemessen: /karriere hatte gar keinen Ansprechpartner-Block. Florian stand nur im
   Fließtext des Formularkopfs — ohne Gesicht. Auf den Leistungsseiten steht Manuel mit
   Porträt, auf den Baulogistik-Seiten Martin Korf; bei einer Bewerbung fehlte das
   Gegenüber genau da, wo es am meisten zählt.
   Bewusst schlanker als der ssx-ap-Block der Leistungsseiten: Er sitzt zwischen den
   kununu-Zahlen und dem Formular und soll den Weg zum Absenden nicht verlängern. */
.ssx-bw-ap{
  display:flex; align-items:center; gap:18px;
  margin:0 0 30px; padding:18px 20px;
  border:1px solid #E8E5DE; border-radius:16px;
  background:#FBFAF8;
}
.ssx-bw-ap-rahmen{
  /* Nachtrag 88 setzt .ssx-ap-bildrahmen am Handy mit !important auf 132 px. Statt
     Groessen gegeneinander zu setzen, zentriert der Rahmen seinen Inhalt selbst —
     dann stimmt die Lage unabhaengig davon, wer die Groesse gewinnt. */
  flex:none; width:92px; height:92px; border-radius:50%;
  overflow:hidden; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.ssx-bw-ap .ssx-ap-bild{
  /* box-sizing: der 3-px-Rand zaehlt sonst ZUSAETZLICH zur Breite, das Bild wurde damit
     118 px breit in einem 112-px-Rahmen und stand 10 px neben der Mitte. */
  box-sizing:border-box!important;
  width:92px!important; height:92px!important;
  border-radius:50%!important; object-fit:cover!important;
  object-position:50% 22%!important; display:block!important;
  border:3px solid #fff; box-shadow:0 6px 20px rgba(31,41,55,.14);
  margin:0!important;
}
.ssx-bw-ap-text{ min-width:0; }
.ssx-bw-ap-marke{
  display:block; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#8A7A5E; margin-bottom:4px;
}
.ssx-bw-ap-name{ display:block; font-size:17px; font-weight:800; color:#1F2937; line-height:1.2; }
.ssx-bw-ap-rolle{ display:block; font-size:12px; color:#6B7280; margin-bottom:8px; }
.ssx-bw-ap-satz{ font-size:13px; line-height:1.5; color:#4B5563; margin:0; max-width:44ch; }

/* Am Handy untereinander und mittig — passend zur übrigen Ausrichtung */
@media (max-width:639px){
  /* align-items fehlte: bei flex-column bleibt ein Kind mit fester Breite sonst links
     stehen (gemessen 18 px neben der Mitte), obwohl der Text zentriert ist. */
  .ssx-bw-ap{ flex-direction:column!important; align-items:center!important; text-align:center; gap:12px; padding:20px 18px 22px; }
  .ssx-bw-ap-rahmen{ width:112px; height:112px; }
  .ssx-bw-ap .ssx-ap-bild{ width:112px!important; height:112px!important; }
  .ssx-bw-ap-satz{ max-width:100%; }
}
/* === ENDE NACHTRAG 97 === */

/* === NACHTRAG 98 STAFFSEC 19.08.2026 - REFERENZBAND: LOGOS STATT VOLLBILD-KARTEN === */
/* Manuel: "Bei Referenzen läuft der noch zu langsam? Der läuft ja nur ganz langsam."
   Gemessen — die Ursache ist nicht das Tempo, sondern die Kartenbreite:
     Jede Logo-Karte war 365 px breit, also die ganze Bildschirmbreite.
     Bei sieben Karten ergibt das ein Band von rund 2.700 px, von dem immer nur EINE
     Karte im Bild steht. Die Karten ab der vierten waren auf Breite 0 gequetscht.
   Ein Logoband wirkt nur, wenn mehrere Logos gleichzeitig zu sehen sind und sichtbar
   durchziehen. Feste, schmale Karten lösen beides: Es passen vier ins Bild, und dieselbe
   Animationsdauer legt eine deutlich kürzere Strecke zurück — die Bewegung wird sichtbar.
   Zusätzlich von 40 s auf 24 s, damit es lebt statt zu kriechen. */
@media (max-width:767px){
  [class*="animate-marquee"]:has(img) > *{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    flex:0 0 132px!important;
    height:74px!important;
    min-height:74px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px!important;
  }
  [class*="animate-marquee"]:has(img) > * img{
    max-width:100%!important;
    max-height:52px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  [class*="animate-marquee"]:has(img){
    animation-duration:24s!important;
    gap:14px!important;
    align-items:center!important;
  }
}
/* === ENDE NACHTRAG 98 === */

/* === NACHTRAG 99 STAFFSEC 19.08.2026 - CHIP-REIHEN UND AKUT-KACHELN === */

/* ---------- (1) Chips brechen schief um ---------- */
/* Gemessen in der Kachel "Sicherheitslösungen": Container 276 px, Chips zwischen 97 und
   158 px. Zwei passen nebeneinander, die längeren rutschen einzeln in die nächste Zeile:
       [Objektschutz] [Werkschutz]
            [Veranstaltungsschutz]
            [Baustellenbewachung]
   Untereinander und mittig ist ruhiger und besser zu treffen. Ortschips auf den
   Standortseiten sind ausgenommen — das sind über zwanzig kurze Einträge, die
   untereinander eine endlose Liste ergäben; sie sind `a`, diese hier sind `span`. */
@media (max-width:767px){
  body main [class*="flex-wrap"]:has(> span[class*="rounded-lg"]):not(:has(> a)){
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
  }
}

/* ---------- (2) Akut-Kacheln: Hintergrund ---------- */
/* Manuel: "Dieses ein bis drei Stunden und vierundzwanzig, das sollte grafisch besser,
   also der Hintergrund sollte irgendwie besser, das sieht noch nicht geil aus."
   Der flache Goldverlauf mit hellem Kreis wirkte blass, und dunkelgraue Schrift auf Gold
   hat wenig Kontrast. Der übrige Auftritt setzt Zahlen auf dunklen Grund mit goldenem
   Akzent (Kennzahlen-Karten, Kopfbereiche) — die Akut-Kacheln folgen jetzt derselben
   Sprache: tiefer Grund, die Zusage in Gold, feine goldene Kante, weicher Lichtschein
   statt hartem Kreis. */
.ssx-usp-akut-kachel{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(196,176,140,.20) 0%, rgba(196,176,140,0) 58%),
    linear-gradient(160deg, #232830 0%, #171B21 52%, #101318 100%)!important;
  border:1px solid rgba(196,176,140,.30)!important;
  box-shadow:0 18px 44px rgba(9,11,14,.34), inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:#E9E6DF!important;
}
.ssx-usp-akut-kachel .ssx-usp-akut-zahl,
.ssx-usp-akut-kachel strong{
  color:#D8C39A!important;
  text-shadow:0 2px 18px rgba(196,176,140,.22);
}
.ssx-usp-akut-kachel .ssx-usp-akut-einheit{
  color:rgba(233,230,223,.72)!important;
  letter-spacing:.16em;
}
.ssx-usp-akut-kachel p,
.ssx-usp-akut-kachel .ssx-usp-akut-text{
  color:rgba(233,230,223,.70)!important;
}
/* Das Symbol als goldener Kreis statt grauem Kästchen */
.ssx-usp-akut-kachel svg{ color:#D8C39A!important; }
.ssx-usp-akut-kachel [class*="rounded"]:has(> svg),
.ssx-usp-akut-kachel .ssx-usp-akut-symbol{
  background:rgba(196,176,140,.13)!important;
  border:1px solid rgba(196,176,140,.26)!important;
}
/* === ENDE NACHTRAG 99 === */

/* === NACHTRAG 99b STAFFSEC 19.08.2026 - AKUT-KACHELN: SCHRIFT UND ORNAMENT NACHZIEHEN === */
/* Nachtrag 99 hat den Grund der Kacheln auf dunkel gedreht, aber zwei Teile hingen noch
   an den alten hellen Werten und wurden dadurch unlesbar:
     .ssx-usp-akut-fuss stand auf rgba(13,15,17,.72) — dunkelgrau auf dunklem Grund.
     .ssx-usp-akut-ring (das Kästchen um das Symbol) ebenfalls dunkel auf dunkel.
   Dazu das Kreis-Ornament: auf hellem Gold war es ein dezenter Schein, auf dunklem Grund
   ein grauer Fleck quer über dem Text. Es wird zu einem weichen Goldschimmer, der hinter
   dem Text liegt statt darüber. */
.ssx-usp-akut-kachel .ssx-usp-akut-fuss{
  color:rgba(233,230,223,.72)!important;
}
.ssx-usp-akut-kachel .ssx-usp-akut-ring{
  background:rgba(196,176,140,.14)!important;
  border:1px solid rgba(196,176,140,.28)!important;
  color:#D8C39A!important;
}
.ssx-usp-akut-kachel::before,
.ssx-usp-akut-kachel::after{
  background:radial-gradient(closest-side, rgba(196,176,140,.16) 0%, rgba(196,176,140,0) 72%)!important;
  opacity:.9!important;
  z-index:0!important;
}
/* Der Inhalt liegt über dem Schimmer */
.ssx-usp-akut-kachel > *{ position:relative; z-index:1; }
/* === ENDE NACHTRAG 99b === */

/* === NACHTRAG 100 STAFFSEC 19.08.2026 - KNOPF-INNENLEBEN UND KOPFABSTAND === */

/* ---------- (1) In Knöpfen bleibt alles in EINER Zeile ---------- */
/* Manuel: "Guck mal, wie dieses jetzt Angebot anfragen. So ist es auch alles verzogen."
   Gemessen: Der Knopf "Kostenloses Angebot" war 80 px hoch statt 56. Sein innerer
   `span` trägt `flex items-center gap-2` — und NACHTRAG 82 dreht am Handy jede flex-Zeile
   auf Spalte, damit in Karten die Nummer über der Überschrift steht. In einem Knopf ist
   das falsch: Beschriftung und Pfeil gehören nebeneinander, sonst wird der Knopf doppelt
   so hoch und der Pfeil steht verloren darunter.
   Dritter Fall derselben Ursache — Nachtrag 82 ist mächtig und braucht klare Grenzen. */
@media (max-width:767px){
  /* Die :not(#ssx-nie)-Anhaenge heben die Spezifitaet ueber die von NACHTRAG 82
     (sieben :not()-Klassen). Ohne sie gewinnt dort die Spalten-Regel und der Pfeil
     bleibt unter der Beschriftung. #ssx-nie gibt es nicht — der Selektor waehlt also
     dieselben Elemente, nur mit mehr Gewicht. */
  body main :is(a[class*="btn"],button,a[class*="inline-flex"],[role="button"]):not(#ssx-nie) [class*="flex"]:not(#ssx-nie),
  body main :is(a[class*="btn"],button,a[class*="inline-flex"],[role="button"]):not(#ssx-nie){
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body main :is(a[class*="btn"],button,a[class*="inline-flex"]) > *{
    margin-bottom:0!important;
  }
}

/* ---------- (2) Der Kopfbereich beginnt zu weit unten ---------- */
/* Manuel: "Jetzt ist das so weit unten, da die ersten drei Wörter."
   Gemessen: 112 px Innenabstand oben, der Kicker begann bei 208 px — die Kopfzeile endet
   schon bei 126. Über 80 px Leerraum, bevor der erste Text kommt. Der Abstand stammt aus
   NACHTRAG 82 und ist für Seiten mit Brotkrume richtig; das Vollbild der Startseite bringt
   seinen Abstand selbst mit und braucht nur so viel, dass nichts unter der Kopfzeile liegt. */
@media (max-width:767px){
  body main > section:first-of-type[class*="min-h-screen"],
  body main > section:first-of-type[class*="h-screen"],
  body main > section:first-of-type[class*="min-h-["]{
    padding-top:5rem!important;
  }
}
/* === ENDE NACHTRAG 100 === */

/* === NACHTRAG 101 STAFFSEC 19.08.2026 - KNOPF-REIHEN STEHEN MITTIG === */
/* Gemessen im Kopfbereich der Startseite: Der Knopf-Container trägt `flex flex-col`
   mit `align-items: flex-start`. Die Knöpfe klebten dadurch an der linken Kante —
   0 px links, 38 px frei rechts — während Überschrift und Text mittig standen.
   Genau das meint Manuel mit "alles verschoben".

   NACHTRAG 82 nimmt flex-col-Container ausdrücklich aus (dort ist die Richtung ja schon
   richtig) und setzt deshalb auch kein align-items. Für senkrechte Reihen mit Knöpfen
   fehlte damit die Mitte. Erkannt am Inhalt statt an der Klasse: Wer Knöpfe enthält,
   ist eine Knopf-Reihe. */
@media (max-width:767px){
  body main [class*="flex-col"]:has(> a[class*="btn"]),
  body main [class*="flex-col"]:has(> a[class*="inline-flex"]),
  body main [class*="flex-col"]:has(> button){
    align-items:center!important;
  }
}
/* === ENDE NACHTRAG 101 === */

/* === NACHTRAG 102 STAFFSEC 19.08.2026 - DRITTE BEWERTUNGSQUELLE IN DER LEISTE === */
/* Manuel: "kununu solltest du auch noch mit aufnehmen."
   Drei Quellen passen am Handy nicht neben die Rufnummer. Reihenfolge nach Bekanntheit:
   Google immer, ProvenExpert ab 640 px, kununu ab 900 px. */
.ssx-leiste-ku{ margin-left:2px; }
.ssx-leiste-strich-ku{ margin:0 4px; }
@media (max-width:899px){
  .ssx-leiste-ku,.ssx-leiste-strich-ku{ display:none!important; }
}
@media (max-width:639px){
  .ssx-leiste-pe,.ssx-leiste-strich-pe{ display:none!important; }
}
/* === ENDE NACHTRAG 102 === */

/* === NACHTRAG 103 STAFFSEC 19.08.2026 - AKUT-BLOCK AN DIE ÜBRIGEN ABSCHNITTE ANGLEICHEN === */
/* Manuel: "Bei Sicherheitslücke heute, Besetzung heute ist die Schriftart und Weise und
   mit den Farben anders als bei den anderen. Zum Beispiel bei Drei Säulen, Unsere Mission,
   Geprüfte Qualität oder Branchenexpertise hast du es anders gemacht."
   Und: "Der Hintergrund sieht einfach scheiße aus … hattest du schon bessere, zum Beispiel
   Zahlen, die für sich sprechen oder Geprüfte Qualität — diese Hintergründe kannst du da
   auch einspielen."

   Nachgemessen, was die anderen Abschnitte verwenden:
     Kicker  12 px / 700 / #C4B08C / Sperrung 3 px / Großbuchstaben
     H2      Gewicht 900 / Sperrung -0.025em
     Absatz  16 px / 400 / Sperrung -0.01em / #6B7280
   Der Akut-Block wich in allen drei Werten ab (H2-Sperrung -0.02em, Absatz 16,5 px,
   eigener Kicker-Stil). Er folgt jetzt derselben Sprache.

   Die Kacheln bekommen Fotogrund mit dunklem Verlauf — dieselbe Machart wie die
   Kennzahlen-Karten, je Kachel ein zum Inhalt passendes Bild.
   Ohne Media Query, gilt also für Handy UND Rechner (Manuel: "nicht nur auf
   Desktop-Versionen, sondern auch mobil zuerst"). */

/* ---------- Typografie wie in den übrigen Abschnitten ---------- */
.ssx-usp-akut .ssx-usp-marke{
  font-size:12px!important;
  font-weight:700!important;
  color:#C4B08C!important;
  letter-spacing:.25em!important;
  text-transform:uppercase!important;
}
.ssx-usp-akut .ssx-usp-akut-titel{
  font-weight:900!important;
  letter-spacing:-.025em!important;
}
.ssx-usp-akut .ssx-usp-akut-p{
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:-.01em!important;
  color:#6B7280!important;
}

/* ---------- Kacheln: Fotogrund statt Farbfläche ---------- */
.ssx-usp-akut-kachel{
  position:relative;
  overflow:hidden;
  background-color:#12151A!important;
  background-size:cover!important;
  /* 62 % statt Mitte: Die Marketingbilder tragen im oberen Drittel eine Aufschrift
     ("REVIERDIENSTE"), die durch den Schleier schimmerte. Der untere Bildteil zeigt
     die Szene ohne Schrift. */
  background-position:center 62%!important;
  border:1px solid rgba(196,176,140,.28)!important;
  box-shadow:0 18px 44px rgba(9,11,14,.34)!important;
  color:#E9E6DF!important;
}
/* 1) Reaktionszeit — Einsatzfahrzeug */
.ssx-usp-akut-kachel:nth-of-type(1){
  background-image:
    linear-gradient(165deg, rgba(12,14,18,.94) 0%, rgba(12,14,18,.76) 46%, rgba(12,14,18,.92) 100%),
    url("/assets/staffsec/mobile-sicherheit-flotte.webp")!important;
}
/* 2) Leitstelle rund um die Uhr — Nachtdienst */
.ssx-usp-akut-kachel:nth-of-type(2){
  background-image:
    linear-gradient(165deg, rgba(12,14,18,.94) 0%, rgba(12,14,18,.76) 46%, rgba(12,14,18,.92) 100%),
    url("/assets/staffsec/verschlussdienst-nacht.webp")!important;
}
/* 3) Sachkunde nach § 34a — Zutrittskontrolle */
.ssx-usp-akut-kachel:nth-of-type(3){
  background-image:
    linear-gradient(165deg, rgba(12,14,18,.94) 0%, rgba(12,14,18,.76) 46%, rgba(12,14,18,.92) 100%),
    url("/assets/staffsec/objektschutz-zutritt.webp")!important;
}
/* Der alte helle Kreis würde auf dem Foto als grauer Fleck liegen */
.ssx-usp-akut-kachel::after{ display:none!important; }
/* === ENDE NACHTRAG 103 === */

/* === NACHTRAG 104 STAFFSEC 19.08.2026 - KUNDENSTIMMEN-BAND === */
/* Manuel: "Sollten wir da nicht Kundenstimmen mit zupacken … und wir so ein paar
   durchlaufen lassen. Das ist ja auch immer spannend für den Kunden, nicht nur die
   Referenzen." Steht direkt hinter den Referenz-Logos: erst die Marken, dann was sie sagen.
   Gebaut wie das Logoband — zwei gleiche Reihen, Verschiebung um -50 % für den nahtlosen
   Umlauf. Bei "Bewegung reduzieren" steht es still und wird untereinander lesbar. */
.ssx-st{ padding:72px 0 64px; background:#FBFAF8; overflow:hidden; }
.ssx-st-innen{ max-width:1200px; margin:0 auto; padding:0 16px; }
.ssx-st-kopf{ text-align:center; margin-bottom:34px; }
.ssx-st-kicker{ display:inline-flex; align-items:center; gap:12px; margin-bottom:14px; }
.ssx-st-strich{ display:block; width:32px; height:2px; border-radius:2px; background:#C4B08C; flex:none; }
.ssx-st-marke{ font-size:12px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:#7A6435; }
.ssx-st-titel{ font-size:clamp(1.5rem,4.2vw,2.25rem); font-weight:900; letter-spacing:-.025em; color:#2D3436; margin:0 0 12px; }
.ssx-st-unter{ font-size:16px; line-height:1.6; color:#6B7280; letter-spacing:-.01em; max-width:60ch; margin:0 auto; }

.ssx-st-band{ position:relative; }
/* 🔴 Erste Fassung hatte weiche Kanten aus zwei Verlaeufen ueber dem Band. Auf dem
   Desktop lagen sie ueber den aeusseren Karten und machten sie milchig — Manuel:
   "da schimmert sowas durch, irgendwie so ein Fenster". Ein Laufband braucht das nicht:
   Karten, die am Bildschirmrand angeschnitten sind, zeigen von selbst, dass es weitergeht.
   Die Verlaeufe sind ersatzlos weg. */

.ssx-st-lauf{
  display:flex; gap:18px; width:max-content;
  animation:ssxStimmen 64s linear infinite;
}
.ssx-st-lauf:hover{ animation-play-state:paused; }
@keyframes ssxStimmen{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.ssx-st-karte{
  flex:0 0 320px; width:320px; margin:0;
  display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid #E8E5DE; border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:0 10px 30px rgba(45,52,54,.05);
}
.ssx-st-sterne{ display:flex; gap:2px; margin-bottom:12px; }
.ssx-st-stern{ color:#C4B08C; font-size:14px; line-height:1; }
.ssx-st-text{
  margin:0 0 16px; font-size:14px; line-height:1.62; color:#4B5563;
  letter-spacing:-.01em; flex:1 1 auto;
}
.ssx-st-fuss{ display:flex; flex-direction:column; gap:2px; }
.ssx-st-name{ font-size:13px; font-weight:700; color:#2D3436; }
.ssx-st-anlass{ font-size:12px; color:#8A7A5E; }
.ssx-st-quelle{
  display:block; text-align:center; margin-top:26px;
  font-size:13px; font-weight:600; color:#7A6435;
  text-decoration:underline; text-underline-offset:3px;
}
.ssx-st-quelle:hover,.ssx-st-quelle:focus-visible{ color:#5E5238; }

/* Am Handy schmalere Karten, damit zwei angeschnitten sichtbar sind — das zeigt,
   dass es weitergeht, ohne den Text zu klein zu machen. */
@media (max-width:639px){
  .ssx-st{ padding:56px 0 48px; }
  .ssx-st-karte{ flex:0 0 268px; width:268px; padding:20px 18px 16px; }
  .ssx-st-text{ font-size:13.5px; }
  .ssx-st-band::before,.ssx-st-band::after{ width:28px; }
}
/* Wer Bewegung reduziert hat, bekommt die Stimmen untereinander statt laufend */
@media (prefers-reduced-motion:reduce){
  .ssx-st-lauf{ animation:none!important; flex-wrap:wrap; width:auto; justify-content:center; }
  .ssx-st-karte[aria-hidden="true"]{ display:none; }
}
/* === ENDE NACHTRAG 104 === */

/* === NACHTRAG 105 STAFFSEC 19.08.2026 - FAKTENREIHE BRICHT SCHIEF UM === */
/* Angesehen im Abschnitt "Bundesweit präsent": Die drei Fakten der Standort-Karte
   standen zu zweit oben und der dritte allein darunter, linksbündig:
       24/7            Live
       Einsatzbereitschaft   GPS-Dokumentation
       346 Seiten
       zu Städten und Regionen
   Bei drei Angaben unterschiedlicher Länge ergibt der Umbruch immer ein schiefes Bild.
   Untereinander und mittig ist ruhig und passt zur übrigen Ausrichtung — dasselbe
   Vorgehen wie bei den Verweis-Reihen (Nachtrag 93). */
@media (max-width:767px){
  .ssx-hd-fakten{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
  }
  .ssx-hd-fakten > *{
    width:100%!important;
    text-align:center!important;
  }
}
/* === ENDE NACHTRAG 105 === */

/* === NACHTRAG 106 STAFFSEC 19.08.2026 - KUNDENSTIMMEN GRAFISCH KRÄFTIGER === */
/* Manuel: "Kann man das grafisch noch ein bisschen geiler machen?"
   Die erste Fassung war korrekt, aber blass: helle Karten auf hellem Grund, dünne Kante,
   der Stern-Block klein. Drei Eingriffe, die den Block als eigenständiges Element lesbar
   machen, ohne aus dem Auftritt zu fallen:
     1. Der Abschnitt bekommt einen ruhigen dunklen Grund — dieselbe Sprache wie die
        Nachweis- und Kennzahlen-Abschnitte. Weiße Karten darauf treten hervor.
     2. Ein großes Anführungszeichen als Gestaltungselement in der Karte.
     3. Die Sterne kräftiger und mit etwas Luft darunter.
   Das Band läuft weiterhin über die volle Breite; angeschnittene Karten am Rand zeigen,
   dass es weitergeht. */
.ssx-st{
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(196,176,140,.10) 0%, rgba(196,176,140,0) 60%),
    linear-gradient(180deg, #1B1F25 0%, #14171C 100%)!important;
  padding:84px 0 74px;
}
.ssx-st-marke{ color:#C4B08C!important; }
.ssx-st-titel{ color:#FFFFFF!important; }
.ssx-st-unter{ color:rgba(255,255,255,.62)!important; }
.ssx-st-strich{ background:#C4B08C!important; }

.ssx-st-karte{
  position:relative;
  background:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
  padding:26px 24px 20px!important;
}
/* Anführungszeichen als Zeichen, dass hier jemand spricht */
.ssx-st-karte::before{
  content:"„";
  position:absolute; top:6px; right:18px;
  font-size:64px; line-height:1; color:rgba(196,176,140,.22);
  font-weight:900; pointer-events:none;
}
.ssx-st-sterne{ gap:3px!important; margin-bottom:14px!important; }
.ssx-st-stern{ font-size:16px!important; }
.ssx-st-text{ color:#3B4148!important; }
.ssx-st-name{ color:#1F2937!important; }
.ssx-st-anlass{ color:#8A7A5E!important; }
.ssx-st-quelle{ color:#C4B08C!important; }
.ssx-st-quelle:hover,.ssx-st-quelle:focus-visible{ color:#E0CFA8!important; }

@media (max-width:639px){
  .ssx-st{ padding:62px 0 54px; }
  .ssx-st-karte{ padding:22px 20px 18px!important; }
  .ssx-st-karte::before{ font-size:52px; top:4px; right:14px; }
}
/* === ENDE NACHTRAG 106 === */

/* === NACHTRAG 107 STAFFSEC 19.08.2026 - DREI STIMMEN STEHEN, SECHS LAUFEN === */
/* Auf Unterseiten zeigt der Baustein nur drei Stimmen (siehe ssx-stimmen.js: ein
   identischer Block auf 346 Standortseiten würde die Ähnlichkeit von 24,6 auf 29,3 %
   treiben). Drei Karten füllen die Breite aber nicht — ein Laufband mit drei Karten
   wirkt wie ein Fehler. Sie stehen deshalb still und mittig nebeneinander, am Handy
   untereinander. */
.ssx-st-lauf-ruhig{
  animation:none!important;
  width:auto!important;
  flex-wrap:wrap;
  justify-content:center;
}
.ssx-st-lauf-ruhig .ssx-st-karte[aria-hidden="true"]{ display:none!important; }
@media (max-width:900px){
  .ssx-st-lauf-ruhig{ flex-direction:column; align-items:center; }
  .ssx-st-lauf-ruhig .ssx-st-karte{ width:100%!important; max-width:340px; flex:0 0 auto!important; }
}
/* === ENDE NACHTRAG 107 === */

/* === NACHTRAG 108 STAFFSEC 19.08.2026 - NACHWEIS-KARTEN AM HANDY UNTEREINANDER === */
/* Manuel: „Das ist ja auch völlig … so völlig verstreut und das passt gar nicht. Schau mal,
   wie die Schriften da sind. Das passt gar nicht in einen Kasten, das klappt alles über."
   Gemessen auf der ECHTEN Safari-Engine (WebKit, iPhone 13): Die Nachweis-Karten standen
   zu dritt nebeneinander auf je 121 px Breite. Bei dieser Breite bricht jedes deutsche
   Wort: „Qualitätsm anagement", „Sicherheits dienstleistu ngen".

   Ursache ist NACHTRAG 13f (14.08.): Er setzt `flex-direction:row!important` auf JEDES
   Laufband, mit der damals richtigen Begründung „Laufbänder sind absichtlich breiter als
   der Bildschirm". Seine Spezifität (div + Attribut) schlägt die Spalten-Regel.
   Für das Logoband stimmt das weiterhin. Für die Nachweis-Karten nicht: Sie laufen seit
   NACHTRAG 87 gar nicht mehr, sondern stehen — und stehende Textkarten gehören am Handy
   untereinander. Unterschieden wird wie überall am Inhalt: mit Bild läuft, ohne Bild steht. */
@media (max-width:767px){
  div[class*="animate-marquee"]:not(:has(img)){
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    max-width:100%!important;
    gap:14px!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
  }
  div[class*="animate-marquee"]:not(:has(img)) > *{
    width:100%!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    min-width:0!important;
  }
}
/* === ENDE NACHTRAG 108 === */

/* === NACHTRAG 109 STAFFSEC 19.08.2026 - DREI BILD- UND KARTENBEFUNDE (WebKit-geprüft) === */
/* Erstmals auf der ECHTEN Safari-Engine gemessen (WebKit, iPhone 13) — die bisherigen
   Prüfungen liefen gegen Chrome und haben diese drei nicht gezeigt. */

@media (max-width:767px){

  /* ---------- (1) Porträt im Zitat-Block war ein Ausschnitt ---------- */
  /* Manuel: „Mein Foto … ist rangezoomt, das ist nicht von weiter weg. Also nicht so wie
     auf der Desktopversion." Gemessen: 356 × 318 px mit object-fit:cover aus einem
     Hochformat-Original — vom Bild blieb nur der Kopf. Am Handy wird daraus dasselbe
     runde Porträt wie im Ansprechpartner-Block, damit beide Stellen gleich aussehen. */
  body main section img[src*="manuel-rutsch"],
  body main section img[src*="martin-korf"],
  body main section img[src*="florian-rutsch"]{
    width:150px!important;
    height:150px!important;
    max-width:150px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    object-position:50% 20%!important;
    box-sizing:border-box!important;
    border:3px solid #fff!important;
    box-shadow:0 10px 30px rgba(31,41,55,.16)!important;
    margin:0 auto 14px!important;
    display:block!important;
  }
  /* Der Rahmen darum darf das runde Bild nicht als Rechteck hinterlegen */
  body main section :is(div,figure):has(> img[src*="manuel-rutsch"]),
  body main section :is(div,figure):has(> img[src*="martin-korf"]),
  body main section :is(div,figure):has(> img[src*="florian-rutsch"]){
    background:transparent!important;
    border-radius:50%!important;
    width:150px!important;
    height:150px!important;
    margin:0 auto!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* ---------- (2) Werte-Karten: Symbol links, Nummer rechts ---------- */
  /* Manuel: „Auch die beiden komplett nicht zentriert." Symbol und Ordnungszahl standen
     als Zeile mit `justify-between` an den Aussenkanten, während Titel und Text mittig
     saßen — drei Ausrichtungen in einer Karte. Jetzt stehen sie als Paar in der Mitte. */
  body main section [class*="rounded-3xl"] [class*="justify-between"]:has(> [class*="rounded"]){
    justify-content:center!important;
    gap:14px!important;
  }

  /* ---------- (3) Branchenbild füllte den Kasten nicht ---------- */
  /* Manuel: „Diese Fotos passen da nicht mehr rein, das füllt diesen Kasten nicht mehr aus."
     Gemessen: 88 × 88 px in einer 358 px breiten Karte — ein Viertel der Breite, der Rest
     leer. Als Kopfbild über die volle Kartenbreite trägt das Foto die Karte, statt darin
     zu schwimmen. */
  body main section a[class*="min-h-[280px]"]{
    padding:0 0 20px!important;
    overflow:hidden!important;
    gap:0!important;
  }
  body main section a[class*="min-h-[280px]"] > img{
    width:100%!important;
    max-width:100%!important;
    height:150px!important;
    border-radius:0!important;
    object-fit:cover!important;
    object-position:center 45%!important;
    margin:0 0 16px!important;
  }
  body main section a[class*="min-h-[280px]"] > div[class*="bottom-0"]{
    padding:0 18px!important;
  }
}
/* === ENDE NACHTRAG 109 === */

/* === NACHTRAG 110 STAFFSEC 19.08.2026 - STRICH SITZT 8 PX ZU HOCH === */
/* Manuel: „Der Strich beim Foto neben Branche ist nicht exakt daneben … betrifft auch
   Branchen und unsere Geschäftsbereiche, es betrifft alles eigentlich. Es ist nicht
   direkt daneben, das ist verschoben."
   Auf der Safari-Engine nachgemessen — er hat auf 8 px genau recht:
     Vertrauen führender Marken   -8 px
     Zertifizierungen & Qualität  -8 px
     Branchen                     -8 px
     Unsere Geschäftsbereiche     -8 px
     Warum Staffsec               -8 px
   Der Container steht auf `align-items:center`, trotzdem sitzt der Strich zu hoch.
   Grund: Er trägt `mb-[14px]` — ein Abstand nach unten, der aus der Bauform stammt, in
   der er ÜBER der Überschrift steht. In einer Zeile zentriert die Ausrichtung den Strich
   samt seinem Abstand, und der sichtbare Balken rutscht um die halbe Höhe nach oben:
   14 ÷ 2 = 7 px, gemessen 8. In einer waagerechten Zeile braucht er diesen Abstand nicht. */
body main [class*="flex"]:not([class*="flex-col"]) > :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"],[class*="h-[3px]"]),
footer [class*="flex"]:not([class*="flex-col"]) > :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"]){
  margin-top:0!important;
  margin-bottom:0!important;
  align-self:center!important;
}
/* === ENDE NACHTRAG 110 === */

/* === NACHTRAG 111 STAFFSEC 19.08.2026 - ANRUF-KNOPF IM AKUT-BLOCK === */
/* Manuel: „Kannst Du dieses ‚Jetzt anrufen' irgendwie anders machen, noch mit dem Farbton
   da im Hintergrund? Ist ja ganz geil — kannst das grafisch besser machen?"
   Der Knopf war schlicht schwarz (#0D0F11) auf hellem Grund und stand damit neben den
   neuen Kacheln wie ein Fremdkörper. Er nimmt jetzt deren Sprache auf: tiefer Grund mit
   goldenem Schimmer, goldene Kante, goldene Schrift — und der Goldton wandert beim
   Antippen sichtbar durch. Die Rufnummer bleibt die deutlichste Zeile im Abschnitt. */
.ssx-usp-akut .ssx-usp-knopf{
  background:
    radial-gradient(130% 180% at 12% 0%, rgba(196,176,140,.28) 0%, rgba(196,176,140,0) 62%),
    linear-gradient(135deg, #232830 0%, #171B21 55%, #0F1216 100%)!important;
  border:1px solid rgba(196,176,140,.42)!important;
  color:#E8D9B8!important;
  box-shadow:0 12px 30px rgba(9,11,14,.30), inset 0 1px 0 rgba(255,255,255,.06)!important;
  font-weight:700!important;
  letter-spacing:.01em;
  transition:background-position .45s ease, box-shadow .3s ease, border-color .3s ease;
  background-size:180% 180%, 100% 100%;
  background-position:0% 50%, 0% 0%;
}
.ssx-usp-akut .ssx-usp-knopf svg{ color:#C4B08C!important; }
.ssx-usp-akut .ssx-usp-knopf:hover,
.ssx-usp-akut .ssx-usp-knopf:focus-visible,
.ssx-usp-akut .ssx-usp-knopf:active{
  background-position:100% 50%, 0% 0%;
  border-color:rgba(196,176,140,.70)!important;
  box-shadow:0 16px 38px rgba(9,11,14,.38), inset 0 1px 0 rgba(255,255,255,.10)!important;
  color:#F2E7CE!important;
}
/* === ENDE NACHTRAG 111 === */

/* === NACHTRAG 112 STAFFSEC 19.08.2026 - LETZTER SCHIEFER STRICH === */
/* Der Strich in der Vertrauenszeile des Kopfbereichs („ISO 9001 · DIN 77200") saß auf
   sechs Seiten 6 px zu hoch — derselbe Fehler wie in Nachtrag 110, aber an einem Element,
   das die Regel dort nicht traf: Es trägt keine Strich-Klasse (h-px, h-[2px]), sondern
   ist selbst ein `flex items-center gap-3` mit 12 px Abstand nach unten. Optisch ist es
   ein Strich, im Markup ein Container — deshalb über den Elternteil gefasst.
   12 ÷ 2 = 6 px, exakt der gemessene Versatz. */
.ssx-vertrauen > *{
  margin-top:0!important;
  margin-bottom:0!important;
  align-self:center!important;
}
.ssx-vertrauen{ align-items:center!important; }
/* === ENDE NACHTRAG 112 === */

/* === NACHTRAG 113 STAFFSEC 19.08.2026 - SEHR LANGE WÖRTER DÜRFEN BRECHEN === */
/* Letzter Befund der breiten Safari-Prüfung (48 Seiten): Auf
   /kontrollfahrten-rsa21-verkehrssicherung ragte die Überschrift
   „Verkehrssicherungsmaßnahmen" 9 px über ihre Karte.
   Ursache ist NACHTRAG 82: Der schaltet `hyphens:manual`, weil automatische Trennung in
   mittigem Text unruhig aussieht („Dachge-setz", „Sa-botage"). Richtig — nur greift die
   Regel auch dort, wo ein einzelnes Wort breiter ist als sein Kasten. Dann gibt es keine
   Trennstelle mehr und das Wort läuft heraus.
   `overflow-wrap:break-word` bricht NUR, wenn es sonst überliefe: Bei allen normalen
   Wörtern bleibt das ruhige Bild ohne Trennstriche erhalten. */
@media (max-width:767px){
  body main :is(h1,h2,h3,h4,h5,p,li,span,blockquote,figcaption){
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  /* overflow-wrap allein reicht nicht: Ein flex-Kind ohne Breitengrenze bemisst sich nach
     seinem Inhalt und wird so breit wie das laengste Wort — gemessen 301 px in einem
     292-px-Kasten. Erst die Obergrenze zwingt den Umbruch. */
  body main [class*="flex"] > :is(h1,h2,h3,h4,h5,p,span,div),
  body main [class*="grid"] > :is(h1,h2,h3,h4,h5,p,span,div){
    max-width:100%!important;
    min-width:0!important;
  }
}
/* === ENDE NACHTRAG 113 === */

/* === NACHTRAG 114 STAFFSEC 19.08.2026 - AKUT-BLOCK AUCH AM RECHNER ANGLEICHEN === */
/* Manuel: „Da ist die Schriftart und Weise und mit den Farben anders als bei den anderen …
   Aber denk daran, nicht nur auf Desktop-Versionen, sondern auch mobil zuerst."
   Nachtrag 103 hat die Werte angeglichen — aber am RECHNER gemessen bleibt ein Unterschied,
   der auf dem Handy nicht sichtbar war:
     Branchenexpertise   Titel 48 px, Ausrichtung links
     Akut-Block          Titel 40 px, Ausrichtung mittig, Untertitel dagegen links
   Der Akut-Block war damit der einzige zentrierte Abschnitt am Rechner — und in sich
   uneinheitlich, weil sein Untertitel trotzdem links stand.
   Am Handy bleibt alles mittig (Manuels Vorgabe), am Rechner folgt er den anderen. */
@media (min-width:768px){
  .ssx-usp-akut .ssx-usp-akut-kopf{
    text-align:left!important;
    max-width:none!important;
  }
  .ssx-usp-akut .ssx-usp-marke,
  .ssx-usp-akut .ssx-usp-akut-titel,
  .ssx-usp-akut .ssx-usp-akut-p{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .ssx-usp-akut .ssx-usp-akut-titel{
    font-size:48px!important;
    line-height:1.06!important;
  }
  .ssx-usp-akut .ssx-usp-akut-p{
    max-width:68ch!important;
  }
}
/* === ENDE NACHTRAG 114 === */

/* === NACHTRAG 115: Die Fußzeile am Handy auf EINE Kante ===
 * Manuel am 19.08.2026, mit Bild der Fußzeile: „es ist ja immer noch kurz und quer.
 * Also ich versteh die Welt nicht. Es ist ja immer noch falsch."
 *
 * Er hat recht — und meine Prüfung KONNTE es nicht finden: handy-echt-stapel.js misst
 * ausschließlich innerhalb von `main`. Die Fußzeile lag in keinem der 48 Läufe. Die
 * gemeldeten „0 Befunde" galten also nur für den Inhaltsbereich, nicht für die Seite.
 * Derselbe Fehlertyp wie zuvor: ein Maßstab, der weniger prüft, als er zu prüfen scheint.
 *
 * Gemessen auf WebKit/iPhone 13 — linke Kanten im Fußbereich:
 *    16 px  38 Elemente   <- die Kante, auf der die Fußzeile steht
 *   200 px  12 Elemente   <- zweite Spalte der Linkliste, so gewollt
 *   155 px  Logo          <- mittig: `a.inline-block` erbt text-align:center
 *    37 px  Telefon    ┐  beide inline-flex, laufen deshalb NEBENeinander in eine
 *   206 px  E-Mail     ┘  zentrierte Zeile (37+169=206, 206+148=354, Rest 36 → mittig)
 *    54 px  Adresse       <- eigene flex-Zeile, Text hinter dem Icon
 *    22 / 106 / 217 px    <- Schlusszeile mittig verteilt statt links
 *
 * Ursache der Kontaktzeile ist eine richtige Regel mit zu weitem Griff:
 *   a[href^="tel:"],a[href^="mailto:"]{min-height:44px;display:inline-flex}
 * Das 44-px-Touchziel (Fingertippen) bleibt richtig und bleibt erhalten — nur im Fuß
 * braucht es block-level `flex`, sonst teilen sich Telefon und Mail eine Zeile.
 */
@media (max-width:767px){
  /* 1) Alles im Fuß steht links — auch inline-block-Kästen wie der Logo-Link */
  footer,
  footer div,
  footer p,
  footer a,
  footer h3,
  footer h4,
  footer span,
  footer address,
  footer ul,
  footer li{
    text-align:left;
  }

  /* 2) Telefon und E-Mail wieder untereinander. Das Touchziel von 44 px bleibt,
   *    nur die Zeilenbildung ändert sich. */
  footer a[href^="tel:"],
  footer a[href^="mailto:"]{
    display:flex!important;
    width:100%;
  }

  /* 3) Schlusszeile (© / Datenschutz / Impressum) an dieselbe Kante wie der Rest.
   *    Greift nur die gestapelte Fassung — die Reihe `flex items-center gap-6` der
   *    beiden Rechtslinks bleibt unberührt, weil ihr flex-col fehlt. */
  footer [class*="flex-col"][class*="items-center"]{
    align-items:flex-start!important;
  }
}
/* === ENDE NACHTRAG 115 === */

/* === NACHTRAG 116: Am Handy EINE Haltung — und zwar Mitte ===
 * Manuel am 19.08.2026, drei Bilder hintereinander: „das zum Beispiel wird ja auch auf
 * jeden Fall zentriert und ist auch nicht zentriert. Also auch da das nächste und das ist
 * innerhalb der Seite. Oh Mann. Also so können wir's nicht veröffentlichen, wenn da immer
 * wieder solche Sachen aufploppen."
 *
 * Seine Vorgabe im Klartext: Am Handy gilt Mitte — „bis auf Aufzählungen, die sind
 * natürlich da linksbündig". Nachtrag 81 hatte das schon gewollt, aber über eine
 * Aufzählung von Selektoren, die Lücken ließ. Die neue Prüfart 5 (Lagemessung) hat die
 * Lücken sichtbar gemacht: 20 Stellen allein auf der Startseite, an denen ein Block
 * links stand, während seine Geschwister mittig standen — oder umgekehrt.
 *
 * Gemessen auf WebKit/iPhone 13, Startseite, vor diesem Nachtrag:
 *   „Unsere Geschäftsbereiche", „Warum Staffsec", „Häufige Fragen"   links, Rest mittig
 *   die Zähler 200+/300+/3                                           links, Rest mittig
 *   die Standort-Kacheln Neumünster / 24-7                           links, Rest mittig
 *   Werte-Karten 01–03 samt Icon                                     mittig, Rest links
 *   Sterne im Stimmen-Band                                           links im mittigen Satz
 *
 * Statt weiter Einzelfälle nachzuziehen steht die Haltung jetzt an EINER Stelle.
 */
@media (max-width:767px){
  /* 1) Grundhaltung Mitte */
  main :is(h1,h2,h3,h4,h5,h6,p,span,div,a,blockquote,figure,figcaption,dt,dd,strong,em,small,time){
    text-align:center;
  }

  /* 2) Die vereinbarten Ausnahmen — Aufzählungen lesen sich linksbündig, Formulare
   *    und Tabellen ebenso. Diese Regeln stehen NACH der Grundhaltung und gewinnen. */
  main :is(ul,ol,dl),
  main :is(ul,ol,dl) :is(li,dd,dt,p,span,a,div){
    text-align:left;
  }
  main form,
  main form :is(label,input,textarea,select,p,span,div,a){
    text-align:left;
  }
  main :is(table,thead,tbody,tr,th,td){ text-align:left; }
  /* Die Fußzeile hat ihre eigene Haltung (Nachtrag 115) und bleibt unberührt, weil
   * alle Regeln hier auf `main` beginnen. */

  /* 3) Flex-Zeilen mit nur EINEM Kind: `justify-between` drückt das Kind an den linken
   *    Rand, weil kein zweites Kind zum Auseinanderschieben da ist. Genau so entstehen
   *    die Branchen-Kacheln mit linksbündigem Text im mittigen Abschnitt. */
  main a[class*="justify-between"]:not([class*="flex-col"]),
  main div[class*="justify-between"]:not([class*="flex-col"]):not(:has(> * + *)){
    justify-content:center;
  }

  /* 4) Sterne im Kundenstimmen-Band mittig unter den mittigen Satz */
  .ssx-st-sterne{ justify-content:center; }

  /* 5) Kacheln mit einer Zeile Inhalt sollen keine Klötze sein.
   *    Manuel: „Hier ist das son riesiger Klotzkasten. Mit so wenig Inhalt für son
   *    Riesenkasten." Gemessen: 122 px Kasten für 32 px Inhalt. */
  main a[class*="rounded-xl"][class*="p-6"],
  main a[class*="rounded-xl"][class*="p-5"]{
    padding:15px 18px;
  }
}
/* === ENDE NACHTRAG 116 === */

/* === NACHTRAG 117: Manuels Porträt nicht mehr rund beschneiden ===
 * Manuel am 19.08.2026: „mein Foto als Ansprechpartner sieht auch immer noch so
 * ausgeschnitten aus. Mein Kopf muss ja besser zu sehen sein. Also auch das ist noch
 * nicht optimal gelöst tatsächlich in der mobilen Version." — und schon davor: „es ist
 * rangezoomt, das ist nicht von weiter weg. Das hattest Du sogar schon zur Aufgabe."
 *
 * Gemessen: manuel-rutsch.webp ist 640 × 896 (Hochformat 0,71). Im runden Rahmen mit
 * 150 × 150 und object-fit:cover wird die Breite voll gezeigt und von der Höhe rund ein
 * Drittel abgeschnitten — der Kopf stößt oben an den Kreisrand.
 * Ein weiter gefasstes Foto von Manuel gibt es im Vault nicht (geprüft: assets/team/
 * enthält nur diese eine Vorlage in vier Größen). „Weiter weg" ist ohne neues Foto also
 * nicht herstellbar — wohl aber der volle Bildausschnitt: Das Porträt steht am Handy
 * jetzt im Hochformat des Originals, abgerundet statt kreisrund. Damit ist der Kopf
 * vollständig zu sehen, mit Luft darüber.
 *
 * ⚠️ Ein Porträt aus größerer Entfernung bleibt der bessere Weg — dafür braucht es ein
 * neues Foto von Manuel. Steht als offener Punkt in der Punkteliste.
 */
@media (max-width:767px){
  .ssx-ap-bildrahmen{
    max-width:172px!important;
    margin:0 auto!important;
  }
  .ssx-ap-bildrahmen,
  .ssx-ap-bild{
    border-radius:20px!important;
  }
  .ssx-ap-bild{
    width:172px!important;
    height:241px!important;      /* 172 / 0,71 — das Seitenverhältnis des Originals */
    object-fit:cover!important;
    object-position:50% 12%!important;
  }
}
/* === ENDE NACHTRAG 117 === */

/* === NACHTRAG 118: Fußzeile mittig, Porträt im Hochformat, Kacheln zentriert ===
 *
 * (1) FUSSZEILE — Manuel am 19.08.2026, nachdem Nachtrag 115 sie sauber auf die linke
 *     Kante gestellt hatte: „Ne das soll zentriert in der Fußzeile!!"
 *     Damit gilt auch im Fuß, was für den Inhalt gilt (Nachtrag 116): am Handy Mitte.
 *     Nachtrag 115 hat den eigentlichen Fehler behoben — Logo mittig über linksbündigem
 *     Rest, Telefon und Mail nebeneinander in einer Zeile. Richtig war die Diagnose,
 *     falsch die Richtung: vereinheitlicht wird nach MITTE, nicht nach links.
 *
 * (2) PORTRÄT — Nachtrag 117 stand im ausgelieferten CSS und wirkte trotzdem nicht:
 *     `.ssx-ap-bild` hat width:100%, die Größe kommt vom Rahmen. Meine Regel setzte die
 *     Maße am Bild, der Rahmen blieb bei 150 × 150 rund. Jetzt greifen beide, mit
 *     Spezifität über der Vorlage.
 *
 * (3) BRANCHEN-KACHELN — das Padding aus Nachtrag 116 hat gegriffen (der Klotz ist von
 *     ~200 px auf 68 px geschrumpft), die Ausrichtung nicht: eine ältere Regel setzt
 *     `justify-content:space-between !important`. Bei einer Kachel mit nur einem Kind
 *     schiebt das den Text an den linken Rand — Manuels „unters Netz auch nicht
 *     zentriert". Gegen ein !important hilft nur ein !important.
 */
@media (max-width:767px){
  /* ---------- (1) Fußzeile mittig ---------- */
  footer,
  footer div,
  footer p,
  footer a,
  footer h3,
  footer h4,
  footer span,
  footer address,
  footer ul,
  footer li{
    text-align:center;
  }
  /* Kontaktzeilen: Symbol und Text als Gruppe mittig, weiter untereinander */
  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  footer div[class*="items-start"]:has(> div[class*="rounded"]){
    display:flex!important;
    width:100%;
    justify-content:center;
  }
  /* Der Strich unter dem Logo stand links — er gehört unter die Mitte */
  footer [class*="w-16"][class*="h-[2px]"],
  footer [class*="w-8"][class*="h-[1.5px]"],
  footer [class*="w-8"][class*="h-px"]{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  /* Der Logo-Link ist inline-block — er folgt der Ausrichtung seines Elternteils */
  footer a[class*="inline-block"]{ text-align:center; }
  /* Schlusszeile bleibt mittig gestapelt (die Vorgabe von flex-col items-center) */
  footer [class*="flex-col"][class*="items-center"]{
    align-items:center!important;
  }

  /* ---------- (2) Porträt im Hochformat statt rund beschnitten ---------- */
  .ssx-ap .ssx-ap-bildrahmen,
  div.ssx-ap-bildrahmen{
    width:172px!important;
    height:241px!important;      /* 172 / 0,71 — das Verhältnis von manuel-rutsch.webp */
    max-width:172px!important;
    border-radius:20px!important;
    margin:0 auto!important;
  }
  .ssx-ap .ssx-ap-bildrahmen .ssx-ap-bild,
  div.ssx-ap-bildrahmen img.ssx-ap-bild{
    width:100%!important;
    height:100%!important;
    border-radius:20px!important;
    object-fit:cover!important;
    object-position:50% 12%!important;
  }

  /* ---------- (3) Kacheln mit einem Kind: Inhalt in die Mitte ---------- */
  main a[class*="justify-between"]:not([class*="flex-col"]){
    justify-content:center!important;
  }
}
/* === ENDE NACHTRAG 118 === */

/* === NACHTRAG 119: zwei Reste aus 118 ===
 * Gemessen auf WebKit nach 118:
 *   Porträt-Bild 150 × 241 im Rahmen 172 × 241 — `width:100%` lief gegen ein
 *   max-width aus der Vorlage, dadurch blieb links und rechts ein Rand.
 *   Fußzeilen-Kicker („SICHERHEIT", „MOBIL" …) stand als einziges Element noch links.
 */
@media (max-width:767px){
  div.ssx-ap-bildrahmen img.ssx-ap-bild{
    max-width:none!important;
    min-width:0!important;
  }
  footer h3,
  footer h4,
  footer [class*="uppercase"],
  footer [class*="tracking-"]{
    text-align:center!important;
  }
}
/* === ENDE NACHTRAG 119 === */

/* === NACHTRAG 120: die Fußzeile am Handy vollständig mittig ===
 * Nachtrag 118/119 haben Logo, Strich und Text mittig gestellt, der Kicker
 * („SICHERHEIT", „MOBIL" …) blieb links. Die Messung zeigt: auf ihn wirkt gar keine
 * text-align-Regel — er ERBT „links" von
 *     footer ul, footer li, footer nav, .ssx-fuss ul, .ssx-fuss li { text-align:left !important }
 * über seinen Elternblock. Einzelne Elemente nachzuziehen führt hier nicht weiter;
 * Manuels Ansage ist eindeutig („Ne das soll zentriert in der Fußzeile!!"), also gilt
 * im Fuß am Handy durchgehend Mitte — auch für die Linklisten.
 */
@media (max-width:767px){
  body footer,
  body footer :is(div,p,a,h2,h3,h4,h5,span,address,ul,ol,li,dl,dt,dd,nav,section,small,time),
  body .ssx-fuss,
  body .ssx-fuss :is(div,p,a,h3,h4,span,ul,li){
    text-align:center!important;
  }
  /* Zweispaltiger Linksatz bleibt zweispaltig, der Text darin steht jetzt mittig */
  body footer ul{ column-gap:18px; }
}
/* === ENDE NACHTRAG 120 === */

/* === NACHTRAG 121: die drei Altregeln aufheben, die „links" festhielten ===
 * Nachtrag 118–120 blieben ohne Wirkung auf den Fußzeilen-Kicker. Die rekursive
 * Regelsuche (über ALLE Ebenen, nicht nur zwei — daran war die erste Suche gescheitert)
 * zeigt drei ältere Regeln mit !important und höherer Spezifität als meine:
 *
 *   footer :is([class*="tracking-"],[class*="uppercase"]):not(…)   left !important   0,2,1
 *   main [class*="items-center"][class*="gap-"]:is([class*="inline-flex"]…)          0,3,1
 *   body main [class*="justify-between"]:not([class*="flex-col"])  left !important   0,2,2
 *
 * Sie stammen aus der Zeit, als am Handy links galt. Seit Manuels Ansage vom 19.08.
 * („Ne das soll zentriert in der Fußzeile!!" und „das wird ja auch auf jeden Fall
 * zentriert") gilt Mitte. Gegen !important plus Spezifität hilft nur beides: gleicher
 * Bau, spätere Position. `:not([data-ssx-links])` hebt die Spezifität auf denselben
 * Wert — bei Gleichstand gewinnt die spätere Regel. Das Attribut ist zugleich der
 * Notausgang: Wer ein Element ausdrücklich links haben will, setzt data-ssx-links.
 */
@media (max-width:767px){
  body footer :is(h3,h4,[class*="tracking-"],[class*="uppercase"]):not([data-ssx-links]):not([data-x]){
    text-align:center!important;
  }
  body main :is([class*="items-center"],[class*="justify-between"],[class*="tracking-"],[class*="uppercase"]):not([data-ssx-links]):not([data-x]){
    text-align:center!important;
  }
  /* Aufzählungen, Formulare und Tabellen bleiben links — Manuels Ausnahme */
  body main :is(ul,ol,dl):not([class*="flex"]):not([data-x]),
  body main :is(ul,ol,dl):not([class*="flex"]) :is(li,dd,dt,p,span,a):not([data-x]),
  body main form:not([data-x]),
  body main form :is(label,input,textarea,select,p,span,div,a):not([data-x]){
    text-align:left!important;
  }
}
/* === ENDE NACHTRAG 121 === */

/* === NACHTRAG 122: die Fußzeilen-Spalten sind flex — text-align greift dort nicht ===
 * Nach 118–121 stand die Fußzeile mittig, mit drei Ausnahmen: der Spalten-Kicker
 * („SICHERHEIT"), sein Strich und die Markenspalte. Gemessen:
 *     Eltern: flex column a:flex-start t:center
 * Die Spalten sind Flex-Container mit `items-start`. Für ein Flex-Kind bestimmt
 * `align-items` die Querlage, nicht `text-align` — der zentrierte Text saß in einem
 * Kasten, der selbst links klebte. Genau daran sind drei Nachträge vorbeigelaufen.
 */
@media (max-width:767px){
  body footer [class*="flex-col"],
  body footer [class*="items-start"],
  body footer div:has(> h3),
  body footer div:has(> h4){
    align-items:center!important;
  }
  /* Der Strich unter Logo und Kicker mittig, egal in welcher Schreibweise */
  body footer :is([class*="h-px"],[class*="h-[1px]"],[class*="h-[1.5px]"],[class*="h-[2px]"]){
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
/* === ENDE NACHTRAG 122 === */

/* === NACHTRAG 123: Kontaktzeilen im mittigen Fuß als Spalte ===
 * Nach der Umstellung auf Mitte (118–122) stand der Adressblock zentriert, sein
 * Symbol aber weiterhin daneben — bei vier Textzeilen hing das Pin-Symbol isoliert
 * links in der Luft. In einem zentrierten Satz gehört das Symbol über den Text,
 * nicht daneben.
 */
@media (max-width:767px){
  body footer a[href^="tel:"],
  body footer a[href^="mailto:"],
  body footer div[class*="items-start"]:has(> div[class*="rounded"]){
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    text-align:center!important;
  }
  body footer a[href^="tel:"] > div[class*="rounded"],
  body footer a[href^="mailto:"] > div[class*="rounded"],
  body footer div[class*="items-start"] > div[class*="rounded"]{
    margin-top:0!important;
  }
  /* Etwas mehr Luft zwischen den drei Kontaktblöcken, weil sie jetzt höher sind */
  body footer div[class*="space-y-3"] > * + *{ margin-top:18px!important; }
}
/* === ENDE NACHTRAG 123 === */

/* === NACHTRAG 124: der Vertrauensblock folgt der Handy-Haltung ===
 * Gemessen auf /sicherheitsdienst-hamburg: `.ssx-vt-kopf` und `.ssx-vt-text` standen
 * links, während Kicker, Karten und Referenzband desselben Abschnitts mittig stehen.
 * Ursache: Für `.ssx-vt-label`, `.ssx-vt-karte` und `.ssx-vt-ref` gibt es eine
 * Zentrierung, für den Fließtext `.ssx-vt-text` nicht — dort greift die ältere Regel
 * `p{text-align:left!important}`. Der linksbündige Absatz zog auch die Messung des
 * Kopfblocks nach links, weil er dessen breitester Inhalt ist.
 */
@media (max-width:767px){
  .ssx-vt-kopf,
  .ssx-vt-text,
  .ssx-vt-kopf :is(p,span,div,h2,h3){
    text-align:center!important;
  }
  .ssx-vt-text{ margin-left:auto!important; margin-right:auto!important; }
}
/* === ENDE NACHTRAG 124 === */

/* === NACHTRAG 125: der Pfeil in den Standort-Karten klebt rechts ===
 * Gemessen auf neun Seiten: Die Karten „Neumünster · Berlin · Bremen" laufen am Handy
 * als Spalte (Nachtrag 82 dreht `flex items-center` auf column). Text und Symbol stehen
 * dann untereinander — der 16-px-Pfeil aber am rechten Rand (links 323, rechts 19),
 * weil `items-center` beim Drehen der Achse die Querlage nicht mehr bestimmt.
 * In einer mittigen Karte gehört er unter die Mitte.
 */
@media (max-width:767px){
  main a[class*="items-center"][class*="rounded-xl"]{
    align-items:center!important;
  }
  main a[class*="items-center"][class*="rounded-xl"] > svg{
    align-self:center!important;
  }
}
/* === ENDE NACHTRAG 125 === */

/* === NACHTRAG 126: die letzten drei Versätze aus dem Breitlauf ===
 * 48 Seiten auf WebKit, Erheblichkeitsschwelle 12 % der Breite:
 *
 *  47 %  der Pfeil in den Standort-Karten (9 Seiten). Nachtrag 125 hat den Kasten auf
 *        `align-items:center` gestellt — das Symbol trägt aber `margin-left:auto`, und
 *        ein Auto-Rand schlägt die Achsenausrichtung. Erst der Rand macht ihn frei.
 *  22 %  `.ssx-dl-text` steht mittig in einer Spalte mit `items-start`.
 *  21 %  `.ssx-marke-link` („kontrollfahrten.com ›", „baulogistik-nord.de ›") als
 *        inline-flex ohne eigene Ausrichtung.
 */
@media (max-width:767px){
  main a[class*="rounded-xl"] > svg,
  main a[class*="items-center"] > svg{
    margin-left:0!important;
    margin-right:0!important;
    align-self:center!important;
  }
  .ssx-dl,
  .ssx-dl-text,
  .ssx-dl :is(div,p,span,a){
    align-items:center!important;
    text-align:center!important;
  }
  .ssx-marke-link{
    display:flex!important;
    justify-content:center!important;
    width:100%;
  }
}
/* === ENDE NACHTRAG 126 === */

/* === NACHTRAG 127: der Kicker „Backoffice Team" auf /team ===
 * Letzter erheblicher Versatz aus dem Breitlauf über 48 Seiten: ein `inline-flex`-Kicker
 * mit Kasten 16 links / 194 rechts — also klar linksbündig, während der Abschnitt
 * ringsum mittig steht. Ein inline-flex folgt der Textausrichtung seines Elternteils;
 * hier fehlte sie, weil der Elternblock ein reiner Layout-Container ist.
 */
@media (max-width:767px){
  main div[class*="inline-flex"][class*="items-center"]:not([class*="justify-between"]){
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
/* === ENDE NACHTRAG 127 === */

/* === NACHTRAG 128: Chip-Reihen bleiben Reihen ===
 * Sichtprüfung am Handy (nicht messbar, nur sichtbar): Die vier Leistungs-Chips auf der
 * Startseite („Objektschutz", „Werkschutz", „Veranstaltungsschutz",
 * „Baustellenbewachung") standen untereinander, jeder so breit wie sein Text — 105, 97,
 * 156, 158 px. Die Kanten springen bei jedem Chip, der Block wirkt unruhig.
 *
 * Ursache: Nachtrag 82 dreht `flex`-Zeilen am Handy auf Spalte. Bei einem Container mit
 * `flex-wrap` ist das falsch — der bricht von sich aus um, sobald der Platz nicht reicht,
 * und genau dafür ist er gebaut. Bei 358 px nutzbarer Breite passen zwei Chips
 * nebeneinander (105 + 97 + 8 Abstand = 210).
 */
@media (max-width:767px){
  main [class*="flex-wrap"],
  footer [class*="flex-wrap"]{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
  }
}
/* === ENDE NACHTRAG 128 === */

/* Nachtrag 128, Teil 2: Die Regel aus Nachtrag 82 stellt genau diese Chip-Reihe auf
 * Spalte —
 *   body main [class*="flex-wrap"]:has(> span[class*="rounded-lg"]):not(:has(> a))
 * mit !important und hoher Spezifität. Sichtbares Ergebnis: vier Chips untereinander mit
 * 105, 97, 156 und 158 px Breite, die Kanten springen. Nebeneinander ist ruhiger und
 * kompakter; überlaufen kann nichts, weil flex-wrap von selbst umbricht. Gleicher Bau
 * plus ein :not() hebt die Spezifität auf denselben Wert — die spätere Regel gewinnt. */
@media (max-width:767px){
  body main [class*="flex-wrap"]:has(> span[class*="rounded-lg"]):not(:has(> a)):not([data-ssx-spalte]){
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
  }
  body main [class*="flex-wrap"] > span[class*="rounded-lg"]{
    max-width:100%;
  }
}

/* === NACHTRAG 129: Fußzeile einspaltig, zweites Porträt nachgezogen ===
 *
 * (1) Manuel am 19.08.2026, 22:00, mit zwei Bildern der Fußzeile: „in der Fußzeile das
 *     alles kreuz und quer". Er hat recht, und der Grund ist die Bauform selbst:
 *     `footer ul { columns: 2 }` setzt die Links in zwei Spalten. Gemessen:
 *         Objektschutz           x =   0
 *         Pädagogische Sicherheit x = 188
 *         „Auf- und Verschlussdienste" braucht ZWEI Zeilen (41 px statt 20)
 *     Dadurch stehen die Zeilen der rechten Spalte gegen die linke versetzt, und weil
 *     die Einträge seit Nachtrag 120 zentriert sind, sitzt jeder Text auf einer anderen
 *     Achse: „Arbeitnehmerüberlassung" (23 Zeichen) gegen „Staplerfahrer" (13).
 *     Zweispaltig UND zentriert wird nie ruhig — beides zusammen geht nicht.
 *     Also einspaltig: alles auf EINER Mittelachse. Die Fußzeile wird länger; am Handy
 *     wird ohnehin gescrollt, und Ruhe ist hier mehr wert als Kürze.
 *
 * (2) „Beim Bild hast Du auch nicht gemacht." — stimmt. Manuels Foto steht an ZWEI
 *     Stellen: im Ansprechpartner-Block (Nachtrag 117–119, erledigt) und im Zitat-Block
 *     der Startseite. Letzteren habe ich übersehen: 148 × 150, border-radius 50 % — also
 *     genau der enge runde Ausschnitt, den er beanstandet hat. Gleiche Behandlung.
 */
@media (max-width:767px){
  /* (1) Fußzeilen-Listen einspaltig, mittig */
  body footer ul{
    columns:1!important;
    column-count:1!important;
    column-gap:0!important;
    display:block!important;
    text-align:center!important;
  }
  body footer ul li{
    break-inside:auto;
    text-align:center!important;
    width:100%;
  }

  /* (2) Das Porträt im Zitat-Block wie im Ansprechpartner-Block */
  .ssx-zitat-bild{
    width:172px!important;
    height:241px!important;
    max-width:172px!important;
    border-radius:20px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .ssx-zitat-bild img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    border-radius:20px!important;
    object-fit:cover!important;
    object-position:50% 12%!important;
  }
}
/* === ENDE NACHTRAG 129 === */

/* === NACHTRAG 130: Manuels Porträt überall im Hochformat ===
 * Nachtrag 129 blieb am Zitat-Block der Startseite wirkungslos. Die Regelsuche zeigt,
 * warum — eine ältere Regel greift mit höherer Spezifität auf JEDEN Kasten, der Manuels
 * Foto enthält:
 *     body main section :is(div,figure):has(> img[src*="manuel-rutsch"])
 *         width:150px; height:150px; border-radius:50% !important        (0,1,5)
 * Meine `.ssx-zitat-bild` liegt bei 0,1,0 und verliert, egal wie spät sie steht.
 * Sie stammt aus der Zeit, als runde Porträts gewünscht waren — genau diesen engen
 * Ausschnitt hat Manuel heute zweimal beanstandet („mein Kopf muss ja besser zu sehen
 * sein", „beim Bild hast Du auch nicht gemacht").
 * Gleicher Bau plus ein :not() hebt die Spezifität über die alte Regel.
 */
@media (max-width:767px){
  body main section :is(div,figure):has(> img[src*="manuel-rutsch"]):not([data-ssx-rund]){
    width:172px!important;
    height:241px!important;
    max-width:172px!important;
    border-radius:20px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }
  body main section :is(div,figure):has(> img[src*="manuel-rutsch"]):not([data-ssx-rund]) > img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    border-radius:20px!important;
    object-fit:cover!important;
    object-position:50% 12%!important;
  }
}
/* === ENDE NACHTRAG 130 === */

/* === NACHTRAG 131: alle Team-Porträts im selben Format ===
 * Nach Nachtrag 130 stand Manuels Foto im Hochformat, Florians daneben weiter als
 * 150 × 150 — und sein RAHMEN war rund (50 %), das Bild darin eckig (20 px). Gemessen
 * haben beide Vorlagen dasselbe Format: 640 × 896, Verhältnis 0,71. Beide werden im
 * Quadrat also gleich stark beschnitten.
 * Zwei Ansprechpartner-Blöcke, die unterschiedlich aussehen, fallen sofort auf. Deshalb
 * gilt die Regel jetzt für jedes Bild aus assets/team/ statt nur für Manuels.
 */
@media (max-width:767px){
  body main section :is(div,figure):has(> img[src*="/team/"]):not([data-ssx-rund]),
  body main :is(div,figure).ssx-ap-bildrahmen:not([data-ssx-rund]){
    width:172px!important;
    height:241px!important;
    max-width:172px!important;
    border-radius:20px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }
  body main section :is(div,figure):has(> img[src*="/team/"]):not([data-ssx-rund]) > img,
  body main :is(div,figure).ssx-ap-bildrahmen:not([data-ssx-rund]) > img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    border-radius:20px!important;
    object-fit:cover!important;
    object-position:50% 12%!important;
  }
}
/* === ENDE NACHTRAG 131 === */

/* === NACHTRAG 132: die Team-Karten waren schon richtig — Rücknahme aus 131 ===
 * Sichtprüfung nach Nachtrag 131 (die Messung meldete „alles 172 × 241, sauber"):
 * Auf /team lagen Name und Funktion plötzlich MITTEN auf dem Foto statt darunter.
 *
 * Ursache war meine eigene Regel. Die Team-Karten haben einen Bildrahmen
 *     div.relative.aspect-[3/4].overflow-hidden
 * der die volle Kartenbreite füllt (358 × 477) — dort war das Hochformat also längst
 * richtig, und der Name liegt als Überblendung bewusst über dem unteren Bildrand.
 * Nachtrag 131 hat diesen Rahmen auf 172 × 241 zusammengedrückt; damit saß die
 * Überblendung mitten im Bild.
 *
 * Manuels Beanstandung galt den RUNDEN Porträts in den Ansprechpartner- und
 * Zitat-Blöcken, nicht dem Team-Raster. Wer ein `aspect-`-Verhältnis gesetzt hat, hat
 * sein Format bereits entschieden — da bleibt der Nachtrag draußen.
 */
@media (max-width:767px){
  body main section :is(div,figure)[class*="aspect-"]:has(> img[src*="/team/"]),
  body main :is(div,figure)[class*="aspect-"]:has(> img[src*="/team/"]){
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    border-radius:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body main :is(div,figure)[class*="aspect-"]:has(> img[src*="/team/"]) > img{
    border-radius:0!important;
    /* object-position bleibt, was die Vorlage vorgibt (`object-top`). Ein eigener Wert
     * waere hier eine Gestaltungsaenderung an einer Stelle, die niemand beanstandet hat. */
  }
}
/* === ENDE NACHTRAG 132 === */

/* === NACHTRAG 133: Siegel und Bewertungen in der Fußzeile ===
 * Manuel am 19.08.2026: „Können wir in die Fußzeile noch die ISO beide einbauen, AVPQ,
 * DMB, IHK und Google 5 Sterne, ProvenExpert und kununu."
 * Vorbild auf seinen Hinweis: prosicherheit.de führt in der Fußzeile eine Collage aus
 * Zertifikaten und Verbandslogos. Der Platz ist auch inhaltlich richtig — wer bis ans
 * Seitenende liest, wägt ab; dort trägt ein Beleg mehr als mitten im Text.
 * Markup kommt aus `ssx-fuss-siegel.js`, alle Zahlen stammen belegt aus der
 * Vertrauensleiste (Google 5,0/54, ProvenExpert 5,0/29, kununu 4,8/7).
 * Anders als die Nachträge 115–132 gilt dieser Block auf ALLEN Bildschirmgrößen — er
 * ergänzt Inhalt, statt eine Handy-Ausrichtung zu korrigieren.
 */
.ssx-fs{
  padding:30px 16px 4px;
  text-align:center;
}
.ssx-fs-bew{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px 14px;
  margin-bottom:20px;
}
.ssx-fs-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  text-decoration:none;
  transition:opacity .3s;
}
a.ssx-fs-note:hover{ opacity:.75; }
.ssx-fs-stern{ color:#C4B08C; font-size:13px; line-height:1; }
.ssx-fs-zahl{ color:rgba(255,255,255,.88); font-weight:700; }
.ssx-fs-quelle{ color:rgba(255,255,255,.45); }
.ssx-fs-punkt{ color:rgba(255,255,255,.22); }
.ssx-fs-siegel{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px;
}
.ssx-fs-bild{
  height:40px;
  width:auto;
  max-width:104px;
  object-fit:contain;
  /* Die Siegel sind für hellen Grund gemacht. In der dunklen Fußzeile werden sie
   * aufgehellt und zurückgenommen, damit sie belegen, ohne zu schreien. */
  opacity:.72;
  filter:grayscale(1) brightness(1.75) contrast(.9);
  transition:opacity .3s, filter .3s;
}
.ssx-fs-bild:hover{
  opacity:1;
  filter:grayscale(0) brightness(1);
}
@media (max-width:767px){
  .ssx-fs{ padding:24px 12px 2px; }
  .ssx-fs-bew{ gap:6px 10px; margin-bottom:16px; font-size:12px; }
  .ssx-fs-note{ font-size:12px; }
  .ssx-fs-siegel{ gap:14px; }
  .ssx-fs-bild{ height:32px; max-width:84px; }
}
/* === ENDE NACHTRAG 133 === */

/* Nachtrag 133, Nachbesserung: Die Bewertungen standen unsichtbar in der Fußzeile.
 * Gemessen: Der Google-Eintrag ist ein <a> und erbt `footer a{color:rgba(255,255,255,.82)}`
 * — sichtbar. ProvenExpert und kununu sind <span> und erbten die dunkle Grundfarbe
 * rgb(45,52,54), also fast Schwarz auf fast Schwarz. Ein Beleg, den niemand sieht, ist
 * kein Beleg. Farbe deshalb am Block selbst gesetzt, nicht geerbt. */
.ssx-fs,
.ssx-fs .ssx-fs-bew,
.ssx-fs .ssx-fs-note,
.ssx-fs .ssx-fs-note span{
  color:rgba(255,255,255,.62)!important;
}
.ssx-fs .ssx-fs-stern{ color:#C4B08C!important; }
.ssx-fs .ssx-fs-zahl{ color:rgba(255,255,255,.90)!important; }
.ssx-fs .ssx-fs-quelle{ color:rgba(255,255,255,.48)!important; }
.ssx-fs .ssx-fs-punkt{ color:rgba(255,255,255,.22)!important; }

/* Nachtrag 133, zweite Nachbesserung: Der Block lag UNTER dem Hintergrundbild.
 * `document.elementFromPoint()` mitten auf der Bewertungszeile lieferte nicht meinen
 * Text, sondern `div.absolute inset-0` — das Hintergrundbild der Fußzeile. Die übrigen
 * Fußzeilen-Inhalte sitzen in einem Container mit `z-10` und liegen deshalb darüber;
 * der eingefügte Block hatte keinen Stapelwert und verschwand dahinter.
 * Sichtbar war nur der Google-Eintrag, weil Links eine eigene Farbe erben — der Rest
 * war da, messbar, und trotzdem unsichtbar. Genau die Art Fehler, die eine Messung
 * allein nicht findet: Geometrie und Farbe stimmten, die Stapelfolge nicht. */
.ssx-fs{
  position:relative;
  z-index:10;
}

/* Nachtrag 133, dritte Nachbesserung — nach der Sichtprüfung des Blocks:
 *  · Der Trennpunkt „·" rutschte beim Umbruch ans Zeilenende und stand dort allein.
 *    Punkte raus, Abstand rein: bei umbrechenden Zeilen ist das immer sauber.
 *  · Die Siegel sind für hellen Grund gezeichnet. Vier haben einen durchsichtigen
 *    Hintergrund und wurden von der Aufhellung grau; das DMB-Logo bringt einen weißen
 *    Kasten mit und stach als einziges heraus. Statt fünf Bilder unterschiedlich zu
 *    behandeln, bekommen alle dieselbe helle Kachel — so liest sich jedes Siegel wie
 *    gedruckt, und die Reihe wirkt als Einheit. */
.ssx-fs .ssx-fs-punkt{ display:none!important; }
.ssx-fs .ssx-fs-bew{ gap:10px 22px; }

.ssx-fs .ssx-fs-bild{
  height:46px;
  max-width:none;
  width:auto;
  padding:7px 10px;
  background:rgba(255,255,255,.94);
  border-radius:7px;
  opacity:1;
  filter:none;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.ssx-fs .ssx-fs-bild:hover{ opacity:1; filter:none; background:#fff; }
.ssx-fs .ssx-fs-siegel{ gap:12px; }
@media (max-width:767px){
  .ssx-fs .ssx-fs-bild{ height:40px; padding:6px 8px; }
  .ssx-fs .ssx-fs-siegel{ gap:10px; }
}

/* Nachtrag 133, letzter Schliff: die Sterne in Markengold statt Grau. */
.ssx-fs .ssx-fs-bew .ssx-fs-note .ssx-fs-stern{ color:#C4B08C!important; }

/* === NACHTRAG 134: Logos in der Bewertungszeile ===
 * Manuel am 19.08.2026: „Ziehe dir die Bilder von Google Bilder oder Ähnliches passende."
 * Nach meinem Hinweis auf die markenrechtliche Seite hat er den Einbau bestätigt — das
 * ist seine Entscheidung, ich setze sie um. Die Dateien liegen LOKAL unter
 * /assets/bewertungen/ (Google-„G" und kununu-Wortmarke von Wikimedia Commons, das
 * ProvenExpert-Zeichen von deren eigenem Server); nichts wird von fremden Servern
 * nachgeladen, weder beim Besucher noch beim Bauen.
 *
 * Alle drei bekommen dieselbe helle Kachel wie die Zertifikate darunter — nicht aus
 * Gestaltungslaune: Die kununu-Wortmarke ist schwarz auf durchsichtigem Grund und wäre
 * in der dunklen Fußzeile schlicht unsichtbar.
 *
 * Bewertungszahl von ProvenExpert am 19.08.2026 am Profil gegengeprüft:
 * provenexpert.com/de-de/staffsec-solution-gmbh/ meldet 5,00 aus 29 — deckt sich.
 */
.ssx-fs .ssx-fs-note{
  gap:8px;
  padding:5px 10px 5px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
a.ssx-fs-note:hover{
  background:rgba(255,255,255,.10);
  opacity:1;
}
.ssx-fs .ssx-fs-logo{
  height:22px;
  width:auto;
  max-width:74px;
  object-fit:contain;
  background:#fff;
  padding:3px 6px;
  border-radius:999px;
  flex:0 0 auto;
}
.ssx-fs .ssx-fs-marke{
  color:rgba(255,255,255,.72)!important;
  font-weight:600;
}
.ssx-fs .ssx-fs-quelle{
  color:rgba(255,255,255,.42)!important;
}
@media (max-width:767px){
  .ssx-fs .ssx-fs-note{ gap:6px; padding:4px 8px 4px 4px; }
  .ssx-fs .ssx-fs-logo{ height:19px; max-width:62px; }
}
/* === ENDE NACHTRAG 134 === */

/* === NACHTRAG 135: Hintergrund für „Was Kunden sagen" ===
 * Manuel am 19.08.2026: „den Hintergrund bei was Kunden sagen nochmal ändern. Also das
 * muss irgendwie noch passender sein. Irgendwas da noch im Hintergrund packen. Das ist
 * eigentlich nur so ein schwarzer Block."
 *
 * Gemessen war dort nur `radial-gradient(… rgba(196,176,140,0.1) …)` auf schwarzem
 * Grund — auf dem Handy praktisch unsichtbar, also tatsächlich ein schwarzer Kasten.
 * Jetzt liegt `team-besprechung.webp` darunter: Menschen im Gespräch, das passt zu
 * Kundenstimmen besser als jedes Objektmotiv. Stark abgedunkelt und leicht unscharf,
 * damit die weißen Zitatkarten obenauf lesbar bleiben — das Bild trägt Tiefe bei,
 * ohne mit dem Text zu konkurrieren.
 */
.ssx-st{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.ssx-st::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("/assets/staffsec/team-besprechung.webp");
  background-size:cover;
  background-position:50% 35%;
  filter:blur(2px) grayscale(.35);
  transform:scale(1.06);
  opacity:.30;
}
.ssx-st::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  /* Zwei Lagen: oben und unten dunkel für den Übergang zu den Nachbarabschnitten,
   * in der Mitte ein warmer Goldschimmer wie im übrigen Auftritt. */
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(196,176,140,.16) 0%, rgba(196,176,140,0) 62%),
    linear-gradient(180deg, rgba(13,15,18,.94) 0%, rgba(13,15,18,.80) 32%,
                            rgba(13,15,18,.82) 68%, rgba(13,15,18,.96) 100%);
}
.ssx-st-innen{ position:relative; z-index:1; }
@media (max-width:767px){
  /* Am Handy stehen die Karten dichter — etwas mehr Abdunklung, damit der Satz ruhig bleibt */
  .ssx-st::before{ opacity:.24; }
}
/* === ENDE NACHTRAG 135 === */

/* Nachtrag 135, Nachbesserung: Nach der Sichtprüfung war der Abschnitt immer noch
 * beinahe schwarz — Bild bei 24 % Deckkraft unter einem Verlauf mit bis zu 96 %
 * Abdunklung ist rechnerisch da und optisch nicht. Der Sinn war ja, dass man etwas
 * sieht. Bild deutlich heller, Verlauf durchlässiger; die Zitatkarten sind weiß und
 * bleiben ohnehin lesbar, der Kopftext behält oben genug Abdunklung. */
.ssx-st::before{
  opacity:.58!important;
  filter:blur(1px) grayscale(.2)!important;
}
.ssx-st::after{
  background:
    radial-gradient(85% 65% at 50% 0%, rgba(196,176,140,.20) 0%, rgba(196,176,140,0) 66%),
    linear-gradient(180deg, rgba(13,15,18,.88) 0%, rgba(13,15,18,.52) 30%,
                            rgba(13,15,18,.56) 70%, rgba(13,15,18,.90) 100%)!important;
}
@media (max-width:767px){
  .ssx-st::before{ opacity:.50!important; }
}

/* === NACHTRAG 136: Logos auch in der oberen Leiste ===
 * Manuel am 19.08.2026, 23:10: „das ist super, das was du in der Fußzeile gemacht hast
 * auch gerne oben in der Leiste, das sieht gut aus!"
 *
 * Gemessen war die Leiste am Handy fast leer: Von neun Bausteinen standen sieben auf
 * display:none — ProvenExpert, kununu, die Siegelreihe und ausgerechnet das Label
 * „24/7 Hotline", das Manuel eine Stunde vorher bestellt hatte. Sichtbar waren nur
 * „5,0 ★ Google-Bewertungen · 54" (168 px) und die Nummer (145 px); für mehr war bei
 * 390 px kein Platz.
 * Die Logos lösen genau das: 19 px statt 110 px für die Herkunft. Dadurch passen am
 * Handy jetzt alle drei Bewertungen UND „24/7" in dieselbe Zeile.
 */
.ssx-leiste-logo{
  height:17px;
  width:auto;
  max-width:56px;
  object-fit:contain;
  background:#fff;
  padding:2px 5px;
  border-radius:999px;
  margin-right:6px;
  flex:0 0 auto;
  vertical-align:middle;
}
.ssx-leiste-kurz{ display:none; }

@media (max-width:767px){
  /* Alle drei Bewertungen zeigen, aber nur als Logo + Note + Anzahl */
  .ssx-leiste .ssx-leiste-bew,
  .ssx-leiste .ssx-leiste-bew.ssx-leiste-pe,
  .ssx-leiste .ssx-leiste-bew.ssx-leiste-ku{
    display:inline-flex!important;
    align-items:center;
    gap:3px;
  }
  /* Der ausgeschriebene Name weicht der Kurzform — er bleibt im Markup für Vorleser */
  .ssx-leiste .ssx-leiste-quelle{
    position:absolute!important;
    width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .ssx-leiste .ssx-leiste-kurz{
    display:inline!important;
    position:static!important;
    width:auto!important; height:auto!important; overflow:visible!important;
    clip:auto!important;
    color:rgba(255,255,255,.42);
  }
  /* „24/7 Hotline" wieder sichtbar — dafür war der Platz gedacht */
  .ssx-leiste .ssx-leiste-hot{
    display:inline!important;
    font-size:11px;
    letter-spacing:.02em;
    margin-right:5px;
    color:rgba(196,176,140,.92);
  }
  .ssx-leiste .ssx-leiste-logo{ height:15px; max-width:46px; padding:2px 4px; margin-right:4px; }
  .ssx-leiste-innen{ gap:8px; }
  /* Die Siegelreihe bleibt am Handy aus — dafür ist die Zeile zu schmal, und sie steht
   * seit Nachtrag 133 vollständig in der Fußzeile. */
}
/* === ENDE NACHTRAG 136 === */

/* Nachtrag 136, Nachbesserung — nach der Messung:
 *  · Am Handy liefen 543 px Inhalt in eine 390 px breite Leiste. Drei Bewertungen plus
 *    „24/7 Hotline" plus Nummer passen dort nicht, auch mit Logos nicht.
 *    Entscheidung: Oben stehen die beiden KUNDENbewertungen (Google und ProvenExpert,
 *    beide 5,0). kununu ist eine Arbeitgeberbewertung — die gehört zur Karriereseite und
 *    steht vollständig in der Fußzeile, wo Platz ist.
 *  · „24/7 Hotline" wird am Handy zu „24/7": Das Wort Hotline steht ohnehin daneben als
 *    Telefonsymbol samt Nummer, doppelt gemoppelt kostet nur Breite.
 */
@media (max-width:767px){
  .ssx-leiste .ssx-leiste-bew.ssx-leiste-ku,
  .ssx-leiste .ssx-leiste-strich-ku{
    display:none!important;
  }
  .ssx-leiste .ssx-leiste-hot{
    font-size:0!important;           /* Wortlaut aus, Kurzform rein */
    margin-right:4px;
  }
  .ssx-leiste .ssx-leiste-hot::after{
    content:"24/7";
    font-size:11px;
    letter-spacing:.03em;
    color:rgba(196,176,140,.92);
  }
  .ssx-leiste-innen{ gap:7px; }
  .ssx-leiste .ssx-leiste-bew{ gap:2px; }
}

/* Nachtrag 136, zweite Nachbesserung: Auch zwei Bewertungen sind am Handy zu viel —
 * 373 px Inhalt plus Abstände und Innenrand ergaben 411 px in einer 390-px-Leiste.
 * Statt alles kleinzuquetschen steht oben am Handy die bekannteste Quelle mit Logo,
 * Note und Anzahl; ProvenExpert und kununu stehen vollständig in der Fußzeile.
 * Eine Zeile, die man in einem Blick liest, wirkt stärker als drei, die sich drängeln. */
@media (max-width:767px){
  .ssx-leiste .ssx-leiste-bew.ssx-leiste-pe,
  .ssx-leiste .ssx-leiste-strich-pe{
    display:none!important;
  }
  .ssx-leiste-innen{
    gap:10px;
    padding-left:12px;
    padding-right:12px;
  }
}

/* === NACHTRAG 137: Kopfleiste auf eine Linie, Einsatzgebiete neben Unternehmen ===
 * Beides von Manuel am 20.08.2026 am Rechner gemeldet.
 *
 * (1) „Das Google-Logo, 5 Sterne und Google-Bewertung 54 ist nicht exakt in einer Reihe."
 *     Gemessen, Mitten der vier Teile: Logo 21 px · Zahl 24 · Stern 25 · Text 26.
 *     Das Logo sitzt also fünf Pixel höher. Ursache ist `align-items:baseline` am
 *     Bewertungsblock: Bei Grundlinien-Ausrichtung wird ein Bild mit seiner Unterkante
 *     auf die Schriftlinie gesetzt und rutscht dadurch nach oben. Mit `center` sitzen
 *     alle vier auf einer Mittellinie — auch bei drei verschiedenen Schriftgrößen
 *     (17 px Note, 12 px Stern, 11 px Quelle).
 *
 * (2) „Packen wir die Einsatzgebiete nicht rechts neben Unternehmen, sieht doch besser
 *     aus, oder?" — Ja. Gemessen: Das Fußzeilen-Raster hat SECHS Spalten, aber nur FÜNF
 *     Kinder; eine Spalte bleibt leer. Das fünfte Kind ist 352 × 659 px und trägt beide
 *     Überschriften untereinander. Dadurch ragt rechts eine 659 px hohe Säule herunter,
 *     während unter „Mobil" (145 px) und „Personal" (216 px) große Leerflächen stehen.
 *     Jetzt teilt sich dieses Kind in zwei Spalten: links Unternehmen, rechts
 *     Einsatzgebiete. Die Höhe der Fußzeile sinkt dadurch deutlich.
 */
@media (min-width:1024px){
  /* (1) Kopfleiste */
  .ssx-leiste-bew{
    align-items:center!important;
  }
  .ssx-leiste-logo{ vertical-align:middle; }

  /* (2) Der Block mit Unternehmen UND Einsatzgebieten wird zweispaltig.
   *     Die sechs Kinder sind: h3 · Strich · Liste  (Unternehmen)
   *                            h3 · Strich · Liste  (Einsatzgebiete)
   *     Deshalb die ersten drei fest in Spalte 1, die letzten drei in Spalte 2 —
   *     ein automatischer Fluss würde sie zeilenweise mischen. */
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3){
    display:grid!important;
    grid-template-columns:minmax(150px,auto) minmax(190px,auto);
    column-gap:36px;
    row-gap:0;
    align-items:start;
    width:auto;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(1),
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(2),
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(3){
    grid-column:1;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(4),
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(5),
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6){
    grid-column:2;
    grid-row:auto;
  }
  /* Die zweite Überschrift beginnt oben in ihrer Spalte, nicht unter der ersten Liste */
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(4){
    grid-row:1;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(5){
    grid-row:2;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6){
    grid-row:3;
  }
}
/* === ENDE NACHTRAG 137 === */

/* Nachtrag 137, Nachbesserung — nach der Sichtprüfung:
 *  · „EINSATZGEBIETE" stand 31 px tiefer als die vier anderen Überschriften, weil die
 *    Überschrift einen eigenen oberen Abstand mitbringt, den sie in der alten Anordnung
 *    (untereinander) auch brauchte. Nebeneinander stört er.
 *  · Die rechte Spalte war mit 190 px zu schmal: „Mecklenburg-Vorpommern",
 *    „Baden-Württemberg" und „Nordrhein-Westfalen" brachen um. Platz ist da — die
 *    Fußzeile endete bei 1340 px auf einem 1440er Bildschirm.
 */
@media (min-width:1024px){
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3){
    grid-template-columns:minmax(140px,auto) minmax(250px,auto);
    column-gap:30px;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(4){
    margin-top:0!important;
  }
  /* Die Länderliste darf die volle Spaltenbreite nutzen */
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6){
    width:100%;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6) li{
    white-space:nowrap;
  }
}

/* Nachtrag 137, zweite Nachbesserung: Das `white-space:nowrap` war falsch gedacht.
 * Die Länderliste steht selbst in zwei Spalten; ohne Umbruch laufen lange Namen
 * („Neumünster (Hauptsitz)", „Mecklenburg-Vorpommern") in die Nachbarspalte und
 * überlappen dort den Text. Umbrechen ist hier richtig — dafür bekommt die Spalte
 * mehr Breite, damit möglichst wenig umbricht. */
@media (min-width:1024px){
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6) li{
    white-space:normal;
  }
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3){
    grid-template-columns:minmax(130px,auto) minmax(300px,auto);
    column-gap:26px;
  }
  /* Etwas Luft zwischen den beiden Länderspalten, damit nichts aneinanderstößt */
  footer [class*="grid-cols-6"] > div:nth-child(5):has(h3 + * + * + h3) > :nth-child(6){
    column-gap:20px;
  }
}

/* Nachtrag 137, dritte Nachbesserung: Weil die Einsatzgebiete jetzt eine eigene Spalte
 * beanspruchen, ist die erste Spalte enger geworden — dort brach plötzlich die
 * Telefonnummer um („+49 4321 78 33 / 590") und die Berliner Anschrift auf vier Zeilen.
 * Eine umbrochene Rufnummer liest sich falsch; sie bekommt ihre Breite zurück. */
@media (min-width:1024px){
  footer [class*="grid-cols-6"] > div:nth-child(1){
    min-width:230px;
  }
  footer a[href^="tel:"],
  footer a[href^="mailto:"]{
    white-space:nowrap;
  }
}

/* === NACHTRAG 138: zwei Feinheiten am Handy ===
 * Manuel am 20.08.2026 mit zwei Bildern.
 *
 * (1) „Das Zeichen mit der Zahl ist nicht auf einer Höhe." — Gemessen in der Werte-Karte:
 *     Icon-Kasten 48 px hoch, Mitte bei −11540; die Ziffer 40 px hoch, Mitte bei −11534.
 *     Sechs Pixel Versatz. `align-items:center` ist zwar gesetzt, richtet aber die
 *     KÄSTEN aus — und die Ziffer sitzt in ihrer 40-px-Zeilenbox nicht mittig, weil
 *     Ober- und Unterlängen der Schrift mitgerechnet werden. Gleiche Zeilenhöhe wie das
 *     Icon löst es sauber.
 *
 * (2) „Zwei Ausbildungsberufe, da unten der Text ist nicht zentriert." — Stimmt:
 *     Kicker und Titel stehen auf `center`, der Fließtext auf `start`. Die Karte liegt
 *     in einem Laufband (`shrink-0 w-[380px]`), und Laufbänder sind von der
 *     Handy-Grundhaltung aus Nachtrag 116 ausgenommen — deshalb greift dort die ältere
 *     Regel `p{text-align:left}`. Für diese Karten gilt jetzt dieselbe Haltung wie im
 *     übrigen Inhalt.
 */
@media (max-width:767px){
  /* (1) Ziffer und Icon auf eine Mittellinie */
  main [class*="items-center"] > [class*="text-[40px]"],
  main [class*="items-center"] > [class*="text-[44px]"],
  main [class*="items-center"] > [class*="text-5xl"]{
    line-height:48px!important;
    display:flex;
    align-items:center;
  }

  /* (2) Text in den Nachweis-Karten des Laufbands zentrieren */
  main [class*="shrink-0"][class*="rounded-2xl"] p,
  main [class*="shrink-0"][class*="rounded-2xl"] :is(div,span){
    text-align:center!important;
  }
}
/* === ENDE NACHTRAG 138 === */

/* Nachtrag 138, Nachbesserung: Die gleiche Zeilenhöhe reichte nicht.
 * Gemessen: Beide Kästen sind exakt 48 px hoch, ihre Mitten liegen trotzdem 6 px
 * auseinander. Ursache ist ein `margin-bottom:12px` am Icon-Kasten — bei
 * `align-items:center` zählt der Rand zur Box, die Mitte verschiebt sich um die halbe
 * Randhöhe: genau 6 px. Der Rand stammt aus der gestapelten Ansicht (Icon über Text);
 * stehen Icon und Ziffer nebeneinander, gehört er weg. */
@media (max-width:767px){
  main [class*="items-center"] > [class*="w-12"][class*="h-12"][class*="rounded-2xl"],
  main [class*="items-center"] > [class*="w-14"][class*="h-14"][class*="rounded-2xl"]{
    margin-bottom:0!important;
  }
}