/* ══════════════════════════════════════════════════════════════════
   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-bg:       var(--bg,  #080807);
    --acc-surface:  var(--bg2, #111110);
    --acc-surface2: var(--bg3, #1a1917);
    --acc-border:   var(--border, rgba(255, 255, 255, .07));

    --acc-fg:      var(--fg,  #f0ede6);
    --acc-fg2:     var(--fg2, rgba(240, 237, 230, .45));
    --acc-fg3:     var(--fg3, rgba(240, 237, 230, .22));

    --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;
    padding-top:0px;
}

.acc-main .title,
.acc_main h1,
.acc_mein h2{
    padding-bottom: 1rem;
}

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


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

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

/* ── 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-gold);
    border-bottom-color: var(--acc-gold);
}

.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: 0 var(--acc-radius-lg) var(--acc-radius-lg) 0;
        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;
}

.acc-shell .cards_wrapper {     display: flex;
    padding: 0;
    gap: 1rem;
    flex-direction: column;
}

.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: var(--acc-surface); }
.acc-shell .uo-summary:hover { background: var(--acc-surface2); }
.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;
    }
}


/* ══════════════════════════════════════════════════════════════════
   DEINE SAMMLUNG

   Zaehlt, bewertet nicht. Hier stand frueher eine Medaille mit Platz
   und "noch X bis Y". Bei 1830 Werken und 1314 Kunden liegt der
   Schnitt bei 1,4 — die Mehrheit haette gelesen, dass tausend andere
   weiter sind. Das ist keine Auszeichnung, sondern eine Einordnung.

   Deshalb kein Kreis, kein Balken, keine Zahl, die vergleicht: eine
   ruhige Zeile mit dem, was da ist, und ein Satz, der fuer alle
   derselbe ist.
   ══════════════════════════════════════════════════════════════════ */

.acc-thanks {
    margin: 0 0 36px;
    padding: 20px 24px;
    border-left: 2px solid var(--acc-gold);
    border-radius: 0 var(--acc-radius-lg) var(--acc-radius-lg) 0;
    background:
        linear-gradient(to right, var(--acc-gold-glow) 0%, transparent 60%),
        var(--acc-surface);
}

.acc-thanks__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .66rem;
    color: var(--acc-fg3);
    margin-bottom: 8px;
}

.acc-thanks__count {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--acc-gold);
}

/* Das Jahr traegt weniger Gewicht als die Werke selbst. */
.acc-thanks__since {
    font-size: .62em;
    letter-spacing: .04em;
    color: var(--acc-fg2);
}

.acc-thanks__note {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--acc-fg);
}

.acc-thanks__by {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--acc-fg3);
    margin-left: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   EMPFEHLUNGEN — eine Wand je eigenem Werk

   Links das eigene Bild, daneben die Nummer, darunter die aehnlichen.
   Der Bezug ist damit sichtbar, nicht nur behauptet: man sieht, WOVON
   ausgegangen wurde.

   Der SEO-Titel steht bewusst nicht dort — er ist fuer Suchmaschinen
   geschrieben, laeuft ueber drei Zeilen und sagt dem Besitzer nichts
   Neues. Die Nummer erkennt er wieder.
   ══════════════════════════════════════════════════════════════════ */

.acc-reco { margin-bottom: 54px; }

/* ── Platzhalter, bis die Wand nachgeladen ist ──
   min-height haelt den Platz frei: ohne sie springt das Layout, waehrend
   jemand scrollt — und man verliert die Stelle, die man gerade ansah.

   Der Wert ist ein Schaetzwert fuer Kopf plus eine Kachelreihe. Genauer
   geht nicht, weil die Hoehe von den Bildformaten abhaengt.

   account_reco.js entfernt beim Einsetzen des Inhalts BEIDE Klassen —
   an dieser haengt die Optik, an is-pending nur der Zustand. */
.acc-reco--pending {
    min-height: 340px;
    border-radius: var(--acc-radius-lg);
    background:
        linear-gradient(100deg,
            transparent 20%,
            rgba(255, 255, 255, .022) 42%,
            transparent 64%),
        var(--acc-surface);
    background-size: 300% 100%;
    animation: acc-reco-warten 1.6s ease-in-out infinite;
}

@keyframes acc-reco-warten {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .acc-reco--pending { animation: none; }
}

@media (max-width: 560px) {
    .acc-reco--pending { min-height: 260px; }
}

.acc-reco__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--acc-border);
}

/* Das eigene Werk. Groesser als urspruenglich, weil es den Bezug
   traegt — man muss erkennen koennen, WOVON die Empfehlungen ausgehen.

   object-fit: contain statt cover: das ganze Bild ist zu sehen, nichts
   wird beschnitten. Bei einem Werk, das dem Kunden gehoert, waere ein
   Ausschnitt die falsche Geste. */
.acc-reco__seed {
    display: block;
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
    border-radius: var(--acc-radius);
    overflow: hidden;
}

.acc-reco__seed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .5s var(--acc-ease);
}

.acc-reco__seed:hover img { transform: scale(1.06); }

.acc-reco__label { min-width: 0; }

/* Zur vollstaendigen Liste im Shop — {nav_id 3}?similar=<nr>.
   Rechts im Kopf, zurueckhaltend: die Empfehlungen darunter sind der
   Inhalt, das hier ist der Ausgang. */
.acc-reco__all {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--acc-border);
    border-radius: 100px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .66rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s var(--acc-ease), color .18s var(--acc-ease);
}

.acc-shell a.acc-reco__all:link,
.acc-shell a.acc-reco__all:visited { color: var(--acc-fg2); }

.acc-shell a.acc-reco__all:hover {
    color: var(--acc-gold);
    border-color: var(--acc-gold-border);
}

@media (max-width: 560px) {
    /* Auf dem Handy unter den Kopf statt daneben — sonst quetscht er
       die Ueberschrift auf zwei Zeichen. */
    .acc-reco__head { flex-wrap: wrap; }
    .acc-reco__all  { margin-left: 0; width: 100%; text-align: center; }
}

.acc-reco__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .62rem;
    color: var(--acc-fg3);
    margin-bottom: 4px;
}

.acc-reco__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--acc-gold);
}

@media (max-width: 560px) {
    /* Auf dem Handy kleiner, sonst nimmt der Kopf die halbe Hoehe des
       Bildschirms — die Empfehlungen darunter sind der Inhalt. */
    .acc-reco__seed { width: 96px; height: 96px; }
}


/* ══════════════════════════════════════════════════════════════════
   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; }