/* ================================
   GLOBAL / GRUNDLAYOUT
   ================================ */

/* Gesamte Charakterbogen-Fläche */
.charsheet {
  font-family: Arial, sans-serif;
  font-size: 12px;
  background: #d4f2f5;         /* türkisblauer Gesamt-Hintergrund */
  color: #000;                 /* Standardschrift: schwarz */
  padding: 8px;
}

/* Haupt-Container der neuen Version */
.sheet-ai2 {
  max-width: 1250px;
  margin: 0 auto;
  padding: 8px;
}

/* Überschriften in Gold */
.charsheet h1,
.charsheet h2,
.charsheet h3,
.sheet-ai2-block-title {
  color: #d4af37;              /* goldener Farbton */
}

/* Standardtext explizit schwarz halten */
.charsheet p,
.charsheet span,
.charsheet label,
.charsheet td,
.charsheet th {
  color: #000;
}

/* ================================
   TABS (Seitenumschaltung)
   ================================ */

.sheet-ai2-tab {
  margin-right: 8px;
}

/* Seiten standardmäßig ausblenden */
.sheet-ai2-page {
  display: none;
  margin-top: 6px;
  padding: 8px;
  background: #fdfcf8;         /* helles „Karten“-Beige */
  border: 1px solid #b0c4c7;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Sichtbare Seite je nach Tab */
.sheet-ai2-tab1:checked ~ .sheet-ai2-page1 { display: block; }
.sheet-ai2-tab2:checked ~ .sheet-ai2-page2 { display: block; }
.sheet-ai2-tab3:checked ~ .sheet-ai2-page3 { display: block; }
.sheet-ai2-tab4:checked ~ .sheet-ai2-page4 { display: block; }
.sheet-ai2-tab5:checked ~ .sheet-ai2-page5 { display: block; }

/* ================================
   BLOECKE / KARTEN
   ================================ */

.sheet-ai2-block {
  border: 1px solid #c7d3d6;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: #ffffff;          /* heller Block auf beigem Seiten-Hintergrund */
}

.sheet-ai2-block-title {
  font-weight: bold;
  font-size: 0.95em;
  border-bottom: 1px solid #d9d9d9;
  margin: -2px -4px 4px -4px;
  padding: 2px 4px;
}

/* ================================
   GRIDS
   ================================ */

.sheet-ai2-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.sheet-ai2-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
}

.sheet-ai2-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
}

/* ================================
   LABELS & FELDER
   ================================ */

.sheet-ai2-block label {
  display: block;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 2px;
}

.sheet-ai2-block input[type="text"],
.sheet-ai2-block input[type="number"],
.sheet-ai2-block textarea,
.sheet-ai2-block select {
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  padding: 2px 3px;
  margin-top: 1px;
  border: 1px solid #b8c2c5;
  border-radius: 3px;
  background: #fdfdfd;
  color: #000;
}

.sheet-ai2-block textarea {
  min-height: 40px;
  resize: vertical;
}

/* ================================
   TABELLEN / ZEILEN (Fertigkeiten etc.)
   ================================ */

/* „Tabelle“ als Container */
.sheet-ai2-table {
  width: 100%;
}

/* Jede Zeile wird ein Flex-Container */
.sheet-ai2-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
}

/* Spalten gleichmäßig verteilen */
.sheet-ai2-row > span {
  flex: 1 1 0;
}

/* Header-Zeile */
.sheet-ai2-row.sheet-ai2-header > span {
  font-weight: bold;
  border-bottom: 1px solid #b0b0b0;
  padding-bottom: 2px;
}

/* Inputs/Selects in Tabellen vollbreit */
.sheet-ai2-row input,
.sheet-ai2-row select,
.sheet-ai2-row textarea {
  width: 100%;
  box-sizing: border-box;
}

/* ================================
   ROLL-BUTTONS & SONSTIGES
   ================================ */

.sheet-ai2 button[type="roll"],
.sheet-ai2 button[type="action"] {
  width: 100%;
  font-size: 11px;
  padding: 2px;
  border-radius: 3px;
  border: 1px solid #a0b5c0;
  background: #e0f2f7;
  color: #000;
  cursor: pointer;
}

.sheet-ai2 button[type="roll"]:hover,
.sheet-ai2 button[type="action"]:hover {
  background: #cbe6f0;
}

/* Zustände (Checkbox-Zeile auf Seite 2) */
.sheet-ai2-conditions label {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 2px;
  font-weight: normal;
}

.sheet-ai2-conditions input[type="checkbox"] {
  margin-right: 2px;
}

/* ================================
   ALTES TAB-GERUEST .sheet-ai
   (falls noch im HTML, schlicht halten)
   ================================ */

.sheet-ai {
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 5px;
}

.sheet-ai .sheet-tab {
  margin: 4px 4px 0 0;
}

.sheet-page {
  display: none;
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #999;
}

input.sheet-tab1:checked ~ .sheet-page1 { display: block; }
input.sheet-tab2:checked ~ .sheet-page2 { display: block; }
input.sheet-tab3:checked ~ .sheet-page3 { display: block; }
input.sheet-tab4:checked ~ .sheet-page4 { display: block; }
input.sheet-tab5:checked ~ .sheet-page5 { display: block; }

/* Mindestbreite für Text- und Zahlenfelder,
   damit sie nie super schmal werden */
.sheet-ai2-block input[type="text"],
.sheet-ai2-block input[type="number"] {
  min-width: 80px;   /* bei Bedarf auf 100px erhöhen */
}
/* Vorschau der Spieler-Flagge */
.sheet-flag-preview {
  margin-top: 4px;
  text-align: center;
}

.sheet-flag-preview img {
  max-width: 100%;
  max-height: 80px;              /* Höhe bei Bedarf anpassen */
  border: 1px solid #b8c2c5;
  border-radius: 3px;
  background: #fdfdfd;
}

/* ===== Ende Adventure Islands – V2 (CSS) ===== */