/* Die erfundene Firma hat ihr eigenes Aussehen -- das Widget soll sich in
   eine fremde Seite einfuegen, nicht in eine, die aussieht wie es selbst. */
:root {
  --tinte: #16302B;
  --papier: #FBF9F4;
  --karte: #FFFFFF;
  --see: #1C6E7E;
  --see-hell: #E4F1F3;
  --sand: #D9C7A5;
  --linie: #E6E0D4;
  --gedaempft: #5B6A66;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.6;
}

header.kopf {
  background: var(--karte);
  border-block-end: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopf-inhalt {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.marke {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  color: var(--tinte);
}
.marke span { color: var(--see); }
nav.haupt { margin-inline-start: auto; display: flex; gap: 20px; }
nav.haupt a {
  color: var(--gedaempft);
  text-decoration: none;
  font-family: system-ui, sans-serif;
  font-size: 15px;
}
nav.haupt a:hover, nav.haupt a[aria-current="page"] { color: var(--see); }

.buehne {
  background: linear-gradient(160deg, var(--see-hell), var(--papier));
  border-block-end: 1px solid var(--linie);
}
.buehne-inhalt {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px;
}
.buehne h1 { font-size: 40px; margin: 0 0 12px; line-height: 1.2; }
.buehne p { font-size: 19px; color: var(--gedaempft); max-width: 46ch; margin: 0; }

main { max-width: 1080px; margin: 0 auto; padding: 40px 24px 80px; }
h2 { font-size: 27px; margin: 40px 0 16px; }
h2:first-child { margin-block-start: 0; }
h3 { font-size: 19px; margin: 0 0 6px; }

.gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.objekt {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
}
.objekt .bild {
  height: 140px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B5A38;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
}
.objekt .text { padding: 16px; }
.objekt p { margin: 6px 0 0; color: var(--gedaempft); font-size: 15px; }
.preis { font-family: system-ui, sans-serif; font-weight: 600; color: var(--see); }

table.preise { width: 100%; border-collapse: collapse; background: var(--karte); }
table.preise th, table.preise td {
  text-align: start;
  padding: 10px 14px;
  border-block-end: 1px solid var(--linie);
  font-family: system-ui, sans-serif;
  font-size: 15px;
}
table.preise th { background: var(--see-hell); }

form.konto {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 20px;
  max-width: 520px;
  font-family: system-ui, sans-serif;
}
form.konto label { display: block; margin-block-end: 14px; font-size: 14px; color: var(--gedaempft); }
form.konto input {
  display: block;
  width: 100%;
  margin-block-start: 4px;
  padding: 9px 11px;
  font: inherit;
  border: 1px solid var(--linie);
  border-radius: 6px;
}
form.konto button {
  background: var(--see);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  font: inherit;
  cursor: pointer;
}
.kundennummer { font-family: ui-monospace, Menlo, monospace; }

.hinweiskasten {
  background: var(--see-hell);
  border-inline-start: 4px solid var(--see);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  margin-block-start: 32px;
}

footer.fuss {
  border-block-start: 1px solid var(--linie);
  padding: 24px;
  text-align: center;
  color: var(--gedaempft);
  font-family: system-ui, sans-serif;
  font-size: 13px;
}