/* =============================================================================
   bookit – Design-System
   Abgeleitet aus dem Moodboard "DJ Dirk – Relaunch" (warme, elegante Erdtöne).
   Schrift: Open Sans (gesamte Oberfläche).
   Enthält Design-Token (CSS-Variablen), Grundlayout, Buttons, Formulare,
   Karten, Tabellen, Badges – die Bausteine für alle folgenden Module.
   ============================================================================= */

/* --- Schriften (Google Fonts) --------------------------------------------- */
/* Open Sans für die gesamte Oberfläche (Text, UI und Überschriften). */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
/* Zusätzliche Schriften für die umschaltbaren Moodboard-Themes:
   „Neon" nutzt Plus Jakarta Sans, „Aurora" nutzt Poppins. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Design-Token ---------------------------------------------------------- */
/* Farb- und Formwerte 1:1 aus der Corporate Identity von djdirk.de (Bricks-
   Variablen, aus der Website ausgelesen). So wirkt bookit wie ein Teil der
   Website: warmes Cremeweiß, Taupe, Sand und Terrakotta als Akzent, sehr
   runde Karten und Pillen-Buttons. */
:root {
    /* Marken-Palette djdirk.de (HSL → HEX) */
    --c-anthrazit:   #464644;   /* --text-body  hsl(60,1%,27%)  */
    --c-taupe:       #877a6e;   /* --primary    hsl(29,10%,48%) */
    --c-taupe-dark:  #6b6157;   /* --primary-d-1 hsl(30,10%,38%)*/
    --c-sand:        #c9af98;   /* --secondary  hsl(29,25%,68%) */
    --c-sand-hell:   #e6ddd6;   /* --secondary-l-3 hsl(28,25%,87%) */
    --c-greige:      #b6ada5;   /* --primary-l-2 hsl(28,10%,68%) */
    --c-terracotta:  #a97060;   /* --tertiary   hsl(12,26%,52%) */
    --c-terracotta-dk:#87574a;  /* --tertiary-d-1 hsl(11,23%,41%)*/
    --c-terracotta-hell:#dbc4bd;/* --tertiary-l-3 hsl(14,29%,80%)*/
    --c-camel:       #c19a81;   /* --light-brown hsl(24,34%,63%)*/
    --c-cream:       #f3f0ec;   /* --bg-body    hsl(34,21%,94%) */
    --c-blush:       #f4ece4;   /* --secondary-l-4 hsl(23,27%,94%) */
    --c-white:       #ffffff;

    /* Rollen */
    --c-bg:          var(--c-cream);
    --c-surface:     var(--c-white);
    --c-text:        var(--c-anthrazit);
    --c-text-mut:    #6f6a64;
    --c-primary:     var(--c-taupe);
    --c-primary-dk:  var(--c-taupe-dark);
    --c-accent:      var(--c-terracotta);
    --c-border:      #e6ddd4;

    /* Status */
    --c-erfolg:      #5a7d54;
    --c-warnung:     #b8863b;
    --c-fehler:      #a4483f;

    /* Schrift */
    --font-head: 'Open Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --font-body: 'Open Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

    /* Form – runde, weiche Marken-Anmutung (Karten rund, Buttons als Pillen) */
    --radius:    18px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    /* Weicher, warmer Schatten (terrakotta-getönt) wie auf der Website */
    --schatten:    0 6px 22px rgba(169,112,96,.10), 0 1px 3px rgba(70,70,68,.05);
    --schatten-sm: 0 4px 16px rgba(169,112,96,.08);
}

/* --- Reset / Basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) – nur bei Tastaturnutzung. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--c-anthrazit); }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
a { color: var(--c-primary-dk); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font-family: var(--font-body); font-size: .95rem; font-weight: 600;
    padding: .75em 1.6em; border: 1px solid transparent; border-radius: var(--radius-pill);
    cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s;
    text-decoration: none; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: 0 4px 14px rgba(135,122,110,.28); }
.btn-primary:hover { background: var(--c-primary-dk); text-decoration: none; box-shadow: 0 6px 18px rgba(107,97,87,.32); }
.btn-accent { background: var(--c-accent); color: #fff; box-shadow: 0 4px 14px rgba(169,112,96,.30); }
.btn-accent:hover { background: var(--c-terracotta-dk); text-decoration: none; box-shadow: 0 6px 18px rgba(135,87,74,.34); }
.btn-ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-cream); border-color: var(--c-primary); text-decoration: none; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- Formulare ------------------------------------------------------------- */
.feld { margin-bottom: 1.1rem; }
.feld label { display: block; font-size: .82rem; font-weight: 600; color: var(--c-text-mut); margin-bottom: .35rem; letter-spacing: .01em; }
.input, .select, .textarea {
    width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--c-text);
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: .7em .85em; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(135,122,110,.18);
}
.textarea { min-height: 110px; resize: vertical; }
.feld-hinweis { font-size: .8rem; color: var(--c-text-mut); margin-top: .3rem; }

/* --- Karten ---------------------------------------------------------------- */
.card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--schatten-sm); padding: 1.4rem;
}
.card-titel { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 1rem; }

/* --- Meldungen ------------------------------------------------------------- */
.alert { padding: .8em 1em; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 1rem; border: 1px solid; }
.alert-erfolg  { background: #eef3ec; border-color: #cdddc6; color: #3f5a3a; }
.alert-warnung { background: #f7f0e2; border-color: #e6d5b0; color: #7d5c22; }
.alert-fehler  { background: #f7ebe9; border-color: #e6c9c4; color: #7d332b; }

/* --- Badges (z. B. Status) ------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; color: #fff; }
.badge .punkt { width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .9; }

/* --- Tabellen -------------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--c-text-mut); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: .7em .8em; border-bottom: 2px solid var(--c-border); }
.tabelle td { padding: .75em .8em; border-bottom: 1px solid var(--c-border); }
.tabelle tbody tr:hover { background: var(--c-cream); }

/* --- Logo (Herz + Wortmarke, als Inline-SVG-Ersatz) ----------------------- */
.logo { display: inline-flex; align-items: center; gap: .55rem; }
.logo .herz { color: var(--c-taupe); flex: none; }
.logo .wort { font-family: var(--font-head); font-weight: 600; letter-spacing: .08em; font-size: 1.25rem; color: var(--c-anthrazit); line-height: 1; }
.logo .wort small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .58rem; letter-spacing: .12em; color: var(--c-taupe); text-transform: none; margin-top: .15rem; }

/* --- Logo als Bild --------------------------------------------------------- */
.logo-img { display: inline-block; width: auto; vertical-align: middle; }

/* --- Demo-Hinweis (Banner) ------------------------------------------------- */
.demo-banner {
    background: var(--c-terracotta); color: #fff;
    font-size: .86rem; font-weight: 600; text-align: center;
    padding: .55em 1em; border-radius: var(--radius-sm); margin-bottom: 1.1rem;
    letter-spacing: .01em;
}
.auth-wrap + .demo-banner, .demo-banner:first-child { border-radius: 0; margin-bottom: 0; }

/* Automatisch umschaltendes Logo (hell/dunkel je nach Theme) */
.logo-auto .l-hell { display: none; }
.logo-auto .l-dunkel { display: inline-block; }
[data-theme="dark"] .logo-auto .l-dunkel { display: none; }
[data-theme="dark"] .logo-auto .l-hell { display: inline-block; }

/* --- Hilfsklassen ---------------------------------------------------------- */
.text-mut { color: var(--c-text-mut); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }

/* =============================================================================
   Dark-Mode
   -----------------------------------------------------------------------------
   Aktiv, sobald am <html>-Element data-theme="dark" gesetzt ist (serverseitig
   per Cookie, siehe theme_attr() / Umschalter in der Topbar).
   Die Erdtöne des Moodboards (Taupe, Terrakotta, Sand, Camel) bleiben als
   Marken-Akzente erhalten; nur die Flächen werden warm-dunkel. Weil die
   Rollen-Token in :root über var(...) definiert sind, genügt es, hier die
   Rollen- und die direkt genutzten Basis-Token neu zu belegen.
   ============================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    /* Rollen-Token: Flächen + Text (dunkel, warm) */
    --c-bg:         #1b1917;   /* Seitenhintergrund – am dunkelsten */
    --c-surface:    #262320;   /* Karten, Topbar, Eingabefelder */
    --c-text:       #ece7df;   /* Haupttext hell */
    --c-text-mut:   #a49d92;   /* gedämpfter Text */
    --c-primary:    #98897b;   /* Taupe etwas aufgehellt (Kontrast) */
    --c-primary-dk: #bcae9f;   /* Links, Badge-Text */
    --c-accent:     #cb8674;   /* Terrakotta, leicht aufgehellt */
    --c-border:     #3a352f;

    /* Direkt verwendete Basis-Token neu belegen */
    --c-anthrazit:  #ece7df;   /* Überschriften/Werte werden hell */
    --c-cream:      #2f2b26;   /* dezente, leicht erhöhte Fläche (Hover, Chips) */
    --c-white:      #262320;   /* explizite Flächen = Surface */
    --c-taupe:      #98897b;
    --c-taupe-dark: #bcae9f;
    --c-terracotta: #cb8674;
    --c-terracotta-dk: #b0705f;
    --c-terracotta-hell: #4a352f;
    --c-sand:       #b39d88;
    --c-sand-hell:  #3a332c;

    /* Status etwas aufhellen für Kontrast auf Dunkel */
    --c-erfolg:     #86ab7c;
    --c-warnung:    #d3a45e;
    --c-fehler:     #d4867b;

    /* Schatten kräftiger, damit Karten sich abheben */
    --schatten:     0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.45);
    --schatten-sm:  0 1px 3px rgba(0,0,0,.4);
}

/* Sidebar nutzt --c-anthrazit als Fläche → hier fix dunkel halten. */
[data-theme="dark"] .sidebar { background: #151311; }

/* Meldungen: dunkle, dezent getönte Varianten */
[data-theme="dark"] .alert-erfolg  { background:#1f2a1d; border-color:#33502c; color:#a9cfa0; }
[data-theme="dark"] .alert-warnung { background:#2c2413; border-color:#5a4a22; color:#e2c489; }
[data-theme="dark"] .alert-fehler  { background:#2c1a17; border-color:#5a332c; color:#e6a99f; }

/* Kalender: „fremde" (Nachbarmonats-)Tage + Agenda-Hover */
[data-theme="dark"] .kal-fremd            { background:#201d1a; }
[data-theme="dark"] .kal-fremd .kal-tagnr { color:#6f685f; }
[data-theme="dark"] .kal-agenda-chip:hover { background:#38332d; }

/* Statistik-Balkendiagramm (Inline-SVG): Achsen/Labels theme-gerecht.
   CSS überschreibt die fill/stroke-Präsentationsattribute im SVG. */
[data-theme="dark"] svg[role="img"] line { stroke: var(--c-border); }
[data-theme="dark"] svg[role="img"] text { fill: var(--c-text-mut); }

/* Login-/Auth-Markenspalte etwas satter abdunkeln */
[data-theme="dark"] .auth-brand { background-color:#2a2620; }

/* --- Theme-Umschalter (Topbar) -------------------------------------------- */
.theme-toggle {
    background: transparent; border: 1px solid var(--c-border); border-radius: 999px;
    width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
    color: var(--c-text-mut); flex: none;
    transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--c-text); border-color: var(--c-primary); }
.theme-toggle .ico { width: 18px; height: 18px; }
.theme-toggle .ico-sonne { display: none; }
[data-theme="dark"] .theme-toggle .ico-mond  { display: none; }
[data-theme="dark"] .theme-toggle .ico-sonne { display: block; }

/* =============================================================================
   Neon-Theme  (Moodboard „MODERN. LEUCHTEND. ANGESAGT.")
   -----------------------------------------------------------------------------
   Dunkel + leuchtende Verläufe (Lila/Pink/Cyan/Mint), Schrift Plus Jakarta Sans.
   Aktiv bei data-theme="neon". Wie beim Dark-Mode genügt es, die Rollen- und
   direkt genutzten Basis-Token neu zu belegen.
   ============================================================================= */
[data-theme="neon"] {
    color-scheme: dark;
    --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Palette: 6C3CFF Lila · FF2BBE Pink · 00F0FF Cyan · 7CFFCB Mint · 0A0E1A BG */
    --c-bg:         #0a0e1a;
    --c-surface:    #121826;
    --c-text:       #eaf0ff;
    --c-text-mut:   #8b93b5;
    --c-primary:    #6c3cff;
    --c-primary-dk: #7b52ff;
    --c-accent:     #00f0ff;
    --c-border:     #242c45;

    --c-anthrazit:  #ffffff;
    --c-cream:      #1a2136;
    --c-white:      #121826;
    --c-taupe:      #6c3cff;
    --c-taupe-dark: #7b52ff;
    --c-terracotta: #ff2bbe;
    --c-terracotta-dk: #e01ea6;
    --c-terracotta-hell: #2a1030;
    --c-sand:       #7cffcb;
    --c-sand-hell:  #16233a;

    --c-erfolg:     #57e6b0;
    --c-warnung:    #ffd166;
    --c-fehler:     #ff5c8a;

    --schatten:     0 2px 8px rgba(0,0,0,.5), 0 12px 34px rgba(108,60,255,.28);
    --schatten-sm:  0 2px 10px rgba(108,60,255,.22);
}
[data-theme="neon"] h1, [data-theme="neon"] h2, [data-theme="neon"] h3, [data-theme="neon"] h4 { color:#fff; font-weight:800; letter-spacing:-.01em; }
[data-theme="neon"] a { color: var(--c-accent); }
[data-theme="neon"] .btn-primary { background: linear-gradient(135deg,#6c3cff,#ff2bbe); color:#fff; box-shadow: 0 6px 22px rgba(108,60,255,.45), 0 2px 8px rgba(255,43,190,.35); }
[data-theme="neon"] .btn-primary:hover { filter: brightness(1.1); text-decoration:none; box-shadow: 0 8px 28px rgba(108,60,255,.6), 0 3px 12px rgba(255,43,190,.5); }
[data-theme="neon"] .btn-accent { background: linear-gradient(135deg,#00f0ff,#7cffcb); color:#04121a; box-shadow: 0 6px 22px rgba(0,240,255,.35); }
[data-theme="neon"] .btn-accent:hover { filter: brightness(1.08); text-decoration:none; }
[data-theme="neon"] .input:focus, [data-theme="neon"] .select:focus, [data-theme="neon"] .textarea:focus { box-shadow: 0 0 0 3px rgba(108,60,255,.30); }
[data-theme="neon"] .sidebar { background:#070a14; }
[data-theme="neon"] .nav-item.aktiv { background: linear-gradient(135deg,#6c3cff,#ff2bbe); color:#fff; }
[data-theme="neon"] .stat.akzent { border-left-color:#00f0ff; }
[data-theme="neon"] .auth-brand { background: radial-gradient(120% 120% at 15% 0%, #1c1246 0%, #0a0e1a 62%); }
[data-theme="neon"] .alert-erfolg  { background:#0d2620; border-color:#1c4d3f; color:#8affd6; }
[data-theme="neon"] .alert-warnung { background:#2a220d; border-color:#5a4a1c; color:#ffd98a; }
[data-theme="neon"] .alert-fehler  { background:#2a0f1c; border-color:#5a2440; color:#ff9dbf; }
[data-theme="neon"] .kal-fremd { background:#0e1424; }
[data-theme="neon"] .kal-fremd .kal-tagnr { color:#5b6486; }
[data-theme="neon"] .kal-agenda-chip:hover { background:#1a2136; }
[data-theme="neon"] svg[role="img"] line { stroke: var(--c-border); }
[data-theme="neon"] svg[role="img"] text { fill: var(--c-text-mut); }

/* =============================================================================
   Aurora-Theme  (Moodboard „SOUND. LIGHT. EMOTION.")
   -----------------------------------------------------------------------------
   Hell + moderne Verläufe (Lila/Pink/Orange/Teal), Schrift Poppins.
   Aktiv bei data-theme="aurora".
   ============================================================================= */
[data-theme="aurora"] {
    color-scheme: light;
    --font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Palette: 7B61FF Lila · FF4D9D Pink · FFB347 Orange · 00E0C7 Teal · 0B0D16 · F6F7FB */
    --c-bg:         #f6f7fb;
    --c-surface:    #ffffff;
    --c-text:       #0b0d16;
    --c-text-mut:   #6b7180;
    --c-primary:    #7b61ff;
    --c-primary-dk: #6a4ff0;
    --c-accent:     #ff4d9d;
    --c-border:     #e6e8f2;

    --c-anthrazit:  #0b0d16;
    --c-cream:      #eef0f8;
    --c-white:      #ffffff;
    --c-taupe:      #7b61ff;
    --c-taupe-dark: #6a4ff0;
    --c-terracotta: #ff4d9d;
    --c-terracotta-dk: #e63d88;
    --c-terracotta-hell: #ffe1ee;
    --c-sand:       #ffb347;
    --c-sand-hell:  #fff0dc;

    --c-erfolg:     #12b8a6;
    --c-warnung:    #e0912a;
    --c-fehler:     #e23e6d;

    --schatten:     0 6px 24px rgba(123,97,255,.12), 0 1px 3px rgba(11,13,22,.06);
    --schatten-sm:  0 4px 16px rgba(123,97,255,.10);
}
[data-theme="aurora"] h1, [data-theme="aurora"] h2, [data-theme="aurora"] h3, [data-theme="aurora"] h4 { color:#0b0d16; font-weight:700; letter-spacing:-.01em; }
[data-theme="aurora"] a { color: var(--c-primary); }
[data-theme="aurora"] .btn-primary { background: linear-gradient(135deg,#7b61ff,#ff4d9d); color:#fff; box-shadow: 0 6px 20px rgba(123,97,255,.32); }
[data-theme="aurora"] .btn-primary:hover { filter: brightness(1.06); text-decoration:none; box-shadow: 0 8px 26px rgba(123,97,255,.42); }
[data-theme="aurora"] .btn-accent { background: linear-gradient(135deg,#ff4d9d,#ffb347); color:#fff; box-shadow: 0 6px 20px rgba(255,77,157,.30); }
[data-theme="aurora"] .btn-accent:hover { filter: brightness(1.05); text-decoration:none; }
[data-theme="aurora"] .input:focus, [data-theme="aurora"] .select:focus, [data-theme="aurora"] .textarea:focus { box-shadow: 0 0 0 3px rgba(123,97,255,.20); }
[data-theme="aurora"] .sidebar { background:#0b0d16; }
[data-theme="aurora"] .nav-item.aktiv { background: linear-gradient(135deg,#7b61ff,#ff4d9d); color:#fff; }
[data-theme="aurora"] .stat.akzent { border-left-color:#ff4d9d; }
[data-theme="aurora"] .auth-brand { background: linear-gradient(160deg, #efe9ff 0%, #ffe6f2 55%, #fff2e0 100%); }
[data-theme="aurora"] svg[role="img"] line { stroke: var(--c-border); }
[data-theme="aurora"] svg[role="img"] text { fill: var(--c-text-mut); }

/* --- Design-Menü (Topbar/Login): Hell · Dunkel · Neon · Aurora ------------- */
.theme-menu-wrap { position: relative; flex: none; }
.theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 172px; padding: 6px; margin: 0;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 14px; box-shadow: var(--schatten);
}
.theme-menu[hidden] { display: none; }
.theme-menu button {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .55em .7em; border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-body); font-size: .9rem; color: var(--c-text);
    text-align: left; border-radius: 9px; transition: background .12s;
}
.theme-menu button:hover { background: var(--c-cream); }
.theme-menu button.aktiv { background: var(--c-cream); font-weight: 700; }
.theme-menu .tm-swatch { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid rgba(128,128,128,.35); }
.theme-menu .tm-check { margin-left: auto; opacity: 0; color: var(--c-primary); font-weight: 700; }
.theme-menu button.aktiv .tm-check { opacity: 1; }
.tm-hell   { background: #f3f0ec; }
.tm-dunkel { background: #1b1917; }
.tm-neon   { background: linear-gradient(135deg,#6c3cff,#ff2bbe); border-color: transparent; }
.tm-aurora { background: linear-gradient(135deg,#7b61ff,#ff4d9d); border-color: transparent; }