/* Kontakt-Handy im Studio – erzeugt von kontakt_handy_bauen.py, nicht von Hand ändern */
#lrw-kontakt { --dark: #0A0A0A; --light: #F5F5F5; --acid: #E8FF00; font-family: 'Manrope', system-ui, sans-serif; line-height: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased; }
#lrw-kontakt *, #lrw-kontakt *:before, #lrw-kontakt *:after { box-sizing: border-box; }
#lrw-kontakt :focus-visible { border-radius: inherit; }
.kh-lw { font-family: 'Korataki', 'Manrope', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .005em; color: var(--light); font-weight: 400; }
.kh-lw b { font-weight: 400; color: var(--acid); }
.kh-lw sup { font-size: .3em; vertical-align: super; color: var(--light); }
/* Einstell-Feld für den Raum hinter dem Handy (erscheint nur in der lokalen Vorschau) */
.kh-raum { position: absolute; left: 18px; bottom: 18px; z-index: 5; font: 600 12px/1.3 'Manrope', system-ui, sans-serif; color: #f5f5f5; text-shadow: none; }
.kh-raum button { font: inherit; color: inherit; cursor: pointer; border-radius: 999px; padding: 9px 14px; border: 1px solid rgba(245,245,245,.25); background: rgba(22,22,22,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kh-raum-feld { position: absolute; left: 0; bottom: 46px; width: 300px; padding: 14px; border-radius: 16px; background: rgba(22,22,22,.88); border: 1px solid rgba(245,245,245,.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.kh-raum-feld[hidden] { display: none; }
.kh-raum-feld label { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 8px; margin: 0 0 8px; }
.kh-raum-feld label b { font-weight: 600; opacity: .7; text-align: right; }
.kh-raum-feld input[type=range] { width: 100%; accent-color: #E8FF00; }
.kh-raum-zeile { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.kh-raum .kh-raum-save { background: #E8FF00; color: #0A0A0A; border-color: #E8FF00; font-weight: 700; }
.kh-raum-status { opacity: .8; }
  /* ---------- Kontakt-Fenster: Inhalt im Gerät ---------- */
  #lrw-kontakt { --fst-screen-bg: var(--dark); --fst-bg: rgba(18,18,18,.52); --fst-glow-opacity: .8; --fst-glow-sat: 1.6; --fst-glow-bright: 1.5; color: #fff; }
  #lrw-kontakt.k-hell { --fst-status-color: #0a0a0a; --fst-status-shadow: none; --fst-home-color: rgba(10,10,10,.85); }
  .kh-apple { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Helvetica Neue', Arial, sans-serif; }

  /* zugeklappt: Sperrbildschirm wie in der Apple-Vorlage – Datum, Uhr, zwei Tasten, sonst nichts */
  .k-cover { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 9cqw;
             background: #1c1c1c; overflow: hidden; }
  .k-cover .k-ext { position: absolute; inset: -6%; width: 112%; height: 112%; filter: blur(14px) saturate(1.08); }   /* Himmel und Boden weitergeführt */
  .k-cover .k-bild { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; }
  .k-cover .k-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22)); }
  .k-cover .kh-date { position: relative; font-size: 4.3cqw; font-weight: 600; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
  .k-cover .kh-clock { position: relative; height: min(35cqw, 44cqh); margin-top: 2.2cqw; }
  .k-cover .kh-clock.fst-clock-text { height: auto; margin-top: 1.2cqw; font-size: calc(min(30cqw, 36cqh) * var(--uhr-groesse, 1)); }
  .k-who { position: relative; font-size: 3.5cqw; font-weight: 600; margin-top: 1.4cqw; text-shadow: 0 1px 10px rgba(0,0,0,.35); pointer-events: none; }
  .k-notes { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 21cqw; display: grid; gap: 2cqw; pointer-events: none; }
  .k-n { display: grid; grid-template-columns: auto 1fr auto; gap: 0 3cqw; align-items: center; padding: 2.8cqw 3.6cqw; border-radius: 5cqw; color: #fff; text-shadow: 0 1px 1.6cqw rgba(0,0,0,.42); text-align: left;
         background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 55%, rgba(255,255,255,.1)); -webkit-backdrop-filter: blur(4px) saturate(1.8) brightness(.93); backdrop-filter: blur(4px) saturate(1.8) brightness(.93);
         box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 2.6cqw rgba(255,255,255,.16), 0 .8cqw 4cqw rgba(0,0,0,.16); font-size: 3.3cqw; line-height: 1.25; }   /* Glas: Bild scheint durch */
  .k-n .k-ic { grid-row: span 2; width: 9.4cqw; height: 9.4cqw; border-radius: 2.4cqw; object-fit: cover; display: block; box-shadow: 0 .4cqw 1.6cqw rgba(0,0,0,.22); }   /* kleines Bild vorn in der Mitteilung */
  .k-n b { font-weight: 700; } .k-n i { font-style: normal; font-size: 2.5cqw; opacity: .8; } .k-n span { grid-column: 2 / 4; opacity: .95; }
  .k-quick { position: absolute; left: 5cqw; right: 5cqw; bottom: 7.5cqw; display: flex; justify-content: space-between; pointer-events: none; }
  .k-quick a { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(60,60,60,.42); backdrop-filter: blur(14px) saturate(1.5); pointer-events: auto; }
  .k-quick svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  @container foldcover (min-aspect-ratio: 1/1) { .k-cover { padding-top: 6cqw; } .k-cover .kh-date { font-size: 3.6cqw; } .k-who { font-size: 2.8cqw; } .k-notes { left: 22cqw; right: 22cqw; bottom: 7cqw; } .k-n { font-size: 2.6cqw; padding: 2cqw 3cqw; } .k-n + .k-n { display: none; } .k-n .k-ic { width: 6.6cqw; height: 6.6cqw; border-radius: 1.7cqw; } .k-quick { bottom: 6cqw; } .k-quick a { width: 9cqw; height: 9cqw; } .k-quick svg { width: 4.2cqw; height: 4.2cqw; } }

  /* aufgeklappt: eine Szene, die stehen bleibt – beim Scrollen fährt die Kamera vom Startbild zur Couch */
  .kh-journey { position: relative; height: calc(var(--fst-screen-h) * 5.8); background: var(--dark); }
  .kh-scene { position: relative; height: var(--fst-screen-h); overflow: hidden; }
  .kh-scene .kh-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .kh-scene .kh-couch { opacity: 0; transition: opacity .7s; }
  .kh-scene .kh-shade { position: absolute; inset: 0; pointer-events: none;
                  background: linear-gradient(90deg, rgba(10,10,10,.5), rgba(10,10,10,.12) 46%, rgba(10,10,10,0) 64%), linear-gradient(0deg, rgba(10,10,10,.34), rgba(10,10,10,0) 42%); }
  .kh-step { position: absolute; left: 5.4cqw; bottom: 7cqw; width: 46cqw; will-change: opacity, transform;
          text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 .2cqw .35cqw rgba(0,0,0,.5), 0 .6cqw 2cqw rgba(0,0,0,.5), 0 0 5cqw rgba(0,0,0,.35); }   /* harte Kante + weicher Schatten: Schrift steht plastisch vor dem Bild */
  .kh-step:before { content: ""; position: absolute; z-index: -1; inset: -7cqw -12cqw -9cqw -9cqw; pointer-events: none;
                 background: radial-gradient(closest-side, rgba(10,10,10,.56), rgba(10,10,10,.34) 52%, rgba(10,10,10,0)); }   /* dunkle Wolke nur hinter dem Text, das Bild bleibt hell */
  .kh-step .kh-kick { font-size: 1.15cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.4cqw; }
  .kh-step h2 { font-size: 5.2cqw; line-height: 1; letter-spacing: -.035em; font-weight: 800; margin: 0 0 1.6cqw; }
  .kh-step p { font-size: 1.7cqw; line-height: 1.45; font-weight: 600; margin: 0 0 2.4cqw; max-width: 27em; }
  .kh-s-start h2 { font-size: 3.5cqw; line-height: 1.08; letter-spacing: -.03em; font-weight: 800; margin: 0 0 2.4cqw; }
  .kh-s-info, .kh-s-kontakt { opacity: 0; pointer-events: none; }
  .kh-s-info h2 { font-size: 3.5cqw; line-height: 1.08; }
  .kh-btn { display: inline-block; font-size: 1.6cqw; font-weight: 700; padding: 1.35cqw 2.5cqw; border-radius: 999px; background: var(--acid); color: var(--dark); text-decoration: none; text-shadow: none; }
  .kh-links { display: flex; flex-wrap: wrap; gap: .6cqw 2.2cqw; margin-top: 2.6cqw; }
  .kh-links a { color: #fff; text-decoration: none; font-size: 1.5cqw; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: .25cqw; }
  .kh-links a:hover, .kh-links a:focus-visible { border-color: var(--acid); outline: none; }
  .kh-end { position: absolute; left: 0; top: calc((100% - var(--fst-screen-h)) * .82); width: 1px; height: 1px; }

  /* aufgeklappt, nach der Couch: Nachricht schreiben – wie ein Mail-Fenster */
  .kh-mail { position: relative; min-height: var(--fst-screen-h); background: var(--light); color: var(--dark); padding: 7cqw 6cqw 7cqw; display: flex; flex-direction: column; text-shadow: none; }
  .kh-mail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; }
  .kh-mail-top h2 { font-size: 3.4cqw; font-weight: 700; letter-spacing: -.02em; margin: 0; }
  .kh-mail-send { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: 0; padding: 0; background: var(--acid); color: var(--dark); font: 800 2.5cqw/1 'Manrope', system-ui, sans-serif; cursor: pointer; }
  .kh-mail-row { display: grid; grid-template-columns: 9cqw 1fr; align-items: center; border-bottom: 1px solid rgba(10,10,10,.14); padding: 1.25cqw 0; font-size: 1.7cqw; }
  .kh-mail-row span { opacity: .55; }
  .kh-mail input, .kh-mail textarea { font: inherit; color: var(--dark); background: none; border: 0; outline: none; width: 100%; padding: 0; }
  .kh-mail input::placeholder, .kh-mail textarea::placeholder { color: rgba(10,10,10,.4); }
  .kh-mail textarea { flex: 1; min-height: 13cqw; resize: none; padding: 1.8cqw 0; font-size: 1.7cqw; line-height: 1.5; }
  .kh-mail .kh-hp { position: absolute; left: -9999px; }
  .kh-mail-note { font-size: 1.3cqw; opacity: .7; min-height: 1.6em; margin: 0 0 1.4cqw; }
  .kh-mail .kh-btn { border: 0; cursor: pointer; font-family: inherit; }

  /* zugeklappt am Ende: eingehender Anruf */
  .k-call { position: relative; height: 100%; overflow: hidden; background: #14110e; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 17cqw 7cqw 9cqw; text-align: center; }
  .k-call-bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(26px) brightness(.5) saturate(1.2); }
  .k-call > *:not(.k-call-bg) { position: relative; z-index: 1; }
  .k-call .kh-lw { font-size: 5.5cqw; line-height: 1; white-space: nowrap; }
  .k-call-sub { font-size: 3.5cqw; margin: 3.4cqw 0 0; opacity: .9; }
  .k-call > .k-call-pic { z-index: 0; width: 47cqw; height: 47cqw; margin: auto 0; }
  .k-call-pic img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 50%;
                    box-shadow: 0 0 0 .5cqw rgba(232,255,0,.95), 0 0 4cqw 1cqw rgba(232,255,0,.55), 0 0 12cqw 3cqw rgba(232,255,0,.2); animation: k-schlag 3.6s ease-in-out infinite; }   /* Schein: innen kräftig, nach außen weich – schlägt im Takt der Wellen */
  .k-call-pic i { position: absolute; inset: -80%; border-radius: 50%; pointer-events: none; opacity: 0;   /* breite Welle, schießt hinter dem Bild hervor nach außen */
                  background: radial-gradient(closest-side, rgba(232,255,0,0) 44%, rgba(232,255,0,.5) 50%, rgba(232,255,0,.3) 56%, rgba(232,255,0,.14) 66%, rgba(232,255,0,.04) 80%, rgba(232,255,0,0) 92%);
                  animation: k-welle 3.6s linear infinite; }
  .k-call-pic i:nth-child(2) { animation-delay: .5s; } .k-call-pic i:nth-child(3) { animation-delay: 1s; }   /* drei Wellen kurz hintereinander = ein Impuls, dann Pause */
  @keyframes k-welle { 0% { transform: scale(.72); opacity: 0; } 12% { transform: scale(.84); opacity: .85; } 36% { transform: scale(1.08); opacity: .6; } 60% { transform: scale(1.32); opacity: .26; } 82%, 100% { transform: scale(1.54); opacity: 0; } }   /* läuft gleichmäßig nach außen und wird dabei immer schwächer */
  @keyframes k-schlag { 0%, 55%, 100% { transform: scale(1); box-shadow: 0 0 0 .5cqw rgba(232,255,0,.95), 0 0 4cqw 1cqw rgba(232,255,0,.55), 0 0 12cqw 3cqw rgba(232,255,0,.2); }
                        22% { transform: scale(1.022); box-shadow: 0 0 0 .6cqw rgba(232,255,0,1), 0 0 6cqw 2cqw rgba(232,255,0,.72), 0 0 18cqw 5.5cqw rgba(232,255,0,.3); } }
  .k-slide { position: relative; width: 100%; height: 14.6cqw; border-radius: 999px; background: rgba(245,245,245,.14); display: flex; align-items: center; justify-content: center;
             touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
  .k-slide:focus-visible { box-shadow: 0 0 0 2px var(--acid); }
  .k-knob { position: absolute; left: 1.3cqw; top: 1.3cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--acid); color: var(--dark); display: grid; place-items: center; will-change: transform; }
  .k-knob svg { width: 5.4cqw; height: 5.4cqw; fill: currentColor; }
  .k-slide-text { font-size: 3.5cqw; font-weight: 600; padding-left: 9cqw; }
  @container foldcover (min-aspect-ratio: 1/1) {     /* Handy: zugeklappt liegt der Bildschirm quer */
    .k-call { padding: 9cqh 7cqw 9cqh; } .k-call .kh-lw { font-size: 4.4cqw; } .k-call-sub { font-size: 2.6cqw; margin-top: 2cqw; }
    .k-call > .k-call-pic { width: 32cqh; height: 32cqh; }
    .k-slide { width: 62%; height: 17cqh; } .k-knob { left: 1.5cqh; top: 1.5cqh; width: 14cqh; height: 14cqh; } .k-knob svg { width: 6.4cqh; height: 6.4cqh; }
    .k-slide-text { font-size: 2.7cqw; padding-left: 12cqh; }
  }
  @media (prefers-reduced-motion: reduce) { .k-call-pic i, .k-call-pic img { animation: none; } }

  /* Handy: Gerät steht hochkant, Text unten über die ganze Breite */
  @container fold (max-width: 560px) {
    .kh-scene .kh-shade { background: linear-gradient(0deg, rgba(10,10,10,.72), rgba(10,10,10,.18) 52%, rgba(10,10,10,0) 70%); }
    .kh-step { left: 7cqw; right: 7cqw; width: auto; bottom: 13cqw; }
    .kh-step .kh-kick { font-size: 2.9cqw; margin-bottom: 2.6cqw; } .kh-step h2 { font-size: 11.5cqw; margin-bottom: 3cqw; } .kh-step p { font-size: 4.1cqw; margin-bottom: 5cqw; }
    .kh-s-start h2 { font-size: 6.2cqw; margin-bottom: 5cqw; }
    .kh-s-info h2 { font-size: 7.6cqw; }
    .kh-btn { font-size: 4cqw; padding: 3.2cqw 5.6cqw; }
    .kh-links { gap: 2.4cqw 5cqw; margin-top: 5.4cqw; } .kh-links a { font-size: 3.8cqw; }
    .kh-mail { padding: 15cqw 7cqw 12cqw; } .kh-mail-top { margin-bottom: 4cqw; } .kh-mail-top h2 { font-size: 7.4cqw; }
    .kh-mail-send { width: 10cqw; height: 10cqw; font-size: 5.4cqw; }
    .kh-mail-row { grid-template-columns: 19cqw 1fr; padding: 3cqw 0; font-size: 4cqw; }
    .kh-mail textarea { font-size: 4cqw; padding: 4cqw 0; min-height: 34cqw; } .kh-mail-note { font-size: 3.2cqw; margin-bottom: 3cqw; }
  }