:root {
    --m6-primary:#1E4129;
    --m6-accent:#50C878;
    --m6-accent-soft:rgba(80,200,120,0.16);
    --m6-bg:#f6f7f8;
    --m6-text:#0f172a;
    --m6-text-soft:#6b7280;
    --m6-radius:1.2rem;
    --m6-shadow:0 18px 40px rgba(15,23,42,.12);
    --m6-danger:#dc2626;
    --m6-warn:#f97316;
    --m6-ok:#16a34a;
}

.m6-root {
    margin:0;
    padding:1.5rem 0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--m6-bg);
    color:var(--m6-text);
}

.m6-root * {
    box-sizing:border-box;
}

.m6-container {
    max-width:880px;
    margin:0 auto;
    padding:1.5rem;
}

.m6-header-eyebrow {
    font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--m6-text-soft);
}

.m6-header-title {
    font-size:1.6rem;
    margin:.2rem 0 .6rem;
}

.m6-header-sub {
    font-size:1rem;
    color:var(--m6-text-soft);
    line-height:1.4;
    max-width:42rem;
}

/* Sticky Progress */
.m6-progress-wrap {
    position:sticky;
    top:0;
    z-index:20;
    padding:0.7rem 0 0.6rem;
    background:linear-gradient(to bottom,rgba(246,247,248,0.96),rgba(246,247,248,0.9),transparent);
    backdrop-filter:blur(10px);
}
.m6-progress-inner {
    border-radius:999px;
    padding:.45rem .9rem;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(226,232,240,.9);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    display:flex;
    align-items:center;
    gap:.8rem;
}
.m6-progress-label-main {
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--m6-text-soft);
}
.m6-progress-label-sub {
    font-size:.8rem;
    color:var(--m6-text-soft);
}
.m6-progress-label-sub strong {
    color:var(--m6-primary);
}
.m6-progress {
    flex:1;
    height:8px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
}
.m6-progress-bar {
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--m6-primary),var(--m6-accent));
    transition:.25s ease;
}
.m6-progress-value {
    font-size:.82rem;
    font-weight:600;
    min-width:3rem;
    text-align:right;
    color:var(--m6-primary);
}

/* Blocks / Accordion */
.m6-section {
    margin-top:1.4rem;
}

.m6-block {
    margin-bottom:1.3rem;
    border-radius:var(--m6-radius);
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.m6-block:hover {
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(15,23,42,.09);
}
.m6-block-complete {
    border-color:var(--m6-accent);
    box-shadow:0 16px 34px rgba(16,185,129,0.18);
}

.m6-block-head {
    padding:.9rem 1.1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    background:linear-gradient(to right,rgba(80,200,120,0.09),transparent);
}
.m6-block-title-wrap {
    display:flex;
    flex-direction:column;
    gap:.1rem;
}
.m6-block-title {
    font-size:1.02rem;
    margin:0;
    font-weight:600;
}
.m6-block-sub {
    font-size:.86rem;
    color:var(--m6-text-soft);
    margin:0;
}
.m6-block-status {
    font-size:.78rem;
    padding:.14rem .6rem;
    border-radius:999px;
    background:#e5e7eb;
    color:#374151;
    white-space:nowrap;
}
.m6-block-status-complete {
    background:var(--m6-accent-soft);
    color:var(--m6-primary);
    font-weight:600;
}
.m6-block-toggle {
    margin-left:.6rem;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:.9rem;
    display:flex;
    align-items:center;
    padding:.2rem .4rem;
    border-radius:999px;
}
.m6-block-toggle-icon {
    display:inline-block;
    transform:rotate(0deg);
    transition:transform .18s ease;
}
.m6-block.is-collapsed .m6-block-toggle-icon {
    transform:rotate(-90deg);
}

.m6-block-body {
    padding:0.7rem 1.1rem 1.1rem;
    border-top:1px solid rgba(226,232,240,.9);
    animation:m6-fadeIn .18s ease-out;
}
.m6-block.is-collapsed .m6-block-body {
    display:none;
}

@keyframes m6-fadeIn {
    from {opacity:0;transform:translateY(-2px);}
    to {opacity:1;transform:translateY(0);}
}

.m6-label {
    display:block;
    font-weight:600;
    margin:.4rem 0 .2rem;
    font-size:.9rem;
}

.m6-textarea {
    width:100%;
    min-height:120px;
    border-radius:.9rem;
    border:1px solid #d1d5db;
    padding:.8rem;
    font-size:.95rem;
    resize:vertical;
    background:#f9fafb;
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.m6-textarea:focus {
    outline:none;
    border-color:var(--m6-accent);
    box-shadow:0 0 0 1px rgba(80,200,120,0.4);
    background:#fff;
}

/* Beispiele */
.m6-example-toggle {
    border:none;
    background:transparent;
    padding:0;
    margin:.1rem 0 .2rem;
    font-size:.8rem;
    color:var(--m6-primary);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:.2rem;
    text-decoration:underline;
    text-underline-offset:2px;
}
.m6-example {
    font-size:.8rem;
    color:var(--m6-text-soft);
    border-radius:.7rem;
    padding:.45rem .6rem;
    background:#f3f4f6;
    border:1px dashed #d1d5db;
    margin-bottom:.3rem;
    display:none;
}
.m6-example.is-open {
    display:block;
    animation:m6-fadeIn .18s ease-out;
}

/* Feld-Feedback */
.m6-feedback {
    margin-top:.35rem;
    font-size:.82rem;
    border-radius:.7rem;
    padding:.5rem .7rem;
    display:flex;
    flex-direction:column;
    gap:.18rem;
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition:opacity .16s ease, max-height .2s ease, margin-top .16s ease;
}
.m6-feedback.is-visible {
    opacity:1;
    max-height:300px;
    margin-top:.35rem;
}
.m6-feedback-low {
    background:#fef2f2;
    color:#991b1b;
    border:1px solid #fecaca;
}
.m6-feedback-mid {
    background:#fffbeb;
    color:#92400e;
    border:1px solid #fde68a;
}
.m6-feedback-high {
    background:#ecfdf5;
    color:#166534;
    border:1px solid #bbf7d0;
}

/* Gesamtbewertung */
.m6-overall {
    background:#fff;
    border-radius:var(--m6-radius);
    border:1px solid rgba(226,232,240,.9);
    box-shadow:var(--m6-shadow);
    padding:1.4rem 1.5rem;
    margin:1.8rem 0;
    font-size:.94rem;
}
.m6-overall-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.m6-overall-title {
    font-weight:600;
    margin:0 0 .3rem;
    font-size:1.05rem;
}
.m6-overall-score {
    font-size:1.6rem;
    font-weight:700;
    margin:.15rem 0;
}
.m6-overall-tag {
    display:inline-block;
    margin:.2rem 0;
    padding:.15rem .6rem;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
}
.m6-overall-low {
    color:#dc2626;
    background:#fee2e2;
}
.m6-overall-mid {
    color:#f97316;
    background:#ffedd5;
}
.m6-overall-high {
    color:#16a34a;
    background:#dcfce7;
}
.m6-overall-text {
    font-size:.9rem;
    color:var(--m6-text-soft);
    margin-top:.3rem;
}

/* Dimensionen */
.m6-dimensions {
    margin-top:1rem;
    border-top:1px dashed #e5e7eb;
    padding-top:.9rem;
}
.m6-dimensions-title {
    font-size:.83rem;
    font-weight:600;
    color:var(--m6-text-soft);
    margin-bottom:.4rem;
}
.m6-dim-row {
    display:flex;
    align-items:center;
    gap:.5rem;
    margin:.18rem 0;
    font-size:.8rem;
}
.m6-dim-label {
    width:8.5rem;
    color:#4b5563;
}
.m6-dim-bar-wrap {
    flex:1;
    height:6px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
}
.m6-dim-bar {
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--m6-primary),var(--m6-accent));
    transition:width .25s ease;
}
.m6-dim-value {
    width:2.3rem;
    text-align:right;
    font-variant-numeric:tabular-nums;
    color:var(--m6-text-soft);
}

/* Hinweisbox */
.m6-info {
    background:#fff3cd;
    border-left:4px solid #d4a017;
    border-radius:.9rem;
    padding:.9rem 1.1rem;
    font-size:.88rem;
    color:#4b5563;
    margin:1.8rem 0 1.4rem;
}

/* Buttons */
.m6-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-bottom:2rem;
}

.m6-btn {
    padding:.8rem 1.4rem;
    border-radius:999px;
    border:none;
    font-weight:600;
    cursor:pointer;
    font-size:.95rem;
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    transition:background .18s ease, transform .08s ease, box-shadow .18s ease;
    box-shadow:0 8px 18px rgba(15,23,42,.16);
}
.m6-btn:active {
    transform:translateY(1px);
    box-shadow:0 4px 10px rgba(15,23,42,.18);
}
.m6-btn-primary {
    background:var(--m6-primary);
    color:#fff;
}
.m6-btn-primary:hover { background:#16331e; }
.m6-btn-secondary {
    background:#e5e7eb;
    color:#111827;
    box-shadow:0 6px 14px rgba(15,23,42,.08);
}
.m6-btn-secondary:hover { background:#d1d5db; }

.m6-next {
    background:var(--m6-accent-soft);
    border-radius:var(--m6-radius);
    padding:1.4rem;
    font-size:.94rem;
    border:1px solid rgba(80,200,120,0.26);
}

@media(max-width:768px){
    .m6-container {padding:1rem;}
    .m6-block-head {
        align-items:flex-start;
        flex-direction:column;
        gap:.5rem;
    }
    .m6-block-toggle {
        align-self:flex-end;
    }
}