@charset 'utf-8';
@import 'bootstrap.min.css';
@import 'bootstrap-grid.min.css';
@import 'modal.css';

:root
{	--darkBlue:#00386b;
	--mediumBlue:#016acc; /* steelblue; #016acc, cornflowerblue, royalblue, dodgerblue, #0b78da, #5985d3 */
	--lightBlue:lightsteelblue;
	--darkGray:#888; /* für Schatten, etc. */
	--mediumGray:#bbb;
	--lightGray:#ddd;
	--extraLightGray:#f6f6f6;
	--darkWhite:whitesmoke; /* #ededed,whitesmoke, seashell, oldlace */
	--mediumGreen:#9c0;
	--tabHover:wheat;
	--lightWhite:#fff;
	--fsMedium:12pt;
}

/*
 *	Hauptelemente setzen
 */

body
{	font-family:"Source Sans Pro","PT Sans","Open Sans","Segoe UI",Roboto,Arial,sans-serif;
	font-size:13pt;
	line-height:1.5;
	font-display:swap;
	hyphens:auto;
}

header /* der wird doch gar nicht benutzt??? */
{	background-color:var(--darkBlue);
	border-bottom:3px solid var(--mediumBlue);
	overflow:hidden; /* ob das eine gute Idee ist? */
}
@media print { #menu { display:none!important; } } /* Hauptmenüzeile beim Drucken ausblenden */

footer
{	background-color:var(--lightGray);
	border-top:2px solid var(--mediumGray);
	padding-top:15px;
	padding-bottom:15px;
	font-size:11pt;
}

main
{	margin-bottom:20px;
	padding:0px !important; /* überschreibt Bootstrap */
}

.text-justify
{	text-align:justify!important;
}

/*
 *	allgemeine Textelemente
 */

h1,h2,h3,h4,h5,h6
{	color:var(--darkBlue);
}
h1
{	margin-bottom:30px;
	font-size:32pt;
}
h2
{	font-size:24pt;
}
h3
{	margin:0px 0px 20px 0px;
	font-size:18pt;
}
h4
{	margin:0px 0px 20px 0px;
	font-size:16pt;
}
h5
{	margin:0px 0px 20px 0px;
}
a,a:active,a:visited,a:hover,a:active
{	text-decoration:none !important; /* überschreibt Bootstrap */
}

ul ol, ol ol, ol ul, ul ul
{
  margin-bottom:1rem !important; /* überscheibt Bootstrap */
}

/* Logo im Header */

div.schullogo
{	min-height:100px;
	background:url(/images/core/WG-SKP_Logo_white.png) center center no-repeat;
	background-size:60%;
	cursor:pointer;
}

/* Spacer */

div.spacer-tiny
{	height:10px !important;
	clear:both;
}
div.spacer-small
{	height:10px !important;
	clear:both;
}
div.spacer-medium
{	height:20px !important;
	clear:both;
}
div.spacer-large
{	height:30px !important;
	clear:both;
}
div.spacer-xlarge
{	height:40px !important;
	clear:both;
}

/*
 *	Den Breadcrumb erzeugen und gestalten
 */

*.breadcrumb
{	background-color:transparent !important; /* überschreibt Bootstrap */
}
div.breadcrumb
{	border-bottom:1px solid var(--lightGray) !important;
	border-radius:0px !important;
	font-size:var(--fsMedium);
	margin-top:10px;
	color:var(--darkGray);
}
ul.breadcrumb
{	margin-bottom:0px;
	padding:0px;
}
ul.breadcrumb li
{	list-style-type:none;
	display:inline;
}
ul.breadcrumb li:after
{	content:"\2234"; /* 25B8 , 25C6 , 25BA , 2234 , 22b3 , 22ef , 2756 , 276d , 276f , 2771 , 279c , 27a4 */
	margin:0px 8px;
}
ul.breadcrumb li:first-child:after,ul.breadcrumb li:last-child:after
{	content:none;
	margin:0px !important;
}
ul.breadcrumb span.divider
{	display:none;
}

/*
 *	Beitragsbild (Artikel)
 */

img.article-fullImage
{	clear:both;
	width:100%;
	margin-bottom:15px;
	border-radius:5px;
}
img.article-fullImage-large
{	float:right;
	margin-bottom:10px;
	margin-top:5px;
	width:100%;
	border-radius:5px;
	box-shadow:1px 1px 5px 2px var(--mediumGray);
}
/* wenn ein ARtikel kein Bild haben soll, aber trotzdem die eingeschränkten Seiten, wird das Bild "placeholder.png" gesetzt -- dieses soll aber nicht angezeigt werden (aufgrund des box-shadows -- daber auch nur für ...-large relevant) */
img.article-fullImage-large[src$="placeholder.png"]
{	visibility:hidden !important;
}
img.article-fullImage-small
{	clear:both;
	width:100%;
	margin-bottom:15px;
	border-radius:5px;
}
img.blogItem-introImage
{	width:100%;
	border-radius:5px;
}
/*
 *
 *	Korrekturen aus vorgegebenen Style-Sheets 
 *
 */

/* Ergänzung: manche p sollten kein Margin haben */

div.last-p-no-margin p:last-child
{	margin-bottom:none!important;
}

/* mod_responsive_slideshow/tmpl/css/flexbox.css */

div.slider
{	z-index:1;
}
.flexslider .slides img
{	border-radius:0px !important;
}


/*
 *
 *	Joomla-Eigenes
 *
 */
 
/*	h2 wird nur dann mit Abstand nach unten gesetzt, wenn es sich wirklich um eine
	Überschrift auf der Artikelseite handelt */
h2.item-title
{	margin-bottom:20px;
}
h2.article-maintitle
{	margin-bottom:40px;
}
/* Abstand hinter einer Auflistung von Artikel */
div[itemprop=blogPost]
{	margin-bottom:25px;
	border-bottom:1pt solid var(--lightGray);
}
/* Vorschaubild in der Blog-Ansicht */
div.blog-item-image
{	max-width:220px;
		/*	die 15px margin von "blog-item-image img" sind hier addiert -- dies löst das Problem, wenn das
			div angezeigt wird, obgleich es kein Bild gibt (komischerweise -- was manchmal passiert)
		*/
}
div.blog-item-image img
{	max-width:200px;
	border-radius:5px;
	/* diese margins sind bei blog-item-image zumindest rechts ebenfalls enthalten */
	margin-right:20px;
	margin-bottom:20px;
}
div.blog-item-text
{	min-width:250px !important;
}

/* Readmore-Buttons */

a.readmore-button:link,a.readmore-button:visited
{	padding:8px 15px;
	background-color:transparent;
	border-radius:5px;
	transition:linear 0.65s;
}
a.readmore-button:hover,a.readmore-button:active
{	background-color:var(--lightGray);
	transition:linear 0.65s;
}

/* Formulare */

label
{	justify-content:flex-start !important; /* überschreibt Bootstrap */
}
input[type=text],input[type=password],input[type=search]
{	background-color:var(--darkWhite);
	border:none;
	padding:6px 10px;
	border-radius:3px;
}
*.maak-search-button
{	border:none !important;
	color:#800;
	background-color:var(--darkWhite);
	cursor:pointer;
}

/*
 *	Stile für den Newsflash auf der Startseite
 */

div.newsflash-title
{	padding:5px 0px;
	font-weight:bold;
}
div.newsflash-item-text
{	padding:0px 5px; /* vgl. newsflash-title */
	height:220px;	/* TODO: hier muss es noch eine bessere Option geben */
	overflow:hidden;
}
div.newsflash-item-text p /* korrigiert p's, die eventuelle Skripte nachladen und dafür am Artikelbeginn stehen */
{	margin:0px;
}
div.newsflash-item-image
{	max-width:100%;
	height:60px;
	border-radius:8px; /* auch beim newsflash-item-container */
	background-position:center center !important; /* überschreibt ... was auch immer ??? */
	background-repeat:no-repeat !important; /* überschreibt ... was auch immer ??? */
	background-size:cover !important; /* überschreibt ... was auch immer ??? */
}

/*
 *	Suchergebnis-Seite
 */

div.search-result p
{	padding-left:50px;
}

/*
 *	Frontend-Berbeitungsmodus (verwendet die component.php)
 */

div.container-popup,div.container-popup input,div.container-popup button
{	font-size:10pt !important;
}
fieldset ul.nav-tabs[id*="formTabs"] li
{	margin-right:15px;
}
div.ui-helper-hidden-accessible /* Achtung: Die schaltet fehlerhaft deklarierte Tooltips aus */
{	display:none;
}

/* Spezial: Logos im Footer , Update 2025: jetzt nur mehr auf der Startseite */
div.footer-logos
{	padding-right:25px;
	text-align:center;
}
div.footer-logos a img
{	display: inline-block;
	margin:25px;
	max-width:min(165px,25vw);
	max-height:85px;
}

/* Wrapper der eingebetteten Videos */

div.avPlayerWrapper
{	margin-top:20px;
	margin-bottom:20px;
}

/* Die Bildergalerien auf den Seiten anpassen */

ul.sigFreeContainer
{	text-align:center;
}
img.sigFreeImg
{	border-radius:5px;
}
ul.sigFreeClassic
{	/*
	border-top:3px solid #eee;
	border-bottom:3px solid #eee;
	*/
}
ul.sigFreeClassic + p { display:none!important; } /* Die Bildergalerie hinterlässt ein leeres <p> direkt nach der ul -- diese fügt einen Zusatzabstand ein, der hiermit entfernt wird */
ul.sigFreeClassic li.sigFreeThumb /* überschreibt die Standardeinstellungen */
{	display:inline-block !important;
	margin:15px 10px 0 5px;
	float:none !important; 
	background:transparent !important;
}
a.sigFreeLink  /* überschreibt die Standardeinstellung */
{	margin:6px !important;
	background-color:transparent !important;
}

/* die Lehrersuche auf der Sprechstundenseite */

div.lehrersuche
{	margin-bottom:15px;
	text-align:center;
}
div.lehrersuche div
{	border:1px solid var(--lightGray);
	padding:10px 8px;
	display:inline-block;
}
div.lehrersuche div input
{	margin-left:20px;
}

/* Sprechstundenliste */

/*
div.container-sprechstundenliste div img
{	width:100%;
	max-width:200px;
}
div.container-sprechstundenliste div h3
{	margin-top:0px;
	margin-bottom:20px;
	margin-left:0px;
	margin-right:0px;
	padding:0px;
}
div.container-sprechstundenliste div ul
{	border-right:20px solid transparent; # ersetzt das margin
	margin-bottom:0!important;
	padding-bottom:0!important;
	box-sizing:border-box;
}
 Listenüberschriften sollen direkt anschließen
i.listenueberschrift
{	margin-bottom:0;
	display:block;
	clear:both;
}
*/

/* Lehrerteam-Seite Spezialstile (NEU) */

div.teacher
	{	display:inline-block;
		font-size:var(--fsMedium);
		margin:20px;
		border:1px solid #ccc;
		padding:8px;
		text-align:center;
		width:175px;
		cursor:pointer !important;
		box-shadow:2px 3px 5px #ccc;
		transition:transform .5s ease-in-out;
		background-color:var(--darkWhite); 
	}
div.hideParagraphs p /* notwendig, damit die Lehrerbilder ohne float:left nebeneinander liegen */
	{	display:none !important;
	}
div.teacher:hover
	{	box-shadow:2px 3px 20px #888;
	}
div.teacher div.portrait
	{	clear:both;
		width:145px;
		height:200px;
		border-radius:5px;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
		display:inline-block;
		margin-bottom:8px;
	}
div.my-card
	{	background-color:#f5f5f5;
		padding:0px;
		display:none;
	}
div.picture-panel
	{	margin:0px;
		color:var(--darkBlue);
		min-height:500px !important;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
	}
div.information-panel
	{	padding:0px;
		color:#333;
	}
div.information-panel h5
	{	color:var(--darkBlue);
		padding-left:25px;
		padding-bottom:3px;
		display:inline-block;
		margin-top:15px;
		margin-bottom:10px;
		font-size:16pt;
	}
div.information-panel b
	{	border-bottom:1pt solid var(--darkBlue);
		color:var(--darkBlue);
		padding-left:25px;
		padding-right:10px;
		padding-bottom:3px;
		display:inline-block;
		margin-top:8px;
		margin-bottom:5px;
	}
div.picture-panel img
	{	width:60%;
		max-height:50%;
		margin-top:40px;
		margin-bottom:40px;
		border:none !important;
	}

/* Download-Items (ganze Webseite) */
/* Warnungs-Items (gleiche Klassen, aber mit warnung- statt download- ... und anderen Farben) */

div.download-item-wrapper,
div.warnung-item-wrapper
	{	height:100%;
		padding:8px;
	}
a.download-item,
div.warnung-item
	{	display:block;
		padding:0px;
		border:1px solid var(--darkWhite);
		transition:all 0.35s;
	}
a.download-item:hover
	{	background-color:var(--darkWhite);
		text-decoration:none;
		border:1px solid var(--mediumBlue);
		transition:all 0.35s;
	}
a.download-item *.download-text span.downloaditem-title
	{	font-weight:bold;
		color:var(--mediumBlue);
	}
*.download-text
	{	padding:8px 12px;
		color:#000 !important;
	}
a.download-item *.download-symbol,
*.warnung-symbol
	{	text-align:center;
		vertical-align:top;
		background-color:var(--darkWhite);
		padding-top:10px;
		padding-bottom:10px;
		font-size:24px;
		width:42px;
		color:var(--mediumBlue);
	}
/* Anpassung der Farben für die Warnungs-Items */
*.warnung-symbol
	{	background-color:#f55;
		font-size:20px;
		color:white;
	}

/* Tabs auf der Seite */
/* TODO: LÖSCHEN WENN NICHT MEHR BENÖTIGT -- gehören zum Accordion-Plant */

div.tab-content
	{	padding:0px !important; /* überschreibt irgendeine Voreinstellung */
	}
div.maak-tab
	{	border:1px solid var(--tabHover);
		border-left:none;
		padding:10px !important;
	}
div.maak-tab-container ul.nav
	{	padding-top:3px !important; /* 18 bei dickem Rahmen */
		padding-bottom:10px !important;
	}
div.maak-tab-container ul.nav li
	{	background-color:var(--darkWhite); /* #becee4; #f5f5f5; */
		margin-bottom:12px;
		transition:all 0.15s;
	}
div.maak-tab-container ul.nav li:hover
	{	background-color:var(--tabHover);
		transition:all 0.15s;
	}
a.maak-nav-link
	{	border-radius:0px !important;
		color:navy !important;
		transition:all 0.3s;
	}
div.maak-tab-container ul.nav li.active, a.maak-nav-link.active
	{	background-color:var(--tabHover) !important;
		color:navy !important;
		box-shadow:1px 1px 3px 4px var(--tabHover);
		transition:all 0.3s;
	}
@media screen and (max-width: 992px) /* breakpoint von -lg- laut Bootstrap: 992px */
{	/* unter -lg- ändern sich die Rahmen bei den tab-contents */
	div.maak-tab-container
	{	border-top:2px solid var(--tabHover);
		padding-top:10px;
	}
	div.maak-tab
	{	border:none;
		border-bottom:2px solid var(--tabHover);
	}
}

/* Spezialitäten auf der Bibliotheks-Seite */

table.oeffnungszeiten td
{	padding:6px;
	border-bottom:1px dashed #dedede;
	vertical-align:top;
	text-align:center;
	font-weight:bold;
	color:#080;
}
table.oeffnungszeiten tr td:first-child
{	color:#000;
	font-weight:normal;
}
table.oeffnungszeiten tr th
{	padding:6px;
	border-bottom:2px solid var(--lightGray);
}
table.oeffnungszeiten tr:last-child td,
table.schuebis tr:last-child td
{	border-bottom:none;
}
table.schuebis
{	width:300px;
}
table.schuebis td
{	padding:6px;
	border-bottom:1px dashed var(--lightGray);
	vertical-align:top;
}

/*
 *	Startseite: Die Kalender-Icons
 */
/*
div.calenderIcon
	{	border-radius:8px;
		min-height:125px;
		padding:8px 5px 8px 20px;
		border-left:20px solid transparent;
		margin-bottom:30px;
		border-right:1px solid var(--lightGray);
		border-bottom:1px solid var(--lightGray);
	}
div.calenderIcon b
	{	display:block;
		color:var(--darkBlue);
		margin-bottom:5px;
		margin-left:-15px;
		margin-right:20px;
	}
div.calenderIcon i
	{	display:block;
		color:var(--mediumBlue);
	}
div.calenderIcon i.icon
	{	position:absolute;
		top:0;
		right:0;
		transform:translate(12%,-40%) rotate(20deg);
		font-size:36pt;
		color:var(--lightGray);
		background-color:#fff; /* bei halbem Rahmen zur besseren Harmonie */
	}
*/

/*
 *	Pagination: Überschreiben der Standard-Liste
 */

*.pagenav
	{	display:inline-block;
		list-style-type:none;
		padding:0px 8px;
	}


/* Terminkalender-Spezialitäten */
/* TODO: Löschen wenn nicht mehr benötigt */

table.maakKalender td
{	padding:10px 15px;
	border-top:1px dashed var(--lightGray);
	vertical-align:top;
}
table.maakKalender tr:nth-child(1) td /* die erste Tabellenzeile soll keinen Rahmen haben */
{	border:none !important;
}
div.maakKalender
{	border-bottom:1px dashed var(--lightGray);
}
div.maakKalender div.row
{	border-top:1px dashed var(--lightGray);
}
div.maakKalenderzeile div
{	padding:10px 15px;
}
@media screen and (max-width: 768px) /* 576 / 768 / 992 / 1200 */
{	div.maakKalenderzeile div
	{	padding:3px;
	}
}
div.noTopBorder
{	border-top:none !important;
}



/*
 *	Hauptmenü
 */

:root
	{	--aktiverMenuLink: sandybrown;
		--darkBlue: #00386b;
		--mediumBlue: steelblue;
		--aktiverSubmenuLink: yellow;
	}
div.mainmenu
{	position:sticky;
	top:0;
	left:0;
	z-index:10;
	background-color:var(--darkBlue);
	box-shadow:0 0 10px var(--darkBlue);
	z-index:100;
}
div.mainmenu-schullogo
{	background-image:url('https://www.wiednergymnasium.at/images/core/WG-SKP_Logo_white.png');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	color:white;
	height:100%;
	cursor:pointer;
}
div.mainmenu-item
{	color:white;
	cursor:pointer;
	transition:.2 ease;
	position:relative;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	transition:.3s ease;
}
div.mainmenu-item:hover
{	color:var(--aktiverMenuLink);
	transition:.2 ease;
	border-top:5px solid var(--aktiverMenuLink);
	transition:.3s ease;
}
div.quicklinks
{	color:white;
}
div.quicklinks a
{	color:white;
	margin-left:15px;
}
div-quicklinks a:first-child
{	margin-left:0px!important;
}
div.quicklinks a:hover
{	color:var(--aktiverMenuLink);
}
div.submenuwrapper
{	width:320px;
	background:transparent;
	top:100%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	padding-top:15px;
	display:none;
}
div.submenu
{	background-color:var(--mediumBlue);
	box-shadow:0 0 16px var(--mediumBlue);
	border-radius:15px;
}
div.submenu a
{	display:block;
	padding:15px;
	color:white!important;
	text-align:center;
}
div.submenu a:first-child
{	border-radius:15px 15px 0 0;
}
div.submenu a:last-child
{	border-radius:0 0 15px 15px;
}
div.submenu a:hover
{	color:var(--aktiverSubmenuLink)!important;
	text-decoration:none;
	background:rgba(255,255,255,0.125);
}
#mobilemenu-wrapper
{	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	z-index:150;
	display:none;
	background-color:var(--darkBlue);
	overflow:auto!important;
}
div.mobile-submenu
{	display:none;
}
div.mobile-submenu-menuitem
{	color:white;
	cursor:pointer;
}
div.mobile-submenu a
{	display:block;
	background-color:var(--mediumBlue);
	color:white;
	padding:10px;
}
div.mobile-submenu-menuitem:hover,
div.mobile-submenu a:hover
{	background:rgba(255,255,255,0.125);
}
*.stopScrolling
{	height:100%;
	overflow:hidden;
}


/*
 *	Teaserbereich in Artikeln
 *	Personen-Boxen
 */

div.teaserbox
	{	background-color:var(--extraLightGray);
		box-shadow:0px 0px 10px #eee;
	}
div.itembox,div.personenbox
	{	box-shadow:0px 0px 15px #ddd;
	}
div.personenbox
	{	hyphens:none; /* dort macht es keinen Sinn */
	}	
div.teaser-bildbox
	{	width:100%;
		height:100%;
		min-height:250px;
	}
img.personenbox-bild
	{	max-width:160px;
		border-radius:8px;
		border-radius:55% 20% 45% 15% / 15% 45% 20% 55%;
		box-shadow:0px 0px 30px #ddd;
	}
		
@media screen and (max-width:991px)
	{	div.teaserbox { box-shadow:0px 0px 30px #ccc; }
	}
@media screen and (min-width:992px)
	{	div.teaser-bildbox-container { transform:rotate(-4deg); }
		div.teaser-bildbox { box-shadow:0px 0px 30px #999; }
		div.bildbox-person { max-width:200px; }
	}


/*
 *	Kategorien-Specials
 *	Items bei Aufzählungen
 */

a.kategorienliste-aufzaehlungsitem
	{	box-shadow:0px 0px 15px #ddd;
		display:block;
		text-align:center;
		transition:.5s;
		cursor:pointer;
		/*
		background-color:var(--extraLightGray);
		border-radius:80px;
		*/
	}
a.kategorienliste-aufzaehlungsitem:hover
	{	background-color:var(--lightGray);
		/*
		background-color:var(--lightBlue);
		color:var(--aktiverSubmenuLink);
		box-shadow:0px 0px 10px var(--lightBlue);
		*/
		transition:.5s;
		transform:scale(1.05);
	}

/*
 * Startseite: ab September 2025
 */

img.begruessung-smartphonepic
	{	width:100%;
		border-radius:5px;
		display:block;
	}
div.begruessung-headline
	{	font-size:30pt;
		border-bottom:2px solid var(--darkBlue);
		color:var(--darkBlue);
	}
div.begruessung-headline:first-line
	{	line-height:1;
	}
div.begruessung-text
	{	font-size:14pt;
		font-weight:400;
		font-style:italic;
	}
div.begruessung-images img
	{	width:100%;
		display:block;
		box-shadow:0px 0px 30px #ccc;
	}
div.begruessung-kontakt
	{	font-size:13pt;
		border-left:4px solid var(--lightGray);
		padding-left:20px;
	}
img.startseite-teaserbild-1,img.startseite-teaserbild-2
	{	/* später: zu div ändern, damit ein BG-Bild wandern kann */
	}

/*
 * Zeitleiste 
 */
div.timeline
	{	display:grid;
		grid-template-columns:60px auto;
		align-items:stretch;
		position:relative;
	}
div.timeline-icon
	{	margin-top:5px;
	}
div.timeline-icon::before
	{	background:var(--lightGray);
		content:"";
		height:100%;
		left:22px;
		position:absolute;
		top:20px;
		width:4px;
		z-index:-1;
	}
div.timeline-icon-symbol
	{	align-content:center;
		width:46px;
		aspect-ratio:1/1;
		border-radius:100%;
		background-color:var(--darkBlue);
		font-size:16pt;
		color:white;
		text-align:center;
		vertical-align:center;
	}
div.timeline-content
	{	border:0px solid #ddd;
		padding:15px;
	}
div.timeline-content p:last-child
	{	margin-bottom:0px!important;
	}
div.timeline-content-header
	{	margin-bottom:10px;
		font-size:14pt;
		color:var(--darkBlue);
	}
/* auf kleinen Bildschirmen sollen die Icons kleiner sein */
@media screen and (max-width:576px)
	{	
		div.timeline
			{	grid-template-columns:40px auto;
			}
		div.timeline-icon::before
			{	left:13px;
				top:10px;
				width:4px;
			}
		div.timeline-icon-symbol
			{	width:30px;
				font-size:13pt;
			}
		div.timeline-content
			{	padding:6px;
				padding-right:0px;
			}
	}