/* ******************* allgemeines ************************** */

html, body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

/*
body {font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;}
*/
header h1:not(.site-name), h2 {font-family: var(--text-font-family-header), 'Open Sans Condensed', 'Open Sans', 'Arial', sans-serif;text-align:left;padding-bottom:1rem;}
header h1:not(.site-name) {font-size:var(--text-font-size-h1);}
/* testen:
.user-logged-in h1 {font-family: 'Courgette', 'Tangerine', var(--text-font-family-h1), 'Dancing Script', 'Open Sans Condensed', 'Open Sans', 'Arial', sans-serif;}
*/
/*.handschrift {font-family:var(--text-font-family-handschrift);font-size:90%;} */  /* bei Calligraffiti */
/* .handschrift {font-family:var(--text-font-family-handschrift);font-size:80%;} */ /* bei Kite One */
/* .handschrift {font-family:var(--text-font-family-handschrift);font-size:120%;} */ /* bei Dancing Script */
.handschrift {font-family:'Calligraffiti';font-size:70%;}
/* in fonts.css
.fa {font-family:"Font Awesome 5 Free";font-style:normal;}
.fas {font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;}
*/
a.sandwich {display:block; font-style:normal;}
i.fa {display:inline;}
nav i.fa {display:block;}
a.disabled {pointer-events: none;} /* war für intense-Links, jetzt a durch span ersetzt */

/* ******************* vordefinierte Klassen für Textblöcke (style-Attribut dort oft ausgefiltert) ******* */

@media only screen {
  .print_only {display: none !important;}
}
@media only print {
  .no_print {display: none !important;}
}
.nur_großer_bildschirm {
  opacity:0;
  position:fixed;
  left:-999rem;  
}

@media only screen and (min-width: 40rem) {
 
  .nur_großer_bildschirm {
    opacity:1;
    position:static;
    left:auto;
  }
 .nur_kleiner_Bildschirm {
    position:absolute;
    left:-999rem;
    opacity:0;
    visibility:hidden;
    height:1px;
    width:1px;
    overflow:hidden;
  }
}

.small_caps {font-variant:small-caps;}
.bold, .fett, font_weight_bold {font-weight: bold;}
.letter_spacing_10px {letter-spacing:10px;}
.word_spacing_2rem {word-spacing:2rem;}
.capitalize {text-transform: capitalize;}
.capitalize_first_letter:first-letter {text-transform: capitalize;}
.uppercase {text-transform:uppercase;}
.lowercase {text-transform:lowercase;}
.nowrap {white-space:nowrap;}
.text_align_right {text-align: right;}
.text_align_center {text-align: justify;}
.text_align_justify {text-align: justify;}
.vertical_align_baseline {vertical-align:baseline;}
.vertical_align_top {vertical-align:top;}
.object_fit_contain {object-fit: contain;}
.object_position_center {object-position: center center;}
.img_object_fit_contain img {object-fit: contain;}
.img_object_position_center img {object-position: center center;}
.img_display_inline img {display:inline;}
.figure_display_inline_block figure {display:inline-block;}

.overflow_auto {overflow:auto} /* besser als clearfix für parent container wenn nur children mit float */


.display_table {display:table;}
.display_table_cell {display:table-cell;}
.display_table_row {display:table-cell;}
.display_table {display:table;}
.display_none {display: none;}
.display_block {display: block;}
.display_inline_block {display: inline-block;}
.float_right {float: right;}
.float_right_figure figure {float: right;}
.float_left {float: left;}
.float_left_figure figure {float: left;}
.first_of_type_clear_left:first-of-type {clear:left;}
.first_of_type_clear_right:first-of-type {clear:right;}
.field--label-above {clear: both;}
.clear_both {clear: both;}
.clear_left {clear: left;}
.clear_left_figure figure {clear: left;}
.clear_right {clear: right;}
.clear_right_figure figure {clear: right;}
.clear_none {clear:none;}
.clear_before::before {clear:both; content:"";display:block;height:1px;width:1px;visibility:hidden;font-size:0;opacity:0;}
.clear_after::after {clear:both; content:"";display:block;height:1px;width:1px;visibility:hidden;font-size:0;opacity:0;}
.clear_after_figure figure::after {clear:both !important; content:"";display:block;height:1px;width:1px;visibility:hidden;font-size:0;opacity:0;}
.field_items_float_left .field_items {float:left;}
.linkfarbe_inherit a {color: inherit;}
.margin_1rem {margin:1rem;}
.margin_1_5rem {margin:1.5rem;}
.margin_2rem {margin:2rem;}
.margin_top {margin-top:2rem;}
.margin_top_0_3rem {margin-top:0.3rem;}
.margin_top_2rem {margin-top: 2rem;}
.margin_top_3rem {margin-top: 3rem;}
.margin_top_4rem {margin-top: 4rem;}
.margin_top_5rem {margin-top: 5rem;}
.margin_top_6rem {margin-top: 6rem;}
.margin_bottom_2rem {margin-bottom: 2rem;}
.margin_bottom_4rem {margin-bottom: 4rem;}
.margin_right_0_5rem {margin-right:0.5rem;}
.margin_right_1rem {margin-right:1rem;}
.margin_right_2rem {margin-right:2rem;}
.margin_right_3rem {margin-right:3rem;}
.margin_left_0_5rem {margin-left:0.5rem;}
.margin_left_1rem {margin-left:1rem;}
.margin_left_2rem {margin-left:2rem;}
.margin_left_3rem {margin-left:3rem;}
.margin_auto {margin-left:auto;margin-right:auto;}
.padding_0_5rem {padding:0.5rem;}
.padding_1rem {padding:1rem;}
.padding_0_3rem_0_5rem {padding:0.3rem 0.5rem;}
.padding_a_top_1_5rem a {padding-top:1.5rem;}
.figcaption_padding_0_3rem_0_5rem figcaption {padding:0.3rem 0.5rem;}
.a_padding_0_3rem_0_5rem a {padding:0.3rem 0.5rem;}
.padding_right_0_5rem {padding-right:0.5rem;}
.padding_right_2rem {padding-right:2rem;}
.padding_top_2rem {padding-top:2rem;}
.padding_top_1rem {padding-top:1rem;}
#Liste:target.padding_top_liste {padding-top:2rem;}
.padding_bottom_1rem {padding-bottom:1rem;}
.padding_a_left_50px a {padding-left:50px;} /* Symbol vor Dateidownload */
.padding_a_left_64px a {padding-left:64px;} /* Symbol vor Dateidownload */
.padding_a_left_80px a {padding-left:80px;} /* Symbol vor Dateidownload */
.padding_a_left_100px a {padding-left:100px;} /* Symbol vor Dateidownload */
.padding_a_left_5rem a {padding-left:5rem;} /* Symbol vor Dateidownload */
.padding_left_1rem {padding-left: 1rem;}
.padding_left_2rem {padding-left: 2rem;}
.padding_left_3rem {padding-left: 3rem;}
.padding_left_4rem {padding-left: 4rem;}
.padding_left_5rem {padding-left: 5rem;}

.no_margin {margig:0 !important;}
.no_margin_field .field {margin:0 !important;}
.margin_right_4prozent {margin-right:4%;}
.margin_right_10prozent {margin-right:10%;}
.margin_left_2rem {margin-left:2rem;}
.margin_left_3rem {margin-left:3rem;}
.margin_left_4rem {margin-left:4rem;}
.margin_float_left {margin: 0 4% 2rem 0;}
.margin_float_left_unten_minus_1rem {margin: 0 4% -1rem 0;}
.margin_float_left_unten_0rem {margin: 0 4% 0 0;}
.margin_float_left_unten_1rem {margin: 0 4% 1rem 0;}
.margin_float_left_unten_2rem {margin: 0 4% 2rem 0;}
.margin_float_left_unten_4rem {margin: 0 4% 4rem 0;}
.margin_float_right {margin: 0 0 2rem 4%;}
.margin_float_right_unten_minus_1rem {margin: 0 0 -1rem 4%;}
.margin_float_right_unten_0rem {margin: 0 0 0 4%;}
.margin_float_right_unten_1rem {margin: 0 0 1rem 4%;}
.margin_float_right_unten_2rem {margin: 0 0 2rem 4%;}
.margin_float_right_unten_4rem {margin: 0 0 4rem 4%;}
.margin_float_left_1rem {margin: 0 1rem 1rem 0;}
.margin_float_right_1rem {margin: 0 0 1rem 1rem;}
.margin_float_left.margin_right_10prozent figure {margin-right:10%;}
.margin_float_left.margin_right_12prozent figure {margin-right:12%;}

.label_margin_bottom_1rem .field_label {margin-bottom:1rem;}

/* für die altenn Seiten noch drin */
/*
.margin_float_links {margin: 0 4% 1rem 0;}
.margin_float_rechts {margin: 0 0 1rem 4%;}
.margin_float_links.margin_right_10prozent {margin-right:10%;}
.margin_float_links.margin_right_12prozent {margin-right:12%;}
*/
/*
div .margin_float_links:nth-child(2).margin_rechter_rand_nur_ungerade div {margin-right:0}
*/
.position_fixed {position:fixed;}
.position_relative {position:relative;}
.position_absolute {position:absolute;}
.position_absolute_top_left, .oben_links, .links_oben {position:absolute;top:0;left:0;}
.position_absolute_top_right, .oben_rechts, .rechts_oben {position:absolute;top:0;right:0;}
.position_absolute_bottom_left, .unten_links, .links_unten {position:absolute;bottom:0;left:0;}
.position_absolute_bottom_right, .unten_rechts, .rechts_unten {position:absolute;bottom:0;right:0;}

.trennstrich_vor_label .field_label::before {content: ' | ';display: inline-block;}
.doppelpunkt_nach_label .field_label::after {content:': ';display:inline-block;}
.doppelpunkt_nach_label label::after {content:': ';display:inline-block;}
.text_kuerzen {white-space:nowrap; overflow:hidden;text-overflow: ellipsis;width:100%;}
.a_text_kuerzen a {white-space:nowrap; overflow:hidden;text-overflow: ellipsis;width:100%;}

.height_auto {height:auto;}
.height_auto_img img {height:auto;} /* für Base64-Images in Kombi mit max_width_100prozent_img zum Überschreiben der html width / height-Angabe */
.height_a_4rem a {height:4rem;} /* für Download-Link selbst */
.height_a_5rem a {height:5rem;} /* für Download-Link selbst */
.height_a_50px a {height:50px;} /* für Download-Link selbst */
.height_a_64px a {height:64px;} /* für Download-Link selbst */
.height_50px {height:50px;} /* für Symbol vor Dateidownload */
.height_64px {height:64px;} /* für Symbol vor Dateidownload */
.height_150px {height:150px;} /* für Mediengalerie */
.height_200px {height:200px;} /* für QR-Code */
.height_200px_img img {height:200px;} /* für QR-Code */
.height_220px {height:220px;} /* für Mediengalerie */
.height_220px_img img {height:220px;} /* für Mediengalerie */
.height_250px {height:250px;} /* für QR-Code */
.height_270px {height:270px;} /* für Videocontainer */
.height_300px {height:300px;} /* für Mediengalerie */
.height_480px {height:480px;} /* für Videocontainer */
.height_540px {height:540px;} /* für Videocontainer */
.height_2_3rem {height:2.3rem;}
.height_2_5rem {height:2.5rem;}
.height_3rem {height:3rem;}
.height_4rem {height:4rem;}
.height_4_5rem {height:4.5rem;}
.height_5rem {height:5rem;}
.height_5_5rem {height:5.5rem;}
.height_6rem {height:6rem;}
.height_6_5rem {height:6.5rem;}
.height_7rem {height:7rem;}
.height_7_5rem {height:7.5rem;}
.height_8rem {height:8rem;}
.height_10rem {height:10rem;}
.height_12rem {height:12rem;}
.height_15rem {height:15rem;}
.height_14rem {height:14rem;}
.height_20rem {height:20rem;}
.height_200px {height:200px;}
.height_522px {height:522px;}
.height_600px {height:600px;}
.height_50prozent {height:50%;}
.height_100prozent {height:100%;}
.img_height_100prozent img{height:100%;}
/* .hoch_300px {height:300px;}*/

.min_height_3rem {min-height:3rem;}
.min_height_3_5rem {min-height:3.5rem;}
.min_height_4rem {min-height:4rem;}
.min_height_4_5rem {min-height:4.5rem;}

.width_auto {width:auto;}
.width_auto_div div {width:auto;}
.width_auto_figure figure {width:auto;}

.width_4rem {width:4rem;}
.width_5rem {width:5rem;}
.width_8rem {width:8rem;}
.width_10rem {width:10rem;}
.width_12rem {width:12rem;}
.width_15rem {width:15rem;}
.width_20rem {width:20rem;}
.width_25rem {width:25rem;}

.width_50px {width:50px;} /* für Symbol vor Dateidownload */
.width_64px {width:64px;} /* für Mediengalerie */
.width_150px {width:150px;} /* für Mediengalerie */
.width_200px {width:200px;} /* für QR-Code */
.width_200px_img img {width:200px;} /* für QR-Code */
.width_220px {width:220px;} /* für Mediengalerie */
.width_250px {width:250px;} /* für Mediengalerie und QR-Code */
.width_300px {width:300px;} /* für Mediengalerie */
.width_400px {width:400px;} 
.width_480px {width:480px;} 
.width_640px {width:640px;} /* für Videocontainer */ 
.width_800px {width:800px;} 
.width_960px {width:960px;} /* für Videocontainer */ 

.width_25prozent {width:25%;}
.width_29prozent {width:29%;}
.width_30prozent {width:30%;}
.width_33_3prozent {width:33.3333%;}
.width_35prozent {width:35%;}
.width_40prozent {width:40%;}
.width_45prozent {width:45%;}
.width_50prozent {width:50%;}
.width_51prozent {width:51%;}
.width_58prozent {width:58%;}
.width_61prozent {width:61%;}
.width_100prozent {width:100%;} 
.width_100prozent_img img {width:100%;} 

.min_width_250px {min-width:250px;}
.min_width_5rem {min-width:5rem;}
.min_width_6rem {min-width:6rem;}
.min_width_7rem {min-width:7rem;}
.min_width_8rem {min-width:8rem;}
.min_width_10rem {min-width:10rem;}
.min_width_12rem {min-width:12rem;}
.min_width_13rem {min-width:13rem;}
.min_width_14rem {min-width:14rem;}
.min_width_15rem {min-width:15rem;}
.min_width_16rem {min-width:16rem;}
.min_width_17rem {min-width:17rem;}
.min_width_18rem {min-width:18rem;}
.min_width_20rem {min-width:20rem;}
.min_width_22rem {min-width:22rem;}
.min_width_23rem {min-width:23rem;}
.min_width_24rem {min-width:24rem;}
.min_width_25rem {min-width:25rem;}

.max_width_3rem {max-width:3rem;}
.max_width_3rem_img img {max-width:3rem;}
.max_width_4rem {max-width:4rem;}
.max_width_4rem_img img {max-width:4rem;}
.max_width_5rem {max-width:5rem;}
.max_width_5rem_img img {max-width:5rem;}
.max_width_6rem {max-width:6rem;}
.max_width_6rem_img img {max-width:6rem;}
.max_width_6rem_img_polaroid img {max-width:6rem;}
.max_width_8rem {max-width:8rem;}
.max_width_8rem_img img {max-width:8rem;}
.max_width_10rem {max-width:10rem;}
.max_width_10rem_img img {max-width:10rem;}
.max_width_12rem {max-width:12rem;}
.max_width_12rem_img img {max-width:12rem;}
.max_width_14rem {max-width:14rem;}
.max_width_14rem_img img {max-width:14rem;}
.max_width_16rem {max-width:16rem;}
.max_width_16rem_img img {max-width:16rem;}
.max_width_18rem {max-width:18rem;}
.max_width_20rem {max-width:20rem;}
.max_width_21rem {max-width:21rem;}
.max_width_22rem {max-width:22rem;}
.max_width_23rem {max-width:23rem;}
.max_width_24rem {max-width:24rem;}
.max_width_25rem {max-width:25rem;}
.max_width_26rem {max-width:26rem;}
.max_width_28rem {max-width:28rem;}
.max_width_30rem {max-width:30rem;}
.max_width_32rem {max-width:32rem;}
.max_width_34rem {max-width:34rem;}
.max_width_35rem {max-width:35rem;}
.max_width_40rem {max-width:40rem;}
.max_width_42rem {max-width:42rem;}
.max_width_48rem {max-width:48rem;}
.max_width_50rem {max-width:50rem;}
.max_width_60rem {max-width:60rem;}

.max_width_25prozent{max-width:25%;}
.max_width_29prozent{max-width:29%;}
.max_width_30prozent{max-width:30%;}
.max_width_30prozent_img img{max-width:30%;}
.max_width_33prozent{max-width:33%;}
.max_width_33prozent_img img{max-width:33%;}
.max_width_49prozent{max-width:49%;}
.max_width_60prozent{max-width:60%;}
.max_width_70prozent{max-width:70%;}
.max_width_75prozent{max-width:75%;}
.max_width_100prozent_img img{max-width:100%;}

.max_width_100px{max-width:100px;}
.max_width_150px{max-width:150px;}
.max_width_220px{max-width:220px;}
.max_width_250px {max-width:250px;}
.max_width_300px{max-width:300px;}
.max_width_400px{max-width:400px;}
.max_width_600px{max-width:600px;}
.max_width_800px{max-width:800px;}
.max_width_940px{max-width:940px;}
.max_width_1200px{max-width:1200px;}
.max_width_none {max-width:none;}

.max_height_100px{max-height:100px;}
.max_height_150px{max-height:150px;}
.max_height_220px{max-height:220px;}
.max_height_250px{max-height:250px;}
.max_height_300px{max-height:300px;}
.max_height_480px{max-height:480px;}
.max_height_522px{max-height:522px;}
.max_height_600px{max-height:600px;}

.line_height_1 {line-height:1;}
.line_height_100prozent {line-height:1;}
.line_height_120prozent {line-height:1.2;}
.line_height_130prozent {line-height:1.3;}
.line-height-130prozent {line-height:1.3;} /* views ersetzt _ durch - bei neuestem Inhalt */
.line_height_140prozent {line-height:1.4;}
.line-height-140prozent {line-height:1.4;}
.line_height_150prozent {line-height:1.5;}
.line-height-150prozent {line-height:1.5;}
.line_height_180prozent {line-height:1.8;}
.line_height_200prozent {line-height:2;}

.font_size_25px {font-size:25px;} /* für Medienbibliothek */
.font_size_50px {font-size:50px;} /* für Medienbibliothek */
.font_size_2rem {font-size:2rem;}
.font_size_3rem {font-size:3rem;}
.font_size_4rem {font-size:4rem;}
.font_size_5rem {font-size:5rem;}
.font_size_150px {font-size:150px;} /* für Medienbibliothek */
.font_size_180px {font-size:180px;} /* für Medienbibliothek */
.font_size_90prozent {font-size:90%;}
.font_size_85prozent {font-size:85%;}
.font_size_80prozent {font-size:80%;}
.font_size_75prozent {font-size:75%;}
.font_size_70prozent {font-size:70%;}
.font_size_65prozent {font-size:65%;}
.font_size_60prozent {font-size:60%;}

.z_index_10 {z-index:10;}
.z_index_100 {z-index:100;}
.z_index_1000 {z-index:1000;}
.visibility_hidden {visibility:hidden;}
.visually-hidden {visibility:hidden;}

.fg_transparent {color:transparent;}
.fg_white {color:white;}
.bg_white {background-color: white;}
.bg_grey_50 {background-color: rgba(150,150,150,0.5);}
.bg_grey_60 {background-color: rgba(150,150,150,0.6);}
.bg_dark_blue {background-color: #00001e;}
.fg_shadow_dark {text-shadow: 1px 1px 3px #00001e;}
.bg_shadow_dark {box-shadow: var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-color);}
.border_1px_dark {border:var(--box-border-width) var(--box-border-style) var(--box-border-color);}

.background_repeat_no_repeat {background-repeat:no_repeat;}
.background_size_cover {background-size: cover;}
.background_position_center_center {background-position:center center;}

/* externe Links markieren: */

/*
*/
body:not(.media):not(.admin):not([class*="angebot"]):not(.edit) main div:not(.downloadlink_in_einer_zeile) a[href^="http"]:not([href^="https://www.traub-immobilien.de"]):not([href^="https://traub-immobilien.de"]):not([href^="https://hausbau-traub.de"]):not([href^="https://www.hausbau-traub.de"])::after {
  display:inline-block;
  content:'\f35d';
  font-family: "Font Awesome 5 Free";
  position:relative;
  top:-0.5rem;
  font-weight:300; /* zugehörige Schriftartendatei aber nicht geladen - daher Fettanzeige von 900 von fas - Ausgleich über font-size */
  font-size:70%;
  padding-left:0.3rem;
}
/*
main a[href^="mailto"]::after {
  display:inline-block;
  content:'\f0e0';
  font-family: "Font Awesome 5 Free";
  position:relative;
  top:-0.5rem;
  font-weight:300; */ /* zugehörige Schriftartendatei aber nicht geladen - daher Fettanzeige von 900 von fas - Ausgleich über font-size */
/*  font-size:70%;
  padding-left:0.3rem;
}
*/
/* **************** Sektoren-Trennlinien ************************* */

/* Sektionen-Divider: Originalidee von: https://blog.avada.io/css/dividers/ */
/*
.user-logged-in small.site-slogan::before,
.user-logged-in small.site-slogan::after,
*/
.trennstrich_davor::before,
.trennstrich_danach::after,
body.angebot #objekt article::after{
  content:'';
  /* kein clear:both; wegen .angebot input + float! */
  display:block;
  height:2px;
  /* clear_after aufheben: */
  clip:unset;
  visibility:visible;
  opacity:1;
  width:100% !important;
}
.trennstrich_davor::before {
  margin-bottom:2rem;
}
.trennstrich_danach::after {
  margin-top:2rem;
} 
.trennstrich_davor.margin_top_vor_trennstrich {
  margin-top:2rem;
}
.trennstrich_danach.margin_bottom_nach_trennstrich::after,
body.angebot #objekt article::after {
  margin-bottom:2rem;
}
aside.rechts > .block > h2::after {
  margin-top:0; /* nicht so viel Platz um Trennlinie */
  margin-bottom:0.5rem;
}
/* ********************* mehrspaltiger Text ************************** */

[class$="spaltig"]{
  column-rule-width: 1px;
  column-rule-style: dotted;
  column-rule-color:inherit;
  column-gap: 2rem;
}
.zweispaltig {
  width:100%;
  column-count: 2;
}
.dreispaltig {
  width:100%;
  column-count: 1;
}
@media (min-width:66em) {
  .dreispaltig {
    width:100%;
    column-count: 3;
  }
}
.break_after_column {
  break-after:column;
}

.zwei_spalten, .drei_spalten {
  width:100%;
}
@media (min-width:80em) {
  .zwei_spalten {
    display: flex;
    width: 100%;
    align-items:center; 
    justify-content:center;
    justify-content: space-between;
    column-gap: 3rem;
  }
  .zwei_spalten > [class^="spalte_"] {
    flex-direction: column;
    display: flex;
    width: 50%;
    align-self:stretch;
    padding:0 0.5rem 2rem 0.5rem;
    column-gap: 3rem;
  }
}
@media (min-width:100em) {

  .drei_spalten {
    display: flex;
    width: 100%;
    align-items:center; 
    justify-content:center;
    justify-content: space-between;
  }
  .drei_spalten > [class^="spalte_"] {
    flex-direction: column;
    display: flex;
    width: 33.3333%;
    align-self:stretch;
    padding:0 0.5rem 2rem 0.5rem;
  }
}

/* ************************** Abstände *************************** */


main p {margin:0 auto 1.5em auto;}

main ul + p, main p + p, main p + ul, main p + dl, main p + ol, main ol + p, main dl + p, main ul + p, main p + h2, main p + h3, main .field_item > h3, main p + h4 {
  margin-top:1.5rem;
}
main .field_item {margin-bottom:0.2rem;}
.startseite main .field_item {margin-bottom:0;}
main .button .field_item,
main .download_link .field_item {
  margin-bottom:0;
}
.field p {margin:0;}

dt {margin-top:1.5rem;margin-bottom:0.3rem;}

pre code, table {
  clear:both;
  margin-top:0.3rem;
  margin-bottom:2rem;
  line-height:1.3rem;
  display:block;
  padding:0.3rem 1rem;
  /* mehr Abstand unten kommt von overflow-x: scroll - ist immer als Platz mit eingerechnet, auch wenn Balken unten nicht sichtbar ist */
}

/* 
   https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap 
   In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. 
   mögliche Werte: normal | break-word | anywhere
*/
main li, main table, main pre, main blockquote {
  max-width:100%;
  overflow-wrap:break-word;
  vertical-align: top;
}

/*

.notizen main li {
  amax-width: var(--breite-mittlere-spalte-rem-ohne-padding);
  vertical-align: top;
}

main blockquote {
  amax-width: var(--breite-mittlere-spalte-rem);
  overflow-wrap: break-word;
}


.notizen main a {
  max-width: var(--breite-mittlere-spalte-rem);
  overflow-wrap: break-word;
}


main li > code {
  display: inline-block;
  overflow-wrap: break-word;
}
main pre > code {
  display: block;
  overflow-x: scroll;
}
main table {
  overflow-x: scroll;
}
*/


body:not(.admin) thead {
  border-width: 5px 0 0 0;
  border-style: solid;
}
body:not(.admin) tbody, body:not(.admin) .vertical-tabs__panes {
  border-width: 5px 0 5px 0;
  border-style: solid;
}

.tabelle {
  margin-bottom:2rem;
  position:relative;
  width:100%;
}

.tabelle .field {
  position:relative;
  clear:left;
  width:100%;
}

.tabelle .tabellenspalte {
  float: left;
  margin-right:2rem;
}

.tabelle .tabellenspalte .field {
  width:auto;
  clear:initial;
}
.tabelle .field_label::after {
  content: ':';
}


.tabelle .field_label {float:left;width:auto;margin-right:1rem;} 
.tabelle .field_item {display:inline-block;}
.tabelle .field_item h3.title {
  margin:0; /* stammt aus der Datenbankabfrage zum Objekt und hat margin ja von field_item schon */
}

/* margin-right von .tabelle .field_label mit reinrechnen! */
.tabelle.links_min_3rem .field_label {min-width:3rem;}
.tabelle.links_min_3_5rem .field_label {min-width:3.5rem;}
.tabelle.links_min_4rem .field_label {min-width:4rem;}
.tabelle.links_min_4_5rem .field_label {min-width:4.5rem;}
.tabelle.links_min_5rem .field_label {min-width:5rem;}
.tabelle.links_min_7rem .field_label {min-width:7rem;}
.tabelle.links_min_7_5rem .field_label {min-width:7.5rem;}
.tabelle.links_min_8rem .field_label {min-width:8rem;}
.tabelle.links_min_10rem .field_label {min-width:10rem;}
.tabelle.links_min_12rem .field_label {min-width:12rem;}
.tabelle.links_min_13rem .field_label {min-width:13rem;}
.tabelle.links_min_14rem .field_label {min-width:14rem;}

.tabelle.label_max_7_5rem .field_label {max-width:7.5rem;}

[class*="links_min"].tabelle .field_label + .field_item {width:55%;}

.tabelle.links_min_3rem .field_label + .field_item {width:calc(100% - 4.5rem);}
.tabelle.links_min_3_5rem .field_label + .field_item {width:calc(100% - 5rem);}
.tabelle.links_min_4rem .field_label + .field_item {width:calc(100% - 5.5rem);}
.tabelle.links_min_5rem .field_label + .field_item {width:calc(100% - 6.5rem);}
.tabelle.links_min_7rem .field_label + .field_item {width:calc(100% - 8.5rem);}
.tabelle.links_min_7_5rem .field_label + .field_item {width:calc(100% - 9rem);}
.tabelle.links_min_8rem .field_label + .field_item {width:calc(100% - 9.5rem);}
.tabelle.links_min_10rem .field_label + .field_item {width:calc(100% - 11.5rem);}
.tabelle.links_min_12rem .field_label + .field_item {width:calc(100% - 13.5rem);}
.tabelle.links_min_13rem .field_label + .field_item {width:calc(100% - 14.5rem);}

body:not(.admin) main ol, body:not(.admin) main :not(.angebotsmenu) ul {list-style-position:outside;/* Ausgleich outside */ margin-left:2rem;margin-bottom:2rem;}
body:not(.admin) main ol li, body:not(.admin) main :not(.angebotsmenu) ul li {
  padding-left:1rem;
  margin-top:0.3rem;
}
body:not(.admin) main ul:not(.angebotsmenu) > li::marker {content:'‒';}
body:not(.admin) main ul:not(.angebotsmenu) > li > ul > li::marker {content:'•';}
body:not(.admin) main ul:not(.angebotsmenu) > li > ul > li ul > li::marker {content:'-';}
body:not(.admin) main .ohne-Marker > ul, body:not(.admin) main ul.ohne-Marker, body:not(.admin) main :not(.angebotsmenu) nav ul[class*="pager"] li {padding-left:0 !important; margin-left:0 !important;}
body:not(.admin) main .ohne-Marker > ul li::marker, body:not(.admin) main ul.ohne-Marker li::marker {content:'' !important;}
/* body.angebot main #ausstattung ul li::marker {content:'\2713';} das gleiche wie: */
body.angebot main #ausstattung ul li::marker {content:'✓';}
body.angebot main #objekt .kekshinweis ul li:first-of-type::marker {content:'\f121';font-family:"Font Awesome 5 Free";font-weight:900;}
body.angebot main #objekt .kekshinweis ul li:last-of-type::marker {content:'\f564';font-family:"Font Awesome 5 Free";font-weight:900;}
body:not(.admin) main .pfeil ul > li::marker, body:not(.admin) main ul.pfeil > li::marker {content:'→';}
body:not(.admin) main .pfeil ul ul > li, body:not(.admin) main ul.pfeil ul ul > li {content:'';}

nav.pager, nav ul[class*="pager"] {text-align:center;}
nav ul[class*="pager"] {
  display:flex;
  flex-direction:row;
  justify-item: center;
  gap: 4rem;
}


nav ul[class*="pager"] li::marker {
  content: '' !important;;
}

main nav ul[class*="pager"] {list-style-type:none; margin-left:0;
}

/* alt */

body:not(.admin) main nav.pager ul {list-style-type:none; margin-left:0;}
nav.pager ul li, .hauptanzeigebereich > .mittig nav.pager ul li a {display:inline;}
nav.pager ul li::after {
  padding-left:1rem;
  padding-right:1rem;
}
nav.pager li a {
  padding-left:1rem;
  padding-right:1rem;
}
/* *** */
.hauptanzeigebereich .mittig nav.pager ul li:last-child::after {padding:0;}

.person ul {
  margin-top:0;
}

nav.breadcrumbs ol {
  list-style-type:none; 
  margin-left:0;
}
nav.breadcrumbs li, 
nav.breadcrumbs li a {
  display:inline;
}
nav.breadcrumbs li::after {
  content:'>';
  padding-left:1rem;
  padding-right:1rem;
}
nav.breadcrumbs li:last-of-type::after {
  padding:0;
  content:'';
}

.ui-dialog {
  padding: 1rem;
  border-width: 1px;
  border-style: solid;
}
.filter-wrapper {
  border-color:transparent;
}

/* ************** Größe Bilder ****************************** */

figure {
  border-width:var(--border-width);
  border-style:solid;
  max-width:100%;
  display:inline-block;
}
body.referenzen #block-kundenstimmen figure {
  border-width:0px;
  box-shadow: none;
  border-style:none
}
body.referenzen #block-kundenstimmen figure img {
  border-width:1px;
  border-style:solid;
}

.hintergrund figure div{ 
  background-color:transparent;
}
.hintergrund figure figcaption { 
  display:none;
  visibility:hidden;
  position:absolute;
  top:0;
  left:-999rem;
  height:1px;width:1px;
}
/* figure > span entsteht m.H.v. Javascript (intense.min.js) aus figure > a siehe html.html.twig-Template */
figure > a, figure > span {
  /* width:100%; */ /* wenn a um img wird sonst Platz nicht ausgenutzt */
 /* wenn nötig, das hier nehmen */
/*  width:auto; */ /* scheint ohne zu gehen, wenn in nicht zugeschnittenen Bildern keine Höhen, nur Breitenangabe ist und CT schaut, dass Bilder alle im gleichen Seitenverhältnis zugeschnitten sind */
}
figure img, main object {
/*
  width:100%;
  width:auto;
*/
  display:inline-block;
}

/* **************** Bildgröße *************** */


@media only screen and (max-width:40em) {

  .hauptbild_im_angebot, .bauprojekt, .vermittlungsobjekt, .bild_im_text {
    max-width:100% !important;
    min-width:0 !important;
    width:100% !important;
    height:auto !important;
    float:none;
    clear:both;
  }
  .bauprojekt {
    margin-bottom:4rem;
  }
	
  .angebot .margin_float_right, .angebot .margin_float_left, .angebot .margin_float_left_unten_1rem, .angebot .margin_float_right_unten_1rem {
    margin-left:0 !important;
    margin-right:0 !important;
  }

}

/* ********************  Bild- und sekundäre Tabbeschriftung ******************** */

body.angebot > figure > figcaption, .bildbeschriftung div  {
width:100%; position:relative;
}
/* hier gefunden: https://de.switch-case.com/65295647 */
/*Original rechts oben: clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%); */
/* letzter Selektor für JS-Fotovergrößerung mit intense.js */
body:not(.admin):not(.edit):not(.referenzen) .hauptanzeigebereich main figcaption,
body:not(.admin):not(.edit) .hauptanzeigebereich main .bildbeschriftung_text,
body.angebot > figure > figcaption > h1  {
  position:absolute;
  bottom:0.7rem;
/*  left:auto;*/
  right:0;
  display:block;
/* nicht nötig, Zuschnitt auf Breite mit clip, right:0; richtet rechts aus
  text-align:right;
*/
  clip-path:polygon(1.5rem 0, 100% 0, 100% 100%, 0 100%);
  padding: 0.3rem 0.5rem 0.3rem 2rem;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  font-size: 0.8rem;
  font-style:normal;
  font-family: var(--text-font-family-bildbeschriftung), 'Kite One', 'Open Sans Condensed', sans-serif !important;
  text-transform: none; /* aufheben von label uppercase*/
  letter-spacing: inherit;
  line-height: 1.3;
}

/* important für intense.js-Bildbeschriftung im Tag selber! */
/* in intense.css */
/*
body.angebot > figure > figcaption > h1  {
  width:auto; 
  font-size:2rem !important;padding-left:4rem !important; line-height:4rem !important;padding-right:2rem !important;
}
*/
body:not(.admin):not(.edit) .hauptanzeigebereich main .bildbeschriftung_text small {
  font-weight:900;
  line-height: 1.3;
}
/* aus Fluss weil sonst im Rahmen drin, der wiederum statt img nötig ist für animation! */
body:not(.admin):not(.edit).referenzen .hauptanzeigebereich main figcaption {
  width:auto;
  right:-1px; /* Rahmen auf Rahmen */
  text-align: center;
  white-space:nowrap;
  position:absolute;
  white-space:nowrap;
  letter-spacing:0px;
  padding:0.2rem 0.8rem;
  border-width:1px;
  border-style:solid;
  font-family: var(--text-font-family-bildbeschriftung), 'Kite One', 'Open Sans Condensed', sans-serif;
  font-size: 70%;
  line-height: 1.3;
  }
body:not(.admin):not(.edit).referenzen .hauptanzeigebereich main [id*="kundenstimmen"] figcaption {
  position:static;
  width:auto;
  max-width:100%;
  white-space:normal;
}
.ohne_beschriftung figcaption {
  display:block;
  width:1px;
  heigh:1px;
  position:absolute;
  top:0;
  left:-999rem;
  visibility:hidden;
}


.polaroid {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

.rotate_right {
  float: left;
  transform: rotate(7deg);
}

.rotate_left {
  float: left;
  transform: rotate(-8deg);
}



/* ********************** Infosymbol ********************** */

/* mit Fragezeichen, bei Einblendung der Bildunterschrift*/
/*
.bildbeschriftung_mit_info figure::before {
  content: "ⓘ";
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: white;
  color: black;
  opacity: .7;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  transition: all 1s ease;
}

.bildbeschriftung_mit_info figure:hover::before {
  opacity: 0;
}
*/
/* ******************************************* Hintergrundbilder ************************************************* */

.hintergrund {
  position:relative;
  border-style: solid;
  border-width:1px;
}
.hintergrund.position_absolute {
  position:absolute;
}
.hintergrund.position_absolute_top_left,
.hintergrund .position_absolute_top_left,
.hintergrund.position_absolute_left_top,
.hintergrund .position_absolute_left_top {
  position:absolute; top:0;left:0;
}

.hintergrund.position_absolute_top_right,
.hintergrund .position_absolute_top_right,
.hintergrund.position_absolute_right_top,
.hintergrund .position_absolute_right_top {
  position:absolute; top:0;right:0;
}

.hintergrund.position_absolute_bottom_left,
.hintergrund .position_absolute_bottom_left,
.hintergrund.position_absolute_left_bottom,
.hintergrund .position_absolute_left_bottom {
  position:absolute; bottom:0;left:0;

}
.hintergrund.position_absolute_bottom_right,
.hintergrund .position_absolute_bottom_right,
.hintergrund.position_absolute_right_bottom,
.hintergrund .position_absolute_right_bottom {
  position:absolute; bottom:0;right:0;
}
.hintergrund figure {
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

.hintergrund figure div {
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-position: center center;
  background-size: cover;
}

/* wenn Bilder unterschiedliche Formaiterungen brauchen, bekommen sie ein gemeinsames DIV .hintergrund, dann sind die Klassen aber geschachtelt! */

.hintergrund .right_bottom figure div,
.hintergrund.right_bottom figure div,
.hintergrund .bottom_right figure div,
.hintergrund.bottom_right figure div {
  background-position: right bottom;
}
.hintergrund.right_top figure div,
.hintergrund .right_top figure div,
.hintergrund.top_right figure div,
.hintergrund .top_right figure div {
  background-position: right top;
}
.hintergrund.left_bottom figure div,
.hintergrund .left_bottom figure div,
.hintergrund.bottom_left figure div,
.hintergrund .bottom_left figure div {
  background-position: left bottom;
}
.hintergrund.left_top figure div,
.hintergrund .left_top figure div,
.hintergrund.top_left figure div,
.hintergrund .top_left figure div {
  background-position: left top;
}
.hintergrund .cover figure div,
.hintergrund.cover figure div {
  background-size: cover;
}
.hintergrund.width_100 figure div,
.hintergrund .width_100 figure div {
  background-size: 100% auto;
}
.hintergrund.height_100 figure div,
.hintergrund .height_100 figure div {
  background-size: auto 100%;
}
.hintergrund.height_70 figure div,
.hintergrund .height_70 figure div {
  background-size: auto 70%;
}
.hintergrund.height_65 figure div,
.hintergrund .height_65 figure div {
  background-size: auto 65%;
}
.hintergrund.height_60 figure div,
.hintergrund .height_60 figure div {
  background-size: auto 60%;
}
.hintergrund.height_50 figure div,
.hintergrund .height_50 figure div {
  background-size: auto 50%;
}
.ohne_schatten figure,
.ohne_schatten figure img,
.hintergrund.no_shadow figure,
.hintergrund.no_shadow,
.hintergrund .no_shadow {
  box-shadow: none;
}
.ohne_rahmen figure,
.ohne_rahmen figure img,
.no_border figure,
.no_border figure img,
.hintergrund.no_border figure,
.hintergrund.no_border,
.hintergrund .no_border {
  border: 0;
}
.ohne_hintergrund figure,
.ohne_hintergrund figure img,
.hintergrund.no_bgcolor figure,
.hintergrund.no_bgcolor,
.hintergrund .no_bgcolor {
  background-color:transparent;
}


blockquote {padding: 1rem;/* margin-left: 2.9375rem;*/ margin-left:0;margin-right: 0;border-left: 5px solid;}
blockquote p {margin-top:1.125rem;margin-bottom: 1.125rem;font-size: inherit; line-height: inherit;font-weight: normal;}
blockquote p:first-child {margin-top: 0;}

blockquote p:first-child::before {
  font-family: FontAwesome, sans-serif;
  content: "ï„^m";
  padding: 0 5px 0 0;
  padding: 0 0.3125rem 0 0;
  margin: 0;
  text-align: left;
  width: 18px;
  width: 1.125rem;
  display: none;
}

.fa-loaded blockquote p:first-child::before {
  display: inline-block;
}
blockquote p:last-child {
  margin-bottom: 0;
}

*[hidden], .ausgeblendet, .visually-hidden {
  display: block; /* kein pos abs , warum auch immer - geht hier anders als gedacht */
  height: 1px;
  width: 1px;
  overflow: hidden;
  visibility: hidden;
  position:absolute;
  top:0;
  left:0;
  opacity: 0;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
}
[class*="address-line2"].form-no-label > label.visually-hidden {
  display:unset;
  height: unset;
  width: unset;
  overflow:visible;
  visibility: visible;
  opacity: initial;
  top: unset;
  left: unset;
  position:unset;
  display: unset;
  clip:unset;
}
.skip-link {
  opacity: 0;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  display:block;
  position: absolute;
  top:0;
  left:0;
  width: 0;
  height:1px;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
/* Anchor */
a[name] {
  display:block;
  height:1px;
  width:100%;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
}
a[name]:target {
  padding-top:2rem;
  display:block;
  visibility:visible;
}

/* zurück-Link mit Icon */
.hauptanzeigebereich main a.zurueck_link {
  margin-top:2rem;
}
.hauptanzeigebereich main a.zurueck_link::before {
  display:inline-block;
  content:'\f359';
  font-family: "Font Awesome 5 Free";
  padding-right:0.3rem;
}

/* ********************** Formulare ******************** */

.form-item-honeypot {
  display:none;
  position:absolute; top:0; left: -9999rem;
}

.field--type-list-string .fieldset-wrapper, 
.field--type-boolean {
  clear:both;
}

body:not(user-logged-in) .tabelle .not_logged_in_display_none input, 
body:not(user-logged-in) .tabelle .not_logged_in_display_none label {
  display:none;
} 

.node.edit .tabelle {
  width:100%;
}

.tabelle label {float:left;margin-right:1rem;}

.tabelle.links_min_3rem label {min-width:3rem;}
.tabelle.links_min_3_5rem label {min-width:3.5rem;}
.tabelle.links_min_4rem label {min-width:4rem;}
.tabelle.links_min_5rem label {min-width:5rem;}
.tabelle.links_min_7rem label {min-width:7rem;}
.tabelle.links_min_7_5rem label {min-width:7.5rem;}
.tabelle.links_min_8rem label {min-width:8rem;}
.tabelle.links_min_10rem label {min-width:10rem;}
.tabelle.links_min_12rem label {min-width:12rem;}
.tabelle.links_min_14rem label {min-width:14rem;}

.tabelle select,
.tabelle textarea,
.tabelle input {
  width: 100%;
}

[class*="links_min"].tabelle input[type="radio"],
[class*="links_min"].tabelle input[type="checkbox"] {
  width:auto;
}

/* margin-right:1rem + Spielraum -> 1,5 rem dazu */

[class*="links_min"].tabelle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
[class*="links_min"].tabelle textarea,
[class*="links_min"].tabelle select {
  width: 55%; /* alte Browser */
  min-width:14rem !important; /* sonst lieber in neue Zeile */
  max-width:22rem; /* sonst lieber in neue Zeile */
  width:calc(100% - 1.5rem);
}
.angebot.edit [class*="links_min"].tabelle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.angebot.edit [class*="links_min"].tabelle textarea,
.angebot.edit [class*="links_min"].tabelle select {
  max-width:35rem;
}
@media only screen and (min-width:40em){
  input.switch + label div {
    min-width: 19rem;
  }

  .node.edit.angebot .js-filter-list {
    display:none;
  }

}
::-webkit-validation-bubble{
  z-index: 100000;
}


/* ************************ Medienbibliothek ************************** */
section.medienelement:first-of-type {
  clear:both;
}
section.medienelement {
  text-align:left;
  width:250px;
  float:left;
  display:block;
  position:relative;
  font-size:80%;
  border-width:1px;
  border-style:solid;
}
section.medienelement header {
  white-space:nowrap; 
  overflow:hidden;
  text-overflow: ellipsis;
  width:100%;
  font-size:80%;
  display:block;
  font-variant:small-caps;
  padding:0.3em 0.5em;
}
section.medienelement article {
  height:300px;
  background-color: rgba(150,150,150,0.5);
  display:block;
  text-align:center;
}
section.medienelement article figure,
section.medienelement article audio,
section.medienelement article video,
section.medienelement article object {
  aheight:230px;
  display:block;
  atext-align:center;
}
section.medienelement article a {
  width:100%;
  white-space:nowrap; 
  overflow:hidden;
  text-overflow: ellipsis;
  padding:0.3em 0.5em;
}
section.medienelement article svg,
section.medienelement article img {
  object-position: contain;
  object-fit:center center;
  display:inline;
}
/* bei Darstellung der eigentlichen Bild-Icons */
section.medienelement article i.fa.icon {
  aheight:100%; /* von figure */
  awidth:100%;
  aobject-fit:contain;
  aobject-position:center center;
  afont-size:150px;
}
section.medienelement article i.fa.ersatzicon {
  aheight:100%; /* von figure */
  awidth:100%;
  aobject-fit:contain;
  aobject-position:center center;
  font-size:150px;
}
section.medienelement figcaption {
  padding:0.3em 0.5em;
}
section.medienelement footer {
  padding:0.3em 0 0 0;
  letter-spacing: 10px;
  display:block;
  width:100%;
}
/* Status-Symbol hochholen:*/
section.medienelement footer i.fa {
  padding:0.3em 0.5em;
  display:inline-block;
}

section.medienelement:last-of-type ~ input[type="submit"] {
  clear:both;
  margin-top:2rem;
  margin-bottom:2rem;
}

/* Anmeldeformular - Zentrieren, braucht html, body 100% height / width und Padding / Margin 0*/

body.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* .holy-grail-action hat eigentlich flex-direction row */
body.login  .hauptanzeigebereich {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

#user-login-form label {
  width: 6.8rem;
}
#user-login-form input {
  width: 10rem;
}

/* ***************** Eingabeformulare nur für Admin ***************************** */


.not-logged-in .entity-meta,
.not-logged-in .feld_nur_admin, 
.not-logged-in .not_logged_in_display_none {
  display:none;
}
.user-logged-in .nur_text_fuer_kunde {
  display:none;
}