/* =========================================================
CLEAN SEO HERO (HELLOLY LIGHT MODE)
========================================================= */
/* Wide Container für den Hero-Bereich */
.hl-hero-container-wide {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* Auf Desktop-Bildschirmen die 135rem erzwingen */
@media (min-width: 1400px) {
.hl-hero-container-wide {
max-width: 135rem !important;
}
}
/* Sicherstellen, dass die Card im Wide-Container immer 100% einnimmt */
.hl-clean-hero-card {
width: 100% !important;
max-width: none !important;
}
/* Korrektur für die Suchleiste: Wenn der Hero breiter wird,
sollte die Suchleiste nicht unendlich lang werden */
.hl-clean-search-wrapper {
max-width: 65rem; /* Oder ein Wert deiner Wahl */
}
.hl-clean-hero-wrapper {
padding: 4rem 0;
background: transparent;
clear: both; /* DER FIX: Verhindert das Unterrutschen unter gefloatete Header-Elemente */
display: block; /* Sicherstellen, dass clear greift */
}
/* Die Hauptkarte (Heller SaaS-Look) */
.hl-clean-hero-card {
background-color: #f4f7fb;
border-radius: 2.4rem;
padding: 5rem 4rem;
}
/* --- LINKE SPALTE: TYPOGRAFIE & INHALT --- */
.hl-hero-badge {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.6rem;
background: rgba(0, 173, 139, 0.1);
color: #00ad8b;
border: 1px solid rgba(0, 173, 139, 0.15);
border-radius: 5rem;
font-size: 1.3rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.hl-clean-hero-card h1 {
color: #0f263e !important; /* Dunkles Navy für maximalen Kontrast */
font-size: clamp(3.2rem, 5vw, 4.6rem) !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
line-height: 1.2 !important;
margin: 0 0 2.5rem 0 !important;
}
.hl-clean-hero-card h1 .mint-text {
color: #00ad8b;
}
/* Die SEO-Checkliste */
.hl-seo-checklist {
list-style: none;
padding: 0;
margin: 0 0 3rem 0;
}
.hl-seo-checklist li {
font-size: 1.7rem;
color: #475569; /* Weiches Schiefergrau */
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 1.2rem;
font-family: var(--font-reg, 'Poppins', sans-serif);
}
.hl-seo-checklist li i {
color: #00ad8b;
font-size: 1.6rem;
}
/* Der klare Preis */
.hl-hero-price {
font-size: 3.6rem;
color: #0f263e;
font-family: var(--font-semi, 'Poppins', sans-serif);
margin-bottom: 3.5rem;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.hl-hero-price span {
font-size: 1.3rem;
color: #64748b;
font-weight: normal;
font-family: Poppins !important;
}
/* --- DIE SUCHLEISTE --- */
.hl-clean-search-wrapper {
max-width: 65rem;
}
.hl-clean-search-form {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 5rem;
padding: 0.6rem;
display: flex;
align-items: center;
box-shadow: 0 1rem 2rem rgba(0,0,0,0.03);
transition: all 0.3s ease;
}
.hl-clean-search-form:focus-within {
border-color: #00ad8b;
box-shadow: 0 0 0 4px rgba(0, 173, 139, 0.15);
}
.hl-clean-search-input {
flex-grow: 1;
background: transparent !important;
border: none !important;
box-shadow: none !important;
height: 5.4rem;
padding: 0 1rem 0 2rem;
font-size: 1.8rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
color: #0f263e !important;
outline: none !important;
}
.hl-clean-search-input::placeholder {
color: #94a3b8;
}
.hl-tld-display {
font-size: 2.2rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
color: #94a3b8;
padding-right: 1.5rem;
user-select: none;
}
.hl-clean-search-btn {
background: #00ad8b;
color: #ffffff;
border: none;
border-radius: 5rem;
height: 5.4rem;
padding: 0 3.5rem;
font-size: 1.6rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
cursor: pointer;
transition: background 0.3s ease;
}
.hl-clean-search-btn:hover {
background: #009678;
}
/* --- RECHTE SPALTE: DEZENTE GLAS-KARTE (LIGHT MODE) --- */
.hl-subtle-visual-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
padding: 2rem;
}
.hl-subtle-glass-card {
background: rgba(255, 255, 255, 0.6); /* Weißer Frosted Glass Effekt */
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 2rem;
padding: 4rem 6rem;
text-align: center;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1.5rem 4rem rgba(15, 38, 62, 0.08); /* Sehr weicher, dunkler Schatten */
}
.hl-subtle-glass-card h3 {
font-size: clamp(4.5rem, 5vw, 6.5rem) !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
color: #0f263e !important; /* Dunkles Navy für perfekte Lesbarkeit */
margin: 0 0 0.5rem 0 !important;
line-height: 1 !important;
letter-spacing: -1px;
text-shadow: none !important;
}
.hl-subtle-glass-card p {
font-size: 1.4rem !important;
color: #64748b !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
margin: 0 !important;
text-transform: uppercase;
letter-spacing: 3px;
}
/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 991px) {
/* Karte kompakter machen */
.hl-clean-hero-card {
padding: 4rem 2.5rem;
text-align: left;
}
/* Suchleiste untereinander anordnen (Isoliert für Hero, greift nicht ins Sticky-Menü ein) */
.hl-clean-search-wrapper .hl-clean-search-form {
flex-direction: column !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.hl-clean-search-wrapper .hl-clean-search-form:focus-within {
box-shadow: none !important;
}
.hl-clean-search-wrapper .hl-clean-search-input {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 5rem !important;
width: 100% !important;
margin-bottom: 1.2rem !important;
text-align: center !important;
padding: 0 2rem !important;
box-shadow: 0 1rem 2rem rgba(0,0,0,0.03) !important;
height: 5.4rem !important;
}
/* Die feste TLD Endung im Feld am Handy ausblenden für mehr Platz */
.hl-clean-search-wrapper .hl-tld-display {
display: none !important;
}
/* Button auf volle Breite ziehen */
.hl-clean-search-wrapper .hl-clean-search-btn {
width: 100% !important;
}
}
/* Spezifischer Fix für sehr kleine Handys (z.B. iPhone SE) */
@media (max-width: 400px) {
.hl-clean-hero-card h1 {
font-size: 2.8rem !important;
}
.hl-hero-price {
font-size: 2.8rem;
flex-direction: column;
gap: 0;
}
}
/* =========================================================
INTENSE MINIMAL EYECATCHER (PURE GLOW)
========================================================= */
.hl-pure-visual-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 380px;
padding: 2rem;
}
/* Der verstärkte Farbnebel */
.hl-pure-orb {
position: absolute;
width: 320px;
height: 320px;
background: radial-gradient(circle, #00ad8b 0%, #0297fe 100%);
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
z-index: 0;
animation: floatIntenseOrb 8s ease-in-out infinite alternate;
}
/* Der Content-Container im Vordergrund */
.hl-pure-content {
position: relative;
z-index: 1;
text-align: center;
}
/* Die dynamische TLD - Riesig, nackt und absolut im Fokus */
.hl-pure-content h3 {
font-size: clamp(7.5rem, 9vw, 12rem) !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
color: #0f263e !important;
margin: 0 !important;
line-height: 1 !important;
letter-spacing: -4px;
/* Doppelter Schutz-Glow für perfekte Lesbarkeit */
text-shadow:
0 0 40px rgba(255, 255, 255, 1),
0 0 15px rgba(255, 255, 255, 0.6);
}
/* Subtiler Text darunter */
.hl-pure-content p {
font-size: 1.6rem !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
margin: 1.5rem 0 0 0 !important;
letter-spacing: 6px;
text-transform: uppercase;
}
/* Kraftvollere Bewegung und Atmung */
@keyframes floatIntenseOrb {
0% { transform: scale(0.9) translate(15px, 15px); opacity: 0.35; }
100% { transform: scale(1.25) translate(-15px, -15px); opacity: 0.75; }
}
html {
scroll-behavior: smooth;
}
.hl-domain-intro-section {
padding: 8rem 0 6rem 0; /* Viel Luft zum Atmen */
background-color: #ffffff;
text-align: center;
}
.hl-domain-intro-content {
max-width: 800px; /* Begrenzte Breite für optimale Lesbarkeit */
margin: 0 auto;
padding: 0 2rem;
}
.hl-intro-badge {
display: inline-block;
padding: 0.6rem 1.6rem;
background: rgba(0, 173, 139, 0.1);
color: #00ad8b;
border-radius: 5rem;
font-size: 1.3rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2.5rem;
}
.hl-domain-intro-content h2 {
font-size: var(--fluid-h2) !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
line-height: 1.2 !important;
margin-bottom: 2.5rem !important;
letter-spacing: -1px;
}
.hl-domain-intro-content p {
font-size: 1.7rem;
color: #64748b;
font-family: var(--font-reg, 'Poppins', sans-serif);
line-height: 1.7;
margin: 0;
}
.hl-domain-intro-content strong {
color: #0f263e;
}
.hl-features-section {
padding: 6rem 0 8rem 0;
font-family: var(--font-reg, 'Poppins', sans-serif);
}
.hl-features-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 3rem;
padding: 6rem 5rem;
box-shadow: 0 2rem 5rem rgba(15, 38, 62, 0.04);
}
/* LINKE SPALTE: Der Titel */
.hl-features-heading-wrapper {
padding-right: 3rem;
}
.hl-badge-features {
display: inline-block;
padding: 0.6rem 1.6rem;
background: rgba(15, 38, 62, 0.05);
color: #64748b;
border-radius: 5rem;
font-size: 1.2rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2rem;
}
/* Hier fangen wir dein aus der Datenbank automatisch ab! */
.hl-features-heading-wrapper h2 {
font-size: var(--fluid-h2) !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
line-height: 1.2 !important;
margin: 0 !important;
letter-spacing: -1px;
}
/* RECHTE SPALTE: Die Liste */
.hl-features-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2rem; /* Abstand zwischen den Listenpunkten */
}
/* Wir stylen deine Datenbank
Tags um */
.hl-features-list li {
position: relative;
padding-left: 4.5rem;
font-size: 1.6rem;
color: #475569;
line-height: 1.6;
}
/* Das Custom SVG-Checkmark Icon (funktioniert immer, ohne FontAwesome) */
.hl-features-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.2rem;
width: 28px;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ad8b'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Falls in der Liste ein Logo ist (wie z.B. nic.at in deinem Beispiel) */
.hl-features-list li img {
display: block;
margin-top: 1.5rem;
max-height: 40px;
width: auto;
}
/* B-Tags aus der Datenbank (wie "Gratis .AT Domain") schön hervorheben */
.hl-features-list li b,
.hl-features-list li strong {
color: #0f263e;
font-family: var(--font-semi, 'Poppins', sans-serif);
}
@media (max-width: 991px) {
.hl-features-card { padding: 4rem 3rem; }
.hl-features-heading-wrapper { padding-right: 0; margin-bottom: 4rem; }
}
/* =========================================================
EDITORIAL BLUEPRINT DASHBOARD CSS (Smart Version)
========================================================= */
html, body { overflow-x: visible !important; }
.hl-editorial-section.blueprint-mode {
padding: 8rem 0;
background-color: #f8fafc;
font-family: var(--font-reg, 'Poppins', sans-serif);
overflow: visible !important;
border-top: 1px solid #e2e8f0;
}
.hl-editorial-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: start;
}
.hl-editorial-sidebar-wrapper { height: 100%; }
.hl-editorial-sidebar.hl-blueprint-navigator {
position: -webkit-sticky;
position: sticky;
top: 140px;
background: #ffffff;
padding: 4rem;
border-radius: 2.5rem;
border: 1px solid #e2e8f0;
box-shadow: 0 1.5rem 4rem rgba(15, 38, 62, 0.04);
}
.hl-editorial-badge.hl-tech-badge {
display: inline-block;
padding: 0.6rem 1.6rem;
background: rgba(0, 173, 139, 0.1);
color: #00ad8b;
border-radius: 5rem;
font-size: 1.2rem;
font-family: var(--font-semi, 'Poppins', sans-serif);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2rem;
}
.hl-editorial-badge.hl-tech-badge i {
color: #00ad8b !important;
margin-right: 0.5rem;
}
.hl-editorial-sidebar h3 {
font-size: 1.7rem !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
line-height: 1.3 !important;
margin: 0 !important;
border: none !important;
}
.hl-blueprint-list {
flex-direction: column !important;
margin-top: 3rem !important;
gap: 1rem !important;
padding: 0 !important;
list-style: none !important;
}
.hl-blueprint-list > li > a {
display: flex !important;
align-items: center !important;
gap: 1.5rem !important;
padding: 1.2rem 1.5rem !important;
color: #64748b !important;
font-size: 1.4rem !important;
font-family: var(--font-semi, 'Poppins', sans-serif);
text-transform: uppercase;
letter-spacing: 1px;
border: none !important;
border-radius: 1.5rem !important;
transition: all 0.3s ease;
text-decoration: none !important;
cursor: pointer;
}
.hl-blueprint-list > li > a:hover {
color: #0f263e !important;
background: #f1f5f9 !important;
}
.hl-blueprint-list > li.active > a {
color: #00ad8b !important;
background: rgba(0, 173, 139, 0.1) !important;
}
.hl-blueprint-icon { font-size: 1.6rem; color: #94a3b8; transition: color 0.3s ease; }
.hl-blueprint-list > li.active .hl-blueprint-icon { color: #00ad8b !important; }
.hl-editorial-content.hl-blueprint-content-box {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 2.5rem !important;
padding: 5rem 6rem !important;
box-shadow: 0 1.5rem 4rem rgba(15, 38, 62, 0.04) !important;
position: relative;
}
.hl-blueprint-tab-pane {
display: none;
animation: fadeBlueprintIn 0.5s ease forwards;
}
.hl-blueprint-tab-pane.active { display: block; }
@keyframes fadeBlueprintIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hl-blueprint-heading {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #f1f5f9;
}
.hl-blueprint-heading h4 {
font-size: 1.9rem !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
margin: 0 !important;
}
.hl-blueprint-block-icon {
font-size: 2.2rem;
color: #00ad8b;
background: rgba(0, 173, 139, 0.1);
padding: 1rem;
border-radius: 1rem;
}
.hl-blueprint-mode .hl-editorial-content p {
font-size: 1.6rem;
color: #475569;
line-height: 1.8;
margin-bottom: 2.5rem;
}
.hl-blueprint-mode .hl-editorial-content b,
.hl-blueprint-mode .hl-editorial-content strong {
color: #0f263e;
font-family: var(--font-semi, 'Poppins', sans-serif);
font-weight: normal;
}
.hl-blueprint-mode .hl-editorial-content a {
color: #00ad8b !important;
text-decoration: none !important;
border-bottom: 2px solid rgba(0, 173, 139, 0.3) !important;
transition: all 0.3s ease !important;
font-family: var(--font-semi, 'Poppins', sans-serif);
}
.hl-blueprint-mode .hl-editorial-content a:hover {
color: #0f263e !important;
border-bottom-color: #0f263e !important;
}
@media (max-width: 991px) {
.hl-editorial-grid { grid-template-columns: 1fr; gap: 4rem; }
.hl-editorial-sidebar { position: relative; top: 0; padding: 3rem; }
.hl-blueprint-mode .hl-editorial-content.hl-blueprint-content-box { padding: 3rem !important; }
}
/* Links überschreiben (Zerstört JEDEN Inline-Style wie color:#fa8072 aus der DB!) */
.hl-blueprint-content-box a,
.hl-blueprint-tab-pane a,
.hl-blueprint-text-body a {
color: #00ad8b !important;
text-decoration: none !important;
border-bottom: 2px solid rgba(0, 173, 139, 0.3) !important;
transition: all 0.3s ease !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-blueprint-content-box a:hover,
.hl-blueprint-tab-pane a:hover,
.hl-blueprint-text-body a:hover {
color: #0f263e !important;
border-bottom-color: #0f263e !important;
}
/* =========================================================
Text & Typografie (KORRIGIERT)
========================================================= */
.hl-editorial-content p {
font-size: 1.6rem;
color: #0f263e;
line-height: 1.6;
margin-bottom: 3.5rem;
}
/* WICHTIG: Lead-Paragraph in jedem Tab ODER beim puren Fallback-Text */
.hl-editorial-content > p:first-of-type,
.hl-blueprint-tab-pane p:first-of-type {
font-size: 1.6rem;
color: #0f263e;
line-height: 1.6;
margin-bottom: 3.5rem;
}
.hl-editorial-content b,
.hl-editorial-content strong {
color: #0f263e;
font-family: var(--font-semi, 'Poppins', sans-serif);
font-weight: normal;
}
/* Links überschreiben (Greift jetzt auf allen Ebenen) */
.hl-editorial-content a {
color: #00ad8b !important;
text-decoration: none !important;
border-bottom: 2px solid rgba(0, 173, 139, 0.3) !important;
transition: all 0.3s ease !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-editorial-content a:hover {
color: #0f263e !important;
border-bottom-color: #0f263e !important;
}
@media (max-width: 991px) {
.hl-editorial-grid { grid-template-columns: 1fr; gap: 4rem; }
.hl-editorial-sidebar { position: relative; top: 0; padding: 3rem; }
.hl-editorial-content.hl-blueprint-content-box { padding: 3rem !important; }
}
/* =========================================================
NEUES DESIGN: Ähnliche TLDs (Category Block)
========================================================= */
/* 1. Die Sektion (Reinweißer Hintergrund und Abstand) */
.domain-block-domain-category.domain-detail-page-catgory {
background-color: #ffffff !important; /* Geändert auf Weiß */
padding: 8rem 0 !important;
border-top: 1px solid #e2e8f0 !important; /* Zarte Trennlinie zur FAQ-Sektion */
font-family: var(--font-reg, 'Poppins', sans-serif) !important;
}
.tldCategoryData {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
text-align: center !important;
}
/* 2. Die Headline ("Top Domains") */
.tldCategoryData > p:first-of-type {
font-size: var(--fluid-h2) !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
color: var(--h-navy, #0f263e) !important;
margin-bottom: 5rem !important;
display: block !important;
position: relative !important;
}
/* Alte Unterstriche oder Elemente ausblenden */
.tldCategoryData > p:first-of-type::after {
display: none !important;
}
.tldCategoryData .tldinfo {
display: none !important;
}
/* 3. Das moderne CSS-Grid für die Liste */
.domain-detail-page-catgory .tldCategoryData ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; /* Automatisches Layout! */
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. Die einzelnen TLD-Kacheln (Cards) */
.tldCategoryData ul li.tld-category-all-domain-detail {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 25px 15px !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-shadow: 0 4px 15px rgba(15, 38, 62, 0.03) !important; /* Sehr sanfter Schatten für Abhebung vom weißen Hintergrund */
color: var(--h-navy, #0f263e) !important;
font-size: 1.9rem !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
position: relative !important;
}
/* Der Hover-Effekt (Mint-Grün und Schattierung) */
.tldCategoryData ul li.tld-category-all-domain-detail:hover {
transform: translateY(-8px) !important;
box-shadow: 0 15px 35px rgba(0, 173, 139, 0.15) !important; /* Mint-farbiger Schatten */
border-color: var(--h-mint, #00ad8b) !important;
background-color: #ffffff !important;
}
/* 5. Der Preis in der Kachel */
.tldCategoryData ul li.tld-category-all-domain-detail span.price-data-tld {
display: block !important;
color: var(--h-mint, #00ad8b) !important;
font-size: 1.5rem !important;
font-weight: normal !important;
margin-top: 15px !important;
padding-top: 15px !important;
border-top: 1px dashed #e2e8f0 !important;
width: 80% !important;
transition: color 0.3s ease !important;
}
/* 6. Klickbarer Bereich über die gesamte Kachel */
.tldCategoryData ul li.tld-category-all-domain-detail a {
position: absolute !important;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10;
}
/* 7. Mobile Optimierung */
@media (max-width: 768px) {
.domain-block-domain-category.domain-detail-page-catgory { padding: 5rem 0 !important; }
.domain-detail-page-catgory .tldCategoryData ul {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
gap: 15px !important;
}
.tldCategoryData ul li.tld-category-all-domain-detail {
font-size: 1.8rem !important;
padding: 20px 10px !important;
}
.tldCategoryData ul li.tld-category-all-domain-detail span.price-data-tld {
font-size: 1.3rem !important;
margin-top: 10px !important;
padding-top: 10px !important;
}
}
/* =========================================
1. HERO-CARD (Heller Diagonal-Split)
========================================= */
.hl-clean-hero-card {
/* Die Schräge: 60% helles Mint, Rest Weiß */
background: linear-gradient(105deg, #e5f7f3 60%, #f9fafc 60%);
border-radius: 2.4rem;
padding: 5rem 4rem;
/* box-shadow: 0 15px 40px rgba(0, 173, 139, 0.1); */
}
/* Textfarben links (Dunkles Navy/Schiefergrau für perfekte Lesbarkeit auf Mint) */
.hl-clean-hero-card h1,
.hl-clean-hero-card .hl-hero-price {
color: #0f263e;
}
.hl-clean-hero-card h1 .mint-text {
color: #00ad8b;
}
.hl-clean-hero-card .hl-seo-checklist li {
color: #475569;
}
.hl-clean-hero-card .hl-hero-price span {
color: #64748b;
}
/* Hero-Badge anpassen */
.hl-hero-badge {
background: #ffffff;
border: 1px solid #f9fafc;
color: #0f263e;
}
/* =========================================
2. DAS BREITE SUCHFELD (Breaking the Grid)
========================================= */
.hl-clean-search-wrapper {
position: relative;
z-index: 20; /* Liegt über der rechten Spalte */
width: 125%; /* Ragt stark in die weiße Seite hinein */
max-width: none !important;
}
.hl-clean-search-form {
border: 1px solid #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
width: 100%;
display: flex;
flex-wrap: nowrap !important;
}
.hl-clean-search-input {
flex-grow: 1;
width: 100%;
}
/* =========================================
3. RECHTE SEITE (Responsive Wasserzeichen)
========================================= */
.hl-pure-visual-wrapper {
container-type: inline-size;
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 380px;
overflow: hidden;
width: 100%;
}
.hl-massive-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
font-size: 15rem; /* Fallback */
font-family: var(--font-semi, 'Poppins', sans-serif);
line-height: 1;
letter-spacing: -2px;
/* Zartes, transparentes Mint auf dem weißen Untergrund */
/*color: rgba(0, 173, 139, 0.08); */
color: rgb(15 38 62 / 21%);
text-shadow: none;
user-select: none;
pointer-events: none;
white-space: nowrap;
z-index: 0;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
/* =========================================
4. MOBILE ANSICHT
========================================= */
@media (max-width: 991px) {
.hl-clean-hero-card {
background: #e5f7f3; /* Keine Schräge auf dem Handy */
padding: 4rem 2.5rem;
}
.hl-clean-search-wrapper {
width: 100%; /* Suchfeld wird wieder normal breit */
}
}
/* =========================================
STICKY SEARCH BAR (Glassmorphism & Zentriert)
========================================= */
.hl-sticky-wrapper {
position: fixed;
top: 75px; /* HIER ANPASSEN: Abstand für Desktop HostX Menü */
left: 0;
width: 100%;
/* Milchglas-Effekt */
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Zarte Trennlinie und Schatten */
box-shadow: 0 10px 30px rgba(15, 38, 62, 0.05);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
/* Z-Index Fix: Legt sich zwingend über Menüs und Dropdowns */
z-index: 2147483647;
padding: 1.2rem 0;
/* NEU: Startposition komplett unsichtbar und leicht nach oben versetzt */
transform: translateY(-20px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hl-sticky-wrapper.is-visible {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hl-sticky-content {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
}
/* Typografie Links */
.hl-sticky-label {
font-family: var(--font-semi, 'Poppins', sans-serif);
font-size: 1.6rem;
color: #0f263e;
white-space: nowrap;
}
.hl-sticky-label .mint-text {
color: #00ad8b;
}
/* Formular Layout Rechts */
.hl-sticky-form-wrapper {
width: 100%;
max-width: 500px;
display: flex;
}
/* Das Mini-Formular passend stylen */
.hl-sticky-wrapper .mini-form {
margin: 0;
box-shadow: none;
border: 1px solid #cbd5e1;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
width: 100%;
background: #ffffff;
border-radius: 100px;
}
.hl-sticky-wrapper .mini-form input {
font-size: 1.4rem;
padding: 0.5rem 0;
background: transparent;
border: none;
}
.hl-sticky-wrapper .mini-form input:focus {
outline: none;
}
.hl-sticky-wrapper .mini-form .hl-clean-search-btn {
padding: 0.8rem 2.5rem;
font-size: 1.4rem;
border-radius: 100px;
}
/* Mobile Anpassung */
@media (max-width: 991px) {
.hl-sticky-label {
display: none;
}
.hl-sticky-content {
gap: 0;
}
.hl-sticky-form-wrapper {
max-width: 100%;
}
.hl-sticky-wrapper {
top: 40px !important; /* Abstand für Mobile HostX Menü */
padding: 1.5rem 1rem !important;
}
.hl-sticky-wrapper .mini-form {
display: flex !important;
flex-direction: row !important; /* Erzwingt die Pille auf Mobil */
flex-wrap: nowrap !important; /* HÄLT DEN BUTTON IN DER ZEILE */
align-items: center !important;
margin: 0 !important;
padding: 0.4rem 0.4rem 0.4rem 1.5rem !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 100px !important;
width: 100% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
box-sizing: border-box !important;
}
.hl-sticky-wrapper .mini-form .hl-clean-search-input {
min-width: 0 !important; /* DER MAGISCHE FIX FÜR DAS EINGABEFELD */
flex: 1 1 0% !important; /* Nimmt nur exakt den Restplatz */
margin-bottom: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
text-align: left !important;
padding: 0 !important;
height: 4.4rem !important;
}
.hl-sticky-wrapper .mini-form .hl-tld-display {
display: block !important;
font-size: 1.5rem !important;
padding-right: 1rem !important;
color: #94a3b8 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.hl-sticky-wrapper .mini-form .hl-clean-search-btn {
width: auto !important;
height: 4.4rem !important;
padding: 0 2rem !important;
border-radius: 100px !important;
flex-shrink: 0 !important; /* Verhindert, dass der Button gequetscht wird */
margin: 0 !important;
}
}
/* =========================================
DOMAIN INTRO SECTION & SEO BADGE (Bulletproof)
========================================= */
/* 1. Gesamten Content zentrieren */
.hl-domain-intro-content {
text-align: center !important;
}
/* 2. Das H2-Badge (Exakte Design-Werte gesperrt) */
.hl-domain-intro-content h2.hl-intro-badge {
all: unset !important;
display: inline-block !important;
box-sizing: border-box !important;
padding: 0.6rem 1.6rem !important;
background: rgba(0, 173, 139, 0.1) !important;
color: #00ad8b !important;
border-radius: 5rem !important;
font-size: 1.2rem !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin: 0 0 2rem 0 !important;
line-height: 1 !important;
}
/* TLD-Span (.at) erbt die korrekte Farbe */
.hl-domain-intro-content h2.hl-intro-badge .mint-text {
color: inherit !important;
}
/* 3. Die H3 (Übernimmt die optische Rolle der alten H2) */
.hl-domain-intro-content h3 {
all: unset !important;
display: block !important;
box-sizing: border-box !important;
text-align: center !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
font-size: 3.2rem !important;
color: #0f263e !important;
line-height: 1.2 !important;
letter-spacing: -1px !important;
margin: 0 0 1.5rem 0 !important;
}
/* 4. Der Text (Paragraph) */
.hl-domain-intro-content p {
text-align: center !important;
margin: 0 auto !important;
max-width: 800px !important;
line-height: 1.6 !important;
color: #475569 !important;
}
/* 5. Mobile Anpassungen */
@media (max-width: 991px) {
.hl-domain-intro-content h3 {
font-size: 2.6rem !important;
}
}
/* =========================================
UNIFIED PRICING BAR (Premium & Hover)
========================================= */
.hl-pricing-header {
text-align: center !important;
margin-bottom: 4rem !important;
}
.hl-pricing-header p {
font-size: 1.6rem !important;
color: #64748b !important;
margin: 0 !important;
}
.hl-unified-price-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #ffffff !important;
padding: 2.5rem 2rem 2.5rem 4rem !important;
max-width: 1200px !important;
border-radius: 100px !important;
box-shadow: 0 15px 35px rgba(15, 38, 62, 0.06) !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
margin: 0 auto !important;
}
/* --- Die einzelnen Preis-Spalten --- */
.hl-price-item {
display: flex !important;
align-items: center !important;
gap: 1.8rem !important;
cursor: default !important; /* Signalisiert Interaktivität beim Hover */
}
/* 1. DEFAULT ZUSTAND (Blass & Dezent) */
.hl-price-icon-box {
width: 54px !important;
height: 54px !important;
border-radius: 50% !important;
background: #f1f5f9 !important; /* Neutrales Hellgrau */
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hl-price-icon-box i {
color: #cbd5e1 !important; /* Blasses Grau */
font-size: 2rem !important;
transition: color 0.4s ease !important;
}
/* 2. HOVER ZUSTAND (Mintgrün leuchtend) */
.hl-price-item:hover .hl-price-icon-box {
background: rgba(0, 173, 139, 0.12) !important; /* Sanftes Mint */
transform: scale(1.1) !important; /* Kleiner Pop-Effekt */
}
.hl-price-item:hover .hl-price-icon-box i {
color: #00ad8b !important; /* Volles Mintgrün */
}
/* --- Typografie der Preise --- */
.hl-price-text-col {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.8rem !important;
}
.hl-price-label {
font-size: 1.3rem !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
line-height: 1 !important;
}
.hl-price-value {
font-size: 2.6rem !important;
color: #0f263e !important;
line-height: 1 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-price-value small {
font-size: 1.4rem !important;
color: #94a3b8 !important;
margin-left: 0.3rem !important;
font-family: Poppins !important;
}
.hl-price-divider {
width: 1px !important;
height: 60px !important;
background: #e2e8f0 !important;
}
/* --- Der Call to Action Button --- */
.hl-compact-cta {
display: inline-flex !important;
align-items: center !important;
gap: 1rem !important;
background: #00ad8b !important;
color: #ffffff !important;
padding: 1.8rem 3.5rem !important;
border-radius: 100px !important;
font-size: 1.5rem !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
.hl-compact-cta:hover {
background: #008f73 !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(0, 173, 139, 0.2) !important;
}
/* --- Mobile Anpassungen --- */
@media (max-width: 991px) {
.hl-unified-price-bar {
flex-direction: column !important;
border-radius: 24px !important;
padding: 3rem !important;
gap: 3rem !important;
align-items: flex-start !important;
}
.hl-price-divider {
width: 100% !important;
height: 1px !important;
}
.hl-price-action {
width: 100% !important;
margin-top: 1rem !important;
}
.hl-compact-cta {
width: 100% !important;
justify-content: center !important;
}
}
/* =========================================
HERO PRICING CARD (Premium Ghost Design)
========================================= */
/* Container & Header */
.hl-pricing-section {
background-color: #ffffff !important;
padding: 5rem 0 3rem 0 !important;
border-top: none !important;
}
.hl-pricing-header {
text-align: center !important;
margin-bottom: 4rem !important;
}
.hl-pricing-header p {
font-size: 1.6rem !important;
color: #64748b !important;
margin: 0 !important;
}
/* DIE HAUPTKARTE */
.hl-hero-pricing-card {
max-width: 700px !important;
margin: 0 auto !important;
background: #ffffff !important;
border-radius: 24px !important;
box-shadow: 0 20px 40px -10px rgba(15, 38, 62, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.6) !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.hl-hero-pricing-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 30px 50px -12px rgba(15, 38, 62, 0.18), 0 0 0 1px rgba(0, 173, 139, 0.25) !important;
}
/* OBERER BEREICH (Fokus & Preis) */
.hl-hero-main-area {
padding: 4rem 3rem 3rem 3rem !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
position: relative !important;
}
.hl-hero-main-area::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; height: 100% !important;
background: radial-gradient(circle at top center, rgba(0, 173, 139, 0.04) 0%, transparent 60%) !important;
pointer-events: none !important;
}
.hl-hero-badge {
background: rgba(0, 173, 139, 0.08) !important;
color: #00ad8b !important;
padding: 0.7rem 1.8rem !important;
border-radius: 50px !important;
font-size: 1.3rem !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
margin-bottom: 1.8rem !important;
display: inline-block !important;
}
.hl-hero-price-huge {
font-size: 4.8rem !important;
color: #0f263e !important;
line-height: 1 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
margin-bottom: 1.2rem !important;
letter-spacing: -1.5px !important;
display: flex !important;
align-items: baseline !important;
justify-content: center !important;
}
.hl-hero-small {
font-size: 1.6rem !important;
color: #64748b !important;
letter-spacing: normal !important;
margin-left: 0.4rem !important;
}
.hl-hero-guarantee {
font-size: 1.4rem !important;
color: #00ad8b !important;
margin-bottom: 3rem !important;
display: flex !important;
align-items: center !important;
gap: 0.7rem !important;
}
i.hl-force-mint {
color: #00ad8b !important;
}
/* Call-to-Action Button */
.hl-hero-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 1rem !important;
background: #00ad8b !important;
color: #ffffff !important;
width: 100% !important;
max-width: 220px !important;
padding: 1.1rem 1rem !important;
border-radius: 100px !important;
font-size: 1.5rem !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
position: relative !important;
z-index: 2 !important;
}
.hl-hero-cta:hover {
background: #008f73 !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(0, 173, 139, 0.35) !important;
}
/* --- UNTERER BEREICH (Folgekosten / Ghost Elements) --- */
.hl-hero-secondary-area {
background: #f8fafc !important;
padding: 3rem 4rem !important;
display: flex !important;
align-items: center !important;
border-top: 1px solid #e2e8f0 !important;
}
.hl-sec-ghost-item {
flex: 1 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 1rem !important;
cursor: default !important;
}
.hl-inner-text {
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
text-align: left !important;
position: relative !important;
z-index: 2 !important;
}
.hl-sec-label {
font-size: 1.2rem !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
}
.hl-sec-value {
font-size: 2.2rem !important;
color: #0f263e !important;
line-height: 1 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-sec-value small {
font-size: 1.3rem !important;
color: #94a3b8 !important;
margin-left: 0.3rem !important;
}
/* Die blassen Wasserzeichen-Icons */
i.hl-ghost-icon {
font-size: 3.2rem !important;
color: #00ad8b !important;
opacity: 0.15 !important; /* Sehr transparent */
transition: opacity 0.4s ease, transform 0.4s ease !important;
position: relative !important;
z-index: 1 !important;
}
.hl-sec-ghost-item:hover i.hl-ghost-icon {
opacity: 0.4 !important; /* Leuchtet beim Hover sanft auf */
transform: scale(1.05) !important;
}
.hl-sec-divider {
width: 1px !important;
height: 50px !important;
background: #cbd5e1 !important;
margin: 0 3rem !important;
}
/* Mobile Anpassungen */
@media (max-width: 768px) {
.hl-hero-price-huge { font-size: 4rem !important; }
.hl-hero-secondary-area { flex-direction: column !important; gap: 2rem !important; padding: 3rem 2rem !important; }
.hl-sec-ghost-item { width: 100% !important; padding: 0 !important; }
.hl-sec-divider { width: 100% !important; height: 1px !important; margin: 0.5rem 0 !important; }
}
/* Fix für das sanfte Scrollen zum Suchfeld */
html {
scroll-behavior: smooth !important;
}
#search-top-dynmic-form {
scroll-margin-top: 120px !important; /* Schützt das Formular vor deinem fixierten Header */
}
/* =========================================
HOSTING PROMO BANNER
========================================= */
.hl-promo-banner-wrapper {
max-width: 700px !important; /* Exakt gleiche Breite wie die Preiskarte */
margin: 3rem auto 0 auto !important; /* 3rem Abstand nach oben zur Preiskarte */
}
.hl-promo-banner {
background: linear-gradient(135deg, rgba(0, 173, 139, 0.08) 0%, rgba(0, 173, 139, 0.02) 100%) !important;
border: 1px solid rgba(0, 173, 139, 0.2) !important;
border-radius: 20px !important;
padding: 2.5rem 3rem !important;
display: flex !important;
align-items: center !important;
gap: 2.5rem !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.hl-promo-banner:hover {
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px -10px rgba(0, 173, 139, 0.15) !important;
}
/* Das leuchtende Geschenk-Icon */
.hl-promo-icon {
background: #00ad8b !important;
color: #ffffff !important;
width: 54px !important;
height: 54px !important;
border-radius: 50% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 2.2rem !important;
flex-shrink: 0 !important;
box-shadow: 0 8px 20px rgba(0, 173, 139, 0.3) !important;
}
/* Textbereich */
.hl-promo-text {
flex-grow: 1 !important;
text-align: left !important;
}
.hl-promo-text h3 {
font-size: 1.6rem !important;
color: #0f263e !important;
margin: 0 0 0.5rem 0 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-promo-text p {
font-size: 1.4rem !important;
color: #475569 !important;
margin: 0 !important;
line-height: 1.5 !important;
text-wrap: balance !important;
}
/* Der Button */
.hl-promo-btn {
display: inline-flex !important;
align-items: center !important;
gap: 0.8rem !important;
background: #ffffff !important;
color: #00ad8b !important;
border: 1px solid rgba(0, 173, 139, 0.3) !important;
padding: 1.2rem 2.4rem !important;
border-radius: 50px !important;
font-size: 1.4rem !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: all 0.3s ease !important;
}
.hl-promo-btn:hover {
background: #00ad8b !important;
color: #ffffff !important;
border-color: #00ad8b !important;
}
/* Mobile Anpassungen */
@media (max-width: 768px) {
.hl-promo-banner {
flex-direction: column !important;
text-align: center !important;
gap: 1.8rem !important;
padding: 2.5rem 2rem !important;
}
.hl-promo-text {
text-align: center !important;
}
.hl-promo-btn {
width: 100% !important;
justify-content: center !important;
}
}
/* =========================================
TRENNUNG EDITORIAL-SEKTION (Glow Line)
========================================= */
.hl-editorial-section.blueprint-mode {
position: relative !important;
border-top: none !important;
/* Sanfter Lichtschein + weiße Hintergrundfarbe */
background-image: radial-gradient(ellipse at top center, rgba(0, 173, 139, 0.04) 0%, rgba(255, 255, 255, 0) 60%) !important;
background-color: #ffffff !important;
}
.hl-editorial-section.blueprint-mode::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 15% !important;
right: 15% !important;
height: 1px !important;
background: linear-gradient(90deg, transparent 0%, rgba(0, 173, 139, 0.25) 50%, transparent 100%) !important;
}
/* =========================================
SUPPORT & TRUST SEKTION
========================================= */
.hl-support-section {
background-color: #0f263e !important;
position: relative !important;
overflow: hidden !important;
padding: 6rem 0 !important;
margin-top: 5rem !important;
background-image: radial-gradient(circle at top right, rgba(0, 173, 139, 0.08) 0%, transparent 60%) !important;
}
.hl-support-watermark {
position: absolute !important;
right: -2% !important;
bottom: -35% !important;
font-size: 38rem !important;
color: #ffffff !important;
opacity: 0.04 !important; /* Edler Etched-Glass Effekt */
transform: rotate(-15deg) !important;
pointer-events: none !important;
z-index: 1 !important;
}
.hl-support-section .relative-container {
position: relative !important;
z-index: 2 !important;
}
/* Flexbox Layout für Desktop */
.hl-support-flex {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 4rem !important;
}
/* --- LINKE SPALTE --- */
.hl-support-text-col {
flex: 1 !important;
max-width: 600px !important;
text-align: left !important;
}
.hl-support-badge {
display: inline-block !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #cbd5e1 !important;
padding: 0.6rem 1.6rem !important;
border-radius: 50px !important;
font-size: 1.2rem !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
margin-bottom: 2rem !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.hl-support-text-col h2 {
font-size: 3.6rem !important;
color: #ffffff !important;
margin-bottom: 1.5rem !important;
line-height: 1.1 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
letter-spacing: -1px !important;
}
.hl-support-text-col .mint-text {
color: #00c7a1 !important;
}
.hl-support-text-col p {
font-size: 1.6rem !important;
color: #94a3b8 !important;
line-height: 1.6 !important;
margin-bottom: 3.5rem !important;
}
.hl-support-cta {
display: inline-flex !important;
align-items: center !important;
gap: 1.2rem !important;
background: #00ad8b !important;
color: #ffffff !important;
padding: 1.6rem 3.5rem !important;
border-radius: 100px !important;
font-size: 1.6rem !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 25px rgba(0, 173, 139, 0.2) !important;
}
.hl-support-cta:hover {
background: #008f73 !important;
transform: translateY(-3px) !important;
box-shadow: 0 15px 35px rgba(0, 173, 139, 0.3) !important;
color: #ffffff !important;
}
/* --- RECHTE SPALTE (Erfahrung) --- */
.hl-support-trust-col {
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-left: 6rem !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important; /* Feine Trennlinie */
}
.hl-trust-number {
font-size: 8.5rem !important;
line-height: 1 !important;
color: #ffffff !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
letter-spacing: -3px !important;
display: flex !important;
align-items: flex-start !important;
}
.hl-trust-plus {
font-size: 4rem !important;
color: #00c7a1 !important;
margin-top: 0.5rem !important;
}
.hl-trust-label {
font-size: 1.6rem !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
color: #cbd5e1 !important;
margin-top: 1rem !important;
}
.hl-trust-sub {
font-size: 1.3rem !important;
color: #64748b !important;
margin-top: 0.5rem !important;
}
/* --- MOBILE ANPASSUNGEN --- */
@media (max-width: 992px) {
.hl-support-flex {
flex-direction: column !important;
text-align: center !important;
gap: 4rem !important;
}
.hl-support-text-col {
text-align: center !important;
}
.hl-support-trust-col {
padding-left: 0 !important;
border-left: none !important;
padding-top: 3rem !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
width: 100% !important;
}
.hl-support-watermark {
font-size: 28rem !important;
right: -15% !important;
bottom: -10% !important;
opacity: 0.02 !important;
}
.hl-support-text-col h2 {
font-size: 3rem !important;
}
.hl-support-cta {
width: 100% !important;
justify-content: center !important;
}
}
/* =========================================
SOCIAL PROOF SEKTION (Kompakter Slider)
========================================= */
.hl-reviews-section {
padding: 4rem 0 !important;
background-color: transparent !important;
}
.hl-reviews-header {
text-align: center !important;
margin-bottom: 1.5rem !important;
}
.hl-reviews-header h2 {
font-size: 3.2rem !important;
color: #0f263e !important;
margin-bottom: 0 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
}
.hl-reviews-subtitle {
font-size: 1.5rem !important;
color: #64748b !important;
margin-bottom: 0.5rem !important;
}
.hl-ts-widget-wrapper {
display: flex !important;
justify-content: center !important;
margin-bottom: 0 !important;
min-height: 40px !important;
}
.hl-slider-wrapper {
max-width: 1200px !important;
margin: 0 auto !important;
position: relative !important;
padding: 0.5rem 0 1.5rem 0 !important;
}
/* Slider Buttons */
.hl-slider-btn {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 44px !important;
height: 44px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 5px 15px rgba(15, 38, 62, 0.08) !important;
z-index: 10 !important;
transition: all 0.2s ease !important;
}
/* Mint-Farbe für die Pfeile */
.hl-slider-btn i, .hl-slider-btn svg, .hl-slider-btn path {
color: #00ad8b !important;
fill: #00ad8b !important;
font-size: 1.5rem !important;
transition: all 0.2s ease !important;
}
.hl-slider-btn:hover {
background: #00ad8b !important;
border-color: #00ad8b !important;
}
.hl-slider-btn:hover i, .hl-slider-btn:hover svg, .hl-slider-btn:hover path {
color: #ffffff !important;
fill: #ffffff !important;
}
.hl-prev-btn { left: -22px !important; }
.hl-next-btn { right: -22px !important; }
/* Track */
.hl-reviews-track {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 2rem !important;
scroll-snap-type: x mandatory !important;
padding: 1rem 1rem 2rem 1rem !important;
-ms-overflow-style: none;
scrollbar-width: none;
}
.hl-reviews-track::-webkit-scrollbar {
display: none;
}
/* Karten Design */
.hl-review-card {
background: #ffffff !important;
padding: 2.5rem 2rem !important;
border-radius: 16px !important;
box-shadow: 0 10px 25px -5px rgba(15, 38, 62, 0.08) !important;
border: 1px solid #e2e8f0 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
flex: 0 0 auto !important;
width: calc(25% - 1.5rem) !important;
min-width: 280px !important;
scroll-snap-align: start !important;
}
.hl-review-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 35px -5px rgba(0, 173, 139, 0.1) !important;
border-color: rgba(0, 173, 139, 0.3) !important;
}
.hl-review-stars {
margin-bottom: 1.2rem !important;
display: flex !important;
gap: 0.4rem !important;
}
/* Gelb für die Sterne */
.hl-review-stars i, .hl-review-stars svg, .hl-review-stars path {
color: #ffdc10 !important;
fill: #ffdc10 !important;
font-size: 1.6rem !important;
}
.hl-review-text {
font-size: 1.45rem !important;
color: #334155 !important;
line-height: 1.6 !important;
font-style: italic !important;
margin-bottom: 1.5rem !important;
flex-grow: 1 !important;
white-space: normal !important;
}
.hl-review-footer {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
border-top: 1px solid #f1f5f9 !important;
padding-top: 1.2rem !important;
}
.hl-review-date {
font-size: 1.25rem !important;
color: #94a3b8 !important;
}
/* Mobile */
@media (max-width: 1200px) {
.hl-review-card { width: calc(33.333% - 1.33rem) !important; }
}
@media (max-width: 900px) {
.hl-review-card { width: calc(50% - 1rem) !important; }
}
@media (max-width: 600px) {
.hl-reviews-section { padding: 3rem 0 !important; }
.hl-review-card { width: 85% !important; scroll-snap-align: center !important; }
.hl-slider-btn { display: none !important; }
}
/* ==========================================
TRUSTED SHOPS HEADER DESIGN
=========================================== */
.hl-reviews-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 3rem;
text-align: center;
}
/* Dein exaktes Badge-Design */
.hl-reviews-header .hl-intro-badge {
all: unset !important;
display: inline-block !important;
box-sizing: border-box !important;
padding: 0.6rem 1.6rem !important;
background: rgba(0, 173, 139, 0.1) !important;
color: #00ad8b !important;
border-radius: 5rem !important;
font-size: 1.2rem !important;
font-family: var(--font-semi) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin: 0 0 2rem 0 !important;
line-height: 1 !important;
}
/* Hauptüberschrift */
.hl-reviews-header .hl-premium-h2 {
font-size: 3.2rem;
color: #0f263e;
margin: 0 0 1.5rem 0;
line-height: 1.2;
font-family: var(--font-semi, 'Poppins', sans-serif);
letter-spacing: -1px;
}
/* Widget Wrapper */
.hl-ts-widget-wrapper {
display: flex;
justify-content: center;
min-height: 40px;
}
/* Mobile Optimierung */
@media (max-width: 768px) {
.hl-reviews-header .hl-premium-h2 { font-size: 2.4rem; }
.hl-reviews-header .hl-intro-badge {
font-size: 1rem !important;
padding: 0.5rem 1.2rem !important;
margin: 0 0 1.5rem 0 !important;
}
}
/* ==========================================
TRUSTED SHOPS PREMIUM KARTEN DESIGN
=========================================== */
/* Die Karte mit Hover-Effekt */
.hl-review-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
padding: 2rem;
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(15, 38, 62, 0.03);
transition: all 0.3s ease;
cursor: default;
}
.hl-review-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(15, 38, 62, 0.08);
border-color: #00ad8b;
}
/* Text & Sterne */
.hl-review-stars {
margin-bottom: 1.2rem;
color: #FFDC0F;
font-size: 1.1rem;
}
.hl-review-text {
font-size: 1.05rem;
color: #334155;
font-style: italic;
line-height: 1.6;
flex-grow: 1; /* Drückt den Footer immer ans untere Ende */
}
/* Der Footer: Flex-Row Layout */
.hl-review-footer {
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top: 1px solid #f1f5f9;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
box-sizing: border-box;
}
/* Datum */
.hl-review-date {
font-size: 0.9rem;
color: #64748b;
font-weight: 500;
flex: 0 0 auto;
margin: 0;
}
/* Das neue HTML-Badge (Rechtsbündig) */
.hl-review-verified-badge {
margin-left: auto; /* Zwingt das Element kompromisslos nach rechts */
color: #00ad8b;
font-size: 0.75rem;
font-weight: 600;
background: rgba(0, 173, 139, 0.1);
padding: 0.3rem 0.6rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* Custom Font Size für das Trusted Shops Widget */
.hl-ts-custom-size,
.hl-ts-custom-size etrusted-widget {
font-size: 1.7rem !important;
}
/* =========================================================
SaaS GLASSMORPHISM FEATURE CARD (Heller 3-Stufen-Verlauf)
========================================================= */
/* 1. Sektion: Volle Breite, fließender 3-Stufen-Verlauf (Weiß -> Mint -> Weiß) */
.hl-features-section {
background: linear-gradient(180deg, #ffffff 0%, #f4fbf9 50%, #ffffff 100%) !important;
padding: 8rem 0 !important;
font-family: var(--font-reg, 'Poppins', sans-serif) !important;
}
/* 2. DIE NEUE EINHEIT: Der Frosted Glass Container */
.hl-features-card {
background: rgba(255, 255, 255, 0.45) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 32px !important;
padding: 6rem 5rem !important;
box-shadow: 0 20px 40px rgba(15, 38, 62, 0.03), 0 5px 15px rgba(0, 173, 139, 0.02) !important;
margin-top: 1rem !important;
}
/* 3. Linke Seite: Klassisch, sauberes Badge */
.hl-badge-features {
display: inline-block !important;
padding: 0.6rem 1.6rem !important;
background: rgba(0, 173, 139, 0.1) !important;
color: #00ad8b !important;
border-radius: 5rem !important;
font-size: 1.2rem !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin-bottom: 2.5rem !important;
font-weight: 600 !important;
}
.hl-features-heading-wrapper h2 {
font-size: var(--fluid-h2) !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
line-height: 1.2 !important;
margin: 0 !important;
letter-spacing: -1px !important;
}
/* 4. Rechte Seite: Klassische, hochseriöse Liste */
.hl-features-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1.8rem !important;
}
.hl-features-list li {
position: relative !important;
padding-left: 3.5rem !important;
font-size: 1.6rem !important;
color: #475569 !important;
line-height: 1.6 !important;
}
.hl-features-list li:last-child {
margin-bottom: 0 !important;
}
.hl-features-list li b,
.hl-features-list li strong {
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
font-weight: normal !important;
}
/* 5. Das zarte Aufzählungszeichen (Minimalistisches CSS-Häkchen) */
.hl-features-list li::before {
content: '' !important;
position: absolute !important;
left: 0.5rem !important;
top: 0.7rem !important;
width: 7px !important;
height: 13px !important;
border: solid #00ad8b !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Alte Icons aus dem Theme radikal verstecken, Logos (nic.at) aber erhalten! */
.hl-features-list li i,
.hl-features-list li svg {
display: none !important;
}
.hl-features-list li img {
display: block !important;
margin-top: 1.5rem !important;
max-height: 40px !important;
width: auto !important;
}
/* 6. Mobile Anpassung */
@media (max-width: 991px) {
.hl-features-section { padding: 5rem 0 !important; }
.hl-features-card { padding: 4rem 2.5rem !important; }
.hl-features-heading-wrapper { padding-right: 0 !important; margin-bottom: 4rem !important; }
.hl-features-heading-wrapper h2 { font-size: 2.2rem !important; }
}
/* =========================================================
PROMO BANNER TYPOGRAFIE (Text-Balance)
========================================================= */
.hl-promo-text h3 {
font-size: 1.9rem !important;
font-weight: 700 !important;
color: #0f263e !important;
margin: 0 0 0.8rem 0 !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
letter-spacing: -0.5px !important;
line-height: 1.2 !important;
text-wrap: balance !important;
}
.hl-promo-text p {
font-size: 1.5rem !important;
color: #475569 !important;
font-family: var(--font-reg, 'Poppins', sans-serif) !important;
margin: 0 !important;
line-height: 1.65 !important;
letter-spacing: 0.2px !important;
text-wrap: balance !important;
max-width: 98% !important;
}
/* =========================================================
MORPHING SEARCH BUTTON (Preiskarte)
========================================================= */
.hl-pricing-action-wrapper {
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
height: 48px; /* Kompakte Höhe */
}
.hl-pricing-action-wrapper .hl-hero-cta {
height: 100% !important;
padding: 0 2.5rem !important;
font-size: 1.35rem !important;
width: auto !important;
max-width: 100% !important;
border-radius: 50px !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.8rem !important;
background: #00ad8b !important;
color: #ffffff !important;
border: none !important;
cursor: pointer;
}
.hl-pricing-action-wrapper .hl-hero-cta:hover {
background: #008f73 !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(0, 173, 139, 0.35) !important;
}
.hl-pricing-action-wrapper .hl-hero-cta.is-hidden {
opacity: 0 !important;
transform: scale(0.9) !important;
pointer-events: none !important;
position: absolute !important;
}
/* Inline Suchformular */
.hl-inline-search-form {
display: none;
width: 100%;
height: 100%;
background: #ffffff;
border: 2px solid rgba(0, 173, 139, 0.4);
border-radius: 50px;
padding: 0.3rem;
box-shadow: 0 10px 25px rgba(0, 173, 139, 0.15);
opacity: 0;
transform: scale(0.95);
}
.hl-inline-search-form.is-active {
display: flex;
animation: hlPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hlPopIn {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
.hl-inline-search-form:focus-within {
border-color: #00ad8b;
box-shadow: 0 15px 35px rgba(0, 173, 139, 0.25);
}
.hl-inline-input {
flex-grow: 1;
background: transparent !important;
border: none !important;
padding: 0 0 0 1.2rem !important;
font-size: 1.3rem !important;
color: #0f263e !important;
font-family: var(--font-semi, 'Poppins', sans-serif) !important;
outline: none !important;
width: 100% !important;
box-shadow: none !important;
}
.hl-inline-input::placeholder {
color: #94a3b8 !important;
font-weight: normal !important;
}
.hl-inline-submit {
background: #00ad8b !important;
color: #ffffff !important;
border: none !important;
border-radius: 50px !important;
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.2s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.hl-inline-submit:hover {
background: #008f73 !important;
transform: scale(1.05) !important;
}