/* Modules.Horses — presentation styles.
   Host theme overrides on top via .cl-* utility tokens (Cavallearn-Gold etc.).
   Kept neutral so CDL/Worklino could embed without rewrite. */

:root {
    --hrs-bg-card: rgba(255, 255, 255, 0.04);
    --hrs-border: rgba(255, 255, 255, 0.1);
    --hrs-text-muted: rgba(255, 255, 255, 0.55);
    --hrs-accent: var(--cl-gold, #d4af37);
    --hrs-danger: #d04848;
    --hrs-success: #4caf50;
    --hrs-warning: #f0a020;
    --hrs-radius: 12px;
}

.hrs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.hrs-section { margin-bottom: 2rem; }
.hrs-section__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}
.hrs-section__toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    padding: .5rem 0;
}

.hrs-list { display: flex; flex-direction: column; gap: .75rem; }

/* ─── Gallery grid (HorseList) ───────────────────────────────────────────── */
.hrs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 720px) {
    .hrs-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); }
}
.hrs-gallery-grid--single {
    grid-template-columns: minmax(280px, 360px) !important;
    justify-content: center;
}

/* ─── HorseGalleryCard (large card, photo + info layout) ─────────────────── */
.hrs-gcard {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hrs-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-height: 300px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-theme="light"] .hrs-gcard { background: rgba(0,0,0,0.03); }
.hrs-gcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    border-color: var(--hrs-accent);
}
[data-theme="light"] .hrs-gcard:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.hrs-gcard--dimmed { opacity: .55; }

.hrs-gcard__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
[data-theme="light"] .hrs-gcard__photo { background: rgba(0,0,0,0.05); }
.hrs-gcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Cinematic — Foto scaliert minimal nur beim Card-Hover. Karte selbst hebt sich getrennt. */
    transition: transform .45s ease;
}
.hrs-gcard:hover .hrs-gcard__photo img { transform: scale(1.02); }
.hrs-gcard__photo-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--hrs-text-muted);
    gap: .5rem;
}
.hrs-gcard__photo-empty i { font-size: 2.5rem; }
.hrs-gcard__photo-hint { font-size: .8rem; }

.hrs-gcard__status {
    position: absolute;
    top: .75rem;
    right: .75rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    background: rgba(0,0,0,0.6);
    color: white;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
[data-theme="light"] .hrs-gcard__status {
    background: rgba(255,255,255,0.85);
    color: #333;
}
.hrs-gcard__status--sold { background: rgba(240,160,32,0.4); color: white; }
.hrs-gcard__status--retired { background: rgba(120,120,120,0.5); color: white; }
.hrs-gcard__status--deceased { background: rgba(60,60,60,0.6); color: rgba(255,255,255,0.75); }
[data-theme="light"] .hrs-gcard__status--sold { background: rgba(240,160,32,0.85); color: #4a3010; }
[data-theme="light"] .hrs-gcard__status--retired { background: rgba(140,140,140,0.85); color: #333; }
[data-theme="light"] .hrs-gcard__status--deceased { background: rgba(80,80,80,0.85); color: #f0f0f0; }
.hrs-gcard__status-cross { font-size: 1em; opacity: .9; }

.hrs-gcard__info {
    padding: .9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}
.hrs-gcard__name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}
.hrs-gcard__disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}
.hrs-gcard__more {
    font-size: .75rem;
    color: var(--hrs-text-muted);
    padding: .15rem .45rem;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}
[data-theme="light"] .hrs-gcard__more { background: rgba(0,0,0,0.05); }
.hrs-gcard__meta {
    color: var(--hrs-text-muted);
    font-size: .85rem;
    margin-top: auto;
}
.hrs-gcard__meta-sep { margin: 0 .35rem; opacity: .55; }

/* ─── Empty-state Hero CTA ───────────────────────────────────────────────── */
.hrs-empty-hero {
    text-align: center;
    padding: 3.5rem 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--hrs-border);
    border-radius: 20px;
    max-width: 560px;
    margin: 2rem auto;
}
[data-theme="light"] .hrs-empty-hero { background: rgba(0,0,0,0.02); }
.hrs-empty-hero__icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(212,175,55,0.12);
    color: var(--hrs-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}
[data-theme="light"] .hrs-empty-hero__icon { background: rgba(212,175,55,0.18); }
.hrs-empty-hero__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}
.hrs-empty-hero__text {
    color: var(--hrs-text-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.hrs-empty-hero__cta {
    font-size: 1rem;
    padding: .65rem 1.5rem;
}

.hrs-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--hrs-bg-card);
    border: 1px solid var(--hrs-border);
    border-radius: var(--hrs-radius);
    text-decoration: none;
    color: inherit;
    transition: transform .15s, border-color .15s;
}
.hrs-card:hover {
    transform: translateY(-1px);
    border-color: var(--hrs-accent);
}
.hrs-card--dimmed { opacity: .55; }

.hrs-card__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hrs-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hrs-card__avatar i { font-size: 1.4rem; color: var(--hrs-text-muted); }

.hrs-card__body { flex: 1; min-width: 0; }
.hrs-card__name { font-weight: 600; }
.hrs-card__meta { color: var(--hrs-text-muted); font-size: .82rem; }

.hrs-status {
    font-size: .75rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}
.hrs-status--active { background: rgba(76,175,80,0.18); color: var(--hrs-success); }
.hrs-status--sold { background: rgba(240,160,32,0.15); color: var(--hrs-warning); }
.hrs-status--retired { background: rgba(255,255,255,0.08); }
.hrs-status--deceased { background: rgba(208,72,72,0.15); color: var(--hrs-danger); }

.hrs-empty, .hrs-skeleton {
    text-align: center;
    padding: 2rem;
    color: var(--hrs-text-muted);
    background: var(--hrs-bg-card);
    border-radius: var(--hrs-radius);
}
.hrs-empty i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* Tabs */
.hrs-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--hrs-border);
    margin-bottom: .5rem;
    overflow-x: auto;
}
.hrs-tab {
    background: none;
    border: none;
    color: var(--hrs-text-muted);
    padding: .75rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.hrs-tab--active {
    color: inherit;
    border-bottom-color: var(--hrs-accent);
}

/* Forms */
.hrs-form { display: flex; flex-direction: column; gap: 1rem; }
.hrs-form__row { display: flex; flex-direction: column; gap: .25rem; }
.hrs-form__row label { font-size: .85rem; color: var(--hrs-text-muted); }
.hrs-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.hrs-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hrs-border);
    border-radius: 8px;
    padding: .55rem .75rem;
    color: inherit;
    font: inherit;
}
.hrs-input:focus { outline: none; border-color: var(--hrs-accent); }
.hrs-input--compact { max-width: 320px; }
.hrs-form__row--narrow { max-width: 480px; }
.hrs-hint { color: var(--hrs-text-muted); font-size: .75rem; }
.hrs-form__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

.hrs-info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1rem;
    margin: 0;
}
.hrs-info-grid dt { color: var(--hrs-text-muted); }
.hrs-info-grid dd { margin: 0; }

/* Buttons */
.hrs-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--hrs-border);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: background .15s, border-color .15s;
}
.hrs-btn:hover { background: rgba(255,255,255,0.05); }
.hrs-btn:disabled { opacity: .5; cursor: not-allowed; }
.hrs-btn--primary {
    background: var(--hrs-accent);
    color: #000;
    border-color: var(--hrs-accent);
}
.hrs-btn--primary:hover { filter: brightness(1.1); }
.hrs-btn--ghost { background: rgba(255,255,255,0.04); }
.hrs-btn--ghost-sm {
    padding: .2rem .5rem;
    font-size: .8rem;
    background: rgba(255,255,255,0.04);
}

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

.hrs-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin: .5rem 0;
}
.hrs-alert--error {
    background: rgba(208,72,72,0.1);
    border: 1px solid rgba(208,72,72,0.3);
    color: var(--hrs-danger);
}

/* Status controls */
.hrs-status-controls { margin-top: 1.5rem; }
.hrs-status-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* Pills */
.hrs-pill {
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    margin-left: .35rem;
}
.hrs-pill--primary { background: rgba(212,175,55,0.18); color: var(--hrs-accent); }
.hrs-pill--info { background: rgba(64,144,224,0.18); color: #6db1ff; }
.hrs-pill--success { background: rgba(76,175,80,0.18); color: var(--hrs-success); }
.hrs-pill--muted { background: rgba(255,255,255,0.08); color: var(--hrs-text-muted); }

/* Access manager */
.hrs-access__title { margin: 0 0 1rem; font-size: 1rem; }
.hrs-access__grant { margin-bottom: 1.5rem; }
.hrs-access__hint { color: var(--hrs-text-muted); font-size: .8rem; margin-top: .25rem; }
.hrs-access__hint--warn { color: var(--hrs-warning); }
.hrs-access__results {
    list-style: none;
    padding: 0;
    margin: .25rem 0;
    border: 1px solid var(--hrs-border);
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
}
.hrs-access__results li {
    padding: .5rem .75rem;
    cursor: pointer;
}
.hrs-access__results li:hover { background: rgba(255,255,255,0.05); }
.hrs-access__form {
    margin-top: .5rem;
    padding: .75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hrs-access__form-row { display: flex; gap: .5rem; align-items: center; }
.hrs-access__form-row .hrs-input { flex: 1; }
.hrs-access__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.hrs-access__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.hrs-access__item--inactive { opacity: .6; }

/* Goals + Relations editors */
.hrs-goals, .hrs-relations { display: flex; flex-direction: column; gap: .75rem; }
.hrs-goals__header, .hrs-relations__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hrs-goals__header h3, .hrs-relations__header h3 { margin: 0; font-size: 1rem; }
.hrs-goal-editor, .hrs-relation-editor {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.hrs-goal-editor__row, .hrs-relation-editor__row { display: flex; gap: .5rem; }
.hrs-goal-editor__row .hrs-input,
.hrs-relation-editor__row .hrs-input { flex: 1; }
.hrs-goal-editor__actions, .hrs-relation-editor__actions {
    display: flex; gap: .5rem; justify-content: flex-end;
}
.hrs-goal-list, .hrs-relation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hrs-goal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid var(--hrs-border);
}
.hrs-goal--success { border-left-color: var(--hrs-success); }
.hrs-goal--primary { border-left-color: var(--hrs-accent); }
.hrs-goal--muted { opacity: .6; }
.hrs-goal__actions { display: flex; gap: .25rem; }
.hrs-relation {
    padding: .5rem .75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hrs-relation > .hrs-btn--ghost-sm { margin-left: auto; }

/* Uploader + Gallery */
.hrs-uploader {
    border: 2px dashed var(--hrs-border);
    border-radius: var(--hrs-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: border-color .15s, background .15s;
}
.hrs-uploader--drag { border-color: var(--hrs-accent); background: rgba(212,175,55,0.05); }
.hrs-uploader__file-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}
.hrs-uploader__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    color: var(--hrs-text-muted);
}
.hrs-uploader__label i { font-size: 2rem; }
.hrs-uploader__pending {
    list-style: none;
    padding: 0;
    margin: .75rem 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
}
.hrs-uploader__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

.hrs-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}
.hrs-gallery__item {
    position: relative;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    overflow: hidden;
}
.hrs-gallery__item img, .hrs-gallery__item video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hrs-gallery__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: .35rem .5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    font-size: .75rem;
}
.hrs-gallery__delete {
    position: absolute;
    top: .25rem; right: .25rem;
    background: rgba(0,0,0,0.6);
    border: none;
    color: white;
    padding: .25rem .4rem;
    border-radius: 6px;
    cursor: pointer;
}
.hrs-gallery__delete:hover { background: var(--hrs-danger); }
.hrs-gallery__doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color: inherit;
    gap: .5rem;
}
.hrs-gallery__doc i { font-size: 2rem; }

/* ─── Hero (Übersichts-Tab) ──────────────────────────────────────────────── */
.hrs-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 480px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    margin-bottom: 1rem;
}
[data-theme="light"] .hrs-hero {
    background: rgba(0,0,0,0.04);
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
.hrs-hero--empty {
    border: 2px dashed var(--hrs-border);
    box-shadow: none;
}
.hrs-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hrs-hero__upload {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem;
    text-align: center;
}
.hrs-hero__upload-icon {
    font-size: 3rem;
    color: var(--hrs-text-muted);
}
.hrs-hero__upload-text {
    font-size: 1.05rem;
    color: var(--hrs-text-muted);
    margin-bottom: .5rem;
}
.hrs-hero__upload .hrs-uploader {
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
}
.hrs-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hrs-text-muted);
    font-size: 4rem;
}
.hrs-hero__status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    background: rgba(0,0,0,0.55);
    color: white;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
[data-theme="light"] .hrs-hero__status {
    background: rgba(255,255,255,0.85);
    color: #333;
}
.hrs-hero__status--active { background: rgba(76,175,80,0.35); }
.hrs-hero__status--sold { background: rgba(240,160,32,0.35); }
.hrs-hero__status--retired { background: rgba(140,140,140,0.45); }
.hrs-hero__status--deceased {
    background: rgba(60,60,60,0.55);
    color: rgba(255,255,255,0.75);
}
.hrs-hero__status-cross {
    font-size: 1em;
    opacity: .9;
}

.hrs-hero-caption {
    margin-bottom: 1.5rem;
}
.hrs-hero-caption__name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    line-height: 1.15;
}
.hrs-hero-caption__birth {
    color: var(--hrs-text-muted);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ─── Overview-Tab sections ──────────────────────────────────────────────── */
.hrs-overview { display: flex; flex-direction: column; gap: 1.5rem; }
.hrs-overview__description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    white-space: pre-wrap;
}
[data-theme="light"] .hrs-overview__description { color: rgba(0,0,0,0.78); }
.hrs-meta-chips {
    color: var(--hrs-text-muted);
    font-size: .9rem;
    line-height: 1.6;
}
.hrs-meta-chips__sep {
    margin: 0 .5rem;
    opacity: .55;
}
.hrs-overview-section { }
.hrs-overview-section__title {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hrs-text-muted);
    margin: 0 0 .5rem;
    font-weight: 600;
}
.hrs-overview-section__link {
    margin-left: .5rem;
    font-size: .8rem;
    color: var(--hrs-accent);
    text-decoration: none;
}
.hrs-overview-section__link:hover { text-decoration: underline; }
.hrs-goals-preview { display: flex; flex-direction: column; gap: .35rem; }
.hrs-goal-preview {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
[data-theme="light"] .hrs-goal-preview { background: rgba(0,0,0,0.03); }
.hrs-access-preview {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.hrs-access-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
}
[data-theme="light"] .hrs-access-avatar { background: rgba(0,0,0,0.08); }

/* ─── Discipline pills ─────────────────────────────────────────────────────
   Each discipline carries its own --pill-bg / --pill-fg / --pill-border
   custom properties. Dark theme defaults below; [data-theme="light"] overrides
   restore readability on bright backgrounds.
*/
.hrs-disc-editor { display: flex; flex-direction: column; gap: .75rem; }
.hrs-disc-editor__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hrs-disc-editor__header h3 { margin: 0; font-size: 1rem; }
.hrs-disc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.hrs-disc-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.2;
    background: var(--pill-bg, rgba(255,255,255,0.1));
    color: var(--pill-fg, currentColor);
    border: 1px solid var(--pill-border, transparent);
}
.hrs-disc-pill--primary {
    box-shadow: 0 0 0 2px var(--pill-fg, var(--hrs-accent));
    font-weight: 600;
}
.hrs-disc-pill__star { font-size: .7em; }
.hrs-disc-pill__sep { opacity: .5; }
.hrs-disc-pill__level { font-weight: 500; }
.hrs-disc-pill__remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 .15rem;
    margin-left: .2rem;
    opacity: .6;
    font-size: 1em;
}
.hrs-disc-pill__remove:hover { opacity: 1; }
.hrs-disc-make-primary {
    padding: .2rem .4rem !important;
}

/* Dark-theme palette (default — matches data-theme="dark") */
.hrs-disc-pill--dressage     { --pill-bg: rgba(214,180,128,0.18); --pill-fg: #e6c896; }
.hrs-disc-pill--showjumping  { --pill-bg: rgba(220,60,60,0.22);   --pill-fg: #ee8a8c; }
.hrs-disc-pill--eventing     { --pill-bg: rgba(76,175,80,0.20);   --pill-fg: #8fd793; }
.hrs-disc-pill--western      { --pill-bg: rgba(150,100,60,0.25);  --pill-fg: #d6a878; }
.hrs-disc-pill--working-equitation { --pill-bg: rgba(140,150,80,0.22); --pill-fg: #c5d486; }
.hrs-disc-pill--gaited       { --pill-bg: rgba(240,200,80,0.18);  --pill-fg: #f5d77a; }
.hrs-disc-pill--driving      { --pill-bg: rgba(160,160,170,0.18); --pill-fg: #c0c0c8; }
.hrs-disc-pill--vaulting     { --pill-bg: rgba(220,80,160,0.20);  --pill-fg: #ec9bc7; }
.hrs-disc-pill--endurance    { --pill-bg: rgba(64,180,180,0.22);  --pill-fg: #82dcdc; }
.hrs-disc-pill--reining      { --pill-bg: rgba(140,40,60,0.25);   --pill-fg: #e183a0; }
.hrs-disc-pill--other        { --pill-bg: rgba(255,255,255,0.10); --pill-fg: #c0c0c0; }

/* Light-theme palette — applied when <html data-theme="light">.
   Lighter, less saturated backgrounds + darker, higher-contrast text. */
[data-theme="light"] .hrs-disc-pill--dressage     { --pill-bg: rgba(180,140,80,0.14);  --pill-fg: #7a5829; }
[data-theme="light"] .hrs-disc-pill--showjumping  { --pill-bg: rgba(200,40,40,0.10);   --pill-fg: #a82828; }
[data-theme="light"] .hrs-disc-pill--eventing     { --pill-bg: rgba(58,128,62,0.12);   --pill-fg: #2d6a30; }
[data-theme="light"] .hrs-disc-pill--western      { --pill-bg: rgba(120,75,40,0.12);   --pill-fg: #6b4520; }
[data-theme="light"] .hrs-disc-pill--working-equitation { --pill-bg: rgba(110,120,60,0.12); --pill-fg: #525a26; }
[data-theme="light"] .hrs-disc-pill--gaited       { --pill-bg: rgba(180,140,40,0.14);  --pill-fg: #806020; }
[data-theme="light"] .hrs-disc-pill--driving      { --pill-bg: rgba(100,100,110,0.10); --pill-fg: #4a4a55; }
[data-theme="light"] .hrs-disc-pill--vaulting     { --pill-bg: rgba(180,50,130,0.10);  --pill-fg: #983364; }
[data-theme="light"] .hrs-disc-pill--endurance    { --pill-bg: rgba(40,140,140,0.10);  --pill-fg: #1d6c6c; }
[data-theme="light"] .hrs-disc-pill--reining      { --pill-bg: rgba(120,30,50,0.12);   --pill-fg: #8c2238; }
[data-theme="light"] .hrs-disc-pill--other        { --pill-bg: rgba(0,0,0,0.06);       --pill-fg: #555555; }

.hrs-disc-add {
    padding: .75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
[data-theme="light"] .hrs-disc-add { background: rgba(0,0,0,0.03); }
.hrs-disc-add__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.hrs-disc-add__primary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
}
.hrs-disc-add__actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Picker */
.hrs-picker { display: flex; flex-direction: column; gap: .25rem; }
.hrs-picker__label { font-size: .85rem; color: var(--hrs-text-muted); }
.hrs-picker__select {
    padding: .55rem .75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hrs-border);
    border-radius: 8px;
    color: inherit;
    font: inherit;
}
.hrs-picker__hint { font-size: .75rem; color: var(--hrs-text-muted); }
.hrs-picker__hint--warn { color: var(--hrs-warning); }

/* ─── Bau 35b: Titelbild-Abzeichen, Werkzeugzeile, Fokuspunkt-Dialog ────── */
.hrs-gallery__item--primary { outline: 2px solid var(--hrs-accent); outline-offset: 2px; }
.hrs-gallery__badge {
    position: absolute;
    top: .25rem; left: .25rem;
    background: rgba(0,0,0,0.6);
    color: var(--hrs-accent);
    padding: .2rem .35rem;
    border-radius: 6px;
    font-size: .75rem;
}
.hrs-gallery__tools { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.hrs-gallery__tool-row {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.hrs-gallery__tool-name { flex: 1; min-width: 8rem; font-size: .85rem; }
.hrs-btn--sm { padding: .3rem .55rem; font-size: .8rem; }

.hrs-focus-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.hrs-focus-dialog {
    background: var(--hrs-bg-card);
    border-radius: var(--hrs-radius);
    padding: 1.25rem;
    width: 100%;
    max-width: 560px;
}
.hrs-focus-dialog__title { margin: 0 0 .35rem 0; font-size: 1.05rem; }
.hrs-focus-dialog__hint { margin: 0 0 .85rem 0; font-size: .85rem; color: var(--hrs-text-muted); }
.hrs-focus-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Zielflaeche: ganzes Bild, NICHT beschnitten — sonst waehlt man einen Punkt,
   den man gar nicht sieht. */
.hrs-focus-pick { position: relative; cursor: crosshair; line-height: 0; }
.hrs-focus-pick img { width: 100%; height: auto; max-height: 45vh; object-fit: contain; border-radius: 8px; }
.hrs-focus-pick__marker {
    position: absolute;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.55);
    pointer-events: none;
}

.hrs-focus-previews {
    display: flex; gap: .75rem; margin-top: .9rem; align-items: flex-end;
    flex-wrap: wrap;
}
.hrs-focus-preview { margin: 0; }
.hrs-focus-preview img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.hrs-focus-preview figcaption {
    font-size: .72rem; color: var(--hrs-text-muted); text-align: center; margin-top: .25rem;
}
.hrs-focus-preview--hero   { width: 132px; }
.hrs-focus-preview--hero img   { aspect-ratio: 3 / 2; }
.hrs-focus-preview--card   { width: 108px; }
.hrs-focus-preview--card img   { aspect-ratio: 4 / 3; }
.hrs-focus-preview--avatar { width: 72px; }
.hrs-focus-preview--avatar img { aspect-ratio: 1 / 1; border-radius: 50%; }

/* ─── Bau 35b: drei Ansichten statt acht Tabs ───────────────────────────── */
.hrs-views {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    border-bottom: 1px solid var(--hrs-border);
    margin-bottom: .75rem;
}
.hrs-view-tab {
    background: none;
    border: none;
    color: var(--hrs-text-muted);
    padding: .7rem .35rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hrs-view-tab[aria-selected="true"] {
    color: inherit;
    border-bottom-color: var(--hrs-accent);
    font-weight: 600;
}
.hrs-view-tab i { margin-right: .35rem; }
/* Ab 390 px passen drei Beschriftungen nebeneinander; darunter bleibt das
   Symbol und die Beschriftung verschwindet, statt zu scrollen. */
@media (max-width: 359px) {
    .hrs-view-tab span { display: none; }
    .hrs-view-tab i { margin-right: 0; }
}

/* ─── Bau 35c: Zeitleiste am Pferd ──────────────────────────────────────── */
.hrs-verlauf__kopf {
    display: flex; gap: .5rem; align-items: flex-start;
    margin-bottom: .85rem; flex-wrap: wrap;
}
.hrs-verlauf__filter {
    display: flex; gap: .35rem; flex: 1; min-width: 0;
    overflow-x: auto; padding-bottom: .2rem;
    scrollbar-width: none;
}
.hrs-verlauf__filter::-webkit-scrollbar { display: none; }
.hrs-verlauf__plus { flex-shrink: 0; }

.hrs-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--hrs-border);
    color: var(--hrs-text-muted);
    border-radius: 999px;
    padding: .32rem .7rem;
    font-size: .82rem;
    white-space: nowrap;
    cursor: pointer;
}
.hrs-chip--on {
    background: var(--hrs-accent);
    border-color: var(--hrs-accent);
    color: #1a1a1a;
    font-weight: 600;
}

.hrs-timeline { list-style: none; margin: 0; padding: 0; }
.hrs-timeline__item {
    display: flex; gap: .7rem;
    position: relative;
    padding-bottom: 1rem;
}
/* Die durchgehende Linie: als Pseudo-Element am Marker, damit sie beim letzten
   Punkt von selbst endet und keine Sonderregel braucht. */
.hrs-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px; top: 34px; bottom: 0;
    width: 2px;
    background: var(--hrs-border);
}
.hrs-timeline__marker {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--hrs-border);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.hrs-timeline__body {
    flex: 1; min-width: 0;
    position: relative;
    background: var(--hrs-bg-card);
    border-radius: var(--hrs-radius);
    padding: .6rem .75rem;
}
.hrs-timeline__zeile {
    display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
    font-size: .78rem; color: var(--hrs-text-muted);
}
.hrs-timeline__datum { font-variant-numeric: tabular-nums; }
.hrs-timeline__art::before { content: "· "; }
.hrs-timeline__titel { font-weight: 600; margin-top: .15rem; }
.hrs-timeline__text { font-size: .87rem; margin-top: .2rem; white-space: pre-wrap; }
.hrs-timeline__naechster {
    margin-top: .4rem; font-size: .78rem; color: var(--hrs-text-muted);
}
.hrs-timeline__link {
    display: inline-block; margin-top: .4rem;
    font-size: .82rem; color: var(--hrs-accent); text-decoration: none;
}
.hrs-timeline__bilder {
    display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap;
}
.hrs-timeline__bilder img {
    width: 84px; height: 63px;           /* 4:3, wie die Galerie */
    object-fit: cover; border-radius: 6px; display: block;
}
.hrs-timeline__loeschen {
    position: absolute; top: .35rem; right: .35rem;
    background: none; border: none; cursor: pointer;
    color: var(--hrs-text-muted); font-size: .8rem;
    padding: .2rem .3rem; border-radius: 6px;
}
.hrs-timeline__loeschen:hover { color: var(--hrs-danger); background: rgba(255,255,255,0.06); }

/* ─── Bau 35c: Eintragsformular, mobil zuerst ───────────────────────────── */
.hrs-entry-form { display: flex; flex-direction: column; gap: .85rem; }
.hrs-entry-form__label { font-size: .85rem; color: var(--hrs-text-muted); }
/* Bau 35j — SO VIELE SPALTEN WIE TYPEN, hoechstens vier. Zwei Kacheln in
   einem Raster fuer drei hinterlassen rechts eine Luecke, und die liest sich
   wie ein Fehler — dort fehlt nichts, es GIBT nur zwei Arten. Die Zahl kommt
   als Custom-Property aus dem Markup. */
.hrs-entry-types {
    display: grid;
    grid-template-columns: repeat(var(--hrs-typ-spalten, 3), minmax(0, 1fr));
    gap: .4rem;
}
/* Bau 35j — LEISER. Die Typwahl ist eine Vorauswahl, nicht der Hauptteil des
   Formulars: kein Rahmen mehr im Ruhezustand, flacher, kleinere Symbole.
   Der GEWAEHLTE Typ bleibt klar erkennbar — Sparsamkeit an dieser Stelle
   waere die falsche. 54 px bleiben ueber der Tippgrenze von 44 px. */
.hrs-entry-type {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .45rem .3rem;
    background: var(--hrs-flaeche-leise);
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit; cursor: pointer;
    font-size: .76rem;
    min-height: 54px;                        /* Tippziel, nicht Mausziel */
}
.hrs-entry-type i { font-size: 1rem; }
.hrs-entry-type--on {
    border-color: var(--hrs-accent);
    background: rgba(198,161,91,0.14);
    font-weight: 600;
}
.hrs-entry-form__switch {
    display: flex; align-items: center; gap: .5rem;
    font-size: .87rem; cursor: pointer;
}

/* ─── Bau 35d: die Pferd-Ansicht als Seite EINES Pferdes ────────────────── */
.hrs-pferd { display: flex; flex-direction: column; gap: 1rem; }

/* Randlos: das Bild geht bis an die Kanten des Inhaltsbereichs. */
.hrs-portrait {
    position: relative;
    margin: -1rem -1rem 0 -1rem;
    aspect-ratio: 4 / 3;
    max-height: 58vh;
    overflow: hidden;
    background: transparent;
}
@media (min-width: 720px) {
    .hrs-portrait { margin: 0; border-radius: var(--hrs-radius); aspect-ratio: 16 / 9; }
}
.hrs-portrait--leer {
    aspect-ratio: 3 / 2;
    border: 2px dashed var(--hrs-border);
    background: var(--hrs-flaeche-leise);
}
.hrs-portrait__flaeche {
    display: block; width: 100%; height: 100%;
    padding: 0; border: none; background: none; cursor: pointer;
}
.hrs-portrait__flaeche:disabled { cursor: default; }
.hrs-portrait__flaeche { border-radius: inherit; }
.hrs-portrait__flaeche img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: inherit;

    /* Bau 35i/35j — WEICHE UNTERKANTE statt Rechteckrand.

       35j HAT DREI DINGE KORRIGIERT:
       1. Die Ausblendung war ein PROZENTSATZ. Bei 292 px Bildhoehe (Handy)
          sind 10 % gleich 29 px, bei den 420 px des Desktops schon 42 px —
          der Text darunter steht aber bei fester Hoehe. Ab etwa 350 px frass
          die Maske die Partnerzeile. Jetzt eine FESTE Ausblendhoehe, und der
          Text hat ueber die Innenabstaende mehr als diese Hoehe Luft.
          Warum fest und nicht relativ: eine weiche Kante ist ein optischer
          Saum, kein Anteil am Bild — sie soll bei jeder Bildhoehe gleich
          aussehen.
       2. mask-repeat und mask-size stehen jetzt ausdruecklich da. Ohne sie
          kachelt der Verlauf, und das erklaert die fehlende Ecke rechts
          unten — nicht der border-radius.
       3. Die Rundung wird geerbt, damit Bild und Behaelter dieselbe Kante
          schneiden. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.hrs-portrait__stift {
    position: absolute; top: .6rem; right: .6rem;
    background: rgba(0,0,0,0.45); color: #fff;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
}
.hrs-portrait__upload, .hrs-portrait__leer-symbol {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; text-align: center; padding: 1rem;
    color: var(--hrs-text-muted);
}
.hrs-portrait__upload > i, .hrs-portrait__leer-symbol > i { font-size: 2rem; }

/* Name IM Bild: Verlauf nach unten, damit heller Himmel die Schrift nicht frisst. */
.hrs-portrait__verlauf {
    position: absolute; left: 0; right: 0; bottom: 0;
    /* Bau 35j — 3.2rem = 51 px Innenabstand unten gegen 40 px Ausblendung:
       elf Pixel Luft. Beides angefasst, nicht nur eines — eine feste
       Ausblendung ohne Textabstand kippt beim naechsten Schriftgrad, ein
       Textabstand ohne feste Ausblendung beim naechsten Bildformat. */
    padding: 3rem 1rem 3.2rem 1rem;
    /* Bau 35i — der Verlauf endet DURCHSICHTIG. Liefe er bis zur Unterkante
       dunkel aus, stuende ein schwarzes Band auf der ausgeblendeten Bildkante
       und die weiche Kante waere umsonst. Der Text sitzt im dichten Teil. */
    background: linear-gradient(transparent 0%,
                                var(--hrs-overlay-stark) 62%,
                                var(--hrs-overlay-stark) 88%,
                                transparent 100%);
    pointer-events: none;
}
.hrs-portrait__name {
    margin: 0; color: var(--hrs-auf-bild);
    /* Bau 35i — deutlich groesser und in der Serife. Der Name ist der Anker
       der Seite; vorher stand er fast gleich stark neben der Partnerzeile. */
    font-family: var(--hrs-serif);
    font-size: clamp(2rem, 8.5vw, 3.2rem);
    line-height: 1.05; font-weight: 400;   /* 400, siehe Definition oben */
    /* Groessere Schrift heisst weniger Zeichen je Zeile. Ein langer Name wird
       umgebrochen, nicht am Bildrand abgeschnitten. */
    overflow-wrap: anywhere;
    letter-spacing: .005em;
    text-shadow: 0 2px 10px var(--hrs-overlay-mittel);
}
.hrs-portrait__alter { color: var(--hrs-auf-bild-leise); font-size: .82rem; margin-top: .1rem; }
.hrs-portrait__status {
    position: absolute; top: .6rem; left: .6rem;
    background: rgba(0,0,0,0.5); color: #fff;
    padding: .2rem .55rem; border-radius: 999px; font-size: .75rem;
}

/* Zuletzt passiert — direkt unter dem Bild, der wichtigste Block. */
.hrs-zuletzt {
    display: flex; align-items: center; gap: .55rem;
    overflow-x: auto; scrollbar-width: none;
    padding: .55rem .65rem;
    background: var(--hrs-bg-card);
    border-radius: var(--hrs-radius);
    text-decoration: none; color: inherit;
}
.hrs-zuletzt::-webkit-scrollbar { display: none; }
.hrs-zuletzt--leer {
    justify-content: space-between;
    color: var(--hrs-text-muted); font-size: .88rem;
}
.hrs-zuletzt__punkt {
    display: flex; align-items: center; gap: .4rem;
    flex-shrink: 0; max-width: 62vw;
}
.hrs-zuletzt__punkt img {
    width: 34px; height: 34px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
}
.hrs-zuletzt__symbol {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .85rem; color: var(--hrs-text-muted);
}
.hrs-zuletzt__text {
    font-size: .84rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.hrs-zuletzt__datum { font-size: .76rem; color: var(--hrs-text-muted); flex-shrink: 0; }
.hrs-zuletzt__mehr {
    margin-left: auto; flex-shrink: 0;
    font-size: .8rem; color: var(--hrs-accent); white-space: nowrap;
}

/* Was ansteht — ruhig. Keine Farbe, kein Ausrufezeichen: eine Auskunft. */
.hrs-ansteht {
    display: flex; flex-wrap: wrap; gap: .15rem .9rem;
    font-size: .84rem; color: var(--hrs-text-muted);
    padding: 0 .15rem;
}
.hrs-ansteht__punkt::before { content: "· "; }
.hrs-ansteht__punkt:first-child::before { content: ""; }

.hrs-pferd__beschreibung { margin: 0; font-size: .93rem; line-height: 1.5; }

.hrs-eignung-zeile {
    display: flex; align-items: center; gap: .5rem;
    font-size: .87rem; text-decoration: none; color: inherit;
    padding: .5rem .65rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
.hrs-eignung-zeile__datum { margin-left: auto; color: var(--hrs-text-muted); font-size: .78rem; }

/* Bau 35j — HIER STANDEN .hrs-steckbrief UND .hrs-steckbrief__bearbeiten.
   Die Steckbriefzeile ist in den Hero gewandert und heisst dort
   .hrs-portrait__steckbrief; den Bearbeiten-Anhang gibt es seit 35i nicht mehr
   (der Weg fuehrt ueber "Mehr"). Beide Regeln hatten keinen Nutzer mehr —
   entfernt statt stehengelassen: eine Regel ohne Nutzer sieht beim naechsten
   Lesen aus, als taete sie etwas. */
.hrs-notiz-privat {
    font-size: .84rem; color: var(--hrs-text-muted);
    padding: .5rem .65rem; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    white-space: pre-wrap;
}

/* ─── Bau 35d: Fotos am Eintrag, Titelbild-Auswahl im Dialog ────────────── */
.hrs-entry-bilder__waehlen {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .75rem; border-radius: 10px;
    border: 1px dashed var(--hrs-border);
    font-size: .85rem; cursor: pointer;
}
.hrs-entry-bilder { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.hrs-entry-bild { position: relative; }
.hrs-entry-bild img {
    width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block;
}
.hrs-entry-bild__weg {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    border: none; background: var(--hrs-danger); color: #fff;
    font-size: .7rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.hrs-intervall-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }

.hrs-focus-picker { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hrs-focus-picker__item {
    position: relative; padding: 0; border: 2px solid transparent;
    border-radius: 8px; background: none; cursor: pointer; line-height: 0;
}
.hrs-focus-picker__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.hrs-focus-picker__item--on { border-color: var(--hrs-accent); }
.hrs-focus-picker__star {
    position: absolute; bottom: -2px; right: -2px;
    color: var(--hrs-accent); font-size: .7rem;
    background: rgba(0,0,0,0.6); border-radius: 50%; padding: 1px 3px;
}

/* Ein Bild gross, mehrere als Reihe. */
.hrs-timeline__bilder--eins img { width: 100%; height: auto; max-height: 220px; }

/* ─── Bau 35e: Marken fuer Verdichtung. KEINE festen Farbwerte hier —
   alles ueber Custom Properties, damit ein spaeteres Light-Theme (Q4,
   CoreFramework) nur die Werte tauschen muss. ────────────────────────────── */
:root {
    /* Serife fuer Abschnittsueberschriften. Der staerkste einzelne Hebel
       gegen den Datenblatt-Eindruck.

       13.08.2026 — HIER STANDEN DREI SYSTEMSCHRIFTEN ("Iowan Old Style",
       "Palatino Linotype", Palatino, Georgia). Sie kosteten nichts, aber sie
       waren auch nirgends dieselbe: welche der drei zog, entschied das Geraet
       des Besuchers, und ausliefern durften wir keine davon. Die ROLLE bleibt
       unveraendert — Pferd ist das Persoenliche, alles andere ist Werkzeug —,
       die Familie kommt jetzt aus Cavallearn.Schrift (--cav-schrift-akzent,
       Lora 400, selbst gehostet).

       ZWEI EBENEN, MIT ABSICHT: --hrs-serif ist die Rolle IN DIESEM MODUL,
       --cav-schrift-akzent ist die Schrift. Wer die Schrift tauscht, fasst
       dieses Modul nicht an; wer die Rolle aendert, fasst die RCL nicht an.

       KEINE ProjectReference AUF Cavallearn.Schrift: dieses Modul ist
       markenneutral und soll es bleiben. Bindet es ein Host ein, der die
       Schrift-RCL nicht laedt, traegt der Ausweichwert Georgia — eine Serife
       bleibt es dann immer noch, und genau darum geht es hier.

       DIE SERIFE HAT EINEN SCHNITT: 400. Alle Regeln, die sie benutzen,
       setzen deshalb font-weight: 400.

       Bis zum 13.08.2026 stand an vier davon 500 (.hrs-portrait__name,
       .hrs-abschnitt__titel, .hrs-kachel__zahl, .hrs-verlauf__titel). Das war
       nie wirksam: einen 500er-Schnitt gab es auch mit Georgia, Palatino und
       Iowan Old Style nicht, der Browser hat immer den 400er gezeichnet. Am
       13.08.2026 nachgemessen — "Lora" 400 und "Lora, Georgia, serif" 500
       waren auf das Hundertstel gleich breit.
       Die 500 sagte also etwas zu, was nirgends eingeloest wurde. Jetzt steht
       da, was passiert. Wer echte Abstufungen will, braucht zuerst eine zweite
       Datei — nicht eine zweite Zahl. */
    --hrs-serif: var(--cav-schrift-akzent, Georgia, serif);
    --hrs-overlay-stark: rgba(0, 0, 0, 0.75);
    --hrs-overlay-mittel: rgba(0, 0, 0, 0.45);
    --hrs-auf-bild: #ffffff;
    --hrs-auf-bild-leise: rgba(255, 255, 255, 0.85);
    --hrs-flaeche-leise: rgba(255, 255, 255, 0.03);
}

/* Bau 35i — LUFT STATT RAHMEN. Der Abstand ZWISCHEN zwei Abschnitten muss
   deutlich groesser sein als der INNERHALB eines Abschnitts; vorher war er
   fast gleich (.35rem aussen gegen .5rem innen), und dadurch zerfiel die
   Seite in gleichwertige Streifen statt in Abschnitte. */
.hrs-abschnitt { margin-top: 1.3rem; }
.hrs-abschnitt__titel {
    font-family: var(--hrs-serif);
    font-size: 1.35rem;
    font-weight: 400;   /* 400, siehe Definition oben */
    letter-spacing: .01em;
    margin: 0 0 .6rem 0;
}
/* Bau 35i — DER AKZENT. Gold kam auf der ganzen Seite nicht vor, und genau
   deshalb wirkte sie unfertig: eine dunkle Flaeche ohne einen einzigen
   gesetzten Ton liest sich wie ein Entwurf. Eine kurze Linie unter der
   Ueberschrift, nicht ueber die volle Breite — ein Strich, der die Ueberschrift
   traegt, keine Trennlinie. */
.hrs-abschnitt__titel::after {
    content: "";
    display: block;
    width: 2.2rem; height: 2px;
    margin-top: .35rem;
    background: var(--hrs-accent);
    border-radius: 2px;
}

/* Weiche Trennform statt Kastenkante: ein auslaufender Strich, kein Rahmen. */
.hrs-trenner {
    height: 1px;
    margin: .35rem 0;
    background: linear-gradient(90deg, transparent, var(--hrs-border), transparent);
}

/* Avatar-Paar ueber dem Namen. */
.hrs-paar { display: flex; align-items: center; margin-bottom: .4rem; }
.hrs-paar__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--hrs-auf-bild);
    background: var(--hrs-overlay-mittel);
    display: flex; align-items: center; justify-content: center;
    color: var(--hrs-auf-bild);
    font-size: .85rem;
}
.hrs-paar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hrs-paar__avatar--pferd { margin-left: -10px; }

/* Bau 35i — LEISER als der Name. Beide in der Serife und fast gleich gross
   liessen offen, was die Ueberschrift ist. Die Serife gehoert jetzt dem
   Namen, die Partnerzeile ist eine Bildunterschrift. */
.hrs-portrait__partner {
    color: var(--hrs-auf-bild-leise);
    font-size: .84rem;
    letter-spacing: .01em;
    margin-top: .3rem;
}

/* Karussell: waagrecht wischbar, Nachbarn angeschnitten. Das angeschnittene
   naechste Element sagt "da ist mehr", ohne einen Pfeil zu brauchen. */
.hrs-karussell {
    display: flex; gap: .55rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: .2rem;
}
.hrs-karussell::-webkit-scrollbar { display: none; }
.hrs-karussell > * { scroll-snap-align: start; }
.hrs-karussell .hrs-zuletzt__punkt {
    flex: 0 0 auto;
    width: 68%;                     /* der Nachbar bleibt angeschnitten sichtbar */
    max-width: 260px;
    text-decoration: none; color: inherit;
    background: var(--hrs-flaeche-leise);
    border-radius: var(--hrs-radius);
    padding: .4rem .5rem;
}
@media (min-width: 560px) {
    .hrs-karussell .hrs-zuletzt__punkt { width: 40%; }
}

/* ─── Bau 35e: zwei Leisten ─────────────────────────────────────────────── */
.hrs-leisten {
    display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
    margin-bottom: .8rem;
    background: var(--hrs-flaeche-leise);
    border-radius: 999px;
    padding: .2rem;
}
.hrs-leiste-tab {
    background: none; border: none; cursor: pointer;
    color: var(--hrs-text-muted);
    padding: .45rem .5rem;
    border-radius: 999px;
    font-size: .9rem;
    white-space: nowrap;
}
.hrs-leiste-tab i { margin-right: .35rem; }
.hrs-leiste-tab[aria-selected="true"] {
    background: var(--hrs-bg-card);
    color: inherit;
    font-weight: 600;
}

/* Jahres-Trenner — Anzeige, kein Datenmodell. */
.hrs-jahr {
    list-style: none;
    font-family: var(--hrs-serif);
    font-size: 1.1rem;
    color: var(--hrs-text-muted);
    margin: 1.1rem 0 .5rem 0;
}
.hrs-jahr--timeline { margin-left: 46px; }

/* Versorgung: kompakte Akte. */
.hrs-akte { list-style: none; margin: 0; padding: 0; }
.hrs-akte__zeile {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: var(--hrs-bg-card);
    margin-bottom: .3rem;
    font-size: .87rem;
}
.hrs-akte__datum {
    font-variant-numeric: tabular-nums;
    color: var(--hrs-text-muted);
    flex-shrink: 0;
}
.hrs-akte__symbol { color: var(--hrs-text-muted); flex-shrink: 0; }
.hrs-akte__text { flex: 1; min-width: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.hrs-akte__titel { color: var(--hrs-text-muted); }
.hrs-akte__naechster {
    font-variant-numeric: tabular-nums;
    color: var(--hrs-text-muted);
    flex-shrink: 0;
}
.hrs-akte__naechster::before { content: "→ "; }
.hrs-akte__loeschen {
    background: none; border: none; cursor: pointer;
    color: var(--hrs-text-muted); font-size: .8rem;
    padding: .15rem .25rem; border-radius: 6px; flex-shrink: 0;
}
.hrs-akte__loeschen:hover { color: var(--hrs-danger); }

.hrs-timeline__herz { color: var(--hrs-accent); font-size: .78rem; }

/* ─── Bau 35f: Hub, Pferdewechsel, Bewertung. KEINE festen Farbwerte —
   alles ueber die Marken aus dem 35e-Block. ──────────────────────────────── */
.hrs-zurueck {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--hrs-text-muted); text-decoration: none;
    font-size: .88rem; margin-bottom: .6rem;
}

/* Bau 35i — EINE STATUSZEILE, kein Kachelraster. Keine Flaeche, kein Rahmen,
   nur feine senkrechte Striche. Vier gerahmte Kaesten unmittelbar unter einem
   grossen Bild nehmen ihm das Gewicht — und das Bild soll die Seite tragen. */
.hrs-kacheln {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.hrs-kachel {
    display: flex; flex-direction: column; align-items: center; gap: .05rem;
    padding: .35rem .25rem;
    text-decoration: none; color: inherit;
    min-height: 52px;
}
.hrs-kachel + .hrs-kachel { border-left: 1px solid var(--hrs-border); }
.hrs-kachel__zahl {
    font-family: var(--hrs-serif);
    font-size: 1.6rem; line-height: 1.05; font-weight: 400;   /* 400, siehe Definition oben */
}
.hrs-kachel__label {
    font-size: .68rem; color: var(--hrs-text-muted);
    text-align: center; letter-spacing: .03em;
}
/* Eine Null ist LEISER. Sonst behauptet die Zeile vier gleich wichtige Dinge,
   von denen drei leer sind — genau der Eindruck, den ein neuer Nutzer
   bekommt. Ueber die Deckkraft, nicht ueber eine zweite Farbe. */
.hrs-kachel--null { opacity: .45; }

.hrs-alle {
    display: inline-block; margin-top: .45rem;
    font-size: .82rem; color: var(--hrs-accent); text-decoration: none;
}

.hrs-akte__stufe {
    font-size: .78rem; color: var(--hrs-text-muted); flex-shrink: 0;
}

/* Pferdewechsel: der Name im Hero ist der Ausloeser. */
.hrs-wechsel__ausloeser {
    display: inline-flex; align-items: baseline; gap: .35rem;
    background: none; border: none; padding: 0; cursor: pointer;
    color: inherit; text-align: left;
    /* Bau 35i — DER KNOPF WAR TOT. Er sitzt in .hrs-portrait__verlauf, und der
       traegt pointer-events:none, damit der Verlauf das Tippen auf das Bild
       darunter nicht abfaengt. Das galt aber auch fuer den Namen — seit 35f
       liess sich der Pferdewechsel nicht oeffnen. Hier wird das Tippen wieder
       eingeschaltet, punktgenau fuer diesen Knopf. */
    pointer-events: auto;
    max-width: 100%;
}
.hrs-wechsel__pfeil { color: var(--hrs-auf-bild-leise); font-size: .8rem; }
.hrs-wechsel__hintergrund {
    position: fixed; inset: 0; z-index: 1060;
    background: var(--hrs-overlay-stark);
    display: flex; align-items: flex-end; justify-content: center;
}
.hrs-wechsel__blatt {
    background: var(--hrs-bg-card);
    border-radius: var(--hrs-radius) var(--hrs-radius) 0 0;
    width: 100%; max-width: 520px;
    padding: .6rem;
    max-height: 70vh; overflow-y: auto;
}
@media (min-width: 560px) {
    .hrs-wechsel__hintergrund { align-items: center; }
    .hrs-wechsel__blatt { border-radius: var(--hrs-radius); }
}
.hrs-wechsel__zeile {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem; border-radius: 10px;
    text-decoration: none; color: inherit;
}
.hrs-wechsel__zeile--aktiv { background: var(--hrs-flaeche-leise); }
.hrs-wechsel__zeile--neu { color: var(--hrs-accent); }
.hrs-wechsel__bild {
    width: 40px; height: 40px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    background: var(--hrs-flaeche-leise);
    display: flex; align-items: center; justify-content: center;
    color: var(--hrs-text-muted);
}
.hrs-wechsel__bild img { width: 100%; height: 100%; object-fit: cover; }
.hrs-wechsel__name { flex: 1; min-width: 0; }
.hrs-wechsel__haken { color: var(--hrs-accent); }

/* Bewertung: drei Knoepfe, ein Tipp. */
/* Bau 35h — die Bewertung darf wie eine Bewertung aussehen. Vorher: drei
   gleiche graue Kaesten mit Wort. Jetzt Symbol PLUS Wort, je Stufe eine eigene
   Farbe aus den bestehenden Marken.
   KEIN ROT — auch nicht fuer die unterste Stufe. "geht so" ist ein neutraler
   Tag, kein Fehler; ein Tagebuch, das schlechte Tage anstreicht, wird nicht
   gefuehrt. Die unterste Stufe ist deshalb LEISER, nicht alarmierender. */
.hrs-bewertung { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.hrs-bewertung__stufe {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .55rem .3rem;
    background: var(--hrs-flaeche-leise);
    border: 1px solid var(--hrs-border);
    border-radius: 10px;
    color: var(--hrs-text-muted); cursor: pointer;
    font-size: .82rem; min-height: 60px;
}
.hrs-bewertung__stufe i { font-size: 1.35rem; line-height: 1; }

/* Rang 0 = beste Stufe, Rang 2 = leiseste. Die Farbe haengt am RANG, nicht am
   Wort: der Katalog darf seine Woerter aendern. */
.hrs-bewertung__stufe--r0 i { color: var(--hrs-success); }
.hrs-bewertung__stufe--r1 i { color: var(--hrs-accent); }
.hrs-bewertung__stufe--r2 i { color: var(--hrs-text-muted); }

/* Gewaehlt: gefuellt, kraeftiger Rahmen, volle Textfarbe. Der Unterschied muss
   auch ohne Farbwahrnehmung zu sehen sein — deshalb Rahmen UND Fuellung UND
   Schriftschnitt, nicht nur ein Farbton. */
.hrs-bewertung__stufe--on {
    background: var(--hrs-bg-card);
    border-color: var(--hrs-accent);
    border-width: 2px;
    color: var(--hrs-auf-bild);
    font-weight: 600;
}
.hrs-bewertung__stufe--r0.hrs-bewertung__stufe--on { border-color: var(--hrs-success); }

/* ─── Bau 35g: Desktop. AUSSCHLIESSLICH ueber min-width-Abfragen — die
   Grundregeln bleiben die mobilen, es wird nur nach oben ergaenzt. Wer die
   Grundregel umbaut, um den Desktop zu richten, bricht 390 px, und das faellt
   erst beim naechsten Handy auf. Keine festen Farbwerte. ────────────────── */

/* Maximalbreite fuer den INHALT. Der Hero darf breiter laufen (er ist Bild),
   der Text nicht — 1900 px lange Zeilen liest niemand. */
@media (min-width: 900px) {
    .hrs-pferd,
    .hrs-verlauf,
    .hrs-mehr {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Der Hero belegte auf 1900 px fast den ganzen ersten Bildschirm. Die
       Hoehenbegrenzung schlaegt hier das Seitenverhaeltnis. */
    .hrs-portrait {
        max-height: 420px;
        aspect-ratio: auto;
        height: 420px;
    }

    /* Die vier Kacheln behalten ihre Groesse, statt sich auf Fensterbreite zu
       dehnen. Sie sind Schaltflaechen, keine Spalten. */
    .hrs-kacheln {
        grid-template-columns: repeat(4, minmax(0, 180px));
        justify-content: start;
    }

    /* Bau 35j — HIER STAND EINE REGEL, die die Typkacheln auf dem Desktop in
       ein auto-fill-Raster zwang. Sie ist ersatzlos entfallen: seit 35j
       bestimmt die ANZAHL DER TYPEN die Spaltenzahl, auf jeder Breite. Die
       Regel haette nur noch ausgesehen, als wuerde sie etwas tun. */

    /* Das Formular selbst braucht keine 1100 px. */
    .hrs-entry-form { max-width: 620px; }

    /* Karussell: mehrere Karten nebeneinander statt einer riesigen. */
    .hrs-karussell .hrs-zuletzt__punkt { width: 240px; }

    /* Die Akte-Zeilen laufen sonst als endlose Baender durchs Bild. */
    .hrs-akte__zeile { max-width: 820px; }
}

/* Ab hier lohnt sich mehr Luft, aber nicht mehr Breite. */
@media (min-width: 1400px) {
    .hrs-pferd { gap: 1.4rem; }
    .hrs-abschnitt__titel { font-size: 1.5rem; }
}


/* ─── Bau 35h: Orientierung, Abschluss, Avatar ──────────────────────────── */

/* Die Ueberschrift der Vollansicht. In der Serife wie am Hub — die drei
   Ansichten sollen sich wie Kapitel derselben Seite lesen, nicht wie drei
   Werkzeuge. */
.hrs-verlauf__kopfzeile { margin: 0 0 .9rem; }
.hrs-verlauf__titel {
    font-family: var(--hrs-serif);
    font-size: 1.55rem;
    font-weight: 400;   /* 400, siehe Definition oben */
    margin: 0;
}
.hrs-verlauf__untertitel {
    margin: .15rem 0 0;
    font-size: .86rem;
    color: var(--hrs-text-muted);
}

/* Der Abschluss der Seite: EIN abgesetzter Block statt drei Reste, die
   untereinander heraushaengen. */
/* Bau 35i — KEINE KARTE. Sie sass in einem Raster fuer zwei Spalten und lief
   auf drei Viertel der Breite aus; dreiviertellang ist immer ein Versehen.
   Jetzt volle Breite des Inhaltsbereichs, ohne Flaeche, mit einer feinen
   Linie darueber. Sie ist das unwichtigste Element der Seite. */
.hrs-abschluss {
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hrs-border);
}
.hrs-abschluss__mehr {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--hrs-border);
    color: var(--hrs-accent);
    text-decoration: none;
    font-size: .88rem;
    min-height: 44px;
}

/* Ohne Reiterbild steht das Pferd allein — der Platzhalter ist weg, also darf
   auch der Versatz weg, der fuer zwei Avatare gedacht war. */
.hrs-paar--allein { justify-content: center; }
.hrs-paar--allein .hrs-paar__avatar--pferd { margin-left: 0; }

/* Desktop: der Abschluss laeuft sonst als Band durchs Bild (Bau 35g). */
@media (min-width: 900px) {
    .hrs-verlauf__titel { font-size: 1.9rem; }
}


/* ─── Bau 35i: der Hero traegt die Seite ────────────────────────────────── */

/* Huelle um das Bild. Sie existiert, damit der Avatar die Bildkante ueberragen
   kann: .hrs-portrait beschneidet (overflow hidden), und aus einem
   beschnittenen Kasten kann kein Kind heraus. */
.hrs-hero { position: relative; }

/* DER AVATAR SITZT AUF DER KANTE — halb im Bild, halb darunter. Ein Element,
   das mittig im Bild schwebt, hat keinen Anker und sieht aus wie vergessen.
   Der Ring ist der zweite Ort, an dem Gold auf dieser Seite vorkommt. */
.hrs-hero__avatar {
    position: absolute;
    left: 1rem;
    bottom: 0;
    transform: translateY(50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--hrs-accent);
    background: var(--hrs-overlay-mittel);
    display: flex; align-items: center; justify-content: center;
}
.hrs-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Steht ein Avatar auf der Kante, braucht die Statuszeile darunter Platz —
   sonst laege die Scheibe auf den Zahlen. */
.hrs-hero:has(.hrs-hero__avatar) + .hrs-kacheln { margin-top: 1.6rem; }

/* Leerer Abschnitt: eine Zeile Text und EIN einladender Knopf. Vorher ein
   grauer Kasten mit Pfeil, der aussah wie ein deaktiviertes Eingabefeld —
   und das ist die erste Begegnung mit dem Produkt. */
.hrs-leer {
    display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
    padding: .2rem 0 .4rem;
}
.hrs-leer__text {
    margin: 0;
    font-size: .9rem;
    color: var(--hrs-text-muted);
}
.hrs-leer__knopf {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1.1rem;
    min-height: 44px;
    border: 1px solid var(--hrs-accent);
    border-radius: 999px;
    color: var(--hrs-accent);
    text-decoration: none;
    font-size: .88rem;
}

/* Zwei Spalten ab 900 px. Mobil EINE Spalte — und mit demselben Abstand, den
   .hrs-pferd zwischen seinen Kindern haelt (1rem). Mit gap:0 waere der Abstand
   ZWISCHEN Momenten und Training kleiner gewesen als der zu den Nachbarn
   daneben, und die beiden haetten enger zusammengehangen als gewollt. Die
   Huelle darf mobil nichts veraendern — auch nicht versehentlich. */
.hrs-spalten { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 900px) {
    /* TEIL 4 — nebeneinander. Untereinander blieben auf einem breiten Schirm
       zwei Drittel der Flaeche leer, und viel Leerraum wirkt nicht ruhig,
       sondern unfertig. "Naechste Termine" steht bewusst DARUEBER und ueber
       die volle Breite: es ist die einzige Angabe, die etwas verlangt. */
    .hrs-spalten {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.3rem 2rem;
        align-items: start;
    }
    /* Die Abschnitte in den Spalten stehen nebeneinander — der Abstand kommt
       vom Raster, nicht mehr von oben. */
    .hrs-spalten > .hrs-abschnitt { margin-top: 0; }

    /* Der Avatar darf groesser werden, wenn der Hero groesser ist. */
    .hrs-hero__avatar { width: 72px; height: 72px; left: 1.5rem; }
}


/* ─── Bau 35j: Badge im Bild, Ablageflaeche, Typraster ──────────────────── */

/* MOBIL UNTEREINANDER, AB 720 PX GEGENUEBER. Bei 390 px braucht "Wallach ·
   Rappe · 168 cm" rund 200 px und der Name in 33 px Serife ebenso viel —
   nebeneinander bricht ausgerechnet der Name um. Deshalb steht der Badge am
   Handy UNTER dem Namen und erst auf breiteren Schirmen rechts daneben. */
.hrs-portrait__unten {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hrs-portrait__wer { min-width: 0; }

.hrs-portrait__badge {
    display: flex; flex-direction: column; gap: .3rem;
    align-items: flex-start;
    min-width: 0;
}
.hrs-portrait__steckbrief {
    font-size: .78rem;
    color: var(--hrs-auf-bild-leise);
    letter-spacing: .02em;
}
/* Auf einem Foto braucht die Pille eine eigene Grundlage — der Verlauf allein
   traegt sie ueber hellem Himmel nicht. */
.hrs-disc-pills--auf-bild .hrs-disc-pill {
    background: var(--hrs-overlay-mittel);
    color: var(--hrs-auf-bild);
    backdrop-filter: blur(4px);
}

@media (min-width: 720px) {
    .hrs-portrait__unten {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
    }
    .hrs-portrait__badge { align-items: flex-end; text-align: right; }
    .hrs-disc-pills--auf-bild { justify-content: flex-end; }
}

/* ─── Teil 3: die Ablageflaeche ─────────────────────────────────────────── */

/* Vorher ein duenner gestrichelter Streifen — bei einem Gegenstand, dessen
   ganzer Zweck das Bild ist. Jetzt eine Flaeche, auf die man etwas legt. */
.hrs-ablage {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem;
    min-height: 132px;
    padding: 1rem .75rem;
    border: 2px dashed var(--hrs-accent);
    border-radius: var(--hrs-radius);
    background: var(--hrs-flaeche-leise);
    transition: background .15s ease, border-color .15s ease;
}
/* Beim Darueberziehen faerbt sich die Flaeche. */
.hrs-ablage--drueber {
    background: var(--hrs-bg-card);
    border-style: solid;
}

/* DER DATEIWAEHLER LIEGT DECKUNGSGLEICH DARUEBER — durchsichtig, aber da.
   Das ist der ganze Trick hinter Drag & Drop ohne JavaScript: ein
   input[type=file] nimmt fallengelassene Dateien von sich aus entgegen und
   loest dasselbe OnChange aus wie ein Klick. Es gibt damit nur EINEN Weg ins
   Formular statt zweier, die auseinanderlaufen koennen. */
.hrs-ablage__eingabe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    z-index: 2;
}
.hrs-ablage__mitte {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    text-align: center;
    pointer-events: none;      /* der Waehler darunter bekommt das Tippen */
}
.hrs-ablage__symbol { font-size: 1.9rem; color: var(--hrs-accent); }
.hrs-ablage__text { font-size: .9rem; }
.hrs-ablage__rest { font-size: .76rem; color: var(--hrs-text-muted); }

/* Vorschau IN der Flaeche, quadratisch — keine Dateinamenliste. Sie liegt
   UEBER dem Waehler, damit das Loeschkreuz erreichbar bleibt. */
.hrs-ablage__vorschau {
    position: relative; z-index: 3;
    display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}