/* ============================================================
   0) SCHRIFTART "INTER" – LOKAL GEHOSTET (DSGVO-konform,
      kein externer Aufruf an Google-Server)
   ============================================================ */
 
@font-face{
  font-family: "Inter";
  src: url("inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1) GRUNDEINSTELLUNGEN
   ============================================================ */

:root{
  /* Basis-Schriftgröße. Alle anderen Größen leiten sich davon ab. */
  --schrift-basis: 16px;

  /* Farben */
  --farbe-text: #1a1a1a;
  --farbe-hintergrund: #ffffff;
  --farbe-linie: #cccccc;

  /* Seitenbreite */
  --seitenbreite: 760px;
}

/* Alle Elemente rechnen Innenabstand/Rahmen in ihre Breite ein
   -> verhindert Layoutfehler auf schmalen Bildschirmen */
*{
  box-sizing: border-box;
}

body{
  margin: 0;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}


/* ============================================================
   2) DIE 4 SCHRIFTKATEGORIEN
   ============================================================ */

/* --- Kategorie 1: Fließtext --- */
body,
p, li, a{
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: var(--schrift-basis);
  line-height: 1.25; /* Zeilenabstand innerhalb eines Absatzes */
}

a:link, a:visited, a:active {
  color: var(--farbe-text);
  
}

a:hover {
  color: #5a5a5a; /* Farbe beim Drüberfahren */
  
}

/* Abstand zwischen zwei Absätzen: 0,5 Zeilenhöhen */
p{
  margin: 0.5em 0 1em 0; /* 0,5 x line-height (1,25em) */
}

/* --- Kategorie 2: Boldtext (Auszeichnungsschrift) --- */
strong, b, .bold{
  font-family: "Inter", Arial, sans-serif;
  font-size: calc(var(--schrift-basis) * 0.87);
}

/* --- Kategorie 3: Hauptüberschriften ---
   Boldtext, aber doppelte Größe (2 x Basisgröße) */
h1{
  font-family: "Inter", Arial, sans-serif;
  font-size: calc(var(--schrift-basis) * 2);
  line-height: 1.2;
  margin: 3em 0 1em 0;
}

/* --- Kategorie 4: Nebenüberschriften ---
   Boldtext, aber 1,5-fache Größe */
h2{
  font-family: "Inter", Arial, sans-serif;
  font-size: calc(var(--schrift-basis) * 1.5);
  line-height: 1.25;
  margin: 1.5em 0 0.5em 0;
}


/* ============================================================
   3) SEITENRAHMEN / LAYOUT
   ============================================================ */

.seite{
  max-width: var(--seitenbreite);
  margin: 0 auto;
  padding: 20px 20px;
}

img{
  max-width: 100%;   /* Bilder werden nie breiter als ihr Container */
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 15px 0px 0px 0px;
}


/* Thumbnail-Navigation: auf voller Seitenbreite (760px) 3 Spalten
   gleichmäßig verteilt */

.thumbnail-nav{

  display: grid;
  grid-template-columns: 253px 254px 253px;
  grid-template-rows: 253px; 
  justify-content: center;
  align-items: center;
  gap: 0px;
  z-index: 5;


img{
  width: auto;
  height: auto;
  max-height: 220px;
  max-width: 220px;
  margin: 0 auto;
	}
}


/* Schmalerer Bildschirm: Thumbnails untereinander (1 Spalte) */
@media (max-width: 760px){
  .thumbnail-nav{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
img{
  max-height:100%;
  max-width: 60%;
  width: auto;
  height: auto;
  padding: 40px 20px 40px 20px;
	}
}

  
  }
}


/* ============================================================
   4) KOPFBEREICH UND BÜRGERMENÜ (CSS-only, ohne JavaScript)
   ============================================================ */

header{
}

/* Weißer Balken über die volle Breite, in der Höhe des
   Bürgermenüs. Fest positioniert, damit er auch beim Scrollen
   hinter dem Burger-Icon sichtbar bleibt. */
.kopf-balken{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px; /* Höhe des Burger-Icons + Abstand */
  background: #ffffff;
  z-index: 15;
}

.kopfzeile{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

.logo{
  font-family: "Inter", Arial, sans-serif; /* Boldtext */
  font-size: calc(var(--schrift-basis) * 1.25);
  text-decoration: none;
  color: var(--farbe-text);
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16; /* über dem weißen Balken (15), unter dem Burger-Icon (20) */
}

/* Die Checkbox steuert das Menü, ist selbst aber unsichtbar */
#menu-schalter{
  display: none;
}

/* Das Burger-Icon (3 Striche) – bleibt fest in der linken oberen
   Ecke, unabhängig von Bildschirmgröße und Menüzustand */
.menu-knopf{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 20;
}
.menu-knopf span{
  display: block;
  height: 2px;
  background: var(--farbe-text);
}

/* Menü als Vollbild-Overlay, damit der Burger-Knopf beim Öffnen
   nicht durch Layoutverschiebung mitwandert */
nav{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--farbe-hintergrund);
  padding-top: 64px;
  z-index: 10;
}

/* Wenn die Checkbox angehakt ist (Klick auf Burger-Icon),
   wird das Menü eingeblendet */
#menu-schalter:checked ~ nav{
  display: block;
}

nav ul{
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0px;
  padding: 0 20px 16px 20px;
}

nav a{
  font-family: "Inter", Arial, sans-serif; /* Boldtext */
  font-weight: 600;
  text-decoration: none;
  color: var(--farbe-text);
  display: block;
  padding: 8px 0;
}
nav a:hover{
  text-decoration: underline;
}