/* Gemeinsame Bausteine (Notfallleiste, Geschäftsleitung, IT-Leitung, Team, Referenzen, Fußzeile)
   Übernommen aus tools/inject.py des Prototyps. Wird auf jeder Seite geladen. */
/* Bilder skalieren proportional; width/height im HTML bleiben nur für das Seitenlayout beim Laden */
img{max-width:100%;height:auto}
.s42-bar{background:#1f1f1f;color:#fff;font-size:.95rem;line-height:1.45}
.s42-bar .in{max-width:1160px;margin:0 auto;padding:.6rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem}
.s42-bar .in::before{content:"";width:.6rem;height:.6rem;background:#FF4040;border-radius:1px;flex:none}
.s42-bar b{font-weight:600}
.s42-bar a{color:#fff;text-underline-offset:3px}
.s42-bar a.tel{font-weight:600;white-space:nowrap}
.s42-bar .more{margin-left:auto;color:#d0d0d0}
@media (max-width:640px){.s42-bar .more{margin-left:0}}
.s42-refs{padding:4.5rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.s42-refs .in{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.s42-refs h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;line-height:1.15;margin:0;max-width:22ch}
.s42-refs .intro{margin:1rem 0 2.25rem;max-width:42rem;opacity:.78;font-size:1.08rem}
.s42-refs .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:760px){.s42-refs .grid{grid-template-columns:1fr}}
.s42-refs figure{margin:0;padding:1.4rem 1.5rem 1.25rem;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-left:5px solid var(--p,var(--blue,#0070C0));border-radius:4px;display:flex;flex-direction:column}
.s42-refs blockquote{margin:0;font-size:1.18rem;line-height:1.4;font-weight:400}
.s42-refs .case{font-size:1.1rem;font-weight:600;margin:0}
.s42-refs .case + p{margin:.4rem 0 0;opacity:.8}
.s42-refs figcaption{margin-top:.9rem;font-size:.93rem;opacity:.75}
.s42-refs .lk{margin-top:auto;padding-top:1rem;font-size:.95rem}
.s42-refs a{color:inherit;font-weight:600;text-underline-offset:3px;text-decoration-color:var(--p,var(--blue,#0070C0))}
.s42-refs .tag{display:inline-block;font-size:.8rem;font-weight:600;padding:.1rem .5rem;border-radius:3px;background:#B40000;color:#fff;margin-bottom:.6rem;align-self:flex-start}
.s42-refs .all{margin-top:1.75rem}
.s42-team{padding:4.5rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.s42-team .in{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.s42-team h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;line-height:1.15;margin:0}
.s42-team .intro{margin:1rem 0 2.5rem;max-width:42rem;opacity:.78;font-size:1.08rem}
.s42-team .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
@media (max-width:820px){.s42-team .people{grid-template-columns:1fr}}
.s42-team .person{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1.5rem;align-items:start}
@media (max-width:480px){.s42-team .person{grid-template-columns:1fr}}
.s42-ph{aspect-ratio:4/5;width:100%;border-radius:4px;border:2px dashed color-mix(in srgb,currentColor 35%,transparent);background:color-mix(in srgb,currentColor 5%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;overflow:hidden}
.s42-ph b{font-size:2rem;font-weight:600;opacity:.55;letter-spacing:.04em}
.s42-ph span{font-size:.8rem;opacity:.65}
.s42-ph img{width:100%;height:100%;object-fit:cover;display:block}
.s42-ph.has-img{border:0;background:none}
.s42-team h3{font-weight:600;font-size:1.35rem;margin:0}
.s42-team .role{margin:.2rem 0 0;font-size:.95rem;color:var(--p,var(--blue,#0070C0));font-weight:600}
.s42-team .bio{margin:.85rem 0 0}
.s42-team ul{list-style:none;margin:1rem 0 0;padding:0;font-size:.95rem}
.s42-team li{padding:.45rem 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.s42-team li a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--p,var(--blue,#0070C0))}
.s42-team .tbd{opacity:.6;font-style:italic}


.s42-team .fw{margin-top:2.5rem;padding:1.6rem 1.75rem;border-radius:4px;background:color-mix(in srgb,var(--p,var(--blue,#0070C0)) 10%,transparent);border-left:5px solid var(--p,var(--blue,#0070C0))}
.s42-team .fw h3{font-size:1.2rem}
.s42-team .fw p{margin:.6rem 0 0;max-width:52rem}
.s42-team.compact{padding:3rem 0}
.s42-team.compact h2{font-size:1.5rem}
.s42-team.compact .intro{margin:.6rem 0 1.5rem;font-size:1rem}
.s42-team.compact .person{grid-template-columns:5.5rem minmax(0,1fr);gap:1.1rem}
.s42-team.compact .s42-ph b{font-size:1.2rem}
.s42-team.compact .s42-ph span{display:none}
.s42-team.compact h3{font-size:1.12rem}
.s42-team.compact .bio{margin-top:.4rem;font-size:.97rem}
.part .s42-team{border-top:0;padding:1rem 0 2rem}
.part .s42-team .in,.sheet .s42-team .in{padding:0}
.sheet .s42-team{border-top:0;padding:1rem 0 2rem}

.s42-it{padding:4.5rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.s42-it .in{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.s42-it .kick{font-size:.95rem;font-weight:600;color:var(--p,var(--blue,#0070C0));margin:0 0 .5rem}
.s42-it h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;line-height:1.15;margin:0;max-width:24ch}
.s42-it .intro{margin:1rem 0 2.25rem;max-width:44rem;opacity:.8;font-size:1.08rem}
.s42-it .gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
@media (max-width:860px){.s42-it .gains{grid-template-columns:1fr;gap:1.25rem}}
.s42-it .gains h3{font-weight:600;font-size:1.12rem;margin:0}
.s42-it .gains p{margin:.5rem 0 0;opacity:.85}
.s42-it h3.sub{font-weight:600;font-size:1.3rem;margin:3.25rem 0 1rem}
.s42-it .who{width:100%;border-collapse:collapse;font-size:.97rem}
.s42-it .who-wrap{overflow-x:auto}
.s42-it .who th,.s42-it .who td{text-align:left;vertical-align:top;padding:.85rem 1rem .85rem 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.s42-it .who thead th{font-size:.88rem;opacity:.7;font-weight:600;border-top:0;padding-top:0}
.s42-it .who tbody th{font-weight:600;width:22%}
.s42-it .who td.us{border-left:3px solid var(--p,var(--blue,#0070C0));padding-left:1rem}
.s42-it .who small{display:block;opacity:.7;font-size:.88rem;margin-top:.2rem}
@media (max-width:700px){.s42-it .who,.s42-it .who tbody,.s42-it .who tr,.s42-it .who th,.s42-it .who td{display:block;width:auto}.s42-it .who thead{display:none}.s42-it .who tr{padding:.75rem 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}.s42-it .who th,.s42-it .who td{border-top:0;padding:.25rem 0}.s42-it .who td::before{content:attr(data-l);display:block;font-size:.8rem;opacity:.65;font-weight:600}.s42-it .who td.us{padding-left:.75rem;margin-top:.35rem}}
.s42-it .gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin:0}
@media (max-width:760px){.s42-it .gl{grid-template-columns:1fr}}
.s42-it .gl div{padding:.8rem 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.s42-it .gl dt{font-weight:600}
.s42-it .gl dt span{font-weight:400;opacity:.7;font-size:.9rem;margin-left:.4rem}
.s42-it .gl dd{margin:.25rem 0 0;opacity:.85;font-size:.95rem}
.s42-it .std{margin-top:2rem;padding:1.1rem 1.25rem;border-radius:4px;background:color-mix(in srgb,var(--p,var(--blue,#0070C0)) 9%,transparent);font-size:.97rem}
.s42-it .std b{font-weight:600}
.part .s42-it .in,.sheet .s42-it .in{padding:0}
.s42-gl{padding:4.5rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.s42-gl .in{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.s42-gl .kick{font-size:.95rem;font-weight:600;color:var(--p,var(--blue,#0070C0));margin:0 0 .5rem}
.s42-gl h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;line-height:1.15;margin:0;max-width:24ch}
.s42-gl .intro{margin:1rem 0 2rem;max-width:44rem;opacity:.8;font-size:1.08rem}
.s42-calc{border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:6px;padding:1.5rem 1.75rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 3rem}
@media (max-width:820px){.s42-calc{grid-template-columns:1fr}}
.s42-calc label{display:block;font-weight:600;font-size:.95rem;margin-bottom:1.1rem}
.s42-calc label small{display:block;font-weight:400;opacity:.7;font-size:.85rem}
.s42-calc input[type=number],.s42-calc select{display:block;margin-top:.4rem;width:100%;max-width:16rem;padding:.55rem .7rem;font:inherit;font-weight:400;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:4px;background:transparent;color:inherit}
.s42-calc select option{color:#000}
.s42-calc input[type=range]{display:block;width:100%;margin-top:.5rem;accent-color:var(--p,var(--blue,#0070C0))}
.s42-calc .out{align-self:center}
.s42-calc .big{font-size:clamp(2rem,4vw,2.8rem);font-weight:600;line-height:1.1;color:var(--p,var(--blue,#0070C0))}
.s42-calc .cmp{margin-top:.75rem;font-size:1.05rem}
.s42-calc .note{margin-top:.9rem;font-size:.85rem;opacity:.7}
.s42-gl .pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.75rem}
@media (max-width:860px){.s42-gl .pts{grid-template-columns:1fr;gap:1.25rem}}
.s42-gl .pts h3{font-weight:600;font-size:1.12rem;margin:0}
.s42-gl .pts p{margin:.5rem 0 0;opacity:.85}
.s42-step{margin-top:2.75rem;padding:1.6rem 1.75rem;border-radius:6px;background:var(--p,var(--blue,#0070C0));color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
@media (max-width:760px){.s42-step{grid-template-columns:1fr}}
.s42-step .lb{font-size:.9rem;font-weight:600;opacity:.85}
.s42-step h3{font-weight:600;font-size:1.35rem;margin:.2rem 0 0}
.s42-step p{margin:.5rem 0 0;max-width:44rem}
.s42-step a{display:inline-block;background:#fff;color:#000;font-weight:600;text-decoration:none;padding:.75rem 1.25rem;border-radius:4px;white-space:nowrap}
.s42-it details{margin-top:2.5rem;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.s42-it summary{cursor:pointer;font-weight:600;font-size:1.15rem;padding:1rem 0;list-style-position:outside}
.s42-it details h3.sub{margin-top:1rem}
.part .s42-gl .in,.sheet .s42-gl .in{padding:0}
.sheet .s42-gl{border-top:0;padding:1rem 0 2rem}

.sheet .s42-it{border-top:0;padding:1rem 0 2rem}

/* Hinweis in der Fußzeile: keine Cookies */
.foot .s42-cookiefrei{flex-basis:100%;width:100%;margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:.85rem;opacity:.75}
.foot .wrap{flex-wrap:wrap}

/* Termine mit Ablaufdatum (data-bis) werden per site.js ausgeblendet */
[data-abgelaufen]{display:none !important}

/* Bildschirmleser */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Kontaktformular (kontakt.js) */
[hidden]{display:none !important}
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
button[data-senden]{font:inherit;cursor:pointer}
button[data-senden]:disabled{opacity:.6;cursor:progress}
a.zweitweg{display:inline-block;margin-top:.75rem;background:none !important;border:0 !important;padding:0 !important;color:inherit !important;font-weight:400 !important;text-decoration:underline !important;text-underline-offset:3px}
.kontakt-status{margin:.75rem 0 0;font-weight:600;min-height:1.2em}
.kontakt-status.ok{color:#1b7f3b}
.kontakt-status.fehler{color:#b40000}
.v-b .kontakt-status.ok{color:#5fd38a}
.v-b .kontakt-status.fehler{color:#ff6b6b}

/* Geschäftsleitung / IT-Leitung als Reiter (Shortcode leitung). site.js setzt .mit-reitern;
   ohne JavaScript bleibt die Reiterleiste verborgen und beide Teile stehen untereinander. */
.s42-reiter{padding-top:3.5rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.s42-reiter .in{max-width:1160px;margin:0 auto;padding:0 1.5rem;display:flex;gap:.25rem 1rem;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.part .s42-reiter .in,.sheet .s42-reiter .in{padding:0}
.s42-reiter button{font:inherit;font-size:1.12rem;font-weight:600;color:inherit;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:.8rem .25rem;cursor:pointer;opacity:.6;text-align:left}
.s42-reiter button:hover{opacity:.9}
.s42-reiter button[aria-selected="true"]{opacity:1;border-bottom-color:var(--p,var(--blue,#0070C0))}
@media (max-width:560px){.s42-reiter button{flex:1 1 0;font-size:1rem}}
.s42-leitung.mit-reitern .s42-gl,.s42-leitung.mit-reitern .s42-it{border-top:0;padding-top:2.5rem}
.s42-leitung.mit-reitern .kick{display:none}

/* Tag/Nacht-Schalter in der Notfallleiste (setzt data-theme am <html>, speichert nichts) */
.s42-modus{position:relative;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:space-between;width:3.5rem;height:1.85rem;padding:0 .33rem;border:1px solid #555;border-radius:999px;background:#333;color:#9a9a9a;cursor:pointer}
.s42-modus:hover{border-color:#888}
.s42-modus:focus-visible{outline:2px solid #00B0F0;outline-offset:2px}
.s42-modus .knopf{position:absolute;top:2px;left:2px;width:calc(1.85rem - 6px);height:calc(1.85rem - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .25s ease,background-color .25s ease}
.s42-modus svg{position:relative;z-index:1;width:1.05rem;height:1.05rem;transition:color .25s ease}
.s42-modus .sonne circle{fill:currentColor}
.s42-modus .sonne path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.s42-modus .mond{fill:currentColor}
.s42-modus[aria-checked="false"] .sonne{color:#E59A00}
.s42-modus[aria-checked="true"] .knopf{transform:translateX(1.65rem);background:#2B3A5C}
.s42-modus[aria-checked="true"] .mond{color:#FFD86B}
@media (max-width:640px){.s42-bar .s42-modus{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.s42-modus .knopf,.s42-modus svg{transition:none}}

/* Kontaktstatus im Nachtmodus lesbar halten */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kontakt-status.ok{color:#5fd38a}
  :root:not([data-theme="light"]) .kontakt-status.fehler{color:#ff6b6b}
}
:root[data-theme="dark"] .kontakt-status.ok{color:#5fd38a}
:root[data-theme="dark"] .kontakt-status.fehler{color:#ff6b6b}

/* Online-Terminbuchung (Shortcode termin, Microsoft Bookings nur verlinkt) */
.s42-termin{margin:1.5rem 0 0;padding:.85rem 1.1rem;border-left:4px solid var(--p,var(--blue,#0070C0));background:color-mix(in srgb,var(--p,var(--blue,#0070C0)) 8%,transparent);border-radius:0 4px 4px 0;font-size:.97rem;line-height:1.5}
.s42-termin a,.s42-termin-link{font-weight:600;text-underline-offset:3px}
.s42-termin a::after,.s42-termin-link::after{content:" ↗";content:" ↗" / ""}
.form .s42-termin{margin:1rem 0 0}

/* Überschriften: Zeilen gleichmäßig umbrechen (keine einzelnen Wörter in der letzten Zeile);
   .nobr hält Bindestrich-Wörter wie „IT-Problem“ zusammen */
h1,h2,h3{text-wrap:balance}
.nobr{white-space:nowrap}

/* Roter Knopf „cyberNOTFALL?“ in der Kopfzeile jeder Seite (führt zur cyberRETTUNG) */
.btn.s42-notfall-knopf,a.s42-notfall-knopf{display:inline-block;background:#C8102E !important;border:2px solid #C8102E !important;color:#fff !important;font-weight:600;text-decoration:none;white-space:nowrap}
a.s42-notfall-knopf:hover{background:#A00D25 !important;border-color:#A00D25 !important}
.s42-kopf-knoepfe{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem .9rem}
.s42-kopf-knoepfe .s42-notfall-knopf{padding:.5rem 1rem;border-radius:4px;font-size:.95rem;line-height:1.3}
@media (max-width:480px){a.s42-notfall-knopf{padding:.45rem .7rem !important;font-size:.88rem !important}}

/* Am Handy kompakt (data-mobil-kurz, site.js): nur Kopf sichtbar, Rest per "Mehr erfahren" */
.s42-mehr{display:none}
@media (max-width:760px){
  .kurz-bereit:not(.offen) .wrap > :not(.sec-head):not(.s42-mehr){display:none !important}
  .kurz-bereit .s42-mehr{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.6rem 1.1rem;font:inherit;font-weight:600;font-size:.97rem;color:var(--blue,#0070C0);background:transparent;border:2px solid currentColor;border-radius:999px;cursor:pointer}
  .kurz-bereit .s42-mehr::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .kurz-bereit.offen .s42-mehr{margin-bottom:1.5rem}
  .kurz-bereit.offen .s42-mehr::after{transform:translateY(2px) rotate(-135deg)}
  .kurz-bereit .sec-head{margin-bottom:0}
  .kurz-bereit.offen .sec-head{margin-bottom:0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.kurz-bereit .s42-mehr::after{transition:none}}

/* Handy kompakt: Notfallleiste einzeilig, Bausteine enger, Kundenstimmen seitlich wischen */
@media (max-width:640px){
  .s42-bar .lang,.s42-bar .more{display:none}
  .s42-bar .in{flex-wrap:nowrap;gap:.75rem;padding:.5rem 1rem}
}
@media (max-width:760px){
  .s42-refs,.s42-team,.s42-it,.s42-gl{padding:3rem 0}
  .s42-refs .grid{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1.5rem;padding:0 1.5rem .75rem;scroll-padding:0 1.5rem}
  .s42-refs figure{flex:0 0 86%;scroll-snap-align:start}
}