/* Mick Capital – gemeinsame Komponenten-Styles (Unterseiten) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.u-track    { letter-spacing: 0.22em; }
.u-track-sm { letter-spacing: 0.14em; }

/* Logo-Lockup */
.wm-bold      { font-family:"Archivo Narrow",sans-serif; font-weight:700; letter-spacing:0.01em; }
.wm-light     { font-family:"Archivo Narrow",sans-serif; font-weight:500; letter-spacing:0.02em; }
.brand-lockup { display:inline-flex; align-items:center; gap:.8rem; white-space:nowrap; }
.brand-mark   { height:38px; width:auto; }
.brand-word   { white-space:nowrap; }
@media (min-width:1024px){ .brand-mark { height:42px; } }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s }
.reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s }
.reveal[data-d="4"]{ transition-delay:.32s }

.hairline       { height:1px; background:linear-gradient(90deg,transparent,rgba(15,46,36,.22),transparent); }
.hairline-light { height:1px; background:linear-gradient(90deg,transparent,rgba(244,241,231,.28),transparent); }

/* Buttons */
.btn-primary { transition:background-color .35s, color .35s, transform .25s; }
.btn-primary:hover { transform:translateY(-2px); }
.btn-ghost { transition:border-color .35s, color .35s, gap .35s; }
.btn-ghost:hover { gap:1rem; }
.btn-ghost:hover .arr { transform:translateX(4px); }
.arr { transition:transform .35s; }

/* Navigation */
.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .4s cubic-bezier(.22,1,.36,1); }
.nav-link:hover::after { right:0; }
.nav-link.is-active::after { right:0; background:#B8966A; }

#site-header { transition:background-color .4s, backdrop-filter .4s, border-color .4s, padding .4s; }
#site-header.scrolled { background:#EDE9DA; border-color:rgba(184,150,106,.45); }

.mobile-panel { transition:opacity .35s, visibility .35s; }

.grain { position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }

/* Fliesstext auf Rechtsseiten */
.prose-legal { color:rgba(12,35,27,.78); line-height:1.75; }
.prose-legal h2 { font-family:"Archivo Narrow",sans-serif; font-weight:600; color:#0F2E24;
  font-size:1.6rem; line-height:1.2; margin:3.25rem 0 1rem; padding-top:2rem; border-top:1px solid rgba(15,46,36,.12); }
.prose-legal h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.prose-legal h3 { font-family:"Archivo Narrow",sans-serif; font-weight:600; color:#0F2E24;
  font-size:1.1rem; letter-spacing:.01em; margin:2rem 0 .6rem; }
.prose-legal p  { margin:0 0 1.1rem; }
.prose-legal ul { margin:0 0 1.4rem; padding-left:0; list-style:none; }
.prose-legal ul li { position:relative; padding-left:1.5rem; margin-bottom:.55rem; }
.prose-legal ul li::before { content:""; position:absolute; left:0; top:.7em; width:.5rem; height:1px; background:#B8966A; }
.prose-legal a  { color:#0F2E24; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(184,150,106,.7); transition:color .3s; }
.prose-legal a:hover { color:#B8966A; }
.prose-legal strong { color:#0F2E24; font-weight:600; }
.prose-legal dl { margin:0 0 1.4rem; }
.prose-legal dt { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#5A6B62; margin-top:1.1rem; }
.prose-legal dd { margin:.25rem 0 0; color:#0C231B; }

/* Platzhalter, die vor dem Livegang gefuellt werden muessen */
.todo { background:rgba(184,150,106,.18); border-bottom:1px dashed #B8966A; padding:0 .25rem; border-radius:2px; }

/* Sprungmarken-Navigation auf Rechtsseiten */
.toc a { display:block; padding:.45rem 0; font-size:.9rem; color:rgba(12,35,27,.6); border-bottom:1px solid rgba(15,46,36,.08); transition:color .3s, padding-left .3s; }
.toc a:hover { color:#0F2E24; padding-left:.4rem; }

/* Formular */
.field label { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#5A6B62; margin-bottom:.55rem; }
.field input, .field textarea, .field select {
  width:100%; background:#FBFAF4; border:1px solid rgba(15,46,36,.18); border-radius:2px;
  padding:.9rem 1rem; font:inherit; color:#0C231B; transition:border-color .3s, box-shadow .3s, background-color .3s; }
.field textarea { min-height:160px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:#B8966A; box-shadow:0 0 0 3px rgba(184,150,106,.18); background:#fff; }
.field input:user-invalid, .field textarea:user-invalid { border-color:#9B4A3C; }
.field .err { display:none; margin-top:.4rem; font-size:.8rem; color:#9B4A3C; }
.field.has-error .err { display:block; }
.field.has-error input, .field.has-error textarea { border-color:#9B4A3C; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.consent { display:flex; gap:.85rem; align-items:flex-start; font-size:.88rem; line-height:1.6; color:rgba(12,35,27,.72); }
.consent input { margin-top:.3rem; width:1.05rem; height:1.05rem; flex:0 0 auto; accent-color:#0F2E24; }

.form-note { font-size:.85rem; color:rgba(12,35,27,.55); line-height:1.6; }
.form-status { display:none; margin-top:1.5rem; padding:1rem 1.25rem; border-radius:2px; font-size:.92rem; line-height:1.6; }
.form-status.is-visible { display:block; }
.form-status.ok   { background:rgba(15,46,36,.06); border-left:2px solid #0F2E24; color:#0F2E24; }
.form-status.warn { background:rgba(184,150,106,.14); border-left:2px solid #B8966A; color:#0C231B; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  html { scroll-behavior:auto; }
}

/* ---- Komponenten der Zielgruppenseiten ---- */

/* Kachel mit Hover-Anhebung, wie auf der Startseite */
.tile { transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .5s, background-color .5s; }
.tile:hover { transform:translateY(-5px); border-color:rgba(15,46,36,.32); }
.tile:hover .tile-no { color:#B8966A; }
.tile-no { transition:color .5s; }

/* Nummerierte Zeile, wie in den Situationen */
.crit-row { transition:background-color .4s, padding-left .4s; }
.crit-row:hover { background:rgba(15,46,36,.035); padding-left:1.25rem; }

/* Kennzahl: Zahl gross, Erlaeuterung klein darunter */
.stat-figure { font-family:"Archivo Narrow",sans-serif; font-weight:700; line-height:.95;
  font-size:clamp(2.8rem,5vw,4.2rem); letter-spacing:-.01em; }
.stat-unit { font-size:.42em; font-weight:600; letter-spacing:.02em; margin-left:.35rem; }

/* Fussnote zur Quelle */
.source-note { font-size:.8rem; line-height:1.65; }
.source-note a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(184,150,106,.7); }

/* Grosses Zitat */
.pull-quote { font-family:"Archivo Narrow",sans-serif; font-weight:500; line-height:1.3; letter-spacing:.004em; }

/* Abschnitt "Was wir nicht versprechen" */
.caveat { border-left:2px solid rgba(184,150,106,.55); padding-left:1.6rem; }

/* Blocksatz fuer breite Fliesstextspalten, erst ab 640 px */
.bs { hyphens:auto; -webkit-hyphens:auto; }
@media (min-width:640px){ .bs, .bs p { text-align:justify; } }

/* Bilder ohne Kasten: laufen unten weich in den Untergrund aus */
.portrait-nativ img { display:block; -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); }