/* insiegel-Webseite. Portal-Look nach Vorbild des Founders (30.09.2026 abends):
   Craigslist, TractorData, Affiliate-Seiten von 2003. Arial, dichter Text,
   drei Spalten, graue Balken als Abschnittsköpfe, Tabellen mit hellblauen
   Kopfzeilen, Standard-Linkfarben, großes Logo. Keine Schriftdatei, kein
   Dunkelmodus, keine Effekte. Ein Skript nur für den Cookie-Hinweis
   (consent.js). */

:root {
  color-scheme: light;
}

html {
  font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 700px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: #fff;
  color: #000;
}

a {
  color: #0000ee;
}

a:visited {
  color: #551a8b;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}

/* Sprungmarke zum Inhalt: unsichtbar, bis sie per Tab den Fokus bekommt. */
.skip {
  position: absolute;
  left: 8px;
  top: 4px;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* Seite: höchstens 1100 px breit, mittig. */
.seite,
body > header.site,
body > main,
body > footer.site {
  max-width: 1100px;
  margin: 0 auto;
}

/* Kopfband: grau, großes Logo links, Textlinks rechts. */
header.site .wrap,
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
  background: #e2e2e2;
  border-bottom: 2px solid #9a9a9a;
}

/* Schutzraum der Marke: rundum mindestens eine x-Höhe der Wortmarke. Bei 40 px
   Logohöhe sind das 18,0 px (x-Höhe 533 von 1182,8 Einheiten der SVG, mit dem
   Überhang der runden Buchstaben 546 Einheiten, also 18,5 px). Der Link um das
   Logo gibt 9 px oben und unten und 7 px seitlich dazu. Mit dem Innenabstand
   des Kopfbands (10 px, links 12 px) und den Lücken zu den Links (daneben
   16 px, darunter 10 px) sind es rundum mindestens 19 px. */
.brand {
  display: inline-block;
  line-height: 0;
  padding: 9px 7px;
}

/* Logo insiegel (Marke vom 03.10.2026): 40 px hoch, die Breite ergibt sich aus
   dem Seitenverhältnis der SVG (rund 4,35 : 1, also etwa 174 px). Die Marke
   verlangt mindestens 90 px Breite, das ist hier immer erfüllt. Die Seite hat
   keinen Dunkelmodus. Deshalb steht nur das helle Logo im HTML. */
.brand img.logo-light {
  height: 40px;
  width: auto;
}

nav.site {
  font-size: 0.95em;
}

nav.site a {
  margin-left: 14px;
  white-space: nowrap;
}

nav.site a:first-child {
  margin-left: 0;
}

/* Zeile unter dem Kopfband: Datum und Stand. */
.datum {
  margin: 0;
  padding: 4px 12px;
  background: #f4f4f4;
  border-bottom: 1px solid #ccc;
  font-size: 0.9em;
}

/* Drei Spalten: links Formular und Linklisten, Mitte Inhalt, rechts Fakten.
   Unter 900 px eine Spalte in der Reihenfolge des HTML. */
.spalten {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 230px;
  gap: 0 14px;
  padding: 10px 12px 0;
}

@media (max-width: 900px) {
  .spalten {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Kästen in den Seitenspalten. */
.box {
  border: 1px solid #b5b5b5;
  margin: 0 0 12px;
  background: #fff;
}

.box .bar {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #b5b5b5;
}

.box .innen {
  padding: 6px 8px;
}

.box ul {
  margin: 0;
  padding: 6px 8px;
  list-style: none;
}

.box li {
  margin: 0 0 3px;
}

.box ul a {
  text-decoration: none;
}

.box ul a:hover,
.box ul a:focus-visible {
  text-decoration: underline;
}

/* Abschnittsbalken, wie die grauen Kategorie-Köpfe bei Craigslist. */
.bar,
.row h2,
main > h2 {
  margin: 16px 0 6px;
  padding: 3px 6px;
  background: #e2e2e2;
  border: 1px solid #b5b5b5;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
}

main > h2:first-of-type {
  margin-top: 10px;
}

h1 {
  font-size: 2em;
  line-height: 1.1;
  margin: 4px 0 6px;
}

h3 {
  font-size: 1em;
  margin: 10px 0 3px;
}

p,
ul,
ol,
dl {
  margin: 0 0 8px;
}

main ul,
main ol {
  padding-left: 22px;
}

li {
  margin-bottom: 3px;
}

hr {
  border: 0;
  border-top: 1px solid #b5b5b5;
  margin: 12px 0;
}

.klein,
.form-note,
figcaption {
  font-size: 0.9em;
}

/* Rechtsseiten: Aufbau mit .hero und .row bleibt im HTML. */
body > main {
  padding: 6px 12px 12px;
}

.hero .kicker {
  margin: 8px 0 0;
  font-size: 0.9em;
  color: #333;
}

.hero h1 {
  margin-top: 2px;
}

.hero .lead {
  margin-bottom: 10px;
}

.row {
  margin-top: 4px;
}

.row h2 {
  margin-top: 14px;
}

.line {
  font-weight: bold;
  font-size: 1.1em;
  margin: 12px 0;
}

.line .accent {
  color: inherit;
}

/* Tabellen wie auf der Preisliste einer Seite von 2003: Rahmen, hellblaue
   Kopfzeile, jede zweite Zeile getönt. */
.tabelle {
  overflow-x: auto;
  margin: 0 0 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}

th,
td {
  border: 1px solid #9fb6cc;
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

thead th {
  background: #cfe0f0;
}

tbody th {
  background: #e9f1f8;
  font-weight: bold;
}

tbody tr:nth-child(even) td {
  background: #f3f7fb;
}

caption {
  text-align: left;
  font-weight: bold;
  padding: 0 0 3px;
}

/* Schmale Bildschirme: Spalten teilen sich die Breite, lange Wörter brechen. */
@media (max-width: 400px) {
  table {
    table-layout: fixed;
  }

  th,
  td {
    padding: 3px 4px;
    overflow-wrap: anywhere;
  }
}

/* Bilder: Ansichten aus der App, mit einfachem Rahmen. */
img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

figure img.shot {
  width: 100%;
  border: 1px solid #b5b5b5;
  display: block;
}

@media (max-width: 900px) {
  figure img.shot {
    width: 240px;
  }
}

figcaption {
  margin-top: 4px;
}

/* Formular: Browser-Standard, Schriftgröße geerbt, Knopf groß genug. */
input,
button {
  font: inherit;
}

form.waitlist {
  margin: 0;
}

form.waitlist label {
  display: block;
  margin-bottom: 3px;
  font-weight: bold;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

form.waitlist input[type="email"] {
  flex: 1 1 10em;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #7a7a7a;
}

form.waitlist button,
.button {
  padding: 7px 12px;
  min-height: 44px;
  font-weight: bold;
}

.form-note {
  margin: 6px 0 0;
  color: #333;
}

/* Tester-Knopf unter der Überschrift der Startseiten: ein Link, der wie ein
   Browser-Knopf aussieht. Grau, kein Blau (das gibt es nur im Logo). */
a.button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #767676;
  border-radius: 2px;
  background: #efefef;
  color: #000;
  font-size: 1.1em;
  text-decoration: none;
}

a.button:hover {
  background: #e2e2e2;
}

.qa dt {
  font-weight: bold;
  margin-top: 8px;
}

.qa dd {
  margin: 1px 0 0;
}

.stand dt {
  font-weight: bold;
  margin-top: 6px;
}

.stand dd {
  margin: 0;
}

.unterschrift {
  margin-top: 10px;
}

/* Fußzeile: graue Leiste wie das Kopfband. */
footer.site {
  margin-top: 16px;
  padding: 8px 12px 14px;
  background: #e2e2e2;
  border-top: 2px solid #9a9a9a;
  font-size: 0.9em;
}

footer.site p {
  margin: 0 0 4px;
}

footer.site nav {
  margin: 0 0 4px;
}

footer.site nav a {
  margin-right: 12px;
  display: inline-block;
  padding: 2px 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95em;
}

p,
li,
dd,
dt,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

/* Einleitung über die volle Breite, wie die Kopfzeile bei TractorData:
   große Überschrift, dichter Absatz, darunter die Spalten. */
.intro {
  padding: 8px 12px 0;
  border-bottom: 1px solid #b5b5b5;
  margin: 0 12px;
}

.intro h1 {
  margin-top: 6px;
}

/* Cookie-Hinweis (consent.js): Leiste am unteren Rand, die Seite bleibt
   bedienbar. Sticky am Ende von body, deshalb liegt sie am Seitenende unter
   der Fußzeile und verdeckt Impressum und Datenschutz nie. Beide Knöpfe
   gleich groß und gleich gestaltet. */
.consent {
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 12px;
  background: #f4f4f4;
  border-top: 2px solid #9a9a9a;
}

.consent p {
  margin: 0 0 6px;
}

.consent-knoepfe {
  display: flex;
  gap: 8px;
}

.consent-knoepfe .button {
  flex: 1 1 0;
  max-width: 14em;
}