/* truckcharge.at — E-Ladepark Kapfenberg
   Hell und sachlich wie breitfuss.at/wingx.at, Akzent in Energie-Grün. */

:root{
  --tc:        #00a651;   /* Energie-Grün */
  --tc-dark:   #00803e;
  --tc-light:  #e8f7ef;
  --tc-ink:    #1c2b33;
  --tc-grau:   #5d6b73;
  --tc-line:   #e3e8ea;
  --tc-bg-alt: #f6f9fa;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tc-ink); background:#fff; line-height:1.65;
}
a{color:var(--tc-dark); text-decoration:none}
a:hover{color:var(--tc); text-decoration:underline}

/* ── Navigation ─────────────────────────────── */
.tc-nav{
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--tc-line); padding:.6rem 0;
}
.tc-logo{
  font-weight:800; letter-spacing:-.5px; font-size:1.35rem; color:var(--tc-ink);
}
.tc-logo .charge{color:var(--tc)}
.tc-sub{
  font-size:.7rem; text-transform:uppercase; letter-spacing:1.6px;
  color:var(--tc-grau); font-weight:600;
}
.tc-nav .nav-link{color:var(--tc-ink); font-weight:500; padding:.5rem .9rem}
.tc-nav .nav-link:hover,.tc-nav .nav-link.active{color:var(--tc); text-decoration:none}

/* ── Buttons ────────────────────────────────── */
.btn-tc{
  background:var(--tc); border:2px solid var(--tc); color:#fff; font-weight:600;
  border-radius:8px; padding:.5rem 1.4rem; transition:.18s;
}
.btn-tc:hover{background:var(--tc-dark); border-color:var(--tc-dark); color:#fff}
.btn-tc-outline{
  background:rgba(255,255,255,.92); border:2px solid #fff; color:var(--tc-ink);
  font-weight:600; border-radius:8px; padding:.5rem 1.4rem; transition:.18s;
}
.btn-tc-outline:hover{background:#fff; color:var(--tc-dark)}

/* ── Hero ───────────────────────────────────── */
.tc-hero{position:relative; padding:5.5rem 0 4rem; overflow:hidden; color:#fff}
.tc-hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.03);
}
.tc-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(10,26,20,.92) 0%,rgba(10,26,20,.72) 45%,rgba(0,166,81,.45) 100%);
}
.tc-hero .container{z-index:2}
.tc-hero h1{
  font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:800; line-height:1.12;
  letter-spacing:-1px; margin:.8rem 0 0; text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.tc-hero .lead{font-size:1.1rem; max-width:44rem; color:rgba(255,255,255,.93)}
.tc-badge{
  display:inline-block; background:rgba(0,166,81,.92); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:1.8px;
  padding:.4rem .9rem; border-radius:99px;
}
.tc-hero-facts{max-width:52rem}
.tc-fact{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:.9rem 1rem; backdrop-filter:blur(6px);
}
.tc-fact .zahl{
  display:block; font-size:1.7rem; font-weight:800; line-height:1.1; color:#fff;
}
.tc-fact .zahl small{font-size:.9rem; font-weight:700; opacity:.85}
.tc-fact .txt{font-size:.8rem; color:rgba(255,255,255,.85)}

/* ── Abschnitte ─────────────────────────────── */
.section{padding:4.2rem 0}
.tc-alt{background:var(--tc-bg-alt)}
.section-title{
  font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800;
  letter-spacing:-.6px; margin-bottom:.4rem;
}
.section-sub{color:var(--tc-grau); margin-bottom:1.4rem}

/* ── Karten ─────────────────────────────────── */
.feature-card{
  background:#fff; border:1px solid var(--tc-line); border-radius:14px;
  padding:1.6rem; transition:.18s;
}
.feature-card:hover{
  border-color:var(--tc); box-shadow:0 8px 28px rgba(0,166,81,.1);
  transform:translateY(-2px);
}
.feature-card .icon{
  font-size:1.9rem; color:var(--tc); display:block; margin-bottom:.7rem;
}
.feature-card h5{font-weight:700; margin-bottom:.5rem}
.feature-card p{color:var(--tc-grau); margin-bottom:0; font-size:.95rem}

.tc-card{
  background:#fff; border:1px solid var(--tc-line); border-radius:14px;
  overflow:hidden; height:100%; transition:.18s;
}
.tc-card:hover{
  border-color:var(--tc); box-shadow:0 8px 28px rgba(0,166,81,.1);
  transform:translateY(-2px);
}
.tc-card img{width:100%; height:190px; object-fit:cover; display:block}
.tc-card .body{padding:1.2rem 1.3rem}
.tc-card h5{font-weight:700; margin-bottom:.4rem; font-size:1.05rem}
.tc-card p{color:var(--tc-grau); font-size:.92rem; margin-bottom:0}

/* ── Live-Anzeige Ladepunkte ────────────────── */
.tc-live{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:700;
  font-size:.82rem; color:var(--tc-dark);
}
.tc-live .punkt{
  width:9px; height:9px; border-radius:50%; background:var(--tc);
  box-shadow:0 0 0 0 rgba(0,166,81,.6); animation:puls 2.2s infinite;
}
.tc-live.alt{color:#b26a00}
.tc-live.alt .punkt{background:#e8a33d; animation:none}
.tc-live.aus{color:var(--tc-grau)}
.tc-live.aus .punkt{background:#adb8bd; animation:none}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(0,166,81,.55)}
  70%{box-shadow:0 0 0 9px rgba(0,166,81,0)}
  100%{box-shadow:0 0 0 0 rgba(0,166,81,0)}
}

.tc-gruppe{
  background:#fff; border:1px solid var(--tc-line); border-left:4px solid var(--tc);
  border-radius:12px; padding:1.1rem 1.3rem;
}
.tc-gruppe .kw{font-weight:800; font-size:1.15rem}
.tc-gruppe .sub{color:var(--tc-grau); font-size:.85rem}
.tc-gruppe .quote{
  font-size:1.5rem; font-weight:800; color:var(--tc-dark);
  background:var(--tc-light); border-radius:99px; padding:.3rem 1.1rem;
  white-space:nowrap;
}

.tc-lp-liste{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:.7rem;
}
.tc-lp{
  display:flex; align-items:center; gap:.9rem; background:#fff;
  border:1px solid var(--tc-line); border-radius:11px; padding:.75rem .95rem;
}
.tc-lp .nr{
  width:38px; height:38px; flex:0 0 38px; border-radius:9px;
  background:var(--tc-bg-alt); border:1px solid var(--tc-line);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--tc-grau);
}
.tc-lp .info{flex:1 1 auto; min-width:0}
.tc-lp .info .kw{font-weight:700; font-size:.95rem; line-height:1.2}
.tc-lp .info .typ{color:var(--tc-grau); font-size:.78rem}
.tc-lp .zustand{flex:0 0 auto}

.pill{
  display:inline-block; font-size:.78rem; font-weight:700;
  padding:.3rem .75rem; border-radius:99px; white-space:nowrap;
}
.pill.frei      {background:#e4f7ec; color:#0b7a3e}
.pill.belegt    {background:#e8f0fb; color:#1c5aa8}
.pill.reserviert{background:#fff4e0; color:#96600c}
.pill.ausser    {background:#fdeaea; color:#b32b2b}
.pill.unbekannt {background:#eef1f2; color:var(--tc-grau)}

/* ── Karte (2-Klick) ───────────────────────── */
.tc-karte{
  border:1px solid var(--tc-line); border-radius:14px; overflow:hidden;
  background:var(--tc-bg-alt); min-height:420px;
  display:flex; align-items:center; justify-content:center;
}
.tc-karte .platzhalter{padding:2rem; text-align:center; max-width:26rem}
.tc-karte .platzhalter i{font-size:2.6rem; color:var(--tc); display:block; margin-bottom:.6rem}
.tc-karte .platzhalter p{color:var(--tc-grau)}
.tc-karte iframe{display:block}

/* ── Footer ─────────────────────────────────── */
.tc-footer{
  background:var(--tc-ink); color:rgba(255,255,255,.82);
  padding:3rem 0 2rem; margin-top:0;
}
.tc-footer .tc-logo{color:#fff}
.tc-footer h6{color:#fff; margin-bottom:.7rem}
.tc-footer a{color:rgba(255,255,255,.82)}
.tc-footer a:hover{color:var(--tc); text-decoration:none}
.tc-footer hr{border-color:rgba(255,255,255,.14); margin:2rem 0 1.2rem}

/* ── Rechtstexte ───────────────────────────── */
.rechtstext{max-width:52rem}
.rechtstext h2{
  font-size:1.15rem; font-weight:700; margin:2rem 0 .7rem; color:var(--tc-ink);
}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p,.rechtstext li{color:#3d4b52; font-size:.96rem}
.rechtstext ul{padding-left:1.3rem}

@media (max-width:991px){
  .tc-hero{padding:3.5rem 0 3rem}
  .tc-karte{min-height:320px}
}
@media (max-width:575px){
  .tc-lp-liste{grid-template-columns:1fr}
  .tc-gruppe .quote{font-size:1.25rem}
}

/* ── Technik-Tabelle (Ladeleistung je Fahrzeugtyp) ───────────── */
.tc-technik{
  background:#fff; border:1px solid var(--tc-line); border-radius:14px;
  overflow:hidden;
}
.tc-technik .zeile{
  display:grid; grid-template-columns:1.5fr 1fr .9fr; gap:1rem;
  padding:.95rem 1.2rem; align-items:center;
  border-bottom:1px solid var(--tc-line);
}
.tc-technik .zeile:last-child{border-bottom:0}
.tc-technik .zeile.kopf{
  background:var(--tc-bg-alt); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.6px; color:var(--tc-grau);
}
.tc-technik .klein{font-size:.84rem; color:var(--tc-grau)}
.tc-technik .wert{
  display:inline-block; font-weight:800; font-size:.95rem;
  background:var(--tc-bg-alt); color:var(--tc-ink);
  padding:.3rem .7rem; border-radius:8px; white-space:nowrap;
}
.tc-technik .wert.gut{background:var(--tc-light); color:var(--tc-dark)}

.tc-hinweis{
  background:linear-gradient(160deg,var(--tc-light) 0%,#fff 70%);
  border:1px solid var(--tc); border-radius:14px; padding:1.6rem;
}
.tc-hinweis i{font-size:2rem; color:var(--tc); display:block; margin-bottom:.6rem}
.tc-hinweis h5{font-weight:700; margin-bottom:.7rem}
.tc-hinweis p{font-size:.93rem; color:#3d4b52}

@media (max-width:767px){
  .tc-technik .zeile{grid-template-columns:1fr; gap:.3rem; padding:.9rem 1rem}
  .tc-technik .zeile.kopf{display:none}
  .tc-technik .zeile{border-bottom:1px solid var(--tc-line)}
}

.tc-hinweis-klein{
  background:var(--tc-bg-alt); border:1px solid var(--tc-line);
  border-left:4px solid var(--tc); border-radius:11px; padding:.9rem 1.2rem;
}
.tc-hinweis-klein p{font-size:.92rem; color:#3d4b52}

/* ── 360-Grad-Panorama ──────────────────────────────────────── */
#pano360{
  width:100%; height:460px; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.12); background:#0d1a14;
}
@media (max-width:767px){ #pano360{height:320px} }

/* Karte wird direkt eingebettet -> Platzhalter-Styles entfallen,
   die Hoehe kommt jetzt vom iframe selbst. */
.tc-karte{min-height:0; display:block}