/* =========================================================
   all.css – GOLD STANDARD (FINAL MERGE)
========================================================= */

/* ---------- Tokens ---------- */
:root {
    --brand-gold: #ff9900;
    --brand-teal: #22d3ee;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* ---------- Body ---------- */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #020617;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    background: linear-gradient(
        120deg,
        #020617 0%,
        #0f172a 50%,
        #1e293b 100%
    );
    border-bottom: 1px solid rgba(148,163,184,.4);
}

.header-inner.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    text-align: center;
}

.site-title {
    margin: 0 0 2px 0;
    font-size: clamp(24px,3.5vw,36px);
    letter-spacing: .04em;
    color: var(--brand-gold);
}

/* ---------- Language Bar ---------- */
.header-langbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Weltkugel */
.lang-switch-symbol {
    font-size: 18px;
    text-decoration: none;
    transition: color .2s ease;
}

a.lang-switch-symbol { color: #cccccc; }

a.lang-switch-symbol:hover,
a.lang-switch-symbol:focus-visible {
    color: var(--brand-teal);
    text-decoration: none;
}

/* ---------- Language Dropdown ---------- */
.lang-dropdown { position: relative; font-size: 14px; }

.lang-dropdown summary {
    list-style: none;
    cursor: pointer;
}
.lang-dropdown summary::-webkit-details-marker { display: none; }

.lang-dropdown-toggle {
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255,153,0,.08);
    color: var(--brand-gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-dropdown-toggle:hover,
.lang-dropdown-toggle:focus-visible,
.lang-dropdown[open] .lang-dropdown-toggle {
    background: rgba(255,153,0,.18);
}

/* Menü */
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px 0;
    list-style: none;
    z-index: 2000;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

.lang-dropdown-menu li a,
.lang-dropdown-menu li span {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
}

.lang-dropdown-menu li a {
    color: #f5f5f5;
    text-decoration: none;
}
.lang-dropdown-menu li a:hover {
    background: rgba(255,153,0,.15);
    color: var(--brand-gold);
}
.lang-dropdown-menu li.active span {
    font-weight: 600;
    color: var(--brand-gold);
}

/* ---------- Main ---------- */
main {
    flex: 1;
    padding: 26px 16px 32px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.container {
    max-width: 900px;
    width: 100%;
    background: #020617;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.6);
    padding: 20px 18px 26px;
    box-shadow: 0 18px 40px rgba(15,23,42,.9);
    text-align: center;
}

/* ---------- SALE / MAINTENANCE Aliase ---------- */
.container.hero { text-align: center; }

/* Die SALE-/MAINTENANCE-Bilder hängen im .image-wrapper; diese Klasse dient als Alias */
.sale-image { width: 380px; max-width: 100%; height: auto; }

.domain-seo-block { text-align: left; margin-top: 24px; }
.domain-seo-links { margin-top: 10px; text-align: center; }

/* ---------- Typography ---------- */
h2 { margin: 14px 0 6px; font-size: 22px; }
p  { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }


/* ---------- Typography (Ergänzung) ---------- */
/* H1/H3 bewusst nur im Content-Bereich (.site-main), damit Header-Titel nicht verändert wird */
.site-main h1 { margin: 14px 0 14px; font-size: 26px; }
.site-main h3 { margin: 14px 0 6px; font-size: 16px; }



/* ---------- Domain: goldene Themenüberschriften ---------- */
.domain-profile h3 { color: var(--brand-gold); }
/* ---------- Listen: mehr Luft + gleiche Schriftgröße wie <p> ---------- */
.site-main .container ul,
.site-main .container ol {
    margin: 12px 0 18px;
    padding-left: 20px;
}

.site-main .container li {
    margin: 3px 0;
    font-size: 14px;
    line-height: 1.35;
}

/* ---------- Keywords (Domain): Inline-Tags mit zartem Punkttrenner ---------- */
.keywords-inline {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
}

.keywords-inline .kw-sep {
    margin: 0 3px;
    opacity: .55;
}


/* Keywords: lange Wörter/Komposita (DE/NL) zuverlässig im Rahmen umbrechen */
.keywords-inline .kw-item {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere; /* moderne Browser */
    word-break: break-word;  /* Fallback */
    hyphens: auto;
}

/* ---------- Image ---------- */
.image-wrapper {
    margin: 16px 0 24px;
    display: flex;
    justify-content: center; /* Standard: SALE/MAINTENANCE (Desktop & Mobile) */
}

/* SALE: Kein doppelter Abstand zwischen Bild und erstem Textblock */
.image-wrapper.image-wrapper--sale {
    margin-bottom: 0;
}
.image-wrapper.image-wrapper--sale + .seo-block {
    margin-top: 8px;
}
.image-wrapper.image-wrapper--sale + section.domain-seo-block,
.image-wrapper.image-wrapper--sale + .domain-seo-block,
.image-wrapper.image-wrapper--sale + .domain-seo-links {
    margin-top: 0;
}



.image-wrapper img {
    width: 380px;
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.8);
}

/* ---------- Page-spezifisch: DOMAIN/LEGAL ----------
   SALE + MAINTENANCE: immer zentriert
   DOMAIN + LEGAL: Desktop linksbündig, Mobile zentriert
----------------------------------------------------- */
.image-wrapper.legal-image {
    margin:    0 0 0 0;
}
.image-wrapper.legal-image + .domain-hero{
    margin-top: 8px;
}
.package-note{ margin: 0; }
.package-note + .pkg-domains{ margin-top: 0; }


@media (min-width: 601px) {
    .image-wrapper.legal-image {
        justify-content: flex-start; /* Desktop */
    }
}

/* ---------- SEO Blocks ---------- */
.seo-block { margin-top: 24px; }

/* ---------- Links ---------- */
a { color: var(--brand-gold); text-decoration: none; }
a:hover,
a:focus-visible { color: var(--brand-teal); text-decoration: underline; }

.external-icon {
    color: #cccccc;
    font-size: .85em;
    pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #020617;
    color: #9ca3af;
    padding: 20px;
    border-top: 1px solid rgba(51,65,85,.8);
    font-size: 13px;
    text-align: center;
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-nav {
    order: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.footer-inner .copyright { order: 2; }

.footer-separator {
    color: #555;
    margin: 0 2px;
    line-height: 1;
}

.footer-link { color: var(--brand-gold); }

/* ---------- Legal Pages ---------- */
.legal-page .container,
.legal-page p,
.legal-page li,
.legal-page h2,
.legal-page h3 {
    text-align: left;
}

.legal-page ul {
    padding-left: 20px;
    margin: 12px 0 18px;
}


.legal-page h3 {
    color: var(--brand-gold);
}
/* ---------- Legal Page Images ---------- */
.legal-image {
    margin:  0 0 8px 0;
    text-align: center;
}

.legal-image img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.8);
}

/* ---------- Accessibility ---------- */
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .footer-nav { gap: 6px; }
    .lang-dropdown-menu { min-width: 200px; }
}

/* =====================================================
   Domain Profile – Gold-Standard v3.4
   Layout: Bild oben, Text darunter
   Bild: Desktop linksbündig, Mobile zentriert (über .image-wrapper.legal-image)
===================================================== */

.domain-profile {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.domain-profile h2 {
    margin-bottom: 12px;
}

.domain-profile .domain-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;               /* kein doppelter Abstand (margin + gap) */
    margin:  0 0 8px 0;   /* wie legal.php */
    align-items: start;
}

.domain-profile .domain-hero img {
    width: 380px;         /* gleiche Bildgröße wie legal.php */
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.8);
}

.domain-profile .domain-description {
    font-size: 14px;
    line-height: 1.6;
}

.domain-profile h3 {
    margin: 14px 0 6px;
    font-size: 16px;
}

.domain-profile ul {
    padding-left: 20px;
    margin: 12px 0 18px;
}

/* Geo-Märkte: wie Märkte/Zielgruppen als Liste rendern */
.domain-profile ul.geo-markets-list {
    padding-left: 20px;
    margin: 12px 0 18px;
}
.domain-profile ul.geo-markets-list li {
    margin: 3px 0;
    font-size: 14px;
    line-height: 1.35;
}



/* Inline-Dot-Separator (Keywords / Paketdomains) */

.inline-dots{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.inline-dots a,
.inline-dots .kw{
    white-space: normal;
}
.inline-dots .inline-dot {
    margin: 0 4px;   /* Abstand der Separatoren */
    opacity: .55;
}
.domain-profile li {
    margin: 3px 0;
    font-size: 14px;
    line-height: 1.35;
}


.domain-profile .item-title { font-weight: 400; }
@media (max-width: 700px) {
    .domain-profile .domain-hero {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Backlink – systemweit konsistent
========================================================= */

.backlink,
.back-link {
    display: block;
    margin-top: 1.5rem;
}

.legal-page .backlink,
.legal-page .back-link {
    margin-top: 1rem;
}

.domain-profile .backlink,
.domain-profile .back-link {
    margin-top: 1.25rem;
}



/* ---------- Domain Package Box ---------- */
.package-box{
    margin: 18px 0 26px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    }

.package-box p{
    margin: 6px 0;
}

.package-title strong,
.package-domains strong,
.package-master strong{
    font-weight: 700;
}

.package-domains a,
.package-master a{
    text-decoration: none;
}

.package-domains a:hover,
.package-master a:hover{
    text-decoration: underline;
}

/* Trennerpunkt wie bei Keywords */
.package-box .kw-sep{
    margin: 0 4px;
    opacity: .55;
}


/* Domain-Profil: Abstand zwischen Beschreibung und erster Sektion reduzieren */
.domain-profile .domain-description p:last-child{margin-bottom:0;}
.domain-profile h3:first-of-type{margin-top:0;}


/* === v3.8 TYPO-NORMALIZATION (project-wide) === */
:where(.site-main .container, .legal-page .container) {
    /* Ensures consistent readable body text across pages */
    font-size: 14px;
    line-height: 1.6;
}

:where(.site-main .container, .legal-page .container) :is(ul, ol) {
    margin: 12px 0 18px;
    padding-left: 20px;
}

:where(.site-main .container, .legal-page .container) li {
    margin: 3px 0;
    font-size: 14px;
    line-height: 1.35;
}

/* Long strings (domains/keywords): keep inside container */
:where(.site-main .container, .legal-page .container) :is(a, .kw-item, .pkg-link, .domain-label) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile spacing slightly tighter */
@media (max-width: 600px) {
    :where(.site-main .container, .legal-page .container) :is(ul, ol) {
        margin: 10px 0 16px;
    }
}

/* Utility */
.text-center { text-align: center; }


/* ---------- Domain: Inline-Dots (Package + Keywords) ---------- */
.package-box .pkg-domains{ margin: 8px 0 6px; }
.package-box .pkg-link.is-selected{ text-decoration: underline; font-weight: 700; }

.domain-profile .keywords-inline{ margin: 6px 0 0; }
.domain-profile .keywords-inline .kw{ white-space: nowrap; }

/* ---------- Domain: CTA (mailto) ---------- */
.domain-profile .cta-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
}
.domain-profile .cta-link:hover{ text-decoration: underline; }
.domain-profile .cta-icon{ opacity: .85; }


/* ---------- Domain: CTA Box & Sticky ---------- */
.domain-profile .cta-box{
    margin: 18px 0 6px;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    text-align: center;
}

.domain-profile .cta-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    text-decoration: none;
}

.domain-profile .cta-button:hover{
    border-color: rgba(255,255,255,.26);
}

.domain-profile .cta-button .cta-icon{
    opacity: .9;
}

.domain-profile .cta-sticky{
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.55);
    text-decoration: none;
    z-index: 999;
}

.domain-profile .cta-sticky:hover{
    border-color: rgba(255,255,255,.30);
}

@media (min-width: 980px){
    /* Sticky CTA nur mobil/tablet – auf Desktop reicht die Box */
    .domain-profile .cta-sticky{ display:none; }
}


/* Domain: Keine Fettdruck-Ausgabe in Content-Listen */
.domain-profile strong{ font-weight: inherit; }
.domain-profile .uc-title{ font-weight: 400; }


/* --- Sticky Tools (Back to top) --- */
/* Old sticky mail CTA (disabled) */
.cta-sticky{ display:none !important; }

/* Sticky container inside the content frame (container), not in footer */
.site-main .sticky-tools{
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 14px;
  z-index: 5;
  pointer-events: auto;

  width: 100%;
  clear: both;
}

/* 3er-Stack: Home + Mail + Up */
.site-main .sticky-tools .sticky-stack{
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.site-main .sticky-top{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration: none;
}

.site-main .sticky-top:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
}

.site-main .sticky-top-icon{
  font-size: 1.1rem;
  line-height: 1;
  opacity: .9;
}

/* Old sticky mail CTA (disabled) */
.cta-sticky{ display:none !important; }

/* Sticky container inside main content so it won't overlap footer */
.site-main .sticky-tools{
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 14px;
  z-index: 5;
  pointer-events: auto;

  width: 100%;
  clear: both;
}

.site-main .sticky-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration: none;
}

.site-main .sticky-top:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
}

.site-main .sticky-top-icon{
  font-size: 1.1rem;
  line-height: 1;
  opacity: .9;
}


/* --- OPT-4: Facts Block (Domain) --- */
.lp-facts{
  margin: 0.5rem 0 1rem;
}
.lp-facts-row{
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.lp-facts-row:first-child{ border-top: 0; }
.lp-facts-key{ min-width: 12rem; opacity: .9; }
.lp-facts-val{ flex: 1; overflow-wrap: anywhere; }
@media (max-width: 640px){
  .lp-facts-row{ flex-direction: column; gap: 0.2rem; }
  .lp-facts-key{ min-width: unset; font-weight: 600; }
}


/* --- OPT-5: Markets / Geo Markets – 2-Spalten auf Desktop --- */
@media (min-width: 900px){
  .lp-columns{
    column-count: 2;
    column-gap: 2rem;
  }
  .lp-columns li{
    break-inside: avoid;
  }
}


/* --- OPT-1/9: Card Styling (Domain) --- */
.package-box,
.domain-section--buyer_value,
.domain-section--rights_summary,
.domain-trademark{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.package-box h3,
.domain-section--buyer_value h3,
.domain-section--rights_summary h3,
.domain-trademark h3{
  margin-top: 0;
}

.domain-profile .domain-section{
  margin: 14px 0;
}

@media (min-width: 900px){
  .package-box,
  .domain-section--buyer_value,
  .domain-section--rights_summary,
  .domain-trademark{
    padding: 18px 20px;
    margin: 16px 0;
  }
}

/* OPT-9: Package list spacing */
.pkg-domains{ margin-top: 8px; }



/* Sticky Actions – Hover/Focus Glow (brand-teal) + sichere Klickbarkeit */
.site-main .sticky-tools{
  pointer-events: auto;
  z-index: 50;
}
.site-main .sticky-tools .sticky-stack{
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.site-main .sticky-top{
  pointer-events: auto;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.site-main .sticky-top .sticky-top-icon{
  color: var(--brand-teal);
  font-weight: 400;
}
.site-main .sticky-top:hover,
.site-main .sticky-top:focus-visible{
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06), 0 0 0 6px rgba(0, 160, 170, .18);
  background: rgba(255,255,255,.09);
}
.site-main .sticky-top:focus-visible{
  outline: none;
}



/* Abstand Bild → erstes Element (wie sale.php) */
.image-wrapper.legal-image{ margin-bottom: 0; }
.image-wrapper.legal-image + .domain-hero{ margin-top: 8px; }
.legal-page .image-wrapper.legal-image + .legal-content,
.legal-page .image-wrapper.legal-image + h2,
.legal-page .image-wrapper.legal-image + h3,
.legal-page .image-wrapper.legal-image + p{ margin-top: 8px; }

/* Sticky (JS-frei) – Klickbar + brand-teal */
.site-main .sticky-tools{ pointer-events: auto !important; z-index: 9999 !important; }
.site-main .sticky-top .sticky-top-icon{ color: var(--brand-teal) !important; font-weight: 400 !important; }