/* acessio.de · Sprachfassungen (21.10.2026)
   Wird nur von /en/, /fr/, /zh/, /ar/ geladen, nach denselben Stylesheets wie die
   deutsche Startseite bzw. das deutsche Projektprofil. Inhalt:
   1. Kennzeichnung deutschsprachiger Zielseiten („DE“ in Kopf und Menue, Hinweis je Fussspalte)
   2. Kennzeichnung uebersetzter Zitate
   3. RTL (ar): physische Angaben der neuen Komponenten spiegeln
   4. Chinesisch: Umbruch, Schriftlauf
   5. Arabisch/Chinesisch: keine Laufweiten, keine Kursiven
   6. Hero-Ueberschrift en/fr in deutscher Groesse (Endbau 21.10.2026) */

/* 1 · Deutschsprachige Zielseiten. Das Kuerzel steht nur noch in Kopfnavigation und mobilem Menue,
   direkt (ohne Leerraum) hinter dem Linktext; dort sind die Links nowrap bzw. inline-flex, das
   Kuerzel bleibt also am letzten Wort. Im Fuss steht je Linkspalte ein Hinweis (.footer__sprache). */
.sprache-de {
  display: inline-block;
  margin-inline-start: .4em;
  padding: .12em .32em .1em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .62em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  vertical-align: .18em;
  opacity: .62;
  text-decoration: none;
  white-space: nowrap;
}
.kopfnav .sprache-de { font-size: .56em; margin-inline-start: .3em; }
a:hover .sprache-de, a:focus-visible .sprache-de { opacity: .85; }
.footer__sprache {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fuss-leise, currentColor);   /* klein und leise, Kontrast wie die Fusslinks (AA) */
}

/* 2 · Uebersetzte Zitate */
.contact-beleg__zitat .zitat-hinweis { white-space: nowrap; }

/* 3 · RTL */
/* Die Altregel :lang(ar){text-align:start} fehlt in den ar-Kopien der Stylesheets (build_locales.py),
   damit zentrierte Bloecke ihre Ausrichtung vererben. */
html[dir="rtl"] .brand,
html[dir="rtl"] .of__marke,
html[dir="rtl"] .marke-inline,
html[dir="rtl"] .ref-fenster,
html[dir="rtl"] .footer__tagline { direction: ltr; }
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* Kopf, Menue, Knoepfe */
html[dir="rtl"] .site-menu nav { text-align: left; }
/* Gezeichneter Knopfpfeil (Maske) zeigt in Leserichtung; Briefsymbol am Kopf-CTA bleibt ungespiegelt. */
html[dir="rtl"] :is(.btn--primary, .lp-button)::after { transform: scaleX(-1); }
html[dir="rtl"] .btn--primary:hover::after { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .nav-cta:hover::after { transform: translateX(-3px); }
html[dir="rtl"] .hero__textlink:hover span,
html[dir="rtl"] .home-references__more a:hover span,
html[dir="rtl"] a.of__person:hover .of__person-mehr span { transform: translateX(-4px); }
html[dir="rtl"] .home-references a.reference-strip-card:hover .reference-strip-card__arrow { transform: translateX(-5px); }

/* Hero mit Film und Personenkarte */
@media (min-width: 900px) { html[dir="rtl"] .hero { text-align: right; } }
html[dir="rtl"] .werkstapel__person { left: auto; right: 2%; }
html[dir="rtl"] .hero--werk > a.person-karte { text-align: right; }
html[dir="rtl"] .person-karte__pfeil { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .person-karte__gross { left: auto; right: 0; transform-origin: calc(100% - 30px) 100%; }
html[dir="rtl"] .hero--werk > a.person-karte .person-karte__gross { transform-origin: calc(100% - 30px) 0; }
@media (hover: hover) and (pointer: fine) {
  html[dir="rtl"] a.werkstapel__person:hover .person-karte__pfeil,
  html[dir="rtl"] a.werkstapel__person:focus-visible .person-karte__pfeil { transform: translateX(-3px); }
}
@media (min-width: 600px) { html[dir="rtl"] .herofilm__gross { right: auto; left: 12px; } }
html[dir="rtl"] .herofilm-gross__zu { right: auto; left: max(16px, env(safe-area-inset-left)); }
@media (max-width: 767px), (max-height: 500px) {
  html[dir="rtl"] .herofilm-gross__zu { right: auto; left: max(10px, env(safe-area-inset-left)); }
}

/* Leistungen als Kartenstapel, Fortschrittsleiste fuellt von rechts */
html[dir="rtl"] .kann-fortschritt b::after { transform-origin: 100% 50%; }

/* Teambild-CTA: gezeichneter Pfeil kommt von rechts */
html[dir="rtl"] .kann-ruf__pfeil { right: auto; left: calc(50% + 118px); transform: scaleX(-1) scaleY(-1) rotate(14deg); }
@media (min-width: 700px) { html[dir="rtl"] .kann-ruf__pfeil { right: auto; left: calc(50% + 128px); } }
@media (max-width: 699px) { html[dir="rtl"] .kann-ruf--bild .kann-ruf__pfeil { right: auto; left: calc(50% + 112px); } }
@media (min-width: 1000px) and (max-width: 1199px) {
  html[dir="rtl"] .kann-ruf--bild .kann-ruf__pfeil { right: auto; left: calc(50% + 120px); }
}

/* Referenz-Collage und Massband: Gehaeuse rechts, Band zieht nach links */
html[dir="rtl"] .massband { transform: scaleX(-1); }
html[dir="rtl"] .ref-karte__symbol { left: auto; right: -14px; }
html[dir="rtl"] a.ref-karte:hover .ref-karte__symbol { transform: rotate(6deg) translateY(-2px); }
html[dir="rtl"] .home-references__more { text-align: left; }
@media (max-width: 780px) { html[dir="rtl"] .home-references__more { text-align: right; } }
@media (max-width: 700px) {
  html[dir="rtl"] .ref-raster { padding-left: 0; padding-right: 8px; }
  html[dir="rtl"] .ref-karte__symbol { left: auto; right: -10px; }
}

/* Kundenstimmen: Schiene bleibt LTR (start-*.css: html:lang(ar) .stimmen__liste{direction:ltr}),
   Folien RTL; Pfeilzeichen tauscht der Generator, Zaehler „1 / 4“ bleibt in Ziffernfolge. */
html[dir="rtl"] .stimmen__profile { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .stimmen__stand { direction: ltr; unicode-bidi: isolate; }

/* Buero, Ablauf */
html[dir="rtl"] .of .of__wort,
html[dir="rtl"] .of .sec-head,
html[dir="rtl"] .of .eyebrow { text-align: right; }
html[dir="rtl"] .of__schritte li { padding-left: 0; padding-right: 44px; }
html[dir="rtl"] .of__schritte li::before { left: auto; right: 0; }
html[dir="rtl"] .of__lauf figcaption { left: auto; right: 14px; }
html[dir="rtl"] .team-carousel__ui { right: auto; left: 14px; }
html[dir="rtl"] .team-carousel__arrow svg { transform: scaleX(-1); }

/* Schluss mit gezeichnetem Pfeil */
html[dir="rtl"] .final__tel { text-align: right; }
@media (min-width: 1100px) {
  html[dir="rtl"] .final__cta.btn--primary::before { inset: -64px -148px -6px -6px; transform: scaleX(-1); }
}

/* Schwebender Kontakt (kontakt-*.js) unten links */
html[dir="rtl"] aside.anruf { inset: auto auto clamp(16px, 2.4vw, 32px) clamp(16px, 2.4vw, 32px); }
@media (max-width: 640px) {
  html[dir="rtl"] aside.anruf {
    inset: auto auto calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
  }
}

/* Fuss */
html[dir="rtl"] .footer__tagline.is-tippt .tagline__tipp::after { margin-left: .06em; }
/* Bewertungszeile im Fuss enthaelt arabischen Text („★ 5.0 · 38 تقييمًا على Google“): in Leserichtung
   setzen (Altregel start-edc39d8c9b7c.css html:lang(ar) .footer__grating{direction:ltr} drehte die Reihenfolge). */
html[dir="rtl"] .footer__absender .footer__grating { direction: rtl; }

/* Projektprofil, Rueckruf: Honigtopf liegt in RTL rechts ausserhalb (links ausserhalb erzeugte
   10 000 px Querscrollen); gezeichnetes Fragezeichen gespiegelt („؟“). */
html[dir="rtl"] .contact-page .rueckruf__honig { left: auto; right: -10000px; }
html[dir="rtl"] .contact-page .rueckruf__frz { transform: scaleX(-1); margin-left: 0; margin-right: .06em; }

/* 4 · Chinesisch: Ueberschriften brechen nur an Sinngrenzen (Satzzeichen, U+200B), nie ueberlaufend */
html:lang(zh) :is(h1, h2, h3, .final__zeile, .kann-ruf__frage) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: balance;
}
html:lang(zh) body { line-break: strict; }
/* Korrektur nach QA 22.10.2026: Teambild-CTA. startseite-ff0b9fac463d.css setzt
   .vorteile .kann-ruf--bild .kann-ruf__frage{overflow-wrap:normal} (Spezifitaet 0,3,0) und schlug damit die Regel
   oben; mit keep-all fehlte jede Umbruchstelle (320 px: 10 px Querscrollen). Sinngrenze per U+200B in zh.json,
   hier nur der Notumbruch zurueck. */
html:lang(zh) .vorteile .kann-ruf--bild .kann-ruf__frage { overflow-wrap: anywhere; }
/* Stuttgart-Karte (Modul karte): Saetze ebenso nur an Sinngrenzen (U+200B, Leerzeichen vor „Stuttgart“) */
html:lang(zh) .of-karte__satz { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

/* 5 · Arabisch und Chinesisch: Laufweite 0 (arabische Buchstaben bleiben verbunden), keine Kursiven */
html:lang(ar) :is(h1, h2, h3, h4, p, a, span, b, em, li, button, label, legend, figcaption, blockquote),
html:lang(zh) :is(h1, h2, h3, h4, .final__zeile, .eyebrow) { letter-spacing: 0; }
html:lang(ar) :is(em, i), html:lang(zh) :is(em, i) { font-style: normal; }
html:lang(ar) .footer__tagline, html:lang(ar) .footer__tagline * { letter-spacing: normal; }

/* 6 · Hero-Ueberschrift en/fr: Altregel vom 09.09. in start-edc39d8c9b7c.css
   (html:lang(fr|en) .hero__title{font-size:clamp(44px,5.5vw,86px);…}) zurueck auf die deutsche Groesse
   (startseite-ff0b9fac463d.css: .hero--start .hero__title{max-width:20ch;font-size:clamp(38px,5vw,76px);
   line-height:1.04}, bis 640 px max-width:14ch). */
html:is(:lang(en), :lang(fr)) .hero--start .hero__title {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.04;
  max-width: 20ch;
}
@media (max-width: 640px) {
  html:is(:lang(en), :lang(fr)) .hero--start .hero__title { max-width: 14ch; }
}
/* Chinesisch: Hero-Ueberschrift bricht nur an den gesetzten Sinngrenzen (U+200B, keep-all), auch
   kein Notumbruch innerhalb eines Abschnitts wie „节省时间、“ (laengster Abschnitt 6 Zeichen, passt ab 280 px). */
html:lang(zh) .hero__title { overflow-wrap: normal; }