/* Barum Internetservice — Hosting, klar gedacht. */
:root {
    --ink: #f4f7fb;
    --muted: #9aa8bc;
    --muted-strong: #c7d1df;
    --navy: #07111f;
    --navy-soft: #0d1b2d;
    --surface: #102239;
    --surface-2: #142a43;
    --line: rgba(168, 192, 219, .16);
    --orange: #ff9d2e;
    --orange-bright: #ffb454;
    --green: #50d49a;
    --danger: #ff7d86;
    --shadow: 0 24px 70px rgba(0, 0, 0, .27);
    --radius: 18px;
    --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    background: var(--navy);
    color: var(--ink);
    font: 400 16px/1.65 'DM Sans', system-ui, sans-serif;
    background-image: radial-gradient(circle at 76% -10%, rgba(255,157,46,.12), transparent 34%), radial-gradient(circle at 5% 38%, rgba(38,100,167,.12), transparent 28%);
}
a { color: var(--orange-bright); text-decoration: none; transition: color .2s ease; }
a:hover { color: #ffd094; }
img { max-width: 100%; }

/* Header */
header { position: sticky; top: 0; z-index: 20; background: rgba(7,17,31,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header-container { max-width: var(--max); min-height: 82px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { width: 174px; height: auto; display: block; }
nav { display: flex; align-items: center; gap: 8px; }
nav a { color: var(--muted-strong); font-size: .94rem; font-weight: 600; padding: 10px 13px; border-radius: 10px; }
nav a:hover, nav a.active { color: var(--ink); background: rgba(255,255,255,.07); }
nav a.active { box-shadow: inset 0 -2px var(--orange); }
.nav-cta { background: var(--orange) !important; color: #1d170e !important; margin-left: 8px; }
.nav-cta:hover { background: var(--orange-bright) !important; box-shadow: 0 8px 24px rgba(255,157,46,.22); }

/* Layout and typography */
.container { max-width: var(--max); margin: auto; padding: 68px 24px 96px; }
h1, h2, h3 { color: var(--ink); font-family: 'Space Grotesk', sans-serif; line-height: 1.15; }
h1 { font-size: clamp(2.35rem, 5vw, 4.5rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 44px 0 16px; letter-spacing: -.035em; }
h3 { font-size: 1.2rem; }
p { color: var(--muted); margin-bottom: 16px; }
strong { color: var(--ink); }
ul, ol { color: var(--muted-strong); }

.page-header { position: relative; overflow: hidden; margin: -8px 0 52px; padding: 64px clamp(24px, 6vw, 78px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg, rgba(17,42,67,.96), rgba(8,22,38,.82)); box-shadow: var(--shadow); }
.page-header::before { content: ''; position: absolute; width: 420px; height: 420px; top: -220px; right: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,157,46,.2), transparent 68%); }
.page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 70%, rgba(255,255,255,.025) 70% 70.2%, transparent 70.2%); pointer-events: none; }
.page-header-content { position: relative; z-index: 1; max-width: 780px; }
.page-header-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border: 1px solid rgba(255,180,84,.35); border-radius: 15px; background: rgba(255,157,46,.12); font-size: 1.65rem; }
.page-header h1 { margin-bottom: 18px; }
.page-header-subtitle { max-width: 690px; color: var(--muted-strong); font-size: 1.08rem; }
.section-divider { display: flex; align-items: center; gap: 16px; margin: 55px 0 22px; color: var(--orange-bright); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line), transparent); }
.section-divider span { white-space: nowrap; }

/* Buttons, forms, notices */
.btn, button, input[type="submit"], input[type="button"] { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 19px; border: 1px solid transparent; border-radius: 10px; background: var(--orange); color: #21170b; font: 700 .92rem 'DM Sans', sans-serif; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { color: #21170b; background: var(--orange-bright); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,157,46,.2); }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.04); color: var(--ink); }
.btn-secondary:hover { color: var(--ink); background: rgba(255,255,255,.1); }
form { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(20,42,67,.9), rgba(10,26,44,.86)); box-shadow: var(--shadow); }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: var(--muted-strong); font-size: .9rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: rgba(4,13,24,.66); color: var(--ink); font: inherit; transition: border .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,157,46,.13); }
textarea { min-height: 145px; resize: vertical; }
select option { background: var(--navy-soft); }
.alert { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--muted-strong); }
.alert-error { border-color: rgba(255,125,134,.45); color: #ffb2b8; }

/* Zentrierte Erfolgsmeldung im schließbaren Overlay */
body.modal-open { overflow: hidden; }
.success-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; }
.success-overlay-backdrop { position: absolute; inset: 0; background: rgba(3, 9, 17, .78); backdrop-filter: blur(5px); }
.success-overlay-dialog { position: relative; width: min(560px, 100%); padding: clamp(28px, 5vw, 46px); border: 2px solid var(--orange); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-2), var(--navy-soft)); box-shadow: 0 0 0 1px rgba(255,157,46,.2), 0 22px 70px rgba(0,0,0,.58), 0 0 34px rgba(255,157,46,.18); text-align: center; }
.success-overlay-dialog h2 { margin: 8px 0 14px; }
.success-overlay-dialog p:not(.success-overlay-kicker) { color: var(--muted-strong); }
.success-overlay-kicker { margin: 0; color: var(--orange-bright); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.success-overlay-close { position: absolute; top: 12px; right: 12px; width: 38px; min-height: 38px; padding: 0; border: 1px solid var(--orange); border-radius: 50%; background: transparent; color: var(--orange-bright); font-size: 1.55rem; line-height: 1; }
.success-overlay-close:hover { color: #21170b; background: var(--orange-bright); }
.success-overlay-dialog .btn { margin-top: 8px; }
@media (max-width: 520px) { .success-overlay { padding: 16px; } .success-overlay-dialog { padding: 32px 22px 26px; } }
.result-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 15px 17px; border: 1px solid rgba(80,212,154,.35); border-radius: 12px; background: rgba(80,212,154,.08); }
.result-available { color: var(--green); } .result-taken { color: var(--danger); }

/* Home/search */
.hero-home { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 55px; min-height: 450px; margin: -10px 0 50px; }
.hero-home h1 { max-width: 720px; }
.hero-home h1 em { color: var(--orange-bright); font-style: normal; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--orange-bright); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(80,212,154,.12); }
.hero-copy { max-width: 650px; margin: 23px 0 30px; color: var(--muted-strong); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-panel, .search-box { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, rgba(20,42,67,.96), rgba(10,25,42,.88)); box-shadow: var(--shadow); }
.hero-panel { padding: 26px; }
.panel-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.status-dot { color: var(--green); }
.server-graphic { display: grid; gap: 12px; margin: 22px 0; padding: 26px 18px; border: 1px solid var(--line); border-radius: 15px; background: #091827; }
.server-row { display: flex; align-items: center; gap: 12px; color: var(--muted-strong); font-size: .8rem; }
.server-row::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--orange); box-shadow: 16px 0 rgba(255,157,46,.3), 32px 0 rgba(255,157,46,.13); margin-right: 30px; }
.server-row span { height: 7px; flex: 1; border-radius: 10px; background: linear-gradient(90deg, var(--orange) 0 72%, rgba(255,255,255,.1) 72%); }
.panel-stats, .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.panel-stats div, .stat { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.045); }
.panel-stats strong, .stat strong { display: block; font: 700 1.25rem 'Space Grotesk'; } .panel-stats small, .stat small { color: var(--muted); font-size: .72rem; }
.search-box { padding: clamp(22px, 4vw, 38px); }
.search-box h2 { margin: 0 0 8px; }
.search-input-group { display: flex; gap: 10px; margin-top: 24px; }
.search-input-group input { min-width: 0; }
.stats { margin: 45px 0 10px; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 20px; border: 1px solid var(--line); }
.stat strong { color: var(--orange-bright); font-size: 1.65rem; }

/* Cards and FAQ */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 26px 0 42px; }
.product-card, .feature-card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(20,42,67,.8), rgba(10,25,42,.75)); transition: transform .25s, border-color .25s, box-shadow .25s; }
.product-card:hover, .feature-card:hover { transform: translateY(-5px); border-color: rgba(255,157,46,.5); box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.product-card h3, .feature-card h3 { margin-bottom: 12px; }
.product-card .price { margin: 22px 0; color: var(--orange-bright); font: 700 2.15rem 'Space Grotesk'; }
.price-period { margin-left: 5px; color: var(--muted); font: 400 .82rem 'DM Sans'; }
.product-card ul { list-style: none; margin: 20px 0; }
.product-card li { padding: 8px 0 8px 22px; border-bottom: 1px solid rgba(168,192,219,.1); font-size: .9rem; }
.product-card li::before { content: '✓'; margin-left: -22px; margin-right: 10px; color: var(--green); font-weight: 700; }
.product-card .btn { width: 100%; }
.feature-card { text-align: left; }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 12px; background: rgba(255,157,46,.12); color: var(--orange-bright); font-size: 1.45rem; }
.faq-section { display: grid; gap: 10px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(20,42,67,.6); }
.faq-question { padding: 19px 22px; color: var(--ink); font-weight: 700; cursor: pointer; }
.faq-question::after { content: '+'; float: right; color: var(--orange-bright); font-size: 1.2rem; }
.faq-answer { display: none; padding: 0 22px 20px; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question::after { content: '−'; }
pre { color: var(--orange-bright); border-radius: 10px; background: #091827 !important; border: 1px solid var(--line); }

/* Footer */
footer { border-top: 1px solid var(--line); background: #050d18; }
.footer-content { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 42px; max-width: var(--max); margin: auto; padding: 62px 24px 48px; }
.footer-section h3 { margin-bottom: 16px; font-size: 1rem; }
.footer-section p, .footer-section li { color: var(--muted); font-size: .88rem; }
.footer-section ul { list-style: none; } .footer-section li { margin: 8px 0; } .footer-section a { color: var(--muted); } .footer-section a:hover { color: var(--orange-bright); }
.footer-bottom { padding: 18px 24px; border-top: 1px solid var(--line); text-align: center; } .footer-bottom p { margin: 0; font-size: .78rem; }

/* Informational cookie notice — no consent is stored. */
.cookie-notice { position: fixed !important; inset: auto 20px 20px auto; z-index: 9999; display: flex; align-items: center; gap: 18px; width: min(560px, calc(100% - 32px)); padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 27, 45, .97); box-shadow: var(--shadow); }
.cookie-notice p { flex: 1; margin: 0; color: var(--muted-strong); font-size: .82rem; line-height: 1.45; }
.cookie-notice p a { white-space: nowrap; }
.cookie-notice-close { flex-shrink: 0; min-height: 38px; padding: 8px 13px; font-size: .8rem; }

@media (max-width: 800px) { .header-container { min-height: 72px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; } nav { width: 100%; justify-content: space-between; gap: 2px; overflow-x: auto; } nav a { padding: 8px 9px; font-size: .82rem; white-space: nowrap; } .nav-cta { margin-left: 0; } .hero-home { grid-template-columns: 1fr; gap: 30px; } .footer-content { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .container { padding: 44px 16px 70px; } .header-container { padding-left: 16px; padding-right: 16px; } .logo img { width: 150px; } .page-header { padding: 38px 22px; border-radius: 20px; } .search-input-group { flex-direction: column; } .search-input-group .btn, .search-input-group button { width: 100%; } .result-item { align-items: flex-start; flex-direction: column; } .result-item .btn { width: 100%; } .stats { grid-template-columns: repeat(2, 1fr); } .footer-content { grid-template-columns: 1fr; gap: 26px; padding: 42px 16px; } }
@media (max-width: 520px) { .cookie-notice { right: 16px; bottom: 16px; align-items: flex-start; gap: 12px; } .cookie-notice-close { padding: 7px 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }