Index + Über uns
This commit is contained in:
parent
0533ad4ea3
commit
6cd592a3ff
37 changed files with 1296 additions and 1705 deletions
|
|
@ -14,14 +14,6 @@
|
|||
hyphens: none;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* ========== Vereinheitlichte Section-Abstände ========== */
|
||||
section {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -34,18 +26,6 @@ section {
|
|||
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 {
|
||||
|
|
@ -319,7 +299,6 @@ section {
|
|||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #F5A623; /* CI-Orange bleibt */
|
||||
}
|
||||
.service-card-description {
|
||||
line-height: 1.65;
|
||||
|
|
@ -477,22 +456,16 @@ section {
|
|||
}
|
||||
|
||||
#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;
|
||||
|
||||
p, li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
|
|
@ -669,7 +642,6 @@ body {
|
|||
outline: 2px dashed var(--amp-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ===== Affiliations unter "Darum AMPERION" ===== */
|
||||
|
||||
.darum-aff-row{
|
||||
|
|
@ -687,39 +659,42 @@ body {
|
|||
gap:clamp(.75rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
/* Linker Block */
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption{
|
||||
margin:0 0 .5rem 0;
|
||||
font-size:clamp(.9rem, 1.2vw, 1rem);
|
||||
color:#6b7280;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.aff-logos{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:clamp(.5rem, 1.2vw, 1rem);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.aff-logos img{
|
||||
max-height:clamp(100px, 3.2vw, 180px);
|
||||
width:auto; height:auto; display:block;
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Rechter Block (PV Austria + Text) */
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
.aff-right{
|
||||
text-decoration:none; color:inherit;
|
||||
display:flex; /* zentriert das Logo im Link */
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-decoration:none;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.aff-right .aff-pva-logo{
|
||||
max-height:clamp(80px, 6vw, 140px);
|
||||
width:auto; height:auto; display:block;
|
||||
}
|
||||
.aff-text{
|
||||
margin:0;
|
||||
font-size:clamp(.95rem, 1.4vw, 1.1rem);
|
||||
line-height:1.5;
|
||||
max-width:42ch; /* gute Lesbarkeit */
|
||||
color:#374151;
|
||||
max-height:clamp(60px, 6vw, 120px); /* Logo-Größe hier steuern */
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
|
|
@ -730,29 +705,217 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
--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 (em skaliert mit Schriftgröße) */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* 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“ */
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.cta .my-container { position: relative; z-index: 1; }
|
||||
.cta__wrap { text-align: center; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
|
||||
/* ===== 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;
|
||||
|
||||
&::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-h1 { top: 20%; animation-duration: 6s; }
|
||||
&.energy-line-h2 { top: 40%; animation-duration: 7s; animation-delay: 2s; }
|
||||
&.energy-line-h3 { top: 60%; animation-duration: 8s; animation-delay: 4s; }
|
||||
&.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;
|
||||
|
||||
&::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-v1 { left: 15%; animation-duration: 7s; animation-delay: 1s; }
|
||||
&.energy-line-v2 { left: 35%; animation-duration: 9s; animation-delay: 3s; }
|
||||
&.energy-line-v3 { left: 65%; animation-duration: 8s; animation-delay: 2s; }
|
||||
&.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-node1 { top: 20%; left: 15%; animation-delay: 0s; }
|
||||
&.energy-node2 { top: 40%; left: 35%; animation-delay: 0.5s; }
|
||||
&.energy-node3 { top: 60%; left: 65%; animation-delay: 1s; }
|
||||
&.energy-node4 { top: 80%; left: 85%; animation-delay: 1.5s; }
|
||||
&.energy-node5 { top: 30%; left: 50%; animation-delay: 0.25s; }
|
||||
&.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;
|
||||
}
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
/* Große Typografie */
|
||||
.cta__title {
|
||||
|
|
@ -761,58 +924,359 @@ body {
|
|||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
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;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.cta__accent { color: var(--cta-accent); font-weight: 700; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
.cta__actions {
|
||||
display: flex; flex-wrap: wrap; justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex; align-items: center; gap: .7rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
border-radius: 9999px;
|
||||
background: #fff; color: var(--cta-primary);
|
||||
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; font-weight: 700;
|
||||
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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245,166,35,.35);
|
||||
|
||||
&::before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent); /* Hover = Orange */
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245,166,35,.35);
|
||||
}
|
||||
.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;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px); height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: #fff; border-radius: 9999px;
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4,110,110,.25);
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
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,.25); }
|
||||
.cta__social-link:active { transform: translateY(1px); }
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px); height: auto; display: block; transition: filter .2s ease;
|
||||
|
||||
/* ===== 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px; /* statt 90px */
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.article-copy {
|
||||
p { margin-bottom: 1rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
strong { font-weight: 700; }
|
||||
}
|
||||
}
|
||||
|
||||
.intro-image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.intro-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem; /* wie Cards */
|
||||
box-shadow: 0 6px 30px rgba(0,0,0,.05);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */
|
||||
.mission-section {
|
||||
.mission-tabs {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.nav-link {
|
||||
border: 0;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
color: #046e6e;
|
||||
opacity: .7;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 2px solid #046e6e;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,.04);
|
||||
|
||||
p { margin-bottom: .9rem; }
|
||||
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) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
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,.04);
|
||||
|
||||
.service-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto .5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: .35rem;
|
||||
}
|
||||
|
||||
.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,.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,.04);
|
||||
|
||||
.founder-name {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.founder-description {
|
||||
p { margin-bottom: .8rem; }
|
||||
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;
|
||||
}
|
||||
.cta__social-link:hover img { filter: invert(1); }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.footer {
|
||||
background: darken( $light, 1.5);
|
||||
background: #f3f3f3;
|
||||
min-height: 205px;
|
||||
text-align: center;
|
||||
padding-top: 67px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue