/*
Theme Name:  Twenty Twenty Five Kid
Theme URI:   https://friedrichalthausen.vollkorn.nilspollom.com/twentytwentyfive-kid
Description: Theme for Vollkorn
Author:      Nils Pollom
Template:    twentytwentyfive
Version:     1.0.5
 */

/* ALLL THIS BELOW HERE SHALL GO TO THE CHIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIILD THEME ONE DAY SOON ... yeay ... it did before the update came and blew it all away x) */
/* Super, ging ja schneller als gedacht x) Hat kaum 4-5 Monate gebraucht, der *one day* */
/* links ohne rechteck, was bleibt */
a:focus {
    outline: none;
}


/* Links nicht unterstreichen (überschreibung vom parent theme mittels mehr spezifität (!) [line:16]) */
a {
	text-decoration: none !important;
	}

/* Verhindert Zeilenumbruch in ausgewählten Überschriften  */
/*2025_07_01*/
.no-wrap {
  white-space: nowrap;
  overflow: show;        /* no clipping looks better, just smaller the font 4 mobile */
  text-overflow: ellipsis;
}

/*free and healthy mobile kleinersetzen mittels css klasse die if= screen < 699px then = font height = 1,4rem setzt */
@media screen and (max-width: 599px) {
  .freeandhealthy {
    white-space: wrap !important;
	overflow: clip !important;
	border-bottom: 0px !important;
	border-top: 0px !important;
  }
}

@media screen and (min-width: 1081px) {
	.freeandhealthy {
		border-bottom: 3px solid black;
		border-top: 3px solid black;
	}

}

/*NEW LINKSTYLES 2025_06_30 */

/* ============== 1) Primär-Link ================= */
.link-primary,
.link-primary:visited {
    color: #E4DFCD;         /* Grundfarbe */
    text-decoration: none;        /* Kein Unterstrich */
    transition: color .25s ease;  /* Weicher Farbübergang */
}

.link-primary:hover,
.link-primary:focus-visible {      /* Tastaturfokus nicht vergessen */
    color: #FFFFFF;          /* Hover-/Fokus-Farbe */
    outline: none;			/* WEG mit dem highlight SHICE */
    outline-offset: 2px;
}

/* ============== 2) Sekundär-Link =============== */
.link-secondary,
.link-secondary:visited {
    color: #B39F80 !important;
    text-decoration: none;			/* WEG mit dem konturlinien SHICE */
    transition: color .25s ease;
}

.link-secondary:hover,
.link-secondary:focus-visible {
    color: #111111 !important;
    outline: none;			/* WEG mit dem konturlinien SHICE */
    outline-offset: 2px;
}

/* ============== 3) Akzent-Link ================= */
.link-accent,
.link-accent:visited {
    color: #7D0B0C !important;
    text-decoration: none;			/* WEG mit dem konturlinien SHICE */
    transition: color .25s ease;
}

.link-accent:hover,
.link-accent:focus-visible {
    color: #111111 !important;
    outline: none;			/* WEG mit dem konturlinien SHICE */
    outline-offset: 2px;
}


/* ============== 4) Akzent-Link ================= */
.link-accent2,
.link-accent2:visited {
    color: #7E7F81 !important;
    text-decoration: none;			/* WEG mit dem konturlinien SHICE */
    transition: color .25s ease;
}

.link-accent2:hover,
.link-accent2:focus-visible {
    color: #111111 !important;
    outline: none;			/* WEG mit dem konturlinien SHICE */
    outline-offset: 2px;
}

/* Link Hover > Red */
.hover-link-red a:hover {
    color: #7d0b0c !important;
    border-bottom: none !important;
}


/* HAMBURGER MENÜ COLORCHANGE */
/*geschlossenes HAMBURGERMENÜ mit dunkelbeechem Hamburgerzeichen und sonst nur hellbeechem Hintergrund*/
@media (max-width:599px){
    .wp-block-navigation__responsive-container-open{
        background-color:#e4dfcd !important; /*hellbeecher Background im Block des Hamburgerzeichens*/
		color: #b39f80 !important; /*dunkel beeches hamburgersymbol */

    }
}

/* -.- das Menüüüüü */

@media (max-width: 599px) {
    /* Äußerer Header‑Wrapper */
    .wp-block-group.alignfull.has-custom-beech-dunkel-background-color {
        background-color: #e4dfcd !important;   /* HELLLES BEECH um den Block des Zeichens drum herum -.- */
            }
}

/* geöffnetes HAMBURGERMENÜ mainbody */
@media (max-width: 599px){
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		background-color:#e4dfcd !important; /*helle Farbe für den Background*/
		color: #b39f80 !important; /*dunkel beeche Schrift */
	}
}
/* geöffnetes HAMBURGERMENÜ mainbody margins */
@media (max-width: 599px){
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background-color:#e4dfcd !important; /*helle Farbe für den Background*/
	}
}

/* den Seperator beseitigen am untere Ende des Headers */

.wp-block-separator.has-alpha-channel-opacity {      /*nicht als inheritor, junge! Check your damn typingK!*/
    border: none !important;
    box-shadow: none !important;  /* falls es ein Schatten war */
}

/* das "X" zum Schließen des Menüs wieder sichtbar machen, was beim globalen restyle der Headerschriftfarbe auch hellbeech gestyled wurde .... */
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
		color: #b39f80;
}

/* Die TOGGLEBOX mit SHOWBUTTON */

.showbutton {
  display: inline-block;
  background-color: rgb(179, 159, 128);
  color: #e4dfcd;
  padding: 5px 15px 3px 15px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.showbutton:hover {
  color: white;
}

.togglebox {
  background-color: #e4dfcd;
  padding: 0px 20px 0px 20px;
  margin-top: 15px;
  border-left: 5px solid #b39f80;
	border-right: 5px solid #b39f80;
  border-radius: 5px;
}

/* Die unterschiedlichen BOX Typen von Friedrich übernehmen: Angefangen mit der "cyrillbox" */
.cyrillbox {
    background-color: rgb(238, 238, 238);
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 0px 0;
    font-size: 200%;
    line-height: 1.2;
    font-weight: 600;
    width: 100%;
	box-sizing: border-box;
    position: relative;
}

/* Die definition für mobilgeräte, damit die boxen nicht zu groß werden:*/
@media screen and (max-width: 599px) {
  .cyrillbox {
    font-size: 100%;
  }
}

/* Definitionen für die Show Klasse und red Klasse auch für Screens <599 */

.smallcaps {
	font-variant-caps:small-caps;
	font-feature-settings: smcp;
}

.red {
  color: rgb(125, 11, 12);
}
.show {
    font-size: 1.0em;
    font-weight: 600;
    line-height: 15%;
    padding: 10px 0 0 20px;
}

@media screen and (max-width:599px) {
	.show {
		font-size: 1.2em;
	}
}

/*Die Localization braucht eine andere Zeilenhöhen, damit die Tables passen */
.show2 {
    font-size: 1.0em;
    font-weight: 600;
    line-height: 100%;
    padding: 10px 0 0 20px;
}
/* Die Discreten Ligaturen brauchen auch eine besondere Zeilenhöhe. Und eigentlich auch einen "margin-block-start: 0em" anstatt "1.0em" ... aber ditte jeht nüsch hier ...*/
.show3 {
	font-size: 1.0em;
	font-weight: 600;
	line-height: 130%;
	padding: 0 0 0 20px;
	}

@media screen and (max-width:599px) {
	.show2 {
		font-size: 1.2em;
	}
}

.showsmall {
	font-size: 1.0em;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: 0,3px;
}

.captiongreen {
	font-style: italic;
	font-size: 0.5em;
	padding-right:20px;
	font-weight:600;
	text-align: right;
	color: green;
}

/* LOCALIZATION */

.PLK {
  font-family: 'Vollkorn', serif;
  font-feature-settings: "ss02";
  font-variant: normal;
}
.NLD {
	font-family: 'Vollkorn', serif;
	font-feature-settings: "ss03";
	font-variant: normal;
}
.BGR {
	font-family: 'Vollkorn', serif;
	font-feature-settings: "ss04";
	font-variant: normal;
}
.SRB {
	font-family: 'Vollkorn', serif;
	font-feature-settings: "ss05";
	font-variant: normal;
}

.mgrk {
	font-family: 'Vollkorn', serif;
	font-feature-settings: "mgrk";
	font-variant: normal;
}

.hist {
    font-feature-settings: "hist";
}

.ss01 {
    font-feature-settings: "ss01";
}

/* Hier die CSS Klasse des "new" Banners, was am Rand der Beispielboxen wie Cyrillbox klebt */
.new {
    font-weight: 700;
    font-style: normal;
    background-color: rgb(125, 11, 12);
    font-variant: small-caps;
    font-size: 18pt;
    letter-spacing: 1px;
    position: absolute;
    display: block;
    color: white;
    left: -10px;
    top: -30px;
    height: 11px;
    width: 55px;
    padding: 17px;
    border-radius: 20px;
    line-height: 30%;
}

/*TEST HIER DRUNTER DER SCROLLBOX */

#languagescrolllist {
    width: 100%;
    height: 180px;
    padding: 20px 35px 40px 40px;
    overflow-y: scroll;
    margin: 5px auto 15px auto;
    text-align: left;
    font-size: 1em;
    box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -webkit-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -moz-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#charsetbox {
    width: 100%;
    height: 250px;
    padding: 0;
    overflow-y: scroll;
    margin: 5px auto 15px auto;
    text-align: left;
    font-size: 1em;
    box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -webkit-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -moz-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.charmapimg {
    width: 100%;
    border: none;
}

/* Das Charset icons mit der zusätzlichen Fontdatei Vkik in WP angelegt */
.icons {
    font-family: 'Vkik';
    background-color: rgb(125, 11, 12);
    border-radius: 25px;
    text-decoration: none;
    border: none;
    outline: none;
    font-size: 6.5em;
    display: block;
    text-align: center;
    color: rgb(228, 223, 205);
    height: 120px;
    width: 120px;
    line-height: 120px;
    float: left;
    font-weight: 400;
}

/*kleinere Vollkorn-Icons für mobile, größerer paypal button */

@media screen and (max-width:599px) {
	.icons {
	font-size: 4.5em;
		}
}



.wp-block-heading-fat {
	font-family: 'Vollkorn';
	font-weight: 600;
	font-size: 1.8em;
}

.paypal {
	margin: 5px auto 0 auto;
	max-width: 65%;
}

@media screen and (max-width:599px) {
	.paypal {
		margin: 5px auto 0 auto;
		max-width: 90%;
	}
}

.wp-block-heading-fat2 {
	font-family: 'Vollkorn';
	font-weight: 600;
	font-size: 1.8em;
}

@media screen and (max-width:599px) {
	.nebenIcon {
		line-height: 1.4em !important;
		vertical-align:none !important;
	}

}

.nebenIcon {
    vertical-align: middle;
    padding: 0 0 0 30px;
    font-size: 1em;
    font-weight: 600;
    line-height: 0.1em;
}

.faqtitle {
	font-size:1.8em;
	line-height:1.4em !important;
}

.showfaq {
    padding: 7px 15px;
    background-color: rgb(179, 159, 128);
    color: rgb(228, 223, 205);
    display: block;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    outline: none;
    line-height: 25px;
    margin: 10px 0px;
}

.speciallink a {
    text-decoration: none;
    border-bottom: 1px dotted rgb(125, 11, 12);
}

#inusebox {
    text-align: center;
    height: 580px;
    overflow-y: scroll;
    padding: 10px;
    box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -webkit-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
    -moz-box-shadow: 0px -40px 30px -40px rgb(179, 159, 128) inset;
}

#inusebox span {
    font-size: 0.5em;
    position: absolute;
    left: 0px;
    width: 95%;
    bottom: 0;
    text-align: left;
    vertical-align: bottom;
    padding: 10px;
    font-weight: 400;
    color: black;
    background-color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width:599px){
	#inusebox span {
	font-size: 1em !important;
	}
}

#inusebox a {
    display: inline-block;
    position: relative;
    height: 230px;
    width: 230px;
    border: 10px solid white;
    margin: 10px 7px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#inusebox a img {
    position: absolute;
    left: 0;
    height: 100%;
    top: 0%;
}



.kiste {
    width: 100%;
    max-width: 820px !important;
    margin: 0px auto 0px auto;
    padding: 0px 10px 0 10px;
    background-color: rgb(228, 223, 205);
    position: relative;
}

.chornfeld {
	width:auto;
	height:100%;
	position:relative;
	top:0;
	left:-5%;
}

.Yaotao {
	width:105%;
	height:auto;
	top:-5%;
	left:0;
}

.Tress {
	width:100%;
	height:auto;
	top:-20%;
	left:0;
}

.zumjaeger {
	width:105%;
	height:auto;
	top:-5%;
	left:0;
}

.glander {
	height:170%;
	top:-25%;
	left:-93%;

}

.redem {
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(125, 11, 12);
}


/* Hiernach kommen die Footer Klassen */

.seitenfuss {
    text-align: center;
    margin: 0px auto;
    font-size: 0.85em;
    color: rgb(126, 127, 129);
    padding: 40px 0 40px 0;
}

.downloadcaption {
    font-size: 1em;
    color: rgb(126, 127, 129);
    font-weight: 400;
}