/* Ergänzungen zum Original-Stylesheet (original.css). Nur das, was die alte Seite per JavaScript
   oder Erweiterung erledigt hat und hier mit CSS gelöst ist. Maße am Original abgelesen, 30.10.2026. */

/* Untermenü der Hauptnavigation: SmartMenus öffnete es beim Überfahren, hier per CSS. */
.smartmenus > li.dropdown:hover > .dropdown-menu,
.smartmenus > li.dropdown:focus-within > .dropdown-menu { display: block; }
.smartmenus .dropdown-menu .dropdown-item { white-space: nowrap; }   /* SmartMenus setzte dafür die Klasse sm-nowrap */
.smartmenus > li > a.dropdown-toggle::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }

/* FlexSlider: die Folien liegen als Floats übereinander (siehe seite.js) und blenden mit 600 ms. */
.flexslider .slides { position: relative; }

/* Untertafeln des mobilen Menüs. Im zusammengefügten TYPO3-Stylesheet steht die Grundregel .mm-panel
   (translate 100 Prozent) nach .mm-panel_opened, deshalb hier mit höherer Spezifität. */
.mm-panels > .mm-panel.mm-panel_opened { transform: translate3d(0%, 0, 0); }
.mm-panels > .mm-panel.mm-panel_opened-parent { transform: translate3d(-30%, 0, 0); }

/* Verschleierte E-Mail-Verweise hatten ein Briefsymbol davor. Hier sind die Verweise ebenfalls verschleiert (Klasse byggve-mailto,
   seite.js macht daraus mailto:), das Symbol hängt an der Klasse, damit es auch ohne JavaScript da ist. */
a[href^="mailto:"]::before, a.byggve-mailto::before { font-family: 'Font Awesome 5 Free'; font-weight: 400; display: inline-block; font-size: inherit; content: "\f0e0"; margin-right: .3rem; -webkit-font-smoothing: antialiased; }

/* Listen im Fließtext: TYPO3 setzte in jeden Listenpunkt einen Absatz mit 16 px Abstand. Im Element "Text" (frame-type-text)
   blieb dieser Abstand beim letzten Punkt zusätzlich zum Listenabstand stehen (32 px bis zum nächsten Absatz, gemessen am
   Original), im Element "Text mit Bild" (frame-type-textpic, .ce-bodytext) fiel er mit dem Listenabstand zusammen (16 px). */
.frame-type-text .ce-content > ul > li, .frame-type-text .ce-content > ol > li { margin-bottom: 1rem; }
.frame-type-textpic .ce-bodytext > ul > li:not(:last-child), .frame-type-textpic .ce-bodytext > ol > li:not(:last-child) { margin-bottom: 1rem; }

/* Kopfbild über die ganze Breite der Spalte, wie das img-fluid im Original. */
#header figure.image img { width: 100%; }

/* Abstand des Kopfbilds zur festen Kopfzeile, vorher ein style-Attribut am .container (margin-top: 2rem).
   Die Content-Security-Policy erlaubt keine style-Attribute mehr, deshalb hier als Klasse. */
#header .kopfbild-container { margin-top: 2rem; }

/* Knopf nach oben (scrollToTop): Lage und Startzustand, vorher ein style-Attribut am Element.
   seite.js schaltet die Deckkraft über die CSSOM-Eigenschaft element.style.opacity, das erlaubt die CSP. */
#topcontrol { position: fixed; bottom: 5px; right: 5px; opacity: 0; cursor: pointer; }

/* Artikel von Aktuelles: Bild rechts in der Spalte wie in der Einzelansicht von tx_news. */
.news-single .teaser-text { font-size: 15px; color: #888; }

/* Anreißer-Absätze eines Artikels (tx_news .teaser-text): die ersten N Absätze grau und kleiner. N kommt als
   Klasse teaser-absaetze-N aus src/pages/[...pfad].astro, vorher ein <style>-Block je Artikel. Heute braucht
   kein Artikel mehr als drei, vier ist Reserve. Mehr Absätze fallen ohne Fehler auf die normale Darstellung zurück. */
.news-text-wrap.teaser-absaetze-1 > p:nth-child(-n+1),
.news-text-wrap.teaser-absaetze-2 > p:nth-child(-n+2),
.news-text-wrap.teaser-absaetze-3 > p:nth-child(-n+3),
.news-text-wrap.teaser-absaetze-4 > p:nth-child(-n+4) { font-size: 15px; color: #888; }

/* Mail-Knopf mit Adresse und Kopierknopf an der Stelle des alten Kontaktformulars (Kontaktseite).
   Knöpfe in den Bootstrap-Klassen der Seite (btn-primary wie "Weiterlesen", btn-outline-secondary wie "Feedback").
   Das Briefsymbol vor mailto-Verweisen und das Symbol vor externen Verweisen kommen aus den Regeln der Seite. */
.byggve-mail-adresse { font-size: 14px; }
/* Sprungziel des Knopfs "Schreibe mir" ist die Seitenüberschrift der Kontaktseite. Die Kopfzeile ist fixiert, 123 px hoch,
   unter 576 px 153 px, weil der Untertitel umbricht. Die Überschrift landet 12 px unter der Kopfzeile (Vorgabe Alex). */
.seitentitel { scroll-margin-top: 135px; }
@media (max-width: 575.98px) { .seitentitel { scroll-margin-top: 165px; } }
.byggve-mail-adresse a { word-break: break-all; }
.byggve-kopieren { margin-left: 10px; }
.byggve-kopieren.ist-kopiert { color: #fff; background-color: #6c757d; border-color: #6c757d; }

/* Knopf "Schreibe mir" unter dem Feedback-Kasten (Vorgabe Alex, 31.10.2026), ohne Kasten, mit den Klassen von "weiteres
   Feedback". Er führt zum Mail-Baustein auf der Kontaktseite. Keine eigenen Regeln nötig. */

/* Adresskarte statt Google-Einbettung auf der Kontaktseite (Vorgabe Alex, nach dem Vorbild piotrowski.online vom 31.10.2026).
   Kartenbild 1520 x 880 aus scripts/karte-rendern.mjs, angezeigt in Spaltenbreite und 440 px hoch wie die alte Einbettung.
   Darüber unten links ein Kasten mit Anschrift und zwei Knöpfen, die Quellenangabe unten rechts im Bild.
   Die Markierung liegt im Bild bei etwa x 500 von 760, y 200 von 440, deshalb verdeckt der Kasten links sie nicht. */
.byggve-karte { position: relative; margin: 0 0 24px; }
.byggve-karte-bild { display: block; width: 100%; height: 440px; object-fit: cover; object-position: center; }
.byggve-karte-kasten { position: absolute; left: 24px; bottom: 24px; width: 300px; box-sizing: border-box; padding: 20px; background: #fff; border: 1px solid #dee2e6; border-radius: .25rem; box-shadow: 0 4px 20px rgba(0,0,0,0.16); }
.byggve-karte-kasten p { margin: 0 0 4px; }
.byggve-karte-name { font-weight: 700; }
.byggve-karte-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.byggve-karte-knoepfe .btn { margin-right: 0; }
.byggve-karte-quelle, .ce-content p.byggve-karte-quelle { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 8px; background: rgba(255,255,255,0.8); font-size: 11px; line-height: 1.5; color: #6c757d; }
@media (max-width: 991px) { .byggve-karte-bild { object-position: 60% center; } }
@media (max-width: 767px) {
  /* Auf dem Telefon liegt der Kasten unten über dem Bild, die Markierung bleibt durch den höheren, verschobenen Ausschnitt darüber sichtbar */
  .byggve-karte-bild { height: 560px; object-position: 66% center; }
  .byggve-karte-kasten { bottom: 48px; left: 16px; right: 16px; width: auto; padding: 16px; }
  .byggve-karte-knoepfe { flex-direction: row; flex-wrap: wrap; gap: 8px 10px; }
}


/* Überschriften (31.10.2026, Auftrag Alex): Jede Seite hat genau eine h1. src/rehype-ueberschriften.mjs rückt die
   Markdown-Überschriften eine Ebene hoch und gibt jeder die Bootstrap-Klasse ihrer alten Ebene (.h2, .h3, .h4), damit
   die Schriftgröße bleibt. Die Seitenüberschrift (erste h1, Klasse seitentitel) stand im Original auf einem Teil der
   Seiten in <div class="ce-header h2-mb"> mit 3rem Abstand statt der 2.5rem der nackten h2. Welche Seiten das sind,
   entscheidet src/pages/[...pfad].astro über die Klasse titel-abstand-3 am Rahmen. */
.titel-abstand-3 .ce-content h1.seitentitel { margin-bottom: 3rem; }

/* Impressum und Datenschutzerklärung: die Abschnittstitel sahen im Original aus wie <p><strong>, also fett in
   Textgröße mit dem Absatzabstand. Die Texte kommen aus rechtstexte/ mit ## und ### (siehe scripts/rechtstexte-einspielen.mjs),
   nur die Darstellung passt sich an. */
.rechtstext .ce-content > h2 { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 1rem; }

/* Hintergrund in Daten: zweispaltige Tabellen mit leerer erster Spalte wie im Original (dort style="width:100%", hier Klasse). */
.hintergrund-tabelle { width: 100%; }

/* Sprachflagge (Vorgabe Alex, 31.10.2026, wie auf piotrowski.online). Ab 992 px letzter Menüpunkt: ein nav-link, dessen
   rechter Innenabstand 6 px ist, damit die Flagge 6 px vor der rechten Kante des Kopfbilds endet (beide .container, 15 px
   Innenabstand). Ganz bündig wirkte sie optisch nicht bündig (Alex, 31.10.2026). Die 6 px kommen vom linken Innenabstand
   weg (1rem - 6px), damit der Verweis gleich breit bleibt und das Menü nicht weiter nach links rückt; der Abstand zu
   "Kontakt" ist dann 26 px statt 32 px. Höhe wie ein Textlink (24 px Zeile plus 2 x .5rem), die Flagge sitzt darin senkrecht
   mittig. Das Menü rückt durch die Flagge um 34 px nach links, eine gewollte Abweichung vom Original. */
.navbar-expand-lg .navbar-nav .nav-link.sprachflagge-menue { display: flex; align-items: center; min-height: calc(1.5em + 1rem); padding-left: calc(1rem - 6px); padding-right: 6px; }   /* Spezifität über der Bootstrap-Regel für den Innenabstand */
.sprachflagge-menue img { display: block; width: 18px; height: 12px; }
/* Zwischen 992 und 1199 px ist der Container 960 px breit. Mit der Flagge passen Marke und Menü dort nur in eine Zeile,
   wenn die Menüpunkte enger stehen (.75rem statt 1rem je Seite, zusammen 44 px weniger), sonst bricht die Kopfzeile
   auf 153 px um. Ab 1200 px bleibt der Abstand des Originals. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding-left: .75rem; padding-right: .75rem; }
  .navbar-expand-lg .navbar-nav .nav-link.sprachflagge-menue { padding-left: calc(.75rem - 6px); padding-right: 6px; }
}
/* Unter 992 px sitzt die Flagge mittig direkt über dem Menüsymbol (Alex, 31.10.2026). Das Menüsymbol (.navbar-toggler,
   54 x 38 px) liegt senkrecht in der Mitte der Kopfzeile und schließt rechts mit dem Rahmen ab. Der Verweis ist 34 x 28 px
   (8 px Rand als Tippfläche), also 10 px vom rechten Rand, damit er waagerecht mittig über dem Symbol steht, und unten
   4 px über der Oberkante des Symbols: 50 % - 19 px (halbe Symbolhöhe) - 28 px + 4 px. */
.sprachflagge-rahmen { position: relative; }
.sprachflagge { position: absolute; top: calc(50% - 43px); right: 10px; padding: 8px; line-height: 0; z-index: 1; }
.sprachflagge img { display: block; width: 18px; height: 12px; }