/* =========================================================
   Gemeinsame Bausteine für alle Webmaster-Tools (Präfix tu-)
   Wird automatisch auf jeder Tool-Seite geladen (index.php).
   ========================================================= */
.tu { --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; --ok: #139a6d; --warn: #c26a12; --err: #d13438; position: relative; }

/* Karten */
.tu-card { position: relative; padding: 22px 24px; border-radius: 22px; background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow); }
.tu-card + .tu-card { margin-top: 18px; }
.tu-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tu-card__title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.tu-card__title .i { width: 18px; height: 18px; color: var(--blue); }
.tu-card__title small { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* Felder */
.tu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.tu-grid--1 { grid-template-columns: minmax(0, 1fr); }
.tu-span-2 { grid-column: 1 / -1; }
.tu-field { display: grid; gap: 7px; min-width: 0; }
.tu-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.tu-label small { font-weight: 400; color: var(--muted); }
.tu-label code { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--violet); }
.tu-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tu-input, .tu-textarea, .tu-select {
  width: 100%; min-width: 0; border-radius: 12px; outline: 0;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1.5px solid rgba(15,19,48,.12);
  transition: border-color .25s, box-shadow .25s;
}
.tu-input, .tu-select { height: 46px; padding: 0 14px; }
.tu-textarea { padding: 12px 14px; line-height: 1.55; resize: vertical; min-height: 84px; }
.tu-input:focus, .tu-textarea:focus, .tu-select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(91,140,255,.15); }
.tu-input::placeholder, .tu-textarea::placeholder { color: #a3a8c3; }
.tu-input--mono, .tu-textarea--mono { font-family: var(--mono); font-size: 14px; }
.tu-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.tu-inline { display: flex; gap: 8px; align-items: center; }
.tu-inline > .tu-input { flex: 1; }
.tu-color { width: 46px; height: 46px; flex-shrink: 0; padding: 4px; border-radius: 12px; border: 1.5px solid rgba(15,19,48,.12); background: #fff; cursor: pointer; }

/* Zähler unter Feldern (z. B. Zeichen/Pixel) */
.tu-meter { display: grid; gap: 5px; }
.tu-meter__bar { position: relative; height: 5px; border-radius: 5px; background: rgba(15,19,48,.08); overflow: hidden; }
.tu-meter__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ok); transition: width .25s var(--ease), background .25s; }
.tu-meter__text { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tu-meter[data-state="warn"] .tu-meter__bar i { background: #e89648; }
.tu-meter[data-state="err"] .tu-meter__bar i { background: var(--err); }
.tu-meter[data-state="warn"] .tu-meter__state { color: var(--warn); }
.tu-meter[data-state="err"] .tu-meter__state { color: var(--err); }
.tu-meter[data-state="ok"] .tu-meter__state { color: var(--ok); }

/* Schalter (Checkbox als Toggle) */
.tu-switches { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tu-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; user-select: none; }
.tu-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tu-switch__ui { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: rgba(15,19,48,.15); transition: background .25s; }
.tu-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.tu-switch input:checked + .tu-switch__ui { background: var(--blue); }
.tu-switch input:checked + .tu-switch__ui::after { transform: translateX(16px); }
.tu-switch input:focus-visible + .tu-switch__ui { outline: 2px solid #8fa8ff; outline-offset: 2px; }
.tu-switch small { color: var(--muted); }

/* Segment-Auswahl (Radio-Gruppe) */
.tu-segment { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(15,19,48,.05); flex-wrap: wrap; }
.tu-segment label { position: relative; cursor: pointer; }
.tu-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tu-segment span { display: block; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.tu-segment input:checked + span { color: var(--ink); background: #fff; box-shadow: 0 2px 8px -3px rgba(15,19,48,.25); }
.tu-segment input:focus-visible + span { outline: 2px solid #8fa8ff; outline-offset: 2px; }

/* Buttons */
.tu-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid rgba(15,19,48,.12);
  transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.tu-btn .i { width: 15px; height: 15px; }
.tu-btn:hover { border-color: var(--ink); }
.tu-btn:active { transform: scale(.97); }
.tu-btn--primary { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(110,120,255,.9); }
.tu-btn--primary:hover { border-color: transparent; filter: brightness(1.05); }
.tu-btn--ghost { background: transparent; }
.tu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Tabs */
.tu-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(15,19,48,.08); }
.tu-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; }
.tu-tab .i { width: 15px; height: 15px; }
.tu-tab:hover { color: var(--ink); background: rgba(15,19,48,.04); }
.tu-tab[aria-selected="true"] { color: var(--ink); background: rgba(91,140,255,.12); }
.tu-tabs__end { margin-left: auto; display: flex; gap: 8px; }

/* Code-Ausgabe */
.tu-pre {
  margin: 0; padding: 16px 18px; border-radius: 14px; max-height: 520px; overflow: auto;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65; white-space: pre; tab-size: 2;
  color: #dfe4ff; background: #0f1330;
}
.tu-pre--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.tu-pre .t-tag { color: #7aa2ff; } .tu-pre .t-attr { color: #c792ea; } .tu-pre .t-val { color: #c3e88d; } .tu-pre .t-com { color: #6b7399; font-style: italic; }

/* Prüfliste */
.tu-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tu-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; background: rgba(15,19,48,.035); }
.tu-checks li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.tu-checks li[data-level="warn"]::before { background: #e89648 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tu-checks li[data-level="err"]::before { background: var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat; }
.tu-checks li[data-level="warn"] { background: rgba(232,150,72,.1); }
.tu-checks li[data-level="err"] { background: rgba(209,52,56,.08); }

/* Hinweisbox */
.tu-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--text); background: rgba(91,140,255,.08); border: 1px solid rgba(91,140,255,.2); }
.tu-note .i { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: var(--blue); }

/* Aufklappbare Bereiche */
.tu-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tu-details > summary::-webkit-details-marker { display: none; }
.tu-details > summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.tu-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tu-details[open] > summary { margin-bottom: 16px; }

/* Toast */
.tu-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80; translate: -50% 20px; opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; text-align: center; color: #fff; background: var(--ink);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); transition: opacity .3s, translate .4s var(--ease);
}
.tu-toast.is-visible { opacity: 1; translate: -50% 0; }

/* Ergebnis-Badge (z. B. „3 von 5 in Ordnung“) */
.tu-score { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.tu-score[data-state="ok"] { color: #0f7a52; background: rgba(34,192,140,.14); }
.tu-score[data-state="warn"] { color: #a8561a; background: rgba(240,160,75,.16); }
.tu-score[data-state="err"] { color: #b42318; background: rgba(209,52,56,.1); }

/* Aktionen unter einem Formular */
.tu-formactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Dialog (z. B. Import) */
.tu-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 40px 80px -20px rgba(5,7,20,.6); }
.tu-dialog::backdrop { background: rgba(5, 7, 20, .6); backdrop-filter: blur(4px); }
.tu-dialog__inner { display: grid; gap: 14px; padding: 26px; }
.tu-dialog__actions { justify-content: flex-end; }

/* Zwei-Spalten-Layout: Eingabe links, Ergebnis rechts (klebt beim Scrollen) */
.tu-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tu-layout__side { position: sticky; top: 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.tu-layout__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.tu-layout .tu-card + .tu-card { margin-top: 0; }
@media (max-width: 1100px) {
  .tu-layout { grid-template-columns: minmax(0, 1fr); }
  .tu-layout__side { position: static; }
}

@media (max-width: 560px) {
  .tu-card { padding: 18px 16px; border-radius: 18px; }
  .tu-grid { grid-template-columns: minmax(0, 1fr); }
  .tu-tabs__end { margin-left: 0; }
}