/* Das Petrol-Kleid — nach styles.css laden. Seit Stand 47 im Geschwister-Look
 * der neuen Business-Tür: warmes Kartenpapier #FCFAF5 als Grund, die GEMESSENEN
 * Marken-Töne von abis-business.de (#007D83 Haupt / #004750 Logo-Tief — der
 * CD-Wert #008DA2 ist für Flächen zu hell, Claudias Entscheidung 14.07.), und
 * statt des alten Petrol-Wolken-Canvas ein stiller statischer Lichthauch wie
 * auf business.html. Das Layout bleibt styles.css; hier wechseln nur Farbe,
 * Grund und Licht. */

:root {
  --orange: #007D83;        /* gemessenes Haupt-Petrol (Buttons, Akzente, Icons) */
  --orange-hover: #00636A;  /* abgeleitet: Hover/gedrückt */
  --orange-tief: #004750;   /* gemessenes Logo-Petrol (dunkle Links, Texte) */
  --kopf-text: var(--orange-tief); /* Nav-Marke & Überschriften dunkel wie live */
  --hell: #F3EEE6;          /* warm statt kühl — passt zum Papier */
  --linie: #ECE6DD;         /* warme Linien wie auf Karten & Backoffice */
}

/* ---- Papier-Grund: dieselbe Bühne wie die Business-Tür ---- */
body { background: #FCFAF5; }
.kopf { background: rgba(252, 250, 245, .92); border-bottom-color: #ECE6DD; }
.fuss { background: #FCFAF5; }

/* Alter Petrol-Wolken-Canvas raus — der stille Lichthauch der Tür übernimmt.
 * (app.js malt weiter in den Canvas, aber der ist ausgeblendet — bewusst die
 * sanfteste Lösung ohne Eingriff in die gemeinsame Logik.) */
.lichthof { background:
  radial-gradient(52% 44% at 82% 8%, rgba(0, 125, 131, .05), transparent 72%),
  radial-gradient(44% 40% at 16% 4%, rgba(0, 125, 131, .035), transparent 70%); }
.lichthof canvas { display: none; }
.lichthof::after { background: linear-gradient(to bottom, rgba(252, 250, 245, 0) 58%, #FCFAF5 100%); }

::selection { background: rgba(0, 125, 131, .16); }

.form-pille:hover { border-color: rgba(0, 125, 131, .45); }
/* Aktive Format-Pille („Alle Formate", Online, Orte …) in Dunkelpetrol statt
   Grau — die Filterzeile spricht damit dieselbe Sprache wie der Karten-Button. */
.format-pille[aria-pressed="true"] { background: var(--orange-tief); color: #fff; }
.unter-chip:hover { border-color: rgba(0, 125, 131, .4); }
.unter-chip[aria-pressed="true"] { background: #EFF7F8; border-color: var(--orange); color: var(--orange-tief); }

.initial-kreis { background: #EFF7F8; border-color: rgba(0, 125, 131, .35); }
.vertiefen-pill:hover { background: #DCEEF1; }

.pruef-liste-ja li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007D83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.5'/%3E%3C/svg%3E");
}

/* „Platz frei" komplett grün (Claudias Wahl, Stand 43): Text UND Punkt in Grün
   als klares, vertrautes „frei"-Signal. Den Kontrast trägt der dunkelpetrol
   Button — grün und tiefes Petrol beißen sich nicht. */
.status-frei { color: var(--frei); }

/* Karten-Pille „Steckbrief ansehen" (.karte-mail) in Dunkelpetrol — ruhig, tief, wertig.
   Hover hellt leicht auf; Schatten petrolgetönt statt rötlich. */
.karte-mail { background: var(--orange-tief); box-shadow: 0 12px 22px -14px rgba(0, 71, 80, .55); }
.karte-mail:hover { background: var(--orange-hover); }

/* ---- Karten-Feinschliff (nur Akademie) ----------------------------------
   1) Alle Themen-Chips sichtbar (Höhenbegrenzung raus).
   2) Liveberatung-Chip deutlich dezenter — kein Petrol-Rahmen, kein Fettdruck
      mehr; er ordnet sich fast wie ein normaler Chip unter, nur ein Hauch
      heller und mit dünner Linie, damit man ihn beim Suchen trotzdem findet.
   (Serifen-Zitat wieder entfernt — Zitat bleibt in Inter wie überall.
    Fokus-Punkt #008DA2→#007D83 sitzt in styles.css.) */
.karte-chips { max-height: none; overflow: visible; }
body[data-welt="business"] .chip-live,
.welt-business .chip-live {
  background: rgba(0, 125, 131, .08); border: none;
  color: var(--titel); font-weight: 400;
}
body[data-welt="business"] .chip-live:hover {
  background: #fff; color: var(--titel);
  text-decoration: underline; text-underline-offset: 3px;
}