/**
 * Wartungshinweis:
 * Sämtliche öffentlichen Selektoren tragen das Präfix .pwg-. Neue Regeln sollen
 * innerhalb dieser Kapselung bleiben. Responsive und Fokus-Regeln nicht entfernen,
 * da sie Teil der Tastatur- und Mobilbedienbarkeit sind.
 */
/**
 * Frontend-Styles für den Passwortgenerator.
 *
 * Die Styles sind vollständig lokal und nutzen Systemschriften. Es werden keine
 * Google Fonts oder externen CSS-Dateien eingebunden. Die Klassen sind mit dem
 * Prefix .pwg- gekapselt, damit sie möglichst wenig mit Themes kollidieren.
 */
/*
 * Gliederung:
 * 1. Grundcontainer und Layout
 * 2. Formularelemente und Presets
 * 3. Ergebnis- und Sicherheitsanzeige
 * 4. Modusspezifische Elemente
 * 5. Responsive Anpassungen und Barrierefreiheit
 *
 * Spätere Regeln besitzen teilweise bewusst höhere Spezifität, um stark
 * meinungsbildende Theme-Styles zu neutralisieren, ohne !important flächig
 * einsetzen zu müssen.
 */


/* Hauptcontainer: begrenzt Breite, setzt Grundfarben und Kapselung. */
.pwg-box {
  --pwg-bg: #ffffff;
  --pwg-panel: #f7f8fa;
  --pwg-border: #d8dee8;
  --pwg-text: #1f2937;
  --pwg-muted: #6b7280;
  --pwg-radius: 18px;
  --pwg-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);

  box-sizing: border-box;
  width: min(100%, 980px);
  margin: 2rem auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--pwg-border);
  border-radius: var(--pwg-radius);
  background: var(--pwg-bg);
  color: var(--pwg-text);
  box-shadow: var(--pwg-shadow);
}

.pwg-box *,
.pwg-box *::before,
.pwg-box *::after {
  box-sizing: border-box;
}

/* Kopfbereich mit Titel und Untertitel. */
.pwg-head {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.pwg-title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.pwg-subtitle {
  margin: .35rem 0 0;
  color: var(--pwg-muted);
  font-size: .98rem;
}

/* Zweispaltiges Layout: Einstellungen links, Presets rechts. */
.pwg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1.25rem;
  align-items: start;
}

/* Kartenoptik für einzelne Bedienbereiche. */
.pwg-panel {
  padding: 1rem;
  border: 1px solid var(--pwg-border);
  border-radius: 14px;
  background: var(--pwg-panel);
}

.pwg-panel-title {
  margin: 0 0 .85rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Responsives Formularraster. */
.pwg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pwg-field {
  display: block;
  margin: 0;
}

.pwg-label-text {
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
  font-size: .92rem;
}

.pwg-box input[type="text"],
.pwg-box input[type="number"],
.pwg-box select {
  width: 100%;
  max-width: none;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--pwg-border);
  border-radius: 10px;
  background: #fff;
  color: var(--pwg-text);
  font: inherit;
}

.pwg-box input:focus,
.pwg-box select:focus {
  outline: 2px solid rgba(37, 99, 235, .22);
  border-color: #2563eb;
}

.pwg-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem .85rem;
  margin-top: 1rem;
}

.pwg-check {
  display: flex;
  gap: .5rem;
  align-items: center;
  min-height: 38px;
  padding: .45rem .55rem;
  border: 1px solid var(--pwg-border);
  border-radius: 10px;
  background: #fff;
  font-size: .94rem;
}

.pwg-presets {
  display: grid;
  gap: .6rem;
}

.pwg-preset {
  width: 100%;
  min-height: 42px;
  padding: .65rem .8rem;
  border: 1px solid var(--pwg-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pwg-text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.pwg-preset:hover {
  border-color: #2563eb;
  background: #eef4ff;
}

.pwg-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pwg-box .pwg-generate,
.pwg-box .pwg-copy {
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.pwg-box .pwg-generate {
  border: 1px solid #1d4ed8;
  background: #2563eb;
  color: #fff;
}

.pwg-box .pwg-copy {
  border: 1px solid var(--pwg-border);
  background: #fff;
  color: var(--pwg-text);
}

/* Ergebnisbereich mit Passwortfeld, Kopierbutton und Stärke. */
/* Ergebnisbereich: Ausgabe, Kopieren und Statusmeldung. */
.pwg-result-wrap {
  margin-top: 1rem;
}

.pwg-result {
  width: 100%;
  min-height: 52px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: .03em;
}

.pwg-message {
  min-height: 1.4em;
  margin: .65rem 0 0;
  color: var(--pwg-muted);
}

/* Responsive Anpassungen für kleinere Bildschirme. */
@media (max-width: 820px) {
  /* Zweispaltiges Layout: Einstellungen links, Presets rechts. */
.pwg-layout {
    grid-template-columns: 1fr;
  }

  .pwg-grid,
  .pwg-checks {
    grid-template-columns: 1fr;
  }

  /* Kopfbereich mit Titel und Untertitel. */
.pwg-head {
    display: block;
  }
}

/* 2.1.1: bessere Lesbarkeit der Optionsbeschriftungen */
.pwg-checks {
  gap: .75rem 1rem;
}

.pwg-check {
  gap: .65rem;
  min-height: 48px;
  padding: .7rem .85rem;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.45;
}

.pwg-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
}

.pwg-check span,
.pwg-check label {
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.45;
}

.pwg-label-text {
  font-size: 1rem;
}

@media (max-width: 820px) {
  .pwg-check {
    font-size: 1.05rem;
  }
}


/* 2.2.0: robuste Desktop-Lesbarkeit gegen Theme-Overrides */
.pwg-box .pwg-checks .pwg-check {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--pwg-text) !important;
}

.pwg-box .pwg-checks .pwg-check .pwg-check-text {
  display: inline-block !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--pwg-text) !important;
}

.pwg-box .pwg-checks .pwg-check input[type="checkbox"] {
  appearance: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
}

@media (max-width: 820px) {
  .pwg-box .pwg-checks .pwg-check,
  .pwg-box .pwg-checks .pwg-check .pwg-check-text {
    font-size: 18px !important;
  }
}


/* 2.2.1 FORCE LABEL SIZE */
.pwg-box .pwg-check,
.pwg-box .pwg-check span,
.pwg-box .pwg-check label{
    font-size:24px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
}
.pwg-box .pwg-check input[type=checkbox]{
 width:28px !important;
 height:28px !important;
}


/* 2.3.0: große Desktop-Typografie und größere Bedienflächen */
.pwg-box {
  width: min(100%, 1120px) !important;
  padding: clamp(24px, 3vw, 42px) !important;
  margin: 2.5rem auto !important;
}

.pwg-box /* Kopfbereich mit Titel und Untertitel. */
.pwg-head {
  margin-bottom: 2rem !important;
}

.pwg-box .pwg-title {
  font-size: clamp(34px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--pwg-text) !important;
}

.pwg-box .pwg-subtitle {
  margin-top: 12px !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.45 !important;
  color: var(--pwg-muted) !important;
}

.pwg-box /* Zweispaltiges Layout: Einstellungen links, Presets rechts. */
.pwg-layout {
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 1.6rem !important;
}

.pwg-box /* Kartenoptik für einzelne Bedienbereiche. */
.pwg-panel {
  padding: clamp(22px, 2.4vw, 32px) !important;
  border-radius: 20px !important;
}

.pwg-box .pwg-panel-title {
  margin-bottom: 1.25rem !important;
  font-size: clamp(26px, 2.8vw, 34px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--pwg-text) !important;
}

.pwg-box /* Responsives Formularraster. */
.pwg-grid {
  gap: 1.25rem !important;
}

.pwg-box .pwg-field {
  margin-bottom: 0 !important;
}

.pwg-box .pwg-label-text {
  margin-bottom: 10px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--pwg-text) !important;
}

.pwg-box input[type="text"],
.pwg-box input[type="number"],
.pwg-box select {
  min-height: 58px !important;
  padding: 12px 16px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  border-radius: 14px !important;
}

.pwg-box .pwg-checks {
  gap: 1rem 1.1rem !important;
  margin-top: 1.4rem !important;
}

.pwg-box .pwg-checks .pwg-check,
.pwg-box .pwg-check,
.pwg-box .pwg-check .pwg-check-text {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.pwg-box .pwg-check {
  min-height: 66px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  gap: 14px !important;
}

.pwg-box .pwg-check input[type="checkbox"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-basis: 32px !important;
}

.pwg-box .pwg-presets {
  gap: .85rem !important;
}

.pwg-box .pwg-preset {
  min-height: 56px !important;
  padding: 12px 18px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  border-radius: 16px !important;
}

.pwg-box .pwg-actions {
  margin-top: 1.5rem !important;
  gap: 1rem !important;
}

.pwg-box .pwg-generate,
.pwg-box .pwg-copy {
  min-height: 58px !important;
  padding: 12px 24px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
}

.pwg-box /* Ergebnisbereich mit Passwortfeld, Kopierbutton und Stärke. */
.pwg-result-wrap {
  margin-top: 1.5rem !important;
}

.pwg-box .pwg-result {
  min-height: 66px !important;
  font-size: clamp(24px, 2.6vw, 30px) !important;
  line-height: 1.2 !important;
}

.pwg-box .pwg-message {
  margin-top: 12px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

@media (max-width: 820px) {
  .pwg-box /* Zweispaltiges Layout: Einstellungen links, Presets rechts. */
.pwg-layout {
    grid-template-columns: 1fr !important;
  }
  .pwg-box .pwg-title {
    font-size: 32px !important;
  }
  .pwg-box .pwg-subtitle {
    font-size: 18px !important;
  }
  .pwg-box .pwg-panel-title {
    font-size: 26px !important;
  }
  .pwg-box .pwg-label-text {
    font-size: 21px !important;
  }
  .pwg-box .pwg-check,
  .pwg-box .pwg-check .pwg-check-text {
    font-size: 22px !important;
  }
}

/* 2.4.0: Mobile Presets ausblenden, Stärkeanzeige, Mehrfachausgabe */
.pwg-box textarea.pwg-result {
  resize: vertical !important;
  min-height: 120px !important;
  white-space: pre !important;
}





@media (max-width: 820px) {
  .pwg-box .pwg-presets-wrap {
    display: none !important;
  }
}


/* 2.5.3: Kopier-Icon direkt neben dem einzelnen Ergebnisfeld */
.pwg-box .pwg-result-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.pwg-box .pwg-copy[hidden] {
  display: none !important;
}

/* 2.5.3: dezentes Kopier-Icon und Passwort-Zeilen ohne Kopierbuttons */
.pwg-box .pwg-copy.pwg-icon-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1px solid var(--pwg-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--pwg-muted) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.pwg-box .pwg-copy.pwg-icon-copy:hover {
  color: #111827 !important;
  border-color: #111827 !important;
  background: #f9fafb !important;
}


@media (max-width: 700px) {
  .pwg-box .pwg-copy.pwg-icon-copy {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 22px !important;
  }
}


/* 2.7.1 restore: Passphrase, Wort umwandeln, Infotext und Sternchen-Stärke */
.pwg-box [hidden] {
  display: none !important;
}

.pwg-length-row,
.pwg-result-line,
.pwg-word-row {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.pwg-length-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 160px;
}

.pwg-length-row input[type="text"] {
  width: 86px !important;
  flex: 0 0 86px;
  text-align: center;
  font-weight: 800;
}

.pwg-box .pwg-result-line .pwg-result {
  flex: 1 1 auto;
  min-height: 56px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.pwg-box .pwg-icon-copy {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 1px solid var(--pwg-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--pwg-text) !important;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.pwg-box .pwg-icon-copy:hover {
  border-color: #2563eb !important;
  background: #eef4ff !important;
  color: #2563eb !important;
}

.pwg-box .pwg-icon-copy:active {
  background: #fff !important;
  color: var(--pwg-text) !important;
}

.pwg-box .pwg-icon-copy.is-copied {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #10b981 !important;
}

.pwg-passphrase-options,
.pwg-word-options {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pwg-border);
}

.pwg-word-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.pwg-word-suggestion,
.pwg-suggest-word,
.pwg-word-suggestion:hover,
.pwg-suggest-word:hover,






.pwg-info-text {
  margin-top: 1.5rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid var(--pwg-border);
  border-radius: 14px;
  background: #fff;
  color: var(--pwg-text);
  line-height: 1.65;
}

.pwg-info-text h2,
.pwg-info-text h3 {
  margin-top: 0;
}

@media (max-width: 820px) {
  .pwg-presets-wrap {
    display: none !important;
  }
  .pwg-length-row,
  .pwg-result-line,
  .pwg-word-row {
    align-items: stretch;
  }
}


/* 2.8.0: Vereinheitlichung Frontend */
.pwg-box {
  --pwg-radius: 18px;
  --pwg-border: rgba(15, 23, 42, .13);
  --pwg-soft: #f8fafc;
  --pwg-card: #ffffff;
  --pwg-text: #111827;
  --pwg-muted: #4b5563;
  --pwg-accent: #166534;
  --pwg-accent-soft: #dcfce7;
  max-width: 1120px;
  margin: 2rem auto;
  color: var(--pwg-text);
}
.pwg-box, .pwg-box * { box-sizing: border-box; }
.pwg-head, .pwg-panel, .pwg-info-text {
  background: var(--pwg-card) !important;
  border: 1px solid var(--pwg-border) !important;
  border-radius: var(--pwg-radius) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
}
/* Kopfbereich mit Titel und Untertitel. */
.pwg-head { padding: 1.8rem 2rem !important; margin-bottom: 1.25rem !important; }
.pwg-title { font-size: clamp(2rem, 3vw, 2.75rem) !important; line-height: 1.08 !important; margin: 0 !important; font-weight: 800 !important; }
.pwg-subtitle { font-size: 1.15rem !important; color: var(--pwg-muted) !important; margin: .6rem 0 0 !important; }
/* Zweispaltiges Layout: Einstellungen links, Presets rechts. */
.pwg-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 280px !important; gap: 1.25rem !important; align-items: start !important; }
/* Kartenoptik für einzelne Bedienbereiche. */
.pwg-panel { padding: 1.5rem !important; }
.pwg-panel-title { font-size: 1.55rem !important; margin: 0 0 1.2rem !important; font-weight: 800 !important; }
/* Responsives Formularraster. */
.pwg-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 1rem !important; }
.pwg-field { display: block !important; margin: 0 0 1rem !important; }
.pwg-label-text { display:block !important; font-size: 1.18rem !important; font-weight: 750 !important; margin-bottom: .45rem !important; color: var(--pwg-text) !important; }
.pwg-field input[type=text], .pwg-field select, .pwg-result {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid var(--pwg-border) !important;
  border-radius: 12px !important;
  padding: .65rem .8rem !important;
  font-size: 1.08rem !important;
  background: #fff !important;
  color: var(--pwg-text) !important;
}
.pwg-length-row, .pwg-result-line, .pwg-word-row { display:flex !important; gap:.75rem !important; align-items:center !important; }
.pwg-length-row input[type=range] { flex: 1 1 auto !important; min-width: 180px !important; }
.pwg-length-row input[name=length] { width: 86px !important; flex: 0 0 86px !important; text-align:center !important; font-weight:700 !important; }
.pwg-checks { display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:.75rem !important; margin: 1rem 0 !important; }
.pwg-check { display:flex !important; gap:.7rem !important; align-items:center !important; padding:.8rem .9rem !important; border:1px solid var(--pwg-border) !important; border-radius:14px !important; background: var(--pwg-soft) !important; cursor:pointer !important; }
.pwg-check input[type=checkbox] { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
.pwg-check-text { font-size: 1.12rem !important; font-weight: 700 !important; line-height:1.3 !important; }
.pwg-actions { margin-top: 1.25rem !important; }
.pwg-generate { width: 100% !important; min-height: 56px !important; border-radius: 14px !important; font-size: 1.18rem !important; font-weight: 800 !important; background: var(--pwg-accent) !important; color:#fff !important; border:0 !important; cursor:pointer !important; }
.pwg-generate:hover { filter: brightness(1.06); }
.pwg-copy {
  width:48px !important; height:48px !important; min-width:48px !important; border-radius:12px !important; border:1px solid var(--pwg-border) !important; background: var(--pwg-soft) !important; color: var(--pwg-text) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:1.35rem !important; cursor:pointer !important;
}
.pwg-copy:active { background: var(--pwg-soft) !important; color: var(--pwg-text) !important; }
.pwg-copy.is-copied { background: var(--pwg-accent-soft) !important; color: var(--pwg-accent) !important; }
.pwg-result { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size:1.25rem !important; font-weight:700 !important; }


/* 2.8.1: bewusst große, themefeste Frontend-Typografie */
.pwg-box { font-size: 20px !important; }
.pwg-box .pwg-title { font-size: clamp(40px, 4vw, 56px) !important; line-height: 1.08 !important; }
.pwg-box .pwg-subtitle { font-size: 22px !important; line-height: 1.45 !important; }
.pwg-box .pwg-panel-title { font-size: 32px !important; line-height: 1.2 !important; }
.pwg-box .pwg-label-text { font-size: 24px !important; line-height: 1.25 !important; font-weight: 800 !important; }
.pwg-box .pwg-field input[type=text],
.pwg-box .pwg-field select,
.pwg-box .pwg-field input[type=number] { font-size: 22px !important; min-height: 58px !important; }
.pwg-box .pwg-length-row input[name=length] { font-size: 24px !important; min-height: 58px !important; width: 108px !important; flex-basis: 108px !important; }
.pwg-box .pwg-check-text { font-size: 23px !important; line-height: 1.3 !important; font-weight: 800 !important; }
.pwg-box .pwg-check input[type=checkbox] { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
.pwg-box .pwg-generate { font-size: 24px !important; min-height: 66px !important; }
.pwg-box .pwg-result { font-size: clamp(24px, 2.5vw, 32px) !important; min-height: 64px !important; }
.pwg-box .pwg-preset,
.pwg-box .pwg-suggest-word,
.pwg-box .pwg-word-suggestion { font-size: 20px !important; min-height: 52px !important; }
.pwg-box .pwg-message { font-size: 19px !important; }
.pwg-box .pwg-info-text h2 { font-size: 34px !important; }
.pwg-box .pwg-info-text h3 { font-size: 28px !important; }
.pwg-box .pwg-info-text p,
.pwg-box .pwg-info-text li { font-size: 21px !important; line-height: 1.65 !important; }
@media (max-width: 640px) {
  .pwg-box { font-size: 18px !important; }
  .pwg-box .pwg-title { font-size: 34px !important; }
  .pwg-box .pwg-subtitle { font-size: 19px !important; }
  .pwg-box .pwg-panel-title { font-size: 28px !important; }
  .pwg-box .pwg-label-text { font-size: 21px !important; }
  .pwg-box .pwg-check-text { font-size: 20px !important; }
  .pwg-box .pwg-field input[type=text],
  .pwg-box .pwg-field select { font-size: 20px !important; }
}


/* Einheitliches Frontend und konsistente Kopierbuttons. */
.pwg-box{--pwg-bg:#ffffff;--pwg-soft:#f7fafc;--pwg-border:#d7dde5;--pwg-text:#172033;--pwg-muted:#5d6b7a;--pwg-primary:#1f6f4e;--pwg-primary-dark:#185a3f;--pwg-radius:18px;--pwg-shadow:0 18px 48px rgba(15,23,42,.10);font-size:20px!important;line-height:1.55!important;color:var(--pwg-text)!important;background:var(--pwg-bg)!important;border:1px solid var(--pwg-border)!important;border-radius:var(--pwg-radius)!important;box-shadow:var(--pwg-shadow)!important;padding:2rem!important;max-width:1120px!important;margin:2rem auto!important}
.pwg-title{font-size:42px!important;line-height:1.15!important;margin:0!important;font-weight:800!important;color:var(--pwg-text)!important}.pwg-subtitle{font-size:21px!important;color:var(--pwg-muted)!important;margin:.4rem 0 0!important}.pwg-panel{background:var(--pwg-soft)!important;border:1px solid var(--pwg-border)!important;border-radius:16px!important;padding:1.4rem!important}.pwg-panel-title{font-size:30px!important;font-weight:800!important;margin:0 0 1rem!important;color:var(--pwg-text)!important}.pwg-label-text,.pwg-check-text{font-size:22px!important;font-weight:700!important;color:var(--pwg-text)!important}.pwg-field input[type=text],.pwg-field input[type=number],.pwg-field select,.pwg-field textarea{font-size:21px!important;line-height:1.35!important;padding:.75rem .9rem!important;border:1px solid var(--pwg-border)!important;border-radius:12px!important;background:#fff!important;color:var(--pwg-text)!important;box-sizing:border-box!important}.pwg-check{display:flex!important;align-items:center!important;gap:.75rem!important;margin:.55rem 0!important}.pwg-check input[type=checkbox]{width:26px!important;height:26px!important;min-width:26px!important}.pwg-generate{font-size:23px!important;font-weight:800!important;padding:.95rem 1.35rem!important;border-radius:14px!important;background:var(--pwg-primary)!important;color:#fff!important;border:0!important;cursor:pointer!important}.pwg-generate:hover{background:var(--pwg-primary-dark)!important}.pwg-result-line{display:grid!important;grid-template-columns:1fr 48px!important;gap:.6rem!important;align-items:center!important}.pwg-result{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:24px!important;font-weight:700!important;letter-spacing:.02em!important}.pwg-icon-copy,.pwg-copy{width:48px!important;height:48px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid var(--pwg-border)!important;border-radius:13px!important;background:#fff!important;color:var(--pwg-primary)!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important;transition:background .15s ease,color .15s ease,border-color .15s ease!important}.pwg-icon-copy:hover,.pwg-copy:hover{background:#eef8f2!important;border-color:var(--pwg-primary)!important;color:var(--pwg-primary-dark)!important}.pwg-icon-copy:focus,.pwg-icon-copy:active,.pwg-copy:focus,.pwg-copy:active{outline:2px solid rgba(31,111,78,.25)!important;background:#fff!important;color:var(--pwg-primary)!important}.pwg-icon-copy.is-copied,.pwg-copy.is-copied{background:var(--pwg-primary)!important;color:#fff!important;border-color:var(--pwg-primary)!important}.pwg-presets .pwg-preset{font-size:18px!important;font-weight:800!important;border-radius:13px!important;padding:.8rem 1rem!important}.pwg-info-text{font-size:19px!important;line-height:1.7!important;margin-top:1.75rem!important;padding:1.5rem!important;border:1px solid var(--pwg-border)!important;border-radius:16px!important;background:#fff!important}.pwg-info-text h2{font-size:30px!important;margin:1.2rem 0 .65rem!important}.pwg-info-text h3{font-size:24px!important;margin:1rem 0 .55rem!important}@media (max-width: 768px){.pwg-box{font-size:18px!important;padding:1.1rem!important}.pwg-title{font-size:32px!important}.pwg-subtitle{font-size:18px!important}.pwg-panel-title{font-size:26px!important}.pwg-label-text,.pwg-check-text{font-size:19px!important}.pwg-presets-wrap{display:none!important}.pwg-result-line{grid-template-columns:1fr 46px!important}}

/* Eigenständiger Shortcode [pwg_random].
 * Die Zufallszahl ist bewusst unabhängig von der normalen Generator-Box,
 * damit sie flexibel in Beiträgen, Seiten oder Widgets platziert werden kann.
 */
.pwg-random-number {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.15;
  padding: .35em .55em;
  border: 1px solid var(--pwg-border, #d8e2dc);
  border-radius: 14px;
  background: var(--pwg-soft, #f8fafc);
  color: var(--pwg-text, #1f2933);
}


/* Im Modus „Wort umwandeln“ steht der Vorschlagen-Button bewusst unter dem Eingabefeld. */
.pwg-box .pwg-word-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .65rem !important;
}
.pwg-box .pwg-word-row .pwg-suggest-word {
  width: 100% !important;
}

/* Gemeinsame sichtbare Sicherheitsanalyse für berechenbare Generator-Modi. */
/* Gemeinsame Sicherheitsanzeige aller Generator-Modi. */
.pwg-security-analysis {
  margin: .65rem 0 0 !important;
  padding: .75rem .9rem !important;
  border: 1px solid var(--pwg-border) !important;
  border-radius: 12px !important;
  background: var(--pwg-soft) !important;
  color: var(--pwg-text) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.pwg-security-analysis[hidden] { display: none !important; }

.pwg-security-text {
  margin: 0 !important;
}

.pwg-security-meter {
  position: relative;
  width: 100%;
  height: .65rem;
  margin: 0 0 .65rem !important;
  overflow: hidden;
  border: 1px solid var(--pwg-border) !important;
  border-radius: 999px !important;
  background: var(--pwg-bg, #fff) !important;
}

.pwg-security-meter[hidden] { display: none !important; }

.pwg-security-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width .2s ease;
}

.pwg-security-analysis[data-security-level="very_low"],
.pwg-security-analysis[data-security-level="low"] {
  color: #991b1b !important;
}

.pwg-security-analysis[data-security-level="medium"] {
  color: #92400e !important;
}

.pwg-security-analysis[data-security-level="good"],
.pwg-security-analysis[data-security-level="high"],
.pwg-security-analysis[data-security-level="very_high"] {
  color: #166534 !important;
}


.pwg-security-analysis[data-security-mode="word"] {
  border-color: #d97706 !important;
  background: #fffbeb !important;
  color: #78350f !important;
}

.pwg-passphrase-dictionary-warning {
  margin: .85rem 0 0;
  padding: .75rem .85rem;
  border: 1px solid #d97706;
  border-radius: 10px;
  background: #fffbeb;
  color: #78350f;
  line-height: 1.45;
}

.pwg-passphrase-dictionary-warning[hidden] { display: none !important; }

/* 1.0.3: Verbindlicher mobiler Layout-Fix.
 * Die Selektoren stehen bewusst am Dateiende und verwenden !important,
 * damit ältere, mehrfach geschichtete Release-Regeln nicht erneut gewinnen.
 */
@media (max-width: 820px) {
  .pwg-box .pwg-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .pwg-box .pwg-grid > .pwg-field,
  .pwg-box label.pwg-field {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .pwg-box .pwg-field > select,
  .pwg-box select[name="mode"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 3rem !important;
  }

  .pwg-box .pwg-checks {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: .75rem !important;
  }

  .pwg-box .pwg-checks > .pwg-check {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .pwg-box .pwg-checks .pwg-check-text {
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}


/* 2.9.0: einheitliche, themefeste Tastatur-Fokusdarstellung im Frontend */
.pwg-box :where(
  button,
  input,
  select,
  textarea,
  a[href],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

.pwg-box .pwg-check:has(input:focus-visible) {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 3px !important;
}

@supports not selector(:has(*)) {
  .pwg-box .pwg-check input:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 3px !important;
  }
}


/* Direkte Wortumwandlung: mobil gut erreichbarer Blitz-Button im Eingabefeld. */
.pwg-box .pwg-word-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
.pwg-box .pwg-word-input-wrap input[name="word"] {
  width: 100% !important;
  padding-right: 3.65rem !important;
  box-sizing: border-box !important;
}
.pwg-box .pwg-transform-word {
  position: absolute !important;
  top: 50% !important;
  right: .35rem !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--pwg-border, #d8e2dc) !important;
  border-radius: 11px !important;
  background: var(--pwg-primary, #1f6f4e) !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.pwg-box .pwg-transform-word:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}
.pwg-box .pwg-transform-word:not(:disabled):hover { filter: brightness(1.08); }
.pwg-box .pwg-transform-word:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
}


/* Schritt 21: klare optische Trennung zwischen Wortvorschlägen und Optionen. */
.pwg-box .pwg-word-settings {
  margin-top: 1.75rem !important;
  padding: 1.5rem !important;
  border-top: 1px solid var(--pwg-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .58) !important;
}

.pwg-box .pwg-word-settings .pwg-checks {
  margin-top: 1rem !important;
}

@media (max-width: 640px) {
  .pwg-box .pwg-word-settings {
    margin-top: 1.5rem !important;
    padding: 1.15rem .9rem !important;
  }
}

/* Schritt 22: Mobile-Trennung zwischen Vorschlägen und Wortoptionen verstärken. */
@media (max-width: 640px) {
  .pwg-box .pwg-word-suggestions:not(:empty) {
    margin-bottom: 0 !important;
  }

  .pwg-box .pwg-word-suggestions:not(:empty) + .pwg-word-settings {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 2px solid var(--pwg-border, rgba(15, 23, 42, .18)) !important;
  }

  .pwg-box .pwg-word-settings {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    background: var(--pwg-soft, #f8fafc) !important;
  }
}