/* Globale Variablen */ :root { /* Größen */ --MaxWidthBody: 1058px; --ScrollbarWidth: 20px; /* Default; genauer Wert wird durch JavaScript ermittelt und zugewiesen. */ --ScrollTop: 0px; /* Default; genauer Wert wird durch JavaScript ermittelt und zugewiesen. */ --BodyMarginVertical: clamp(0px, calc((100% - var(--MaxWidthBody)) / 2), 40px); --BodyPaddingHorizontal: clamp(20px, calc((100% - 800px) / 10 + 20px), 40px); --BodyBorderRadius: clamp(0px, calc((100vw - var(--ScrollbarWidth) - var(--MaxWidthBody)) / 2), 20px); --MenuTopPosition: calc(clamp(0px, calc(40px - var(--ScrollTop)), clamp(0px, calc((100vw - var(--ScrollbarWidth) - var(--MaxWidthBody)) / 2), 40px)) + var(--BodyBorderRadius) / 2); --MenuLeftPosition: max(5px, calc(5px + (100% - var(--MaxWidthBody)) / 2) + var(--BodyBorderRadius) / 2); --MenuRightPosition: max(0px, calc(0px + (100% - var(--MaxWidthBody)) / 2) + var(--BodyBorderRadius) / 2); /* Standard-Schriftart */ --DefaultFontSize: 1em; --DefaultLineHeight: 1.5em; --DefaultFont: Tahoma, Arial, sans-serif; /* Standard-Text */ --MarginBgColor: #81756F; --DefaultTextColor: #473129; --DefaultBgColor: #FFFBEB; --DefaultBgImage: url(kiefer_gamma5.png); --BoldTextColor: var(--LinkColorVisited); --HighlightTextColor: var(--LinkColorHover); /* Hyperlinks */ --LinkColorNormal: #CC9208; --LinkColorHover: #FC5F00; --LinkColorVisited: #8A764A; --LinkIconImageAnchor: url(down.png); --LinkIconOffsetAnchor: 13px; --LinkIconImageExtern: url(www.png); --LinkIconOffsetExtern: 20px; /* Schatten */ --ShadowColorLight: #00000020; --ShadowColorDark: #B6A97A; --ShadowSmall: 1px 1px 2px; --ShadowLarge: 2px 2px 4px; /* Kopfzeilen und Überschriften */ --HeaderTextColor: #644C42; --HeaderBgColor: #FCE9A8; --HeaderBgImage: url(kiefer.jpg); /* Textboxen */ --BoxBgColor: rgba(252, 233, 168, 0.2); --BoxBgColorHover: rgba(252, 233, 168, 0.4); --BoxBgColorLight: #FFFBF1; /* für Shoutbox etc. */ --BoxShadow: 3px 3px 6px var(--ShadowColorLight); --BoxBorderColorLight: #FDDC6B #B6A97A #B6A97A #FDDC6B; --BoxBorderColorDark: #B6A97A #644C42 #644C42 #B6A97A; /* Menü */ --MenuBgColor: #FCF2D8; --MenuBgImage: url(list-bg.jpg); --MenuBorderColor: #FEF4CD #DBD4B6 #DBD4B6 #FEF4CD; /* Tabellen */ --TableCellBorderColor: #FEF4CD #DBD4B6 #DBD4B6 #FEF4CD; /* Buttons */ --ButtonFont: Arial, sans-serif; --ButtonBorderColorLight: #DAD2B8 #B6A97A #B6A97A #DAD2B8; --ButtonBorderColorDark: #B6A97A #644C42 #644C42 #B6A97A; /* Fotos */ --FotoBgColor: #FFFFFF; --FotoBorderColor: #CCCCCC #666666 #666666 #CCCCCC; /* Unterschrift */ --SignatureFont: Segoe Script, Segoe Print, MV Boli, Ink Free, Comic Sans, Comic Sans MS, Brush Script MT, cursive; --SignatureSize: 1.9em; --SignatureColor: #000080; /* Tooptips */ --TooltipTextColor: #000000; --TooltipLinkColor: #0000ff; --TooltipBgColor: #FFFFE0; --TooltipBorderColor: #000000; /* Audio-Player*/ --AudioBgColor: var(--HeaderBgColor); --AudioBgImage: var(--HeaderBgImage); /* Verschiedenes */ --BorderColorLight: #DAD2B8; /* für untere Seite Formular-Header */ --CodeColor: #303030; --CodeBgImage: url(computerpapier.png); --CodeBorderColorDark: var(--BoxBorderColorDark); --BorderRadius: 6px; --ThemeColor: #FCE9A8; /* für Mobil-Browser, um die Titelleiste einzufärben */ --QuoteFont: Times New Roman, serif; /* Zitate */ --IconFont: Tahoma, MS Sans Serif, sans-serif; --PanelBorderColor: #B6A97A; /* Farbe für Rahmen um Gruppen von Bedienelementen */ } /* Dark Mode */ @media (prefers-color-scheme: dark) { :root { /* Standard-Text */ --MarginBgColor: #333333; --DefaultTextColor: #C0C0C0; --DefaultBgColor: #202020; --DefaultBgImage: url(kiefer_gr_h-134_k-60.png); --BoldTextColor: #E0E0E0; --HighlightTextColor: var(--LinkColorHover); /* Hyperlinks */ --LinkColorNormal: #C8A500; --LinkColorHover: #FFD100; --LinkColorVisited: #A28500; --LinkIconImageAnchor: url(down_dark.png); --LinkIconImageExtern: url(www_dark.png); /* Schatten */ --ShadowColorLight: #00000040; --ShadowColorDark: #000000; /* Kopfzeilen und Überschriften */ --HeaderTextColor: #FFD100; --HeaderBgColor: #333333; --HeaderBgImage: url(kiefer_gr_h-115_k-60.png); /* Textboxen */ --BoxBgColor: rgba(0, 0, 0, 0.2); --BoxBgColorHover: rgba(0, 0, 0, 0.1); --BoxBgColorLight: #262626; /* für Shoutbox etc. */ --BoxBorderColorLight: #484848 #383838 #404040 #404040; --BoxBorderColorDark: #404040 #383838 #404040 #404040; /* Menü */ --MenuBgColor: #262626; --MenuBgImage: url(kiefer_h-102_k-82_gr.png); --MenuBorderColor: #303030 #000000 #000000 #303030; /* Tabellen */ --TableCellBorderColor: #303030 #000000 #000000 #303030; /* Buttons */ --ButtonBorderColorLight: #484848 #383838 #404040 #404040; --ButtonBorderColorDark: #404040 #383838 #404040 #404040; /* Fotos */ --FotoBgColor: #202020; --FotoBorderColor: #404040 #404040 #404040 #404040; /* Unterschrift */ --SignatureColor: #C0C0FF; /* Tooptips */ --TooltipTextColor: #909090; --TooltipLinkColor: #FFFFFF; --TooltipBgColor: #000000; --TooltipBorderColor: #303030; /* Audio-Player*/ --AudioBgColor: #CCCCCC; --AudioBgImage: url(kiefer_gr_h-115_k-60_inv.png); /* Verschiedenes */ --BorderColorLight: #000000; /* für untere Seite Formular-Header */ --CodeColor: #FFFFFF; --CodeBgImage: url(computerpapier_dark.png); --CodeBorderColorDark: #909090; --ThemeColor: #202020; /* für Mobil-Browser, um die Titelleiste einzufärben */ --PanelBorderColor: #606060; /* Farbe für Rahmen um Gruppen von Bedienelementen */ } /* Eingabefelder */ input[type=text], textarea, select { color: var(--DefaultTextColor) !important; background-color: #000000 !important; border: 1px solid var(--PanelBorderColor); } input[type=text]:disabled, textarea:disabled, select:disabled { color: #606060 !important; } /* Audio-Player*/ audio::-webkit-media-controls { filter: invert(100%); } /* Scrollbars */ *::-webkit-scrollbar { width: 15px; height: 15px; background-color: #000000; border-radius: 8px; } *::-webkit-scrollbar-thumb { background-color: #606060; border-radius: 8px; border: 2px solid #000000; } } /* Globale Stile */ * { box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; /* Silbentrennung */ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* Bildschirmgrößenabhängige Stile */ div.normalscreen { display: block; } div.smallscreen { display: none; } img.normalscreen { width: 100%; height: 100%; } img.smallscreen { width: 0; height: 0; } @media only screen and (max-width: 600px) { div.normalscreen { display: none; } div.smallscreen { display: block; } img.normalscreen { width: 0; height: 0; } img.smallscreen { width: 100%; height: 100%; } } /* Default-Stile */ html { background-color: var(--MarginBgColor); } body { font-family: var(--DefaultFont); font-size: var(--DefaultFontSize); color: var(--DefaultTextColor); line-height: var(--DefaultLineHeight); background-color: var(--DefaultBgColor); background-image: var(--DefaultBgImage); max-width: var(--MaxWidthBody); margin: var(--BodyMarginVertical) auto; padding-top: 10px; padding-bottom: 20px; padding-left: var(--BodyPaddingHorizontal); padding-right: var(--BodyPaddingHorizontal); border-radius: var(--BodyBorderRadius); } /* @media only screen and (max-width: 600px) { body p { text-align: justify; } } */ td { line-height: var(--DefaultLineHeight); } td p { /* margin-top:0; */ /* margin-bottom:1em; */ } /* Spaltenlayout für Übersichtsseiten */ div.spalten-container { box-sizing: border-box; width: 100%; position: relative; clear: both; display: inline-block; margin-bottom: 2em; background-color: var(--BoxBgColor); box-shadow: var(--BoxShadow); padding: 1em; border-radius: var(--BorderRadius); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorDark); } div.spalten-container.hover:hover { background-color: var(--BoxBgColorHover); } div.spalte-links { box-sizing: border-box; float: left; max-width: 40%; /*border: 1px solid green;*/ } div.spalte-rechts { box-sizing: border-box; overflow: hidden; padding-left: 1em; /*border: 1px solid red;*/ } div.spalte-links img { display:block; max-width: 100%; } div.spalte-rechts img { max-width: 100%; } td p:first-child, td h1:first-child, td h2:first-child, td h3:first-child, td h4:first-child, td h5:first-child, td h6:first-child, div.spalte-rechts p:first-child, div.spalte-rechts h1:first-child, div.spalte-rechts h2:first-child, div.spalte-rechts h3:first-child, div.spalte-rechts h4:first-child, div.spalte-rechts h5:first-child, div.spalte-rechts h6:first-child { margin-top:0; } @media only screen and (max-width: 600px) { div.spalte-links { float: none; width: 100%; max-width: 100%; padding-bottom: 1em; } div.spalte-rechts { float: left; overflow: visible; padding-left: 0; } div.spalte-links img { margin-left: auto; margin-right: auto; } div.spalte-rechts h3, div.spalte-rechts h4 { text-align: center; } div.spalte-rechts { text-align: justify; } } /* Universelles Spaltenlayout für Bilder und Tabellen, die sich "responsive" verhalten sollen */ /* 2-spaltige Anordnung (Beispiel siehe thermometer.htm) */ td.spalte1von2 { padding-right: 1em; /* border: 1px solid green; */ } td.spalte2von2 { padding-left: 1em; /* border: 1px solid red; */ } td.spalte1von2 img, td.spalte2von2 img { /* display:block; */ max-width: 100%; } @media only screen and (max-width: 600px) { td.spalte1von2 { display: block; text-align: center; padding-right: 0; padding-bottom: 1em; } td.spalte2von2 { display: block; text-align: center; padding-left: 0; padding-top: 1em; } } /* Alternative (vereinfachte) Form eines universellen Spaltenlayouts */ div.spalten > * { display: inline-block; } div.spalten > img { max-width: 100%; } div.spalten > * { margin: 1em; } @media only screen and (max-width: 600px) { div.spalten > * { margin-left: 0; margin-right: 0; } } /* Hyperlinks */ a { outline: 0; } a:link { color: var(--LinkColorNormal); font-weight:bold; } a:active { color: var(--LinkColorHover); font-weight:bold; text-decoration:underline; } a:visited { color: var(--LinkColorVisited); font-weight:bold; } a:hover { color: var(--LinkColorHover); font-weight:bold; text-decoration:underline; } a.none { font-weight: normal; text-decoration: none; color: inherit; } p.icon { font-family: var(--IconFont); font-size:0.9em; line-height:1.5; } p.small { font-size:0.9em; } a.icon { color: var(--DefaultTextColor); font-weight:normal; text-decoration:none; } a.button { color:var(--DefaultTextColor); text-decoration: none; } /* Icons für Hyperlinks */ /* Hinweis: Wenn ein Link doch nicht mit einem Icon dargestellt werden soll, dann diesem die Klasse "normal" zuweisen! */ /* a:not(.normal)[href^="#"] { background: transparent var(--LinkIconImageAnchor) bottom left no-repeat; padding-left: var(--LinkIconOffsetAnchor); } */ a:not(.normal)[href^="#"]::after { content: var(--LinkIconImageAnchor); padding-left: 0.2em; vertical-align: -0.1em; } /* a:not(.normal)[href^="http"] { background: transparent var(--LinkIconImageExtern) bottom left no-repeat; padding-left: var(--LinkIconOffsetExtern); } */ a:not(.normal)[href^="http"]::after { content: var(--LinkIconImageExtern); padding-left: 0.2em; vertical-align: -0.1em; } /* Überschriften */ h1 { font-size:2.8em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); font-weight:normal; text-shadow: var(--ShadowLarge) var(--ShadowColorLight); } h2 { font-size:2.2em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); font-weight:normal; text-shadow: var(--ShadowLarge) var(--ShadowColorLight); } h3 { font-size:1.7em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); font-weight:normal; text-shadow: var(--ShadowLarge) var(--ShadowColorLight); } h4 { font-size:1.4em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); font-weight:normal; text-shadow: var(--ShadowSmall) var(--ShadowColorLight); } h5 { font-size:1.1em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); text-shadow: var(--ShadowSmall) var(--ShadowColorLight); } h6 { font-size:1em; line-height:normal; margin-bottom: 0; color: var(--HeaderTextColor); text-shadow: var(--ShadowSmall) var(--ShadowColorLight); } /* Überschriften, die auf einen Text-Absatz folgen */ p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 1em; } /* Text-Absätze, die auf eine Überschrift folgen */ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 1em; } /* Rubrik-Titel */ p.rubrik { font-size:2em; line-height:1.2em; padding: 0.16em 1em 0.16em 1em; color: var(--HeaderTextColor); font-weight:bold; text-align:center; text-shadow: var(--ShadowLarge) var(--ShadowColorDark); background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); margin-top:1em; border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } /* Unterrubrik-Titel */ p.unterrubrik { font-size:1.4em; line-height:1.2em; padding: 0.16em 1em 0.16em 1em; color: var(--HeaderTextColor); font-weight:bold; text-align:center; text-shadow: var(--ShadowLarge) var(--ShadowColorDark); background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); margin-top:2em; border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } /* Unterrubrik-Titel als Tabelle (für Galerie, da mehrspaltig) */ table.unterrubrik { width:100%; border-spacing:0; /* entspricht cellspacing="0" */ } table.unterrubrik tr { background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); box-shadow: var(--BoxShadow); border-radius: calc(2 * var(--BorderRadius)); /* hack */ } table.unterrubrik tr td { font-size:1.4em; line-height:1.5em; color: var(--HeaderTextColor); font-weight:bold; text-shadow: var(--ShadowSmall) var(--ShadowColorDark); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); } table.unterrubrik tr td:first-child { border-radius: var(--BorderRadius) 0 0 var(--BorderRadius); } table.unterrubrik tr td:last-child { border-radius: 0 var(--BorderRadius) var(--BorderRadius) 0; } /* Normale Tabellen */ table.list { box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } table.list tr th { padding:0.4em; font-weight:bold; color: var(--HeaderTextColor); text-align:left; vertical-align:top; background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); text-shadow: var(--ShadowSmall) var(--ShadowColorDark); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); } table.list tr:first-child th:first-child { border-top-left-radius: var(--BorderRadius); } table.list tr:first-child th:last-child { border-top-right-radius: var(--BorderRadius); } table.list tr:last-child td:first-child { border-bottom-left-radius: var(--BorderRadius); } table.list tr:last-child td:last-child { border-bottom-right-radius: var(--BorderRadius); } table.list tr td { /* padding:0.4em; */ padding: 0.2em 0.4em 0.2em 0.4em; background-color: var(--BoxBgColor); vertical-align: top; border-width: 1px; border-style: solid; border-color: var(--TableCellBorderColor); } /* Überbreite Tabellen und Iframes horizontal scrollen (diese dazu in ein div mit der folgenden Klasse stecken) */ @media only screen and (max-width: 6000px) { div.table-scroll, div.iframe-scroll { overflow-x: auto; } /* Problem: Text erscheint immer. TODO: js-Lösung, die den Text nur dann zeigt, wenn Tabelle/IFrame tatsächlich overflowt. div.table-scroll:before, div.iframe-scroll:before { content: "Nach rechts scrollen"; font-style: italic; } */ div.table-scroll { padding: 16px; /* Abstand zum Schatten der Tabelle */ margin: -16px; /* Abstand zum Schatten der Tabelle */ } div.table-scroll table { margin-left: 0; margin-right: 0; } /* Scrollbar oben statt unten: div.table-scroll, div.iframe-scroll, div.table-scroll table, div.iframe-scroll iframe { transform:rotateX(180deg); -ms-transform:rotateX(180deg); -webkit-transform:rotateX(180deg); } */ } /* Artikeldatum */ p.date { margin-top: 1.6em; color: var(--HeaderTextColor); text-shadow: var(--ShadowSmall) var(--ShadowColorLight); text-align: center; } /* Textboxen (z.B. Wetter, Newsticker, Shoutbox) */ div.box, fieldset { background-color: var(--BoxBgColorLight); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorDark); box-shadow: var(--BoxShadow); } div.box table tr th, table.box tr th { font-weight:bold; color: var(--HeaderTextColor); font-size:1em; line-height:1.4em; background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); text-shadow: var(--ShadowSmall) var(--ShadowColorDark); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); } div.box table tr td p { font-size:0.9em; line-height:1.5em; } p.box { font-size:0.9em; line-height:1.5em; margin-top:0; margin-bottom:0.4em; } /* Textboxen (z.B. für Code) */ .kasten, .code { padding:0.5em 1em 0.5em 1em; border-width:1px; border-style:solid; border-color: var(--BoxBorderColorDark); box-shadow: var(--BoxShadow); max-width: 100%; position: relative; display: inline-block; text-align: left; overflow-wrap: break-word; } .code { color: var(--CodeColor); background-image: var(--CodeBgImage); border-color: var(--CodeBorderColorDark); } /* Gästebuch */ table.gb, table.gbentry { width: 67%; margin-top: 2em; margin-bottom: 2em; box-shadow: var(--BoxShadow); border-collapse: collapse; border-radius: var(--BorderRadius); } table.gblogin { width: auto; } table.gbnewentry { border-width:2px; border-color: var(--LinkColorHover); } table.gb tr th, table.gbentry tr th { font-size:1.1em; line-height: 1.5em; padding: 0.3em 1em 0.3em 1em; color: var(--HeaderTextColor); font-weight:bold; border-width:1px; border-bottom-style:solid; border-color: var(--BorderColorLight); background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); text-shadow: var(--ShadowSmall) var(--ShadowColorDark); border-radius: var(--BorderRadius) var(--BorderRadius) 0 0; } table.gb tr td { background-color: var(--BoxBgColor); padding:0.5em 1em 0.5em 1em; vertical-align:top; } table.gb tr:last-child td { border-radius: 0 0 var(--BorderRadius) var(--BorderRadius); } table.gb tr td textarea { font-family: var(--DefaultFont); font-size:1em; } table.gb tr td input, input.gb { font-size:1em; } table.gbentry tr td { background-color: var(--BoxBgColor); padding:1em; } table.gbentry tr:last-child td { border-radius: 0 0 var(--BorderRadius) var(--BorderRadius); } .gbinfo { } .gberror { color: var(--LinkColorHover); } .gbwarning { } .gbsignature { font-family: var(--SignatureFont); font-size: var(--SignatureSize); color: var(--SignatureColor); /* font-style: italic; */ } .gbcommentheader { line-height:1.5em; color: var(--HeaderTextColor); font-weight:bold; text-align:center; text-shadow: var(--ShadowSmall) var(--ShadowColorDark); background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); margin-top:2em; border-width:1px; border-style:solid; border-color: var(--BoxBorderColorLight); box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } @media only screen and (max-width: 600px) { table.gb, table.gbentry { width: 100%; } } /* Menü (rechts oben über der Seite schwebend) */ #menuWindow { position: fixed; top: var(--MenuTopPosition); right: var(--MenuRightPosition); } #menuExpanded { padding: 0.2em 0.5em 0.2em 0.5em; background-color: var(--MenuBgColor); background-image: var(--MenuBgImage); border: 1px solid var(--MenuBorderColor); box-shadow: var(--BoxShadow); border-radius: var(--BodyBorderRadius); } #menuCollapsed { } p.menuTitleSmall { font-size:1.5em; color: var(--HeaderTextColor); text-shadow: var(--ShadowSmall) var(--ShadowColorDark); margin-top:0; margin-bottom:0; padding: 0.2em; } p.menuTitle { font-size:1.1em; color: var(--HeaderTextColor); font-weight:bold; text-shadow: var(--ShadowSmall) var(--ShadowColorDark); margin-top:0; margin-bottom:0; } p.menuItem { margin-top:1.5em; margin-bottom:0.5em; } p.menuItem a { color: var(--LinkColorNormal); text-decoration:none; } p.menuItem a:hover { color: var(--LinkColorHover); } /* Sprachen-Menü (links oben über der Seite schwebend) */ #langMenu { position: fixed; top: var(--MenuTopPosition); left: var(--MenuLeftPosition); cursor: pointer; } #langMenu img { box-shadow: var(--BoxShadow); vertical-align: middle; margin-right: 0.5em; } span.langMenuLabel { } /* Zitate */ div.zitat { /* font-family: var(--QuoteFont); font-size:1.1em; */ background-color: var(--BoxBgColor); box-shadow: var(--BoxShadow); padding:0.5em 1.5em 0.5em 1.5em; margin-left:10%; margin-right:10%; margin-top:2em; margin-bottom:2em; border-radius: var(--BorderRadius); border-width:1px; border-style:solid; border-color: var(--BoxBorderColorDark); } @media only screen and (max-width: 600px) { div.zitat { margin-left:0; margin-right:0; } } /* Buttons und Eingabefelder */ .smalledit { border-width:1px; border-style:solid; border-color: var(--DefaultTextColor); font-size:1em; } .smallbutton { background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); margin:4px 2px; border-width:1px; border-style:solid; border-color: var(--ButtonBorderColorDark); font-size:1em; color: var(--DefaultTextColor); box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } .button { background-color: var(--HeaderBgColor); background-image: var(--HeaderBgImage); border-width:1px; border-style:solid; border-color: var(--ButtonBorderColorLight); font-family: var(--ButtonFont); font-size:1.1em; font-weight:bold; margin: 0.5em; padding: 0.5em 1em 0.5em 1em; color: var(--DefaultTextColor); box-shadow: var(--BoxShadow); border-radius: var(--BorderRadius); } .button:enabled:hover, .smallbutton:enabled:hover { color: var(--LinkColorHover); } .button:disabled, .smallbutton:disabled { filter: opacity(0.5); } /* Tooltips */ div.tooltip { background-color: var(--TooltipBgColor); border-width:1px; border-style:solid; border-color: var(--TooltipBorderColor); padding:0.5em; box-shadow: var(--BoxShadow); } div.tooltip p { font-size:0.9em; line-height:1em; margin:0; color: var(--TooltipTextColor); } a.tooltip:link, a.tooltip:active, a.tooltip:visited, a.tooltip:hover { color: var(--TooltipLinkColor); font-weight:normal; text-decoration:underline; } /* Bilduntertitel */ p.image { font-size:0.9em; } /* Bilder */ img.bild { box-shadow: var(--BoxShadow); } .foto, .nistkasten-foto { padding:5px; background-color: var(--FotoBgColor); border-width:1px; border-style:solid; border-color: var(--FotoBorderColor); box-shadow: var(--BoxShadow); } body > p > img, body > p > a > img, body > div > p > img, div.thumbnail img, div.yourimage img { max-width: 100%; } /* YouTube-Video (4:3) */ iframe.youtube43 { max-width: 100%; max-height: calc((100vw - 2*2em) / (4/3)); } /* Video-Player */ video.videoplayer { max-width: 100%; height: auto; outline: 0; } /* Audio-Player*/ .audioplayer { width: 400px; min-width: 200px; max-width: 100%; outline: 0; vertical-align: middle; /* margin-top: 0.5em; margin-bottom: 0.5em; */ border-radius: 20px; /* für Firefox */ height: 40px; /* für Chrome */ } /* siehe hier: https://pointclearmedia.com/2020/08/27/css-styling-the-audio-element/ */ audio::-webkit-media-controls-panel { background-color: var(--AudioBgColor); background-image: var(--AudioBgImage); } /* Verschiedenes */ ul { padding-left: 1.5em; } ul li { margin:0.5em 0em 0.5em 0em; } sub, sup { line-height:0; } textarea, pre { -moz-tab-size:4; -o-tab-size:4; tab-size:4; } select { font-size:1em; } pre { white-space: pre-wrap; overflow-wrap: break-word; /* word-wrap: break-word; */ hyphens: manual; } /* Fettschrift */ b { color: var(--BoldTextColor); } /* Hervorgehobener Text */ h { font-weight:bold; color: var(--HighlightTextColor); } span.subtitle, div.yourimage { font-size:0.8em; } img.email-impressum { vertical-align:bottom; height: 1.2em; } /* OSD-Text für Nistkasten-Kamera */ .osd { font-family:Arial, sans-serif; font-size:1.8em; color:#00ff00; font-weight:bold; } /* Ersatz für align="center" -> class="center" */ .center { text-align: center; } .right { text-align: right; } /* Ersatz für