/* Öffentliches Homepage-Verzeichnis (/homepage-verzeichnis/).
   Markup: src/Directory/templates/public.php, eingebettet in die 410 px breite
   Inhaltsspalte (td.content) wie faq.php. Schrift, Farben und Überschriften
   folgen main.css und der Startseite: Verdana 12 px in #595959, h1 aus
   main.css, Zwischenüberschriften in #327195 mit Linie (wie „In 60 Sekunden
   erklärt“), Aufzählungen mit dem orangen Haken der Startseite (021.gif). */

.vz { line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; }
.vz p { margin: 0 0 10px 0; }
.vz h2 { font-size: 14px; color: #327195; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; margin: 22px 0 10px 0; padding: 0 0 3px 0; border-bottom: 1px solid #327195; }
.vz h3 { font-size: 12px; color: #327195; margin: 14px 0 3px 0; }
/* Überschriften mit normaler Zeilenhöhe: Linie dicht am Text wie auf Startseite und FAQ. */
.vz h1, .vz h2, .vz h3 { line-height: normal; }
/* main.css setzt Links fest auf 12 px in Textfarbe ohne Unterstreichung; im
   Verzeichnis erben sie die Schriftgröße und sind als Links erkennbar. */
.vz a:link, .vz a:visited, .vz a:hover, .vz a:focus, .vz a:active { font-size: inherit; font-family: inherit; }
.vz a:link, .vz a:visited { color: #327195; text-decoration: underline; }
.vz a:hover, .vz a:focus { color: #1b4258; }
.vz a.vz-mehr:link, .vz a.vz-mehr:visited { font-weight: bold; }

.vz-pfad { margin: 0 0 10px 0; font-size: 11px; }
.vz-pfad ol { margin: 0; padding: 0; }
.vz-pfad li { display: inline; font-size: 11px; }
.vz-pfad li + li::before { content: "\00a0› "; }

.vz-aktionen { margin: 0 0 6px 0; }

/* Kategorien und weitere Kategorien: Haken-Liste wie auf der Startseite. */
.vz-kategorien, .vz-weitere { margin: 4px 0 12px 0; padding: 0; }
.vz-kategorien { columns: 2; column-gap: 16px; }
.vz-kategorien li, .vz-weitere li { break-inside: avoid; min-height: 18px; padding: 3px 0 3px 24px; line-height: 18px; background: url(/images/021.gif) no-repeat 0 2px; }
.vz-leer { margin-top: 6px; }

.vz-eintraege { margin: 0 0 12px 0; padding: 0; }
.vz-eintrag { display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px dotted #cfd9e2; padding: 10px 0; }
.vz-bild-link { flex: none; line-height: 0; }
.vz-bild { flex: none; width: 80px; height: 60px; object-fit: cover; border: 1px solid #cfd9e2; background: #f3f7fa; }
.vz-eintrag-inhalt { flex: 1 1 auto; min-width: 0; }
.vz .vz-eintrag-titel { font-size: 12px; margin: 0 0 3px 0; padding: 0; border-bottom: none; }
.vz-eintrag-text { margin: 0 0 3px 0; }
.vz .vz-eintrag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 11px; margin: 0; }
.vz .vz-eintrag-meta a { display: inline-flex; align-items: center; min-height: 24px; }
.vz-badge { color: #2f6b31; }
.vz-badge::before { content: "✓ "; }

/* Hinweiskasten wie das Inhaltsverzeichnis der FAQ. */
.vz-hinweis { background: #f3f7fa; border: 1px solid #cfd9e2; padding: 10px 14px; margin: 18px 0; }
.vz-hinweis h2 { margin-top: 0; }
.vz-hinweis p:last-child { margin-bottom: 0; }
.vz-schritte { margin: 6px 0 10px 18px; padding: 0; }
.vz-schritte li { list-style: decimal; margin: 0 0 4px 0; }
.vz-anmelden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vz-anmelden a { display: inline-flex; align-items: center; min-height: 24px; }
.vz-bildbutton { flex: none; line-height: 0; }
.vz-bildbutton img { display: block; border: 0; }

/* Häufige Fragen als Klapp-Liste (details/summary) in den Farben der Website;
   die erste Frage ist offen, das orange Plus dreht sich beim Öffnen zum Kreuz. */
.vz-faq { margin: 10px 0 14px 0; border: 1px solid #cfd9e2; border-radius: 4px; overflow: hidden; }
.vz-faq details { border-bottom: 1px solid #e3e9ef; }
.vz-faq details:last-child { border-bottom: 0; }
.vz-faq summary { cursor: pointer; list-style: none; position: relative; padding: 8px 32px 8px 12px; font-weight: bold; color: #327195; background: #f3f7fa; }
.vz-faq summary::-webkit-details-marker { display: none; }
.vz-faq summary::after { content: "+"; position: absolute; right: 12px; top: 9px; font-size: 16px; line-height: 1; color: #ff6e01; transition: transform 0.2s; }
.vz-faq details[open] summary::after { transform: rotate(45deg); }
.vz-faq summary:hover { background: #e4edf4; }
.vz-faq summary:focus-visible { outline: 2px solid #327195; outline-offset: -2px; }
.vz-faq details p { margin: 0; padding: 6px 12px 10px 12px; }

.vz-blaettern { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; }
.vz-blaettern a, .vz-blaettern span { display: inline-block; min-width: 28px; min-height: 28px; box-sizing: border-box; padding: 5px 7px; border: 1px solid #cfd9e2; text-align: center; font-size: 11px; line-height: 16px; }
.vz .vz-blaettern a:link, .vz .vz-blaettern a:visited { text-decoration: none; }
.vz-blaettern span[aria-current] { background: #327195; color: #ffffff; border-color: #327195; font-weight: bold; }

@media (max-width: 600px) {
  .vz-bild { width: 64px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .vz-faq summary::after { transition: none; }
}