Commit12082000
This commit is contained in:
parent
b6fe872a80
commit
0962f9325b
30 changed files with 1536 additions and 862 deletions
|
|
@ -730,13 +730,14 @@ body {
|
|||
--cta-accent: #F5A623; /* Orange */
|
||||
|
||||
/* Button-Preset (hier zentral Größe steuern) */
|
||||
--btn-py: clamp(1.8rem, 2.8vw, 2.5rem); /* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem); /* Schriftgröße */
|
||||
/* ÄNDERUNG: deutlich kleinere Buttons (Höhe, Breite, Schrift) */
|
||||
--btn-py: clamp(1rem, 1.2vw, 1.5rem); /* vorher 1.8–2.5rem -> jetzt kompakter */
|
||||
--btn-px: clamp(1rem, 1.6vw, 1.5rem); /* vorher 1.8–2.5rem -> schmaler */
|
||||
--btn-fs: clamp(1.5rem, 1.15vw, 1.5rem);/* vorher 1.8–2.5rem -> p-nahe Größe */
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0; /* belassen; nur Buttons werden kleiner */
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
|
|
@ -750,26 +751,6 @@ body {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtiles Grid */
|
||||
.cta__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent; /* Explizit transparent */
|
||||
background-image:
|
||||
linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Energie-Linien Container */
|
||||
.cta__energy-lines {
|
||||
position: absolute;
|
||||
|
|
@ -784,10 +765,10 @@ body {
|
|||
.energy-line-h {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--cta-accent) 10%,
|
||||
var(--cta-accent) 90%,
|
||||
transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite;
|
||||
|
|
@ -800,8 +781,8 @@ body {
|
|||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -812,30 +793,20 @@ body {
|
|||
}
|
||||
|
||||
@keyframes energyFlowH {
|
||||
0% {
|
||||
left: -200px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
0% { left: -200px; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* Vertikale Energie-Linie */
|
||||
.energy-line-v {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
background: linear-gradient(180deg,
|
||||
transparent 0%,
|
||||
var(--cta-accent) 10%,
|
||||
var(--cta-accent) 90%,
|
||||
transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite;
|
||||
|
|
@ -848,8 +819,8 @@ body {
|
|||
transform: translateX(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -860,20 +831,10 @@ body {
|
|||
}
|
||||
|
||||
@keyframes energyFlowV {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
0% { top: -150px; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* Energie-Knoten (Kreuzungspunkte) */
|
||||
|
|
@ -881,9 +842,9 @@ body {
|
|||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-accent);
|
||||
animation: nodePulse 2s ease-in-out infinite;
|
||||
|
||||
&.energy-node1 { top: 20%; left: 15%; animation-delay: 0s; }
|
||||
|
|
@ -895,27 +856,29 @@ body {
|
|||
}
|
||||
|
||||
@keyframes nodePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||||
50% { transform: scale(1.5); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== CONTENT STYLES ===== */
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
/* NEU: zentral breiter Container für diese Section
|
||||
-> mehr Zeilenbreite, damit die H1 ab Desktop in 1 Zeile bleibt */
|
||||
width: 100%;
|
||||
max-width: 1360px; /* vorher kein Limit hier – jetzt groß/“breit in der Mitte“ */
|
||||
margin-inline: auto; /* zentriert */
|
||||
padding-inline: clamp(16px, 3vw, 24px); /* etwas Innenabstand links/rechts */
|
||||
}
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem);
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
/* ÄNDERUNG: mehr Inhaltsbreite, H1 bekommt mehr Platz */
|
||||
max-width: 90rem; /* vorher 72rem */
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
/* Große Typografie */
|
||||
|
|
@ -924,31 +887,36 @@ body {
|
|||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
position: center;
|
||||
z-index: 2;
|
||||
|
||||
/* NEU: ab Desktop nicht umbrechen -> bleibt einzeilig, wenn Platz da ist */
|
||||
@media (min-width: 1200px) {
|
||||
white-space: nowrap; /* einzeilig erzwingen */
|
||||
}
|
||||
}
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
line-height: 1.55;
|
||||
/* optional etwas breiter, wenn du willst – hier schon groß genug */
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
/* Buttons */
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||
|
|
@ -957,18 +925,18 @@ body {
|
|||
}
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
padding: var(--btn-py) var(--btn-px); /* nutzt die kleineren Presets oben */
|
||||
border-radius: 9999px;
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
color: var(--cta-primary);
|
||||
border: 1px solid rgba(0,0,0,.06);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
font-size: var(--btn-fs); /* nutzt die kleinere Schrift */
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -998,19 +966,17 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active { transform: translateY(1px); }
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px;
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social-Icons (etwas größer, Teal-Hover) */
|
||||
.cta__social {
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
|
|
@ -1019,12 +985,12 @@ body {
|
|||
}
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
|
||||
|
|
@ -1046,29 +1012,22 @@ body {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4,110,110,.25);
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&::before { width: 100%; height: 100%; }
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
img { filter: invert(1); }
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active { transform: translateY(1px); }
|
||||
|
||||
img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: filter .2s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -1089,6 +1048,7 @@ body {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px; /* statt 90px */
|
||||
|
|
@ -1107,23 +1067,23 @@ body {
|
|||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* About-Intro: Video */
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 12px; // Weiche Kanten
|
||||
border-radius: 12px; /* Weiche Kanten */
|
||||
}
|
||||
|
||||
.intro-media {
|
||||
overflow: hidden; // sorgt dafür, dass der Radius auch das Video schneidet
|
||||
border-radius: 12px;
|
||||
overflow: hidden; /* sorgt dafür, dass der Radius auch das Video schneidet */
|
||||
border-radius: 12px; /* gleicher Radius wie Video */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================
|
||||
ABOUT PAGE STYLES
|
||||
======================================== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue