/* =============================================================
   app.css — gebündelte Stylesheets (Self-hosted Fonts + Tailwind
   Build + eigene Styles) in einer Datei statt drei Requests.

   WARTUNGSHINWEIS: Der Tailwind-Teil unten ist 1:1 aus
   tailwind-build.css kopiert. Bei einem künftigen Tailwind-
   Rebuild muss dieser Abschnitt manuell aus der neuen
   tailwind-build.css aktualisiert werden (siehe README).
   ============================================================= */

/* Self-hosted Syne + Inter (SIL Open Font License, see OFL-Syne.txt / OFL-Inter.txt).
   Subset to Latin/Latin-1 + common punctuation used on this site. */
@font-face {
  font-family: 'Syne';
  src: url('fonts/syne-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/syne-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/syne-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tailwind build output (siehe Wartungshinweis oben) ---- */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-\[9999px\]{left:-9999px}.bottom-0{bottom:0}.bottom-16{bottom:4rem}.bottom-8{bottom:2rem}.left-0{left:0}.left-1\/2{left:50%}.left-4{left:1rem}.left-\[12\.5\%\]{left:12.5%}.right-0{right:0}.right-6{right:1.5rem}.right-\[12\.5\%\]{right:12.5%}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:.5rem}.top-20{top:5rem}.top-24{top:6rem}.top-8{top:2rem}.top-auto{top:auto}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[120px\]{margin-left:-120px}.-mt-\[136px\]{margin-top:-136px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[272px\]{height:272px}.h-\[420px\]{height:420px}.h-full{height:100%}.h-px{height:1px}.min-h-\[100svh\]{min-height:100svh}.min-h-\[70vh\]{min-height:70vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-2\.5{width:.625rem}.w-3\/4{width:75%}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-5\/6{width:83.333333%}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[240px\]{width:240px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-9{gap:2.25rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/12{border-color:hsla(0,0%,100%,.12)}.border-white\/6{border-color:hsla(0,0%,100%,.06)}.border-white\/8{border-color:hsla(0,0%,100%,.08)}.bg-brand-sand{--tw-bg-opacity:1;background-color:rgb(186 187 177/var(--tw-bg-opacity,1))}.bg-brand-sand\/15{background-color:hsla(66,7%,71%,.15)}.bg-brand-slate{--tw-bg-opacity:1;background-color:rgb(63 68 67/var(--tw-bg-opacity,1))}.bg-brand-slate\/25{background-color:rgba(63,68,67,.25)}.bg-brand-teal{--tw-bg-opacity:1;background-color:rgb(0 140 149/var(--tw-bg-opacity,1))}.bg-brand-teal\/15{background-color:rgba(0,140,149,.15)}.bg-brand-teal\/70{background-color:rgba(0,140,149,.7)}.bg-ink\/98{background-color:rgba(11,12,15,.98)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(21 23 29/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-white\/30{background-color:hsla(0,0%,100%,.3)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-brand-teal{--tw-gradient-from:#008c95 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,140,149,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-teal\/70{--tw-gradient-from:rgba(0,140,149,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,140,149,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-ink{--tw-gradient-from:#0b0c0f var(--tw-gradient-from-position);--tw-gradient-to:rgba(11,12,15,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-ink\/40{--tw-gradient-to:rgba(11,12,15,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(11,12,15,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-inkalt{--tw-gradient-to:rgba(16,18,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#101218 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-brand-sand{--tw-gradient-to:#babbb1 var(--tw-gradient-to-position)}.to-brand-sand\/60{--tw-gradient-to:hsla(66,7%,71%,.6) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-10{padding-bottom:2.5rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-6{padding-bottom:1.5rem}.pt-10{padding-top:2.5rem}.pt-20{padding-top:5rem}.pt-28{padding-top:7rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-display{font-family:Syne,sans-serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[2\.5rem\]{font-size:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[1\.08\]{line-height:1.08}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-brand-teal{--tw-text-opacity:1;color:rgb(0 140 149/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(11 12 15/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/55{color:hsla(0,0%,100%,.55)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/65{color:hsla(0,0%,100%,.65)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/75{color:hsla(0,0%,100%,.75)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-brand-teal{accent-color:#008c95}.opacity-0{opacity:0}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-black\/40{--tw-shadow-color:rgba(0,0,0,.4);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.grayscale{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{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-brand-teal:hover{--tw-text-opacity:1;color:rgb(0 140 149/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-white\/70:hover{color:hsla(0,0%,100%,.7)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:fixed:focus{position:fixed}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[100\]:focus{z-index:100}.focus\:rounded-lg:focus{border-radius:.5rem}.focus\:bg-brand-teal:focus{--tw-bg-opacity:1;background-color:rgb(0 140 149/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:block{display:block}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:p-10{padding:2.5rem}.sm\:pb-28{padding-bottom:7rem}.sm\:pb-32{padding-bottom:8rem}.sm\:pt-40{padding-top:10rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:block{display:block}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:-left-4{left:-1rem}.lg\:left-10{left:2.5rem}.lg\:right-10{right:2.5rem}.lg\:right-4{right:1rem}.lg\:top-32{top:8rem}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-\[520px\]{height:520px}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[0\.85fr_1\.15fr\]{grid-template-columns:.85fr 1.15fr}.lg\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-\[3\.6rem\]{font-size:3.6rem}}
/* ---- Eigene Styles (vormals style.css) ---- */
:root {
    --ink: #0B0C0F;
  }
  * { scroll-behavior: smooth; }
  body {
    background-color: var(--ink);
    color: #F5F5F2;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, .font-display { font-family: 'Syne', sans-serif; }

  ::selection { background: #008C95; color: #fff; }

  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #0B0C0F; }
  ::-webkit-scrollbar-thumb { background: #2A2D36; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #008C95; }

  a, button { -webkit-tap-highlight-color: transparent; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #008C95;
    outline-offset: 3px;
    border-radius: 4px;
  }

  .logo-mark { transition: transform .3s cubic-bezier(.16,1,.3,1); }

  .text-gradient {
    background: linear-gradient(100deg, #F5F5F2 12%, #008C95 40%, #BABBB1 60%, #008C95 82%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 6s ease-in-out infinite;
  }
  @keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .glass-nav {
    background: rgba(11, 12, 15, 0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(245, 245, 242, 0.07);
  }
  .glass-nav.is-scrolled {
    background: rgba(11, 12, 15, 0.8);
  }

  .nav-link { position: relative; padding-bottom: 4px; }
  .nav-link.is-active { color: #F5F5F2; }
  .nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: #008C95;
  }

  .mobile-link.is-active { color: #008C95; }

  .glass-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border: 1px solid rgba(245, 245, 242, 0.09);
    backdrop-filter: blur(10px);
  }

  .btn-primary {
    background: #F5F5F2;
    color: #0B0C0F;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s ease;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -8px rgba(0,140,149,0.45);
    background: linear-gradient(100deg, #008C95, #BABBB1);
    color: #0B0C0F;
  }
  .btn-secondary {
    border: 1px solid rgba(245,245,242,0.18);
    color: #F5F5F2;
    transition: all .35s cubic-bezier(.16,1,.3,1);
  }
  .btn-secondary:hover {
    border-color: rgba(245,245,242,0.5);
    background: rgba(245,245,242,0.06);
    transform: translateY(-2px);
  }

  /* Hero canvas + tilt cards */
  .hero-stage { position: relative; isolation: isolate; }
  #hero-canvas {
    position: absolute; inset: -10%;
    width: 120%; height: 120%;
    filter: blur(60px);
    opacity: 0.9;
    z-index: -1;
    will-change: transform;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
  }
  .hero-grid-overlay {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(186,187,177,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(186,187,177,0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 72%);
    z-index: -1;
    will-change: transform;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
  }
  .hero-text-col {
    will-change: transform, opacity;
    transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .5s ease-out;
    /* Grid items default to a max-content-sized track without an explicit
       min-width override — on narrow phones this let the column (and the
       unbreakable "Marken prägen" text inside it) size itself wider than
       the viewport, which body's overflow-x:hidden then silently clipped
       on the right instead of wrapping. */
    min-width: 0;
  }
  /* The hero grid only gets an explicit column template at the lg
     breakpoint (lg:grid-cols-[1.1fr_0.9fr]); below that, plain "grid"
     has no defined columns, so the browser sizes the implicit single
     column to its content's max-content width instead of the container
     width — the same overflow-behind-the-scenes issue as above, one
     level up. Forcing a real 1fr track on mobile fixes it at the source. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  }
  .tilt-card {
    transition: transform .45s cubic-bezier(.16,1,.3,1);
    will-change: transform;
    transform-style: preserve-3d;
  }

  .hero-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 35%), rgba(0,140,149,0.22), rgba(186,187,177,0.06) 45%, transparent 65%);
    mix-blend-mode: screen;
    transition: opacity .5s ease;
  }
  .hero-spotlight.is-active { opacity: 1; }

  /* ---- Load-in color burst: the hero's big "wow" opening moment ---- */
  .hero-burst {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 42%, rgba(0,140,149,0.9), rgba(186,187,177,0.5) 32%, rgba(63,68,67,0.28) 52%, transparent 70%);
    opacity: 0;
    transform: scale(0.1);
    animation: heroBurst 1.5s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes heroBurst {
    0% { opacity: 0; transform: scale(0.1); }
    18% { opacity: 1; transform: scale(0.55); }
    45% { opacity: 0.85; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.9); }
  }

  /* ---- Oversized background watermark for editorial depth ---- */
  .hero-watermark {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    will-change: transform;
  }
  .hero-watermark span {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(9rem, 22vw, 20rem);
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(245,245,242,0.07);
    white-space: nowrap;
    transform: rotate(-3deg);
  }

  /* ---- Fine film-grain overlay for a cinematic, premium finish ---- */
  .hero-noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- Kinetic headline: words reveal individually instead of as one block ---- */
  .kinetic-mask { display: inline-block; overflow: hidden; vertical-align: top; }
  .kinetic-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(115%) rotate(2deg);
    filter: blur(6px);
    animation: kineticIn .85s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes kineticIn {
    to { opacity: 1; transform: translateY(0) rotate(0deg); filter: blur(0); }
  }

  @keyframes float-y {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(1.2deg); }
  }
  .float-slow { animation: float-y 7s ease-in-out infinite; }
  .float-slower { animation: float-y 9s ease-in-out infinite; animation-delay: -3s; }
  .float-slowest { animation: float-y 8s ease-in-out infinite; animation-delay: -1.5s; }

  @keyframes hero-enter {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-enter { opacity: 0; animation: hero-enter .9s cubic-bezier(.16,1,.3,1) forwards; }

  @keyframes hex-breathe {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50% { transform: rotate(3deg) scale(1.035); }
  }
  .hex-breathe { animation: hex-breathe 11s ease-in-out infinite; transform-origin: center; }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .portfolio-card { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
  .portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px -20px rgba(0,140,149,0.3); }
  .portfolio-card img { transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease; }
  .portfolio-card:hover img { transform: scale(1.06); }
  .portfolio-overlay {
    transition: opacity .4s ease;
    /* Overrides the from/via/to Tailwind gradient utilities on this element:
       those only reach full "from" opacity at the very bottom pixel row, so
       the top line of the text block (the teal eyebrow label) sat in the
       weakly-covered fade zone with the raw screenshot/video showing through —
       hard to read against bright site content. This keeps the whole text
       block solidly backed regardless of what's behind it. */
    background: linear-gradient(to top,
      rgba(11,12,15,1) 0%,
      rgba(11,12,15,1) 42%,
      rgba(11,12,15,0.2) 72%,
      rgba(11,12,15,0) 100%);
  }

  /* ---- Portfolio CTA banner: needs to visually break the pattern instead of
     blending in like a regular card — bright brand gradient + solid dark
     button so it reads as an unmistakable call to action. ---- */
  .cta-banner {
    background: linear-gradient(120deg, #008C95, #BABBB1);
    box-shadow: 0 30px 80px -24px rgba(0,140,149,0.55);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  }
  .cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 36px 90px -18px rgba(0,140,149,0.65);
  }
  .cta-banner h3 { color: #0B0C0F; }
  .cta-eyebrow { color: #0B0C0F; }
  .cta-button {
    background: #0B0C0F;
    color: #F5F5F2;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  }
  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,0.45);
  }

  /* ---- Portfolio hover preview: short scroll-through video of the live site ---- */
  .portfolio-preview-video { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .portfolio-preview-video.is-active { opacity: 1; }

  .service-card { transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease; }
  .service-card:hover { transform: translateY(-6px); border-color: rgba(0,140,149,0.4); background: rgba(0,140,149,0.05); }

  .step-line { background: linear-gradient(90deg, rgba(0,140,149,0.5), rgba(186,187,177,0.15)); }

  /* ---- FAQ accordion ---- */
  .faq-item summary { transition: background .3s ease; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ''; }
  .faq-chevron { transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .faq-item[open] .faq-chevron { transform: rotate(180deg); }
  .faq-item[open] summary { background: rgba(0,140,149,0.06); }

  /* z-index war vorher "auto" — dadurch landete das Panel trotz
     position:fixed im selben Stacking-Level wie <main> und wurde von
     dessen später im DOM stehenden Inhalten überdeckt/durchmischt.
     55 liegt bewusst über der Nav-Leiste (z-50) und den Fab-Buttons
     (z-45), aber unter dem Cookie-Banner (z-90). */
  .mobile-panel { transition: opacity .35s ease, visibility .35s ease; z-index: 55; }

  input, textarea {
    background: rgba(245,245,242,0.03);
    border: 1px solid rgba(245,245,242,0.14);
    transition: border-color .3s ease, background .3s ease;
  }
  input:focus, textarea:focus { border-color: #008C95; background: rgba(245,245,242,0.05); }

  /* ---- Floating action buttons (scroll-to-top, accessibility) ---- */
  .fab-btn {
    position: fixed;
    z-index: 45;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    border: 1px solid rgba(245,245,242,0.14);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.55);
    cursor: pointer;
    transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
  }
  .fab-btn:hover { border-color: rgba(0,140,149,0.55); }

  #scroll-top { right: 24px; opacity: 0; pointer-events: none; transform: translateY(14px); }
  #scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

  #a11y-toggle { left: 24px; }

  .a11y-panel {
    position: fixed;
    z-index: 45;
    bottom: 84px;
    left: 24px;
    width: 300px;
    max-width: calc(100vw - 3rem);
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
  }
  .a11y-panel:not([hidden]) { animation: fabPanelIn .22s cubic-bezier(.16,1,.3,1); }
  @keyframes fabPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .a11y-text-btn {
    padding: 11px 0;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(245,245,242,0.14);
    background: rgba(245,245,242,0.03);
    color: #F5F5F2;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
  }
  .a11y-text-btn[aria-pressed="true"] {
    border-color: #008C95;
    background: rgba(0,140,149,0.18);
    color: #F5F5F2;
  }

  .a11y-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #F5F5F2;
  }
  .a11y-switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 9999px;
    background: rgba(245,245,242,0.14);
    border: none;
    cursor: pointer;
    transition: background .25s ease;
    flex-shrink: 0;
  }
  /* Invisible hit-area extension so the small visual switch still meets a ~44px touch target */
  .a11y-switch::after {
    content: '';
    position: absolute;
    inset: -12px;
  }
  .a11y-switch-dot {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 9999px;
    background: #F5F5F2;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
  }
  .a11y-switch[aria-checked="true"] { background: #008C95; }
  .a11y-switch[aria-checked="true"] .a11y-switch-dot { transform: translateX(18px); }

  /* ---- Accessibility modes (toggled on <html>) ---- */
  html.a11y-scale-1 { font-size: 112.5%; }
  html.a11y-scale-2 { font-size: 125%; }

  html.a11y-grayscale { filter: grayscale(1); }

  html.a11y-links a:not(.fab-btn):not(.btn-primary):not(.btn-secondary) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  html.a11y-contrast body { background-color: #000 !important; color: #fff !important; }
  html.a11y-contrast .text-white\/75,
  html.a11y-contrast .text-white\/70,
  html.a11y-contrast .text-white\/60,
  html.a11y-contrast .text-white\/55,
  html.a11y-contrast .text-white\/50,
  html.a11y-contrast .text-white\/45 { color: #fff !important; }
  html.a11y-contrast a { color: #fff !important; }
  html.a11y-contrast .glass-card,
  html.a11y-contrast .glass-nav,
  html.a11y-contrast .service-card,
  html.a11y-contrast .a11y-panel { background: #000 !important; border-color: #fff !important; }
  html.a11y-contrast .text-gradient { -webkit-text-fill-color: #fff; color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  /* ---- Legal page prose typography ---- */
  .legal-prose h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #F5F5F2;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(245,245,242,0.08);
  }
  .legal-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .legal-prose h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #008C95;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }
  .legal-prose h4 {
    font-weight: 700;
    font-size: 0.95rem;
    color: #F5F5F2;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .legal-prose p { color: rgba(245,245,242,0.7); line-height: 1.75; margin-bottom: 1rem; }
  .legal-prose p.legal-strong { color: rgba(245,245,242,0.85); font-weight: 600; }
  .legal-prose ul { list-style: disc; margin: 0 0 1rem 1.25rem; color: rgba(245,245,242,0.7); }
  .legal-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
  .legal-prose li::marker { color: #008C95; }
  .legal-prose a { color: #008C95; text-decoration: underline; text-underline-offset: 3px; transition: color .25s ease; }
  .legal-prose a:hover { color: #BABBB1; }
  .legal-prose strong { color: #F5F5F2; }

  /* ---- Cookie consent banner ---- */
  #cookie-banner {
    position: fixed;
    z-index: 90;
    left: 16px; right: 16px; bottom: 16px;
    max-width: 620px;
    margin: 0 auto;
    padding: 22px 22px 20px;
    border-radius: 20px;
    background: rgba(16, 18, 24, 0.85);
    border: 1px solid rgba(245,245,242,0.12);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.65);
  }
  #cookie-banner[hidden] { display: none; }
  #cookie-banner.is-visible { animation: cookieIn .5s cubic-bezier(.16,1,.3,1) both; }
  @keyframes cookieIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  #cookie-settings-panel[hidden] { display: none; }
  .cookie-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(245,245,242,0.08);
  }
  .cookie-row:first-child { border-top: none; }

  /* While the cookie banner is open it can overlap the scroll-top / a11y fab buttons
     in the same bottom corner — hide them until the banner is dismissed. */
  body.cookie-banner-open .fab-btn,
  body.cookie-banner-open .a11y-panel { opacity: 0 !important; pointer-events: none !important; }

  @media (max-width: 640px) {
    .hero-watermark { display: none; }
  }

  /* Missing from the current tailwind-build.css (no element used these
     sm:-prefixed combos before the portfolio CTA banner needed them). */
  @media (min-width: 640px) {
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
  }