/* Aqua Tom Krefeld — geteiltes Design-System (Editorial Care · Sand+Terrakotta) */
:root{
  --color-bg:#FAF3EA; --color-fg:#2B241D; --color-surface:#FFFDF9;
  --color-primary:#C1663D; --color-secondary:#8A6A4F; --color-accent:#4F7A6B;
  --color-muted:#7d6c5a; --color-border:#E7DCCB; --color-onprimary:#FFFDF9;
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.75rem;
  --shadow-sm:0 1px 2px rgb(43 36 29/.07); --shadow:0 14px 36px rgb(43 36 29/.13);
  --text-eyebrow:.78rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2rem,5vw,3.5rem);
  --lh-tight:1.08; --lh-snug:1.28; --lh-body:1.68;
  --tracking-tight:-.02em; --tracking-label:.14em;
  --ease-out:cubic-bezier(.16,1,.3,1); --focus:#C1663D;
  color-scheme: light;
}
[data-theme="dark"]{
  --color-bg:#1E1A16; --color-fg:#ECE3D8; --color-surface:#2A241E; --color-primary:#D9825A;
  --color-secondary:#B79A82; --color-accent:#6FA090; --color-muted:#B4A28D; --color-border:#3B332A;
  --color-onprimary:#20180F; color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg); color:var(--color-fg); font-family:"Inter",system-ui,sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease-out), color .5s var(--ease-out);
}
[data-theme="dark"] body{ color:#ECE3D8; }
/* body-Praefix ist Pflicht: Tailwind-Preflight setzt h1-h4 auf font-size/weight:inherit
   und wird NACH dieser Datei injiziert — ohne hoehere Spezifitaet ist die ganze Typo-Skala tot. */
body h1,body h2,body h3,body h4,.font-display{ font-family:"Newsreader",serif; letter-spacing:var(--tracking-tight); line-height:var(--lh-tight); font-weight:600; }
body h1{ font-size:var(--text-h1); font-weight:700; }
body h2{ font-size:var(--text-h2); font-weight:650; }
body h3{ font-size:var(--text-h3); }
body h4{ font-size:var(--text-h4); }
.lead{ font-size:var(--text-lead); line-height:var(--lh-snug); font-weight:500; color:var(--color-secondary); }
.eyebrow{ font-size:var(--text-eyebrow); letter-spacing:var(--tracking-label); text-transform:uppercase; font-weight:600; color:var(--color-primary); }
p{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }
.text-fg{ color:var(--color-fg); } .text-muted{ color:var(--color-muted); } .text-primary{ color:var(--color-primary); }
.text-secondary{ color:var(--color-secondary); } .text-accent{ color:var(--color-accent); }
.bg-surface{ background:var(--color-surface); } .bg-bg{ background:var(--color-bg); }
.border-line{ border-color:var(--color-border); }
.wrap{ max-width:78rem; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:768px){ .wrap{ padding-inline:2rem; } }
.section{ padding-block: 4rem; position:relative; }
@media(min-width:768px){ .section{ padding-block:7rem; } }
.max-measure{ max-width:65ch; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px;
  font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease-out), background .3s, color .3s, border-color .3s; }
.btn-primary{ background:var(--color-primary); color:var(--color-onprimary); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-primary); color:var(--color-primary); }

/* Header */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; color:var(--color-fg); background:transparent;
  transition:background .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s; padding-block:1.1rem; }
/* Weisse Navigation nur ueber einem dunklen Hero — sonst waere sie auf hellem Grund unlesbar */
body[data-hero-dunkel] .site-header:not(.scrolled){ color:#fff; }
.site-header .hdr-inner{ display:flex; align-items:center; justify-content:space-between; }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-surface) 92%, transparent); color:var(--color-fg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); padding-block:.7rem; }
.site-header .logo-mark{ display:flex; align-items:center; gap:.6rem; font-family:"Newsreader",serif; font-weight:700; font-size:1.15rem; text-decoration:none; color:inherit; }
.nav-link{ font-size:.95rem; font-weight:500; text-decoration:none; color:inherit; opacity:.88; position:relative; padding-block:.3rem; }
.nav-link:hover{ opacity:1; }
.nav-link.is-active{ opacity:1; }
.nav-link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; border-radius:2px; }
.theme-toggle{ width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:999px; border:1px solid currentColor; opacity:.85; background:transparent; color:inherit; cursor:pointer; }
.theme-toggle:hover{ opacity:1; }
.burger{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
.mobile-menu{ position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:2rem 1.75rem;
  transform:translateY(-100%); transition:transform .5s var(--ease-out); }
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:"Newsreader",serif; font-size:2rem; text-decoration:none; }

/* Cards */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; height:100%; }
.card-media{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out); }
.card:hover .card-media img{ transform:scale(1.05); }
.card-body{ padding:1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.arch-media{ border-radius:var(--radius-lg) var(--radius-lg) 6rem var(--radius-lg); }

/* Signature Schicht-Linie */
.schichtlinie{ position:relative; height:3px; width:100%; overflow:visible; margin-block:0; }
.schichtlinie svg{ width:100%; height:16px; display:block; overflow:visible; }
.schichtlinie path{ stroke:var(--color-border); stroke-width:2; fill:none; }
.schichtlinie path.progress{ stroke:var(--color-primary); }
.schichtlinie--vertical{ height:100%; width:3px; position:absolute; left:0; top:0; }
.schichtlinie--vertical svg{ width:16px; height:100%; }

/* Backgrounds */
canvas.bg{ position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
/* inset:-6%: die Ebene ragt ueber den Viewport hinaus, damit die Drift-Verschiebung
   NIE eine Kante freilegt (sichtbarer leerer Streifen am linken/oberen Rand). */
.bg-scene{ position:fixed; inset:-6%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(60% 60% at var(--bgShift,25%) 20%, color-mix(in oklch, var(--color-accent) 30%, transparent), transparent 70%),
    radial-gradient(55% 55% at var(--bgShift2,80%) 75%, color-mix(in oklch, var(--color-primary) 22%, transparent), transparent 65%); }
.aurora{ animation:drift 28s ease-in-out infinite; will-change:transform; }
@keyframes drift{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(1.2%,-1.5%,0)} 100%{transform:translate3d(0,0,0)} }
@media (prefers-reduced-motion: reduce){ .aurora{ animation-duration:100s; } }

/* Reveal helpers */
[data-split]{ overflow:hidden; }
[data-tilt]{ transform-style:preserve-3d; }
.has-anim{ position:relative; }
.has-anim > canvas, .has-anim > svg.fill{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Preloader */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-bg); display:grid; place-items:center; }
#preloader svg{ width:min(70vw,420px); height:auto; }
#preloader path{ fill:none; stroke:var(--color-primary); stroke-width:3; }

/* Section header rhythm */
.sec-head{ max-width:44rem; margin-bottom:2.75rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }

/* Footer */
.site-footer{ background:var(--color-fg); color:#EFE7DA; padding-block:4.5rem 2rem; }
[data-theme="dark"] .site-footer{ background:#141110; }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer .foot-link:hover{ color:var(--color-primary); }
.foot-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:768px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.badge-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2.2rem; margin-top:2.2rem; border-top:1px solid rgb(255 255 255/.12); padding-bottom:15px; }

/* Ring infographic */
.ring-wrap{ position:relative; width:9rem; height:9rem; }
.ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-wrap circle{ fill:none; stroke-width:8; }
.ring-wrap .track{ stroke:var(--color-border); }
.ring-wrap .fill{ stroke:var(--color-accent); stroke-linecap:round; }
.ring-num{ position:absolute; inset:0; display:grid; place-items:center; font-family:"Newsreader",serif; font-size:1.5rem; font-weight:700; }

/* Accordion FAQ */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem 0; background:none; border:0; cursor:pointer; font-family:"Newsreader",serif; font-size:1.1rem; color:var(--color-fg); }
.faq-q .plus{ flex:none; transition:transform .4s var(--ease-out); }
.faq-item[data-open="true"] .plus{ transform:rotate(135deg); }
.faq-a{ overflow:hidden; height:0; transition:height .4s var(--ease-out); }
.faq-a p{ padding-bottom:1.35rem; color:var(--color-muted); max-width:65ch; }

/* Testimonials */
.quote-mark{ font-family:"Newsreader",serif; font-size:3rem; line-height:1; color:var(--color-primary); opacity:.5; }

/* Before/after clarity wipe */
.wipe{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.wipe img{ width:100%; height:100%; object-fit:cover; display:block; }
.wipe .clean{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); }
.wipe .tag{ position:absolute; top:.9rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgb(43 36 29/.65); color:#fff; padding:.3rem .6rem; border-radius:.4rem; pointer-events:none; }
.wipe .tag-l{ left:.9rem; } .wipe .tag-r{ right:.9rem; }

/* ===== Hero (Startseite) — Editorial-Collage statt striktem Raster ===== */
.hero-tint{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 52% at 78% 22%, color-mix(in oklch, var(--color-accent) 15%, transparent), transparent 72%),
    radial-gradient(42% 48% at 6% 84%, color-mix(in oklch, var(--color-primary) 11%, transparent), transparent 70%); }
.hero-title{ font-size:clamp(2.5rem,5.6vw,4.05rem); }
.hero-akzent{ font-style:italic; font-weight:600; color:var(--color-accent); }
.eyebrow-welle{ display:inline-block; vertical-align:-2px; margin-right:.55rem; color:var(--color-primary); }
.wave-under{ position:relative; white-space:nowrap; }
.wave-under svg{ position:absolute; left:2%; right:2%; width:96%; height:.3em; bottom:-.22em; overflow:visible; }
.wave-under path{ stroke:var(--color-primary); stroke-width:3; fill:none; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:welle-zeichnen 1.3s var(--ease-out) .45s forwards; }
@keyframes welle-zeichnen{ to{ stroke-dashoffset:0; } }
.hero-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1.7rem; }
.hero-trust .trust-inner{ display:inline-flex; align-items:center; gap:.55rem;
  font-size:.92rem; font-weight:500; color:var(--color-secondary); }
.hero-trust svg{ color:var(--color-accent); flex:none; }
.hero-collage{ position:relative; }
.hero-foto-haupt{ position:relative; aspect-ratio:4/5; overflow:hidden; box-shadow:var(--shadow);
  border-radius:52% 48% 45% 55% / 46% 52% 48% 54%; animation:blob-atmen 18s ease-in-out infinite alternate; }
.hero-foto-haupt img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes blob-atmen{
  0%{ border-radius:52% 48% 45% 55% / 46% 52% 48% 54%; }
  100%{ border-radius:45% 55% 52% 48% / 54% 45% 55% 46%; } }
.hero-foto-klein{ position:absolute; top:-2.4rem; right:-1.2rem; width:37%; aspect-ratio:1/1; overflow:hidden;
  border-radius:50%; border:6px solid var(--color-surface); box-shadow:var(--shadow); z-index:2; }
.hero-foto-klein img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:1023px){ .hero-foto-klein{ top:-1.6rem; right:.25rem; width:32%; } }
.hero-blasen{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-blasen i{ position:absolute; bottom:6%; left:var(--x,50%); width:var(--s,8px); height:var(--s,8px);
  border-radius:50%; opacity:0;
  border:1.5px solid color-mix(in oklch, var(--color-accent) 60%, transparent);
  background:color-mix(in oklch, var(--color-surface) 35%, transparent);
  animation:blase-steigt var(--d,9s) var(--delay,0s) ease-in infinite; }
@keyframes blase-steigt{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  12%{ opacity:.65; }
  50%{ transform:translate3d(-7px,-220px,0); }
  82%{ opacity:.45; }
  100%{ transform:translate3d(5px,-430px,0); opacity:0; } }
.hero-karte{ position:relative; margin-top:1.4rem; rotate:-1.5deg; height:auto; box-shadow:var(--shadow); }
@media(min-width:1024px){
  .hero-karte{ position:absolute; left:-3rem; bottom:-3.25rem; width:60%; margin-top:0; rotate:-2deg; z-index:4; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important; }
  .marquee,[data-parallax],[data-depth]{ animation:none!important; }
  .bg-loop,.aurora,[data-ambient]{ animation-duration:100s!important; }
  /* daempfen statt killen: Blasen + Blob atmen sehr langsam weiter, Welle zeichnet schneller fertig */
  .hero-foto-haupt{ animation-duration:70s!important; }
  .hero-blasen i{ animation-duration:38s!important; opacity:0; }
  .wave-under path{ animation-duration:.6s!important; }
}

/* ===== Made-by-NOMAD.SOLUTIONS-Badge — 1:1 aus Vorlagen/footer-badge.html,
   einzige erlaubte Anpassung: --ns-accent = Akzentfarbe dieser Seite ===== */
.ns-badge{ --ns-accent:var(--color-primary); --ns-brand:#1DD4AA; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .82rem; border:1px solid currentColor; border-radius:999px; overflow:hidden; text-decoration:none;
  color:inherit; line-height:1; opacity:.9;
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.61,.21,1), opacity .4s ease; }
.ns-amb{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ns-amb i{ position:absolute; bottom:-4px; border-radius:1px; background:var(--ns-accent); opacity:0;
  animation:ns-up var(--d,5s) var(--delay,0s) linear infinite; will-change:transform,opacity; }
@keyframes ns-up{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:var(--o,.4); } 82%{ opacity:var(--o,.4); } 100%{ transform:translateY(-3rem); opacity:0; } }
.ns-flood{ position:absolute; left:-2%; right:-2%; bottom:0; width:104%; height:150%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, transparent, var(--ns-accent)); opacity:.26;
  border-radius:46% 46% 0 0 / 16px 16px 0 0; transform:translateY(101%); transition:transform .55s cubic-bezier(.5,0,.2,1); }
.ns-logo, .ns-text{ position:relative; z-index:2; }
.ns-logo path, .ns-brand-txt{ transition:stroke .35s ease, fill .35s ease; }
.ns-logo path:nth-child(1){ animation-delay:0s; } .ns-logo path:nth-child(2){ animation-delay:.24s; }
.ns-logo path:nth-child(3){ animation-delay:.48s; } .ns-logo path:nth-child(4){ animation-delay:.72s; } .ns-logo path:nth-child(5){ animation-delay:.96s; }
@keyframes ns-draw{ from{ stroke-dashoffset:var(--len); } to{ stroke-dashoffset:0; } }

.ns-badge:hover, .ns-badge:focus-visible{ opacity:1; border-color:var(--ns-accent); transform:translateY(-1px); }
.ns-badge:hover .ns-flood, .ns-badge:focus-visible .ns-flood{ transform:translateY(0); }
.ns-badge:hover .ns-amb i, .ns-badge:focus-visible .ns-amb i{ animation-duration:1.8s; }
.ns-badge:hover .ns-logo path, .ns-badge:focus-visible .ns-logo path{ stroke:var(--ns-brand); animation:ns-draw .55s cubic-bezier(.45,0,.25,1) both; }
.ns-badge:hover .ns-brand-txt, .ns-badge:focus-visible .ns-brand-txt{ fill:var(--ns-brand); }

@media (prefers-reduced-motion:reduce){
  .ns-badge,.ns-badge *{ transition:none !important; animation:none !important; }
  .ns-amb{ display:none; }
  .ns-badge:hover .ns-flood,.ns-badge:focus-visible .ns-flood{ transform:translateY(0); }
  .ns-badge:hover,.ns-badge:focus-visible{ border-color:var(--ns-accent); }
  .ns-badge:hover .ns-logo path,.ns-badge:focus-visible .ns-logo path{ stroke:var(--ns-brand); }
  .ns-badge:hover .ns-brand-txt,.ns-badge:focus-visible .ns-brand-txt{ fill:var(--ns-brand); } }