/* ==========================================================================
   tm3d.de – Stylesheet
   Nachbau des bisherigen Joomla-Templates "JSN Metro Pro" (Farbschema "image")
   in einer einzigen, eigenständigen Datei – ohne Bootstrap/Joomla-Altlasten.
   ========================================================================== */

/* ---------- Schrift ---------- */
@font-face { font-family: "Source Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-300.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-300italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-regular.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/source-sans-3-v15-latin-700.woff2) format("woff2"); }

/* ---------- Variablen ---------- */
:root {
  --page-width: 960px;
  --side-width: 222px;
  --font: "Source Sans", "Source Sans Pro", Verdana, Geneva, Arial, Helvetica, sans-serif;
  --text: #3d3d3d;
  --link: #006dbc;
  --beige: #ffe7bd;          /* Inhaltsflächen */
  --navy: #0c226c;           /* Seitenmenü */
  --blue: #006dbc;           /* Dropdown */
  --blue-hover: #338ac9;
  --blue-line: #4d99d0;
  --orange: #ff9800;
  --yellow: #fcc604;         /* Buttons */
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 300 14.4px/1.5 var(--font);
  color: var(--text);
  background: #0c226c url(../img/main-background.jpg) center / 100% 100% fixed;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 300; color: var(--text); margin: .5em 0; }
h1 { font-size: 25.92px; line-height: 40px; }
h2 { font-size: 23.04px; line-height: 36px; }
h3 { font-size: 20px; line-height: 30px; }
h4 { font-size: 17.28px; line-height: 24px; }
p { margin: 5px 0 10px; }
b, strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid rgba(0,0,0,.15); margin: 15px 0; }
pre, code { font-family: Consolas, "Courier New", monospace; font-size: 13px; }
pre { background: #ddd0ad; padding: 0; overflow-x: auto; line-height: 1.25; }
pre code, code.hljs { display: block; padding: 8px 10px; background: #fff0cd; overflow-x: auto; }
table { border-collapse: collapse; }
td, th { vertical-align: top; }
iframe { max-width: 100%; border: 0; }
.clear, .clearbreak { clear: both; }
.pull-left, .left { float: left; }
.pull-right, .right { float: right; }
.pull-left img, img.pull-left { margin: 3px 10px 5px 0; }
.pull-right img, img.pull-right { margin: 3px 0 5px 10px; }
.pic-space { margin: 3px 8px 3px 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.page { width: var(--page-width); max-width: 100%; margin: 0 auto; }

/* ==========================================================================
   Kopf: Logo + Icon-Menü
   ========================================================================== */
.site-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin: 10px 0; min-height: 122px; position: relative; z-index: 50;
}
.logo { display: block; margin-top: 10px; line-height: 0; }
.logo img { width: 277px; height: auto; }
.menu-toggle { display: none; }

.mainmenu, .mainmenu ul { list-style: none; margin: 0; padding: 0; }
.mainmenu { display: flex; }
.mainmenu > li {
  position: relative; min-width: 100px; height: 110px; margin-right: 1px;
  border: 1px solid transparent;
}
.mainmenu > li:last-child { margin-right: 0; }
.mainmenu > li > a {
  display: block; min-width: 80px; margin-top: 10px; padding: 8px 10px 5px;
  color: #d2d2d2; text-align: center; text-decoration: none;
  background: url(../img/circle-bg.png) center 23px / 0 0 no-repeat;
  transition: background-size .2s ease-out, background-position .2s ease-out;
}
.mainmenu > li.nodesc > a { padding: 12px 12px 25px; }
.mainmenu .mm-icon {
  display: block; height: 44px; opacity: .5;
  background: url(../img/icons-uni-white.png) no-repeat;
}
.mainmenu .mm-title { display: block; font-size: 17.28px; line-height: 22px; white-space: nowrap; }
.mainmenu .mm-desc  { display: block; font-size: 13.8px; line-height: 22px; color: #eee; max-width: 80px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mainmenu > li:hover, .mainmenu > li.active, .mainmenu > li:focus-within { background: rgba(255,255,255,.2); }
.mainmenu > li:hover > a, .mainmenu > li.active > a, .mainmenu > li:focus-within > a {
  color: #fff; background-position: center 0; background-size: 56px 56px;
}
.mainmenu > li:hover .mm-icon, .mainmenu > li.active .mm-icon, .mainmenu > li:focus-within .mm-icon { opacity: 1; }
.mainmenu > li:hover .mm-desc, .mainmenu > li.active .mm-desc { color: #fff; }
.mm-toggle { display: none; }

/* Dropdowns */
.mainmenu ul {
  position: absolute; top: 110px; left: -1px; width: 205px;
  background: var(--blue); display: none; z-index: 100;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.mainmenu ul ul { top: 0; left: 205px; }
.mainmenu > li:nth-last-child(-n+2) ul ul { left: auto; right: 205px; }   /* rechts am Rand nach links aufklappen */
.mainmenu li:hover > ul, .mainmenu li:focus-within > ul { display: block; }
.mainmenu ul li { position: relative; border-bottom: 1px solid var(--blue-line); }
.mainmenu ul li:last-child { border-bottom: 0; }
.mainmenu ul a { display: block; padding: 10px 16px 10px 10px; font-size: 15px; line-height: 20px; color: #ebf7fc; }
.mainmenu ul a:hover { text-decoration: none; color: #fff; }
.mainmenu ul li.parent > a { background: url(../img/icon-arrow-white.png) 98% center no-repeat; }
.mainmenu ul li:hover, .mainmenu ul li.active { background-color: var(--blue-hover); }

/* ==========================================================================
   Startseite
   ========================================================================== */
.home-promo { display: grid; grid-template-columns: minmax(0, 714px) var(--side-width); justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* Slider */
.slider { position: relative; aspect-ratio: 720 / 390; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; margin: 0; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide figcaption { position: absolute; top: 10%; left: 0; max-width: 60%; color: #fff; }
.slide figcaption .cap-title {
  display: inline-block; margin: 0 0 1px; padding: 10px; background: rgba(0,0,0,.7);
  font-size: 20px; line-height: 25px; text-transform: uppercase;
}
.slide figcaption .cap-desc { display: block; margin: 0; padding: 10px; background: rgba(0,0,0,.3); font-size: 16px; width: max-content; max-width: 100%; }
.slider-nums {
  position: absolute; top: 15px; right: 15px; z-index: 3; display: flex; gap: 5px;
  padding: 5px; background: rgba(0,0,0,.75); border-radius: 5px;
}
.slider-nums button {
  border: 0; border-radius: 2px; padding: 2px 10px; cursor: pointer;
  font: bold 11px/12px Consolas, Arial, sans-serif; color: #fff; background: #333;
}
.slider-nums button.is-active, .slider-nums button:hover { background: #c33; }
.slider-nums { opacity: 0; transition: opacity .3s; }
.slider:hover .slider-nums, .slider:focus-within .slider-nums { opacity: 1; }

/* Wetter-Box (iframe /wetter-box.php, wie früher wc.php) */
.wetter-frame { background: rgba(220,190,170,.7); padding: 0 10px; height: 100%; min-height: 390px; }
.wetter-frame iframe { display: block; width: 100%; height: 390px; border: 0; background: transparent; }

/* Kacheln */
.home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.tile {
  position: relative; display: block; height: 142px; overflow: hidden; text-align: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  transition: background .3s ease-out, border-color .3s ease-out;
}
.tile img { display: inline-block; margin-top: 20px; transition: margin .3s ease-out; }
.tile span {
  position: absolute; left: 0; bottom: 14px; padding: 0 15px;
  color: #fff; font-size: 16px; line-height: 24px; transition: padding .3s ease-out;
}
.tile:hover { text-decoration: none; }
.tile:hover img { margin-left: -30px; }
.tile:hover span { padding-left: 35px; }
.tile-projekte:hover { background: #e89e00; border-color: #ffc600; }
.tile-dienst:hover   { background: #7ea300; border-color: #9cca00; }
.tile-wetter:hover   { background: #1e63a2; border-color: #2b85d7; }
.tile-shop:hover     { background: #0096a9; border-color: #00b5cc; }

/* Inhaltszeile */
.home-content { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr) 168px; gap: 14px; align-items: start; }
.home-left > * + * { margin-top: 10px; }
.box-orange { background: var(--orange); color: #fff; padding: 0 10px 10px; }
.box-orange h3 { color: #fff; font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; padding: 12px 0 8px; }
.box-orange p { color: #fff; }
.box-orange a { color: #fff; font-weight: 600; }
.box-orange a:hover { background: #fff; color: var(--link); text-decoration: none; }
.welcome { background: linear-gradient(45deg, #2f83bc 0%, #0c226c 100%); color: #fff; padding: 10px 14px 12px; }
.welcome h2 { color: #fff; font-weight: 700; font-size: 25.92px; line-height: 38px; margin: 6px 0 8px; }
.welcome ul { padding-left: 20px; margin: 0; }
.welcome li { margin-bottom: 6px; }
.wetteronline { background: #ccbbff; text-align: center; font-family: Arial, Verdana, sans-serif; width: 168px; }
.wetteronline a { color: #000; text-decoration: none; }
.wetteronline .wo-title { display: block; font-size: 12px; font-weight: bold; margin-bottom: 2px; }
.wetteronline .wo-more { font-size: 10px; line-height: 18px; color: #000; }
.wetteronline iframe { display: block; margin: 0 auto; }

/* Blitz-Teaser (Startseite + Unterseiten) */
.teaser-blitz {
  position: relative; display: block; height: 125px; margin-top: 10px;
  background: #000 url(/images/wetter/b2017sm1.gif) center / cover no-repeat;
}
.teaser-blitz span { position: absolute; left: 5px; bottom: 6px; color: #fff; font-size: 17.28px; text-shadow: 0 1px 2px #000; }
.teaser-blitz:hover { text-decoration: none; outline: 2px solid rgba(255,255,255,.4); }

/* ==========================================================================
   Unterseiten
   ========================================================================== */
.layout-page { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); gap: 10px; align-items: start; }
.main { min-width: 0; }

/* Seitenmenü */
.box-own { background: var(--navy); color: #fff; padding-bottom: 6px; }
.box-title { margin: 0 0 4px; padding: 10px; color: #fff; font-size: 20px; line-height: 25px; border-bottom: 1px solid var(--blue-line); }
.box-title span { display: block; padding-left: 32px; background: url(../img/icons-uni-white.png) no-repeat; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree a { display: block; color: #fff; line-height: 20px; }
.tree a:hover, .tree li.current > a { text-decoration: none; background: #64669c; }
.tree a span { display: inline-block; margin-left: 5px; padding: 5px 0 5px 28px; background: url(../img/baustein066.gif) 0 50% no-repeat; }
.tree-1 > li > a { padding: 1px 10px 1px 1px; }
.tree-2 > li > a { padding: 0 25px 0 20px; }
.tree-3 > li > a { padding: 0 25px 0 40px; }
.tree-4 > li > a { padding: 0 25px 0 60px; }
/* Würfel je Ebene: normal / Maus darüber (gedreht) / aktive Seite (weiter gedreht) */
.tree-1 > li > a:hover span          { background-image: url(../img/baustein126.gif); }
.tree-1 > li.current > a span        { background-image: url(../img/baustein206.gif); }
.tree-2 > li > a span                { background-image: url(../img/baustein074.gif); }
.tree-2 > li > a:hover span          { background-image: url(../img/baustein134.gif); }
.tree-2 > li.current > a span        { background-image: url(../img/baustein214.gif); }
.tree-3 > li > a span, .tree-4 > li > a span             { background-image: url(../img/baustein076.gif); }
.tree-3 > li > a:hover span, .tree-4 > li > a:hover span { background-image: url(../img/baustein136.gif); }
.tree-3 > li.current > a span, .tree-4 > li.current > a span { background-image: url(../img/baustein216.gif); }
.tree li.active > a { font-weight: 400; }

/* Brotkrumen */
.breadcrumbs { background: #fff; padding: 5px 15px; margin-bottom: 10px; font-size: 12.96px; line-height: 20px; }
.breadcrumbs ol { list-style: none; margin: 5px 0; padding: 0; display: flex; flex-wrap: wrap; }
.breadcrumbs li { color: #999; }
.breadcrumbs li::before { content: ""; display: inline-block; width: 16px; height: 12px; margin: 0 6px; background: url(../img/icon-arrow-black.png) center no-repeat; opacity: .6; }
.breadcrumbs li:first-child::before { content: "\2302"; width: auto; height: auto; margin: 0 8px 0 0; background: none; color: #999; opacity: 1; }
.breadcrumbs a { color: #404040; }
.breadcrumbs [aria-current] span { color: var(--text); font-weight: 400; }

/* Inhaltsbox */
.content { background: var(--beige); padding: 10px 10px 15px; margin-bottom: 10px; overflow-wrap: break-word; }
.content::after { content: ""; display: block; clear: both; }
.content .page-header h1, .content .page-header h2, .content > h1:first-child { margin-top: 2px; }
.content ul, .content ol { padding-left: 22px; }
.content table { max-width: 100%; }
.content img { max-width: 100%; }

/* Spalten-Raster aus den alten Joomla-Artikeln */
.grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }
.grid-layout > .grid-col { min-width: 0; }
.grid-layout1 { display: block; }

/* Buttons */
a.link-button {
  display: inline-block; padding: 8px 15px; background: var(--yellow); color: #4d4d4d;
  font-size: 16px; line-height: 24px; transition: background .2s;
}
a.link-button:hover { background: #f0b800; text-decoration: none; color: #222; }
a.link-button .link-icon { display: inline-block; margin: 3px 0; padding-left: 30px; line-height: 26px; background: url(../img/icons-uni.png) 0 -1713px no-repeat; }

/* Tabellen */
table.table-style { width: 100%; margin: 10px 0; }
/* blaue gestreifte Tabelle wie im alten Template (style-colorstripes, Farbschema "image") */
table.style-colorstripes { color: #fff; background: #fff; border: 0; }
table.style-colorstripes th, table.style-colorstripes td { padding: 5px 10px; text-align: left; border: 0; }
table.style-colorstripes th { background: #1e63a2; font-weight: 700; }
table.style-colorstripes tbody tr { background: #2a7fcb; }
table.style-colorstripes tbody tr.odd { background: #2373bb; }
table.style-colorstripes tbody tr:hover td { background: #2d8be1; }
table.style-colorstripes a { color: #fff; text-decoration: underline; }

/* Hinweise */
.text-tip, .text-info, .text-alert { padding: 8px 10px 8px 12px; margin: 10px 0; border-left: 4px solid var(--yellow); background: rgba(255,255,255,.5); }

/* Kommentare (Archiv der alten JComments) */
.comments-list, #comments { margin-top: 20px; }
.comment-box, .rbox { background: rgba(255,255,255,.55); padding: 8px 10px; margin: 8px 0; }
.comment-author { font-weight: 600; }
.comment-date { color: #777; font-size: 12px; margin-left: 6px; }
.comment-anchor { color: #999; margin-right: 6px; }
.comments-vote { display: none; }

/* ==========================================================================
   Fuß
   ========================================================================== */
.site-footer { margin-top: 10px; padding: 10px 0 50px; text-align: center; }
.footermenu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.footermenu li { padding: 0 11px; border-right: 1px solid rgba(255,255,255,.35); }
.footermenu li:last-child { border-right: 0; }
.footermenu a { color: #fff; font-size: 14px; line-height: 20px; text-transform: uppercase; padding: 2px; transition: .3s ease-out; }

.gotop {
  position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); z-index: 999;
  padding: 10px 15px; background: #fff; color: #666; text-transform: uppercase;
  box-shadow: 0 0 8px rgba(0,0,0,.1); transition: transform .3s, background .3s, color .3s;
}
.gotop.is-visible { transform: translate(-50%, 0); }
.gotop:hover { background: var(--link); color: #fff; text-decoration: none; }

/* Lightbox */
.lightbox { padding: 0; border: 0; background: #000; max-width: 95vw; max-height: 95vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0,0,0,.8); }
.lightbox-body iframe, .lightbox-body img { display: block; max-width: 95vw; max-height: 90vh; }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: #222; color: #fff; font-size: 20px; line-height: 24px; cursor: pointer; }

/* ==========================================================================
   Tablet / Handy
   ========================================================================== */
@media (max-width: 991px) {
  .page { padding: 0 12px; }
  .site-header { flex-wrap: wrap; align-items: center; min-height: 0; }
  .logo { margin: 0; }
  .logo img { width: 200px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff;
    font: 400 16px var(--font); cursor: pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 20px; height: 2px; background: #fff; position: relative; }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
  .site-nav { flex-basis: 100%; display: none; margin-top: 10px; }
  .site-header.nav-open .site-nav { display: block; }
  .mainmenu { flex-direction: column; background: rgba(12,34,108,.92); }
  .mainmenu > li { height: auto; min-width: 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .mainmenu > li > a, .mainmenu > li.nodesc > a { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 50px 10px 10px; text-align: left; background: none !important; }
  .mainmenu .mm-icon { width: 25px; height: 25px; flex: none; }
  .mainmenu .mm-desc { max-width: none; margin: 0; }
  .mm-toggle {
    display: block; position: absolute; right: 0; top: 0; width: 48px; height: 46px;
    border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 20px;
  }
  .mm-toggle::before { content: "+"; }
  .mainmenu li.open > .mm-toggle::before { content: "–"; }
  .mainmenu ul, .mainmenu ul ul, .mainmenu > li:nth-last-child(-n+2) ul ul {
    position: static; width: auto; box-shadow: none; display: none; left: auto; right: auto;
  }
  .mainmenu li:hover > ul, .mainmenu li:focus-within > ul { display: none; }
  .mainmenu li.open > ul { display: block; }
  .mainmenu ul ul a { padding-left: 25px; }
  .mainmenu ul ul ul a { padding-left: 40px; }
  .mainmenu ul li.parent > a { background: none; }

  .home-promo { grid-template-columns: 1fr; }
  .home-tiles { grid-template-columns: repeat(2, 1fr); }
  .home-content { grid-template-columns: 1fr 1fr; }
  .home-main { grid-column: 1 / -1; order: -1; }
  .layout-page { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
}
@media (max-width: 600px) {
  .home-content { grid-template-columns: 1fr; }
  .wetteronline { margin: 0 auto; }
  .slide figcaption .cap-title { font-size: 15px; padding: 6px 8px; }
  .slide figcaption .cap-desc { font-size: 13px; padding: 6px 8px; }
  .tile { height: 120px; }
  .tile img { margin-top: 12px; max-height: 60px; width: auto; }
  .content { padding: 8px; overflow-x: auto; }
  .content iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .content iframe.wrapper { aspect-ratio: auto; height: 80vh; }
}
@media print {
  body { background: #fff; }
  .site-header, .sidebar, .site-footer, .gotop, .breadcrumbs { display: none; }
  .layout-page { display: block; }
  .content { background: none; }
}

/* Bildergalerie */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 15px 0; }
.gallery a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.05); }
.gallery span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 18px; }
.lightbox-caption { color: #fff; padding: 6px 10px; font-size: 14px; }

/* Zweispaltige Artikel-Übersichten (alte Joomla-Kategorieansicht) */
.items-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

/* Würfelbilder vorladen, damit beim ersten Überfahren nichts flackert */
body::after { content: url(../img/baustein126.gif) url(../img/baustein134.gif) url(../img/baustein136.gif) url(../img/baustein206.gif) url(../img/baustein214.gif) url(../img/baustein216.gif); position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; }

/* Rezept-Seite (Spekulatius-Torte) */
.content h5 { font-size: 18.72px; line-height: 26px; margin: 14px 0 6px; }
ul.zutaten { list-style: url(/images/spoonico.png); padding-left: 28px; }
ul.zutaten li { margin: 2px 0; }
.text-box-highlight { padding: 11px; margin: 8px 0; }
.text-box-highlight ul { margin: 0; }
.content .text-tip { background: #ffffd5 url(../img/icon-text-tip.png) 14px 14px no-repeat; padding: 14px 14px 14px 58px; border: 0; }
.content .text-tip h5 { margin-top: 0; }
hr.line-dots { border: 0; height: 3px; background: url(../img/dot.png) repeat-x; margin: 12px 0; }
.rezept-gruss { font-weight: 600; margin-top: 12px; }

/* Bilder-Karussell */
.carousel { position: relative; margin: 10px 0 15px; }
.carousel-track { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; padding-bottom: 4px; }
.carousel-track a { flex: none; scroll-snap-align: start; line-height: 0; background: #000; }
.carousel-track img { height: 200px; width: auto; max-width: none; transition: opacity .2s; }
.carousel-track a:hover img { opacity: .85; }
.carousel-btn {
  position: absolute; top: calc(50% - 22px); z-index: 2; width: 36px; height: 44px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 30px; line-height: 40px;
}
.carousel-btn:hover { background: rgba(0,0,0,.8); }
.carousel-btn.prev { left: 0; } .carousel-btn.next { right: 0; }
@media (max-width: 600px) { .carousel-track img { height: 150px; } }

/* Lightbox-Blättern */
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 60px; border: 0; cursor: pointer; background: rgba(0,0,0,.5); color: #fff; font-size: 34px; }
.lightbox-nav:hover { background: rgba(0,0,0,.8); }
.lightbox-nav.prev { left: 0; } .lightbox-nav.next { right: 0; }
.lightbox-body { position: relative; }
.lightbox-body img { max-height: calc(90vh - 32px); }

/* Kommentare */
.comments { clear: both; margin-top: 25px; padding-top: 10px; border-top: 1px dotted #b59a63; }
.comments h3 { margin-top: 0; }
.comments-count { color: #888; font-size: .8em; }
.comments-none { color: #777; font-style: italic; }
.comment { background: rgba(255,255,255,.55); padding: 8px 12px; margin: 8px 0; }
.comment header { font-size: 13px; color: #666; margin-bottom: 4px; }
.comment-num { color: #999; margin-right: 4px; }
.comment-title { font-weight: 600; color: var(--text); }
.comment-author { font-weight: 600; color: var(--link); }
.comment-date { margin-left: 6px; color: #888; }
.comment-text { overflow-wrap: anywhere; }
.comments-flash { padding: 8px 12px; }
.comments-flash.is-ok { background: #e3f4d7; border-left: 4px solid #6aa84f; }
.comments-flash.is-err { background: #fde2e1; border-left: 4px solid #c33; }
.comment-form-wrap { margin-top: 15px; }
.comment-form-wrap summary { display: inline-block; cursor: pointer; padding: 8px 15px; background: var(--yellow); color: #4d4d4d; font-size: 16px; list-style: none; }
.comment-form-wrap summary::-webkit-details-marker { display: none; }
.comment-form-wrap[open] summary { margin-bottom: 10px; }
.comment-form label { display: block; font-size: 14px; margin-bottom: 8px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px; font: 300 15px var(--font); border: 1px solid #c9b07a; background: #fff;
}
.comment-form textarea { resize: vertical; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cf-captcha { grid-template-columns: auto auto 1fr; align-items: end; gap: 6px 8px; }
.cf-captcha img { border: 1px solid #c9b07a; margin-bottom: 8px; }
.captcha-reload { width: 34px; height: 34px; margin-bottom: 8px; font-size: 20px; background: #fff; border: 1px solid #c9b07a; cursor: pointer; }
.cf-captcha input { max-width: 140px; }
.cf-note { font-size: 12.5px; color: #666; }
.cf-submit { font: 400 16px var(--font); padding: 8px 18px; border: 0; background: var(--yellow); cursor: pointer; }
.cf-submit:hover, .comment-form-wrap summary:hover { background: #f0b800; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } .cf-captcha { grid-template-columns: auto auto; } }

/* Tabellen class="tb1" (wie bisher custom.css) */
table.tb1 { border-collapse: collapse; }
th.tb1 { background-color: #ccb897; text-align: left; padding: .5em; border: 2px solid #ffe7bd; font-weight: 700; }
td.tb1 { background-color: #e0cba6; text-align: left; padding: .5em; border: 2px solid #ffe7bd; vertical-align: middle; }
tr:nth-child(even) td.tb1 { background-color: #ecd5af; }
/* HTML-Tabellen mit border/rules-Attribut: Linien in Textfarbe wie im alten Template */
.content table[border], .content table[rules] td, .content table[rules] th { border-color: currentColor; }