:root{
  --c1:#4a98e1;
  --c2:#2ea3f2;
  --ok-bg:#e8f5e9;
  --ok-border:#c8e6c9;
  --ok-text:#1b5e20;
  --bad-bg:#ffebee;
  --bad-border:#ffcdd2;
  --bad-text:#b71c1c;
  --muted:#666;
  --soft:#efefef;
  --overlay: rgba(17,24,39,.6);
  /* Sticky-Header-Ausgleich für Anker-Sprünge */
  --stickyH: 112px; /* ~80px Logo + 2×12px Padding + Linie */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top: var(--stickyH);}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#111;background:#fff}
a{color:var(--c1);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header-Leiste oben */
#top-header{background:var(--c1);color:#fff;font-size:14px}
#top-header .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0}
#top-header a{color:#fff}

/* Haupt-Header */
#main-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e5e7eb}
#main-header .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}

#logo{height:80px;display:block}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{color:rgba(0,0,0,.7);font-weight:600}
nav a:hover{opacity:.7}

/* Hauptmenü — größer, mit klarer Spezifität und Fallback-Schutz */
#main-header nav ul li a{
  font-size:20px !important;   /* stellt sicher, dass Tests wirklich sichtbar sind */
  line-height:1.5;
  font-weight:600;
  letter-spacing:.3px;
}
@media (max-width: 720px){
  #main-header nav ul li a{ font-size:16px !important; }
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  background:url("./images/himmelblau.bewegung.webp") center/cover no-repeat;
  color:#fff;
}
/* dauerhaft mittig ausgerichtet */
.hero-inner{
  max-width:1200px;margin:0 auto;min-height:320px;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:34px 16px;
  text-align:center;
}
.hero .content{z-index:2;max-width:640px;padding-right:0;padding-left:0;margin:0 auto}
.hero h1{margin:0 0 8px 0;font-size:32px}
.hero p{margin:0;opacity:.95}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity .55s ease}
.hero-slide.active{opacity:1}
/* nur skalieren, nicht verzerren */
.hero-art{
  max-width:min(560px,80vw);width:100%;height:auto;object-fit:contain;aspect-ratio:auto;justify-self:center;z-index:1;opacity:0;
  transform:translateX(0) translateY(0) scale(.98);
  transition:opacity .7s ease .1s, transform .7s ease .1s;will-change:transform;
}
@media(max-width:640px){
  .hero h1{font-size:26px}
  .hero-art{max-width:min(440px,70vw)}
}
.slide1 .hero-art{transform:translateX(-60px)}
.slide2 .hero-art{transform:translateX(60px)}
.slide3 .hero-art{transform:translateY(-60px)}
.hero-slide.active .hero-art{opacity:1;transform:translateX(0) translateY(0) scale(1)}

/* Sektionen */
.panel{padding:28px 0}
.panel h2{margin:0 0 12px 0;font-size:24px}
.card{border:1px solid #e5e7eb;border-radius:10px;padding:16px;background:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Prominentes Suchfeld für Domains */
.keywords {
  background: #f6fbff;               /* sehr dezenter Blau-Hintergrund */
  border: 1px solid #cfe9fb;         /* zartes Blau wie var(--c2) Tönung */
  border-radius: 12px;
  padding: 14px;
}

.keywords input[type="text"]{
  flex: 1;
  min-width: 80%;
  font-size: 18px;
  padding: 14px 16px;
  border: 2px solid var(--c2);
  border-radius: 12px;
  outline: none;
  box-shadow: 0 0 0 4px rgba(46,163,242,0.12); /* weicher „glow“ */
  transition: box-shadow .2s, border-color .2s, background-color .2s;
  background-color: #fff;
}

.keywords input[type="text"]::placeholder{
  color: #6b7280;
}

.keywords input[type="text"]:focus{
  border-color: #1289d8;
  box-shadow: 0 0 0 6px rgba(18,137,216,0.15);
}

.keywords button.primary{
  font-size: 16px;
  padding: 14px 18px;
  border-radius: 10px;
}


.tlds{display:flex;gap:10px;flex-wrap:wrap}
.tlds label{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border:1px solid #e5e7eb;border-radius:999px;cursor:pointer;background:#fff}
.tlds input{accent-color:#3b82f6}

/* Ergebnisliste + Scrollbar sichtbar (WebKit/Chromium + Firefox) */
.result-list{
  display:grid;gap:10px;margin-top:12px;max-height:420px;overflow-y:auto;position:relative;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f1f5f9;
  scrollbar-gutter: stable;
}
.result-list::-webkit-scrollbar{width:10px}
.result-list::-webkit-scrollbar-track{background:#f1f5f9}
.result-list::-webkit-scrollbar-thumb{background:#9ca3af;border-radius:999px}
.result-list::-webkit-scrollbar-thumb:hover{background:#6b7280}

.result-list::after{
  /* content:"Scrollen für mehr"; */
  position:sticky;bottom:-1px;left:0;right:0;
  display:block;text-align:center;font-size:12px;color:#666;
  padding:24px 0 6px;
  background:linear-gradient(to top,#fff 60%,transparent);
}
.result-list.scrolled::after{display:none}

.result-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;background:#fff}
.result-item.available{background:var(--ok-bg);border-color:var(--ok-border)}
.result-item.available .availability{color:var(--ok-text)}
.result-item.taken{background:var(--bad-bg);border-color:var(--bad-border)}
.result-item.taken .availability{color:var(--bad-text)}
/* Hosting: Titel + Preis nebeneinander */
.domain-left {
  display: flex;
  justify-content: space-between; /* Titel links, Preis rechts */
  align-items: center;
  gap: 12px;                      /* Abstand zwischen Texten */
  font-size: 1rem;                /* gleiche Größe für beide */
  font-weight: 600;               /* optional fett */
}

.domain-left .domain-name,
.domain-left .price-tag {
  flex: 1 1 auto;
  white-space: nowrap;            /* kein Umbruch */
}
.domain-left .price-tag {
  text-align: right;
}
.domain-name{font-weight:700}
.availability{font-size:13px}
.price-tag{/* font-size:13px; */ color:#111;font-weight:800}
.auth-row{display:flex;gap:8px;align-items:center}
.auth-row input{padding:8px;border:1px solid #cbd5e1;border-radius:8px;min-width:220px}

/* Einheitliche Button-Optik (Domains/Hosting wie Extras) */
.actions .btn{padding:10px 12px;border:1px solid var(--c1);border-radius:8px;background:#2ea3f2;color:#fff;cursor:pointer;font-weight:600}
.actions .btn:hover{background:#1e90e5}
.actions .btn.secondary{background:#fff;color:#e11d48;border-color:#e11d48}
.note{color:#666;font-size:13px;margin-top:6px}

/* Batch-Loader */
#batchMore{margin-top:10px;display:none}

/* Hosting */
.hosting-row{display:grid;gap:12px}
input[type=range]{appearance:none;height:6px;background:#e5e7eb;border-radius:999px;outline:none;position:relative;width:100%}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#3b82f6;cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#3b82f6;border:none;cursor:pointer}

/* Hosting – Bild responsiv */
.hosting-hero{
  display:block;
  width:100%;
  height:auto;
  max-height:360px;         /* Desktop-Deckel */
  object-fit:cover;
  border-radius:10px;
  margin-bottom:12px;
  will-change: transform;   /* für sanftes Scroll-FX */
}

/* Desktop-Range sichtbar, Mobile-Controls versteckt */
.hosting-label,
.hosting-range,
#gbMarks{ display:block; }

.hosting-ctrls{ display:none; }

/* Mobile: Range & Marks aus, große +/- an; Bild kleiner */
@media (max-width: 639px){
  .hosting-hero{ max-height:200px; border-radius:8px; }
  .hosting-label,
  .hosting-range,
  #gbMarks{ display:none; }

  .hosting-ctrls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:8px 0 4px;
  }
  .qty-btn{
    -webkit-appearance:none;
    appearance:none;
    width:56px; height:56px;
    border-radius:14px;
    border:1px solid #cbd5e1;
    background:#f8fafc;
    font-size:28px; line-height:1;
    font-weight:700;
    cursor:pointer;
    user-select:none;
  }
  .qty-btn:active{ transform:scale(0.98); }
  .qty-display{
    min-width:110px;
    text-align:center;
    font-weight:700;
    font-size:22px;
    padding:8px 14px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
  }
}

/* (Optional) Marks leicht kleiner auf Desktop */
.marks .mark{ font-size:12px; }

/* Range-Marks (fixe Sprungpunkte, exakt positioniert) */
.marks{position:relative;height:28px;margin-top:6px}

/* globale Verschiebung aller Marks (hier -20px nach links) */
.marks .mark{
  position:absolute;
  top:0;
  transform:translateX(calc(-50% - 10px)); /* Punkt + Label gemeinsam nach links */
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  color:#555;
  gap:4px;
}

.marks .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9ca3af;
  display:block;
}
.marks .mark.is-active .dot{background:var(--c2)}
.marks .mark button{all:unset;cursor:pointer}

/* Beschriftungen der Marks nie umbrechen (Fix für "50 GB") */
#gbMarks .mark > span{white-space:nowrap;}

/* Extras */
.extras-grid{display:grid;gap:12px}
@media(min-width:700px){.extras-grid{grid-template-columns:repeat(3,1fr)}}
.extra-card .title{font-weight:700;margin-bottom:6px}
.extra-card .meta{color:#555;font-size:14px}
/* Extras: Grafiken in Karten */
/* Karten-Inhalt nicht überlaufen lassen */
.card,
.extra-card {
  overflow: hidden;               /* falls etwas doch größer wäre -> clippen */
}

/* Extras: Grafiken sauber einpassen */
.extra-card img.xtragraphics {
  display: block;
  max-width: 100%;                /* niemals breiter als die Karte */
  width: 100%;                    /* füllt die Kartenbreite */
  height: auto;                   /* Proportionen erhalten */
  margin: 0 auto 8px auto;
  object-fit: contain;            /* falls du unten eine fixe Höhe setzt */
}

/* OPTIONAL: einheitliche Höhe (z.B. 140px). Dann bitte height statt auto. */
@media (min-width: 0) {
  .extra-card img.xtragraphics {
    height: 140px;                /* einheitliche Bildhöhe */
    width: 100%;
    object-fit: contain;          /* zentriert & skaliert, ohne zu beschneiden */
  }
}

/* Floating Cart Button */
.cart-fab{
  position:fixed;right:18px;bottom:18px;z-index:60;
  padding:12px 14px;border-radius:999px;background:#111;color:#fff;border:1px solid #111;cursor:pointer;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.cart-fab small{opacity:.9;font-weight:600}

.badge{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  font-size:12px;
  color:#555;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:999px;
}

/* Mini-Cart-Toast (kurz einblenden) */
#miniCartToast{
  position:fixed; right:18px; bottom:88px; z-index:80;
  background:#111; color:#fff; border:1px solid #111; border-radius:12px;
  padding:12px 14px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s, transform .25s;
}
#miniCartToast.show{opacity:1; transform:translateY(0); pointer-events:auto}
#miniCartToast .btn{background:#fff; color:#111; border-color:#fff; padding:8px 10px}

/* Cart Overlay / Panel (für cart.html, falls genutzt) */
.overlay{position:fixed;inset:0;background:var(--overlay);display:none;z-index:70}
.overlay.open{display:block}
.cart-panel{
  position:fixed;inset:auto 0 0 auto;right:0;top:0;height:100%;width:min(520px,92vw);
  background:#fff;border-left:1px solid #e5e7eb;box-shadow:-8px 0 24px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .35s ease;z-index:75;display:flex;flex-direction:column
}
.cart-panel.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e5e7eb}
.cart-head h3{margin:0}
.cart-body{padding:14px 16px;overflow:auto;flex:1}
.cart-foot{padding:14px 16px;border-top:1px solid #e5e7eb}
.cart-empty{color:#777}
.cart-list{display:grid;gap:10px}
.cart-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#fff}
.cart-item .title{font-weight:600}
.cart-item small{color:#777}
.cart-total{margin-top:10px;font-weight:700;line-height:1.35}
.btn{display:inline-block;margin-top:6px;padding:10px 12px;border-radius:8px;border:1px solid #2ea3f2;color:#fff;background:#2ea3f2;cursor:pointer}
.btn.secondary{background:#fff;color:#e11d48;border-color:#e11d48}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Checkout form */
.checkout{margin-top:12px;display:grid;gap:8px}
.checkout .row2{display:grid;gap:8px}
@media(min-width:640px){.checkout .row2{grid-template-columns:1fr 1fr}}
.checkout input,.checkout textarea{padding:10px;border:1px solid #cbd5e1;border-radius:8px;width:100%}
/* Checkbox-Zeilen im Checkout linksbündig */
.checkout label{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px;text-align:left;width:100%;line-height: 1.4;
}
.checkout label input[type="checkbox"]{margin-top:2px}

/* Testimonials */
.testimonials{display:grid; gap:12px}
@media(min-width:700px){ .testimonials{grid-template-columns:repeat(3,1fr)} }
.testimonial-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  text-align: center; /* mittig ausgerichtet */
}
.testimonial-card .avatar {
  width: 80px;      /* Größe nach Bedarf */
  height: 80px;
  border-radius: 50%; /* rund */
  object-fit: cover;  /* sauberer Ausschnitt */
  margin: 0 auto 10px; /* mittig + Abstand unten */
  display: block;
}
.testimonial-card .name {
  font-weight: 700;
  margin-bottom: 6px;
}
.testimonial-card .quote {
  color: #444;
  font-style: italic; /* kursiv für die Zitate */
}
/* Footer – zentriert & mobilfreundlich */
footer{
  padding:24px 12px; border-top:1px solid #eef2f7; color:#0f172a;
}
footer .container, footer .footer-row{ 
  max-width:1000px; margin:0 auto; 
}
footer .footer-note{ 
  text-align:center; margin:8px 0 16px; opacity:.9; 
}
footer .footer-nav{
  display:flex; flex-wrap:wrap; justify-content:center; 
  gap:10px 18px; margin:10px 0;
}
footer .footer-nav a{
  display:inline-block; padding:8px 10px; 
  text-decoration:none; border-radius:10px;
  line-height:1.2;
}
footer .footer-brand{ 
  text-align:center; font-size:.95rem; opacity:.9; margin-bottom:6px;
}

/* Optional: leichte Hover-Andeutung – dezent */
footer .footer-nav a:hover{ background:#f1f5f9; }

/* Sehr kleine Screens: etwas mehr Zeilenabstand */
@media (max-width:420px){
  footer .footer-nav{ gap:8px 12px; }
  footer .footer-nav a{ padding:10px 12px; }
}

/* Anker-Sektionen mit zusätzlichem Offset */
#domains, #hosting, #extras{ scroll-margin-top: var(--stickyH); }