@charset "UTF-8";
/* ==================================================================
   phenome.css - NBRP-Rat Rat Phenome Database, Diagrammseite (/nbr/phenome)
   Gleiche Farben und Formen wie /nbr/strains und /nbr/strainsx.
   Rahmen (Kopf, Menü, Knöpfe, Fuß): ../nbrp-ui/nbrp.css
   Breiten: >= 1000 px PC | 720-999 px Tablet | < 720 px Telefon
   ================================================================== */

:root {
  --nbr-red:       #8b2a2c;
  --nbr-red-text:  #e5e5e5;
  --nbr-data:      #e6e6e6;
  --nbr-alt:       #e1d8d8;
  --nbr-text:      #383838;
  --nbr-link:      #700002;
  --nbr-hover:     #007038;
  --nbr-dark:      #848284;
  --ph-blue:       #4b5a7a;
}

/* ---------- Seite ---------- */
body { font-family: Tahoma, Verdana, "Meiryo", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; line-height: 1.4; color: #333333; }
.nbrp-content > .nbr-page { max-width: none; padding: 0 0 20px; }
a:link, a:visited { color: var(--nbr-link); text-decoration: none; }
a:hover, a:active, a:focus-visible { color: var(--nbr-hover); }
table, th, td, input, select, button { font-family: inherit; }
p { margin: 0 0 10px; }

/* ---------- Unternavigation (wie strainsx) ---------- */
.nbr-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; }
.nbr-subnav-cap { font-weight: bold; color: var(--nbr-red); margin-right: 2px; white-space: nowrap; }
.nbr-subnav a { display: inline-block; padding: 4px 11px; border: 1px solid #cdc4c4; border-radius: 14px; background: #fff; color: #333; font-size: 13px; line-height: 1.3; }
.nbr-subnav a:hover, .nbr-subnav a:focus-visible { background: #f3e9e9; color: var(--nbr-red); border-color: #d9a9a9; }
.nbr-subnav a.is-current { background: var(--nbr-red); border-color: var(--nbr-red); color: #fff; font-weight: bold; }

/* ---------- Karte, roter Balken ---------- */
.nbr-card { display: block; margin: 0 0 16px; }
h1.nbr-bar { margin: 0; background: var(--nbr-red); color: var(--nbr-red-text); font-size: 16px; font-weight: bold; padding: 7px 12px; border-radius: 4px 4px 0 0; line-height: 1.3; }
.ph-body { background: var(--nbr-data); border-radius: 0 0 4px 4px; padding: 12px 14px 14px; }
.ph-intro { margin: 0 0 10px; }
.ph-error { display: block; color: #c00000; font-weight: bold; margin: 0 0 10px; }

/* ---------- Hilfe-Animation (Flash über Ruffle) ---------- */
.ph-helplink { white-space: nowrap; margin-left: 6px; }
.ph-play { display: inline-block; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin: 0 5px 0 0; vertical-align: -1px; }
.ph-help { margin: 0 0 14px; }
.ph-help-frame { width: 100%; max-width: 1057px; aspect-ratio: 1057 / 787; background: #fff; border: 1px solid var(--nbr-dark); border-radius: 3px; overflow: hidden; }
.ph-help-frame > * { width: 100%; height: 100%; display: block; }
.ph-help-note { margin: 4px 0 0; font-size: 12px; color: #666; }
.ph-help-note a { margin-left: 8px; font-size: 16px; font-weight: bold; }

/* ---------- drei Schritte ---------- */
.ph-cols { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 18px 24px; align-items: start; }
.ph-step { font-size: 14px; color: var(--nbr-red); margin: 0 0 10px; padding: 0 0 4px; border-bottom: 1px solid #cdbcbc; }
.ph-field { display: block; margin: 0 0 10px; }
.ph-cap { display: block; font-weight: bold; font-size: 12.5px; color: var(--nbr-text); margin: 0 0 3px; }
.ph-select { width: 100%; max-width: 100%; font-size: 14px; padding: 5px 6px; border: 1px solid var(--nbr-dark); border-radius: 2px; background: #fff; color: #222; box-sizing: border-box; }
.ph-select option:disabled { color: #999; }
.ph-radios label { margin: 0 0 0 2px; }
.ph-opt { display: inline-block; white-space: nowrap; margin: 0 12px 2px 0; }
.ph-radios input { vertical-align: -1px; }
.ph-vert label { display: inline; }
.ph-vert br { display: block; margin: 0; }
.ph-two { border-left: 3px solid #cdbcbc; padding-left: 10px; margin-top: 4px; }
.ph-m { color: #1a46c8; font-weight: bold; } .ph-f { color: #c01e3c; font-weight: bold; }
.is-off { opacity: .45; }

/* Japanische Fassung: "選択した系統のラベルを表示する" direkt unter den Darstellungsarten, Stammliste darunter (Naho, 15.10.2026);
   englisch bleibt die Reihenfolge Liste - Kästchen */
.nbrp-ja .ph-col-strains { display: flex; flex-direction: column; }
.nbrp-ja .ph-col-strains > .ph-strainbox { order: 2; }

/* Stammliste: Filter, alle/keine, Zähler; Kästchen in Spalten, Kasten rollt */
.ph-strainbox { background: #fff; border: 1px solid var(--nbr-dark); border-radius: 3px; margin: 0 0 10px; }
.ph-strainbox.is-dim { opacity: .55; }
.ph-straintools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-bottom: 1px solid #ddd; font-size: 13px; }
.ph-filter { width: 11em; font-size: 13px; padding: 4px 6px; border: 1px solid var(--nbr-dark); border-radius: 2px; }
.ph-count { margin-left: auto; color: #555; }
.ph-strainlist { max-height: 300px; overflow-y: auto; padding: 4px 8px 6px; }
.ph-strains { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px 10px; }
.ph-strains br { display: none; }
.ph-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.6; }
.ph-item input { vertical-align: -2px; margin: 0 4px 0 0; }
.ph-item.is-hidden { display: none; }
.ph-item.is-f label { color: #8a1a30; }

/* Knöpfe */
.ph-btn, .ph-tool { display: inline-block; background: var(--nbr-red); color: var(--nbr-red-text); border: 0; border-radius: 4px; padding: 7px 16px; font-weight: bold; font-size: 13px; cursor: pointer; line-height: 1.3; }
.ph-btn:hover { background: #a33a3c; }
.ph-btn-main { font-size: 15px; padding: 9px 22px; }
.ph-btn-2 { background: var(--ph-blue); }
.ph-btn-2:hover { background: #5d6e94; }
.ph-btn[disabled] { opacity: .5; cursor: default; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

/* ---------- Diagramm ---------- */
.ph-chartcard { background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.ph-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 8px 10px; background: var(--nbr-alt); border-radius: 4px 4px 0 0; }
.ph-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-nav .ph-btn { padding: 6px 12px; font-size: 13px; }
.ph-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-tool { background: #fff; color: #333; border: 1px solid #cdc4c4; border-radius: 14px; padding: 4px 11px; font-weight: normal; display: inline-flex; align-items: center; gap: 5px; }
.ph-tool:hover, .ph-tool:focus-visible { background: #f3e9e9; color: var(--nbr-red); border-color: #d9a9a9; }
.ph-tool.is-on { background: var(--nbr-red); color: #fff; border-color: var(--nbr-red); }
.ph-chart { padding: 8px; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.ph-chart img { display: block; max-width: 100%; height: auto; }           /* "einpassen": ganzes Diagramm sichtbar, Klickflächen werden mitgerechnet */
.ph-chart.is-1to1 img { max-width: none; }                                  /* "1:1": Originalgröße, Kasten rollt */
.ph-chart object, .ph-chart embed { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ph-chart.is-1to1 object, .ph-chart.is-1to1 embed { width: auto; max-width: none; height: auto; aspect-ratio: auto; }
.ph-hint { margin: 0; padding: 6px 10px 8px; font-size: 12px; color: #666; }

/* ---------- Tablet ---------- */
@media (max-width: 999px) {
  .ph-cols { grid-template-columns: 1fr 1fr; }
  .ph-col-strains { grid-column: 2; grid-row: 1 / span 2; }
  .ph-col-out { grid-column: 1; grid-row: 2; }
}
/* ---------- Telefon ---------- */
@media (max-width: 719px) {
  .ph-cols { grid-template-columns: 1fr; gap: 14px; }
  .ph-col-strains { grid-column: 1; grid-row: auto; }
  .ph-col-out { grid-column: 1; grid-row: auto; }
  .ph-strainlist { max-height: 230px; }
  .ph-strains { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ph-body { padding: 10px 10px 12px; }
  .ph-actions .ph-btn-main { flex: 1 1 auto; text-align: center; }
  .ph-toolbar { padding: 8px; }
  .ph-chart { padding: 4px; }
}

/* ---------- Druck: nur das Diagramm ---------- */
@media print {
  @page { size: landscape; margin: 10mm; }
  .nbrp-header, #nbrpNav, #nbrpTabs, .nbrp-footer, .nbr-subnav, .ph-settings, .ph-toolbar, .ph-hint, .ph-help { display: none !important; }
  .nbrp-page, .nbrp-content, .nbr-page { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .ph-chartcard { border: 0; }
  .ph-chart { overflow: visible !important; padding: 0 !important; }
  .ph-chart img, .ph-chart object, .ph-chart embed { max-width: 100% !important; width: 100% !important; height: auto !important; }
}