/* vw-premium-domain.css */
/* Edler Premium-Look (Design 2): Space + Gold Akzente, aber ohne harte Abhängigkeit von Bildern */

.vw-premium{
  background: #071b2c;
  color:#fff;
  padding: 0 0 70px;
}

/* HERO */
.vw-premium-hero{
  position:relative;
  padding: 56px 0 34px;
  overflow:hidden;
  background:
    url('../img/premium-hero-goldblue.webp') center/cover no-repeat,
    radial-gradient(1200px 500px at 70% 20%, rgba(255,210,120,.26), rgba(255,210,120,0) 60%),
    radial-gradient(900px 500px at 20% 70%, rgba(80,190,255,.22), rgba(80,190,255,0) 60%),
    linear-gradient(180deg, #061728 0%, #071b2c 45%, #061422 100%);
}
.vw-premium-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.25;
  pointer-events:none;
}
.vw-premium-hero-inner{
  position:relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.vw-premium-eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.95;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,210,120,.98);
  border:1px solid rgba(255,210,120,.35);
  background: rgba(0,0,0,.12);
}

.vw-premium-title{
  margin: 14px 0 10px;
  font-size: 46px;
  line-height:1.02;
  letter-spacing:.2px;
}
.vw-premium-sub{
  margin: 0;
  max-width: 840px;
  opacity:.88;
  font-size: 16px;
  line-height:1.5;
}

.vw-premium-searchbar{
  margin-top: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  flex-wrap:wrap;
}
.vw-premium-searchicon{ opacity:.75; }
.vw-premium-search{
  flex: 1 1 360px;
  border:0; outline:0;
  background: transparent;
  color:#fff;
  font-size:16px;
}
.vw-premium-search::placeholder{ color: rgba(255,255,255,.65); }
.vw-premium-clear{
  border:0;
  background: rgba(255,210,120,.16);
  color:#ffd278;
  width:34px; height:34px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 20px;
  line-height:34px;
}
.vw-premium-cta{
  display:flex;
  gap: 8px;
  margin-left:auto;
}
.vw-premium-tab{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.08);
  color:#fff;
  border-radius: 14px;
  padding: 9px 12px;
  cursor:pointer;
  font-weight:800;
}
.vw-premium-tab.is-active{
  border-color: transparent;
  background: linear-gradient(180deg, #ffd278, #d6a84e);
  color:#081b2b;
}

.vw-premium-trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.vw-premium-trustbox{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 12px 14px;
}
.vw-premium-trusttitle{
  font-weight: 900;
  letter-spacing: .2px;
}
.vw-premium-trustsub{
  margin-top: 4px;
  opacity: .78;
  font-size: 13px;
}

/* WRAP */
.vw-premium-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.vw-premium-h2{
  margin: 26px 0 12px;
  font-size: 22px;
  letter-spacing:.2px;
}

/* Premium Section Title (gold line with breaks) */
.vw-premium-sectiontitle{
  margin: 44px 0 18px;
  display:flex;
  align-items:center;
   justify-content:center;
  gap: 18px; 
}

.vw-premium-sectiontitle span{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .6px;
  color: rgba(241,208,138,.98);
  text-shadow: 0 2px 10px rgba(230,194,122,.22);
  padding: 0 6px;
  white-space: nowrap;
}

.vw-premium-sectiontitle span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 22px;
  color: rgba(255,210,120,.98);
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
  border: 1px solid rgba(255,210,120,.22);
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}
@media (max-width: 620px){
  .vw-premium-sectiontitle span{ font-size:18px; padding: 9px 14px; }
}

/* VIEWS */
.vw-premium-view{ display:none; }
.vw-premium-view.is-active{ display:block; }

/* GRID */
.vw-premium-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .vw-premium-title{ font-size: 34px; }
  .vw-premium-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-premium-trust{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .vw-premium-grid{ grid-template-columns: 1fr; }
}

/* CARD (Featured) */
.vw-premium-card{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  position:relative;
}
/* Background-Image nur für Top/Featured Cards */
.vw-premium-view[data-view="featured"] .vw-premium-card{
  background-image:
    linear-gradient(180deg, rgba(7,27,44,.55), rgba(7,27,44,.65)),
    url('../img/premium-card-goldblue.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.vw-premium-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 5px;
  background: rgba(255,255,255,.18);
}
.vw-premium-cardhead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
}
.vw-premium-domain{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.08;
}
.vw-premium-domain.is-long{ font-size: 18px; letter-spacing: .1px; }
.vw-premium-domain.is-very-long{ font-size: 16px; letter-spacing: 0; }
.vw-premium-domain.is-extreme{ font-size: 14px; letter-spacing: -0.1px; }
.vw-premium-badges{
  display:flex;
  align-items:center;
  gap: 8px;

  flex: 0 0 auto;
}
.vw-premium-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.14);
}
.vw-premium-score{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.14);
  opacity:.9;
}
.vw-premium-desc{
  padding: 0 14px 12px;
  opacity:.9;
  font-size: 13px;
  line-height: 1.45;
}
.vw-premium-desc--small{ font-size: 12.5px; opacity:.88; }

.vw-premium-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 0 14px 12px;
}
.vw-premium-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}

.vw-premium-actions{
  padding: 0 14px 14px;
}
.vw-premium-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  text-decoration:none;
  color:#081b2b;
  background: linear-gradient(180deg, #ffd278, #d6a84e);
  border: 0;
}

/* Row list */
.vw-premium-grid--list{
  grid-template-columns: 1fr;
}
.vw-premium-row{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  padding: 12px 14px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content: space-between;
  position:relative;
}
.vw-premium-row::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
  background: rgba(255,255,255,.18);
  border-radius: 18px 0 0 18px;
}
.vw-premium-rowleft{ flex: 1 1 auto; min-width: 0; }
.vw-premium-rowmeta{ margin-top: 8px; display:flex; flex-wrap:wrap; gap:8px; }
.vw-premium-rowright{ flex: 0 0 auto; }

/* Category pills */
.vw-premium-catbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 6px 0 12px;
}
.vw-premium-pill{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
  color:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 900;
}
.vw-premium-pill.is-active{
  border-color: transparent;
  background: linear-gradient(180deg, #ffd278, #d6a84e);
  color:#081b2b;
}

/* A–Z */
.vw-premium-azgroup{
  margin: 12px 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  padding: 12px 14px;
}
.vw-premium-azletter{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 10px;
  color: rgba(255,210,120,.95);
}
.vw-premium-azlist{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px){
  .vw-premium-azlist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .vw-premium-azlist{ grid-template-columns: 1fr; }
}
.vw-premium-azitem{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration:none;
  color:#fff;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}
.vw-premium-azbadge{
  opacity:.9;
  font-weight: 900;
  color: rgba(255,210,120,.92);
}

/* Note */
.vw-premium-note{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  padding: 14px 14px;
}
.vw-premium-note h3{ margin:0 0 6px; }
.vw-premium-note p{ margin:0; opacity:.86; }
.vw-premium-link{
  display:inline-block;
  margin-top: 10px;
  color: rgba(255,210,120,.95);
  text-decoration:none;
  font-weight: 900;
}

/* FAQ */
.vw-premium-faq{
  margin-top: 20px;
}
.vw-premium-faqitem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  margin: 10px 0;
}
.vw-premium-faqitem summary{
  cursor:pointer;
  font-weight: 900;
}
.vw-premium-faqbody{
  padding: 10px 2px 2px;
  opacity:.9;
  line-height:1.5;
}

/* Tier accents */
.tier-platinum::before{ background: linear-gradient(180deg, #ffe19a, #d6a84e); }
.tier-gold::before{ background: linear-gradient(180deg, #ffd278, #c5963e); }
.tier-silver::before{ background: linear-gradient(180deg, #dfe7ff, #7aa7d6); }
.tier-bronze::before{ background: linear-gradient(180deg, #f0c08a, #b87333); }
.tier-standard::before{ background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12)); }
.tier-none::before{ background: rgba(255,255,255,.18); }

/* Header CTA gold only inside premium page */
.vw-premium-page .vw-site-header .vw-cta{background:linear-gradient(180deg,#ffd278,#d6a84e)!important;color:#081b2b!important;border-color:transparent!important;}



body.vw-premium-page .kundenbereich,
body.vw-premium-page .kundenbereich-button,
body.vw-premium-page .header .vw-cta{
  background: linear-gradient(180deg,#ffd77a,#d6a63e) !important;
  color:#081b2b !important;
  border:none !important;
}


/* Premium-Template: Kundenbereich Button immer gold (stabil gegen Theme-Overrides) */
body.page-template-page-templatespage-premium-domain-php .vw-site-header .vw-cta{
  background: linear-gradient(180deg,#ffd278,#d6a84e) !important;
  color: #081b2b !important;
  border-color: transparent !important;
}


/* Tier badge colors (echtes Gold/Silber/Bronze) */
.vw-premium-badge.tier-gold,
.vw-premium-chip.tier-gold,
.vw-premium-azbadge.tier-gold{
  background: linear-gradient(180deg, #ffe19a, #d6a84e);
  color: #081b2b;
  border-color: rgba(0,0,0,.10);
}
.vw-premium-badge.tier-silver,
.vw-premium-chip.tier-silver,
.vw-premium-azbadge.tier-silver{
  background: linear-gradient(180deg, #f3f6ff, #b9c7d8);
  color: #081b2b;
  border-color: rgba(0,0,0,.10);
}
.vw-premium-badge.tier-bronze,
.vw-premium-chip.tier-bronze,
.vw-premium-azbadge.tier-bronze{
  background: linear-gradient(180deg, #f3c08c, #b87333);
  color: #081b2b;
  border-color: rgba(0,0,0,.10);
}

/* --- Info Modal (A–Z / Alle) --- */
.vw-premium-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(255,210,120,.55);
  background: rgba(0,0,0,.14);
  color: rgba(255,210,120,.98);
}

/* Modal Overlay (wrapper id=#vwPremiumInfoModal uses .vw-premium-modalwrap)
   Keep both classnames supported to avoid version-mix issues. */
.vw-premium-modaloverlay,
.vw-premium-modalwrap{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background: rgba(0,0,0,.55);
  z-index:9999;
}
.vw-premium-modaloverlay.is-open,
.vw-premium-modalwrap.is-open{ display:flex; }

.vw-premium-modal{
  width:min(780px, 100%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,18,30,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  overflow:hidden;
}
.vw-premium-modalhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.vw-premium-modaltitle{
  font-weight:900;
  color: rgba(255,210,120,.98);
  font-size:18px;
}
.vw-premium-modalclose{
  border:0;
  width:34px;
  height:34px;
  border-radius:12px;
  cursor:pointer;
  background: rgba(255,210,120,.14);
  color: rgba(255,210,120,.98);
  font-size:20px;
  line-height:34px;
}
.vw-premium-modalbody{
  padding: 14px 16px 0;
  color: rgba(255,255,255,.92);
  line-height:1.5;
}
.vw-premium-modaldesc{ opacity:.92; }
.vw-premium-modalchips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.vw-premium-modalactions{
  padding: 14px 16px 16px;
}
.vw-premium-btn--inline{
  width:auto;
  padding-left:18px;
  padding-right:18px;
}

/* A–Z item no longer a link */
.vw-premium-azitem{
  cursor: default;
}


/* --- Tier Pills (Alle / Gold / Silber / Bronze) unter Suchfeld --- */
.vw-premium-tierbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.vw-premium-tierpill{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.90);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.vw-premium-tierpill:hover{
  border-color: rgba(255,210,120,.45);
  color: rgba(255,210,120,.95);
}
.vw-premium-tierpill.is-active{
  background: linear-gradient(180deg, #ffd278, #d6a84e);
  border-color: transparent;
  color:#081b2b;
}

/* --- Domainname-Button als Badge (Alle/Kategorien) --- */
.vw-premium-openinfo{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color:#fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 900;
  cursor:pointer;
}
.vw-premium-openinfo:hover{
  border-color: rgba(255,210,120,.45);
  box-shadow: 0 0 0 3px rgba(255,210,120,.10);
}

/* Domaintitel in 'Alle' größer lassen */
.vw-premium-domain .vw-premium-openinfo{
  font-size: 18px;
  line-height: 1.05;
}

/* A–Z: Badge-Button sauber, kein Browser-Button */
.vw-premium-azbadge{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  padding: 6px 10px;
  border-radius: 999px;
  cursor:pointer;
}

/* A–Z: runder i-Button fix */
.vw-premium-azinfo{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(255,210,120,.55);
  background: rgba(0,0,0,.14);
  color: rgba(255,210,120,.98);
  padding:0;
}

/* Info-Button generell: Button-Reset, damit er nicht wie "alter Button" aussieht */
.vw-premium-info{
  -webkit-appearance:none;
  appearance:none;
  padding:0;
}

/* VW: Top Premium heading */
/* Full-width background strip behind the featured section title */
.vw-premium-view[data-view="featured"] .vw-premium-sectiontitle{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: url('../img/top-premium-heading-bg.webp') center / cover no-repeat;
  padding: 34px 0 18px;
}

/* keep inner title centered within the full-width strip */
.vw-premium-view[data-view="featured"] .vw-premium-sectiontitle > span{
  position: relative;
  z-index: 1;
}