/* DMNT Studio – dmnt-link.de
   Grundlage: docs 44_DMNT-Studio-Design-Grundlage (24.09.2026)
   Entschieden: Oktaeder als Drahtgitter, Inter Tight, Strich 1,75 px, nur dunkel.
   Kein Blau, kein Glow, kein Schweben. Farbe tragen nur die Werke (ein Punkt je Kachel). */

@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-tight-latin.woff2") format("woff2");
}

:root{
  color-scheme:dark;
  --bg:#0a0a0c;
  --bg-2:#111114;
  --line:#26262c;
  --line-2:#3a3a42;
  --muted:#8b8b95;
  --silver:#c8c8d0;
  --fg:#ececef;
  --white:#ffffff;
  --kryst:#8fd3ff;
  --radio:#ff6a3d;
  --font:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sw:1.75px;
  --sp:.38em;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 var(--font);
  padding-inline:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--silver);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .15s,border-color .15s}
a:hover,a:focus-visible{color:var(--white);border-color:var(--white)}
:focus-visible{outline:1px solid var(--white);outline-offset:3px}
::selection{background:var(--silver);color:var(--bg)}

/* Gerüst: Rahmen mit Konstruktionslinien, die Abschnitte hängen daran */
.frame{max-width:1080px;margin:0 auto;border-inline:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column}
.abschnitt{position:relative;border-top:1px solid var(--line);padding:56px 40px}
.abschnitt::before,.abschnitt::after{
  content:"";position:absolute;top:-5px;width:9px;height:9px;pointer-events:none;
  background:
    linear-gradient(var(--line-2),var(--line-2)) center/9px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) center/1px 9px no-repeat;
}
.abschnitt::before{left:-5px}
.abschnitt::after{right:-5px}
@media (max-width:640px){.abschnitt{padding:40px 20px}}

.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500}
h2{font-weight:500;font-size:1.5rem;letter-spacing:.01em;margin:0 0 10px;text-wrap:balance}
.lead{max-width:60ch;color:var(--muted);margin:0 0 32px}

/* Wortmarke */
.marke{display:inline-flex;align-items:baseline;gap:.55em;line-height:1;white-space:nowrap;border:0}
.marke .dmnt{font-weight:500;letter-spacing:var(--sp);text-transform:uppercase;margin-right:calc(var(--sp) * -1);color:var(--fg)}
.marke .studio{font-weight:400;font-size:.42em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
a.marke:hover .dmnt{color:var(--white)}

/* Kopfzeile */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 40px;border-top:0}
.kopf::before,.kopf::after{display:none}
.kopf .marke{font-size:1.05rem}
.kopf nav{display:flex;gap:22px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.kopf nav a{color:var(--muted);border:0}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--white)}
@media (max-width:640px){.kopf{padding:18px 20px}}

/* Held: Zeichen + Wortmarke + ein Satz */
.held{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:48px;align-items:center}
@media (max-width:760px){.held{grid-template-columns:1fr;gap:32px}}
.buehne{position:relative;aspect-ratio:1;max-width:100%;border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center}
.buehne::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat;
}
.buehne .zeichen{width:72%;height:72%;position:relative;z-index:1}
.zeichen{display:block;overflow:visible}
.zeichen line{stroke:var(--silver);stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke;stroke-width:var(--sw)}
.zeichen line.back{stroke:var(--line-2)}
/* Die eine Geste: Kanten zeichnen sich einmal nach, dann Stille. */
.zeichen.anim line{stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.zeichen.anim line{animation:none;stroke-dashoffset:0}}

.held-text h1{margin:0 0 18px;font-size:clamp(2.2rem,6vw,3.6rem);font-weight:500}
.held-text h1 .marke{font-size:1em}
.held-text .frage{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 20px;font-weight:500}
.held-text .satz{color:var(--muted);max-width:46ch;margin:0;font-size:1.05rem}

/* Werke im Gitter */
.gitter{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}
@media (max-width:760px){.gitter{grid-template-columns:1fr}}
.kachel{position:relative;padding:28px 24px;border-right:1px solid var(--line);min-height:150px;display:flex;flex-direction:column;gap:10px;color:var(--fg);border-bottom:0;transition:box-shadow .2s}
.gitter .kachel:last-child{border-right:0}
@media (max-width:760px){.kachel{border-right:0;border-bottom:1px solid var(--line)}.gitter .kachel:last-child{border-bottom:0}}
a.kachel:hover,a.kachel:focus-visible{box-shadow:inset 0 0 0 1px var(--white);outline:none;color:var(--fg)}
.kachel .punkt{width:10px;height:10px;border-radius:50%;background:var(--p,var(--silver))}
.kachel h3{font-weight:500;font-size:1.1rem;margin:4px 0 0;letter-spacing:.01em}
.kachel p{margin:0;color:var(--muted);font-size:.95rem}
.kachel .ziel{margin-top:auto;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
a.kachel:hover .ziel{color:var(--white)}
.kachel.leer{justify-content:center;align-items:center;color:var(--line-2)}
.kachel.leer .plus{font-size:1.6rem;line-height:1}
.kachel.leer p{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--line-2)}

/* Textseiten (Impressum, Datenschutz) */
main.doc{max-width:760px;flex:1}
main.doc h1{font-size:1.8rem;font-weight:500;margin:0 0 4px;letter-spacing:.01em}
main.doc .stand{color:var(--muted);margin:0 0 28px}
main.doc h2{font-size:1.1rem;margin:34px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
main.doc h3{font-size:1rem;font-weight:500;margin:18px 0 4px;color:var(--silver)}
main.doc p,main.doc li{max-width:68ch}
main.doc ul{padding-left:20px}
main.doc .hinweis{border:1px solid var(--line);padding:12px 16px;color:var(--muted);font-size:.95rem;margin:0 0 24px}

/* Fußzeile */
.fuss{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:22px 40px;color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.fuss nav{display:flex;gap:22px;flex-wrap:wrap}
.fuss a{color:var(--muted);border:0}
.fuss a:hover{color:var(--white)}
.fuss .mail{text-transform:none;letter-spacing:0;font-weight:400;font-size:.9rem}
@media (max-width:640px){.fuss{padding:18px 20px}}

/* KI-Marke (weisser Kreis, Buchstaben ausgespart) vor einer Werkzeile */
.kachel .mit-marke{display:flex;align-items:center;gap:.5em}
.ai{width:1.25em;height:1.25em;flex:none}
.ai circle{fill:var(--silver)}
.ai text{fill:var(--bg);font:700 11.5px var(--font);letter-spacing:-.02em}