/* ===== Reset & Basics ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #EEEEEE;
  font-family: sans-serif, Arial, Verdana, "Times New Roman";
  line-height: 1.4;
  overflow: hidden;
}

/* ===== Links ===== */
a:link, a:visited { color: #000; text-decoration: none; }
a:hover { color: #0044AA; }
a:active { color: #0F0; }

/* ===== Header (fixiert) ===== */
#headerbox {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  width: 960px;
  height: 200px;
  margin: 0 auto;
  background: #FFF;
  z-index: 30;
  color: #0044AA;
  font-size: 30px;
  font-weight: bold;
}

#headertext {
  position: relative;
  font-family: Georgia, Times, "Times New Roman", serif;
  top: 15px;
  left: 30px;
  z-index: 34;
}

#headerimage {
  background-image: url(./data/content/ashiUchiMata.png);
  background-repeat: no-repeat;
  position: relative;
  height: 150px;
  z-index: 40;
  left: 30px;
}

#headerline1,
#headerline2 {
  position: relative;
  background: #0044AA;
  z-index: 34;
  height: 6px;
}
#headerline1 { top: 25px; }
#headerline2 { top: 80px; }

/* ===== Seite / Container ===== */
#page {
  width: 100%;
  min-height: 100%;
  overflow: visible;
  background: #EEEEEE;
}

/* ===== Content unter dem Header — KEIN zusätzlicher Abstand! ===== */
#contentpage {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
  background: #FFF;
  background-repeat: repeat-y;

  /* Einrücken GENAU um den Header: */
  margin-top: 200px; /* 0 (top) + 220 (Höhe) */
}

/* ===== Scrollbare Contentbox (funktioniert auch in Firefox) ===== */
#contentbox {
  display: flow-root;              /* Floats zählen mit */
  max-height: calc(100vh - 200px); /* Viewport minus Headerbereich */
  overflow-y: auto;
  overflow-x: hidden;
  background: #FFF;
  scroll-behavior: smooth;

  /* Optionale Scrollbar-Styles */
  scrollbar-width: thin;
  scrollbar-color: #caa23a #f2f2f2;
}
#contentbox::-webkit-scrollbar { width: 10px; }
#contentbox::-webkit-scrollbar-track { background: #f2f2f2; }
#contentbox::-webkit-scrollbar-thumb { background: #caa23a; }
#contentbox::-webkit-scrollbar-thumb:hover { background: #b89234; }

/* ===== Spaltenlayout ===== */
#navigation_left,
#navigation_right,
#content {
  position: relative;
  background: #FFF;
  height: auto; /* nie 100% */
}

#navigation_left {
  float: left;
  width: 178px;
  border-right: 2px solid gray;
}
#navigation_right {
  float: right;
  width: 178px;
  border-left: 2px solid gray;
}
#content {
  float: left;
  width: 570px;
  padding-left: 20px;
}

/* ===== Navigation ===== */
.navilink {
  background: #FFF;
  width: 166px;
  height: 30px;
  float: left;
  border-bottom: 1px dotted #a7a7a7;
  line-height: 32px;
  padding-left: 12px;
  font-size: 12px;
}
.navilink:hover { background: #FFCC00; }

/* ===== Typo ===== */
.contentHeadline {
  font-size: 20px;
  color: #0044AA;
  font-weight: bold;
  margin: 12px 0 6px;
}
.contentText {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  text-align: justify;
  margin: 0 0 12px;
}
.contentText img { max-width: 100%; height: auto; }

/* ===== Clearfix (falls gebraucht) ===== */
.clearfix::after { content: ""; display: block; clear: both; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  #headerbox { width: 95%; }
  #contentpage { width: 95%; margin-top: 200px; } /* bleibt gleich */
  #contentbox { max-height: calc(100vh - 240px); }
}