@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/sourceserif-latin.woff2') format('woff2'); }

:root {
  --ink: #131c26;
  --brick: #b4472c;
  --link: #0000cc;
  --besucht: #551a8b;
  --gruen: #008000;
  --grau: #666;
  --balken: #eef3f8;
  --balken-linie: #6f8fb8;
  --anzeige: #fbf1e4;
}

body { margin: 0; padding: 0 16px; background: #fff; color: #000; font: 13px/1.35 Arial, Helvetica, sans-serif; }
a { color: var(--link); }
a:visited { color: var(--besucht); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wortmarke: Farben der Website, dazu der harte Schlagschatten, den Logos um
   2000 alle hatten. Kein fremdes Logo, keine vier Logofarben. */
.marke { margin: 0; font: 600 76px/1 'Source Serif 4', Georgia, serif; letter-spacing: -1px; }
.marke a, .marke a:visited, a.marke, a.marke:visited { color: var(--ink); text-decoration: none; text-shadow: 3px 3px 0 #c9c2b3; }
.marke span { color: var(--brick); }
.marke small { display: block; margin-top: 2px; font: italic 400 15px Arial, sans-serif; letter-spacing: 0; color: var(--grau); text-align: right; padding-right: 8px; }
a.marke.klein { font: 600 34px/1 'Source Serif 4', Georgia, serif; text-shadow: 2px 2px 0 #c9c2b3; }

/* Dienstleiste oben, wie sie ab 2007 ueber jeder Suchseite stand */
.leiste { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0 -16px; padding: 6px 16px 5px; border-bottom: 1px solid #c9d7f1; font-size: 13px; }
.dienste a, .dienste b { margin-right: 10px; white-space: nowrap; }
.dienste b { color: #000; }
.konto { margin: 0; color: var(--grau); }

.feld { font: 16px Arial, sans-serif; padding: 2px 3px; border: 1px solid; border-color: #7f7f7f #c3c3c3 #c3c3c3 #7f7f7f; max-width: 100%; box-sizing: border-box; }
button { font: 13px Arial, sans-serif; padding: 3px 8px; background: #efefef; color: #000; border: 2px outset #e6e6e6; cursor: pointer; }
button:active { border-style: inset; }
button:focus-visible, a:focus-visible { outline: 2px dotted #000; outline-offset: 1px; }
.feld:focus { outline: 1px solid #7f9db9; outline-offset: 0; }

/* ---------- Startseite ---------- */
.start-mitte { max-width: 560px; margin: 0 auto; padding-top: 11vh; text-align: center; }
.start-mitte .marke { display: inline-block; margin-bottom: 26px; }
.start-mitte .feld { width: 100%; }
.knoepfe { margin: 12px 0 0; }
.knoepfe button { margin: 0 3px; }
.zaehler { margin-top: 34px; font-size: 12px; color: var(--grau); }

/* ---------- Trefferliste ---------- */
.kopf { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 14px 0 10px; }
.kopf form { flex: 1 1 320px; }
.kopf .feld { width: min(100%, 390px); }

.balken { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 3px 6px; margin: 0 -6px; background: var(--balken); border-top: 1px solid var(--balken-linie); font-size: 13px; }
.balken span { font-size: 12px; }

.ergebnisse { max-width: 42em; padding-top: 12px; }
.meinten { color: #c00; font-size: 15px; }

/* Anzeige: hinterlegt und beschriftet, wie es sich fuer eine Anzeige gehoert */
.anzeigen { position: relative; margin: 0 -8px 18px; padding: 8px 8px 9px; background: var(--anzeige); }
.anz-marke { position: absolute; right: 8px; top: 6px; font-size: 11px; color: var(--grau); }
.anzeigen .titel { font-size: 16px; }
.anzeigen p { margin: 2px 0 0; padding-right: 60px; }

/* Bilderzeile aus den Referenzen */
.bilder { margin: 0 0 18px; }
.bilder > .titel { font-size: 16px; }
.bildreihe { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 5px; }
.bildreihe a { display: flex; flex-direction: column; width: 128px; font-size: 11px; text-decoration: none; }
.bildreihe img { display: block; width: 128px; height: 80px; object-fit: cover; object-position: top; border: 1px solid #99c; }
.bildreihe a:hover img { border-color: var(--link); }
.bildreihe span { margin-top: 2px; color: var(--gruen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treffer { margin: 0 0 16px; }
.treffer .titel { font-size: 16px; }
.treffer p { margin: 1px 0 0; }
.adresse { color: var(--gruen); }
a.grau, a.grau:visited { color: #77c; white-space: nowrap; }
.adresse { word-break: break-all; }

.blaettern { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin: 26px 0 18px; font: 600 34px/1 'Source Serif 4', Georgia, serif; }
.blaettern .bu { color: var(--ink); }
.blaettern .i { display: inline-flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; }
.blaettern .i small { font: 400 13px Arial, sans-serif; color: var(--link); text-decoration: underline; margin-top: 3px; }
.blaettern .i.aktiv { color: var(--brick); }
.blaettern .i.aktiv small { color: #000; text-decoration: none; font-weight: 700; }
.blaettern .weiter { align-self: flex-end; font: 700 13px Arial, sans-serif; min-width: 70px; text-align: center; padding-bottom: 2px; }

.unten { padding: 8px 6px; margin: 0 -6px 0; background: var(--balken); text-align: center; }

.fuss { margin: 40px 0 24px; text-align: center; font-size: 12px; color: var(--grau); }
.fuss p { margin: 4px 0; }

@media (max-width: 560px) {
  .marke { font-size: 54px; }
  .knoepfe button { margin: 4px 2px; }
  .blaettern { font-size: 26px; }
  .blaettern .weiter { min-width: 0; padding: 0 6px 2px; }
}