/* ===============================
   2. Eingabebereich (Radio + Textfeld)
=================================*/

.farbwahl-eingabegruppe{
margin: 10px 0 20px 0;
border-top: 1px solid #666;
padding: 10px 0 20px 0;
border-bottom: 1px solid #666;
}

.farbwahl-art {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.farbwahl-art label {
  cursor: pointer;
  font-weight: 500;
}

.farbwahl-art input[type="radio"] {
  margin-right: 0.25rem;
}

.farbwahl-text input {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ===============================
   3. Farbgruppen (RAL Übersicht)
=================================*/

.farbgruppen-grid.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.farbgruppen-button {
  height: 80px;
  font-weight: bold;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.farbgruppen-button:hover {
  border-radius: 0px;
  transform: scale(1.02);
  border: 2px solid #a20002;
}

/* Farbgruppenfarben (RAL Vorschau) */
.farbgruppen-button[data-gruppe="1000"] { background-color: #F6B600; color: #000; }
.farbgruppen-button[data-gruppe="2000"] { background-color: #F75E25; color: #fff; }
.farbgruppen-button[data-gruppe="3000"] { background-color: #AF2B1E; color: #fff; }
.farbgruppen-button[data-gruppe="4000"] { background-color: #926AA6; color: #fff; }
.farbgruppen-button[data-gruppe="5000"] { background-color: #354D73; color: #fff; }
.farbgruppen-button[data-gruppe="6000"] { background-color: #287233; color: #fff; }
.farbgruppen-button[data-gruppe="7000"] { background-color: #9EA0A1; color: #000; }
.farbgruppen-button[data-gruppe="8000"] { background-color: #6F4F28; color: #fff; }
.farbgruppen-button[data-gruppe="9000"] { background-color: #0A0A0A; color: #fff; }

.farbgruppen-liste,
#farbgruppen-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 80px));
  gap: 14px;
  justify-content: center;
}

.farbkachel {
  width: 80px;
  height: 80px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: pointer;
  transition: transform 0.2s ease, border-radius 0.2s ease;
}

.farbkachel:hover {
  border-color: #333;
  border-radius: 50%;
}

.farbkachel.selected {
  border-radius: 50%;
  transform: scale(1.1);
  border: 2px solid #a20002;
}



/* ===============================
   4. Vorschau (Mittelbereich)
=================================*/

.farbwahl-zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.farbwahl-vorschau-klein {
  display: flex;
  align-items: center;
  gap: 1rem;
margin-bottom: 20px;
}

.vorschau-kachel-haupt {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #666;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.farbwahl-auswahl-name {
  font-weight: bold;
  font-size: 1rem;
}

/* ===============================
   5. NCS Modul
=================================*/

/* Karussell wird „Container“: wir können cqw nutzen */
#karussell{
  container-type: inline-size;

  position: relative;
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  overflow: hidden; /* verhindert Rand-Kollisionen */
}

/* Alle Maße hängen an der Containerbreite */
#karussell{
  /* center wächst/schrumpft innerhalb sinnvoller Grenzen */
  --c: clamp(150px, 28cqw, 200px);

  /* near/far in Relation zum center */
  --n-w: clamp(90px, 18cqw, 120px);
  --n-h: clamp(150px, 26cqw, 190px);

  --f-w: clamp(36px, 8cqw, 50px);
  --f-h: clamp(140px, 24cqw, 180px);

  /* Offsets: abhängig vom verfügbaren Platz */
   --off-n: calc(clamp(90px, 22cqw, 160px) + 5px);
   --off-f: calc(clamp(140px, 34cqw, 240px) + 5px);
}

#karussell .farbkachel{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.5s ease;
  cursor: pointer;
}

/* Center */
#karussell .center{
  width: var(--c);
  height: var(--c);
  flex-direction: column;
  z-index: 5;
}

/* Nachbarn */
#karussell .near-left{
  width: var(--n-w);
  height: var(--n-h);
  transform: translateX(calc(var(--off-n) * -1)) scale(0.9);
  z-index: 4;
}
#karussell .near-right{
  width: var(--n-w);
  height: var(--n-h);
  transform: translateX(var(--off-n)) scale(0.9);
  z-index: 4;
}

/* Außen */
#karussell .far-left{
  width: var(--f-w);
  height: var(--f-h);
  transform: translateX(calc(var(--off-f) * -1)) scale(0.8);
  z-index: 3;
  opacity: 0.8;
}
#karussell .far-right{
  width: var(--f-w);
  height: var(--f-h);
  transform: translateX(var(--off-f)) scale(0.8);
  z-index: 3;
  opacity: 0.8;
}



#karussell .near-right:selected{
transform: scale(1.05);}

/* Vergleichskacheln */
.vergleichsreihe {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
}

.vergleichsblock {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vergleichskachel {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 5px;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
}

/* Buttons heller/dunkler/intensiver/blasser */
.ncs-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.ncs-buttons button {
  padding: 6px 10px;
  border: 1px solid #999;
  background: #f8f8f8;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ncs-buttons button:hover {
  background-color: #ddd;
}

/* Chevron-Symbole */
.chevron-ncs {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.chevron-ncs.rechts { transform: rotate(-45deg); }
.chevron-ncs.links  { transform: rotate(135deg); }

/* ===============================
   6. Freitext-Modul
=================================*/

/* Banner */
.freitext-banner {
  width: 100%;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 10px;
  border: 1px solid #999;
}

#freitext-banner-text {
  font-size: 20px;
  font-weight: bold;
}

#freitext-poetic {
  font-size: 14px;
  font-style: italic;
  margin-top: 6px;
  color: #333;
}

/* Freitext-Gitter */
#freitext-namen-grid,
#freitext-ral-grid,
#freitext-ncs-grid {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  gap: 12px;
  justify-content: center;
}

.farbkachel:hover {
  border-color: #333;
  transform: scale(1.05);
}



/* ===============================
   7. Hinweise & Hilfstexte
=================================*/

.ncs-hinweis {
  margin-top: 20px;
  border-top: 1px solid #999;
  padding-top: 10px;
  color: #666;
  font-size: 0.9em;
  text-align: center;
}
.rechts-modul h4{
margin-top: 20px;
border-top: 1px solid #999;
}


/* ===============================
   8. Responsive Anpassungen
=================================*/