body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)}
/* css_bergland.css */

/* ALLGEMEIN */
body {
    /*background:#f4f4f4 url("/files/layout/hintergrund.gif") left top repeat-x;*/
	background:#376654;
    font-size: 1.0rem;
	font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Oxygen-Sans, Helvetica Neue;;
}

#wrapper {
    background-color:#f3f3f3;
}


/* KOPFZEILE*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 1000;
}

/* Logo-Größe im Normalzustand */
.headerlogo {
  height: 77px;
  transition: all 0.3s ease;
}

/* Wenn gescrollt wird, schrumpft das Logo */
#header.shrink .inside {
    height: 45px;      /* ↓ Header kleiner */
}

#header.shrink .headerlogo {
    height: 40px;      /* ↓ Logo kleiner */
}

#header.shrink #headermenu {
    margin-top: 17px;     /* ↓ Menü rutscht hoch */
}


#header .inside {
    background:#ffffff;
	display: flex;
    justify-content: center;   /* Elemente zur Mitte hin ausrichten */
    align-items: center;        /* Vertikal ausrichten */
    gap: 40px;                  /* Abstand zwischen Logo und Menü */
	border-bottom: 1px solid #376654;
	height: 80px;                     /* ← Start-Höhe des Headers */
    transition: height 0.3s ease;
}

/* Logo leicht nach links verschieben */
#headerlogo {
    order: 1;                   /* Logo nach links */
}

/* Hamburger-Menü nur auf Mobilgeräten anzeigen */
.nav-toggle {
    display: none;   /* Standard: unsichtbar */
}

/* Menü leicht nach rechts */
#headermenu {
    order: 2;                   /* Menü nach rechts */
	margin-top: 45px;
}

/* Menü-Elemente horizontal */
#headermenu ul {
    list-style: none;
    display: flex;
    gap: 20px;                  /* Abstand zwischen Menüpunkten */
    margin: 0px;
    padding: 0px;
}

/* Optional: Links schön ausrichten */
#headermenu li a, 
#headermenu li strong {
    text-decoration: none;
    display: block;
	padding: 2px 5px;
}

#headermenu strong.active,
#headermenu a {
    /*background-color:#eaeaea;
    border:1px solid #376654;*/
    font-size: 1.0625rem;
    font-weight:bold;
    text-decoration:none;
    color:#663749;
}

#headermenu a:hover {
    background-color:#52987d;
    color:#fff;
}

/* MAIN */
#main .inside {
    min-height:780px;
	max-width:1104px;
    background-color:#ffffff;
	margin: 88px auto 10px auto;
	padding: 10px;
	text-align: justify;
}

#main .inside h2 {
	text-align: center;
	margin: 0;
}

#main .inside a {
    text-decoration:none;
    color:#009;
}

#main .inside a:hover {
    text-decoration:underline;
}

#main .align-right {
	text-align: right;
}

a.link_extern {
    display: inline-block;
	position: relative;
    padding-right: 0.1em; /* Platz für das Icon */
}

a.link_extern::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.1em;
	margin-bottom: -0.15em;
    background: url('/files/content/link_ext_green.svg') no-repeat center center;
    background-size: contain;
}

/* HOME */

#main #welcome img {
	margin: 20px 0px 20px 10px;
}

/* TABELLEN */
#main table {
	width:550px;
	margin: 10px auto;
}

#main table tr:nth-child(odd) {
  background-color: #fafafa;
}

#main table tr:nth-child(even) {
  background-color: #f3f3f3;
}

#main table tr:hover {
  background-color: #afd4c6;
}

#main table td:nth-child(1) {
  width: 40%;
  margin: 0;
  padding: 10px;
  vertical-align: top;
  text-align: right;
}

#main table td:nth-child(2) {
  width: 60%;
  margin: 0;
  padding: 10px;
  vertical-align: top;
  text-align: left;
}

/* ZU VERMIETEN */
#main .frei_gal_oben {
    width:80%;
    margin:20px auto;
	margin-top:0px;
	margin-bottom:0px;
    padding:20px;
	padding-bottom:0px;
    border:1px solid #888;
	border-bottom:0px;
    border-collapse:separate;
}

#main .frei_gal_oben p {
	margin: 0;
	padding: 1em 0;
}

#main .frei_gal_mitte {
    width:80%;
    margin:20px auto;
	margin-top:0px;
	margin-bottom:0px;
    padding:20px;
    padding-top:5px;
	border:1px solid #888;
	border-top:0px;
	border-bottom:0px;
    border-collapse:separate;
}

#main .frei_gal_unten {
    width:80%;
    margin:20px auto;
	margin-top:0px;
	margin-bottom:40px;
	padding:20px;
	padding-top:5px;
	padding-bottom:15px;
	border:1px solid #888;
	border-top:0px;
    border-collapse:separate;
}

#main .frei,
#main .frei_gal_oben,
#main .frei_gal_mitte,
#main .frei_gal_unten {
    /*background-color:#def6ce;*/
	background-color:#eefcde;
}

#main .frei_gal_mitte img {
	margin-right: 5px;
}


/* FIRMEN */

#main .firma {
    width:80%;
    margin:20px auto;
	margin-top:0px;
	margin-bottom:40px;
    padding:20px;
    border:1px solid #888;
    border-collapse:separate;
	background-color:#f8f8f8;
}

/* LAGEPLAN */
#main #map-consent {
	max-width: 500px;
	margin: 20px auto;
	padding: 20px;
	text-align: center;
	border: 1px solid #cccccc;
}

/* ANFAHRT */
#main #anfahrtbild img {
	padding: 10px;
	border:1px solid #888;
	display: block;
	margin: 0px auto;
}

/* KONTAKT */

/* Formular mittig platzieren */
form {
    max-width: 600px;   /* gewünschte Breite */
    margin: 0 auto;     /* zentriert das Formular */
}

/* Jede Zeile als flexbox */
.formbody .widget {
    display: flex;
    align-items: center;
    gap: 15px;           /* Abstand zwischen Label und Feld */
    margin-bottom: 12px; /* Abstand zwischen Zeilen */
}

/* Linke Spalte: Labels rechtsbündig */
.formbody .widget label {
    width: 180px;        /* gleiche Breite für alle Labels */
    text-align: right;   /* rechtsbündig */
    display: block;
}

/* Rechte Spalte: Eingabefelder linksbündig */
.formbody .widget input,
.formbody .widget select,
.formbody .widget textarea {
    flex: 1;             /* füllt rechts die Zeile */
}

/* Ausnahme: textarea (höher, aber selbes Verhalten) */
.formbody .widget-textarea {
    align-items: flex-start;
}

/* Altcha soll wie die anderen Widgets eingerückt sein */
.widget-altcha {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* Leeres „Label-Feld“ links, damit es bündig passt */
.widget-altcha::before {
    content: "";
    width: 180px; /* exakt dieselbe Breite wie die Label-Spalte */
    display: block;
}

/* Altcha-Widget rechts bündig zum restlichen Formular */
.widget-altcha altcha-widget {
    flex: 1;
}


/* Senden-Button zentriert */
.widget-submit {
    justify-content: center !important;
}

/* HAUPTFRAME - DATENSCHUTZ */
#main #datenschutz .dsblock {
    margin-bottom:40px;
}


/* FUSSZEILE */
#footer {
	background:#376654;
	align-items: center;
    gap: 10px;               /* Abstand zwischen Text und Menü */
	font-size:0.875rem;
    color:#fff;
}

#footer .inside {
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Beide Footer-Elemente sollen die volle Breite einnehmen */
#footer .inside > div,
#footermenu {
    width: 100%;
}

/* Menü-Elemente horizontal */
#footermenu ul {
    list-style: none;
	display: flex;
	justify-content: center; /* Jetzt wirklich zentriert über gesamte Breite */
    gap: 10px;                  /* Abstand zwischen Menüpunkten */
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* Trenner „|“ einfügen */
#footermenu ul li:not(:last-child)::after {
    content: " | ";
    margin-left: 10px;
}

#footer a {
    text-decoration:underline;
    color:#eaeaea;
}

#footer a:hover {
    background-color:#fff;
    text-decoration:none;
    color:#376654;
}

#backToTop {
    position: fixed;       /* Immer sichtbar an einer Position */
    bottom: 30px;          /* Abstand vom unteren Rand */
    right: 30px;           /* Abstand vom rechten Rand */
    display: none;         /* Anfangs unsichtbar */
    background-color: #007bff; /* Button-Farbe */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;    /* Runde Form */
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

#backToTop:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}


/* -----------------------------------
   MOBILE
----------------------------------- */
@media (max-width: 768px) {
/* HEADER */
    /* Flexbox für mobiles Layout: Logo links, Toggle rechts */
	#header .inside {
        height: 70px;          /* kleinere Höhe */
        justify-content: space-between;
        padding: 0 15px;
        gap: 0;                /* kein großer Abstand */
    }

    /* Logo proportional skalieren */
    .headerlogo {
        height: 50px;
        width: auto;           /* hält Proportionen */
    }

    /* SHRINK Zustand auch mobil */
    #header.shrink .headerlogo {
        height: 35px;
        width: auto;
    }

    /* Menü verstecken */
    #headermenu {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        display: none;            /* initial versteckt */
        flex-direction: column;
        margin-top: 0 !important;
        padding: 10px 0;
        border-bottom: 1px solid #376654;
    }

    /* Menü-Links untereinander */
    #headermenu ul {
        flex-direction: column;
        gap: 0;
    }

    #headermenu li a {
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }

    /* Hamburger-Button sichtbar */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 35px;
        height: 35px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .nav-toggle span {
        display: block;
        width: 100%;
        height: 4px;
        background: #376654;
        border-radius: 2px;
        transition: 0.3s;
    }

    /* Toggle-Aktiv → Kreuz */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Menü anzeigen bei Aktivität */
    #headermenu.open {
        display: flex;
    }
	
/* MAIN */

	#main .inside {
		min-height:0px;
		text-align: left;
	}

	/* Bild auf Startseite */
	#main #welcome img {
		margin: 0px;
	}
	/* Container: Bild und Text untereinander */
    #welcome.media.media--right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;   /* Bild & Text linksbündig */
        gap: 15px;
    }

    /* Bild nach oben */
    #welcome.media.media--right figure {
        order: -1;                 /* Bild nach oben holen */
        width: 100%;               /* Bildbereich volle Breite */
        margin: 0;
    }

    /* Bild selbst über die gesamte Breite */
    #welcome.media.media--right img {
        width: 100%;
        height: auto;
        display: block;
    }
	
	/* Tabellenanpassung */
	#main table {
		width:100%;
		margin: 10px auto;
	}
	
	/* Bilder auf Zu vermieten mittig */
	.frei_gal_mitte ul {
		display: flex;
		justify-content: center;   /* Zentriert horizontal */
		align-items: center;        /* Zentriert vertikal (falls nötig) */
		gap: 20px;                  /* Abstand zwischen den Bildern */
		flex-wrap: wrap;            /* Damit die Bilder bei kleinen Displays umbrechen */
		padding: 0;
	}
	
	/* FIRMEN Logos unterhalb */
	/* Die gesamte Box soll übereinander stapeln */
    .firma.media.media--right {
        display: flex;
        flex-direction: column;     /* Bild unter Text schieben */
        align-items: center;        /* Zentrieren */
        text-align: center;         /* Optional: Text ausrichten */
    }
    /* Das Bild soll ganz unten stehen */
    .firma.media.media--right figure {
        order: 2;                   /* Bild nach unten */
        margin-top: 15px;           /* etwas Abstand zum Text */
    }
    /* Der Text oben */
    .firma.media.media--right .rte {
        order: 1;
    }
    /* Logo soll sauber skalieren auf Mobil */
    .firma.media.media--right img {
        width: auto;
        max-width: 90%;             /* Optional – verhindert Überbreite */
        height: auto;
    }
	
	/* Anfahrtbild kleiner */
	#main #anfahrtbild img {
		width:90%;
	}
	
	/* Kontaktformular */
	/* Grundlayout für alle Formular-Widgets */
	.formbody .widget {
		width: 100%;
		margin-bottom: 20px;
		display: block;
	}
	/* Labels oberhalb der Felder */
	.formbody label {
		display: block;
		font-weight: bold;
		margin-bottom: 6px;
	}
	/* Standard-Eingabefelder über die gesamte Breite */
	.formbody input[type="text"],
	.formbody input[type="email"],
	.formbody input[type="number"],
	.formbody input[type="tel"],
	.formbody select,
	.formbody textarea,
	.formbody input[type="password"],
	.formbody .captcha {
		width: 100%;
		max-width: 100%;
		padding: 10px;
		font-size: 1rem;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}
	/* Textarea schön groß */
	.formbody textarea {
		min-height: 150px;
		resize: vertical;
	}
	/* Captcha-Text */
	.formbody .captcha_text {
		display: block;
		margin-top: 5px;
		font-size: 0.9rem;
		color: #333;
	}
	/* Submit-Button */
	.formbody .submit {
		padding: 12px 20px;
		font-size: 1.1rem;
		background-color: #376654;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	.formbody .submit:hover {
		background-color: #2c5245;
	}
}