*,
*::before,
*::after{box-sizing:border-box}

:root{
    --blau:#0b5184;
    --blau-dunkel:#063d70;
    --gelb:#ffd21a;
    --text:#18364e;
    --grau:#687887;
    --rand:#cfdae2;
}

body{
    margin:0;
    min-width:280px;
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    background:linear-gradient(180deg,#4f78ad 0%,#eca936 58%,#d99227 100%);
}

.seite{
    width:min(1100px,100%);
    margin:12px auto;
    padding:20px;
}

.bereich{
    padding:28px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 30px rgb(0 0 0 / 15%);
}

.kopf{
    margin-bottom:24px;
    text-align:center;
}

.kopf p{
    margin:0 0 7px;
    color:var(--blau);
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.kopf h1{
    margin:0;
    color:var(--blau-dunkel);
    font-size:clamp(1.8rem,3.5vw,2.6rem);
}

.karten{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.karte{
    overflow:hidden;
    border:1px solid var(--rand);
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 18px rgb(0 0 0 / 10%);
}

.karte-bild{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
}

.karte-inhalt{padding:20px}
.karte h2{margin:0;color:var(--blau-dunkel)}
.meta{color:var(--grau);font-size:.9rem}
.untertitel{color:var(--blau);font-weight:700}
.kurztext,.langtext{line-height:1.7}
.langtext{margin-top:15px;padding-top:15px;border-top:1px solid var(--rand)}

.meldung{
    padding:20px;
    color:var(--blau);
    text-align:center;
    border-radius:12px;
    background:#edf6fb;
}

.meldung.fehler{
    color:#9b2020;
    background:#fff0f0;
}

.fuss{
    margin-top:28px;
    padding:22px;
    color:#fff;
    text-align:center;
    border-radius:16px;
    background:rgb(6 61 112 / 90%);
}

.fuss a{color:var(--gelb);font-weight:700}

@media(max-width:850px){
    .karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
    .seite{width:100%;margin:0;padding:12px}
    .bereich{padding:18px 14px;border-radius:14px}
    .karten{grid-template-columns:1fr}
}