steht */ --text-schatten:0 0px 10px rgba(0, 0, 0, 0.30); --color-h1:var(--MSF); --color-h2:var(--MSF); --color-h3:var(--MSF); --color-p:var(--MSFd); /* auch für gesetzt */ --color-p-strong:var(--MSF); --color-a:teal; --color-a-hover:var(--EF); --article-background:rgb(255, 255, 255, 0.95); /* transparentes weiß;

background */ --article-border:var(--SF); /* Umrandung des Textes; derzeit nur links und oben definiert */ --footer-color:var(--MSFd); /* footer Schriftfarbe; sollte ähnlich dem Logo (schwarz) sein */ --footer-a:var(--MSFd); --footer-background:rgb(255, 255, 255, 0.5); /* beim footer ist die transparenz erhöht */ --label-design:var(--SF); /* "teal"; transparentes blau:rgb(0, 0, 255, 0.4); background,

border */ --input-label-color-notchecked:var(--weiß); /* label Beschriftung "mehr erfahren" */ --input-label-background-notchecked:; /* Hintergrund label Beschriftung "mehr erfahren" */ --input-label-color-checked:#b3b3b3; /* label Beschriftung "Pfeilchen" */ --input-label-background-checked:var(--weiß); /* Hintergrund label Beschriftung "Pfeilchen" */ --nav-color:var(--MSFd); /* es handelt sich dabei nur um Links; die Schriftfarbe kann hier aber extra definiert werden; der hoover wird aber normal übernommen */ --nav-background:var(--weiß); --error-color:var(--EF); /* Hinweistext bei vergessenen/falschen Feldern; dunkles rot */ --error-background:#ff9999; /* helles rot */ --senden-color:teal; /* Schriftfarbe beim Kontakt Senden-Button */ --session-aktualisieren:#ff9900; /* dunkles orange; session button */ --session-nav-background:var(--weiß); } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ *{ padding:0px; margin:0px; } img { max-width:100%; height:auto; margin-bottom:-4px /* diese Angabe ist nötig weil sonst unterhalb von Grafiken ein Abstand ensteht */ } /* ──────────────────────────────────────────────────────────────────────────────────────────────────── */ html, body { font:16px "Verdana", Geneva, sans-serif; text-align:left; /* für ältere Browser wichtig */ color:var(--color-p); /* Schriftfarbe grau */ /* INFO: "background-image" wird auf jeder Seite extra definiert! */ /* Die Grafik wird über die gesamte Bildschirmbreite gestreckt bzw. ein bisschen darüber gezoomt damit beim skalieren (Scrollleiste) nicht unten ein weißer Rand kommt. Das kann eventuell unterbleiben wenn das Seitenverhältnis der Grafik geändert wird */ background-size:100.9% auto; background-repeat:no-repeat; /* nicht gekachelt... */ background-attachment:fixed; /* und scrollt nicht mit */ } @media (max-aspect-ratio:16/9) { /* bei landscape wird die 100% Skalierung auf Hochformat umgeschaltet... */ html, body { background-size:auto 100%; animation:myAnim 80s linear 0s 1 normal forwards /* und damit tritt eine Animation in Kraft */ } } @keyframes myAnim { 0% { background-position:0% 50% } 100% { background-position:100% 50% } } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ h1 { font-size:2.25em; color:var(--color-h1) } h2{ font-size:1.813; color:var(--color-h2) } h3 { font-size:1.375; color:var(--color-h3) } a { text-decoration:none; color:var(--color-a) } a:hover{ color:var(--color-a-hover); } /* damit bewusst gesetzte "schwarze" Links beim hovern erkennbar sind */ hr { border:none; margin:1em 0 1em 0; border-top:1px solid var(--color-hr) } p { margin:1em 0; line-height:1.4; color:var(--color-p) } p > strong { color:var(--color-p-strong) } /* spezielle Farbe für Fettschreibung */ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ #site { /* nach dem die oberste Ebene: der Content "Rahmen" der Website */ position:relative; max-width:50%; /* am Anfang (großer Bildschirm) wird bewusst auf den Platz eingeschränkt... */ margin:auto auto; /* und mittig ausgerichtet */ } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* BEGINN SESSION BEREICH */ #session_site { /* SESSIONBEREICH: Content Bereich */ position:relative; top:50px; left:20px; max-width:1000px; /* bewusst mit px definiert */ } #session_section { /* SESSIONBEREICH: kommt nach "session_site" und umschließt alles weitere */ padding:2%; font-size:16px } #aktualisieren { /* SESSIONBEREICH: der Aktualisieren Button */ position:fixed; top:3px; right:40px; padding:5px 20px; background-color:var(--session-aktualisieren); border-radius:5px } /* ENDE SESSION BEREICH */ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* BEGINN "Einblenden" der Backgrounds (eigentlich wird die "Abdeckung" ausgeblendet */ #abdeckung { position:absolute; top:0px; left:0px; width:100vw; height:100vh; background-color:var(--abdeckung); opacity:0; /* die Abdeckung ist vorerst ausgeblendet, im Falle bei Nichtunterstützung der Animation */ animation:background_fade 3s; /* hier wird die Dauer der Animation definiert */ } @keyframes background_fade { 0% {opacity:1; z-index:100;} /* zuerst wird die "Abdeckung" voll angezeigt */ 30% {opacity:1;} /* erst nach 10% beginnt das ausblenden (wegen Ladezeit) */ 100% {opacity:0; z-index:0;} } /* ENDE "Einblenden" der Backgrounds */ /* ──────────────────────────────────────────────────────────────────────────────────────────────────── */ /* BEGINN langsames Einblenden (z.B. Textbereich) */ .fade_slow { opacity:1; /* der Textbereich ist vorerst voll eingeblendet, im Falle bei Nichtunterstützung der Animation */ animation:fade_slow 3s; /* hier wird die Dauer der Animation definiert */ } @keyframes fade_slow { 0% {opacity:0;} /* zu Beginn ist der Textbereich ausgeblendet */ 60% {opacity:0;} /* erst nach einer bestimmten Zeit, beginnt das Einblenden */ 100% {opacity:1;} } /* ENDE langsames Einblenden */ /* ──────────────────────────────────────────────────────────────────────────────────────────────────── */ /* BEGINN schnelles Einblenden (z.B. Textbereich) */ .fade_fast { opacity:1; animation:fade_fast 2s; } @keyframes fade_fast { 0% {opacity:0;} 100% {opacity:1;} } /* ENDE schnelles Einblenden */ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* BEGINN Navigation */ nav { position:fixed; top:30px; /* der Abstand des Menüs von oben */ right:0px; /* damit wird das Menü am rechten Rand ausgerichtet */ width:150px; /* die Größe des aufgeklappten Menüs */ font-size:120%; } nav img { display:block; height:70px; /* die Größe der Burger-Grafik */ width:auto; float:right; /* damit wird die Burger-Grafik automatisch zuerst ganz rechts außen ausgerichtet... */ margin-right:30px; /* ... und damit etwas vom rechten Rand eingerückt */ margin-bottom:8px; /* der Abstand der Burger-Grafik zum aufgeklappten Menü */ box-shadow:0px 2px 10px rgba(0, 0, 0, 0.1); } input.nav_zu { display:none; } label.nav_lesen { cursor:pointer; } span.nav_open { display:block; /* da es ein Auf- UND Zuklappen gibt, ist die Sichtbarkeit gleich von Anfang an gegeben! */ float:right; width:100%; padding:5px 0 10px 10px; background-color:var(--nav-background); border-radius:10px 0 0 10px; box-shadow:0px 10px 3px rgba(0, 0, 0, 0.35); } input.nav_lesen:checked ~ span.nav_open { animation:nav_auf 0.8s ease 0s 1 normal forwards; } @keyframes nav_auf { 0% { opacity:0; transform:rotateY(-100deg); transform-origin:right; } 100% { opacity:1; transform:rotateY(0deg); transform-origin:right; } } input.nav_lesen:not(:checked) ~ span.nav_open { animation:nav_zu 0.8s ease 0s 1 normal forwards; } @keyframes nav_zu { 0% { opacity:1; transform:rotateY(0deg); transform-origin:right; } 100% { opacity:0; transform:rotateY(-100deg); transform-origin:right; } } .nav_open > a { text-decoration:none; /* kein Unterstrich bei Links */ color:var(--color-a); /* normale Schriftfarbe */ line-height:200%; /* Abstand der Menüeinträge */ transition:all 0.7s ease; } .nav_open > a:hover { color:var(--color-a-hover); font-size:115%; font-weight:bold; transition:all 0.7s ease; } #nav_leiste { /* die Navigationsleiste im Sessionbereich */ position:fixed; top:0px; width:100%; padding:10px 20px; background-color:var(--session-nav-background); box-shadow:0px 10px 3px rgba(0, 0, 0, 0.35); } #nav_leiste a { margin-right:5% } /* die Abstände der Navigationsleiste Einträge im Sessionbereich */ /* ENDE Navigtion */ /* ──────────────────────────────────────────────────────────────────────────────────────────────────── */ /* ▄■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▄ █******************************* BEGINN Content ********************************█ ▀■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▀ */ section { /* umschließt den

Tag */ margin-top:5%; /* Position der Überschrift (und Aufklapp-Button, Text) */ } section > label > h1 { /* der Seiten Titel - wenn in Kombination mit einer Hackbox */ font-size:3.5em; margin-bottom:8px; /* damit wird der Abstand von Überschrift zum Aufklapp-Button definiert */ color:var(--color-head-titel); text-shadow:var(--text-schatten); } article { /* der Haupt-Text einer Seite */ position:relative; top:-10px; max-height:55vh; /* der Textbereich soll nicht über den footer reichen; sonst ist dieser nicht mehr anklickbar */ background-color:var(--article-background); padding:6%; /* Innenrand */ opacity:1; border-radius:0 30px 30px; border-width:thin; border-style:solid none none solid; /* Rahmen nur oben und links */ border-color:var(--article-border); /* ein helles Blau */ overflow-y:auto; } input.content_hackbox { display:none; } input.content_hackbox:not(:checked) ~ label.content_mehr_lesen::after { content:'\25BA mehr erfahren...'; cursor:pointer; color:var(--input-label-color-notchecked); text-shadow:var(--text-schatten); padding:5px 10px; border-radius:8px 8px; background-color:var(--input-label-background-notchecked); } input.content_hackbox:checked ~ label.content_mehr_lesen::after { position:relative; top:-10px; content:'\25B2'; font-size:70%; color:var(--input-label-color-checked); padding:1px 5px; border-radius:10px 10px 0 0; background-color:var(--input-label-background-checked); } input.content_hackbox:checked ~ article.content_volltext { animation:aufklappen 0.8s ease 0s 1 normal forwards; } @keyframes aufklappen { 0% { opacity:0; transform:rotateX(-90deg); transform-origin:top; } 100% { opacity:1; transform:rotateX(0deg); transform-origin:top; } } input.content_hackbox:not(:checked) ~ article.content_volltext { animation:zuklappen 0.6s ease 0s 1 normal forwards; } @keyframes zuklappen { 0% { opacity:1; transform:rotateX(0deg); transform-origin:top; } 100% { opacity:0; transform:rotateX(-90deg); transform-origin:top; } } /* ENDE Content */ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ footer{ position:fixed; padding-left:calc(50vw - 250px); bottom:0px; margin-bottom:5px; width:100%; background-color:var(--footer-background); height:35px; } footer .hoflogo{ position:relative; opacity:1; height:30px; width:auto; bottom:-3px; } footer > p { position:relative; bottom:0px; color:var(--footer-color); } footer > p > a{ text-decoration:none; color:var(--footer-a); } /* ▄■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▄ █********************* ANPASSUNGEN AN BILDSCHIRMGRÖSSEN ************************█ ▀■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▀ */ @media screen and (max-width:1500px) { #site { max-width:70%; } /* der Platz kann jetzt großzügiger genützt werden; (bei alles darüber ist es 50%) */ } @media screen and (max-width:1280px) { article { padding:1% 6%; border-radius:0; } /* weil die Platzverhältnisse enger werden (Laptop) wird der großzügige Rand oben/unten entfernt; außerdem werden die runden Ecken entfernt */ } @media screen and (max-width:840px) { nav { top:18px; /* der Abstand der Burger-Grafik von oben */ width:20%; /* die Größe des aufgeklappten Menü-Bereichs */ font-size:120%; } nav img { margin-right:18px; } /* der Abstand der Burger-Grafik vom rechten Rand; soll immer gleich wie bei "nav top" sein */ label > textarea{ margin-top:35px; } } @media screen and (max-width:600px) { #site { max-width:95%; } nav { top:15px; /* der Abstand der Burger-Grafik */ width:30%; /* die Größe des aufgeklappten Menü-Bereichs */ font-size:130%; } nav img { height:50px; /* die Größe der Burger-Grafik */ margin-right:15px; /* der Abstand der Burger-Grafik vom rechten Rand; soll immer gleich wie bei "nav top" sein */ } article { max-height:73vh; } /* die Box für den Text kann wieder höher werden (Smartphones); soll nicht über den footer reichen sonst ist dieser nicht mehr anklickbar */ section > label > h1 { text-align:left; font-size:2.5em; } section { margin-top:17%; } /* Position der Überschrift (und Aufklapp-Button bzw. Text) */ input.content_hackbox:not(:checked) ~ label.content_mehr_lesen::after { color:#fff; /* ...die Beschriftung wird weiß... */ font-size:130%; /* ...und daher etwas vergrößert */ background-color:rgba(255,255,255,0); /* es wird keine Hintergrundfarbe mehr angezeigt; damit "stört" der Button weniger im beengten Raum */ padding:0; /* der Border wird nicht mehr benötigt */ border-radius:0; /* und zwecks Korrektheit werden auch die runden Ecken aufgehoben */ text-shadow:0 0 2px rgba(0, 0, 0, 1) /* ein Schatten zum besseren Erkennen auf hellem Hintergrund */ } input.content_hackbox:checked ~ label.content_mehr_lesen::after { border-radius:0; text-shadow:0 0 3px rgba(0, 0, 0, 0) } footer { text-align:left; padding-left:5px; } } @media screen and (max-height:500px) { /* gilt für den Smartphones landscape Modus */ article { padding:0% 4%; } /* die Ränder werden kleiner (6%) */ article { max-height:55vh; } /* die Box für den Text; soll nicht über den footer reichen sonst ist dieser nicht mehr anklickbar */ section > label > h1 { font-size:2em; } } @media screen and (max-width:440px) { section > label > h1 { font-size:2em; } nav { width:40%; } /* die Größe des aufgeklappten Menü-Bereichs */ footer { height:60px; } footer .hoflogo { height:30px; top:15px; bottom:0px; } footer > p { padding-right:20%; } /* damit "Impressum" früher in die zweite Zeile rutscht */ } @media screen and (max-width:390px) { article { max-height:58vh; } /* die Box für den Text; soll nicht über den footer reichen sonst ist dieser nicht mehr anklickbar */ footer > p { padding-right:0%; } /* hier weiter oben noch extra definiert, aber jetzt nicht mehr benötigt; und zur Vermeidung von anderen Störungen bewusst wieder aufgehoben */ }