.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.section { padding: 48px 0; border-top: 1px solid #000; }
.section--hero { padding-top: 64px; }
.section--cta { text-align: center; }
.header, .footer { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.header__inner, .footer__inner { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:12px 0; }
.nav__list { display:flex; gap:16px; margin:0; padding:0; list-style:none; }
.trust__list, .list, .quotes, .cards { margin:0; padding:0; list-style:none; }
.cards--services { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.steps { margin:16px 0; padding-left: 18px; }

/* File: assets/css/layout.css */

/* Sections & spacing */
.section { padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--c-border); }
.section:first-of-type { border-top: 0; }
.section--hero { background: var(--c-surface); }
.section--trust { background: linear-gradient(180deg, var(--c-surface), #FFF); }
.section--cta { background: var(--c-surface); }

/* Header & nav (works with partials/header.html) */
header { border-bottom:1px solid var(--c-border); background:#fff; position:sticky; top:0; z-index:50; }
header .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
header nav ul { display:flex; gap:18px; list-style:none; padding:0; margin:0; }
header nav a { padding:10px 12px; border-radius: var(--radius-chip); color: var(--c-text); }
header nav a:hover { background: var(--c-teal-100); color: var(--c-teal-700); transition: background .2s ease, color .2s ease; }

/* Footer */
footer { border-top:1px solid var(--c-border); background:#fff; }
footer .container { padding: 22px 0; color: var(--c-muted); }

/* Grid helpers */
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:900px){
    .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
    .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

/* Steps (Ablauf) */
.steps { counter-reset: step; list-style:none; padding:0; margin:0; }
.steps li { position:relative; padding-left:2.25rem; margin: .6rem 0; }
.steps li::before{
    counter-increment: step;
    content: counter(step) ".";
    position:absolute; left:0; top:0;
    width:1.6rem; height:1.6rem;
    display:grid; place-items:center;
    border-radius: var(--radius-chip);
    background: var(--c-teal-100);
    color: var(--c-teal-700);
    font-weight:600;
}

/* File: assets/css/components.css */

/* ---------- Buttons ---------- */
.btn{
    --bg:#fff; --fg:var(--c-text); --bd:var(--c-border);
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem;
    padding: .65rem .95rem;
    border:1px solid var(--bd);
    background: var(--bg);
    color: var(--fg);
    border-radius: var(--radius-squircle);
    box-shadow: var(--shadow-sm);
    cursor:pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-teal-400);
}
.btn:active{
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}
.btn:focus-visible{ box-shadow: var(--focus-ring), var(--shadow-md); }

.btn--primary{
    --bg: var(--c-teal-500);
    --fg: #fff;
    --bd: var(--c-teal-500);
}
.btn--primary:hover{
    --bg: var(--c-teal-600); --bd: var(--c-teal-600);
}
.btn--ghost{
    --bg: transparent; --bd: transparent; --fg: var(--c-teal-600);
}
.btn--ghost:hover{ background: var(--c-teal-100); border-color: transparent; }

/* Button sizes (optional) */
.btn--sm{ padding:.5rem .75rem; font-size:.95rem; }
.btn--lg{ padding:.85rem 1.15rem; font-size:1.05rem; }

/* Icon-only button shape (if used) */
.icon-btn{ width:40px; height:40px; padding:0; border-radius: var(--radius-squircle); }

/* ---------- Cards / Service-Teaser ---------- */
.cards{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; padding:0; }
.cards--services .card{
    list-style:none;
}
.cards--services .card a{
    display:block; text-align:center; padding:14px 12px; border:1px solid var(--c-border);
    border-radius: var(--radius-card); color: var(--c-text); background:#fff; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.cards--services .card a:hover{
    transform: translateY(-2px);
    border-color: var(--c-teal-400);
    box-shadow: var(--shadow-md);
    color: var(--c-teal-700);
}
@media (max-width:900px){
    .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
    .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- Quotes (Bewertungen) ---------- */
.quotes{ display:grid; gap:10px; grid-template-columns: 1fr; }
.quotes li{
    list-style:none; padding:12px 14px; background:#fff; border:1px solid var(--c-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}

/* ---------- FAQ ---------- */
details{
    border:1px solid var(--c-border);
    border-radius: var(--radius-card);
    background:#fff;
    padding:.6rem .9rem;
    box-shadow: var(--shadow-sm);
}
details + details{ margin-top:.6rem; }
summary{ cursor:pointer; font-weight:600; color: var(--c-text); }
details[open]{ border-color: var(--c-teal-400); box-shadow: var(--shadow-md); }

/* ---------- Forms (Kontakt / Schaden melden) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="file"],
textarea, select{
    width:100%; padding:.65rem .8rem;
    border:1px solid var(--c-border);
    border-radius: var(--radius-squircle);
    background:#fff; color: var(--c-text);
    box-shadow: var(--shadow-sm);
    transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
input:focus, textarea:focus, select:focus{ border-color: var(--c-teal-400); box-shadow: var(--focus-ring), var(--shadow-sm); }
input:hover, textarea:hover, select:hover{ border-color: var(--c-teal-400); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }

/* Helper chips/badges if needed */
.badge{
    display:inline-flex; align-items:center; padding:.25rem .55rem; gap:.35rem;
    background: var(--c-teal-100); color: var(--c-teal-700);
    border-radius: var(--radius-chip); font-weight:600; border:1px solid transparent;
}

/* ---------- Micro helpers ---------- */
.section .actions{ display:flex; gap:10px; flex-wrap:wrap; }
figure{ margin: 1rem 0; }