AMPERION_Webpage/layouts/partials/page-title.html

<!-- page-title.html - AMPERION Stromkreis Animation -->
<section class="page-title">
  <!-- Animierter Stromkreis-Hintergrund -->
  <div class="circuit-bg" aria-hidden="true">
    <!-- Hauptstromkreis -->
    <svg class="circuit-main" viewBox="0 0 1200 400">
      <!-- Leiterbahnen -->
      <path class="circuit-path circuit-path-1" d="M0,200 L300,200 L350,150 L600,150 L650,200 L1200,200" />
      <path class="circuit-path circuit-path-2" d="M100,100 L400,100 L450,150 L750,150 L800,100 L1100,100" />
      <path class="circuit-path circuit-path-3" d="M200,300 L500,300 L550,250 L850,250 L900,300 L1200,300" />
      
      <!-- Verbindungspunkte -->
      <circle class="circuit-node" cx="300" cy="200" r="4"/>
      <circle class="circuit-node" cx="600" cy="150" r="4"/>
      <circle class="circuit-node" cx="400" cy="100" r="4"/>
      <circle class="circuit-node" cx="750" cy="150" r="4"/>
      <circle class="circuit-node" cx="500" cy="300" r="4"/>
      <circle class="circuit-node" cx="850" cy="250" r="4"/>
      
      <!-- Komponenten (Widerstände, Kondensatoren) -->
      <rect class="circuit-component" x="345" y="145" width="30" height="10" rx="2"/>
      <rect class="circuit-component" x="745" y="95" width="30" height="10" rx="2"/>
      <rect class="circuit-component" x="545" y="245" width="30" height="10" rx="2"/>
    </svg>
    
    <!-- Energie-Pulse -->
    <div class="energy-pulse pulse-1"></div>
    <div class="energy-pulse pulse-2"></div>
    <div class="energy-pulse pulse-3"></div>
    
    <!-- Blitz-Effekte -->
    <svg class="lightning-effect lightning-1" width="100" height="200" viewBox="0 0 100 200">
      <path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>
    <svg class="lightning-effect lightning-2" width="100" height="200" viewBox="0 0 100 200">
      <path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>
    
    <!-- Voltmeter Animation -->
    <div class="voltmeter">
      <svg width="120" height="120" viewBox="0 0 120 120">
        <circle cx="60" cy="60" r="55" fill="none" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <path class="voltmeter-needle" d="M60,60 L60,20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
        <circle cx="60" cy="60" r="5" fill="currentColor"/>
        <!-- Skala -->
        <text x="60" y="95" text-anchor="middle" font-size="14" fill="currentColor" opacity="0.5">AMPERION</text>
      </svg>
    </div>
    
    <!-- Schaltkreis-Symbole -->
    <div class="circuit-symbols">
      <div class="symbol symbol-diode">
        <svg width="40" height="40" viewBox="0 0 40 40">
          <path d="M10,20 L30,20 M20,10 L30,20 L20,30 Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
        </svg>
      </div>
      <div class="symbol symbol-transistor">
        <svg width="40" height="40" viewBox="0 0 40 40">
          <circle cx="20" cy="20" r="15" stroke="currentColor" stroke-width="1.5" fill="none"/>
          <path d="M5,20 L15,20 M25,15 L35,10 M25,25 L35,30" stroke="currentColor" stroke-width="1.5"/>
        </svg>
      </div>
      <div class="symbol symbol-capacitor">
        <svg width="40" height="40" viewBox="0 0 40 40">
          <path d="M10,20 L18,20 M22,20 L30,20 M18,10 L18,30 M22,10 L22,30" stroke="currentColor" stroke-width="1.5" fill="none"/>
        </svg>
      </div>
    </div>
    
    <!-- Elektrisches Feld (Partikel) -->
    <div class="electric-field">
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
      <span class="electron"></span>
    </div>
  </div>

  <!-- Content -->
  <div class="container1">
    <div class="row">
      <div class="col-md-12 text-center">
        <div class="service-title">
          <h1 class="title-electric">{{ .Title }}</h1>
        </div>
        {{ with .Params.description }}
          <p class="page-title-desc">{{ . }}</p>
        {{ end }}
      </div>
    </div>
  </div>
</section>

<style>
/* Page Title Base */
.page-title {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
}

.container1 {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Titel mit elektrischem Effekt */
.title-electric {
  color: #046e6e;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  margin: 0;
  position: relative;
  display: inline-block;
  animation: powerOn 2s ease-out;
  text-shadow: 0 0 30px rgba(4, 110, 110, 0.1);
}

.title-electric::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: electricGlitch 3s ease-in-out infinite;
  color: #F5A623;
  z-index: -1;
}

.page-title-desc {
  color: #666;
  font-size: 1.25rem;
  margin: 1rem auto 0;
  max-width: 700px;
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* Stromkreis-Animation */
.circuit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  pointer-events: none;
}

.circuit-main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.circuit-path {
  stroke: #046e6e;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawCircuit 3s ease-out forwards;
}

.circuit-path-2 {
  animation-delay: 0.5s;
}

.circuit-path-3 {
  animation-delay: 1s;
}

.circuit-node {
  fill: #F5A623;
  opacity: 0;
  animation: nodeGlow 2s ease-in-out infinite;
}

.circuit-component {
  fill: #046e6e;
  opacity: 0;
  animation: componentFade 1s ease-out 2s forwards;
}

/* Energie-Pulse */
.energy-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #F5A623;
  border-radius: 50%;
  box-shadow: 0 0 20px #F5A623;
  opacity: 0;
}

.pulse-1 {
  animation: energyFlow1 4s ease-in-out infinite;
}

.pulse-2 {
  animation: energyFlow2 4s ease-in-out infinite 1.3s;
}

.pulse-3 {
  animation: energyFlow3 4s ease-in-out infinite 2.6s;
}

/* Blitz-Effekte */
.lightning-effect {
  position: absolute;
  color: #F5A623;
  opacity: 0;
  animation: lightningStrike 6s ease-in-out infinite;
}

.lightning-1 {
  top: 10%;
  right: 15%;
  transform: scale(0.6) rotate(-15deg);
}

.lightning-2 {
  bottom: 20%;
  left: 10%;
  transform: scale(0.4) rotate(25deg);
  animation-delay: 3s;
}

/* Voltmeter */
.voltmeter {
  position: absolute;
  top: 20%;
  right: 5%;
  color: #046e6e;
  opacity: 0.3;
  animation: fadeIn 2s ease-out 1s forwards;
}

.voltmeter-needle {
  transform-origin: 60px 60px;
  animation: voltmeterSwing 4s ease-in-out infinite;
}

/* Schaltkreis-Symbole */
.circuit-symbols {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.symbol {
  position: absolute;
  color: #046e6e;
  opacity: 0;
  animation: symbolFloat 8s ease-in-out infinite;
}

.symbol-diode {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
}

.symbol-transistor {
  bottom: 25%;
  right: 25%;
  animation-delay: 2.5s;
}

.symbol-capacitor {
  top: 60%;
  left: 40%;
  animation-delay: 5s;
}

/* Elektrisches Feld (Elektronen) */
.electric-field {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.electron {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #F5A623;
  border-radius: 50%;
  opacity: 0.6;
  animation: electronFlow 10s linear infinite;
}

.electron:nth-child(1) { top: 20%; animation-delay: 0s; }
.electron:nth-child(2) { top: 30%; animation-delay: 1.2s; }
.electron:nth-child(3) { top: 40%; animation-delay: 2.4s; }
.electron:nth-child(4) { top: 50%; animation-delay: 3.6s; }
.electron:nth-child(5) { top: 60%; animation-delay: 4.8s; }
.electron:nth-child(6) { top: 70%; animation-delay: 6s; }
.electron:nth-child(7) { top: 80%; animation-delay: 7.2s; }
.electron:nth-child(8) { top: 35%; animation-delay: 8.4s; }

/* Animationen */
@keyframes powerOn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(4px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes electricGlitch {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 0.8; transform: translate(2px, -2px); }
  94% { opacity: 0.6; transform: translate(-1px, 1px); }
  96% { opacity: 0.8; transform: translate(1px, 0); }
}

@keyframes drawCircuit {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nodeGlow {
  0%, 100% { opacity: 0.3; r: 4; }
  50% { opacity: 1; r: 6; }
}

@keyframes componentFade {
  to {
    opacity: 0.6;
  }
}

@keyframes energyFlow1 {
  0% {
    left: 0;
    top: 50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    opacity: 0;
  }
}

@keyframes energyFlow2 {
  0% {
    left: 10%;
    top: 25%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 90%;
    top: 25%;
    opacity: 0;
  }
}

@keyframes energyFlow3 {
  0% {
    left: 20%;
    top: 75%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 80%;
    top: 75%;
    opacity: 0;
  }
}

@keyframes lightningStrike {
  0%, 95%, 100% {
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
  }
  96% {
    opacity: 0.8;
    transform: scale(1) rotate(-15deg);
  }
  97% {
    opacity: 0.4;
    transform: scale(0.8) rotate(-15deg);
  }
}

@keyframes voltmeterSwing {
  0%, 100% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(45deg);
  }
}

@keyframes symbolFloat {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes electronFlow {
  0% {
    left: -10px;
    transform: translateX(0);
  }
  100% {
    left: 100%;
    transform: translateX(10px);
  }
}

@keyframes fadeIn {
  to {
    opacity: 0.3;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .page-title {
    padding: 80px 0 60px;
  }
  
  .circuit-bg {
    opacity: 0.08;
  }
  
  .voltmeter,
  .lightning-effect,
  .symbol-transistor {
    display: none;
  }
  
  .title-electric {
    font-size: 2rem;
  }
  
  .page-title-desc {
    font-size: 1rem;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  
  .title-electric {
    text-shadow: 0 0 40px rgba(245, 166, 35, 0.3);
  }
  
  .circuit-path {
    stroke: #F5A623;
  }
  
  .circuit-bg {
    opacity: 0.25;
  }
  
  .page-title-desc {
    color: #aaa;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .title-electric,
  .circuit-path,
  .energy-pulse,
  .electron,
  .symbol,
  .voltmeter-needle {
    animation: none;
  }
  
  .circuit-path {
    stroke-dashoffset: 0;
  }
  
  .circuit-node,
  .circuit-component {
    opacity: 0.5;
  }
}
</style>