@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/archivo-vietnamese-wght-normal.XAtsl5Q_.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/archivo-latin-ext-wght-normal.C4zznr8T.woff2) format("woff2-variations");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:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/archivo-latin-wght-normal.E0tuGl4L.woff2) format("woff2-variations");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}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--spacing:.25rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing) * 0)}.z-50{z-index:50}.col-wide{grid-column:auto}.m-0{margin:calc(var(--spacing) * 0)}.section-container{width:100%;max-width:var(--container-max);padding-inline:var(--gutter);margin-inline:auto}.prose-bsik{color:var(--tw-prose-body);max-width:65ch}.prose-bsik :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-bsik :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.6}.prose-bsik :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline}.prose-bsik :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose-bsik :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose-bsik :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose-bsik :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose-bsik :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose-bsik :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose-bsik :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose-bsik :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose-bsik :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose-bsik :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose-bsik :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose-bsik :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose-bsik :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose-bsik :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose-bsik :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose-bsik :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.25em;font-weight:600}.prose-bsik :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose-bsik :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em;font-style:italic;font-weight:500}.prose-bsik :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose-bsik :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose-bsik :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:0;margin-bottom:.888889em;font-size:2.25em;font-weight:800;line-height:1.11111}.prose-bsik :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:900}.prose-bsik :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:2em;margin-bottom:1em;font-size:1.5em;font-weight:700;line-height:1.33333}.prose-bsik :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:800}.prose-bsik :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:600;line-height:1.6}.prose-bsik :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose-bsik :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.5}.prose-bsik :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose-bsik :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose-bsik :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose-bsik :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose-bsik :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose-bsik :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose-bsik :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose-bsik :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose-bsik :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose-bsik :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose-bsik :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose-bsik :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose-bsik :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-size:.875em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose-bsik :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;background-color:#0000;border-width:0;border-radius:0;padding:0}.prose-bsik :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose-bsik :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose-bsik :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){table-layout:auto;width:100%;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.71429}.prose-bsik :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose-bsik :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);vertical-align:bottom;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em;font-weight:600}.prose-bsik :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose-bsik :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose-bsik :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose-bsik :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose-bsik :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose-bsik :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose-bsik :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-bsik :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);margin-top:.857143em;font-size:.875em;line-height:1.42857}.prose-bsik{--tw-prose-body:oklch(37.3% .034 259.733);--tw-prose-headings:oklch(21% .034 264.665);--tw-prose-lead:oklch(44.6% .03 256.802);--tw-prose-links:oklch(21% .034 264.665);--tw-prose-bold:oklch(21% .034 264.665);--tw-prose-counters:oklch(55.1% .027 264.364);--tw-prose-bullets:oklch(87.2% .01 258.338);--tw-prose-hr:oklch(92.8% .006 264.531);--tw-prose-quotes:oklch(21% .034 264.665);--tw-prose-quote-borders:oklch(92.8% .006 264.531);--tw-prose-captions:oklch(55.1% .027 264.364);--tw-prose-kbd:oklch(21% .034 264.665);--tw-prose-kbd-shadows:oklab(21% -.00316127 -.0338527/.1);--tw-prose-code:oklch(21% .034 264.665);--tw-prose-pre-code:oklch(92.8% .006 264.531);--tw-prose-pre-bg:oklch(27.8% .033 256.848);--tw-prose-th-borders:oklch(87.2% .01 258.338);--tw-prose-td-borders:oklch(92.8% .006 264.531);--tw-prose-invert-body:oklch(87.2% .01 258.338);--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:oklch(70.7% .022 261.325);--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:oklch(70.7% .022 261.325);--tw-prose-invert-bullets:oklch(44.6% .03 256.802);--tw-prose-invert-hr:oklch(37.3% .034 259.733);--tw-prose-invert-quotes:oklch(96.7% .003 264.542);--tw-prose-invert-quote-borders:oklch(37.3% .034 259.733);--tw-prose-invert-captions:oklch(70.7% .022 261.325);--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:#ffffff1a;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:oklch(87.2% .01 258.338);--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:oklch(44.6% .03 256.802);--tw-prose-invert-td-borders:oklch(37.3% .034 259.733);font-size:1rem;line-height:1.75}.prose-bsik :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-bsik :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose-bsik :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose-bsik :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-bsik :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose-bsik :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose-bsik :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose-bsik :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose-bsik :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-bsik :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-bsik :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose-bsik :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-bsik :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-bsik :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-bsik :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-bsik :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.571429em;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em}.prose-bsik :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-bsik :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-bsik :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose-bsik :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-bsik :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-bsik{--tw-prose-body:var(--color-ink-muted);--tw-prose-headings:var(--color-ink);--tw-prose-bold:var(--color-ink);--tw-prose-bullets:var(--color-accent);--tw-prose-counters:var(--color-accent-700);--tw-prose-hr:var(--color-divider);--tw-prose-quote-borders:var(--color-accent);max-width:none}.prose-bsik h1,.prose-bsik h2,.prose-bsik h3,.prose-bsik h4,.prose-bsik h5,.prose-bsik h6{font-family:var(--font-heading);font-weight:800}.prose-bsik a{color:var(--color-accent-700);text-underline-offset:3px}.prose-bsik a:hover{color:var(--color-accent)}.prose-bsik code{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3\.5{margin-bottom:calc(var(--spacing) * 3.5)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.ml-auto{margin-left:auto}.btn-secondary{text-align:left;font-family:var(--font-heading);padding:var(--btn-pad-y) var(--btn-pad-x);color:var(--color-ink);border:2px solid var(--color-line-strong);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);background:0 0;border-radius:0;justify-content:flex-start;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.btn-secondary:hover{background:var(--color-ink);color:var(--color-bg)}.btn-secondary:active{background:var(--color-neutral-800);color:var(--color-bg)}.btn-ink{text-align:left;font-family:var(--font-heading);padding:var(--btn-pad-y) var(--btn-pad-x);color:var(--color-bg);background:var(--color-ink);cursor:pointer;transition:background var(--duration-fast) var(--ease-default);border:2px solid #0000;border-radius:0;justify-content:flex-start;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.btn-ink:hover{background:var(--color-neutral-800);color:var(--color-bg)}.btn-ink:active{background:var(--color-neutral-900)}.btn-primary{text-align:left;font-family:var(--font-heading);padding:var(--btn-pad-y) var(--btn-pad-x);color:var(--color-bg);background:var(--color-accent);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);border:2px solid #0000;border-radius:0;justify-content:flex-start;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.btn-primary:hover{background:var(--color-accent-600);color:var(--color-bg)}.btn-primary:active{background:var(--color-accent-700)}.section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);font-size:12px;font-weight:600;display:block}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[16ch\]{max-width:16ch}.max-w-\[20ch\]{max-width:20ch}.max-w-\[24em\]{max-width:24em}.max-w-\[26em\]{max-width:26em}.max-w-\[30em\]{max-width:30em}.max-w-\[32em\]{max-width:32em}.max-w-\[34em\]{max-width:34em}.max-w-\[40em\]{max-width:40em}.max-w-xl{max-width:var(--container-xl)}.min-w-7{min-width:calc(var(--spacing) * 7)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-4\.5{gap:calc(var(--spacing) * 4.5)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7{gap:calc(var(--spacing) * 7)}.gap-9{gap:calc(var(--spacing) * 9)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-5{column-gap:calc(var(--spacing) * 5)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-7{column-gap:calc(var(--spacing) * 7)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.card{background:var(--color-surface);box-shadow:none;border:0;border-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.p-0{padding:calc(var(--spacing) * 0)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.section-y{padding-block:var(--spacing-section)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pb-12{padding-bottom:calc(var(--spacing) * 12)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-heading{font-family:var(--font-heading)}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.whitespace-nowrap{white-space:nowrap}.text-primary-500{color:var(--color-primary-500)}.text-primary-600{color:var(--color-primary-600)}.text-primary-700{color:var(--color-primary-700)}.uppercase{text-transform:uppercase}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.focus-ring{outline:none}.focus-ring:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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,)}.grayscale-photo{filter:grayscale()contrast(1.08)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.grid-cell{border-right:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}.grid-frame{border-top:2px solid var(--color-divider);border-left:2px solid var(--color-divider)}@media(hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:text-\[var\(--color-accent\)\]:hover{color:var(--color-accent)}.hover\:text-\[var\(--color-accent-700\)\]:hover{color:var(--color-accent-700)}.hover\:text-\[var\(--color-ink\)\]:hover{color:var(--color-ink)}.hover\:text-primary-800:hover{color:var(--color-primary-800)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:absolute:focus{position:absolute}.focus\:top-2:focus{top:calc(var(--spacing) * 2)}.focus\:left-2:focus{left:calc(var(--spacing) * 2)}.focus\:z-\[100\]:focus{z-index:100}.focus\:btn-primary:focus{text-align:left;font-family:var(--font-heading);padding:var(--btn-pad-y) var(--btn-pad-x);color:var(--color-bg);background:var(--color-accent);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);border:2px solid #0000;border-radius:0;justify-content:flex-start;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.focus\:btn-primary:focus:hover{background:var(--color-accent-600);color:var(--color-bg)}.focus\:btn-primary:focus:active{background:var(--color-accent-700)}@media(min-width:40rem){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:p-8{padding:calc(var(--spacing) * 8)}}@media(min-width:64rem){.lg\:sticky{position:sticky}.lg\:top-24{top:calc(var(--spacing) * 24)}.lg\:ml-0{margin-left:calc(var(--spacing) * 0)}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.5fr_1fr\]{grid-template-columns:1.5fr 1fr}.lg\:gap-6{gap:calc(var(--spacing) * 6)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:80rem){.xl\:inline{display:inline}.xl\:gap-7{gap:calc(var(--spacing) * 7)}.xl\:gap-8{gap:calc(var(--spacing) * 8)}}.dark\:block:where(.dark,.dark *){display:block}.dark\:hidden:where(.dark,.dark *){display:none}.dark\:inline:where(.dark,.dark *){display:inline}}:root{--color-accent:#cf2e2e;--color-accent-100:#fcf2f2;--color-accent-200:#f8e0e0;--color-accent-300:#f2c4c4;--color-accent-400:#e79898;--color-accent-500:#d95858;--color-accent-600:#be2a2a;--color-accent-700:#831d1d;--color-accent-800:#621616;--color-accent-900:#531212;--color-primary-50:#fdf7f7;--color-primary-100:var(--color-accent-100);--color-primary-200:var(--color-accent-200);--color-primary-300:var(--color-accent-300);--color-primary-400:var(--color-accent-400);--color-primary-500:var(--color-accent);--color-primary-600:var(--color-accent-600);--color-primary-700:var(--color-accent-700);--color-primary-800:var(--color-accent-800);--color-primary-900:var(--color-accent-900);--color-neutral-100:#f8f4f4;--color-neutral-200:#eae7e7;--color-neutral-300:#d7d3d3;--color-neutral-400:#bab6b6;--color-neutral-500:#9b9797;--color-neutral-600:#7d7979;--color-neutral-700:#605d5d;--color-neutral-800:#444141;--color-neutral-900:#2d2b2b;--color-bg:#f3f2f2;--color-surface:#eae9e9;--color-surface-2:#e2e0e0;--color-surface-3:#d7d3d3;--color-inverse:#201e1d;--color-line:#201e1d66;--color-line-strong:#201e1d;--color-divider:#201e1d66;--color-ink:#201e1d;--color-ink-muted:#444141;--color-ink-dim:#605d5d;--color-on-inverse:#f3f2f2;--color-success:oklch(55% .13 150);--color-warning:oklch(70% .15 75);--color-error:#ae1800;--font-sans:"Archivo Variable", "Archivo", system-ui, sans-serif;--font-heading:"Archivo Variable", "Archivo", system-ui, sans-serif;--font-mono:ui-monospace, "Cascadia Code", monospace;--spacing-section:clamp(4rem, 8vw, 7rem);--container-max:82.5rem;--gutter:clamp(1.25rem, 4vw, 3rem);--radius-sm:0px;--radius-card:0px;--radius-lg:0px;--radius-pill:0px;--ease-default:cubic-bezier(.2, .7, .2, 1);--ease-rule:cubic-bezier(.65, 0, .2, 1);--duration-fast:.2s;--duration-default:.4s;--shadow-sm:0 1px 2px #2d2b2b24;--shadow-md:0 3px 10px #2d2b2b29;--shadow-lg:0 12px 32px #2d2b2b38;--text-display:clamp(2.75rem, 1.2rem + 6.4vw, 7rem);--text-display--line-height:1;--text-display--letter-spacing:-.03em;--text-h1:clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);--text-h1--line-height:1.02;--text-h1--letter-spacing:-.025em;--text-h2:clamp(2rem, 1.3rem + 2.4vw, 3rem);--text-h2--line-height:1.08;--text-h2--letter-spacing:-.015em;--text-h3:clamp(1.5rem, 1.2rem + 1.1vw, 2rem);--text-lead:clamp(1.125rem, 1rem + .5vw, 1.3125rem);--text-lead--line-height:1.55;color-scheme:light;--btn-pad-y:.875rem;--btn-pad-x:1.125rem}html{font-family:var(--font-sans);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--color-bg);color:var(--color-ink);overflow-wrap:break-word;font-size:15px;line-height:1.55}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.015em;color:var(--color-ink);font-weight:800;line-height:1.12}h3,h4,h5,h6,button,a{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;min-width:0}h1,h2{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}::selection{background-color:var(--color-accent)}@supports (color:color-mix(in lab,red,red)){::selection{background-color:color-mix(in srgb,var(--color-accent) 30%,transparent)}}::selection{color:var(--color-ink)}:focus{outline:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}figcaption{color:var(--color-ink);font-size:11px}@supports (color:color-mix(in lab,red,red)){figcaption{color:color-mix(in srgb,var(--color-ink) 55%,transparent)}}@media(min-width:900px){.col-wide{grid-column:span 2}}.hr{background:var(--color-divider);border:0;height:2px;margin:1rem 0}.field>label{color:var(--color-ink);margin-bottom:5px;font-size:12px;font-weight:600;display:block}@supports (color:color-mix(in lab,red,red)){.field>label{color:color-mix(in srgb,var(--color-ink) 70%,transparent)}}.input{width:100%;min-height:44px;font:inherit;color:var(--color-ink);caret-color:var(--color-accent);background:var(--color-surface);border:2px solid var(--color-divider);transition:border-color var(--duration-fast) var(--ease-default);border-radius:0;padding:10px 12px;font-size:15px}.input:hover{border-color:var(--color-ink)}@supports (color:color-mix(in lab,red,red)){.input:hover{border-color:color-mix(in srgb,var(--color-ink) 60%,transparent)}}.input:focus-visible{border-color:var(--color-accent);outline:none}.input[aria-invalid=true]{border-color:var(--color-accent-700)}textarea.input{resize:vertical;min-height:140px}.seg{border:2px solid var(--color-divider);border-radius:0;flex-wrap:wrap;display:inline-flex}.seg-opt{cursor:pointer;align-items:center;gap:6px;padding:10px 16px;font-size:15px;font-weight:600;display:inline-flex}.seg-opt+.seg-opt{border-left:2px solid var(--color-divider)}.seg-opt input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.seg-opt:has(input:checked){background:var(--color-accent);color:var(--color-bg)}.seg-opt:not(:has(input:checked)):hover{background:var(--color-ink)}@supports (color:color-mix(in lab,red,red)){.seg-opt:not(:has(input:checked)):hover{background:color-mix(in srgb,var(--color-ink) 7%,transparent)}}.seg-opt:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:-2px}.chip{box-sizing:border-box;width:100%;font-family:var(--font-heading);text-align:left;color:var(--color-ink);border:2px solid var(--color-divider);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);background:0 0;border-radius:0;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:15px;font-weight:800;line-height:1.25;display:flex}.chip:hover{border-color:var(--color-accent)}.chip[aria-pressed=true]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-bg)}.dark{color-scheme:dark;--color-bg:#1a1918;--color-surface:#242221;--color-surface-2:#2d2b2b;--color-surface-3:#3a3736;--color-inverse:#f3f2f2;--color-line:#f3f2f261;--color-line-strong:#f3f2f2;--color-divider:#f3f2f261;--color-ink:#f3f2f2;--color-ink-muted:#cfcbca;--color-ink-dim:#a9a4a3;--color-on-inverse:#201e1d;--color-accent:#d95858;--color-accent-600:#e17b7b;--color-accent-700:#eba7a7;--color-neutral-100:#2d2b2b;--color-neutral-200:#3a3736;--color-neutral-300:#444141;--color-neutral-400:#605d5d;--color-neutral-500:#7d7979;--color-neutral-600:#9b9797;--color-neutral-700:#bab6b6;--color-neutral-800:#d7d3d3;--color-neutral-900:#eae7e7}.dark .poster{background:var(--color-accent-600)}@media(prefers-reduced-motion:no-preference){.js [data-reveal]{opacity:0;transform:translateY(24px)}.js [data-reveal][data-in]{opacity:1;transform:none}.js [data-rule]:before{transform:scaleX(0)}.js [data-rule][data-in]:before{transform:scaleX(1)}.js [data-words] [data-mask]>span{transform:translateY(112%)}.js [data-words][data-in] [data-mask]>span{transform:none}.js [data-photo]:not([data-in]):before{transform:scale(1.08)}.js [data-photo]:not([data-in]):after{transition:none;transform:scaleX(1)}}[data-reveal]{transition:opacity .8s ease var(--d,0s),transform .9s var(--ease-default) var(--d,0s)}[data-rule]{position:relative}[data-rule]:before{content:"";background:var(--rule-c,var(--color-divider));transform-origin:0;height:2px;transition:transform 1.1s var(--ease-rule) var(--d,0s);pointer-events:none;position:absolute;top:-2px;left:0;right:0}[data-words] [data-mask]{vertical-align:top;margin:-.06em 0 -.14em;padding:.06em 0 .14em;display:inline-block;overflow:hidden}[data-words] [data-mask]>span{transition:transform 1s cubic-bezier(.2,.75,.1,1);display:inline-block}[data-words] [data-mask]:nth-child(2)>span{transition-delay:70ms}[data-words] [data-mask]:nth-child(3)>span{transition-delay:.14s}[data-words] [data-mask]:nth-child(4)>span{transition-delay:.21s}[data-words] [data-mask]:nth-child(5)>span{transition-delay:.28s}[data-words] [data-mask]:nth-child(6)>span{transition-delay:.35s}[data-words] [data-mask]:nth-child(7)>span{transition-delay:.42s}[data-photo]{position:relative;overflow:hidden}[data-photo]:before{content:"";background:inherit;transition:transform 1.6s var(--ease-default);position:absolute;inset:0}[data-photo]:after{content:"";background:var(--color-bg);transform-origin:100%;transition:transform 1.1s cubic-bezier(.7,0,.2,1);position:absolute;inset:0;transform:scaleX(0)}[data-stagger]>:nth-child(2){--d:90ms}[data-stagger]>:nth-child(3){--d:.18s}[data-stagger]>:nth-child(4){--d:.27s}[data-stagger]>:nth-child(5){--d:.36s}[data-stagger]>:nth-child(6){--d:.45s}[data-stagger]>:nth-child(7){--d:.54s}[data-stagger]>:nth-child(8){--d:.63s}[data-stagger]>:nth-child(9){--d:.72s}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal],[data-rule]:before,[data-words] [data-mask]>span,[data-photo]:before{opacity:1!important;transition:none!important;transform:none!important}[data-photo]:after{display:none!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}

/* ════════════════════════════════════════════════════════════════════════════
   VON HAND ERGÄNZT — 08.10.2026

   Diese Regeln standen im Astro-Entwurf in komponentenlokalen <style>-Blöcken
   (components/Faq.astro und sections/ServiceRows.astro). Beim Extrahieren
   dieses Stylesheets sind sie NICHT mitgekommen: Die Datei enthält nur die
   globalen Regeln, keine Komponenten-Styles.

   Astro ist eliminiert, es gibt also keinen Build, der sie nachliefern könnte.
   Deshalb stehen sie hier, unminifiziert und lesbar. Wer sie ändert, ändert
   das Produkt — es gibt keine Quelle darüber.
   ════════════════════════════════════════════════════════════════════════════ */

/* Häufige Fragen: natives <details>. Ohne JavaScript auf- und zuklappbar. */
details.faq > summary { list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary:hover { color: var(--color-accent); }
details.faq .faq-icon { transition: transform 0.45s var(--ease-default); }
details.faq[open] .faq-icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  details.faq .faq-icon { transition: none; }
}

/* Leistungs-Navigation: Die aktive Nummer invertiert — kein Rahmenwechsel,
   nur Fläche. Das !important ist aus dem Entwurf übernommen; es überschreibt
   die Inline-Farbe am Element. */
[data-svcnav] a[data-active] {
  color: var(--color-bg) !important;
  background: var(--color-ink);
}
[data-svcnav] a:hover { color: var(--color-accent); }
[data-svcnav] a[data-active]:hover { color: var(--color-bg) !important; }

/* ════════════════════════════════════════════════════════════════════════
   VON HAND ERGÄNZT — 09.10.2026   (Stellenanzeige nach neuem Entwurf)

   Quelle: BSIK-Website Redesign/werkstudent_brandschutz.html. Dort stehen
   diese Regeln in einem <style>-Block der Design-Canvas-Datei. Der Entwurf
   bringt keine neuen Tailwind-Klassen mit, aber eine Reihe eigener
   Layout-Attribute. Seine zwei eigenen Token-Namen (--color-text,
   --font-body) sind NICHT uebernommen: Dieselben Werte heissen hier
   --color-ink und --font-sans, und zwei Namen fuer eine Farbe weichen
   irgendwann ab. Das Markup in stelle.php nutzt die Namen des Hauses.

   Es gibt keinen Build, der das nachliefern könnte (Astro ist eliminiert).
   Deshalb steht es hier, unminifiziert und lesbar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Entwicklungsweg: Segmentleiste ──────────────────────────────────────
   Eigene Attributnamen, NICHT data-row/data-seg wie im Entwurf: Dieselben
   Namen trägt die Leistungs-Navigation der Startseite, und verhalten.js
   greift dort über [data-svcnav] darauf zu. Zwei Mechanismen auf einem
   Attribut wären eine Falle für die nächste Änderung. */
[data-wegzeile] { transition: opacity .6s ease; }
.js [data-wegzeile]:not([data-erreicht]) { opacity: .4; }
[data-wegseg] { transition: transform .25s linear; }

/* Die Beschriftung der Segmente verschwindet, bevor sie umbricht.
   Unter 1100px bleiben die Nummern und die Balken. */
@media (max-width: 1100px) {
  [data-seglabel] { display: none !important; }
}

/* ── Dreierraster ────────────────────────────────────────────────────────
   Sechs Kacheln gehören in zwei volle Reihen. `auto-fit` entscheidet die
   Spaltenzahl nach Platz, nicht nach Anzahl: Auf breiten Schirmen wurden
   daraus vier und zwei, und die halb leere letzte Reihe liess die untere
   Kante des Gitters offen stehen.

   Die Spaltenzahl steht deshalb fest. Wer hier Kacheln pflegt, soll sie in
   Dreierschritten pflegen — das sagt auch der Hilfetext am Feld. */
[data-dreier] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  [data-dreier] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  [data-dreier] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Viererraster ────────────────────────────────────────────────────────
   Wie [data-dreier], nur für vier Kacheln. Vier teilen sich sauber in zwei
   Reihen; mit `auto-fit` wurden zwischen 1000 und 1100px drei und eine
   daraus, und bei einem Gitter mit Linien blieb die Kante offen. */
[data-vierer] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  [data-vierer] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [data-vierer] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Eckdatenband ────────────────────────────────────────────────────────
   Die Zahl der Angaben steht erst beim Rendern fest (leere fallen weg), und
   fünf lassen sich nicht in zwei gleiche Reihen teilen. Breit stehen sie
   deshalb alle nebeneinander; im Zweispalter füllt die letzte Zelle die
   Reihe auf, wenn die Zahl ungerade ist. So ist die untere Kante in jeder
   Breite geschlossen. --band-spalten setzt das Template. */
/* NACH MINDESTBREITE, NICHT NACH ANZAHL. Bei fuenf Fakten ergaben fuenf
   gleiche Spalten auf 1280px je 236px, abzueglich Polsterung 177px nutzbar
   - und „Maengelbeseitigungsmanagement" braucht bei 18px rund 250px. Das
   Wort konnte dort gar nicht stehen und brach mitten durch.

   `auto-fit` mit 230px Mindestbreite legt lieber eine Spalte weniger an
   und gibt den uebrigen die Breite. Die Zahl aus dem Template bleibt als
   Obergrenze erhalten. */
[data-band] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
@media (max-width: 1000px) {
  [data-band] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-band] > [data-breit] { grid-column: span 2; }
}
@media (max-width: 560px) {
  [data-band] { grid-template-columns: minmax(0, 1fr); }
  [data-band] > [data-breit] { grid-column: auto; }
}

/* ── Umbrüche des Entwurfs ───────────────────────────────────────────────
   Zweispaltige Raster, die der Entwurf per Inline-Style setzt, kann eine
   Media Query nur über ein Attribut wieder einspaltig machen. Genau dafür
   sind diese drei Attribute da; das !important überschreibt den
   Inline-Style am Element. */
@media (max-width: 960px) {
  [data-hero-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-hero-foto] {
    min-height: 340px !important;
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px)) !important;
  }
}
@media (max-width: 860px) {
  [data-stack] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-stack] > * { position: static !important; }
}

/* Diese zwei Regeln hatte ich am 09.10.2026 als toten Code entfernt: Damals
   trug kein Markup die Attribute. Mit den Leistungsseiten tut es das - der
   Zusatz in der Kopfzeile und die Beschriftung der angeklebten Leiste
   verschwinden auf dem Telefon. */
@media (max-width: 640px) {
  [data-hide-sm] { display: none !important; }
  [data-sticky-btn] { flex: 1 !important; justify-content: space-between !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   VON HAND ERGÄNZT — 09.10.2026   (die drei Schaustücke der Leistungsseiten)

   Quelle: die Entwürfe „BSIK Mängelbeseitigungsmanagement.dc.html",
   „BSIK Brandschutzkonzepte.dc.html" und „BSIK Due Diligence.dc.html".

   ZWEI VON DREI BRAUCHEN KEIN JAVASCRIPT. Der Grundriss und die
   Risikomatrix schalten über `:has(input:checked)` um - dieselbe Technik,
   die `.seg-opt` in diesem Stylesheet schon verwendet. Ohne JavaScript
   funktionieren sie damit genauso. Nur die Mängelliste läuft beim Scrollen
   durch; die bedient verhalten.js.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Mängelliste ─────────────────────────────────────────────────────────
   Jede Zeile trägt alle drei Zustände im Markup; sichtbar ist der, den
   `data-status` nennt. Ohne JavaScript steht überall „offen" - die Liste
   bleibt lesbar, sie läuft nur nicht durch. */
[data-mchip] {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
[data-mrow][data-status="offen"] > span > [data-mchip="offen"],
[data-mrow][data-status="plan"] > span > [data-mchip="plan"],
[data-mrow][data-status="done"] > span > [data-mchip="done"] { display: inline-flex; }

[data-mrow] { transition: background .3s ease; }
[data-mrow][data-status="done"] { background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
[data-mbalken] > * { background: var(--color-neutral-300); transition: background .3s ease; }
[data-mbalken] > [data-voll] { background: var(--color-accent); }

/* Auf dem Telefon fällt die Ortsspalte weg (data-hide-sm), also braucht das
   Raster dort drei Spalten statt vier. */
@media (max-width: 640px) {
  [data-mgrid] { grid-template-columns: 52px minmax(0, 1fr) 118px !important; }
}

/* ── Grundriss mit Ebenen ────────────────────────────────────────────────
   Drei Radioknöpfe, drei Zustände. Die Vorgabe ist die erste Ebene; die
   beiden anderen schalten über :has() um. Wer hier eine Ebene ergänzt,
   muss die Zeichnung ergänzen - sie hebt nach Position hervor. */
[data-ebenenwahl] { cursor: pointer; position: relative; }
[data-ebenenwahl] input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
[data-ebenenwahl] { color: var(--color-ink); transition: color .3s ease; }
[data-ebenenwahl]:hover { color: var(--color-accent); }
[data-ebenenwahl] [data-ebenennr] { color: var(--color-accent); }
[data-ebenenwahl]:has(input:checked) { color: var(--color-accent); }
[data-ebenenwahl]:has(input:checked) [data-ebenennr] { color: var(--color-accent); }
[data-ebenenwahl]:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Der Erklärtext klappt auf. 0fr auf 1fr animiert, display:none nicht. */
[data-ebenentext] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}
[data-ebenenwahl]:has(input:checked) [data-ebenentext] { grid-template-rows: 1fr; }

[data-grundriss] [data-ebene] { transition: opacity .4s ease, fill .4s ease; }
[data-grundriss] [data-ebene="bauteile"] { fill: var(--color-ink); }

/* Ebene 1, Brandabschnitte — auch der Zustand ohne jede Wahl. */
[data-grundriss] [data-ebene="flaeche"]        { opacity: 1; }
[data-grundriss] [data-ebene="abschnitte"]     { opacity: 1; }
[data-grundriss] [data-ebene="wege"]           { opacity: .22; }
[data-grundriss] [data-ebene="bauteile"]       { opacity: .35; }
[data-grundriss] [data-ebene="bauteilmarken"]  { opacity: 0; }

/* Ebene 2, Flucht- und Rettungswege. */
[data-ebenen]:has([data-ebene-nr="2"]:checked) [data-ebene="flaeche"]    { opacity: 0; }
[data-ebenen]:has([data-ebene-nr="2"]:checked) [data-ebene="abschnitte"] { opacity: .3; }
[data-ebenen]:has([data-ebene-nr="2"]:checked) [data-ebene="wege"]       { opacity: 1; }

/* Ebene 3, Feuerwiderstand der Bauteile. */
[data-ebenen]:has([data-ebene-nr="3"]:checked) [data-ebene="flaeche"]       { opacity: 0; }
[data-ebenen]:has([data-ebene-nr="3"]:checked) [data-ebene="abschnitte"]    { opacity: .3; }
[data-ebenen]:has([data-ebene-nr="3"]:checked) [data-ebene="bauteile"]      { opacity: 1; fill: var(--color-accent); }
[data-ebenen]:has([data-ebene-nr="3"]:checked) [data-ebene="bauteilmarken"] { opacity: 1; }

/* ── Risikomatrix ────────────────────────────────────────────────────────
   Jede Marke trägt beide Orte als Custom Properties; umgeschaltet wird,
   welcher gilt. Der Weg dazwischen wird dadurch animiert. */
[data-mark] {
  position: absolute;
  left: var(--x-a);
  top: var(--y-a);
  width: clamp(30px, 3.4vw, 40px);
  height: clamp(30px, 3.4vw, 40px);
  transform: translate(-50%, -50%);
  background: var(--color-ink);
  color: var(--color-bg);
  outline: 2px solid var(--color-bg);
  transition:
    left .9s cubic-bezier(.6, 0, .2, 1) var(--verzug, 0ms),
    top .9s cubic-bezier(.6, 0, .2, 1) var(--verzug, 0ms);
}
[data-bewertung]:has([data-zustand="nachher"]:checked) [data-mark] {
  left: var(--x-b);
  top: var(--y-b);
}

[data-massnahme] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1);
}
[data-bewertung]:has([data-zustand="nachher"]:checked) [data-massnahme] { grid-template-rows: 1fr; }

[data-urteil="nachher"] { display: none; }
[data-bewertung]:has([data-zustand="nachher"]:checked) [data-urteil="vorher"] { display: none; }
[data-bewertung]:has([data-zustand="nachher"]:checked) [data-urteil="nachher"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-mark], [data-massnahme], [data-ebenentext], [data-grundriss] [data-ebene] {
    transition: none;
  }
}

/* ── Klappmenü in der Kopfzeile ──────────────────────────────────────────
   OHNE JAVASCRIPT. Es öffnet beim Überfahren und solange etwas darin den
   Fokus hat - damit ist es auch mit der Tastatur erreichbar, weil die Links
   darin fokussierbar sind. Der Eintrag selbst bleibt ein Link auf die
   Übersicht; wer tippt statt überfährt, landet dort.

   Die Liste steht nur auf breiten Schirmen (ab 1024px, wo die Navigation
   überhaupt sichtbar ist). Schmal stehen die Unterseiten eingerückt im
   aufklappbaren Menü. */
[data-klappfeld] {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 260px;
  z-index: 60;
  background: var(--color-bg);
  /* Rahmen und Schatten stehen weiter unten im Block „Leichtigkeit"
     (10.10.2026). Hier stand bis dahin eine harte, zwei Pixel breite Kante
     in Tintenfarbe. Sie ist ENTFERNT und nicht nur ueberschrieben: Zwei
     widersprechende Angaben in derselben Datei sind eine Falle fuer den
     naechsten, der sucht, warum seine Aenderung nicht wirkt. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
[data-klappfeld] > a:first-child { border-top: 0 !important; }
[data-klappfeld] > a:hover { background: var(--color-surface); color: var(--color-accent); }

[data-klapp]:hover > [data-klappfeld],
[data-klapp]:focus-within > [data-klappfeld] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Die Fläche zwischen Eintrag und Liste darf nicht durchfallen, sonst
   schliesst das Menü auf dem Weg dorthin wieder. */
[data-klapp]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}

[data-klapppfeil] { transition: transform .18s ease; }
[data-klapp]:hover [data-klapppfeil],
[data-klapp]:focus-within [data-klapppfeil] { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  [data-klappfeld], [data-klapppfeil] { transition: none; }
}

/* ── Knöpfe nach dem Corporate Design ───────────────────────────────────
   Vorgabe (09.10.2026): Schrift 18px in Gewicht 500, weiss; Innenabstand
   9px oben/unten und 36px links/rechts; Höhe 72px; Radius 4px.

   Der Build setzt sie eckig, 15px und in Gewicht 800 - das stammt aus dem
   Astro-Entwurf. Diese Regeln stehen nach dem Build und überschreiben ihn.

   DIE SCHRIFTFARBE IST FEST WEISS, nicht var(--color-bg). Im Dunkelmodus
   ist --color-bg fast schwarz, und der Knopf trug dort dunkle Schrift auf
   Rot - schlecht lesbar und nicht das, was das CD sagt.

   Der Rahmen ist im CD mit Farbe, aber OHNE Breite angegeben. Ohne Breite
   ist nicht zu entscheiden, ob er sichtbar sein soll; er bleibt deshalb
   durchsichtig wie bisher. */
.btn-primary,
.btn-secondary,
.btn-ink {
  /* Das CD nennt feste 72px Höhe, 18px Schrift und 36px Innenabstand. Das
     ist auf einem Telefon zu wuchtig und sprengt schmale Spalten, deshalb
     läuft alles mit: Die CD-Werte sind das obere Ende der Spanne, nach
     unten wird es kleiner. Verhältnis und Form bleiben. */
  --btn-pad-y: clamp(6px, 0.8vw, 9px);
  --btn-pad-x: clamp(18px, 2.6vw, 32px);
  min-height: clamp(44px, 4.4vw, 60px);
  border-radius: 4px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.25;
  /* Ein langer Knopftext darf umbrechen, statt aus der Spalte zu laufen. */
  max-width: 100%;
  white-space: normal;
  hyphens: manual;
}
.btn-primary { color: #fff; }
.btn-ink { color: #fff; }
.btn-secondary:hover,
.btn-secondary:active,
.btn-ink:hover,
.btn-ink:active,
.btn-primary:hover,
.btn-primary:active { color: #fff; }

/* Der Umschalter im Panel-losen Bereich und die Segmentwahl behalten ihre
   eigene Grösse - sie sind keine Knöpfe im Sinne des CD. */
/* Leichte Schattierung, wie im Musterbild: Der Knopf hebt sich knapp von
   der Fläche ab, ohne zu schweben. --shadow-md ist der vorhandene Wert
   dafür; beim Überfahren hebt er sich eine Spur weiter, beim Drücken legt
   er sich zurück. Die Tokens gab es im Build, benutzt hat sie niemand. */
.btn-primary,
.btn-secondary,
.btn-ink {
  box-shadow: var(--shadow-md);
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-ink:hover { box-shadow: var(--shadow-lg); }
.btn-primary:active,
.btn-secondary:active,
.btn-ink:active { box-shadow: var(--shadow-sm); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .btn-ink { transition: none; }
  .btn-primary:active, .btn-secondary:active, .btn-ink:active { transform: none; }
}

/* ── Menü für schmale Schirme ────────────────────────────────────────────
   Es klappte bisher hart auf und zu: verhalten.js nahm die Klasse `hidden`
   weg, und das Feld stand sofort da. `display` lässt sich nicht animieren,
   darum läuft es jetzt über die Zeilenhöhe des Rasters - derselbe Griff wie
   beim Grundriss und bei der Risikomatrix.

   OHNE JAVASCRIPT bleibt das Feld zu. Das ist dasselbe Verhalten wie vorher
   (dort hielt die Klasse `hidden` es geschlossen); die Navigation steht ab
   1024px ohnehin ausgeschrieben da. */
[data-mobile-menu] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1);
}
[data-mobile-menu] > * { overflow: hidden; min-height: 0; }
[data-mobile-menu][data-offen] { grid-template-rows: 1fr; }

/* Die Einträge laufen beim Öffnen nacheinander ein. */
[data-mobile-menu] li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
[data-mobile-menu][data-offen] li { opacity: 1; transform: none; }
[data-mobile-menu][data-offen] li:nth-child(2) { transition-delay: 40ms; }
[data-mobile-menu][data-offen] li:nth-child(3) { transition-delay: 80ms; }
[data-mobile-menu][data-offen] li:nth-child(4) { transition-delay: 120ms; }
[data-mobile-menu][data-offen] li:nth-child(5) { transition-delay: 160ms; }
[data-mobile-menu][data-offen] li:nth-child(6) { transition-delay: 200ms; }
[data-mobile-menu][data-offen] li:nth-child(7) { transition-delay: 240ms; }
[data-mobile-menu][data-offen] li:nth-child(8) { transition-delay: 280ms; }

/* Der Knopf zeigt drei Striche oder ein Kreuz - je nachdem, was er tut. */
[data-menu-toggle] [data-zu] { display: none; }
[data-menu-toggle][aria-expanded="true"] [data-auf] { display: none; }
[data-menu-toggle][aria-expanded="true"] [data-zu] { display: inline-flex; }
[data-menu-toggle] svg { transition: transform .25s ease; }
[data-menu-toggle][aria-expanded="true"] svg { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  [data-mobile-menu], [data-mobile-menu] li, [data-menu-toggle] svg { transition: none; }
}

/* ── Video, das erst auf Klick lädt ──────────────────────────────────────
   Bis zum Klick steht hier ein Standbild und sonst nichts - es geht keine
   Anfrage an Google. Ohne JavaScript bleibt der Verweis ein gewöhnlicher
   Link auf YouTube; der Besucher entscheidet in jedem Fall selbst, ob er
   dorthin will. */
/* `> a`, NICHT JEDES `a` DARIN. Diese Regel gilt dem Standbild - dem einen
   Link, der die ganze Flaeche ausmacht. Seit der gesperrte Zustand am
   13.10.2026 dieselbe Kennung traegt, sitzen darin aber auch gewoehnliche
   Knoepfe, und `display: block` hat ihnen das `inline-flex` genommen: Beim
   Knopf „Video laden" stand die Beschriftung oben und der Pfeil 18px
   darunter, auf jeder Breite. Gemeldet als „Knopf zu klein" - er war nicht
   zu klein, er war zweizeilig gemacht worden.

   Im Standbild-Zweig ist das `a` ein unmittelbares Kind der Figur, im
   Sperr-Zweig liegt kein `a` auf dieser Ebene. Der Kindselektor trennt die
   beiden Faelle also genau, ohne eine zweite Kennung. */
[data-video] > a { position: relative; display: block; }
[data-videoknopf] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 7vw, 76px);
  height: clamp(56px, 7vw, 76px);
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease-default), box-shadow .25s var(--ease-default);
}
[data-video] > a:hover [data-videoknopf] {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-lg);
}
[data-video] iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-videoknopf] { transition: none; }
}

/* ── Prinzipien im Kreis ─────────────────────────────────────────────────
   Nach der Werte-Grafik (bsik_werte.jpeg): vier Karten um einen Mittelkreis,
   auf dem vier Medaillons sitzen, auf heller Fläche. Die ANORDNUNG kommt
   aus dem Bild, das Gewand bleibt das des Hauses - 2px-Linien, keine
   weichen Schatten, keine abgerundeten Karten. Der Kreis ist Geometrie,
   keine Verzierung.

   DER RING HÄNGT AM SCROLLEN. `--kreis-lauf` ist der Anteil des Rings, der
   gezeichnet ist - eine Zahl zwischen 0 und 1, die das Skript bei jedem
   Scrollbild neu setzt. Alles andere hier hängt an dieser einen Zahl: wie
   weit der Ring gezeichnet ist, wo die Spitze steht, welche Medaillons
   schon aufgeleuchtet sind. Das Skript liefert nur die Zahl; das Aussehen
   steht hier. Dasselbe Muster wie `--weg-anteil` beim Entwicklungsweg.

   Weil die Zahl bei jedem Bild neu kommt, steht hier KEINE Übergangszeit.
   Eine Transition auf einem scrollgeführten Wert läuft der Hand hinterher,
   statt mit ihr zu gehen. */
/* Der Vorspann über den vier Prinzipien. Der Satz zerfällt am Komma in
   Aussage und Erläuterung; die Vorlage teilt ihn, hier bekommen die beiden
   Hälften ihre Grösse. Der kurze Strich darüber ist dieselbe Figur, die im
   Haus jeden Abschnitt eröffnet - nur mittig, weil der Abschnitt
   symmetrisch um den Kreis gebaut ist.

   `data-vorspann`, NICHT `data-prinzipienlead`: Letzteres enthält die
   Zeichenfolge `data-prinzipien`, und selbsttest-karriere prüft mit
   `str_contains($html, 'data-prinzipien')`, ob der Kreis gezeichnet wird.
   Der Vorspann steht aber auch dann da, wenn es keine vier Prinzipien gibt
   - die beiden Rückfallprüfungen schlugen also an, zu Recht.

   DAS IST DAS DRITTE MAL in diesem Stylesheet: einmal bei `data-wegseg`
   gegen `data-wegsegment`, einmal bei `data-bogen` gegen `data-ringlinie`,
   jetzt hier. Wer ein neues Attribut benennt, prüft vorher mit grep, ob
   sein Name den eines anderen als Anfang enthält. */
[data-vorspann] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto clamp(36px, 4.5vw, 64px);
  /* Weit genug für die Erläuterung; die grosse Zeile wird unten enger
     gefasst. Andersherum ginge es nicht - ein Kind kann nicht breiter
     werden als sein Rahmen. */
  max-width: 46ch;
  text-align: center;
}
[data-leadstrich] {
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}
[data-leadkopf] {
  max-width: 22ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--color-ink);
  text-wrap: balance;
}
[data-leadrest] {
  /* Breiter als der Kopf: Die Erläuterung soll in zwei ruhigen Zeilen
     stehen, nicht in der schmalen Spalte der grossen Zeile umbrechen. */
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

[data-prinzipien] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 400px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 48px);
  align-items: stretch;

  /* OHNE JAVASCRIPT IST ALLES FERTIG GEZEICHNET. Bleibt das Skript aus,
     bleibt diese 1 stehen und die Seite zeigt das vollständige Bild. Unter
     `.js` beginnt sie bei 0 - siehe weiter unten. */
  --kreis-lauf: 1;
}
[data-prinzipien] > [data-mitte] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
[data-prinzipien] > [data-karte]:nth-of-type(1) { grid-column: 1; grid-row: 1; }
[data-prinzipien] > [data-karte]:nth-of-type(2) { grid-column: 3; grid-row: 1; }
[data-prinzipien] > [data-karte]:nth-of-type(3) { grid-column: 1; grid-row: 2; }
[data-prinzipien] > [data-karte]:nth-of-type(4) { grid-column: 3; grid-row: 2; }

/* Unter 1000px ist für drei Spalten kein Platz: Die Mitte geht nach oben,
   die Karten darunter. Bis 640px stehen sie zu zweit nebeneinander - auf
   einem Tablet ist eine einzelne Spalte Verschwendung -, erst darunter
   untereinander. */
@media (max-width: 1000px) {
  [data-prinzipien] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  [data-prinzipien] > * { grid-column: auto !important; grid-row: auto !important; }
  [data-prinzipien] > [data-mitte] {
    order: -1;
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  [data-prinzipien] { grid-template-columns: minmax(0, 1fr); }
}

/* Die Mitte: quadratisch, damit der Kreis ein Kreis bleibt. */
[data-mitte] { position: relative; aspect-ratio: 1 / 1; }
[data-ring] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* NUR DIE LINIE, nicht alles Runde im SVG. Hier stand `[data-ring]
   circle`, und das traf auch die zeichnende Spitze: Die erbte damit
   die feste Drehung der Linie und stand still, obwohl ihre eigene
   Regel sie drehen wollte - die Regel mit dem Nachfahren war
   spezifischer. Zwei verschiedene Dinge, zwei verschiedene Namen.

   Der Name beginnt bewusst NICHT mit `data-ring`: Der Selbsttest
   zaehlt `data-ring` im Markup, und ein `data-ringlinie` haette als
   Teilzeichenkette mitgezaehlt. */
[data-bogen] {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 1;
  /* Der Scrollfortschritt IST der gezeichnete Anteil. */
  stroke-dashoffset: calc(1 - var(--kreis-lauf, 1));
  /* Beginn oben links statt oben: Dort steht der erste Punkt, und dort
     fängt das Lesen an. Von da im Uhrzeigersinn.

     ALS VARIABLE, SEIT DIE FIGUR AUCH DREI TRAEGT. Bei vier beginnt der
     Ring bei 135 Grad, bei drei bei 150 - dann stehen die Medaillons
     symmetrisch zur Mittelachse (oben links, oben rechts, unten) statt
     verdreht. Den Wert liefert die Vorlage aus derselben Tabelle, aus der
     auch die Medaillonplaetze kommen; zwei getrennte Zahlen wuerden sich
     irgendwann widersprechen, und dann leuchten die Medaillons in falscher
     Folge auf. */
  transform: rotate(var(--ringstart, -135deg));
  transform-origin: 50% 50%;
}

/* Die zeichnende Spitze läuft auf dem Ring mit. Ihre Drehung ist derselbe
   Anteil, nur in Grad - deshalb bleibt sie immer genau am Ende der
   gezeichneten Linie, ohne dass jemand zwei Werte gleichhalten müsste.

   SIE LIEGT IM SVG. Als gedrehtes HTML-Element in Kreisgröße schob sie mit
   ihren Ecken die scrollbare Fläche der ganzen Seite auseinander - auf
   einem 390px-Telefon 52px Querscrollen. Ein gedrehtes SVG-Kind hat kein
   eigenes Kästchen im Seitenfluss und kann das nicht. */
[data-kreiskopf] {
  fill: var(--color-accent);
  transform: rotate(calc(var(--kreis-lauf, 1) * 360deg));
  transform-origin: 50% 50%;
  /* Nur unterwegs zu sehen: Am Anfang ist nichts gezeichnet, am Ende ist
     der Ring geschlossen und die Spitze hätte nichts mehr zu zeigen. Das
     erledigt zugleich den Fall ohne JavaScript und den mit abbestellter
     Bewegung - dort steht der Lauf auf 1, und damit ist sie weg. */
  opacity: calc(clamp(0, var(--kreis-lauf, 1) * 30, 1) * clamp(0, (1 - var(--kreis-lauf, 1)) * 30, 1));
}

/* Was in der Mitte steht, sitzt im eingeschriebenen Quadrat des Kreises
   (Seite = Durchmesser / Wurzel 2, also rund 70 %). */
[data-mitteinhalt] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* DIE BILDMARKE MUSS MIT DEM KREIS SCHRUMPFEN. Das Logo-Snippet schreibt
   seine Höhe als Inline-Stil, deshalb braucht es hier `!important` - ohne
   das greift die Regel nicht. Bei 5:1 ist die Marke auf 44px Höhe 220px
   breit; die Inhaltsfläche im Kreis misst auf einem 360px-Telefon aber nur
   68 % von 320px, also 218px. Die Marke stand dort über der Kante. Jetzt
   folgt sie der Breite des Kreises und hört bei ihrer Entwurfsgröße auf zu
   wachsen, auf dem Schreibtisch ändert sich also nichts. */
[data-mitteinhalt] img {
  width: min(100%, 220px);
  height: auto !important;
}

[data-medaillon] {
  position: absolute;
  /* Der Anteil DIESES Medaillons: 0, solange die zeichnende Spitze noch
     nicht da war, dann über ein Zwölftel der Runde auf 1. `--p` ist seine
     Stelle auf dem Ring und kommt aus der Vorlage, gerechnet aus dem
     Winkel, auf dem es sitzt. */
  --an: clamp(0, (var(--kreis-lauf, 1) - var(--p, 0)) * 12, 1);
  opacity: var(--an);
  transform: translate(-50%, -50%) scale(calc(.72 + .28 * var(--an)));

  /* IN PROZENT DES KREISES, nicht des Fensters. Vorher stand hier
     clamp(54px, 6vw, 76px): Auf einem Telefon blieb das Medaillon bei
     seinen 54px stehen, während der Ring auf gut 300px schrumpfte - das
     Verhältnis kippte, und am Rand wurde es eng. In Prozent gerechnet
     liegt die Außenkante immer bei rund 93 % und kann gar nicht erst über
     den Rand treten, bei keiner Fensterbreite. */
  width: clamp(42px, 17%, 76px);
  aspect-ratio: 1 / 1;
  height: auto;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  /* Die Fläche DIESES Abschnitts, damit der Ring hinter dem Medaillon
     verschwindet und es wie aufgesetzt wirkt - so wie in der Grafik. Hier
     stand --color-bg; der Abschnitt liegt aber auf --color-surface, seit
     er von der tintenfarbenen Fläche auf die helle gewandert ist. Die
     Scheibe war dadurch eine Spur heller als ihr Grund und saß als
     sichtbarer Fleck auf dem Ring. */
  background: var(--color-surface);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Das Zeichen wächst mit seiner Scheibe mit, statt bei 28px zu kleben. */
[data-medaillon] svg { width: 52%; height: 52%; }

/* Der Kompass-Kasten unter jedem Text. */
[data-kompass] {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-left: 2px solid var(--color-accent);
}

/* DER EINLAUF HÄNGT AN DER KLASSE `js`, wie überall auf diesen Seiten:
   Ohne Skript bleibt `--kreis-lauf` auf 1 und die Karten tragen keine
   Deckkraftregel - die Seite zeigt dann sofort alles. Wer Bewegung
   abbestellt hat, bekommt dasselbe fertige Bild, nicht eine langsamere
   Fassung derselben Bewegung; deshalb steht der ganze Block in
   `no-preference` und nicht in `reduce`. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-prinzipien] { --kreis-lauf: 0; }
  /* Jede Karte fährt über ihr eigenes kurzes Stück ein; `--karte-lauf`
     setzt das Skript je Karte aus deren eigener Lage im Bild. */
  .js [data-karte] {
    opacity: var(--karte-lauf, 0);
    transform: translateY(calc((1 - var(--karte-lauf, 0)) * 24px));
  }
}

/* ── Bewegung an bedienbaren Dingen ──────────────────────────────────────
   12.10.2026. Bis hierher hatte diese Website KEINE einzige Keyframe-
   Animation; Bewegung gab es nur als Farbwechsel beim Zeigen und als
   Einlauf beim Scrollen. Das ist eine gute Ausgangslage, und sie soll es
   bleiben: Was hier dazukommt, sagt jeweils etwas, das ohne Bewegung
   nicht gesagt waere.

     Puls      der Ruf unten ist gerade erschienen - einmal, nicht dauernd
     Pfeil     dieser Link fuehrt weiter, und zwar dorthin
     Kante     diese Zelle ist unter dem Zeiger

   DREIMAL UND DANN RUHE gilt fuer den Puls. Eine Schaltflaeche, die
   endlos pulsiert, ist nach zehn Sekunden kein Hinweis mehr, sondern ein
   Flackern, das man wegzuschauen lernt. Sie pulst beim ERSTEN Erscheinen
   und danach nie wieder - das Skript setzt `data-ersterauftritt` genau
   einmal.

   ALLES HIER STEHT IN `no-preference`. Wer Bewegung abbestellt hat,
   bekommt die Seite ohne jede dieser Regeln; die Farbwechsel beim Zeigen
   bleiben, weil sie keine Bewegung sind. */
@media (prefers-reduced-motion: no-preference) {

  /* WEICHER ALS VORHER, und das steckt in den ersten 18 Prozent. Bis zum
     13.10.2026 begann dieser Ablauf bei `opacity: .55` - der Ring war im
     ersten Bild sofort voll da und verschwand dann. Das liest sich als
     Aufblitzen, nicht als Einladung. Jetzt faehrt er von 0 hoch, und zwar
     aus `scale(.985)`: minimal kleiner als das Element, damit die Bewegung
     von innen nach aussen geht und nicht aus dem Nichts.

     Am Ende bleibt absichtlich eine lange, leise Strecke (ab 70% nur noch
     .05 Deckung): Der Ring loest sich auf, statt zu enden. */
  /* DER RING WAECHST UM EINE FESTE STRECKE, NICHT UM EINEN ANTEIL. Das ist
     der Kern dieses Ablaufs, und er hat zwei Gruende.

     ERSTENS GESTALT. Bis zum 13.10.2026 stand hier `transform: scale()`.
     Damit haengt die Weite des Rings an der Breite des Elements: Um einen
     Knopf von 200px wuchs er 12px, um eine Aufklapper-Zeile von 1184px aber
     71px. Dieselbe Regel, zwei voellig verschiedene Gesten - beim Knopf ein
     Hinweis, bei der Zeile ein Hof. Mit `inset` ist die Strecke dieselbe,
     egal wie breit das Element ist.

     ZWEITENS DIE SEITENBREITE. Gemessen auf elf Seiten: 67 von 105 Ringen
     reichten mit `scale` ueber den Rand des Fensters hinaus, bis zu 44px
     weit. Ein `position: absolute` Pseudoelement aendert das Layout nicht,
     erweitert aber die Scrollflaeche - die Seite liess sich seitlich
     schieben, genau waehrend sie zum Antippen einlud. Jetzt sind es
     hoechstens `--puls-weit`, und das steht unter dem engsten gemessenen
     Seitenrand (20px auf dem Telefon).

     Nebenbei bleibt die 2px-Linie dabei scharf. `scale(1.12)` hat sie auf
     2,24px aufgezogen und leicht verwaschen.

     `--puls-weit` steht am Element, nicht hier: Die Leiste am unteren Rand
     braucht einen engeren Ring als eine Zeile im Satzspiegel. */
  @keyframes bsik-puls {
    0%   { inset: calc(var(--puls-weit, 13px) * -.15); opacity: 0; }
    18%  { inset: calc(var(--puls-weit, 13px) * -.38); opacity: .5; }
    70%  { inset: calc(var(--puls-weit, 13px) * -.86); opacity: .05; }
    100% { inset: calc(var(--puls-weit, 13px) * -1);   opacity: 0; }
  }

  /* ── Der Puls, der einmal einlaedt ─────────────────────────────────────
     EIN BEDIENELEMENT MUSS SAGEN, DASS ES EINES IST. Die Ebenenwahl auf
     einer Leistungsseite sah aus wie eine Liste: Farbe beim Zeigen, sonst
     nichts. Wer mit dem Finger liest, faehrt aber nirgends darueber - er
     sieht eine Liste und geht weiter.

     Ein Ring waechst dreimal aus dem Element heraus, wenn es zum ERSTEN
     Mal ins Bild kommt, und danach nie wieder. Ausgeloest wird das vom
     selben Beobachter, der alles andere einlaufen laesst (`data-in`), und
     dreimal ist die Obergrenze: Was dauerhaft pulsiert, ist nach zehn
     Sekunden kein Hinweis mehr, sondern ein Flackern, das man wegzuschauen
     lernt.

     `[data-puls]` traegt jedes Element, das das braucht - hier die erste
     Zeile der Ebenenwahl, die stellvertretend fuer die anderen zeigt, dass
     diese Zeilen antippbar sind. */
  /* 13px: weiter als vorher (da waren es 2px hoch und 4px breit, und der
     Ring sah auf einem Knopf mit eigenem Rahmen wie ein zweiter Rahmen aus
     statt wie etwas, das herauswaechst). Und immer noch unter den 20px, die
     auf einem 360px-Telefon am engsten Rand bleiben. */
  [data-puls] { position: relative; --puls-weit: 13px; }
  [data-puls]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--color-accent);
    /* Der Ring folgt der Form dessen, was er umfasst: Ein Knopf ist mit 4px
       gerundet, eine Zeile der Ebenenwahl ist eckig. `inherit` nimmt das von
       selbst und braucht keine zweite Liste, die irgendwann nicht mehr
       stimmt. */
    border-radius: inherit;
    /* DER SCHATTEN IST ZWEITEILIG, und keiner der beiden Teile ist Dekor.
       Innen eine duenne, dichte Lage direkt an der Linie - die gibt dem
       Ring Kante gegen einen unruhigen Hintergrund. Aussen eine weite,
       weiche Wolke nach unten, dieselbe Richtung wie bei den Knoepfen.
       Beide in CD-Rot gemischt, nicht in Schwarz: Ein grauer Schatten unter
       einer roten Linie sieht aus wie ein Druckfehler.

       Schatten erweitern die Scrollflaeche nicht - anders als das `scale`
       weiter unten. Er ist also die billige Haelfte dieser Wirkung. */
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
      0 10px 28px -8px color-mix(in srgb, var(--color-accent) 45%, transparent);
    pointer-events: none;
    opacity: 0;
  }
  /* LANGSAMER: 2,4s statt 1,7s. Dreimal bleibt die Obergrenze (siehe oben),
     damit sind es 7,2 Sekunden statt 5,1 - noch unter der Zehn-Sekunden-
     Grenze, ab der ein Hinweis zum Flackern wird.

     Und eine eigene Kurve statt `--ease-default`: Die endet bei 1 und ist
     fuer Bewegungen gedacht, die ankommen. Dieser Ring kommt nirgends an,
     er loest sich auf - deshalb vorne weich anfahren und hinten auslaufen
     lassen, ohne den harten Schlussanschlag. */
  .js [data-puls][data-in]::after {
    animation: bsik-puls 2.4s cubic-bezier(.22, .61, .36, 1) 3;
  }

  /* HIER STAND EINE KLAMMER, UND SIE IST JETZT FALSCH. Am 13.10.2026 bekam
     die Ebenenliste ein `overflow-x: clip`, weil der Ring damals mit
     `scale` wuchs und auf einem 390px-Telefon 8px Querlauf machte.

     Mit der festen Strecke ist der Ueberstand hoechstens 13px und bleibt
     unter dem Seitenrand - die Klammer ist nicht mehr nur unnoetig, sie
     wuerde den Ring an der Spaltenkante abschneiden und damit genau den
     Hinweis halbieren, um den es geht. Der Grund fuer ihr Verschwinden
     steht oben beim Ablauf. */

  /* Der Ring sitzt HINTER dem Knopf und waechst aus ihm heraus. Kein
     Schatten, keine Rundung - eine 2px-Linie, wie alles hier.

     Und ein engerer Ring als im Satzspiegel: 6px statt 13px. Dieser Knopf
     sitzt in einer festen Leiste von rund 56px Hoehe; ein Ring, der 13px
     nach oben und unten ausgreift, haengt aus der Leiste heraus und
     ueberdeckt die Seite darunter. */
  [data-sticky-cta][data-ersterauftritt] a.btn-ink { position: relative; --puls-weit: 6px; }
  [data-sticky-cta][data-ersterauftritt] a.btn-ink::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-bg);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    animation: bsik-puls 1.6s var(--ease-default) 3;
  }

  /* ── Bewegung beim Bedienen, nicht nur Farbe ───────────────────────────
     Die Ebenenwahl wechselte beim Zeigen nur die Farbe. Jetzt waechst
     links eine Marke mit - sie zeigt, welche Zeile gleich gewaehlt wird,
     und bleibt bei der gewaehlten stehen. */
  [data-ebenenwahl]::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .28s var(--ease-default);
  }
  [data-ebenenwahl]:hover::before,
  [data-ebenenwahl]:has(input:checked)::before { transform: scaleY(1); }

  /* Und ein Druck gibt nach. Ein Knopf, der sich beim Antippen nicht
     bewegt, fuehlt sich an wie ein Bild von einem Knopf. */
  .btn-primary:active, .btn-secondary:active, .btn-ink:active,
  [data-ebenenwahl]:active { transform: translateY(1px); }
  .btn-primary, .btn-secondary, .btn-ink {
    transition: transform .08s linear, background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
  }

  /* Der Pfeil geht ein Stueck voraus, sobald der Zeiger auf dem Link
     steht. Zwei Pixel reichen - es ist ein Hinweis, kein Auftritt. */
  .btn-primary svg, .btn-secondary svg, .btn-ink svg,
  [data-schnellzugriff] a svg {
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .btn-primary:hover svg, .btn-secondary:hover svg, .btn-ink:hover svg,
  [data-schnellzugriff] a:hover svg { transform: translateX(3px); }
  /* Ein Diagonalpfeil fuehrt nach draussen und geht deshalb auch dorthin. */
  a[target="_blank"]:hover svg { transform: translate(2px, -2px); }

  /* Die Zelle unter dem Zeiger bekommt ihre Kante in Akzentfarbe - sie
     waechst von links, statt einfach umzuspringen. */
  .grid-cell { position: relative; }
  .grid-cell::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base, .35s) var(--ease-default);
    pointer-events: none;
  }
  a.grid-cell:hover::after,
  a.grid-cell:focus-visible::after,
  .grid-cell:has(a:hover)::after { transform: scaleX(1); }
}

/* Die Kopfzeile bleibt, wie sie war: eine Hoehe, kein Aufklappen. Hier
   stand vom 12.10.2026 bis zum selben Tag eine Fassung mit drei
   Zustaenden, die beim Scrollen auf 44px schrumpfte und sich per Knopf
   wieder oeffnen liess. Sie war nicht gewuenscht und ist zurueckgebaut -
   Platz sparen die Leisten DARUNTER, nicht die Hauptnavigation.

   Was bleibt, ist die Trefferflaeche des Menueknopfs: 44px statt 36. Das
   ist das kleinste Ziel, das ein Daumen zuverlaessig trifft, und es hat
   mit dem Aufklappen nichts zu tun. */

/* ── Kacheln stehen frei, statt in einem Gitter zu sitzen ────────────────
   12.10.2026. `.grid-frame` setzte oben und links eine 2px-Linie,
   `.grid-cell` rechts und unten. Zusammen ergab das ein geschlossenes
   Gitter um jede Kachel - optisch eine Tabelle, und Tabellen sehen alt
   aus, weil sie aus einer Zeit stammen, in der man Spalten anders nicht
   ausrichten konnte.

   DIE LINIEN WAREN NIE DIE ORDNUNG, sie haben sie nur nachgezeichnet. Die
   Ordnung macht das Raster selbst: gleiche Spalten, gleiche Abstaende,
   gleiche Textkanten. Nimmt man die Linien weg, steht sie immer noch da -
   nur ruhiger.

   Was bleibt: die Trennlinien ZWISCHEN den Abschnitten. Die gliedern die
   Seite und sind keine Kaesten um einzelne Dinge. Rund wird nichts, und
   weiche Schatten kommen auch jetzt keine dazu; der Abstand traegt.

   Der Grund hebt die Kachel leise ab - gerade genug, dass sie als ein
   Stueck liest, und zu wenig, um wieder ein Kasten zu sein. Auf der
   hellen Flaeche ist das --color-surface, auf der abgesetzten das helle
   --color-bg; eine Kachel soll sich vom Grund abheben, egal auf welchem
   sie liegt. */
.grid-frame {
  border-top: 0;
  border-left: 0;
  gap: clamp(14px, 1.8vw, 26px);
}
.grid-cell { border-right: 0; border-bottom: 0; background: var(--kachel-grund); }

/* EIN TON FUER ALLE KACHELN, an einer Stelle. Er steht hier und nicht
   vierzehnmal in den Vorlagen: Wer ihn anfasst, soll ihn einmal anfassen.
   Vier Prozent Tinte - genug, dass die Kachel als ein Stueck liest, zu
   wenig, um wieder ein Kasten zu sein. Im Dunkelmodus kippt die Richtung
   von selbst, weil --color-ink dort hell ist. */
:root { --kachel-grund: color-mix(in srgb, var(--color-ink) 4%, transparent); }
/* Die rote Kachel („Dein Platz") traegt ihre eigene Farbe und braucht
   keinen Grund darunter. */
.grid-cell.poster { background: var(--color-accent); }

/* Die Zelle unter dem Zeiger: Die Kante bleibt, sie sitzt jetzt nur nicht
   mehr auf einer grauen Linie, sondern auf dem Rand der Kachel selbst. */
@media (prefers-reduced-motion: no-preference) {
  .grid-cell::after { bottom: 0; }
}

/* ── Die klebenden Leisten der einzelnen Seiten ──────────────────────────
   12.10.2026. NICHT die Hauptnavigation - die Leisten, die je nach Seite
   darunter kleben: auf der Startseite „Leistungen" mit Vorspann und den
   Nummern 01-03, auf einer Stellenanzeige der Kopf des Entwicklungswegs.

   GEMESSEN auf 360x740: Die Leistungsleiste war 164px hoch. Das ist mehr
   als Kopfzeile und Fussleiste zusammen, und es ist der groesste einzelne
   Posten auf dem Schirm. Auf dem Schreibtisch steht alles in EINER Zeile;
   auf dem Telefon brach es auf drei um.

   WAS DAVON MUSS KLEBEN? Die Nummern - sie sind die Navigation. Die
   Ueberschrift und der Vorspann sagen, wo man ist; das liest man einmal
   beim Ankommen und danach nicht mehr. Deshalb stehen sie da, solange die
   Leiste im Fluss mitlaeuft, und weichen, sobald sie klebt. Uebrig bleibt
   ein Streifen mit den Nummern.

   `data-klebt` setzt verhalten.js, wenn die Leiste ihre Klebeposition
   erreicht hat - CSS kann das von sich aus nicht wissen.

   `--kopfhoehe` kommt ebenfalls von dort: Es ist die GEMESSENE Hoehe der
   Kopfzeile. Vorher stand an beiden Leisten `top:86px` fest verdrahtet,
   passend zu einer Kopfzeile von 84px. Seit die schrumpft, klaffte dort
   eine Luecke, durch die der Text hindurchscrollte. Eine Zahl, die von
   einer anderen abhaengt, darf nicht zweimal getippt werden. */
[data-svcnav],
[data-wegkopf] { top: var(--kopfhoehe, 86px); }

@media (max-width: 1023px) {
  [data-svcnav] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    row-gap: 8px;
  }
  /* Klebend bleibt nur die Reihe der Nummern. */
  [data-svcnav][data-klebt] [data-svckopf] { display: none; }
  /* Und sie nimmt dann die ganze Breite, statt rechts zu kleben - ein
     Ziel, das mittig unter dem Daumen liegt, trifft man leichter. */
  [data-svcnav][data-klebt] > nav { width: 100%; justify-content: flex-start; }
  [data-svcnav][data-klebt] [data-svcnum] { padding: 9px 13px; }

  /* DER KOPF DES ENTWICKLUNGSWEGS, dieselbe Ueberlegung. Er traegt links
     einen Ring mit dem Zeichen der Stelle und rechts die Messlinie mit
     den neun Stationen. Der Ring ist ein Bild; die Messlinie ist die
     Auskunft. Klebend bleibt deshalb nur die Linie.

     96 bis 132 Pixel allein fuer den Ring sind auf einem 360er Schirm ein
     Drittel der Breite - und er sagt dort nichts, was die Linie daneben
     nicht schon zeigt. */
  [data-wegkopf][data-klebt] { grid-template-columns: minmax(0, 1fr); }
  [data-wegkopf][data-klebt] [data-wegring] { display: none; }
  [data-wegkopf][data-klebt] { padding-block: 4px; }
  [data-wegkopf][data-klebt] [data-wegstation] { padding-top: 6px; }
  [data-wegkopf][data-klebt] [data-wegnummer] { margin-top: 6px; }
  /* Der Knoten sass auf der Hoehe der alten Polsterung. */
  [data-wegkopf][data-klebt] [data-wegstation]::before { top: 2px; }
  /* Die Woerter unter den Nummern brechen auf dieser Breite ohnehin auf
     zwei Zeilen und sind kaum lesbar; klebend traegt die Nummer allein. */
  [data-wegkopf][data-klebt] [data-seglabel] { display: none; }
}

/* ── Die Fussleiste verdeckt den Fuss nicht mehr ─────────────────────────
   GEFUNDEN AM 12.10.2026: Am Seitenende blieb die fixierte Leiste stehen
   und legte sich ueber die letzten 59 Pixel des Fusses - Impressum und
   Datenschutz lagen darunter. Eine fixierte Leiste nimmt keinen Platz im
   Fluss ein; den muss ihr jemand geben.

   Der Platz wird dauerhaft reserviert und nicht beim Ein- und Ausfahren
   gesetzt: Ein Rand, der mit der Leiste kommt und geht, verschiebt den
   Text unter dem Finger. */
@media (max-width: 720px) {
  body:has([data-sticky-cta]) > footer:last-of-type,
  body:has([data-sticky-cta]) footer.mt-auto { padding-bottom: 72px; }
}

/* Werte im Faktenband DUERFEN trennen. Sie stehen in schmalen Spalten,
   sind fast immer Komposita, und sie tragen keinen `text-wrap: balance` -
   genau die Lage, in der `hyphens: auto` hilft statt zu schaden. Ohne sie
   brach „Maengelbeseitigungsmanagement" dort ohne Trennstrich mitten
   durch, und das ist schlechter als eine Trennung mit Strich.

   Fuer Ueberschriften gilt das Gegenteil; warum, steht direkt darunter. */
dd { hyphens: auto; overflow-wrap: break-word; }

/* ── Der Bewerbungsablauf auf einer Stellenanzeige ───────────────────────
   Die sechs Stationen aus der Vorlage des Hauses: Hoerer, Bildschirm,
   Aktentasche, zwei Personen, Handschlag, Schriftstueck. Sie stehen
   waagerecht nebeneinander und tragen ihr Zeichen ueber der Nummer.

   ABSICHTLICH ANDERS ALS DER ENTWICKLUNGSWEG weiter oben auf derselben
   Seite. Dort: Ring, Messlinie, neun fachliche Schritte, die sich beim
   Scrollen fuellen. Hier: eine Reihe mit Zeichen, sechs Stationen, kein
   Fortschritt. Zwei nummerierte Folgen auf einer Seite muessen sich
   unterscheiden lassen, sonst liest man sie als eine.

   Die Linie laeuft durch, nicht um jede Station herum: Es ist ein Weg,
   und ein Weg hat keine Kaesten. */
/* FLUSS STATT RASTER, und das ist der Unterschied zwischen „passt" und
   „sieht richtig aus". Mit `auto-fit` standen bei 1024px fuenf Stationen
   in der ersten Zeile und die sechste allein in der zweiten - sie hing
   mitten auf der Zeitlinie, als waere sie uebrig.

   Im Fluss waechst jede Station (`flex-grow: 1`), also fuellt die letzte
   Zeile immer die ganze Breite. Das gilt bei jeder Anzahl von Stationen
   und jeder Fensterbreite - eine Regel statt einer Tabelle von
   Sonderfaellen. */
[data-bewerbungsweg] {
  display: grid;
  grid-template-columns: repeat(var(--sp-breit, 3), minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  border-top: 2px solid var(--color-divider);
  padding-top: 20px;
}
/* Die Zahlen kommen aus der Vorlage und TEILEN die Stationszahl - bei
   sechs also 6, 3 und 2. Damit ist jede Zeile voll und keine Station
   steht allein auf der Zeitlinie. */
@media (max-width: 1100px) {
  [data-bewerbungsweg] { grid-template-columns: repeat(var(--sp-mittel, 2), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [data-bewerbungsweg] { grid-template-columns: repeat(var(--sp-schmal, 1), minmax(0, 1fr)); }
}
[data-bewerbungsweg] > li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}
/* Der Knoten auf der Linie - dieselbe Figur wie an der Messlinie. */
[data-bewerbungsweg] > li::before {
  content: "";
  position: absolute;
  top: -27px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
}
[data-bwzeichen] { display: inline-flex; color: var(--color-accent); }
[data-bwnummer] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
/* Der Satz unter dem Stichwort. Gedaempft, damit die Reihe der Woerter
   die Linie fuehrt und der Satz sie erklaert - dieselbe Rangfolge wie an
   der Messlinie. */
[data-bwtext] {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
[data-bwwort] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--grad-10);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--color-ink);
  hyphens: auto;
  text-wrap: pretty;
}

/* ── Die Schriftgrade ────────────────────────────────────────────────────
   12.10.2026. Vorher standen in den Vorlagen 57 VERSCHIEDENE Groessen,
   jede als eigenes clamp() an Ort und Stelle getippt. Darunter Paare, die
   sich um zwei Pixel unterschieden: 40 und 38, 48 und 46, 23 und 22, 21
   und 20. Niemand hat das entschieden - es ist entstanden, Abschnitt fuer
   Abschnitt, und jeder neue Abschnitt hat die Streuung vergroessert.

   JETZT ZWOELF GRADE, von 120 bis 17 Pixeln. Das Verhaeltnis zwischen
   zwei Stufen liegt bei etwa 1,2 - weit genug, dass man den Unterschied
   sieht, eng genug, dass fuer jeden Zweck eine Stufe passt.

   DIE SKALA WURDE UM DEN BESTAND GELEGT, nicht umgekehrt: Die vier
   haeufigsten Werte (40, 48, 32, 20) sind exakte Stufen und haben sich
   nicht bewegt. Von 114 Fundstellen blieben 69 unveraendert; nur eine
   Gruppe wandert um mehr als ein Zehntel (36 auf 40, zweimal). Eine
   Vereinheitlichung darf das Schriftbild ordnen, nicht umbauen.

   WER EINE NEUE GROESSE BRAUCHT, nimmt die naechste Stufe - und wenn
   wirklich keine passt, aendert er die Skala hier und sieht dabei, was er
   sonst noch trifft. Genau das war vorher unmoeglich. */
:root {
  --grad-1:  clamp(48px, 7.4vw, 120px);  /* Plakat der Startseite */
  --grad-2:  clamp(44px, 6vw,    96px);  /* Plakat der Unterseiten */
  --grad-3:  clamp(36px, 5vw,    72px);  /* Schlussbanner */
  --grad-4:  clamp(34px, 4.4vw,  64px);
  --grad-5:  clamp(32px, 4vw,    56px);
  --grad-6:  clamp(32px, 3.6vw,  48px);  /* Abschnitt ueber volle Breite */
  --grad-7:  clamp(28px, 3vw,    40px);  /* Abschnitt in einer Spalte */
  --grad-8:  clamp(24px, 2.4vw,  32px);
  --grad-9:  clamp(22px, 2.2vw,  28px);
  --grad-10: clamp(19px, 1.7vw,  24px);  /* Kachelueberschrift */
  --grad-11: clamp(17px, 1.4vw,  20px);  /* Vorspann, Lauftext gross */
  --grad-12: clamp(14px, 1.2vw,  17px);  /* Beschriftung */
}

/* ÜBERSCHRIFTEN ERBEN KEINE TRENNUNG. `hyphens` vererbt sich, und an
   mehreren Stellen steht es absichtlich an einem Elternteil - etwa an
   einer Spalte mit langen Komposita. Die Ueberschrift darin bekam es dann
   mit, ohne dass es jemand fuer sie entschieden haette: So wurde aus
   „Sicherheit & Expertise von Anfang an" ein „von Anf-ang an", obwohl das
   Wort bequem in die Zeile gepasst haette.

   `manual` heisst: nur an weichen Trennstrichen brechen, die jemand
   bewusst gesetzt hat - das ist genau das `Trennbar`-Feld im Panel mit
   seinen `|`. Eine Ueberschrift, die wirklich trennen soll, sagt es
   weiterhin selbst (inline oder ueber ihren eigenen Selektor); beides
   schlaegt diese Regel hier. */
h1, h2, h3, h4 { hyphens: manual; }

/* ── EINE ZEILENBLENDE MUSS UMBRECHEN KOENNEN ────────────────────────────
   Gemessen am 13.10.2026 auf einem 360px-Telefon: Die Leistungsseite
   „Maengelbeseitigungsmanagement" lief 136px ueber den rechten Rand hinaus.
   Nicht waehrend einer Animation, sondern dauerhaft, ab dem ersten Bild -
   die Seite liess sich seitlich schieben, und die Ueberschrift stand zur
   Haelfte im Nichts. Auf 390px waren es 106px.

   DIE URSACHE IST EINE VERSCHACHTELUNG, NICHT DIE TRENNUNG. Die Blende
   (`[data-mask]`) und der Laeufer darin sind beide `inline-block`, weil der
   Laeufer sich bewegen muss und die Blende ihn beschneidet. Ein
   `inline-block` ist aber ein ATOMARER Kasten: Der Zeilenumbruch darf nicht
   hineingreifen. Also konnte die Blende nirgends brechen, hat sich auf
   `max-content` gestellt - 476px - und ist aus ihrer 320px breiten
   Ueberschrift herausgewachsen.

   Das war auch der Grund, warum keine der bisherigen Massnahmen half: Der
   weiche Trennstrich aus dem `Trennbar`-Feld war da, `hyphens: auto` stand
   am Laeufer, und das Woerterbuch ist vorhanden (nachgeprueft). Alle drei
   greifen INNEN, und innen wurde nie gebrochen, weil die Breite schon
   aussen feststand.

   UND EIN ZWEITER SCHRITT, der beim ersten Versuch fehlte: Die Blende
   selbst muss auch ein Block werden. `class="block"` steht an ihr, aber
   `[data-mask]{display:inline-block}` aus der erzeugten Schicht gewinnt -
   gleiche Spezifitaet, spaeter notiert. Als `inline-block` bemisst sie sich
   nach ihrem Inhalt, und ihre MINDESTbreite ist hier 476px: das Fragment
   „Maengelbeseitigungs-" in Plakatgroesse. Breiter als das Telefon, also
   laeuft sie heraus, egal was innen erlaubt ist.

   Dass `hyphens: auto` das nicht rettet, hat einen Grund: Die Mindestbreite
   zaehlt Trennstellen aus dem Woerterbuch NICHT mit, nur harte Stellen wie
   den weichen Trennstrich. Es muss also erst die Breite von aussen
   feststehen - dann trennt das Woerterbuch innerhalb davon.

   Beide Regeln gelten nur fuer die zeilenweiten Blenden (`.block`). Die
   wortweisen in `web/worte.php` bleiben `inline-block`, sonst steht jedes
   Wort der Startseiten-Ueberschrift auf einer eigenen Zeile. */
[data-mask].block,
[data-mask].block > span { display: block; }

/* ── EIN KNOPF ZEIGT DEN ZEIGEFINGER ─────────────────────────────────────
   Gemessen am 13.10.2026 auf elf Seiten: `cursor: default` auf jedem
   `<button>` der Kopfzeile - dem Modusknopf (36x36, nur ein Icon, kein
   Rahmen, kein Grund) und auf dem Telefon zusaetzlich dem Menueknopf.
   Also genau auf den zwei Schaltflaechen, die ohnehin am wenigsten nach
   Schaltflaeche aussehen, und das auf JEDER Seite.

   Es ist kein Versehen im Haus-CSS, sondern der Browser-Vorgabewert:
   `<button>` steht auf `cursor: default`, und die Grundschicht von
   Tailwind v4 setzt das - anders als v3 - nicht mehr um. Wer die Maus
   darueber haelt, bekommt vom Pfeil keine Auskunft.

   Links brauchen die Regel nicht, die tragen den Zeigefinger selbst.
   `:disabled` bleibt ausgenommen - ein Knopf, der nicht geht, soll auch
   nicht einladen. */
button:not(:disabled),
summary,
[role="button"] { cursor: pointer; }

/* ── Ueberschriften trennen NICHT ────────────────────────────────────────
   12.10.2026, und am selben Tag zurueckgenommen. Hier stand kurz
   `hyphens: auto` fuer h1 bis h4 und dd, weil „Brandschutzkonzept" auf
   einem 360px-Telefon mitten im Wort brach.

   DIE KUR WAR SCHLIMMER ALS DAS LEIDEN. Gemessen auf acht Seiten: 19
   Trennungen mitten im Wort auf 1280px und 16 auf 390px, und jede einzelne
   an einem Element mit dieser Regel. Darunter „von uns erw-arten",
   „Expertise von Anf-ang an", „Dein Weg vom Stud-ium" - in Ueberschriften
   von 40 bis 77 Pixeln, wo eine Trennung ohnehin nie gut aussieht.

   Der Grund steht zehn Zeilen tiefer bei [data-sigwort] schon einmal
   beschrieben: `text-wrap: balance` zieht einen Trennstrich dem Umbruch am
   Leerzeichen VOR, wenn die Zeilen dadurch gleichmaessiger werden. Bei
   kurzen Ueberschriften ist das fast immer der Fall und fast immer falsch.
   Ich habe die Warnung gelesen und die Regel trotzdem global gesetzt.

   WO EINE UEBERSCHRIFT ZU BRECHEN DROHT, ist ihr Kasten zu schmal - das
   ist ein Layoutfehler und wird im Layout behoben, nicht mit einem
   Trennstrich kaschiert. Einzelne Stellen, an denen eine Trennung
   wirklich noetig ist, tragen sie weiterhin selbst (data-sigwort,
   data-kachelwort, die Prinzipientitel), jeweils mit `lang="de"`. */

/* ── Einwilligungsbanner (Klaro) ─────────────────────────────────────────
   Klaros eigenes Stylesheet liegt vollständig unter `.klaro` und wird VOR
   dieser Datei geladen (siehe web/kopf.php). Hier stehen nur die Stellen,
   an denen das Haus anders aussieht als Klaros Vorgabe: eckig statt
   abgerundet, 2px-Linien, Hausschrift, Akzentrot.

   Die Datei selbst wird NIE angefasst - sie ist Fremdsoftware und liegt
   unverändert in public/klaro/ (Prüfsummen in deren LIESMICH.md). Geändert
   wird ausschliesslich über ihre Variablen und über Regeln hier.

   WIE KLARO SEINE FARBEN SETZT: zweimal je Eigenschaft, erst fest, dann
   `var(--name, fest)`. Eine Variable, die wir hier NICHT setzen, bleibt
   also auf Klaros Wert stehen - lautlos. Genau so blieb „Auswahl
   speichern" bis zum 12.10.2026 Bootstrap-blau: `--blue1` fehlte in
   dieser Liste, und blau war nirgends zu sehen ausser auf dem Knopf
   selbst. Deshalb steht hier JEDE Variable, die klaro.css kennt, auch
   wenn sie denselben Wert bekommt wie ihr Nachbar. */
.klaro {
  /* Zustimmen und Schalter an: das Akzentrot des Hauses. */
  --green1: var(--color-accent);
  --green2: var(--color-accent);
  --green3: var(--color-accent);
  /* „Auswahl speichern". Bei Klaro blau, hier die Tintenfarbe: Die
     Hauptentscheidung ist rot, die Nebenentscheidung ruhig. Zwei kräftige
     Farben nebeneinander würden um dieselbe Aufmerksamkeit streiten. */
  --blue1: var(--color-ink);
  --blue2: var(--color-ink);
  --dark1: var(--color-ink);
  --dark2: color-mix(in srgb, var(--color-bg) 34%, transparent);
  --dark3: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --light1: var(--color-bg);
  --light2: color-mix(in srgb, var(--color-bg) 78%, transparent);
  --light3: color-mix(in srgb, var(--color-bg) 34%, transparent);
  --white2: var(--color-bg);
  --white3: var(--color-bg);
  --button-text-color: #fff;
  --font-family: var(--font-sans);
  --title-font-family: var(--font-heading);
  --border-radius: 0px;
  --border-width: 2px;
  --border-style: solid;
  --box-shadow-color: transparent;
}

/* Rund ist nur, was rund sein muss - und ein Banner muss es nicht. Keine
   weichen Schatten; der Rahmen trägt die Abgrenzung. */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 0;
  border: 2px solid var(--color-accent);
  box-shadow: none;
}
.klaro .cookie-modal .cm-modal .cm-header { border-bottom: 2px solid color-mix(in srgb, var(--color-bg) 26%, transparent); }
.klaro .cookie-modal .cm-modal .cm-footer { border-top: 2px solid color-mix(in srgb, var(--color-bg) 26%, transparent); }

/* DIESELBE TIEFE WIE KLARO. Klaro schreibt seine Knopfregeln als
   `.klaro .cookie-modal .cm-btn` - drei Stufen. Eine Regel `.klaro .cm-btn`
   hat nur zwei und verliert; die Rahmen blieben dadurch auf 0px stehen,
   und die beiden linken Knoepfe sahen aus wie blosser Text. Nicht mit
   !important erschlagen, sondern mit derselben Zahl von Stufen. */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 12px clamp(16px, 2.2vw, 26px);
  box-shadow: none;
  border: 2px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success { background: var(--color-accent); border-color: var(--color-accent); }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover { background: transparent; color: var(--color-accent); }
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info { background: transparent; border-color: var(--color-bg); color: var(--color-bg); }
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover { background: var(--color-bg); color: var(--color-ink); }
/* „Nur das Nötige" ist eine vollwertige Wahl und sieht auch so aus. Ein
   Ablehnen, das wie ein Link aussieht, waehrend das Zustimmen ein Knopf
   ist, ist keine freie Entscheidung. */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-bg) 50%, transparent);
  color: var(--color-bg);
}
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover { border-color: var(--color-bg); }

.klaro .cm-modal .cm-header h1,
.klaro .cookie-notice h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-bg);
}
/* Der Verweis auf die Datenschutzerklärung muss lesbar sein - er ist die
   Rechtsgrundlage der ganzen Entscheidung. Rot auf der Tintenfläche ist zu
   dunkel; unterstrichen und in Schriftfarbe ist er beides, auffindbar und
   lesbar. */
.klaro .cookie-modal a,
.klaro .cookie-notice a {
  color: var(--color-bg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
}
.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover { text-decoration-color: var(--color-bg); }

/* Der Schalter je Dienst: eckig, in Akzentfarbe. */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--color-accent); }
.klaro .cm-list-label .slider,
.klaro .cm-list-label .slider:before,
.klaro .cm-list-label .slider.round,
.klaro .cm-list-label .slider.round:before { border-radius: 0; }
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider { background-color: color-mix(in srgb, var(--color-bg) 30%, transparent); }
.klaro .cookie-modal .cm-list-label .slider:before,
.klaro .cookie-notice .cm-list-label .slider:before { background-color: var(--color-bg); }
/* Sichtbar, wohin die Tastatur zeigt - dieselbe Marke wie überall sonst. */
.klaro .cm-list-label input:focus + .slider { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Was an der Stelle steht, solange nichts geladen werden darf ─────────
   EIN PLATZHALTER IST KEIN FEHLER UND SIEHT AUCH NICHT SO AUS. Er sagt,
   was dort stünde, von wem es käme und wie man es bekommt - und er trägt
   den Schalter gleich bei sich, damit niemand erst in die Fusszeile muss.
   Was daneben auch ohne Zustimmung geht (Telefon, E-Mail, der Link zum
   Anbieter), bleibt sichtbar. */
[data-consent-dienst] {
  background: var(--color-surface);
  border: 2px solid var(--color-divider);
  border-left: 2px solid var(--color-accent);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
[data-consent-dienst] [data-consent-marke] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
[data-consent-dienst] [data-consent-titel] {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-ink);
}
[data-consent-dienst] p {
  margin: 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

/* ── DERSELBE PLATZHALTER AUF DUNKLEM GRUND ──────────────────────────────
   Die Werte oben sind fuer den hellen Satzspiegel gedacht - helle Flaeche,
   dunkle Schrift. Auf der Kursseite steht das Gatter aber in einem
   Abschnitt mit `data-raster-dunkel`, und dort war das Ergebnis am
   13.10.2026 unlesbar: Die Karte blieb hell, die Schrift darin kam aus den
   Inversfarben des Abschnitts. Gemessen 1,08 und 1,22 Kontrast - weiss auf
   weiss. Der Inhaber hat es gemeldet, bevor ich es gemessen hatte.

   Statt die Karte dort zu verbieten, dreht sie sich um: dunkle Flaeche,
   helle Schrift, dieselbe rote Kante links. Eine Gestalt, zwei Gruende -
   so bleibt der Platzhalter ueberall derselbe Gegenstand und faellt nicht
   als Fremdkoerper auf.

   `--color-neutral-800` als Flaeche und nicht `--color-inverse`: Die Karte
   soll sich vom Abschnitt abheben, sonst ist sie keine Karte mehr. */
[data-raster-dunkel] [data-consent-dienst] {
  /* Zwischen Abschnitt (--color-inverse) und --color-neutral-800: Die Karte
     muss sich vom Grund abheben, darf aber nicht so hell werden, dass die
     Marke darauf keinen Kontrast mehr hat. Gemessen auf reinem
     --color-neutral-800 kam `--color-accent-400` auf genau 4,50 - bestanden
     ohne jede Reserve, und das ist zu knapp fuer eine Schrift von 12px. */
  background: color-mix(in srgb, var(--color-neutral-800) 72%, var(--color-inverse));
  border-color: var(--color-neutral-700);
  border-left-color: var(--color-accent);
}
/* Die Marke bleibt rot, aber im hellen Ton der Reihe - `--color-accent`
   selbst kommt auf dunklem Grund nur auf 1,96. */
[data-raster-dunkel] [data-consent-dienst] [data-consent-marke] { color: var(--color-accent-700); }  /* 400 war auf der inversen Flaeche zu hell: 2,01 : 1 im Dunkelmodus, gemessen 21.10.2026 */
[data-raster-dunkel] [data-consent-dienst] [data-consent-titel] { color: var(--color-on-inverse); }
[data-raster-dunkel] [data-consent-dienst] p { color: var(--color-neutral-300); }

/* DER AUSWEGLINK BEKOMMT SEINE FARBE HIER, NICHT AM ELEMENT. In kurs.php
   stand sie als `style="color:var(--color-ink)"` am Link - und ein
   Inline-Stil schlaegt jedes Stylesheet. Auf dunklem Grund ergab das 1,41.
   Jetzt steht der helle Fall hier und der dunkle darunter; am Element steht
   keine Farbe mehr, und damit kann sie auch nicht mehr an einer Stelle
   richtig und an der anderen falsch sein. */
[data-consent-dienst] a:not([class*="btn"]) { color: var(--color-ink); }
[data-raster-dunkel] [data-consent-dienst] a:not([class*="btn"]) { color: var(--color-on-inverse); }

@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-modal .cm-btn,
  .klaro .cookie-notice .cm-btn { transition: none; }
}

/* ── Hero-Signatur ───────────────────────────────────────────────────────
   09.10.2026. Eine gezeichnete Figur dort, wo sonst ein Foto läge
   (web/signatur.php). Geometrie und Gewand kommen aus der Werte-Grafik
   (bsik_werte.jpeg), nach der schon die Prinzipien gebaut sind: Ring,
   Mitte, ein Akzentbogen, 2px-Linien, keine weichen Schatten. Daneben
   steht eine Messlinie mit benannten Stationen — die ist echter Text und
   kein SVG-Pfad, damit sie gelesen, vorgelesen und umgebrochen werden kann.

   Die Figur ist VERWANDT mit dem Prinzipienkreis, nicht gleich: dort vier
   Karten um eine Mitte, hier ein Ring neben einer Linie. Eigene Namen, weil
   die Geometrie eine andere ist — [data-mitte] hätte in beiden Abschnitten
   etwas anderes bedeutet. */
[data-signatur] {
  --sig-linie: color-mix(in srgb, var(--color-on-inverse) 26%, transparent);
  --sig-text:  var(--color-on-inverse);
  --sig-marke: var(--color-accent-500);
  --sig-grund: var(--color-inverse);
  background: var(--sig-grund);
  overflow: hidden;
}
[data-signatur][data-grund="surface"] {
  --sig-linie: var(--color-divider);
  --sig-text:  var(--color-ink);
  --sig-marke: var(--color-accent);
  --sig-grund: var(--color-surface);
  border-top:    2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}

[data-sigraum] {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) var(--gutter);
  display: grid;
  grid-template-columns: clamp(170px, 19vw, 260px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 68px);
}
/* Ein Ring neben einer vierspaltigen Messlinie braucht Breite, die ein
   Telefon nicht hat: Dort fällt der Ring nach oben und wird kleiner. */
@media (max-width: 800px) {
  [data-sigraum] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  [data-sigring]  { max-width: 190px; }
}

[data-sigring] { position: relative; aspect-ratio: 1 / 1; }
[data-sigring] svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
[data-sigteilung] line     { stroke: var(--sig-linie); stroke-width: 1.2; }
[data-sigteilung] line[data-lang] { stroke: var(--sig-text); stroke-width: 2; }

/* Gezeichnet wie der Prinzipienring: Umfang auf 1 normiert, Strich erst
   ganz versetzt, dann auf 0. */
[data-sigbogen] {
  fill: none;
  stroke: var(--sig-linie);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1);
}
[data-sigsektor] {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) .35s;
}
.js [data-sigring][data-in] [data-sigbogen],
.js [data-sigring][data-in] [data-sigsektor],
html:not(.js) [data-sigbogen],
html:not(.js) [data-sigsektor] { stroke-dashoffset: 0; }

/* Die Mitte liegt auf dem Grund des Abschnitts, damit der Ring dahinter
   verschwindet und das Zeichen aufgesetzt wirkt — wie die Medaillons. */
[data-sigmitte] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--sig-grund);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* `min-width: 0` ist hier nicht Kosmetik: Als Rasterfeld bekommt das Band
   sonst die Breite seines laengsten Wortes als Mindestmass, und ein
   „Inbetriebnahme" ohne Trennstelle schiebt die Spalte ueber den Rand
   hinaus - auf dem Telefon sichtbar als waagerechter Bildlauf. */
[data-sigband] { min-width: 0; }

[data-sigstationen] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  margin-top: 20px;
}
/* DIE LINIE LIEGT AUF DER ZELLE, nicht auf der Liste. Zuerst trug die Liste
   sie - dann hatte bei fünf Stationen auf einem schmalen Schirm nur die
   ERSTE Reihe eine Linie, und die Knoten der zweiten schwebten darunter im
   Nichts. Je Zelle gezogen, bekommt jede Reihe ihre eigene; ohne Spaltenspalt
   laufen sie zu einer durchgehenden Linie zusammen. */
[data-sigstation] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 14px 0;
}

/* DIE LINIE ZEICHNET SICH, sie steht nicht einfach da. Je Station ein
   eigenes Stueck, das von links auslaeuft — mit demselben Versatz wie die
   Station selbst, sodass Linie, Knoten und Wort zusammen nach rechts
   wandern. Vorher war es eine feste `border-top`.

   Als Pseudoelement und nicht als Rahmen, weil ein Rahmen sich nicht
   skalieren laesst, ohne den Kasten mitzuziehen. */
[data-sigstation]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--sig-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.js [data-sigstation][data-in]::after,
html:not(.js) [data-sigstation]::after { transform: scaleX(1); }
/* Der Knoten sitzt AUF der Messlinie, nicht daneben: 10px Quadrat, halb
   darüber, halb darunter. Ein Kreis hätte hier nicht gepasst — der Kreis
   ist in dieser Figur dem Ring vorbehalten. */
[data-sigstation]::before {
  content: "";
  position: absolute;
  left: 0;
  /* Mittig AUF der Linie: Die liegt jetzt als Pseudoelement bei top:0 und
     ist 2px hoch, also sitzt ein 10px-Knoten bei 1 - 5 = -4. Vorher trug
     die Station einen `border-top`, und der schob den Bezugspunkt um
     zwei Pixel — daher die alte -6. */
  top: -4px;
  width: 10px;
  height: 10px;
  background: var(--sig-text);
}
[data-sigstation][data-aktiv]::before { background: var(--color-accent); }

/* ── Jede Station antwortet ──────────────────────────────────────────────
   10.10.2026. Auf dem Band gibt es nichts zu klicken — es erklaert einen
   Ablauf, es fuehrt nirgendwohin. Was es trotzdem haben darf, ist eine
   ANTWORT: Wer mit dem Zeiger darauf geht oder mit der Tastatur
   hineinwandert, sieht, welche Station er gerade liest. Das hilft beim
   Lesen einer Reihe aus neun Stationen mehr als jede Animation.

   `:focus-within` ist nicht Zierrat: Ohne sie bekaeme nur die Maus eine
   Rueckmeldung, und die Tastatur ginge leer aus. */
[data-sigstation] [data-sigwort],
[data-sigstation] [data-sigtext] { transition: color .22s ease; }
[data-sigstation]::before { transition: background .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }

[data-sigstation]:hover [data-sigwort],
[data-sigstation]:focus-within [data-sigwort] { color: var(--color-accent); }
[data-sigstation]:hover [data-sigtext],
[data-sigstation]:focus-within [data-sigtext] { color: var(--sig-text); }
[data-sigstation]:hover::before,
[data-sigstation]:focus-within::before {
  background: var(--color-accent);
  transform: scale(1.5);
}

/* Auf Geraeten ohne Zeiger faellt das weg: Dort gaebe es kein „darueber",
   und ein Zustand, der beim Antippen haengenbleibt, verwirrt mehr als er
   hilft. */
@media (hover: none) {
  [data-sigstation]:hover [data-sigwort] { color: var(--sig-text); }
  [data-sigstation][data-aktiv]:hover [data-sigwort] { color: var(--color-accent); }
  [data-sigstation]:hover::before { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-sigstation]::after { transition: none; transform: scaleX(1); }
  [data-sigstation]::before { transition: background .22s ease; }
  [data-sigstation]:hover::before, [data-sigstation]:focus-within::before { transform: none; }
}
/* Die Notizzeile ueber der Messlinie. Die Farbe stand bis zum 10.10.2026
   inline am Element; damit war `data-signotiz` ein Haken ohne Regel, und der
   Selbsttest hat ihn zu Recht gemeldet. Ein Attribut, das nichts auswaehlt,
   ist Rauschen im Markup. */
[data-signotiz] { color: var(--sig-marke); }

/* DIE FARBE MUSS HIER STEHEN. Ohne sie erbt die Nummer die Tintenfarbe des
   Dokuments - und die ist auf dem dunklen Band dieselbe wie der Grund. Die
   Nummern waren vom 09. bis zum 10.10.2026 schlicht unsichtbar, und zwar
   auf jeder Leistungsseite; im Markup standen sie, im Bild fehlten sie.
   Aufgefallen ist es erst, als die ringlose Fassung sie gross setzte. */
[data-signummer] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--sig-marke);
  font-variant-numeric: tabular-nums;
}
[data-sigwort] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--sig-text);
  /* `hyphens: auto` OHNE `text-wrap: balance` — beide Haelften haben einen
     Grund, und die eine ohne die andere geht schief:

     MIT `balance` machte der Ausgleicher aus „digital strukturieren" ein
     „digi-tal strukturieren": Er zieht einen Trennstrich dem Umbruch am
     Leerzeichen vor, wenn die Zeilen dadurch gleichmaessiger werden. Bei
     zwei Woertern ist das fast immer der Fall und fast immer falsch.

     OHNE `auto` brach „Brandschutzkonzept" als „Brandschutzkonz|ept" —
     ohne Trennstrich, mitten im Wort, weil `overflow-wrap: break-word`
     dann die einzige Notbremse ist. Deutsche Komposita sind hier die
     Regel, nicht die Ausnahme; sie brauchen echte Silbentrennung.

     `lang="de"` steht am Element, sonst trennt der Browser nach englischen
     Regeln oder gar nicht. */
  hyphens: auto;
  overflow-wrap: break-word;
}
[data-sigstation][data-aktiv] [data-sigwort] { color: var(--color-accent); }

/* Das Zeichen einer Station. Es steht UEBER der Nummer, nicht daneben:
   Nebeneinander konkurrieren zwei kleine Dinge um dieselbe Zeile, und bei
   sechs Stationen auf einem Telefon ist dafuer kein Platz. */
[data-sigzeichen] {
  display: inline-flex;
  color: var(--color-accent);
  margin-bottom: 2px;
}

/* Der Satz unter dem Stichwort. Gedaempft, damit die Reihe der Stichwoerter
   die Linie fuehrt und der Satz sie erklaert — nicht umgekehrt. Auf dem
   dunklen Band braucht „gedaempft" einen eigenen Wert: Ein Grau, das auf
   Weiss ruhig wirkt, verschwindet auf Tinte. */
[data-sigtext] {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--sig-text) 72%, transparent);
  text-wrap: pretty;
}
[data-sigform="linie"] [data-sigtext] { font-size: clamp(14px, 1.15vw, 16px); }

@media (prefers-reduced-motion: reduce) {
  [data-sigbogen], [data-sigsektor] { transition: none; stroke-dashoffset: 0; }
}

/* Ohne Ring: nur die Messlinie, dafür über die ganze Breite und groesser.
   10.10.2026, fuer die Karriereseite — dort steht eine Bildschirmhoehe
   weiter unten schon der Prinzipienkreis, und ein zweiter Ring daeumt den
   ersten ein. Die Zahlen bekommen hier das Gewicht, das sonst der Ring
   traegt; das Zeichen wandert in die Notizzeile. */
[data-sigform="linie"] [data-sigraum] {
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(44px, 5.5vw, 84px);
  padding-bottom: clamp(44px, 5.5vw, 84px);
}
[data-sigform="linie"] [data-sigstationen] { margin-top: clamp(22px, 2.6vw, 36px); }
[data-sigform="linie"] [data-sigstation] { padding: 22px 22px 18px 0; }
[data-sigform="linie"] [data-sigstation]::before { width: 12px; height: 12px; top: -5px; }
[data-sigform="linie"] [data-signummer] {
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.03em;
}
[data-sigform="linie"] [data-sigwort] { font-size: clamp(16px, 1.5vw, 21px); }

/* ── Kapitelmarke ────────────────────────────────────────────────────────
   09.10.2026. Linie über die ganze Breite, darunter Nummer und Marke
   (web/kapitel.php). Macht aus einer langen Leistungsseite ein Dokument
   mit Kapiteln. Die Linie ist [data-rule] und damit derselbe Mechanismus
   wie in den Leistungszeilen — sie sitzt 2px über dem Kasten, deshalb das
   Polster oben. */
[data-kapitel] {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 26px);
  padding-top: 14px;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
[data-kapnummer] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Konstruktionsraster ─────────────────────────────────────────────────
   09.10.2026. Ein sehr blasses Planpapier hinter den Hero-Bereichen: feines
   Netz, alle vier Felder eine stärkere Linie. Was ein Ingenieurbüro
   ausliefert, liegt auf solchem Papier — das ist die Bildsprache des Hauses,
   und sie kostet kein einziges Bild.

   ES MUSS BLASS BLEIBEN. 5 und 9 Prozent Tinte sind die Grenze, an der das
   Raster den Grund strukturiert, ohne mit der Schrift zu konkurrieren. Nach
   unten läuft es weich aus, damit der Abschnitt darunter eine saubere Kante
   hat und nicht in einem abgeschnittenen Netz endet.

   Die Kinder werden angehoben, statt das Raster mit z-index:-1 nach hinten
   zu legen: Hinter dem Element landet es sonst hinter dessen eigenem Grund
   und ist bei jedem Abschnitt mit Hintergrund unsichtbar. */
[data-raster] {
  --raster-fein: color-mix(in srgb, var(--color-ink) 5%, transparent);
  --raster-grob: color-mix(in srgb, var(--color-ink) 9%, transparent);
  position: relative;
}
[data-raster] > * { position: relative; z-index: 1; }
[data-raster]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--raster-fein) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--raster-fein) 0 1px, transparent 1px 100%),
    linear-gradient(to right,  var(--raster-grob) 0 2px, transparent 2px 100%),
    linear-gradient(to bottom, var(--raster-grob) 0 2px, transparent 2px 100%);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

/* ── Bildschirmhohes Plakat ──────────────────────────────────────────────
   10.10.2026. Der Einstieg der Startseite stand bei 900 Pixel Schirmhoehe
   165 Pixel unter der Kante: Wer die Seite oeffnete, sah den Knopf nicht.
   Jetzt fuellt das Plakat genau den Platz unter der Kopfzeile.

   `svh` statt `vh`: Auf dem Telefon zaehlt `vh` ohne die Browserleisten,
   die erst beim Scrollen verschwinden — ein Hero mit `100vh` ist dort beim
   Laden zu hoch, und wieder faellt der Knopf heraus.

   Die Kopfzeile ist 84px hoch plus 2px Kante; 88 deckt beides mit einer
   Reserve ab. Kleiner als 520px wird das Plakat nie, sonst presste es auf
   einem liegenden Telefon alles uebereinander. */
[data-plakat-voll] {
  min-height: max(520px, calc(100svh - 88px));
  display: flex;
  align-items: stretch;
}

/* ── Kartenzelle nach der Werte-Grafik ───────────────────────────────────
   10.10.2026. Die Zellen von „Was du von uns erwarten kannst" waren eine
   Tabelle: kleine Nummer, schwarze Zeile, grauer Satz. Korrekt und kalt —
   auf einer Stellenanzeige das falsche Signal.

   Die Werte-Grafik (bsik_werte.jpeg) macht es waermer, und zwar mit genau
   drei Mitteln: ein rotes Zeichen im Kreis, eine grosse rote Nummer, die
   Ueberschrift in Rot. Mehr ist es nicht. Dieselben drei Mittel hier, im
   Gewand des Hauses — 2px-Linie statt weichem Schatten, Quadrat statt
   abgerundeter Karte. Die ANORDNUNG kommt aus dem Bild, das Gewand bleibt. */
[data-zeichen] {
  width: 46px;
  height: 46px;
  flex: none;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-zellnr] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* ═══ Leichtigkeit, 10.10.2026 ═════════════════════════════════════════════
   Die Seite trug zu viel Gewicht: 114 Trennlinien in 40 Prozent Tinte, ein
   Klappmenü mit schwarzem 2px-Rahmen, grosse schwarze Bloecke ohne jede
   Struktur darin. Alles einzeln richtig, zusammen massiv.

   Drei Eingriffe, in dieser Reihenfolge wirksam:
     1. die Trennlinie wird leiser — sie gliedert, sie schreit nicht
     2. die harten schwarzen Linien, die BETONEN sollen, werden Akzent
     3. die dunklen Bloecke bekommen Tiefe statt Flaeche

   WARUM AN DER VARIABLEN UND NICHT AN 114 STELLEN: Die Trennlinie ist eine
   Entscheidung, kein Einzelfall. Wer sie spaeter anders will, soll sie an
   einer Stelle aendern. */

/* 40 % → 24 % Tinte. Darunter verschwindet sie auf hellem Grund; darueber
   konkurriert sie mit der Schrift. Der Dunkelmodus braucht einen eigenen
   Wert: Dieselbe Deckkraft wirkt auf dunklem Grund staerker. */
:root:not(.dark) { --color-divider: #201e1d3d; }
.dark            { --color-divider: #f3f2f22e; }

/* ── Tiefe in den dunklen Bloecken ───────────────────────────────────────
   Das Konstruktionsraster, aber hell auf dunkel und noch blasser: 4 und 7
   Prozent. Die grossen schwarzen Flaechen — Vorgehen, Entwicklungsweg,
   Signaturband — lagen bisher als reine Farbe da. Mit dem Raster bekommen
   sie dieselbe Herkunft wie die hellen Abschnitte: Planpapier, nur nachts.

   Es laeuft NACH OBEN aus, nicht nach unten wie beim hellen Raster: Diese
   Bloecke folgen auf einen hellen Abschnitt, und die Kante oben ist die,
   an der das Auge haengenbleibt. */
[data-raster-dunkel] {
  --raster-fein: color-mix(in srgb, var(--color-on-inverse) 4%, transparent);
  --raster-grob: color-mix(in srgb, var(--color-on-inverse) 7%, transparent);
  position: relative;
}
.dark [data-raster-dunkel] {
  --raster-fein: color-mix(in srgb, var(--color-inverse) 5%, transparent);
  --raster-grob: color-mix(in srgb, var(--color-inverse) 9%, transparent);
}
[data-raster-dunkel] > * { position: relative; z-index: 1; }
[data-raster-dunkel]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--raster-fein) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--raster-fein) 0 1px, transparent 1px 100%),
    linear-gradient(to right,  var(--raster-grob) 0 2px, transparent 2px 100%),
    linear-gradient(to bottom, var(--raster-grob) 0 2px, transparent 2px 100%);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 48%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 48%, transparent 100%);
}

/* ── Das Klappmenue wird leicht ──────────────────────────────────────────
   Es hatte einen schwarzen 2px-Rahmen und sass damit wie ein Kasten auf der
   Seite. Jetzt: eine HAARLINIE ringsum, eine Akzentkante oben, und ein
   weicher Schatten, der es abhebt, statt es einzurahmen.

   Ein weicher Schatten widerspricht sonst dem Haus — hier nicht: Die
   Werte-Grafik, an der sich diese Seite ausrichtet, arbeitet selbst mit
   weichen Schatten, und ein schwebendes Menue IST etwas anderes als eine
   Inhaltsflaeche. Es liegt ueber der Seite, also darf man das sehen. */
[data-klappfeld] {
  border: 1px solid var(--color-divider);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--color-ink) 42%, transparent),
              0 2px 8px -4px color-mix(in srgb, var(--color-ink) 24%, transparent);
}
[data-klappfeld] > a { border-top-color: var(--color-divider) !important; }

/* ── Die klebende Leiste am unteren Rand ─────────────────────────────────
   Sie war eine rote Flaeche mit einer kleinen Zeile links und einem grossen
   schwarzen Knopf rechts — zwei Dinge, die sich nicht aufeinander beziehen.

   Jetzt traegt sie drei: woruebers geht, eine zweite, leise Moeglichkeit
   (anrufen) und die Handlung. Der Knopf wird kleiner, damit die Leiste
   nicht von ihm beherrscht wird, und bekommt oben eine dunkle Haarlinie,
   die sie vom Inhalt trennt. */
[data-sticky-cta] {
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 28%, transparent);
  box-shadow: 0 -14px 34px -20px color-mix(in srgb, var(--color-ink) 55%, transparent);
}
[data-sticky-cta] [data-leistenruf] {
  color: var(--color-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 50%, transparent);
  transition: border-color .2s ease;
}
[data-sticky-cta] [data-leistenruf]:hover { border-bottom-color: var(--color-bg); }

/* ── Auf dem Telefon so schmal wie moeglich ──────────────────────────────
   GEMESSEN am 12.10.2026 auf 360x640: Kopfzeile 88px plus Fussleiste 67px
   sind 155px, also 24 Prozent des Bildschirms - dauerhaft belegt, auf
   jeder Seite. Was zum Lesen bleibt, sind 485px.

   Die Notiz links war dabei der schlechteste Tausch: Sie trug den
   Seitentitel, der bei dieser Breite auf „Brandsch…" abgeschnitten wurde.
   Drei Buchstaben und ein Auslassungszeichen sagen niemandem etwas, und
   sie kosteten die halbe Leistenbreite. Unter 560px steht dort deshalb
   nichts mehr - der Besucher weiss, auf welcher Seite er ist; dafuer hat
   er die Ueberschrift gelesen.

   Uebrig bleibt die Handlung, und die wird schmaler statt kleiner: Die
   Schrift bleibt bei 14px lesbar, nur die Polsterung sinkt. */
@media (max-width: 720px) {
  [data-sticky-cta] [data-leistenruf] { display: none; }
  [data-sticky-cta] [data-leistennotiz] { font-size: 13px; }
}
@media (max-width: 560px) {
  /* Die abgeschnittene Notiz weg - und mit ihr ihr Platz. */
  [data-sticky-cta] [data-leistennotiz] { display: none; }
  [data-sticky-cta] > .section-container {
    min-height: 0 !important;
    padding-top: 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: stretch;
  }
  /* Ohne Nachbarn nimmt der Knopf die Leiste ein: ein Ziel ueber die volle
     Breite trifft sich mit dem Daumen leichter als eines am Rand. */
  [data-sticky-cta] > .section-container > div { flex: 1; }
  [data-sticky-cta] a.btn-ink {
    width: 100%;
    justify-content: center;
    --btn-pad-y: 10px !important;
  }
  /* Der Schatten nach oben faellt weg; bei dieser Hoehe wirkt er wie ein
     zweiter Rand und frisst optisch noch eine Zeile. */
  [data-sticky-cta] { box-shadow: none; }
}

/* ── Hausmarke: Logo im Ring ─────────────────────────────────────────────
   10.10.2026. Die Mitte der Werte-Grafik als wiederverwendbares Stück
   (web/hausmarke.php). Sie stand bisher nur auf der Karriereseite im
   Prinzipienkreis; eine Bildsprache, die einmal vorkommt, ist keine.

   Gezeichnet wie der Prinzipienring und die Signatur: Umfang auf 1 normiert,
   Strich erst versetzt, dann auf 0. Drei Stellen, eine Technik. */
[data-hausmarke] {
  position: relative;
  aspect-ratio: 1 / 1;
  flex: none;
}
[data-hausmarke] svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
[data-hmring] {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1);
}
[data-hausmarke][data-ton="bg"]     [data-hmring] { stroke: var(--color-bg); }
[data-hausmarke][data-ton="accent"] [data-hmring] { stroke: var(--color-accent); }

.js [data-hausmarke][data-in] [data-hmring],
html:not(.js) [data-hmring] { stroke-dashoffset: 0; }

/* Der Inhalt sitzt im eingeschriebenen Quadrat des Kreises (Seite =
   Durchmesser / Wurzel 2, also rund 70 %). */
[data-hmmitte] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
[data-hmzeile] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
}
[data-hausmarke][data-ton="bg"]     [data-hmzeile] { color: var(--color-bg); }
[data-hausmarke][data-ton="accent"] [data-hmzeile] { color: var(--color-accent); }

/* Auf roter Flaeche braucht es die weisse Wortmarke — die Hell/Dunkel-
   Umschaltung des Logos richtet sich nach dem SEITEN-Thema, nicht nach dem
   Grund, auf dem es gerade liegt. */
[data-hausmarke][data-ton="bg"] img.dark\:hidden { display: none; }
[data-hausmarke][data-ton="bg"] img.hidden       { display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-hmring] { transition: none; stroke-dashoffset: 0; }
}

/* Das Schlussbanner traegt rechts die Hausmarke. Unter 860px faellt sie
   weg: Ein Ring von 210 Pixeln neben einer Display-Ueberschrift braucht
   Breite, die ein Telefon nicht hat — und der Text ist dort wichtiger. */
[data-schlussraum] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 860px) {
  [data-schlussraum] { grid-template-columns: minmax(0, 1fr); }
  [data-schlussraum] > [data-hausmarke] { display: none; }
}

/* ── Versprechenband nach der Stellenanzeige ─────────────────────────────
   10.10.2026, uebernommen aus `recruiting/werkstudent_brandschutz.jpeg` —
   der gedruckten und geschalteten Anzeige fuer diese Stelle.

   Dort stehen drei Versprechen, jedes mit einem GEFUELLTEN roten Kreis und
   weissem Zeichen darin. Genau diese drei und genau diese Zeichen stehen
   jetzt auch oben auf der Seite.

   WARUM DAS MEHR IST ALS EIN ZITAT: Wer den QR-Code der Anzeige scannt,
   kommt hier an. Findet er dieselben drei Saetze mit denselben drei Zeichen
   wieder, weiss er in einer halben Sekunde, dass er richtig ist. Das ist
   keine Dekoration, das ist Wiedererkennung an der Nahtstelle zwischen
   Anzeige und Seite.

   GEFUELLT, nicht umrissen: Die Karten weiter unten tragen umrissene
   Kreise. Der Unterschied ist Absicht — die drei hier sind das Echo der
   Anzeige und duerfen lauter sein als der Rest der Seite. */
[data-zeichen][data-gefuellt] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

[data-versprechen] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(22px, 3vw, 48px);
}
[data-versprechen] > li {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
}
[data-versprechenwort] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: auto;
}



/* Das Logo in der Hausmarke wird ueber die BREITE begrenzt, nicht ueber die
   Hoehe. `web/logo` setzt `height:…;width:auto`; die Wortmarke ist 5:1
   breit und sprengte damit das eingeschriebene Quadrat des Kreises. Hier
   gewinnt die Breite, die Hoehe folgt. */
[data-hmmitte] img {
  width: 100%;
  max-width: 100%;
  height: auto !important;
}
[data-hmmitte] > span:first-child { width: 100%; justify-content: center; }

/* ── Die Schlusszeile faehrt farbig ein ──────────────────────────────────
   10.10.2026. Ein Verlauf, der beim Einlaufen durch die Woerter zieht: Der
   Satz steht erst gedaempft da und wird von links nach rechts voll.

   WARUM `background-clip: text` UND NICHT `animation-timeline: view()`:
   Letzteres waere an die Scrollposition gekoppelt und damit noch schoener —
   es kennt aber nur Chrome. Hier genuegt der Ausloeser, den die Seite
   ohnehin hat: `data-in`, gesetzt von verhalten.js, sobald der Abschnitt im
   Bild ist. Eine Bewegung, die nur ein Drittel der Besucher sieht, waere
   keine Gestaltung, sondern ein Zufall.

   OHNE JAVASCRIPT UND BEI ABGESCHALTETER BEWEGUNG steht der Satz sofort
   voll da. Der Verlauf ist Zierrat; der Satz ist es nicht. */
[data-sweep] {
  --sweep-voll: var(--color-bg);
  /* 28 statt 42 Prozent: Bei 42 war der Unterschied zwischen voll und leer
     so klein, dass es wie ein Einblenden aussah, nicht wie ein Lauf von
     links nach rechts. Und die Kante dazwischen schmal, sonst verteilt sich
     der Uebergang ueber den ganzen Satz und man sieht keine Front. */
  --sweep-leer: color-mix(in srgb, var(--color-bg) 28%, transparent);
  background-image: linear-gradient(100deg,
    var(--sweep-voll) 0 44%,
    var(--sweep-leer) 54%,
    var(--sweep-leer) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: background-position 1.5s cubic-bezier(.22, .68, .26, 1) .15s;
}
/* ZWEI SELEKTOREN, UND DAS IST NOETIG: verhalten.js setzt `data-in` auf die
   Elemente mit `data-reveal` — das ist hier der RAHMEN, nicht die
   Ueberschrift. Der erste Selektor greift, wenn `data-sweep` selbst
   einlaeuft, der zweite, wenn es in einem einlaufenden Rahmen sitzt. Ohne
   den zweiten startete der Verlauf nie, und der Satz bliebe halb
   durchsichtig stehen. */
.js [data-sweep][data-in],
.js [data-in] [data-sweep] { background-position: 0 0; }

/* Ohne JavaScript bliebe der Satz sonst halb durchsichtig: Die Animation
   darf wegfallen, der Text nicht. */
html:not(.js) [data-sweep] {
  background-image: none;
  color: var(--sweep-voll);
}

@media (prefers-reduced-motion: reduce) {
  [data-sweep] {
    transition: none;
    background-image: none;
    color: var(--sweep-voll);
  }
}

/* ── Die klebende Leiste in der Sprache der Messlinie ────────────────────
   10.10.2026. Oben im Vorspann stehen dieselben Stationen als Messlinie:
   2px-Linie, Knoten darauf, Nummer, Wort. Die klebende Leiste im Abschnitt
   „Vorgehen" zeigte sie bisher anders — kleine Nummer, Beschriftung,
   darunter ein 4px-Balken. Zwei Gestalten fuer dieselben fuenf Schritte.

   Jetzt dieselbe Figur, nur dass sie sich beim Lesen FUELLT. Wer oben die
   Linie gesehen hat, erkennt sie hier wieder und sieht an ihr, wo er ist. */
/* `data-wegstation`, NICHT `data-wegsegment`: Letzteres enthaelt die
   Zeichenfolge `data-wegseg` als Anfang, und zwei Selbsttests zaehlen die
   Segmente mit `substr_count($html, 'data-wegseg')`. Mit dem laengeren
   Namen zaehlten sie jedes Segment doppelt und schlugen an — zu Recht.
   Dieselbe Falle steht zehn Zeilen weiter oben schon einmal beschrieben;
   ich bin trotzdem hineingelaufen. */
[data-wegleiste] {
  display: grid;
  gap: 0;
  align-items: start;
}
[data-wegstation] {
  position: relative;
  padding: 14px 16px 0 0;
  min-width: 0;
}
/* Die Spur: durchgehende Linie in Textfarbe, gedaempft. */
[data-wegspur] {
  height: 2px;
  background: color-mix(in srgb, var(--color-bg) 26%, transparent);
  position: relative;
}
[data-wegseg] { height: 100%; background: var(--color-accent); transform-origin: left; }
/* Der Knoten sitzt AUF der Linie, wie bei der Messlinie. */
[data-wegstation]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--color-bg) 42%, transparent);
  transition: background .25s ease;
  z-index: 1;
}
[data-wegstation][data-erreicht]::before { background: var(--color-accent); }

/* ── Der Entwicklungsweg als Kacheln ─────────────────────────────────────
   12.10.2026, dritte Fassung an einem Tag. Die erste hatte sechs ungleiche
   Reihen mit einer 2px-Linie obendrauf, die quer durch das Raster des
   Grundes schnitt. Die zweite zerlegte sie in neun gleiche Felder OHNE
   Text und stellte die Aufgaben als eigene Liste darunter - gleichmaessig,
   aber der Leser musste die beiden Haelften selbst zusammensetzen. Das war
   schlechter als vorher.

   JETZT EINE KACHEL JE GRUPPE: Schritte und ihr Text in einem Stueck. Die
   Gruppierung kommt aus dem Inhalt und geht auf drei Spalten auf - 3, dann
   1+1+1, dann 1+2. Drei volle Reihen, keine Luecke, nichts doppelt.

   Getrennt wird weiter durch Abstand, nicht durch Striche: Der Abschnitt
   traegt schon ein Raster im Grund, und zwei Raster uebereinander ergeben
   Unruhe statt Ordnung. */
[data-wegkacheln] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}
[data-wegkachel] {
  /* OHNE SKRIPT UND BEI ABBESTELLTER BEWEGUNG steht das Blatt offen. Der
     Vorgabewert gehoert HIERHER, auf die Kachel, und nicht auf das Blatt:
     Das Skript setzt `--auf` auf der Kachel, und das Blatt erbt ihn von
     dort. Stuende die 1 auf dem Blatt selbst, schluege diese eigene
     Deklaration den geerbten Wert - das Blatt bliebe fuer immer offen und
     wuesste nie, wo gescrollt wird. Genau so war es zuerst. */
  --auf: 1;
  /* So breit wie die Gruppe Schritte hat, hoechstens drei. */
  grid-column: span var(--breite, 1);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(16px, 1.8vw, 24px);
  background: color-mix(in srgb, var(--color-bg) 6%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
  transition: border-color .3s ease, background .3s ease;
}
.js [data-wegkachel][data-erreicht] {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-bg) 10%, transparent);
}
@media (max-width: 900px) {
  [data-wegkacheln] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ueber zwei Spalten passt keine Dreiergruppe mehr; sie nimmt die volle
     Breite, statt in die naechste Reihe zu rutschen und eine Luecke zu
     hinterlassen. */
  [data-wegkachel] { grid-column: span min(var(--breite, 1), 2); }
}
@media (max-width: 560px) {
  [data-wegkacheln] { grid-template-columns: minmax(0, 1fr); }
  [data-wegkachel] { grid-column: span 1; }
}

/* Der Kopf: die Schritte der Gruppe nebeneinander, solange Platz ist. */
[data-kachelkopf] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 2.4vw, 36px);
}
[data-kachelschritt] { display: flex; align-items: baseline; gap: 10px; }
[data-kachelnummer] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-500);
}
[data-kachelwort] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--color-on-inverse);
  hyphens: auto;
}

/* ── Das Blatt schlaegt auf ──────────────────────────────────────────────
   `--auf` ist DIESELBE ZAHL, die oben das Segment der Messleiste fuellt;
   verhalten.js setzt sie je Kachel. Leiste und Kachel bewegen sich dadurch
   zwangslaeufig gemeinsam - es gibt nichts gleichzuhalten.

   Gekippt liegt das Blatt flach nach hinten und richtet sich beim Scrollen
   auf. Eine Drehung aendert NICHTS am Platzbedarf im Fluss: Die
   Kachelhoehen stehen fest, waehrend der Text aufgeht, und nichts unter
   ihm rutscht weg. Darum eine Drehung und keine Hoehe.

   OHNE SKRIPT UND BEI ABBESTELLTER BEWEGUNG steht `--auf` auf 1 - das
   Blatt ist dann von Anfang an offen. Das Skript setzt die Zahl gar nicht
   erst, wenn Bewegung abbestellt wurde; ein Inline-Stil wuerde jede Regel
   hier schlagen. */
[data-kachelblatt] {
  transform-origin: top center;
  transform: perspective(900px) rotateX(calc((1 - var(--auf, 1)) * -78deg));
  opacity: var(--auf, 1);
  backface-visibility: hidden;
}
[data-kachelblatt] ul { display: flex; flex-direction: column; gap: 10px; }
[data-kachelblatt] li {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--color-neutral-200);
  text-wrap: pretty;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
}

[data-wegnummer] {
  display: block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-500);
}
[data-seglabel] {
  display: block;
  margin-top: 7px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--color-bg);
  hyphens: auto;
}
[data-wegstation]:not([data-erreicht]) [data-seglabel] {
  color: color-mix(in srgb, var(--color-bg) 58%, transparent);
}

/* ═══ Die Farben des Corporate Design, eins zu eins ════════════════════════
   10.10.2026. GEMESSEN, nicht geschaetzt: bsik.de geholt, die Palette des
   Seitenbaukastens ausgelesen, die Logodateien Pixel fuer Pixel gezaehlt.

     key1   #cf2e2e   Akzent — deckt sich mit der CD-Angabe rgb(207,46,46)
     key2   #3d4848   Zweitfarbe, dunkles Graugruen
     light  #f2f2f1   helle Flaeche
     dark   #2b2a2b   dunkle Flaeche und Schrift
     white  #ffffff
     black  #000000

   EIN WIDERSPRUCH BLEIBT, UND ER LIEGT IM CD SELBST: Die Logodateien —
   unsere wie die auf bsik.de — tragen #e10933, nicht #cf2e2e. Zwei
   verschiedene Rot im selben Auftritt. Das Corporate Design entscheidet hier
   ueber die BEDIENELEMENTE; das Logo bleibt die Datei, die es ist. Wer das
   aufloesen will, exportiert das Logo im CD-Rot neu. Ein Selbsttest haelt
   beide Werte fest und meldet, sobald sich einer verschiebt.

   Die Abstufungen des Akzents sind mit `werkzeuge/akzent-umrechnen.py`
   gerechnet: je Stufe dieselbe Strecke Richtung Weiss beziehungsweise
   Schwarz wie zuvor, nur von der neuen Grundfarbe aus. Keine geschaetzten
   Zwischenwerte. */

:root:not(.dark) {
  --color-bg:         #f2f2f1;   /* CD light */
  --color-ink:        #2b2a2b;   /* CD dark  */
  --color-inverse:    #2b2a2b;   /* CD dark  */
  --color-on-inverse: #f2f2f1;   /* CD light */
  --color-line-strong:#2b2a2b;
  /* Die Trennlinie ist dieselbe Farbe mit 24 Prozent Deckung — sie muss
     dem neuen Tintenton folgen, sonst stehen zwei Grau nebeneinander. */
  --color-divider:    #2b2a2b3d;
}

.dark {
  --color-ink:        #f2f2f1;
  --color-inverse:    #f2f2f1;
  --color-on-inverse: #2b2a2b;
  --color-line-strong:#f2f2f1;
  --color-divider:    #f2f2f12e;
}

/* Die Zweitfarbe des CD. Noch an keiner Stelle im Einsatz — sie steht hier,
   damit sie GEPFLEGT ist und nicht beim naechsten Mal wieder nachgemessen
   werden muss. Wer sie einsetzt, nimmt diese Variable und nicht einen
   abgeschriebenen Hexwert. */
:root { --color-zweit: #3d4848; }
.dark { --color-zweit: #b8c6c6; }

/* Die Station als Sprung zum Schritt. Sie soll aussehen wie die anderen
   Stationen — ein Link, der sich als Link aufdraengt, machte aus einer
   Messlinie eine Linkliste. Erkennbar wird er beim Ueberfahren und beim
   Fokus; dafuer sorgt schon die Antwort der Station. */
a[data-sigsprung] {
  text-decoration: none;
  cursor: pointer;
  display: block;
}
a[data-sigsprung]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Die Zellen der Einstiegsleiste. Die Masse standen inline am Element;
   seit es dort ein zweites `style` fuer den Versatz gibt, waere das ein
   doppeltes Attribut gewesen — das zweite haette der Browser verworfen,
   und zwar stillschweigend. */
[data-sz-zelle] {
  padding: 24px;
  color: var(--color-ink);
  border-right: 2px solid var(--color-divider);
}

/* Die Phasenzeilen der Startseite. Die Masse standen inline; seit jede
   Zeile ein `style` fuer ihren Versatz traegt, waere das ein doppeltes
   Attribut — der Browser verwirft das zweite stillschweigend. */
.phasen-zeile { padding: 12px 0; border-top: 2px solid var(--color-divider); }

/* Der Ring als eigenes Stueck (web/ring.php). Er fuellt seinen Rahmen; die
   Groesse gibt der Rahmen vor — im Signaturband [data-sigring], ueber dem
   Vorgehen [data-wegring].

   `data-hausring`, NICHT `data-ring`: Letzteres traegt schon das SVG des
   Prinzipienkreises auf der Karriereseite. Eine Regel auf `[data-ring]`
   haette dessen `position: absolute; inset: 0` ueberschrieben und den Kreis
   aus der Mitte geworfen — und zwar erst beim naechsten Blick auf die
   Karriereseite, nicht hier. */
[data-hausring] { position: relative; width: 100%; height: 100%; }

/* ── Der klebende Kopf des Vorgehens ─────────────────────────────────────
   10.10.2026. Links der Ring, rechts die Messlinie. Beide fuellen sich,
   waehrend man die Schritte darunter liest.

   DAVOR WAR ES DREIMAL DASSELBE: Das Signaturband im Vorspann zeigte die
   fuenf Schritte, die klebende Leiste zeigte sie noch einmal, die Zeilen
   darunter ein drittes Mal. Als Inhaltsangabe gedacht, als Doppelung
   gelesen. Jetzt ein Ort — und dort zeigt die Figur etwas an, statt nur
   dazustehen. */
[data-wegkopf] {
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 132px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  background: var(--color-inverse);
  padding: 14px 0 18px;
}
[data-wegring] { width: 100%; aspect-ratio: 1 / 1; }

/* Die Zeile ueber der Messlinie — dieselbe Marke wie im Signaturband. */
[data-wegnotiz] {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-accent-500);
  margin-bottom: 12px;
}

/* DER FORTSCHRITTSBOGEN. `--weg-anteil` setzt verhalten.js auf den
   Abschnitt; ohne JavaScript bleibt die Zahl bei 0, der Bogen ist
   unsichtbar, und der Ring steht einfach als Ring da. Er erzaehlt dann
   nichts Falsches — nur nichts. */
[data-ringfuellung] {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--weg-anteil, 0));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .25s linear;
}
[data-hausring][data-modus="fortschritt"] [data-sigbogen] {
  stroke: color-mix(in srgb, var(--color-bg) 22%, transparent);
}
[data-hausring][data-modus="fortschritt"] [data-sigteilung] line {
  stroke: color-mix(in srgb, var(--color-bg) 26%, transparent);
}
[data-hausring][data-modus="fortschritt"] [data-sigteilung] line[data-lang] {
  stroke: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* Auf schmalen Schirmen faellt der Ring weg: Ein klebender Kopf, der ein
   Drittel der Hoehe frisst, hilft niemandem beim Lesen. */
@media (max-width: 820px) {
  [data-wegkopf] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-wegring] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ringfuellung] { transition: none; }
}

/* ═══ Online-Krankmeldung, 10.10.2026 ══════════════════════════════════════
   Interne Seite, wird nicht exportiert. Sie traegt dieselbe Sprache wie der
   Rest — 2px-Linien, quadratische Flaechen, Akzent nur dort, wo etwas
   betont gehoert — ist aber waermer gesetzt: Wer sie benutzt, ist krank.

   Die Karten haben deshalb einen leicht getoenten Grund statt eines harten
   Rahmens. Das ist die einzige Stelle im Projekt, an der eine Flaeche
   freundlich statt sachlich sein soll. */

[data-krankakzent] {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  padding: 10px 18px;
}

/* ── Die Schrittanzeige ──────────────────────────────────────────────────
   Dieselbe Messlinie wie auf den Leistungsseiten — nur fuellt sie hier
   nicht das Scrollen, sondern der Fortschritt im Formular. Eine Figur, die
   man schon kennt, erklaert sich nicht noch einmal. */
[data-krankstufen] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(8px, 1vw, 16px);
}
[data-krankstufe] {
  position: relative;
  padding: 16px 14px 0 0;
  border-top: 2px solid var(--color-divider);
}
[data-krankstufe][data-erreicht] { border-top-color: var(--color-accent); }
[data-krankstufe]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  background: var(--color-divider);
}
[data-krankstufe][data-erreicht]::before { background: var(--color-accent); }
[data-krankstufennr] {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--color-ink-dim);
}
[data-krankstufe][data-erreicht] [data-krankstufennr] { color: var(--color-accent); }
[data-krankstufenwort] {
  display: block;
  margin-top: 5px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--color-ink-dim);
}
[data-krankstufe][data-erreicht] [data-krankstufenwort] { color: var(--color-ink); }

/* ── Karten ──────────────────────────────────────────────────────────── */
[data-krankkarte] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 62em;
  padding: clamp(24px, 3vw, 40px);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  border-left: 2px solid var(--color-accent);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
[data-krankkarte-warm]     { background: color-mix(in srgb, #e8a33d 12%, var(--color-surface)); border-left-color: #e8a33d; }
[data-krankkarte-fertig]   { background: color-mix(in srgb, #2f7d4f 10%, var(--color-surface)); border-left-color: #2f7d4f; }
[data-krankkarte-stoerung] { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); }
[data-kranktitel] {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
[data-krankvorgang] { font-size: 15px; color: var(--color-ink-muted); }
[data-kranklink] { color: var(--color-accent); }

[data-krankgruss] { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; }
[data-krankmerke] {
  font-size: 17px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-left: 2px solid var(--color-accent);
}
[data-krankhinweis] {
  max-width: 62em;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-left: 2px solid var(--color-accent);
  font-size: 16px;
  font-weight: 600;
}

/* ── Die Auswahl, ohne JavaScript ────────────────────────────────────────
   Zwei Radiofelder; die Karte faerbt sich ueber :has(input:checked) —
   dieselbe Technik wie die Segmentwahl der Risikomatrix. Das Radiofeld
   selbst bleibt BEDIENBAR und nur optisch verborgen: display:none naehme
   es aus der Tastaturreihenfolge, und dann waere die Seite mit der Tastatur
   nicht mehr zu bedienen. */
[data-krankwahl] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: 62em;
}
[data-krankkarte-wahl] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
[data-krankkarte-wahl] input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
[data-krankkarte-wahl]:hover { border-color: var(--color-accent); }
[data-krankkarte-wahl]:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}
[data-krankkarte-wahl]:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
[data-krankzeichen] {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-divider);
  border-radius: 50%;
  color: var(--color-ink-dim);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
[data-krankkarte-wahl]:has(input:checked) [data-krankzeichen] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
[data-krankwahltext] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.25;
  text-wrap: pretty;
}
[data-krankwahlzusatz] { font-size: 15px; color: var(--color-ink-muted); }

/* ── Das Formular ────────────────────────────────────────────────────── */
[data-krankform] {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
  max-width: 48em;
  margin-top: clamp(28px, 3.4vw, 48px);
}
[data-krankfeld] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
[data-kranklabel] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  padding: 0;
}
[data-kranklabel-klein] {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
}
[data-krankeingabe] {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
  border-radius: 0;
  transition: border-color .18s ease;
}
[data-krankeingabe]:focus {
  outline: none;
  border-color: var(--color-accent);
}
[data-krankeingabe][aria-invalid="true"] { border-color: var(--color-accent); }
textarea[data-krankeingabe] { resize: vertical; min-height: 110px; line-height: 1.55; }

[data-krankdaten] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}
[data-krankhilfe] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
/* Der Hinweis unter dem Freitext ist KEIN Feldfehler, sah aber genauso aus:
   rot, fett, 14px, direkt unter einem Eingabefeld. Im Fehlerfall standen
   damit sechs rote Zeilen untereinander, von denen fuenf Fehler waren und
   eine nicht. Jetzt traegt er eine Kante statt der Farbe. */
[data-krankwarnung] {
  color: var(--color-ink);
  font-weight: 600;
  padding-left: 12px;
  border-left: 2px solid var(--color-accent);
}
[data-krankfehler] {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

/* Der Honigtopf. NICHT display:none — manche Skripte lesen das und lassen
   das Feld dann in Ruhe. So steht es im Markup, ist fuer Menschen
   unsichtbar und fuer die Tastatur nicht erreichbar. */
[data-honigtopf] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[data-krankknoepfe] {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: clamp(6px, 1vw, 14px);
}

/* Die Zellen der internen Uebersicht. */
[data-internzelle] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 24px;
  color: var(--color-ink);
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  transition: background .2s ease;
}
[data-internzelle]:hover { background: var(--color-surface); }


/* === Knopfkontrast im Dunkelmodus, 11.10.2026 ============================
   GEMESSEN, NICHT GESCHAETZT (Playwright, getComputedStyle, WCAG-Formel):

     .btn-ink     weiss auf #f2f2f1   1.12:1   praktisch unsichtbar
     .btn-primary weiss auf #d95858   3.83:1   unter AA (4.5:1)

   Die Ursache ist ein handgeschriebenes `color: #fff` weiter oben. Im
   hellen Modus stimmt es — dort liegt `--color-ink` bei #2b2a2b. Im
   dunklen Modus TAUSCHEN die beiden Werte: `--color-ink` wird hell, der
   Knopf bekommt eine helle Flaeche, und die Schrift blieb weiss. Auf der
   Startseite und in jedem Schlussbanner stand damit ein Knopf, von dem
   nur der Schatten zu sehen war.

   `--color-bg` statt #fff loest das von selbst, weil beide Werte im
   dunklen Modus mitwandern.

   Beim roten Knopf hilft das nicht: Dort ist die FLAECHE zu hell. Der
   dunkle Modus setzt `--color-accent` auf #d95858 (accent-500), damit
   Rot auf schwarzem Grund nicht absaeuft. Fuer eine Flaeche mit weisser
   Schrift ist das zu hell. Der Knopf bekommt deshalb das CD-Rot #cf2e2e
   zurueck: 5.14:1 zur Schrift und 3.43:1 zum Seitengrund — beides ueber
   der Schwelle, und es ist genau der Wert aus dem Corporate Design. */

.dark .btn-ink,
.dark .btn-ink:hover,
.dark .btn-ink:active { color: var(--color-bg); }

.dark .btn-primary,
.dark .btn-primary:active { background: #cf2e2e; color: #fff; }
.dark .btn-primary:hover  { background: #be2a2a; color: #fff; }


/* === Anfrageformular, 11.10.2026 =========================================
   Die Felder, Karten und Knoepfe teilen sich die Regeln mit der
   Krankmeldung (`[data-krank...]`) — dieselbe Sprache, dieselbe Figur. Hier
   steht nur, was dort nicht vorkommt: die beiden Einwilligungskaestchen.

   Sie sind BEWUSST GROSS und mit viel Abstand gesetzt. Ein
   Einwilligungskaestchen, das man kaum trifft, ist kein Zeichen von
   Freiwilligkeit — und die Flaeche gehoert zum Label, nicht nur zum
   Kaestchen selbst. */

[data-anfragekasten] {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px 14px;
  align-items: start;
  max-width: 48em;
  padding: 14px 16px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-divider);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
[data-anfragekasten]:hover { border-left-color: var(--color-accent); }
[data-anfragekasten]:has(input:checked) {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
[data-anfragekasten]:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
[data-anfragekasten] input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
  flex: none;
}

/* ════════════════════════════════════════════════════════════════════════
   VON HAND ERGÄNZT — 20.10.2026   (Haltung und Teamfit auf der Karriereseite)

   Drei Figuren für den Umbau der Karriereseite auf Persönlichkeit und
   Teamfit. Das Dreierband darüber braucht keine eigene Regel: `data-dreier`
   gab es schon und macht genau das.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Die anfassbare Kachel ──────────────────────────────────────────────
   Nur der Hover, die Gestalt steht am Element. Die Kachel ist ein Link -
   auf einen Abschnitt derselben Seite, auf die Karriereseite oder auf eine
   Stellenanzeige; sie soll sich wie einer anfassen lassen, ohne wie ein
   Knopf auszusehen. Invertiert statt eingefärbt: dieselbe Bewegung, die
   auch die Nummern der Leistungsleiste machen.

   `[data-wertkacheln]` UND NICHT `[data-dreier]`. Die erste Fassung hing am
   Rasterhelfer, und der ist allgemein: Er sitzt auch auf dem Vorteilsraster
   der Karriereseite, dem Kurs und der Stellenanzeige. Dass dort heute keine
   Liste `li > a` enthält, ist Zufall und keine Zusage - die naechste haette
   die Invertierung stillschweigend mitbekommen. Ein Rasterhelfer sagt, wie
   breit etwas ist, nicht wie es sich anfuehlt. */
[data-wertkacheln] > li > a:hover,
[data-wertkacheln] > li > a:focus-visible,
a[data-stellenkachel]:hover,
a[data-stellenkachel]:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}
[data-wertkacheln] > li > a:hover .section-label,
[data-wertkacheln] > li > a:focus-visible .section-label {
  color: var(--color-neutral-300);
}
/* Die Eckdaten der Stellenkachel laufen sonst in der Tinte unter: Ihr
   Grauton ist fuer den hellen Grund gerechnet. */
a[data-stellenkachel]:hover [style*="--color-neutral-700"],
a[data-stellenkachel]:focus-visible [style*="--color-neutral-700"] {
  color: var(--color-neutral-300) !important;
}
/* UND DER VORSPANN, aus demselben Grund und derselben Falle.
   Er traegt `color:var(--color-ink-muted)` inline - ein gedaempftes
   Tintengrau, gerechnet fuer den hellen Grund. Auf der invertierten
   Kachel stand es mit 1.3:1 praktisch still. Gemessen am 21.10.2026 im
   Browser, nachdem die Kachel selbst von 1.00:1 geheilt war: Ein zweiter
   Durchlauf findet, was der erste verdeckt hat, weil die Hauptschrift
   vorher in derselben Farbe unsichtbar war.

   `!important` ist hier keine Bequemlichkeit, sondern das einzige
   Mittel gegen einen Inline-Stil - dieselbe Begruendung wie zwei
   Regeln weiter oben. Der saubere Weg waere, die Farbe aus dem
   Inline-Stil in eine Regel zu heben; das ist ein eigener Umbau an
   allen Kacheln dieses Auftritts und nicht der Moment dafuer. */
a[data-stellenkachel]:hover [style*="--color-ink-muted"],
a[data-stellenkachel]:focus-visible [style*="--color-ink-muted"] {
  color: var(--color-neutral-300) !important;
}

/* ── Der herausgestellte Satz je Grundvoraussetzung ─────────────────────
   Das Anführungszeichen links, der Satz rechts, beide oben ausgerichtet.
   Kein Kasten und keine Fläche: Der Satz trägt sich selbst, und ein
   Zitatkasten neben einem Gegengewichtskasten wären zwei Kästen in einem
   Abschnitt, der aus Text besteht. */
[data-haltungszitat] {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-left: 18px;
  border-left: 2px solid var(--color-accent);
}

/* ── Das Gegengewicht ──────────────────────────────────────────────────
   „Was das nicht heisst." Dieselbe Figur wie [data-kompass] bei den
   Prinzipien, und das ist Absicht: Beide sind ein Nachsatz, der die
   Aussage darüber einordnet. Zwei verschiedene Gestalten für dieselbe
   Funktion hätten nur gesagt, dass hier zwei Leute gebaut haben.

   Etwas luftiger, weil hier zwei Absätze stehen können statt einer
   Leitfrage — `margin-top: auto` entfällt deshalb, der Block sitzt im
   Textfluss und nicht am Fuss einer Karte. */
[data-gegengewicht] {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-left: 2px solid var(--color-accent);
}

/* ── Die Wenn-dann-Paare ───────────────────────────────────────────────
   Links die Erwartung, rechts die Zusage, dazwischen eine Linie.

   ALS PAAR GESETZT, NICHT ALS LISTE. Neun Sätze untereinander wären eine
   Aufzählung; zwei Spalten mit einer Linie dazwischen sind ein Handschlag.
   Darum geht es in dem Abschnitt: Das Haus verpflichtet sich zu dem, was es
   erwartet.

   `<dl>` und nicht `<ul>`: Es sind Paare, und Begriff-zu-Beschreibung ist
   genau das, wofür eine Definitionsliste da ist. Ein Vorleseprogramm nennt
   sie dann auch als Paare.

   Die fette Hälfte ist die ZUSAGE, nicht die Erwartung. Erst sah es
   umgekehrt aus - und dann liest man neun fette Forderungen und neun
   blasse Gegenleistungen, also das Gegenteil der Aussage. */
[data-paar] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 2px solid var(--color-divider);
}
[data-paar] > dt {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}
[data-paar] > dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* Auf dem Telefon untereinander: Zwei Spalten mit je drei Wörtern brechen
   neunmal um, und aus dem Paar wird ein Gitter aus Wortresten. Die Zusage
   bekommt dann einen Einzug, damit die Zuordnung sichtbar bleibt. */
@media (max-width: 720px) {
  [data-paar] {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  [data-paar] > dd {
    padding-left: 16px;
    border-left: 2px solid var(--color-accent);
  }
}

/* ── Das Netz unter den Wortmasken ──────────────────────────────────────
   Eine Wortmaske ist `display:inline-block` mit `overflow:hidden` - sie
   KANN nicht umbrechen. Ein Wort, das breiter ist als das Fenster, schiebt
   damit die ganze Seite auseinander, und zwar quer über alle Abschnitte,
   nicht nur über die Überschrift.

   Gemessen am 20.10.2026 auf der Stellenanzeige „Projektkoordinator (m/w/d)
   für sicherheitskritische Infrastruktur": 46px Querscrollen auf 390px,
   76px auf 360px. Derselbe Fehlerfall wie die gedrehte Kreisfigur am
   12.10.2026, nur aus einem Wort statt aus einer Ecke.

   RICHTIG BEHOBEN WIRD ES IM INHALT - `titel_trennbar` setzt `|` an
   erlaubte Trennstellen, daraus wird ein `&shy;`, und dann bricht das Wort
   mit Trennstrich. Diese Regel ist das Netz darunter, für den Tag, an dem
   jemand eine neue Anzeige mit langem Titel anlegt und das Feld leer
   lässt: Dann bricht das Wort ohne Trennstrich, und das ist hässlich -
   aber eine Seite, die sich seitlich verschiebt, ist kaputt.

   `hyphens` bleibt unangetastet. Die Dreischichtung vom 12.10.2026
   (global weg, Überschriften `manual`, `auto` nur in engen Spalten) ist
   eine Entscheidung und keine Lücke; `overflow-wrap` greift erst, wenn
   gar keine erlaubte Trennstelle vorhanden ist. */
[data-words] [data-mask] {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ── Die Kreisfigur mit DREI Punkten ───────────────────────────────────────
   Seit dem 20.10.2026 tragen die drei Grundvoraussetzungen der Karriereseite
   dieselbe Figur, in der vorher die vier Prinzipien standen.

   DIE ANORDNUNG IST BEI DREI SAUBERER ALS BEI VIER. Vier Medaillons sitzen
   auf den Diagonalen, Abstand 90 Grad, und die Lesefolge laeuft 01 02 04 03 -
   ein Kreis kennt keine Zeilen. Drei sitzen bei 150, 30 und 270 Grad, Abstand
   120 Grad, symmetrisch zur Mittelachse: oben links, oben rechts, unten. Die
   Karten stehen genau dort, wohin ihr Medaillon zeigt, und die Lesefolge geht
   damit auf.

       150°  ●         ● 30°          Karte 01 links, Karte 02 rechts,
              \  ___  /               Karte 03 unter dem Kreis - und
               (     )                jedes Medaillon zeigt auf seine.
                \___/
                  ●  270°

   Die Grundregeln stehen oben bei [data-prinzipien]; hier steht nur, was bei
   drei anders ist. */
[data-prinzipien][data-anzahl="3"] > [data-mitte] { grid-row: 1; }
[data-prinzipien][data-anzahl="3"] > [data-karte]:nth-of-type(1) { grid-column: 1; grid-row: 1; }
[data-prinzipien][data-anzahl="3"] > [data-karte]:nth-of-type(2) { grid-column: 3; grid-row: 1; }
/* Die dritte unter dem Kreis, in der Mittelspalte - dort, wohin das
   Medaillon bei 270 Grad zeigt. Ueber die ganze Breite waere sie breiter als
   die beiden daneben und das Bild aus dem Gleichgewicht. */
[data-prinzipien][data-anzahl="3"] > [data-karte]:nth-of-type(3) { grid-column: 2; grid-row: 2; }

/* Die beiden oberen Karten mittig zum Kreis, nicht gestreckt: Bei zwei
   Zeilen Text saehe eine Karte von Kreishoehe aus wie ein leerer Kasten. */
@media (min-width: 1001px) {
  [data-prinzipien][data-anzahl="3"] > [data-karte]:nth-of-type(1),
  [data-prinzipien][data-anzahl="3"] > [data-karte]:nth-of-type(2) {
    align-self: center;
  }
}

/* Unter 1000px gilt die allgemeine Regel: Kreis nach oben, Karten darunter.
   Bei DREI Karten stehen zwei nebeneinander und eine allein - und weil die
   Karten hier einen eigenen Grund haben und mit Abstand stehen, bleibt keine
   Kante offen. Unter 640px untereinander, auch das wie gehabt. */

/* Die Karte ist hier ein LINK auf ihren eigenen Abschnitt, bei den
   Prinzipien war sie ein Kasten. Sie soll sich anfassen lassen, ohne wie ein
   Knopf auszusehen - dieselbe Invertierung wie bei den uebrigen Kacheln. */
a[data-karte]:hover,
a[data-karte]:focus-visible {
  background: var(--color-ink) !important;
  color: var(--color-bg);
}
a[data-karte]:hover [style*="--color-ink-muted"],
a[data-karte]:focus-visible [style*="--color-ink-muted"] {
  color: var(--color-neutral-300) !important;
}


/* ── Auf der inversen Flaeche gilt die Akzentleiter des anderen Modus ──────
 *
 * Die Akzenttoene sind fuer die NORMALE Flaeche gebaut: Im Hellmodus laufen
 * sie nach dunkel (#cf2e2e → #831d1d), im Dunkelmodus nach hell
 * (#d95858 → #eba7a7). Beide Male also VOM Grund weg.
 *
 * Auf der inversen Flaeche ist der Grund umgekehrt - und damit laeuft
 * dieselbe Leiter AUF ihn zu. Gemessen am 21.10.2026:
 *
 *     `--color-accent-700` auf inverser Flaeche
 *       hell    #831d1d auf #2b2a2b   1,47 : 1
 *       dunkel  #eba7a7 auf #f3f2f2   1,77 : 1
 *
 * Das betraf 63 Textstellen auf zwoelf Seiten, in BEIDEN Modi gleich: die
 * Nummern der Baender, die Beschriftungen, die Notizen.
 *
 * HIER WIRD KEIN FARBTON ERFUNDEN. Auf der inversen Flaeche gilt die Leiter
 * des anderen Modus; jeder Wert steht schon in der Palette. Danach:
 *
 *       hell    #eba7a7 auf #2b2a2b   7,23 : 1
 *       dunkel  #831d1d auf #f3f2f2   8,68 : 1
 *
 * `[data-raster-dunkel]` ist der vorhandene Griff dafuer - die Datei
 * verschiebt darin schon die Farben der Einwilligungs-Platzhalter. Der Name
 * kommt vom Raster, gemeint ist die inverse Flaeche.
 */
/* NUR DIE TEXTSPROSSEN DREHEN. `--color-accent` ist nicht nur eine
   Schriftfarbe, sondern die FLAECHE des Primaerknopfes:

       .btn-primary { color: var(--color-bg); background: var(--color-accent); }

   Die erste Fassung drehte sie mit - der Knopf wurde auf der inversen
   Flaeche heller, und seine weisse Schrift fiel von 5,14 auf 3,83 : 1.
   Gemessen am 21.10.2026, und zwar an der eigenen Aenderung.

   Die 600er und die 700er sind reine Textsprossen. Sie drehen. */
/* DIE UEBERFAHRENE STELLENKACHEL STEHT MIT IN DIESER LISTE, denn sie IST
   eine inverse Flaeche - nur eine vorübergehende. Sie traegt deshalb keinen
   Marker, sondern erscheint hier als Zustand.

   Gemessen am 21.10.2026 im Browser: Die Akzentsymbole in der Kachel
   (Pfeil und die vier Eckdaten-Symbole) kamen auf der Tinte auf 2,78 : 1 -
   unter den 3 : 1, die fuer Symbole gelten. Mit der gedrehten 600er
   Sprosse: hell 4,98 : 1 auf #2b2a2b, dunkel 5,27 : 1 auf #f2f2f1.

   Aufgefallen ist es erst, NACHDEM die Kachel selbst geheilt war: Solange
   die Hauptschrift mit 1,00 : 1 unsichtbar war, ging ein Symbol mit 2,78
   in der allgemeinen Unlesbarkeit unter. Ein zweiter Durchlauf nach der
   Reparatur ist deshalb keine Pflichtuebung. */
[data-raster-dunkel],
a[data-stellenkachel]:hover,
a[data-stellenkachel]:focus-visible {
  --color-accent-600: #e17b7b;
  --color-accent-700: #eba7a7;
}

.dark [data-raster-dunkel],
.dark a[data-stellenkachel]:hover,
.dark a[data-stellenkachel]:focus-visible {
  --color-accent-600: #be2a2a;
  --color-accent-700: #831d1d;
}

/* Und die Symbole nehmen diese Sprosse. Sie tragen ihre Farbe inline
   (`style="color:var(--color-accent)"` in `templates/stellen.php`), also
   braucht es `!important` - dieselbe Begruendung wie bei den Eckdaten und
   dem Vorspann weiter oben. `--color-accent` selbst wird NICHT gedreht:
   Sie ist auch die Flaeche des Primaerknopfes, siehe den Hinweis darueber. */
a[data-stellenkachel]:hover [style*="--color-accent"],
a[data-stellenkachel]:focus-visible [style*="--color-accent"] {
  color: var(--color-accent-600) !important;
}


/* ── Kleiner Text in der Akzentfarbe nimmt die 700er-Sprosse ───────────────
 *
 * Die Akzentleiter ist nicht gleichwertig. Gemessen am 21.10.2026, kleiner
 * Text (unter 24 px, also 4,5 : 1 noetig):
 *
 *     Sprosse              normal h/d      invers h/d
 *     --color-accent       4,59 / 4,59     3,74 / 4,59
 *     --color-accent-500   3,42 / 3,42     3,74 / 3,42
 *     --color-accent-700   8,68 / 8,88     7,23 / 8,68
 *
 * Nur die 700er traegt ueberall. Die uebrigen sind fuer Flaechen, Linien und
 * grosse Ziffern - dort genuegen 3 : 1, und dort bleiben sie auch.
 *
 * Die 63 durchgefallenen Textstellen hingen an `--color-accent` oder an
 * `--color-accent-500` (ueber `--sig-marke`). Sie stehen jetzt hier.
 *
 * ZUSAMMEN MIT DER LEITERDREHUNG WEITER OBEN: Auf der inversen Flaeche ist
 * die 700er `#eba7a7` statt `#831d1d`. Beide Regeln greifen ineinander -
 * ohne die Drehung waere die 700er auf der inversen Flaeche die
 * schlechteste Wahl von allen (1,47 : 1).
 */
[data-wegnummer],
[data-wegnotiz],
[data-signummer],
[data-kachelnummer],
[data-bwnummer],
[data-consent-dienst] [data-consent-marke],
[data-sigstation] [data-sigwort],
[data-sigstation]:focus-within [data-sigwort],
[data-sigstation][data-aktiv] [data-sigwort],
[data-sigstation][data-aktiv]:hover [data-sigwort] {
  color: var(--color-accent-700);
}

/* `--sig-marke` faerbt ausschliesslich `[data-signotiz]`, also Text. */
[data-signatur],
[data-signatur][data-grund="surface"] {
  --sig-marke: var(--color-accent-700);
}

/* ── DIE EINSTIEGSKARTE DER KRANKMELDUNG WIRD KOMPAKTER ───────────────────
 *
 * GEMESSEN AM 23.10.2026 im Browser, Schritt 3a, drei Fenster:
 *
 *       1360 x 900   Karte 558 hoch, erstes Eingabefeld bei y 1118
 *       1920 x 1080  Karte 575 hoch, erstes Eingabefeld bei y 1137
 *        390 x 844   Karte 459 hoch, erstes Eingabefeld bei y 1204
 *
 * Auf keinem davon war ein Feld im Bild. Der Inhaber hat die Seite deshalb
 * fuer unfertig gehalten — zu Recht: Was man nicht sieht, ist nicht da.
 * Wer krank ist und das auf dem Telefon oeffnet, denkt dasselbe.
 *
 * WAS HIER GEAENDERT WIRD, IST ABSTAND UND SCHRIFTGRAD, NICHT DER TEXT.
 * Die drei Absaetze kommen aus dem Panel und gehoeren dem Haus; sie zu
 * kuerzen waere eine inhaltliche Entscheidung und nicht meine.
 *
 * Die Karte bleibt als Karte erkennbar: Akzentkante links, getoenter Grund,
 * hervorgehobener Schlussabsatz. Sie wird nur enger gesetzt.
 */
[data-krankkarte] {
  gap: 12px;
  padding: clamp(16px, 1.6vw, 24px);
  font-size: 16px;
  line-height: 1.5;
}

[data-kranktitel] {
  font-size: clamp(19px, 1.6vw, 24px);
}

/* Der Abstand zwischen Karte und Formular war 69 px auf dem Laptop — mehr
   als eine Zeilenhoehe zu viel fuer zwei Dinge, die zusammengehoeren. */
[data-krankform] {
  margin-top: clamp(16px, 1.6vw, 24px);
}

/* Das Polster ueber der Karte. `.section-y` gibt dem ganzen Auftritt seine
   Ruhe (108,8 px auf 1360 gemessen) und bleibt dort unangetastet — hier
   kostet es die Sichtbarkeit des Formulars. Nur oben gekuerzt: unten darf
   der Abstand zum Fuss bleiben, er stoert niemanden. */
[data-krankinhalt] {
  padding-top: clamp(20px, 2.2vw, 32px);
}