/* === Track No. Design-Tokens (aus IG Carousel/design.md) === */
:root{
  --orange:#FB8A45; --orange-deep:#E0732F; --oat:#E8D6BB; --paper:#F2E9D8;
  --ink:#1B1714; --clay:#9B5E39; --hairline:rgba(27,23,20,.22);
  --display:"Archivo",system-ui,sans-serif;
  --expanded:"Archivo Expanded","Archivo",sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --step--1:clamp(.72rem,.69rem + .15vw,.8rem);
  --step-0:clamp(.95rem,.9rem + .25vw,1.05rem);
  --step-1:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  --step-2:clamp(1.7rem,1.4rem + 1.4vw,2.6rem);
  --step-3:clamp(2.2rem,1.6rem + 3vw,4.4rem);
  --gut:clamp(1rem,.8rem + 2vw,2.5rem);
  --rule:1.5px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--oat);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.10}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.eyebrow{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.3em;text-transform:uppercase}

/* === Kopfbereich: Orange/Oat-Split mit Geisterzahl === */
.masthead{position:relative;overflow:hidden;border-bottom:var(--rule) solid var(--ink)}
.masthead .top{background:var(--orange);padding:var(--gut) var(--gut) 0}
.masthead .bot{background:var(--oat);padding:0 var(--gut)}
.masthead .top > *,.masthead .bot > *{position:relative;z-index:2}
.ghost{position:absolute;right:-.06em;top:50%;transform:translateY(-44%);
  font-family:var(--expanded);font-weight:900;font-size:clamp(9rem,6rem + 16vw,19rem);
  line-height:.72;letter-spacing:-.05em;color:var(--paper);z-index:1;pointer-events:none;user-select:none}
.meta-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.masthead h1{font-family:var(--display);font-weight:900;font-size:var(--step-3);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;padding:clamp(1.4rem,1rem + 3vw,3rem) 0 .5rem}
.masthead .sub{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;padding:.6rem 0 1rem;max-width:40ch}
nav.tabs{display:flex;gap:0;border-top:var(--rule) solid var(--ink);margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overflow-x:auto}
nav.tabs button{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;padding:.85rem 1rem .8rem;border-right:1px solid var(--hairline);white-space:nowrap}
nav.tabs button:first-child{padding-left:0}
nav.tabs button[aria-selected="true"]{font-weight:700}
nav.tabs button[aria-selected="true"]::before{content:"// ";color:var(--orange-deep)}

/* === Hauptlayout === */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.inbox{min-width:0}
@media (min-width:960px){
  .app{grid-template-columns:minmax(320px,400px) 1fr;height:calc(100vh - var(--mast-h,0px))}
  .inbox{border-right:var(--rule) solid var(--ink);overflow-y:auto}
  .detail{overflow-y:auto}
  .detail .back{display:none}
}

/* === Posteingang === */
.filters{display:flex;gap:.5rem;padding:1rem var(--gut);border-bottom:1px solid var(--hairline);overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar,nav.tabs::-webkit-scrollbar{display:none}
nav.tabs{scrollbar-width:none}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--ink);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.conv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem 1rem;width:100%;text-align:left;padding:1.1rem var(--gut);border-bottom:1px solid var(--hairline);position:relative;transition:background .15s}
.conv:hover{background:var(--paper)}
.conv[aria-current="true"]{background:var(--paper);box-shadow:inset 4px 0 0 var(--orange)}
.conv .idx{font-family:var(--expanded);font-weight:900;font-size:1.5rem;line-height:1;grid-row:span 3;color:var(--clay);min-width:2.2ch}
.conv .who{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.01em;display:flex;align-items:center;gap:.5rem}
.conv .unread{width:.55rem;height:.55rem;background:var(--orange-deep);display:inline-block}
.conv .when{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--clay);text-align:right}
.conv .preview{grid-column:2 / 4;font-size:.9rem;color:rgba(27,23,20,.75);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conv .tags{grid-column:2 / 4;display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}

.tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .5rem;border:1px solid var(--ink);white-space:nowrap}
.tag.fill{background:var(--ink);color:var(--paper)}
.tag.clay{background:var(--clay);color:var(--paper);border-color:var(--clay)}
.tag.orange{background:var(--orange);border-color:var(--ink)}
.tag.crisis{background:var(--ink);color:var(--orange);font-weight:700}
.tag.dead{text-decoration:line-through;opacity:.6}

/* === Detailansicht === */
.detail{background:var(--oat);position:relative}
.empty{display:grid;place-items:center;height:100%;min-height:50vh;padding:var(--gut);text-align:center}
.empty .big{font-family:var(--display);font-weight:900;font-size:var(--step-2);text-transform:uppercase;line-height:.9}
.dhead{position:sticky;top:0;z-index:5;background:var(--oat);border-bottom:var(--rule) solid var(--ink);padding:1rem var(--gut);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.dhead .back{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;padding:.5rem .7rem;border:var(--rule) solid var(--ink)}
.dhead h2{font-family:var(--display);font-weight:900;font-size:var(--step-1);text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.dhead .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:auto}

.thread{padding:var(--gut);display:flex;flex-direction:column;gap:1rem;max-width:760px}
.msg{max-width:min(88%,560px);padding:.9rem 1rem;border:var(--rule) solid var(--ink);background:var(--paper);position:relative}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--paper)}
.msg .m-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:.35rem}
.msg p{white-space:pre-wrap}

/* === Entwurfs-Ticket === */
.draft{margin:0 var(--gut) var(--gut);max-width:760px;border:var(--rule) solid var(--ink);background:var(--orange);position:relative;overflow:hidden}
.draft .dnum{position:absolute;right:-.04em;top:-.2em;font-family:var(--expanded);font-weight:900;font-size:7rem;color:rgba(242,233,216,.45);line-height:.7;pointer-events:none}
.draft-in{padding:1.2rem;position:relative;z-index:1}
.draft h3{font-family:var(--display);font-weight:900;font-size:var(--step-2);text-transform:uppercase;line-height:.9;margin:.3rem 0 1rem}
.draft textarea{width:100%;min-height:9.5rem;resize:vertical;font-family:var(--body);font-size:var(--step-0);line-height:1.5;padding:.9rem;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
.draft textarea:focus{outline:2px solid var(--ink);outline-offset:0}
.draft-status{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.learn{opacity:0;transition:opacity .2s}
.learn.on{opacity:1}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);padding:.85rem 1.2rem;border:var(--rule) solid var(--ink);display:inline-flex;align-items:center;gap:.5rem;transition:background .15s,color .15s,transform .1s}
.btn::before{content:"//";opacity:.5}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--clay);border-color:var(--clay)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;margin-top:.8rem}

/* Krisen-Variante */
.draft.crisis{background:var(--ink);color:var(--paper)}
.draft.crisis .eyebrow{color:var(--orange)}
.draft.crisis .dnum{color:rgba(242,233,216,.08)}
.draft.crisis .btn{border-color:var(--paper)}
.draft.crisis .btn-ink{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.draft.crisis .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.crisis-box{border:var(--rule) solid var(--orange);padding:.9rem 1rem;margin-bottom:1rem;font-size:.92rem}
.crisis-box strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;margin:.2rem 0 1rem;cursor:pointer}
.check input{margin-top:.25rem;accent-color:var(--orange)}

/* Emoji-Auswahl */
.tools{display:flex;gap:.5rem;align-items:center;margin-top:.6rem}
.emoji-btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .7rem;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);display:inline-flex;gap:.4rem;align-items:center}
.emoji-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.emoji-panel{margin-top:.6rem;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);padding:.7rem;display:none}
.emoji-panel.open{display:block}
.emoji-panel .eyebrow{font-size:.62rem;letter-spacing:.2em;color:var(--clay);display:block;margin:.2rem 0 .45rem}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.6rem,1fr));border-top:1px solid var(--hairline);border-left:1px solid var(--hairline);margin-bottom:.6rem}
.emoji-grid button{background:var(--paper);font-size:1.35rem;line-height:1;padding:.5rem 0;transition:background .12s;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:var(--oat)}
.draft.crisis .emoji-btn{border-color:var(--paper)}

/* Schreib-Animation */
.typing{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.typing span{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* === Toast mit Rückgängig === */
.toast button{margin-left:1rem;font-family:var(--mono);font-weight:700;font-size:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--ink);background:var(--orange);padding:.45rem .7rem}
.toast{display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);background:var(--ink);color:var(--paper);border:var(--rule) solid var(--ink);padding:.7rem .7rem .7rem 1.2rem;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;z-index:60;transition:transform .3s ease,visibility .3s;max-width:calc(100% - 2rem);visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}

.placeholder{padding:var(--gut);max-width:640px}
.placeholder h2{font-family:var(--display);font-weight:900;font-size:var(--step-2);text-transform:uppercase;line-height:.9;margin:.5rem 0 1rem}

/* === Handy: Detail als Vollbild === */
@media (max-width:959px){
  .detail{position:fixed;inset:0;z-index:20;overflow-y:auto;transform:translateX(100%);transition:transform .28s ease;visibility:hidden}
  .detail.open{transform:none;visibility:visible}
  .detail .empty{display:none}
  .dhead .tags{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* === Ergänzungen für die echte App === */
.icon-btn{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;border:var(--rule) solid var(--ink);padding:.3rem .6rem;background:transparent}
.icon-btn:hover{background:var(--ink);color:var(--paper)}
.icon-btn[aria-busy="true"]{opacity:.5;pointer-events:none}
.meta-right{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.status-line{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);padding:.6rem var(--gut);border-bottom:1px solid var(--hairline)}
.fehler-box{border:var(--rule) solid var(--ink);background:var(--paper);padding:1rem;margin:var(--gut);max-width:640px}
.fehler-box strong{font-family:var(--display);text-transform:uppercase}
.note{border:var(--rule) solid var(--ink);background:var(--paper);padding:1rem 1.2rem;margin:0 var(--gut) var(--gut);max-width:760px}
.note .eyebrow{color:var(--clay);display:block;margin-bottom:.4rem}
.ai-hint{border:1px dashed var(--ink);padding:.6rem .8rem;margin-bottom:.8rem;font-size:.88rem;background:rgba(242,233,216,.55)}
.draft.crisis .ai-hint{border-color:var(--orange);background:transparent}
.skeleton{border:var(--rule) solid var(--ink);background:var(--paper);padding:.9rem;min-height:9.5rem;color:var(--ink)}

.page{padding:var(--gut);max-width:900px}
.page h2{font-family:var(--display);font-weight:900;font-size:var(--step-2);text-transform:uppercase;line-height:.9;margin:.5rem 0 1rem}
.page p.lead{max-width:60ch;margin-bottom:1.2rem}
.guide-editor{width:100%;min-height:60vh;font-family:var(--mono);font-size:.85rem;line-height:1.6;padding:1rem;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);resize:vertical;border-radius:0}
.guide-editor:focus{outline:2px solid var(--orange-deep);outline-offset:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink);margin-bottom:var(--gut)}
.stat{background:var(--paper);padding:1.2rem;position:relative;overflow:hidden}
.stat .n{font-family:var(--expanded);font-weight:900;font-size:clamp(2.6rem,2rem + 3vw,4rem);line-height:.9}
.stat .eyebrow{color:var(--clay)}
.pair{border:var(--rule) solid var(--ink);background:var(--paper);margin-bottom:1rem}
.pair header{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.6rem .9rem;border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.pair .cols{display:grid;grid-template-columns:1fr 1fr}
.pair .cols > div{padding:.9rem;white-space:pre-wrap;font-size:.9rem}
.pair .cols > div + div{border-left:1px solid var(--hairline);background:var(--oat)}
.pair .cols .eyebrow{display:block;font-size:.6rem;color:var(--clay);margin-bottom:.4rem}
@media (max-width:640px){.pair .cols{grid-template-columns:1fr}.pair .cols > div + div{border-left:0;border-top:1px solid var(--hairline)}}

/* Ausgeblendete Bereiche wirklich ausblenden (sonst gewinnt display:grid) */
[hidden]{display:none !important}

/* === Story-Vorschau, Anhänge, geteilte Beiträge === */
.story{display:block;width:132px;margin:.1rem 0 .6rem;text-decoration:none;color:inherit}
.story .medien{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ink);border:var(--rule) solid var(--ink);transition:transform .15s}
.story .medien.frei{aspect-ratio:auto;max-height:240px}
.story:hover .medien{transform:translateY(-2px)}
.msg.me .story .medien{border-color:var(--paper)}
.m-label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem;opacity:.8}
.m-link{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:.3rem .55rem;margin:.1rem 0 .5rem;text-decoration:none;color:inherit}
.m-link:hover{background:var(--ink);color:var(--paper)}
.msg.me .m-link:hover{background:var(--paper);color:var(--ink)}

/* === Sprachnachricht (von Instagram nicht herausgegeben) === */
.m-audio{border:1px dashed currentColor;padding:.6rem .75rem;font-size:.88rem;margin:.1rem 0 .3rem;max-width:34ch}

/* === Liken === */
.thread{gap:1.4rem}
.msg .herz{position:absolute;right:-.75rem;bottom:-.8rem;width:2rem;height:2rem;display:grid;place-items:center;font-size:1.05rem;line-height:1;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);transition:transform .12s,background .12s}
.msg .herz:hover{transform:scale(1.1)}
.msg .herz.an{background:var(--orange);color:var(--ink)}
.msg .herz[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.msg .reaktion{position:absolute;left:.7rem;bottom:-.8rem;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:.85rem;line-height:1;padding:.2rem .35rem}
.msg:not(.me){user-select:text}
.m-hinweis{font-size:.8rem;opacity:.8;margin:.1rem 0 .3rem;max-width:34ch}

/* === Hinweis: neue Programmversion === */
.neustart{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:.6rem var(--gut);border-bottom:var(--rule) solid var(--orange)}
.neustart strong{color:var(--orange);text-transform:uppercase;letter-spacing:.14em;margin-right:.4rem}
.neustart code{font-family:inherit;background:rgba(242,233,216,.12);padding:0 .3rem}