/* raifra.css $Id: raifra.css,v 1.27 2026/06/13 04:16:02 raifra Rel $
 *
 * Alle CSS-Definitionen für meine Homepage, bis auf wenige Ausnahmen, die in
 * eigenen CSS-Dateien definiert sind (wie beispielsweise die Schriften).
 *
 * Die CSS-Definitionen sind in drei Bereiche unterteilt:
 *
 * 1. Definitionen, die in jedem Fall gelten.
 * 2. Definitionen, die nur für große Ausgabe-Geräte (in der Regel Desktop-
 *    Monitore) gelten. Sie überschreiben ggf. die Definitionen von 1.
 * 3. Definitionen die nur im Dunkel-Modus gelten. Sie überschreiben ggf. die
 *    Definitionen von 1 und 2.
 *
 * Wie üblich, erkennt man den Beginn eines neuen Bereichs an der "@media"-
 * Zeile.
 *
 * Die CSS-Datei ist vorbereitet für die automatische Umschaltung von hellem
 * oder dunklem Design aufgrund von "prefers-color-schema". Allerdings ist
 * dies derzeit nicht aktiv, d.h. es wird immer die dunkle Variante verwendet,
 * was an meiner persönlichen Vorliebe für die dunkle Design-Variante liegt.
 *
 * Rainer Frädrich, www.raifra.de
 *
 */

/* Fontdefinitionen sind separat in einer eigenen CSS-Datei abgelegt */

@import "fonts.css";

/*
 * Bei Bedarf können zusätzliche Fontdefinitionen für Captions bzw. für Zitate
 * hinzugeladen werden. In der Regel wird die Möglichkeit nicht benutzt,
 * weshalb die zuständigen Import-Zeilen hier auskommentiert sind.
 *
 * @import "captionfont.css"
 * @import "quotefont.css"
 *
 */

/* Einblenden der Seite */

@keyframes fadein
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

.nofade { animation-name: none; }

.fader
{
    animation-name: fadein;
    animation-timing-function: ease-in;
}

/* HTML-Schlüsselworte */

body
{
    animation-name: fadein;
    animation-duration: 0.67s;
    animation-timing-function: ease-in;
    margin: 0 auto;
    padding: 0;
    color: black;
    background-color: #f3f4f5;
    font-family: FontSans, sans-serif;
}

h1, h2, h3, h4, h5, h6, small { font-weight: normal; }
h1, h2, h3, h4, h5 { font-family: FontSerif, serif; }
h1, h2, h3, h4 { color: #333333; }
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6, small { font-size: 0.9em; }

p
{
    margin: 0 0 1.5em 0;
    line-height: 1.4;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

hr
{
    border-top: 1px solid black;
    margin: 0 0 1em 0;
}

sup
{
    vertical-align: top;
    font-size: 0.6em;
}

li { line-height: 1.4; }

input[type="file"] { font-size: 0.9em; }
input[type="submit"] { font-size: 0.9em; }
textarea { font-size: 0.9em; }

a { text-decoration: none; }
a:link { color: #1c6b86; }
a:visited { color: #666666; }
a:focus { background: #99ccff; }
a:hover { color: black; }
a:active { color: red; }

/* Navigation */

.nav a { text-decoration: none; }
.nav a:link { color: #1c6b86; }
.nav a:visited { color: #666666; }
.nav a:focus { background: #99ccff; }
.nav a:hover { color: black; }
.nav a:active { color: red; }

.imgnav, .imgnav-opaque { margin: 0 auto; }

.nav
{
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}

.nav li
{
    display: inline;
    margin: 0 auto;
}

.nav a
{
    display: block;
    padding: 0.5em;
    text-decoration: none;
}

/* Knöpfe */

.button, .button2
{
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.linkbox
{
    padding: 1em 0 0 0;
    margin: 0 0 1em 0;
}

/* Textjustierung */

.nobookindent, .nobookindent-2, .bookindent
{
    text-align: justify;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0 auto;
}

.nobookindent-2 { margin: 0 0 0.25em 0; }
.bookindent, .textindent { text-indent: 1em; }
.nomargin { margin: 0 auto; }
.nomarginl { margin: 0 auto; text-align: left; }
.nomarginr { margin: 0 auto; text-align: right; }

/* Titel und Untertitel  */

.title
{
    font-family: FontSerif, serif;
    color: inherit;
    margin: 1em 0 0 0;
}

.subtitle
{
    font-size: 0.9em;
    color: inherit;
    margin: 0 0 0.5em 0;
}

.xmas-type
{
    font-size: 0.9em;
    color: #a07060;
}

.rcsid
{
    font-size: 0.9em;
    color: #c0c0c0;
    opacity: 0.0;
}

.rcsid:hover { opacity: 1.0; }

/* Container */
 
.small-container, .container-600, .container-700, .container,
.container-750, .container-800, container-1000, .container-1050,
.container-1200, .container-1300, .container-1400, .wide-container,
.wcontainer, .wwcontainer, .max-container
{
    margin: 0 auto;
    text-align: center;
    padding: 0.1em 0.5em 0.5em 0.5em;
}

.small-container, .container-600 { max-width: 600px; }
.container-700 { max-width: 700px; }
.container-750 { max-width: 750px; }
.container-1050 { max-width: 1050px; }
.container-1200 { max-width: 1200px; }
.container, .container-800 { max-width: 800px; }
.wcontainer, .container-1000 { max-width: 1000px; }
.wwcontainer, .container-1300 { max-width: 1300px; }
.wide-container, .container-1400 { max-width: 1400px; }
.max-container { max-width: initial; }

.img-container { padding: 1em; }

.text-container, .text-container-1, .text-container-2 { margin-bottom: 1em; }

.text-container-1
{
    background-color: #e4e4e4;
    padding: 0.7em 1em 1em 1em;
}

.text-container-2
{
    display: inline-block;
/*    background-color: #444444; */
    max-width: 800px;
    width: 100%;
    padding: 0.2em 0 0.2em 0;
    margin 0 auto;
}

.caption-container, .quote-container, .quote-container-400
{
    padding: 0;
    border: 0;
    margin: 0 auto;
    max-width: 600px;
}

.quote-container-400 { max-width: 400px; }

.caption-container { font-size: 0.9em; }
.lightbox-container { border: none; }

.col-container
{
    display: table;
    border-spacing: 0;
    text-align: left; 
    width: 100%;
}

.col
{
    display: block;
    border: none;
}

.journal-container
{
    display: inline-block;
    margin: 0 0.5em 1em 0.5em;
}

.econtainer
{
    display: inline-block;
    margin: 0 0.25em 0 0.25em;
}

.econtainer-2
{
    display: inline-block;
    margin: 0 0.25em 1em 0.25em;
}

.border-container, .border-container-1, .border-container-2,
.border-container-3, border-container-4, .border-container-5,
.border-container-6, .solcol-container, .solcol-blog-container
{
    border: none;
}

.border-container-5, .border-container-6
{
    margin: 1em;
    padding: 0.1em 1em 1em 1em;
    background-color: #f9fafc;
}

.border-container-6 { background-color: inherit; }

.title-container
{
    margin: 0 auto;
    border: 0;
    padding: 1em;
}

.info-container
{
    margin: 0 auto;
    border: 0;
    padding: 0;
}

.imglink-container, .imglink-border-container
{
    display: inline-block;
    padding: 0.5em 1.1em 1em 1.1em;
}

.hover-container
{
    position: relative;
}

.hover-container .after
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}

.hover-container:hover .after
{
    display: block;
    background: rgba(0, 0, 0, .6);
}

/*
 * Postionierungs-Einstellung für explizit aufgeteilte Seiten in Kopfbereich,
 * Inhalts-Bereich und Fußbereich
 */

/* Kopfbereich */

.topheader, .topheader-1
{
    padding: 2em 0 2em 0;
    font-family: FontSerif, serif;
    font-size: 1.5em;
    font-weight: normal;
}

.topheader-1
{
    font-family: initial;
    font-size: 1em;
}

.header, .header-top { padding: 1em 0 0.2em 0; }
.header-heading { margin: 0.5em; }

/* Inhaltsbereich */

.startheader, .startheader-1
{
    padding: 2em 0 2em 0;
    font-weight: normal;
    line-height: 1.75em;
}

.startheader
{
    font-family: FontSerif, serif;
    font-size: 1.5em;
}

.startheader-1 { font-size: 1.0em; }

/* Fußbereich */

.footer, .footer-bottom, .footer-bottom-1 { padding: 0; }

.img-responsive, .img-responsive-fl, .img-responsive-fr,
.img-nodecoration-fl, .img-nodecoration-fr,
.img-nodecoration, .img-responsive-sc, .img-responsive-noshadow,
.img-hover
{
    max-width: 100%;
    max-height: 100%;
    border: none;
}

/* Bilder */

.img-hover { transition: all 0.25s ease-in-out; }

.img-hover:hover
{
/*    filter: brightness(90%); */
/*    filter: sepia(25%); */
    transform: scale(1.02);
}

.img-responsive-fl, .img-responsive-fr, .img-responsive-sc,
    .img-responsive-nd { border: none; }

.img-responsive-b { border: 3px solid white; }
.img-responsive-noshadow { border: 1px solid #c0c0c0; }
.img-nodecoration { border: none; }
.img-responsive-sc { height: initial; }
.img-responsive-nd { width: 85%; }

.img-responsive-fl
{
    float: left;
    margin: .3em 1em 0 0;
}

.img-responsive-fr
{
    float: right;
    margin: .3em 0 0 1em;
}

.img-nodecoration-fl
{
    float: left;
    margin: .3em 1em 0 0;
    border: none;
}

.img-nodecoration-fr
{
    float: right;
    margin: .3em 0 0 1em;
    border: none;
}

/*---------------------------------------------------------------------------*/

/*
 * Start der Definitionen für große Ausgabe-Geräte (Desktop-Monitore usw.),
 * die die weiter oben stehenden Definitionen überschreiben.
 */

@media (min-width: 500px) and (min-height: 600px)
{
    .topheader, .topheader-1
    {
	font-weight: normal;
	margin: 0 auto;
	padding: 0;
        border: 0;
	text-align: center;
	position: absolute;
	top: 8%;
	left: 50%;
	width: 90%;
	transform: translateX(-50%) translateY(-50%);
    }

    .topheader-1 { top: 5%; }

    .startheader, .startheader-1
    {
	font-weight: normal;
	margin: 0 auto;
	padding: 0;
        border: 0;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform: translateX(-50%) translateY(-50%);
    }

    .header-top
    {
	margin: 0 auto;
        padding: 0;
	text-align: center;
	position: absolute;
	top: 5%;
	left: 50%;
        width: 90%;
	transform: translateX(-50%) translateY(-50%);
    }

    .footer-bottom, .footer-bottom-1
    {
	margin: 0 auto;
        padding: 0;
	text-align: center;
	position: absolute;
	top: 92%;
	left: 50%;
        width: 90%;
	transform: translateX(-50%) translateY(-50%);
    }

    .footer-bottom-1 { top: 97%; }
    .header-heading { margin: 1em 0 1em 0; }

    .solcol-container, .solcol-blog-container
    {
	margin: 1em;
	padding: 2em 1em 2em 1em;
	background-color: #c0c4c4;
    }

    .solcol-blog-container { padding: 0 1em 1em 1em; }

    .border-container
    {
        margin: 1em;
	padding: 0em 1em 1em 1em;
	border: 1px solid #202020;
    }

    .border-container-1
    {
	margin: 1em;
	padding: 1em 1em 0em 1em;
	border: 1px solid #202020;
    }

    .border-container-2
    {
	padding: 2em 0 2em 0;
        border-top: 1px solid white;
        border-bottom: 1px solid #a0a0a0;
        background-color: #e0e0e0;
    }

    .border-container-3
    {
	margin: 1em;
	padding: 0 1em 0em 1em;
	border-top: 1px solid white;
	border-bottom: 1px solid #e0e0e0;
	background-color: #f0f0f0;
    }

    .border-container-4
    {
        margin: 1em;
        padding: 0 0 0.5em 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07), 0 6px 20px 0
                        rgba(0, 0, 0, 0.06);
    }

    .imglink-border-container
    {
	padding: 1em 1em 0em 1em;
	border: 1px solid #202020;
    }

    .button
    {
	background-color: #202020;
	padding: 1em 1em 0 1em;
	margin: 0.5em;
    }

    .button2
    {
	background-color: inherit;
	padding: 1em;
    }
 
    .lightbox-container
    {
	width: auto;
	margin: 0px 0px 10px 0px;
	padding-top: 0.1em;
	padding-bottom: 1.1em;
	border: 1px solid #202020;
	border-radius: 5px;
	background-color: #f9f9f9;
    }

    .linkbox
    {
	padding: 1em 0 0 0;
	margin: 0 0 1em 0;
	border: 1px solid #202020;
	border-radius: 5px;
	background-color: #f9f9f9;
    }

    .img-responsive-sc { width: 20%; }

    .nav li
    {
	display: inline;
	margin: 0 0.4em 0 0.4em;
    }
    
    .nav a
    {
	display: inline;
	padding: 0;
	border-bottom: 0;
    }

    .col
    {
	display: table-cell;
	border: none;
    }

}

/*---------------------------------------------------------------------------*/

/*
 * Start der Definitionen für den Dunkelmodus, die die weiter oben stehenden
 * Definitionen überschreiben. Wie ganz oben in der Einleitung schon erwähnt,
 * wird derzeit immer der Dunkelmodus verwendet, daher steht hier
 * "@media screen" statt "@media (prefers-color-scheme: dark)".
 */

@media screen
/* @media (prefers-color-scheme: dark) */
{
    body
    {
	color: white;
	background-color: #303030;
    }

    h1, h2, h3, h4, h5, h6, small { color: white; }
    h1, h2, h3, h4 { color: #e0e0e0; }

    a:link { color: #60b0f0; }
    a:visited { color: #999999; }
    a:focus { background: #336699; }
    a:hover { color: white; }
    a:active { color: red; }

    .nav a:link { color: #60b0f0; }
    .nav a:visited { color: #999999; }
    .nav a:focus { background: #336699; }
    .nav a:hover { color: white; }
    .nav a:active { color: red; }

    .xmas-type { color: #662a1f; }

    .text-container-1 {	background-color: #202020; }

    .border-container-2
    {
	border-top: 1px solid #555555;
	border-bottom: 1px solid black;
	background-color: #202020;
    }

    .border-container-5, .border-container-6
    {
	background-color: #202020;
    }

    .text-container-1 { background-color: #202020; }

    .img-responsive, .img-responsive-fl, .img-responsive-fr,
    .img-nodecoration-fl, .img-nodecoration-fr,
    .img-nodecoration, .img-responsive-sc, .img-responsive-noshadow,
    .img-nodecoration { border: none; }
}