/* TRIZ Consulting Group - Hausgestaltung fuer alle Werkzeuge
 *
 * Diese Datei liegt wortgleich in jedem Werkzeug-Repo. Wer sie aendert, aendert
 * alle Kopien: triz-standard-solutions, heatmap-web, FunctionModelValueAnalysis,
 * PatentClaimVisualizer.
 *
 * Farben nach dem Corporate Design (CD_2.pdf, Oktober 2015):
 * Primaer Blau #5b91c3 (Pantone 279), Grau #b1b3b4 (Cool Gray 7), Schwarz #1a171b.
 * Das CD-Blau traegt 3,34:1 gegen Weiss - genug fuer grosse Flaechen, zu wenig fuer
 * Schrift. Alles, was Text traegt, nimmt deshalb die abgedunkelte Stufe (5,30:1).
 *
 * Schrift: laut CD waere die digitale Schrift Source Sans Pro. Abweichend davon
 * gilt Calibri als Unternehmensschrift; Source Sans Pro steht als zweite Wahl.
 */

:root {
  --tcg-blau: #5b91c3;        /* CD-Primaerblau: Flaechen, Rahmen, Fokusring */
  --tcg-blau-text: #3d6f9e;   /* abgedunkelt: Links, Knoepfe, aktives Segment */
  --tcg-blau-hover: #2f5880;
  --tcg-blau-hauch: #eaf2f9;  /* sehr helle Fuellung fuer Hover-Zustaende */
  --tcg-grau: #b1b3b4;        /* CD-Grau, Fond */
  --tcg-schwarz: #1a171b;     /* CD-Schwarz, Fliesstext */
  --tcg-rahmen: #d8d8d8;      /* Titelbalken und neutrale Rahmen */
  /* Besser und schlechter. Das CD nennt als Signalfarben #679b1d gruen und
     #eb690b orange - beide tragen auf Weiss nur gut 3:1 und sind damit als
     Schrift zu hell. Wie beim Blau gilt deshalb: abgedunkelt fuer alles, was
     Text ist (5,3:1 und 6,5:1). */
  --tcg-gruen-text: #4e7716;
  --tcg-rot-text: #b3261e;
  --tcg-titel: #0B4C5F;       /* Schrift auf dem Titelbalken */
  --tcg-schrift: Calibri, "Source Sans Pro", "Segoe UI", system-ui,
                 -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--tcg-schrift);
  margin: 0;
  padding: 20px;
  background: #ffffff;
  color: var(--tcg-schwarz);
}

/* --- Kopf ---------------------------------------------------------------- */

/* Gilt fuer beide Bauformen: die Werkzeuge mit <header class="app-header"> und
   die mit einem .page-title-block darin. Ohne den zweiten Selektor faellt der
   Titel dort auf die Browser-Vorgabe zurueck und wirkt kleiner als nebenan. */
.app-header h1,
.page-title-block h1 {
  margin: 0 0 4px 0;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
}

.app-subtitle {
  margin: 0 0 14px 0;
  font-size: 0.9rem;
  color: #666;
}
.app-subtitle a { color: #666; text-decoration: none; }
.app-subtitle a:hover { text-decoration: underline; color: var(--tcg-blau-text); }

/* Kopfzeile: Titel links, rechts daneben das, was mit der eigentlichen Arbeit
   nichts zu tun hat - Hilfe, Sprache, Feedback. So sind diese Knoepfe aus dem
   Weg und stehen in allen Werkzeugen an derselben Stelle. Bedienelemente, die
   zur Sache gehoeren, kommen darunter in eine .header-controls-Zeile. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 14px;
}

.page-title-block { flex: 1 1 auto; }

.page-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.help-link {
  color: var(--tcg-blau-text);
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tcg-blau-text);
  border-radius: 4px;
}
.help-link:hover { background-color: var(--tcg-blau-text); color: #fff; }

/* --- Bedienelemente ------------------------------------------------------ */

.control { display: flex; align-items: center; gap: 8px; }
.control label { font-weight: bold; }
.control select {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  background: #fff;
  cursor: pointer;
}
.control select:focus {
  outline: none;
  border-color: var(--tcg-blau);
  box-shadow: 0 0 0 2px rgba(91, 145, 195, 0.35);
}

/* Segmentschalter: zwei oder drei Knoepfe, einer davon aktiv */
.screen-toggle {
  display: flex;
  border: 1px solid var(--tcg-blau-text);
  border-radius: 4px;
  overflow: hidden;
}
.screen-toggle button {
  padding: 0.45rem 0.9rem; border: none; background: #fff; color: var(--tcg-blau-text);
  font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.screen-toggle button.current { background: var(--tcg-blau-text); color: #fff; }
.screen-toggle button:hover:not(.current) { background: var(--tcg-blau-hauch); }

/* --- Karten -------------------------------------------------------------- */

.panel {
  border: 1px solid var(--tcg-rahmen);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.panel-title {
  margin: 0;
  padding: 10px 12px;
  background: var(--tcg-rahmen);
  color: var(--tcg-titel);
  font-size: 1rem;
  font-weight: 700;
}

.panel-content {
  padding: 10px;
  overflow-y: auto;
  max-height: 46vh;
  flex: 1;
}

/* --- Info-Symbol --------------------------------------------------------- */
/* Das kleine runde i hinter einer Ueberschrift, das den Erklaertext als
   title-Tooltip traegt. Stammt aus Function Model und Patent Claim Visualizer,
   wo es sich wortgleich doppelte. */

.info-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: var(--tcg-blau-text);
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  cursor: help;
  vertical-align: middle;
  position: relative;
}

.info-icon::before {
  content: "i";
}

.info-icon:hover {
  background-color: var(--tcg-blau-hover);
}

/* --- Quellenleiste ------------------------------------------------------- */

.sources-bar {
  margin-top: 16px;
  padding: 12px 14px;
  border-top: 1px solid #e6e6e6;
  color: #777;
}
.sources-title {
  margin: 0 0 6px 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #999;
}

.sources-list { margin: 0; padding-left: 16px; font-size: 0.78rem; line-height: 1.5; }
.sources-list li { margin-bottom: 3px; }
.sources-list a { color: var(--tcg-blau-text); text-decoration: none; }
.sources-list a:hover { text-decoration: underline; }
.sources-note { color: #999; }