/* vcard4reseller — Marken-Design-System (orientiert an vcard4reseller.de) */
:root {
    --psc-orange: #f58220;
    --psc-orange-dark: #d96500;
    --psc-orange-soft: #fff2e7;
    --psc-orange-soft-2: #fff8f1;
    --psc-border: #f4d4bb;
    --text: #343434;
    --dark: #222222;
    --muted: #6f6f6f;
    --bg: #f7f7f7;
    --white: #ffffff;
    --success: #238636;
    --shadow: 0 18px 45px rgba(30, 30, 30, 0.10);
    --shadow-sm: 0 6px 18px rgba(30, 30, 30, 0.08);
    --radius: 22px;
    --radius-sm: 14px;
    --font: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--dark); font-weight: 700; line-height: 1.2; margin: 0 0 .4em; }

a { color: var(--psc-orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Marken-Logo (Wortmarke) */
.brand-logo {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--dark);
    letter-spacing: -0.01em;
}
.brand-logo .tag {
    background: var(--psc-orange);
    color: var(--white);
    padding: 2px 10px;
    border-radius: 999px;
    margin-left: 4px;
}

/* Pill-Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--psc-orange); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--psc-orange-dark); color: var(--white); }
.btn-soft { background: var(--psc-orange-soft); color: var(--psc-orange-dark); }
.btn-soft:hover { background: var(--psc-border); color: var(--psc-orange-dark); }
.btn-ghost { background: var(--white); color: var(--dark); border-color: #e7e7e7; }

/* Karte */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid #f0f0f0;
}

.muted { color: var(--muted); }