body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .step { display: none; }
        .step.active { display: block; animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Die "Himmel & Sonne" Palette */
        .bg-sky-custom { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
        .text-sky-custom { color: #0284c7; }
        .bg-sun-yellow { background-color: #facc15; }
        .text-sun-yellow { color: #facc15; }
        .border-sun-yellow { border-color: #facc15; }
        
        .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }

		/* Custom Slider Styling */
		#rangeVerbrauch {
			-webkit-appearance: none;
			appearance: none;
			height: 12px; /* Dickerer Balken */
			background: #e2e8f0; /* slate-200 */
			border-radius: 10px;
			outline: none;
		}

		/* Der Schiebe-Knopf (Thumb) für Chrome, Safari, Edge */
		#rangeVerbrauch::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 28px;
			height: 28px;
			background: #0ea5e9; /* sky-500 */
			border: 4px solid white;
			border-radius: 50%;
			cursor: pointer;
			shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
			transition: all 0.2s ease;
		}

		#rangeVerbrauch::-webkit-slider-thumb:hover {
			transform: scale(1.2);
			background: #0284c7; /* sky-600 */
			box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
		}

		/* Der Schiebe-Knopf für Firefox */
		#rangeVerbrauch::-moz-range-thumb {
			width: 28px;
			height: 28px;
			background: #0ea5e9;
			border: 4px solid white;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		/* --- Basis & Glass-Effekt --- */
		.glass-card {
			background: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			border: 1px solid rgba(255, 255, 255, 0.4);
			transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		}

		/* --- Spezielle Farben --- */
		.bg-sky-custom {
			background-color: #0369a1; /* Ein sattes Blau, passend zu Stuttgart Netze / Hager */
		}

		.bg-sun-yellow {
			background-color: #facc15;
		}

		/* --- Interaktive Karten-Effekte --- */
		#systeme .glass-card:hover {
			transform: translateY(-10px);
			background: rgba(255, 255, 255, 0.95);
			box-shadow: 0 25px 50px -12px rgba(3, 105, 161, 0.15);
		}

		/* Spezial-Stil für die Hager-Empfehlung */
		.border-sky-500\/20 {
			border-color: rgba(14, 165, 233, 0.2);
		}

		/* --- Animationen für Icons --- */
		.group:hover .group-hover\:rotate-6 {
			transform: rotate(6deg);
		}

		/* Sanfter Übergang für das Bild-Scaling */
		#systeme img {
			transition: transform 0.7s ease-in-out;
		}







/* Technische Eck-Klammern */
.tech-bracket-tl { border-top: 2px solid #0ea5e9; border-left: 2px solid #0ea5e9; width: 20px; height: 20px; position: absolute; top: -2px; left: -2px; }
.tech-bracket-br { border-bottom: 2px solid #0ea5e9; border-right: 2px solid #0ea5e9; width: 20px; height: 20px; position: absolute; bottom: -2px; right: -2px; }

/* Scanline Effekt für Bilder */
.scanline-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(14, 165, 233, 0.05) 50%);
    background-size: 100% 4px;
    pointer-events: none;
}

/* Monospace Daten-Look */
.data-label { font-family: 'monospace'; font-size: 10px; text-transform: uppercase; color: #64748b; letter-spacing: 0.1em; }
.data-value { font-family: 'monospace'; font-size: 14px; font-weight: bold; color: #f8fafc; }




















.pv-system-section {
  padding: 100px 20px;
  background: #f7f8fb;
}

.container {
  max-width: 1200px;
  margin: auto;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 36px;
  color: #1d2b53;
  margin-bottom: 15px;
}

.section-header p {
  font-size: 18px;
  color: #5b6470;
  max-width: 650px;
  margin: auto;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 30px;
}

.system-card {
  background: white;
  padding: 35px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.system-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.system-card .icon {
  font-size: 34px;
  margin-bottom: 15px;
}

.system-card h3 {
  font-size: 20px;
  color: #1d2b53;
  margin-bottom: 10px;
}

.system-card p {
  color: #606975;
  font-size: 15px;
  line-height: 1.6;
}

.system-trust {
  text-align: center;
  margin-top: 40px;
  color: #6c7380;
}

.system-cta {
  text-align: center;
  margin-top: 40px;
}

.cta-primary {
  display: inline-block;
  background: #ffb400;
  color: #1d2b53;
  padding: 16px 32px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.cta-primary:hover {
  background: #ffa200;
}






















.brand-promise-section {
  padding: 100px 20px;
  background: white;
}

.brand-header {
  text-align: center;
  max-width: 700px;
  margin: auto;
  margin-bottom: 60px;
}

.brand-header h2 {
  font-size: 36px;
  color: #1d2b53;
  margin-bottom: 15px;
}

.brand-header p {
  font-size: 18px;
  color: #5f6773;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 40px;
}

.brand-card {
  background: #f7f8fb;
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.brand-card.highlight {
  background: #1d2b53;
  color: white;
}

.brand-card.highlight h3,
.brand-card.highlight .brand-sub {
  color: white;
}

.brand-icon {
  font-size: 32px;
  margin-bottom: 15px;
}

.brand-card h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.brand-sub {
  font-weight: 600;
  color: #ffb400;
  margin-bottom: 20px;
}

.brand-card ul {
  padding-left: 18px;
}

.brand-card li {
  margin-bottom: 10px;
  font-size: 15px;
}

.brand-result {
  text-align: center;
  max-width: 650px;
  margin: 50px auto 0;
  font-size: 17px;
  color: #4f5662;
}






























:root {
    --pv-blue: #004a99; /* Beispiel-Farbe für dein Branding */
    --text-dark: #333;
    --gap: 20px;
}

.pv-social-section {
    padding: 60px 20px;
    font-family: 'Segoe UI', sans-serif;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.pv-grid {
    display: grid;
    /* Erzeugt automatisch so viele Spalten wie Platz ist, mind. 250px breit */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap);
    max-width: 1200px;
    margin: 0 auto;
}

.pv-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1 / 1; /* Erzwingt Quadrate wie bei Insta */
    background: #eee;
    cursor: pointer;
}

.pv-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Der Hover-Effekt: Bild wird leicht größer und dunkler */
.pv-item:hover img {
    transform: scale(1.1);
}

.pv-item .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-item:hover .overlay {
    opacity: 1;
}

.btn-social {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 25px;
    background-color: var(--pv-blue);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
}

.cta-area {
    text-align: center;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
.solar-funnel{
padding:80px 20px;
background:#f5f7fb;
}

.funnel-container{
max-width:700px;
margin:auto;
background:white;
padding:50px;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
text-align:center;
}

.progress-bar{
height:6px;
background:#e5e8ef;
border-radius:10px;
margin-bottom:40px;
overflow:hidden;
}

.progress{
height:100%;
width:10%;
background:#ffb400;
transition:0.3s;
}

.step{
display:none;
}

.step.active{
display:block;
}

.options{
display:grid;
gap:15px;
margin-top:30px;
}

.option{
padding:18px;
border-radius:10px;
border:2px solid #e4e7ee;
background:white;
font-size:16px;
cursor:pointer;
transition:0.2s;
}

.option:hover{
border-color:#ffb400;
transform:translateY(-2px);
}

.cta-start{
margin-top:25px;
padding:16px 30px;
background:#ffb400;
border:none;
border-radius:10px;
font-weight:bold;
cursor:pointer;
}

.lead-form{
display:grid;
gap:15px;
margin-top:25px;
}

.lead-form input{
padding:14px;
border-radius:8px;
border:1px solid #dfe3ea;
}

.cta-submit{
padding:16px;
background:#ffb400;
border:none;
border-radius:10px;
font-weight:bold;
cursor:pointer;
}