/* ==========================================================
   NEMESIS IT Service – gemeinsame Gestaltung
   Enthält nur, was auf ALLEN Seiten wortgleich gilt.
   Seitenspezifisches steht weiterhin in der jeweiligen Datei.
   ========================================================== */

:root{
  --ink: #070708;
  --panel: #131216;
  --panel-2: #1a191f;
  --line: #29272e;
  --bone: #ece8e3;
  --ash: #9a939a;
  --ash-dim: #8a848f;
  --blood: #a8121b;
  --ember: #e2402f;
  --glow: rgba(200, 25, 30, 0.18);
  --focus: #e2402f;
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 2.75rem;
  --sp-5: 4.5rem;
  --sp-6: 7rem;
  --rail-w: 17rem;
  --f-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --term: #4be08a;
  --warn: #e8b339;
  --cyan: #33e0ff;
}

*{ box-sizing:border-box; }

html{ color-scheme: dark; scroll-behavior:smooth; }

img,svg{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

::selection{ background:var(--blood); color:var(--bone); }

:focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

.logo-img{ mix-blend-mode:screen; }

.eyebrow{
    font-family:var(--f-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ash);
  }

h1,h2,h3{
    font-family:var(--f-display);
    font-weight:700;
    margin:0;
    text-wrap:balance;
    color:var(--bone);
  }

.mark{
    color:var(--ember);
    font-style:italic;
    position:relative;
    display:inline-block;
    text-shadow:0 0 6px rgba(226,64,47,0.45);
    animation:markFlicker 3.2s infinite steps(1);
  }

@keyframes markFlicker{
    0%,19%,21%,23%,55%,57%,100%{ opacity:1; text-shadow:0 0 6px rgba(226,64,47,0.45); }
    20%{ opacity:0.35; text-shadow:none; }
    22%{ opacity:0.9; }
    56%{ opacity:0.2; text-shadow:0 0 12px rgba(226,64,47,0.9); }
    70%{ opacity:1; }
    72%{ opacity:0.55; }
    73%{ opacity:1; }
  }

p{ margin:0; }

.btn--primary:hover{
    background:linear-gradient(160deg, var(--ember) 0%, #c4161f 100%);
    transform:translateY(-1px);
    box-shadow: 0 6px 24px var(--glow);
  }

.btn--ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--bone);
  }

.btn--ghost:hover{ border-color:var(--ash-dim); transform:translateY(-1px); }

.layout{
    display:grid;
    grid-template-columns: var(--rail-w) 1fr;
    align-items:start;
  }

.rail{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
    border-right:1px solid var(--line);
    background:
      radial-gradient(28rem 18rem at 0% 0%, rgba(200,25,30,0.06), transparent 70%),
      var(--ink);
  }

.rail__logo{
    width: 11rem;
    margin: -0.75rem 0 0 -0.75rem;
  }

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

.rail__index a:hover{ color:var(--ash); }

.rail__index a.is-active{
    color:var(--bone);
    border-color:var(--bone);
  }

.rail__index a .num{ color:var(--ash-dim); }

.rail__index a.is-active .num{ color:var(--ember); }

.rail__foot{ display:flex; flex-direction:column; gap:var(--sp-2); }

.rail__foot .btn{ justify-content:center; width:100%; }

.rail__contact{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    font-family:var(--f-mono);
    font-size:0.7rem;
    letter-spacing:0.04em;
    color:var(--ash-dim);
  }

.rail__contact a{ color:var(--ash); text-decoration:none; }

.rail__contact a:hover{ color:var(--ember); }

.rail__meta{
    font-family:var(--f-mono);
    font-size:0.65rem;
    letter-spacing:0.08em;
    color:var(--ash-dim);
  }

.topbar{ display:none; }

main{ min-width:0; }

.cover__meta{
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    margin-bottom:var(--sp-4);
    flex-wrap:wrap;
  }

.cover__meta .dot{ color:var(--ash-dim); }

.cover__actions{
    margin-top:var(--sp-4);
    display:flex;
    gap:var(--sp-2);
    flex-wrap:wrap;
  }

.entry.is-visible{ opacity:1; transform:translateY(0); }

.entry__head{
    display:flex;
    align-items:baseline;
    gap:var(--sp-2);
    margin-bottom:var(--sp-3);
  }

.entry__head .rule{
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg, var(--line), transparent);
  }

.note .tag{
    display:block;
    font-family:var(--f-mono);
    font-size:0.65rem;
    letter-spacing:0.12em;
    color:var(--ash-dim);
    margin-bottom:0.3rem;
  }

.faq details{
    border:1px solid var(--line); border-radius:8px;
    background:var(--panel); overflow:hidden; transition:border-color .2s ease;
  }

.faq details:hover{ border-color:var(--ash-dim); }

.faq details[open]{ border-color:rgba(226,64,47,0.35); }

.faq summary{
    cursor:pointer; list-style:none; padding:0.95rem 1.1rem;
    font-weight:600; display:flex; align-items:center; gap:0.75rem;
  }

.faq summary::-webkit-details-marker{ display:none; }

.faq .faq__body{
    padding:0 1.1rem 1.1rem 2.85rem; color:var(--ash); font-size:0.95rem;
    animation:faqOpen .3s ease;
  }

@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.contact-channels{ display:flex; flex-direction:column; gap:var(--sp-3); }

.contact-channels a:hover{ border-color:var(--ember); color:var(--ember); }

.contact-channels .label,
  .contact-address .label{
    display:block;
    font-family:var(--f-mono);
    font-size:0.65rem;
    letter-spacing:0.12em;
    color:var(--ash-dim);
    margin-bottom:0.2rem;
  }

.contact-address{ font-size:1.05rem; }

.contact-address address{ font-style:normal; line-height:1.5; }

footer{
    padding: var(--sp-4) var(--sp-6) var(--sp-5);
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
  }

.footer__top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--sp-3);
    flex-wrap:wrap;
  }

.footer__brand{ display:flex; align-items:center; gap:0.7rem; }

.footer__brand .brand-name{ font-family:var(--f-display); font-weight:700; }

.footer__tagline{ font-size:0.85rem; color:var(--ash-dim); margin-top:0.3rem; }

.footer__links{ display:flex; gap:var(--sp-3); list-style:none; margin:0; padding:0; flex-wrap:wrap; }

.footer__links a{ font-size:0.85rem; color:var(--ash); text-decoration:none; }

.footer__links a:hover{ color:var(--bone); }

.footer__bottom{
    border-top:1px solid var(--line);
    padding-top:var(--sp-2);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--sp-1);
    font-family:var(--f-mono);
    font-size:0.68rem;
    letter-spacing:0.05em;
    color:var(--ash-dim);
  }

.whatsapp-fab{
    position:fixed;
    right:1.4rem;
    bottom:1.4rem;
    z-index:50;
    display:flex;
    align-items:center;
    gap:0.6rem;
    text-decoration:none;
  }

.whatsapp-fab:hover .whatsapp-fab__label,
  .whatsapp-fab:focus-visible .whatsapp-fab__label{
    opacity:1;
    transform:translateX(0);
  }

.whatsapp-fab:hover .whatsapp-fab__btn{
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 8px 26px rgba(37,211,102,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  }

.whatsapp-fab__btn svg{ width:1.9rem; height:1.9rem; fill:#fff; }

.skip{
    position:absolute; left:0.5rem; top:-4rem; z-index:100;
    background:var(--blood); color:#fff; font-weight:600;
    padding:0.7em 1.2em; border-radius:0 0 4px 4px; text-decoration:none;
    transition:top .18s ease;
  }

.skip:focus{ top:0; }