/* CSS Document */
/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Claudia Elbert
 Author URI:   https://claudia-elbert.de
 Template:     generatepress
 Version:      0.1
*/

/********* Allgemein ***************************
 * Anmerkung dark-mode, wo Farben in Dark-mode gleich zu normal keine Farbvariablen benutzen
 * */
html,body{background: var(--base-3);}
nav a{color: rgba(0,0,0,0.75);}
.entry-header, .site-content{word-wrap: normal;}
p.gb-text{hyphens: auto;}
p.gb-text strong{white-space: nowrap;}

.dachzeile{margin-bottom: 8px; font-size: 16px;}
p.dachzeile{margin-bottom: 0px !important;}
:where(.is-layout-flex) {gap: 0.2em;}
.dachzeile.sep > a:not(:first-child):before {
    content: " | ";
}

.ctc-copy-btn__text{display: none;}
.ctc-copy-btn--button{padding: 4px !important;}

.teaser + .fallback-excerpt {
    display: none;
}
.teaser + .spacer {
    display: none;
}
.home .teaser{
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
/*
Source - https://stackoverflow.com/a/19758620
Posted by anon, modified by community. See post 'Timeline' for change history
Retrieved 2026-06-17, License - CC BY-SA 4.0
*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/********* Header *******************************/
/*
.header-widget {
	float: none;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}   */
header h1{margin: 0px;}
header select, header input[type="search"]{background: var(--contrast-2); border: 1px solid var(--contrast-2); border-radius: 5px; color: var(--base);}

header input[type="search"]{border: 1px solid var(--contrast-2); padding: 8px 15px}
header input[type="search"]::placeholder {
  color: var(--base);
  opacity: 1; /* Firefox */
}

.wp-container-core-group-is-layout-94bc23d7.search-login{justify-content: space-evenly;}
#site-navigation, .wp-block-search__label{display: none;}
.wp-block-loginout > a{color: var(--base-3);}

.swiper-menu{width: 86%; margin: 0px 8% 0px 2% !important;}
.swiper-menu .swiper-slide{width: auto;}
.swiper-slide p{color: rgba(0,0,0,0.75);}
nav .swiper-slide .active, nav .swiper-slide a:hover{font-weight: bold;}  /*color: #fff; */
.gb-element-aa4be235 .alignfull{margin: unset !important;}

nav .swiper{ overflow-x: clip;
  overflow-y: visible !important;}
nav .nav{position: relative;}
nav .swiper-button-next .swiper-navigation-icon, nav .swiper-button-prev, nav .swiper-button-prev .swiper-navigation-icon{  
  display: none;
}  
nav .swiper-button-next { right: 6% !important; position: absolute;}
/* Style for "next" arrow (right) */  
nav .swiper-button-next::after {  
  content: '\00BB'; /* Or use SVG: content: url("data:image/svg+xml,..."); */  
  font-size: 24px;  
  color:var(--contrast);
  font-weight: bold;  
}  
 
/* Style for "prev" arrow (left)  
.swiper-button-prev::after {  
  content: '\00AB'; 
  font-size: 24px;  
  color: #333;  
  font-weight: bold;  
}    */ 
nav .swiper-slide{white-space: nowrap;}

.custom-category-dropdowns {
  display: flex;
  gap: 20px;
}

.rubriken .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{
background: url('img/burger.svg') no-repeat 4px 7px;
padding: 5px 10px 5px 30px !important;
background-color: var(--contrast-2);
border: 1px solid var(--contrast-2);
  border-radius: 5px;
  font-size: 14px;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container{top: 37px; width: 100%; padding: 8px;}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{padding: 2px 12px;}
nav.rubriken, .wp-block-navigation__container, .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
border-radius: 5px !important; background-color: var(--contrast-2); border: 1px solid var(--contrast-2); z-index: 99999;
}
.rubriken li ul li a:hover{color: var(--accent) !important;}
   
.dropdown-menu {
  position: relative;
}

.dropdown-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--contrast-2);
  border: 1px solid var(--base);
  border-radius: 5px;
  color: var(--base);
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
  width: 180px; /* Feste Breite */
  box-sizing: border-box;
}

.burger-icon svg {
  display: block;
  flex-shrink: 0;
}

.button-text {
  flex-grow: 1;
  text-align: left;
}


.dropdown-menu button:focus {
  outline: 2px solid #005177;
}

.dropdown-menu ul, .wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--contrast-2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* Optional: weiche Kanten und leichter Versatz */
  border-radius: 4px;
  list-style: none;
  padding: 8px;
  margin: 4px 0 0 0;
  width: 100%; 
 /* max-width: 460px;  Breiter für 2 Spalten */
 /* max-height: 600px;  Optional: max Höhe mit Scroll */
  height: auto;
  overflow-y: auto;
  /*
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px 8px;
  */
 /* column-count: 4;  Anzahl der Spalten */
 /* column-gap: 10px;  Abstand zwischen den Spalten */
  z-index: 1000;
}
/*
#online-ausgaben{ left: -180px;/*  max-width: 960px; Breiter für 2 Spalten */}
*/
.dropdown-menu ul[hidden] {
  display: none;
}

.dropdown-menu li a {
  display: block;
  padding: 2px 12px;
  color: var(--base);
  text-decoration: none;
  font-size: 16px;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
  color: var(--accent);
  outline: none;
}
.current-cat, li.current-menu-item a {
  color: var(--accent) !important;
}
.dropdown-slide > li {
    list-style-type: none;
    padding: 4px 8px;
}

.tipps-tricks + ul {
    display: none;
    position: absolute;
    top: 26px;
    left: -50px;
    background-color: var(--accent);
    width: 160px;
    z-index: 99999999999;
}

.swiper-slide:hover > ul {
    display: block;

    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in; 
}

/******** Footer *********************************************/
.site-footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color: var(--base);}

/******* Home / Navigation ***********************************/
h2 {
	font-family: Inter;
	font-weight: 700;
	font-style: Bold;
	font-size: 34px; /* font-size: 50px; font-size: 54px;*/
	leading-trim: NONE;
	line-height: 40px;
	letter-spacing: -2%;
    margin-bottom: 8px !important;       
}
.home .swiper-wrapper h2 {
	font-family: Inter;
	font-weight: 700;
	font-style: Bold;
	font-size: 22px;
	leading-trim: NONE;
	line-height: 28px;
	letter-spacing: -2%;
    margin-bottom: 10px;
}
h3 {
	font-family: Inter;
	font-weight: 800;
	font-style: Extra Bold;
	font-size: 26px;     /* font-size: 32px;  font-size: 34px;*/
	leading-trim: NONE;
	line-height: 32px;   /* line-height: 44px; line-height: 46px;*/
	letter-spacing: -2%;
}
.dvd-download h2{margin: 30px 0px 0px 0px;}
.dvd-download h3{margin: 20px 0px 0px 0px; font-weight: 500; font-size: 22px; }

.home .swiper-news{padding-bottom: 0px !important;}
.home .swiper-news .wp-block-group {padding-bottom: 0px !important;}
.home .swiper-news .swiper-slide {border-right: 1px solid black;}
.home .swiper-news .swiper-slide:last-child {border-right: none;}
.home .site-main .wp-block-group__inner-container{padding: 0px 20px 0px 10px; }
.home .swiper-pagination{position: relative !important; top: 0px !important;}
.home .swiper-pagination-bullet-active{background-color: var(--accent) !important;}
.home .gb-query-loop-wrapper .gb-grid-column:last-child .gb-container{border-bottom: none !important;}

.online-ausgabe-teaser p, .online-ausgabe-teaser a, .online-ausgabe-teaser h2{color: rgba(0,0,0,0.75);}
a.bestellen-button{background-color: #ffffff;}
/*
span.dachzeile, div.dachzeile {font-size: 16px; color:var(--base-2);}      */
.post-template-default span.dachzeile {font-size: 16px;}
#load-more-dynamic{color: #000;}

/********** Online-Ausgabe **********************/
[class*='category-linuxwelt'] nav.gb-element-41879067{background-color: #fff; z-index: 99; position: relative;}
[class*='category-linuxwelt'] h3{font-size: 24px;}
/*
.filter-by-url .gb-grid-column{ margin: 20px 0px;}
.filter-by-url .gb-grid-column:nth-child(3n) .gb-container{border-right: 0px solid black;}
                                                                  */
/********* List / Archive *********************************/
.rubriken-liste h2 {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  font-size: 24px;   /* font-size: 28px; font-size: 34px; */
  line-height: 36px;
  font-weight: 800;
  margin-bottom: 5px;
}
.post-image a img, .wp-block-post-featured-image :where(img) {
	border-radius: 10px;
/*	border: 1px solid black;    */
}
.wp-block-post-featured-image{margin: 0px 32px;}

.filter-by-url-archive .gb-grid-column{ margin: 20px 0px;}
.filter-by-url-archive .gb-grid-column:nth-child(3n) .gb-container{border-right: 0px solid black;}
.filter-by-url-archive .gb-grid-column:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 100%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
}

/**** News-List **************************/
ul.news-liste {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.news-liste li {
  width: 50%; /* Zwei Spalten */
  box-sizing: border-box;
  padding: 5px 10px; /* Abstand innerhalb der Elemente */
}

/********** heft-Archiv ******************************/
/* Das <a>-Element wird über das <figure> gelegt */
.link-container {
  position: relative; /* Wichtig für die Positionierung des <a>-Tags */
}

/* Das <a>-Tag füllt das gesamte <div> aus */
.link-container a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  z-index: 1; /* Stellt sicher, dass der Link über dem Inhalt liegt */
}
.link-container a:hover { text-decoration: underline;}



/********* Single Post Template *****************/
h1.wp-block-post-title {
	font-size: 42px;   /* font-size: 46px; font-size: 60px;*/
	line-height: 50px;
	font-weight: 800;
	letter-spacing: -2%;
	margin: 10px 0px;
}
.wp-singular .inside-article img, .cover{	
	border: 1px solid black;
}
.inside-article img, .cover {
	border-radius: 10px;
//	border: 1px solid black;
}  
.inside-article .img-container a, .wp-block-post-featured-image a, .online-ausgabe-teaser .img-container a{
	border-radius: 10px;
	border: 1px solid black;
    display: block;
    max-height: 170px;
    overflow: hidden;
    line-height: 0px;
}
.online-ausgabe-teaser .img-container a{
    max-height: 200px;
}
figure .teaser-img{max-width: 745px;}
.dynamic-entry-content a {
	color:var(--global-color-8);
    text-decoration: underline;
}
/*  , .dynamic-entry-content strong:first-child */
.dynamic-entry-content subtitle {
	display: none;
}   
.dynamic-entry-content p {
	font-size: 20px;
	line-height: 34px;
/*	color: rgba(0, 0, 0, 0.75);   */
    color:var(--contrast-3);
}
.dynamic-entry-content h2.wp-block-heading {
	font-size: 26px;
	line-height: 40px;
	letter-spacing: -2%;
	font-weight: 700;
    margin-bottom: 10px;
}
.dynamic-entry-content figure {
	align-items: flex-start;
	display: flex;
	margin-bottom: 20px;
}
.dynamic-entry-content figure img {
	max-width: 600px !important;   /*max-width: 700px !important;*/
}
figcaption {
	color: rgba(127, 127, 127, 0.8);
    color: #3D3D3D;
	//#7F7F7F80;
	font-family: var(--gp-font--itc-franklin-gothic);
	font-size: 17px;
	font-weight: 600;
	line-height: 140%;
	margin: 0px 0px 0px 20px;
	border-top: 1px solid black;
	padding-top: 5px;
}
.wp-block-image figcaption {
	text-align: left !important;
    font-size: 16px !important;
}
pre{background-color: var(--base);}




/* Kategorie-Abschnitt */
.category-section {margin-top: -20px;}
.category-link{text-align: right; margin: -30px 0px 0px 0px;}
.category-link a{
  background-color: var(--base-3);
  color: var(--contrast);
  fill: var(--base);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--contrast);
  display: inline-block;
  
}
.category-section h2{
    font-size: 36px;
  line-height: 150%;
  font-weight: 400;
  margin-top: 50px;
}

h3.h3-front{
    display: flex;
  align-items: flex-start;
  column-gap: 0.5em;
  font-size: 24px;  /* font-size: 32px; font-size: 34px;*/
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 5px;
}

h3.h3-front .gb-icon {margin-top: 4px;} /*  line-height: 0;*/
h3.h3-front .gb-icon svg {width: 1em;
  height: 1em;
  fill: currentColor;}

/* Kategorie-Überschrift 
.category-section h2 {
    margin-top: 0;
}                 */

/* Post-Vorschau */
.post-preview {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

/* Button-Styling */
.button {
    display: block;
    margin: 20px auto;
    padding: 12px 24px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.button:hover {
    background: #45a049;
}

.button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* Ladeanimation */
.loading-message {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
    display: none;
}

.post-preview {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.post-thumbnail-wrapper {
    flex: 0 0 28%;
    padding-right: 32px;
}  
.post-preview:first-of-type .post-thumbnail-wrapper{
    flex: 0 0 40% !important;
}
  
.post-preview:first-of-type .post-thumbnail-wrapper a{
    max-height: 300px;
} /*
.post-preview .post-thumbnail-wrapper a{
    max-height: 170px;
    overflow: hidden;
    display: inline-block;
    border-radius: 10px;
	border: 1px solid black;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}
 */
.post-content {
    flex: 1;
}

.post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 8px;
}


/* Container für den Code-Block */
.code-block-container {
  position: relative;
  margin: 1.5em 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* Code-Block mit Scrollbar bei Bedarf */
.code-block-container pre {
  margin: 0;
  padding: 1.5em;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

/* Kopieren-Button */
.copy-button {
  position: absolute;
  top: 16px;
  right: 0.5em;
  padding: 0.5em 0.8em;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8em;
  transition: background-color 0.2s, border-color 0.2s;
  z-index: 10;
}

.copy-button:hover,
.copy-button:focus {
  background-color: #e0e0e0;
  border-color: #999;
  outline: none;
}

.copy-button:active {
  background-color: #d0d0d0;
}

/* SVG-Icon */
.button-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Button-Text (visuell ausgeblendet, aber für Screenreader zugänglich) */
pre .button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tooltip für den Button */
.copy-button::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-size: 0.7em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  margin-bottom: 0.5em;
}

.copy-button:hover::after,
.copy-button:focus::after {
  opacity: 1;
}




@media (max-width: 768px) {
  .main-navigation .menu-toggle, .sidebar-nav-mobile:not(#sticky-placeholder) {
    display: none;
  }
  .dropdown-menu ul {
    column-count: 2; /* Anzahl der Spalten */
    column-gap: 10px; /* Abstand zwischen den Spalten */
  }
  
#online-ausgaben{ left: -20px;/*  max-width: 960px; Breiter für 2 Spalten */}

}
     
@media (prefers-color-scheme: dark) {
    :root {
        --contrast: var(--dm-contrast);
        --contrast-2: var(--dm-contrast-2);
        --contrast-3: var(--dm-contrast-3);
        --base: var(--dm-base);
        --base-2: var(--dm-base-2);
        --base-3: var(--dm-base-3);
        --accent: var(--dm-accent);
        --global-color-8: var(--dm-global-color-8);
        --global-color-9: var(--dm-global-color-9);
    }
    figcaption {color: var(--dm-contrast-3);}
    .category-link a{color: var(--dm-contrast-3); border: 2px solid var(--dm-contrast-3);}
    h2 a:hover, h3 a:hover, .dachzeile a:hover{color: var(--accent);}
    .online-ausgabe-teaser h3 a:hover{color: var(--dm-contrast-3);}
}