/* ============================================================
   ELANUM App-Screens · Vorschau
   Nur das, was einzelne Beispielseiten brauchen. Der Rahmen und alle
   wiederverwendbaren Muster liegen in app.css. Nicht Teil des Pakets.
   ============================================================ */

/* ---------- Heute ---------- */
.day{gap:16px}
.day__top{display:grid;grid-template-columns:minmax(0,1fr) clamp(116px,34%,156px);gap:16px;align-items:start}
.day__intro{display:grid;gap:4px;padding-top:4px}
.day__phase{font:var(--type-label);color:var(--ink-2)}
.day__arc{margin:-6px -6px 0 0}
/* Die Hauptspalte ist ein eigener Container: zwei Spalten im Tag erst,
   wenn der Tag selbst breit genug ist, nicht schon das Fenster. */
.heute-main{container:heute/inline-size}
@container heute (min-width:620px){
  .day{grid-template-columns:minmax(0,1fr) 200px;column-gap:40px;padding:36px 40px}
  .day>*{grid-column:1}
  .day__top{display:contents}
  .day__intro{grid-column:1;grid-row:1}
  .day__arc{grid-column:2;grid-row:1 / span 5;align-self:center;margin:0}
}
.next{grid-template-columns:88px minmax(0,1fr);gap:16px 20px;align-items:center;box-shadow:var(--raised)}
.next__copy{display:grid;gap:4px}
.next__actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.next__actions .button{flex:1 1 auto}
@container heute (min-width:560px){
  .next{grid-template-columns:104px minmax(0,1fr) auto;padding:24px 28px}
  .next__actions{grid-column:auto;flex-direction:column;align-items:stretch}
}
.mara{display:flex;align-items:center;gap:14px}
.note-paper{display:grid;gap:16px;padding:24px;border-radius:var(--radius-surface);background:linear-gradient(130deg,#FAF6ED,#ECE6DA);box-shadow:var(--paper-shadow)}
.note-paper textarea{min-height:120px;resize:vertical}

/* ---------- Ich ---------- */
.ich-rad{margin-bottom:clamp(64px,10vw,112px)}
.ich-weg .track{margin-top:16px}

/* ---------- Weg ---------- */
.weg-scale{justify-self:start}
.paper-card{display:grid;gap:20px;padding:28px;border-radius:var(--radius-surface);background:linear-gradient(130deg,#FAF6ED,#ECE6DA);box-shadow:var(--paper-shadow)}
.paper-card blockquote{font:var(--type-title);letter-spacing:-.015em}

/* ---------- Entdecken ---------- */
.discover{display:grid;gap:32px;align-items:start}
.discover__steps{max-width:440px}
.profile .app-section{container-type:inline-size}
.space-hero{gap:8px;padding-bottom:20px}
.app-hero.space-hero{--tone:#CBD9D6}
.space-hero__head{display:grid;gap:4px}
.space-hero__words{font:var(--type-heading);color:#FFF}
.space-hero__note{font:var(--type-label);color:#CBD9D6}
.discover__space{margin:4px -8px 0;width:calc(100% + 16px)}
.discover__space .relationship-label{font-size:clamp(24px,7cqi,32px);color:#F6F1E7}
.profile__wheel{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center}
.profile__facts{display:grid;gap:10px}
.profile__facts div{display:grid;gap:2px}
.profile__facts dt{font:var(--type-label);color:var(--ink-2)}
.profile__facts dd{margin:0;font:var(--type-heading)}
.resonate-on{display:grid;gap:8px}
.resonate-quote{font:var(--type-title);letter-spacing:-.015em}
.resonate-moment{gap:12px}
.resonate-moment .relationship-frame{margin:-8px -8px 0;width:calc(100% + 16px)}
.resonate-moment .relationship-label{font-size:clamp(24px,6vw,32px);color:#F6F1E7}
.resonate-moment h2:focus{outline:none}

/* ---------- Chats ---------- */
.thread{display:flex;flex-direction:column;gap:20px;min-height:60vh}
.thread .app-thread{flex:1}
.thread .app-composer{margin-top:auto}
.thread__head{display:flex;align-items:center;gap:14px;padding-bottom:8px}
.thread__who{display:grid;gap:0}
.thread__space{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-left:-10px;padding:0 10px;border-radius:var(--radius-control);font:var(--type-label);color:var(--ink-2);text-decoration:underline;text-underline-offset:5px}
.thread__ideas{display:grid;gap:12px}
.thread__chips{display:flex;gap:8px;margin:-6px -20px;padding:6px 20px 10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.thread__chips::-webkit-scrollbar{display:none}
.idea{flex:none;scroll-snap-align:start}
.idea{min-height:44px;max-width:280px;padding:10px 16px;border:0;border-radius:22px;background:var(--canvas);box-shadow:var(--raised-sm);font:var(--type-label);color:var(--ink);text-align:left}
.bubble--element{gap:6px}
.bubble--element>span:last-child{color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.idea:hover,.thread__space:hover{background:var(--paper);color:var(--ink)}}
/* Telefon: Im Verlauf weicht die Leiste, der Verlauf bekommt den Platz. */
@media(max-width:599.98px){
  body[data-view=detail]{--app-bottom:var(--safe-bottom)}
  body[data-view=detail] .app-nav{display:none}
}
/* Im Verlauf ersetzt sein eigener Kopf (Zurück, Person) den Kopf der Seite. */
@media(max-width:1023.98px){
  body[data-view=detail] .chats-head,body[data-view=detail] .app-head{display:none}
  body[data-view=detail] .app-main{padding-bottom:calc(var(--safe-bottom) + 12px)}
  body[data-view=detail] .thread{min-height:calc(100dvh - var(--safe-bottom) - 12px)}
  body[data-view=detail] .thread__head{position:sticky;top:0;z-index:25;margin:0 calc(-1 * var(--app-pad));padding:calc(var(--safe-top) + 8px) var(--app-pad) 8px calc(var(--app-pad) - 8px);
    background:color-mix(in srgb,var(--canvas) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
}
@media(min-width:1024px){
  .thread{display:flex;flex-direction:column;gap:16px;height:calc(100dvh - var(--app-head) - 40px);min-height:520px;position:sticky;top:calc(var(--app-head) + 16px);padding:20px 24px 24px;border-radius:var(--radius-surface);background:var(--canvas);box-shadow:var(--pressed)}
  .thread .app-thread{flex:1;overflow:auto;padding:4px 4px 12px;margin:0 -4px}
  .thread .app-composer{position:static}
}
.bubble__resonance{display:inline-flex;align-items:center;gap:8px;font:var(--type-label);color:var(--ink-2)}
/* Resonanz ist eine Verbindung: der Rand im Markenspektrum, still. */
.bubble--element{position:relative;background:var(--paper);box-shadow:var(--raised-sm),var(--glow)}
.bubble--element::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;background:linear-gradient(120deg,var(--spectrum-stops));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ---------- Aktivitäten ---------- */
.erleben-when{justify-self:start;max-width:100%}
.app-grid>li{display:grid}
.app-grid>.event-feature{grid-column:1 / -1}
.event-feature .event{grid-template-columns:auto minmax(0,1fr);text-align:left;cursor:pointer;border:0;font:inherit}
.event-feature .event__flag{grid-column:1 / -1;justify-self:start;padding:6px 14px;border-radius:16px;background:#FFFFFFB8;box-shadow:inset 0 0 0 1px #FFFFFF;font:var(--type-label);font-weight:600;color:var(--ink)}
.event-feature .event__date{width:80px;height:80px;background:#FFFDF8;box-shadow:var(--raised-sm)}
.event-feature .event__title{font:var(--type-title);letter-spacing:-.015em;color:var(--ink)}
.event-feature .persons .person{box-shadow:0 0 0 3px #FFFDF8}
@media(hover:hover) and (pointer:fine){.event-feature .event:hover{box-shadow:inset 0 1px 0 #FFFFFFE6,12px 16px 30px -18px #A39B8A,-10px -10px 26px #FFFFFFC0,var(--glow)}}
.event__text{display:none}
@container app-main (min-width:760px){
  .event-feature .event{grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);column-gap:24px}
  .event-feature .event__text{display:block;grid-column:3;grid-row:2 / span 2;align-self:center;font:var(--type-body);color:var(--ink-2)}
  .event-feature .event__meta,.event-feature .event__foot{grid-column:1 / 3}
}
@media(hover:hover) and (pointer:fine){.event-feature .event:hover{box-shadow:14px 18px 36px -16px #7F776A,var(--glow)}}
.event-facts{display:grid;gap:14px}
.event-facts div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start}
.event-facts dt{color:var(--ink-2);padding-top:2px}
.event-facts dd{margin:0;display:grid;font:var(--type-label);font-weight:600}
.event-facts dd span{font-weight:500;color:var(--ink-2)}
.who{display:flex;flex-wrap:wrap;gap:16px 24px}
.who li{display:flex;align-items:center;gap:12px;font:var(--type-label);font-weight:600}
.rsvp{display:grid;gap:14px;margin:0;padding:0;border:0;min-width:0}
.rsvp .segmented{display:flex}
.rsvp .segmented button{flex:1 1 auto}
.app-actions--end{justify-content:center;margin-top:40px}
.app-actions--end>.button{flex:0 1 auto}
@media(min-width:600px){.app-actions--end{position:static;justify-content:flex-start;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Ankommen: ein Ablauf ohne Navigation ---------- */
.app--flow{padding-left:0;--app-bottom:var(--safe-bottom)}
.flow{display:grid;gap:40px;padding-top:8px;max-width:1120px}
.flow__intro{display:none}
.flow__form{max-width:560px;width:100%;margin:0 auto}
.flow__head{gap:12px}
.flow__head .element-chips{margin-top:6px}
.flow__privacy{font:var(--type-label)}
.flow .app-steps{max-width:340px}
@media(min-width:600px){.flow .app-actions{position:static;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(min-width:1024px){
  .flow{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(48px,7vw,112px);align-items:center;min-height:calc(100dvh - var(--app-head) - 48px)}
  .flow__intro{display:grid;gap:28px;align-content:center;max-width:440px}
  .flow__zeichen{width:min(260px,60%);filter:drop-shadow(6px 9px 6px #79726830) drop-shadow(-3px -3px 3px #fff8)}
  .flow__voice{font:var(--type-title);letter-spacing:-.015em}
  .flow__form{margin:0}
}

/* ---------- Folgt ---------- */
.folgt-steps{width:120px}