/* KAMPHOOG – statischer Nachbau von www.kamphoog.de (WordPress-Theme „kamphoog“ von 2013), Stand Oktober 2026.
   Teil 1 bis 3: die Regeln des alten Themes, soweit sie auf der Seite etwas treffen. Werte unverändert, Reihenfolge wie
   damals (style.css, mediaqueries.css, sliders.css, menu.css, Formular, Farbschema style_01.css).
   Teil 4: was neu ist (Menü auf Handy und Tablet, Bildwechsel, Logo-Leiste, Bildansicht, Hinweisleiste, Tastaturfokus)
   und die Korrekturen der Altfehler unter 1241 px. Schrift: Systemschrift wie bisher, die Altseite lud keine Webschriften. */

/* ===== Teil 1: Grundgerüst (Theme style.css) ===== */
html { min-height: 100%; height: 100%; scroll-padding-bottom: var(--hinweis-h, 0px); }
body { min-width: 1232px; }
html, body, form { font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { margin: 0; padding: 0; border: 0; }   /* Altseite zusätzlich outline: 0, das versteckte jeden Tastaturfokus */
input, textarea { font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
textarea { line-height: 20px; vertical-align: bottom; }   /* wie img: Zeile ohne Text, ohne Unterlänge */
a { text-decoration: none; }
div, header, nav, main, footer { border: 0; position: relative; text-align: left; overflow: visible; background-color: transparent; }
p { margin: 0 0 10px; padding: 0; font-size: 15px; }
ul, ul li { list-style: none; }
img { border: 0; height: auto; vertical-align: bottom; }   /* vertical-align: Die Altseite lief mit XHTML-1.0-Doctype im
   „Almost Standards“-Modus, dort hat eine Zeile, in der nur ein Bild steht, keine Unterlänge darunter (gemessen: Logo 150 statt
   156 px hoch). Mit <!DOCTYPE html> bewirkt das diese Zeile; Bilder stehen hier nie mitten in einer Textzeile. */
picture { display: contents; }   /* nur Hülle für die WebP-Quelle */
[hidden] { display: none !important; }
.right { text-align: right; }
.leftside { float: left; }
.rightside { float: right; }
.clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; }
#page_wrapper { width: 100%; margin: 0 auto; }
#wrapper { width: 1170px; padding: 40px 30px 0; margin: 0 auto; border-left: 1px solid; border-right: 1px solid; box-shadow: rgba(0, 0, 0, .09) 0 0 20px; overflow: hidden; z-index: 8; }
#header_wrapper { width: 100%; border-top: 5px solid; }   /* Randfarbe = Textfarbe #666 */
#header { clear: both; width: 1170px; padding: 45px 0 50px; margin: 0 auto; z-index: 1; }
#header_bar_wrapper { width: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
#header_bar { width: 1200px; height: 35px; padding-left: 30px; margin: 0 auto; }
#header_bar_inner { border-radius: 0 0 4px 4px; }
#logo a { display: inline-block; z-index: 3; }
#header_info { height: auto; width: auto; font-size: 14px; line-height: 30px; padding: 0 30px; background-color: #fff; border-radius: 0 0 4px; }
#header_tools { height: 34px; border-bottom: 1px solid; border-left: 1px solid; border-radius: 0 0 0 4px; }
#navigation_wrapper { width: 100%; height: 50px; z-index: 999; }
#navigation { padding-left: 48px; width: 1210px; max-width: calc(100% - 48px); height: 50px; margin: 0 auto; text-transform: uppercase; }   /* max-width: alt 1241–1257 px waagerecht scrollbar */
#breadcrumb { font-size: 12px; margin-bottom: 40px; }
#breadcrumb span { font-weight: bold; font-size: 14px; padding: 0 2px; }
h1, h2, h3, h4 { margin-bottom: 10px; font-weight: normal; }
h1, .flex-caption { font-size: 24px; line-height: 36px; }
h2 { font-size: 20px; line-height: 30px; }
h3 { font-size: 20px; line-height: 24px; }
h4 { font-size: 18px; line-height: 22px; }
h2 a, h4 a { text-decoration: none; }
.fancy-header-wrapper { margin-bottom: 40px; border-bottom: 1px solid; }
.fancy-header { margin-bottom: 40px; border-bottom: 1px solid; width: 514px; }
.fancy-header span { display: inline-block; padding-bottom: 10px; margin-bottom: -1px; border-bottom: 3px solid; }
hr { clear: both; border-width: 1px medium medium; border-style: solid none none; border-color: currentcolor; margin: 0 0 40px; }
.one_half, .one_third, .one_fourth, .one_fifth, .one_sixth { float: left; position: relative; margin: 0 30px 40px 0; }
.full_page { position: relative; margin: 0 0 40px; }
.one_half { width: 570px; }
.one_third { width: 370px; }
.one_fourth { width: 270px; }
.one_fifth { width: 210px; }
.one_sixth { width: 170px; }
div.last { margin-right: 0; }
#page-content { margin-bottom: 40px; }
#copyright .one_half, #copyright .full_page { margin-bottom: 10px; }
form input[type="text"], form input[type="email"], textarea { padding: 6px 8px; border: 1px solid; }   /* E-Mail-Feld: Altseite ohne Rahmen, also unsichtbar */
form input[type="text"]:focus, form input[type="email"]:focus, textarea:focus { background-image: url("../img/ui/edit.png"); background-position: 100% 50%; background-repeat: no-repeat; }
textarea:focus { background-position: 100% 10px; }
form input[type="submit"] { background-image: url("../img/ui/gradient-btn.png"); background-position: 0 -7px; background-repeat: repeat-x; font-size: 13px; line-height: 14px; padding: 5px 16px 6px; cursor: pointer; }
.fancy_image { margin-bottom: 10px; }
.fancy_list_item h3 { margin-bottom: 0; font-size: 15px; }
.fancy_categories { display: block; font-size: 11px; text-transform: uppercase; }
div.icon-box { padding: 0; margin-bottom: 10px; border: none; border-radius: 30px; }
.icon-big { min-height: 70px; }
.icon-box .icon { float: left; margin: 0 20px 10px 0; }
.icon-big .icon { height: 70px; width: auto; }   /* width: auto hält das Seitenverhältnis, wenn die Umbrüche die Höhe auf 50/46 px setzen */
.icon-box h2 { margin-bottom: 0; }
.icon-box .icon-desc { overflow: hidden; }
.icon-box .icon-desc span { font-weight: normal; text-transform: none; }
.more { margin: 20px 0 0; clear: both; }
.more a { padding: 5px 10px 6px; display: inline-block; text-decoration: none; background-image: url("../img/ui/gradient-btn.png"); background-position: 0 -7px; background-repeat: repeat-x; }
.more span { display: inline-block; cursor: pointer; padding-right: 20px; background: url("../img/ui/arrow-right.png") 100% 50% no-repeat; }
.zoom { display: block; }
#footer_wrapper { width: 100%; border-top: 1px solid; }
#footer { padding: 20px 0 0 30px; width: 1200px; margin: 0 auto; font-size: 12px; line-height: 18px; }
#copyright_wrapper { border-top: 1px solid; }
#copyright { width: 1170px; margin: 0 auto; padding: 40px 0 30px; font-size: 12px; line-height: 18px; }
#copyright hr { margin-bottom: 10px; }
.post { margin-bottom: 40px; }
.alignnone { display: block; margin: 5px 0 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.excerpt_wrapper { padding-left: 90px; }
.wp-caption-text { font-size: 11px; margin-right: 10px; color: #999; }
.wp-caption { width: auto !important; }
.wp-caption p { margin-bottom: 0; }
.post-header { min-height: 70px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid; }
.post-meta { overflow: hidden; padding-top: 10px; }
.post-header h2 { margin: 0; }
.posted-meta { text-transform: uppercase; font-size: 11px; }
.posted-meta a { display: inline-block; }
.meta-date { float: left; text-align: center; width: 70px; height: 70px; margin-right: 20px; border-radius: 50%; }
.meta-date span { display: block; text-transform: uppercase; }
.meta-month { font-size: 12px; line-height: 12px; }
.meta-day { font-size: 22px; line-height: 24px; font-weight: bold; margin-top: 15px; }
.blog-comments { margin-right: 10px; display: inline-block; }
.blog-comments a { padding-left: 18px; background: url("../img/ui/post-meta.png") 0 4px no-repeat; }
.testimonial-box { border-bottom: 1px solid; border-top: 1px solid; height: 184px; padding: 12px 26px 19px; width: 550px; position: relative; top: 35px; }
.comment-text { margin-bottom: 10px; padding: 30px 0 20px 90px; position: relative; overflow: hidden; min-width: 90px; border-top: 1px solid; }
.testimonial-box .comment-text { border: none; bottom: 5px; float: right; margin: 0 0 20px; padding: 0; position: relative; width: 335px; }
.testimonial-box p { line-height: 20px; }
.comment-author { font-style: normal; margin-bottom: 0; }
.comment-author a { text-decoration: none; font-weight: bold; }
.comment-info { display: block; font-size: 11px; margin-bottom: 10px; text-transform: uppercase; }
.avatar-box { margin: 30px -70px 0 0; z-index: 9; }
.testimonial-box .avatar-box { margin: 0 20px 20px 0; width: 90px; height: 90px; }
.scroller_btns { position: absolute; bottom: -1px; right: 0; }
.browse { cursor: pointer; background-image: url("../img/ui/gradient-btn.png"); background-position: 0 -7px; background-repeat: repeat-x; color: #fff; line-height: 20px; display: inline-block; padding: 10px; margin-left: 1px; text-decoration: none; float: left; }
.arrowleft span { background: url("../img/ui/arrow-previous.png") no-repeat; width: 20px; height: 20px; display: inline-block; text-indent: -9999px; overflow: hidden; vertical-align: bottom; }
.arrowright span { background: url("../img/ui/arrow-next.png") no-repeat; width: 20px; height: 20px; display: inline-block; text-indent: -9999px; overflow: hidden; vertical-align: bottom; }  /* wie img: Almost-Standards-Zeile ohne Unterlänge */
.browse.disabled span { opacity: .5; }
.browse.disabled { cursor: default; }
.wpcf7 span { display: block; margin-top: 3px; margin-right: 18px; }
.wpcf7 span br { display: none; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; }
#wrapper ul li { list-style: inside disc; }
#wrapper ul { margin-bottom: 10px; }
#wrapper .widgets ul { margin-bottom: 0; }
#wrapper .widgets li { list-style: none; }
.widgets li { padding: 0 0 10px; }
.recent-posts li { overflow: hidden; }
.widgets .recent-posts h4 { background: none; padding: 0; font-size: 25px; margin: 0 !important; }
.recent-posts p { margin: 0; overflow: hidden; }
div.posts-desc { float: none; overflow: hidden; margin-bottom: 10px; }
.posts-desc .fancy_categories { margin-bottom: 10px; }
.posts-desc .fancy_categories a { padding: 6px 0; }   /* Tippfläche 24 px (WCAG 2.5.8), inline: verschiebt nichts */
.weiter a { display: inline-block; padding: 5px 0; }   /* 404-Linkliste: 20-px-Zeilen sind zu eng für 24-px-Tippflächen (WCAG 2.5.8) */
.group::before, .group::after, .widgets::before, .widgets::after { content: ""; display: table; }
.group::after, .widgets::after { clear: both; }
.list-carousel { margin: 0 -15px 40px; position: static; }
.caroufredsel_wrapper { overflow: hidden; margin: 0 !important; }
.list-carousel ul { margin: 0; padding: 0; list-style: none; display: block; }
.list-carousel li { padding: 0; margin: 0 15px; display: block; float: left; }
#partnerlogo { width: 100%; }

/* ===== Teil 2: Umbrüche des Themes (mediaqueries.css) ===== */
@media (min-width: 1024px) and (max-width: 1240px) {
  body { min-width: 992px !important; }
  #wrapper, #header, #navigation, #copyright { width: 930px; }
  h1, .flex-caption { font-size: 28px; line-height: 32px; }
  h2 { font-size: 22px; line-height: 26px; }
  h3 { font-size: 20px; line-height: 24px; }
  h4 { font-size: 18px; line-height: 22px; }
  .flex-caption { padding: 15px 4% !important; }
  #header_bar, #footer { width: 960px; }
  .one_half { width: 450px; }
  .one_third { width: 290px; }
  .one_fourth { width: 210px; }
  .one_fifth { width: 162px; }
  .one_sixth { width: 130px; }
  .icon-big .icon { height: 50px; }
  .meta-date { width: 60px; height: 60px; }
  .meta-day { margin-top: 12px; }
  .excerpt_wrapper { padding-left: 80px; }
  .avatar-box img { width: 50px; height: 50px; }
  .avatar-box { width: 50px !important; height: 50px !important; }
  .avatar-box { margin: 30px -50px 0 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body { min-width: 768px !important; }
  #wrapper, #header, #navigation, #copyright { width: 690px; }
  #header { padding: 85px 0 50px; }
  h1, .flex-caption { font-size: 26px; line-height: 30px; }
  h2 { font-size: 20px; line-height: 24px; }
  h3 { font-size: 18px; line-height: 22px; }
  h4 { font-size: 16px; line-height: 20px; }
  .flex-caption { padding: 10px 4% !important; }
  #footer { width: 720px; }
  #header_bar, #header_bar_inner { width: 750px; padding-left: 0; }
  .one_half { width: 330px; }
  .one_third { width: 210px; }
  .one_fourth { width: 150px; }
  .one_fifth { width: 114px; }
  .one_sixth { width: 90px; }
  .sf-menu li { font-size: 15px !important; }
  .sf-menu li li { font-size: 12px !important; }
  .icon-big .icon { height: 50px; }
  .meta-date { width: 60px; height: 60px; }
  .meta-day { margin-top: 12px; }
  .excerpt_wrapper { padding-left: 80px; }
  .avatar-box img { width: 50px; height: 50px; }
  .avatar-box { width: 50px !important; height: 50px !important; }
  .avatar-box { margin: 30px -50px 0 0; }
}
@media (max-width: 767px) {
  #header_bar_wrapper { display: none; }
  h1, .flex-caption { font-size: 30px; line-height: 34px; }
  h2 { font-size: 20px; line-height: 24px; }
  h3 { font-size: 18px; line-height: 22px; }
  h4 { font-size: 16px; line-height: 20px; }
  #copyright .one_half { text-align: left; }
  .icon-big .icon { height: 46px; }
  .meta-date { width: 50px; height: 50px; }
  .meta-day { margin-top: 10px; font-size: 18px; line-height: 20px; }
  .meta-month { font-size: 11px; line-height: 11px; }
  .excerpt_wrapper { padding-left: 0; }
  .avatar-box img { width: 50px; height: 50px; }
  .avatar-box { width: 50px !important; height: 50px !important; }
  .avatar-box { margin: 30px -50px 0 0; }
  div.posts-desc { clear: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
  body { min-width: 480px !important; }
  #wrapper, #header, #header_bar, #navigation, #copyright { width: 400px; }
  #logo img { max-width: 400px; }
  #footer { width: 430px; }
  .one_half, .one_third, .one_fourth, .one_fifth, .one_sixth { width: 400px; float: none; }
  .list-carousel .one_fifth { width: 400px; float: left; }
  .wp-caption, .wp-caption img { max-width: 400px !important; }
  .alignleft img, img.alignleft, .alignleft { max-width: 200px !important; }
  .fancy_list_wrapper .one_third { width: 370px; margin: 0 15px 40px; }
  .fancy_list_wrapper .one_third .fancy_image { width: 370px; }
  .sf-menu, .flex-caption { display: none; }
}
@media (max-width: 479px) {
  body { min-width: 320px !important; }
  #wrapper, #header, #header_bar, #navigation, #copyright { width: 250px; }
  #logo img { max-width: 250px; }
  #footer { width: 280px; }
  .one_half, .one_third, .one_fourth, .one_fifth, .one_sixth { width: 250px; float: none; }
  .list-carousel .one_fifth { width: 250px; float: left; }
  .wp-caption, .wp-caption img { max-width: 250px !important; }
  .alignleft img, img.alignleft, .alignleft { max-width: 120px !important; }
  .sf-menu, .flex-caption { display: none; }
  .testimonial-box { overflow: hidden; }
  .testimonial-box .comment-text { overflow: visible; }
  .testimonial-box .comment-text p { clear: both; }
}

/* ===== Teil 3a: Bildwechsel (sliders.css) ===== */
.slides, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flexslider { margin: 0 0 40px; padding: 0; position: relative; background-color: #fff; }
.flexslider .slides > li { display: none; position: relative; overflow: hidden; }
.flexslider .slides > li:first-child { display: block; }   /* ohne Skript steht das erste Bild */
.flexslider .slides img { max-width: 100%; display: block; }
.slides::after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.flex-caption { width: 92.2%; padding: 20px 4%; margin: 0; position: absolute; left: 0; bottom: 0; text-shadow: rgba(0, 0, 0, .3) 0 -1px 0; }
.flex-direction-nav { height: 0; }
.flex-direction-nav li button { width: 40px; height: 40px; margin: -20px 0 0; display: block; background-image: url("../img/ui/bg_direction_nav.png"); background-repeat: no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em; overflow: hidden; }
.flex-direction-nav li .next { background-position: -40px 0; right: 0; }
.flex-direction-nav li .prev { left: 0; }
#wrapper .flexslider ul li { list-style: none; }
#wrapper .flexslider ul { margin-bottom: 0; }

/* ===== Teil 3b: Hauptmenü am Desktop (menu.css). Ausklappen per Maus und Tastatur ohne Skript.
   Die Altseite versteckte die Untermenüs per Skript und brach dann ab: Dort gingen sie nie auf. ===== */
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; z-index: 1000; }
.sf-menu ul { position: absolute; top: -999em; width: 200px; }
.sf-menu li { float: left; position: relative; line-height: 50px; margin-right: 30px; font-size: 12px; }
.sf-menu a { display: block; position: relative; cursor: pointer; text-align: center; text-decoration: none; float: left; }
.sf-menu li li a { width: 160px; margin: 1px 0; }
.sf-menu li:hover > ul, .sf-menu li:focus-within > ul { left: 0; top: 50px; }
.sf-menu li ul { padding: 10px 0; }
.sf-menu li li { line-height: 16px; padding: 0; margin: 0 10px 1px; text-transform: none; font-size: 13px; border-radius: 4px; float: left; }
.sf-menu a span.menu-btn { float: left; }
.sf-menu li li a { text-align: left; border: none; background: none; padding: 7px 10px !important; }

/* ===== Teil 3c: Formular (Contact Form 7) und Kleinkram ===== */
.wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; }
html :where(img[class*="wp-image-"]) { height: auto; max-width: 100%; }

/* ===== Teil 3d: Farben (Theme-Farbschema style_01.css) ===== */
html { background-color: #fff; }
html, body, form { color: #666; }
a { color: #f5b934; }
.browse, .browse.disabled, .more a { background-color: #f5b934; color: #000 !important; }
.flex-direction-nav li button { background-color: rgba(245, 185, 52, .8); }
@media (hover: hover) {
  a:hover { text-decoration: underline; }
  h2 a:hover, h4 a:hover { text-decoration: underline; color: #000; }
  .browse:not(.disabled):hover, .more a:hover { background-color: #666; color: #fff !important; text-decoration: none; }
  .flex-direction-nav li button:hover { background-color: rgba(102, 102, 102, .8); }
  .zoom:hover { background: url("../img/ui/more-icon.png") 50% 50% no-repeat; }
  .zoom:hover img { opacity: .5; }
  .blog-comments a:hover { background-position: 0 -26px; text-decoration: none; }
  form input[type="submit"]:hover { opacity: .8; }
}
#header_wrapper { background-color: #f5b934; }
#header_bar_inner { background-color: #f5f5f5; color: #666; }
#header_info strong { color: #666; }
#header_tools { background-color: #fff; border-color: #f5f5f5; }
#navigation_wrapper { background-color: #222; }
.sf-menu a { color: #fff; }
.sf-menu li.aktiv a { color: #f5b934; }
.sf-menu li:hover a, .sf-menu li:focus-within > a { color: #f5b934; }
.sf-menu li ul { background: rgba(0, 0, 0, .9); }
.sf-menu li:hover li a, .sf-menu li li a, .sf-menu li.aktiv li a, .sf-menu li:focus-within li a { color: #aaa; }
.sf-menu li:hover li a:hover, .sf-menu li li a:focus-visible, .sf-menu li li.aktiv a { color: #fff; }
.sf-menu li:hover li:hover, .sf-menu li li:focus-within, .sf-menu li li.aktiv { background-color: #000; }
h1, h2, h3, h4 { color: #444; }
h2 a, h4 a { color: #000; }
.icon-box span { color: #666; }
#wrapper { background-color: #fff; border-color: #e5e5e5; }
.testimonial-box { border-color: #e5e5e5; color: #666; }
.testimonial-box h4 { color: #666; }
.testimonial-box .comment-info { color: #999; }
.testimonial-box a, .testimonial-box h4 a { color: #f5b934; }
.fancy_categories a, .posted-meta a, #breadcrumb a { color: #999 !important; }
form input[type="submit"] { color: #000; background-color: #f5b934; border: 1px solid #f5b934; }
form input[type="text"], form input[type="email"], textarea { background-color: #fff; border-color: #e5e5e5; color: #999 !important; }
.meta-date { color: #000; background-color: #f5b934; }
#footer_wrapper { background: #222; border-top-color: #222; }
#footer { color: #999; }
#copyright_wrapper { background-color: #fff; border-top-color: #222; }
#copyright { color: #999; }
#copyright a { color: #666; }
#copyright hr { border-color: #e5e5e5; }
.fancy-header, .fancy-header-wrapper, hr, .comment-text, .post-header { border-color: #e5e5e5; }
.fancy-header span { border-color: #f5b934; }
.flex-caption { background-color: rgba(245, 185, 52, .8); color: #000; }
#more, #less { position: relative; bottom: 10px; color: #f5b934; font-weight: bold; cursor: pointer !important; }
#partnerlogo { position: relative; top: 30px; padding-bottom: 18px; padding-top: 59px; }
#partnerlogo img { width: 100%; }

/* ===== Teil 4: neu ===== */

/* Unsichtbar, aber vorlesbar */
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tastaturfokus (die Altseite zeigte keinen): dunkel auf hellem Grund, gelb auf Schwarz */
:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
#navigation_wrapper :focus-visible, #footer_wrapper :focus-visible, .hinweis-leiste :focus-visible, .bildansicht :focus-visible { outline-color: #f5b934; }
.flexslider :focus-visible, .browse:focus-visible { outline-color: #222; outline-offset: 1px; }

/* Startseite: „weiterlesen“ und „ausblenden“ sind Knöpfe, ohne Skript steht der ganze Text da */
.hometexttitle { margin-bottom: 20px; }
.mehr-knopf { display: none; padding: 0; font: inherit; line-height: inherit; }
.js .mehr-knopf { display: inline; }
.js #mehr-text { display: none; }
.js .home_content.offen #mehr-text { display: block; }
.js .home_content.offen #more { display: none; }

/* Bildwechsel mit Skript: alle Bilder übereinander, Überblenden 0,6 s wie FlexSlider; Pause-Knopf (WCAG 2.2.2) */
.js .flexslider .slides { display: grid; }
.js .flexslider .slides::after { display: none; }
.js .flexslider .slides > li { display: block; grid-area: 1 / 1; opacity: 0; z-index: 1; }
.js .flexslider .slides > li.flex-active-slide { opacity: 1; z-index: 2; }
.js.motion .flexslider .slides > li { transition: opacity .6s ease; }
.flex-direction-nav, .slider-pause { display: none; }
.js .flex-direction-nav { display: block; }
.flex-direction-nav li button { z-index: 3; }   /* über den Folien (die haben z-index 1/2) */
.slider-pause { position: absolute; top: 0; right: 0; z-index: 4; min-height: 24px; padding: 2px 10px; background-color: rgba(245, 185, 52, .8); color: #000; font-size: 11px; line-height: 20px; text-transform: uppercase; }
.js.motion .slider-pause { display: block; }
@media (hover: hover) { .slider-pause:hover { background-color: rgba(102, 102, 102, .8); color: #fff; } }
@media (max-width: 767px) {   /* Das Bild ist dort nur 85 bis 137 px hoch: Knopf unter das Bild, nicht auf den Pfeil */
  .slider-pause { top: 100%; margin-top: 8px; }
}

/* Logo-Leiste: blättert per Pfeil um ein Logo (wie carouFredSel), ohne Skript wischen oder schieben.
   Breite je Logo wie damals: Leiste / sichtbare Logos − 30 px Abstand (5 / 5 / 4 / 3 / 2 Logos). */
#partnerlogo { --logo-b: 210px; }
.caroufredsel_wrapper { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.caroufredsel_wrapper::-webkit-scrollbar { display: none; }
#wrapper #scrollable_1 { display: flex; width: max-content; margin: 0; }   /* #wrapper ul gäbe 10 px Rand unten; alt hielt carouFredSel die Höhe per Skript */
#scrollable_1 > li { flex: none; float: none; width: var(--logo-b); scroll-snap-align: start; scroll-margin-left: 15px; }
.scroller_btns { display: none; }
.js .scroller_btns { display: block; }
@media (min-width: 1024px) and (max-width: 1240px) { #partnerlogo { --logo-b: 162px; } }
@media (min-width: 768px) and (max-width: 1023px) { #partnerlogo { --logo-b: 150px; } }
@media (min-width: 480px) and (max-width: 767px) { #partnerlogo { --logo-b: calc(430px / 3 - 30px); } }
@media (max-width: 479px) { #partnerlogo { --logo-b: 110px; } }

/* Bildansicht (statt prettyPhoto): dunkle Fläche, weißer Rahmen mit runden Ecken, Blättern in der Gruppe */
.bildansicht { margin: auto; padding: 0; border: 0; background: none; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow: visible; }
.bildansicht::backdrop { background: rgba(0, 0, 0, .8); }
.bildansicht-rahmen { background: #fff; border-radius: 10px; padding: 20px 20px 12px; }
.bildansicht img { display: block; max-width: calc(100vw - 60px); max-height: calc(100vh - 120px); width: auto; height: auto; margin: 0 auto; }
.bildansicht-zeile { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 30px; font-size: 13px; color: #666; }
.bildansicht-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bildansicht-zaehler { color: #999; white-space: nowrap; }
.bildansicht button { min-width: 30px; min-height: 30px; padding: 0 8px; border-radius: 4px; background-color: #f5b934; color: #000; font-size: 16px; line-height: 30px; }
@media (hover: hover) { .bildansicht button:hover { background-color: #666; color: #fff; } }
.bildansicht .bildansicht-zu { font-size: 20px; }

/* Hinweisleiste (Regel 7c, reiner Info-Hinweis) und Widerruf im Fuß */
.hinweis-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: #222; color: #ddd; font-size: 14px; line-height: 1.45; }
body.hinweis-offen { padding-bottom: var(--hinweis-h, 0px); }
.hinweis-leiste-innen { max-width: 1170px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.hinweis-leiste p { margin: 0; font-size: 14px; flex: 1 1 280px; }
.hinweis-leiste a { color: #f5b934; text-decoration: underline; }
.hinweis-leiste button { flex: none; min-height: 36px; padding: 0 18px; border-radius: 4px; background: #f5b934 url("../img/ui/gradient-btn.png") 0 -7px repeat-x; color: #000; font-size: 13px; }
@media (hover: hover) { .hinweis-leiste button:hover { background-color: #fff; } }
.fuss-speicher { padding: 3px 0; margin: -3px 0; color: #666; font: inherit; }   /* 24 px Tippfläche, die Fußzeile bleibt 18 px hoch */
@media (hover: hover) { .fuss-speicher:hover { text-decoration: underline; } }
.fuss-speicher:active { text-decoration: underline; }
@media (forced-colors: active) { .fuss-speicher { color: LinkText; } }   /* rahmenloser Knopf sähe sonst aus wie Text */

/* Kontaktformular: Falle für Programme, Datenschutz-Häkchen, Hinweis zum Formular */
.falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formular input[type="checkbox"] { accent-color: #f5b934; }
.formular .wpcf7-list-item { line-height: 0; }   /* Zeile nur mit dem Häkchen: 13 px hoch wie im Almost-Standards-Modus der Altseite */
.formular input[type="submit"] { margin-bottom: 27px; }   /* Platz wie alt: dort stand der unsichtbare Lade-Kreisel von Contact Form 7 darunter */

/* Menü auf Handy und Tablet (bis 1240 px: dort reichte die Leiste nicht, die Punkte liefen weiß auf weiß in eine
   zweite Zeile; unter 768 px fehlte das Menü ganz) und auf reinen Touch-Geräten (Ausklappen per Maus geht dort nicht).
   CSS-Schalter ohne Skript. */
.menue-schalter, .burger { display: none; }
@media screen and (max-width: 1240px), screen and (hover: none) and (pointer: coarse) {
  #navigation_wrapper { height: auto; min-height: 50px; }
  #navigation { height: auto; padding-left: 0; }
  #navigation > br.clear { display: none; }   /* sonst eine leere 20-px-Zeile unter dem Knopf (alt verschwand sie in der festen 50-px-Leiste) */
  .menue-schalter { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .burger { display: block; position: relative; width: max-content; height: 50px; padding-left: 34px; color: #fff; font-size: 13px; line-height: 50px; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .burger-striche { position: absolute; left: 0; top: 18px; width: 22px; height: 14px;
    background: linear-gradient(#fff, #fff) 0 0 / 22px 2px no-repeat, linear-gradient(#fff, #fff) 0 6px / 22px 2px no-repeat, linear-gradient(#fff, #fff) 0 12px / 22px 2px no-repeat; }
  .menue-schalter:checked + .burger { color: #f5b934; }
  .menue-schalter:focus-visible + .burger { outline: 2px solid #f5b934; outline-offset: 2px; }
  .sf-menu { display: none; padding: 0 0 12px; }
  .menue-schalter:checked ~ .sf-menu { display: block; }
  .sf-menu li, .sf-menu li li { float: none; margin: 0; line-height: 20px; border-radius: 0; background: none; }
  .sf-menu a, .sf-menu li li a { float: none; display: block; width: auto; margin: 0; padding: 12px 0 !important; border-top: 1px solid #3a3a3a; text-align: left; }
  .sf-menu a span.menu-btn { float: none; }
  .sf-menu li ul, .sf-menu li:hover > ul, .sf-menu li:focus-within > ul { position: static; width: auto; padding: 0 0 0 20px; background: none; }   /* .sf-menu li ul: gleiche Spezifität wie die Desktop-Regel (Schwarz, 10 px Rand), steht später */
  .sf-menu li:hover li:hover, .sf-menu li li:focus-within, .sf-menu li li.aktiv { background: none; }
  .sf-menu li:hover a, .sf-menu li:focus-within > a { color: #fff; }
  .sf-menu li li a, .sf-menu li:hover li a, .sf-menu li:focus-within li a { color: #aaa; }
  .sf-menu li.aktiv > a, .sf-menu li li.aktiv a, .sf-menu li:hover li.aktiv a, .sf-menu li:focus-within li.aktiv a { color: #f5b934; }
  @media (hover: hover) { .sf-menu a:hover { color: #f5b934 !important; } }
}

/* Altfehler unter 1241 px behoben: Der Konfigurator-Kasten war fest 602 px breit und schnitt den Text ab, die
   Referenzfotos auf der Startseite waren fest 370 px breit und überlappten sich bzw. wurden abgeschnitten. */
@media (max-width: 1240px) {
  .testimonial-box { width: auto; height: auto; }
  .testimonial-box .comment-text { float: none; width: auto; overflow: hidden; }   /* Text neben dem Bild, so breit wie Platz ist (alt fest 335 px) */
  .fancy_image img { max-width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {   /* 150-px-Spalten: Symbol über den Text, sonst schnitt der Kasten Wörter wie „Fenstersysteme“ ab (alt auch) */
  .icon-box .icon { float: none; margin: 0 0 10px; }
}
@media (max-width: 767px) {   /* einspaltig: Bild über dem Text, sonst passte „Haustürkonfigurator“ nicht in die Zeile */
  .testimonial-box .avatar-box { float: none; margin: 0 0 10px; }
}

/* Credit-Zeile (Footer_Standard.md), nur mit CREDIT = true in build.mjs: zentriert unter der Linksammlung, Fußgrau */
.ft-credit { clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding-top: 10px; line-height: 18px; color: #999; }
.ft-credit > span > a { color: #666; text-decoration: underline; text-underline-offset: 3px; }
.ft-socials { display: inline-flex; gap: 16px; align-items: center; }
.ft-socials a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #666; }
.ft-socials a::before { content: ""; position: absolute; inset: -8px; }
.ft-socials svg { width: 14px; height: 14px; }
@media (hover: hover) { .ft-socials a:hover { background: #f5b934; color: #000; } }

@media print {
  .hinweis-leiste, .flex-direction-nav, .slider-pause, .scroller_btns, #navigation_wrapper, .bildansicht, .ft-socials, #fuss-speicher { display: none !important; }
  .flexslider .slides > li { opacity: 1 !important; display: none !important; }
  .flexslider .slides > li:first-child { display: block !important; }
}