@font-face {
  font-family:'coolveticaregular';
  src:url('/fonts/coolvetica_rg-webfont.woff2') format('woff2'),
      url('/fonts/coolvetica_rg-webfont.woff') format('woff'),
      url('/fonts/coolvetica_rg-webfont.ttf') format('truetype'),
      url('/fonts/coolvetica_rg-webfont.svg#coolveticaregular') format('svg');
  font-weight:normal;
  font-style:normal;
}

:root {
  --fc-phone-header-height:60px;
  --fc-phone-blue-dark:#12466f;
  --fc-phone-blue:#2478ae;
  --fc-phone-blue-light:#74bee7;
  --fc-phone-self:#d8f8cf;
  --fc-phone-partner:#ffffff;
  --fc-phone-text:#15324b;
  --fc-phone-green:#37d46b;
}

html,
body {
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
}

* {
  box-sizing:border-box;
}

body.phone-panel-open {
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none;
}

.new {
  width:auto;
  margin:0 0 10px 0;
  padding:10px 12px;
  color:#ffffff;
  font-weight:bold;
  background:rgba(178,34,34,0.96);
  border:2px solid rgba(255,255,255,0.45);
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
}

/* =========================================================
   Bildschirmfuellendes Telefonpanel
   ========================================================= */

body.handheld #teldiv.fm-panel-phone {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:none;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#ffffff;
  background:linear-gradient(180deg,#2d78ad 0%,#174d78 100%) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

@supports (height:100dvh) {
  body.handheld #teldiv.fm-panel-phone {
    height:100dvh !important;
    min-height:100dvh !important;
  }
}

body.handheld #teldiv .fm-sidepanel-head {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  z-index:30;
  display:flex !important;
  align-items:center !important;
  gap:9px;
  width:100% !important;
  min-height:calc(var(--fc-phone-header-height) + env(safe-area-inset-top,0px));
  margin:0 !important;
  padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px 10px !important;
  color:#ffffff !important;
  background:linear-gradient(180deg,rgba(47,132,186,0.99),rgba(20,70,111,0.99)) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,0.30) !important;
  border-radius:0 !important;
  box-shadow:0 3px 12px rgba(0,0,0,0.25) !important;
}

body.handheld #teldiv .fm-phone-title {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  color:#ffffff !important;
  font-family:coolveticaregular,Arial,sans-serif !important;
  font-size:clamp(23px,6vw,30px) !important;
  line-height:1.05 !important;
  text-align:left !important;
  text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,0.48);
  white-space:nowrap;
}

body.handheld #teldiv .fm-phone-back,
body.handheld #teldiv .fm-sidepanel-close {
  position:static !important;
  flex:0 0 42px !important;
  display:none;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:26px !important;
  font-weight:bold !important;
  line-height:38px !important;
  text-align:center !important;
  border:1px solid rgba(255,255,255,0.42) !important;
  border-radius:50% !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.26),inset 0 1px 0 rgba(255,255,255,0.26) !important;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

body.handheld #teldiv .fm-sidepanel-close {
  display:block !important;
  background:linear-gradient(180deg,#e14652,#9f141f) !important;
}

body.handheld #teldiv .fm-phone-back {
  background:linear-gradient(180deg,#70c2eb,#2e83b8) !important;
}

body.handheld #teldiv.fm-mobile-chat-view .fm-phone-back {
  display:block !important;
}

body.handheld #teldiv .fm-phone-back:active,
body.handheld #teldiv .fm-sidepanel-close:active {
  transform:scale(0.95);
}

body.handheld #teldiv .tel-preview-wrap {
  display:none !important;
}

body.handheld #teldiv .fm-phone-body {
  position:absolute !important;
  left:0 !important;
  top:calc(var(--fc-phone-header-height) + env(safe-area-inset-top,0px)) !important;
  right:0 !important;
  bottom:0 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Anwesenheitsliste bleibt hinter dem Chat erhalten, damit ihre Scrollposition
   beim Zurueckkehren nicht verloren geht. */
body.handheld #teldiv .fm-phone-list,
body.handheld #teldiv .fm-phone-chatarea {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
}

body.handheld #teldiv .fm-phone-list {
  z-index:1;
  display:block !important;
  padding:12px !important;
  background:linear-gradient(180deg,#1c6597 0%,#12456f 100%) !important;
  overscroll-behavior:contain;
}

body.handheld #teldiv .fm-phone-chatarea {
  z-index:10;
  display:block !important;
  padding:0 !important;
  background:linear-gradient(180deg,#edf6fb 0%,#dcecf5 100%) !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(100%);
  transition:transform .20s ease, opacity .16s ease, visibility 0s linear .20s;
}

body.handheld #teldiv.fm-mobile-list-view .fm-phone-list {
  pointer-events:auto !important;
}

body.handheld #teldiv.fm-mobile-list-view .fm-phone-chatarea {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(100%) !important;
}

body.handheld #teldiv.fm-mobile-chat-view .fm-phone-list {
  pointer-events:none !important;
}

body.handheld #teldiv.fm-mobile-chat-view .fm-phone-chatarea {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(0) !important;
  transition:transform .20s ease, opacity .16s ease;
}

/* =========================================================
   Anwesenheitsliste
   ========================================================= */

body.handheld #teldiv #nicklistdiv {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:10px;
  width:100% !important;
  max-width:960px !important;
  min-height:100% !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  padding:12px !important;
  overflow:visible !important;
  color:#ffffff !important;
  background:rgba(10,50,82,0.43) !important;
  border:1px solid rgba(221,240,252,0.44) !important;
  border-radius:17px !important;
  box-shadow:inset 0 1px 12px rgba(255,255,255,0.10),0 5px 20px rgba(0,0,0,0.16) !important;
}

body.handheld #teldiv #nicklistdiv > .anzdiv,
body.handheld #teldiv #nicklistdiv > .kommentxxxtestnickliste,
body.handheld #teldiv #nicklistdiv > .new {
  grid-column:1 / -1;
}

body.handheld #teldiv .anzdiv {
  width:100% !important;
  margin:0 0 2px 0 !important;
  padding:7px 8px 12px 8px !important;
  overflow:hidden;
  color:#f4fbff !important;
  font-size:clamp(15px,4.2vw,19px) !important;
  font-weight:bold;
  line-height:1.3;
  border-bottom:1px solid rgba(255,255,255,0.28) !important;
}

body.handheld #teldiv .nickdiv {
  position:relative;
  display:flex !important;
  align-items:center;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:54px;
  margin:0 !important;
  padding:12px 62px 12px 12px !important;
  overflow:hidden;
  color:#ffffff !important;
  font-size:clamp(15px,4.1vw,18px) !important;
  font-weight:bold;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:linear-gradient(145deg,rgba(148,212,242,0.30),rgba(89,159,203,0.24)) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  border-radius:14px !important;
  box-shadow:0 3px 9px rgba(0,0,0,0.17),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  cursor:pointer;
  touch-action:pan-y;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

body.handheld #teldiv .nickdiv:focus,
body.handheld #teldiv .nickdiv:active {
  color:#0d2c4d !important;
  background:linear-gradient(145deg,rgba(236,249,255,0.99),rgba(185,224,248,0.99)) !important;
  border-color:rgba(232,247,255,0.98) !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

body.handheld #teldiv .nickdiv.fc-mobile-chat-open:after,
body.handheld #teldiv .nickdiv.fc-mobile-unread:after {
  position:absolute;
  right:8px;
  top:50%;
  min-width:42px;
  padding:4px 6px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px;
  font-weight:bold;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-radius:999px;
  transform:translateY(-50%);
}

body.handheld #teldiv .nickdiv.fc-mobile-chat-open:after {
  content:'offen';
  color:#0d3853;
  background:rgba(228,246,255,0.98);
  border:1px solid rgba(255,255,255,0.94);
}

body.handheld #teldiv .nickdiv.fc-mobile-unread {
  color:#07331a !important;
  background:linear-gradient(145deg,rgba(223,255,232,0.99),rgba(88,225,128,0.99)) !important;
  border-color:rgba(180,255,204,0.99) !important;
  box-shadow:0 0 18px rgba(55,212,107,0.92),inset 0 1px 0 rgba(255,255,255,0.92) !important;
  animation:fcMobileUnreadPulse 1.15s ease-in-out infinite alternate;
}

body.handheld #teldiv .nickdiv.fc-mobile-unread:after {
  content:'neu';
  color:#ffffff;
  background:#148b40;
  border:1px solid rgba(255,255,255,0.78);
}

@keyframes fcMobileUnreadPulse {
  from { box-shadow:0 0 7px rgba(55,212,107,0.55),inset 0 1px 0 rgba(255,255,255,0.84); }
  to { box-shadow:0 0 22px rgba(55,212,107,1),inset 0 1px 0 rgba(255,255,255,1); }
}

/* =========================================================
   Chat-Overlay und parallele Unterhaltungen
   ========================================================= */

body.handheld #teldiv #outerwin {
  position:relative !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
  z-index:auto !important;
}

body.handheld #teldiv #outerwin .fc-mobile-conversation {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:var(--fc-phone-text) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:default !important;
}

body.handheld #teldiv #outerwin .fc-mobile-inactive-chat {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat {
  display:flex !important;
  visibility:visible !important;
  flex-direction:column !important;
  pointer-events:auto !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat > .win_title,
body.handheld #teldiv #outerwin .fc-mobile-active-chat > .close,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .fc-native-resize-grip,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .fc-strong-resize-grip,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .ui-resizable-handle,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .fc-chat-title-control,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .fc-chat-font-tools,
body.handheld #teldiv #outerwin .fc-mobile-active-chat #list_box,
body.handheld #teldiv #outerwin .fc-mobile-active-chat #name {
  display:none !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat .message_box,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .admmessage_box {
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat .mybox,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .win_content {
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:12px 12px 16px 12px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  color:var(--fc-phone-text) !important;
  font-size:clamp(16px,4.2vw,19px) !important;
  line-height:1.42 !important;
  background:linear-gradient(180deg,#e9f3f8 0%,#dcebf3 100%) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat .panel {
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  min-height:62px !important;
  margin:0 !important;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) 8px !important;
  background:#f7fbfd !important;
  border-top:1px solid rgba(83,142,184,0.38) !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat #message,
body.handheld #teldiv #outerwin .fc-mobile-active-chat #admmessage,
body.handheld #teldiv #outerwin .fc-mobile-active-chat .tuschel_input {
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:46px !important;
  margin:0 !important;
  padding:11px 13px !important;
  color:#12334f !important;
  font-size:16px !important;
  line-height:1.3 !important;
  background:#ffffff !important;
  border:1px solid rgba(82,145,190,0.72) !important;
  border-radius:20px !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.08) !important;
}

body.handheld #teldiv #outerwin .fc-mobile-active-chat .panel input[type='button'],
body.handheld #teldiv #outerwin .fc-mobile-active-chat .panel input[type='submit'],
body.handheld #teldiv #outerwin .fc-mobile-active-chat .panel button {
  flex:0 0 auto !important;
  min-width:46px !important;
  min-height:46px !important;
  margin:0 !important;
  padding:8px 10px !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:bold !important;
  background:linear-gradient(180deg,#59add9,#287daf) !important;
  border:1px solid rgba(30,100,145,0.75) !important;
  border-radius:17px !important;
}

/* Tuschel-Fenster ohne eigene .panel-Huelle. */
body.handheld #teldiv #outerwin .fc-mobile-active-chat > .tuschel_input {
  flex:0 0 auto !important;
  width:calc(100% - 16px) !important;
  min-height:48px !important;
  margin:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) 8px !important;
}

/* =========================================================
   WhatsApp-aehnliche Sprechblasen
   ========================================================= */

body.handheld #teldiv #outerwin .user_name,
body.handheld #teldiv #outerwin .user_message {
  display:block !important;
  clear:both;
  max-width:84%;
  word-break:break-word;
}

body.handheld #teldiv #outerwin .user_name.fc-mobile-self,
body.handheld #teldiv #outerwin .user_message.fc-mobile-self {
  margin-left:auto !important;
  margin-right:0 !important;
  color:#153b28 !important;
  background:var(--fc-phone-self) !important;
  border-left:1px solid rgba(85,155,100,0.30);
  border-right:1px solid rgba(85,155,100,0.30);
}

body.handheld #teldiv #outerwin .user_name.fc-mobile-partner,
body.handheld #teldiv #outerwin .user_message.fc-mobile-partner {
  margin-left:0 !important;
  margin-right:auto !important;
  color:#15324b !important;
  background:var(--fc-phone-partner) !important;
  border-left:1px solid rgba(93,151,194,0.25);
  border-right:1px solid rgba(93,151,194,0.25);
}

body.handheld #teldiv #outerwin .user_name.fc-mobile-self,
body.handheld #teldiv #outerwin .user_name.fc-mobile-partner {
  margin-top:9px !important;
  margin-bottom:0 !important;
  padding:7px 11px 1px 11px !important;
  font-size:.78em !important;
  font-weight:bold !important;
  border-top:1px solid rgba(93,151,194,0.25);
  border-radius:16px 16px 0 0;
}

body.handheld #teldiv #outerwin .user_message.fc-mobile-self,
body.handheld #teldiv #outerwin .user_message.fc-mobile-partner {
  margin-top:0 !important;
  margin-bottom:8px !important;
  padding:3px 11px 9px 11px !important;
  border-bottom:1px solid rgba(93,151,194,0.25);
  border-radius:0 0 16px 16px;
  box-shadow:0 2px 5px rgba(32,75,106,0.13);
}

body.handheld #teldiv #outerwin .system_error,
body.handheld #teldiv #outerwin .system_msg {
  display:block;
  clear:both;
  max-width:94%;
  margin:8px auto;
  padding:7px 10px;
  color:#9a1721 !important;
  font-weight:bold;
  text-align:center;
  background:rgba(255,255,255,0.82);
  border-radius:12px;
}

/* Einstellungen und Iconauswahl bleiben ebenfalls innerhalb des Telefon-Overlays. */
body.handheld #teldiv #configwin,
body.handheld #teldiv #iconlist {
  position:absolute !important;
  left:8px !important;
  top:8px !important;
  right:8px !important;
  bottom:8px !important;
  z-index:60 !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  overflow:auto !important;
  background:#f5fbff !important;
  border:1px solid rgba(93,151,194,0.55) !important;
  border-radius:14px !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.34) !important;
}

body.handheld #teldiv #iconcontent {
  height:auto !important;
  max-height:calc(100% - 50px) !important;
  overflow:auto !important;
}

/* Alte Fensterelemente und Desktop-Hilfen auf Mobilgeraeten deaktivieren. */
body.handheld .fc-native-resize-grip,
body.handheld .fc-strong-resize-grip,
body.handheld .ui-resizable-handle,
body.handheld .fc-chat-font-tools,
body.handheld .fc-chat-title-control {
  display:none !important;
}

/* =========================================================
   Geraetegroessen
   ========================================================= */

@media screen and (min-width:700px) {
  body.handheld #teldiv #nicklistdiv {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media screen and (max-width:420px) {
  :root {
    --fc-phone-header-height:56px;
  }

  body.handheld #teldiv .fm-sidepanel-head {
    gap:7px;
    padding-left:7px !important;
    padding-right:7px !important;
  }

  body.handheld #teldiv .fm-phone-back,
  body.handheld #teldiv .fm-sidepanel-close {
    flex-basis:39px !important;
    width:39px !important;
    min-width:39px !important;
    height:39px !important;
    min-height:39px !important;
    line-height:35px !important;
  }

  body.handheld #teldiv .fm-phone-list {
    padding:7px !important;
  }

  body.handheld #teldiv #nicklistdiv {
    gap:7px;
    padding:8px !important;
    border-radius:13px !important;
  }

  body.handheld #teldiv .nickdiv {
    min-height:50px;
    padding:10px 52px 10px 10px !important;
  }

  body.handheld #teldiv #outerwin .user_name,
  body.handheld #teldiv #outerwin .user_message {
    max-width:89%;
  }
}

@media screen and (max-width:330px) {
  body.handheld #teldiv #nicklistdiv {
    gap:6px;
    padding:6px !important;
  }

  body.handheld #teldiv .nickdiv {
    min-height:48px;
    padding-left:8px !important;
    padding-right:47px !important;
    font-size:14px !important;
  }
}

@media screen and (orientation:landscape) and (max-height:520px) {
  :root {
    --fc-phone-header-height:50px;
  }

  body.handheld #teldiv .fm-sidepanel-head {
    padding-top:5px !important;
    padding-bottom:5px !important;
  }

  body.handheld #teldiv .fm-phone-back,
  body.handheld #teldiv .fm-sidepanel-close {
    flex-basis:36px !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    line-height:32px !important;
  }

  body.handheld #teldiv #nicklistdiv {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.handheld #teldiv .nickdiv {
    min-height:43px;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
}