/* Café Lindgrün – Layout 2014
   Absichtlich veraltet gestaltete Beispiel-Website (Philipp Steglich, 2026): feste Breite 960 px, kein viewport-meta,
   kleine Schrift, Kasten-Optik. Nur Systemschriften, keine externen Dateien. */

body {
  margin: 0;
  padding: 0 0 30px 0;
  background-color: #d8d2c0;
  background-image: repeating-linear-gradient(45deg, #d8d2c0 0, #d8d2c0 2px, #d1cab6 2px, #d1cab6 4px);
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: #4a4a4a;
}

a { color: #5f7f1f; }
a:hover { color: #8a6d3b; }
img { border: 0; }

/* Hinweisleiste der Firmenwebsite (nicht Teil des „alten“ Designs, wird für Aufnahmen ausgeblendet) */
/* Hinweisleiste (Philipp Steglich, nicht Teil der „alten“ Website). Seit 2026-10-12 (Prüfbericht B4): wächst auf Handys mit --vn-k
   (js/hinweis.js: Layoutbreite / Bildschirmbreite), damit sie trotz fehlendem viewport-meta mindestens 14 px groß und der Knopf 44 px hoch ist.
   Ohne Skript auf Touch-Geräten ein fester Faktor. */
:root { --vn-k: 1; }
@media (pointer: coarse) { :root { --vn-k: 2.4; } }
.vn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(8px * var(--vn-k)) calc(16px * var(--vn-k)); background: #0F1B29; color: #F3F1EB; font: 600 calc(14px * var(--vn-k))/1.35 "Segoe UI", system-ui, Arial, sans-serif; text-align: center; padding: calc(10px * var(--vn-k)) calc(14px * var(--vn-k)); }
.vn-bar span { max-width: 52em; }
.vn-bar a { display: inline-flex; align-items: center; min-height: calc(44px * var(--vn-k)); padding: 0 calc(16px * var(--vn-k)); border-radius: calc(6px * var(--vn-k)); background: #E5C07A; color: #0F1B29; text-decoration: none; white-space: nowrap; }
.vn-bar a:hover { text-decoration: underline; }
.vn-bar a:focus-visible { outline: calc(3px * var(--vn-k)) solid #F3F1EB; outline-offset: calc(2px * var(--vn-k)); }

#wrapper {
  width: 960px;
  margin: 0 auto;
  background: #fffdf6;
  -webkit-box-shadow: 0 0 10px #8d8571;
  box-shadow: 0 0 10px #8d8571;
}

#header {
  position: relative;
  height: 190px;
  background: #6d7f55 url(../img/banner.jpg) no-repeat center center;
  border-bottom: 4px solid #8a6d3b;
}
#header .logo {
  position: absolute;
  left: 28px;
  bottom: 30px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-style: italic;
  font-weight: normal;
  color: #ffffff;
  text-shadow: 2px 2px 3px #000000;
}
#header .slogan {
  position: absolute;
  left: 32px;
  bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  color: #f5edd2;
  text-shadow: 1px 1px 2px #000000;
}

#nav {
  height: 30px;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
  background: #6f8752;
  background-image: linear-gradient(#8ea372, #5d7544);
  border-top: 1px solid #a9bc8d;
  border-bottom: 1px solid #44582f;
}
#nav li { float: left; }
#nav a {
  display: block;
  padding: 0 15px;
  line-height: 30px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  border-right: 1px solid #4f6639;
  text-shadow: 1px 1px 0 #3c4e29;
}
#nav a:hover, #nav a.aktiv { background: #4f6639; background-image: linear-gradient(#6a8250, #4a6034); }

#main { overflow: hidden; }
#content { float: left; width: 615px; padding: 18px 20px 30px 25px; }
#sidebar { float: right; width: 255px; padding: 18px 25px 20px 0; }

h2 {
  margin: 0 0 12px 0;
  padding-bottom: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: normal;
  color: #6b4f2a;
  border-bottom: 1px dotted #c8b48a;
}
h3 { margin: 18px 0 6px 0; font-size: 12px; color: #6b4f2a; }
p { margin: 0 0 10px 0; }

.foto { float: right; margin: 2px 0 10px 15px; padding: 3px; background: #ffffff; border: 1px solid #cfc3a3; -webkit-box-shadow: 2px 2px 4px #b7ad93; box-shadow: 2px 2px 4px #b7ad93; }
.unterschrift { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 13px; color: #6b4f2a; }
.neu { color: #c0392b; font-weight: bold; }
.klein { font-size: 10px; color: #8a8a8a; }
.hinweis { clear: both; padding: 8px 10px; background: #fbf6e3; border: 1px dashed #d3c08f; }

.box { margin-bottom: 15px; border: 1px solid #d6caa8; background: #f6f0dc; }
.box h4 { margin: 0; padding: 5px 8px; background: #8a6d3b; color: #ffffff; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.box .inhalt { padding: 8px; }
.box .datum { font-weight: bold; color: #6b4f2a; }
.box hr { border: 0; border-top: 1px dotted #c8b48a; margin: 8px 0; }

.zaehler { text-align: center; }
.zaehler span { display: inline-block; margin-right: 1px; padding: 2px 3px; background: #1e1e1e; color: #8fd14f; font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight: bold; }

table.zeiten { border-collapse: collapse; font-size: 10px; color: #777777; }
table.zeiten td { padding: 1px 12px 1px 0; }

.pdf-link { font-weight: bold; }

#footer {
  clear: both;
  padding: 10px;
  background: #5d7544;
  color: #e8efd9;
  font-size: 10px;
  text-align: center;
}
#footer a { color: #ffffff; }