/* Warme Neuinterpretation der vorhandenen Laptop/Telefon/Google-Geometrie (Farbwelt Sand + Tannengrün).
   Die Beispiel-Website im Laptop behält ihre grünen Kundenfarben als Beispielfarbe.
   Alle Selektoren bleiben auf den Hero beschränkt. Keine Audio-Funktion hier. */
.einstieg-bild.ht-technik-panel{min-height:0;align-self:center;display:flex;flex-direction:column;padding:34px clamp(12px,2.2vw,32px) 34px 0;overflow:visible}
.ht-buehne{position:relative;isolation:isolate;width:100%;aspect-ratio:1/.92;container-type:inline-size;margin:0;--ht-grund:#FBF7F0;--ht-tanne:#1F3F35;--ht-kunde:#1F3F35;--ht-kunde-hell:#2C5547;--ht-linie:#DCCFBC;--ht-bernstein:#E39A1B;--ht-serif:var(--serif,'Newsreader',Georgia,serif);--ht-sans:var(--sans,'Instrument Sans',sans-serif);--ht-ease:cubic-bezier(.16,1,.3,1)}
.ht-buehne>*{position:absolute}
.ht-buehne svg{display:block}
.ht-licht{inset:6% -1% 4% 4%;border-radius:50%;background:radial-gradient(ellipse at 60% 46%,#E9DCC6 0%,#E9DCC670 42%,transparent 72%);z-index:-1;pointer-events:none}
.ht-markierung{top:2.5%;left:8%;display:flex;align-items:center;gap:8px;color:#6A6158;font:500 clamp(11px,1.8cqw,13px)/1.4 var(--ht-sans)}
.ht-markierung>span{width:7px;height:7px;border-radius:50%;background:var(--ht-bernstein)}
/* Laptop: gleiche Screen/Base-Geometrie wie die bestehende Bühne, neue Materialität.
   Im Browserfenster liegt eine nachgebaute Kunden-Website: dort bleibt Grün als Beispielfarbe (--ht-kunde). */
.ht-laptop{left:3%;top:13%;width:84%;transform:rotate(-3.4deg);transform-origin:center;z-index:1;will-change:transform}
.ht-screen{padding:1.1cqw;border-radius:2.2cqw 2.2cqw .7cqw .7cqw;background:linear-gradient(155deg,#747871,#2C342F 48%,#1F2B26);box-shadow:0 0 0 1px #FFFFFF45 inset,0 4cqw 7cqw -3cqw #26231F47}
.ht-browser{aspect-ratio:16/10.4;overflow:hidden;border-radius:1.1cqw;background:var(--ht-grund);color:#26231F;font-family:var(--ht-sans)}
.ht-base{height:2.1cqw;margin:0 -4.5%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(#AEB0A7,#687268 55%,#4A564D);box-shadow:0 2.8cqw 3.8cqw -1.5cqw #26231F47}
.ht-base::after{content:'';display:block;width:17%;height:45%;margin:0 auto;border-radius:0 0 1cqw 1cqw;background:#525F54}
.ht-bar{display:flex;align-items:center;gap:.65cqw;height:4cqw;padding:0 1.4cqw;background:#EAE2D6}
.ht-bar>i{width:.95cqw;height:.95cqw;border-radius:50%;background:#CA9685}
.ht-bar>i:nth-child(2){background:#D9BC79}.ht-bar>i:nth-child(3){background:#97B29C}
.ht-tab{margin-left:1cqw;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6A6158;font-size:1.45cqw;font-weight:600}
.ht-demo{margin-left:auto;text-transform:uppercase;letter-spacing:.06em;font-size:1.05cqw;color:#6A6158}
.ht-adresse{display:flex;align-items:center;gap:.6cqw;width:max-content;margin:.8cqw 1.4cqw 0;padding:.5cqw 1cqw;background:#EFE7DB;border-radius:99px;font-size:1.25cqw;color:#6A6158}
.ht-adresse svg{width:1.2cqw;height:1.2cqw;color:#476452}
.ht-seite{padding:1.6cqw 2.2cqw 2cqw}
.ht-nav{display:flex;align-items:center;gap:1.8cqw;font-size:1.15cqw;color:#6A6158}
.ht-nav>b{margin-right:auto;font:550 2.25cqw/1 var(--ht-serif);letter-spacing:-.02em;color:#24382E}
.ht-nav>u{text-decoration:none;padding:.7cqw 1.25cqw;border-radius:.45cqw;background:var(--ht-kunde);color:#FBF7F0;font-size:1.25cqw;font-weight:600}
.ht-webhero{position:relative;height:27cqw;margin-top:1.7cqw;overflow:hidden;border-radius:.9cqw;background:#E7E3DA}
.ht-buehne .ht-foto.szene{inset:0 0 0 auto;width:59%;height:100%;object-fit:cover;object-position:60% 42%;opacity:0;transform:scale(1.025);transition:opacity .45s ease,transform 1.2s var(--ht-ease)}
.ht-buehne .ht-foto.szene.aktiv{opacity:1;transform:none}
.ht-buehne .ht-foto[data-segment="handwerk"]{object-position:28% 48%}.ht-buehne .ht-foto[data-segment="gastro"]{object-position:83% 46%}
.ht-webcopy{position:absolute;inset:0 auto 0 0;width:55%;padding:2.1cqw 2.5cqw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#FBF7F0 76%,#FBF7F000)}
.ht-webcopy small{max-width:95%;font-size:1.18cqw;color:#60715E;line-height:1.3}
.ht-webcopy strong{display:block;margin:1.2cqw 0 1cqw;font:500 4.3cqw/.99 var(--ht-serif);letter-spacing:-.015em;color:#24382E;max-width:95%}
.ht-webcopy>span{font-size:1.3cqw;line-height:1.4;color:#6A6256;max-width:27ch}
.ht-webcopy>u{align-self:flex-start;margin-top:1.3cqw;text-decoration:none;background:var(--ht-kunde);color:#FBF7F0;padding:.85cqw 1.5cqw;border-radius:.45cqw;font-size:1.2cqw;font-weight:600}
.ht-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw;margin-top:1.4cqw}
.ht-tiles>span{display:flex;align-items:center;gap:.7cqw;padding:1cqw .8cqw;border-top:1px solid #DCCFBC;color:#6A6158;font-size:1.3cqw;white-space:nowrap}
.ht-tiles b{font-weight:500}.ht-tiles i{color:var(--ht-kunde-hell);font-style:normal;font-size:1.4cqw}
/* Das kleine Google-Profil bleibt ein unterstützender Teil der Bühne. */
.ht-google{left:2%;bottom:6%;width:42%;overflow:hidden;background:#FBF7F0;border:1px solid #DCCFBC99;border-radius:1.6cqw;box-shadow:0 2.4cqw 4cqw -2cqw #26231F40;z-index:2;transform:rotate(1.8deg)}
.ht-map{position:relative;width:100%;height:7.2cqw;overflow:hidden}
.ht-map>svg{width:100%;height:100%}
.ht-pin{position:absolute;top:1.7cqw;left:48%;width:3.3cqw;height:3.3cqw;display:grid;place-items:center;border-radius:50%;background:#FBF7F0;box-shadow:0 2px 8px #26231F30;color:#2C5547}
.ht-pin svg{width:2cqw;height:2cqw}
.ht-google-text{padding:1.7cqw 2cqw 1.9cqw}
.ht-google-text>small{display:flex;align-items:center;gap:.7cqw;color:#786F62;font:400 1.55cqw/1.4 var(--ht-sans)}
.ht-g{font-family:Arial,sans-serif;font-size:2.4cqw;color:#4285F4}.ht-g b{font-weight:700}
.ht-google-text>strong{display:block;margin-top:.65cqw;font:550 2.65cqw/1.15 var(--ht-serif);color:#26231F}
.ht-google-ort{display:block;margin-top:.5cqw;font:400 1.4cqw/1.35 var(--ht-sans);color:#6A6158}
.ht-google-wege{display:flex;gap:1.7cqw;margin-top:1.3cqw;font:500 1.45cqw/1.2 var(--ht-sans);color:#2C5547}
.ht-google-wege span+span{padding-left:1.7cqw;border-left:1px solid #DCCFBC}
/* Telefon: dunkle Handy-Oberfläche (#1F2B26), pulsierender Bernstein. Grün nur im kleinen Statuspunkt. */
.ht-phone{right:2%;bottom:1.5%;width:31%;aspect-ratio:9/18.1;padding:1cqw;border-radius:4.3cqw;background:linear-gradient(145deg,#68766C,#2D3830 42%,#121A15);box-shadow:0 0 0 1px #FFFFFF50 inset,0 3cqw 6cqw -1.8cqw #26231F6B;z-index:3;transform:rotate(6deg);will-change:transform}
.ht-phone::before{content:'';position:absolute;inset:-2cqw;border:1px solid #E39A1B66;border-radius:5.6cqw;opacity:.55;pointer-events:none}
.ht-phone-in{position:relative;height:100%;overflow:hidden;border-radius:3.5cqw;display:flex;flex-direction:column;gap:1.25cqw;padding:1.3cqw 1.65cqw 1.6cqw;background:radial-gradient(ellipse at 50% 22%,#2C55474D,transparent 60%),#1F2B26;color:#FBF7F0;font-family:var(--ht-sans)}
.ht-phone-in::before{content:'';position:absolute;top:1cqw;left:50%;width:31%;height:1.7cqw;transform:translateX(-50%);border-radius:99px;background:#0D1510}
.ht-status{display:flex;justify-content:space-between;align-items:center;min-height:2.1cqw;padding:0 .8cqw;color:#DCD0C2;font-size:1.35cqw}
.ht-status>span{display:flex;gap:.6cqw}.ht-status svg{height:1.1cqw;width:auto}
.ht-phone-demo{align-self:center;margin-top:1cqw;color:#C9B891;text-transform:uppercase;letter-spacing:.09em;font-size:1.25cqw;font-weight:500}
.ht-anruf{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:.9cqw;gap:.8cqw}
.ht-avatar{position:relative;display:grid;place-items:center;width:8.1cqw;height:8.1cqw;border-radius:50%;background:#E39A1B;color:#2B2A18;box-shadow:0 0 0 1.2cqw #E39A1B18}
.ht-avatar::before,.ht-avatar::after{content:'';position:absolute;inset:-1.2cqw;border:1px solid #E8BC6680;border-radius:50%;opacity:.7}
.ht-avatar::after{inset:-2.5cqw;border-color:#F3D3A466;opacity:.45}
.ht-avatar svg{width:3.7cqw;height:3.7cqw;stroke-width:1.7}
.ht-anruf>b{display:block;max-width:100%;margin-top:1.25cqw;font-size:1.7cqw;font-weight:600;line-height:1.2;white-space:nowrap}
.ht-anruf>small{display:flex;align-items:center;gap:.6cqw;color:#CDB9A3;font-size:1.3cqw;line-height:1.3}
.ht-anruf>small>i{width:.7cqw;height:.7cqw;background:#5FD38D;border-radius:50%}
.ht-stimme{display:flex;align-items:center;justify-content:center;gap:.48cqw;height:4cqw;padding:.6cqw 0;flex:none}
.ht-stimme>i{width:.45cqw;height:100%;border-radius:9px;background:#D7C2A5;transform:scaleY(.45);transform-origin:center}
.ht-stimme>i:nth-child(2n){height:60%}.ht-stimme>i:nth-child(3n){height:85%}.ht-stimme>i:nth-child(4n){background:#E8B04A}.ht-stimme>i:nth-child(5n){height:30%}
.ht-chat{display:flex;flex-direction:column;gap:.9cqw;flex:1;min-height:0}
.ht-nachricht{margin:0!important;padding:1.1cqw 1.2cqw;max-width:93%;border-radius:1.45cqw;font-size:1.55cqw;line-height:1.36}
.ht-ai{align-self:flex-start;background:#2C3A34;color:#F1EADF;border-bottom-left-radius:.4cqw}
.ht-anrufer{align-self:flex-end;background:#DDB775;color:#26231F;border-bottom-right-radius:.4cqw}
.ht-notiz{display:flex;align-items:center;justify-content:center;gap:.7cqw;flex:none;margin-top:.6cqw;padding:1.1cqw .5cqw;background:#E39A1B14;border:1px solid #E39A1B45;border-radius:.8cqw;color:#EFCD95;font-size:1.4cqw;line-height:1.25}
.ht-notiz svg{width:1.8cqw;height:1.8cqw;flex:none}
.ht-phone-strich{height:.45cqw;width:34%;margin:.4cqw auto 0;background:#CDBFAE;border-radius:99px;opacity:.55}
.ht-branch-daten{display:none}
.ht-bildunterschrift{position:static;margin:5px 0 0 3%!important;display:flex;align-items:center;gap:7px;font:400 12px/1.4 var(--sans,'Instrument Sans',sans-serif);color:#6A6158}
.ht-bildunterschrift>span{width:5px;height:5px;border-radius:50%;background:#9B8D73}
/* Animation startet erst nach Sichtkontakt und pausiert außerhalb des Viewports. */
.ht-buehne.ht-bereit.ht-gesehen .ht-laptop{animation:ht-laptop-ein .95s var(--ht-ease) both}
.ht-buehne.ht-bereit.ht-gesehen .ht-phone{animation:ht-phone-ein 1.05s var(--ht-ease) .16s both}
.ht-buehne.ht-bereit.ht-gesehen .ht-google{animation:ht-google-ein .8s var(--ht-ease) .35s both}
.ht-buehne.ht-bereit .ht-avatar::before{animation:ht-puls 2.5s ease-out infinite}
.ht-buehne.ht-bereit .ht-avatar::after{animation:ht-puls 2.5s ease-out .7s infinite}
.ht-buehne.ht-bereit .ht-phone::before{animation:ht-phone-puls 3.4s ease-in-out infinite}
.ht-buehne.ht-bereit .ht-stimme>i{animation:ht-stimme 1.35s ease-in-out infinite}
.ht-buehne.ht-bereit .ht-stimme>i:nth-child(2n){animation-delay:-.3s}.ht-buehne.ht-bereit .ht-stimme>i:nth-child(3n){animation-delay:-.6s}.ht-buehne.ht-bereit .ht-stimme>i:nth-child(5n){animation-delay:-.9s}
.ht-buehne.ht-bereit:not(.ht-laeuft) *,.ht-buehne.ht-bereit:not(.ht-laeuft) *::before,.ht-buehne.ht-bereit:not(.ht-laeuft) *::after{animation-play-state:paused!important}
@keyframes ht-laptop-ein{from{opacity:0;transform:translate(15%,5%) rotate(2deg)}to{opacity:1;transform:rotate(-3.4deg)}}
@keyframes ht-phone-ein{from{opacity:0;transform:translate(-30%,14%) rotate(-8deg)}to{opacity:1;transform:rotate(6deg)}}
@keyframes ht-google-ein{from{opacity:0;transform:translate(-22%,8%) rotate(-4deg)}to{opacity:1;transform:rotate(1.8deg)}}
@keyframes ht-puls{0%{opacity:.65;transform:scale(.82)}80%,100%{opacity:0;transform:scale(1.32)}}
@keyframes ht-phone-puls{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.75;transform:scale(1.018)}}
@keyframes ht-stimme{0%,100%{transform:scaleY(.25);opacity:.65}50%{transform:scaleY(.95);opacity:1}}
@media(min-width:1500px){.ht-buehne{max-width:800px}}
@media(max-width:900px){.einstieg-bild.ht-technik-panel{padding:12px var(--rand,16px) 36px;max-width:760px;margin-inline:auto}.ht-buehne{aspect-ratio:1/.88}}
@media(max-width:520px){
  .einstieg-bild.ht-technik-panel{padding:8px 9px 32px;width:100%}
  .ht-buehne{aspect-ratio:1/1.04}
  .ht-markierung{top:0;left:5%;font-size:11px}
  .ht-laptop{left:3%;top:11%;width:87%}
  .ht-phone{right:2%;bottom:1%;width:38%;padding:1.25cqw;border-radius:5.3cqw;aspect-ratio:9/18.1}
  .ht-phone-in{border-radius:4.3cqw;padding:1.6cqw 1.9cqw 1.8cqw;gap:1.45cqw}
  .ht-phone-in::before{height:2.1cqw;top:1.25cqw}
  .ht-status{font-size:1.8cqw;min-height:2.6cqw}.ht-status svg{height:1.45cqw}
  .ht-phone-demo{font-size:clamp(7.5px,1.7cqw,9px);margin-top:1.4cqw}
  .ht-anruf{margin-top:1.3cqw;gap:1.1cqw}
  .ht-avatar{width:10cqw;height:10cqw}.ht-avatar svg{width:4.7cqw;height:4.7cqw}
  .ht-anruf>b{font-size:clamp(9px,2.4cqw,11px);margin-top:1.6cqw}.ht-anruf>small{font-size:clamp(7px,1.75cqw,9px)}
  .ht-stimme{height:5cqw;gap:.55cqw}.ht-stimme>i{width:.6cqw}
  .ht-nachricht{font-size:clamp(9px,2.15cqw,10px);padding:1.4cqw 1.45cqw;line-height:1.3;border-radius:1.8cqw}
  .ht-chat{gap:1.15cqw}.ht-antwort{display:none}
  .ht-notiz{font-size:clamp(8px,1.9cqw,10px);padding:1.5cqw .6cqw;margin-top:1cqw}.ht-notiz svg{width:2.3cqw;height:2.3cqw}
  .ht-google{left:3%;bottom:13%;width:48%;border-radius:2cqw}
  .ht-map{height:8cqw}.ht-google-text{padding:2.1cqw 2.3cqw}
  .ht-google-text>small{font-size:1.95cqw}.ht-g{font-size:2.7cqw}
  .ht-google-text>strong{font-size:3.2cqw}.ht-google-ort{font-size:1.85cqw}.ht-google-wege{font-size:1.85cqw;margin-top:1.7cqw}
  .ht-nav{font-size:1.45cqw}.ht-nav>b{font-size:2.5cqw}.ht-nav>u{font-size:1.5cqw}
  .ht-webcopy small{font-size:1.4cqw}.ht-webcopy strong{font-size:4.8cqw}.ht-webcopy>span{font-size:1.55cqw}.ht-webcopy>u{font-size:1.55cqw}
  .ht-tiles>span{font-size:1.6cqw}.ht-tiles i{font-size:1.7cqw}
  .ht-bildunterschrift{font-size:11px;margin-top:9px!important}
}
/* Runde 1 (14.10.2026): Auf schmalen Handys rückt der Telefonkopf etwas zusammen, damit Begrüßung und Anrufer-Blase nicht über „Rückruf notiert“ laufen. */
@media(max-width:440px){.ht-phone-in{gap:1.1cqw}.ht-anruf{margin-top:.8cqw;gap:.7cqw}.ht-avatar{width:8cqw;height:8cqw}.ht-avatar svg{width:3.8cqw;height:3.8cqw}.ht-anruf>b{margin-top:1cqw}.ht-stimme{height:3cqw}}
@media(prefers-reduced-motion:reduce){
  .ht-buehne *,.ht-buehne *::before,.ht-buehne *::after{animation:none!important;transition:none!important}
  .ht-buehne .ht-stimme>i{transform:scaleY(.55)}
  .ht-buehne .ht-foto.szene{transform:none}
  .ht-laptop,.ht-phone{will-change:auto}
}

.ht-hoerlink{align-self:flex-start;margin:18px 0 0 3%;display:inline-flex;align-items:center;gap:8px;color:#1F3F35;font-size:.95rem;min-height:44px}
.ht-hoerlink svg{width:20px;height:20px}