:root {
  /* Olivero-Variable für Überschriften überschreiben */
  --font-sans: "Poppins", sans-serif;
  --font-serif: "Inter", sans-serif;
  --font-nav: "Barlow Condensed", sans-serif;
  --font-nav: "Poppins", sans-serif;

  --ali-accent: #d99e32;           /* Bernsteingelb */
  --ali-accent-light: #fff8e6;    /* Sehr helles Bernsteingelb */
}
:root {
  /* Standard in Olivero ist 76.25rem (ca. 1220px) */
  /* Hier erhöhen wir es auf z.B. 90rem (ca. 1440px) oder mehr */
  --max-width: 90rem; 
}
body {
 background-image: none;
     background-color: var(--color--gray-90);
}
@media (min-width: 43.75rem) {
  :root {
    --grid-gap: 3.5rem; /* oder gewünschter Wert */
  }
}
@media (min-width: 75rem) {
  /* Erhöht die maximale Breite des inneren Grid-Containers */
  .grid-container {
    max-width: var(--max-width);
  }

  /* Holt mehr Flexibilität in die Spaltenaufteilung */
  .layout-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 4rem; /* Hier kannst du direkt auch den Abstand zur Sidebar steuern */
  }
}

@media (max-width: 768px) {
  
  .field--name-field-headertext {
    font-size: 1rem;
  }
  
}
/* .site-header__inner__container {
  background-color: #5a4482;
} */ 

.field--name-field-projektindexbild img {float: left;padding-right: 1rem;}

/*.views-view-responsive-grid__item-inner {
  position: relative;
  overflow: hidden;
}*/
.news-start .views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
}
/* Container für jeden Raster-Eintrag */
.news-start .views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
  height: 100%; /* Sorgt für gleich hohe Spalten im Grid */
  box-sizing: border-box;
}

/* Titel-Bereich mit fixer Höhe und eigenem Padding */
.news-start .views-field-title {
  line-height: 1.3;
  background-color: #222;
  min-height: 4rem; /* Platz für exakt 2 Zeilen */
  padding-bottom: 0px; /* Abstand zwischen Titel und Bild */
}

.news-start .views-field-title a {
  display: block;
 
}
.news-start span.field-content.news a {font-weight:500;

padding: 0.5rem;
font-size: 1rem;
color:#fff;}
/* Bild-Bereich */
.news-start .views-field-field-newsindexbild img {
  width: 100%;
  height: auto;
  display: block;
}

.node--type-news .field--name-field-newsindexbild {
  float: left;
   padding-right: 1rem;
}

/* */
.photoswipe-gallery.field__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* genau 3 Spalten */
  gap: 1rem; /* Abstand zwischen den Bildern */
}

.photoswipe-gallery .field__item img {
  width: 100%;
  height: auto;
  display: block;
}

.site-header__inner__container {
  background-color: #5a4482;
}
div#header-nav {
    background: #5a4482;
}
.primary-nav__menu-link {
  color: #fff;
}
.primary-nav__menu-link--level-2 {
  color: #000;
}
.primary-nav__menu-link--level-2:hover {
  color: #b85359!important;
}

body:not(.is-always-mobile-nav) {
    @media (min-width: 75rem) {
        & .primary-nav__button-toggle {
            & .icon--menu-toggle {
                color: #fff!important;
                inset-inline-start: 0.1875rem;
                width: 1.125rem;
                transform: translateY(-50%);
                border-radius: 0.25rem;
                background-color: transparent!important;
            }
        }
    }
}

/* Optimierung für die schmale Schriftart */
h1, h2, h3, .site-branding__name {
  font-weight: 700 !important;
}
.views-element-container {font-family: var(--font-serif);font-size: 1.125rem;}
@media (min-width: 75rem) {
  .site-footer__inner {
    padding-block: var(--sp4) var(--sp4); /* Beispiel: deutlich weniger */
  }
}
.field--name-field-aufseite .field__items {
    display: flex;
    gap: 0.5rem; /* Abstand zwischen den Items */
}

.field--name-field-aufseite .field__item {
    margin: 0; /* falls Drupal Standard-Abstände gesetzt hat */
}
.primary-nav__menu-link--level-2 {
  font-weight: 600!important;
  color: #000!important;
}
div#block-ali-theme-copyright {margin-bottom: 0;}
.advice .layout__region {border-radius:1rem;background: #eeecf2;}
.advice h2.block__title {color: #fff;
    font-size: 1.3rem;
    font-weight: 600 !important;
}
.news.views-row .views-field.views-field-title {padding-bottom:1rem;}
.view-news img {float:left;padding-right: 20px;}
.news-start .view-news img {padding:0;border: 0px }
.view-content .views-row:nth-child(odd) {
  background-color: #f5f5f5; /* helle Farbe für ungerade Zeilen */
}

.view-content .views-row:nth-child(even) {
  background-color: #ffffff; /* andere Farbe für gerade Zeilen */
}

/* Optional: etwas Innenabstand */
.view-content .views-row {
  padding: 1rem;
}

.view, .view-content {
    @media (min-width: 43.75rem) {
        gap: var(--sp1);
    }
}
.region--sidebar .views-field-field-datei .field-content span:nth-of-type(2) {
  display: none;
}
/* FIX .wide-content */

.node--type-projekte .node__content .wide-content {width: auto;
  position: static;
  left: auto;
  margin-left: 0;
  margin-right: 0;}


.block-views-blocknews-block-1 .block__title, .news-start .block__title {color:var(--ali-primary);font-size:1.5rem}
.region--sidebar .view-content .views-row:nth-child(odd), .region--sidebar .view-content .views-row:nth-child(even) {background-color: transparent;}
.advice .layout__region {background:#b85359}

body:not(.is-always-mobile-nav) {
    @media (min-width: 75rem) {
        & .primary-nav__menu--level-2

 {
                   width: 22rem!important;
       
        }
    }
}
span.field-content.news a {font-weight:700;}
div#block-ali-theme-copyright {margon-b}
.block-field-blocknodepagefield-download, .field--name-field-datei, .field--type-file{padding: 1rem;border-radius: 1rem;
    background: #eeecf2;}
.block-system-main-block {font-size:1.125rem;}
.breadcrumb {font-family: var(--font-serif);}
.primary-nav__menu-link-inner {text-transform: none;}
.site-footer .block__title {
    color: #fff;
font-size:1.313rem;
font-weight:600;
}

html.js body:not(.is-always-mobile-nav) .site-header__inner {
    @media (min-width: 75rem) {
        transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
        background: #5a4482;
    }
}

@media (min-width: 75rem) {
  /* Spezifischer Selektor über die Ebene-2-Liste */
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 .primary-nav__menu-link:hover,
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 .primary-nav__menu-link:hover .primary-nav__menu-link-inner {
    color: #b85359 !important;
  }
}

body:not(.is-always-mobile-nav) {
    @media (min-width: 75rem) {
        & .primary-nav__menu--level-2 {
                      border-top: solid rgb(184, 83, 89) var(--sp0-5);
          
        }
    }
}


/* INFO_BOX */ 
.infoBox {
   background-color:#b85359;color:#fff;display:grid;gap:20px;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));padding:2rem;
   border-radius:1rem;
}
.infoBox h3, .infoBox a {color:#fff;}
.text-content table, .views-table, .draggable-table {font-size:1.125rem;font-family: var(--font-serif);}
.more-link {margin-top:2rem;}
.more-link a {background-color: #d99e32;color: #fff;padding: 1rem;text-decoration:none;border-radius: 0.5  rem;padding: 1rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;}
.more-link a:hover {background-color: #C72F15;color: #fff;padding: 1rem} 
    body:not(.is-always-mobile-nav) {
    @media (min-width: 75rem) {
        & .primary-nav__menu-link {
            letter-spacing: 0.02em;
           color: #fff;
            font-family: var(--font-nav);
            font-size: 1.125rem!important;
            line-height: var(--sp1-5);
        }
    }
}
.layout__region--first ,.layout__region--second, .layout__region--third {
    padding: 2rem;
}
time {font-size: 0.9rem;}
.search-block-form h2 {margin-top: 0;color:#fff;font-size: 1.313rem!important;}
.site-footer .menu__link {font-family: var(--font-serif);}
.site-footer h2, .search-block-form h {font-weight:600!important;}
.region--hero {
  max-height: 600px;
  overflow: hidden;
  box-shadow: 0 18px 12px -12px rgba(0,0,0,0.45);
}

.region--hero {
  max-height: 600px;
  overflow: hidden;
  margin-top: 3rem;
  box-shadow: 0 18px 12px -12px rgba(0,0,0,0.45);
}

.region--hero .block__content {
  position: relative;
  width: 100%;
  height: 40vh;
  min-height: 450px;
  max-height: 550px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Mobile: weniger Höhe */
@media (max-width: 768px) {
  .region--hero .block__content {
    height: 35vh;
    min-height: 280px;
    max-height: 350px;
  }
}
/* Wrapper füllt den ganzen Block */
.field--name-field-headerbild {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Alle Zwischen-Divs (media, field-media-image, field__item) füllen ebenfalls komplett */
.field--name-field-headerbild .media,
.field--name-field-headerbild .field--name-field-media-image,
.field--name-field-headerbild .field__item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Das Bild selbst: absolut positioniert, unabhängig von Eltern-Höhe */
.field--name-field-headerbild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.field--name-field-headertext {
  position: relative;
  z-index: 2;
  color: #ffffff;
  text-align: left;
  font-size: 1.25rem;
  width: 90%;
  max-width: 800px;
  max-height: 90%;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.field--name-field-headertext h2 {
  color:#fff;
}


.site-footer .button--primary {border:1px solid #fff;}
.site-footer .button--primary:hover {background:#fff;}

.icon-box-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.icon-box a,
.icon-box a:focus,
.icon-box a:active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height:100%;
max-height: 260px;
  background: #b85359;
  border-radius: 12px;
  padding: 1.8rem 1.2rem;
  color: #ffffff;

  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.icon-box a:hover {
background: var(--ali-primary);
color: #fff;
}
.icon-box-title {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.icon-box-icon {
  margin-top: auto;
  margin: 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 78px; /* gleiche Höhe für Bild oder Text */
}

.icon-box-icon img {
  max-width: 180px;
  height: auto;
  display: block;
}

.icon-box-icon.icon-text {
  font-size: 1.125rem;
  margin: 12px 0;
  font-weight: 400;
  text-align: center;
  line-height: 1.7;
}

/* Hintergrundbilder */
.bg-img-1 a {
  background-image: url('/sites/default/files/bg_cafe.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-img-2 a {
  background-image: url('/sites/default/files/bg_stellenboerse.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-img-3 a {
  background-image: url('/sites/default/files/bg_pc.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}


/*SIDEBAR */
.region--sidebar .text-content{line-height: var(--sp1-5)!important;}
.region--sidebar .file--application-pdf {font-size: 0.9rem;}
.region--sidebar .views-field-field-datei span {display:block;}
 .region--sidebar .block__title {text-transform:uppercase;font-size:1rem}
.sdbar,
div#block-ali-theme-cafeoffnungszeiten,
div#block-ali-theme-offnungszeitenstellenborse,
div#block-ali-theme-burozeitenfurberatungsblock-2,
div#block-ali-theme-views-block-downloads-zum-thema-block-1,
div#block-ali-theme-selbsthilfeprojekte-2
{
background: #F7ECE1;
    padding: 1rem;
    border-radius: 1rem;
    }

.region--sidebar .view-content .views-row   {padding:0;}
.region--sidebar .views-element-container {font-size:0.9rem;}
.region--sidebar .text-content, .region--sidebar .cke_editable {
    @media (min-width: 43.75rem) {
        font-size: 1rem;
        line-height: var(--sp2);
    }
}
/*VIEWS */


.views-field.views-field-field-projektindexbild, .view-id-news_archiv .views-field-field-newsindexbild {float:left;padding-right: 20px;}

/* -- Design Tokens ------------------------------- */
:root {
  /* Markenfarben */
  --ali-primary:       #5a4482;
  --ali-secondary:     #b85359;

  /* Olivero-Overrides */
  --olivero-color-text-primary-menu: var(--ali-primary);
  --color--primary-30:               var(--ali-primary);
  --color--primary-40:               var(--ali-primary);
}

/* -- �berschriften -------------------------------- */
/* h1: Seitentitel */
body .block-page-title-block h1.page-title,
body .page-title {
  font-size:     2rem;        /* ~32px */
  font-weight:   800;
  color:         var(--ali-primary);
  line-height:   1.2;
  margin-top:    1.5rem;
  margin-bottom: 1rem;
  text-align:    center;      /* ggf. entfernen */
  padding-bottom: 0.5rem;
}

/* h2: Abschnitts�berschriften */
body h2 {
  font-size:     1.5rem;      /* ~24px � 75 % von h1 */
  font-weight:   700;
  color:         var(--ali-primary);
  line-height:   1.25;
  margin-top:    2rem;
  margin-bottom: 0.75rem;
}

/* h3: Unterabschnitte */
body h3 {
  font-size:     1.2rem;      /* ~19px � 80 % von h2 */
  font-weight:   600;
  color:         var(--ali-primary);
  line-height:   1.3;
  margin-top:    1.5rem;
  margin-bottom: 0.5rem;
}

/* -- Navigation & Interaktion --------------------- */
.primary-nav__menu-link:hover {
  color:           #fff !important;
  text-decoration: underline;
}

.region--footer-bottom nav ul li a:hover {
  color: var(--ali-secondary);
}

.button--primary:hover {
  background-color: var(--ali-primary-hover) !important;
}

/* -- Footer --------------------------------------- */
body .site-footer {
  background-image: none !important;
  background-color: var(--ali-primary) !important;
  color:            #ffffff !important;
}

body .site-footer a,
body .site-footer .block-title,
body .site-footer .footer-block-title {
  color: #ffffff !important;
}

/* -- Responsive ----------------------------------- */
@media (max-width: 768px) {
  body .block-page-title-block h1.page-title {
    font-size: 1.6rem;
  }
  body h2 {
    font-size: 1.25rem;
  }
  body h3 {
    font-size: 1.05rem;
  }
}

.sidebar-grid {
    /* Wir m�ssen den Hauptinhalt (Content) einschr�nken, damit er Platz macht */
    & .main-content {
        @media (min-width: 62.5rem) {
            /* Standardm��ig geht der Content oft bis Spalte 11 oder 12.
               Hier lassen wir ihn exakt vor der neuen Sidebar enden. */
            grid-column: 2 / 11; 
        }
    }

    /* Hier weiten wir deine gefundene Sidebar aus */
    & .region--sidebar {
        @media (min-width: 62.5rem) {
            /* Startet jetzt bei 11 statt 12. 
               Nimmt somit Spalte 11, 12, 13 und 14 ein (= 4 Spalten). */
            grid-column: 11 / 15 !important; 
        }
    }
}
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start: solid var(--content-left) #b85359;
  }
}
.file--application-pdf a {
  position: relative;
  padding-left: 26px; /* Platz f�r Icon */
}

.file--application-pdf a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("/themes/custom/ali_theme/icons/file-pdf.png"); /* Pfad anpassen */
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 35rem) {
  .node__content img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}