forked from markus/AMPERION_Webpage
Refactor SCSS and HTML for improved layout, typography, and call-to-action sections
This commit is contained in:
parent
b62687cac4
commit
5083ef7e3c
6 changed files with 328 additions and 35 deletions
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: clamp(2.5rem, 4vw, 4rem);
|
font-size: clamp(1.8rem, 4vw, 4rem);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: #046e6e;
|
color: #046e6e;
|
||||||
|
|
@ -290,7 +290,7 @@ section {
|
||||||
cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */
|
cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
|
/* dezentes Hover-Feedback */
|
||||||
.service-card::after {
|
.service-card::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute; inset: 0;
|
position: absolute; inset: 0;
|
||||||
|
|
@ -409,6 +409,22 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-cta {
|
||||||
|
color: #046e6e; /* Türkis */
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
transition: color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-cta:hover,
|
||||||
|
.about-cta:focus {
|
||||||
|
color: #F5A623; /* Orange */
|
||||||
|
border-bottom-color: #F5A623;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ========== Mehrwerte ========== */
|
/* ========== Mehrwerte ========== */
|
||||||
.mehrwerte-grid {
|
.mehrwerte-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -719,3 +735,98 @@ body {
|
||||||
outline:2px dashed var(--amp-accent);
|
outline:2px dashed var(--amp-accent);
|
||||||
outline-offset:4px;
|
outline-offset:4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||||
|
.cta {
|
||||||
|
--cta-primary: #046e6e; /* Türkis */
|
||||||
|
--cta-accent: #F5A623; /* Orange */
|
||||||
|
|
||||||
|
/* Button-Preset (hier zentral Größe steuern) */
|
||||||
|
--btn-py: clamp(2rem, 2.8vw, 3rem); /* oben/unten -> Höhe */
|
||||||
|
--btn-px: clamp(2rem, 3.6vw, 3em); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||||
|
--btn-fs: clamp(2rem, 2vw, 3rem); /* Schriftgröße */
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hintergrund dezent + optional animiert */
|
||||||
|
.cta__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
|
||||||
|
.cta__grad { position: absolute; inset: 0; background: linear-gradient(180deg,#fff,#f6f9f9,#fff); }
|
||||||
|
@keyframes cta-pan { from { background-position: 0% 0%; } to { background-position: 200% 200%; } }
|
||||||
|
.cta__pan {
|
||||||
|
position: absolute; inset: 0; opacity: .08; background-size: 200% 200%;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(40% 40% at 20% 10%, rgba(4,110,110,.25), transparent 60%),
|
||||||
|
radial-gradient(35% 35% at 85% 35%, rgba(245,166,35,.25), transparent 55%);
|
||||||
|
animation: cta-pan 24s linear infinite;
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) { .cta__pan { animation: none !important; } }
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--cta-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .2px;
|
||||||
|
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||||
|
}
|
||||||
|
.cta__lead {
|
||||||
|
margin: .9rem auto 0;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||||
|
line-height: 1.55;
|
||||||
|
max-width: 58rem;
|
||||||
|
}
|
||||||
|
.cta__accent { color: var(--cta-accent); font-weight: 700; }
|
||||||
|
|
||||||
|
/* Buttons – deutlich größer */
|
||||||
|
.cta__actions {
|
||||||
|
display: flex; flex-wrap: wrap; justify-content: center;
|
||||||
|
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||||
|
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||||
|
}
|
||||||
|
.cta__btn {
|
||||||
|
display: inline-flex; align-items: center; gap: .7rem;
|
||||||
|
padding: var(--btn-py) var(--btn-px);
|
||||||
|
border-radius: 9999px;
|
||||||
|
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;
|
||||||
|
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,.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;
|
||||||
|
gap: clamp(.9rem, 2vw, 1.2rem);
|
||||||
|
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||||
|
}
|
||||||
|
.cta__social-link {
|
||||||
|
width: clamp(56px, 6.2vw, 64px); height: clamp(56px, 6.2vw, 64px);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.cta__social-link:hover img { filter: invert(1); }
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ about:
|
||||||
enable: true
|
enable: true
|
||||||
title: "ÜBER AMPERION"
|
title: "ÜBER AMPERION"
|
||||||
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||||
content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich. <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
|
content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich. <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. </b> </p>"
|
||||||
image: "images/ingenieurbuero.svg"
|
image: "images/ingenieurbuero.svg"
|
||||||
|
|
||||||
############################# About #################################
|
############################# About #################################
|
||||||
|
|
@ -74,6 +74,7 @@ cta:
|
||||||
enable: true
|
enable: true
|
||||||
label: "Kontaktinformation"
|
label: "Kontaktinformation"
|
||||||
link: "contact/"
|
link: "contact/"
|
||||||
|
|
||||||
############################# facts ###############################
|
############################# facts ###############################
|
||||||
facts:
|
facts:
|
||||||
enable: true
|
enable: true
|
||||||
|
|
|
||||||
0
deploy.ps1
Normal file
0
deploy.ps1
Normal file
|
|
@ -261,19 +261,22 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
<div class="row mt-4 d-flex align-items-stretch about-row">
|
<div class="row mt-4 d-flex align-items-stretch about-row">
|
||||||
|
|
||||||
<!-- Textbereich -->
|
<!-- Textbereich -->
|
||||||
<div class="col-md-7 col-sm-12 d-flex h-100" data-aos="fade-right" data-aos-delay="200">
|
<div class="col-md-7 col-sm-12 d-flex h-1000" data-aos="fade-right" data-aos-delay="200">
|
||||||
<div class="text-left w-100 my-auto">
|
<div class="text-left w-100 my-auto">
|
||||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<a href="/about/" class="about-cta">MEHR ÜBER UNS</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Bildbereich -->
|
<!-- Bildbereich -->
|
||||||
<div class="col-md-5 col-sm-12 d-flex h-100" data-aos="zoom-in" data-aos-delay="300">
|
<div class="col-md-5 col-sm-12 d-flex h-10" data-aos="zoom-in" data-aos-delay="300">
|
||||||
<div class="about-image-wrap">
|
<div class="about-image-wrap">
|
||||||
<img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
|
<img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -283,7 +286,48 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
|
||||||
<!-- CALL TO ACTION -->
|
<!-- CALL TO ACTION -->
|
||||||
|
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||||
|
|
||||||
{{ if .Params.cta.enable }}
|
{{ if .Params.cta.enable }}
|
||||||
{{ partial "cta.html" . }}
|
<section id="cta" class="cta">
|
||||||
|
<!-- BG -->
|
||||||
|
<div class="cta__bg" aria-hidden="true">
|
||||||
|
<div class="cta__grad"></div>
|
||||||
|
<div class="cta__pan"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-container">
|
||||||
|
<div class="cta__wrap">
|
||||||
|
<h2 class="cta__title">
|
||||||
|
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
|
||||||
|
</h2>
|
||||||
|
<p class="cta__lead">
|
||||||
|
Bereit für Ihr Energieprojekt?
|
||||||
|
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="cta__actions">
|
||||||
|
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||||||
|
<span aria-hidden="true">✉️</span><span>E-Mail senden</span>
|
||||||
|
</a>
|
||||||
|
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}">
|
||||||
|
<span aria-hidden="true">📞</span><span>Anrufen</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cta__social">
|
||||||
|
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||||
|
<img src="/images/social/instagram.svg" alt="">
|
||||||
|
</a>
|
||||||
|
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||||
|
<img src="/images/social/linkedin.svg" alt="">
|
||||||
|
</a>
|
||||||
|
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||||||
|
<img src="/images/social/facebook.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
|
||||||
|
|
||||||
{{ with site.GetPage "/" }}
|
|
||||||
{{ with .Params.cta }}
|
|
||||||
<section class="call-to-action bg-1 section-sm overly" style="background-image: url('{{ .bg_image | relURL }}'); position: relative; background-attachment: fixed; background-size: cover;">
|
|
||||||
<div class="overlay-dark"></div> <!-- DAS NEUE OVERLAY -->
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="block" style="position: relative; z-index: 1;">
|
|
||||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
|
||||||
{{ with .content }}<p>{{ . | markdownify }}</p>{{ end }}
|
|
||||||
{{ with .button }}
|
|
||||||
{{ if .enable }}
|
|
||||||
<a class="btn btn-main btn-solid-border" href="mailto:{{ $impressum.Params.email }}">E-mail</a>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<a class="btn btn-main btn-solid-border" href="tel:{{ index $impressum.Params.telefon }}">TELEFON</a>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover {
|
||||||
padding: 0 1rem; }
|
padding: 0 1rem; }
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: clamp(2.5rem, 4vw, 4rem);
|
font-size: clamp(1.8rem, 4vw, 4rem);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: #046e6e;
|
color: #046e6e;
|
||||||
|
|
@ -2750,7 +2750,7 @@ section {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
/* kein Hand-Cursor -> kein Link-Feeling */ }
|
/* kein Hand-Cursor -> kein Link-Feeling */ }
|
||||||
|
|
||||||
/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
|
/* dezentes Hover-Feedback */
|
||||||
.service-card::after {
|
.service-card::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2866,6 +2866,20 @@ section {
|
||||||
.hover-link:hover {
|
.hover-link:hover {
|
||||||
color: #F5A623; }
|
color: #F5A623; }
|
||||||
|
|
||||||
|
.about-cta {
|
||||||
|
color: #046e6e;
|
||||||
|
/* Türkis */
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
transition: color 0.2s ease, border-color 0.2s ease; }
|
||||||
|
|
||||||
|
.about-cta:hover,
|
||||||
|
.about-cta:focus {
|
||||||
|
color: #F5A623;
|
||||||
|
/* Orange */
|
||||||
|
border-bottom-color: #F5A623; }
|
||||||
|
|
||||||
/* ========== Mehrwerte ========== */
|
/* ========== Mehrwerte ========== */
|
||||||
.mehrwerte-grid {
|
.mehrwerte-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -3133,6 +3147,156 @@ body {
|
||||||
outline: 2px dashed var(--amp-accent);
|
outline: 2px dashed var(--amp-accent);
|
||||||
outline-offset: 4px; }
|
outline-offset: 4px; }
|
||||||
|
|
||||||
|
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||||
|
.cta {
|
||||||
|
--cta-primary: #046e6e;
|
||||||
|
/* Türkis */
|
||||||
|
--cta-accent: #F5A623;
|
||||||
|
/* Orange */
|
||||||
|
/* Button-Preset (hier zentral Größe steuern) */
|
||||||
|
--btn-py: clamp(2rem, 2.8vw, 3rem);
|
||||||
|
/* oben/unten -> Höhe */
|
||||||
|
--btn-px: clamp(2rem, 3.6vw, 3em);
|
||||||
|
/* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||||
|
--btn-fs: clamp(2rem, 2vw, 3rem);
|
||||||
|
/* Schriftgröße */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||||
|
/* Section höher wie „Standard-Sektion“ */
|
||||||
|
background: #f3f3f3; }
|
||||||
|
|
||||||
|
/* Hintergrund dezent + optional animiert */
|
||||||
|
.cta__bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0; }
|
||||||
|
|
||||||
|
.cta__grad {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(180deg, #fff, #f6f9f9, #fff); }
|
||||||
|
|
||||||
|
@keyframes cta-pan {
|
||||||
|
from {
|
||||||
|
background-position: 0% 0%; }
|
||||||
|
to {
|
||||||
|
background-position: 200% 200%; } }
|
||||||
|
|
||||||
|
.cta__pan {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: .08;
|
||||||
|
background-size: 200% 200%;
|
||||||
|
background-image: radial-gradient(40% 40% at 20% 10%, rgba(4, 110, 110, 0.25), transparent 60%), radial-gradient(35% 35% at 85% 35%, rgba(245, 166, 35, 0.25), transparent 55%);
|
||||||
|
animation: cta-pan 24s linear infinite; }
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.cta__pan {
|
||||||
|
animation: none !important; } }
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--cta-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .2px;
|
||||||
|
font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
|
||||||
|
|
||||||
|
.cta__lead {
|
||||||
|
margin: .9rem auto 0;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||||
|
line-height: 1.55;
|
||||||
|
max-width: 58rem; }
|
||||||
|
|
||||||
|
.cta__accent {
|
||||||
|
color: var(--cta-accent);
|
||||||
|
font-weight: 700; }
|
||||||
|
|
||||||
|
/* Buttons – deutlich größer */
|
||||||
|
.cta__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||||
|
margin-top: clamp(1.4rem, 3vw, 2.2rem); }
|
||||||
|
|
||||||
|
.cta__btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .7rem;
|
||||||
|
padding: var(--btn-py) var(--btn-px);
|
||||||
|
border-radius: 9999px;
|
||||||
|
background: #fff;
|
||||||
|
color: var(--cta-primary);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||||
|
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; }
|
||||||
|
|
||||||
|
/* 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); }
|
||||||
|
|
||||||
|
.cta__social-link {
|
||||||
|
width: clamp(56px, 6.2vw, 64px);
|
||||||
|
height: clamp(56px, 6.2vw, 64px);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
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; }
|
||||||
|
|
||||||
|
.cta__social-link:hover {
|
||||||
|
background: var(--cta-accent);
|
||||||
|
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.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; }
|
||||||
|
|
||||||
|
.cta__social-link:hover img {
|
||||||
|
filter: invert(1); }
|
||||||
|
|
||||||
|
/* Optional: Wenn du Social-Hover auch Orange willst, tausche oben var(--cta-primary) -> var(--cta-accent) */
|
||||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||||
.logo-container {
|
.logo-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue