/* aguante – Gestaltung. Farben hier zentral ändern. */
:root{
  --ink:#edf0e5;        /* Textfarbe hell */
  --dark:#22292c;       /* Fensterfarbe / Text auf Pfirsich */
  --bubble:#343e42;     /* Nachrichtenblasen */
  --accent:#f4b48b;     /* Pfirsich */
  --muted:#bac7cb;
  --line:#4b5154;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#111923;color:var(--ink);font:17px/1.55 "Manrope",Arial,Helvetica,sans-serif}
a{color:inherit}
a:hover{color:var(--accent)}
img{max-width:100%}
button:focus-visible,a:focus-visible{outline:3px solid #c87440;outline-offset:4px}

.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(#10172235,#10172250),url('../assets/night-sky.jpg') center/cover no-repeat}
.star-layer{position:fixed;inset:0;z-index:1000;overflow:hidden;pointer-events:none}

.layout{position:relative;z-index:1;max-width:1420px;margin:auto;display:flex;gap:64px;padding:0 40px;min-height:100vh}

/* Seitenleiste */
.sidebar{flex:0 0 300px;position:sticky;top:0;height:100vh;padding:40px 0;display:flex;flex-direction:column}
.sidebar .brand{display:block;width:280px;max-width:100%}
.sidebar .brand img{display:block;width:100%;height:auto}
.sidebar nav{display:flex;flex-direction:column;gap:17px;margin-top:65px;font-size:21px}
.sidebar nav a{text-decoration:none;color:var(--ink);text-shadow:0 0 7px #ffffff88,0 0 18px #ffffff44;transition:color .2s,text-shadow .2s}
.sidebar nav a:hover{color:#fff;text-shadow:0 0 8px #ffffffbb,0 0 24px #ffffff77}
.sidebar nav a.active{color:var(--accent);text-shadow:0 0 8px #f4b48baa,0 0 22px #f4b48b55}
.side-footer{margin-top:auto;font-size:12px;line-height:1.7;color:var(--muted)}
.brand-text{font-weight:400}

/* Chatfenster */
.window{flex:1 1 0;max-width:850px;min-width:0;border-left:1px solid #bbcddd20;border-right:1px solid #bbcddd20}
.chat-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:clamp(8px,2vw,20px);padding:clamp(14px,3vw,25px) clamp(12px,3.5vw,30px);background:#22292cf5;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.identity{display:flex;align-items:center;gap:clamp(8px,1.5vw,12px);flex:1;min-width:0}
.avatar-button{border:0;background:transparent;padding:0;cursor:zoom-in;border-radius:50%;line-height:0;flex-shrink:0}
.avatar-button img{display:block;width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--accent)}
.sender-logo{display:block;flex:0 1 225px;min-width:0;width:225px;height:auto;mix-blend-mode:lighten}
.sender-contact{margin-left:auto;padding-left:clamp(4px,3vw,28px);flex-shrink:0;text-align:right;font-size:clamp(12px,1.8vw,15px);line-height:1.7}
.sender-contact a{display:block;text-decoration:none;white-space:nowrap}

.messages{display:flex;flex-direction:column;gap:clamp(16px,2.5vw,25px);padding:clamp(22px,5vw,45px) clamp(14px,4vw,35px);background:rgb(34 41 44 / 80%)}
.message{align-self:flex-end;max-width:min(83%,640px);background:var(--bubble);border-radius:22px 22px 5px 22px;padding:clamp(18px,3vw,26px) clamp(18px,3.5vw,30px);font-size:clamp(17px,2vw,19px);box-shadow:0 4px 22px #0002;overflow-wrap:anywhere}
.message p{margin:0}
.message h3{margin:0 0 10px;font-size:clamp(20px,2.6vw,25px);font-weight:800;line-height:1.3}
.message .emoji{margin-right:7px}
.message.title{align-self:flex-start;background:var(--accent);color:var(--dark);border-radius:5px 22px 22px 22px;padding:clamp(14px,2.5vw,23px) clamp(18px,3.5vw,30px);font-size:clamp(25px,4vw,34px);letter-spacing:-1.5px;font-weight:800;line-height:1.2;scroll-margin-top:140px}
.message.title h1{margin:0;font:inherit;letter-spacing:inherit}
.message.contact p{display:flex;flex-direction:column}
.message.contact a{text-decoration:none}

/* Schnellmenü unten */
.quick{position:sticky;bottom:0;z-index:9;display:flex;align-items:center;gap:clamp(5px,1.2vw,10px);overflow-x:auto;scrollbar-width:none;padding:clamp(10px,2.5vw,23px) clamp(8px,3.5vw,30px);background:rgb(34 41 44 / 80%);border-top:1px solid #bbcddd30}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:0 0 auto;white-space:nowrap;text-decoration:none;font-size:clamp(12px,1.8vw,15px);background:var(--bubble);color:var(--ink);border:1px solid #56645d;border-radius:30px;padding:clamp(9px,1.4vw,12px) clamp(10px,2.4vw,20px)}
.quick a.cta{background:var(--accent);color:var(--dark);border-color:var(--accent);font-weight:700}
.star-button{flex:0 0 auto;margin-left:auto;font:inherit;font-size:20px;line-height:1;min-width:44px;min-height:44px;padding:8px;border-radius:30px;border:1px solid #768580;background:var(--bubble);color:var(--ink);cursor:pointer;touch-action:manipulation}
.star-button:hover{background:#48565a}
.star-button:disabled{opacity:.65;cursor:default}

/* Fusszeile */
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(18px,3vw,28px) clamp(15px,3.5vw,30px);background:rgb(34 41 44 / 80%);border-top:1px solid #bbcddd30;font-size:13px}
.footer-contact{display:flex;gap:12px}
.footer-contact a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #768580;border-radius:50%;background:#22292c80}
.footer-contact a:hover{background:#48565a}
.footer-contact svg{width:23px;height:23px}

/* Profilfoto gross (rund) */
.portrait-dialog{padding:0;border:0;background:transparent;overflow:visible;width:min(80vw,70vh,440px);aspect-ratio:1}
.portrait-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
.portrait-dialog img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%;border:3px solid var(--accent);box-shadow:0 20px 60px #0008}
.close-photo{position:absolute;right:4%;top:4%;z-index:1;border:0;border-radius:50%;background:#22292ce6;color:#fff;width:38px;height:38px;font-size:28px;line-height:1;cursor:pointer}

/* Sternschnuppe */
.shooting-star{position:absolute;width:48px;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,#fff3cf);filter:drop-shadow(0 0 5px #fff4d1);transform:rotate(var(--angle));transform-origin:right center;animation:shooting-star 1.05s ease-out forwards}
.shooting-star::after{content:"";position:absolute;right:0;top:-1.5px;width:5px;height:5px;border-radius:50%;background:#fff7dd;box-shadow:0 0 9px #fff3ca}
@keyframes shooting-star{0%{opacity:0;translate:0 0}12%{opacity:1}78%{opacity:1}100%{opacity:0;translate:var(--dx) var(--dy)}}

/* Schreibanimation (nur aktiv, wenn in js/main.js eingeschaltet) */
.typing-on .message{opacity:0}
.typing-on .message.visible{opacity:1}
.message.writing{position:relative;overflow:hidden}
.writing-dots{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.writing-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;animation:writing-dot 1s infinite}
.writing-dots i:nth-child(2){animation-delay:.15s}
.writing-dots i:nth-child(3){animation-delay:.3s}
@keyframes writing-dot{50%{opacity:1;transform:translateY(-4px)}}
.message.title.waiting{opacity:1;position:relative;color:transparent}
.message.title.waiting .writing-dots{color:var(--dark);animation:waiting-pulse 1.1s ease-in-out infinite}
@keyframes waiting-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* Mobil */
@media (max-width:800px){
  .layout{display:block;padding:24px 14px 0}
  .sidebar{display:none}
  .window{border:0}
  .chat-header{border-radius:18px 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .typing-on .message{opacity:1}
}

/* Profilfoto: fester Gesichtsausschnitt aus dem Original */
.avatar-button img,.portrait-dialog img{object-position:center center}

/* Absender: Wortmarke ohne Unterzeile, im freien Raum zentriert. */
.chat-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto}.identity{display:contents}.sender-logo{width:100%;max-width:225px;justify-self:center;align-self:center}.sender-contact{margin-left:0;padding-left:4px}

/* Absender-Logo direkt neben dem Profilfoto; mobil mit Unterzeile. */
.chat-header{display:flex}.identity{display:flex;align-items:center;gap:clamp(8px,1.5vw,12px);flex:1;min-width:0}.sender-brand{display:block;flex:0 1 225px;min-width:0;width:225px;line-height:0}.sender-logo{width:100%;max-width:225px;display:block;align-self:center}.sender-contact{margin-left:auto;padding-left:clamp(4px,3vw,28px)}

/* Aktives Desktopmenü ohne dauerhaften Glow. */
.sidebar nav a,.sidebar nav a.active,.sidebar nav a:visited{color:var(--ink);text-shadow:none}
@media (hover:hover) and (pointer:fine){.sidebar nav a:hover{color:#fff;text-shadow:0 0 8px #ffffffbb,0 0 24px #ffffff77}}
.sender-logo{mix-blend-mode:normal;background:transparent}
@media(min-width:801px){.sky{background-image:linear-gradient(#10172235,#10172250),url('../assets/night-sky-desktop.webp')}}

/* Aktiver Menüpunkt apricot; Glow bleibt auf Mausberührung begrenzt. */
.sidebar nav a.active,.sidebar nav a.active:visited{color:var(--accent)}
.star-sparkle{display:inline-block;animation:star-shimmer 4s ease-in-out infinite}
@keyframes star-shimmer{0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}50%{filter:brightness(1.13) drop-shadow(0 0 3px #fff0bc66)}}
.star-button:disabled .star-sparkle{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.star-sparkle{animation:none;filter:none}}

@media(min-width:801px){.avatar-button img{width:72px;height:72px}}

/* Hochwertiges WebP aus dem gelieferten Original, JPEG als Fallback. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .sky { background-image: linear-gradient(#10172235,#10172250),image-set(url("../assets/night-sky-desktop.webp") type("image/webp"),url("../assets/night-sky.jpg") type("image/jpeg")); }
}

/* Mobile bubbles keep their reserved space and enter at a steady pace. */
.typing-on.mobile-typing .message:not(.visible){pointer-events:none}
.typing-on.mobile-typing .message.visible{animation:mobile-bubble-in .24s ease-out both}
@keyframes mobile-bubble-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.typing-on.mobile-typing .message.visible{animation:none}}