/* =========================
   FONTS (lokal gehostet – DSGVO-konform)
========================= */
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('fonts/inter-latin.woff2') format('woff2');
}

/* =========================
   DESIGN TOKENS
========================= */
:root{
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;

    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;
    --radius-xl:  32px;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg:  0 20px 48px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
    --shadow-green: 0 8px 28px rgba(34,197,94,.30);

    --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* =========================
   RESET
========================= */
*, *::before, *::after{
    margin:0; padding:0;
    box-sizing:border-box;
}

html{ scroll-behavior:smooth; }

body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:17px; /* Barrierefreiheit: erhöht von 16px */
    line-height:1.6;
    color:var(--gray-900);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}

/* =========================
   TYPOGRAPHY
========================= */
h1,h2,h3,h4{
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.03em;
    color:var(--gray-900);
}

h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2.2rem); margin-bottom:12px; }
h3{ font-size:1.15rem; margin-bottom:8px; }

p{
    color:var(--gray-500);
    line-height:1.7;
    margin-bottom:14px;
}

a{ color:inherit; }

/* =========================
   HEADER
========================= */
.app-header{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:80px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,0.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    z-index:1000;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.header-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1px;
}

.header-tagline{
    font-size:27px;
    line-height:1;
    white-space:nowrap;
}

/* ══════════════════════════════════════════════
   WORTMARKE
   Ein Wort, nur der Gewichtssprung gliedert es: "garten" mager,
   "agent" fett. Beides ist Inter – dieselbe Schrift wie der Fließtext,
   also keine zusätzliche Datei und keine zweite Formensprache.
   ══════════════════════════════════════════════ */
.wortmarke{
    display:inline-block;
    letter-spacing:-0.03em;
    color:var(--green-900);
    white-space:nowrap;
}
.wortmarke .wm-leicht{ font-weight:300; }
.wortmarke .wm-fett{ font-weight:800; }

/* Auf dem dunklen Rollenband erbt die Wortmarke die helle Schriftfarbe */
.adm-role .wortmarke{ color:inherit; }

.logo{
    height:52px;
    object-fit:contain;
}

.header-title{
    display:none;
}

/* Header-Aktionen (Landingpage): Links + Login/CTA */
.header-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:nowrap;
    flex-shrink:0;
}
.header-actions .menu-btn{ flex-shrink:0; }
.header-link{
    font-size:14px;
    font-weight:600;
    color:var(--gray-700);
    text-decoration:none;
    white-space:nowrap;
    transition:color var(--transition);
}
.header-link:hover{ color:var(--green-600); }
.btn.header-cta{
    padding:10px 20px;
    min-height:44px;
    font-size:14px;
    width:auto;
}
/* Symbol neben dem Beschriftungstext – erst auf schmalen Schirmen sichtbar */
.header-link .nav-ico{ display:none; }

/* Aktuelle Seite im Kundenbereich hervorheben */
.app-header-customer .header-link.active{
    color:var(--green-700);
    font-weight:700;
    box-shadow:inset 0 -2px 0 var(--green-600);
}

/* Rückweg ins Personal-Umfeld – dunkel abgesetzt, damit sofort klar ist,
   dass er aus dem Kundenbereich herausführt. Er erscheint nur für Konten,
   die dort auch hindürfen. */
.header-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:700;
    text-decoration:none;
    color:#fff;
    background:var(--adm-ink, #1b2430);
    border-radius:var(--radius-sm);
    padding:8px 12px;
    white-space:nowrap;
    transition:background var(--transition);
}
.header-back:hover{ background:#2c3a4b; }

.btn.header-cta.header-logout{
    border-color:#f0d4d1;
    color:#b0453a;
}
.btn.header-cta.header-logout:hover{
    background:#fdf3f2;
    border-color:#e5b3ad;
    color:#93362c;
}

/* Ohne Burger-Menü müssen Login und Registrierung auf jeder Breite
   erreichbar bleiben – sonst käme man am Handy oben nicht mehr hinein. */
@media(max-width:900px){
    .app-header-public .header-link{ display:none; }   /* stehen im Footer */
    .header-actions{ gap:10px; }
}

/* ══════════════════════════════════════════════
   KLAPPMENÜ IM KUNDENBEREICH
   Solange die Punkte nebeneinander passen, stehen sie ausgeschrieben in
   der Kopfzeile. Wird es eng, übernimmt ein Menü hinter drei Punkten –
   das ist verständlicher als eine Reihe Symbole ohne Beschriftung.
   ══════════════════════════════════════════════ */
.hdr-menu{ display:none; position:relative; }

.hdr-dots{
    width:42px; height:42px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:4px;
    background:none; border:none; cursor:pointer;
    border-radius:var(--radius-sm);
    transition:background var(--transition);
}
.hdr-dots span{
    width:5px; height:5px;
    border-radius:50%;
    background:var(--gray-700);
    display:block;
}
.hdr-dots:hover,
.hdr-dots.offen{ background:var(--gray-100); }

.hdr-panel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:224px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:6px;
    z-index:1200;
}
.hdr-panel a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    color:var(--gray-900);
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}
.hdr-panel a:hover{ background:var(--gray-50); }
.hdr-panel a.active{ background:var(--green-50); color:var(--green-800); }
.hdr-panel .hdr-ico{ font-size:18px; line-height:1; width:22px; text-align:center; }
.hdr-panel .hdr-logout{
    color:#b0453a;
    border-top:1px solid var(--gray-200);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    margin-top:4px;
    padding-top:12px;
}
.hdr-panel .hdr-logout:hover{ background:#fdf3f2; }

/* Umschaltpunkt: ab hier reicht die Breite für die Beschriftungen nicht mehr */
@media(max-width:1040px){
    .app-header-customer .header-link,
    .app-header-customer .header-back,
    .app-header-customer .header-logout{ display:none; }
    .app-header-customer .hdr-menu{ display:block; }
    .app-header-customer .header-actions{ gap:4px; }
}

@media(max-width:620px){
    .app-header-customer{ padding:0 14px; }
    .app-header-customer .header-tagline{ font-size:19px; }
    .app-header-customer .logo{ height:40px; }
    .app-header-customer .logo-area{ gap:9px; }
}

@media(max-width:620px){
    /* Etwas flacher als am Schreibtisch – der Inhalt beginnt entsprechend höher. */
    .app-header{ height:72px; }
    .app-container{ padding-top:104px; }

    .app-header-public{ padding:0 14px; }
    /* Der Schriftzug bleibt auch am Handy stehen: ein Zeichen allein neben
       zwei Knöpfen wirkte verloren. Er wird nur kleiner gesetzt. */
    .app-header-public .header-tagline{ font-size:19px; }
    .app-header-public .logo{ height:40px; }
    .app-header-public .logo-area{ gap:9px; }

    .btn.header-cta{
        padding:0 14px;
        min-height:36px;   /* flacher als das Zeichen, sonst dominiert der Knopf */
        font-size:13.5px;
        width:auto;
    }
    /* Login als schlichter Textknopf, damit der grüne CTA führt */
    .btn.header-cta.ghost{
        border:none;
        background:transparent;
        padding:0 6px;
        color:var(--gray-700);
        font-weight:600;
    }
}

@media(max-width:400px){
    .btn.header-cta.header-cta-main{ padding:0 11px; font-size:13px; min-height:34px; }
    .btn.header-cta.ghost{ font-size:14px; padding:0 4px; }
    /* Auf sehr schmalen Geräten zählt jeder Punkt */
    .app-header-public{ padding:0 12px; }
    .app-header-public .header-tagline{ font-size:17.5px; }
    .app-header-public .logo{ height:36px; }
    .app-header-public .logo-area{ gap:7px; }
}

/* Unter 360 px reicht der Platz neben "Login" und dem grünen Knopf nicht
   mehr für den Schriftzug – dort steht wieder das Zeichen allein, statt
   dass sich Wortmarke und Knopf überlappen. */
@media(max-width:359px){
    .app-header-public .header-tagline{ display:none; }
    .app-header-public .logo{ height:40px; }
}

.menu-btn{
    width:40px; height:40px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:5px;
    cursor:pointer;
    border-radius:var(--radius-sm);
    transition:background var(--transition);
}

.menu-btn:hover{ background:var(--gray-100); }

.menu-btn span{
    display:block;
    width:22px; height:2px;
    background:var(--gray-900);
    border-radius:2px;
    transition:var(--transition);
}

/* =========================
   VERWALTUNGSBEREICH
   Nüchterner als der Kundenbereich: dichter gesetzt, weniger Rundung,
   Farbe nur dort, wo sie einen Zustand bedeutet.
========================= */
:root{
    --adm-ink:    #1b2430;
    --adm-line:   #d8dee6;
    --adm-line-2: #e8ecf1;
    --adm-bg:     #f4f6f8;
    --adm-muted:  #64748b;
    --adm-todo:   #c2410c;   /* zu erledigen */
    --adm-wait:   #a16207;   /* wartet auf andere */
    --adm-done:   #15803d;   /* abgeschlossen */
}

.adm-head{
    position:fixed;
    top:0; left:0; width:100%;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid var(--adm-line);
}

/* ── Rollenband ── */
.adm-role{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:9px 24px;
    background:var(--adm-ink);
    color:#e8edf3;
}
.adm-role-left,
.adm-role-right{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.adm-badge{
    background:#f59e0b;
    color:#1b2430;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:4px;
    white-space:nowrap;
}
.adm-brand{
    font-size:14px;
    font-weight:600;
    color:#b6c2d1;
    white-space:nowrap;
}
.adm-switch-label{
    font-size:12px;
    color:#8a97a8;
    white-space:nowrap;
}
.adm-switch,
.adm-logout{
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    padding:5px 12px;
    border-radius:5px;
    border:1px solid #3c4859;
    color:#d6dde6;
    white-space:nowrap;
    transition:background .15s, border-color .15s, color .15s;
}
.adm-switch:hover{ background:#2a3546; border-color:#55637a; color:#fff; }
.adm-logout{ border-color:#5d3b3b; color:#f0b4ae; }
.adm-logout:hover{ background:#43292a; border-color:#7d4b4b; color:#ffd9d4; }

/* ── Arbeitsmenü ── */
.adm-nav{
    display:flex;
    gap:2px;
    padding:0 16px;
    overflow-x:auto;
}
.adm-nav a{
    font-size:14px;
    font-weight:600;
    color:var(--adm-muted);
    text-decoration:none;
    padding:12px 14px;
    border-bottom:3px solid transparent;
    white-space:nowrap;
    transition:color .15s, border-color .15s, background .15s;
}
.adm-nav a:hover{ color:var(--adm-ink); background:var(--adm-bg); }

/* Offene Vorgänge direkt im Menü – die einzige Stelle im Verwaltungsbereich,
   die Rot benutzt, damit sie sofort auffällt. */
.adm-nav-badge{
    display:inline-block;
    margin-left:7px;
    min-width:20px;
    padding:1px 6px;
    border-radius:999px;
    background:#d63a2b;
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:18px;
    text-align:center;
    vertical-align:1px;
}

/* Nur für Screenreader – die Zahl allein sagt nichts aus. */
.sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.adm-nav a.active{
    color:var(--green-700);
    border-bottom-color:var(--green-600);
}

@media(max-width:760px){
    .adm-role{ padding:8px 14px; gap:10px; }
    .adm-brand{ display:none; }
    .adm-switch-label{ display:none; }
    .adm-nav{ padding:0 8px; }
    .adm-nav a{ padding:11px 10px; font-size:13.5px; }
}

/* ── Arbeitsfläche im Verwaltungsbereich ── */
.adm-panel{
    background:#fff;
    border:1px solid var(--adm-line);
    border-radius:8px;
    padding:20px 22px 16px;
    margin-bottom:18px;
}
.adm-panel-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.adm-title{
    font-size:20px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--adm-ink);
    margin:0;
}
.adm-todo-sum{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--adm-muted);
}
.adm-todo-num{
    background:var(--adm-todo);
    color:#fff;
    font-weight:800;
    font-size:14px;
    padding:2px 9px;
    border-radius:4px;
    font-variant-numeric:tabular-nums;
}
.adm-todo-clear{ color:var(--adm-done); font-weight:600; }

/* Stufen der Auftragsverfolgung */
.adm-pipe{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
}
.adm-stage{
    display:block;
    text-decoration:none;
    background:#fff;
    border:1px solid var(--adm-line);
    border-left:4px solid var(--adm-line);
    border-radius:6px;
    padding:13px 15px;
    transition:border-color .15s, background .15s;
}
.adm-stage:hover{ background:var(--adm-bg); }
.adm-stage-num{
    font-size:27px;
    font-weight:800;
    line-height:1;
    color:var(--adm-ink);
    font-variant-numeric:tabular-nums;
}
.adm-stage-label{
    font-size:13.5px;
    font-weight:700;
    color:var(--adm-ink);
    margin-top:7px;
    line-height:1.35;
}
.adm-stage-action{
    font-size:12.5px;
    color:var(--adm-muted);
    margin-top:3px;
    line-height:1.4;
}

/* Wir sind am Zug */
.adm-stage.todo{ border-left-color:var(--adm-todo); }
.adm-stage.todo .adm-stage-num{ color:var(--adm-todo); }
.adm-stage.todo .adm-stage-action{ color:var(--adm-todo); font-weight:600; }

/* Wir warten auf die Kundschaft */
.adm-stage.wait{ border-left-color:var(--adm-wait); }
.adm-stage.wait .adm-stage-num{ color:var(--adm-wait); }

/* Nichts zu tun – zurückgenommen darstellen */
.adm-stage.leer{ border-left-color:var(--adm-line); background:var(--adm-bg); }
.adm-stage.leer .adm-stage-num{ color:#a9b4c0; }
.adm-stage.leer .adm-stage-action{ color:var(--adm-muted); font-weight:400; }

.adm-legend{
    font-size:12px;
    color:var(--adm-muted);
    margin:14px 0 0;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.adm-dot{
    width:9px; height:9px; border-radius:2px;
    display:inline-block; flex-shrink:0;
}
.adm-dot.todo{ background:var(--adm-todo); }
.adm-dot.wait{ background:var(--adm-wait); margin-left:14px; }

/* ── Kennzahlen: Zahlenleiste statt Kachelwand ──
   Bewusst zurückhaltend – der Blick soll bei der Auftragsverfolgung bleiben. */
.adm-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px;
    background:var(--adm-line-2);
    border:1px solid var(--adm-line-2);
    border-radius:6px;
    overflow:hidden;
}
.adm-stat-group{
    background:#fff;
    padding:14px 18px 16px;
}
.adm-stat-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:#94a3b3;
    margin-bottom:10px;
}
.adm-stat-items{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.adm-stat{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-family:inherit;
    text-align:left;
    background:none;
    border:none;
    padding:0;
}
.adm-stat .v{
    font-size:17px;
    font-weight:700;
    color:var(--adm-ink);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.adm-stat .k{
    font-size:13px;
    color:var(--adm-muted);
    line-height:1.3;
}
.adm-stat.warn .v{ color:var(--adm-wait); }

/* anklickbare Zahl (Kundendetails) */
.adm-stat.link{
    cursor:pointer;
    border-radius:4px;
    margin:-2px -6px;
    padding:2px 6px;
    transition:background .15s;
}
.adm-stat.link:hover{ background:var(--adm-bg); }
.adm-stat.link .k{ text-decoration:underline; text-decoration-style:dotted; }

/* ══════════════════════════════════════════════
   POPUP (Kundendetails im Verwaltungsbereich)
   Liegt hier statt in einer einzelnen Seite, damit das Fenster
   auch nach einem Umzug der Markierung gestaltet bleibt.
   ══════════════════════════════════════════════ */
.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,32,.5);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal-box{
    background:#fff;
    border:1px solid var(--adm-line);
    border-radius:8px;
    padding:24px;
    max-width:560px;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    position:relative;
}
.modal-box h2{
    margin-bottom:16px;
    font-size:18px;
    font-weight:700;
    color:var(--adm-ink);
}
.modal-close{
    position:absolute;
    top:14px; right:16px;
    font-size:22px;
    cursor:pointer;
    color:#9aa8b8;
    background:none;
    border:none;
    line-height:1;
    padding:4px 8px;
}
.modal-close:hover{ color:var(--adm-ink); }
.modal-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--adm-line-2);
    gap:12px;
    flex-wrap:wrap;
}
.modal-row:last-child{ border-bottom:none; }
.modal-row .mr-name{ font-weight:600; color:var(--adm-ink); }
.modal-row .mr-email{ font-size:13px; color:var(--adm-muted); }
.modal-row .mr-date{ font-size:12px; color:#9aa8b8; white-space:nowrap; }
.modal-row .mr-badge{
    background:var(--adm-bg);
    color:var(--adm-muted);
    border:1px solid var(--adm-line-2);
    border-radius:4px;
    padding:2px 8px;
    font-size:12px;
    font-weight:700;
}

/* ══════════════════════════════════════════════
   AUFTRAGSTABELLE
   ══════════════════════════════════════════════ */
.adm-count{
    font-size:13px;
    color:var(--adm-muted);
    font-variant-numeric:tabular-nums;
}

.adm-table-wrap{
    overflow-x:auto;
    border:1px solid var(--adm-line-2);
    border-radius:6px;
}

.adm-table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    background:#fff;
}

.adm-table th{
    text-align:left;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#8494a6;
    background:var(--adm-bg);
    padding:9px 12px;
    border-bottom:1px solid var(--adm-line);
    white-space:nowrap;
}
.adm-table th.num{ text-align:right; }

.adm-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--adm-line-2);
    vertical-align:top;
    color:var(--adm-ink);
}
.adm-table td.num{ text-align:right; }
.adm-table .mono{ font-variant-numeric:tabular-nums; }
.adm-table .nowrap{ white-space:nowrap; }

/* Zeile */
.adm-row{ cursor:pointer; transition:background .12s; }
.adm-row:hover{ background:var(--adm-bg); }
/* Zeilen, bei denen wir am Zug sind, tragen links eine Markierung */
.adm-row.is-todo td:first-child{ box-shadow:inset 3px 0 0 var(--adm-todo); }

.adm-toggle{
    color:#9aa8b8;
    font-size:11px;
    user-select:none;
    padding-left:10px !important;
}

.adm-strong{ font-weight:600; }
.adm-sub{
    display:block;
    font-size:11.5px;
    color:var(--adm-muted);
    line-height:1.35;
    margin-top:2px;
    font-weight:400;
}
.adm-none{ color:#a9b4c0; font-style:italic; }

.adm-msg{
    display:inline-block;
    background:#fee2e2;
    color:#b91c1c;
    font-size:10.5px;
    font-weight:700;
    padding:1px 6px;
    border-radius:3px;
    margin-left:5px;
    white-space:nowrap;
}

/* Statuskennzeichen – kleiner und ruhiger als im Kundenbereich */
.adm-pill{
    display:inline-block;
    font-size:11.5px;
    font-weight:700;
    padding:2px 8px;
    border-radius:3px;
    white-space:nowrap;
    background:#eef1f5;
    color:#4a5768;
}
.adm-pill.s-offen     { background:#fef3e2; color:#a05a12; }
.adm-pill.s-angebot   { background:#fdf6d8; color:#8a6d0f; }
.adm-pill.s-bestatigt { background:#e4f1fd; color:#1a5fa8; }
.adm-pill.s-erledigt  { background:#e3f5e8; color:#1a6b38; }
.adm-pill.s-storniert,
.adm-pill.s-abgelehnt { background:#f1f3f5; color:#78849a; }

/* ══════════════════════════════════════════════
   KUNDENVERWALTUNG
   Je Kunde eine Tafel: oben die Kennung, darunter die Rasenflächen als
   Tabelle, die Stammdaten eingeklappt. Der Blick soll zuerst auf die
   Flächen fallen – dort steht, ob das Aufmaß noch aussteht.
   ══════════════════════════════════════════════ */
.kunde-suche{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.kunde-suche input[type="search"]{
    flex:1;
    min-width:240px;
    margin:0;
    padding:9px 12px;
    font-size:14px;
    border:1px solid var(--adm-line);
    border-radius:6px;
}
.kunde-suche .btn{
    width:auto;
    min-height:38px;
    padding:0 16px;
    font-size:14px;
    border-radius:6px;
}

/* Hinweis auf auseinanderlaufende Rollen und Rechte – bewusst auffällig,
   weil davon der Zugang zum Verwaltungsbereich abhängt. */
.rollen-warnung{
    background:#fdf6d8;
    border:1px solid #e8d68a;
    border-radius:8px;
    padding:14px 16px;
    margin-top:14px;
}
.rollen-warnung p{ font-size:13.5px; color:#7a5f0b; margin-bottom:8px; }
.rollen-warnung ul{ margin:0 0 12px 18px; }
.rollen-warnung li{ font-size:13.5px; color:#7a5f0b; margin-bottom:3px; }
.rollen-warnung code{ background:#f6ecc4; padding:1px 5px; border-radius:4px; font-size:12.5px; }
.rollen-warnung .btn{ width:auto; min-height:36px; padding:0 16px; font-size:13.5px; border-radius:6px; }

/* Zahl in der Auswahlleiste der Kundenverwaltung */
.kunde-zahl{
    display:inline-block;
    margin-left:6px;
    padding:0 6px;
    border-radius:999px;
    background:var(--adm-line-2);
    color:var(--adm-muted);
    font-size:11.5px;
    font-weight:700;
}
.adm-timefilter a.active .kunde-zahl{
    background:var(--green-100);
    color:var(--green-800);
}

.kunde-karte{ margin-bottom:14px; }

.kunde-kopf{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
}
.kunde-name{
    font-size:17px;
    font-weight:700;
    color:var(--adm-ink);
    letter-spacing:-.01em;
}
.kunde-sub{
    font-size:13px;
    color:var(--adm-muted);
    margin-top:2px;
}
.kunde-zahlen{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* Aufmaß direkt in der Zeile eintragen */
.qm-form{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
}
.qm-form input[type="number"]{
    width:88px;
    margin:0;
    padding:6px 8px;
    font-size:13.5px;
    border:1px solid var(--adm-line);
    border-radius:6px;
}
.qm-form .btn{
    width:auto;
    min-height:32px;
    padding:0 12px;
    font-size:13px;
    border-radius:6px;
    white-space:nowrap;
}

.kunde-gesperrt{
    background:var(--adm-bg);
    border:1px solid var(--adm-line-2);
    border-radius:8px;
    padding:14px 16px;
    margin-top:8px;
}
.kunde-gesperrt p{ font-size:13.5px; color:var(--adm-muted); margin-bottom:10px; }
.kunde-gesperrt .btn{ width:auto; min-height:34px; padding:0 14px; font-size:13px; border-radius:6px; }

.kunde-daten{ margin-top:14px; }
.kunde-daten > summary{
    cursor:pointer;
    list-style:none;
    font-size:13.5px;
    font-weight:700;
    color:var(--green-700);
    padding:6px 0;
    display:flex;
    align-items:center;
    gap:7px;
}
.kunde-daten > summary::-webkit-details-marker{ display:none; }
.kunde-daten > summary::before{ content:'▸'; font-size:11px; transition:transform .15s; }
.kunde-daten[open] > summary::before{ transform:rotate(90deg); }

.kunde-form{ margin-top:8px; }
.kunde-form input{ margin-bottom:0; }
.kunde-form label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--adm-muted);
    margin:12px 0 5px;
}
.kunde-form .btn{ width:auto; min-height:38px; padding:0 18px; font-size:14px; margin-top:16px; }
.kunde-feldreihe{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.kunde-feldreihe > div{ flex:1; min-width:170px; }
.kunde-hinweis{
    font-size:12.5px;
    font-weight:500;
    color:var(--adm-muted);
}

/* Auswahl der Statusmeldungen: zwei Spalten, damit die sieben Einträge
   nicht als lange Kolonne die Karte auseinanderziehen. */
.melde-liste{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:4px 18px;
}
.melde-zeile{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13.5px;
    color:var(--gray-700);
    padding:4px 0;
    cursor:pointer;
}
.melde-zeile input{ width:auto; margin:0; flex-shrink:0; }

/* Schalter für die internen Statusmeldungen – bewusst kein Knopf im
   Stil der übrigen Aktionen: Es ist eine Einstellung, keine Handlung. */
.emp-melde{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    text-decoration:none;
    border:1px solid transparent;
    white-space:nowrap;
}
.emp-melde.an{
    background:#e6f4ea;
    color:#166534;
    border-color:#bfe3cc;
}

.emp-melde.aus{
    background:#f1f3f5;
    color:#78849a;
    border-color:#e2e6ea;
}


/* Rolle direkt hinter dem Namen. Die Farbe trägt die Aussage: Grün für
   volle Rechte, Blau für Personal, Grau, wenn kein Konto dahintersteht. */
.emp-rolle{
    display:inline-block;
    margin-left:9px;
    vertical-align:2px;
    padding:2px 9px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
}
.emp-rolle.r-admin    { background:#e6f4ea; color:#166534; }
.emp-rolle.r-employee { background:#e4f1fd; color:#1a5fa8; }
.emp-rolle.r-user     { background:#fdf6d8; color:#8a6d0f; }
.emp-rolle.r-keins    { background:#f1f3f5; color:#78849a; }

/* Deaktivierte Mitarbeiter: eigener, standardmäßig geschlossener Abschnitt.
   Sie gehören nicht in die tägliche Ansicht, müssen aber auffindbar sein. */
.emp-ruhend{
    margin-top:22px;
    border-top:1px solid var(--adm-line, #d8dee6);
    padding-top:16px;
}
.emp-ruhend > summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:700;
    color:var(--adm-muted, #64748b);
    padding:6px 0;
}
.emp-ruhend > summary::-webkit-details-marker{ display:none; }
.emp-ruhend > summary::before{
    content:'▸';
    font-size:12px;
    transition:transform .15s;
}
.emp-ruhend[open] > summary::before{ transform:rotate(90deg); }
.emp-ruhend > summary:hover{ color:var(--adm-ink, #1b2430); }
.emp-ruhend-zahl{
    background:var(--gray-100, #f3f4f6);
    color:var(--gray-500, #6b7280);
    border-radius:999px;
    padding:1px 9px;
    font-size:12.5px;
    font-weight:700;
}

/* Zeitraumwahl in der Historie – schlichte Umschalter, keine Knöpfe:
   sie wechseln die Ansicht, sie lösen keine Handlung aus. */
.adm-timefilter{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin:0 0 16px;
}
.adm-timefilter a{
    font-size:13px;
    font-weight:600;
    color:var(--adm-muted);
    text-decoration:none;
    padding:6px 12px;
    border:1px solid var(--adm-line);
    border-radius:6px;
    background:#fff;
}
.adm-timefilter a:hover{ color:var(--adm-ink); background:var(--adm-bg); }
.adm-timefilter a.active{
    color:var(--green-700);
    border-color:var(--green-600);
    background:var(--green-50);
}

/* Knöpfe in Arbeitstabellen: kompakt wie die Zeilen, die sie begleiten */
.adm-table .btn{
    padding:6px 12px;
    min-height:34px;
    font-size:13px;
    border-radius:6px;
    width:auto;
    white-space:nowrap;
}

/* Bedienelemente im Detailbereich der Aufträge
   Die Knöpfe stammen aus dem Kundenbereich und sind dort bewusst groß.
   In den schmalen Spalten der Detailansicht ragten sie über den Kasten
   hinaus – hier daher kompakter, umbruchfähig und nie breiter als ihr Feld. */
.adm-drawer .btn{
    padding:8px 14px;
    min-height:38px;
    font-size:13.5px;
    border-radius:6px;
    white-space:normal;
    line-height:1.3;
    max-width:100%;
    width:auto;
}
.adm-drawer .detail-box .btn{ display:inline-flex; }

.adm-drawer input,
.adm-drawer select,
.adm-drawer textarea{
    max-width:100%;
    font-size:14px;
    padding:8px 10px;
    min-height:0;
}
.adm-drawer label{ font-size:13px; }
.adm-drawer .checkbox-line{ font-size:13px; align-items:flex-start; }
.adm-drawer .checkbox-line input{ margin-top:3px; }

/* Der Detailbereich verträgt schmalere Spalten als der Kundenbereich */
.adm-drawer .detail-grid{ gap:12px; }
.adm-drawer .detail-box{ border-radius:8px; min-width:0; }
.adm-drawer .detail-box h3{ font-size:14.5px; }

/* Schriftwechsel direkt im Auftrag */
.adm-chat{
    max-height:280px;
    overflow-y:auto;
    border:1px solid var(--adm-line-2);
    border-radius:6px;
    padding:10px;
    background:var(--adm-bg);
}
.adm-msg-row{
    margin-bottom:10px;
    padding:8px 10px;
    border-radius:6px;
    background:#fff;
    border:1px solid var(--adm-line-2);
}
.adm-msg-row:last-child{ margin-bottom:0; }
/* Eigene Beiträge abgesetzt, damit der Verlauf ohne Lesen erkennbar ist */
.adm-msg-row.von-uns{
    background:#f2f8f4;
    border-color:#d6e8dc;
    margin-left:22px;
}
.adm-msg-row.vom-kunden{ margin-right:22px; }
.adm-msg-meta{
    font-size:11.5px;
    color:var(--adm-muted);
    margin-bottom:3px;
}
.adm-msg-text{
    font-size:13.5px;
    line-height:1.5;
    color:var(--adm-ink);
    white-space:normal;
}

/* Hinweis auf ausgeblendete Felder im Detailbereich */
.adm-more{
    margin-top:14px;
    font-size:13px;
    color:var(--adm-muted);
}
.adm-more a{
    color:var(--green-700);
    font-weight:600;
    margin-left:6px;
}

/* Nächster Schritt */
.adm-next{ font-size:13px; font-weight:600; white-space:nowrap; }
.adm-next.n-todo{ color:var(--adm-todo); }
.adm-next.n-wait{ color:var(--adm-wait); font-weight:500; }
.adm-next.n-done{ color:var(--adm-done); font-weight:500; }
.adm-next.n-off { color:#a9b4c0; font-weight:400; }

/* Aufgeklappter Detailbereich */
.adm-drawer > td{
    background:var(--adm-bg);
    padding:18px 16px 20px;
    cursor:default;
    border-bottom:2px solid var(--adm-line);
}
.adm-drawer-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-start;
    margin-bottom:18px;
}
.adm-drawer-actions .btn{ width:auto; min-height:40px; padding:0 16px; font-size:14px; }
.adm-drawer .detail-box{ background:#fff; }

@media(max-width:900px){
    .adm-table{ font-size:13px; }
    .adm-table td, .adm-table th{ padding:9px 10px; }
}

/* =========================
   ADMIN HEADER NAV (alt)
========================= */
.admin-header-wrap{
    position:fixed;
    top:0; left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,0.07);
}
.admin-header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    height:60px;
}
.admin-header-top .logo-area{
    text-decoration:none;
    color:inherit;
}
.admin-header-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 24px 12px 24px;
    flex-wrap:wrap;
}
.admin-header-bar a{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--gray-600);
    text-decoration:none;
    padding:9px 18px;
    border-radius:var(--radius-md);
    border:1.5px solid #e0e8db;
    font-weight:500;
    font-size:14px;
    white-space:nowrap;
    background:#fff;
    transition:background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.admin-header-bar a:hover{
    background:var(--green-50);
    color:var(--green-700);
    border-color:var(--green-300);
    box-shadow:0 2px 8px rgba(22,163,74,.08);
}
.admin-header-bar a.active{
    background:var(--green-600);
    color:#fff;
    border-color:var(--green-600);
    font-weight:700;
    box-shadow:0 2px 10px rgba(22,163,74,.25);
}
.admin-header-bar a.logout{
    color:#c0392b;
    border-color:#f5c6c2;
    background:#fff;
}
.admin-header-bar a.logout:hover{
    background:#fdecea;
    color:#a93226;
    border-color:#e8a09a;
}
/* Seiten mit Admin-Header brauchen mehr top-padding */
.admin-body .app-container{
    /* Rollenband + Arbeitsmenü sind zusammen 101px hoch – plus Abstand */
    padding-top:133px;
    max-width:1280px;   /* mehr Platz für Tabellen und Listen */
}
.admin-body{ background:var(--adm-bg); }
@media(max-width:700px){
    .admin-header-bar a span.nav-label{ display:none; }
    .admin-header-bar a{ padding:8px 12px; font-size:17px; }
    .admin-header-bar{ gap:6px; }
}

/* Legacy: .admin-nav (Fallback) */
.admin-nav{
    display:flex;
    align-items:center;
    gap:4px;
}
.admin-nav a{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--gray-600);
    text-decoration:none;
    padding:7px 12px;
    border-radius:var(--radius-md);
    font-weight:500;
    font-size:14px;
    white-space:nowrap;
    transition:background var(--transition), color var(--transition);
}
.admin-nav a:hover{ background:var(--green-50); color:var(--green-700); }
.admin-nav a.active{ background:var(--green-100); color:var(--green-800); font-weight:700; }

/* =========================
   SIDEBAR
========================= */
.sidebar{
    position:fixed;
    top:0; right:-340px;
    width:320px; height:100%;
    background:#fff;
    padding:28px 20px;
    z-index:1100;
    transition:right 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow:-40px 0 80px rgba(0,0,0,0.12);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sidebar.active{ right:0; }

.sidebar .close{
    align-self:flex-end;
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    cursor:pointer;
    color:var(--gray-500);
    border-radius:var(--radius-sm);
    text-decoration:none;
    margin-bottom:16px;
    transition:background var(--transition), color var(--transition);
}

.sidebar .close:hover{ background:var(--gray-100); color:var(--gray-900); }

.sidebar a{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gray-700);
    text-decoration:none;
    padding:12px 14px;
    border-radius:var(--radius-md);
    font-weight:500;
    font-size:15px;
    transition:background var(--transition), color var(--transition);
}

.sidebar a:hover{
    background:var(--green-50);
    color:var(--green-700);
}

/* =========================
   OVERLAY
========================= */
.overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(4px);
    display:none;
    z-index:1000;
}

/* =========================
   CONTAINER
========================= */
.app-container{
    /* Kopfzeile ist 80px hoch und liegt fest darüber – plus Abstand,
       sonst klebt die erste Karte an der Unterkante. */
    padding-top:112px;
    max-width:1100px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:96px;   /* Luft zum Footer darunter */
    width:100%;
}

/* =========================
   HERO SECTION
========================= */
.hero{
    min-height:calc(100vh - 80px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 20px 60px;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34,197,94,0.18), transparent),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(74,222,128,0.10), transparent);
    pointer-events:none;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--green-50);
    color:var(--green-700);
    border:1px solid var(--green-200);
    padding:6px 14px;
    border-radius:var(--radius-full);
    font-size:13px;
    font-weight:600;
    margin-bottom:28px;
    letter-spacing:0.01em;
}

.hero-badge .dot{
    width:7px; height:7px;
    background:var(--green-500);
    border-radius:50%;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.5; transform:scale(1.4); }
}

.hero h1{
    margin-bottom:22px;
    max-width:700px;
}

.hero h1 .highlight{
    background:linear-gradient(135deg, var(--green-600), var(--green-400));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-sub{
    font-size:1.15rem;
    color:var(--gray-500);
    max-width:520px;
    margin:0 auto 36px;
    line-height:1.7;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:56px;
}

.hero-stats{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
    justify-content:center;
}

.hero-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}

.hero-stat strong{
    font-size:1.6rem;
    font-weight:800;
    color:var(--gray-900);
    letter-spacing:-0.04em;
}

.hero-stat span{
    font-size:13px;
    color:var(--gray-400);
    font-weight:500;
}

/* =========================
   HERO SPLIT (Text + Phone-Mockup)
========================= */
.hero-split{
    flex-direction:row;
    text-align:left;
    align-items:center;
    justify-content:center;
    gap:60px;
    /* Volle Breite, damit der Farbverlauf im Hintergrund durchläuft.
       Die Mitte hält justify-content, die Größe die beiden Kinder. */
    width:100%;
    max-width:none;
    padding-left:24px;
    padding-right:24px;
}
.hero-copy{
    flex:1;
    max-width:560px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.hero-split .hero-sub{ margin-left:0; }
.hero-split .hero-actions{ justify-content:flex-start; }
.hero-split .hero-stats{ justify-content:flex-start; }
.hero-split .hero-stat{ align-items:flex-start; }

.hero-visual{
    flex-shrink:0;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero-blob{
    position:absolute;
    width:420px; height:420px;
    background:radial-gradient(circle, rgba(34,197,94,0.16) 0%, transparent 70%);
    border-radius:50%;
    z-index:0;
}
.phone{
    position:relative;
    z-index:1;
    width:250px;
    background:#1c1c1e;
    border-radius:46px;
    padding:10px;
    box-shadow:0 30px 80px rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.15);
    transform:rotate(3deg);
}
.phone-notch{
    position:absolute;
    top:12px; left:50%;
    transform:translateX(-50%);
    width:90px; height:22px;
    background:#1c1c1e;
    border-radius:0 0 14px 14px;
    z-index:2;
}
.phone-screen{
    background:linear-gradient(180deg, #f7fbf5 0%, #eef7ea 100%);
    border-radius:38px;
    padding:38px 14px 20px;
    overflow:hidden;
    min-height:465px;
    display:flex;
    flex-direction:column;
}
.phone-screen .ps-btn{ margin-top:auto; }
.ps-header{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
}
.ps-logo{
    width:20px;
    height:20px;
    display:block;
    flex-shrink:0;
}
.ps-brand{
    font-size:14px;
    color:var(--green-900);
    line-height:1;
}
.ps-greeting{
    font-size:15px;
    font-weight:800;
    color:var(--gray-900);
    margin-bottom:10px;
    letter-spacing:-0.02em;
}
.ps-card{
    background:#fff;
    border:1px solid #e2eedd;
    border-radius:16px;
    padding:12px;
    margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.ps-card-status{
    background:linear-gradient(135deg, var(--green-600), var(--green-700));
    border:none;
    color:#fff;
}
.ps-card-title{
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    opacity:0.75;
    margin-bottom:4px;
}
.ps-card-big{
    font-size:18px;
    font-weight:800;
    letter-spacing:-0.02em;
    margin-bottom:2px;
}
.ps-card-sub{
    font-size:11px;
    opacity:0.8;
    margin-bottom:8px;
}
.ps-badge{
    display:inline-block;
    background:rgba(255,255,255,0.22);
    border-radius:999px;
    padding:3px 10px;
    font-size:10px;
    font-weight:700;
}
.ps-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 0;
}
.ps-row + .ps-row{ border-top:1px solid #f0f5ec; }
.ps-row-icon{
    width:28px; height:28px;
    background:var(--green-50);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    flex-shrink:0;
}
.ps-row > div{ flex:1; min-width:0; }
.ps-row-title{
    font-size:12px;
    font-weight:700;
    color:var(--gray-900);
}
.ps-row-sub{
    font-size:10px;
    color:var(--gray-400);
}
.ps-check{
    width:18px; height:18px;
    background:var(--green-500);
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:10px;
    flex-shrink:0;
}
.ps-dot-pending{
    width:10px; height:10px;
    background:#f59e0b;
    border-radius:50%;
    flex-shrink:0;
    margin-right:4px;
}
.ps-btn{
    background:var(--green-600);
    color:#fff;
    text-align:center;
    border-radius:999px;
    padding:10px;
    font-size:12px;
    font-weight:700;
    box-shadow:0 4px 14px rgba(34,197,94,0.35);
}

@media(max-width:920px){
    .hero-split{
        flex-direction:column;
        text-align:center;
        gap:48px;
    }
    .hero-copy{
        align-items:center;
        max-width:600px;
    }
    .hero-split .hero-actions,
    .hero-split .hero-stats{ justify-content:center; }
    .hero-split .hero-stat{ align-items:center; }
    .phone{ width:240px; transform:rotate(0deg); }
    .hero-blob{ width:340px; height:340px; }
}

/* =========================
   SECTION
========================= */
.section{
    padding:64px 0;
}

.section-label{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--green-600);
    margin-bottom:10px;
}

.section-title{
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--gray-900);
    margin-bottom:12px;
}

.section-sub{
    color:var(--gray-400);
    font-size:1rem;
    max-width:520px;
    margin-bottom:40px;
}

/* =========================
   FEATURE GRID
========================= */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
    margin-top:8px;
}

.feature-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:28px 24px;
    transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.feature-card:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-4px);
    border-color:var(--green-200);
}

.feature-icon{
    width:48px; height:48px;
    background:var(--green-50);
    border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    margin-bottom:16px;
}

.feature-card h3{
    font-size:1rem;
    font-weight:700;
    color:var(--gray-900);
    margin-bottom:6px;
}

.feature-card p{
    font-size:14px;
    color:var(--gray-400);
    margin:0;
    line-height:1.6;
}

/* =========================
   CHECK LIST
========================= */
.check-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:20px 0;
}

.check-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    color:var(--gray-700);
    font-weight:500;
}

.check-item .check-icon{
    flex-shrink:0;
    width:22px; height:22px;
    background:var(--green-500);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:12px;
}

/* =========================
   DIVIDER
========================= */
.divider{
    border:none;
    border-top:1px solid var(--gray-100);
    margin:8px 0;
}

/* =========================
   HIGHLIGHT SECTION (dark)
========================= */
.section-dark{
    background:var(--gray-900);
    border-radius:var(--radius-xl);
    padding:56px 40px;
    color:#fff;
    margin:40px 0;
}

.section-dark .section-label{ color:var(--green-400); }
.section-dark .section-title{ color:#fff; }
.section-dark .section-sub{ color:rgba(255,255,255,0.65); }
.section-dark p{ color:rgba(255,255,255,0.65); }
.section-dark .check-item{ color:rgba(255,255,255,0.90); }
.section-dark .check-item .check-icon{ background:var(--green-400); }

/* =========================
   CTA BANNER
========================= */
.cta-banner{
    background:linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%);
    border-radius:var(--radius-xl);
    padding:56px 40px;
    text-align:center;
    color:#fff;
    margin:40px 0;
    position:relative;
    overflow:hidden;
}

.cta-banner::before{
    content:'';
    position:absolute;
    top:-40%; right:-10%;
    width:400px; height:400px;
    background:rgba(255,255,255,0.06);
    border-radius:50%;
}

.cta-banner h2{ color:#fff; margin-bottom:10px; }
.cta-banner p{ color:rgba(255,255,255,0.75); margin-bottom:28px; }

/* =========================
   BUTTONS
========================= */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;    /* Barrierefreiheit: etwas mehr Padding */
    border:none;
    border-radius:var(--radius-full);
    cursor:pointer;
    text-decoration:none;
    font-family:inherit;
    font-size:16px;       /* Barrierefreiheit: erhöht von 15px */
    font-weight:600;
    min-height:52px;      /* Barrierefreiheit: Touch-Ziel */
    letter-spacing:-0.01em;
    transition:all var(--transition);
    white-space:nowrap;
}

.btn.green{
    background:var(--green-600);
    color:#fff;
    box-shadow:var(--shadow-green);
}

.btn.green:hover{
    background:var(--green-700);
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(34,197,94,.35);
}

.btn.green:active{ transform:translateY(0); }

.btn.ghost{
    background:transparent;
    color:var(--gray-700);
    border:1.5px solid var(--gray-200);
}

.btn.ghost:hover{
    background:var(--gray-50);
    border-color:var(--gray-300);
}

.btn.white{
    background:#fff;
    color:var(--green-700);
    font-weight:700;
}

.btn.white:hover{
    background:var(--green-50);
    transform:translateY(-2px);
}

.btn.blue{
    background:#2563eb;
    color:#fff;
}

.btn.blue:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

.btn.red{
    background:#dc2626;
    color:#fff;
}

.btn.red:hover{ background:#b91c1c; }

.btn.center{
    display:inline-flex;
    margin:20px auto 0;
}

/* =========================
   CARD (inner pages)
========================= */
.card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:28px;
    margin-bottom:20px;
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--transition), transform var(--transition);
}

.card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

/* =========================
   REVIEW / LIST ITEM
========================= */
.review{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--gray-50);
    border:1px solid var(--gray-100);
    color:var(--gray-700);
    padding:14px 16px;
    border-radius:var(--radius-md);
    margin-bottom:10px;
    font-size:14px;
    font-weight:500;
    transition:background var(--transition);
}

.review:hover{ background:var(--green-50); border-color:var(--green-200); }

/* =========================
   FORM ELEMENTS
========================= */
input, select, textarea{
    width:100%;
    padding:14px 16px;
    margin-bottom:12px;
    border-radius:var(--radius-md);
    border:1.5px solid var(--gray-200);
    background:#fff;
    color:var(--gray-900);
    font-family:inherit;
    font-size:16px;       /* Barrierefreiheit */
    min-height:52px;      /* Barrierefreiheit: Touch-Ziel */
    outline:none;
    transition:border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus{
    border-color:var(--green-500);
    box-shadow:0 0 0 4px rgba(34,197,94,0.12);
}

input::placeholder, textarea::placeholder{ color:var(--gray-300); }

label{
    display:block;
    font-size:15px;       /* Barrierefreiheit: erhöht von 14px */
    font-weight:600;
    color:var(--gray-700);
    margin-bottom:6px;
}

.remember-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 16px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    color:var(--gray-700);
}

.remember-checkbox{
    width:18px !important;
    height:18px !important;
    min-width:18px;
    accent-color:var(--green-600);
    cursor:pointer;
    margin:0 !important;
    padding:0 !important;
}

/* =========================
   BADGE
========================= */
.badge{
    background:#fee2e2;
    color:#dc2626;
    border-radius:var(--radius-full);
    padding:2px 8px;
    font-size:11px;
    font-weight:700;
    margin-left:6px;
}

/* =========================
   IMAGES
========================= */
img{ max-width:100%; border-radius:var(--radius-lg); }

/* =========================
   FOOTER
========================= */
.site-footer{
    border-top:1px solid var(--gray-100);
    padding:32px 20px;
    text-align:center;
    font-size:13px;
    color:var(--gray-400);
    max-width:1100px;
    margin:0 auto;
}

.site-footer a{
    color:var(--gray-500);
    text-decoration:none;
    font-weight:500;
    margin:0 10px;
    transition:color var(--transition);
}

.site-footer a:hover{ color:var(--green-600); }

/* ── 3-spaltiger Footer ── */
.footer-grid-wrap{
    background:var(--gray-50);
    border-top:1px solid var(--gray-200);
    max-width:none;
    padding:0;
    text-align:left;
    /* Volle Breite erzwingen: das geerbte margin:0 auto würde als Flex-Kind
       den freien Platz aufsaugen und den Footer auf Inhaltsbreite schrumpfen. */
    width:100%;
    margin-left:0;
    margin-right:0;
}

/* Auf kurzen Seiten (Login, Sicherheitsprüfung) soll der Footer unten
   stehen bleiben statt mitten auf dem Schirm zu hängen.
   Der Abstand zum Inhalt kommt aus dem padding-bottom des Containers –
   margin-top:auto wird bei langen Seiten zu null und taugt dafür nicht. */
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
body > *{ flex-shrink:0; }
.footer-grid-wrap{ margin-top:auto; }
.footer-grid{
    max-width:1100px;
    margin:0 auto;
    padding:48px 24px 32px;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
}
.footer-col{
    display:flex;
    flex-direction:column;
    gap:9px;
}
.footer-col a{
    margin:0;
    font-size:14px;
    color:var(--gray-500);
    width:fit-content;
}
.footer-heading{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--gray-400);
    margin-bottom:4px;
}
.footer-logo-row{
    display:flex;
    align-items:center;
    gap:10px;
}
.footer-logo{
    height:46px;
    border-radius:0;
}
.footer-brand-name{
    font-size:28px;
    line-height:1;
}
.footer-claim{
    font-size:14px;
    color:var(--gray-500);
    line-height:1.6;
    max-width:280px;
    margin:0;
}
.footer-mail{
    font-size:14px;
    font-weight:600;
    color:var(--green-700) !important;
}
.footer-bottom{
    border-top:1px solid var(--gray-200);
    text-align:center;
    padding:18px 24px;
    font-size:13px;
    color:var(--gray-400);
}
@media(max-width:720px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
        padding:36px 20px 28px;
    }
}

/* =========================
   SCROLL ANIMATION
========================= */
.fade-up{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   COOKIE BANNER
========================= */
.cookie-banner{
    position:fixed;
    bottom:20px; left:50%;
    transform:translateX(-50%);
    width:calc(100% - 40px);
    max-width:680px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    z-index:9999;
    padding:20px 24px;
}

.cookie-banner-inner{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.cookie-banner-text{
    flex:1;
    min-width:200px;
    font-size:14px;
    line-height:1.5;
    color:var(--gray-700);
}

.cookie-banner-text strong{
    display:block;
    font-size:15px;
    font-weight:700;
    color:var(--gray-900);
    margin-bottom:4px;
}

.cookie-banner-text p{ margin:2px 0; color:var(--gray-500); font-size:13px; }

.cookie-banner-text a{ color:var(--green-600); text-decoration:underline; }

.cookie-banner-actions{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

.btn.cookie-decline{
    background:var(--gray-100);
    color:var(--gray-700);
    border-radius:var(--radius-full);
}

.btn.cookie-decline:hover{ background:var(--gray-200); }

/* =========================
   JOB CARD
========================= */
.job-card{ text-align:center; }

/* =========================
   AUFTRAGSKARTEN
   Gemeinsam genutzt von dashboard.php, jobs.php und admin_dashboard.php.
   Nicht in den Seiten selbst duplizieren – sonst laufen sie auseinander.
========================= */
.order-card{
    background:#f7fbf4;
    border:1px solid #dcebd7;
    border-radius:var(--radius-lg);
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 10px 24px rgba(46,89,52,0.08);
}

.order-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
}

.order-main{ flex:1; min-width:0; }

.order-title{
    font-size:18px;
    font-weight:800;
    color:var(--green-900);
    letter-spacing:-.02em;
    margin-bottom:6px;
}

.order-meta{
    color:#36543d;
    line-height:1.6;
    font-size:14px;
}

.order-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

/* Status-Kennzeichen */
.status-pill{
    display:inline-block;
    padding:5px 10px;
    border-radius:var(--radius-full);
    font-size:13px;
    font-weight:700;
    background:#e8f4e2;
    color:#236d3c;
    margin-top:6px;
    margin-right:6px;
}
.status-pill.warning  { background:#fff4d6; color:#8a5a00; }
.status-pill.done     { background:#e6f7ec; color:#236d3c; }
.status-pill.paid     { background:#dff7e8; color:#176b35; }
.status-pill.cancelled{ background:#ffe2e2; color:#9b1c1c; }

.unread-pill{
    display:inline-block;
    padding:5px 10px;
    border-radius:var(--radius-full);
    font-size:13px;
    font-weight:800;
    background:#c53030;
    color:#fff;
    margin-left:6px;
}

/* Fortschrittsanzeige – passt sich der Anzahl der Schritte an */
.process-steps{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:8px;
    margin-top:14px;
}

.process-step{
    background:#e1ecdc;
    color:#6c806d;
    padding:9px 4px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    text-align:center;
}

.process-step.active{
    background:var(--green-600);
    color:#fff;
}

@media(max-width:560px){
    .process-step{ font-size:10.5px; padding:8px 2px; letter-spacing:-.02em; }
}

/* Aufklappbare Detailansicht */
details.order-details{ margin-top:16px; }

details.order-details summary{
    cursor:pointer;
    list-style:none;
    background:#eaf5e5;
    padding:13px 15px;
    border-radius:14px;
    font-weight:800;
    color:var(--green-900);
}
details.order-details summary::-webkit-details-marker{ display:none; }
details.order-details summary::after{ content:" Details anzeigen"; }
details.order-details[open] summary::after{ content:" Details ausblenden"; }

.detail-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin-top:16px;
}

.detail-box{
    background:#fff;
    border:1px solid #dcebd7;
    border-radius:16px;
    padding:14px;
}
.detail-box h3{ font-size:16px; margin-bottom:10px; }

.section-divider{
    margin:18px 0;
    border:none;
    border-top:1px solid #dcebd7;
}

/* Preisaufschlüsselung im Auftrag */
.price-lines{
    display:flex;
    flex-direction:column;
    margin-top:4px;
}
.price-line{
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:14px;
    padding:7px 0;
    border-bottom:1px solid var(--gray-200);
    color:var(--gray-500);
    line-height:1.4;
}
.price-line span:last-child{
    font-weight:600;
    color:var(--gray-700);
    white-space:nowrap;
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.price-line.total{
    border-bottom:none;
    border-top:2px solid var(--gray-300);
    margin-top:4px;
    padding-top:11px;
    font-size:16px;
    font-weight:800;
    color:var(--green-800);
}
.price-line.total span:last-child{
    color:var(--green-800);
    font-weight:900;
    font-size:17px;
}

@media(max-width:600px){
    .order-top{ display:block; }
    .order-actions .btn,
    .order-actions form,
    .order-actions button{ width:100%; text-align:center; }
}

/* =========================
   FORMULAR-LAYOUT MIT INFO-SPALTE
========================= */
.form-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:26px;
    align-items:start;
}

.form-main{ min-width:0; }

.info-aside{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:sticky;
    top:88px;
}

.info-aside-title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gray-400);
    padding-bottom:9px;
    border-bottom:1px solid var(--gray-200);
    margin-bottom:2px;
}

.info-box{
    background:var(--green-50);
    border:1px solid var(--green-200);
    border-radius:var(--radius-md);
    padding:15px 17px;
}
.info-box.neutral{
    background:var(--gray-50);
    border-color:var(--gray-200);
}
.info-box h4{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:14.5px;
    font-weight:800;
    color:var(--green-800);
    margin-bottom:5px;
    letter-spacing:-.01em;
}
.info-box.neutral h4{ color:var(--gray-700); }
.info-box p{
    font-size:13.5px;
    line-height:1.6;
    color:var(--gray-500);
    margin:0;
}
.info-box p + p{ margin-top:7px; }
.info-box a{ color:var(--green-700); font-weight:600; }

/* Auf schmalen Schirmen: Infos unter das Formular */
@media(max-width:900px){
    .form-layout{ grid-template-columns:1fr; gap:20px; }
    .info-aside{ position:static; }
}

/* =========================
   NACHRICHTEN / CHAT
   Gemeinsam genutzt von messages.php und admin_messages.php.
========================= */
.chat-wrap{
    display:flex;
    flex-direction:column;
}

.chat-bubble{
    padding:12px 16px;
    border-radius:14px;
    margin-bottom:10px;
    max-width:80%;
    line-height:1.6;
    font-size:14px;
}
/* eigene Nachricht – rechts, grün */
.chat-bubble.mine{
    background:var(--green-100);
    color:var(--green-900);
    margin-left:auto;
    border-bottom-right-radius:4px;
}
/* Gegenüber – links, grau */
.chat-bubble.theirs{
    background:var(--gray-100);
    color:var(--gray-700);
    margin-right:auto;
    border-bottom-left-radius:4px;
}

.chat-sender{
    font-size:11px;
    font-weight:700;
    margin-bottom:4px;
    opacity:.7;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.chat-time{
    font-size:11px;
    opacity:.5;
    margin-top:4px;
}

.chat-box{
    max-height:460px;
    overflow-y:auto;
    gap:0;
}

.chat-input{
    width:100%;
    height:90px;
    min-height:90px;
    border-radius:var(--radius-md);
    padding:12px 14px;
    margin-bottom:10px;
    border:1.5px solid var(--gray-200);
    font-size:15px;
    line-height:1.5;
    resize:vertical;
}

/* =========================
   MELDUNGEN (Erfolg / Fehler / Hinweis)
========================= */
.alert{
    border-radius:var(--radius-md);
    padding:13px 16px;
    font-size:14.5px;
    font-weight:600;
    line-height:1.55;
    margin-bottom:16px;
    border:1.5px solid transparent;
}
.alert.success{ background:var(--green-50);  border-color:var(--green-200); color:var(--green-800); }
.alert.error  { background:#fee2e2;          border-color:#fca5a5;          color:#b91c1c; }
.alert.info   { background:var(--gray-50);   border-color:var(--gray-200);  color:var(--gray-700); }

/* Alter Name – bleibt gültig, damit bestehende Seiten weiter stimmen */
.consent-error{
    background:#fee2e2;
    border:1.5px solid #fca5a5;
    color:#b91c1c;
    border-radius:var(--radius-md);
    padding:13px 16px;
    font-size:14px;
    font-weight:600;
    margin-bottom:16px;
}

/* =========================
   EINWILLIGUNGEN (rechtlich)
========================= */
.consent-block{
    border:1.5px solid var(--gray-200);
    border-radius:var(--radius-md);
    padding:6px 18px;
    margin:22px 0 8px;
    background:var(--gray-50);
}

.consent-row{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:15px 0;
    cursor:pointer;
    font-weight:400;
    font-size:14px;
    line-height:1.6;
    color:var(--gray-700);
    margin:0;
}
.consent-row + .consent-row{ border-top:1px solid var(--gray-200); }

.consent-row input[type=checkbox]{
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
    margin:1px 0 0;
    padding:0;
    accent-color:var(--green-600);
    cursor:pointer;
    flex-shrink:0;
}

.consent-row a{
    color:var(--green-700);
    font-weight:600;
    text-decoration:underline;
}
.consent-row a:hover{ color:var(--green-800); }

.consent-required{
    color:#dc2626;
    font-weight:700;
}

/* Handlungsknopf innerhalb eines Schritt-Hinweises.
   display:flex statt inline-flex: sonst rutscht der Knopf bei breiten
   Fenstern neben den Text. So beginnt er immer in einer neuen Zeile. */
.step-action{
    display:flex;
    width:fit-content;
    margin-top:16px;
}

/* =========================
   STEP LABELS (Formulare)
========================= */
.step-label{
    font-size:13px;
    font-weight:700;
    color:var(--green-600);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:4px;
    margin-top:20px;
    display:block;
}

/* =========================
   VOUCHER PROMO (index.php)
========================= */
.voucher-promo{
    background:linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 55%, #6ee7b7 100%);
    border-radius:var(--radius-xl);
    padding:56px 40px;
    text-align:center;
    color:#fff;
    margin:40px 0;
    position:relative;
    overflow:hidden;
}
.voucher-promo h2{ color:#fff; margin-bottom:12px; }
.voucher-promo p { color:rgba(255,255,255,.85); margin-bottom:0; font-size:1.05rem; }

/* =========================
   MOBILE
========================= */
@media(max-width:640px){
    .hero{ padding:100px 16px 40px; }
    .hero-stats{ gap:20px; }
    .section-dark, .cta-banner{ padding:36px 24px; }
    .feature-grid{ grid-template-columns:1fr; }
    .app-container{ padding-left:16px; padding-right:16px; }
    .btn{ width:100%; justify-content:center; }
    .hero-actions .btn{ width:auto; }
    .cookie-banner{ bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; left:0; transform:none; }
    .cookie-banner-actions{ width:100%; }
    .cookie-banner-actions .btn{ flex:1; }
}