Update3008251310
This commit is contained in:
parent
68db76b963
commit
af6021b9cf
12 changed files with 193 additions and 98 deletions
|
|
@ -64,31 +64,37 @@
|
|||
<div class="stack">
|
||||
<h3>Kontakt</h3>
|
||||
<ul class="info-list" style="display:grid;gap:12px;justify-items:center;text-align:center">
|
||||
{{ with $addr }}
|
||||
<li class="info-item">
|
||||
<div class="txt">{{ . | markdownify }}</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $email }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="mailto:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone1 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone2 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
📍{{ with $addr }}
|
||||
<li class="info-item">
|
||||
<div class="txt">{{ . | markdownify }}</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
📧{{ with $email }}
|
||||
<li class="info-item">
|
||||
<div class="txt">
|
||||
<a href="mailto:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
📞{{ with $phone1 }}
|
||||
<li class="info-item">
|
||||
<div class="txt">
|
||||
<a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone2 }}
|
||||
<li class="info-item">
|
||||
<div class="txt">
|
||||
<a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<h3>Folgen Sie uns</h3>
|
||||
<h4>Folgen Sie uns!</h4>
|
||||
<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="">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 sticky-top">
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ with .Params.subtitle }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
<p>{{ i18n "last_update" }}: {{ time.Format ":date_long" .Lastmod }}</p>
|
||||
<h3>{{ i18n "faq_toc_title" }}</h3>
|
||||
|
|
|
|||
|
|
@ -4,25 +4,85 @@
|
|||
|
||||
<section class="impressum section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
{{ range $index, $heading := .Params.headings }}
|
||||
<tr>
|
||||
<td class="col-1">
|
||||
{{ $heading }}
|
||||
</td>
|
||||
<td class="col-2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
<div class="impressum-wrapper">
|
||||
|
||||
{{ range $index, $heading := .Params.headings }}
|
||||
<div class="impressum-item row">
|
||||
<div class="col-md-4">
|
||||
<h4>{{ $heading }}</h4>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="impressum-content">
|
||||
{{ index $.Params.contents $index | markdownify }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ end }}
|
||||
<style>
|
||||
.impressum-wrapper {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.impressum-item {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.impressum-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.impressum-item h4 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.impressum-content {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.impressum-content a {
|
||||
color: #006464;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.impressum-content a:hover {
|
||||
color: #F5A623;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.impressum-wrapper {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.impressum-item {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.impressum-item h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -23,39 +23,82 @@
|
|||
{{ $ergebnisPhoto := cond (gt (len $photos) 1) (index $photos 1) nil }}
|
||||
{{ $.Scratch.Set "ergebnisPhoto" $ergebnisPhoto }}
|
||||
|
||||
<!-- ===== Inline-Styles ===== -->
|
||||
<!-- ===== Styles (optimiert für 1 oder 3 Spalten) ===== -->
|
||||
<style>
|
||||
.container-wide{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
|
||||
.container-wide {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
@media (min-width:1200px){.container-wide{max-width:1280px}}
|
||||
@media (min-width:1400px){.container-wide{max-width:1360px}}
|
||||
@media (min-width:1600px){.container-wide{max-width:1440px}}
|
||||
.service-hero__media{border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
|
||||
.service-hero__media img{display:block;width:100%;height:auto}
|
||||
.service-hero__text p{margin-bottom:1rem}
|
||||
|
||||
/* USP inline unter dem Text – Icons oben, #F5A623 */
|
||||
.usp-inline{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
|
||||
@media (min-width:992px){.usp-inline{grid-template-columns:repeat(3,1fr)}}
|
||||
.service-hero__media {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 30px rgba(0,0,0,.06);
|
||||
}
|
||||
.service-hero__media img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.service-hero__text p { margin-bottom: 1rem }
|
||||
|
||||
.usp-item{
|
||||
display:flex; flex-direction:column;
|
||||
align-items:center; /* vorher: flex-start */
|
||||
text-align:center; /* Text mittig */
|
||||
gap:8px; padding:12px 14px; border-radius:12px;
|
||||
background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05);
|
||||
}
|
||||
.usp-icon{
|
||||
color:#F5A623; background:rgba(245,166,35,.12);
|
||||
width:44px; height:44px; border-radius:12px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
margin:0 auto 8px; /* zentriert die Iconbox */
|
||||
}
|
||||
/* USP Grid */
|
||||
.usp-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* Standard: Handy -> untereinander */
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.usp-icon svg{display:block;width:24px;height:24px}
|
||||
.usp-text{font-weight:500;margin:0}
|
||||
/* Desktop: immer 3 nebeneinander */
|
||||
@media (min-width: 992px) {
|
||||
.usp-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.usp-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.usp-icon {
|
||||
color: #F5A623;
|
||||
background: rgba(245,166,35,.12);
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
.usp-icon svg {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.usp-text {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- =========================
|
||||
HERO: Bild links, Intro rechts (breit)
|
||||
========================= -->
|
||||
|
|
@ -83,21 +126,13 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Eigenständiger Container für USPs unterhalb der Text-/Bild-Reihe -->
|
||||
<!-- USP-Container -->
|
||||
{{ with .Params.usp }}
|
||||
<div class="usp-container" style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
justify-items: center;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
">
|
||||
<div class="usp-container">
|
||||
{{ range $i, $u := . }}
|
||||
<div class="usp-item" style="display:flex; flex-direction:column; align-items:center;">
|
||||
<div class="usp-item">
|
||||
<div class="usp-icon" aria-hidden="true">
|
||||
{{ if eq (mod $i 3) 0 }}
|
||||
<!-- Shield -->
|
||||
|
|
@ -121,7 +156,7 @@
|
|||
</svg>
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="usp-text" style="text-align:center;">{{ $u | markdownify }}</p>
|
||||
<p class="usp-text">{{ $u | markdownify }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -132,6 +167,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<!-- =========================
|
||||
FEATURES CAROUSEL (Große Cards mit Auto-Play)
|
||||
Quelle: .Params.features (array of {title, text, icon?})
|
||||
|
|
@ -558,6 +594,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<!-- =========================
|
||||
OUTCOMES (Nutzen/Ergebnisse)
|
||||
Quelle: .Params.outcomes (array of strings)
|
||||
|
|
@ -645,11 +682,6 @@
|
|||
{{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
|
||||
</h3>
|
||||
|
||||
{{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}}
|
||||
{{ with .Params.subtitle }}
|
||||
<p class="cta__lead">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
<div class="cta__actions">
|
||||
{{ with .Params.cta_label }}
|
||||
<a class="cta__btn" href="{{ $.Params.cta_href | default "/contact/" }}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue