/* Gemeinsames Aussehen von Warenkorb und Widerruf, angelehnt an sarei.de:
   blauvioletter Balken oben, weißer Kopf mit Logo, graue Fußzeile.
   Keine Webfonts von außen (Datenschutz) – Open Sans nur, wenn installiert. */

:root {
  --sarei: #333366;
  --sarei-hell: #e8e8f0;
  --grau: #e8e8e8;
  --text: #313131;
}

body {
  margin: 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; background: #f4f4f4; color: var(--text);
  /* Fußzeile am unteren Rand: main füllt den freien Platz */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.breite { max-width: 960px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
a { color: var(--sarei); }

/* Balken oben mit Kontakt, wie auf sarei.de */
.oben { background: var(--sarei); color: #fff; font-size: 13px; padding: 9px 0; }
.oben a { color: #fff; text-decoration: none; }

.kopf { background: #fff; border-bottom: 1px solid #ddd; }
.kopf .breite { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.kopf .logo img { display: block; width: 170px; height: auto; }
.kopf nav { margin-left: auto; display: flex; gap: 6px 24px; flex-wrap: wrap; }
.kopf nav a { color: #555; text-decoration: none; font-size: 16px; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a.aktiv { color: var(--sarei); border-bottom-color: var(--sarei); }

/* volle Breite, weil die automatischen Ränder im Flex-Layout sonst auf Inhaltsbreite schrumpfen */
main { flex: 1 0 auto; width: 100%; max-width: 960px; margin: 28px auto; padding: 0 16px; box-sizing: border-box; }
h1.seite { color: var(--sarei); font-weight: 400; font-size: 26px; margin: 0 0 18px; }

.karte { background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 16px; }

.meldung { border-radius: 2px; padding: 12px 16px; margin-bottom: 12px; font-size: 14px; }
.meldung.ok { background: #d1e7dd; color: #0f5132; }
.meldung.fehler { background: #f8d7da; color: #842029; }

button { font: inherit; padding: 5px 10px; border-radius: 2px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
button.haupt { background: var(--sarei); color: #fff; border-color: var(--sarei); padding: 9px 20px; }
button.haupt:hover { filter: brightness(1.2); }
input, textarea, select { font: inherit; padding: 6px 8px; border: 1px solid #ccc; border-radius: 2px; background: #fff; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--sarei); outline-offset: -1px; }

/* Honeypot: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fuss { background: var(--grau); border-top: 3px solid var(--sarei); font-size: 14px; padding: 18px 0 22px; margin-top: 32px; }
.fuss .breite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.fuss a { color: var(--sarei); font-weight: 600; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss a.widerruf { font-weight: 800; }
.fuss .copy { margin-left: auto; color: #666; font-size: 13px; }

@media (max-width: 640px) {
  .kopf .logo img { width: 130px; }
  .kopf nav { margin-left: 0; }
  .fuss .copy { margin-left: 0; width: 100%; }
}