/*
In case you wonder how the navigation and column-width work....

We overwrite index.html and rules.xml with jbot. Before z3c.jbot 1.1.0 we used a copy of the barceloneta-theme that lives in the database!

The header gets its width in plone.app.layout.viewlets.portal_header.pt.
Header and nav are moved next to each other in the same container The nav gets its width with in the modified index.html in the theme

--- /Users/pbauer/workspace/stiftung/parts/packages/plonetheme/barceloneta/theme/index.html (Selection)
+++ (clipboard)
@@ -27,12 +27,12 @@
           </header>
           <div id="anonymous-actions">
           </div>
+          <div id="mainnavigation-wrapper" class="col-xs-12 col-sm-12 col-md-8">
+            <div id="mainnavigation">
+            </div>
+          </div>
         </div>
       </header>
-      <div id="mainnavigation-wrapper">
-        <div id="mainnavigation">
-        </div>
-      </div>
       <div id="hero" class="principal">
         <div class="container">
           <div class="gigantic">

The column-width is changed in the customized rules.xml:

--- /Users/pbauer/workspace/stiftung/parts/packages/plonetheme/barceloneta/theme/rules.xml (Selection)
+++ (clipboard)
@@ -47,7 +47,7 @@
     <xsl:variable name="central">
       <xsl:if test="//aside[@id='portal-column-one'] and //aside[@id='portal-column-two']">col-xs-12 col-sm-12 col-md-6 col-md-push-3</xsl:if>
       <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-12 col-md-9</xsl:if>
-      <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-9 col-md-push-3</xsl:if>
+      <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-8 col-md-push-4</xsl:if>
       <xsl:if test="not(//aside[@id='portal-column-one']) and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-12</xsl:if>
     </xsl:variable>

@@ -73,7 +73,7 @@
     <replace css:theme="#column1-container">
       <xsl:variable name="columnone">
         <xsl:if test="//aside[@id='portal-column-two']">col-xs-12 col-sm-6 col-md-3 col-md-pull-6</xsl:if>
-        <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-3 col-md-pull-9</xsl:if>
+        <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-4 col-md-pull-8</xsl:if>
       </xsl:variable>
       <div class="{$columnone} sidebar-offcanvas">
         <aside id="portal-column-one">

*/

body {
    background-color: #d6d9db !important;
    font-family: Arial, Verdana, Helvetica, sans-serif !important;
    color: #333 !important;
    margin-top: 1em !important;
}

#portal-footer-wrapper {
    background-color: #d6d9db !important;
    padding-top: 0 !important;
}

#content-header #portal-header {
    padding-bottom: 20px;
    min-height: 143px;
    padding-left: 0;
}

#portal-logo img {
    object-fit: cover;
    max-width: 100%;
}

#portal-anontools {
    display: none;
}

.container {
    background-color: #fff;
}

/* Breadcrumbs */
#mainnavigation-wrapper .plone-breadcrumb {
    margin-bottom: 0;
    margin-top: 0;
    background-color: #fff;
    font-size: 90%;
}

#mainnavigation-wrapper .plone-breadcrumb ol::before {
    content: "Sie sind hier: ";
}

#mainnavigation-wrapper .plone-breadcrumb ol > li + li::before,
#mainnavigation-wrapper .plone-breadcrumb ol > li + li::after {
    border: none;
    position: unset;
}

#mainnavigation-wrapper .plone-breadcrumb ol > li + li::before {
    content: "/";
    color: #000;
}

#mainnavigation-wrapper .plone-breadcrumb ol > li {
    line-height: inherit;
    padding: 0;
}

#mainnavigation-wrapper .plone-breadcrumb ol a {
    color: #696c6d;
}

.alert.status, .portalMessage {
    display: inline-block;
}


/* Content */
h1 {
    font-size: 26px !important;
    font-weight: bold !important;
}
h1::before {
    content: "| ";
}
.documentFirstHeading {
    border-bottom: none !important;
}

h1, h2, h3, h4, h5 {
    color: #696c6d !important;
}

h2 {
    font-size: 22px !important;
}
h3 {
    font-size: 20px !important;
}
h4 {
    font-size: 18px !important;
}
h5 {
    font-size: 14px !important;
}
h6 {
    font-size: 12px !important;
}

.underline {
    text-decoration: underline;
}

.newsImageContainer figcaption {
    width: 100%;
}

#visual-portal-wrapper content a:focus,
#visual-portal-wrapper #content a:hover,
#visual-portal-wrapper .portlet a:focus,
#visual-portal-wrapper .portlet a:hover {
    color: #2e416e !important;
    text-decoration: none;
}

#visual-portal-wrapper .portlet a:visited,
#visual-portal-wrapper .portlet a:link {
    color: #000000 !important;
}

/* Portlets */
#portal-column-one .portlet {
    border: none;
    box-shadow: none;
}

.portlet > :first-child {
    border-radius: 0 0 0 0 !important;
}

#portal-column-one .portlet .portletHeader {
    background: #adb8be;
    padding: 0em 0.5em 0em 1.5em;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 2em;
}

#portal-column-one .portlet .portletContent {
    border-top: none;
}

#portal-column-one .portlet .portletHeader > a {
    color: #fff;
}

#portal-column-one .portlet:hover .portletHeader,
#portal-column-one .portlet .portletHeader:hover {
    background: #5A6295;
}

#portal-column-one .portlet .portletHeader::before {
    content: "›";
    color: #000 !important;
}

#portal-column-one .portlet .portletFooter {
    box-shadow: none;
    background-color: #fff;
    border: none;
}

#portal-column-one .portletStaticText img {
    width: 100%;
}

#portal-column-one .portlet .portletContent > ul > li a {
    padding: 10px 0 26px 0;
}

#portal-column-one .portlet .portletContent > ul > li > a {
    border-top: none;
}

.portletNews .pull-right {
    float: left !important;
    margin: 0 15px 10px 0;
}

.portletNews .portletItem {
    clear: both;
}

/* Collection */
.portletCollection .pull-right {
    float: left !important;
    margin: 0 15px 10px 0 !important;
}

.portletCollection .portletItem {
    clear: both;
    margin-top: 10px !important;
}

.portletCollection > ul > li > a {
    padding: 0 !important;
}

.portletCollection .portletItem .portletItemDetails {
    display: block;
    position: relative;
    font-size: 12px;
    color: #696969;
}


.portletSearch {
    clear: both;
}
.portletSearch .portletHeader,
.portletSearch .portletFooter,
.portletSearch .searchButton {
    display: none;
}

.portletSearch input.searchField {
    width: 70%;
}

#portal-column-one .portlet .portletContent > * {
    padding: 0;
}


/* Footer actions */
.documentActions ul {
    padding-top: 3em;
    list-style: none;
    padding-left: 0;
    font-size: 90%;
}

.documentActions ul li {
    display: inline;
    padding-left: 0.5em;
    margin-left: 0.4em;
    border-left: 1px solid #B4BCBF;
}

.documentActions ul li:first-child {
    border-left-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

.documentActions a {
    color: #696c6d
}

/* Navigation styles (mobile and desktop) */
#mainnavigation .plone-navbar {
    background-color: #b4bcbf;
    min-height: 36px;
    box-shadow: none;
    font-weight: bold;
}

#mainnavigation .plone-nav .dropdown li a {
    text-decoration: none;
    color: #696c6d;
    background-color: #ddd;
}

#mainnavigation .plone-nav .dropdown li a:hover,
#mainnavigation .plone-nav .dropdown li a:focus {
    background-color: #5a6295;
    color: #fff;
}

#mainnavigation .plone-nav li a:hover,
#mainnavigation .plone-nav li a:focus {
    background-color: #5a6295;
}

#mainnavigation-wrapper {
    margin-top: 1em;
    padding-left: 0;
    padding-right: 0;
}

.plone-navbar-toggle {
    margin-right: 8px;
}

#mainnavigation .plone-navbar-nav .has_subtree.inPath > a,
#mainnavigation .plone-navbar-nav .has_subtree.inPath > a:hover,
#mainnavigation .plone-navbar-nav .has_subtree.inPath > a:focus,
#mainnavigation .plone-navbar-nav .has_subtree .inPath > a,
#mainnavigation .plone-navbar-nav .has_subtree .inPath > a:hover,
#mainnavigation .plone-navbar-nav .has_subtree .inPath > a:focus {
    background-color: #5a6295;
    color: #fff;
}

#mainnavigation .plone-nav li label::after {
    background-color: #888;
}

#mainnavigation .plone-navbar-toggle:hover {
    background-color: #888;
    border-color: #ccc;
}

@media (min-width: 768px) {
    /* Navigation for non-mobile */
    #mainnavigation-wrapper {
        margin-top: 1em;
    }

    #mainnavigation .plone-nav .dropdown li a {
        border-top: 1px solid #fff;
    }

    #mainnavigation .plone-nav li label::after {
        content: "";
        background-color: transparent;
    }

    #mainnavigation .plone-navbar-nav > li {
        border-right: 2px solid #fff;
    }

    #mainnavigation .plone-navbar-nav > li > a {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Dropdown-navigaton */
    #mainnavigation .plone-nav li ul {
        max-width: 340px;
    }

    #mainnavigation .plone-nav li ul li a {
        min-width: 340px;
    }
}

/* Responsive fixes */
.modal-image img {
    max-width: 100%;
}



@media (max-width: 886px) {
    body {
        background-color: #fff !important;
    }
}

#cookieswitcher {
    width: 8%;
    padding-top: 5px;

}

@media (max-width: 886px) {

    #cookieswitcher {
        margin-top: 10px;
    }
}

#cookieswitcher .input-group-btn {
    font-size: unset;
}

#cookieswitcher .input-group-btn a {
    padding: 5px;
    border: 1px solid black;
}

.dsgvo-banner > div {
    float: left;
}

/* Some #12518 film form styling */
label[for="form-widgets-beschriftung"] {
    font-weight: normal;
}

@media (min-width: 200px) {
    #content-header #portal-header {
        padding-bottom: 0px;
        min-height: 0;
    }
}

@media (min-width: 992px) {
    #content-header #portal-header {
        min-height: 143px;
    }
    #mainnavigation-wrapper {
        padding-left: 15px;
    }
}


@media print {

    #content a[href]::after {
        content: "";
    }

    nav.pagination,
    #viewlet-below-content-body {
        display: none;
    }
}