/* Pattern Visualizer Style Cards */
/* test*/
/* .fpSwatch { box-shadow: 0 0 0 4px lime !important; }*/


.fpStyleCardGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 16px;
  max-width: 800px;
}


.fpStyleCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  min-height: 110px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border: 2px solid #e0e0e0;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
  filter: grayscale(0.2);
  transition: border 0.2s, box-shadow 0.2s, opacity 0.2s, filter 0.2s;
}

.fpStyleCard.active {
  border: 3px solid #e60000;
  box-shadow: 0 4px 16px rgba(30,30,30,0.18);
  opacity: 1;
  filter: none;
}

.fpStyleCardImg {
  width: 90px;
  height: 90px;
  background: #f3f3f3;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: #bbb;
}

.fpStyleCardTitle {
  font-weight: 600;
  font-size: 1em;
  margin: 10px 0 4px 0;
  text-align: center;
}

.fpStyleCardDesc {
  font-size: 0.95em;
  color: #666;
  text-align: center;
  margin-bottom: 10px;
}

.fpStyleCard .fpStyleCardCheck {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  border-radius: 50%;
  color: #1ec94c;
  font-size: 1.5em;
  box-shadow: 0 1px 4px rgba(30,201,76,0.12);
  z-index: 2;
  padding: 2px 4px 2px 4px;
}

.fpStyleCard.active .fpStyleCardCheck {
  display: block;
}
  #fp-pattern-visualizer, #fp-pattern-visualizer * { box-sizing: border-box; }
    .fpPaletteWrap{ margin-top:0; padding:0 0 10px 0; border-radius:12px; background:#fff; }
    .fpPaletteGrid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .fpSwatch{ width:26px; height:26px; border-radius:999px; border:1px solid rgba(0,0,0,.18); cursor:default; position:relative; pointer-events:none; }
    .fpSwatchOrder{ position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:999px; background:#111; color:#fff; font-size:11px; line-height:16px; text-align:center; pointer-events:none; }
    .fpSwatch:hover{ transform: scale(1.06); }
    .fpSwatch[aria-selected="true"]{ outline:3px solid #111; outline-offset:2px; }
    .fpMonoHint{ font-size:12px; opacity:.7; margin-top:6px; }
    .fpSwatchLabel{ font-size:12px; opacity:.75; margin-top:6px; }
    .fpPaletteHint{ font-size:12px; opacity:.7; margin-top:6px; }
    .fpSliderRow { margin-top:12px; }
    .fpSliderRow label { display:block;font-size:15px;opacity:.8;margin-bottom:4px; }
    .fpSliderRow .fpTicks { display:flex;justify-content:space-between;font-size:12px;opacity:.7; }
    .fpHelp { font-size:12px; opacity:.7; margin-top:6px; }
    .fpBtnMini { border:0px solid #ccc;border-radius:10px;background:#fff;padding:6px 10px;cursor:pointer; }
    .fpBtnMini:hover { border-color:#999; }
    .fpRowActions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
    .fpHidden { display:none !important; }
    .fpBusy { opacity:.65; pointer-events:none; }
    .fpGenInner { display:inline-flex; align-items:center; gap:8px; }
    .fpHourglass { display:inline-block; transform-origin:center; animation: fpPulse 0.9s ease-in-out infinite; }
    @keyframes fpPulse { 0% { transform: scale(1); opacity:.55; } 50% { transform: scale(1.15); opacity:1; } 100% { transform: scale(1); opacity:.55; } }

    #fpGen {
      padding: 14px 36px;
      font-size: 20px;
      border-radius: 18px;
      background: linear-gradient(90deg,#3a8dde 0%,#6be585 100%);
      color: #fff;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(60,60,60,0.10);
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
    }
    #fpGen:hover {
      background: linear-gradient(90deg,#2e6bb2 0%,#4fd18a 100%);
      box-shadow: 0 6px 24px rgba(60,60,60,0.16);
    }
    #fpGen:active {
      background: linear-gradient(90deg,#22508a 0%,#3cae6b 100%);
      box-shadow: 0 2px 8px rgba(60,60,60,0.10);
    }

    .fpStyleChip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1.5px solid #e0e0e0;
      background: #fafafa;
      font-size: 13px;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s, background 0.15s;
      line-height: 1.3;
    }
    .fpStyleChip.active {
      border-color: #e60000;
      background: #fff5f5;
    }
    .fpStyleChip:hover {
      border-color: #bbb;
      background: #f5f5f5;
    }
    .fpStyleChipDot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .fpSize {
      padding: 10px 18px;
      font-size: 16px;
      border-radius: 10px;
      border: 1.5px solid #b7d3e8;
      background: #fafdff;
      color: #222;
      margin-right: 6px;
      margin-bottom: 4px;
      box-shadow: 0 2px 8px rgba(60,60,60,0.06);
      transition: border 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
      cursor: pointer;
      outline: none;
    }
    .fpSize:hover {
      border: 1.5px solid #3a8dde;
      background: #f3faff;
    }
    .fpSize:active {
      background: #e6f7ff;
    }
    .fpSize[style*="background: #111"] {
      background: linear-gradient(90deg,#3a8dde 0%,#6be585 100%) !important;
      color: #fff !important;
      border: 1.5px solid #3a8dde !important;
      box-shadow: 0 4px 16px rgba(58,141,222,0.10);
    }
#fp-pattern-visualizer, #fp-pattern-visualizer * { box-sizing: border-box; }
    .fpPaletteWrap{ margin-top:0; padding:0 0 10px 0; border-radius:12px; background:#fff; }
    .fpPaletteGrid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .fpSwatch{ width:26px; height:26px; border-radius:999px; border:1px solid rgba(0,0,0,.18); cursor:default; position:relative; pointer-events:none; }
    .fpSwatchOrder{ position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:999px; background:#111; color:#fff; font-size:11px; line-height:16px; text-align:center; pointer-events:none; }
    .fpSwatch:hover{ transform: scale(1.06); }
    .fpSwatch[aria-selected="true"]{ outline:3px solid #111; outline-offset:2px; }
    .fpMonoHint{ font-size:12px; opacity:.7; margin-top:6px; }
    .fpSwatchLabel{ font-size:12px; opacity:.75; margin-top:6px; }
    .fpPaletteHint{ font-size:12px; opacity:.7; margin-top:6px; }
    .fpSliderRow { margin-top:12px; }
    .fpSliderRow label { display:block;font-size:15px;opacity:.8;margin-bottom:4px; }
    .fpSliderRow .fpTicks { display:flex;justify-content:space-between;font-size:12px;opacity:.7; }
    .fpHelp { font-size:12px; opacity:.7; margin-top:6px; }
    .fpBtnMini { border:0px solid #ccc;border-radius:10px;background:#fff;padding:6px 10px;cursor:pointer; }
    .fpBtnMini:hover { border-color:#999; }
    .fpRowActions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
    .fpHidden { display:none !important; }
    .fpBusy { opacity:.65; pointer-events:none; }
    .fpGenInner { display:inline-flex; align-items:center; gap:8px; }
    .fpHourglass { display:inline-block; transform-origin:center; animation: fpPulse 0.9s ease-in-out infinite; }
    @keyframes fpPulse { 0% { transform: scale(1); opacity:.55; } 50% { transform: scale(1.15); opacity:1; } 100% { transform: scale(1); opacity:.55; } }

    #fpGen {
      padding: 14px 36px;
      font-size: 20px;
      border-radius: 18px;
      background: linear-gradient(90deg,#3a8dde 0%,#6be585 100%);
      color: #fff;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(60,60,60,0.10);
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
    }
    #fpGen:hover {
      background: linear-gradient(90deg,#2e6bb2 0%,#4fd18a 100%);
      box-shadow: 0 6px 24px rgba(60,60,60,0.16);
    }
    #fpGen:active {
      background: linear-gradient(90deg,#22508a 0%,#3cae6b 100%);
      box-shadow: 0 2px 8px rgba(60,60,60,0.10);
    }

    .fpStyleChip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1.5px solid #e0e0e0;
      background: #fafafa;
      font-size: 13px;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s, background 0.15s;
      line-height: 1.3;
    }
    .fpStyleChip.active {
      border-color: #e60000;
      background: #fff5f5;
    }
    .fpStyleChip:hover {
      border-color: #bbb;
      background: #f5f5f5;
    }
    .fpStyleChipDot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .fpSize {
      padding: 10px 18px;
      font-size: 16px;
      border-radius: 10px;
      border: 1.5px solid #b7d3e8;
      background: #fafdff;
      color: #222;
      margin-right: 6px;
      margin-bottom: 4px;
      box-shadow: 0 2px 8px rgba(60,60,60,0.06);
      transition: border 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
      cursor: pointer;
      outline: none;
    }
    .fpSize:hover {
      border: 1.5px solid #3a8dde;
      background: #f3faff;
    }
    .fpSize:active {
      background: #e6f7ff;
    }
    .fpSize[style*="background: #111"] {
      background: linear-gradient(90deg,#3a8dde 0%,#6be585 100%) !important;
      color: #fff !important;
      border: 1.5px solid #3a8dde !important;
      box-shadow: 0 4px 16px rgba(58,141,222,0.10);
    }
    .fpAreaBtn {
      padding: 4px 10px;
      border-radius: 8px;
      border: 1.5px solid #e0e0e0;
      background: #fff;
      color: #333 !important;
      font-size: 12px;
      cursor: pointer;
      opacity: 0.6;
      transition: border-color 0.15s, opacity 0.15s, background 0.15s;
    }
    .fpAreaBtn.active {
      border-color: #e60000;
      opacity: 1;
      background: #fff5f5;
    }
    .fpAreaBtn:hover {
      opacity: 0.85;
    }
    .fpAreaBtn.colored {
      opacity: 1;
      border-width: 1.5px;
      border-style: solid;
    }
    .fpAreaBtnDot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-left: 5px;
      vertical-align: middle;
      border: 1px solid rgba(0,0,0,0.2);
    }
    .fpPaintSwatch {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .fpPaintSwatch:hover {
      transform: scale(1.15);
    }
    .fpPaintSwatch.active {
      border-color: #111;
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
    }
    .fpTwoColWrap { display: flex; gap: 32px; align-items: flex-start; }
    .fpColLeft { flex: 0 0 340px; min-width: 260px; max-width: 380px; }
    .fpColRight { flex: 1 1 0; min-width: 0; }
    @media (max-width: 900px) {
      .fpTwoColWrap { flex-direction: column; gap: 0; }
      .fpColLeft, .fpColRight { max-width: 100%; width: 100%; }
    }

/* Theme-Override: Button-Schriftfarbe fest setzen */
#fp-pattern-visualizer button.fpAreaBtn,
#fp-pattern-visualizer button.fpAreaBtn.active,
#fp-pattern-visualizer button.fpAreaBtn.colored {
  color: #333 !important;
}

#fp-pattern-visualizer button.fpStyleChip,
#fp-pattern-visualizer button.fpStyleChip.active {
  color: #333 !important;
}