@import url('nivoSlider.css');

body { background: #152767 url(../img/background/bg_body.jpg) no-repeat center; background-position: top; background-attachment: fixed; margin: 0; padding: 20px 0 40xp 0; font-family: Arial, Helvetica, sans-serif; font-size: 90%; color: #555; }

a { text-decoration: none; color: #236BA6; cursor: pointer;}
a:hover, a:focus { text-decoration: none; color: #183670; }

a.btnBlue, .btn-primary { padding: 10px 15px; background: #236BA6; color: #fff; display: inline-block; margin: 5px 5px 0 0; border: none; }
a.btnBlue:hover, .btn-primary:hover { background: #1E508D; }

a.btnWhite { padding: 10px 15px; background: #fff; color: #236BA6; display: inline-block; margin: 5px 5px 0 0; }
a.btnWhite:hover { background: #f5f5f5; }

.sm { font-size: 10pt; }

h1, h2, h3, h4, h5, h6 { margin: 15px 0; color: #183670; }
h4 { color: #236BA6; }
h5 { font-size: 15px; font-style: italic; }

p { margin: 10px 0; line-height: 1.5; }
p.subheadline { font-weight: bold; color: #3B77A9; }

hr {
  border: none;
  height: 1px;
  width: 100%;
  background-color: #ccc;
  margin: 30px 0;
}

/* little settings */
address { color: #236BA6; font-size: 10pt; padding: 10px 15px; font-style: normal; }

ul li { list-style-type: square; }

.right { text-align: right; }

/* header */
.header { display: block; position: relative; }
#logo {
    position:absolute;
	top: 0;
	right: 0;
	width: 280px;
	height: 150px;
	z-index:1000;
	background: url(../img/logo/logo.png) no-repeat;
    background-size: 100%;
}

/* section (Container) */
section { width: 780px; margin: 15px auto; position: relative; background: #fff; border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.5); }
.content { padding: 10px 15px 50px 15px; }

/* nav */
.nav { background: #236BA6; border-top: #82BFF3 1px solid; border-right: #175183 1px solid; border-bottom: #175183 1px solid; border-left: #82BFF3 1px solid; text-align: right; }
.nav ul { padding: 0; margin: 0; display: inline-block; vertical-align: middle; }
.nav ul li { padding: 8px 9px 8px 8px; margin: 0; display: inline-block; vertical-align: middle; list-style-type: none; font-size: 9pt; border-right: 1px solid #82BFF3; }
.nav ul li.last { border-right: none; }
.nav ul li a { color: #fff; display: inline-block; vertical-align: middle; }
.nav ul li a:hover { color: #D8F0FE; }

/* leftContent */
.leftContent { width: 24%; display: inline-block; vertical-align: top; }

nav { background: #236BA6; }
nav ul { padding: 0; margin: 0; display: block; }
nav ul li { margin: 0; display: block; list-style-type: none; font-size: 9pt; border-top: #82BFF3 1px solid; border-right: #175183 1px solid; border-bottom: #175183 1px solid; border-left: #82BFF3 1px solid; }
nav ul li a { color: #fff; display: block; padding: 10px 12px; }
nav ul li a:hover { color: #fff; background: #1E508D; }

nav ul li.active a { color: #fff; background: #1E508D; } 

nav ul li.set a { background: #c12a2a !important; }
nav ul li.set:hover a,
nav ul li.set.active a { background: #8d1e1e !important; }

.menu { text-align: right; background: #236BA6; padding: 0; min-height: 38px; border-top: #82BFF3 1px solid; border-right: #175183 1px solid; border-bottom: #175183 1px solid; border-left: #82BFF3 1px solid; display: none; }
.menu .menuBtn { position: absolute; text-align: right; padding: 10px 15px; width: 25px; height: auto; right: 0; }
.menu .menuBtn:hover { cursor: pointer; background: #1E508D; }

.menu .menuBtn span.menuBtnLine { height: 2px; width: auto; margin: 3px 0; display: block; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); }

/* rightContent */
.rightContent { width: 74%; display: inline-block; vertical-align: top; }

/* footer */
footer { width: 780px; text-align: center; padding: 5px 0; margin: 0 auto; font-size: 8pt; color: #82BFF3; }
footer a { color: #82BFF3; } footer a:hover { color: #82BFF3; text-decoration: underline; }

.telIcon { height: 50px; width: 50px; background: #1E508D url(../img/icons/tel-icon.png) center; background-size: contain; background-repeat: no-repeat; position: fixed; bottom: 20px; right: 20px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); display: none; border-radius: 50%; -webkit-border-radius: 50%; z-index: 500; }

/* Contact Form Settings */
form.form p label { text-align: left; font-weight: normal; font-size: 12px; display: block; float: left; width: 130px; }
form.form input { font-size: 12px; font-weight: normal; width: 400px; height: 22px; background-color: #FFFFFF; border: 1px solid #236BA6; color: #666666; }
form.form textarea { font-size: 12px; font-weight: normal; width: 400px; height: 100px; background-color: #FFFFFF; border: 1px solid #236BA6; color: #666666; overflow: auto; resize: none; }

form.form input.button { font-size: 12px; font-weight: normal; padding: 10px 15px; background-color: #236BA6; color: #ffffff; border-top: #82BFF3 1px solid; border-right: #175183 1px solid; border-bottom: #175183 1px solid; border-left: #82BFF3 1px solid; cursor: pointer; display: inline-block; width: auto; height: auto; }

p#submitArea { text-align:right; margin-right: 10px; }

.has-error input, .has-error textarea {
  border-color: #FF0000 !important;
}
.has-error label {
  color: #FF0000;
}

.help-block {
  color: #555;
}
.has-error .help-block {
  color: #FF0000;
}


.stoerer {
	width: 500px;
	height: auto;
	background: #236BA6;
	color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1002;
}
.stoerer .stoerer-inner {
	padding: 15px 20px;
}
.stoerer h3 {
	color: #fff;
}
.stoerer-bg {
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1001;
}

/* ccm19 */
.ccm-settings-summoner {
  display: none !important;
}


/*
    MEDIA QUERIES
*/
@media screen and (max-width: 875px) {
    /* header */
    #logo { width: 220px; height: 120px; }
    
    /* section */
    section, footer { width: 620px; }
    
    .leftContent { width: 29%; }
    .rightContent { width: 69%; }
    
    /* Contact Form Settings */
    p#submitArea { margin-right: 18px; }
    form.form input { width: 390px; }
    form.form textarea { width: 386px; }
}

@media screen and (max-width: 695px) {
    body { padding: 10px 0 60px 0; background-size: 300%; }
    
    /* header */
    #logo { width: 180px; height: 100px; }
    
    /* nav */
    .nav { text-align: left; background: transparent; position: absolute; border: none; }
    .nav ul li { padding: 12px 15px; }
    .nav ul li.last { border-right: 1px solid #82BFF3; }
    
    .menu { display: block; }
    nav, address { display: none; }
    
    /* section */
    section { width: 90%; }
    .leftContent, .rightContent { display: block; width: 100%; }
    
    nav ul li a { padding: 12px 15px; }
    
    /* footer */
    footer { width: 70%; }
    
    .telIcon { display: block; }
    
    /* Contact Form Settings */
    form.form input { width: 100%; }
    form.form textarea { width: 99%; }
    p#submitArea { margin-right: 5px; }
	
	
	.stoerer {
		width: 90%;
	}
}

@media screen and (min-width: 695px) {
    nav, address { display: block !important; }   
}

/* =========================================================
   Kontaktformular – Bootstrap-kompatible Formularstyles
   ========================================================= */

body.kontakt .formcontainer {
  max-width: 680px;
  width: 100%;
  margin: 25px 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
}

/* Formulargruppen */
body.kontakt .form-group {
  margin-bottom: 1rem;
}

/* Labels */
body.kontakt .form-group > label,
body.kontakt .form-label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 0.4rem;
  padding: 0;
  color: #444;
  font-size: 13px;
  font-weight: 600;
}

/* Eingabefelder */
body.kontakt .form-control,
body.kontakt .form-select,
body.kontakt input.input,
body.kontakt select.select,
body.kontakt textarea {
  display: block;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 20px 15px 10px 15px !important;
  margin: 0;
  color: #333;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

/* Select-Felder */
body.kontakt .form-select,
body.kontakt select.select {
  width: 100% !important;
  min-width: 100%;
  height: 45px !important;
  min-height: 45px;
  box-sizing: border-box;
  padding: 20px 15px 10px 15px !important;
  line-height: 1.5;
  cursor: pointer;
}

/* Textareas */
body.kontakt textarea.form-control,
body.kontakt textarea {
  min-height: 130px;
  height: auto;
  resize: vertical;
}

/* Fokus */
body.kontakt .form-control:focus,
body.kontakt .form-select:focus,
body.kontakt input.input:focus,
body.kontakt select.select:focus,
body.kontakt textarea:focus {
  border-color: #106429;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 21, 96, 0.25);
}

/* Checkboxen */
body.kontakt .form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 1rem 0;
}

body.kontakt .form-check-input,
body.kontakt input.checkbox {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #106429;
}

body.kontakt .form-check-label {
  float: none;
  width: auto;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Hilfetexte */
body.kontakt .form-text,
body.kontakt .help-block {
  display: block;
  margin-top: 0.3rem;
  color: #6c757d;
  font-size: 12px;
  line-height: 1.4;
}

/* Fehlermeldungen */
body.kontakt .has-error label,
body.kontakt label.error {
  color: #b02a37;
}

body.kontakt .has-error .form-control,
body.kontakt .has-error .form-select,
body.kontakt input.error,
body.kontakt select.error,
body.kontakt textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(5, 21, 96, 0.25);
}

body.kontakt .has-error .help-block {
  color: #dc3545;
}

/* Buttons */
body.kontakt .btn,
body.kontakt button.button,
body.kontakt input.button {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  margin: 0;
  color: #fff;
  background-color: #236BA6;
  border: 1px solid #236BA6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out;
}

body.kontakt .btn:hover,
body.kontakt button.button:hover,
body.kontakt input.button:hover {
  background-color: #1E508D;
  border-color: #1E508D;
}

body.kontakt .btn:focus,
body.kontakt button.button:focus,
body.kontakt input.button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 21, 96, 0.25);
}

/* Buttonbereich */
body.kontakt .buttoncontainer {
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  text-align: right;
}

/* Bootstrap-ähnliche Spalten */
body.kontakt .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}

body.kontakt .col-md-6 {
  width: 50%;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Volle Breite mit Innenabstand links und rechts */
body.kontakt .col-12 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 12px;
  padding-left: 12px;
}

/* Labels oberhalb der Felder – verhindert Überlappungen mit Selects */
body.kontakt p label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 6px;
  padding: 0;
}

body.kontakt p:has(select) label,
body.kontakt p:has(.form-select) label {
  float: none;
  width: auto;
}

.fm-form-floating > label {
	padding: 18px 15px !important;
	height: auto !important;
	line-height: 1.25 !important;
	font-size: 14px;
}

/* Mobile Darstellung */
@media (max-width: 600px) {
  body.kontakt .formcontainer {
    width: 100%;
  }

  body.kontakt .col-md-6 {
    width: 100%;
  }

  body.kontakt .buttoncontainer {
    text-align: left;
  }

  body.kontakt .btn,
  body.kontakt button.button,
  body.kontakt input.button {
    width: 100%;
  }
}