/* ==========================================================================
   worm.css – modernisiert (HTML5, UTF-8, responsive, ohne JavaScript)
   Stil der Ursprungsseite bleibt erhalten
   ========================================================================== */

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

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

body {
  margin: 0;
  padding: 0 10px;
  color: #555;
  background: #fff;
  font: normal 11px/150% Verdana, Arial, sans-serif;
}

/* Bilder: natürliche Größe, nur bei kleinen Screens verkleinern */
img {
  border: 0 none;
  max-width: 100%;
  height: auto;
}

iframe { max-width: 100%; margin: 0 0 10px 0; }

h2 { left: -9999px; position: absolute; }   /* wie im Original */

h3 {
  margin: 0 0 10px 0;
  padding: 0;
  font: bold 11px/150% Verdana, Arial, sans-serif;
  color: #222;
}

h4 {
  margin: 0 0 5px 0;
  padding: 0;
  font: bold 11px/150% Verdana, Arial, sans-serif;
  color: #222;
}

/* ---------- Grundlayout (Original: 880px) ---------- */

#wrapper1 {
  background: #fff;
  max-width: 880px;
  margin: 20px auto 0;
  padding: 0;
}

/* ---------- Kopfzeile: Header links + Logo rechts, OBERHALB des Menüs ---------- */

#header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 20px 0;
}

#header { margin: 0; }

#logo {
  margin: 0;
  text-align: right;
}

/* ---------- Navigation (ohne JavaScript) ---------- */

.nav { background: #222; }
.nav-toggle, .nav-label { position: absolute; left: -9999px; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
}

.nav > ul > li { position: relative; width: 146px; }

.nav a {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #222;
  margin: 0;
  padding: 2px 7px;
  border-right: 1px solid #fff;
  font: bold 11px/16px Verdana, Arial, sans-serif;
  text-align: center;
}

.nav a:hover,
.nav a:focus-visible { background: #999; color: #fff; }

.nav a[aria-current="page"] { background: #999; }

.nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
  width: 146px;
  z-index: 20;
}

/* Dropdown per Maus UND Tastatur/Touch */
.nav > ul > li:hover ul,
.nav > ul > li:focus-within ul { display: block; }

.nav ul ul a {
  display: block;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: #999;
  font-weight: normal;
  text-align: left;
  color: #fff;
}

.nav ul ul a:hover { background: #777; color: #fff; }

/* ---------- Inhalt + Bilder (Originalmaße 370px / 452px) ---------- */

#wrapper2 {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  margin-top: 40px;          /* etwas Luft unter dem Menü */
}

#content {
  background: #fff;
  flex: 0 0 370px;
  min-width: 0;
}

#images {
  background: #fff;
  flex: 0 0 452px;
  margin-left: auto;
}

p {
  padding: 0;
  margin: 0 0 10px 0;
}

a { text-decoration: none; color: #777; }
a:hover { text-decoration: underline; color: #777; }
a img { border: 0 none; }

#content a { color: #e50; }

#content ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}

#content li {
  margin: 0;
  padding: 0 0 0 15px;
  list-style: none;
  background: url(li.png) no-repeat 0px 7px;
}

/* ---------- Footer ---------- */

#footer {
  padding: 15px 0;
  margin: 90px 0 0 0;
  color: #777;
}

#footer a { text-decoration: none; color: #777; }
#footer a:hover { text-decoration: underline; }

/* ---------- YouTube: Click-to-Load (DSGVO, ohne JavaScript) ---------- */

.video-consent .video-toggle { position: absolute; left: -9999px; }

.video-consent .video-label {
  display: block;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid #999;
  background: #eee;
  color: #555;
  max-width: 370px;
}

.video-consent .video-frame { display: none; }
.video-consent .video-toggle:checked ~ .video-label { display: none; }
.video-consent .video-toggle:checked ~ .video-frame { display: block; }
.video-consent .video-frame iframe {
  width: 370px;
  max-width: 100%;
  height: 270px;
  aspect-ratio: 4/3;
}

/* ---------- Mobile Ansicht (ab < 780px) ---------- */

@media (max-width: 780px) {

  body { padding: 0 5px; }

  /* Header und Logo untereinander statt nebeneinander */
  #header-row { flex-direction: column; align-items: stretch; }
  #logo { margin-top: 10px; }

  /* Burger-Menü */
  .nav-label {
    position: static;
    display: block;
    background: #222;
    color: #fff;
    padding: 10px;
    text-align: center;
    font: bold 11px/16px Verdana, Arial, sans-serif;
    cursor: pointer;
  }
  .nav-label::before { content: "\2630  "; }   /* ☰ */

  .nav ul { display: none; flex-direction: column; }
  .nav-toggle:checked ~ .nav ul { display: flex; }

  .nav > ul > li, .nav ul ul { width: 100%; }
  .nav a { border-right: 0; border-bottom: 1px solid #fff; }

  /* Untermenü mobil dauerhaft sichtbar */
  .nav ul ul {
    display: block;
    position: static;
    width: 100%;
  }
  .nav ul ul a { padding-left: 24px; }

  /* Inhalt und Bild untereinander */
  #content, #images { flex: 1 1 100%; }
  #images { margin-left: 0; }
  #wrapper2 { margin-top: 20px; }
}