/* ==========================================================================
   openbi Studio — Stylesheet
   Zielpfad im WebFileContainer: /CMS/css/openbi-studio.css
   Quelle: Design-Tokens aus dem Prototyp "openbi Studio standalone"
   ========================================================================== */

/* --- Schriften -----------------------------------------------------------
   Die drei woff2-Dateien müssen in den WebFileContainer hochgeladen werden
   (Binärformat -> nur über die CMS-Oberfläche). Fehlen sie, greift system-ui.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/CMS/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/CMS/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------
   Palette aus dem Prototyp. Achtung: dort stehen zwei :root-Blöcke; gültig ist
   der zweite (blau), er überschreibt die Vorgabewerte des Modernist-Kits.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #eef4f8;
  --color-surface: #eaf0f4;
  --color-text: #1c2b38;
  --color-divider: #d3e0e8;

  --color-accent: #1f8fce;
  --color-accent-100: #dcedf7;
  --color-accent-300: #8fc7e5;
  --color-accent-500: #1f8fce;
  --color-accent-600: #17739f;
  --color-accent-700: #125f83;
  --color-accent-900: #0b3a51;

  /* Zweitfarbe Grün – im Prototyp für Status "läuft" und Erfolgsmeldungen */
  --color-accent-2-100: #e6f0d9;
  --color-accent-2-500: #7cb342;
  --color-accent-2-700: #5c8a2e;

  --color-neutral-100: #f5f8fa;
  --color-neutral-200: #eaf0f4;
  --color-neutral-300: #d3e0e8;
  --color-neutral-700: #5b6b78;
  --color-neutral-800: #3a4a56;
  --color-neutral-900: #1c2b38;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --shell-dark: #16232e;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }
a.btn:hover, .obs-brand:hover, .obs-nav a:hover, .obs-footer a:hover { text-decoration: none; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.btn-primary   { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover  { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover  { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: 4px; }
.btn-ghost:hover  { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-invert { background: #fff; color: var(--color-accent-700); }
.btn-lg { font-size: 15px; padding: 14px 22px; }

/* --- Tags ----------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ==========================================================================
   Seitenrahmen (CMS Page): navbar + footerbar
   ========================================================================== */
.obs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 48px;
  border-bottom: 2px solid var(--color-divider);
}
.obs-brand { display: flex; align-items: center; gap: 10px; }
.obs-brand-mark { width: 16px; height: 16px; background: var(--color-accent); }
.obs-brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.obs-header-right { display: flex; align-items: center; gap: 28px; font-size: 14px; }

/* navbar-Ausgabe des CMS: ul > li > a */
.obs-nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.obs-nav a { color: inherit; text-decoration: none; font-size: 14px; }
.obs-nav a:hover { color: var(--color-accent); }
.obs-nav .is-active { color: var(--color-accent); font-weight: 600; }

.obs-footer {
  background: var(--shell-dark);
  color: var(--color-bg);
  padding: 56px 48px;
  border-top: 2px solid var(--color-accent);
}
.obs-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.obs-footer a { color: var(--color-bg); text-decoration: none; font-size: 14px; }
.obs-footer a:hover { color: var(--color-accent-300); }

/* ==========================================================================
   Startseite
   ========================================================================== */
.obs-kicker {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 28px;
}
.obs-kicker-muted { color: var(--color-neutral-700); margin-bottom: 20px; }

/* Hero */
.obs-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-bottom: 2px solid var(--color-divider);
}
.obs-hero-main { padding: 72px 48px 64px; border-right: 2px solid var(--color-divider); }
.obs-hero-main h1 {
  font-size: 76px;
  line-height: .98;
  margin: 0 0 28px;
  max-width: 15ch;
  text-wrap: balance;
}
.obs-hero-lead {
  font-size: 19px;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 36px;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}
.obs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.obs-trust { display: flex; gap: 8px; flex-wrap: wrap; }

.obs-hero-facts { display: grid; grid-template-rows: repeat(3, 1fr); }
.obs-fact {
  padding: 32px 40px;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.obs-fact-value { font-family: var(--font-heading); font-weight: 800; font-size: 46px; line-height: 1; margin-bottom: 8px; }
.obs-fact-label { font-size: 14px; color: var(--color-neutral-700); max-width: 32ch; }

/* Drei Schritte */
.obs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--color-divider);
}
.obs-step { padding: 44px 40px; border-right: 1px solid var(--color-divider); }
.obs-step:last-child { border-right: 0; }
.obs-step-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--color-accent);
  margin-bottom: 20px;
}
.obs-step h3 { font-size: 24px; margin: 0 0 12px; letter-spacing: -.01em; }
.obs-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }

/* Preise */
.obs-pricing {
  display: grid;
  grid-template-columns: 5fr 7fr;
  border-bottom: 2px solid var(--color-divider);
}
.obs-pricing-intro { padding: 56px 48px; border-right: 2px solid var(--color-divider); }
.obs-pricing-intro h2 { font-size: 40px; line-height: 1.05; margin: 0 0 18px; }
.obs-pricing-intro p { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); margin: 0 0 24px; max-width: 40ch; text-wrap: pretty; }

.obs-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 22px 48px;
  border-bottom: 1px solid var(--color-divider);
}
.obs-price-label { font-weight: 600; font-size: 16px; }
.obs-price-note { font-size: 13px; color: var(--color-neutral-700); margin-top: 4px; }
.obs-price-amount { font-family: var(--font-heading); font-weight: 800; font-size: 20px; white-space: nowrap; }

/* Abschluss-Banner
   Hintergrund ist accent-600 statt accent-500: Weiß auf #1f8fce erreicht nur
   3,6:1 und fällt bei kleinem Text durch. #17739f liegt bei 5,3:1. */
.obs-cta { background: var(--color-accent-600); color: #fff; padding: 88px 48px; }
.obs-cta .obs-kicker { color: #fff; margin-bottom: 24px; }
.obs-cta a:hover { color: inherit; }
.obs-cta h2 { font-size: 68px; line-height: 1; margin: 0 0 32px; max-width: 18ch; }

/* ==========================================================================
   App-Bereich — Seitenkopf, Kennzahlen, Tabellen
   ========================================================================== */
.obs-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 48px 28px;
  border-bottom: 2px solid var(--color-divider);
}
.obs-eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 12px;
}
.obs-page-head h1 { font-size: 42px; margin: 0; }

/* Kennzahlenzeile */
.obs-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--color-divider);
}
.obs-kpi { padding: 28px 32px; border-right: 1px solid var(--color-divider); }
.obs-kpi:last-child { border-right: 0; }
.obs-kpi-label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 10px;
}
.obs-kpi-value { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; margin: 0; }
.obs-kpi-note { font-size: 13px; color: var(--color-neutral-700); margin: 6px 0 0; }

.obs-section { padding: 40px 48px; }

/* Tabelle */
.obs-table { width: 100%; border-collapse: collapse; }
.obs-table caption { text-align: left; font-size: 13px; color: var(--color-neutral-700); padding-bottom: 12px; }
.obs-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding: 0 16px 12px;
  border-bottom: 2px solid var(--color-divider);
}
.obs-table th:first-child, .obs-table td:first-child { padding-left: 0; }
.obs-table th:last-child, .obs-table td:last-child { padding-right: 0; text-align: right; }
.obs-table td {
  padding: 16px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
  font-size: 15px;
}
.obs-table tbody tr:hover { background: var(--color-neutral-100); }
.obs-table td:empty::after { content: "–"; color: var(--color-neutral-400, var(--color-neutral-700)); }

.obs-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.obs-cell-strong { font-weight: 600; margin: 0; }
.obs-cell-sub { font-size: 13px; color: var(--color-neutral-700); margin: 2px 0 0; }
.obs-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Statusabzeichen */
.obs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
}
.obs-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.obs-badge-ok     { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.obs-badge-paused { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* --- Schmale Ansichten ---------------------------------------------------- */
@media (max-width: 1000px) {
  .obs-hero, .obs-pricing { grid-template-columns: 1fr; }
  .obs-hero-main, .obs-pricing-intro { border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .obs-steps { grid-template-columns: 1fr; }
  .obs-step { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .obs-kpis { grid-template-columns: repeat(2, 1fr); }
  .obs-kpi:nth-child(2) { border-right: 0; }
  .obs-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
}
@media (max-width: 720px) {
  .obs-header { flex-direction: column; align-items: flex-start; padding: 20px 24px; }
  .obs-hero-main { padding: 48px 24px; }
  .obs-hero-main h1 { font-size: 44px; }
  .obs-fact, .obs-step, .obs-pricing-intro, .obs-price-row { padding-inline: 24px; }
  .obs-cta { padding: 56px 24px; }
  .obs-cta h2 { font-size: 40px; }
  .obs-footer { padding: 40px 24px; }

  .obs-page-head { flex-direction: column; align-items: flex-start; padding: 32px 24px 24px; }
  .obs-page-head h1 { font-size: 30px; }
  .obs-kpis { grid-template-columns: 1fr; }
  .obs-kpi { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .obs-section { padding: 24px; }

  /* Tabelle bricht auf Karten um: Kopfzeile weg, Zellen mit Label davor */
  .obs-table thead { display: none; }
  .obs-table tr { display: block; border-bottom: 2px solid var(--color-divider); padding: 16px 0; }
  .obs-table td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 4px 0; text-align: left; }
  .obs-table td:last-child { text-align: left; padding-top: 12px; }
  .obs-table td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   Registerkarten
   ========================================================================== */
.obs-tabs {
  display: flex;
  gap: 0;
  padding: 0 48px;
  border-bottom: 2px solid var(--color-divider);
  overflow-x: auto;
}
.obs-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-700);
  padding: 16px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.obs-tab:hover { color: var(--color-text); }
.obs-tab[aria-selected="true"] {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}
.obs-tabpanel[hidden] { display: none; }

@media (max-width: 720px) {
  .obs-tabs { padding-inline: 24px; }
  .obs-tab { padding: 14px 14px; }
}

/* --- Datenmodell: Entitätskarten -------------------------------------- */
.obs-ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border-top: 1px solid var(--color-divider);
}
.obs-ent {
  padding: 20px 24px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.obs-ent h3 { font-size: 16px; margin: 0 0 2px; letter-spacing: -.01em; }
.obs-ent-tab { font-size: 12px; color: var(--color-neutral-700); margin: 0 0 14px; }
.obs-fields { list-style: none; margin: 0; padding: 0; }
.obs-fields li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: 13px;
}
.obs-fields li:last-child { border-bottom: 0; }
.obs-ftype { color: var(--color-neutral-700); white-space: nowrap; }
.obs-fields li.obs-ref .obs-ftype { color: var(--color-accent-700); font-weight: 600; }
.obs-ent-leer { color: var(--color-neutral-700); font-size: 13px; margin: 0; }

/* --- Datenmodell: Diagramm --------------------------------------------- */
.obs-dm-wrap {
  overflow-x: auto;
  padding: 24px 48px 8px;
  border-bottom: 1px solid var(--color-divider);
}
.obs-dm-svg { display: block; height: auto; }
.obs-dm-box { fill: #ffffff; stroke: var(--color-divider); stroke-width: 1.5; }
.obs-dm-box-ref { stroke: var(--color-accent); }
.obs-dm-name { font-family: var(--font-heading); font-weight: 800; font-size: 12px; fill: var(--color-text); }
.obs-dm-meta { font-family: var(--font-body); font-size: 10px; fill: var(--color-neutral-700); }
.obs-dm-edge { fill: none; stroke: var(--color-accent-300); stroke-width: 1.4; }
.obs-dm-edge-self { fill: none; stroke: var(--color-neutral-300); stroke-width: 1.4; }
.obs-dm-pfeil { fill: var(--color-accent-300); }
@media (max-width: 720px) { .obs-dm-wrap { padding-inline: 24px; } }

.obs-kpis-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .obs-kpis-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .obs-kpis-5 { grid-template-columns: 1fr; } }

.obs-dm-kopf { fill: var(--color-accent-100); }
.obs-dm-trenn { stroke: var(--color-divider); stroke-width: 1; }
.obs-dm-name { text-anchor: middle; }
.obs-dm-meta { text-anchor: middle; }
.obs-dm-name { font-size: 13px; }
.obs-dm-meta { font-size: 11px; }
.obs-dm-feld { font-family: var(--font-body); font-size: 11px; fill: var(--color-text); text-anchor: start; }
.obs-dm-ziel { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--color-accent-700); text-anchor: end; }
.obs-dm-mehr { font-family: var(--font-body); font-size: 10px; font-style: italic; fill: var(--color-neutral-700); text-anchor: start; }

/* --- Datenmodell: aufklappbare Entitätskarten -------------------------- */
.obs-ent-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.obs-ent { padding: 0; }
.obs-ent > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
}
.obs-ent > summary::-webkit-details-marker { display: none; }
.obs-ent > summary:hover { background: var(--color-neutral-100); }
.obs-ent[open] > summary { border-bottom: 1px solid var(--color-neutral-200); }
.obs-ent-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.obs-ent-zahl { font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }
.obs-ent-tab { grid-column: 1 / -1; font-size: 11px; color: var(--color-neutral-700); margin: 0; letter-spacing: .04em; }
.obs-ent > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.obs-fields { padding: 10px 24px 18px; }
.obs-ent-leer { padding: 10px 24px 18px; }

/* --- Builder: zweispaltige Arbeitsfläche ------------------------------- */
.obs-bld {
  display: grid;
  grid-template-columns: 440px 1fr;
  height: calc(100vh - 64px);
  border-top: 1px solid var(--color-divider);
}
@media (max-width: 1100px) {
  .obs-bld { grid-template-columns: 1fr; height: auto; }
  .obs-bld-vorschau { height: 70vh; }
}

/* Linke Spalte: Chat */
.obs-bld-chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-right: 1px solid var(--color-divider);
  min-height: 0;
  background: #fff;
}
.obs-bld-kopf {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
  display: grid;
  gap: 2px;
}
.obs-bld-kopf h2 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
}
.obs-bld-kopf p { margin: 0; font-size: 12px; color: var(--color-neutral-700); }

.obs-bld-verlauf {
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  scroll-behavior: smooth;
}

.obs-bld-nachricht { display: grid; gap: 4px; max-width: 100%; }
.obs-bld-von {
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  font-weight: 700;
}
.obs-bld-text {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.obs-bld-nachricht.ist-kunde .obs-bld-text {
  background: var(--color-neutral-100);
  border-radius: 10px;
  padding: 10px 14px;
}
.obs-bld-nachricht.ist-fehler .obs-bld-text {
  border-left: 3px solid #c0392b;
  padding-left: 12px;
  color: #c0392b;
}

/* Werkzeugschritte */
.obs-bld-schritte { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.obs-bld-schritt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-700);
  background: #fff;
}
.obs-bld-schritt::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-neutral-300);
}
.obs-bld-schritt.ist-laufend { border-color: var(--color-accent-300); color: var(--color-accent-700); }
.obs-bld-schritt.ist-laufend::before { background: var(--color-accent); animation: obs-bld-puls 1.1s ease-in-out infinite; }
.obs-bld-schritt.ist-fertig::before { background: var(--color-accent); }
.obs-bld-schritt.ist-fehler { border-color: #e6b0aa; color: #c0392b; }
.obs-bld-schritt.ist-fehler::before { background: #c0392b; }
@keyframes obs-bld-puls { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Eingabe */
.obs-bld-eingabe {
  border-top: 1px solid var(--color-divider);
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
}
.obs-bld-eingabe textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  min-height: 64px;
  max-height: 180px;
}
.obs-bld-eingabe textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.obs-bld-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.obs-bld-hinweis { font-size: 11px; color: var(--color-neutral-700); }

/* Rechte Spalte: Vorschau */
.obs-bld-vorschau { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: var(--color-neutral-100); }
.obs-bld-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-divider);
  background: #fff;
}
.obs-bld-adresse {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  border-radius: 6px;
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obs-bld-vorschau iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* --- HostHeader: Absprung in den Builder und Anlegeformular ------------ */
.btn-sm { padding: 5px 12px; font-size: 12px; }

.obs-hh-neu { margin-top: 22px; border-top: 1px solid var(--color-divider); padding-top: 18px; }
.obs-hh-neu > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.obs-hh-neu > summary::-webkit-details-marker { display: none; }
.obs-hh-neu > summary::before { content: "+"; color: var(--color-accent); font-weight: 800; }
.obs-hh-neu[open] > summary::before { content: "\2013"; }

.obs-hh-form { display: grid; gap: 18px; margin-top: 18px; max-width: 940px; }

.obs-hh-wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.obs-hh-opt-wahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}
.obs-hh-opt-wahl:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-weight: 600;
}

.obs-hh-feld { display: grid; gap: 6px; }
/* [hidden] wirkt nur, wenn es display gewinnt — grid würde es sonst überstimmen. */
.obs-hh-feld[hidden] { display: none; }
.obs-hh-opt-wahl span { white-space: nowrap; }
.obs-hh-feld > label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-neutral-700);
}
.obs-hh-zusammen {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  overflow: hidden;
  max-width: 520px;
  background: #fff;
}
.obs-hh-zusammen:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-100); }
.obs-hh-zusammen input { border: 0; outline: none; flex: 1; min-width: 0; }
.obs-hh-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--color-neutral-100);
  border-left: 1px solid var(--color-neutral-200);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--color-neutral-700);
  white-space: nowrap;
}

.obs-hh-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 20px;
}
.obs-hh-spalten label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-neutral-700);
}

.obs-hh-form input,
.obs-hh-form select {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  width: 100%;
}
.obs-hh-form select:focus,
.obs-hh-form > .obs-hh-feld > input:focus,
.obs-hh-spalten input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.obs-hh-opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.obs-hh-hilfe { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-neutral-700); max-width: 620px; }

.obs-hh-aktion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.obs-hh-meldung { font-size: 13px; color: var(--color-neutral-700); }

.obs-hh-warnung {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  border-left: 3px solid var(--color-neutral-300);
  padding-left: 12px;
  max-width: 720px;
}
.obs-hh-warnung code { font-family: ui-monospace, monospace; }

.obs-hh-teil { display: grid; gap: 6px; align-content: start; }
.obs-hh-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-neutral-700);
}
.obs-hh-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  color: var(--color-accent-700);
}
.obs-hh-check input { width: auto; margin: 0; }
.obs-hh-teil [hidden] { display: none; }
.obs-hh-leer { color: var(--color-text-muted, #6b7280); font-size: .8125rem; }
.obs-bld-ssl { display: inline-flex; align-items: center; gap: .375rem; margin-left: auto; margin-right: .75rem; font-size: .8125rem; color: var(--color-text-muted, #6b7280); white-space: nowrap; }
.obs-bld-ssl input { width: auto; margin: 0; }
.obs-bld-reiter { display: inline-flex; gap: .25rem; }
.obs-bld-rknopf { border: 0; background: transparent; padding: .3125rem .625rem; border-radius: .25rem; font: inherit; font-size: .8125rem; color: var(--color-text-muted, #6b7280); cursor: pointer; }
.obs-bld-rknopf:hover { background: rgba(0, 0, 0, .04); }
.obs-bld-rknopf.ist-aktiv { background: var(--color-accent-600, #0ea5e9); color: #fff; }
.obs-bld-werkzeuge { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; min-width: 0; }
.obs-bld-werkzeuge[hidden] { display: none; }
#obsbld-rahmen[hidden] { display: none; }
.obs-bld-editor { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.obs-bld-editor[hidden] { display: none; }
.obs-bld-ed-leiste { display: flex; align-items: flex-end; gap: .625rem; flex-wrap: wrap; padding: .625rem .75rem; border-bottom: 1px solid var(--color-line, #e5e7eb); }
.obs-bld-wahl { display: flex; flex-direction: column; gap: .1875rem; font-size: .75rem; color: var(--color-text-muted, #6b7280); }
.obs-bld-wahl[hidden] { display: none; }
.obs-bld-wahl select { font-size: .8125rem; padding: .25rem .375rem; max-width: 14rem; }
.obs-bld-wahl-breit select { max-width: 22rem; }
.obs-bld-ed-feld { flex: 1 1 auto; min-height: 0; overflow: auto; }
.obs-bld-ed-feld textarea { width: 100%; height: 100%; min-height: 24rem; border: 0; padding: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.5; resize: none; }
.obs-bld-ed-feld .CodeMirror { height: 100%; min-height: 24rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }
.obs-bld-ed-status { margin: 0; padding: .5rem .75rem; border-top: 1px solid var(--color-line, #e5e7eb); font-size: .75rem; color: var(--color-text-muted, #6b7280); }
.obs-bld-ed-status.ist-fehler { color: #b91c1c; }
.obs-bld-ed-status.ist-warnung { color: #b45309; }
.obs-bld-ed-status.ist-gut { color: #15803d; }
.obs-bld-vorschau > #obsbld-rahmen, .obs-bld-vorschau > .obs-bld-editor { grid-row: 2; grid-column: 1; min-height: 0; }
.obs-bld-ed-inhalt { display: flex; flex: 1 1 auto; min-height: 0; }
.obs-bld-baum { flex: 0 0 16rem; width: 16rem; overflow: auto; padding: .5rem .375rem; border-right: 1px solid var(--color-line, #e5e7eb); font-size: .8125rem; }
.obs-bld-baum-liste { list-style: none; margin: 0; padding: 0 0 0 .75rem; }
.obs-bld-baum > .obs-bld-baum-liste { padding-left: 0; }
.obs-bld-baum-liste li { position: relative; }
.obs-bld-baum-liste .obs-bld-baum-liste { border-left: 1px solid var(--color-line, #e5e7eb); margin-left: .375rem; }
.obs-bld-knoten { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; padding: .1875rem .375rem; border-radius: .25rem; cursor: pointer; color: inherit; }
.obs-bld-knoten:hover { background: rgba(0, 0, 0, .05); }
.obs-bld-knoten.ist-gewaehlt { background: var(--color-accent-600, #0ea5e9); color: #fff; }
.obs-bld-knoten-zahl { font-size: .6875rem; opacity: .6; }
.obs-bld-wahl-breit { display: none; }


/* ---------- Skills: Uebersicht und Werkstatt ---------- */

.obs-skl-meldung { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--color-accent-100); color: var(--color-accent-900); font-size: .95rem; }
.obs-skl-meldung.ist-fehler { background: #fdecec; color: #8a1c1c; }
.obs-skl-kopf-rechts { display: flex; align-items: center; gap: 12px; }

.obs-skl-raster { display: grid; grid-template-columns: 440px 1fr; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .obs-skl-raster { grid-template-columns: 1fr; } }

.obs-skl-chat { display: flex; flex-direction: column; min-height: 520px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 12px; padding: 16px; }
.obs-skl-chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.obs-skl-chat-kopf h2 { margin: 0; font-size: 1.05rem; }
.obs-skl-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.obs-skl-nachricht { padding: 12px 14px; border-radius: 10px; background: var(--color-neutral-100); }
.obs-skl-nachricht p { margin: 0 0 8px; }
.obs-skl-nachricht p:last-child { margin-bottom: 0; }
.obs-skl-von-assistent { background: var(--color-accent-100); }
.obs-skl-eingabe { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; align-items: end; }
.obs-skl-eingabe textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--color-divider); border-radius: 8px; font: inherit; }

.obs-skl-arbeit { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 12px; padding: 16px; }
.obs-skl-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .obs-skl-felder { grid-template-columns: 1fr; } }
.obs-skl-feld { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.obs-skl-feld > span { font-weight: 600; }
.obs-skl-feld input[type="text"], .obs-skl-feld input[type="number"], .obs-skl-feld select, .obs-skl-feld textarea { padding: 9px 10px; border: 1px solid var(--color-divider); border-radius: 8px; font: inherit; width: 100%; }
.obs-skl-feld small { color: var(--color-neutral-700); }
.obs-skl-feld-breit { grid-column: 1 / -1; }
.obs-skl-check { flex-direction: row; align-items: center; gap: 8px; }
.obs-skl-check input { width: auto; }

.obs-skl-inhalt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.obs-skl-zaehler { font-variant-numeric: tabular-nums; color: var(--color-neutral-700); font-size: .9rem; }
.obs-skl-inhalt { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; padding: 12px; border: 1px solid var(--color-divider); border-radius: 8px; resize: vertical; }

.obs-skl-ptab { margin-bottom: 24px; }
.obs-skl-pform { border-top: 1px solid var(--color-divider); padding-top: 16px; }
.obs-skl-pform h3 { margin: 0 0 12px; font-size: 1rem; }
.obs-skl-pform-aktion { display: flex; gap: 8px; margin-top: 16px; }


/* Vom Assistenten gefüllte Felder und Markdown im Chat */

.obs-skl-feld.ist-geaendert input, .obs-skl-feld.ist-geaendert textarea, .obs-skl-feld.ist-geaendert select, textarea.obs-skl-inhalt.ist-geaendert { border-color: var(--color-accent-500); background: var(--color-accent-100); }
.obs-skl-feld.ist-geaendert > span::after { content: " · Vorschlag"; color: var(--color-accent-700); font-weight: 400; }
.obs-skl-nachricht h4 { margin: 0 0 6px; font-size: .95rem; }
.obs-skl-nachricht ul { margin: 0 0 8px; padding-left: 18px; }
.obs-skl-nachricht li { margin: 2px 0; }
.obs-skl-nachricht code { background: var(--color-neutral-200); padding: 1px 4px; border-radius: 4px; font-size: .88em; }
.obs-skl-nachricht p { margin: 0 0 8px; }
.obs-skl-nachricht p:last-child, .obs-skl-nachricht ul:last-child { margin-bottom: 0; }


/* Reiter Skills im Builder */

.obs-bld-skills { overflow-y: auto; padding: 20px; background: var(--color-surface); }
.obs-bld-sk-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.obs-bld-sk-kopf h2 { margin: 0 0 4px; font-size: 1.1rem; }
.obs-bld-sk-liste { display: flex; flex-direction: column; gap: 12px; }
.obs-bld-sk { border: 1px solid var(--color-divider); border-radius: 10px; padding: 12px 14px; }
.obs-bld-sk.ist-aktiv { border-color: var(--color-accent-500); background: var(--color-accent-100); }
.obs-bld-sk-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.obs-bld-sk-name { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.obs-bld-sk > p { margin: 6px 0 0; }
.obs-bld-sk-parameter { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); display: grid; gap: 10px; }
.obs-bld-sk-feld { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.obs-bld-sk-feld > span { font-weight: 600; }
.obs-bld-sk-feld input, .obs-bld-sk-feld select, .obs-bld-sk-feld textarea { padding: 8px 10px; border: 1px solid var(--color-divider); border-radius: 8px; font: inherit; width: 100%; }
.obs-bld-sk-feld small { color: var(--color-neutral-700); }


/* Sitzungsauswahl und Verbrauchsbalken */

.obs-bld-sitzungen { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.obs-bld-sitzungen select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--color-divider); border-radius: 8px; font: inherit; font-size: .88rem; background: var(--color-surface); }
.obs-bld-budget { margin-top: 10px; }
.obs-bld-budget-balken { height: 6px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.obs-bld-budget-balken span { display: block; height: 100%; width: 0; background: var(--color-accent-500); transition: width .3s; }
.obs-bld-budget.ist-knapp .obs-bld-budget-balken span { background: #d98324; }
.obs-bld-budget.ist-voll .obs-bld-budget-balken span { background: #b3261e; }
.obs-bld-budget-text { margin: 4px 0 0; font-size: .8rem; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.obs-bld-budget.ist-voll .obs-bld-budget-text { color: #b3261e; }
/* Gitterkinder haben min-width: auto — die Eingabe war dadurch breiter als ihre
   Spalte und lief in die Vorschau hinein. */
.obs-bld-chat, .obs-bld-chat > * { min-width: 0; }
.obs-bld-vorschau, .obs-bld-vorschau > * { min-width: 0; }
/* Vorschau im eigenen Fenster */
/* Ohne iframe braucht die Chatspalte nicht mehr schmal zu sein. */
.obs-bld { grid-template-columns: minmax(360px, 30%) 1fr; }
.obs-bld-werkzeuge { display: inline-flex; }
/* Dateien im Chat */
.obs-bld-anhaenge { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.obs-bld-anhaenge[hidden] { display: none; }
.obs-bld-anhang { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border: 1px solid var(--color-line, #e5e7eb); border-radius: 999px; font-size: .75rem; background: #fff; }
.obs-bld-anhang.ist-laufend { opacity: .6; }
.obs-bld-anhang.ist-fehler { border-color: #fca5a5; color: #b91c1c; }
.obs-bld-anhang-weg { border: 0; background: transparent; cursor: pointer; font: inherit; line-height: 1; padding: 0 .125rem; color: inherit; opacity: .6; }
.obs-bld-anhang-weg:hover { opacity: 1; }
.obs-bld-chat.ist-ziel { outline: 2px dashed var(--color-accent-600, #0ea5e9); outline-offset: -6px; }

/* ==========================================================================
   Auffrischung 18.08.2026 — ruhig und werkzeughaft
   Bewusst eine Schicht am Ende statt eines Umbaus: die Regeln oben bleiben
   stehen, hier werden nur die Werte neu gesetzt, die den Eindruck ausmachen.
   Kern der Sache: der bisherige Grundton hat einen Blaustich, wodurch Weiß
   darauf schmutzig wirkt. Grund fast weiß, Karten echtes Weiß, Trennung
   durch Haarlinien statt durch Flächen.
   ========================================================================== */
:root {
  --color-bg: #fbfcfd;
  --color-surface: #ffffff;
  --color-divider: #e3e9ee;
  --color-line: #e3e9ee;
  --color-text: #16212b;
  --color-text-muted: #677784;
  --color-still: #93a1ac;
  --color-neutral-100: #fbfcfd;
  --color-neutral-200: #f4f7f9;
  --color-neutral-300: #e3e9ee;
  --color-neutral-700: #677784;
  --color-neutral-800: #3a4a56;
  --color-neutral-900: #16212b;
  --color-accent-600: #1173ad;
  --color-accent-700: #0e5f8f;
}

body { background: var(--color-bg); color: var(--color-text); }

/* Knöpfe: drei Stufen, eine Höhe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; line-height: 1;
  border: 1px solid transparent; border-radius: 6px;
  font-size: 13.5px; font-weight: 500;
}
.btn-primary { background: var(--color-accent-500); border-color: var(--color-accent-500); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-secondary { background: #fff; color: var(--color-text); border-color: #cdd6de; }
.btn-secondary:hover { background: var(--color-neutral-200); }
.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-neutral-200); color: var(--color-text); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Kopf- und Seitenkopfzeile */
.obs-header { background: #fff; border-bottom: 1px solid var(--color-divider); }
.obs-page-head { background: #fff; border-bottom: 1px solid var(--color-divider); padding: 24px 28px 18px; }
.obs-page-head h1 { font-size: 24px; letter-spacing: -0.015em; }
.obs-eyebrow, .obs-kicker-muted {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-still);
}

/* Reiter: Unterstrich statt gefüllter Pille */
.obs-tabs { display: flex; gap: 4px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--color-divider); }
.obs-tab {
  border: 0; background: none; border-radius: 0; font-size: 13.5px; font-weight: 400;
  color: var(--color-text-muted); padding: 10px 10px 9px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.obs-tab:hover { background: none; color: var(--color-text); }
.obs-tab.is-active, .obs-tab[aria-selected="true"] {
  background: none; color: var(--color-text); font-weight: 500;
  border-bottom-color: var(--color-accent-500);
}

/* Tabellen: keine senkrechten Linien, Zahlen mit gleicher Breite */
.obs-table { background: #fff; border-collapse: collapse; }
.obs-table th {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  color: var(--color-still); padding: 8px 16px; border-bottom: 1px solid var(--color-divider);
}
.obs-table td { padding: 11px 16px; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.obs-table tbody tr:hover { background: var(--color-neutral-100); }
.obs-num { font-variant-numeric: tabular-nums; }
.obs-cell-sub { font-size: 12.5px; color: var(--color-text-muted); }

/* Kennzahlen: eine Leiste mit Haarlinien, keine einzelnen Kästen */
.obs-kpis, .obs-kpis-5 { background: #fff; border: 1px solid var(--color-divider); border-radius: 6px; gap: 0; overflow: hidden; }
.obs-kpi { background: none; border: 0; border-right: 1px solid var(--color-divider); border-radius: 0; padding: 14px 16px; }
.obs-kpi:last-child { border-right: 0; }
.obs-kpi-value { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.obs-kpi-label { font-size: 12px; color: var(--color-text-muted); }
.obs-kpi-note { font-size: 11.5px; color: var(--color-still); }

/* --- Auffrischung, Teil 2: Builder ---------------------------------------- */
.obs-bld { border-top: 1px solid var(--color-divider); }
.obs-bld-chat { background: #fff; border-right: 1px solid var(--color-divider); }
.obs-bld-kopf { padding: 12px 16px 10px; border-bottom: 1px solid var(--color-divider); }
.obs-bld-kopf h2 { font-size: 15px; letter-spacing: -0.01em; }

/* Der Assistent bekommt keine Sprechblase: bei langen Absätzen liest sich
   Fließtext ruhiger als eine getönte Fläche. Nur der Kunde wird hinterlegt. */
.obs-bld-von { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-still); }
.obs-bld-text { font-size: 14px; line-height: 1.6; }
.obs-bld-nachricht.ist-kunde .obs-bld-text { background: #e8f3fa; border-radius: 6px; padding: 9px 12px; }
.obs-bld-nachricht.ist-fehler .obs-bld-text { background: #fdeceb; border-radius: 6px; padding: 9px 12px; color: #8f1d16; }
.obs-bld-schritt { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--color-neutral-200); color: var(--color-text-muted); }

.obs-bld-vorschau-kopf { height: 44px; padding: 0 12px 0 16px; background: #fff; border-bottom: 1px solid var(--color-divider); }
.obs-bld-rknopf {
  border-radius: 0; padding: 10px 10px 9px; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.obs-bld-rknopf:hover { background: none; color: var(--color-text); }
.obs-bld-rknopf.ist-aktiv { background: none; color: var(--color-text); font-weight: 500; border-bottom-color: var(--color-accent-500); }
.obs-bld-adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-text-muted);
  background: var(--color-neutral-200); border: 1px solid var(--color-divider);
  border-radius: 6px; padding: 3px 8px;
}
.obs-bld-ssl { font-size: 12.5px; color: var(--color-text-muted); }

.obs-bld-ed-leiste { background: var(--color-neutral-200); padding: 9px 16px; border-bottom: 1px solid var(--color-divider); }
.obs-bld-wahl select { height: 28px; border: 1px solid #cdd6de; border-radius: 6px; background: #fff; font-size: 13px; }
.obs-bld-baum { border-right: 1px solid var(--color-divider); padding: 8px 6px; }
.obs-bld-knoten { font-size: 13px; padding: 3px 7px; border-radius: 4px; }
.obs-bld-knoten:hover { background: var(--color-neutral-200); }
.obs-bld-knoten.ist-gewaehlt { background: #e8f3fa; color: var(--color-accent-700); font-weight: 500; }
.obs-bld-knoten-zahl { color: var(--color-still); opacity: 1; font-variant-numeric: tabular-nums; }
.obs-bld-ed-status { background: var(--color-neutral-200); border-top: 1px solid var(--color-divider); font-size: 12px; }

.obs-bld-eingabe { border-top: 1px solid var(--color-divider); padding: 12px 16px 14px; }
.obs-bld-eingabe textarea { border: 1px solid #cdd6de; border-radius: 6px; font-size: 14px; padding: 9px 11px; }
.obs-bld-eingabe textarea:focus { outline: 2px solid #e8f3fa; border-color: var(--color-accent-500); }
.obs-bld-hinweis { font-size: 11.5px; color: var(--color-still); }
.obs-bld-anhang { border-radius: 6px; border-color: var(--color-divider); background: #fff; }

/* Fußzeile: dieselbe Farbe, nur nicht mehr so wuchtig */
.obs-footer { padding-top: 22px; padding-bottom: 22px; font-size: 13px; }

/* --- Auffrischung, Teil 3: Lesebreite ------------------------------------ */
/* Auf einem 27-Zoll-Schirm lief eine Tabelle über 2.300 Pixel und die letzte
   Spalte stand einsam am rechten Rand. Flächen bleiben randlos, nur der Inhalt
   bekommt eine Lesebreite. Der Builder ist absichtlich nicht dabei, der soll
   den ganzen Schirm haben. */
main > .obs-page-head,
main > .obs-tabs,
main > .obs-kpis,
main > .obs-section,
main > .obs-tabpanel {
  padding-inline: max(28px, calc((100% - 1360px) / 2));
}

/* Kennzahlen als randloses Band statt als Kasten */
.obs-kpis, .obs-kpis-5 {
  border: 0; border-radius: 0; border-bottom: 1px solid var(--color-divider);
  background: #fff; gap: 0;
}
.obs-kpi { border-right: 1px solid var(--color-divider); }
.obs-kpi:last-child { border-right: 0; }
.obs-kpi-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-still); }
.obs-kpi-value { margin-top: 2px; }

.obs-section { background: #fff; padding-block: 18px 22px; border-bottom: 1px solid var(--color-divider); }
.obs-tabpanel { background: #fff; padding-block: 18px 24px; }

/* Die Tabelle sitzt jetzt in der Lesebreite, ihre Zellen brauchen keinen
   zusätzlichen Seitenabstand mehr */
.obs-section > .obs-table th:first-child, .obs-section > .obs-table td:first-child,
.obs-tabpanel .obs-table th:first-child, .obs-tabpanel .obs-table td:first-child { padding-left: 0; }
.obs-section > .obs-table th:last-child, .obs-section > .obs-table td:last-child,
.obs-tabpanel .obs-table th:last-child, .obs-tabpanel .obs-table td:last-child { padding-right: 0; }


/* --- Auffrischung, Teil 5: öffentliche Startseite ----------------------- */
.obs-hero-main { padding: 64px 56px 60px; }
.obs-hero-main h1 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.obs-hero-lead { font-size: 16.5px; color: var(--color-text-muted); max-width: 46ch; }
.obs-hero-facts { border-left: 1px solid var(--color-divider); background: #fff; }
.obs-fact { border-bottom: 1px solid var(--color-divider); padding: 28px 34px; }
.obs-fact:last-child { border-bottom: 0; }
.obs-fact-value { font-size: 30px; letter-spacing: -0.025em; }
.obs-fact-label { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }

/* Die Siegel waren blau umrandet und zogen mehr Blick als die Überschrift */
.obs-trust .tag, .tag.tag-outline {
  border: 1px solid var(--color-divider); background: #fff; color: var(--color-text-muted);
  border-radius: 999px; font-size: 11.5px; padding: 3px 9px; font-weight: 400;
}

.obs-steps { background: #fff; border-top: 1px solid var(--color-divider); }
.obs-step { border-right: 1px solid var(--color-divider); padding: 26px 34px; }
.obs-step:last-child { border-right: 0; }
.obs-step-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-accent-500); }
.btn-lg { height: 38px; padding: 0 16px; font-size: 14.5px; }

/* --- Dateipflege im Builder ---------------------------------------------- */
.obs-bld-dateien { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.obs-bld-dateien[hidden] { display: none; }
.obs-bld-dt-leiste { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 9px 16px; background: var(--color-neutral-200); border-bottom: 1px solid var(--color-divider); }
.obs-bld-dt-leiste input { height: 28px; border: 1px solid #cdd6de; border-radius: 6px; background: #fff; font: inherit; font-size: 13px; padding: 0 8px; min-width: 14rem; }
.obs-bld-dt-rechts { margin-left: auto; display: flex; gap: 6px; }
.obs-bld-dt-flaeche { overflow: auto; min-height: 0; padding: 10px 16px 16px; }
.obs-bld-dt-flaeche.ist-ziel { outline: 2px dashed var(--color-accent-500); outline-offset: -8px; background: #f7fbfe; }
.obs-bld-dt-liste { display: flex; flex-direction: column; }
.obs-bld-dt-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--color-divider); }
.obs-bld-dt-zeile:hover { background: var(--color-neutral-100); }
.obs-bld-dt-bild { flex: 0 0 44px; width: 44px; height: 34px; border: 1px solid var(--color-divider); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Breite Bilder wurden sonst zu 42x13 Pixel schmalen Streifen */
.obs-bld-dt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obs-bld-dt-bild.ist-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--color-still); text-transform: uppercase; }
.obs-bld-dt-mitte { min-width: 0; flex: 1 1 auto; }
.obs-bld-dt-pfad { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--color-text); cursor: pointer; text-align: left; }
.obs-bld-dt-pfad:hover { color: var(--color-accent-700); text-decoration: underline; }
.obs-bld-dt-unter { font-size: 11.5px; color: var(--color-still); margin-top: 1px; }
.obs-bld-dt-tun { flex: 0 0 auto; }
.obs-bld-dt-leer { font-size: 13px; color: var(--color-still); padding: 12px 4px; }
.obs-bld-dt-status { margin: 0; padding: 7px 16px; border-top: 1px solid var(--color-divider); background: var(--color-neutral-200); font-size: 12px; color: var(--color-text-muted); }
.obs-bld-dt-status.ist-fehler { color: #b3261e; }
.obs-bld-dt-status.ist-warnung { color: #9a6207; }
.obs-bld-dt-status.ist-gut { color: #3f7d20; }

/* --- Angemeldet: Name und Abmelden statt „Anmelden" ---------------------- */
.obs-konto { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.obs-konto-name { font-weight: 500; color: var(--color-text); }
.obs-konto-name:hover { background: var(--color-neutral-200); }

/* --- Administration 18.08.2026 ----------------------------------------- */
.obs-adm-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.obs-adm-status {
  color: var(--color-text-muted);
  font-size: .9rem;
}
.obs-adm-aktionen .btn-ghost { color: #a3342a; }
.obs-adm-aktionen .btn[hidden] { display: none; }

/* ==========================================================================
   Profil- und Anmeldeseite
   Beide Seiten kommen aus mitgelieferten Vorlagen mit Bootstrap-Klassen.
   Bootstrap ist im Studio-Auftritt nicht eingebunden, deshalb standen die
   Formulare bisher völlig ungestylt da. Hier bekommen genau diese Klassen
   unser Aussehen — der Rest des Auftritts benutzt sie nicht.
   ========================================================================== */
main > .wrapper { padding-inline: max(28px, calc((100% - 1360px) / 2)); padding-block: 24px 32px; }
main > .wrapper > header { margin-bottom: 16px; }
main > .wrapper > header h2 { font-size: 24px; letter-spacing: -0.015em; margin: 0; }

main > .wrapper.content-sm { max-width: 25rem; margin-inline: auto; padding-inline: 28px; padding-block: 56px 64px; }
main > .wrapper.content-sm header h2 { font-size: 22px; }

.card { background: #fff; border: 1px solid var(--color-divider); border-radius: 8px; }
.card.shadow { box-shadow: 0 1px 2px rgba(22, 33, 43, .05); }
.card > form, .pane-body { padding: 18px 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--color-divider); background: var(--color-neutral-100); border-radius: 0 0 8px 8px; }
.card-footer.text-end { text-align: right; }

.nav-tabs { display: flex; gap: 4px; margin: 0; padding: 0 16px; list-style: none; border-bottom: 1px solid var(--color-divider); }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link {
  border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--color-text-muted);
  padding: 10px 10px 9px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--color-text); }
.nav-tabs .nav-link.active { color: var(--color-text); font-weight: 500; border-bottom-color: var(--color-accent-500); }

.tab-pane { display: none; }
.tab-pane.show { display: block; }

.row, .row-75 { display: flex; flex-wrap: wrap; gap: 18px 20px; }
.row > [class^="col-"], .row-75 > [class^="col-"] { flex: 1 1 15rem; min-width: 0; }
.col-12 { flex-basis: 100%; }
.input-container { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 11.5px; letter-spacing: .03em; color: var(--color-still); }
.form-control {
  width: 100%; height: 34px; border: 1px solid #cdd6de; border-radius: 6px;
  background: #fff; font: inherit; font-size: 14px; padding: 0 10px; color: var(--color-text);
}
.form-control:focus { outline: 2px solid #e8f3fa; border-color: var(--color-accent-500); }
.animated-border { display: none; }

.userprofile .card { max-width: 46rem; }


/* --------------------------------------------------------------------------
   Anmeldeseite
   Die Vorlage setzt am body die Klasse page-centered und legt die Karte in
   .wrapper.content-sm. Zwei Dinge fehlten: die Karte erbte das Innenmass
   der breiten Baender (padding-inline aus der Rechnung oben) und wurde
   dadurch auf Nullbreite gequetscht, und der Fuss hing bei der kurzen
   Seite mitten im Bild. Beides hier geradegezogen.
   -------------------------------------------------------------------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

body.page-centered > main { display: flex; align-items: center; justify-content: center; }
body.page-centered > main > .wrapper.content-sm { width: 100%; padding-block: 24px 72px; }

main > .wrapper.content-sm > .centered > header { text-align: center; margin-bottom: 18px; }
main > .wrapper.content-sm .card { padding: 26px 24px 24px; }
main > .wrapper.content-sm .card .row { gap: 16px 20px; }
main > .wrapper.content-sm .btn { width: 100%; justify-content: center; height: 36px; }


/* ==========================================================================
   Marketingseiten 19.08.2026 — Startseite, Funktionen, Preise, Ablauf,
   Sicherheit
   Eigener Abschnitt am Ende, nichts oben drüber wird geändert. Wer die
   Marketingseiten wieder loswerden will, schneidet diesen Block heraus.
   Präfix durchgehend .obs-mk-.
   ========================================================================== */

/* Lesebreite: dieselbe Rechnung wie bei den App-Flächen (Auffrischung Teil 3),
   damit Marketing- und App-Seiten auf breiten Schirmen gleich sitzen. */
main > .obs-mk-band,
main > .obs-mk-kopf,
main > .obs-mk-cta {
  padding-inline: max(28px, calc((100% - 1360px) / 2));
}

/* --- Fläche und Kopf eines Abschnitts ------------------------------------ */
.obs-mk-band {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  padding-block: 56px 60px;
}
.obs-mk-band.ist-still { background: var(--color-bg); }
.obs-mk-band.ist-eng { padding-block: 36px 40px; }

.obs-mk-kopf { max-width: 62ch; margin-bottom: 36px; }
.obs-mk-kopf h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; }
.obs-mk-kopf h3 { font-size: 20px; margin: 0 0 10px; letter-spacing: -.015em; }
.obs-mk-kopf p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
.obs-mk-kopf.ist-mittig { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Bildrahmen ----------------------------------------------------------- */
.obs-mk-shot {
  border: 1px solid var(--color-divider);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .04), 0 12px 28px -12px rgba(22, 33, 43, .16);
}
.obs-mk-shot img { display: block; width: 100%; height: auto; }
.obs-mk-shot figcaption {
  border-top: 1px solid var(--color-divider);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-neutral-100);
}
.obs-mk-shot.ist-angeschnitten img { object-fit: cover; object-position: top left; max-height: 420px; }
figure.obs-mk-shot { margin: 0; }

/* --- Text neben Bild ------------------------------------------------------ */
.obs-mk-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
}
.obs-mk-split + .obs-mk-split { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--color-divider); }
.obs-mk-split.ist-gedreht .obs-mk-split-text { order: 2; }
.obs-mk-split.ist-gedreht .obs-mk-split-bild { order: 1; }
.obs-mk-split-text h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; }
.obs-mk-split-text p { font-size: 16px; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 16px; text-wrap: pretty; }

/* --- Merkmalsliste mit Haken ---------------------------------------------- */
.obs-mk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.obs-mk-liste li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}
.obs-mk-liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: .52em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--color-accent-500);
  border-bottom: 2px solid var(--color-accent-500);
  transform: translateY(-50%) rotate(-45deg);
}
.obs-mk-liste.ist-still li { color: var(--color-text-muted); }

/* --- Kartenraster --------------------------------------------------------- */
.obs-mk-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.obs-mk-raster.ist-zwei { grid-template-columns: repeat(2, 1fr); }
.obs-mk-raster.ist-vier { grid-template-columns: repeat(4, 1fr); }
.obs-mk-karte { background: #fff; padding: 26px 26px 28px; }
.obs-mk-karte h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; }
.obs-mk-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted); text-wrap: pretty; }
.obs-mk-karte .obs-mk-liste { margin-top: 14px; }
.obs-mk-karte .obs-mk-liste li { font-size: 14px; color: var(--color-text-muted); }
.obs-mk-marke {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--color-accent-500);
  display: block;
  margin-bottom: 12px;
}

/* --- Schritte, senkrecht -------------------------------------------------- */
.obs-mk-ablauf { display: grid; gap: 0; }
.obs-mk-ablauf-schritt {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--color-divider);
}
.obs-mk-ablauf-schritt:last-child { border-bottom: 0; }
.obs-mk-ablauf-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--color-accent-500);
  padding-top: 4px;
}
.obs-mk-ablauf-schritt h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.015em; }
.obs-mk-ablauf-schritt p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); max-width: 68ch; text-wrap: pretty; }
.obs-mk-ablauf-schritt .obs-mk-shot { margin-top: 18px; max-width: 900px; }

/* --- Preise --------------------------------------------------------------- */
.obs-mk-tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: start; gap: 1px; width: fit-content; max-width: 100%; background: var(--color-divider); border: 1px solid var(--color-divider); }
.obs-mk-tarif { background: #fff; padding: 28px 26px 30px; display: flex; flex-direction: column; }
.obs-mk-tarif h3 { font-size: 19px; margin: 0 0 6px; }
.obs-mk-tarif-preis { font-family: var(--font-heading); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.03em; margin: 14px 0 4px; }
.obs-mk-tarif-takt { font-size: 13px; color: var(--color-text-muted); margin: 0 0 18px; }
.obs-mk-tarif .obs-mk-liste { margin-bottom: 22px; }
.obs-mk-tarif .btn { margin-top: auto; align-self: flex-start; }
.obs-mk-tarif.ist-empfohlen { outline: 2px solid var(--color-accent-500); outline-offset: -2px; }

/* --- Hinweiskasten -------------------------------------------------------- */
.obs-mk-hinweis {
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-neutral-200);
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 76ch;
}
.obs-mk-hinweis strong { color: var(--color-text); }
.obs-mk-hinweis + .obs-mk-hinweis { margin-top: 12px; }

/* --- Fragen und Antworten ------------------------------------------------- */
.obs-mk-faq { max-width: 82ch; border-top: 1px solid var(--color-divider); }
.obs-mk-faq details { border-bottom: 1px solid var(--color-divider); }
.obs-mk-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  position: relative;
  font-weight: 600;
  font-size: 16px;
}
.obs-mk-faq summary::-webkit-details-marker { display: none; }
.obs-mk-faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-still);
  border-bottom: 2px solid var(--color-still);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.obs-mk-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.obs-mk-faq summary:hover { color: var(--color-accent-600); }
.obs-mk-faq-text { padding: 0 0 20px; font-size: 15.5px; line-height: 1.62; color: var(--color-text-muted); max-width: 74ch; }
.obs-mk-faq-text p { margin: 0 0 10px; }
.obs-mk-faq-text p:last-child { margin-bottom: 0; }

/* --- Vergleichstabelle ---------------------------------------------------- */
.obs-mk-vergleich { width: 100%; border-collapse: collapse; font-size: 15px; }
.obs-mk-vergleich th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 16px 12px 0;
  border-bottom: 2px solid var(--color-divider);
}
.obs-mk-vergleich td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; line-height: 1.5; }
.obs-mk-vergleich td:first-child { font-weight: 600; width: 30%; }
.obs-mk-vergleich td.ist-still { color: var(--color-text-muted); }

/* --- Abschlussbanner ------------------------------------------------------ */
.obs-mk-cta { background: var(--color-accent-600); color: #fff; padding-block: 64px 68px; }
.obs-mk-cta h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; max-width: 20ch; }
.obs-mk-cta p { font-size: 16.5px; line-height: 1.55; margin: 0 0 26px; max-width: 58ch; color: rgba(255,255,255,.86); }
.obs-mk-cta .obs-kicker { color: rgba(255,255,255,.75); margin-bottom: 18px; }
.obs-mk-cta-aktionen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.obs-mk-cta .btn-invert { background: #fff; color: var(--color-accent-700); border-color: #fff; }
.obs-mk-cta .btn-invert:hover { background: rgba(255,255,255,.88); color: var(--color-accent-700); }
.obs-mk-cta .btn-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.obs-mk-cta .btn-rand:hover { background: rgba(255,255,255,.12); color: #fff; }
.obs-mk-cta a:hover { color: inherit; }
.obs-mk-cta-fein { font-size: 13px; color: rgba(255,255,255,.72); margin: 16px 0 0; }

/* --- Kennzahlenband (Marketing) ------------------------------------------- */
.obs-mk-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.obs-mk-zahl { background: #fff; padding: 22px 24px; }
.obs-mk-zahl-wert { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.025em; margin: 0 0 6px; }
.obs-mk-zahl-text { font-size: 13.5px; color: var(--color-text-muted); margin: 0; line-height: 1.45; }

/* --- Diagramm ------------------------------------------------------------- */
.obs-mk-diagramm { border: 1px solid var(--color-divider); background: #fff; padding: 24px; overflow-x: auto; }
.obs-mk-diagramm svg { display: block; width: 100%; height: auto; min-width: 620px; }

/* --- Hero der Unterseiten ------------------------------------------------- */
.obs-mk-seitenkopf {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  padding-block: 52px 46px;
  padding-inline: max(28px, calc((100% - 1360px) / 2));
}
.obs-mk-seitenkopf h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 16px; max-width: 20ch; }
.obs-mk-seitenkopf p { font-size: 17px; line-height: 1.55; color: var(--color-text-muted); margin: 0; max-width: 62ch; text-wrap: pretty; }
.obs-mk-seitenkopf .obs-mk-cta-aktionen { margin-top: 26px; }

/* --- Hero der Startseite: Bild unter dem Text ----------------------------- */
.obs-mk-heroshot {
  background: var(--color-neutral-200);
  border-bottom: 1px solid var(--color-divider);
  padding-inline: max(28px, calc((100% - 1360px) / 2));
  padding-block: 40px 0;
}
/* Das Bild wird unten angeschnitten statt verkleinert: so bleibt der Chat
   lesbar und der Abschnitt darunter rueckt in Sichtweite. */
.obs-mk-heroshot .obs-mk-shot { border-bottom: 0; max-height: 460px; overflow: hidden; }

/* Die Basisregel begrenzt die Hauptzeile auf 15 Zeichen — fuer die neue
   Ueberschrift zu eng, sie bricht dann nach jedem zweiten Wort. */
.obs-hero-main h1 { max-width: 24ch; }
.obs-mk-seitenkopf h1 { max-width: 24ch; }

/* --- Schmale Schirme ------------------------------------------------------ */
@media (max-width: 900px) {
  .obs-mk-split { grid-template-columns: 1fr; gap: 24px; }
  .obs-mk-split.ist-gedreht .obs-mk-split-text,
  .obs-mk-split.ist-gedreht .obs-mk-split-bild { order: 0; }
  .obs-mk-raster, .obs-mk-raster.ist-zwei, .obs-mk-raster.ist-vier { grid-template-columns: 1fr; }
  .obs-mk-ablauf-schritt { grid-template-columns: 1fr; gap: 6px; }
  .obs-mk-band { padding-block: 36px 40px; }
  .obs-mk-vergleich td:first-child { width: auto; }
}

/* Kopfzeile bricht um statt waagerecht zu scrollen. Auf 390 Pixel lief die
   Navigation vorher aus dem Bild heraus. */
@media (max-width: 760px) {
  .obs-header { flex-wrap: wrap; gap: 14px; padding: 16px 20px; }
  .obs-header-right { flex-wrap: wrap; gap: 16px; row-gap: 10px; }
  .obs-nav ul { flex-wrap: wrap; gap: 16px; row-gap: 8px; }
  .obs-footer { padding: 36px 20px; }
}

/* Stand Marketingseiten: 19.08.2026 */


/* ============================================================
   Registrierungsseite — 19.08.2026
   Karte für /registrierung (Vorlage obsregistrierung).
   Entfernbar: diesen Abschnitt löschen.
   ============================================================ */

.obs-reg { padding: 48px 28px 72px; display: flex; justify-content: center; }

.obs-reg-karte {
  width: 100%;
  max-width: 680px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 36px 36px 32px;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .05), 0 12px 32px -12px rgba(22, 33, 43, .12);
}

.obs-reg-kopf { margin-bottom: 28px; }
.obs-reg-kopf h1 { margin: 0 0 8px; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.015em; }
.obs-reg-lead { margin: 0; color: var(--color-text-muted); font-size: .95rem; line-height: 1.55; }

.obs-reg .obs-skl-meldung:empty { display: none; }
.obs-reg-meldung { margin: 0 0 24px; }

.obs-reg-form { display: flex; flex-direction: column; gap: 28px; }

.obs-reg-gruppe { margin: 0; padding: 0; border: 0; }
.obs-reg-gruppe > legend {
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-divider);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-still);
}

.obs-reg-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.obs-reg-sp2 { grid-column: span 2; }
.obs-reg-sp3 { grid-column: span 3; }
.obs-reg-sp4 { grid-column: span 4; }
.obs-reg-sp6 { grid-column: span 6; }

.obs-reg-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.obs-reg-feld > span { font-size: .8rem; font-weight: 600; color: var(--color-text); }
.obs-reg-feld:has(input[required]) > span::after,
.obs-reg-feld:has(select[required]) > span::after { content: " *"; color: var(--color-accent-600); }

.obs-reg-feld input,
.obs-reg-feld select {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.obs-reg-feld select { padding-right: 8px; }

/* Ersetzt ein style-Attribut aus der Vorlage obskontakt (21.08.2026) — harte Regel:
   keine Stile in Vorlagen und Seiten. Bewusst GENAU das, was dort stand, und nicht
   mehr: der Ort ändert sich, die Gestaltung nicht. Dass das Textfeld anders aussieht
   als die Eingabefelder darüber, war schon vorher so und bleibt eine eigene Frage. */
.obs-reg-feld textarea { font: inherit; width: 100%; }
.obs-reg-feld input:hover,
.obs-reg-feld select:hover { border-color: color-mix(in srgb, var(--color-text) 24%, transparent); }
.obs-reg-feld input:focus,
.obs-reg-feld select:focus {
  outline: none;
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-600) 18%, transparent);
}
.obs-reg-feld input::placeholder { color: var(--color-still); }
.obs-reg-hinweis { font-size: .75rem; line-height: 1.4; color: var(--color-text-muted); }

.obs-reg-abschluss { display: flex; flex-direction: column; gap: 14px; }
.obs-reg-knopf { width: 100%; height: 44px; font-size: 15px; }
.obs-reg-fuss { margin: 0; text-align: center; font-size: .9rem; color: var(--color-text-muted); }
.obs-reg-fuss a { color: var(--color-accent-600); font-weight: 600; text-decoration: none; }
.obs-reg-fuss a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .obs-reg { padding: 28px 16px 48px; }
  .obs-reg-karte { padding: 24px 20px; border-radius: 12px; }
  .obs-reg-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .obs-reg-sp3, .obs-reg-sp4, .obs-reg-sp6 { grid-column: 1 / -1; }
}

/* --- Bildlupe 19.08.2026 --------------------------------------------------
   Die Bildschirmfotos stehen im Fliesstext bei rund 700 Pixeln — darin ist
   kein Menuepunkt mehr zu entziffern. Ein Klick zeigt sie formatfuellend.
   Gehoert zum Marketingblock und faellt mit ihm weg.
   -------------------------------------------------------------------------- */
.obs-mk-shot { position: relative; }
.obs-mk-shot img { cursor: zoom-in; }

.obs-mk-shot::after {
  content: "Klicken zum Vergrößern";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 11.5px;
  line-height: 1;
  padding: 6px 9px;
  background: rgba(22, 33, 43, .78);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.obs-mk-shot:hover::after,
.obs-mk-shot:focus-within::after { opacity: 1; }

html.obs-lupe-offen { overflow: hidden; }

.obs-lupe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 20, 27, .96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px 28px;
  cursor: zoom-out;
}
.obs-lupe img {
  /* Bis 1500 Pixel darf leicht hochskaliert werden — auf einem breiten Schirm
     ist das immer noch schaerfer zu lesen als die 700 Pixel im Fliesstext. */
  width: min(1500px, 96vw);
  height: auto;
  max-height: 84vh;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65);
  cursor: default;
}
.obs-lupe-text {
  margin: 0;
  max-width: 78ch;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.obs-lupe-zu {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  cursor: pointer;
}
.obs-lupe-zu:hover { background: rgba(255, 255, 255, .26); }
.obs-lupe-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 760px) {
  .obs-lupe { padding: 56px 12px 16px; }
  .obs-lupe img { width: 100vw; max-height: 76vh; }
  .obs-mk-shot::after { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Nachtrag 20.08.2026 — Admin-Center, Reiter "Instanz anlegen"
   [hidden] verliert gegen das Raster: .obs-skl-felder setzt display:grid,
   und das gewinnt gegen die display:none der Vorgabe. Gleiches Muster wie
   .obs-hh-feld[hidden] weiter oben.
   Passwort- und Datumsfelder standen ausserhalb der Feldgestaltung und kamen
   deshalb ungestaltet heraus — sichtbar bei ClientSecret (auch im Reiter
   Bereitstellung) und bei "Bestellt am".
   ══════════════════════════════════════════════════════════════════════════ */

.obs-skl-felder[hidden] { display: none; }

.obs-skl-feld input[type="password"],
.obs-skl-feld input[type="date"] {
  padding: 9px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  font: inherit;
  width: 100%;
}


/* ··········································································
   Nachtrag 21.08.2026 — eine Farbe für „geht nicht"

   Die Farbtafel hatte nur Blau (accent) und Grün (accent-2). Jede Warnung im
   Feature-Management stand deshalb in accent-2-700 — und das ist #5c8a2e, also
   GRÜN. Gemessen an der Bedeutung war das falsch herum: „Transport blockiert",
   „Test gefallen", „Tor ist zu" und „Wirklich schreiben" erschienen in der
   Farbe, die sonst Erfolg meint.

   Deshalb eine eigene Familie, und zwar hier in der Tafel und nicht in jeder
   Seitendatei einzeln: wer den Ton ändern will, ändert ihn an dieser Stelle.
   Der Block steht am Ende der Datei und gewinnt damit gegen beide :root-Blöcke
   weiter oben.
   ·········································································· */

:root {
    --color-fehler-100: #fdeaea;
    --color-fehler-500: #d64545;
    --color-fehler-700: #a32626;
}

/* ============================================ Hilfsklassen fuer Seiteninhalte

   Angelegt am 22.08.2026. Anlass: der Server verweigert seit dem Regelwerk jede
   Aenderung an einem Seitenelement, das ein style-Attribut enthaelt ("Harte Regel:
   keine Stile in Vorlagen und Seiten"). Die Marketing- und Rechtstextseiten trugen
   21 solche Attribute - und waren damit gesperrt: man konnte nicht einmal einen Link
   darin aendern.

   Es waren nur NEUN verschiedene Werte. Sie stehen hier eins zu eins, ohne
   Umdeutung, damit das Aufraeumen nichts am Aussehen aendert. Wer eine Klasse
   spaeter anders haben will, aendert sie hier - genau das war der Sinn der Regel.

   Die Namen tragen -u- fuer "Utility": eine Klasse, die genau eine Eigenschaft
   setzt und keine Bedeutung hat. Wer eine BEDEUTUNG braucht (etwa "Rechtstext"),
   soll eine eigene Klasse anlegen und nicht diese hier umdeuten.
   ========================================================================== */

.obs-u-seitenblock { padding-block: 44px 72px; }

.obs-u-lesebreite { max-width: 74ch; }

/* Fuer breite Tabellen: sie scrollen in sich, statt die Seite breit zu machen. */
.obs-u-scrollx { overflow-x: auto; }

.obs-u-luft-16 { margin-top: 16px; }
.obs-u-luft-24 { margin-top: 24px; }
.obs-u-luft-26 { margin-top: 26px; }
.obs-u-luft-28 { margin-top: 28px; }
.obs-u-luft-32 { margin-top: 32px; }

/* Der kleine Nachsatz unter einem Abschnitt - Stand, Quelle, Hinweis. */
.obs-u-fussnote {
  margin-top: 40px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* Die Tabelle der Unterauftragsverarbeiter im AVV. Stand vorher als <style>-Block
   in der Seite selbst - dieselbe Regel, dieselbe Verlegung. Die Klasse steht schon
   im Markup, nur die Regeln lagen an der falschen Stelle. */
.obs-avv-tbl th:last-child,
.obs-avv-tbl td:last-child { text-align: left; }

.obs-avv-tbl td { vertical-align: top; }