/* ══════════════════════════════════════════════════════════════════
   account.css — Kundenbereich xxl-art

   Struktur vom Newsletter-Dashboard (Seitenleiste 260px, Karten,
   Statuspillen), aber ausschliesslich mit den Tokens des Shops:

     Schrift   --font-display (Antonio)  Ueberschriften + Kleinlabels
               --font-primary (Inter)    Fliesstext
     Akzent    --gold                    statt Tuerkis
     Flaechen  --bg / --bg2 / --bg3

   Die Kleinlabels stehen im Newsletter in JetBrains Mono. Hier
   uebernimmt Antonio in Versalien mit weiter Laufweite diese Rolle:
   gleiche Wirkung als technisches Etikett, aber ohne eine siebte
   Schriftfamilie zu laden.

   Alles unter .acc- — der Shop hat eigene .card, .badge, .nav-item.
   Ohne Praefix haetten die sich gegenseitig ueberschrieben.
   ══════════════════════════════════════════════════════════════════ */

.acc-shell {
    /* Lokale Aliase: EINE Stelle zum Umstellen, und der Rest der Datei
       liest nur noch --acc-*. Die Rueckfallwerte greifen, falls die
       Seite ohne css_inline_2026.php geladen wird. */
    --acc-gold:        var(--gold, #c8a44d);
    --acc-gold-soft:   var(--gold-soft, #d4a853);
    --acc-gold-dim:    rgba(200, 164, 77, .12);
    --acc-gold-border: rgba(200, 164, 77, .30);
    --acc-gold-glow:   rgba(200, 164, 77, .07);
    --acc-on-gold:     #16120a;
    
    --acc-brand: #c76629;

    --acc-bg:       var(--bg,  #fff);
    --acc-surface:  var(--bg2, rgb(255, 255, 255));
    --acc-surface2: var(--bg3, rgb(255, 255, 255));
    --acc-border:   var(--border, rgba(255, 255, 255, .07));
    
    --surface: rgb(255, 255, 255);

    --acc-fg:      var(--fg,  rgb(255, 128, 0));
    --acc-fg2:     var(--fg2, rgba(0,0,0,1));
    --acc-fg3:     var(--fg3, rgba(0,0,0,1));

    --acc-ok:    #4a9e6b;
    --acc-warn:  #d8a13a;
    --acc-error: #c04a4a;
    --acc-info:  #4a7ec0;

    --acc-radius:    8px;
    --acc-radius-lg: 14px;
    --acc-ease:      var(--ease, cubic-bezier(.16, 1, .3, 1));
    --acc-side-w:    260px;

    display: block;
    width: 100%;
    max-width: var(--max_body_width, 1600px);
    margin: 0 auto;
    color: var(--acc-fg);
    font-family: var(--font-primary);
    font-weight: 300;
}

/* ── Kleinlabel-Rolle: Antonio als Etikett ─────────────────────── */
.acc-side__eyebrow,
.acc-nav__group,
.acc-card__title,
.acc-kpi__label,
.acc-pill,
.acc-btn,
.acc-tbl th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.acc-shell__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.acc-main {
    min-width: 0;              /* ohne das sprengen breite Tabellen das Grid */
    padding: 24px 16px 80px;
}

@media (min-width: 992px) {
    .acc-shell__body {
        grid-template-columns: var(--acc-side-w) minmax(0, 1fr);
        gap: 32px;
    }
    .acc-main {
        padding: 8px 24px 100px 0;
    }
}


.app-bar-padding-top {
    padding-top: 50px !important;
}


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION — Reiter auf Mobil, Seitenleiste ab 992px
   ══════════════════════════════════════════════════════════════════ */

.acc-side {
    position: relative;
    z-index: 5;
}

/* ── Kopf: nur Desktop. Auf Mobil kostet der Name die Zeile, die die
      Reiter brauchen — der Kunde weiss ohnehin, wer er ist. ── */
.acc-side__head { display: none; }

.acc-side__eyebrow {
    display: block;
    font-size: .72rem;
    color: var(--acc-gold);
    opacity: .8;
    margin-bottom: 6px;
}

.acc-side__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--acc-fg);
    text-transform: uppercase;
}

/* ── Mobil: eine scrollbare Reiterzeile ── */
.acc-nav {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 2px;
    border-bottom: 1px solid var(--acc-border);
    scroll-snap-type: x proximity;
}
.acc-nav::-webkit-scrollbar { display: none; }

/* Gruppentitel ergeben in einer Zeile keinen Sinn */
.acc-nav__group { display: none; }

.acc-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 13px 14px;
    color: var(--acc-fg2);
    text-decoration: none;
    white-space: nowrap;
    font-size: .95rem;
    border-bottom: 2px solid transparent;
    transition: color .18s var(--acc-ease), border-color .18s var(--acc-ease);
}

/* Der Shop faerbt jedes a global weiss — das muss hier ueberstimmt
   werden, sonst sind aktiv und inaktiv nicht zu unterscheiden. */
.acc-shell a.acc-nav__item:link,
.acc-shell a.acc-nav__item:visited { color: var(--acc-fg2); }

.acc-shell a.acc-nav__item:hover,
.acc-shell a.acc-nav__item:focus-visible { color: var(--acc-fg); }

.acc-shell a.acc-nav__item.is-active:link,
.acc-shell a.acc-nav__item.is-active:visited {
    color: var(--acc-brand);
    border-bottom-color: var(--acc-brand);
}

.acc-nav__icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: .85;
}

.acc-side__foot { display: none; }

/* ── Desktop: Seitenleiste ── */
@media (min-width: 992px) {

    .acc-side {
        position: sticky;
        top: 110px;                 /* unter der App-Bar */
        align-self: start;
        background: var(--acc-surface);
        border: 1px solid var(--acc-border);
        border-radius: var(--acc-radius-lg);
        padding: 22px 0 12px;
        overflow: hidden;
    }

    .acc-side__head {
        display: block;
        padding: 0 20px 18px;
        border-bottom: 1px solid var(--acc-border);
    }

    .acc-nav {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 10px 0 6px;
        border-bottom: 0;
    }

    .acc-nav__group {
        display: block;
        font-size: .68rem;
        color: var(--acc-fg3);
        padding: 16px 20px 7px;
    }

    .acc-nav__item {
        width: 100%;
        padding: 11px 20px;
        border-bottom: 0;
        border-left: 2px solid transparent;
        font-size: 1rem;
        transition: color .18s var(--acc-ease),
                    background .18s var(--acc-ease),
                    border-color .18s var(--acc-ease);
    }

    .acc-shell a.acc-nav__item:hover {
        background: var(--acc-gold-glow);
    }

    .acc-shell a.acc-nav__item.is-active:link,
    .acc-shell a.acc-nav__item.is-active:visited {
        background: var(--acc-gold-dim);
        border-bottom-color: transparent;
        border-left-color: var(--acc-gold);
    }

    .acc-side__foot {
        display: block;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--acc-border);
    }

    .acc-shell a.acc-nav__item--quiet:link,
    .acc-shell a.acc-nav__item--quiet:visited { color: var(--acc-fg3); }
    .acc-shell a.acc-nav__item--quiet:hover   { color: var(--acc-error); }
}


/* ══════════════════════════════════════════════════════════════════
   SEITENKOPF
   ══════════════════════════════════════════════════════════════════ */

.acc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.acc-head__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--acc-fg);
    margin: 0;
}

.acc-head__sub {
    margin-top: 8px;
    font-size: .95rem;
    color: var(--acc-fg2);
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════
   KARTEN / KPI
   ══════════════════════════════════════════════════════════════════ */

.acc-card {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-lg);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.acc-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--acc-border);
}

.acc-card__title {
    font-size: .78rem;
    color: var(--acc-fg);
}

.acc-grid { display: grid; gap: 18px; }
.acc-grid--2 { grid-template-columns: 1fr; }
.acc-grid--3 { grid-template-columns: 1fr 1fr; }

@media (min-width: 740px) {
    .acc-grid--2 { grid-template-columns: 1fr 1fr; }
    .acc-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.acc-kpi {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-lg);
    padding: 18px 20px;
    transition: border-color .2s var(--acc-ease);
}
.acc-kpi:hover { border-color: var(--acc-gold-border); }

.acc-kpi__label {
    font-size: .66rem;
    color: var(--acc-fg3);
    margin-bottom: 10px;
}

.acc-kpi__value {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--acc-fg);
}


/* ══════════════════════════════════════════════════════════════════
   PILLEN / BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .66rem;
    padding: 5px 11px 4px;
    border-radius: 100px;
    border: 1px solid var(--acc-border);
    color: var(--acc-fg2);
    white-space: nowrap;
}
.acc-pill--ok      { color: var(--acc-ok);    border-color: rgba(74,158,107,.30);  background: rgba(74,158,107,.08); }
.acc-pill--wait    { color: var(--acc-warn);  border-color: rgba(216,161,58,.30);  background: rgba(216,161,58,.08); }
.acc-pill--stop    { color: var(--acc-error); border-color: rgba(192,74,74,.30);   background: rgba(192,74,74,.08); }
.acc-pill--work    { color: var(--acc-info);  border-color: rgba(74,126,192,.30);  background: rgba(74,126,192,.08); }
.acc-pill--gold    { color: var(--acc-gold);  border-color: var(--acc-gold-border);background: var(--acc-gold-dim); }

.acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    background: transparent;
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius);
    color: var(--acc-fg2);
    font-size: .72rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .18s var(--acc-ease), color .18s var(--acc-ease),
                background .18s var(--acc-ease);
}
.acc-shell a.acc-btn:link,
.acc-shell a.acc-btn:visited { color: var(--acc-fg2); }
.acc-btn:hover { border-color: var(--acc-gold-border); }
.acc-shell a.acc-btn:hover { color: var(--acc-fg); }

.acc-btn--gold {
    background: var(--acc-gold);
    border-color: transparent;
    color: var(--acc-on-gold);
    font-weight: 500;
}
.acc-shell a.acc-btn--gold:link,
.acc-shell a.acc-btn--gold:visited,
.acc-shell a.acc-btn--gold:hover { color: var(--acc-on-gold); }
.acc-btn--gold:hover { filter: brightness(1.08); }

.acc-btn--ghost { border-color: var(--acc-gold-border); color: var(--acc-gold); }
.acc-shell a.acc-btn--ghost:link,
.acc-shell a.acc-btn--ghost:visited { color: var(--acc-gold); }
.acc-btn--ghost:hover { background: var(--acc-gold-dim); }


/* ══════════════════════════════════════════════════════════════════
   MELDUNGEN / LEERZUSTAND
   ══════════════════════════════════════════════════════════════════ */

.acc-msg {
    border-radius: var(--acc-radius);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: .95rem;
    line-height: 1.55;
    border: 1px solid var(--acc-border);
}
.acc-msg--ok   { color: var(--acc-ok);    border-color: rgba(74,158,107,.30); background: rgba(74,158,107,.07); }
.acc-msg--err  { color: var(--acc-error); border-color: rgba(192,74,74,.30);  background: rgba(192,74,74,.07); }

.acc-empty {
    text-align: center;
    padding: 70px 24px;
    border: 1px dashed var(--acc-border);
    border-radius: var(--acc-radius-lg);
}
.acc-empty__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--acc-fg);
    margin-bottom: 10px;
}
.acc-empty__txt {
    font-size: .98rem;
    color: var(--acc-fg2);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0 auto 22px;
}


/* ══════════════════════════════════════════════════════════════════
   DEV-ANSICHT — bewusst laut. Sie soll auffallen, nicht huebsch sein.
   ══════════════════════════════════════════════════════════════════ */

.acc-devbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 10px 16px;
    border: 1px solid var(--acc-error);
    border-radius: var(--acc-radius);
    background: rgba(192, 74, 74, .10);
    font-size: .88rem;
}
.acc-devbar__tag {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .68rem;
    color: var(--acc-error);
}
.acc-devbar__txt { color: var(--acc-fg2); }
.acc-devbar__txt strong { color: var(--acc-fg); font-weight: 500; }
.acc-shell a.acc-devbar__exit:link,
.acc-shell a.acc-devbar__exit:visited {
    margin-left: auto;
    color: var(--acc-error);
    text-decoration: underline;
    font-size: .82rem;
}

.acc-devswitch {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 10px 14px;
    border: 1px dashed rgba(192, 74, 74, .45);
    border-radius: var(--acc-radius);
}
.acc-devswitch__form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.acc-devswitch__tag {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .66rem;
    color: var(--acc-error);
}
.acc-devswitch__in {
    width: 130px;
    background: var(--acc-bg);
    border: 1px solid var(--acc-border);
    border-radius: 5px;
    color: var(--acc-fg);
    font-family: var(--font-primary);
    font-size: .85rem;
    padding: 7px 10px;
}
.acc-devswitch__in:focus {
    outline: none;
    border-color: var(--acc-gold-border);
}
.acc-devswitch__go {
    background: transparent;
    border: 1px solid rgba(192, 74, 74, .5);
    border-radius: 5px;
    color: var(--acc-error);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem;
    padding: 8px 14px;
    cursor: pointer;
}
.acc-devswitch__go:hover { background: rgba(192, 74, 74, .12); }


/* ══════════════════════════════════════════════════════════════════
   BRUECKE ZU DEN BESTEHENDEN SEITEN

   mein_konto.inc.php und orders.inc.php bringen ihre eigenen Klassen
   mit. Sie hier anzugleichen kostet 30 Zeilen und macht den Bereich
   sofort einheitlich — statt beide Dateien jetzt schon anzufassen und
   damit zwei Baustellen gleichzeitig offen zu haben.
   ══════════════════════════════════════════════════════════════════ */

.acc-shell .card_box {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-lg);
    backdrop-filter: none;
    padding: 22px 24px;
    color:black;
}

.acc-shell .cards_wrapper { padding: 0; }

.acc-shell .login_address_box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 740px) {
    .acc-shell .login_address_box { grid-template-columns: 1fr 1fr; }
}

.acc-shell .uo-wrap    { padding: 0; max-width: none; }
.acc-shell .uo-row     { border-color: var(--acc-border); border-radius: var(--acc-radius-lg); }
.acc-shell .uo-summary { background: rgb(232 231 231); }
.acc-shell .uo-summary:hover { background: rgb(232 231 231); }
.acc-shell .uo-row.is-open   { border-left: 2px solid var(--acc-gold); }
.acc-shell .uo-details { background: var(--acc-bg); }
.acc-shell .uo-invoice-btn {
    color: var(--acc-gold);
    border-color: var(--acc-gold-border);
    background: var(--acc-gold-dim);
    font-family: var(--font-display);
}
.acc-shell .uo-invoice-btn:hover {
    color: var(--acc-gold);
    border-color: var(--acc-gold);
    background: rgba(200, 164, 77, .18);
}


/* ══════════════════════════════════════════════════════════════════
   GRUNDQUALITAET
   ══════════════════════════════════════════════════════════════════ */

.acc-shell :focus-visible {
    outline: 2px solid var(--acc-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .acc-shell *,
    .acc-shell *::before,
    .acc-shell *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   RANG UND PLATZ

   Steht rechts im Seitenkopf, auf Mobil darunter. Bewusst ruhig: kein
   Abzeichen, kein Pokal. Der Rang soll wie eine Anrede wirken, nicht
   wie eine Punktetafel — wer zehn Originale besitzt, braucht keine
   Medaille, um sich ernst genommen zu fuehlen.
   ══════════════════════════════════════════════════════════════════ */

.acc-rank {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

@media (min-width: 740px) {
    .acc-rank { align-items: flex-end; text-align: right; }
}

.acc-rank__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--acc-gold);
}

.acc-rank__pos {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    color: var(--acc-fg2);
}

/* ── Zeile darunter: Zuspruch links, Ziel rechts ── */
.acc-rank-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: -8px 0 30px;
    padding: 14px 18px;
    border-radius: var(--acc-radius);
    border: 1px solid var(--acc-border);
    background: var(--acc-surface);
}

.acc-rank-bar__note {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--acc-fg);
}

.acc-rank-bar__next {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--acc-gold);
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════
   ZEITACHSE — "Meine Sammlung"

   Aufbau je Erwerb: links eine Datumsspalte mit Punkt auf der Achse,
   rechts die Werke.

       2026 ────────────────────────
           14  ●  [ Werke ]
         MAERZ

   Der Punkt sitzt auf der Linie und bekommt einen Ring in der
   Hintergrundfarbe — dadurch wirkt er gesetzt statt aufgeklebt.

   Die Linie ist ein Pseudo-Element des Containers, kein Rahmen je
   Knoten: sie muss durch die Luecken zwischen den Tagen laufen, sonst
   ist sie an jeder Fuge unterbrochen.
   ══════════════════════════════════════════════════════════════════ */

.acc-tl {
    position: relative;
    --acc-tl-col: 92px;    /* Breite der Datumsspalte */
    --acc-tl-gap: 30px;    /* Abstand zu den Werken   */
}

/* ── Jahresmarke ── */
.acc-tl__year {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin: 74px 0 30px;
}
.acc-tl__year:first-child { margin-top: 10px; }

.acc-tl__year-num {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--acc-gold);
    flex: 0 0 auto;
}

.acc-tl__year-line {
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(to right, var(--acc-gold-border), transparent);
    transform: translateY(-.35em);
}

/* ── Ein Erwerb ── */
.acc-tl__node {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 56px;
}

/* ── Datumsspalte ── */
.acc-tl__aside {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-tl__date {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.acc-tl__day {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--acc-fg);
}

.acc-tl__month {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .74rem;
    color: var(--acc-fg2);
}

.acc-tl__date--unknown {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    color: var(--acc-fg3);
}

/* ── Der Punkt ──
   Gefuellt, mit Ring in der Hintergrundfarbe und einem weichen Schein.
   Er soll wie ein gesetzter Moment aussehen, nicht wie ein Aufzaehlungs-
   zeichen. */
.acc-tl__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--acc-gold);
    box-shadow:
        0 0 0 4px var(--acc-bg),
        0 0 0 5px var(--acc-gold-border),
        0 0 14px 2px rgba(200, 164, 77, .28);
}

/* ── Hinweis bei fehlenden Werken ── */
.acc-tl__note {
    font-size: .88rem;
    color: var(--acc-fg3);
    line-height: 1.6;
    margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   DER ERSTE ERWERB

   Kein eigener Knoten — sonst stuende sein Datum zweimal auf der Achse.
   Stattdessen bekommt der vorhandene Knoten einen groesseren Punkt, ein
   goldenes Datum und darunter eine kurze Zeile.

   Vorher stand hier grauer Kleintext, der wie deaktiviert aussah:
   ausgerechnet der wichtigste Punkt der Achse war der leiseste.
   ══════════════════════════════════════════════════════════════════ */

.acc-tl__dot--first {
    width: 15px;
    height: 15px;
    background: var(--acc-gold);
    box-shadow:
        0 0 0 4px var(--acc-bg),
        0 0 0 6px var(--acc-gold),
        0 0 22px 4px rgba(200, 164, 77, .45);
}

/* ── Der Anfang: hier endet die Linie ──────────────────────────────
   Das Bild steht darueber, darunter Punkt und Datum. Der Punkt sitzt
   auf derselben Achse wie alle anderen, nur groesser — die Linie laeuft
   also sichtbar in ihn hinein und hoert dort auf. */
.acc-tl__begin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.acc-tl__begin-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.acc-tl__begin-date {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--acc-gold);
}

.acc-tl__begin-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .72rem;
    color: var(--acc-fg2);
}

/* ══════════════════════════════════════════════════════════════════
   AB TABLET: zwei Spalten und durchgehende Achse
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 740px) {

    .acc-tl { padding-left: 0; }

    /* Die Achse liegt genau am rechten Rand der Datumsspalte — und auf
       dem Track, damit sie am Punkt des ersten Erwerbs endet statt am
       unteren Rand des Containers. */
    .acc-tl__track { position: relative; }

    .acc-tl__track::before {
        content: '';
        position: absolute;
        left: var(--acc-tl-col);
        top: 18px;
        bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom,
                    var(--acc-gold-border) 0%,
                    var(--acc-border) 55%,
                    var(--acc-gold-border) 100%);
    }

    /* Punkt auf die Achse setzen, Text daneben. */
    .acc-tl__begin { padding-left: calc(var(--acc-tl-col) + var(--acc-tl-gap)); }

    .acc-tl__begin .acc-tl__dot--first {
        position: absolute;
        left: var(--acc-tl-col);
        top: 50%;
        transform: translate(-50%, -50%);
        right: auto;
    }

    .acc-tl__node {
        grid-template-columns: var(--acc-tl-col) 1fr;
        gap: var(--acc-tl-gap);
        align-items: start;
    }

    /* Der erste Tag hat keine Datumsspalte: das Bild steht ueber der
       Marke, nicht daneben. Die Werke bleiben trotzdem buendig mit
       allen anderen.

       WICHTIG: diese Regel muss NACH .acc-tl__node stehen. Beide haben
       dieselbe Spezifitaet, also gewinnt die spaetere. Stand sie davor,
       bekam der erste Tag doch zwei Spalten — die Werke landeten in der
       92px schmalen Datumsspalte und wurden vom margin-left aus dem
       sichtbaren Bereich geschoben. Man sah nur noch den Punkt. */
    .acc-tl__node--first {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }

    .acc-tl__node--first .acc-tl__works {
        margin-left: calc(var(--acc-tl-col) + var(--acc-tl-gap));
    }

    /* Datum rechtsbuendig an die Achse, Punkt sitzt darauf. */
    .acc-tl__aside {
        justify-content: flex-end;
        padding-right: 24px;
        padding-top: 2px;
    }

    .acc-tl__date { flex-direction: column; align-items: flex-end; gap: 3px; }

    .acc-tl__dot {
        position: absolute;
        right: -5.5px;
        top: 8px;
    }

    .acc-tl__dot--first { right: -7.5px; top: 6px; }

    .acc-tl__day   { font-size: 2.3rem; }
    .acc-tl__year  { margin-bottom: 34px; }
}

/* ══════════════════════════════════════════════════════════════════
   WERK-KACHEL — tiles/sammlung.php

   Absichtlich still: kein Rahmen, kein Farbverlauf, keine Fahne. Das
   Bild traegt, die Schrift begleitet. Alles, was im Shop zum Kaufen
   antreibt, faellt hier weg.
   ══════════════════════════════════════════════════════════════════ */

.acc-work {
    display: block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.acc-work__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--acc-surface);
    border-radius: 3px;   /* fast eckig — ein Bild hat keine runden Ecken */
}

.acc-work__media img,
.acc-work__media picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* das ganze Werk, nicht ein Ausschnitt */
    transition: transform .7s var(--acc-ease);
}

.acc-work:hover .acc-work__media img { transform: scale(1.02); }

.acc-work__caption {
    padding: 14px 2px 0;
}

.acc-work__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--acc-fg);
    margin: 0 0 5px;
    transition: color .2s var(--acc-ease);
}
.acc-work:hover .acc-work__title { color: var(--acc-gold); }

.acc-work__size {
    display: block;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--acc-fg3);
}

/* ── "Bald bei dir" ──
   Der einzige Vorgang auf dieser Seite. Er darf auffallen, ohne zu
   draengen: Gold, ein ruhig pulsierender Punkt, sonst nichts. Ein
   Fortschrittsbalken oder ein Datum waere wieder Verwaltung. */
.acc-work__soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 12px 5px 10px;
    border: 1px solid var(--acc-gold-border);
    border-radius: 100px;
    background: var(--acc-gold-dim);

    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .68rem;
    color: var(--acc-gold);
}

.acc-work__soon-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acc-gold);
    flex: 0 0 auto;
    animation: acc-soon-pulse 2.4s ease-in-out infinite;
}

@keyframes acc-soon-pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}

/* Der Shop faerbt jedes a weiss — hier gewinnt die Kachel. */
.acc-shell a.acc-work:link,
.acc-shell a.acc-work:visited { color: inherit; }