/* Fliesen Torbecke – statischer Nachbau (ohne Build-Schritt)
   Werte 1:1 aus dem kompilierten Tailwind-v4-Stylesheet der bisherigen Seite übernommen. */

@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/geist-latin-ext-wght-normal.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:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/geist-latin-wght-normal.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}

:root{
  --color-white:#fff;--spacing:.25rem;
  --container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;
  --text-xs:.75rem;--text-xs--lh:calc(1/.75);--text-sm:.875rem;--text-sm--lh:calc(1.25/.875);--text-base:1rem;--text-base--lh:1.5;
  --text-lg:1.125rem;--text-lg--lh:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--lh:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--lh:calc(2/1.5);
  --text-3xl:1.875rem;--text-3xl--lh:1.2;--text-4xl:2.25rem;--text-4xl--lh:calc(2.5/2.25);--text-5xl:3rem;--text-7xl:4.5rem;
  --leading-tight:1.25;--leading-relaxed:1.625;
  --ease:cubic-bezier(.4,0,.2,1);
  --font:"Geist",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  /* Theme (light) */
  --radius:.375rem;
  --background:oklch(97.2% .006 75);--foreground:oklch(20% .02 260);
  --muted-foreground:oklch(52% .02 255);
  --accent:oklch(68% .18 212);--accent-foreground:oklch(97% 0 0);
  --border:oklch(88% .012 75);--ring:oklch(68% .18 212);
}

/* Base (Tailwind preflight, gekürzt) */
*,::before,::after{box-sizing:border-box;border:0 solid;margin:0;padding:0;border-color:var(--border)}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font);-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{background-color:var(--background);color:var(--foreground)}
h1,h2,h3{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
ul{list-style:none}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
button{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border-radius:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid color-mix(in oklab,var(--ring) 50%,transparent);outline-offset:2px}

/* Layout */
.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}
.inset-0{inset:0}.-top-4{top:-1rem}.top-0{top:0}.right-0{right:0}.bottom-8{bottom:2rem}.-left-4{left:-1rem}.left-0{left:0}.left-1\/2{left:50%}
.z-10{z-index:10}.z-50{z-index:50}
.mx-auto{margin-inline:auto}
.mt-0\.5{margin-top:.125rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}
.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}
.aspect-square{aspect-ratio:1/1}
.h-8{height:2rem}.h-14{height:3.5rem}.h-80{height:20rem}.h-\[72px\]{height:72px}.h-full{height:100%}.min-h-screen{min-height:100vh}
.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}
.max-w-xl{max-width:var(--container-xl)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}
.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
.-translate-x-1\/2{translate:-50% 0}
.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-col{flex-direction:column}
.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-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-16{gap:4rem}
.space-y-1>:not(:last-child){margin-bottom:.25rem}
.space-y-3>:not(:last-child){margin-bottom:.75rem}
.space-y-4>:not(:last-child){margin-bottom:1rem}
.overflow-hidden{overflow:hidden}

/* Rahmen & Flächen */
.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}
.border{border-style:solid;border-width:1px}.border-2{border-style:solid;border-width:2px}.border-t{border-top-style:solid;border-top-width:1px}
.border-accent{border-color:var(--accent)}
.border-accent\/30{border-color:color-mix(in oklab,var(--accent) 30%,transparent)}
.border-accent\/40{border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.border-border{border-color:var(--border)}
.border-white\/10{border-color:rgb(255 255 255/.1)}.border-white\/25{border-color:rgb(255 255 255/.25)}
.bg-\[oklch\(0\.2_0\.03_255\)\]{background-color:oklch(.2 .03 255)}
.bg-\[oklch\(0\.14_0\.02_255\)\]{background-color:oklch(.14 .02 255)}
.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-white{background-color:#fff}
.bg-white\/5{background-color:rgb(255 255 255/.05)}.bg-white\/10{background-color:rgb(255 255 255/.1)}
.bg-hero-overlay{background-image:linear-gradient(to bottom right in oklab,oklch(16% .025 255/.88) 0%,oklch(16% .025 255/.75) 50%,oklch(22% .03 255/.6) 100%)}
.bg-ref-overlay{background-image:linear-gradient(to top in oklab,oklch(16% .025 255/.7) 0%,transparent 100%)}
.bg-grid{background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 80px),repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 80px)}
.bg-cover{background-size:cover}.bg-center{background-position:50% center}
.object-contain{object-fit:contain}.object-cover{object-fit:cover}

/* Abstände */
.p-4{padding:1rem}.p-7{padding:1.75rem}.p-8{padding:2rem}
.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.px-8{padding-inline:2rem}
.py-1\.5{padding-block:.375rem}.py-2{padding-block:.5rem}.py-3{padding-block:.75rem}.py-4{padding-block:1rem}.py-8{padding-block:2rem}.py-16{padding-block:4rem}.py-24{padding-block:6rem}
.pt-\[72px\]{padding-top:72px}

/* Typografie */
.text-center{text-align:center}.text-left{text-align:left}
.text-xs{font-size:var(--text-xs);line-height:var(--text-xs--lh)}
.text-sm{font-size:var(--text-sm);line-height:var(--text-sm--lh)}
.text-base{font-size:var(--text-base);line-height:var(--text-base--lh)}
.text-lg{font-size:var(--text-lg);line-height:var(--text-lg--lh)}
.text-xl{font-size:var(--text-xl);line-height:var(--text-xl--lh)}
.text-2xl{font-size:var(--text-2xl);line-height:var(--text-2xl--lh)}
.text-3xl{font-size:var(--text-3xl);line-height:var(--text-3xl--lh)}
.text-4xl{font-size:var(--text-4xl);line-height:var(--text-4xl--lh)}
.text-5xl{font-size:var(--text-5xl);line-height:1}
.leading-none{line-height:1}.leading-relaxed{line-height:var(--leading-relaxed)}
.leading-tight{line-height:var(--leading-tight)!important}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}
.text-balance{text-wrap:balance}.whitespace-pre-line{white-space:pre-line}.uppercase{text-transform:uppercase}
.text-accent{color:var(--accent)}.text-accent-foreground{color:var(--accent-foreground)}
.text-foreground{color:var(--foreground)}.text-foreground\/70{color:color-mix(in oklab,var(--foreground) 70%,transparent)}
.text-muted-foreground{color:var(--muted-foreground)}
.text-white{color:#fff}.text-white\/30{color:rgb(255 255 255/.3)}.text-white\/50{color:rgb(255 255 255/.5)}.text-white\/60{color:rgb(255 255 255/.6)}.text-white\/75{color:rgb(255 255 255/.75)}

/* Effekte */
.opacity-0{opacity:0}.opacity-\[0\.04\]{opacity:.04}
.shadow-sm{box-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a}
.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}
.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}
.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.transition-all{transition:all .15s var(--ease)}
.transition-colors{transition:color .15s var(--ease),background-color .15s var(--ease),border-color .15s var(--ease)}
.transition-opacity{transition:opacity .15s var(--ease)}
.transition-transform{transition:transform .15s var(--ease),scale .15s var(--ease)}
.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}

@media (hover:hover){
  .hover\:border-accent\/40:hover{border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
  .hover\:bg-accent:hover{background-color:var(--accent)}
  .hover\:bg-white\/10:hover{background-color:rgb(255 255 255/.1)}
  .hover\:bg-white\/20:hover{background-color:rgb(255 255 255/.2)}
  .hover\:text-accent:hover{color:var(--accent)}
  .hover\:text-accent-foreground:hover{color:var(--accent-foreground)}
  .hover\:text-white:hover{color:#fff}
  .hover\:text-white\/60:hover{color:rgb(255 255 255/.6)}
  .hover\:underline:hover{text-decoration-line:underline}
  .hover\:opacity-90:hover{opacity:.9}
  .group:hover .group-hover\:scale-105{scale:1.05}
  .group:hover .group-hover\:scale-110{scale:1.1}
  .group:hover .group-hover\:opacity-100{opacity:1}
}
@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}
@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:text-7xl{font-size:var(--text-7xl);line-height:1}}
@media (min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Animationen (Ersatz für framer-motion der Originalseite) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:var(--d,0s)}
.reveal.from-left{transform:translateX(-30px)}
.reveal.from-right{transform:translateX(30px)}
.reveal.is-visible{opacity:1;transform:none}
.hero-in{animation:hero-in .7s ease-out both;animation-delay:var(--d,0s)}
@keyframes hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.bob{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.menu-in{animation:menu-in .2s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal,.hero-in,.bob,.menu-in{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}html{scroll-behavior:auto}}