/*
Theme Name: Angela 2018
Author: Matthias Meßmer
Author URI: https://angelaschule-os.de
Description: Based on the Twenty Eleven theme from the Wordpress Team.
Version: 7.1
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* =Structure
----------------------------------------------- */

body {
	padding: 0;
}
/* #page bleibt bewusst randlos, damit die blaue Menueleiste ueber die volle
   Breite laufen kann. Begrenzt werden stattdessen #main (Inhalt) und die
   Rasterspalten in #branding (Logo, Banner, Newsline) - siehe dort. */
#page {
	margin: 0;
}
#branding hgroup {
	margin: 0 3% 0 220px;
}
#access div {
	margin: 0 3%;
}
/* Fruehere Konstruktion: #primary nahm die volle Breite mit negativem rechten
   Rand, #secondary schwebte in die entstandene Luecke, #content war per
   Prozentraendern eingerueckt. Das ist durch ein Raster auf #main ersetzt -
   dadurch kann die Seitenleiste neben dem Header beginnen. */
#primary {
	grid-column: 1;
	grid-row: 2;
	float: none;
	margin: 0;
	width: auto;
}
#content {
	margin: 0;
	width: auto;
}
#secondary {
	grid-column: 2;
	/* Beginnt unter dem Kopf, auf Hoehe des ersten Artikels. */
	grid-row: 2;
	align-self: start;
	float: none;
	margin: 0;
	width: auto;
	/* Dezente Abgrenzung vom Artikelbereich. */
	background: #f7f9fc;
	border-left: 2px solid #96B4DD;
	border-radius: 0 4px 4px 0;
	padding: 16px 16px 8px;
	box-sizing: border-box;
}

/* Singular */
.singular #primary {
/* 	margin: 0; */
}
/*.singular #content,*/
.left-sidebar.singular #content,
.error404 #content,
.search #content {
	margin: 0 3%;
	position: relative;
	width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 100%;
}

/* Attachments */
.singular .image-attachment .entry-content {
	margin: 0 auto;
	width: auto;
}
.singular .image-attachment .entry-description {
	margin: 0 auto;
	width: 90%;
}

/* Showcase */
.page-template-showcase-php #primary,
.left-sidebar.page-template-showcase-php #primary {
	margin: 0;
}
.page-template-showcase-php #content,
.left-sidebar.page-template-showcase-php #content {
	margin: 0 7.6%;
	width: auto;
}
.page-template-showcase-php section.recent-posts {
	float: right;
	margin: 0 0 0 31%;
	width: 69%;
}
.page-template-showcase-php #main .widget-area {
	float: left;
	margin: 0 -22.15% 0 0;
	width: 22.15%;
}

/* error404 */
.error404 #primary {
	float: none;
	margin: 0;
}
.error404 #primary #content {
	margin: 0 7.6%;
	width: auto;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Right Content */
.left-sidebar #primary {
	float: right;
	margin: 0 0 0 -26.4%;
	width: 100%;
}
.left-sidebar #content {
	margin: 0 7.6% 0 34%;
	width: 58.4%;
}
.left-sidebar #secondary {
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 18.8%;
}

/* One column */
.one-column #page {
	max-width: 690px;
}
.one-column #content {
	margin: 0 7.6%;
	width: auto;
}
.one-column #nav-below {
	border-bottom: 1px solid #ddd;
	margin-bottom: 1.625em;
}
.one-column #secondary {
	float: none;
	margin: 0 7.6%;
	width: auto;
}
/* Simplify the showcase template */
.one-column .page-template-showcase-php section.recent-posts {
	float: none;
	margin: 0;
	width: 100%;
}
.one-column .page-template-showcase-php #main .widget-area {
	float: none;
	margin: 0;
	width: auto;
}
.one-column .page-template-showcase-php .other-recent-posts {
	border-bottom: 1px solid #ddd;
}
/* Simplify the showcase template when small feature */
.one-column section.featured-post .attachment-small-feature {
	border: none;
	display: block;
	height: auto;
	max-width: 60%;
	position: static;
}
.one-column article.feature-image.small {
	margin: 0 0 1.625em;
	padding: 0;
}
.one-column article.feature-image.small .entry-title {
	font-size: 20px;
	line-height: 1.3em;
}
.one-column article.feature-image.small .entry-summary {
	height: 150px;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
}
.one-column article.feature-image.small .entry-summary a {
	left: -9%;
}
/* Remove the margin on singular articles */
.one-column.singular .entry-header,
.one-column.singular .entry-content,
.one-column.singular footer.entry-meta,
.one-column.singular #comments-title {
	width: 100%;
}
/* Simplify the pullquotes and pull styles */
.one-column.singular blockquote.pull {
	margin: 0 0 1.625em;
}
.one-column.singular .pull.alignleft {
	margin: 0 1.625em 0 0;
}
.one-column.singular .pull.alignright {
	margin: 0 0 0 1.625em;
}
.one-column.singular .entry-meta .edit-link a {
	position: absolute;
	left: 0;
	top: 40px;
}
.one-column.singular #author-info {
	margin: 2.2em -8.8% 0;
	padding: 20px 8.8%;
}
/* Make sure we have room for our comment avatars */
.one-column .commentlist > li.comment {
	margin-left: 102px;
	width: auto;
}
/* Make sure the logo and search form don't collide */
.one-column #branding #searchform {
	right: 40px;
	top: 4em;
}
/* Talking avatars take up too much room at this size */
.one-column .commentlist > li.comment {
	margin-left: 0;
}
.one-column .commentlist > li.comment .comment-meta,
.one-column .commentlist > li.comment .comment-content {
	margin-right: 85px;
}
.one-column .commentlist .avatar {
	background: transparent;
	display: block;
	padding: 0;
	top: 1.625em;
	left: auto;
	right: 1.625em;
}
.one-column .commentlist .children .avatar {
	background: none;
	padding: 0;
	position: absolute;
	top: 2.2em;
	left: 2.2em;
}
.one-column #respond {
	width: auto;
}


/* =Global
----------------------------------------------- */

body, input, textarea {
	color: #373737;
	font: 15px "Century Gothic","Trebuchet MS","Arial Narrow",Arial,sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
body {
	background: #e2e2e2;
}
#page {
	background: #fff;
}

/* Headings */
h1,h2 {
	clear: both;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}

/* Text elements */
p {
	margin-bottom: 0.5em;
}
ul, ol {
	margin: 0 0 0.5em 2.5em;
}
ul {
	list-style: square;
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0.5em;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 0.5em;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	font-style: italic;
	font-weight: normal;
	margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
	font-style: normal;
}
blockquote cite {
	color: #666;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
pre {
	background: #f4f4f4;
	font: 13px "Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
code, kbd {
	font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn {
	border-bottom: 1px dotted #666;
	cursor: help;
}
address {
	display: block;
	margin: 0 0 1.625em;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 10px;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}

/* Forms */
input[type=text],
input[type=password],
textarea {
	background: #fafafa;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	color: #888;
}
input[type=text]:focus,
textarea:focus {
	color: #373737;
}
textarea {
	padding-left: 3px;
	width: 98%;
}
input[type=text] {
	padding: 3px;
}
input#s {
	/* Sonst kommen zu den prozentualen Breiten noch 38px Innenabstand
	   hinzu - auf der Suchseite ragte das Feld dadurch bis an die
	   Bildschirmkante. */
	box-sizing: border-box;
	background: url(images/search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
}
input#searchsubmit {
	display: none;
}

/* Links */
a {
	color: #27509B;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	text-decoration: underline;
}

/* Assistive text */
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
	background: #eee;
	border-bottom: 1px solid #ddd;
	color: #27509B;
	clip: auto !important;
	font-size: 12px;
/*	position: absolute;*/
	text-decoration: underline;
/*	top: 0;
	left: 7.6%;*/
}


/* =Header
----------------------------------------------- */

/* Variante E: Das Panoramabild laeuft als breites Band ueber die Spalte,
   die Marke sitzt darunter auf weisser Flaeche und ueberlappt den unteren
   Bildrand. Der Schulname steckt nicht mehr im Bild - er steht blau auf
   Weiss und ist dadurch deutlich besser lesbar als frueher mit Schlagschatten.
   Ausserdem wird das nur 1048px breite Panorama hier nicht mehr hochgerechnet. */
#branding {
  display: block;
}
#branding .banner {
  background-image: url(images/headers/panorama.jpg);
  background-size: cover;
  /* Etwas oberhalb der Mitte: unten liegen Wiese und Beine, oben die Gesichter. */
  background-position: center 38%;
  background-repeat: no-repeat;
  height: 200px;
}
/* Markenband ueber der Menueleiste. Seit der Schulname im Kopf der Startseite
   steht, traegt es nur noch das Logo - und das steht mittig, weil ein einzelnes
   Zeichen links am Rand verloren wirkt.
   Die Breite entspricht dem Inhaltsraster: 1215px Spuren plus beidseitig 24px
   Rand ergeben 1263px - mit border-box also dieselbe Kante wie das Menue. */
.markenband {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  max-width: 1263px;
  margin: 0 auto;
  padding: 16px 24px 14px;
}
.markenband .logo {
  display: block;
  flex: none;
  width: 74px;
}
.markenband .logo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Weisses Logo in der angehefteten Leiste. Es haengt als erster Menuepunkt in
   der Liste - dadurch gelten fuer Ausrichtung und Umbruch automatisch dieselben
   Regeln wie fuer die uebrigen Punkte. Sichtbar erst, wenn das Markenband nach
   oben herausgescrollt ist. */
/* Am Seitenanfang nimmt das Logo keine Breite ein - das Menue steht dann
   buendig zum Artikeltext darunter. Beim Andocken waechst die Breite mit,
   sodass sich die Punkte weich zur Seite schieben statt zu springen.
   53px = 13px Innenabstand links + 26px Bildbreite + 14px rechts.
   Das Logo ist per aria-hidden und tabindex="-1" aus der Bedienreihenfolge
   genommen, unsichtbar stoert es also niemanden. */
/* Vor dem Skriptlauf steht der Verweis noch als direktes Kind in der
   Leiste und waere dort sichtbar - beim Laden blitzte das weisse Logo
   dadurch kurz auf. Sobald ihn das Skript in die Liste verschoben hat,
   greift dieser Selektor nicht mehr. */
#access > .leisten-logo {
  display: none;
}
#access .leisten-logo-item {
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width .3s ease, opacity .3s ease;
}
#access.marke-weg .leisten-logo-item {
  width: 53px;
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  #access .leisten-logo-item {
    transition: none;
  }
}
/* Damit das Schiff waehrend des Aufziehens nicht gestaucht wird. */
#access .leisten-logo {
  flex: none;
}
#access .leisten-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 13px;
  /* Ohne Mindesthoehe wird der Verweis durch display:flex nur so hoch wie das
     Bild (26px) statt wie die uebrigen Menuepunkte (2,6em = 39px) - das Schiff
     saesse dann 7px zu hoch. line-height allein wirkt hier nicht. */
  min-height: 2.6em;
}
#access .leisten-logo img {
  height: 26px;
  width: auto;
  display: block;
}
/* Aus dem gemessenen Platzbedarf: Das Menue allein braucht 842px, mit dem
   Schiff davor 895px - dazu 48px Rand. Darunter passt es nicht mehr daneben
   und braeche auf zwei Zeilen um. */
@media (max-width: 960px) {
  /* Hier faellt der reservierte Platz ganz weg, damit das Menue die volle
     Breite behaelt - sichtbar wird das Logo unterhalb dieser Breite nie. */
  #access .leisten-logo-item {
    display: none;
  }
}

#branding #newsline {
  margin-top: 14px;
}

#site-title {
  margin: 0;
  padding: 0;
  color: #28509B;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}
/* Die pauschale Hover-Regel weiter unten faerbt sonst auch den Schulnamen
   orange - hier bleibt es beim Schulblau, nur etwas dunkler. */
#branding .wortmarke:hover #site-title,
#branding .wortmarke:focus #site-title {
  color: #1B4274;
}
#branding *:hover,
#branding *:focus,
#branding *:active {
	color: #E55C2E;
	text-decoration: none;
}
#site-description {
	color: #7a7a7a;
	font-size: 18px;
	padding: 0 3% 50px 0;
	display: none;
}
#branding img {
	height: auto;
	margin-bottom: -7px;
/*	position: absolute;
	left: 0;
	top: 0;*/
	width: 100%;
/*	z-index: -1;*/
}


/* =Menu
-------------------------------------------------------------- */

/* Flaeche statt Farbverlauf: die vier Zeilen Herstellerpraefixe erzeugten
   einen Verlauf von #6989B7 nach #1B4274. Jetzt das Schulblau #28509B,
   darunter eine Zierlinie im hellen Schulblau #96B4DD.
   Weiss auf #28509B erreicht einen Kontrast von 7,75 (WCAG AAA).
   #96B4DD kaeme nur auf 3,64 - deshalb ausschliesslich als Linie, nie fuer Text. */
#access {
	background: #28509B;
	border-bottom: 3px solid #E55C2E;
	clear: both;
	display: block;
	margin: 0 auto;
	width: 100%;
	/* Mitlaufende Leiste. Funktioniert nur, weil #access seit der Umstellung
	   ausserhalb des #branding-Rasters liegt - als Rasterelement waere der
	   Haltebereich auf die erste Zeile begrenzt gewesen. */
	position: sticky;
	top: 0;
	z-index: 999;
}
/* Die Leiste selbst laeuft randlos, ihr Inhalt bleibt buendig zum Textbereich.
   Muss nach "#access div { margin: 0 3% }" weiter oben stehen - gleiche
   Spezifitaet, es gewinnt die spaetere Regel. */
#access > div {
	margin: 0 auto;
}
/* Umschliesst die schwebenden Menuepunkte. Solange #access ein Rasterelement
   war, geschah das von selbst; als gewoehnlicher Block fiele die Leiste sonst
   auf die Hoehe ihrer Zierlinie zusammen. */
#access > div::after {
	content: "";
	display: block;
	clear: both;
}
#access ul {
	font-size: 16px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
/* Das Menue folgt exakt demselben Raster wie #main, damit der erste
	 Menuepunkt ueber dem Artikeltext steht - auf Seiten mit und ohne
	 Seitenleiste gleichermassen. Die -13px gleichen die Polsterung des
	 ersten Links aus, damit dessen Text auf der Linie beginnt. */
@media (min-width: 921px) {
	#access > div.menu-hauptmenue-container {
		display: grid;
		/* Dieselbe Gesamtbreite wie #main - mit Seitenleiste ergeben die
		   beiden Spuren darunter genau 1228px, ohne sie ist es diese eine. */
		grid-template-columns: minmax(0, 1228px);
		column-gap: 40px;
		justify-content: center;
		/* Muss zum Abstand von #main passen, sonst steht das Menue nicht mehr
		   ueber dem Artikeltext. */
		padding: 0 24px;
		box-sizing: border-box;
	}
	body:has(#secondary) #access > div.menu-hauptmenue-container {
		grid-template-columns: minmax(0, 910px) 278px;
	}
	/* Die Liste beginnt an der Textspalte, laeuft aber ueber die Spalte der
	   Seitenleiste hinweg. Waere sie auf die Textspalte begrenzt, braeche sie
	   um, sobald diese unter die benoetigten 860px faellt - das passiert
	   bereits ab etwa 1215px Fensterbreite, also lange bevor bei 880px der
	   Hamburger uebernimmt. */
	#access > div.menu-hauptmenue-container > ul {
		grid-column: 1 / -1;
		margin-left: -13px;
	}
}
#access li {
	float: left;
	position: relative;
}
/* Kompaktere Masse: die zehn Punkte brauchten mit 1,2125em Polsterung und
   16px Schrift zusammen 1033px und brachen dadurch schon bei Laptopbreite um.
   So sind es 860px - der Hamburger genuegt damit unterhalb von 880px. */
#access a {
	color: #fff;
	display: block;
	font-size: 15px;
	line-height: 2.6em;
	padding: 0 13px;
	text-decoration: none;
	transition: background-color .12s;
}
#access ul ul {
	/* Ohne eigenen Hintergrund stand der Schatten um eine
	   durchsichtige Flaeche. */
	background: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
	border-radius: 0 0 4px 4px;
	overflow: hidden;
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 2.6em;
	left: 0;
	/* 188px waren zu schmal - "Fotos 2025/2026" brach um. */
	width: 230px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
/* Die Eintraege duerfen nicht schweben: #access li { float: left } gilt auch
   hier. Solange die Links mit width: 168px fest bemaszt waren, fuellte jeder
   seine Zeile. Mit width: auto schrumpfen sie auf ihre Textbreite - zwei kurze
   Eintraege standen dadurch nebeneinander und die Trennlinien endeten
   unterschiedlich weit. */
#access ul ul li {
	float: none;
	width: 100%;
}
#access ul ul a {
	background: #fff;
	border-bottom: 1px solid #eef1f5;
	color: #22303f;
	font-size: 14px;
	font-weight: normal;
	height: auto;
	line-height: 1.35;
	padding: 9px 14px;
	width: auto;
}
#access ul ul li:hover > a,
#access ul ul a:focus {
	background: #f2f6fb;
	color: #28509B;
	box-shadow: inset 3px 0 0 #96B4DD;
}
/* Frueher wurde der Punkt beim Ueberfahren zu einem hellgrauen Kasten mit
   dunkler Schrift - noch einmal derselbe Verlauf. Jetzt eine dezente
   Aufhellung, die Schrift bleibt weiss, dazu die Akzentlinie darunter. */
#access > div > ul > li:hover > a,
#access > div > ul > li > a:focus {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
/* Bisher nur fett - jetzt zusaetzlich unterstrichen, damit auf einen Blick
   erkennbar ist, wo man sich befindet. */
#access > div > ul > li.current_page_item > a,
#access > div > ul > li.current_page_ancestor > a,
#access > div > ul > li.current-menu-item > a,
#access > div > ul > li.current-menu-ancestor > a {
	font-weight: 600;
	/* Oben statt unten markiert - unten liegt bereits die orange Zierlinie,
	   zwei gestapelte Streifen wirkten unruhig. */
	box-shadow: inset 0 3px 0 #96B4DD;
	background-color: rgba(255, 255, 255, 0.10);
}

/* Lupe statt Beschriftung fuer den Suche-Punkt (menu-item-59864).
   Der Text bleibt im Markup und damit fuer Screenreader lesbar, er wird
   lediglich aus dem sichtbaren Bereich geschoben. Im aufgeklappten
   Hamburger-Menue bleibt "Suche" als Wort stehen - ein Symbol allein
   waere dort zwischen lauter Textzeilen missverstaendlich. */
@media (min-width: 921px) {
	#access #menu-item-59864 > a {
		width: 1.1em;
		text-indent: -9999px;
		overflow: hidden;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.35-4.35'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 17px 17px;
	}
}

/* =Mobilmenue (Hamburger)
--------------------------------------------------------------
   Die Schalter werden von js/angelatwelve.js erzeugt. Auf breiten
   Bildschirmen bleiben sie ausgeblendet, dort aendert sich nichts. */

#access .menu-toggle,
#access .submenu-toggle {
	display: none;
}

/* Umschaltpunkt aus dem gemessenen Platzbedarf abgeleitet: Mit den
   kompakteren Massen brauchen die zehn Punkte 846px.
   Von 880 auf 920px heraufgesetzt, seit Seiten ohne Seitenleiste dem Menue
   nur noch die Textspalte lassen: verfuegbar ist dort Fensterbreite minus
   48px Rand, unterhalb von 894px riss das Menue deshalb auf drei Zeilen
   auf. 920px = Bedarf plus Reserve. Laptops behalten die normale Leiste,
   der Hamburger erscheint auf Telefonen und Tablets hochkant. */
@media (max-width: 920px) {

	/* --- Schalter --- */
	#access .menu-toggle {
		display: flex;
		align-items: center;
		gap: 0.7em;
		width: 100%;
		/* 0.6em ergaben 35px Hoehe - unter der empfohlenen Mindestgroesse
		   von 40px fuer Antippflaechen. */
		padding: 0.85em 3%;
		background: none;
		border: 0;
		color: #eee;
		font-family: inherit;
		font-size: 16px;
		line-height: 1;
		text-align: left;
		cursor: pointer;
	}
	#access .menu-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -3px;
	}

	/* Drei Balken, die im geoeffneten Zustand zum Kreuz werden */
	#access .menu-toggle .balken,
	#access .menu-toggle .balken::before,
	#access .menu-toggle .balken::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #eee;
		border-radius: 1px;
	}
	#access .menu-toggle .balken {
		position: relative;
		transition: background-color .15s;
	}
	#access .menu-toggle .balken::before,
	#access .menu-toggle .balken::after {
		content: "";
		position: absolute;
		left: 0;
		transition: transform .15s, top .15s;
	}
	#access .menu-toggle .balken::before { top: -7px; }
	#access .menu-toggle .balken::after  { top: 7px; }

	#access.menu-offen .menu-toggle .balken { background: transparent; }
	#access.menu-offen .menu-toggle .balken::before { top: 0; transform: rotate(45deg); }
	#access.menu-offen .menu-toggle .balken::after  { top: 0; transform: rotate(-45deg); }

	/* --- Menue ein- und ausklappen ---
	   Nur wenn das Skript gelaufen ist; ohne JavaScript bleibt das alte
	   mehrzeilige Menue stehen statt einer Leiste ohne Bedienelement. */
	#access.hat-hamburger .menu-hauptmenue-container {
		display: none;
	}
	#access.hat-hamburger.menu-offen .menu-hauptmenue-container {
		display: block;
		margin: 0;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0.5em;
		/* Seit die Leiste mitlaeuft, kann ein langes Menue sonst nicht mehr
		   vollstaendig erreicht werden. */
		max-height: calc(100vh - 3.4em);
		overflow-y: auto;
	}

	/* --- Senkrechte Liste statt schwebender Ebenen --- */
	/* Die Desktop-Regel "#access ul { margin: 0 0 0 -0.8125em }" zieht die
	   Liste 10px nach links, damit der erste Menuepunkt dort buendig sitzt.
	   Senkrecht untereinander schiebt das den Text aus dem Bild. */
	#access.hat-hamburger .menu-hauptmenue-container > ul {
		margin: 0;
	}
	#access.hat-hamburger .menu-hauptmenue-container li {
		float: none;
		width: auto;
	}
	#access.hat-hamburger .menu-hauptmenue-container > ul > li > a {
		padding: 0.7em 3em 0.7em 3%;
		line-height: 1.3;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* Untermenues in den Fluss holen: kein position:absolute, keine feste Breite */
	#access.hat-hamburger .menu-hauptmenue-container ul ul {
		position: static;
		display: none;
		float: none;
		width: auto;
		top: auto;
		left: auto;
		box-shadow: none;
	}
	#access.hat-hamburger .menu-hauptmenue-container li.sub-offen > ul {
		display: block;
	}
	#access.hat-hamburger .menu-hauptmenue-container ul ul a {
		width: auto;
		height: auto;
		padding: 0.6em 3em 0.6em 8%;
		font-size: 14px;
		line-height: 1.3;
	}

	/* Das Aufklappen per Hover wuerde sich hier mit dem Schalter beissen -
	   und auf Touchgeraeten gibt es ohnehin kein Hover. */
	#access.hat-hamburger .menu-hauptmenue-container ul li:hover > ul {
		display: none;
	}
	#access.hat-hamburger .menu-hauptmenue-container li.sub-offen:hover > ul {
		display: block;
	}

	/* --- Schalter je Untermenue, rechts neben dem Elternlink --- */
	#access .submenu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 3em;
		height: 2.7em;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}
	#access .submenu-toggle::before {
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		margin: 0 auto;
		border-right: 2px solid #eee;
		border-bottom: 2px solid #eee;
		transform: rotate(45deg);
		transition: transform .15s;
	}
	#access li.sub-offen > .submenu-toggle::before {
		transform: rotate(-135deg);
	}
	#access .submenu-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -3px;
	}
	/* Pfeile in Unterebenen dunkel, dort ist der Hintergrund hell */
	#access .sub-menu .submenu-toggle::before {
		border-color: #444;
	}
}

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 3%;
	text-align: right;
	background-color: rgba(255,255,255,0.6);
}
#branding #searchform div {
	margin: 0;
}
#branding #s {
	float: right;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
#branding #searchsubmit {
	display: none;
}
#branding .only-search #searchform {
	top: 5px;
	z-index: 1;
}
#branding .only-search #s {
	background-color: #666;
	border-color: #000;
	color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
	width: 85%;
}
#branding .only-search #s:focus {
	background-color: #bbb;
}
#branding .with-image #searchform {
	top: auto;
	bottom: -27px;
	max-width: 195px;
}
#branding .only-search + #access div {
	padding-right: 205px;
}


/* =Content
----------------------------------------------- */

/* Spaltenraster. Die Spuren werden ueber justify-content zentriert, #main
   selbst bleibt randlos - dadurch sitzt die Textspalte mittig auf der Seite
   und die Seitenleiste "aussen" daneben.

   Unterhalb von 1520px geht das nicht auf: 910px Text plus beidseitig je
   42px Abstand und 263px Leiste ergeben genau 1520px. Ist weniger Platz da,
   bliebe fuer den Text zu wenig uebrig - dann wird wie bisher die Gruppe
   als Ganzes zentriert. */
#main {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 910px) 278px;
  column-gap: 40px;
  row-gap: 1.5em;
  /* Kopf, Artikel und Seitenleiste bilden einen Block - der wird als Ganzes
     zentriert. Solange der Kopf nur ueber den Artikeln stand, war stattdessen
     die Textspalte mittig ausgerichtet; das ergibt jetzt keinen Sinn mehr. */
  justify-content: center;
  margin: 0;
  /* Ohne diesen Abstand klebt der Inhalt am Fensterrand, sobald die Spuren die
     volle Breite ausfuellen - also zwischen dem Hamburger bei 880px und der
     Breite, ab der von selbst Weissraum entsteht. */
  padding: 0 24px;
}
/* Der Kopf laeuft ueber Text- und Leistenspalte hinweg. */
#main > #branding {
  grid-column: 1 / -1;
  grid-row: 1;
}
#rollo {
  grid-column: 1;
}
/* Vorlagen ohne Seitenleiste - Beitraege, Kapiteluebersichten, Terminseite -
   bekommen eine Spur. Sie ist so breit wie Text- und Leistenspalte zusammen
   (910 + 40 + 278 = 1228), damit die Seitenkante ueberall dieselbe ist:
   unter dem Menue, unter dem Kopf und neben der Startseite. */
#main:not(:has(#secondary)) {
  grid-template-columns: minmax(0, 1228px);
}
/* Ohne Kopfblock beginnt der Inhalt direkt unter der Menueleiste und
   braucht etwas Luft - auf der Startseite uebernimmt das der Kopf. */
#main:not(:has(#branding)) {
  padding-top: 28px;
}

.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}
.page-title a {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}
.hentry,
.no-results {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	position: relative;
}
.hentry:last-child,
.no-results {
	border-bottom: none;
}
.blog .sticky .entry-header .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.entry-title,
.entry-header .entry-meta {
	padding-right: 0px;
}
.entry-title {
	clear: both;
	color: #222;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}
.entry-title,
.entry-title a {
	color: #222;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
	color: #27509B;
}
.entry-meta {
	color: #666;
	clear: both;
	font-size: 100%;
	line-height: 18px;
}
.single-author .entry-meta .by-author {
	display: none;
}
.entry-content,
.entry-summary {
	padding: 1.625em 0 0;
}
.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
}
.entry-content h1 {
	font-size: 24px;
}
.entry-content h2 {
	font-size: 20px;
}
.entry-content h3,
.comment-content h3 {
	font-weight: bold;
	font-size: 18px;
/*	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;*/
}
.entry-content h4,
.comment-content h4 {
	font-weight: bold;
/*	text-transform: uppercase;*/
}

.entry-content table,
.comment-content table {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	width: 100%;
}
.entry-content th,
.comment-content th {
	font-weight: bold;
}
.entry-content td,
.comment-content td {
	border-top: 1px solid #ddd;
	padding: 6px 10px 6px 0;
}
.entry-content #s {
	width: 75%;
}
.comment-content ul,
.comment-content ol {
	margin-bottom: 1.625em;
}
.comment-content ul ul,
.comment-content ol ol,
.comment-content ul ol,
.comment-content ol ul {
	margin-bottom: 0;
}
dl.gallery-item {
	margin: 0;
}
.page-link {
	clear: both;
	display: block;
	margin: 0 0 1.625em;
}
.single .page-link {
	clear: none;
	text-align: center;
}
.page-link a,
.page-link a span {
	background: #eee;
	color: #373737;
	margin: 0;
	padding: 2px 3px;
	text-decoration: none;
}
.previous-next .previous-page {
	float: left;
}
.previous-next .next-page {
	float: right;
}
.page-link a:hover,
.page-link a:hover span {
	background: #888;
	color: #fff;
	font-weight: bold;
}
.page-link span {
	margin-right: 6px;
}
.entry-meta .edit-link a,
.commentlist .edit-link a {
	background: #eee;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #666;
	float: right;
	font-size: 100%;
	line-height: 1.5em;
	font-weight: 300;
	text-decoration: none;
	padding: 0 8px;
}
.entry-meta .edit-link a:hover,
.commentlist .edit-link a:hover {
	background: #888;
	color: #fff;
}
.entry-content .edit-link {
	clear: both;
	display: block;
}

/* Images */
.entry-content img,
.comment-content img,
.widget img {
	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
	/* Ohne height:auto behalten Bilder mit gesetztem height-Attribut ihre
	   Pixelhoehe, waehrend die Breite mitschrumpft - die Partnerlogos im
	   Fuss waren dadurch auf jeder Breite verzerrt, bei 360px auf ein Drittel
	   des Seitenverhaeltnisses. Die Regel darunter greift nur fuer Bilder mit
	   align- oder wp-image-Klasse; Galerie-Miniaturen haben beides nicht. */
	height: auto;
}
img[class*="align"],
img[class*="wp-image-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
/* Der Block-Editor schreibt Bildern teils einen Inline-Stil wie
   style="width:840px;height:630px" mit. Ein Inline-Stil schlaegt die Regel
   darueber - sobald max-width die Breite begrenzt, bleibt die Hoehe stehen
   und das Bild wird verzerrt. Betrifft 26 Bilder in 18 Seiten und Beitraegen.
   Als Regel statt als 18 Inhaltsaenderungen: greift auch fuer kuenftige
   Bilder und laesst sich jederzeit zuruecknehmen. */
.entry-content img[style*="height"],
.widget img[style*="height"] {
	height: auto !important;
}
img.size-full {
	max-width: 97.5%;
	width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
.entry-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 1.625em;
}
p img,
.wp-caption {
	margin-top: 0.4em;
}
.wp-caption {
	background: #eee;
	margin-bottom: 1.625em;
	max-width: 96%;
	padding: 9px;
}
.wp-caption img {
	display: block;
	margin: 0 auto;
	max-width: 98%;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	color: #666;
	font-size: 12px;
}
.wp-caption .wp-caption-text {
	margin-bottom: 0.6em;
	padding: 10px 0 5px 40px;
	position: relative;
}
.wp-caption .wp-caption-text:before {
	color: #666;
	content: '\2014';
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	margin-right: 5px;
	position: absolute;
	left: 10px;
	top: 7px;
}
#content .gallery {
	margin: 0 auto 1.625em;
}
#content .gallery a img {
	border: none;
}
img#wpstats {
	display: block;
	margin: 0 auto 1.625em;
}
#content .gallery-columns-4 .gallery-item {
	width: 23%;
	padding-right: 2%;
}
#content .gallery-columns-4 .gallery-item img {
	width: 100%;
	height: auto;
}
/* Galerien in Widgets - konkret das Logoband im Fuss. Es ist als Galerie mit
   sechs Spalten fuer drei Bilder eingerichtet; fuer sechs Spalten fehlen dem
   Theme die Regeln, die es fuer zwei, drei und vier gibt. Folge: Die Bilder
   ragten 3px ueber ihre Kacheln hinaus und die Bildunterschriften
   ueberlappten sich zu "SchulstiftuBglu und Umweltschule". */
.widget .gallery-item {
	box-sizing: border-box;
	padding-right: 2%;
}
.widget .gallery-item img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.widget .gallery-caption {
	font-size: 11px;
	line-height: 1.35;
	margin: 0;
}
/* Drei Bilder auf sechs Spalten verteilt drueckten die Logos in die linke
   Haelfte. Ein Drittel je Bild fuellt die Zeile - das duerfte gemeint sein. */
.widget .gallery-columns-6 .gallery-item {
	width: 33.333%;
}

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border: 1px solid #ddd;
	padding: 0px;
}
.wp-caption img {
	border-color: #eee;
}
a:focus img[class*="align"],
a:hover img[class*="align"],
a:active img[class*="align"],
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"],
#content .gallery .gallery-icon a:focus img,
#content .gallery .gallery-icon a:hover img,
#content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */
	background: #eee;
	border-color: #bbb;
}
.wp-caption a:focus img,
.wp-caption a:active img,
.wp-caption a:hover img {/* ... including captioned images! */
	background: #fff;
	border-color: #ddd;
}

/* Password Protected Posts */
.post-password-required .entry-header .comments-link {
	margin: 1.625em 0 0;
}
.post-password-required input[type=password] {
	margin: 0.8125em 0;
}
.post-password-required input[type=password]:focus {
	background: #f7f7f7;
}

/* Author Info */
#author-info {
	font-size: 12px;
	overflow: hidden;
}
.singular #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em -35.6% 0 -35.4%;
	padding: 20px 35.4%;
}
.archive #author-info {
	border-bottom: 1px solid #ddd;
	margin: 0 0 2.2em;
	padding: 0 0 2.2em;
}
#author-avatar {
	float: left;
	margin-right: -78px;
}
#author-avatar img {
	background: #fff;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #bbb;
	-moz-box-shadow: 0 1px 2px #bbb;
	box-shadow: 0 1px 2px #bbb;
	padding: 3px;
}
#author-description {
	float: left;
	margin-left: 108px;
}
#author-description h2 {
	color: #000;
	font-size: 15px;
	font-weight: bold;
	margin: 5px 0 10px;
}

/* Comments link */
.entry-header .comments-link a {
	background: #eee url(images/comment-bubble.png) no-repeat;
	color: #666;
	font-size: 13px;
	font-weight: normal;
	line-height: 35px;
	overflow: hidden;
	padding: 0 0 0;
	position: absolute;
	top: 1.5em;
	right: 0;
	text-align: center;
	text-decoration: none;
	width: 43px;
	height: 36px;
}
.entry-header .comments-link a:hover,
.entry-header .comments-link a:focus,
.entry-header .comments-link a:active {
	background-color: #27509B;
	color: #fff;
	color: rgba(255,255,255,0.8);
}
.entry-header .comments-link .leave-reply {
	visibility: hidden;
}

/*
Post Formats Headings
To hide the headings, display: none the ".entry-header .entry-format" selector,
and remove the padding rules below.
*/
.entry-header .entry-format {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	position: absolute;
	text-transform: uppercase;
	top: -5px;
	left: 110px;
}
.entry-header hgroup .entry-title {
	padding-top: 15px;
}
article.format-aside .entry-content,
article.format-link .entry-content,
article.format-status .entry-content {
	padding: 20px 0 0;
}
.recent-posts .entry-header .entry-format {
	display: none;
}
.recent-posts .entry-header hgroup .entry-title {
	padding-top: 0;
}

/* Singular content styles for Posts and Pages */
.singular .hentry {
	border-bottom: none;
	position: relative;
}
.singular.page .hentry {
}
.singular .entry-title {
	color: #000;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 36px;
}
.singular .entry-title,
.singular .entry-header .entry-meta {
	padding-right: 0;
}
/*
.singular .entry-header .entry-meta {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
*/
blockquote.pull {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.6125em;
	margin: 0 0 1.625em;
	text-align: center;
}
.singular blockquote.pull {
	margin: 0 -22.25% 1.625em;
}
.pull.alignleft {
	margin: 0 1.625em 0 0;
	text-align: right;
	width: 33%;
}
.singular .pull.alignleft {
	margin: 0 1.625em 0 -22.25%;
}
.pull.alignright {
	margin: 0 0 0 1.625em;
	text-align: left;
	width: 33%;
}
.singular .pull.alignright {
	margin: 0 -22.25% 0 1.625em;
}
.singular blockquote.pull.alignleft,
.singular blockquote.pull.alignright {
	width: 33%;
}


/* =Aside
----------------------------------------------- */

.format-aside .entry-title,
.format-aside .entry-header .comments-link {
	display: none;
}
.singular .format-aside .entry-title {
	display: block;
}
.format-aside .entry-content {
	padding: 0;
}
.singular .format-aside .entry-content {
	padding: 1.625em 0 0;
}


/* =Link
----------------------------------------------- */

.format-link .entry-title,
.format-link .entry-header .comments-link {
	display: none;
}
.singular .format-link .entry-title {
	display: block;
}
.format-link .entry-content {
	padding: 0;
}
.singular .format-link .entry-content {
	padding: 1.625em 0 0;
}


/* =Gallery
----------------------------------------------- */

.format-gallery .gallery-thumb {
	float: left;
	display: block;
	margin: .375em 1.625em 0 0;
}


/* =Status
----------------------------------------------- */

.format-status .entry-title,
.format-status .entry-header .comments-link {
	display: none;
}
.singular .format-status .entry-title {
	display: block;
}
.format-status .entry-content {
	padding: 0;
}
.singular .format-status .entry-content {
	padding: 1.625em 0 0;
}
.format-status img.avatar {
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #ccc;
	-moz-box-shadow: 0 1px 2px #ccc;
	box-shadow: 0 1px 2px #ccc;
	float: left;
	margin: 4px 10px 2px 0;
	padding: 0;
}


/* =Quote
----------------------------------------------- */

.format-quote blockquote {
	color: #555;
	font-size: 17px;
	margin: 0;
}


/* =Image
----------------------------------------------- */

.indexed.format-image .entry-header {
	min-height: 61px; /* Prevent the comment icon from colliding with the image when there is no title */
}
.indexed.format-image .entry-content {
	padding-top: 0.5em;
}
.indexed.format-image p,
.indexed.format-image p img {
	margin-bottom: 0;
}
.indexed.format-image footer.entry-meta {
	background: #ddd;
	margin-top: -7px;
	padding: 20px 30px;
	overflow: hidden;
}
.indexed.format-image div.entry-meta {
	display: inline-block;
	float: left;
	width: 35%;
}
.indexed.format-image div.entry-meta + div.entry-meta {
	float: none;
	width: 65%;
}
.indexed.format-image .entry-meta span.cat-links,
.indexed.format-image .entry-meta span.tag-links,
.indexed.format-image .entry-meta span.comments-link {
	display: block;
}
.indexed.format-image footer.entry-meta a {
	color: #444;
}
.indexed.format-image footer.entry-meta a:hover {
	color: #fff;
}
#content .indexed.format-image img {
	border: none;
	max-width: 100%;
	padding: 0;
}
.indexed.format-image .wp-caption {
	background: #111;
	margin-bottom: 0;
	max-width: 96%;
	padding: 11px;
}
.indexed.format-image .wp-caption .wp-caption-text {
	color: #ddd;
}
.indexed.format-image .wp-caption .wp-caption-text:before {
	color: #444;
}
.indexed.format-image a:hover img {
	opacity: 0.8;
}


/* =error404
----------------------------------------------- */

.error404 #main #searchform {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-width: 1px 0;
	margin: 0 -8.9% 1.625em;
	overflow: hidden;
	padding: 1.625em 8.9%;
}
.error404 #main #s {
	width: 95%;
}
.error404 #main .widget {
	clear: none;
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
.error404 #main .widget_archive {
	margin-right: 0;
}
.error404 #main .widget_tag_cloud {
	float: none;
	margin-right: 0;
	width: 100%;
}
.error404 .widgettitle {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}


/* =Showcase
----------------------------------------------- */

h1.showcase-heading {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

/* =search
----------------------------------------------- */

.page-template-search-page-php #s {
	width: 95%;
}
.page-template-search-page-php .widget {
	clear: none;
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
/* Die drei Spalten hatten keinerlei Media Query: Bei 360px blieben ihnen
   je 96px, die Ueberschrift "Monatsarchive" allein ist 136px breit. Die
   Seite lief dadurch ueber und die Spalteninhalte ueberlappten sich. */
@media (max-width: 650px) {
	.page-template-search-page-php .widget {
		float: none;
		width: auto;
		margin-right: 0;
	}
}
.page-template-search-page-php .widget ul li {
	margin-left: 2em;
	font-size: 100%;
}
.page-template-search-page-php .widget a {
	font-weight: normal;
}
.page-template-search-page-php .widget_archive {
	margin-right: 0;
}
.page-template-search-page-php .widget_tag_cloud {
	float: none;
	margin-right: 0;
	width: 100%;
}
.page-template-search-page-php .widgettitle {
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
	margin-top: 2.6em;
}

/* Intro */
article.intro {
	background: #f9f9f9;
	border-bottom: none;
	margin: -1.855em -8.9% 1.625em;
	padding: 0 8.9%;
}
article.intro .entry-title {
	display: none;
}
article.intro .entry-content {
	color: #111;
	font-size: 16px;
	padding: 1.625em 0 0.625em;
}
article.intro .edit-link a {
	background: #aaa;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	padding: 0 8px;
	position: absolute;
	top: 30px;
	right: 20px;
	text-decoration: none;
}
article.intro .edit-link a:hover,
article.intro .edit-link a:focus,
article.intro .edit-link a:active {
	background: #777;
}

/* Featured post */
section.featured-post {
	float: left;
	margin: -1.625em -8.9% 1.625em;
	padding: 1.625em 8.9% 0;
	position: relative;
	width: 100%;
}
section.featured-post .hentry {
	border: none;
	color: #666;
	margin: 0;
}
section.featured-post .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

/* Small featured post */
section.featured-post .attachment-small-feature {
	float: right;
	height: auto;
	margin: 0 -8.9% 1.625em 0;
	max-width: 59%;
	position: relative;
	right: -15px;
}
section.featured-post.small {
	padding-top: 0;
}
section.featured-post .attachment-small-feature:hover,
section.featured-post .attachment-small-feature:focus,
section.featured-post .attachment-small-feature:active {
	opacity: .8;
}
article.feature-image.small {
	float: left;
	margin: 0 0 1.625em;
	width: 45%;
}
article.feature-image.small .entry-title {
	line-height: 1.2em;
}
article.feature-image.small .entry-summary {
	color: #555;
	font-size: 13px;
}
article.feature-image.small .entry-summary p a {
	background: #222;
	color: #eee;
	display: block;
	left: -23.8%;
	padding: 9px 26px 9px 85px;
	position: relative;
	text-decoration: none;
	top: 20px;
	width: 180px;
	z-index: 1;
}
article.feature-image.small .entry-summary p a:hover {
	background: #27509B;
	color: #eee;
	color: rgba(255,255,255,0.8);
}

/* Large featured post */
section.feature-image.large {
	border: none;
	max-height: 288px;
	padding: 0;
	width: 100%;
}
section.feature-image.large .showcase-heading {
	display: none;
}
section.feature-image.large .hentry {
	border-bottom: none;
	left: 9%;
	margin: 1.625em 9% 0 0;
	position: absolute;
	top: 0;
}
article.feature-image.large .entry-title a {
	background: #222;
	background: rgba(0,0,0,0.8);
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-weight: 300;
	padding: .2em 20px;
}
section.feature-image.large:hover .entry-title a,
section.feature-image.large .entry-title:hover a {
	background: #eee;
	background: rgba(255,255,255,0.8);
	color: #222;
}
article.feature-image.large .entry-summary {
	display: none;
}
section.feature-image.large img {
	display: block;
	height: auto;
	max-width: 117.9%;
	padding: 0 0 6px;
}

/* Featured Slider */
.featured-posts {
	border-bottom: 1px solid #ddd;
	display: block;
	height: 328px;
	margin: 1.625em -8.9% 20px;
	max-width: 1000px;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.featured-posts .showcase-heading {
	padding-left: 8.9%;
}
.featured-posts section.featured-post {
	background: #fff;
	height: 288px;
	left: 0;
	margin: 0;
	position: absolute;
	top: 30px;
	width: auto;
}
.featured-posts section.featured-post.large {
	max-width: 100%;
	overflow: hidden;
}
.featured-posts section.featured-post {
	-webkit-transition-duration: 200ms;
	-webkit-transition-property: opacity, visibility;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 200ms;
	-moz-transition-property: opacity, visibility;
	-moz-transition-timing-function: ease;
}
.featured-posts section.featured-post {
	opacity: 0;
	visibility: hidden;
}
.featured-posts #featured-post-1 {
	opacity: 1;
	visibility: visible;
}
.featured-post .feature-text:after,
.featured-post .feature-image.small:after {
	content: ' ';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
	width: 100%;
	height: 45px;
	position: absolute;
	top: 230px;
}
.featured-post .feature-image.small:after {
	top: 253px;
}
#content .feature-slider {
	top: 5px;
	right: 8.9%;
	overflow: visible;
	position: absolute;
}
.feature-slider ul {
	list-style-type: none;
	margin: 0;
}
.feature-slider li {
	float: left;
	margin: 0 6px;
}
.feature-slider a {
	background: #3c3c3c;
	background: rgba(60,60,60,0.9);
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	display: block;
	width: 14px;
	height: 14px;
}
.feature-slider a.active {
	background: #27509B;
	-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
	-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
	box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
	cursor: default;
	opacity: 0.5;
}

/* Recent Posts */
section.recent-posts {
	padding: 0 0 1.625em;
}
section.recent-posts .hentry {
	border: none;
	margin: 0;
}
section.recent-posts .other-recent-posts {
	border-bottom: 1px solid #ddd;
	list-style: none;
	margin: 0;
}
section.recent-posts .other-recent-posts li {
	padding: 0.3125em 0;
	position: relative;
}
section.recent-posts .other-recent-posts .entry-title {
	border-top: 1px solid #ddd;
	font-size: 17px;
}
section.recent-posts .other-recent-posts a[rel="bookmark"] {
	color: #373737;
	float: left;
	max-width: 84%;
}
section.recent-posts .other-recent-posts a[rel="bookmark"]:after {
	content: '-';
	color: transparent;
	font-size: 11px;
}
section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
}
section.recent-posts .other-recent-posts .comments-link a,
section.recent-posts .other-recent-posts .comments-link > span {
	border-bottom: 2px solid #999;
	bottom: -2px;
	color: #444;
	display: block;
	font-size: 10px;
	font-weight: 500;
	line-height: 2.76333em;
	padding: 0.3125em 0 0.3125em 1em;
	position: absolute;
	right: 0;
	text-align: right;
	text-transform: uppercase;
	z-index: 1;
}
section.recent-posts .other-recent-posts .comments-link > span {
	border-color: #bbb;
	color: #888;
}
section.recent-posts .other-recent-posts .comments-link a:hover {
	color: #27509B;
	border-color: #27509B;
}
section.recent-posts .other-recent-posts li:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}


/* =Attachments
----------------------------------------------- */

.image-attachment div.attachment {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-width: 1px 0;
	margin: 0 -8.9% 1.625em;
	overflow: hidden;
	padding: 1.625em 1.625em 0;
	text-align: center;
}
.image-attachment div.attachment img {
	display: block;
	height: auto;
	margin: 0 auto 1.625em;
	max-width: 100%;
}
.image-attachment div.attachment a img {
	border-color: #f9f9f9;
}
.image-attachment div.attachment a:focus img,
.image-attachment div.attachment a:hover img,
.image-attachment div.attachment a:active img {
	border-color: #ddd;
	background: #fff;
}
.image-attachment .entry-caption p {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}


/* =Navigation
-------------------------------------------------------------- */

#content nav {
	clear: both;
	overflow: hidden;
	padding: 0 0 1.625em;
}
#content nav a {
	font-size: 12px;
	font-weight: bold;
	line-height: 2.2em;
}
#nav-above {
	padding: 0 0 1.625em;
}
#nav-above {
	display: none;
}
.paged #nav-above {
	display: block;
}
.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content nav .meta-nav {
	font-weight: normal;
}

/* Singular navigation */
#nav-single {
	width: 100%;
	z-index: 1;
}
#nav-single .nav-previous {
	float: left;
}
#nav-single .nav-next {
	float: right;
}


/* =Widgets
----------------------------------------------- */

.widget-area {
	font-size: 12px;
}
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title {
	color: #666;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.2em;
	line-height: 1.6em;
	margin-bottom: 0.8em;
	text-transform: uppercase;
}
.widget ul {
	font-size: 15px;
	margin: 0;
	list-style-type: none;
}
.widget ul ul {
	margin-left: 1.5em;
}
.widget ul li {
	color: #777;
	font-size: 13px;
}
.widget a {
	font-weight: bold;
	text-decoration: none;
}
.widget a:hover,
.widget a:focus,
.widget a:active {
	text-decoration: underline;
}

/* Search Widget */
.widget_search form {
	margin: 0 0 1.625em;
}
.widget_search #s {
	width: 77%;
}
.widget_search #searchsubmit {
	background: #ddd;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
	-moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
	box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
	color: #888;
	font-size: 13px;
	line-height: 25px;
	position: relative;
	top: -2px;
}
.widget_search #searchsubmit:active {
	background: #27509B;
	border-color: #0861a5;
	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
	color: #bfddf3;
}

/* Ephemera Widget */
section.ephemera ol,
.widget_twentyeleven_ephemera ol {
	list-style: square;
	margin: 5px 0 0;
}
.widget_twentyeleven_ephemera .widget-entry-title {
	font-size: 15px;
	font-weight: bold;
	padding: 0;
}
.widget_twentyeleven_ephemera .comments-link a,
.widget_twentyeleven_ephemera .comments-link > span {
	color: #666;
	display: block;
	font-size: 10px;
	font-weight: 500;
	line-height: 2.76333em;
	text-transform: uppercase;
}
section.ephemera .entry-title .comments-link a:hover,
.widget_twentyeleven_ephemera .entry-title .comments-link a:hover {
}
section.ephemera .entry-title a span {
	color: #29628d;
}

/* Twitter */
.widget_twitter li {
	list-style-type: none;
	margin-bottom: 14px;
}
.widget_twitter .timesince {
	display: block;
	font-size: 11px;
	margin-right: -10px;
	text-align: right;
}

/* Widget Image */
.widget_image img {
	height: auto;
	max-width: 100%;
}

/* Calendar Widget */

.widget_calendar #wp-calendar {
	color: #555;
	width: 95%;
	text-align: center;
}
.widget_calendar #wp-calendar caption,
.widget_calendar #wp-calendar td,
.widget_calendar #wp-calendar th {
	text-align: center;
}
.widget_calendar #wp-calendar caption {
	font-size: 11px;
	font-weight: 500;
	padding: 5px 0 3px 0;
	text-transform: uppercase;
}
.widget_calendar #wp-calendar th {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
.widget_calendar #wp-calendar tfoot td {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#newsline .widget {
  margin-bottom: 0px;
}


/* =Comments
----------------------------------------------- */

#comments-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	line-height: 2.6em;
	padding: 0 0 2.6em;
	text-transform: uppercase;
}
.nopassword,
.nocomments {
	color: #aaa;
	display: none;
	font-size: 24px;
	font-weight: 100;
	margin: 26px 0;
	text-align: center;
}
.commentlist {
	list-style: none;
	margin: 0 auto;
	width: 68.9%;
}
.content .commentlist,
.page-template-sidebar-page-php .commentlist {
	width: 100%; /* reset the width for the one-column and sidebar page layout */
}
.commentlist > li.comment {
	background: #f6f6f6;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}
.commentlist .pingback {
	margin: 0 0 1.625em;
	padding: 0 1.625em;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li.comment {
	background: #fff;
	border-left: 1px solid #ddd;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	margin: 1.625em 0 0;
	padding: 1.625em;
	position: relative;
}
.commentlist .children li.comment .fn {
	display: block;
}
.comment-meta .fn {
	font-style: normal;
}
.comment-meta {
	color: #666;
	font-size: 12px;
	line-height: 2.2em;
}
.commentlist .children li.comment .comment-meta {
	line-height: 1.625em;
	margin-left: 50px;
}
.commentlist .children li.comment .comment-content {
	margin: 1.625em 0 0;
}
.comment-meta a {
	font-weight: bold;
}
.comment-meta a:focus,
.comment-meta a:active,
.comment-meta a:hover {
}
.commentlist .avatar {
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #ccc;
	-moz-box-shadow: 0 1px 2px #ccc;
	box-shadow: 0 1px 2px #ccc;
	left: -102px;
	padding: 0;
	position: absolute;
	top: 0;
}
.commentlist > li:before {
	content: url(images/comment-arrow.png);
	left: -21px;
	position: absolute;
}
.commentlist > li.pingback:before {
	content: '';
}
.commentlist .children .avatar {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	left: 2.2em;
	padding: 0;
	top: 2.2em;
}
a.comment-reply-link {
	background: #eee;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #666;
	display: inline-block;
	font-size: 12px;
	padding: 0 8px;
	text-decoration: none;
}
a.comment-reply-link:hover,
a.comment-reply-link:focus,
a.comment-reply-link:active {
	background: #888;
	color: #fff;
}
a.comment-reply-link > span {
	display: inline-block;
	position: relative;
	top: -1px;
}

/* Post author highlighting */
.commentlist > li.bypostauthor {
	background: #ddd;
	border-color: #d3d3d3;
}
.commentlist > li.bypostauthor .comment-meta {
	color: #575757;
}
.commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover {
}
.commentlist > li.bypostauthor:before {
	content: url(images/comment-arrow-bypostauthor.png);
}

/* Post Author threaded comments */
.commentlist .children > li.bypostauthor {
	background: #ddd;
	border-color: #d3d3d3;
}

/* sidebar-page.php comments */
/* Make sure we have room for our comment avatars */
.page-template-sidebar-page-php .commentlist > li.comment,
.page-template-sidebar-page-php.commentlist .pingback {
	margin-left: 102px;
	width: auto;
}
/* And a full-width comment form */
.page-template-sidebar-page-php #respond {
	width: auto;
}

/* Comment Form */
#respond {
	background: #ddd;
	border: 1px solid #d3d3d3;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 auto 1.625em;
	padding: 1.625em;
	position: relative;
	width: 68.9%;
}
#respond input[type="text"],
#respond textarea {
	background: #fff;
	border: 4px solid #eee;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	-moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	position: relative;
	padding: 10px;
	text-indent: 80px;
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
	position: relative;
}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
	background: #eee;
	-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	color: #555;
	display: inline-block;
	font-size: 13px;
	left: 4px;
	min-width: 60px;
	padding: 4px 10px;
	position: relative;
	top: 40px;
	z-index: 1;
}
#respond input[type="text"]:focus,
#respond textarea:focus {
	text-indent: 0;
	z-index: 1;
}
#respond textarea {
	resize: vertical;
	width: 95%;
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
	color: #bd3500;
	font-size: 22px;
	font-weight: bold;
	left: 75%;
	position: absolute;
	top: 45px;
	z-index: 1;
}
#respond .comment-notes,
#respond .logged-in-as {
	font-size: 13px;
}
#respond p {
	margin: 10px 0;
}
#respond .form-submit {
	float: right;
	margin: -20px 0 10px;
}
#respond input#submit {
	background: #222;
	border: none;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	color: #eee;
	cursor: pointer;
	font-size: 15px;
	margin: 20px 0;
	padding: 5px 42px 5px 22px;
	position: relative;
	left: 30px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
#respond input#submit:active {
	background: #27509B;
	color: #bfddf3;
}
#respond #cancel-comment-reply-link {
	color: #666;
	margin-left: 10px;
	text-decoration: none;
}
#respond .logged-in-as a:hover,
#respond #cancel-comment-reply-link:hover {
	text-decoration: underline;
}
.commentlist #respond {
	margin: 1.625em 0 0;
	width: auto;
}
#reply-title {
	color: #373737;
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
}
#cancel-comment-reply-link {
	color: #888;
	display: block;
	font-size: 10px;
	font-weight: normal;
	line-height: 2.2em;
	letter-spacing: 0.05em;
	position: absolute;
	right: 1.625em;
	text-decoration: none;
	text-transform: uppercase;
	top: 1.1em;
}
#cancel-comment-reply-link:focus,
#cancel-comment-reply-link:active,
#cancel-comment-reply-link:hover {
	color: #ff4b33;
}
#respond label {
	line-height: 2.2em;
}
#respond input[type=text] {
	display: block;
	height: 24px;
	width: 75%;
}
#respond p {
	font-size: 12px;
}
p.comment-form-comment {
	margin: 0;
}
.form-allowed-tags {
	display: none;
}


/* =Footer
----------------------------------------------- */

#colophon {
	clear: both;
}
#supplementary {
	border-top: 1px solid #ddd;
	padding: 1.625em 7.6%;
	overflow: hidden;
}

/* Two Footer Widget Areas */
#supplementary.two .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 48.1%;
}
#supplementary.two .widget-area + .widget-area {
	margin-right: 0;
}

/* Three Footer Widget Areas */
#supplementary.three .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
	margin-right: 0;
}

/* Site Generator Line */
#site-generator {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	color: #666;
	font-size: 12px;
	line-height: 2.2em;
	padding: 2.2em 0.5em;
	text-align: center;
}
#site-generator a {
	color: #555;
	font-weight: bold;
}
#site-generator .sep {
	background: url(images/wordpress.png) center left no-repeat;
	color: transparent;
	display: inline-block;
	height: 16px;
	line-height: 16px;
	margin: 0 7px;
	width: 16px;
}

/* WPDF
----------------------------------------------- */
a.wpptopdf {
	float:right;
}

/* Wordpress Form Manager
----------------------------------------------- */
#fm-form-1 ul {
	margin-left: 0;
}

#fm-form-1 .submit {
	float: none;
}

/* =Kapiteluebersicht
-----------------------------------------------
   Oberseiten wie /menschen/ bestehen aus nichts als dem Kuerzel [submenu],
   das wp_list_pages ausgibt. Als eingerueckte Linkliste war daran wenig
   ablesbar, und die Unterkapitel steckten hinter unbeschrifteten
   Plus-Schaltern. Daraus wird hier ein Raster aus Karten - eine je Kapitel,
   die Unterkapitel von vornherein sichtbar darin.

   Die zweite, gleichlautende Liste in der Seitenleiste entfaellt auf diesen
   Seiten; das steht in sidebar-submenu.php. */
#submenu > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  /* Karten nur so hoch wie ihr Inhalt - sonst werden Kapitel ohne
     Unterpunkte auf die Hoehe ihrer Nachbarn gestreckt und wirken hohl. */
  align-items: start;
  gap: 16px;
  margin: 1.6em 0 0;
  padding: 0;
  list-style: none;
}
#submenu > ul > .page_item {
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #E3E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(40, 80, 155, 0.05);
  font-size: 100%;
  font-weight: 400;
  transition: border-color .15s, box-shadow .15s;
}
#submenu > ul > .page_item:hover {
  border-color: #C3D2EA;
  box-shadow: 0 4px 14px rgba(40, 80, 155, 0.09);
}
/* Kapitelname mit Pfeil am rechten Rand. */
#submenu > ul > .page_item > a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #28509B;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
#submenu > ul > .page_item > a::after {
  content: "\2192";
  margin-left: auto;
  color: #96B4DD;
  font-weight: 400;
  transition: transform .15s, color .15s;
}
#submenu > ul > .page_item > a:hover::after {
  transform: translateX(3px);
  color: #28509B;
}
/* Unterkapitel innerhalb der Karte. */
#submenu > ul > .page_item > ul,
#submenu > ul > .page_item .children {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #EEF2F8;
  list-style: none;
}
#submenu .page_item .page_item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 100%;
  font-weight: 400;
}
#submenu .page_item .page_item > a {
  display: block;
  padding: 4px 0;
  color: #3d4657;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
#submenu .page_item .page_item > a:hover {
  color: #28509B;
  text-decoration: underline;
}
/* Die Plus/Minus-Schalter erzeugt angelatwelve.js nicht mehr; die Regel
   bleibt als Netz fuer Seiten, die noch aus einem Zwischenspeicher kommen. */
#submenu .fold,
#submenu .unfold {
  display: none;
}

/* Table of Contents
----------------------------------------------- */
#toc {
	background-color: #fff;
	border: solid 1px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	font-size: small;
	padding: 5px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 20em;
	z-index: 10;
}
#toc .heading {
	font-size: larger;
	font-weight: bold;
}
#toc ul {
	display: none;
	margin-bottom: 0px;
}
#toc .current_page_item {
	font-weight: bold;
}

#campus img {
	margin: 0 1em 1em 0;
}

/* primary menu styles
----------------------------------------------- */

#access li li.menu-parent > a {
	background-image: url(images/menu-rarrow.png);
	background-position: 95% center;
	background-repeat: no-repeat;
}

.page-link {
	font-weight: bold;
}
.page-link a,
.page-link a:hover {
	font-weight: normal;
}

header .page-link {
	margin: 0 0 1.625em 0;
}
.entry-content .page-link {
	margin: 1.625em 0 0 0;
}

/* Angela2012 styles */
.more-link {
	padding: 2px 10px;
	border: solid 2px #888;
	border-radius: 100px;
	-moz-border-radius: 100px;
}

/* GCE Sidebar Widget */
.gce-widget-list {}
.gce-widget-list .gce-list {}
.gce-widget-list .gce-list li {
	margin-bottom: 0.7em;
	padding-left: 5px;
	line-height: 1.2em;
}
.gce-widget-list .gce-list .gce-list-date {
	background-color: #E2E2E2;
	color: black;
	margin-left: -5px;
	padding-left: 5px;
	padding-right: 5px;
}
.gce-widget-list .gce-list .gce-list-event-title {
	font-weight: bold;
}
.gce-widget-list .gce-list .gce-list-description {}
.gce-widget-list .gce-list .gce-list-location {}
.gce-widget-list .gce-list .gce-list-location span {}
.gce-widget-list .gce-list .gce-list-details {
	text-align: right;
	display: none;
}
.gce-widget-list .gce-list .gce-list-details a {
	font-weight: normal;
	font-size: smaller;
}

/* GCE on a page */
.gce-page-list {}
.gce-page-list .gce-list {
	list-style-type: none;
	margin-left: 0;
}
.gce-page-list .gce-list li ul {
	list-style-type: square;
	margin: 0 0 1em 2.5em;
}
.gce-page-list .gce-list li {
	margin-bottom: 0.5em;
	padding-left: 5px;
}
.gce-page-list .gce-list .gce-list-title {
	background-color: #E2E2E2;
	color: #373737;
	margin-left: -5px;
	padding-left: 5px;
	padding-right: 5px;
}
.gce-page-list .gce-list .gce-list-date {
	display: inline;
}
.gce-page-list .gce-list .gce-list-date:after {
	content: ": ";
}
.gce-page-list .gce-list .gce-list-time {
	display: inline;
}
.gce-page-list .gce-list .gce-list-time:before {
	content: "(";
}
.gce-page-list .gce-list .gce-list-time:after {
	content: ")";
}
.gce-page-list .gce-list .gce-list-event-title {
	font-weight: bold;
	display: inline;
}
.gce-page-list .gce-list .gce-list-description {}
.gce-page-list .gce-list .gce-list-location {}
.gce-page-list .gce-list .gce-list-location span {}
.gce-page-list .gce-list .gce-list-details {
	text-align: right;
	display: none;
}
.gce-page-list .gce-list .gce-list-details a {
	font-weight: normal;
	font-size: smaller;
}

.widget_links img {
	height: 24px;
	margin-bottom: -7px;
	margin-top: 7px;
	margin-right: 5px;
}

/* Kalenderblatt */
.entry-date time {
	position: relative;
	border: 1px solid #999;
	height: 80px;
	width: 80px;
	display: block;
}
.entry-date span {
	display: block;
	position: absolute;
	text-align: center;
	width: 100%;
}
.entry-date .day {
	top: 18px;
	font-size: 200%;
	font-weight: bold;
}
.entry-date .month {
	top: 58px;
}
.entry-date .year {
	background-color: #E55C2E;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.2em;
	top: 0px;
}
.entry-date .sep {
	display: none;
}

.entry-header .entry-date {
	float: left;
	font-size: 80%;
}
.type-post .entry-header .entry-title,
.type-post .entry-header .entry-meta {
	clear: none;
	margin-left: 110px;
	padding-left: 0;
}
.type-page .entry-header .entry-title,
.type-page .entry-header .entry-meta {
/*	margin-left: 0;*/
}
.type-post .entry-header .entry-title {
	padding-top: 0;
	margin-bottom: 0;
}
.entry-content {
	clear: both;
}

.more-link-container {
	text-align: right;
}

.sticky-border {
	margin: -10px;
	padding: 10px;
	border: medium dashed #E55C2E;
}
.sticky-border header .entry-date, 
.sticky-border header .entry-format {
	display: none;
}
.sticky-border .entry-title {
	margin-left: 0 !important;
}
.sticky-border .entry-content {
	padding: 0;
}


/* =Responsive Structure
----------------------------------------------- */

@media (max-width: 900px) {
	/* Eine Spalte: bei 263px Seitenleiste plus 42px Abstand bliebe fuer den
	   Artikel sonst zu wenig uebrig. */
	#main {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}
	#main > #branding,
	#primary,
	#secondary {
		grid-column: 1;
		grid-row: auto;
	}
	#secondary {
		margin: 0;
	}
}

@media (max-width: 800px) {
	/* Simplify the basic layout */
	/* Kein zusaetzlicher Rand mehr: #main bringt den seitlichen Abstand
	   inzwischen selbst mit, sonst stuenden Kopf und Text 10px versetzt. */
	#main #content {
		margin: 0;
		width: auto;
	}
	#nav-below {
		border-bottom: 1px solid #ddd;
		margin-bottom: 1.625em;
	}
	#main #secondary {
		float: none;
		margin: 0;
		width: auto;
	}
	/* Simplify the showcase template */
	.page-template-showcase-php .featured-posts {
		min-height: 280px;
	}
	.featured-posts section.featured-post {
		height: auto;
	}
	.page-template-showcase-php section.recent-posts {
		float: none;
		margin: 0;
		width: 100%;
	}
	.page-template-showcase-php #main .widget-area {
		float: none;
		margin: 0;
		width: auto;
	}
	.page-template-showcase-php .other-recent-posts {
		border-bottom: 1px solid #ddd;
	}
	/* Simplify the showcase template when small feature */
	section.featured-post .attachment-small-feature,
	.one-column section.featured-post .attachment-small-feature {
		border: none;
		display: block;
		float: left;
		height: auto;
		margin: 0.625em auto 1.025em;
		max-width: 30%;
		position: static;
	}
	article.feature-image.small {
		float: right;
		margin: 0 0 1.625em;
		width: 64%;
	}
	.one-column article.feature-image.small .entry-summary {
		height: auto;
	}
	article.feature-image.small .entry-summary p a {
		left: 0;
		padding-left: 20px;
		padding-right: 20px;
		width: auto;
	}
	/* Remove the margin on singular articles */
	.singular .entry-header,
	.singular .entry-content,
	.singular footer.entry-meta,
	.singular #comments-title {
		width: 100%;
	}
	/* Simplify the pullquotes and pull styles */
	.singular blockquote.pull {
		margin: 0 0 1.625em;
	}
	.singular .pull.alignleft {
		margin: 0 1.625em 0 0;
	}
	.singular .pull.alignright {
		margin: 0 0 0 1.625em;
	}
	.singular #author-info {
		margin: 2.2em -8.8% 0;
		padding: 20px 8.8%;
	}
	/* Make sure we have room for our comment avatars */
	.commentlist {
		width: 100%;
	}
	.commentlist > li.comment,
	.commentlist .pingback {
		margin-left: 102px;
		width: auto;
	}
	/* And a full-width comment form */
	#respond {
		width: auto;
	}
	/* No need to float footer widgets at this size */
	#colophon #supplementary .widget-area {
		float: none;
		margin-right: 0;
		width: auto;
	}
	/* No need to float 404 widgets at this size */
	.error404 #main .widget {
		float: none;
		margin-right: 0;
		width: auto;
	}
	/* Make sure embeds fit their containers */
	embed,
	object {
		max-width: 100%;
	}

}
@media (max-width: 650px) {
	/* Der urspruengliche Kommentar lautete "Reduce font-sizes for better
	   readability on smaller devices" - eine Annahme von 2011. Kleine
	   Bildschirme brauchen groessere Schrift, nicht kleinere. 13px lagen
	   unter der Lesbarkeitsgrenze; 16px ist zugleich der Wert, ab dem iOS
	   beim Antippen von Eingabefeldern nicht mehr hineinzoomt. */
	body, input, textarea {
		font-size: 16px;
	}
	/* iOS Safari zoomt die Seite hinein, sobald ein Eingabefeld mit unter
	   16px den Fokus bekommt - und zoomt danach nicht zurueck. Betrifft
	   auch input#s, das weiter oben eigene 14px setzt. */
	input, textarea, select,
	input#s {
		font-size: 16px;
	}
	#site-title {
		font-size: 24px;
	}
	#access ul {
		font-size: 12px;
	}
	article.intro .entry-content {
		font-size: 15px;
	}
	.entry-title {
		font-size: 21px;
	}
	.featured-post .entry-title {
		font-size: 16px;
	}
	.singular .entry-title {
		font-size: 28px;
	}
	.entry-meta {
		font-size: 14px;
	}
	blockquote {
		margin: 0;
	}
	blockquote.pull {
		font-size: 17px;
	}
	/* Reposition the site title and description slightly */
	#branding hgroup {
		margin: 0 3%;
	}
	/* Make sure the logo and search form don't collide */
	#branding #searchform {
		top: 20px !important;
	}
	/* Floated content doesn't work well at this size */
	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	/* Dasselbe fuer Kaesten, die direkt im Seiteninhalt schweben und dort
	   eine feste Breite tragen - etwa der 400px-Kasten mit den
	   Oeffnungszeiten auf /angebote/bibliothek/, der bei 360px Breite um
	   64px aus dem Bild ragte. Wieder als Regel statt als Eingriff in
	   den Seiteninhalt. */
	.entry-content [style*="float"] {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
	}
	/* Antippflaechen: Die Verweise in den Metazeilen waren nur 14px hoch und
	   standen teils weniger als 8px auseinander. WCAG 2.2 verlangt
	   mindestens 24x24 CSS-Pixel; mit 14px Schrift, anderthalbfacher
	   Zeilenhoehe und 6px Innenabstand kommen wir auf rund 33px.
	   inline-block ist noetig, damit Innenabstand ueberhaupt wirkt. */
	.entry-meta a,
	footer.entry-meta a,
	#breadcrumbs a,
	#site-generator a,
	.widget_links a {
		display: inline-block;
		padding: 6px 3px;
		line-height: 1.5;
	}
	/* Make sure the post-post navigation doesn't collide with anything */
	#nav-single {
		display: block;
		position: static;
	}
	.singular .hentry {
		padding: 1.625em 0 0;
	}
	.singular.page .hentry {
		padding: 1.625em 0 0;
	}
	/* Talking avatars take up too much room at this size */
	.commentlist > li.comment,
	.commentlist > li.pingback {
		margin-left: 0 !important;
	}
	.commentlist .avatar {
		background: transparent;
		display: block;
		padding: 0;
		position: static;
	}
	.commentlist .children .avatar {
		background: none;
		left: 2.2em;
		padding: 0;
		position: absolute;
		top: 2.2em;
	}
	/* Use the available space in the smaller comment form */
	#respond input[type="text"] {
		width: 95%;
	}
	#respond .comment-form-author .required,
	#respond .comment-form-email .required {
		left: 95%;
	}
	#content .gallery-columns-3 .gallery-item {
		width: 31%;
		padding-right: 2%;
	}
	#content .gallery-columns-3 .gallery-item img {
		width: 100%;
		height: auto;
	}
	.entry-header .entry-date {
		float:none;
		margin-bottom: 1em;
	}
	.entry-header .entry-title,
	.entry-header .entry-meta {
		margin-left: 3%;
	}
	
  /* Header auf schmalen Bildschirmen: flacheres Band, kleinere Marke. */
  #branding .banner {
    height: 130px;
  }
  .markenband {
    padding: 12px 24px 10px;
    gap: 12px;
  }
  .markenband .logo {
    width: 52px;
  }
  #site-title {
    font-size: 21px;
  }
}
@media (max-width: 450px) {
	#content .gallery-columns-2 .gallery-item {
		width: 45%;
		padding-right: 4%;
	}
	#content .gallery-columns-2 .gallery-item img {
		width: 100%;
		height: auto;
	}

}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}

}


/* =Beitragskopf auf schmalen Bildschirmen
--------------------------------------------------------------
   Das Kalenderblatt ist ein 80x80-Float, an dem der Titel per
   margin-left: 110px vorbeigefuehrt wird. Bei 375px Fensterbreite bleiben
   dem Titel dadurch nur noch gut 200px - er bricht mehrfach um und reicht
   weit unter das Datum hinaus. Darum wird das Kalenderblatt hier zu einer
   schlichten Datumszeile ueber dem Titel.

   Der Umschaltpunkt liegt bewusst auf denselben 650px wie die vorhandene
   Theme-Regel, die das Datum bereits aus dem Float loest. Sie setzt dabei
   ".entry-header .entry-title { margin-left: 3% }" - das verliert aber gegen
   das spezifischere ".type-post .entry-header .entry-title { margin-left:
   110px }". Der Titel behielt deshalb seinen Einzug, obwohl das Datum nicht
   mehr daneben stand: eine Luecke von rund 110px neben einer Datumszeile.
   Bei abweichenden Umschaltpunkten entstuende genau dieser Zustand erneut. */
@media (max-width: 650px) {
  .entry-header .entry-date {
    float: none;
    font-size: 100%;
    margin-bottom: 4px;
    color: #E55C2E;
  }
  .entry-date time {
    position: static;
    display: block;
    border: 0;
    width: auto;
    height: auto;
  }
  .entry-date span {
    position: static;
    display: inline;
    width: auto;
    text-align: left;
  }
  /* Die Trennzeichen sind im Kalenderblatt ausgeblendet - in der Zeile
     ergeben sie erst "3. August 2026". */
  .entry-date .sep {
    display: inline;
  }
  .entry-date .day {
    top: auto;
    font-size: 100%;
    font-weight: 600;
  }
  .entry-date .month {
    top: auto;
  }
  .entry-date .year {
    top: auto;
    background-color: transparent;
    color: inherit;
    letter-spacing: 0;
    font-weight: 600;
  }
  /* Der Einzug am Kalenderblatt vorbei entfaellt mit diesem. */
  .type-post .entry-header .entry-title,
  .type-post .entry-header .entry-meta {
    margin-left: 0;
  }
}

/* =Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		font-size: 10pt;
	}
	footer.entry-meta a[rel=bookmark]:link:after,
	footer.entry-meta a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	#page {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	#branding {
		border-top: none !important;
		padding: 0;
	}
	#branding hgroup {
		margin: 0;
	}
	#site-title a {
		font-size: 21pt;
	}
	#site-description {
		font-size: 10pt;
	}
	#branding #searchform {
		display: none;
	}
	#branding img {
		display: none;
	}
	#access {
		display: none;
	}
	#main {
		border-top: none;
		box-shadow: none;
	}
	#primary {
		float: left;
		margin: 0;
		width: 100%;
	}
	#content {
		margin: 0;
		width: auto;
	}
	.singular #content {
		margin: 0;
		width: 100%;
	}
	.singular .entry-header .entry-meta {
		position: static;
	}
	.entry-meta .edit-link a {
		display: none;
	}
	#content nav {
		display: none;
	}
	.singular .entry-header,
	.singular .entry-content,
	.singular footer.entry-meta,
	.singular #comments-title {
		margin: 0;
		width: 100%;
	}
	.singular .hentry {
		padding: 0;
	}
	.entry-title,
	.singular .entry-title {
		font-size: 21pt;
	}
	.entry-meta {
		font-size: 10pt;
	}
	.entry-header .comments-link {
		display: none;
	}
	.page-link {
		display: none;
	}
	.singular #author-info {
		background: none;
		border-bottom: none;
		border-top: none;
		margin: 2.2em 0 0;
		padding: 0;
	}
	#respond {
		display: none;
	}
	.widget-area {
		display: none;
	}
	#colophon {
		display: none;
	}

	/* Comments */
	.commentlist > li.comment {
		background: none;
		border: 1px solid #ddd;
		-moz-border-radius: 3px 3px 3px 3px;
		border-radius: 3px 3px 3px 3px;
		margin: 0 auto 1.625em;
		padding: 1.625em;
		position: relative;
		width: auto;
	}
	.commentlist .avatar {
		height: 39px;
		left: 2.2em;
		top: 2.2em;
		width: 39px;
	}
	.commentlist li.comment .comment-meta {
		line-height: 1.625em;
		margin-left: 50px;
	}
	.commentlist li.comment .fn {
		display: block;
	}
	.commentlist li.comment .comment-content {
		margin: 1.625em 0 0;
	}
	.commentlist .comment-edit-link {
		display: none;
	}
	.commentlist > li::before,
	.commentlist > li.bypostauthor::before {
		content: '';
	}
	.commentlist .reply {
		display: none;
	}

	/* Post author highlighting */
	.commentlist > li.bypostauthor {
		color: #444;
	}
	.commentlist > li.bypostauthor .comment-meta {
		color: #666;
	}
	.commentlist > li.bypostauthor:before {
		content: none;
	}

	/* Post Author threaded comments */
	.commentlist .children > li.bypostauthor {
		background: #fff;
		border-color: #ddd;
	}
	.commentlist .children > li.bypostauthor > article,
	.commentlist .children > li.bypostauthor > article .comment-meta {
		color: #666;
	}

}


/* =IE7
----------------------------------------------- */

#ie7 article.intro {
	margin-left: -7.6%;
	margin-right: -7.6%;
	padding-left: -7.6%;
	padding-right: -7.6%;
	max-width: 1000px;
}
#ie7 section.featured-post {
	margin-left: -7.6%;
	margin-right: -7.6%;
	max-width: 850px;
}
#ie7 section.recent-posts {
	margin-right: 7.6%;
}

.tagcloud {
	text-align: center;
}

#neue5 {
    background-color: #ffffff;
    border: solid 2px #e55c2e;
    position: fixed;
    left: -604px;
    top: 240px;
    width: 560px; 
    -webkit-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
    z-index: 10; 
    padding: 20px;
}

#neue5:hover {
    -webkit-transform: translatex(620px);	
    -ms-transform: translatex(620px);	
    transform: translatex(620px);	
}

#neue5 .content {
    width: 700px;
}

#neue5 .tab {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #e55c2e;
    color: #ffffff;
    font-weight: bold;
    width: 250px;
    height: 25px;
    text-align: center;
    padding: auto;
    -webkit-transform-origin: 250px 0px;
    -ms-transform-origin: 250px 0px;
    transform-origin: 250px 0px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


/* Rollo von links */
#rollo {
    background-color: #ffffff;
    border: solid 2px #e55c2e;
    position: fixed;
    left: -604px;
    top: 240px;
    width: 560px; 
    -webkit-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
    z-index: 10; 
    padding: 20px;
}

#rollo:hover {
    -webkit-transform: translatex(610px);	
    -ms-transform: translatex(610px);	
    transform: translatex(610px);	
}

#rollo .content {
    width: 700px;
}

#rollo .tab {
    position: absolute;
    top: -2px;
    right: 0px;
    background-color: #e55c2e;
    color: #ffffff;
    font-weight: bold;
    width: 250px;
    height: 25px;
    text-align: center;
    padding: auto;
    -webkit-transform-origin: 250px 0px;
    -ms-transform-origin: 250px 0px;
    transform-origin: 250px 0px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#rollo p+ul {
    margin-top: -0.5em;
}
#rollo ul {
    list-style: square;
    margin-left: 2em;
}

#rollo a.button {
    border: 1px solid #e55c2e;
    padding: 3px;
    margin-top: 1em;
}

.inlineimg {
    text-align: center;
    clear: both;
}
.inlineimg .wp-caption {
    display: inline-block;
    margin: 1em;
}

.category header.page-header {
    border-bottom: 1px solid #ddd;
    margin-bottom: 2em;
    padding-bottom: 1em;
}

.collapsible:after {
    content: "\271A";
}

.collapsible{
    background-color: #e55c2e;
    border: none;
    padding: 5px 10px;
    width: auto;
    text-align: right;
    font-weight: bold;
    color: white;
    font-size: larger;
    cursor: pointer;
    margin-top: 5px;
}

.collapsible strong {
    display: inline-block;
    float: left;
}

.collapsible-content {
    display: none;
    padding: 0 10px 10px 10px;
}

.formular {
    border: solid black 1px;
    margin-top: 10px;
    padding: 10px;
}

.formular span.wpcf7-list-item {
    display: block;
}

.angela-gallery {
    text-align:center;
}
.angela-gallery li {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.angela-gallery li a {
}
.angela-gallery li a img{
    height: 150px;
    width: auto;
}
.angela-gallery li a div {
}

#pagemenu a {
    font-weight: normal;
}
#pagemenu ul {
    display: none;
}
#pagemenu > ul,
#pagemenu > ul > li > ul,
#pagemenu .current_page_item,
#pagemenu .current_page_item > ul  {
    display: block !important;
}
#pagemenu .current_page_item > a {
    font-weight: bold;
}

.widget-area .rahmen {
border: medium dashed #E55C2E;
padding: 5pt;
}

ul.wp-block-gallery {
    margin: 2.5em 0;
}

h2 + h3 {
    margin-top: -1em;
    margin-bottom: 0.5em;
}

h3 + h2 {
    margin-top: 1em;
}

.wp-block-group {
    padding: 1em;
}

#post-59295 span.wpcf7-list-item {
    display: block; 
}

.category-trauermeldung,
.singular .category-trauermeldung {
    border: medium solid black;
    margin: 1ex -1ex 2em -1ex;
    padding: 1ex 1ex;
}

.category-trauermeldung footer,
.category-trauermeldung header {
    display: none;
}

.category-trauermeldung .sticky-border {
    border: none;
}

.textwidget p {
    margin: 0.25em 0;
}

/* Dies und das */
.maxsize71 {
    max-size: 71%;
}

/* Hinweisleiste. Die drei Szenarien bleiben als Ampel erhalten (gruen fuer
   Normales, orange fuer Wichtiges, rot fuer Dringendes), aber als getoenter
   Hinweis mit farbiger Kante statt als vollflaechig eingefaerbtes Band. */
#newsline {
  text-align: left;
  font-size: 100%;
  /* Ohne seitliche Polsterung: der Hinweis stand 16px weiter innen als
     Ueberschrift, Text und Karten darunter. Diese Verschiebung war der
     Hauptgrund, warum er wie ein Fremdkoerper wirkte. */
  padding: 3px 0;
}
#newsline p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 20px;
  border: 1px solid transparent;
  /* Derselbe Radius wie die Karten der Seitenleiste und der Uebersichten. */
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
}
/* Symbol statt harter Farbkante: die Ampel bleibt ablesbar, die Flaeche
   wird ruhiger und fuegt sich in die Kartensprache der uebrigen Seite. */
#newsline p::before {
  content: "";
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#newsline p a {
  display: flex;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
/* Pfeil am rechten Rand - dieselbe Geste wie in den Schnellzugriff-Zeilen. */
#newsline p a::after {
  content: "\2192";
  margin-left: auto;
  padding-left: 12px;
  opacity: .75;
  transition: transform .15s;
}
#newsline p a:hover::after,
#newsline p a:focus::after {
  transform: translateX(4px);
}
#newsline .szenario-a {
  background-color: #F0F7F0;
  border-color: #D6E7D7;
  color: #1b5e20;
}
#newsline .szenario-a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E"); }
#newsline .szenario-b {
  background-color: #FDF4ED;
  border-color: #F2DCC9;
  color: #9c3d14;
}
#newsline .szenario-b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E55C2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E"); }
#newsline .szenario-c {
  background-color: #FDF1F0;
  border-color: #F3D4D2;
  color: #8e1f1a;
}
#newsline .szenario-c::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21 19H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }

#newsline .failure {
  background-color: white;
  border: 2px solid red;
  color: red;
  font-weight: 500;
  padding: 3px;
}

#newsline .repaired {
  background-color: white;
  border: 2px solid green;
  color: green;
  font-weight: 500;
  padding: 3px;
}

#newsline a {
  color: white;
}

figure.wp-block-pullquote {
  padding: 1em 0;
}

article#post-66640 {
	counter-reset: heading;
}
article#post-66640 h2:before {
	content: counter(heading)". ";
	counter-increment: heading;
}
article#post-66640 h2 {
	counter-reset: subheading;
}
article#post-66640 h3:before {
	content: counter(heading)"." counter(subheading);
	counter-increment: subheading;
}

/* =Seitenleiste
--------------------------------------------------------------
   Drei Gestaltungsregeln, aus denen sich der Rest ergibt:
   - Wenige grosse Karten statt vieler Kaesten. Innerhalb einer Karte
     trennt Abstand, nicht noch eine Linie.
   - Blau fuehrt zur Navigation, Orange kennzeichnet Aktuelles. Orange
     tritt deshalb genau zweimal auf: beim wichtigsten Schnellzugriff
     und beim naechsten Termin.
   - Alle Zeilen folgen demselben Aufbau: Symbol, Bezeichnung, Pfeil.

   Reihenfolge und Titel der Widgets stehen in der Datenbank. */

/* Weisse Karten auf weissem Grund heben sich kaum ab. Ein hell getoenter
   Streifen hinter der Leiste setzt sie vom Artikeltext ab, ohne dass dafuer
   eine weitere Linie noetig waere. Die Karten liegen als weisse Flaechen
   darauf - erst dadurch wirken sie ueberhaupt wie Karten.

   Die Spur ist um die Polsterung breiter (278 statt 250), damit die Karten
   innen unveraendert 250px messen. */
#secondary {
  background: #EBF1FA;
  border: 0;
  border-radius: 18px;
  padding: 14px;
}
#secondary .widget {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(40, 80, 155, 0.05);
  padding: 20px;
  margin-bottom: 16px;
}
/* Die letzte Karte bringt sonst ihren Aussenabstand mit in die Polsterung
   der Spur - unten waeren es 30px statt der 14px an allen anderen Seiten. */
#secondary > :last-child {
  margin-bottom: 0;
}
#secondary .widget-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #28509B;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  text-transform: none;
}

/* ---------- Karten zusammenfassen ----------
   Die Inhalte liegen in mehreren Widgets, sollen aber als eine Karte
   gelesen werden: das erste bekommt den oberen Rand, das letzte den
   unteren, die dazwischen keinen. */
#secondary #custom_html-9,
#secondary #text-12 {
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  margin-bottom: 0;
  padding-bottom: 6px;
}
#secondary #custom_html-10,
#secondary #custom_html-12 {
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: none;
}
#secondary #custom_html-13,
#secondary #text-11 {
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding-top: 0;
  padding-bottom: 18px;
}
#secondary #text-11 {
  padding-top: 14px;
}

/* ---------- Schnellzugriff: vier gleichartige Zeilen ---------- */
#secondary #custom_html-9 a.btn-angela,
#secondary #custom_html-10 a.btn-angela,
#secondary #custom_html-12 a.btn-angela,
#secondary #custom_html-13 a.btn-angela {
  display: flex;
  align-items: center;
  /* Eng gerechnet: "Schulbuchlisten 26/27" braucht bei 14px fett 146px.
     In der 250px-Karte bleiben nach Innenabstand, Symbol, Abstaenden und
     Pfeil 152px - vorher waren es 142 und die Zeile lief 4px ueber. */
  gap: 9px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: #28509B;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 9px 6px;
  text-align: left;
  /* Sicherheitsnetz fuer laengere Beschriftungen: lieber umbrechen als
     ueberlaufen. Bewusst break-word statt anywhere - anywhere setzt die
     Mindestbreite des Flex-Elements auf ein einzelnes Zeichen herab, das
     Element schrumpft dann und bricht um, obwohl der Platz reichen wuerde. */
  white-space: normal;
  overflow-wrap: break-word;
}
#secondary #custom_html-9 a.btn-angela::before,
#secondary #custom_html-10 a.btn-angela::before,
#secondary #custom_html-12 a.btn-angela::before,
#secondary #custom_html-13 a.btn-angela::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#secondary #custom_html-9 a.btn-angela::after,
#secondary #custom_html-10 a.btn-angela::after,
#secondary #custom_html-12 a.btn-angela::after,
#secondary #custom_html-13 a.btn-angela::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .75;
  transition: transform .15s;
}
#secondary #custom_html-9 a.btn-angela:hover,
#secondary #custom_html-10 a.btn-angela:hover,
#secondary #custom_html-12 a.btn-angela:hover,
#secondary #custom_html-13 a.btn-angela:hover {
  background: #f4f7fc;
}
#secondary #custom_html-9 a.btn-angela:hover::after,
#secondary #custom_html-10 a.btn-angela:hover::after,
#secondary #custom_html-12 a.btn-angela:hover::after,
#secondary #custom_html-13 a.btn-angela:hover::after {
  transform: translateX(3px);
}
#secondary #custom_html-10 a.btn-angela::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7a7 7 0 1 0 0 10'/%3E%3Cpath d='M4 11h8M4 14h8'/%3E%3C/svg%3E"); }
#secondary #custom_html-12 a.btn-angela::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); }
#secondary #custom_html-13 a.btn-angela::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E"); }

/* Die einzige zeitkritische Zeile - deshalb orange. */
#secondary #custom_html-9 a.btn-angela {
  background: #fdf0e6;
  color: #9c3d14;
  font-weight: 700;
}
#secondary #custom_html-9 a.btn-angela::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E55C2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
#secondary #custom_html-9 a.btn-angela::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E55C2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
#secondary #custom_html-9 a.btn-angela:hover { background: #fbe5d5; }
#secondary #custom_html-9 a.btn-angela strong { font-weight: 700; }

/* ---------- Symbole der Kartentitel ---------- */
#secondary .widget-title::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-color: #E7EEFA;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}
#secondary #custom_html-9 .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
#secondary #text-12 .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
#secondary #text-3 .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
#secondary .widget_calendar_widget .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E"); }
#secondary .widget_links .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }

/* ---------- Oeffnungszeiten ---------- */
/* "Sekretariat" ist der Widget-Titel des zweiten Blocks und wird hier
   zur Zwischenueberschrift innerhalb derselben Karte. */
#secondary #text-11 .widget-title,
#secondary .zeit-gruppe {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  color: #5b6b85;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
#secondary #text-11 .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); width: 13px; height: 13px; background-color: transparent; border-radius: 0; background-size: contain; }
#secondary .zeit-gruppe::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#secondary #text-12 .textwidget p:not(.zeit-gruppe),
#secondary #text-11 .textwidget p {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 5px;
  color: #3d4657;
  font-size: 12.5px;
  line-height: 1.4;
}
#secondary #text-12 .textwidget p:last-child,
#secondary #text-11 .textwidget p:last-child {
  margin-bottom: 0;
}
#secondary #text-12 .textwidget strong,
#secondary #text-11 .textwidget strong {
  flex: 0 0 5.6em;
  color: #28509B;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kontakt: aufs Noetige reduziert ---------- */
#secondary #text-3 .textwidget p {
  margin: 0 0 7px;
  color: #3d4657;
  font-size: 12.5px;
  line-height: 1.45;
}
#secondary #text-3 .kontakt-tel,
#secondary #text-3 .kontakt-mail {
  display: flex;
  align-items: center;
  gap: 9px;
}
#secondary #text-3 .kontakt-tel::before,
#secondary #text-3 .kontakt-mail::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#secondary #text-3 .kontakt-tel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
#secondary #text-3 .kontakt-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E"); }
#secondary #text-3 a {
  color: #28509B;
  font-weight: 600;
}
/* Fax ist organisatorisch noch vorhanden, aber nachrangig. */
#secondary #text-3 .kontakt-fax {
  margin-bottom: 0;
  color: #97a1b2;
  font-size: 11.5px;
}

/* ---------- Schnelllinks ---------- */
#secondary .widget_links ul,
#secondary .widget_links li {
  margin: 0;
}
#secondary .widget_links li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: #28509B;
  font-size: 13px;
}
#secondary .widget_links img {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
}

/* ---------- Termine ----------
   Der naechste Termin ist orange, die folgenden hellblau; eine Schiene
   verbindet sie. Keine Trennlinien. */
#secondary .widget_calendar_widget .ical_event {
  position: relative;
  margin: 0 0 12px 14px;
  padding: 0;
  border: 0;
}
#secondary .widget_calendar_widget .ical_event::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 10px;
  bottom: -12px;
  width: 2px;
  background: #e8edf5;
}
#secondary .widget_calendar_widget .ical_event::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #96B4DD;
  z-index: 1;
}
#secondary .widget_calendar_widget .ical_event:first-of-type::before {
  background: #E55C2E;
}
#secondary .ical_date {
  color: #78839a;
  font-size: 11px;
  font-weight: 400;
}
#secondary .widget_calendar_widget .ical_event:first-of-type .ical_date {
  color: #E55C2E;
  font-weight: 700;
}
#secondary .ical_summary {
  color: #26303f;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
#secondary .widget_calendar_widget .ical_event:nth-of-type(n+7) {
  display: none;
}
#secondary .widget_calendar_widget .ical_event:nth-of-type(6) {
  margin-bottom: 0;
}
#secondary .widget_calendar_widget .ical_event:nth-of-type(6)::after {
  display: none;
}
#secondary .termine-mehr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: #28509B;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
#secondary .termine-mehr::after {
  content: "\2192";
  transition: transform .15s;
}
#secondary .termine-mehr:hover::after {
  transform: translateX(3px);
}

a.btn-angela {
  background-color: #96b3df;
  border-color: #27509b;
  border-width: 3px;
  border-radius: 10px;
  border-style: solid;
  color: #27509b;
  font-size: 150%;
  font-weight: 500;
  padding: 0.5em;
  text-align: center;
  display: block;
}

a.btn-angela:hover {
  color: white;
}

.vcenter td {
	vertical-align: middle;
}
.pad0 tr {
  padding-right: 0px;
  padding-left: 0px;
 
}
.pad0 td {
  padding-right: 0px;
  padding-left: 0px;
  border: none;
 
}

/* =Beitraege
--------------------------------------------------------------
   Zwei Ansichten aus einem gemeinsamen Satz Regeln:

   - Einzelbeitrag (Variante C): der Titel steht ganz oben und ganz links,
     nichts daneben. Datum und Autor bilden darunter eine gemeinsame
     Herkunftszeile, das Datum sitzt in einer hellblauen Pille. Der Einzug
     von 110px, den das Kalenderblatt gebraucht hat, faellt weg.
   - Startseite (Variante D mit dem Kopf aus C): Bild links, Text rechts.
     Statt gut 21.000px Volltext stehen zehn Beitraege vergleichbar
     untereinander.

   Das Kalenderblatt selbst bleibt unangetastet - es wird nur dort ersetzt,
   wo eine dieser beiden Ansichten greift (Archive, Suche, Kategorieseiten
   behalten es). */

/* ---------- Datum als Pille, gemeinsam fuer beide Ansichten ---------- */
.entry-herkunft,
.karte-herkunft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 11px;
  margin: 0;
}
.entry-herkunft .entry-date,
.karte-herkunft .entry-date {
  float: none;
  margin: 0;
  font-size: 100%;
}
.entry-herkunft .entry-date time,
.karte-herkunft .entry-date time {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 999px;
  background: #EBF1FA;
  padding: 3px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.entry-herkunft .entry-date a,
.karte-herkunft .entry-date a {
  color: #28509B;
  text-decoration: none;
}
.entry-herkunft .entry-date span,
.karte-herkunft .entry-date span {
  position: static;
  display: inline;
  top: auto;
  width: auto;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
}
/* Im Kalenderblatt waren die Trennzeichen ausgeblendet. In der Zeile
   gehoeren sie dazu - sonst liest ein Screenreader "3August2026" und beim
   Kopieren fehlen die Punkte. */
.entry-herkunft .entry-date .sep,
.karte-herkunft .entry-date .sep {
  display: inline;
}
.entry-herkunft .entry-meta,
.karte-herkunft .entry-meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
/* Autorennamen tragen seit jeher das Markenorange - das bleibt so. */
.entry-herkunft .entry-meta a,
.karte-herkunft .entry-meta a {
  color: #E55C2E;
}

/* ---------- Seitentitel ----------
   Seiten wie /menschen/ sind Kapitelueberschriften und standen mit 24px in
   derselben Groesse wie ein Beitragstitel in einer Liste. Seit der Kopfblock
   auf Unterseiten entfaellt, sind sie ausserdem das erste Element der Seite -
   sie duerfen den Anfang deutlicher setzen. */
.type-page .entry-header .entry-title {
  clear: none;
  margin: 0 0 0.7em;
  padding: 0;
  color: #222;
  font-size: 32px;
  font-weight: 700;
  /* Die -1px des Themes ziehen die Buchstaben bei dieser Groesse zusammen. */
  letter-spacing: -0.4px;
  line-height: 1.2;
}

/* ---------- Einzelbeitrag ---------- */
.entry-header.kopf-titel-zuerst .entry-title {
  clear: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
/* Schlaegt den 110px-Einzug des Kalenderblatts. */
.type-post .entry-header.kopf-titel-zuerst .entry-title,
.type-post .entry-header.kopf-titel-zuerst .entry-meta {
  margin-left: 0;
}
.entry-header.kopf-titel-zuerst + .entry-content {
  padding-top: 1.2em;
}

/* ---------- Startseite: Teaser-Karten ----------
   Trennlinie, Aussen- und Innenabstand kommen bereits von .hentry - hier
   wird nur die Aufteilung ergaenzt und die Linie aufgehellt. */
.beitrags-karte {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  border-bottom-color: #e8edf5;
}
.beitrags-karte.ohne-bild {
  grid-template-columns: minmax(0, 1fr);
}
.karte-bild {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #EBF1FA;
  aspect-ratio: 4 / 3;
}
.karte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.beitrags-karte .entry-title {
  clear: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.28;
}
.karte-anriss {
  margin: 10px 0 0;
  color: #3d4657;
  line-height: 1.55;
}
.karte-mehr {
  display: inline-block;
  margin-top: 10px;
  color: #E55C2E;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.karte-mehr:hover,
.karte-mehr:focus {
  text-decoration: underline;
}
.karte-wichtig {
  display: inline-block;
  margin: 0 0 7px;
  border-radius: 999px;
  background: #fdf0e6;
  padding: 2px 9px;
  color: #9c3d14;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Aufmacher: der neueste Beitrag im Volltext ----------
   Der Kopf ist derselbe wie auf der Einzelseite; hier steht nur, was ihn
   von den Karten darunter absetzt. */
.beitrag-aufmacher {
  border-bottom-color: #e8edf5;
  padding-bottom: 2em;
  margin-bottom: 2em;
}
.beitrag-aufmacher .entry-title a {
  color: #222;
}
.beitrag-aufmacher footer.entry-meta {
  margin-top: 1.4em;
  font-size: 13px;
  color: #6b7688;
}

/* Dieselbe Grenze, an der das Theme auch sonst den Beitragskopf aufloest. */
@media (max-width: 650px) {
  .beitrags-karte {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }
  .karte-bild {
    aspect-ratio: 16 / 9;
  }
  .beitrags-karte .entry-title {
    font-size: 20px;
  }
  .entry-header.kopf-titel-zuerst .entry-title {
    font-size: 22px;
  }
}


/* =Aufmacherkopf der Startseite
--------------------------------------------------------------
   Der Entwurf hatte hier ein flaechiges Hintergrundfoto. Es ist bewusst
   nicht umgesetzt: blaue Schrift auf einem Foto ist auch abgeschwaecht ein
   Kontrastrisiko, und der Kopf wuerde optisch schwer. Stattdessen steht der
   Block auf derselben hellen Toenung wie die Seitenleiste und setzt sich
   nach unten durch zwei gezeichnete Wellen von der weissen Seite ab.

   Der Knopf ist blau, nicht orange: Blau fuehrt zur Navigation, Orange
   kennzeichnet Aktuelles - und direkt unter dem Kopf sitzt bereits der
   orange Balken der Neuigkeitenzeile. Zwei orange Handlungsaufforderungen
   uebereinander wuerden beide entwerten.

   Hoehe bewusst gedeckelt: die Startseite ist gerade von 20.967px auf gut
   5.400px geschrumpft, das soll der Kopf nicht wieder aufbrauchen. */
.hero {
  position: relative;
  overflow: hidden;
  /* Oben eckig: der Kopf stoesst direkt an die Menueleiste, eine Rundung
     wuerde dort eine Lucke aufreissen. Unten bleibt sie - dort loest die
     Welle die Kante ohnehin auf. */
  border-radius: 0 0 18px 18px;
  background: #EBF1FA;
}
.hero-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  align-items: center;
  gap: 34px;
  /* Unten Platz fuer die Wellen, damit kein Text darunter geraet. */
  padding: 42px 40px 92px;
}
.hero.ohne-bilder .hero-inhalt {
  grid-template-columns: minmax(0, 1fr);
}
.hero.ohne-bilder .hero-text {
  max-width: 40em;
}
/* Der Textblock ruecht etwas von der Kante ab. Bewusst hier und nicht als
   Polsterung von .hero-inhalt - die wuerde auch die Bildspalte verschmaelern. */
.hero-text {
  padding-left: 34px;
}
/* Der Schulname ist die Hauptueberschrift der Startseite - im Markenband
   darueber steht er nicht mehr.

   Groesser und leichter: Century Gothic und Trebuchet bringen nur Regular
   und Bold mit, ein Gewicht unter 400 gaebe es also gar nicht - 400 ist der
   feinste echte Schnitt. Die Groesse waechst mit dem Fenster, weil "Angela-
   schule" bei fester Groesse zwischen 920 und 1050px Fensterbreite in der
   45%-Spalte umbrechen wuerde. */
.hero-claim {
  margin: 0;
  color: #28509B;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.16;
}
/* Das Motto schliesst unmittelbar an den Namen an und liest sich als dessen
   dritte Zeile. Als eigenes Element, damit die Ueberschrift genau den Namen
   der Schule enthaelt und nicht auch den Zusatz. Orange ist hier eine
   typografische Hervorhebung und keine Schaltflaeche - insofern kein
   Widerspruch zur Farblogik der Seite. */
/* Waechst im selben Verhaeltnis mit wie der Name darueber: dessen Groesse
   liegt zwischen 30 und 50px, das Motto bei 38px Hoechstmass - also 76%.
   Derselbe Faktor auf den mitwachsenden Anteil angewandt (3,4 x 0,76 = 2,6)
   haelt den Groessenunterschied auf jeder Fensterbreite gleich. */
.hero-motto {
  margin: 0 0 26px;
  color: #E55C2E;
  font-size: clamp(23px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.16;
}
.hero-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background: #28509B;
  padding: 12px 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.hero-knopf:hover,
.hero-knopf:focus {
  background: #1D3D78;
  color: #fff;
  text-decoration: none;
}

/* ---------- Die beiden Fotos ----------
   Grosses Bild links oben, kleineres rechts darunter mit weissem Rand - der
   Versatz ist der Rest der Collage aus dem Entwurf. Die Neigung ist mit
   1,5 Grad bewusst klein: der Rest der Seite ist gerade. */
.hero-bilder {
  position: relative;
  aspect-ratio: 3 / 2;
}
.hero-bild {
  position: absolute;
  overflow: hidden;
  /* Beide Bilder tragen denselben Rahmen, denselben Radius und denselben
     Schatten - vorher hatte nur das kleine den weissen Rand. */
  box-sizing: border-box;
  border: 5px solid #fff;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(40, 80, 155, 0.16);
}
/* Muss #branding img schlagen: das setzt fuer alle Bilder im Kopf
   height:auto und einen negativen unteren Aussenabstand - dadurch fuellte
   das Bild seinen Rahmen nicht aus und unten blieb ein breiter Streifen. */
#branding .hero-bild img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.hero-bild-1 {
  left: 0;
  top: 0;
  width: 100%;
  height: 72%;
  transform: rotate(-1.5deg);
}
/* Nicht buendig an die rechte Kante des Fahnenbildes: zwei genau
   uebereinanderliegende Kanten lesen sich als Fehler, nicht als Absicht.
   Und etwas tiefer gesetzt, damit weniger von den Fahnen verdeckt wird. */
.hero-bild-2 {
  right: 5%;
  bottom: -10px;
  /* 46/55 statt 50/60: die Oberkante rueckt dadurch rund 30px tiefer, ohne
     dass die Unterkante den Wellen naeher kommt - so verdeckt das Bild
     weniger von den Fahnen. Das Verhaeltnis bleibt bei 1,25 und damit nah
     an der Bildquelle (1,24), es wird also praktisch nichts abgeschnitten. */
  width: 46%;
  height: 55%;
  transform: rotate(2deg);
}

/* ---------- Die gezeichneten Wellen ----------
   Zwei Lagen: die hintere halbdurchsichtig, die vordere deckend weiss. Als
   data-URI im Stylesheet, damit kein zusaetzlicher Ladevorgang entsteht. */
.hero-wellen {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 74px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C220,96 430,26 700,46 C980,67 1190,94 1440,54 L1440,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C200,74 400,8 640,26 C900,46 1120,80 1440,30 L1440,100 L0,100 Z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom, bottom;
  background-size: 100% 100%, 100% 100%;
}

@media (max-width: 920px) {
  .hero-inhalt {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 32px 24px 84px;
  }
  /* Auf schmalen Bildschirmen ist der Platz zu knapp fuer einen Einzug. */
  .hero-text {
    padding-left: 0;
  }
  /* Auf schmalen Bildschirmen nur noch ein Foto - zwei ueberlappende waeren
     bei dieser Breite beide zu klein, um etwas zu zeigen. Und das eine
     ungeschnitten: im eigenen Seitenverhaeltnis (2,05:1) ist es 33px
     flacher als der 16:10-Ausschnitt und zeigt trotzdem die ganze
     Aufnahme - der Zuschnitt kostete also Hoehe und Bild zugleich. */
  .hero-bilder {
    aspect-ratio: auto;
  }
  .hero-bild-1 {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }
  /* Mit height:auto behaelt das Bild sein eigenes Verhaeltnis; object-fit
     greift dann gar nicht mehr und es wird nichts beschnitten. */
  #branding .hero-bild-1 img {
    height: auto;
  }
  .hero-bild-2 {
    display: none;
  }
}

/* =Fussbereich
--------------------------------------------------------------
   Der Fuss war der letzte Teil der Seite in der alten Formensprache: eine
   halbleere Logoreihe in grauen Kaesten, 10px neben der Seitenkante, und
   sonst nichts. Die Kontaktdaten fehlten ganz - seit die Seitenleiste auf
   Unterseiten entfaellt, stand die Adresse dort nirgends mehr.

   Jetzt drei Spalten: Kontakt, Schnellzugriff, Partner. Die Inhalte der
   ersten beiden liegen als Widgets in der Datenbank und sind damit ohne
   Theme-Aenderung zu pflegen. */
#supplementary {
  box-sizing: border-box;
  /* Dieselbe Kante wie Menue, Kopf und Inhalt: 1228px Spur plus 24px Rand. */
  max-width: 1276px;
  margin: 0 auto;
  border-top: 1px solid #E3E8F0;
  padding: 38px 24px 30px;
  overflow: visible;
}
/* Die Spaltenregeln des Themes arbeiteten mit Floats und Prozentbreiten. */
#supplementary.one,
#supplementary.two,
#supplementary.three {
  display: grid;
  gap: 32px 44px;
}
#supplementary.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Die dritte Spur traegt drei Logos nebeneinander: 3 x 141px plus zwei
   Abstaende sind 467px - bei 1,25fr blieben nur 438 und das dritte Logo
   rutschte in eine zweite Reihe. */
#supplementary.three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
}
#supplementary.two .widget-area,
#supplementary.three .widget-area {
  float: none;
  width: auto;
  margin-right: 0;
}
#colophon .widget-area .widget {
  margin: 0;
}
#colophon .widget-title {
  margin: 0 0 12px;
  color: #28509B;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
#colophon .widget p {
  margin: 0 0 8px;
  color: #3d4657;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- Kontakt ---------- */
#colophon .fuss-anschrift,
#colophon .fuss-tel,
#colophon .fuss-mail {
  display: flex;
  gap: 9px;
}
#colophon .fuss-anschrift::before,
#colophon .fuss-tel::before,
#colophon .fuss-mail::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#colophon .fuss-anschrift::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
#colophon .fuss-tel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
#colophon .fuss-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E"); }
#colophon .fuss-tel a,
#colophon .fuss-mail a {
  color: #28509B;
  font-weight: 600;
}

/* ---------- Schnellzugriff ---------- */
#colophon .fuss-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
#colophon .fuss-links li {
  margin: 0;
}
#colophon .fuss-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: #28509B;
  font-size: 13.5px;
}
#colophon .fuss-links a::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328509B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .7;
  transition: transform .15s;
}
#colophon .fuss-links a:hover::before {
  transform: translateX(2px);
}

/* ---------- Partner und Auszeichnungen ----------
   Die grauen 2px-Kaesten entfallen; die Logos bringen ihren eigenen weissen
   Grund mit. Und sie werden nicht mehr hochgerechnet: die kleinste Datei hat
   150px, breiter darf deshalb keines dargestellt werden. */
#colophon .gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 22px;
  margin: 0;
}
#colophon .gallery .gallery-item {
  float: none;
  width: auto;
  max-width: 150px;
  margin: 0;
  text-align: left;
}
#colophon .gallery .gallery-icon {
  margin: 0;
}
#colophon .gallery img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
}
#colophon .gallery .wp-caption-text,
#colophon .gallery .gallery-caption {
  margin: 7px 0 0;
  color: #6b7688;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
}

/* ---------- Rechtszeile ---------- */
#site-generator {
  box-sizing: border-box;
  max-width: 1276px;
  margin: 0 auto;
  background: none;
  border-top: 1px solid #EEF2F8;
  padding: 18px 24px 26px;
  color: #6b7688;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
#site-generator a {
  color: #28509B;
  font-weight: 600;
}

@media (max-width: 880px) {
  #supplementary.two,
  #supplementary.three {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  #supplementary {
    padding: 30px 24px 24px;
  }
}