/* Theme "rewald" – 1:1-Port des Joomla-Templates daka-rewalds v1.0.3 (Daka Media KG, 2019).
   1. Original-Regeln (Variablen, Grid, Menü, Sidebar, Footer, Responsive)
   2. Block-Styles: ersetzen das früher von Quix generierte CSS (Sektionen, Spalten, Slider, Galerie, Formular) */

/* ================= 1. Original ================= */
:root {
    --color-text: #000;
    --color-link: #eee;
    --bgcolor-main: #3a3a3a;
    --bgcolor-container: #fff;
    --bgcolor-footer: transparent;
    --h1color: rgb(60, 60, 59);
    --h2color: #666668;
    --color-a: rgb(0, 0, 0);
    --color-a-hover: #037a92;
    --color-menu-a: #fff;
    --color-menu-a-hover: #037a92;
    --bgcolor-menu-a: #aaaaa9;
    --bgcolor-menu-a-hover: #037a92;
    --footer-menu-a-color: #fff;
    --footer-p-color: #aaaaa9;
    /* neu: Werte, die früher Quix bzw. Sektionsklassen lieferten */
    --greige: rgba(164, 156, 151, 0.7);
    --block-padding: 30px;
    --content-max: 960px;
    --col-gap: 30px;
}

*, *:before, *:after { box-sizing: inherit; }

html {
    box-sizing: border-box;
    overflow-y: scroll;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0 auto;
    max-width: 1100px;
    padding: 2em 0 0.2em 0;
    background-color: var(--bgcolor-main);
    font-size: 16px !important;
    line-height: 1.4em !important;
    color: #3c3c3b;
    font-family: Arial, Helvetica, sans-serif;
}

article {
    background-color: var(--bgcolor-container);
    min-height: 100px;
    padding: 15px;
}

a { color: var(--color-a); text-decoration: none; }
a:hover { color: var(--color-a-hover); text-decoration: underline; }

h1, h2, .h1, .h2 { color: var(--h1color); }
h1, .h1 { font-size: 1.8em; }
h2, .h2 { font-size: 1.5em; line-height: 1.2em !important; }
h3, .h3 { font-size: 1.3em; }

.grid {
    display: grid;
    grid-template-columns: 300px auto 220px;
    grid-gap: 0.1em;
    overflow: hidden;
}
header { grid-column: 2 / 4; }
footer, article { grid-column: 1 / 4; }
.article3 { grid-column: 1 / 3 !important; }

.sidebar {
    background: #ffffff;
    padding: 15px;
    display: block !important;
    align-items: start !important;
}
.sidebar p { font-size: 15px !important; line-height: 1.2em !important; }
.sidebar div { margin-bottom: 35px; }
.sidebar .moduletable h3 { margin-bottom: 20px; }
.sidebar img { max-width: 100%; height: auto; }

.grid > * {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.grid > header { justify-content: flex-end; }

@media (min-width: 768px) {
    .sidebar img { width: 100%; }
}

/* Menü */
header > .icon { display: none; margin: 12px; }

ul.nav.menu {
    display: flex;
    justify-content: center;
    margin: 5px;
    padding-inline-start: unset;
    flex-wrap: wrap;
    line-height: 33px;
    margin-right: 0px;
}
header ul.nav.menu > li { background-color: #dad7d7; background-color: var(--bgcolor-menu-a); }
header ul.nav.menu > li:hover { background-color: #fff; background-color: var(--bgcolor-menu-a-hover); }
header ul.nav.menu > li > a { width: 100%; padding: 8px 12px; color: var(--color-menu-a); }
header ul.nav.menu > li:hover > a { text-decoration: none; color: var(--color-menu-a); }
header ul.nav.menu > li.active { background: var(--bgcolor-menu-a-hover); color: var(--color-menu-a); }
header ul.nav.menu > li.active a { color: var(--color-menu-a); }
header ul.nav.menu > li { display: inline; margin: 1px; }

.icon object svg { fill: #fff !important; }
header a.icon { position: absolute; top: 5px; right: 5px; }
.menu-burger { width: 32px; height: 32px; }
.menu-burger #burger-icon { fill: #fff; }

/* Mobile Header */
@media screen and (max-width: 768px) {
    header > .icon {
        display: block;
        background: #dad7d7;
        padding: 8px 12px;
        color: var(--color-menu-a);
        background-color: var(--bgcolor-menu-a);
    }
    ul.nav.menu { width: 100%; }
    footer div { width: 97% !important; }
    footer div div { text-align: center; }
    .sidebar { text-align: center; border-top: 2px #000 solid; }
    header ul.nav.menu > li { display: none; }
    .topnav a.icon { float: right; display: block; }
    .topnav.responsive { position: relative; flex-direction: column; }
    .topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
    .topnav.responsive li { float: none; display: block !important; text-align: left; }
}

/* Footer */
footer {
    background-color: #ccc;
    background-color: var(--bgcolor-footer);
    padding: 0px 15px 10px 15px;
    margin-top: 15px;
    justify-content: space-around !important;
    align-items: flex-start !important;
}
footer > * { margin: 5px; margin-right: 15px; }
footer p { margin-bottom: 0px; color: var(--footer-p-color); }
footer ul.nav.menu > li > a, footer a { color: var(--footer-menu-a-color); }
footer ul.nav.menu > li > a:hover, footer a:hover { color: var(--bgcolor-menu-a-hover); }
footer ul.nav.menu > li.active a { color: var(--color-menu-a-hover); }
footer ul.nav.menu > li { display: inline; margin: 5px 10px; }
.footer-adress { max-width: 385px; font-size: 14px; margin-top: 15px; }
.logo img { max-height: 50px; }

/* Responsive */
@media only screen and (max-width: 768px) {
    .grid { display: block; }
    ul.nav.menu { margin: 5px 10px; }
    article { margin-top: 20px; }
    footer { flex-direction: column; }
    .footer-adress { text-align: center; font-size: 12px; margin-left: auto; margin-right: auto; }
    .menu-burger { height: 24px; width: 24px; }
    header a.icon { padding: 3px 14px 10px 6px; }
    .logo { max-width: 90%; }
}

/* ================= 2. Blöcke (ersetzen Quix) ================= */
/* Lightbox: Beim Öffnen setzt GLightbox `overflow: hidden` auf <html> und gibt dem
   <body> die Klasse `gscrollbar-fixer` mit `margin-right: 15px` – als Ersatz für die
   verschwundene Scrollleiste. Unser Body ist aber über `margin: 0 auto` zentriert;
   der feste rechte Rand hebelt die Zentrierung aus und die Seite springt nach rechts.
   Deshalb: Scrollleisten-Spalte dauerhaft reservieren und den fremden Rand zurücksetzen. */
html { scrollbar-gutter: stable; }
body.gscrollbar-fixer { margin-right: auto; }

.page { width: 100%; }                                   /* wie .qx.quix { width: 100% } */
.logo p { margin: 0; }
.block { padding: var(--block-padding) 0; }              /* wie .qx-section { padding: 30px 0 !important } */
#home .block { padding: 0; }                             /* wie #home .qx-section { padding: 0 } */
.block--title { padding-bottom: 0; }                     /* H1-Baustein direkt über dem ersten Inhaltsblock */
.block--greige {                                         /* wie .section-mit-farbe */
    background: var(--greige);
    margin-right: -15px;
    margin-left: -15px;
    padding: var(--block-padding) 15px;
}
.block__inner { margin: 0 auto; padding: 15px; }   /* Quix: .qx-container padding 0 15px + .qx-col-wrap padding 15px */
.block__inner > :first-child { margin-top: 0; }

/* Typografie-Grundlagen, die früher Quix (Bootstrap-Reboot) mitgebracht hat */
.block h1, .block h2, .block h3 { margin-top: 0; margin-bottom: .5rem; line-height: 1.2; font-weight: 700; }
.block p { margin-top: 0; margin-bottom: 1rem; }
.block h1 + p, .block h2 + p, .block h3 + p { margin-top: 20px; }   /* Quix: .qx-element + .qx-element */
.block__cols { display: flex; flex-wrap: nowrap; gap: var(--col-gap); align-items: flex-start; }
.block__col { flex: 1 1 0; min-width: 0; }
.block__cols--image-right .block__col--media { order: 2; }
.block__col--text > :first-child { margin-top: 0; }
.block__col img, .block img { max-width: 100%; height: auto; display: block; }

@media only screen and (max-width: 768px) {
    .block__cols { flex-direction: column; }
    .block__cols--image-right { flex-direction: column-reverse; }
    .block__col { width: 100%; }
}

/* Slider (Swiffy) */
.slider { position: relative; width: 100%; }
.slider .slider-container > li { overflow: hidden; }
.slider.slider--single img { width: 100%; }
.slider .slider-indicators { bottom: 0; gap: 12px; margin-bottom: 25px; }
.slider .slider-indicators > * { width: 15px; height: 15px; background: #eee; opacity: 1; border: 0; border-radius: 50%; }
.slider .slider-indicators > .active { background: rgba(102, 102, 102, 0.6); }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }   /* Quix: .qx-grid-medium */
.gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery__item { display: block; text-decoration: none; color: inherit; }
.gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery__caption { display: block; font-size: 14px; line-height: 1.3; margin-top: 5px; text-align: center; color: var(--h2color); }
@media only screen and (max-width: 1024px) { .gallery, .gallery--cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 768px) { .gallery, .gallery--cols-3, .gallery--cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* Formular (Optik des alten Balbooa-Formulars) */
.form .form-group { margin: 0; }
.form .form-input-wrapper, .form .form-textarea-wrapper { position: relative; }
.form input[type="text"], .form input[type="email"], .form textarea {
    width: 100%;
    margin: 15px 0;
    padding: 15px 15px 15px 46px;
    border: 1px solid #f3f3f3;
    border-radius: 2px;
    background: #fff;
    font: bold 13px/28px Arial, sans-serif;
    color: #999;
}
.form textarea { min-height: 150px; resize: vertical; }
.form .icon::before {
    content: '';
    position: absolute;
    left: 14px;
    width: 24px;
    height: 24px;
    background: center / contain no-repeat;
    opacity: 0.55;
    /* Der Wrapper beginnt 15px über dem Feld (dessen Außenabstand). Ein festes `top`
       würde das Symbol deshalb über die Textzeile schieben. Einzeilige Felder: auf die
       Mitte des Wrappers, die wegen der symmetrischen Außenabstände genau der Textmitte
       entspricht. Mehrzeilige: auf die Höhe der ersten Zeile. */
    top: 50%;
    transform: translateY(-50%);
}
.form .form-textarea-wrapper.icon::before {
    top: 32px;              /* 15px Außenabstand + 15px Innenabstand + (28px Zeilenhöhe − 24px Symbol) / 2 */
    transform: none;
}
.form .icon--user::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2zm9 2.5A2.5 2.5 0 1 1 12 12.5 2.5 2.5 0 0 1 12 7.5zM7 17.25c0-1.66 3.33-2.5 5-2.5s5 .84 5 2.5V18H7z'/%3E%3C/svg%3E"); }
.form .icon--mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.form .icon--message::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 9h12v2H6zm8 5H6v-2h8zm4-6H6V6h12z'/%3E%3C/svg%3E"); }
.form .checkboxes, .form .form-field-checkbox { font-size: 13px; line-height: 1.4; margin: 10px 0 15px; }
.form .form-field-checkbox label.inline { display: inline; margin-left: 6px; font-size: 13px; }
.form .buttons { margin-top: 5px; }
.form button, .form input[type="submit"] {
    background: rgba(201, 198, 189, 1);
    color: rgba(61, 61, 61, 1);
    border: 0;
    border-radius: 3px;
    padding: 20px 60px;
    font: 14px/18px Arial, sans-serif;
    cursor: pointer;
}
.form button:hover { filter: brightness(0.95); }
.form-message, .form .form-errors, .form .notices { margin: 10px 0; padding: 10px 12px; border-radius: 2px; font-size: 14px; }
.form .notices.green { background: #eaf7ee; color: #2b7a3d; }
.form .notices.red, .form .form-errors { background: #fbeaea; color: #a33; }
.form .notices.yellow { background: #fdf6e3; color: #8a6d1d; }
.form .form-errors p { margin: 0; }
.form .required { color: #a33; }
.form label:not(.inline) { display: none; }              /* Original: nur Platzhalter, keine Labels */

/* Honeypot und Captcha ausblenden. Beides versteckt normalerweise das mitgelieferte
   CSS des Form-Plugins – das ist hier abgeschaltet (built_in_css: false), sonst
   überschreibt es die Feldoptik des Originals. Ohne diese Regeln erscheint das
   Honeypot-Textfeld als sichtbares Eingabefeld: Wer hineinschreibt, dessen
   Anfrage wird als Spam verworfen. */
.form-honeybear {
    /* !important, weil die Feldregel oben (.form input[type="text"]) spezifischer ist */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.form-field:has(> .form-data > .cap-container[style*="display:none"]) { display: none; }

/* Die 1024px-Regel des Originals ist entfallen: Dort stapelte Quix die Spalten bereits
   ab 1024px, hier erst ab 768px. Das Umkehren allein brach das Layout zwischen 769 und
   1024px auf (die Bildspalte schrumpfte auf 80px). Das Stapeln samt Umkehrung passiert
   jetzt geschlossen im 768px-Block weiter oben. */
@media (min-width: 768px) {
    .block__inner { max-width: var(--content-max); }
}