/*
 * kundenwuensche.css — BEWUSSTE Abweichungen vom Original (mobam, Runde 2, 12.10.2026).
 * Nur in diesem Projekt, nicht in die Skill-Vorlage übernehmen. Begründung: README „Runde 2“.
 * Eingebunden nach mobile-overrides.css (inject-kundenwuensche.mjs), Logik in kundenwuensche.js.
 */

/* === 1. Kopfzeile bleibt beim Scrollen oben (live scrollt sie weg) ===
   Weißer Grund, damit Inhalt nicht durchscheint; dezenter Schatten erst nach dem Scrollen.
   --lk-kopf-h misst kundenwuensche.js (Desktop 119 px, Handy 150 px). */
.con-kit-section--type-header {
  position: sticky !important;
  top: 0;
  z-index: 9000;
  background: #fff;
  transition: box-shadow 0.3s;
}
html.lk-kopf-gescrollt .con-kit-section--type-header { box-shadow: 0 2px 14px rgba(17, 24, 39, 0.08); }
/* Sprungmarken nicht unter der Kopfzeile verstecken */
html { scroll-padding-top: var(--lk-kopf-h, 0px); }
/* Stapel-Effekt der Startseite (data-kit-sticky) stoppt jetzt UNTER der Kopfzeile statt dahinter */
.con-kit-row[data-kit-sticky] {
  top: calc(var(--lk-kopf-h, 0px) + var(--one-kit-sticky-offset, var(--layout-padding-top, 0px)));
}
.con-kit-molecule-textBlock[data-kit-sticky][data-kit-align-vertical~=top] .con-kit-component-atom-list {
  top: calc(var(--lk-kopf-h, 0px) + var(--one-kit-sticky-offset, var(--layout-padding-top, 0px)));
}

/* === 2. Knopf „nach oben“ ===
   Farbe/Radius übernimmt kundenwuensche.js vom Header-Button „Karriere bei uns“ (mobam
   rgb(46,163,242), 4 px); hier Rückfallwerte. Erscheint nach 600 px Scrollweg. */
.lk-nach-oben {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9500;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgb(46, 163, 242);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s, filter 0.2s;
}
.lk-nach-oben.is-sichtbar { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.3s, visibility 0s, filter 0.2s; }
.lk-nach-oben:hover { filter: brightness(1.08); }
.lk-nach-oben:focus-visible { outline: 2px solid #191919; outline-offset: 3px; }
.lk-nach-oben svg { display: block; }
html.mobile-nav-locked .lk-nach-oben { display: none; }
@media (max-width: 1024px) { .lk-nach-oben { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .lk-nach-oben { transition: none; } }

/* === 3. Hinweis „KI-generiert“ auf den Schulbegleiter-Fotos ===
   Kleine, halbtransparente Marke in der Ecke; Schrift der Seite. Welche Bilder: kundenwuensche.js. */
.lk-ki-hinweis {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--font-kit-text-font, "Open Sans", sans-serif);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.lk-ki-hinweis--oben { top: 8px; bottom: auto; }
.lk-ki-hinweis--hintergrund { top: 12px; right: 12px; bottom: auto; }

/* === 4. Handy: Textspalten etwas breiter, Silbentrennung statt Wortbruch ===
   Live (und lokal 1:1) stehen Texte in Masonry-Listen auf dem Handy mit 50 px Innenabstand je Seite:
   das ist der halbe Spaltenabstand des Desktop-Rasters (--one-kit-component-masonry-horizontal-space
   100px), der bei EINER Spalte nur noch Rand ist. Ergebnis: Spalte 242 statt 342 px, viele Zeilen,
   „Erziehungsbeistandscha|ft“ bricht hart um. Wunsch: weniger Zeilen. Daher auf dem Handy nur den
   seitlichen Innenabstand der Masonry-Elemente auf 0 (Text steht dann bündig mit dem übrigen
   Seiteninhalt, 24 px Seitenrand bleibt). Bilder/Buttons/Kartenrahmen werden nicht verändert.
   Lange Wörter: Silbentrennung (hyphens:auto, <html lang="de">) statt Abbruch mitten im Wort. */
@media (max-width: 767px) {
  /* Nur Elemente mit großem Innenabstand (≥ 30 px = Rest des Desktop-Spaltenabstands) und ohne
     Bilder/Icons markiert kundenwuensche.js mit .lk-text-breit. Karten mit Icon neben dem Text
     (z. B. /mobamambulant „Unser Hilfeangebot“, 12 px) bleiben unverändert — dort verschob ein
     pauschales padding:0 die Spaltenaufteilung und machte den Text schmaler statt breiter. */
  .con-kit-component-masonry__item.lk-text-breit {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Silbentrennung NUR in diesen verbreiterten Textspalten. Seitenweit verschob hyphens:auto
     Flex-Karten (Icon + Text, /mobamambulant „Unser Hilfeangebot“): die Mindestbreite des Textes
     sinkt, das Bild nimmt mehr Platz, der Text wird schmaler und die Sektion 180–270 px höher.
     Überschriften/Hervorhebungen nie trennen (getrennte Hervorhebung = Form über zwei Zeilen). */
  .lk-text-breit .con-kit-atom-plain-text .con-kit-component-text,
  .lk-text-breit .con-kit-atom-paragraph .con-kit-component-text {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
  .con-kit-quark-highlight { -webkit-hyphens: manual; hyphens: manual; }
}