/* Serielles Bauen — dunkles Goldblau, .nito goldene Akzente, .nito weisse Linien.
   Farbwelt und Bausteine wie auf den SWA-Seiten. */

:root{
  --grund:#F7F6F1;
  --tief:#EFEDE6;
  --tinte:#0D0F35;
  --grau:rgba(13,15,53,.62);
  --gold:#A8801A;
  --linie:rgba(13,15,53,.2);
  --flaeche:rgba(13,15,53,.035);
}
.nito{background:var(--grund); color:var(--tinte);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5}
.nito .kopf{position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:flex-end;
  padding:20px clamp(20px,4vw,54px);
  background:linear-gradient(rgba(247,246,241,.9), rgba(247,246,241,0))}
.nito .zeichen{display:inline-block; width:30px; height:30px;
  border:1.6px solid var(--tinte); position:relative; border-radius:3px}
.nito .zeichen::before, .nito .zeichen::after{content:""; position:absolute; top:5px; bottom:5px;
  width:1.6px; background:var(--gold)}
.nito .zeichen::before{left:7px}
.nito .zeichen::after{right:7px}
.nito .fuss .zeichen{width:22px; height:22px}
.nito .fuss .zeichen::before{left:5px}
.nito .fuss .zeichen::after{right:5px}
.nito .knopf{display:inline-flex; align-items:center; justify-content:center;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:999px; padding:13px 22px;
  border:1px solid var(--linie); color:var(--tinte); background:transparent;
  cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.nito .knopf:hover{background:rgba(13,15,53,.08)}
.nito .knopf.voll{background:var(--tinte); border-color:transparent; color:#F7F6F1}
.nito .knopf.voll:hover{background:#232961}
.nito .knopf.gross{padding:17px 30px; font-size:14px}
/* ---------- Held ---------- */
.held{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:
  radial-gradient(1100px 700px at 76% 26%, rgba(201,162,39,.13), transparent 60%),
  var(--grund)}
.nito .stein-buehne{position:absolute; inset:0; display:flex;
  align-items:center; justify-content:flex-end;
  padding:8vh clamp(16px,7vw,120px) 14vh 0; pointer-events:none}
.nito #steinbild{width:min(46vw,620px); height:auto; overflow:visible}
.nito .sk{stroke:#0D0F35; stroke-width:2.1; stroke-linejoin:round}
.nito #steinbild path:nth-child(3n+1){fill:#E2DFD2}
.nito #steinbild path:nth-child(3n+2){fill:#EDEAE0}
.nito #steinbild path:nth-child(3n){fill:#FAF9F5}
.nito #steinbild .sk-mitte{stroke:#A8801A; stroke-width:2.3}
.nito #steinbild .sk-mitte:nth-child(3n+1){fill:#CDB268}
.nito #steinbild .sk-mitte:nth-child(3n+2){fill:#DFCC93}
.nito #steinbild .sk-mitte:nth-child(3n){fill:#EFE4BE}

@keyframes skZeichnen{
  0%{stroke-dashoffset:1; fill-opacity:0}
  55%{fill-opacity:0}
  100%{stroke-dashoffset:0; fill-opacity:1}}
.nito .sk{stroke-dasharray:1; stroke-dashoffset:1;
  animation:skZeichnen 1.15s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--takt) * .17s)}

@media(max-width:900px){.nito .stein-buehne{align-items:flex-start; justify-content:center;
    padding:96px 0 0}
.nito #steinbild{width:min(64vw,340px)}

}

@media (prefers-reduced-motion: reduce){.nito .sk{animation:none; stroke-dashoffset:0; fill-opacity:1}

}
.nito .held-text{position:relative; z-index:2; pointer-events:none;
  padding:0 clamp(20px,4vw,54px) clamp(46px,7vh,90px); max-width:860px}
.nito .held-text a{pointer-events:auto}
.nito .wink{position:absolute; right:clamp(20px,4vw,54px); bottom:26px; z-index:2;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(13,15,53,.45)}
.nito .wand-zeile .wink{position:static; margin-top:14px}
.nito .pille{display:inline-block; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border:1.2px solid rgba(168,128,26,.6);
  border-radius:999px; padding:7px 14px; margin-bottom:26px}
.nito h1{font-size:clamp(42px,6.6vw,92px); line-height:1.0; letter-spacing:-.035em;
  font-weight:700; margin-bottom:24px}
.nito .anriss{font-size:clamp(17px,1.6vw,21px); font-weight:300; max-width:52ch;
  color:var(--grau); margin-bottom:34px}
.nito h2{font-size:clamp(30px,3.6vw,52px); line-height:1.06; letter-spacing:-.025em;
  font-weight:700; margin-bottom:26px}
/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(80px,11vh,150px) 0}
.nito .liniengrund{border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  background:var(--tief)}
.nito .bahn{max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,54px)}
.nito .zweispalt{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end}
.nito .lauftext{font-size:clamp(17px,1.5vw,20px); font-weight:300;
  color:var(--grau); max-width:60ch}
.nito .lauftext.mittig{margin:54px auto 0; text-align:center}
.nito .bahn.mittig{text-align:center}
.nito .bahn.mittig .lauftext{margin-left:auto; margin-right:auto; margin-bottom:38px}
.nito .statement{padding:clamp(70px,10vh,130px) 0;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  background:var(--tief)}
.nito .statement-satz{font-size:clamp(26px,3.4vw,48px); font-weight:700;
  letter-spacing:-.02em; line-height:1.15}
.nito .statement-satz em{font-style:normal; color:var(--gold)}
.nito .wand-zeile{margin-top:70px}
.nito #wand{display:block; width:100%; height:auto; cursor:crosshair}
/* ---------- Vorteile ---------- */
.karten{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px;
  border:1px solid var(--linie); border-radius:18px; overflow:hidden}
.nito .karte{padding:26px 22px 30px; border-right:1px solid var(--linie);
  background:var(--flaeche)}
.nito .karte:last-child{border-right:0}
.nito .karte h3{font-size:19px; letter-spacing:-.01em; margin-bottom:10px}
.nito .karte p{font-size:16px; font-weight:300; color:var(--grau)}
/* ---------- Wandaufbau ---------- */
.schalter{display:flex; gap:10px; margin-bottom:26px}
.nito .schalt{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 18px;
  border:1px solid var(--linie); border-radius:999px; background:transparent;
  color:var(--tinte); cursor:pointer; transition:background .2s, color .2s, border-color .2s}
.nito .schalt:hover{border-color:rgba(13,15,53,.5)}
.nito .schalt.aktiv{background:var(--tinte); color:#F7F6F1; border-color:transparent}
.nito .aufbau{margin:0; border:1px solid var(--linie); border-radius:18px;
  padding:clamp(18px,2.6vw,36px); background:var(--flaeche)}
.nito .aufbau svg{display:block; width:100%; height:auto; margin-bottom:18px}
.nito .aufbau ol{list-style:none; counter-reset:schicht; max-width:640px}
.nito .aufbau li{counter-increment:schicht; display:flex; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--linie); font-size:16px}
.nito .aufbau li:last-child{border-bottom:0}
.nito .aufbau li::before{content:counter(schicht);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px;
  color:var(--gold); min-width:16px}
.nito .aufbau li span{flex:1}
.nito .aufbau li em{font-style:normal; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:12.5px; letter-spacing:.04em; color:var(--grau)}
/* ---------- Leistungen ---------- */
.leistungen{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.nito .leistung{border-top:1px solid var(--linie); padding-top:22px}
.nito .zahl{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.18em; color:var(--gold)}
.nito .leistung h3{font-size:22px; margin:12px 0 10px; letter-spacing:-.01em}
.nito .leistung p{font-weight:300; color:var(--grau); font-size:16px}
/* ---------- Broschueren ---------- */
.broschueren-bilder{display:grid; grid-template-columns:repeat(3,minmax(0,340px));
  justify-content:center; gap:22px; margin:44px 0 34px}
.nito .broschueren-bilder.feld img{aspect-ratio:4/3}
.nito .broschueren-bilder img{width:100%; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--linie); border-radius:14px;
  background:var(--flaeche); display:block}
.nito .downloads{display:grid; grid-template-columns:repeat(3,minmax(0,340px));
  justify-content:center; gap:22px}
.nito .download{display:flex; align-items:center; gap:14px; padding:18px;
  border:1px solid var(--linie); border-radius:14px; text-decoration:none;
  color:var(--tinte); background:var(--flaeche);
  transition:background .2s, color .2s, border-color .2s}
.nito .download:hover{background:var(--tinte); color:#F7F6F1; border-color:transparent}
.nito .download .pdf{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.1em; border:1.2px solid currentColor; border-radius:6px;
  padding:6px 8px}
.nito .download span{font-size:16px}
/* ---------- Kontakt & Fuss ---------- */
.kontakt{border-top:1px solid var(--linie);
  background:
  radial-gradient(800px 500px at 50% 120%, rgba(201,162,39,.16), transparent 65%),
  var(--tief)}
.nito .fuss{display:flex; align-items:center; justify-content:center;
  padding:26px clamp(20px,4vw,54px); border-top:1px solid var(--linie);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(13,15,53,.55);
  background:var(--tief)}
/* ---------- Einbau ---------- */
.da{opacity:0; transform:translateY(26px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,.9,.22,1)}
.nito .da.los{opacity:1; transform:none}


@media(max-width:900px){.nito .zweispalt{grid-template-columns:1fr; gap:26px}
.nito .karten{grid-template-columns:1fr 1fr}
.nito .karte:nth-child(2n){border-right:0}
.nito .karte:nth-child(-n+2){border-bottom:1px solid var(--linie)}
.nito .leistungen{grid-template-columns:1fr}
.nito .broschueren-bilder, .nito .downloads{grid-template-columns:1fr}

}

@media(max-width:560px){.nito .karten{grid-template-columns:1fr}
.nito .karte{border-right:0; border-bottom:1px solid var(--linie)}
.nito .karte:last-child{border-bottom:0}

}

@media (prefers-reduced-motion: reduce){.nito .da{opacity:1; transform:none; transition:none}

}
.nito .kontakt-mail{margin-top:18px}
.nito .kontakt-mail a{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:14px;
  letter-spacing:.06em; color:var(--grau); text-decoration:none;
  border-bottom:1px solid var(--linie); padding-bottom:3px}
.nito .kontakt-mail a:hover{color:var(--tinte); border-color:var(--tinte)}
/* Partner: Logos laufen entfaerbt durch */

.nito .partner-lauf{display:flex; align-items:center; gap:90px; width:max-content;
  animation:partnerlauf 36s linear infinite}
.nito .partner-lauf img{height:56px; width:auto; display:block;
  filter:grayscale(1) contrast(1.05); opacity:.75; mix-blend-mode:multiply}

@keyframes partnerlauf{from{transform:translateX(0)} to{transform:translateX(calc(-33.333% - 30px))}}
.nito .partner-felder{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grau)}

@media (prefers-reduced-motion: reduce){.nito .partner-lauf{animation:none}
}
/* Kopf-Navigation */
.kopf{justify-content:space-between}
.nito .kopf-nav{display:flex; gap:26px}
.nito .kopf-nav a{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--tinte); opacity:.75; transition:opacity .2s}
.nito .kopf-nav a:hover{opacity:1}

@media(max-width:900px){.nito .kopf-nav{display:none}
}
.nito .marke{font-weight:700; font-size:20px; letter-spacing:.34em;
  color:var(--tinte); text-decoration:none}
.nito .marke.klein{font-size:14px}
.nito .fuss{justify-content:space-between}


.nito .aufbauten{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,54px)}
.nito .aufbau{background:#FFFFFF; border-color:rgba(13,15,53,.14)}
.nito .datenblatt{width:100%; height:auto; display:block}
@media(max-width:900px){.nito .aufbauten{grid-template-columns:1fr}}

.nito .partner-bahn{overflow:hidden; margin:54px 0 40px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.nito .partner-lauf{gap:120px; animation-duration:30s}
.nito .partner-lauf img{height:130px; opacity:.85}
@keyframes partnerlauf{from{transform:translateX(0)} to{transform:translateX(calc(-33.333% - 40px))}}
@media(max-width:760px){.nito .partner-lauf img{height:84px}}
/* Broschueren zentriert */
.nito .broschueren-bilder{grid-template-columns:repeat(2,minmax(0,430px)); justify-content:center}
.nito .broschueren-bilder.feld{grid-template-columns:repeat(3,minmax(0,430px))}
.nito .downloads{grid-template-columns:repeat(2,minmax(0,430px)); justify-content:center}
@media(max-width:900px){
  .nito .broschueren-bilder, .nito .broschueren-bilder.feld,
  .nito .downloads{grid-template-columns:1fr}
}
.nito .partner-lauf{gap:110px}
.nito .partner-lauf img{height:96px}
@keyframes partnerlauf{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 55px))}}
@media(max-width:760px){.nito .partner-lauf{gap:60px} .nito .partner-lauf img{height:64px}}
/* Jahresringe zeichnen sich, sobald sie im Bild sind */
.nito .holz-zeile{align-items:center}
.nito #ringe{width:min(100%,520px); justify-self:center}
.nito .ring{fill:none; stroke:#0D0F35; stroke-width:1.6; stroke-linejoin:round;
  opacity:.9; stroke-dasharray:1; stroke-dashoffset:1}
.nito #ringe.los .ring{animation:ringZeichnen 2.2s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--takt) * .22s)}
@keyframes ringZeichnen{to{stroke-dashoffset:0}}
.nito .ring:nth-child(3n){stroke:#A8801A; opacity:.7}
@media (prefers-reduced-motion: reduce){
  .nito .ring{stroke-dashoffset:0}
  .nito #ringe.los .ring{animation:none}}
.nito .attribute{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#A8801A;
  margin:-14px 0 32px}
/* Die Ringe zelebrieren: gross, ruhig, in ewiger langsamer Drehung */
.nito .holz-zeile{grid-template-columns:1fr 1.35fr}
.nito #ringe{width:min(100%,780px)}
.nito .ring{stroke-width:1.9}
.nito #ringe.los .ring{animation-duration:3s; animation-delay:calc(var(--takt) * .28s)}
.nito #ringe.los{animation:ringDreht 240s linear infinite}
@keyframes ringDreht{to{transform:rotate(360deg)}}
@media(max-width:900px){.nito .holz-zeile{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.nito #ringe.los{animation:none}}
/* Holz in Zahlen */
.nito .holz-fakten{display:grid; grid-template-columns:repeat(4,1fr);
  gap:26px; margin-top:70px}
.nito .fakt{border-top:1px solid rgba(13,15,53,.2); padding-top:18px}
.nito .fakt .wert{font-size:clamp(30px,3vw,44px); font-weight:700;
  letter-spacing:-.02em; color:#A8801A}
.nito .fakt p{margin-top:8px; font-size:16px; font-weight:300;
  color:rgba(13,15,53,.62)}
@media(max-width:900px){.nito .holz-fakten{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nito .holz-fakten{grid-template-columns:1fr}}

/* Bilder-Feld: Shell-.feld (weisse Pille) neutralisieren */
.nito .broschueren-bilder.feld{background:transparent; border-radius:0; padding:0; box-shadow:none}