/* Red Snake Boats – Ergänzungen zum Original-Design (Twenty Ten) */
html { -webkit-text-size-adjust: 100%; }
#header { padding-top: 20px; }
#branding img { width: 100%; height: auto; }
#site-info { width: auto; }
#site-info a { margin-right: 14px; }
#site-generator { display: none; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content img.alignleft { margin-bottom: 12px; }
.entry-content p { overflow-wrap: break-word; }

/* Galerie */
.galerie { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; clear: both; }
.galerie a { display: block; line-height: 0; border: 1px solid #a9a9a9; padding: 2px; background: #fff; }
.galerie a:hover { border-color: #000; }
.galerie img { width: 120px; height: 90px; object-fit: cover; display: block; }

/* Seitenleiste "Die Boote" */
.boote { display: flex; flex-wrap: wrap; gap: 4px; }
.boote a { line-height: 0; }
.boote img { width: 75px; height: 50px; object-fit: cover; }

/* Übersicht Bauberichte */
.uebersicht { list-style: none; margin: 0; padding: 0; }
.uebersicht li { overflow: hidden; margin: 0 0 22px; }
.uebersicht img { float: left; width: 160px; height: 120px; object-fit: cover; margin: 0 16px 0 0; border: 1px solid #ccc; }
.uebersicht h3 { clear: none; font-size: 18px; font-weight: bold; margin: 0 0 6px; }
.uebersicht h3 a { color: #000; text-decoration: none; }
.uebersicht h3 a:hover { color: #ff4b33; }

.mail-knopf { display: inline-block; background: #000; color: #fff !important; padding: 10px 18px; text-decoration: none !important; border-radius: 3px; }
.mail-knopf:hover { background: #333; }

/* Menü-Knopf fürs Handy */
#menu-knopf { display: none; }

/* Lightbox */
#lb { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; z-index: 100000; }
#lb.offen { display: flex; }
#lb img { max-width: 92vw; max-height: 86vh; box-shadow: 0 0 20px #000; background: #fff; padding: 6px; }
#lb button { position: absolute; background: rgba(0,0,0,.5); color: #fff; border: 0; font-size: 34px; line-height: 1; padding: 10px 16px; cursor: pointer; font-family: Arial, sans-serif; }
#lb button:hover { background: rgba(255,255,255,.2); }
#lb .zu { top: 10px; right: 10px; }
#lb .vor { right: 10px; top: 50%; transform: translateY(-50%); }
#lb .zurueck { left: 10px; top: 50%; transform: translateY(-50%); }
#lb .zaehler { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #ccc; font: 14px Arial, sans-serif; }

/* Tablet und Handy */
@media (max-width: 990px) {
  #wrapper { width: auto; margin: 0; padding: 0 16px; }
  #access .menu-header, div.menu, #colophon, #branding, #main, #access { width: auto; }
  #access { float: none; }
  #branding img { float: none; }
  #main { padding-top: 24px; }
  #container { float: none; margin: 0; }
  #content { margin: 0 0 30px; }
  #primary { float: none; width: auto; border-top: 1px solid #ddd; padding-top: 20px; }
  #colophon { padding: 14px 0; }
}
@media (max-width: 700px) {
  body { background: #fff; }
  #header { padding-top: 12px; }
  #menu-knopf { display: block; width: 100%; background: #000; color: #fff; border: 0; text-align: left; font: bold 15px "Helvetica Neue", Arial, sans-serif; padding: 12px; cursor: pointer; }
  #access .menu-header { display: none; margin: 0; }
  #access.offen .menu-header { display: block; }
  #access .menu-header li { float: none; }
  #access a { line-height: 44px; font-size: 15px; border-top: 1px solid #222; }
  #access ul ul { display: block; position: static; float: none; width: auto; box-shadow: none; }
  #access ul ul li { min-width: 0; }
  #access ul ul a { width: auto; background: #111; padding: 14px 10px 14px 28px; }
  #content, #content p, #content li { font-size: 16px; line-height: 1.6; }
  #content .entry-title { font-size: 22px; }
  .entry-content img.alignleft { float: none; display: block; margin: 0 0 14px; }
  .galerie { gap: 6px; }
  .galerie a { width: calc(33.33% - 4px); box-sizing: border-box; }
  .galerie img { width: 100%; height: auto; aspect-ratio: 4/3; }
  .uebersicht img { width: 110px; height: 82px; }
}

/* PDF-Berichte als Webseite */
.pdf-zeile { background: #f5efe6; border-left: 4px solid #a3121d; padding: 10px 14px; margin: 0 0 22px !important; }
.pdf-zeile a { font-weight: bold; }
.bericht .bericht-titel { font-size: 19px; font-weight: bold; color: #000; margin-bottom: 4px; }
.bericht h3 { font-size: 16px; font-weight: bold; color: #000; margin: 28px 0 10px; }
.bericht figure { margin: 6px 0 22px; }
.bericht figure a { display: block; line-height: 0; }
.bericht figure img { max-width: 100%; height: auto; border: 1px solid #ccc; }
.bericht figcaption { font-size: 13px; font-style: italic; color: #555; margin-top: 6px; line-height: 1.4; }
.bericht ul { margin: 0 0 18px 1.5em; list-style: square; }
.bericht ul ul { margin-bottom: 0; list-style: circle; }
.bericht li { margin-bottom: 4px; }

/* Eckdaten-Tabelle im Bericht */
.bericht table.eckdaten { width: auto; margin: 0 0 18px; border: 0; }
.bericht table.eckdaten td { padding: 3px 18px 3px 0; border: 0; }

/* ===== Neues Layout 19.10.2026 (Entwurf Ulrich): Menüleiste unten, keine Seitenleiste ===== */
body.neu #container { float: none; margin: 0; width: auto; }
body.neu #content { margin: 0 0 30px; width: auto; }
body.neu #main { padding-top: 26px; }
body.neu .entry-content img.alignleft { max-width: 45%; margin-right: 20px; }
body.neu #branding { border-bottom: 0; padding-bottom: 0; }

/* Menüleiste unten */
#fussmenue { border: 2px solid #1c2b36; margin: 10px 0 30px; }
#fussmenue ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 70px; }
#fussmenue a { display: block; padding: 13px 4px; font: bold 15px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #000; text-decoration: none; }
#fussmenue a:hover { color: #1f5f86; text-decoration: underline; }
#fussmenue a.aktiv { color: #1f5f86; }

/* Startseite */
.startseite .entry-title { display: none; }
.start { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: stretch; }
.start a { line-height: 0; display: block; }
.start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
         grid-template-areas: "spanten tau" "liste freya" "liste rad"; }
.b-spanten { grid-area: spanten; } .b-tau { grid-area: tau; } .b-freya { grid-area: freya; } .b-rad { grid-area: rad; }
.links > a { aspect-ratio: 4 / 3; overflow: hidden; }
.links > a:hover img, .b-geruest:hover img { opacity: .88; }
.b-geruest { overflow: hidden; }
.liste { grid-area: liste; line-height: 1.4; padding: 6px 0 0 2px; }
.liste h3 { font: bold 19px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #000; margin: 0 0 8px; }
.liste ul { margin: 0 !important; padding: 0 0 0 1.1em; list-style: disc; color: #1f5f86; }
.liste li { margin: 0 0 9px; }
.liste a { display: inline !important; line-height: 1.4 !important; font: bold 14px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #1f5f86; text-decoration: none; }
.liste a:hover { text-decoration: underline; }
.adresse { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid #ddd; }
.adresse p { margin: 0 0 10px; }
.adresse a, .entry-content a[href^="mailto"], .entry-content a[href^="tel"] { color: #1f5f86; }
.entry-content h3 { font-size: 17px; font-weight: bold; color: #000; margin: 26px 0 10px; }

@media (max-width: 700px) {
  #fussmenue ul { gap: 0 22px; }
  #fussmenue a { padding: 12px 2px; font-size: 15px; }
  .start { grid-template-columns: 1fr; }
  .links { gap: 8px; grid-template-areas: "spanten tau" "liste liste" "freya rad"; }
  .liste a { font-size: 16px; }
  .b-geruest { aspect-ratio: 3 / 4; }
}

/* Knöpfe Bericht/PDF auf den Bauberichtsseiten (19.10.2026) */
.bericht-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 26px; clear: both; }
.bericht-knoepfe .knopf { flex: 1 1 260px; display: block; padding: 14px 18px; border-radius: 4px; text-decoration: none !important;
  background: #1f5f86; color: #fff !important; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; line-height: 1.3; }
.bericht-knoepfe .knopf span { display: block; font-size: 18px; font-weight: bold; }
.bericht-knoepfe .knopf small { display: block; font-size: 13px; opacity: .9; margin-top: 3px; }
.bericht-knoepfe .knopf:hover { background: #174a69; }
.bericht-knoepfe .knopf-pdf { background: #fff; color: #a3121d !important; border: 2px solid #a3121d; }
.bericht-knoepfe .knopf-pdf:hover { background: #f7ecec; }
.pdf-zeile { font-size: 15px; }
/* Lightbox: alle Bilder in einheitlicher Größe (19.10.2026) */
#lb img { width: min(92vw, 1200px); height: min(84vh, 860px); max-width: none; max-height: none;
          object-fit: contain; background: transparent; padding: 0; box-shadow: none; }
@media (max-width: 700px) { body.neu .entry-content img.alignleft { max-width: 100%; margin-right: 0; } }