/* SCHWENK – Die Falte klettert. Prototyp 0.1 */
.sfk-ebene { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 60; overflow: hidden; overflow: clip; pointer-events: none; }
.sfk-faden { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.sfk-faden line { stroke: #FF6B1F; stroke-width: 1.2; opacity: 0; transition: opacity .25s; }

.sfk { position: absolute; left: 0; top: 0; width: 180px; height: 180px; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; pointer-events: none; opacity: 0; transition: opacity .4s; -webkit-tap-highlight-color: transparent; }
.sfk-ebene.sfk--da .sfk, .sfk-ebene.sfk--ruhe .sfk { opacity: 1; }
.sfk-figur { display: block; width: 180px; height: 180px; overflow: visible; pointer-events: none; }
.sfk-figur polygon { pointer-events: visiblePainted; }
.sfk:focus-visible { outline: none; }
.sfk:focus-visible .sfk-figur { outline: 2px solid #FF6B1F; outline-offset: -56px; }

.sfk-tipp { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
  background: #16191C; color: #ECEBE6; padding: 7px 9px; opacity: 0; transition: opacity .15s; }
.sfk:hover .sfk-tipp, .sfk:focus-visible .sfk-tipp { opacity: 1; }

/* Geschichte: eckig, ohne Schatten – eine Linie in Orange trennt sie vom Grund */
.sfk-blase { position: absolute; z-index: 61; pointer-events: auto; width: 400px; box-sizing: border-box; background: #1E2225; color: #D5D8D9;
  border-top: 4px solid #FF6B1F; padding: 22px 24px 16px; font: 400 16px/1.6 'Inter', sans-serif; }
.sfk-blase p { margin: 0 0 10px; }
.sfk-kicker { font: 500 11.5px/1.3 'IBM Plex Mono', monospace !important; letter-spacing: .12em; text-transform: uppercase; color: #FF6B1F; }
.sfk-titel { font: 900 30px/.95 'Archivo Condensed', 'Archivo', sans-serif !important; text-transform: uppercase; color: #ECEBE6; margin-bottom: 14px !important; outline: none; }
.sfk-quelle { font: 400 11.5px/1.4 'IBM Plex Mono', monospace !important; color: #B3B9BC; letter-spacing: .04em; }
.sfk-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.sfk-aktionen a, .sfk-aktionen button { font: 600 14px/1 'Inter', sans-serif; padding: 13px 16px; border: 1.5px solid #ECEBE6; background: transparent; color: #ECEBE6; cursor: pointer; text-decoration: none; }
.sfk-aktionen .sfk-primaer { background: #FF6B1F; border-color: #FF6B1F; color: #16191C; }
.sfk-aktionen a:focus-visible, .sfk-aktionen button:focus-visible, .sfk-fuss button:focus-visible { outline: 2px solid #FF6B1F; outline-offset: 2px; }
.sfk-fuss { display: flex; justify-content: space-between; border-top: 1px solid #2E3437; padding-top: 10px; }
.sfk-fuss button { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; color: #B3B9BC; cursor: pointer; padding: 6px 0; }
.sfk-fuss button:hover { color: #ECEBE6; }
.sfk-hinweis { margin-top: 10px !important; font-size: 13.5px; color: #C8CCCE; border-left: 2px solid #FF6B1F; padding-left: 10px; }

/* Ruhe: klein gefaltet unten rechts, rührt sich nicht mehr */
.sfk-ebene.sfk--ruhe { position: fixed; left: auto; top: auto; right: 16px; bottom: 16px; width: auto; height: auto; }
.sfk--ruhe .sfk { position: static; width: 44px; height: 44px; background: #16191C; border: 1px solid #2E3437; padding: 6px; transform: none !important; }
.sfk--ruhe .sfk-figur { width: 100%; height: 100%; }
.sfk--ruhe .sfk-tipp { top: auto; bottom: 52px; left: auto; right: 0; transform: none; }

/* Handy: Figur kleiner, Geschichte als Blatt am unteren Rand */
@media (max-width: 767px) {
  .sfk-blase { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 70vh; overflow: auto; padding: 18px 16px 12px; }
  .sfk-titel { font-size: 26px !important; }
  .sfk-tipp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sfk, .sfk-faden line { transition: none; } }
@media print { .sfk-ebene { display: none; } }

/* Anker am Zeilenende: Oberkante = Grundlinie der Schrift */
.sfk-anker { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* Gegen Knopf-Stile der Website (Elementor-Kit / Theme): die Falte und ihre Knöpfe behalten ihr eigenes Aussehen */
.sfk-ebene .sfk, .sfk-ebene .sfk:hover, .sfk-ebene .sfk:focus, .sfk-ebene .sfk:active {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: inherit !important;
  min-height: 0 !important; text-transform: none !important; border-radius: 0 !important; }
.sfk-ebene.sfk--ruhe .sfk, .sfk-ebene.sfk--ruhe .sfk:hover { background: #16191C !important; border: 1px solid #2E3437 !important; padding: 6px !important; }
.sfk-blase .sfk-aktionen button, .sfk-blase .sfk-aktionen button:hover, .sfk-blase .sfk-aktionen a:hover {
  background: transparent !important; color: #ECEBE6 !important; border: 1.5px solid #ECEBE6 !important; border-radius: 0 !important; text-transform: none !important; }
.sfk-blase .sfk-aktionen .sfk-primaer, .sfk-blase .sfk-aktionen .sfk-primaer:hover { background: #FF6B1F !important; border-color: #FF6B1F !important; color: #16191C !important; }
.sfk-blase .sfk-fuss button, .sfk-blase .sfk-fuss button:hover { background: none !important; border: 0 !important; color: #B3B9BC !important; padding: 6px 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sfk-blase .sfk-fuss button:hover { color: #ECEBE6 !important; }

/* Vorstellung beim allerersten Besuch: ein Satz, Zipfel zur Figur, verschwindet von selbst */
.sfk-hallo { position: absolute; z-index: 62; pointer-events: auto; box-sizing: border-box; background: #1E2225; color: #ECEBE6;
  border-left: 3px solid #FF6B1F; padding: 12px 34px 12px 14px; font: 400 15px/1.45 'Inter', sans-serif;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.sfk-hallo.da { opacity: 1; transform: none; }
.sfk-hallo p { margin: 0 !important; }
.sfk-hallo::after { content: ""; position: absolute; border: 9px solid transparent; }
.sfk-hallo--rechts::after { left: -9px; bottom: 22px; border-left: 0; border-right-color: #1E2225; }
.sfk-hallo--rechts { border-left: 0; border-right: 3px solid #FF6B1F; }
.sfk-hallo--fest { position: fixed; left: 16px; right: 16px; bottom: 92px; top: auto !important; width: auto; max-width: 460px; margin: 0 auto; }
.sfk-hallo--fest::after { display: none; }
.sfk-ebene .sfk-hallo-zu, .sfk-ebene .sfk-hallo-zu:hover { position: absolute; top: 6px; right: 6px; background: none !important; border: 0 !important;
  color: #B3B9BC !important; font: 14px/1 'Inter', sans-serif; padding: 4px !important; cursor: pointer; box-shadow: none !important; min-height: 0 !important; }
.sfk-hallo-zu:focus-visible { outline: 2px solid #FF6B1F; }
@media (prefers-reduced-motion: reduce) { .sfk-hallo { transition: none; transform: none; } }

/* Leuchten aus der Faltung wie in den Falte-Illustrationen (nur die Figur, nicht der Bodenschein) */
.sfk-figur polygon { filter: drop-shadow(0 0 5px rgba(255, 107, 31, .45)); }
.sfk-ebene.sfk--ruhe .sfk-figur polygon, .sfk-ebene.sfk--ruhe .sfk-schein { filter: none; }
.sfk-ebene.sfk--ruhe .sfk-schein { display: none; }