/* ================================================================
   f-solution Portal - Ueberlagerung im Stil der Hauptseite
   Uebertragen 2026-11-05 aus fsolution-main-dark/style.css 2.0.0.
   Sicherung der warmen Fassung: dark-tech.css.bak-warm-20261105
   Diese Datei laedt NACH dem Basis-<style> jeder Seite und gewinnt.
   Die Klassennamen des Portals bleiben unveraendert - hier werden nur
   die Gestaltungswerte der Hauptseite daraufgelegt.
   ================================================================ */

:root {
  color-scheme: light;
  --bg: #fbfdfd;
  --surface: #ffffff;
  --panel: #ffffff;
  --line: #dde7e5;
  --text: #1c1a17;
  --ink: #1c1a17;
  --muted: #5d6a67;
  --accent: #0b7a6c;          /* Tuerkis der Hauptseite */
  --accent2: #2f6b7d;
  --ok: #7a7a21;
  --warn: #9a6b12;
  --dark: #ffffff;
  --max: 1240px;
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

/* --- Schrift: Inter statt Georgia, enge Laufweite wie auf der Hauptseite --- */
h1, h2, h3, .top .title, .brand strong, .metric strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1 { letter-spacing: -.07em; line-height: .9; font-weight: 800; }
h2 { letter-spacing: -.05em; line-height: 1; font-weight: 800; }
h3 { letter-spacing: -.035em; font-weight: 780; }

/* --- Kopfzeile: Glasleiste wie site-header --- */
.top {
  min-height: 112px;
  margin-top: 12px;
  padding: 0 22px;
  border: 1px solid rgba(96,120,116,.2);
  border-bottom: 1px solid rgba(96,120,116,.2);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 45px rgba(28,26,23,.07);
  backdrop-filter: blur(18px);
}
.logo {
  /* Gleiche Groesse wie .brand-logo der Hauptseite. Wiki und Dashboard
     hatten 36px, Portal 54px - vereinheitlicht. */
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  max-width: none;
  object-fit: contain;
  filter: none;
}
/* --- Markenschrift: exakt die Kaskade der Hauptseite ---------------
   Nachgerechnet aus fsolution-main-dark/style.css: spaetere Regeln
   ueberschreiben die erste. Endstand auf f-solution.eu ist
   .brand-name  Georgia-Serife 850, 1.85rem, -.02em, Zeile 1.05
   .brand-line  ui-monospace 500, .68rem, gemischte Schreibung, .02em
   Achtung: .brand > span ist nur die Huelle um beides - wird sie selbst
   gestaltet, erbt der Name ihre Versalien. Deshalb genau adressieren. */
.brand > span { font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.brand-copy, .brand > span { display: flex; flex-direction: column; min-width: 0; }
.brand strong, .brand > span > strong, .brand .title {
  font-family: Georgia, serif;
  font-size: 1.85rem;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}
.brand > span > span, .brand small {
  display: block;
  font: 500 .68rem/1.3 ui-monospace, monospace;
  color: var(--muted);
  text-transform: none;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* --- Navigation und Knoepfe: kantig, nicht rund --- */
.nav { gap: 3px; padding: 5px; border: 1px solid rgba(120,110,96,.13); border-radius: 13px; background: rgba(255,255,255,.55); }
.nav a, .btn, a.btn, .cta, button {
  border-radius: 9px !important;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  color: #48524f;
  font-size: .82rem;
  font-weight: 650;
  transition: .18s;
}
.nav a:hover, .btn:hover { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.btn.primary, a.btn.primary {
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--accent), #12a894);
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 0 0 1px rgba(11,122,108,.18), 0 8px 28px rgba(11,122,108,.12);
}
.btn.primary:hover, a.btn.primary:hover {
  background: linear-gradient(135deg, #12a894, var(--accent));
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(11,122,108,.3), 0 12px 34px rgba(11,122,108,.2);
}

/* --- Aufmacher: Gitternetz und Tuerkisschein wie home-hero --- */
.hero { gap: 14px; padding-top: 28px; }
.hero-main {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(11,122,108,.16), transparent 38%),
    linear-gradient(rgba(11,122,108,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,122,108,.04) 1px, transparent 1px),
    linear-gradient(145deg, #ffffff, #f4faf9) !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}
.hero-main > * { position: relative; }
.hero-main h1 { color: var(--ink); }
.hero-main .lead, .lead { color: #55625f; }

/* --- Auszeichnungen: Schreibmaschinenschrift in Tuerkis --- */
.kicker, .meta, .label, .open, .metric strong {
  color: var(--accent);
}
.kicker, .meta, .label {
  font: 750 .7rem ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.open { font-weight: 750; }

/* --- Kacheln: Radien, Schein, Anheben wie service-card --- */
.feature, .quick a, .card, .fact, .metric, .panel, .tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.92)) !important;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature:before, .quick a:before, .card:before, .tile:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 10%, rgba(11,122,108,.12), transparent 35%);
  border-radius: inherit;
  pointer-events: none;
}
.feature > *, .quick a > *, .card > *, .tile > * { position: relative; }
.feature:hover, .quick a:hover, .card:hover, .tile:hover {
  border-color: var(--accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(28,26,23,.07) !important;
}
.feature p, .quick p, .card p, .card li, .intro, footer { color: var(--muted); }

.grid { gap: 14px; }
.band { border: 1px solid var(--line); border-radius: 14px !important; background: var(--line); overflow: hidden; }
.metric { border-radius: 0 !important; background: var(--panel) !important; box-shadow: none; }
.metric:before { display: none; }

/* --- Inhaltsverzeichnis des Wikis --- */
.toc {
  position: sticky;
  top: 124px;
  z-index: 10;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}
.toc a { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 650; }
.toc a:hover { border-color: var(--accent); color: var(--accent); background: rgba(11,122,108,.06); }

/* --- Hinweiskaesten und Befehlsbloecke --- */
.server { border: 1px solid var(--line); border-radius: 12px; background: #07100e; color: #42e8cf; }
.callout { border-color: var(--accent); border-left: 2px solid var(--accent); border-radius: 12px; background: rgba(11,122,108,.07); }
.callout.ok { border-color: var(--ok); border-left-color: var(--ok); background: rgba(122,122,33,.07); }
.callout.warn { border-color: var(--warn); border-left-color: var(--warn); background: rgba(154,107,18,.07); }
.checklist li { border-color: var(--line); }
.checklist li:before { color: var(--ok); }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }

@media (max-width: 1080px) {
  .top { min-height: 82px; position: static; margin-top: 10px; padding: 16px; }
  .toc { position: static; }
}
@media (max-width: 680px) {
  .logo { width: 42px; height: 42px; }
  .brand strong, .brand > span > strong, .brand .title { font-size: 1.45rem; }
  .brand > span > span, .brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}