/* =========================================================================
   Flaechensprache der Web-App auf der Startseite (02.10.2026).
   Vorlage: crm-software/src/index.css (kachel-farbe, icon-kachel, zahl-gross,
   pille-farbe, feld-werkzeug). Die Bereichsfarben (--f-*) aus kopf.css bleiben
   die Bereichsfarben der Website; die sechs Flaechenfarben der App kommen als
   Tokens dazu. Laedt als letztes Stylesheet, damit die Klassen hier die
   aelteren Bausteine ueberschreiben.
   ========================================================================= */

:root {
  --flaeche-violett: #7c3aed; --flaeche-violett-tief: #6c2bf2;
  --flaeche-blau:    #38bdf8; --flaeche-blau-tief:    #0284c7;
  --flaeche-gruen:   #22c55e; --flaeche-gruen-tief:   #16a34a;
  --flaeche-gelb:    #f59e0b; --flaeche-gelb-tief:    #d97706;
  --flaeche-rot:     #f43f5e; --flaeche-rot-tief:     #be123c;
  --flaeche-rosa:    #ec4899; --flaeche-rosa-tief:    #be185d;
}

/* Farbe je Element: Flaechenfarben der App und Bereichsfarben der Website.
   `--farbe` ist der Ton fuer Flaechen und Pillen, `--farbe-tief` die
   Icon-Kachel und die Schrift auf der Pille. */
.fl-violett { --farbe: var(--flaeche-violett); --farbe-tief: var(--flaeche-violett-tief); }
.fl-blau    { --farbe: var(--flaeche-blau);    --farbe-tief: var(--flaeche-blau-tief); }
.fl-gruen   { --farbe: var(--flaeche-gruen);   --farbe-tief: var(--flaeche-gruen-tief); }
.fl-gelb    { --farbe: var(--flaeche-gelb);    --farbe-tief: var(--flaeche-gelb-tief); }
.fl-rot     { --farbe: var(--flaeche-rot);     --farbe-tief: var(--flaeche-rot-tief); }
.fl-rosa    { --farbe: var(--flaeche-rosa);    --farbe-tief: var(--flaeche-rosa-tief); }

.fl-dialer     { --farbe: var(--f-dialer);     --farbe-tief: var(--f-dialer); }
.fl-telefonie  { --farbe: var(--f-telefonie);  --farbe-tief: var(--f-telefonie); }
.fl-leads      { --farbe: var(--f-leads);      --farbe-tief: var(--f-leads); }
.fl-deal       { --farbe: var(--f-deal);       --farbe-tief: var(--f-deal); }
.fl-objekte    { --farbe: var(--f-objekte);    --farbe-tief: var(--f-objekte); }
.fl-unterlagen { --farbe: var(--f-unterlagen); --farbe-tief: var(--f-unterlagen); }
.fl-kalender   { --farbe: var(--f-kalender);   --farbe-tief: var(--f-kalender); }
.fl-auswertung { --farbe: var(--f-auswertung); --farbe-tief: var(--f-auswertung); }

/* ---------- Bausteine ---------------------------------------------------- */

/* Kachel mit Verlauf in der Inhaltsfarbe: 1px Rand, innen 5px weisser Ring,
   dahinter eine feine Linie, Flaeche aus zwei Lichtern plus zarter Toenung. */
.fl-kachel {
  --farbe: var(--flaeche-violett);
  --farbe-tief: var(--flaeche-violett-tief);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-mid);
  border-radius: 20px;
  background:
    radial-gradient(circle at 108% -12%, color-mix(in srgb, var(--farbe) 30%, transparent) 0, transparent 50%),
    radial-gradient(circle at -12% 115%, color-mix(in srgb, var(--farbe) 12%, transparent) 0, transparent 52%),
    color-mix(in srgb, var(--farbe) 5%, var(--paper));
  box-shadow:
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 6px color-mix(in srgb, var(--ink) 6%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Icon-Kachel in der tiefen Farbe, weisses Zeichen. */
.fl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 0;
  background: var(--farbe-tief, var(--flaeche-violett-tief));
  color: #fff;
  box-shadow: 0 6px 14px -8px var(--farbe-tief, var(--flaeche-violett-tief));
}
.fl-icon svg { width: 16px; height: 16px; }
.fl-icon-28 { width: 28px; height: 28px; border-radius: 9px; }
.fl-icon-28 svg { width: 14px; height: 14px; }

/* Pille: Zahl oder Wort auf hellem Ton der Farbe. */
.fl-pille {
  --farbe: var(--flaeche-violett);
  --farbe-tief: var(--flaeche-violett-tief);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--farbe) 13%, var(--paper));
  color: var(--farbe-tief);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.fl-pille strong {
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fl-pille svg { width: 14px; height: 14px; flex: none; }

/* Grosse Zahl in Outfit. */
.fl-zahl {
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Weisse Karte: Rand, 20px, Grundschatten. Keine Hover-Bewegung. */
.fl-container {
  border: 1px solid var(--line-mid);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

/* Eingabefeld in Werkzeugleisten: 36px hoch, wie .feld-werkzeug in der App. */
.fl-feld {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--paper-2);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.fl-feld::placeholder { color: var(--ink-4); }
.fl-feld:hover:not(:disabled) { background: var(--nebel, #F5F3F8); }
.fl-feld:focus,
.fl-feld:focus-visible { background: var(--paper); border-color: var(--accent); outline: none; }

/* Segmentleiste wie `Segmente` in der App: Gruppe 36px, Radius 10, 4px
   Innenabstand auf leisem Grund; die gewaehlte Pille ist weiss mit Akzent,
   Radius 7 (Aussenradius minus Innenabstand, minus eins fuer den Rand). */
.fl-segmente {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  background: var(--nebel, #F5F3F8);
  box-sizing: border-box;
}
.fl-segmente > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.fl-segmente > button:hover { color: var(--ink); }
.fl-segmente > button.is-an,
.fl-segmente > button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--accent);
  border: 0;
  box-shadow: 0 1px 2px rgba(23, 16, 43, .10);
}
.fl-segmente > button.is-an:hover,
.fl-segmente > button[aria-pressed="true"]:hover { color: var(--accent); }
.fl-segmente > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Knoepfe ------------------------------------------------------ */

.btn { border-radius: 10px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 15px; }
.pr-karte .pr-knopf { border-radius: 10px; }

/* ---------- Startseite: alte Bausteine in der neuen Sprache -------------- */

/* Icon-Kacheln: die aelteren Quadrate (helle Toenung, farbiges Zeichen)
   werden zu tiefen Kacheln mit weissem Zeichen. Die Regeln hier tragen die
   Spezifitaet der Vorgaenger, damit sie gewinnen. */
.ak-icon.fl-icon,
.mini-icon.fl-icon,
.pr-zusatz .ak-icon.fl-icon,
.pr-symbol.fl-icon,
#beta .tile-icon.fl-icon,
body.startseite #beta .tile .tile-icon.fl-icon,
body.startseite .stand-icon.fl-icon,
body.startseite .stand-bald .stand-icon.fl-icon,
body.startseite .st-icon.fl-icon,
body.startseite #anbindungen .anb-kopf .ak-icon.fl-icon,
body.startseite #funktionen .reiter-blatt .ak-icon.fl-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 0;
  background: var(--farbe-tief, var(--flaeche-violett-tief));
  color: #fff;
  box-shadow: 0 6px 14px -8px var(--farbe-tief, var(--flaeche-violett-tief));
}
body.startseite #beta .tile .tile-icon.fl-icon svg,
.ak-icon.fl-icon svg,
.mini-icon.fl-icon svg,
.pr-symbol.fl-icon svg,
body.startseite .stand-icon.fl-icon svg,
body.startseite #anbindungen .anb-kopf .ak-icon.fl-icon svg { width: 16px; height: 16px; }
.pr-symbol.fl-icon { --farbe-tief: var(--p-ton); }
body.startseite #beta .tile { grid-template-columns: 34px minmax(0, 1fr); }
body.startseite .stand-app-titel { grid-template-columns: 34px minmax(0, 1fr); }

/* Reiter "Ein System. Kein Werkzeug-Zoo." als Segmentleiste. */
.reiter.fl-segmente {
  display: inline-flex;
  gap: 2px;
  height: 36px;
  padding: 4px;
  margin-bottom: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  background: var(--nebel, #F5F3F8);
  overflow-x: auto;
  overflow-y: hidden;
}
.reiter.fl-segmente .reiter-knopf {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.reiter.fl-segmente .reiter-knopf:hover { color: var(--ink); }
.reiter.fl-segmente .reiter-knopf.is-an,
.reiter.fl-segmente .reiter-knopf.is-an:hover,
body.startseite #funktionen .reiter.fl-segmente .reiter-knopf.is-an,
body.startseite #funktionen .reiter.fl-segmente .reiter-knopf.is-an:hover {
  background: var(--paper);
  color: var(--accent);
  border: 0;
  box-shadow: 0 1px 2px rgba(23, 16, 43, .10);
}
.reiter.fl-segmente .reiter-knopf:active { transform: none; }
/* Die Leiste ist eine Zeile fuer sich, deshalb ein eigener Block. */
.reiter-zeile { display: flex; }

/* Preis-Umschalter in derselben Form. */
.pr-schalter.fl-segmente { padding: 4px; gap: 2px; height: 36px; border-color: var(--line-mid); border-radius: 10px; background: var(--nebel, #F5F3F8); }
.pr-schalter.fl-segmente button { height: 26px; padding: 0 14px; border-radius: 7px; font-size: 14px; font-weight: 600; line-height: 1; }
.pr-schalter.fl-segmente button[aria-pressed="true"] { background: var(--paper); color: var(--accent); box-shadow: 0 1px 2px rgba(23, 16, 43, .10); }
.pr-schalter.fl-segmente button:active { transform: none; }

/* FAQ-Nummern als Pille in Violett. */
.frage-zeichen.fl-pille {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--farbe) 13%, var(--paper));
  color: var(--farbe-tief);
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Stand-der-Beta-Chips als Pillen: 28px, Radius 8, Zeichen 14px in der
   tiefen Farbe, kein eigener Kreis mehr dahinter. */
body.startseite .st-chip.fl-pille {
  --farbe: var(--f, var(--flaeche-violett));
  --farbe-tief: var(--f, var(--flaeche-violett-tief));
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--farbe) 13%, var(--paper));
  color: var(--farbe-tief);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
}
body.startseite .st-chip.fl-pille .st-icon {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: none;
  color: var(--farbe-tief);
}
body.startseite .st-chip.fl-pille .st-icon svg { width: 14px; height: 14px; }
body.startseite .st-chip.fl-pille.st-chip-leise {
  border: 1px dashed color-mix(in srgb, var(--farbe) 45%, transparent);
  background: var(--paper);
  color: var(--ink-2);
}
body.startseite .st-chip.fl-pille small { font-size: 11.5px; color: var(--ink-3); }
body.startseite .st-gruppe.fl-container { padding: 16px 18px 18px; }
body.startseite .st-gruppe.fl-container + .st-gruppe.fl-container { margin-top: 12px; }
body.startseite .st-gruppe.fl-container h3 { margin-bottom: 10px; }

/* Karten ohne Farbflaeche im Container-Look. */
body.startseite .bento-karte.fl-container,
#anbindungen .anb-feld.fl-container,
#anbindungen .anb-feld.fl-container:nth-child(even),
body.startseite .pr-zusatz.fl-container,
body.startseite .kv-karte.fl-container {
  border: 1px solid var(--line-mid);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
#anbindungen .anb-raster { gap: 14px; }
#anbindungen .anb-feld.fl-container,
#anbindungen .anb-feld.fl-container:nth-child(even) { padding: 26px 28px 22px; }
.bento-karte.fl-container .bento-visual { margin: -26px -26px 0; }
.bento-karte.fl-container .bento-visual--bild { border-bottom-color: var(--line-mid); }
.bento-karte.fl-container .mini-icon { margin-top: 2px; }
.pr-zusatz.fl-container { padding: 20px 22px; }
body.startseite .kv-karte.fl-container { padding: 8px; }
body.startseite .kv-wir.fl-container { padding: 7px; border: 2px solid var(--accent); }
body.startseite .kv-karte.fl-container .kv-flaeche { border-radius: 13px; }

/* FAQ: jede Frage eine Karte, die Liste mit Luft dazwischen. */
.faq:has(details.fl-container) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-top: 0; }
.faq details.fl-container {
  border: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-mid);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq details.fl-container[open] { background: var(--paper); }
.faq details.fl-container[open]::before { display: none; }
.faq details.fl-container summary { padding: 18px 20px; grid-template-columns: 28px minmax(0, 1fr) 30px; gap: 14px; }
.faq details.fl-container .answer { margin: 0 56px 22px 62px; }

/* Preiskarten: Toenung bleibt, dazu der Innenring der Kachel. */
.pr-karte.fl-kachel-ring { border-radius: 20px; }
.pr-karte.fl-kachel-ring .pr-oben {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}

@media (max-width: 860px) {
  .reiter.fl-segmente { display: flex; width: 100%; }
  .reiter.fl-segmente .reiter-knopf { height: 26px; padding-block: 0; }
  .faq details.fl-container summary { padding: 16px 16px; gap: 12px; }
  .faq details.fl-container .answer { margin: 0 16px 18px 56px; }
  #anbindungen .anb-feld.fl-container,
  #anbindungen .anb-feld.fl-container:nth-child(even) { padding: 22px 20px 18px; }
  /* Der Kopf wird am Telefon zum Raster; die Spalte traegt jetzt die 34px-Kachel. */
  body.startseite #anbindungen .anb-kopf:has(.fl-icon) { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; }
}
@media (max-width: 620px) {
  body.startseite .st-gruppe.fl-container { padding: 14px 16px 16px; }
  /* Die Wischreihe laeuft bis an den Kartenrand, nicht bis zur Polsterung. */
  body.startseite .st-gruppe.fl-container .st-chips { margin-inline: -16px; padding: 0 16px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .reiter.fl-segmente .reiter-knopf,
  .pr-schalter.fl-segmente button,
  .fl-segmente > button { transition: none; }
}