/*
Theme Name: Sprachen Kacheln
Description: Zusatz-Theme (Child-Theme) für GeneratePress. Dunkler Hintergrund, bunte Kacheln, Seitenmenü – nach dem Vorbild der alten Seite sprachen.info.
Template: generatepress
Version: 1.0.1
Text Domain: sprachen-kacheln
*/

/* --- Schrift (liegt im Theme, keine Verbindung zu Google) --- */
@font-face{font-family:"Open Sans";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/open-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/open-sans-latin-600-normal.woff2) format("woff2")}

:root{
	--si-bg:#222; --si-bg-dark:#1b1b1b; --si-text:#bbb; --si-white:#fff;
	--si-blue:#0275d7; --si-lblue:#14b9e8; --si-green:#6fae26; --si-yellow:#ffb800;
	--si-orange:#ed450c; --si-red:#e63131; --si-pink:#fb226f; --si-purple:#702583;
}

/* --- Grundfarben --- */
body, body.separate-containers, body.one-container{
	background:var(--si-bg) !important; color:var(--si-text);
	font-family:"Open Sans",Arial,sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
body .site-header, body .inside-article, body .sidebar .widget, body .comments-area,
body .page-header, body .one-container .container, body .site-main > *{background:transparent !important}
body .site-content, body .entry-content{color:var(--si-text)}
h1,h2,h3,h4,h5,h6, body .entry-title{font-family:"Open Sans",Arial,sans-serif; font-weight:400; color:var(--si-white)}
h1, body .entry-title{font-size:40px; line-height:1.15}
h2{font-size:30px} h3{font-size:22px}
a{color:#898989; text-decoration:none} a:hover{color:var(--si-white)}
.entry-content p a{color:var(--si-lblue)}

/* --- Obere Leiste (Suche + Telefon) --- */
.si-topbar{background:var(--si-bg-dark); box-shadow:0 2px 6px rgba(0,0,0,.35)}
.si-topbar-inner{max-width:1200px; margin:0 auto; padding:14px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.si-topbar form{flex:1; max-width:360px; margin:0 auto}
.si-topbar input[type=search]{width:100%; background:transparent; border:1px dashed #666; color:var(--si-white); padding:8px 14px; font-size:15px; border-radius:2px}
.si-topbar input[type=search]::placeholder{color:#888}
.si-phone{color:var(--si-white); font-size:24px; font-weight:300; white-space:nowrap}
.si-phone:hover{color:var(--si-lblue)}
.si-phone::before{content:"\260E"; display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; margin-right:10px; border-radius:50%; background:var(--si-lblue); font-size:18px; vertical-align:middle}

/* --- Kopf: Logo + Kachel-Menü --- */
body .inside-header{padding:40px 30px; align-items:center}
body .site-logo img, body .site-header .header-image{width:60px; height:60px; border-radius:3px}
body .main-title{font-size:40px; font-weight:400}
body .main-title a, body .main-title a:hover{color:var(--si-white)}
body .site-description{color:#888}
body .main-navigation, body .main-navigation ul ul{background:transparent}
body .main-navigation .main-nav > ul{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
body .main-navigation .main-nav > ul > li > a{
	display:flex; align-items:flex-end; width:120px; min-height:120px; padding:10px; line-height:1.25;
	font-size:17px; color:var(--si-white) !important; border-radius:3px; background:var(--si-orange); transition:filter .15s, transform .15s;
	white-space:normal; hyphens:auto;
}
body .main-navigation .main-nav > ul > li > a:hover{filter:brightness(1.15); transform:translateY(-2px)}
body .main-navigation .main-nav > ul > li:nth-child(5n+1) > a{background:var(--si-orange)}
body .main-navigation .main-nav > ul > li:nth-child(5n+2) > a{background:var(--si-purple)}
body .main-navigation .main-nav > ul > li:nth-child(5n+3) > a{background:var(--si-pink)}
body .main-navigation .main-nav > ul > li:nth-child(5n+4) > a{background:var(--si-lblue)}
body .main-navigation .main-nav > ul > li:nth-child(5n+5) > a{background:var(--si-red)}
body .main-navigation .main-nav ul ul{background:#333} body .main-navigation .main-nav ul ul a{color:var(--si-white)}
body .menu-toggle, body .menu-toggle:hover{color:var(--si-white); background:transparent}
@media(max-width:768px){
	body .main-navigation .main-nav > ul{justify-content:stretch}
	body .main-navigation .main-nav > ul > li{flex:1 1 45%}
	body .main-navigation .main-nav > ul > li > a{width:auto; min-height:64px}
	h1, body .entry-title{font-size:30px} body .main-title{font-size:30px}
}

/* --- Farbklassen (für Kacheln, Kursbalken, Knöpfe) --- */
.si-blue{background:var(--si-blue)} .si-lblue{background:var(--si-lblue)} .si-green{background:var(--si-green)}
.si-yellow{background:var(--si-yellow)} .si-orange{background:var(--si-orange)} .si-red{background:var(--si-red)}
.si-pink{background:var(--si-pink)} .si-purple{background:var(--si-purple)}

/* --- Kachel-Raster (versetzt wie im Original) --- */
.si-grid{column-count:4; column-gap:12px; margin:30px 0}
@media(max-width:1100px){.si-grid{column-count:3}}
@media(max-width:800px){.si-grid{column-count:2}}
@media(max-width:520px){.si-grid{column-count:1}}
.si-grid > .si-tile{break-inside:avoid; display:inline-block; width:100%; margin:0 0 12px}
.si-tile{padding:22px 20px 20px; border-radius:3px; color:var(--si-white); animation:si-up .6s ease both}
.si-tile h2,.si-tile h3{color:var(--si-white); font-size:21px; margin:0 0 12px}
.si-tile p{color:var(--si-white); font-size:15.5px; line-height:1.9; margin:0 0 10px}
.si-tile a{color:var(--si-white)}
.si-tile .si-more a{opacity:.75; font-size:15px} .si-tile .si-more a:hover{opacity:1}
.si-tile .si-more a::after{content:"\2197"; display:inline-block; width:28px; height:28px; line-height:25px; text-align:center; margin-left:8px; border:1.5px solid currentColor; border-radius:50%}
.si-tile select,.si-tile input{width:100%; margin-bottom:12px}
@keyframes si-up{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.si-tile{animation:none}}

/* --- Ortsseite: Seitenmenü links, Text rechts --- */
.si-sidemenu{list-style:none; margin:0 !important; padding:0}
.si-sidemenu li{margin:0}
.si-sidemenu a{display:block; text-align:right; padding:14px 26px 14px 10px; font-size:21px; font-weight:300; color:#ccc; border-radius:2px}
.si-sidemenu a::after{content:" \00BB"}
.si-sidemenu a:hover,.si-sidemenu .si-current a{background:var(--si-red); color:var(--si-white)}
@media(max-width:781px){.si-sidemenu a{text-align:left; font-size:18px; padding:10px 14px}}
.si-text p{color:var(--si-text); text-align:justify; font-size:16px; line-height:2}

/* --- Kursbalken (Kurse & Preise) --- */
.si-bar{padding:20px 24px; margin:0 0 12px; border-radius:2px; color:var(--si-white)}
.si-bar h3{color:var(--si-white); font-size:21px; margin:0}
.si-bar h3::before{content:"\203A"; display:inline-block; width:34px; height:34px; line-height:30px; text-align:center; margin-right:12px; border:1.5px solid #fff; border-radius:50%}
.si-bar p{color:var(--si-white); font-size:15px; margin:14px 0 0}

/* --- Knöpfe --- */
body .wp-block-button__link, body .button, body button:not(.menu-toggle), body input[type=submit]{
	background:#2a9fd6; color:var(--si-white); border-radius:2px; font-size:17px; padding:12px 22px; border:0}
body .wp-block-button__link:hover, body .button:hover, body input[type=submit]:hover{background:var(--si-lblue); color:var(--si-white)}
.si-btn-white .wp-block-button__link{background:#fff; color:#222}

/* --- Formulare --- */
body input[type=text], body input[type=email], body input[type=search], body textarea, body select{
	background:#fff; color:#222; border:1px solid #444; border-radius:2px}

/* --- Fußbereich --- */
body .site-footer, body .footer-widgets, body .site-info{background:var(--si-bg-dark) !important; color:#888}
body .site-info a, body .footer-widgets a{color:#ccc} body .site-info a:hover, body .footer-widgets a:hover{color:var(--si-white)}
body .footer-widgets .widget-title{color:var(--si-white); font-size:18px}


/* --- Korrekturen nach dem ersten Test (v1.0.1) --- */
.si-grid > .wp-block-group__inner-container,
.si-tile > .wp-block-group__inner-container,
.si-bar > .wp-block-group__inner-container{padding:0 !important; max-width:none !important; margin:0 !important}
.si-grid .si-tile{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; display:inline-block; width:100%; margin:0 0 12px; vertical-align:top}
.entry-content .si-tile a, .entry-content .si-bar a{color:var(--si-white)}
.entry-content .si-sidemenu a{color:#ccc} .entry-content .si-sidemenu a:hover, .entry-content .si-sidemenu .si-current a{color:var(--si-white)}
#right-sidebar, #left-sidebar{display:none}
body .site-content .content-area{width:100% !important}
body .main-navigation .menu-toggle{color:#fff !important; background:var(--si-orange) !important; border-radius:3px; padding:0 18px}
body .main-navigation.toggled .main-nav > ul{display:flex}
body .entry-header{margin-bottom:10px}
body .site-main .wp-block-group__inner-container{padding:0}