:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 2rem; line-height: 1.5; }
header { max-width: 900px; margin: 0 auto 1.5rem auto; }
main { max-width: 900px; margin: 0 auto; display: grid; gap: 1rem; }
.card { border: 1px solid rgba(127,127,127,.35); border-radius: 12px; padding: 1rem; }

/* geändert: baseline -> center (sieht mit Logo besser aus) */
.title { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* neu */
.logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 5px;
}

/* some logos need white bg, others render weird edges, so we have a dedicated class*/
.whitebg {background-color: white;}

h1 { margin: 0 0 .25rem 0; font-size: 1.6rem; }
h2 { margin: 0; font-size: 1.25rem; }
.meta { margin: .5rem 0 0 0; padding-left: 1.1rem; }
.meta li { margin: .25rem 0; }
.links { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .75rem; }
a { text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { opacity: .85; }
footer { max-width: 900px; margin: 2rem auto 0 auto; font-size: .95rem; opacity: .85; }
.hint { opacity: .85; margin-top: .5rem; }

.map {
    height: 450px; 
    width: 100%; 
    margin: 2rem auto; 
    border-radius: 12px; 
    border: 1px solid rgba(127,127,127,.35)
}