/* ==========================================================================
   L.U.N.A. – Ergänzungen zum STZ-Design-System „Blueprint & Nachtkapitel“
   Leitlinie: wenig Text, viel Luft, eine Aussage pro Abschnitt.
   Eigene Zutat: die vier LUNA-Kacheln als Tonleiter von Tiefblau zu Papier.
   ========================================================================== */
:root{
  --l1:var(--blue-deep);  --l1-fg:var(--blue-ink);
  --l2:var(--blue);       --l2-fg:var(--blue-ink);
  --l3:var(--blue-soft);  --l3-fg:var(--blue);
  --l4:var(--paper-2);    --l4-fg:var(--blue);
  --l4-line:inset 0 0 0 1px rgba(25,37,170,.25);
}

/* ---------- Wortmarke (Kacheln) ---------- */
.lmark{display:inline-grid;grid-template-columns:repeat(4,1fr);gap:3px;flex:none}
.lmark i{display:grid;place-items:center;aspect-ratio:1;font:600 1em/1 var(--sans);font-style:normal;letter-spacing:-.02em}
.lmark i:nth-child(1){background:var(--l1);color:var(--l1-fg)}
.lmark i:nth-child(2){background:var(--l2);color:var(--l2-fg)}
.lmark i:nth-child(3){background:var(--l3);color:var(--l3-fg)}
.lmark i:nth-child(4){background:var(--l4);color:var(--l4-fg);box-shadow:var(--l4-line)}
.brand .lmark{font-size:13px;width:calc(4 * 26px + 9px);font-family:var(--sans);text-transform:none;letter-spacing:0}
.brand .lmark i{display:grid;font-weight:600}
.brand .lmark i:nth-child(1){color:var(--l1-fg)}
.brand .lmark i:nth-child(2){color:var(--l2-fg)}
.brand .lmark i:nth-child(3),.brand .lmark i:nth-child(4){color:var(--blue)}
.menu-open .site-header .brand .lmark i:nth-child(1){background:var(--blue-ink);color:var(--blue)}
.menu-open .site-header .brand .lmark i:nth-child(2){background:rgba(233,231,225,.82);color:var(--blue)}
.menu-open .site-header .brand .lmark i:nth-child(3){background:rgba(233,231,225,.55)}
.menu-open .site-header .brand .lmark i:nth-child(4){background:rgba(233,231,225,.3);color:var(--blue-ink);box-shadow:none}
.lmark--foot{font-size:22px;width:calc(4 * 46px + 9px);margin-bottom:var(--s5)}
.site-footer .lmark i:nth-child(1){background:var(--blue-ink);color:var(--blue-deep)}
.site-footer .lmark i:nth-child(2){background:rgba(233,231,225,.75);color:var(--blue-deep)}
.site-footer .lmark i:nth-child(3){background:rgba(233,231,225,.42);color:var(--blue-ink)}
.site-footer .lmark i:nth-child(4){background:rgba(233,231,225,.16);color:var(--blue-ink);box-shadow:inset 0 0 0 1px rgba(233,231,225,.3)}
.site-footer .f-col a .arr{display:inline-block;width:10px;height:10px;vertical-align:baseline;margin-left:4px;opacity:.7}
.site-footer .f-col{grid-column:span 3}
.site-footer .f-col:first-of-type{grid-column:7 / span 2}
.site-footer .f-col h3{hyphens:manual;-webkit-hyphens:manual}
.site-footer .claim .sub{font:400 var(--fs-small)/1.5 var(--sans);letter-spacing:0;opacity:.8;margin:-12px 0 var(--s5);max-width:44ch}

/* Aktiver Menüpunkt beim Scrollen */
.nav a.top.is-current{color:var(--ink)}
.nav a.top.is-current::after{transform:none}

/* Abschnittsköpfe: ohne Seitentext, Überschrift darf breiter laufen */
.shead h2{grid-column:1 / span 10}

/* ---------- Hero ---------- */
.luna-hero{padding-bottom:var(--section)}
.luna-hero .hero-h1{max-width:20ch}
.luna-word{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,20px);margin:clamp(48px,7vw,96px) auto 0;max-width:1080px}
.luna-word a{display:flex;flex-direction:column;text-decoration:none;color:inherit;text-align:left}
.luna-word .tile{display:grid;place-items:center;aspect-ratio:1;font:600 clamp(3.4rem,11vw,9.5rem)/1 var(--sans);letter-spacing:-.04em;transition:transform .6s var(--ease)}
.luna-word li:nth-child(1) .tile{background:var(--l1);color:var(--l1-fg)}
.luna-word li:nth-child(2) .tile{background:var(--l2);color:var(--l2-fg)}
.luna-word li:nth-child(3) .tile{background:var(--l3);color:var(--l3-fg)}
.luna-word li:nth-child(4) .tile{background:var(--l4);color:var(--l4-fg);box-shadow:var(--l4-line)}
.luna-word a:hover .tile,.luna-word a:focus-visible .tile{transform:translateY(-6px)}
.luna-word b{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--ink);font:500 clamp(1rem,1.8vw,1.5rem)/1.1 var(--sans);letter-spacing:-.025em}
.luna-word b::first-letter{color:var(--blue)}
.luna-word .de{margin-top:6px;font:400 var(--fs-mono)/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Verfahren: Schleifen ---------- */
.luna-story .shead{margin-bottom:var(--s7)}
.loops-fig{margin:0;background:var(--paper-2);border:1px solid rgba(11,12,16,.1);border-radius:var(--radius-card);padding:var(--s5);display:flex;flex-direction:column}
.loops-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule);
  font:500 var(--fs-mono)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.loops{width:100%;height:auto;max-height:calc(100svh - var(--header-h) - 200px);margin:var(--s4) auto 0}
.loop{color:#c9cbe0;transition:color .6s var(--ease)}
.loop .halo{fill:none;stroke:var(--paper-2);stroke-width:21;stroke-linecap:round}
.loop .ring{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round}
.loop .tip{fill:currentColor;stroke:var(--paper-2);stroke-width:3;paint-order:stroke}
.loop .ltr{font:600 54px/1 var(--sans);text-anchor:middle;fill:#b9bccf;transition:fill .6s var(--ease)}
.loop .lw{font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-anchor:middle;fill:var(--ink-3)}
.loop.on{color:#9ea8e6}
.loop.on .ltr,.loop.cur .ltr{fill:var(--blue)}
.loop.cur{color:var(--blue)}
.loop.cur .lw{fill:var(--ink)}
.luna-story .story-step h3{font-size:clamp(2.4rem,4.6vw,4.2rem);letter-spacing:-.045em;line-height:1}
.luna-story .story-step p{font-size:var(--fs-lead);line-height:1.4;max-width:24ch}

/* ---------- Kompetenzen ---------- */
.xp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.xp{display:flex;flex-direction:column;gap:var(--s4)}
.xp .tile{width:100%;aspect-ratio:1;max-width:96px;display:grid;place-items:center;font:600 2.6rem/1 var(--sans);letter-spacing:-.03em}
.xp:nth-child(1) .tile{background:var(--l1);color:var(--l1-fg)}
.xp:nth-child(2) .tile{background:var(--l2);color:var(--l2-fg)}
.xp:nth-child(3) .tile{background:var(--l3);color:var(--l3-fg)}
.xp:nth-child(4) .tile{background:var(--l4);color:var(--l4-fg);box-shadow:var(--l4-line)}
.xp h3{font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.025em;line-height:1.15;font-weight:500;hyphens:manual;-webkit-hyphens:manual;border-top:1px solid var(--ink);padding-top:var(--s3)}
.xp h3 small{display:block;font:400 var(--fs-mono)/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.xp p{color:var(--ink-2);font-size:var(--fs-small);max-width:24ch}
.xp-note{margin-top:var(--s7);max-width:52ch;color:var(--ink-2)}


/* ---------- Diplomatie: Gleichung als Anker ---------- */
.shead-solo{display:flex;align-items:center;gap:16px;color:var(--ink-3)}
.shead-solo::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.equation{display:grid;gap:.06em;margin-top:var(--s6);font:500 clamp(2.1rem,6.4vw,5.8rem)/1 var(--sans);letter-spacing:-.05em;hyphens:manual;-webkit-hyphens:manual}
.equation .eq{display:flex;align-items:baseline;gap:.28em}
.equation .eq:nth-child(2){padding-left:clamp(0px,7vw,120px)}
.equation .eq:nth-child(3){padding-left:clamp(0px,14vw,240px)}
.equation i{font-style:normal;font-weight:400;color:var(--blue)}
.equation .hi{color:var(--blue)}
.dipl-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s6);margin-top:var(--s8);align-items:start}
.dipl-body .lead{grid-column:1 / span 6;max-width:44ch}
.dipl-out{grid-column:8 / span 5;display:grid}
.dipl-out .mono{color:var(--ink-3);margin-bottom:var(--s3)}
.dipl-out a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px var(--s4);padding:var(--s4) 0;border-top:1px solid var(--ink);text-decoration:none;color:inherit}
.dipl-out a:last-child{border-bottom:1px solid var(--ink)}
.dipl-out b{font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.025em;line-height:1.15;hyphens:manual}
.dipl-out a span{grid-column:1;color:var(--ink-3);font-size:var(--fs-small)}
.dipl-out .arr{grid-column:2;grid-row:1 / span 2;width:20px;height:20px;color:var(--blue);transition:transform .4s var(--ease)}
.dipl-out a:hover b{color:var(--blue)}
.dipl-out a:hover .arr{transform:translateX(4px)}

/* ---------- Statement-Band ---------- */
.statement-big{font:500 clamp(2rem,4.8vw,4.4rem)/1.04 var(--sans);letter-spacing:-.045em;max-width:20ch}
.statement-big span{opacity:.62}

/* ---------- Regelkreis ---------- */
.rk{margin:0}
.rk-frame{position:relative;border:1.5px dashed var(--blue);border-radius:var(--radius-card);padding:clamp(40px,4vw,56px) clamp(16px,2.4vw,32px) clamp(20px,2.4vw,32px)}
.rk-frame-l{position:absolute;top:-.75em;left:var(--s5);background:var(--paper);padding:0 10px;color:var(--blue)}
.rk-grid{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.15fr) 34px minmax(0,1.15fr) 34px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--s2);row-gap:var(--s5);align-items:center}
.rk-noise{grid-column:5;grid-row:1;position:relative;border:1.5px dashed var(--signal);border-radius:10px;padding:var(--s3) var(--s4);text-align:center;display:grid;gap:4px}
.rk-noise b{font-weight:500;font-size:.95rem;letter-spacing:-.01em}
.rk-noise span{font-size:.8rem;color:var(--ink-3)}
.rk-noise::after{content:"";position:absolute;left:50%;top:100%;height:calc(var(--s5) - 9px);border-left:1.5px solid var(--signal);transform:translateX(-50%)}
.rk-noise::before{content:"";position:absolute;left:50%;top:calc(100% + var(--s5) - 10px);transform:translateX(-50%);border:6px solid transparent;border-bottom:0;border-top:8px solid var(--signal)}
.rk-status{grid-column:1;grid-row:2;align-self:stretch;display:flex;flex-direction:column}
.rk-new{grid-column:7}
.rk-box{background:var(--paper);border:1px solid var(--ink);padding:var(--s4) var(--s3);text-align:center;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.rk-box small{display:block;margin-top:6px;font:400 .6875rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.rk-soll{position:relative;border:1.5px solid var(--blue);color:var(--blue)}
.rk-soll::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top:0;border-bottom:9px solid var(--blue)}
.rk-q{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:var(--s3) 0;font:500 .75rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-align:center;color:var(--ink-2)}
.rk-q::before{content:"↓";font:400 1.1rem/1 var(--sans);color:var(--ink-3)}
.rk-q::after{content:"↑";font:400 1.1rem/1 var(--sans);color:var(--blue)}
.rk-status::after{content:"";flex:1;align-self:center;border-left:2px solid var(--blue);min-height:24px;margin-bottom:calc(-1 * var(--s5))}
.rk-new::before{content:"";flex:1}
.rk-arr{grid-row:2;display:grid;place-items:center;color:var(--blue)}
.rk-arr .arr{width:22px;height:22px}
.rk-col{grid-row:2;background:var(--paper-2);border:1px solid rgba(11,12,16,.12);border-radius:var(--radius-card);padding:var(--s4)}
.rk-regler{grid-column:3}
.rk-strecke{grid-column:5}
.rk-h{font:400 var(--fs-mono)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:var(--s3)}
.rk-h b{display:block;margin-top:4px;font:500 1.2rem/1.1 var(--sans);text-transform:none;letter-spacing:-.02em;color:var(--ink)}
.rk-tiles,.rk-steps{list-style:none;display:grid;gap:8px}
.rk-tiles li{display:flex;align-items:center;gap:12px;padding:6px 10px 6px 6px;background:var(--paper);border:1px solid var(--rule);font-weight:500}
.rk-tiles i{width:30px;height:30px;display:grid;place-items:center;font:600 .95rem/1 var(--sans);font-style:normal;flex:none}
.rk-tiles li:nth-child(1) i{background:var(--l1);color:var(--l1-fg)}
.rk-tiles li:nth-child(2) i{background:var(--l2);color:var(--l2-fg)}
.rk-tiles li:nth-child(3) i{background:var(--l3);color:var(--l3-fg)}
.rk-tiles li:nth-child(4) i{background:var(--l4);color:var(--l4-fg);box-shadow:var(--l4-line)}
.rk-steps{gap:20px}
.rk-steps li{position:relative;padding:9px 10px;text-align:center;border:1px solid var(--blue);background:var(--paper);color:var(--blue);font-weight:500}
.rk-steps li + li::before{content:"↕";position:absolute;left:50%;top:-19px;transform:translateX(-50%);font:400 .9rem/1 var(--sans);color:var(--ink-3)}
/* Rückkopplung: gleiche Spuren wie das Raster (subgrid, gleicher Spaltenabstand), Ecken exakt unter den Stielen */
.rk-fb{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:subgrid;align-items:end}
.rk-fb-l,.rk-fb-r{height:28px;border-bottom:2px solid var(--blue)}
.rk-fb-l{grid-column:1;margin-left:calc(50% - 1px);margin-right:calc(-1 * var(--s2));border-left:2px solid var(--blue)}
.rk-fb-r{grid-column:7;margin-right:calc(50% - 1px);margin-left:calc(-1 * var(--s2));border-right:2px solid var(--blue)}
.rk-fb-m{grid-column:2 / 7;border-bottom:2px solid var(--blue);text-align:center;color:var(--blue);padding-bottom:6px;margin-inline:-1px}
.rk-new::after{content:"";flex:1;align-self:center;border-left:2px solid var(--blue);margin-bottom:calc(-1 * var(--s5))}
.rk-cap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);font:400 var(--fs-mono)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.persp{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--s7)}
.persp > div{border-top:1px solid var(--ink);padding-top:var(--s3);display:grid;gap:var(--s2);align-content:start}
.persp p{color:var(--ink-2);max-width:44ch}
.sem-lead{margin-top:var(--s4);max-width:44ch;color:rgba(233,231,225,.86)}
@media (max-width:900px){
  .dipl-body .lead,.dipl-out{grid-column:1 / -1}
  .equation .eq:nth-child(2){padding-left:.6em}
  .equation .eq:nth-child(3){padding-left:1.2em}
  .rk-grid{grid-template-columns:1fr;row-gap:var(--s3)}
  .rk-grid > *{grid-column:1!important;grid-row:auto!important}
  .rk-status{order:1}.rk-grid > .rk-arr:nth-of-type(1){order:2}.rk-regler{order:3}.rk-grid > .rk-arr:nth-of-type(2){order:5}
  .rk-noise{order:4}.rk-strecke{order:6}.rk-grid > .rk-arr:nth-of-type(3){order:7}.rk-new{order:8}.rk-fb{order:9}
  .rk-arr .arr{transform:rotate(90deg)}
  .rk-noise::after,.rk-noise::before{display:none}
  .rk-status::after,.rk-new::before,.rk-new::after,.rk-soll::after{display:none}
  .rk-q{flex-direction:row;padding:var(--s2) 0}
  .rk-q::before,.rk-q::after{content:none}
  .rk-fb{display:block}
  .rk-fb-l,.rk-fb-r{display:none}
  .rk-fb-m{display:block;border:1.5px dashed var(--blue);border-radius:10px;padding:var(--s3)}
  .rk-fb-m::before{content:"↺ ";font:400 1rem/1 var(--sans)}
  .persp{grid-template-columns:1fr;gap:var(--s5)}
}

/* ---------- Seminar ---------- */
.sem-facts{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;margin:var(--s7) 0;border-top:1px solid rgba(233,231,225,.5);border-bottom:1px solid rgba(233,231,225,.25)}
.sem-facts div{padding:var(--s4) var(--s4) var(--s4) 0}
.sem-facts div + div{border-left:1px solid rgba(233,231,225,.25);padding-left:var(--s4)}
.sem-facts b{display:block;font:500 clamp(1.6rem,3vw,2.6rem)/1 var(--sans);letter-spacing:-.045em}
.sem-facts span{display:block;margin-top:var(--s2);opacity:.75}

/* ---------- Urheber ---------- */
.author{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.author-photo{margin:0;overflow:hidden;border-radius:var(--radius-card);aspect-ratio:4/5;background:var(--paper-2);max-width:420px}
.author-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.author-text .lead{max-width:36ch}
.li-series{margin-top:var(--s7)}
.li-series ol{list-style:none;margin-top:var(--s3);border-top:1px solid var(--ink)}
.li-series a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.li-series a .mono{color:var(--blue)}
.li-series b{font-weight:500;letter-spacing:-.01em}
.li-series .arr{width:14px;height:14px;color:var(--blue);transition:transform .4s var(--ease)}
.li-series a:hover b{color:var(--blue)}
.li-series a:hover .arr{transform:translate(2px,-2px)}

/* ---------- Kontakt ---------- */
.cta .split{align-items:start}
.contact-lines-big{display:grid;gap:var(--s3);margin-top:var(--s7)}
.contact-lines-big a{font:500 clamp(1.25rem,2vw,1.7rem)/1.2 var(--sans);letter-spacing:-.025em;text-decoration:none;color:var(--blue-ink);overflow-wrap:anywhere}
.contact-lines-big a:hover{text-decoration:underline}
.band .fig{color:var(--ink)}
.band .fig ::selection{background:var(--blue);color:var(--blue-ink)}
.luna-form{border-color:transparent}
.luna-form .check a{color:var(--blue)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .sem-facts{grid-template-columns:1fr 1fr}
  .sem-facts div:nth-child(3){border-left:0;padding-left:0}
  .sem-facts div:nth-child(n+3){border-top:1px solid rgba(233,231,225,.25)}
  .loops{max-height:24svh}
  .loops-fig{padding:var(--s3)}
  .author{grid-template-columns:1fr}
  .author-photo{max-width:300px}
  .site-footer .f-col,.site-footer .f-col:first-of-type{grid-column:span 6}
}
@media (max-width:640px){
  .luna-word{gap:6px}
  .luna-word b{font-size:.82rem;letter-spacing:-.03em}
  .luna-word .de{font-size:.625rem}
  .brand .lmark{font-size:11px;width:calc(4 * 21px + 9px)}
}
@media (prefers-reduced-motion:reduce){.luna-word .tile{transition:none}}