/* ==========================================================================
   HELD Elektrotechnik – Mobile-Layer (mobile.css, wird nach style.css geladen)
   Herkunft: Mobile-Update v3, zusammengeführt mit dem Design 2.x (elektro-held.de-Look):
   runde Ecken statt Fase, Montserrat/Open Sans, Rot #B71C1C. Das Button-System steht
   zentral in style.css („Buttons“) – hier nur, was mobil dazukommt.
   Enthält: Kopf mit Telefon-Button, Hero mit Illustration, Anliegen-Finder, Wisch-Karten
   mit Punkten, Sticky-Leiste, dunkler Kontaktabschnitt mit Direkt-Kacheln, Reveal,
   Footer-Akkordeon, Formulare 16 px.
   ========================================================================== */

/* ---- 1. Wisch-Listen dürfen ihre Eltern nie verbreitern ---- */
.held-hero-grid > *,.held-two > *,.held-kontakt > *,.held-band .held-wrap > *,.held-wrap > *{min-width:0}
.held-trust,.held-cards,.held-quotes,.held-orte,.held-chips,.held-mitglied ul{min-width:0}
@media(max-width:640px){
  .held-trust,.held-cards,.held-quotes,.held-orte,.held-chips{max-width:calc(100% + 2 * var(--pad))}
}

/* ---- 2. Kopfbereich: Telefon-Button nur mobil, Burger nur Icon ---- */
.held-hbtn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--rot);color:#fff;border-radius:50%;margin-left:auto;text-decoration:none}
.held-hbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 3. Hero-Illustration (nur mobil sichtbar) ---- */
.held-hero-illu{display:none}
.held-hero-illu svg{width:100%;height:auto;display:block}
.held-hero-illu .flow{stroke:var(--rot);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:6 8;animation:held-flow 1.6s linear infinite}
.held-hero-illu .flow.slow{animation-duration:2.4s}
.held-hero-illu .line{stroke:var(--anthrazit);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.held-hero-illu .fill{fill:var(--anthrazit)}
.held-hero-illu .glass{fill:#fff}
.held-hero-illu .sun{fill:var(--rot)}
.held-hero-illu .pulse{animation:held-pulse 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes held-flow{to{stroke-dashoffset:-28}}
@keyframes held-pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}

/* ---- 4. Anliegen-Finder ---- */
.held-finder{background:#fff;padding:1.5rem 1.5rem 1.6rem;border-radius:var(--r);box-shadow:var(--schatten)}
.held-sec:not(.held-alt) .held-finder{background:var(--hell);box-shadow:none}
.held-finder h2{font-size:1.45rem;margin-bottom:.3rem}
.held-finder .held-finder-hint{color:var(--graphit);margin:0 0 1rem;font-size:.95rem}
.held-finder-step{display:none}
.held-finder-step.is-on{display:block}
.held-finder-q{font-weight:700;margin:0 0 .7rem;display:flex;align-items:center;gap:.55rem}
.held-finder-q .n{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;flex:none;border-radius:50%}
.held-chipbtns{display:flex;flex-wrap:wrap;gap:.5rem}
.held-chipbtns button{font:inherit;font-weight:600;font-size:.92rem;line-height:1.25;padding:.7rem 1rem;min-height:44px;background:#fff;color:var(--ink);border:1.5px solid #8A9099;border-radius:var(--rb);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s} /* Rand bewusst kräftig: weiße Chips auf weißer Karte brauchen einen sichtbaren Rand (Kontrast > 3:1) */
.held-chipbtns button:hover{border-color:var(--rot);color:var(--rot)}
.held-chipbtns button.is-sel,.held-chipbtns button[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:#fff}
.held-finder-back{background:none;border:0;padding:.75rem 0;min-height:44px;margin-top:.5rem;font:inherit;font-size:.9rem;color:var(--graphit);cursor:pointer;text-decoration:underline}
.held-finder-result{animation:held-in .35s ease}
.held-finder-result h3{margin:.25rem 0 .4rem;font-size:1.2rem;color:var(--rot)}
.held-finder-result p{color:var(--ink);margin:0 0 .75rem}
.held-finder-result .held-finder-links{display:flex;flex-wrap:wrap;gap:.1rem 1rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.95rem}
.held-finder-result .held-finder-links a{display:inline-block;padding:.55rem 0;color:var(--rot);font-weight:600}
.held-finder-result .held-actions{display:flex;flex-wrap:wrap;gap:.6rem}
@keyframes held-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.held-finder-progress{display:flex;gap:.35rem;margin-bottom:1rem}
.held-finder-progress i{flex:1;height:4px;border-radius:2px;background:var(--linie)}
.held-finder-progress i.on{background:var(--rot)}

/* ---- 5. Wisch-Karten: Punkte-Anzeige ---- */
.held-dots{display:none;justify-content:center;gap:6px;margin-top:.9rem}
.held-dots i{width:7px;height:7px;background:#C9C9C9;border-radius:50%;transition:background-color .2s,transform .2s}
.held-dots i.on{background:var(--rot);transform:scale(1.25)}

/* ---- 6. Dunkler Kontaktabschnitt (.held-dark im Inhalt; ältere Seiten per :has in style.css) + Direkt-Kacheln ---- */
.held-sec.held-dark{background:var(--anthrazit);color:#fff}
.held-sec.held-dark h2,.held-sec.held-dark h3{color:#fff}
.held-sec.held-dark h2 em{color:var(--ink);background:var(--hell);padding:0 .3em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.held-sec.held-dark .held-lead,.held-sec.held-dark p{color:#E6E7E9}
.held-sec.held-dark .held-kcard{background:#fff;color:var(--ink);box-shadow:none}
.held-sec.held-dark .held-kcard h3{color:var(--ink)}
.held-sec.held-dark .held-kcard p,.held-sec.held-dark .held-kcard dd{color:var(--ink)}
.held-sec.held-dark .held-kcard dt{color:var(--graphit)}
.held-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.25rem 0 0;padding:0;list-style:none}
.held-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:84px;padding:.75rem .5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;text-align:center;transition:background-color .15s}
.held-quick a:hover{background:rgba(255,255,255,.16)}
.held-quick a.is-rot{background:var(--rot);border-color:var(--rot)}
.held-quick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.held-quick small{font-weight:400;color:rgba(255,255,255,.8);font-size:.78rem}

/* ---- 7. Sticky-Leiste (nur mobil, per JS eingeblendet) ---- */
.held-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--linie);grid-template-columns:1fr 1.4fr;gap:.6rem;transform:translateY(110%);transition:transform .25s ease}
.held-sticky.is-on{transform:none}
.held-sticky .held-btn{min-height:50px;width:100%;padding:.6rem .8rem;font-size:.85rem}
.held-sticky .held-btn-rot::before{content:none}

/* ---- 8. Reveal beim Scrollen ---- */
@media(prefers-reduced-motion:no-preference){
  .held-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .held-reveal.is-in{opacity:1;transform:none}
}

/* ---- 9. Footer-Akkordeon (mobil, per JS): Pill-Label wird zur vollen Zeile ---- */
.held-fcol h3[role="button"]{cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;margin:0!important;padding:.85rem 0;background:none;border-radius:0;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem;letter-spacing:.06em}
.held-fcol h3[role="button"]::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.held-fcol h3[aria-expanded="true"]::after{transform:rotate(225deg)}
.held-fcol h3[role="button"] + ul{display:none;padding-bottom:.75rem}
.held-fcol h3[aria-expanded="true"] + ul{display:block}

/* ==========================================================================
   Telefon-Layout (bis 640 px)
   ========================================================================== */
@media(max-width:640px){
  :root{--hh:60px;--pad:18px;--r:14px}
  body{font-size:16px;line-height:1.65}
  body.has-sticky{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .held-mobile-hide{display:none!important}
  .held-mobile-only{display:block}
  h1{font-size:1.85rem;line-height:1.14}
  h2{font-size:1.5rem}
  h3{font-size:1.1rem;hyphens:manual}

  /* Kopf */
  .held-topbar{display:none}
  .held-header .held-wrap{min-height:60px;gap:.6rem}
  .held-logo img{height:38px}
  .held-hbtn{display:inline-flex}
  .held-burger{margin-left:0;border:0;padding:.5rem;width:44px;height:44px;justify-content:center}
  .held-burger .held-burger-label{display:none}
  .held-burger svg{width:26px;height:26px}
  .held-nav{padding:.25rem var(--pad) 6rem}
  .held-nav > ul > li > a{padding:.9rem 0;font-size:1.05rem}
  .held-nav .sub-menu a{padding:.7rem .75rem;font-size:.98rem}

  /* Hero: mobil ohne Foto und ohne Karte – heller Grund, Illustration (nur Startseite) */
  .held-hero{padding:22px 0 34px;background:var(--hell)}
  .held-hero::after{display:none}
  .held-hero-grid{display:block}
  .held-hero-text,body:not(.home) .held-hero-text{background:none;border-radius:0;padding:0;max-width:none;margin:0;text-align:left}
  .held-hero .held-hero-media,.held-hero .wp-block-image.held-hero-media{display:none}
  .held-hero-illu{display:block;margin:1.25rem 0 0}
  .held-hero h1,body:not(.home) .held-hero h1{font-size:1.85rem;margin-bottom:.7rem;max-width:none}
  .held-hero .held-lead,body:not(.home) .held-hero .held-lead{font-size:1rem;margin:0 0 1.15rem;color:var(--ink)}
  .held-hero .held-actions,body:not(.home) .held-hero .held-actions{flex-direction:column;gap:.6rem;justify-content:flex-start}
  .held-hero .held-actions .wp-block-button,.held-hero .held-actions .held-btn{width:100%}
  .held-hero .wp-block-button__link{width:100%;min-height:52px}

  /* Vertrauens-Chips: eine Zeile zum Wischen */
  .held-trust,body:not(.home) .held-hero .held-trust,.held-page-head .held-trust{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:.45rem;margin:0 calc(-1 * var(--pad)) 1rem;padding:0 var(--pad) .25rem;font-size:.8rem}
  .held-trust::-webkit-scrollbar{display:none}
  .held-trust li{flex:none;padding:.45rem .8rem;background:#fff;color:var(--ink);border:1px solid var(--linie);white-space:nowrap}
  .held-trust li::before{color:var(--rot)}

  /* Seitenkopf (FAQ, Angebot, Kontakt, Rechtsseiten): wie der mobile Hero */
  .held-page-head{padding:22px 0 28px;background:var(--hell)}
  .held-page-head::after{display:none}
  .held-page-head > .held-wrap{background:none;border-radius:0;width:auto;max-width:var(--w);padding:0 var(--pad);text-align:left}
  .held-page-head h1{font-size:1.85rem}
  .held-page-head .held-lead{margin-inline:0}
  .held-page-head .held-actions,.held-page-head .held-chips{justify-content:flex-start}
  .held-page-body{padding:32px 0}
  .held-prose-page h2{font-size:1.3rem}

  /* Abschnitte */
  .held-sec{padding:38px 0}
  .held-sec-head{margin-bottom:1rem}
  .held-sec-head h2{margin-bottom:.5rem}
  .held-sec-head p,.held-prose p{font-size:.98rem}
  .held-two,.held-kontakt{gap:1.75rem}
  .held-two h2,.held-kontakt h2{font-size:1.5rem}
  .held-actions:not(.held-inline){flex-direction:column;align-items:stretch}
  .held-actions:not(.held-inline) .wp-block-button{width:100%}
  .held-actions:not(.held-inline) .wp-block-button__link{width:100%;min-height:50px}
  .wp-block-button__link,.held-btn{font-size:.88rem;padding:.85rem 1.1rem}

  /* Vier gute Gründe: kompakte Zeilen mit Icon links */
  .held-reasons{grid-template-columns:1fr;gap:.6rem}
  .held-reasons li{display:grid;grid-template-columns:40px 1fr;column-gap:.9rem;align-items:start;padding:1rem 1.1rem;font-size:.92rem}
  .held-reasons li::before{grid-row:1 / span 2;margin:0}
  .held-reasons strong{font-size:1.02rem;margin-bottom:.2rem}

  /* Karten wischen */
  .held-cards,.held-cards.held-three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:.7rem;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 14px;scroll-padding:0 var(--pad)}
  .held-cards::-webkit-scrollbar{display:none}
  .held-cards .held-card{flex:0 0 76%;scroll-snap-align:start}
  .held-card:has(h3 a):hover{transform:none}
  .held-card > .held-media.held-icon{padding:1.1rem 1.1rem 0}
  .held-media.held-icon svg{width:44px;height:44px;padding:9px;border-radius:10px}
  .held-media,figure.wp-block-image.held-media{aspect-ratio:16/9}
  .held-card-body{padding:1rem 1.1rem 1.15rem;font-size:.92rem}
  .held-card h3{font-size:1.05rem}
  .held-card p{font-size:.9rem;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .held-card .held-more{font-size:.85rem;padding:.75rem 1.1rem;min-height:44px;display:inline-flex;align-items:center}
  .held-cards.held-tiles .held-card{flex-basis:80%}
  .held-cards.held-tiles .held-card-body{padding:1.15rem 1.2rem 1.3rem}
  .held-dots{display:flex;margin-top:.25rem}
  .held-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .25rem}
  .held-chips::-webkit-scrollbar{display:none}
  .held-chips li{flex:none}
  .held-chips a{padding:.8rem 1rem;min-height:44px;display:inline-flex;align-items:center}
  .held-chips-title{margin-top:1.4rem}

  /* Ablaufschritte */
  .held-steps{grid-template-columns:1fr;gap:.6rem}
  .held-steps li{display:grid;grid-template-columns:3rem 1fr;column-gap:.6rem;padding:1rem 1.1rem;font-size:.92rem}
  .held-steps li::before{grid-row:1 / span 2;font-size:1.7rem;margin:0}
  .held-steps.held-steps-col li{padding:1rem 1.1rem}
  .held-steps.held-steps-col li::before{position:static}

  /* CTA-Band */
  .held-band{padding:40px 0}
  .held-band .held-wrap{gap:1.25rem}
  .held-band h2{font-size:1.4rem}
  .held-band .held-actions{flex-direction:column;width:100%}
  .held-band .held-actions .wp-block-button{width:100%}
  .held-band .wp-block-button__link{width:100%}

  /* Panel, Orte, Kennzahlen, Zitate, FAQ */
  .held-panel,.held-job{padding:1.25rem 1.2rem 1.1rem}
  .held-panel li{font-size:.9rem}
  .held-orte{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.5rem;margin:.75rem calc(-1 * var(--pad)) 0;padding:0 var(--pad) .25rem}
  .held-orte::-webkit-scrollbar{display:none}
  .held-orte li{flex:none;padding:.6rem .85rem;font-size:.88rem;white-space:nowrap}
  .held-stats{padding:32px 0}
  .held-stats .held-wrap{grid-template-columns:1fr 1fr;padding:.5rem}
  .held-stat{padding:1rem .5rem}
  .held-stat .n{font-size:2rem}
  .held-stat .l{font-size:.95rem;margin-top:.35rem}
  .held-stat .s{font-size:.8rem}
  .held-quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:.7rem;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 14px;scroll-padding:0 var(--pad)}
  .held-quotes::-webkit-scrollbar{display:none}
  .wp-block-quote.held-quote{flex:0 0 84%;scroll-snap-align:start;padding:1.25rem 1.2rem}
  .wp-block-quote.held-quote p{font-size:.98rem}
  .held-faq{grid-template-columns:1fr;gap:.6rem}
  .held-faq .wp-block-details{padding:0 1.1rem}
  .held-faq summary{font-size:.98rem;padding:.9rem 0;min-height:56px}
  .held-faq summary::after{width:28px;height:28px}
  .held-faq .wp-block-details > :not(summary){font-size:.95rem}
  .held-faq-more{margin-top:1rem}

  /* Kontakt */
  .held-kcard,.held-form{padding:1.25rem 1.2rem 1.4rem}
  .held-kcard dd{font-size:1rem}
  .held-kcard dd a{display:inline-block;padding:.35rem 0}
  .held-quick{grid-template-columns:repeat(3,1fr)}

  /* Sticky-Leiste */
  .held-sticky{display:grid}

  /* Mitgliedslogos + Footer-Akkordeon */
  .held-mitglied{padding:28px 0 22px}
  .held-mitglied ul{gap:1.1rem 1.5rem;justify-content:center}
  .held-mitglied img{height:38px;max-width:140px}
  .held-mitglied p{margin-top:1.1rem;font-size:.8rem}
  .held-ftop{grid-template-columns:1fr;gap:0;padding:2rem 0 1rem}
  .held-fabout{padding-bottom:1.25rem}
  .held-fabout address a{display:inline-block;padding:.3rem 0}
  .held-footer .held-logo img{height:60px}
  .held-fcol h3{margin-bottom:0}
  .held-fcol li{margin:0}
  .held-fcol li a{display:inline-block;padding:.6rem 0;min-height:44px}
  .held-fbottom{flex-direction:column;gap:.5rem;padding:1.1rem 0 1.5rem}
  .held-fbottom ul{gap:0 1.1rem}
  .held-fbottom a{display:inline-block;padding:.65rem 0;min-height:44px}

  /* Formulare: 16 px verhindert das Hineinzoomen auf iOS */
  .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea,.wpcf7 select{font-size:16px;min-height:48px;padding:.8rem .9rem}
  .wpcf7 input[type=submit]{width:100%;min-height:52px}
  .wpcf7 .wpcf7-list-item label{padding:.55rem 0;min-height:44px;align-items:center}
  .wpcf7 input[type=checkbox],.wpcf7 input[type=radio]{width:22px;height:22px;margin-top:0}
  .wpcf7 input[type=file]{font-size:16px;min-height:44px}
}

/* Tablet: zwei bzw. drei Karten im Raster, sonst Desktop-Regeln */
@media(min-width:641px) and (max-width:1024px){
  .held-cards{grid-template-columns:repeat(2,1fr)}
  .held-cards.held-three{grid-template-columns:repeat(3,1fr)}
  .held-quick{max-width:520px}
}
@media(min-width:641px){.held-mobile-only{display:none}}