/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
* { outline:none; box-sizing: border-box;  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ul, li, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

#galeriejahre article { display:inline-block; }
#galeriejahre article:first-of-type { display:block; }

blockquote, q {
  quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }
ol, ul { list-style: none; }
main ol, main ul { list-style: disc; }
table {
  border-collapse: collapse;
  border-spacing: 0; }


body            { font-family: Arial, sans-serif; font-size:16px; 
                  line-height:1.5; color:#111;
                  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
                  }

    /**
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 * #0849A0
 */

body {
  display: flex;
  min-height: 100vh; /* 1, 3 */
  flex-direction: column;
  padding:0; margin:0;
}

#content, footer {
  display: flex;
  flex-direction: column;
}

header {
  flex: none; /* 2 */
}
footer {
  background-color:#efefef; padding:28px 0;
}
#col1, #col3 { display:none; }
#col2 { text-align:center; }
#kalender { display:inline-block; margin:0 auto 6px; }
#kalender table { margin:0 9px; }
#kalender th, #kalender td { font-size:14px; padding:1px 4px; }
#kalender td.wt, #kalender td.leer { font-size:11px; border:0; }
#kalender th { font-weight:600; padding-top:24px; padding-bottom:3px; }
#kalender td { text-align:right; border:1px solid #cdcdcd; }
#kalender th a { font-size:16px; font-weight:700; border:0; }
#kalender th a.ll { float:left; margin:0 0 0 3px; }
#kalender th a.rl { float:right; margin:0 3px 0 0; }
#kalender td.treffer { background-color:#F4F2EA; }
.kalenderdetails { padding-top:9px; border-top:1px solid #ddd; max-width:750px; }
.kalenderdetails h3 { padding-bottom:12px; }
.kalenderdetails img { display:block; max-width:100%; padding:18px 0; border:0; }
.kalenderdetails .b { display:block; padding:9px 0 0; }
.kalenderdetails small { font-size:14px; }
#kalender_form select { font-family: Arial, sans-serif; font-size:15px; min-width:60px; }
#kalender_form input { font-family: Arial, sans-serif; font-size:15px; cursor:pointer; border:0; margin-left:0; }
#einzeldatum { margin-top:24px; margin-bottom:-10px; }
#article_kalender_form { margin-bottom:0; }

nav, aside {
  background-color:#F5EDCF;
}

nav#footernav { background-color:#efefef; }
nav#footernav li { display:inline-block; padding-top:3px; padding-left:9px; }
nav#footernav li:first-of-type { padding-left:0; } 
nav#footernav li span { display:inline-block; content:"\2022"; padding-right:9px; color:#847740; }
nav#footernav li:hover, nav#footernav li.current { background-color:none; border:0; }
nav#footernav a, nav#footernav a:hover { border:0; }
nav#footernav li.current a { color:#007db1; }

nav {
    /* put the nav on the left */
 /* order: -1; */
}

a, #kalender_form input { color:#847740; text-decoration:none; border-bottom:1px solid #847740; }
a:hover, #kalender_form input:hover { border-bottom:1px solid #007db1; color:#007db1;}

#mainnav { display:none; margin-bottom:3px; }
nav #mainnav li { padding-top:9px; height:39px; margin:0 3px 0; }
nav #mainnav li:hover, nav  #mainnav li.current { background-color:#fff; border:0;  }
nav #mainnav a, a#navbut  { padding-left:12px; display:inline-block; width:100%; font-size:1.1rem; 
                  font-weight:700; text-decoration:none; color:#847740; border:0; }
nav #mainnav li.current a  { color:#000; border:0; }
nav li a:hover, #buttons a { border:0; }

#counter { margin:9px 3px 0; padding:4px 12px 3px; opacity:.6; text-align:center;
          background-color:#F4F2EA; font-size:0.9rem; color:#222; }

h1 { font-family:"Libre Baskerville", serif; 
  font-size:1.2rem; letter-spacing:0.1rem; line-height:1.4; text-align:center; color:#333; padding:1rem 0 .75rem; margin:0; }

main article { margin:37px 6px 18px; clear:left; overflow:hidden; }
aside { padding:37px 6px 18px; }
aside article { margin:28px 0 18px; }
aside h2 + article { margin-top:0; }

h2, h3 { font-size:1.4rem; line-height:1.3; padding-bottom:24px; color:#007db1; /*#333;*/ }
main h3 { padding-bottom:14px; padding-top:18px; }
main h2 + h3 { padding-top:0; }
h2 { padding-top:24px; }
h2:first-of-type { padding-top:0; }
h3 { font-size:1.2rem; }
aside h2 { font-size:1.5rem; padding-bottom:18px; }
aside h3 { padding-bottom:2px; font-size:1.1rem; }

aside article.news p { margin-bottom:9px; }
aside article.news p:last-of-type { margin-bottom:0; }
main li, aside li, #kapitel-links li { margin-bottom:9px; }

h2, h3, strong { font-weight:700; }
p, main ul { margin-bottom:18px; }
td p { margin:0; } 
main table { width:100%;  }
main td { padding:4px 0; }
main ul { padding-left:20px; }
main li { margin-bottom:6px; }
article img {border:1px solid #eee; max-width:100%; height:auto;}
article picture img { width:100%; max-width:750px; }
article img.bild_text { border:0; margin-bottom:18px; }
article h2, article p, article form, article table, article ul { max-width:750px; }

#navbut         { margin:12px 0 3px 1px; border:0; text-align:center; padding-right:13px; }
#navbut::before { width:1.5rem; height:auto; vertical-align:top; 
                  display:inline-block; content:url(/img/hamburger_i.svg); }
#navbut:hover::before { content:url(/img/hamburger_a.svg); }
#navbut.open::before { content:url(/img/hamburger_x_i.svg); }
#navbut.open:hover::before { content:url(/img/hamburger_x_a.svg); }

#banner { display:flex;flex-direction:row;flex-wrap:nowrap;align-content: stretch; }
#banner-bild { width:78%;background:#fff url(/img/volvo-480w.jpg) no-repeat 0;background-size: cover;}
#logo  { width:22%; background-color:#fff; }
#logo img { max-width:90%; height:auto; margin:3% 5% 0 5%; }
#logo a, #logo a:hover { border:0; }
#titel-streifen { background-color:#E9D16E; }

label {display:block; margin-top:.75rem; margin-bottom:.05rem; clear:left; font-size:.9rem;}
.erste-zeile label { margin-top:0; }
.feld-links, .feld-rechts, .feld-ganze-breite { width:49%;display:inline-block; }
.feld-links { float:left; margin-right:2%; clear:left; }
.feld-links.kurz { width:20%; }
.feld-rechts.lang { width:78%; }
.feld-ganze-breite { width:100%; }

#fahrzeugtyp label { margin-top:4px; color:#333; font-size:1rem; }
#nachname, #vorname, #ort, #phone, #email, #pass, #username, #plz, #marke, #jahrgang, #herstellerland, #hersteller,
#typ, #zylinderzahl, #hubraum, #leistung, #club  { width:100%; }
#strasse  { width:49%; }
p.zwiti { margin-top:24px; font-weight:700;  }
p.error { margin-top:0; margin-bottom:12px; }

/*#buttons { display:flex; flex-direction: row; flex-wrap:wrap; 
             align-items:flex-start; justify-content: space-around; } */
#buttons { margin:37px 0 18px 12px; position:relative; }
#buttons figure { width:98%; margin:0 2% 14% 0; float:left; }
#buttons figure img { width:100%; padding-bottom:24%; background-color:#fff; border:1px solid #dedede; }
#buttons figure img:hover { background:rgba(233,209,110, .9); }
#buttons figure img:hover figcaption { color:#000;  }
#buttons figure figcaption { width:100%; max-width:100%; height:auto; text-align:center; margin-top:-20%; color:#333;
                             font-size:1.1em; font-weight:700; z-index:10; }


#bemerkungen { width:100%; height:180px; }
input, textarea { border:1px solid #007db1; font-size:1rem; color:#333; padding:2px 3px; font-family:Arial, sans-serif; }
input[type="checkbox"], input[type="radio"]  {
  display:none;
}

#submit { padding:7px 20px 4px; margin:18px 0; border-radius:8px; color:#333; cursor:pointer; }
#submit:hover { color:#000; background-color: #efefef; }
label[for="subject"] { display: none; visibility: hidden; }

.news main article, .galerie main#galerie_details article, .bewertungen main article,
.carsontour main article { margin:0 6px; }
.news main h2, .carsontour main h2 { margin:37px 6px 0; }

.galerie main#galerie_details h2 { margin:37px 6px 0; padding-bottom:12px; }
.galerie main#galerie_details > p { margin:0 6px 32px; }
.galerie figcaption { display:none; }

.news main h3, .galerie main#galerie_details h3, .bewertungen main h3, .carsontour main h3 { display:inline; padding-bottom:0; } 
.accordion-div { padding-bottom:24px; }
.accordion-div  .accordion.erster { padding-top:6px; border-top:1px solid #ddd; }
.accordion label {
  margin-top:0;
}
.news .accordion img, .bewertungen .accordion img, .carsontour .accordion img {
  border:0;
  max-width:100%;
}
.bewertungen .accordion .sterne img { cursor:none; }
.bewertungen .accordion .sterne { padding-left:24px; padding-top:2px; }
.accordion .accordion-header {
  display: block;
  padding: .2rem 0 .5rem;
  cursor: pointer;
}
.bewertungen main > article { padding-bottom:12px; }
.accordion .accordion-header small {
    display: block;
    font-size: 1rem;
    margin-top:1px;
    margin-left:21px;
    font-weight: 700;
    color:#007db1;
}
.accordion input:checked~.accordion-body, .accordion[open] .accordion-body {
    max-height: 500rem;
}
.accordion .accordion-body {
  margin-bottom: .4rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
  border-bottom: 1px solid #ddd;
}
.accordion .accordion-body p:first-of-type {
  padding-top: 9px;
}
[hidden] {
    display: none;
}
.icon {
    box-sizing: border-box;
    display: inline-block;
    font-size: inherit;
    font-style: normal;
    height: 1em;
    position: relative;
    text-indent: -9999px;
    vertical-align: middle;
    width: 1em;
}
.icon::after, .icon::before {
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}
.icon-arrow-right::before {
    transform: translate(-75%,-50%) rotate(135deg);
}
.icon-arrow-down::before, .icon-arrow-left::before, .icon-arrow-right::before, .icon-arrow-up::before, .icon-back::before, .icon-downward::before, .icon-forward::before, .icon-upward::before {
    border: .1rem solid currentColor;
    border-bottom: 0;
    border-right: 0;
    height: .65em;
    width: .65em;
}
.accordion .accordion-header .icon {
    transition: transform .25s;
    margin-right:3px;
}
.accordion input:checked~.accordion-header .icon, .accordion[open] .accordion-header .icon {
    transform: rotate(90deg);
}
.accordion .icon-arrow-right::before {
  border: .1rem solid #007db1;
  border-bottom: 0;
  border-right: 0;
}
.accordion-header .icon {
    font-size: .85rem;
    margin-bottom: .25rem;
}
.accordion .icon {
    vertical-align: -18%;
}
table#rallies { width:100%; max-width:100%; border-bottom:1px solid #ccc; }
#rallies span { display:inline-block; padding:0 2px; }
#rallies td { display:block; padding:0; text-align:left; }
#rallies td.datum { padding:6px 0 0; border-top:1px solid #ccc; }
#rallies td.titel { font-weight:700; }
#rallies td.links { padding-bottom:5px; }
#rallies td.links a::after { content: "\A"; white-space: pre; }
#rallies th { font-weight:700; text-align:left; font-size:1.2rem; line-height:1.3; padding-bottom:6px; padding-top:21px;
              color:#007db1; border-top:1px solid #ccc; }
#rallies th.erste { border-top:0; }

#galeriejahre { width:100%; }
#galeriejahre img.galeriejahr { float:left; margin:0 32px 28px 0; border:0; }
.galerie-bilder { margin-top:9px; }
.galerie-bilder figure { width:110px; float:left; }
.galerie-bilder figure img { display: block; width:110px; max-width: 100%; }
.galerie-bilder a { border:0; }
.galerie-bilder { padding-bottom:12px; }

.anzahl { border: 1px solid #ccc;
padding: 4px 4px 2px;
outline: none;
border-radius: 2px;
font-family: Arial, sans-serif; font-size:16px; 
                  line-height:1.5; color:#111;
margin: 0 8px 0 0;
height: auto;
max-width: 100%;
display: block;
margin-bottom: 10px;
background: #fff; width:40px; text-align:right;  float:left;}
.waegeli {
    padding: 4px 4px 0;
    margin: 0px 18px 0 0;
    border-radius: 1px;
    border: 1px solid #ccc; float:left; 
}
.waegeli img { border:0; }

.error { color: red; }
.rot { color:#D3132F; }

.video-container-wrapper { max-width:100%; width:750px; left:0; right:0; margin:0; }
.video-container         { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.video-container iframe  { position:absolute; top:0; left:0; width:100%; height:100%; }

.text_bild, .text_bild table { margin-bottom:12px; }

@media (min-width:300px) {
  #buttons figure figcaption { margin-top:-19%; font-size:1.2em;}
}

@media (min-width:360px) {
  #buttons figure figcaption { margin-top:-18%; font-size:1.4em; }
  main article { margin:37px 12px 18px; }
  aside { padding:37px 12px 18px; }
  .news main article, .bewertungen main article, .galerie main#galerie_details article,
  .carsontour main article { margin:0 12px; }
  .news main h2, .galerie main#galerie_details h2, .carsontour main h2 { margin:37px 12px 0; }
  .carsontour main h2 ~ p { margin:0 12px 24px; }
  .bewertungen main h2 { margin-top:37px; }
  .galerie main#galerie_details > p { margin:0 12px 32px; }
  #kalender_form select { min-width:90px; }
}

@media (min-width:500px) and (max-width:767px) {
 h1 { font-size:1.4rem; letter-spacing:0.125rem; }
 #buttons figure figcaption { margin-top:-19.5%; font-size:1.2em; }
 #buttons figure { width:48%; margin:0 1.5% 8% 0; }
 #buttons figure:nth-of-type(odd) { margin-right:2.5%; }
 #kalender_form input { margin-left:24px; }
}

@media (min-width:620px) {
  #kalender table { float:left; margin:0 9px; }
  #kalender_form select { min-width:120px; }
}

@media (min-width: 768px) {
  #content, footer { flex-direction: row; flex: 1; }
  main { flex:1; padding-bottom:3rem; }
  #col2 { flex:1; }
  aside, #col3 { flex: 0 0 22%; }
  nav, #col1 { flex: 0 0 15%; min-width:180px; }
  #mainnav { margin-top:36px; display:block;}
  h1 { font-size:2rem; }
  a#navbut { display:none; }
  #buttons figure { width:98%; margin:0 2% 14% 0; }
  #buttons figure figcaption { margin-top:-18%; font-size:1.4em; }
  #banner-bild { background-image: url(/img/volvo-840w.jpg); }
  #kalender table { margin:0 18px; }
  #kalender table.kal_1 { margin:0 18px 0 0; }
  #kalender table.kal_3 { margin:0 0 0 18px; }

  #counter { margin-top:24px; text-align:left;}
  
}

@media (min-width:900px) {
 h1 { font-size:2.5rem; letter-spacing:0.175rem; } 
 h2 { font-size:1.7rem; }
 main article, #buttons { margin-left:24px; }
 main article { margin-right:24px; }
 #buttons figure figcaption { margin-top:-19.5%; font-size:1.2em; }
 #buttons figure { width:46%; margin:0 4% 8% 0; }
 #banner-bild { background-image: url(/img/volvo.jpg); }
 .news main article, .bewertungen main article, .galerie main#galerie_details article,
 .carsontour main article { margin:0 24px; }
 .news main h2, .galerie main#galerie_details h2, 
 .carsontour main h2 { margin:37px 12px 0 24px; }
 .carsontour main h2 ~ p { margin:0 12px 32px 24px; }
 .bewertungen main h2 { margin:37px 12px 0 0; }
 .galerie main#galerie_details > p { margin:0 12px 32px 24px; }
}

@media (min-width:1024px) {
 h1 { font-size:2.75rem; letter-spacing:0.25rem; } 
 #buttons figure figcaption { margin-top:-19.5%; font-size:1.3em; }
 #buttons figure { width:47%; margin:0 3% 8% 0; }
 .accordion .accordion-header small { display: inline-block; float: right; margin-left:0;}
 .accordion input:checked~.accordion-body, .accordion[open] .accordion-body {
    max-height:500rem; }
 #col1, #col3 { display:block; }

 #rallies td.zusatz { font-size:.875rem; line-height:1.125rem; }
 #rallies td.titel { min-width:190px; }
 #rallies td { display:table-cell; padding:4px 12px 3px 0; border-top:1px solid #ccc; }
 #rallies tr td:last-of-type { padding-right:0; }
 #rallies td.datum, #rallies td.links { padding:4px 12px 3px 0;  }

 .galerie-intro { float:left; width:38%; margin-right:2%; }
 .galerie-bilder { float:right; width:60%; }

}

@media (min-width:1200px) {
 h1 { font-size:3.5rem; letter-spacing:0.25rem; }
 h2 { font-size:1.9rem; }
 #buttons figure { width:31.5%; margin:0 1.5% 8% 0; }
 #buttons figure figcaption { margin-top:-20.5%; font-size:1.2em; }
 .news .accordion img, .bewertungen .accordion img, .carsontour .accordion img { max-width:720px; }
 #rallies td.zusatz { font-size:1rem; line-height:1.5rem; }
 #rallies td.titel { min-width:200px; }
}

@media (min-width:1400px) {
 h1 { font-size:4.2rem; letter-spacing:0.25rem; }
 #buttons figure figcaption { margin-top:-20%; font-size:1.3em; }
 #buttons figure { margin:0 1% 8% 0; }
 #rallies td.datum { width:200px; }
 #rallies td.titel { min-width:240px; }
}

@media (min-width:1600px) {
 h1 { font-size:4.2rem; letter-spacing:0.25rem; }
 #buttons figure figcaption { margin-top:-19%; font-size:1.4em; }
 .news .accordion .accordion-body .news-details,
 .bewertungen .accordion .accordion-body .news-details,
 .carsontour .accordion .accordion-body .news-details, .text_bild { float:left; width:56%; }
 .news .accordion .accordion-body img, .bewertungen .accordion .accordion-body img.gr,
 .carsontour .accordion .accordion-body img { float:right; width:44%; padding-top:9px; padding-left:12px;}
 .bild_text { float:right; width:44%; padding-top:6px; padding-left:12px;}
}