/*
 * MWFM Frontend — Theme-Overrides · fewo-marienschacht.de
 *
 * Diese Datei gehoert DIR. Sie wird vom Install-Command einmalig angelegt
 * und beim Bundle-Update NICHT ueberschrieben. Hier definierst du dein
 * Branding, indem du die in root.css definierten Tokens ueberschreibst.
 *
 * Lade-Reihenfolge: theme.css MUSS nach root.css und vor base.css geladen
 * werden — siehe README.md.
 *
 * Werte = Marke Marienschacht, abgeleitet von www.marienschacht.de.
 * Die Website-Seite derselben Marke liegt in marienschacht-brand.css;
 * beide Dateien teilen sich dieselben Hex-Werte. Aenderst du hier etwas,
 * zieh es dort nach (und umgekehrt).
 */


/* ---------------------------------------------------------------------------
   Webfont — muss HIER stehen, nicht nur im Theme der Website.
   Buchungsstrecke, Gast-/Eigentuemer-Login und Reinigungsplan rendern ueber
   das Bundle-Layout und laden NUR files/layout/css/* — das Website-Theme
   ist dort nicht dabei. Ohne diese @font-face-Regeln faellt die Buchungs-
   strecke auf die Systemschrift zurueck.
   url() bewusst ABSOLUT: der Contao-CSS-Combiner zerlegt relative Pfade.
--------------------------------------------------------------------------- */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-700-normal.woff2') format('woff2');
}


:root {
    /* ----- Marke ---------------------------------------------------- */
    --color-primary: #BDB38B;          /* Gold/Khaki der Marienschacht-Marke */
    --color-primary-hover: #A19876;    /* dieselbe Farbe ~15 % abgedunkelt   */
    --color-secondary: #535353;        /* Outline-Buttons, Sekundaeraktionen */
    --color-secondary-hover: #1D1D1B;

    /* ----- Typografie ----------------------------------------------- */
    --font-family-sans-serif: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-family-heading: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-size-base: 16px;
    --line-height: 1.5;

    /* Ueberschriften: die Vorlage setzt auf leichte Schnitte statt Fettdruck */
    --heading-color: #1D1D1B;
    --font-size-h1: 2.6rem;
    --font-size-h2: 2.1rem;
    --font-size-h3: 1.7rem;
    --font-size-h4: 1.35rem;

    /* ----- Form / Radius --------------------------------------------- */
    --border-radius: 10px;             /* Vorlage nutzt durchgaengig 10px    */
    --radius-card: 10px;
    --radius-button: 10px;
    --radius-lg: 20px;                 /* grosse Panels (Footer-Optik)       */
    --border-color: #DEDEDE;
    --shadow-card: 0 6px 24px rgba(0, 0, 0, .12);

    /* ----- Flaechen / Text -------------------------------------------- */
    --color-bg: #F4F0E9;               /* warmes Beige wie auf der Vorlage   */
    --color-surface: #FFFFFF;
    --color-text: #1D1D1B;
    --color-muted: #7A7A7A;

    /* ----- Links ------------------------------------------------------ */
    --link-color: #1D1D1B;             /* Vorlage: schwarze Links,           */
    --link-hover-color: #BDB38B;       /* Gold erst beim Hover               */
    --link-decoration: none;
    --link-hover-decoration: none;

    /* ----- Buttons ----------------------------------------------------- */
    /* Primary/Book erben --color-primary. Bewusst NICHT angefasst:
       --color-success / --color-warning / --color-danger und die
       Kalenderfarben — die sind semantisch (frei/belegt/gesperrt) und
       muessen lesbar bleiben, auch wenn sie nicht zur Marke passen. */
    --btn-primary-text: #FFFFFF;
    --btn-primary-text-hover: #FFFFFF;
    --btn-book-text: #FFFFFF;
    --btn-book-text-hover: #FFFFFF;


    /* ----- Bruecke zu den Skeleton-Variablen ---------------------------- */
    /* base.css, components.css und accommodation.css greifen auf
       --frontend-core-* zu, root.css definiert aber nur --color-*.
       Ohne diese Zuordnung bleiben Textfarbe, Flaechen und die Status-
       farben in den Fewo-Komponenten schlicht undefiniert. */
    --frontend-core-color-surface: var(--color-surface);
    --frontend-core-color-text: var(--color-text);
    --frontend-core-color-muted: var(--color-muted);
    --frontend-core-color-success: var(--color-success);
    --frontend-core-color-danger: var(--color-danger);
    --frontend-core-color-warning: var(--color-warning);
    --frontend-core-color-info: var(--color-info);
    --frontend-core-shadow-light: 0 6px 24px rgba(0, 0, 0, .12);

    /* Formularfelder wie auf der Vorlage: helle Fuellung, feiner Rahmen */
    --form-label-color: #1D1D1B;
}