/* ============================================================
   Seiteneigene Ergaenzungen: webseiten-erstellung.html
   Nur Komponenten, die system.css nicht abdeckt.
   Wird NACH system.css eingebunden.
   ============================================================ */

/* ---- Ruecksprung-Link ueber dem Hero ---- */
.crumb {
    display: inline-block;
    font-size: var(--fs-0);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
    color: var(--ink-4);
    text-decoration: none;
    transition: color .35s var(--ease);
}
.crumb:hover { color: var(--accent); }

/* ---- Werte in der Hero-Leiste ---- */
.hero-meta .v { color: var(--ink-2); }

/* ---- Check-Listen im dunklen Band ---- */
.dark-band .check-list li {
    color: rgba(255, 255, 255, .82);
    border-top-color: rgba(255, 255, 255, .16);
}
.dark-band .check-list li::before { color: #fff; }
.dark-band .check-list li a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Kundenzitat in der Projektzeile ---- */
.svc-quote {
    color: var(--ink-2);
    font-size: var(--fs-2);
    line-height: 1.7;
    max-width: 46ch;
    margin-bottom: 1.2rem;
}
.svc-quote strong { color: var(--ink); font-weight: 500; }

/* ---- Ausklappbare Vollrezension ---- */
.rev-more {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    max-width: 52ch;
    margin-bottom: 1.5rem;
}
.rev-more summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    padding: .95rem 0;
    font-size: var(--fs-1);
    font-weight: 500;
    color: var(--ink);
    transition: color .35s var(--ease);
}
.rev-more summary::-webkit-details-marker { display: none; }
.rev-more summary::after {
    content: "+";
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink-4);
    flex-shrink: 0;
    transition: transform .45s var(--ease), color .35s var(--ease);
}
.rev-more summary:hover { color: var(--accent); }
.rev-more[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.rev-more p {
    font-size: var(--fs-1);
    color: var(--ink-2);
    line-height: 1.72;
    margin-bottom: .9rem;
}
.rev-more p:last-child { margin-bottom: 0; padding-bottom: 1.3rem; }
.rev-more strong { color: var(--ink); font-weight: 500; }
.rev-more .rev-src { font-size: var(--fs-0); color: var(--ink-4); }

/* ---- Fliesstext im Notizblock unter den Projekten ---- */
.quotes-note p { color: var(--ink-2); }

/* ---- Gestapelte Aktionen im Kontaktpanel ---- */
.cta-actions {
    display: grid;
    gap: .85rem;
    align-content: start;
}

/* ---- Einleitung im dunklen Band nicht ueber die volle Breite ---- */
.dark-band > .wrap > p { max-width: 62ch; }