57 lines
2 KiB
HTML
57 lines
2 KiB
HTML
<!-- page-title.html - Optimierte Version mit Wiederverwendung -->
|
||
<section class="page-title">
|
||
<!-- Animierter Grid-Hintergrund (nutzt CTA-Klassen) -->
|
||
<div class="cta__bg page-title__bg" aria-hidden="true">
|
||
<!-- Grid Pattern -->
|
||
<div class="cta__grid"></div>
|
||
|
||
<!-- Energie-Linien (nur wenige für dezenten Effekt) -->
|
||
<div class="cta__energy-lines">
|
||
<!-- Nur 2 horizontale Linien -->
|
||
<div class="energy-line-h energy-line-h1"></div>
|
||
<div class="energy-line-h energy-line-h3"></div>
|
||
<!-- Nur 2 vertikale Linien -->
|
||
<div class="energy-line-v energy-line-v1"></div>
|
||
<div class="energy-line-v energy-line-v3"></div>
|
||
<!-- Nur 3 Knoten -->
|
||
<div class="energy-node energy-node1"></div>
|
||
<div class="energy-node energy-node3"></div>
|
||
<div class="energy-node energy-node5"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content -->
|
||
<div class="container1">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<div class="service-title fade-in">
|
||
<h1>{{ .Title }}</h1>
|
||
</div>
|
||
{{ with .Params.description }}
|
||
<p class="page-title-desc">{{ . }}</p>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
/* Page Title spezifische Styles */
|
||
.page-title{position:relative;padding:80px 0;background:#fff;overflow:hidden;}
|
||
.container1{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;}
|
||
.service-title h1{color:#046e6e;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;margin:0;}
|
||
.page-title-desc{color:#666;font-size:1.25rem;margin:1rem auto 0;max-width:700px;}
|
||
.fade-in{animation:fadeInUp 1s ease-out;}
|
||
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* Variablen – werden von CTA-CSS verwendet */
|
||
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
|
||
|
||
|
||
/* Mobile: noch reduzierter */
|
||
@media (max-width:768px){
|
||
.page-title .energy-line-h3,
|
||
.page-title .energy-line-v3,
|
||
.page-title .energy-node5{display:none;}
|
||
}
|
||
</style>
|