/*
Theme Name: Knabbi-Rowling Child
Description: Rowling Child-Theme
Author: Rüdiger Reichelt, Subreality.de
Author URI: https://www.subreality.de
Template: rowling
Version: 1.0
Text Domain: rowling-child
*/

/* Local Fonts */
/* *********** */

@font-face {
	font-family:'Chewy';
	src:url("assets/fonts/Chewy/Chewy-Regular.ttf") format('truetype');
	font-weight:normal;
	font-style:normal;
	}

/* Global */
/* ****** */

:root 	{
	--knabbi-schrift:'Open Sans', sans-serif;
	--knabbi-heading:'Chewy', 'Open Sans', sans-serif;
	--knabbi-orange:#f19228;
	--knabbi-blau:#00afe6;
	}


/* Reset */	
/* ***** */

body,
h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td,
.blog-description,
.post-title,
.post-content p.page-links,
.post-content,
.post-content h3,
.post-content blockquote:after,
.post-content blockquote cite,
.post-content .wp-caption-text,
.post-content .gallery-caption,
.post-content fieldset legend,
.post-content label,
.post-content input,
.post-content textarea {
	font-family:var(--knabbi-schrift) !important;
	}

button, .button, .faux-button, :root .wp-block-button__link, :root .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"] {
	font-size:0.85rem;
	font-weight:normal;
	text-transform:none;
	letter-spacing:normal;
	text-shadow:none;
	}


/* Header */
/* ****** */

.header {
	padding:0 0;
	}
	
.header-wrapper {
  	background:#fff;
	}	
	

/* Navigation */
/* ********** */

.navigation {
	background:linear-gradient(to right, #f19228 39%, rgba(241, 146, 40, 0.65) 65%, #f19228 90%) !important;
	}
	
.navigation .section-inner {
	background:none !important;
	display:flex;
	justify-content:flex-end;
	}
	
.primary-menu > li > a,
.primary-menu ul a {
	font-weight:normal;
	text-transform:none;
	letter-spacing:normal;
	text-shadow:none;
	}
	
.primary-menu > li > a {
	padding:20px 10px;
	color:#FFF;
	font-size:16px;
	}
	
.primary-menu > li {
	border-right:none;
	border-left:none;
	}
	
.primary-menu > li:last-child::after {
	border-right:none;
	}	
	

/* Struktur */
/* ******** */

body 	{
	background-color:#fff;
	}
	
.sidebar,
.wrapper::before {
	width:0px;
	display:none;
	}
	
#site-content .section-inner,
.content {
	background-color:#fff;
	max-width:100%;
	font-family:var(--knabbi-schrift);
	}
	
.content {
	width:100%;
	padding:40px 20px;
	}
	
.single-post .post-inner {
	padding-left:0;
	}	
	

/* Content basics */
/* ************** */

.post-title,
.headline,
h1,
h2	{
	font-family:var(--knabbi-heading) !important;
	font-size:80px !important;
	line-height:80px !important;
	}
	
.post-title,
h1,
h2	{
	text-align:center;
	color:var(--knabbi-orange);
	}
	
h3	{
	text-align:center;
	font-size:38px;
	color:#a2a2a2;
	font-weight:normal !important;
	}
	
.post-content p {
	font-size:20px;
	color:#292828;
	}
	
.subline {
	font-size:16px;
	line-height:1.2em;
	margin-bottom:10px;
	color:var(--knabbi-orange);
	font-weight:700;
	}
	
.knabbi-button {
	padding:10px 20px;
	font-size:24px;
	line-height:18px;
	color:#fff;
	border:2px solid var(--knabbi-orange);
	background:var(--knabbi-orange);
	border-radius:25px;
	text-decoration:none;
	}
	
.knabbi-button:hover {
	color:var(--knabbi-orange);
	background:#fff;
	}

/* Startseite */
/* ********** */

.knabbi-logo {
	transform:translateY(-70px);
	float:left;
	}

.knabbi-logo img {
	width:375px;
	height:auto;
	}

.knabbi-menue {
	display:flex;
	justify-content:flex-end;
	}

.knabbi-menue a {
	cursor:pointer;
	font-family:'Chewy', sans-serif;
	font-weight:normal;
	font-size:18px;
	text-transform:uppercase;
	text-decoration:none;
	display:inline-block;
	padding:10px 20px;
	border-radius:30px;
	background:var(--knabbi-blau);
	color:#fff;
	margin-left:15px;
	}
	
.knabbi-menue a:hover {
	background:var(--knabbi-orange);
	}
	
.startseite p {
	font-size:24px;
	text-rendering:optimizeLegibility;
	}
	
.startseite-content {
	padding-bottom:50px;
	}

.video-wrapper {
	position:relative;
	width:100%;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	}

.video-wrapper iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	}	


/* Footer */
/* ****** */

.credits .footer-social {
	display:block;
	background-color:var(--knabbi-orange);
	padding:40px;
	text-align:center;
	color:#fff;
	}
	
.social-icons {
	margin-top:30px;
	}

.social-icons a {
	margin:0px 10px;
	display:inline-block;
	width:75px;
	height:75px;
	line-height:85px;
	border-radius:50%;
	color:white;
	text-align:center;
	text-decoration:none;
	}
	
.social-icons i {
	font-size:30px;
	}

.social-facebook {
	background-color:#3a589d;
	}

.social-instagram {
	background-color:#3b6994;
	}

/* TikTok mit Farbverlauf */
.social-tiktok {
  background: linear-gradient(135deg, #000000 0%, #69C9D0 50%, #EE1D52 100%);
  color: #ffffff; /* Icon weiß, damit es sich gut abhebt */
}

/* Optional: Hover-Effekt (Farben wechseln) */
.social-tiktok:hover {
  background: linear-gradient(135deg, #000000 0%, #EE1D52 50%, #69C9D0 100%);
  color: #ffffff;
}

/* Damit der Border nicht die Größe verändert */
.social-icons a { 
  box-sizing: border-box; 
}

/* TikTok: schwarzer Kreis mit Farbverlaufs-Ring */
.social-icons a.social-tiktok {
  color: #fff;
  border: 3px solid transparent; /* Breite des Rings */
  background:
    linear-gradient(#000, #000) padding-box,              /* Innen: schwarz */
    linear-gradient(135deg, #69C9D0, #EE1D52) border-box; /* Außen: Ring in TikTok-Farben */
}

/* Optional: Hover – Ringfarben tauschen/„glühen“ */
.social-icons a.social-tiktok:hover {
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, #EE1D52, #69C9D0) border-box;
  filter: brightness(1.1);
}



	
.credits {
	background-color:#e5ecf3;
	}
	
.footer-box {
	color:#a2a2a2;
	display:inline-block;
	margin:0px 15px 25px 15px;
	width:250px;
	float:left;
	}
	
.footer-box a {
	color:#a2a2a2;
	text-decoration:none;
	}
	
.footer-box a:hover {
	color:var(--knabbi-orange);
	}
	
.footer-box img {
	width:120px;
	height:auto;
	}
	

/* Lightbox */
/* ******** */

.fancybox-title-over #fancybox-title { 
	display:none !important;
	}

/* Responsive */
/* ********** */

@media (max-width:1100px) {

	.knabbi-logo {
		transform:translateY(-20px);
		float:none;
		}

	.knabbi-logo img {
		width:375px;
		height:auto;
		}

	.knabbi-menue {
		display:block;
		margin:30px 0px;
		}
		
	.knabbi-menue a {
		margin-left:0;
		margin-right:20px;
		}
	}

@media (max-width:950px) {
	
	.post-title,
	.headline,
	h1,
	h2	{
		font-size:50px !important;
		line-height:50px !important;
		}

	.post-content p {
		line-height: 1.5;
		}
	}

@media (max-width:850px) {

	.content {
		padding-top:0px;
		}
	
	.header {
		border:0;
		background:linear-gradient(to right, #f19228 39%, rgba(241, 146, 40, 0.65) 65%, #f19228 90%) !important;
		height:50px;
		}

	.nav-toggle {
		margin-top:0;
		}

	.alignleft, .alignright {
		max-width: 100%;
		float: none;
		margin-right: auto;
		margin-left: auto;
		}

	.knabbi-menue a {
		margin-bottom:15px;
		}
	}
	
@media (max-width:600px) {

	h3	{
		font-size:24px;
		}

	.knabbi-menue a {
		margin-right:10px;
		}
		
	}
	
@media (max-width:550px) {

	.post-content p
	.knabbi-button,
	.startseite p {
		font-size:16px;
		}

	}