/* ====== allgemein ======  */


/* breite der gesamtkonstruktion  */
/* war vorher fest auf 1040px - dadurch musste auf schmalen (mobilen)
   Bildschirmen immer horizontal gescrollt/gezoomt werden. Jetzt schrumpft
   die Seite bis 1040px mit, ohne je breiter zu werden als der Bildschirm. */
#breite {max-width:1040px; width:100%; box-sizing:border-box}

/* Bilder duerfen nie breiter sein als ihr umgebender Bereich - verhindert
   horizontales Scrollen bei Bildern mit fest gesetzter Pixelbreite
   (z.B. width="1000" auf katzkarte.html). */
/* (nur im Inhaltsbereich - in der Navigation wuerde es das Home-Symbol
   verkleinern) */
#inhalt img {max-width:100%; height:auto}

/* breite der linken spalte in pixel */
.breite_hauptspalte_li {width:1px;margin:0px;padding:0px}

body
{margin-top: 30px; margin-left: 0px; margin-right: 0px;margin-bottom: 30px;        background-color: #f2f2f2;
}

/* ¸berschriften */
h2{ color:#979696;
margin-bottom:25px;letter-spacing:2px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size: 21px;
font-variant:normal;font-weight:normal
}

/* Tabellenschrift */
td{ color:#979696;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size: 10pt;
font-variant:normal;font-weight:normal
}

p{ color:#979696;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size: 10pt;
font-variant:normal;font-weight:normal
}


/* rahmen um die seite */

.haupt {background-color:#fff;
border:solid 18px #fff;
}


#foto_imtext1 {float:center;
width:360px;
background-color:#fff;
padding:4px;
border:solid 1px #3A4152;
margin-bottom:30px;
}

.info1 {float:center;
border:solid 1px #c1c1c1;
background-color:#fff;
padding:4px;margin-left:10px;margin-top:0px;
margin-bottom:50px;margin-right:0px;

}

.info1_inhalt {float:center;background-color:#c1c1c1;
padding:15px;
text-align:left;
color:#dc8b8a;
background-image:url(images/fv8.jpg);
background-repeat:no-repeat;
background-position: 50% 0%;
}


/* homepagename */
#name {
letter-spacing:3px;
color:#fff;
padding-left:0px;
font-family:  tahoma, verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size:38px;
font-variant:normal;
font-weight:normal;
}

.ecke_ob_re{
background-color:#e0e0e0;
color:#fff;
height:41px;
background-image:url(images/ecke_ob_re.jpg);
background-repeat:no-repeat;
background-position:100% 0%;

}

.ecke_ob_re_2{
background-color:#aaaaaa;
color:#fff;
height:41px;
background-image:url(images/ecke_ob_re_2.jpg);
background-repeat:no-repeat;
background-position:100% 0%;

}

.ecke_ob_li{
background-color:#aaaaaa;
color:#fff;
height:41px;
background-image:url(images/ecke_ob_li.jpg);
background-repeat:no-repeat;
background-position:0% 0%;
border-bottom: solid 0px #fff;
}



.ecke_un_li{
background-color:#aaaaaa;
color:#fff;
height:41px;
background-image:url(images/ecke_un_li.jpg);
background-repeat:no-repeat;
background-position:0% 100%;
}

.ecke_un_re{
background-color:#e0e0e0;
height:1px;
background-image:url(images/ecke_un_re.jpg);
background-repeat:no-repeat;
background-position:100% 100%;
}


/* ====== men¸ oben und hpname ======  */



#top2a {height:41px;
background-color:#aaaaaa;
text-align:center;
vertical-align:middle;

}

#top2b {height:40px;
background-color:#aaaaaa;
background-image:url(images/fv2.jpg);
background-repeat:repeat-y;
background-position:100% 50%;
text-align:center;
vertical-align:middle;
border-left: solid 1px #fff;
}




/* ====== kopf und mittelteil ====== */


#logo {
background-color:#e74247;
background-image:url(images/fv2_logo.jpg);
background-repeat:repeat-y;
background-position:100% 50%;
height:165px;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
text-align:center;
vertical-align:middle;
}



#seitentitel {
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size:13px;
height:40px;
color:#fff;
text-align:left;
vertical-align:middle;
padding-left:10px;
background-color:#aaaaaa;
background-image:url(images/fv2.jpg);
background-repeat:repeat-y;
background-position:100% 50%;
border-left: solid 1px #fff;
}

#leiste {
color:#7f7f7f;
text-align:center;
vertical-align:top;
text-align:center;
}


#menubox {
height:160px;
background-color:#c1c1c1;
color:#fff;
text-align:right;
vertical-align:top;
padding:0px;
width: 12px;
border-bottom: solid 0px #fff;
background-image:url(images/fv3.jpg);
background-repeat:repeat-x;
background-position:  50% 0%;
}

#menubox2 {
height:160px;
background-color:#c1c1c1;
text-align:left;
vertical-align:top;

}


/* ====== boxen ======  */

h3.boxheader {color:#fff;background:transparent;
font-size: 14px;line-height: 18px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
padding-left:0px;
margin-bottom:20px;
margin-top:0px;
}


.box1{
padding-left:20px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
font-size: 14px;line-height: 16px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
background-color:#c1c1c1;
color:#fff;
text-align:right;
height:180px;
border-bottom:solid 1px #fff;
background-image:url(images/fv4.jpg);
background-repeat:repeat-x;
background-position:  50% 100%;
}

.box2{
padding-left:20px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
font-size: 14px;line-height: 16px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
background-color:#fcfcfd;
color:#fff;
text-align:center;
height:180px;
border-bottom:solid 1px #fff;
background-image:url(images/fv4.jpg);
background-repeat:repeat-x;
background-position:  50% 100%;
}

.boxtrenner{
padding-left:20px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
font-size: 13px;line-height: 16px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
background-color:#c1c1c1;
background-image:url(images/fv2.jpg);
background-repeat:repeat-y;
background-position:  50% 50%;
color:#fff;
vertical-align:top;
text-align:left;
height:10px;
border-bottom:solid 1px #fff;
}


/* ====== inhaltsbereich ====== */

#inhalt {height:1650px;background-image:url(images/fv1.jpg);
background-repeat:repeat-x;
background-position:  0% 0%;
background-color:#fff;
text-align:left;
vertical-align:top;
padding-top: 50px; padding-bottom: 30px;
padding-left: 30px;padding-right:30px;
letter-spacing:0px;
width:100%;
color:#979696;
font-size: 15px;line-height: 22px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
border-left: solid 1px #fff;
}


/* ====== fussbereich ======  */


#fuss {font-size: 15px;line-height: 20px;
color:#fff;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
text-align:center;
vertical-align:middle;
width:100%;
}





#fuss2 {font-size: 15px;line-height: 20px;
height:40px;
font-family: verdana,arial,helvetica, tahoma, sans-serif;
color:#fff;
width:100%;
background-color:#fff;
border-top:solid 1px #fff;
border-bottom:solid 1px #fff;
letter-spacing:-1px;
background-image:url(images/fv1fuss.jpg);
background-repeat:repeat-x;
background-position:  50% 100%;
}




#fuss3 {font-size: 13px;line-height: 20px;
color:#fff;
width:100%;
background-color:#c1c1c1;
height:40px;
background-image:url(images/fv2.jpg);
background-repeat:repeat-y;
background-position:  100% 0%;
}

/* ====== karten ======  */
#map { display:block;
margin-left:auto;
margin-right: auto;
margin-top:10px;
height:300px;
width:100%; 
	background-color:#000;}
	
#map2 { display:block;
margin-left:auto;
margin-right: auto;
margin-top:10px;
height:300px;
width:100%; 
	background-color:#000;}
	
#map3 { display:block;
margin-left:auto;
margin-right: auto;
margin-top:10px;
height:300px;
width:100%; 
	background-color:#fff;}	
	
	/* ====== myButton ======  */
.myButton {
	background-color:#e74248;
	border:12px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
	font-size:14px;
	padding:16px 31px;
	text-decoration:none;
}
.myButton:hover {
	background-color:#fb9a99;
}
.myButton:active {
	position:relative;
	top:1px;
}


.btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0);
	background-color:#ffffff;
	border:1px solid #e74248;
	display:inline-block;
	cursor:pointer;
	color:#e74248;
	font-family:tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
	font-size:14px;
	padding:6px 12px;
	text-decoration:none;
}
.btn:hover {
	
	color:#fb9a99;
	border:1px solid #fb9a99;
	
}
.btn:active {
	position:relative;
	top:1px;
}


/* =====================================================================
   ====== mobile Endgeraete (Smartphones, bis 700px Breite) ======
   Die Seite ist ein klassisches Tabellen-Layout. Die folgenden Regeln
   greifen nur auf schmalen Bildschirmen und veraendern das Desktop-Layout
   nicht. Farben und Schrift bleiben die der Seite (Rot #e74247,
   Grau #c1c1c1, Rosa #fb9194, Tahoma).
   ===================================================================== */
@media screen and (max-width: 700px) {

	html {-webkit-text-size-adjust:100%; text-size-adjust:100%}
	body {margin:0; background-color:#f2f2f2}

	/* Geruest: randlos ueber die volle Breite. table-layout:fixed ist
	   noetig, weil HTML-Tabellen sonst breiter werden duerfen als der
	   Bildschirm, sobald irgendein Inhalt (z.B. eine Ergebnistabelle)
	   breit ist. */
	#breite, table.wj-skeleton {table-layout:fixed; width:100%}
	.haupt {border:0}

	/* ---------- Navigation ---------- */
	#top2b {height:auto; border-left:0; background:#c1c1c1}
	#top2b table#menu1 {display:block; width:100%; float:none; overflow:hidden;
		background-image:none !important}
	#top2b table#menu1 tbody {display:block}
	#top2b table#menu1 tr {display:flex; flex-wrap:wrap; margin:0 -1px -1px 0}
	#menu1 td {display:block; flex:1 1 auto; padding:0;
		border-right:1px solid #fff; border-bottom:1px solid #fff}
	#menu1 td:first-child {flex:0 0 auto}
	/* das jiddische Zitat (letzte Zelle) bekommt eine eigene Zeile */
	#menu1 td:last-child {flex:1 1 100%; padding:10px 16px 11px; border-right:0;
		background:#fff; font-size:13px; line-height:1.55}
	#menu1 a, #menu1 a:visited, #menu1 a:active {
		height:46px; line-height:46px; padding:0 14px;
		font-size:14px; letter-spacing:1px; border-right:0;
		-webkit-tap-highlight-color:rgba(255,255,255,.3)}
	#menu1 a:hover {background:#d6d6d6; color:#fff}
	#menu1 td:first-child a {padding:0 16px}
	#menu1 td:first-child img {width:26px; height:26px; vertical-align:middle; margin-top:-3px}

	/* ---------- Seitenkopf ---------- */
	#logo {height:auto; padding:26px 20px 24px; border-left:0; border-top:0;
		background-image:none}
	#name {display:block; font-size:23px; line-height:1.25; letter-spacing:1.5px; padding:0}
	#name br {display:none}
	#name font {display:block; margin-top:6px; font-size:16px; letter-spacing:1px}

	/* ---------- Inhalt ---------- */
	/* min-height: kurze Seiten (z.B. Kontakt) fuellen trotzdem den Bildschirm */
	#inhalt {height:auto; min-height:60vh; padding:28px 20px 32px; border-left:0;
		font-size:16px; line-height:1.6; color:#6f6e6e;
		overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
	#inhalt h2 {font-size:21px; line-height:1.3; letter-spacing:1px; margin:0 0 20px}
	#inhalt h2 p {margin:10px 0 0; font-size:15px; line-height:1.5; letter-spacing:0}
	#inhalt h3 {font-size:17px; line-height:1.35; color:#6f6e6e; margin:28px 0 12px}
	#inhalt h4 {font-size:16px; line-height:1.4; color:#6f6e6e; margin:28px 0 10px}
	/* Startseite: dort sind die h4 eigentlich Fliesstext */
	#inhalt table.wj-imgrow ~ h4 {font-weight:normal; line-height:1.65; margin:0 0 18px}
	#inhalt p, #inhalt td {font-size:15px; line-height:1.6; color:#6f6e6e}
	#inhalt p {margin:0 0 14px}
	/* Blocksatz erzeugt auf schmalen Spalten grosse Luecken */
	#inhalt p[align="justify"] {text-align:left}
	#inhalt a:link, #inhalt a:visited {font-size:inherit; line-height:inherit}
	#inhalt hr {border:0; border-top:1px solid #e3e3e3; margin:28px 0}
	/* Abstandshalter, die auf dem Desktop zum Zentrieren dienen */
	#inhalt span[style*="padding-left"] {display:none}
	#inhalt > br {display:none}

	/* Logos (DWJ/KWJ) als Kacheln */
	table.wj-imgrow, table.wj-imgrow tbody, table.wj-imgrow tr {display:block; width:100%}
	table.wj-imgrow {margin:0 0 30px}
	table.wj-imgrow td {display:block; width:auto; padding:0; margin:0 0 14px}
	table.wj-imgrow td:last-child {margin-bottom:0}
	#inhalt table.wj-imgrow p {margin:0; padding:0; border:0}
	table.wj-imgrow a {display:block; padding:22px 26px; background:#fff;
		border:1px solid #e8e8e8; border-radius:12px;
		box-shadow:0 1px 4px rgba(0,0,0,.06)}
	table.wj-imgrow a:active {background:#fafafa}
	#inhalt picture img {display:block; width:100%; margin:0 auto}
	/* Einzel-Logo auf dwj.html / maps.html */
	#inhalt > p > picture img, #inhalt > picture img {width:78%; margin:4px auto 24px}

	/* "gefoerdert durch die DFG" */
	#inhalt p[align="right"] {text-align:center; font-size:13px; margin-top:26px;
		padding-top:22px; border-top:1px solid #eee}
	#inhalt img[src$="DFG.jpg"] {display:block; width:62%; max-width:260px; margin:6px auto 0}

	/* Kartenliste (maps.html) als gut antippbare Liste */
	#inhalt p:has(> a[href^="karte-"]) {margin:0; padding:12px 0;
		border-bottom:1px solid #eee; font-size:12px; letter-spacing:.5px;
		text-transform:uppercase; color:#aaa; line-height:1.4}
	#inhalt p > a[href^="karte-"] {display:block; margin-top:3px;
		font-size:16px !important; line-height:1.4; text-transform:none;
		letter-spacing:0; text-decoration:none}

	/* ---------- Formulare (Quell- und Phaenomensuche) ---------- */
	#inhalt form p {margin:0 0 18px}
	#suche-form p {display:flex; flex-wrap:wrap; align-items:center; gap:0 8px}
	#suche-form p > span {order:-1; flex:0 0 100%; margin-bottom:6px;
		font-size:14px !important; font-weight:bold; color:#6f6e6e}
	#suche-form p > span a {font-weight:normal; margin-left:6px; font-size:13px}
	#suche-form p > input, #suche-form p > select {flex:1 1 100%}
	#suche-form p > label {flex:1 1 100%; margin-top:8px}
	#suche-form p > br {display:none}
	#inhalt input[type="text"], #inhalt select {
		width:100%; box-sizing:border-box; min-height:44px;
		padding:8px 12px; font-size:16px; font-family:inherit; color:#444;
		background:#fff; border:1px solid #c9c9c9; border-radius:8px}
	#inhalt input[type="text"]:focus, #inhalt select:focus {
		outline:none; border-color:#e74247; box-shadow:0 0 0 3px rgba(231,66,71,.18)}
	#lexem-form p {font-size:15px}
	#lexem-form input[type="text"] {margin:8px 0 10px}
	#inhalt label {display:inline-flex; align-items:center; gap:8px;
		min-height:32px; font-size:15px; line-height:1.4}
	#inhalt label span {font-size:14px !important}
	#inhalt input[type="checkbox"] {width:20px; height:20px; margin:0;
		flex:0 0 auto; accent-color:#e74247}
	#merkmal-checkboxes h4 {margin:22px 0 8px; font-weight:bold; font-size:15px}
	#merkmal-checkboxes label {display:flex !important; align-items:flex-start;
		padding:9px 0; border-bottom:1px solid #f0f0f0}
	#merkmal-checkboxes label input[type="checkbox"] {margin-top:1px}
	#inhalt input[type="submit"], #inhalt button {
		-webkit-appearance:none; appearance:none; cursor:pointer;
		min-height:46px; padding:0 28px; border:0; border-radius:8px;
		background:#e74247; color:#fff; font-size:16px; font-family:inherit;
		letter-spacing:1px}
	#inhalt input[type="submit"]:active, #inhalt button:active {background:#c9353a}

	/* ---------- Suchergebnisse ---------- */
	/* Die breiten Ergebnistabellen werden auf dem Handy zu Karten: jede
	   Zeile ein Kaestchen, jede Spalte mit ihrem Namen darueber (data-label,
	   wird in js/search.js gesetzt). Die Kopfzeile bleibt als Reihe von
	   Sortier-Knoepfen erhalten. */
	#suche-ergebnis h2, #beleg-ergebnis h2 {margin-top:34px}
	table.wj-ergebnis-tabelle, table.wj-ergebnis-tabelle tbody,
	table.wj-ergebnis-tabelle thead {display:block; width:100%; border-spacing:0}
	table.wj-ergebnis-tabelle tr {display:block; margin:0 0 12px; padding:10px 16px 14px;
		background:#fff; border:1px solid #e8e8e8; border-radius:12px;
		box-shadow:0 1px 4px rgba(0,0,0,.05)}
	table.wj-ergebnis-tabelle td {display:block; width:auto !important; padding:0;
		font-size:14px; line-height:1.5; color:#555}
	table.wj-ergebnis-tabelle td[data-label]::before {content:attr(data-label);
		display:block; margin-top:8px; font-size:11px; letter-spacing:.6px;
		text-transform:uppercase; color:#aaa}
	table.wj-ergebnis-tabelle td:empty {display:none}
	#suche-ergebnis table.wj-ergebnis-tabelle td:nth-child(2) {font-size:15px; color:#333}
	/* Kopfzeile -> Sortier-Knoepfe */
	table.wj-ergebnis-tabelle tr.wj-kopf {display:flex; flex-wrap:wrap; gap:8px;
		padding:0; margin:0 0 16px; background:none; border:0; box-shadow:none}
	#inhalt table.wj-ergebnis-tabelle tr.wj-kopf td {padding:5px 12px; cursor:pointer;
		border:1px solid #e74247; border-radius:16px; font-size:13px; line-height:1.4; color:#e74247}
	table.wj-ergebnis-tabelle tr.wj-kopf td * {padding:0 !important; font-weight:normal !important}
	/* Phaenomensuche: auf dem Handy direkt den vollstaendigen Text zeigen
	   statt der Kurzfassung mit Hover-Einblendung */
	#inhalt #matchbox a.mb, #inhalt #matchbox a.mb:hover {display:block; color:#555;
		text-decoration:none; background:none; cursor:default}
	#inhalt #matchbox a.mb span.eins, #inhalt #matchbox a.mb:hover span.eins {display:none}
	#inhalt #matchbox a.mb span.zwei, #inhalt #matchbox a.mb:hover span.zwei {
		display:block; position:static; max-width:none; padding:0;
		background:none; color:#555}
	#inhalt button {margin-top:4px}

	/* ---------- Fusszeile ---------- */
	#fuss2 {height:20px}
	#fuss3 {height:auto; padding:16px 20px; font-size:13px; line-height:1.5}
	#fuss3 b:first-child, #fuss3 b:last-child {display:none}
	#fuss3 b:nth-of-type(2) {display:block; height:0; overflow:hidden}
}


/* ====== Tablets / schmale Fenster (701 bis 1000px) ======
   Das Desktop-Layout bleibt, nur die Kopfzeile bricht um (sonst wird das
   jiddische Zitat in eine sehr schmale Spalte gequetscht) und breite
   Ergebnistabellen scrollen in ihrem eigenen Bereich. */
@media screen and (min-width: 701px) and (max-width: 1000px) {
	body {margin-top:0; margin-bottom:0}
	.haupt {border-width:12px}
	#breite, table.wj-skeleton {table-layout:fixed; width:100%}
	#top2b {height:auto}
	#top2b table#menu1 {display:block; width:100%; float:none}
	#top2b table#menu1 tbody {display:block}
	#top2b table#menu1 tr {display:flex; flex-wrap:wrap}
	#menu1 td:last-child {flex:1 1 100%; padding:8px 12px 9px; border-top:1px solid #fff}
	#inhalt {height:auto; min-height:700px}
	#suche-ergebnis, #beleg-ergebnis {overflow-x:auto; -webkit-overflow-scrolling:touch}
}