/*
Theme Name: Fahrschule Zamzow
Author: publiccom GmbH
Author URI: http://www.publiccom.de
Description: Theme XXX
Version: 1.5
License: -
License URI: -
Tags: XXX, bootstrap 4, css, jquery
*/
/*
handy hochkant < = 576
handy quer > = 576
tablet hochkant = 768
tablet quer = 992
laptop = 1200
desktop = 1920
4K = > 1920
GANZOBEN
*/
/*### 01. CSS Reset/universelle CSS-Regeln ###*/
html {
font-size: 20px;
scroll-behavior: smooth !important;
}
@media (max-width:820px) {
html {
font-size: 18px;
}
}
body {
font-size: 1rem;
font-family: 'PT Sans', sans-serif;
background-color: #383838;
position: relative;
height: 100%;
color: #ffffff;
scroll-behavior: smooth !important;
min-width: 100%;
max-width: 100%;
margin: 0px;
overflow-x: hidden;
}
/* XXX Hintergründe und Schriften XXX */
.hintergrundfarbe5 {
background-color: #383838 !important;
}
.hintergrundfarbe2 {
background-color: #e30613 !important;
}
.hintergrundfarbe3 {
background-color: #ffffff !important;
}
.hintergrundfarbe4 {
background-color: #8e8e8e !important;
}
.hintergrundfarbe1 {
background-color: #282828 !important;
}
.schriftfarbe1 {
color: #ffffff;
}
.schriftfarbe2 {
color: #5d5d5d;
}
.schriftfarbe3 {
color: #e30613;
}
.schriftfarbe4 {
color: #8e8e8e;
}
.schriftfarbe5 {
color: #282828;
}
nav {
border-radius: 0 !important;
margin: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
table,
caption {
margin: 0 0 1rem 0;
padding: 0;
text-decoration: none;
}
p {
font-size: 1rem;
text-decoration: none;
}
p:empty {
display: none;
}
li {
font-size: 1rem;
text-decoration: none;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.2rem;
}
a,
a:hover,
a:focus {
outline: none !important;
text-decoration: none;
}
textarea {
resize: vertical;
min-height: 10rem;
}
iframe {
display: block;
width: 100%;
height: 500px;
border: 1px solid #ffffff;
}
button:focus {
outline: none;
}
svg {
width: 100%;
height: auto;
}
/* ### HEADER ### */
.header.sticky-top {
/*background-color: rgba(40, 40, 40, 0.5);*/
/*padding: 20px 80px !important;*/
align-items: center;
align-content: center;
display: flex;
}
/* ### MAINMENU ### */
.navbar-default {
background: transparent !important;
border: 0;
}
.navbar-default .navbar-nav>li>a {
font-weight: 800;
color: #8e8e8e;
margin-left: 20px;
padding: 5px;
line-height: 1;
border-bottom: 5px solid rgba(227, 6, 19, 0);
transition: all 0.25s;
display: block;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
border-bottom: 5px solid rgba(227, 6, 19, 1);
transition: all 0.25s;
}
.navbar-default .navbar-nav>li.open.dropdown>ul {
position: absolute;
display: block;
border: 0;
border-radius: 0;
background: #ffffff;
box-shadow: none;
float: none;
}
.navbar-default .navbar-nav>li.open.dropdown>ul>li>a {
color: #666;
background: none;
}
.navbar-default .navbar-nav>li.open.dropdown>ul>li.active>a,
.navbar-default .navbar-nav>li.open.dropdown>ul>li>a:hover {
color: #0786c0;
}
.navbar-default .navbar-toggler {
position: relative;
z-index: 998;
border: 0;
}
.navbar-default .navbar-toggler .icon-bar {
transform: rotate(45deg);
}
.navbar-default .navbar-toggler.collapsed .icon-bar:nth-child(3) {
width: 30px;
}
.navbar-default .navbar-toggler.collapsed:hover .icon-bar:nth-child(3) {
width: 45px;
}
.navbar-default .navbar-toggler .icon-bar:nth-child(3) {
transform: rotate(-45deg);
margin-top: -4px;
}
.navbar-default .navbar-toggler .icon-bar:nth-child(4) {
display: none;
}
.navbar-default .navbar-toggler .icon-bar {
background: #ffffff;
border-radius: 0;
margin-left: 8px;
width: 45px;
height: 2px;
transition: all linear 0.2s;
display: block;
}
.navbar-default .navbar-toggler.collapsed .icon-bar {
margin-top: 11px;
transform: rotate(0deg);
}
.navbar-default .navbar-toggler.collapsed .icon-bar:nth-child(2) {
margin-top: 0px;
}
.navbar-default .navbar-toggler.collapsed .icon-bar:nth-child(4) {
display: block;
}
.navbar-default .navbar-toggle {
border: 0;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: transparent !important;
}
.navbar {
position: static;
height: 100%;
}
.navbar-nav {
width: 100%;
flex-direction: row;
}
.navbar-header {
margin-top: 0;
}
.navbar-brand {
position: relative;
z-index: 994;
float: none;
height: 55px;
}
/* ### FOOTER ### */
.footer {
display: flex;
flex-direction: column;
/*text-align: center;*/
}
.footer-table {
display: flex;
flex-direction: column;
width: 100%;
}
.footer-table h2,
.footer-table caption {
margin-bottom: 0.2rem;
}
.footer-table a {
margin-bottom: 0rem;
}
td:nth-child(1) {
margin-right: 1rem;
display: flex;
}
.kg-zamzow {
max-width: 100%;
}
.kg-zamzow img {
max-width: 300px;
width: 100%;
height: auto;
object-fit: cover;
}
.table-faq {
width: 100%;
}
.table-faq td:nth-child(1) {
padding: 0;
}
.table-faq tr {
border-bottom: 2px solid #ffffff;
}
.table-faq tr:nth-last-child(1) {
border-bottom: none !important;
}
.table-faq td:nth-child(2) {
padding: 0 0 0 1rem;
text-align: center;
}
.table-faq td:nth-child(3) {
padding: 0 0 0 1rem;
text-align: center;
}
.table-faq td:nth-child(4) {
padding: 0 0 0 1rem;
text-align: center;
}
/*.footer .menu {
text-align: center;
width: 100%;
padding:0;
}
.footer li {
display: inline-block;
float: none;
margin: 0 20px;
}
.footer li a {
color: #5d5d5d;
font-size: 20px;
}
.footer .nav > li a,
.footer .nav > li a,
.footer .nav > li a:focus {
background:transparent !important;
}*/
/* ### Helper Classes ### */
/* # container # */
@media(min-width:1599.98px) {
.container {
max-width: 1560px;
}
}
@media (min-width: 1919.98px) {
.container {
max-width: 1890px;
}
}
/* # btn # */
.btn {
border-radius: 0px;
border: 0;
color: #545454;
background: #ffffff;
padding: 0.75rem .75rem;
}
.btn.focus,
.btn:focus {
box-shadow: none !important;
}
.btn-primary {
transition: all linear 0.2s;
background: #0053a8;
color: #ffffff !important;
}
.btn-primary:disabled {
transition: all linear 0.2s;
background: #0053a8;
color: #ffffff !important;
}
.btn-primary:hover {
background: #6fa6ff;
}
/* # delaying with animate.css # */
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.4s;
}
.delay-5 {
animation-delay: 0.5s;
}
.content a {
word-break: break-all;
}
.padding-50 {
padding: 50px 0;
}
.padding-100 {
padding: 100px 0;
}
.vert-center {
display: flex;
flex-direction: column;
justify-content: center;
}
/* # form # */
.form-control {
border-radius: 0;
background: rgba(0, 0, 0, 0.01);
border: 1px solid #eee;
border-bottom: 2px solid #e30613;
color: #383838;
box-shadow: none;
margin-bottom: 20px;
font-size: 1rem;
padding: 10px 15px;
height: auto;
}
.form-control::-moz-placeholder {
color: #383838;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #383838;
}
.form-control::-webkit-input-placeholder {
color: #383838;
}
.form-group input[type="checkbox"] {
margin-right: 10px;
}
.form-group.wpcf7-acceptance {
float: left;
}
.wpcf7-acceptance .checkbox {
margin: 0;
}
.wpcf7 form div.visible-only-if-sent {
display: none;
}
.wpcf7 form.sent div.visible-only-if-sent {
display: block;
}
/* # mobile menu # */
.dropdown-toggle {
background: none;
border: 0;
width: 100%;
float: right;
}
.dropdown-toggle input {
background: none;
border: 0;
color: #ffffff;
font-size: 1.5rem;
float: left;
width: 80%;
}
.dropdown-toggle .icon-bar {
display: block;
width: 30px;
height: 4px;
float: right;
clear: right;
margin-top: 6px;
}
.dropdown-toggle .icon-bar {
background-color: #383838;
}
/* # phone link split # */
@media(min-width:1280px) {
a[href^="tel:"] {
pointer-events: none;
}
}
/* # to top button # */
.topcontrol {
background: #e30613;
width: 50px;
aspect-ratio: 1/1;
cursor: pointer;
position: fixed;
opacity: 0;
z-index: 992;
color: #ffffff;
font-family: 'Material Icons';
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
bottom: 25px;
right: 25px;
border: 1px solid #e30613;
}
.topcontrol i {
color: #ffffff;
font-size: 2.7rem;
line-height: 1;
}
.topcontrol:hover {
transition: all 0.3s ease 0s;
background: #ffffff;
}
.topcontrol:hover i {
color: #e30613;
}
/* ### Print ### */
@media print {
.topcontrol,
.slider,
.products-slider,
.btn,
.footer {
display: none;
}
a[href]:after {
display: none;
visibility: hidden;
}
}
.willsehen {
min-height: 600px;
}
@media (min-width: 1000px) {
.willsehen {
min-height: 900px !important;
}
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/*Schriftarten im Slider*/
h1.intro {
font-size: 1.5rem;
margin: 10px 0px !important;
}
h2.intro {
font-size: 2rem;
font-weight: 900;
}
@media (min-width:400px) {
h2.intro {
font-size: 3rem;
font-weight: 900;
}
}
@media (min-width:500px) {
h2.intro {
font-size: 4rem;
font-weight: 900;
}
}
@media (min-width:900px) {
h2.intro {
font-size: 5rem;
font-weight: 900;
}
}
@media (min-width:1300px) {
h2.intro {
font-size: 5rem;
font-weight: 900;
}
}
@media (min-width:1600px) {
h2.intro {
font-size: 6rem;
font-weight: 900;
}
}
@media (min-width:1920px) {
h2.intro {
font-size: 8rem;
font-weight: 900;
}
}
@media (min-width:2200px) {
h2.intro {
font-size: 9rem;
font-weight: 900;
}
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* Links & Button*/
/* Schaltfläche weißrot*/
a.mitfarbverlauf {
background-color: #ffffff;
font-weight: bold;
color: #5d5d5d;
font-size: 1.2rem;
padding: 10px;
line-height: 1;
border-right: #ffffff solid 0px;
border-left: #e30613 solid 5px;
transition: all 0.25s;
background: linear-gradient(to right, #e30613 50%, #ffffff 50%);
background-size: 200% 100%;
background-position: right bottom;
}
a.mitfarbverlauf:hover {
background-color: #ffffff;
border: 1px solid #282828;
background-position: left bottom;
transition: all 0.25s;
color: #ffffff;
border-right: #ffffff solid 5px;
border-left: #e30613 solid 0px;
}
.ML a.mitfarbverlauf {
background-color: rgba(255, 255, 255, 0);
font-weight: bold;
color: #ffffff;
font-size: 2rem;
padding: 10px;
line-height: 1;
border-right: #e30613 solid 5px;
border-left: #ffffff solid 0px;
transition: all 0.25s;
background: linear-gradient(to right, rgba(227, 6, 19, 0) 50%, rgba(255, 255, 255, 0));
background-size: 200% 100%;
background-position: right bottom;
}
.ML a.mitfarbverlauf:hover {
background-color: rgba(255, 255, 255, 0);
border: 0px solid #282828;
background-position: left bottom;
transition: all 0.25s;
color: #e30613;
border-right: #e30613 solid 0px;
border-left: #ffffff solid 5px;
}
.ML .vollerbereich-z {
background-color: rgba(255, 255, 255, 0);
}
/* Schaltfläche farbwechsel*/
a.mitfarbwechsel {
border: 1px solid #282828;
background-color: #ffffff;
font-weight: bold;
color: #282828;
font-size: 1.2rem;
padding: 10px;
line-height: 1;
transition: all 0.25s;
margin: 10px;
}
a.mitfarbwechsel:hover {
box-shadow: #282828 0px 0px 10px;
background-color: #282828;
color: #ffffff;
transition: all 0.25s;
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* XXX Flexboxen XXX */
.flexbox-0 {
max-width: 100%;
flex-wrap: wrap;
justify-content: space-between;
height: auto;
display: flex;
}
.flexbox-1 {
max-width: 100vw;
flex-wrap: wrap;
justify-content: space-between;
height: auto;
display: flex;
overflow: hidden;
}
.flex-help {
justify-content: space-around !important;
}
.flexbox-2 {
max-width: 100%;
flex-wrap: wrap;
height: auto;
display: flex;
}
.flexbox-2-FAQ {
flex-wrap: wrap;
height: auto;
display: flex;
}
.flexbox-3 {
max-width: 100%;
flex-wrap: wrap;
height: auto;
display: flex;
}
.flexbox-4 {
max-width: 100%;
flex-wrap: wrap;
height: auto;
display: flex;
justify-content: center;
}
.flexbox0 {
width: auto;
height: auto;
}
.flexbox10 {
width: 10%;
height: auto;
}
.flexbox20 {
width: 20%;
height: auto;
}
.flexbox24 {
width: 24%;
height: auto;
}
.flexbox30 {
width: 30%;
height: auto;
}
.flexbox40 {
width: 40%;
height: auto;
}
.flexbox50 {
width: 50%;
height: auto;
}
.flexbox60 {
width: 60%;
height: auto;
}
.flexbox70 {
width: 70%;
height: auto;
}
.flexbox80 {
width: 80%;
height: auto;
}
.flexbox90 {
width: 90%;
height: auto;
}
.flexbox100 {
width: 100%;
height: auto;
}
.flexbox-center {
display: flex;
align-items: center;
}
.gap10 {
gap: 10px;
}
.grid {
display: grid;
}
@media (max-width: 1000px) {
.flexbox10,
.flexbox20,
.flexbox24,
.flexbox30,
.flexbox40,
.flexbox50,
.flexbox60,
.flexbox70,
.flexbox80,
.flexbox90 {
width: 100% !important;
}
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* XXX Perspektive XXX */
.perspektive100100 {
width: 100%;
height: 100%;
}
.perspektive169 {
aspect-ratio: 16/9;
}
.perspektive916 {
aspect-ratio: 9/16;
}
.perspektive11 {
aspect-ratio: 1/1;
}
.perspektive23 {
aspect-ratio: 2/3;
}
.perspektive32 {
aspect-ratio: 3/2;
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* XXX padding XXX */
.padding1 {
padding: 20px;
}
.padding2 {
padding: 40px;
}
.padding3 {
padding: 60px;
}
.padding4 {
padding: 0px 80px;
width: 100%;
}
@media (max-width: 576px) {
.padding4 {
padding: 0px 20px !important;
}
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
.neueLektion {
width: 100%;
height: 80px;
}
.inderLektion {
width: 100%;
height: 25px;
}
/* !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom !!! publiccom */
/* XXX Bereich1 XXX */
.vollerbereich-r {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.vollerbereich-a-1 {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: 2;
}
.vollerbereich-a-1 img {
position: relative;
object-fit: cover;
height: 100%;
width: auto;
left: 0%;
}
.vollerbereich-a-2 {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: 2;
}
.vollerbereich-a-2 img {
position: relative;
width: 100%;
height: auto;
object-fit: cover;
}
.vollerbereich-z {
width: 100%;
height: 100%;
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center !important;
background-color: rgba(40, 40, 40, 0.5);
}
.vollerbereich-z h2 {
font-weight: 900 !important;
font-size: 2.2rem;
color: #ffffff;
margin-bottom: 1rem;
}
.vollerbereich-z h3 {
font-weight: 900 !important;
font-size: 2.0rem;
color: #ffffff;
margin-bottom: 3rem;
}
.mitLink {
color: #ffffff !important;
transition: all 0.3s;
text-decoration: none !important;
position: relative;
font-weight: 900;
}
.mitLink:hover {
text-decoration: none !important;
/* Entfernen Sie die normale Unterstreichung beim Hovern */
color: #ffffff !important;
}
.mitLink::after {
content: "";
display: block;
height: 2px;
width: 15px;
background-color: #ffffff;
transition: all 0.3s;
position: absolute;
bottom: -2px;
left: 0;
/* Anfangsposition des Unterstrichs */
}
.mitLink:hover::after {
background-color: #e30613;
transition: all 0.3s;
width: 100%;
/* Das Pseudoelement nimmt jetzt die volle Breite des Textes ein */
left: 0;
/* Position des Unterstrichs relativ zum Text */
}
.nebeneinander {
display: flex;
float: left;
}
.untereinander {
display: flex;
flex-direction: column;
}
.h-zentrieren {
display: flex;
justify-content: center;
}
.v-zentrieren {
display: flex;
justify-content: center;
}
/* XXX Bereich1 XXX */
.loseposition {
bottom: 20px;
position: absolute;
}
/* XXX Bereich3 XXX */
.Frage {
width: auto;
height: auto;
color: #5d5d5d;
border: 2px solid #5d5d5d;
padding: 5px;
transition: all 0.25s;
margin: 5px;
}
.Frage:hover {
color: #8e8e8e;
border: 2px solid #8e8e8e;
transition: all 0.25s;
}
/* XXX Bereich4 XXX */
.BildInSchrift {
margin: 0px;
line-height: 1;
/*background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
background-size: cover;
display: inline-block;
background-position: center;
color: transparent;
background-image: url('/wp-content/uploads/2023/04/fahrschule_zamzow-fahrschule_wechseln.jpg');
*/
font-size: 5rem;
font-weight: 1000;
color: #ffffff;
}
.NebenBildInSchrift {
margin: 0px;
font-size: 2rem;
}
/* XXX Bereich5 XXX */
.kreisactive {
margin: 5px !important;
width: 20px !important;
height: 20px !important;
background-color: #8e8e8e;
border-radius: 50% !important;
padding: 0 !important;
}
.kreis {
margin: 5px !important;
width: 20px !important;
height: 20px !important;
background-color: #5d5d5d;
border-radius: 50% !important;
padding: 0 !important;
}
/* XXX Bereich6 XXX */
.album {
width: 100%;
aspect-ratio: 16/9;
position: relative;
z-index: 1;
}
@media(max-width:1000px) {
.album-m {
width: 70% !important;
}
.album-a {
width: 60% !important;
bottom: 20px !important;
}
}
.album-m {
background-color: #5d5d5d;
position: absolute;
width: 60%;
aspect-ratio: 4/3;
right: 0px;
top: 0px;
z-index: 2;
margin: 20px;
}
.album-a {
background-color: #8e8e8e;
position: absolute;
width: 40%;
aspect-ratio: 4/3;
bottom: 0px;
margin: 20px;
z-index: 3;
}
.album-b {
position: absolute;
height: auto;
width: auto;
margin: 20px;
bottom: 0px;
right: 0px;
z-index: 4;
}
.album-hbo {
width: 50px;
background-color: #e30613;
height: 5px;
position: absolute;
}
.album-vbo {
height: 50px;
background-color: #e30613;
width: 5px;
position: absolute;
}
.album-hbu {
width: 50px;
background-color: #e30613;
height: 5px;
position: absolute;
bottom: 0px;
right: 0px;
}
.album-vbu {
height: 50px;
background-color: #e30613;
width: 5px;
position: absolute;
bottom: 0px;
right: 0px;
}
/* Slider der Mitarbeiter */
.MitarbeiterSteckbrief:after {
content: ".";
display: block;
height: .1px;
clear: both;
visibility: hidden;
overflow: hidden;
}
.SliderMitarbeiter {
overflow-x: hidden;
}
.MitarbeiterSteckbrief {
list-style: none;
position: relative;
left: 0;
width: 400%;
margin-bottom: .8em;
padding: 0;
-webkit-transition: left .25s ease-in-out;
-moz-transition: left .25s ease-in-out;
-o-transition: left .25s ease-in-out;
transition: left .25s ease-in-out;
}
.MitarbeiterSteckbrief>li {
float: left;
width: 25%;
position: relative;
}
#Mitarbeiter02:checked~.MitarbeiterSteckbrief {
left: -100%;
}
#Mitarbeiter03:checked~.MitarbeiterSteckbrief {
left: -200%;
}
#Mitarbeiter04:checked~.MitarbeiterSteckbrief {
left: -300%;
}
#Mitarbeiter05:checked~.MitarbeiterSteckbrief {
left: -400%;
}
#Mitarbeiter06:checked~.MitarbeiterSteckbrief {
left: -500%;
}
#Mitarbeiter07:checked~.MitarbeiterSteckbrief {
left: -600%;
}
#Mitarbeiter08:checked~.MitarbeiterSteckbrief {
left: -700%;
}
#Mitarbeiter09:checked~.MitarbeiterSteckbrief {
left: -800%;
}
#Mitarbeiter10:checked~.MitarbeiterSteckbrief {
left: -900%;
}
/* inputs aus dem Blickfeld schieben */
.SliderMitarbeiter input {
position: absolute;
left: -99999px;
}
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.SliderMitarbeiter-Steuerung {
text-align: center;
}
/* Controls nebeneinander bringen */
.SliderMitarbeiter-Steuerung li {
display: inline-block;
}
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.SliderMitarbeiter-Steuerung label {
width: 15px;
height: 15px;
text-align: center;
display: block;
cursor: pointer;
background: #5d5d5d;
}
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.SliderMitarbeiter-Steuerung label:hover,
#Mitarbeiter01:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter01"],
#Mitarbeiter02:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter02"],
#Mitarbeiter03:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter03"],
#Mitarbeiter04:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter04"],
#Mitarbeiter05:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter05"],
#Mitarbeiter06:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter06"],
#Mitarbeiter07:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter07"],
#Mitarbeiter08:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter08"],
#Mitarbeiter09:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter09"],
#Mitarbeiter10:checked~.SliderMitarbeiter-Steuerung label[for="Mitarbeiter10"] {
background: #e30613;
width: 15px;
height: 15px;
}
.Ausblenden,
.AUSBLENDEN,
.ausblenden {
display: none !important;
}
/* XXX */
.GRUNDAUFBAU {
max-width: 37.5rem;
margin: 0 auto;
padding: 0 1.25rem;
background-color: #e30613;
}
/* XXX */
.SLIDER_MITARBEITER {
position: relative;
padding-top: 75%;
perspective: 100px;
background-color: #ffffff;
}
.SLIDER_MITARBEITER::before {
content: 's';
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #ffffff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
left: -1rem;
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
outline: 0;
}
.SLIDER_MITARBEITER::after {
content: 's';
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #ffffff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
right: -1rem;
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
outline: 0;
}
/* XXX */
.ANZEIGE {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
list-style: none;
margin: 0;
padding: 0;
}
/* XXX */
.ANZEIGEBEREICH {
position: relative;
flex: 0 0 100%;
width: 100%;
background-color: #f99;
list-style: none;
margin: 0;
padding: 0;
}
.ANZEIGEBEREICH:nth-child(even) {
background-color: #99f;
}
.ANZEIGEBEREICH:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -40%, 70px);
color: #ffffff;
font-size: 2em;
}
/* XXX */
.ANZEIGENAVIGATION {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
}
@media (hover: hover) {
.ANZEIGENAVIGATION {
animation-name: animation-weiter, animation-schneller_wechsel;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.ANZEIGEBEREICH:last-child .ANZEIGENAVIGATION {
animation-name: animation-zum_start, animation-schneller_wechsel;
}
}
@media (prefers-reduced-motion: reduce) {
.ANZEIGENAVIGATION {
animation-name: none;
}
}
.SLIDER_MITARBEITER:hover .ANZEIGENAVIGATION,
.SLIDER_MITARBEITER:focus-within .ANZEIGENAVIGATION {
animation-name: none;
}
/* XXX */
.WEITER {
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
left: -1rem;
}
.ZURUECK {
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
right: -1rem;
}
/* XXX */
.NAVIGATION {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
/* XXX */
.NAVIGATION-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
/* XXX */
.NAVI-PUNKTE {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
/* XXX */
.NAVIGATION-button {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #333;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
transition: transform 0.1s;
}
/* XXX
@keyframes animation-weiter {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes animation-zum_start {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@keyframes animation-schneller_wechsel {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
} */
/* XXX */
* {
box-sizing: border-box;
scrollbar-color: #e30613 #383838;
/* thumb and track color */
scrollbar-width: 2px;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
width: 0;
}
*::-webkit-scrollbar-track {
/* Scrollbalken (hoch & runter) */
background: #e30613;
}
*::-webkit-scrollbar-thumb {
background: #383838;
border: 2px;
}
/* XXX */
/* Startanimation */
.startanimation {
z-index: 9999;
width: 100%;
height: 0px;
position: fixed;
bottom: 0px;
opacity: 1;
animation: publiccom_willkommen 3s;
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
}
.startanimation img {
object-fit: cover;
max-width: 80%;
}
@keyframes publiccom_willkommen {
0% {
height: 100%;
opacity: 1;
}
70% {
height: 100%;
opacity: 1;
}
100% {
height: 100%;
opacity: 0;
}
}
/* Fürs Auto*/
.album-a-b {
position: absolute;
height: auto;
width: auto;
bottom: 5%;
right: 5%;
z-index: 4;
}
.ML .album-a-b {
position: absolute;
height: auto;
width: auto;
bottom: 8%;
right: 8%;
z-index: 4;
}
.album-a-a {
background-color: #8e8e8e;
position: absolute;
width: 90%;
aspect-ratio: 16/9;
top: 5%;
left: 5%;
z-index: 3;
}
/* XXX Bereich1 XXX */
.vollerbereich-a-r {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.vollerbereich-a-a-1 {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: 3;
}
.ML .vollerbereich-a-a-1 {
left: -5%;
}
.vollerbereich-a-a-1 img {
position: relative;
height: 100%;
width: auto;
object-fit: cover;
}
.MitarbeiterGif-BG {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: 2;
}
.MitarbeiterGif-BG img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.MitarbeiterGif-WBM {
width: 45%;
height: auto;
overflow: hidden;
position: absolute;
z-index: 4;
right: 3%;
top: 3%;
}
.MitarbeiterGif-WBM img {
position: relative;
height: auto;
width: 100%;
object-fit: cover;
}
/*Fragen*/
.FAQbtn {
background-color: #282828;
width: auto;
height: auto;
color: #ffffff;
border: 2px solid #8e8e8e;
padding: 5px;
transition: all 0.25s;
margin: 5px;
display: flex;
float: left;
}
.FAQbtn i {
margin-right: 0.5rem;
}
.FAQbtn:hover {
color: #e30613;
border: 2px solid #e30613;
transition: all 0.25s;
}
.ZamzowAngebot {
color: #00a703;
font-weight: 800;
}
.KeinAngebot {
color: #e30613 !important;
}
a.topbtn {
font-size: 1rem;
font-weight: 800;
color: #8e8e8e;
margin-left: 20px;
padding: 5px;
line-height: 1;
border-bottom: 5px solid rgba(227, 6, 19, 0);
transition: all 0.25s;
}
a.topbtn:hover {
border-bottom: 5px solid rgba(227, 6, 19, 1);
transition: all 0.25s;
}
a.wbmbtn {
height: 45px;
overflow: hidden;
}
a.wbmbtn img {
position: relative;
height: 100%;
width: auto;
object-fit: cover;
}
/*Pannel*/
.volle {
display: flex;
justify-content: center;
}
.btnMitarbeiter,
.btnAuto {
width: 20px;
height: 20px;
border: 2px solid #ffffff;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0);
margin: 10px 5px 20px 5px;
padding: 0 !important;
}
.ButtonRot {
background-color: #ffffff !important;
color: #282828 !important;
}
.col-12,
.container-fluid {
padding: 0px !important;
}
.rechtsran {
display: flex;
float: right !important;
width: 100%;
justify-content: flex-end;
}
.bleibdran {
position: fixed;
background-color: rgba(40, 40, 40, 0.5);
display: flex;
top: 0px;
left: 0px;
height: auto;
width: 100%;
z-index: 100;
padding: 20px 80px;
align-items: center;
align-content: center;
}
.topWBM {
display: flex;
width: 50%;
float: left;
}
.topLINK {
display: flex;
width: 50%;
float: left;
justify-content: flex-end;
}
/* # form # */
.trick17 {
padding: 0px 15px;
}
/*
.guckmal {
position: absolute;
width: 30px;
height: 6000px;
left: 0px;
top: 0px;
background-color: #008fc1;
}*/
/* # Link # */
.kontaktdialog .wpcf7-form,
.kontaktdialog .no-js {
min-width: 100%;
max-width: 100%;
}
.wpcf7-form a {
color: #8e8e8e;
font-weight: bold;
}
.wpcf7-form a:hover {
text-decoration: underline;
}
/* # Text # */
.wpcf7-response-output {
color: #8e8e8e;
margin: 0px !important;
}
.wpcf7-form p,
.grau p {
color: #5d5d5d;
margin: 0px !important;
}
.btn-submit {
padding: 0px;
}
/* # Button # */
.wpcf7-form .btn-primary {
background-color: #282828;
border: 2px solid #8e8e8e;
color: #8e8e8e !important;
font-weight: bold;
}
.wpcf7-form .btn-primary:hover {
background-color: #282828;
border: 2px solid #ffffff;
color: #ffffff !important;
font-weight: bold;
transition: all 0.25s;
}
/* # Eingabefelder # */
.wpcf7-form label {
min-width: 100%;
max-width: 100%;
}
.wpcf7-form label select {
background-color: #ffffff;
}
.wpcf7-form label:active {
box-shadow: #8e8e8e;
}
.screen-reader-response ul {
display: none;
}
.wpcf7-validates-as-required {
min-width: 100%;
max-width: 100%;
border-radius: 0;
background: rgba(0, 0, 0, 0.01);
border: 1px solid #5d5d5d;
border-bottom-color: rgb(93, 93, 93);
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom: 2px solid #8e8e8e;
color: #8e8e8e;
box-shadow: none;
margin-bottom: 10px;
font-size: 1rem;
padding: 10px 15px;
height: 50px;
box-shadow: #e30613;
}
.form-control {
border-radius: 0;
background: rgba(0, 0, 0, 0.01);
border: 1px solid #5d5d5d;
border-bottom: 2px solid #8e8e8e;
color: #8e8e8e;
box-shadow: none;
margin-bottom: 10px;
font-size: 1rem;
padding: 10px 15px;
height: auto;
min-width: 100%;
max-width: 100%;
}
.form-control::-moz-placeholder {
color: #8e8e8e;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #8e8e8e;
}
.form-control::-webkit-input-placeholder {
color: #8e8e8e;
}
.form-group input[type="checkbox"] {
margin-right: 10px;
}
.form-group.wpcf7-acceptance {
float: left;
}
.wpcf7-acceptance .checkbox {
margin: 0;
}
.wpcf7 form div.visible-only-if-sent {
display: none;
}
.wpcf7 form.sent div.visible-only-if-sent {
display: block;
}
label.labelfz input {
background-color: #ffffff;
}
label.labelfz textarea {
background-color: #ffffff;
}
label.labelfz span {
color: #ffffff;
}
label.labelfz span.wpcf7-form-control-wrap span.wpcf7-not-valid-tip {
color: #FF0000 !important;
font-weight: bolder !important;
justify-content: start;
width: 100%;
}
.wpcf7-not-valid-tip {
color: #FF0000 !important;
font-weight: bolder !important;
justify-content: start;
width: 100%;
}
div.wpcf7-response-output {
color: #00a703 !important;
font-weight: 900;
}
div.visible-only-if-sent p {
color: #ffffff !important;
}
div.visible-only-if-sent p {
color: #ffffff !important;
}
/* publiccom*/
.standort {
margin: 0px;
/* ggf. anpassen */
width: 100%;
min-height: 100%;
aspect-ratio: 16/9;
border: 3px solid #8e8e8e;
/* an CD anpassen */
position: relative;
display: inline-block;
overflow: hidden;
text-align: left;
background-color: #282828;
/* ggf. anpassen (Farbe Hover siehe Filter) */
}
.standort p {
font-size: 0px;
line-height: 0;
margin: 0px;
}
.standort p.aufforderungstext {
font-size: 1rem;
line-height: 1.5;
margin: 0px;
}
.standort *,
.standort:before,
.standort:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.standort:hover img,
.standort.hover img {
filter: alpha(opacity=50);
/* ggf. anpassen (Filter) */
-webkit-opacity: 0.5;
/* ggf. anpassen (Filter) */
opacity: 0.5;
/* ggf. anpassen (Filter) */
}
.standort:hover:before,
.standort.hover:before,
.standort:hover:after,
.standort.hover:after {
opacity: 1;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.standort:hover:before,
.standort.hover:before {
width: 100%;
}
.standort:hover:after,
.standort.hover:after {
width: 100%;
}
.standort p.aufforderungstext {
font-size: 1.0em;
font-weight: normal;
opacity: 0;
text-align: center;
justify-content: center;
vertical-align: middle;
padding: 10px;
}
.standort:hover p.aufforderungstext,
.standort.hover p.aufforderungstext {
opacity: 1;
color: #ffffff;
}
.standort:hover p.aufforderungstext,
.standort.hover p.aufforderungstext {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
a.aufforderungslink {
color: #ffffff;
text-decoration: none;
}
div.aufforderungslinkblock {
font-size: 1.0em;
font-weight: normal;
opacity: 0;
text-align: center;
justify-content: center;
vertical-align: middle;
background-color: #282828;
/* an CD anpassen */
min-width: 100%;
max-width: 100%;
height: auto;
margin: 0px;
padding: 10px;
}
.standort:hover div.aufforderungslinkblock,
.standort.hover div.bloaufforderungslinkblockck {
opacity: 1;
}
.standort:hover div.aufforderungslinkblock,
.standort.hover div.aufforderungslinkblock {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.standort img {
width: 100%;
height: 100%;
/* ggf. anpassen */
backface-visibility: hidden;
vertical-align: top;
object-fit: cover !important;
}
.Karte {
margin-bottom: 0px;
}
@media (max-width:1000px) {
.standort {
margin-bottom: 20px !important;
}
.Karte {
margin-bottom: 20px !important;
}
}
.standort figcaption {
position: absolute;
left: 0;
bottom: 0;
min-width: 100%;
max-width: 100%;
}
.abstaninnen {
padding: 0px 15px 0px 15px;
}
.abstaninnenhoehe {
padding: 20px 0px 20px 0px;
}
.hundertvh {
height: 100vh;
display: flex;
align-items: center;
}
@media (max-width:1000px) {
.hundertvh {
height: 100vh !important;
}
}
.nachBildalsHintergrund {
position: relative;
}
.BoxmitBild {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
.BoxmitBild-Bild {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0px;
z-index: -1;
display: flex;
float: left;
justify-content: center;
align-items: center;
}
.BoxmitBild-Bild img {
position: absolute;
object-fit: cover;
z-index: -2;
opacity: 0.4;
}
@media (max-width:1000px) {
.BoxmitBild-Bild img {
height: 100%;
width: auto;
}
}
@media (min-width:1001px) {
.BoxmitBild-Bild img {
width: 100%;
height: 100%;
}
}
.BoxmitBild-Text {
z-index: 5;
}
.BoxmitBildzwei {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
.BoxmitBildzwei-Bild {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0px;
z-index: -1;
display: flex;
float: left;
justify-content: center;
align-items: center;
}
.BoxmitBildzwei-Bild img {
position: absolute;
object-fit: cover;
z-index: -2;
transform: scaleX(-1) !important;
opacity: 1;
/*
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
*/
}
@media (max-width:1000px) {
.BoxmitBildzwei-Bild img {
height: 100%;
width: auto;
}
}
@media (min-width:1001px) {
.BoxmitBildzwei-Bild img {
width: 100%;
height: auto;
}
}
.BoxmitBildzwei-Text {
z-index: 5;
}
.BoxmitBilddrei {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
.BoxmitBilddrei-Bild {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0px;
z-index: -1;
display: flex;
float: left;
align-items: center;
justify-content: center;
}
.Bildverlauf {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
background-image: linear-gradient(0deg, rgba(56, 56, 56, 1) 0%, rgba(56, 56, 56, 0) 20%, rgba(56, 56, 56, 0) 80%, rgba(56, 56, 56, 1) 100%);
}
.BoxmitBilddrei-Bild img {
opacity: 0.3;
object-fit: cover;
z-index: -2;
position: absolute;
height: 100%;
width: 100%;
/*
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
*/
}
.BoxmitBilddrei-Text {
z-index: 5;
}
.ML {
animation: ML 1s 1;
}
@keyframes ML {
0% {
left: 50%;
}
100% {
left: 0px;
}
}
.ML-HELPER {
animation: ML-HELPER 1s 1;
left: 50%;
}
@keyframes ML-HELPER {
0% {
left: 0px;
}
100% {
left: 50%;
}
}
.MR {
animation: MR 1s 1;
}
@keyframes MR {
0% {
right: 50%;
}
100% {
right: 0px;
}
}
.MR-HELPER {
animation: MR-HELPER 1s 1;
right: 50%;
}
@keyframes MR-HELPER {
0% {
right: 0px;
}
100% {
right: 50%;
}
}
/*
*/
.fuerAnimation {
width: auto;
height: auto;
position: relative;
}
/* Animationen */
.AR {
transition: all 1s;
transform: scale(1.2, 1.2) !important;
animation: AR 1s 1;
top: -9%;
}
@keyframes AR {
0% {
top: 0%;
}
100% {
top: -9%;
}
}
/* Animationen */
.AL {
transition: all 1s;
animation: AL 1s 1;
opacity: 1;
}
.AL-HELPER {
opacity: 0;
}
@keyframes AL {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Animationen */
.ANIMATIONpubliccomMA::before {
content: '9';
animation: publiccomMA 1 5s;
}
@keyframes publiccomMA {
0% {
content: '0';
}
2% {
content: '1';
}
4% {
content: '1';
}
6% {
content: '1';
}
8% {
content: '2';
}
10% {
content: '2';
}
12% {
content: '2';
}
14% {
content: '3';
}
16% {
content: '3';
}
18% {
content: '3';
}
20% {
content: '4';
}
22% {
content: '4';
}
24% {
content: '4';
}
26% {
content: '5';
}
28% {
content: '5';
}
30% {
content: '5';
}
32% {
content: '6';
}
34% {
content: '6';
}
36% {
content: '6';
}
38% {
content: '7';
}
40% {
content: '7';
}
42% {
content: '7';
}
44% {
content: '8';
}
46% {
content: '8';
}
48% {
content: '8';
}
50% {
content: '9';
}
52% {
content: '9';
}
54% {
content: '9';
}
56% {
content: '9';
}
58% {
content: '9';
}
60% {
content: '9';
}
62% {
content: '9';
}
64% {
content: '9';
}
66% {
content: '9';
}
68% {
content: '9';
}
70% {
content: '9';
}
72% {
content: '9';
}
74% {
content: '9';
}
76% {
content: '9';
}
78% {
content: '9';
}
80% {
content: '9';
}
82% {
content: '9';
}
84% {
content: '9';
}
86% {
content: '9';
}
88% {
content: '9';
}
90% {
content: '9';
}
92% {
content: '9';
}
94% {
content: '9';
}
96% {
content: '9';
}
98% {
content: '9';
}
100% {
content: '9';
}
}
.ANIMATIONpubliccomKM::before {
content: '368687';
animation: publiccomKM 1 5s;
}
@keyframes publiccomKM {
0% {
content: '0';
}
2% {
content: '0';
}
4% {
content: '0';
}
6% {
content: '0';
}
8% {
content: '0';
}
10% {
content: '12';
}
12% {
content: '265';
}
14% {
content: '1126';
}
16% {
content: '4567';
}
18% {
content: '5124';
}
20% {
content: '6577';
}
22% {
content: '8029';
}
24% {
content: '15987';
}
26% {
content: '68742';
}
28% {
content: '124598';
}
30% {
content: '156879';
}
32% {
content: '189754';
}
34% {
content: '155651';
}
36% {
content: '172141';
}
38% {
content: '188630';
}
40% {
content: '205119';
}
42% {
content: '221608';
}
44% {
content: '238097';
}
46% {
content: '254587';
}
48% {
content: '271076';
}
50% {
content: '287565';
}
52% {
content: '294054';
}
54% {
content: '302543';
}
56% {
content: '317032';
}
58% {
content: '331522';
}
60% {
content: '358711';
}
62% {
content: '368687';
}
64% {
content: '368687';
}
66% {
content: '368687';
}
68% {
content: '368687';
}
70% {
content: '368687';
}
72% {
content: '368687';
}
74% {
content: '368687';
}
76% {
content: '368687';
}
78% {
content: '368687';
}
80% {
content: '368687';
}
82% {
content: '368687';
}
84% {
content: '368687';
}
86% {
content: '368687';
}
88% {
content: '368687';
}
90% {
content: '368687';
}
92% {
content: '368687';
}
94% {
content: '368687';
}
96% {
content: '368687';
}
98% {
content: '368687';
}
100% {
content: '368687';
}
}
.ANIMATIONpubliccomPKW::before {
content: '1448';
animation: publiccomPKW 1 5s;
}
@keyframes publiccomPKW {
0% {
content: '0';
}
2% {
content: '0';
}
4% {
content: '0';
}
6% {
content: '0';
}
8% {
content: '0';
}
10% {
content: '0';
}
12% {
content: '0';
}
14% {
content: '0';
}
16% {
content: '0';
}
18% {
content: '0';
}
20% {
content: '1';
}
22% {
content: '14';
}
24% {
content: '42';
}
26% {
content: '86';
}
28% {
content: '109';
}
30% {
content: '132';
}
32% {
content: '462';
}
34% {
content: '364';
}
36% {
content: '425';
}
38% {
content: '486';
}
40% {
content: '548';
}
42% {
content: '609';
}
44% {
content: '670';
}
46% {
content: '731';
}
48% {
content: '793';
}
50% {
content: '854';
}
52% {
content: '915';
}
54% {
content: '976';
}
56% {
content: '1038';
}
58% {
content: '1099';
}
60% {
content: '1160';
}
62% {
content: '1221';
}
64% {
content: '1283';
}
66% {
content: '1344';
}
68% {
content: '1405';
}
70% {
content: '1426';
}
72% {
content: '1448';
}
74% {
content: '1448';
}
76% {
content: '1448';
}
78% {
content: '1448';
}
80% {
content: '1448';
}
82% {
content: '1448';
}
84% {
content: '1448';
}
86% {
content: '1448';
}
88% {
content: '1448';
}
90% {
content: '1448';
}
92% {
content: '1448';
}
94% {
content: '1448';
}
96% {
content: '1448';
}
98% {
content: '1448';
}
100% {
content: '1448';
}
}
.ANIMATIONpubliccomRAD::before {
content: '472';
animation: publiccomRAD 1 5s;
}
@keyframes publiccomRAD {
0% {
content: '0';
}
2% {
content: '0';
}
4% {
content: '0';
}
6% {
content: '0';
}
8% {
content: '0';
}
10% {
content: '0';
}
12% {
content: '0';
}
14% {
content: '0';
}
16% {
content: '0';
}
18% {
content: '0';
}
20% {
content: '0';
}
22% {
content: '0';
}
24% {
content: '0';
}
26% {
content: '0';
}
28% {
content: '0';
}
30% {
content: '1';
}
32% {
content: '52';
}
34% {
content: '87';
}
36% {
content: '128';
}
38% {
content: '177';
}
40% {
content: '187';
}
42% {
content: '196';
}
44% {
content: '206';
}
46% {
content: '215';
}
48% {
content: '225';
}
50% {
content: '234';
}
52% {
content: '244';
}
54% {
content: '253';
}
56% {
content: '263';
}
58% {
content: '272';
}
60% {
content: '282';
}
62% {
content: '291';
}
64% {
content: '301';
}
66% {
content: '310';
}
68% {
content: '320';
}
70% {
content: '329';
}
72% {
content: '339';
}
74% {
content: '348';
}
76% {
content: '358';
}
78% {
content: '368';
}
80% {
content: '407';
}
82% {
content: '472';
}
84% {
content: '472';
}
86% {
content: '472';
}
88% {
content: '472';
}
90% {
content: '472';
}
92% {
content: '472';
}
94% {
content: '472';
}
96% {
content: '472';
}
98% {
content: '472';
}
100% {
content: '472';
}
}
.ANIMATIONpubliccomTHEORIE::before {
content: '19679';
animation: publiccomTHEORIE 1 5s;
}
@keyframes publiccomTHEORIE {
0% {
content: '0';
}
2% {
content: '0';
}
4% {
content: '0';
}
6% {
content: '0';
}
8% {
content: '0';
}
10% {
content: '0';
}
12% {
content: '0';
}
14% {
content: '0';
}
16% {
content: '0';
}
18% {
content: '0';
}
20% {
content: '0';
}
22% {
content: '0';
}
24% {
content: '0';
}
26% {
content: '0';
}
28% {
content: '0';
}
30% {
content: '0';
}
32% {
content: '0';
}
34% {
content: '0';
}
36% {
content: '0';
}
38% {
content: '0';
}
40% {
content: '2';
}
42% {
content: '24';
}
44% {
content: '152';
}
46% {
content: '1345';
}
48% {
content: '1768';
}
50% {
content: '2964';
}
52% {
content: '5687';
}
54% {
content: '9864';
}
56% {
content: '10476';
}
58% {
content: '10894';
}
60% {
content: '11313';
}
62% {
content: '11731';
}
64% {
content: '12149';
}
66% {
content: '12568';
}
68% {
content: '12986';
}
70% {
content: '13404';
}
72% {
content: '13823';
}
74% {
content: '14241';
}
76% {
content: '14659';
}
78% {
content: '15078';
}
80% {
content: '15496';
}
82% {
content: '15914';
}
84% {
content: '16332';
}
86% {
content: '16751';
}
88% {
content: '17169';
}
90% {
content: '17587';
}
92% {
content: '19679';
}
94% {
content: '19679';
}
96% {
content: '19679';
}
98% {
content: '19679';
}
100% {
content: '19679';
}
}
/* Annimation Ende */
.input-buttenbereich1 {
display: flex;
float: left;
justify-content: center;
width: auto;
position: absolute;
right: 0px;
}
.input-buttenbereich2 {
display: flex;
float: left;
justify-content: center;
width: auto;
position: absolute;
bottom: 0px;
}
.sliderstart {
width: 50px;
height: 50px;
border: 0px;
background-color: #ffffff;
margin: 10px 0px 20px 5px;
color: #e30613;
font-size: 2rem;
font-weight: 900;
line-height: 1;
padding: 1px 0px 1px 3px;
}
.rundundleer {
width: 20px;
height: 20px;
border: 2px solid #ffffff;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0);
margin: 10px 5px 20px 5px;
padding: 0 !important;
}
.aktuelldran {
background-color: #ffffff !important;
}
.ausgewaehlt {
border-color: #e30613 !important;
color: #e30613 !important;
}
.verteilung {
display: flex;
justify-content: space-around;
}
#FKE strong,
#FKE h2,
#FKE h3,
#FKE h4 {
color: #ffffff !important;
}
.Help-powerbutten {
display: flex;
justify-content: flex-end;
width: 100%;
height: auto;
}
.powerbutton {
position: relative;
display: flex;
border-radius: 50%;
border: 10px solid #282828;
width: auto;
max-width: 130px;
min-width: 130px;
aspect-ratio: 1/1;
box-shadow: 0px 0px 1rem 0px #8e8e8e;
/*box-shadow: 3px 3px 3px #8e8e8e, -3px -3px #5d5d5d;*/
background-color: #282828;
cursor: pointer;
}
.powerbutton:hover>.powerausen {
border-color: #33ff33 !important;
transition: all 0.3s;
}
.powerbutton:hover>.powerausen .powerinnen .powerfarbe {
background-color: #33ff33 !important;
transition: all 0.3s;
}
.powerausen {
position: relative;
display: flex;
background-color: #282828;
width: 100%;
height: auto;
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: #5d5d5d;
justify-content: center;
align-items: center;
animation: powerausen 3s infinite;
transition: all 0.3s;
}
.powerinnen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.powertext {
color: #ffffff;
}
.powerfarbe {
width: 30px;
height: 10px;
background-color: #5d5d5d;
border-radius: 2px;
animation: powerfarbe 3s infinite;
margin-top: 10px;
transition: all 0.3s;
}
@keyframes powerfarbe {
0% {
background-color: #5d5d5d;
}
3% {
background-color: #8e8e8e;
}
6% {
background-color: #5d5d5d;
}
12% {
background-color: #8e8e8e;
}
15% {
background-color: #5d5d5d;
}
100% {
background-color: #5d5d5d;
}
}
@keyframes powerausen {
0% {
border-color: #5d5d5d;
}
3% {
border-color: #8e8e8e;
}
6% {
border-color: #5d5d5d;
}
12% {
border-color: #8e8e8e;
}
15% {
border-color: #5d5d5d;
}
100% {
border-color: #5d5d5d;
}
}
.zwei {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: auto;
padding: 50px;
background-color: rgb(54, 95, 95);
}
.drei {
width: 100px;
aspect-ratio: 1/1;
background-color: black;
}
/* NEUE NAVIGATION */
.vollerHeaderBereich {
width: 100%;
height: auto;
display: flex;
animation: Header-Animation 6s 1;
background-color: rgba(56, 56, 56, 0.5);
}
@keyframes Header-Animation {
0% {
background-color: #383838;
}
50% {
background-color: #383838;
}
100% {
background-color: rgba(56, 56, 56, 0.5);
}
}
/* Hintergrund für Menü */
/* */
.Headerhintergrund {
width: 100%;
height: 104.583px;
background-color: #ffffff;
}
/* fixiert das Menü an der Taskleise - ! Headerhintergrund muss in WP-Header hinterlegt werden*/
.navi-fixieren {
position: fixed;
z-index: 1000;
top: 0px;
}
/* Ganzer Körper (transparent-weißer Hintergrund)*/
.new-header {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
/* Bereich mit WBM und Hamburger-Menü*/
.header-oben {
width: 100%;
max-height: 90px;
display: flex;
float: left;
justify-content: center;
}
/* Bereich für WBM */
.header-links {
width: 50%;
padding: 10px;
height: 100%;
position: relative;
overflow: hidden;
}
/* WBM - Das Bild / die Grafik - An denken! */
.header-links img {
width: auto;
object-fit: cover;
height: 100%;
}
/* Bereich mit Hamburger-Menü & Menüschließen*/
.header-rechts {
width: 50%;
height: auto;
display: flex;
float: left;
position: relative;
z-index: 0;
justify-content: flex-end;
align-items: center;
}
.header-mobil i.header-mobil-i {
line-height: 1 !important;
padding-top: 4px !important;
margin-left: 10px !important;
}
@media (max-width:1000px) {
.header-links img {
width: 100%;
height: auto;
}
.header-mobil {
display: block;
text-align: end;
}
.header-desktop {
display: none !important;
}
}
@media (min-width:1001px) {
.header-mobil {
display: none !important;
}
.header-desktop {
display: block;
}
}
.navi-button-box {
width: 50px;
height: 40px;
margin-left: 16px;
display: flex;
float: left;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* Button = Hamburger-Menü*/
.navi-box1 {
background-color: rgba(255, 255, 255, 0);
width: 100%;
height: 100%;
position: absolute;
flex-direction: column;
align-content: space-around;
display: flex;
z-index: 2;
cursor: pointer;
border: none;
}
/* Strich oben und unten vom Hamburger-Menü*/
.navi-strich {
background-color: #e30613;
width: 45px;
margin: 5px 5%;
height: 5px;
}
/* Strich in der mitte vom Hamburger-Menü*/
.navi-strich-mitte {
background-color: #e30613;
width: 25px;
margin: 5%;
height: 5px;
transition: all 0.3s;
}
/* Wenn Button "Hamburger-Menü gehovert wird, dann Strich in der Mitte mit oben und unten gleichlang*/
.navi-box1:hover>.navi-strich-mitte {
width: 45px;
transition: all 0.3s;
}
.navi-box1:hover>.navi-strich,
.navi-box1:hover>.navi-strich-mitte {
background-color: #ffffff;
transition: all 0.3s;
}
/* Button = Schließen*/
.navi-box2 {
background-color: rgba(255, 255, 255, 0);
width: 100%;
height: 100%;
position: absolute;
flex-direction: column;
align-content: space-around;
display: flex;
z-index: 1;
cursor: pointer;
border: none;
transition: all 0.3s;
}
/* Strich vom Schließenbutton - von Linksoben nach Rechtsunten*/
.navi-strich-open1 {
background-color: #e30613;
width: 90%;
margin: 5px 5%;
height: 5px;
rotate: 45deg;
position: absolute;
top: 13px;
z-index: 3;
left: 0px;
}
/* Strich vom Schließenbutton - von Rechtsoben nach Linksunten*/
.navi-strich-open2 {
background-color: #e30613;
width: 90%;
margin: 5px 5%;
height: 5px;
rotate: -45deg;
position: absolute;
top: 13px;
z-index: 2;
left: 0px;
}
.navi-box2:hover>.navi-strich-open1,
.navi-box2:hover>.navi-strich-open2 {
background-color: #ffffff;
transition: all 0.3s;
}
/* Bereich vom Menü, wo die Links angezeigt werden*/
.headerinhalt-box {
width: 100%;
height: auto;
display: flex;
justify-content: flex-end;
}
/* Bereich vom Menü, wo die Links angezeigt werden > aber nur auf 30%*/
.headerinhalt {
min-width: 30%;
height: auto;
display: flex;
flex-direction: column;
align-items: end;
overflow: hidden;
}
.headerinhalt a,
.headerinhalt i {
font-size: 1.5rem;
}
/* Link in der Navigation*/
.NAVI-Link {
color: #e30613;
text-decoration: none;
font-weight: bold;
width: 100%;
padding: 5px 55px 5px 5px;
transition: all 0.25s;
text-align: end;
}
/* Linkhover in der Navigation*/
.NAVI-Link:hover {
text-align: end;
background-color: #e30613;
color: #ffffff;
transition: all 0.25s;
}
.iconfeld {
width: 40px;
border-radius: 5px;
color: #e30613 !important;
aspect-ratio: 1/1;
padding: 0 30px 0 40px;
margin: 0 !important;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: all 0.3s;
}
a.iconfeld i {
font-size: 1.8rem;
line-height: 1;
margin: 0 !important;
}
.iconfeld:hover {
color: #ffffff !important;
transition: all 0.3s;
}
/*
Auto
lkw klein
lkw groß
rad
traktor
bus
*/
/* 404 */
.Zaun-Licht {
display: flex;
float: left;
position: relative;
justify-content: space-around;
top: 5px;
z-index: 2;
}
.Zaun-Licht-Strebe {
border: #FAD201 5px solid;
background-color: #FFA500;
width: 6%;
aspect-ratio: 1/1;
border-radius: 100%;
animation: blinken 1s infinite;
}
@keyframes blinken {
0% {
background-color: #D84B20;
}
10% {
background-color: #FFA500;
}
20% {
background-color: #FFA500;
}
30% {
background-color: #FFA500;
}
40% {
background-color: #D84B20;
}
50% {
background-color: #FFA500;
}
60% {
background-color: #D84B20;
}
70% {
background-color: #FFA500;
}
80% {
background-color: #FFA500;
}
90% {
background-color: #FFA500;
}
100% {
background-color: #FFA500;
}
}
.Zaun-Licht-Strebe2 {
border: #FAD201 5px solid;
background-color: #FFA500;
width: 6%;
aspect-ratio: 1/1;
border-radius: 100%;
animation: blinken2 1s infinite;
}
@keyframes blinken2 {
0% {
background-color: #FFA500;
}
10% {
background-color: #FFA500;
}
20% {
background-color: #D84B20;
}
30% {
background-color: #FFA500;
}
40% {
background-color: #FFA500;
}
50% {
background-color: #FFA500;
}
60% {
background-color: #D84B20;
}
70% {
background-color: #FFA500;
}
80% {
background-color: #D84B20;
}
90% {
background-color: #FFA500;
}
100% {
background-color: #FFA500;
}
}
p.P404 {
font-size: 1.5rem;
font-weight: 900;
color: #2E3234;
}
.pfeil {
width: 80%;
aspect-ratio: 4/3;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
}
.pfeil-Balken-eins {
background-color: #2E3234;
width: 90%;
height: 15%;
position: absolute;
z-index: 3;
right: 0px;
}
.pfeil-Balken-zwei {
background-color: #2E3234;
width: 50%;
aspect-ratio: 1/1;
transform: rotate(-45deg);
position: absolute;
z-index: 1;
left: 10%;
}
.pfeil-Balken-drei {
background-color: #FAD201;
width: 50%;
aspect-ratio: 1/1;
transform: rotate(-45deg);
position: absolute;
z-index: 2;
left: 25%;
}
.geisterbutton {
position: absolute;
background-color: #FAD201;
top: 30%;
left: 10%;
z-index: 20;
line-height: 1;
padding: 5px;
border-radius: 5px;
border: 2px solid #2E3234;
color: #2E3234;
box-shadow: 0px 0px 0px 2px #FAD201;
animation: schild infinite 20s;
}
@keyframes schild {
0% {
opacity: 0;
}
15% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.Schild {
display: flex;
flex-direction: column;
position: relative;
width: 10%;
align-items: center;
}
.Schild-Pohl-Kurz {
width: 8%;
aspect-ratio: 1/2;
background-color: #C6CED9;
}
.Schild-Pohl-Lang {
width: 8%;
aspect-ratio: 1/30;
background-color: #C6CED9;
}
.Schild-Zeichen {
width: 100%;
aspect-ratio: 1/1;
border-radius: 100%;
background-color: #c1121c;
border: 5px solid #ffffff;
position: relative;
z-index: 0;
justify-content: center;
align-items: center;
display: flex;
}
.Schild-Zeichen-Kreis {
width: 80%;
aspect-ratio: 1/1;
background-color: #ffffff;
position: absolute;
z-index: 1;
border-radius: 100%;
}
.Schild-Gelb {
width: 80%;
border-radius: 8%;
aspect-ratio: 3/4;
background-color: #2E3234;
border: 5px solid #FAD201;
position: relative;
z-index: 0;
justify-content: center;
align-items: center;
display: flex;
}
.Schild-Gelb-innen {
width: 95%;
border-radius: 4%;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
aspect-ratio: 3/4;
background-color: #FAD201;
position: absolute;
z-index: 1;
}
.Zaun {
display: flex;
flex-direction: column;
position: relative;
width: 45%;
}
.Zaun-Rand {
display: flex;
float: left;
position: relative;
}
.Zaun-Mitte {
display: flex;
float: left;
position: relative;
justify-content: space-between;
}
.Zaun-Krone {
display: flex;
float: left;
position: relative;
justify-content: space-between;
}
.Zaun-Krone-Strebe {
background-color: #ffffff;
width: 2.5%;
aspect-ratio: 3/4;
}
.Zaun-Fuss {
display: flex;
float: left;
position: relative;
justify-content: space-between;
}
.Zaun-Fuss-Strebe {
background-color: #ffffff;
width: 2.5%;
aspect-ratio: 3/4;
}
.Zaun-Strebe {
background-color: #ffffff;
width: 2.5%;
aspect-ratio: 3/16;
}
.Zaun-rot {
background-color: #c1121c;
width: 10%;
aspect-ratio: 3/2;
}
.Zaun-rot-klein {
background-color: #c1121c;
width: 5%;
aspect-ratio: 3/4;
}
.Zaun-weiss {
background-color: #ffffff;
width: 10%;
aspect-ratio: 3/2;
}
@media (max-width: 1200px) {
.Zaun-Licht-Strebe,
.Zaun-Licht-Strebe2 {
border: #FAD201 2px solid;
}
.Schild-Zeichen {
border: 2px solid #ffffff;
}
.Schild-Gelb {
border: 2px solid #FAD201;
}
.geist {
width: 15%;
}
p.P404 {
font-size: 1.2rem;
}
.geistersprech::before {
font-size: 1.2rem !important;
}
}
@media (max-width: 900px) {
p.P404 {
font-size: 1rem;
line-height: 1;
}
.geistersprech::before {
font-size: 1rem !important;
}
}
@media (max-width: 600px) {
.Zaun-Licht-Strebe,
.Zaun-Licht-Strebe2 {
border: #FAD201 1px solid;
}
.Schild-Zeichen {
border: 1px solid #ffffff;
}
.Schild-Gelb {
border: 1px solid #FAD201;
}
.geist {
width: 40%;
}
p.P404 {
font-size: 0.7rem;
}
.geistersprech::before {
font-size: 0.8rem !important;
}
}
.geistraum .Help-powerbutten-geist {
display: flex;
position: absolute;
justify-content: center;
width: 100%;
height: 60%;
z-index: 2;
bottom: 0;
}
/*ZZZ*/
.geistraum {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 50vh;
display: flex;
justify-content: flex-end;
z-index: 1;
}
.geistraum2 {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 50vh;
display: flex;
justify-content: flex-start;
z-index: 1;
}
.Seite404 {
overflow-x: hidden;
position: relative;
width: 100%;
max-width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
height: 90vh;
display: flex;
justify-content: flex-end;
}
.Anzeige404 {
position: relative;
width: 90%;
display: flex;
float: left;
align-items: flex-end;
z-index: 0;
}
.Text404 p,
.Text404 h3 {
color: #008fc1;
}
.Himmel404 {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
z-index: -1;
}
.geist {
width: 10%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
animation: hinher 20s infinite;
}
@keyframes hinher {
0% {
left: -20%;
top: -30%;
transform: scale(0.8);
transform: scaleX(1);
}
25% {
transform: scale(1.3);
left: 20%;
top: 0%;
transform: scaleX(1);
}
50% {
transform: scale(0.8);
left: 70%;
top: -15%;
transform: scaleX(1);
}
51% {
transform: scaleX(-1);
}
75% {
left: 15%;
top: -2%;
transform: scale(1.2);
transform: scaleX(-1);
}
76% {
transform: scaleX(1);
}
100% {
left: 120%;
top: -30%;
transform: scale(0.8);
transform: scaleX(1);
}
}
.einGeist {
width: 70%;
position: relative;
animation: bewegung 3s infinite;
z-index: 3;
}
@keyframes bewegung {
0% {
top: 32%;
}
25% {
top: 34%;
}
50% {
top: 32%;
}
75% {
top: 34%;
}
100% {
top: 32%;
}
}
.einGeisterkoerper {
background-color: #ffffff;
width: 100%;
aspect-ratio: 4/5;
border-radius: 50%;
position: relative;
z-index: 3;
transform: rotate(5deg);
box-shadow: inset -5px 5px 5px rgba(0, 0, 0, 0.2);
}
.einGeisterkoerper-helper {
background-color: #383838;
width: 51%;
aspect-ratio: 1/1;
border-radius: 50%;
position: absolute;
z-index: 2;
top: -0%;
left: -10%;
}
.einGeisterkoerperunterteil {
background-color: #ffffff;
width: 100%;
aspect-ratio: 4/5;
border-radius: 50%;
position: absolute;
z-index: 1;
top: 7%;
left: -18%;
transform: rotate(-55deg);
}
.einGeisterkoerperunterteil-helper {
background-color: #383838;
width: 100%;
aspect-ratio: 8/4;
border-radius: 50%;
position: absolute;
z-index: 2;
top: -2%;
left: -75%;
transform: rotate(75deg);
}
.linkeHand {
background-color: #ffffff;
width: 30%;
aspect-ratio: 4/6;
border-radius: 50%;
position: absolute;
z-index: 1;
transform: rotate(-40deg);
top: 40%;
right: -10%;
}
.rechteHand {
background-color: #ffffff;
width: 30%;
aspect-ratio: 4/6;
border-radius: 50%;
position: absolute;
z-index: 11;
transform: rotate(-40deg);
top: 40%;
left: 10%;
box-shadow: inset 3px 1px 6px rgba(0, 0, 0, 0.5);
}
.rechteHand-helper {
background-color: #ffffff;
width: 47%;
aspect-ratio: 3/1;
position: absolute;
z-index: 11;
top: 41%;
left: -8%;
transform: rotate(-45deg);
}
.Augelinks {
z-index: 12;
background-color: #383838;
width: 20%;
aspect-ratio: 2/3;
border-radius: 50%;
position: absolute;
top: 20%;
left: 40%;
box-shadow: inset -4px 2px 3px rgba(0, 0, 0, 0.5);
}
.Augerechts {
z-index: 12;
background-color: #383838;
width: 17%;
aspect-ratio: 2/3;
border-radius: 50%;
position: absolute;
top: 21%;
left: 62%;
box-shadow: inset -4px 2px 3px rgba(0, 0, 0, 0.5);
}
.Mund {
z-index: 12;
background-color: #383838;
width: 5%;
aspect-ratio: 3/2;
border-radius: 50%;
position: absolute;
top: 45%;
left: 50%;
box-shadow: inset -4px 2px 3px rgba(0, 0, 0, 0.5);
animation: sprechen 20s infinite;
}
/*
0% {
}
25% {
}
50% {
}
51% {
}
75% {
}
76% {
}
100% {
}*/
@keyframes sprechen {
0% {
width: 5%;
aspect-ratio: 5/3;
}
6% {
width: 5%;
aspect-ratio: 5/3;
}
7% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
9% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
10% {
width: 5%;
aspect-ratio: 5/3;
}
22% {
width: 5%;
aspect-ratio: 5/3;
}
23% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
24% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
25% {
background-color: #962f2f;
aspect-ratio: 5/4;
}
26% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
27% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
28% {
width: 5%;
aspect-ratio: 5/3;
}
75% {
width: 5%;
aspect-ratio: 5/3;
}
76% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
77% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
78% {
background-color: #962f2f;
aspect-ratio: 5/4;
}
79% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
80% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
81% {
width: 5%;
aspect-ratio: 5/3;
}
/*
6% {
width: 5%;
aspect-ratio: 5/3;
}
7% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
8% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
9% {
background-color: #962f2f;
aspect-ratio: 5/4;
}
10% {
background-color: #962f2f;
aspect-ratio: 5/3;
}
11% {
width: 17%;
background-color: #962f2f;
aspect-ratio: 5/4;
}
12% {
width: 5%;
aspect-ratio: 5/3;
}
*/
}
.geistersprech::before {
color: #383838 !important;
width: auto;
height: auto;
position: absolute;
line-height: 1;
content: "";
animation: aussage 20s infinite;
left: 140%;
top: 10%;
display: flex;
padding: 0px;
border-radius: 0px;
font-size: 2rem;
font-weight: 900;
}
@keyframes aussage {
6% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
7% {
background-color: #ffffff;
border-radius: 5px;
content: "HALT!";
padding: 5px;
}
17% {
background-color: #ffffff;
border-radius: 5px;
content: "HALT!";
padding: 5px;
}
18% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
22% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
23% {
background-color: #ffffff;
border-radius: 5px;
content: "Motor abgewürgt? Starte NEU!";
padding: 5px;
}
37% {
background-color: #ffffff;
border-radius: 5px;
content: "Motor abgewürgt? Starte NEU!";
padding: 5px;
}
38% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
76% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
77% {
background-color: #ffffff;
border-radius: 5px;
content: "Gute Fahrt!";
padding: 5px;
}
91% {
background-color: #ffffff;
border-radius: 5px;
content: "Gute Fahrt!";
padding: 5px;
}
92% {
background-color: #ffffff;
border-radius: 0px;
padding: 0px;
content: "";
}
}
.schattenGeist {
aspect-ratio: 5/2;
border-radius: 50%;
width: 50%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
animation: schatten 3s infinite;
z-index: 0;
}
@keyframes schatten {
0% {
transform: scale(0.8, 0.8);
}
25% {
transform: scale(1, 1);
}
50% {
transform: scale(0.8, 0.8);
}
75% {
transform: scale(1, 1);
}
100% {
transform: scale(0.8, 0.8);
}
}
.Datenschutz p,
.Datenschutz table {
margin-bottom: 1rem;
}
.form-check {
padding-left: 0rem !important;
}
.entry-title {
display: none;
}
/* Jahreszeiten */
.SNOWBOX1 {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
display: flex;
align-items: center;
justify-content: center;
}
.SNOWBOX2 {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(60deg);
}
.SNOWBOX3 {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(120deg);
}
.SNOWELEMENT1 {
width: 7%;
height: 100%;
background-color: #ffffff;
position: absolute;
transform: rotate(0deg);
z-index: 1;
}
.SNOWELEMENT2 {
width: 7%;
height: 30%;
background-color: #ffffff;
position: absolute;
transform: rotate(55deg);
z-index: 100;
left: 55%;
top: 0%;
}
.SNOWELEMENT3 {
width: 7%;
height: 30%;
background-color: #ffffff;
position: absolute;
transform: rotate(-55deg);
z-index: 100;
right: 55%;
top: 0%;
}
.SNOWELEMENT4 {
width: 7%;
height: 30%;
background-color: #ffffff;
position: absolute;
transform: rotate(-55deg);
z-index: 100;
left: 55%;
bottom: 0%;
}
.SNOWELEMENT5 {
width: 7%;
height: 30%;
background-color: #ffffff;
position: absolute;
transform: rotate(55deg);
z-index: 100;
right: 55%;
bottom: 0%;
}
.Eventbox {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 0vw;
height: 100vh;
z-index: 10000;
}
.LetItSnow {
display: none;
position: absolute;
top: 0;
left: 0;
width: 0vw;
height: 100vh;
z-index: 10000;
}
.snow1,
.snow2,
.snow3,
.snow4,
.snow5,
.snow6,
.snow7,
.snow8,
.snow9,
.snow10,
.snow11,
.snow12,
.snow13,
.snow14,
.snow15,
.snow16,
.snow17,
.snow18,
.snow19,
.snow20 {
position: absolute;
top: 50%;
/*right: 0;*/
}
.snow1 {
right: 5%;
width: 1.05rem;
height: 1.05rem;
animation: snow1 30s linear infinite;
}
@keyframes snow1 {
0% {
top: -20%;
right: -1vw;
transform: rotate(0deg);
}
25% {
right: -2vw;
}
50% {
right: -3vw;
}
75% {
right: -2vw;
}
100% {
top: 105%;
right: -1vw;
transform: rotate(360deg);
}
}
.snow2 {
right: 10%;
width: 1rem;
height: 1rem;
animation: snow2 16s linear infinite;
}
@keyframes snow2 {
0% {
top: -5%;
right: -6vw;
transform: rotate(0deg);
}
25% {
right: -7vw;
}
50% {
right: -6vw;
}
75% {
right: -7vw;
}
100% {
top: 105%;
right: -6vw;
transform: rotate(360deg);
}
}
.snow3 {
right: 15%;
width: 1.2rem;
height: 1.2rem;
animation: snow3 22s linear infinite;
}
@keyframes snow3 {
0% {
top: -50%;
right: -10vw;
transform: rotate(0deg);
}
25% {
right: -11vw;
}
50% {
right: -10vw;
}
75% {
right: -9vw;
}
100% {
top: 105%;
right: -10vw;
transform: rotate(360deg);
}
}
.snow4 {
right: 20%;
animation: snow4 35s linear infinite;
width: 1.5rem;
height: 1.5rem;
}
@keyframes snow4 {
0% {
top: -70%;
right: -15vw;
transform: rotate(0deg);
}
25% {
right: -14vw;
}
50% {
right: -13vw;
}
75% {
right: -14vw;
}
100% {
top: 105%;
right: -13vw;
transform: rotate(360deg);
}
}
.snow5 {
right: 25%;
width: 1.2rem;
height: 1.2rem;
animation: snow5 19s linear infinite;
}
@keyframes snow5 {
0% {
top: -15%;
right: -20vw;
transform: rotate(0deg);
}
25% {
right: -21vw;
}
50% {
right: -20vw;
}
75% {
right: -19vw;
}
100% {
top: 105%;
right: -20vw;
transform: rotate(360deg);
}
}
.snow6 {
right: 30%;
animation: snow6 14s linear infinite;
width: 1.3rem;
height: 1.3rem;
}
@keyframes snow6 {
0% {
top: -1%;
right: -25vw;
transform: rotate(0deg);
}
25% {
right: -26vw;
}
50% {
right: -25vw;
}
75% {
right: -24vw;
}
100% {
top: 105%;
right: -25vw;
transform: rotate(360deg);
}
}
.snow7 {
right: 35%;
width: 1.2rem;
height: 1.2rem;
animation: snow7 16s linear infinite;
}
@keyframes snow7 {
0% {
top: -55%;
right: -30vw;
transform: rotate(0deg);
}
25% {
right: -31vw;
}
50% {
right: -30vw;
}
75% {
right: -29vw;
}
100% {
top: 105%;
right: -30vw;
transform: rotate(360deg);
}
}
.snow8 {
right: 40%;
width: 1.5rem;
height: 1.5rem;
animation: snow8 24s linear infinite;
}
@keyframes snow8 {
0% {
top: -50%;
right: -35vw;
transform: rotate(0deg);
}
25% {
right: -35vw;
}
50% {
right: -36vw;
}
75% {
right: -35vw;
}
100% {
top: 105%;
right: -34vw;
transform: rotate(360deg);
}
}
.snow9 {
right: 45%;
width: 1.2rem;
height: 1.2rem;
animation: snow9 16s linear infinite;
}
@keyframes snow9 {
0% {
top: -5%;
right: -40vw;
transform: rotate(0deg);
}
25% {
right: -41vw;
}
50% {
right: -40vw;
}
75% {
right: -39vw;
}
100% {
top: 105%;
right: -40vw;
transform: rotate(360deg);
}
}
.snow10 {
right: 50%;
width: 0.75rem;
height: 0.75rem;
animation: snow10 25s linear infinite;
}
@keyframes snow10 {
0% {
top: -5%;
right: -45vw;
transform: rotate(0deg);
}
25% {
right: -46vw;
}
50% {
right: -45vw;
}
75% {
right: -44vw;
}
100% {
top: 105%;
right: -43vw;
transform: rotate(360deg);
}
}
.snow11 {
right: 55%;
width: 1.5rem;
height: 1.5rem;
animation: snow11 15s linear infinite;
}
@keyframes snow11 {
0% {
top: -5%;
right: -55vw;
transform: rotate(0deg);
}
25% {
right: -54vw;
}
50% {
right: -53vw;
}
75% {
right: -53vw;
}
100% {
top: 105%;
right: -54vw;
transform: rotate(360deg);
}
}
.snow12 {
right: 60%;
width: 1.21.2rem;
height: 1.21.2rem;
animation: snow12 24s linear infinite;
}
@keyframes snow12 {
0% {
top: -50%;
right: -60vw;
transform: rotate(0deg);
}
25% {
right: -61vw;
}
50% {
right: -62vw;
}
75% {
right: -61vw;
}
100% {
top: 105%;
right: -60vw;
transform: rotate(360deg);
}
}
.snow13 {
right: 65%;
animation: snow13 25s linear infinite;
width: 1.2rem;
height: 1.2rem;
}
@keyframes snow13 {
0% {
top: -50%;
right: -65vw;
transform: rotate(0deg);
}
25% {
right: -66vw;
}
50% {
right: -65vw;
}
75% {
right: -64vw;
}
100% {
top: 105%;
right: -63vw;
transform: rotate(360deg);
}
}
.snow14 {
right: 70%;
width: 0.751.2rem;
height: 0.751.2rem;
animation: snow14 22s linear infinite;
}
@keyframes snow14 {
0% {
top: -5%;
right: -70vw;
transform: rotate(0deg);
}
25% {
right: -71vw;
}
50% {
right: -70vw;
}
75% {
right: -69vw;
}
100% {
top: 105%;
right: -70vw;
transform: rotate(360deg);
}
}
.snow15 {
right: 75%;
width: 1.2rem;
height: 1.2rem;
animation: snow15 19s linear infinite;
}
@keyframes snow15 {
0% {
top: -5%;
right: -75vw;
transform: rotate(0deg);
}
25% {
right: -74vw;
}
50% {
right: -73vw;
}
75% {
right: -74vw;
}
100% {
top: 105%;
right: -75vw;
transform: rotate(360deg);
}
}
.snow16 {
right: 80%;
width: 0.8rem;
height: 0.8rem;
animation: snow16 25s linear infinite;
}
@keyframes snow16 {
0% {
top: -50%;
right: -77vw;
transform: rotate(0deg);
}
25% {
right: -78vw;
}
50% {
right: -77vw;
}
75% {
right: -76vw;
}
100% {
top: 105%;
right: -75vw;
transform: rotate(360deg);
}
}
.snow17 {
right: 85%;
width: 1.21.2rem;
height: 1.21.2rem;
animation: snow17 12s linear infinite;
}
@keyframes snow17 {
0% {
top: -5%;
right: -80vw;
transform: rotate(0deg);
}
25% {
right: -79vw;
}
50% {
right: -78vw;
}
75% {
right: -77vw;
}
100% {
top: 105%;
right: -76vw;
transform: rotate(360deg);
}
}
.snow18 {
right: 90%;
width: 1.2rem;
height: 1.2rem;
animation: snow18 40s linear infinite;
}
@keyframes snow18 {
0% {
top: -5%;
right: -90vw;
transform: rotate(0deg);
}
25% {
right: -91vw;
}
50% {
right: -90vw;
}
75% {
right: -89vw;
}
100% {
top: 105%;
right: -90vw;
transform: rotate(360deg);
}
}
.snow19 {
right: 95%;
width: 1.10.75rem;
height: 1.10.75rem;
animation: snow19 15s linear infinite;
}
@keyframes snow19 {
0% {
top: -5%;
right: -85vw;
transform: rotate(0deg);
}
25% {
right: -86vw;
}
50% {
right: -85vw;
}
75% {
right: -84vw;
}
100% {
top: 105%;
right: -85vw;
transform: rotate(360deg);
}
}
.snow20 {
right: 100%;
width: 0.75rem;
height: 0.75rem;
animation: snow20 20s linear infinite;
}
@keyframes snow20 {
0% {
top: -100%;
right: -98vw;
transform: rotate(0deg);
}
25% {
right: -99vw;
}
50% {
right: -98vw;
}
75% {
right: -97vw;
}
100% {
top: 105%;
right: -98vw;
transform: rotate(360deg);
}
}
/* Einblicke */
.Fotoalbum {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
position: relative;
}
.Fotohead {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
.Fotobody {
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
}
.Fotobox {
aspect-ratio: 1/1;
background-color: #383838;
cursor: zoom-in;
display: flex;
align-items: center;
justify-content: center;
border: 5px solid #383838;
transition: all 0.3s;
position: relative;
overflow: hidden;
z-index: 0;
}
@media (min-width: 1921px) {
.Fotobox {
width: calc(10% - 1rem);
}
}
@media (min-width: 1281px) and (max-width: 1920px) {
.Fotobox {
width: calc(15% - 1rem);
}
}
@media (min-width: 1024px) and (max-width: 1280px) {
.Fotobox {
width: calc(20% - 1rem);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.Fotobox {
width: calc(25% - 1rem);
}
}
@media (min-width: 577px) and (max-width: 767px) {
.Fotobox {
width: calc(33.333% - 1rem);
}
}
@media (min-width: 0px) and (max-width: 576px) {
.Fotobox {
width: calc(50% - 1rem);
}
}
.Fotobox:hover {
border: 5px solid #e30613;
transition: all 0.3s;
}
.Fotobox-img {
object-fit: cover;
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
z-index: 1;
}
.Fotobox-Titel {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #e3061390;
z-index: 2;
color: #ffffff;
opacity: 0;
transition: all 0.3s;
display: flex;
flex-direction: column;
padding: 1rem;
}
.Fotobox-Text,
.Fotobox-Date {
font-weight: 700 !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
font-size: 0.8rem !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
}
.Fotobox:hover .Fotobox-Titel {
opacity: 1;
transition: all 0.3s;
}
.Big-Fotobox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #383838;
padding: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: zoom-out;
display: none;
z-index: 2000;
}
.Big-Fotobox-img {
border: 5px solid #e30613;
position: relative;
object-fit: cover;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
cursor: default;
z-index: 1;
}
.Big-Fotobox-Text {
text-align: center;
position: relative;
z-index: 2;
font-size: 1.3rem;
line-height: 1.2;
font-weight: bold;
padding: 0;
margin: 0;
}
.Big-Fotobox-Date {
text-align: center;
position: relative;
z-index: 2;
font-size: 1.1rem;
line-height: 1.2;
font-weight: 500;
padding: 0;
margin: 0;
}
/*CheckUp*/
/**/
.CheckUp-Klein {
width: auto;
position: relative;
display: flex;
background-color: #383838;
max-width: 100vw;
overflow: hidden;
z-index: 1;
padding: 5rem 0%;
align-items: center;
}
.CheckUp-Klein-img {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}
.CheckUp-Klein-img img {
object-fit: cover;
min-width: 100%;
height: 100%;
min-height: 100%;
opacity: 0.5;
}
.CheckUp-Klein-Frage {
min-height: 20vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
left: 100vw;
width: 100vw;
min-width: 100vw;
}
.CheckUp-Klein-Frage-Box {
width: calc(90% - 4px);
padding: 2rem;
border: #e30613 2px solid;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #383838;
text-align: center;
}
.kommrein {
left: 0;
animation: kommrein 0.3s linear;
min-width: 100vw;
}
@keyframes kommrein {
0% {
left: 100vw;
}
100% {
left: 0vw;
}
}
.gehraus {
left: -200vw;
min-width: 100vw;
animation: gehraus 0.3s linear;
display: flex;
position: absolute;
}
@keyframes gehraus {
0% {
left: 0vw;
}
100% {
left: -100vw;
}
}
.drausen {
left: -200vw !important;
min-width: 100vw;
width: 100vw;
display: flex;
position: absolute;
}
.CheckUp-p {
color: #ffffff;
}
.Empfehlung {
color: #ffffff;
}
.Empfehlung td:first-child {
margin-right: 1rem;
display: flex;
}
.Empfehlung td:last-child {
font-weight: bolder;
}
.Empfehlung td a {
color: #ffffff;
}
.Fehler, .SpamfilterFehler {
color: #FF0000 !important;
font-weight: bolder !important;
justify-content: start;
}
#FahrschulCheckUp .Fehler {
justify-content: center !important;
}
.KeinFehler {
color: #2e9e2e !important;
font-weight: bolder !important;
}
#CUKEmpfehlung {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
.CUK-Btns {
width: 100%;
display: flex;
float: left;
align-items: center;
text-align: center;
justify-content: center;
}
.Auswertungsbogen {
max-height: 100px !important;
overflow: hidden;
}
.CheckUp-Klein-Auswertung {
display: flex;
float: left;
}
.CheckUp-Klein-Auswertung-Block {
display: flex;
flex-direction: column;
text-align: start;
}
.CheckUp-Klein-Auswertung-Block:first-child {
margin-right: 1rem;
}
.CheckUp-klein ul {
list-style: none;
padding: 0rem;
margin: 0rem;
}
.CheckUp-klein ul li {
font-weight: bolder;
}
.CheckUp-klein ul li:nth-child(1),
.CheckUp-klein ul li:nth-child(3),
.CheckUp-klein ul li:nth-child(6),
.CheckUp-klein ul li:nth-child(7),
.CheckUp-klein ul li:nth-child(9) {
margin-left: 0rem;
}
.CheckUp-klein ul li:nth-child(2),
.CheckUp-klein ul li:nth-child(4),
.CheckUp-klein ul li:nth-child(8),
.CheckUp-klein ul li:nth-child(10) {
margin-left: 2rem;
}
.CheckUp-klein ul li:nth-child(5) {
margin-left: 4rem;
}
/* Anmeldung Kontaktformular */
#HIERISTES {
display: none !important;
width: 100%;
margin-bottom: 2rem;
flex-direction: column;
}
.anmeldung {
display: flex;
width: 100%;
margin-bottom: 2rem;
flex-direction: column;
height: auto;
position: relative;
}
.anmeldungssatz {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.anmeldungsangabe {
width: calc(50% - 0.5rem);
}
.anmeldungsangabe input {
height: calc(2rem + 20px) !important;
}
.anmeldung h2 {
color: #ffffff;
}
.testbereich {
display: none;
}
/* SINGLE-PAGE KFZ */
.single-img-vorschau {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
}
.single-img-vorschau-bg {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
z-index: 0;
}
.single-img-vorschau-person {
position: absolute;
display: flex;
align-items: end;
justify-content: center;
width: 100%;
height: 100%;
z-index: 1;
bottom: -40%;
}
.single-img-e1 {
object-fit: cover;
width: 100%;
height: 100%;
}
.single-img-e2 {
object-fit: cover;
width: auto;
height: 200%;
}
.single-img-is {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (max-width: 982px) {
.single-img-vorschau,
.single-img-vorschau-bg {
aspect-ratio: 20/10;
}
}
.single-page-headline {
position: relative;
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 2px solid #e30613;
}
.single-page-headline h1 {
margin-top: 1rem;
color: #e30613;
font-weight: bolder;
}
@media (max-width: 400px) {
.single-page-headline h1 {
font-size: 1.7rem;
}
}
.single-page {
position: relative;
}
.single-page h2 {
width: 90;
margin-top: 2rem !important;
margin-left: 10%;
}
.single-page p {
margin-left: 15%;
margin-right: 15%;
width: 70%;
}
@media (max-width: 821px) {
.single-page h2 {
margin-top: 1rem !important;
}
}
@media (max-width: 600px) {
.single-page h2 {
width: 95;
margin-left: 5%;
}
.single-page p {
margin-left: 7.5%;
margin-right: 7.5%;
width: 85%;
}
}
.eckdaten {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.eckdaten-is {
display: flex;
width: 100%;
float: left;
align-items: center;
justify-content: center;
}
.Eckdaten-data {
display: flex;
position: relative;
z-index: 1;
border: #e30613 2px solid;
padding: 1rem;
margin: 1rem;
min-width: 9rem;
align-items: center;
justify-content: center;
}
.Eckdaten-data h4 {
position: absolute;
z-index: 2;
background-color: #383838;
top: -0.5rem;
line-height: 1;
font-size: 1rem;
padding: 0 0.5rem;
margin: 0;
color: #e30613;
}
.Eckdaten-data p {
padding: 0;
margin: 0;
line-height: 1;
}
@media (max-width: 821px) {
.eckdaten-is {
flex-wrap: wrap;
}
.Eckdaten-data {
padding: 0.75rem;
margin: 0.5rem;
min-width: 13rem;
}
.Eckdaten-data h4 {
top: -0.6rem;
}
}
@media (max-width: 639px) {
.Eckdaten-data {
min-width: 10.5rem;
}
}
@media (max-width: 471px) {
.Eckdaten-data {
min-width: 8rem;
}
}
.ausstattung {
display: flex;
flex-wrap: wrap;
float: left;
width: 100%;
justify-content: space-between;
}
.ausstattung-artikel {
width: 15%;
}
.ausstattung-artikel h2 {
color: #e30613;
}
.ausstattung-artikel ul {
list-style-type: none;
/* Entfernt das Standard-Aufzählungszeichen */
padding-left: 20px;
/* Platz für das Symbol lassen */
}
.ausstattung-artikel ul li {
position: relative;
/* Ermöglicht das Hinzufügen des Pseudoelements */
}
.ausstattung-artikel ul li::before {
content: "■";
/* Quadrat als Symbol */
color: #e30613;
/* Farbe des Symbols anpassen (z.B. grün) */
font-size: 1em;
/* Größe des Symbols */
position: absolute;
/* Ermöglicht Positionierung des Symbols */
left: -1rem;
/* Abstand vom Text */
top: -0.2rem;
/* Positionierung */
}
@media (max-width: 1700px) {
.ausstattung-artikel {
width: 31%;
}
}
@media (max-width: 950px) {
.ausstattung-artikel {
width: 47%;
}
}
@media (max-width: 515px) {
.ausstattung-artikel {
width: 100%;
}
}
.KFZ-Klassen {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.KFZ-Lehrer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
}
.KFZ-Lehrer-is {
display: flex;
float: left;
align-items: center;
justify-content: center;
width: 100%;
}
.KFZ-Lehrer-is-img {
width: 8rem;
height: 8rem;
overflow: hidden;
display: flex;
float: left;
align-items: center;
justify-content: center;
border: 5px solid #e30613;
border-radius: 50%;
margin: 0 3rem 0 0;
}
.KFZ-Lehrer-is-a {
height: auto;
display: flex;
flex-direction: column;
}
.KFZ-Lehrer-is-a-is {
display: flex;
float: left;
text-align: center;
}
.KFZ-Aktion {
color: #ffffff;
border: 2px solid #e30613;
padding: 0.5rem 1rem;
margin: 0;
transition: all 0.3s;
}
.KFZ-Aktion:hover {
color: #e30613;
transition: all 0.3s;
}
.KFZ-Lehrer-is-a-is .KFZ-Aktion:first-child {
margin-right: 1rem;
}
@media (max-width: 700px) {
.KFZ-Lehrer-is-a-is {
display: flex;
flex-direction: column;
}
.KFZ-Lehrer-is-a-is .KFZ-Aktion:first-child {
margin-right: 0rem;
margin-bottom: 1rem;
}
}
@media (max-width: 400px) {
.KFZ-Lehrer-is {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.KFZ-Lehrer-is-img {
margin: 0 1rem 0 0;
}
}
/* SINGLE-PAGE KFZ */
.allefahrzeuge {
width: 100%;
display: flex;
float: left;
flex-wrap: wrap;
margin-top: 2rem;
justify-content: space-between;
}
.einfahrzeug {
width: calc(33.333333% - 0.66666666666rem);
aspect-ratio: 1/1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
transition: all 0.3s;
margin-bottom: 1rem;
border: 2px solid #e30613;
}
.einfahrzeug img {
z-index: 1;
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.3s;
}
.einfahrzeug:hover>img {
opacity: 0.5;
transition: all 0.3s;
transform: scale(1.2);
}
.einfahrzeug h2 {
z-index: 2;
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
margin: 0;
font-size: 1rem;
padding: 1rem;
line-height: 1;
transition: all 0.3s;
font-weight: bolder;
color: #e30613;
}
.einfahrzeug:hover>h2 {
z-index: 2;
position: absolute;
width: 100%;
text-align: center;
bottom: calc(50% - 1.5rem);
margin: 0;
font-size: 1rem;
padding: 1rem;
line-height: 1;
transition: all 0.3s;
color: #ffffff;
}
/* Mitarbeiter */
.vorstellung {
width: 100%;
height: auto;
display: flex;
float: left;
margin-top: 2rem;
margin-bottom: 2rem;
}
.vorstellung-img {
width: 50%;
aspect-ratio: 16/9;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
}
.vorstellung-infos {
width: 50%;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 0;
}
.vorstellung-b1 {
width: 50px;
height: 2px;
background-color: #e30613;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.vorstellung-b2 {
width: 2px;
height: 50px;
background-color: #e30613;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.vorstellung-b3 {
width: 50px;
height: 2px;
background-color: #e30613;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.vorstellung-b4 {
width: 2px;
height: 50px;
background-color: #e30613;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.e1 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 0;
padding: 2rem;
}
.e1 img {
object-fit: cover;
width: 100%;
height: 100%;
}
.e2 {
width: 30%;
height: auto;
display: flex;
position: absolute;
z-index: 1;
right: 4rem;
top: 4rem;
}
.e2 img {
object-fit: cover;
width: 100%;
height: auto;
}
.e3 {
height: calc(100% - 4rem);
width: calc(100% - 4rem);
display: flex;
justify-content: start;
align-items: end;
position: absolute;
z-index: 3;
bottom: 2rem;
left: 2rem;
}
.e3 img {
object-fit: cover;
width: auto;
height: 100%;
}
.kennenlernen {
position: fixed;
z-index: 999999;
background-color: #0053a8;
width: 30%;
height: auto;
display: none;
float: left;
}
.kennenlernen-img {
width: 6rem;
height: 6rem;
min-width: 6rem;
min-height: 6rem;
max-width: 6rem;
max-height: 6rem;
border: 2px #e30613 solid;
border-radius: 50%;
overflow: hidden;
background-color: #ffffff;
}
.kennenlernen-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (min-width: 1801px) and (max-width: 2383px) {
.vorstellung-infos .eckdaten-is {
flex-direction: column;
}
}
@media (max-width: 1800px) {
.vorstellung {
flex-direction: column;
}
.vorstellung-img,
.vorstellung-infos {
width: 100%;
}
}
@media (max-width: 1272px) {
.vorstellung-infos .eckdaten-is {
flex-direction: column;
}
}
/* SLIDER BARRIEREFREI 16.12.2024 */
#NewSliderAnsicht {
display: flex;
float: left;
width: 100%;
}
#NewSliderLinks {
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 80px !important;
}
.NewSliderhelper {
width: 100%;
height: 0px;
}
.text-highlight {
color: #e30613 !important;
}
.text-secondary {
color: #e30613 !important;
font-weight: 900 !important;
font-size: 2rem;
}
.text-primary {
color: #ffffff !important;
}
.forbutton-link {
width: 100%;
display: flex;
justify-content: end;
}
.button-link {
position: relative;
display: flex;
border-radius: 50%;
border: 10px solid #282828;
width: auto;
max-width: 130px;
min-width: 130px;
aspect-ratio: 1/1;
box-shadow: 0px 0px 1rem 0px #8e8e8e;
/*box-shadow: 3px 3px 3px #8e8e8e, -3px -3px #5d5d5d;*/
background-color: #282828;
cursor: pointer;
}
.button-content {
position: relative;
display: flex;
flex-direction: column;
background-color: #282828;
width: 100%;
height: auto;
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: #5d5d5d;
justify-content: center;
align-items: center;
animation: powerausen 3s infinite;
transition: all 0.3s;
}
.button-link:hover>.button-content {
border-color: #33ff33 !important;
transition: all 0.3s;
}
.button-text {
color: #ffffff !important;
transition: all 0.3s;
}
.button-link:hover>.button-content .button-text {
color: #ffffff !important;
transition: all 0.3s;
}
.button-light {
width: 30px;
height: 10px;
background-color: #5d5d5d;
border-radius: 2px;
animation: powerfarbe 3s infinite;
margin-top: 10px;
transition: all 0.3s;
}
.button-link:hover>.button-content .button-light {
background-color: #33ff33 !important;
transition: all 0.3s;
}
#NewSliderRechts {
width: 40%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
.NewSliderIMG {
width: 100%;
height: 100vh;
z-index: 1;
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
position: relative;
}
.NewSliderIMG img {
object-fit: cover;
height: 100%;
opacity: 0.5;
}
#NewSliderTexte {
display: flex;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
flex-direction: column;
text-align: center;
z-index: 2;
height: 100%;
}
#SliderText {
font-weight: bolder;
font-size: 2.3rem;
}
#slider-subtext {
font-weight: bolder;
}
#NewSliderControl {
height: 3rem;
position: absolute;
width: 100%;
bottom: 0;
align-items: center;
justify-content: space-between;
display: flex;
z-index: 3;
}
#NewSliderControl Button {
width: 3rem;
height: 3rem;
background-color: #383838;
align-items: center;
justify-content: center;
text-align: center;
display: flex;
border: none;
color: #e30613;
padding: 0;
margin: 0;
opacity: 1;
transition: all 0.3s;
}
#NewSliderControl .before {
width: 1.5rem;
height: 2rem;
background-color: #e30613;
clip-path: polygon(0% 50%, 100% 0%, 100% 20%, 40% 50%, 100% 80%, 100% 100%);
}
#NewSliderControl button .autorun {
width: 1.5rem;
height: 2rem;
background-color: #e30613;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 75% 0%, 25% 0%, 25% 100%, 0% 100%);
transition: 0.3s;
}
#NewSliderControl button .autorunstop {
width: 1.5rem;
height: 2rem;
background-color: #e30613;
clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 50%, 100% 50%, 0% 100%, 0% 100%, 0% 100%);
transition: 0.3s;
}
#NewSliderControl .next {
width: 1.5rem;
height: 2rem;
background-color: #e30613;
clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%, 0% 80%, 60% 50%, 0% 20%);
}
@media (min-width:400px) {
.text-secondary {
font-size: 3rem;
}
}
@media (min-width:500px) {
.text-secondary {
font-size: 4rem;
}
}
@media (max-width: 576px) {
#NewSliderLinks {
padding: 0px 20px !important;
}
}
@media (min-width:900px) {
.text-secondary {
font-size: 5rem;
}
}
@media (max-width: 1000px) {
.NewSliderhelper {
width: 100%;
height: 90px;
display: flex;
}
#NewSliderAnsicht {
flex-direction: column;
}
#NewSliderLinks {
width: 100%;
}
#NewSliderRechts {
width: 100%;
}
.NewSliderIMG {
height: 50vh;
}
}
@media (min-width:1300px) {
.text-secondary {
font-size: 5rem;
}
}
@media (min-width:1600px) {
.text-secondary {
font-size: 6rem;
}
}
@media (min-width:1920px) {
.text-secondary {
font-size: 8rem;
}
}
@media (min-width:2200px) {
.text-secondary {
font-size: 9rem;
}
}
/* Startseite > ZamzowDay | BARRIEREFREI 24.01.2025 */
.StartseiteZamzowDay-Container {
display: flex;
position: relative;
z-index: 0;
flex-direction: column;
}
.ZamzowDayBGIMG {
position: absolute;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
display: flex;
height: 100%;
}
.ZamzowDayBGIMG img {
opacity: 0.5;
}
.ZamzowDayBG {
object-fit: cover;
min-height: 100%;
min-width: 100%;
}
.ZamzowDayText {
width: 100%;
z-index: 2;
position: relative;
padding: 4.5rem 80px 4.5rem 80px;
}
@media (max-width: 576px) {
.ZamzowDayText {
padding: 4.5rem 20px 4.5rem 20px;
}
}
/* Startseite > Team | BARRIEREFREI 09.01.2025 */
#NewTeamContainer {
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
}
#Teamfoto {
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
}
#TeamFotoBox {
width: 60%;
display: flex;
float: left;
align-items: center;
justify-content: center;
position: relative;
aspect-ratio: 16/9;
}
.isLinks {
left: -10%;
}
.vonLinks {
left: 0%;
animation: vonLinks 0.3s;
}
@keyframes vonLinks {
0% {
left: -10%;
}
100% {
left: 0%;
}
}
.TeamFotoBoxLink {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
float: left;
width: 100%;
aspect-ratio: 16/9;
}
.Bilderrahmen1 {
position: absolute;
z-index: 1;
clip-path: polygon(0% 0%, 10% 0%, 10% 90%, 100% 90%, 100% 100%, 0% 100%);
background-color: #e30613;
width: 50px;
height: 50px;
top: 0;
left: 0;
transform: rotate(90deg);
}
.Bilderrahmen2 {
position: absolute;
z-index: 1;
clip-path: polygon(0% 0%, 10% 0%, 10% 90%, 100% 90%, 100% 100%, 0% 100%);
background-color: #e30613;
width: 50px;
height: 50px;
top: 0;
right: 0;
transform: rotate(180deg);
}
.Bilderrahmen3 {
position: absolute;
z-index: 1;
clip-path: polygon(0% 0%, 10% 0%, 10% 90%, 100% 90%, 100% 100%, 0% 100%);
background-color: #e30613;
width: 50px;
height: 50px;
bottom: 0;
left: 0;
}
.Bilderrahmen4 {
position: absolute;
z-index: 1;
clip-path: polygon(0% 0%, 10% 0%, 10% 90%, 100% 90%, 100% 100%, 0% 100%);
background-color: #e30613;
width: 50px;
height: 50px;
bottom: 0;
right: 0;
transform: rotate(270deg);
}
.TeamFotoBoxLinkContainer {
position: relative;
width: 90%;
aspect-ratio: 16/9;
z-index: 1;
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
}
.TeamFotoBoxLinkContainer img {
object-fit: cover;
position: absolute;
}
.TeamFotoBoxLinkContainer .ttperson {
width: 95%;
z-index: 3;
bottom: 0;
}
.TeamFotoBoxLinkContainer .ttwbm {
width: 45%;
z-index: 2;
right: 3%;
top: 3%;
}
.TeamFotoBoxLinkContainer .ttbg {
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: 1;
bottom: 0;
right: 0;
}
#TeamFotoText {
width: 40%;
display: flex;
flex-direction: column;
position: relative;
}
.isRechts {
right: -10%;
}
.vonRechts {
right: 0%;
animation: vonRechts 0.3s;
}
@keyframes vonRechts {
0% {
right: -10%;
}
100% {
right: 0%;
}
}
@media (max-width: 1000px) {
#Teamfoto {
flex-direction: column;
}
#TeamFotoBox {
width: 100%;
}
#TeamFotoText {
width: 100%;
}
}
/* Seite Team | BARRIEREFREI 09.01.2025 */
#DasTeam {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#DasTeamHeader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
}
#DasTeamHeader img {
object-fit: cover;
width: 100%;
}
#DasTeamTheaser h1 {
margin-top: 1rem;
color: #e30613;
font-weight: bolder;
}
.Trennlinie {
display: flex;
height: 2px;
width: 100%;
background-color: #e30613;
margin: 2rem 0 2rem 0;
}
#DasTeamMitarbeiter {
display: flex;
flex-wrap: wrap;
gap: 0rem 1.3%;
}
.Mitarbeitervorstellung {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 15.58%;
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
z-index: 0;
border: 2px solid #e30613;
}
.Mitarbeitervorstellung img {
object-fit: cover;
}
.MAVPerson {
position: absolute;
z-index: 2;
width: 100%;
}
.MAVBG {
position: absolute;
z-index: 1;
height: 100%;
}
.MVS {
position: absolute;
top: 0;
right: 0;
z-index: 4;
height: 2rem;
width: 2rem;
background-color: #e3061300;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
transform: rotate(0deg);
}
.MVSP {
background-color: #ffffff;
width: 60%;
height: 60%;
clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
}
.Mitarbeitervorstellung:hover>.MitarbeitervorstellungIS {
min-height: 100%;
transition: all 0.3s;
}
.Mitarbeitervorstellung:hover>.MVS {
background-color: #e3061300;
transition: all 0.3s;
transform: rotate(45deg);
}
.MitarbeitervorstellungIS {
position: absolute;
width: 100%;
bottom: 0;
z-index: 3;
padding: 0.5rem;
background-color: #e3061390;
transition: all 0.3s;
min-height: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.Mitarbeitervorstellung h2 {
font-size: 1.2rem;
color: #ffffff;
margin: 0 0 0.25rem 0;
padding: 0;
font-weight: bolder;
}
.Mitarbeitervorstellung h3 {
font-size: 1rem;
color: #ffffff;
margin: 0 0 0 0;
padding: 0;
font-weight: bolder;
}
@media (min-width: 1000px) and (max-width: 1600px) {
.Mitarbeitervorstellung {
width: 32.46%;
}
}
@media (min-width: 1200px) and (max-width: 1300px) {
.Mitarbeitervorstellung {
margin-bottom: 0.8rem;
}
}
@media (max-width: 1000px) {
#DasTeamHeader {
aspect-ratio: 16/9;
}
}
@media (min-width: 600px) and (max-width: 1200px) {
.Mitarbeitervorstellung {
margin-bottom: 0.5rem;
}
}
@media (min-width: 600px) and (max-width: 1000px) {
.Mitarbeitervorstellung {
width: 49%;
}
}
@media (min-width: 0px) and (max-width: 600px) {
.Mitarbeitervorstellung {
width: 100%;
}
}
/* Mitarbeiter | BARRIEREFREI 09.01.2025 */
#DerFahrlehrer {
width: 100%;
display: flex;
flex-direction: column;
}
#MitarbeiterTeilung {
width: 100%;
padding: 0px 80px;
display: flex;
float: left;
margin: 0 0 1.5rem 0;
}
#Mitarbeiterfoto {
width: 60%;
display: flex;
float: left;
align-items: center;
justify-content: center;
position: relative;
}
.Mitarbeiterfotobox {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
float: left;
width: 100%;
aspect-ratio: 16/9;
}
.MitarbeiterfotoboxContainer {
position: relative;
width: 90%;
aspect-ratio: 16/9;
z-index: 1;
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
}
.MitarbeiterfotoboxContainer img {
object-fit: cover;
position: absolute;
}
.MitarbeiterfotoboxContainer .ttperson {
left: 10%;
height: 95%;
z-index: 3;
bottom: 0;
}
.MitarbeiterfotoboxContainer .ttwbm {
width: 45%;
z-index: 2;
right: 3%;
top: 3%;
}
.MitarbeiterfotoboxContainer .ttbg {
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: 1;
bottom: 0;
right: 0;
}
#MitarbeiterEckdaten {
display: flex;
width: 40%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: auto;
}
.Database {
border: 2px solid #e30613;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
padding: 0.5rem;
position: relative;
z-index: 0;
margin: 1.5rem 0 1.5rem 0;
min-width: 15rem;
}
.Database h2 {
color: #e30613;
background-color: #383838;
position: absolute;
top: -1rem;
font-weight: bolder;
font-size: 1rem;
padding: 0.2rem;
margin: 0;
}
.Database p {
margin: 0;
}
#Aufgabenbereich {
margin: 0 0 1.5rem 0;
}
.colage {}
.colage-oben,
.colage-unten {
display: flex;
float: left;
width: 100%;
justify-content: center;
}
.colage-oben {
flex-wrap: wrap;
align-items: end;
}
.colage-unten {
justify-content: center;
align-items: start;
}
.colage-b1 img,
.colage-b2 img,
.colage-b3 img,
.colage-b4 img,
.colage-b5 img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all 0.3s;
}
.colage-b1 img:hover,
.colage-b2 img:hover,
.colage-b3 img:hover,
.colage-b4 img:hover,
.colage-b5 img:hover {
transform: scale(1.2);
transition: all 0.3s;
}
.colage-b1,
.colage-b2,
.colage-b3,
.colage-b4,
.colage-b5 {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16/9;
overflow: hidden;
}
.colage-b1 {
width: 25%;
}
.colage-b2 {
width: 50%;
}
.colage-b3 {
width: 25%;
}
.colage-b4 {
width: 35%;
}
.colage-b5 {
width: 40%;
}
#LinkzumKF h2 {
color: #e30613 !important;
}
@media (max-width: 576px) {
#MitarbeiterTeilung {
padding: 0px 20px;
}
}
@media (max-width: 806px) {
.colage-b1 {
width: 40%;
aspect-ratio: 4/3;
margin-left: 10%;
}
.colage-b2 {
width: 50%;
aspect-ratio: 1/1;
}
.colage-b3 {
width: 100%;
aspect-ratio: 20/10;
}
.colage-b4 {
width: 50%;
aspect-ratio: 1/1;
}
.colage-b5 {
width: 40%;
aspect-ratio: 4/3;
margin-right: 10%;
}
}
@media (min-width: 0px) and (max-width: 1000px) {
#MitarbeiterTeilung {
flex-direction: column;
}
#Mitarbeiterfoto {
width: 100%;
}
.Mitarbeiterfotobox {
aspect-ratio: 4/3;
}
.MitarbeiterfotoboxContainer {
aspect-ratio: 4/3;
}
#MitarbeiterEckdaten {
width: 100%;
}
.Database {
min-width: 13rem;
}
}
/* Startseite > Checkup | BARRIEREFREI 13.01.2025 */
.StartseiteCheckUp-Container {
display: flex;
position: relative;
z-index: 0;
flex-direction: column;
}
.CheckUpBGIMG {
position: absolute;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
display: flex;
height: 100%;
}
.CHBG {
object-fit: cover;
min-height: 100%;
min-width: 100%;
transform: scaleX(-1) !important;
}
.CheckUpText {
width: 100%;
z-index: 2;
position: relative;
padding: 4.5rem 80px 0rem 80px;
}
.CheckUpbutton {
width: 100%;
z-index: 2;
position: relative;
padding: 4.5rem 80px 4.5rem 80px;
display: flex;
justify-content: start;
}
@media (max-width: 576px) {
.CheckUpText {
padding: 4.5rem 20px 0rem 20px;
}
.CheckUpbutton {
padding: 4.5rem 20px 4.5rem 20px;
}
}
/* CheckUp-Seite > Checkup | BARRIEREFREI 14.01.2025 */
#FahrschulCheckUp {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
width: 100%;
height: 100%;
padding: 5rem 80px;
}
.CheckUpSite {
height: 100%;
width: 100%;
display: flex;
z-index: 1;
position: absolute;
background-color: #383838;
align-items: center;
justify-content: center;
}
.FormPClose {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.CheckUpSiteBG {
object-fit: cover;
min-height: 100%;
min-width: 100%;
width: 100%;
display: flex;
}
#FahrschulCheckUp details {
z-index: 2;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
display: flex;
flex-direction: column !important;
cursor: default;
/* Verhindert, dass der Benutzer denkt, das Element ist interaktiv */
}
.CUSOPEN {
padding: 1rem;
background-color: #383838;
width: 100%;
border: #e30613 2px solid;
display: flex;
}
.CUSCLOSE {
padding: 0.25rem;
background-color: #383838;
opacity: 0.75;
}
#FahrschulCheckUp details section p {
color: #ffffff;
}
#FahrschulCheckUp details summary {
pointer-events: none;
/* Verhindert, dass der Benutzer das Summary-Element interaktiv nutzen kann */
}
#FahrschulCheckUp details summary::marker {
content: none;
/* Entfernt das Standard-Pfeil-Icon */
}
#FahrschulCheckUp details summary::before {
content: none;
/* Entfernt das Standard-Pfeil-Icon */
}
#FahrschulCheckUp details summary::before {
content: none;
/* Entfernt das Pfeil-Icon, auch wenn das Element nicht geöffnet ist */
}
.CUK-Btn {
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1;
color: #ffffff;
font-weight: bolder;
background-color: #383838;
border: 2px solid #e30613;
margin: 0.5rem 1rem;
cursor: pointer;
transition: all 0.3s;
}
.CUK-Btn:hover,
.CUK-Btn:focus {
background-color: #e30613;
cursor: pointer;
transition: all 0.3s;
}
#FahrschulCheckUp .CUUbersetzer {
padding: 1rem;
background-color: #383838;
width: 100%;
border: #e30613 2px solid;
display: flex;
flex-direction: column;
z-index: 5;
}
@media (min-width: 1000px) {
#FahrschulCheckUp .CUSCLOSE {
width: 10rem;
}
}
@media (min-width: 576px) and (max-width:1000px) {
#FahrschulCheckUp .CUSCLOSE {
width: 8rem;
}
}
@media (max-width: 576px) {
#FahrschulCheckUp {
padding: 5rem 20px;
}
#FahrschulCheckUp .CUSCLOSE {
width: 100%;
}
}
/*
#CheckUp {
position: relative;
z-index: 0;
}
#FahrschulCheckUp .CUAuswahl {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#FahrschulCheckUp .CUAuswahl p {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
display: flex;
}
#FormCheckerCheckUp {
border: none;
width: auto;
padding: 0;
margin: 0.5rem 1rem;
}
#FormCheckerCheckUp .CUK-Btn {
margin: 0;
}
*/
/* POPUP BARRIEREFREI 11.12.2024 */
.PopUpContainerOFF {
display: none;
}
.PopUpContainerON {
display: flex;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 8000;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #383838e6;
padding: 2rem;
}
#PopUpContainer section {
position: relative;
background-color: #383838;
border: 2px solid #e30613;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
#PopUpContainercloseButton {
border: #e30613 2px solid;
padding: 0.5rem 1rem;
color: #e30613;
background-color: #383838;
transition: 0.3s;
font-weight: bolder;
}
#PopUpContainercloseButton:hover,
#PopUpContainercloseButton:focus {
transition: 0.3s;
color: #ffffff;
background-color: #e30613;
}
.AblaufdatumPopUpContainer {
display: none !important;
}
/* PKWs Einzellseiten | BARRIEREFREI 27.01.2025 */
#DieFahrzeuge {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#DieFahrzeugeHeader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
}
#DieFahrzeugeHeader img {
object-fit: cover;
width: 100%;
}
@media (max-width: 1000px) {
#DieFahrzeugeHeader {
aspect-ratio: 16/9;
}
}
.DieFahrzeugeH1 {
position: relative;
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 2px solid #e30613;
}
.DieFahrzeugeH1 h1 {
margin-top: 1rem;
color: #e30613;
font-weight: bolder;
}
@media (max-width: 400px) {
.DieFahrzeugeH1 h1 {
font-size: 1.7rem;
}
}
.DieFahrzeugeTheaser {
position: relative;
}
.DieFahrzeugeTheaser h2 {
width: 90;
margin-top: 2rem !important;
margin-left: 10%;
text-align: start;
}
.DieFahrzeugeTheaser p {
margin-left: 15%;
margin-right: 15%;
width: 70%;
text-align: start;
}
@media (max-width: 821px) {
.DieFahrzeugeTheaser h2 {
margin-top: 1rem !important;
}
}
@media (max-width: 600px) {
.DieFahrzeugeTheaser h2 {
width: 95;
margin-left: 5%;
}
.DieFahrzeugeTheaser p {
margin-left: 7.5%;
margin-right: 7.5%;
width: 85%;
}
}
/* 1 Bild */
.CollagenMit1 {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
justify-content: center;
}
.CollagenMit1 .CollagenIMG1 {
width: 50%;
aspect-ratio: 16/9;
align-items: end;
}
@media (max-width: 981px) {
.CollagenMit1 .CollagenIMG1 {
width: 100%;
aspect-ratio: 16/9;
align-items: end;
}
}
/* 2 Bilder */
.CollagenMit2 {
float: left;
display: flex;
width: 100%;
position: relative;
justify-content: center;
align-items: center;
}
.CollagenMit2 .CollagenIMG1 {
width: 55%;
aspect-ratio: 16/9 !important;
align-items: start;
}
.CollagenMit2 .CollagenIMG2 {
width: 45%;
aspect-ratio: 1/1;
align-items: end;
}
.CollagenMit2 .CollagenIMG2 img {
min-height: 100%;
}
@media (max-width: 981px) {
.CollagenMit2 {
flex-direction: column;
justify-content: start;
align-items: start;
}
.CollagenMit2 .CollagenIMG1 {
width: 80%;
}
.CollagenMit2 .CollagenIMG2 {
width: 80%;
margin: 0 0 0 20%;
aspect-ratio: 4/3;
}
}
/* 3 Bilder */
.CollagenMit3 {
float: left;
display: flex;
width: 100%;
position: relative;
justify-content: center;
align-items: center;
}
.CollagenMit3 .CollagenIMG1 {
width: 30%;
aspect-ratio: 1/1;
align-items: center;
}
.CollagenMit3 .CollagenIMG1 img {
height: 100%;
}
.CollagenMit3 .CollagenIMG2 {
width: 40%;
aspect-ratio: 1/1;
align-items: center;
}
.CollagenMit3 .CollagenIMG2 img {
height: 100%;
}
.CollagenMit3 .CollagenIMG3 {
width: 30%;
aspect-ratio: 4/3;
align-items: end;
}
.CollagenMit3 .CollagenIMG3 img {
height: 100%;
}
@media (max-width: 981px) {
.CollagenMit3 {
flex-direction: column;
justify-content: start;
align-items: start;
}
.CollagenMit3 .CollagenIMG1 {
width: 70%;
aspect-ratio: 16/9;
align-items: center;
margin: 0 0 0 30%;
}
.CollagenMit3 .CollagenIMG2 {
width: 100%;
aspect-ratio: 16/9;
}
.CollagenMit3 .CollagenIMG3 {
width: 70%;
aspect-ratio: 16/9;
align-items: center;
margin: 0 30% 0 0;
}
}
/* 4 Bilder */
.CollagenMit4 {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
justify-content: center;
}
.CollagenMit4-oben {
width: 100%;
display: flex;
float: left;
justify-content: center;
align-items: end;
}
.CollagenMit4 .CollagenIMG1 {
width: 55%;
aspect-ratio: 16/9;
}
.CollagenMit4 .CollagenIMG2 {
width: 45%;
aspect-ratio: 16/9;
align-items: end;
}
.CollagenMit4 .CollagenIMG2 img {
height: 100%;
}
.CollagenMit4-unten {
width: 100%;
display: flex;
float: left;
justify-content: center;
align-items: start;
}
.CollagenMit4 .CollagenIMG3 {
width: 40%;
aspect-ratio: 16/9;
}
.CollagenMit4 .CollagenIMG3 img {
height: 100%;
min-width: 105%;
}
.CollagenMit4 .CollagenIMG4 {
width: 40%;
aspect-ratio: 4/3;
}
@media (max-width: 981px) {
.CollagenMit4-oben {
flex-direction: column;
}
.CollagenMit4 .CollagenIMG1 {
width: 80%;
margin: 0 20% 0 0;
}
.CollagenMit4 .CollagenIMG2 {
width: 100%;
aspect-ratio: 1/1;
}
.CollagenMit4-unten {
flex-direction: column;
}
.CollagenMit4 .CollagenIMG3 {
width: 100%;
aspect-ratio: 16/9;
}
.CollagenMit4 .CollagenIMG4 {
width: 70%;
aspect-ratio: 16/9;
margin: 0 0 0 30%;
}
}
/* 5 Bilder */
.CollagenMit5 {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
justify-content: center;
}
.CollagenMit5 .CollagenIMG1 {
width: 25%;
aspect-ratio: 16/9;
align-items: end;
}
.CollagenMit5 .CollagenIMG2 {
width: 40%;
aspect-ratio: 16/9;
align-items: end;
}
.CollagenMit5 .CollagenIMG3 {
width: 35%;
aspect-ratio: 16/9;
align-items: end;
}
.CollagenMit5 .CollagenIMG4 {
width: 30%;
aspect-ratio: 16/9;
align-items: start;
}
.CollagenMit5 .CollagenIMG5 {
width: 40%;
aspect-ratio: 16/9;
align-items: start;
}
@media (max-width: 981px) {
.CollagenMit5 .CollagenIMG1 {
width: 80%;
aspect-ratio: 16/9;
margin: 0 10% 0 10%;
}
.CollagenMit5 .CollagenIMG2 {
width: 50%;
aspect-ratio: 16/9;
}
.CollagenMit5 .CollagenIMG3 {
width: 50%;
aspect-ratio: 16/9;
}
.CollagenMit5 .CollagenIMG4 {
width: 100%;
aspect-ratio: 16/9;
}
.CollagenMit5 .CollagenIMG5 {
width: 80%;
aspect-ratio: 16/9;
margin: 0 10% 0 10%;
}
}
.CollagenIMG1,
.CollagenIMG2,
.CollagenIMG3,
.CollagenIMG4,
.CollagenIMG5 {
display: flex;
position: relative;
overflow: hidden;
}
#Collage img {
object-fit: cover;
overflow: hidden;
transform: scale(1);
transition: 0.3s all;
}
#Collage img:hover {
overflow: hidden;
transform: scale(1.2);
transition: 0.3s all;
}
.CollagenIMG1 img,
.CollagenIMG2 img,
.CollagenIMG3 img,
.CollagenIMG4 img,
.CollagenIMG5 img {
object-fit: cover;
width: 100%;
}
.Fahrzeugmotorisierung {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-wrap: wrap;
position: relative;
width: 100%;
}
.Fahrzeugmotorisierung h2 {
width: 100%;
}
.Fahrzeugmotorisierung-data {
display: flex;
position: relative;
z-index: 1;
border: #e30613 2px solid;
padding: 1rem;
margin: 1rem;
min-width: 9rem;
align-items: center;
justify-content: center;
}
.Fahrzeugmotorisierung-data h3 {
position: absolute;
z-index: 2;
background-color: #383838;
top: -0.5rem;
line-height: 1;
font-size: 1rem;
padding: 0 0.5rem;
margin: 0;
color: #e30613;
}
.Fahrzeugmotorisierung-data p {
padding: 0;
margin: 0;
line-height: 1;
}
.Fahrzeugusstattung {
display: flex;
flex-wrap: wrap;
float: left;
width: 100%;
justify-content: space-between;
}
.Fahrzeugusstattung-artikel {
width: 15%;
}
.Fahrzeugusstattung-artikel h2 {
color: #e30613;
text-align: start;
}
.Fahrzeugusstattung-artikel ul {
list-style-type: none;
/* Entfernt das Standard-Aufzählungszeichen */
padding-left: 20px;
/* Platz für das Symbol lassen */
}
.Fahrzeugusstattung-artikel ul li {
position: relative;
text-align: start;
/* Ermöglicht das Hinzufügen des Pseudoelements */
}
.Fahrzeugusstattung-artikel ul li::before {
content: "■";
/* Quadrat als Symbol */
color: #e30613;
/* Farbe des Symbols anpassen (z.B. grün) */
font-size: 1em;
/* Größe des Symbols */
position: absolute;
/* Ermöglicht Positionierung des Symbols */
left: -1rem;
/* Abstand vom Text */
top: -0.2rem;
/* Positionierung */
}
@media (max-width: 1700px) {
.Fahrzeugusstattung-artikel {
width: 31%;
}
}
@media (max-width: 950px) {
.Fahrzeugusstattung-artikel {
width: 47%;
}
}
@media (max-width: 515px) {
.Fahrzeugusstattung-artikel {
width: 100%;
}
}
/* Startseite > Fahrzeuge | BARRIEREFREI 29.01.2025 */
#NewFahrzeugeContainer {
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
}
#Fahrzeugfoto {
width: 100%;
height: auto;
display: flex;
float: left;
align-items: center;
justify-content: center;
}
#FahrzeugfotoBox {
width: 60%;
display: flex;
float: left;
align-items: center;
justify-content: center;
position: relative;
aspect-ratio: 16/9;
}
.isLinksFuhrpark {
transform: scale(0.5);
}
.vonLinksFuhrpark {
transform: scale(1);
animation: vonLinksFuhrpark 0.3s;
}
@keyframes vonLinksFuhrpark {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.FahrzeugfotoBoxLink {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
float: left;
width: 100%;
aspect-ratio: 16/9;
}
.FahrzeugfotoBoxLinkContainer {
position: relative;
width: 90%;
aspect-ratio: 16/9;
z-index: 1;
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
}
.FahrzeugfotoBoxLinkContainer img {
object-fit: cover;
position: absolute;
}
.FahrzeugfotoBoxLinkContainer .ttperson {
width: 95%;
z-index: 3;
bottom: 0;
}
.FahrzeugfotoBoxLinkContainer .ttwbm {
width: 45%;
z-index: 2;
right: 3%;
top: 3%;
}
.FahrzeugfotoBoxLinkContainer .ttbg {
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: 1;
bottom: 0;
right: 0;
}
#FahrzeugfotoText {
width: 40%;
display: flex;
flex-direction: column;
position: relative;
}
.isRechtsFuhrpark {
opacity: 0.5;
}
.isRechtsFuhrpark {
opacity: 1;
animation: vonRechtsFuhrpark 0.3s;
}
@keyframes vonRechtsFuhrpark {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@media (max-width: 1000px) {
#Fahrzeugfoto {
flex-direction: column;
}
#FahrzeugfotoBox {
width: 100%;
}
#FahrzeugfotoText {
width: 100%;
}
}
/* Seite Fahrzeuge | BARRIEREFREI 05.02.2025 */
#DieFahrzeugePage {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#DieFahrzeugePageHeader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
}
#DieFahrzeugePageHeader img {
object-fit: cover;
width: 100%;
}
#DieFahrzeugePageTheaser h1 {
margin-top: 1rem;
color: #e30613;
font-weight: bolder;
}
#DieFahrzeugePageListe {
display: flex;
flex-wrap: wrap;
gap: 0rem 1.3%;
}
.Fahrzeugvorstellung {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 15.58%;
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
z-index: 0;
border: 2px solid #e30613;
}
.Fahrzeugvorstellung img {
object-fit: cover;
min-height: 100%;
height: 100%;
}
.MAVFahrzeug {
position: absolute;
z-index: 2;
width: 100%;
}
.MAVBG {
position: absolute;
z-index: 1;
height: 100%;
}
.Fahrzeugvorstellung:hover>.FahrzeugvorstellungIS {
min-height: 100%;
transition: all 0.3s;
}
.Fahrzeugvorstellung:hover>.MVS {
background-color: #e3061300;
transition: all 0.3s;
transform: rotate(45deg);
}
.FahrzeugvorstellungIS {
position: absolute;
width: 100%;
bottom: 0;
z-index: 3;
padding: 0.5rem;
background-color: #e3061390;
transition: all 0.3s;
min-height: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.Fahrzeugvorstellung h2 {
font-size: 1.2rem;
color: #ffffff;
margin: 0 0 0.25rem 0;
padding: 0;
font-weight: bolder;
}
.Fahrzeugvorstellung h3 {
font-size: 1rem;
color: #ffffff;
margin: 0 0 0 0;
padding: 0;
font-weight: bolder;
}
@media (min-width: 1000px) and (max-width: 1600px) {
.Fahrzeugvorstellung {
width: 32.46%;
}
}
@media (min-width: 1200px) and (max-width: 1300px) {
.Fahrzeugvorstellung {
margin-bottom: 0.8rem;
}
}
@media (max-width: 1000px) {
#DieFahrzeugePageHeader {
aspect-ratio: 16/9;
}
}
@media (min-width: 600px) and (max-width: 1200px) {
.Fahrzeugvorstellung {
margin-bottom: 0.5rem;
}
}
@media (min-width: 600px) and (max-width: 1000px) {
.Fahrzeugvorstellung {
width: 49%;
}
}
@media (min-width: 0px) and (max-width: 600px) {
.Fahrzeugvorstellung {
width: 100%;
}
}
/* ErsteHilfeKurs | BARRIEREFREI 31.01.2025 */
#ErsteHilfeKursSeite .ErsteHilfeKursSeiteIMG {
width: 100%;
aspect-ratio: 20/5;
overflow: hidden;
display: flex;
align-items: end;
}
#ErsteHilfeKursSeite .ErsteHilfeKursSeiteIMG img {
object-fit: cover;
width: 100%;
min-height: 100%;
}
#ErsteHilfeKursSeite {
display: flex;
flex-direction: column;
}
#ErsteHilfeKursSeite section {
position: relative;
}
#ErsteHilfeKursSeite ul {
padding: 0;
}
.EHFragen {
position: relative;
}
#ErsteHilfeKursSeite ul li {
list-style: none;
}
#ErsteHilfeKursSeite ul li svg {
width: auto;
height: 1.2rem;
margin: 0 0.5rem 0 0;
padding: 0 0 0.2rem 0;
fill: #00a703;
}
#ErsteHilfeKursSeite tr td:first-child {
align-items: center;
}
#ErsteHilfeKursSeite table svg {
width: 1.2rem;
fill: #ffffff;
margin: 0 0 0 0;
padding: 0 0.2rem 0 0;
}
.EHFragen summary {
margin: 0;
padding: 0;
}
.EHFragen summary h3 {
margin: 0;
padding: 1rem;
}
.EHSummary p {
padding: 0 0 0 2rem;
}
#ErsteHilfeKursSeite h1 {
color: #e30613;
font-weight: bolder;
}
#ErsteHilfeKursSeite h2 {
color: #e30613;
}
.EHSummaryfirst {
border-top: 1px solid #e30613;
}
#ErsteHilfeKursSeite details,
#Ausbildungsseite details {
position: relative;
border-bottom: 1px solid #e30613;
border-radius: 5px;
}
#ErsteHilfeKursSeite summary,
#Ausbildungsseite summary {
cursor: pointer;
display: flex;
align-items: center;
font-weight: bolder;
}
#ErsteHilfeKursSeite summary::before,
#Ausbildungsseite summary::before {
content: "+";
font-size: 2rem;
margin: 0 0rem 0rem 0;
transition: all 0.3s;
display: inline-block;
color: #ffffff;
transform: rotate(0deg);
}
#ErsteHilfeKursSeite details[open] summary::before,
#Ausbildungsseite details[open] summary::before {
transform: rotate(45deg);
color: #e30613;
transition: all 0.3s;
}
.EHFragen {
width: 100%;
display: flex;
position: relative;
float: left;
z-index: 1;
}
.EHSummary {
width: 100%;
position: relative;
z-index: 2;
}
.EHSummaryImg {
width: 50%;
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
}
.EHSummaryImg1 {
object-fit: cover;
opacity: 0.5;
animation: 10s EHSI1 infinite;
position: absolute;
}
.EHSummaryImg2 {
object-fit: cover;
opacity: 0.5;
animation: 10s EHSI2 infinite;
position: absolute;
}
.EHSummaryImg3 {
object-fit: cover;
opacity: 0.5;
animation: 10s EHSI3 infinite;
position: absolute;
}
.EHSummaryImg4 {
object-fit: cover;
opacity: 0.5;
animation: 10s EHSI4 infinite;
position: absolute;
}
.EHSummaryImg5 {
object-fit: cover;
opacity: 0.5;
animation: 10s EHSI5 infinite;
position: absolute;
}
@keyframes EHSI1 {
0% {
opacity: 0.0;
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.0;
}
}
@keyframes EHSI2 {
0% {
opacity: 0.0;
}
15% {
opacity: 0.5;
}
40% {
opacity: 0.0;
}
65% {
opacity: 0.0;
}
100% {
opacity: 0.0;
}
}
@keyframes EHSI3 {
40% {
opacity: 0.5;
}
50% {
opacity: 0.0;
}
75% {
opacity: 0.0;
}
100% {
opacity: 0.5;
}
}
@keyframes EHSI4 {
0% {
opacity: 0.5;
}
5% {
opacity: 0.0;
}
30% {
opacity: 0.0;
}
80% {
opacity: 0.5;
}
}
@keyframes EHSI5 {
0% {
opacity: 0.5;
}
25% {
opacity: 0.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 0.5;
}
}
.nichtsogross {
width: 100%;
}
@media (max-width: 981px) {
#ErsteHilfeKursSeite .ErsteHilfeKursSeiteIMG {
aspect-ratio: 16/9;
}
#ErsteHilfeKursSeite tr {
flex-direction: column;
display: flex;
}
#ErsteHilfeKursSeite td:last-child {
margin: 0.5rem 0 1rem 0;
}
.EHSummaryImg {
width: 100%;
opacity: 0.4;
}
.nichtsogross {
width: 100%;
}
}
@media (min-width: 700px) {
.EHSummaryImg1 {
height: 30%;
top: 0%;
left: 0%;
}
.EHSummaryImg2 {
height: 50%;
top: 5%;
left: 75%;
}
.EHSummaryImg3 {
height: 70%;
top: 20%;
left: 20%;
}
.EHSummaryImg4 {
height: 50%;
top: 50%;
left: 10%;
}
.EHSummaryImg5 {
height: 45%;
top: 45%;
left: 50%;
}
}
@media (min-width: 500px) and (max-width: 700px) {
.EHSummaryImg1 {
height: 25%;
top: 0%;
left: 0%;
}
.EHSummaryImg2 {
height: 31%;
top: 5%;
left: 53%;
}
.EHSummaryImg3 {
height: 50%;
top: 20%;
left: 5%;
}
.EHSummaryImg4 {
height: 40%;
top: 50%;
left: 30%;
}
.EHSummaryImg5 {
height: 35%;
top: 70%;
left: 20%;
}
}
@media (max-width: 500px) {
.EHSummaryImg1 {
height: 25%;
top: 0%;
left: 0%;
}
.EHSummaryImg2 {
height: 31%;
top: 5%;
left: 53%;
}
.EHSummaryImg3 {
height: 50%;
top: 20%;
left: 5%;
}
.EHSummaryImg4 {
height: 40%;
top: 50%;
left: -22%;
}
.EHSummaryImg5 {
height: 35%;
top: 70%;
left: -50%;
}
}
/*Formular*/
#FahrschulCheckUp .wpcf7-form-control-wrap,
#Kursanmeldung .wpcf7-form-control-wrap,
#Bewerbungsformular .wpcf7-form-control-wrap {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#FahrschulCheckUp .wpcf7-radio,
#Kursanmeldung .wpcf7-radio,
#Bewerbungsformular .wpcf7-radio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: fit-content;
}
#FahrschulCheckUp .wpcf7-radio .wpcf7-list-item,
#Kursanmeldung .wpcf7-radio .wpcf7-list-item,
#Bewerbungsformular .wpcf7-radio .wpcf7-list-item {
display: flex;
width: 100%;
margin: 0;
}
#FahrschulCheckUp .wpcf7-radio label,
#Kursanmeldung .wpcf7-radio label,
#Bewerbungsformular .wpcf7-radio label {
position: relative;
display: flex;
padding: 0 0 0 2rem;
align-items: center;
justify-content: start;
text-align: center;
margin: 0.5rem 0 0.5rem 0;
}
/* Entfernt das native Styling des Radio-Buttons */
#FahrschulCheckUp input[type="radio"],
#Kursanmeldung input[type="radio"],
#Bewerbungsformular input[type="radio"] {
/* Für moderne Browser */
/* Für Safari */
/* Für ältere Firefox-Versionen */
/**/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 1rem;
height: 1rem;
background-color: #383838;
border: 2px solid #e30613;
border-radius: 50%;
cursor: pointer;
margin: 0 0 0 0;
top: 0.25rem;
left: 0;
position: absolute;
transition: all 0.3s;
}
/* Styling für den aktiven Zustand (ausgewählt) */
#FahrschulCheckUp input[type="radio"]:checked,
#Kursanmeldung input[type="radio"]:checked,
#Bewerbungsformular input[type="radio"]:checked {
border: 2px solid #2e9e2e;
transition: all 0.3s;
}
#FahrschulCheckUp input[type="radio"]:hover,
#Kursanmeldung input[type="radio"]:hover,
#Bewerbungsformular input[type="radio"]:hover {
border: 2px solid #383838;
background-color: #2e9e2e;
transition: all 0.3s;
/* Simuliert den inneren Punkt */
}
#FahrschulCheckUp .wpcf7-list-item-label,
#Kursanmeldung .wpcf7-list-item-label,
#Bewerbungsformular .wpcf7-list-item-label {
text-align: start;
color: #ffffff;
}
#FahrschulCheckUp .FormularLabel,
#Kursanmeldung .FormularLabel ,
#Bewerbungsformular .FormularLabel{
display: flex;
flex-direction: column;
position: relative;
z-index: 0;
margin: 2rem 0 0 0;
width: 100%;
}
#FahrschulCheckUp .FormularLabel .wpcf7-form-control-wrap,
#Kursanmeldung .FormularLabel .wpcf7-form-control-wrap,
#Bewerbungsformular .FormularLabel .wpcf7-form-control-wrap {
display: flex;
flex-direction: column;
}
#FahrschulCheckUp .FormularLabel input,
#FahrschulCheckUp .FormularLabel textarea,
#Kursanmeldung .FormularLabel input,
#Kursanmeldung .FormularLabel textarea,
#Bewerbungsformular .FormularLabel input,
#Bewerbungsformular .FormularLabel textarea {
border-radius: 0;
background-color: #383838 !important;
border: 2px solid #8e8e8e;
color: #ffffff;
z-index: 1;
margin: 1rem 0 0 0;
font-size: 1rem;
box-shadow: none;
border-bottom: 2px solid #e30613;
width: 100%;
padding: 10px;
}
.FormularAuswahl {
border-radius: 0;
background-color: #383838 !important;
border: 2px solid #8e8e8e;
color: #ffffff;
z-index: 1;
font-size: 1rem;
box-shadow: none;
border-bottom: 2px solid #e30613;
width: 100%;
padding: 10px;
display: flex;
flex-direction: column;
position: relative;
z-index: 0;
margin: 3rem 0 0 0;
}
.FormularAuswahl .wpcf7-form-control-wrap {
justify-content: start !important;
}
.FormularAuswahl .LabelInfobeiAuswahl {
position: absolute;
background-color: #383838;
color: #ffffff;
padding: 0.25rem;
z-index: 2;
font-size: 1rem;
line-height: 1;
margin: 0;
left: 0.5rem;
top: -1.1rem !important;
}
#FahrschulCheckUp input:-webkit-autofill:hover,
#FahrschulCheckUp input:-webkit-autofill:focus,
#FahrschulCheckUp input:-webkit-autofill:active,
/**/
#Kursanmeldung input:-webkit-autofill:hover,
#Kursanmeldung input:-webkit-autofill:focus,
#Kursanmeldung input:-webkit-autofill:active,
/**/
#Bewerbungsformular input:-webkit-autofill:hover,
#Bewerbungsformular input:-webkit-autofill:focus,
#Bewerbungsformular input:-webkit-autofill:active {
background-color: #383838 !important;
/* Gleiches Verhalten für Hover/Focus */
color: #ffffff;
box-shadow: none;
}
#FahrschulCheckUp .FormularLabel textarea,
#Kursanmeldung .FormularLabel textarea,
#Bewerbungsformular .FormularLabel textarea {
resize: vertical;
}
#FahrschulCheckUp .FormularLabel span input::-moz-placeholder,
#FahrschulCheckUp .FormularLabel span input:-ms-input-placeholder,
#FahrschulCheckUp .FormularLabel span input::-webkit-input-placeholder,
#FahrschulCheckUp .FormularLabel textarea::-moz-placeholder,
#FahrschulCheckUp .FormularLabel textarea:-ms-input-placeholder,
#FahrschulCheckUp .FormularLabel textarea::-webkit-input-placeholder,
/**/
#Kursanmeldung .FormularLabel span input::-moz-placeholder,
#Kursanmeldung .FormularLabel span input:-ms-input-placeholder,
#Kursanmeldung .FormularLabel span input::-webkit-input-placeholder,
#Kursanmeldung .FormularLabel textarea::-moz-placeholder,
#Kursanmeldung .FormularLabel textarea:-ms-input-placeholder,
#Kursanmeldung .FormularLabel textarea::-webkit-input-placeholder,
/**/
#Bewerbungsformular .FormularLabel span input::-moz-placeholder,
#Bewerbungsformular .FormularLabel span input:-ms-input-placeholder,
#Bewerbungsformular .FormularLabel span input::-webkit-input-placeholder,
#Bewerbungsformular .FormularLabel textarea::-moz-placeholder,
#Bewerbungsformular .FormularLabel textarea:-ms-input-placeholder,
#Bewerbungsformular .FormularLabel textarea::-webkit-input-placeholder {
color: #21db46 !important;
opacity: 1;
}
#FahrschulCheckUp .FormularLabel input:focus,
#FahrschulCheckUp .FormularLabel textarea:focus,
/**/
#Kursanmeldung .FormularLabel input:focus,
#Kursanmeldung .FormularLabel textarea:focus,
/**/
#Bewerbungsformular .FormularLabel input:focus,
#Bewerbungsformular .FormularLabel textarea:focus
{
outline: 2px solid #e30613;
/* Farbe und Breite der Umrandung */
outline-offset: -2px;
/* Abstand zwischen der Outline und dem Input-Feld */
}
#FahrschulCheckUp .FormularLabel .LabelInfo,
#Kursanmeldung .FormularLabel .LabelInfo,
#Kursanmeldung .LabelInfo,
#Bewerbungsformular .FormularLabel .LabelInfo,
#Bewerbungsformular .LabelInfo {
position: absolute;
background-color: #383838;
color: #ffffff;
padding: 0.25rem;
z-index: 2;
font-size: 1rem;
line-height: 1;
margin: 0;
left: 0.5rem;
}
#FahrschulCheckUp .FormularLabelCheckbox,
#Kursanmeldung .FormularLabelCheckbox,
#Bewerbungsformular .FormularLabelCheckbox {
display: flex;
flex-wrap: wrap !important;
width: 100%;
position: relative;
height: auto;
}
#FahrschulCheckUp .FormularLabelCheckbox .wpcf7-form-control-wrap,
#Kursanmeldung .FormularLabelCheckbox .wpcf7-form-control-wrap,
#Bewerbungsformular .FormularLabelCheckbox .wpcf7-form-control-wrap {
display: flex !important;
position: absolute !important;
align-items: start !important;
justify-content: start !important;
width: 2rem !important;
height: 2rem !important;
top: 0 !important;
}
#FahrschulCheckUp .FormularLabelCheckbox .wpcf7-form-control-wrap .wpcf7-form-control,
#Kursanmeldung .FormularLabelCheckbox .wpcf7-form-control-wrap .wpcf7-form-control,
#Bewerbungsformular .FormularLabelCheckbox .wpcf7-form-control-wrap .wpcf7-form-control {
display: flex;
position: absolute;
align-items: start;
justify-content: start;
width: fit-content;
}
#FahrschulCheckUp .checkText,
#Kursanmeldung .checkText,
#Bewerbungsformular .checkText {
width: auto;
display: block;
float: left;
align-items: start;
justify-content: start;
text-align: start;
margin: 0 0 0 2rem;
color: #ffffff;
}
/* Entfernt das native Styling des Radio-Buttons */
#FahrschulCheckUp input[type="checkbox"],
#Kursanmeldung input[type="checkbox"],
#Bewerbungsformular input[type="checkbox"] {
/* Für moderne Browser */
/* Für Safari */
/* Für ältere Firefox-Versionen */
/**/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 1rem;
height: 1rem;
background-color: #383838;
border: 2px solid #e30613;
border-radius: 0%;
cursor: pointer;
margin: 0 0 0 0;
top: 0.25rem;
left: 0;
position: absolute;
transition: all 0.3s;
}
/* Styling für den aktiven Zustand (ausgewählt) */
#FahrschulCheckUp input[type="checkbox"]:checked,
#Kursanmeldung input[type="checkbox"]:checked,
#Bewerbungsformular input[type="checkbox"]:checked {
border: 2px solid #2e9e2e;
transition: all 0.3s;
}
#FahrschulCheckUp input[type="checkbox"]:hover,
#Kursanmeldung input[type="checkbox"]:hover,
#Bewerbungsformular input[type="checkbox"]:hover {
border: 2px solid #383838;
background-color: #2e9e2e;
transition: all 0.3s;
/* Simuliert den inneren Punkt */
}
#FahrschulCheckUp .InfoLink,
#Kursanmeldung .InfoLink,
#Bewerbungsformular .InfoLink {
color: #ffffff !important;
transition: all 0.3s;
text-decoration: none;
}
#FahrschulCheckUp .InfoLink:hover,
#Kursanmeldung .InfoLink:hover,
#Bewerbungsformular .InfoLink:hover {
color: #e30613 !important;
transition: all 0.3s;
text-decoration: none;
}
#FahrschulCheckUp .FormularLabelButton,
#Kursanmeldung .FormularLabelButton,
#Bewerbungsformular .FormularLabelButton {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
}
/*Formular end */
.wp-Text,
.WP-Text {
color: #ffffff !important;
}
/* Infoblock */
#Infoblock {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
text-align: center;
}
#Infoblock h2 {
color: #e30613;
font-weight: bolder;
}
.Weiterleitungslink {
color: #ffffff !important;
background-color: #383838;
padding: 0.5rem 1rem;
line-height: 1;
border: 2px solid #e30613;
text-decoration: none;
position: relative;
margin: 0.25rem;
display: inline-block;
transition: all 0.3s;
}
.Weiterleitungslink:hover,
.Weiterleitungslink:focus {
background-color: #e30613;
color: #ffffff !important;
transition: all 0.3s;
text-decoration: none !important;
}
/* Fedback BARRIEREFREI 27.03.2025 */
.Feedback {}
#FBS1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#Feedbackanimation {
position: relative;
z-index: 1;
background-color: #383838;
width: 100%;
justify-content: center;
display: flex;
align-items: center;
text-align: center;
}
.FBA1,
.FBA2,
.FBA3 {
position: absolute;
width: 100%;
top: 0;
background-color: #383838;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
color: #e30613;
}
.FBA1 {
animation: FBA1 5s infinite;
opacity: 1;
z-index: 5;
}
.FBA2 {
animation: FBA2 5s infinite;
opacity: 1;
z-index: 4;
}
.FBA3 {
animation: FBA3 5s infinite;
opacity: 1;
z-index: 3;
}
@keyframes FBA1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
20.1% {
opacity: 1;
}
20.2% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes FBA2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
30.1% {
opacity: 1;
}
30.2% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes FBA3 {
0% {
opacity: 0;
}
30.1% {
opacity: 0;
}
30.2% {
opacity: 1;
}
40.2% {
opacity: 1;
}
40.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#FBS2 {
display: flex;
flex-wrap: wrap;
}
#FBS2 h3,
#FBS2 .Feedbackbtn {
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
.Feedbackbtn {
display: flex;
float: left;
}
.starbtn1,
.starbtn2,
.starbtn3,
.starbtn4,
.starbtn5 {
display: flex;
background-color: #ffff00;
margin: 0rem 0.2rem;
width: 3rem;
height: 3rem;
clip-path: polygon(50% 0%, 61% 38%, 100% 38%, 69% 61%, 80% 100%, 50% 76%, 20% 100%, 31% 61%, 0% 38%, 39% 38%, 50% 0%);
border: 0px solid;
cursor: pointer !important;
transition: all 0.3s;
/* Sanfte Übergänge */
}
.Feedbackbtn:hover .starbtn1,
.Feedbackbtn:hover .starbtn2,
.Feedbackbtn:hover .starbtn3,
.Feedbackbtn:hover .starbtn4,
.Feedbackbtn:hover .starbtn5 {
background-color: #ffff00;
transition: all 0.3s;
}
.starbtn1:hover~.starbtn2,
.starbtn1:hover~.starbtn3,
.starbtn1:hover~.starbtn4,
.starbtn1:hover~.starbtn5,
.starbtn2:hover~.starbtn3,
.starbtn2:hover~.starbtn4,
.starbtn2:hover~.starbtn5,
.starbtn3:hover~.starbtn4,
.starbtn3:hover~.starbtn5,
.starbtn4:hover~.starbtn5 {
background-color: #ffffff !important;
transition: all 0.3s;
}
#FBS3 {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#FBbtn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.FBbtn {
display: inline-block;
color: #ffffff;
border: 2px solid #ffffff;
transition: all 0.25s;
background-color: #383838;
margin: 0 1rem 1rem 1rem;
}
.FBbtn:hover,
.FBbtn:focus {
color: #e30613;
border: 2px solid #e30613;
transition: all 0.25s;
}
#FBbtnForm {}
#FBbtnForm .inputfeld {
min-width: 100%;
max-width: 100%;
border-radius: 0;
background: #383838;
border: 1px solid #5d5d5d;
border-bottom: 2px solid #ffffff;
color: #ffffff;
box-shadow: none;
margin-bottom: 10px;
font-size: 1rem;
padding: 10px 15px;
height: 50px;
box-shadow: #e30613;
}
#FBbtnForm .inputfeld:focus {
border: 1px solid #e30613;
border-bottom: 2px solid #e30613;
}
#FBbtnForm .LabelInfo {
color: #ffffff;
width: 100%;
text-align: start;
min-width: 100%;
display: block;
}
#FBbtnForm .FormularLabelCheckbox {
display: flex;
align-items: start;
}
#FBbtnForm .checkText {
color: #ffffff;
padding: 0 0 0 1rem;
}
#FBbtnForm .Fehler {
text-align: start;
}
#wpcf7-f1283-o1 {
display: flex;
width: 100%;
}
#wpcf7-f1283-o1 form {
display: flex !important;
flex-direction: column !important;
max-width: 100%;
}
/* AUSBILDUNGSSEITE */
#KopfbildAusbildung {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
height: 100dvh;
overflow: hidden;
background-color: #383838;
}
#KopfbildAusbildungText {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
}
#KopfbildAusbildungText h1,
#KopfbildAusbildungText h2 {
color: #e30613;
background-color: #383838;
padding: 0.5rem 1rem;
line-height: 1;
margin: 0 0 0 -1rem;
font-weight: bolder;
text-align: start;
}
#KopfbildAusbildungText h1 {
margin: 0 0 0 -1rem;
}
#KopfbildAusbildungText h2 {
margin: 0 0 1rem -1rem;
}
.JobCheckpoint {
display: flex;
float: left;
width: 100%;
align-items: start;
justify-content: start;
text-align: start;
font-weight: bolder;
margin: 0;
padding: 0 0 1rem 0;
line-height: 1;
}
.JobCheckpoint svg {
fill: #00a703;
height: 1rem;
width: 1rem;
margin: 0 1rem 0 0;
}
.JobCTA {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
}
.JobButton {
padding: 1rem 0rem 1rem 1rem;
line-height: 1;
margin: 0 0 1rem 0;
display: inline-block;
background-color: #e30613;
color: #ffffff;
font-weight: bolder;
transition: all 0.3s;
}
.JobButton:after {
content: '\279C';
font-size: 1rem;
padding: 0 0 0 -1rem;
transition: all 0.3s;
color: #e30613;
}
.JobButton:hover:after {
content: '\279C';
font-size: 1rem;
padding: 0 0 0 1rem;
transition: all 0.3s;
color: #ffffff;
}
.JobButton:hover {
transition: all 0.3s;
color: #ffffff;
padding: 1rem;
}
#KopfbildAusbildungIMG {
z-index: 0;
position: absolute;
align-items: center;
justify-content: center;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#KopfbildAusbildungIMG img {
position: relative;
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0.5;
}
@media (min-width: 1279px) {
#KopfbildAusbildungText h1 {
font-size: 4rem;
}
#KopfbildAusbildungText h2 {
font-size: 2rem;
}
}
@media (min-width: 1000px) {
.JobCheckpoint {
font-size: 1.8rem;
}
.JobCheckpoint svg {
height: 2rem;
width: 2rem;
margin: 0 1rem 0 0;
}
}
.Ausbildungskarten {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.Ausbildungskarten h3,
.Ausbildungskarten p {
width: 100%;
}
.Ausbildungskarten section {
display: flex;
flex-direction: column;
margin: 0 0 2rem 0;
position: relative;
align-items: start;
justify-content: center;
transition: all 0.3s;
border: 2px solid #e3061380;
min-height: 15rem;
transition: all 0.3s;
}
.Ausbildungskarten:hover .AusbildungskartenNummer,
.Ausbildungskarten:focus .AusbildungskartenNummer {
color: #e30613;
transition: all 0.3s;
}
.Ausbildungskarten:hover section,
.Ausbildungskarten:focus section {
border: 2px solid #e30613;
transition: all 0.3s;
}
.Ausbildungskarten ul,
.Ausbildungskarten h4 {
z-index: 2;
}
.AusbildungskartenNummer {
font-size: 10rem;
color: #e3061380;
font-weight: bolder;
margin: 0;
line-height: 1;
position: absolute;
left: 0rem;
z-index: 0;
}
@media (min-width: 0px) and (max-width: 1250px) {
.Ausbildungskarten section {
width: 100%;
}
.Ausbildungskarten section {
padding: 1rem 1rem 1rem 4rem;
}
.AusbildungskartenNummer {
font-size: 5rem;
padding: 0 0 0 1rem;
}
}
@media (min-width: 1250px) {
.Ausbildungskarten section {
width: calc(50% - 1rem);
}
.Ausbildungskarten section {
padding: 1rem 1rem 1rem 7rem;
}
.AusbildungskartenNummer {
font-size: 10rem;
padding: 0 0 0 0;
}
}
.Scrollcontainer {
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
min-height: 50dvh !important;
}
.Scrollbild {
position: absolute;
width: 100%;
height: 100%;
background-image: url('/wp-content/uploads/2024/10/Zamzow_Fahrschule_Neubrandenburg-VW_Tiguan-Lapiz-6.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.5;
z-index: 1;
}
.Scrollbild2 {
position: absolute;
width: 100%;
height: 100%;
background-image: url('/wp-content/uploads/2025/05/fahrschule-zamzow-beliebteste_fahrschule_in_Neubrandenburg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.5;
z-index: 1;
}
.Scrolltext {
position: relative;
z-index: 2;
height: 50dvh;
display: flex;
text-align: start;
justify-content: center;
align-items: start;
flex-direction: column;
}
.bewertungsblock {
display: flex;
flex-wrap: wrap;
width: 100%;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.bewertungsblock .review-img {
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
border-radius: 50%;
overflow: hidden;
}
.bewertungsblock .review-img img {
object-fit: cover;
width: 90%;
}
.bewertungsblock h2 {
width: 100%;
}
.bewertungsblock .bewertungsruf {
color: #ffffff;
font-weight: bolder;
transition: all 0.3s;
}
.bewertungsblock .bewertungsruf:hover,
.bewertungsblock .bewertungsruf:focus {
color: #e30613;
transition: all 0.3s;
}
.bewertung {
border: 2px solid #e30613;
width: 30%;
padding: 1rem 1rem 0rem 1rem;
flex-wrap: wrap;
display: flex;
justify-content: space-between;
}
@media (min-width: 1200px) {
.bewertung {
width: 30%;
}
}
@media (min-width: 0px) and (max-width: 1200px) {
.bewertung {
width: calc(50% - 0.5rem);
}
}
@media (min-width: 0px) and (max-width: 900px) {
.bewertung {
width: 100%;
}
}
.bewertung p {
margin: 0;
}
.bewertung:last-child {
border: 2px solid #e3061300;
padding: 0rem;
align-items: start;
}
.bewertung h3 {
width: calc(100% - 2.5rem);
}
.ScrollTextAnimation {
animation: scrollText 1s;
}
@keyframes scrollText {
0% {
left: 0%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 10%;
opacity: 1;
}
}
.Scrolltext h2 {
font-weight: bolder;
color: #e30613;
}
@media (min-width: 0px) and (max-width: 1000px) {
.Scrolltext h2 {
font-size: 2rem;
}
}
@media (min-width: 1000px) {
.Scrolltext h2 {
font-size: 4rem;
}
}
.codedropz-upload-wrapper {
width: 100%;
margin-top: 1rem;
}
#Bewerbungsformular select {
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 0;
background-color: #383838 !important;
z-index: 1;
margin: 1rem 0 0 0;
font-size: 1rem;
box-shadow: none;
border-bottom: 2px solid #ffffff;
width: 100%;
padding: 10px;
}
#Bewerbungsformular {
display: inline-block;}
/* ####################################################### */
/* TIMELINE */
/* ####################################################### */
/* Dein gesamter Theme-CSS-Code von oben... (6000+ Zeilen) */
/* ... */
/* ... */
/* KORREKTUR 1: Fehlende .hidden Klasse hinzugefügt */
.hidden {
display: none !important;
}
/* KORREKTUR 2: Alle Stile für die Timeline-Ausgabe hinzugefügt */
/* ####################################################### */
/* TIMELINE AUSGABE */
/* ####################################################### */
:root {
--Projetfarbe1: #e30613;
--Projetfarbe2: #383838;
--Projetfarbe3: #282828;
--Projetfarbe4: #8e8e8e;
--Projetfarbe5: #ffffff;
--Projetfarbe6: #33ff33;
--Projetfarbe7: #ff0000;
--Abstand2rem: 2rem;
}
.Mobilsperre {
display: none;
width: 100%;
padding: 4rem 2rem 2rem;
align-items: center;
justify-content: center;
min-height: 90vh;
}
.Mobilesperre-text {
text-align: center;
font-size: 2rem;
color: var(--Projetfarbe1);
font-weight: bolder;
}
@media (max-width: 992px) {
.Mobilsperre {
display: flex;
}
.Eingabemaske,
.Formular-output-container {
display: none!important;
}
}
/* Eingabemaske und Formular-Styling */
.Eingabemaske {
width: 100%;
padding: 4rem 2rem 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.Formularblock {
width: 100%;
max-width: 992px;
background-color: var(--Projetfarbe2);
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
padding: 2rem;
border: 2px solid var(--Projetfarbe1);
}
.Formularblock-100 {
width: 100%;
display: flex;
flex-direction: column;
margin: 0;
}
.Feldblock input,
.Feldblock select {
position: relative;
width: 100%;
border: 2px solid var(--Projetfarbe1);
height: 2.5rem;
/* Etwas mehr Höhe */
background-color: var(--Projetfarbe2);
color: var(--Projetfarbe5);
z-index: 1;
padding: 0 0.9rem;
}
.Formularblock-100-50 {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
}
.Feldblock {
position: relative;
z-index: 1;
margin: 0 0 1.5rem 0;
}
.Feldblock label {
position: absolute;
background-color: var(--Projetfarbe2);
color: var(--Projetfarbe1);
font-weight: bold;
z-index: 2;
line-height: 1;
padding: 0 0.5rem;
margin: -0.5rem 0 0 0.5rem;
font-size: 0.9rem;
}
.Formularblock-100 .Feldblock {
width: 100%;
}
.Formularblock-100-50 .Feldblock {
width: calc(50% - 0.5rem);
}
@media (max-width: 992px) {
.Formularblock-100-50 .Feldblock {
width: 100%;}
}
.Feldblock input:focus,
.Feldblock input:active,
.Feldblock select:focus,
.Feldblock select:active {
outline: 2px solid var(--Projetfarbe6);
outline-offset: -2px;
}
.Formularbutton {
height: 3rem;
padding: 0.5rem 1rem;
background-color: var(--Projetfarbe2);
border: 2px solid var(--Projetfarbe1);
line-height: 1;
color: var(--Projetfarbe5);
cursor: pointer;
transition: all 0.3s;
display: inline-block;
margin: 0 0.5rem;
}
.Formularbutton:disabled,
.Formularbutton[disabled] {
border: 2px solid var(--Projetfarbe4);
color: var(--Projetfarbe4);
background-color: var(--Projetfarbe2);
cursor: not-allowed;
transition: all 0.3s;
}
.Formularbutton:hover:not(:disabled) {
background-color: var(--Projetfarbe1);
transition: all 0.3s;
}
.Formularbuttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 0.5rem;
}
.payment-feedback {
width: 100%;
margin-top: 1rem;
color: var(--Projetfarbe5);
}
/* Timeline Ausgabe-Styling */
.timeline {
width: 100%;
margin: 0 auto;
padding: 3rem 2rem 2rem 2rem;
display: flex;
flex-direction: column;
background-color: var(--Projetfarbe2);
border: 2px solid var(--Projetfarbe1);
}
.timeline-header {
margin: 0 0 4rem 0;
position: relative;
}
.timeline-header::after {
position: absolute;
content: "";
width: 100%;
height: 2px;
background-color: var(--Projetfarbe1);
bottom: -1rem;
left: 0;
}
.timeline-header h1 {
color: var(--Projetfarbe5);
}
.dl-Tabelle {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
margin: 0;
color: var(--Projetfarbe5);
}
.dl-Tabelle-dt1 {
display: flex;
width: 8rem;
padding: 0;
margin: 0;
font-weight: bold;
}
.dl-Tabelle-dd1 {
display: flex;
float: left;
/* Damit die Spans untereinander stehen */
width: calc(50% - 9.5rem);
padding: 0;
margin: 0;
}
.dl-Tabelle-dd1 time,
.dl-Tabelle-dd1 .bis {
display: inline-block;
}
@media (max-width: 992px) {
.dl-Tabelle-dd1 {
width: calc(100% - 9.5rem);}
}
.timeline-body {
display: grid;
grid-template-columns: 4rem calc(100% - 10rem) 4rem;
grid-template-rows: repeat(2, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
margin-bottom: 2rem;
}
.timeline-body-part1 {
grid-area: 1 / 1 / 3 / 2;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-body-part2 {
grid-area: 1 / 2 / 3 / 3;
}
.timeline-body-part3 {
grid-area: 1 / 3 / 3 / 4;
display: flex;
align-items: center;
justify-content: center;}
@media (max-width: 992px) {
.timeline-body {
display: grid;
grid-template-columns: 4rem calc(100% - 10rem) 4rem;
grid-template-rows: repeat(2, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
margin-bottom: 2rem;
}
.timeline-body-part1 {
grid-area: 1 / 1 / 2 / 2;
}
.timeline-body-part2 {
grid-area: 2 / 1 / 3 / 4;
}
.timeline-body-part3 {
grid-area: 1 / 3 / 2 / 4;
}
}
.timeline-body-kreisel {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: var(--Projetfarbe3);
border-radius: 50%;
border: 4px solid var(--Projetfarbe6);
position: relative;
z-index: 2;
width: 4rem;
height: 4rem;
}
.timeline-body-kreisel::before {
position: absolute;
content: "";
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
border: 6px solid var(--Projetfarbe3);
z-index: 1;
box-shadow: 0px 0px 1rem 0px #8e8e8e;
}
.timeline-body-kreisel::after {
position: absolute;
content: "";
width: 1.3rem;
height: 0.4rem;
border-radius: 2px;
z-index: 3;
background-color: var(--Projetfarbe6);
bottom: 1rem;
}
.timeline-body-kreisel span {
position: absolute;
font-size: 0.9rem;
z-index: 3;
top: 0.75rem;
color: var(--Projetfarbe5);
}
.timeline-body-part2 {
display: flex;
flex-direction: column;
}
.timeline-body-part2 .red {
margin: 0 0 0.5rem 0;
padding: 0;
line-height: 1;
color: var(--Projetfarbe1);
font-weight: bold;
}
.timeline-body-part2 h3 {
margin-bottom: 0.5rem;
}
.timeline-body-line-top {
display: flex;
justify-content: space-around;
width: 100%;
}
.timeline-body-line-top span {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-body-line-middle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.timeline-body-line-middle::after {
background-color: var(--Projetfarbe5);
height: 2px;
width: 100%;
position: absolute;
content: "";
z-index: -1;
}
.timeline-body-line-s-b {
height: 2.5rem;
width: 4px;
/* Etwas dicker */
background-color: var(--Projetfarbe5);
}
.timeline-body-line-s-s {
height: 1.5rem;
width: 4px;
/* Etwas dicker */
background-color: var(--Projetfarbe5);
}
.timeline-body-line-bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.timeline-body-ampel {
height: 2.5rem;
display: flex;
float: left;
align-items: center;
justify-content: space-around;
background: linear-gradient(90deg, #FF4C4C 0%, #FFA500 25%, #FFFF66 50%, #99FF99 75%, #2E8B57 100%);
border-radius: 4px;
}
.timeline-body-vorampel {
width: 100%;
display: flex;
margin-bottom: 0.5rem;
}
.timeline-body-vorampel span {
width: 25%;
text-align: center;
}
.timeline-body-ampel ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.timeline-body-ampel ul li {
width: 25%;
margin: 0;
padding: 0 0.5rem;
text-align: center;
line-height: 1.2;
color: var(--Projetfarbe3);
font-weight: bold;
font-size: 0.8rem;
}
.timeline-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
border-top: 2px solid var(--Projetfarbe1);
margin-top: 1rem;
padding-top: 1rem;
}
.timeline-footer-logo {
height: 4rem;
width: auto;
display: flex;
align-items: center;
justify-content: start;
}
.timeline-footer-logo img {
object-fit: contain;
height: 100%;
width: 100%;
}
.timeline-footer-slogan {
font-size: 1.5rem;
color: var(--Projetfarbe5);
font-weight: bold;
margin: 0;
padding: 0;
}
#proDruck {
display: none!important;
}
.timeline-header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
/* Abstand zur Tabelle darunter */
}
/* ####################################################### */
/* DRUCK-STILE */
/* ####################################################### */
@media print {
@page {
size: A4 landscape;
}
/* Blendet unerwünschte Elemente aus */
header,
nav,
#newHeader,
#Timeline-Eingabe,
.Mobilsperre,
.footer,
.neueLektion,
.flexbox-1,
#print-button,
#contraDruck {
display: none !important;
}
#proDruck {
display: flex!important;
}
/* NEU: Erlaubt das Drucken von Farben und Hintergründen */
#Formular-output-container {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
/* Für Chrome/Safari */
}
body {
background-color: transparent;
margin: 0;
padding: 0;
}
.container-fluid {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#Timeline-Ausgabe {
background-color: #ffffff;
padding: 0rem;
}
.timeline {
padding: 1rem !important;
background-color: #ffffff;
}
.timeline-header {
margin-bottom: 2rem;
}
.dl-Tabelle {
row-gap: 0rem;
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
margin: 0;
font-size: 1rem;
color: var(--Projetfarbe2);
}
.dl-Tabelle-dt1 {
display: flex;
width: 8rem;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 1rem;
color: var(--Projetfarbe2);
}
.dl-Tabelle-dd1 {
display: flex;
float: left;
/* Damit die Spans untereinander stehen */
width: calc(50% - 9.5rem);
padding: 0;
margin: 0;
font-size: 1rem;
color: var(--Projetfarbe2);
}
.dl-Tabelle-dd1 time,
.dl-Tabelle-dd1 .bis {
display: inline-block;}
#timeline-heading {
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--Projetfarbe2);
}
.timeline-body {
background-color: #ffffff;
}
.timeline-body-kreisel {
width: 3rem;
height: 3rem;
border: 3px solid var(--Projetfarbe6);
}
.timeline-body-kreisel::before {
width: 3.5rem;
height: 3.5rem;
}
.timeline-body-kreisel::after {
width: 1rem;
height: 0.3rem;
bottom: 0.6rem;
}
.timeline-body-kreisel span {
top: 0.5rem;
font-size: 0.75rem;
color: var(--Projetfarbe5);
}
.timeline-body-line-middle::after {
background-color: var(--Projetfarbe2);
height: 4px;
}
.timeline-body-line-s-b {
height: 1.5rem;
width: 4px;
background-color: var(--Projetfarbe2);
}
.timeline-body-line-s-s {
height: 1rem;
width: 4px;
background-color: var(--Projetfarbe2);
}
.timeline-body-line-top span {
font-size: 0.75rem;
color: var(--Projetfarbe2);
}
.timeline-body {
margin-bottom: 1rem;
}
.timeline-body-ampel {
height: 1.5rem;
}
.timeline-body-vorampel {
margin-bottom: 0;
}
.timeline-body-vorampel span {
font-size: 0.75rem;
color: var(--Projetfarbe2);
}
.timeline-body h3 {
font-size: 1.4rem;
margin: 0 0 0.5rem 0;
color: var(--Projetfarbe2);
}
.red {
font-size: 0.75rem;
}
.timeline-footer {
margin-top: 0rem;
height: auto;
}
.timeline-footer-logo {
height: 2rem;
}
.timeline-footer-logo img {
object-fit: cover;
height: 100%;
}
.timeline-footer-slogan {
font-size: 1.4rem;
color: var(--Projetfarbe2);
}
}
/* NEWS */
.NewsIMG {
width: 100%;
aspect-ratio: 5/2;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.NewsIMG img {
min-width: 100%;
object-fit: cover;
animation: news 3s infinite;
}
@media (max-width: 992px) {
.NewsIMG {
aspect-ratio: 4/3; }
}
@keyframes news {
0% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.005);
}
100% {
opacity: 0.8;
transform: scale(1);
}
}
.padding4 {
padding: 0rem 4rem;
}
.NewsInfo {
width: 100%;
text-align: center;
display: flex;
float: left;
line-height: 1;
font-size: 1rem;
align-items: center;
justify-content: center;
}
@media (max-width: 992px) {
.nichtmobil {
display: none!important;
}
.NewsInfo {
flex-direction: column;
}
.News-Bildergallerie figcaption {
color: #e30613;
font-size: 0.75rem;
}
}
.NewsInfo span {
display: flex;
float: left;
margin: 0.25rem;
}
.NewsInfo svg {
height: 1rem;
fill: #e30613;
margin-right: 0.5rem;
}
.lastNewsInfo {
color: #e30613;
}
.News-Bildergallerie {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, auto);
grid-column-gap: 0;
grid-row-gap: 0;
}
.News-Bildergallerie figure {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
aspect-ratio: 16/9;
position: relative;
padding: 0;
margin: 0;
}
/* Die Bildunterschrift standardmäßig ausblenden und positionieren. */
.News-Bildergallerie figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: #ffffff;
/* Standardmäßig unsichtbar und leicht nach unten verschoben */
opacity: 0;
transform: translateY(10px);
/* Sanfter Übergang für den Effekt */
transition: all 0.3s;
}
/* Wenn man über die Figure (das Bild) hovert, wird die figcaption sichtbar. */
.News-Bildergallerie figure:hover figcaption {
opacity: 1;
transform: translateY(0);
}
.News-Bildergallerie figure img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
transition: all 0.3s;
transform: scale(1.0);
}
.News-Bildergallerie figure:hover img {
transition: all 0.3s;
transform: scale(1.2);
}
.NB5-1{
grid-area: 1 / 1 / 7 / 7;
}
.NB5-2 {
grid-area: 1 / 7 / 7 /13;
}
.NB5-3 {
grid-area: 7 / 1 / 13 / 5;
}
.NB5-4 {
grid-area: 7 / 5 / 13 / 9;
}
.NB5-5 {
grid-area: 7 / 9 / 13 / 13;
}
.NB4-1 {
grid-area: 1 / 1 / 7 / 6;
}
.NB4-2 {
grid-area: 1 / 6 / 7 / 11;
}
.NB4-3 {
grid-area: 7 / 3 / 13 / 8;
}
.NB4-4 {
grid-area: 7 / 8 / 13 / 13;
}
@media (max-width: 992px) {
.NB4-1 {
grid-area:1 / 1 / 7 / 7;
}
.NB4-2 {
grid-area: 1 / 7 / 7 / 13;
}
.NB4-3 {
grid-area: 7 / 1 / 13 / 7;
}
.NB4-4 {
grid-area: 7 / 7 / 13 / 13;}
}
@media (max-width: 768px) {
.NB4-1{
grid-area: 1 / 1 / 4 / 13;
}
.NB4-2 {
grid-area: 4 / 1 / 7 / 13;
}
.NB4-3 {
grid-area: 7 / 1 / 10 / 13;
}
.NB4-4 {
grid-area: 10 / 1 / 13 / 13;
}
}
.NB3-1 {
grid-area: 1 / 1 / 7 / 7;
}
.NB3-2 {
grid-area: 1 / 7 / 7 / 13;
}
.NB3-3 {
grid-area: 7 / 1 / 13 / 13;
}
@media (max-width: 768px) {
.NB3-1 {
grid-area: 1 / 1 / 5 / 13;
}
.NB3-2 {
grid-area: 5 / 1 / 9 / 13;
}
.NB3-3 {
grid-area: 9 / 1 / 13 / 13;}
}
.NB2-1 {
grid-area: 1 / 1 / 13 / 7;
}
.NB2-2 {
grid-area: 1 / 7 / 13 / 13;
}
@media (max-width: 768px) {
.NB2-1 {
grid-area: 1 / 1 / 7 / 13;
}
.NB2-2 {
grid-area: 7 / 1 / 13 / 13; }
}
.NB1-1 {
grid-area: 1 / 2 / 13 / 13;
}
@media (max-width: 992px) {
.NB1-1 {
grid-area: 1 / 1 / 13 / 13;
}
}
.Linkaufstellung {
margin: 0;
}
.LinksNews {
color: #ffffff;
position: relative;
display: inline-block;
padding: 0;
margin: 0;
transition: all 0.3s;
font-weight: bolder;
}
.LinksNews:hover {
color: #e30613;
transition: all 0.3s;
}
.LinksNews:after {
content: '\2794';
color: #e30613;
position: absolute;
padding: 0 0 0 0.5rem;
transition: all 0.3s;
}
.LinksNews:hover::after {
color: #ffffff;
padding: 0 0 0 1rem;
transition: all 0.3s;
}
.LinksNewsimText {
color: #ffffff;
position: relative;
display: inline-block;
padding: 0;
margin: 0;
transition: all 0.3s;
font-weight: bolder;
}
.LinksNewsimText:hover {
color: #e30613;
transition: all 0.3s;
font-weight: bolder;
}
.LinksNewsimText:after {
content: '';
background-color: #e30613;
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 10%;
min-width: 1rem;
transition: all 0.3s;
}
.LinksNewsimText:hover::after {
color: #ffffff;
width: 100%;
transition: all 0.3s;
}
.weitereInfos {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.weitereArtikel { grid-area: 1 / 1 / 3 / 2; }
.weitereArtikel {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.Autorenbox { grid-area: 1 / 2 / 3 / 3;
}
.autor-profil {
/* 3. Ein feinerer Rahmen für den Glas-Look */
border-radius: 1rem;
/* Abgerundete Ecken sind typisch für diesen Stil */
border: 2px solid #e30613;
/* Deine bisherigen Layout-Stile */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 1rem;
position: relative;
}
.autor-profil::after {
content: '"';
color: #ffffff;
font-size: 10rem;
line-height: 1;
position: absolute;
top: -2rem;
right: -0rem;
}
.Autorenbild {
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 2px solid #e30613;
overflow: hidden;
display: flex;
justify-content: center;
}
.Autorenbild img {
width: 100%;
}
.zentrierteSchrift,
#Haupttext p,
#Haupttext h2 {
text-align: center;
}
@media (max-width: 992px) {
.weitereArtikel { grid-area: 1 / 1 / 2 / 3; }
.Autorenbox { grid-area: 2 / 1 / 3 / 3; }
}
.news-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.news-highlights article {
overflow: hidden;
}
.news-highlight-0 {
grid-area: 1 / 1 / 2 / 5;
}
.news-highlight-1 {
grid-area: 2 / 1 / 5 / 3;
}
.news-highlight-2 {
grid-area: 2 / 3 / 5 / 4;
}
.news-highlight-3 {
grid-area: 2 / 4 / 5 / 5;
}
@media (min-width: 992px) and (max-width: 1500px) {
.news-highlight-0 {
grid-area: 1 / 1 / 2 / 5;
overflow: hidden;
}
.news-highlight-1 {
grid-area: 2 / 1 / 5 / 3;
overflow: hidden;
}
.news-highlight-2 {
grid-area: 2 / 3 / 4 / 5;
overflow: hidden;
}
.news-highlight-3 {
grid-area: 4 / 3 / 5 / 5;
overflow: hidden; }
}
@media (max-width: 992px) {
.news-highlight-0 {
grid-area: 1 / 1 / 2 / 5;
}
.news-highlight-1 {
grid-area: 2 / 1 / 3 / 5;
}
.news-highlight-2 {
grid-area: 3 / 1 / 4 / 5;
}
.news-highlight-3 {
grid-area: 4 / 1 / 5 / 5;
}
}
.news-highlight-link {
display: block;
width: 100%;
height: 100%;
position: relative;
aspect-ratio: 16/9;
text-decoration: none;
overflow: hidden;
color: #ffffff;
z-index: 0;
font-size: 1.2rem;
}
@media (max-width: 992px) {
.news-highlight-link {
aspect-ratio: 1/1;
}
}
.news-highlight-link:hover figure img {
transform: scale(1.05);
}
.news-highlight-img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
}
.news-highlight-link figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 1rem;
background: linear-gradient(to top, rgba(56, 56, 56, 1) 0%, rgba(56, 56, 56, 0) 100%);
color: var(--farbe-text);
padding: 1rem;
}
.news-highlight-link figcaption h2 {
font-size: 1.2rem;
color: #ffffff;
text-align: start;
margin: 0 0 0.5rem 0;
transition: all 0.3s;
font-weight: bolder;
}
.news-highlight-link figcaption h2::after {
content: " \279C";
padding-left: 0.25rem;
color: #e30613;
transition: all 0.3s;
}
.news-highlight-kategorie {
background-color: #e30613;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 1.3rem;
line-height: 1;
margin: 0 0 0.5rem 0;
color: #ffffff;
font-weight: bolder;
display: inline-block;
}
.news-highlight-wuwinfo {
color: #ffffff;
font-size: 0.8rem;
margin: 0;
}
.news-highlights article {
opacity: 1;
transition: all 0.3s;
}
.news-highlights:hover> :not(:hover) {
opacity: 0.6;
}
.news-highlights:hover> h2 {
opacity: 1!important;
}
.news-highlight-link:hover > figure figcaption h2::after {
content: " \279C";
padding-left: 0.5rem;
color: #ffffff;
transition: all 0.3s;
}
.news-highlight-link:hover>figure figcaption h2 {
color: #e30613;
transition: all 0.3s;
}
/* WEITERE NEWS */
.news-alle {
width: 100%;
display: flex;
flex-direction: column;
}
.news-alle h2 {
width: 100%;
text-align: center;
}
.news-alle-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(12, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.news-alle-grid article {
opacity: 1;
transition: all 0.3s;
}
.news-alle-grid:hover> :not(:hover) {
opacity: 0.6;
}
.news-alle-article:hover img {
transform: scale(1.2);
transition: all 0.3s;
}
.news-alle-grid > :nth-child(1) {
grid-area: 1 / 1 / 5 / 2;
}
.news-alle-grid > :nth-child(2) {
grid-area: 1 / 2 / 5 / 3;
}
.news-alle-grid > :nth-child(3) {
grid-area: 1 / 3 / 5 / 4;
}
.news-alle-grid > :nth-child(4) {
grid-area: 1 / 4 / 5 / 5;
}
.news-alle-grid > :nth-child(5) {
grid-area: 5 / 1 / 9 / 2;
}
.news-alle-grid > :nth-child(6) {
grid-area: 5 / 2 / 9 / 3;
}
.news-alle-grid > :nth-child(7) {
grid-area: 5 / 3 / 9 / 4;
}
.news-alle-grid > :nth-child(8) {
grid-area: 5 / 4 / 9 / 5;
}
.news-alle-grid > :nth-child(9) {
grid-area: 9 / 1 / 13 / 2;
}
.news-alle-grid > :nth-child(10) {
grid-area: 9 / 2 / 13 / 3;
}
.news-alle-grid > :nth-child(11) {
grid-area: 9 / 3 / 13 / 4;
}
.news-alle-grid > :nth-child(12) {
grid-area: 9 / 4 / 13 / 5;
}
@media (min-width: 992px) and (max-width: 1200px) {
.news-alle-grid > :nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.news-alle-grid > :nth-child(2) {
grid-area: 1 / 3 / 3 / 5;
}
.news-alle-grid > :nth-child(3) {
grid-area: 3 / 1 / 5 / 3;
}
.news-alle-grid > :nth-child(4) {
grid-area: 3 / 3 / 5 / 5;
}
.news-alle-grid > :nth-child(5) {
grid-area: 5 / 1 / 7 / 3;
}
.news-alle-grid > :nth-child(6) {
grid-area: 5 / 3 / 7 / 5;
}
.news-alle-grid > :nth-child(7) {
grid-area: 7 / 1 / 9 / 3;
}
.news-alle-grid > :nth-child(8) {
grid-area: 7 / 3 / 9 / 5;
}
.news-alle-grid > :nth-child(9) {
grid-area: 9 / 1 / 11 / 3;
}
.news-alle-grid > :nth-child(10) {
grid-area: 9 / 3 / 11 / 5;
}
.news-alle-grid > :nth-child(11) {
grid-area: 11 / 1 / 13 / 3;
}
.news-alle-grid > :nth-child(12) {
grid-area: 11 / 3 / 13 / 5;}
}
@media (max-width: 992px) {
.news-alle-grid > :nth-child(1) {
grid-area: 1 / 1 / 2 / 5;
}
.news-alle-grid > :nth-child(2) {
grid-area: 2 / 1 / 3 / 5;
}
.news-alle-grid > :nth-child(3) {
grid-area: 3 / 1 / 4 / 5;
}
.news-alle-grid > :nth-child(4) {
grid-area: 4 / 1 / 5 / 5;
}
.news-alle-grid > :nth-child(5) {
grid-area: 5 / 1 / 6 / 5;
}
.news-alle-grid > :nth-child(6) {
grid-area: 6 / 1 / 7 / 5;
}
.news-alle-grid > :nth-child(7) {
grid-area: 7 / 1 / 8 / 5;
}
.news-alle-grid > :nth-child(8) {
grid-area: 8 / 1 / 9 / 5;
}
.news-alle-grid > :nth-child(9) {
grid-area: 9 / 1 / 10 / 5;
}
.news-alle-grid > :nth-child(10) {
grid-area: 10 / 1 / 11 / 5;
}
.news-alle-grid > :nth-child(11) {
grid-area: 11 / 1 / 12 / 5;
}
.news-alle-grid > :nth-child(12) {
grid-area: 12 / 1 / 13 / 5;}
}
.news-alle-article a {
width: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
}
.news-alle-img {
width: 100%;
aspect-ratio: 16/9;
border-radius: 0.25rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
margin: 0 0 1rem 0;
}
.news-alle-img img {
object-fit: cover;
width: 100%;
transition: all 0.3s;
}
.news-alle-text {
width: 100%;
}
.news-alle-kategorie {
background-color: #e30613;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 1rem;
line-height: 1;
margin: 0 0 1rem 0;
color: #ffffff;
font-weight: bolder;
display: inline-block;
}
.news-alle-text h2 {
font-size: 1rem;
color: #ffffff;
text-align: start;
}
.news-alle-wuwinfo {
color: #ffffff;
font-size: 0.8rem;
margin: 0 ;
}
.alle-beitraege-link-sektion {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.alle-beitraege-link-sektion a {
background-color: #ffffff;
color: #e30613;
font-weight: bolder;
display: inline-block;
padding: 0.25rem 0.5rem;
line-height: 1;
font-size: 1.1rem;
border: 2px solid #e30613;
transition: all 0.3s;
}
.alle-beitraege-link-sektion a:hover {
background-color: #e30613;
color: #ffffff;
transition: all 0.3s;
}
.alle-beitraege-link-sektion a::before {
content: " \279C";
margin: 0 0.5rem 0 0rem;
color: #e30613;
transition: all 0.3s;
}
.alle-beitraege-link-sektion a:hover::before {
margin: 0 0.1rem 0 0.4rem;
color: #ffffff;
}
.alle-beitraege-link-sektion a::after {
content: " \279C";
margin: 0 0rem 0 0.5rem;
color: #e30613;
transition: all 0.3s;
transform: scaleX(-1);
display: inline-block;
}
.alle-beitraege-link-sektion a:hover::after {
margin: 0 0.4rem 0 0.1rem;
color: #ffffff;
}