/* Hagelschaden-Konfigurator — Elektrotechnik Wagner GmbH
   ------------------------------------------------------------------
   Nachgebaut nach dem echten Auftritt (elektrotechnik-wagnergmbh.de),
   ausgemessen am 30.08.2026:

     Kopfbalken            schwarz, klebt oben
     Abschnittstitel       VERSALIEN, gesperrt, #1E2D3B, mittig,
                           darunter ein gruener Balken 118 x 6
     Kartenflaeche         #F7F7F7
     Zweite Ueberschrift   #3D5975
     Gruen (#5DB12F)       nur als Akzent, nie als Flaeche
     Schrift               Avenir Heavy fuer Titel, Avenir Light fuer Text
   ------------------------------------------------------------------ */

:root{
  --schwarz:    #000000;
  --marine:     #1E2D3B;   /* Abschnittstitel */
  --stahl:      #3D5975;   /* zweite Ebene */
  --gruen:      #5DB12F;   /* Akzent */
  --gruen-dunkel:#4A8F26;
  --gruen-hell: #EEF7E9;
  --flaeche:    #F7F7F7;   /* Kartengrund */
  --rand-grau:  #E4E6E4;
  --text:       #2A3239;
  --grau:       #5F6360;
  --rot:        #C62828;
  --weiss:      #FFFFFF;

  --kopf-schrift: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --text-schrift: "Avenir Next", "Avenir", Helvetica, "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;           /* Wagner arbeitet mit kantigen Formen */
  --rand: 1px solid var(--rand-grau);
  --kopf-hoehe: 72px;
}

*{box-sizing:border-box}
/* Muss VOR allen display-Regeln stehen: sonst ueberstimmt .feld{display:block}
   das hidden-Attribut und verborgene Felder tauchen doch auf.               */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--weiss); color:var(--text);
  font-family:var(--text-schrift); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--kopf-schrift); font-weight:800; line-height:1.15; margin:0 0 .5em}
a{color:var(--gruen-dunkel)}
a:hover{color:var(--gruen)}
hr.trenner{border:0; border-top:var(--rand); margin:1.75rem 0}

/* ============================================================ Kopfbalken */
.kopf{
  position:sticky; top:0; z-index:50;
  height:var(--kopf-hoehe); background:var(--schwarz);
  display:flex; align-items:center; padding:0 1.25rem;
}
.marke-link{display:inline-flex; align-items:center; line-height:0}
.marke{height:44px; width:auto; display:block}
@media (min-width:768px){
  :root{--kopf-hoehe:92px}
  .kopf{padding:0 2.5rem}
  .marke{height:60px}
}

/* ================================================================= Hero */
.held{
  position:relative; isolation:isolate;
  min-height:clamp(320px, 52vh, 480px);
  display:flex; flex-direction:column; justify-content:center;
  padding:3rem 1.25rem 4rem; overflow:hidden;
}
.held-bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
/* Dunkler Verlauf, damit weisse Schrift auf jedem Bild sitzt */
.held::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,.62) 100%);
}
.held-text{max-width:820px; margin:0 auto; text-align:center; color:var(--weiss)}
.held-text h1{
  font-size:clamp(1.9rem, 7vw, 3.4rem);
  letter-spacing:.03em;         /* die Wix-Headline ist gesperrt */
  margin:0 0 .6em; color:var(--weiss);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.held-lead{
  font-size:clamp(1rem, 2.6vw, 1.2rem); margin:0;
  color:rgba(255,255,255,.94); letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
/* Abwaertspfeil wie auf der Startseite */
.held-pfeil{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:34px; height:34px; z-index:1;
  background:no-repeat center/contain
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 10l12 12 12-12' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.9;
}

/* =============================================================== Huelle */
.huelle{max-width:860px; margin:0 auto; padding:2.5rem 1.25rem 3rem}
.einleitung{margin-bottom:2.25rem; text-align:center}
.lead{font-size:1.06rem; margin:0 0 .8rem}
.lead-klein{font-size:.95rem; color:var(--grau); margin:0}
.klein{font-size:.85rem; color:var(--grau)}
.untertitel-mitte{text-align:center; color:var(--grau); font-size:.95rem; margin:-.5rem 0 1.25rem}

/* ================================================== Abschnittsueberschrift
   Das Erkennungsmerkmal der Wagner-Seite: Versalien, gesperrt, mittig,
   darunter ein kurzer gruener Balken.                                     */
.abschnitt-titel{
  text-align:center; color:var(--marine);
  font-size:clamp(1.5rem, 5.2vw, 2.3rem);
  text-transform:uppercase; letter-spacing:.09em;
  margin:0 0 2.4rem; position:relative; padding-bottom:1.1rem;
}
.abschnitt-titel::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:118px; height:6px; background:var(--gruen);
}

/* ================================================================ Karte */
.karte{
  background:var(--flaeche); border:var(--rand); border-radius:var(--radius);
  padding:2rem 1.25rem; margin:0 0 1.25rem;
}
.karte legend{padding:0; float:left; width:100%}
fieldset{border:0; margin:0; min-width:0}

/* =============================================================== Felder */
.feld{display:block; margin:0 0 1.3rem}
.feld:last-child{margin-bottom:0}
.etikett{
  display:block; font-family:var(--kopf-schrift); font-weight:800;
  font-size:.95rem; color:var(--stahl); margin-bottom:.45rem;
}
.etikett em{color:var(--gruen-dunkel); font-style:normal}
.hinweis{display:block; font-size:.85rem; color:var(--grau); margin-top:.4rem; line-height:1.5}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select{
  width:100%; font:inherit; font-size:1.05rem; color:var(--text);
  padding:.85rem .9rem; border:1.5px solid var(--rand-grau); border-radius:var(--radius);
  background:var(--weiss); min-height:54px;
  appearance:none; -webkit-appearance:none;
}
/* Die eingebauten Zahlen-Pfeilchen sind auf dem Handy unbrauchbar und
   kollidieren mit den Einheiten "Wp" und "m".                            */
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233D5975' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px;
  padding-right:2.6rem;
}
input:focus,select:focus{outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(93,177,47,.22)}
input.fehler,select.fehler{border-color:var(--rot); box-shadow:0 0 0 3px rgba(198,40,40,.14)}
::placeholder{color:#A8ADA8}

.zeile{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.zeile .feld.schmal{max-width:9rem}
@media (max-width:420px){ .zeile{grid-template-columns:1fr} }

.mit-einheit{position:relative; display:block}
.mit-einheit i{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  color:var(--grau); font-style:normal; font-size:.95rem; pointer-events:none;
}
.mit-einheit input{padding-right:3rem}

/* ====================================================== Haken / Auswahl */
.gruppe{border:0; padding:0}
.gruppe legend.etikett{margin-bottom:.6rem}
.haken{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem; margin-bottom:.5rem; min-height:54px;
  border:1.5px solid var(--rand-grau); border-radius:var(--radius);
  background:var(--weiss); cursor:pointer; font-size:.98rem; line-height:1.5;
}
.haken:last-child{margin-bottom:0}
.haken input{width:22px; height:22px; margin:.2rem 0 0; accent-color:var(--gruen); flex:0 0 auto}
.haken:has(input:checked){border-color:var(--gruen); background:var(--gruen-hell)}
.haken.pflicht{background:var(--weiss)}

.quote{
  margin:.25rem 0 1.3rem; padding:.75rem .9rem; border-radius:var(--radius);
  background:var(--weiss); border-left:4px solid var(--gruen);
  color:var(--marine); font-size:.92rem; font-weight:700;
}
.quote.warn{border-left-color:var(--rot); color:var(--rot)}

/* =========================================================== Unterblock */
.unterblock{
  margin-top:1.75rem; padding:1.25rem 1rem 1.1rem; border-radius:var(--radius);
  background:var(--weiss); border:var(--rand); border-top:3px solid var(--gruen);
}
.unterblock-titel{
  margin:0 0 1.1rem; font-family:var(--kopf-schrift); font-weight:800;
  font-size:.9rem; color:var(--stahl);
  text-transform:uppercase; letter-spacing:.07em;
}
.unterblock .feld:last-of-type{margin-bottom:0}

/* =============================================================== Fotos */
.ablage{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
  padding:2.25rem 1rem; border:2px dashed var(--rand-grau); border-radius:var(--radius);
  background:var(--weiss); cursor:pointer;
}
.ablage:hover{border-color:var(--gruen); background:var(--gruen-hell)}
.ablage input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ablage-icon{
  width:52px; height:52px; border-radius:50%; background:var(--gruen); color:#fff;
  display:grid; place-items:center; font-size:1.9rem; line-height:1; font-weight:300;
}
.ablage-text{font-family:var(--kopf-schrift); font-weight:800; color:var(--marine)}

/* Schmale Variante fuer das freiwillige Datenblatt (Schritt 1) - soll neben
   dem grossen Foto-Feld in Schritt 4 nicht wie eine zweite Pflicht wirken. */
.ablage.schmal{flex-direction:row; justify-content:center; padding:1rem; gap:.7rem}
.ablage.schmal .ablage-icon{width:34px; height:34px; font-size:1.3rem}
.ablage.schmal .ablage-text{font-size:.95rem}
.datei-zeile{
  margin:.55rem 0 0; padding:.5rem .7rem; border-radius:var(--radius);
  background:var(--gruen-hell); color:var(--gruen-dunkel);
  font-size:.9rem; font-weight:700; word-break:break-all;
}
/* Kennzeichnet freiwillige Bloecke, damit niemand unnoetig stockt. */
.freiwillig{
  display:inline-block; margin-left:.45rem; padding:.1rem .45rem;
  border-radius:999px; background:var(--flaeche); border:var(--rand);
  color:var(--grau); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
}
.galerie{list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem}
.galerie li{position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:var(--rand)}
.galerie img{width:100%; height:100%; object-fit:cover; display:block}
.galerie button{
  position:absolute; top:4px; right:4px; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(0,0,0,.7); color:#fff; font-size:1rem; line-height:1; cursor:pointer;
}

/* ========================================================== Fortschritt */
.fortschritt ol{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem;
  list-style:none; margin:0 0 1.75rem; padding:0;
}
.fortschritt li{display:flex; flex-direction:column; align-items:center; gap:.4rem; position:relative}
.fortschritt li::before{
  content:""; position:absolute; top:16px; left:-50%; width:100%; height:2px;
  background:var(--rand-grau); z-index:0;
}
.fortschritt li:first-child::before{display:none}
.fortschritt li.fertig::before, .fortschritt li.ist::before{background:var(--gruen)}
.punkt{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--weiss); border:2px solid var(--rand-grau); color:var(--grau);
  font-family:var(--kopf-schrift); font-weight:800; font-size:.9rem;
}
.fortschritt li.ist .punkt{border-color:var(--marine); color:var(--marine)}
.fortschritt li.fertig .punkt{background:var(--gruen); border-color:var(--gruen); color:var(--weiss); font-size:0}
.fortschritt li.fertig .punkt::after{content:"✓"; font-size:1rem}
.wort{font-size:.72rem; color:var(--grau); text-align:center; letter-spacing:.05em; text-transform:uppercase}
.fortschritt li.ist .wort{color:var(--marine); font-weight:700}

/* ================================================================ Hilfe */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fehlerbox{
  margin:0 0 1rem; padding:.9rem 1rem; border-radius:var(--radius);
  background:#FDECEC; border-left:4px solid var(--rot); color:var(--rot); font-size:.95rem;
}

/* ============================================================ Steuerung */
.steuerung{display:flex; gap:.75rem; flex-direction:column-reverse}
@media (min-width:520px){ .steuerung{flex-direction:row; justify-content:space-between} }
.knopf{
  font-family:var(--kopf-schrift); font-weight:800; font-size:.98rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding:1.1rem 1.75rem; min-height:58px; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer; width:100%;
  transition:background .15s, border-color .15s, color .15s;
}
@media (min-width:520px){ .knopf{width:auto; min-width:12rem} .knopf.haupt{margin-left:auto} }
.knopf.haupt{background:var(--gruen); color:var(--weiss)}
.knopf.haupt:hover:not(:disabled){background:var(--gruen-dunkel)}
.knopf.haupt:disabled{background:var(--rand-grau); color:var(--grau); cursor:progress}
.knopf.zweit{background:transparent; color:var(--stahl); border-color:var(--rand-grau)}
.knopf.zweit:hover{border-color:var(--stahl); color:var(--marine)}

/* ================================================================ Danke */
.danke{text-align:center}
.haken-gross{
  width:76px; height:76px; margin:0 auto 1.25rem; border-radius:50%;
  background:var(--gruen); color:#fff; display:grid; place-items:center; font-size:2.5rem;
}
.ablauf{text-align:left; max-width:34rem; margin:.5rem auto 1.5rem; padding-left:1.25rem}
.ablauf li{margin-bottom:.6rem}

/* ================================================================= Fuss */
.fuss{
  background:var(--schwarz); color:rgba(255,255,255,.72);
  padding:2.75rem 1.25rem; text-align:center; font-size:.92rem;
}
.fuss-marke{height:44px; width:auto; margin:0 auto 1.25rem; display:block; opacity:.95}
.fuss strong{color:var(--weiss); font-family:var(--kopf-schrift); font-weight:800;
              letter-spacing:.04em; text-transform:uppercase; font-size:.95rem}
.fuss p{margin:0 0 .85rem}
.fuss p:last-child{margin-bottom:0}
.fuss a{color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:3px}
.fuss a:hover{color:var(--gruen)}
/* Textlinks auf Daumengroesse */
.fuss a, .haken.pflicht a{display:inline-block; padding:.4rem .1rem; min-height:44px; line-height:2}

@media print{ .fortschritt,.steuerung,.held,.kopf{display:none} }