/* =====================================================================
 * cdpcommerce/assets/ui.css
 * Die zentralen Größen des Verbunds (AUFTRAG-244).
 *
 * Nichts davon ist erfunden. Jeder Wert stammt aus dem bereits
 * freigegebenen C-Muster und wurde am ausgelieferten Shop gemessen:
 * Fließtext 20px, Navigation 15px, Buttons 16px, H1 48px, H2 32px,
 * Innenabstände 12/16/20/24px.
 *
 * Wofür diese Datei da ist: dieselbe Elementart soll überall dieselbe
 * Größe haben. Die Kontonavigation war 20px groß, die Hauptnavigation
 * 15px - beides sind Menüeinträge, und dafür gibt es keinen fachlichen
 * Grund. Solche Abweichungen entstehen, wenn jede Seite ihre Werte
 * selbst setzt.
 *
 * Was diese Datei NICHT tut: alles auf eine Größe zwingen. Die
 * typografische Hierarchie bleibt, wie sie ist - Überschriften sind
 * weiterhin größer als Fließtext. Gleich wird nur, was dieselbe
 * Aufgabe hat.
 * ===================================================================== */

:root {
    /* Schriftgrößen ------------------------------------------------ */
    --cdp-ui-text: 20px;          /* Fließtext, Standard des C-Musters */
    --cdp-ui-text-sm: 16px;       /* dichter gesetzter Text, Tabellen   */
    --cdp-ui-note: 13px;          /* Hinweise, Fußnoten, Meta           */
    --cdp-ui-label: 13px;         /* Feldbeschriftungen                 */
    --cdp-ui-nav: 15px;           /* Navigation - Haupt UND Konto       */
    --cdp-ui-button: 16px;        /* Schaltflächen                      */
    --cdp-ui-h1: 48px;
    --cdp-ui-h2: 32px;
    --cdp-ui-h3: 24px;
    --cdp-ui-h4: 20px;

    /* Zeilenhöhen -------------------------------------------------- */
    --cdp-ui-lh: 1.55;
    --cdp-ui-lh-tight: 1.2;

    /* Innenabstände ------------------------------------------------ */
    --cdp-ui-pad-card: 24px;      /* Karten, Boxen, Panels              */
    --cdp-ui-pad-card-sm: 16px;   /* dichte Karten                      */
    --cdp-ui-pad-field: 12px 16px;/* Eingabefelder                      */
    --cdp-ui-pad-button: 12px 24px;
    --cdp-ui-pad-nav: 12px 20px;  /* Navigationseinträge                */
    --cdp-ui-pad-cell: 12px 16px; /* Tabellenzellen                     */

    /* Abstände ----------------------------------------------------- */
    --cdp-ui-gap: 16px;
    --cdp-ui-gap-sm: 8px;
    --cdp-ui-gap-lg: 24px;
    --cdp-ui-stack: 20px;         /* vertikaler Standardabstand         */
}

/* ---------------------------------------------------------------------
 * Die Kontonavigation.
 *
 * Bewusst an .sf-sidebar gebunden und nicht an ein blankes Element:
 * diese Datei darf nichts anfassen, was sie nicht meint.
 * ------------------------------------------------------------------- */
.sf-sidebar-link,
.sf-sidebar-heading {
    font-size: var(--cdp-ui-nav);
    line-height: var(--cdp-ui-lh);
}
.sf-sidebar-link { padding: var(--cdp-ui-pad-nav); }
.sf-sidebar-heading { padding: var(--cdp-ui-gap-sm) 20px; }

/* Text darf nicht am Rahmen kleben. Das gilt für jede Box, die der
 * Kundenbereich aufspannt - nicht nur für die, auf der es aufgefallen
 * ist. */
.sf-account-card,
.sf-account-box,
.sf-account-panel,
.sf-customer-card {
    padding: var(--cdp-ui-pad-card);
}

/* AUFTRAG-246: Die Regel darüber traf im Kundenbereich von
 * smarfie.shop nichts - die Karten dort heißen .sf-dash__panel. Der
 * Erklärungstext und das Widerrufsformular lagen deshalb weiter 1px
 * vom sichtbaren Rahmen entfernt, gemessen im Browser.
 *
 * Der Abstand kommt bewusst auf die Kinder und nicht auf die Karte
 * selbst: .sf-dash__panel-head trägt die Trennlinie über die volle
 * Breite und bringt seine 20px schon mit. Bekäme die Karte zusätzlich
 * einen Innenabstand, wäre die Linie eingerückt und der Kopf doppelt
 * gepolstert. Gepolstert wird deshalb genau das, was noch nackt ist. */
.sf-dash__panel > p,
.sf-dash__panel > ul,
.sf-dash__panel > ol,
.sf-dash__panel > .sf-dash__empty,
.sf-dash__panel > .sf-withdraw-form,
.sf-dash__panel > .sf-withdraw-summary,
.sf-dash__panel > .sf-withdraw-alert,
.sf-dash__panel > .sf-withdraw-hint,
.sf-dash__panel > .sf-withdraw-field {
    padding-left: var(--cdp-ui-pad-card);
    padding-right: var(--cdp-ui-pad-card);
}

.sf-dash__panel > p:first-child,
.sf-dash__panel > ul:first-child,
.sf-dash__panel > .sf-dash__empty:first-child,
.sf-dash__panel > .sf-withdraw-form:first-child,
.sf-dash__panel > .sf-withdraw-summary:first-child,
.sf-dash__panel > .sf-withdraw-alert:first-child {
    padding-top: var(--cdp-ui-pad-card);
}

.sf-dash__panel > p:last-child,
.sf-dash__panel > ul:last-child,
.sf-dash__panel > .sf-dash__empty:last-child,
.sf-dash__panel > .sf-withdraw-form:last-child,
.sf-dash__panel > .sf-withdraw-summary:last-child,
.sf-dash__panel > .sf-withdraw-alert:last-child {
    padding-bottom: var(--cdp-ui-pad-card);
}

/* Der Kopf der Karte bringt eigene 20px mit. In derselben Karte zwei
 * Werte zu haben sieht man - deshalb bekommt auch er den zentralen
 * Wert. Vergrößert, nie verkleinert: der Standard ist 24px und darf
 * nicht auf die Untergrenze zurückgestutzt werden. */
.sf-dash__panel > .sf-dash__panel-head,
.sf-dash__panel > .sf-dash__empty {
    padding: var(--cdp-ui-pad-card);
}

.sf-account-table th,
.sf-account-table td { padding: var(--cdp-ui-pad-cell); }

@media (max-width: 767px) {
    :root {
        /* Auf schmalen Geräten bleibt Text lesbar - kleiner, aber nicht
         * beliebig klein. Die Hierarchie bleibt erhalten. */
        --cdp-ui-h1: 34px;
        --cdp-ui-h2: 26px;
        --cdp-ui-h3: 21px;
        --cdp-ui-pad-card: 16px;
    }
}