/* Grundfarben und Variablen: Hier werden wiederkehrende Werte gespeichert.
   So kann die Seite später leichter gestylt und geändert werden. */
:root{
  --menu-bg: #453b2d;
  --boxes-bg: #5f4635dc;
  --text-color: #f9f3ec;
  --title-color: #f9eddf;
  --hover-text: #251b0d;
  --background-color: #fdf2e6;
  --transition: 200ms;
}

/* ************************************************************** */
/*                        Allgemein                               */
/* ************************************************************** */

/* Allgemeine Seiteinstellungen: Diese Regeln gelten für die gesamte Website.
   body verwendet eine Hintergrundfarbe und einen oberen Abstand für die fixe Navigation. */
html {
    scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 60px; /* Platz für die fixe Navigation */
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
}

/* *********************/
/*  Navigationsbereich */
/* *********************/

.navbar {
  display: flex;
  align-items: center;
  background-color: rgba(69, 59, 45, 0.9);      /* leicht transparent */
  padding: 0 20px;
  height: 60px;
  position: fixed;        /* Fixiert die Navigation am oberen Rand der Seite */
  top: 0; 
  left: 0; 
  width: 100%;
  z-index: 1000;           /* Stellt sicher, dass die Navigation über anderen Inhalten liegt */
  backdrop-filter: blur(10px);      /* Weiche Unschärfe für den Hintergrund der Navigation */
}

/* Logo-Bereich: Bild in der Navigation. */
.logo {
  margin-right: 40px;
}

.logo img {
  height: 40px;
}

/* Menu Toggle für Mobile */
.menu-toggle {
  display: none;
  font-size: 30px;
  cursor: pointer;
  color: var(--text-color);
  margin-left: auto;
  padding: 0 20px;
}

/* Diese Links führen zu den verschiedenen Seiten der Website. */
.nav-links {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 95%;
  gap: 30px;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.2s ease;
}

.navbar,
.nav-links a {  
  font-family: 'Montserrat', sans-serif;
}

/* Hover-Effekt für Menülinks */
.nav-links a:hover {
  color: var(--hover-text);
  text-shadow: var(--background-color) 0px 0px 5px;
  transform: translateY(-2px);      /* Leichtes Anheben des Links bei Hover - Bewegung auf der Y-Achse */
}

.nav-links a.active {
  color: var(--hover-text);
  text-shadow: var(--background-color) 0px 0px 5px;
}

.nav-links a::after {
    content: "•";
    margin-left: 30px;
    color: var(--text-color);
}

/* letzter Link → kein Punkt */
.nav-links a:last-child::after {
    content: "";
}

/* *********************/
/*        Header       */
/* *********************/

/* Allgemeiner Header: Titel und Einleitungstext für jede Seite. Überschriften werden zentriert und bekommen Abstand. */
header {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

header h1 {
  font-size: 2.5rem;
  color: var(--menu-bg);
  margin: 0 0 10px;
}

header p {
  color: #3f2b1f;
  font-size: 1.1rem;
}

/* Allgemeiner Mainbereich */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Footer: Ganz unten auf jeder Seite befindet sich der Impressum-Link. */
.footer {
  width: 100%;
  background: radial-gradient(circle at center, var(--menu-bg), var(--boxes-bg));       /* Radialer Farbverlauf für den Footer-Hintergrund */
  padding: 20px 0;
  text-align: center;
}

.footer a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.2s ease;
}

.footer a:hover {
    color: var(--hover-text);
    letter-spacing: 0.5px;
}



/* ************************************************************** */
/*                              Home                              */
/* ************************************************************** */

/* Grid-Layout der Startseite: Verschiedene Bereiche werden angeordnet. */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3fr 2fr 2fr;
    gap: 20px;
    padding: 20px;
    grid-template-areas:
      "aboutme aboutme aboutme"
      "hobbiesHome freundeHome freundeHome"
      "hobbiesHome schulprojekteHome familieHome";
}

/* Gemeinsames Box-Styling */
/* Diese Kacheln erscheinen auf der Startseite für Schule, Familie, Freunde und Hobbies. */
.schulprojekteHome, .familieHome, .freundeHome, .hobbiesHome {
    background-color: var(--boxes-bg);
    padding: 30px;
    color: #000;
    font-size: 18px;
    text-align: center;
    border-radius: 15px;
}

/* *********************/
/*      About me       */
/* *********************/

.aboutme {
    grid-area: aboutme;
    background-color: var(--boxes-bg);
    text-align: left;
    border-radius: 15px;
    padding: 20px;
}

.aboutme h1 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--title-color);
    font-weight: bold;
}

.aboutme p {
    margin: 0;
    padding-top: 25px;
    font-size: 20px;
    color: var(--text-color);
}

.aboutme a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
}

.aboutme a:hover {
  color: var(--hover-text);
}

/* Große Bilder links rechts */
.aboutme-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
}

/* Kleine Bilder im Text > Icons */
.aboutme-text img{
  width: 20px;
  height: 20px;
  border-radius: 0%;
  padding-right: 10px;
}

/* About Me Layout: Bild-Text-Bild Anordnung mit Abstand. */
.aboutme-content {
    display: grid;
    grid-template-columns: 170px 1fr 250px; /* links-bild / text / rechts-bild */
    gap: 20px;
    align-items: start;
}

/* *********************/
/*    Schulprojekte    */
/* *********************/

/* Schule-Kachel: Hintergrundbild mit dunklem Overlay für bessere Lesbarkeit. */
.schulprojekteHome {
    grid-area: schulprojekteHome;
    color: var(--text-color);
    background-image: url('images/Schulgebäude\ 1_klein.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.schulprojekteHome::before {
    content: '';        /* Pseudo-Element für das Overlay */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    opacity: 0;         /* Startet unsichtbar */
    transition: opacity var(--transition);         /* Weicher Übergang für das Einblenden */
    z-index: 1;     /* Legt das Overlay über dem Hintergrundbild, aber unter dem Text */
}

.schulprojekteHome:hover::before {
    opacity: 1;
}

/* Hover-Effekt für die Karten: Inhalt wird sichtbar, wenn man mit der Maus darüberfährt. */
.schulprojekteHome * {          /* '*' bedeutet alle Elemente innerhalb der Karte */
    opacity: 0;
    transition: opacity var(--transition);
    position: relative;
    z-index: 2;
}

.schulprojekteHome:hover * {
    opacity: 1;
}

.schulprojekteHome a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
}

/* *********************/
/*      Familie        */
/* *********************/

.familieHome {
    grid-area: familieHome;
    color: var(--text-color);
    background-image: url('images/Familie\ klein.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.familieHome::before {
    content: '';        /* Pseudo-Element für das Overlay */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    opacity: 0;         /* Startet unsichtbar */
    transition: opacity var(--transition);         /* Weicher Übergang für das Einblenden */
    z-index: 1;     /* Legt das Overlay über dem Hintergrundbild, aber unter dem Text */
}

.familieHome:hover::before {
    opacity: 1;
}

/* Hover-Effekt für die Karten: Inhalt wird sichtbar, wenn man mit der Maus darüberfährt. */
.familieHome * {          /* '*' bedeutet alle Elemente innerhalb der Karte */
    opacity: 0;
    transition: opacity var(--transition);
    position: relative;
    z-index: 2;
}

.familieHome:hover * {
    opacity: 1;
}

.familieHome a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
}

/* *********************/
/*      Freunde        */
/* *********************/

.freundeHome {
    grid-area: freundeHome;
    color: var(--text-color);
    background-image: url('images/Freunde-pinterest3\ klein.jpg'); /* anderes Bild für Freunde > jetztiges nichht optimal*/
    background-size: cover;
    background-position: center;
    position: relative;
}

.freundeHome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 1;
}

.freundeHome:hover::before {
    opacity: 1;
}

.freundeHome * {
    opacity: 0;
    transition: opacity var(--transition);
    position: relative;
    z-index: 2;
}

.freundeHome:hover * {
    opacity: 1;
}

.freundeHome a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
}

/* *********************/
/*      Hobbies        */
/* *********************/

.hobbiesHome {
    grid-area: hobbiesHome;
    color: var(--text-color);
    background-image: url('images/Berge\ klein.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hobbiesHome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 1;
}

.hobbiesHome:hover::before {
    opacity: 1;
}

.hobbiesHome * {
    opacity: 0;
    transition: opacity var(--transition);
    position: relative;
    z-index: 2;
}

.hobbiesHome:hover * {
    opacity: 1;
}

.hobbiesHome a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
}





/* ************************************************************** */
/*                            Schulprojekte                       */
/* ************************************************************** */

/* Header-Bild: Großes Titelbild für den Schulbereich. */
.schule-header {
    background-image: url('images/Schulgebäude\ 1_klein.jpg');
    background-size: cover;
    background-position: center 520%;       /* Fokus auf den unteren Bereich des Bildes, damit die Schule gut sichtbar ist */
    background-attachment: fixed;       /* Parallax-Effekt: Das Bild bleibt fixiert, während der Inhalt darüber scrollt */
    width: 100%;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.fach-title {
    text-align: center;
    font-size: 28px;
    padding: 30px;
    color: var(--hover-text);
}

/* Inhaltsverzeichnis */
/* Liste der Links zu den verschiedenen Themen auf der Seite. */
.toc {
    text-align: left;
    margin: 40px 0;
    background: var(--boxes-bg);
    padding: 20px;
    border-radius: 12px;
    margin: 40px auto;
    width: fit-content;
    display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.toc ul {
    list-style: none;
    padding: 0;
    margin-left: 30px;
}

/* Überschriften und Unterpunkte der Navigation innerhalb der Seite. */
.toc > ul > li {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
}

.toc a {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.3s;
}

/* Hover Effekt */
.toc a:hover {
    color: var(--hover-text);
}

/* Unterpunkte */
.toc ul ul {
    margin-top: 10px;
}

.toc ul ul li {
    font-size: 18px;
    font-weight: normal;
    margin: 5px 0;
}

.toc i {
    margin-right: 8px;
}

.fachbeschreibung {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
}

/* Projekte */
/* MBK */
.projects-container1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.projekt-mbk {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.projekt-mbk-image {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 50px;
    transition: transform 0.3s ease;
}

.projekt-mbk-image:hover {
    transform: scale(1.05);
}

/* Hover-Effekt auf Projektbildern: Bild vergrößert sich leicht bei Mausbewegung. */
.projekt-mbk h3 {
    font-size: 22px;
    margin: 15px 0 10px 0;
    color: var(--menu-bg);
    color: var(--hover-text);
}

.projekt-mbk p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

/* KMD */
.projects-container2 {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.projekt-kmd {
    text-align: center;
    background: var(--boxes-bg);
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Hover Effekt für ganze Karte */
.projekt-kmd:hover {
    transform: translateY(-10px);
}

.projekt-kmd-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* wichtig für Handy */
}

/* Bilder nebeneinander */
.projekt-kmd img {
    width: 280px;
    height: auto;
    margin: 50px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 260px; /* leicht kleiner */
    margin: 0; /* geändert → Abstand kommt jetzt vom Container */
    border-radius: 12px;
}

/* leichter Hover Effekt */
.projekt-kmd img:hover {
    transform: scale(1.05);
}

/* Überschrift */
.projekt-kmd h3 {
    color: var(--title-color);
    margin-bottom: 10px;
    font-size: 24px;
}

/* Text */
.projekt-kmd p {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: justify;
    font-size: 17px;
    color: var(--text-color);
}





/* ************************************************************** */
/*                            Familie & Freunde                   */
/* ************************************************************** */

/* Familien-Bereich: Die Karten werden untereinander angezeigt und zentriert. */
.family-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Familien-Karten: Bild und Text stehen nebeneinander, mit Schatten und Hintergrund. */
.family-item {
    display: flex;
    align-items: center;
    background-color: var(--boxes-bg);
    padding: 20px;
    border-radius: 15px;
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.family-item.reverse {
    flex-direction: row-reverse;
}

.family-text {
    flex: 1;
}

.family-text h2 {
    color: var(--title-color);
    margin-bottom: 10px;
    font-size: 24px;
}

.family-text p {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
}

/* Bilder: Runde Fotos für die Familienmitglieder mit sanftem Hover-Effekt. */
.family-image {
    width: 200px;
    height: 200px;
    height: 200px;
    object-fit: cover;

    border-radius: 50%; /* bleibt für Fallback */
    
    clip-path: circle(50% at 50% 50%); /* WICHTIG */
    -webkit-clip-path: circle(50% at 50% 50%); /* Safari Support */

    flex-shrink: 0;

    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.family-image:hover {
    transform: scale(1.05);
}

.family-text a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}


/* Galerie: Bilder werden zu einer Rasterdarstellung zusammengefügt. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 16px;
  padding: 40px;
  padding-top: 10px;
}

/* Jede Galerie-Kachel: Rundungen, Cursor und Übergänge für den Hover-Effekt. */
.gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--boxes-bg);
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Bildunterschrift: Erst sichtbar, wenn die Maus über das Bild fährt. */
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}

.gallery-item:hover .caption {
  opacity: 1;
  transform: translateY(0);
}





/* ************************************************************** */
/*                            Hobbies                             */
/* ************************************************************** */

/* Hauptraster für die Hobbies-Seite. */
.hobbies-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}

.grid-row {
  display: grid;
  gap: 20px;
}

.grid-row-1 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-row-2 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-row-1 .hobby-box {
  aspect-ratio: 1.5;
}

/* Jede Hobby-Kachel: Zeigt ein Bild mit Hover-Effekt und Titel. */
.hobby-box {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--boxes-bg);
  aspect-ratio: 1;
}

.hobby-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}


/* Titeltext in der Kachel: Erscheint weich eingeblendet beim Hover. */
.hobby-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition), transform var(--transition);
}

.hobby-title a{
  color: var(--text-color);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.2s ease;
}

.hobby-box:hover .hobby-title {
  opacity: 1;
  transform: translateY(0);
}

.hobby-section {
  margin-bottom: 50px;
  padding: 30px;
  background: var(--boxes-bg);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hobby-section h2 {
  color: var(--title-color);
  font-size: 2rem;
  margin-bottom: 15px;
  text-align: center;
}

.hobby-section p {
  color: var(--text-color);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
}

/* Tabelle für Buch-Empfehlungen: separates Styling für Zeilen und Zellen. */
.reading-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.reading-table thead {
  background: rgba(0, 0, 0, 0.12);
}

.reading-table th,
.reading-table td {
  padding: 16px;
  text-align: justify;
  color: var(--text-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reading-table th {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reading-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.reading-table img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.hobby-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.hobby-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.hobby-images img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform var(--transition);
}

.hobby-images img:hover {
  transform: scale(1.05);
}
 
#laufen .hobby-images {
  display: flex;
  width: 100%;
  gap: 10px;
}

#laufen .hobby-images img,
.hobby-images video {
  flex: 1;              /* alle gleich breit */
  width: 100%;
  height: 300px;        /* gleiche Höhe */
  object-fit: cover;  /* nichts wird abgeschnitten */
  border-radius: 10px;
}




/* ************************************************************** */
/*                              Handy                             */
/* ************************************************************** */

 @media (max-width: 480px){

/* *********************/
/*        Home         */
/* *********************/

  /* -------- GRID LAYOUT -------- */
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "aboutme"
      "hobbiesHome"
      "freundeHome"
      "schulprojekteHome"
      "familieHome";
    gap: 15px;
    padding: 15px;
  }

  /* -------- GENERELLE KACHELN -------- */
  .schulprojekteHome,
  .familieHome,
  .freundeHome,
  .hobbiesHome {
    padding: 20px;
    font-size: 16px;
    min-height: 180px; /* sorgt für schöne Kartenhöhe */
  }

  /* -------- ABOUT ME -------- */
  .aboutme {
    padding: 15px;
    text-align: center;
  }

  .aboutme h1 {
    font-size: 22px;
  }

  .aboutme p {
    font-size: 16px;
    padding-top: 15px;
  }

  /* About-Me Grid wird zu einer Spalte */
  .aboutme-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .aboutme-content img {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }

  .aboutme-text img {
    width: 25px;
    height: 25px;
    border-radius: 0%;
    padding-right: 5px;
  }

  /* -------- WICHTIG: HOVER ERSETZEN -------- */
  /* Mobile hat kein Hover → Inhalte müssen sichtbar sein */

  .schule *,
  .schulprojekteHome *,
  .familieHome *,
  .freundeHome *,
  .hobbiesHome * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Overlay bleibt sichtbar aber dezenter */
  .schulprojekteHome::before,
  .familieHome::before,
  .freundeHome::before,
  .hobbiesHome::before {
    opacity: 0.4 !important;
  }

  /* -------- LINKS -------- */
  .aboutme a,
  .schulprojekteHome a,
  .familieHome a,
  .freundeHome a,
  .hobbiesHome a {
    font-size: 16px;
  }

/* ================= TOUCH-OPTIMIERUNG ================= */

  /* Hover-Effekte deaktivieren (Handy kennt kein Hover) */
  .projekt-mbk-image:hover,
  .projekt-kmd img:hover,
  .projekt-kmd:hover {
    transform: none !important;
  }




/* *********************/
/*        Schule       */
/* *********************/

/* ================= HEADER ================= */
  .schule-header {
    background-position: 58%;
  }

  .fach-title {
    font-size: 22px;
    padding: 20px;
  }

  /* ================= TEXT ================= */
  .fachbeschreibung {
    padding: 15px;
    font-size: 16px;
    text-align: left; /* besser lesbar auf Handy */
  }

  /* ================= MBK PROJEKTE ================= */
  .projects-container1 {

    gap: 25px;
    padding: 20px;
  }

  .projekt-mbk {
    padding: 20px;
    border-radius: 12px;
    background: var(--boxes-bg);
  }

  .projekt-mbk-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
  }

  .projekt-mbk h3 {
    font-size: 20px;
    color: var(--title-color);
  }

  .projekt-mbk p {
    font-size: 16px;
    text-align: left;
    color: var(--text-color);
  }

  /* ================= KMD PROJEKTE ================= */
  .projects-container2 {
    padding: 20px;
    gap: 30px;
  }

  .projekt-kmd {
    padding: 20px;
    border-radius: 12px;
  }

  .projekt-kmd-images {
    flex-direction: column; /* Bilder untereinander */
    gap: 15px;
  }

  .projekt-kmd img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .projekt-kmd h3 {
    font-size: 20px;
  }

  .projekt-kmd p {
    font-size: 16px;
    text-align: left;
  }


/* *********************/
/* Familie & Freunde   */
/* *********************/

 /* ================= FAMILY GRID ================= */
  .family-grid {
    padding: 15px;
    gap: 20px;
  }

  /* ================= FAMILY CARDS ================= */
  .family-item {
    flex-direction: column; /* Bild über Text */
    text-align: center;
    padding: 15px;
    gap: 15px;
  }

  /* falls reverse → auf Handy egal */
  .family-item.reverse {
    flex-direction: column;
  }

  .family-text h2 {
    font-size: 20px;
  }

  .family-text p {
    font-size: 15px;
    text-align: left;
  }

  .family-image {
    width: 140px;
    height: 140px;
  }

  .family-text a {
    font-size: 15px;
  }

  /* ================= GALLERY (UNTEREINANDER) ================= */
  .gallery-grid {
    grid-template-columns: 1fr; /* Bilder untereinander */
    gap: 12px;
    padding: 15px;
  }

  .gallery-img {
    height: 200px; /* etwas größer für bessere Wirkung */
  }

    /* ================= TOUCH OPTIMIZATION ================= */

  /* Hover-Effekte deaktivieren (Mobile hat kein Hover) */
  .family-image:hover,
  .gallery-item:hover,
  .gallery-item:hover .caption {
    transform: none !important;
    opacity: 1 !important;
  }

  /* Caption immer sichtbar (sonst nicht nutzbar auf Handy) */
  .caption {
    opacity: 1;
    transform: none;
    font-size: 0.9rem;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
  }


/* *********************/
/*        Hobbies      */
/* *********************/

 /* ================= GRID ALLGEMEIN ================= */
  .hobbies-grid {
    gap: 15px;
    margin-bottom: 40px;
  }

  .grid-row {
    grid-template-columns: 1fr !important; /* ALLES untereinander */
    gap: 15px;
  }

  .grid-row-1,
  .grid-row-2 {
    grid-template-columns: 1fr !important;
  }

  /* ================= HOBBY BOX ================= */
  .hobby-box {
    aspect-ratio: 1.4;
  }

  /* Hover deaktivieren (Mobile hat kein Hover) */
  .hobby-box:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Titel IMMER sichtbar auf Mobile */
  .hobby-title {
    opacity: 1;
    transform: none;
    font-size: 1rem;
    padding: 10px;
  }

  .hobby-title a {
    font-size: 18px;
  }

  /* ================= SECTION BOX ================= */
  .hobby-section {
    padding: 20px;
    margin-bottom: 30px;
  }

  .hobby-section h2 {
    font-size: 1.5rem;
  }

  .hobby-section p {
    font-size: 0.95rem;
  }

   /* ================= TABLE → CARD LAYOUT ================= */
  .reading-table {
    display: block;
    width: 100%;
  }

  .reading-table thead {
    display: none;
  }

  .reading-table tr {
    display: block;
    background: var(--boxes-bg);
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

  /* ================= ZELLEN WERDEN UNTEREINANDER ================= */
  .reading-table td {
    display: block; /* WICHTIG: verhindert Overflow komplett */
    width: 100%;
    padding: 6px 0;
    font-size: 16px;
    color: var(--text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Label + Inhalt getrennt (sauber lesbar) */
  .reading-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--title-color);
    margin-bottom: 4px;
  }

  /* ================= BILDER (ORIGINALFORM BEHALTEN) ================= */
  .reading-table img {
    width: 100%;
    max-width: 220px;
    height: auto;              /* wichtig: kein Verzerren */
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-top: 6px;
  }


  /* ================= IMAGES GRID ================= */
  .hobby-images {
    grid-template-columns: 1fr; /* untereinander */
    gap: 10px;
  }

  .hobby-images img {
    height: 180px;
  }

  /* ================= LAUFEN SECTION ================= */
  #laufen .hobby-images {
    flex-direction: column;
  }

  #laufen .hobby-images img,
  .hobby-images video {
    height: 200px;
  }
}


/* *********************/
/*        Kebab Menü   */
/* *********************/

/* Mobile Navigation für Tablets und Handys */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    padding-right: 50px;
  }

  .nav-links {
    position: fixed;
    top: 60px;
    right: 0;
    width: 250px;
    height: calc(100vh - 60px);
    background-color: var(--menu-bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
    padding-top: 20px;
    padding-left: 20px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 20px;
  }

  .nav-links a::after {
    content: "";
    margin-left: 0;
  }
}

/* ************************************************************** */
/*             Lightbox für Bild-Vergrößerung (schule.html)      */
/* ************************************************************** */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.lightbox.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  animation: zoomIn 0.3s ease;
  object-fit: contain;
}