/* Selbst gehostete Schriften (SIL Open Font License), kein Abruf bei Google */
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url("https://hoegerbit.de/wp-content/uploads/2026/10/hb-sora-var.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("https://hoegerbit.de/wp-content/uploads/2026/10/hb-inter-var.woff2") format("woff2")}

/* Vorgaben des alten Elementor-Kits (Text #555, h2 Roboto 25px) und des Themes für die Höger-Widgets aufheben */
body [class*="elementor-widget-hb_"]{color:var(--graphit);font-family:var(--f-text)}
body [class*="elementor-widget-hb_"] :is(h1,h2,h3){font-family:var(--f-display);font-weight:700;color:inherit;overflow-wrap:break-word;hyphens:auto}
body [class*="elementor-widget-hb_"] .h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1}
body [class*="elementor-widget-hb_"] .video-titel h2{font-size:clamp(38px,6vw,92px);line-height:1.02;color:var(--weiss)}
body [class*="elementor-widget-hb_"] .natur-text h2{font-size:clamp(32px,4.4vw,64px);line-height:1.04;color:var(--weiss)}
body [class*="elementor-widget-hb_"] .kreis h2{font-size:clamp(36px,6vw,88px);line-height:1.02;color:var(--weiss)}
body [class*="elementor-widget-hb_"] .cta h2{font-size:clamp(34px,4.6vw,64px);line-height:1.04}
body [class*="elementor-widget-hb_"] .r-inhalt h2{font-size:24px;margin:34px 0 10px}
body [class*="elementor-widget-hb_"] .dunkel :is(h1,h2,h3),body [class*="elementor-widget-hb_"] .branchen-szene h2,body [class*="elementor-widget-hb_"] .karte h3,body [class*="elementor-widget-hb_"] .kachel.blau h3{color:var(--weiss)}

/* Das Theme färbt Knöpfe beim Antippen rot (#cc3366): für unsere Knöpfe aufheben */
html body .burger,html body .burger:hover,html body .burger:focus{background:rgba(255,255,255,.12);color:var(--weiss)}
html body .nav.hell .burger,html body .nav.hell .burger:hover,html body .nav.hell .burger:focus{background:rgba(0,99,148,.1);color:var(--blau)}
html body .nav .burger[aria-expanded="true"],html body .nav .burger[aria-expanded="true"]:hover,html body .nav .burger[aria-expanded="true"]:focus{background:var(--blau);color:var(--weiss)}
html body .tel-knopf button.tel-auf:hover,html body .tel-knopf button.tel-auf:focus{background:var(--blau);color:var(--weiss)}
html body .tel-knopf .zu:hover,html body .tel-knopf .zu:focus{background:transparent;color:var(--grau)}

/* Mobil: Footer-Links umbrechen, lange Wörter in Rechtstexten trennen */
.elementor-widget-hb_footer_20137 footer .box>span:last-child{flex-wrap:wrap;row-gap:8px}
.r-inhalt{overflow-wrap:anywhere;hyphens:auto}
.l-karte-kopf{min-width:0}
.l-karte-kopf h3{min-width:0}

/* Glas-Menü ohne Rand und ohne Lichtkanten, nur Schatten nach außen */
html body .nav{border:0;box-shadow:0 12px 34px rgba(0,0,0,.2)}
html body .nav.hell{border:0;box-shadow:0 16px 40px rgba(10,27,44,.14)}

/* Formulare: Kasten im hellen Blau der Abschnitte, Eingabefelder bleiben weiß */
html body .hb-formular{background:var(--eis)}
html body .hb-formular input[type=file],html body .hb-formular input[type=file]:hover{background:var(--weiss)}

/* Formulare: Rechenaufgabe zurückhaltend wie der Datenschutz-Text, alles auf einer Linie mit Abstand zur Beschriftung */
html body .hb-formular .hb-pruefung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:18px}
html body .hb-formular .hb-pruefung .elementor-field-label{margin:0!important;font-size:13px!important;font-weight:400!important;color:var(--grau)!important}
html body .hb-formular .hb-pruef-zeile{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
html body .hb-formular .hb-pruef-zeile img{display:block;width:auto;height:26px;border-radius:6px;border:1px solid #DDE6EE;image-rendering:pixelated;background:var(--weiss)}
html body .hb-formular .hb-pruef-gleich{font-size:14px;font-weight:400;color:var(--grau)}
html body .hb-formular .hb-pruef-zeile input[name="hb_ergebnis"]{width:46px!important;height:28px!important;min-height:0!important;padding:2px 6px!important;flex:none;text-align:center;font-size:14px!important;font-weight:500;border-radius:6px!important}
html body .hb-formular .hb-pruef-neu,html body .hb-formular .hb-pruef-neu:hover,html body .hb-formular .hb-pruef-neu:focus{width:26px;height:26px;flex:none;padding:0;border-radius:50%;border:0;background:transparent;color:var(--grau);font-size:15px;line-height:1;cursor:pointer}
html body .hb-formular .hb-pruef-neu:hover{color:var(--blau)}

/* Formulare: Pflichtfeld-Sterne in der Schriftfarbe der Beschriftung statt Elementor-Rot */
.hb-formular .elementor-mark-required .elementor-field-label::after{color:inherit}

/* Leistungen: nur die Bereiche sind nummeriert, die Karten nicht */
.l-karte .l-nr{display:none}

/* Einsatzgebiet: Beschriftung am Kreis entfällt */
.karte-region .radius-text{display:none}

/* Managed Services: Leerraum hinter der letzten Karte, in dem der fertige Stapel angedockt bleibt und ausblendet */
.stapel::after{content:"";display:block;flex:0 0 auto;height:30vh}

/* Mobil: Menü näher an den oberen Rand und flacher, Anruf-Knopf höher */
@media (max-width:860px){
  html body .nav-wrap{top:calc(env(safe-area-inset-top,0px) + 8px);padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  html body .nav{padding:6px 6px 6px 16px}
  html body .nav img{height:26px}
  html body .burger{width:38px;height:38px}
  /* Anruf-Knopf: zugeklappt nur der blaue Kreis, die weiße Leiste erscheint erst beim Aufklappen */
  html body .tel-knopf{bottom:calc(30px + env(safe-area-inset-bottom,0px));height:54px;max-width:54px;background:transparent;box-shadow:none}
  html body .tel-knopf.offen{max-width:calc(100vw - 32px);background:var(--weiss);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  html body .tel-knopf button.tel-auf{width:54px;height:54px;flex-basis:54px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

  /* Aufgeklapptes Menü: Glas wie die Leiste, Einträge mittig */
  html body .mobil-menue{position:relative;isolation:isolate;overflow:hidden;margin-top:6px;padding:8px;border-radius:24px;align-items:center;text-align:center;border:0;
    background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%),rgba(10,27,44,.42);
    box-shadow:0 12px 34px rgba(0,0,0,.2);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
  html body .mobil-menue::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(90% 160% at 8% -30%,rgba(255,255,255,.22),transparent 55%),radial-gradient(60% 140% at 100% 130%,rgba(91,209,245,.12),transparent 60%)}
  html body .nav-wrap .mobil-menue a{padding:12px 16px;width:100%;text-align:center}
  html body .nav.hell + .mobil-menue{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(236,245,251,.6) 55%),rgba(255,255,255,.35);box-shadow:0 16px 40px rgba(10,27,44,.14)}
  html body .nav-wrap .nav.hell + .mobil-menue a{color:var(--graphit)}
  html body .nav.hell + .mobil-menue a:hover{background:rgba(0,99,148,.08)}

  /* Kontakt: Fernwartung erst unter dem Formular */
  html body .kontakt-grid{flex-direction:column;flex-wrap:nowrap;gap:18px}
  html body .kontakt-info{display:contents}
  html body .hb-formular{order:1;margin-top:10px}
  html body .kontakt-info .fernkarte{order:2;margin-top:10px}
}

/* Mobil/Tablet: „So arbeiten wir“ steht still, Text und Bild wechseln durch die vier Schritte */
@media (max-width:960px){
  html body .arbeiten{height:340vh;padding:0}
  html body .arbeiten-grid{position:sticky;top:0;height:100vh;height:100svh;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 84px);padding-bottom:24px}
  html body .schritte{flex:none;width:100%}
  html body .schritte .h2{margin-bottom:10px!important}
  /* Alles linksbündig untereinander: Nummer als kleine Zeile, darunter Titel und Text, dann das Bild */
  html body .schritt{display:none;min-height:0;padding:0;border:0!important;opacity:1}
  html body .schritt.aktiv{display:flex;flex-direction:column;gap:6px;min-height:176px;animation:hbSchritt .45s ease both}
  html body .schritt .nr{width:auto;flex:none;font-size:13px;letter-spacing:.14em}
  html body .schritt .nr::after{content:" / 04";color:var(--grau)}
  html body .schritt h3{font-size:24px;margin-bottom:2px}
  html body .schritt p{font-size:16px;max-width:none}
  html body .arbeiten-bild{order:1;position:relative;top:0;flex:1 1 auto;width:100%;height:auto;min-height:180px;max-height:46vh}
}
@keyframes hbSchritt{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Handy hochkant: Zoom-Galerie so anordnen, dass die Überschrift frei über den Bildern steht */
@media (max-width:760px){
  html body .zoom-kopf{top:calc(env(safe-area-inset-top,0px) + 78px)}
  html body .z0 .ki{width:50vw;height:28vh;top:36vh;left:25vw}
  html body .z1 .ki{width:19vw;height:16vh;top:30vh;left:3vw}
  html body .z2 .ki{width:19vw;height:22vh;top:50vh;left:3vw}
  html body .z3 .ki{width:19vw;height:20vh;top:30vh;left:78vw}
  html body .z4 .ki{width:48vw;height:14vh;top:67vh;left:26vw}
  html body .z5 .ki{width:19vw;height:22vh;top:53vh;left:78vw}

  /* Hero: Knöpfe gleich breit untereinander, Fakten als saubere Liste */
  html body .hero{padding-block:96px 48px;min-height:0}
  html body .hero-text{gap:20px}
  html body .hero-text>div[style]{flex-direction:column;gap:10px}
  html body .hero-text .btn{width:100%;justify-content:center}
  html body .hero-fakten{flex-direction:column;gap:8px;font-size:15px}

  /* Seitenkopf der Unterseiten: ohne Zoom, damit es auf dem Handy flüssig bleibt */
  html body .bild-szene{height:auto}
  html body .bild-buehne{position:relative;height:auto}
  html body .bild-gross{width:100%;height:72vh;height:72svh;margin-top:0;border-radius:0}

  /* Einsatzgebiet: Kästen gleich groß nebeneinander, Karte größer */
  html body .gebiet{overflow:hidden}
  html body .gebiet-fakten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  html body .gebiet-fakten span{padding:12px 14px}
  html body .karte-region svg{width:124%;max-width:none;margin-left:-12%}
}

/* Kreis-Übergang im selben Hellblau wie Partner und Instagram */
html body .kreis-szene{background:var(--eis)}

/* Die WordPress-Adminleiste (nur für Eingeloggte) scrollt auf dem Handy mit weg: keine Lücke lassen */
@media (max-width:600px){html body.admin-bar .nav-wrap{top:calc(env(safe-area-inset-top,0px) + 8px)}}
@media (min-width:601px) and (max-width:782px){html body.admin-bar .nav-wrap{top:54px}}

/* Projekte: Sticky-Galerie, links laufen die Projekte durch, rechts steht das Bild und blendet über */
html body .p-galerie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start;margin-top:10px}
html body .p-eintraege{display:flex;flex-direction:column}
html body .p-eintrag{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:44px 0;border-top:1px solid var(--linie);opacity:.32;transition:opacity .45s ease}
html body .p-eintrag:first-child{border-top:0}
html body .p-eintrag.an{opacity:1}
html body .p-eintrag[hidden]{display:none!important}
html body .p-ekopf{display:flex;align-items:center;gap:14px}
html body .p-eintrag .p-nr{min-width:42px;height:42px;border-radius:12px;font-size:15px}
html body .p-eintrag h3{font-size:clamp(24px,2.3vw,31px);line-height:1.15}
html body .p-eintrag p{color:var(--grau);margin:0}
html body .p-eintrag .p-tags{margin-top:6px;padding-top:0}
html body .p-stand{position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px)}
html body .p-buehne{position:relative;height:min(620px,calc(100vh - 150px));border-radius:var(--rund);overflow:hidden;background:var(--nacht);box-shadow:0 30px 60px rgba(10,27,44,.14)}
html body .p-flaeche{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:flex-end;padding:28px;color:var(--weiss)}
html body .p-flaeche.an{opacity:1}
html body .p-fl-bild{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
html body .p-flaeche.an .p-fl-bild{transform:scale(1)}
html body .p-flaeche:not(.leer)::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,32,.7),rgba(7,20,32,0) 45%)}
html body .p-flaeche.leer{background:linear-gradient(140deg,var(--blau),#004B71)}
html body .p-gross{position:absolute;top:18px;right:30px;font-family:var(--f-display);font-size:clamp(110px,13vw,190px);font-weight:700;line-height:1;color:var(--weiss);opacity:.16;font-variant-numeric:tabular-nums}
html body .p-fl-text{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
html body .p-fl-text b{font-family:var(--f-display);font-size:15px;letter-spacing:.02em;color:var(--cyan)}
@media (max-width:860px){
  /* Handy: Bild steht oben fest, die Projekte laufen darunter durch */
  html body .p-galerie{grid-template-columns:minmax(0,1fr);gap:0}
  html body .p-stand{order:-1;top:0;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 66px) 0 14px;background:var(--weiss)}
  html body .p-buehne{height:32vh;height:32svh;min-height:190px;box-shadow:none}
  html body .p-flaeche{padding:18px}
  html body .p-gross{font-size:110px;top:10px;right:20px}
  html body .p-eintrag{min-height:0;padding:30px 0;opacity:.45}
  html body .p-eintrag:last-child{padding-bottom:20vh}
  html body .p-eintrag.an{opacity:1}
}
@media (prefers-reduced-motion:reduce){html body .p-flaeche,html body .p-fl-bild,html body .p-eintrag{transition:none}}

/* Projekte: Seitenkopf bleibt als Kasten in der Startgröße stehen, kein Zoom beim Scrollen */
@media (min-width:761px){
  html body.page-id-20158 .bild-szene{height:auto}
  html body.page-id-20158 .bild-buehne{position:relative;height:100vh;height:100svh}
  html body.page-id-20158 .bild-gross{--p:0}
}

/* Projekte ohne Bild: blasses HB-Monogramm mittig statt großer Nummer (die Nummer steht unten links) */
html body .p-flaeche.leer .p-mono{position:absolute;left:50%;top:46%;width:min(38%,240px);height:auto;transform:translate(-50%,-50%);opacity:.16;pointer-events:none}
@media (max-width:860px){html body .p-flaeche.leer .p-mono{width:min(30%,130px)}}

/* Leistungen mobil: Sprungleiste als flache Glasleiste direkt unter dem Menü, eine Zeile, seitlich wischbar */
@media (max-width:860px){
  html body .elementor-widget-hb_sprungleiste_20137{top:calc(env(safe-area-inset-top,0px) + 54px)}
  html body .l-sprung{padding:10px max(10px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px))}
  html body .l-sprung nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:2px;padding:4px;overflow-x:auto;scrollbar-width:none;border:0;
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(236,245,251,.6) 55%),rgba(255,255,255,.35);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 16px 40px rgba(10,27,44,.14)}
  html body .l-sprung nav::-webkit-scrollbar{display:none}
  html body [class*="elementor-widget-hb_"] .l-sprung a{flex:none;font-size:13px;padding:8px 13px;white-space:nowrap}
}

/* Startseite Tablet/Handy: Kreis mit Monogramm zwischen Text und Knöpfen, Knöpfe und Fakten darunter */
@media (max-width:960px){
  html body .hero-grid{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:22px}
  html body .hero-text{display:contents}
  html body .hero-text>h1{order:1}
  html body .hero-text>.lead{order:2}
  html body .hero-grid>.netz{order:3;flex:none;width:100%;max-width:460px;margin:4px auto}
  html body .hero-text>div[style]{order:4}
  html body .hero-text>.hero-fakten{order:5}
}