/* ============================================================
   alexander-rock.de — Theme über Bootstrap 5
   Farbwelt: Codierung von LC-Patchkabeln.
   OM4 violett · OM3 aqua · Singlemode gelb
   ============================================================ */

:root{
  --ar-bg:#0E1113;
  --ar-bg-2:#12161A;
  --ar-panel:#171C21;
  --ar-panel-2:#1E242B;
  --ar-line:rgba(233,235,234,.09);
  --ar-line-2:rgba(233,235,234,.18);
  --ar-paper:#E9EBEA;
  --ar-soft:#C4CACC;
  --ar-dim:#8F989D;
  --ar-om4:#9B6BFF;
  --ar-om3:#38D9C4;
  --ar-sm:#F2C230;

  --ar-display:"Play",Verdana,sans-serif;
  --ar-body:"Play",Verdana,system-ui,sans-serif;
  --ar-mono:"Play",Verdana,sans-serif;

  --ar-rail:312px;
  --ar-inhalt:1180px;   /* Breite der Inhaltsspalte */
  --ar-maxtext:74ch;    /* Zeilenlaenge im Fliesstext */
}

/* ---------- Bootstrap-Variablen umbiegen ---------- */
[data-bs-theme="dark"]{
  --bs-body-bg:var(--ar-bg);
  --bs-body-color:var(--ar-paper);
  --bs-emphasis-color:var(--ar-paper);
  --bs-secondary-color:var(--ar-dim);
  --bs-border-color:var(--ar-line);
  --bs-border-color-translucent:var(--ar-line);
  /* Bootstrap 5.3 setzt die Linkfarbe ueber die RGB-Variante zusammen:
     a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity)) }
     Nur --bs-link-color zu setzen bleibt deshalb wirkungslos — die Verweise
     blieben Bootstrap-blau statt aqua. */
  --bs-link-color:var(--ar-om3);
  --bs-link-color-rgb:56,217,196;
  --bs-link-hover-color:#6be6d6;
  --bs-link-hover-color-rgb:107,230,214;
  --bs-body-font-family:var(--ar-body);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.66;
  --bs-font-monospace:var(--ar-mono);
  --bs-heading-color:var(--ar-paper);
  --bs-tertiary-bg:var(--ar-panel);
  --bs-secondary-bg:var(--ar-panel-2);
  --bs-focus-ring-color:rgba(56,217,196,.45);
  --bs-emphasis-color-rgb:233,235,234;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip statt hidden: hidden zwingt overflow-y auf auto und macht den Body
     damit zum Scrollcontainer. Bootstrap haelt ihn dann faelschlich fuer das
     scrollende Element, und die Leseposition in der Seitenschiene bleibt
     stehen. clip beschneidet nur, ohne Scrollcontainer zu werden. */
  overflow-x:clip;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:focus-visible{outline:2px solid var(--ar-om3);outline-offset:3px;border-radius:2px}
.ar-mono{font-family:var(--ar-mono)}

/* ---------- Typografie ---------- */
.ar-eyebrow{
  font-family:var(--ar-mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ar-dim);display:flex;align-items:center;gap:.7rem;margin-bottom:1.25rem;
}
.ar-eyebrow::before{content:"";width:24px;height:1px;background:var(--ar-om4);flex:none}
.ar-h2{
  font-family:var(--ar-display);font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1;letter-spacing:-.015em;margin-bottom:1.5rem;
}
.ar-h3{font-family:var(--ar-display);font-weight:700;font-size:1.25rem;letter-spacing:-.005em;margin-bottom:.35rem}
.ar-lede{font-size:clamp(1.0625rem,1.7vw,1.2rem);color:var(--ar-soft);max-width:var(--ar-maxtext)}
.ar-prose{max-width:var(--ar-maxtext);color:var(--ar-soft)}
.ar-prose strong{color:var(--ar-paper);font-weight:700}
.ar-dim{color:var(--ar-dim)}
.ar-led{width:7px;height:7px;border-radius:50%;background:var(--ar-om3);
  box-shadow:0 0 0 3px rgba(56,217,196,.14);flex:none;display:inline-block}

/* ---------- Sprungmarke ---------- */
.ar-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--ar-om4);color:#0B0D0E;padding:.7rem 1.1rem;
  font-family:var(--ar-mono);font-size:.8rem;text-decoration:none;
}
.ar-skip:focus{left:10px;top:10px}

/* ---------- Mobile Kopfleiste ---------- */
.ar-topbar{
  background:rgba(14,17,19,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ar-line);z-index:1035;
}
.ar-topbar .navbar-brand{font-family:var(--ar-mono);font-size:.85rem;letter-spacing:.03em}
.ar-topbar .navbar-brand span{color:var(--ar-om4)}
.ar-topbar .navbar-toggler{border-color:var(--ar-line-2);padding:.35rem .55rem}
.ar-topbar .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(56,217,196,.35)}

/* ---------- Seitenschiene ---------- */
.ar-rail{
  background:var(--ar-bg-2);
  border-right:1px solid var(--ar-line);
  --bs-offcanvas-bg:var(--ar-bg-2);
  --bs-offcanvas-width:300px;
  --bs-offcanvas-border-color:var(--ar-line);
}
@media(min-width:992px){
  .ar-rail{
    position:fixed;top:0;left:0;bottom:0;width:var(--ar-rail);
    overflow-y:auto;overscroll-behavior:contain;z-index:1030;
  }
  .ar-shell{padding-left:var(--ar-rail)}
}
/* Bootstrap setzt oberhalb des Umbruchpunkts .offcanvas-lg .offcanvas-body
   auf padding:0 und den Hintergrund auf transparent!important. Beides muss
   hier mit gleicher oder hoeherer Spezifitaet zurueckgeholt werden, sonst
   klebt der Inhalt der Schiene am Fensterrand. */
.ar-rail.ar-rail{background:var(--ar-bg-2)!important}
.ar-rail .ar-railbody,
.offcanvas-lg.ar-rail .offcanvas-body{padding:2.25rem 1.9rem 2.25rem}

.ar-portrait{
  position:relative;width:118px;height:118px;border-radius:4px;overflow:hidden;
  border:1px solid var(--ar-line-2);background:var(--ar-panel-2);margin-bottom:1.35rem;
}
.ar-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.ar-who{
  font-family:var(--ar-display);font-weight:700;
  font-size:2rem;line-height:.95;letter-spacing:-.02em;margin-bottom:.7rem;
}
.ar-who span{display:block;color:var(--ar-om4)}
.ar-job{font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-soft);line-height:1.7;margin-bottom:1.4rem}
.ar-job em{color:var(--ar-dim);font-style:normal;display:block}

.ar-facts{list-style:none;padding:1.35rem 0 0;margin:0 0 1.5rem;border-top:1px solid var(--ar-line);display:grid;gap:.75rem}
.ar-facts .k{display:block;font-family:var(--ar-mono);font-size:.625rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ar-dim)}
.ar-facts .v{font-size:.9rem;color:var(--ar-soft);word-break:break-word}
.ar-facts a{color:var(--ar-soft);text-decoration:none;border-bottom:1px solid var(--ar-line-2)}
.ar-facts a:hover{color:var(--ar-om3);border-bottom-color:var(--ar-om3)}

.ar-nav{padding-top:1.35rem;border-top:1px solid var(--ar-line);margin-bottom:1.5rem}
.ar-nav .nav-link{
  display:flex;align-items:center;gap:.75rem;padding:.5rem 0;
  font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-dim);
}
.ar-nav .nav-link::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  border:1px solid var(--ar-line-2);transition:background .2s,border-color .2s,box-shadow .2s;
}
.ar-nav .nav-link:hover{color:var(--ar-paper)}
.ar-nav .nav-link.active{color:var(--ar-paper);background:none}
.ar-nav .nav-link.active::before{background:var(--ar-om3);border-color:var(--ar-om3);box-shadow:0 0 8px rgba(56,217,196,.6)}

.ar-railcta{padding-top:1.35rem;border-top:1px solid var(--ar-line);display:grid;gap:.55rem}

/* ---------- Schaltflächen ---------- */
.btn-ar{
  --bs-btn-font-family:var(--ar-mono);
  --bs-btn-font-size:.78rem;
  --bs-btn-padding-y:.7rem;
  --bs-btn-padding-x:1.1rem;
  --bs-btn-border-radius:2px;
  --bs-btn-color:var(--ar-paper);
  --bs-btn-border-color:var(--ar-line-2);
  --bs-btn-bg:transparent;
  --bs-btn-hover-color:var(--ar-om3);
  --bs-btn-hover-border-color:var(--ar-om3);
  --bs-btn-hover-bg:transparent;
  --bs-btn-active-color:var(--ar-om3);
  --bs-btn-active-bg:transparent;
  --bs-btn-active-border-color:var(--ar-om3);
}
.btn-ar-primary{
  --bs-btn-font-family:var(--ar-mono);
  --bs-btn-font-size:.78rem;
  --bs-btn-font-weight:400;
  --bs-btn-padding-y:.7rem;
  --bs-btn-padding-x:1.1rem;
  --bs-btn-border-radius:2px;
  --bs-btn-color:#151210;
  --bs-btn-bg:var(--ar-sm);
  --bs-btn-border-color:var(--ar-sm);
  --bs-btn-hover-color:#151210;
  --bs-btn-hover-bg:#ffd451;
  --bs-btn-hover-border-color:#ffd451;
  --bs-btn-active-color:#151210;
  --bs-btn-active-bg:#ffd451;
  --bs-btn-active-border-color:#ffd451;
}

/* ---------- Abschnitte ---------- */
.ar-section{padding:clamp(3.5rem,8vw,6.75rem) 0;border-top:1px solid var(--ar-line)}
.ar-hero{padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5.25rem);position:relative;overflow:hidden}
.ar-hero::before{
  content:"";position:absolute;left:-12%;top:-45%;width:72%;height:135%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(155,107,255,.2),transparent 72%);
}
.ar-hero > .container-xl{position:relative}
.ar-kicker{
  font-family:var(--ar-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ar-dim);display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.ar-claim{
  font-family:var(--ar-display);font-weight:700;
  font-size:clamp(2.4rem,6.4vw,4.7rem);line-height:.98;letter-spacing:-.02em;
  margin-bottom:1.6rem;max-width:15ch;
}
.ar-claim em{font-style:normal;color:var(--ar-om4)}
.ar-chip{
  font-family:var(--ar-mono);font-size:.72rem;color:var(--ar-dim);
  border:1px solid var(--ar-line);background:var(--ar-panel);
  padding:.35rem .7rem;border-radius:2px;display:inline-block;
}

/* ---------- Kompetenzen ---------- */
.ar-area{
  background:var(--ar-bg);border:1px solid var(--ar-line);
  padding:1.6rem;height:100%;border-radius:3px;
}
.ar-area p{font-size:.94rem;color:var(--ar-dim);margin-bottom:1rem}
.ar-meter{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.ar-bars{display:flex;gap:4px}
.ar-bars i{width:26px;height:5px;border-radius:1px;background:var(--ar-line-2);display:block}
.ar-bars i.on{background:var(--ar-om3)}
.ar-bars i.on.core{background:var(--ar-om4)}
.ar-lvl{font-family:var(--ar-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-dim)}
.ar-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ar-tags li{
  font-family:var(--ar-mono);font-size:.72rem;color:var(--ar-dim);
  background:var(--ar-panel);border:1px solid var(--ar-line);padding:.25rem .55rem;border-radius:2px;
}

/* ---------- Werdegang ---------- */
.ar-tl{border-top:1px solid var(--ar-line)}
.ar-entry{padding:1.75rem 0;border-bottom:1px solid var(--ar-line)}
.ar-when{font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-dim);padding-top:.3rem}
.ar-entry.now .ar-when{color:var(--ar-om3)}
.ar-org{font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-dim);margin-bottom:.85rem}
.ar-say{color:var(--ar-soft);max-width:var(--ar-maxtext);margin-bottom:.85rem;font-size:1rem}
.ar-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;max-width:var(--ar-maxtext)}
.ar-list li{position:relative;padding-left:1.2rem;color:var(--ar-soft);font-size:.97rem;line-height:1.55}
.ar-list li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--ar-om4)}
.ar-badge{
  display:inline-block;font-family:var(--ar-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ar-om3);border:1px solid rgba(56,217,196,.35);padding:.1rem .5rem;border-radius:2px;
  margin-left:.6rem;vertical-align:.2rem;
}
.ar-entry.edu .ar-h3{font-family:var(--ar-body);font-weight:400;font-size:1.0625rem;letter-spacing:0}

/* ---------- Topologie ---------- */
.ar-mapshell{border:1px solid var(--ar-line);background:var(--ar-panel);border-radius:3px}
/* kein overflow:hidden — das wuerde das mitlaufende Detailfeld unten festnageln */
.ar-maphead{
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem;border-bottom:1px solid var(--ar-line);
  font-family:var(--ar-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ar-dim);
}
/* Eigener Scrollbereich fuer die Grafik. Sie ist hoeher als ein Bildschirm;
   ohne diese Begrenzung stuende die Erklaerung darunter ausserhalb des
   Sichtfelds, sobald man einen Knoten oben auswaehlt. Ein angeheftetes Feld
   waere die schlechtere Loesung — es verdeckt die unteren Knoten. */
.ar-mapscroll{overflow:auto;padding:.6rem;max-height:min(68vh,720px);overscroll-behavior:contain}
.ar-mapscroll svg{display:block;min-width:760px;width:100%;height:auto}
.ar-node rect{fill:var(--ar-panel-2);stroke:var(--ar-line-2);stroke-width:1;transition:stroke .18s,fill .18s}
.ar-node .t{fill:var(--ar-paper);font-family:var(--ar-body);font-size:13px;font-weight:400}
.ar-node .s{fill:var(--ar-dim);font-family:var(--ar-mono);font-size:9px;letter-spacing:.12em}
.ar-node{cursor:pointer;outline:none}
.ar-node:hover rect,.ar-node[aria-current="true"] rect{stroke:var(--ar-om4);fill:#252A34}
.ar-node:focus-visible rect{stroke:var(--ar-om3);stroke-width:2}
.ar-link{fill:none;stroke:var(--ar-line-2);stroke-width:1.4}
.ar-link.dns{stroke:rgba(155,107,255,.6);stroke-dasharray:5 5}
.ar-link.acme{stroke:rgba(56,217,196,.55);stroke-dasharray:3 4}
/* Kopie ausser Haus und Waechter-Ring: eigene Farben, damit die drei
   Wege nach draussen im Bild unterscheidbar bleiben. */
.ar-link.kopie{stroke:rgba(233,196,106,.55);stroke-dasharray:6 4}
.ar-link.waechter{stroke:rgba(240,113,120,.55);stroke-dasharray:2 4}
.ar-flow{fill:none;stroke:var(--ar-om3);stroke-width:1.6;stroke-dasharray:5 160;animation:ar-flow 4.5s linear infinite}
@keyframes ar-flow{to{stroke-dashoffset:-330}}
.ar-hull{fill:rgba(233,235,234,.022);stroke:var(--ar-line-2);stroke-dasharray:3 4}
.ar-zone{fill:rgba(233,235,234,.03);stroke:var(--ar-line);stroke-dasharray:2 4}
.ar-hulllabel{fill:var(--ar-dim);font-family:var(--ar-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.ar-zonelabel{fill:var(--ar-om4);font-family:var(--ar-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.ar-linklabel{fill:var(--ar-dim);font-family:var(--ar-mono);font-size:9.5px;letter-spacing:.06em}
/* Feste Hoehe. Ohne sie springt das Feld je nach Textlaenge zwischen 119
   und 169 Pixeln, alles darunter verschiebt sich, und der Knoten rutscht
   unter dem Mauszeiger weg — Hovern funktioniert dann nur zufaellig. */
/* Feste Hoehe und am unteren Rand angeheftet.
   Ohne feste Hoehe springt das Feld je nach Textlaenge, alles darunter
   verschiebt sich, und der Knoten rutscht unter dem Mauszeiger weg.
   Ohne sticky steht die Erklaerung ganz unten in einer Grafik, die hoeher
   ist als der Bildschirm — wer oben einen Knoten waehlt, sieht sie nicht. */
.ar-mapdetail{
  border-top:1px solid var(--ar-line);padding:1.25rem 1.4rem;
  min-height:12.5rem;background:var(--ar-bg);
}
@media(max-width:860px){.ar-mapdetail{min-height:15rem}}
.ar-mapdetail .kv{font-family:var(--ar-mono);font-size:.65rem;color:var(--ar-om3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem}
.ar-mapdetail p{margin:0;color:var(--ar-dim);font-size:.94rem;max-width:74ch}

.ar-svc{background:var(--ar-bg);border:1px solid var(--ar-line);border-radius:3px;padding:1.25rem 1.35rem;height:100%}
.ar-svc .n{font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-paper);margin-bottom:.3rem}
.ar-svc .d{font-size:.9rem;color:var(--ar-dim);margin:0;line-height:1.5}

/* ---------- Kontakt ---------- */
.ar-mail{
  font-family:var(--ar-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.6rem,5vw,3.3rem);text-decoration:none;display:inline-block;word-break:break-word;
  color:var(--ar-paper);border-bottom:2px solid rgba(155,107,255,.42);padding-bottom:.25rem;
  transition:color .2s,border-color .2s;
}
.ar-mail:hover{color:var(--ar-om4);border-bottom-color:var(--ar-om4)}
.ar-meta dt{font-family:var(--ar-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ar-dim);margin-bottom:.55rem}
.ar-meta dd{margin:0;font-size:.97rem;color:var(--ar-soft)}
.ar-meta dd span{display:block;margin-bottom:.3rem}

/* ---------- Fließtextseiten ---------- */
.ar-doc h1{font-family:var(--ar-display);font-weight:700;font-size:clamp(2rem,5vw,3.35rem);letter-spacing:-.015em;line-height:1.02;margin-bottom:.8rem}
.ar-doc h2{font-family:var(--ar-display);font-weight:700;font-size:1.375rem;letter-spacing:-.005em;margin:2.75rem 0 .75rem}
.ar-doc h3{font-family:var(--ar-body);font-weight:700;font-size:1.0625rem;margin:1.6rem 0 .5rem}
.ar-doc p,.ar-doc li{color:var(--ar-soft);max-width:var(--ar-maxtext);font-size:1rem}
.ar-doc address{font-style:normal;font-family:var(--ar-mono);font-size:.9rem;color:var(--ar-soft);line-height:1.9;margin-bottom:1rem}
.ar-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-dim);text-decoration:none;margin-bottom:1.9rem}
.ar-back:hover{color:var(--ar-om3)}
.ar-note{border-left:2px solid var(--ar-om4);background:var(--ar-panel);padding:1rem 1.25rem;margin:1.6rem 0;max-width:var(--ar-maxtext)}
.ar-note p{margin:0;font-size:.94rem;color:var(--ar-dim)}

/* ---------- Fuß ---------- */
.ar-footer{border-top:1px solid var(--ar-line);padding:2.4rem 0 3.4rem}
.ar-footer p{font-family:var(--ar-mono);font-size:.72rem;color:var(--ar-dim);margin-bottom:.5rem;line-height:1.8}
.ar-footer a{color:var(--ar-dim)}
.ar-footer a:hover{color:var(--ar-om3)}
/* ---------- Bewegung ---------- */
.ar-rise{opacity:0;transform:translateY(15px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.ar-rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ar-rise{opacity:1;transform:none;transition:none}
  .ar-flow{animation:none;stroke-dasharray:none;opacity:.4}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Kontaktformular ---------- */
.ar-form{max-width:38rem}
.ar-form .form-label{
  font-family:var(--ar-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ar-dim);margin-bottom:.4rem;
}
.ar-form .form-control{
  background:var(--ar-panel);border:1px solid var(--ar-line-2);border-radius:2px;
  color:var(--ar-paper);font-size:.97rem;padding:.7rem .85rem;
}
.ar-form .form-control:focus{
  background:var(--ar-panel);border-color:var(--ar-om3);color:var(--ar-paper);
  box-shadow:0 0 0 .2rem rgba(56,217,196,.18);
}
.ar-form .form-control::placeholder{color:#5F686D}
.ar-form .form-text{font-size:.8rem;color:var(--ar-dim)}
.ar-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ar-alert{
  border-radius:2px;border:1px solid var(--ar-line-2);background:var(--ar-panel);
  padding:1rem 1.15rem;margin-bottom:1.5rem;max-width:38rem;
}
.ar-alert .t{font-family:var(--ar-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem}
.ar-alert p{margin:0;font-size:.94rem;color:var(--ar-soft)}
.ar-alert.ok{border-left:2px solid var(--ar-om3)}
.ar-alert.ok .t{color:var(--ar-om3)}
.ar-alert.bad{border-left:2px solid var(--ar-sm)}
.ar-alert.bad .t{color:var(--ar-sm)}

/* ---------- Lebenslauf-Seite ---------- */
.ar-cv dl{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.4rem 1.5rem;margin:0 0 1.25rem;max-width:44rem}
@media(max-width:576px){.ar-cv dl{grid-template-columns:1fr;gap:.1rem}}
.ar-cv dt{font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-dim);padding-top:.15rem}
.ar-cv dd{margin:0;color:var(--ar-soft);font-size:1rem}
.ar-cv dd strong{color:var(--ar-paper);font-weight:700}
@media(max-width:576px){.ar-cv dd{margin-bottom:.8rem}}
.ar-cvphoto{
  width:150px;height:150px;border-radius:3px;overflow:hidden;
  border:1px solid var(--ar-line-2);flex:none;
}
.ar-cvphoto img{width:100%;height:100%;object-fit:cover;display:block}
.ar-cv h2{margin-top:2.5rem}
.ar-sig{font-family:var(--ar-mono);font-size:.8rem;color:var(--ar-dim);margin-top:2.5rem}

/* ---------- Druck ---------- */
@media print{
  .ar-rail,.ar-topbar,.ar-back,.ar-footer,.ar-form,.ar-railcta,.ar-skip{display:none!important}
  .ar-shell{padding-left:0!important}
  body{background:#fff!important;color:#111!important}
  .ar-doc p,.ar-doc li,.ar-cv dd{color:#222!important}
  .ar-cv dt,.ar-org,.ar-when{color:#555!important}
  a{color:#111!important;text-decoration:none}
}

/* Zwischenüberschrift innerhalb eines Werdegang-Eintrags */
.ar-sub{
  font-family:var(--ar-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ar-om4);margin:1.4rem 0 .6rem;
}
.ar-sub:first-of-type{margin-top:1rem}

/* Profillinks in der Seitenschiene */
.ar-profile{display:flex;flex-wrap:wrap;gap:.35rem .75rem}
.ar-profile a{
  font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-soft);
  text-decoration:none;border-bottom:1px solid var(--ar-line-2);
}
.ar-profile a:hover{color:var(--ar-om3);border-bottom-color:var(--ar-om3)}

/* Sprungziele: Abstand zur mobilen Kopfleiste, damit die Ueberschrift
   nach einem Sprung nicht darunter verschwindet */
section[id], main[id], [id="top"]{scroll-margin-top:72px}
@media(min-width:992px){
  section[id], main[id], [id="top"]{scroll-margin-top:24px}
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]:focus, main[id]:focus{outline:none}

/* ---------- Formular: Rueckmeldung waehrend des Absendens ---------- */
.ar-feldfehler{
  font-family:var(--ar-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--ar-sm);margin-top:.4rem;
}
.ar-form .form-control.ist-falsch{border-color:var(--ar-sm)}
.ar-form .form-control.ist-falsch:focus{box-shadow:0 0 0 .2rem rgba(242,194,48,.18)}

.ar-schutz{
  font-family:var(--ar-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ar-dim);
}
.ar-schutz.bereit{color:var(--ar-om3)}

.ar-spinner{
  width:13px;height:13px;border-radius:50%;display:inline-block;
  border:2px solid rgba(21,18,16,.28);border-top-color:#151210;
  animation:ar-dreh .7s linear infinite;margin-right:.1rem;
}
@keyframes ar-dreh{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.65;cursor:progress}

#zeichenzaehler.ist-knapp{color:var(--ar-sm)}
@media(prefers-reduced-motion:reduce){.ar-spinner{animation:none}}

/* ---------- Breite Bildschirme -------------------------------------
   Bootstraps container-xl geht bis 1320px. Zusammen mit einer Textspalte
   von 74ch entsteht daneben eine grosse Leere, die unbeabsichtigt wirkt.
   Eine schmalere, mittige Spalte ist ruhiger. */
.ar-section > .container-xl,
.ar-hero > .container-xl,
.ar-doc > .container-xl,
.ar-footer > .container-xl{max-width:var(--ar-inhalt)}

/* Auf Fliesstextseiten duerfen die Linien der Zwischenueberschriften nicht
   weit ueber den Text hinauslaufen. */
.ar-doc h1,
.ar-doc h2{max-width:var(--ar-maxtext)}
.ar-cv dl{max-width:var(--ar-maxtext)}

/* Zeitspalte im Werdegang enger: sonst klafft zwischen Datum und Titel
   eine Luecke von mehreren hundert Pixeln. */
@media(min-width:992px){
  .ar-entry > .row > .col-lg-3{flex:0 0 auto;width:11.5rem}
  .ar-entry > .row > .col-lg-9{flex:1 1 auto;width:auto;max-width:calc(100% - 11.5rem)}
}

/* Platzhalter fuer geschuetzte Mailadressen: sieht aus wie ein Verweis,
   auch bevor JavaScript daraus einen macht. */
.ar-mailto{cursor:text;-webkit-user-select:all;user-select:all}
.ar-facts .ar-mailto{color:var(--ar-soft);border-bottom:1px solid var(--ar-line-2)}
.ar-doc .ar-mailto{color:var(--ar-om3)}

/* ---------- Topologie: Netzkaesten und Maschinen ---------- */
.ar-netz rect{fill:rgba(233,235,234,.03)}
.ar-netz:hover > rect:first-of-type,
.ar-netz[aria-current="true"] > rect:first-of-type{stroke:var(--ar-om4);fill:#20242c}
.ar-bridge{fill:var(--ar-om4);font-family:var(--ar-mono);font-size:12.5px;letter-spacing:.04em}
.ar-zweck{fill:#6E767C;font-family:var(--ar-mono);font-size:9px;letter-spacing:.2em}
.ar-chip-r{fill:var(--ar-panel-2);stroke:var(--ar-line-2);stroke-width:1}
.ar-chip-t{fill:var(--ar-soft);font-family:var(--ar-mono);font-size:10.5px}
.ar-leer{fill:var(--ar-dim);font-family:var(--ar-mono);font-size:10px;font-style:italic}

/* ---------- Netzliste unter der Topologie ----------
   Aufbau als Bootstrap-Tabelle: Sollte diese Datei einmal veraltet
   ausgeliefert werden, bleibt die Liste trotzdem als Tabelle lesbar,
   statt zu einer Zeichenwurst zusammenzulaufen. */
.ar-netztabelle{--bs-table-bg:transparent;--bs-table-color:var(--ar-dim);margin-bottom:0}
.ar-netztabelle th{
  font-family:var(--ar-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ar-dim);font-weight:400;border-bottom-color:var(--ar-line-2);
}
.ar-netztabelle td{border-bottom-color:var(--ar-line);font-size:.9rem;vertical-align:top;padding:.65rem .8rem}
.ar-netztabelle .bridge{font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-om4);white-space:nowrap}
.ar-netztabelle .zweck{font-family:var(--ar-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ar-netztabelle .maschinen{font-family:var(--ar-mono);font-size:.78rem;color:var(--ar-soft)}
.ar-netztabelle tr:first-child .zweck{color:var(--ar-om3)}

/* ---------- Aus Markdown erzeugte Seiten ---------- */
/* Stationen auf den Unterseiten: dieselbe Anmutung wie auf der Startseite —
   Trennlinie, Abstand, laufende Station in Aqua mit Kennzeichen. */
.ar-station{
  padding:1.5rem 0 0;margin:0 0 1.25rem;border-top:1px solid var(--ar-line);
}
.ar-station:first-of-type{border-top:0;padding-top:0}
.ar-station.ist-aktuell .ar-when{color:var(--ar-om3)}
/* Die Liste hinter einer Station gehoert optisch dazu */
.ar-cv .ar-station + ul{margin-bottom:1.9rem}
.ar-station .ar-when{font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-dim);margin-bottom:.25rem;padding-top:0}
.ar-station .ar-h3{font-family:var(--ar-display);font-weight:700;font-size:1.2rem;letter-spacing:-.005em;margin-bottom:.15rem}
.ar-station .ar-org{margin-bottom:0}
.ar-cv .ar-sub{margin-top:1.8rem}
.ar-tabelle{width:100%;max-width:var(--ar-maxtext);border-collapse:collapse;margin-bottom:1.5rem}
.ar-tabelle td{padding:.45rem .9rem .45rem 0;vertical-align:top;color:var(--ar-soft);font-size:.97rem;
  border-bottom:1px solid var(--ar-line)}
.ar-tabelle tr td:first-child{width:11rem;font-family:var(--ar-mono);font-size:.75rem;color:var(--ar-dim)}
.ar-tabelle thead{display:none}
.ar-cv h2{margin-top:2.8rem}
.ar-cv h2:first-of-type{margin-top:0}
@media(max-width:576px){
  .ar-tabelle tr td:first-child{width:auto;display:block;border:0;padding-bottom:0}
  .ar-tabelle td{display:block;border-bottom:0}
  .ar-tabelle tr{display:block;border-bottom:1px solid var(--ar-line);padding:.5rem 0}
}

/* ---------- Detailfeld laeuft mit ----------------------------------
   Die Topologie ist ueber 1100 Pixel hoch. Ein Detailfeld am Fuss der
   Grafik waere beim Zeigen auf einen Knoten weit oben nicht mehr im Bild.
   Deshalb klebt es am unteren Rand des Fensters, solange die Grafik
   sichtbar ist. Ein Tooltip am Mauszeiger waere die naheliegende
   Alternative, scheidet aber aus: auf Tastatur und Touch gibt es kein
   Hovern, und der Text ist mit drei Zeilen zu lang fuer eine Sprechblase. */
.ar-mapdetail{
  position:sticky;bottom:0;z-index:3;
  background:var(--ar-bg-2);
  border-top:1px solid var(--ar-line-2);
  box-shadow:0 -12px 24px -12px rgba(0,0,0,.7);
}
.ar-maphead{position:sticky;top:0;z-index:3;background:var(--ar-panel)}

/* Ueberschrift ueber der Textfassung, damit sie nicht orientierungslos
   unter der Grafik haengt */
.ar-netzkopfzeile{
  font-family:var(--ar-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ar-dim);margin:2rem 0 .7rem;
  display:flex;align-items:center;gap:.7rem;
}
.ar-netzkopfzeile::before{content:"";width:22px;height:1px;background:var(--ar-om4)}

/* ---------- Stationen: Rhythmus ----------
   Ohne diesen Abstand klebt die Aufzaehlung einer Station am Zeitraum der
   naechsten — beide Seiten wirkten dadurch unterschiedlich gesetzt. */
/* Die Trennlinie sitzt an der Gruppe, nicht an der Station.
   Seit jede Station in einer eigenen .gruppe steckt, ist sie dort immer
   :first-of-type — die Ausnahmeregel hat damit auf alle zugetroffen und
   saemtliche Trennlinien verschluckt. */
.ar-cv .gruppe{margin-top:1.2rem}
.ar-cv .gruppe + .gruppe{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--ar-line)}
.ar-cv .ar-station{margin-top:0;margin-bottom:.9rem;padding-top:0;border-top:0}
.ar-cv .ar-station.laeuft .ar-when{color:var(--ar-om3)}
.ar-cv ul.ar-list{margin-bottom:1.2rem}
.ar-cv > p{max-width:var(--ar-maxtext)}

/* ---------- Kontakt: Formular links, Angaben rechts ---------- */
.ar-form{max-width:none}
.ar-nebenspalte{display:grid;gap:1.6rem;margin:0}
.ar-nebenspalte > div{padding-bottom:1.6rem;border-bottom:1px solid var(--ar-line)}
.ar-nebenspalte > div:last-child{border-bottom:0;padding-bottom:0}
.ar-mail-klein{
  font-family:var(--ar-mono);font-size:.95rem;color:var(--ar-soft);
  -webkit-user-select:all;user-select:all;
}
.ar-nebenspalte a{color:var(--ar-om3);text-decoration:none;border-bottom:1px solid rgba(56,217,196,.35)}
.ar-nebenspalte a:hover{border-bottom-color:var(--ar-om3)}
@media(min-width:992px){
  .ar-nebenspalte{padding-left:2.5rem;border-left:1px solid var(--ar-line)}
}

/* ---------- Werkzeugkasten unter den Schwerpunkten ---------- */
.ar-weiteres{display:grid;gap:0;margin:0;border:1px solid var(--ar-line);border-radius:3px}
.ar-weiteres > div{
  display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.2rem;
  padding:.9rem 1.2rem;border-top:1px solid var(--ar-line);align-items:baseline;
}
.ar-weiteres > div:first-child{border-top:0}
.ar-weiteres dt{
  font-family:var(--ar-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ar-om4);margin:0;
}
.ar-weiteres dd{margin:0;font-size:.92rem;color:var(--ar-dim)}
@media(max-width:768px){
  .ar-weiteres > div{grid-template-columns:1fr;gap:.35rem}
}

/* ---------- Fliesstextseiten: Spalte auf Textbreite ----------
   Die Inhaltsspalte war 1180px breit, der Text darin aber nur rund 700.
   Alles klebte dadurch am linken Rand der Spalte, rechts daneben stand
   Leere — es sah aus, als waere die Seite linksbuendig statt mittig.
   Auf Fliesstextseiten ist die Spalte deshalb so breit wie ihr Inhalt. */
@media(min-width:992px){
  .ar-doc > .container-xl{max-width:58rem}
}
/* Ueberschriften und Tabellen laufen dann bis zum Spaltenrand */
.ar-doc h1, .ar-doc h2, .ar-cv dl, .ar-tabelle{max-width:none}
.ar-doc p, .ar-doc li, .ar-cv > p{max-width:var(--ar-maxtext)}

/* ---------- Startseite: Label in die linke Spalte ----------
   Der Fliesstext ist auf gut 700px begrenzt, die Spalte war 1180 breit —
   rechts blieb Leere, die Seite wirkte nach links gerutscht. Die kleinen
   Abschnittslabels haengen jetzt in einer eigenen Spalte davor. Damit
   beginnt der Inhalt weiter rechts, die Flaeche ist genutzt, und die
   Ueberschriften stehen alle auf einer Kante. */
@media(min-width:1200px){
  .ar-section > .container-xl,
  .ar-hero > .container-xl{
    display:grid;grid-template-columns:11rem minmax(0,1fr);
    column-gap:3rem;align-items:start;
  }
  .ar-section > .container-xl > .ar-eyebrow,
  .ar-hero > .container-xl > .ar-kicker{grid-column:1;margin-top:.6rem}
  .ar-section > .container-xl > *:not(.ar-eyebrow),
  .ar-hero > .container-xl > *:not(.ar-kicker){grid-column:2}
  /* Ein Abschnittslabel und der Block daneben stehen in derselben Rasterzeile.
     Ein Abstand nach oben am Label allein verschiebt nur das Label — der
     Block daneben klebt weiter am Vorherigen. Deshalb bekommt der direkte
     Nachbar denselben Abstand. */
  .ar-section > .container-xl > .ar-eyebrow.mt-5,
  .ar-hero > .container-xl > .ar-eyebrow.mt-5{margin-top:3rem!important}
  .ar-section > .container-xl > .ar-eyebrow.mt-5 + *{margin-top:3rem}
  .ar-eyebrow::before{display:none}
  .ar-eyebrow{border-top:1px solid var(--ar-om4);padding-top:.7rem;display:block}
}

/* Nebenspalte braucht links Luft, seit die Bootstrap-Rinne entfaellt */
@media(min-width:992px){
  .ar-nebenspalte{margin-left:3rem}
}
/* Die Topologie ragt auf schmalen Anzeigen ueber den Rand hinaus, weil die
   SVG eine Mindestbreite hat. Der Behaelter muss sie deshalb beschneiden. */
.ar-mapshell{max-width:100%;overflow:hidden}