/* Individual-CSS für das Projekt "50-pflege" */



/* SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */
  /* Reihenfolge für Pseudo-Klassen beachten :link :visited :hover :focus :active */

  a
  {
    color:        #333333;       
  }

  #brot a::before /* Breadcrumbs */
  {
    color:        #F27214;
  }

  /* Icons für Links IM TEXT (also KEINE Linklisten) */
  a.intern::before,
  a.extern::before,
  a.pdf::before,
  a.mail::before,
  a.top::before,
  p.csc-linkToTop a::before,
  a.pagetotop_link::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  a.back::before,
  a.back-link::before,
  .dekobild /* > p:after*/ .enlarge::before    /* Für Bilder im Text mit Bildunterschrift, geändert am 3.2. E.E. */
  {
    color:      #F27214;
  }

  /* Icons für Listen/Linklisten */
  ul li::before,    /* "normaler" Listenpunkt */
  ul li.intern::before,
  ul li.extern::before,
  ul li.pdf::before,
  ul li.punkt::before,
  ul li.mail::before,
  ul li.sprung::before
  {
    color:      #F27214;
  }

  /* Rolli-Icons */
  .rolli-picto i
  {
    color:    #F27214;
  }

header .header-overlay  /* transparenter Hintergrund für Overlay-Logo */
  {
          background:      rgba(255, 255, 255, 0.8);
  }
  
  header .header-overlay-logo.flexbox img {
    width: 215px;
    height: auto;
}

  header .header-overlay-logo.flexbox a:hover img {
    background-color: transparent;
}


 .streifen  /* Trennstreifen zwischen Kopf und Inhalt */
  {
    background-color:  #F27214;
  }

  #navi-spalte  /* Hintergrundfarbe Navi-Spalte */
  {
    background-color:  #f0f7f3;  /* Bei Änderungen nicht vergessen den responsive-Border der Info-Spalte anzupassen! */
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  #inhalts-spalte  /* Hintergrundfarbe Inhalts-Spalte */
  {
    background-color:  #ffffff;
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  #info-spalte  /* Hintergrundfarbe Info-Spalte */
  {
    background-color:  #e1efe8;
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  @media screen and (min-width: 785px) and (max-width: 1024px) {
    #info-spalte
    {  /* WICHTIG: die Farbe MUSS der Hintergrundfarbe der Navi-Spalte entsprechen! */
      border-left: 220px solid #e1efe8;
    }
  }


  /* Navigation 1. Ebene */

  #navi-spalte nav li
  {
    background-color:  #e1efe8;
  }

  #navi-spalte nav li a
  {
    color:    #ffffff;
    color: #588f73;
color: #508269;
    -webkit-hyphens:  none;
    -moz-hyphens:    none;
    -ms-hyphens:    none;
    hyphens:      none;
  }

  #navi-spalte nav a.aktiv,
  #navi-spalte nav li a:hover,
  #navi-spalte nav li a:focus,
  #navi-spalte nav li a:active
  {
    background-color:  #6bad8a;
    color: #fff;
  }

  /* Navigation 2. Ebene */

  #navi-spalte nav li ul li
  {
    background-color:  #f0f7f3;
  }

  #navi-spalte nav li ul li a
  {
    color:    #444;
  }

  #navi-spalte nav li ul a.aktiv,
  #navi-spalte nav li ul li a:hover,
  #navi-spalte nav li ul li a:focus,
  #navi-spalte nav li ul li a:active
  {
    background-color:  #b5d6c4;/*#dde0a2;*/
    color:    #444;
  }

  /* Navigation 3. Ebene */

  #navi-spalte nav li ul li ul li
  {
    background-color:  #E3E8CE;
  }

  #navi-spalte nav li ul li ul li a
  {
    color:    #444;
  }

  #navi-spalte nav li ul li ul a.aktiv,
  #navi-spalte nav li ul li ul li a:hover,
  #navi-spalte nav li ul li ul li a:focus,
  #navi-spalte nav li ul li ul li a:active
  {
    background-color:  #E3E8CE;
  }


  /* Für das Aussehen des Pömpels. Achtung: Werden Größe oder vertical-align geändert, muss auch die Positionierung angepasst werden! */
  #navi-spalte nav li ul li ul a.aktiv::before,
  #navi-spalte nav li ul li ul li a:hover::before,
  #navi-spalte nav li ul li ul li a:focus::before,
  #navi-spalte nav li ul li ul li a:active::before
  {
    color:      #aaa;
  }

  main a:hover,
  main a:focus,
  main a:active,
  aside a:hover, /* Hovern auch in der rechten Spalte */
  aside a:focus,
  aside a:active
  {
    background-color: #e5e5e5;
  }


  main
  {
    color:    #444;
  }

  main h1,
  main h2,
  main h3,
  main h4
  {
    color:    #619d7e;
  }

  main h2.aktuell
  {
    background-color:  #e1efe8;
  }

  main h2.marker,
  main h3.marker,
  main h4.marker
  {
    background-color:  #e1efe8;  /* entspricht standardmäßig der Hintergrundfarbe der Navigation */
  }

  /* Zitate */
  main .zitat
  {
    background-color:  #ebebeb;
  }

  main .zitat h3
  {
    color:    #00639d;
  }

  main th /* Spaltenueberschriften von Tabellen im Inhaltsbereich */
  {
    color:        #333333;
    background-color:  #d9d9d9;
  }

  main th.zwischentitel
  {
    color:        #333333;
    background-color:  #E9E9E9;
  }

  main th,
  main td
  {
    background-color:  #eeeeee;
  }
td.nowrap,
th.nowrap {
  white-space:nowrap;
  }

  main .dekobild /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild */
  {
    background-color:  #f0f0f0;
  }

  /* Zitate */
  main .zitat
  {
    background-color:  #ebebeb;
  }

  main .zitat h3
  {
    color:    #00639d;
  }

  /* ABC-Listen (inkl. Navigation) */
  main #abc
  {
    text-align:  center;  /* zentriert die Liste, wenn diese ein inline-block Element ist */
  }

  main #abc ul li
  {
    background-color:  #005b79;
  }

  main #abc ul li a
  {
    color:    #fff;
  }

  main #abc ul li a.aktiv,
  main #abc ul li a:hover,
  main #abc ul li a:focus,
  main #abc ul li a:active
  {
    background-color:  #AAB315;/*#a2a800;*/
  }

  /* CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */
  /* Ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */

    main form
    {
      background-color:  #e5e5e5;  /* Muss der Farbe der checkbox-/radiobutton-Umrandung entsprechen. */
    }

    main form .type-text input:focus,      /* Hierdurch wird das aktive Eingabeelement hervorgehoben */
    main form .type-text textarea:focus,
    main form .type-check textarea:focus,
    main form .type-select select:focus,
    main form .formular-element input:focus,  /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element textarea:focus,  /* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element select:focus,  /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form input:focus  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      background-color:  #fff8d1;
    }

    /* Buttons (auch im Bestätigungs-Schritt) */
    main form .submit-buttons .type-button .submit,  /* Submit-/Abschicken-Button */
    main .last-step .buttons .type-button .print,  /* Print-Button in last-step */
    main form .buttons input.submit,        /* Submit-Button alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons .submit-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      background-color:  #005395;      /* wichtig bei last-step */
      color:        #ffffff;      /* wichtig bei last-step */
    }

    main form .submit-buttons .type-button .reset,  /* Reset-/Löschen-Button */
    main form .buttons input.reset,          /* Reset-Button alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons .reset-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      color:        #323232;
      background-color:  #ffffff;
    }
    /* ENDE Buttons (auch im Bestätigungs-Schritt) */

  /* ENDE ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */
  /* ENDE CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */


  aside h3
  {
    color:        #fff;
    background-color:  #F27214;
  }
  aside h4
  {
    padding-bottom: 0;
    margin-bottom: -0.3em;
    font-size: 1.2rem;
  }
  aside > div > div  /* Kasten-Element */
  {
    background-color:  #fff;  /* Hintergrundfarbe */
  }

  /* Formular-Style Info-Spalte (inkl. Buttons) */

  aside form input,
  aside form select,
  aside form textarea
  {
    background-color:  #fff;
  }

  aside form input:focus,
  aside form select:focus,
  aside form textarea:focus
  {
    background-color:  #fff8d1;
    border: 1px solid #005b79;
  }
  
  aside form .buttons input.submit
  {
    color:        #ffffff;
    background-color:  #005395;
  }

  aside form .buttons input.reset
  {
    color:        #323232;
  }


/* ENDE SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */





/* SEITENGERÜST (also auch Header) und ALLGEMEINES */



  /* Blendet die Pager-Punkte des Sliders ein/aus. */
  header .content-header .bx-wrapper .bx-controls .bx-pager
  {
    display:  none;  /* Pager-Punkte aus - wenn sie eingeblendet werden sollen, muss dieser CSS-Block entfernt werden. */
  }


/* ENDE SEITENGERÜST (also auch Header) und ALLGEMEINES */


/* HAUPTNAVIGATION */
/* ENDE HAUPTNAVIGATION */


/* INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */
/* ENDE INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */


/* INHALTSBEREICH */
 /* --------- Datenbank ------------ */
div.mail::before {
content: none;
}

div.select-list {
margin-bottom: 1em;
}
main a.back-link::before  {
    font-family:  'ms-icons', sans-serif !important;
    font-size:    1em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform: none;
    vertical-align:  baseline;
    /* Better Font Rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing:grayscale;
display: inline-block;
margin-right: 0.3em;
    content: "\e913";
  }



span.text-area-name {
font-family:"Vesta W01 Bold";
}

.infoBox {
position: relative;
border: 1px solid #cccccc;
border-radius: 5px;
background-color: #f0f0f0;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
.contact-data,
.contact-person-data {
margin-bottom: 0.5em;
}
.contact-person-data .name .contact-key {
display: none !important;
}

.attribute-container {
margin-bottom: 4px;
clear: both;
display: block;
}
.checkboxOn,
.checkboxOff {
position: relative;
}
.attribute-container img,
.checkboxOn img,
.checkboxOff img {
padding-top: 3px;
display: inline-block !important;
margin-bottom: 4px;
}

.attribute-name {
display: inline-block;
float: left;
text-align: right;
margin-right: 10px;
}
.attribute-value {
display: block;
}
.attribute-name.text-area-name {
font-family:"Vesta W01 Bold";
}
.attribute-value.text-area {
margin-bottom: 1em;
clear: both;
}
.attribute-name.select-list-name {
display: block !important;
margin-top: 1em;
clear: both;
float: none;
text-align: left;
font-family:"Vesta W01 Bold" !important;
}
.attribute-select.select-list {
display: block;
}
.attribute-select.select-list .attribute-name {
 display: block !important;
 float: none;
 text-align: left;
}
.attribute-select.select-list .attribute-name::before {
    font-family:  'ms-icons', sans-serif !important;
    font-size:    1em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform: none;
    vertical-align:  baseline;
    /* Better Font Rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing:grayscale;
display: inline-block;
margin-right: 0.3em;
margin-left: 0.4em;
    content: "\e91c";
    color: #F27214;
}

h2.offer-name {
 background-color: #f0f7f3;
 padding: 2px;
 margin: 0.8em 0 1em 0 !important;
 line-height: 1.25em !important;
 color: #333333;
}
h3.person-headline {
clear: both;
margin-top: 0.9em !important;
margin-bottom: 0 !important;
 display: block;
}
h3.attribute-headline {
clear: both;
margin-top: 1em !important;
margin-bottom: .5em;
 display: block;
}
h4.attribute-headline {
clear: both;
margin-top: 1.15em !important;
 /* font-size: 1.05em; */
 margin-bottom: .8em;
 display: block;
 color: #000000 !important;
}
.category-content h4#pflege,
.category-content h4#besuch,
.category-content h4#gruppen{
 clear: both;
 margin-top: 1em !important;
 font-size: 1.1em;
 margin-bottom: .5em;
 display: block;
 color: #000000;
 background-color: #f0f7f3;
 padding: 2px;
}
.back-link-container {
clear: both;
margin-top: 10px;
}

.contact-person-data .mail .contact-value a::before {
    font-family:  'ms-icons', sans-serif !important;
    font-size:    1em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform: none;
    vertical-align:  baseline;
    /* Better Font Rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing:grayscale;
    color: #F27214;
    content: "\e91f";
display: inline-block;
margin-right: 0.2em;
margin-left: 0.1em;
}


/*-------------------------- Tabelle ------------------------- */
main table {
  margin-bottom: 1em;
}
.drei {
 padding-right: 230px;
}
td.center,
th.center {
 text-align: center;
}
td.right,
td.text-right {
 text-align: right;
}
.rechts {
 float: right;
 padding-left: 5px;
 padding-bottom: 5px;
}
.links {
 float: left;
 padding-right: 5px;
 padding-bottom: 5px;
}
.mitte {
 text-align: center;
 padding-bottom: 1em;
}
.rechts p,
.links p,
.mitte p {
 font-size: 0.85em;
}
.nowrap {
white-space: nowrap;
}


tr.single-room td,
tr.double-room td {
vertical-align: bottom !important;
}
.table-sum td,
.table-sum th,
.double-room-sum td,
.single-room-sum td {
border-bottom: 1px solid #999999;
font-family:"Vesta W01 Bold";
}
th.text-center {
text-align: center !important;
}

/* ----- Pflegekurse ----------- */
.offer-detail-container.offer-type-9 .attribute-container .attribute-name.text-area-name {
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: 1.1em;
}

/* ---- typo3-Bildauszeichnungen ---- */
.ce-textpic-center-outer,
.ce-textpic-center-inner {
position: static !important; 
float: none !important;
text-align:center;
}

.ce-textpic-center-outer img {
display:inline !important;
}





 /* ------- ENDE Datenbank ---------- */

/* ENDE INHALTSBEREICH */





/* INFOBEREICH ("rechte Spalte") */

.frame-type-textmedia-gallery-column {
    margin-left: 6px;
}

/* ENDE INFOBEREICH ("rechte Spalte") */





/* ---------------- Print --------------------- */

@media print {
 body {
  background-color: #ffffff;
  }
 #seiten-wrapper {
  box-shadow: none;
  }

  header
  {
    height:  140px;  /* Da die Kopfgrafiken im Print ausgeblendet werden, muss die height angepasst werden. */
  }

  header .amt
  {
    width:    200px;  /* Wichtig, sonst hat die Amtskennung beim Print zu viel Platz. */
  }

  header .amt .amtsbezeichnung
  {
    font-size:  12px;
  }

  header .logos.flexbox  /* Stadtlogo einrücken, damit vollständig. */
  {
    display:    inline-block!important;
    float:      right;
  }

  header .logos.flexbox .muenster-de  /* muenster.de Schriftzug */
  {
    margin:      6px 25px 0 5px;
    float:      left;
    font-size:    30px;
  }

  header .logos.flexbox .stadt-ms  /* Stadt Münster Logo */
  {
    float:      left;
  }


  header .content-header
  {
    display:  none;
  }


header .header-overlay {
  display: block;
  margin:0;
  padding:0;
  height: 70px;
  position: absolute;
  top: 70px;
  left: -50px;
  z-index:999;
  }
header .header-overlay-logo.flexbox img {
    width: 110px;
    height: auto;
   z-index:999;
}
.streifen
  {
    height:        1px;
    margin:        0.1em 0 0.1em 0;
  }

.footerlinks ul {
  display: none;
  height: 1px;
  margin: 0;
  }

  #info-spalte
  {
    background-color:  #fff!important; /* !important muss sein, da sonst background-color in tourismus.css greift. */
    border-color:    #fff!important; /* !important muss sein, da sonst background-color in tourismus.css greift. */
    width:        99%;
    page-break-before:  auto; 
    page-break-inside: avoid;
margin-top: -30px;  
  }

  #info-spalte aside
  {
    width:    99%;
    overflow:  hidden;  /* wichtig, damit dieser Container die Kindelemente umschließt (die Höhe wächst auf die Höhe des größten Kind-Elements). */
  }

  #info-spalte aside > div  /* Verhalten/Aussehen von #rechts_1, #rechts_2, usw. */
  {
    float:  left;
    margin:  0;
    width:  auto;
  }

  #info-spalte aside > div > div  /* Verhalten/Aussehen der Inhaltselemente (äußerer, umschließender div-Container) */
  {
    float:      left;
    margin-top:    0.5em;
    margin-right:  6px;
    margin-bottom:  0;
    width:      195px;
  }

  /*
  Da die Browser beim Drucken häufig Hintergrundfarben-/bilder ausblenden, legen wir als
  Workaround Rahmen um die Kästen in der rechten Spalte. */
  #info-spalte aside > div > *  /* Rahmen links/rechts */
  {
    border-left:  1px solid grey;
    border-right:  1px solid grey;
  }

  #info-spalte aside > div > div  /* Rahmen oben/unten - oben ist wichtig, da es Elemente ohne Überschrift gibt! */
  {
    border-top:    1px solid grey;
    border-bottom:  1px solid grey;
  }

  /* "bugfixing" - nötig, da die HTML-Struktur der Kästen nicht einheitlich ist. */
  #info-spalte aside > div > div > .linklist,
  #info-spalte aside > div > div > .kasten
  {
    margin-top:    0;
    margin-bottom:  0;
  }



}