/* 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);
    /* BAU P11, BEFUND UND BEHEBUNG — --hrs-text wurde in dieser Datei VIERMAL
       BENUTZT und NIRGENDS DEFINIERT (seit Bau 35f: die Bereichsplakette
       "Training", die Bewertungsstufe und zwei weitere Stellen). Als
       color-Wert faellt das nicht auf: die Eigenschaft ist ungueltig, die
       Schrift erbt ihre Farbe, und das Ergebnis sieht zufaellig richtig aus.
       In P11 traegt der Trainingspunkt der Woche dieselbe Marke als
       HINTERGRUND — dort waere er unsichtbar geblieben: ein Kreis mit Rand,
       nicht von einem leeren Tag zu unterscheiden.
       Der Wert ist der, den die vier Stellen heute schon zeigen (die
       Textfarbe des Hosts). Sie aendern ihr Aussehen dadurch nicht. */
    --hrs-text: var(--cl-text, rgba(255, 255, 255, 0.92));
    --hrs-accent: var(--cl-gold, #d4af37);
    /* BAU P4 — Schrift AUF der Akzentflaeche. Es gab dafuer keine Marke: die
       aelteren Stellen schreiben #000 bzw. #1a1a1a direkt hin (hrs-btn--primary,
       hrs-chip--on) und stehen oberhalb des Farbwaechters aus 35g. Neue Regeln
       duerfen das nicht mehr, also bekommt die Sache einen Namen. Die alten
       zwei Fundstellen sind ABSICHTLICH nicht mitgezogen — Stilbereinigung
       war nicht beauftragt; sie stehen als offener Punkt im P4-Bericht. */
    --hrs-auf-akzent: #14161a;
    --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; }
/* BAU P10 — DER ABSCHNITT TRITT ZURUECK, OHNE SICH ZU VERSTECKEN.
   Bis P10 war er eine zugeklappte Zeile mit Zahl. Die Ruhe macht jetzt die
   Karte (hrs-gcard--dimmed) und der Abstand davor, nicht eine Klappe: was
   zugeklappt ist, ist von "nicht da" nicht zu unterscheiden. */
.hrs-section--frueher {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hrs-border);
}

.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) ───────────────────────────────────────────── */
/* BAU P9 — ZWEI SPALTEN AB DEM TELEFON.
   Vorher eine Spalte mit voller Breite: EINE Karte fuellte fast den Schirm,
   die zweite lag halb darunter, und wer zwei Pferde hat, musste scrollen, um
   zu sehen, dass er zwei hat. Das Bild bleibt 4:3 (hrs-gcard__photo) und ist
   auch halbbreit noch gross genug, um ein Pferd zu erkennen.
   minmax(0, 1fr) statt 1fr: sonst sprengt ein langer Name die Spalte. */
.hrs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media (min-width: 720px) {
    .hrs-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1100px) {
    .hrs-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
    .hrs-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); }
}

/* ─── 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); }
/* BAU P10 — SEIT WANN. Leiser als der Name, lauter als die Stammdaten: sie
   steht zwischen beiden und ist die Auskunft, wegen der jemand ueberhaupt auf
   eine gedaempfte Karte sieht. */
.hrs-gcard__zustand {
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--hrs-text-muted);
    display: flex; align-items: center; gap: .3rem;
}
.hrs-gcard__zustand i { font-size: .75rem; opacity: .8; }

.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 {
    /* BAU P6 — DIALOG: er wird AUS dem Hero geoeffnet und darf ueber einem
       Blatt liegen. Rueckfallwert, weil horses.css ein Modul-Stylesheet ist
       und ohne cavallearn.css geladen werden koennte. */
    position: fixed; inset: 0; z-index: var(--cl-ebene-dialog, 1100);
    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;
}
/* 25.08.2026 - DIE PLAKETTE OHNE BILD DARUNTER.

   Befund vom iPhone: auf einem Pferd ohne Foto lagen Uploader (inset:0) und
   Plakette (absolut unten) im selben Kasten uebereinander. Der Name stand
   mitten im Uploader-Text, "Datei waehlen" war halb verdeckt, und der dunkle
   Verlauf verdunkelte eine leere Flaeche - er ist dafuer da, Schrift ueber
   hellem Himmel lesbar zu machen, und ohne Bild gibt es keinen Himmel.

   Sie steht jetzt UNTER dem Kasten und traegt dort keine Maske mehr. Die
   Schriftgroessen bleiben, damit der Name derselbe Anker ist wie mit Foto -
   nur die Farben kommen aus dem normalen Text und nicht aus --hrs-auf-bild,
   das auf hellem Grund unlesbar waere. */
.hrs-portrait__verlauf--frei {
    position: static;
    background: none;
    padding: .85rem 0 0 0;
    pointer-events: auto;
}

.hrs-portrait__verlauf--frei .hrs-portrait__name {
    color: var(--hrs-text);
    text-shadow: none;
}

.hrs-portrait__verlauf--frei .hrs-portrait__partner,
.hrs-portrait__verlauf--frei .hrs-portrait__alter,
.hrs-portrait__verlauf--frei .hrs-portrait__steckbrief {
    color: var(--hrs-text-muted);
    text-shadow: 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);
    /* BAU P6 — der Grund eines BLATTES, nicht der einer Bildausblendung.
       0.75 laesst die Leiste darunter durchscheinen; wer sie sieht, tippt
       auf sie. Ein Blatt verdeckt.

       BAU P12e — SIE LIEST JETZT DIE MARKE DES HOSTS. Das Aktionsmenue in
       cavallearn.css brauchte denselben Grund, und zwei Zahlen fuer dieselbe
       Sache waeren beim naechsten Farbwechsel zwei Baustellen. Dasselbe
       Muster wie --hrs-accent, das schon immer --cl-gold liest: Richtung
       Host -> Modul, mit einem Rueckfall, damit das Modul auch in einem
       fremden Haus (CDL, Worklino) einen Grund hat. */
    --hrs-blatt-grund: var(--cl-blatt-grund, rgba(0, 0, 0, 0.92));
    --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. ──────────────────────────────── */
/* BAU P12e — SEIT P12e IST DAS EIN <button>, kein <a>. Ein Link kann nicht
   fragen: der Browser navigiert, bevor irgendein Zustand geprueft ist. Er soll
   trotzdem aussehen wie der Link, den er ersetzt — daher die drei
   Ruecksetzungen. */
.hrs-zurueck {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--hrs-text-muted); text-decoration: none;
    font-size: .88rem; margin-bottom: .6rem;
    background: none; border: 0; padding: 0;
    font-family: inherit; cursor: pointer;
}

/* 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. */
/* BAU P10 — WARUM DIESES PFERD NICHT IN DER LEISTE STEHT.
   Keine Warnfarbe und kein Rahmen: keiner dieser Zustaende ist ein Fehler.
   Eine Flaeche in der leisen Stufe, sonst nichts. */
.hrs-zustandszeile {
    display: flex; align-items: center; gap: .5rem;
    margin: .9rem 0 .2rem 0;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: var(--hrs-flaeche-leise);
    color: var(--hrs-text-muted);
    font-size: .85rem;
}

/* BAU P10a — ZWEI SPALTEN, WEIL ES ZWEI KACHELN SIND.

   HIER STAND repeat(4, 1fr). Die Vier stammt aus Bau 35i, als vier Kacheln
   darin haengten (Momente, Training, Termine, Versorgung). Bau P3a hat zwei
   davon gestrichen, weil sie dasselbe zaehlten — die Spaltenzahl blieb. Seither
   sassen die verbliebenen zwei in der LINKEN HAELFTE der Zeile und die rechte
   blieb leer.

   Aufgefallen in P10, als dieselbe Zeile antippbar wurde: eine halb leere Zeile,
   die auf einmal reagiert, sieht nach Fehler aus. In P10 bewusst NICHT geaendert
   (ein Waechter hielt den Wert fest, und es war nicht Auftrag); mit P10a
   ausdruecklich freigegeben — die GRUNDREGEL hat sich geaendert, nicht ihre
   Einhaltung, und Bau35gFilterTests zieht mit.

   FESTE ZAHL, KEIN auto-flow: die Zeile soll bei einer kuenftigen dritten
   Kachel auffallen und nicht stillschweigend enger werden. */
.hrs-kacheln {
    display: grid; grid-template-columns: repeat(2, 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;
}
/* BAU P10 — EINE KACHEL, DIE FUEHRT. Der Pfeil zeigt NACH UNTEN und nicht
   nach rechts: das Ziel liegt auf derselben Seite, ein Chevron nach rechts
   verspricht eine andere. */
.hrs-kachel--weg {
    background: none; border: 0;
    cursor: pointer;
    font: inherit;
}
.hrs-kachel--weg:active { opacity: .6; }
.hrs-kachel__pfeil {
    font-size: .6rem;
    color: var(--hrs-text-muted);
    margin-top: .1rem;
}

/* 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 {
    /* BAU P6 — HIER SASS DER GEMELDETE FEHLER, UND ER WAR KEIN Z-INDEX.

       Das Blatt lag mit 1060 laengst ueber der Leiste (100). Sichtbar war es
       auch. Es nahm nur keinen Tipper an — weil sein VORFAHR
       .hrs-portrait__verlauf pointer-events:none traegt (Bau 35i, damit der
       Farbverlauf das Tippen auf das Bild darunter nicht abfaengt). Der
       Ausloeser hat sich das damals einzeln zurueckgeholt
       (.hrs-wechsel__ausloeser), das Blatt nicht — und ein Element ohne
       Trefferflaeche laesst den Tipper durch auf das, was darunter liegt:
       die untere Leiste. Deshalb landete man auf dem aktiven Pferd.

       pointer-events:auto ist hier KEINE hoehere Zahl gegen ein Symptom,
       sondern derselbe Weg, den der Ausloeser seit 35i geht. Die Ursache
       bleibt am Vorfahren stehen, weil sie dort richtig ist: der Verlauf SOLL
       durchlaessig sein, seine bedienbaren Kinder sollen es nicht.

       Und der Hintergrund ist jetzt DICHT (--hrs-blatt-grund statt
       --hrs-overlay-stark, 0.75). Bei 0.75 blieb die Leiste durchscheinend
       sichtbar — man sah, worauf man nicht tippen konnte. */
    position: fixed; inset: 0; z-index: var(--cl-ebene-blatt, 1000);
    pointer-events: auto;
    background: var(--hrs-blatt-grund);
    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); }
/* BAU P10 — der Weg zur Uebersicht. Er steht unter dem Anlegen und traegt
   NICHT die Aktionsfarbe: er legt nichts an, er fuehrt nur woandershin. */
.hrs-wechsel__zeile--alle { color: var(--hrs-text-muted); }
.hrs-wechsel__pfeil-rechts { margin-left: auto; font-size: .75rem; opacity: .6; }

.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: .3rem;
    padding: .8rem .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: 84px;
}

/* BAU P12i — GROESSER UND DEUTLICHER, UEBER FORM STATT UEBER FARBE.

   Die drei Gesichter waren 1.35rem gross und sahen aus wie Beschriftungen.
   Sie sind die einzige Stelle des Formulars, an der man mit EINEM Tipp
   fertig ist - dafuer waren sie zu leise.

   KEINE NEUE FARBE, und das ist keine Vorsicht, sondern eine Regel: die
   Aktionsfarbe gehoert den Knoepfen (Bau 49b), und Rot faellt ohnehin aus
   (ein Tagebuch, das schlechte Tage anstreicht, wird nicht gefuehrt). Die
   drei Rangfarben darunter sind unveraendert.

   DREI MITTEL STATT EINES: das Ungewaehlte tritt zurueck (opacity), das
   Gewaehlte waechst (scale) und bekommt einen dickeren Rahmen. Alle drei
   wirken auch ohne Farbwahrnehmung - dasselbe Vorgehen wie bei --on schon
   vorher, nur deutlicher. */
.hrs-bewertung__stufe i {
    font-size: 2.1rem; line-height: 1;
    opacity: .65;
    transition: opacity .12s ease, transform .12s ease;
}
.hrs-bewertung__stufe--on i { opacity: 1; transform: scale(1.12); }

/* 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: 3px;
    color: var(--hrs-auf-bild);
    font-weight: 600;
}
.hrs-bewertung__stufe--r0.hrs-bewertung__stufe--on { border-color: var(--hrs-success); }

/* ═══ BAU P11 — TUN, RUECKBLICK, WOCHE ══════════════════════════════════ */

/* DREI HANDLUNGSKARTEN. Zwei gross nebeneinander, eine flach darunter.
   Die Flaeche ist die leise Kartenflaeche, nicht Gold: es sind Einladungen,
   keine Hauptaktion — Gold gehoert den Aktionen, und drei goldene Flaechen
   nebeneinander waeren drei Hauptaktionen (Bau 49b). */
.hrs-tun {
    display: flex; flex-direction: column; gap: .6rem;
    margin: 1rem 0 .4rem 0;
}
.hrs-tun__paar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
}
.hrs-tun__karte {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .85rem;
    border: 1px solid var(--hrs-border);
    border-radius: var(--hrs-radius);
    background: var(--hrs-bg-card);
    text-decoration: none; color: inherit;
}
.hrs-tun__karte:active { opacity: .7; }

/* DIE FLACHE liegt quer: Symbol, Titel, und rechts das, was ansteht. */
.hrs-tun__karte--flach {
    flex-direction: row; align-items: center; gap: .6rem;
    padding: .7rem .85rem;
}
.hrs-tun__karte--flach .hrs-tun__einladung,
.hrs-tun__karte--flach .hrs-tun__faellig {
    margin-left: auto; text-align: right;
}

.hrs-tun__symbol { font-size: 1.15rem; color: var(--hrs-accent); }
.hrs-tun__titel { font-weight: 600; font-size: .95rem; }
.hrs-tun__einladung { font-size: .78rem; color: var(--hrs-text-muted); }

/* WAS ANSTEHT, in der Schrift des Hauses — aber OHNE Warnfarbe. Es ist eine
   Auskunft; die Anwendung weiss nicht, ob der Schmied laengst da war und nur
   niemand es eingetragen hat. */
.hrs-tun__faellig {
    font-size: .8rem;
    color: var(--hrs-text);
}

/* VOR EINEM JAHR — das Bild traegt die Karte. */
.hrs-rueckblick {
    display: flex; flex-direction: column; gap: .6rem;
}
.hrs-rueckblick__karte {
    position: relative; display: block;
    border-radius: var(--hrs-radius);
    overflow: hidden;
    min-height: 150px;
    text-decoration: none; color: inherit;
    background: var(--hrs-bg-card);
}
.hrs-rueckblick__bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Der Verlauf macht die Schrift lesbar, ohne das Bild zu verdunkeln — dieselbe
   Bauform wie die Plakette im Hero. */
.hrs-rueckblick__inhalt {
    position: relative;
    display: flex; flex-direction: column; gap: .1rem;
    padding: 2.5rem .9rem .9rem .9rem;
    /* Ueber die Marken, nicht ueber feste Werte — dieselben, die der Hero
       benutzt (--hrs-overlay-stark, --hrs-auf-bild). Der Farbwaechter aus
       Bau 35e laesst hinter seiner Marke nichts anderes zu, und das ist
       richtig so: das Light-Theme kommt noch. */
    background: linear-gradient(transparent, var(--hrs-overlay-stark));
    color: var(--hrs-auf-bild);
}
/* OHNE BILD: kein Verlauf ueber nichts, kein Mindestmass fuer eine Flaeche,
   die es nicht gibt. Eine ruhige Karte mit demselben Text. */
.hrs-rueckblick__karte--ohne-bild { min-height: 0; }
.hrs-rueckblick__karte--ohne-bild .hrs-rueckblick__inhalt {
    padding: .85rem;
    background: none;
    color: inherit;
}
.hrs-rueckblick__datum { font-size: .75rem; opacity: .85; }
.hrs-rueckblick__titel { font-weight: 600; }
.hrs-rueckblick__satz { font-size: .82rem; opacity: .9; }

/* DIE WOCHE. Sieben Punkte, und kein einziger davon kann rot werden — es gibt
   in dieser Datei keine Regel dafuer, und das ist Absicht. */
.hrs-woche__punkte {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}
.hrs-woche__tag {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
/* BAU P12f — DIE FORM UNTERSCHEIDET, NICHT DIE FARBE.
   Am Geraet gesehen: Gold und die hellen Ringe waren auseinanderzuhalten, der
   gedaempfte Punkt und ein leerer Tag kaum. Eine neue Palette kam nicht in
   Frage (P11: kein Blau, kein Gruen) — also die Form, wie dort vereinbart:
     erleben     VOLL           gefuellt, Akzent
     training    RING           2 px Rand, innen leer
     versorgung  GEPUNKTETER RING
   Drei Formen sind auch bei 14 px verschieden, ohne dass jemand Farben
   vergleichen muss. */
.hrs-woche__punkt {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid var(--hrs-border);
    background: none;
    display: block;
}
/* BAU P12f — DER LEERE TAG IST KEIN LEERER KNOPF, SONDERN EIN PUNKT.

   Bis P12f war er ein 14-px-Kreis mit Rand — also ein Ring, und damit vom
   Trainingspunkt kaum zu unterscheiden. Schlimmer: er sah bedienbar aus und
   war es nicht.

   ER IST JETZT KLEINER UND OHNE RAND. Das ist ausdruecklich KEINE Abwertung
   und kein Fehlzustand — die P11-Zusage bleibt scharf, es gibt weiter keine
   Warnfarbe und keinen Zustand "Luecke". Er ist eine ANDERE ART Ding: die
   drei bedienbaren Formen sagen "hier steht etwas", der kleine Punkt sagt
   "hier steht nichts", und beides ist gleich in Ordnung. */
.hrs-woche__punkt--leer {
    width: 6px; height: 6px;
    border: 0;
    background: var(--hrs-text-muted);
    opacity: .35;
}

/* Ein Tag in der ZUKUNFT ist noch leiser — er ist nicht leer, er ist noch
   nicht dran. Dieselbe kleine Form, noch zurueckhaltender. */
.hrs-woche__punkt--offen {
    width: 6px; height: 6px;
    border: 0;
    background: var(--hrs-text-muted);
    opacity: .18;
}

/* DER KNOPF UM DEN PUNKT. Die Trefferflaeche ist groesser als der Punkt —
   14 px trifft am Telefon niemand zuverlaessig. */
.hrs-woche__knopf {
    background: none; border: 0; padding: .35rem;
    margin: -.35rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.hrs-woche__knopf:active { opacity: .6; }

/* DIE DREI BEREICHE — dieselben Marken wie die Bereichsplaketten der Achse
   (hrs-verlauf-achse__bereich--*): Erleben traegt den Akzent, Training die
   Schriftfarbe, Versorgung die leise. KEIN Blau und KEIN Gruen: beides kommt
   in dieser Anwendung sonst nirgends vor, und Gruen wurde in Bau P8
   ausdruecklich wieder entfernt. Steht als Befund im P11-Bericht. */
.hrs-woche__punkt--erleben {
    background: var(--hrs-accent);
    border-color: var(--hrs-accent);
}
/* --hrs-text bekommt in P11 erstmals eine Definition (siehe :root ganz oben).
   Ohne sie waere dieser Punkt unsichtbar geblieben: ein Kreis mit Rand, nicht
   von einem leeren Tag zu unterscheiden. */
/* TRAINING: EIN RING. Innen leer, Rand kraeftig — das ist die zweite Form.
   --hrs-text bekam in Bau P11 erstmals eine Definition; ohne sie waere der
   Rand hier unsichtbar. */
.hrs-woche__punkt--training {
    background: none;
    border: 2px solid var(--hrs-text);
}
/* VERSORGUNG: EIN GEPUNKTETER RING. Die dritte Form — und die leiseste, was
   zur Sache passt: Schmied und Impfung sind das Notwendige, nicht das
   Erlebte. */
.hrs-woche__punkt--versorgung {
    background: none;
    border: 2px dotted var(--hrs-text-muted);
}

.hrs-woche__kuerzel { font-size: .68rem; color: var(--hrs-text-muted); }
/* HEUTE ist markiert — ueber die Schrift, nicht ueber einen Ring um den Punkt:
   ein Ring saehe aus wie ein Zustand des Eintrags. */
.hrs-woche__tag--heute .hrs-woche__kuerzel {
    color: var(--hrs-accent); font-weight: 600;
}

/* ═══ BAU P12 — AENDERN, FOLGETERMIN, HERZ ══════════════════════════════ */

/* DER HERZ-KNOPF STEHT ABGESETZT. Die vier Bereichsknoepfe links schliessen
   einander aus; "mit Herz" schneidet quer. Eine Luecke und ein Symbol statt
   eines Wortes trennen ihn, ohne eine fuenfte Kategorie zu behaupten. */
/* BAU P12i — DIE PILLE TRAEGT EIN SYMBOL, DAS WORT KOMMT DAZU.

   MOBILE FIRST, wie der Rest dieser Datei: die Grundform ist die schmale
   (nur Symbol), das Wort erscheint ab 560 px. Umgekehrt herum waere es
   dieselbe Regel, aber gegen die Bauart der Datei.

   DIE RECHNUNG, bei .82rem Schrift (13.1 px) und der bestehenden Pille
   (padding .32/.7rem, 1 px Rahmen, .35rem Abstand):
     mit Wort     Alles 62 + Erleben 76 + Training 81 + Versorgung 96
                  + Herz 37 = 352, dazu 4 Abstaende = ~374 px
     nur Symbol   5 x ~37.5 = 188, dazu 4 Abstaende = ~210 px
   Bei 390 px Schirm stehen dem Abschnitt rund 358 px zur Verfuegung. 374
   passt nicht, 210 passt mit Reserve - das ist der ganze Grund.

   WARUM 560 UND NICHT 406 (dort passten die Woerter rechnerisch gerade):
   560 ist eine Zahl, die in dieser Datei schon dreimal vorkommt. Eine neue
   Schwelle einzufuehren, die knapp ueber dem rechnerischen Minimum liegt,
   hiesse zwei Dinge auf einmal zu wagen - eine ungeprobte Zahl UND kein
   Spielraum. Bei 560 steht die Zeile mit der Ueberschrift daneben (dafuer
   braucht es rund 448) statt darunter. */
.hrs-chip i { font-size: 1em; line-height: 1; }
.hrs-chip__wort { display: none; }
@media (min-width: 560px) {
    .hrs-chip__wort { display: inline; }
    /* Symbol und Wort brauchen einen Abstand - vorher stand nur eines da. */
    .hrs-chip i { margin-right: .3rem; }
}

.hrs-chip--abgesetzt { margin-left: auto; }
.hrs-chip--herz { padding-left: .55rem; padding-right: .55rem; }
.hrs-chip--herz.hrs-chip--on i { color: inherit; }

/* DER FOLGETERMIN UNTER DER NOTIZ. Ruhig wie die Zeile darueber: keine Farbe,
   kein Ausrufezeichen. Es ist eine Auskunft, keine Mahnung — die Anwendung
   weiss nicht, ob der Schmied laengst da war. */
.hrs-verlauf-achse__termin {
    display: flex; align-items: center; gap: .35rem;
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--hrs-text-muted);
}
.hrs-verlauf-achse__termin i { font-size: .72rem; opacity: .8; }

/* AENDERN STEHT NEBEN LOESCHEN und sieht genauso leise aus. Es ist der
   haeufigere der beiden Wege und darf trotzdem nicht lauter sein: was zaehlt,
   ist der Eintrag, nicht seine Verwaltung. */
.hrs-akte__bearbeiten,
.hrs-timeline__bearbeiten {
    background: none; border: 0; padding: .2rem .35rem;
    color: var(--hrs-text-muted); cursor: pointer;
    font-size: .85rem;
}
.hrs-akte__bearbeiten:active,
.hrs-timeline__bearbeiten:active { opacity: .6; }

/* ═══ BAU P12e — DIE RUECKFRAGE VOR DEM VERWERFEN ══════════════════════ */

/* DER GRUND IST DICHT, wie bei jedem Blatt (--hrs-blatt-grund, Bau P6, seit
   P12e aus der Marke des Hosts). Ein durchscheinendes Formular unter einer
   Frage laedt dazu ein, weiterzutippen — und genau das geht nicht mehr. */
.hrs-verwerfen {
    position: fixed; inset: 0;
    z-index: var(--cl-ebene-dialog, 1100);
    pointer-events: auto;
    background: var(--hrs-blatt-grund);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.hrs-verwerfen__blatt {
    width: 100%; max-width: 420px;
    padding: 1.1rem;
    border-radius: var(--hrs-radius);
    border: 1px solid var(--hrs-border);
    background: var(--hrs-bg-card);
}
.hrs-verwerfen__frage { margin: 0; font-weight: 600; }
.hrs-verwerfen__folge {
    margin: .35rem 0 0 0;
    font-size: .85rem; color: var(--hrs-text-muted);
}
/* "Weiter bearbeiten" ZUERST und in der Hauptfarbe: der haeufigere Fall ist,
   dass jemand versehentlich zurueckgetippt hat. Kein Rot am Verwerfen — es ist
   eine Wahl, keine Warnung. */
.hrs-verwerfen__aktionen {
    display: flex; gap: .5rem; margin-top: 1rem;
}
.hrs-verwerfen__aktionen .hrs-btn { flex: 1; }

/* BAU P12e — DER FUSS TRAEGT NUR NOCH EINEN KNOPF. Rechtsbuendig sieht ein
   einzelner Knopf verrutscht aus; er nimmt die Breite. */
.hrs-form__actions--einer .hrs-btn { flex: 1; }

/* ═══ BAU P12b — DER MIKROFONKNOPF IM TRAININGSFORMULAR ════════════════ */

/* GROSS UND VORNE. Er ist beim Training der angebotene Weg, nicht ein Beiwerk
   neben dem Tippen — deshalb volle Breite und die Aktionsfarbe. Beim Erleben
   und bei der Versorgung steht er gar nicht da (HorseEntryLane.FeldReihenfolge),
   also gibt es hier auch keine leise Variante. */
.hrs-diktat { display: flex; flex-direction: column; gap: .5rem; }

.hrs-diktat__knopf {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--hrs-accent);
    border-radius: var(--hrs-radius);
    background: none;
    color: var(--hrs-accent);
    font: inherit; font-size: 1rem; font-weight: 600;
    cursor: pointer;
}
.hrs-diktat__knopf i { font-size: 1.3rem; }
.hrs-diktat__knopf:active { opacity: .7; }

/* WAEHREND DER AUFNAHME: gefuellt, damit unverwechselbar ist, dass es laeuft.
   Kein Rot und kein Blinken — es ist kein Alarm, es ist ein Zustand. */
.hrs-diktat__knopf--laeuft {
    background: var(--hrs-accent);
    color: var(--hrs-auf-akzent);
}
.hrs-diktat__knopf--arbeitet { cursor: default; opacity: .7; }

.hrs-diktat__hinweis {
    margin: 0; text-align: center;
    font-size: .8rem; color: var(--hrs-text-muted);
}
.hrs-diktat__meldung { margin: 0; }

/* DER GESPROCHENE TEXT bleibt erreichbar, auch wenn die Auswertung nichts
   hergab — er ist bezahlt. Zugeklappt, weil er nach dem Uebernehmen nur noch
   Beleg ist und nicht Inhalt. */
/* BAU P12g — DAS WAR EIN <details>, und die Form ist jetzt ein Knopf mit
   einem Feld dahinter (Lehre aus P6 und P7). Der Knopf soll aussehen wie die
   Zeile, die er ersetzt — daher die drei Ruecksetzungen. */
.hrs-diktat__transkript { font-size: .82rem; color: var(--hrs-text-muted); }
.hrs-diktat__transkript-knopf {
    display: flex; align-items: center; gap: .35rem;
    background: none; border: 0; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
}
.hrs-diktat__transkript-knopf i { font-size: .7rem; }
.hrs-diktat__transkript-text { margin: .35rem 0 0 0; }

/* ═══ BAU P13 — ZEIT, ZIELE, MEILENSTEINE ══════════════════════════════ */

/* DIE ZEITZEILE IST EIN KNOPF. Sie soll aussehen wie die Zeile, die sie
   ersetzt — daher die Ruecksetzungen. Die Punkte darunter sagen, dass es mehr
   gibt, ohne es auszusprechen. */
.hrs-zeitform {
    background: none; border: 0; padding: 0;
    font: inherit; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
    text-align: left;
}
.hrs-zeitform__punkte { display: flex; gap: .2rem; }
.hrs-zeitform__punkt {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--hrs-auf-bild-leise);
    opacity: .35;
}
.hrs-zeitform__punkt--an { opacity: 1; }

/* WAS WIR NOCH VORHABEN. Die Zahl steht neben der Ueberschrift, nicht als
   Abzeichen darauf — sie ist eine Auskunft, keine Auszeichnung. */
.hrs-ziele__kopf {
    display: flex; align-items: baseline; gap: .5rem;
}
.hrs-ziele__zaehler { font-size: .78rem; color: var(--hrs-text-muted); }

.hrs-ziele__liste { list-style: none; margin: 0; padding: 0; }
.hrs-ziel {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .45rem 0;
}
.hrs-ziel + .hrs-ziel { border-top: 1px solid var(--hrs-border); }

/* DER HAKEN IST DER KNOPF. Grosse Trefferflaeche, keine eigene Flaeche —
   14 px trifft am Telefon niemand zuverlaessig (Lehre aus P12f). */
.hrs-ziel__haken {
    background: none; border: 0; padding: .15rem;
    margin: -.15rem;
    color: var(--hrs-text-muted); cursor: pointer;
    font-size: 1.05rem; line-height: 1;
    flex-shrink: 0;
}
.hrs-ziel__haken--fest { cursor: default; }
.hrs-ziel__haken:active { opacity: .6; }

.hrs-ziel__text { display: flex; flex-direction: column; min-width: 0; }
.hrs-ziel__wann { font-size: .75rem; color: var(--hrs-text-muted); }

/* EIN GESCHAFFTES ZIEL WIRD LEISER, NICHT DURCHGESTRICHEN. Ein Strich
   entwertet, was gelungen ist; die Deckkraft sagt nur "das ist erledigt". */
.hrs-ziel--geschafft .hrs-ziel__titel { opacity: .6; }
.hrs-ziel--geschafft .hrs-ziel__haken { color: var(--hrs-accent); }

.hrs-ziele__neu { display: flex; gap: .4rem; margin-top: .6rem; }
.hrs-ziele__neu .hrs-input { flex: 1; }

/* MEILENSTEINE. Sie tragen KEINE Bereichsfarbe — sie sind kein Bereich. Die
   Marke ist ein Ring statt einer gefuellten Scheibe: gerechnet, nicht
   eingetragen, und das soll man sehen, ohne es zu lesen. */
.hrs-meilenstein__marke {
    background: none;
    border: 1px dashed var(--hrs-text-muted);
    color: var(--hrs-text-muted);
}
.hrs-meilenstein__datum { font-size: .75rem; color: var(--hrs-text-muted); }
.hrs-meilenstein__text { font-weight: 600; }

/* ─── 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 {
        /* BAU P10a — zwei statt vier, siehe .hrs-kacheln oben. Die Breite
           je Kachel bleibt unveraendert. */
        grid-template-columns: repeat(2, 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;
}

/* BAU P3b — eine Kachel OHNE Ziel. Sie sieht aus wie ihre Nachbarin, verhaelt
   sich aber nicht so: kein Zeigefinger, kein Schweben. Was nicht fuehrt, darf
   auch nicht so aussehen. */
.hrs-kachel--still { cursor: default; }

/* ─── Bau P4: Pferd anlegen ─────────────────────────────────────────────── */

/* ZWEI DINGE NEBENEINANDER: der Kreis und der Name. Der Rest der Seite ist
   eingeklappt. */
.hrs-anlegen__kopf {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-bottom: 1rem;
}

/* DER KREIS IST DAS EINGABEFELD — ein <label> ueber dem versteckten
   Dateifeld. Kein Knopf daneben: ein zweiter Bedienpunkt fuer dieselbe Sache
   ist einer zu viel. */
.hrs-anlegen__kreis {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 50%;
}

.hrs-anlegen__avatar {
    display: flex; align-items: center; justify-content: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hrs-flaeche-leise);
    border: 2px dashed var(--hrs-border);
    color: var(--hrs-text-muted);
    font-size: 2.2rem; font-weight: 600;
}
.hrs-anlegen__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Sobald ein Bild drin steht, ist der gestrichelte Rand falsch: er sagt
   "hier fehlt etwas". :has greift auf das img im Avatar. */
.hrs-anlegen__kreis:has(img) .hrs-anlegen__avatar {
    border-style: solid;
    border-color: var(--hrs-accent);
}

/* Das kleine Zeichen an der Kante — Kamera, solange nichts drin ist, danach
   ein Stift. Es ERSETZT den Knopf, den es nicht gibt. */
.hrs-anlegen__kamera {
    position: absolute; right: -2px; bottom: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hrs-accent);
    color: var(--hrs-auf-akzent);
    font-size: .85rem;
}

/* Das Dateifeld selbst ist unsichtbar, aber NICHT display:none — sonst
   erreicht die Tastatur es nicht mehr, und der Kreis waere nur mit der Maus
   bedienbar. */
.hrs-anlegen__datei {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hrs-anlegen__name { flex: 1; min-width: 0; }
.hrs-anlegen__name label { display: block; margin-bottom: .3rem; }

.hrs-anlegen__bildhinweis { margin-bottom: 1rem; }

/* Der Steckbrief. Zugeklappt, und das Wort "optional" steht dabei — sonst
   liest man eine Ueberschrift und vermutet Pflichtfelder darunter. */
.hrs-anlegen__steckbrief {
    border-top: 1px solid var(--hrs-border);
    padding-top: .9rem;
}
.hrs-anlegen__steckbrief-kopf {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.hrs-anlegen__steckbrief-kopf::-webkit-details-marker { display: none; }
.hrs-anlegen__optional { font-weight: 400; color: var(--hrs-text-muted); }

.hrs-anlegen__felder {
    display: flex; flex-direction: column; gap: .75rem;
    padding-top: .9rem;
}
@media (min-width: 560px) {
    .hrs-anlegen__felder {
        display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem;
    }
}

/* Der Hinweis auf der Zielseite: das Pferd ist da, nur das Foto fehlt. Keine
   Fehlerfarbe — es ist kein Fehler, es ist eine Auskunft. */
.hrs-anlegen-hinweis {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-bottom: 1rem;
}

/* ─── Bau P3b: der Abschied ─────────────────────────────────────────────── */

/* GANZ UNTEN UND ZUGEKLAPPT. Er soll erreichbar sein und niemandem
   entgegenkommen: kein Rot, keine Warnfarbe, kein Rahmen — eine Zeile, die
   man suchen muss, wenn man sie braucht. Rot waere hier falsch: es ist kein
   Fehler, ein Pferd abzugeben. */
/* BAU P8 — die Gestalt des Abschieds steht jetzt oben bei den uebrigen
   Karten (er ist eine davon). Hier bleibt nur, was ihn von ihnen
   unterscheidet: der Abstand, der ihn absetzt. */
/* BAU P7 — AUS DEM <summary> IST EIN <button> GEWORDEN.

   P6 hatte hier display vom <summary> genommen (es war das einzige der
   Anwendung mit eigenem display). Das war richtig und hat den Fehler nicht
   behoben — auf dem iPhone tat der Knopf weiter nichts. Statt eine dritte
   Vermutung an derselben Bauform zu versuchen, traegt der Aufklappzustand
   jetzt Blazor.

   ALS KNOPF UND NICHT ALS ZEILE: es IST ein Bedienelement, und ein <button>
   bringt Tastaturbedienung, Fokusring und Rolle von selbst mit. Das Aussehen
   bleibt zurueckhaltend — dieser Weg soll erreichbar sein und niemandem
   entgegenkommen. */
.hrs-abschied__ausloeser {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .85rem .9rem;
    min-height: 48px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--hrs-text-muted);
    font-size: .9rem;
    font-family: inherit;
}
.hrs-abschied__wort { flex: 1; min-width: 0; }
.hrs-abschied__pfeil { font-size: .8rem; }

.hrs-abschied__body {
    display: flex; flex-direction: column; gap: .9rem;
    padding: .9rem;
    border-top: 1px solid var(--hrs-border);
}

.hrs-abschied__fall {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .4rem;
    padding: .75rem;
    border-radius: var(--hrs-radius);
    background: var(--hrs-flaeche-leise);
}
.hrs-abschied__fall--gesperrt { opacity: .75; }

.hrs-abschied__titel { font-weight: 600; }

.hrs-abschied__folge {
    font-size: .85rem; color: var(--hrs-text-muted);
    overflow-wrap: anywhere;
}

.hrs-abschied__sperre {
    display: flex; align-items: flex-start; gap: .4rem;
    font-size: .85rem;
    color: var(--hrs-text-muted);
    overflow-wrap: anywhere;
}

/* Die Rueckfrage steht AN DER STELLE des Knopfes, nicht als Ueberlagerung:
   ein Dialog ueber der Seite nimmt den Satz weg, den man gerade gelesen hat. */
.hrs-abschied__rueckfrage {
    display: flex; flex-direction: column; gap: .5rem;
    width: 100%;
    font-size: .9rem;
}
/* BAU P9 — was beim Loeschen MITGEHT. Leise, aber vor dem Knopf: es ist
   keine Warnung, sondern eine Auskunft, und sie kommt zu spaet, wenn sie
   erst danach steht. */
.hrs-abschied__mitgeloescht {
    font-size: .85rem;
    color: var(--hrs-text-muted);
}

.hrs-abschied__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }

/* BAU P9 — der Weg zurueck. Er steht ueber der Knopfreihe und traegt als
   einziger dort die Aktionsfarbe: er ist eine Handlung, die Reihe darunter
   ist eine Auswahl. */
.hrs-mehr__zurueck { margin-bottom: .75rem; }

/* ─── Bau P8: die Ansicht "Alles zu {Name}" bekommt eine Gestalt ────────── */

/* SEIT BAU 35b STAND HIER NICHTS. hrs-mehr__block, __summary und __body
   standen im Markup und in keinem Stylesheet — die Bereiche waren nackte
   Browser-Klappen mit Dreieck, und die Seite las sich wie ein
   Verzeichnisbaum.

   JETZT KARTEN, in der Form, die diese Anwendung sonst benutzt: Flaeche,
   Rahmen, Radius — dieselben Marken wie .hrs-abschied__fall und
   .cl-card-glass. Keine neuen Farben. */
.hrs-mehr {
    display: flex; flex-direction: column;
    gap: .6rem;
}

.hrs-mehr__block {
    background: var(--hrs-flaeche-leise);
    border: 1px solid var(--hrs-border);
    border-radius: var(--hrs-radius);
    overflow: hidden;
}

/* DIE ZEILE: Symbol und Ueberschrift links, Zustand rechts, Pfeil ganz
   aussen — dieselbe Folge wie .hrs-eignung-zeile und .hrs-abschluss__mehr auf
   dem Hub. Wer die eine gelernt hat, kennt die andere. */
.hrs-mehr__kopf {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    padding: .85rem .9rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--hrs-text);
    font-family: inherit;
    font-size: .95rem;
    min-height: 48px;
}
.hrs-mehr__symbol { color: var(--hrs-text-muted); }
.hrs-mehr__titel { font-weight: 600; }

/* Der Zustand schiebt sich nach rechts und bleibt leise: er ist eine
   Auskunft, keine Ueberschrift. Leer heisst leer — kein "(0)". */
.hrs-mehr__zustand {
    margin-left: auto;
    color: var(--hrs-text-muted);
    font-size: .85rem;
    white-space: nowrap;
}
.hrs-mehr__pfeil { color: var(--hrs-text-muted); font-size: .8rem; }

.hrs-mehr__body {
    padding: 0 .9rem .9rem;
    border-top: 1px solid var(--hrs-border);
    padding-top: .9rem;
}

/* Die geschachtelten Bereiche unter "Mehr eintragen" tragen KEINE eigene
   Flaeche — zwei Kartenraender ineinander sehen aus wie ein Fehler. */
.hrs-mehr__geschachtelt {
    display: flex; flex-direction: column;
    gap: .25rem;
    padding-left: .75rem;
    border-left: 1px solid var(--hrs-border);
}
.hrs-mehr__geschachtelt .hrs-mehr__block {
    background: none;
    border: none;
    border-radius: 0;
}
.hrs-mehr__geschachtelt .hrs-mehr__kopf { padding-left: 0; padding-right: 0; }
.hrs-mehr__geschachtelt .hrs-mehr__body { padding-left: 0; padding-right: 0; }

/* Der Abschied ist eine Karte wie die anderen. Bis P8 war er eine blasse
   Textzeile unter einem Strich — er soll zurueckhaltend sein, aber nicht
   aussehen, als gehoere er nicht dazu. */
.hrs-abschied {
    background: var(--hrs-flaeche-leise);
    border: 1px solid var(--hrs-border);
    border-radius: var(--hrs-radius);
    overflow: hidden;
    margin-top: 1.4rem;
}

/* BAU P8 — DER STILLE FOTOKNOPF. Kein gestrichelter Rahmen, kein
   Wolkensymbol, keine Megabyte: eine Zeile unter der Galerie. */
.hrs-uploader__knopf {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .75rem;
    padding: .55rem .9rem;
    min-height: 44px;
    border: 1px solid var(--hrs-border);
    border-radius: 999px;
    color: var(--hrs-text);
    font-size: .88rem;
    cursor: pointer;
}

/* ─── Bau P3a: Stammdaten, geschachtelte Klappe, aktives Pferd ──────────── */

/* Stammdaten als Anzeige. Zwei Spalten, damit die Bezeichnungen eine Kante
   bilden — eine Definitionsliste ohne Kante liest sich wie Fliesstext. */
.hrs-stammdaten { margin: 0 0 .9rem; }
.hrs-stammdaten__zeile {
    display: flex; gap: .6rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--hrs-border);
    font-size: .9rem;
}
.hrs-stammdaten__zeile:last-child { border-bottom: none; }
.hrs-stammdaten dt {
    flex: 0 0 8.5rem;
    color: var(--hrs-text-muted);
    font-weight: 400;
}
.hrs-stammdaten dd { margin: 0; overflow-wrap: anywhere; }

/* Die vier seltenen Bloecke unter "Mehr eintragen". Eingerueckt, damit die
   Schachtelung sichtbar ist und nicht wie eine zweite Ebene desselben Rangs
   aussieht. */
.hrs-mehr__geschachtelt {
    display: flex; flex-direction: column;
    gap: .25rem;
    padding-left: .75rem;
    border-left: 1px solid var(--hrs-border);
}

/* BAU P9 — hier standen .hrs-gcard--aktiv (Goldrahmen) und
   .hrs-gcard__aktiv-marke ("aktiv gewählt"). Beide sind ersatzlos weg:
   auf /horses stehen alle Pferde gleichwertig. */

/* "Pferd anlegen" UNTEN, nicht in der Kopfzeile. Ein Knopf oben konkurriert
   mit der Ueberschrift; unten steht er da, wo die Liste aufhoert und die
   Frage "und wenn noch eins dazukommt" entsteht. */
.hrs-liste__anlegen {
    display: flex; justify-content: center;
    margin-top: 1.5rem;
}

/* ─── Bau P2: EIN Verlauf statt zweier Listen ───────────────────────────── */

/* Kopfzeile des Blocks: Ueberschrift und Filter in EINER Zeile, solange sie
   nebeneinander passen. Darunter umbrechend — vier Chips und eine Ueberschrift
   brauchen bei 360 px mehr Platz, als eine Zeile hergibt. */
.hrs-verlaufblock__kopf {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .5rem .9rem;
    margin-bottom: .75rem;
}
.hrs-verlaufblock__kopf .hrs-abschnitt__titel { margin: 0; }

/* Der Filter darf schieben, die Ueberschrift nicht. */
.hrs-verlaufblock__filter {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-left: auto;
}

/* Die Achse. Kein Raster: eine Reihe, juengste oben. */
.hrs-verlauf-achse {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}

.hrs-verlauf-achse__punkt {
    position: relative;
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .7rem 0;
}

/* BAU P12j — DIE TRENNLINIEN SIND WEG.

   Bis P12i trug jede Zeile ein border-bottom. Das war richtig, solange es
   die einzige Gliederung war; zusammen mit der senkrechten Linie aus P12i
   las es sich als Leiter — waagrechte Sprossen ueber einem senkrechten
   Holm, und keine der beiden Linien meinte, was sie zeigte.

   DIE SENKRECHTE TRAEGT DIE GLIEDERUNG JETZT ALLEIN, samt den Marken als
   Punkten darauf. Genau so macht es die Vollansicht seit jeher
   (.hrs-timeline__item weiter oben: eine Linie am Marker, kein Rahmen an
   der Zeile) — der Hub hatte als einziger beides nebeneinander.

   DIE TRENNLINIE BLEIBT, WO SIE DIE EINZIGE IST: an den Stammdaten
   (.hrs-stammdaten__zeile) und in den Reitern. Dort gibt es keine
   senkrechte Linie, die ihre Aufgabe uebernaehme. */

/* BAU P12i — DIE SENKRECHTE LINIE.

   SIE IST NEU UND NICHT WIEDERHERGESTELLT. Der Verdacht lautete, ein
   spaeterer Lauf (P12f, die Tagesanker) habe sie zerlegt. Das stimmt nicht:
   .hrs-verlauf-achse__punkt::before hat es in dieser Datei nie gegeben, und
   der Achsenblock hat seit seinem ersten Commit (146efb0f, "ein Verlauf
   statt zweier Listen") keine einzige Aenderung gesehen. Was wie eine Achse
   aussah, waren die runden Marken und die Trennlinien zwischen den Zeilen.

   JE ZEILE EIN STUECK, NICHT EINE LINIE UEBER DIE GANZE LISTE. Eine Linie
   am <ol> koennte nur oben ansetzen; wo sie unten aufhoeren muesste, haengt
   an der HOEHE der letzten Zeile, und die kennt CSS nicht. Jedes Stueck
   laeuft deshalb von der Mitte der eigenen Marke bis in die Mitte der
   naechsten - das trifft sich lueckenlos, weil beide Enden aus derselben
   Rechnung kommen: .7rem Innenabstand plus 15 px halbe Marke, dazu die 1 px
   Trennlinie dazwischen.

   DAS LETZTE STUECK ENTFAELLT. Eine Linie, die unter dem letzten Punkt
   weiterlaeuft, verspricht einen weiteren.

   DIE MARKE MUSS POSITIONIERT SEIN, sonst laeuft die Linie UEBER sie
   hinweg statt dahinter: ein positioniertes ::before wird nach dem
   Hintergrund eines nicht positionierten Geschwisters gezeichnet. Mit
   position: relative kehrt sich das um. */
.hrs-verlauf-achse__punkt::before {
    content: "";
    position: absolute;
    left: 14px; width: 2px;
    top: calc(.7rem + 15px);
    /* BAU P12j — 15 STATT 16. Die 1 px kamen von der Trennlinie zwischen
       den Zeilen; ohne sie stossen die Zeilen unmittelbar aneinander, und
       ein Pixel zuviel liefe unter der naechsten Marke hervor. Wer die
       Trennlinie zurueckholt, holt auch dieses Pixel zurueck. */
    bottom: calc(-.7rem - 15px);
    background: var(--hrs-border);
}
.hrs-verlauf-achse__punkt:last-child::before { content: none; }

.hrs-verlauf-achse__marke {
    position: relative;
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hrs-flaeche-leise);
    color: var(--hrs-text-muted);
    font-size: .85rem;
}

.hrs-verlauf-achse__koerper { flex: 1; min-width: 0; }

.hrs-verlauf-achse__zeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--hrs-text-muted);
}

.hrs-verlauf-achse__datum { font-variant-numeric: tabular-nums; }

/* DER BEREICH IST DIE AUSKUNFT, DIE AUF EINER GEMISCHTEN ACHSE FEHLT.
   Deshalb bekommt er eine Plakette und nicht bloss ein weiteres graues Wort —
   das Auge soll die drei Sorten trennen koennen, ohne zu lesen. Die Farben
   kommen aus den bestehenden Marken; es entsteht kein neuer Farbraum. */
.hrs-verlauf-achse__bereich {
    padding: .05rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--hrs-border);
    font-size: .72rem;
    letter-spacing: .01em;
}
.hrs-verlauf-achse__bereich--erleben {
    border-color: var(--hrs-accent);
    color: var(--hrs-accent);
}
.hrs-verlauf-achse__bereich--training { color: var(--hrs-text); }
.hrs-verlauf-achse__bereich--versorgung { color: var(--hrs-text-muted); }

.hrs-verlauf-achse__art { overflow-wrap: anywhere; }

.hrs-verlauf-achse__titel {
    font-weight: 600; margin-top: .15rem;
    overflow-wrap: anywhere;
}

/* Der Text ist die Vorschau, nicht der Eintrag: zwei Zeilen, dann Schluss.
   Ohne Deckel schiebt eine lange Notiz die uebrigen Punkte aus dem Bild. */
.hrs-verlauf-achse__text {
    font-size: .87rem; color: var(--hrs-text-muted);
    margin-top: .1rem;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.hrs-verlauf-achse__bild {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--hrs-flaeche-leise);
}

@media (min-width: 720px) {
    .hrs-verlauf-achse__bild { width: 84px; height: 84px; }
}

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

/* BAU P12i — WAEHREND DER AUFNAHME.

   ZWEI ANZEIGEN, DIE VERSCHIEDENES SAGEN. Der Punkt links pulst, solange
   aufgenommen wird — er ist an die Zeit gebunden, nicht an den Ton, und
   sagt deshalb nur "es laeuft". Der Balken rechts folgt dem gemessenen
   Ausschlag und sagt "es kommt etwas an". Fehlt der Pegel (mobiles Safari,
   kein AudioContext), fehlt der Balken; der Punkt bleibt.

   DIE ZEIT IN TABELLENZIFFERN, sonst ruckelt die Zeile bei jedem
   Sekundenwechsel — dieselbe Massnahme wie beim Datum der Zeitachse. */
.hrs-aufnahme {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .5rem;
    font-size: .85rem;
}
.hrs-aufnahme__punkt {
    flex: 0 0 auto;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--hrs-accent);
    animation: hrs-aufnahme-puls 1.4s ease-in-out infinite;
}
.hrs-aufnahme__zeit {
    font-variant-numeric: tabular-nums;
    color: var(--hrs-text);
}
.hrs-aufnahme__pegel {
    flex: 1 1 auto; min-width: 40px; max-width: 160px;
    height: 4px; border-radius: 999px;
    background: var(--hrs-flaeche-leise);
    overflow: hidden;
}
/* Die Breite kommt als Inline-Wert aus dem Formular; hier steht nur, wie
   ruhig sie ihm folgt. Ohne den Uebergang zuckte der Balken fuenfmal je
   Sekunde. */
.hrs-aufnahme__pegel-fuellung {
    display: block; height: 100%;
    background: var(--hrs-accent);
    transition: width .12s linear;
}
.hrs-aufnahme__ohne { color: var(--hrs-text-muted); font-size: .78rem; }

@keyframes hrs-aufnahme-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* Wer Bewegung abgestellt hat, bekommt einen ruhigen Punkt statt gar
   keiner Auskunft — er steht dann einfach da. */
@media (prefers-reduced-motion: reduce) {
    .hrs-aufnahme__punkt { animation: none; }
    .hrs-aufnahme__pegel-fuellung { transition: none; }
}

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

/* DIE REIHENFOLGE IST ABSICHT: die stille Fassung ueberschreibt
   .hrs-ablage__vorschau und muss deshalb DAHINTER stehen — gleiche
   Spezifitaet gibt es hier zwar nicht (der --still-Selektor ist
   spezifischer), aber ein Testfall schneidet den Vorschau-Block ueber
   seinen Selektortext aus, und der faende sonst zuerst die Ueberschreibung.
   Beide Gruende zeigen in dieselbe Richtung. */
/* BAU P12i — DIE STILLE FASSUNG, FUER DAS TRAININGSFORMULAR.

   Der gestrichelte Kasten ist beim MOMENT richtig: dort ist das Foto die
   Hauptsache, und die Flaeche ist das, worauf man es legt. Beim TRAINING
   ist er der groesste Block eines Formulars, in dem er zuletzt kommt - ein
   Kasten ueber die volle Breite mit Kamerasymbol und zwei Zeilen Text, fuer
   etwas, das man meistens nicht tut.

   DIESELBE FORM WIE DER UPLOADKNOPF AUS P8 (.hrs-uploader__knopf): eine
   Zeile mit Plus und Wort, 44 px hoch, damit sie am Telefon zu treffen ist.
   Kein zweiter Knopfstil - die Regel steht daneben und wird hier nur auf
   einen zweiten Ort angewandt.

   DER DATEIWAEHLER LIEGT AUCH HIER DECKUNGSGLEICH DARUEBER, also bleibt es
   bei EINEM Weg ins Formular. Was entfaellt, ist nur das Aussehen einer
   Ablageflaeche - Ziehen und Ablegen funktioniert weiter, es wird nur nicht
   mehr beworben. Am Telefon gibt es das ohnehin nicht. */
.hrs-ablage--still {
    display: block;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
}
.hrs-fotozeile {
    position: relative;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem;
    min-height: 44px;
    border: 1px solid var(--hrs-border);
    border-radius: 999px;
    color: var(--hrs-text);
    font-size: .88rem;
    cursor: pointer;
}
.hrs-fotozeile__rest {
    color: var(--hrs-text-muted); font-size: .78rem;
}
/* Die Vorschau steht UEBER der Zeile, nicht in ihr: die Zeile ist ein
   Knopf, kein Behaelter. */
.hrs-ablage--still .hrs-ablage__vorschau {
    justify-content: flex-start;
    margin-bottom: .5rem;
}