/* ===========================================================================
   projekt.css: was nur die MessLOG-Website braucht
   ---------------------------------------------------------------------------
   Wird als letzte Datei geladen (nach aufbau/fachblatt.css) und ergänzt die
   Vorlage, statt sie umzubauen. Gestaltung: Entwurf C «Nachtlabor».
     1. Logo in zwei Fassungen (hell/dunkel)
     2. Aufmacher: dunkles Band mit Kolben, Bildschirm, Handy, Ampelkarte
     3. Motive: Ampelkarte und Sollkarte (inc/motive.php)
     4. Blaue Akzente: Dachzeile, Nummern, Schritte, Häkchen
     5. Abschnitt «Sollwerte»
   Farben über die Variablen der Farbwelt (assets/farbwelt/messlog.css).
   Feste Farben nur auf den Karten, die in beiden Fassungen weiss bleiben
   (markiert mit «feste-farbe-ok»).
   =========================================================================== */

/* --- 1. Logo -------------------------------------------------------------- */
.fb-logo { display: block; height: 34px; width: auto; }
.fb-logo--dunkel { display: none; }
html.dunkel .fb-logo--hell { display: none; }
html.dunkel .fb-logo--dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  html:not(.hell) .fb-logo--hell { display: none; }
  html:not(.hell) .fb-logo--dunkel { display: block; }
}

/* --- 4. Akzente ---------------------------------------------------------- */
.fb-dach { color: var(--marke-text); }
/* Im Abschnittskopf gilt sonst die Absatzregel des Fachblatts
   (.fb-abschnitt__kopf p) und macht die Dachzeile grau und gross. */
.fb-abschnitt__kopf .fb-dach { color: var(--marke-text); font-size: 11.5px; line-height: 1.4; margin: 0 0 8px; }
.fb-schritt__nr { color: var(--marke-text); }
.fb-aufmacher h1 .ml-zweite { display: block; }

/* Funktionszellen: drei kurze Linien oben rechts wie die Liste im Logo,
   Nummer als königsblaues Schild. */
.ml-funk { position: relative; }
.ml-funk::after {
  content: ''; position: absolute; top: 22px; right: 20px; width: 26px; height: 16px; opacity: .25;
  background: linear-gradient(var(--text), var(--text)) 0 0 / 100% 2px no-repeat,
              linear-gradient(var(--text), var(--text)) 0 7px / 100% 2px no-repeat,
              linear-gradient(var(--text), var(--text)) 0 14px / 100% 2px no-repeat;
}
.ml-nr {
  display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  background: var(--marke-mitte); color: #ffffff; padding: 2px 7px; border-radius: 3px;   /* feste-farbe-ok: Weiss auf Königsblau */
}
html.dunkel .ml-nr { background: var(--marke); color: #011137; }   /* feste-farbe-ok */
@media (prefers-color-scheme: dark) { html:not(.hell) .ml-nr { background: var(--marke); color: #011137; } }   /* feste-farbe-ok */

/* --- 2. Aufmacher: dunkles Band, in hell und dunkel gleich ---------------
   Der Kolben aus dem Logo liegt gross und blass im Hintergrund. Das
   Laborblau der zweiten Titelzeile ist die hellere Stufe, sonst wäre es auf
   Nachtblau zu schwach. */
.ml-aufmacher-band { background: var(--dunkel); color: var(--dunkel-text); position: relative; overflow: hidden; }
.ml-aufmacher-band::before {
  content: ''; position: absolute; left: -60px; bottom: -80px; width: 420px; height: 420px; opacity: .08; pointer-events: none;
  background: url("/assets/bilder/kolben.svg") no-repeat center / contain;
}
.ml-aufmacher-band h1 { color: var(--dunkel-text); }
.ml-aufmacher-band .fb-lead { color: var(--band-fliess); }
.ml-aufmacher-band .ml-zweite, .ml-aufmacher-band .fb-dach { color: #6cb6f0; }   /* feste-farbe-ok: Laborblau hell auf Nachtblau */
.ml-aufmacher-band .fb-knopf { background: var(--band-knopf); color: var(--band-knopf-text); border-color: var(--band-knopf); }
.ml-aufmacher-band .fb-knopf:hover { background: var(--band-knopf-hover); border-color: var(--band-knopf-hover); }
.ml-aufmacher-band .fb-textlink { color: var(--dunkel-text); }
.ml-aufmacher-band .fb-aufmacher__bild { background: var(--dunkel-flaeche); border-color: var(--feld-linie); }
.ml-aufmacher-band .fb-aufmacher__text { position: relative; }

.ml-held { position: relative; padding: 44px 0 60px 40px; overflow: hidden; }
.ml-held__bildschirm { display: block; width: 122%; max-width: none; border: 1px solid var(--feld-linie); background: var(--flaeche); }
.ml-held__handy {
  position: absolute; right: 34px; bottom: 28px; width: 176px;
  border: 1px solid var(--feld-linie); background: var(--dunkel); padding: 6px; border-radius: 22px;
}
.ml-held__handy img { display: block; width: 100%; height: auto; border-radius: 16px; }
.ml-held .ml-motiv { position: absolute; left: 18px; bottom: 30px; transform: rotate(-3deg); z-index: 2; }

/* --- 3. Motive ------------------------------------------------------------
   Weisse Karte, leichter Schatten, Monospace für Werte. Die Karte bleibt auch
   in der dunklen Fassung hell, wie ein Blatt auf dem Tisch. */
.ml-soll, .ml-ampel {
  background: var(--zettel-grund); color: var(--zettel-text); border: 1px solid #d3dae4;   /* feste-farbe-ok: Karte immer hell */
  border-radius: 8px; box-shadow: 0 12px 30px rgba(1, 17, 55, .22);   /* feste-farbe-ok: Schatten der Karte */
  font-size: 13px; width: 250px;
}

/* Ampelkarte */
.ml-ampel { padding: 6px 0; }
.ml-ampel__kopf { padding: 6px 14px 8px; font-family: var(--mono); font-size: 11px; color: #5f6b7c; border-bottom: 1px solid #e3e8ef; }   /* feste-farbe-ok */
.ml-ampel__zeile { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eef1f6; }   /* feste-farbe-ok */
.ml-ampel__zeile:last-child { border-bottom: 0; }
.ml-ampel__zeile small { grid-column: 2; font-size: 11px; color: #6b7689; }   /* feste-farbe-ok */
.ml-punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: #9aa6b8; }   /* feste-farbe-ok */
.ml-ampel__zeile.ok .ml-punkt { background: #1f8a52; }   /* feste-farbe-ok */
.ml-ampel__zeile.ab .ml-punkt { background: #c0392b; }   /* feste-farbe-ok */
.ml-ampel__zeile.ab small { color: #b03124; }   /* feste-farbe-ok */
.ml-ampel__zeile.offen .ml-punkt { background: #d99a1e; }   /* feste-farbe-ok */

/* Sollkarte: Wert, Sollband mit Marke, Verlauf mit Eingriffsgrenzen */
.ml-soll { width: 360px; padding: 18px 22px; }
.ml-soll__kopf, .ml-soll__fuss { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; color: #5f6b7c; }   /* feste-farbe-ok */
.ml-soll__ok { color: #1a7a48; }   /* feste-farbe-ok */
.ml-soll__wert { display: block; font-size: 54px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.ml-band { position: relative; height: 8px; border-radius: 4px; background: #e6ebf2; }   /* feste-farbe-ok */
.ml-band__soll { position: absolute; left: 22%; right: 22%; top: 0; bottom: 0; background: #bfe0f8; border-radius: 4px; }   /* feste-farbe-ok */
.ml-band__marke { position: absolute; left: 52%; top: -5px; width: 3px; height: 18px; background: var(--zettel-text); border-radius: 2px; }
.ml-band__zahlen { display: flex; justify-content: space-between; padding: 3px 22% 0; font-family: var(--mono); font-size: 10.5px; color: #6b7689; }   /* feste-farbe-ok */
.ml-verlauf { display: block; width: 100%; height: 110px; margin: 12px 0 8px; }
.ml-verlauf__soll { fill: #e3f1fc; }   /* feste-farbe-ok */
.ml-verlauf__grenze { stroke: #c0392b; stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; vector-effect: non-scaling-stroke; }   /* feste-farbe-ok */
.ml-verlauf__linie { fill: none; stroke: var(--marke); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* --- 5. Abschnitt «Sollwerte»: Karte links, Text rechts ---------------- */
.ml-sollwerte { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; padding: 88px 56px; }
.ml-sollwerte__bild { display: flex; justify-content: center; }
.ml-sollwerte h2 { font-size: 34px; line-height: 1.14; letter-spacing: -0.02em; margin: 10px 0 16px; }
.ml-sollwerte .fb-lead { margin: 0; }
.ml-sollwerte__text ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ml-sollwerte__text li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--fliess); line-height: 1.55; }
.ml-sollwerte__text li::before {
  content: ''; width: 12px; height: 7px; margin-top: 6px;
  border-left: 2px solid var(--marke); border-bottom: 2px solid var(--marke); transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .ml-held { padding: 28px 0 40px 20px; min-height: 340px; }
  .ml-held__handy { width: 128px; right: 16px; bottom: 16px; }
  .ml-held .ml-motiv { left: 10px; bottom: 18px; transform: rotate(-3deg) scale(.72); transform-origin: left bottom; }
  .ml-aufmacher-band::before { width: 260px; height: 260px; left: -50px; bottom: -40px; }
  .ml-sollwerte { grid-template-columns: 1fr; gap: 36px; padding: 56px 24px; }
  .ml-sollwerte h2 { font-size: 28px; }
  .ml-soll { width: 100%; max-width: 360px; }
}

/* Seitentitel auf Unterseiten: als h1 für Suchmaschinen, so gross wie h2 */
.fb-h1-klein { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
@media (max-width: 900px) { .fb-h1-klein { font-size: 30px; } }
.fb-raster--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .fb-raster--2 { grid-template-columns: 1fr; } }

/* Knöpfe in der Lesespalte (Fehlerseite, CMS-Seiten): Die Linkregel der
   Lesespalte färbt sonst die Knopfschrift in der Knopffarbe ein, der Text
   wird unsichtbar. */
.fb-lesespalte a.fb-knopf, .fb-lesespalte a.fb-knopf:hover { color: var(--akzent-text); text-decoration: none; }

/* Verwaltung: Logo in der nachtblauen Seitenleiste */
.ml-seitenlogo { display: block; height: auto; width: 100%; max-width: 170px; }