/*--------------------------------------------------------------------------------
*
* lfc5-EDIT.css
*
* Diese Datei auf https://www.toptal.com/developers/cssminifier einfügen und
* die Ausgabe in lfc5.css einfügen = 11kb statt 23kB.
*
* Die Styles Datei wird normalerweise vom Browser gecacht, Änderungen kommen
* also erst irgendwann (wenn der Cache überläuft) beim Client an.
* Durch Anhängen der Änderungszeit als Argument an die Styles Datei wird dem
* Browser eine andere Datei vorgegaukelt, den Fragezeichenteil verwirft der
* Browser, aber er lädt die Styles Datei sofort nach jeder Änderung neu.
* Aus echo '= 1000 hat.
*
------------------------------------------------------------------------------- */
html { font-size:0.8px; scroll-behavior:smooth; }
/* media Anpassungen */
@media (min-width:320px) {
html { font-size:1.0px; }
}
@media (min-width:640px) {
html { font-size:1.1px; }
}
@media (min-width:900px) {
html { font-size:1.2px; }
}
@media (min-width:1200px) {
html { font-size:1.3px; }
}
@media (min-width:9999px) {
html { font-size:1.4px; }
}
@page {
size:A4 portrait;
margin-top:5mm;
margin-bottom:5mm;
margin-left:20mm;
margin-right:5mm;
}
/* border und padding verändern width und height bei border-box nicht, Achtung table ist nicht enthalten! */
html, body, main, nav, article, footer, div, input, select, option, textarea, a, img, figure, figcaption, ul {
box-sizing:border-box;
}
@media screen { /* --- SCREEN ------------------------------------------------- */
body {
min-height:100vh;
max-width:1000px;
font:12rem Arial, Helvetica, sans-serif;
color:MidnightBlue;
background-color:AliceBlue;
margin:0;
}
} /* ----------------- SCREEN ------------------------------------------------- */
@media print { /* --- PRINT ------------------------------------------------- */
body {
font:10pt Arial, Helvetica, sans-serif;
color:Black;
background-color:White;
margin:0;
}
} /* ----------------- PRINT ------------------------------------------------- */
/* ===============================================================================
* ===== L A Y O U T =====
=============================================================================== */
/*--------------------------------------------------------------------------------
* ----- H E A D E R = Logo links + Foto oder Menu oben -----
------------------------------------------------------------------------------- */
@media screen { /* --- SCREEN ------------------------------------------------- */
header {
width:100vw;
max-width:1000px;
height:80px;
max-height:80px;
background-color:AliceBlue;
padding:0;
text-align:left;
}
.pheader { display:none; }
} /* ----------------- SCREEN ------------------------------------------------- */
@media print { /* --- PRINT ------------------------------------------------- */
header, nav { display:none !important; }
.pheader { display:flex;justify-content:space-between;align-items:center;height:15mm; }
.pheader img { height:10mm; }
} /* --- PRINT ------------------------------------------------- */
div#headerL {
float:left;
/* je schmaler der Bildschirm, desto schmaler wird width für headerL und menuL.
Damit bleibt bei schmalem Bildschirm prozentuell mehr Platz für den Inhalt.
width bei Bilschirmbreite:
720px: 139px
1024px: 158px
1920px: 191px
2560px: 207px
3840px: 239px */
width:calc( 110rem + 100vw / 40 );
max-width:calc( 110rem + 100vw / 40 );
}
div#headerR {
position:absolute;
padding:0;
overflow:hidden;
left:calc( 110rem + 100vw / 40 );
/* width bei Bilschirmbreite:
720px: 581px
1024px: 842px ab 1000px gewinnt max-width!
1920px: 809px
2560px: 793px
3840px: 761px */
width:calc( 100vw - ( 110rem + 100vw / 40 ) );
max-width:calc( 1000px - ( 110rem + 100vw / 40 ) );
height:80px;
z-index:2000;
background-size:cover;
background-repeat:no-repeat;
}
img#imageL, img#imageR {
vertical-align:top; /* default baseline erzeugt nach IMG einen Abstand */
border-width:0;
}
img#imageL {
height:75px; /* Logo ein bisserl kleiner */
margin-left:5px;
}
img#imageR {
position:absolute;
left:calc( 110rem + 100vw / 40 );
width:calc( 100vw - ( 110rem + 100vw / 40 ) );
max-width:calc( 1000px - ( 110rem + 100vw / 40 ) );
height:80px;
}
.menuT {
position:absolute;
opacity:0.5;
transition:opacity 9s;
transition-delay:3s;
left:calc( 110rem + 100vw / 40 );
width:calc( 100vw - ( 110rem + 100vw / 40 ) );
max-width:calc( 1000px - ( 110rem + 100vw / 40 ) );
z-index:2000;
border-width:0;
font:bold 12rem/20rem Arial, Helvetica, sans-serif;
}
.menuT:hover, .menuT:hover .menuT-group {
opacity:1;
transition:opacity 0.2s;
}
.menuT-group {
display:block;
z-index:2000;
float:left;
vertical-align:middle;
line-height:20rem;
user-select:none;
-webkit-user-select:none; /* Safari 3.1+ */
-moz-user-select:none; /* Firefox 2+ */
-ms-user-select:none; /* IE 10+ */
}
.menuT-title {
display:block;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
vertical-align:middle;
height:20rem;
width:100%;
max-width:100%;
padding-left:3rem;
background-color:LightCyan;
}
.menuT-title:hover {
cursor:pointer;
background-color:LightBlue;
}
.menuT-childs {
display:block;
z-index:2000;
opacity:0;
transition-delay:0.3s;
width:100%;
border-left:2rem solid DarkTurquoise;
border-bottom:2rem solid DarkTurquoise;
}
.menuT-group:hover .menuT-childs, .menuT-group:hover .menuT-option {
opacity:1;
height:auto;
}
.menuT-option {
display:block;
z-index:2000;
opacity:0;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
height:0;
width:100%;
color:MidnightBlue;
background-color:LightCyan;
}
@media (pointer:coarse) { /* am Handy (pointer:coarse) Menüpunkte höher */
.menuT-group:hover .menuT-option {
padding-top:3rem;
padding-bottom:3rem;
}
}
.menuT-option:hover {
cursor:pointer;
color:Blue;
background-color:LightBlue;
}
.menuT-option a {
display:block;
padding-left:3rem;
}
.menuT-admin-group .menuT-title::before { /* rechtes Admin Menu Beschriftung */
content:'Administration';
}
/*--------------------------------------------------------------------------------
* S C H M A L -
------------------------------------------------------------------------------- */
@media (max-width:499px) {
.menuT-admin-childs { /* menuT-admin-childs = Admin mit 4 Spalten */
width:190%; /* Menupunkte breiter wegen Lesbarkeit */
}
.menuT-admin-group .menuT-admin-childs { /* rechtes Admin Menu */
position:relative;
left:-90%; /* rechtes Admin Menu wegen Breite nach links rücken */
}
.menuT-admin-group .menuT-title::before { /* rechtes Admin Menu Beschriftung */
content:'Admin';
}
}
/*--------------------------------------------------------------------------------
* ----- M A I N = Menu links + Artikel rechts -----
------------------------------------------------------------------------------- */
main {
display:flex; /* Alle childs in Reihe + automatische Breitenanpassung */
flex:1; /* automatische Breitenanpassung aktiv */
min-height:calc( 100vh - 80px - 15rem ); /* bis ganz nach unten: 100 vh - header - footer */
}
input.menuL {
display:none;
}
label.menuL {
position:absolute;
top:57px;
left:3rem;
margin:0;
padding:0;
font:bold 18rem Arial, Helvetica, sans-serif;
}
nav.menuL {
width:calc( 110rem + 100vw / 40 );
font:bold 13rem/24rem Arial, Helvetica, sans-serif;
background-color:AliceBlue;
padding:0;
user-select:none;
-webkit-user-select:none; /* Safari 3.1+ */
-moz-user-select:none; /* Firefox 2+ */
-ms-user-select:none; /* IE 10+ */
}
ul.menuL {
width:calc( 110rem + 100vw / 40 );
list-style-type:none;
margin:0;
background-color:AliceBlue;
padding:0;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
}
ul.menuL li a {
display:block;
text-decoration:none;
color:MidnightBlue;
padding:0 0 0 3rem;
}
@media (pointer:coarse) { /* am Handy (pointer:coarse) Menüpunkte höher */
ul.menuL li a {
padding:3rem 0 3rem 3rem;
}
}
ul.menuL li a:hover {
color:Blue;
background-color:LightBlue;
}
article {
background-color:GhostWhite;
padding:3rem;
min-height:calc( 100vh - 80px - 15rem ); /* bis ganz nach unten: 100 vh - header - footer */
/* overflow-x:hidden; */
overflow:hidden;
}
.articleXscroll {
overflow-x:auto;
overflow-y:hidden;
}
/*--------------------------------------------------------------------------------
* S C H M A L - Standard menuL ausgeblendet, einblenden über article
* --------------------------------------------------------------------------------
* Dieser Abschnitt ist für das Ein und Ausblenden von menuL zuständig.
* Einblenden: Menü rückt mit left:0 in den sichtbaren Bereich.
* Ausblenden: Menü rückt mit negativem left aus dem sichtbaren Bereich.
* z-index:2000 bringt menuL in den Vordergrund (=über article).
------------------------------------------------------------------------------- */
@media (max-width:719px) {
article {
width:100%; /* gesamte Breite */
}
nav.menuL {
position:absolute; /* über den anderen Elementen, direkt unter body */
left:calc( -1 * ( 110rem + 100vw / 40 ) );
width:calc( 110rem + 100vw / 40 );
transition:left .3s ease-in-out;
z-index:2000;
}
ul.menuL {
border-right:2rem solid DarkTurquoise;
border-bottom:2rem solid DarkTurquoise;
}
label.menuL::before {
content:'\2630'; /* Hamburger (Trigram For Heaven) */
}
input.menuL:checked ~ label.menuL::before {
content:'\274C'; /* 'X' (X Cross Mark) */
color:Red; /* nur für IE */
}
input.menuL:checked ~ nav.menuL {
left:0;
}
.fbutton { /* Button schmäler */
min-width:60rem;
max-width:60rem;
letter-spacing:-0.5rem;
}
}
/*--------------------------------------------------------------------------------
* B R E I T - Standard menuL eingeblendet, ausblenden > article grow durch flex
* --------------------------------------------------------------------------------
* Dieser Abschnitt ist für das Aus- und Einblenden von menuL zuständig.
* Ausblenden: Menü bekommt Breite 0.
* Einblenden: Menü bekommt wieder normale Breite.
* display:flex in main sorgt für die automatische Breitenanpassung von article.
------------------------------------------------------------------------------- */
@media (min-width:720px) {
article {
flex:1; /* automatische Breitenanpassung */
}
nav.menuL {
width:calc( 110rem + 100vw / 40 );
}
label.menuL::before {
content:'\274C'; /* 'X' (X Cross Mark) */
color:Red; /* nur für IE */
}
input.menuL:checked ~ label.menuL::before {
content:'\2630'; /* Hamburger (Trigram For Heaven) */
color:MidnightBlue; /* nur für IE */
}
input.menuL:checked ~ nav.menuL {
width:0;
z-index:-2000;
}
.fbutton { /* Button breiter */
min-width:150rem;
max-width:150rem;
}
}
/*--------------------------------------------------------------------------------
* ----- F O O T E R = Fußzeile mit Impressum, etc. -----
------------------------------------------------------------------------------- */
@media screen { /* --- SCREEN ------------------------------------------------- */
footer {
display:flex; /* Alle childs in Reihe + automatische Breitenanpassung */
flex:1; /* automatische Breitenanpassung aktiv */
justify-content:center;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
max-width:1000px;
height:15rem;
font:12rem Arial, Helvetica, sans-serif;
background-color:LightGray;
border-width:0;
padding:0;
}
.pfooter { display:none; }
} /* ----------------- SCREEN ------------------------------------------------- */
@media print { /* --- PRINT ------------------------------------------------- */
footer { display:none !important; }
/*
.pfooter { display:flex;justify-content:space-between;height:15mm;margin-top:5mm; }
.pfooter div { display:flex;align-items:center;height:15mm;margin-top:5mm; }
*/
.pfooter { display:flex;justify-content:space-between;margin-top:5mm; }
.pfooter div { display:flex;align-items:center; }
.pfooter div:nth-child(1) { display:flex;justify-content:flex-start; }
.pfooter div:nth-child(2) { display:flex;justify-content:flex-end; }
/*.pfooter div img { height:15mm; }*/
} /* --- PRINT ------------------------------------------------- */
a.footer img {
vertical-align:top; /* default baseline erzeugt nach IMG einen Abstand */
height:12rem;
width:12rem;
border-width:0;
}
/* ===============================================================================
* ===== E L E M E N T E =====
=============================================================================== */
h1 {
font:bold 12rem Arial, Helvetica, sans-serif;
margin:3rem 0 3rem 0; /* oben rechts unten links */
}
h2 {
font:bold 12rem Arial, Helvetica, sans-serif;
margin:3rem 0 3rem 0; /* oben rechts unten links */
}
.h1 { /* H1 Flex mit H1, Buttons, Links, Checkbox, Hilfe */
font:bold 12rem Arial, Helvetica, sans-serif;
display:flex;
flex-wrap:wrap;
align-items:baseline;
min-height:12rem;
margin-bottom:3rem;
}
.h1 h1 { display:inline-block;margin:0; } /* H1 im H1 Flex */
.h1 h1 + * { margin-left:6rem; } /* H1 Folgeelement im H1 Flex mit Rand links */
.h1 input.jahr { margin-right:6rem; } /* Jahr mit Rand rechts */
.h1 div.ci1 { /* Hilfe Kreis im H1 Flex, m-left:auto = ganz rechts */
align-self:center;
margin-left:auto;
margin-right:0;
}
@media (pointer:coarse) { /* am Handy (pointer:coarse) */
/*.h1 * { margin-bottom:10rem;min-height:15rem; } /* mehr Abstand */
}
ul:not([class]) {
position:relative;
list-style:none;
margin-left:0;
margin-top:0;
padding-left:1.2em;
}
ul:not([class]) li::before {
content:'●';
position:absolute;
left:0;
display:inline-block;
}
ol {
padding-left:1.8em;
}
hr.hr04 {
visibility:hidden;
height:4rem;
margin:0;
border-width:0;
}
div.jumper { /* A-Z oder ähnliche Navigationsleiste */
display:flex;
flex-wrap:wrap;
align-items:stretch;
cursor:pointer;
font-weight:600
}
div.jumper div {
display:flex;
flex-grow:1;
justify-content:center;
border-left:1rem solid Silver;
}
div.jumper div:last-child {
border-right:1rem solid Silver;
}
div.jumper div:hover {
color:Blue;
}
@media (pointer:coarse) { /* am Handy (pointer:coarse) */
div.jumper { margin-bottom:10rem; } /* mehr Abstand */
}
table {
border:1rem solid MidnightBlue;
border-collapse:collapse;
table-layout:fixed;
margin:0;
}
th {
text-align:left;
padding-left:2rem;
padding-right:2rem;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
background-color:MidnightBlue;
color:White;
}
td {
text-align:left;
padding-left:2rem;
padding-right:2rem;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
td img {
vertical-align:top; /* default baseline erzeugt nach IMG einen Abstand */
}
table.bb tr:nth-child(odd) { /* ungerade 1,3,5 TR childs */
background-color:LightBlue;
}
table.bb tr:nth-child(even) { /* gerade 2,4,6 TR childs */
background-color:LightCyan;
}
table.bb tr:nth-child(odd):hover, table.bb tr:nth-child(odd):focus { /* ungerade bei hover oder focus ein wenig dunkler */
background-color:SkyBlue;
}
table.bb tr:nth-child(even):hover, table.bb tr:nth-child(even):focus { /* gerade bei hover oder focus ein wenig dunkler */
background-color:PaleTurquoise;
}
@keyframes bbhl { /* in JS jump() wird animation-name:bbhl gesetzt */
50% {background-color:DodgerBlue;}
}
table.bw tr:nth-child(odd) { /* ungerade 1,3,5 TR childs von TABLE class='bw' */
background-color:WhiteSmoke;
}
table.bw tr:nth-child(even) { /* gerade 2,4,6 TR childs von TABLE class='bw' */
background-color:White;
}
table.form tr {
background-color:transparent;
border-bottom-width:0;
}
table.form, table.form td {
padding:2rem 5rem; /* Tabellenformulare Padding o+u 2rem und li+re 5rem */
border-width:0;
background-color:transparent;
}
table.form td:first-child {
padding:2rem 0; /* Tabellenformulare Padding o+u 2rem und li+re 0 */
}
label {
margin-left:3rem;
margin-right:3rem;
white-space:nowrap; /* Kein Zeilenumbruch vor oder nach label */
}
label:hover {
color:Blue;
}
input, select, textarea, table, label {
padding-left:2rem;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
color:inherit;
}
input, select, option, textarea {
margin:0;
}
input:not([type='checkbox']):not([type='radio']), select, option, textarea {
border:1rem solid Silver;
border-radius:3rem; /* TEST, damit kann table.form input, table.form select ... border-radius entfallen */
}
input:not([type='checkbox']):not([type='radio']):focus,
select:focus, textarea:focus { /* TEST, damit kann table.form input:focus, table.form select:focus ... border-radius entfallen */
border:1rem solid Blue;
}
/* mit dieser Krücke wird der (im Vergleich zu input) zu große Indent bei select (in Chrome, FF und IE) zurechtgebogen */
select {
padding-left:0;
text-indent:-1rem;
}
/* input:focus, select:focus, option:focus, textarea:focus, button:focus, td:focus, div:focus { */
input, select, option, textarea, button, label, tr, td, div, a {
outline:0; /* blaues Chrome Rechteck weg */
}
/* Auf/ab Pfeile bei inpute type='number' entfernen */
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button {
-webkit-appearance:none;
margin:0;
}
/* Auf/ab Pfeile bei input type='number' entfernen */
input[type='number'] {
-moz-appearance:textfield;
}
input[type='radio'], input[type='checkbox'] {
vertical-align:text-bottom;
}
input[type='date']:enabled {
position:relative;
background-color:White; /* Default Chrome mobile ist grau, wie disabled */
}
input[type='date']::-webkit-clear-button,
input[type='date']::-webkit-inner-spin-button {
display:none;
}
/* Kalender Symbol mit 100% Breite, damit wird bei jedem Klick der Kalender geöffnet, Symbol unsichtbar (geht nicht auf Android) */
/* INFO SIEHE NÄCHSTER BLOCK !!!
input[type='date']::-webkit-calendar-picker-indicator {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
height:auto;
color:transparent;
background:transparent;
}
*/
/* nur am Desktop (pointer:fine) funktioniert das unsichtbare Kalender Symbol, nur am Desktop ersetzen wir das Kalender Symbol */
/* FUNKTIONIERT SEIT 2023 NICHT MEHR, DESHALB WURDE AUCH DER 100% BLOCK VORHER DEAKTIVIERT !!!
@media (pointer:fine) {
input[type='date']:enabled::after {
content:'▼ ';
font-size:10rem;
color:MidnightBlue;
padding-right:5rem;
}
}
*/
/* Chrome ändert bei Autofill die Farben, das wollen wir nicht */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow:0 0 0 30rem field inset !important;
-webkit-text-fill-color:MidnightBlue !important;
}
option {
border:0;
}
option:disabled { /* kein dunkelgrauer Hintergrund im IE */
background-color:transparent;
}
.fcheckbox {
appearance:none;
-webkit-appearance:none;
width:0;
padding-left:0;
border-width:0;
}
.fcheckbox + label {
position:relative;
color:MidnightBlue;
vertical-align:baseline;
}
.fcheckbox + label:hover {
color:Blue;
}
.fcheckbox + label::before {
/* content:'\20DE'; /* Quadrat (Combining Enclosing Square) */
content:'\25A2'; /* Quadrat (White Square with Rounded Corners) */
display:inline-block;
font-size:140%; /* Das Quadrat ist ein wenig zu klein */
margin-top:-100rem; /* Das verbessert das Unicode Baseline Probleme */
text-align:center;
width:15rem;
max-height:15rem;
color:MidnightBlue;
/* text-shadow:0.1rem 0.1rem 0.1rem MidnightBlue,
0.1rem -0.1rem 0.1rem MidnightBlue,
-0.1rem 0.1rem 0.1rem MidnightBlue,
-0.1rem -0.1rem 0.1rem MidnightBlue; /* Damit bekommt auch FF einen border um die leere Checkbox */
}
.fcheckbox:not(:checked) + label::before {
vertical-align:-8%; /* Das Quadrat ist zu weit oben */
}
.fcheckbox:checked + label::before {
content:'\2705'; /* Quadrat mit Hakerl (White Heavy Check Mark) */
font-size:100%;
color:ForestGreen; /* FF färbt das Zeichen grün, darum überall grün */
}
.fcheckbox2:checked + label::before {
content:'\274E'; /* Quadrat mit Kreuz (Negative Squared Cross Mark) */
}
.ft + label { /* Zusatz für fcheckbox innerhalb einer Tabelle */
padding-left:0;
margin-left:0;
margin-right:0;
}
.ft + label::before { /* Zusatz für fcheckbox innerhalb einer Tabelle */
width:100%;
line-height:100%;
}
.fradiobox {
appearance:none;
-webkit-appearance:none;
width:0;
padding-left:0;
border-width:0;
}
.fradiobox + label {
position:relative;
margin-left:0;
margin-right:0;
color:MidnightBlue;
}
.fradiobox + label::before {
content:'\2B58'; /* Kreis (Heavy Circle) */
display:inline-block;
text-align:center;
width:18rem;
color:MidnightBlue;
}
.fradiobox:checked + label::before {
content:'\2B24'; /* gefüllter Kreis (Black Large Circle) */
color:ForestGreen;
}
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) { /* IE10+ stellt das Quadrat nicht gut dar */
.fcheckbox + label::before {
content:'\2B1C'; /* deshalb anderes Quadrat (White Large Square) */
}
}
@supports (-ms-ime-align:auto) { /* Edge stellt das Quadrat nicht gut dar */
.fcheckbox + label::before {
content:'\2B1C'; /* deshalb anderes Quadrat (White Large Square) */
}
}
.ftext0, .ftext1, .fdate0, .fdate1, .fmail0, .fmail1, fsel0 {
width:200rem;
max-width:100%;
}
.fbutton {
display:inline-block; /* macht auch zu button */
text-align:center;
/* vertical-align:middle; */
height:18rem;
line-height:0; /* das macht ein richtiges vertical-align = middle */
overflow:hidden;
font:bold 12rem Arial, Helvetica, sans-serif;
color:MidnightBlue;
border:1rem solid MidnightBlue;
border-radius:4rem;
margin-right:6rem;
padding:0;
background-image:linear-gradient( to bottom, LightBlue, LightCyan );
cursor:pointer;
}
.fbutton:disabled {
color:Gray !important; /* damit auch der rote 'löschen' Button grau wird */
border:1rem solid Gray;
cursor:auto;
}
.fbutton:enabled:hover {
color:Blue;
background-image:linear-gradient( to bottom, LightBlue, LightBlue ); /* background-color funktioniert bei IE + FF nicht */
border-color:Blue;
}
.fbutton:enabled:active {
color:White;
background-image:linear-gradient( to bottom, Blue, Blue ); /* background-color funktioniert bei IE + FF nicht */
background-color:Blue;
}
.fbutton:last-child { /* kein Abstand nach dem letzten Button */
margin-right:0;
}
.fbutton span { /* lässt auch wie einen Button aussehen */
vertical-align:middle;
}
@media (pointer:coarse) { /* am Handy (pointer:coarse) Buttons höher */
.fbuttonx {
height:36rem;
line-height:36rem;
}
}
.tbutton { /* Ein Button der aussieht wie ein Text */
display:inline-block;
font-size:inherit;
font-weight:600;
color:MidnightBlue;
background-color:transparent;
border-width:0;
padding:0;
cursor:pointer;
}
.tbutton:hover {
font-weight:bold;
color:Blue;
}
.flabel {
display:inline-block;
height:20rem;
width:165rem;
font:14rem Arial, Helvetica, sans-serif;
color:MidnightBlue;
}
div.tooltip, span.tooltip {
display:inline-block;
vertical-align:bottom;
overflow:hidden;
max-width:0;
max-height:0;
transition:max-width 0s, max-height 0s, padding 0s, border 0s;
transition-delay:4s;
font-size:80%;
font-weight:normal;
background-color:LightYellow;
border-radius:4rem;
border:0px solid Orange;
}
input.tooltip {
border-radius:3rem;
}
input.tooltip:focus {
border:1rem solid Blue;
}
input.tooltip:focus ~ div.tooltip, input.tooltip:focus ~ span.tooltip {
max-width:1000px;
max-height:1000px;
transition-delay:4s;
padding:2rem 5rem; /* Padding o+u 2rem und li+re 5rem */
border:1rem solid Orange;
}
input.jahr {
width:3em;
height:18rem;
padding-left:0;
padding-right:0;
text-align:center;
border-radius:4rem;
}
input.tag {
width:2em;
padding-left:0;
padding-right:0;
text-align:center;
border-radius:4rem;
}
.us0 {
user-select:none;
-webkit-user-select:none; /* Safari 3.1+ */
-moz-user-select:none; /* Firefox 2+ */
-ms-user-select:none; /* IE 10+ */
}
.p0 {
padding:0;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color:Gray;
opacity:1; /* Firefox */
}
/* ANSCHEINEND NICHT MEHR NÖTIG */
/* :-ms-input-placeholder { color:Gray; } /* IE 10+ */
/* ::-ms-input-placeholder { color:Gray; } /* Edge */
/* ANSCHEINEND NICHT MEHR VERWENDET */
/* .redph::placeholder { color:Red; } /* Chrome, Firefox, Opera, Safari 10.1+ */
/* .redph:-ms-input-placeholder { color:Red; } /* IE 10+ */
/* .redph::-ms-input-placeholder { color:Red; } /* Edge */
@media print { /* --- PRINT ------------------------------------------------- */
.np { display:none; } /* no print */
.menuL, .ci0, .ci1, .fbutton { display:none !important; } /* keine Menü-, Kreis- oder andere Buttons */
div.jumper { display:none } /* keine A-Z oder ähnliche Navigationsleisten */
table { border-width:0; } /* Tabelle ohne Rand */
tr { border-bottom:1pt solid LightGray; } /* Tabellenzeile mit grauem Rand unten */
th { color:Black; background-color:White; } /* Tabellenüberschrift schwarz weiß */
input:not([type='checkbox']):not([type='radio']), select, option, textarea { /* Eingabefelder ohne Rand */
border-width:0;
}
} /* ----------------- PRINT ------------------------------------------------- */
@media screen { /* --- SCREEN ------------------------------------------------- */
a:link {
white-space:nowrap;
font-weight:bold;
color:MidnightBlue;
text-decoration:none;
}
a.link::before {
white-space:nowrap;
content:'»';
padding-right:0.1em;
color:blue;
}
a:visited { color:MidnightBlue; }
a:focus { font-weight:bold; color:MidnightBlue; text-decoration:none; }
a:hover { font-weight:bold; color:Blue; text-decoration:none; }
} /* ----------------- SCREEN ------------------------------------------------- */
@media print { /* --- PRINT ------------------------------------------------- */
a:link {
font-weight:normal;
color:Black;
text-decoration:none;
}
a.link::before {
content:'';
padding-right:0;
color:Black;
}
a:visited { color:Black; }
} /* ----------------- PRINT ------------------------------------------------- */