@-ms-viewport {
width: device-width;
}
body {
color: #333333;
font-family: 'Libre Baskerville', serif;
font-size: 14px;
line-height: 20px;
}
html {
font-size: 100%;
}

.claim {
width: 100%;
margin-left: auto;
height: 125px;
margin-right: auto;
}
.nav li {
height: 71px;
line-height: 71px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.claim .logo {
position: absolute;
bottom: -33px;
}
.headline {
background-color: #363636;
margin-top: -16px;
position: relative;
}
.headline h1 {
width: 780px;
margin-right: auto;
margin-left: auto;
color: #F3F3F3;
font-weight: normal;
padding-left: 160px;
font-size: 18pt;
line-height: 46px;
clear: both;
}
.navbar .navbar-inner .container .nav-collapse .nav .first .first {
margin-left: 0px;
padding-left: 0px;
}
.breadcrumbs p {
margin-right: auto;
margin-left: auto;
padding-left: 240px;
display: block;
margin-top: 5px;
margin-bottom: 5px;
}
.nav li {
display: inline;

}
.navbar {
height: 52px;
width: 100%;
}
.navbar .navbar-inner {
width: 940px;
margin-right: auto;
margin-left: auto;
height: 71px;
margin-bottom: 0px;
padding-bottom: 0px;
}
body {
margin: 0px;
padding: 0px;
background-image: url(/assets/images/theme/bg_main2.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E6E6E6;
}
.nav {
height: 40px;
margin-left: auto;
padding-left: 0px;
margin-right: auto;
position: relative;
margin-top: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #aeaeae;
border-bottom-color: #aeaeae;
text-align: center;
background-image: url(/assets/images/theme/bg_mainnav.png);
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
}
.nav li {
line-height: 40px;
height: 40px;
list-style-type: none;
margin-right: 20px;
}
.nav li a {
color: #363636;
text-decoration: none;
font-family: 'Libre Baskerville', serif;
font-size: 12pt;
text-transform: uppercase;
}

.container {
width: 950px;
margin-right: auto;
margin-left: auto;
}

a {
color: #9a000b;
text-decoration: none;
}
h1 {
font-family: 'Libre Baskerville', serif;
font-size: 20pt;
color: #363636;
text-align: center;
line-height: 125px;
margin: 0px;
font-weight: normal;
}
h2 {
font-family: 'Libre Baskerville', serif;
font-size: 14pt;
color: #363636;
font-weight: 700;
margin-top: 15px;
margin-bottom: 20px;
line-height: 20pt;
}

h2 .small{ font-size: 55%; display:inline; text-align:left; }

h3 {
font-family: 'Libre Baskerville', serif;
font-size: 12px;
color: #9a000b;
font-weight: 700;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
}
h4 {
font-family: 'Libre Baskerville', serif;
font-size: 9pt;
color: #292929;
margin-top: 0px;
margin-bottom: 10px;
font-weight: bold;
}

#footer {
clear: both;
display: block;
width: 950px;
background-image: url(/assets/images/theme/bg_mainnav.png);
background-repeat: no-repeat;
background-position: center top;
overflow: hidden;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #aeaeae;
border-bottom-color: #aeaeae;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
margin-top:35px;
}
.breadcrumbs {
background-color: #FFFFFF;
}
.container {

}
.inner {
width: 940px;
margin-right: auto;
margin-left: auto;
height: auto;
color: #F3F3F3;
}
.row .span4 img {
float: left;
margin-bottom: 20px;
margin-right: 20px;
margin-top: 0px;
}
.container .row .span4 .break {
margin-right: 0px;
}
.row .span2 ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.row .span2 li {
list-style-type: none;
}
.container .row .span2 a {
color: #363636;
}
.container .row .span2 .aktiv {
color: #9a000b;
}
.inner .row {
display: block;
position: relative;
background-position: 10px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
color: #363636;
font-size: 12px;
font-weight: normal;
}

#holder .container .row .span4 #thumbs .thumbnail .absatz{
display:block;
margin-top: 10px;
margin-bottom: 20px;
color: #363636;
font-size: 12px;
font-weight: normal;
width: 424px;
}

.icon {
float: right;
margin-right: 20px;
margin-bottom: 40px;
}
.inner .row .span2 {
margin-top: 10px;
}
.inner .row .span6 {
margin-top: 20px;
}
.inner .row .span4 {
margin-top: 10px;
}
.container .row .span4 #thumbs li {
list-style-type: none;
float: left;
}

.container .row .span4 #thumbs .thumbs {
margin-left: 0px;
padding-left: 0px;
}
.gallerycontainer{
position: relative;
margin-left: 25px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
margin: 0 20px 0px 0;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.thumbnail img:hover{
filter: none; /* Applies to FF + IE */
-webkit-filter: grayscale(0);
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 0px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #d9d9d9;
padding: 10px;
left: -530px;
visibility: hidden;
color: black;
text-decoration: none;
top: 1px;
width:428px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -25px;
left: -530px; /*position where enlarged image should offset horizontally */
z-index: 50;
position: absolute;
}

.thumbnail:hover span > span{ /*CSS for enlarged image*/
position:relative;
left:-5px;
font-size:18pt;
background-color:transparent;
font-family: 'Libre Baskerville', serif;
color: #363636;
top: 6px;
}

.container .row {
position: relative;
}
.container .row .span4 #thumbs .thumbnail p {
margin-left: 5px;
color: #363636;
margin-top: 15px;
}
#footer .inner .row .span2 .btn {
color: #F3F3F3;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.navbar .navbar-inner .nav .aktiv {
color: #9a000b;
}
.container .row .span4 #image img {
border: 1px solid #939393;
}
.container .row .span4 #image p {
font-size: 11pt;
font-style: italic;
clear: left;
position: relative;
top: -16px;
}
.container .row a:hover {
color: #9a000b;
}
.container .row .span4 #image {
position: relative;
}
.inner .row .span2 a:hover {
text-decoration: underline;
}
.navbar .navbar-inner .nav a:hover {
text-decoration: underline;
}
#holder {
width: 950px;
margin-right: auto;
margin-left: auto;
}
#holder .claim img {

}
#holder {

}
#holder .navbar img {
float: right;
margin-right: 50px;
margin-top: 7px;
}
#holder #kopfbild {
position: relative;
overflow: visible;
width: 940px;
display: flex;
align-items: flex-end;
min-height: 292px;
}
#holder #kopfbild img {
position: static;
width: auto;
height: auto;
max-width: 292px;
display: block;
flex-shrink: 0;
}
#holder #kopfbild #headline {
position: static;
flex: 1;
height: 40px;
width: auto;
left: 0px;
bottom: 0px;
background-image: url(/assets/images/theme/bg_head.png);
background-repeat: no-repeat;
background-position: left top;
font-weight: normal;
}
#holder #kopfbild #headline h1 {
margin-left: 240px;
font-size: 24px;
line-height: 40px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-weight: normal;
}
#holder .breadcrumbs p {
font-size: 11pt;
font-style: italic;
}
li.aktiv {
background-image: url(/assets/images/theme/sub_nav_icon.gif);
background-position: left 5px;
background-repeat: no-repeat;
padding-left: 15px;
margin-left:-15px;
position:relative;
}
#footer .inner .row p {
color: #F3F3F3;
}
h5, .infos {
font-style: italic;
font-weight: 400;
color: #292929;
font-size:12px;
}
h5.caption {
padding-left: 10px;
padding-right: 10px;
color: #666666;
}
.img_wrapper{
margin: 0 20px 20px 0;
position:relative;
float:left;
}
#footer p {
font-size: 10px;
margin-top: -12px;
margin-left: 30px;
}
#holder .container #disclaimer {
text-align: center;
color: #292929;
margin-top: 20px;
}
#footer h4 {
margin-top: 10px;
}

.dropdown-menu li{
line-height:16px;
margin-right: 0px;
text-align: left;
}
.dropdown-menu li a{
font-size:12px;
line-height:16px;
}
#footer .row .span6 #disclaimer a {
color: #333333;
font-size: 10px;
}

.dropdown-menu .divider {
background-color: #E5E5E5;
border-bottom: 1px solid #FFFFFF;
height: 1px;
margin: 9px 1px;
overflow: hidden;
}
li {
line-height: 20px;
}
.dropdown-menu {
list-style: none outside none;
}

.dropdown-menu .divider {
background-color: #E5E5E5;
border-bottom: 1px solid #FFFFFF;
height: 1px;
margin: 9px 1px;
overflow: hidden;
}
li {
line-height: 20px;
font-size: 12px;
margin-bottom: 8px;
}
.dropdown-menu {
list-style: none outside none;
}

#holder .nav .dropdown .dropdown-menu .infos {
display: block;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 15px;
padding: 10px 20px 0;
text-align: left;
height:auto;
}
.row .span1 {
width: 60px;
float: left;
}
.dropdown-toggle.active, .active {
color: #9A000B;
}
#holder .container .row .span4.top {
margin-top: 10px;
}
#holder .container .row .span6 .intro {
font-weight: bold;
}
.claim .red {
color: #9A000B;
}
#holder .container #footer {
margin: 30px 0;
}
.h2 {
margin-top: 20px;
}
#holder .container .row .span6 a {
}
#holder .container .row .span6 a:hover {
text-decoration: underline;
}
#holder #footer .row #disclaimer a {
font-family: 'Libre Baskerville', serif;
font-size: 11px;
color: #363636;
}
/* Original setzt width/height=60 direkt am img-Tag; unsere Quellbilder sind
   135x135px und wuerden ohne diese Regel in voller Groesse angezeigt. */
.gallerycontainer .grow.img,
#thumbs .grow.img {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}
.gallerycontainer .grow.img:hover,
#thumbs .grow.img:hover {
    transform: scale(2);
    z-index: 10;
}
/* Damit die vergroesserten Thumbnails nicht von Nachbarn/Container
   abgeschnitten werden. */
.gallerycontainer,
#thumbs,
#thumbs.thumbs,
ul.thumbs,
.thumbnail {
    overflow: visible;
}
#thumbs .img {
-moz-box-shadow:0px 0px 10px 2px rgba(119, 119, 119, 0.5);
-webkit-box-shadow:0px 0px 10px 2px rgba(119, 119, 119, 0.5);
box-shadow:0px 0px 10px 2px rgba(119, 119, 119, 0.5);

}
.secondary li {
list-style-type: none;
margin-left: 0px;
}
.secondary ul {
margin-left: -20px;
padding-left: 40px;
}
.secondary h3 {
text-transform: uppercase;
color: #363636;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AEAEAE;
font-size: 12pt;
font-weight: normal;
text-indent: 20px;
width: auto;
margin-top: 22px;
margin-bottom: 16px;
/* Stock cdnjs bootstrap.min.css setzt h1/h2/h3 pauschal auf line-height:40px
   (Typografie-Basis-Set). Original hat hier 20px - ohne Override wirkt die
   Box doppelt so hoch wie noetig und die Kopf-Ausrichtung neben der
   Hauptspalte verschiebt sich sichtbar. */
line-height: 20px;
}

@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}

/*
* Don't show links for images, or javascript/internal links
*/

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}

thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}

/* Simple theme custom print styles */
.header,
.footer,
.nav-open-button,
.search-bar,
.search-dropdown-icon,
nav.primary {
display: none;
}
}
#holder .container .row .span6 .zitat {
font-size: 14px;
}
#holder .container .row .span6 .zitat .small {
font-size: 11px;
text-align: right;
display: block;
font-style: italic;
}
#holder .container .row .span6 blockquote p {
margin-bottom: 15px;
font-size:12px;
line-height:18px;
}
/* Editorial-Zitat (home-de, en/editorial): auf der echten Seite traegt dieses
   Blockquote KEINE .zitat-Klasse (die gehoert zu einem anderen Zitat-Widget),
   daher eigener, direkter Style fuer Zitattext + Attributionszeile. */
#holder .container .row .span6 blockquote p > span:first-child {
color: #333300;
}
/* Zitat-Liste (was-bewegt/persoenlich, en/what-matters/think-thoughts): dort
   ist der Zitattext in <em> gesetzt (kursiv, Original-Standard-Browserstil)
   und grau statt oliv - auf der echten Seite unterscheidet sich das rein
   durch die <em>-Verschachtelung, keine eigene Klasse noetig. */
#holder .container .row .span6 blockquote em {
color: #888;
}
#holder .container .row .span6 blockquote:not(.zitat) .small {
font-size: 10px;
color: #999;
text-align: left;
display: block;
font-style: normal;
}

.document {
padding:5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
padding-bottom: 0px;
padding-top: 0px;
}
.document:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.1, M12=-0, M21=0, M22=1.1);
background-color:#CCCCCC;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.3);
background-color: transparent\9;
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;
}
.hiddenInfo { display:none; }
.document:hover .hiddenInfo { display:block; text-align:right; font-size:8px; }

.document p, .blogSummary p {
margin-top: -15px;
margin-bottom: 20px;
padding-bottom: 5px;
line-height: 18px;
}
/* PDF-Downloadlink im Titel (Diskurs/Dialogue): auf der echten Seite ist der
   Titel jedes Dokuments mit dem dmsdocument-Download verlinkt, in Rot ohne
   Unterstreichung - live an der echten Seite verifiziert. */
.document h4 a {
color: #9a000b;
text-decoration: none;
}
h2 {
margin-left: -5px;
padding-right: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AEAEAE;
text-transform: uppercase;
}

#bild img {
margin-left: 23px;
}

.blogSummary .authorDate {
font-style: italic;
margin-top:-14px;
}
.claim a {
color: #363636;
}
.BlogArchiveMenu li ul li {
margin-top:0px;
margin-bottom:0px;
}

.smaller { font-size:70%; text-transform:none; }

/* --- Site-Overrides: entfernen die Bootstrap-2-Standardoptik (abgerundete Ecken,
   Verlauf, Schatten) von .navbar-inner und .thumbnail, damit die Navigation und
   die Bildergalerie wieder flach/original aussehen. --- */
.navbar-inner {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
/* Blockquote im Original ohne Einzug/Rahmen (nur Bootstrap-Standard zuruecksetzen) */
#holder blockquote {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
/* Mobile (<768px): eigenes Hamburger-Menue-Toggle ersetzt bootstrap.js'
   Collapse-Plugin. ".in" statt der Bootstrap-Standardklasse, da wir kein
   bootstrap.js laden (CDN-Link antwortete zeitweise mit 503). */
@media (max-width: 767px) {
    /* Kein !important auf height mehr: das JS animiert die Hoehe per Inline-Style
       (0 -> scrollHeight -> auto), !important wuerde das sofort auf "auto"
       zwingen und die Transition unterbrechen (kein sanftes Aufklappen). */
    .nav-collapse {
        overflow: hidden;
    }
    .nav-collapse.in {
        overflow: visible;
    }
    /* Stock cdnjs bootstrap.min.css versteckt .btn-navbar per Default
       (display:none); die passende Sichtbar-Regel fuers Mobile-Breakpoint
       fehlt uns, da wir bootstrap-responsive.css nur teilweise/anders laden. */
    .btn-navbar {
        display: block !important;
    }
    /* Stock cdnjs bootstrap.min.css hat ".navbar .container{width:auto}"
       (Spezifitaet 0-0-2-0), das schlaegt unser ".container{width:90%}" aus
       bootstrap-responsive.css (Spezifitaet 0-0-1-0) trotz spaeterem Laden,
       weil Spezifitaet vor Reihenfolge geht. Dadurch war der Hamburger-Button
       zu weit rechts (Container ging bis zum Viewport-Rand statt auf 90%
       eingerueckt zu sein wie im Original). Gleiche Spezifitaet noetig, um zu
       gewinnen. */
    .navbar .container {
        width: 90%;
    }
    /* Stock cdnjs bootstrap.min.css setzt .row{margin-left:-20px} ungescopet
       (Grid-Gutter fuers Desktop-Floating-Grid). Das Original nutzt eine eigene
       angepasste bootstrap.css, die das auf Mobile zurücksetzt - bei uns bleibt
       sonst die ganze .span6/.span4-Spalte 20px zu weit links (Container-Inhalt
       inkl. Ueberschriften sitzt sichtbar aus der Flucht). */
    .row {
        margin-left: 0;
    }
    /* .inner hat im Stock-main.css eine feste Breite (940px), die es auf der
       echten Seite so gar nicht gibt (dort existiert kein .inner-Element).
       Bei uns sitzt die Klasse aber auf einem echten Wrapper-Div, daher hier
       responsive ausschalten, damit der Inhalt nicht ueberbreit wird. */
    .inner {
        width: auto !important;
    }
}
@media (max-width: 767px) {
    /* Original laesst ".claim h1{margin-top:30px}" durch .claim/#holder nach
       oben "durchbluten" (Margin-Collapsing), wodurch der ganze Block 30px
       tiefer sitzt, waehrend h1 SELBST innerhalb von .claim keinen zusaetzlichen
       Abstand bekommt (die 30px werden komplett "nach aussen" verbraucht).
       Bei uns kollabiert das nicht, daher bilden wir den Effekt direkt nach:
       #holder um 30px verschieben, UND h1's eigenes margin-top hier auf 0
       zuruecksetzen (sonst zaehlt der Abstand doppelt: einmal durch #holder,
       einmal durch h1 selbst -> h1/Linie ragt 21px in das Bild darunter rein,
       da .claim eine feste Hoehe von 50px hat und nicht mitwaechst). */
    #holder {
        margin-top: 30px;
    }
    /* Hoehere Spezifitaet noetig (#holder + .claim + h1), da
       bootstrap-responsive.css (bloße ".claim h1", gleiche Spezifitaet)
       NACH main.css geladen wird und sonst gewinnen wuerde. */
    #holder .claim h1 {
        margin-top: 0;
    }
}
@media (min-width: 768px) {
    .btn-navbar {
        display: none;
    }
}
/* Alles Folgende ist DESKTOP-spezifisch (>=768px). Unterhalb dieser Breite
   soll die Original-Bootstrap-responsive.css (Stock-Kopie von der echten
   Seite) unveraendert greifen: Hamburger-Menue, gestapeltes .span6/.span4,
   li als Block statt inline. Unsere Overrides duerfen das nicht ueberschreiben. */
@media (min-width: 768px) {
    /* Original nutzt KEIN Flexbox: .nav ist ein Block mit text-align:center,
       li ist display:inline (Bootstrap-Standard). Dadurch wird die gesamte
       Menuegruppe inkl. Flagge natuerlich zentriert (kleinere, ungleiche
       Abstaende links/rechts), statt die Flagge per margin-left:auto an den
       Rand zu schieben. */
    .navbar .nav {
        white-space: nowrap;
        width: 100%;
    }
    /* Bootstrap-responsive.css (nav-collapse) schaltet li im Stock-CDN-Bundle
       faelschlich auf display:block/float; Original-Seite bleibt bei
       display:inline, dadurch funktioniert text-align:center ueberhaupt. */
    .navbar .nav > li {
        display: inline;
        float: none;
    }
    .navbar .nav > li.lang-switch {
        margin-left: 0;
        margin-right: 0;
        float: none;
    }
    /* Bootstrap gibt Nav-Links standardmaessig Padding rundum mit (auch links/
       rechts 15px), wodurch die Abstaende zwischen den Punkten zu groß wirken.
       Original hat hier ueberall padding:0 und regelt Abstand nur ueber
       margin-right:20px auf dem li. */
    .navbar .nav > li > a {
        padding: 0;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        vertical-align: top;
    }
    .navbar .nav .dropdown-menu li {
        display: block;
        height: auto;
        line-height: normal;
        margin-right: 0;
    }
    .navbar .nav .dropdown-menu li > a {
        height: auto;
        line-height: normal;
    }
    /* Stock cdnjs bootstrap.min.css setzt auf den <a>-Elementen selbst eine
       Farbe (vermutlich .navbar .nav > li > a), die eine reine ".nav li a"-
       Regel nicht schlaegt - explizite Farben auf dem <a> gewinnen immer
       gegenueber vererbten Werten vom <li>, unabhaengig von der Spezifitaet.
       Nur hier (Desktop) auf #363636 erzwingen: auf Mobile bleibt es bei
       #777777 (siehe ".nav-collapse .nav > li > a" in bootstrap-responsive.css),
       live an der echten Seite verifiziert. */
    #holder .navbar .nav li a {
        color: #363636;
    }
    /* Aktiver Hauptmenuepunkt: Farbe direkt auf <a>/.dropdown-toggle setzen,
       nicht nur auf das <li> - eine Kindfarbe schlaegt immer eine nur
       vererbte. Nur Desktop: auf Mobile bleibt der aktive Punkt genauso grau
       wie alle anderen (per Live-Vergleich verifiziert, keine Hervorhebung). */
    #holder .navbar .nav > li.aktiv > a,
    #holder .navbar .nav > li.aktiv > .dropdown-toggle {
        color: #9a000b;
    }
    /* Aktive Unterseite im geoeffneten Dropdown: rot hinterlegt, weisser Text.
       Ebenfalls nur Desktop (Mobile zeigt keine Hervorhebung, live verifiziert). */
    #holder .navbar .nav .dropdown-menu .aktiv > a {
        background-color: #9a000b;
        background-image: linear-gradient(to bottom, #ab222b, #9a000b);
        background-repeat: repeat-x;
        color: #fff;
    }
    /* Flagge im Sprachumschalter vertikal auf Hoehe des Menuetexts zentrieren. */
    .navbar .nav > li.lang-switch > a {
        position: relative;
        height: 40px;
        line-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    #holder .navbar .nav > li.lang-switch img {
        position: absolute;
        top: 14px;
        left: 0;
        margin: 0;
        float: none;
    }
    .span1 {
        width: 60px;
        float: left;
    }
    /* Robuste Nebeneinander-Anordnung der Hauptspalte (.span6) und Seitenspalte
       (.span4): ersetzt die alte Float-Grid-Logik, die hier zu Kollisionen
       fuehrte, durch Flexbox mit identischem visuellem Ergebnis. */
    #holder .container .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        width: 100%;
    }
    #holder .container .row > [class*="span"]:first-child {
        margin-left: 0;
    }
    #holder .container .row .span6,
    #holder .container .row .span4 {
        float: none;
        /* Flexbox darf die feste Breite (446px/360px aus dem Original-Float-Grid)
           nicht schrumpfen - sonst umbrechen Sidebar-Ueberschriften wie
           "Personal aspects", die im Original einzeilig bleiben. */
        flex-shrink: 0;
    }
}
/* Mobile: Sprachumschalter-Flagge in der gestapelten Liste normal inline
   anzeigen (keine absolute Positionierung wie im Desktop-Balken). */
@media (max-width: 767px) {
    /* Basis-Regel "#holder .navbar img{float:right;...}" (fuers Desktop-Flaggensymbol
       neben der Navbar) blutet sonst auch aufs Mobile-Menue durch und schiebt
       die Flagge in der aufgeklappten Liste faelschlich an den rechten Rand
       statt buendig links wie im Original. */
    #holder .navbar .nav > li.lang-switch img {
        position: static;
        float: none;
        margin: 0 0 0 6px;
    }
}
.thumbnail {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transition: none;
}
.thumbnail:hover {
    box-shadow: none;
}
#thumbs.thumbs, ul.thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
}
#thumbs.thumbs li, ul.thumbs li {
    float: left;
    margin: 0 10px 10px 0;
}
/* Original-Seite nutzt eine eigene, angepasste bootstrap.css (nicht die
   Stock-Version von cdnjs): dort ist der Verlauf beim Hover/Fokus/aktivem
   Dropdown-Eintrag rot (Markenfarbe) statt des Standard-Blaus. Ecken/Schatten
   der Box selbst bleiben Bootstrap-Standard (6px radius, Schatten). */
.dropdown-menu {
    background-color: #fff;
    background-image: linear-gradient(to bottom, #ffffff, #e0e0e0);
}
/* Original hat keine Zeiger-Spitze (Caret) ueber der Dropdown-Box.
   Hoehere Spezifitaet noetig, da Bootstrap sie ueber
   ".navbar .nav > li > .dropdown-menu:before" setzt. */
.dropdown-menu::before,
.dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before,
.navbar .nav > li > .dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before,
.navbar .nav > li > .dropdown-menu::after {
    display: none;
}
/* Stock cdnjs bootstrap.min.css gibt einem offenen Dropdown-Toggle einen
   grauen Hintergrund (".dropdown-toggle:active, .open .dropdown-toggle
   {background-color:#e5e5e5}", gedacht fuer Button-Dropdowns/.btn-group).
   Die echte Seite nutzt eine eigene Bootstrap-Variante ohne diese Regel -
   bei uns blieb der Menuepunkt nach dem Oeffnen/Klicken dauerhaft grau
   hinterlegt (nicht nur beim Hovern), was wie ein Positions-/Anzeigefehler
   wirkte. Explizit zuruecksetzen. */
.navbar .nav .open > .dropdown-toggle,
.navbar .nav .dropdown-toggle:active,
.navbar .nav li.open > a,
.navbar .nav li.open > .dropdown-toggle {
    background-color: transparent !important;
    background-image: none !important;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
#holder .navbar .nav .dropdown-menu li > a:hover,
#holder .navbar .nav .dropdown-menu li > a:focus {
    background-color: #9a000b;
    background-image: linear-gradient(to bottom, #ab222b, #9a000b);
    background-repeat: repeat-x;
    color: #fff;
}