:root{
    /* Light Mode */
    --bg:#f5f5f5;
    --card:#ffffff;
    --text:#222222;
    /* Slightly darker muted + border for better readability/definition (keeps main colors) */
    --muted:#555555;
    --border:#d0d0d0;
    --shadow: 0 18px 45px rgba(0,0,0,0.10);
    --shadow-soft: 0 10px 26px rgba(0,0,0,0.12);
    --radius: 16px;
    --radius-sm: 12px;
    --accent: #004225;
    --accent-strong: #00361d;
    --accent-contrast: #ffffff;
    --accent-rgb: 0, 66, 37;
    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --focus: rgba(var(--accent-rgb), 0.28);
    --hero-bg:
        radial-gradient(900px 280px at 20% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        radial-gradient(720px 240px at 80% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, var(--card), var(--bg));
    --btn-bg: var(--accent);
    --btn-text: var(--accent-contrast);
    --btn-border: var(--accent);
    --btn-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark Mode – system preference (premium neutral dark) */
@media (prefers-color-scheme: dark){
    :root{
        /* Hochwertiger, moderner Dark Mode (neutral, leicht warm) */
        --bg:#1e1f21;      /* sehr dunkles Grau, nicht schwarz */
        --card:#2a2b2e;    /* dezente Abhebung */
        --text:#f5f6f7;    /* klar, weich */
        /* Slightly brighter muted + border for readability (keeps main colors) */
        --muted:#c0c4cb;
        --border:#45484e;
        --shadow: 0 20px 50px rgba(0,0,0,0.55);
        --shadow-soft: 0 12px 30px rgba(0,0,0,0.48);
        --radius: 16px;
        --radius-sm: 12px;
        --accent: #004225;
        --accent-strong: #00361d;
        --accent-contrast: #eafff3;
        --accent-rgb: 0, 66, 37;
        --accent-soft: rgba(var(--accent-rgb), 0.22);
        --focus: rgba(var(--accent-rgb), 0.45);
    }
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, var(--card) 0, var(--bg) 60%, var(--bg) 100%);
    color:var(--text);
    min-height:100vh;
    line-height:1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 28px; }

header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand img{
    max-width:150px;
    height:auto;
    display:block;
}

.brand .titles{ min-width:0; }

.brand .titles .h{
    margin:0;
    font-size:18px;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1.2;
}

nav.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.nav-link{
    display:flex;
    align-items:center;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--card);
    text-decoration:none;
    color:var(--text);
    font-size:14px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

/* Mobile toggle – default hidden */
.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    font-size:22px;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    cursor:pointer;
}

main.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    padding:20px;
}

footer.site-footer{
    margin-top:18px;
    padding:14px 0 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
}

/* ===============================
   Mobile Navigation (Dropdown)
   =============================== */
@media (max-width: 720px){
    header.site-header{ position:relative; }

    .nav-toggle{ display:flex; }

    nav.site-nav{
        position:absolute;
        top:72px;
        left:16px;
        right:16px;
        display:none;
        flex-direction:column;
        gap:12px;
        padding:16px;
        background:var(--card);
        border:1px solid var(--border);
        border-radius:16px;
        box-shadow: var(--shadow);
        z-index:1000;
    }

    nav.site-nav.is-open{ display:flex; }

    .nav-link{
        width:100%;
        justify-content:flex-start;
    }
}

/* ===============================
   Header Enhancement (Legacy)
   =============================== */
:root {
    /* Akzentfarbe – British Racing Green */
    --hdr-accent: #004225;
    --hdr-accent-soft: rgba(0, 66, 37, .22);
    --hdr-shadow: rgba(0, 0, 0, .12);

    /* Fallback Page Background (für iOS/Chrome Overscroll über dem Header) */
    --page-bg: var(--bg);
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode: Akzentfarbe konsistent */
        --hdr-accent: #004225;
        --hdr-accent-soft: rgba(0, 66, 37, .22);
        --hdr-shadow: rgba(0, 0, 0, .28);
        --page-bg: var(--bg);
    }
}
@media (prefers-color-scheme: light) {
    :root {
        /* Light Mode: Akzent sicher erzwingen */
        --hdr-accent: #004225;
        --page-bg: var(--bg);
    }
}

html {
    background-color: var(--page-bg, #111317) !important;
}
body {
    background-color: var(--page-bg, #111317) !important;
    overscroll-behavior-y: none;
}
.wrap {
    background-color: var(--page-bg, #111317) !important;
}

/* iOS / Mobile Overscroll-Fix: oberer Bereich übernimmt Seiten-Hintergrund */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--page-bg);
    z-index: 9999;
    pointer-events: none;
}

/* Base */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    backdrop-filter: saturate(120%) blur(2px);
    transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
    -webkit-tap-highlight-color: transparent;
}
.site-header:hover {
    box-shadow: 0 10px 30px var(--hdr-shadow);
    transform: translateY(-1px);
}

/* Sticky on scroll (class toggled via JS) */
.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header.is-sticky.is-scrolled {
    box-shadow: 0 10px 30px var(--hdr-shadow);
}

/* Hide on scroll (class toggled via JS) */
.site-header.is-hidden {
    transform: translateY(-120%);
    box-shadow: none;
}

/* Brand / Logo */
.site-header .brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.site-header .brand a {
    display: inline-flex;
    align-items: center;
    border-radius: 14px;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.site-header .brand a:hover { transform: translateY(-1px); }
.site-header .brand a:active { transform: translateY(0); }
.site-header .brand a:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}
.site-header .brand img {
    max-height: 96px;
    width: auto;
    height: auto;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s ease;
    transform-origin: center;
}
.site-header .brand img:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--hdr-accent) 30%, transparent));
}

/* Navigation links */
.site-header .site-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .25rem;
    border-radius: 12px;
    transition: color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
    will-change: transform;
}
.site-header .site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hdr-accent), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}
.site-header .site-nav .nav-link:hover {
    color: var(--hdr-accent) !important;
    transform: translateY(-2px);
}
.site-header .site-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.site-header .site-nav .nav-link:active {
    transform: translateY(0) scale(.98);
}
.site-header .site-nav .nav-link:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}
.site-header .site-nav .nav-link.is-active {
    background: var(--hdr-accent);
    color: #ffffff !important;
}
.site-header .site-nav .nav-link.is-active::after {
    transform: scaleX(1);
}

/* Toggle button */
.nav-toggle {
    /* Sichtbarkeit wird unten per Media Query gesteuert (robust gegen site.css) */
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
    will-change: transform;
}
.nav-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px var(--hdr-accent-soft);
}
.nav-toggle:active { transform: scale(.95); }
.nav-toggle[aria-expanded="true"] {
    box-shadow: 0 8px 22px var(--hdr-accent-soft);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}

/* Mobile menu animation using existing .is-open */
@media (max-width: 900px) {
    .site-header { flex-wrap: wrap; }

    /* Wenn Menü offen: kein Header-Transform (sonst bricht position:fixed in manchen Browsern/iOS) */
    body.nav-open .site-header,
    body.nav-open .site-header:hover,
    body.nav-open .site-header.is-hidden {
        transform: none !important;
    }
    body.nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .nav-toggle { display: inline-flex; }

    /* Burger-Menü: Fullscreen Overlay */
    #main-nav.site-nav {
        display: flex;
        flex-direction: column;
        gap: clamp(.4rem, 2.2vh, .75rem);
        padding: calc(env(safe-area-inset-top) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-right) + clamp(.9rem, 4vw, 1.25rem)) calc(env(safe-area-inset-bottom) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-left) + clamp(.9rem, 4vw, 1.25rem));
        align-items: center;
        justify-content: flex-start;

        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;

        box-sizing: border-box;
        overflow-x: hidden;

        background: var(--page-bg);
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: opacity .2s ease-out, visibility 0s linear .2s;

        pointer-events: none;
        z-index: 9998;
    }
    #main-nav.site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease-out, visibility 0s;
        pointer-events: auto;
    }

    /* Logo im Menü oben mittig */
    #main-nav.site-nav .nav-brand-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: .5rem;
    }
    #main-nav.site-nav .nav-brand-mobile a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
    }
    #main-nav.site-nav .nav-brand-mobile img {
        max-height: clamp(56px, 12vh, 88px);
        width: auto;
        height: auto;
    }

    /* Links zentriert, untereinander */
    #main-nav.site-nav .nav-link {
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: min(520px, 92vw);
        padding: clamp(.65rem, 2.2vh, .95rem) clamp(.9rem, 4vw, 1.2rem);
        font-size: clamp(1rem, 2.2vh, 1.06rem);
    }

    /* Close-Button oben rechts */
    #main-nav.site-nav .nav-close {
        position: absolute;
        top: calc(env(safe-area-inset-top) + .75rem);
        right: .75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: clamp(.65rem, 2.2vh, .85rem);
        border-radius: 18px;
        background: var(--hdr-accent);
        border: none;
        color: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
        transition: transform .18s ease, box-shadow .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    #main-nav.site-nav .nav-close:hover {
        transform: scale(1.08);
        box-shadow: 0 14px 36px rgba(0,0,0,.45);
    }
    #main-nav.site-nav .nav-close:active { transform: scale(.94); }
    #main-nav.site-nav .nav-close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }
}

/* Desktop: kein Logo im Menü */
@media (min-width: 901px) {
    .nav-brand-mobile,
    .nav-close { display: none !important; }

    /* Desktop: normales Header-Menü */
    #main-nav.site-nav {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 1rem !important;

        background: transparent !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===============================
   Kundenportal Login Design
   (kompatibel + kollisionsfrei zum Dashboard)
   =============================== */
.kp-login-page{
    max-width:520px;
    margin:32px auto 64px;
    padding:0 16px;
}

.kp-login-card{
    background:var(--card);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Legacy Login Markup: .kp-card darf NICHT das Dashboard treffen */
.kp-card:not(.kp-card-dashboard){
    max-width:520px;
    margin:32px auto 64px;
    padding:22px 18px;
    border-radius:16px;
    background:var(--card);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
    .kp-login-card,
    .kp-card:not(.kp-card-dashboard){
        border-color:rgba(255,255,255,.10);
        box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
}

.kp-logo{ display:block; width:92px; height:auto; margin:0 auto 14px; }
.kp-title{ margin:0 0 8px; font-size:22px; line-height:1.2; text-align:center; color:var(--text); }
.kp-subtitle{ margin:0 0 16px; font-size:14px; opacity:.85; text-align:center; color:var(--muted); }

.kp-alert{ border-radius:12px; padding:10px 12px; margin:10px 0 12px; font-size:14px; }
.kp-alert-error{ background:rgba(220,53,69,.10); border:1px solid rgba(220,53,69,.25); }
.kp-alert-info{  background:rgba(13,110,253,.08); border:1px solid rgba(13,110,253,.18); }

.kp-login-card form,
.kp-card:not(.kp-card-dashboard) form{ margin:0; }

.kp-login-card label,
.kp-card:not(.kp-card-dashboard) label{ display:block; margin:10px 0 6px; font-size:13px; color:var(--text); }

.kp-login-card input,
.kp-card:not(.kp-card-dashboard) input,
.kp-login-card select,
.kp-card:not(.kp-card-dashboard) select{
    /* Form controls: keep theme colors + improve readability in dark mode */
    color-scheme: light dark;

    width:100%;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.16);
    border-radius:12px;
    font-size:15px;
    outline:none;
    background:var(--card);
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .kp-login-card input,
    .kp-card:not(.kp-card-dashboard) input,
    .kp-login-card select,
    .kp-card:not(.kp-card-dashboard) select{ border-color:rgba(255,255,255,.14); }
}

/* Native select dropdown readability (browser support varies) */
.kp-login-card option,
.kp-card:not(.kp-card-dashboard) option{
    background: var(--card);
    color: var(--text);
}

.kp-login-card input:focus,
.kp-card:not(.kp-card-dashboard) input:focus,
.kp-login-card select:focus,
.kp-card:not(.kp-card-dashboard) select:focus{ border-color:rgba(0,0,0,.35); box-shadow: 0 0 0 4px var(--focus); }

@media (prefers-color-scheme: dark){
    .kp-login-card input:focus,
    .kp-card:not(.kp-card-dashboard) input:focus,
    .kp-login-card select:focus,
    .kp-card:not(.kp-card-dashboard) select:focus{ border-color:rgba(255,255,255,.28); box-shadow: 0 0 0 4px var(--focus); }
}

.kp-login-card button,
.kp-card:not(.kp-card-dashboard) button{
    width:100%;
    margin-top:12px;
    padding:11px 12px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    font-size:15px;
}

.kp-login-card hr,
.kp-card:not(.kp-card-dashboard) hr{ margin:18px 0; border:0; border-top:1px solid rgba(0,0,0,.08); }

@media (prefers-color-scheme: dark){
    .kp-login-card hr,
    .kp-card:not(.kp-card-dashboard) hr{ border-top-color:rgba(255,255,255,.10); }
}

.kp-login-card h2,
.kp-card:not(.kp-card-dashboard) h2{ margin:0 0 10px; font-size:16px; color:var(--text); }

.kp-footer-link{ margin-top:14px; text-align:center; font-size:13px; }
.kp-footer-link a{ color:var(--text); text-decoration:none; }
.kp-footer-link a:hover{ text-decoration:underline; }

/* ===============================
   Kundenportal (pcservice_site) Basislayout
   =============================== */
body.kp-portal{
    --bg:#f5f5f5;
    --card:#ffffff;
    --text:#222;
    --muted:#666;
    --border:#dddddd;
    --shadow: 0 18px 45px rgba(0,0,0,0.10);

    margin:0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #ffffff 0, #f5f5f5 55%, #e5e5e5 100%);
    color:var(--text);
    min-height:100vh;
}

body.kp-portal .wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 28px; }
body.kp-portal header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}
body.kp-portal .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
body.kp-portal .brand img{ max-width:150px; height:auto; display:block; }
body.kp-portal .brand .titles{ min-width:0; }
body.kp-portal .brand .titles .h{
    margin:0;
    font-size:18px;
    font-weight:800;
    letter-spacing:0.02em;
    color:#111;
    line-height:1.2;
}
body.kp-portal .brand .titles .p{ margin:2px 0 0; font-size:12px; color:var(--muted); }

body.kp-portal nav.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}
body.kp-portal .nav-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    text-decoration:none;
    color:#111;
    font-size:13px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    white-space:nowrap;
}
body.kp-portal .nav-link:hover{ transform: translateY(-1px); }

body.kp-portal main.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow: var(--shadow);
    padding:18px;
}
body.kp-portal h1.page-title{ margin:0 0 6px; font-size:20px; }
body.kp-portal p.lead{ margin:0; color:var(--muted); font-size:13px; }

body.kp-portal footer.site-footer{
    margin-top:18px;
    padding:14px 0 0;
    border-top:1px solid #e9e9e9;
    color:var(--muted);
    font-size:12px;
}
body.kp-portal .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}
body.kp-portal .footer-links a{ color:#111; text-decoration:none; }
body.kp-portal .footer-links a:hover{ text-decoration:underline; }

@media (max-width: 720px){
    body.kp-portal header.site-header{ flex-direction:column; align-items:flex-start; }
    body.kp-portal nav.site-nav{ justify-content:flex-start; }
}

/* ===============================
   Kundenportal Dashboard Design
   =============================== */
.kp-page{
    width:100%;
    max-width:1100px;
    padding:20px;
}

.kp-card-dashboard{
    background:var(--card);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:26px 24px 22px;
    border:1px solid var(--border);
}

.kp-logo-dashboard{
    max-width:160px;
    height:auto;
}

.kp-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.kp-header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.kp-title-block h1{
    margin:6px 0 4px;
    font-size:22px;
    font-weight:700;
    letter-spacing:0.03em;
    color:var(--text);
}

.kp-title-block p{
    margin:0;
    font-size:14px;
    color:var(--muted);
}

.kp-user-chip{
    font-size:12px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(0,0,0,0.06);
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--text);
}

.kp-user-label{ font-weight:500; }

.kp-header-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.kp-logout-form{ margin:0; }

.kp-logout-button{
    padding:6px 12px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--text);
    color:var(--card);
    transition:transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.kp-logout-button:hover{
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
    filter:brightness(1.05);
}

.kp-logout-button:active{
    transform:translateY(1px);
    box-shadow:0 3px 8px rgba(0,0,0,0.20);
}

.kp-session-timer{
    font-size:11px;
    color:var(--muted);
}

.orders-section-title{
    margin:10px 2px 8px;
    font-size:16px;
    font-weight:600;
    color:var(--text);
}

.orders-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:14px;
}

.order-card{
    background:var(--card);
    border-radius:14px;
    border:1px solid var(--border);
    padding:12px 14px 10px;
    box-shadow:var(--shadow);
}

.order-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px;
    gap:8px;
    flex-wrap:wrap;
}

.order-title-main{
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
}

.order-number{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}

.order-title{
    font-weight:600;
    font-size:14px;
    color:var(--text);
}

.order-meta{
    font-size:11px;
    color:var(--muted);
}

.docs-table-wrapper{
    overflow-x:auto;
    margin-top:8px;
}

.docs-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.docs-table th,
.docs-table td{
    border-bottom:1px solid rgba(0,0,0,0.08);
    padding:4px 4px;
    text-align:left;
    vertical-align:middle;
    white-space:nowrap;
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .docs-table th,
    .docs-table td{ border-bottom-color:rgba(255,255,255,0.12); }
}

.docs-table th{
    font-weight:600;
    color:var(--muted);
}

.docs-table tbody tr:last-child td{ border-bottom:none; }

.doc-type-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 7px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.14);
    font-size:11px;
    background:rgba(0,0,0,0.04);
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .doc-type-badge{
        border-color:rgba(255,255,255,0.18);
        background:rgba(255,255,255,0.08);
    }
}

.doc-link{ text-decoration:none; color:var(--text); }
.doc-link:hover{ text-decoration:underline; }

.doc-unavailable{ color:var(--muted); }

.doc-empty{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.login-again{
    margin-top:22px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

.login-again a{ color:var(--text); text-decoration:none; }

/* Keyboard focus visibility (accessibility) */
:where(a, button, input, select, .nav-toggle, .nav-link):focus-visible{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* Extra contrast when user requests it */
@media (prefers-contrast: more){
    :root{ --muted:#444444; --border:#c2c2c2; }
    @media (prefers-color-scheme: dark){
        :root{ --muted:#d2d6dd; --border:#565b63; }
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
}

.login-again a:hover{ text-decoration:underline; }

@media (min-width: 768px){
    .kp-page{ padding-top:24px; }
    .orders-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 520px){
    .kp-header{ flex-direction:column; align-items:flex-start; }
    .kp-user-chip{ align-self:flex-start; }
}

/* === HERO (aus index.php) === */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--hero-bg);
    box-shadow: var(--shadow);
    padding: clamp(18px, 3.6vw, 44px);
    margin-bottom: clamp(18px, 3vw, 34px);
}

a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
    background: var(--accent, #004225);
    color: var(--accent-contrast);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

a.btn.btn-primary{
    background: var(--accent, #004225);
    color: var(--accent-contrast);
    border-color: transparent;
}

a.btn.btn-ghost{
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.22);
    box-shadow: none;
}

a.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    filter: brightness(1.03);
}

a.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    filter: brightness(.98);
}

a.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .hero {
        padding: 18px;
        border-radius: 16px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .hero-sub {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a.btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* === LOKALE REPARATUREN-STYLES (aus index.php) === */
.rr-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.rr-row{display:grid;grid-template-columns:1fr;gap:10px}
.rr-row.two{grid-template-columns:1fr 1fr}
.rr-field label{display:block;font-weight:600;margin-bottom:6px}

/* Basis-Felder */
.rr-field input[type=text],
.rr-field input[type=email],
.rr-field input[type=tel],
.rr-field select,
.rr-field textarea{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:inherit;
}

/* Light-Mode: Eingabefelder klar sichtbar */
@media (prefers-color-scheme: light){
    .rr-field input[type=text],
    .rr-field input[type=email],
    .rr-field input[type=tel],
    .rr-field select,
    .rr-field textarea{
        border-color:rgba(0,0,0,.22);
        background:rgba(0,0,0,.035);
    }
}

/* Dark-Mode: Dropdown (Select) besser lesbar */
@media (prefers-color-scheme: dark){
    /* Select exakt wie normale Eingabefelder */
    .rr-field select{
        background:rgba(255,255,255,.06);
        color:inherit;
        border:1px solid rgba(255,255,255,.16);
    }
    .rr-field select option{
        background:#2b2b2b;
        color:#ffffff;
    }
}

/* Placeholder besser lesbar */
.rr-field input::placeholder,
.rr-field textarea::placeholder{opacity:.7}

/* Checkboxen & Radios sauber ausrichten */
.rr-field input[type=checkbox],
.rr-field input[type=radio]{
    width:auto;
    margin:0;
    flex:0 0 auto;
    accent-color:var(--accent);
}

.rr-choice{display:flex;align-items:flex-start;gap:10px;line-height:1.45;font-weight:450}
.rr-choice span{display:block}

/* Sektionen (macht Kostenvoranschlag + Einwilligungen übersichtlicher) */
.rr-section{padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
@media (prefers-color-scheme: light){.rr-section{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.02)}}
.rr-section-title{margin:0 0 8px;font-weight:700}
.rr-help{margin-top:6px;font-size:.95em;opacity:.85}

/* Upload-Liste (nur Bilderfeld) */
.rr-upload-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rr-upload-input{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.rr-upload-list{display:grid;gap:10px;margin-top:12px}
.rr-upload-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
@media (prefers-color-scheme: light){.rr-upload-item{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.015)}}
.rr-upload-thumb{width:64px;height:48px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
@media (prefers-color-scheme: light){.rr-upload-thumb{border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.035)}}
.rr-upload-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.rr-upload-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-upload-sub{font-size:.92em;opacity:.85}
.rr-upload-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:10px 14px;
    border-radius:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    border:1px solid transparent;
    background:var(--accent, #004225);
    color:var(--accent-contrast);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.rr-upload-remove:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22);filter:brightness(1.03)}
.rr-upload-remove:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.18);filter:brightness(.98)}
.rr-upload-remove:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rr-upload-warn{margin-top:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,170,0,.35);background:rgba(255,170,0,.08)}
@media (prefers-color-scheme: light){.rr-upload-warn{border-color:rgba(200,120,0,.35);background:rgba(255,170,0,.10)}}

/* Kostenvoranschlag – Kartenlayout */
.rr-kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
@media (max-width:720px){.rr-kv-grid{grid-template-columns:1fr}}

.rr-kv-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);cursor:pointer}
@media (prefers-color-scheme: light){.rr-kv-card{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.02)}}

.rr-kv-card input{margin:0}
.rr-kv-content{display:flex;flex-direction:column;gap:2px}
.rr-kv-title{font-weight:700}
.rr-kv-text{opacity:.9}

.rr-kv-card:hover{background:rgba(255,255,255,.08)}
@media (prefers-color-scheme: light){.rr-kv-card:hover{background:rgba(0,0,0,.04)}}

.rr-kv-card:has(input:checked){
    border-color:rgba(var(--accent-rgb),.65);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)
}

.rr-check-list{display:grid;gap:10px;margin-top:6px}
.rr-check-item{padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
@media (prefers-color-scheme: light){.rr-check-item{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.015)}}
.rr-check-item:hover{background:rgba(255,255,255,.05)}
@media (prefers-color-scheme: light){.rr-check-item:hover{background:rgba(0,0,0,.03)}}

/* Fokus */
.rr-field select:focus,
.rr-field input:focus,
.rr-field textarea:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
    border-color:rgba(var(--accent-rgb),.55)
}

.rr-field textarea{min-height:110px;resize:vertical}
.rr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rr-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:14px 20px;
    border-radius:14px;
    font-weight:600;
    text-decoration:none;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    border:1px solid transparent;
    background:var(--accent, #004225);
    color:var(--accent-contrast);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.rr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22);filter:brightness(1.03)}
.rr-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.18);filter:brightness(.98)}
.rr-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rr-btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none;filter:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Varianten wie im HERO */
.rr-btn-ghost{background:rgba(var(--accent-rgb), 0.08);color:var(--accent);border-color:rgba(var(--accent-rgb), 0.22)}
.rr-btn-success{border-color:var(--accent);background:var(--accent)}
.rr-btn-success:hover{background:var(--accent-strong)}

.rr-alert{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.rr-alert-error{border-color:rgba(255,80,80,.35)}
.rr-alert-ok{border-color:rgba(80,255,140,.28)}

/* Schöne Pflichtfeld-Meldung unten */
#rr-required-hint{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,80,80,.35);
    background:rgba(255,80,80,.08);
    font-weight:600;
}
@media (prefers-color-scheme: light){
    #rr-required-hint{
        background:rgba(255,80,80,.12);
    }
}

@media (max-width:720px){.rr-row.two{grid-template-columns:1fr}}

/* Signatur */
.rr-sign-wrap{margin-top:10px}
#rr-signature{width:100%;height:160px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);touch-action:none}
@media (prefers-color-scheme: light){
    #rr-signature{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.035)}
}
.rr-sign-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Append-only: mark selected KV + consents in Accent */

/* KV cards (radio) */
.rr-kv-card:has(input:checked){
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.10);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
@media (prefers-color-scheme: light){
  .rr-kv-card:has(input:checked){
        background:rgba(var(--accent-rgb),.08);
        box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
  }
}

/* Consent checklist (checkboxes) */
.rr-check-item:has(input:checked){
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.10);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
@media (prefers-color-scheme: light){
  .rr-check-item:has(input:checked){
        background:rgba(var(--accent-rgb),.08);
        box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
  }
}

/* Optional: make link underline a bit clearer inside selected items */
.rr-check-item:has(input:checked) a{ text-decoration: underline; }

/* Links in Einwilligungen: nicht lila, sondern wie normaler Text (Dark/Light) */

.rr-check-item a,
.rr-check-item a:visited{
  color: inherit;
}

/* Optional: im Darkmode explizit weiß, falls irgendwo anders Link-Farben gesetzt sind */
@media (prefers-color-scheme: dark){
  .rr-check-item a,
  .rr-check-item a:visited{
    color: #ffffff !important;
  }
}

/* ===== Dokument-Typ exakt wie Button darstellen ===== */

/* Typ-Badge übernimmt Button-Design */
.doc-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;

    padding: 10px 16px;          /* identisch zum Button */
    border-radius: 999px;

    min-height: 40px;            /* gleiche Höhe wie Button */
    box-sizing: border-box;
}

/* Download-Button Referenz (nur zur Sicherheit konsistent halten) */
.rr-btn-download {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.9rem;
}

/* Spalten sauber zentrieren */
.col-type,
.col-document,
.col-stand {
    vertical-align: middle;
}

/* ===== Dashboard: Datum gleichwertig zum Button ===== */

.col-stand {
    font-size: 0.95rem;     /* größer als vorher */
    font-weight: 500;       /* gleiche Gewichtung wie Button/Text */
    opacity: 1;             /* nicht mehr „blass“ */
    min-height: 40px;       /* gleiche Höhe wie Button */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ===== Dashboard: Luft & Abstände ===== */

/* Gesamte Order-Karte etwas luftiger */
.order-card {
    padding: 20px 24px;
}

/* Abstand zwischen Titel und Tabelle */
.order-header {
    margin-bottom: 14px;
}

/* Tabellenkopf luftiger */
.docs-table thead th {
    padding-bottom: 10px;
}

/* Tabellenzeilen mehr Höhe */
.docs-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Spalten untereinander optisch ruhiger */
.col-type {
    padding-right: 24px;
}

.col-document {
    padding-left: 24px;
    padding-right: 24px;
}

.col-stand {
    padding-left: 24px;
}

/* Button & Badge nicht gequetscht */
.doc-type-badge,
.rr-btn-download {
    margin: 4px 0;
}

/* Abstand zwischen mehreren Aufträgen */
.orders-grid {
    gap: 24px !important;
}

/* ===== Dashboard: saubere Tabellen-Auswahl ===== */

/* Feste Spaltenbreiten, damit Kopf & Inhalt passen */
.docs-table {
    table-layout: fixed;
    width: 100%;
}

/* Einheitliche Zellhöhe */
.docs-table th,
.docs-table td {
    vertical-align: middle;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Spaltenbreiten definieren */
.docs-table th:nth-child(1),
.docs-table td:nth-child(1) {
    width: 180px; /* Typ */
}

.docs-table th:nth-child(2),
.docs-table td:nth-child(2) {
    width: auto; /* Dokument */
    text-align: center;
}

.docs-table th:nth-child(3),
.docs-table td:nth-child(3) {
    width: 160px; /* Stand */
    white-space: nowrap;
}

/* Einheitliche visuelle Höhe */
.doc-type-badge,
.rr-btn-download,
.col-stand {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* Datum wie Button (neutral) */
.rr-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  min-height:40px;
  line-height:1;
  font-size:0.9rem;
  font-weight:500;
  border-radius:999px;
  box-sizing:border-box;
}
@media (prefers-color-scheme: light){
  .rr-pill{ background:rgba(0,0,0,.035); }
}

/* ===== Dashboard Mobile: Tabelle wird zu „Cards“ (ohne Desktop-Design zu ändern) ===== */
@media (max-width: 720px){

  .kp-page{ padding: 14px; }
  .kp-card-dashboard{ padding: 18px 16px; }

  .docs-table thead{ display:none; }

  .docs-table,
  .docs-table tbody,
  .docs-table tr,
  .docs-table td{
    display:block;
    width:100%;
  }

  .docs-table-wrapper{ overflow-x: visible; }

  .docs-table tbody tr{
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    margin-top:12px;
    background:rgba(255,255,255,.03);
  }
  @media (prefers-color-scheme: light){
    .docs-table tbody tr{ background:rgba(0,0,0,.02); }
  }

  .docs-table td{
    border-bottom:0;
    padding:10px 0;
    white-space:normal;
  }

  .docs-table td::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:6px;
  }

  /* Inhalte nicht gequetscht */
  .doc-type-badge,
  .rr-btn-download,
  .rr-pill{
    width:100%;
    justify-content:center;
  }
}

/* ===============================
   Admin Dashboard – Customer Dropdown
   (append at VERY END of site.css)
   =============================== */

/* Make the select itself readable and consistent */
.kp-card-dashboard select#customer_id{
  color-scheme: light dark;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
}

.kp-card-dashboard select#customer_id:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Try to force option readability where browsers allow it */
@media (prefers-color-scheme: light){
  .kp-card-dashboard select#customer_id,
  .kp-card-dashboard select#customer_id option{
    color: #111111;
    background: #ffffff;
  }
}

@media (prefers-color-scheme: dark){
  .kp-card-dashboard select#customer_id,
  .kp-card-dashboard select#customer_id option{
    color: #ffffff;
    background: #2a2b2e;
  }
}

/* --- FIX: remove broken icon pseudo-elements (squares) --- */
/* Ursache: globale CSS-Regeln fügen ::before/::after Icons hinzu (Icon-Font nicht geladen) */
/* Lösung: Für Admin-Dashboard explizit deaktivieren */

.kp-admin-search::before,
.kp-admin-search::after,
.order-card li::before,
.order-card li::after,
.order-card li a::before,
.order-card li a::after{
    content: none !important;
    display: none !important;
}

/* sicherstellen, dass keine Icon-Fonts erzwungen werden */
.kp-admin-search,
.order-card li,
.order-card li a{
    font-family: inherit !important;
}

.order-card li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.order-card li a:hover{
    background: rgba(var(--accent-rgb),0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li a{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .order-card li a:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Delete button styled like download, but red */
.order-card li button.kp-btn-delete{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    background: rgba(176,0,32,0.16);
    color: #b00020;
    border: 1px solid rgba(176,0,32,0.35);
}
.order-card li button.kp-btn-delete:hover{
    background: rgba(176,0,32,0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li button.kp-btn-delete{
        background: rgba(176,0,32,0.30);
        color: #ffd6db;
        border-color: rgba(176,0,32,0.45);
    }
    .order-card li button.kp-btn-delete:hover{ background: rgba(176,0,32,0.38); }
}

/* Admin Dashboard - layout + sidebar */
.kp-admin-layout{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    margin-top: 10px;
    align-items: stretch;
    min-height: 70vh;
}

.kp-admin-sidebar{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.kp-admin-sidebar-title{
    padding: 12px 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark){
    .kp-admin-sidebar-title{ border-bottom-color: rgba(255,255,255,0.12); }
}

.kp-admin-sidebar-tools{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark){
    .kp-admin-sidebar-tools{ border-bottom-color: rgba(255,255,255,0.12); }
}

.kp-admin-search{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.kp-admin-search:focus{
    box-shadow: 0 0 0 4px var(--focus);
}

/* Suchfeld: Clear (X) rot einfärben */
.kp-admin-search::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background-color: #b00020;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L12 13.41l-6.29 6.3-1.42-1.42L10.59 12 4.29 5.71 5.7 4.29 12 10.59l6.29-6.3z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Firefox: eigenes Clear-Button-Overlay */
.kp-admin-search::-moz-search-clear{
    color: #b00020;
}

.kp-admin-customer-list{
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px;
}

.kp-admin-customer-link{
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
}
.kp-admin-customer-link:hover{
    background: rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark){
    .kp-admin-customer-link:hover{ background: rgba(255,255,255,0.08); }
}

.kp-admin-customer-link.is-active{
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.18);
    font-weight: 700;
}
@media (prefers-color-scheme: dark){
    .kp-admin-customer-link.is-active{
        border-color: var(--accent);
        background: rgba(var(--accent-rgb),0.32);
    }
}

.kp-admin-cust-no{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: rgba(var(--accent-rgb),0.22);
    color: var(--accent);
}
@media (prefers-color-scheme: dark){
    .kp-admin-cust-no{
        background: rgba(var(--accent-rgb),0.40);
        color: #eafff3;
    }
}

.kp-admin-cust-name{
    display: block;
    font-size: 14px;
    font-weight: 550;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main panel */
.kp-admin-main{ min-width: 0; }

.kp-admin-main-card{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 18px;
}

.kp-admin-main-title{
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

/* Orders & documents */

/* DHL tracking UI (yellow/red) */
.kp-dhl-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}
.kp-dhl-label{
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #D40511; /* DHL red */
    font-size: 13px;
}
.kp-dhl-input{
    flex: 1 1 240px;
    min-width: 180px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    outline: none;
}
.kp-dhl-input:focus{
    box-shadow: 0 0 0 4px rgba(255,204,0,0.35);
    border-color: rgba(255,204,0,0.9);
}
.kp-dhl-input:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

.kp-btn-dhl{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    background: rgba(255,204,0,0.95); /* DHL yellow */
    color: #111;
    border: 1px solid rgba(0,0,0,0.18);
    white-space: nowrap;
}
.kp-btn-dhl:hover{ background: rgba(255,204,0,1); }
.kp-btn-dhl:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

.kp-dhl-hint{
    color: var(--muted);
    font-size: 12px;
}

@media (prefers-color-scheme: dark){
    .kp-dhl-input{
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.03);
    }
}
.order-card{
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    padding: 14px 14px 10px;
    margin: 12px 0;
    background: rgba(0,0,0,0.02);
}
@media (prefers-color-scheme: dark){
    .order-card{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.order-card > strong{
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--text);
}

.kp-order-refs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 10px;
}
.kp-order-ref{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark){
    .kp-order-ref{
        border-color: rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.04);
    }
}
.kp-order-ref .k{
    opacity: 0.85;
    font-weight: 900;
}
.kp-order-ref .v{
    font-weight: 900;
}
.kp-order-ref.offer .k{ color: #0b5; }
.kp-order-ref.invoice .k{ color: var(--accent); }
.kp-order-ref.credit .k{ color: #b00020; }

.order-card ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.kp-doc-type{
    color: #ffffff;
    font-weight: 700;
}
.kp-doc-num{
    color: #ffffff;
    opacity: 0.9;
    font-weight: 700;
    margin-left: 6px;
}

.kp-doc-type{
    color: #ffffff;
    font-weight: 700;
}

.order-card li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}
@media (prefers-color-scheme: dark){
    .order-card li{
        border-color: rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.03);
    }
}

.order-card li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.order-card li a:hover{
    background: rgba(var(--accent-rgb),0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li a{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .order-card li a:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Mobile */
@media (max-width: 920px){
    .kp-admin-layout{ grid-template-columns: 1fr; }
    .kp-admin-sidebar{ height: auto; }
    .kp-admin-customer-list{ max-height: 260px; }
}

@media (max-width: 520px){
    .order-card li{
        flex-direction: column;
        align-items: flex-start;
    }
    .order-card li a{
        width: 100%;
    }
}

/* ===============================
   Admin Dashboard – Kunden-Uploads
   (unten in /var/www/html/pcservice_site/assets/css/site.css anhaengen)
   =============================== */

.kp-admin-uploads{
    margin: 12px 0 18px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
    .kp-admin-uploads{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.kp-admin-uploads-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.kp-admin-uploads-title{
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
}

.kp-admin-uploads-hint{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.kp-btn-upload{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}

.kp-btn-upload:hover{
    background: rgba(var(--accent-rgb),0.22);
}

@media (prefers-color-scheme: dark){
    .kp-btn-upload{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .kp-btn-upload:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Upload-Popup – kompakte Karte */
.kp-upload-wrap{
    max-width: 820px;
    margin: 18px auto;
    padding: 0 14px;
}

.kp-upload-card{
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 16px;
}

.kp-upload-title{
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.kp-upload-sub{
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.kp-upload-form{
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.kp-upload-input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
}

.kp-upload-input:focus{
    box-shadow: 0 0 0 4px var(--focus);
    outline: none;
}

.kp-upload-actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kp-upload-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,204,0,0.95);
    color: #111;
}

.kp-upload-btn:hover{ background: rgba(255,204,0,1); }

.kp-upload-note{
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.kp-upload-msg{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    margin: 0 0 12px;
}

@media (prefers-color-scheme: dark){
    .kp-upload-msg{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.kp-upload-files{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.kp-upload-files li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
    .kp-upload-files li{
        border-color: rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.03);
    }
}

.kp-upload-fname{
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
}

.kp-upload-fmeta{
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 520px){
    .kp-upload-files li{ flex-direction: column; align-items: flex-start; }
    .kp-upload-fname{ max-width: 100%; }
    .kp-upload-fmeta{ width: 100%; }
}


/* ==============================
   ADMIN: Kunden-Uploads – Liste + Timer (NEU)
   ============================== */

.kp-admin-upload-list{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.kp-admin-upload-loading,
.kp-admin-upload-empty,
.kp-admin-upload-error{
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.kp-admin-upload-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.kp-admin-upload-item:first-child{ border-top: none; }
@media (prefers-color-scheme: dark){
  .kp-admin-upload-item{ border-top-color: rgba(255,255,255,0.12); }
}

.kp-admin-upload-left{ min-width: 0; }

.kp-admin-upload-name{
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 520px;
}

.kp-admin-upload-meta{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kp-admin-upload-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kp-admin-upload-timer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,204,0,0.35);
  border: 1px solid rgba(255,204,0,0.7);
  color: #111;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark){
  .kp-admin-upload-timer{
    background: rgba(255,204,0,0.25);
    border-color: rgba(255,204,0,0.55);
    color: #fff;
  }
}

/* ==============================
   UPLOAD POPUP – Layout (NEU)
   ============================== */

.kp-upload-wrap{
  max-width: 760px;
  margin: 18px auto;
  padding: 0 12px;
}

.kp-upload-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
}

.kp-upload-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.kp-upload-sub{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.kp-upload-msg{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  color: var(--text);
  font-size: 13px;
}

@media (prefers-color-scheme: dark){
  .kp-upload-msg{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-form{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 16px;
  padding: 12px;
}

@media (prefers-color-scheme: dark){
  .kp-upload-form{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}

.kp-upload-actions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.kp-upload-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
  white-space: nowrap;
}

.kp-upload-btn:hover{ background: rgba(var(--accent-rgb),0.22); }

@media (prefers-color-scheme: dark){
  .kp-upload-btn{
        background: rgba(var(--accent-rgb),0.30);
    color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
  }
    .kp-upload-btn:hover{ background: rgba(var(--accent-rgb),0.38); }
}

.kp-upload-note{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.kp-upload-files{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.kp-upload-files li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
  .kp-upload-files li{
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
  }
}

.kp-upload-fname{
  color: var(--text);
  font-weight: 850;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}

.kp-upload-fmeta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.kp-upload-timer{
  color: #D40511;
  font-weight: 900;
}

@media (max-width: 520px){
  .kp-upload-files li{ flex-direction: column; align-items: flex-start; }
  .kp-upload-fname{ max-width: 100%; }
  .kp-upload-fmeta{ width: 100%; }
}

/* ==============================
   UPLOAD POPUP – Dropzone + Progress (NEU)
   ============================== */

.kp-upload-sys{
  margin: 10px 0 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  padding: 10px 12px;
}
@media (prefers-color-scheme: dark){
  .kp-upload-sys{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-sys-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.kp-upload-sys-row .k{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kp-upload-sys-row .v{
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.kp-dropzone{
  position: relative;
  border: 2px dashed rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.02);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
}

@media (prefers-color-scheme: dark){
  .kp-dropzone{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
  }
}

.kp-dropzone.is-drag{
  border-color: rgba(0,66,37,0.70);
  background: rgba(0,66,37,0.10);
}

.kp-dropzone-title{
  color: var(--text);
  font-weight: 950;
  font-size: 14px;
}

.kp-dropzone-sub{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.kp-dropzone-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.kp-upload-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.kp-upload-overall{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kp-upload-queue{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.kp-q-item{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  padding: 10px 12px;
}

@media (prefers-color-scheme: dark){
  .kp-q-item{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-q-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kp-q-name{
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 520px;
}

.kp-q-meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.kp-q-bar{
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  overflow: hidden;
}

@media (prefers-color-scheme: dark){
  .kp-q-bar{
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
  }
}

.kp-q-bar-inner{
  height: 100%;
  width: 0%;
  background: rgba(0,66,37,0.55);
  border-radius: 999px;
  transition: width 180ms ease;
}

@media (prefers-color-scheme: dark){
  .kp-q-bar-inner{
    background: rgba(0,66,37,0.70);
  }
}

.kp-q-status{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 520px){
  .kp-q-name{ max-width: 100%; }
  .kp-q-top{ flex-direction: column; align-items: flex-start; }
}

/* ===============================
   CONSOLIDATED INLINE STYLES
   =============================== */

/* ===== Home / Services ===== */
.home {
    padding: 0;
    display: block;
}

/* Card-Buttons (8 Kacheln): fester Accent */
.home .btn-dark,
.home .service-card .btn-dark {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

.home .btn-dark:hover,
.home .service-card .btn-dark:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    filter: brightness(1.06);
}

.hero-accent {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background:
        radial-gradient(520px 240px at 10% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
        radial-gradient(520px 240px at 90% 20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
    filter: blur(2px);
    opacity: .9;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
}

.hero-title {
    margin: 0 0 10px;
    font-size: clamp(22px, 3.0vw, 44px);
    line-height: 1.08;
    letter-spacing: -.02em;
}

.hero-sub {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: clamp(14px, 1.35vw, 18px);
    max-width: 80ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Services */
.services-head {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
}

.services-title {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 24px);
    letter-spacing: -.01em;
}

.services-sub {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 720px) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 1020px) {
    .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* Cards: konsistent zu site.css (var(--card), var(--border), var(--shadow)) */
.service-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px;
    gap: 10px;
    align-content: start;
    position: relative;
    overflow: hidden;

    /* Performance/Smoothness */
    transform: translateZ(0);
    will-change: transform, opacity;
    contain: layout paint;

    /* Default */
    opacity: .92;
    transition:
        transform .45s cubic-bezier(.2, .7, .2, 1),
        opacity .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.service-card.is-active {
    opacity: 1;
    transform: translateY(-8px) scale(1.02);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Hover/Focus: immer reagieren, auch wenn Card nicht die aktive (Scroll) Card ist */
.service-card:hover,
.service-card:focus-within {
    opacity: 1;
    transform: translateY(-8px) scale(1.02);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    z-index: 2;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(700px 220px at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity .55s ease;
}

.service-card.is-active::after { opacity: 1; }
.service-card:hover::after,
.service-card:focus-within::after { opacity: 1; }

.service-media {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.06);
    aspect-ratio: 16 / 9;
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    will-change: transform;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.service-card.is-active .service-media img { transform: scale(1.08); }
.service-card:hover .service-media img,
.service-card:focus-within .service-media img { transform: scale(1.08); }

.service-body {
    display: grid;
    gap: 8px;
    flex: 1 1 auto; /* füllt verfügbaren Platz */
}

.service-title {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.01em;
}

.service-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
}

.service-list.core { color: var(--text); }

/* Details: nur bei Active sichtbar */
.service-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    will-change: max-height, opacity, transform;
    transition:
        max-height .55s cubic-bezier(.2, .7, .2, 1),
        opacity .35s ease,
        transform .35s ease;
}

.service-card.is-active .service-details {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

/* Desktop-Interaktion: Hover/Focus zeigt Details (Touch wird via @media(hover:none) neutralisiert) */
@media (hover: hover) {
    .service-card:hover .service-details,
    .service-card:focus-within .service-details {
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons: sauber in Light/Dark via site.css Tokens */
.home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    box-shadow: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.home .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.home .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.home .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 3px;
}

/* Primary & Ghost im HERO: beide im Accent */
.home .hero .btn-primary,
.home .hero .btn-ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.home .hero .btn-primary:hover,
.home .hero .btn-ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Ghost: identischer Accent wie Kontakt-Seite */
.home .btn-ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.home .btn-ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Card-Buttons (8 Kacheln): fester Accent */
.home .btn-dark {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.home .btn-dark:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .70s ease, transform .70s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}

.reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .service-card, .service-media img, .service-details, .home .btn { transition: none; }
}

/* Touch/Tablet: kein Hover-Flackern, keine unnötigen Skalierungen */
@media (hover: none) {
    .service-card:hover,
    .service-card:focus-within {
        transform: none;
        z-index: auto;
    }
    .service-card:hover .service-media img,
    .service-card:focus-within .service-media img {
        transform: scale(1.01);
    }
    .service-card:hover .service-details,
    .service-card:focus-within .service-details {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
    }

    /* Auf Touch-Geräten darf "Hover" nicht die Scroll-Active-Logik stören */
    .service-card.is-active {
        transform: translateY(0) scale(1);
    }
    .service-card.is-active .service-media img {
        transform: scale(1.01);
    }
    .service-card.is-active .service-details {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* ===== Shared Repair Page Helpers ===== */
.step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin-right:8px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-contrast);
    font-weight:700;
    font-size:14px;
    line-height:1;
}

@media (max-width: 640px) {
    main.card.home {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero {
        padding: 18px;
        border-radius: 16px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .hero-sub {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a.btn {
        width: 100%;
        margin-top: 10px; /* Abstand zwischen mobilen Buttons */
    }

    /* avoid huge gaps from <br><br> on mobile */
    .services-head br { display: none; }
}

/* ===== Vor-Ort-Hilfe – KPI & Motion ===== */
@media (prefers-reduced-motion: no-preference) {
    .hero-title,
    .hero-sub,
    .hero-actions a,
    .kpi,
    .service-card {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
    }

    .hero-title.is-visible,
    .hero-sub.is-visible,
    .hero-actions a.is-visible,
    .kpi.is-visible,
    .service-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }
}

.hero-kpis{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.kpi{
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.02));
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.kpi-title{
    font-weight: 800;
    letter-spacing: .2px;
}

.kpi-sub{
    margin-top: 4px;
    opacity: .85;
    font-size: 14px;
    line-height: 1.35;
}

.checklist{
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 18px;
}

.checklist li{
    position: relative;
    padding-left: 28px;
    line-height: 1.45;
    opacity: .92;
}

.checklist li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.checklist li::after{
    content: "";
    position: absolute;
    left: 6px;
    top: .45em;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

@media (max-width: 720px){
    .hero-kpis{ grid-template-columns: 1fr; }
    .checklist{ grid-template-columns: 1fr; }
}

/* ===== Kontaktseite (scoped) ===== */
.contact-page{
    width: min(1100px, calc(100% - 24px));
    margin: 0 auto;
    padding: 18px;
}

.contact-page > section{ margin-top: 16px; }
.contact-page > section:first-child{ margin-top: 0; }
.contact-page > section + section{ margin-top: 16px; }

.contact-page .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #1ebe5d);
    color: #fff;
    border-color: #1ebe5d;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.contact-page .btn-whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .45);
}

.contact-page .whatsapp .wa-box {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;

    background:
        radial-gradient(480px 140px at 12% 0%, rgba(37, 211, 102, .18), transparent 60%),
        linear-gradient(180deg, rgba(37,211,102,.10), rgba(37,211,102,.03));
    border: 1px solid rgba(37,211,102,.35);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);

    overflow: hidden;
}

.contact-page .wa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(37, 211, 102, .14);
    border: 1px solid rgba(37, 211, 102, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.contact-page .wa-icon svg { display: block; }

.contact-page .wa-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #25D366;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
}

.contact-page .wa-meta {
    display: grid;
    gap: 3px;
    font-size: 13px;
    min-width: 0;
}

.contact-page .wa-meta strong {
    font-size: 13.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-page .wa-meta span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.contact-page .btn-primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.contact-page .btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.contact-page .btn-ghost {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.contact-page .btn-ghost:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.contact-page .btn-dark {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.contact-page .btn-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.contact-page .grid {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    align-items: start;
}

/* Da links aktuell keine Kachel/Aside mehr existiert: Grid auf 1 Spalte, damit nichts "leer" wirkt */
@media (min-width: 980px) {
    .contact-page .grid {
        grid-template-columns: 1fr;
    }

    .contact-page .grid > article {
        grid-column: 1;
        grid-row: auto;
    }
}

.contact-page .panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 16px;
}

.contact-page .panel.repair { background: var(--card); }

.contact-page .repair-steps {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}

.contact-page .repair-steps li {
    position: relative;
    padding-left: 22px;
}

.contact-page .repair-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
}

/* Nummerierter Ablauf – Online-Reparaturannahme */
.contact-page .panel.repair .repair-steps {
    counter-reset: step;
    gap: 14px;
}

.contact-page .panel.repair .repair-steps li {
    padding-left: 52px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border-radius: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.contact-page .panel.repair .repair-steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fix: immer gut lesbar (Hellmodus) */
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    font-weight: 800;
    line-height: 1;
    top: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.contact-page .panel.repair .repair-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 44px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent), rgba(255,255,255,.08));
    border-radius: 2px;
}

/* So läuft es ab – gleiche Optik, kompakter */
.contact-page .grid aside .repair-steps {
    counter-reset: step;
    gap: 10px;
}

.contact-page .grid aside .repair-steps li {
    padding-left: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13.5px;
}

.contact-page .grid aside .repair-steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fix: immer gut lesbar (Hellmodus) */
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    font-weight: 700;
    top: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.contact-page .panel-title {
    position: relative;
    padding-left: 12px;
}

.contact-page .panel-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent);
}

.contact-page .panel-title {
    margin: 0 0 10px;
    font-size: 18px;
    letter-spacing: -.01em;
}

.contact-page .panel-text {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 14px;
}

.contact-page .panel-actions { margin-top: 10px; }

.contact-page .sep {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

.contact-page .contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.contact-page .contact-list a { color: inherit; text-decoration: none; }
.contact-page .contact-list a:hover { text-decoration: underline; }

.contact-page .contact-ico {
    display: inline-flex;
    width: 22px;
    justify-content: center;
    margin-right: 6px;
    opacity: .9;
}

.contact-page .form {
    display: grid;
    gap: 12px;
}

.contact-page .form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.contact-page .form input,
.contact-page .form textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 10px 12px;
    outline: none;
}

.contact-page .form input:focus,
.contact-page .form textarea:focus {
    border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}

.contact-page .consent {
    display: grid !important;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    color: var(--muted);
}

.contact-page .consent a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.contact-page .consent a:hover {
    text-decoration: none;
    filter: brightness(1.1);
}

.contact-page .consent input {
    margin: 3px 0 0 0;
    width: 16px;
    height: 16px;
}

.contact-page .req { color: var(--accent); font-weight: 800; }

.contact-page .hint { margin: 0; font-size: 12px; color: var(--muted); }

.contact-page .alert {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    margin: 0 0 12px;
    font-size: 14px;
}

.contact-page .alert.success {
    background: rgba(var(--accent-rgb), .10);
    border-color: rgba(var(--accent-rgb), .25);
}

.contact-page .alert.error {
    background: rgba(200, 0, 0, .06);
    border-color: rgba(200, 0, 0, .18);
}

.contact-page .alert ul { margin: 0; padding-left: 18px; }

.contact-page .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.contact-page .map-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    aspect-ratio: 16 / 9;
    display: grid;
}

/* WICHTIG: sonst bleibt Google-Maps-iframe nach dem Laden klein */
.contact-page .map-frame iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-page .map-placeholder{
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 10px;
    padding: 14px;
    background:
        radial-gradient(520px 160px at 10% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.contact-page .map-placeholder p{ margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.contact-page .map-placeholder p strong{ color: var(--text); }

.contact-page .map-consent-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}

.contact-page .map-small{ font-size: 12px; opacity: .85; }

.contact-page .map-after{ margin-top: 10px; }

/* Animation (dezent) + Mobile Feinschliff – ohne Design-Änderung */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pcspFadeUp {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes pcspSoftIn {
        from { opacity: 0; transform: scale(.992); }
        to   { opacity: 1; transform: scale(1); }
    }

    .contact-page .hero {
        animation: pcspSoftIn .38s ease both;
    }

    /* Kacheln sanft nacheinander */
    .contact-page .panel {
        animation: pcspFadeUp .42s ease both;
        will-change: transform, opacity;
    }

    .contact-page > section:nth-of-type(1) .panel,
    .contact-page > section:nth-of-type(1) .hero { animation-delay: 0ms; }

    .contact-page > section:nth-of-type(2) { animation-delay: 40ms; }
    .contact-page > section:nth-of-type(3) { animation-delay: 80ms; }
    .contact-page > section:nth-of-type(4) { animation-delay: 120ms; }
    .contact-page > section:nth-of-type(5) { animation-delay: 160ms; }

    .contact-page .grid > * { animation-delay: 120ms; }

    /* Steps: leichter Stagger */
    .contact-page .repair-steps li { animation: pcspFadeUp .34s ease both; }
    .contact-page .repair-steps li:nth-child(1){ animation-delay: 40ms; }
    .contact-page .repair-steps li:nth-child(2){ animation-delay: 80ms; }
    .contact-page .repair-steps li:nth-child(3){ animation-delay: 120ms; }

    /* WhatsApp Box: minimal */
    .contact-page .whatsapp .wa-box { animation: pcspFadeUp .36s ease both; animation-delay: 90ms; }
}

/* Mobile Anpassungen (Lesbarkeit + Abstände, kein Redesign) */
@media (max-width: 980px) {
    .contact-page{
        width: min(1100px, calc(100% - 18px));
        padding: 14px;
    }

    .contact-page .grid{ gap: 14px; }
}

@media (max-width: 640px) {
    .contact-page .panel{
        padding: 14px;
        border-radius: 16px;
    }

    .contact-page .panel-title{ font-size: 17px; }

    .contact-page .panel-text{ font-size: 13.5px; }

    .contact-page .whatsapp .wa-box{
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left;
    }

    .contact-page .wa-icon{ width: 24px; height: 24px; }

    .contact-page .btn{ width: 100%; }

    .contact-page .panel-actions .btn{ width: 100%; }

    .contact-page .form{ gap: 10px; }

    .contact-page .consent{ grid-template-columns: 18px 1fr; }

    .contact-page .map-frame{ aspect-ratio: 4 / 3; }
}

/* ===== Reparaturen: Links in ausgewählten Consent-Items ===== */
.rr-check-item:has(input:checked) a,
.rr-check-item:has(input:checked) a:visited{
    color: var(--accent-contrast) !important;
}

/* ===== Legal Pages (Impressum/Datenschutz/AGB) ===== */
.legal-page{ max-width:900px; margin:0 auto; }
.legal-page h1{ margin-bottom:10px; }
.legal-page h2{ margin:18px 0 8px; font-size:16px; letter-spacing:.02em; }
.legal-page p{ margin:0 0 10px; }
.legal-page p + h2{ margin-top:20px; }
.legal-page a{ word-break:break-word; color:#ffffff; text-decoration:underline; }
.legal-section{ padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.02); margin:10px 0; }
@media (prefers-color-scheme: dark){ .legal-section{ background:rgba(255,255,255,.04); } }
/* Links auch im Light Mode gut sichtbar */
@media (prefers-color-scheme: light){ .legal-page a{ color:#000000; } }
.legal-label{ font-weight:700; }
.legal-lines{ margin:0; }
.legal-lines br{ line-height:1.75; }

/* ===== Kundenportal Dashboard (inline -> global) ===== */
.order-header .order-title-main{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.order-header .rr-pill.rr-pill-order{
    background:var(--accent);
    color:var(--accent-contrast);
    font-weight:800;
    display:inline-flex;
    align-items:center;
}

.order-header .rr-pill.rr-pill-dhl{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(90deg, #FFCC00 0%, #FFCC00 70%, #D6001C 100%);
    border:1px solid rgba(0,0,0,0.18);
}
.order-header .rr-pill.rr-pill-dhl .dhl-link{
    color:#111;
    text-decoration:none;
}
.order-header .rr-pill.rr-pill-dhl .dhl-link:hover{ text-decoration:underline; }
.order-header .rr-pill.rr-pill-dhl .dhl-title{
    font-weight:900;
    color:#111;
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-code{
    font-weight:900;
    background:rgba(255,255,255,0.65);
    padding:4px 10px;
    border-radius:999px;
    color:#111;
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy{
    appearance:none;
    border:0;
    cursor:pointer;
    padding:6px 10px;
    border-radius:999px;
    font-weight:900;
    background:rgba(255,255,255,0.25);
    color:#111;
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy:hover{ background:rgba(255,255,255,0.35); }
.order-header .rr-pill.rr-pill-dhl .dhl-copy:active{ transform:scale(0.98); }

/* ===== Header-Enhancement (moved from header.php) ===== */
:root {
    /* Akzentfarbe – British Racing Green */
    --hdr-accent: var(--accent, #004225);
    --hdr-accent-soft: rgba(var(--accent-rgb, 0, 66, 37), .22);
    --hdr-shadow: rgba(0, 0, 0, .12);

    /* Fallback Page Background (für iOS/Chrome Overscroll über dem Header) */
    --page-bg: var(--bg);
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode: Akzentfarbe konsistent */
        --hdr-accent: var(--accent, #004225);
        --hdr-accent-soft: rgba(var(--accent-rgb, 0, 66, 37), .22);
        --hdr-shadow: rgba(0, 0, 0, .28);
        --page-bg: var(--bg);
    }
}
@media (prefers-color-scheme: light) {
    :root {
        /* Light Mode: Akzent sicher erzwingen */
        --hdr-accent: var(--accent, #004225);
        --page-bg: var(--bg);
    }
}

html {
    background-color: var(--page-bg, #111317) !important;
}
body {
    background-color: var(--page-bg, #111317) !important;
    overscroll-behavior-y: none;
}
.wrap {
    background-color: var(--page-bg, #111317) !important;
}

/* iOS / Mobile Overscroll-Fix: oberer Bereich übernimmt Seiten-Hintergrund */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--page-bg);
    z-index: 9999;
    pointer-events: none;
}

/* Base */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    backdrop-filter: saturate(120%) blur(2px);
    transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
    -webkit-tap-highlight-color: transparent;
}
.site-header:hover {
    box-shadow: 0 10px 30px var(--hdr-shadow);
    transform: translateY(-1px);
}

/* Sticky on scroll (class toggled via JS) */
.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header.is-sticky.is-scrolled {
    box-shadow: 0 10px 30px var(--hdr-shadow);
}

/* Hide on scroll (class toggled via JS) */
.site-header.is-hidden {
    transform: translateY(-120%);
    box-shadow: none;
}

/* Brand / Logo */
.site-header .brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.site-header .brand a {
    display: inline-flex;
    align-items: center;
    border-radius: 14px;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.site-header .brand a:hover { transform: translateY(-1px); }
.site-header .brand a:active { transform: translateY(0); }
.site-header .brand a:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}
.site-header .brand img {
    max-height: 96px;
    width: auto;
    height: auto;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s ease;
    transform-origin: center;
}
.site-header .brand img:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--hdr-accent) 30%, transparent));
}

/* Navigation links */
.site-header .site-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .25rem;
    border-radius: 12px;
    transition: color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
    will-change: transform;
}
.site-header .site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hdr-accent), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}
.site-header .site-nav .nav-link:hover {
    color: var(--hdr-accent) !important;
    transform: translateY(-2px);
}
.site-header .site-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.site-header .site-nav .nav-link:active {
    transform: translateY(0) scale(.98);
}
.site-header .site-nav .nav-link:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}
.site-header .site-nav .nav-link.is-active {
    background: var(--hdr-accent);
    color: #ffffff !important;
}
.site-header .site-nav .nav-link.is-active::after {
    transform: scaleX(1);
}

/* Toggle button */
.nav-toggle {
    /* Sichtbarkeit wird unten per Media Query gesteuert (robust gegen site.css) */
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
    will-change: transform;
}
.nav-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px var(--hdr-accent-soft);
}
.nav-toggle:active { transform: scale(.95); }
.nav-toggle[aria-expanded="true"] {
    box-shadow: 0 8px 22px var(--hdr-accent-soft);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 3px;
}

/* Mobile menu animation using existing .is-open */
@media (max-width: 900px) {
    .site-header { flex-wrap: wrap; }

    /* Wenn Menü offen: kein Header-Transform (sonst bricht position:fixed in manchen Browsern/iOS) */
    body.nav-open .site-header,
    body.nav-open .site-header:hover,
    body.nav-open .site-header.is-hidden {
        transform: none !important;
    }
    body.nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .nav-toggle { display: inline-flex; }

    /* Burger-Menü: Fullscreen Overlay */
    #main-nav.site-nav {
        display: flex;
        flex-direction: column;
        gap: clamp(.4rem, 2.2vh, .75rem);
        padding: calc(env(safe-area-inset-top) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-right) + clamp(.9rem, 4vw, 1.25rem)) calc(env(safe-area-inset-bottom) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-left) + clamp(.9rem, 4vw, 1.25rem));
        align-items: center;
        justify-content: flex-start;

        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;

        box-sizing: border-box;
        overflow-x: hidden;

        background: var(--page-bg);
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: opacity .2s ease-out, visibility 0s linear .2s;

        pointer-events: none;
        z-index: 9998;
    }
    #main-nav.site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease-out, visibility 0s;
        pointer-events: auto;
    }

    /* Logo im Menü oben mittig */
    #main-nav.site-nav .nav-brand-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: .5rem;
    }
    #main-nav.site-nav .nav-brand-mobile a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
    }
    #main-nav.site-nav .nav-brand-mobile img {
        height: 48px;
        max-height: 48px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        display: block;
    }
}

/* ===== Footer + Cookie Banner (moved from footer.php) ===== */
/* Sticky-Footer: Footer immer am Ende des Viewports, wenn Seite kurz ist */
html, body { height: 100%; }
body { min-height: 100vh; }
.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-footer { margin-top: auto; }

.site-footer {
    background: transparent;
    color: inherit;
    margin-top: 0;
    padding: 1rem 0 1.25rem;
}

.site-footer,
.site-footer * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.25rem;
    align-items: start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.footer-logo {
    font-weight: 600;
    letter-spacing: .2px;
    font-size: .95rem;
}

.footer-copy {
    font-size: .85rem;
    opacity: .7;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 1rem;
}

.footer-col { min-width: 0; }

.footer-heading {
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .25rem;
    display: block;
    opacity: .85;
}

/* Links: keine Farben, kein Lila, kein visited-Unterschied */
.footer-link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {
    color: inherit;
    text-decoration: none;
}

.footer-link {
    display: block;
    font-size: .85rem;
    line-height: 1.45;
    opacity: .7;
    transition: opacity .15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-link:hover { opacity: 1; }

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .footer-nav {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: .85rem;
    }
}

@media (max-width: 520px) {
    .footer-link { white-space: normal; }

    /* Mobile Feinschliff */
    .footer-container { padding: 0 .85rem; }
    .footer-nav { grid-template-columns: 1fr; }
    .footer-heading { margin-top: .15rem; }
    .footer-link { font-size: .9rem; line-height: 1.5; }
}

/* ===== Cookie Banner ===== */
[hidden]{ display:none !important; }
:root{
  --kp-accent:var(--accent, #0b5ed7);
  --kp-overlay: rgba(0,0,0,.45);
  --kp-card: rgba(20, 24, 28, .96);
  --kp-text: rgba(255,255,255,.92);
  --kp-muted: rgba(255,255,255,.72);
  --kp-line: rgba(255,255,255,.14);
  --kp-rowhead: rgba(255,255,255,.05);
  --kp-radius: 18px;
}

/* Light-Mode Support (automatisch + optional per Theme-Attribut/Klasse) */
@media (prefers-color-scheme: light){
  :root{
    --kp-overlay: rgba(0,0,0,.18);
    --kp-card: rgba(255,255,255,.98);
    --kp-text: rgba(0,0,0,.88);
    --kp-muted: rgba(0,0,0,.62);
    --kp-line: rgba(0,0,0,.12);
    --kp-rowhead: rgba(0,0,0,.03);
  }
}
html[data-theme="light"], html.light, body.light{
  --kp-overlay: rgba(0,0,0,.18);
  --kp-card: rgba(255,255,255,.98);
  --kp-text: rgba(0,0,0,.88);
  --kp-muted: rgba(0,0,0,.62);
  --kp-line: rgba(0,0,0,.12);
  --kp-rowhead: rgba(0,0,0,.03);
}
.kp-cookie-backdrop{
  position:fixed;
  inset:0;
  background: var(--kp-overlay);
  z-index: 9998;
  backdrop-filter: none;
}
.kp-cookie-banner, .kp-cookie-modal{
  position:fixed; inset:auto 0 0 0;
  display:flex; justify-content:center;
  padding: 1rem;
  z-index: 9999;
}
.kp-cookie-modal{ inset:0; align-items:center; overflow-y:auto; -webkit-overflow-scrolling: touch; }

.kp-cookie-card{
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  width:min(900px, calc(100% - 1rem));
  background:var(--kp-card);
  color:var(--kp-text);
  border-radius: var(--kp-radius);
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  border:1px solid var(--kp-line);
}

.kp-cookie-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.kp-cookie-title{
  font-weight:800;
  font-size:1rem;
}

.kp-cookie-sub{
  color:var(--kp-muted);
  font-size:.9rem;
  line-height:1.4;
  margin-top:.25rem;
}

.kp-cookie-x{
  border:0;
  background:transparent;
  color:var(--kp-text);
  font-size:1.6rem;
  cursor:pointer;
  line-height:1;
  padding:0 .25rem;
}

.kp-cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.85rem;
  align-items:center;
}

.kp-cookie-btn{
  appearance:none;
  border:1px solid var(--kp-line);
  background:transparent;
  color:var(--kp-text);
  border-radius: 999px;
  padding:.5rem .9rem;
  font-weight:700;
  cursor:pointer;
}

.kp-cookie-btn-primary{
  background:var(--kp-accent);
  border-color:var(--kp-accent);
  color:#fff;
}

.kp-cookie-link{
  color:var(--kp-text);
  text-decoration:none;
  font-weight:600;
}
.kp-cookie-link:hover{ text-decoration:underline; }

.kp-cookie-table{ margin-top: .85rem; border:1px solid var(--kp-line); border-radius:12px; overflow:hidden; }
.kp-cookie-row{ display:grid; grid-template-columns: 1.1fr 2fr .9fr 1fr; gap:.5rem; padding:.6rem .75rem; border-top:1px solid var(--kp-line); }
.kp-cookie-row-head{ background: var(--kp-rowhead); font-weight:700; border-top:0; }
.kp-cookie-row code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.kp-cookie-section{ margin-top:.9rem; }
.kp-cookie-section-title{ font-weight:800; margin-bottom:.3rem; }

.kp-cookie-ext{ margin-top:.5rem; display:grid; gap:.5rem; }
.kp-cookie-ext-row{ border:1px solid var(--kp-line); border-radius:12px; padding:.6rem .75rem; }
.kp-cookie-ext-name{ font-weight:700; }
.kp-cookie-ext-desc{ color:var(--kp-muted); font-size:.9rem; margin-top:.2rem; }

@media (max-width: 860px){
  .kp-cookie-row{ grid-template-columns: 1fr; }
}

/* ===============================
     Einheitliche Button-Farbe/Font
     =============================== */
.btn,
a.btn,
button.btn,
.rr-btn,
.rr-btn-ghost,
.rr-btn-success,
.rr-btn-download,
.kp-btn-dhl,
.kp-btn-upload,
.kp-btn-delete,
.kp-cookie-btn,
.kp-cookie-btn-primary,
.btn-primary,
.btn-ghost,
.btn-dark,
.btn-whatsapp,
.contact-page .btn,
.home .btn{
    font-family: var(--btn-font) !important;
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.rr-btn:hover,
.rr-btn-ghost:hover,
.rr-btn-success:hover,
.rr-btn-download:hover,
.kp-btn-dhl:hover,
.kp-btn-upload:hover,
.kp-btn-delete:hover,
.kp-cookie-btn:hover,
.kp-cookie-btn-primary:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-dark:hover,
.btn-whatsapp:hover,
.contact-page .btn:hover,
.home .btn:hover{
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
    filter: brightness(1.06);
}

/* ===============================
     Header-Logo Größen-Fix
     =============================== */
.site-header .brand img,
#main-nav.site-nav .nav-brand-mobile img{
    max-width: 180px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

@media (max-width: 900px){
    #main-nav.site-nav .nav-brand-mobile img{
        max-height: 56px !important;
    }
}

/* ===============================
     Vor-Ort-Hilfe (Seitenstil)
   =============================== */
.vor-ort .micro-divider{
    width:64px;
    height:3px;
    margin:12px 0 14px;
    border-radius:3px;
    background:linear-gradient(90deg,var(--accent),color-mix(in srgb, var(--accent) 30%, transparent));
}

/* Zentrierung/Container für Vor-Ort-Hilfe */
.vor-ort .hero-inner,
.vor-ort .services,
.vor-ort .services-head,
.vor-ort .services-grid,
.vor-ort .quote-card,
.vor-ort .text-panel{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.vor-ort .services{
    padding-left: clamp(0px, 1vw, 8px);
    padding-right: clamp(0px, 1vw, 8px);
}

.vor-ort .services-head{
    text-align: left;
}

.vor-ort .services + .services{
    margin-top: clamp(28px, 4vw, 56px);
}

.vor-ort .services-title{
    margin-top: 6px;
    margin-bottom: 6px;
}

.vor-ort .services-sub{
    margin-top: 4px;
    margin-bottom: 8px;
}

.vor-ort .checklist{
    max-width: 1100px;
    margin: 12px auto 0;
    padding-left: 0;
}

.vor-ort .hero-actions{
    margin-top: 8px;
}

.vor-ort .lead-note{
    font-size:16.5px;
    opacity:1;
    background:rgba(0,0,0,.35);
    padding:16px 18px;
    border-radius:14px;
    color:#ffffff;
}

.vor-ort .quote-card{
    margin-top:22px;
    padding:22px 26px;
    border-radius:22px;
    background:rgba(0,0,0,.45);
    border:1px solid var(--border);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    color:#ffffff;
}

.vor-ort .quote-text{
    font-size:17px;
    font-weight:600;
    line-height:1.45;
}

.vor-ort .quote-author{
    display:block;
    margin-top:10px;
    font-size:13px;
    opacity:.7;
}

.vor-ort .eyebrow{
    display:inline-block;
    margin-bottom:6px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    opacity:.85;
}

.vor-ort .text-accent{
    background:rgba(0,0,0,.35);
    padding:16px 18px;
    border-radius:14px;
    color:#ffffff;
}

.vor-ort .text-panel{
    margin-top:14px;
    padding:18px 18px 16px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.02));
    border:1px solid var(--border);
    box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.vor-ort .service-title .dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
    margin-right:6px;
}

.vor-ort .highlight-wrap{
    position:relative;
    padding-left:16px;
    margin-top:14px;
}

.vor-ort .highlight-wrap::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    bottom:6px;
    width:4px;
    border-radius:4px;
    background:linear-gradient(180deg,var(--accent),color-mix(in srgb, var(--accent) 30%, transparent));
}

.vor-ort .services-sub strong{
    font-weight:800;
}

.vor-ort .services-sub.lead-strong{
    font-size:20px;
    letter-spacing:.3px;
    color:#ffffff;
}

.vor-ort .services-title::after{
    content:"";
    display:block;
    width:46px;
    height:4px;
    margin-top:10px;
    border-radius:4px;
    background:var(--accent);
    opacity:.85;
}

.vor-ort .pill{
    display:inline-block;
    margin-left:8px;
    padding:4px 10px;
    font-size:12px;
    font-weight:700;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
}

.vor-ort .step-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--accent, #004225);
    color:#fff;
    font-weight:700;
    font-size:14px;
}

.vor-ort .step-card{
    border-left:4px solid var(--accent, #004225);
}

@media (max-width: 640px){
    .vor-ort .services-head br{ display:none; }
    .vor-ort .hero-actions{ flex-direction:column; align-items:stretch; }
    .vor-ort .hero-actions a.btn{ width:100%; margin-top:10px; }
}