/* www.wilde-fuesse.de — statischer Neubau 30.10.2026
 *
 * Teil 1: Protostar (Joomla 3.10.12), nur die Regeln, die auf den sechs Seiten greifen — gemessen per CDP-Regelnutzung
 *         bei 1440/1200/980/768/390/320 px (werkzeug/css_coverage.js, Beleg: werkzeug/assets/protostar-auszug.css,
 *         „Z.“ = Zeile in templates/protostar/css/template.css). Reihenfolge wie im Original, damit dieselben Regeln
 *         gewinnen. Entfallen: IE-Hacks (*zoom, \9), Selektoren für Teile, die es hier nicht gibt (navbar, inputs).
 * Teil 2: Handy (bis 767 px) — neu: Menü oben, Schrift ≥ 16 px, Tippflächen ≥ 44 px, Tabellen als Blöcke.
 */

/* ---------------------------------------------------------------- Schrift (früher von fonts.googleapis.com) */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url(fonts/open-sans-latin-400.woff2) format("woff2"); /* = Google-Datei v44 „latin“, Lizenz OFL (fonts/OFL.txt) */
}
/* früher als <style> im Kopf jeder Seite (Protostar-Option googleFont) */
h1, h2, h3, h4, h5, h6, .site-title { font-family: "Open Sans", sans-serif; }

/* ---------------------------------------------------------------- Teil 1: Protostar */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } /* Z. 10 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Z. 23 */
a:hover, a:active { outline: 0; } /* Z. 34 */
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } /* Z. 50 */
.clearfix::before, .clearfix::after { display: table; content: ""; line-height: 0; } /* Z. 167 */
.clearfix::after { clear: both; } /* Z. 172 */
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: #333; background-color: #fff; } /* Z. 190 */
a { color: #005e8d; text-decoration: none; } /* Z. 198 */
a:hover, a:focus { color: #002b41; text-decoration: underline; } /* Z. 203 */
[class*="span"] { float: left; min-height: 1px; margin-left: 20px; } /* Z. 239 */
.container { width: 940px; } /* Z. 247 */
.span9 { width: 700px; } /* Z. 259 */
.span3 { width: 220px; } /* Z. 277 */
.row-fluid { width: 100%; } /* Z. 322 */
.row-fluid::before, .row-fluid::after { display: table; content: ""; line-height: 0; } /* Z. 327 */
.row-fluid::after { clear: both; } /* Z. 332 */
.row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; box-sizing: border-box; float: left; margin-left: 2.127659574%; } /* Z. 335 */
.row-fluid [class*="span"]:first-child { margin-left: 0; } /* Z. 346 */
.row-fluid .span9 { width: 74.468085099%; } /* Z. 364 */
.row-fluid .span3 { width: 23.404255317%; } /* Z. 388 */
.container { margin-right: auto; margin-left: auto; } /* Z. 504 */
.container::before, .container::after { display: table; content: ""; line-height: 0; } /* Z. 510 */
.container::after { clear: both; } /* Z. 515 */
p { margin: 0 0 9px; } /* Z. 532 */
strong { font-weight: bold; } /* Z. 544 */
h1, h2, h3, h4, h5, h6 { margin: 9px 0; font-weight: bold; line-height: 18px; color: inherit; text-rendering: optimizeLegibility; } /* Z. 602 */
h1, h2, h3 { line-height: 36px; } /* Z. 622 */
h1 { font-size: 35.75px; } /* Z. 625 */
h3 { font-size: 22.75px; } /* Z. 631 */
h4 { font-size: 16.25px; } /* Z. 634 */
.page-header { padding-bottom: 8px; margin: 18px 0 27px; border-bottom: 1px solid #eee; } /* Z. 655 */
ul, ol { padding: 0; margin: 0 0 9px 25px; } /* Z. 661 */
li { line-height: 18px; } /* Z. 671 */
hr { margin: 18px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fff; } /* Z. 729 */
table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } /* Z. 1694 */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); } /* Z. 2154 */
.nav { margin-left: 0; margin-bottom: 18px; list-style: none; } /* Z. 2889 */
.nav > li > a { display: block; } /* Z. 2894 */
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; } /* Z. 2898 */
.pull-right { float: right; } /* Z. 4716 */
.pull-left { float: left; } /* Z. 4719 */
@media (max-width: 767px) {
  body { padding-left: 20px; padding-right: 20px; } /* Z. 4793 */
  .container { width: auto; } /* Z. 4819 */
  .row-fluid { width: 100%; } /* Z. 4822 */
  [class*="span"], .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; box-sizing: border-box; } /* Z. 4835 */
}
@media (min-width: 768px) and (max-width: 979px) {
  .container { width: 724px; } /* Z. 4954 */
  .span9 { width: 538px; } /* Z. 4966 */
  .span3 { width: 166px; } /* Z. 4984 */
}
@media (min-width: 1200px) {
  .container { width: 940px; } /* Z. 5294 */
}
.page-header { margin: 2px 0 10px 0; padding-bottom: 5px; } /* Z. 6102 */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Z. 7127 */
body.site { border-top: 3px solid #0088cc; padding: 20px; background-color: #f4f6f7; } /* Z. 7131 */
.site-title { font-size: calc(16px + 2.16vw); line-height: 48px; font-weight: bold; } /* Z. 7145 */
@media (min-width: 1024px) {
  .site-title { font-size: 40px; } /* Z. 7152 */
}
.brand { color: #001a27; transition: color .5s linear; } /* Z. 7156 */
.brand:hover { color: #005e8d; text-decoration: none; } /* Z. 7163 */
.header { margin-bottom: 10px; } /* Z. 7167 */
.container { max-width: 960px; } /* Z. 7192 */
.body .container { background-color: #fff; border-radius: 4px; padding: 20px; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 6px rgba(0,0,0,0.05); } /* Z. 7195 */
.well .page-header { margin: 0 0 5px 0; } /* Z. 7206 */
h1, h2, h3, h4, h5, h6 { margin: 12px 0; overflow-wrap: break-word; } /* Z. 7214 */
h1 { font-size: 26px; line-height: 28px; } /* Z. 7218 */
h3 { font-size: 18px; line-height: 20px; } /* Z. 7226 */
h4 { font-size: 14px; line-height: 16px; } /* Z. 7230 */
p { overflow-wrap: break-word; } /* Z. 7247 */
@media (max-width: 768px) {
  body { padding-top: 0; } /* Z. 7482 */
  .header { background: transparent; } /* Z. 7486 */
  .header .brand { float: none; display: block; text-align: center; } /* Z. 7489 */
}
@media (max-width: 980px) {
  .well { padding: 10px; } /* Z. 7593 */
}
li { overflow-wrap: break-word; } /* Z. 7721 */

/* ---------------------------------------------------------------- Teil 2: Handy (bis 767 px), neu
 * Früher: Menü erst unter dem Inhalt, Schrift 13 px, Links 15 px hoch, Bilder in Tabellen auf 0 px geschrumpft.
 * Jetzt: Menü oben (gleiche Fläche „Willkommen“), Schrift ≥ 16 px mit gleicher Stufung, Tippflächen ≥ 44 px,
 * Tabellenzeilen als Blöcke: Bilder nebeneinander, darunter der Text in voller Breite. Kein JavaScript. */
@media (max-width: 767px) {
  body.site { padding: 12px 10px; font-size: 16px; line-height: 24px; }
  li { line-height: 24px; }
  .body .container { padding: 6px 14px 14px; }
  .site-title { line-height: 1.25; }
  .header .brand { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .header { margin-bottom: 14px; }

  /* Menü vor den Inhalt (im Quelltext bleibt der Inhalt zuerst; der Inhalt selbst hat keine Links) */
  .row-fluid { display: flex; flex-direction: column; }
  #aside { order: -1; }
  #aside .well { padding: 8px 10px 4px; margin-bottom: 18px; }
  #aside .nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 4px; }
  #aside .nav > li > a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 4px; }
  #aside .nav > li > a[aria-current="page"] { color: #333; font-weight: bold; }

  /* Schrift: die Inhaltstexte tragen feste Joomla-Größen im style (small = 13 px, medium = 16 px, large = 18 px).
     Stufung bleibt erhalten, nur ab 16 px: small -> 16, medium -> 19, large -> 22. */
  #content [style*="font-size: small"] { font-size: 16px !important; }
  #content [style*="font-size: medium"] { font-size: 19px !important; }
  #content [style*="font-size: large"] { font-size: 22px !important; }
  #content [style*="line-height: 1.3em"] { line-height: 1.4em !important; }
  h4 { font-size: 16px; line-height: 20px; }
  h1 { line-height: 32px; }

  /* Tabellen: Zeile = Block; Bildzellen nebeneinander, Textzelle volle Breite darunter */
  #content table, #content tbody { display: block; width: auto !important; }
  #content tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; margin-bottom: 18px; }
  #content td { display: block; flex: 1 1 100%; }
  #content td:not(.bild) { width: auto !important; }      /* Textzellen: volle Breite statt fester 390 px */
  #content td.bild { flex: 0 0 auto; }                     /* Bildzellen behalten ihre Breite (130 px: Symbole übereinander) */
  #content td.bild + td.bild { flex: 1 1 0; min-width: 0; } /* zweite Bildzelle nimmt den Rest, das Bild passt sich ein */
  #content td.leer { display: none; }
  #content td h1 { margin: 0; }

  /* Fuß: „Nach oben“ als Tippfläche */
  .footer #back-top { display: inline-flex; align-items: center; min-height: 44px; }
  .footer p { margin: 0; line-height: 44px; }
}