/*
Theme Name: neutral
Theme URI: http://wordpress.org/extend/themes/
Author: elbe & spree
Author URI: http://www.elbe-spree.de
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready

-------------------------------------------------------------- */


 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,800;1,300&display=swap');


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, header 
{
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

a
{
text-decoration: none;
}


body
{
	font-family: Raleway, sans-serif;
	font-style: regular;
	font-weight:400;
	font-size:1em;
}



footer
{
padding:2em;
font-size:100%;
text-align:center;
background:#000000;

}


article
{
	margin: 0 auto; 
	width:90%;
}

article .bild
{
	max-width:100%;
	height:auto;
	margin-right:2em;
}

article h1, article h2
{
	font-size:120%;
	color:#cf2e2e;
	font-style:bold;
}

article a
{
	color:#000000;
	font-style:bold;
}


nav
{
padding: 0px 0;
}



/* ==========================================================================
   eigene
   ========================================================================== */

	
	main
{
    width:95%;
	margin: 0 auto;
}
	
	header
{
	
}
	

hr
	{
	border: 0;                /* Entfernt den Standard-Rahmen */
    height: 1px;              /* Macht die Linie exakt 1px d?nn */
    background: #eee8c5;         /* Dunkelgrau statt Schwarz f?r Eleganz */
    margin-top: 30px ;           /* Oben/Unten 30px Abstand */
    width: 100%;              /* Volle Breite */
	}

	
.rechts
{
	text-align: right; 
	width:95%;
	padding:10px 0;
}
	
.container 
{
	display: flex;         /* Aktiviert Flexbox */
    flex-wrap: wrap;       /* Erlaubt Umbruch auf Mobilger?ten */
	flex-direction: row; /* Standard: nebeneinander */
    gap: 10px;           /* Abstand zwischen den Elementen */
    align-items: stretch; /* Kinder sind gleich hoch */
	justify-content: center; /* Zentriert horizontal auf der Hauptachse */
	align-items: top;     /* Zentriert vertikal auf der Querachse */
}
	
.container h2, .container h1
	{
		color: #555555;
		font-size: 110%;
	}


.container-left 
{
  flex: 3; /* W?chst nicht, schrumpft nicht, Basis 80% */
}
	
.container-left img 
	{
	object-fit: cover; 
	height:auto;
}
	

.container-right {
	flex: 1; /* W?chst nicht, schrumpft nicht, Basis 20% */
	background:#ffffff;
	border-left: 0px solid #eceae2; /* Dein Blau-Ton */
    padding-left: 12px;             /* Abstand zwischen Strich und Text */
}

	
.kopf
{
	display: flex;         /* Aktiviert Flexbox */
	flex-direction: row; /* Erzwingt die Nebeneinander-Anordnung */
	flex-wrap: nowrap;   /* Verhindert das Untereinander-Rutschen */
	gap: 10px;           /* Abstand zwischen den Elementen */
	align-items: stretch; /* Kinder sind gleich hoch */
	width: 95%;
	padding: 0px;
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom: 0px;
}

.kopfebene {
    width:70%;
    border-right: 0px solid #ddd; /* Falls der Strich hier bleiben soll */
}

	
.kopftext 
{
	position: relative;
	overflow: hidden;
	text-decoration: none;
	flex: 4; /* Nur so breit wie der Inhalt (z.B. ein Icon) */
	align-self: flex-start; /* "Oben b?ndig" */
	border-bottom: 0px solid #e5e5e5; 
	border-right: 0px solid #e5e5e5; 
	margin: 0 auto;
}
	
.kopflinks 
	{
        position: relative;
        overflow: hidden;
        text-decoration: none;
		/* flex: 0 0 auto; Nur so breit wie der Inhalt (z.B. ein Icon) */
		flex: 0 0 180px; /* Nicht wachsen, nicht schrumpfen, genau 250px */
		align-self: flex-start; /* "Oben b?ndig" */
		background:#ffffff;
    }

.kopfrechts
{
	position: relative;
	overflow: hidden;
	text-decoration: none;
	flex:1; /* Nur so breit wie der Inhalt (z.B. ein Icon) */
	align-self: flex-start; /* "Oben b?ndig" */
}


.kopfrechts img 
{
object-fit: cover; 
width:100%;
height:100%;
border-radius: 0px;                /* Abgerundete Ecken */
}
	
.box
{
	padding: 10px;
	line-height: 200%;
	font-size:110%;
	color:#9e5904;
	width:90%;
	margin: 0 auto;
}

.kurztext
{
background-color: #ffffff;
border-left: 0px solid #e5e7eb;          /* Ganz leichter Rand */
width: 90%;
padding:20px 70px;
line-height: 180%;
font-size:110%;
margin:0 auto;
margin-bottom:20px;
color: #000000;
}

.hervor
{
border-radius: 0px;                /* Abgerundete Ecken */
padding: 20px;                      /* Abstand innen */
border-left: 3px solid #9e5904;          /* Ganz leichter Rand */
max-width: 100%;
line-height: 180%;
font-size:110%;
color:#9e5904;
margin:20px 0;         
}

.einzeln
{
background-color: #ffffff;
border-radius: 0px;                /* Abgerundete Ecken */
padding:15px 40px;                      /* Abstand innen */
border: 1px solid #e5e7eb;          /* Ganz leichter Rand */
max-width: 60%;
margin:20px;
}

.einzeln div
{
padding:5px 0;
}



.inhalt {
width: 90%;
margin: 0 auto;
}


.text_rand
{
	flex: 2; /* W?chst nicht, schrumpft nicht, Basis 80% */
}

.inhalt img
{
	object-fit: cover; 
	width:200px;
	height:auto;
}

/* ==========================================================================
   eigene
   ========================================================================== */

.link
{
	color:#9e5904;
	padding:10px 0;
  font-size:100%;
}


.text
{
	color:#444444;
	line-height: 150%;
  font-size:100%;
}


.adresse
{
	color:#525252;
	padding:5px 0;
}


.titel
{
color:#000000;
padding-top:20px;
padding-bottom:10px;
font-weight: bold; 
font-size:120%;
text-transform: uppercase; /* Optional: für einen edlen Look */
}

.name
{
	color:#9e5904;
	padding:5px 0;
	font-weight: bold; 
	font-size:100%;
}

.stadtteil
{
	color:#9e5904;
	padding-top:25px;
	font-weight: normal; 
	font-size:100%;
}



.titel-center {
    display: flex !important;   /* Erzwingt Flexbox-Layout */
    align-items: center;        /* Zentriert Text und Linien vertikal */
    justify-content: center;    /* Zentriert den gesamten Inhalt horizontal */
    width: 100%;                /* Nutzt die volle Breite */
    text-align: center;         /* Fallback für alte Browser */
    padding: 20px 0;
    font-size: 100%;
    color: #000000;
    clear: both;                /* Verhindert Störungen durch Floats */
	font-weight: bold; 
}

.titel-strich {
    display: flex !important;   /* Erzwingt Flexbox-Layout */
    width: 100%;                /* Nutzt die volle Breite */
    padding: 20px;
    font-size: 100%;
    color: #000000;
    clear: both;                /* Verhindert Störungen durch Floats */
	font-weight: bold; 
	border-bottom: 1px solid #eeeeee;
}

.fett
{
    font-size: 100%;
    color: #000000;
  	font-weight: bold; 
}
	


.klein
{
color:#808080;
font-size:80%;
}

.abstand
{
	padding:25px 50px;
	
}


/* --------------------------------------------------- Navigation 0 -------------------------------------------*/

.null {
display: flex;
   flex-wrap: nowrap;
   justify-content: center; /* Horizontal zentrieren */
    gap: 0px;
    overflow-x: auto;
    padding: 0px;
    -webkit-overflow-scrolling: touch;
    width: 100%;               /* Sicherstellen, dass die volle Breite genutzt wird */
	background: #ffffff;
	margin-bottom:15px;
}


.null-box 
{
position: relative;
height: 40px;             /* Einheitliche H?he f?r den High-End Look */
border-radius: 0px;
overflow: hidden;
text-decoration: none;
flex: 1; /* Alle Kinder teilen sich den Platz zu gleichen Teilen */
box-sizing: border-box;  /* Der Rand wird nach innen gerechnet */

}

    .null-box img {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        opacity: 0; 
        transition: opacity 0.4s ease-in-out; 
    }
	
	/* Nur im Hover oder wenn aktiv: Bild einblenden */
.null-b:hover img, .null-b.is-active img 
{ 
        opacity: 0.8; 
}

.null-box:hover, .null-box.is-active
{ 
        opacity: 0.5; 
}

.null-overlay 
{
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #fff;
	justify-content: center; /* Horizontal mittig */
align-items: center;     /* Vertikal mittig */
    }

 /* --------------------------------------------------- Navigation 1 -------------------------------------------*/
 
 
 

.eins { 
  display: grid; 
  /* Erzwingt eine einzige Reihe */
  grid-auto-flow: column; 
  /* Teilt den Platz exakt gleichm??ig auf alle vorhandenen Kinder auf */
  grid-auto-columns: 1fr; 
  
  gap: 1px; 
  padding-bottom: 20px;
  width: 100%;
  margin: 0 auto; 
  
  /* Stretcht die Kinder auf volle H?he/Breite der Zelle */
  justify-items: stretch; 
  align-items: stretch;   
}

/* Wichtig, damit langer Text die Spalten nicht ungleichm??ig aufdr?ckt */
.eins > * {
  min-width: 0; 
  text-align: center;
}


.eins a
{ 
        color:#555555;
}

.box-eins-css
{
	background: #f5f5f5;
}


.box-eins 
{ 
position: relative; 
height: 50px; 
display: flex;          /* Aktiviert Flexbox */
text-decoration: none;
overflow: hidden;
border-radius:0px;	
border: 1px solid #cccccc;
  /* Diese beiden Zeilen zentrieren den Inhalt: */
justify-content: center; /* Horizontal mittig */
align-items: center;     /* Vertikal mittig */
font-size:90%;
}

    /* Hover & Aktiv */
.box-eins:hover 
    { 
        background: #000000;
		color:#ffffff;
    }

	
.box-eins.is-active  { 
  
       background: #9e5904;
    }
       


.box-eins.is-active
{ 
        color:#ffffff;
       
}


 
 /* ebene 2 ------------------------- */
 .zwei 
	{
                    overflow-x: auto;
                    white-space: nowrap;
                    padding-bottom: 20px;
                    margin-bottom: 0px;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none; /* Firefox */
					background: #ffffff;
     }
                               
.ebene2-list { display: flex; gap: 8px; }

                /* Massive, fingerfreundliche Buttons */
.zwei-box {
display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 10px;
background:#efefef;
                    color: #000000;
                    text-decoration: none;
                    border-radius: 10px;
                    font-weight: 800;
                    font-size: 15px;
                    border: 1px solid #666666;
                    transition: all 0.2s ease-in-out;
                    box-sizing: border-box;
					min-width: 110px;
                }

                /* HIGHLIGHT: Bleibt aktiv, wenn man in dieser Ebene ODER tiefer ist */
                .zwei-box.is-active {
                    background: #666666; /* Deine Akzentfarbe */
					color: #eeeeee;
                }

                .zwei-box:active {
                                    
                }
 


.kultur
{
	background:#616B8F;
	color:#ffffff;
}

.berlin
{
	background:#000000;
	color:#ffffff;
}

.style
{
	background:#BED579;
	color:#ffffff;
}

.kiez
{
	background:#BA2D00;
	color:#ffffff;
}


.leben
{
	background:#DE9930;
	color:#ffffff;
}

.veranstaltungen, .gastro
{
	Background:#B08564; /* rot braun */
	color:#ffffff;
}



.box_kultur
{
	background:#5e0046;
}

.box_berlin
{
	background:#666666;
}

.box_style
{
	background:#51702d;
}

.box_kiez
{
	background:#9b3810;
}


.box_leben
{
	background:#9e5904;
}


.box_veranstaltungen
{
	Background:#555555; /* rot braun */
}


  /* Intro - Der ?u?ere Container, der die linke und rechte Spalte h?lt */

/* Die Unter-Raster (links und rechts) */
.intro_sechs 
{ 
	display: grid; 
	grid-template-columns: 1fr 1fr; /* Innerhalb nochmal 2 Spalten */
	gap: 15px;  
	margin: 20px auto; /* Abstand zwischen den kleinen Boxen */
}

.col-left .item-0 { grid-column: 1 / 3; } /* Das erste Element (Index 0) in der linken Spalte geht ?ber 2 Spalten */     
.col-right .item-5 { grid-column: 1 / 3; } /* Das letzte Element (Index 5) in der rechten Spalte geht ?ber 2 Spalten */



/* UNTER-RASTER: Jeweils 2 Spalten pro Hauptspalte */
.intro-spalten {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px;
        gap: 15px;
}

/*  ende sechser---------*/



/* Die einzelne Beitrags-Box */
.introbox { 
		position: relative; 
		overflow: hidden; 
		border-radius: 8px; 
		background: #000;               /* Schwarz als Hintergrund f?r den Overlay-Effekt */
		display: block; 
		height:200px;
}

/* Das Bild innerhalb der Box */
.introbox img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover;              /* Bild f?llt die Box aus ohne Verzerren */
            transition: all 0.5s ease;      /* Sanfter Zoom-Effekt beim Dr?berfahren */
            opacity: 0.7;                   /* Leicht transparent, damit Text besser lesbar ist */
        }

        /* Effekt beim Hovern (Maus dr?ber) */
.introbox:hover img { 
            transform: scale(1.1);          /* Bild zoomt leicht ran */
            opacity: 0.5;                   /* Bild wird noch etwas dunkler */
        }

        /* Container f?r den Text ?ber dem Bild */
.intro-text
{ 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            padding: 10px; 
            background: linear-gradient(transparent, rgba(0,0,0,0.9)); /* Verlauf von oben nach unten */
            color: #fff; 
            z-index: 5; 
}



        /* Styling der Textelemente */
.p-cat { font-size: 14px; font-weight: bold; color: #eb880e; display: block; }
.p-title { font-size: 14px; font-weight: bold; }
.p-excerpt { font-size: 11px; line-height: 1.3; color: #ccc; display: block; }


.intro_titel
{ 
	font-size: 100%;
	color:#ffffff;
	font-weight: bold;
	padding:5px;
}

.intro_bez
{ 
	font-size: 90%;
	color:#ffffff;
}

.intro_text {
    position: absolute;
    bottom: 0;   /* Text am unteren Rand */
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund, damit man den Text liest */
    color: #fff;
    padding: 15px;
    pointer-events: none; /* Klicks gehen durch auf den Link */
}

.beschreibung { 
	font-size: 12px; 
	line-height: 150%; 
	color: #ffffff;
}

.cat { font-size: 14px; font-weight: normal; color: #eb880e; display: block; }

       

/* Container für das Grid */
.vier { 
display: grid; 
  /* Erzwingt eine einzige Reihe */
grid-auto-flow: column; 
  /* Teilt den Platz exakt gleichm??ig auf alle vorhandenen Kinder auf */
grid-auto-columns: 1fr; 
  gap: 10px; 
  padding: 10px;
  width: 100%;
  margin: 0 auto;   
  /* Stretcht die Kinder auf volle H?he/Breite der Zelle */
justify-items: stretch; 
align-items: stretch;   
border-radius: 5px; /* Leicht abgerundete Ecken */
}

/* Die einzelnen Kacheln (Links) */
.vier_spalten { 
	position: relative;
	flex: 1; /* Verteilt den Platz gleichmäßig */
	aspect-ratio: 3 / 2; /* Macht die Box quadratisch */
    overflow: hidden; 
    display: block; 
    background: #000;
    border-radius: 0px; /* Leicht abgerundete Ecken */
}

/* Das Bild innerhalb der Kachel */
.vier_spalten img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover-Effekt: Bild zoomt leicht ran */
.vier_spalten:hover img {
    transform: scale(1.1);
}

/* Das Overlay mit dem Text */
.vier_overlay 
{
    position: absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
	background:#000000;
}


.intro_grid, .intro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
	margin-bottom:25px;
}

.overlay-item, .intro_box {
    position: relative;
    height: 180px; /* H?he anpassbar */
    display: flex;
    align-items: flex-end; /* Text unten positionieren */
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    border-radius: 8px;
	text-align: left; /* KEIN Blocksatz (Justify) */
}

/* Dunkles Overlay f?r Lesbarkeit */
.overlay-content {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px;
    width: 100%;
    transition: background 0.3s ease;
	box-sizing: border-box;
}

.overlay-item:hover .overlay-content {
    background: rgba(0,0,0,0.7); /* Verdunkelt sich beim Hover */
}

.overlay-content h3 { margin: 0 0 10px; font-size: 1.2rem; }
.overlay-content .excerpt { font-size: 0.9rem; margin-bottom: 5px; opacity: 0.9; }
.overlay-content .full-text { font-size: 0.8rem; opacity: 0.7; }


/* layout f?r Artikel ------------------------------------------------------------------*/

.news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Gro?z?giger Platz zwischen den Artikeln */
    margin: 40px auto;
    padding: 0 20px;
}

.news-card {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    /* D?nner Trennstrich rechts */
    border-right: 1px solid #e5e5e5; 
}

/* Der letzte Artikel in jeder 3er-Reihe braucht keinen rechten Strich */
.news-card:nth-child(3n) {
    border-right: none;
    padding-right: 0;
}

/* Bild-Styling */
.news-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Schneidet Bilder sauber zu */
    margin-bottom: 15px;
    display: block;
}

/* Typografie-Feinschliff */
.kicker {
    color: #e60000;
    font-family: 'Arial Black', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.headline a {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.2;
    display: block;
    margin: 5px 0 10px;
}

.lead-text {
    font-family: 'Georgia', serif; /* Seri?ser Nachrichten-Look */
    color: #4d4d4d;
    font-size: 1rem;
    line-height: 1.5;
}


/* Haupt-Container */
.intro-grid-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Links breiter als rechts */
    grid-template-rows: repeat(5, 100px); /* Definiert die Zeilenh?he */
    gap: 15px;
    width: 100%;
    margin-bottom: 40px;
}

/* Die Boxen allgemein */
.intro-box {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 8px;
    text-decoration: none;
}

/* Das gro?e Bild (Erster Post) */
.big-item {
    grid-column: 1 / 2;
    grid-row: 1 / 4; /* Geht ?ber alle 5 Zeilen auf der linken Seite */
    height: 100%;
}

/* Die kleinen Bilder (Rechte Spalte) */
.small-item {
    grid-column: 2 / 3;
    height: 100%; /* Passt sich der Zeilenh?he an */
}

/* Bild-Styling */
.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Text-Overlay */
.intro_text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    z-index: 2;
}

.post-grid-container {
    display: grid;
    grid-template-columns:  repeat(4, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.post-card {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
}

.post-link-overlay {
    text-decoration: none;
    display: block;
    height: 100%;
}

.post-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5); /* Dunkler Verlauf f?r Lesbarkeit */
    color: #ffffff;
    padding: 20px;
    transition: background 0.3s ease;
}

.post-card:hover .post-content-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.post-title {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.post-excerpt {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}



/* layout Beitrag  */

.reihe {
        margin: 20px auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4-Spalten-Basis f?r die Breite */
        grid-auto-rows: 180px;
        gap: 15px;
    }

.reihe-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: #000;
        text-decoration: none;
        display: block;
        grid-column: span 1; /* Standard: Schmal */
    }

    /* ERSTE REIHE (Beitr?ge 0, 1, 2) */
.r-item-0 { grid-column: span 2; } /* Der erste ist doppelt so breit */
    
    /* ZWEITE REIHE (Beitr?ge 3, 4, 5) */
.r-item-5 { grid-column: span 1; } /* Der letzte in der 2. Reihe ist doppelt so breit */

    /* BILD & OVERLAY */
    
.reihe-item img 
{
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        opacity: 0.7;
}
    
.reihe-item:hover img 
{ 
transform: scale(1.1); opacity: 0.5; 
}


.stadtteil-titel { margin: 50px 0 20px 0; font-size: 1.5em; color: #B8A7A4; border-bottom: 1px double #cccccc; }
    
    /* Buchstaben-Trenner */
    .alphabet-header { 
        grid-column: 1 / -1; /* Geht ?ber die volle Breite des Grids */
        font-size: 1.5em; 
        font-weight: bold; 
        color: #0073aa; 
        margin: 20px 0 10px 0;
        padding-left: 5px;
        border-left: 4px solid #0073aa;
    }

   .dreier_reihe { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 0px; 
        margin-left: 20px;
	  
    }

    .dreier_reihe_item { 
        background: #ffffff; 
        padding:20px; 
        border-radius: 0px; 
		border-left: 1px dotted #9e5904;
		 margin-bottom:30px;
    }

.dreier_reihe_item { 
    background: #ffffff; 
    padding: 20px; 
    border-radius: 0px; 
    height: auto;
    /* Standardmäßig keine Linie */
    border-left: none; 
}

/* Füge die Linie nur hinzu, wenn es NICHT das erste Element in einer 3er-Reihe ist */
.dreier_reihe_item:not(:nth-child(3n+3)) {
    border-right: 1px dotted #9e5904;
}

 /* HAUPT-GRID: 2 gleich gro?e Spalten */
    .portal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 20px auto;
    }

    /* UNTER-RASTER: Jeweils 2 Spalten pro Hauptspalte */
    .portal-spalten {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px;
        gap: 15px;
    }

    .portal-box {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: #000; /* Basis f?r Bild-?berlagerung */
        display: block;
        text-decoration: none;
    }

.portal-box img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease, opacity 0.3s ease;
        opacity: 0.7; /* Macht das Bild dunkler f?r bessere Lesbarkeit */
}

.portal-box:hover img { transform: scale(1.1); opacity: 0.5; }

 .overlay 
 { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: #fff; z-index: 5; }

/* Grundstyling der Liste */
.menu {
    display: flex;
    justify-content: flex-end; /* Schiebt alle Menüpunkte nach rechts */
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
}


/* Hauptmenü-Punkte */
.menu > li {
    position: relative;
    padding: 20px 10px;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-weight: normal;
}

/* Das Untermenü (Senkrecht unter dem Hauptpunkt) */
.menu .sub-menu {
    display: none; /* Standardmäßig unsichtbar */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 99;
    list-style: none;
    padding: 10px 0;
}

/* Sichtbar machen beim Hover */
.menu li:hover > .sub-menu {
    display: block;
}

/* Styling der Unterpunkte (Intro-Seiten) */
.menu .sub-menu li {
    padding: 8px 20px;
}

.menu .sub-menu a {
    font-weight: normal;
    font-size: 0.9em;
}

/* Den aktuell angeklickten Link markieren */
.menu .current-menu-item > a {
    color: #0073aa; /* Deine Wunschfarbe */
    font-weight: bold;
    border-bottom: 2px solid #0073aa; /* Unterstreichung für den aktiven Punkt */
}

/* Wenn eine Unterseite aktiv ist, soll die Hauptkategorie oben auch aktiv aussehen */
.menu .current-menu-ancestor > a {
    color: #0073aa;
    font-weight: bold;
}

/* Spezielles Styling für die aktive Intro-Seite im Dropdown */
.menu .sub-menu .current-menu-item > a {
    background-color: #f0f0f0;
    border-bottom: none; /* Keine Unterstreichung im Dropdown */
}

/* Markiert den exakten Punkt und alle Eltern-Ebenen */
.current-menu-item > a, 
.current-menu-ancestor > a,
.current-category-ancestor > a {
    color: #0073aa !important; /* Deine Highlight-Farbe */
    font-weight: bold;
}


/* Der Container, der Titel und Menü umschließt */
.header-container {
    display: flex;
    justify-content: space-between; /* Schiebt Titel nach links, Menü nach rechts */
    align-items: center;            /* Zentriert beide vertikal auf einer Linie */
    padding: 10px 20px;
    background: #fff;               /* Deine Hintergrundfarbe */
}

/* Styling für den Webseitentitel */
.site-title a {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}


.hierarchy-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    gap: 8px;
    align-items: center;
}

/* Trenner-Symbol (z.B. ein Pfeil oder Slash) */
.hierarchy-nav li:not(:last-child)::after {
    content: "›"; /* Schönes Trennzeichen */
    margin-left: 8px;
    color: #999;
}

.hierarchy-nav a {
    text-decoration: none;
    color: #0073aa; /* Deine Primärfarbe */
    font-size: 0.95rem;
}

.hierarchy-nav a:hover {
    text-decoration: underline;
}

/* Der aktuelle Ort fett markiert */
.hierarchy-nav .current-page {
    font-weight: bold;
    color: #333;
    font-size: 0.95rem;
}