/* =====================================================================
BitPoint Hosting – style.css
---------------------------------------------------------------------
Einzige Stylesheet-Datei der Seite. Saemtliches CSS der index.html ist
hier gebuendelt (keine weitere Aufteilung – siehe PROJECT.md).
Einbindung: im .
INHALTSVERZEICHNIS – Reihenfolge in dieser Datei, je Seiten-Bereich:
1. DESIGN TOKENS (:root) – Farben, Radien, Schatten, Layout-Tokens
2. CONTAINER-SKALIERUNG – :root-Wachstum ab 1440/1920/2560/3440px
3. RESET + BASE – globale Resets, Body, Grundtypografie
4. HEADER + NAVIGATION – fixer Header, Logo, Nav, Burger-Menu
5. MAIN + HERO → Section #home
6. ANGEBOT (Tarif-Cards) → Section #angebot
7. SSL-ZERTIFIKATE → Section #ssl
8. DOMAIN (Check + Preisliste) → Section #domain
9. LOGIN (Kundenbereich + Plesk) → Section #login
10. KONTAKT (Support-Formular) → Section #kontakt
11. FOOTER – Footer-Links, Social, Copyright
12. RESPONSIVE (Mobile) – max-width-Anpassungen (Desktop-First)
13. DESKTOP-SKALIERUNG – min-width-Wachstum (Cards & Sections)
14. ÜBER UNS → Section #ueber-uns
15. SUPPORT (BitBot + FAQ) → Section #support (Chat-Card, FAQ-Card)
16. SUPPORT – Responsive → Section #support (Mobile-Anpassungen)
Hinweis: Die Abschnitte sind unten jeweils mit einem eigenen
==========-Kommentar-Header markiert. Breakpoint-Set gemaess
Styleguide v2: XS 500 · SM 768 · MD 900 · LG 1170 · XL 1440 ·
2XL 1920 · 3XL 2560 · 4XL 3440.
===================================================================== */
/* =====================================================================
BITPOINT DESIGN TOKENS (vollständig, gemäss Styleguide)
===================================================================== */
:root {
/* --- Grundfarben: Dark Theme --- */
--bg-dark: #575757;
--bg-darker: #3a3a3a;
/* --- Grundfarben: Light Theme --- */
--section-bg: #f5f5f5;
--section-bg-alt: #ffffff;
--section-text: #333333;
/* --- Akzentfarbe --- */
--accent: #2196f3;
--accent-hover: #1b80d8;
--accent-soft: rgba(33,150,243,0.25);
--accent-glow: rgba(33,150,243,0.5);
--login-border: rgba(33,150,243,0.6);
--login-hover: rgba(33,150,243,0.15);
/* --- Tier-Farben --- */
--gold: #f9a825;
--gold-glow: rgba(249,168,37,0.5);
--red: #ef5350;
--red-glow: rgba(239,83,80,0.5);
/* --- Text: Dark Theme --- */
--text-main: #ffffff;
--text-muted: rgba(255,255,255,0.7);
--text-subtle: rgba(255,255,255,0.85);
/* --- Text: Light Theme --- */
--text-main-light: #333333;
--text-muted-light: rgba(51,51,51,0.6);
/* --- Borders --- */
--border-dark: rgba(255,255,255,0.1);
--border-light: rgba(0,0,0,0.1);
--input-border: rgba(0,0,0,0.15);
/* --- Schatten --- */
--shadow-card: 0 2px 12px rgba(0,0,0,0.06);
--shadow-card-hover:0 16px 40px rgba(0,0,0,0.3);
/* --- Layout (Default, < 1440 px) --- */
--header-height: 3.75rem;
--max-width: 1280px;
--content-width: 1100px;
/* --- Radii --- */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
/* --- Transitions --- */
--t-fast: 0.15s ease;
--t-base: 0.25s ease;
--t-slow: 0.3s ease;
/* --- Status-Farben (Domain-Check Ergebnis) --- */
--color-success: #2e7d32;
--color-success-bg: #e8f5e9;
--color-error: #c62828;
--color-error-bg: #ffebee;
--color-warn: #ef6c00;
--color-warn-bg: #fff3e0;
/* =================================================================
BREAKPOINT-TOKENS (zur Dokumentation)
================================================================= */
--bp-xs: 500px; /* Phones klein */
--bp-sm: 768px; /* Phones gross */
--bp-md: 900px; /* Tablet Portrait / Cards-Switch */
--bp-lg: 1170px; /* Tablet Landscape / Nav-Switch */
--bp-xl: 1440px; /* Standard Desktop */
--bp-2xl: 1920px; /* Full-HD */
--bp-3xl: 2560px; /* WQHD */
--bp-4xl: 3440px; /* Ultrawide */
}
/* =====================================================================
CONTAINER-SKALIERUNG (Mobile-First, min-width)
Wachsende Container & Basisschrift auf grossen Monitoren.
===================================================================== */
@media (min-width: 1440px) {
:root {
--max-width: 1360px;
--content-width: 1180px;
}
}
@media (min-width: 1920px) {
:root {
--max-width: 1520px;
--content-width: 1280px;
}
}
@media (min-width: 2560px) {
:root {
--max-width: 1760px;
--content-width: 1440px;
font-size: 17px; /* skaliert alle rem-Werte mit */
}
}
@media (min-width: 3440px) {
:root {
--max-width: 2000px;
--content-width: 1600px;
font-size: 18px;
}
}
/* =====================================================================
RESET + BASE
===================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sprungmarken-Offset = exakt die Höhe des fixen Headers, damit der
Section-Anfang bündig an der Unterkante des Headers liegt.
Nur EINE Offset-Eigenschaft verwenden – scroll-padding-top (html)
und scroll-margin-top (Ziel) würden sich sonst addieren. */
section[id] {
scroll-margin-top: var(--header-height);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
body.menu-open { overflow: hidden; }
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* =====================================================================
HEADER + NAVIGATION
===================================================================== */
.header {
position: fixed;
top: 0;
width: 100%;
height: var(--header-height);
background: var(--bg-dark);
border-bottom: 1px solid var(--border-dark);
z-index: 1000;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
position: relative; /* Anker für absolut zentrierte .nav-links */
}
.nav-left {
display: flex;
align-items: center;
gap: 2rem;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-main);
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
transition: opacity var(--t-base);
}
.logo:hover { opacity: 0.85; }
.logo-img { height: 36px; width: auto; }
/* Markenname in Originalschreibweise (kein Uppercase), fetter und
groesser; Zusatz "Hosting" kleiner, gedaempft und weiter gesperrt –
analog zur Hierarchie im Originallogo (BitPoint dominiert) */
.logo-name { font-weight: 700; text-transform: none; font-size: 1.2rem; }
.logo-text,
.logo-sub { color: var(--text-muted); font-size: 0.82rem; letter-spacing: 0.22em; }
/* Nav Links – absolut in der Mitte der Nav-Leiste verankert,
damit sie unabhängig von Logo- und Login-Breite immer
exakt im Header-Zentrum sitzen. Gilt bis zum LG-Breakpoint
(1170px), ab dort übernimmt das Burger-Menü. */
.nav-links {
list-style: none;
display: flex;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.nav-links a {
position: relative;
padding: 0.6rem 1rem;
font-size: 1.1rem;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-base);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 0.3rem;
height: 2px;
background: var(--accent);
opacity: 0;
transform: scaleX(0);
transition: all var(--t-base);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text-main); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
opacity: 1;
transform: scaleX(1);
}
/* Right Zone + Login */
.nav-right {
display: flex;
align-items: center;
gap: 1rem;
padding-left: 1.5rem;
border-left: 1px solid rgba(255,255,255,0.15);
}
.login-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.9rem;
font-size: 1rem;
font-weight: 500;
color: var(--text-subtle);
text-decoration: none;
border: 1px solid var(--login-border);
border-radius: var(--radius-sm);
transition: all var(--t-base);
}
.login-link::after { display: none; }
.login-link:hover {
background: var(--login-hover);
color: var(--text-main);
}
.login-link[aria-current="page"] {
background: var(--accent-soft);
border-color: var(--accent);
}
.user-icon {
width: 16px;
height: 16px;
fill: currentColor;
opacity: 0.85;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
background: transparent;
border: none;
cursor: pointer;
z-index: 1001;
}
.hamburger-line {
width: 1.5rem;
height: 2px;
background: var(--text-main);
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger-line:not(:last-child) { margin-bottom: 5px; }
.hamburger.active .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* =====================================================================
MAIN + HERO
===================================================================== */
main { padding-top: var(--header-height); }
.hero-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding-top: var(--header-height);
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem;
max-width: 800px;
}
.hero-content h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--text-main);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero-content h1 span { color: var(--accent); }
.hero-content p {
font-size: clamp(1rem, 2vw, 1.3rem);
color: var(--text-muted);
line-height: 1.6;
text-wrap: balance; /* Slogan gleichmaessig verteilen (greift v.a. mobil) */
}
/* Harter Umbruch im Slogan nur auf Desktop; mobil frei umbrechen lassen */
@media (max-width: 600px) {
.hero-content p br { display: none; }
}
/* =====================================================================
ANGEBOT SECTION (Tarif-Cards)
===================================================================== */
.angebot-section {
background: var(--bg-dark);
color: var(--text-main);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
font-size: 1rem;
}
.angebot-wrapper {
max-width: var(--content-width);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.angebot-title {
font-weight: 600;
font-size: 1.8rem;
margin-bottom: 2.5rem;
text-align: center;
}
.angebot-title span { color: var(--accent); }
.cards-container {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
/* Card – Tier-Farben via --tier / --tier-glow Variablen pro Card */
.card {
--tier: var(--accent);
--tier-glow: var(--accent-glow);
background: var(--bg-darker);
border: 1px solid var(--border-dark);
border-radius: var(--radius-lg);
padding: 2rem 1.75rem 1.75rem;
flex: 1;
min-width: 280px;
max-width: 340px; /* Default – wächst auf grossen Screens, siehe unten */
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.card.gold { --tier: var(--gold); --tier-glow: var(--gold-glow); }
.card.red { --tier: var(--red); --tier-glow: var(--red-glow); }
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--tier);
}
.card-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.badge-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--tier);
box-shadow: 0 0 8px var(--tier-glow);
flex-shrink: 0;
}
.card-name {
font-weight: 600;
font-size: 1.25rem;
letter-spacing: 0.02em;
}
.card-price {
font-size: 2.2rem;
font-weight: 700;
margin: 0.75rem 0 0.25rem;
line-height: 1.1;
color: var(--tier);
}
.card-price span {
font-size: 0.9rem;
font-weight: 400;
color: var(--text-muted);
}
.card-divider {
height: 1px;
background: var(--border-dark);
margin: 1rem 0;
}
.card-features {
list-style: none;
flex: 1;
margin-bottom: 1.25rem;
}
.card-features li {
padding: 0.4rem 0;
font-size: 0.88rem;
color: var(--text-muted);
display: flex;
align-items: flex-start;
gap: 0.6rem;
line-height: 1.4;
}
.card-features li::before {
content: '✓';
font-weight: 700;
color: var(--tier);
flex-shrink: 0;
margin-top: 1px;
}
.card-features li strong {
color: var(--text-main);
font-weight: 600;
}
.card-btn {
display: block;
text-align: center;
padding: 0.75rem 1.5rem;
border: 2px solid color-mix(in srgb, var(--tier) 60%, transparent);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--tier);
background: transparent;
text-decoration: none;
cursor: pointer;
transition: all var(--t-base);
}
.card-btn:hover {
background: var(--tier);
color: var(--text-main);
border-color: var(--tier);
}
.card.gold .card-btn:hover { color: var(--bg-darker); }
.angebot-footer-note {
margin-top: 2rem;
color: var(--text-muted);
font-size: 0.8rem;
text-align: center;
}
/* =====================================================================
SSL ZERTIFIKATE SECTION
===================================================================== */
.ssl-section {
background: var(--bg-dark);
color: var(--text-main);
padding: 5rem 1.5rem 6rem;
position: relative;
overflow: hidden;
}
.ssl-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent);
}
.ssl-wrap {
max-width: var(--content-width);
margin: 0 auto;
}
.ssl-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ssl-head-title {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.ssl-lock {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 24px var(--accent-glow);
}
.ssl-lock svg {
width: 34px;
height: 34px;
color: var(--accent);
}
.ssl-head h2 {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
}
.ssl-head h2 span { color: var(--accent); }
.ssl-head p.lead {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
}
/* ----- Vorteils-Kacheln ----- */
.ssl-benefits {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.benefit {
background: var(--bg-darker);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.benefit:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.benefit h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
margin-bottom: 0.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.benefit h4 svg {
width: 16px; height: 16px;
color: var(--accent);
flex-shrink: 0;
}
.benefit p {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
}
/* ----- Divider zwischen Vorteilen und Highlight ----- */
.ssl-divider {
margin: 3.5rem auto;
max-width: 560px;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ssl-divider::before,
.ssl-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--border-dark) 30%,
var(--border-dark) 70%,
transparent
);
}
.ssl-divider span { color: var(--accent); }
/* ----- Let's Encrypt Highlight ----- */
.ssl-highlight {
background: var(--bg-darker);
border: 1px solid var(--border-dark);
border-radius: var(--radius-lg);
padding: 2.25rem 2rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
position: relative;
overflow: hidden;
}
.ssl-highlight::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent);
}
.ssl-highlight-text .eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
padding: 0.3rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.85rem;
}
.ssl-highlight-text h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-main);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.ssl-highlight-text h3 span { color: var(--accent); }
.ssl-highlight-text p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.6;
max-width: 560px;
}
.ssl-facts {
list-style: none;
border-left: 1px solid var(--border-dark);
padding-left: 1.75rem;
min-width: 240px;
}
.ssl-facts li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.35rem 0;
font-size: 0.88rem;
color: var(--text-subtle);
}
.ssl-facts li::before {
content: '✓';
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.ssl-facts li strong {
font-weight: 600;
color: var(--text-main);
}
/* =====================================================================
DOMAIN-SECTION (Domain-Check + Preisliste)
Klassen mit Prefix "dc-" um Kollisionen zu vermeiden.
Die Section selbst kombiniert einen dunklen Hero-Teil mit einer
hellen Preisliste – schafft den Light/Dark-Wechsel im Section-Rhythmus.
===================================================================== */
/* Wrapper: setzt die gemeinsame Section-Optik ausser Kraft.
Trennstrich oben markiert den Wechsel von Angebot (dark) zu
Domain (light). */
#domain.domain-section {
min-height: 0;
padding: 0;
display: block;
font-size: 1rem;
color: var(--text-main-light);
background: var(--section-bg);
border-top: 4px solid var(--accent);
}
/* ----- Hero / Domain-Check (jetzt Light Block – gleicher
heller Hintergrund wie die Preisliste darunter) ----- */
.dc-hero {
background: var(--section-bg);
color: var(--text-main-light);
padding: 4.5rem 1.5rem 3rem;
}
.dc-hero-inner {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.dc-hero h1 {
font-size: 2.25rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
color: var(--section-text);
}
.dc-hero h1 span { color: var(--accent); }
.dc-hero .dc-subtitle {
color: var(--text-muted-light);
font-size: 1.05rem;
margin-bottom: 2rem;
}
/* ----- Search-Box (weisse Karte auf dunklem Hintergrund) ----- */
.dc-search-box {
background: var(--section-bg-alt);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-card-hover);
border: 1px solid var(--border-light);
transition: border-color var(--t-slow);
text-align: left;
}
.dc-search-box:focus-within { border-color: var(--login-border); }
.dc-input-row {
display: flex;
gap: 0;
align-items: stretch;
}
.dc-prefix,
.dc-prefix-dot {
display: flex;
align-items: center;
color: var(--text-muted-light);
font-size: 0.9rem;
white-space: nowrap;
user-select: none;
border: 1px solid var(--input-border);
}
.dc-prefix {
padding: 0 14px;
background: rgba(0,0,0,0.04);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.dc-prefix-dot {
padding: 0 6px;
background: rgba(0,0,0,0.02);
border-left: none;
border-right: none;
}
.dc-input-wrapper {
flex: 1;
position: relative;
display: flex;
align-items: stretch;
}
.dc-domain-input {
width: 100%;
padding: 14px 16px;
background: var(--section-bg-alt);
border: 1px solid var(--input-border);
border-left: none;
border-right: none;
color: var(--section-text);
font-family: inherit;
font-size: 1rem;
outline: none;
transition: background var(--t-fast);
}
.dc-domain-input:focus { background: var(--section-bg-alt); }
.dc-placeholder-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 14px 16px;
pointer-events: none;
overflow: hidden;
}
.dc-placeholder-text {
color: rgba(51,51,51,0.3);
font-family: inherit;
font-size: 1rem;
white-space: nowrap;
}
.dc-placeholder-cursor {
display: inline-block;
width: 2px;
height: 1.15em;
background: var(--accent);
margin-left: 1px;
animation: dcCursorBlink 0.85s ease-in-out infinite;
vertical-align: text-bottom;
}
@keyframes dcCursorBlink {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
.dc-tld-select {
padding: 14px 28px 14px 12px;
background: var(--section-bg-alt);
border: 1px solid var(--input-border);
border-left: none;
border-right: none;
color: var(--section-text);
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.dc-tld-select:focus { background-color: var(--text-main); }
.dc-search-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
background: var(--accent);
color: var(--text-main);
border: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--t-fast), transform var(--t-fast);
}
.dc-search-btn:hover { background: var(--accent-hover); }
.dc-search-btn:active { transform: scale(0.97); }
.dc-search-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Loading-State während Anfrage */
.dc-search-btn.is-loading {
cursor: wait;
background: var(--accent-hover);
pointer-events: none;
}
.dc-search-btn.is-loading .dc-btn-icon,
.dc-search-btn.is-loading .dc-btn-label { display: none; }
.dc-search-btn .dc-btn-spinner { display: none; }
.dc-search-btn.is-loading .dc-btn-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: var(--text-main);
border-radius: 50%;
animation: dcSpin 0.7s linear infinite;
}
@keyframes dcSpin {
to { transform: rotate(360deg); }
}
.dc-search-btn:disabled,
.dc-search-btn[aria-busy="true"] { opacity: 0.95; }
/* ----- Ergebnis-Block ----- */
.dc-result {
margin-top: 20px;
padding: 18px 20px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
gap: 14px;
font-size: 0.98rem;
line-height: 1.4;
animation: dcResultFadeIn 0.4s ease;
}
@keyframes dcResultFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.dc-result-icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.dc-result-icon svg { width: 20px; height: 20px; stroke-width: 3; }
.dc-result-text { flex: 1; }
.dc-result-domain {
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dc-result-message {
color: var(--text-muted-light);
font-size: 0.88rem;
margin-top: 2px;
}
.dc-result.available {
background: var(--color-success-bg);
border: 1px solid rgba(46,125,50,0.3);
}
.dc-result.available .dc-result-icon { background: var(--color-success); color: var(--text-main); }
.dc-result.available .dc-result-domain { color: var(--color-success); }
.dc-result.taken {
background: var(--color-error-bg);
border: 1px solid rgba(198,40,40,0.3);
}
.dc-result.taken .dc-result-icon { background: var(--color-error); color: var(--text-main); }
.dc-result.taken .dc-result-domain { color: var(--color-error); }
.dc-result.error,
.dc-result.ratelimit {
background: var(--color-warn-bg);
border: 1px solid rgba(239,108,0,0.3);
}
.dc-result.error .dc-result-icon,
.dc-result.ratelimit .dc-result-icon { background: var(--color-warn); color: var(--text-main); }
.dc-result.error .dc-result-domain,
.dc-result.ratelimit .dc-result-domain { color: var(--color-warn); }
/* Bestell-Button im Erfolgsfall ('available') */
.dc-result.available { flex-wrap: wrap; }
.dc-result-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.25rem;
margin-left: auto;
background: var(--accent);
color: var(--text-main);
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border: 2px solid var(--accent);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--t-base),
border-color var(--t-base),
transform var(--t-base),
box-shadow var(--t-base);
}
.dc-result-cta:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 0 8px var(--accent-glow),
0 4px 12px rgba(33,150,243,0.18);
}
.dc-result-cta:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.dc-result-cta svg {
width: 16px; height: 16px;
stroke-width: 2.5;
}
/* ----- PREISLISTE (Light Section) ----- */
.dc-pricing {
padding: 4rem 1.5rem 3rem;
background: var(--section-bg);
}
.dc-pricing-inner {
max-width: 780px;
margin: 0 auto;
}
.dc-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
}
.dc-pricing-header h2 {
font-size: 1.85rem;
font-weight: 600;
color: var(--section-text);
letter-spacing: -0.01em;
margin-bottom: 0.35rem;
}
.dc-pricing-header h2 span { color: var(--accent); }
.dc-pricing-header p {
color: var(--text-muted-light);
font-size: 1rem;
}
.dc-pricing-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dc-pricing-card {
background: var(--section-bg-alt);
border-radius: var(--radius-lg);
padding: 1.75rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-card);
border: 1px solid var(--border-light);
position: relative;
overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.dc-pricing-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--accent);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.dc-pricing-card:hover {
box-shadow: 0 0 8px var(--accent-glow),
0 4px 12px rgba(33,150,243,0.12);
transform: translateY(-2px);
}
.dc-tld-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.dc-tld-badge {
display: inline-flex;
align-items: center;
background: var(--section-bg);
color: var(--bg-darker);
font-size: 0.875rem;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
letter-spacing: 0.2px;
}
.dc-card-right {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
margin-left: 1.5rem;
}
.dc-price {
font-size: 2rem;
font-weight: 700;
color: var(--bg-darker);
line-height: 1;
}
.dc-price .dc-currency {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-muted-light);
margin-left: 2px;
}
.dc-price-period {
font-size: 0.8125rem;
color: var(--text-muted-light);
margin-top: 4px;
}
.dc-pricing-footer {
text-align: center;
margin-top: 2.5rem;
font-size: 0.85rem;
color: var(--text-muted-light);
line-height: 1.6;
}
.dc-pricing-footer a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: color var(--t-base);
}
.dc-pricing-footer a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* =====================================================================
LOGIN SECTION (Kundenbereich + Plesk)
Design 1:1 aus login.html übernommen – Tokens stammen aus dem
:root-Block oben, daher hier ohne eigenen :root/Base-Teil.
===================================================================== */
/* ========== Login-Section ========== */
.login-section {
padding: 4rem 1.5rem;
background: var(--section-bg);
border-top: 4px solid var(--accent);
}
.login-grid {
max-width: var(--content-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
align-items: stretch;
}
.login-card {
border-radius: var(--radius-lg);
padding: 2.25rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.login-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.login-card.customer {
background: var(--bg-dark);
border: 1px solid var(--border-dark);
color: var(--text-main);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.login-card.customer::before { background: var(--accent); }
.login-card.plesk {
background: var(--section-bg-alt);
border: 1px solid var(--border-light);
color: var(--section-text);
box-shadow: var(--shadow-card);
}
.login-card.plesk::before { background: var(--gold); }
.login-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.card-eyebrow {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.login-card.customer .card-eyebrow { color: var(--text-muted); }
.login-card.plesk .card-eyebrow { color: var(--text-muted-light); }
.card-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; }
.login-card.customer .card-eyebrow .dot {
background: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}
.login-card.plesk .card-eyebrow .dot {
background: var(--gold);
box-shadow: 0 0 8px var(--gold-glow);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 0.35rem;
}
.login-card.customer .card-title { color: var(--text-main); }
.login-card.plesk .card-title { color: var(--section-text); }
.card-desc { font-size: 0.95rem; margin-bottom: 1.75rem; }
.login-card.customer .card-desc { color: var(--text-subtle); }
.login-card.plesk .card-desc { color: var(--text-muted-light); }
.login-form .form-group { margin-bottom: 1.1rem; }
.login-form label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-main);
margin-bottom: 0.4rem;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 0.8rem 0.95rem;
font-family: inherit;
font-size: 0.95rem;
color: var(--text-main);
background: rgba(255,255,255,0.08);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.login-form input::placeholder { color: rgba(255,255,255,0.45); }
.login-form input:focus {
outline: none;
background: rgba(255,255,255,0.12);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 3rem; }
.password-toggle {
position: absolute;
top: 50%; right: 0.6rem;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
color: var(--text-muted);
padding: 0.4rem;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
transition: color var(--t-base), background var(--t-base);
}
.password-toggle:hover { color: var(--accent); background: var(--login-hover); }
.password-toggle svg { display: block; }
.form-options {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.forgot-link {
font-size: 0.88rem;
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: color var(--t-base);
}
.forgot-link:hover { color: var(--accent); text-decoration: underline; }
.login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.25rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all var(--t-base);
width: 100%;
}
.login-btn-primary {
background: var(--accent);
color: var(--text-main);
border-color: var(--accent);
}
.login-btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
}
.login-btn-gold {
background: transparent;
color: var(--gold);
border-color: rgba(249,168,37,0.6);
}
.login-btn-gold:hover {
background: var(--gold);
color: var(--bg-darker);
border-color: var(--gold);
transform: translateY(-1px);
}
.plesk-body { flex: 1; display: flex; flex-direction: column; }
.plesk-features { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.plesk-features li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.55rem 0;
font-size: 0.92rem;
color: var(--section-text);
border-bottom: 1px solid var(--border-light);
}
.plesk-features li:last-child { border-bottom: none; }
.plesk-features li svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.plesk-info {
background: var(--section-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
font-size: 0.82rem;
color: var(--text-muted-light);
margin-bottom: 1.5rem;
display: flex;
gap: 0.6rem;
align-items: flex-start;
}
.plesk-info svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.plesk-cta-wrap { margin-top: auto; }
.card-footer {
margin-top: 1.5rem;
padding-top: 1.25rem;
font-size: 0.85rem;
text-align: center;
}
.login-card.customer .card-footer {
border-top: 1px solid var(--border-dark);
color: var(--text-muted);
}
.login-card.plesk .card-footer {
border-top: 1px solid var(--border-light);
color: var(--text-muted-light);
}
.card-footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
.card-footer a:hover { text-decoration: underline; }
/* MD (900px) – Cards einspaltig, an Projekt-Breakpoint angeglichen */
@media (max-width: 900px) {
.login-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.login-section { padding: 2.5rem 1rem; }
.login-card { padding: 1.75rem 1.5rem; }
}
/* XS (500px) – an Projekt-Breakpoint angeglichen */
@media (max-width: 500px) {
.form-options { flex-direction: column; align-items: flex-start; }
}
/* =====================================================================
KONTAKT SECTION (Support-Formular) – aus support_kontakt_1.html
Vollständig unter #kontakt gescoped, damit nichts mit anderen
Sections (z.B. Login-Formular) oder dem globalen main-Padding
kollidiert. Tokens stammen aus dem :root oben.
Trennstrich oben (Über-uns/dark -> Kontakt/light).
Mobile-Breakpoint an Projekt-Set angepasst: 768px (SM) statt 600px.
===================================================================== */
#kontakt.kontakt-section {
padding: 3rem 1.5rem;
background: var(--section-bg);
color: var(--text-main-light);
border-top: 4px solid var(--accent);
}
#kontakt .content-wrap {
max-width: var(--content-width);
margin: 0 auto;
}
#kontakt .page-intro {
text-align: center;
margin-bottom: 2.5rem;
}
#kontakt .page-intro h1 {
font-size: 2.25rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--section-text);
margin-bottom: 0.75rem;
}
#kontakt .page-intro h1 span { color: var(--accent); }
#kontakt .page-intro p {
font-size: 1.05rem;
color: var(--text-muted-light);
max-width: 640px;
margin: 0 auto;
}
#kontakt .form-wrap {
max-width: 720px;
margin: 0 auto;
}
#kontakt .form-card {
background: var(--section-bg-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-card);
}
#kontakt .form-card h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--section-text);
margin-bottom: 0.35rem;
letter-spacing: -0.01em;
}
#kontakt .form-card h2::before {
content: '';
display: inline-block;
width: 4px;
height: 1.1rem;
background: var(--accent);
margin-right: 0.6rem;
vertical-align: -2px;
border-radius: 2px;
}
#kontakt .form-card .form-lead {
font-size: 0.95rem;
color: var(--text-muted-light);
margin-bottom: 1.75rem;
}
#kontakt .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.25rem;
}
#kontakt .form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
#kontakt .form-row .form-group { margin-bottom: 0; }
#kontakt .form-group label {
font-size: 0.85rem;
font-weight: 600;
color: var(--section-text);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
}
#kontakt .form-group label .required {
color: var(--red);
margin-left: 2px;
}
#kontakt .form-group input,
#kontakt .form-group select,
#kontakt .form-group textarea {
width: 100%;
padding: 0.75rem 0.9rem;
font-family: inherit;
font-size: 0.95rem;
color: var(--section-text);
background: var(--section-bg-alt);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
transition: all var(--t-base);
appearance: none;
-webkit-appearance: none;
}
#kontakt .form-group input::placeholder,
#kontakt .form-group textarea::placeholder {
color: var(--text-muted-light);
}
#kontakt .form-group input:hover,
#kontakt .form-group select:hover,
#kontakt .form-group textarea:hover {
border-color: var(--login-border);
}
#kontakt .form-group input:focus,
#kontakt .form-group select:focus,
#kontakt .form-group textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
#kontakt .form-group select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%232196f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px 8px;
padding-right: 2.5rem;
cursor: pointer;
}
#kontakt .form-group textarea {
min-height: 160px;
resize: vertical;
line-height: 1.55;
}
#kontakt .form-group .helper {
font-size: 0.8rem;
color: var(--text-muted-light);
margin-top: 0.4rem;
}
#kontakt .form-check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 1.5rem 0 1.75rem;
font-size: 0.88rem;
color: var(--text-muted-light);
line-height: 1.5;
}
#kontakt .form-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
#kontakt .form-check label { cursor: pointer; }
#kontakt .form-check a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
#kontakt .form-check a:hover { text-decoration: underline; }
/* Validierungsfehler: betroffene Felder rot hervorheben.
Struktur wie der Fokus-Stil (Border + weicher Glow), nur in --red.
Die Klasse .feld-fehler wird von script.js (Block 4) gesetzt und
beim Korrigieren des Feldes wieder entfernt. */
#kontakt .form-group input.feld-fehler,
#kontakt .form-group select.feld-fehler,
#kontakt .form-group textarea.feld-fehler,
#kontakt .form-group input.feld-fehler:focus,
#kontakt .form-group select.feld-fehler:focus,
#kontakt .form-group textarea.feld-fehler:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px var(--red-glow);
}
/* Datenschutz-Checkbox: rote Umrandung (box-shadow greift bei
accent-color-Checkboxen nicht zuverlaessig, daher outline). */
#kontakt .form-check input[type="checkbox"].feld-fehler {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* Honeypot-Feld: fuer Menschen komplett unsichtbar, aber im DOM
vorhanden (Spam-Falle). Bewusst NICHT display:none oder
visibility:hidden, da manche Bots solche Felder erkennen und
ueberspringen; off-screen + 0-Groesse wirkt unauffaelliger. */
.hp-feld {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#kontakt .form-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
#kontakt .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all var(--t-base);
}
#kontakt .btn-primary {
background: var(--accent);
color: var(--text-main);
border-color: var(--accent);
}
#kontakt .btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
#kontakt .btn-ghost {
background: transparent;
color: var(--accent);
border-color: var(--login-border);
}
#kontakt .btn-ghost:hover {
background: var(--login-hover);
}
/* Responsive – Projekt-Breakpoint SM (768px): Single-Column auf Phones */
@media (max-width: 768px) {
#kontakt.kontakt-section { padding: 2rem 1rem; }
#kontakt .page-intro h1 { font-size: 1.75rem; }
#kontakt .form-card { padding: 1.5rem; }
#kontakt .form-row { grid-template-columns: 1fr; gap: 0; }
#kontakt .form-row .form-group { margin-bottom: 1.25rem; }
#kontakt .form-actions { flex-direction: column; }
#kontakt .form-actions .btn { width: 100%; justify-content: center; }
}
/* =====================================================================
FOOTER
===================================================================== */
.footer {
background: var(--bg-darker);
color: var(--text-main);
padding: 3rem 0 1.5rem;
border-top: 4px solid var(--accent);
}
.footer-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2.5rem;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-main);
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
}
.footer-logo-img { height: 32px; width: auto; }
.footer-description {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 320px;
}
.footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--border-dark);
border-radius: var(--radius-sm);
color: var(--text-muted);
transition: all var(--t-base);
}
.social-link:hover {
background: var(--accent);
color: var(--text-main);
transform: translateY(-2px);
}
.social-icon { width: 18px; height: 18px; fill: currentColor; }
.footer-column h3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-links a {
display: inline-block;
font-size: 0.95rem;
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-base), padding-left var(--t-base);
}
.footer-links a:hover {
color: var(--accent);
padding-left: 4px;
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid var(--border-dark);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-muted);
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.footer-bottom-links a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-base);
}
.footer-bottom-links a:hover { color: var(--accent); }
/* =====================================================================
RESPONSIVE – Mobile-Anpassungen (Desktop-First, max-width)
Reihenfolge: LG → MD → SM → XS
===================================================================== */
/* ---------- LG ↓ 1170px : Burger-Nav + Footer einspaltig ---------- */
@media (max-width: 1170px) {
.hamburger { display: flex; }
.nav-left { gap: 1rem; }
.nav-links {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
flex-direction: column;
background: var(--bg-dark);
padding: 1.5rem 0;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
}
.nav-links.active { transform: translateX(0); }
.nav-links li { width: 100%; }
.nav-links a {
display: block;
width: 100%;
padding: 1rem 1.5rem;
font-size: 1rem;
text-align: center;
}
.nav-links a::after {
left: 50%;
right: auto;
bottom: 0.5rem;
width: 60px;
transform: translateX(-50%) scaleX(0);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
transform: translateX(-50%) scaleX(1);
}
.logo { font-size: 0.9rem; }
.logo-img { height: 28px; }
.logo-text { display: none; }
.nav-right {
padding-left: 0.5rem;
border-left: none;
gap: 0.75rem;
}
.login-link { padding: 0.5rem; }
.login-link span { display: none; }
/* Footer einspaltig */
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-brand,
.footer-column,
.footer-column h3 { text-align: center; }
.footer-brand { align-items: center; }
.footer-description { max-width: 100%; text-align: center; }
.footer-social { justify-content: center; }
.footer-links { align-items: center; }
.footer-links a:hover { padding-left: 0; }
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-bottom-links {
flex-direction: column;
gap: 0.75rem;
}
}
/* ---------- MD ↓ 900px : Cards einspaltig + SSL-Highlight einspaltig ---------- */
@media (max-width: 900px) {
.cards-container { flex-direction: column; align-items: center; }
.card { max-width: 400px; width: 100%; }
.ssl-benefits { grid-template-columns: 1fr; }
.ssl-divider { margin: 2.5rem auto; }
.ssl-highlight {
grid-template-columns: 1fr;
padding: 1.75rem 1.5rem;
}
.ssl-facts {
border-left: none;
border-top: 1px solid var(--border-dark);
padding-left: 0;
padding-top: 1.25rem;
}
}
/* ---------- SM ↓ 768px : Hero kürzer + Domain-Searchbar kompakter ---------- */
@media (max-width: 768px) {
.hero-section { min-height: 80vh; }
/* Domain: Search-Bar wird auf kleinen Screens eng → Label weg, Prefix-Padding reduzieren */
.dc-search-btn .dc-btn-label { display: none; }
.dc-search-btn { padding: 14px 16px; }
.dc-prefix { padding: 0 10px; font-size: 0.82rem; }
/* Pricing-Card: bei knapper Breite ein Spalte */
.dc-pricing-card {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
}
.dc-card-right { align-items: flex-start; margin-left: 0; }
}
/* ---------- XS ↓ 500px : Phone-Feinschliff ---------- */
@media (max-width: 500px) {
.ssl-section { padding: 3.5rem 1.25rem 4rem; }
.ssl-head h2 { font-size: 1.45rem; }
.ssl-highlight-text h3 { font-size: 1.25rem; }
.ssl-lock { width: 60px; height: 60px; }
.ssl-lock svg { width: 28px; height: 28px; }
/* Domain: Hero-Padding und H1 verkleinern, Pricing kompakter */
.dc-hero { padding: 3rem 1rem 4rem; }
.dc-hero h1 { font-size: 1.75rem; }
.dc-pricing { padding: 3rem 1rem 2.5rem; }
.dc-price { font-size: 1.75rem; }
/* Erfolgs-Ergebnis: CTA-Button füllt die volle Breite */
.dc-result.available .dc-result-cta {
margin-left: 0;
width: 100%;
justify-content: center;
}
}
/* =====================================================================
DESKTOP-SKALIERUNG – Cards & Sections wachsen mit (min-width)
Reihenfolge: XL → 2XL → 3XL → 4XL
===================================================================== */
/* ---------- XL ↑ 1440px : sanfter Wachstumsschritt ---------- */
@media (min-width: 1440px) {
.card {
max-width: 380px;
padding: 2.25rem 2rem 2rem;
}
.angebot-title { font-size: 2rem; }
.ssl-head h2 { font-size: 2rem; }
}
/* ---------- 2XL ↑ 1920px : Full-HD ---------- */
@media (min-width: 1920px) {
.card {
max-width: 420px;
padding: 2.5rem 2.25rem 2.25rem;
}
.cards-container { gap: 2rem; }
.angebot-title { font-size: 2.25rem; margin-bottom: 3rem; }
.ssl-head h2 { font-size: 2.25rem; }
.ssl-benefits { gap: 1.5rem; }
}
/* ---------- 3XL ↑ 2560px : WQHD – Karten deutlich breiter ---------- */
@media (min-width: 2560px) {
.card {
max-width: 480px;
padding: 2.75rem 2.5rem 2.5rem;
}
.cards-container { gap: 2.5rem; }
.card-name { font-size: 1.4rem; }
.card-price { font-size: 2.5rem; }
.card-features li { font-size: 1rem; padding: 0.5rem 0; }
.card-btn { font-size: 1rem; padding: 0.9rem 1.75rem; }
.angebot-title { font-size: 2.5rem; }
.ssl-head h2 { font-size: 2.5rem; }
.ssl-highlight { padding: 2.75rem 2.5rem; }
}
/* ---------- 4XL ↑ 3440px : Ultrawide – maximale Container-Breite ---------- */
@media (min-width: 3440px) {
.card {
max-width: 540px;
padding: 3rem 2.75rem 2.75rem;
}
.cards-container { gap: 3rem; }
.angebot-section { padding: 6rem 2rem; }
.ssl-section { padding: 7rem 1.5rem 8rem; }
}
/* =========================================================
BITPOINT · ÜBER UNS – kombinierte Sektion (max. 800px hoch)
CSS 1:1 übernommen aus ueber_uns_aktuell.html – nicht verändern!
========================================================= */
.bp-about {
background: var(--bg-dark);
color: var(--text-main);
/* Maximalhöhe = 1080px gemäss Vorgabe */
max-height: 1080px;
overflow: hidden;
}
.bp-about .bp-inner {
max-width: var(--content-width);
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* ----- HERO (übernommen aus v3, OHNE bp-pill) ----- */
.bp-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 2.5rem;
align-items: center;
border-bottom: 4px solid var(--accent);
padding-bottom: 2rem;
margin-bottom: 2rem;
}
.bp-hero-text { min-width: 0; }
.bp-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 0.85rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--login-border);
border-radius: var(--radius-sm);
background: var(--accent-soft);
}
.bp-h1 {
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 0.85rem;
color: var(--text-main);
}
.bp-h1 span { color: var(--accent); }
.bp-lead {
font-size: 1rem;
color: var(--text-subtle);
margin: 0;
line-height: 1.65;
}
/* Hero-Bild */
.bp-hero-img {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 10;
box-shadow: var(--shadow-card-hover);
border: 1px solid var(--border-dark);
}
.bp-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--t-base);
}
.bp-hero-img:hover img { transform: scale(1.03); }
.bp-hero-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(33,150,243,0.18) 0%,
rgba(58,58,58,0.0) 40%,
rgba(58,58,58,0.55) 100%
);
pointer-events: none;
}
.bp-hero-badge {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
background: rgba(58,58,58,0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid var(--border-dark);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-main);
letter-spacing: 0.05em;
z-index: 1;
}
.bp-hero-badge::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
/* ----- STATS (aus v1) ----- */
.bp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
margin-bottom: 2rem;
}
.bp-stat {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
padding: 1rem 0.75rem;
text-align: center;
transition: transform var(--t-base), border-color var(--t-base);
}
.bp-stat:hover {
transform: translateY(-2px);
border-color: var(--login-border);
}
.bp-stat-num {
font-size: 1.6rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
letter-spacing: -0.02em;
}
.bp-stat-lbl {
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
}
/* ----- VALUES (aus v1, kompakt – 3 Stück in einer Reihe) ----- */
.bp-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
}
.bp-value {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
transition: background var(--t-base);
}
.bp-value:nth-child(2) { border-left-color: var(--gold); }
.bp-value:nth-child(3) { border-left-color: var(--red); }
.bp-value:hover { background: rgba(255,255,255,0.06); }
.bp-value h5 {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.25rem;
color: var(--text-main);
}
.bp-value p {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
/* ----- BLOCK-HEAD (für Infrastruktur-Sektion) ----- */
.bp-block-head {
margin-bottom: 1.25rem;
}
.bp-kicker {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 0.4rem;
}
.bp-h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 0.4rem;
color: var(--text-main);
}
.bp-h2 span { color: var(--accent); }
.bp-sub {
color: var(--text-muted);
font-size: 0.9rem;
max-width: 720px;
margin: 0;
line-height: 1.55;
}
/* ----- INFRASTRUKTUR-TEXTBOX (vereinfacht, ersetzt vorherige Cards) ----- */
.bp-infra-box {
background: var(--bg-darker);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem;
}
.bp-infra-box p {
color: var(--text-subtle);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.bp-infra-box p + p {
margin-top: 0.6rem;
}
.bp-infra-box strong {
color: var(--text-main);
font-weight: 600;
}
/* ----- Responsive ----- */
@media (max-width: 900px) {
.bp-about { max-height: none; overflow: visible; }
.bp-hero {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.bp-hero-img { aspect-ratio: 16 / 9; order: -1; }
.bp-h1 { font-size: 1.6rem; }
.bp-stats { grid-template-columns: repeat(2, 1fr); }
.bp-values { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
.bp-about .bp-inner { padding: 1.5rem 1.25rem; }
.bp-h1 { font-size: 1.4rem; }
.bp-lead { font-size: 0.9rem; }
}
/* =====================================================================
SUPPORT SECTION (BitBot KI-Assistent + FAQ)
Light-Theme — sitzt zwischen SSL (dark) und Über-uns (dark),
sorgt damit für korrekten Light/Dark-Rhythmus.
Alle Selektoren mit #support gescoped, um Konflikte zu vermeiden.
===================================================================== */
.support-section {
background: var(--section-bg);
color: var(--text-main-light);
padding: 1.25rem 1.5rem 6rem;
position: relative;
overflow: hidden;
border-top: 4px solid var(--accent);
border-bottom: 4px solid var(--accent);
}
.support-inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* ----- Section-Kopf (analog SSL-Section) ----- */
#support .support-head {
text-align: center;
margin-bottom: 2.5rem;
}
#support .support-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
}
#support .support-title {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
margin-bottom: 0.75rem;
color: var(--section-text);
}
#support .support-title span { color: var(--accent); }
#support .support-lead {
color: var(--text-muted-light);
font-size: 1rem;
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
}
/* ----- Zentrierter Wrapper für Chat- + FAQ-Card ----- */
#support .support-wrap {
width: 100%;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* =========================
Chat-Card
========================= */
#support .chat-card {
background: var(--section-bg-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
height: 540px;
overflow: hidden;
}
/* --- Bot-Bar (Mini-Header der Card) --- */
#support .bot-bar {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 0.7rem;
}
#support .bot-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: var(--text-main);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
box-shadow: 0 0 10px var(--accent-glow);
flex-shrink: 0;
}
#support .bot-meta { flex: 1; min-width: 0; }
#support .bot-name {
font-size: 0.92rem;
font-weight: 600;
color: var(--section-text);
display: flex;
align-items: center;
gap: 0.4rem;
}
#support .bot-name .badge {
font-size: 0.62rem;
font-weight: 600;
color: var(--accent);
background: var(--login-hover);
padding: 0.05rem 0.35rem;
border-radius: 999px;
border: 1px solid var(--accent-soft);
letter-spacing: 0.05em;
}
#support .bot-status {
font-size: 0.72rem;
color: var(--text-muted-light);
margin-top: 1px;
}
#support .bot-status .live-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-success);
margin-right: 0.3rem;
vertical-align: 1px;
}
#support .clear-btn {
background: transparent;
border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
color: var(--text-muted-light);
cursor: pointer;
transition: all var(--t-base);
font-family: inherit;
}
#support .clear-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--login-hover);
}
/* --- Nachrichten-Bereich --- */
#support .messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
#support .messages::-webkit-scrollbar { width: 6px; }
#support .messages::-webkit-scrollbar-track { background: transparent; }
#support .messages::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 3px;
}
#support .messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
#support .msg {
display: flex;
gap: 0.55rem;
max-width: 88%;
animation: supFadeIn 0.3s ease;
}
@keyframes supFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
#support .msg-avatar {
width: 28px; height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
}
#support .msg-bot .msg-avatar {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: var(--text-main);
}
#support .msg-user .msg-avatar {
background: var(--bg-dark);
color: var(--text-main);
}
#support .msg-bubble {
padding: 0.65rem 0.9rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
line-height: 1.55;
word-wrap: break-word;
/* Zeilenumbrueche (\n) aus der Bot-Antwort beibehalten; lange
Zeilen brechen dank pre-WRAP trotzdem normal um. */
white-space: pre-wrap;
}
#support .msg-bot .msg-bubble {
background: var(--section-bg);
color: var(--section-text);
border: 1px solid var(--border-light);
border-top-left-radius: 2px;
}
#support .msg-user {
align-self: flex-end;
flex-direction: row-reverse;
}
#support .msg-user .msg-bubble {
background: var(--accent);
color: var(--text-main);
border-top-right-radius: 2px;
}
/* --- Typing-Indikator --- */
#support .typing-bubble {
background: var(--section-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
border-top-left-radius: 2px;
padding: 0.7rem 0.9rem;
display: flex;
gap: 4px;
}
#support .typing-bubble span {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: supBounce 1.3s infinite ease-in-out;
}
#support .typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
#support .typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes supBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* --- Eingabebereich --- */
#support .input-area {
padding: 0.75rem;
border-top: 1px solid var(--border-light);
background: var(--section-bg-alt);
}
#support .input-shell {
display: flex;
align-items: flex-end;
gap: 0.5rem;
background: var(--section-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
padding: 0.4rem 0.4rem 0.4rem 0.85rem;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
#support .input-shell:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
background: var(--section-bg-alt);
}
#support .input-shell textarea {
flex: 1;
border: none;
outline: none;
resize: none;
background: transparent;
font-family: inherit;
font-size: 0.92rem;
color: var(--section-text);
line-height: 1.5;
padding: 0.4rem 0;
max-height: 110px;
min-height: 22px;
}
#support .input-shell textarea::placeholder { color: var(--text-muted-light); }
#support .send-btn {
width: 36px; height: 36px;
border: none;
background: var(--accent);
color: var(--text-main);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--t-base);
flex-shrink: 0;
}
#support .send-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
#support .send-btn:disabled {
background: var(--input-border);
cursor: not-allowed;
transform: none;
}
#support .send-btn svg { width: 17px; height: 17px; }
/* =========================
FAQ-Card (kollabierbar)
========================= */
#support .faq-card {
background: var(--section-bg-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
#support .faq-head {
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
user-select: none;
transition: background var(--t-fast);
}
#support .faq-head:hover { background: var(--section-bg); }
#support .faq-head .faq-icon-bg {
width: 30px; height: 30px;
border-radius: var(--radius-sm);
background: var(--login-hover);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#support .faq-head .faq-icon-bg svg { width: 14px; height: 14px; }
#support .faq-head h3 {
font-size: 0.88rem;
font-weight: 600;
color: var(--section-text);
flex: 1;
display: flex;
align-items: center;
gap: 0.4rem;
}
#support .faq-head .accent-bar {
width: 3px; height: 0.85rem;
background: var(--accent);
border-radius: 2px;
}
#support .faq-head .count {
font-size: 0.72rem;
color: var(--text-muted-light);
font-weight: 400;
}
#support .faq-head .chev {
transition: transform var(--t-base);
color: var(--text-muted-light);
}
#support .faq-card.open .faq-head .chev { transform: rotate(180deg); }
#support .faq-body {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-slow);
}
#support .faq-card.open .faq-body { max-height: 600px; }
#support .faq-body-inner {
padding: 0 1rem 0.85rem;
border-top: 1px solid var(--border-light);
}
/* Suchfeld */
#support .faq-search {
position: relative;
margin: 0.85rem 0 0.7rem;
}
#support .faq-search input {
width: 100%;
padding: 0.55rem 0.85rem 0.55rem 2.1rem;
background: var(--section-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.85rem;
color: var(--section-text);
outline: none;
transition: all var(--t-base);
}
#support .faq-search input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
background: var(--section-bg-alt);
}
#support .faq-search input::placeholder { color: var(--text-muted-light); }
#support .faq-search svg {
position: absolute;
left: 0.65rem; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
color: var(--text-muted-light);
pointer-events: none;
}
/* FAQ-Liste */
#support .faq-list {
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--section-bg);
}
#support .faq-list::-webkit-scrollbar { width: 6px; }
#support .faq-list::-webkit-scrollbar-track { background: transparent; }
#support .faq-list::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 3px;
}
#support .faq-item {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
transition: all var(--t-fast);
font-size: 0.86rem;
color: var(--section-text);
display: flex;
align-items: center;
gap: 0.55rem;
}
#support .faq-item:last-child { border-bottom: none; }
#support .faq-item:hover {
background: var(--login-hover);
color: var(--accent);
padding-left: 1rem;
}
#support .faq-item .arrow {
color: var(--text-muted-light);
flex-shrink: 0;
transition: all var(--t-base);
}
#support .faq-item:hover .arrow {
color: var(--accent);
transform: translateX(2px);
}
#support .faq-item .text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#support .faq-item mark {
background: rgba(249,168,37,0.3);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
#support .faq-item.hidden { display: none; }
/* Leerer Suchergebnis-Zustand */
#support .faq-empty {
padding: 1.25rem 0.85rem;
text-align: center;
font-size: 0.83rem;
color: var(--text-muted-light);
display: none;
}
#support .faq-empty.show { display: block; }
/* =====================================================================
SUPPORT SECTION – Responsive Anpassungen
Folgt dem Projekt-Breakpoint-System (xs/sm/md/lg/xl/2xl/3xl/4xl)
===================================================================== */
/* LG (≤ 1170 px): leichter Padding-Abbau */
@media (max-width: 1170px) {
.support-section { padding: 1rem 1.5rem 5rem; }
}
/* MD (≤ 900 px): Section noch enger, Header-Lead etwas kleiner */
@media (max-width: 900px) {
.support-section { padding: 0.875rem 1.25rem 4rem; }
#support .support-title { font-size: 1.6rem; }
#support .support-lead { font-size: 0.95rem; }
}
/* SM (≤ 768 px): Card-Höhe etwas reduziert, Bubble darf breiter werden */
@media (max-width: 768px) {
#support .chat-card { height: 480px; }
#support .msg { max-width: 92%; }
}
/* XS (≤ 500 px): kompakt – Card flexibel, kleinere Titel */
@media (max-width: 500px) {
.support-section { padding: 0.75rem 1rem 3rem; }
#support .support-title { font-size: 1.4rem; }
#support .chat-card { height: 440px; }
#support .msg { max-width: 95%; }
#support .faq-list { max-height: 200px; }
}
/* 2XL (≥ 1920 px): Card etwas grosszügiger */
@media (min-width: 1920px) {
#support .support-wrap { max-width: 780px; }
#support .chat-card { height: 600px; }
}
/* 3XL (≥ 2560 px): WQHD-Komfort */
@media (min-width: 2560px) {
#support .support-wrap { max-width: 840px; }
#support .chat-card { height: 640px; }
}
/* =====================================================================
17. FORMULAR-HINWEISE (serverseitige Meldungen)
---------------------------------------------------------------------
Erfolgs-/Fehlermeldung, die von der PHP-Verarbeitung (z.B.
verarbeitung/kontakt.php) oberhalb eines Formulars angezeigt wird.
Nutzt die vorhandenen Design-Tokens, um sich ins Farbschema
einzufuegen.
===================================================================== */
.form-hinweis {
padding: 0.9rem 1.1rem; /* etwas Innenabstand fuer Lesbarkeit */
border-radius: var(--radius, 8px);
margin-bottom: 1.25rem; /* Abstand zum darunterliegenden Formular */
font-size: 0.95rem;
line-height: 1.45;
border: 1px solid transparent; /* Farbe je nach Status unten */
}
/* Erfolg: gruenlicher Ton */
.form-hinweis-erfolg {
background: rgba(46, 160, 67, 0.12);
border-color: rgba(46, 160, 67, 0.45);
color: #1a7f37;
}
/* Fehler: roter Ton (nutzt die Projekt-Variable --red, falls vorhanden) */
.form-hinweis-fehler {
background: rgba(220, 53, 69, 0.10);
border-color: rgba(220, 53, 69, 0.45);
color: var(--red, #c92a2a);
}
/* Hinweis: blauer Ton. Kein Fehler und kein Erfolg, sondern eine
Mitteilung – etwa der Uebergangshinweis fuer Bestandskunden in
der Login-Karte oder der Hinweis auf einen Passwortwechsel im
Kundenbereich (Etappe 3b). */
.form-hinweis-info {
background: rgba(13, 110, 253, 0.09);
border-color: rgba(13, 110, 253, 0.38);
color: #0a4fa8;
}
/* Innerhalb der Hinweisboxen sollen Links mitgefaerbt sein,
sonst springen sie aus dem Farbton heraus. */
.form-hinweis a {
color: inherit;
text-decoration: underline;
}
/* ---------------------------------------------------------------
HINWEISE IN DER LOGIN-KARTE
---------------------------------------------------------------
ACHTUNG, hier gilt eine andere Rechnung: Die Kundenkarte der
Login-Section steht auf DUNKLEM Grund (--bg-dark), waehrend die
Farben oben fuer helle Formulare gemacht sind. Dunkelblaue oder
dunkelrote Schrift auf dunkelgrauem Grund ist praktisch nicht zu
lesen.
Deshalb hier dieselbe Bauart, aber umgekehrte Logik: heller
Text, gedaempfter Grund, und die Bedeutung steckt im farbigen
Balken links statt in der Schriftfarbe.
--------------------------------------------------------------- */
.login-card .form-hinweis {
margin-bottom: 1rem;
font-size: 0.88rem;
padding: 0.7rem 0.9rem;
line-height: 1.5;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-left-width: 3px;
color: var(--text-subtle);
}
/* Mitteilung: blauer Balken – ruhig, wie die uebrigen Akzente */
.login-card .form-hinweis-info {
border-left-color: var(--accent);
}
/* Fehler: roter Balken. Der Text bleibt hell, nur der Balken warnt –
roter Text waere auf diesem Grund kaum besser lesbar als blauer. */
.login-card .form-hinweis-fehler {
background: rgba(239, 83, 80, 0.12);
border-color: rgba(239, 83, 80, 0.30);
border-left-color: var(--red);
color: var(--text-main);
}
/* Erfolg: gruener Balken, gleiche Bauart */
.login-card .form-hinweis-erfolg {
background: rgba(46, 160, 67, 0.14);
border-color: rgba(46, 160, 67, 0.30);
border-left-color: #4caf50;
color: var(--text-main);
}
/* Das hervorgehobene Wort am Anfang ("Bestandskunden:") soll sich
abheben, ohne eine dritte Farbe einzufuehren. */
.login-card .form-hinweis strong {
color: var(--text-main);
}
/* Links im Hinweis: heller Text mit Unterstreichung. Die
Akzentfarbe waere hier zu dunkel, deshalb erbt der Link die
Textfarbe und wird nur beim Ueberfahren blau. */
.login-card .form-hinweis a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.login-card .form-hinweis a:hover,
.login-card .form-hinweis a:focus-visible {
color: var(--accent);
}
/* =====================================================================
HINWEIS BEI VERMUTETEM TIPPFEHLER IN DER E-MAIL-ADRESSE
---------------------------------------------------------------------
Wird von email_hinweis.js gefuellt. Die Klassennamen sind dieselben
wie in bestellen.css, damit der Hinweis in beiden Formularen gleich
aussieht – das Kontaktformular laedt aber style.css, das
Bestellformular bestellen.css, deshalb steht die Regel zweimal da.
===================================================================== */
.dc-inline {
margin-top: 0.6rem;
font-size: 0.85rem;
padding: 0.55rem 0.8rem;
border-radius: var(--radius-md, 8px);
line-height: 1.4;
border: 1px solid transparent;
}
.dc-inline.warn {
background: var(--color-warn-bg);
color: var(--color-warn);
border-color: rgba(239, 108, 0, 0.35);
}
/* Der Vorschlag sieht aus wie ein Link, ist aber ein