:root { --ink:#092842; --green:#45a918; --pale:#eef6ed; }
* { box-sizing:border-box; }
.support-page { margin:0; min-height:100vh; color:var(--ink); font-family:Manrope,Arial,sans-serif; background:radial-gradient(circle at 18% 5%,#fff 0 18%,#edf4f1 76%); }
.support-shell { display:grid; min-height:100vh; padding:34px 16px; place-items:center; }
.support-back { position:fixed; top:23px; left:29px; color:#488a1d; font-size:12px; font-weight:800; text-decoration:none; }
.support-card { width:min(100%,680px); padding:32px 42px; border:1px solid #ebf0ec; border-radius:20px; background:#fff; box-shadow:0 20px 58px #0f324515; }
.support-card header { display:flex; justify-content:space-between; align-items:center; }
.support-logo { display:grid; color:var(--ink); font:900 27px/.78 Manrope,Arial,sans-serif; letter-spacing:-2px; text-decoration:none; }.support-logo span{color:var(--green)}
.support-status { display:flex; align-items:center; gap:6px; color:#5c707c; font-size:11px; }.support-status i { width:8px; height:8px; border-radius:50%; background:#54b81e; }
.support-heading { margin:37px 0 24px; }.support-heading p { margin:0 0 7px; color:#4da519; font-size:10px; font-weight:800; letter-spacing:1.2px; }.support-heading h1 { margin:0; font:800 34px/1.1 Manrope,Arial,sans-serif; letter-spacing:-1.8px; }.support-heading span { display:block; margin-top:9px; color:#627887; font-size:13px; }
.support-chat { min-height:190px; max-height:360px; overflow:auto; padding:15px; border:1px solid #dce8de; border-radius:12px; background:#f7faf7; }
.support-empty { display:grid; gap:7px; padding:31px 16px; text-align:center; color:#677b86; font-size:12px; line-height:1.45; }.support-empty b{color:#17394b;font-size:14px}
.support-message { max-width:82%; margin:0 0 10px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.38; }.support-message small { display:block; margin-bottom:3px; font-weight:800; font-size:9px; }.support-message p{margin:0}.from-customer{margin-left:auto;border-bottom-right-radius:2px;background:#dff3d7;color:#163d24}.from-support{border-bottom-left-radius:2px;background:#fff;color:#1b4056;box-shadow:0 1px 4px #14352112}
.support-form { display:grid; gap:12px; margin-top:19px; }.support-form label{display:grid;gap:6px;color:#254559;font-size:11px;font-weight:800}.support-form input,.support-form textarea{width:100%;border:1px solid #d6e3d8;border-radius:7px;padding:11px;outline:0;color:#183b4d;font:13px Manrope,Arial,sans-serif}.support-form textarea{min-height:88px;resize:vertical}.support-form input:focus,.support-form textarea:focus{border-color:#55af1c;box-shadow:0 0 0 3px #55af1b1b}.support-form button{min-height:48px;border:0;border-radius:8px;background:linear-gradient(105deg,#4aaf18,#319d13);color:white;font:800 14px Manrope,Arial,sans-serif;cursor:pointer}.support-form button b{margin-left:18px;font-size:21px}.support-form p{min-height:16px;margin:0;color:#607a68;font-size:10px}.support-privacy{margin:16px 0 0;color:#73848c;font-size:10px;line-height:1.4}
@media(max-width:720px){.support-shell{display:block;padding:15px}.support-back{position:static;display:inline-block;margin-bottom:18px}.support-card{padding:24px 20px;border-radius:15px}.support-heading{margin:30px 0 20px}.support-heading h1{font-size:29px}.support-chat{min-height:170px;max-height:300px}.support-message{max-width:90%}}

/* Compact view when the chat is embedded in Mein Konto. */
.support-embed { min-height:0; background:#fff; }
.support-embed .support-shell { display:block; min-height:0; padding:0; }
.support-embed .support-back { display:none; }
.support-embed .support-card { width:100%; padding:24px 26px 18px; border:0; border-radius:0; box-shadow:none; }
.support-embed .support-card header { height:auto; padding:0; background:transparent; }
.support-embed .support-heading { margin:16px 0 14px; }
.support-embed .support-heading h1 { font-size:25px; }
.support-embed .support-heading span { font-size:11px; }
.support-embed .support-chat { min-height:190px; max-height:235px; padding:14px; background:#f6faf6; }
.support-embed .support-empty { padding:42px 16px; }
.support-embed .support-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:14px; }
.support-embed .support-form .support-name-field { display:none; }
.support-embed .support-form label { gap:4px; }
.support-embed .support-form textarea { min-height:56px; height:56px; }
.support-embed .support-form button { min-height:56px; padding:0 18px; font-size:12px; }
.support-embed .support-form button b { display:none; }
.support-embed .support-form #supportNotice { grid-column:2 / -1; }
.support-embed .support-privacy { margin-top:10px; }

/* Messenger-like chat inside the account dashboard. */
.support-embed .support-card { min-height: 480px; padding: 12px 14px 10px; }
.support-embed .support-card header, .support-embed .support-heading { display:none; }
.support-embed .support-chat { position:relative; min-height:352px; max-height:352px; padding:48px 20px 14px; border:0; border-radius:9px; background:#fff; overflow-y:auto; }
.support-embed .support-chat::before { content:'Heute'; position:absolute; top:12px; left:50%; transform:translateX(-50%); padding:5px 16px; border-radius:13px; background:#f0f3f5; color:#647481; font:700 9px Manrope,Arial,sans-serif; }
.support-embed .support-empty { position:relative; max-width:230px; margin:20px 0 0 38px; padding:11px 13px; border-radius:3px 10px 10px 10px; background:#f2f5f7; box-shadow:0 2px 9px #1435210d; text-align:left; color:#294359; font-size:10px; }
.support-embed .support-empty::before { content:'SP'; position:absolute; top:0; left:-38px; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#082c48; color:#74c52b; font:800 11px Manrope,Arial,sans-serif; }
.support-embed .support-empty b { display:block; margin-bottom:4px; color:#17394b; font-size:10px; }
.support-embed .support-message { position:relative; max-width:70%; margin-bottom:12px; padding:10px 12px; border-radius:4px 10px 10px 10px; font-size:11px; }
.support-embed .support-message small { margin-bottom:4px; font-size:8px; }
.support-embed .from-support { margin-left:38px; background:#f2f5f7; box-shadow:0 2px 9px #1435210d; }
.support-embed .from-support::before { content:'SP'; position:absolute; left:-38px; top:0; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#082c48; color:#74c52b; font:800 11px Manrope,Arial,sans-serif; }
.support-embed .from-customer { margin-left:auto; border-radius:10px 4px 10px 10px; background:#dff3d7; }
.support-embed .support-form { grid-template-columns:minmax(0,1fr) 42px; gap:7px; margin-top:0; padding:10px; border-radius:8px; background:#f7f9f8; }
.support-embed .support-form .support-message-field { position:relative; display:block; font-size:0; }
.support-embed .support-form textarea { height:46px; min-height:46px; padding:13px 15px; border:1px solid #e2e9e4; border-radius:7px; background:#fff; font-size:11px; }
.support-embed .support-form button { width:42px; min-height:42px; padding:0; border-radius:8px; font-size:0; }
.support-embed .support-form button b { display:block; margin:0; font-size:23px; line-height:1; }
.support-embed .support-form #supportNotice { grid-column:1 / -1; min-height:0; font-size:9px; }
.support-embed .support-privacy { display:none; }

.support-message-field { position:relative; }
.support-message-field .support-clip, .support-message-field .support-smile { position:absolute; z-index:1; display:grid; width:26px; height:26px; place-items:center; color:#71838f; }
.support-message-field .support-clip { left:7px; bottom:10px; border:0; padding:0; background:transparent; cursor:pointer; }
.support-message-field .support-clip svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-message-field .support-smile { right:7px; bottom:10px; font:400 17px/1 Arial,sans-serif; }
.support-message-field textarea { padding-left:38px !important; padding-right:38px !important; }
.support-form button b svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-file { display:block; margin-top:7px; color:#287e16; font-size:10px; font-weight:800; text-decoration:underline; }
.support-image-link { display:block; margin-top:8px; }
.support-image { display:block; width:min(100%,260px); max-height:260px; border-radius:8px; object-fit:cover; }
.chat-day { width:max-content; margin:0 auto 14px; padding:4px 13px; border-radius:12px; background:#e9eeec; color:#5f7079; font:700 9px Manrope,Arial,sans-serif; }
.message-status { display:block; margin-top:5px; color:#73908a; font:700 8px Manrope,Arial,sans-serif; text-align:right; }
.message-status.is-read { color:#3b9b1b; }
.support-form button { transition:transform .16s ease, opacity .16s ease, filter .16s ease; }
.support-form button:active { transform:scale(.94); }
.support-form button.is-sending { opacity:.62; filter:saturate(.6); pointer-events:none; }
.support-page:not(.support-embed) .support-form .support-message-field,
.support-embed .support-form .support-message-field { display:block; height:46px; align-self:end; }
.support-page:not(.support-embed) .support-form .support-message-field textarea,
.support-embed .support-form .support-message-field textarea { height:46px; min-height:46px; }
.support-page:not(.support-embed) .support-form button,
.support-embed .support-form button { align-self:end; width:46px; height:46px; min-height:46px; }
.support-page:not(.support-embed) .support-form { grid-template-columns:minmax(0,1fr) 46px; }
.support-embed .support-form { grid-template-columns:minmax(0,1fr) 46px; }

/* Fixed composer on the standalone support page. Only messages scroll. */
.support-page:not(.support-embed) .support-card { display:flex; flex-direction:column; height:min(720px, calc(100vh - 68px)); }
.support-page:not(.support-embed) .support-chat { flex:1; min-height:0; max-height:none; margin-bottom:12px; overflow-y:auto; }
.support-page:not(.support-embed) .support-form { position:sticky; bottom:0; grid-template-columns:minmax(0,1fr) 42px; gap:7px; margin-top:0; padding:8px; border-radius:8px; background:#f6f8f7; }
.support-page:not(.support-embed) .support-form .support-name-field { display:none; }
.support-page:not(.support-embed) .support-form .support-message-field { font-size:0; }
.support-page:not(.support-embed) .support-form textarea { height:46px; min-height:46px; padding:13px 14px; border-radius:7px; resize:none; font-size:11px; }
.support-page:not(.support-embed) .support-form button { width:42px; min-height:42px; padding:0; border-radius:8px; font-size:0; }
.support-page:not(.support-embed) .support-form button b { margin:0; font-size:22px; line-height:1; }
.support-page:not(.support-embed) .support-form #supportNotice { grid-column:1 / -1; min-height:0; font-size:9px; }
.support-page:not(.support-embed) .support-privacy { margin:9px 0 0; font-size:8px; }
@media(max-width:720px){
  .support-page:not(.support-embed) .support-shell { min-height:100vh; padding:0; }
  .support-page:not(.support-embed) .support-back { position:absolute; z-index:2; top:10px; left:14px; margin:0; }
  .support-page:not(.support-embed) .support-card { height:100vh; padding:54px 14px 10px; border:0; border-radius:0; }
  .support-page:not(.support-embed) .support-heading { margin:13px 0 15px; }
  .support-page:not(.support-embed) .support-heading h1 { font-size:25px; }
}

/* Mobile messenger layout: only the message history scrolls. */
@media(max-width:720px){
  .support-page:not(.support-embed) { height:100dvh; min-height:0; overflow:hidden; background:#f4f7f5; }
  .support-page:not(.support-embed) .support-shell { height:100dvh; min-height:0; }
  .support-page:not(.support-embed) .support-back, .support-page:not(.support-embed) .support-heading { display:none; }
  .support-page:not(.support-embed) .support-card { height:100dvh; min-height:0; padding:0; border:0; border-radius:0; background:#f4f7f5; }
  .support-page:not(.support-embed) .support-card header { display:flex; height:58px; min-height:58px; padding:0 17px; border-bottom:1px solid #e1e9e2; background:#fff; }
  .support-page:not(.support-embed) .support-logo { font-size:21px; }
  .support-page:not(.support-embed) .support-status { font-size:10px; }
  .support-page:not(.support-embed) .support-chat { flex:1; min-height:0; margin:0; padding:20px 16px; border:0; border-radius:0; background:#f4f7f5; overscroll-behavior:contain; }
  .support-page:not(.support-embed) .support-empty { padding:32px 14px; background:#fff; }
  .support-page:not(.support-embed) .support-message { max-width:82%; font-size:12px; }
  .support-page:not(.support-embed) .support-form { flex:0 0 auto; min-height:64px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-radius:0; border-top:1px solid #e1e9e2; background:#fff; }
  .support-page:not(.support-embed) .support-form textarea { height:46px; min-height:46px; font-size:12px; }
  .support-page:not(.support-embed) .support-form button { min-height:46px; }
  .support-page:not(.support-embed) .support-privacy { display:none; }
}

/* Explicit columns remain stable when anti-bot fields are added. */
.support-form .support-message-field{grid-column:1;min-width:0;overflow:hidden}
.support-form .support-message-field textarea{display:block;min-width:0;max-width:100%;overflow-x:hidden}
.support-form button[type="submit"]{grid-column:2;grid-row:1}
/* Desktop support presented as a floating chat window. */
.support-close { display:none; }
@media(min-width:721px){
  .support-page:not(.support-embed) { background:radial-gradient(ellipse at 25% 20%,#829889,#263d39 75%); }
  .support-page:not(.support-embed) .support-shell { padding:28px; min-height:100dvh; background:#10252065; }
  .support-page:not(.support-embed) .support-back { display:none; }
  .support-page:not(.support-embed) .support-card { position:relative; width:min(100%,560px); height:min(700px,calc(100dvh - 56px)); padding:0; border:1px solid #ffffff70; border-radius:22px; box-shadow:0 28px 90px #071d3860,0 4px 16px #071d3830; overflow:hidden; }
  .support-page:not(.support-embed) .support-card header { flex-shrink:0; height:82px; min-height:82px; padding:20px 76px 20px 26px; border-bottom:1px solid #e6ede8; }
  .support-page:not(.support-embed) .support-logo { font-size:24px; }
  .support-page:not(.support-embed) .support-close { display:grid; place-items:center; position:absolute; right:20px; top:22px; width:36px; height:36px; z-index:2; border-radius:50%; background:#f0f5f1; color:#496457; font:26px/1 Arial; text-decoration:none; }
  .support-page:not(.support-embed) .support-close:hover { background:#e2ece4; }
  .support-page:not(.support-embed) .support-close:focus-visible { outline:3px solid #62ad42; outline-offset:3px; }
  .support-page:not(.support-embed) .support-heading { flex-shrink:0; margin:0; padding:20px 26px 18px; }
  .support-page:not(.support-embed) .support-heading p { display:none; }
  .support-page:not(.support-embed) .support-heading h1 { font-size:25px; letter-spacing:-.8px; }
  .support-page:not(.support-embed) .support-heading span { font-size:12px; line-height:1.5; }
  .support-page:not(.support-embed) .support-chat { margin:0; padding:20px 24px; border:0; border-radius:0; background:#f4f8f5; }
  .support-page:not(.support-embed) .support-empty { padding:22px 16px; border:1px solid #e1eae3; border-radius:12px; background:#fff; }
  .support-page:not(.support-embed) .support-form { flex-shrink:0; padding:14px 18px; border-top:1px solid #e4ece6; border-radius:0; background:#fff; }
  .support-page:not(.support-embed) .support-form textarea { font-size:13px; }
  .support-page:not(.support-embed) .support-privacy { flex-shrink:0; margin:0; padding:0 20px 14px; font-size:9px; }
}