/* Firmensonar Design-System v1 */
:root {
  /* Petrol/Tiefsee mit Signalgrün — siehe brand/BRAND.md */
  --fr-sidebar: #0b2b33;
  --fr-sidebar-hi: #11414e;
  --fr-accent: #0a7d63;        /* Fläche auf hellem Grund, Weiß darauf 5,1:1 */
  --fr-accent-hell: #12a17f;   /* Fläche auf der dunklen Seitenleiste */
  --fr-signal: #3fd6ab;        /* Schrift/Symbol auf dunklem Grund, 8,1:1 */
  --fr-blue: #0b6b7a;
  --fr-bg: #f2f6f6;
  --fr-card: #ffffff;
  --fr-line: #dbe4e6;
  --fr-text: #152229;
  --fr-muted: #5d7078;
  --fr-ok: #2e9e5b;
  --fr-warn: #e0a11e;
  --fr-bad: #cc4433;
  --fr-r: 10px;
  --fr-shadow: 0 1px 3px rgba(18, 35, 63, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fr-bg); color: var(--fr-text);
}
a { color: var(--fr-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
#app { display: flex; min-height: 100vh; }
.fr-side {
  width: 60px; background: var(--fr-sidebar); color: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 10px 0;
  position: sticky; top: 0; height: 100vh;
}
.fr-side .logo { margin-bottom: 18px; }
.fr-side button {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px;
  color: #a3bcc0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  margin: 2px 0;
}
.fr-side button:hover { background: var(--fr-sidebar-hi); color: #fff; }
.fr-side button.active { background: var(--fr-accent-hell); color: #fff; }
.fr-side .spacer { flex: 1; }
.fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-topbar {
  background: #fff; border-bottom: 1px solid var(--fr-line); padding: 0 20px;
  height: 52px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 40;
}
.fr-topbar h1 { font-size: 16px; margin: 0; font-weight: 600; }
.fr-topbar h1 .sub { color: var(--fr-blue); }
.fr-topbar .spacer { flex: 1; }
.fr-content { padding: 18px 20px; flex: 1; }

/* ---- Karten / Tabellen ---- */
.fr-card {
  background: var(--fr-card); border: 1px solid var(--fr-line); border-radius: var(--fr-r);
  box-shadow: var(--fr-shadow); padding: 14px 16px; margin-bottom: 14px;
}
.fr-card h3 { margin: 0 0 10px; font-size: 13.5px; text-transform: none; color: var(--fr-muted); font-weight: 600; }
/* Lange Zeichenketten ohne Leerzeichen — Dateipfade, Adressen, Kennungen — haben
   keine Stelle zum Umbrechen und schoben sich sonst aus der Karte heraus.

   ACHTUNG, Unterschied mit Folgen: „anywhere" zählt auch bei der Berechnung der
   MINDESTBREITE mit. In einer Tabelle hält der Browser dann ein einzelnes Zeichen
   für die schmalstmögliche Spalte — die Spalte „Firma" fiel dadurch auf 50 px
   zusammen und brach Buchstabe für Buchstabe um. „break-word" bricht genauso,
   lässt die Mindestbreite aber unberührt. Deshalb hier ausschließlich break-word. */
.fr-card { overflow-wrap: break-word; }
.fr-table-wrap { overflow-x: auto; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fr-table th {
  text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--fr-line);
  color: var(--fr-muted); font-weight: 600; white-space: nowrap; position: sticky; top: 0;
  background: var(--fr-card); z-index: 2;
}
.fr-table td { padding: 8px 10px; border-bottom: 1px solid var(--fr-line); vertical-align: middle; }
.fr-table tbody tr:nth-child(even) { background: #f7fafa; }
.fr-table tbody tr:hover { background: #e9f2f2; }

/* ---- Bedienelemente ---- */
.fr-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--fr-line); border-radius: var(--fr-r); background: #fff;
  color: var(--fr-text); font-size: 13.5px; cursor: pointer; font-weight: 500;
}
.fr-btn:hover { border-color: #aec4c7; background: #f6f8fb; }
.fr-btn.primary { background: var(--fr-sidebar); border-color: var(--fr-sidebar); color: #fff; }
.fr-btn.primary:hover { background: #0f3a46; }
.fr-btn.accent { background: var(--fr-accent); border-color: var(--fr-accent); color: #fff; }
.fr-btn.danger { color: var(--fr-bad); }
.fr-btn.small { padding: 4px 9px; font-size: 12.5px; border-radius: 8px; }
.fr-btn:disabled { opacity: .5; cursor: default; }
.fr-input, .fr-select, textarea.fr-input {
  padding: 8px 10px; border: 1px solid var(--fr-line); border-radius: 8px; font-size: 13.5px;
  background: #fff; color: var(--fr-text); font-family: inherit; min-width: 0;
}
.fr-input:focus, .fr-select:focus { outline: 2px solid rgba(28, 78, 157, .25); border-color: var(--fr-blue); }
label.fr-label { display: block; font-size: 12.5px; color: var(--fr-muted); margin: 10px 0 4px; font-weight: 600; }

.fr-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #eaf1f1; border-radius: 999px;
  padding: 3px 11px; font-size: 12.5px; margin: 2px 3px 2px 0; white-space: nowrap;
}
.fr-chip .x { cursor: pointer; color: var(--fr-muted); font-weight: 700; }

/* Spalte „Berufe" in den Stellenanzeigen.

   Zwei Probleme steckten hier: Die Bezeichnungen der Bundesagentur werden über
   hundert Zeichen lang und schoben die Tabelle als nicht umbrechende Chips so
   weit auf, dass Kontakt und Aktion aus dem Bild liefen. Und die Pillenform
   selbst passt nur zu einzeiligen Schlagworten — mehrzeilig wird daraus eine
   große grüne Fläche. Deshalb: gedeckelte Spalte und schlichte Aufzählung. */
.fr-berufe { max-width: 260px; }
.fr-beruf {
  position: relative; padding: 2px 0 2px 13px; font-size: 12.5px; line-height: 1.35;
  color: var(--fr-text);
}
.fr-beruf + .fr-beruf { margin-top: 3px; }
.fr-beruf::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--fr-accent); opacity: .55;
}
/* Kontakt: E-Mail-Adressen sind oft lang und brechen von sich aus nicht um. */
.fr-table td a[href^="mailto:"] { overflow-wrap: break-word; }
.fr-chip .x:hover { color: var(--fr-bad); }
.fr-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #eaf1f1; color: var(--fr-text);
}
.fr-badge.ok { background: #dff3e7; color: #1c6e40; }
.fr-badge.bad { background: #f8e3df; color: #a03325; }
.fr-badge.warn { background: #f9efd8; color: #8a6414; }
.fr-badge.blue { background: #e2eafa; color: var(--fr-blue); }

/* Zwischenüberschrift der Filterspalte („Wen suchen Sie?", „Website" …) */
.fr-filter-block {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fr-muted); margin: 14px 0 5px 2px;
}
.fr-filter-block:first-child { margin-top: 4px; }

/* Warnung im Fließtext (z. B. „Filter wurde nicht angewendet") */
.fr-warn {
  background: #f9efd8; color: #8a6414; border: 1px solid #ecd9a8;
  border-radius: 8px; padding: 7px 10px; margin-top: 8px;
}

/* ---- Tabs ---- */
.fr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--fr-line); margin-bottom: 14px; flex-wrap: wrap; }
.fr-tabs button {
  border: 0; background: transparent; padding: 9px 14px; font-size: 13.5px; cursor: pointer;
  color: var(--fr-muted); border-bottom: 2px solid transparent; font-weight: 500;
}
.fr-tabs button:hover { color: var(--fr-text); }
.fr-tabs button.active { color: var(--fr-blue); border-bottom-color: var(--fr-blue); font-weight: 600; }

/* ---- Filter-Sidebar (Suche) ---- */
.fr-filter-group { border: 1px solid var(--fr-line); border-radius: var(--fr-r); margin-bottom: 8px; background: #fff; }
.fr-filter-group > .head {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; user-select: none;
}
.fr-filter-group > .head .cnt {
  background: var(--fr-blue); color: #fff; border-radius: 6px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
}
.fr-filter-group > .head .arrow { margin-left: auto; color: var(--fr-muted); transition: transform .15s; }
.fr-filter-group.open > .head .arrow { transform: rotate(180deg); }
.fr-filter-group.hasval { border-color: var(--fr-blue); }
.fr-filter-group > .body { padding: 4px 12px 12px; border-top: 1px solid var(--fr-line); }

/* ---- Toast / Modal ---- */
#fr-toasts { position: fixed; bottom: 18px; right: 18px; z-index: 300; }
.fr-toast {
  background: var(--fr-sidebar); color: #fff; border-radius: 10px; padding: 10px 16px;
  margin-top: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); font-size: 13.5px; max-width: 360px;
}
.fr-toast.err { background: var(--fr-bad); }
.fr-modal-bg {
  position: fixed; inset: 0; background: rgba(18, 35, 63, .5); z-index: 200;
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px;
}
.fr-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 640px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.fr-modal.wide { max-width: 980px; }
.fr-modal > .head {
  background: var(--fr-sidebar); color: #fff; padding: 13px 18px; font-weight: 600;
  display: flex; align-items: center;
}
.fr-modal > .head .x { margin-left: auto; cursor: pointer; opacity: .8; font-size: 18px; }
.fr-modal > .head .x:hover { opacity: 1; }
.fr-modal > .body { padding: 16px 18px; overflow-y: auto; }
.fr-modal > .foot { padding: 12px 18px; border-top: 1px solid var(--fr-line); display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Login ---- */
.fr-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%;
  background: linear-gradient(160deg, var(--fr-sidebar) 0%, #134a59 100%);
}
.fr-login .box { background: #fff; border-radius: 14px; padding: 34px 36px; width: 360px; }
.fr-login h1 { margin: 0 0 4px; font-size: 22px; }
.fr-login .sub { color: var(--fr-muted); margin-bottom: 18px; }
.fr-login .fr-input { width: 100%; margin-bottom: 10px; }
.fr-login .fr-btn { width: 100%; justify-content: center; }

/* ---- Kleinkram ---- */
.fr-muted { color: var(--fr-muted); }
.fr-num { font-variant-numeric: tabular-nums; }
.fr-grid { display: grid; gap: 14px; }
.fr-grid.c2 { grid-template-columns: 1fr 1fr; }
.fr-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.fr-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.fr-kpi { text-align: left; }
.fr-kpi .v { font-size: 21px; font-weight: 700; margin-top: 2px; }
.fr-kpi .l { color: var(--fr-muted); font-size: 12.5px; font-weight: 600; }
.fr-pagination { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.fr-pagination button { min-width: 32px; }
.fr-empty { text-align: center; color: var(--fr-muted); padding: 36px 10px; }
.fr-spin {
  width: 22px; height: 22px; border: 3px solid var(--fr-line); border-top-color: var(--fr-blue);
  border-radius: 50%; animation: frspin .8s linear infinite; margin: 26px auto;
}
@keyframes frspin { to { transform: rotate(360deg); } }
/* ---- Spaltenraster der Module ----
   Diese Aufteilungen standen als Inline-Angaben in den JS-Modulen, wo keine
   Media-Query sie zurücknehmen kann. Hier stehen sie einmal — und weiter unten
   klappen sie auf schmalen Schirmen untereinander. */
.fr-spalten { display: grid; gap: 14px; align-items: start; }
.fr-spalten--seite   { grid-template-columns: minmax(0, 1fr) 330px; }
.fr-spalten--zwei    { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.fr-spalten--paar    { grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 2px 0; }
.fr-spalten--merkmal { grid-template-columns: 170px minmax(0, 1fr); column-gap: 10px; row-gap: 7px; align-items: baseline; margin: 0; }

/* ---- Suche: Filter neben Treffern ---- */
.fr-suche { display: flex; gap: 16px; align-items: flex-start; }
.fr-suche__filter { width: 340px; flex-shrink: 0; }
.fr-suche__treffer { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   Schmale Schirme

   Die Anwendung war auf Schreibtischbreite gebaut: feste 340-px-Filterspalte,
   dauerhaft sichtbare Seitenleiste, Tabellen ohne Rollbereich. Auf dem Handy
   blieb für die Trefferspalte rechnerisch nichts übrig — sie fiel auf 0 px
   zusammen, und die Seite ließ sich quer schieben.
   ========================================================================== */

@media (max-width: 900px) {
  .fr-grid.c3, .fr-grid.c4 { grid-template-columns: 1fr 1fr; }
  .fr-content { padding: 12px; }

  /* Filter über die Treffer statt daneben */
  .fr-suche { flex-direction: column; }
  .fr-suche__filter { width: 100%; }
  .fr-suche__treffer { width: 100%; }

  /* Alle Modulraster untereinander */
  .fr-spalten--seite, .fr-spalten--zwei { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* Auch die engeren Paare: zwei Spalten Kästchen oder ein 170-px-Begriff neben
     dem Wert sind auf einem Handy zu viel. */
  .fr-spalten--paar { grid-template-columns: minmax(0, 1fr); }
  .fr-spalten--merkmal { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .fr-spalten--merkmal dt { font-weight: 600; margin-top: 8px; }
}

@media (max-width: 700px) {
  /* Die Seitenleiste wandert nach unten: als Leiste über die volle Breite,
     waagerecht rollbar. 60 px am linken Rand sind auf einem 375-px-Schirm ein
     Sechstel der Fläche — die fehlt der eigentlichen Arbeit. */
  #app { flex-direction: column; }
  .fr-side {
    width: 100%; height: auto; flex-direction: row; align-items: center;
    position: fixed; bottom: 0; left: 0; top: auto; z-index: 50;
    padding: 4px 6px; gap: 2px; overflow-x: auto; overflow-y: hidden;
    border-top: 1px solid rgba(255, 255, 255, .12);
    /* Platz für die Bedienleiste des Browsers am unteren Rand */
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  .fr-side .logo { display: none; }
  .fr-side .spacer { flex: 0 0 auto; width: 6px; }
  .fr-side button { flex: 0 0 auto; width: 42px; height: 42px; margin: 0; }

  /* Damit die untere Leiste nichts verdeckt */
  .fr-main { padding-bottom: 60px; }

  .fr-content { padding: 10px; }
  .fr-grid.c2, .fr-grid.c3, .fr-grid.c4 { grid-template-columns: minmax(0, 1fr); }

  /* Tabellen rollen in ihrem eigenen Bereich, statt die Seite zu verbreitern */
  .fr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fr-table { min-width: 560px; }

  /* Kopfzeile: Titel darf kürzen statt umzubrechen */
  .fr-topbar { padding: 0 12px; gap: 8px; }
  .fr-topbar h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .fr-card { padding: 12px; }

  /* Auf Fingerbedienung: iOS zoomt bei Schriftgrößen unter 16 px hinein */
  .fr-input, .fr-select, textarea.fr-input { font-size: 16px; }
  .fr-btn { padding: 9px 14px; }

  .fr-modal-bg { padding: 3vh 10px; }
  .fr-modal { width: 100%; max-height: 92vh; }

  /* --- Die eigentliche Ursache des Querlaufs ---
     Die Module bauen ihre Werkzeugleisten als Flex-Zeilen direkt im JavaScript
     zusammen — Suchfeld, Auswahlfelder, Knöpfe nebeneinander, ohne Umbruch. Auf
     Schreibtischbreite passt das, auf 375 px schiebt jede dieser Zeilen die Seite
     auf. Weil die Angaben inline stehen, lassen sie sich nicht einzeln
     überschreiben; erlaubt man aber allen Elementen hier den Umbruch, wirkt das
     genau auf die Flex-Zeilen und lässt alles andere unberührt (flex-wrap hat auf
     Nicht-Flex-Elementen keine Wirkung). */
  .fr-content div, .fr-content form, .fr-content p { flex-wrap: wrap; }

  /* Umbrechen allein genügt nicht: Eine Flex-Spalte ohne Mindestbreite wird
     lieber schmalgequetscht als umgebrochen — im SalesManager stand „Telefonate"
     dadurch Buchstabe für Buchstabe untereinander. Mit einer Mindestbreite
     entscheidet sich der Umbruch, sobald es eng wird. min() deckelt auf die
     verfügbare Breite, es kann also nichts hinausragen. */
  .fr-content > div > div, .fr-card > div > div { min-width: min(100%, 240px); }

  /* Feste Feldbreiten aus den Modulen (90 px PLZ, 340 px Spalte …) dürfen nie
     breiter werden als der Platz, der da ist. */
  .fr-content input, .fr-content select, .fr-content textarea,
  .fr-input, .fr-select, textarea.fr-input { max-width: 100%; }

  /* Kennzahlen untereinander statt nebeneinander */
  .fr-card.fr-kpi { min-width: 0; }

  /* Reiter: lieber waagerecht schieben als in drei Reihen umbrechen */
  .fr-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr-tabs::-webkit-scrollbar { display: none; }
  .fr-tabs button { flex: 0 0 auto; white-space: nowrap; }

  /* Lange Pfade und Kennungen brechen, statt die Karte zu sprengen */
  .fr-content, .fr-card, .fr-table td { overflow-wrap: break-word; }
}