/* Header: Bild mit Welle, darunter Slogan und Stellenname auf dunkler Fläche */
.custom-image {
height: 500px;
position: relative;
overflow: hidden;
background-image: url();
background-size: cover;
background-position: center;
}
.custom-image svg {
color: rgb(var(--dunklefarbe));
height: 200px;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
display: block;
animation: custom-wave-in 0.9s ease-out both;
}
.custom-slogan{
background-color: rgb(var(--dunklefarbe));
color: rgb(var(--dunklefarbe-contrast));
font-size: 36px;
line-height: 1.3;
text-align: center;
padding: 0 20px;
}
.coveto_slogan{
animation: custom-fade-in 0.7s 0.2s ease-out both;
}
.custom-stellenname, .custom-stellenname h1{
background-color: rgb(var(--dunklefarbe));
color: rgb(var(--dunklefarbe-contrast)) !important;
text-align: center;
padding-bottom: 30px;
}
.custom-stellenname{
padding-left: 20px;
padding-right: 20px;
}

/* Inhaltskarte */
.custom-paper {
margin: 0 auto;
margin-top: -20px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.18);
padding: 40px;
max-width: 950px;
animation: custom-rise 0.6s 0.1s ease-out both;
}

#coveto_public .custom-paper h1{
position: relative;
z-index: 1;
font-size: 36px;
display: inline-block;
}
#coveto_public .custom-paper h1:after {
content: "";
position: absolute;
width: 100%;
z-index: -1;
left: 0;
bottom: 8px;
height: 18px;
background-color: rgb(var(--dunklefarbe), 0.1);
}

/* Lesbarkeit: etwas mehr Zeilenabstand, Listenpunkte in der Hauptfarbe */
#coveto_public .custom-paper p,
#coveto_public .custom-paper li{
line-height: 1.5;
}
.custom-paper li{
margin: 4px 0;
}
.custom-paper li::before{
color: rgb(var(--dunklefarbe));
}

/* Kontakt, Foto und Call-to-Action */
.custom-contact{
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid rgba(0,0,0,0.08);
gap: 24px;
align-items: center;
}
.custom-avatar .coveto_ansprechpartner_foto--circle img{
box-shadow: 0 0 0 4px rgba(var(--dunklefarbe), 0.12), 0 6px 18px rgba(0,0,0,0.18);
}
.custom-cta{
display: flex;
flex-direction: column;
gap: 14px;
}
.custom-cta .ctabtnp,
.custom-cta .ctabtnwa{
width: 100%;
box-sizing: border-box;
text-align: center;
}
.custom-cta .ctabtnHinweis{
margin: 0;
}
.custom-paper .ctabtnp,
.custom-paper .ctabtnwa{
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.custom-paper .ctabtnp:hover,
.custom-paper .ctabtnwa:hover{
transform: translateY(-1px);
}

/* Abschnitte blenden beim Scrollen sanft ein (nur Browser mit Scroll-Animationen) */
@media screen {
@supports (animation-timeline: view()) {
.custom-paper .covetoStone{
animation: custom-reveal linear both;
animation-timeline: view();
animation-range: entry 0 entry 140px;
}
}
}

@keyframes custom-wave-in {
from { transform: translateY(40px); }
to { transform: none; }
}
@keyframes custom-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes custom-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes custom-reveal {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}

/* Mobil */
@media screen and (max-width: 950px) {
.custom-image{
height: 300px;
}
.custom-image svg{
height: 120px;
}
.custom-slogan{
font-size: 26px;
}
.custom-paper{
margin-left: 12px;
margin-right: 12px;
padding: 20px 16px;
border-radius: 14px;
}
.custom-avatar{
text-align: center;
}
}

/* Barrierefreiheit: keine Bewegung, wenn der Benutzer das wünscht */
@media (prefers-reduced-motion: reduce) {
.custom-image svg,
.coveto_slogan,
.custom-paper,
.custom-paper .covetoStone{
animation: none;
}
.custom-paper .ctabtnp,
.custom-paper .ctabtnwa{
transition: none;
}
}