@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('ClashDisplay-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;font-stretch:62% 125%;src:url('Archivo-normal-100_900.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('Poppins-normal-300.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('Poppins-normal-500.woff2') format('woff2');}

:root{
  --kalk:#F4F6F0; --blau:#32404C; --rot:#CE1531;
  --line:rgba(54,69,79,.16); --line-soft:rgba(54,69,79,.055);
  --pad:clamp(20px,4vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--kalk);color:var(--blau);
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(15px,1.04vw,17px);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--rot);color:var(--kalk)}
a{color:inherit}

.label{font-family:'Archivo',sans-serif;font-weight:500;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.4}
.swlogo{width:clamp(112px,13vw,168px);height:auto;display:block;color:var(--blau)}
.swlogo-p{fill:currentColor}

header{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;padding:clamp(18px,3vw,28px) var(--pad)}
header .label{opacity:.55}

/* ---- Wellenfeld: Tropfen ins Wasser, Leitmotiv der Marke ---- */
.wellen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wellen i{position:absolute;top:var(--y,50%);left:var(--x,50%);width:2px;height:2px;
  border:1.5px solid var(--line);border-radius:50%;transform:translate(-50%,-50%) scale(1);opacity:0}
.punkt-mitte{position:absolute;top:var(--y,50%);left:var(--x,50%);width:7px;height:7px;
  background:var(--rot);border-radius:50%;transform:translate(-50%,-50%);opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .wellen i{animation:welle 7s cubic-bezier(.2,.6,.3,1) infinite}
  .wellen i:nth-child(2){animation-delay:1.4s}
  .wellen i:nth-child(3){animation-delay:2.8s}
  .wellen i:nth-child(4){animation-delay:4.2s}
  .wellen i:nth-child(5){animation-delay:5.6s}
  @keyframes welle{
    0%{width:2px;height:2px;opacity:0}
    6%{opacity:.85}
    100%{width:min(190vw,1500px);height:min(190vw,1500px);opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .wellen i{width:min(60vw,520px);height:min(60vw,520px);opacity:.5}
  .wellen i:nth-child(3){width:min(100vw,880px);height:min(100vw,880px);opacity:.32}
  .wellen i:nth-child(5){width:min(150vw,1240px);height:min(150vw,1240px);opacity:.2}
}

@media (max-width:52rem){.wellen{--x:70% !important;--y:16% !important}}

/* ---- Hero ---- */
main.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;padding:0 var(--pad) clamp(28px,5vh,56px)}
.inhalt{position:relative;z-index:2;width:100%;max-width:74rem;margin:0 auto}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:clamp(1.4rem,4vh,2.4rem)}
.kicker .ring{width:11px;height:11px;border:1.5px solid var(--rot);border-radius:50%;flex:none}
@media (prefers-reduced-motion:no-preference){
  .kicker .ring{animation:puls 2.8s cubic-bezier(.2,.6,.3,1) infinite}
  @keyframes puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.45}}
}
h1.monument{font-family:'Clash Display',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(2.4rem,10.5vw,8.5rem);line-height:.92;letter-spacing:-.015em;
  margin:0;overflow-wrap:anywhere}
h1.monument .punkt{display:inline-block;width:.19em;height:.19em;background:var(--rot);
  margin-left:.1em;vertical-align:baseline}
.unter{margin:clamp(1.6rem,4vh,2.6rem) 0 0;display:grid;gap:clamp(1rem,3vw,3rem);
  grid-template-columns:1fr;max-width:64rem}
@media (min-width:52rem){.unter{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.unter p{margin:0;max-width:44ch;opacity:.82}
.kontakt{font-size:.92rem}
.kontakt a{text-decoration:none;border-bottom:1.5px solid var(--rot);padding-bottom:2px;
  transition:background-color .25s}
.kontakt a:hover,.kontakt a:focus-visible{background:rgba(206,21,49,.09)}

footer{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:clamp(3rem,9vh,7rem);
  padding-top:clamp(1.2rem,3vh,2rem);display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;
  align-items:center;justify-content:space-between}
footer nav{display:flex;gap:1.75rem;flex-wrap:wrap}
footer nav a{text-decoration:none;opacity:.6;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:opacity .2s,border-color .2s}
footer nav a:hover,footer nav a:focus-visible{opacity:1;border-color:var(--rot)}

@media (prefers-reduced-motion:no-preference){
  .auf{animation:auf .85s cubic-bezier(.22,.61,.36,1) both}
  .auf:nth-child(2){animation-delay:.1s}.auf:nth-child(3){animation-delay:.2s}
  @keyframes auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---- Rechtstexte ---- */
main.text{max-width:52rem;margin:0 auto;padding:clamp(5rem,12vh,9rem) var(--pad) clamp(3rem,8vh,6rem)}
main.text h1{font-family:'Clash Display',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(1.7rem,5vw,3rem);line-height:1;letter-spacing:-.01em;margin:0 0 clamp(2rem,5vh,3rem)}
main.text h2{font-family:'Archivo',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin:2.75rem 0 .6rem;opacity:.62}
main.text p{margin:0 0 1rem;max-width:62ch}
main.text dl{margin:0;max-width:62ch}
main.text dt{font-family:'Archivo',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.55;margin-top:1.6rem}
main.text dd{margin:.2rem 0 0}
.zurueck{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:clamp(2rem,5vh,3rem);
  text-decoration:none;opacity:.7;transition:opacity .2s}
.zurueck:hover,.zurueck:focus-visible{opacity:1}
.zurueck .ring{width:9px;height:9px;border:1.5px solid var(--rot);border-radius:50%}