/* muster.css — Panzer IT: eigenständiges Stylesheet für die Musterwebsite
   /handwerk/muster/ (fiktiver Betrieb "Elektro Nordlicht GmbH").
   Bewusst unabhängig von components.css/inner.css/kontakt.css etc. — die
   Musterwebsite tritt als eigene kleine Website auf und lädt nur base.css
   + animations.css als gemeinsame Grundlage (Tokens, Reset, .btn/.card/
   .section/.container/.eyebrow/.reveal). Farbwelt und Typografie sind mit
   der Hauptseite identisch (siehe base.css-Tokens), Header/Footer/Notdienst-
   Leiste sind eigenständige Komponenten dieser Musterwebsite. */

/* ==========================================================================
   Accessibility-Utilities
   ========================================================================== */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-4rem; left:var(--sp-2); z-index:400;
  background:var(--c-copper); color:#14110c; padding:.7em 1.2em;
  border-radius:8px; font-family:var(--font-display); font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:var(--sp-2); }

/* ==========================================================================
   Musterprojekt-Leiste — auf jeder Seite, klar abgesetzt vom eigentlichen
   Seiteninhalt, damit nie der Eindruck eines echten Betriebs entsteht.
   ========================================================================== */
.muster-bar{
  background:#0e1012; border-bottom:1px dashed var(--c-copper);
  font-size:.85rem;
}
.muster-bar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-2); padding-block:.6em;
}
.muster-bar p{ color:var(--c-muted); margin:0; }
.muster-bar strong{ color:var(--c-brass); }
.muster-bar a{
  color:var(--c-copper); font-family:var(--font-display); font-weight:600;
  white-space:nowrap;
}
.muster-bar a:hover, .muster-bar a:focus-visible{ color:var(--c-brass); }

/* ==========================================================================
   Site-Header (eigene, schlanke Variante — kein Warenkorb, kein Fixed-
   Transparenz-Verlauf, da diese Mini-Website kein full-bleed Hero-Bild hat)
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--c-base); border-bottom:1px solid var(--c-line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-block:var(--sp-2);
}
.en-logo{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--c-text); white-space:nowrap;
}
.en-logo svg{ flex:none; color:var(--c-copper); width:34px; height:34px; }
.en-logo em{ font-style:normal; color:var(--c-copper); }

.site-nav ul{ display:flex; align-items:center; gap:var(--sp-3); list-style:none; }
.site-nav a{
  position:relative; display:inline-block;
  font-family:var(--font-display); font-size:.92rem; font-weight:500;
  color:var(--c-text); opacity:.85; padding-block:.35em;
  transition:opacity .25s var(--ease), color .25s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--c-copper); transition:right .25s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible{ opacity:1; }
.site-nav a:hover::after, .site-nav a:focus-visible::after{ right:0; }
.site-nav a[aria-current="page"]{ opacity:1; color:var(--c-brass); }
.site-nav a[aria-current="page"]::after{ right:0; }

.site-header__actions{ display:flex; align-items:center; gap:var(--sp-3); }
.en-phone{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; color:var(--c-text);
  border:1px solid var(--c-line); border-radius:999px; padding:.55em 1.1em;
  transition:border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.en-phone svg{ width:16px; height:16px; color:var(--c-copper); flex:none; }
.en-phone:hover, .en-phone:focus-visible{ border-color:var(--c-copper); color:var(--c-copper); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:2.4rem; height:2.4rem; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; cursor:pointer; padding:0; align-items:center; flex:none;
}
.nav-toggle span{
  display:block; width:1.1rem; height:2px; background:var(--c-text);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; z-index:99;
    width:min(84vw,320px); height:100vh; height:100dvh;
    background:var(--c-panel); border-left:1px solid var(--c-line);
    box-shadow:-16px 0 40px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .4s var(--ease);
    padding:calc(var(--sp-2) + 4.5rem) var(--sp-4) var(--sp-4);
    overflow-y:auto;
  }
  .site-nav.open{ transform:translateX(0); }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
  .site-nav a{ font-size:1.1rem; }
  .site-nav a::after{ display:none; }
  .en-phone span{ display:none; }
}

/* ==========================================================================
   Notdienst-Leiste — farblich klar abgesetzt, sitzt direkt unter dem Header
   ========================================================================== */
.notdienst-bar{
  background:var(--c-copper); color:#14110c;
}
.notdienst-bar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6em; padding-block:.6em; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
}
.notdienst-bar a{ color:#14110c; text-decoration:underline; text-underline-offset:.15em; }

/* ==========================================================================
   Hero (Seiten-Hero, kompakt — analog zum inner.css-Muster der Hauptseite,
   hier eigenständig definiert)
   ========================================================================== */
.en-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--c-panel); border-bottom:1px solid var(--c-line);
  padding-block:clamp(3.5rem, 2.5rem + 5vw, 6rem);
}
.en-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 12% 20%, rgba(184,115,51,.2), transparent 55%),
    radial-gradient(circle at 88% 80%, rgba(62,107,107,.18), transparent 50%);
}
.en-hero__inner{ max-width:46rem; }
.en-hero__lead{ color:var(--c-muted); margin-top:var(--sp-2); max-width:44ch; font-size:clamp(1.05rem,1rem + .3vw,1.2rem); }
.en-hero h1{ margin-top:var(--sp-2); }
.en-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }

/* ==========================================================================
   Trust-Leiste (Vertrauenselemente) — mit deutlicher Platzhalter-Kennzeichnung
   ========================================================================== */
.en-trust{ border-block:1px solid var(--c-line); background:var(--c-panel); }
.en-trust__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  padding-block:var(--sp-4);
}
.en-badge{ text-align:center; position:relative; }
.en-badge__tag{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.1em; font-size:.62rem; color:var(--c-copper);
  background:rgba(184,115,51,.15); padding:.2em .6em; border-radius:999px;
  margin-bottom:.4em;
}
.en-badge__label{ font-family:var(--font-display); font-weight:600; color:var(--c-text); }

@media (max-width:640px){
  .en-trust__grid{ grid-template-columns:1fr; text-align:center; }
}

/* ==========================================================================
   Generisches Karten-Grid (Leistungen, Referenzen, Karriere, Team)
   ========================================================================== */
.en-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-top:var(--sp-5);
}
.en-card-icon{
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center; color:var(--c-copper);
  background:rgba(184,115,51,.12); border:1px solid var(--c-line);
  margin-bottom:var(--sp-2);
}
.en-card-icon svg{ width:26px; height:26px; }

/* ==========================================================================
   Feature-Liste (Häkchen) — eigenständige Kopie, da inner.css nicht geladen wird
   ========================================================================== */
.en-feature-list{
  list-style:none; display:flex; flex-direction:column; gap:.65em;
  margin-top:var(--sp-3); max-width:56ch;
}
.en-feature-list li{ position:relative; padding-left:1.8em; color:var(--c-text); }
.en-feature-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:.6em; height:.34em;
  border-left:2px solid var(--c-copper); border-bottom:2px solid var(--c-copper);
  transform:rotate(-45deg);
}

/* ==========================================================================
   Formulare (Kontakt, Bewerbung) — eigenständige Kopie im selben Stil wie
   die Hauptseite
   ========================================================================== */
.en-form{ margin-top:var(--sp-4); max-width:100%; }
.en-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-3); }
.en-form .form-row:first-child{ margin-top:0; }
.en-form .form-field{ display:flex; flex-direction:column; gap:.45em; margin-top:var(--sp-3); min-width:0; }
.en-form .form-row .form-field{ margin-top:0; }
.en-form > .form-field:first-child{ margin-top:0; }
.en-form label{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--c-text); }
.en-form .form-optional{ font-weight:400; color:var(--c-muted); font-size:.85em; }
.en-form input, .en-form select, .en-form textarea{
  width:100%; box-sizing:border-box; padding:.85em 1em; border-radius:10px;
  border:1px solid var(--c-line); background:var(--c-base); color:var(--c-text);
  font-family:var(--font-body); font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.en-form input:focus-visible, .en-form select:focus-visible, .en-form textarea:focus-visible{
  outline:none; border-color:var(--c-copper); box-shadow:0 0 0 3px rgba(184,115,51,.22);
}
.en-form textarea{ min-height:130px; resize:vertical; }
.en-form input[type="file"]{ padding:.6em; cursor:pointer; }
.en-form .form-consent{ display:flex; align-items:flex-start; gap:.7em; margin-top:var(--sp-4); max-width:60ch; }
.en-form .form-consent input{ width:auto; flex:none; margin-top:.2em; accent-color:var(--c-copper); cursor:pointer; }
.en-form .form-consent label{ color:var(--c-muted); font-size:.9rem; line-height:1.5; cursor:pointer; font-weight:400; }
.en-form__submit{ margin-top:var(--sp-4); }
.muster-demo-note{
  margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border:1px dashed var(--c-copper); border-radius:10px;
  background:rgba(184,115,51,.08); color:var(--c-brass); font-size:.9rem;
}
@media (max-width:640px){
  .en-form .form-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Öffnungszeiten-Tabelle
   ========================================================================== */
.en-hours{ margin-top:var(--sp-3); max-width:26rem; }
.en-hours tr{ border-top:1px solid var(--c-line); }
.en-hours tr:last-child{ border-bottom:1px solid var(--c-line); }
.en-hours th, .en-hours td{ text-align:left; padding:.6em 0; font-weight:400; }
.en-hours th{ color:var(--c-muted); font-weight:500; }
.en-hours td{ color:var(--c-text); font-family:var(--font-display); }

/* ==========================================================================
   CTA-Panel
   ========================================================================== */
.en-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--c-panel); border-block:1px solid var(--c-line);
}
.en-cta::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,115,51,.22), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(217,165,102,.14), transparent 50%);
}
.en-cta__inner{
  position:relative; z-index:1; text-align:center;
  padding-block:clamp(3rem,6vw,5rem); max-width:44rem; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.en-cta__inner p{ color:var(--c-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--c-panel); border-top:1px solid var(--c-line); margin-top:var(--sp-7); }
.site-footer__inner{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--sp-5);
  padding-block:var(--sp-6);
}
.footer-heading{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; color:var(--c-brass); margin-bottom:var(--sp-2);
}
.footer-col p{ color:var(--c-muted); font-size:.92rem; max-width:32ch; }
.footer-col address{ font-style:normal; color:var(--c-muted); line-height:1.9; }
.footer-col address a{ color:var(--c-text); }
.footer-col address a:hover{ color:var(--c-copper); }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6em; }
.footer-col ul a{ color:var(--c-muted); transition:color .25s var(--ease); }
.footer-col ul a:hover, .footer-col ul a:focus-visible{ color:var(--c-copper); }
.site-footer__bottom{ border-top:1px solid var(--c-line); padding-block:var(--sp-3); }
.site-footer__bottom p{ color:var(--c-muted); font-size:.82rem; text-align:center; max-width:70ch; margin-inline:auto; }

@media (max-width:900px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .footer-col--brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-footer__inner{ grid-template-columns:1fr; gap:var(--sp-4); }
}

/* ==========================================================================
   Sticky "Jetzt anrufen" — mitscrollend, wie sticky-cta der Hauptseite
   ========================================================================== */
.sticky-cta{
  position:fixed; right:var(--sp-3); bottom:var(--sp-3); z-index:90;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9em 1.5em; border-radius:999px;
  background:var(--c-copper); color:#14110c;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  box-shadow:0 10px 28px rgba(184,115,51,.35);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
}
.sticky-cta.show{ opacity:1; transform:none; pointer-events:auto; }
.sticky-cta:hover, .sticky-cta:focus-visible{ background:var(--c-brass); }

@media (prefers-reduced-motion:reduce){
  .site-nav, .nav-toggle span, .sticky-cta{ transition:none; }
}