.gallery {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .tile {
       margin: 0;
       position: relative;
       overflow: hidden;
       border-radius: 12px;
    }

    .tile img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
      border-radius: 12px;
    }

    .tile figcaption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 8px 12px;      
     background: rgba(0, 0, 0, 0.5);
     color: #fff;
     font: 500 0.9rem/1.4 system-ui, sans-serif;
     text-align: center;
    }

/* FAQ-TEIL*/
.faq{
    width:min(900px, 100% - clamp(1rem, 3vw, 2rem));
    margin-inline:auto;
    margin-block:clamp(1rem,4vw,2rem);
}
.faq h2{
    margin:0 0 .75rem;
    font-size:clamp(1.2rem, 1rem +1.2vw, 1.6rem);
    letter-spacing:-.01em;
}
.faq-list{display: flex; flex-direction: column; gap:.7rem}
details.faq-item{
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 14px);
    box-shadow: var(shadow, 0 4px 14px rgba(0,0,0,0.8));
    overflow: hidden;
    position: relative;
}

details.faq-item::before{
    content: ""; position: absolute; inset: 0 0 auto 0; height: .45rem;
    background:var(--accent, #3b82f6); opacity: .22; pointer-events: none;
}
.faq-item summary{
    list-style: none; display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1rem .75rem 1rem; cursor: pointer; outline:none;
}
.faq-item summary::-webkit-details-marker{display: none}
.faq-item .q{
    font-weight: 600; letter-spacing: -.01rem;
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.faq-item .toggle{
    margin-left: auto; width: 1rem; text-align: center; line-height: 1; font-weight: 700;
    color: var(--accent); font-size: .95rem;
}
.faq-item .toggle::before{content: "+";}
.faq-item[open] .toggle::beforey{content: "-";}

.faq-item .answer{ padding: 0 1rem 1rem 1rem; color: var(--muted, #6b7280);}
.faq-item p{margin: .1rem 0 0;}

.faq-item.blue {--accent:#3b82f6;}
.faq-item.green {--accent:#10b981;}
.faq-item.amber {--accent:#f59e0b;}
.faq-item.pink {--accent:#ec4899;}
.faq-item.purple {--accent:#8b5cf6;}
.faq-item.teal {--accent: #14b8a6;}

@media (prefers-reduced-motion: reduce){
    .faq-item{transition: none;}
}

/* Design für Karteikarten
*,*::before,*::after{box-sizing:border-box}
:root{
    color-scheme: light dark;

    /*Basis Palette */
    --c-bg:#f7f7fb;
    --c-card:#ffffff;
    --c-border:#e5e7eb;
    --c-text:#111827;
    --c-muted:#6b7280;
    --c-primary:#3b82f6;

    --bg:var(--c-bg);
    --card:var(--c-card);
    --border:var(--c-border);
    --text:var(--c-text);
    --muted:var(--c-muted);
    --primary:var(--c-primary);

    --radius:16px;
    --shadow:0 6px 24px rgba(0,0,0,.08);
    --card-vh:26vh;
    --card-height:clamp(14rem, var(--card-vh), 30rem);

}

@supports (height: 1svh){ :root{ --card-vh:26svh; } }

@media (prefers-color-scheme: dark){
    :root{
        --c-bg:#0f1220;
        --c-card:#12172a;
        --c-border: #222844;
        --c-text: #e8ecff;
        --c-muted:#a4aecd;
        --c-primary:#7aa2ff;
        --shadow:0 10px 30px rgba(0,0,0,.35);    
    }
}

body{
    margin:0;
    font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetiva Neue",Arial,sans-serif; background:var(--bg); color:var(--text);}
.container{width:min(1100px, 100% - clamp(1rem,3vw,3rem)); margin-inline:auto; padding-block:clamp(1rem,4vw,2rem);}
h1{font-size:clamp(1.35rem, 1rem + 2vw, 2rem); letter-spacing:-0.01em; margin:0 0 1rem;}

.grid{display:grid; gap:clamp(.8rem,1.2vw,1.2rem); grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr)) ;}


.card{
    position: relative;
    display: flex;
    flex-direction: column;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:1rem 1rem 1.1rem;
    min-height:var(--card-height);
    /* max-height:var(--card-height);*/
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    outline:none;
    container-type:inline-size;
}

.card::before{
    content:"";
    position: absolute;
    inset: 0 0 auto 0;
    height:.55rem;
    background:var(--accent,var(--primary));
    opacity:.18;
    pointer-events: none;
}

@media (hover: hover){
    .card:hover{ transform: translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.16);}
    .card:hover{ border-color: color-mix(in srgb, var(--accent,var(--primary)) 30%, var(--border));}
@supports not (color: color-mix(in srgb, white 50%, black)){
    .card:hover{border-color:var(--accent,var(--primary));}
    }
}

.card:focus-visible{outline:3px solid var(--accent,var(--primary)); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .card{transition:none} }

.card h3{font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); line-height:1.2; margin:.55rem 0 .45rem; letter-spacing:-.01em; color:var(--accent,var(--primary));}
.card a{ color: var(--accent,var(--primary));}
.card p{margin:0; color:var(--muted);}

.clamp{
    /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:8; line-clamp:8; overflow:hidden;}*/
    display: var(--clamp-display, -webkit-box);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: var(--clamp-overflow, hidden);
}
@container (min-width: 360px){ .clamp{ -webkit-line-clamp:9; line-clamp:9; } }
@container (min-width: 420px){ .clamp{ -webkit-line-clamp:10; line-clamp:10; } }

.grid.flexible .clamp{
    --clamp-display: block;
    --clamp-overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

@media (prefers-contrast: more){ .card{ box-shadow: none; border-color: var(--accent, var(--primary)); } .card:focus-visible{ outline-width: 4px; } }
@media (forced-colors: active){ .card{ border:1px solid CanvasText; box-shadow: none; } .card:focus-visible{ outline: 2px solid Highlight; } .card::before{ background: Highlight; opacity:.3 ;}}
@media print { body{ background: white; } .card{ box-shadow: none; border-color:#ddd; } }

.faq-item.blue {--accent:#3b82f6; }
.faq-item.green {--accent:#10b981; }
.faq-item.amber {--accent:#f59e0b; }
.faq-item.pink {--accent:#ec4899; }
.faq-item.purple { --accent:#8b5cf6; }
.faq-item.cyan {--accent:#06b6d4; }