@charset "utf-8";
/* ════════════════════════════════════════════════════════════════
   bau.WERK.zeug — Ankündigungsseite, Variante „Niemeyer"
   Statisch, ohne Abhängigkeiten außer den eingebetteten Schriften.
   Eine einzige kräftige Kurve, viel Weiß, starker Größenkontrast —
   in Anlehnung an die reduzierte, kurvige Formensprache Oscar
   Niemeyers. Die Wortmarke bleibt unverändert und unverziert.
   ════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Roboto Condensed";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("schrift/roboto-condensed-300.woff2") format("woff2");
}
@font-face{
  font-family:"Roboto Condensed";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("schrift/roboto-condensed-700.woff2") format("woff2");
}

:root{
  --papier:#FFFFFF;
  --graphit:#161616;
  --text:#161616;
  --text-2:#6A6A6A;
  --linie:#E7E4DD;
  --gelb:#F2C84B;
  --f-schrift:'Roboto Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  background:var(--papier);
  color:var(--text);
  font-family:var(--f-schrift);
  font-weight:300;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:clip;
}

img,svg{max-width:100%;display:block}
a{color:inherit}

.uebergehen{position:absolute;left:-999px;top:auto}
.uebergehen:focus{
  left:1rem;top:1rem;
  background:var(--graphit);color:#fff;
  padding:.6rem 1rem;border-radius:.25rem;z-index:10;
}

/* ─── Die Kurve ────────────────────────────────────────────────── */
.kurve{
  position:fixed;
  right:clamp(-28vmin,-22vw,-18vmin);
  bottom:clamp(-30vmin,-24vw,-20vmin);
  width:clamp(24rem,62vmin,44rem);
  height:clamp(24rem,62vmin,44rem);
  border-radius:50%;
  background:var(--gelb);
  z-index:0;
  pointer-events:none;
}

.raum{
  width:100%;
  max-width:78rem;
  margin-inline:auto;
  padding-inline:clamp(1.5rem,6vw,4.5rem);
  position:relative;
  z-index:1;
}

/* ─── Hauptbühne — die Wortmarke ist der Auftakt ──────────────── */
main{flex:1;display:flex;align-items:center;justify-content:center}
.buehne{
  padding-block:clamp(3rem,10vh,6rem);
  max-width:52rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-buehne{
  width:clamp(15rem,58vw,36rem);
  margin-bottom:clamp(2rem,6vh,3.25rem);
}
.logo-buehne svg{width:100%;height:auto;display:block}

/* WERK schlägt im Herzrhythmus (Doppelschlag, kurz-kurz, Pause);
   "bau.…zeug" und "suite" stehen still. Die Kurve dahinter atmet
   separat und ruhiger — zwei unterscheidbare Rhythmen nebeneinander. */
.p-werk{
  transform-box:fill-box;
  transform-origin:center;
  animation:herzschlag 2.6s ease-in-out infinite;
}
@keyframes herzschlag{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.045)}
  28%{transform:scale(1)}
  38%{transform:scale(1.075)}
  56%{transform:scale(1)}
}
.kurve{
  transform-origin:center;
  animation:atem 4.8s ease-in-out infinite;
}
@keyframes atem{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.045);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .p-werk,.kurve{animation:none}
}

.vorspann{
  margin:0 0 clamp(.75rem,2.5vh,1.25rem);
  font-size:clamp(1.375rem,3.4vw,2.125rem);
  font-weight:300;
  letter-spacing:-.005em;
  color:var(--text);
}

.baem{
  margin:0 0 clamp(1rem,3vh,1.5rem);
  font-weight:700;
  font-size:clamp(2.5rem,7vw,4rem);
  line-height:.95;
  letter-spacing:-.01em;
  color:var(--graphit);
}
.baem .ruf{color:var(--gelb)}

.unterzeile{
  margin:0;
  font-size:clamp(.9rem,1.3vw,1.0625rem);
  font-weight:400;
  color:var(--text-2);
  letter-spacing:.01em;
}

/* ─── Fuß ──────────────────────────────────────────────────────── */
footer{padding-block:clamp(1.5rem,4vh,2.5rem);position:relative;z-index:1}
.fz-reihe{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:center;
  justify-content:space-between;
  font-size:.8125rem;
  color:var(--text-2);
  border-top:1px solid var(--linie);
  padding-top:1.25rem;
}
.fz-reihe a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent}
.fz-reihe a:hover,.fz-reihe a:focus-visible{color:var(--text);border-bottom-color:currentColor}

@media (max-width:26rem){
  .fz-reihe{justify-content:center;text-align:center}
}

@media (max-width:40rem){
  .kurve{
    right:-30vmin;
    bottom:auto;
    top:-30vmin;
    width:60vmin;
    height:60vmin;
  }
}

/* ─── Rechtsseite ──────────────────────────────────────────────── */
.rechtsblatt{padding-block:clamp(2.5rem,6vh,4rem);max-width:38rem;position:relative;z-index:1}
.rechtsblatt h1{font-size:clamp(1.5rem,3vw,2rem);font-weight:300;margin:0 0 1.5rem}
.rechtsblatt h2{font-size:1.0625rem;font-weight:700;margin:2rem 0 .5rem}
.rechtsblatt p,.rechtsblatt address,.rechtsblatt li{
  font-size:.9375rem;font-weight:400;color:var(--text);margin:0 0 .75rem;
}
.rechtsblatt address{font-style:normal}
.rechtsblatt ul{margin:0 0 .75rem;padding-left:1.25rem}
.platzhalter{background:rgba(242,200,75,.35);padding:.05em .3em;border-radius:.2em}
.zurueck{
  display:inline-block;margin-bottom:2rem;font-size:.8125rem;
  color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--linie);
}
.zurueck:hover{color:var(--text)}

@media (prefers-reduced-motion:no-preference){
  .buehne{animation:einblenden .6s ease-out both}
}
@keyframes einblenden{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@media print{
  .kurve{display:none}
  body{background:#fff;color:#000}
  footer{display:none}
}

/* ════════════════════════════════════════════════════════════════
   Fassung 1.1 · Künstlerisch animierte Ankündigung
   Die sichtbare Wortmarke bleibt das Original-SVG. Nur dessen bereits
   separater WERK-Pfad wird in der SVG-Datei animiert.
   ════════════════════════════════════════════════════════════════ */

:root{
  --papier:#fbfaf6;
  --graphit:#272725;
  --text:#272725;
  --text-2:#6d6b64;
  --linie:rgba(71,67,57,.16);
  --blau:#0082c6;
  --gelb:#e0b82f;
  --ocker:#c89d57;
  --rose:#b98272;
  --werk-puls-dauer:3.8s;
  --aura-staerke:.24;
  --lasur-tempo:24s;
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

.startseite{
  min-height:100svh;
  display:block;
  background:var(--papier);
  color:var(--graphit);
}

.startseite .uebergehen{position:fixed;left:-100vw;top:1rem;z-index:10}
.startseite .uebergehen:focus{left:1rem}

/* Papier: ein unbewegtes, kaum sichtbares Faserkorn. */
.papierkorn{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
  opacity:.032;
  filter:url(#papierstruktur);
  background:#817b6c;
  mix-blend-mode:multiply;
}

/* Abstrakte Lasuren ohne gegenständliches Motiv. */
.aquarell{
  position:fixed;
  inset:-8vmax;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
}

.lasur,.pinselspur,.pigmentpunkt{position:absolute;display:block}
.lasur{
  border-radius:43% 57% 52% 48% / 57% 39% 61% 43%;
  mix-blend-mode:multiply;
  will-change:transform,opacity;
}
.lasur::before,.lasur::after{
  content:"";
  position:absolute;
  inset:7% 3% 4% 8%;
  border-radius:58% 42% 37% 63% / 44% 57% 43% 56%;
  background:inherit;
  opacity:.42;
  transform:rotate(7deg) scale(.91);
}
.lasur::after{
  inset:18% 11% 9% 2%;
  opacity:.27;
  transform:rotate(-11deg) scale(.84);
}

.lasur--himmel{
  width:min(62rem,68vw);
  aspect-ratio:1.55;
  top:-8%;
  right:-12%;
  opacity:.16;
  background:
    radial-gradient(ellipse at 36% 54%,rgba(0,130,198,.44),transparent 51%),
    radial-gradient(ellipse at 70% 34%,rgba(80,105,123,.34),transparent 57%);
  filter:blur(2.4px);
  animation:wolke-himmel var(--lasur-tempo) var(--ease-in-out) infinite alternate;
}
.lasur--erde{
  width:min(56rem,64vw);
  aspect-ratio:1.7;
  left:-14%;
  bottom:-8%;
  opacity:.14;
  background:
    radial-gradient(ellipse at 54% 46%,rgba(200,157,87,.48),transparent 54%),
    radial-gradient(ellipse at 28% 68%,rgba(224,184,47,.29),transparent 56%);
  filter:blur(2.8px);
  animation:wolke-erde calc(var(--lasur-tempo) * 1.25) var(--ease-in-out) infinite alternate;
}
.lasur--rose{
  width:min(35rem,42vw);
  aspect-ratio:1.2;
  left:13%;
  top:8%;
  opacity:.075;
  background:radial-gradient(ellipse at 50% 50%,rgba(185,130,114,.55),transparent 62%);
  filter:blur(3.5px);
  animation:wolke-rose calc(var(--lasur-tempo) * 1.55) var(--ease-in-out) infinite alternate;
}

.pinselspur{
  width:min(34rem,42vw);
  height:clamp(.45rem,1.2vw,.9rem);
  opacity:.075;
  background:repeating-linear-gradient(
    1deg,
    rgba(83,75,60,.5) 0 1px,
    transparent 1px 3px,
    rgba(83,75,60,.22) 3px 4px,
    transparent 4px 7px
  );
  filter:blur(.35px);
  transform:rotate(-7deg);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 72%,transparent);
}
.pinselspur--oben{top:24%;left:-4%}
.pinselspur--unten{right:-2%;bottom:21%;transform:rotate(4deg);opacity:.05}

.pigmentpunkt{
  width:clamp(.22rem,.45vw,.36rem);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--gelb);
  box-shadow:0 0 .7rem rgba(224,184,47,.2);
  opacity:.46;
  will-change:transform,opacity;
}
.pigmentpunkt--eins{left:19%;top:29%;animation:punkt-eins 16s var(--ease-in-out) infinite alternate}
.pigmentpunkt--zwei{right:17%;top:35%;width:.22rem;animation:punkt-zwei 21s var(--ease-in-out) infinite alternate}
.pigmentpunkt--drei{right:28%;bottom:18%;width:.3rem;animation:punkt-eins 26s var(--ease-in-out) infinite alternate-reverse}

.startseite main{
  position:relative;
  z-index:2;
  min-height:calc(100svh - 4.5rem);
  display:grid;
  place-items:center;
  padding:clamp(3rem,9vh,6rem) clamp(1.5rem,7vw,6rem);
}

.startseite .buehne{
  width:min(48rem,100%);
  max-width:none;
  padding:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-buehne{
  position:relative;
  width:clamp(17rem,58vw,39rem);
  margin-bottom:clamp(2rem,6.5vh,3.8rem);
}
.wortmarke{
  position:relative;
  z-index:2;
  width:100%;
  aspect-ratio:420.95 / 100.14;
}
.wortmarke img{width:100%;height:auto}

/* Die Aura sitzt exakt hinter dem WERK-Drittel des Original-SVGs. */
.werk-aura{
  position:absolute;
  z-index:1;
  left:30.3%;
  top:-7%;
  width:36.6%;
  height:69%;
  border-radius:48% 52% 47% 53% / 55% 43% 57% 45%;
  background:radial-gradient(ellipse at 48% 48%,rgba(0,130,198,.38),rgba(0,130,198,.12) 45%,transparent 72%);
  filter:blur(13px);
  opacity:.08;
  transform-origin:center;
  animation:werk-aura var(--werk-puls-dauer) var(--ease-in-out) infinite;
  will-change:transform,opacity;
}

.startseite .aussage{
  margin:0 0 clamp(.75rem,2vh,1rem);
  font-size:clamp(2rem,5.4vw,4.35rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.startseite .baem{
  margin:0 0 clamp(.9rem,2.4vh,1.4rem);
  font-weight:700;
  font-size:clamp(2rem,5.6vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--graphit);
}
.startseite .baem .ruf{color:var(--gelb)}

.startseite .unterzeile{
  margin:0;
  font-size:clamp(1rem,1.7vw,1.28rem);
  font-weight:300;
  letter-spacing:.015em;
  color:var(--text-2);
  text-wrap:balance;
}

.seitenfuss{
  position:relative;
  z-index:5;
  min-height:4.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem clamp(1.25rem,3.5vw,3rem);
  font-size:.78rem;
  color:var(--text-2);
}
.seitenfuss::before{
  content:"";
  position:absolute;
  top:0;
  left:clamp(1.25rem,3.5vw,3rem);
  right:clamp(1.25rem,3.5vw,3rem);
  height:1px;
  background:var(--linie);
}
.seitenfuss a{text-decoration:none;border-bottom:1px solid transparent}
.seitenfuss a:hover,.seitenfuss a:focus-visible{color:var(--graphit);border-bottom-color:currentColor}
.seitenfuss a:focus-visible,.zurueck:focus-visible{outline:2px solid var(--blau);outline-offset:4px}

@keyframes werk-aura{
  0%,4%,11%,21%,100%{transform:scale(1);opacity:.08}
  7%{transform:scale(1.06);opacity:var(--aura-staerke)}
  15%{transform:scale(1.035);opacity:calc(var(--aura-staerke) * .68)}
}
@keyframes wolke-himmel{
  from{transform:translate3d(0,0,0) rotate(-2deg) scale(1);opacity:.13}
  to{transform:translate3d(-2.2%,2.5%,0) rotate(1deg) scale(1.035);opacity:.18}
}
@keyframes wolke-erde{
  from{transform:translate3d(0,0,0) rotate(1deg) scale(1);opacity:.12}
  to{transform:translate3d(2.8%,-1.5%,0) rotate(-1deg) scale(1.025);opacity:.16}
}
@keyframes wolke-rose{
  from{transform:translate3d(0,0,0) scale(1);opacity:.055}
  to{transform:translate3d(3%,2%,0) scale(1.04);opacity:.085}
}
@keyframes punkt-eins{
  from{transform:translate3d(0,0,0);opacity:.3}
  to{transform:translate3d(.45rem,-.32rem,0);opacity:.58}
}
@keyframes punkt-zwei{
  from{transform:translate3d(0,0,0);opacity:.22}
  to{transform:translate3d(-.35rem,.45rem,0);opacity:.48}
}

@media (max-width:40rem){
  .aquarell{inset:-3rem}
  .lasur--himmel{width:33rem;right:-16rem;top:-1rem}
  .lasur--erde{width:30rem;left:-17rem;bottom:0}
  .lasur--rose{width:20rem;left:-8rem;top:20%}
  .pinselspur{width:18rem}
  .pigmentpunkt--zwei{right:8%}
  .startseite main{min-height:calc(100svh - 4rem);padding-block:4rem 3rem}
  .logo-buehne{width:min(22rem,92vw)}
  .seitenfuss{min-height:4rem;padding-inline:1rem}
  .seitenfuss::before{left:1rem;right:1rem}
}

@media (prefers-reduced-motion:reduce){
  .lasur,.pigmentpunkt,.werk-aura{animation:none}
  .lasur--himmel{opacity:.15}
  .lasur--erde{opacity:.14}
  .lasur--rose{opacity:.07}
}

/* Schlichte, eigenständige Datenschutzseite. */
.rechtsseite{display:flex;min-height:100svh;flex-direction:column;background:#fff}
.rechtsseite .kurve{display:none}
.rechtsseite .kopf{width:100%;max-width:70rem;margin-inline:auto;padding:clamp(1.5rem,4vw,2.5rem)}
.rechtsseite .wm-bild{width:clamp(8rem,14vw,10.5rem);height:auto}
.rechtsseite main{display:block;min-height:0;padding:0 clamp(1.5rem,5vw,3rem);flex:1}
.rechtsseite .rechtsblatt{width:100%;max-width:40rem;margin-inline:auto;padding:2rem 0 5rem}
.rechtsseite .rechtsblatt h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:300;line-height:1.05;letter-spacing:-.025em;margin:0 0 2rem}
.rechtsseite .rechtsblatt h2{font-size:1.05rem;font-weight:700;margin:2rem 0 .55rem}
.rechtsseite .rechtsblatt p,.rechtsseite .rechtsblatt address,.rechtsseite .rechtsblatt li{font-size:.96rem;font-weight:300;color:var(--graphit);margin:0 0 .8rem}
.rechtsseite .rechtsblatt address{font-style:normal}
.rechtsseite .rechtsblatt ul{margin:0 0 .8rem;padding-left:1.25rem}
.rechtsseite .platzhalter{background:rgba(224,184,47,.24);padding:.05em .3em;border-radius:0}
.rechtsseite .zurueck{display:inline-block;margin-bottom:2.5rem;font-size:.82rem;color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--linie)}
.rechtsseite .zurueck:hover{color:var(--graphit)}
.rechtsseite footer{margin-top:auto}
.rechtsseite .raum{width:100%;max-width:70rem;margin-inline:auto;padding-inline:clamp(1.5rem,4vw,2.5rem)}
.rechtsseite .fz-reihe{display:flex;justify-content:space-between;gap:1rem;padding-block:1.25rem;border-top:1px solid var(--linie);font-size:.78rem;color:var(--text-2)}
.rechtsseite .fz-reihe a{text-decoration:none}

@media print{
  .aquarell,.papierkorn,.werk-aura,.seitenfuss{display:none}
}