/* =========================================
   Domain Checker – Premium Fürst UI
   (nutzt Tokens aus ../style.css: --accent, --accent-silver, --muted, --glass, --radius, --trans)
   ========================================= */

:root{
  --dc-nav-h: 72px;
  --dc-max: 1100px;
}

/* Page spacing (fixed nav safe) */
.dc-page{
  padding-top: calc(var(--dc-nav-h) + 1.25rem);
}

/* HERO */
.dc-hero{
  position: relative;
  padding: 4.2rem 0 3.2rem;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(227,242,255,.01));
}
.dc-hero__content{
  position: relative;
  z-index: 2;
  max-width: var(--dc-max);
}
.dc-hero__fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.dc-glow{
  position:absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.18) 0%, rgba(192,192,192,.04) 72%);
  top: 54%;
  left: 66%;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  opacity: .95;
  animation: dcGlow 6.2s infinite alternate ease-in-out;
}
@keyframes dcGlow{
  0%{ transform:translate(-50%,-50%) scale(.96); }
  100%{ transform:translate(-50%,-50%) scale(1.06); }
}
.dc-headline{
  margin: .7rem auto .6rem;
  max-width: 980px;
}
.dc-lead{
  margin: 0 auto 1.2rem;
  max-width: 860px;
}

/* MAIN */
.dc-main{ padding-top: .75rem; }

/* Cards */
.dc-card{
  background: linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.28));
  backdrop-filter: blur(12px) saturate(120%);
}
.dc-card--glass{
  background: linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.22));
  border: 1px solid rgba(0,0,0,.05);
}

/* Card head row */
.dc-cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mini status pill (JS sets classes) */
.dc-miniStatus{
  min-height: 34px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: .38rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  color:#111827;
  font-weight: 900;
  letter-spacing:.01em;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.dc-miniStatus:empty{ display:none; }
.dc-miniStatus::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--accent), var(--accent-silver));
  box-shadow: 0 0 0 4px rgba(191,169,76,.12);
}
.dc-miniStatus.is-ok::before{
  background: linear-gradient(145deg, #22c55e, #86efac);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.dc-miniStatus.is-bad::before{
  background: linear-gradient(145deg, #ef4444, #fecaca);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

/* Search */
.dc-searchWrap{ margin-top: 1rem; }

.dc-search{
  position: relative;
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: calc(var(--radius) + .2rem);
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.42));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.dc-search__icon{
  width: 52px;
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
  border: 1px solid rgba(0,0,0,.05);
  color: var(--accent);
}

.dc-input{
  height: 52px;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-weight: 800;
  letter-spacing:.01em;
  color:#0f172a;
}
.dc-input::placeholder{
  color: rgba(111,118,128,.9);
  font-weight: 700;
}

.dc-btn{
  height: 52px;
  padding: 0 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* TLD row */
.dc-tlds{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem;
  align-items:center;
  margin-top: 12px;
}

.dc-tld{
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  color:#374151;
  font-weight: 900;
  padding: .52rem .78rem;
  border-radius: 999px;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), color var(--trans);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.dc-tld:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,.10);
}
.dc-tld.is-active{
  border-color: rgba(191,169,76,.55);
  box-shadow: 0 0 0 4px rgba(191,169,76,.12), 0 16px 44px rgba(0,0,0,.10);
  color: var(--accent);
}

.dc-clear{
  margin-left:auto;
  border:none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  padding: .35rem .2rem;
  transition: transform var(--trans), color var(--trans);
}
.dc-clear:hover{
  color: var(--accent);
  transform: translateY(-1px);
  text-decoration: underline;
}

/* Result */
.dc-result{
  margin-top: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: 16px;
  min-height: 104px;
}
.dc-result__empty{ color: var(--muted); }

/* Sub sections */
.dc-subtitle{
  font-weight: 900;
  color:#111827;
  margin:0;
  font-size: 1rem;
}
.dc-subhint{
  margin:0;
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
}

/* Alternatives grid */
.dc-alt{
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 14px;
}
.dc-alt__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.dc-alt__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Privacy note */
.dc-privacy-note{
  margin-top: 12px;
  color: var(--muted);
  font-size: .92rem;
}
.dc-privacy-note strong{
  color:#111827;
  font-weight: 900;
}

/* Steps */
.dc-steps{ display:grid; gap: 12px; margin-top: 10px; }
.dc-step{ display:flex; gap: 10px; align-items:flex-start; }
.dc-step__dot{
  margin-top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-silver));
  box-shadow: 0 0 0 4px rgba(191,169,76,.14);
  flex: 0 0 auto;
}
.dc-step__text{ color:#374151; }

/* CTA box */
.dc-ctaBox{
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.30));
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Trust pills */
.dc-miniTrust{
  display:flex;
  flex-wrap:wrap;
  gap: .55rem;
}
.dc-trustPill{
  display:inline-flex;
  align-items:center;
  padding: .42rem .7rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .82rem;
  color: #1f2933;
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.30));
}

/* HISTORY (Premium chips) */
.dc-history{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.dc-history__head{
  display:flex;
  align-items:center;
  gap: .75rem;
  flex-wrap:wrap;
  margin-bottom: .6rem;
}
.dc-history__title{
  font-weight: 900;
  color:#111827;
  margin:0;
}
.dc-history__actions{ margin-left:auto; display:flex; gap:.5rem; }

.dc-history__btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 12px;
  padding: .42rem .65rem;
  font-weight: 900;
  color:#374151;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dc-history__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(191,169,76,.38);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.dc-history__list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0;
  padding:0;
  list-style:none;
}

.dc-chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .52rem .78rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  font-weight: 900;
  color:#111827;
}
.dc-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(191,169,76,.42);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.dc-chip__dot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(145deg, var(--accent), var(--accent-silver));
  box-shadow: 0 0 0 4px rgba(191,169,76,.12);
}
.dc-chip__domain{ font-weight: 900; }
.dc-chip__meta{
  font-weight: 800;
  color:#6b7280;
  font-size: .86rem;
}

.dc-chip.is-ok .dc-chip__dot{
  background: linear-gradient(145deg, #22c55e, #86efac);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.dc-chip.is-bad .dc-chip__dot{
  background: linear-gradient(145deg, #ef4444, #fecaca);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

/* Responsive */
@media (max-width: 575.98px){
  .dc-glow{ display:none; }
  .dc-search{
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "icon input"
      "btn btn";
  }
  .dc-search__icon{ grid-area: icon; }
  .dc-input{ grid-area: input; }
  .dc-btn{ grid-area: btn; width:100%; }

  .dc-clear{ margin-left: 0; }
  .dc-alt__grid{ grid-template-columns: 1fr; }
  .dc-chip{ width:100%; justify-content:space-between; }
}
/* ===============================
   Verlauf / Letzte Prüfungen – Premium Look
   (Drop-in Fix für dein aktuelles Markup)
   =============================== */

/* Wrapper */
#dcRecent{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Kopfzeile: Titel links, Button rechts */
#dcRecent .dc-recent__head,
#dcRecent .dc-history__head{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:.65rem;
}
#dcRecent .dc-recent__head strong,
#dcRecent .dc-history__title{
  font-weight: 900;
  color:#111827;
  letter-spacing:.01em;
}
#dcRecent #dcRecentClear,
#dcRecent .dc-linkBtn{
  margin-left:auto;
  appearance:none;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 12px;
  padding: .42rem .65rem;
  font-weight: 900;
  color:#374151;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#dcRecent #dcRecentClear:hover,
#dcRecent .dc-linkBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(191,169,76,.38);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Liste: Chips statt Boxen */
#dcRecentList{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0;
  padding:0;
  list-style:none;
}

/* Falls dein JS <div> statt <li> rendert: trotzdem hübsch */
#dcRecentList > *{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .52rem .78rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  font-weight: 900;
  color:#111827;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#dcRecentList > *:hover{
  transform: translateY(-1px);
  border-color: rgba(191,169,76,.42);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

/* Entfernt harte Innen-Ränder aus evtl. alten Styles */
#dcRecentList > *{
  outline: none !important;
}

/* Status Icon / Emoji in der Chip-Zeile sauberer */
#dcRecentList > * .dc-chip__dot,
#dcRecentList > * svg,
#dcRecentList > * .icon{
  flex: 0 0 auto;
}

/* Optional: wenn dein Verlauftext so kommt:
   "❌ domain · rdap · 200 · 12:15"
   => bessere Typo */
#dcRecentList > *{
  font-size: .95rem;
  line-height: 1.1;
}
#dcRecentList > * strongcom,
#dcRecentList > * .meta{
  color:#6b7280;
  font-weight: 800;
  font-size: .86rem;
}

/* Mobile: Chips full width */
@media (max-width: 575.98px){
  #dcRecentList > *{
    width:100%;
    justify-content:space-between;
  }
}
/* =========================================================
   FIX: Verlauf sieht aus wie Dev-Box -> jetzt Premium Chips
   Wir targeten den Block direkt unter "Letzte Prüfungen"
   ========================================================= */

/* Head: Letzte Prüfungen + Button */
#dcRecent, .dc-recent, .dc-history{
  margin-top: 14px;
}

#dcRecent .dc-recent__head,
.dc-recent__head,
.dc-history__head{
  display:flex !important;
  align-items:center !important;
  gap:.75rem !important;
  flex-wrap:wrap !important;
  margin-bottom:.65rem !important;
}

#dcRecent .dc-recent__head strong,
.dc-recent__head strong{
  font-weight: 900 !important;
  color:#111827 !important;
}

/* "Verlauf löschen" Button (der im Screenshot so boxed ist) */
#dcRecentClear,
.dc-linkBtn,
.dc-recent__head button{
  margin-left:auto !important;
  appearance:none !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  border-radius: 12px !important;
  padding: .42rem .7rem !important;
  font-weight: 900 !important;
  color:#374151 !important;
  cursor:pointer !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
}
#dcRecentClear:hover,
.dc-linkBtn:hover,
.dc-recent__head button:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(191,169,76,.38) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* LISTE: egal ob UL/OL/DIV -> wir machen Chips */
#dcRecentList,
.dc-recent__list,
.dc-history__list,
#dcRecent ul,
#dcRecent ol,
#dcRecent .list,
#dcRecent .items{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.6rem !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  border:0 !important;
  background:transparent !important;
}

/* CHIP: egal ob li/div/span */
#dcRecentList > *,
.dc-recent__list > *,
.dc-history__list > *,
#dcRecent ul > li,
#dcRecent ol > li{
  display:inline-flex !important;
  align-items:center !important;
  gap:.6rem !important;
  padding: .55rem .78rem !important;
  border-radius: 14px !important;

  /* kill den schwarzen Kasten */
  border: 1px solid rgba(0,0,0,.08) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42)) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;

  font-weight: 900 !important;
  color:#111827 !important;
  line-height: 1.1 !important;
}
#dcRecentList > *:hover,
.dc-recent__list > *:hover,
.dc-history__list > *:hover,
#dcRecent ul > li:hover,
#dcRecent ol > li:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(191,169,76,.42) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.10) !important;
}

/* Emoji/Icon vorne sauber */
#dcRecentList > *::before,
.dc-recent__list > *::before,
.dc-history__list > *::before,
#dcRecent ul > li::before,
#dcRecent ol > li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
  background: linear-gradient(145deg, var(--accent,#bfa94c), var(--accent-silver,#c0c0c0));
  box-shadow: 0 0 0 4px rgba(191,169,76,.12);
}

/* Wenn du Text wie "❌ ..." drin hast: Emoji weniger dominant */
#dcRecentList > *,
.dc-recent__list > *,
.dc-history__list > *,
#dcRecent ul > li,
#dcRecent ol > li{
  font-size: .95rem !important;
}
#dcRecentList > *{
  /* optional: wenn das ❌ bleibt, wirkt es sonst zu fett */
  letter-spacing: .01em !important;
}

/* Mobile: Chips full width */
@media (max-width: 575.98px){
  #dcRecentList > *,
  .dc-recent__list > *,
  .dc-history__list > *,
  #dcRecent ul > li,
  #dcRecent ol > li{
    width:100% !important;
    justify-content:space-between !important;
  }
}
/* =========================================================
   FIX: Alternative Endungen + Buttons + Rest-Dev-Look
   (Drop-in, ohne HTML ändern)
   ========================================================= */

/* --- Alternative Endungen Container hübscher --- */
#dcAlt,
.dc-alt{
  margin-top: 14px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.40)) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
  padding: 14px !important;
}

.dc-alt__head{
  display:flex !important;
  align-items:baseline !important;
  gap:.55rem !important;
  margin-bottom: .65rem !important;
}
.dc-alt__head strong{
  font-weight: 900 !important;
  color:#111827 !important;
}
.dc-alt__head .text-muted{
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* --- Grid / Liste: kill schwarze Kästen --- */
#dcAltGrid,
.dc-alt__grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .65rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* einzelne Alternative-Row (egal ob div/button/a/li) */
#dcAltGrid > *,
.dc-alt__grid > *{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:.75rem !important;

  border: 1px solid rgba(0,0,0,.08) !important;     /* statt schwarz */
  border-radius: 14px !important;
  padding: .55rem .7rem !important;

  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.44)) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.07) !important;

  font-weight: 900 !important;
  color:#111827 !important;
  line-height: 1.1 !important;
}

/* Domain links schöner */
#dcAltGrid > * .dc-alt__domain,
.dc-alt__grid > * .dc-alt__domain{
  font-weight: 900 !important;
  letter-spacing:.01em !important;
}

/* Status rechts als Chip */
#dcAltGrid > * .dc-alt__status,
.dc-alt__grid > * .dc-alt__status{
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;

  font-size: .88rem !important;
  font-weight: 900 !important;
  color:#374151 !important;

  padding: .28rem .55rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.70) !important;
}

/* Farb-Logik (greift, wenn du Klassen setzt; falls nicht, wirkt’s neutral) */
.dc-alt__status.is-ok{ border-color: rgba(34,197,94,.22) !important; }
.dc-alt__status.is-bad{ border-color: rgba(239,68,68,.22) !important; }
.dc-alt__status.is-neutral{ border-color: rgba(191,169,76,.22) !important; }

/* Hover */
#dcAltGrid > *:hover,
.dc-alt__grid > *:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(191,169,76,.42) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* --- Buttons unter dem Ergebnis ("Erneut prüfen" etc.) --- */
.dc-result button,
.dc-result .btn,
.dc-result a.btn,
#dcResult button{
  appearance:none !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  border-radius: 12px !important;
  padding: .48rem .75rem !important;
  font-weight: 900 !important;
  color:#374151 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.dc-result button:hover,
.dc-result .btn:hover,
#dcResult button:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(191,169,76,.38) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* --- Verlauf löschen Button (falls noch eckig) --- */
#dcRecentClear,
.dc-linkBtn,
.dc-recent__head button{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
}

/* --- Mobile: Alternative Endungen 1 Spalte --- */
@media (max-width: 575.98px){
  #dcAltGrid,
  .dc-alt__grid{
    grid-template-columns: 1fr !important;
  }
}