/* MINKA: Stil der öffentlichen Zone, Platzhalterfassung.
   Farbwerte kommen ausschließlich aus marke.css. Hier stehen Maße, Abstände
   und Bauteile. Diese Datei ist der Wegwerfteil; marke.css ist der bleibende.

   Mobil zuerst. Kein JavaScript, keine Schriften von fremden Servern. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--abgesetzt);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mitte{max-width:34rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:40em){.mitte{padding:0 1.5rem}}

/* Breite Ansicht. Grundsatz: die Textspalte bleibt auf Lesebreite, die
   zusaetzliche Breite geht in die ANORDNUNG, nicht in laengere Zeilen.
   Zeilen ueber rund 75 Zeichen lesen sich messbar schlechter. */
@media(min-width:60em){
  .mitte{max-width:56rem}
  .zeile{max-width:34rem}
  .karten{
    display:grid;grid-template-columns:1fr 1fr;
    gap:1.25rem;align-items:start;
  }
  .karte{margin-bottom:0}
  .karte:first-of-type{grid-column:1 / -1}
  .karte:first-of-type > *{max-width:34rem}
  footer{max-width:34rem}
}

/* ---------- Kopfleiste ----------
   Schmale Leiste wie bei einer gewoehnlichen Website: Wortmarke links,
   Sprachwahl rechts, eine Zeile. Der Einleitungssatz steht darunter auf
   hellem Grund, nicht in der Leiste. */
.band{background:var(--marke);color:var(--auf-marke);padding:.85rem 0}
@media(min-width:40em){.band{padding:1rem 0}}
.leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.sprachwahl{display:flex;justify-content:flex-end;margin:0}
.sprachwahl ul{
  display:flex;list-style:none;margin:0;padding:3px;gap:3px;
  border:1px solid var(--auf-marke-rand);border-radius:999px;
}
.sprachwahl a{
  display:block;padding:.3rem .8rem;border-radius:999px;
  color:var(--auf-marke);text-decoration:none;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;
}
.sprachwahl a:hover{background:var(--auf-marke-fuell)}
.sprachwahl a[aria-current="page"]{background:var(--auf-marke);color:var(--marke)}
.sprachwahl a:focus-visible{outline:2px solid var(--auf-marke);outline-offset:2px}

.wortmarke{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,6vw,1.7rem);
  letter-spacing:.16em;margin:0;line-height:1;
}
/* Einleitungssatz unter der Leiste, auf hellem Grund */
.zeile{
  margin:2rem 0 0;font-family:var(--serif);
  font-size:clamp(1.15rem,5vw,1.4rem);line-height:1.4;
  color:var(--text);max-width:30rem;
}

/* ---------- Karten ---------- */
.karten{padding:1.75rem 0 1.5rem}
.karte{
  background:var(--grund);border:1px solid var(--linie);border-radius:8px;
  padding:1.5rem 1.25rem 1.6rem;margin-bottom:1.25rem;
}
@media(min-width:40em){.karte{padding:2rem 2rem 2.1rem}}
.karte > *:last-child{margin-bottom:0}

.fuer{
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marke);font-weight:600;margin:0 0 .5rem;
}
h1.titel,h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;
   line-height:1.25;margin:0 0 .9rem}
p{margin:0 0 1rem}
.leise{color:var(--leise);font-size:.9375rem}

/* Herkunft des Namens */
.satz{
  font-family:var(--serif);font-size:1.25rem;line-height:1.35;
  color:var(--marke);margin:0 0 .8rem;
}

/* Hauptaktion: der einzige Ockereinsatz der Seite */
.aktion{
  display:block;text-align:center;background:var(--akzent);color:var(--text);
  font-weight:600;font-size:1.0625rem;line-height:1.3;
  padding:.9rem 1.25rem;border-radius:4px;text-decoration:none;
  border:1px solid var(--akzent-rand);margin:1.35rem 0 .7rem;
}
@media(min-width:34em){.aktion{display:inline-block}}
.aktion:hover{background:var(--akzent-hover)}
.aktion:focus-visible{outline:2px solid var(--marke);outline-offset:3px}
.unter-aktion{margin:0;color:var(--leise);font-size:.9375rem}

/* Die Aussage, die schützt */
.karte-schutz{border-left:4px solid var(--marke)}

a{color:var(--marke);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--marke);outline-offset:3px;border-radius:2px}

footer{padding:0 0 3rem;font-size:.875rem;line-height:1.55;color:var(--leise)}
footer p{margin:0 0 .5rem}