:root {
    --color-bg: #0f1420;
    --color-bg-alt: #161d2e;
    --color-surface: #1b2436;
    --color-border: #2a3550;
    --color-text: #e8ecf5;
    --color-text-muted: #9aa5bd;
    --color-primary: #5b8cff;
    --color-primary-hover: #7aa3ff;
    --color-accent: #21c48a;
    --color-danger: #ff6b6b;
    --radius: 12px;
    --max-width: 1080px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    flex-wrap: wrap;
}
.brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text);
    margin-right: auto;
}
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: var(--color-text-muted); font-size: 0.95rem; }
.main-nav a:hover { color: var(--color-text); }
.nav-cta {
    background: var(--color-primary);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
}
.nav-cta:hover { background: var(--color-primary-hover); }
.lang-switch select {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    min-height: 40px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); margin: 0 auto; }

/* Flash messages */
.flash { margin: 16px 0; padding: 12px 16px; border-radius: var(--radius); font-size: 0.95rem; }
.flash-success { background: rgba(33, 196, 138, 0.15); border: 1px solid var(--color-accent); color: var(--color-accent); }
.flash-error { background: rgba(255, 107, 107, 0.15); border: 1px solid var(--color-danger); color: var(--color-danger); }
.flash-info { background: rgba(90, 140, 255, 0.15); border: 1px solid #5a8cff; color: #5a8cff; }

/* Hero */
.hero {
    padding: 90px 20px 70px;
    text-align: center;
    background: radial-gradient(circle at 50% -20%, rgba(91,140,255,0.25), transparent 60%);
}
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 20px; }
.hero p { color: var(--color-text-muted); font-size: 1.15rem; max-width: 640px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Sections */
section { padding: 64px 20px; }
.section-alt { background: var(--color-bg-alt); }
h2 { font-size: 1.9rem; text-align: center; margin: 0 0 12px; }
.section-lead { text-align: center; color: var(--color-text-muted); max-width: 620px; margin: 0 auto 40px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: var(--max-width); margin: 0 auto; }
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px;
}
.card h3 { margin-top: 0; font-size: 1.1rem; }
.card p { color: var(--color-text-muted); margin-bottom: 0; }

/* Shop grid — equal-height cards with the price/buy button always pinned to
   the bottom, regardless of description length. Scoped to .shop-grid rather
   than changing .card globally, since other pages (homepage services, etc.)
   share that class and weren't asked to change. */
.shop-grid { align-items: stretch; }
.shop-card { display: flex; flex-direction: column; }
.shop-card p { margin-top: 10px; }
.shop-card-footer { margin-top: auto; padding-top: 16px; }
.shop-card-footer form { margin-top: 12px; }

/* Small hover-preview popup for a product's photo, shown above its name. */
.shop-thumb-trigger { position: relative; display: inline-block; cursor: default; }
.shop-thumb-popup {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 20;
}
.shop-thumb-popup img { display: block; width: 180px; height: 180px; object-fit: cover; border-radius: 6px; }
.shop-thumb-trigger:hover .shop-thumb-popup,
.shop-thumb-trigger.popup-open .shop-thumb-popup { opacity: 1; visibility: visible; transform: translateY(0); }

/* Multi-step "Get Your Website" wizard */
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.review-edit-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}
.review-edit-btn:hover { text-decoration: underline; }

/* Remove buttons for the quote form's dynamic page/language rows. */
.page-spec-row { position: relative; }
.row-remove-btn {
    position: absolute;
    top: 26px;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.row-remove-btn:hover { color: var(--color-danger); border-color: var(--color-danger); }
.row-remove-btn-inline { position: static; flex-shrink: 0; }

.why-list { list-style: none; padding: 0; max-width: 620px; margin: 0 auto; }
.why-list li {
    padding: 14px 0 14px 32px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    color: var(--color-text-muted);
}
.why-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

.cta-section { text-align: center; }

/* Forms */
.form-card {
    max-width: 560px;
    margin: 40px auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
}
.form-card h1 { margin-top: 0; font-size: 1.6rem; }
/* Quote form's price estimate — pinned beside the request card, right next
   to the title, while scrolling. Previously sat bottom-right, but the AI
   widget's chat panel opens from that same corner and covered it
   (2026-08-09) — top avoids that collision at every viewport width, since
   the AI widget always opens from the bottom regardless of screen size.
   `right` is computed with calc() rather than a fixed pixel value so the box
   keeps hugging the card's actual right edge (card is centered, so its edge
   position shifts with viewport width) instead of drifting away from it or
   overlapping it — derived from the card's 680px width plus a 20px gap plus
   the box's own 190px width: (100vw-680)/2 - 190 - 20 = 50vw - 550px. Only
   floats when there's real gutter space beside the card (see the 1150px
   breakpoint below); narrower than that, it becomes sticky instead (see
   below) rather than overlapping the card content. */
.floating-price-box {
    position: fixed;
    top: 140px;
    right: calc(50vw - 550px);
    z-index: 900;
    width: 190px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    min-width: 150px;
}
@media (max-width: 1150px) {
    /* Below the width where the box can float beside the card, it instead
       sits inline in normal document flow near the top of the form (below
       the name/email fields) until the client scrolls past it — then it
       sticks to the top of the viewport and stays visible while the rest of
       the wizard scrolls underneath, per explicit user request (2026-08-09).
       Scrolling back up past its natural position releases it back into
       flow, so it never covers the name/email fields at the very top. */
    .floating-price-box { position: sticky; top: 10px; width: auto; margin: 0 0 24px; }
}
.form-lead { color: var(--color-text-muted); margin-bottom: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
    font-family: inherit;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.field-note { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 20px; }
.form-footer-link { margin-top: 20px; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; }

/* Star rating — pure-CSS radio widget (review.php form) and a read-only
   display variant (homepage cards, admin tables print plain ★/☆ text
   directly and don't need this class). */
.star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { font-size: 1.9rem; line-height: 1; color: var(--color-border); cursor: pointer; transition: color 0.1s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f5a623; }
.star-display { font-size: 1.3rem; color: #f5a623; letter-spacing: 2px; margin-bottom: 8px; }

/* Tables / lists */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 32px; }
.table-scroll .data-table { margin-bottom: 0; }
.data-table { width: 100%; border-collapse: collapse; margin: 0 0 32px; }
.data-table th, .data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
}
.data-table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }

.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-pending, .badge-in_review { background: rgba(255,193,7,0.18); color: #ffc107; }
.badge-accepted, .badge-in_progress { background: rgba(91,140,255,0.18); color: var(--color-primary); }
.badge-completed, .badge-paid { background: rgba(33,196,138,0.18); color: var(--color-accent); }
.badge-rejected, .badge-failed { background: rgba(255,107,107,0.18); color: var(--color-danger); }
.badge-cancelled, .badge-refunded { background: rgba(154,165,189,0.18); color: var(--color-text-muted); }
.badge-unread { background: var(--color-danger); color: #fff; }

.page-heading { max-width: var(--max-width); margin: 40px auto 0; padding: 0 20px; }
.page-heading h1 { margin-bottom: 4px; }
.page-heading .sub { color: var(--color-text-muted); }

.content-block { max-width: 720px; margin: 40px auto; padding: 0 20px; }

/* Legal pages (Impressum, Datenschutz, AGB, Cookies) */
.legal-page { max-width: 1040px; margin: 40px auto; padding: 0 20px; }
.legal-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.legal-nav a { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.legal-nav a.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.legal-nav a:hover:not(.active) { border-color: var(--color-primary); color: var(--color-text); }
.legal-header h1 { margin-bottom: 6px; }
.legal-updated { color: var(--color-text-muted); font-size: 0.85rem; margin: 0 0 28px; }
.legal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; }
/* Grid items default to min-width:auto, which lets their content's
   min-content size (e.g. the wide data-table further down) refuse to
   shrink below itself — that silently blew the whole grid (and the page
   around it) out past the viewport on mobile, even though the 860px media
   query below correctly collapses it to a single 1fr column. min-width:0
   lets the column actually honor that width instead of fighting it. */
.legal-toc, .legal-card { min-width: 0; }
.legal-toc { position: sticky; top: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; }
.legal-toc h3 { margin: 0 0 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.legal-toc ol { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.legal-toc li { margin-bottom: 9px; }
.legal-toc a { color: var(--color-text); }
.legal-toc a:hover { color: var(--color-primary); }
.legal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 36px 40px; }
.legal-card h2 { font-size: 1.15rem; margin: 0 0 12px; padding-top: 24px; border-top: 1px solid var(--color-border); scroll-margin-top: 24px; }
.legal-card section:first-of-type h2 { margin-top: 0; padding-top: 0; border-top: none; }
.legal-card h3 { font-size: 1rem; margin: 20px 0 8px; }
.legal-card p { color: var(--color-text-muted); line-height: 1.7; }
.legal-card p + p { margin-top: 12px; }
.legal-card ul, .legal-card ol.legal-list { padding-left: 22px; color: var(--color-text-muted); line-height: 1.7; }
.legal-card li + li { margin-top: 6px; }
.legal-card table.data-table { margin: 14px 0 20px; font-size: 0.9rem; }
.legal-card .legal-note { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; font-size: 0.88rem; color: var(--color-text-muted); margin: 14px 0; }
@media (max-width: 860px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
    .legal-card { padding: 26px 22px; }
}

/* Admin layout */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--color-bg-alt);
    border-right: 1px solid var(--color-border);
    padding: 24px 0;
}
.admin-sidebar .brand { display: block; padding: 0 20px 20px; }
.admin-sidebar nav { display: flex; flex-direction: column; }
.admin-sidebar nav a {
    padding: 11px 20px;
    color: var(--color-text-muted);
    font-size: 0.94rem;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: var(--color-surface); color: var(--color-text); }
.admin-main { flex: 1; padding: 32px 36px; max-width: 1200px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.admin-topbar h1 { min-width: 0; overflow-wrap: anywhere; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-bottom: 32px; }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; }
.stat-card .num { font-size: 1.8rem; font-weight: 700; }
.stat-card .label { color: var(--color-text-muted); font-size: 0.85rem; }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
/* Same min-width:auto grid pitfall as .legal-layout above — direct children
   must be able to shrink below their content's min-content size (long chat
   messages, URLs, addon answers) or the collapsed single-column layout
   below can still force the page wider than the viewport on mobile. */
.detail-grid > * { min-width: 0; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.detail-box h3 { margin-top: 0; }
.kv { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--color-text-muted); flex-shrink: 0; }
.kv span:last-child { text-align: right; word-break: break-word; overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; }

/* AI assistant widget */
.ai-widget { position: fixed; right: 20px; bottom: 20px; z-index: 999; }
.ai-widget-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.ai-widget-toggle:hover { background: var(--color-primary-hover); }
.ai-widget-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: 320px;
    max-width: calc(100vw - 40px);
    height: 420px;
    max-height: 70vh;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    flex-direction: column;
    overflow: hidden;
}
.ai-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}
.ai-widget-header button {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}
.ai-widget-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { padding: 9px 13px; border-radius: 12px; font-size: 0.88rem; max-width: 85%; line-height: 1.4; }
.ai-msg-assistant { background: var(--color-bg-alt); align-self: flex-start; }
.ai-msg-user { background: var(--color-primary); color: #fff; align-self: flex-end; }
.ai-widget-form { display: flex; border-top: 1px solid var(--color-border); }
.ai-widget-form input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-text);
    padding: 12px 14px;
    font-size: 0.9rem;
}
.ai-widget-form input:focus { outline: none; }

/* Admin<->client chat, scoped to a request */
.chat-box { display: flex; flex-direction: column; height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-bg-alt); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; color: var(--color-text-muted); font-size: 0.9rem; text-align: center; }
.chat-bubble { position: relative; max-width: 75%; padding: 9px 13px 16px; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-mine { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-theirs { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.chat-bubble-time { position: absolute; right: 12px; bottom: 4px; font-size: 0.65rem; opacity: 0.7; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.chat-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 100px; padding: 10px 12px; font-size: 0.9rem; }
.chat-form button { align-self: flex-end; }
.ai-widget-form button {
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    padding: 0 16px;
    cursor: pointer;
}

/* Demo / under-construction popup */
.demo-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.demo-popup {
    position: relative;
    max-width: 440px;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.demo-popup h2 { margin-top: 0; font-size: 1.3rem; }
.demo-popup p { color: var(--color-text-muted); margin-bottom: 0; }
.demo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.demo-popup-close:hover { color: var(--color-text); }

/* Cookie consent — floating bubble beside the AI widget, replaces the old
   footer text link. On first visit (no stored consent), its panel is
   auto-opened by cookie-consent.js so it's just as prominent as a banner
   would be, without needing a separate bottom-bar component. */
.cookie-widget { position: fixed; right: 90px; bottom: 20px; z-index: 998; }
.cookie-widget.cookie-widget-solo { right: 20px; }
.cookie-widget-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.cookie-widget-toggle:hover { background: var(--color-primary-hover); }
.cookie-widget-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: 340px;
    max-width: calc(100vw - 40px);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.cookie-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); font-weight: 600; }
.cookie-widget-header button { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.cookie-widget-header button:hover { color: var(--color-text); }
.cookie-widget-body { padding: 16px; }
.cookie-widget-body > p { margin: 0 0 14px; font-size: 0.85rem; color: var(--color-text-muted); }
/* Reject and Accept share the same button style deliberately — equal visual
   weight for both choices, no dark-pattern nudge toward "accept all". */
.cookie-widget-actions { display: flex; gap: 8px; padding: 0 16px; }
.cookie-widget-actions .btn { flex: 1; padding: 8px 10px; font-size: 0.85rem; }
.cookie-widget-panel > .btn { display: block; width: calc(100% - 32px); margin: 10px 16px 16px; }
.cookie-category { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.cookie-category:last-of-type { border-bottom: none; }
.cookie-category-head label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.cookie-category-head input[type=checkbox] { width: auto; }
.cookie-category p { margin: 4px 0 0 24px; font-size: 0.82rem; color: var(--color-text-muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: 28px 20px; margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-inner p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--color-text-muted); font-size: 0.85rem; }
.footer-icons-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.footer-icon-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: color 0.15s, border-color 0.15s; }
.footer-icon:hover { color: var(--color-primary); border-color: var(--color-primary); }

@media (max-width: 700px) {
    .admin-body { flex-direction: column; }
    .admin-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); }
    .admin-sidebar nav { flex-direction: row; overflow-x: auto; }
    .admin-main { padding: 20px 16px; }
}

/* Mobile (phones): collapsible nav, tighter spacing, full-width touch targets */
@media (max-width: 780px) {
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 4px;
        padding-top: 12px;
    }
    .main-nav.nav-open { display: flex; }
    .main-nav a {
        padding: 12px 10px;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
    }
    .main-nav .nav-cta { text-align: center; margin: 6px 0; }
    .main-nav .lang-switch { width: 100%; padding: 6px 0 0; }
    .main-nav .lang-switch select { width: 100%; }
    .header-inner { flex-wrap: wrap; }

    .hero { padding: 56px 16px 44px; }
    section { padding: 44px 16px; }
    h2 { font-size: 1.5rem; }

    .form-card { margin: 24px auto; padding: 22px; }
    .content-block { margin: 24px auto; }

    .form-card button[type="submit"] { width: 100%; }
    .hero-actions { flex-direction: column; align-items: stretch; }

    /* .ai-widget-panel/.cookie-widget-panel switch from being positioned
       relative to their own toggle button (which is itself offset from the
       screen edge, and doubly so for the cookie bubble since it also has to
       clear the AI bubble beside it) to being anchored directly to the
       viewport via left+right. Anchoring to an already-offset parent with a
       negative `right` and a vw-based width is what pushed the cookie panel
       off-screen to the left on phones (2026-08-14 bug report) — the fix
       applies to both widgets so neither can ever repeat it, regardless of
       how far their buttons sit from the edge. */
    .ai-widget { right: 14px; bottom: 14px; }
    .ai-widget-panel { position: fixed; left: 14px; right: 14px; bottom: 78px; width: auto; height: 60vh; }
    .cookie-widget { right: 78px; bottom: 14px; }
    .cookie-widget.cookie-widget-solo { right: 14px; }
    .cookie-widget-panel { position: fixed; left: 14px; right: 14px; bottom: 78px; width: auto; max-height: 65vh; }

    .demo-popup { padding: 24px; }

    .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}