@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 200;
	src: local(''),	url('../fonts/libre-franklin-v7-latin-200.woff2') format('woff2'), url('../fonts/libre-franklin-v7-latin-200.woff') format('woff');
	font-display: fallback;
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 300;
	src: local(''), url('../fonts/libre-franklin-v7-latin-300.woff2') format('woff2'), url('../fonts/libre-franklin-v7-latin-300.woff') format('woff');
	font-display: fallback;
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('../fonts/libre-franklin-v7-latin-regular.woff2') format('woff2'), url('../fonts/libre-franklin-v7-latin-regular.woff') format('woff'); 
	font-display: fallback;
}

@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-sans-v39-latin-300.woff2') format('woff2')
}
@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-v39-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/noto-sans-v39-latin-800.woff2') format('woff2');
}

/* FARBWERTE ab 1.6.2025

Gelb    #FFFF00
Schwarz #25211E
Weiß    #FFFFFF
Grau von Dunkel nach Hell
#544F4F
#7A7575
#B0ACAB
#D7D2D1
#F1EEED z.B. index Blöcke
*/

html,body,form,fieldset,p,div,h1,.farbe,li,nav,#p1,ues,ueb,ueblog,pblog { -webkit-text-size-adjust:none; }

body { width:100%; margin:0px; background-color:#FFFFFF; text-align:left; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; 
       background-image: url('https://www.schwaebisch-schwaetza.de/bilder/hintergrund.jpg'); background-repeat: repeat; background-attachment: fixed; background-position:center 50%;}

/* Überschrift in anderer Schriftart */
h1,#head1,#head2 { font-family: 'Noto Sans', sans-serif; }
h1				 { font-weight:600; font-size:calc(18px + (26 - 18) * ((100vw - 320px) / (1600 - 320))); color:#25211E; padding:0px; margin-bottom:20px; }

/* Alle anderen Schriftelemente */
p,pklein,prot,gsmall,small,smalldetail,.farbe,ul,li,ues,ueb,ueblog,pblog,#verblinks,#verbrechts,.blog,table { font-family: 'Libre Franklin',sans-serif; }
input,textarea,select,option,.submenu1 a,.submenu2 a,.has-dropdown a,#kopfbutt,#kopfbutt1 { font-family: 'Libre Franklin',sans-serif; }

p,#verblinks,#verbrechts,li,.blog,table,.binokel { font-weight:500; font-size:calc(15px + (17 - 15) * ((100vw - 320px) / (1600 - 320))); color:#25211E; line-height:150%; margin-top:0px; margin-bottom:0px; letter-spacing:0.04em; word-spacing: 0.10em;}


/* Anzeige der Ableitung im Lexikon */
pklein { font-weight:300; font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); color:#25211E; line-height:140%; margin-top:0px; margin-bottom:0px; }

prot   { display:block; font-weight:400;  font-size:calc(12px + (15 - 12) * ((100vw - 320px) / (1600 - 320))); margin-bottom:10px; color:#25211E; line-height:150%; margin-top:0px; }
gsmall { font-weight:300; font-size:calc(10px + (12 - 10) * ((100vw - 320px) / (1600 - 320))); color:#25211E; line-height:130%; margin-top:0px; margin-bottom:0px; }
ueb    { font-weight:600; font-size:calc(15px + (20 - 15) * ((100vw - 320px) / (1600 - 320))); color:#25211E; display:block; padding-bottom:10px; } 
ues    { font-weight:600; font-size:calc(15px + (19 - 15) * ((100vw - 320px) / (1600 - 320))); color:#25211E; }
b      { font-weight:600; }
small,smalldetail { font-weight:300; font-size:calc(13px + (15 - 13) * ((100vw - 320px) / (1600 - 320))); color:#25211E; line-height:130%; margin-top:0px; margin-bottom:0px; }

/* Neues Menusystem */

/* Menu-Oberauswahl */
.has-dropdown a  { font-weight:600; font-size:calc(14px + (17 - 14) * ((100vw - 320px) / (1600 - 320))); color:#25211E; margin:0px; }
/* Menu-Unterpunkte */
.submenu1 a      { font-weight:500; font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); color:#25211E; margin:0px; }
.submenu2 a      { font-weight:500; font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); color:#25211E; margin:0px; }

.navbar 	 { background: #FFFF00; padding:0.5rem; display:flex; justify-content:space-evenly; flex-wrap:wrap; margin: 0px auto }
#menu-toggle { display: none; }
.menu-icon   { display: none; font-size: 2.5rem; cursor:pointer; }
.menu ul     { list-style: none; display:flex; gap:0.5rem; margin:0; padding:0; }
.menu li     { position: relative; }
.menu a      { text-decoration: none; color:#25211E; padding:0.25rem; display:block; }

.submenu1 { position:absolute; top:100%; left:-80px; opacity:0; transition:opacity 0.5s; background: #FFFFFF; border-radius:5px; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3); z-index: 10; grid-template-columns: repeat(1, minmax(250px, 1fr)); display: none; }
.submenu1 li { display: none; }
.has-dropdown:hover .submenu1    { display: grid; opacity:1; }
.has-dropdown:hover .submenu1 li { display: grid; }

.submenu2 { position: absolute; top:100%; left:0; opacity:0; transition:opacity 0.5s; background: #FFFFFF; border-radius:5px; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3); z-index: 10; grid-template-columns: repeat(2, minmax(300px, 1fr)); display: none; }
.submenu2 li { display: none; }
.has-dropdown:hover .submenu2    { display: grid; opacity:1; }
.has-dropdown:hover .submenu2 li { display: grid; }

/* Neue Blogverwaltung! */
.blog     { float:left; text-align:center; width:calc((100% - 85px) / 2); line-height:15px; margin-bottom:10px; margin-right:10px; padding:8px; background:#FFFFFF; border:1px solid #3468A3; border-radius:5px; } 

/* Bloganzeige! */
#blogbox  { clear:both; box-shadow: 3px 5px 7px 3px silver; border-radius: 20px; float:left; width:100%; background-color:#FFFFFF; margin-top:20px; margin-bottom:20px; padding-bottom:10px; }
#blog1    { clear:both; float:left;  width:(100%-90px); margin-left:10px; margin-bottom:0px; margin-right:15px; margin-top:5px; } 
#blog2    { float:right; text-align:right; width:85px; }
ueblog    { font-weight:400; font-size:calc(16px + (19 - 16) * ((100vw - 320px) / (1600 - 320))); color:#25211E; display:block; padding-bottom:10px; } 
pblog     { font-weight:300; font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); color:#25211E; margin-top:0px; margin-bottom:0px; }

/* Tabs über Blog */
.tab-content { margin-left:0px; margin-top:20px; }
.tabs 		 { margin-left:0px; }
.tabs input[type=radio] { position: absolute; opacity:0; }
.tabs label  { display: inline-block; padding:8px; margin:10px; background:#FFFFFF; border:1px solid #25211E; border-radius:4px; pointer; }
.tabs label:hover { background-color: #e0e0e0; }
.tabs label:focus { outline: 2px solid #a0a0a0; }
.tabs [class*="tab-content"] { display: none; }
.tabs #tab1:checked  ~ #t1 { background-color:#EEEEEE; }
.tabs #tab2:checked  ~ #t2 { background-color:#EEEEEE; }
.tabs #tab1:checked ~ #tab-content1, .tabs #tab2:checked ~ #tab-content2 { display: block; }

/* Formatierung von Links */
a:link    { color:#25211E; text-decoration:none; }
a:hover   { color:#25211E; text-decoration:none; background-color:#FFFF00; }
a:active  { color:#25211E; text-decoration:underline; }
a:visited { color:#25211E; text-decoration:none; }

smalldetail       { font-size:0.9em; border-bottom: 1px dotted #3468A3; }
smalldetail:hover { color:#25211E; text-decoration:none; background-color:#FFFF00; }

li { line-height:155%; list-style-type: none; }
td { vertical-align: top; }

/* Eingabefelder */
input,textarea,select,option { cursor:pointer; font-weight:300; font-size:calc(15px + (17 - 15) * ((100vw - 320px) / (1600 - 320))); border:1px solid #E0E0E0; padding:4px; margin:0px; border-radius:7px; }
textarea,input[type=text],input[type=tel],input[type=email],input[type=number],input[type=submit],input[type=search] { box-sizing: border-box; width: 100%; }

input[type=checkbox], input[type=radio] { z-index:0; transform: scale(1.4); accent-color:#25211E; }
input[type=radio]::before { transform: scale(0); transition: 200ms transform ease-in-out; }
input[type=radio]:checked::before { transform: scale(1.4); }
label { font-weight:300; font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320))); color:#25211E; line-height:140%; margin-top:0px; margin-bottom:0px; }


/* Alle Suchbuttons */
input[type=submit] { font-weight:600; color:#25211E; background:#FFFF00; margin-top:5px; cursor:pointer; }

/* Auswertung der Testformulare */
.infobox { padding: 10px; border: 1px dotted #3468A3; font-weight:200; margin-top:0; margin-bottom:0; background-color:#E0E0E0; border-radius:10px; }
.barhoriz  { text-align:left; margin: 2px; width: 70%; height:24px; border: 1px solid #ddd; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden; background: #fff; }
.hprogress { text-align:left; height: 22px; -webkit-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; padding: 1px 0 0 4px; color: #fff; }
.bargreen  { background:#5fd35f; }

/* Buttons im Seitenkopf */
#kopfuhr:hover   { background:#FFFF00; }
#kopfuhr         { color:#000000; border:1px solid #B0ACAB; border-radius:3px; padding:4px 5px 4px 5px; cursor:pointer; }
#kopfbutt, #kopfbutt1,#kopfbutt2 { color:#FFFFFF; background:#000000; font-weight:600; border-radius:3px; margin-left:3px; font-size:calc(14px + (15 - 14) * ((100vw - 320px) / (1600 - 320))); padding:4px 5px 4px 5px; cursor:pointer; }
#kopfbutt:hover  { background:#FFFF00; color:#000000; }
#kopfbutt1:hover { background:#FFFF00; color:#000000; }

/* Wird bei hervorgehobenen Texten benutzt ! */
#texte 			{ width:90%; margin-top:15px; margin-bottom:15px; padding:30px; border-radius:5px; box-shadow: 3px 3px 3px #999999; background-color:#FAFAFA; }

/* Wird bei Vorselect benutzt ! */
#lextreffer 	{ white-space: nowrap; line-height:300%; text-align:left; margin-top:0px; margin-right:3px; margin-bottom:0px; padding:5px; border-radius:3px; box-shadow: 1px 1px 1px #999999; background-color:#FAFAFA; }

.farbe   		{ font-weight:300; color:#4F4F4F; padding: 8px; background-color:#F2F2F2; margin-top:0; margin-bottom:0; }
.rand td 		{ border-bottom-style: dotted; border-bottom-color: #E0E0E0; border-bottom-width: 1px; border-left-width: 0px; border-top-width: 0px; border-right-width: 0px; }

/* Umrandungen von Tests, Blog etc. */
.rahmen  		{ padding: 5px; border: 1px solid #E0E0E0; }

/* Anzeige Buttons */
.buttonrahmen		{ white-space: nowrap; font-weight:600; line-height:60px; margin-right:5px; padding:12px; background:#EEEEEE; border:1px solid #B0ACAB; border-radius:0px; } 
.buttonrahmen1		{ white-space: nowrap; font-weight:600; line-height:60px; margin-right:5px; padding:12px; background:#FFFF00; border:1px solid #B0ACAB; border-radius:0px; } 
.buttonrahmen1:link { color:#25211E; } 

/* Alle Buttons von Binokel und Küchenleiste */
.binokel       { float:left; text-align:center; width:calc((100% - 85px) / 3); line-height:15px; margin-bottom:10px; margin-right:10px; padding:8px; background:#FFFFFF; border:1px solid #544F4F; border-radius:5px; } 
.binokelbild   { width:60%; height: auto; }

.linie         { border:none; border-top: 1px dotted #6E0027; background-color:#FFFFFF; height: 1px; width: 50%; } 
.strich        { clear:both; border:none; padding-top:2px; border-bottom: 1px dotted #3468A3; background-color:#FFFFFF; height:1px; width: 100%; } 
.gestrn,.gestr { font-weight:300; border-bottom: 1px dotted #3468A3; }

/* Der selbstgestrickte Audioplayer */
.player        { color:#3468A3; margin:auto; width:280px; padding:3px; background: #F2F2F2; border: 1px dotted #3468A3; text-align:center; } 

/* Ausertung der Testseitenr */
.richtig       { font-size:17px; color:#009933; } 
.falsch        { font-size:17px; color:#FF3300; } 

/* Der gelbe Seitenkopf */
#headblock     { background:#FFFF00; width:100%; }
#head1         { font-size:calc(30px + (30 - 30) * ((100vw - 320px) / (1600 - 320))); font-weight:800; padding: 20px 30px 20px 30px; background:#FFFF00; }
#head2         { font-size:calc(18px + (20 - 18) * ((100vw - 320px) / (1600 - 320))); font-weight:600; padding: 0px 0px 20px 0px; margin-top: -50px; text-align:right;  }
/* Uhr und Schnell-Links */
#kopf          { margin: 20px 0px 10px 0px; } 
#kopf1         { display:inline; width:100%; }

/* Der überall verwendete Inhaltsbereich */
#pagekopf      { width:1300px; margin: 0px auto; }
#pagewrap      { width:1000px; margin: 0px auto; }
#inhalt_lex    { width: 100%; padding-top:5px; min-height:calc(100vh - 320px); }

/* Derzeit nur bei audio.php verwendet */
#inhalt_breit  { width: 96%; float:left; }

/* Kacheln auf index.php */
#flex-container { clear:both; justify-content:space-between; width:100%; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.kachel 		{ display: -webkit-flex; display: -ms-flexbox; display: flex; width:calc((100% - 70px) / 2); padding:15px; margin-bottom:10px; background: #F1EEED; }
.kachel:hover   { color:#25211E; text-decoration:none; border: 1px solid #FFFF00; background:#FFFFFF; }

/* Formatierung der Lexikonausgabe */
#verblinks    { float:left;  font-size:0.9em; width:46%; padding:5px; margin-bottom:5px; background-color:#F2F2F2; clear:both; }
#verbrechts   { float:right; font-size:0.9em; width:46%; padding:5px; margin-bottom:5px; background-color:#F2F2F2; }

#lexikonw { clear:both; float:left; width:100%; background-color:#FFFFFF; margin-bottom:10px; padding-bottom:10px; }
#lexikonf { clear:both; float:left; width:100%; background-color:#F6F6F6; margin-bottom:10px; padding-bottom:10px; }

#lexikon0 { float:left; padding:7px 5px 13px 50px; width:80%; }
#lexikon1 { float:left; padding:7px 5px 3px 0px; width:36px; }
#lexikon2 { float:left; padding:7px 7px 3px 0px; width:43%; }
#lexikon3 { float:left; padding:7px 7px 3px 0px; width:43%; }
#lexikon5 { clear:both; float:left; width:90%; margin-left:43px; margin-bottom:0px; margin-top:5px; }

#viertel { float:left; width:22%; margin-bottom: 5px; }
#halb    { float:left; width:46%; margin: 2px; }

/* Formatierung Fußleiste */
#fuss 	 { clear:both; display:block; width:100%; padding-top:20px; bottom: 0; }
#fuss1	 { background-color:#FFFF00; height:110px; text-align:center; padding-top:25px; }

@media only screen and (max-width:1024px)
{
	#pagewrap,#pagekopf { width: 95%; }
	#kopfuhr     { display: none; }	
	#head2       { margin-top:-25px; }
}

@media only screen and (max-width: 1024px) and (orientation: portrait)
{
	#pagewrap,#pagekopf { width: 95%; }
	#inhalt_lex   { width: 98%; float:left; padding-top:0px; }
	#head1        { padding: 30px 30px 30px 0px; }
	#head2        { padding: 0px 20px 0px 0px; }
}

@media only screen and (max-width:770px)
{
	#inhalt_lex { width: 98%; margin-left:5px; float:left; padding-top:0px; }
	#kopfbutt1  { display:none; }
	#lexikon0   { float:left; padding:7px 5px 15px 15px; width:85%; }
	#lexikon1   { float:left;  padding-right:0px; padding-top:2px; width:50px; }
	#lexikon2   { float:right; padding-right:0px; padding-top:2px; padding-left:0px; padding-bottom:2px; width:calc(100% - 50px); }
	#lexikon3   { display:block; margin-left:0px; margin-bottom:5px; padding-right:0px; padding-top:2px; padding-left:0px; padding-bottom:2px; float:right; width:calc(100% - 50px); }
	#lexikon5   { display:block; margin-left:0px; margin-bottom:5px; padding-right:0px; padding-top:2px; padding-left:0px; padding-bottom:2px; float:right; width:calc(100% - 50px); }
	#lextreffer { line-height:210%; padding:3px; }
	#kopf       { margin-top:80px; margin-bottom:10px; margin-left:0px; } 

	/* Neues Menusystem */
	.navbar    { display:flex; justify-content:start; flex-wrap:wrap; width:100%; float:right; }
	.menu ul   { flex-direction:column; display: none; width:100%; }
	.menu-icon { display:block; margin-left:20px; margin-right:20px; }
	.submenu1  { min-width:350px; left:0px; position:static; box-shadow:none; padding-left: 1rem; grid-template-columns: 1fr; }
	.submenu2  { min-width:350px; position:static; box-shadow:none; padding-left: 1rem; grid-template-columns: 1fr; }
	#menu-toggle:checked + .menu-icon + .menu ul { display: flex; }
}

@media only screen and (max-width: 480px)
{
	#texte      { width:82%; }
	.kachel 	{ width: 100%; }
	.submenu1   { min-width:250px; position:static; box-shadow:none; padding-left: 1rem; grid-template-columns: 1fr; }
	.submenu2   { min-width:250px; position:static; box-shadow:none; padding-left: 1rem; grid-template-columns: 1fr; }

@media only screen and (max-width: 330px)
{
	.buttonrahmen  { line-height:40px; margin-right:3px; padding-top:4px; padding-bottom:4px; } 
	.buttonrahmen1 { line-height:40px; margin-right:3px; padding:4px; } 
}