/*
1) Webfonts: Lora selbst gehostet
--------------------------------------------------
Annahme:
- styles.css liegt im Projekt-Root
- Schriftdateien liegen in ./fonts/
- fonts/Lora-Regular.woff2
- fonts/Lora-Bold.woff2
*/
/* Lora Regular (400) */
@font-face {
font-family: 'Lora';
src: url('fonts/Lora-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap; /* Erst Fallback-Schrift anzeigen, dann auf Lora tauschen */
}
/* Lora Bold (700) */
@font-face {
font-family: 'Lora';
src: url('fonts/Lora-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/*
2) Globale Basis-Styles
--------------------------------------------------
- Setzt Box-Modell, Grundschriftart und Hintergrundfarbe.
*/
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
/* Lora als Hauptschriftart, mit Serif-Fallbacks */
font-family: 'Lora', Georgia, 'Times New Roman', serif;
/*
Fluid Typography:
clamp(MIN, PREFERED, MAX)
→ mind. 16px, skaliert leicht mit der Viewport-Breite, max. ca. 18px
*/
font-size: clamp(16px, 1.6vw, 18px);
line-height: 1.6;
color: #222222; /* angenehmes Dunkelgrau statt hartem Schwarz */
background-color: #f5f5f5;
}
.page-container {
max-width: 800px; /* maximale Breite der Textspalte */
margin: 0 auto; /* horizontal zentrieren */
padding: 40px 20px; /* oben/unten, links/rechts */
background-color: #ffffff;
}
@media (max-width: 600px) {
.page-container {
padding: 24px 16px; /* etwas kompaktere Ränder auf kleinen Screens */
}
}
p {
margin-top: 0;
margin-bottom: 16px;
}
div#RahmenGesamt {
margin: 0;
padding:0;
width: 100%;
height: 100%;
}
div#MenueHintergrund {
margin: 0;
padding:0;
width: 100%;
height: 100%;
}
.HeadLogoImg {
display:none;
}
.HeadContent {
display:none;
}
.MainMenue {
display:none;
position: relative;
left: ;
top: ;
font-family:Arial Black;font-size:20px;font-weight:normal;font-style:normal;text-decoration:none;letter-spacing:0.0em;
}
.MainMenueNormal a {color:#333333;text-decoration:none;}
.MainMenueHigh a {color:#004f94;text-decoration:none;}
.SubMenue {
display:none;
position: relative;
left: ;
top:;
font-family:Arial Black;font-size:14px;font-weight:normal;font-style:normal;text-decoration:none;letter-spacing:0.0em;
}
.SubMenueDot {font-family:Arial Black;font-size:14px;font-weight:normal;font-style:normal;text-decoration:none;letter-spacing:0.0em;color:#004f94;}
.SubMenueNormal a {color:#333333;text-decoration:none;}
.SubMenueHigh a {color:#004f94;text-decoration:none;}
div#Quickmenue {
position: relative;
left:0px;
top:0px;
padding-bottom:20px;
font-size:1.5em;
}
.QuickmenueText, a.QuickmenueText, a.QuickmenueText:visited, a.QuickmenueText:hover {
text-decoration:none;
}
div#ContentNavbar {
display:none;
}
div#ContentLeft {
display:none;
}
div#ContentMain {
top:0px;
left:0px;
width: 100%;
height: 100%;
}
div#ContentRight {
display:none;
}
div#ContentFooter {
position: relative;
width:100%;
padding-top:30px;
}
.MenueMainOn {
position: static;
height: 1.5em;
vertical-align: middle;
color: #004f94;
font-weight: bold;
padding-left: 1.3em;
line-height: 1.5em;
background-image: url(../img_files/layout/icon-link-extern.gif);
background-repeat: no-repeat;
background-position: left;
}
.MenueMainOff {
position: static;
height: 1.5em;
vertical-align: middle;
padding-left: 1.3em;
line-height: 1.5em;
background-image: url(../img_files/layout/icon-link.gif);
background-repeat: no-repeat;
background-position: left;
}
.MenueMainOnLink {
font-size:1.2em;
font-weight:bold;
color:#004f94;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
}
.MenueMainOffLink {
font-size:1.2em;
font-weight:normal;
color:#000000;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
}
.MenueSubOn {
position: static;
height: 1.2em;
line-height: 1.2em;
padding-left: 1.5em;
vertical-align: middle;
color: #004f94;
font-weight: bold;
}
.MenueSubOff {
position: static;
height: 1.2em;
line-height: 1.2em;
padding-left: 1.5em;
vertical-align: middle;
}
.MenueSubOnLink {
font-size:0.9em;
font-weight:bold;
color:#004f94;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
}
.MenueSubOffLink {
font-size:0.9em;
font-weight:normal;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
}
.KastenBlau {
background-color:#004f94;
color:#ffffff;
padding:12px;
}
.KastenBlau a {color:#ffffff;text-decoration:underline;}
.KastenGrau {
background-color:#cccccc;
color:#000000;
padding:12px;
}
.KastenGrau a {color:#004f94;text-decoration:underline;}
.KastenSchwarz {
background-color:#333333;
color:#ffffff;
padding:12px;
}
.KastenSchwarz a {color:#ffffff;text-decoration:underline;}
h1 {
font-weight: 700;
font-size: clamp(28px, 4vw, 36px);
line-height: 1.2;
letter-spacing: -0.03em; /* ca. -3 % engerer Abstand */
margin-top: 0;
margin-bottom: 20px;
}
h2 {
font-weight: 700;
font-size: clamp(24px, 4vw, 32px);
line-height: 1.2;
letter-spacing: -0.03em; /* ca. -3 % engerer Abstand */
margin-top: 0;
margin-bottom: 20px;
}
h3 {
font-weight: 700;
font-size: clamp(20px, 4vw, 28px);
line-height: 1.2;
letter-spacing: -0.03em; /* ca. -3 % engerer Abstand */
margin-top: 0;
margin-bottom: 20px;
}
sup {font-size:0.7em; vertical-align: 0.3em;}
sub {font-size:0.7em;}
li {padding-bottom:0.3em;}
a {color:#004f94;text-decoration:underline;}
a.link-icon {
padding-left: 1.3em;
line-height: 1.5em;
background-image: url(../img_files/layout/icon-link.gif);
background-repeat: no-repeat;
background-position: left;
}
a.link-icon-extern {
padding-left: 1.3em;
line-height: 1.5em;
background-image: url(../img_files/layout/icon-link-extern.gif);
background-repeat: no-repeat;
background-position: left;
}
/* CSS Info-Box */
/* */
.infobox {color:#000000;}
.infobox a {text-decoration:none;color:#000000;border-bottom:1px dotted black;}
.infobox a:hover {width:200px;color:#000000;}
.infobox a span {display:none;}
.infobox a:hover span {
position:absolute;
left:50px;
display:block;
width:200px;
padding:2px;
border:1px solid black;
color:#000000;
font-size:0.8em;
background-color:#ffffcc;
}
/* */
.infoboxclick {color:#000000;}
.infoboxclick a {text-decoration:none;color:#000000;border-bottom:1px dotted black;}
.infoboxclick a:active {width:400px;color:#000000;}
.infoboxclick a span {display:none;}
.infoboxclick a:active span {
position:absolute;
display:block;
width:400px;
padding:5px;
border:1px solid black;
color:#000000;
font-size:1.0em;
background-color:#ffffcc;
}
/* Inhaltsverzeichnis */
.toc {
margin:0px;padding:0.5em 0.5em 0.5em 0.5em;border-width:1px;border-style:solid;border-color:#aaaaaa;font-size:0.9em;
}
.toc ul {list-style:none;padding:0.0em;margin:0.0em;}
.toc1 {padding-left:0.0em;}
.toc2 {padding-left:0.5em;}
.toc3 {padding-left:1.0em;}
.toc4 {padding-left:1.5em;}
.toc5 {padding-left:2.0em;}
.toc6 {padding-left:2.5em;}
/* Grafik-Einbindung */
.imgborder {margin:5px;padding:3px;border-width:1px;border-style:solid;border-color:#aaaaaa;font-size:0.8em;}
.imgborderleft {margin:5px;padding:3px;border-width:1px;border-style:solid;border-color:#aaaaaa;font-size:0.8em;float:left;}
.imgborderright {margin:5px;padding:3px;border-width:1px;border-style:solid;border-color:#aaaaaa;font-size:0.8em;float:right;}
.imgdef {margin:2px 2px 2px 2px;padding:0px;font-size:0.8em;}
.imgleft {margin:2px 6px 2px 2px;padding:0px;font-size:0.8em;float:left;}
.imgright {margin:6px 2px 2px 2px;padding:0px;font-size:0.8em;float:right;}
/* Standard-Tabelle fuer Wiki-Syntax [[table: ...]] */
.tab_norm {border-collapse:collapse; empty-cells:show;margin-top:0.5em;}
.td_norm {border:thin solid #000000; padding:2px 5px;}
/* Datenbank-Bausteine: Tabellen-Darstellung */
.tab_db {background-color:#d4d0c8; border-style:none; border-width:1px; border-spacing:1px; border-color:#d4d0c8; empty-cells:show;}
.tab_head {color:white; font-weight:normal; background-color:#0a246a; text-decoration:none; font-family:MS Shell Dlg,arial,helvetica,sans-serif; height:1.6em; vertical-align:middle;}
.tab_cell {font-family:MS Shell Dlg,arial,helvetica,sans-serif;}
tr.tab_row {background-color:#ffffff;}
tr.tab_row:hover {background-color:#e3e5f2;}
tr.tab_row_h {background-color:#c3c5d2;}
/* Datenbank-Bausteine: Navigations-Schalter */
ul#db_nav {
margin-top:10px; margin-bottom:10px; margin-left:0px; padding:0px;
text-align:center;
}
ul#db_nav li {
list-style:none;
display:inline;
margin:0px; padding:0px;
}
ul#db_nav a, ul#navigation span {
float:left; min-width:3em;
margin-right:0.0em; margin-left:0em; margin-top:0em; margin-bottom:0em; padding:0.2em 0.5em;
font-family:MS Shell Dlg,arial; font-size:1.0em; text-decoration:none; font-weight:normal;
border:2px solid #333333;
border-left-color:#ffffff; border-top-color:#ffffff;
color:#000000; background-color:#CCC;
}
ul#db_nav div {
height:0px; margin:0px; padding:0px;
clear:left;
}
/* Veranstaltungskalender */
.cal_tab { background-color:#d4d0c8; border-style:none; border-width:1px; border-spacing:1px; border-color:#d4d0c8; empty-cells:show; }
.cal_head, a.cal_head, a:visited.cal_head { color:#ffffff; font-weight:normal; background-color:#014e9a; text-decoration:none; font-family:MS Shell Dlg,arial,helvetica,sans-serif; height:1.6em; vertical-align:middle; }
.past { background-color:#ffffff; }
.present { background-color:#ffffff; border:2px solid #ff0000; }
.future { background-color:#ffffff; }
.day_normal { color:#000000; }
.day_saso { color:#ff0000; }
.statusonline { color:#000000; }
.statusoffline { color:#aaaaaa; }
/* BBM/BiFra */
.bif_h1 {font-size:1.0em;font-weight:bold;margin-top:0.5em;}
.bif_h2 {font-size:0.9em;font-weight:bold;}
.bif_txt {font-size:0.9em;font-weight:normal;font-style:normal;}
.bif_h1v {font-size:1.0em;font-weight:bold;margin-top:0.5em;}
.bif_h2v {font-size:0.9em;font-weight:normal;}
.bif_knlink {font-size:0.9em;color:#ffffff;background:#0000ff;}
/* Eingabe-Tabellen BBM/BiFra */
.bbm_tab {border-collapse:collapse; empty-cells:show; margin-top:0.0em; width:100%;}
.bbm_td1 {padding:0.5em 1em 0.5em 0em; vertical-align:top; width:50em;}
.bbm_td2 {padding:0.5em 1em 0.5em 0em; vertical-align:center; white-space:nowrap;}
.bbm_td1b {padding:0.5em 1em 0.5em 0em; vertical-align:top; width:50em; background:#FFF;}
.bbm_td2b {padding:0.5em 1em 0.5em 0em; vertical-align:center; background:#FFF; white-space:nowrap;}
/* Tabs (Karteikarten) u.a. von BBM verwendet */
div.tabs_all {padding: 0.0em; margin: 0.5em 0.0em;}
div.tabs {
min-height: 34em; /* No height: can grow if :target doesn't work */
position: relative; /* Establish a containing block */
line-height: 1; /* Easier to calculate with */
z-index: 0; /* So that we can put other things behind */
}
div.tabs > div {
display: inline; /* We want the buttons all on one line */
}
div.tabs > div > a {
color: black; /* Looks more like a button than a link */
background: #CCC; /* Active tabs are light gray */
padding: 0.2em 0.3em 0.2em 0.3em; /* Abstände innerhaln der Buttons */
border: 0.1em outset #BBB; /* Make it look like a button */
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
text-decoration: none; /* keine Unterstreichung von Links */
}
div.tabs > div:not(:target) > a {
border-bottom: none; /* Make the bottom border disappear */
background: #999; /* Inactive tabs are dark gray */
margin: 0em -0.3em 0em 0em; /* Buttonabstand verringern */
}
div.tabs > div:target > a, :target #tab1 > a { /* Apply to the targeted item or to the default item */
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: #CCC; /* Active tab is light gray */
margin: 0em -0.3em 0em 0em; /* Buttonabstand verringern */
}
div.tabs > div > div {
background: #CCC; /* Light gray */
z-index: -2; /* Behind, because the borders overlap */
left: 0; top: 1.3em; /* The top needs some calculation... */
bottom: 0; right: 0; /* Other sides flush with containing block */
overflow: auto; /* Scroll bar if needed */
padding: 0.3em; /* Looks better */
border: 0.1em outset #BBB; /* 3D look */
}
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
position: absolute; /* All these DIVs overlap */
}
div.tabs > div:target > div, :target #tab1 > div {
position: absolute; /* All these DIVs overlap */
z-index: -1; /* Raise it above the others */
}
/* fancyBox, benutzerdefinierte Formate */
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
.fancy1 .fancybox-title {
font-weight: normal;
text-align : left;
}
.fancy1 span {
float: right;
}
.fancy1 .fancybox-skin {
box-shadow: 0 0 1px #222;
color: #000000;
background-color: #dddddd;
}
.fancy_megaphys .fancybox-title {
font-weight: normal;
text-align : left;
}
.fancy_megaphys span {
float: right;
}
.fancy_megaphys .fancybox-skin {
box-shadow: 0 0 1px #222;
color: #000000;
background-color: #ffffff;
font-size:0.9em;
}