/* CODA Multimedia – www.coda.de
   Farben, Linien und Aufbau nach dem Original von 2003, neu umgesetzt ohne Frames, Flash und Tabellenlayout. */

:root {
  --papier: #faf9f2;
  --linie: #7c7d79;
  --linie-hell: #d9d6cb;
  --text: #333333;
  --gedaempft: #6b6a64;
  --markierung: #f55216;
  --flaeche: #f1eeda;
  --akzent: #694a04;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --sans: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif;
}

/* Jede Rubrik hat – wie früher – ihre eigene Farbe */
.thema-home        { --akzent: #694a04; }
.thema-philosophie { --akzent: #5b4706; }
.thema-leistung    { --akzent: #2f5d1f; }
.thema-aktuelles   { --akzent: #357a5e; }
.thema-referenzen  { --akzent: #004b54; }
.thema-kontakt     { --akzent: #1d3f66; }
.thema-uns         { --akzent: #570205; }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 0.875rem/1.65 var(--sans);
}

img { max-width: 100%; height: auto; }

a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--markierung); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--akzent); color: #fff; padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- Seitenrahmen: die alten 1px-Linien links und rechts ---------- */
.seite {
  max-width: 920px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-inline: 1px solid var(--linie);
  background: var(--papier);
}

/* ---------- Kopf mit Navigation ---------- */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1rem 1.25rem 0;
  border-bottom: 1px solid var(--linie);
}

.marke {
  font: 600 1.35rem/1 var(--serif);
  letter-spacing: .08em;
  color: var(--akzent);
  padding-bottom: .7rem;
}
.marke span { font-weight: 400; color: var(--gedaempft); letter-spacing: .04em; }
.marke:hover { text-decoration: none; }

.kopf ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  margin: 0;
  padding: 0;
}

.kopf nav a {
  display: block;
  padding: .3rem 0 .45rem;
  border-bottom: 5px solid transparent;
  font: 1rem/1.2 var(--serif);
  letter-spacing: .03em;
  color: #222;
}
.kopf nav a:hover { text-decoration: none; border-bottom-color: var(--linie-hell); }
.kopf nav a[aria-current="page"] { border-bottom-color: var(--markierung); }

/* ---------- Bannerbild der Rubrik ---------- */
.banner {
  position: relative;
  margin: 2px 2px 0;
  border-bottom: 5px solid var(--markierung);
  line-height: 0;
}
.banner img { width: 100%; aspect-ratio: 758 / 197; object-fit: cover; display: block; }

.hero-title {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font: 600 clamp(2rem, 7vw, 4.5rem)/1 var(--serif);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, .45);
}
.hero-title span { display: block; font-size: .32em; font-weight: 400; letter-spacing: .5em; margin-top: .4em; }

/* ---------- Inhalt: Seitenbild links, Text rechts ---------- */
.inhalt {
  flex: 1;
  display: grid;
  grid-template-columns: 189px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 2rem 2rem 3rem 1.25rem;
}

.seitenbild { padding-top: 3.6rem; }
.seitenbild img { display: block; }

.text { max-width: 42rem; }

.text p { margin: 0 0 1em; }

/* Rubrik-Überschrift im Stil der alten „{ H o m e }“-Grafiken */
.titel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  font: 400 1.05rem/1 var(--serif);
  letter-spacing: .35em;
  color: var(--akzent);
}
.titel span::before { content: "{ "; color: var(--markierung); letter-spacing: .1em; }
.titel span::after  { content: " }"; color: var(--markierung); letter-spacing: .1em; }
.titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

h2 {
  font: 600 1.2rem/1.3 var(--serif);
  color: var(--akzent);
  margin: 2rem 0 .75rem;
}
h2:first-child { margin-top: 0; }
h3 { font: 600 1rem/1.35 var(--sans); color: var(--akzent); margin: 0 0 .25rem; }

b, strong { color: var(--akzent); }

hr {
  width: 65%;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--linie);
}

ul { padding-left: 1.2rem; }

.unterzeile { font-family: var(--serif); font-size: 1.05rem; color: var(--akzent); }
.gruss { font-family: var(--serif); font-size: 1.1rem; }
.hinweis { margin-top: 2rem; font-size: .8rem; color: var(--gedaempft); }

.zitat {
  margin: 0 0 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--markierung);
  font: italic 1.05rem/1.6 var(--serif);
}
.zitat.klein { margin-top: 2.5rem; font-size: .95rem; }
.zitat cite { display: block; margin-top: .3rem; font-size: .8rem; font-style: italic; color: var(--gedaempft); }

address { font-style: normal; margin-bottom: 1rem; }

/* ---------- Startseite: DVD-Hinweis ---------- */
.karte {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 2.5rem;
  padding: 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-hell);
  color: var(--text);
}
.karte:hover { text-decoration: none; border-color: var(--akzent); }
.karte img { width: 110px; flex: none; }
.karte strong { display: block; font-family: var(--serif); font-size: 1.05rem; margin-bottom: .3rem; }
.karte em { display: block; margin-top: .5rem; font-style: normal; color: var(--akzent); }

/* ---------- Leistung: Zeitleiste ---------- */
.zeitleiste {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
  border-left: 1px solid var(--linie);
}
.zeitleiste li { position: relative; padding: .15rem 0 .15rem 1.25rem; }
.zeitleiste li::before {
  content: "";
  position: absolute; left: -4px; top: .7em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
}
.zeitleiste li:last-child::before { background: var(--markierung); }
.zeitleiste time { display: inline-block; min-width: 3.3rem; font-weight: bold; color: var(--akzent); }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.kontakt b { display: block; margin-bottom: .4rem; font-family: var(--serif); font-size: 1.05rem; }

/* ---------- Über uns: Termine ---------- */
.termine { border-collapse: collapse; margin: 1.5rem 0; width: 100%; }
.termine caption { text-align: left; font: 600 1rem var(--serif); color: var(--akzent); padding-bottom: .4rem; }
.termine th, .termine td { text-align: left; padding: .45rem .75rem .45rem 0; border-bottom: 1px solid var(--linie-hell); vertical-align: top; }
.termine th { font-weight: normal; color: var(--gedaempft); }

/* ---------- AGB ---------- */
.agb section { margin-bottom: 1.5rem; }
.agb dl { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem .5rem; margin: 0; }
.agb dt { font-weight: bold; color: var(--akzent); }
.agb dd { margin: 0 0 .4rem; }

/* ---------- Zwei Spalten mit Abbildung ---------- */
.spalten { display: flex; gap: 1.5rem; align-items: flex-start; }
.spalten > div { flex: 1; }
.spalten figure { margin: 0; flex: none; max-width: 40%; }

.bestellung {
  display: flex; gap: 1.25rem; align-items: center;
  margin-top: 1.5rem; padding: 1rem;
  background: var(--flaeche); border: 1px solid var(--linie-hell);
}
.bestellung img { width: 130px; flex: none; }
.bestellung p { margin: 0; }

/* ---------- Referenzen ---------- */
.unternav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: -1rem 0 2rem; }
.unternav a {
  display: block; padding: .2rem .7rem;
  border: 1px solid var(--linie-hell); border-radius: 999px;
  font-size: .8rem;
}
.unternav a:hover { text-decoration: none; border-color: var(--akzent); }
.unternav a[aria-current="page"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.kacheln { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.kacheln a {
  display: block; padding: 1rem 1.1rem;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-left: 4px solid var(--akzent);
  font: 1.05rem var(--serif); color: var(--akzent);
}
.kacheln a:hover { text-decoration: none; border-left-color: var(--markierung); }

.referenzen { list-style: none; padding: 0; margin: 0; }
.referenzen > li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linie-hell);
}
.referenzen > li:first-child { padding-top: 0; }
.referenzen p { margin: 0 0 .2rem; }
.referenzen .jahr, .referenzen .adresse { color: var(--gedaempft); font-size: .8rem; }

.galerie { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem; margin: .6rem 0 0; background: var(--flaeche); }
.galerie a { display: block; line-height: 0; border: 1px solid var(--linie-hell); }
.galerie a:hover { border-color: var(--markierung); }
.galerie img { width: 88px; height: 66px; object-fit: cover; }

/* ---------- Bildbetrachter ---------- */
.betrachter {
  padding: 0; border: 0; background: transparent;
  max-width: min(92vw, 820px);
}
.betrachter::backdrop { background: rgba(20, 18, 12, .85); }
.betrachter figure { margin: 0; text-align: center; }
.betrachter img { max-height: 80vh; width: auto; border: 4px solid var(--papier); }
.betrachter figcaption { color: #eee; margin-top: .5rem; font-size: .85rem; }
.betrachter button {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.4); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.betrachter .zurueck { left: 1rem; }
.betrachter .weiter { right: 1rem; }
.betrachter .schliessen { top: 1.5rem; right: 1rem; transform: none; }

/* ---------- Fuß: die doppelte Linie von früher ---------- */
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin: 0 1.25rem;
  padding: .6rem 0 1.5rem;
  border-top: 1px solid var(--linie);
  box-shadow: 0 -11px 0 -10px var(--linie);
  font-size: .8rem;
  color: var(--gedaempft);
}
.fuss p { margin: 0; }
.fuss ul { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; }
.fuss a { color: var(--gedaempft); }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 760px) {
  .seite { border-inline: 0; }
  .kopf { padding: .8rem 1rem 0; }
  .kopf ul { gap: 0 .9rem; }
  .kopf nav a { font-size: .95rem; }
  .inhalt { grid-template-columns: 1fr; gap: 0; padding: 1.5rem 1rem 2.5rem; }
  .seitenbild { display: none; }
  .spalten { flex-direction: column; }
  .spalten figure { max-width: 60%; }
  .referenzen > li { grid-template-columns: 1fr; gap: .6rem; }
  .karte, .bestellung { flex-direction: column; align-items: flex-start; }
  .fuss { margin: 0 1rem; }
}

@media print {
  .kopf nav, .banner, .seitenbild, .unternav, .fuss ul { display: none; }
  .seite { border: 0; }
  .inhalt { display: block; padding: 0; }
}