/* Christian Spiller Bodensysteme – statische Website
   Farben zentral hier anpassen: */
:root {
  --dunkel: #2b2f33;      /* Kopf/Fuß, Überschriften */
  --akzent: #dcc800;      /* Logo-Gold (exakt aus dem CS-Logo): Buttons, Linien, Flächen */
  --akzent-hell: #ece090;  /* helles Logo-Gold für Hover */
  --akzent-text: #7a6f00;  /* abgedunkeltes Logo-Gold für Links (Kontrast 5,1:1 auf Weiß) */
  --sand: #f1e8d4;         /* Fußzeile: warmer Sandton */
  --sand-dunkel: #ddcda9;
  --text: #2b2f33;
  --text-hell: #5c636a;
  --flaeche: #f3f2ef;     /* Betongrau, hell */
  --weiss: #ffffff;
  --linie: #dcdad5;
  --max: 1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--flaeche);
}

a { color: var(--akzent-text); }
a:hover { color: var(--dunkel); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 4px solid var(--akzent); }
.kopf .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.logo img { max-height: 90px; width: auto; }
.kopf-kontakt { font-size: 15px; text-align: right; color: var(--text-hell); }
.kopf-kontakt a { color: var(--dunkel); font-weight: 600; text-decoration: none; }

/* Navigation – ohne JavaScript */
.nav { background: var(--dunkel); }
.nav ul { list-style: none; margin: 0 auto; padding: 0 16px; max-width: var(--max); display: flex; flex-wrap: wrap; }
.nav a { display: block; padding: 12px 14px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a:focus { background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { background: var(--akzent); color: var(--dunkel); }

/* Inhalt */
main { padding: 32px 0 48px; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 28px; margin-bottom: 24px; }
h1, h2, h3 { color: var(--dunkel); line-height: 1.25; }
h1 { font-size: 30px; margin: 0 0 16px; }
h2 { font-size: 22px; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--linie); }
h2:first-child { margin-top: 0; }
h3 { font-size: 18px; margin: 20px 0 6px; }

.hinweis { color: var(--text-hell); font-size: 15px; }
.cta { display: inline-block; background: var(--akzent); color: var(--dunkel); padding: 10px 18px; border-radius: 3px; text-decoration: none; font-weight: 600; }
.cta:hover { background: var(--akzent-hell); color: var(--dunkel); }

/* Listen in Spalten */
.spalten { columns: 2 260px; column-gap: 32px; padding-left: 20px; }
.spalten li { break-inside: avoid; margin-bottom: 4px; }

.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bereich { border: 1px solid var(--linie); border-top: 3px solid var(--akzent); padding: 14px 18px; background: var(--flaeche); }
.bereich h3 { margin-top: 0; }
.bereich ul { margin: 0; padding-left: 18px; }

/* Bildraster */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--linie); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.galerie a:hover img { transform: scale(1.04); }

.person { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.person img { max-width: 220px; }

.kontakt-tabelle td { padding: 2px 16px 2px 0; vertical-align: top; }

/* Fuß */
.fuss { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-dunkel) 100%); border-top: 4px solid var(--akzent); color: var(--text); font-size: 15px; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.fuss a { color: var(--dunkel); }
.fuss strong { color: var(--dunkel); }
.fuss ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf .wrap { justify-content: center; text-align: center; }
  .kopf-kontakt { text-align: center; }
  .nav ul { padding: 0; }
  .nav a { padding: 10px 10px; font-size: 14px; }
  .karte { padding: 18px; }
  h1 { font-size: 24px; }
}

/* Löwen-Slogan im Kopf (jede Seite) */
.slogan { width: 300px; height: auto; }

/* Löwen in der Fußzeile */
.fuss .wrap { align-items: flex-end; position: relative; }
.fuss-bild { width: 170px; height: auto; margin-top: -90px; margin-bottom: -24px; }

@media (max-width: 640px) {
  .kopf .wrap { flex-direction: column; }
  .slogan { width: 240px; }
  .fuss-bild { width: 140px; margin: 0 auto -24px; }
}

/* Fußzeile immer am unteren Rand, auch bei kurzen Seiten */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* Fußzeile mit Steinteppich-Boden, Löwen stehen darauf */
.fuss {
  --boden: 64px;
  position: relative;
  background:
    url("../images/steinboden.jpg") left bottom / auto var(--boden) repeat-x,
    linear-gradient(180deg, var(--sand) 0%, var(--sand-dunkel) 100%);
  padding-bottom: var(--boden);
}
.fuss .wrap { align-items: flex-start; padding-bottom: 28px; position: static; }
.fuss .wrap > ul { padding-right: 8px; }
.fuss-bild {
  position: absolute; right: max(16px, calc((100% - var(--max)) / 2 + 16px));
  bottom: 16px;
  width: 170px; margin: 0;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.25));
}
.fuss .wrap { padding-right: 200px; }

@media (max-width: 640px) {
  .fuss { --boden: 52px; }
  .fuss .wrap { padding-right: 16px; padding-bottom: 100px; }
  .fuss-bild { width: 140px; right: 50%; transform: translateX(50%); bottom: 14px; }
}

/* Fußzeile: genug Höhe, damit die Goldlinie über den Löwenköpfen liegt */
.fuss { min-height: 210px; }

/* Lightbox-Galerie (reines CSS, kein JavaScript) */
.lightbox { display: none; }
.lightbox:target {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 1000; padding: 56px 64px;
}
.lb-hintergrund { position: absolute; inset: 0; background: rgba(20,20,20,.92); cursor: zoom-out; }
.lightbox img {
  position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); border: 4px solid #fff;
}
.lb-zu, .lb-vor, .lb-nach {
  position: absolute; color: #fff; text-decoration: none; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12);
  font-size: 34px; font-family: Arial, sans-serif;
}
.lb-zu:hover, .lb-vor:hover, .lb-nach:hover { background: var(--akzent); color: var(--dunkel); }
.lb-zu { top: 12px; right: 12px; }
.lb-vor { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-nach { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-zaehler { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ddd; font-size: 14px; }

@media (max-width: 640px) {
  .lightbox:target { padding: 60px 8px 50px; }
  .lb-vor, .lb-nach { top: auto; bottom: 6px; transform: none; }
  .lb-vor { left: 8px; } .lb-nach { right: 8px; }
}