/* TCG Journal, Konto und Sammlung. Seit 27.09.2026.

   Nur fuer /konto/ und /sammlung/, geladen ueber tj_konto_kopf() in lib/konto.php.
   Keine neuen Farbwerte: jedes Paar hier steht schon in bin/kontrast-pruefen.py
   (tinte, tinte-leise, tinte-still auf karte und papier, akzent auf akzent-grund,
   warn auf warn-grund, rot und gruen-text auf karte). Keine fremden Schriften,
   keine Bilder von fremden Servern.

   Telefon zuerst: 360 bis 414 Pixel ohne Seitwaerts-Scrollen, jede Tippflaeche
   mindestens 44 Pixel hoch. Gemessen mit bin/auftritt-messen.py --seiten konto. */

.konto { padding-bottom: 1rem; }
.konto .aufmacher { padding-bottom: 1rem; }
.konto .aufmacher h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem); max-width: none; }
.konto-inhalt { display: grid; gap: 1.25rem; padding-bottom: 2rem; }

.konto-karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: clamp(1rem, 3vw, 1.5rem); min-width: 0;
}
.konto-karte > h2 { font-size: 1.125rem; margin: 0 0 .75rem; }
.konto-karte > :last-child { margin-bottom: 0; }

/* Hinweise nach einer Aktion: gruen fuer erledigt, gelb fuer Fehler im Formular. */
.meldung { border-radius: var(--radius); padding: .8rem 1rem; margin: 0; border: 1px solid var(--linie); background: var(--karte); }
.meldung-ok { border-left: 3px solid var(--gruen); }
.meldung-ok b { color: var(--gruen-text); }
.meldung-warn { background: var(--warn-grund); color: var(--warn); border-color: var(--warn-grund); }
.meldung-warn a { color: var(--warn); text-decoration: underline; }

/* Formulare */
.formular { display: grid; gap: 1rem; }
.formular-zeile { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .formular-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: grid; gap: .35rem; min-width: 0; }
.feld .feldname { margin: 0; }
.feld-hilfe { font-size: .8125rem; line-height: 1.45; color: var(--tinte-still); margin: 0; }
.feld-fehler { font-size: .875rem; line-height: 1.45; color: var(--rot); margin: 0; font-weight: 600; }
.eingabe[aria-invalid="true"] { border-color: var(--rot); }
select.eingabe { -webkit-appearance: none; appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat; }
textarea.eingabe { min-height: 5.5rem; resize: vertical; }
.haken { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; padding-top: .6rem; cursor: pointer; line-height: 1.4; }
.haken input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--akzent); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.knopfreihe form { margin: 0; }
.knopf-gefahr { background: var(--karte); border-color: var(--rot); color: var(--rot); }
.knopf-gefahr:hover { background: var(--rot); color: var(--karte); }
.knopf-schmal { min-height: 44px; padding: .45rem .85rem; font-size: .875rem; }
/* Das Lockfeld fuer Bots: fuer Menschen unsichtbar und nicht erreichbar, fuer Vorlesehilfen stumm. */
/* Note und Zertifikat nur, wenn eine Grading-Firma gewaehlt ist. Ohne :has() (aeltere
   Browser) bleiben beide Felder sichtbar, und der Server verwirft sie ohne Firma. */
.formular:has(#grading_firma option[value=""]:checked) .nur-slab { display: none; }
.lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Nur fuer Vorlesehilfen: eine Ueberschrift, die die Gliederung braucht, das Auge nicht. */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kennzahlen der Sammlung */
.wertkasten { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .wertkasten { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.wert-zahl { display: block; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em;
             line-height: 1.1; color: var(--tinte); font-variant-numeric: tabular-nums; }
.wert-name { display: block; font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
             color: var(--tinte-still); margin-bottom: .3rem; }
.wert-herkunft { font-size: .8125rem; line-height: 1.5; color: var(--tinte-still); margin: .45rem 0 0; }

/* Positionen als Liste statt Tabelle: eine Tabelle mit neun Spalten laeuft auf dem Telefon seitwaerts. */
.positionen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.position {
  display: grid; gap: .35rem .9rem; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .85rem 1rem;
}
.position-name { font-weight: 700; color: var(--tinte); overflow-wrap: anywhere; }
.position-name small { font-weight: 500; color: var(--tinte-still); font-size: .8125rem; }
.position-zeile { font-size: .875rem; color: var(--tinte-leise); overflow-wrap: anywhere; }
/* Die Wertspalte hat eine Hoechstbreite: ohne sie nahm "7,14 € je Stück, Cardmarket-Trendpreis"
   auf 360 Pixeln die ganze Zeile, und der Name stand mit drei Buchstaben je Zeile daneben
   (28.09.2026 an der Aufnahme gesehen; die Ueberlaufmessung meldet das nicht, es scrollt nichts). */
.position-werte { text-align: right; font-variant-numeric: tabular-nums; max-width: 11rem; }
@media (max-width: 480px) { .position-werte { max-width: 8.5rem; } }
.position-werte b { display: block; color: var(--tinte); }
.position-werte span { display: block; font-size: .8125rem; color: var(--tinte-still); }
.position-aktion { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.merkmal { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .55rem; border-radius: 999px;
           background: var(--papier-tief); color: var(--tinte-leise); font-size: .8125rem; font-weight: 550; }
.merkmal-slab { background: var(--akzent-grund); color: var(--akzent); }

/* Suche und Trefferliste beim Eintragen */
.suchzeile { display: flex; gap: .5rem; }
.suchzeile .eingabe { flex: 1 1 auto; min-width: 0; }
.treffer { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); overflow: hidden; }
.treffer li + li { border-top: 1px solid var(--linie); }
.treffer a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center;
             min-height: 56px; padding: .6rem 1rem; color: var(--tinte); }
.treffer a:hover { background: var(--papier); color: var(--tinte); }
.treffer b { overflow-wrap: anywhere; }
.treffer span { grid-column: 1; font-size: .8125rem; color: var(--tinte-still); overflow-wrap: anywhere; }
.treffer em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: .875rem; font-weight: 600; color: var(--akzent); }
.setwahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.setwahl a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
             background: var(--papier-tief); color: var(--tinte-leise); font-size: .875rem; font-weight: 550; }
.setwahl a:hover { background: var(--papier-tiefer); color: var(--tinte-leise); }
.gewaehlt { display: grid; gap: .2rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--akzent-grund); }
.gewaehlt b { color: var(--tinte); overflow-wrap: anywhere; }
.gewaehlt span { color: var(--tinte-leise); font-size: .875rem; }

/* Profil */
.angaben { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem 1rem; margin: 0; }
@media (min-width: 560px) { .angaben { grid-template-columns: 11rem minmax(0, 1fr); } }
.angaben dt { font-size: .8125rem; font-weight: 650; color: var(--tinte-still); padding-top: .15rem; }
.angaben dd { margin: 0 0 .5rem; color: var(--tinte); overflow-wrap: anywhere; }

.konto-fuss { margin-top: 2rem; padding-block: 1.25rem; }
.konto-fuss-links { display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; }
.konto-fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Datenschutz im Konto: Tabelle nur ab 700 Pixeln, darunter untereinander. */
.datentabelle { width: 100%; }
@media (max-width: 699px) {
  .datentabelle thead { display: none; }
  .datentabelle tr { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
  .datentabelle td { padding: 0; border: 0; }
  .datentabelle td:first-child { font-weight: 700; }
}

/* ---------------------------------------------------------------------------
   Uebersicht, Sets und Wunschliste, seit 28.09.2026. Dieselben Farbpaare wie oben:
   tinte, tinte-leise, tinte-still auf karte und papier, akzent auf akzent-grund,
   gruen-text und rot auf karte. Balken und Linien sind keine Schrift; sie tragen
   Akzent auf papier-tief. Telefon zuerst, gemessen mit bin/auftritt-messen.py.
   --------------------------------------------------------------------------- */

/* Reiter: Uebersicht, Sets, Wunschliste. Links mit aria-current, kein Skript. */
.reiter { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1.1rem; border-bottom: 1px solid var(--linie); }
.reiter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; margin-bottom: -1px;
            color: var(--tinte-leise); font-weight: 600; font-size: .9375rem; border-bottom: 2px solid transparent; }
.reiter a:hover { color: var(--tinte); }
.reiter a[aria-current] { color: var(--akzent); border-bottom-color: var(--akzent); }

/* Vier Kennzahlen: auf dem Telefon zwei mal zwei, der Wert ueber die ganze Breite. */
.wertkacheln { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wertkachel { min-width: 0; }
.wertkachel-gross { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .wertkacheln { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .wertkachel-gross { grid-column: auto; }
}
.plus { color: var(--gruen-text); }
.minus { color: var(--rot); }
.marktzeile { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }

/* Kopf einer Karte mit Auswahl rechts, auf dem Telefon untereinander. */
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.karte-kopf h2 { margin: 0; font-size: 1.125rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 999px;
           background: var(--papier-tief); color: var(--tinte-leise); font-size: .875rem; font-weight: 600; }
.chips a:hover { background: var(--papier-tiefer); color: var(--tinte); }
.chips a[aria-current] { background: var(--akzent-grund); color: var(--akzent); }

/* Wertverlauf: SVG in voller Breite, Seitenverhaeltnis fest, Betraege als HTML darueber. */
.verlauf-rahmen { position: relative; }
.verlauf { display: block; width: 100%; height: auto; overflow: visible; }
.verlauf-raster { stroke: var(--linie); stroke-width: 1; }
.verlauf-wert { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linejoin: round; }
.verlauf-einstand { fill: none; stroke: var(--tinte-still); stroke-width: 1.5; stroke-dasharray: 5 4; }
.verlauf-punkt { fill: var(--karte); stroke: var(--akzent); stroke-width: 2; }
.verlauf-skala span { position: absolute; left: 0; transform: translateY(-110%); font-size: .75rem; line-height: 1.2;
                      color: var(--tinte-still); background: var(--karte); padding-right: .3rem; font-variant-numeric: tabular-nums; }
.verlauf-achse { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinte-still); margin-top: .25rem; }
.legende { display: flex; gap: 1rem; margin: .6rem 0 0; font-size: .8125rem; color: var(--tinte-leise); }
.legende span::before { content: ""; display: inline-block; width: 1.1rem; height: 0; margin-right: .4rem; vertical-align: middle;
                        border-top: 2.5px solid var(--akzent); }
.legende .legende-einstand::before { border-top: 1.5px dashed var(--tinte-still); }
.aufklappen { margin-top: .8rem; }
.aufklappen summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--akzent); }
.tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.zahlen td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Raster fuer die Karten darunter */
.raster-zwei, .raster-drei { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .raster-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.klein-titel { font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-still); margin: 1.1rem 0 .5rem; }
.kurzzahl { margin: 0 0 .4rem; font-size: 1.125rem; color: var(--tinte); }
.kurzzahl b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }

/* Rangliste der wertvollsten Positionen */
.rangliste { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; counter-reset: rang; }
.rangliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: baseline;
                padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.rangliste li:last-child { border-bottom: 0; }
.rang-name a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--tinte); overflow-wrap: anywhere; }
.rang-name small { display: block; font-size: .8125rem; color: var(--tinte-still); margin-top: -.5rem; }
.rangliste b { font-variant-numeric: tabular-nums; color: var(--tinte); }

/* Balken: Anteil am Wert, Fortschritt je Set, Seltenheit */
.balkenliste { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.balkenliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: baseline; }
.balkenliste-eng { gap: .45rem; }
.balken-name { min-width: 0; overflow-wrap: anywhere; color: var(--tinte); font-size: .9375rem; }
.balken-name a { color: var(--tinte); display: inline-flex; min-height: 44px; align-items: center; }
.balken-name small { color: var(--tinte-still); font-size: .8125rem; }
.balkenliste b { font-variant-numeric: tabular-nums; color: var(--tinte); font-size: .9375rem; }
.balken { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: var(--papier-tief); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 999px; background: var(--akzent); }
.position .balken { margin-top: .5rem; }
.balken-gross { height: 10px; margin-top: .75rem; max-width: 40rem; }

/* Sets: Liste und Karten eines Sets */
.setliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.setliste .position-name a { color: var(--tinte); display: inline-flex; min-height: 44px; align-items: center; }
.kartenzeilen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.kartenzeile { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .15rem .75rem; align-items: center; padding: .55rem .9rem; }
.kartenzeile + .kartenzeile { border-top: 1px solid var(--linie); }
.kz-nr { font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--tinte-still); font-weight: 600; }
.kz-name { color: var(--tinte); overflow-wrap: anywhere; }
.kz-name small { display: block; font-size: .8125rem; color: var(--tinte-still); }
.kz-stand { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
@media (min-width: 640px) {
  .kartenzeile { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
  .kz-stand { grid-column: 3; justify-content: flex-end; }
}
.ist-da .kz-name { font-weight: 650; }
.merkmal-da { background: var(--akzent-grund); color: var(--gruen-text); }

/* Wunschliste: Zielpreis direkt in der Zeile aendern */
.zielform { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.eingabe-schmal { width: 7.5rem; min-height: 44px; }
.wunsch-erreicht { border-left: 3px solid var(--gruen); }