/*!
 * ============================================================
 * PARDUS NEXT EDUCATION
 * CORPORATE DESIGN SYSTEM
 * Version: 1.2
 *
 * Joomla 6 / Helix Ultimate / Unfold / SP Page Builder Pro
 *
 * Datei:
 * /templates/unfold/css/custom.css
 *
 * DESIGNPRINZIPIEN
 *
 * - Originaldesign von Unfold erhalten
 * - Corporate-Farben von PARDUS verwenden
 * - Helvetica / Arial fuer eigene Komponenten
 * - Buttons ausschliesslich farblich anpassen
 * - Keine Eingriffe in Button-Geometrie
 * - Keine Eingriffe in bestehende Animationen
 * - Keine pauschalen Layout-Ueberschreibungen
 *
 * ============================================================
 */


/* ============================================================
   01. CORPORATE DESIGN – FARBVARIABLEN
   ============================================================ */

:root {

    /* Primaerfarben */

    --pardus-primary: #063F46;
    --pardus-primary-light: #245B61;


    /* Sekundaerfarben */

    --pardus-text: #2E3A3A;
    --pardus-muted: #6B7676;
    --pardus-border: #D9DEDE;


    /* Hintergrundfarben */

    --pardus-background: #F7F8F6;
    --pardus-surface: #EEF1F1;
    --pardus-white: #FFFFFF;
    --pardus-black: #111111;


    /* Akzentfarben */

    --pardus-accent: #E30613;
    --pardus-accent-hover: #B80510;


    /* Funktionale Farben */

    --pardus-success: #2E7D32;
    --pardus-warning: #F6B800;
    --pardus-error: #D32F2F;
    --pardus-info: #1976D2;


    /* Typografie fuer eigene PARDUS-Komponenten */

    --pardus-font: Helvetica, Arial, sans-serif;


    /* Komponenten */

    --pardus-radius: 2px;
    --pardus-input-height: 46px;

}


/* ============================================================
   02. SP PAGE BUILDER – FARBVARIABLEN
   ============================================================ */

/*
 * Globale PARDUS-Farben fuer SP Page Builder.
 *
 * Wichtig:
 * Diese Variablen beeinflussen gegebenenfalls auch
 * andere Template-Komponenten.
 *
 * Die Button-Geometrie wird nicht angepasst.
 */

html:root {

    --sppb-color-primary: #063F46;
    --sppb-color-secondary: #245B61;

    --sppb-color-success: #2E7D32;
    --sppb-color-warning: #F6B800;
    --sppb-color-danger: #D32F2F;
    --sppb-color-info: #1976D2;

}


/* ============================================================
   03. TYPOGRAFIE
   ============================================================ */

/*
 * Bewusst keine globale Ueberschreibung von
 * body, button, input oder a.
 *
 * Dadurch bleiben die urspruenglichen
 * Schriftmetriken von Unfold erhalten.
 *
 * Eigene PARDUS-Komponenten koennen die
 * folgende Klasse verwenden.
 */

body.site .pardus-typography {

    font-family: var(--pardus-font);

}

body.site .pardus-text-primary {

    color: var(--pardus-primary);

}

body.site .pardus-text-muted {

    color: var(--pardus-muted);

}

body.site .pardus-text-accent {

    color: var(--pardus-accent);

}

body.site .pardus-text-white {

    color: var(--pardus-white);

}


/* ============================================================
   04. BUTTONS – AUSSCHLIESSLICH FARBEN
   ============================================================ */

/*
 * Die Original-Buttons von Unfold bleiben erhalten.
 *
 * Es werden NUR folgende CSS-Eigenschaften gesetzt:
 *
 * background-color
 * border-color
 * color
 *
 * Nicht ueberschrieben werden:
 *
 * display
 * position
 * width
 * height
 * min-height
 * line-height
 * padding
 * margin
 * font-family
 * font-size
 * font-weight
 * border-radius
 * border-width
 * box-shadow
 * transform
 * transition
 * animation
 *
 * Die bereits getestete Klasse ist:
 *
 * .sppb-btn.sppb-btn-primary
 */


/* Normalzustand */

body.site .sppb-btn.sppb-btn-primary {

    background-color: var(--pardus-accent) !important;
    border-color: var(--pardus-accent) !important;
    color: var(--pardus-white) !important;

}


/* Hoverzustand */

body.site .sppb-btn.sppb-btn-primary:hover {

    background-color: var(--pardus-accent-hover) !important;
    border-color: var(--pardus-accent-hover) !important;
    color: var(--pardus-white) !important;

}


/* Tastaturfokus */

body.site .sppb-btn.sppb-btn-primary:focus-visible {

    background-color: var(--pardus-accent) !important;
    border-color: var(--pardus-accent) !important;
    color: var(--pardus-white) !important;

}


/*
 * Sekundaere Buttons bleiben vorerst unveraendert.
 *
 * .sppb-btn-default
 * .sppb-btn-outline-primary
 *
 * Ihre spaetere Gestaltung wird separat entschieden.
 */


/* ============================================================
   05. PARDUS – EIGENE FARBKLASSEN
   ============================================================ */

/*
 * Diese Klassen dienen zukuenftigen Komponenten.
 * Sie beeinflussen bestehende Unfold-Buttons nicht,
 * solange sie diesen nicht explizit zugewiesen werden.
 */

body.site .pardus-color-primary {

    color: var(--pardus-primary);

}

body.site .pardus-color-accent {

    color: var(--pardus-accent);

}

body.site .pardus-border-primary {

    border-color: var(--pardus-primary);

}

body.site .pardus-border-accent {

    border-color: var(--pardus-accent);

}


/* ============================================================
   06. HEADER
   ============================================================ */

/*
 * Header-Struktur und Header-Buttons bleiben
 * in ihrer urspruenglichen Geometrie erhalten.
 *
 * Kein globaler Eingriff in:
 *
 * #sp-header
 * Header-Hoehe
 * Logo-Abmessungen
 * Positionierung
 * Abstaende
 * Animationen
 */


/* ============================================================
   07. MENU / OFFCANVAS
   ============================================================ */

/*
 * Menueschalter:
 * PARDUS-Petrol statt Unfold-Lime.
 *
 * Position, Abmessungen, Innenabstaende,
 * Schrift und Rundungen bleiben unveraendert.
 */

body.site #modal-menu-toggler {

    background-color: var(--pardus-primary);

}

body.site #modal-menu-toggler:hover {

    background-color: var(--pardus-primary-light);

}

body.site #modal-menu-toggler,
body.site #modal-menu-toggler * {

    color: var(--pardus-white);

}


/* Offcanvas-Navigation */

body.site .offcanvas-menu a {

    color: var(--pardus-primary);

}

body.site .offcanvas-menu a:hover {

    color: var(--pardus-primary-light);

}


/* ============================================================
   08. CONTENT-FLAECHEN
   ============================================================ */

/*
 * Nur durch explizite Klassen aktiv.
 * Bestehende Unfold-Sections bleiben unveraendert.
 */

body.site .pardus-bg-primary {

    background-color: var(--pardus-primary);
    color: var(--pardus-white);

}

body.site .pardus-bg-primary h1,
body.site .pardus-bg-primary h2,
body.site .pardus-bg-primary h3,
body.site .pardus-bg-primary p {

    color: var(--pardus-white);

}

body.site .pardus-bg-light {

    background-color: var(--pardus-background);

}

body.site .pardus-bg-surface {

    background-color: var(--pardus-surface);

}

body.site .pardus-bg-white {

    background-color: var(--pardus-white);

}


/* ============================================================
   09. PARDUS CONTENT-KARTEN
   ============================================================ */

/*
 * Nur fuer eigene zukuenftige Karten.
 */

body.site .pardus-card {

    background-color: var(--pardus-white);

    border: 1px solid var(--pardus-border);

    border-radius: var(--pardus-radius);

    box-shadow: none;

    padding: 28px;

}

body.site .pardus-card-muted {

    background-color: var(--pardus-background);

    border: 1px solid var(--pardus-border);

    border-radius: var(--pardus-radius);

    box-shadow: none;

    padding: 28px;

}


/* ============================================================
   10. PARDUS FORMULARE
   ============================================================ */

/*
 * Wirkt nur auf Formulare mit der Klasse:
 *
 * .pardus-form
 *
 * Bestehende Unfold-Formulare bleiben unveraendert.
 */

body.site .pardus-form input:not([type="checkbox"]),
body.site .pardus-form select,
body.site .pardus-form textarea {

    width: 100%;

    background-color: var(--pardus-white);

    border: 1px solid var(--pardus-border);

    border-radius: var(--pardus-radius);

    color: var(--pardus-text);

    font-family: var(--pardus-font);

    box-shadow: none;

}


/* Eingabefelder */

body.site .pardus-form input:not([type="checkbox"]),
body.site .pardus-form select {

    min-height: var(--pardus-input-height);

    padding: 10px 12px;

}


/* Textarea */

body.site .pardus-form textarea {

    min-height: 120px;

    padding: 12px;

}


/* Platzhalter */

body.site .pardus-form input::placeholder,
body.site .pardus-form textarea::placeholder {

    color: var(--pardus-muted);

    opacity: 1;

}


/* Fokus */

body.site .pardus-form input:focus,
body.site .pardus-form select:focus,
body.site .pardus-form textarea:focus {

    border-color: var(--pardus-primary-light);

    outline: 2px solid var(--pardus-primary-light);

    outline-offset: 1px;

    box-shadow: none;

}


/* Labels */

body.site .pardus-form label {

    color: var(--pardus-text);

    font-weight: 500;

}


/* Checkbox */

body.site .pardus-form input[type="checkbox"] {

    accent-color: var(--pardus-primary);

}


/* ============================================================
   11. FORMULAR-ZUSTAENDE
   ============================================================ */

/* Fehler */

body.site .pardus-form .is-invalid,
body.site .pardus-form [aria-invalid="true"] {

    border-color: var(--pardus-error);

}

body.site .pardus-form .invalid-feedback {

    color: var(--pardus-error);

}


/* Erfolg */

body.site .pardus-form .is-valid {

    border-color: var(--pardus-success);

}

body.site .pardus-form .valid-feedback {

    color: var(--pardus-success);

}


/* ============================================================
   12. TABELLEN
   ============================================================ */

body.site .pardus-table {

    width: 100%;

    border-collapse: collapse;

    color: var(--pardus-text);

}

body.site .pardus-table th,
body.site .pardus-table td {

    padding: 14px 16px;

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

    text-align: left;

}

body.site .pardus-table th {

    color: var(--pardus-primary);

    font-weight: 600;

}


/* ============================================================
   13. TRENNLINIEN
   ============================================================ */

body.site .pardus-divider {

    border: 0;

    border-top: 1px solid var(--pardus-border);

}


/* ============================================================
   14. FOOTER – VORBEREITETE VARIANTE
   ============================================================ */

/*
 * Wird erst aktiv, wenn ein Container
 * die Klasse .pardus-footer erhaelt.
 */

body.site .pardus-footer {

    background-color: var(--pardus-primary);

    color: var(--pardus-white);

}

body.site .pardus-footer h2,
body.site .pardus-footer h3,
body.site .pardus-footer h4,
body.site .pardus-footer p,
body.site .pardus-footer a {

    color: var(--pardus-white);

}

body.site .pardus-footer a:hover {

    color: var(--pardus-border);

}


/* ============================================================
   15. RESPONSIVE DESIGN
   ============================================================ */

/*
 * Nur fuer zukuenftige PARDUS-Komponenten.
 * Keine Veraenderung der responsiven
 * Unfold-Button-Eigenschaften.
 */

@media (max-width: 767px) {

    body.site .pardus-card,
    body.site .pardus-card-muted {

        padding: 20px;

    }

    body.site .pardus-form input,
    body.site .pardus-form select,
    body.site .pardus-form textarea {

        max-width: 100%;

    }

}


/* ============================================================
   16. UNFOLD DEMO COLOR SWITCHER
   ============================================================ */

/*
 * Die Demo-Farbauswahl wird ausgeblendet.
 *
 * Dies ist eine rein visuelle Massnahme.
 * Die eigentliche Template-Konfiguration
 * sollte spaeter ebenfalls angepasst werden.
 */

body.site .sppb-color-switcher-modes {

    display: none !important;

}


/* ============================================================
   17. OFFENE DESIGNENTSCHEIDUNGEN
   ============================================================ */

/*
 * Folgende Bereiche sind noch nicht final:
 *
 * - Button-Pfeilsymbole
 * - Hover-Effekte des Templates
 * - Logo-Integration
 * - Header-Gestaltung
 * - Hero-Bilder
 * - Lime-Akzente in Grafiken
 * - Section-Hintergruende
 * - Kontaktformular im Hero
 * - Endgueltiger Footer
 *
 * Bestehende Unfold-Komponenten behalten bis
 * zur ausdruecklichen Freigabe ihr Originaldesign.
 */


/* ============================================================
   END PARDUS NEXT CUSTOM CSS V1.2
   ============================================================ */