/* ==========================================================================
   arbnor.me – gemeinsames Stylesheet
   Farben aus dem Dashboard (intranet.arbnor.me).
   Typografie, Masse, Radien und Button-Muster nach dem Design-System
   von my-softworks.de.
   ========================================================================== */

:root{
  /* --- Farben (unveraendert aus dem Dashboard) --- */
  --bg:#131313;
  --flaeche:#2B2B2B;
  --flaeche-hover:#333333;
  --bar:#1B1410;
  --bar-hover:#241a15;

  --akzent:#BD9479;
  --akzent-hell:#d0ab92;
  --akzent-dunkel:#a67c62;
  --akzent-linie:rgba(189,148,121,.28);
  --akzent-flaeche:rgba(189,148,121,.10);

  --text:#fafafa;
  --text-leise:#9e9e9e;

  --linie:rgba(255,255,255,.07);
  --linie-stark:rgba(255,255,255,.16);
  --fokus-ring:var(--akzent);

  /* --- Schrift --- */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* --- Typskala, Major Third (x1.25) --- */
  --text-xs:.8rem;
  --text-base:1rem;
  --text-lg:1.25rem;
  --text-xl:1.563rem;
  --text-2xl:1.953rem;
  --text-3xl:2.441rem;

  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-normal:1.6;
  --tracking-eyebrow:.08em;

  /* --- Abstaende, 4er-Basis --- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;

  /* --- Radien --- */
  --radius-xs:2px;
  --radius-sm:6px;
  --radius-lg:12px;

  /* --- Schatten, warm getoent --- */
  --schatten-sm:0 1px 2px rgba(12,8,5,.55);
  --schatten-md:0 4px 12px rgba(12,8,5,.45);

  /* --- Masse --- */
  --mass-seite:560px;
  --mass-text:62ch;
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--leading-tight);
  hyphens:auto;
  overflow-wrap:break-word;
  text-wrap:balance;
  margin:0;
}

p{margin:0}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--fokus-ring);
  outline-offset:2px;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   Seitenrahmen
   ========================================================================== */

.seite{
  width:100%;
  max-width:var(--mass-seite);
  margin:0 auto;
  padding:var(--space-6) var(--space-4) 0;
  flex:1 0 auto;
}

/* Sprachumschalter, rechts oben */
.sprachwahl{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  margin-bottom:var(--space-6);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
}

.sprachwahl__aktiv,
.sprachwahl__link{
  padding:2px 7px;
  border:1px solid transparent;
  border-radius:var(--radius-xs);
  line-height:1.4;
}

.sprachwahl__aktiv{
  color:var(--akzent);
  border-color:var(--akzent-linie);
  background:var(--akzent-flaeche);
}

.sprachwahl__link{
  color:var(--text-leise);
  text-decoration:none;
  transition:color .15s,border-color .15s;
}
.sprachwahl__link:hover{
  color:var(--akzent);
  border-color:var(--akzent-linie);
}

/* Kleines Label in Versalien, Mono – das prägende Element des Systems */
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--akzent);
  line-height:1.4;
  margin:0 0 var(--space-3);
}

.abschnitt{margin-top:var(--space-12)}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.kopf{text-align:center}

.avatar{
  display:block;
  width:104px;
  height:104px;
  margin:0 auto var(--space-4);
  border-radius:50%;
  object-fit:cover;
  background:var(--bar);
  border:2px solid var(--akzent);
}

.kopf__name{
  font-size:var(--text-2xl);
  margin-bottom:var(--space-2);
}

.kopf__rolle{
  color:var(--text-leise);
  line-height:var(--leading-snug);
}

.kopf__ort{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.02em;
  color:var(--text-leise);
}
.kopf__ort svg{flex:none;color:var(--akzent)}

.marke{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-4);
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--akzent-linie);
  background:var(--akzent-flaeche);
  border-radius:var(--radius-xs);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--akzent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.aktionen{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-6);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn svg{flex:none}

.btn-akzent{
  background-color:var(--akzent);
  color:var(--bar);
}
.btn-akzent:hover{background-color:var(--akzent-hell)}
.btn-akzent:active{background-color:var(--akzent-dunkel)}

.btn-sekundaer{
  background-color:transparent;
  border-color:var(--linie-stark);
  color:var(--text);
}
.btn-sekundaer:hover{
  background-color:var(--flaeche);
  border-color:var(--akzent);
  color:var(--akzent);
}
.btn-sekundaer:active{background-color:var(--flaeche-hover)}

.btn--breit{flex:1 1 0}

/* ==========================================================================
   Karten
   ========================================================================== */

.liste{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.karte{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-left:2px solid var(--akzent);
  border-radius:var(--radius-sm);
  box-shadow:var(--schatten-sm);
  text-decoration:none;
  color:inherit;
  transition:background-color .15s,border-color .15s;
}
.karte:hover{
  background:var(--flaeche-hover);
  border-color:var(--akzent-linie);
  border-left-color:var(--akzent);
}
.karte:hover .karte__pfeil{color:var(--akzent)}

.karte__icon{
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--akzent-linie);
  border-radius:var(--radius-xs);
  background:var(--bar);
  color:var(--akzent);
}

.karte__text{flex:1;min-width:0}

.karte__titel{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-base);
  line-height:var(--leading-snug);
}

.karte__zeile{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-leise);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.karte__geprueft{flex:none;color:var(--akzent)}

.karte__pfeil{
  flex:none;
  color:#6f6f6f;
  transition:color .15s;
}

/* ==========================================================================
   Zugang
   ========================================================================== */

.zugang{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  width:100%;
  padding:var(--space-4) var(--space-6);
  background:var(--bar);
  border:1px solid var(--akzent-linie);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:600;
  color:var(--akzent);
  text-decoration:none;
  transition:background-color .15s,border-color .15s;
}
.zugang:hover{
  background:var(--bar-hover);
  border-color:var(--akzent);
}
.zugang:active{background:#2c211a}
.zugang svg{flex:none}

.hinweis{
  margin-top:var(--space-3);
  text-align:center;
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--text-leise);
}
.hinweis a{
  color:var(--akzent);
  text-decoration:none;
  border-bottom:1px solid var(--akzent-linie);
}
.hinweis a:hover{border-bottom-color:var(--akzent)}

/* ==========================================================================
   Fusszeile
   ========================================================================== */

.fusszeile{
  flex:none;
  margin-top:var(--space-16);
  padding:var(--space-6) var(--space-4);
  background:var(--bar);
  border-top:1px solid var(--akzent-linie);
  text-align:center;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-leise);
}
.fusszeile__herz{color:var(--akzent)}
.fusszeile a{
  color:var(--text-leise);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.fusszeile a:hover{
  color:var(--akzent);
  border-bottom-color:var(--akzent-linie);
}

/* ==========================================================================
   Klein
   ========================================================================== */

@media (max-width:400px){
  .aktionen{flex-direction:column}
  .kopf__name{font-size:var(--text-xl)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Dokumentation
   ========================================================================== */

.seite--breit{--mass-seite:720px}

.zurueck{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  margin-bottom:var(--space-6);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.02em;
  color:var(--text-leise);
  text-decoration:none;
  transition:color .15s;
}
.zurueck:hover{color:var(--akzent)}
.zurueck svg{flex:none}

.doku__kopf{margin-bottom:var(--space-8)}

.doku__titel{
  font-size:var(--text-2xl);
  margin-bottom:var(--space-3);
}

.doku__lead{
  max-width:var(--mass-text);
  color:var(--text-leise);
  font-size:var(--text-lg);
  line-height:var(--leading-snug);
}

.doku__meta{
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-leise);
}

.abzeichen{
  display:inline-block;
  margin-left:var(--space-2);
  padding:1px 6px;
  border:1px solid var(--akzent-linie);
  border-radius:var(--radius-xs);
  background:var(--akzent-flaeche);
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--akzent);
}

.karte--fremd{border-left-color:var(--linie-stark)}
.karte--fremd:hover{border-left-color:var(--akzent)}

/* ==========================================================================
   Prosa – gerenderter Markdown-Inhalt
   ========================================================================== */

.prosa{max-width:var(--mass-text)}

.prosa > * + *{margin-top:var(--space-4)}

.prosa h2{
  font-size:var(--text-xl);
  margin-top:var(--space-12);
  margin-bottom:var(--space-3);
}
.prosa h3{
  font-size:var(--text-lg);
  font-weight:600;
  margin-top:var(--space-8);
  margin-bottom:var(--space-2);
}
.prosa h2 + *,
.prosa h3 + *{margin-top:0}

.prosa p{line-height:var(--leading-normal)}

.prosa a{
  color:var(--akzent);
  text-decoration:none;
  border-bottom:1px solid var(--akzent-linie);
  transition:border-color .15s;
}
.prosa a:hover{border-bottom-color:var(--akzent)}

.prosa strong{font-weight:600;color:var(--text)}

.prosa ul,
.prosa ol{padding-left:var(--space-6)}
.prosa li + li{margin-top:var(--space-2)}
.prosa li::marker{color:var(--akzent)}

.prosa blockquote{
  margin-left:0;
  margin-right:0;
  padding:var(--space-3) var(--space-4);
  border-left:2px solid var(--akzent);
  background:var(--flaeche);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-leise);
}
.prosa blockquote > * + *{margin-top:var(--space-2)}

.prosa code{
  font-family:var(--font-mono);
  font-size:.875em;
  padding:1px 5px;
  border:1px solid var(--linie);
  border-radius:var(--radius-xs);
  background:var(--bar);
  color:var(--akzent);
}

.prosa pre{
  overflow-x:auto;
  padding:var(--space-4);
  border:1px solid var(--linie);
  border-left:2px solid var(--akzent);
  border-radius:var(--radius-sm);
  background:var(--bar);
  line-height:var(--leading-snug);
}
.prosa pre code{
  padding:0;
  border:0;
  background:none;
  color:var(--text);
  font-size:var(--text-xs);
}

.prosa img{
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid var(--akzent-linie);
  border-radius:var(--radius-sm);
}

.prosa hr{
  border:0;
  border-top:1px solid var(--linie);
  margin:var(--space-8) 0;
}

.prosa .tabelle,
.prosa table{
  display:block;
  overflow-x:auto;
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-xs);
}
.prosa th,
.prosa td{
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--linie);
  text-align:left;
  vertical-align:top;
}
.prosa th{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--akzent);
  white-space:nowrap;
}

/* Rouge, dunkel, in der Markenpalette */
.prosa .highlight{background:none}
.prosa .highlight .c,
.prosa .highlight .c1,
.prosa .highlight .cm,
.prosa .highlight .cd{color:#6f6f6f;font-style:italic}
.prosa .highlight .s,
.prosa .highlight .s1,
.prosa .highlight .s2,
.prosa .highlight .sb{color:#c8b39c}
.prosa .highlight .k,
.prosa .highlight .kd,
.prosa .highlight .kn,
.prosa .highlight .kr{color:var(--akzent);font-weight:600}
.prosa .highlight .m,
.prosa .highlight .mi,
.prosa .highlight .mf{color:#d7b98f}
.prosa .highlight .nf,
.prosa .highlight .nb{color:#e0d3c6}
.prosa .highlight .nv,
.prosa .highlight .na{color:#bfae9e}
.prosa .highlight .o,
.prosa .highlight .p{color:#9e9e9e}
.prosa .highlight .err{color:#e6a08a;background:none}

/* ==========================================================================
   Fehlerseite
   ========================================================================== */

.fehler{padding-top:var(--space-8)}
.fehler__en{
  margin-top:var(--space-4);
  color:var(--text-leise);
  font-size:var(--text-xs);
  max-width:var(--mass-text);
}
.fehler .aktionen{margin-top:var(--space-8)}