forked from markus/AMPERION_Webpage
Index + Über uns
This commit is contained in:
parent
0533ad4ea3
commit
6cd592a3ff
37 changed files with 1296 additions and 1705 deletions
|
|
@ -2477,7 +2477,7 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
margin-bottom: 40px; }
|
||||
|
||||
.footer {
|
||||
background: #f1f1f1;
|
||||
background: #f3f3f3;
|
||||
min-height: 205px;
|
||||
text-align: center;
|
||||
padding-top: 67px; }
|
||||
|
|
@ -2517,12 +2517,6 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
word-break: normal;
|
||||
hyphens: none; }
|
||||
|
||||
.text-center {
|
||||
text-align: center; }
|
||||
|
||||
.text-justify {
|
||||
text-align: justify; }
|
||||
|
||||
/* ========== Vereinheitlichte Section-Abstände ========== */
|
||||
section {
|
||||
margin-bottom: 0; }
|
||||
|
|
@ -2533,17 +2527,6 @@ section {
|
|||
margin-top: 80px;
|
||||
margin-bottom: 80px; }
|
||||
|
||||
/* Spezielle Section-Anpassungen */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px; }
|
||||
|
||||
.section-spacing {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 5rem; }
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
font-size: 22px;
|
||||
|
|
@ -2780,9 +2763,7 @@ section {
|
|||
/* Titel & Text */
|
||||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #F5A623;
|
||||
/* CI-Orange bleibt */ }
|
||||
margin: .25rem 0 .5rem; }
|
||||
|
||||
.service-card-description {
|
||||
line-height: 1.65;
|
||||
|
|
@ -2919,18 +2900,16 @@ section {
|
|||
padding-right: 5vw; }
|
||||
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.85;
|
||||
max-width: 200ch;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere;
|
||||
margin-bottom: 1rem; }
|
||||
#about-intro .intro-text p, #about-intro .intro-text li {
|
||||
margin-bottom: 1rem; }
|
||||
@media (min-width: 992px) {
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.35rem; } }
|
||||
|
||||
#about-intro .intro-text p,
|
||||
#about-intro .intro-text li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
|
|
@ -3097,7 +3076,7 @@ body {
|
|||
align-items: center;
|
||||
gap: clamp(0.75rem, 2vw, 1.25rem); }
|
||||
|
||||
/* Linker Block */
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: clamp(0.9rem, 1.2vw, 1rem);
|
||||
|
|
@ -3116,38 +3095,42 @@ body {
|
|||
height: auto;
|
||||
display: block; }
|
||||
|
||||
/* Rechter Block (PV Austria + Text) */
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
.aff-right {
|
||||
display: flex;
|
||||
/* zentriert das Logo im Link */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
align-items: center; }
|
||||
color: inherit; }
|
||||
|
||||
.aff-right .aff-pva-logo {
|
||||
max-height: clamp(80px, 6vw, 140px);
|
||||
max-height: clamp(60px, 6vw, 120px);
|
||||
/* Logo-Größe hier steuern */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block; }
|
||||
|
||||
.aff-text {
|
||||
margin: 0;
|
||||
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
|
||||
line-height: 1.5;
|
||||
max-width: 42ch;
|
||||
/* gute Lesbarkeit */
|
||||
color: #374151; }
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
@media (min-width: 900px) {
|
||||
.aff-right {
|
||||
padding-left: clamp(1rem, 2.5vw, 3rem);
|
||||
border-left: 1px solid #e5e7eb; } }
|
||||
|
||||
/* Kleine Verfeinerungen */
|
||||
/* Mobil: keine Trennlinie / kein Einzug */
|
||||
@media (max-width: 899.98px) {
|
||||
.aff-right {
|
||||
border-left: 0;
|
||||
padding-left: 0; } }
|
||||
|
||||
/* Fokus-Style für Tastaturbedienung */
|
||||
.aff-right:focus-visible {
|
||||
outline: 2px dashed var(--amp-accent);
|
||||
outline-offset: 4px; }
|
||||
|
||||
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||
/* ========================================
|
||||
CTA SECTION - HYBRID DESIGN
|
||||
======================================== */
|
||||
.cta {
|
||||
--cta-primary: #046e6e;
|
||||
/* Türkis */
|
||||
|
|
@ -3157,14 +3140,187 @@ body {
|
|||
--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 (em skaliert mit Schriftgröße) */
|
||||
/* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* Schriftgröße */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
/* Section höher wie „Standard-Sektion“ */ }
|
||||
background: #ffffff00; }
|
||||
|
||||
/* ===== HINTERGRUND ANIMATIONEN ===== */
|
||||
.cta__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.6; }
|
||||
|
||||
/* Horizontale Energie-Linie */
|
||||
.energy-line-h {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite; }
|
||||
.energy-line-h::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
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);
|
||||
border-radius: 50%; }
|
||||
.energy-line-h.energy-line-h1 {
|
||||
top: 20%;
|
||||
animation-duration: 6s; }
|
||||
.energy-line-h.energy-line-h2 {
|
||||
top: 40%;
|
||||
animation-duration: 7s;
|
||||
animation-delay: 2s; }
|
||||
.energy-line-h.energy-line-h3 {
|
||||
top: 60%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 4s; }
|
||||
.energy-line-h.energy-line-h4 {
|
||||
top: 80%;
|
||||
animation-duration: 6.5s;
|
||||
animation-delay: 1s; }
|
||||
|
||||
@keyframes energyFlowH {
|
||||
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%, transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite; }
|
||||
.energy-line-v::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
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);
|
||||
border-radius: 50%; }
|
||||
.energy-line-v.energy-line-v1 {
|
||||
left: 15%;
|
||||
animation-duration: 7s;
|
||||
animation-delay: 1s; }
|
||||
.energy-line-v.energy-line-v2 {
|
||||
left: 35%;
|
||||
animation-duration: 9s;
|
||||
animation-delay: 3s; }
|
||||
.energy-line-v.energy-line-v3 {
|
||||
left: 65%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 2s; }
|
||||
.energy-line-v.energy-line-v4 {
|
||||
left: 85%;
|
||||
animation-duration: 7.5s;
|
||||
animation-delay: 4s; }
|
||||
|
||||
@keyframes energyFlowV {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0; }
|
||||
10% {
|
||||
opacity: 1; }
|
||||
90% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0; } }
|
||||
|
||||
/* Energie-Knoten (Kreuzungspunkte) */
|
||||
.energy-node {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
animation: nodePulse 2s ease-in-out infinite; }
|
||||
.energy-node.energy-node1 {
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
animation-delay: 0s; }
|
||||
.energy-node.energy-node2 {
|
||||
top: 40%;
|
||||
left: 35%;
|
||||
animation-delay: 0.5s; }
|
||||
.energy-node.energy-node3 {
|
||||
top: 60%;
|
||||
left: 65%;
|
||||
animation-delay: 1s; }
|
||||
.energy-node.energy-node4 {
|
||||
top: 80%;
|
||||
left: 85%;
|
||||
animation-delay: 1.5s; }
|
||||
.energy-node.energy-node5 {
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
animation-delay: 0.25s; }
|
||||
.energy-node.energy-node6 {
|
||||
top: 70%;
|
||||
left: 25%;
|
||||
animation-delay: 0.75s; }
|
||||
|
||||
@keyframes nodePulse {
|
||||
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; }
|
||||
|
|
@ -3181,18 +3337,24 @@ body {
|
|||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||
line-height: 1.55;
|
||||
max-width: 58rem; }
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700; }
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-top: 0.5rem; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
.cta__actions {
|
||||
|
|
@ -3200,7 +3362,9 @@ body {
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem); }
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex;
|
||||
|
|
@ -3215,27 +3379,42 @@ body {
|
|||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; }
|
||||
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent);
|
||||
/* Hover = Orange */
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
|
||||
|
||||
.cta__btn:active {
|
||||
transform: translateY(1px); }
|
||||
|
||||
.cta__btn:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px; }
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.cta__btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
z-index: -1; }
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
|
||||
.cta__btn:hover::before {
|
||||
width: 300%;
|
||||
height: 300%; }
|
||||
.cta__btn:active {
|
||||
transform: translateY(1px); }
|
||||
.cta__btn:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px; }
|
||||
|
||||
/* Social-Icons (etwas größer, Teal-Hover) */
|
||||
.cta__social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(0.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
|
|
@ -3247,23 +3426,226 @@ body {
|
|||
border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.cta__social-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s ease, height 0.4s ease;
|
||||
z-index: -1; }
|
||||
.cta__social-link:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25);
|
||||
transform: translateY(-2px); }
|
||||
.cta__social-link:hover::before {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.cta__social-link:hover img {
|
||||
filter: invert(1); }
|
||||
.cta__social-link:active {
|
||||
transform: translateY(1px); }
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: filter .2s ease;
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
|
||||
.cta__social-link:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25); }
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.energy-line-h2,
|
||||
.energy-line-h4,
|
||||
.energy-line-v2,
|
||||
.energy-line-v4,
|
||||
.energy-node4,
|
||||
.energy-node5,
|
||||
.energy-node6 {
|
||||
display: none; } }
|
||||
|
||||
.cta__social-link:active {
|
||||
transform: translateY(1px); }
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px;
|
||||
/* statt 90px */
|
||||
padding-bottom: 60px; }
|
||||
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
/* Keine eigene Schriftgröße – erbt globales p-Design */
|
||||
#about-intro .intro-text {
|
||||
font-size: inherit;
|
||||
line-height: inherit; }
|
||||
|
||||
#about-intro .intro-text p {
|
||||
margin-bottom: .8rem; }
|
||||
|
||||
/* Badges vereinheitlichen */
|
||||
#about-intro .intro-badge {
|
||||
font-size: 1rem;
|
||||
padding: .45em .9em;
|
||||
background: #006464;
|
||||
border-radius: 999px; }
|
||||
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block; }
|
||||
|
||||
.intro-media, .intro-video {
|
||||
border-radius: 0 !important; }
|
||||
|
||||
/* überschreibt evtl. globale Styles */
|
||||
/* ========================================
|
||||
ABOUT PAGE STYLES
|
||||
======================================== */
|
||||
/* 1) Intro: Bild rechts, Text links, konsistente Abstände */
|
||||
#about-intro .intro-content {
|
||||
/* nutzt globale Typo; nur Abstände angleichen */ }
|
||||
#about-intro .intro-content .article-copy p {
|
||||
margin-bottom: 1rem; }
|
||||
#about-intro .intro-content .article-copy p:last-child {
|
||||
margin-bottom: 0; }
|
||||
#about-intro .intro-content .article-copy strong {
|
||||
font-weight: 700; }
|
||||
|
||||
#about-intro .intro-image-wrapper {
|
||||
position: relative; }
|
||||
|
||||
#about-intro .intro-image {
|
||||
display: block;
|
||||
transition: filter .2s ease; }
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem;
|
||||
/* wie Cards */
|
||||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
|
||||
object-fit: cover; }
|
||||
|
||||
.cta__social-link:hover img {
|
||||
filter: invert(1); }
|
||||
/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */
|
||||
.mission-section .mission-tabs {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
margin-bottom: 1rem; }
|
||||
.mission-section .mission-tabs .nav-link {
|
||||
border: 0;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
color: #046e6e;
|
||||
opacity: .7; }
|
||||
.mission-section .mission-tabs .nav-link.active, .mission-section .mission-tabs .nav-link:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 2px solid #046e6e;
|
||||
background: transparent; }
|
||||
|
||||
.mission-section .mission-tab-content .tab-inner {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.mission-section .mission-tab-content .tab-inner p {
|
||||
margin-bottom: .9rem; }
|
||||
.mission-section .mission-tab-content .tab-inner p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.25rem; }
|
||||
@media (max-width: 992px) {
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 576px) {
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr; } }
|
||||
.service-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.service-card .service-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto .5rem;
|
||||
display: block; }
|
||||
.service-card .service-card-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: .35rem; }
|
||||
.service-card .service-card-description {
|
||||
margin: 0; }
|
||||
|
||||
/* 4) Team-Block: Karten & Bild */
|
||||
.team-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
|
||||
object-fit: cover; }
|
||||
|
||||
.founder-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.founder-card .founder-name {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 700; }
|
||||
.founder-card .founder-description p {
|
||||
margin-bottom: .8rem; }
|
||||
.founder-card .founder-description p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* 5) Utilities: Badge-Row unter Intro-Text */
|
||||
#about-intro .badge {
|
||||
border: 1px solid #eaeaea;
|
||||
background: #fafafa;
|
||||
font-weight: 600; }
|
||||
|
||||
/* 6) Harmonisierung der Section-Spacings für About */
|
||||
#about-intro.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px; }
|
||||
|
||||
.mission-section.section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 90px; }
|
||||
|
||||
/* ABOUT Intro – schmal & Blocksatz */
|
||||
#about-intro .intro-text.article-copy {
|
||||
max-width: 100ch;
|
||||
/* schmaler Textblock */
|
||||
margin: 0 auto;
|
||||
text-align: justify;
|
||||
/* „blocksartig“ */
|
||||
text-justify: inter-word;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere; }
|
||||
|
||||
#about-intro .intro-text.article-copy p {
|
||||
margin-bottom: .9rem;
|
||||
/* etwas kompakter als Standard */ }
|
||||
|
||||
/* H2 optisch sauber zentrieren/ausbalancieren */
|
||||
#about-intro h2 {
|
||||
text-wrap: balance;
|
||||
margin-bottom: 4rem; }
|
||||
|
||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||
.logo-container {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue