/* ==========================================================
   Kreuzkirche Neumünster – modernisierte Haupt-CSS
   Version: 2025-11 (angepasst für #haupt-flex)
   ========================================================== */

/* ---------- Imports ---------- */
@import url("fontsopensans.css");
@import url("all.min.css");

/* ---------- Grundlayout & Schrift ---------- */
:root {
  --font-body: "Open Sans", "Trebuchet MS", Tahoma, sans-serif;
  --font-size-base: 16px;
  --color-text: #222;
  --color-bg: #e5e5e5;
  --color-link: #5d5d68;
  --color-link-hover: #333;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Links ---------- */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ---------- Wrapper ---------- */
#wrap {
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: block;
}

/* ---------- Kopfbereich ---------- */
#kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  flex-wrap: wrap;
}

#kopf h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw + 1rem, 2.4rem);
  margin: 0;
}

#kopf-logo {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 600;
  color: #000;
}
#kopf-logo img {
  float: left;
  margin-right: 15px;
  height: 120px;
  width: auto;
}

#kopfmenue {
  text-align: right;
}
#kopfmenue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#kopfmenue li a {
  font-weight: 600;
  color: #5d5d68;
  padding: 5px 10px;
  border-radius: 4px;
}
#kopfmenue li a:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* ---------- Kopf-Bild ---------- */
#kopfbild {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #d5d5ed;
}
#kopfbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Hauptinhalt ---------- */
#haupt {
  display: block; /* Haupt-Container selbst nicht Flex */
  background-color: #fff;
  width: 100%;
}

/* ---------- Flex-Container für Hauptspalten ---------- */
#haupt-flex {
  display: flex;
  flex-wrap: nowrap; /* große Bildschirme: horizontal nebeneinander */
  flex-direction: row; /* standard: horizontal */
  width: 100%;
  gap: 10px; /* optional Abstand zwischen Spalten */
}

/* ---------- Menü (links) ---------- */
#menue-content {
  flex: 0 0 160px;
  padding: 10px;
  background-color: #fff;
}

/* ---------- Haupt-Inhalt (Mitte) ---------- */
#haupt-innen {
  flex: 1;
  padding: 20px;
  order: 2;
}

/* ---------- Rechte Spalte (Sidebar) ---------- */
#haupt-rechts {
  flex: 0 0 250px;
  padding: 15px;
  order: 3;
  background-color: #fafafa;
  border-left: 1px solid #ddd;
  font-size: 0.95rem;
}
#haupt-rechts table {
  width: 100%;
}

/* ---------- Menülinks ---------- */
#menue-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menue-content li {
  margin-bottom: 8px;
}
#menue-content a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
}

/* Farbliche Menüvarianten */
#menue-content a.blau   { background-color: #d5d5ed; }
#menue-content a.rosa   { background-color: #f0b4ff; }
#menue-content a.gelb   { background-color: #fffb92; }
#menue-content a.gruen  { background-color: #defd80; }
#menue-content a.rot    { background-color: #ffa7a3; }
#menue-content a.himmel { background-color: #9ecdf9; }
#menue-content a.altrosa{ background-color: #ff84c9; }
#menue-content a.turkis { background-color: #64ffdc; }

/* ---------- Typografie ---------- */
#haupt-innen h2 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 0;
  color: #333;
}
#haupt-innen h3 {
  font-size: 1.3rem;
  font-weight: 400;
}
#haupt-innen p {
  font-size: 1rem;
  margin-bottom: 1em;
}

/* ---------- Losung + Footer ---------- */
#losung {
  background-color: #d5d5ed;
  text-align: center;
  padding: 15px;
  font-style: italic;
}
#ganzunten {
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px;
  font-size: 0.9rem;
  color: #555;
}
#unten {
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px;
  font-size: 0.9rem;
  color: #555;
  
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---------- Buttons ---------- */
button,
input[type="submit"] {
  font-family: var(--font-body);
  background-color: #d5d5ed;
  color: #222;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover,
input[type="submit"]:hover {
  background-color: #bdbde0;
}

/* ---------- Font Awesome ---------- */
.fa, .fas, .far, .fab {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* ---------- Responsives Design ---------- */
@media (max-width: 900px) {
  #kopf-logo img {
    height: 100px;
  }

  /* Hauptspalten untereinander */
  #haupt-flex {
    flex-direction: column;
  }
  #menue-content {
    order: 1;
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box; /* verhindert Auslaufen */
  }
  #haupt-innen {
    order: 2;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box; /* verhindert Auslaufen */
  }
  #haupt-rechts {
    order: 3;
    width: 100%;
    padding: 10px;
    border-left: none;
    border-top: 1px solid #ddd;
  }

  /* Reihenfolge unterhalb der Hauptspalten */
  #losung { order: 4; }
  #unten { order: 5; }
  #ganzunten { order: 6; }

  /* Menü horizontal, max. 3 pro Zeile */
  #menue-content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    padding: 0;
    margin: 0;
  }
  #menue-content li {
    flex: 1 1 calc(33.333% - 0.5em);
    margin-bottom: 0.5em;
  }
  #menue-content li a {
    display: block;
    text-align: center;
  }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  #kopf { flex-direction: column; text-align: center; }
  #kopfmenue ul { justify-content: center; }

  #menue-content {
    padding: 8px 10px;
    box-sizing: border-box;
  }
  #haupt-innen {
    padding: 8px 10px;
    box-sizing: border-box;
  }
}

/* ---------- Bilder im Hauptinhalt (responsive + kein Hochskalieren) ---------- */
#haupt-innen img {
  width: auto;                 /* keine erzwungene Skalierung */
  max-width: 100%;             /* nie breiter als Container */
  height: auto;                /* Seitenverhältnis beibehalten */
  border: 0;
  display: block;
  float: right;
  margin: 0 0 10px 10px;
  image-rendering: auto;       /* keine unscharfe Skalierung */
}

/* Links- und Rechtsausrichtung je nach Attribut oder Klasse */
#haupt-innen img[align="right"],
#haupt-innen img.float-right {
  float: right;
  margin: 0 0 10px 10px;
}

#haupt-innen img[align="left"],
#haupt-innen img.float-left {
  float: left;
  margin: 0 10px 10px 0;
}

/* ---------- Mobile Darstellung ---------- */
@media (max-width: 700px) {
  #haupt-innen img,
  #haupt-innen img[align="right"],
  #haupt-innen img[align="left"],
  #haupt-innen img.float-right,
  #haupt-innen img.float-left {
    float: none;
    display: block;
    margin: 10px auto;
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

/* ---------- Kopfmenue (responsive horizontal) ---------- */
#kopfmenue {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0 15px;
}

#kopfmenue ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0;
}

#kopfmenue li {
  display: flex;
  align-items: center;
}

#kopfmenue a {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #5d5d68;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

#kopfmenue a:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* kleine Tabelle (Union Jack) optisch stabilisieren */
#kopfmenue table {
  border-collapse: collapse;
  border: none;
}
#kopfmenue td {
  border: none;
  vertical-align: middle;
  padding: 0 4px;
}

/* ---------- Responsive Anpassungen ---------- */
@media (max-width: 900px) {
  #kopfmenue {
    justify-content: center;
    padding: 10px;
  }
  #kopfmenue ul {
    justify-content: center;
    gap: 8px;
  }
  #kopfmenue a {
    font-size: 0.95rem;
    padding: 5px 8px;
  }
  #kopfmenue img {
    width: 32px;
    height: auto;
  }
}

@media (max-width: 600px) {
  #kopfmenue {
    flex-direction: column;
    text-align: center;
  }
  #kopfmenue ul {
    justify-content: center;
  }
  #kopfmenue a {
    font-size: 0.9rem;
    padding: 4px 6px;
  }
  #kopfmenue img {
    width: 28px;
  }
}

/* Farbliche Variante (über Klassen z. B. .rot, .blau etc.) */
#ueberschrift.rot    { background-color: #ffa7a3; }
#ueberschrift.blau   { background-color: #d5d5ed; }
#ueberschrift.rosa   { background-color: #f0b4ff; }
#ueberschrift.gelb   { background-color: #fffb92; }
#ueberschrift.gruen  { background-color: #defd80; }
#ueberschrift.himmel { background-color: #9ecdf9; }
#ueberschrift.altrosa{ background-color: #ff84c9; }
#ueberschrift.turkis { background-color: #64ffdc; }

/* Hintergrundfarbe kommt über Farbklasse, z. B. .himmel, .rosa, ... */
#ueberschrift.rosa,
#ueberschrift.himmel,
#ueberschrift.gelb,
#ueberschrift.gruen,
#ueberschrift.altrosa,
#ueberschrift.turkis,
#ueberschrift.rot,
#ueberschrift.blau,
#ueberschrift.tabgrau {
  transition: background-color 0.4s ease-in-out;
}

/* =====================================================
   Kopfbereich Unterseiten (vollständiges Bild sichtbar)
   ===================================================== */
#ueberschrift {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: inherit; /* Farbe kommt über .rot, .blau, etc. */
  overflow: hidden;
  position: relative;
}

/* Das Bild nimmt 60% der Breite ein, links 10% Rand */
#ueberschrift .ueberschrift-bild {
  width: 60%;
  height: auto;
  margin-left: 10%;
  display: block;
  object-fit: contain;  /* Bild wird vollständig angezeigt */
  object-position: center;
}

/* Der Textblock rechts (30%) */
#ueberschrift .ueberschrift-text {
  width: 30%;
  text-align: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  color: #333;
}

#ueberschrift .ueberschrift-text h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  margin: 0;
}

/* ---------- Responsiv ---------- */
@media (max-width: 1024px) {
  #ueberschrift .ueberschrift-text h1 {
    font-size: 2rem;
  }
}

@media (max-width: 900px) {
  #ueberschrift {
    flex-direction: column;
  }

  #ueberschrift .ueberschrift-bild {
    width: 100%;
    margin-left: 0;
  }

  #ueberschrift .ueberschrift-text {
    width: 100%;
    padding: 1.5rem 1rem;
  }

  #ueberschrift .ueberschrift-text h1 {
    font-size: 1.8rem;
  }
}