:root{
  --primary:#062b61;
  --primaryHover:#0b3b86;
  --focus: rgba(6,43,97,0.35);

  --bg:#f7f9fc;
  --bg2:#ffffff;
  --surface:#ffffff;
  --surfaceAlt:#f1f5f9;

  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;

  --border: rgba(15,23,42,0.12);
  --borderStrong: rgba(15,23,42,0.18);

  --shadow: 0 18px 46px -34px rgba(15,23,42,0.35);
  --shadowSoft: 0 10px 24px rgba(15,23,42,0.08);

  --radiusLg: 22px;
  --radiusMd: 16px;
  --radiusSm: 12px;
}
*{ box-sizing: border-box; }
html, body{ height: 100%; margin:0; padding:0; }
html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 18% 0%, rgba(6,43,97,0.05), transparent 60%),
    radial-gradient(900px 650px at 90% 18%, rgba(2,132,199,0.04), transparent 62%),
    linear-gradient(to bottom, var(--bg2), var(--bg));
}
a{ color:inherit; }
a:hover{ text-decoration:none; }
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:12px;
}
.skipLink{
  position:absolute; left:-999px; top:8px; padding:10px 12px;
  border-radius:12px; background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadowSoft); z-index:9999;
}
.skipLink:focus{ left:12px; }

.container{
  width:100%; max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px;
}
.page{ padding-top:94px; padding-bottom:42px; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.82);
  border-bottom:1px solid var(--border);
}
.topbarInner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:12px; padding-bottom:12px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
}
.brandMark{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: rgba(6,43,97,0.06); border:1px solid rgba(6,43,97,0.14);
}
.brandMark img{ width:30px; height:30px; border-radius:8px; object-fit:contain; }
.brandText{ font-weight:800; letter-spacing:-0.02em; font-size:17px; }
.brandSub{ display:block; font-size:11px; color:var(--muted2); margin-top:1px; font-weight:600; }

.nav{ display:flex; align-items:center; gap:8px; }
.navLink{
  text-decoration:none; color:var(--muted); font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:10px; transition:all .18s ease;
}
.navLink:hover{ background: rgba(15,23,42,0.06); color:var(--text); }
.navCta{ color:#fff; background:var(--primary); border:1px solid rgba(6,43,97,0.18); }
.navCta:hover{ background:var(--primaryHover); color:#fff; }

.navToggle{
  width:44px; height:44px; display:none; border:1px solid var(--border);
  background: rgba(255,255,255,0.88); color:var(--text); border-radius:10px;
  padding:0; margin-left:auto; cursor:pointer; align-items:center; justify-content:center;
}
.hamburgerLines{ width:22px; height:2px; position:relative; display:block; background:rgba(15,23,42,0.75); border-radius:999px; }
.hamburgerLines::before,.hamburgerLines::after{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:999px; background:rgba(15,23,42,0.75);
}
.hamburgerLines::before{ top:-6px; } .hamburgerLines::after{ top:6px; }

@media (max-width: 920px){
  .navToggle{ display:flex; }
  .nav{
    position:absolute; left:18px; right:18px; top:72px; display:none; flex-direction:column; gap:6px;
    padding:12px; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,0.97);
    box-shadow: var(--shadowSoft);
  }
  .nav.navOpen{ display:flex; }
  .navLink{ width:100%; text-align:center; padding:12px; }
}

/* Hero / common surfaces */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:16px;
  margin-bottom:16px;
}
@media (max-width: 980px){ .hero{ grid-template-columns:1fr; } }

.glass, .card{
  background: rgba(255,255,255,0.9);
  border:1px solid var(--border);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowSoft);
}
.glass{ padding:18px; }
.card{ padding:16px; }

.heroPrimary{
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));
  border:1px solid var(--border);
  border-radius:var(--radiusLg);
  box-shadow: var(--shadowSoft);
}
.kicker{ margin:0 0 8px; color:var(--muted2); font-size:13px; }
.heroTitle{ margin:0; font-size:40px; line-height:1.08; letter-spacing:-0.03em; font-weight:800; }
.heroLead{ margin-top:12px; color:var(--muted); font-size:16px; line-height:1.62; max-width:64ch; }
@media (max-width: 620px){ .heroTitle{ font-size:31px; } .heroLead{ font-size:15px; } }

.pillRow, .metaRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(6,43,97,0.12); background: rgba(6,43,97,0.05); color:var(--primary);
}
.pill.toneSky{ border-color: rgba(11,94,168,0.14); background: rgba(11,94,168,0.06); color:#0b5ea8; }
.pill.toneGreen{ border-color: rgba(31,122,74,0.14); background: rgba(31,122,74,0.06); color:#1f7a4a; }
.pill.toneSlate{ border-color: rgba(100,116,139,.16); background: rgba(100,116,139,.08); color:#334155; }
.pill.toneAmber{ border-color: rgba(180,83,9,.16); background: rgba(180,83,9,.08); color:#9a4b07; }

.btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; padding:10px 13px; text-decoration:none;
  border:1px solid var(--border); background:#fff; color:var(--text); font-weight:700; font-size:14px;
}
.btn:hover{ background: var(--surfaceAlt); }
.btnPrimary{ background: var(--primary); color:#fff; border-color: rgba(6,43,97,.24); }
.btnPrimary:hover{ background: var(--primaryHover); color:#fff; }

.heroVisual{
  border-radius: var(--radiusLg);
  border:1px solid var(--border);
  background:
    radial-gradient(600px 340px at 14% 12%, rgba(6,43,97,0.10), transparent 68%),
    radial-gradient(500px 300px at 92% 15%, rgba(2,132,199,0.10), transparent 72%),
    linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: var(--shadowSoft);
  padding:14px;
  min-height: 240px;
}
.visualPanel{
  height:100%; border:1px solid rgba(15,23,42,.08); border-radius:16px;
  background: rgba(255,255,255,.86);
  display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:12px;
}
.visualTop{ display:flex; gap:8px; }
.dot{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; }
.dot:nth-child(1){ background:#f59e0b; } .dot:nth-child(2){ background:#22c55e; } .dot:nth-child(3){ background:#60a5fa; }
.visualGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vCard{
  border:1px solid rgba(15,23,42,.08); border-radius:12px; background:#fff;
  padding:10px; display:grid; gap:6px;
}
.line{ height:7px; background:#e2e8f0; border-radius:999px; }
.line.w40{ width:40%; } .line.w55{ width:55%; } .line.w65{ width:65%; } .line.w75{ width:75%; } .line.w85{ width:85%; } .line.w95{ width:95%; }
.visualBottom{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  border-radius:999px; padding:5px 8px; font-size:11px; font-weight:700;
  background: rgba(6,43,97,.06); border:1px solid rgba(6,43,97,.12); color:var(--primary);
}

.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px;
}
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-7{ grid-column: span 7; }
.col-6{ grid-column: span 6; }
.col-5{ grid-column: span 5; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }
@media (max-width: 980px){
  .col-8,.col-7,.col-6,.col-5,.col-4,.col-3{ grid-column: span 12; }
}

.sectionHead{ margin-bottom:10px; }
.sectionHead h2{ margin:0; font-size:24px; letter-spacing:-0.02em; }
.sectionHead p{ margin:8px 0 0; color:var(--muted); line-height:1.55; font-size:14px; }

.statGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
@media (max-width: 900px){ .statGrid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 520px){ .statGrid{ grid-template-columns:1fr;} }
.stat{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:12px;
}
.stat .label{ color:var(--muted2); font-size:12px; font-weight:600; }
.stat .val{ margin-top:2px; font-size:24px; font-weight:800; letter-spacing:-0.02em; }
.stat .hint{ margin-top:2px; color:var(--muted); font-size:12px; }

.searchInput{
  width:100%; border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:11px 12px; font-size:14px; color:var(--text);
}
.searchInput::placeholder{ color:#94a3b8; }

.docList{ display:grid; gap:8px; margin-top:10px; }
.docItem{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px 12px;
  text-decoration:none;
}
.docItem:hover{ border-color: rgba(6,43,97,.22); box-shadow:0 6px 16px rgba(15,23,42,.06); }
.docItem .title{ font-weight:750; letter-spacing:-0.01em; }
.docItem .path{ color:var(--muted2); font-size:12px; margin-top:1px; }
.docItem .desc{ color:var(--muted); font-size:12px; margin-top:3px; line-height:1.45; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:5px 8px; min-width:88px;
  border:1px solid rgba(15,23,42,.12); background:#f8fafc; color:#334155;
  font-size:12px; font-weight:700; white-space:nowrap;
}
.badge.governance{ border-color: rgba(79,70,229,.18); background: rgba(79,70,229,.06); color:#4338ca; }
.badge.operations{ border-color: rgba(11,94,168,.18); background: rgba(11,94,168,.06); color:#0b5ea8; }
.badge.moodle{ border-color: rgba(6,43,97,.18); background: rgba(6,43,97,.06); color:#062b61; }
.badge.templates{ border-color: rgba(180,83,9,.18); background: rgba(180,83,9,.06); color:#9a4b07; }
.badge.übersicht{ border-color: rgba(100,116,139,.18); background: rgba(100,116,139,.08); color:#334155; }

.quickList{ margin:0; padding-left:18px; line-height:1.65; }
.quickList li{ margin-bottom:4px; }
.note{
  margin-top:12px; border-left:4px solid var(--primary); border-radius:10px;
  background:#f4f9ff; border-top:1px solid rgba(6,43,97,.06); border-right:1px solid rgba(6,43,97,.06); border-bottom:1px solid rgba(6,43,97,.06);
  padding:10px 12px; color:#18455c;
}
.note.warn{ border-left-color:#d97706; background: rgba(245,158,11,.07); color:#7c4906; border-color: rgba(245,158,11,.10); }
.note.ok{ border-left-color:#15803d; background: rgba(34,197,94,.06); color:#14532d; border-color: rgba(34,197,94,.10); }

.table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; font-size:14px;
}
.table th, .table td{
  border:1px solid var(--border); padding:10px; vertical-align:top; background:#fff; text-align:left;
}
.table th{ background: var(--surfaceAlt); font-weight:700; }
.table tr th:first-child, .table tr td:first-child{ border-left-width:1px; }
.table tr:first-child th:first-child{ border-top-left-radius:10px; }
.table tr:first-child th:last-child{ border-top-right-radius:10px; }
.table tr:last-child td:first-child{ border-bottom-left-radius:10px; }
.table tr:last-child td:last-child{ border-bottom-right-radius:10px; }

.footerBox{
  margin-top:6px; border-top:1px solid var(--border); padding-top:12px;
  color:var(--muted); line-height:1.55;
}
.footerLinks{
  text-align:center; font-weight:700; color:var(--text); font-size:14px; margin-bottom:4px;
}
.footerFine{
  text-align:center; font-size:8pt; color:var(--muted);
}

.code{
  background:#0f172a; color:#e2e8f0; border-radius:12px; border:1px solid #1e293b;
  padding:12px; overflow:auto; font-size:13px; line-height:1.5;
}
code, pre{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.docShell{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:16px; }
@media (max-width: 980px){ .docShell{ grid-template-columns:1fr; } }
.docHeader{
  margin-bottom:16px;
}
.breadcrumb{
  color:var(--muted2); font-size:12px; line-height:1.4;
}
.breadcrumb a{ color:var(--muted2); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text); text-decoration:underline; }
.docTitle{
  margin:8px 0 0; font-size:34px; line-height:1.1; letter-spacing:-0.03em; font-weight:800;
}
.docSub{ margin:10px 0 0; color:var(--muted); line-height:1.62; font-size:15px; }
@media (max-width: 620px){ .docTitle{ font-size:28px; } }

.docSection h2{ margin:0 0 8px; font-size:20px; letter-spacing:-0.02em; }
.docSection p{ margin:0 0 8px; color:var(--text); line-height:1.65; }
.docSection p.muted{ color:var(--muted); }
.docSection ul, .docSection ol{ margin:6px 0 0 18px; padding:0; line-height:1.7; }
.docSection li{ margin-bottom:3px; }
.docSection .subtle{ color:var(--muted2); font-size:13px; }

.checkGrid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;
}
@media (max-width: 700px){ .checkGrid{ grid-template-columns:1fr; } }
.checkItem{
  display:flex; align-items:flex-start; gap:8px; border:1px solid var(--border);
  background:#fff; border-radius:12px; padding:10px;
}
.checkItem .tick{
  width:20px; height:20px; border-radius:50%; background: rgba(31,122,74,.08);
  border:1px solid rgba(31,122,74,.18); color:#1f7a4a; display:grid; place-items:center; font-size:12px; flex:0 0 20px;
}

.sideCard{
  position: sticky; top:96px;
}
.sideCard h3{ margin:0; font-size:16px; letter-spacing:-0.01em; }
.sideCard .group{ margin-top:12px; }
.sideCard .groupTitle{ color:var(--muted2); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.sideCard .groupList{ margin:6px 0 0; padding-left:16px; line-height:1.55; font-size:13px; color:var(--muted); }
.sideCard .groupList a{ color:var(--primary); }
.sideCard .metaLine{ margin-top:6px; font-size:13px; color:var(--muted); }
.sideCard .mini{
  margin-top:8px; border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px;
}
.sideCard .mini strong{ display:block; font-size:13px; margin-bottom:3px; }
.sideCard .mini span{ color:var(--muted); font-size:12px; line-height:1.45; }

.featureGrid{
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px;
}
@media (max-width: 680px){ .featureGrid{ grid-template-columns:1fr; } }
.featureCard{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:12px;
}
.featureCard h3{ margin:0; font-size:15px; }
.featureCard p{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }

.categoryGrid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
}
@media (max-width: 900px){ .categoryGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .categoryGrid{ grid-template-columns:1fr; } }
.categoryCard{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:12px;
}
.categoryCard h3{ margin:0; font-size:15px; }
.categoryCard p{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.categoryCard .count{ margin-top:8px; font-weight:800; color:var(--primary); }

.calloutGrid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width: 900px){ .calloutGrid{ grid-template-columns:1fr; } }

hr.sep{
  border:0; border-top:1px solid var(--border); margin:12px 0;
}



/* --- AFANDI Docs v2 mobile & startpage refinements --- */
html, body{ overscroll-behavior-x: none; }
body{ overflow-x: hidden; }

@supports (padding-left: env(safe-area-inset-left)) {
  .container{
    padding-left: max(24px, calc(env(safe-area-inset-left) + 24px));
    padding-right: max(24px, calc(env(safe-area-inset-right) + 24px));
  }
}
@media (max-width: 560px){
  .container{ padding-left: 18px; padding-right: 18px; }
  @supports (padding-left: env(safe-area-inset-left)) {
    .container{
      padding-left: max(18px, calc(env(safe-area-inset-left) + 18px));
      padding-right: max(18px, calc(env(safe-area-inset-right) + 18px));
    }
  }
  .topbarInner{ padding-top: 14px; padding-bottom: 14px; }
  .brandSub{ display:none; }
}

.heroTitle{
  font-size: clamp(2rem, 3vw + 1rem, 3.1rem);
  line-height: 1.05;
}
.heroLead{
  font-size: clamp(0.95rem, .3vw + .85rem, 1.05rem);
}

@media (max-width: 760px){
  .heroVisual{ display:none; }
  .hero{ grid-template-columns:1fr; }
  .heroPrimary{ padding:16px; }
  .pillRow, .metaRow, .btnRow{ gap:7px; }
  .btn{ width:auto; }
}
@media (max-width: 640px){
  .docItem{
    flex-direction: column;
    align-items: stretch;
  }
  .docItem .badge{
    align-self: flex-start;
    min-width: 0;
  }
  .sectionHead h2{ font-size: 21px; }
  .docTitle{ font-size: 28px; }
  .docShell{ gap:12px; }
  .sideCard{ position: static; top:auto; }
}

.backTopRow{
  margin-top: 10px;
  margin-bottom: 10px;
}
.backTopRow .btn{
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.indexFocusGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top: 10px;
}
@media (max-width: 900px){ .indexFocusGrid{ grid-template-columns:1fr; } }
.indexFocusCard{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.indexFocusCard h3{ margin:0; font-size:15px; }
.indexFocusCard p{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.indexFocusCard .count{ margin-top:8px; color:var(--primary); font-weight:800; font-size:13px; }


/* --- Bereichsübersicht (table-free) --- */
.areaGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 1100px){
  .areaGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .areaGrid{ grid-template-columns: 1fr; }
}
.areaCard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 12px 14px;
  box-shadow: var(--shadowSoft);
}
.areaCardTop{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.areaPurpose{
  margin: 0 0 10px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.areaLinks{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pillLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--borderStrong);
  background: rgba(255,255,255,0.75);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.pillLink:hover{
  border-color: rgba(6,43,97,0.35);
  background: rgba(6,43,97,0.06);
}



/* --- Startseite Desktop Stabilisierung + Bereichsübersicht ohne Tabelle --- */
@media (min-width: 981px){
  .hero{
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
    align-items: stretch;
  }
  .heroPrimary{ padding: 20px; }
  .heroTitle{ max-width: 12.2ch; }
  .heroLead{ max-width: 58ch; }
  .heroVisual{ min-height: 100%; }
  .docList{
    max-height: 720px;
    overflow: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
  .docList::-webkit-scrollbar{ width: 10px; }
  .docList::-webkit-scrollbar-thumb{
    background: rgba(100,116,139,.35);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.8);
  }
  .docList::-webkit-scrollbar-track{ background: transparent; }
}

.btnSm{
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
}

.areaOverviewGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 6px;
}
@media (max-width: 900px){
  .areaOverviewGrid{ grid-template-columns: 1fr; }
}
.areaOverviewCard{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  padding: 14px;
}
.areaOverviewCard.governance{ border-color: rgba(79,70,229,.18); }
.areaOverviewCard.operations{ border-color: rgba(11,94,168,.18); }
.areaOverviewCard.moodle{ border-color: rgba(6,43,97,.18); }
.areaOverviewCard.templates{ border-color: rgba(180,83,9,.18); }

.areaHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.areaHead h3{
  margin:0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.areaPurpose{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}
.areaMeta{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.areaMeta .metaLabel{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted2);
  margin-bottom: 6px;
}
.areaMeta ul{
  margin:0;
  padding-left: 16px;
  line-height: 1.55;
  font-size: 13px;
  color: var(--text);
}
.areaMeta li{ margin-bottom: 2px; }
.areaActions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}


/* --- Startseite Feinschliff: kleinere Typografie + klarere Chips --- */
.page-home .heroPrimary{ padding:16px; }
.page-home .kicker{
  font-size:12px;
  line-height:1.35;
  margin-bottom:6px;
}
.page-home .heroTitle{
  font-size: clamp(1.95rem, 1.55rem + 1.5vw, 2.9rem);
  line-height:1.06;
  letter-spacing:-0.028em;
  max-width: 12.8ch;
}
.page-home .heroLead{
  margin-top:10px;
  font-size:15px;
  line-height:1.52;
  max-width: 60ch;
}
.page-home .pillRow{ margin-top:10px; gap:7px; }
.page-home .pill{
  font-size:11px;
  padding:5px 9px;
  font-weight:700;
}
.page-home .btnRow{ margin-top:12px; }
.page-home .btn{
  font-size:13px;
  padding:9px 12px;
}
.page-home .statGrid{ margin-top:10px; gap:8px; }
.page-home .stat{ padding:10px; }
.page-home .stat .label{ font-size:11px; }
.page-home .stat .val{ font-size:19px; line-height:1.05; }
.page-home .stat .hint{ font-size:11px; line-height:1.35; }
.page-home .sectionHead h2{ font-size:20px; }
.page-home .sectionHead p{ font-size:13px; line-height:1.5; }
.page-home .indexFocusCard h3{ font-size:14px; }
.page-home .indexFocusCard p{ font-size:12px; line-height:1.45; }
.page-home .indexFocusCard .count{ font-size:12px; }
.page-home .searchInput{ font-size:13px; padding:10px 11px; }
.page-home .docItem{ padding:9px 11px; }
.page-home .docItem .title{ font-size:14px; font-weight:700; }
.page-home .docItem .path{ font-size:11px; }
.page-home .docItem .desc{ font-size:11px; line-height:1.42; margin-top:2px; }
.page-home .badge{ font-size:11px; padding:4px 7px; min-width:80px; }

.page-home .heroVisual{ padding:12px; min-height: 230px; }
.page-home .visualPanel{ padding:10px; gap:8px; }
.page-home .vCard{ padding:9px; }
.page-home .line{ height:6px; }
.page-home .tag{ font-size:10px; padding:4px 7px; }

.toTopFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 990;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(6,43,97,.18);
  background: rgba(255,255,255,.94);
  color: var(--primary);
  box-shadow: var(--shadowSoft);
  font-weight: 700;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.toTopFab:hover{
  background: rgba(6,43,97,.06);
  border-color: rgba(6,43,97,.28);
}
@media (max-width: 640px){
  .page-home .heroTitle{ font-size: 2.05rem; }
  .page-home .heroLead{ font-size:14px; }
  .page-home .heroPrimary{ padding:14px; }
  .toTopFab{
    right: 12px;
    bottom: 12px;
    min-width: 64px;
    font-size: 11px;
    padding: 7px 9px;
  }
}



/* === v8 typography + docs styling refinements === */
html{ font-size:15px; }

.page-home .heroTitle{ font-size:3rem; line-height:1.07; letter-spacing:-0.032em; }
.page-home .kicker{ font-size:12px; color:var(--muted2); }
.page-home .heroLead{ font-size:15px; line-height:1.58; max-width:62ch; }
.page-home .pill{ font-size:11px; padding:5px 9px; }
.page-home .btn{ font-size:13px; padding:9px 12px; border-radius:10px; }
.page-home .stat .label{ font-size:11px; }
.page-home .stat .val{ font-size:21px; }
.page-home .stat .hint{ font-size:11px; line-height:1.35; }

.docTitle{ font-size:30px; line-height:1.12; }
.docSub{ font-size:14px; line-height:1.55; }
.docSection h2{ font-size:18px; margin-bottom:6px; }
.docSection p,
.docSection li{ font-size:14px; line-height:1.6; }
.docSection .subtle{ font-size:12px; }
.docSection ul, .docSection ol{ margin-left:16px; }

.sideCard, .group, .mini{ border-radius:12px; }
.sideTitle, .groupTitle{ font-size:13px; }
.sideCard, .groupList li, .mini span{ font-size:13px; line-height:1.45; }
.badge, .pill{ font-size:11px; }
.btn{ font-size:13px; }
.backTopRow .btn{ font-size:12px; padding:7px 10px; border-radius:10px; }

/* Square floating top button (all pages) */
.toTopFab{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:10px;
  right:14px;
  bottom:14px;
  font-size:0; /* hide text label visually */
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.toTopFab::before{
  content:"↑";
  font-size:18px;
  line-height:1;
  font-weight:800;
}
.toTopFab.isHidden{
  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  pointer-events:none;
}
.toTopFab.isVisible{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
@media (max-width: 980px){
  .page-home .heroTitle{ font-size:2.55rem; }
}
@media (max-width: 640px){
  html{ font-size:14px; }
  .page-home .heroTitle{ font-size:2.05rem; line-height:1.08; }
  .page-home .heroLead{ font-size:14px; line-height:1.55; }
  .page-home .kicker{ font-size:11px; }
  .docTitle{ font-size:24px; }
  .docSub{ font-size:13px; }
  .docSection h2{ font-size:17px; }
  .toTopFab{ width:42px; height:42px; min-width:42px; right:10px; bottom:10px; }
}

/* reduce heavy desktop width feel in hero text block */
.page-home .heroPrimary{ padding:16px; }
.page-home .heroVisual{ padding:14px; }


/* === v9 final usability/content pass (home + docs typography) === */
.page-home .hero{
  grid-template-columns: 1fr !important;
  max-width: 900px;
}
.page-home .heroVisual{ display:none !important; }
.page-home .heroPrimary{
  max-width: 900px;
  padding: 14px !important;
}
.page-home .kicker{
  font-size: 11.5px !important;
  margin-bottom: 6px !important;
}
.page-home .heroTitle{
  font-size: 2.1rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  max-width: 20ch;
}
.page-home .heroLead{
  font-size: 14px !important;
  line-height: 1.52 !important;
  margin-top: 10px !important;
  max-width: 72ch;
}
.page-home .pillRow{ margin-top: 10px !important; gap: 6px !important; }
.page-home .pill{
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 999px;
}
.page-home .btnRow{ margin-top: 10px !important; gap: 8px !important; }
.page-home .btn{
  font-size: 12.5px !important;
  padding: 8px 11px !important;
  border-radius: 10px !important;
}
.page-home .statGrid{
  margin-top: 10px !important;
  gap: 8px !important;
}
.page-home .stat{
  padding: 10px !important;
}
.page-home .stat .label{ font-size: 11px !important; }
.page-home .stat .val{ font-size: 19px !important; line-height:1.08; }
.page-home .stat .hint{ font-size: 11px !important; line-height:1.35 !important; }

.page-home .sectionHead h2{ font-size: 1.1rem; }
.page-home .sectionHead p{ font-size: 13px; line-height: 1.5; }
.page-home .indexFocusCard h3{ font-size: 13px !important; }
.page-home .indexFocusCard p,
.page-home .indexFocusCard .count{ font-size: 11.5px !important; }

.page-home .searchInput{ font-size: 13px !important; padding: 9px 10px !important; }
.page-home .docItem .title{ font-size: 13px !important; }
.page-home .docItem .path{ font-size: 11px !important; }
.page-home .docItem .desc{ font-size: 11px !important; line-height: 1.4 !important; }

/* Keep docs pages compact and consistent */
.docTitle{ font-size: 26px !important; line-height: 1.12 !important; }
.docSub{ font-size: 13.5px !important; line-height: 1.52 !important; }
.docSection h2{ font-size: 17px !important; }
.docSection p, .docSection li{ font-size: 13.5px !important; line-height: 1.56 !important; }
.docSection .featureCard h3{ font-size: 13px; margin-bottom: 4px; }
.docSection .groupTitle{ font-size: 12px; }

/* Floating top button (square, all pages) */
.toTopFab{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 1200 !important;
  font-size: 0 !important;
}
.toTopFab::before{
  content: "↑";
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 980px){
  .page-home .hero{ max-width: none; }
  .page-home .heroTitle{ font-size: 1.95rem !important; max-width: none; }
}

@media (max-width: 640px){
  .page-home .heroPrimary{ padding: 12px !important; }
  .page-home .kicker{ font-size: 11px !important; }
  .page-home .heroTitle{ font-size: 1.7rem !important; line-height: 1.1 !important; }
  .page-home .heroLead{ font-size: 13px !important; line-height: 1.5 !important; }
  .page-home .pill{ font-size: 10.5px !important; padding: 4px 7px !important; }
  .page-home .btn{ font-size: 12px !important; padding: 8px 10px !important; }
  .page-home .statGrid{ grid-template-columns: 1fr 1fr !important; }
  .docTitle{ font-size: 22px !important; }
  .docSub{ font-size: 13px !important; }
  .docSection h2{ font-size: 16px !important; }
  .docSection p, .docSection li{ font-size: 13px !important; }
  .toTopFab{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
}

/* === v10: home hero sizing + full width + smaller stats === */
.page-home .hero{
  display:block !important;
  margin-bottom:16px;
  max-width:none !important;
}
.page-home .heroPrimary{
  width:100% !important;
  max-width:none !important;
}
/* make the main heading less dominant (matches doc pages better) */
.page-home .heroTitle{
  font-size:2.25rem !important;
  line-height:1.14 !important;
  letter-spacing:-0.02em !important;
}
@media (max-width: 980px){
  .page-home .heroTitle{ font-size:2.05rem !important; }
}
@media (max-width: 640px){
  .page-home .heroTitle{ font-size:1.85rem !important; }
}

/* compact stats cards */
.page-home .stat{ padding:10px !important; }
.page-home .stat .label{ font-size:10px !important; }
.page-home .stat .val{ font-size:18px !important; letter-spacing:-0.01em !important; }
.page-home .stat .hint{ font-size:10px !important; line-height:1.35 !important; }

/* keep hero visual fully disabled on home (in case old markup exists) */
.page-home .heroVisual{ display:none !important; }

/* === v11: Startseite Hero (erster Block) professioneller + kompakter === */
.page-home .hero{
  margin-bottom: 14px;
}

.page-home .heroPrimary{
  position: relative;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background:
    radial-gradient(680px 240px at -4% -10%, rgba(6,43,97,.07), transparent 62%),
    radial-gradient(520px 220px at 100% 0%, rgba(2,132,199,.05), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow: 0 14px 28px rgba(15,23,42,.07);
}

.page-home .heroPrimary::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(6,43,97,.92), rgba(11,94,168,.72));
}

.page-home .kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin: 0 0 8px 0 !important;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(6,43,97,.05);
  border: 1px solid rgba(6,43,97,.10);
  color: #334155 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700;
}

.page-home .heroTitle{
  font-size: 1.95rem !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;
  max-width: 18ch;
  margin-top: 0;
}

.page-home .heroLead{
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #475569;
  max-width: 78ch;
}

.page-home .heroLead strong{
  color: #0f172a;
  font-weight: 700;
}

.page-home .pillRow{
  margin-top: 9px !important;
  gap: 6px !important;
}

.page-home .pill{
  font-size: 10.5px !important;
  padding: 4px 8px !important;
  border-width: 1px;
}

.page-home .btnRow{
  margin-top: 10px !important;
  gap: 8px !important;
}

.page-home .btn{
  font-size: 12px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

.page-home .statGrid{
  margin-top: 10px !important;
  gap: 8px !important;
}

.page-home .stat{
  padding: 9px 10px !important;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.page-home .stat .label{
  font-size: 10px !important;
  color: #64748b;
}

.page-home .stat .val{
  margin-top: 3px;
  font-size: 17px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.012em;
}

.page-home .stat .hint{
  margin-top: 3px;
  font-size: 10px !important;
  line-height: 1.30 !important;
  color: #64748b;
}

@media (max-width: 980px){
  .page-home .heroTitle{
    font-size: 1.8rem !important;
    max-width: none;
  }
}

@media (max-width: 640px){
  .page-home .heroPrimary{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .page-home .heroPrimary::before{
    left:12px;
    right:12px;
  }

  .page-home .kicker{
    font-size: 10px !important;
    padding: 4px 7px;
  }

  .page-home .heroTitle{
    font-size: 1.62rem !important;
    line-height: 1.12 !important;
  }

  .page-home .heroLead{
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .page-home .pill{
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  .page-home .btn{
    font-size: 11.5px !important;
    padding: 7px 9px !important;
  }

  .page-home .statGrid{
    grid-template-columns: 1fr 1fr !important;
  }

  .page-home .stat .val{
    font-size: 15px !important;
  }
}