/* canlist.de — gemeinsame Gestaltung für Startseite und Impressum.
   Bewusst eine einzige kleine Datei ohne externe Quellen: Die Seite wird auch
   von Postmaster-Teams und Prüfwerkzeugen abgerufen, und die sollen nichts
   nachladen müssen, um sie lesen zu können. */

:root {
    --grund:      #fbfaf8;
    --flaeche:    #ffffff;
    --rand:       #e4e0da;
    --text:       #221f1c;
    --text-leise: #6a645c;
    --gruen:      #4f7d34;   /* friedas */
    --beere:      #8d3659;   /* Fleischerei Stroh */
    --schatten:   0 1px 2px rgba(34,31,28,.05), 0 8px 28px rgba(34,31,28,.05);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grund:      #16150f;
        --flaeche:    #1f1e18;
        --rand:       #35332b;
        --text:       #f1eee7;
        --text-leise: #a8a196;
        --gruen:      #96c472;
        --beere:      #e290b0;
        --schatten:   0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}
.huelle { max-width: 44rem; margin: 0 auto; padding: 0 1.4rem 4rem; }

/* Kopf */
header { border-bottom: 1px solid var(--rand); margin-bottom: 2.6rem; }
.kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
        padding: 2.6rem 0 1.4rem; }
.marke { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.marke .punkt { color: var(--gruen); }
.kopf .rolle { color: var(--text-leise); font-size: .93rem; }
nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .93rem; }

h1 { font-size: 1.95rem; line-height: 1.25; letter-spacing: -.02em;
     margin: 0 0 .7rem; text-wrap: balance; }
h2 { font-size: 1.12rem; letter-spacing: -.01em; margin: 2.6rem 0 .6rem; }
h3 { font-size: .97rem; margin: 1.6rem 0 .3rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--beere); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gruen); }
a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; border-radius: 2px; }

.vorspann { font-size: 1.1rem; color: var(--text-leise); margin-bottom: 2rem; }

.karte { background: var(--flaeche); border: 1px solid var(--rand);
         border-radius: 12px; padding: 1.1rem 1.3rem; box-shadow: var(--schatten); }
.karten { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.karte h3 { margin-top: 0; }
.karte p:last-child { margin-bottom: 0; }

/* Partnerzeile */
.partner { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
           margin: 1.4rem 0 0; }
.partner .karte { border-top: 3px solid var(--gruen); }
.partner .karte.stroh { border-top-color: var(--beere); }

/* Technische Angaben: schmale Liste, keine Tabelle, damit sie auf dem Telefon
   nicht seitlich wegläuft. */
dl.fakten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem;
            margin: 0; font-size: .95rem; }
dl.fakten dt { color: var(--text-leise); }
dl.fakten dd { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: .89em; background: var(--grund); border: 1px solid var(--rand);
       border-radius: 5px; padding: .05em .4em; }

.hinweis { border-left: 3px solid var(--beere); padding: .1rem 0 .1rem 1rem;
           color: var(--text-leise); font-size: .95rem; margin: 1.2rem 0; }

footer { border-top: 1px solid var(--rand); margin-top: 3.4rem; padding-top: 1.2rem;
         color: var(--text-leise); font-size: .9rem;
         display: flex; gap: 1.1rem; flex-wrap: wrap; }
footer .rechts { margin-left: auto; }

@media (max-width: 34rem) {
    body { font-size: 16px; }
    h1 { font-size: 1.6rem; }
    dl.fakten { grid-template-columns: 1fr; gap: .1rem; }
    dl.fakten dd { margin-bottom: .6rem; }
}