/* =========================================================
   FORSTPRO – Globales Design
   ========================================================= */

:root {
  --fp-green: #1f5d42;
  --fp-green-dark: #164531;
  --fp-green-light: #eaf3ee;

  --fp-bg: #f5f7f6;
  --fp-card: #ffffff;

  --fp-text: #1f2933;
  --fp-text-light: #6b7280;

  --fp-border: #e1e6e3;

  --fp-radius: 12px;
  --fp-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* =========================================================
   Grundlayout
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  background: var(--fp-bg);
  color: var(--fp-text);
}

body {
  min-height: 100vh;
}

a {
  color: var(--fp-green);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* =========================================================
   Überschriften
   ========================================================= */

h1,
h2,
h3,
h4 {
  margin-top: 0;
  color: var(--fp-text);
}

h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

h2 {
  font-size: 1.15rem;
  font-weight: 650;
}

h3 {
  font-size: 1rem;
}

/* =========================================================
   ForstPro Seitenkopf
   ========================================================= */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.5rem;
}

.page-header p {
  margin: 0;

  color: var(--fp-text-light);
  font-size: 0.95rem;
}

/* =========================================================
   Karten
   ========================================================= */

.content-card {
  background: var(--fp-card);

  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);

  box-shadow: var(--fp-shadow);

  padding: 1.5rem;

  margin-bottom: 1.5rem;
}

/* =========================================================
   Tabellenkopf
   ========================================================= */

.table-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.25rem;
}

.table-header p {
  margin: 0;

  color: var(--fp-text-light);
  font-size: 0.875rem;
}

/* =========================================================
   Suchfeld
   ========================================================= */

.search-box {
  width: 280px;

  padding: 0.7rem 0.9rem;

  border: 1px solid var(--fp-border);
  border-radius: 8px;

  background: white;

  font-size: 0.9rem;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.search-box:focus {
  border-color: var(--fp-green);

  box-shadow: 0 0 0 3px rgba(31, 93, 66, 0.12);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn-primary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.4rem;

  padding: 0.7rem 1rem;

  border: none;
  border-radius: 8px;

  background: var(--fp-green);
  color: white;

  font-size: 0.9rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}

.btn-primary:hover {
  background: var(--fp-green-dark);

  box-shadow: 0 3px 8px rgba(31, 93, 66, 0.2);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0.7rem 1rem;

  border: 1px solid var(--fp-border);
  border-radius: 8px;

  background: white;
  color: var(--fp-text);

  font-size: 0.9rem;
  font-weight: 500;

  cursor: pointer;

  transition: background 0.2s ease;
}

.btn-secondary:hover {
  background: #f3f5f4;
}

/* =========================================================
   Formulare
   ========================================================= */

.form-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.1rem 1.25rem;

  margin-top: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;

  gap: 0.4rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;

  color: #4b5563;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 0.7rem 0.8rem;

  border: 1px solid var(--fp-border);
  border-radius: 8px;

  background: white;

  color: var(--fp-text);

  font-family: inherit;
  font-size: 0.9rem;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--fp-green);

  box-shadow: 0 0 0 3px rgba(31, 93, 66, 0.12);
}

/* =========================================================
   Formular Buttons
   ========================================================= */

.form-actions {
  display: flex;

  justify-content: flex-end;

  gap: 0.75rem;

  margin-top: 1.5rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--fp-border);
}

/* =========================================================
   Tabelle
   ========================================================= */

.table-container {
  width: 100%;

  overflow-x: auto;
}

.data-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;
}

.data-table th {
  padding: 0.85rem 0.75rem;

  text-align: left;

  background: #f8faf9;

  border-bottom: 1px solid var(--fp-border);

  color: #59636d;

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.03em;
}

.data-table td {
  padding: 0.95rem 0.75rem;

  border-bottom: 1px solid var(--fp-border);

  color: var(--fp-text);
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: var(--fp-green-light);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   Leerer Zustand
   ========================================================= */

.empty-state {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4rem 1rem;
}

.empty-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  margin-bottom: 1rem;

  border-radius: 50%;

  background: var(--fp-green-light);

  font-size: 1.8rem;
}

.empty-state h3 {
  margin-bottom: 0.4rem;
}

.empty-state p {
  max-width: 420px;

  margin-bottom: 1.25rem;

  color: var(--fp-text-light);

  line-height: 1.5;
}

/* =========================================================
   Fehlermeldungen
   ========================================================= */

.error-message {
  margin-top: 1rem;

  padding: 0.85rem 1rem;

  border-radius: 8px;

  background: #fff1f1;

  border: 1px solid #f3caca;

  color: #a61b1b;

  font-size: 0.9rem;
}

/* =========================================================
   Validierung
   ========================================================= */

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

/* =========================================================
   Blazor Fehlerseite
   ========================================================= */

.blazor-error-boundary {
  background: #b32121;

  padding: 1rem 1rem 1rem 3.7rem;

  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* =========================================================
   Responsive Design
   ========================================================= */

@media (max-width: 900px) {
  .page-header {
    align-items: flex-start;

    flex-direction: column;
  }

  .table-header {
    align-items: flex-start;

    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content-card {
    padding: 1rem;
  }

  .page-header {
    margin-bottom: 1rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }
}
@page "/kunden"
@rendermode InteractiveServer

@using Microsoft.EntityFrameworkCore
@using ForstPro.Web.Data
@using ForstPro.Web.Models
@inject ForstProDbContext Db

<PageTitle>Kunden | ForstPro</PageTitle>

<div class="page-header">
    <div>
        <h1>Kunden</h1>
        <p>Kundenstammdaten verwalten</p>
    </div>

    <button class="btn-primary" @onclick="NeuerKunde">
        + Neuer Kunde
    </button>
</div>

@if (!string.IsNullOrWhiteSpace(erfolgsmeldung))
{
    <div class="success-message">
        @erfolgsmeldung
    </div>
}

@if (zeigeFormular)
{
    <div class="content-card">

        <div class="table-header">
            <div>
                <h2>@(istBearbeitung ? "Kunde bearbeiten" : "Neuen Kunden anlegen")</h2>
                <p>
                    @(istBearbeitung
                        ? "Ändern Sie die gewünschten Kundendaten."
                        : "Erfassen Sie die Stammdaten des neuen Kunden.")
                </p>
            </div>
        </div>

        <div class="form-grid">

            <div class="form-group">
                <label>Kundennummer *</label>
                <input @bind="formularKunde.Kundennummer"
                       placeholder="z. B. K1001" />
            </div>

            <div class="form-group">
                <label>Firmenname *</label>
                <input @bind="formularKunde.Firmenname"
                       placeholder="Firmenname" />
            </div>

            <div class="form-group">
                <label>Ansprechpartner</label>
                <input @bind="formularKunde.Ansprechpartner"
                       placeholder="Vor- und Nachname" />
            </div>

            <div class="form-group">
                <label>Telefon</label>
                <input @bind="formularKunde.Telefon"
                       placeholder="+49 ..." />
            </div>

            <div class="form-group">
                <label>E-Mail</label>
                <input @bind="formularKunde.Email"
                       type="email"
                       placeholder="info@firma.de" />
            </div>

            <div class="form-group">
                <label>Straße / Hausnummer</label>
                <input @bind="formularKunde.Strasse"
                       placeholder="Waldstraße 10" />
            </div>

            <div class="form-group">
                <label>PLZ</label>
                <input @bind="formularKunde.Plz"
                       placeholder="95652" />
            </div>

            <div class="form-group">
                <label>Ort</label>
                <input @bind="formularKunde.Ort"
                       placeholder="Waldsassen" />
            </div>

        </div>

        @if (!string.IsNullOrWhiteSpace(fehlermeldung))
        {
            <div class="error-message">
                @fehlermeldung
            </div>
        }

        <div class="form-actions">
            <button class="btn-secondary"
                    @onclick="Abbrechen">
                Abbrechen
            </button>

            <button class="btn-primary"
                    @onclick="KundeSpeichern">
                @(istBearbeitung ? "Änderungen speichern" : "Kunde speichern")
            </button>
        </div>

    </div>
}

<div class="content-card">

    <div class="table-header">
        <div>
            <h2>Kundenübersicht</h2>
            <p>@kunden.Count Kunden gespeichert</p>
        </div>

        <input class="search-box"
               placeholder="Kunde, Nummer oder Ort suchen..."
               @bind="suchbegriff"
               @bind:event="oninput" />
    </div>

    @if (kunden.Count == 0)
    {
        <div class="empty-state">

            <div class="empty-icon">👥</div>

            <h3>Noch keine Kunden vorhanden</h3>

            <p>
                Legen Sie Ihren ersten Kunden an.
            </p>

            <button class="btn-primary"
                    @onclick="NeuerKunde">
                + Ersten Kunden anlegen
            </button>

        </div>
    }
    else
    {
        <div class="table-container">

            <table class="data-table">

                <thead>
                    <tr>
                        <th>Kundennr.</th>
                        <th>Firma</th>
                        <th>Ansprechpartner</th>
                        <th>Telefon</th>
                        <th>E-Mail</th>
                        <th>Ort</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>

                <tbody>

                    @foreach (var kunde in GefilterteKunden)
                    {
                        <tr>
                            <td>
                                <strong>@kunde.Kundennummer</strong>
                            </td>

                            <td>@kunde.Firmenname</td>

                            <td>@kunde.Ansprechpartner</td>

                            <td>@kunde.Telefon</td>

                            <td>@kunde.Email</td>

                            <td>
                                @kunde.Plz @kunde.Ort
                            </td>

                            <td>
                                <div class="table-actions">

                                    <button class="btn-table"
                                            @onclick="() => KundeBearbeiten(kunde)">
                                        Bearbeiten
                                    </button>

                                    <button class="btn-table-danger"
                                            @onclick="() => LoeschenVorbereiten(kunde)">
                                        Löschen
                                    </button>

                                </div>
                            </td>
                        </tr>
                    }

                </tbody>

            </table>

        </div>
    }

</div>

@if (kundeZumLoeschen is not null)
{
    <div class="modal-backdrop">

        <div class="confirm-dialog">

            <div class="confirm-icon">
                !
            </div>

            <h2>Kunde löschen?</h2>

            <p>
                Möchten Sie
                <strong>@kundeZumLoeschen.Firmenname</strong>
                wirklich löschen?
            </p>

            <p class="confirm-warning">
                Dieser Vorgang kann nicht rückgängig gemacht werden.
            </p>

            <div class="form-actions">

                <button class="btn-secondary"
                        @onclick="LoeschenAbbrechen">
                    Abbrechen
                </button>

                <button class="btn-danger"
                        @onclick="KundeLoeschen">
                    Kunde löschen
                </button>

            </div>

        </div>

    </div>
}

@code {

    private List<Kunde> kunden = new();

    private Kunde formularKunde = new();

    private Kunde? kundeZumLoeschen;

    private bool zeigeFormular;

    private bool istBearbeitung;

    private string suchbegriff = "";

    private string fehlermeldung = "";

    private string erfolgsmeldung = "";

    private IEnumerable<Kunde> GefilterteKunden
    {
        get
        {
            if (string.IsNullOrWhiteSpace(suchbegriff))
                return kunden;

            return kunden.Where(k =>
                k.Firmenname.Contains(
                    suchbegriff,
                    StringComparison.OrdinalIgnoreCase)
                ||
                k.Kundennummer.Contains(
                    suchbegriff,
                    StringComparison.OrdinalIgnoreCase)
                ||
                k.Ansprechpartner.Contains(
                    suchbegriff,
                    StringComparison.OrdinalIgnoreCase)
                ||
                k.Ort.Contains(
                    suchbegriff,
                    StringComparison.OrdinalIgnoreCase));
        }
    }

    protected override async Task OnInitializedAsync()
    {
        await KundenLaden();
    }

    private async Task KundenLaden()
    {
        kunden = await Db.Kunden
            .AsNoTracking()
            .OrderBy(k => k.Firmenname)
            .ToListAsync();
    }

    private void NeuerKunde()
    {
        formularKunde = new Kunde();

        istBearbeitung = false;
        zeigeFormular = true;

        fehlermeldung = "";
        erfolgsmeldung = "";
    }

    private void KundeBearbeiten(Kunde kunde)
    {
        formularKunde = new Kunde
        {
            Id = kunde.Id,
            Kundennummer = kunde.Kundennummer,
            Firmenname = kunde.Firmenname,
            Ansprechpartner = kunde.Ansprechpartner,
            Telefon = kunde.Telefon,
            Email = kunde.Email,
            Strasse = kunde.Strasse,
            Plz = kunde.Plz,
            Ort = kunde.Ort
        };

        istBearbeitung = true;
        zeigeFormular = true;

        fehlermeldung = "";
        erfolgsmeldung = "";
    }

    private void Abbrechen()
    {
        formularKunde = new Kunde();

        zeigeFormular = false;
        istBearbeitung = false;

        fehlermeldung = "";
    }

    private async Task KundeSpeichern()
    {
        fehlermeldung = "";
        erfolgsmeldung = "";

        formularKunde.Kundennummer =
            formularKunde.Kundennummer.Trim();

        formularKunde.Firmenname =
            formularKunde.Firmenname.Trim();

        if (string.IsNullOrWhiteSpace(formularKunde.Kundennummer))
        {
            fehlermeldung =
                "Bitte geben Sie eine Kundennummer ein.";

            return;
        }

        if (string.IsNullOrWhiteSpace(formularKunde.Firmenname))
        {
            fehlermeldung =
                "Bitte geben Sie einen Firmennamen ein.";

            return;
        }

        bool nummerVorhanden =
            await Db.Kunden.AnyAsync(k =>
                k.Kundennummer == formularKunde.Kundennummer
                &&
                k.Id != formularKunde.Id);

        if (nummerVorhanden)
        {
            fehlermeldung =
                "Diese Kundennummer ist bereits vergeben.";

            return;
        }

        try
        {
            if (istBearbeitung)
            {
                var kunde = await Db.Kunden
                    .FindAsync(formularKunde.Id);

                if (kunde is null)
                {
                    fehlermeldung =
                        "Der Kunde wurde nicht gefunden.";

                    return;
                }

                kunde.Kundennummer =
                    formularKunde.Kundennummer;

                kunde.Firmenname =
                    formularKunde.Firmenname;

                kunde.Ansprechpartner =
                    formularKunde.Ansprechpartner;

                kunde.Telefon =
                    formularKunde.Telefon;

                kunde.Email =
                    formularKunde.Email;

                kunde.Strasse =
                    formularKunde.Strasse;

                kunde.Plz =
                    formularKunde.Plz;

                kunde.Ort =
                    formularKunde.Ort;

                erfolgsmeldung =
                    "Die Kundendaten wurden aktualisiert.";
            }
            else
            {
                Db.Kunden.Add(formularKunde);

                erfolgsmeldung =
                    "Der Kunde wurde erfolgreich angelegt.";
            }

            await Db.SaveChangesAsync();

            await KundenLaden();

            formularKunde = new Kunde();

            zeigeFormular = false;
            istBearbeitung = false;
        }
        catch (Exception ex)
        {
            fehlermeldung =
                "Die Kundendaten konnten nicht gespeichert werden: "
                + ex.Message;
        }
    }

    private void LoeschenVorbereiten(Kunde kunde)
    {
        kundeZumLoeschen = kunde;

        erfolgsmeldung = "";
    }

    private void LoeschenAbbrechen()
    {
        kundeZumLoeschen = null;
    }

    private async Task KundeLoeschen()
    {
        if (kundeZumLoeschen is null)
            return;

        try
        {
            var kunde = await Db.Kunden
                .FindAsync(kundeZumLoeschen.Id);

            if (kunde is not null)
            {
                Db.Kunden.Remove(kunde);

                await Db.SaveChangesAsync();
            }

            kundeZumLoeschen = null;

            await KundenLaden();

            erfolgsmeldung =
                "Der Kunde wurde gelöscht.";
        }
        catch (Exception ex)
        {
            fehlermeldung =
                "Der Kunde konnte nicht gelöscht werden: "
                + ex.Message;

            kundeZumLoeschen = null;
        }
    }
}
.form-full-width {
    margin-top: 1.1rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.3rem 0.6rem;

    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 700;
}

.status-active {
    background: #e8f5ed;
    color: #17633a;
}

.status-draft {
    background: #f1f3f5;
    color: #59636d;
}

.status-ended {
    background: #fff4df;
    color: #8a5700;
}

.status-cancelled {
    background: #fff0ef;
    color: #b42318;
}
.table-subtext {
    margin-top: 0.2rem;
    color: var(--fp-text-light);
    font-size: 0.78rem;
}

.status-paused {
    background: #fff4df;
    color: #8a5700;
}
.sub-card {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;

    background: #f8faf9;
    border: 1px solid #e1e8e3;
    border-radius: 14px;
}

.sub-card h3 {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.compact-empty {
    padding: 2rem 1rem;
}
.dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;

    margin: 1.25rem 0 1.5rem 0;
}

.metric-card {
    position: relative;

    padding: 1.25rem;

    background: #ffffff;

    border: 1px solid var(--fp-border);
    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.metric-label {
    margin-bottom: 0.5rem;

    color: var(--fp-text-light);

    font-size: 0.8rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-value {
    color: var(--fp-text);

    font-size: 1.7rem;
    font-weight: 750;

    line-height: 1.1;
}

.metric-unit {
    margin-top: 0.3rem;

    color: var(--fp-text-light);

    font-size: 0.8rem;
}

@media (max-width: 1000px) {
    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
.mail-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--fp-border);
}

.mail-attachment:last-child {
    border-bottom: none;
}
/* =========================================================
   FORSTPRO V1.0 – UI/UX Refresh 2026-08-31
   Einheitliche, moderne Interaktionen und bessere Lesbarkeit
   ========================================================= */
:root {
  --fp-green: #176b46;
  --fp-green-dark: #0f5034;
  --fp-green-soft: #e9f5ef;
  --fp-danger: #b42318;
  --fp-danger-soft: #fef3f2;
  --fp-muted-bg: #f8faf9;
  --fp-border: #dce5e0;
  --fp-radius: 14px;
  --fp-shadow: 0 8px 28px rgba(16, 50, 36, .07);
}

.content-card {
  border-radius: 16px;
  box-shadow: var(--fp-shadow);
  border-color: var(--fp-border);
  padding: 1.35rem 1.5rem;
}

.page-header { margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.65rem; letter-spacing: -.02em; }
.page-header p { max-width: 760px; }

.btn-primary,
.btn-secondary,
.btn-table,
.btn-table-danger,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .55rem .9rem;
  border-radius: 10px;
  font-size: .86rem;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #1b7a50 0%, #145f3f 100%);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(23, 107, 70, .18);
}
.btn-primary:hover { background: linear-gradient(135deg, #176b46 0%, #104b32 100%); box-shadow: 0 7px 18px rgba(23,107,70,.22); transform: translateY(-1px); }

.btn-secondary,
.btn-table {
  background: #fff;
  color: #244337;
  border: 1px solid #cfdcd5;
  box-shadow: 0 2px 7px rgba(16, 50, 36, .05);
}
.btn-secondary:hover,
.btn-table:hover { background: var(--fp-green-soft); border-color: #91b8a5; color: var(--fp-green-dark); transform: translateY(-1px); }

.btn-table-danger,
.btn-danger {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
  border: 1px solid #f3c7c3;
}
.btn-table-danger:hover,
.btn-danger:hover { background: #fee4e2; border-color: #e99b94; transform: translateY(-1px); }

.table-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th { background: #f5f8f6; color: #53635b; font-size: .76rem; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.data-table td { vertical-align: middle; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: #fbfdfc; }

.form-group input,
.form-group select,
.form-group textarea,
.search-box,
.date-compact {
  border-radius: 10px;
  border-color: #d6e0da;
  background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-box:focus {
  border-color: #69a487;
  box-shadow: 0 0 0 3px rgba(23, 107, 70, .10);
}

.metric-card { border-radius: 14px; border: 1px solid var(--fp-border); box-shadow: 0 5px 20px rgba(16,50,36,.055); }
.metric-value { letter-spacing: -.025em; }
.status-badge { border-radius: 999px; font-weight: 650; padding: .28rem .6rem; }

.subsection-card {
  margin-top: 1.25rem;
  padding: 1.1rem;
  background: var(--fp-muted-bg);
  border: 1px solid var(--fp-border);
  border-radius: 14px;
}
.forecast-editor-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
.forecast-total { display: flex; justify-content: flex-end; margin-top: .9rem; font-size: 1rem; }
.todo-card { border-left: 4px solid var(--fp-green); }
.todo-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-radius:10px; background:var(--fp-muted-bg); }
.todo-row span { color: var(--fp-text-light); }
.compact-table .data-table td, .compact-table .data-table th { padding-top: .6rem; padding-bottom: .6rem; }

@media (max-width: 1000px) {
  .forecast-editor-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .page-header, .table-header, .todo-row { align-items: stretch; flex-direction: column; }
  .form-grid, .forecast-editor-grid { grid-template-columns: 1fr; }
  .search-box { width: 100%; box-sizing: border-box; }
}

/* Paket 7: Profitabilitaets-Ampel */
.status-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* =========================================================
   Paket 7.1 – Profitabilitaet, BWA, Kalkulation
   ========================================================= */
.profitability-table td { vertical-align: middle; }
.profitability-detail-row > td { padding: 0 !important; background: #f7faf8; }
.profitability-detail { padding: 18px; border-top: 1px solid #dfe8e2; }
.profit-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profit-detail-card { background: #fff; border: 1px solid #dce6df; border-radius: 12px; overflow: hidden; }
.profit-detail-card h3 { margin: 0; padding: 13px 15px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-bottom: 1px solid #e7ede9; }
.profit-detail-card h3 span { white-space: nowrap; color: #1f6f4a; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #edf1ee; }
.mini-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #66736b; background: #f8faf9; }
.empty-inline { padding: 16px; color: #6f7a74; }
.cost-adjustments { padding: 8px 14px 13px; }
.cost-adjustments > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed #e0e7e2; }
.cost-adjustments > div:last-child { border-bottom: 0; }
.warning-message { padding: 10px 12px; margin-bottom: 14px; border-radius: 8px; background: #fff7df; border: 1px solid #efd793; color: #725b18; }

.bwa-header { align-items: end; }
.bwa-period { display: flex; gap: 10px; align-items: end; }
.bwa-period label { display: grid; gap: 5px; font-weight: 700; font-size: 12px; color: #56645b; }
.bwa-period input, .bwa-period select { min-width: 105px; padding: 9px 10px; border: 1px solid #d1ddd5; border-radius: 8px; background: #fff; }
.bwa-entry-table td:first-child { width: 90px; font-variant-numeric: tabular-nums; color: #68766d; }
.bwa-entry-table td:nth-child(3), .bwa-entry-table th:nth-child(3) { width: 210px; }
.bwa-entry-table input { width: 100%; min-width: 130px; box-sizing: border-box; text-align: right; padding: 9px 10px; border: 1px solid #d1ddd5; border-radius: 7px; font-variant-numeric: tabular-nums; }
.bwa-entry-table .bwa-group { background: #f8faf9; }
.bwa-summary { margin-top: 18px; }

.calculation-editor, .calculation-position-card { scroll-margin-top: 20px; }
.calculation-kpis, .calculation-total { margin-top: 18px; }
.calculation-position-card .data-table td { vertical-align: middle; }

@media (max-width: 900px) {
  .profit-detail-grid { grid-template-columns: 1fr; }
  .bwa-period { width: 100%; margin-top: 10px; }
  .bwa-header { align-items: start; flex-direction: column; }
}

/* =========================================================
   Paket 8 – Unternehmerisches Profitabilitaets-Cockpit
   ========================================================= */
.p8-kpis { margin-bottom: 14px; }
.metric-hint { margin-top: 5px; color: #6b786f; font-size: 12px; }
.p8-status-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0 0 18px; }
.p8-status-card { border: 1px solid #dce6df; border-radius: 12px; background: #fff; padding: 12px 14px; display: flex; align-items: baseline; gap: 9px; cursor: pointer; text-align: left; }
.p8-status-card strong { font-size: 22px; }
.p8-status-card span { font-size: 13px; font-weight: 650; }
.p8-good { border-left: 4px solid #2f855a; } .p8-warning { border-left: 4px solid #d69e2e; } .p8-danger { border-left: 4px solid #c53030; } .p8-missing { border-left: 4px solid #718096; }
.p8-toolbar { gap: 18px; } .p8-filters { display: flex; gap: 10px; align-items: center; } .p8-filters select { padding: 9px 10px; border: 1px solid #d1ddd5; border-radius: 8px; background: #fff; }
.status-missing { background: #edf2f7; color: #4a5568; border: 1px solid #cbd5e0; }
.p8-row-danger { box-shadow: inset 4px 0 0 #c53030; } .p8-row-warning { box-shadow: inset 4px 0 0 #d69e2e; } .p8-row-missing { box-shadow: inset 4px 0 0 #718096; }
.p8-waterfall { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
.p8-waterfall > div { border: 1px solid #dce6df; background: #fff; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.p8-waterfall span { color: #66736b; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .p8-waterfall strong { font-size: 15px; }
.p8-waterfall .minus { background: #fffaf0; } .p8-waterfall .result { background: #f1f8f4; border-color: #b9d8c6; }
.p8-detail-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
@media (max-width: 1000px) { .p8-status-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } .p8-waterfall { grid-template-columns: 1fr 1fr; } .p8-filters { width: 100%; } }
@media (max-width: 700px) { .p8-status-strip, .p8-waterfall { grid-template-columns: 1fr; } .p8-filters { flex-direction: column; align-items: stretch; } }

/* ForstPro 8.1 - Profitabilitaetswarnungen im Dashboard */
.p81-profit-card { border-top: 4px solid #2d6a4f; }
.p81-profit-warning { border-left: 4px solid #b7791f; }
.p81-profit-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin: 1rem 0 1.1rem; }
.p81-profit-summary > div { border: 1px solid var(--fp-border); border-radius: 12px; padding: .8rem 1rem; background: #fafcfb; }
.p81-profit-summary span { display: block; font-size: .78rem; color: var(--fp-text-muted); margin-bottom: .25rem; }
.p81-profit-summary strong { font-size: 1.15rem; }
.p81-profit-ok { padding: .9rem 1rem; border-radius: 10px; background: rgba(45,106,79,.08); font-weight: 600; }
.p81-profit-table td { vertical-align: middle; }
@media (max-width: 900px) { .p81-profit-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .p81-profit-summary { grid-template-columns: 1fr; } }

/* Paket 8.2 - Handlungscenter */
.p82-action-kpis { margin-bottom: 1rem; }
.p82-action-list { display:flex; flex-direction:column; gap:.65rem; }
.p82-action-row { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1rem; border:1px solid var(--border-color,#e4e7eb); border-radius:12px; background:#fff; }
.p82-action-main p { margin:.25rem 0; }
.p82-action-meta { font-size:.78rem; opacity:.65; margin-bottom:.2rem; text-transform:uppercase; letter-spacing:.03em; }
.p82-priority { font-weight:800; font-size:.72rem; text-align:center; padding:.4rem .45rem; border-radius:999px; }
.p82-p0 { background:#fee2e2; color:#991b1b; }.p82-p1 { background:#ffedd5; color:#9a3412; }.p82-p2 { background:#fef3c7; color:#92400e; }.p82-p3 { background:#e0f2fe; color:#075985; }
@media(max-width:760px){.p82-action-row{grid-template-columns:1fr}.p82-priority{justify-self:start}.p82-action-row .btn-secondary{justify-self:start}}

/* Paket 9.0 - Kundenbereitschaft */
.p9-readiness{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.25rem;border-radius:.75rem;margin-bottom:1rem}.p9-ready{background:#e8f5e9}.p9-attention{background:#fff3e0}.p9-check{display:grid;grid-template-columns:90px 1fr auto;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(0,0,0,.08)}.p9-check:last-child{border-bottom:0}.p9-check-error strong{color:#b42318}.p9-check-warn strong{color:#b54708}.p9-check a{font-weight:700;text-decoration:none}@media(max-width:700px){.p9-check{grid-template-columns:70px 1fr}.p9-check a{grid-column:2}.p9-readiness{align-items:flex-start;flex-direction:column}}

/* ForstPro 9.1 - gefuehrte Einrichtung */
.p10-progress{background:#fff;border:1px solid #e4e7e5;border-radius:14px;padding:18px 20px;margin-bottom:18px}.p10-progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:10px}.p10-progress span{color:#68736d}.p10-steps{display:grid;gap:12px}.p10-step{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;background:#fff;border:1px solid #e4e7e5;border-radius:14px;padding:16px}.p10-step-number{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f1f3f2;font-weight:800}.p10-step-ok .p10-step-number{background:#e8f5ec}.p10-step-body{display:flex;flex-direction:column;gap:3px}.p10-step-body span{color:#68736d;font-size:.92rem}@media(max-width:720px){.p10-step{grid-template-columns:42px 1fr}.p10-step>a{grid-column:2}}

/* =========================================================
   ForstPro 9.2 – Produktdesign / Navigation / Oberflaeche
   ========================================================= */
:root {
  --fp-green: #246447;
  --fp-green-dark: #163f2d;
  --fp-green-light: #eaf4ee;
  --fp-bg: #f3f6f4;
  --fp-card: #ffffff;
  --fp-text: #1e2923;
  --fp-text-light: #69756e;
  --fp-border: #dfe7e2;
  --fp-radius: 16px;
  --fp-shadow: 0 8px 28px rgba(19, 48, 36, .06);
}
body { letter-spacing:-.005em; }
.page-header { margin-bottom:1.35rem; align-items:flex-end; }
.page-header h1 { font-size:1.7rem; letter-spacing:-.035em; }
.content-card { border-radius:18px; box-shadow:var(--fp-shadow); border-color:#e3e9e5; padding:1.35rem; }
.metric-card { border:1px solid #e3e9e5 !important; border-radius:18px !important; box-shadow:0 7px 24px rgba(19,48,36,.045) !important; }
.data-table thead th { background:#f7f9f8; color:#5b6861; font-size:.72rem; letter-spacing:.055em; text-transform:uppercase; }
.data-table tbody tr { transition:background .14s ease; }
.data-table tbody tr:hover { background:#f8fbf9; }
.btn-primary, .btn-secondary { border-radius:10px; min-height:40px; }
.status-badge { border-radius:999px; font-weight:750; }

/* Sidebar */
.fp-nav-brand { padding:1.2rem 1rem 1rem; border-bottom:1px solid rgba(255,255,255,.07); }
.fp-brand-link { display:flex; align-items:center; gap:.75rem; color:#fff !important; }
.fp-brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#4b956e,#28684a); box-shadow:0 8px 22px rgba(0,0,0,.18); font-size:.76rem; font-weight:900; letter-spacing:.06em; }
.fp-brand-copy { display:flex; flex-direction:column; line-height:1.1; }
.fp-brand-copy strong { font-size:1.05rem; }
.fp-brand-copy small { margin-top:4px; color:rgba(255,255,255,.55); font-size:.68rem; }
.fp-nav { padding:.75rem .65rem 1.25rem; }
.fp-nav-primary { display:grid; gap:.18rem; padding-bottom:.65rem; }
.fp-nav-group { border-top:1px solid rgba(255,255,255,.06); padding-top:.35rem; margin-top:.3rem; }
.fp-nav-group summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:.7rem .65rem .4rem; color:rgba(255,255,255,.48); font-size:.66rem; font-weight:850; letter-spacing:.075em; text-transform:uppercase; user-select:none; }
.fp-nav-group summary::-webkit-details-marker { display:none; }
.fp-nav-chevron { font-size:1rem; transition:transform .16s ease; }
.fp-nav-group[open] .fp-nav-chevron { transform:rotate(90deg); }
.fp-nav-group-links { display:grid; gap:.12rem; }
.fp-nav-link { display:flex !important; align-items:center; gap:.62rem; min-height:39px; padding:.45rem .55rem !important; border-radius:10px !important; color:rgba(255,255,255,.72) !important; font-size:.83rem; font-weight:560; text-decoration:none !important; }
.fp-nav-link:hover { color:#fff !important; background:rgba(255,255,255,.065); }
.fp-nav-link.active { color:#fff !important; background:rgba(74,151,108,.28); box-shadow:inset 3px 0 0 #69b68c; }
.fp-nav-link-main { font-weight:720; color:rgba(255,255,255,.88) !important; }
.fp-nav-icon { flex:0 0 27px; height:27px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.065); color:rgba(255,255,255,.8); font-size:.62rem; font-weight:850; letter-spacing:-.02em; }
.fp-nav-link.active .fp-nav-icon { background:rgba(105,182,140,.22); color:#dff5e8; }

/* Produktreife-Status */
.fp-health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.fp-health-item { display:flex; gap:.75rem; align-items:center; padding:.9rem 1rem; border:1px solid var(--fp-border); border-radius:14px; background:#fbfcfb; }
.fp-health-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.fp-health-ok { background:#3e9b69; box-shadow:0 0 0 5px rgba(62,155,105,.10); }
.fp-health-warn { background:#d69d36; box-shadow:0 0 0 5px rgba(214,157,54,.10); }
.fp-health-error { background:#c85454; box-shadow:0 0 0 5px rgba(200,84,84,.10); }
.fp-health-item strong { display:block; font-size:.83rem; }
.fp-health-item small { color:var(--fp-text-light); }
.fp-system-meta { display:flex; gap:.5rem; flex-wrap:wrap; }
.fp-system-pill { padding:.42rem .7rem; border-radius:999px; background:#f1f5f2; border:1px solid var(--fp-border); font-size:.76rem; color:#536159; }
.fp-error-card { max-width:760px; margin:5vh auto; text-align:center; padding:2.2rem; }
.fp-error-code { width:52px; height:52px; margin:0 auto 1rem; border-radius:16px; display:grid; place-items:center; background:#fff1ef; color:#9b463e; font-weight:900; }
@media (max-width:900px) { .fp-health-grid { grid-template-columns:1fr; } .fp-nav-group { border-top-color:rgba(255,255,255,.09); } }


/* =========================================================
   ForstPro 10.0 – Management Cockpit / Produktreife
   ========================================================= */
.fp10-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1rem;padding:1.6rem 1.7rem;border-radius:22px;background:linear-gradient(135deg,#173f2e 0%,#245f45 58%,#317454 100%);color:#fff;box-shadow:0 14px 34px rgba(18,55,39,.16)}
.fp10-hero h1{margin:.25rem 0 .35rem;font-size:2rem;letter-spacing:-.045em;color:#fff}.fp10-hero p{margin:0;max-width:720px;color:rgba(255,255,255,.72)}.fp10-eyebrow{font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.11em;color:#a8d8bc}.fp10-hero-actions{display:flex;gap:.55rem;flex-wrap:wrap}.fp10-hero .btn-primary{background:#fff;color:#17432f;box-shadow:none}.fp10-hero .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}.fp10-hero .btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.fp10-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-bottom:.9rem}.fp10-focus-card{display:flex;flex-direction:column;min-height:120px;padding:1rem 1.1rem;border:1px solid var(--fp-border);border-radius:17px;background:#fff;color:var(--fp-text)!important;text-decoration:none!important;box-shadow:0 6px 22px rgba(19,48,36,.045);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.fp10-focus-card:hover{transform:translateY(-2px);border-color:#b7d0c2;box-shadow:0 10px 28px rgba(19,48,36,.08)}.fp10-focus-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.055em;color:var(--fp-text-light);font-weight:780}.fp10-focus-card strong{margin:.35rem 0 .15rem;font-size:1.55rem;letter-spacing:-.035em}.fp10-focus-card small{margin-top:auto;color:var(--fp-text-light);line-height:1.35}
.fp-topbar-user{display:flex;align-items:center;gap:.7rem}.fp-version-badge{padding:.28rem .5rem;border-radius:8px;background:#eaf4ee;color:#246447;font-size:.68rem;font-weight:850}.fp-logout-link{font-size:.76rem;font-weight:650;color:#64736b;text-decoration:none}.fp-logout-link:hover{color:#214f39;text-decoration:underline}
.fp-nav-group-admin{margin-top:.65rem}.fp-nav-group-admin summary{color:rgba(255,255,255,.38)}
@media(max-width:900px){.fp10-hero{align-items:flex-start;flex-direction:column}.fp10-focus-grid{grid-template-columns:1fr}.fp10-hero h1{font-size:1.65rem}.fp-version-badge,.fp-logout-link{display:none}}


/* =========================================================
   ForstPro 10.1 – Projekt-Cockpit / operative Projektansicht
   ========================================================= */
.fp101-project-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1.25rem;margin-bottom:.85rem;padding:1.35rem 1.45rem;border-radius:20px;background:linear-gradient(135deg,#183f2f,#2b6d4f);color:#fff;box-shadow:0 12px 30px rgba(18,55,39,.13)}.fp101-project-hero h2{margin:.22rem 0 .3rem;color:#fff;font-size:1.55rem;letter-spacing:-.035em}.fp101-project-hero p{margin:0;color:rgba(255,255,255,.7)}.fp101-project-actions{display:flex;gap:.5rem;flex-wrap:wrap}.fp101-project-hero .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;text-decoration:none;display:inline-flex;align-items:center}.fp101-project-hero .btn-primary{background:#fff;color:#17432f;text-decoration:none;display:inline-flex;align-items:center}.fp101-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:.8rem}.fp101-kpi{display:flex;flex-direction:column;min-height:112px;padding:1rem 1.05rem;border:1px solid var(--fp-border);border-radius:16px;background:#fff;box-shadow:0 5px 20px rgba(19,48,36,.04)}.fp101-kpi span,.fp101-context-card>span{font-size:.69rem;text-transform:uppercase;letter-spacing:.055em;color:var(--fp-text-light);font-weight:800}.fp101-kpi strong{margin:.35rem 0;font-size:1.28rem}.fp101-kpi small,.fp101-context-card small{margin-top:auto;color:var(--fp-text-light)}.fp101-alert{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;margin-bottom:.8rem;padding:.8rem 1rem;border:1px solid #efd6a6;border-radius:14px;background:#fff8e9}.fp101-alert span{color:#6e624d;font-size:.86rem}.fp101-alert a{font-weight:750;color:#805f20;text-decoration:none}.fp101-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:.8rem}.fp101-context-card{margin:0!important;min-height:96px;display:flex;flex-direction:column;gap:.28rem}.fp101-context-card strong{font-size:.98rem}.fp101-profit{font-size:.78rem;font-weight:800;white-space:nowrap}.fp101-profit-good{color:#23714b}.fp101-profit-warn{color:#9a6716}.fp101-profit-bad{color:#a23c36}.fp101-profit-missing{color:#8a6a2d;background:#fff5d9;padding:.22rem .45rem;border-radius:7px}@media(max-width:1050px){.fp101-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fp101-project-hero{align-items:flex-start;flex-direction:column}.fp101-context-grid{grid-template-columns:1fr}}@media(max-width:650px){.fp101-kpi-grid{grid-template-columns:1fr}.fp101-alert{grid-template-columns:1fr}.fp101-project-actions{width:100%}}


/* =========================================================
   ForstPro 10.2 - Operativer Workflow
   ========================================================= */
.fp102-flow{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:0 0 1.1rem;padding:.65rem .75rem;border:1px solid var(--border-color,#dfe6e1);border-radius:14px;background:rgba(255,255,255,.72)}
.fp102-flow-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.58;margin-right:.25rem}
.fp102-flow a{padding:.48rem .72rem;border-radius:10px;text-decoration:none;font-weight:700;font-size:.86rem;color:inherit;background:rgba(0,0,0,.035)}
.fp102-flow a:hover,.fp102-flow a.active{background:#173f2d;color:#fff}
.fp102-context-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.65rem .8rem;margin:.25rem 0 .85rem;border-radius:12px;background:rgba(23,63,45,.055)}
.fp102-context-actions span{font-size:.82rem;font-weight:700;opacity:.72;margin-right:.15rem}
.fp102-context-actions a{font-size:.82rem;font-weight:750;text-decoration:none;padding:.38rem .58rem;border-radius:8px;background:rgba(255,255,255,.78);color:inherit}
.fp102-manual-guard{display:flex;gap:.55rem 1rem;align-items:center;flex-wrap:wrap;margin:0 0 .8rem;padding:.8rem 1rem;border-radius:13px;border:1px solid rgba(23,63,45,.18);background:rgba(23,63,45,.06)}
.fp102-manual-guard strong{color:#173f2d}.fp102-manual-guard span{font-size:.88rem;opacity:.78}
.fp102-mini-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0 0 1rem}
.fp102-mini-kpis>div{padding:.9rem 1rem;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid var(--border-color,#dfe6e1)}
.fp102-mini-kpis span{display:block;font-size:.76rem;font-weight:750;opacity:.62}.fp102-mini-kpis strong{display:block;margin-top:.15rem;font-size:1.35rem}
@media(max-width:760px){.fp102-flow{align-items:stretch}.fp102-flow-label{width:100%;margin-bottom:.1rem}.fp102-flow a{flex:1 1 calc(50% - .5rem);text-align:center}.fp102-mini-kpis{grid-template-columns:1fr}.fp102-context-actions{align-items:stretch}.fp102-context-actions span{width:100%}}


/* ForstPro 10.2 - Kalkulation & Branding */
.fp-brand-logo { overflow: hidden; background: #fff; padding: 4px; }
.fp-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.form-hint { display: block; margin-top: 5px; opacity: .72; line-height: 1.35; }
.fp102-calc-formula { margin: 16px 0; line-height: 1.5; }


/* 10.2.1 - Erklaerung Fixkosten-Unterdeckung */
.fixcost-explainer { margin-top: .75rem; border: 1px solid rgba(0,0,0,.10); border-radius: .7rem; background: rgba(255,255,255,.55); }
.fixcost-explainer summary { cursor: pointer; padding: .75rem .9rem; font-weight: 700; }
.fixcost-explainer-body { padding: 0 .9rem .9rem; font-size: .9rem; }
.fixcost-explainer-body p { margin: 0 0 .65rem; }
.fixcost-formula { padding: .65rem .75rem; margin-bottom: .75rem; border-radius: .55rem; background: rgba(0,0,0,.045); font-weight: 600; }
.fixcost-detail-row { display: grid; gap: .18rem; padding: .65rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.fixcost-detail-row span { color: var(--text-muted, #64748b); }

/* =========================================================
   ForstPro 10.3 - Kundenreife & Produktpakete
   ========================================================= */
.fp103-package-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0 1rem}.fp103-package-actions .btn-secondary{min-width:110px}
.fp103-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.fp103-package-card{display:flex;flex-direction:column;gap:.3rem;min-height:125px;padding:1rem 1.1rem;border:1px solid var(--fp-border);border-radius:16px;background:#fbfcfb}.fp103-package-card>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fp-text-light);font-weight:800}.fp103-package-card>strong{font-size:1.15rem}.fp103-package-card>small{margin-top:auto;color:var(--fp-text-light);line-height:1.45}.fp103-note{margin-top:1rem;padding:.8rem 1rem;border-radius:12px;background:#f1f7f3;border:1px solid #d6e7dc;color:#40584a;font-size:.86rem}
@media(max-width:850px){.fp103-package-grid{grid-template-columns:1fr}}

/* ForstPro 10.4 - Kunden-Onboarding & Mandantenautomatisierung */
.fp104-platform-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;margin-bottom:1rem;border:1px solid rgba(25,135,84,.22);border-radius:16px;background:linear-gradient(135deg,rgba(25,135,84,.09),rgba(255,255,255,.96))}.fp104-platform-banner div{display:flex;flex-direction:column}.fp104-platform-banner span{font-size:.9rem;color:#667085}.fp104-provision-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fp104-package-preview{display:flex;flex-direction:column;padding:.9rem;border-radius:12px;background:#f6f8f7}.fp104-package-preview span{font-size:.86rem;color:#667085;margin-top:.25rem}.fp104-onboarding-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}.fp104-onboarding-summary>div{display:flex;flex-direction:column;padding:1rem;border-radius:14px;background:#fff;border:1px solid #e5e9e7}.fp104-onboarding-summary span{font-size:.8rem;color:#667085;text-transform:uppercase;letter-spacing:.04em}.fp104-onboarding-summary strong{font-size:1.25rem;margin-top:.2rem}@media(max-width:800px){.fp104-provision-grid,.fp104-onboarding-summary{grid-template-columns:1fr}.fp104-platform-banner{align-items:flex-start;flex-direction:column}}

/* ForstPro 10.5 – Marketing & Testzugang */
.fp105-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.fp105-kpis .content-card{display:flex;flex-direction:column;gap:.35rem}.fp105-kpis strong{font-size:1.8rem}.fp105-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fp105-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(127,127,127,.16)}
.fp105-trial{margin:0;min-height:100vh;background:#f3f6f3;display:grid;place-items:center;padding:24px;font-family:Arial,sans-serif;color:#17251c}.fp105-trial-card{width:min(620px,100%);background:white;border-radius:20px;padding:32px;box-shadow:0 18px 60px rgba(20,50,30,.12)}.fp105-trial-logo{height:54px;max-width:220px;object-fit:contain;margin-bottom:24px}.fp105-eyebrow{font-weight:700;color:#327245;text-transform:uppercase;letter-spacing:.04em}.fp105-trial h1{font-size:2rem;margin:.4rem 0}.fp105-trial form{display:grid;gap:8px;margin-top:24px}.fp105-trial label{font-weight:650;margin-top:8px}.fp105-trial input:not([type=checkbox]){padding:12px 14px;border:1px solid #cbd6cd;border-radius:9px;font:inherit}.fp105-trial button{margin-top:14px;padding:13px 18px;border:0;border-radius:9px;background:#2e7042;color:#fff;font-weight:700;font-size:1rem;cursor:pointer}.fp105-check{display:flex;gap:10px;align-items:flex-start;font-weight:400!important}.fp105-login{text-align:center;margin:22px 0 0}@media(max-width:800px){.fp105-kpis{grid-template-columns:1fr 1fr}.fp105-grid{grid-template-columns:1fr}}@media(max-width:520px){.fp105-kpis{grid-template-columns:1fr}.fp105-trial-card{padding:22px}}

/* ForstPro 10.6 - Verkaufsreife / Test-Funnel */
.fp106-funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.fp106-funnel .content-card{display:flex;flex-direction:column;gap:.3rem;min-height:112px}.fp106-funnel small{font-weight:800;color:var(--fp-text-light);text-transform:uppercase;letter-spacing:.04em}.fp106-funnel strong{font-size:1.75rem}.fp106-funnel span{font-size:.78rem;color:var(--fp-text-light);margin-top:auto}.fp106-status{display:inline-flex;padding:.25rem .5rem;border-radius:999px;background:#eef5f0;color:#285b3c;font-size:.75rem;font-weight:800}.fp106-actions{display:flex;gap:.35rem;flex-wrap:wrap}.fp106-actions .btn-primary,.fp106-actions .btn-secondary{min-height:32px;padding:.35rem .6rem;font-size:.78rem;white-space:nowrap}.fp106-trial-note{padding:12px 14px;border-radius:10px;background:#eef7f0;color:#245a38;margin:12px 0}.fp106-resend{display:none;margin-top:10px}.fp106-resend.is-visible{display:block}@media(max-width:1100px){.fp106-funnel{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.fp106-funnel{grid-template-columns:1fr 1fr}}@media(max-width:480px){.fp106-funnel{grid-template-columns:1fr}}

/* FORSTIO 10.7.1 – stronger product presence */
.fp-nav-brand{padding:1.35rem 1.15rem 1.15rem!important}
.fp-brand-link{gap:.9rem!important}
.fp-brand-mark{width:58px!important;height:58px!important;border-radius:15px!important}
.fp-brand-logo{background:#fff!important;padding:5px!important}
.fp-brand-logo img{width:100%!important;height:100%!important;object-fit:contain!important}
.fp-brand-copy strong{font-size:1.38rem!important;letter-spacing:.035em!important;font-weight:850!important}
.fp-brand-copy small{font-size:.78rem!important;margin-top:5px!important;color:rgba(255,255,255,.72)!important}
.fp-nav-link{font-size:.96rem!important;min-height:42px}
.fp-nav-link-main{font-size:1.02rem!important;font-weight:750!important}
.fp-nav-group summary{font-size:.82rem!important;font-weight:800!important;letter-spacing:.035em}

/* =========================================================
   FORSTIO 10.8.0 - Mobile & Tablet Design Pass
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%}
.table-container{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.data-table{min-width:720px}
input,select,textarea,button{max-width:100%}

@media(max-width:900px){
  .fp-nav-brand{min-height:76px;padding:.72rem 5.3rem .72rem 1rem!important;display:flex;align-items:center}
  .fp-brand-mark{width:46px!important;height:46px!important;border-radius:12px!important}
  .fp-brand-copy strong{font-size:1.12rem!important}
  .fp-brand-copy small{font-size:.7rem!important;margin-top:2px!important}
  .fp-nav{padding-bottom:.75rem}
  .fp-nav-primary{padding-top:.35rem}
  .fp-nav-link{min-height:46px;padding:.68rem 1rem!important}
  .fp-nav-group summary{min-height:46px;padding:.7rem 1rem!important}
  .fp-topbar{padding-left:1rem!important;padding-right:1rem!important}
  .fp-content{padding-left:1rem!important;padding-right:1rem!important;width:100%}
  .page-header{gap:.75rem}
  .page-header>div,.table-header>div{min-width:0;width:100%}
  .content-card{max-width:100%;overflow:hidden}
  .table-container{margin-left:-.15rem;margin-right:-.15rem;width:calc(100% + .3rem)}
  .fp102-flow a{min-height:44px;display:flex;align-items:center;justify-content:center}
  .btn-primary,.btn-secondary,.btn-table,.btn-table-danger{min-height:44px}
}

@media(max-width:600px){
  .fp-topbar{height:56px!important}
  .fp-topbar-title strong{font-size:.82rem;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fp-topbar-kicker{font-size:.61rem}
  .fp-user-chip{padding:.35rem;border-radius:11px}
  .fp-user-avatar{width:32px;height:32px}
  .fp-content{padding:.8rem .75rem 2rem!important}
  .page-header{margin-bottom:.85rem!important}
  .page-header h1{font-size:1.42rem!important;line-height:1.15}
  .page-header p{font-size:.9rem;line-height:1.45}
  .content-card{padding:.9rem!important;border-radius:14px!important}
  .table-header{gap:.65rem}
  .search-box{min-width:0!important}
  .form-grid{gap:.8rem}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;min-height:44px}
  .form-actions{gap:.55rem}
  .form-actions .btn-primary,.form-actions .btn-secondary,.form-actions button{width:100%;justify-content:center}
  .table-container{border:1px solid var(--fp-border);border-radius:11px;background:#fff}
  .data-table{font-size:.84rem}
  .data-table th{font-size:.68rem}
  .data-table th,.data-table td{padding:.72rem .65rem}
  .table-actions{flex-wrap:nowrap}
  .fp101-project-hero{padding:1rem!important;border-radius:15px!important}
  .fp101-project-hero h2{font-size:1.3rem!important}
  .fp101-project-actions .btn-primary,.fp101-project-actions .btn-secondary{flex:1 1 100%;justify-content:center}
  .fp102-flow a{flex:1 1 100%!important}
  .fp105-trial{padding:12px}
  .fp105-trial-card{border-radius:15px!important;padding:20px!important}
}

@media(max-width:380px){
  .fp-brand-copy small{display:none}
  .fp-topbar-title strong{max-width:155px}
  .fp-content{padding-left:.6rem!important;padding-right:.6rem!important}
}

/* =========================================================
   FORSTIO 10.9.0 - SaaS-Verkaufsreife & Lizenzverwaltung
   ========================================================= */
.fp109-header-actions{display:flex;gap:.55rem;flex-wrap:wrap}.fp109-license-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}.fp109-license-kpis .content-card{display:flex;flex-direction:column;gap:.25rem;min-height:105px}.fp109-license-kpis small,.fp109-step-label{text-transform:uppercase;letter-spacing:.055em;font-size:.7rem;font-weight:850;color:var(--fp-text-light)}.fp109-license-kpis strong{font-size:1.8rem}.fp109-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,260px);gap:.7rem;margin-bottom:1rem}.fp109-status{display:inline-flex;padding:.3rem .58rem;border-radius:999px;font-size:.73rem;font-weight:850;white-space:nowrap}.fp109-status.is-active{background:#e8f5ec;color:#1f6b39}.fp109-status.is-test{background:#eaf2ff;color:#315f9f}.fp109-status.is-grace{background:#fff4d8;color:#795b10}.fp109-status.is-blocked,.fp109-status.is-expired{background:#fbe9e9;color:#963939}.fp109-days{display:block;margin-top:.35rem;color:var(--fp-text-light);white-space:nowrap}.fp109-license-actions{display:grid;grid-template-columns:minmax(120px,1fr) 92px repeat(4,max-content);gap:.35rem;align-items:center;min-width:690px}.fp109-license-actions .btn-primary,.fp109-license-actions .btn-secondary{min-height:34px;padding:.38rem .58rem;font-size:.76rem;white-space:nowrap}.fp109-duration{width:92px}.fp109-confirm-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.fp109-confirm-card p{margin-bottom:0}.fp109-confirm-card .btn{white-space:nowrap}.fp109-step-label{display:block;margin-bottom:.25rem;color:#327245}
@media(max-width:1100px){.fp109-license-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fp109-license-table{min-width:980px}}
@media(max-width:700px){.fp109-header-actions{width:100%}.fp109-header-actions a{flex:1 1 100%;text-align:center}.fp109-license-kpis{grid-template-columns:1fr 1fr;gap:.55rem}.fp109-license-kpis .content-card{min-height:88px}.fp109-license-kpis strong{font-size:1.45rem}.fp109-filterbar{grid-template-columns:1fr}.fp109-confirm-card{align-items:stretch;flex-direction:column}.fp109-confirm-card .btn{width:100%}.fp109-license-actions .btn-primary,.fp109-license-actions .btn-secondary{min-height:40px}}
@media(max-width:420px){.fp109-license-kpis{grid-template-columns:1fr}.fp109-license-kpis .content-card{min-height:76px}}