/* managed-it-services.ch — Service-Katalog
   Palette: paper #F2F1ED · ink #17181A · aubergine #5B2A48 · ochre #B88121 · grey #5A5C60 */

:root{
  --paper:#f2f1ed;
  --card:#ffffff;
  --ink:#17181a;
  --plum:#5b2a48;
  --plum-deep:#3f1c32;
  --ochre:#b88121;
  --grey:#5a5c60;
  --line:#d8d6d0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* ---- Sprachumschaltung ---- */
[lang="en"]{display:none}
body.en [lang="en"]{display:revert}
body.en [lang="de"]{display:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

a{color:var(--ink)}
a.kw{
  text-decoration:underline;
  text-decoration-color:var(--ochre);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color .15s ease;
}
a.kw:hover,a.kw:focus-visible{color:var(--plum)}
a:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* ---- Kopfzeile ---- */
header{background:var(--plum);color:#f6eef3}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:600;letter-spacing:-.01em}
.brand svg{width:30px;height:30px;flex:none}
.brand small{display:block;font-weight:400;font-size:.75rem;color:#d9c2d0;letter-spacing:.01em}
.bar-right{display:flex;align-items:center;gap:18px}
.tel{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.tel:hover{color:var(--ochre)}
.lang-toggle{display:flex;border:1px solid rgba(255,255,255,.5);border-radius:5px;overflow:hidden}
.lang-toggle button{
  font-family:inherit;font-size:.8rem;font-weight:600;padding:6px 11px;
  border:0;background:transparent;color:#f6eef3;cursor:pointer;
}
.lang-toggle button[aria-pressed="true"]{background:#fff;color:var(--plum)}
.lang-toggle button:focus-visible{outline:2px solid var(--ochre);outline-offset:-2px}

/* ---- Katalog-Layout ---- */
.layout{display:grid;grid-template-columns:250px 1fr;gap:48px;padding:44px 0 8px;align-items:start}
.catalogue{position:sticky;top:24px;font-size:.92rem}
.catalogue p.cat-title{
  font-weight:600;font-size:.8rem;color:var(--grey);
  padding-bottom:8px;border-bottom:1.5px solid var(--ink);margin-bottom:12px;
}
.catalogue ol{list-style:none}
.catalogue li{border-bottom:1px solid var(--line)}
.catalogue a{
  display:grid;grid-template-columns:44px 1fr;gap:6px;
  padding:9px 0;text-decoration:none;color:var(--ink);line-height:1.35;
}
.catalogue a span.code{color:var(--grey);font-size:.8rem;font-variant-numeric:tabular-nums}
.catalogue a:hover{color:var(--plum)}
.catalogue a[aria-current="page"]{font-weight:600}
.catalogue a[aria-current="page"] span.code{color:var(--ochre)}
.catalogue .back{display:block;margin-top:16px;font-size:.88rem;color:var(--grey);text-decoration:none}
.catalogue .back:hover{color:var(--plum)}

/* ---- Inhalt ---- */
main .code-line{font-size:.82rem;color:var(--grey);font-variant-numeric:tabular-nums;margin-bottom:10px}
h1{
  font-weight:600;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch;
}
h1.wide{max-width:24ch}
h1 a.kw{text-decoration-thickness:3px;text-underline-offset:6px}
.intro{margin-top:20px;font-size:1.1rem;color:var(--grey);max-width:62ch}
.intro a.kw{color:var(--ink)}
.intro a.kw:hover{color:var(--plum)}

h2{font-weight:600;letter-spacing:-.018em;font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:10px}
h3{font-weight:600;font-size:1.05rem;margin-bottom:6px}
main section{margin-top:48px}
main p{max-width:66ch}
main p + p{margin-top:14px}
main p a.kw{color:var(--ink)}
main p a.kw:hover{color:var(--plum)}
.lede{color:var(--grey);max-width:64ch;margin-bottom:26px}
.lede a.kw{color:var(--ink)}
.lede a.kw:hover{color:var(--plum)}

/* Leistungstabelle */
.scope{border-top:1.5px solid var(--ink);width:100%;border-collapse:collapse;font-size:.95rem}
.scope th{text-align:left;font-weight:600;padding:12px 14px 12px 0;vertical-align:top;width:34%;border-bottom:1px solid var(--line)}
.scope td{padding:12px 0;color:var(--grey);border-bottom:1px solid var(--line);vertical-align:top}
.scope td a.kw{color:var(--ink)}
.scope td a.kw:hover{color:var(--plum)}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cards article{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px}
.cards p{font-size:.94rem;color:var(--grey)}
.cards p a.kw{color:var(--ink)}
.cards p a.kw:hover{color:var(--plum)}

/* Kennzahlen */
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.facts div{flex:1 1 150px;padding:16px 20px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts strong{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.facts span{font-size:.84rem;color:var(--grey)}

/* Buttons */
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.98rem;
  padding:13px 24px;border-radius:7px;border:1.5px solid var(--plum);
  transition:background .15s ease,color .15s ease;
}
.btn-solid{background:var(--plum);color:#fff}
.btn-solid:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn-ghost{color:var(--plum)}
.btn-ghost:hover{background:var(--plum);color:#fff}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq details:first-of-type{border-top:1.5px solid var(--ink)}
.faq summary{font-weight:600;cursor:pointer;font-size:1rem}
.faq summary::marker{color:var(--ochre)}
.faq .answer{padding:11px 0 3px;color:var(--grey);max-width:68ch}
.faq .answer a.kw{color:var(--ink)}
.faq .answer a.kw:hover{color:var(--plum)}

/* Weiterführende Links */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.next a{
  display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ochre);
  border-radius:6px;padding:16px 18px;text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.next a:hover{border-left-color:var(--plum);color:var(--plum)}
.next .code{display:block;font-size:.78rem;color:var(--grey);margin-bottom:3px;font-variant-numeric:tabular-nums}
.next strong{font-weight:600;font-size:.98rem}

/* Kontaktband */
.contact{background:var(--ink);color:#fff;margin-top:64px;padding:52px 0}
.contact h2{color:#fff}
.contact p{color:#b6b8bc;max-width:60ch;margin-bottom:20px}
.contact a{color:#fff}
.contact .big{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:600;text-decoration:none;letter-spacing:-.02em}
.contact .big:hover{color:var(--ochre)}
.contact ul{list-style:none;margin-top:18px;display:grid;gap:9px;font-size:.98rem}
.contact ul a{text-decoration:underline;text-decoration-color:var(--ochre);text-decoration-thickness:2px;text-underline-offset:3px}
.contact ul a:hover{color:var(--ochre)}

/* Fusszeile */
footer{padding:26px 0 34px;font-size:.85rem;color:var(--grey)}
footer .rating{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
footer .rating-title{font-weight:600;color:var(--ink);font-size:.93rem;margin-bottom:9px}
footer .pe-richsnippets{min-height:24px}
footer a{color:var(--grey)}
footer a:hover{color:var(--plum)}
footer .foot-links{margin-bottom:10px}
footer .foot-links a{margin-right:16px}

@media (max-width:940px){
  .layout{grid-template-columns:1fr;gap:32px;padding-top:32px}
  .catalogue{position:static;order:2;margin-top:8px}
  main{order:1}
  .next{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .scope th{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .scope td{display:block;padding-top:2px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}