/* sailesconsulting Portal: Gestaltung "Werkbank & Basislager", dunkle Fassung.
   Oben die Werkbank (sailesconsulting, flache scharfkantige Kacheln, Petrol), unten das Basislager
   (MUD.VENTURES, warm, Höhenlinien, abgerundete Kacheln, Orange). Schriften self-hosted (SIL OFL). */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-400.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-500.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-600.woff2") format("woff2");}
@font-face{font-family:"Saira";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/saira-600.woff2") format("woff2");}
@font-face{font-family:"Saira";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/saira-700.woff2") format("woff2");}

:root{
  color-scheme:dark;
  --page-bg:#12161B;
  --page-ink:#E4E9EE;

  /* Werkbank: sailesconsulting (CONACT Brand Book v1.0, dunkle Fassung) */
  --w-bg:#171D24;
  --w-tile:#1F262F;
  --w-ink:#E7EEF1;
  --w-ink-soft:#A9B4C0;
  --w-muted:#7E8A98;
  --w-line:#2E3742;
  --w-accent:#67AEBE;
  --w-accent-soft:#1B2E36;
  --w-spark:#A8BC63;
  --w-danger:#E08A98;
  --w-danger-soft:#33212A;

  /* Basislager: MUD.VENTURES */
  --m-bg:#171913;
  --m-tile:#20241C;
  --m-ink:#F1EBE0;
  --m-ink-soft:#C3BBA9;
  --m-muted:#8C8271;
  --m-line:#33372B;
  --m-accent:#E8971F;
  --m-forest:#7FA98B;
  --m-contour:rgba(184,174,158,.09);
  --m-shadow:rgba(0,0,0,.34);

  --tile-shadow:rgba(0,0,0,.30);
  --display:Saira,"Arial Narrow",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.ic{display:inline-block;vertical-align:middle;flex:none}

/* ---------- Oberste Zeile: Wortmarke und Sitzung ---------- */
.topline{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;
  padding:18px 0 0;
}
.brand{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;line-height:1}
.brand .wm{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.002em;color:var(--w-ink)}
.brand .wm .ai{color:var(--w-spark)}
.brand .by{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--w-muted)}
.brand .by .act{color:var(--w-ink-soft)}
.who{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--w-muted);
}
.who a{
  color:var(--w-ink);text-decoration:none;
  border:1px solid var(--w-line);border-radius:2px;padding:6px 11px;
  transition:border-color .16s ease,color .16s ease;
}
.who a:hover{border-color:var(--w-accent);color:var(--w-accent)}

/* ---------- Kopf ---------- */
.masthead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  padding:clamp(22px,4.5vw,40px) 0 clamp(20px,3.5vw,30px);
}
.masthead h1{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(26px,3.4vw,38px);
  letter-spacing:-.015em;
  text-wrap:balance;
}
.masthead p{margin:0;color:var(--w-muted);font-size:15px;max-width:62ch}

/* ---------- Band ---------- */
.band{position:relative;padding:clamp(28px,4.5vw,44px) 0 clamp(34px,5vw,52px)}
.band--work{background:var(--w-bg);color:var(--w-ink);border-block:1px solid var(--w-line)}
.band--wild{background:var(--m-bg);color:var(--m-ink);border-bottom:1px solid var(--m-line)}

/* Höhenlinien nur in der Mudventures-Welt */
.band--wild::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 84% 12%, transparent 0 28px, var(--m-contour) 28px 29px),
    repeating-radial-gradient(circle at 8% 88%, transparent 0 36px, var(--m-contour) 36px 37px);
}
.band > .wrap{position:relative}

.band-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:10px 28px;margin-bottom:clamp(20px,3vw,28px);
}
.band-head .lede{max-width:56ch}
.kicker{
  display:block;margin-bottom:7px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.band--work .kicker{color:var(--w-accent)}
.band--wild .kicker{color:var(--m-accent)}
.band-head h2{
  margin:0 0 6px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(21px,2.5vw,28px);
  letter-spacing:-.01em;
}
.band-head p{margin:0;font-size:15px}
.band--work .band-head p{color:var(--w-ink-soft)}
.band--wild .band-head p{color:var(--m-ink-soft)}
.tally{
  flex:none;
  font-family:var(--mono);
  font-size:12px;font-variant-numeric:tabular-nums;
  padding-bottom:3px;
}
.band--work .tally{color:var(--w-muted)}
.band--wild .tally{color:var(--m-muted)}

/* Gruppen innerhalb der Werkbank (Phasen der Toolbox, interner Teil) */
.group{margin-top:clamp(22px,3vw,30px)}
.group:first-of-type{margin-top:0}
.group-head{
  display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-muted);
}
.group-head .nr{color:var(--w-accent)}
.group-head .note{margin-left:auto;text-transform:none;letter-spacing:.02em;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px}

/* ---------- Kacheln ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.band--wild .grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.tile{
  position:relative;display:flex;flex-direction:column;gap:7px;
  padding:16px 18px 15px;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tile h3{margin:0;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.005em}
.tile p{margin:0;font-size:13.5px;line-height:1.45;flex:1}
.host{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;overflow-wrap:anywhere}

/* Werkbank: flach, scharfkantig, Instrument */
.band--work .tile{background:var(--w-tile);border:1px solid var(--w-line);border-radius:2px}
.band--work .tile h3{color:var(--w-ink)}
.band--work .tile p{color:var(--w-ink-soft)}
.band--work .host{color:var(--w-muted)}
.band--work .tile::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
  background:var(--w-accent);transform:scaleY(0);transform-origin:top;
  transition:transform .18s ease;
}
.band--work .tile:hover{border-color:var(--w-accent);transform:translateY(-1px);box-shadow:0 4px 14px var(--tile-shadow)}
.band--work .tile:hover::before{transform:scaleY(1)}
.band--work .tile:hover h3{color:var(--w-accent)}

/* Basislager: weicher, warm, Papier */
.band--wild .tile{background:var(--m-tile);border:1px solid var(--m-line);border-radius:11px}
.band--wild .tile h3{color:var(--m-ink);display:inline-block}
.band--wild .tile p{color:var(--m-ink-soft)}
.band--wild .host{color:var(--m-muted)}
.band--wild .tile .rule{display:block;height:2px;width:26px;background:var(--m-accent);border-radius:2px;transition:width .2s ease}
.band--wild .tile:hover{border-color:var(--m-accent);transform:translateY(-2px);box-shadow:0 8px 20px var(--m-shadow)}
.band--wild .tile:hover .rule{width:56px}

.tile:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.band--work .tile:focus-visible{outline-color:var(--w-accent)}
.band--wild .tile:focus-visible{outline-color:var(--m-accent)}

/* ---------- Basislager eingeklappt (details/summary) ---------- */
details.band--wild > summary{display:block;list-style:none;cursor:pointer}
details.band--wild > summary::-webkit-details-marker{display:none}
details.band--wild > summary:focus-visible{outline:2px solid var(--m-accent);outline-offset:6px}
details.band--wild > summary .band-head{margin-bottom:0}
details.band--wild > summary .tally{display:inline-flex;align-items:center;gap:10px}
details.band--wild > summary .tally::after{
  content:"";width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
details.band--wild[open] > summary .tally::after{transform:rotate(-135deg) translateY(-2px)}
details.band--wild > summary:hover .band-head h2{color:var(--m-accent)}
details.band--wild > .wrap > .grid{margin-top:clamp(20px,3vw,28px)}
details.band--wild[open]{padding-bottom:clamp(34px,5vw,52px)}
details.band--wild:not([open]){padding-bottom:clamp(28px,4.5vw,44px)}

/* ---------- Anmeldung ---------- */
.login-wrap{max-width:520px;margin:0 auto}
.card{
  position:relative;
  background:var(--w-tile);border:1px solid var(--w-line);border-radius:2px;
  padding:26px 28px 24px;
}
.card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--w-accent)}
.card h2{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--w-ink)}
.card p{margin:0 0 16px;font-size:14px;color:var(--w-ink-soft)}
.card label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-muted);margin:14px 0 6px}
.card input{
  width:100%;min-height:42px;padding:9px 12px;
  border:1px solid var(--w-line);border-radius:2px;
  font:inherit;color:var(--w-ink);background:var(--page-bg);
}
.card input:focus{outline:none;border-color:var(--w-accent);box-shadow:0 0 0 2px var(--w-accent-soft)}
.card input.code{font-family:var(--mono);font-size:1.5rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;margin-top:20px;padding:0 18px;
  border:1px solid var(--w-accent);border-radius:2px;
  background:var(--w-accent);color:var(--page-bg);
  font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:filter .16s ease;
}
.btn:hover{filter:brightness(1.1)}
.btn:focus-visible{outline:2px solid var(--w-accent);outline-offset:3px}
.err{margin-top:14px;padding:10px 12px;border:1px solid var(--w-danger);border-radius:2px;background:var(--w-danger-soft);color:var(--w-danger);font-size:14px}
.hint{font-size:13px;color:var(--w-muted);margin:16px 0 0;line-height:1.5}
.hint a{color:var(--w-ink-soft);text-decoration:none;border-bottom:1px solid var(--w-line)}
.hint a:hover{border-bottom-color:currentColor}
.login-wrap .card + .card{margin-top:22px}
.card select{
  width:100%;min-height:42px;padding:9px 12px;
  border:1px solid var(--w-line);border-radius:2px;
  font:inherit;color:var(--w-ink);background:var(--page-bg);
}
.card input.wscode{font-family:var(--mono);font-size:1.25rem;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.issued{margin-top:18px;padding:16px;border:1px solid var(--w-accent);border-radius:2px;background:var(--w-accent-soft)}
.issued .big{display:block;font-family:var(--mono);font-size:1.7rem;letter-spacing:.18em;color:var(--w-ink);margin:4px 0 8px}
.issued p{margin:0;font-size:13.5px}
.plain{margin:10px 0 0;padding-left:18px;font-size:14px;color:var(--w-ink-soft)}
.plain li{margin:4px 0}

/* ---------- Fuß ---------- */
.foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding:22px 0 40px;font-size:13px;color:var(--w-muted);
}
.foot a{
  color:var(--page-ink);text-decoration:none;
  border-bottom:1px solid var(--w-line);
  font-family:var(--mono);font-size:12.5px;
}
.foot a:hover{border-bottom-color:currentColor}
.foot .note{font-style:normal}
.foot .sep{color:var(--w-line)}
.foot .legal{display:flex;flex-wrap:wrap;gap:8px 16px;margin-left:auto}

/* ---------- MUD.VENTURES-Anmeldung (eigene Seite auf den MUD-Domains) ---------- */
.brand--mud .wm{color:var(--m-ink);letter-spacing:.04em}
.brand--mud .wm .dot{color:var(--m-accent)}
.brand--mud .by{color:var(--m-muted)}
.masthead--mud p{color:var(--m-muted)}
.band--wild .login-wrap{position:relative}
.band--wild .card{background:var(--m-tile);border-color:var(--m-line);border-radius:11px}
.band--wild .card::before{background:var(--m-accent);border-radius:11px 0 0 11px}
.band--wild .card h2{color:var(--m-ink)}
.band--wild .card p{color:var(--m-ink-soft)}
.band--wild .card label{color:var(--m-muted)}
.band--wild .card input{border-color:var(--m-line);border-radius:8px;color:var(--m-ink)}
.band--wild .card input:focus{border-color:var(--m-accent);box-shadow:0 0 0 2px rgba(232,151,31,.18)}
.band--wild .btn{background:var(--m-accent);border-color:var(--m-accent);border-radius:8px;color:#1B1408}
.band--wild .btn:focus-visible{outline-color:var(--m-accent)}
.band--wild .hint{color:var(--m-muted)}
.band--wild .hint a{color:var(--m-ink-soft);border-bottom-color:var(--m-line)}

@media (max-width:720px){
  .card{padding:22px 18px 20px}
  .foot .legal{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ---------- Rechtsseiten ---------- */
.legal-panel{max-width:72ch;color:var(--w-ink-soft);font-size:15px}
.legal-panel .stand{margin:0 0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-muted)}
.legal-panel h2{margin:26px 0 8px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.005em;color:var(--w-ink)}
.legal-panel p{margin:0 0 12px;line-height:1.6}
.legal-panel .block{padding-left:14px;border-left:2px solid var(--w-accent)}
.legal-panel a{color:var(--w-ink);text-decoration:none;border-bottom:1px solid var(--w-line)}
.legal-panel a:hover{border-bottom-color:var(--w-accent)}
.legal-panel code{font-family:var(--mono);font-size:.9em;color:var(--w-ink)}
.legal-panel ul{margin:0 0 12px;padding-left:20px}