/* Danke für die Farbbeispiele mit Variablen an: https://stackoverflow.com/questions/54907120/text-shadow-with-css-variable  */

/* #d184c3 = rgb(29, 132, 195) */

div[role="contentinfo"] a:focus,
main .diashow article a:focus {
  outline: none;
}

/*
.angebot .hauptanzeigebereich main a[href^="http"],
.media .hauptanzeigebereich main a,
*/
em,
.link_markiert a,
.tabelle .field_item a,
.label_markiert > .field_label,
.tabelle.label_markiert .field_label,
.feldinhalt_markiert a, 
.feldinhalt_markiert .field_item,
.summary,
.description a,
form fieldset a,
.kopfbereich .mittig h1, main h1, main h2, main h3,
.hauptanzeigebereich main a[href^="http"],
.markiert,
main dt,
thead tr,
.liste-mit-wechselnder-farbe li:nth-child(2n+1),
[class*="node-add-angebot"] .field--type-image a,
.edit .field--type-image a,
[class*="datenschutz"] main a,
[class*="admin-structure"] table h3 {
  color:var(--highlight-color);
}
.feldbeschriftung_hervorheben .label_nicht_markiert > .field_label {
  color:inherit;
}

.description a,
summary:hover,
summary:focus,
details[open] > summary,
.tabelle .field_item a:hover,
.hauptanzeigebereich main p > a:hover {
  color: #004f80; /* dunkleres Blau */
}
main code {
  background-color: rgb(var(--hellgrau-ccc));
}
main pre code {
  background:#00001e;
  color:white;
}
/* Site-Name und Site-Slogan in logo.css */

/* *********** Table Verwaltungsseiten ***************** */

table.no-highlight tr.selected td {
  background: transparent;
}

/* ************************************ vertikale Tabs ****************************************** */
body:not(.admin) thead {
  border-color: rgba(29, 132, 195, 0.3);
}

body:not(.admin) tbody, body:not(.admin) .vertical-tabs__panes {
  border-color: rgba(29, 132, 195, 0.3);
}

.admin tbody tr:hover,
.admin tbody tr:focus {
  background: #f7fcff;
}

.admin thead th {
  border-color: #bfbfba;
  background: #f5f5f2;
}

.admin tr {
  border-color: #e6e4df;
}
.admin tbody tr.color-success {
  color: #325e1c;
  background-color: #f3faef;
}
.admin tbody tr.color-error {
  color: #a51b00;
  background-color: #fcf4f2;
}
.admin tbody tr.color-warning:hover,
.admin tbody tr.color-warning:focus {
  background: #fdf8ed;
}
.admin tbody tr.color-error:hover,
.admin tbody tr.color-error:focus {
  background: #fcf4f2;
}
.admin table.no-highlight tr.selected td {
  background: transparent;
}





.admin th.is-active > a {
  color: #004875;
}

.admin th.is-active > a:after {
  border-bottom-color: #004875;
}
.admin th > a:hover,
.admin th > a:focus,
.admin th.is-active > a:hover,
.admin th.is-active > a:focus {
  color: #008ee6;
}
.admin th > a:hover:after,
.admin th > a:focus:after,
.admin th.is-active > a:hover:after,
.admin th.is-active > a:focus:after {
  border-bottom-color: #008ee6;
}

/* *********** Fehlermeldungen, Statusmeldungen und Startseite ***************** */

.dblog-error .icon, 
.dblog-critical .icon, 
.dblog-alert .icon, 
.dblog-emergency .icon {
    background-image: url(../images/error.svg);
}
.dblog-warning .icon {
    background-image: url(../images/warning.svg);
}
/* oben die Statusmeldungen z.B. bei /admin/modules und /admin/config */
.messages--status {
  color: #325e1c;
  /* war:
  border-color: #c9e1bd #c9e1bd #c9e1bd transparent;
  */
  /* von mir: */
  border-color: #c9e1bd;
  background-color: #f3faef;
  background-image: url(../images/check.svg);
  /* nötig? wenn .messages box-shadow:none? */
  box-shadow: -8px 0 0 #77b259;
}
.messages--warning {
  border-color: #e29700;
  background-image: url(../images/warning.svg);
  color: #734c00;
}
.messages--error {
  border-color: #e32700;
  color: #a51b00;
  background-image: url(../images/error.svg);
}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8e999e+0,00001e+100;Grey+3D+%231 */

@media only screen {
  [id*="info-tab-navigation"] a:focus,
  .skip-link,
  div[aria-label="Statusmeldung"], 
  div[role="contentinfo"],
  main .diashow article .field_item {
    color: #00001e;
    border-color: #00001e;
    background-color:white;
/*
    background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(7%, #f0f0f0), color-stop(22%, #f0f0f0), color-stop(100%, #ffffff));
    background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
*/
    background-image: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px #00001e;
  }

  div[role="alert"] {
    outline: 0;
    color: #a51b00;
    border-color:#a51b00;
    background: #ffffff;
/*
    background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(7%, #f0f0f0), color-stop(22%, #f0f0f0), color-stop(100%, #ffffff));
    background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
    background: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
*/
    background: linear-gradient(#ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px 1px #e62600;
  }
  body:not([class*="kursunterlagen"]) .kopfbereich aside.links,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich aside.links, 
  body:not([class*="kursunterlagen"]) .fussbereich aside.links {
    background-position: center right;
    background-color: #3f576f;/* war: #2d3a4b */
/*
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f576f', endColorstr='#00001e',GradientType=1 );
    background: -moz-linear-gradient(left, #3f576f 0%, #00001e 100%);
    background: -webkit-linear-gradient(left, #3f576f 0%, #00001e 100%);
*/
    background: linear-gradient(to right, #3f576f 0%, #00001e 100%);
    box-shadow: 1px 3px 3px #00001e;
  }

  .angebotsmenu,
  body:not([class*="kursunterlagen"]) .kopfbereich aside.links > .block,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich aside.links > .block,
  body:not([class*="kursunterlagen"]) .fussbereich aside.links > .block {
    box-shadow: 1px 1px 3px #00001e;
    background-color: #00001e;
  }
  body:not([class*="kursunterlagen"]) .kopfbereich > aside.links > .block > ul,
  body:not([class*="kursunterlagen"]) .kopfbereich > aside.links > .block > form,
  body:not([class*="kursunterlagen"]) .kopfbereich > aside.links > .block > div,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich > aside.links > .block > ul,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich > aside.links > .block > form,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich > aside.links > .block > div,
  body:not([class*="kursunterlagen"]) .fussbereich aside.links > .block > * {
    box-shadow: 1px 1px 3px #00001e;
    border-color: #00001e;
  }
/*
  [class*="kursunterlagen"] .kopfbereich > aside.links > .block > ul,
  [class*="kursunterlagen"] .kopfbereich > aside.links > .block > form,
  [class*="kursunterlagen"] .kopfbereich > aside.links > .block > div,
  [class*="kursunterlagen"] .hauptanzeigebereich > aside.links > block > ul,
  [class*="kursunterlagen"] .hauptanzeigebereich > aside.links > .block > form,
  [class*="kursunterlagen"] .hauptanzeigebereich > aside.links > .block > div,
  [class*="kursunterlagen"] .fussbereich aside.links > .block > * {
    .box-shadow: none !important;
    .border-color: transparent !important;
  }
*/
  .angebotsmenu div {
    border-left-color:white;
    border-top-color:white;
    border-bottom-color:white;
    border-right-color:white;
    box-shadow: 1px 1px 3px #00001e;
  }
  

  body:not([class*="kursunterlagen"]) .kopfbereich > aside.links > .block > div {
    background-color: #3f576f;/* war: #2d3a4b */
    background-position: center right;
    background: -o-linear-gradient(left, #3f576f 0%, #00001e 100%);
    background: -ms-linear-gradient(left, #3f576f 0%, #00001e 100%);
    background: -moz-linear-gradient(left, #3f576f 0%, #00001e 100%);
    background: -webkit-linear-gradient(left, #3f576f 0%, #00001e 100%);
    background: linear-gradient(to right, #3f576f 0%, #00001e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f576f', endColorstr='#00001e',GradientType=1 );
  }
  [class*="kursunterlagen"] .kopfbereich > aside.links > .block > ul,
  .hauptanzeigebereich > aside.links > section.block > form,
  .hauptanzeigebereich > aside.links > nav.block > ul,
  .fussbereich > aside.links > .block > form {
    background-color:#eee;
  }
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich > aside.links > section.block > form,
  body:not([class*="kursunterlagen"]) .hauptanzeigebereich > aside.links > nav.block > ul,
  body:not([class*="kursunterlagen"]) .fussbereich > aside.links > .block > form {
    background-image: url("../design/Hintergrund_Menu.png");
  }
}
/* ********************************* allgemeiner Seiteninhalt *********************************************** */

main .hintergrund {
  border-color: #00001e;
  box-shadow: 1px 1px 3px #00001e;
}

/* Sektionen-Divider: Originalidee von: https://blog.avada.io/css/dividers/ */

/*hsl(0, 0%, 50%) = #020202*/
/*hsl(0, 0%, 90%) = #030303*/
.trennstrich_davor::before,
.trennstrich_danach::after,
.auser-logged-in small.site-slogan::before,
.auser-logged-in small.site-slogan ::after,
body.angebot #objekt > article:not(#wohnungen)::after {
  background-color: #555;
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, hsl(0, 0%, 90%)), color-stop(50%, hsl(0, 0%, 50%)), color-stop(100%, hsl(0, 0%, 90%)));
  background-image: -ms-linear-gradient(left, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 50%) 50%, hsl(0, 0%, 90%) 100%);
  background-image: -o-linear-gradient(left, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 50%) 50%, hsl(0, 0%, 90%) 100%);
  background-image: linear-gradient(90deg, hsl(0, 0%, 90%), hsl(0, 0%, 50%), hsl(0, 0%, 90%));
  clear:both;
}
.user-logged-in small.site-slogan::before,
.user-logged-in small.site-slogan ::after {
  background-color: #00001e;
/*
  background-image: -moz-linear-gradient(top, #00001e 0%, #f0f0f0 7%, #f0f0f0 22%, #00001e 100%);
  background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, hsl(0, 0%, 90%)), color-stop(50%, hsl(0, 0%, 50%)), color-stop(100%, hsl(0, 0%, 90%)));
  background-image: -ms-linear-gradient(left, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 50%) 50%, hsl(0, 0%, 90%) 100%);
  background-image: -o-linear-gradient(left, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 50%) 50%, hsl(0, 0%, 90%) 100%);
*/
  background-image: linear-gradient(90deg, hsl(0, 0%, 90%), hsl(0, 0%, 50%), hsl(0, 0%, 90%));
  clear:both;
}

figure, 
/* main figure div, *//*stört in Mediengalerie */
object {
  border-color: #00001e;
  box-shadow: 1px 1px 3px #00001e;
}

/*
figure:has(> a:focus),
object:has(> a:focus) {
  border-color:#00001e;
  box-shadow: 1px 1px 3px #00001e;
}
*/
body.referenzen #block-kundenstimmen figure {
  border-shadow:none;
}
body.referenzen #block-kundenstimmen figure img {
  box-shadow: 1px 1px 3px #00001e;
  border-color:#00001e;
}

.Einzelbild_im_Angebot img {
  background-color: white;
}
body:not(.admin):not(.edit) .hauptanzeigebereich main .bildbeschriftung_text,
body:not(.admin):not(.edit):not(.referenzen) .hauptanzeigebereich main figcaption,
body.angebot > figure > figcaption > h1  {
  background-color: rgba(150, 150, 150, 0.5);
  color:#ffffe5;
  color:white;
  border-top-color: white;
  border-bottom-color: white;
  text-shadow: 1px 1px 3px black;
}
/* noch ggf. ergänzen - Bildbeschriftung unter Fotos Referenzen Bauprojekte */
body:not(.admin):not(.edit).referenzen .hauptanzeigebereich main figcaption {
}
body:not(.admin):not(.edit):not(.referenzen) .hauptanzeigebereich main .bildbeschriftung_invertieren figcaption {
  background-color: rgba(150, 150, 150, 0.5);
  color:black;
  border-top-color: black;
  border-bottom-color: black;
  text-shadow: 1px 1px 3px white;
}
body:not(.admin):not(.edit) .hauptanzeigebereich main .bildbeschriftung_text small {
  color:#00001e;
  color:black;
  text-shadow: 0px 0px 3px rgba(150,150,150,0.5);
}
body:not(.admin):not(.edit).referenzen .hauptanzeigebereich main figcaption {
  color:#e4e4e4;
  background-color:#666;
  border-color:#e4e4e4;
  box-shadow:1px 1px 3px #666;
}
/* ********************************* Farben Menü *********************************************** */
/* aside nicht in .color-preview */

aside > nav li a {
  /* Kontrolle! */
  border-top-color: #eee;  
}

aside > nav.bunte_icons li a {
  color:#00001e;
}
aside > nav li a:hover,
aside > nav li a:hover,
aside > nav li a.active,
aside > nav li a.is-active,
aside > nav li a:active,
aside > nav li:hover > a,
aside > nav li:hover > span,
aside > nav li:hover > a,
aside > nav li:hover > span,
aside > nav li a.active {
  color: #1d84c3;
}

aside > nav li:hover > a,
aside > nav li:hover > span,
aside > nav li a:active,
aside > nav li a:active::before,
aside > nav li a:active::after,
aside > nav li a.active,
aside > nav li a.active::before,
aside > nav li a.active::after,
aside > nav li ul {
  /* neu von oben: */
  border-color: #1d84c3;
}
aside > nav li ul::before {
  border-right-color: #1d84c3;
}
.angebotsmenu div,
/* a.auf i,*/
aside > nav.bunte_icons .ebene_1 > li > a > i,
.angebotsmenu li i::before {
  /* alt: background-image: radial-gradient(ellipse at center, #3f576f 0%, #00001e 100%);*/
  color:white;
  border-color: white;
  background-position: center center;
  background-color: #00001e;
  background-image: -webkit-radial-gradient(#3f576f, #00001e);
  background-image: -moz-radial-gradient(#3f576f, #00001e);
  background-image: radial-gradient(#3f576f, #00001e);
}
a.auf i {
  color:white;
}
aside > nav.bunte_icons .ebene_1 > li:hover > a > i,
aside > nav.bunte_icons .ebene_1 > li > a:hover > i {
  color:#1d84c3;
  background-color: #888;
  background-image: -webkit-radial-gradient(#eee, #888);
  background-image: -moz-radial-gradient(#eee, #888);
  background-image: radial-gradient(#eee, #888);
}
aside > nav.bunte_icons .ebene_1 > li > a:focus > i {
  color:white;
  background-color: #888;
  background-image: -webkit-radial-gradient(#eee, #888);
  background-image: -moz-radial-gradient(#eee, #888);
  background-image: radial-gradient(#eee, #888);
}

aside > nav li ul {
  border: 1px solid #00001e;
  /* Schatten nur Rahmen: */ /* box-shadow: 1px 1px 3px #00001e; */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(7%, #f0f0f0), color-stop(22%, #f0f0f0), color-stop(100%, #ffffff));
  background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  background: linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px #00001e;
}

/* ************************ Visitenkarte in _visitenkarte.scss ********************************** */


details {
  /* war: 
  border-color: #bfbfbf;
  background-color: #fcfcfa;
  evtl:
  border-color: #004f80;
  */
  border-color: #00001e;
}

summary {
  /* war von seven-Theme:
  color: #0074bd;
  oben:
  color: #1d84c3;
  */
  text-shadow: 0 1px 0 white;
}
summary > .summary {
  /* war:
  color: #595959;
  */
  /* dann lieber die body-Farbe: */
  color:#555;
}
/* ************* Formulare ************** */
fieldset { 
  border-color: #1d84c3;
}

legend {
  color:#1d84c3;
}

label {
  color: #888;
}

label.form-required,
input[type="radio"] + label,
input[type="checkbox"] + label {
  color: #666;
}
.kopfbereich main .horizontale_tabs:first-of-type::after{
  display:block;
  clear:both;
  width:100%;
  content:'';
  height:0.5rem;
  margin-bottom:0.5rem;
  border-width:0 0 1px 0;
  border-style:dotted;
  border-color:#666;
}
/* ************************************** Eingabefelder, Buttons und Tabs ************ */ 
/* Danke an: http://unicorn-ui.com/buttons/builder                                   * */
/* *********************************************************************************** */

/* ********************************* Select-Styling *************************************** */
/* * Danke an: https://www.filamentgroup.com/lab/select-css.html                            */
/* * gefunden: https://css-tricks.com/styling-a-select-like-its-2019/                       */
/* * Dropdown-Dreieck ist fa-caret-down, heruntergeladen als svg von fontawesome.com/icons/ */
/* * konvertiert zu inline mit https://davidgierth.de/tools/svg-to-data-uri/                */
/* ***************************************************************************************** */

/* select transparent machen und das dahinterliegende Feld-div für die Farbgebung nutzen: */

/* Text, Rahmen und Schatten */
.horizontale_tabs > ul > li,
textarea, 
select,
input, 
button, .button a, a.button, .js-form-type-textarea iframe {
  color:inherit;
  border-color: #f9fcef;
  /* text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);*/
  text-shadow: var(--input-text-shadow-x) var(--input-text-shadow-y) var(--input-text-shadow-blur) var(--input-text-shadow-color);
  box-shadow: rgba(155, 155, 155, 0.3) 0px 0px 0px 1px, rgba(255, 255, 255, 0.9) 1px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 2px;
}

select {
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance: none;
  padding-right:2rem; /* für Pfeil */
  background-color: #ffffff;
  /* Dreieck und senkrechten Strich selbst kreiieren */
  background-image: 
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc),
    -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: 
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(7%, #f0f0f0), color-stop(22%, #f0f0f0), color-stop(100%, #ffffff));
  background-image: 
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc),
    -o-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: 
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc),
    -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc),
    linear-gradient(#ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  background-position:
    calc(100% - 1.3rem) calc(0.8em),
    calc(100% - 0.8rem) calc(0.8em),
    calc(100% - 2.5em) 0em,
    center center;
  background-size:
    0.5rem 0.5rem, /* war 5px 5px */
    0.5em 0.5rem, /* war 5px 5px */
    1px 2em,
    contain;
  background-repeat: no-repeat;
}
select {
  box-shadow: rgba(155, 155, 155, 0.3) 0px 0px 0px 1px, rgba(255, 255, 255, 0.9) 1px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 2px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  color:inherit;
  border-color: #f9fcef;
  background-color: #ffffff;
}

option {
  -moz-appearance:none;
  -webkit-appearance:none; 
  appearance: none;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  color:inherit;
}
option::selected {
  color:white;
  text-shadow:  rgba(155, 155, 155, 0.3) 0px 0px 0px 1px
  background-color:var(--highlight-color);
}
/* Farbverlauf im Hintergrund, auch die Ecke in der horizontalen Tabliste */
textarea, /* select -> s.o. mit Dreick drin */
input:not([id^="edit-palette-"]):not([id^="edit-displays-"]):not([name="input_objekt"]):not([name="input_wohneinheit"]){

  background-color: #ffffff;
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(7%, #f0f0f0), color-stop(22%, #f0f0f0), color-stop(100%, #ffffff));
  background-image: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  background-image: linear-gradient(#ffffff 0%, #f0f0f0 7%, #f0f0f0 22%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}


/* Submit-Button: */
.button a, button, 
input[type="submit"]:not([id^="edit-palette-"]):not([id^="edit-displays-"]):not([name="input_objekt"]) {
  background: -moz-linear-gradient(to bottom, #fbfbfb 1%, #e1e1e1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fbfbfb), color-stop(100%, #e1e1e1));
  background: -webkit-linear-gradient(to bottom, #fbfbfb 1%, #e1e1e1 100%);
  background: -o-linear-gradient(to bottom, #fbfbfb 1%, #e1e1e1 100%);
  background: -ms-linear-gradient(to bottom, #fbfbfb 1%, #e1e1e1 100%);
  background: linear-gradient(to bottom, #fbfbfb, #e1e1e1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e1e1e1',GradientType=0 );
  transition: all 1s ease-in-out 0s;
  outline: 0px none;
}
.admin-actions a.button,
.admin ul.operations li a,
.button a, a.button, button,
.horizontale_tabs > ul > li a {
  background: -moz-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(100%, #eaeaea));
  background: -webkit-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
  background: -o-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
  background: -ms-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
  background: linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}
.user-logged-in details [class$="-remove-button"],
#edit-node-bulk-form--2 input[value="Apply to selected items"],
a#edit-delete.button--danger{

  background-color:#e54028;
  background: -moz-linear-gradient(to bottom, #e8543f 1%, #d9331a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #e8543f), color-stop(100%, #d9331a));
  background: -webkit-linear-gradient(to bottom, #e8543f 1%, #d9331a 100%);
  background: -o-linear-gradient(to bottom, #e8543f 1%, #d9331a 100%);
  background: -ms-linear-gradient(to bottom, #e8543f 1%, #d9331a 100%);
  background:  linear-gradient(#e8543f, #d9331a) repeat scroll 0% 0%;
  border-color: rgb(194, 45, 24);
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5), 0px 0px 8px #c22d18;
  color: white;
  text-shadow: 0px 1px 1px white;
  border-color:#c22d18;
}


/* hover und focus */

textarea:hover,
select:hover,
input:hover {
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
button:hover, button:focus,
a.button:hover, a.button:focus,
.button a:hover, .button a:focus,
textarea:hover, textarea:focus,
select:hover, select:focus,
input:hover, input:focus {
  border-color:var(--highlight-color);
}
button:hover, button:focus,
a.button:hover, a.button:focus,
.button a:hover, .button a:focus,
input[type="submit"]:not([id^="edit-palette-"]):not([id^="edit-displays-"]):not([name="input_objekt"]):hover {
  color: var(--highlight-color);
  border-color: var(--highlight-color);
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 0px 8px var(--highlight-color);
}

.dropbutton li {
  background-color:white;
}
.dropbutton:hover, .dropbutton:focus-within {
  border-color: #1d84c3;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.dropbutton:hover li:hover, .dropbutton li:focus {
  background-color:rgb(29, 132, 195, 0.1); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  background-color: #d9e3ea;
  color: #3d7489;
}


textarea:focus,
select:focus,
input:focus {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px var(--highlight-color);
}

input[type="submit"]:not([id^="edit-palette-"]):not([id^="edit-displays-"]):not([name="input_objekt"]):not([name="input_wohneinheit"]):hover,
input[type="submit"]:not([id^="edit-palette-"]):not([id^="edit-displays-"]):not([name="input_objekt"]):not([name="input_wohneinheit"]):focus {
  color: #666;
  background-color: #eee;
/*
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RjZGNkYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
*/
/*
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc));
  background: -moz-linear-gradient(top, #ffffff, #dcdcdc);
  background: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
*/
  background: linear-gradient(to bottom, #ffffff, #dcdcdc);
}

main input[role="radio"] {
  box-shadow:none;
}

main input[role="radio"],
input[role="radio"][name="input_wohneinheiten"]{

  background-image:none;
  background-color:transparent;
  border-color:transparent;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
  background-image:none;
  background-color:transparent;
  border-color:transparent;
  color:transparent;
}
/* Überschrift! */
main input[role="radio"] + label.horizontal.tab{
  color:var(--highlight-color)
}

@media only screen and (min-width:40rem) {

  main input[role="radio"] {
    color:transparent;
    background-image:none;
    background-color:transparent;
    border:none;
    box-shadow:none;
  }
  /* Browser merkt sich Fokus-Zustand (d.h. welcher Radiobutton von name="input_objekt" aktiviert war) vom letzten Aufruf beim erneuten Laden der Seite ! */


  main input[role="radio"]:focus {
    background-color:#3d7489;
    background-color:var(--tab-button-color-fokus); /* = Farbe des Dreiecks, überlagert */    
    background-color:#3d7489;
    background-color:#1d84c3;
  }
  main input[role="radio"]:checked:focus {
    background-color:var(--highlight-color);
  }

  main input[role="radio"] + label.horizontal.tab{ 
    color: inherit;
    border: 1px solid rgb(var(--input-border-color));
    box-shadow:inset -0px -0px 2px var(--tab-button-color-fokus);  
    box-shadow: rgba(155, 155, 155, 0.3) 0px 0px 0px 1px, rgba(255, 255, 255, 0.9) 1px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 2px;
    background-image: -moz-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(100%, #eaeaea));
    background-image: -webkit-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -o-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -ms-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );*/
    position:relative;
  }
  main input[role="radio"][name="input_wohneinheit"] + label.horizontal.tab{ 
    background-image:none;
    background-color:transparent;
    box-shadow:inherit;
  }

  main input[role="radio"]:not(:checked) + label.horizontal.tab:hover {
    color: rgb(var(--tab-button-color-fokus));
    background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
    background-image:none; /* Farbverlauf aufheben */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  }
  main input[role="radio"]:checked + label.horizontal.tab,
  main input[role="radio"]:checked + label.horizontal.tab:hover,
  main input[role="radio"]:checked:focus + label.horizontal.tab {
    position:relative;
    color: var(--tab-button-color-fokus);
    background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
    background-image:none; /* Farbverlauf aufheben */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
    outline: none; /* die Ecke reicht */
  }
  main input[role="radio"]:focus + label.horizontal.tab::before {
    content:'';
    z-index:5;
    border-top: 1em solid var(--highlight-color));
    border-right: 1em solid transparent;
    position:absolute;
    top:0;
    left:0;
 }  





  /* input = Rautenhintergrund */
  input[role="radio"][name="input_wohneinheit"] {
    color:white;
    background-image: -moz-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(100%, #eaeaea));
    background-image: -webkit-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -o-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: -ms-linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    background-image: linear-gradient(to bottom, #ffffff 1%, #eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
  }


  .angebot input[role="radio"][name="input_wohneinheit"]:checked,
  .angebot input[role="radio"][name="input_wohneinheit"]:focus {
    color:transparent;
    background-image:none;
    background-color:#3f576f;
    background-color:rgb(var(--mittelblau-3f576f));
    border-color:var(--box-border-color);
    border-width:var(--box-border-width);
    border-style:var(--box-border-style);
    box-shadow: var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-color);
 }

  input[role="radio"][name="input_wohneinheit"] + label.horizontal.tab {
    color:var(--grau-555);
    text-shadow:0px 0px 1px white;  
    background-color: rgba(150, 150, 150, 0);
    /* background-image von normalem input! */
    border-top: 1px solid #3d7489;
    border-bottom: 1px solid #3d7489;
    border-top: 1px solid rgb(var(--mittelblau-3f576f));
    border-bottom: 1px solid rgb(var(--mittelblau-3f576f));
  }

  input[role="radio"][name="input_wohneinheit"]:hover + label.horizontal.tab,
  input[role="radio"][name="input_wohneinheit"] + label.horizontal.tab:hover {

    background-color:#d9e3ea; /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
    background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  }
  input[role="radio"][name="input_wohneinheit"]:checked + label.horizontal.tab,
  input[role="radio"][name="input_wohneinheit"]:focus + label.horizontal.tab {
    border-top: 1px solid #3d7489;
    border-bottom: 1px solid #3d7489;
    border-top: 1px solid rgb(var(--mittelblau-3f576f));
    border-bottom: 1px solid rgb(var(--mittelblau-3f576f));
    background-color:#d9e3ea; /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
    background-image: -webkit-radial-gradient(white, #d9e9ea);
    background-image: -moz-radial-gradient(white, #d9e9ea);
    background-image: radial-gradient(white, #d9e9ea);
  }
}
/**/
.admin-actions a.button:hover,
.admin ul.operations li:hover a,
.admin ul.operations li a:hover,
.horizontale_tabs > ul > li:hover,
.horizontale_tabs > ul > li > a:hover,
.horizontale_tabs > ul > li a.is-active {
  color: var(--tab-button-color-fokus);
  outline:none;
  background-image:none; /* Farbverlauf aufheben */
  background-color:rgba(29, 132, 195, 0.1); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  box-shadow:1px 1px 3px #3d7489;
  box-shadow:1px 1px 3px var(--tab-button-color-fokus);  
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
  border-color:var(--highlight-color); /* #1d84c3;*/
}

/* checked = active */
.horizontale_tabs > ul > li a:focus,
.horizontale_tabs > ul > li:focus-within a,
.horizontale_tabs > ul > li a:active,
.admin-actions a.button:focus,
.admin-actions a.button:active,
.admin ul.operations li a:focus,
.admin ul.operations li a:active {
  background-color:rgba(29, 132, 195, 0.1); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  background-color: #d9e3ea; /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  background-image:none; /* Farbverlauf aufheben */
  color: #3d7489;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
  border-color:var(--highlight-color);
  outline:1px dotted #3d7489;
}

input[type="submit"]:active,
button:active,
button.is-active {
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
  background-color:rgb(var(--hellgrau-eee));;
  color:var(--highlight-color);
}
select.error,
textarea.error,
input.error {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px red;
  color: #a51b00;
  border-color: #fdf4f2;
  box-shadow: inset 0 1px 3px rgba 0, 0, 0, 0.05, 0 0 8px 1px #e62600;
}
.ui-dialog {
  background-color: #f0f0f0;
  border-color:var(--box-border-color);
  border-width:var(--box-border-width);
  border-style:var(--box-border-style);
  box-shadow: var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-color);
}

.node--type-angebot #edit-group-angebotsseite fieldset {
  border-color:var(--highlight-color);
}

.node #download .field_item:hover {
  color: var(--tab-button-color-fokus);
  outline:none;
  background-image:none; /* Farbverlauf aufheben */
  background-color:var(--tab-button-background-color-fokus); /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  border-color:var(--highlight-color); /* #1d84c3;*/
}
.pager li.is-active, 
.pager li.is-active a {
  color: var(--highlight-color);
  cursor: default;
}
.pager li:not(.is-active) a:hover {
  cursor: var(--highlight-color);
  cursor: pointer;
}