@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
}
body.wide {
	grid-template-columns:1fr 4fr;	
	grid-template-rows:auto 1fr 100px;
	padding:1ex;
}
body.wide main section {
	column-count:2;
	column-rule:medium dotted gold;
}
body.wide main section h2, main section table, main section iframe, main section object, main section#impressum *, main section#angebote * {
	column-span:all;
}
body.wide main section#angebote > ul {
	display:grid;
	gap:2em;
	grid-template-columns:repeat(4,1fr);
}
			
body {
	font-family:"Fira Sans",Arial,sans-serif;
	background:#bfb2aa;
	color:#000;
	margin:3.5em auto 0 auto;
	hyphens:auto;
	hyphenate-limit-chars: 6 3 3;
}

header nav { 
	top:1em; 
	left:0;
}
header nav.wide { 
	top:0; 
	left:0; 
	right:0;
	max-width:100%;
}

header, footer {
	background:#b0aca1 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCACAAHwDASIAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAAAAMEAgUGAQj/xAA/EAACAgECAwEKDAUFAQAAAAABAgADEQQhBRIxMhMUQVFhcXKRscEGIiMzNEJSgZKy0dJDU2KToRVUc6Lhgv/EABkBAQADAQEAAAAAAAAAAAAAAAACAwQBBf/EACcRAAICAgEDAwUBAQAAAAAAAAABAgMREiEEEzEiMkEUYXGh8BVS/9oADAMBAAIRAxEAPwD6piIgCIiAIiIAkdtyVNWrsAXPKPVn3SRiFUliABuSfBOf1/HUGpqGnTuiVtzFjtzbEbeuV22KC5ZdTTK14ijoIlfRaynWVc9DZ8anqvnliTTUllFUouLwxEROnBERAEREAREQBERAEREA03Fku1bvSdRXTSpA5fC22d5r/wDRFyB32hJ8QH6zacSe1bVFdpRX1C1nlG+So3z7pBqLdSLdKDeR3SvI5RgA5HXffr5J59kU5Ns9Kqc4xSg8f34INPwq7S3LZRqSrDwhRj7/AI03+mc26euxsZZQdpqlt1B4u9Jv3V1A+L8XBUt0z5AOs2ei+h0Z/lr7Jd06w2kUdTKUknN5fH7JoiJqMgiIgCIiAIiIAiIgCIiAazVKlrsHFilbhYCvXIAA8BkbVJY1Tlrs1LyrgeD8M2dQHPbsO17hNfr+KLp7iiDJGxwnMfaMTHOOPVJmuuUpPWKCVqNb3zm0uSCQQQDgED6niJl3QNnSVjHZHJ6tvdGi1A1NPOBuDg+rPvnuj+ab/kf85ltccPOfJXY21hrxgmiIl5QIiIAiIgCIiAIPSJX4jb3DQ32ZwQhx5/BOSeE2ditmkiapuepHIxzKDMpwJvtIANrkD+ozHnf7TeuYvrPsen/mv/r9HeVdu30vcJQ4pVqrLQdMwXs5LKSPD5DI+A6mlOGVi26tXy2QzgHrNh35psZ74px6Yl/psgsvBjalVY8LOCSgEVjOepxkY2ztMNPha23x8d+vpGed+aX/AHFP4xOQ4mrWcQ1D1qWQuSCoyDI2WqtLHJOjp3c2nwdrzr9oeuRpaHvdAVIVVO3jJP6The42fy3/AAmbr4Md0q1llboyq6Z3GM4P/shDqXOSWC63olXByUsnSxETYecIiIAiIgCQ60Z0d4P2G9kmkWr+i3eg3skZeGSh7kRPVXSpZ3sx6bfrPKe43bJZYTjO1hP+cyD4QqDwu1t8rjGDjqQJD8Hhz01u5JZawoOT9pv/ACZ3hWKCRoUM0uxv5wXU0wZnBtuGDgfKN4h5ZmNKo/i3Hz2GSVdu30vcJQ1GoZX12dWKjWByKQv2Qc7jfeTahFZaIR3m8Jl06cH+JaP/AKleqpWpd3tsAVnHXwBiPdLdBLUVljlioJPlxIdOgfTOrjINln5zOuEfhEVJpcsq02U2WFRbcMNjcqRnxbbjrLQqCaysjJ+TYZPnWc/8HvjuEckp3VTjO3Yf9BOkb6VX6De1ZXT6o7YL+oh256fYliImoxiIiAIiIAkWr+i3eg3sksh1qC3TlD0YqP8AIkZe1koe5DWadNXpnpsLBWxkr12OZhodGmjr5K2dlxgc2PGT75EdAudgD5wv7YGhXG6p6l/bKuXLbXktz6dduC1V27fS9wkkoDRo7OAqDBx2U32H9M8HDKs7qn9tP2zqnLHCIuMflmwkOl+ab03/ADGVhwykfUr/ALaftnmn0NTISFrGGZfml8BI8XknN5Z9p3WGPJ7pOGafSOGqZ8g5wSDk4I95losO+UAI7De1ZB3gg6CoeL5JYr0oq1FT/F2yMBAPBOLaPCjhHZNTe0pZZciImgoEREAREQBI7/mx6S/mEkkWq2qHpp+YSMvDJR8oocT4mukx1JJIAXGTjrknoPB08Ey0+u5jliCpyQQ4ZSBud8AggHOCJpvhPWleurFaKoNeTyjGTkzP4Pqr8iuoZTd0Iz9Rpidk+7rk9H6evsKw6EOKhqXfsq2f+omq1PFlGrNJOSDuxsKKp8Wwyfvm2rRWNysoZecbEbdBOK1wC63UAAACxgAPPJXzlFLBDpKoWyakdbodWbG5LDg5xgsCQcZGCOoI6HyTyzVLptMxZsDmsYnqQA56eXJAkPBVBBJVciurBxv2ZFxVEPBtQ5VS4sbDEbj5QySlLt7fkr0i7NfjKItPxY3BmUMCu5Asy+B1OCOU+YTb12i3uZBUkMQSvTp19WD985DhQzrkHTKuP+pnWaVQtGk5VAyozgf0yFE5S8lnV1QreIluIibjzxERAEREASDWsFoBPQOn5hJ5HfULq+Qsy7ggrjIIII6+aRksppEotKSyc7x+qzV61G01dlgWsA4U7bme8Grs0tlQvqtT5UnsE5+Iwm4fh6WvzXWNa2MZdEOB+GeDhtSsGrY1uDkMiID+WZezLfc3fUx7fa+P7+8EleprD3bW9r+U3iHknL6nQ6m/U3W1UWMjOxBxjbM6hdIyknvrUbnJ7P6TEcPqH1iT4yiEn7+WdsqlZhMhTfGltxKfCrO9y63V3K3JWMCtm6DHgB8Ux11gu4TfVWtnO1hxzVlR85nqRgS+NCqsWW61ScA8pC59Q8sd4Jy8puvIzzYL53zn2zvbnrqR7sN9/wAfo5rSaK+i9bLFTlAIOLU8II8c6HTWg16FcODgblSB2D4ZZXTKB23Pq/SY06Oup0YNa3J2Q1hIG2Ok5XTKD4O3dQreZeSxERNZjEREA//Z) repeat-x content-box;
	color:inherit;
}

h1, h2, section#angebote h3, section#angebote h4, figcaption {
	font-family:Calibri,sans-serif;
	font-weight:bold;
	font-style:italic;
	color:#6c0000;
	background-color:unset;
}

a.norman {
	font-style:normal;
}

h1 img {
	float:right;
	animation:einblenden 3s;
}

h1 a img {
	width:5em;
}

@keyframes einblenden {
  0% {
    transform:scale(0.1);
    opacity:.1;
  }  
  100% {
    transform:scale(1);
    opacity:1;	
  }
}

/* Farben */
header nav *,
header nav a { 
	background-color:#bbb;; 
	color:black;
}

/* Skip-Link */
#skip-link { 
	position:absolute; 
	left:0; top:0; background:black; 
	color:white; padding:0.25em; 
	transform:translateY(-100%);
	transition:0.2s transform; 
	z-index:1001; 
} 
#skip-link:focus { 
	transform:translateY(0); 
}			

/* Für Assistive Technologien */
.visually-hidden {
	position:absolute !important; 
	clip-path:inset(1px 1px 1px 1px) !important; 
	padding:0 !important; 
	border:0 !important; 
	height:1px !important; 
	width:1px !important; 
	overflow:hidden !important; 
	white-space:nowrap !important; 
}

/* Positionierung */
/* Bei Browsern, die Details/Summary unterstützen, und bei eingeschaltetem Javascript wird die Navigation absolut positioniert. Die Klasse withjs wird vom Sript gesetzt. */
@supports (width:max-content) { 
/* Nicht für IE und MS-Edge, indirekter Test auf Details/Summary */
	header nav, header nav ul { 
		position:absolute; 
	}
}

header nav.withjs, header nav.withjs ul { 
	position:absolute; 
}

/* Regeln für schmale und breite Displays */
header nav ul { 
	margin:0;
	padding-top:.2em; 
	padding-left:1em; 
	padding-right:1em; 
}
header nav > details { 
	padding:.2em; 
}
header nav > details > ul { 
	margin-left:-.5em; 
	margin-top:.3em; 
}
header nav ul ul { 
	margin-left:calc(100% - 1.2em);
	margin-top:-3.1em; 
	padding-left:.1em; 
}
header nav li a, header nav li span, header nav li summary { 
	display:inline-block; 
	padding:.5em; 
	margin:.3em; 
	line-height:1.4em; 
	max-height:1.4em; 
}

header nav li summary a { 
	margin:0;
	padding:0;
}

header nav li { 
	padding:0em; 
	white-space:nowrap; 
	vertical-align:middle; 
}

/* Anpassungen an breite Displays. Die Klasse wide wird vom Script gesetzt, wenn der Platz reicht. */
header nav.wide > details { 
	padding:0; 
} 

header nav.wide > details > ul { 
	display:flex;
	flex-wrap:wrap; 
	width:100%; 
	box-sizing:border-box; 
}

header nav.wide ul { 
	margin:0; 
	padding-top:.2em; 
	padding-left:0; 
	padding-right:0; 
}

header nav.wide ul ul { 
	margin-left:-.5em; 
	margin-top:-.1em; 
	padding-left:.5em; 
	padding-right:.5em; 
}

header nav.wide ul ul ul { 
	margin-left:calc(100% - 1.2em); 
	margin-top:-3.1em; 
	padding-left:.1em; 
}

/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
header nav summary { 
	list-style-type: none;
}

header nav:not(.wide) summary { 
	max-width:20ex;
	overflow:hidden visible;
}

header nav *::before,
header nav *::after { 
	font-family:arial_unicode_ms,sans-serif; 
	vertical-align:top; 
	display:inline-block;
}

header nav details *::after {
	text-align:end;
	width:1.5em;
}

header nav details *::before {
	text-align:center;
	width:1.2em;
}
header nav ul details:not([open]) > summary::after { 
	content:'►'; 
}
header nav ul details[open] > summary::after { 
	content:'◄'; 
}
header nav > details:not([open]) > summary::before { 
	content:'☰';
} 
header nav > details[open] > summary::before { 
	content:'×';
} 
header nav.wide details[open] details:not([open]) summary::after { 
	content:'▼'; 
}
header nav.wide details[open] details[open] summary::after { 
	content:'▲'; 
}
header nav.wide details[open] details[open] details:not([open]) summary::after { 
	content:'►'; 
}
header nav.wide details[open] details[open] details[open] summary::after { 
	content:'◄'; 
}
html.no-details header nav ul summary::before { /* Für Details-Polyfill */
	content:''; width:0; 
} 

/* Link zur aktuellen Seite */
header nav li[aria-current] a[tabindex]::before { 
	content:'►';
	text-align:start;
}
header nav.withjs > details > ul > li[aria-current] > details > summary,
header nav.withjs > details > ul > li[aria-current] > details > ul > li[aria-current] > details > summary,
header nav.wide > details > ul > li[aria-current] > details > summary,
header nav.wide > details > ul > li[aria-current],
header nav li[aria-current] > a, header nav li[aria-current] > span { 
	background-color:#aaa; 	
	color:inherit;
}

/* Rahmen etc. */
header nav summary { 
	cursor:pointer; 
}
header nav ul { 
	list-style-type:none; 
	border-radius:.5em; 
}
header nav.wide ul ul { 
	border-radius:0 0 .5em .5em;
}
header nav > details { 
	border:thin solid black; 
	border-radius:.2em; 
}
header nav.wide > details { 
	border:none; 
	border-radius:0; 
} 
header nav.wide > details > ul { 
	border-radius:0; 
}
header nav li a { 
	text-decoration:none; 
}
header nav li a,
header nav li summary { 
	outline:none; 
}
header nav li a:focus,
header nav li summary:focus { 
	outline:thin solid #5050ff; 
}
header nav li a:focus-visible, 
header nav li summary:focus-visible { 
	outline:thin solid #5050ff; 
}
header nav li a:focus:not(:focus-visible), 
header nav li summary:focus:not(:focus-visible) { 
	outline:none; 
}

header nav img {
	width:3ex;
}

main img {
	float:right;
	border:1px inset green;
	border-radius:2ex;
}

main img:not([width]) {
	width:256px;
}

header h1::after, main p::after, main li::after, main section::after, main figure::after { 
	content:""; 
	display:block; 
	clear:both; 
}

header, main, article, section, aside, footer, figure {
	border-radius:0.5em 0.5em;
	border:1px solid;
	padding:1ex;
	margin:0;
}

main a, main span.ebrief, footer a {
	color:#00e;
	background-color:inherit;
	text-decoration:inherit;
	display:inline-block;
}

main a:hover, aside.news a:hover, footer a:hover, nav a:hover, nav summary:hover {
	color:#000;
	background-color:inherit;
	outline:3px inset black;
}	

a[rel="external"]::before, *.external::before {
	content:'🌏';
	font-size:60%;
}

a[type="application/pdf"]:after, a[type$=".pdf"]:after {
	content:url(data:image/gif;base64,R0lGODlhEAAQALMAAAAAAP////8xAN7e3sbGxrW1tYSEhAgICP///wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAgALAAAAAAQABAAAAROEElAqwUyg8E7PwJ2jQMYAkKqqtvhHui6bt1I1tnhFYU3YBJdh2DwARFCTsHQwwU9BqLnmCT0lrwClUPMLg2G4wbr41C/ZXMOnFYHbZcIADs=);
}

a[download]:before {
	content:'⬇️ ';
}

h2 a,h3 a,h4 a, figcaption a {
	float:right;
}

footer p a:last-of-type, footer aside a {
	float:right;
	margin:0 0 1ex;
}

section#angebote ul li span {
	font-size:smaller;
}

section#angebote ul li span::before {
	content:"\A";
	white-space:pre;
}

section#angebote ul ul {
	padding-left:1ex;
}

iframe, object {
	width:100%;
	max-width: 64em;
	min-height:32em;
}

section h2 + * {
	margin-top:0;
}

button.teaser {
	color:blue;
	background-color:gold;
}

button.teaser::before {
	content:"Weniger ";
}

section.kurz button.teaser::before {
	content:"Alles ";
}

section.kurz h2 + *::after {
	content:"…";
}

section.kurz *:not(h2, h2 *, h2 + *, button.teaser) {
	display:none;
}

ul.termine li, section.teaser div p, div.flyer {
	display:inline-block;
	padding:1em;
	box-shadow:1ex 1ex 1ex 1ex #aa8;;
}

body.wide section.teaser div {
	width:30em;
}

time {
	font:larger monospace;
}

time::before {
	content:'📅';font-size:50%;
}

em.alle{
  text-transform:uppercase; 
}

q {
	quotes:"«" "»" "„" "”";
	font-style:italic;
}

q cite {
	font-size:smaller;
}

q cite::before {
	content:" (";
}

q cite::after {
	content:")";
}

section:not([id*="impressum"]) address {
	display:inline-block;
	border:thick #be8 ridge;
	border-radius:.5em;
	padding:0 1em;
	margin-left:3em;
}

dialog[open], button[popovertarget] {
	display:block;
}

figure {
	display:inline-block;
}

::backdrop {
	backdrop-filter:blur(3px);
}

.gedicht {
	text-align:center;
}
aside.news {
	padding:0;
}

aside.news * {
	display:inline-block;
	padding-left:1em;
	margin:0;
}

blockquote, q, cite { color:#000; background:url(bilder/papier.jpg) #fff; }
blockquote#visitationsprotokoll { background-image:url(bilder/protokoll.jpeg); }
blockquote, p#losung q { display:block; margin:0.5em; padding:0.8em; border-radius:1ex; }
blockquote[title]:after, blockquote[cite]:after, blockquote .quelle { font-size:80%; color:#888; background: none transparent; display:block; text-align:left; margin-top:1ex; }
blockquote[title]:after { content:attr(title); }
blockquote[cite]:after { content:"Quelle: 🌏"attr(cite); }
blockquote * { background:transparent; color:inherit; }
blockquote div { display:inline; }
q, cite { quotes:'\ab' '\bb'; letter-spacing:0.1em; font-style:normal; }
#losung blockquote p {font-size:x-large;}