/* videos.css von 8/2025 */
{
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-rendering : optimizeLegibility;
font-kerning: normal;
text-size-adjust : 100%;
text-wrap: initial;
}
video::cue {
font-size: 20px;
/* background-image: linear-gradient(to bottom; */
color: yellow;
}
body {
/*font-size: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));*/
font-size: 16px;
background-color : CornflowerBlue;
color: white;
margin-bottom: 0rem;
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-kerning: normal;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
font-weight: 300;
}
:root {
background-color : CornflowerBlue;
color: ;
display: grid;
text-align: center;
font-size:14px;
line-height: 28px;
}
.grid-container {
display: grid;
font-size: 14px ;
font-weight: bold;
font-family: sans-serif;
padding: 2px;
wrap-before:initial;
width: device-width;
max-width: 800px;
- overflow-wrap: break-word;
}
/* anfang ränder */
/* area:reihe 1 / spalte 2
Spalte: grid-row: 1 / 4 ;
Reihe grid-column: 1;
/
/*Rand-li */
div.Rand-li {
grid-row: 1 / 5;
: grid-column: 1;
color: ;
background-color: ;
width: 1px;
}
/*Rand-re */
div.Rand-re {
grid-row: 1 / 5;
grid-column: 3;
color: ;
background-color: ;
width: 1px;
}
/* ende ränder */
/*menu */
div.menu {
grid-area: 1 / 2;
color: white;
text-align: center;
vertical-align: middle;
font-size: 18px;
font-weight: normal;
line-height: 22px;
}
div.seitentitel {
grid-row: 2;
grid-column: 2;
font-size: 24px;
line-height: 28px;
vertical-align: top;
color: white;
}
div.inhalt {
grid-area: 3 / 2;
background-color : CornflowerBlue;
color: white;
text-align: center;
font-size: 16px;
line-height: 22px;
vertical-align: top;
}
/*fusszeile */
div.fuss {
grid-area: 4 / 2;
color: white;
text-align: center;
vertical-align: top;
font-size: 14px;
font-weight: normal;
line-height: 24x;
}
/* <<<< ende gesamtes rasters */
/* sprungmarken links */
.sprung {
font-size: 0.8em;
}
/* unvisited link */
a:link {
font-size: 14px;
font-weight: normal;
font-style: normal;
color: blue;
text-decoration: none;
}
a:hover {
font-style: italic;
color: yellow;
}*
a:visited {
color:orange;
}
/* selected link */
a:active {
color: blue;
}
/*allg.markierungen alfabetisch*/
.autor {
font-size: 1.4rem;
font-weight: normal;
}
.abteilung{
font-size: 30px;
font-weight: normal;
font-style: italic;
color: PaleTurquoise;
}
.punkt {
font-size: 24px;
color: red ;
}
.copy {
font-size: 12px;
color: gray;
}
.data-abt {
font-size: 2rem;
font-weight: normal;
font-style: italic;
color: PaleTurquoise;
}
.datpriv {
font-size: 16px;
font-weight: bold;
}
img {
vertical-align: middle;
/*display: block;*/
-o-object-fit: cover;
object-fit: cover;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 0px;
/* box-shadow: 8px 4px 12px rgba(0, 0, 0, 0.5); */
box-shadow: 1px 3px 16px rgba(0, 0, 0, 0.5);
}
.herz {
width: 90px;
background-color: ;
color: indianred;
border: 2px;
}
div.herz2 {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
width: 90px;
background-color: ;
color: indianred;
border:2px;
}
.hinweis {
font-size: 14px;
font-style: italic;
color: white;
}
.gross {font-size: 18px;}
/* anf header titel */
h1 {
font-size: 24px;
font-weight: 600;
font-style: normal;
color: white;
}
h2 {
font-size: 20px;
color: white;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 14px;
font-weight: 700;
font-style: normal;
}
h6 {
font-size: 12px;
font-weight: 500;
}
*Trennlienien lineale */
hr {
width: 40%;
height: 1px;
color: white;
}
.ruler20 {
width: 20%;
height: 2;
color: white;
}
.ruler30 {
width: 30%;
height: 2;
color: ;
}
.ruler50 {
width: 50%;
height: 2;
color: ;
}
.ruler75 {
width: 75%;
height: 2;
}
.ruler90 {
width: 90%;
height: 2;
}
/* ende Trennlienien lineale */
/* jahr */
.jahr {
font-size: 26px;
color: yellow;
font-weight: normal;
font-style: italic;
}
.gruppenjahr {
font-size: 24px;
color: yellow;
font-weight: bold;
font-style: normal;
}
.jahrklein {
font-size: 16px;
color: yellow;
font-weight: normal;
font-style: italic;
}
.pubjahr {
font-size: 16px;
color: yellow;
font-weight: normal;
font-style: normal;
}
/*endejahr */
.medium {
font-size:12px;
font-weight: normal;
}
.nummer {
font-size: 24px;
font-weight: normal;
color: antiquewhite;
font-style: italic;
}
.neu {
font-size: ;
font-weight: normal;
color: green;
}
picture {
width: auto;
margin: 0;
display: grid;
grid-template-columns: 1fr;
}
.poesie {
font: 12px courier;;
/* =======! The font property is a shorthand property for:font-style font-variant font-weight font-size/line-heightfont-family */
font-size:12px;
}
/*anfangschriftgrößen*/
.klein {
font-size: 11px;
color: ;
font-weight: normal;
font-style: ;
}
.mittel {
font-size: 20px;
font-weight: normal;
}
.gross {
font-size: 28px;
font-weight: normal;
}
.laufzeit {
font-size: 16px;
font-weight: normal;
font-style: normal;
}
/* endeschriftgrößen*/
.songliste {
font-size: 18px;
font-weight: normal;
font-style: normal;
color: white;
}
.stern {
font-size: 2em;
}
/* anfangtitel*/
/* variabel */
.titel {
font-size: 1.5em;
font-weight: bold;
color: LightCyan;
}
.titel2 {
font-size: 22px;
font-weight: normal;
color: white;
font-style: normal;
}
.titel3 {
font-size: 20px;
font-weight: normal;
color: white;
font-style: normal;
}
.titel4 {
font-size: 18px;
font-weight: normal;
color: white;
font-style: normal;
}
.untertitel {
font-size: 24px;
font-weight: 500;
}
/* endetitel*/
.text {
line-height: 24px;
font-size: 16px;
/*font-size: clamp(1.8rem, 1vw, 1.8rem); */
font-weight: 350;
font-style: normal;
text-align: justify;
color: white;
}
.textprivacy {
line-height: 20px;
font-size: 18px;
/*font-size: clamp(1.8rem, 1vw, 1.8rem); */
font-weight: 650;
color: orange;
}
video {
vertical-align: middle;
/*display: block;*/
-o-object-fit: cover;
object-fit: cover;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 0px;
/* box-shadow: 8px 4px 12px rgba(0, 0, 0, 0.5); */
box-shadow: 1px 3px 16px rgba(0, 0, 0, 0.5);
}
.videoinfo {
font-size: 18px;
font-weight: normal;
font-style: normal;
color: white;
}
.was {
font-size: 18px;
line-height: 22px;
font-style: normal;
font-weight: normal;
color: white;
}
.waswannwo{
font-size: 14px;
font-weight: normal;
color: #F3E2A9;
}
.wer {
font-size: 12px;
font-weight: normal;
font-style: normal;
}
.werk {
font-size: 20px;
font-style: normal;
color: brown;
}
.wogezeigt {
font-size: 16px;
font-weight: normal;
color: #F3E2A9;
}
.zeiger {
font-size: 24px;
}
.zitat {
font-size: 12px;
font-weight: normal;
font-style: italic;
}