/*
Theme Name: Auktor
Theme URI: https://www.r-auktor.de/
Description: Website-Theme Auktor Ingenieur GmbH. Abgeleitet vom Theme der BBI Gruppe (wedebo - Michal Boger), umgefaerbt auf die Auktor-Palette und mit dauerhaft linker Navigation statt Burgermenue.
Author: wedebo - Michal Boger
Author URI: http://www.wedebo.de
Version: 1.0
*/

/* ---------------------------------------------------------------------------
 * Farbpalette Auktor - Werte aus der Druckvorlage des Logos
 * (images/AIG-Adresskopf-Plaene-4c.png des alten Themes):
 *
 *   #006eb7   Leitfarbe        (war bei BBI #7fb03c gruen)
 *   #fbb900   Akzent           (war bei BBI #b8d935 hellgruen)
 *   #004370   dunkler Ton      (war bei BBI #122d54 navy)
 *   #009cdf   Hellblau         unveraendert uebernommen - ist bereits ein Blau
 *
 * Unveraendert bleiben #ffb900 und #46b450: das sind die Warn- und
 * Erfolgssymbole von Contact Form 7, also Statusfarben, keine Markenfarben.
 * ------------------------------------------------------------------------- */

 @font-face {
      font-family: 'icons'; font-display: swap;
      src: url('./font/icons.eot?60592451');
      src: url('./font/icons.eot?60592451#iefix') format('embedded-opentype'),
           url('./font/icons.woff?60592451') format('woff'),
           url('./font/icons.ttf?60592451') format('truetype'),
           url('./font/icons.svg?60592451#icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }


/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./font/roboto-v32-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('./font/roboto-v32-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./font/roboto-v32-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('./font/roboto-v32-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



html, body {
    margin: 0; padding: 0; background: #fff; text-align: center;
    -webkit-text-size-adjust:none; color: #000000; font-family: 'Roboto', sans-serif;
    font-weight: 400;
    float: left; width: 100%; height: 100%;
    font-size: 1.05em;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#wrapper {
    float: left; width: 100%; margin: 0; padding: 0; text-align: left; overflow: hidden; min-width:280px;
}
#header {
    float: left; width: 100%; margin:0; padding: 0; position: absolute; top: 0; left: 0; z-index: 10; min-width: 320px; text-align: center;
    -webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

#logocontainer {
padding: 20px 80px 20px 20px; margin: 0; float: left; display:block; width: 100%; position: relative; top: 0; left: 0;  background: #fff;
position: relative; z-index: 110; box-sizing: border-box;
}
#logocontainer #logo, #logo img {
float: left; width: 150px;
}

#headwidget {
 position: absolute; margin: 0; top:5px; right: 10px; -webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s; z-index: 9;
}
#headwidget p {
    margin: 5px 0;
}
#headwidget a.tellink {
    margin: 10px; font-size: 0.9em;
}
.fixiert #headwidget a {
    color: #fff !important;
}

div.social {
margin: 0; z-index: 4;  width:auto; float: left;
position: absolute; top: -55px; right: 2%;
}

div.social a {
    display: flex; flex-wrap: wrap; float: left; justify-content: center; align-items: center; margin: 0 5px 5px 0; font-size:20px; padding:5px; line-height:18px; font-family: icons; color: #fff !important; text-align: center;
    box-sizing: border-box; width: 35px; height: 35px; box-sizing: border-box;
}
div.social a:hover {
  color: #fff !important; background: #006eb7;
}

#searchicon {
   color: #fff !important; position: absolute; top: 50px; right: 20px; z-index: 2;-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
#searchicon a {
    color: #fff; font-size: 20px;
}
#searchicon a .se {
font-family: icons;
}
#searchicon a .close {  display: none;}
.suo #searchicon a .se { display: none; }
.suo #searchicon a .close { display: block; }
#headwidget a:hover {
    color: #006eb7 !important;
}

#headwidget .widget_polylang { position: absolute; right: 220px; top: 0; width: 60px; height: 50px; }
#headwidget .widget_polylang label {
    display: none;
}

#headwidget div.widget_polylang select {
    border: 0; background: transparent; color: #fff; padding: 5px 15px; cursor:pointer;
    -webkit-appearance:none;-moz-appearance:none; appearance:none; border-radius: 0 !important;
}
#headwidget div.widget_polylang select option {
    color: #000;
}

#headwidget div.widget_polylang::after {
 display: inline-block; padding: 0; position: absolute; top: 8px; right: 0;
  font-family: 'icons';
  text-decoration: none; font-size: 0.9em;
  content: "\e804";  color: #fff; z-index: -1;
}


/* #wrapper > div.social stand hier aus BBIs Stylesheet (dort Zeile 137): eine
   am Fensterrand fixierte Lasche mit 10px runden Ecken links. Entfernt am
   13.08.2026, weil der Selektor in diesem Theme nie trifft - .social kommt
   genau einmal vor, in footer.php Zeile 59, und liegt dort als
   #footer > .zc > .social im Fussbereich, nicht als direktes Kind von
   #wrapper. Gemessener Radius am tatsaechlichen Element: 0px.
   Damit gilt Radius 0 im ganzen Stylesheet ohne Ausnahme. */

/* Der Uebergang animiert padding und bleibt es auch.
 *
 * Ein Detektor beanstandet das zurecht als Regel - animiertes padding laesst
 * den Browser neu umbrechen. Hier nicht: das Element ist absolut positioniert,
 * also aus dem Textfluss heraus, und der Umbruch bleibt auf seine zwei Kinder
 * beschraenkt (Eingabefeld und Knopf). Er laeuft einmal je Umschaltung des
 * Kopfes, nicht je Bild.
 *
 * transform waere hier der falsche Ersatz: im Zustand .fixiert schrumpft der
 * Innenabstand von 45/20 auf 20/5 und damit die Hoehe des Kastens - genau das
 * ist der Effekt. Eine Verschiebung wuerde den Inhalt bewegen und die dunkle
 * Flaeche in alter Hoehe stehen lassen.
 *
 * Die beiden Herstellerpraefixe sind entfallen: "webkit-transition" fehlte der
 * fuehrende Bindestrich und war damit von Anfang an unwirksam (steht in BBIs
 * Vorlage genauso), und -moz-transition braucht kein Browser mehr, der diese
 * Seite oeffnet. */
#headwidget .widget_search {
    position: absolute; top: 0; right: 0; padding: 45px 70px 20px 20px; background:#004370;  width: 60vw;  z-index: 1;
    transition: padding 0.5s;
}
#headwidget .widget_search label {
    display: none;
}
#headwidget .widget_search form > div {

}
#headwidget .widget_search form input {
    width: 70%;  border: 2px solid #004370;
}
#headwidget .widget_search form button, #headwidget .widget_search form input[type=submit]
 {
    width: 25%; float: right;
}


/* Der Ausloeser ist jetzt ein <button> mit sichtbarem Wort. Die Balkenregeln
   sind deshalb auf .menuelink-balken eingeschraenkt - vorher trafen sie jedes
   span im Element und haetten das Wort "Menue" zu einem 3px-Strich gemacht.
   Groesse und Innenabstand kommen aus dem Abschnitt am Dateiende (>= 44x44). */
#menuelink {display: flex; align-items: center; gap: 8px; position: fixed; top:50px; right:5%; margin: 0; z-index: 130; background: none; border: 0; font-family: 'Roboto', Arial, sans-serif; color: #000; cursor: pointer; }
#menuelink.open {top: 20px; position: fixed;}

#menuelink .menuelink-balken { display: block; position: relative; flex: none; width: 25px; height: 32px; }

#menuelink .menuelink-balken span { display: block; float: left; width: 100%; height: 3px; background: #000; position: absolute; top: 5px; left: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
transform-origin: center;
}
#menuelink.open .menuelink-balken span {
    background: #000 !important;
}

#menuelink .menuelink-balken span#mlm { top: 13px; }
#menuelink .menuelink-balken span#mlu { top: 21px; }
#menuelink.open .menuelink-balken span#mlo {transform: rotate(45deg);translate(7px,8px); -moz-transform: rotate(45deg) translate(7px,8px); transform: rotate(45deg) translate(7px,8px);   }
#menuelink.open .menuelink-balken span#mlm { display: none;  }
#menuelink.open .menuelink-balken span#mlu {transform: rotate(-45deg);translate(4px,-4px); -moz-transform: rotate(-45deg) translate(4px,-4px); transform: rotate(-45deg) translate(4px,-4px);  }

#main {
    float: left; width: 100%; margin: 0; padding:100px 0 0; min-height: 300px; position: relative; z-index: 9;
}

#titel {
    float: left; margin:-150px 2% 50px; width: 46%; max-width: 700px; padding: 30px; box-sizing: border-box; position: relative; z-index: 10; background: #666666; color: #fff;
    left: 50%; top: 0;
}
#titel h1, #titel h2 {
    color: #fff; margin: 10px 0;
}

#footer {
    float: left; width: 100%; margin: 0; padding: 20px 0; background: #006eb7; text-align: left; border-top:35px solid #009CDF; color: #fff;
    min-height: 230px; position: relative;
}
#footer p {
    margin: 10px 0;  line-height: 1.6em;
}

.zc {
    margin: 0 auto; width: 100%; max-width: 1160px; position: relative;
}

.breit .zc {
    max-width: 1560px;
}
#content {
    margin: 0; width: 100%;  position: relative; float: left; min-height: 500px;
}
.contentseite div#content {
    max-width: 1160px;
}
.content1, .content1_  {
    float: left; width: 100%; min-height:300px; padding:0; position: relative;
}
.content2  {
    float: left; width: 100%; min-height: 200px; padding: 0; position: relative;
}

.pageteaser {
    float: left; width: 102%; margin: 0 0 30px -1%; display: flex; flex-wrap: wrap;
}

.content3 {
    float: left; width: 100%; background: #666666; margin:20px 0 0; padding: 20px 0 30px; position: relative;
}
.content3::after {
    background: #666666;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -100%;
    top: 0;
    width: 100%;
    z-index: 1;
}

.content3::before {
    background: #666666;
    content: "";
    display: block;
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

figure {
    margin: 0; padding: 0;
}

.balken { margin:0 !important; padding: 30px 0 50px 0; position: relative; float: left; width: 100%; z-index: 1; }
.balken::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='250' preserveAspectRatio='none' viewBox='0 0 1440 250'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3cpath d='M40 250L290 0L449 0L199 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M255.60000000000002 250L505.6 0L748.6 0L498.6 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M478.20000000000005 250L728.2 0L803.2 0L553.2 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M742.8000000000001 250L992.8000000000001 0L1216.3000000000002 0L966.3000000000001 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M1400 250L1150 0L899.5 0L1149.5 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M1176.4 250L926.4000000000001 0L876.9000000000001 0L1126.9 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M950.8 250L700.8 0L430.79999999999995 0L680.8 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M720.1999999999999 250L470.19999999999993 0L389.19999999999993 0L639.1999999999999 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M1299.886145332962 250L1440 109.88614533296217L1440 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 250L140.11385466703783 250L 0 109.88614533296217z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1440' height='250' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1007'%3e%3cstop stop-color='rgba(66%2c 95%2c 135%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(66%2c 95%2c 135%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1008'%3e%3cstop stop-color='rgba(66%2c 95%2c 135%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(66%2c 95%2c 135%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center center;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    z-index: -1; margin: 0 0 0 -50vw;
}


.balkenblau { margin:0 !important; padding: 30px 0 50px 0; position: relative; float: left; width: 100%; z-index: 1; color: #fff; }
.balkenblau::after {
    background: #004370;
    background-size: 50% auto;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    z-index: -1; margin: 0 0 0 -50vw;
}
.balkenblau h2, .balkenblau h3 {
    color: #fff;
}

.balkenblau a {
    color: #eee;
}
.balkenblau a:hover {
    color: #fff;
}
.balkenblau.randoben::after {
    box-sizing: border-box; border-top: 10px solid #006eb7;
}

.balkenhblau {
margin:0 !important; padding: 30px 0 50px 0; position: relative; float: left; width: 100%; z-index: 1; }
.balkenhblau::after {
    background: #d2daef;
    background-size: 50% auto;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    z-index: -1; margin: 0 0 0 -50vw;
}

.inhalt {
    float: left; width: 92%; padding:0 4%;
}
.home .inhalt {
    padding-top: 0;
}


#sidebar {
    margin: 0; float: right; width: 100%; box-sizing: border-box; padding: 0;
}
#hauptsidebar {
    float: left; width: 92%; padding: 0 4%;
}

.theading h3 {
    text-transform: uppercase; text-align: center;
}
.theading h3 span {
    background: #fff; padding: 5px 10px 2px; display: inline-block; color: #666666;
}

.blogcategory  {
    float: left; width: 102%; margin: 30px 0 30px -1%; display: flex; flex-wrap: wrap; justify-content: center;
}

.teaserbox {
    float: left; width:31.33%; margin: 15px 1%; background: #fff; box-sizing: border-box; padding: 0 0 60px;
    position: relative;
    overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 40px 0px
}

.teaserbox:hover {

}
.teaserbox .postinfo {
    font-size: 0.9em;
}

.teaserbox h2 {
    margin: 10px 0; padding: 0; font-size: 1.2em; color:#004370;
}
.teaserbox h2 a {
    color: #004370;
}

.teaserbox div.postinhalt {
   float: left; width: 90%; padding: 10px 5%;
}
.teaserbox .weiterlink {
    position: absolute; bottom: 0; left: 5%; width: 90%;  text-align: center;
}

.weiterlink a {
margin:10px 0;
padding: 10px 20px; display: inline-block; color: #006eb7; background: #fff;
position: relative; border: 2px solid #006eb7; font-size: 1.0em; min-width: 150px; text-align: center; line-height: 1.3em;
font-weight: 700;
}


.balkenblau .weiterlink a, #footer .weiterlink a {
    color: #fff; border: 1px solid #fff; background: transparent;
}
.weiterlink a:hover, .balken .weiterlink a:hover  {
    background: #006eb7; color: #fff;
}
#footer .weiterlink a:hover  {
    background: #fff; color: #004370;
}
/* Sekundaerknopf: die Umkehrgeste des Primaerknopfs, nur in der anderen
 * Richtung angefangen. Ruhezustand weisse Flaeche mit 2px-Kante und Schrift in
 * Auktorblau, beim Hover gefuellt - also genau die zwei Zustaende des
 * Primaerknopfs, getauscht.
 *
 * Vorher Auktorgelb: der Knopf war damit das einzige gelbe Element der
 * Leistungsseite und zog den Blick auf den Verweis zu einer fremden Domain -
 * das Unwichtigste auf der Seite trug den starken Akzent. Gelb markiert nach
 * DESIGN.md genau eine Sache je Ansicht; hier war es die falsche.
 *
 * Gewicht 400 statt 300: das System kennt zwei Schnitte, 400 und 700. Die 300
 * hat der Browser ohnehin auf 400 gerundet, die Angabe war eine Notluege. */
.buttonlink a, a.dslink {
padding: 10px 30px; display: inline-block;
font-weight: 400; margin: 10px 0;
background: #fff; color: #006eb7; border: 2px solid #006eb7;
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;
}
.buttonlink a:hover, a.dslink:hover {
    background: #006eb7; color: #fff;
}

/* Hier stand eine Externmarke fuer den BBI-Knopf, erst per ::before, dann per
 * ::after. Beides ist am 13.08.2026 entfallen, weil der Glyph nicht existiert:
 * a.extern setzt content "\e8a1", und dieses Zeichen kennt die Iconschrift
 * dieses Themes nicht.
 *
 * Gemessen: ein frei erfundener Codepoint belegt in der Iconschrift genau 1em
 * Vorschub, und "\e8a1" belegt exakt dasselbe - waehrend vorhandene Glyphen
 * eigene Breiten haben (Mail 1.04em, nach oben 0.86em, LinkedIn 0.86em). Die
 * Marke war also nie sichtbar, sondern nur ein 31px breites Loch hinter der
 * Beschriftung.
 *
 * Achtung: die allgemeine Regel a.extern::before weiter oben hat dasselbe
 * Problem. Wer die Klasse im Seiteninhalt verwendet, bekommt eine Luecke statt
 * eines Zeichens. Eine sichtbare Marke braeuchte ein eigenes SVG. */


#content ul.wp-block-latest-posts__list {
    float: left; width: 100%; margin: 0 0 0 0; padding: 0;position: relative; line-height: 1.5em;
}
#content ul.wp-block-latest-posts__list li {
    float: left; width: 100%; margin: 10px 0;
}
#content ul.wp-block-latest-posts__list.is-grid li {
    float: left; width:100%; margin: 10px 0 30px; background: #fff; box-sizing: border-box; padding: 0;
    position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; border: 1px solid #006eb7; position: relative;
}

#content ul.wp-block-latest-posts__list.is-grid li::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; top: -1px; left: 53%;background-size: 50px auto; z-index: 10;
}
#content ul.wp-block-latest-posts__list.is-grid li:nth-child(even)::before {
   left: 3%;
}

#content ul.wp-block-latest-posts__list.is-grid {
    display: flex; flex-wrap: wrap;
}
#content ul.wp-block-latest-posts__list.is-grid li {

}

#content ul.wp-block-latest-posts__list.is-grid li div.wp-block-latest-posts__featured-image  {
    float: left; width: 48%; margin: 0 2% 0 0; overflow: hidden; order: 1; height: 100%;

}
#content ul.wp-block-latest-posts__list.is-grid li:nth-child(even) div.wp-block-latest-posts__featured-image {
    float: right; width: 48%; margin: 0 0 0 2%;
}

#content ul.wp-block-latest-posts__list.is-grid li div.wp-block-latest-posts__featured-image img {
    float: left; width: 100%; height: 100% !important; object-fit: cover;
}

#content ul.wp-block-latest-posts__list.is-grid li > a {
   float: left; display: block; margin: 40px 0 5px; padding: 0 5%; float: left; width: 40%;
    overflow: hidden;
font-size: 1.2em;
line-height: 1.4em;
 order: 3;  color: #000; font-weight: 300;
}
#content ul.wp-block-latest-posts__list.is-grid time {
    float: left; width: 40%; margin: 0 5%; font-size: 1.0em; color: #000;order:2;
}

#content ul.wp-block-latest-posts__list.is-grid div.wp-block-latest-posts__post-excerpt {
   float: left; width: 40%; padding: 10px 5% 30px;order: 4; margin: 10px 0; white-space:pre-wrap;

}
#content ul.wp-block-latest-posts__list.is-grid .weiterlink {
    position: absolute; bottom: 0; left: 0; order: 5; float: left; width: 40%; padding: 5px 5%; text-align: right; z-index: 4;
  }
#content ul.wp-block-latest-posts__list.is-grid li:nth-child(even) .weiterlink {
    float: right;  left: 52%; padding-right: 3%;
}
#content ul.wp-block-latest-posts__list.is-grid .weiterlink a {
    display: inline-block; border: 0;  overflow: hidden;
    text-indent: -2000px; width: 50px; height: 50px;
    background: url('images/wpfeilw.svg'); min-width: 50px; background-size: 100% auto; padding: 0;
}

#content .wp-block-latest-posts__featured-image img {
  height: auto !important;
  max-width: 100% !important;
}

.blogsingle h1.title {
    text-align: left;
    padding: 0; font-size: 2.2em; margin-top: 40px;
}

.blogsingle .postimage {
    float: left; width: 100%; margin: 5px 0; text-align: center;
}
.blogsingle .postimage img {
    max-width: 100%; height: auto !important; margin: 0 0 20px 0;
}

.blogsingle div.postinhalt {
    float: left; width: 100%;
}

#footnav { margin-top: 10px; float: left; width: 21%; padding: 10px 2%; }
#footwidget {
    float: left; width: 44%; margin: 20px 2% 20px 4%;
}
#footsidebar {
    float: left; width: 100%;
}

#footwidget2 {
    float: left; margin: 20px 2%; width: 21%; font-size: 0.9em;
}

.widget {
    float: left; width: 100%;
}

.index-video-wrapper {
    height: 100%;
    width: 100%;
   position: absolute; top: 0; left: 0; z-index: 4;
   background: url('images/loader.svg') center center no-repeat;
}


#index-video {
    float: left;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -100;
    right: 0;
    bottom: 0;
    overflow: hidden;
    position: relative;
    z-index: 80;
}

.copy {
    float: right; width: 90%; margin:0; padding:40px 5%;
}


#menu {
    float: right; width:65%; margin: 60px 0 0 3%; text-align: center; padding: 0;
    -webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
#menu #navhg {
    display: none;
}

#menu ul.nav-men {
 justify-content: center;
}

#menu > div {
    position: relative; float: left; width: 100%;
}

/* .rund img mit border-radius: 10px stand hier aus BBIs Stylesheet (dort
   Zeile 551). Entfernt am 13.08.2026: die Klasse "rund" kommt in keinem
   Auktor-Inhalt vor, und die zweite Haelfte des Selektors zielte auf das
   Plugin Gutenslider, das hier nicht installiert ist. Toter Code, der als
   einziger Radius auf einer Inhaltsflaeche gegen die Radius-0-Regel stand. */

.slide-content {
    padding: 70px !important;
}
.slide-content .wp-block-group {
    max-width: 600px !important;
}


@media only screen and (min-width: 1160px) {

.fixiert #headwidget {
    display: none;
}
.fixiert #headwidget #searchicon {
    top: 25px;
}
.fixiert #headwidget .widget_search { padding: 20px 70px 5px 20px; }

#menu > div { width: 100%; }

#menu ul.nav-men {
    display: flex; flex-wrap: wrap;
}

.bild {
    margin-top: 0;
}

#fsidebar {
       min-height:650px;
}

}

.bildtitle {
     position: absolute; bottom: 0; left: 5%; width: 90%; z-index: 9;  color: #fff;  padding: 20px 0; text-align: center;
     -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;text-shadow: 0px 0px 5px #000000;
}
.bildtitle.iv {
    bottom: 15%;
}

.bildtitle h1 {
    color: #fff; margin: 10px 0;  font-size: 2.5em; font-weight: 400; cursor: pointer;
}
.bildtitle h1 a {
    color: #fff;
}

#menu ul
{
            float: left;
            margin: 0;
            padding: 0; min-width: 100%;
            list-style-type: none;
}

#menu ul li {
                         float: left;
                         margin: 0; padding: 0 30px;; box-sizing: border-box; width: 100%;
                         z-index: 2; position: relative; max-width: 250px; display: flex;
}


#menu ul li a {
float: left;
display: block;
font-weight: normal;
color: #000;
padding: 10px 30px;
margin: 0; text-decoration: none;
text-align: left;
font-size: 18px; font-weight: 400; align-self: center;
}


#menu ul li a.hakt {
    color:#006eb7;
}
#menu ul li.current-menu-item > a, #menu ul li.current-page-ancestor > a {
 color: #006eb7;
}

#menu ul li a:hover {
   color: #006eb7;
}

#menu ul li a span {
    display: inline-block; padding: 7px 0 5px;
}


#menu ul.sub-menu {
position: absolute;
top:55px; z-index: 5;
left: 0; padding: 10px 0 0;
min-width: 250px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
width: auto;
opacity: 0;
display: block;
visibility: hidden;
}


#menu ul.sub-menu ul { display: block; position: absolute; top: auto !important; left: 100%; background: transparent; margin: 0; padding: 0 !important;}

.vpg #menu ul.sichtbar { opacity: 1; top: 50px; visibility: visible; }

#menu ul.sub-menu li {float: left; margin: 0; box-sizing: border-box; width: 100%;}

.qn2 {
    font-family: icons; position: absolute; top: 15px; right:10px;
}



#menu ul.sub-menu li a {
padding: 10px 30px;
margin: 0;
font-size: 0.9em;
border: none;
width:100%;
text-align: left;
height: auto;
text-transform: none;
background: #004370;
box-sizing: border-box;
border-top: 1px solid #006eb7;
}

#menu ul.sub-menu li a {
color: #fff;
}

#menu ul.sub-menu li a:hover {
background: #d2daef; color:#004370;

}

#menu ul li ul.sub-menu li.current-menu-item a {
background: #d2daef; color:#004370;
}

#menu ul.sub-menu li ul.sub-menu {
    float: left; width: 100%; padding: 5px 0;
}

#menu ul.sub-menu li ul.sub-menu li {
    float: left; width: 100%; min-height: 5px; border-right: none;
}


#menu ul.sub-menu li ul.sub-menu li a{
   font-weight: 300; font-size: 0.95em;text-transform: none; padding: 15px 5%;
}
#menu ul li ul.sub-menu li.current-menu-item ul.sub-menu li a {
background: transparent; font-weight: 300;
}
#menu ul li ul.sub-menu li.current-menu-item ul.sub-menu li a:hover {
 font-weight: 300;
}
#menu ul li ul.sub-menu li ul.sub-menu li.current-menu-item a {
background: transparent; font-weight: bold;
}

span.qn {display: inline-block; font-family: icons; font-size: 16px; position: absolute; top:12px; right: 10px; color: #000; z-index: -1;  }


#footer ul
{
            float: left;
            margin: 0;
            padding: 0;
            list-style-type: none; width: 100%; display: flex; flex-wrap: wrap;
}

#footer ul li {
                         display: block;
                         float: left; width: 100%;
                         margin: 0; padding: 0;
                         }
#footer ul li a {
    display: block; float: left; padding:10px 0 0; font-size: 1.0em; line-height: 1.2em;
}
#footer a {
    color: #fff;
}
#footer a:hover {
    color: #40CCFF;
}

a {
  color: #333; text-decoration: none;
}
a:hover {
  color: #006eb7;
}


.bild {
    float: left; width: 100%; min-height:250px;
    background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  background-repeat: no-repeat; position: relative;
height:300px; background-color: #efecec;
}

.bild2 {
     float: left; width: 100%;position: relative;
}

#bildad {
    float: left; width: 92%; padding: 15px 4% 10px; color: #fff;
}

.projektbild  {
    float: left; width: 100%; margin: 20px 0 0;
}

/* Die 5px oben sind entfallen, samt der Hersteller-Praefixe daneben - die
   kennt seit Firefox 13 und den alten WebKit-Fassungen kein Browser mehr.
   Der Knopf rendert derzeit nirgends: footer.php hat die Zeile auskommentiert,
   und footer-ohnewidget.php fordert keine Vorlage an. Der Radius war damit
   folgenlos - aber er waere die Ausnahme von Radius 0 an dem Tag, an dem
   jemand den Knopf zurueckholt. */
a.totop {
    position: fixed; bottom: 0; right: 5%; font-family: icons; font-size: 1.0em; color: #fff;background: #000;
    padding: 8px 0; text-align: center; width:50px; z-index: 50;
    border-radius: 0;
}
a.totop:hover {
 background: #009CDF;
}


input {
    border: 1px solid #f2f2f2 !important; padding: 10px; background: #f2f2f2; font-size: 1.1em; box-sizing: border-box;font-family: 'Roboto',Arial, sans-serif;  color: #000000; font-weight: 400;}
select {
    border: 1px solid #f2f2f2; padding: 10px; background: #f2f2f2; font-size: 1.1em; font-family: 'Roboto',Arial, sans-serif; color: #000000; font-weight: 400; width: 100%;}
input:focus {
 border: 1px solid #f2f2f2; background: #fff; color: #009CDF;
}
textarea {
    border: 1px solid #f2f2f2; padding: 10px; background: #f2f2f2; font-size: 1.1em; font-family: 'Roboto',Arial, sans-serif; color: #000000;font-weight: 400;}
textarea:focus {
 border: 1px solid #000; background: #fff;  color: #009CDF;
}
.formfeld label {
    color: #006eb7;
}

.select2-container .select2-selection--single .select2-selection__rendered { padding-top: 10px; padding-bottom: 10px;}
.select2-container .select2-selection--single {    height: 45px !important; }


.bewerbungsformular,.kontaktform {
    float: left; width: 100%; padding: 0;
}
div.bstep:not(.aktiv) {
    display: none;
}
div.bstep > p, div.bstep h2 , div.bstep h3 {
    float: left; width: 100%;
}


input[type=submit]:hover {
    background: #fff !important; color: #006eb7 !important;
}

/* :not(#menuelink) - der Menue-Ausloeser ist seit dem Umbau ein <button> und
   steht im Header. Ohne die Ausnahme erbt er hier die Primaerknopf-Optik mit
   !important und wird zu einem blauen Kasten. */
input[type=submit], #header button:not(#menuelink) {
    background: #006eb7 !important; color: #fff !important; cursor: pointer; font-size: 1.0em;
    -webkit-appearance:none;-moz-appearance:none; appearance:none; border: 2px solid #006eb7 !important; font-family: 'Roboto',Arial, sans-serif; padding: 10px 30px;  font-size: 1.1em; margin: 5px 0;
}
input[type=submit]:hover, #header button:hover {
    background: #fff !important;  color: #006eb7 !important;
}
#searchform [type=submit] {
    width: 35%; box-sizing: border-box;
}

.wp-block-button__link:hover {
    opacity: 0.9;
}

img {
    max-width: 100%; height: auto !important;
}
.wp-block-eedee-block-gutenslider {
    float: left; width: 100%;
}

.wp-block-eedee-block-gutenslider.slides-number .eedee-background-div img {
   height: 100% !important;
}

.teaserbox img {
    height: auto !important;
}

iframe {
    max-width: 100%;
}

h1 {
    font-weight:700; color:#006eb7; font-size: 3.2em; margin: 50px 0 30px; padding: 0; line-height: 1.0em; position: relative;

}
.wp-block-cover h1 {
    font-size: 2.6em; line-height: 1.2em; padding: 0 4%;
}

h1:first-child {
    margin-top: 0;
}
.wp-block-cover h1.has-large-font-size {
     font-size: 4.6em !important;
}

h1.has-text-align-center::after {
    left: 50%; margin-left: -200px;
}

h2 {
    font-weight: 400; font-size: 1.3em; margin: 30px 0 20px; line-height: 1.2em; color: #000000;
}
h2.has-large-font-size {
    font-size: 2.8em !important; line-height: 1.2em;  color:#006eb7; font-weight: 700;
}
.box .textfeld h2 {
   font-weight: 400; font-size: 1.3em;  margin: 40px 0; line-height: 1.2em; color:#000000;
}

h1 em {
    font-size: 0.9em; font-style: normal; font-weight: 700;
}

h3 {
    font-weight: 400; font-size: 1.3em; margin: 30px 0 10px; line-height: 1.2em; color:#000000;
}
h3 a { color: #000000; font-size: 0.9em;}

h4 {
    font-size: 1.0em; font-weight: 400; margin: 20px 0 10px; line-height: 1.4em; color:#000000;
}
h5 {
    font-size: 1.0em; font-weight: bold; margin: 15px 0 5px; line-height: 1.4em; color:#000000;
}
p {
    margin: 15px 0 20px; line-height: 1.4em;
}
.wp-block-column > p:first-child {
    margin-top: 0;
}

#content li {
     line-height: 1.5em;
}
#content ul {
    padding: 0 0 0 25px;
}

.startbox {
    position: relative;
}

strong, b {
    font-weight: 700;
}


.wp-block-cover .wp-block-group {
    margin: 0 auto !important; max-width: 1160px;
}
.wp-block-cover.alignfull .wp-block-cover__inner-container {
    margin: 0 auto !important; max-width: 1260px; padding: 0; box-sizing: border-box;
}
.wp-block-cover.alignfull .wp-block-cover__inner-container p, .wp-block-cover.alignfull .wp-block-cover__inner-container h1, .wp-block-cover.alignfull .wp-block-cover__inner-container h2 {
}

.story-content .wp-block-image {
    margin-bottom: 10px !important;
}
.story-details {
    border-radius: 0 !important;
}

@media only screen and (min-width: 680px) {
div.zs {-webkit-columns: 2; -moz-columns: 2; columns: 2; float: left; width: 100%; margin: 0;
-webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;
    }
div.zs p {margin: 0 0 20px;}
}

/* == WordPress WYSIWYG Editor Styles == */

.wp-block-columns {
    float: left; width: 100%; position: relative;
}
.alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  width: 100vw;
  max-width: 100vw;
}

.wp-block-image.alignfull  {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  width: 100vw;
  max-width: 100vw;
 }
.wp-block-video.alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  width: 100vw;
  max-width: 100vw;
 }
.wp-block-cover img {
    height: 100% !important;
}

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
    margin-top: 0;
    text-align: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
    text-align: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
    text-align: center;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 0.9em;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}


.content1 ul li {
    padding: 5px 0;
}

.wp-block-gallery  {
 float: left; width: 100%;
}

.content1 > ul.wp-block-gallery {
    margin: 0; padding: 0;
}
.wp-block-gallery .blocks-gallery-item figcaption { box-sizing: border-box;}
.content1 > ul.wp-block-gallery  li {
    padding: 0;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: rgba(255,255,255,0.6) !important;
  color: #777777 !important;
  font-size: 0.9em !important; padding:10px !important;
}
.wp-block-image {
  margin: 0 !important;
}

.wp-block-image .alignright {
  margin: 0 0 .5em 1em !important;
}


.content1.am {
    margin-bottom: 0; padding-bottom: 0;
}

#anmeldung {
    float: left; width: 100%; margin: 0; padding: 0;
}
.anmeldelink {
    display: inline-block; padding: 10px 20px; background: #666666; color: #fff; font-weight: bold;
    border: 1px solid #878787; margin: 10px 0 0;
}
.anmeldelink:hover {
   background: #878787; color: #fff;
}

#main div.wpcf7 {
    float: left; width: 100%; padding: 10px 0; margin: 20px 0;
}
#main #anmeldung div.wpcf7 {
    margin: 0 0 20px;
}
.amltop {
    position: absolute; top: -15px; right: 2%;
}

.formfeld {
    float: left; width: 100%;
}

.wpcf7-form p {
    float: left; width: 100%; margin:0;
}

.wpcf7 label {
    float: left; width: 100%; padding: 5px 0; font-size: 0.9em;
}

.wpcf7 input {
   box-sizing: border-box; width: 100%;
}
.wpcf7 textarea {
   box-sizing: border-box; width: 100%; height:150px;
}
.wpcf7 input[type=submit] {
  width: 280px; max-width: 90%;
}

div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok  {
    float: left;
}
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, .wpcf7-response-output  {
    float: left;
}

.wpcf7 form.invalid .wpcf7-response-output::before {
  display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\2757"; color: #ffb900;
}
.wpcf7 form.sent .wpcf7-response-output::before {
  display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\2714"; color: #46b450;
}

/* Honigtopf des Kontaktformulars: fuer Menschen weg, fuer Bots da.
 *
 * Nicht display:none und nicht visibility:hidden - beides pruefen Bots
 * inzwischen ab und lassen solche Felder stehen. Ausserhalb des Bildes
 * geparkt bleibt das Feld im Dokument und wird ausgefuellt, und genau das
 * ist in include/kontakt.php das Erkennungsmerkmal.
 *
 * Vom Tastaturweg ist es ueber tabindex="-1" im Markup ausgenommen, von
 * Screenreadern ueber aria-hidden. Sonst waere es eine Falle fuer die, die
 * nicht mit der Maus arbeiten. */
.honigtopf {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.datenschutzfeld {
    float: left; width: 100%; margin: 0 0 10px 0;
}
.datenschutzfeld span.wpcf7-list-item-label {
    display: none;
}
.datenschutzfeld  span.wpcf7-list-item {
    display: inline-block;
    margin: 0 1em 0 0;
}
.datenschutzfeld .dsfw {
    float: left; width: 100%; padding: 10px; box-sizing: border-box; background: #efefef; text-align: center; border: 1px solid #ccc;
}


a.extern::before {
 display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\e8a1";
}
#footer .footdl a::before {
 display: block; float: left; padding: 0 10px 10px 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.0em;
  content: "\e0e0"; width: 20px;
}
#footer .footdl a {
    display: block; float: left; width: 100%; margin: 2px 0;
}
#footer li.address::before {
 display: block; float: left; padding: 0 10px 10px 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\e80c"; width: 20px;
}
#footer li.tel a::before, #headwidget a.tellink::before {
 display: inline-block; padding: 0 5px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.0em;
  content: "\e80f";width: 20px;
}
#footer li.email a::before {
 display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.0em;
  content: "\e800";width: 20px;
}
.details {
    float: left; width: 100%; margin: 20px 0 50px; border-top: 2px solid #006eb7; border-bottom: 2px solid #006eb7; padding: 10px 0 20px;
}
#detaillink {
    display: inline-block; padding: 10px 20px 7px; background: #666666; color: #fff; font-weight: bold;
    border: 1px solid #878787; margin: 10px 0;text-transform: uppercase;
}
#detaillink:hover {
   background: #878787; color: #fff;
}


.pagination {
  display: block !important;  float: left; width: 98%; margin: 30px 1%; text-align: center; padding: 10px 0;
}
.pagination h2 { display: none;}
.pagination a {
    display: inline-block; padding: 3px; margin: 5px;
}
.pagination span.current {
    display: inline-block; padding: 3px; margin: 5px; font-weight: bold;
}
.pagination a.prev::before {
 display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.1em;
  content: "\e802"; line-height: 20px;
 }
.pagination a.next::after {
 display: inline-block; padding: 0 0 0 10px;
  font-family: 'icons';
  text-decoration: none; font-size: 1.1em;
  content: "\e803"; line-height: 20px;
 }

 #postnavigation, #pagenavigation {
    display: block !important;  float: left; width: 100%; margin: 20px 0; text-align: center; padding: 10px 0; border-top: 1px solid #ddd;
 }
 #postnavigation > div, #pagenavigation > div {
  float: left; width: 33.33%; padding: 10px 0 0; text-align: center;
 }
 #pagenavigation div.nexlink, #postnavigation div.prevlink  {
     float: right;
 }

 #postnavigation div.prevlink a, #pagenavigation div.prevlink a {
     display: inline-block; padding: 20px;
 }
 #postnavigation div.nexlink a::before, #pagenavigation div.prevlink a::before {
 display: inline-block; padding: 0 10px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.1em;
  content: "\e80b"; line-height: 20px;
 }

 #postnavigation div.nexlink a, #pagenavigation div.nexlink a {
     display: inline-block; padding: 20px;
 }
 #postnavigation div.prevlink a::after, #pagenavigation div.nexlink a::after {
 display: inline-block; padding: 0 0 0 10px;
  font-family: 'icons';
  text-decoration: none; font-size: 1.1em;
  content: "\e80c"; line-height: 20px;
 }

 .shareandprint {
    margin: 50px 0; text-align: center; padding: 10px 0 0; float: left; width: 100%;
}

.shareandprint a {
    display: inline-block; padding: 10px; font-family: icons; background: #fff; color: #006eb7; font-size: 1.5em;
    width: 55px; height: 55px; box-sizing: border-box; margin:1px; text-align: center; line-height: 30px;
     border-radius: 50%; border: 2px solid #fff;
}
.shareandprint a:hover {  color: #fff; border: 2px solid #009CDF; background: #009CDF; }

.wp-block-table table td, .wp-block-table table th  {
    border-color: #fff !important;
}
.wp-block-table thead {
  border-bottom: 0 !important; background: #006eb7;
}

.startlogo figure {
   margin-left: 20% !important; max-width: 25%;
}

ul.check {
            margin: 0 0 10px 0;
			padding: 0;
			list-style-type: none;
}
ul.check li {
    position: relative; padding: 3px 0 3px 20px;
}
ul.check li:before {
   position: absolute; top: 10px; left: 3px;
  display: block; padding:0;
  float: left;  width:5px; height: 12px; background: #006eb7;
  speak: none;
  content: "";
}

#content ul.strich {
            margin: 0;
			padding: 0;
			list-style-type: none;
}
ul.strich li {
    position: relative; padding: 2px 0 2px 20px;
}
ul.strich li:before {
   position: absolute; top: 2px; left:0;
  display: block; padding:0;
  text-decoration: none; float: left; font-size: 1.0em;
  content: "—";
}

.balken ol {width: 100%; float: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0;counter-reset:item; list-style: none;}
.balken ol li {width: 25%; margin: 20px 0 30px; padding: 0 2% 40px 70px; counter-increment:item; position: relative;  min-height: 100px; box-sizing: border-box;  }
.balken ol li:before {
   margin-right: 10px; width: 50px;
   content: counter(item); color: #006eb7; font-weight: 400;
   position: absolute; top: 0; left:5px; font-size: 60px;
   text-align: center; border-right: 4px solid #006eb7; line-height:60px;
   display: inline-block; padding: 0 10px 0 0; height: 70px; box-sizing: border-box;
 }


 a#nulink { font-family: icons; font-size: 2.5em; text-decoration: none; position: absolute;
padding:15px 0; bottom: 8%; left: 50%; margin: 0 0 0 -30px;
width: 60px; height: 60px; box-sizing: border-box;
font-weight: normal;
color: #fff;
z-index: 200; text-align: center;
opacity:0.6;-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
line-height: 30px;
}
#bilder:hover a#nulink {
bottom:5%;
}
a#nulink:hover {opacity:0.9; color: #006eb7;}

.c-accordion__item { float: left; width: 100%;} /* The accordion item container */
.c-accordion__title { font-size: 1.4em; border: 2px solid #006eb7; padding: 20px; margin-bottom: 0;  margin: 20px 0 30px !important;
color: #000; font-weight: 400; position: relative;
}
.c-accordion__title::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; bottom: -25px; left: 7%;background-size: 50px auto; z-index: 10;
}

.c-accordion__title:focus { outline: 0 none; } /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content { float: left; width: 100%;} /* An accordion item content container */

.c-accordion__title::after {
    font-size: 30px; width: 37px; height: 37px; color: #006eb7 !important; text-align: center; right: 10px !important; box-sizing: border-box;
}
.is-open .c-accordion__title::after { background: #006eb7;  }
.c-accordion__title:hover {
    background: #006eb7; color: #fff;
}
.is-open .c-accordion__title {
    background: #006eb7; color: #fff;
}
.is-open .c-accordion__title::before, .c-accordion__title:hover::before {
    content:""; width: 50px; height: 25px; background: url('images/eckgruen.svg') center center no-repeat; position: absolute; bottom: -25px; left: 7%;background-size: 50px auto; z-index: 10;
}

.page-id-19 .is-open .c-accordion__title {
   border: 2px solid #006eb7; color: #000; background: #fff
}
.page-id-19 .is-open .c-accordion__title::before,.page-id-19 .c-accordion__title:hover::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; bottom: -25px; left: 7%;background-size: 50px auto; z-index: 10;
}
.page-id-19 .is-open .c-accordion__title::after {
    display: none;
}

.c-accordion__title img {
    position: absolute; top: -2px; right: -2px; height: calc(100% + 4px) !important; width: auto !important; z-index: 2;
}
.is-open .c-accordion__title img {
    display: none;
}

.flexslider .slides > li {
  margin-left: 0 !important;
}
.flexslider {
    background: transparent !important; border: 0 !important;
}
.flex-viewport {
    overflow: visible !important; min-height: 500px;
}
#content .flex-direction-nav a  {
    height: 50px;
}

#content .flex-direction-nav a:before {
  float: left; display: block; font-family: "icons";
  font-size: 40px;
  content: '\e805';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0; height: 50px;line-height: 50px;
}
#content .flex-direction-nav a.flex-next:before {
  content: '\e806';
}

#content .flexslider ul.wp-block-latest-posts__list.is-grid li {
    float: left; width:380px; margin: 15px 1%; background: #004370; color: #fff; box-sizing: border-box; padding: 0;
    position: relative;
    overflow: hidden;  height: 480px;
}


#content .flexslider  ul.wp-block-latest-posts__list.is-grid li div.wp-block-latest-posts__featured-image  {
    float: left; width: 100%; margin: 0; height: 100%; overflow: hidden; order: 1; position: absolute; top:0; left: 0;  max-height: 100%;
}

#content .flexslider  ul.wp-block-latest-posts__list.is-grid li > a {
    display: block; margin: 15px 0 5px; padding: 0 5%; float: left; width: 90%;
    overflow: hidden;
font-size: 1.2em;
line-height: 1.4em;
 order: 3;  color: #fff; position: absolute; top: 250px; left:0; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}
#content .flexslider  ul.wp-block-latest-posts__list.is-grid time {
    float: left; width: 90%; margin: 0 5%; font-size: 1.0em; color: #fff;order:2;  position: absolute; top: 230px; left:0;
}

#content .flexslider ul.wp-block-latest-posts__list.is-grid div.wp-block-latest-posts__post-excerpt {
   float: left; width: 90%; padding: 10px 5%;order: 4; margin: 10px 0; position: absolute; top: 280px; left:0;
}
#content .flexslider  ul.wp-block-latest-posts__list.is-grid .weiterlink { position: absolute; bottom: 0; left: 0; order: 5; float: left; width: 90%; padding: 5px 5%; text-align: center; z-index: 4; }

#content .flexslider  .wp-block-latest-posts__featured-image img {
  height: 100% !important;
 width: 100% !important; object-fit: cover;
}

 #footer .footlogo {
     margin-top: 40px !important;
}

.flip-box-block-front-inner, .flip-box-block-back-inner, .flip-box-block-front-inner > div, .flip-box-block-back-inner > div {
    height: 100% !important; overflow: hidden;
}

:where(.wp-block-cover-image.is-light:not(.has-text-color)), :where(.wp-block-cover.is-light:not(.has-text-color)) {
  color: #666 !important;
}

.flip-box-block .wp-block-group {display: flex; flex-wrap: wrap; justify-content:center; align-items: center;}

.flip-box-block .wp-block-group__inner-container {width: 100%;}

.flip-box-block-back-inner > div {
    overflow: auto !important;
}


.mobilenav {
    display: none;
}
.mobilenav > div  {
    margin-right: -500px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; position: relative; z-index: 2;
}
.mobilenav.open > div {
  margin-right: 0;
}
#menu { width: 100%; margin: 0;
-webkit-transition: none;
-moz-transition: none;
transition: none;
position: fixed; top: 0; right: 0; height: 100%; z-index: 120; padding: 0; }

#menu > div {
    float: right; width: 320px; height: 100%; background:#fff; padding-top: 200px; box-sizing: border-box;  box-shadow: 0 0 10px 0 #000; overflow: auto; z-index: 2;
}

#menu > div#navhg {
float: left;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    padding: 0;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;  z-index: 1;
}

#menu ul li { display: block; width:100%; position: relative; max-width: 100%;}
span.qn {display: block; font-family: icons; font-size: 23px; background: #e8e8e8;  background: rgba(231,231,231,0.7);
position: absolute; top: 0; right: 0; z-index: 4; width: 20px; height: 26px; cursor: pointer; padding: 13px; color: #004370; }


#menu ul li a {
float: left;
width: 100%;
padding: 15px 5%;
box-sizing: border-box;
height: auto;
}

#menu ul.sub-menu {
position: relative;
top: auto !important; padding: 0 !important;
width: 100%;
-webkit-transition: none;
-moz-transition: none;
transition: none;
display: none;
opacity: 1; min-width: 50px;
visibility: visible;
}
#menu li ul.sub-menu {
    width: 100% !important;
    -webkit-transition: none;
-moz-transition: none;
transition: none;
}
#menu li ul.sub-menu li {
    min-height: 0 !important;
}
#menu ul.sub-menu li a {
padding: 15px 5%;
font-size: 0.95em;
text-align: center;
}
#menu ul.sub-menu ul { display: block; position: relative; left: 0; background: transparent; margin: 0; padding: 0 !important;}


.box {
    border: 2px solid #006eb7; box-sizing: border-box; padding:0; position: relative; float: left; width: 100%;
}
.page-id-17 .box .wp-block-columns {
    min-height: 450px;
}

.wp-block-column .box {
  padding: 10px 10% !important;
}
.box .wp-block-columns {
    margin-bottom: 0 !important;
}
.box .bildfeld figure {
    width: 100%; height: 100%;
}
#content .box .bildfeld figure img { width: 100%; height: 100% !important; object-fit: cover;}

.wp-block-columns .textfeld {
    /* border-box, damit der Innenabstand die Spalte nicht verbreitert. Ohne das
       war die Textspalte in der gespiegelten Projektvorlage 446px breit und die
       Bildspalte 402 - im nicht gespiegelten Eintrag darueber dagegen 424 zu
       424. Untereinander gesetzt sprangen die Bildbreiten damit von Eintrag zu
       Eintrag um 22px. */
    box-sizing: border-box;
    padding-top: 10px; padding-bottom: 10px;
}
/* Steht die Textspalte zuerst - gespiegelte Projektvorlage -, liegt sie an der
   linken Kante des Kastens und braucht dort Abstand zur Rahmenlinie. Im nicht
   gespiegelten Fall uebernimmt das der Spaltenabstand. */
.wp-block-columns .textfeld:first-child {
    padding-left: 5%;
}

/* Der Projektslider fuellt die Bildspalte.
 *
 * Gutenslider setzt seine Hoehe als feste min-height auf .eedee-swiper-outer -
 * bei uns 420px. Die Kastenhoehe bestimmt aber die Textspalte: gemessen 602px
 * bei der Vorlage, 606px beim echten Projekt. Ohne diese Regel stuende der
 * Slider oben in der Spalte und darunter 182px Weiss.
 *
 * BBI loest das, indem es die Hoehe je Projekt von Hand einstellt - auf ihrer
 * Projektseite stehen fuenf Slider mit 860, 660, 700, 690 und 600px. Das ergibt
 * fuenf verschiedene Bildhoehen untereinander. Hier faellt die Einstellung weg:
 * der Slider nimmt die Hoehe, die der Text vorgibt, und die Folien schneiden
 * ueber object-fit: cover zu - dieselbe Mechanik wie bei den Leistungsbildern.
 *
 * min-height bleibt als Untergrenze stehen: hat ein Projekt sehr wenig Text,
 * faellt der Kasten nicht unter 420px zusammen.
 *
 * .gs-frontend steht im Selektor, weil das Plugin seine Hoehe mit derselben
 * Zahl von Klassen setzt (.wp-block-eedee-block-gutenslider.gs-frontend:not(...))
 * und sein CSS ueber wp_head() nach dem Theme-Stylesheet ausgeliefert wird - bei
 * Gleichstand entscheidet die Reihenfolge, und die verliert das Theme. Dieselbe
 * Falle wie bei den WordPress-Spalten weiter unten. */
/* Die Bildspalte wird selbst zum Flexcontainer, statt dem Slider eine
   Prozenthoehe zu geben: height: 100% braucht eine feste Elternhoehe, und die
   hat die Spalte nicht - ihre Hoehe entsteht erst durch das Strecken im
   Spaltenraster. Flex streckt ohne diese Bedingung. BBI loest seine
   Video-Projekte im Customizer-CSS genauso (.video-projekt .bildfeld
   { display: flex }). */
.box .bildfeld {
    display: flex;
    flex-direction: column;
}

.box .bildfeld > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* Die Hoehe wird an einer einzigen Stelle umgestellt: an der Variablen.
 *
 * Gutenslider verteilt aus --gutenslider-min-height die Hoehe an .eedee-swiper-
 * outer, .swiper, .swiper-wrapper, .swiper-slide und .eedee-background-div; das
 * Bild ist 100 % davon (build/gutenslider-init.css, build/vendor/gs-base.css).
 * Wer einzelne dieser Elemente ueberschreibt, erwischt nie alle - genau das war
 * der erste Versuch, bei dem der Slider die Spalte fuellte, das Bild darin aber
 * auf 420px stehen blieb.
 *
 * !important ist noetig, weil das Plugin die Variable als Inline-Stil auf
 * .eedee-swiper-outer schreibt; gegen einen Inline-Stil hilft keine Spezifitaet.
 *
 * Nur ab 782px, also solange die Spalten nebeneinander stehen. Darunter stapelt
 * WordPress sie, die Bildspalte wird nicht mehr gestreckt und hat keine feste
 * Hoehe mehr - dann faellt 100 % in sich zusammen: gemessen 80px statt 581.
 * Gestapelt gilt deshalb wieder der Wert aus dem Block (260px auf dem Handy). */
@media only screen and (min-width: 782px) {

	.box .bildfeld .eedee-swiper-outer {
		--gutenslider-min-height: 100% !important;
		--gutenslider-min-height-md: 100% !important;
		--gutenslider-min-height-sm: 100% !important;
	}
}

/* Beide Spalten eines Projektkastens auf halbe Breite.
 *
 * WordPress setzt flex-basis: 0, und eine Flexspalte kann nicht schmaler werden
 * als ihr Innenabstand - der 5-%-Abstand der Textspalte wurde damit zur
 * Grundbreite addiert, bevor der freie Platz verteilt wurde. Gemessen: 446px
 * Text gegen 402px Bild in der gespiegelten Vorlage, waehrend der Eintrag
 * darueber 424 zu 424 stand; untereinander sprangen die Bildbreiten um 22px.
 *
 * Mit flex-basis: 50% und border-box liegt der Abstand innerhalb der Spalte und
 * beide bleiben gleich breit. Zwei Versuche vorher taugten nicht: border-box
 * allein aendert an der Grundbreite nichts, und den Abstand an die Kinder zu
 * haengen halbierte ihn (5 % rechnen dann gegen die Spalte) und liess die
 * Strichliste aussen vor, weil #content ul.strich mit einer ID gewinnt.
 *
 * :has() begrenzt die Regel auf Spaltenpaare mit Textfeld, also auf die
 * Projektvorlagen. Der Meldungskasten der Startseite traegt seine 66/33-Teilung
 * als Inline-Stil und bliebe ohnehin unberuehrt.
 *
 * Das fuehrende .box ist noetig, nicht schmueckend: WordPress setzt
 *   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
 *     { flex-basis: 0 }
 * mit drei Klassen - genau so viel wie diese Regel ohne .box - und liefert sein
 * Block-CSS inline nach dem Theme-Stylesheet aus. Bei Gleichstand entscheidet
 * die Reihenfolge, und die verliert das Theme. Mit .box sind es vier Klassen. */
.box .wp-block-columns:has(> .textfeld) > .wp-block-column {
    flex-basis: 50%;
    box-sizing: border-box;
}

figure.box {
    padding: 0;
}

.box.pfoli::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; top: -2px; left: 7%;background-size: 50px auto; z-index: 10;
}
.box.pfore::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; top: -2px; right: 43%;background-size: 50px auto; z-index: 10;
}
.box.pfula::before {
    content:""; width: 50px; height: 25px; background: url('images/eckmitrand.svg') center bottom no-repeat; position: absolute; bottom: -25px; left: 7%;background-size: 50px auto; z-index: 10;
}
.boxgruen {
    border: 1px solid #006eb7; background: #006eb7; color: #fff; box-sizing: border-box; padding: 10px 30px; position: relative; font-size: 1.2em;
}
.boxgruen.pfula::before {
    content:""; width: 50px; height: 25px; background: url('images/eckgruen.svg') center center no-repeat; position: absolute; bottom: -25px; left: 7%;background-size: 50px auto; z-index: 10;
}

.boxweiss {
    border-top: 2px solid #006eb7; border-left: 2px solid #006eb7; border-right: 2px solid #006eb7; background: #fff; box-sizing: border-box; padding: 10px 30px; position: relative; font-size: 1.2em;
}
.boxweiss.pfula::before {
    content:""; width: 50px; height: 25px; background: url('images/eckweiss.svg') center center no-repeat; position: absolute; bottom: -24px; left: 7%;background-size: 50px auto;  z-index: 10;
}
.boxweiss.pfola {
    border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; background: #fff; box-sizing: border-box; padding: 10px 10%; position: relative;
}
.boxweiss.pfola::before {
    content:""; width: 50px; height: 25px; background: url('images/eckweisso.svg') center center no-repeat; position: absolute; top: -25px; left: 7%;background-size: 50px auto;
}

.boxweissop {
      border: 2px solid #006eb7; background: #fff;position: relative; box-sizing: border-box; width: 100%; float: left;
}
.boxweissop .wp-block-columns {
    margin: 0 !important;
}

.stellenanzeige {
    position: relative; margin: 10px 0;
}

.stellenanzeige .stellenvorschau {
    cursor: pointer;
}
.stellenanzeige .stellenbeschreibung {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
height: auto; opacity: 1;
}
.stellenanzeige:not(.aktiv) .stellenbeschreibung {
  height: 0; opacity: 0;
}

.stellennav {
    list-style: none; float: left; width: 102%; margin: 10px 0 10px -1%; padding: 0 !important;
}
.stellennav li {
    float: left; width: 31.33%; margin: 10px 1%; text-align: center;
}
.stellennav li a {
    display: block; float:left; width: 100%; box-sizing: border-box; border: 2px solid #006eb7; font-size: 1.1em; padding: 20px;
}
.stellennav li a:hover, .stellennav li a.aktiv {
    border: 2px solid #006eb7; color: #fff; background: #006eb7;
}


#standortnav {
    float: left; width: 100%; margin: 10px 0; text-align: center;
}
#standortnav a {
    display: inline-block; padding: 10px 30px; color: #000; margin: 0 5px;
}
.standort {
    float: left; width: 100%; box-sizing: border-box; border: 2px solid  #006eb7; min-height: 300px;
}
.standort h2 {
    color: #000; font-weight: 400;
}
.standort .contentelement p {
    font-size: 1.0em !important;
}

#nextsobutton {
    float: left; width: 100%;
}
#nextsobutton a {
    float: right; display: block; margin: 10px; max-width: 50px;
}

.standort .cih {
  float: left; width: 35%; padding: 10px 30px; box-sizing: border-box;
}
.standort .cii {
    float: right; width: 65%; position: relative;
}
.standort .cii img {
    float: left; width: 100%;
}

.historie .has-x-large-font-size {
    color: #006eb7; font-weight: bold; font-size: 3.5em !important;
}

.loader { float: left; width: 100%; text-align: center; margin: 20px 0;}
.loader div { display: inline-block; border:3px solid #ccc; border-top:3px solid #006eb7; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;z-index: 6;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.pfeilbild, .pfeilbildli {
    position: relative;
}



.standortmap {
    position: relative; margin-bottom: 100px; float: left; width: 100%;
}
.standortmap .somarker {
    position: absolute;width: 10%; height: 70px; display: block; cursor: pointer;
}
#somregensburg { top: 15%; left: 43%;}
#somingolstadt { top: 32%; left: 28%;}
#somdingolfing { top: 43%; left: 54%;}
#somlandshut { top: 49%; left: 48%;}
#sommarktschwaben { top: 77%; left: 41%;}
#standorinfos {
    position: absolute; top: -2px; left: 0; width: 500px; background: #fff; border: 2px solid #006eb7; display: none;
}
#standorinfos h2 {
    margin-top: 10px; font-size: 1.2em;
}

#standorinfos a.close {
    position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: transparent; border-radius: 50%; box-sizing: border-box; padding: 5px;
}

#standorinfos div.contentelement {
    float: left; width: 100%; display: flex;flex-direction: row-reverse;
}

#standorinfos .cii {
    float: right; width: 50%; position: relative;
}
#standorinfos .cii img {
    width: 100%; height: 100% !important; float: left; object-fit: cover;
}
#standorinfos .cii::after {
  content: "";
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url('images/bildoverlay2.svg') right top no-repeat;
    background-size: auto;
  background-size: 135px auto;
}
#standorinfos .cih {
    float: left; width: 50%; padding: 10px 20px; box-sizing: border-box;
}

#mitarbeiter div.contentelement {
    float: left; width: 100%; display: flex; position: relative;
}
#mitarbeiter .cii {
     width: 33.33%; position: relative;
}
#mitarbeiter .cii::after {
    content:""; width: 30px; height: 100%; position: absolute; top: 0; right: -1px; background: url('images/bildoverlay.svg') no-repeat; background-size: 135px auto;
}
#mitarbeiter .cih {
    width: 66.66%; padding: 0 20px; box-sizing: border-box;
}

#mitarbeiter table tr td:first-child {
    white-space: nowrap; vertical-align: top;
}

.historie {
    position: relative; float: left; width: 100%;
}


.mapslink {
    float: left; width: 100%; margin-top: 30px;
}

.mapslink a {
    /* Label-Stufe aus DESIGN.md. Vorher 13px: das ist Text und kein Symbol,
       damit fuenf Pixel unter der kleinsten dokumentierten Stufe - und der
       Link steht unter einem Kartensymbol, also allein und ohne Kontext, der
       ihn lesbar machen wuerde. Aus BBIs Vorlage uebernommen. */
    display: inline-block; text-align: center; font-size: 18px;
}
.mapslink a::before {
   content:""; display: block; width: 100%; height:45px; background: url('images/location.svg') center top no-repeat; background-size: auto 40px;
}

#content .slick-next {
    right: -25px;
}
#content .slick-next::before {
    content:""; width: 45px; height: 50px; display: inline-block; float: left;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='svg1' version='1.1' viewBox='0 0 45.858932 47.879356' width='45.858932' height='47.879356' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3C!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186) --%3E%3Cdefs id='defs1'%3E%3Cstyle id='style1'%3E .st0 %7B fill: none; stroke: %237fb03c; stroke-miterlimit: 11; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='layer1' transform='translate(-27.227039,-26.060322)'%3E%3Cpath id='path505' class='st0' d='M 46.1,73.2 71.6,50 46.1,26.8' /%3E%3Cpath id='path507' class='st0' d='M 27.9,73.2 53.4,50 27.9,26.8' /%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
    background-size: 100% auto;
}

#content .slick-prev {
    left: -55px;
}
#content .slick-prev::before {
     content:""; width: 45px; height: 50px;display: inline-block; float: right;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='svg1' version='1.1' viewBox='0 0 45.858932 47.879356' width='45.858932' height='47.879356' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3C!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186) --%3E%3Cdefs id='defs1'%3E%3Cstyle id='style1'%3E .st0 %7B fill: none; stroke: %237fb03c; stroke-miterlimit: 11; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='layer1' transform='translate(-26.414031,-26.060322)'%3E%3Cpath id='path505' class='st0' d='M 53.4,26.8 27.9,50 53.4,73.2' /%3E%3Cpath id='path507' class='st0' d='M 71.6,26.8 46.1,50 71.6,73.2' /%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#content .slick-next.slick-disabled::before, #content .slick-prev.slick-disabled::before {
  opacity: 0;
}

#content .slick-dots li.slick-active button::before {
  opacity: .75;
  color: #006eb7;
}

#content ul.slick-dots {
    padding: 0 !important; bottom: -40px;
}
#content ul.slick-dots li {
    margin: 10px 0 0;
}

#content ul.slick-dots li button::before {
 font-size: 13px;
}


.wp-block-cb-carousel button.slick-arrow {
top: auto; bottom: -40px;
}
#content .wp-block-cb-carousel .slick-next {
    right: 50px; z-index: 100;
}
#content .wp-block-cb-carousel .slick-prev {
    left: 50px;  z-index: 100;
}
#content .wp-block-cb-carousel {
    margin-bottom: 50px;
}

.projekt.nl, .wp-block-spacer.nl{
    display: none;
}

blockquote {
    border-left: 0 !important; padding-left: 0 !important;
}

.desktopnone { display: none !important;}


@media only screen and (min-width: 1160px) {
.pfeilbild::after {
    content:""; width: 30px; height: 100%; position: absolute; top: 0; right: -1px; background: url('images/bildoverlay_.svg') repeat-y; background-size: 135px auto;
}
.standort .cii::after {
    content:""; width: 30px; height: 100%; position: absolute; top: 0; left: 0; background: url('images/bildoverlay3.svg') right top no-repeat; background-size: 135px auto;
}

.stellenanzeige .pfeilbild::after {height: 101%; }

.historie::before {
    content:""; width: 2px; background: #006eb7; height: 100%; display: block; background-size: auto 100%; z-index: 10; position: absolute; top: 0; left: calc(25% - 40px); z-index: 1;
}
.historie .wp-block-columns:first-child::before {
    content:""; width: 14px; height: 14px; background: #006eb7; position: absolute; top: -20px; left: calc(25% - 46px); border-radius: 50%;
}
.historie .wp-block-columns:last-child::before {
    content:""; width: 28px; height: 22px; background: url('images/historypfeil.svg') center bottom no-repeat; position: absolute; bottom: -21px; left: calc(25% - 53px); border-radius: 50%;
}
.historie .wp-block-columns {
    margin-top: 20px;margin-bottom:20px;
}
.historie .wp-block-columns .wp-block-column:first-child {
    position: relative; z-index: 2;
}
.historie .wp-block-columns .wp-block-column:first-child::before {
    content:""; position: absolute; right: -8px; top: 10px; width: 60px; height: 62px; background: url('images/historypfeil.webp') center center no-repeat; z-index: 2;
}

}

@media only screen and (min-width: 1760px) {

#main {
    padding: 0;
}

#logocontainer {
padding: 30px 80px 30px 20px; position: fixed; width: 300px; right: 0; float: right; left: auto; z-index: 140;
}
#logocontainer #logo, #logo img {
    width: 100%;
}

#menu { width:320px; padding: 0; margin: 0; display: block !important; }
#menuelink {
    display: none !important;
}
.mobilenav > div {
    margin-right: 0 !important;
}



}

@media only screen and (min-width: 1460px) {
 #footer .footlogo {
      margin-left: -100px !important; max-width: 400px;
  }

}

@media (min-width: 781px) {

.oversize img {
    float: right; width: 50vw !important; height: auto !important; max-width: 200% !important;
}


.mitsidebar .inhalt {
    width: 67%;
}

.leistungsspalte {
    float: left; width: 50%;
}

.projekt .textfeld {
    padding-right: 10px;
}

}

@media only screen and (max-width: 1160px) {
    #menu .current-menu-item ul.sub-menu, #menu .current-menu-parent ul.sub-menu {
  display: block;
}


}

@media only screen and (max-width: 1360px) {

.startlogo figure { margin-left: 5% !important; }
}

@media only screen and (max-width: 1160px) {

#main { padding: 0;}
.bild { min-height: 500px; max-height: 500px; }
#inhalt {
    padding-top: 0;
}

#menuelink{   z-index: 130;}
#headwidget { top: 5px; right: 0; font-size: 0.9em; }
#headwidget .widget_search { top: 95px; right: 0; padding: 20px; background:#004370;  width: 100vw; box-sizing: border-box; min-width: 280px;}


.teaserbox {width:48%;}

/* Das Gegenstueck zur entfernten Lasche: derselbe Selektor, der nie trifft. */

.balken ol li {width: 50%;  }
.content1 .wp-block-cover:first-child {
    max-height: 250px !important; min-height: 250px !important; margin-top: 50px;
}

.wp-block-cover.mobilnone, .wp-block-cover.desktopnone {
    margin-top: 80px;
}

}
@media only screen and (max-width: 960px) {

#titel { margin:-150px 2% 30px; width: 71%; left: 20%;}

.fzic div.info-men {width: 92%; margin: 10px 4%;}

h1 { font-size:1.8em !important;}
.wp-block-cover h1.has-large-font-size {
     font-size: 2.4em !important;
}

h2 { font-size: 1.4em;}
h2.has-large-font-size {
    font-size: 1.8em !important; line-height: 1.2em;
}

.bildtitle.iv { bottom: 10%;}
.bildtitle h1 {  font-size: 1.8em;}

.wp-block-eedee-block-gutenslider.arrow-position-sides button {
    display: none !important;
}

#breadcrumbs { left: 80%; margin: 0 0 0 -80vw; width: 80vw;  }
.startbild {
    max-height: 400px; min-height: 50vh !important;
}
.startlogo figure { margin-left: 1% !important; }

.slide-content {
    padding: 40px !important;
}
.slide-content .wp-block-group {
    max-width: 70% !important;
}
.stellennav li { margin-top: 5px; margin-bottom: 5px;}


#standorinfos { max-width: 80%; top: -2px; left: 10% !important; }
#standorinfos .contentelement {
    flex-wrap: wrap;
}

#standorinfos .cii {
    float: right; width: 100%;
}
#standorinfos .cii img {
    width: 100%; height:auto !important; float: left; object-fit: cover;
}
#standorinfos .cii::after {
display: none;
}
#standorinfos .cih {
    float: left; width: 100%; padding: 10px; box-sizing: border-box;
}


.c-accordion__title { font-size: 1.2em; }
}

@media only screen and (max-width: 780px) {
.mobilnone { display: none !important;}
.desktopnone { display: flex !important;}

#main div.wpcf7 {
    margin-top: 0 !important;
}

.etg24 .aligncenter {
    float: left; max-width: 120px;
}
.wp-block-cover.has-parallax:not(.hoch), .wp-block-cover:not(.hoch) .wp-block-cover__image-background.has-parallax, .wp-block-cover.alignfull:not(.hoch) {
  background-attachment: scroll !important;
  max-height: 400px; min-height: 400px !important;
}
.content1 .wp-block-cover:first-child {
    max-height: 250px !important; min-height: 250px !important; margin-top: 90px;
}
.home .content1 .wp-block-cover:first-child {
    max-height: 350px !important; min-height: 350px !important;
}

#footer .wp-block-columns {
    margin: 0 !important;
}

.standort .cih{
  width: 100%; padding: 10px 30px;
}
.standort .cii {
  width: 100%;
}
.standort img {
   width:100%;
}
#mitarbeiter div.contentelement {
    flex-wrap: wrap;
}

#mitarbeiter .cii {
     width: 100%;
}
#mitarbeiter .cii::after {
    display: none;
}
#mitarbeiter .cih {
    width: 100%; padding: 20 0;
}

.wp-block-columns .textfeld {
    padding: 0 5% 20px; box-sizing: border-box;
}
.wp-block-columns {
   column-gap: 0; gap: 0 !important;
}
.stellennav li { width: 48%;}

.boxweiss {margin-top: 20px;}
}


@media only screen and (max-width: 680px) {
#logocontainer #logo, #logo img {width: 100px; }
#content ul.wp-block-latest-posts__list.is-grid li { width:97%; margin: 10px 1.5%; }
.amltop {  display: none; }
.bild { min-height: 300px; max-height: 400px; }

#menuelink { top:30px; }

.mtphr-dnt-nav {
    display: none;
}


.has-larger-font-size {
    font-size: 1.8em !important;
}
h1::after {
    width: 250px;
}

h1.has-text-align-center::after { width: 250px; margin-left: -125px; }

.startlogo figure { max-width: 40%; }
.balken ol li {width:100%;  }

#headwidget .widget_search { top:80px; right: 0;  }

#footwidget, #footwidget2 {width: 42%; margin: 20px 4%;}
#footnav {  width: 42%; margin: 10px 2%;  }


.slide-content {
    padding: 30px !important;
}
.slide-content .wp-block-group {
    max-width: 85% !important; font-size: 0.9em !important;
}
.stellennav li { margin-top: 0; margin-bottom: 0;} 
}



@media only screen and (max-width: 460px) {

.bild { min-height: 300px; max-height: 400px; }
.inhalt {width: 90%; padding:0 5%; }
#titel { margin:-50px 2% 30px; width: 96%; left:0;}
#searchform input {  font-size: 0.9em;  }
#searchform [type=submit] { font-size: 0.9em;  }
.alignleft, img.alignleft {
	margin-right: 0;max-width: 100%; width: 100% !important;
	}
.alignright, img.alignright {
	margin-left: 0;max-width: 100%; width: 100% !important;
	}


.bildtitle.iv { bottom: 5%;}
.bildtitle h1 {  font-size: 1.2em;}

.teaserbox {width:98%; margin: 10px 1%; }

#breadcrumbs { font-size: 0.9em; }
#headwidget .widget_search { top:75px;  }
.startbild {
    max-height: 200px; min-height: 30vh !important;
}

.wp-block-image .alignright {
    text-align: left;
}

#menu > div {width: 80%;}


#footwidget, #footwidget2 {width: 90%; margin: 20px 5%;}
#footnav {  width: 90%; margin: 10px 3%;  }
.stellennav li a { font-size: 1.0em; padding: 10px;}
}



/* ===========================================================================
 * AUKTOR: Navigation links statt Burgermenue
 * ---------------------------------------------------------------------------
 * Einziger bewusster Bruch mit dem BBI-Vorbild. Dort ist der Burger der
 * Normalfall: #menuelink steht auf display:block, das Menue faehrt als
 * 320-px-Schublade von rechts ein, und erst ab 1760px steht es dauerhaft -
 * dann ebenfalls rechts. Auktor-Besucher kennen seit Jahren eine feste
 * Spalte links, die bleibt.
 *
 * Bewusst als geschlossener Block am Dateiende statt verstreuter Eingriffe
 * in BBIs Media-Query-Kaskade: er kommt spaeter im Stylesheet und gewinnt
 * damit bei gleicher Spezifitaet, und ein spaeteres Update des BBI-Themes
 * laesst sich daneben legen, ohne diesen Umbau zu suchen.
 *
 * Schwelle 955px = 59,6875em, exakt der Punkt, ab dem das alte
 * Twenty-Fifteen-Theme seine Sidebar eingeblendet hat.
 * ======================================================================== */

@media only screen and (min-width: 955px) {

	/* Inhalt macht links Platz fuer die Spalte */
	#wrapper {
		box-sizing: border-box;
		padding-left: 300px;
	}

	/* Kopf wird zur festen Spalte am linken Rand.
	   overflow-y: auto, damit ein langes Menue auf niedrigen Schirmen
	   scrollbar bleibt statt unten abgeschnitten zu werden. */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		height: 100%;
		min-width: 0;
		overflow-y: auto;
		background: #fff;
		border-right: 1px solid #f2f2f2;
		text-align: left;
		z-index: 140;
	}

	#logocontainer {
		position: static;
		float: none;
		width: 100%;
		padding: 30px 25px 20px;
	}

	#logocontainer #logo,
	#logocontainer #logo img {
		float: none;
		width: 100%;
		max-width: 220px;
	}

	/* Burger und seine Abdunklung entfallen hier vollstaendig */
	#menuelink,
	#menu #navhg,
	#menu > div#navhg {
		display: none !important;
	}

	/* Menue steht im Fluss der Spalte, nicht mehr als Schublade */
	#menu {
		position: static;
		float: none;
		display: block !important;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 40px;
		text-align: left;
		transition: none;
	}

	#menu.mobilenav,
	.mobilenav {
		display: block !important;
	}

	#menu > div,
	.mobilenav > div {
		float: none;
		width: 100%;
		height: auto;
		margin: 0 !important;
		padding: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	/* Eintraege untereinander - BBIs waagerechte Anordnung aus der
	   1160px-Abfrage wird hier zurueckgenommen */
	#menu ul,
	#menu ul.nav-men {
		display: block;
		float: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	#menu ul li {
		display: block;
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	#menu ul li a {
		float: none;
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 9px 25px;
		text-align: left;
		font-size: 18px;
		height: auto;
	}

	/* Untermenues stehen dauerhaft offen und eingerueckt, statt als
	   ausklappende Ebene ueber dem Inhalt zu schweben. Ohne JavaScript
	   erreichbar, und bei zwei Ebenen uebersichtlicher als ein Aufklapper. */
	#menu ul.sub-menu {
		position: static;
		display: block;
		visibility: visible;
		opacity: 1;
		width: 100% !important;
		min-width: 0;
		margin: 0;
		padding: 0 !important;
		top: auto !important;
		transition: none;
	}

	#menu ul.sub-menu li a {
		width: 100%;
		box-sizing: border-box;
		padding: 7px 25px 7px 45px;
		text-align: left;
		font-size: 0.85em;
		background: transparent;
		color: #000;
		border: 0;
	}

	#menu ul.sub-menu li a:hover,
	#menu ul li ul.sub-menu li.current-menu-item a {
		background: transparent;
		color: #006eb7;
	}
}

/* ---------------------------------------------------------------------------
 * Unter 955px bleibt BBIs Schublade unveraendert - sie faehrt von rechts ein,
 * und der Umschalter sitzt oben rechts. Ein Versuch, beides nach links zu
 * spiegeln, legte den Umschalter genau auf das Logo: er steht fest auf
 * left: 5%, das Logo beginnt bei 15px.
 *
 * Wichtiger ist hier etwas anderes: BBIs #header ist absolut positioniert und
 * schwebt ueber dem Titelbild der Seite. Auktors Seiten haben kein Titelbild,
 * dadurch lag der Kopf ueber dem Seitentitel - die H1 stand auf y=0 hinter dem
 * Logo. Auf schmalen Schirmen laeuft der Kopf deshalb im normalen Textfluss.
 * ------------------------------------------------------------------------ */

@media only screen and (max-width: 954px) {

	#header {
		position: relative;
		height: auto;
		background: #fff;
	}

	#main {
		padding-top: 10px;
	}

	/* Umschalter neben dem Logo, nicht darauf */
	#menuelink {
		top: 28px;
		right: 5%;
		left: auto;
	}
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Leistungen als Akkordeon-Raster
 *
 * Uebernimmt bewusst BBIs Akkordeon-Sprache - 2px-Rahmen in der Leitfarbe,
 * die kleine Ecke unten links, Umschlag auf farbigen Grund im offenen Zustand
 * - setzt sie aber auf natives <details>/<summary> statt auf das Plugin
 * "Accordion Blocks". Deshalb .leistung[open] statt .is-open.
 * ------------------------------------------------------------------------ */

.leistungen-raster {
	float: left;
	width: 100%;
	display: flex;
	align-items: flex-start;
	column-gap: 40px;
}

/* Jede Spalte fliesst fuer sich. Aufklappen verschiebt damit nur, was in
   derselben Spalte darunter steht - die andere Spalte bleibt stehen. */
.leistungen-spalte {
	flex: 1 1 0;
	min-width: 0;
}

/* Der BBI-Punkt ist keine Leistung von Auktor, sondern der Rahmen um die
   vier darueber - deshalb unter beiden Spalten ueber die volle Breite. */
.leistungen-voll {
	float: left;
	width: 100%;
}

/* Die 14 Felder der Gruppe als Begriffsraster.
 *
 * Sie standen als Strichliste, zuletzt zweispaltig. Als Liste liest man 14
 * Begriffe von oben nach unten durch und sucht das Ende; als Raster sieht man
 * die Menge auf einmal - und genau das behauptet der Satz darueber. Die
 * Reihenfolge ist unveraendert BBIs eigene.
 *
 * Die Zellen tragen die Sprache der vier Auktor-Punkte darueber: weisse
 * Flaeche, 2px Rahmen in Auktorblau, schwarze Schrift - dieselben Werte wie
 * ein Akkordeonkopf, nur klein. Damit gehoert der Block sichtbar zur Reihe der
 * vier und nicht zu einem zweiten Formenvorrat.
 *
 * Vorher Flaechengrau ohne Rahmen. Das war ruhiger, stellte den Block aber
 * neben die vier statt in ihre Reihe.
 *
 * Keine einseitige farbige Kante: die ist im System das Zeichen fuer eine
 * *Trennung*, vierzehnmal nebeneinander waere sie Tapete. Ein umlaufender
 * Rahmen dagegen ist genau das, was die vier Kaesten tragen. Kein Radius, kein
 * Schatten - beides kennt dieses System nicht. Kein Hover: die Zellen sind
 * keine Bedienelemente, und eine Umkehrung waere ein Versprechen.
 *
 * auto-fit statt fester Spaltenzahl: das Raster fuellt die Breite, die es
 * bekommt, und braucht dafuer keine eigene Medienabfrage. Bei 888px sind das
 * vier Spalten, auf dem Handy eine. 200px ist die Untergrenze, unter der
 * "Pruefingenieurwesen" umbrechen wuerde. */
/* Der Einleitungssatz lief hier zeitweise auf 68ch begrenzt, weil er ueber die
   volle Breite 94 Zeichen je Zeile erreicht und DESIGN.md 65 bis 75 nennt.
   Die Begrenzung ist am 13.08.2026 nach Ansicht wieder entfallen: ein 674px
   breiter Absatz ueber einem 888px breiten Raster sieht nicht nach Absicht aus,
   sondern nach abgeschnitten. Die Lesbarkeitsgrenze gilt fuer Fliesstext ueber
   mehrere Absaetze; das hier sind drei Zeilen Vorspann zu einer Uebersicht. */

/* Der Selektor braucht die ID: #content ul setzt padding-left: 25px, und eine
   Klassenregel allein verliert dagegen. Ohne sie begann das Raster 25px weiter
   rechts als der Absatz darueber - sichtbar als eingerueckter Block, der mit
   nichts fluchtete. */
#content ul.bbi-felder,
.bbi-felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin: 0 0 25px;
	padding: 0;
	list-style: none;
}

#content ul.bbi-felder li {
	box-sizing: border-box;
	margin: 0;
	padding: 14px 18px;
	border: 2px solid #006eb7;
	background: #fff;
	color: #000;
	line-height: 1.3;
}

.leistung {
	width: 100%;
	min-width: 0;
}

.leistung > summary {
	position: relative;
	/* Flex nur zum senkrechten Zentrieren: mit der Mindesthoehe unten stehen
	   ein- und zweizeilige Titel sonst unterschiedlich hoch im Kasten. */
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Alle Kopfzeilen gleich hoch, damit ein zweizeiliger Titel wie
	   "Landschaftsplanung, Grünordnung" keine Stufe neben dem einzeiligen
	   Nachbarn erzeugt.

	   100px statt gerechneter 2.6em+40px: zwei Zeilen ergeben mit Innenabstand
	   und Rahmen 97px, eine gerechnete Mindesthoehe von 93px lag knapp
	   darunter und liess bei umbrechenden Titeln 4px Stufe stehen. */
	min-height: 100px;
	margin: 20px 0 30px;
	padding: 20px 60px 20px 20px;
	border: 2px solid #006eb7;
	background: #fff;
	color: #000;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.3em;
	cursor: pointer;
	list-style: none;
}

/* Standarddreieck der Browser abschalten - der Zustand wird ueber das
   Plus/Minus rechts angezeigt. */
.leistung > summary::-webkit-details-marker {
	display: none;
}

.leistung > summary::before {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 7%;
	width: 50px;
	height: 25px;
	background: url('images/eckmitrand.svg') center bottom no-repeat;
	background-size: 50px auto;
}

.leistung > summary:hover::before,
.leistung[open] > summary::before {
	background-image: url('images/eckgruen.svg');
	background-position: center center;
}

.leistung > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 37px;
	height: 37px;
	margin-top: -18px;
	box-sizing: border-box;
	color: #006eb7;
	font-size: 30px;
	line-height: 35px;
	text-align: center;
}

.leistung[open] > summary::after {
	content: "\2013";
}

.leistung > summary:hover,
.leistung[open] > summary {
	background: #006eb7;
	color: #fff;
}

.leistung > summary:hover::after,
.leistung[open] > summary::after {
	color: #fff;
}

.leistung > summary:focus-visible {
	outline: 2px solid #fbb900;
	outline-offset: 2px;
}

.leistung-inhalt {
	float: left;
	width: 100%;
	padding: 0 0 20px;
}

.leistung-bild {
	margin: 0 0 20px;
}

.leistung-bild figure,
.leistung-bild figure.wp-block-image {
	float: none;
	width: 100%;
	margin: 0;
}

/* Alle vier Bilder auf dasselbe Format, mit Zuschnitt.
 *
 * Gemessen waren sie bei gleicher Breite 243, 265, 225 und 282px hoch - die
 * Seitenverhaeltnisse der Vorlagen reichen von 1,50 bis 1,88. Vier
 * unterschiedliche Hoehen in zwei Spalten lesen sich als Unordnung, nicht als
 * Vielfalt.
 *
 * 16:10 liegt zwischen den vier Verhaeltnissen (Mittelwert 1,67) und schneidet
 * damit von jedem am wenigsten ab. Bei 424px Spaltenbreite ergibt das 265px
 * Hoehe, also fast den bisherigen Durchschnitt - die Seite wird nicht laenger.
 *
 * object-position: center, anders als bei den Portraets: das sind Bauwerke und
 * Landschaften, deren Motiv in der Mitte liegt, keine Koepfe im oberen Drittel.
 *
 * Das height: auto !important der alten Regel muss weg - es haette die aus dem
 * Seitenverhaeltnis berechnete Hoehe wieder aufgehoben. */
.leistung-bild img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	display: block;
}

.leistung-text > *:first-child {
	margin-top: 0;
}

@media only screen and (max-width: 767px) {

	.leistungen-raster {
		display: block;
		column-gap: 0;
	}

	.leistung > summary {
		min-height: 0;
	}
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Zusaetze in der linken Spalte
 * ------------------------------------------------------------------------ */

/* Die Zeile "Ingenieure | Architekten | Stadtplaner" - im Original Teil des
   Logos, hier aus der Seitenbeschreibung. */
#logocontainer .logozusatz {
	clear: both;
	margin: 8px 0 0;
	padding: 0;
	color: #006eb7;
	font-size: 0.8em;
	line-height: 1.3em;
}

@media only screen and (min-width: 955px) {

	/* Suchbox sitzt unter dem Menue in der Spalte, nicht mehr oben rechts */
	#header #headwidget {
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0 25px 30px;
		box-sizing: border-box;
		background: transparent;
	}

	#header #headwidget .fi,
	#header #headwidget #headsidebar {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* Frueher standen hier Prozentbreiten (68% / 30%) fuer Feld und Knopf.
	   Sie hatten hoehere Spezifitaet als die spaeteren Flex-Regeln und haben
	   den Knopf auf 75px gedrueckt - zu wenig fuer die 45px Text plus 32px
	   Polster und 4px Rahmen, der Text lief ueber und wurde beschnitten.
	   Die Breiten kommen jetzt allein aus dem Flex-Layout weiter unten. */
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Nacharbeiten
 * ------------------------------------------------------------------------ */

/* Aufzaehlungen in den Akkordeons auf BBIs Strich-Stil bringen. Die Inhalte
   kommen als schlichte <ul> aus den Leistungsseiten und traegen die Klasse
   "strich" nicht - deshalb hier ueber den Kontext statt ueber die Klasse. */
/* :not(.bbi-felder) haelt das Begriffsraster der Gruppe heraus. Es ist die
   einzige Liste hier, die keine Strichliste sein soll - ohne die Ausnahme
   bekaeme jede seiner Zellen einen Gedankenstrich und den 20px-Einzug, den
   die Marke braucht. Die Ausnahme steht hier und nicht als Gegenregel weiter
   unten: eine Regel, die man lesen kann, statt zweier, die sich schlagen. */
#content .leistung-text ul:not(.bbi-felder) {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#content .leistung-text ul:not(.bbi-felder) li {
	position: relative;
	padding: 2px 0 2px 20px;
	line-height: 1.5em;
}

#content .leistung-text ul:not(.bbi-felder) li::before {
	content: "\2014";
	position: absolute;
	top: 2px;
	left: 0;
	display: block;
	font-size: 1em;
}

/* BBIs script.js blendet die Suchbox unbedingt aus - eine einzelne
   hide()-Zeile ohne Gegenstueck zum Wiedereinblenden. Auktor hatte bisher
   eine Suche in der Seitenleiste, deshalb hier wieder sichtbar.
   !important ist noetig, weil jQuery das display direkt am Element setzt.

   Nur ab 955px: darunter ist #headwidget nach BBIs Vorgabe absolut
   positioniert und wuerde sich als Band ueber das Logo legen. Auf dem Telefon
   bleibt die Suche deshalb aus - dort zaehlt der Platz mehr. */
@media only screen and (min-width: 955px) {

	#header #headwidget div.widget_search {
		display: block !important;
	}
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Suchbox in der linken Spalte
 *
 * In BBIs header.php steht das Widget vor dem Logo, weil es dort oben rechts
 * ueber dem Titelbild schwebt (position: absolute). In einer 300px-Spalte
 * ergibt das ein 768px breites Formular bei x=-538, das ueber dem Logo liegt.
 *
 * Statt die Reihenfolge in der header.php zu aendern, wird die Spalte hier zu
 * einem Flex-Container: Logo, Menue, Suche. Die Auszeichnung bleibt damit
 * unveraendert und ein spaeteres Update des BBI-Themes leichter vergleichbar.
 * ------------------------------------------------------------------------ */

@media only screen and (min-width: 955px) {

	#header {
		display: flex;
		flex-direction: column;
	}

	#header #logocontainer { order: 1; }
	#header #menu          { order: 2; }
	#header #headwidget    { order: 3; margin-top: auto; }

	/* Alle Zwischenebenen des Widgets aus BBIs Kopfbereich-Logik loesen */
	#header #headwidget .fi,
	#header #headwidget #headsidebar,
	#header #headwidget .widget,
	#header #headwidget .widget_search,
	#header #headwidget form,
	#header #headwidget form > div {
		position: static;
		float: none;
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		min-width: 0;
		height: auto;
		margin: 0;
		padding: 0;
		/* BBI gibt .widget_search unter 1160px background: #004370 - gedacht
		   als dunkler Balken ueber dem Titelbild. In der linken Spalte schien
		   dieser Ton im 6px-Spalt zwischen Feld und Knopf durch und sah aus wie
		   ein dunkelblauer Streifen am Knopf. */
		background: transparent;
	}

	#header #headwidget form > div {
		display: flex;
	}

	#header #headwidget input[type="text"],
	#header #headwidget input[type="search"] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		padding: 8px 10px;
		border: 1px solid #f2f2f2;
		font-size: 0.9em;
	}

	#header #headwidget input[type="submit"] {
		flex: 0 0 auto;
		float: none;
		width: auto;
		margin-left: 6px;
		padding: 8px 14px;
		font-size: 0.85em;
	}
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Standortkarte
 *
 * BBIs aktuelle Markerpositionen stehen nicht im Theme, sondern im Customizer
 * unter "Zusaetzliches CSS" - im Theme liegt nur ein veralteter Stand, der zu
 * einer aelteren Karte gehoert. Deshalb hier neu gerechnet, und zwar relativ
 * zum Bild: bei BBI ist der Container breiter als die Karte (1067 zu 922px),
 * hier fuellt die Karte den Container, also verschieben sich die Prozentwerte.
 *
 * Grundlage sind die Nadelpositionen, die aus dem Kartenbild selbst ermittelt
 * wurden (Mitte der Nadel und Hoehe ihres Kopfes), nicht abgeschriebene Werte.
 * ------------------------------------------------------------------------ */

.standortmap {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 60px;
}

.standortmap figure {
	margin: 0;
}

.standortmap figure img {
	display: block;
	width: 100%;
	height: auto !important;
}

/* Hoehe in Prozent statt der 55px von BBI, damit die Flaechen beim
   Verkleinern der Karte mitwandern statt zu verrutschen. */
.standortmap .somarker {
	position: absolute;
	width: 7%;
	height: 9%;
	display: block;
	cursor: pointer;
}

.standortmap .somarker:focus-visible {
	outline: 2px solid #fbb900;
	outline-offset: 2px;
}

#somwuerzburg     { top: 4.4%;  left: 19.0%; }
#somregensburg    { top: 43.1%; left: 60.0%; }
#somingolstadt    { top: 54.3%; left: 46.5%; }
#somdingolfing    { top: 61.8%; left: 67.9%; }
#somlandshut      { top: 66.4%; left: 61.0%; }
#sommarktschwaben { top: 84.5%; left: 55.2%; }

/* Der Schliessknopf zeichnet bei BBI ein weisses X ohne Hintergrund. Das
   funktioniert nur, solange er ueber einem Foto liegt - bei Wuerzburg steht
   dort das Auktor-Logo auf weissem Grund, und der Knopf waere unsichtbar.
   Deshalb weisse Flaeche mit blauem X. */
#standorinfos a.close {
	background: #fff;
	box-shadow: 0 0 0 1px #f2f2f2;
	line-height: 0;
}

/* Die Infobox zeigt rechts ein Foto des Standorts, formatfuellend beschnitten.
   Bei Wuerzburg steht dort aber das Auktor-Logo - beschnitten waere es
   unbrauchbar. BBI loest das im Customizer, hier gehoert es ins Theme.
   Der Dateiname bleibt als Merkmal, weil das Logo als Anhang keine eigene
   Klasse mitbringt. */
#standorinfos .cii:has(img[src*="AuktorLogo"]) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: #fff;
}

#standorinfos .cii:has(img[src*="AuktorLogo"]) img {
	float: none;
	width: 85%;
	max-height: 170px;
	height: auto !important;
	object-fit: contain;
}

#standorinfos .cii:has(img[src*="AuktorLogo"])::after {
	display: none;
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Karriere - Filter und Stellenliste
 *
 * Uebernommen aus dem inline-<style> von BBIs Karriere-Shortcode. Dort stand
 * es im PHP und war deshalb beim Umfaerben leicht zu uebersehen; hier gehoert
 * es hin. Farben bereits auf die Auktor-Palette gebracht.
 * ------------------------------------------------------------------------ */
.bbi-karriere-wrap {
	margin-bottom: 30px;
	}

	.bbi-karriere-filter-wrap {
	margin-bottom: 40px;
	}

	.bbi-karriere-filter {
	display: grid;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	gap: 22px;
	margin-bottom: 20px;
	}

	.bbi-karriere-filter a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 10px 18px;
	border: 2px solid #006eb7;
	color: #004370;
	background: transparent;
	text-decoration: none !important;
	/* Label-Stufe aus DESIGN.md. Vorher 20px, zwei Pixel daneben - aus BBIs
	   Vorlage uebernommen, ohne eigene Begruendung. */
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	box-sizing: border-box;
	transition: all 0.2s ease;
	}

	.bbi-karriere-filter a:hover,
	.bbi-karriere-filter a.aktiv {
	background: #006eb7;
	color: #ffffff !important;
	}

	.bbi-karriere-reset {
	text-align: right;
	margin-top: 8px;
	}

	.bbi-karriere-reset a {
	color: #004370;
	text-decoration: none !important;
	font-size: 18px;
	}

	.bbi-karriere-reset a:hover {
	text-decoration: underline !important;
	}

	.bbi-karriere-list .bbi-karriere-item {
	display: flow-root;
	margin-bottom: 30px;
	}
	.bbi-karriere-list .bbi-karriere-item:last-child {
	padding-bottom: 0;
	}

	.bbi-karriere-list .stellenanzeige .stellenvorschau {
	cursor: pointer;
	}

	.bbi-karriere-list .stellenanzeige .stellenbeschreibung {
	display: none;
	}

	.bbi-karriere-list .stellenanzeige.offen .stellenbeschreibung {
	display: flex;
	}

	.bbi-karriere-empty {
	margin-top: 20px;
	}

	@media (max-width: 900px) {
	.bbi-karriere-filter {
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	}
	}

	@media (max-width: 600px) {
	.bbi-karriere-filter {
	grid-template-columns: 1fr;
	}
	}

/* Sicherheitsnetz zur Regel .stellenanzeige:not(.aktiv) .stellenbeschreibung
   { height: 0 } aus dem aelteren Teil des Themes: wer nur "offen" setzt,
   bekommt eine eingeblendete, aber null Pixel hohe Beschreibung. */
.bbi-karriere-list .stellenanzeige.offen .stellenbeschreibung {
	height: auto;
	opacity: 1;
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Aktuelle Projekte
 *
 * Der Knopf "Weitere Projekte anzeigen" und die Abstaende der Projektkaesten
 * stehen bei BBI im Customizer unter "Zusaetzliches CSS", nicht im Theme -
 * beim Portieren waren sie deshalb zunaechst nicht mitgekommen. Farben hier
 * auf die Auktor-Palette gebracht (BBI: #8aa03a).
 * ------------------------------------------------------------------------ */

.bbi-aktuelle-projekte > .bbi-projekt-eintrag,
.bbi-aktuelle-projekte > .bbi-projekt-eintrag .box {
	margin-bottom: 50px;
}

.bbi-projekte-button-wrap {
	margin-top: 50px;
	text-align: center;
}

a.bbi-projekte-button {
	display: inline-block;
	padding: 16px 22px;
	border: 2px solid #006eb7;
	background: transparent;
	color: #006eb7 !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

a.bbi-projekte-button:hover,
a.bbi-projekte-button:focus {
	background: #006eb7;
	color: #fff !important;
}


/* ---------------------------------------------------------------------------
 * AUKTOR: Kopfbereich auf schmalen Schirmen
 * ------------------------------------------------------------------------ */

@media only screen and (max-width: 954px) {

	/* BBI legt hier ein Titelbild hinter den Kopf; Auktor hat keins, deshalb
	   braucht die Kopfzeile eigene Luft und einen weissen Grund. */
	#logocontainer {
		padding: 15px 70px 12px 15px;
	}

	#logocontainer #logo,
	#logocontainer #logo img {
		width: 150px;
	}

	#logocontainer .logozusatz {
		clear: both;
		margin: 6px 0 0;
		font-size: 0.75em;
	}
}

/* Untermenues auch in der mobilen Schublade dauerhaft zeigen.
   BBI blendet sie dort nur fuer den aktuellen Menuepunkt ein - "Unser Team"
   waere auf dem Telefon damit nur erreichbar, wenn man schon auf
   "Unternehmen" steht. */
@media only screen and (max-width: 954px) {

	#menu ul.sub-menu {
		display: block;
	}

	#menu ul.sub-menu li a {
		padding: 12px 5%;
		font-size: 0.9em;
		background: transparent;
		color: #000;
		text-align: center;
	}

	#menu ul.sub-menu li a:hover,
	#menu ul li ul.sub-menu li.current-menu-item a {
		background: transparent;
		color: #006eb7;
	}
}


/* ===========================================================================
 * AUKTOR: Nachbesserungen am Seitengerüst
 * ======================================================================== */

/* --- Footer immer unten ---------------------------------------------------
 * Ohne das steht der Footer bei kurzen Seiten mitten im Fenster, weil #wrapper
 * nur so hoch ist wie sein Inhalt. #header ist ab 955px fest positioniert und
 * damit kein Flex-Element; darunter laeuft er mit, deshalb bekommt er
 * flex: 0 0 auto.
 * ------------------------------------------------------------------------ */

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#wrapper > #header {
	flex: 0 0 auto;
}

/* Flex-Kind von #wrapper ist <main id="inhalt"> aus header.php, nicht #main -
   das steckt eine Ebene tiefer. Als #wrapper > #main geschrieben griff die
   Regel nicht; der Footer blieb trotzdem unten, weil ihn margin-top: auto
   hinunterschiebt. */
#wrapper > #inhalt {
	flex: 1 0 auto;
}

#wrapper > #footer {
	flex: 0 0 auto;
	margin-top: auto;
}

/* --- Luft über und unter dem Seiteninhalt ---------------------------------
 * BBI setzt #main { padding: 0 } zweimal: ab 1760px und unter 1160px. Dort
 * fuellt bei BBI ein Titelbild den Raum. Auktors Seiten haben keins, dadurch
 * klebte die Ueberschrift bei breiten und bei schmalen Fenstern am oberen Rand,
 * waehrend es zwischen 1160 und 1760px passte.
 *
 * Statt drei Breiten einzeln zu flicken wird der Abstand hier vereinheitlicht:
 * #main auf 0, und den Platz macht das leere .bildbalken-Element, das die
 * Vorlage auf allen Seiten ohne Titelbild ohnehin ausgibt. Die Startseite hat
 * dieses Element nicht, sie bekommt den Abstand direkt.
 *
 * Nach unten war der Abstand 0: der Inhalt endete auf dem Pixel, an dem die
 * Fusszeile begann, und nur deren 35px-Rand trennte beides. Unten steht
 * deshalb derselbe Wert wie oben - bewusst dieselbe Zahl an derselben Stelle,
 * damit nicht zwei Abstaende entstehen, die auseinanderlaufen koennen.
 * ------------------------------------------------------------------------ */

/* Beide Abstaende haengen an #inhalt > #main.
 *
 * Nicht an #wrapper > #main: #main liegt seit der Einfuehrung von
 * <main id="inhalt"> in header.php eine Ebene tiefer. Die Regel war so
 * geschrieben und griff dadurch nicht - deshalb blieb bei 1161 bis 1759px die
 * Basisregel #main { padding: 100px 0 0 } stehen, waehrend darueber und
 * darunter je eine Medienabfrage auf 0 setzt. Die Seite sprang beim
 * Breiterziehen also um 100px, und nur in diesem einen Band.
 *
 * Die 100px stammen aus einer Zeit mit waagerechtem Kopf. Ab 955px ist der
 * Kopf eine feste Spalte links - gemessen 301px breit ueber die ganze
 * Fensterhoehe - und braucht oben keinen Freiraum. Darunter laeuft er im
 * Textfluss und braucht ihn auch nicht. Der Abstand kommt an allen Breiten
 * vom .bildbalken. */
#inhalt > #main {
	padding-top: 0;
	padding-bottom: 50px;
}

.bildbalken {
	display: block;
	width: 100%;
	height: 50px;
}

/* Die Startseite hat kein .bildbalken-Element, ihr Abstand nach oben kommt
   deshalb direkt vom Innenabstand - und muss #inhalt > #main mitnehmen:
   body.home #main allein verliert gegen die zwei IDs der Regel darueber. */
body.home #inhalt > #main {
	padding-top: 50px;
}

@media only screen and (max-width: 954px) {

	/* Der Kopf laeuft hier im Textfluss, deshalb weniger Abstand */
	.bildbalken {
		height: 20px;
	}

	body.home #inhalt > #main {
		padding-top: 20px;
	}

	#inhalt > #main {
		padding-bottom: 20px;
	}
}

/* --- Spalten in Stellenanzeigen und Projekten -----------------------------
 * Die Bloecke tragen flex-basis 33,33% und 66,66%. Zusammen mit dem
 * Blockabstand ergibt das mehr als 100%, und weil WordPress
 * flex-wrap: wrap !important setzt, rutschte die Textspalte unter das Bild -
 * bei 1067px Inhaltsbreite sichtbar, bei 965px noch nicht.
 *
 * Mit nowrap schrumpfen die Spalten stattdessen auf die verfuegbare Breite.
 * Unter 782px greift WordPress' eigene Regel und stapelt sie bewusst.
 * ------------------------------------------------------------------------ */

@media only screen and (min-width: 782px) {

	.bbi-karriere-list .stellenvorschau,
	.bbi-karriere-list .stellenbeschreibung,
	.bbi-aktuelle-projekte .wp-block-columns {
		flex-wrap: nowrap !important;
	}

	.bbi-karriere-list .stellenvorschau > .wp-block-column,
	.bbi-karriere-list .stellenbeschreibung > .wp-block-column,
	.bbi-aktuelle-projekte .wp-block-columns > .wp-block-column {
		min-width: 0;
	}
}


/* ===========================================================================
 * AUKTOR: Inhaltsseiten lesbarer machen
 * ---------------------------------------------------------------------------
 * Anlass: auf Unternehmensseite und "Unser Team" liefen Textbloecke ueber die
 * Bilder hinweg. Ursache ist BBIs .wp-block-columns { float: left } - ein
 * nachfolgender Absatz ist ein normaler Block, sein Kasten ignoriert den Float
 * und nur die Textzeilen weichen aus. Messbar war das an einem Absatz von
 * 575px Hoehe fuer zwei Zeilen und einer h2 von 648px. Jede Abstandsregel
 * wurde damit unberechenbar.
 *
 * Die Spalten sind ohnehin display: flex - der Float bringt nichts und kommt
 * im Seiteninhalt raus.
 * ======================================================================== */

.pageinhalt .wp-block-columns,
.pageinhalt .wp-block-gallery,
.pageinhalt figure.wp-block-image {
	float: none;
}

/* Trenner: bei "Unser Team" lag einer mit Breite 0 neben der Galerie.
 *
 * hr.titeltrenner ist dieselbe Linie unter der Seitenueberschrift, ausgegeben
 * von [leistungen] und [aktuelle_projekte]. Sie steht hier in derselben Regel
 * und nicht in einer zweiten: es ist ein Strich auf dieser Seite, und zwei
 * Regeln mit denselben Werten laufen irgendwann auseinander. Nur der Abstand
 * weicht ab - unter einer Ueberschrift gehoert die Linie nach oben eng an sie
 * heran, sonst schwebt sie zwischen Titel und Inhalt. */
.pageinhalt hr.wp-block-separator,
.pageinhalt hr.titeltrenner {
	clear: both;
	width: 100%;
	height: 0;
	margin: 40px 0;
	border: 0;
	border-top: 1px solid #d2daef;
	opacity: 1;
}

.pageinhalt hr.titeltrenner {
	margin: 0 0 30px;
}

/* --- Bilder ------------------------------------------------------------- */

.pageinhalt figure.wp-block-image {
	margin: 0 0 10px;
}

.pageinhalt figure.wp-block-image img {
	width: 100%;
	height: auto !important;
}

/* --- Bildunterschriften -------------------------------------------------
 * Vorher klebten sie ohne Abstand unter dem Bild und waren so gross wie der
 * Flie\00DFtext. Jetzt abgesetzt, kleiner, ruhiger - und die erste Zeile
 * (der Name) etwas kraeftiger, ohne dass dafuer die Auszeichnung im Inhalt
 * angefasst werden muss.
 * --------------------------------------------------------------------- */

.pageinhalt figcaption,
.pageinhalt .wp-element-caption {
	margin: 14px 0 30px;
	padding: 0;
	color: #444;
	font-size: 0.9em;
	line-height: 1.55;
	text-align: left;
}

.pageinhalt figcaption::first-line {
	color: #000;
	font-weight: 700;
}

/* Der Name in den Portraetunterschriften steht in <strong> und damit in einer
   eigenen Zeile ueber Funktion und Abschluss.
   ::first-line allein genuegt dafuer nicht: die Regel greift auf die erste
   *umgebrochene* Zeile, nicht auf den Namen. Vorher standen Name und Funktion
   zusammen in einer Zeile und waren beide fett; auf schmalen Schirmen brach die
   Zeile mitten in der Funktion, und die Haelfte blieb fett. Die Farbe steht
   hier mit, sonst faerbt ::first-line nur, was in Zeile eins passt. */
.pageinhalt figcaption strong {
	display: block;
	color: #000;
}

/* --- Flie\00DFtext ---------------------------------------------------------
 * BBI faehrt 1.4 Zeilenabstand. Fuer laengere Absaetze wie auf "Unser Team"
 * ist das eng; 1.65 liest sich deutlich ruhiger.
 * --------------------------------------------------------------------- */

.pageinhalt p {
	margin: 0 0 22px;
	line-height: 1.65;
}

.pageinhalt h2,
.pageinhalt h3 {
	clear: both;
	margin-top: 45px;
}

.pageinhalt .wp-block-columns {
	margin-bottom: 20px;
}


/* ===========================================================================
 * AUKTOR: Suchfeld in der linken Spalte
 * ---------------------------------------------------------------------------
 * Das Eingabefeld war 48px hoch, der Knopf nur 38px und sass 5px tiefer -
 * das sah abgeschnitten aus. Mit align-items: stretch nehmen beide dieselbe
 * Hoehe an, ohne dass sie einzeln gesetzt werden muss.
 * ======================================================================== */

@media only screen and (min-width: 955px) {

	#header #headwidget form > div {
		display: flex;
		align-items: stretch;
		gap: 6px;
	}

	#header #headwidget input[type="text"],
	#header #headwidget input[type="search"] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 9px 12px;
	}

	#header #headwidget input[type="submit"] {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0 16px;
		font-size: 0.85em;
		line-height: 1;
	}
}


/* ===========================================================================
 * AUKTOR: Adresse im Footer
 * ---------------------------------------------------------------------------
 * Das Nadelsymbol steht als float: left mit 30px Breite. Es schiebt nur die
 * ersten zwei Zeilen ein, die dritte ("97080 Wuerzburg") rutschte darunter
 * zurueck an den Rand - gemessen x=369, 369, 339. Absolut positioniert statt
 * gefloatet stehen alle Zeilen auf derselben Kante.
 * ======================================================================== */

#footer li.address {
	position: relative;
	padding-left: 30px;
}

#footer li.address::before {
	position: absolute;
	top: 0;
	left: 0;
	float: none;
	width: 20px;
	padding: 0;
}

/* --- Portraetreihe auf der Unternehmensseite ------------------------------
 * Vorher: ein Bild ueber die volle Breite, darunter zwei halbe - unruhig.
 * Jetzt drei gleich breite Spalten mit quadratischem Ausschnitt.
 *
 * Der Ausschnitt bringt zusaetzlich Schaerfe: die Datei HH_hjr_net.jpg ist nur
 * 542x300 gross und wurde vorher auf 818px Breite hochgerechnet. Quadratisch
 * beschnitten werden 300x300 auf etwa 276px Spaltenbreite dargestellt, also
 * ohne Hochrechnen. Eine groessere Fassung des Bildes existiert nicht.
 * --------------------------------------------------------------------- */

.pageinhalt .portraetreihe {
	align-items: flex-start;
}

.pageinhalt .portraet img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* etwas oberhalb der Mitte, damit Koepfe nicht angeschnitten werden */
	object-position: center 28%;
}

/* Rehbein steht in der rechten Bildhaelfte, mittiger Beschnitt wuerde ihn
   anschneiden. */
.pageinhalt .portraet-rechts img {
	object-position: 68% 20%;
}

@media only screen and (max-width: 781px) {

	/* WordPress stapelt die Spalten hier; quadratischer Beschnitt waere dann
	   unnoetig, das ganze Bild passt. */
	.pageinhalt .portraet img {
		aspect-ratio: auto;
		object-fit: fill;
	}
}


/* ===========================================================================
 * AUKTOR: Nachbesserungen aus der zweiten Abnahme
 * ======================================================================== */

/* --- BBI-Abschnitt von den Portraets abtrennen ---------------------------
 * Der Absatz "Seit 2026 sind wir Teil der BBI Gruppe" schloss unmittelbar an
 * die drei Koepfe an und wirkte wie deren Bildunterschrift. Jetzt mit Linie
 * und Luft abgesetzt; er gehoert thematisch zur Karte darunter, nicht zu den
 * Personen darueber.
 * --------------------------------------------------------------------- */

.pageinhalt .portraetreihe + p {
	clear: both;
	margin-top: 55px;
	padding-top: 40px;
	/* Dieselbe Linie wie hr.wp-block-separator und hr.titeltrenner. Vorher 3px
	   in Auktorblau: sie trennte kraeftiger als der Trenner oben auf derselben
	   Seite und las sich dadurch als Ueberschrift eines neuen Kapitels. Eine
	   Seite kennt einen Strich. */
	border-top: 1px solid #d2daef;
	font-size: 1.05em;
}

/* --- Standort-Infobox ----------------------------------------------------
 * Zwei Probleme: die Box ist 500px breit, davon 250px Text und 250px Bild -
 * und weil die Texthoehe die Boxhoehe bestimmt, landete ein Querformatfoto
 * (Verhaeltnis 1.61) in einem hochkanten Feld von 250x270 und wurde auf ein
 * Drittel seiner Breite beschnitten. Mit einer breiteren Box braucht der Text
 * weniger Hoehe und das Bildfeld kommt dem Format des Fotos nahe.
 * --------------------------------------------------------------------- */

#standorinfos {
	width: 640px;
	max-width: 92%;
}

#standorinfos .cih {
	width: 55%;
	padding: 16px 22px;
}

#standorinfos .cii {
	width: 45%;
}

#standorinfos .cii img {
	object-position: center 40%;
}

/* --- Stellenanzeigen: Bild fuellt seine Spalte --------------------------
 * Die Textspalte gibt die Zeilenhoehe vor. Das Bild behielt sein Format und
 * lie\00DF darueber und darunter weisse Flaechen - die aber zur Klickflaeche der
 * Vorschau gehoeren, was beim Draufklicken irritiert. Jetzt fuellt das Bild
 * seine Spalte.
 * --------------------------------------------------------------------- */

@media only screen and (min-width: 782px) {

	.bbi-karriere-list .stellenvorschau > .wp-block-column:first-child {
		align-self: stretch;
	}

	.bbi-karriere-list .stellenvorschau > .wp-block-column:first-child figure {
		height: 100%;
		margin: 0;
	}

	.bbi-karriere-list .stellenvorschau > .wp-block-column:first-child img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
	}
}

/* Die Infobox ist kompakter zu halten als der Seitentext: je hoeher sie wird,
   desto hochkantiger wird das Bildfeld daneben und desto mehr wird vom
   Querformatfoto abgeschnitten. Meine Absatzabstaende fuer den Seiteninhalt
   (22px) wirkten bis hier herein. */
#standorinfos .cih p {
	margin: 0 0 10px;
	line-height: 1.45;
}

#standorinfos .cih .mapslink {
	margin-top: 12px;
}

/* Das Maps-Symbol stand als 45px hoher Block ueber dem Link. Inline neben dem
   Text spart rund 30px Boxhoehe. */
#standorinfos .cih .mapslink a::before {
	display: inline-block;
	width: auto;
	height: auto;
	margin-right: 6px;
	font-size: 16px;
	line-height: 1;
	vertical-align: -2px;
}

/* Knopf soll seinen Text tragen, ohne zu schrumpfen. */
@media only screen and (min-width: 955px) {

	#header #headwidget input[type="submit"] {
		flex: 0 0 auto;
		width: auto;
		min-width: max-content;
		padding: 0 14px;
		white-space: nowrap;
	}
}

/* --- Suche darf beim Scrollen nicht verschwinden -------------------------
 * BBIs script.js setzt ab 150px Scrollweg die Klasse "fixiert" auf #header,
 * und ab 1160px Fensterbreite gilt dort .fixiert #headwidget { display: none }.
 * Bei BBI schrumpft der Kopf dabei und ein Suchsymbol uebernimmt; in der
 * linken Spalte war die Suche einfach weg.
 * --------------------------------------------------------------------- */

@media only screen and (min-width: 955px) {

	#header.fixiert #headwidget {
		display: block;
	}
}

/* --- Stellenanzeigen: Text oben statt mittig ----------------------------
 * Die Vorschauspalten sind gleich hoch (das Bild fuellt seine Spalte). Der
 * Text stand dadurch senkrecht zentriert neben dem Bild; er soll oben
 * ansetzen.
 * --------------------------------------------------------------------- */

@media only screen and (min-width: 782px) {

	.bbi-karriere-list .stellenvorschau {
		align-items: stretch;
	}

	.bbi-karriere-list .stellenvorschau > .wp-block-column:last-child {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.bbi-karriere-list .stellenvorschau > .wp-block-column:last-child > *:first-child {
		margin-top: 0;
	}
}


/* ===========================================================================
 * AUKTOR: Startseite
 * ======================================================================== */

/* --- Leitbild-Kacheln ----------------------------------------------------
 * Nachbau der Leitbild-Grafik als echte Flaechen. Alle Werte sind an der
 * Vorlage gemessen: Kachel 356px, Luecke 59px, orange Kachel 474px.
 *
 *   Luecke  59 / 1186 Rasterbreite = 4,97 %
 *   Kachel 356 / 1186              = 30,0 %
 *   Ueberstand orange 118 / 356    = 33,1 % nach rechts
 *
 * Das Raster darf NIE umbrechen - es ist das Quadratraster des Logos, jede
 * andere Anordnung ergibt das Logo nicht mehr. Es bleibt deshalb bei drei
 * Spalten in jeder Breite und wird nur kleiner. Damit die Schrift mitschrumpft,
 * sind die Groessen in cqw angegeben, also in Prozent der Kachelbreite.
 * ------------------------------------------------------------------------ */

.leitbild-rahmen {
	/* Der Block steht mittig in der Inhaltsspalte.
	 *
	 * Das widerspricht der Rasterregel aus DESIGN.md, nach der Elemente mit der
	 * Inhaltsspalte fluchten und nicht mit sich selbst. Die Regel hat einen
	 * Grund: ein zentrierter Block erzeugt zwei Kanten, die mit nichts sonst
	 * zusammenfallen. Hier ist der Preis der Alternative aber hoeher - linksbuendig
	 * bleiben bei 888px Inhaltsbreite 228px Leerraum rechts vom Raster und 0 links,
	 * und diese einseitige Luecke faellt mehr auf als zwei ausgeglichene.
	 *
	 * Nach Ansicht beider Zustaende am 13.08.2026 so entschieden. Volle Breite
	 * ist keine Option: das Raster waere dann 888px hoch und die BBI-Meldung
	 * stuende unter der Falz.
	 *
	 * Die 660px umfassen weiterhin das Raster samt Ueberstand der orangen
	 * Kachel. */
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/* Breite der alten Grafik. Ueber die volle Inhaltsbreite waere das Raster
	   888px hoch und die BBI-Meldung staende unter der Falz. */
	max-width: 660px;
	/* 45px wie zwischen allen Bloecken dieser Seite - .falz oben und der
	   Meldungskasten unten tragen denselben Wert. Vorher 15px: der einzige
	   Wert in diesem Block ohne Herleitung, waehrend alle anderen aus der
	   Druckvorlage gemessen sind. Neun blaue Quadrate und ein umrandeter
	   Kasten 15px voneinander entfernt lasen sich als ein Element. Der
	   Ueberstand der orangen Kachel geht nach rechts, nicht nach unten, und
	   begruendet hier keinen kleineren Abstand. */
	margin-bottom: 45px;
	container-type: inline-size;
}

.leitbild {
	/* Platz fuer den Ueberstand der orangen Kachel reservieren, sonst wird sie
	   am rechten Rand abgeschnitten. Rechnung: Ueberstand = 33,1 % einer Kachel
	   = 9,93 % der Rasterbreite, also Raster = 100 / 1,0993 = 90,97 %.
	   In der Vorlage ist es genauso gerechnet: eine Kachel ist dort 356 von
	   1299 Gesamtbreite = 27,4 %, nicht 30 %. */
	width: 90.97%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4.97cqw;
	/* darf nicht schneiden: die orange Kachel steht nach rechts ueber */
	overflow: visible;
}

.leitbild-kachel {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #006eb7;
	color: #fff;
	font-weight: 700;
	line-height: 1.05;
	/* Container fuer die Schriftgroessen der Begriffe */
	container-type: inline-size;
	/* Wie in der Vorlage: Begriffe, die ueber den Rand laufen, werden dort
	   beschnitten - etwa "Kreativitaet" und "aus einer Hand". */
	overflow: hidden;
}

.leitbild-kachel > span {
	position: absolute;
	transform: translateY(-50%);
	white-space: nowrap;
}

/* Die orange Kachel ist in der Vorlage breiter als die uebrigen und steht nach
   rechts ueber - sie behaelt aber die Hoehe der Reihe.
   aspect-ratio muss deshalb weg: mit 1/1 und 133,1 % Breite waere sie auch
   133,1 % hoch geworden und haette die ganze Reihe mitgezogen. Ohne
   aspect-ratio streckt das Raster sie auf die Zeilenhoehe, die die uebrigen
   Kacheln vorgeben. */
.leitbild-kachel-akzent {
	width: 133.1%;
	aspect-ratio: auto;
	align-self: stretch;
	background: #fbb900;
	/* Weiss, wie in der Logovorlage - bestaetigte Ausnahme, nicht Versehen.
	 *
	 * Der Kontrast betraegt 1,74:1 und verfehlt damit selbst die Grosstext-
	 * Schwelle von 3:1. DESIGN.md fuehrt das unter der Weissschrift-Sperre als
	 * unzulaessig, und am 13.08.2026 ist die Kachel deshalb kurz auf tiefes
	 * Auktorblau (5,91:1) gesetzt worden. Auf Ansage wieder zurueckgenommen:
	 * "ING!" ist das Logo, und die Kachel gibt es wieder.
	 *
	 * Wer hier erneut korrigieren will, liest zuerst die Ausnahme in DESIGN.md
	 * und in .impeccable/critique/ignore.md. Gemessene Alternativen, falls die
	 * Entscheidung wieder aufgerufen wird: #004370 = 5,91:1, #006eb7 = 3,08:1,
	 * schwarz = 12,04:1. */
	color: #fff;
	z-index: 1;
}


/* --- Claim-Zeile --------------------------------------------------------- */

.pageinhalt .auktor-claim {
	clear: both;
	margin: 55px 0 45px;
	padding-top: 40px;
	border-top: 3px solid #006eb7;
	color: #006eb7;
	font-size: 1.9em;
	font-weight: 400;
	line-height: 1.25;
}

/* --- Meldungskasten ------------------------------------------------------
 * Ersetzt den handgeschriebenen HTML-Block mit inline-CSS, der bisher auf der
 * Startseite stand (.bbi-start-block, max-width 660px). Jetzt BBIs eigenes
 * Kastenidiom: 2px-Rahmen mit Ecke oben links.
 * --------------------------------------------------------------------- */

.pageinhalt .box.pfoli.meldung {
	margin: 0 0 45px;
	padding: 35px 6% 25px;
}

.pageinhalt .meldung .wp-block-columns {
	align-items: center;
	margin-bottom: 0;
}

.pageinhalt .meldung h2 {
	margin: 0 0 22px;
	font-size: 1.3em;
	line-height: 1.3;
}

.pageinhalt .meldung p:last-child {
	margin-bottom: 0;
}

.pageinhalt .meldung figure {
	margin: 0;
}

.pageinhalt .meldung figcaption {
	display: none;
}

/* Hier stand ein zweiter Anlauf auf denselben Abstand, geschrieben als
   body.home #wrapper > #main. Er griff nie: #main liegt seit <main id="inhalt">
   nicht mehr direkt unter #wrapper. Der Abstand der Startseite steht jetzt
   einmal weiter oben bei body.home #inhalt > #main - dort, wo auch die uebrigen
   Seiten ihren beziehen. */


/* =========================================================================
   Startseite: Einstieg, Sprunglink, Menue-Knopf, Fokus
   Ueberarbeitung 13.08.2026. Werte folgen DESIGN.md: Radius 0, keine
   Schatten, Farbumkehr als Zustandssignal, Schriftgroessen von der
   dokumentierten Leiter (3.2em / 1.9em / 1.3em / 1em / 18px).
   ========================================================================= */

/* --- Sprunglink -------------------------------------------------------- */

/* Erstes fokussierbares Element des Dokuments. Ausserhalb des Bildes geparkt,
   nicht display:none - sonst waere es auch fuer die Tastatur weg. */
.skiplink {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	transform: translateY(-200%);
	padding: 12px 20px;
	background: #006eb7;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
	transition: transform 0.2s;
}

.skiplink:focus {
	transform: translateY(0);
}

/* Das Sprungziel selbst bekommt tabindex="-1" und wuerde sonst nach dem
   Sprung einen Rahmen um den halben Bildschirm ziehen. */
#inhalt:focus {
	outline: none;
}

/* --- Menue-Knopf ------------------------------------------------------- */

/* 35x40 px waren zu klein und ohne Beschriftung. Jetzt mindestens 44x44 mit
   sichtbarem Wort neben den Balken. */
#menuelink {
	min-width: 44px;
	min-height: 44px;
	padding: 4px 8px;
	/* Knoepfe erben die Schriftgroesse nicht vom Dokument - ohne diese Angabe
	   steht das Wort im Browser-Standard von 13,3 px. 18px ist die Stufe der
	   Navigation, und daneben steht der Knopf. */
	font-size: 18px;
}

#menuelink .menuelink-wort {
	font-size: 1em;
	line-height: 1.4;
}

/* --- Falz -------------------------------------------------------------- */

/* Der erste Bildschirm trug bisher den Firmennamen und ein Kachelraster; der
   erste inhaltliche Satz stand darunter. Jetzt fuehrt der Claim, darunter
   steht in schwarz, was das Buero macht und wo.
   Die Trennlinie der alten Fassung entfaellt: sie hat die beiden Zeilen
   auseinandergeschnitten, die zusammengehoeren. */
.falz {
	margin: 0 0 45px;
	/* Mittig, weil das Leitbild darunter mittig steht.
	 *
	 * Gemessen war der Zustand vorher: alle Bloecke teilten die Mittelachse bei
	 * 782px, aber die linken Kanten lagen bei 339 (Claim, Fachzeile, Meldung,
	 * Karte) und 452 (Leitbild-Raster, weil 660px breit und zentriert). Zwei
	 * linke Kanten im ersten Bildschirm - der Seitenkopf las sich als versetzt.
	 *
	 * Jetzt tragen Claim, Fachzeile und Raster eine gemeinsame Achse. Der
	 * Seitenkopf ist damit eine zentrierte Einheit, der Inhalt darunter bleibt
	 * linksbuendig - eine Fuge, nicht drei. */
	text-align: center;
}

/* Der Claim traegt die Falz und damit die Werte, die vorher an der H1 hingen:
   Auktorblau, Gewicht 700, Groesse bis 3.2em. Untergrenze und Obergrenze sind
   Stufen der dokumentierten Leiter (headline und display) - dazwischen darf die
   Zeile atmen, damit sie auf dem Handy keine Wand ergibt. */
.falz .auktor-claim {
	border-top: 0;
	margin: 0 0 14px;
	padding: 0;
	color: #006eb7;
	font-size: clamp(1.9em, 5.2vw, 3.2em);
	font-weight: 700;
	line-height: 1.0;
	text-wrap: balance;
}

/* Die Fachzeile steht zweitens und in schwarz. Sie bleibt die H1: sie nennt
   die vier Fachgebiete und den Ort, und das ist die Zeile, an der Suchmaschinen
   und Screenreader die Seite erkennen. Ein Claim als H1 waere an dieser Stelle
   eine Ueberschrift ohne Stichwort.

   Groesse Title (1.3em), nicht Headline (1.9em): auf 1.9em lief die Zeile ueber
   zwei Zeilen quer durch die ganze Inhaltsbreite und nahm dem Claim darueber
   die Fuehrung - "das erschlaegt". Auf 1.3em steht sie zum Claim im Verhaeltnis
   1 zu 2,5 und bleibt dabei deutlich ueber dem Fliesstext (1em). Nach Ansicht
   am 13.08.2026 so entschieden. */
.falz h1 {
	margin: 0;
	color: #000;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1.3;
	text-wrap: balance;
}

@media only screen and (max-width: 960px) {

	/* Derselbe Wert wie oben - die Regel steht nur da, weil weiter oben
	   h1 { font-size: 1.8em !important } wartet und gegen ein !important keine
	   Spezifitaet hilft. Notwehr, keine Absicht. */
	.falz h1 {
		font-size: 1.3em !important;
	}
}

/* Die drei Einstiegskacheln (.tueren/.tuer) standen hier. Sie sind am
   13.08.2026 nach Ansicht wieder entfernt worden: unter dem Claim beginnt
   jetzt direkt das Leitbild, die Wege zu Leistungen, Projekten und Stellen
   traegt das Hauptmenue. Fassung siehe Git-Historie. */

/* --- Fokus ------------------------------------------------------------- */

/* Zweiton-Ring: dunkles Blau mit Abstand, sodass die Papierflaeche dazwischen
   die helle Haelfte bildet. Gegen Weiss 9:1, gegen Auktorblau traegt der
   Abstand. Das bisherige Gelb erreichte gegen Weiss 1,74:1 und war als
   alleinige Fokusfarbe unbrauchbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #004370;
	outline-offset: 3px;
}

/* Das Suchfeld wechselte im Fokus nur die Fuellfarbe von #f2f2f2 auf Weiss -
   auf weissem Grund praktisch unsichtbar. */
#searchform input[type=search]:focus-visible,
#searchform input[type=text]:focus-visible {
	outline: 3px solid #004370;
	outline-offset: 1px;
}

/* Kartenmarker: der eigene gelbe Ring wird durch denselben Zweiton-Ring
   ersetzt. */
.standortmap .somarker:focus-visible {
	outline: 3px solid #004370;
	outline-offset: 2px;
}

/* --- Trefferflaechen --------------------------------------------------- */

/* Die Marker massen 23,6 x 18 px und lagen damit unter dem Mindestmass von
   24 x 24 (WCAG 2.5.8). Groesser geht nicht ohne Ueberlappung: Dingolfing und
   Landshut stehen auf der Karte nur rund 25 px auseinander. */
.standortmap .somarker {
	min-width: 24px;
	min-height: 24px;
}

/* Fusszeilenlinks lagen bei 31 px Hoehe. Der Abstand vergroessert die
   Trefferflaeche, ohne den Textfluss zu veraendern. */
#footnav .footer-men a,
#footwidget a,
#footwidget2 a {
	display: inline-block;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* --- Cookie-Hinweis ---------------------------------------------------- */

/* Der Link im Hinweisbalken (uk-cookie-consent) faellt sonst nicht auf: das
   Theme nimmt Links durchgehend die Unterstreichung, und im Balken steht der
   Link in derselben Farbe wie der Text daneben. Auf der alten Seite stand
   dieselbe Regel im Zusaetzlichen CSS des Customizers; die haengt am
   Theme-Ordner und faellt beim Wechsel weg. Deshalb hier im Theme, wo sie
   mitreist. */
.ctcc-more-info-link {
	text-decoration: underline !important;
}