/* === SELF-HOSTED INTER FONT (DSGVO-konform, kein Google CDN) === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Screen reader only — visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === GLOBAL RESETS === */
html { overflow-x: clip; }
img { max-width: 100%; height: auto; }
a:visited { color: inherit; }

/* ============================================================
   HOMEPAGE REDESIGN — Overrides for startseite sections
   ============================================================ */


/* Trust-Leiste im About-Bereich */
.pcsp-about .pcsp-trust-bar {
    border: none;
    border-top: 1px solid var(--border);
    padding: var(--space-lg) 0 0;
    margin-top: var(--space-xl);
    gap: 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.pcsp-about .pcsp-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.pcsp-about .pcsp-trust-item strong {
    font-size: var(--fs-xl);
    color: var(--accent-light);
    line-height: 1;
}
.pcsp-about .pcsp-trust-item > span:last-child {
    font-size: 0.78rem;
    color: var(--muted);
}
.pcsp-about .pcsp-trust-stars {
    font-size: 1rem;
}
@media (max-width: 600px) {
    .pcsp-about .pcsp-trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Sektionen: konsistenter vertikaler Rhythmus */
.pcsp-section + .services,
.services + .process-section-2026,
.process-section-2026 + section,
section + .services,
.services + .services,
.services + .faq-section,
.faq-section + .cta-pcb {
    margin-top: var(--space-xl) !important;
}

/* Services Wrapper: max-width und Padding */
.services {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* Services Head: Layout */
.services-head {
    text-align: center !important;
    margin-bottom: var(--space-lg) !important;
}
.services-sub {
    max-width: 60ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Über uns Sektion */
.pcsp-about {
    margin-top: var(--space-2xl);
    padding: var(--space-xl) var(--content-padding);
    border-top: 1px solid var(--border);
}
.pcsp-about-inner {
    max-width: 70ch;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.8;
}
.pcsp-about-logo {
    display: block;
    width: 100px;
    height: auto;
    margin: 0 auto var(--space-md);
    border-radius: 16px;
}
.pcsp-about-inner h2 {
    color: var(--text);
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-align: center;
}
.pcsp-about-inner p + p {
    margin-top: var(--space-sm);
}

/* Glossar (DefinedTermSet sichtbar) */
.glossary-list {
    margin: var(--space-md) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-md) var(--space-lg);
    text-align: left;
}
.glossary-list dt {
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0.25rem;
    min-width: 0;
}
.glossary-list dd {
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.55;
    min-width: 0;
}

/* Garantie Banner */

/* Trust-Leiste unter Hero */
.pcsp-trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    padding: 1.25rem var(--content-padding);
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.pcsp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text-secondary);
    white-space: nowrap;
}
a.pcsp-trust-item:hover {
    color: var(--text);
}
.pcsp-trust-item strong {
    color: var(--text);
    font-weight: 700;
}
/* Google Stern neben der Zahl */
.pcsp-about .pcsp-trust-item:first-child strong {
    color: #FBBF24;
}
@media (max-width: 480px) {
    .pcsp-trust-bar {
        gap: 0.75rem 1.5rem;
        font-size: 0.8rem;
    }
}

/* Fachbereiche Schnellzugriff vor FAQ */
.pcsp-quicknav {
    max-width: var(--content-width);
    margin: var(--space-2xl) auto 0 !important;
    padding: 0 var(--content-padding) var(--space-lg) !important;
    border-top: none !important;
}
.pcsp-quicknav-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--space-xl);
    font-size: var(--fs-sm);
}
.pcsp-quicknav-heading {
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-xl);
    letter-spacing: -0.02em;
}
.pcsp-quicknav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.pcsp-quicknav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pcsp-quicknav-item:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.pcsp-quicknav-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.25);
}
.pcsp-quicknav-icon svg {
    width: 24px;
    height: 24px;
}
.pcsp-quicknav-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pcsp-quicknav-title {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}
.pcsp-quicknav-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.pcsp-quicknav-item,
.pcsp-quicknav-item:visited {
    color: var(--text);
}
.pcsp-quicknav-arrow {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}
.pcsp-quicknav-item:hover .pcsp-quicknav-arrow {
    transform: translateX(5px);
}
@media (max-width: 900px) {
    .pcsp-quicknav-grid { grid-template-columns: 1fr; }
}

/* Kontaktseite: 4er Grid */
.pcsp-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
.pcsp-contact-grid .pcsp-quicknav-item {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}
.pcsp-contact-grid .pcsp-quicknav-text {
    align-items: center;
}
@media (max-width: 900px) {
    .pcsp-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .pcsp-contact-grid { grid-template-columns: 1fr; }
}
.pcsp-contact-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 500px) {
    .pcsp-contact-grid--2col { grid-template-columns: 1fr; }
}

/* Fachbereich direkt unter Hero — kein Abstand */
.pcsp-section--tight {
    margin-top: 0 !important;
}

/* ============================================================
   SO ARBEITEN WIR — Vertikale Timeline
   ============================================================ */
.pcsp-steps {
    padding: var(--space-xl) var(--content-padding);
    max-width: var(--content-width);
    margin: var(--space-2xl) auto 0;
    border-top: 1px solid var(--border);
}
.pcsp-steps-inner {
    max-width: var(--content-width-text);
    margin: 0 auto;
}
.pcsp-steps-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 var(--space-xs);
}
.pcsp-steps-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-xl);
    line-height: 1.7;
}
.pcsp-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Verbindungslinie links */
.pcsp-steps-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), rgba(var(--accent-rgb), 0.15));
    border-radius: 2px;
}

.pcsp-step {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    position: relative;
}
.pcsp-step + .pcsp-step {
    border-top: 1px solid var(--border);
}

/* Nummern-Kreis */
.pcsp-step-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
    position: relative;
    z-index: 1;
}

.pcsp-step-content {
    flex: 1;
    padding-top: 0.25rem;
}
.pcsp-step-content h3 {
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.pcsp-step-content p {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}
.pcsp-step-content a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.pcsp-step-content a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .pcsp-step {
        gap: var(--space-md);
    }
    .pcsp-step-num {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }
    .pcsp-steps-list::before {
        left: 21px;
    }
}

/* Section-Titel Startseite */
.pcsp-section-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    text-align: center;
    margin: 0 0 var(--space-lg);
}

/* Weitere Reparaturangebote */
.pcsp-more-services {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: 0;
    border-top: none;
}
.pcsp-more-services > p {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.pcsp-more-services-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pcsp-more-services-links a {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pcsp-more-services-links a:hover {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.3);
    background: var(--card-elevated);
}

/* FAQ auf Startseite: max-width und Padding */
.faq-section {
    max-width: var(--content-width);
    margin: var(--space-2xl) auto 0 !important;
    padding: var(--space-xl) var(--content-padding) !important;
    border-top: 1px solid var(--border);
}

/* CTA Section: volle Breite, Accent-Gradient */
.cta-pcb {
    background: transparent !important;
    border-top: 1px solid var(--border);
}

/* Process section: volle Breite, Border oben */
.process-section-2026 {
    border-top: 1px solid var(--border);
}

/* Responsive Fixes Startseite */
@media (max-width: 600px) {
    .pcsp-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-md) !important;
    }
    .pcsp-fb-cta {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 400px) {
    .pcsp-stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   END HOMEPAGE REDESIGN
   ============================================================ */

/* === FULL-WIDTH LAYOUT === */
.pcsp-section {
    width: 100%;
    max-width: var(--content-width);
    margin: var(--space-xl) auto 0;
    padding: 0 var(--content-padding);
}
.pcsp-two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.pcsp-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.pcsp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}
.pcsp-stats-row strong {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--accent-light);
    line-height: 1;
}
.pcsp-stats-row span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 4px;
}
@media (max-width: 768px) {
    .pcsp-three-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .pcsp-two-col { grid-template-columns: 1fr; }
    .pcsp-stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}

/* === FACHBEREICH CARDS (Startseite) — Premium Redesign === */
.pcsp-fachbereich {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease;
}

/* Radial glow — immer leicht sichtbar, bei Hover stärker */
.pcsp-fachbereich::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 300px at 20% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Accent-Linie oben */
.pcsp-fachbereich::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    border-radius: 0 0 4px 0;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.3));
    opacity: 0.6;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    z-index: 2;
}

.pcsp-fachbereich:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: #2C3040;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(var(--accent-rgb), 0.15),
        0 0 60px rgba(var(--accent-rgb), 0.08);
}
.pcsp-fachbereich:hover::before {
    background: radial-gradient(400px 300px at 20% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%);
}
.pcsp-fachbereich:hover::after {
    width: 100%;
    opacity: 0.9;
}

/* Bild oben in der Card — großzügig */
.pcsp-fb-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.pcsp-fb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcsp-fb-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 40%, var(--card) 100%);
    pointer-events: none;
}
.pcsp-fachbereich:hover .pcsp-fb-img img {
    transform: scale(1.08);
}

/* Icon-Box im Fachbereich */
.pcsp-fb-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: -36px 0 1.25rem 2rem;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.65) 100%);
    color: #fff;
    box-shadow:
        0 10px 28px rgba(var(--accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    z-index: 1;
}
.pcsp-fb-icon svg {
    width: 32px;
    height: 32px;
}
.pcsp-fachbereich:hover .pcsp-fb-icon {
    transform: scale(1.1) rotate(-4deg);
    box-shadow:
        0 14px 36px rgba(var(--accent-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pcsp-fachbereich h3 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    padding: 0 2rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.pcsp-fachbereich p {
    position: relative;
    z-index: 1;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    padding: 0 2rem;
}
/* Unterer Bereich der Card — Bullets + CTA als eigener Block */
.pcsp-fachbereich ul {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 1rem 2rem 0;
    margin: auto 0 0;
    display: grid;
    gap: 0;
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pcsp-fachbereich ul li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: color 0.2s ease;
}
.pcsp-fachbereich ul li:last-child {
    border-bottom: none;
}
.pcsp-fachbereich ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.3);
    border: 2px solid var(--accent);
    transition: background 0.25s ease, transform 0.25s ease;
}
.pcsp-fachbereich:hover ul li::before {
    background: var(--accent);
    transform: translateY(-50%) scale(1.1);
}
.pcsp-fachbereich:hover ul li {
    color: var(--text);
}

/* CTA-Button — volle Breite, Footer der Card */
.pcsp-fb-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.85));
    transition: background 0.25s ease, gap 0.25s ease, filter 0.25s ease;
}
.pcsp-fb-cta::after {
    content: "\2192";
    font-size: 1.1em;
    transition: transform 0.25s ease;
}
.pcsp-fachbereich:hover .pcsp-fb-cta {
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    filter: brightness(1.1);
    gap: 14px;
}
.pcsp-fachbereich:hover .pcsp-fb-cta::after {
    transform: translateX(4px);
}

.pcsp-fb-label {
    display: inline-block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}
@media (max-width: 767.98px) {
    .pcsp-fachbereich { padding: 0; }
    .pcsp-fb-img { height: 150px; }
    .pcsp-fb-icon { width: 56px; height: 56px; margin: -28px 0 1rem 1.25rem; }
    .pcsp-fb-icon svg { width: 24px; height: 24px; }
    .pcsp-fachbereich h3,
    .pcsp-fachbereich p { padding: 0 1.25rem; }
    .pcsp-fachbereich ul { padding: 0.5rem 1.25rem 0; }
    .pcsp-fb-cta { padding: 12px 1.25rem; }
}
@media (max-width: 600px) {
    .pcsp-fachbereich h3 { font-size: 1.05rem; }
}

/* Featured Fachbereich (Elektronik, volle Breite, leicht heller = Blickfang) */
.pcsp-fb-featured {
    border-left: 3px solid var(--accent);
    background: var(--card-elevated) !important;
}
.pcsp-fb-featured:hover {
    border-color: var(--accent-light);
    box-shadow: 0 0 20px rgba(85, 128, 194, 0.1), var(--shadow-md);
}
.pcsp-fb-featured-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: start;
}
.pcsp-fb-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    text-align: center;
    min-width: 200px;
}
.pcsp-fb-stats strong {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--accent-light);
    line-height: 1;
}
.pcsp-fb-stats span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 4px;
}
@media (max-width: 767.98px) {
    .pcsp-fb-featured-grid {
        grid-template-columns: 1fr;
    }
    .pcsp-fb-stats {
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--border);
        padding-top: var(--space-md);
        min-width: 0;
    }
}

/* ============================================================
   DEAKTIVIERTE EFFEKTE
   Alle Scroll-Reveal-Animationen, Partikel, Typing, Glow etc.
   Alles sofort sichtbar — kein versteckter Content.
   ============================================================ */
#pcsp-particles { display: none !important; }
.typing-cursor { border-right: none !important; animation: none !important; }
[data-typing] { min-height: auto !important; }

.hero-cta,
.hero-glow,
.hero-badge,
.hero-animated-line,
.hero-features,
.hero-stats { display: none !important; }

/* ALLE Reveal/Animation-Klassen: sofort sichtbar, keine Verzögerung */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur,
.blur-reveal,
.stagger > *,
.reveal-stagger > *,
.svc-bento .svc-card,
.svc-showcase .svc-showcase-text,
.svc-showcase .svc-showcase-visual,
.svc-showcase-features li,
.svc-showcase-text .btn,
.text-reveal span,
.hero-title,
.hero-sub,
.hero-actions a,
.kpi,
[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* Abstand zwischen Sektionen */
.rr-process-section,
.svc-showcase,
.highlights-strip,
.services,
.process-section-2026,
.pcsp-about,
.faq-section,
.cta-pcb {
    margin-top: var(--space-2xl) !important;
}

:root{
    /* ===== 2026 PREMIUM DESIGN SYSTEM ===== */

    /* Layout — zentrale Container für ALLE Seiten */
    --content-width: 1400px;
    --content-width-text: 800px;
    --content-width-narrow: 520px;
    /* Inner padding for sections — responsive: 16px mobile, scales to 32px desktop. */
    --content-padding: clamp(16px, 3vw, 32px);

    /* Typography - Inter Variable Font */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    --font-display: 'Inter', var(--font-sans);
    
    /* Font Weights (Variable Font) */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    
    /* Fluid Typography Scale - Enhanced 2026 */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
    --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --fs-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --fs-5xl: clamp(2.75rem, 2rem + 3.5vw, 4rem);
    --fs-hero: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
    
    /* Spacing Scale */
    --space-2xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.1875rem);
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-3xl: clamp(4rem, 3rem + 6vw, 8rem);
    
    /* Colors - Dark Refined */
    --bg: #1A1D24;
    --bg-subtle: #1E2129;
    --card: #242830;
    --card-elevated: #2A2E38;
    --text: #E3E5EA;
    --text-secondary: #8A92A2;
    --muted: #6B7280;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.15);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 32px 72px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(74, 144, 226, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.25);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;

    /* Warnung / wichtiger Hinweis.
       Bisher gab es dafuer kein Token - die einzige Warnvariante im Projekt
       (.kp-orders-alert--warn) setzt #c49000 auf dunklem Grund und bleibt
       damit unter den geforderten 4,5:1. Die Werte hier sind gegen --bg
       (#1A1D24) und die getoente Flaeche gemessen:
         --warn        auf --warn-surface  = 7,4:1   (Text und Ueberschrift)
         --warn        auf --bg            = 10,1:1  (Randbalken, Symbol)
         --text        auf --warn-surface  = 9,8:1   (Fliesstext)
       Farbe ist nirgends das einzige Merkmal: Ueberschrift und Warnsymbol
       tragen die Aussage auch ohne sie. */
    --warn: #FBBF24;
    --warn-rgb: 251, 191, 36;
    --warn-surface: #39342C;
    --warn-border: rgba(251, 191, 36, 0.38);

    /* Fehler / etwas ist schiefgegangen.
       Dasselbe Muster wie die Warnung eine Zeile darueber, und aus demselben
       Grund angelegt: es gab kein Token dafuer. Fehlermeldungen des Portals
       standen bis zum 14.09.2026 im blauen Erfolgskasten (Befund R2).
       Gemessen gegen --bg (#1A1D24) und die getoente Flaeche (WCAG 2.1,
       relative Leuchtdichte; nachgerechnet am 14.09.2026):
         --fehler      auf --fehler-surface = 5,11:1  (Text und Ueberschrift)
         --fehler      auf --bg             = 6,10:1  (Randbalken, Symbol)
       Beide liegen ueber den geforderten 4,5:1 fuer Fliesstext.
       Der Unterschied zur Warnung ist ausdruecklich gewollt: Gelb heisst
       "sieh hin", Rot heisst "es hat nicht geklappt". Farbe ist auch hier
       nicht das einzige Merkmal - der Kasten traegt ein Warnzeichen im Text
       und role="alert" im Markup. */
    --fehler: #F87171;
    --fehler-rgb: 248, 113, 113;
    --fehler-surface: #3A2626;
    --fehler-border: rgba(248, 113, 113, 0.42);

    /* Primary: Deep Blue */
    --accent: #2563EB;
    --accent-hover: #3B82F6;
    --accent-active: #1D4ED8;
    --accent-strong: #3B82F6;
    --accent-light: #60A5FA;
    --accent-contrast: #ffffff;
    --accent-rgb: 37, 99, 235;
    --accent-soft: rgba(85, 128, 194, 0.12);
    --accent-softer: rgba(85, 128, 194, 0.06);
    --focus: rgba(85, 128, 194, 0.30);
    --focus-ring: 0 0 0 3px rgba(85, 128, 194, 0.25);

    /* CTA: gleiche Farbe wie Accent (einheitlich) */
    --cta: var(--accent);
    --cta-hover: var(--accent-hover);
    --cta-rgb: var(--accent-rgb);

    /* Cards - solid dark */
    --glass-bg: rgba(36, 40, 48, 0.95);
    --glass-bg-soft: rgba(36, 40, 48, 0.90);
    --glass-bg-strong: rgba(36, 40, 48, 0.98);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.04);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --glass-blur: 0px;
    --glass-blur-strong: 0px;
    --glass-highlight: none;
    --glass-sat: 1;
    --glass-bright: 1;
    --page-bg: #181B22;

    /* Hero */
    --hero-bg:
        radial-gradient(ellipse 900px 300px at 20% -10%, rgba(74, 144, 226, 0.06), transparent 70%),
        linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);

    /* Buttons */
    --btn-bg: var(--accent);
    --btn-text: #ffffff;
    --btn-border: var(--accent);
    --btn-font: var(--font-sans);
    --btn-shadow: 0 2px 8px rgba(85, 128, 194, 0.2);
    --btn-shadow-hover: 0 4px 16px rgba(85, 128, 194, 0.3);

    /* Transitions */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-instant: 0.08s;
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Aliases (legacy compat — same values as canonical vars) */
    --bg-primary: var(--bg);
    --text-primary: var(--text);
    --fg: var(--text);

    /* Body-background ambient gradients (kept transparent: no animation) */
    --bg-anim-1: transparent;
    --bg-anim-2: transparent;
    --bg-anim-3: transparent;

    /* Gradient Effects - minimal */
    --gradient-border: linear-gradient(135deg, var(--accent), var(--accent-light));
    --gradient-text: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    --gradient-glow: none;
    --gradient-mesh: none;

    --noise-opacity: 0;
}

/* ===== LOADING OVERLAY & SPINNER ===== */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 12, 0.85);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, visibility;
    transform: translateZ(0);
}

.loading-overlay.active,
.loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    position: relative;
    width: 56px;
    height: 56px;
    transform: translateZ(0);
    will-change: transform;
}

.loading-spinner::before,
.loading-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    will-change: transform;
}

.loading-spinner::before {
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    animation: spinner-rotate 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-spinner::after {
    inset: 8px;
    border-bottom-color: rgba(var(--accent-rgb), 0.5);
    border-left-color: rgba(var(--accent-rgb), 0.5);
    animation: spinner-rotate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

.loading-content {
    text-align: center;
    margin-top: 1.25rem;
    transform: translateZ(0);
}

.loading-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}

.loading-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
    min-height: 1.4em;
    transition: opacity 0.2s ease;
}

.loading-dots {
    display: inline-block;
    letter-spacing: 2px;
    animation: loading-dots-fade 1.5s ease-in-out infinite;
}

@keyframes loading-dots-fade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Progress Bar for Loading */
.loading-progress {
    width: 180px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1rem;
}

.loading-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--accent), #007a3d, var(--accent));
    background-size: 200% 100%;
    border-radius: 3px;
    animation: loading-progress-anim 1.8s ease-in-out infinite;
    will-change: width, margin-left;
    transform: translateZ(0);
}

@keyframes loading-progress-anim {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 50%;
        margin-left: 25%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* ===== ENHANCED GLOBAL ANIMATIONS ===== */

/* Smooth page load fade-in */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.5);
    }
}

/* Animation Helper Classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-slide-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-slide-left {
    animation: slideInLeft 0.5s ease-out forwards;
}

.animate-slide-right {
    animation: slideInRight 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

.animate-glow {
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Stagger delays for lists */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Animate main content on load */
main.card {
    animation: none;
}

/* Service cards enhanced hover */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-4px);
}

.service-card:hover .service-media img {
    transform: scale(1.08);
}

.service-media {
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.service-media img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effects enhanced */
.btn-2026,
.rr-btn {
    position: relative;
    overflow: hidden;
}

.btn-2026::before,
.rr-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-2026:hover::before,
.rr-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Form inputs enhanced focus */
input:focus,
select:focus,
textarea:focus {
    transition: all 0.3s ease;
}

/* Link hover underline animation */
.content a, .services-grid a, .footer-link {
    position: relative;
}

.content a:not(.btn):not(.btn-2026):not(.rr-btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.content a:not(.btn):not(.btn-2026):not(.rr-btn):hover::after {
    width: 100%;
}

/* Hero badge pulse */
.hero-badge {
    animation: pulse-soft 3s ease-in-out infinite;
}

/* Pulse dot animation */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: pulse-ring 2s ease-out infinite;
}

/* Icon hover rotate */
.service-card:hover svg,
.rr-process-step:hover svg {
    animation: icon-wiggle 0.5s ease;
}

@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ===== GRADIENT TEXT EFFECT ===== */
.gradient-text {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blinkender Cursor für Typing-Effekt */
.typing-cursor {
    border-right: 2px solid var(--accent);
    animation: typing-blink 0.7s step-end infinite;
}

@keyframes typing-blink {
    0%, 100% { border-color: var(--accent); }
    50% { border-color: transparent; }
}

/* =====================================================
   2026 PREMIUM HERO SECTION (Compact & Clean)
   ===================================================== */
.hero--2026 {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px);
    margin-bottom: var(--space-md);
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact Variant für Unterseiten */
.hero--2026.hero--compact {
    padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px);
    margin-bottom: var(--space-sm);
}

.hero--2026 .hero-glow {
    display: none;
}

@keyframes hero-glow-pulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 0.2;
    }
    50% { 
        transform: translateX(-50%) scale(1.05);
        opacity: 0.35;
    }
}

.hero--2026 .hero-mesh {
    display: none;
}

.hero--2026 .hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-width-text);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero--2026 .hero-content {
    text-align: center;
}

.hero--2026 .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    backdrop-filter: none;
    margin-bottom: var(--space-md);
    box-shadow: none;
}

.hero--2026 .hero-badge svg {
    width: 14px;
    height: 14px;
}

.hero--2026 .hero-inner {
    gap: var(--space-xs);
}

.hero--2026 .hero-headline {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-xs);
    color: var(--text);
}

.hero--2026 .hero-highlight {
    color: var(--accent);
    position: relative;
}

.hero--2026 .hero-description {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto var(--space-md);
    text-align: center;
}

.hero--2026 .hero-sub {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.hero-animated-line {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--accent);
    text-align: center;
    margin: 0 auto var(--space-md);
    min-height: 2em;
    letter-spacing: 0.02em;
}

.hero--2026 .hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.hero--2026 .hero-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text);
    backdrop-filter: blur(8px);
    transition: all var(--transition-smooth);
}

.hero--2026 .hero-feature svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.hero--2026 .hero-feature:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.hero--2026 .hero-feature:hover svg {
    color: var(--accent-contrast);
}

.hero--2026 .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: 0;
}

/* ─── Hero Contact Row (Tel + WhatsApp) ─── */
.hero-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.hero-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color .25s ease;
    letter-spacing: .01em;
}

.hero-contact-link:hover {
    color: var(--accent);
}

.hero-contact-link svg {
    flex-shrink: 0;
    opacity: .7;
    transition: opacity .25s ease;
}

.hero-contact-link:hover svg {
    opacity: 1;
}

.hero-contact-link--wa:hover {
    color: #25d366;
}

.hero-contact-link--wa:hover svg {
    fill: #25d366;
}

.hero-contact-divider {
    color: var(--border);
    font-size: var(--fs-sm);
    user-select: none;
}

.hero--2026 .btn-lg {
    padding: 18px 32px;
    font-size: var(--fs-base);
}

.hero--2026 .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.hero--2026 .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero--2026 .stat-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: -0.02em;
}

.hero--2026 .stat-label {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.hero--2026 .stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* Hero 2026 Responsive */
@media (max-width: 767.98px) {
    .hero--2026 {
        padding: clamp(30px, 6vw, 50px) clamp(16px, 4vw, 30px);
        min-height: auto;
        border-radius: var(--radius-lg);
    }
    
    .hero--2026 .hero-content {
        text-align: center;
    }
    
    .hero--2026 .hero-cta {
        justify-content: center;
    }
    
    .hero--2026 .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .hero--2026 .stat-item {
        align-items: center;
        min-width: 80px;
    }
    
    .hero--2026 .stat-divider {
        display: none;
    }
    
    .hero--2026 .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .hero--2026 .hero-cta {
        flex-direction: column;
    }
    
    .hero--2026 .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero--2026 .hero-badge {
        font-size: var(--fs-xs);
        padding: 0;
    }
}

/* ===== PAGE HEADER (Service Pages) ===== */
.page-header {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--hero-bg);
    box-shadow: var(--shadow-lg);
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    opacity: 0.4;
    pointer-events: none;
}

.page-header > * {
    position: relative;
    z-index: 1;
}

.page-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    backdrop-filter: blur(10px);
}

.page-header-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-black);
    line-height: 1.1;
    margin: 0 0 var(--space-md);
    letter-spacing: -0.03em;
}

.page-header-sub {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    line-height: 1.6;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

/* Extended Page Header (with KPI Pills) */
.page-header-extended .page-header-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

.kpi-pill {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.6em 1.2em;
    font-size: var(--fs-sm);
    color: var(--muted);
    backdrop-filter: blur(8px);
}

.kpi-pill strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* Service Page Main */
.service-page .services {
    margin-top: 0;
}

/* ===== ENHANCED HERO (Home/Kontakt/Reparaturen) ===== */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    display: none;
}

@keyframes hero-glow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    100% { transform: translate(5%, -5%) scale(1.15); opacity: 0.6; }
}

.hero-inner {
    position: relative;
    z-index: 1;
}

.hero-pill {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5em 1.2em;
    border-radius: 100px;
    margin-bottom: var(--space-md);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    animation: pill-glow 3s ease-in-out infinite alternate;
}

*{ box-sizing:border-box; }

/* Global word-wrap safety: long German compounds & URLs cannot cause overflow */
html, body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body{
    margin:0;
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-optical-sizing: auto;
    background: transparent;
    color:var(--text);
    min-height:100vh;
    line-height:1.55;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* ===============================
   Premium Glass Surfaces
   =============================== */
.site-header,
nav.site-nav,
.kp-login-card,
.kp-card:not(.kp-card-dashboard),
.kp-card-dashboard,
.order-card,
.rr-section,
.rr-kv-card,
.rr-check-item,
.rr-upload-item,
.legal-section{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* main.card – kein Glas, transparent für Partikel-Hintergrund */
body:not(.kp-portal) main.card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-header,
    nav.site-nav,
    .nav-link,
    .nav-toggle,
    .kp-login-card,
    .kp-card:not(.kp-card-dashboard),
    .kp-card-dashboard,
    .order-card,
    .rr-section,
    .rr-kv-card,
    .rr-check-item,
    .rr-upload-item,
    .legal-section{
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    }
}

@media (prefers-reduced-motion: reduce){
    body::before,
    body::after{
        animation: none !important;
    }
}

.wrap{ width:100%; max-width: var(--content-width); margin:0 auto; padding:16px clamp(0.75rem, 2vw, 1.5rem) 28px; position:relative; z-index:1; }

header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:0;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

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

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.brand img{
    max-width: 56px;
    height: auto;
    display:block;
    border-radius: 12px;
}

.brand-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    white-space: nowrap;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

nav.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items: center;
    justify-content:flex-end;
}

.nav-link{
    display:inline-flex;
    align-items:center;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    text-decoration:none;
    color:var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover{
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.06);
}

.nav-link.is-active {
    color: var(--accent);
    font-weight: var(--fw-semibold);
}

/* CTA-Link im Header */
.nav-link--cta {
    background: var(--accent);
    color: #fff !important;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.nav-link--cta:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
    color: #fff !important;
}

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

main.card{
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

footer.site-footer{
    margin-top: var(--space-2xl);
    padding: var(--space-xl) 0 var(--space-xl);
    border-top: 1px solid var(--border);
    color:var(--muted);
    font-size: var(--fs-sm);
}

/* ===============================
   Header 2026 – Clean, open, no card
   =============================== */
:root {
    --hdr-accent: var(--accent);
    --hdr-accent-soft: rgba(var(--accent-rgb), .15);
    --hdr-shadow: rgba(0, 0, 0, .08);
    --page-bg: var(--bg, #f0f4f8);
}

html {
    background: var(--page-bg) !important;
}
body {
    background: transparent !important;
    overscroll-behavior-y: auto;
}
.wrap {
    background-color: transparent !important;
}

/* Animated background layer (subtle glass blur) */
body::before {
    content: "";
    position: fixed;
    inset: -20% -10% -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 520px at 15% 10%, var(--bg-anim-1), transparent 60%),
        radial-gradient(900px 480px at 85% 0%, var(--bg-anim-2), transparent 62%),
        radial-gradient(1200px 640px at 50% 120%, var(--bg-anim-3), transparent 65%);
    filter: blur(55px) saturate(130%);
    opacity: 1;
    animation: pcsp-bg-float 36s ease-in-out infinite alternate;
    transform: translateZ(0);
}

/* Additional subtle sheen for a premium feel */
body::after {
    content: "";
    position: fixed;
    inset: -10% -10% -10% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 680px at 50% -10%, rgba(255,255,255,0.55), transparent 65%),
        radial-gradient(900px 520px at 80% 110%, rgba(0, 66, 37, 0.12), transparent 70%);
    opacity: 0.9;
    animation: pcsp-bg-sheen 40s ease-in-out infinite alternate;
}

@keyframes pcsp-bg-sheen {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -1.2%, 0) scale(1.02); }
}

@keyframes pcsp-bg-float {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(0, -1.5%, 0) scale(1.03); }
    100% { transform: translate3d(0, 1.5%, 0) scale(1.05); }
}

/* Header – no card, no glass, just clean */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: box-shadow .3s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Sticky: subtle bg on scroll */
.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header.is-sticky.is-scrolled {
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.04);
}

/* Hide on scroll */
.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;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius);
    transition: opacity .2s ease;
}
.site-header .brand a:hover { opacity: 0.8; }
.site-header .brand a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.site-header .brand img {
    max-height: 48px;
    width: auto;
    height: auto;
    border-radius: 10px;
}

/* Navigation links – clean, minimal */
.site-header .site-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
    transition: color .2s ease, background .2s ease;
}
.site-header .site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.site-header .site-nav .nav-link:hover {
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.05);
}
.site-header .site-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.site-header .site-nav .nav-link:active {
    transform: scale(.98);
}
.site-header .site-nav .nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.site-header .site-nav .nav-link.is-active {
    color: var(--accent);
    font-weight: var(--fw-semibold);
}
.site-header .site-nav .nav-link.is-active::after {
    transform: scaleX(1);
}

/* CTA button in nav */
.site-header .site-nav .nav-link--cta {
    background: var(--accent);
    color: #fff !important;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    margin-left: 4px;
}
.site-header .site-nav .nav-link--cta::after { display: none; }
.site-header .site-nav .nav-link--cta:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Toggle button */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5: minimum 44x44 px touch target */
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--text);
    padding: 8px;
    cursor: pointer;
    transition: background .2s ease;
}
.nav-toggle:hover {
    background: rgba(var(--accent-rgb), 0.08);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

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

    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; }
    .brand-name { display: none; }

    /* 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(--bg);
        overflow: auto;
        -webkit-overflow-scrolling: touch;

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

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

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

    /* Links zentriert */
    #main-nav.site-nav .nav-link {
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: min(520px, 92vw);
        min-height: 48px;
        padding: clamp(.65rem, 2.2vh, .95rem) clamp(.9rem, 4vw, 1.2rem);
        font-size: clamp(1rem, 2.2vh, 1.06rem);
        color: var(--text);
        border-radius: var(--radius);
    }
    #main-nav.site-nav .nav-link:hover {
        background: rgba(var(--accent-rgb), 0.06);
    }
    #main-nav.site-nav .nav-link::after { display: none; }

    /* CTA im Mobile-Menü */
    #main-nav.site-nav .nav-link--cta {
        margin-top: var(--space-sm);
        background: var(--accent);
        color: #fff !important;
        border-radius: var(--radius-full);
        font-weight: var(--fw-semibold);
    }

    /* Close-Button */
    #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: var(--radius-full);
        background: var(--accent);
        border: none;
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
        transition: transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    #main-nav.site-nav .nav-close:hover {
        transform: scale(1.08);
    }
    #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 */
@media (min-width: 901px) {
    .nav-brand-mobile,
    .nav-close { display: none !important; }

    #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: 4px !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:var(--content-width-narrow);
    margin:32px auto 64px;
    padding:0 16px;
}

.kp-login-card{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

/* Legacy Login Markup: .kp-card darf NICHT das Dashboard treffen */
.kp-card:not(.kp-card-dashboard){
    max-width:var(--content-width-narrow);
    margin:32px auto 64px;
    padding:22px 18px;
    border-radius:16px;
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

.kp-logo{ display:block; width:92px; height:auto; margin:0 auto 14px; }
.kp-title{ margin:0 0 8px; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height:1.2; text-align:center; color:var(--text); letter-spacing: -0.02em; }
.kp-subtitle{ margin:0 0 16px; font-size: var(--fs-sm); font-weight: var(--fw-regular); opacity:.85; text-align:center; color:var(--muted); }

.kp-alert{ border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin:10px 0 12px; font-size: var(--fs-sm); }
.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-page .kp-login-card input,
.kp-login-card input,
.kp-card:not(.kp-card-dashboard) input,
.kp-login-page .kp-login-card select,
.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 var(--glass-border);
    border-radius:12px;
    font-size:15px;
    outline:none;
    background:color-mix(in srgb, var(--glass-bg) 75%, var(--card));
    color:var(--text);
}

/* 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); }

.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); }

.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
   =============================== */
@media (max-width: 720px){
}

/* ===============================
   Kundenportal Dashboard Design
   =============================== */
.kp-page{
    width:100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding:20px var(--content-padding);
}

.kp-card-dashboard{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border-radius:14px;
    box-shadow:var(--glass-shadow);
    padding:26px 24px 22px;
    border:1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.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;
}
.orders-grid--col{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.orders--spaced{ margin-top:24px; }

.order-card{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border-radius:14px;
    border:1px solid var(--glass-border);
    padding:12px 14px 10px;
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

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

.order-header .order-dhl-wrap{
    width:100%;
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed var(--border);
    display:flex;
    justify-content:flex-start;
}

.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);
}

.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);
}

.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.
   ACHTUNG: Dieses Portal ist ein DUNKLES Thema (--card #242830, die Seite
   setzt <meta name="color-scheme" content="dark">). Der frueher hier
   stehende Wert --muted:#444444 stammt aus einer hellen Vorlage und ergab
   auf dunklem Grund 1,52:1 - wer "mehr Kontrast" einschaltete, konnte
   gedaempften Text praktisch nicht mehr lesen. Bei einem dunklen Thema muss
   gedaempfter Text HELLER werden, nicht dunkler. */
@media (prefers-contrast: more){
    /* Beide Stufen mit anheben, sonst kippt die Rangfolge: --muted saesse
       sonst bei 8,79:1 ueber --text-secondary mit unveraenderten 4,72:1, und
       gedaempfter Text waere auffaelliger als sekundaerer. */
    :root{
        --muted:#C2C8D2;           /*  8,79:1 auf --card */
        --text-secondary:#D6DBE3;  /* 10,63:1 auf --card */
        --border:#c2c2c2;          /*  8,30:1 */
    }
    }

/* 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: 720px){
    .kp-page{ padding:14px 10px; }
    .kp-card-dashboard{ padding:18px 14px 16px; }
    .kp-title-block h1{ font-size:18px; }
    .kp-title-block p{ font-size:12px; }
    .kp-logo{ max-width:50px; }
}

@media (max-width: 520px){
    .kp-header{ flex-direction:column; align-items:stretch; gap:10px; }
    .kp-header-left{ gap:10px; }
    .kp-header-right{
        flex-direction:row; justify-content:space-between; align-items:center; width:100%;
        gap:8px; flex-wrap:wrap;
    }
    .kp-user-chip{ font-size:11px; padding:5px 10px; }
    .kp-logo{ max-width:44px; }
    .kp-page{ padding:10px 6px !important; }
    .kp-card-dashboard{ padding:14px 10px 12px; border-radius:10px; }
    .orders-section-title{ font-size:15px; }
    .kp-session-timer{ font-size:10px; }
    /* Legacy doc items */
    .kp-doc-item{ padding:10px; }
    .kp-doc-meta{ flex-wrap:wrap; gap:6px; }
    .kp-doc-preview{ height:50vw; min-height:200px; }
    .kp-doc-actions a{
        display:block; width:100%; text-align:center;
        padding:10px; min-height:44px;
    }
}

@media (max-width: 380px){
    .kp-page{ padding:6px 4px !important; }
    .kp-card-dashboard{ padding:10px 8px 8px; }
    .kp-header-right{ flex-direction:column; align-items:stretch; }
    .kp-user-chip{ text-align:center; }
}

/* === HERO (aus index.php) === */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    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 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
    background: var(--accent, #1a4f8b);
    color: var(--accent-contrast);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: 
        transform var(--duration-normal) var(--ease-out), 
        box-shadow var(--duration-normal) var(--ease-smooth), 
        filter var(--duration-fast) ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Button shimmer effect */
a.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.15) 45%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.15) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out);
    z-index: 1;
}

a.btn:hover::after {
    transform: translateX(100%);
}

a.btn.btn-primary{
    background: var(--accent, #1a4f8b);
    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.btn-ghost::after {
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(var(--accent-rgb), 0.08) 45%,
        rgba(var(--accent-rgb), 0.15) 50%,
        rgba(var(--accent-rgb), 0.08) 55%,
        transparent 60%
    );
}

a.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,.24);
    filter: brightness(1.05);
}

a.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    filter: brightness(.96);
    transition-duration: var(--duration-fast);
}

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

/* === 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 (2026 – var-basiert, wie Kontaktseite) */
.rr-field input[type=text],
.rr-field input[type=email],
.rr-field input[type=tel],
.rr-field textarea{
    width:100%;
    padding:10px 14px;
    min-height:44px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}
.rr-field select{
    width:100%;
    padding:10px 40px 10px 14px;
    min-height:44px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}

/* Selects: Chevron-Pfeil */
.rr-field select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    line-height:1.2;
    font:inherit;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:18px;
}
.rr-field select::-ms-expand{display:none;}

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

/* Dark-Mode: Dropdown Optionen lesbar */

/* 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:14px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(var(--accent-rgb),.03)}
.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 (max-width: 480px){
    .rr-upload-item{grid-template-columns:48px 1fr;gap:8px}
    .rr-upload-thumb{width:48px;height:36px}
    .rr-upload-remove{grid-column:1/-1;justify-self:end}
}
.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)}
.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, #1a4f8b);
    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)}

/* 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}

.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)}

.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)}
.rr-check-item:hover{background:rgba(255,255,255,.05)}

/* 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, #1a4f8b);
    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 (max-width:720px){.rr-row.two{grid-template-columns:1fr}}

/* Signatur */
.rr-sign-wrap{margin-top:10px}
#rr-signature{width:100%;height:200px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);touch-action:none}
.rr-sign-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ===== Reparatur-Prozess Sektion ===== */
.rr-process-section {
    margin: 3rem auto 3.5rem;
    padding: 2.5rem var(--content-padding);
    max-width: var(--content-width);
    position: relative;
    border-radius: 0;
    background: transparent;
    border: none;
    overflow: hidden;
}

.rr-process-section::before {
    display: none;
}

.rr-process-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.rr-process-title {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--text) 50%, var(--accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 4s ease-in-out infinite;
}

@keyframes shimmer-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.rr-process-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

.rr-process-subtitle::before {
    content: none;
}

.rr-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Verbindungslinie zwischen den Schritten */
.rr-process-grid::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(var(--accent-rgb), 0.3) 10%, 
        rgba(var(--accent-rgb), 0.3) 90%, 
        transparent 100%
    );
    z-index: 0;
}

@media (max-width: 900px) {
    .rr-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rr-process-grid::before {
        display: none;
    }
}

@media (max-width: 540px) {
    .rr-process-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .rr-process-section {
        padding: 2rem 1rem;
        margin: 2rem 0;
    }
}

.rr-process-step {
    position: relative;
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.rr-process-step:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.rr-process-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.7) 100%);
    color: var(--accent-contrast);
    box-shadow: 
        0 8px 24px rgba(var(--accent-rgb), 0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rr-process-step:hover .rr-process-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 
        0 12px 32px rgba(var(--accent-rgb), 0.45),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.rr-process-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 800;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.rr-process-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    color: var(--text-primary);
}

.rr-process-step p {
    font-size: 0.92rem;
    opacity: 0.8;
    margin: 0;
    line-height: 1.55;
}

.rr-process-info {
    max-width: 70ch;
    margin: 2.5rem auto 0;
    position: relative;
    z-index: 1;
}

.rr-info-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.06);
}

.rr-info-card svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.rr-info-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rr-info-card a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ===== Formular-Sektion Header (2026 – Kontakt-Stil) ===== */
.rr-form-section {
    margin-top: 2.5rem;
    scroll-margin-top: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px 24px;
    max-width: var(--content-width-text);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

/* Sektions-Trenner im Formular */
.rr-section-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-light);
    padding-top: var(--space-lg);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
}
.rr-section-label:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.rr-form-section::before {
    content: '';
    position: absolute;
    inset: -80px;
    background: radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb), .10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.rr-form-section > * { position: relative; z-index: 1; }

.rr-form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.rr-form-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), .12);
    border-radius: 12px;
    color: var(--accent);
}

.rr-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 2px;
}

.rr-form-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.rr-form-subtitle {
    font-size: 13px;
    opacity: .6;
    margin: 2px 0 0;
    line-height: 1.4;
}

/* 2026: Labels */
.rr-form-section .rr-field label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: .01em;
}

/* 2026: Inputs & Textareas */
.rr-form-section .rr-field input[type=text],
.rr-form-section .rr-field input[type=email],
.rr-form-section .rr-field input[type=tel],
.rr-form-section .rr-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

/* 2026: Selects mit Chevron-Pfeil */
.rr-form-section .rr-field select {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: border-color .2s, box-shadow .2s;
}

/* 2026: Focus */
.rr-form-section .rr-field input:focus,
.rr-form-section .rr-field textarea:focus,
.rr-form-section .rr-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}

/* 2026: Sektionen im Formular */
.rr-form-section .rr-section {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(var(--accent-rgb), .03);
    padding: 16px;
}

/* 2026: Alerts */
.rr-form-section .rr-alert {
    border-radius: 10px;
    font-size: 13px;
    padding: 12px 14px;
}
.rr-form-section .rr-alert-error {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.3);
}
.rr-form-section .rr-alert-ok {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.3);
}

/* 2026: Buttons */
.rr-form-section .rr-actions {
    margin-top: 20px;
}
.rr-form-section .rr-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .rr-form-section {
        padding: 20px 16px 18px;
    }
    .rr-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ===== PIN/OTP Input Boxes (Apple Style) ===== */
.otp-input-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.otp-input-box {
    width: 52px;
    height: 64px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    caret-color: var(--accent);
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.otp-input-box::-webkit-outer-spin-button,
.otp-input-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.otp-input-box:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 
        0 0 0 4px rgba(var(--accent-rgb), 0.15),
        0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.otp-input-box.filled {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.otp-input-box.error {
    border-color: #ff4444;
    background: rgba(255,68,68,0.08);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Responsive für kleinere Screens */
@media (max-width: 400px) {
    .otp-input-container {
        gap: 0.35rem;
    }
    .otp-input-box {
        width: 44px;
        height: 56px;
        font-size: 1.5rem;
        border-radius: 10px;
    }
}
@media (max-width: 360px) {
    .otp-input-container {
        gap: 0.2rem;
    }
    .otp-input-box {
        width: 36px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 8px;
    }
}

/* Hidden combined input for form submission */
.otp-hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* OTP Section Styling */
.otp-section {
    text-align: center;
    padding: 1.5rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    margin: 1rem 0;
}

.otp-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.otp-section-subtitle {
    font-size: 0.92rem;
    opacity: 0.75;
    margin: 0 0 1rem;
}

.otp-phone-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.otp-phone-display svg {
    width: 18px;
    height: 18px;
}

/* 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);
}

/* 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);
}

/* 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 */

/* ===== 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;
}

/* ===== 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);
  }
  
  .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 */

/* --- 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);
}

/* 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);
}

/* 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-layout.kp-admin-layout--fullwidth{
    grid-template-columns: 1fr;
}

.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);
}

.kp-admin-sidebar-tools{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.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);
}

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

.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);
}

.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-card.kp-admin-main-card--fullwidth{
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.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;
}

.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);
}

.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;
}
.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-file-input{
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--card);
    font-size: 13px;
    color: var(--text);
}
.kp-file-input::file-selector-button{
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--accent-rgb),0.35);
    border-radius: 10px;
    background: rgba(var(--accent-rgb),0.12);
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}
.kp-file-input::file-selector-button:hover{
    background: rgba(var(--accent-rgb),0.2);
}

.kp-doc-type{
    color: var(--text);
    font-weight: 700;
}
.kp-doc-num{
    color: var(--text);
    opacity: 0.75;
    font-weight: 700;
    margin-left: 6px;
}

.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);
}

.order-card li.kp-doc-item{
    flex-direction: column;
    align-items: stretch;
}

.kp-doc-meta{
    display: flex;
    align-items: center;
    gap: 6px;
}

.kp-doc-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kp-doc-actions a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.kp-doc-actions a:hover{ background: rgba(var(--accent-rgb),0.22); }

.kp-doc-preview{
    margin-top: 8px;
    border: 1px solid #e6ece9;
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 50vh;
    min-height: 300px;
    background: #f8faf9;
}
.kp-doc-preview iframe,
.kp-doc-preview embed,
.kp-doc-preview object {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.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);
}

/* 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%;
    }
    .order-card li.kp-doc-item{
        padding: 12px;
    }
    .kp-doc-actions{
        width: 100%;
    }
    .kp-doc-actions a{
        flex: 1 1 100%;
    }
    .kp-doc-preview{
        height: 60vh;
        min-height: 250px;
    }
    /* Admin tabs/filters mobile */
    .kp-admin-tabs{
        flex-wrap:wrap !important;
    }
    .kp-admin-tabs .rr-btn{
        flex:1 1 calc(50% - 4px); text-align:center; font-size:12px; min-height:40px;
    }
    .kp-orders-filters{
        gap:4px;
    }
    .kp-orders-filters .rr-btn{
        font-size:10px !important; padding:4px 8px !important; min-height:32px;
    }
    /* Orders table */
    .kp-orders-table{ font-size:11px; }
    .kp-orders-table th{ padding:6px 6px; font-size:10px; }
    .kp-orders-table td{ padding:6px; }
    .kp-orders-table .kp-td-date{ font-size:10px; }
    /* Detail panel */
    .kp-order-detail{ padding:12px 10px; }
    .kp-order-detail-grid{ grid-template-columns:1fr; }
    .kp-order-status-btns{ gap:4px; }
    .kp-order-status-btns .rr-btn{ font-size:11px; padding:6px 10px; min-height:40px; flex:1 1 calc(50% - 4px); }
    /* Waiting cards */
    .kp-orders-waiting-card{ flex-direction:column; align-items:flex-start; gap:8px; }
    .kp-orders-waiting-actions{ width:100%; }
    .kp-orders-waiting-actions .rr-btn{ flex:1; text-align:center; }
}

/* ===============================
   Admin Dashboard – Reparatur-PDF-Grid (responsive)
   =============================== */

/* ── Orders / Aufträge View ── */
.kp-orders-alert{
    margin:0 0 14px;
    padding:16px;
    border-radius:8px;
    font-size:14px;
}
.kp-orders-alert--warn{
    background:rgba(255,193,7,.15);
    border:1px solid rgba(255,193,7,.35);
    color:#c49000;
}
.kp-orders-alert--success{
    background:rgba(var(--accent-rgb),.12);
    border:1px solid rgba(var(--accent-rgb),.25);
    color:var(--accent);
}

/* Befund R2 (14.09.2026): bis heute trugen ALLE Rueckmeldungen die Klasse
   --success, auch "Ungueltiger Status-Uebergang" und "Das Etikett konnte
   nicht angelegt werden". Ein Fehler sah aus wie ein Erfolg.

   Die Farbe ist dabei nur die halbe Miete: sie darf nicht der einzige
   Unterschied sein (WCAG 1.4.1). Deshalb traegt der Fehlerkasten zusaetzlich
   ein Warnzeichen im Text und role="alert" im Markup - sichtbar, hoerbar,
   und auch bei Farbenblindheit unterscheidbar.

   Der Farbwert ist derselbe, den das Portal schon fuer Kritisches benutzt
   (--fehler, gleich darunter definiert), damit es im Haus EINE Farbe fuer
   "da stimmt etwas nicht" gibt und nicht drei. */
/* Der Kundenname im Auftragskopf fuehrt in die Kundenakte (Befund KA2).
   Er sieht aus wie Text und verraet sich erst beim Zeigen - ein blauer
   Verweis mitten in der Kopfzeile wuerde die Zeile zerreissen, und die
   Zeile traegt die drei Angaben, auf die man zuerst sieht. */
.kp-auftrag-kopf-kunde{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(var(--accent-rgb), .5);
}
.kp-auftrag-kopf-kunde:hover,
.kp-auftrag-kopf-kunde:focus-visible{
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.kp-orders-alert--fehler{
    background:var(--fehler-surface);
    border:1px solid var(--fehler-border);
    color:var(--fehler);
    font-weight:600;
}

.kp-orders-filters{
    display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;
}

/* Erwartete-Geräte Box */
.kp-orders-section{
    margin:0 0 20px;
}
.kp-orders-section-title{
    margin:0 0 10px; font-size:15px; font-weight:700; color:var(--muted);
}
.kp-orders-grid{
    display:grid; gap:8px;
}
.kp-orders-waiting-card{
    display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
}
.kp-orders-waiting-info{ flex:1; min-width:0; }
.kp-orders-waiting-nr{ font-weight:700; color:var(--text); }
.kp-orders-waiting-name{ color:var(--text-secondary); margin-left:8px; }
.kp-orders-waiting-device{ color:var(--muted); margin-left:6px; }
.kp-orders-waiting-date{ color:var(--muted); margin-left:6px; font-size:12px; }
.kp-orders-waiting-actions{ display:flex; gap:6px; }

/* Auftrags-Tabelle */
.kp-orders-table{
    width:100%; border-collapse:collapse; font-size:13px;
}
.kp-orders-table thead tr{
    background:var(--card-elevated);
    border-bottom:2px solid var(--border-strong);
}
.kp-orders-table th{
    padding:8px 10px; text-align:left; white-space:nowrap;
    color:var(--text-secondary); font-weight:600; font-size:12px;
}
.kp-orders-table th:last-child{ text-align:center; }
.kp-orders-table tbody tr{
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition: background .15s;
}
.kp-orders-table tbody tr:hover{
    background:rgba(var(--accent-rgb),.06);
}
.kp-orders-table tbody tr.is-selected{
    background:rgba(var(--accent-rgb),.14);
}
.kp-orders-table td{
    padding:8px 10px; color:var(--text);
}
.kp-orders-table td:last-child{ text-align:center; }
.kp-orders-table .kp-td-nr{ white-space:nowrap; font-weight:700; }
.kp-orders-table .kp-td-sub{ font-size:11px; color:var(--muted); }
.kp-orders-table .kp-td-device{ color:var(--text-secondary); }
.kp-orders-table .kp-td-date{ white-space:nowrap; color:var(--text-secondary); font-size:12px; }
.kp-orders-table .kp-td-empty{
    padding:20px; text-align:center; color:var(--muted);
}

/* Status-Badge */
/* Das Statusabzeichen.
   color:#fff ist nur noch der RUECKFALL fuer Abzeichen ohne eigene Angabe
   (Widerruf, Sonderfaelle mit fester dunkler Flaeche). Die Staende aus dem
   Katalog bringen ihre Schriftfarbe seit dem 14.09.2026 selbst mit, berechnet
   aus der Helligkeit ihrer Flaeche - siehe status_schriftfarbe() in
   src/status_catalog.php und Befund O1.
   KEIN !important: sonst koennte die berechnete Farbe nicht durch. */
.kp-status-badge{
    display:inline-block; padding:3px 8px; border-radius:12px;
    font-size:11px; font-weight:700; color:#fff;
}

/* Zahlung */
.kp-pay-ok{ color:#28a745; font-weight:700; }
.kp-pay-pending{ color:#ffc107; }
.kp-pay-none{ color:var(--muted); }

/* Detail-Panel */
.kp-order-detail{
    margin:20px 0;
    padding:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
}
.kp-order-detail-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;
}
.kp-order-detail-title{
    margin:0; font-size:16px; font-weight:700; color:var(--text);
}
/* "Zur Liste" (Entscheidung 7): EIN Knopf, EINE Zeile, Pfeil und Text
   nebeneinander, oben rechts. Vorher steckte hier noch das 32x32-Kaestchen
   des alten Schliesskreuzes - der Text brach darin um, der Pfeil stand ueber
   den Woertern und am Handy lag alles ueber "seit N Tagen". */
.kp-order-detail-close{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:8px;
    font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
    color:var(--text-secondary); background:var(--card-elevated); border:1px solid var(--border);
    text-decoration:none; cursor:pointer; flex-shrink:0; transition:background .15s,color .15s;
    min-height:34px;
}
.kp-order-detail-close:hover{
    background:rgba(37,99,235,.14); color:#2563EB;
}
.kp-order-detail-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:8px; margin:0 0 14px;
}
.kp-order-detail-label{
    font-weight:600; color:var(--text-secondary); font-size:12px;
}
.kp-order-detail-value{
    color:var(--text); font-size:13px;
}

/* Collapsible Sections (<details>) */
.kp-detail-section{
    margin:0 0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.kp-detail-summary{
    padding:10px 14px;
    font-weight:700;
    font-size:13px;
    color:var(--text);
    background:var(--card-elevated);
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    user-select:none;
    transition:background .15s;
}
.kp-detail-summary::-webkit-details-marker{ display:none; }
.kp-detail-summary::before{
    content:'▶';
    font-size:10px;
    color:var(--muted);
    transition:transform .2s;
    flex-shrink:0;
}
.kp-detail-section[open] > .kp-detail-summary::before{
    transform:rotate(90deg);
}
.kp-detail-summary:hover{
    background:rgba(var(--accent-rgb),.1);
}
.kp-detail-section > *:not(summary){
    padding:12px 14px;
}
.kp-detail-section .kp-order-detail-grid{
    margin:0;
}
.kp-detail-section .kp-order-innerbox{
    margin:8px 0 0;
}
.kp-detail-pdf-wrap{
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    margin-top:4px;
}

/* Document Card (inside detail) */
.kp-order-doc-card{
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    background:var(--card-elevated);
}
.kp-order-doc-card .kp-order-doc-row{
    border:0; border-radius:0; margin:0;
}
.kp-order-doc-card .kp-detail-pdf-wrap{
    border:0; border-top:1px solid var(--border);
    border-radius:0; margin:0;
}
.kp-order-doc-type-badge{
    padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; color:#fff;
}
.kp-order-doc-type--offer{ background:#fd7e14; }
.kp-order-doc-type--invoice{ background:#007bff; }
.kp-order-doc-type--credit{ background:#6f42c1; }
.kp-order-doc-type--reminder{ background:#dc3545; }
.kp-order-doc-type--voucher{ background:#20c997; }

/* Problembeschreibung / inne content box */
.kp-order-innerbox{
    margin:0 0 14px; padding:10px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:6px;
}
.kp-order-innerbox p{
    margin:4px 0 0; color:var(--text); font-size:13px; white-space:pre-wrap;
}

/* Verknüpfte Dokumente */
.kp-order-doc-row{
    padding:6px 10px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:6px;
    margin-bottom:4px;
    display:flex; align-items:center; gap:8px;
}
.kp-order-doc-nr{ font-weight:700; color:var(--text); }
.kp-order-doc-type{ color:var(--text-secondary); font-size:12px; }
.kp-order-doc-link{ color:var(--accent); font-size:12px; }

/* Status-Historie */
.kp-order-log-entry{
    padding:6px 10px;
    margin-bottom:4px;
    background:var(--card-elevated);
    border-left:3px solid var(--border);
}
.kp-order-log-status{ font-size:12px; font-weight:700; color:var(--text); }
.kp-order-log-time{ color:var(--muted); font-size:11px; margin-left:8px; }
.kp-order-log-by{ color:var(--muted); font-size:11px; margin-left:4px; }
.kp-order-log-note{ color:var(--text-secondary); font-size:11px; }

/* Status-Ändern Box */
.kp-order-status-change{
    margin:14px 0 0; padding:12px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:8px;
}
.kp-order-status-change-title{
    color:var(--text); font-size:13px; font-weight:700;
}
.kp-order-status-btns{
    display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}

/* Zahlungs-Banner */
.kp-order-pay-banner{
    margin-top:10px; padding:8px 12px; border-radius:6px;
}
.kp-order-pay-banner--ok{
    background:rgba(var(--accent-rgb),.12); color:var(--accent);
}
.kp-order-pay-banner--pending{
    background:rgba(255,193,7,.12); color:#c49000;
}

/* ── End Orders View ── */

/* ── Offer Decision Badges ── */
.kp-offer-badge{
    display:inline-block; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:600; color:#fff;
}
.kp-offer-badge--accepted{ background:#28a745; }
.kp-offer-badge--rejected{ background:#dc3545; }

/* ── Search Input ── */
.kp-search-input{
    flex:1; padding:9px 14px; border:1px solid var(--border); border-radius:8px;
    font-size:14px; outline:none; font-family:inherit;
    background:var(--card); color:var(--text);
}
.kp-search-input::placeholder{ color:var(--muted); }

/* ── Form Label ── */
.kp-form-label{
    display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px;
}

/* ── Pagination Info ── */
.kp-pagination-info{
    font-size:13px; color:var(--muted);
}

/* ── Info-Banner (shipped/tracking) ── */
.kp-status-banner--info{
    padding:12px; border-radius:8px; font-size:13px;
    background:rgba(0,180,216,.12); color:#0ea5e9;
}

.kp-repair-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    width: 100%;
}
@media (max-width: 920px) {
    .kp-repair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 520px) {
    .kp-repair-grid { grid-template-columns: 1fr; gap: 14px; }
}

.kp-repair-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kp-repair-card-preview {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    height: 280px;
    background: var(--card-elevated);
}
.kp-repair-card-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.kp-repair-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kp-repair-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.kp-repair-card-name {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.kp-repair-card-date {
    font-size: 12px;
    color: var(--muted);
}
.kp-repair-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.kp-repair-card-btn {
    flex: 1 1 100px;
    text-align: center;
    padding: 10px 8px !important;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Admin Dashboard – Pagination Buttons touch-friendly */
.kp-pagination-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kp-pagination-current {
    padding: 8px 14px;
    font-size: 13px;
    background: var(--text);
    color: var(--bg);
    border-radius: 8px;
    font-weight: 700;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   Admin Dashboard – Kunden-Uploads
   =============================== */

.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);
}

.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);
}

/* Upload-Popup – kompakte Karte */
.kp-upload-wrap{
    max-width: var(--content-width-text);
    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;
}

.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);
}

.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; }

.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;
}

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

.kp-upload-wrap{
  max-width: var(--content-width-text);
  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;
}

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

.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); }

.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);
}

.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;
}

.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;
}

.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;
}

.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;
}

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

.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 .service-card .btn-dark {
    margin: 4px 16px 16px;
    align-self: flex-start;
}

.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;
    width: 100%;
}

.hero-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hero-accent-text {
    background: var(--gradient-border);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    margin: 0 0 var(--space-md);
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    max-width: 65ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.home-hero .hero-inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-sm);
    animation: pill-glow 3s ease-in-out infinite;
}

@keyframes pill-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
    50% { box-shadow: 0 0 20px 2px rgba(var(--accent-rgb), 0.15); }
}

.why-grid {
    display: grid;
    gap: 16px;
}

.why-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(260px 160px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
    opacity: .4;
    transition: opacity .35s ease;
    pointer-events: none;
}

.why-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    border-radius: 0 0 3px 0;
    background: var(--accent);
    opacity: .4;
    transition: width .3s ease, opacity .3s ease;
}

.why-card:hover,
.why-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.03);
}

.why-card:hover::before,
.why-card:focus-within::before {
    opacity: .6;
}

.why-card:hover::after,
.why-card:focus-within::after {
    width: 100%;
    opacity: .6;
}

.why-card-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 12px;
    text-transform: none;
}

.why-card-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}
.why-card-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

.why-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.why-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    letter-spacing: -.01em;
}

.why-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.cta-strip {
    position: relative;
    margin: 32px 0 8px;
    padding: 22px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: none;
}

.cta-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(280px 160px at 85% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
    opacity: .5;
    pointer-events: none;
}

.cta-strip-inner {
    position: relative;
    z-index: 1;
}

.cta-strip-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-strip h2 {
    margin: 0 0 6px;
}

.cta-strip p {
    margin: 0;
    color: var(--muted);
}

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

@media (min-width: 900px) {
    .home-hero .hero-inner {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cta-strip-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* 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: var(--space-lg);
}

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

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

/* =====================================================
   2026 PREMIUM SERVICE CARDS
   ===================================================== */
.service-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 0;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Subtler Border Effect */
.service-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-lg) + 1px);
    background: var(--gradient-border);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--duration-slow) var(--ease-out);
    filter: blur(8px);
}

/* Minimal Overlay */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    z-index: 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

/* Hover State */
.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    border-color: rgba(var(--accent-rgb), 0.3);
    background: var(--card-elevated);
}

.service-card:hover::before,
.service-card:focus-within::before {
    opacity: 0.3;
}

.service-card:hover::after,
.service-card:focus-within::after {
    opacity: 0;
}

/* Active Card State */
.service-card.is-active {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.15);
    background: rgba(var(--accent-rgb), 0.04);
}

.service-card.is-active::before {
    opacity: 0.2;
}

.service-card.is-active::after { opacity: 0; }

.service-media {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
    overflow: hidden;
    border: 0;
    background: rgba(0,0,0,.06);
    aspect-ratio: 16 / 10;
    position: relative;
    z-index: 1;
}

.service-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);
    opacity: .35;
    pointer-events: none;
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    will-change: transform;
    transition: transform 0.65s var(--ease-out);
}

.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: var(--space-xs);
    padding: var(--space-md);
    flex: 1 1 auto;
    position: relative;
    color: var(--text-secondary);
    z-index: 1;
}

/* ── Service Icon Wrap (page-specific card icons) ── */
.service-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 0.5rem;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover .service-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.4);
}

.service-icon-wrap svg {
    width: 32px;
    height: 32px;
    transition: transform 0.4s ease;
}

.service-card:hover .service-icon-wrap svg {
    transform: scale(1.1);
}

.service-detail {
    font-size: 0.88rem;
    opacity: 0.55;
    font-style: italic;
}

.service-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    position: relative;
    color: var(--text);
    padding-bottom: var(--space-xs);
}

.service-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: var(--gradient-border);
    transition: width var(--duration-slow) var(--ease-out);
}

.service-card:hover .service-title::after,
.service-card.is-active .service-title::after {
    width: 60px;
}

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

.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);
}

/* ===================================
   Modern Scroll-Reveal Animations
   =================================== */

/* Base reveal state - starts hidden */
.reveal {
    opacity: 1;
    transform: none;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur { 
        opacity: 1; 
        transform: none; 
        filter: none;
        transition: none; 
    }
    .reveal-stagger > * { transition-delay: 0ms !important; }
    .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::before,
    .service-card:focus-within::before {
        opacity: 0;
    }
    .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);
    }

    /* Scroll-Active: Karte sichtbar hervorheben + Details einblenden */
    .service-card.is-active {
        transform: translateY(-3px);
        border-color: var(--accent-soft);
        box-shadow: var(--shadow-lg), var(--shadow-glow);
    }
    .service-card.is-active::before {
        opacity: 0.5;
    }
    .service-card.is-active .service-media img {
        transform: scale(1.04);
    }
    .service-card.is-active .service-details {
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 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 — deaktiviert (verursachte leere Flaechen) */

.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: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.contact-page > section{ margin-top: 16px; padding-left: var(--content-padding); padding-right: var(--content-padding); }
.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: 24px;
    height: 24px;
    min-width: 24px;
}

.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: 100%;
        padding: 0;
    }

    .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{ width:100%; max-width: none; margin: 0; padding: 0 var(--content-padding); }
.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; max-width:70ch; }
.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; }
/* Links auch im Light Mode gut sichtbar */
.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:8px;
    padding:6px 10px;
    background:var(--card);
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    font-size:12px;
}
.order-header .rr-pill.rr-pill-dhl .dhl-link{
    color:var(--text);
    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:800;
    color:var(--text);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-code{
    font-weight:800;
    background:rgba(var(--accent-rgb),0.12);
    padding:3px 8px;
    border-radius:999px;
    color:var(--accent);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy{
    appearance:none;
    border:0;
    cursor:pointer;
    padding:4px 8px;
    border-radius:999px;
    font-weight:800;
    background:rgba(var(--accent-rgb),0.16);
    color:var(--accent);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy:hover{ background:rgba(var(--accent-rgb),0.22); }
.order-header .rr-pill.rr-pill-dhl .dhl-copy:active{ transform:scale(0.98); }

/* ===== 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;
    position: relative;
    z-index: 1;
}
.site-footer { margin-top: auto; }

/* ─── FOOTER 2026 – Clean, open, no card ─── */
.site-footer {
    background: transparent;
    color: inherit;
    position: relative;
}

.site-footer,
.site-footer * {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Top divider */
.site-footer::before {
    display: none;
}

.footer-top {
    width: 100%;
    padding: 0 var(--content-padding) var(--space-lg);
    display: grid;
    grid-template-columns: 1.3fr 2.7fr;
    gap: var(--space-2xl);
    align-items: start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-logo {
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    font-size: var(--fs-xl);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-desc {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

.footer-contact-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-xs);
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}
.footer-contact-link:hover {
    color: var(--accent);
}
.footer-contact-link svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.footer-col { 
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    display: block;
    color: var(--text);
    opacity: 0.45;
}

/* Links – clean */
.footer-link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {
    color: inherit;
    text-decoration: none;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--muted);
    padding: 4px 0;
    position: relative;
    transition: color .2s ease;
}

.footer-link:hover { 
    color: var(--text);
}

.footer-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bottom bar */
.footer-bottom {
    width: 100%;
    padding: var(--space-lg) var(--content-padding);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-copy {
    font-size: var(--fs-xs);
    color: var(--muted);
    opacity: 0.6;
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .footer-brand {
        text-align: center;
        align-items: center;
    }
    .footer-desc {
        max-width: 360px;
        text-align: center;
    }
    .footer-contact-row {
        align-items: center;
    }
    
    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 520px) {
    .footer-nav { 
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-col {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--border);
    }
    
    .footer-col:last-child {
        border-bottom: none;
    }
    
    .footer-heading { 
        margin-bottom: var(--space-xs);
    }

    .footer-link {
        font-size: var(--fs-base);
        padding: 6px 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
}

/* ===== Cookie Banner ===== */
[hidden]{ display:none !important; }
:root{
  --kp-accent:var(--accent, #0b5ed7);
  --kp-overlay: rgba(0,0,0,.45);
    --kp-card: rgba(26, 29, 34, .78);
    --kp-text: rgba(255,255,255,.92);
    --kp-muted: rgba(255,255,255,.72);
    --kp-line: rgba(255,255,255,.12);
    --kp-rowhead: rgba(255,255,255,.06);
  --kp-radius: 18px;
}

.kp-cookie-backdrop{
  position:fixed;
  inset:0;
  background: var(--kp-overlay);
  z-index: 9998;
    backdrop-filter: blur(6px);
}
.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; padding-top: 120px; padding-bottom: 2rem; }

.kp-cookie-card{
  max-height: calc(100vh - 140px);
  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);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.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,
.btn-primary,
.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,
.btn-primary: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);
}

/* Outline/Ghost Buttons behalten ihr Aussehen */
.rr-btn-ghost,
.rr-btn-outline,
.btn-ghost,
.kp-cookie-btn:not(.kp-cookie-btn-primary) {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.rr-btn-ghost:hover,
.rr-btn-outline:hover,
.btn-ghost:hover,
.kp-cookie-btn:not(.kp-cookie-btn-primary):hover {
    background: rgba(var(--accent-rgb), 0.08) !important;
}

/* Delete Button bleibt rot */
.kp-btn-delete {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.kp-btn-delete:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
}

/* DHL Button bleibt gelb */
.kp-btn-dhl {
    background: #FFCC00 !important;
    color: #000 !important;
    border-color: #FFCC00 !important;
}
.kp-btn-dhl:hover {
    background: #e6b800 !important;
    border-color: #e6b800 !important;
}

/* WhatsApp behält eigene Farbe */
.btn-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border-color: #25D366 !important;
}
.btn-whatsapp:hover {
    background: #1da851 !important;
    border-color: #1da851 !important;
}

/* ===============================
     Header-Logo Gr&ouml;&szlig;en-Fix
     =============================== */
.site-header .brand img{
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px;
}
#main-nav.site-nav .nav-brand-mobile img{
    max-width: 160px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 14px;
}

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

/* ===============================
     Vor-Ort-Hilfe (Seitenstil)
   =============================== */

/* Die main.card ist der Container - Hero soll sich einfügen, keine eigene Card sein */
.vor-ort.card{
    padding: clamp(18px, 3vw, 32px);
}

.vor-ort .hero{
    /* Hero behält Hintergrund, aber ohne doppeltes Card-Styling */
    margin-bottom: clamp(18px, 3vw, 34px);
}

.vor-ort .hero-accent{
    display: none; /* Accent-Gradient im Card-Kontext nicht nötig */
}

.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 .checklist,
.vor-ort .text-panel{
    max-width: 100%;
    width: 100%;
}

.vor-ort .services{
    padding: 0;
}

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

.vor-ort .services + .services{
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: clamp(18px, 3vw, 32px);
    border-top: 1px solid var(--border);
}

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

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

.vor-ort .checklist{
    margin: 12px 0 0;
    padding-left: 0;
}

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

.vor-ort .lead-note{
    font-size:16.5px;
    opacity:1;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    padding:16px 18px;
    border-radius:14px;
    border: 1px solid var(--border);
    color: var(--text);
}

.vor-ort .quote-card{
    margin-top:22px;
    padding:22px 26px;
    border-radius:18px;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border:1px solid var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.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: color-mix(in srgb, var(--accent) 10%, var(--card));
    padding:16px 18px;
    border-radius:14px;
    border: 1px solid var(--border);
    color: var(--text);
}

.vor-ort .text-panel{
    margin-top:14px;
    padding:18px 18px 16px;
    border-radius:18px;
    background: var(--card);
    border:1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.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:var(--text);
}

.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, #1a4f8b);
    color:#fff;
    font-weight:700;
    font-size:14px;
}

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

@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; }
}

/* ===== Header Nav Links: Clean style ===== */
@media (min-width: 901px) {
    .site-header .site-nav .nav-link {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 6px 12px;
        border-radius: var(--radius);
    }
    .site-header .site-nav .nav-link:hover {
        background: rgba(var(--accent-rgb), 0.05) !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
    .site-header .site-nav .nav-link--cta {
        background: var(--accent) !important;
        padding: 8px 20px;
        border-radius: var(--radius-full) !important;
    }
    .site-header .site-nav .nav-link--cta:hover {
        background: color-mix(in srgb, var(--accent) 85%, #000) !important;
        box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2) !important;
    }
}

/* ===== Header: Remove rectangle around nav container ===== */
@media (min-width: 901px) {
    nav.site-nav,
    #main-nav.site-nav {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== Dark Mode Page Background Fix ===== */

/* ===== Header: Aktiver Nav-Link ===== */

/* ===== Fehler-Popup Modal ===== */
.rr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}
.rr-modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
    margin: auto;
}
@keyframes modalSlideIn {
    from { transform: translateY(-30px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.rr-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(220, 53, 69, 0.15);
}
.rr-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #dc3545;
}
.rr-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #dc3545;
}
.rr-modal-icon svg {
    width: 28px;
    height: 28px;
}
.rr-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}
.rr-modal-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}
.rr-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}
.rr-modal-footer .rr-btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rr-modal-footer .rr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ========================================
   Enhanced Responsive Design System
   ======================================== */

/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {
    :root {
        --space-md: 0.875rem;
        --space-lg: 1.25rem;
        --space-xl: 1.75rem;
    }
    
    .service-card {
        border-radius: 16px;
    }
    
    .service-media {
        aspect-ratio: 4 / 3;
        border-radius: 16px 16px 12px 12px;
    }
    
    .service-title {
        font-size: var(--fs-md);
    }
    
    .service-list {
        font-size: var(--fs-xs);
    }
}

/* Small devices (landscape phones, 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .service-card {
        border-radius: 18px;
    }
}

/* Medium devices (tablets, 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    
    .hero-title {
        font-size: var(--fs-3xl);
    }
}

/* Large devices (desktops, 992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .hero-title {
        font-size: var(--fs-4xl);
    }
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for mobile */
    a.btn {
        min-height: 48px;
        padding: 16px 24px;
    }
    
    /* Remove button shimmer on touch devices */
    a.btn::after {
        display: none;
    }
    
    /* Disable 3D tilt effects on touch */
    .service-card {
        --card-tilt: 0deg;
        --card-lift: -4px;
    }
    
    .service-card:hover,
    .service-card:focus-within {
        transform: translateY(var(--card-lift));
    }
}

/* High-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .service-media img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Orientation-specific adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        padding: var(--space-md);
        min-height: auto;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Print styles */
@media print {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .service-card::before,
    .service-card::after,
    a.btn::after {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ========================================
   EXTRA DESIGN UPGRADES 2024
   ======================================== */

/* Enhanced Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Smoother link transitions */
a {
    transition: color var(--duration-fast) var(--ease-smooth),
                opacity var(--duration-fast) var(--ease-smooth);
}

/* Enhanced section headings */
.services-title,
.section-title,
.panel-title {
    position: relative;
    display: inline-block;
}

.services-title::after,
.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-border);
    border-radius: 2px;
    opacity: 0.7;
}

.services-head .services-title::after,
.section-head .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Hero accent text shimmer */
.hero-accent-text {
    position: relative;
    color: var(--accent);
}

/* Card hover glow effect */
.service-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--gradient-border);
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity var(--duration-slow) var(--ease-smooth);
}

.service-card:hover::after,
.service-card:focus-within::after {
    opacity: 0.4;
}

/* Button micro-interactions */
a.btn:active,
button.btn:active {
    transform: scale(0.97) translateY(2px);
    transition-duration: 0.08s;
}

/* Text selection styling */
::selection {
    background: var(--accent-soft);
    color: var(--text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
    background-clip: content-box;
}

/* Page Header responsive */
@media (max-width: 575.98px) {
    .page-header {
        padding: var(--space-lg) var(--space-sm);
    }
    
    .page-header-title {
        font-size: var(--fs-2xl);
    }
    
    .page-header-sub {
        font-size: var(--fs-base);
    }
    
    .page-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-header-actions .btn {
        width: 100%;
        text-align: center;
    }
    
    .page-header-kpis {
        flex-direction: column;
    }
    
    .kpi-pill {
        width: 100%;
        text-align: center;
    }
}

/* Smooth page transitions */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    .gradient-text {
        animation: none;
    }
    
    .hero-pill {
        animation: none;
    }
    
    .hero::before {
        animation: none;
    }
}

/* Enhanced loading state */
.is-loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* =====================================================
   2026 PREMIUM DESIGN UPGRADES
   ===================================================== */

/* === PREMIUM NOISE TEXTURE OVERLAY === */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
}

/* Noise-Texture auf Mobile deaktivieren (GPU sparen) */
@media (max-width: 767.98px) {
    body::after { display: none; }
}

/* === 2026 PREMIUM BUTTONS === */
a.btn,
button.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--btn-shadow);
    transition: 
        transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-out),
        background var(--duration-fast) var(--ease-smooth);
}

a.btn:hover,
button.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--btn-shadow-hover);
    background: var(--accent-hover);
}

a.btn:active,
button.btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: var(--duration-instant);
}

/* Premium shimmer effect */
a.btn::before,
button.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s var(--ease-out);
}

a.btn:hover::before,
button.btn:hover::before {
    left: 100%;
}

/* Ghost Button Premium */
a.btn-ghost,
button.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

a.btn-ghost:hover,
button.btn-ghost:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* === 2026 COMPACT BUTTON SYSTEM (btn-2026) === */
.btn-2026 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-smooth);
}

.btn-2026 svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-2026--primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.btn-2026--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-2026--secondary {
    background: var(--glass-bg);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: blur(8px);
}

.btn-2026--secondary:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-2026--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-2026--ghost:hover {
    background: var(--glass-bg);
    color: var(--text);
}

.btn-2026--lg {
    padding: 12px 24px;
    font-size: var(--fs-base);
}

.btn-2026--lg svg {
    width: 18px;
    height: 18px;
}

/* === 2026 PREMIUM INPUTS === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--glass-bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: 
        border-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth),
        background var(--duration-fast) var(--ease-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background: var(--card);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

/* === 2026 PRINT OPTIMIZATION === */
@media print {
    body::after,
    .premium-mesh,
    .noise-overlay {
        display: none !important;
    }
    
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .no-print {
        display: none !important;
    }
}

/* === 2026 HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    :root {
        --glass-bg: var(--card);
        --glass-border: var(--border-strong);
        --accent-soft: rgba(var(--accent-rgb), 0.25);
    }
    
    .gradient-text {
        -webkit-text-fill-color: var(--accent);
        background: none;
    }
}

/* === 2026 REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .marquee-content {
        animation: none;
    }
    
    .float,
    .float-delayed {
        animation: none;
    }
}

/* ============================================
   2026 PREMIUM MOBILE OPTIMIZATIONS
   ============================================ */

/* === Mobile-First Base Resets === */
@media (max-width: 767.98px) {
    /* Fluid spacing scale for mobile */
    :root {
        --space-xs: 6px;
        --space-sm: 10px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-2xl: 48px;
        --space-3xl: 64px;
    }
    
    /* Optimized touch targets */
    .btn, .btn-2026, button, a.magnetic,
    input[type="submit"], input[type="button"] {
        min-height: 48px;
        padding-inline: 20px;
    }
    
    /* Better mobile typography */
    .hero-headline {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.15;
    }
    
    .hero-sub {
        font-size: var(--fs-base);
    }
    
    /* Stacked hero CTAs on mobile */
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }
    
    .hero-cta .btn-2026 {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero features wrap better */
    .hero-features {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .hero-feature {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero glow subtle on mobile for performance */
    .hero-glow {
        opacity: 0.3;
        filter: blur(60px);
    }
    
    /* Disable mesh on mobile for performance */
    .hero-mesh {
        display: none;
    }
    
    /* Simpler card hover on touch devices */
    .service-card,
    .card-2026 {
        transform: none !important;
    }
    
    .service-card:hover,
    .card-2026:hover {
        transform: translateY(-4px) !important;
    }
    
    /* Single column service grid */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Better mobile footer */
    footer {
        padding: var(--space-xl) var(--space-md);
    }
    
    /* Optimize header for mobile */
    .site-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    /* Reduce padding in sections */
    section.services,
    section.hero {
        padding-inline: var(--space-md);
    }
}

/* === Extra Small Devices (phones in portrait) === */
@media (max-width: 479.98px) {
    :root {
        --fs-5xl: 2rem;
        --fs-4xl: 1.75rem;
        --fs-3xl: 1.5rem;
    }
    
    .hero-headline {
        font-size: 1.875rem;
    }
    
    .hero-badge {
        font-size: 11px;
        padding: 0;
    }
    
    .btn-2026--lg {
        padding: 14px 24px;
        font-size: var(--fs-sm);
    }
    
    /* Stack stat items vertically */
    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    
    .stat-item {
        width: 100%;
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border);
    }
    
    .stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* === Landscape Phone Optimization === */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero--2026 {
        min-height: auto;
        padding-block: var(--space-xl);
    }
    
    .hero-headline {
        font-size: 2rem;
    }
    
    .hero-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .hero-cta .btn-2026 {
        width: auto;
        flex: 1 1 45%;
    }
}

/* === Tablet Optimizations === */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-cta {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* === Touch Device Optimizations === */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover-dependent effects on touch */
    .service-card::before,
    .card-2026::before {
        opacity: 0 !important;
    }
    
    /* Simpler button hover */
    .btn-2026:hover {
        transform: none;
    }
    
    .btn-2026:active {
        transform: scale(0.98);
    }
    
    /* Disable magnetic effect on touch */
    .magnetic {
        transform: none !important;
    }
    
    /* Ensure focus states are visible */
    .btn-2026:focus-visible,
    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
    }
}

/* === Safe Area Support (notch devices) === */
@supports (padding: max(0px)) {
    .site-header {
        padding-left: max(var(--space-md), env(safe-area-inset-left));
        padding-right: max(var(--space-md), env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }
    
    .hero-inner {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* === Performance Optimizations for Low-End Devices === */
@media (prefers-reduced-motion: reduce), 
       (update: slow) {
    .hero-glow,
    .hero-mesh {
        display: none;
    }
    
    .gradient-text {
        background: none;
        -webkit-text-fill-color: var(--accent);
        color: var(--accent);
    }
    
    .stagger {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .reveal-blur {
        filter: none;
        opacity: 1;
    }
    
    .reveal-blur.visible {
        filter: none;
    }
}
/* =====================================================
   NEUE KOMPONENTEN (FAQ, Chatbot, Trust-Stats, Timeline)
   hinzugefügt zur bestehenden Design-Basis
   ===================================================== */

/* ─── GLOBAL PARTICLES CANVAS (Vollbild) ─── */
.particles-fullpage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ─── TRUST / STATS ─── */
/* ─── HIGHLIGHTS STRIP ─── */
.highlights-strip {
    width: 100%;
    padding: var(--space-xl) var(--content-padding);
}
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    max-width: var(--content-width);
    margin: 0 auto;
}
.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-sm);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    transition: transform 0.35s var(--ease-smooth),
                box-shadow 0.35s var(--ease-smooth),
                border-color 0.35s ease;
}
.highlight-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
}
.highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}
.highlight-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}
.highlight-text {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--accent);
}
.highlight-sub {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}
@media (max-width: 420px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── SERVICE BENTO GRID (2026 Image Cards) ─── */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 14px;
    width: 100%;
    padding: 0 var(--content-padding);
}

/* Bento layout: featured card spans 2 cols, row 1 */
.svc-card--lg {
    grid-column: span 2;
    grid-row: span 2;
}
/* Wide card spans 2 cols */
.svc-card--wide {
    grid-column: span 2;
}

/* Stagger entrance */
.svc-bento .svc-card {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-bento.is-visible .svc-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.svc-bento.is-visible .svc-card:nth-child(1) { transition-delay: 0s; }
.svc-bento.is-visible .svc-card:nth-child(2) { transition-delay: 0.06s; }
.svc-bento.is-visible .svc-card:nth-child(3) { transition-delay: 0.12s; }
.svc-bento.is-visible .svc-card:nth-child(4) { transition-delay: 0.18s; }
.svc-bento.is-visible .svc-card:nth-child(5) { transition-delay: 0.24s; }
.svc-bento.is-visible .svc-card:nth-child(6) { transition-delay: 0.30s; }
.svc-bento.is-visible .svc-card:nth-child(7) { transition-delay: 0.36s; }
.svc-bento.is-visible .svc-card:nth-child(8) { transition-delay: 0.42s; }
.svc-bento.is-visible .svc-card:nth-child(9) { transition-delay: 0.48s; }

/* Card base */
.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Background image */
.svc-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.svc-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.5s ease;
}

/* Gradient overlay: dark at bottom for text readability */
.svc-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.04) 100%
    );
    transition: background 0.4s ease;
}

/* Badge (Spezialisierung) */
.svc-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

/* Content (bottom) */
.svc-card-content {
    position: relative;
    z-index: 2;
    padding: 20px 22px;
}
.svc-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.svc-card--lg .svc-card-title {
    font-size: var(--fs-2xl);
}
.svc-card-sub {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    letter-spacing: 0.02em;
}

/* Arrow icon */
.svc-card-arrow {
    position: absolute;
    bottom: 22px;
    right: 22px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease;
}
.svc-card-arrow svg {
    width: 18px;
    height: 18px;
}

/* ── Hover state ── */
.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(var(--accent-rgb), 0.25);
}
.svc-card:hover .svc-card-bg img {
    transform: scale(1.08);
}
.svc-card:hover .svc-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0.08) 100%
    );
}
.svc-card:hover .svc-card-arrow {
    opacity: 1;
    transform: translateX(0);
}
.svc-card:hover .svc-card-arrow:hover {
    background: var(--accent);
}

/* Focus visible for accessibility */
.svc-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .svc-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(200px, auto);
    }
    .svc-card--lg {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 280px;
    }
    .svc-card--wide {
        grid-column: span 2;
    }
}
@media (max-width: 580px) {
    .svc-bento {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .svc-card--lg,
    .svc-card--wide {
        grid-column: span 1;
    }
    .svc-card {
        min-height: 200px;
    }
    .svc-card--lg {
        min-height: 260px;
    }
}

/* ── Dark mode adjustments ── */

/* ── Light mode adjustments ── */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .svc-bento .svc-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-card-bg img {
        transition: none;
    }
    .svc-card-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── PLATINEN PROMO BANNER ─── */
/* .platinen-promo wurde entfernt – leerer Block verursachte fehlende } */

/* ─── PLATINEN PCB SECTION (Side-by-Side: Text + animated board) ─── */
.platinen-pcb {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: var(--space-xl) 0;
    padding: clamp(2.5rem, 6vw, 4rem) var(--content-padding);
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
}
.platinen-pcb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
/* Text column */
.platinen-pcb-text {
    max-width: 500px;
}
.platinen-pcb-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: var(--space-sm);
}
.platinen-pcb h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
    line-height: 1.15;
}
.platinen-pcb-text > p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
.platinen-pcb-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.platinen-pcb-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    color: var(--fg);
}
.pcb-feat-icon {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.pcb-feat-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 3;
}

/* Visual column: PCB board */
.platinen-pcb-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pcb-board {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.35));
}

/* ── Board component styles ── */
.pcb-b-trace {
    stroke: #c8956c;
    stroke-width: 1.8;
    fill: none;
    opacity: 0.55;
}
.pcb-b-cpu {
    fill: #1a1a2e;
    stroke: #c8956c;
    stroke-width: 1.2;
}
.pcb-bga-pads circle {
    fill: #c8956c;
    opacity: 0.5;
}
.pcb-b-ic {
    fill: #12122a;
    stroke: rgba(200,149,108,0.5);
    stroke-width: 0.8;
}
.pcb-b-pin {
    stroke: #c8956c;
    stroke-width: 1.2;
    opacity: 0.5;
}
.pcb-b-smd-r {
    fill: rgba(200,149,108,0.15);
    stroke: rgba(200,149,108,0.4);
    stroke-width: 0.8;
}
.pcb-b-elcap {
    fill: none;
    stroke: rgba(200,149,108,0.3);
    stroke-width: 1;
}
.pcb-b-elcap-inner {
    fill: rgba(200,149,108,0.06);
    stroke: rgba(200,149,108,0.15);
    stroke-width: 0.6;
}
.pcb-b-elcap-mark {
    stroke: rgba(200,149,108,0.2);
    stroke-width: 0.8;
}
.pcb-b-via {
    fill: rgba(200,149,108,0.2);
    stroke: rgba(200,149,108,0.35);
    stroke-width: 1;
}
.pcb-b-via-hole {
    fill: #0a3d2a;
}
.pcb-b-node {
    fill: rgba(200,149,108,0.6);
}
.pcb-b-silk {
    fill: rgba(255,255,255,0.45);
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.pcb-b-label {
    font-family: monospace;
}

/* LED Indicators */
.pcb-b-led--green {
    fill: #1aff6e;
    opacity: 0.9;
    animation: pcbLedBlink 2s ease-in-out infinite;
}
.pcb-b-led--amber {
    fill: #ffaa00;
    opacity: 0.6;
    animation: pcbLedBlink 1.2s ease-in-out infinite;
    animation-delay: 0.3s;
}
.pcb-b-led--red {
    fill: #ff3b3b;
    opacity: 0.3;
}
@keyframes pcbLedBlink {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.3; }
}

/* SMD Capacitors (ceramic, blue tint) */
.pcb-b-smd-c {
    fill: rgba(100,150,220,0.15);
    stroke: rgba(100,150,220,0.35);
    stroke-width: 0.6;
}

/* Inductors */
.pcb-b-inductor {
    fill: rgba(200,149,108,0.08);
    stroke: rgba(200,149,108,0.3);
    stroke-width: 1;
}

/* Thick traces (power bus) */
.pcb-b-trace--thick {
    stroke-width: 2.8;
    opacity: 0.7;
}

/* Antenna trace */
.pcb-b-trace--ant {
    stroke-width: 1;
    opacity: 0.4;
    stroke-dasharray: 3 2;
}

/* Animated data flow signals */
.pcb-b-signal {
    fill: var(--accent, #00bcd4);
    filter: url(#plGlow2);
    opacity: 0.9;
}
.pcb-b-signal--d1 { opacity: 0.75; }
.pcb-b-signal--d2 { opacity: 0.8; }
.pcb-b-signal--d3 { opacity: 0.7; }
.pcb-b-signal--d4 { opacity: 0.85; }
.pcb-b-signal--d5 { opacity: 0.7; }
.pcb-b-signal--d6 { opacity: 0.75; }
.pcb-b-signal--d7 { opacity: 0.65; }
.pcb-b-signal--d8 { opacity: 0.7; }
.pcb-b-signal--d9 { opacity: 0.6; }
.pcb-b-signal--d10 { opacity: 0.55; }
.pcb-b-signal--d11 { opacity: 0.6; }
.pcb-b-signal--d12 { opacity: 0.65; }
.pcb-b-signal--d13 { opacity: 0.5; }
.pcb-b-signal--d14 { opacity: 0.55; }

/* Pulsing glow on CPU & nodes */
.pcb-b-pulse {
    fill: rgba(var(--accent-rgb), 0.2);
    animation: pcbBoardPulse 3s ease-in-out infinite;
}
.pcb-b-pulse--d1 { animation-delay: 0.5s; }
.pcb-b-pulse--d2 { animation-delay: 1s; }
.pcb-b-pulse--d3 { animation-delay: 1.5s; }
.pcb-b-pulse--d4 { animation-delay: 2s; }
.pcb-b-pulse--d5 { animation-delay: 2.5s; }
.pcb-b-pulse--d6 { animation-delay: 0.8s; }
.pcb-b-pulse--d7 { animation-delay: 1.8s; }
.pcb-b-pulse--d8 { animation-delay: 2.2s; }
@keyframes pcbBoardPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(1.3); }
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .platinen-pcb-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .platinen-pcb-text {
        max-width: 100%;
    }
    .platinen-pcb-features {
        align-items: center;
    }
    .platinen-pcb-visual {
        order: -1;
    }
    .pcb-board {
        max-width: 380px;
    }
}

/* Light mode adjustments */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pcb-board { animation: none; }
    .pcb-b-pulse { animation: none; }
    .pcb-b-signal { display: none; }
    .pcb-b-led--green { animation: none; }
    .pcb-b-led--amber { animation: none; }
}

/* Test Points */
.pcb-b-tp {
    fill: rgba(200,149,108,0.15);
    stroke: #c8956c;
    stroke-width: 1;
}

/* Ferrite Beads */
.pcb-b-smd-fb {
    fill: rgba(160,160,160,0.15);
    stroke: rgba(160,160,160,0.4);
    stroke-width: 0.7;
}

/* ESD Protection Diodes */
.pcb-b-smd-d {
    fill: rgba(100,200,100,0.1);
    stroke: rgba(100,200,100,0.35);
    stroke-width: 0.7;
}

/* (Old process-timeline removed – replaced by process-section-2026) */
.section-sub {
    color: var(--muted);
    font-size: var(--fs-base);
    line-height: 1.7;
}

/* ─── FAQ SECTION ─── */
.faq-section {
    width: 100%;
    padding: var(--space-2xl) var(--content-padding);
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: var(--content-width-text);
    margin: 0 auto;
}
.faq-item {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
    margin-bottom: var(--space-xs);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.faq-item:hover {
    border-color: rgba(var(--accent-rgb), 0.25) !important;
    background: var(--card-elevated) !important;
}
.faq-item.is-open {
    border-color: rgba(var(--accent-rgb), 0.4) !important;
    background: var(--card-elevated) !important;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    gap: var(--space-md);
    user-select: none;
    -webkit-user-select: none;
    color: var(--text);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.5;
}
.faq-question::after {
    content: '+';
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    color: var(--accent);
    transition: transform 0.25s var(--ease-smooth);
    flex-shrink: 0;
}
.faq-item.is-open .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-smooth);
    padding: 0 var(--space-lg);
}
.faq-answer-inner {
    padding-bottom: var(--space-lg);
    color: var(--text-secondary) !important;
    line-height: 1.7;
    font-size: var(--fs-sm);
}
.faq-question {
    color: var(--text) !important;
}
.faq-answer a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── CHATBOT ─── */
#pcsp-chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg), 0 0 30px rgba(var(--accent-rgb), 0.25);
    z-index: 9990;
    transition: all 0.25s var(--ease-spring);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
}
#pcsp-chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-xl), 0 4px 30px rgba(var(--accent-rgb), 0.4);
}
#pcsp-chatbot-toggle.is-open .chatbot-icon-chat { display: none; }
#pcsp-chatbot-toggle.is-open .chatbot-icon-close { display: block; }
#pcsp-chatbot-toggle:not(.is-open) .chatbot-icon-close { display: none; }

#pcsp-chatbot-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 520px;
    background: var(--card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.25s var(--ease-out);
}
#pcsp-chatbot-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chatbot-header {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chatbot-header h3 {
    color: var(--accent-contrast);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
}
.chatbot-header-sub {
    font-size: var(--fs-xs);
    opacity: 0.85;
}
.chatbot-close {
    color: var(--accent-contrast);
    font-size: 1.3rem;
    opacity: 0.8;
    transition: opacity 0.25s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.chatbot-close:hover { opacity: 1; }

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 280px;
    scroll-behavior: smooth;
}
.chatbot-msg {
    display: flex;
    max-width: 85%;
    animation: chatbot-msg-in 0.3s var(--ease-out);
}
@keyframes chatbot-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chatbot-msg--bot { align-self: flex-start; }
.chatbot-msg--user { align-self: flex-end; }
.chatbot-msg-bubble {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.5;
    word-break: break-word;
}
.chatbot-msg--bot .chatbot-msg-bubble {
    background: var(--bg-subtle);
    border-bottom-left-radius: 4px;
}
.chatbot-msg--user .chatbot-msg-bubble {
    background: var(--accent);
    color: var(--accent-contrast);
    border-bottom-right-radius: 4px;
}
.chatbot-msg--bot .chatbot-msg-bubble a {
    color: var(--accent);
    text-decoration: underline;
}
.chatbot-typing .typing-dots span {
    animation: typing-bounce 1.2s infinite;
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
}
.chatbot-typing .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.chatbot-input {
    display: flex;
    border-top: 1px solid var(--border);
    padding: var(--space-sm);
    gap: var(--space-sm);
}
.chatbot-input input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg);
    outline: none;
    font-size: var(--fs-sm);
    color: var(--text);
    transition: border-color 0.25s;
}
.chatbot-input input:focus {
    border-color: var(--accent);
}
.chatbot-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
}
.chatbot-send:hover {
    background: var(--accent-hover);
}

/* Quick-Reply Buttons */
.chatbot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 10px 8px;
    animation: qr-fadein 0.3s ease;
}

@keyframes qr-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chatbot-qr-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.chatbot-qr-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.03);
}

@media (max-width: 640px) {
    #pcsp-chatbot-panel {
        right: 8px;
        left: 8px;
        bottom: 80px;
        width: auto;
    }
}

/* =====================================================
   LESBARKEIT – LIGHT & DARK MODE
   Semi-transparente Hintergründe für Text über Partikeln
   ===================================================== */

/* Hero-Text: kein Hintergrund, keine Kachel */
.hero--2026 .hero-inner {
    background: none;
    padding: var(--space-xl) var(--space-lg);
    border-radius: 0;
}

/* Section-Heads: clean, kein Glaseffekt */
.section-head {
    position: relative;
    z-index: 2;
    padding: var(--space-md);
    text-align: center;
    background: transparent;
}

/* =====================================================
   2026 SECTION HEADERS – Clean, Bold, No Background Box
   ===================================================== */
.section-head-2026 {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--space-md);
    margin-bottom: var(--space-xl);
    background: none;
}

.section-kicker {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.section-title-2026 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin: 0.25em 0 0.4em;
    max-width: var(--content-width-text);
    margin-left: auto;
    margin-right: auto;
}

.section-sub-2026 {
    font-size: var(--fs-base);
    color: var(--muted);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

.section-title {
    color: var(--text);
    text-shadow: none;
}

/* Why-Cards: transparent */
.why-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:not(.kp-portal) .why-card {
    background: transparent;
}

/* CTA-Strip: transparent */
.cta-strip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:not(.kp-portal) .cta-strip {
    background: transparent;
}

/* Process-Timeline: 2026 Card Grid */
.process-section-2026 {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--space-2xl) var(--content-padding);
}

.process-grid-2026 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    counter-reset: process-counter;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1100px) {
    .process-grid-2026 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .process-grid-2026 { grid-template-columns: repeat(2, 1fr); }
}

.process-card-2026 {
    position: relative;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    background: rgba(var(--accent-rgb), 0.02);
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
}

.process-card-2026:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.process-card-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.35);
    z-index: 2;
}

.process-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-sm);
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}
.process-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}

.process-card-2026:hover .process-card-icon {
    transform: scale(1.15) rotate(-3deg);
}

.process-card-2026 h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
}

.process-card-2026 p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
}

.process-card-2026 p a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Connector arrows between cards (desktop) */
.process-card-connector {
    display: none;
}

@media (min-width: 720px) {
    .process-card-connector {
        display: block;
        position: absolute;
        top: 50%;
        right: -18px;
        transform: translateY(-50%);
        width: 24px;
        height: 2px;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08));
        z-index: 3;
    }
    .process-card-connector::after {
        content: '';
        position: absolute;
        right: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(var(--accent-rgb), 0.3);
        border-top: 2px solid rgba(var(--accent-rgb), 0.3);
        transform: rotate(45deg);
    }
}

@media (max-width: 480px) {
    .process-grid-2026 {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* FAQ: Lesbarkeit */
.faq-section .section-title {
    color: var(--text);
}

/* Testimonials section */
.testimonials-section {
    width: 100%;
    padding: var(--space-2xl) var(--content-padding);
    position: relative;
    z-index: 2;
}

.testimonials-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 720px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.testimonial-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.testimonial-stars {
    color: #fbbf24;
    font-size: var(--fs-lg);
    letter-spacing: 2px;
    margin-bottom: var(--space-sm);
}

.testimonial-text {
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.testimonial-author {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: var(--fw-semibold);
}

.testimonial-author span {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 2px;
}

/* (Old tech-section removed – replaced by equipment-section-2026) */

/* =====================================================
   2026 EQUIPMENT SECTION – Premium Card Grid
   ===================================================== */
.equipment-section-2026 {
    width: 100%;
    padding: var(--space-2xl) var(--content-padding);
    position: relative;
    z-index: 2;
}

.equipment-grid-2026 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.equipment-card-2026 {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    background: rgba(var(--accent-rgb), 0.02);
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
    overflow: hidden;
}

.equipment-card-2026::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.equipment-card-2026:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.equipment-card-2026:hover::before {
    opacity: 1;
}

.equipment-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}
.equipment-card-icon svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke-width: 2;
}

.equipment-card-2026:hover .equipment-card-icon {
    transform: scale(1.2) rotate(-5deg);
}

.equipment-card-2026 h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.01em;
}

.equipment-card-2026 p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* =====================================================
   2026 CTA – Clean
   ===================================================== */
.cta-pcb {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 8vw, 6rem) var(--content-padding);
    text-align: center;
    margin: var(--space-xl) 0 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    isolation: isolate;
}

/* Inner content */
.cta-pcb-inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-width-text);
    margin: 0 auto;
}

.cta-pcb h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.cta-pcb-inner > p {
    font-size: var(--fs-base);
    color: var(--muted);
    margin-bottom: var(--space-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-pcb .cta-strip-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── CTA Contact Row (Tel + WhatsApp) ─── */
.cta-contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.cta-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color .25s ease;
}

.cta-contact-link:hover {
    color: var(--accent);
}

.cta-contact-link svg {
    flex-shrink: 0;
    opacity: .7;
    transition: opacity .25s ease;
}

.cta-contact-link:hover svg {
    opacity: 1;
}

.cta-contact-link--wa:hover {
    color: #25d366;
}

.cta-contact-link--wa:hover svg {
    fill: #25d366;
}

.cta-contact-divider {
    color: var(--border);
    font-size: var(--fs-sm);
    user-select: none;
}

/* Light mode: traces slightly darker */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pcb-pulse { animation: none; }
    .pcb-data { animation: none; opacity: 0; }
}

/* Garantie-Banner */
.guarantee-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 2;
    margin: var(--space-xl) 0;
}

.guarantee-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}
.guarantee-icon svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke-width: 2;
}

.guarantee-content h3 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-xs);
    color: var(--text);
}

.guarantee-content p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .guarantee-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   SKIP LINK (Accessibility)
   ===================================================== */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: var(--accent);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-weight: 600;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
}
.skip-link:focus {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================
   PROCESS CTA
   ===================================================== */
.process-cta {
    text-align: center;
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================
   2026 MICRO-INTERACTIONS & MODERN ENHANCEMENTS
   ===================================================== */

/* Smooth focus-visible for accessibility + modern look */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Button press effect */
.btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Accent line under section titles - animate on reveal */
.section-title::after {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.6s ease 0.2s;
    width: 0;
    opacity: 0;
}

.is-visible .section-title::after,
.is-in .section-title::after,
.section-head.is-visible .section-title::after {
    width: 60px;
    opacity: 0.7;
}

/* Service cards: smooth card-to-card transition */
.service-card {
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        background 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.25);
}

/* Why-card hover with accent glow */
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.06);
}

/* Process card icon animations */
.process-card-2026 .process-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-card-2026:hover .process-card-number {
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.45);
}

.process-card-number {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Smooth page transitions for links */
.nav-link {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                background-color 0.25s ease;
}

/* CTA PCB hover glow */
.cta-pcb .btn:hover {
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.2);
}

/* Smooth scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.35);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent;
}

/* Smooth color scheme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =====================================================
   LIGHT MODE – Kontrast & Sichtbarkeit verbessern
   ===================================================== */

/* ══════════════════════════════════════════════════════
   SERVICE SHOWCASE – Premium 2-col hero visual (2026)
   ══════════════════════════════════════════════════════ */

.svc-showcase {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 7vw, 5.5rem) var(--content-padding);
    max-width: var(--content-width);
    margin: 0 auto;
    overflow: visible;
}

/* Ambient glow behind section */
.svc-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(var(--accent-rgb), 0.06) 0%,
        rgba(var(--accent-rgb), 0.02) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(60px);
}

.svc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* ── Text Column ── */
.svc-showcase-text {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 520px;
}

.svc-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.svc-showcase-text h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--fw-black, 900);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}

.svc-showcase-text > p {
    font-size: var(--fs-base, 1rem);
    line-height: 1.7;
    color: var(--muted);
    max-width: 46ch;
}

/* Feature list – premium checkmark style */
.svc-showcase-features {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.svc-showcase-features li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 2rem;
    font-size: var(--fs-sm, 0.925rem);
    color: var(--text);
    line-height: 1.5;
    font-weight: 500;
}

/* Animated check icon */
.svc-showcase-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svc-showcase-features li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}

.svc-showcase-features li:hover::before {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-50%) scale(1.1);
}

/* CTA button spacing */
.svc-showcase-text .btn {
    margin-top: 0.5rem;
    align-self: flex-start;
}

/* ── Visual Column ── */
.svc-showcase-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Glass container with dot grid for the animation */
/* (see dot grid block below for the actual ::before rules) */

/* Corner accents */
.svc-showcase-visual::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 60px;
    height: 60px;
    border-top: 2px solid rgba(var(--accent-rgb), 0.2);
    border-right: 2px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 0 24px 0 0;
    pointer-events: none;
    transition: border-color 0.5s ease;
}

/* Subtle glow behind the SVG */
.svc-showcase-visual .svc-anim {
    position: relative;
    z-index: 1;
}

.svc-anim {
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 8px 40px rgba(var(--accent-rgb), 0.1));
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: lift + glow */
.svc-showcase-visual:hover .svc-anim {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 16px 48px rgba(var(--accent-rgb), 0.16));
}

.svc-showcase-visual:hover::after {
    border-color: rgba(var(--accent-rgb), 0.35);
}

/* ── Entrance animation ── */
.svc-showcase .svc-showcase-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-showcase .svc-showcase-visual {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.svc-showcase.is-visible .svc-showcase-text,
.svc-showcase.is-visible .svc-showcase-visual {
    opacity: 1;
    transform: none;
}

/* ── Dark mode glow boost ── */

/* ── Responsive ── */
@media (max-width: 900px) {
    .svc-showcase {
        padding: 2.5rem 1.5rem;
    }
    .svc-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 560px;
        margin: 0 auto;
    }
    .svc-showcase-visual {
        order: -1;
    }
}

@media (max-width: 580px) {
    .svc-showcase {
        padding: 2rem 1rem;
    }
    .svc-showcase-text h2 {
        font-size: 1.5rem;
    }
    .svc-anim {
        max-width: 300px;
    }
    .svc-showcase-visual {
        padding: 1.25rem;
    }
    .svc-showcase-visual::before {
        border-radius: 16px;
    }
    .svc-showcase-visual::after {
        width: 40px;
        height: 40px;
        border-radius: 0 16px 0 0;
    }
}

/* ── Dot grid pattern inside visual ── */
.svc-showcase-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1px),
        rgba(var(--accent-rgb), 0.03);
    background-size: 24px 24px, 100% 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.5s ease, background 0.5s ease;
}

/* ── Animated scan line ── */
@keyframes svc-scanline {
    0% { top: -2px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

.svc-showcase-visual .svc-anim {
    position: relative;
    z-index: 1;
}

/* ── Staggered feature items reveal ── */
.svc-showcase-features li {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-showcase.is-visible .svc-showcase-features li {
    opacity: 1;
    transform: none;
}

.svc-showcase.is-visible .svc-showcase-features li:nth-child(1) { transition-delay: 0.2s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(2) { transition-delay: 0.3s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(3) { transition-delay: 0.4s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(4) { transition-delay: 0.5s; }

/* ── CTA button reveal ── */
.svc-showcase-text .btn {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.svc-showcase.is-visible .svc-showcase-text .btn {
    opacity: 1;
    transform: none;
}

/* ── Pulse ring around visual on hover ── */
@keyframes svc-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.15); }
    70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.svc-showcase-visual:hover::before {
    animation: svc-pulse-ring 2s ease-out infinite;
    border-color: rgba(var(--accent-rgb), 0.16);
    background:
        radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 1px, transparent 1px),
        rgba(var(--accent-rgb), 0.05);
    background-size: 24px 24px, 100% 100%;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .svc-showcase .svc-showcase-text,
    .svc-showcase .svc-showcase-visual {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-showcase-features li {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-showcase-text .btn {
        opacity: 1;
        transform: none;
        transition: background 0.3s ease;
    }
    .svc-anim {
        transition: none;
    }
    .svc-showcase-visual:hover .svc-anim {
        transform: none;
    }
    .svc-showcase-visual:hover::before {
        animation: none;
    }
}

/* ── Offer Decision Audit Cards (admin_dashboard) ── */
.kp-od-card {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 14px;
}
.kp-od-card--accepted {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.08);
}
.kp-od-card--rejected {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}
.kp-od-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.kp-od-label {
    padding: 4px 8px;
    color: var(--muted);
    width: 140px;
}
.kp-od-value {
    padding: 4px 8px;
    color: var(--text);
}
.kp-od-sig-wrap {
    margin-top: 4px;
    padding: 8px;
    background: var(--card-elevated, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    display: inline-block;
}
.kp-od-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--card-elevated, var(--bg));
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.kp-od-download-btn:hover {
    background: var(--accent, #0d6efd);
    color: #fff;
    border-color: var(--accent, #0d6efd);
}

/* =====================================================
   RESPONSIVE GRID CONSOLIDATION (2026-04-26 cleanup)
   Fills missing tablet breakpoints for multi-col grids.
   Placed at end so it overrides earlier per-class rules.
   ===================================================== */

/* Tablet (≤900px): 3-col grids → 2-col */
@media (max-width: 900px) {
    .pcsp-three-col,
    .pcsp-quicknav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 4-col stats/trust → 2-col already on tablet */
    .pcsp-stats-row,
    .pcsp-about .pcsp-trust-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* Mobile (≤600px): all multi-col → 1-col */
@media (max-width: 600px) {
    .pcsp-three-col,
    .pcsp-two-col,
    .pcsp-quicknav-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra small (≤480px): condensed grids → 1-col */
@media (max-width: 480px) {
    .pcsp-stats-row,
    .pcsp-about .pcsp-trust-bar {
        grid-template-columns: 1fr;
    }
}

/* Word-wrap safety for long German compound words on small screens */
@media (max-width: 480px) {
    h1, h2, h3, .pcsp-fachbereich h3, .hero-headline, .pcsp-steps-title {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}

/* HINWEIS: Der UNIFIED SECTION LAYOUT Block wurde am 2026-04-27 komplett
   entfernt, weil er das Original-Padding der einzelnen Section-Klassen
   überschrieben hat (insbesondere .hero--2026 hatte clamp(20px, 4vw, 48px)
   horizontales Padding, der Block setzte clamp(16px, 3vw, 32px) — das
   machte den Hero asymmetrisch). Die Original-Klassendefinitionen weiter
   oben in der Datei sind bereits konsistent genug für die 7 Hauptseiten. */

/* =====================================================
   GRID OVERFLOW FIX (2026-04-26)
   Behebt: Grid-Children sprengen den Container bei
   mittleren Breiten weil min-width:auto die intrinsic
   Größe als Minimum nimmt. min-width:0 zwingt sie zu
   schrumpfen. Plus: harter word-break auf Card-Texten.
   ===================================================== */
.pcsp-three-col > *,
.pcsp-two-col > *,
.pcsp-quicknav-grid > *,
.pcsp-contact-grid > *,
.pcsp-stats-row > *,
.pcsp-trust-bar > *,
.pcsp-about .pcsp-trust-bar > *,
.process-grid-2026 > *,
.equipment-grid-2026 > *,
.rr-process-grid > *,
.highlights-grid > *,
.svc-bento > *,
.svc-showcase-grid > *,
.platinen-pcb-grid > *,
.contact-cards-grid > *,
.contact-dual__grid > *,
.footer-nav > *,
.services-grid > * {
    min-width: 0;
}

/* Card-Wrapper: nur min-width:0 (lassen die Children frei in der Höhe) */
.pcsp-fachbereich,
.pcsp-quicknav-item,
.service-card,
.svc-card,
.contact-card,
.equipment-card-2026,
.process-card-2026,
.highlight-item {
    min-width: 0;
}

/* Card-Texte: hartes Wrapping bei langen Wörtern */
.pcsp-fachbereich h3,
.pcsp-fachbereich p,
.pcsp-fachbereich ul,
.pcsp-fachbereich li,
.pcsp-quicknav-title,
.pcsp-quicknav-desc,
.service-title,
.service-list,
.svc-card-title,
.svc-card-sub {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* =====================================================
   PAGE-LEVEL UI PATTERNS (2026-04-27)
   Konsolidiert wiederkehrende Patterns die vorher
   in 4-7 PHPs als inline-style dupliziert waren.
   ===================================================== */

/* Hero-Image-Band: 3x identisch in elektronik/it-service/webentwicklung */
.page-hero-image {
    width: 100%;
    max-width: var(--content-width);
    margin: var(--space-lg) auto 0;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    box-sizing: border-box;
}
.page-hero-image picture,
.page-hero-image img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
@media (max-width: 600px) {
    .page-hero-image img { height: 200px; }
}

/* Ablauf/Process-Steps: ersetzt pcsp-quicknav-Misuse mit cursor:default
   (gleiche visuelle Form, aber nicht klickbar weil keine Navigation) */
.process-steps {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: var(--space-lg) !important;
}
.process-steps .pcsp-quicknav-item {
    cursor: default;
}
.process-steps .pcsp-quicknav-item:hover {
    transform: none;
    box-shadow: none;
}

/* Trennvariante: erste Sektion ohne Trennlinie obenhalb */
.pcsp-quicknav--bordered {
    border-top: 1px solid var(--border);
}

/* CTA-Action-Grid (2-Spalten Variante) */
.pcsp-contact-grid--two {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
    .pcsp-contact-grid--two { grid-template-columns: 1fr; }
}

/* FAQ-Gruppentitel (zwischen den Akkordeons in faq.php) */
.faq-group-title {
    font-size: 1.3rem;
    margin: 2rem 0 0.8rem;
}
.faq-group-title:first-of-type {
    margin-top: 1.5rem;
}

/* Form-Helpers: kleine Utility-Klassen statt inline */
.form-row-hidden { display: none; }
.form-modal-open { display: flex; }
.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.mt-sm { margin-top: var(--space-sm); }

/* Kontakt-Page Container Helpers */
.contact-narrow {
    max-width: var(--content-width-text);
    margin: 0 auto;
}
.contact-hint {
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-xs);
    margin-top: var(--space-md);
}

/* Honeypot — versteckte Spam-Falle (visually hidden) */
.honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Map-Iframe: feste Höhe 400px, full-width */
.map-iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* Map-Frame Wrapper: rounded corners + border */
.map-frame--bordered {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Map Placeholder Box (wenn Karte nicht zugestimmt) */
.map-placeholder-box {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Map-Consent Form: zentriert mit gap */
.map-consent-form {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}
.map-consent-link {
    font-size: var(--fs-xs);
    color: var(--muted);
}
.map-consent-link-wrap {
    text-align: center;
    margin-top: var(--space-sm);
}

/* rr-form-header zentriert (Variante in reparaturen.php) */
.rr-form-header--center {
    display: block;
    text-align: center;
}

/* rr-section-title: kein margin */
.rr-section-title--flush { margin: 0; }
.rr-help--tight { margin-top: 6px; }

/* "Alle Einwilligungen bestätigen" — accent-Karte */
.rr-select-all-wrap { margin-bottom: 12px; }
.rr-select-all {
    background: var(--accent);
    border-color: var(--accent);
}
.rr-select-all > span { color: #fff; font-weight: 600; }
.rr-select-all small { font-weight: 400; opacity: 0.9; }

/* rr-actions: bottom margin (Submit-Bereich) */
.rr-actions--bottom { margin-bottom: 56px; }
.rr-help--hidden-init { margin-top: 8px; display: none; }

/* =====================================================
   EINWILLIGUNGEN — moderne, einheitliche Consent-Karte
   (Reparatur-Formular: .rr-consent). Eine Karte, große
   Accent-Checkboxen, klarer checked-State, Touch-optimiert.
   ===================================================== */
.rr-consent { padding: 18px 18px 20px; }

/* Master "Alle bestätigen" — prominente Accent-Karte */
.rr-consent .rr-select-all {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--accent);
    border-color: var(--accent);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.rr-consent .rr-select-all:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rr-consent .rr-select-all:has(input:checked) {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35), 0 6px 18px rgba(0,0,0,.18);
}

/* Einzel-Einwilligungen: einheitliche, gut tappbare Karten */
.rr-consent .rr-check-list { gap: 8px; }
.rr-consent .rr-check-item:not(.rr-select-all) {
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.rr-consent .rr-check-item:not(.rr-select-all):hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(var(--accent-rgb), .35);
}
.rr-consent .rr-check-item:has(input:focus-visible) {
    border-color: rgba(var(--accent-rgb), .65);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
}
.rr-consent .rr-check-item:not(.rr-select-all):has(input:checked) {
    border-color: rgba(var(--accent-rgb), .55);
    background: rgba(var(--accent-rgb), .10);
}

/* Checkbox: größer, Accent-Farbe, sauber am Text ausgerichtet */
.rr-consent .rr-choice { gap: 12px; align-items: flex-start; }
.rr-consent .consent-checkbox,
.rr-consent #select_all_consents {
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.rr-consent .consent-checkbox { accent-color: var(--accent); }
.rr-consent #select_all_consents { accent-color: #fff; } /* weiße Box auf blauer Master-Karte */
.rr-consent .rr-choice span { padding-top: 1px; }

/* Divider "Widerrufsrecht" — trennt die gesonderte Erklärung dezent ab */
.rr-consent-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 2px 10px;
    color: var(--muted);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rr-consent-divider::before,
.rr-consent-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

/* Widerrufsverzicht: rechtlich besonders — dezent hervorgehoben */
.rr-consent .rr-check-item--legal {
    border-color: rgba(var(--accent-rgb), .30);
    background: rgba(var(--accent-rgb), .05);
}
.rr-consent .rr-check-item--legal:has(input:checked) {
    border-color: rgba(var(--accent-rgb), .55);
    background: rgba(var(--accent-rgb), .12);
}

/* Responsive: Touch-Optimierung auf kleinen Geräten */
@media (max-width: 560px) {
    .rr-consent { padding: 14px 13px 16px; }
    .rr-consent .rr-check-item { padding: 14px 13px; }
    .rr-consent .consent-checkbox,
    .rr-consent #select_all_consents { width: 24px; height: 24px; }
    .rr-consent .rr-choice span { font-size: .96em; line-height: 1.5; }
    .rr-consent-divider { margin: 14px 2px 8px; }
}


/* =====================================================
   REPARATUR-FORMULAR ERFOLGS-SEITE (extracted from reparaturen.php inline <style>)
   ===================================================== */
/* Erfolgs-Header */
                .rr-success-header {
                    text-align: center;
                    padding: 30px 20px;
                    margin-bottom: 24px;
                }
                .rr-success-icon {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto 20px;
                    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    box-shadow: 0 8px 24px rgba(0, 66, 37, 0.3);
                }
                .rr-success-icon svg {
                    width: 48px;
                    height: 48px;
                }
                .rr-success-header h2 {
                    margin: 0 0 8px;
                    font-size: 26px;
                    color: var(--text);
                }
                .rr-success-header p {
                    margin: 0;
                    font-size: 16px;
                    color: var(--muted);
                }

                /* Done Sections */
                .rr-done-section {
                    margin-bottom: 24px;
                }
                .rr-done-card {
                    background: var(--card);
                    border: 1px solid var(--border);
                    border-radius: 16px;
                    overflow: hidden;
                    box-shadow: var(--shadow-soft);
                }
                .rr-done-card-header {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    padding: 20px 24px;
                    background: linear-gradient(135deg, rgba(0,66,37,0.08), rgba(0,66,37,0.03));
                    border-bottom: 1px solid var(--border);
                }
                .rr-done-card-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    width: 40px;
                    height: 40px;
                    color: var(--accent);
                }
                .rr-done-card-icon svg {
                    width: 28px;
                    height: 28px;
                }
                .rr-done-card-header h3 {
                    margin: 0 0 4px;
                    font-size: 18px;
                    font-weight: 600;
                    color: var(--text);
                }
                .rr-done-card-header p {
                    margin: 0;
                    font-size: 14px;
                    color: var(--muted);
                }

                /* PDF Preview */
                .rr-pdf-preview-container {
                    padding: 16px;
                    background: var(--bg);
                }
                .rr-pdf-iframe {
                    width: 100%;
                    height: 450px;
                    border: 1px solid var(--border);
                    border-radius: 10px;
                    background: #fff;
                }
                .rr-pdf-actions {
                    padding: 16px 24px 20px;
                    text-align: center;
                }
                .rr-btn-icon {
                    display: inline-flex;
                    align-items: center;
                    vertical-align: middle;
                    margin-right: 6px;
                }
                .rr-btn-icon svg {
                    width: 16px;
                    height: 16px;
                }

                /* Shipping Content */
                .rr-shipping-content {
                    padding: 24px;
                }
                .rr-shipping-steps {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    margin-bottom: 24px;
                }
                .rr-shipping-step {
                    display: flex;
                    align-items: flex-start;
                    gap: 14px;
                }
                .rr-step-number {
                    width: 32px;
                    height: 32px;
                    background: var(--accent);
                    color: #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    font-size: 15px;
                    flex-shrink: 0;
                }
                .rr-step-text {
                    font-size: 15px;
                    line-height: 1.5;
                    padding-top: 5px;
                    color: var(--text);
                }
                .rr-address-box {
                    background: linear-gradient(135deg, rgba(0,66,37,0.1), rgba(0,66,37,0.05));
                    border: 2px solid var(--accent);
                    border-radius: 12px;
                    padding: 20px 24px;
                    margin-bottom: 20px;
                }
                .rr-address-box address {
                    font-style: normal;
                    font-size: 17px;
                    line-height: 1.7;
                    color: var(--text);
                }
                .rr-shipping-tip {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 14px 18px;
                    background: rgba(255, 193, 7, 0.12);
                    border: 1px solid rgba(255, 193, 7, 0.3);
                    border-radius: 10px;
                    font-size: 14px;
                    color: var(--text);
                }
                .rr-tip-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    color: #e6a800;
                }
                .rr-tip-icon svg {
                    width: 20px;
                    height: 20px;
                }

                /* Done Actions */
                .rr-done-actions {
                    text-align: center;
                    padding: 30px 20px 10px;
                }
                .rr-btn-large {
                    padding: 16px 40px;
                    font-size: 17px;
                    border-radius: 14px;
                }
                .rr-btn-success {
                    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
                    color: #fff;
                    border: none;
                    cursor: pointer;
                    transition: transform 0.15s ease, box-shadow 0.2s ease;
                }
                .rr-btn-success:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 24px rgba(0, 66, 37, 0.35);
                }

                /* Modal - ABSOLUTE Zentrierung */
                .rr-modal-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.85);
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    z-index: 2147483647;
                }
                .rr-modal-overlay.rr-modal-open {
                    display: block;
                }
                .rr-modal {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: var(--card);
                    border-radius: 16px;
                    width: 90%;
                    max-width: 420px;
                    max-height: 90vh;
                    overflow-y: auto;
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
                    animation: rr-modal-pop 0.25s ease-out;
                }
                @keyframes rr-modal-pop {
                    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
                    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                }
                .rr-modal-header {
                    text-align: center;
                    padding: 30px 24px 20px;
                    background: linear-gradient(135deg, rgba(0,66,37,0.1), rgba(0,66,37,0.04));
                    border-bottom: 1px solid var(--border);
                }
                .rr-modal-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 16px;
                    color: var(--accent);
                }
                .rr-modal-icon svg {
                    width: 44px;
                    height: 44px;
                }
                .rr-modal-header h3 {
                    margin: 0;
                    font-size: 22px;
                    color: var(--text);
                    line-height: 1.4;
                }
                .rr-modal-body {
                    padding: 24px;
                }
                .rr-modal-intro {
                    font-size: 16px;
                    text-align: center;
                    margin: 0 0 20px;
                    color: var(--text);
                }
                .rr-modal-info-box {
                    background: linear-gradient(135deg, rgba(0,66,37,0.1), rgba(0,66,37,0.05));
                    border: 2px solid var(--accent);
                    border-radius: 12px;
                    padding: 18px 20px;
                    margin-bottom: 20px;
                }
                .rr-modal-info-box h4 {
                    margin: 0 0 12px;
                    font-size: 15px;
                    color: var(--accent);
                }
                .rr-modal-info-box address {
                    font-style: normal;
                    font-size: 16px;
                    line-height: 1.7;
                    color: var(--text);
                }
                .rr-modal-checklist {
                    background: rgba(39, 174, 96, 0.08);
                    border: 1px solid rgba(39, 174, 96, 0.25);
                    border-radius: 12px;
                    padding: 18px 20px;
                    margin-bottom: 20px;
                }
                .rr-modal-checklist h4 {
                    margin: 0 0 12px;
                    font-size: 15px;
                    color: var(--accent);
                }
                .rr-modal-checklist ul {
                    margin: 0;
                    padding-left: 24px;
                }
                .rr-modal-checklist li {
                    font-size: 14px;
                    line-height: 1.8;
                    color: var(--text);
                }
                .rr-modal-note {
                    font-size: 14px;
                    text-align: center;
                    color: var(--muted);
                    margin: 0;
                    padding: 12px 16px;
                    background: var(--bg);
                    border-radius: 10px;
                }
                .rr-modal-footer {
                    padding: 20px 24px 28px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    align-items: center;
                }
                .rr-btn-download {
                    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
                    color: #fff;
                    border: none;
                    cursor: pointer;
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: transform 0.15s ease, box-shadow 0.2s ease;
                }
                .rr-btn-download:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 24px rgba(0, 66, 37, 0.4);
                    color: #fff;
                }
                .rr-btn-primary {
                    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
                    color: #fff;
                    border: none;
                    cursor: pointer;
                    transition: transform 0.15s ease, box-shadow 0.2s ease;
                }
                .rr-btn-primary:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 24px rgba(0, 66, 37, 0.35);
                }

                /* Responsive - Alle Geräte */
                
                /* Große Bildschirme */
                @media (min-width: 1200px) {
                    .rr-modal {
                        max-width: 520px;
                    }
                }
                
                /* Tablets */
                @media (max-width: 900px) {
                    .rr-modal {
                        max-width: 90%;
                        width: 90%;
                        margin: 20px auto;
                    }
                    .rr-modal-footer {
                        padding: 18px 20px 24px;
                    }
                    .rr-btn-large {
                        width: 100%;
                        max-width: 320px;
                    }
                }
                
                /* Kleine Tablets / Große Phones */
                @media (max-width: 768px) {
                    .rr-modal-overlay {
                        padding: 16px;
                    }
                    .rr-modal {
                        width: calc(100% - 32px);
                        max-width: none;
                        margin: 16px;
                        border-radius: 18px;
                        max-height: calc(100vh - 32px);
                        max-height: calc(100dvh - 32px);
                    }
                    .rr-modal-header {
                        padding: 24px 20px 18px;
                    }
                    .rr-modal-header h3 {
                        font-size: 20px;
                    }
                    .rr-modal-icon {
                        margin-bottom: 14px;
                    }
                    .rr-modal-icon svg {
                        width: 36px;
                        height: 36px;
                    }
                    .rr-modal-body {
                        padding: 20px;
                    }
                    .rr-modal-info-box,
                    .rr-modal-checklist {
                        padding: 16px 18px;
                    }
                    .rr-pdf-iframe {
                        height: 380px;
                    }
                }

                /* Smartphones */
                @media (max-width: 600px) {
                    .rr-success-header { padding: 20px 16px; }
                    .rr-success-icon { width: 60px; height: 60px; }
                    .rr-success-icon svg { width: 36px; height: 36px; }
                    .rr-success-header h2 { font-size: 22px; }
                    .rr-done-card-header { padding: 16px 18px; gap: 12px; }
                    .rr-done-card-icon { width: 34px; height: 34px; }
                    .rr-done-card-icon svg { width: 22px; height: 22px; }
                    .rr-done-card-header h3 { font-size: 16px; }
                    .rr-pdf-iframe { height: 320px; }
                    .rr-shipping-content { padding: 18px; }
                    
                    .rr-modal-overlay {
                        padding: 12px;
                    }
                    .rr-modal {
                        width: calc(100% - 24px);
                        margin: 12px;
                        border-radius: 16px;
                        max-height: calc(100vh - 24px);
                        max-height: calc(100dvh - 24px);
                    }
                    .rr-modal-header {
                        padding: 20px 18px 16px;
                    }
                    .rr-modal-header h3 {
                        font-size: 18px;
                    }
                    .rr-modal-icon {
                        font-size: 38px;
                        margin-bottom: 12px;
                    }
                    .rr-modal-body {
                        padding: 16px;
                    }
                    .rr-modal-intro {
                        font-size: 15px;
                    }
                    .rr-modal-info-box,
                    .rr-modal-checklist {
                        padding: 14px 16px;
                        margin-bottom: 16px;
                    }
                    .rr-modal-info-box h4,
                    .rr-modal-checklist h4 {
                        font-size: 14px;
                        margin-bottom: 10px;
                    }
                    .rr-modal-info-box address {
                        font-size: 15px;
                    }
                    .rr-modal-checklist li {
                        font-size: 13px;
                    }
                    .rr-modal-note {
                        font-size: 13px;
                        padding: 10px 14px;
                    }
                    .rr-modal-footer {
                        padding: 16px 16px 22px;
                        gap: 10px;
                    }
                    .rr-btn-large {
                        padding: 14px 24px;
                        font-size: 15px;
                        width: 100%;
                    }
                }
                
                /* Sehr kleine Phones */
                @media (max-width: 380px) {
                    .rr-modal {
                        width: calc(100% - 16px);
                        margin: 8px;
                        border-radius: 14px;
                    }
                    .rr-modal-header {
                        padding: 18px 14px 14px;
                    }
                    .rr-modal-header h3 {
                        font-size: 16px;
                    }
                    .rr-modal-icon {
                        font-size: 32px;
                    }
                    .rr-modal-body {
                        padding: 14px;
                    }
                    .rr-modal-info-box,
                    .rr-modal-checklist {
                        padding: 12px 14px;
                    }
                    .rr-btn-large {
                        padding: 12px 20px;
                        font-size: 14px;
                    }
                }
                
                /* Landscape auf Phones */
                @media (max-height: 500px) and (orientation: landscape) {
                    .rr-modal-overlay {
                        padding: 10px;
                        align-items: flex-start;
                    }
                    .rr-modal {
                        margin: 10px auto;
                        max-height: calc(100vh - 20px);
                    }
                    .rr-modal-header {
                        padding: 16px 20px 12px;
                    }
                    .rr-modal-icon {
                        font-size: 30px;
                        margin-bottom: 8px;
                    }
                    .rr-modal-body {
                        padding: 14px 20px;
                    }
                    .rr-modal-footer {
                        padding: 14px 20px 18px;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: center;
                    }
                    .rr-btn-large {
                        width: auto;
                        flex: 1 1 auto;
                        min-width: 140px;
                        max-width: 200px;
                    }
                }

/* =====================================================
   HOME-RESPONSIVE-FIX (2026-04-27)
   Behebt: Auf kleinen Viewports werden Hero-Headline
   und andere Texte rechts abgeschnitten weil <br>
   Pflicht-Linebreaks setzt und der Container zu eng wird.
   ===================================================== */

/* Picture-Element (HTML5) ist by default inline — auf block setzen damit es
   sich nicht eigenständig der Container-Breite widersetzt */
picture {
    display: block;
    max-width: 100%;
}

/* Body / Main Container — guarantee no horizontal overflow */
html, body {
    overflow-x: clip;
    max-width: 100%;
}
body {
    overflow-x: clip;
}

/* Hero-Headline auf Mobile: <br> ausblenden + Text bricht automatisch */
@media (max-width: 600px) {
    .hero-headline br {
        display: none;
    }
    .hero-headline {
        word-break: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* Ensure all sections respect viewport width */
section,
main,
.wrap {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Picture inside fachbereich-img — explicit block, fill container */
.pcsp-fb-img picture {
    display: block;
    width: 100%;
    height: 100%;
}
.pcsp-fb-img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   REPARATURSPEKTRUM — Pill-Tabs + Live-Showcase
   5 Bereiche: Industrie, Heizung, Wasseraufbereitung, KFZ, Haus & Hobby
   Mobile-First, responsive, A11y (role=tab/tabpanel), reduced-motion safe
   ═══════════════════════════════════════════════════════════════════════ */

.pcsp-spectrum {
    margin-top: var(--space-2xl);
    padding: 0 var(--content-padding);
}

.pcsp-spectrum-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.pcsp-spectrum-head {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pcsp-spectrum-eyebrow {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: var(--space-sm);
}

.pcsp-spectrum-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-sm);
    color: var(--text);
    line-height: 1.15;
}

.pcsp-spectrum-sub {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ─── Pill Tabs ───────────────────────────────── */
.pcsp-spectrum-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.5rem, 0.8vw, 0.75rem);
    margin-bottom: var(--space-lg);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

/* Hide horizontal scrollbar on desktop where pills fit */
@media (min-width: 1100px) {
    .pcsp-spectrum-tabs {
        overflow-x: visible;
    }
}

.pcsp-spectrum-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.2rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
    scroll-snap-align: start;
    min-width: 0;
    text-align: left;
}

.pcsp-spectrum-tab:hover,
.pcsp-spectrum-tab:focus-visible {
    background: var(--card-elevated);
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--text);
    transform: translateY(-1px);
    outline: none;
}

.pcsp-spectrum-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.pcsp-spectrum-tab.is-active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow:
        0 8px 22px rgba(var(--accent-rgb), 0.35),
        0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.pcsp-spectrum-tab.is-active:hover {
    transform: translateY(-1px);
}

.pcsp-spectrum-tab-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: currentColor;
}

.pcsp-spectrum-tab-icon svg {
    width: 100%;
    height: 100%;
}

.pcsp-spectrum-tab-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pcsp-spectrum-tab-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

.pcsp-spectrum-tab-hint {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    opacity: 0.75;
    line-height: 1.2;
    white-space: nowrap;
}

/* ─── Board (Panels Container) ────────────────── */
.pcsp-spectrum-board {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Decorative background glow */
.pcsp-spectrum-board::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 400px at 0% 0%, rgba(var(--accent-rgb), 0.06), transparent 60%),
        radial-gradient(500px 350px at 100% 100%, rgba(var(--accent-rgb), 0.04), transparent 60%);
    z-index: 0;
}

/* ─── Panel ───────────────────────────────────── */
.pcsp-spectrum-panel {
    position: relative;
    display: none;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    z-index: 1;
    animation: spectrumPanelFade 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcsp-spectrum-panel.is-active {
    display: grid;
}

@media (min-width: 900px) {
    .pcsp-spectrum-panel {
        grid-template-columns: minmax(260px, 360px) 1fr;
        gap: var(--space-xl);
        align-items: start;
    }
}

@keyframes spectrumPanelFade {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Visual / SVG ────────────────────────────── */
.pcsp-spectrum-visual {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: var(--space-sm);
}

@media (min-width: 900px) {
    .pcsp-spectrum-visual {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

.pcsp-spectrum-svg {
    width: 100%;
    height: auto;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 8px 24px rgba(var(--accent-rgb), 0.18));
}

/* SVG animations */
.pcsp-spectrum-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: spectrumNodePulse 2.4s ease-in-out infinite;
}

@keyframes spectrumNodePulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.pcsp-spectrum-trace {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: spectrumTraceDraw 3s ease-in-out infinite alternate;
}

@keyframes spectrumTraceDraw {
    0% { stroke-dashoffset: 200; opacity: 0.3; }
    100% { stroke-dashoffset: 0; opacity: 0.9; }
}

.pcsp-spectrum-spark,
.pcsp-spectrum-flame {
    transform-box: fill-box;
    transform-origin: center;
    animation: spectrumFlameFlicker 1.8s ease-in-out infinite;
}

.pcsp-spectrum-flame-inner {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: spectrumFlameFlicker 1.4s ease-in-out infinite reverse;
}

@keyframes spectrumFlameFlicker {
    0%, 100% { opacity: 0.7; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.06); }
}

.pcsp-spectrum-ripple {
    transform-box: fill-box;
    transform-origin: center;
    animation: spectrumRipple 2.4s ease-out infinite;
}

@keyframes spectrumRipple {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

.pcsp-spectrum-drop {
    transform-box: fill-box;
    transform-origin: 50% 30%;
    animation: spectrumDrop 3s ease-in-out infinite;
}

@keyframes spectrumDrop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.pcsp-spectrum-headlight,
.pcsp-spectrum-bulb {
    transform-box: fill-box;
    transform-origin: center;
    animation: spectrumGlow 1.6s ease-in-out infinite;
}

@keyframes spectrumGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

.pcsp-spectrum-data {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: spectrumDataFlow 2s linear infinite;
}

@keyframes spectrumDataFlow {
    0% { stroke-dashoffset: 60; }
    100% { stroke-dashoffset: 0; }
}

/* ─── Content ─────────────────────────────────── */
.pcsp-spectrum-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pcsp-spectrum-h3 {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pcsp-spectrum-lead {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.pcsp-spectrum-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pcsp-spectrum-h4 {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin: 0;
}

.pcsp-spectrum-bullets,
.pcsp-spectrum-symptoms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem 1rem;
}

@media (min-width: 600px) {
    .pcsp-spectrum-bullets,
    .pcsp-spectrum-symptoms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pcsp-spectrum-bullets li,
.pcsp-spectrum-symptoms li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.5;
    min-width: 0;
}

.pcsp-spectrum-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

.pcsp-spectrum-symptoms li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--accent);
    opacity: 0.7;
}

.pcsp-spectrum-symptoms li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.7rem;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--accent);
}

/* ─── Hersteller / Modell Pills ───────────────── */
.pcsp-spectrum-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pcsp-spectrum-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    cursor: default;
    white-space: nowrap;
}

.pcsp-spectrum-pill:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-1px);
}

.pcsp-spectrum-note {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0.3rem 0 0;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(var(--accent-rgb), 0.5);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pcsp-spectrum-note strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.pcsp-spectrum-warn {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.55;
    padding: 0.85rem 1rem;
    background: rgba(255, 180, 0, 0.05);
    border: 1px solid rgba(255, 180, 0, 0.18);
    border-left: 3px solid rgba(255, 180, 0, 0.55);
    border-radius: var(--radius-sm);
    margin-top: 0.25rem;
}

.pcsp-spectrum-warn strong {
    color: #fbbf24;
    font-weight: var(--fw-semibold);
}

/* ─── Actions / CTAs ──────────────────────────── */
.pcsp-spectrum-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--space-sm);
}

.pcsp-spectrum-cta,
.pcsp-spectrum-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.4rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
    white-space: nowrap;
}

.pcsp-spectrum-cta {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #ffffff;
    border: 1px solid var(--accent);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}

.pcsp-spectrum-cta:hover,
.pcsp-spectrum-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.5);
    outline: none;
}

.pcsp-spectrum-cta:focus-visible {
    box-shadow:
        0 10px 28px rgba(var(--accent-rgb), 0.5),
        0 0 0 3px rgba(var(--accent-rgb), 0.35);
}

.pcsp-spectrum-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.pcsp-spectrum-cta:hover svg {
    transform: translateX(3px);
}

.pcsp-spectrum-cta-ghost {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border-strong);
}

.pcsp-spectrum-cta-ghost:hover,
.pcsp-spectrum-cta-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent-light);
    transform: translateY(-2px);
    outline: none;
}

.pcsp-spectrum-cta-ghost:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

.pcsp-spectrum-cta-ghost svg {
    width: 16px;
    height: 16px;
}

/* ─── Tablet (700-899px): scroll-row optimieren ─── */
@media (max-width: 899px) and (min-width: 700px) {
    .pcsp-spectrum-tabs {
        justify-content: flex-start;
        padding: 0.25rem;
        margin-left: calc(-1 * var(--content-padding));
        margin-right: calc(-1 * var(--content-padding));
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }

    .pcsp-spectrum-tab {
        padding: 0.9rem 1.1rem;
    }

    .pcsp-spectrum-tab-hint {
        display: none;
    }
}

/* ─── Mobile (480-699px): 2-Spalten Grid mit last full-width ─── */
@media (max-width: 699px) and (min-width: 480px) {
    .pcsp-spectrum-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        flex-wrap: unset;
        padding: 0;
        scroll-snap-type: none;
    }

    .pcsp-spectrum-tab {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem 0.75rem;
        min-height: 76px;
    }

    .pcsp-spectrum-tab:nth-child(5) {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 0.7rem;
        min-height: 56px;
    }

    .pcsp-spectrum-tab-icon {
        width: 26px;
        height: 26px;
    }

    .pcsp-spectrum-tab-hint {
        display: none;
    }

    .pcsp-spectrum-tab-text {
        align-items: center;
    }

    .pcsp-spectrum-tab-label {
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
    }
}

/* ─── Small Mobile (< 480px): 1 Spalte, Icon links + Label rechts ─── */
@media (max-width: 479px) {
    .pcsp-spectrum-tabs {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        overflow: visible;
        flex-wrap: unset;
        padding: 0;
        scroll-snap-type: none;
    }

    .pcsp-spectrum-tab {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.85rem;
        padding: 0.95rem 1.1rem;
        min-height: 56px;
    }

    .pcsp-spectrum-tab-icon {
        width: 28px;
        height: 28px;
    }

    .pcsp-spectrum-tab-hint {
        display: none;
    }

    .pcsp-spectrum-tab-text {
        align-items: flex-start;
        text-align: left;
    }

    .pcsp-spectrum-tab-label {
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
    }
}

/* ─── Mobile-shared: Actions stack, Visual reorder ─── */
@media (max-width: 899px) {
    .pcsp-spectrum-visual {
        order: -1;
    }

    .pcsp-spectrum-svg {
        max-width: 220px;
    }
}

@media (max-width: 600px) {
    .pcsp-spectrum-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pcsp-spectrum-cta,
    .pcsp-spectrum-cta-ghost {
        justify-content: center;
    }

    .pcsp-spectrum-svg {
        max-width: 180px;
    }
}

/* ─── Reduced Motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pcsp-spectrum-panel,
    .pcsp-spectrum-node,
    .pcsp-spectrum-trace,
    .pcsp-spectrum-spark,
    .pcsp-spectrum-flame,
    .pcsp-spectrum-flame-inner,
    .pcsp-spectrum-ripple,
    .pcsp-spectrum-drop,
    .pcsp-spectrum-headlight,
    .pcsp-spectrum-bulb,
    .pcsp-spectrum-data {
        animation: none !important;
    }

    .pcsp-spectrum-tab,
    .pcsp-spectrum-cta,
    .pcsp-spectrum-cta-ghost,
    .pcsp-spectrum-pill {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   REPARATURSPEKTRUM — Sub-Tabs + Stats + Panel-Header
   Innere Struktur jedes Panels:
   - pHead (H3 + Lead)
   - Stats (3 Kennzahlen)
   - Sub-Tabs (Überblick/Leistungen/Marken/Symptome)
   - Sub-Board mit Sub-Panels
   ═══════════════════════════════════════════════════════════════════════ */

/* Panel-Header */
.pcsp-spectrum-pHead {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ─── Stats-Strip ─────────────────────────────── */
.pcsp-spectrum-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.25rem 0 var(--space-sm);
}

.pcsp-spectrum-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.1rem 0.6rem 1rem;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius);
    min-width: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pcsp-spectrum-stat:hover {
    background: rgba(var(--accent-rgb), 0.09);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

.pcsp-spectrum-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-light);
    margin-bottom: 0.2rem;
    flex: 0 0 auto;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.pcsp-spectrum-stat-icon svg {
    width: 20px;
    height: 20px;
}

.pcsp-spectrum-stat:hover .pcsp-spectrum-stat-icon {
    background: rgba(var(--accent-rgb), 0.2);
    transform: scale(1.05);
}

.pcsp-spectrum-stat-value {
    display: block;
    font-size: clamp(1rem, 0.85rem + 0.7vw, 1.35rem);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pcsp-spectrum-stat-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    line-height: 1.25;
}

/* Highlighted stat (e.g. Express for Industrie) */
.pcsp-spectrum-stat--accent {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.06) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.pcsp-spectrum-stat--accent .pcsp-spectrum-stat-icon {
    background: rgba(var(--accent-rgb), 0.25);
    color: var(--accent-light);
}

.pcsp-spectrum-stat--accent .pcsp-spectrum-stat-value {
    color: var(--accent-light);
}

/* ─── Sub-Tabs (Pills, kleiner als Haupt-Tabs) ───────────── */
.pcsp-spectrum-subtabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0.25rem 0 0.85rem;
    padding: 0.3rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.pcsp-spectrum-subtab {
    flex: 1 1 auto;
    min-width: max-content;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    scroll-snap-align: start;
    white-space: nowrap;
    text-align: center;
}

.pcsp-spectrum-subtab:hover,
.pcsp-spectrum-subtab:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
}

.pcsp-spectrum-subtab:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.4);
}

.pcsp-spectrum-subtab.is-active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* ─── Sub-Board / Sub-Panels ──────────────────── */
.pcsp-spectrum-subboard {
    position: relative;
    min-height: 200px;
}

.pcsp-spectrum-subpanel {
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    animation: subpanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcsp-spectrum-subpanel.is-active {
    display: flex;
}

@keyframes subpanelFade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.pcsp-spectrum-sublead {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 0.25rem;
}

.pcsp-spectrum-subpanel p:not(.pcsp-spectrum-sublead):not(.pcsp-spectrum-note) {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* ─── Checks-Liste (Überblick-Vorteile mit Häkchen) ─── */
.pcsp-spectrum-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pcsp-spectrum-checks li {
    position: relative;
    padding-left: 2rem;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.55;
    min-width: 0;
}

.pcsp-spectrum-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1.5px solid rgba(var(--accent-rgb), 0.45);
}

.pcsp-spectrum-checks li::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 0.5rem;
    width: 8px;
    height: 4px;
    border-left: 1.8px solid var(--accent-light);
    border-bottom: 1.8px solid var(--accent-light);
    transform: rotate(-45deg);
}

/* ─── Pill-Group (für KFZ: Elektronik / PKW / Baumaschinen) ─── */
.pcsp-spectrum-pillgroup {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: var(--space-sm);
}

.pcsp-spectrum-pillgroup + .pcsp-spectrum-pillgroup {
    border-top: 1px dashed var(--border);
    padding-top: var(--space-sm);
}

.pcsp-spectrum-pillgroup-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Mobile refinements (Stats stay 3-col, just smaller) ─── */
@media (max-width: 700px) {
    .pcsp-spectrum-stats {
        gap: 0.4rem;
    }

    .pcsp-spectrum-stat {
        padding: 0.85rem 0.4rem 0.75rem;
        gap: 0.25rem;
    }

    .pcsp-spectrum-stat-icon {
        width: 32px;
        height: 32px;
    }

    .pcsp-spectrum-stat-icon svg {
        width: 17px;
        height: 17px;
    }

    .pcsp-spectrum-stat-value {
        font-size: 0.95rem;
    }

    .pcsp-spectrum-stat-label {
        font-size: 0.7rem;
    }

    .pcsp-spectrum-subtab {
        padding: 0.5rem 0.7rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 420px) {
    .pcsp-spectrum-stat {
        padding: 0.7rem 0.3rem 0.6rem;
    }

    .pcsp-spectrum-stat-icon {
        width: 28px;
        height: 28px;
    }

    .pcsp-spectrum-stat-icon svg {
        width: 15px;
        height: 15px;
    }

    .pcsp-spectrum-stat-value {
        font-size: 0.85rem;
    }

    .pcsp-spectrum-stat-label {
        font-size: 0.65rem;
        line-height: 1.2;
    }
}

/* ─── Reduced Motion (Sub-Tabs) ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .pcsp-spectrum-subpanel,
    .pcsp-spectrum-stat,
    .pcsp-spectrum-subtab {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   UNSER VERSPRECHEN — 6-Card Grid (kompakt)
   Ersatz für die vorherige Timeline-Darstellung
   ═══════════════════════════════════════════════════════════════════════ */

.pcsp-promise {
    margin-top: var(--space-2xl);
    padding: 0 var(--content-padding);
}

.pcsp-promise-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.pcsp-promise-head {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pcsp-promise-eyebrow {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: var(--space-sm);
}

.pcsp-promise-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-sm);
    color: var(--text);
    line-height: 1.15;
}

.pcsp-promise-sub {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Grid: 1 col mobile, 2 col tablet, 3 col desktop */
.pcsp-promise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .pcsp-promise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .pcsp-promise-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pcsp-promise-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-width: 0;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.pcsp-promise-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(400px 200px at 0% 0%, rgba(var(--accent-rgb), 0.06), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pcsp-promise-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

.pcsp-promise-card:hover::before {
    opacity: 1;
}

.pcsp-promise-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent-light);
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.pcsp-promise-card:hover .pcsp-promise-icon {
    transform: scale(1.06) rotate(-3deg);
}

.pcsp-promise-icon svg {
    width: 28px;
    height: 28px;
}

.pcsp-promise-card-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -0.01em;
    position: relative;
}

.pcsp-promise-card-text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    position: relative;
}

.pcsp-promise-card-text a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: var(--fw-medium);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pcsp-promise-card-text a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .pcsp-promise-card,
    .pcsp-promise-icon,
    .pcsp-promise-card::before {
        transition: none !important;
    }
    .pcsp-promise-card:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PCSP BRIDGE — Kompakte Übergangs-Sektion zwischen Versprechen und Techniken
   ═══════════════════════════════════════════════════════════════════════ */

.pcsp-bridge {
    margin-top: var(--space-xl);
    padding: 0 var(--content-padding);
}

.pcsp-bridge-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

.pcsp-bridge-text {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.pcsp-bridge-text a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: var(--fw-medium);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pcsp-bridge-text a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   PCSP FLOW — Ablauf der Reparatur (5 Schritte, konsolidiert von 8)
   Desktop: 5-Spalten Grid mit Verbindungslinie
   Tablet: 3+2 Grid
   Mobile: 1 Spalte als Timeline (linke Border-Line)
   ═══════════════════════════════════════════════════════════════════════ */

.pcsp-flow {
    margin-top: var(--space-2xl);
    padding: 0 var(--content-padding);
}

.pcsp-flow-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.pcsp-flow-head {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pcsp-flow-eyebrow {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: var(--space-sm);
}

.pcsp-flow-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text);
    line-height: 1.15;
}

/* Grid — 5 Spalten Desktop, responsive */
.pcsp-flow-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    counter-reset: flow-step;
    position: relative;
}

@media (min-width: 720px) {
    .pcsp-flow-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .pcsp-flow-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-sm);
    }
}

.pcsp-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: clamp(1.1rem, 1.8vw, 1.5rem);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-width: 0;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

.pcsp-flow-step::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(300px 200px at 100% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pcsp-flow-step:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.pcsp-flow-step:hover::before {
    opacity: 1;
}

.pcsp-flow-num {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    font-size: clamp(2rem, 2.5vw, 2.8rem);
    font-weight: var(--fw-black);
    line-height: 1;
    color: rgba(var(--accent-rgb), 0.18);
    letter-spacing: -0.04em;
    pointer-events: none;
    transition: color 0.3s ease;
}

.pcsp-flow-step:hover .pcsp-flow-num {
    color: rgba(var(--accent-rgb), 0.3);
}

.pcsp-flow-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent-light);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.pcsp-flow-icon svg {
    width: 22px;
    height: 22px;
}

.pcsp-flow-step-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
    padding-right: 2.5rem;
}

.pcsp-flow-step-text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    position: relative;
    z-index: 1;
}

.pcsp-flow-step-text a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: var(--fw-medium);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pcsp-flow-step-text a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Mobile: vertical timeline with left border */
@media (max-width: 719px) {
    .pcsp-flow-step {
        padding-left: 2.5rem;
    }

    .pcsp-flow-step::after {
        content: '';
        position: absolute;
        top: 1.4rem;
        bottom: -0.6rem;
        left: 1.1rem;
        width: 2px;
        background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0));
        z-index: 0;
    }

    .pcsp-flow-step:last-child::after {
        display: none;
    }

    .pcsp-flow-icon {
        position: absolute;
        left: -0.2rem;
        top: 1rem;
        background: var(--card);
        border: 2px solid rgba(var(--accent-rgb), 0.4);
        width: 36px;
        height: 36px;
        margin-left: 0.5rem;
    }

    .pcsp-flow-icon svg {
        width: 18px;
        height: 18px;
    }

    .pcsp-flow-num {
        font-size: 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcsp-flow-step,
    .pcsp-flow-step::before,
    .pcsp-flow-num {
        transition: none !important;
    }
    .pcsp-flow-step:hover {
        transform: none;
    }
}

/* ==========================================================================
   Zeitleiste im Auftragsdetail (admin_dashboard.php)

   Alle Farben kommen aus den vorhandenen Tokens, damit hell und dunkel ohne
   Zusatzregel stimmen. Die Ereignisfarbe (--zl-farbe) faerbt NUR Punkt und
   Schiene - also Dekoration. Jedes Ereignis traegt seine Aussage im Text,
   die Farbe ist nie der einzige Traeger einer Information (WCAG 1.4.1).
   ========================================================================== */

.kp-zl{
    list-style:none;
    margin:8px 0 0;
    padding:0 0 0 4px;
}

.kp-zl-eintrag{
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0, 1fr); /* min-width:0, sonst sprengt
                                                  langer Text das Raster */
    gap:10px;
    padding:0 0 14px 0;
}

/* Die durchgehende Schiene. Am letzten Eintrag endet sie am Punkt, statt ins
   Leere weiterzulaufen. */
.kp-zl-eintrag::before{
    content:"";
    position:absolute;
    left:13px;
    top:22px;
    bottom:0;
    width:2px;
    background:var(--border);
}
.kp-zl-eintrag:last-child::before{ display:none; }

.kp-zl-punkt{
    grid-column:1;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    line-height:1;
    border-radius:50%;
    background:var(--card-elevated);
    border:2px solid var(--zl-farbe, var(--border));
    position:relative;
    z-index:1;
}

.kp-zl-inhalt{
    grid-column:2;
    min-width:0;
}

.kp-zl-titel{
    margin:4px 0 0;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    overflow-wrap:anywhere; /* lange Betreffzeilen und Adressen umbrechen */
}

.kp-zl-text{
    margin:3px 0 0;
    font-size:12px;
    color:var(--text-secondary);
    overflow-wrap:anywhere;
}

.kp-zl-meta{
    margin:3px 0 0;
    font-size:11px;
    /* --text-secondary (4,72:1 auf --card), NICHT --muted (3,06:1).
       Hier stehen Zeitpunkt, Relativzeit und Urheber - Inhalt, keine
       Dekoration, also gilt 4,5:1 nach WCAG 2.1 AA fuer kleinen Text. */
    color:var(--text-secondary);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* Flex-Items haben von Haus aus min-width:auto und schrumpfen deshalb nicht
   unter ihre Inhaltsbreite. Eine umbruchfreie Absenderadresse (bis 254
   Zeichen) in .kp-zl-wer wuerde die Zeile waagerecht aufziehen - besonders
   unter 520 px, wo die Spalte ohnehin schmal ist. */
.kp-zl-meta > *{
    min-width:0;
    overflow-wrap:anywhere;
}

/* Trennpunkte zwischen den Metaangaben - per ::before, damit sie beim
   Umbruch nicht am Zeilenanfang haengen bleiben. */
.kp-zl-rel::before,
.kp-zl-wer::before{
    content:"\00B7";
    margin-right:8px;
}

.kp-zl-wer{ font-style:italic; }

.kp-zl-hinweis{
    margin:8px 0 0;
    font-size:12px;
    color:var(--text-secondary); /* siehe .kp-zl-meta */
}

/* ==========================================================================
   Sortierleiste ueber der Auftragsliste

   Die globale Regel `select{width:100%}` (weiter oben in dieser Datei) gilt
   auch hier. In einem inline-flex-Formular beansprucht das Auswahlfeld damit
   mehr Platz als es braucht, und der Knopf daneben wurde abgeschnitten - er
   las sich als "Anwender" statt "Anwenden".
   ========================================================================== */
/* Die Zeile, in der die Sortierleiste sitzt - rechtsbuendig ueber der Liste. */
.kp-sortzeile{
    display:flex;
    justify-content:flex-end;
    margin-bottom:10px;
}

.kp-sortleiste{
    display:inline-flex;
    gap:6px;
    align-items:center;
    margin-left:auto;
    flex-wrap:wrap;
}
.kp-sortleiste select{
    width:auto;
    min-width:0;
    padding:5px 9px;
    font-size:12px;
    border-radius:8px;
}
.kp-sortleiste button{
    flex-shrink:0;      /* darf nicht schrumpfen, sonst bricht die Beschriftung */
    white-space:nowrap;
}
.kp-sortleiste label{
    font-size:12px;
    color:var(--text-secondary);
    white-space:nowrap;
}

/* Am Handy ist der Platz knapp: Symbolspalte schmaler, Schiene mitwandern. */
@media (max-width:520px){
    .kp-zl-eintrag{ grid-template-columns:22px minmax(0, 1fr); gap:8px; }
    .kp-zl-punkt{ width:22px; height:22px; font-size:11px; }
    .kp-zl-eintrag::before{ left:10px; top:18px; }
}

/* Beim Drucken die Schiene sparen - sie kostet Toner und sagt auf Papier
   nichts, weil dort ohnehin alles untereinander steht. */
@media print{
    .kp-zl-eintrag::before{ display:none; }
    .kp-zl-punkt{ border-color:#000; }
}

/* ==========================================================================
   Startseite HEUTE im Adminbereich (Phase 4.1)

   STAND VORHER als <style> im Rumpf von admin_dashboard.php. Das ist nicht
   konform (style gehoert in den Kopf), funktioniert zwar ueberall, kostet aber
   bei jedem Seitenaufruf die Uebertragung und laesst sich nicht
   zwischenspeichern.

   Die Farben kommen ausschliesslich aus den vorhandenen Merkmalen
   (--card, --border, --text ...), damit der Block dieselbe Helligkeit hat wie
   alles andere und bei einer Themenaenderung mitgeht.
   ========================================================================== */
        .kp-heute{
            margin:0 0 18px;
            /* Eigener Wert fuer den Nebentext statt --text-secondary.
               Nachgerechnet auf --card-elevated (#2A2E38): --text-secondary
               (#8A92A2) kommt auf 4,34:1 und verfehlt damit die 4,5:1, die
               WCAG 2.1 AA fuer Text unter 18,66px verlangt - und der Nebentext
               hier ist 11px. #A8B0BE erreicht 6,2:1 und bleibt trotzdem
               deutlich hinter der Ueberschrift zurueck.
               Bei "mehr Kontrast" uebernimmt wieder der Wert der Seite; er ist
               dann heller als dieser (10,6:1). */
            --kp-heute-nebentext:#A8B0BE;
        }
        @media (prefers-contrast: more){
            .kp-heute{ --kp-heute-nebentext:var(--text-secondary); }
        }
        .kp-heute-kopf{
            display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
            margin:0 0 10px;
        }
        .kp-heute-kopf h2{ margin:0; font-size:17px; color:var(--text); }
        .kp-heute-datum{ font-size:12px; color:var(--kp-heute-nebentext); }
        /* Mobile First: eine Spalte. Erst wenn Platz da ist, mehrere.
           min-width:0 an den Kindern, sonst waechst eine lange Betreffzeile
           ueber ihre Spalte hinaus und schiebt das Raster auf. */
        /* auto-fit statt fester Spaltenzahl (Vorgabe B2).
           Vorher waren es hoechstens drei Spalten - auf einem 3440px breiten
           Bildschirm standen daneben zwei Handbreit nichts. auto-fit legt so
           viele Kacheln nebeneinander, wie bei 320px Mindestbreite Platz haben,
           und braucht dafuer keine einzige Haltestelle mehr.
           Die 320px sind kein Geschmack: darunter bricht die Kopfzeile aus
           Symbol, Titel und Zahl um. */
        .kp-heute-raster{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
            gap:10px;
            /* Jede Kachel so hoch wie ihr Inhalt, nicht so hoch wie die
               hoechste der Reihe. Sonst steht neben einer Liste mit zwanzig
               Zeilen ein "nichts offen" in einem hohen leeren Kasten. */
            align-items:start;
        }
        /* Unter 360px waere minmax(320px,...) breiter als der Bildschirm und
           die Seite schoebe sich seitlich weg. */
        @media (max-width:359.98px){
            .kp-heute-raster{ grid-template-columns:1fr; }
        }
        .kp-heute-block{
            min-width:0; background:var(--card-elevated);
            border:1px solid var(--border); border-radius:10px; padding:12px 14px;
        }
        .kp-heute-block-kopf{
            display:flex; align-items:baseline; gap:8px; margin:0 0 8px;
            padding-bottom:8px; border-bottom:1px solid var(--border);
        }
        .kp-heute-block-kopf h3{
            margin:0; font-size:13px; font-weight:700; color:var(--text);
            letter-spacing:.02em;
        }
        .kp-heute-zahl{
            margin-left:auto; font-size:12px; font-weight:700; color:var(--kp-heute-nebentext);
        }
        .kp-heute-liste{ list-style:none; margin:0; padding:0; }
        .kp-heute-liste > li + li{ border-top:1px solid var(--border); }
        .kp-heute-zeile{
            display:block; padding:7px 2px; text-decoration:none; color:var(--text);
            border-radius:6px;
        }
        .kp-heute-zeile:hover{ background:var(--bg); }
        .kp-heute-zeile:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
        .kp-heute-titel{
            display:block; font-size:13px; line-height:1.4; font-weight:600;
            overflow-wrap:anywhere;
        }
        .kp-heute-meta{
            display:block; margin-top:2px; font-size:11px; color:var(--kp-heute-nebentext);
            overflow-wrap:anywhere;
        }
        .kp-heute-marke{
            display:inline-block; margin-right:6px; padding:1px 7px; border-radius:10px;
            font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
            border:1px solid var(--border); color:var(--kp-heute-nebentext);
        }
        /* Farbe ist NIE das einzige Merkmal: die Marke traegt immer ein Wort
           ("überfällig", "sofort", "auffällig"). Die Farbe verstaerkt nur. */
        .kp-heute-marke--warn{ border-color:#f0a202; color:#f0a202; }
        .kp-heute-marke--kritisch{ border-color:#ff6b6b; color:#ff6b6b; }
        .kp-heute-leer{
            margin:6px 0 0; font-size:12px; color:var(--kp-heute-nebentext); font-style:italic;
        }
        .kp-heute-fehler{ margin:6px 0 0; font-size:12px; color:#ff6b6b; }
        .kp-heute-mehr{ margin:8px 0 0; font-size:11px; color:var(--kp-heute-nebentext); }

/* ==========================================================================
   Annahmestopp · Hinweisbanner auf Startseite und Anmeldeseite
   Markup: src/annahmestopp.php · Inhalt: config/annahmestopp.json

   Kein Popup, kein Overlay, nichts Wegklickbares: der Hinweis steht im
   Textfluss und bleibt stehen. Er soll gelesen und nicht weggeklickt werden.

   Durchgehend tokenbasiert. Das ist hier kein Selbstzweck: --text, --muted
   und --border werden unter @media (prefers-contrast: more) neu gesetzt
   (site.css :root ab 2964). Ein hartcodierter Farbwert folgte dem nicht und
   waere fuer genau die Leser falsch, die den hoeheren Kontrast eingestellt
   haben.
   ========================================================================== */
.annahmestopp{
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    max-width: var(--content-width);
    margin: var(--space-md) auto;
    padding: var(--space-md);
    background: var(--warn-surface);
    /* Der Randbalken links traegt die Warnfarbe in voller Saettigung. Er ist
       das erste, was beim Ueberfliegen auffaellt, und mit 10,1:1 gegen den
       Seitengrund auch bei schlechten Bildschirmen sichtbar. */
    border: 1px solid var(--warn-border);
    border-left: 4px solid var(--warn);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

.annahmestopp-icon{
    flex: 0 0 auto;
    display: flex;
    color: var(--warn);
    /* Am Text ausgerichtet statt an der Kastenoberkante: die Ueberschrift
       hat eine eigene Zeilenhoehe, ohne das Padding sitzt das Symbol zu hoch. */
    padding-top: 2px;
}
.annahmestopp-icon svg{
    width: 24px;
    height: 24px;
}

.annahmestopp-text{
    /* Ohne min-width:0 sprengt ein langes Wort das Flex-Kind und damit die
       Seite in der Breite. */
    min-width: 0;
}

.annahmestopp-titel{
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--warn);
}

.annahmestopp-text p{
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--text);
    /* Lesbreite begrenzen. Ohne das laeuft der Absatz auf 1400 px Container
       ueber die volle Breite und wird auf dem Bildschirm unlesbar. */
    max-width: var(--content-width-text);
}
.annahmestopp-text p + p{
    margin-top: var(--space-sm);
}

/* Gedraengte Fassung direkt ueber dem Formular: dort steht der Hinweis zum
   zweiten Mal auf derselben Seite und soll den Blick nicht vom Formular
   ziehen, sondern ihn nur kurz aufhalten. */
.annahmestopp--formular{
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
}
.annahmestopp--formular .annahmestopp-titel{
    font-size: var(--fs-base);
}
.annahmestopp--formular .annahmestopp-icon svg{
    width: 20px;
    height: 20px;
}

@media (max-width: 575.98px){
    .annahmestopp{
        /* Auf schmalen Geraeten kostet das Symbol neben dem Text zu viel
           Breite - es wandert ueber die Ueberschrift. */
        flex-direction: column;
        gap: var(--space-xs);
        margin-left: var(--content-padding);
        margin-right: var(--content-padding);
        padding: var(--space-sm) var(--space-md);
    }
    .annahmestopp-icon{
        padding-top: 0;
    }
}

/* Der Randbalken ist im Druck die einzige Farbe, die nicht traegt. Umrandung
   und Ueberschrift muessen deshalb ohne Farbe erkennbar bleiben. */
@media print{
    .annahmestopp{
        background: none;
        border: 2px solid #000;
        border-left-width: 6px;
        box-shadow: none;
        color: #000;
    }
    .annahmestopp-titel,
    .annahmestopp-text p,
    .annahmestopp-icon{
        color: #000;
    }
}

/* ==========================================================================
   Sendungen · Einzeiler auf HEUTE und der eigene Reiter
   Markup: src/kundenportal/admin_dashboard.php · Daten: _sendungen.php

   Der Reiter ersetzt die Kachel, die bis zum 02.09.2026 auf der Startseite
   stand. Bewusst zurueckhaltend gefaerbt: ohne laufenden DHL-Abruf gibt es
   hier nichts zu alarmieren, und eine Liste, die grundlos rot ist, wird nicht
   mehr gelesen. Die Warnfarbe erscheint nur im Zustand "auffaellig" - und den
   vergibt _sendungen.php nur, wenn wirklich abgerufen wird.
   ========================================================================== */

/* --- Einzeiler unter dem Kachelraster ---------------------------------- */
.kp-heute-zeilen{
    display: grid;
    gap: 6px;
    margin-top: 10px;
}
.kp-heute-einzeiler{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 14px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: border-color .12s ease, background .12s ease;
}
.kp-heute-einzeiler:hover,
.kp-heute-einzeiler:focus-visible{
    border-color: var(--border-strong);
    background: var(--card);
}
.kp-heute-einzeiler-symbol{ flex: 0 0 auto; }
.kp-heute-einzeiler-text{
    /* min-width:0 gegen den Klassiker: ein langes Wort sprengt sonst das
       Flex-Kind und damit die Zeile. */
    min-width: 0;
    font-weight: 600;
}
.kp-heute-einzeiler-zusatz{
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--kp-heute-nebentext, var(--text-secondary));
    /* KEINE Warnfarbe: "Sendungsverfolgung nicht aktiv" ist eine Auskunft
       ueber den Betriebsumfang, keine Stoerung. */
}

/* --- Reiter Sendungen --------------------------------------------------- */
.kp-sd-kopf{ margin: 0 0 12px; }
.kp-sd-titel{ margin: 0 0 6px; font-size: var(--fs-lg); }

.kp-sd-hinweis{
    margin: 0;
    padding: 10px 14px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: var(--content-width-text);
}
.kp-sd-hinweis strong{ color: var(--text); }

.kp-sd-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.kp-sd-zahl{
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    font-size: .82em;
    font-variant-numeric: tabular-nums;
}
.kp-sd-sortknopf{ margin-left: auto; }

.kp-sd-leer{
    margin: 0;
    padding: 14px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Der Rahmen scrollt, nicht die Seite. Sonst schiebt die Tabelle auf schmalen
   Geraeten das ganze Layout nach rechts. */
.kp-sd-tabellenrahmen{
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-elevated);
}
.kp-sd-tabelle{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kp-sd-tabelle th,
.kp-sd-tabelle td{
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.kp-sd-tabelle thead th{
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--card);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.kp-sd-tabelle tbody tr:last-child td{ border-bottom: 0; }
.kp-sd-tabelle tbody tr:hover{ background: rgba(255,255,255,.03); }
.kp-sd-tabelle a{ color: var(--accent-light); text-decoration: none; }
.kp-sd-tabelle a:hover{ text-decoration: underline; }

/* Nummern in Monospace: Sendungs- und Auftragsnummern werden verglichen,
   nicht gelesen. Gleiche Zeichenbreite macht das Auge schnell. */
.kp-sd-nr{ font-family: var(--font-mono); font-size: 12px; }
.kp-sd-num{ text-align: right; font-variant-numeric: tabular-nums; }

.kp-sd-marke{
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.kp-sd-marke--unterwegs{ color: var(--accent-light); border-color: rgba(var(--accent-rgb), .45); }
/* Die EINZIGE Warnfarbe hier. Sie erscheint nur, wenn wirklich abgerufen
   wird - ohne Abruf vergibt _sendungen.php den Zustand gar nicht. */
.kp-sd-marke--auffaellig{ color: var(--warn); border-color: var(--warn-border); }
.kp-sd-marke--erledigt{ color: var(--muted); }

/* Erledigte treten zurueck, ohne unlesbar zu werden: 4,6:1 gegen die
   Tabellenflaeche, also weiter ueber der Grenze fuer normalen Text. */
.kp-sd-zeile--erledigt td{ color: var(--text-secondary); }

.kp-sd-fuss{
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: var(--content-width-text);
}

@media (max-width: 575.98px){
    .kp-sd-sortknopf{ margin-left: 0; }
    .kp-sd-tabelle th,
    .kp-sd-tabelle td{ padding: 8px 10px; }
}

/* ==========================================================================
   Adminportal: volle Bildschirmbreite (Vorgabe B1)
   Gesetzt wird sie ueber <body class="kp-admin-breit"> aus admin_dashboard.php.

   WARUM NICHT --content-width HOCHSETZEN
   Das Token in :root steht an ueber dreissig Stellen und traegt die Lesebreite
   der gesamten oeffentlichen Webseite. Ein Fliesstext, der auf 3440px ueber die
   volle Breite laeuft, ist unlesbar - 60 bis 80 Zeichen je Zeile sind kein
   Geschmack, sondern die Grenze, ab der das Auge die naechste Zeile nicht mehr
   findet. Die Breite gehoert also dem Adminportal, nicht allen.

   WARUM DIE ID IM ERSTEN SELEKTOR STEHT
   Der Deckel kommt aus "body:not(.kp-portal) main.card" mit !important. Gegen
   ein !important hilft nur ein !important mit HOEHERER Spezifitaet. Ohne
   #main-content stuenden beide bei (0,2,2) und die frueher notierte Regel
   gewaenne. Die ID ist hier Technik, keine Zierde.

   .wrap braucht keine Regel: es wird weiter unten in dieser Datei ohnehin auf
   100vw gesetzt und ist damit schon voll breit.
   ========================================================================== */
body.kp-admin-breit main.card#main-content{
    max-width: none !important;
    /* .wrap ist ein FLEX-Container. main.card ist damit ein Flex-Item und
       waechst NICHT von selbst auf die Elternbreite - es wird von seinem
       Inhalt bemessen, und die auto-Raender aus derselben Regel zentrieren
       den Rest. Auf 3440px stand der Inhalt dadurch bei 2085px, mit je
       654px Luft links und rechts.
       Gemessen im Browser; am Markup war davon nichts zu sehen, weil kein
       max-width mehr im Spiel war. Deshalb reicht "die Klasse ist gesetzt"
       als Nachweis nicht - es zaehlt die gemessene Breite. */
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.kp-admin-breit .kp-page{
    max-width: none;
    /* Aussenrand statt randlos: Inhalt, der die Bildschirmkante beruehrt, ist
       auf breiten Monitoren schwer zu fassen. clamp haelt ihn auf schmalen
       Geraeten klein und laesst ihn auf 3440px mitwachsen. */
    padding-inline: clamp(16px, 1.2vw, 40px);
}

/* ==========================================================================
   Adminportal auf breiten Monitoren (Vorgaben B3, B4)
   Greift NUR unter body.kp-admin-breit - die oeffentlichen Seiten sehen davon
   nichts. Farben, Radien und Abstaende kommen weiter aus den Tokens; geaendert
   werden Anordnung, Dichte und Breite, keine Optik.
   ========================================================================== */

/* --- B3 · Auftragsliste dichter ---------------------------------------- */
/* Die Tabelle bleibt eine Tabelle. Ein div-Raster saehe gleich aus, verloere
   aber die Spaltenausrichtung ueber die Zeilen hinweg - und genau die ist der
   Grund, warum man eine Liste ueberfliegen kann. */
body.kp-admin-breit .kp-orders-table th,
body.kp-admin-breit .kp-orders-table td{
    padding: 6px 10px;
    vertical-align: middle;
}
/* Nummern werden verglichen, nicht gelesen: gleiche Zeichenbreite, damit
   Ziffern untereinander stehen. */
body.kp-admin-breit .kp-orders-table .kp-td-nr,
body.kp-admin-breit .kp-orders-table .kp-td-num,
body.kp-admin-breit .kp-orders-table .kp-td-date{
    font-variant-numeric: tabular-nums;
}
body.kp-admin-breit .kp-orders-table .kp-td-num{ text-align: right; }
/* Ein Auftrag, der zwei Wochen im selben Status liegt, faellt auf - ohne
   Alarmfarbe, nur durch Gewicht. Farbe ist hier nicht das einzige Merkmal:
   die Zahl daneben sagt dasselbe. */
body.kp-admin-breit .kp-orders-table .kp-td-alt{
    color: var(--warn);
    font-weight: 600;
}
/* Kunden- und Statuszelle brachen bisher auf drei Zeilen um. Auf einer
   dichten Liste kostet das mehr als es bringt. */
body.kp-admin-breit .kp-orders-table .kp-td-device,
body.kp-admin-breit .kp-orders-table .kp-td-date{
    white-space: nowrap;
}
body.kp-admin-breit .kp-orders-table .kp-td-sub{
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

/* --- B4 · Detailseite mehrspaltig -------------------------------------- */
/* Ein Stapel aus vierzehn Bloecken. Auf 1440px bleibt er ein Stapel - dort ist
   nebeneinander nichts gewonnen. Ab 1600px wandern die kleinen, oft
   gebrauchten Bloecke in eine Leiste rechts, die beim Scrollen stehen bleibt;
   ab 2200px bekommt die Hauptspalte Gesellschaft.
   Auf dem Handy faellt alles wieder in einen Stapel - das ist der Ausgangs-
   zustand dieser Regeln, nicht ein Sonderfall am Ende. */
.kp-detail-raster{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.kp-detail-spalte{
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}
/* Bloecke, die die volle Breite brauchen (Vorschauen, Galerien, Historien) */
.kp-detail-breit{ grid-column: 1 / -1; min-width: 0; }

@media (min-width: 1600px){
    .kp-detail-raster{ grid-template-columns: minmax(0, 1fr) 380px; }
    .kp-detail-spalte--aktionen{
        position: sticky;
        /* 12px unter der Oberkante: die Leiste soll beim Scrollen sichtbar
           bleiben, ohne an der Kante zu kleben. */
        top: 12px;
        /* Wird die Leiste laenger als der Bildschirm, scrollt sie in sich -
           sonst waere ihr unteres Ende unerreichbar. */
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
}
@media (min-width: 2200px){
    .kp-detail-raster{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px; }
}

/* Das Feldraster der Kundeninformation ist auto-fit ohne Deckel: in einer
   3000px breiten Zeile ergaebe das fuenfzehn Spalten mit je einem Wort. */
body.kp-admin-breit .kp-order-detail-grid{
    grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
}
/* Dasselbe fuer die QR-Galerie - Vorschaubilder sollen nicht ins Riesenhafte
   wachsen, nur weil Platz da ist. */
body.kp-admin-breit .kp-qr-galerie{
    grid-template-columns: repeat(auto-fill, minmax(150px, 220px));
}

/* Sonderfilter-Chips (Verwaist, Zahlung offen). Sie beantworten andere Fragen
   als die Statuschips und schliessen sich mit ihnen nicht aus - der Abstand
   sagt das, ohne dass es jemand erklaeren muss. */
.kp-orders-filters .kp-chip-sonder:first-of-type{ margin-left: 12px; }

/* ==========================================================================
   Navigation des Adminportals (Vorgaben 1.1, 1.2)
   Markup: src/kundenportal/_adminnav.php

   Drei Gruppen statt elf Knoepfe in einer Reihe. Der Abstand zwischen den
   Gruppen ist die einzige Trennung - eine Linie waere ein zweites Element mit
   eigener Farbe, und die Gruppen sind ohnehin nur eine Leseerleichterung.
   ========================================================================== */
.kp-adminnav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    margin: 8px 0 16px;
}
.kp-adminnav-gruppe{ display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.kp-adminnav-knopf{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 34px hoch: ueber der Grenze, ab der ein Ziel auf dem Handy sicher zu
       treffen ist. ansichten.mjs misst genau das. */
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--card-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.kp-adminnav-knopf:hover{ border-color: var(--border-strong); color: var(--text); background: var(--card); }
.kp-adminnav-knopf:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.kp-adminnav-knopf.is-aktiv{
    background: rgba(var(--accent-rgb), .16);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}
/* currentColor: das Symbol nimmt die Schriftfarbe des Knopfes an und aendert
   sich mit Hover und aktivem Zustand mit. Genau das koennen Emoji nicht -
   deshalb sind sie hier raus. */
.kp-nav-symbol{ flex: 0 0 auto; width: 16px; height: 16px; }
.kp-adminnav-zahl{
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.10);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Rot NUR bei Handlungsbedarf. Ein rotes Abzeichen an jedem zweiten Reiter ist
   kein Alarm mehr, sondern Tapete. Die Zahl steht daneben, der Titel sagt
   worum es geht - Farbe ist nirgends das einzige Merkmal. */
.kp-adminnav-zahl--dringend{ background: rgba(220, 38, 38, .22); color: #FCA5A5; }

/* Handy: eine Zeile, waagerecht scrollbar. Umbruch auf vier Reihen kostet ein
   Drittel des Bildschirms, bevor der Inhalt anfaengt. */
@media (max-width: 767.98px){
    .kp-adminnav{
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px 14px;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    /* flex: 0 0 auto - sonst schrumpfen Gruppe und Chips (flex-shrink: 1)
       unter ihre Inhaltsbreite, und der nowrap-Text laeuft sichtbar in den
       Nachbarchip, statt dass die Zeile scrollt (Befund U, 04.09.2026). */
    .kp-adminnav-gruppe{ flex-wrap: nowrap; flex: 0 0 auto; }
    .kp-adminnav-knopf{ scroll-snap-align: start; flex: 0 0 auto; }
}

/* --- Reiter System (Vorgabe E3) ---------------------------------------- */
.kp-sys-raster{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
    max-width: var(--content-width);
}
.kp-sys-karte{
    min-width: 0;
    padding: 16px 18px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.kp-sys-titel{
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.kp-sys-gross{
    margin: 0 0 8px;
    font-size: var(--fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.kp-sys-klein{
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: var(--content-width-text);
}
.kp-sys-balken{
    height: 8px;
    margin: 0 0 8px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.kp-sys-balken-fuell{ display: block; height: 100%; border-radius: inherit; }
/* Farbe ist nie das einzige Merkmal: die Prozentzahl steht darunter, und ab
   der Warnschwelle sagt ein Satz im Klartext, was zu tun ist. */
.kp-sys-ok{ color: #4ADE80; background: #4ADE80; }
.kp-sys-warn{ color: var(--warn); background: var(--warn); }
.kp-sys-kritisch{ color: #FCA5A5; background: #DC2626; }
/* Auf dem Text-Element soll die Farbe nur die Schrift treffen, nicht den
   Hintergrund - sonst stuende die Zahl auf einem farbigen Balken. */
p.kp-sys-gross.kp-sys-ok,
p.kp-sys-gross.kp-sys-warn,
p.kp-sys-gross.kp-sys-kritisch{ background: none; }

/* --- HEUTE: Kacheln nach Inhalt bemessen (Vorgabe 1.3) ----------------- */
/* Kacheln mit Inhalt bekommen zwei Spalten, leere bleiben einzeilig. Vorher
   war jede Kachel gleich breit: eine Liste mit zwanzig Zeilen stand als
   schmaler Schacht neben drei Kacheln, in denen "nichts offen" stand. */
@media (min-width: 900px){
    .kp-heute-block--breit{ grid-column: span 2; }
}
/* Eine leere Kachel braucht keine Hoehe. Sie sagt einen Satz und tritt zurueck
   - sichtbar bleibt sie, damit man sieht, dass geprueft wurde. */
.kp-heute-block--leer{
    padding-block: 10px;
    opacity: .78;
}
.kp-heute-block--leer .kp-heute-leer{ margin-top: 2px; }

.kp-heute-alle{
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    text-decoration: none;
    white-space: nowrap;
}
.kp-heute-alle:hover{ text-decoration: underline; }

/* Der Einzeiler Systemzustand faerbt sich nach Fuellstand (1.3). Farbe ist
   nicht das einzige Merkmal: die Prozentzahl steht daneben. */
.kp-heute-einzeiler--warn{ border-color: var(--warn-border); }
.kp-heute-einzeiler--warn .kp-heute-einzeiler-zusatz{ color: var(--warn); font-weight: 600; }
.kp-heute-einzeiler--kritisch{ border-color: rgba(220,38,38,.5); }
.kp-heute-einzeiler--kritisch .kp-heute-einzeiler-zusatz{ color: #FCA5A5; font-weight: 700; }

/* ==========================================================================
   Seitennavigation (Vorgabe 1.4)
   Markup: kp_pager() in src/kundenportal/kp_admin_ui.php

   Die Klasse .kp-pager gab es seit Monaten im Markup und hatte in dieser
   Datei keine einzige Regel - die Navigation unter der Auftragsliste war
   ungestylt. Sie steht jetzt oben UND unten: bei fuenfzig Zeilen ist der
   untere Rand zwei Bildschirme entfernt.
   ========================================================================== */
.kp-pager{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 12px 0;
}
.kp-pager ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kp-pager a,
.kp-pager-aktiv,
.kp-pager ul span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 34px: dieselbe Trefferflaeche wie die Reiter. Auf dem Handy sind das
       die Knoepfe, die man am haeufigsten daneben trifft. */
    min-width: 34px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--card-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease;
}
.kp-pager a:hover{ border-color: var(--border-strong); color: var(--text); }
.kp-pager a:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.kp-pager-aktiv{
    background: rgba(var(--accent-rgb), .18);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 700;
}
/* Pfeile ohne Ziel und Auslassungspunkte: sichtbar, aber erkennbar untaetig. */
.kp-pager ul > li > span:not(.kp-pager-aktiv){ opacity: .45; }
.kp-pager-luecke{
    border: 0 !important;
    background: none !important;
    min-width: 18px !important;
    padding: 0 !important;
}
.kp-pager-rechts{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-left: auto;
}
.kp-pager-info{
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.kp-pager-proseite{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.kp-pager-proseite select{
    min-height: 32px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-elevated);
    color: var(--text);
    font-size: 12px;
}

/* Der Rahmen scrollt, nicht die Seite. */
.kp-orders-rahmen{ overflow-x: auto; }

@media (max-width: 575.98px){
    .kp-pager{ justify-content: center; }
    .kp-pager-rechts{ margin-left: 0; justify-content: center; width: 100%; }
}

/* --- Mehrfachauswahl in der Auftragsliste (Zusatz Z1) ------------------ */
.kp-sammel-leiste{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 10px;
    padding: 10px 14px;
    background: rgba(var(--accent-rgb), .10);
    border: 1px solid rgba(var(--accent-rgb), .35);
    border-radius: var(--radius);
    font-size: 13px;
}
.kp-sammel-zahl{ font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kp-sammel-grund{ display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.kp-sammel-grund input{
    min-width: 240px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-elevated);
    color: var(--text);
    font-size: 13px;
}
.kp-sammel-hinweis{ color: var(--text-secondary); font-size: 12px; }

.kp-td-wahl{ width: 34px; text-align: center; }
/* Die Kaestchen sind das kleinste Ziel der Liste. 18px plus Polsterung der
   Zelle ergibt eine Trefferflaeche, die auch auf dem Handy sitzt. */
.kp-td-wahl input[type="checkbox"]{ width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }

@media (max-width: 575.98px){
    .kp-sammel-grund{ width: 100%; }
    .kp-sammel-grund input{ min-width: 0; flex: 1 1 auto; }
}

/* ==========================================================================
   Auftragsliste: Spalten je Breitenstufe, Handy als Karten (Vorgabe 1.4)

   EIN Markup, drei Darstellungen. Eine zweite Kartenansicht im PHP waere ein
   zweiter Ort, an dem eine Spalte fehlen kann - und genau das ist bei der
   Zahlungsspalte schon einmal passiert.
   ========================================================================== */

/* Kopfzeile bleibt beim Scrollen stehen. Bei hundert Zeilen weiss man sonst
   in der Mitte nicht mehr, welche Spalte man liest. */
body.kp-admin-breit .kp-orders-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card);
}

/* Desktop (bis 1599): "Letzte Mail" faellt weg - sie ist die am wenigsten
   gebrauchte Angabe und steht in der Vorschau. */
@media (max-width: 1599.98px){
    .kp-orders-table th:nth-child(8),
    .kp-orders-table td:nth-child(8){ display: none; }
}
/* Zwischen Karte und vollem Schreibtisch (1200 bis 1439 px) bleiben nach dem
   Ausblenden von "Letzte Mail" und "Eingang" noch 35 px zuviel, und die
   Spalte "Aktion" ragte dadurch knapp aus dem Rahmen. Statt einer weiteren
   Spalte zu opfern bekommt der Geraetename hier eine Obergrenze: er ist die
   laengste Angabe der Zeile ("Platine / Steuerung Buderus Gas-Brennwert-
   Therme (BJ 2003) Logamax plus GB122-19 G20") und die einzige, die sich
   kuerzen laesst, ohne dass eine Auskunft verlorengeht - der volle Name
   steht in der Vorschau und auf der Auftragsseite. */
@media (min-width: 1200px){
    .kp-orders-table td[data-label="Gerät"],
    .kp-orders-table td[data-label="Grund"]{
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* Am breiten Schreibtisch darf der Name mehr Platz haben - dort ist er da. */
@media (min-width: 1600px){
    .kp-orders-table td[data-label="Gerät"],
    .kp-orders-table td[data-label="Grund"]{ max-width: 420px; }
}

/* Schmaler (bis 1439): zusaetzlich "Eingang" - das Alter im Status sagt mehr.
   Befund O2: die Grenze stand bei 1199,98 px und damit genau dort, wo der
   Kartenumbau beginnt - zwischen 1200 und 1439 px war also WEDER die Spalte
   ausgeblendet NOCH die Karte aktiv, und die Tabelle brauchte 1277 px in
   einem 1150 px breiten Rahmen. Status, Alter und Aktion standen ausserhalb. */
@media (max-width: 1439.98px){
    .kp-orders-table th:nth-child(9),
    .kp-orders-table td:nth-child(9){ display: none; }
}

/* --- Schmale Fenster: aus jeder Zeile eine Karte ----------------------- */
/*
   Befund O2 (14.09.2026): die Grenze stand bei 767,98 px - darueber blieb es
   bei der Tabelle, und die passt erst ab 1440 px wirklich hinein. Gemessen an
   der Generalprobe, Auftragsliste mit ihren neun Spalten:

     Fensterbreite   Tabelle braucht   sichtbar waren
        768 px          1185 px         Nr., Kunde
       1024 px          1185 px         Nr., Kunde, Geraet
       1100 px          1185 px         Nr., Kunde, Geraet
       1200 px          1277 px         + Status, Zahlung
       1440 px          1307 px         alles

   Zwischen 768 und 1199 px sah Chris also weder den Status noch das Alter
   noch die Schaltflaeche - sie standen rechts ausserhalb des Rahmens. Der
   Rahmen scrollt zwar waagerecht, aber ohne jeden Hinweis darauf, und eine
   Liste, in der man nach dem Status suchen muss, sortiert umsonst nach
   Handlungsbedarf.

   Die Karte zeigt bei jeder Breite ALLE Angaben. Sie ist damit in genau
   diesem Bereich die bessere Form - nicht die Notloesung fuers Handy, als
   die sie hier stand.
*/
@media (max-width: 1199.98px){
    .kp-orders-rahmen{ overflow-x: visible; }
    .kp-orders-table,
    .kp-orders-table tbody,
    .kp-orders-table tr,
    .kp-orders-table td{ display: block; width: auto; }
    /* Die Kopfzeile hat auf einer Karte keinen Sinn - jede Angabe traegt
       ihren Namen selbst (data-label). */
    .kp-orders-table thead{ display: none; }

    .kp-orders-table tbody tr{
        position: relative;
        margin: 0 0 10px;
        padding: 12px 14px 12px 46px;   /* Platz links fuer das Kaestchen */
        background: var(--card-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .kp-orders-table td{
        border: 0;
        padding: 3px 0;
        white-space: normal;
    }
    /* Die Beschriftung steht vor dem Wert, in Grau und klein. */
    .kp-orders-table td[data-label]::before{
        content: attr(data-label) " ";
        display: inline-block;
        min-width: 92px;
        color: var(--text-secondary);
        font-size: 11px;
    }
    /* Nr. und Kunde tragen die Karte - gross, ohne Beschriftung. */
    .kp-orders-table td.kp-td-nr::before,
    .kp-orders-table td[data-label="Kunde"]::before{ content: none; }
    .kp-orders-table td.kp-td-nr{ font-size: 15px; font-weight: 700; }
    .kp-orders-table td[data-label="Kunde"]{ font-size: 14px; margin-bottom: 4px; }

    /* Auf der Karte bleiben: Nr, Kunde, Geraet, Status, Alter, Zahlung.
     
       Befund H5 (14.09.2026): das Alter stand hier mit in der Ausblendliste,
       begruendet mit "steht in der Vorschau". Das war so lange richtig, wie
       die Vorschau am Handy ohnehin immer offen stand (Befund H4) - nur
       sieht man sie seit deren Behebung eben NICHT mehr, wenn sie zu ist.
     
       Das Alter ist aber genau die Angabe, nach der die Liste in ihrer
       Vorgabesortierung ordnet ("Handlungsbedarf zuerst"). Eine Liste, die
       nach einer Zahl sortiert, die sie nicht zeigt, ist auf dem Handy nicht
       nachvollziehbar. Chris' Vorgabe fuer diese Runde nennt die fuenf
       Angaben, die ohne Aufklappen dastehen muessen: Nummer, Kunde, Geraet,
       Status, Alter.
     
       Letzte Mail und Eingang bleiben weg: beide sind Datumsangaben, die man
       im Alltag nur beim genauen Hinsehen braucht, und beide stehen in der
       aufgeklappten Vorschau. */
    .kp-orders-table td[data-label="Letzte Mail"],
    .kp-orders-table td[data-label="Eingang"]{ display: none; }

    /* Status und Alter stehen auf der Karte NEBENEINANDER in einer Zeile:
       "In Diagnose   seit 174 T". Das spart eine Kartenzeile und stellt die
       beiden Angaben zusammen, die man auch zusammen liest - der Status sagt
       WAS ansteht, das Alter sagt WIE DRINGEND. */
    .kp-orders-table td[data-label="Status"]{
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        padding-right: 10px;
    }
    .kp-orders-table td[data-label="Alter"]{
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        padding-top: 0;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }
    .kp-orders-table td[data-label="Alter"]::before{
        content: "seit";
        min-width: 0;          /* die 92px der allgemeinen Regel gelten hier nicht */
        opacity: .8;
    }

    /* Die Zahlungszelle bleibt im Normalfall bewusst LEER (siehe den
       Kommentar in _auftragstabelle.php: eine Spalte, in der 42 von 50
       Zeilen dasselbe sagen, sagt nichts). Auf dem Rechner ist das eine
       leere Zelle in einer Spalte - auf der Handykarte wurde daraus eine
       eigene Zeile, die nur das Wort "Zahlung" zeigte und sonst nichts.
       34 Pixel je Karte, 1700 Pixel je Seite, fuer keine Aussage.
     
       :has() blendet genau die Zellen aus, in denen wirklich nichts steht;
       wo eine Zahlung vermerkt ist, bleibt die Zeile. */
    .kp-orders-table td[data-label="Zahlung"]:not(:has(span)){ display: none; }

    /* Der Geraetename wurde bisher an der Kartenkante abgeschnitten
       ("Platine / Steuerung Creality Sp"). Auf der Karte ist Platz nach
       unten, nicht nach rechts - also darf er umbrechen. */
    .kp-orders-table td[data-label="Gerät"]{
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Das Auswahlkaestchen sitzt oben links auf der Karte. */
    .kp-orders-table td.kp-td-wahl{
        position: absolute;
        top: 12px;
        left: 14px;
        padding: 0;
    }
    /* Der Knopf "Details" wird auf der Karte zur vollen Breite - mit dem
       Daumen zu treffen, ohne zu zielen. */
    .kp-orders-table td:last-child{ margin-top: 8px; }
    .kp-orders-table td:last-child a,
    .kp-orders-table td:last-child button{
        display: block;
        width: 100%;
        min-height: 40px;
        line-height: 38px;
        text-align: center;
    }
    /* Leerzeile: der colspan traegt auf einer Karte nicht mehr. */
    .kp-orders-table td.kp-td-empty{ text-align: center; padding: 18px 0; }
}

/* --- Trefferflaechen auf der Karte ------------------------------------- */
/* Dieselbe Grenze wie der Kartenumbau darueber (Befund O2): die Karte und
   ihre Trefferflaechen gehoeren zusammen. Stuende hier weiter 767,98 px,
   haette die Karte zwischen 768 und 1199 px winzige Klickziele. */
@media (max-width: 1199.98px){
    /* Die Auftragsnummer ist die Ueberschrift der Karte UND ihr Hauptziel.
       Als Inline-Link war sie 20px hoch - fuenfzig Ziele, die man mit dem
       Daumen nicht sicher trifft. */
    .kp-orders-table td.kp-td-nr a{
        display: block;
        min-height: 40px;
        line-height: 40px;
    }
    /* Die Sortierauswahl daneben. */
    .kp-sortleiste select{ min-height: 36px; }
}
/* Die Fusszeile gehoert allen Seiten, nicht nur dem Adminbereich. Ihre Links
   waren auf dem Handy 18px hoch. Mehr Trefferflaeche, ohne die Darstellung zu
   aendern: die Hoehe kommt aus dem Innenabstand, nicht aus der Schrift. */
@media (max-width: 767.98px){
    .footer-contact-link,
    .kp-cookie-link{
        display: inline-flex;
        align-items: center;
        min-height: 34px;
    }
}

/* --- Ausklappbare Vorschau in der Liste (Vorgabe 1.5, Abnahme A1) ------ */
/* Die ganze ZEILE ist der Schalter. Der frueher hier stehende Pfeil war ein
   26px grosses Ziel fuer etwas, das man staendig braucht - jetzt ist es die
   Zeile selbst. Links, Knoepfe und das Auswahlkaestchen darin behalten ihre
   eigene Wirkung; das entscheidet das Skript, nicht das Stylesheet. */
.kp-zeile--klappbar{ cursor: pointer; }
.kp-zeile--klappbar:focus-visible{
    outline: none;
    /* Der Fokusrahmen muss auf einer Tabellenzeile INNEN liegen: ein
       aeusserer wird von den Nachbarzellen ueberdeckt. */
    box-shadow: inset 0 0 0 2px var(--accent);
}
/* Die offene Zeile bleibt erkennbar, auch wenn die Vorschau lang ist. */
.kp-zeile--klappbar.is-auf > td{ background: rgba(var(--accent-rgb), .07); }
.kp-zeile--klappbar.is-auf > td:first-child{ box-shadow: inset 3px 0 0 var(--accent); }

/* Nur fuer Vorleseprogramme. Der Pfeil traegt sonst kein Wort. */
.kp-nur-vorleser{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.kp-vs-zeile > td{ padding: 0 !important; background: var(--bg-subtle); }
.kp-vs{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 22px;
    padding: 14px 16px 14px 46px;
    border-left: 3px solid var(--accent);
}
.kp-vs-feld{ min-width: 0; }
.kp-vs-feld h4{
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.kp-vs-feld p{ margin: 0 0 3px; font-size: 13px; line-height: 1.5; color: var(--text); }
.kp-vs-gross{ font-weight: 600; }
.kp-vs-leise{ color: var(--text-secondary) !important; font-size: 12px !important; }
.kp-vs-feld a{ color: var(--accent-light); text-decoration: none; }
.kp-vs-feld a:hover{ text-decoration: underline; }
/* Die Fehlerbeschreibung ist Fliesstext: drei Zeilen, dann abgeschnitten.
   Der ganze Text steht auf der Auftragsseite - hier zaehlt der erste Eindruck. */
.kp-vs-fehler{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    max-width: 60ch;
}
.kp-vs-notiz{
    margin-top: 6px !important;
    padding: 6px 8px;
    border-left: 2px solid var(--border-strong);
    background: rgba(255,255,255,.03);
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}
/* Die Wege nach unten stehen ueber die volle Breite, nicht in einer Spalte -
   sie gehoeren zur ganzen Vorschau, nicht zu einem ihrer Felder. */
.kp-vs-wege{
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}

@media (max-width: 767.98px){
    /* Auf dem Handy ist die Karte die Zeile - der Schalter ist die Karte. */
    .kp-orders-table tbody tr.kp-zeile--klappbar.is-auf{
        border-color: var(--accent);
        box-shadow: inset 3px 0 0 var(--accent);
    }
    .kp-vs{ grid-template-columns: 1fr; padding: 12px 14px; border-left-width: 3px; }

    /* Befund H4 (14.09.2026): hier stand ".kp-vs-zeile{ display:block !important }"
       ohne :not([hidden]).
     
       Die Vorschauzeile kommt aus _auftragstabelle.php mit dem Attribut hidden
       aus dem Server. Weiter oben (Zeile 7083) sorgt "[hidden]{ display:none
       !important }" dafuer, dass sie zu bleibt. Beide Regeln haben dieselbe
       Spezifitaet (0,1,0) und beide !important - also gewinnt die spaetere,
       und das ist diese hier. Auf dem Handy stand damit JEDE der 50 Vorschauen
       dauerhaft offen, und der Umschalter (ziel.hidden = !auf) blieb wirkungslos.
     
       In Zahlen, gemessen an der Generalprobe: die Auftragsliste war bei 375 px
       55.630 Pixel hoch statt 4.672 bei 768 px - Faktor 11,9. Das Archiv 58.098
       gegen 4.770. Wer einen Auftrag von weiter unten brauchte, scrollte an
       fuenfzig aufgeklappten Karten mit Telefonnummern und Mailadressen vorbei.
     
       :not([hidden]) laesst "hidden" wieder gewinnen, ohne die Kartenform
       anzutasten: geoeffnet ist die Vorschau weiterhin ein Block. */
    .kp-vs-zeile:not([hidden]){ display: block !important; margin: -8px 0 10px; }
    .kp-vs-zeile:not([hidden]) > td{ display: block !important; }
}

/* ==========================================================================
   AUFTRAGSSEITE, MEHRSPALTIG (Vorgabe 1.6)
   ==========================================================================

   Die Seite hatte einen Stapel aus dreizehn Klappen. Auf einem 3440er Schirm
   war das eine schmale Saeule in der Mitte und rechts und links nichts - und
   wer den Status aendern wollte, scrollte an allem vorbei bis nach unten.

   Die Aufteilung folgt der Frage, WANN man etwas braucht:

     Seitenleiste   was man TUT (Widerruf, Status, Archiv, Etikett)
     linke Spalte   wen und was man vor sich hat (Kunde, Notizen)
     Hauptspalte    was passiert ist (Zeitleiste, DHL, Aufnahmen)
     Fussbereich    Belege und Nachweise - breit und selten gebraucht

   Die Stufen: bis 1600 ein Stapel, ab 1600 zwei Spalten, ab 2200 drei. Die
   Zahlen sind nicht gegriffen, sondern die Punkte, an denen 380 px Leiste
   und 400 px Stammdaten noch eine Hauptspalte uebriglassen, in der eine
   Zeitleiste lesbar bleibt. */
.kp-auftrag{
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "leiste"
        "stamm"
        "haupt"
        "fuss";
}
.kp-auftrag-leiste{ grid-area: leiste; min-width: 0; }
.kp-auftrag-stamm { grid-area: stamm;  min-width: 0; }
.kp-auftrag-haupt { grid-area: haupt;  min-width: 0; }
.kp-auftrag-fuss  { grid-area: fuss;   min-width: 0; }

@media (min-width: 1600px){
    .kp-auftrag{
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas:
            "stamm leiste"
            "haupt leiste"
            "fuss  fuss";
    }
    /* align-self:start ist die Bedingung dafuer, dass sticky ueberhaupt
       greift: ein Rasterkind ist sonst so hoch wie seine Zeile, und was die
       volle Hoehe hat, kann nirgends kleben. */
    .kp-auftrag-leiste{
        position: sticky;
        top: 14px;
        align-self: start;
        max-height: calc(100vh - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (min-width: 2200px){
    .kp-auftrag{
        grid-template-columns: 400px minmax(0, 1fr) 380px;
        grid-template-areas:
            "stamm haupt leiste"
            "stamm haupt leiste"
            "fuss  fuss  fuss";
    }
}

/* Der Kopf: Nummer und Zustand links, der Weg zurueck rechts. Er steht
   ausserhalb des Rasters, weil er in jeder Stufe die volle Breite hat. */
.kp-auftrag-kopf{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.kp-auftrag-kopf-text{ min-width: 0; }
.kp-auftrag-kopf .kp-order-detail-title{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.kp-auftrag-kopf-zeile{
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
/* Ein Auftrag, der lange in seinem Status haengt, faellt hier auf - mit
   derselben Farbe wie "verwaist" in der Liste, damit es dasselbe bedeutet.
   Die Farbe ist NICHT das einzige Merkmal: der Text nennt die Tage. */
.kp-auftrag-seit[data-lange="1"]{
    color: var(--warn);
    font-weight: 600;
}

/* --- Seitenleiste --------------------------------------------------------
   Die Bloecke darin sind dieselben wie vorher, nur enger: Abstaende und
   Schriftgroessen der Aktionskaesten passen sich an 380 px an, statt dass
   jeder Kasten eine eigene Fassung bekommt. */
.kp-auftrag-leiste > *{ margin-top: 0; }
.kp-auftrag-leiste > * + *{ margin-top: 12px; }
.kp-auftrag-leiste .kp-order-status-change,
.kp-auftrag-leiste .kp-order-archive-section{
    margin-top: 0;
}
.kp-leiste-block{
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-elevated);
}
.kp-leiste-titel{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.kp-leiste-zeile{ margin: 0 0 8px; }
.kp-leiste-knopf{
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 8px 12px;
}
.kp-leiste-hinweis{
    display: block;
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted);
    word-break: break-all;
}

/* --- Rahmen fuer PDF-Vorschauen ------------------------------------------
   Vorher 400 px, fest, auf jedem Geraet. Auf dem Handy war das zu viel, auf
   einem 4K-Schirm ein Guckloch. 55vh mit Grenzen macht daraus eine Hoehe,
   die sich am Fenster orientiert - und der Deckel verhindert, dass die
   Vorschau die Seite uebernimmt. */
.kp-detail-rahmen{
    width: 100%;
    height: clamp(280px, 55vh, 720px);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
}
.kp-detail-rahmen--blank{ border: 0; }

/* --- Handyleiste ---------------------------------------------------------
   Nur am Handy: die drei Wege, die man an einem Auftrag wirklich geht. Sie
   klebt unten, deshalb bekommt die Seite unten Platz, damit die Leiste nichts
   verdeckt. Es sind Sprungziele, keine zweiten Formulare. */
.kp-auftrag-handyleiste{ display: none; }

@media (max-width: 760px){
    .kp-auftrag-handyleiste{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--card-elevated);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
    }
    .kp-auftrag-handyleiste a{
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        /* 44 px, damit der Daumen trifft - dieselbe Untergrenze wie in der
           Auftragsliste. */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--card);
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }
    .kp-auftrag-handyleiste a:active{ background: rgba(var(--accent-rgb), .14); }
    /* Platz fuer die Leiste, sonst liegt sie auf dem letzten Abschnitt. */
    body.kp-admin-breit .kp-order-detail{ padding-bottom: 74px; }
    /* Ein Sprungziel darf nicht unter dem Kopf der Seite landen. */
    #kp-status, #kp-archiv, #kp-dhl{ scroll-margin-top: 16px; }
}

/* ==========================================================================
   DRUCKGERAETE UND AUSLOESER (Teil 4, P3)
   ==========================================================================

   Die beiden Karten sind breiter als die uebrigen Systemkarten: in einer
   davon steht eine Tabelle, in der anderen vier Zeilen Text. Beide in eine
   300-px-Kachel zu zwingen hiesse, sie unlesbar zu machen, damit das Raster
   schoen bleibt. */
.kp-sys-karte--breit{ grid-column: 1 / -1; }

/* Der Token beim Anlegen. Er wird genau einmal gezeigt, also faellt er auf -
   wer ihn hier uebersieht, muss ein neues Geraet anlegen. */
.kp-druck-token{
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    background: rgba(var(--accent-rgb), .08);
}
.kp-druck-token strong{
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text);
}
.kp-druck-token code{
    display: block;
    /* Der Token ist 64 Zeichen lang und muss vollstaendig kopierbar sein -
       also umbrechen statt abschneiden, und in einer Schrift, in der 0 und O
       nicht gleich aussehen. */
    font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}
.kp-druck-token p{
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Der Zustand eines Geraets. Farbe UND Wort - die Farbe allein waere fuer
   jemanden mit Rotschwaeche keine Auskunft. */
.kp-druck-zustand{
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.kp-druck-zustand--da{ background: rgba(19, 122, 63, .16); color: #3ddc84; }
.kp-druck-zustand--still{ background: var(--warn-surface); color: var(--warn); }
.kp-druck-zustand--weg{ background: rgba(120, 120, 120, .18); color: var(--muted); }

.kp-druck-neu{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
}
.kp-druck-neu label{
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.kp-druck-neu input[type="text"]{
    /* width:auto gegen die globale Regel input{width:100%} - in einer Zeile
       mit dem Knopf daneben zoege sie ihn aus dem Bild. */
    width: auto;
    min-width: 200px;
    flex: 1 1 200px;
    padding: 8px 11px;
    font-size: 13px;
    border-radius: 8px;
}
.kp-druck-neu p{ flex: 1 0 100%; margin: 0; }

.kp-druck-schalter-zeile{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
}
.kp-druck-schalter-zeile input[type="checkbox"]{
    width: auto;
    flex: none;
    margin: 3px 0 0;
    /* 18px statt der Vorgabe: ein Schalter, der versehentlich den ganzen
       Betrieb umstellt, soll bewusst getroffen werden. */
    inline-size: 18px;
    block-size: 18px;
}
.kp-druck-schalter-zeile label{ margin: 0; font-size: 13px; color: var(--text); }
.kp-druck-schalter-zeile label strong{ font-weight: 700; }

/* ==========================================================================
   DIE STEUERZENTRALE (Vorgaben Y1 bis Y5)
   ==========================================================================

   Drei Bereiche untereinander in voller Breite: Zustand, Schalter, Wartung.
   Jeder Bereich ist ein Raster aus Karten; am Handy wird daraus ein Stapel,
   weil die Karten eine Mindestbreite haben und das Raster darunter umbricht.

   Trefferflaechen: Schalter und Knoepfe mindestens 34 Pixel. Ein Schalter,
   den man am Handy dreimal treffen muss, wird beim vierten Mal versehentlich
   umgelegt. */
.kp-sys-kopfzeile{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    margin: 0 0 12px;
    max-width: var(--content-width);
}
/* Der kurze Hinweis "aktualisiert" nach jeder Antwort. Er ist die einzige
   Bewegung auf der Seite - ohne ihn liesse sich nicht sehen, ob die Zahlen
   wirklich frisch sind oder nur alt aussehen. */
.kp-sys-puls{
    font-size: 11px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 1px 8px;
}
/* Unterseiten im Reiter System (14.10.2026): eine Leiste oben, je Aufruf
   nur ein Bereich sichtbar. Ohne CSS stuende alles untereinander wie
   vorher, nichts geht verloren. Teil 1a ersetzt die Leiste durch Unterreiter. */
.kp-sys-leiste{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    max-width: var(--content-width);
}
.kp-sys-leiste-knopf{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    font-size: 15px;
    text-decoration: none;
}
.kp-sys-leiste-knopf:hover{ border-color: var(--kp-accent); }
.kp-sys-leiste-knopf:focus-visible{ outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kp-sys-leiste-knopf[aria-current="page"]{ background: var(--kp-accent); border-color: var(--kp-accent); color: #fff; font-weight: 600; }
.kp-sys-leiste-text{ margin: 0 0 18px; }
.kp-sys-bereiche[data-aktiv] .kp-sys-bereich{ display: none; }
.kp-sys-bereiche[data-aktiv="zustand"]  .kp-sys-bereich[data-bereich="zustand"],
.kp-sys-bereiche[data-aktiv="telefon"]  .kp-sys-bereich[data-bereich="telefon"],
.kp-sys-bereiche[data-aktiv="ansagen"]  .kp-sys-bereich[data-bereich="ansagen"],
.kp-sys-bereiche[data-aktiv="schalter"] .kp-sys-bereich[data-bereich="schalter"],
.kp-sys-bereiche[data-aktiv="drucken"]  .kp-sys-bereich[data-bereich="drucken"],
.kp-sys-bereiche[data-aktiv="wartung"]  .kp-sys-bereich[data-bereich="wartung"]{ display: block; }
.kp-sys-bereich > .kp-sys-abschnitt:first-child{ margin-top: 4px; }
.kp-sys-weg{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
    padding: 12px 14px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--kp-accent);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}
.kp-sys-weg:hover,
.kp-sys-weg:focus-visible{ border-color: var(--kp-accent); outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kp-sys-weg strong{ font-size: 15px; }
.kp-sys-weg span{ font-size: 13px; color: var(--text-secondary); }
.kp-sys-weg-klein{ margin-top: 6px; }
.kp-sys-abschnitt{
    margin: 26px 0 10px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    max-width: var(--content-width);
}

/* Die Dienste: eine Zeile je Dienst, Punkt plus Satz. Der Punkt ist nie die
   einzige Auskunft - er steht neben dem Text, nicht statt seiner. */
.kp-sys-dienste{ list-style: none; margin: 8px 0 0; padding: 0; }
.kp-sys-dienst{
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    min-width: 0;
}
.kp-sys-dienst:last-child{ border-bottom: 0; }
.kp-sys-punkt{
    flex: none;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    margin-top: 5px;
}

/* Die Schalterformulare. */
.kp-sys-form{ margin: 10px 0 0; }
.kp-sys-feld{ margin: 0 0 12px; min-width: 0; }
.kp-sys-feld label{
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.kp-sys-feld input[type="text"],
.kp-sys-feld input[type="password"],
.kp-sys-feld input[type="number"],
.kp-sys-feld textarea,
.kp-sys-feld select{
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    /* 34 px Trefferflaeche am Handy (Vorgabe Y5). */
    min-block-size: 34px;
}
.kp-sys-feld .kp-sys-klein{ display: block; margin-top: 4px; }

/* --- Karte Fritz!Box (Einschub Chris 02.10.2026, Vertrag 2 Abschnitt 5) ---
   Links die Live-Anzeige, rechts die Bedienung; in einer schmalen Karte
   (Handy, schmales Fenster) steht die Anzeige ueber den Feldern. Gemessen
   wird die Karte, nicht das Fenster: im Reiter System ist sie breit, nach dem
   Umzug in Teil 1a vielleicht nicht mehr. */
.kp-fritz{ container-type: inline-size; }
.kp-fritz-raster{ display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.kp-fritz-raster > *{ min-width: 0; }
@container (min-width: 52rem){
    .kp-fritz-raster{ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
/* Punkt UND Wort: die Farbe ist Zusatz, "registriert" / "nicht registriert"
   / "abgemeldet (Anlage aus)" steht immer daneben. Grau ist die Vorgabe
   (aus, unbekannt); das Nachladen setzt data-stufe. */
.kp-fritz-status{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 6px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}
.kp-fritz-status .kp-fritz-punkt{
    inline-size: 14px;
    block-size: 14px;
    margin-top: 0;
    background: var(--text-secondary);
}
.kp-fritz-status[data-stufe="ja"] .kp-fritz-punkt{ background: #4ADE80; }
.kp-fritz-status[data-stufe="nein"] .kp-fritz-punkt{ background: #DC2626; box-shadow: 0 0 0 2px #FCA5A5; }
.kp-fritz-seit{ font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.kp-fritz-uebernahme{ color: var(--warn); font-weight: 600; }
.kp-fritz-uebernahme:empty{ display: none; }
.kp-fritz-werte{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 8px 0 10px;
    font-size: 13px;
    line-height: 1.5;
}
.kp-fritz-werte dt{ color: var(--text-secondary); }
.kp-fritz-werte dd{ margin: 0; color: var(--text); overflow-wrap: anywhere; }
@container (max-width: 26rem){
    .kp-fritz-werte{ grid-template-columns: minmax(0, 1fr); gap: 0; }
    .kp-fritz-werte dd{ margin-bottom: 6px; }
}
.kp-fritz-felder{ display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 14px; }
.kp-fritz-felder > *{ min-width: 0; }
/* 44 px Ziele und 16 px Schrift in den Feldern (sonst zoomt das iPhone). */
.kp-fritz .kp-sys-feld input[type="text"],
.kp-fritz .kp-sys-feld input[type="password"]{ min-block-size: 44px; font-size: 16px; }
.kp-fritz .rr-btn{ min-block-size: 44px; }
/* Die Saetze unter der Anzeige stehen sonst ohne Abstand aneinander. */
.kp-fritz-live > p.kp-sys-klein{ margin: 0 0 8px; }
.kp-fritz-erweitert{ margin: 0 0 12px; }
.kp-fritz-erweitert > summary{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    list-style: none;
}
.kp-fritz-erweitert > summary::-webkit-details-marker{ display: none; }
/* Als inline-flex verliert summary sein Dreieck: eigenes, das sich dreht. */
.kp-fritz-erweitert > summary::before{
    content: "";
    inline-size: 0;
    block-size: 0;
    border-block: 5px solid transparent;
    border-inline-start: 7px solid currentColor;
    transition: transform .15s ease;
}
.kp-fritz-erweitert[open] > summary::before{ transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce){
    .kp-fritz-erweitert > summary::before{ transition: none; }
}
.kp-fritz-erweitert > summary:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }
.kp-fritz-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.kp-fritz-knoepfe form{ margin: 0; }
/* Schalter Anlage aus als Stufe an der Bedienung (das Nachladen setzt
   data-stufe): bei an Anlage aus und Verbindung pruefen, bei aus Anlage an
   und der Satz zur Sperre. Unbekannt zeigt alles, der Handler entscheidet. */
.kp-fritz-bedienung[data-stufe="an"] .kp-fritz-nur-aus,
.kp-fritz-bedienung[data-stufe="aus"] .kp-fritz-nur-an{ display: none; }
/* In der Liste "Die Dienste" war ein Punkt ohne Stufe unsichtbar; eine
   abgemeldete Anlage (Stufe aus) und Unbekanntes bekommen dort Grau. */
.kp-sys-dienst .kp-sys-punkt.kp-sys-unbekannt{ background: var(--text-secondary); }

/* Die Kundentexte je Status: Freigabe und Vorschau. */
.kp-sys-texte{ list-style: none; margin: 8px 0 0; padding: 0; }
.kp-sys-texte > li{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-width: 0;
}
.kp-sys-texte > li:last-child{ border-bottom: 0; }
.kp-sys-vorschau{
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    min-width: 0;
}
/* Die Textvarianten eines Standes (Runde Statusmails, 22.09.2026) stehen
   eingerueckt unter ihm: eine Variante ist kein eigener Stand, und als
   gleichrangige Zeile laese sie sich wie einer. */
.kp-sys-texte .kp-sys-varianten{
    flex: 1 1 100%;
    margin: 2px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--border);
    min-width: 0;
}
.kp-sys-varianten > li{ padding: 4px 0; }
/* Die Bedingung einer Variante ist eine Angabe fuer Chris, kein Kundentext -
   deshalb aufrecht, der Kundentext darunter bleibt kursiv wie ueberall. */
.kp-sys-wann{ font-style: normal; }

/* Wartung: das Ergebnis steht unter dem Knopf und aendert sich live. */
.kp-sys-aktion .kp-sys-ergebnis{
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* "Protokoll ansehen": das eingesammelte Protokoll, scrollbar und in
   Schreibmaschinenschrift. Begrenzte Hoehe - drei Quellen mal hundert Zeilen
   wuerden sonst die ganze Wartungsspalte fluten. */
.kp-sys-protokolltext{
    margin: 10px 0 0;
    padding: 10px;
    max-height: 320px;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text);
    background: var(--surface-2, rgba(127,127,127,.08));
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Das Systemprotokoll. */
.kp-sys-protokoll{ list-style: none; margin: 8px 0 0; padding: 0; }
.kp-sys-protokoll > li{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-width: 0;
}
.kp-sys-protokoll > li:last-child{ border-bottom: 0; }

/* Die Warteschlange im Reiter System. */
.kp-sys-schlange{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 10px 0 0;
}
.kp-sys-schlange form{ margin: 0; }

@media (max-width: 760px){
    /* Am Handy ein Stapel - und Knoepfe, die man trifft. */
    .kp-sys-raster{ grid-template-columns: 1fr; }
    .kp-sys-form .rr-btn,
    .kp-sys-schlange .rr-btn{ min-block-size: 44px; }
    .kp-druck-schalter-zeile input[type="checkbox"]{ inline-size: 22px; block-size: 22px; }
}

/* ==========================================================================
   DHL-EINSTELLUNGEN IM REITER SYSTEM (Teil 5, D3)
   ==========================================================================

   Zwei Gruppen kurzer Felder: die Vorgabegewichte je Geraeteklasse und unsere
   Absenderanschrift. Beide sind Formulare zum Nachschlagen, nicht zum
   taeglichen Tippen - deshalb schmale Felder in einem Raster statt einer
   Spalte ueber die ganze Breite. */
.kp-dhl-einstellungen{ margin: 10px 0 0; }
.kp-sys-untertitel{
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.kp-dhl-gewichte,
.kp-dhl-absender{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
    margin: 8px 0 0;
}
/* min-width:0 an den Kindern: Grid-Kinder wachsen sonst ueber ihre Spalte
   hinaus, sobald ein Wert breiter wird. */
.kp-dhl-gewichte > p,
.kp-dhl-absender > p{ margin: 0; min-width: 0; }
.kp-dhl-gewichte label,
.kp-dhl-absender label{
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.kp-dhl-gewichte input[type="text"],
.kp-dhl-absender input[type="text"]{
    width: 100%;
    max-width: 100%;
    padding: 6px 9px;
    font-size: 13px;
    border-radius: 8px;
}
.kp-dhl-gewichte > p{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kp-dhl-gewichte > p label{ flex: 1 1 100%; }
.kp-dhl-gewichte input[type="text"]{ width: auto; flex: 0 1 90px; }

/* ==========================================================================
   ETIKETTEN AM AUFTRAG (Teil 4, P5/P8)
   ==========================================================================

   Vorher stand hier eine PDF-Vorschau im Rahmen. Sie beantwortete die falsche
   Frage: am Werktisch ist nicht wichtig, wie das Etikett aussieht, sondern ob
   es schon aus dem Drucker gekommen ist. Jetzt eine Zeile je Etikettart mit
   genau dieser Auskunft. */
.kp-etikett-zustand{
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
/* Farbe UND Wort. Der Text nennt den Zustand ohnehin aus; die Farbe macht ihn
   nur schneller findbar, sie ist nie die einzige Auskunft. */
.kp-etikett-zustand--gedruckt{ color: #3ddc84; }
.kp-etikett-zustand--offen{ color: var(--warn); }
.kp-etikett-zustand--fehler{ color: #ff6b6b; }
.kp-etikett-zustand--leer{ color: var(--muted); font-weight: 400; }

.kp-etikett-klein{
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}
.kp-etikett-aktionen{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kp-etikett-aktionen .rr-btn{ font-size: 12px; padding: 5px 11px; }

.kp-etikett-upload{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.kp-etikett-upload label{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
/* width:auto gegen die globalen Regeln select{width:100%} und
   input{width:100%} - in einer Zeile mit dem Knopf daneben zoegen sie ihn aus
   dem Bild. */
.kp-etikett-upload select,
.kp-etikett-upload input[type="file"]{
    width: auto;
    max-width: 100%;
    font-size: 13px;
}
.kp-etikett-upload p{ flex: 1 0 100%; margin: 0; }

/* ==========================================================================
   KUNDENANSICHT (Vorgabe 1.7)
   ==========================================================================

   Vorher stand ueber der Seite nur "Auftraege & Dokumente - 1042", und wer die
   Telefonnummer brauchte, ging ueber einen der Auftraege. Die Kopfkarte
   beantwortet die drei Fragen, die man an einen Kunden hat: wer, wie
   erreichbar, was liegt an. */
.kp-kunde-kopf{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-elevated);
}
.kp-kunde-kopf-text{ min-width: 0; }
.kp-kunde-name{
    margin: 0;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 700;
    color: var(--text);
}
.kp-kunde-zeile{
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.kp-kunde-zeile--klein{ font-size: 12px; color: var(--muted); }
/* Die Kundennummer ist eine Nummer, keine Prosa: Ziffern gleicher Breite
   machen sie beim Ueberfliegen vergleichbar. */
.kp-kunde-nr{
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}
.kp-kunde-kopf-wege{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kp-kunde-kopf-wege .rr-btn{ font-size: 12px; padding: 7px 13px; }
.kp-kunde-hinweis{ font-size: 12px; color: var(--muted); }

.kp-kunde-titel{
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.kp-kunde-titel:first-of-type{ margin-top: 0; }
.kp-kunde-leer{ margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.kp-doc-fehlt{ font-size: 12px; color: var(--muted); }

/* Die Belegliste als Raster statt als Aufzaehlung: bei einem Kunden mit zwoelf
   Rechnungen war die einspaltige Liste auf einem breiten Schirm eine sehr
   lange, sehr schmale Saeule. */
.kp-doc-liste{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* Der Zweizeiler ueber dem Upload des Annahmeformulars (Vorgabe 1.8). */
.kp-repairs-hinweis{
    margin: 0 0 14px;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ==========================================================================
   KLICKZIELE AM HANDY (Vorgabe 1.10)
   ==========================================================================

   Ein Verweis in einer Tabellenzelle ist so hoch wie seine Schrift - 14 bis
   19 Pixel. Mit dem Finger trifft man das nicht zuverlaessig; die WCAG nennt
   24 px als Untergrenze, Apple und Google nennen 44. Hier stehen 44 px als
   Mindesthoehe UND ein senkrechter Innenabstand, damit die Zeile dabei nicht
   auseinanderfaellt.

   Nur am Handy: auf dem Desktop zeigt eine Maus genau, und aufgeblasene
   Tabellenzeilen kosteten dort nur Platz. */
@media (max-width: 760px){
    .kp-orders-table td a,
    .kp-sd-tabelle td a,
    .kp-druck-geraete td a,
    .kp-etiketten td a,
    .akte-liste a,
    .kal-tag a,
    .kal-eintrag a{
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        /* Der waagerechte Abstand macht das Ziel auch breiter - eine
           vierstellige Nummer ist sonst 30 px breit und 32 hoch. */
        padding: 4px 2px;
    }
    /* Zwei Verweise in derselben Zelle sollen sich nicht beruehren: bei 32 px
       Hoehe liegen sie sonst Kante an Kante, und man trifft den falschen. */
    .kp-orders-table td a + a,
    .kp-sd-tabelle td a + a{ margin-left: 8px; }

    /* Knoepfe und Chips. Sie sind auf dem Desktop bewusst schmal (12 px
       Schrift, 5 px Polster) - am Handy trifft man das nicht. */
    .rr-btn,
    .kp-chip,
    .akte-chip,
    .kp-order-detail-close,
    .kp-etikett-aktionen .rr-btn,
    .kp-kunde-kopf-wege .rr-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* Verweise im Fliesstext der Auftragsseite: Rechtsdokumente, Sprungziele,
       Mail und Telefon. Sie stehen zwischen Woertern, deshalb NUR die Hoehe -
       ein Innenabstand risse den Satz auseinander. */
    .kp-auftrag a,
    .kp-kunde-zeile a{ display: inline-block; min-height: 44px; line-height: 44px; }

    /* Die letzten drei zu kleinen Ziele (Chris, 22.09.2026, Punkt 10): "alle"
       in den Kacheln HEUTE (17 px), der Kundenname im Auftragskopf (21 px)
       und Impressum/Datenschutz im Fuss des Adminbereichs (20 px). Sie stehen
       in Flexzeilen, die auf die Grundlinie ausrichten - der Text bleibt
       damit auf einer Hoehe mit seinen Nachbarn, nur die Zeile waechst. */
    .kp-heute-alle,
    .kp-auftrag-kopf-kunde,
    .footer-adminlink{
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* Die gepunktete Linie unter dem Kundennamen war ein Rahmen unten. Bei
       32 px Hoehe laege sie am Fuss des Kastens, eine halbe Zeile unter dem
       Namen - als Unterstreichung bleibt sie am Text. */
    .kp-auftrag-kopf-kunde{
        border-bottom: 0;
        text-decoration: underline dotted rgba(var(--accent-rgb), .5);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
    .kp-auftrag-kopf-kunde:hover,
    .kp-auftrag-kopf-kunde:focus-visible{ text-decoration-color: var(--accent); }

    /* Seit der Runde Anrufe (28.09.2026) gilt am Handy ueberall 44 px (Apple,
       Google, WCAG 2.5.5 AAA). Die Messung in scripts/test/ansichten.mjs zaehlt
       ab dieser Grenze; dazu kamen die Ziele, die die Regel oben nicht
       erfasste: die Reiterleiste (34 px), Auswahlfelder (32 bis 36 px), der
       Zurueckverweis im Kalender und die breiten Knoepfe im Reiter System
       (41 und 43 px). */
    .kp-adminnav-knopf,
    .kp-zurueck,
    .kp-page select,
    .kp-page .rr-btn,
    .kp-pager a,
    .kp-pager-aktiv,
    .kp-pager ul span{
        min-height: 44px;
    }
    .kp-adminnav-knopf,
    .kp-zurueck{
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   DESIGNSYSTEM: DICHTE UND ZAHLEN (Vorgabe 1.9)
   ==========================================================================

   Kein neues Framework, nur Konsistenz. Die Werte stehen hier gebuendelt am
   Ende, weil sie ueber mehrere aeltere Bloecke hinweg gelten und dort verteilt
   niemand mehr faende, was zusammengehoert.

   Tabellen 14 px, Nebenzeilen darin 13 px. Vorher waren die Zellen 13 px und
   die Nebenzeilen 11 - lesbar, aber eine Stufe zu eng fuer eine Liste, in der
   man den ganzen Tag Namen sucht. */
.kp-orders-table td,
.kp-sd-tabelle td,
.kp-druck-geraete td,
.kp-etiketten td{ font-size: 14px; }

/* Datumsspalten sind Metadaten, keine Namen: 13 px, wie die uebrigen
   Nebenangaben. Sie standen auf 12 - eine Stufe unter allem anderen, ohne
   dass es dafuer einen Grund gab. */
.kp-orders-table .kp-td-date{ font-size: 13px; }

.kp-orders-table .kp-td-sub,
.kp-sd-tabelle .kp-sd-sub,
.kp-etikett-klein,
.kp-sys-klein{ font-size: 13px; }

/* Zahlen, die untereinanderstehen, brauchen gleich breite Ziffern - sonst
   springen die Stellen von Zeile zu Zeile und man vergleicht Kommastellen,
   die nicht uebereinanderliegen. */
.kp-orders-table td,
.kp-sd-tabelle td,
.kp-druck-geraete td,
.kp-etiketten td,
.kp-td-num,
.kp-sd-num,
.kp-kunde-nr,
.akte-zeit{ font-variant-numeric: tabular-nums; }

/* Auftrags- und Belegnummern in fester Laufweite. Sie werden abgetippt,
   vorgelesen und verglichen; in einer Proportionalschrift sehen 0 und O,
   1 und l gleich aus. */
.kp-td-nr a,
.kp-doc-num,
.kp-nr-mono,
.kp-sd-nummer a{
    font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", "SF Mono",
                 Consolas, "Liberation Mono", monospace;
    /* Monospace-Schriften wirken bei gleicher Angabe groesser als die
       Grundschrift. Eine Stufe kleiner gleicht das aus. */
    font-size: 13px;
    letter-spacing: -.01em;
}

/* Abstaende auf dem Raster: Vielfache von 4. Hier standen 14 und 18 - Werte,
   die einzeln niemandem auffallen und zusammen dafuer sorgen, dass keine zwei
   Kaesten dieselbe Kante haben. */
.kp-sys-karte{ padding: 16px; }
.kp-kunde-kopf{ padding: 16px; }
.akte-karte{ padding: 12px 16px; }

/* Zahlungsstand mit Betrag (Vorgabe 1.4b). Drei Stufen statt zwei: eine
   Teilzahlung ist weder bezahlt noch offen, und sie als offen auszuweisen
   hiesse, einen Betrag anzumahnen, von dem die Hälfte schon da ist.

   Die Farben tragen die Auskunft NICHT allein - der Text nennt sie aus. */
.kp-pay-ok{ color: #3ddc84; font-weight: 700; }
.kp-pay-teil{ color: var(--warn); font-weight: 600; }
.kp-pay-offen{ color: var(--text); }
.kp-pay-leer{ color: var(--muted); }
/* Betraege werden verglichen, nicht gelesen: gleiche Ziffernbreite. */
.kp-pay-ok, .kp-pay-teil, .kp-pay-offen{ font-variant-numeric: tabular-nums; }

/* ==========================================================================
   DIE AUFTRAGSSEITE AM HANDY, NEU GEBAUT (Entscheidung 8 vom 04.09.2026)
   ==========================================================================

   Chris' Urteil ueber den alten Stand bei 390 px: unbrauchbar. Tabellen
   schoben die Seite breit, die feste Fussleiste verdeckte Inhalt, und die
   Bloecke standen in der Reihenfolge des Desktops, nicht der Arbeit.

   Der Umbau: die vier Rasterspalten (leiste/stamm/haupt/fuss) loesen sich
   am Handy auf (display:contents), ihre Bloecke werden selbst Rasterkinder
   der Auftragsseite - und DIE bestimmt die Reihenfolge per order, wie Chris
   sie vorgegeben hat: Status aendern, Kundeninformationen, Notizen,
   Zeitleiste, (QR-Aufnahmen), Etiketten, DHL, Reparaturannahme-PDF,
   (Belege, Entscheidungen), Status-Historie, Rechtsdokumente, Archivieren
   ZULETZT. Keine feste Leiste mehr, nichts uebereinander, 44 px
   Trefferflaechen. */
@media (max-width: 760px){
    /* Ohne die benannten Bereiche: sie gehoeren den vier Spalten, die es am
       Handy nicht mehr gibt - stehen sie da, laesst das Raster vier leere
       Reihen samt Abstaenden am Seitenanfang stehen. */
    .kp-auftrag{ grid-template-areas: none; grid-template-columns: minmax(0,1fr); }
    .kp-auftrag-leiste,
    .kp-auftrag-stamm,
    .kp-auftrag-haupt,
    .kp-auftrag-fuss{ display: contents; }

    /* Jeder Block traegt seinen Platz in der Reihenfolge selbst. */
    .kp-auftrag > * > *{ min-width: 0; }
    .kp-auftrag .kp-order-status-change{ order: 10; }   /* Status aendern + Widerruf */
    .kp-auftrag .kp-blk-kunde{           order: 20; }
    .kp-auftrag .kp-blk-notizen{         order: 30; }
    .kp-auftrag #kp-zeitleiste{          order: 40; }
    .kp-auftrag .kp-blk-qr{              order: 45; }
    .kp-auftrag #kp-etiketten{           order: 50; }
    .kp-auftrag #kp-dhl{                 order: 60; }
    .kp-auftrag .kp-blk-rrpdf{           order: 70; }
    .kp-auftrag .kp-blk-doks{            order: 75; }
    .kp-auftrag .kp-blk-od{              order: 78; }
    .kp-auftrag .kp-blk-historie{        order: 80; }
    .kp-auftrag .kp-blk-recht{           order: 90; }
    .kp-auftrag .kp-order-archive-section{ order: 100; } /* Archivieren zuletzt */

    /* Die Kurzbefehle der Seitenleiste zeigen auf Formulare, die am Handy
       ohnehin direkt darunter stehen - doppelte Knoepfe verwirren nur. */
    .kp-auftrag .kp-leiste-block{ display: none; }

    /* Die feste Fussleiste entfaellt (Entscheidung 8): sie verdeckte Inhalt.
       Ihre drei Ziele stehen jetzt in der Reihenfolge der Seite. */
    .kp-auftrag-handyleiste{ display: none !important; }
    body.kp-admin-breit .kp-order-detail{ padding-bottom: 12px; }

    /* Trefferflaechen 44 px auf der Auftragsseite. */
    .kp-order-detail .rr-btn,
    .kp-order-detail .kp-order-status-btns button,
    .kp-order-detail-close{ min-height: 44px; }
    .kp-order-detail input[type="text"],
    .kp-order-detail select{ min-height: 44px; }

    /* Das Nummernfeld von "An DHL uebergeben" passte nie in die Karte. */
    .kp-order-detail input[name="dhl_tracking_number"]{ width: 100%; max-width: 100%; }

    /* Der DHL-Kasten: Spurminimum 280 px lief bei ~260 px Inhalt ueber. */
    #kp-dhl [style*="grid-template-columns"]{ grid-template-columns: minmax(0,1fr) !important; }

    /* Die Etikettentabelle wird ein Kartenstapel: kein Querscrollen, die
       data-label-Beschriftungen (die das Markup laengst traegt) werden zur
       Zeilenueberschrift. */
    .kp-etiketten thead{ display: none; }
    .kp-etiketten, .kp-etiketten tbody, .kp-etiketten tr, .kp-etiketten td{ display: block; width: 100%; }
    .kp-etiketten td{ white-space: normal !important; padding: 4px 0 !important; border: 0 !important; }
    .kp-etiketten td::before{
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 2px;
    }
    .kp-etiketten tr{
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: var(--card-elevated);
    }
    .kp-sd-tabellenrahmen{ overflow: visible; }

    /* Angebots-Entscheidungen: die Audit-Tabelle bleibt eine Tabelle, aber
       sie darf nicht breiter sein als die Seite. */
    .kp-od-table{ table-layout: fixed; width: 100%; }
    .kp-od-table .kp-od-label{ width: 96px; }
    .kp-od-table td{ overflow-wrap: anywhere; }
    .kp-od-sig-wrap img{ max-width: 100%; height: auto; }

    /* Zeilen, die nicht umbrechen durften und deshalb ueberliefen. */
    .kp-order-doc-row{ flex-wrap: wrap; }
    .kp-blk-recht [style*="space-between"]{ flex-wrap: wrap; }

    /* Banner (Meldungen, Upload wieder offen, Annahmestopp) in voller
       Breite ueber dem Kopf - nie neben oder unter etwas anderem. */
    .kp-order-detail > .kp-orders-alert,
    .kp-order-detail > .kp-orders-alert--warn{ order: -1; width: 100%; }
}

/* --- Verwaltung: Benutzer, Rollen, Profil, Protokoll (E8b) --------------- */
.kp-profil-verweis{
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.kp-profil-verweis:hover{ color: var(--text); border-color: var(--border-strong); }
.kpv-formzeile{ display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.kpv-formzeile label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.kpv-formzeile input, .kpv-formzeile select{ min-height: 38px; }
.kpv-haken{ border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kpv-haken legend{ font-size: 12px; color: var(--muted); padding: 0 4px; }
.kpv-haken label, .kpv-hake{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.kpv-tabellenrahmen{ overflow-x: auto; }
.kpv-tabelle{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kpv-tabelle th, .kpv-tabelle td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.kpv-tabelle th{ color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.kpv-inaktiv td{ opacity: .55; }
.kpv-inline{ display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.kpv-knopf{ font-size: 12.5px; padding: 6px 10px; min-height: 34px; }
.kpv-handgriffe{ display: flex; flex-wrap: wrap; gap: 6px; }
.kpv-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.kpv-raster > .kpv-karte{ min-width: 0; }
.kpv-karte{ padding: 16px; border: 1px solid var(--border); border-radius: 10px; }
.kpv-karte h3{ margin: 0 0 10px; }
.kpv-karte label{ display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.kpv-karte label input{ display: block; width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 38px; }
.kpv-rechte-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.kpv-rechte-raster fieldset{ border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.kpv-rechte-raster legend{ font-size: 12px; color: var(--muted); padding: 0 4px; }
.kpv-rechte-raster label{ display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.kpv-geraete{ list-style: none; margin: 0; padding: 0; }
.kpv-geraete li{ display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kpv-ergebnis{ display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 12px; background: rgba(255,255,255,.08); }
.kpv-ergebnis--falsch, .kpv-ergebnis--abgelehnt, .kpv-ergebnis--gesperrt{ background: rgba(220,38,38,.22); color: #FCA5A5; }
.kpv-ergebnis--ok{ background: rgba(34,197,94,.18); color: #86EFAC; }

@media (max-width: 760px){
    /* Tabellen werden Karten: kein Querscroll, 44px-Ziele (Entscheidung 8 gilt weiter). */
    .kpv-tabelle thead{ display: none; }
    .kpv-tabelle, .kpv-tabelle tbody, .kpv-tabelle tr, .kpv-tabelle td{ display: block; width: 100%; box-sizing: border-box; }
    .kpv-tabelle tr{ border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 6px 10px; }
    .kpv-tabelle td{ border-bottom: 0; padding: 6px 0; }
    .kpv-tabelle td::before{ content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
    .kpv-knopf, .kpv-formzeile button, .kpv-karte button{ min-height: 44px; }
    .kpv-formzeile input, .kpv-formzeile select, .kpv-karte label input{ min-height: 44px; }
    .kp-profil-verweis{ min-height: 44px; display: inline-flex; align-items: center; }
    .kp-logout-form .rr-btn{ min-height: 44px; }
    .kp-order-doc-card button.rr-btn, .kp-order-doc-card a.rr-btn{ min-height: 44px; }
    /* Anmelde-, Typwahl- und Bestaetigungsseite (E8f): Daumenziele. */
    .kp-login-card button.rr-btn{ min-height: 44px; }
}