/* Allgemeines */
body { font-family:"Myriad Pro", "Fedra Sans Std", Arial; color:#FFF; font-size:18px; text-align:center; margin:0; padding:0; background: linear-gradient(180deg, #f3fbf9 0%, #ffffff 24%, #f7fcfb 100%); }
a:link { color:#FFF; text-decoration:none; }
a:visited { color:#FFF; text-decoration:none; }
a:hover { color:#525252; text-decoration:none; }
a:active { text-decoration:none; }
.roteSchrift { color:#941D1F; }
.row:after { content:""; display:table; clear:both; }
.text_master { width:90%; max-width: 1200px; margin:auto; }
.headline { font-size: 32px; }
.h1 { font-size: 45px; }
.subheadline { font-size: 22px; }
.desktop { display: block; }
.mobile { display: none; }
.bgcolor { background-color: #38A89C; }
.textcolor { color: #38A89C; }
.center { text-align: center; }
.floatleft { float: left; }
/**************/

/* Header */
#header { position: relative; padding-top:20px; padding-bottom: 20px; background: linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); text-align: left; box-shadow: 0 16px 34px rgba(26, 95, 88, 0.18); }
#header .text_master { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
#header .floatleft { float: none; }
#header img { display: block; width: 200px; max-width: 100%; filter: drop-shadow(0 8px 18px rgba(18, 60, 57, 0.18)); }
.menutext { display: inline-flex; align-items: center; min-height: 38px; margin-left: 12px; padding: 0 16px; border-radius: 999px; font-size: 14px; letter-spacing: .01em; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
/**********/

/* Footer */
#footer { position: relative; margin-top: 28px; padding-top:26px; padding-bottom: 30px; background: linear-gradient(135deg, #1e6f67 0%, #38A89C 100%); font-size: 16px; text-align: left; box-shadow: 0 -12px 30px rgba(26, 95, 88, 0.10); }
#footer .text_master { color: rgba(255,255,255,0.94); line-height: 1.6; }
#footer a:link, #footer a:visited { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
#footer a:hover { color: #eafffb; }
/**********/


/* Login */
#login_image_container { position: relative; min-height: 420px; padding: 88px 0 118px; box-sizing: border-box; display: flex; align-items: flex-end; background-color: #2d8d82; color: #FFF; text-align: left; background-image: url('../design/Background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
#login_image_container .h1 { display: block; font-size: 40px; line-height: 1.15; font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,0.32); margin-bottom: 10px; }
#login_image_container .headline { display: block; font-size: 22px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0,0,0,0.28); }

#login_container1 { position: relative; padding: 40px 20px; background: linear-gradient(to bottom, #eaf8f5, #f3fbfa); }
#login_container1 .text_master { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.drei_spalten.bgcolor { float: none; width: auto; margin: 0; background: #ffffff; border-radius: 20px; box-shadow: 0 6px 28px rgba(20, 81, 75, 0.10); padding: 28px 22px; color: #123c39; border: 1px solid rgba(56, 168, 156, 0.15); }
.drei_spalten.bgcolor img { display: block; width: 56px; height: 56px; max-width: 56px; margin: 0 auto 18px; padding: 14px; background: linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); border-radius: 50%; box-sizing: border-box; object-fit: contain; box-shadow: 0 6px 18px rgba(56,168,156,0.28); }
.drei_spalten.bgcolor .subheadline { color: #2d8d82; font-size: 18px; }

#login_content { position: relative; width: 520px; max-width: calc(100% - 32px); margin: 40px auto; padding: 40px 36px; background: #ffffff; border-radius: 24px; box-shadow: 0 12px 40px rgba(20, 81, 75, 0.11); color: #123c39; border: 1px solid rgba(56, 168, 156, 0.13); }
.loginForm { margin-top: 20px; }
.login_field { width:94%; height:45px; border:1px solid rgba(56,168,156,0.6); border-radius:10px; background-color:transparent; padding-left:5%; margin-top:5px; margin-bottom:5px; color:#38A89C; font-size:18px; }
.login_field::placeholder { color:#38A89C; }
.login_field:-ms-input-placeholder { color:#38A89C; }
.login_field::-ms-input-placeholder { color:#38A89C; }
.pin-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 8px; }
.pin-group { display: flex; gap: 6px; }
.pin-dash { font-size: 22px; font-weight: 700; color: #38A89C; line-height: 1; }
.login_field_onedig { width: 44px; height: 50px; border:1px solid rgba(56,168,156,0.5); border-radius:10px; background: #f3fbf9; text-align: center; color:#38A89C; font-size:20px; font-weight:600; box-sizing: border-box; }
.login_submit { width:100%; height:50px; border:none; border-radius:12px; background: linear-gradient(135deg, #38A89C, #2d8d82); margin-top:16px; margin-bottom:5px; color:#FFF; font-size:17px; font-weight:600; cursor:pointer; letter-spacing:0.02em; -webkit-appearance: none; }
.login_submit:hover { background: linear-gradient(135deg, #2d8d82, #246e67); }
.login_submit:focus { outline: none; }

#login_container2 { display: none; }

@media only screen and (max-width:576px) { 
    #login_container1 .text_master { grid-template-columns: 1fr; }
    #login_image_container { min-height: 50svh; padding: 28px 0 32px; }
    #login_image_container .h1 { font-size: 30px; }
    #login_image_container .headline { font-size: 18px; }
    #login_content { padding: 24px 14px; margin: 20px auto; max-width: calc(100% - 24px); }
    .login_field_onedig { width: 32px; height: 42px; font-size: 16px; }
    .pin-row { gap: 4px; }
    .pin-group { gap: 3px; }
    #header { padding-top: 16px; padding-bottom: 16px; }
    #header .text_master { display: block; }
    #header img { width: 170px; margin: 0 auto; }
    #footer { padding-top: 22px; padding-bottom: 24px; }
}

@media only screen and (max-width:380px) {
    #login_content { padding: 20px 10px; max-width: calc(100% - 20px); }
    .login_field_onedig { width: 28px; height: 38px; font-size: 14px; }
    .pin-row { gap: 3px; }
    .pin-group { gap: 2px; }
    .pin-dash { font-size: 18px; }
}

@media only screen and (max-width:768px) { 
    .subheadline { font-size: 18px; }
    #login_container1 { padding: 30px 16px; }
    #login_container1 .text_master { grid-template-columns: 1fr; max-width: 480px; }
}

@media only screen and (max-width:992px) { 
    .desktop { display: none; }
    .mobile { display: block; }
    #header .text_master { justify-content: center; }
}

@media only screen and (max-width:1200px) { 

}

/*********/

/* Portal */
#portal_content { position:relative; width:90%; max-width:1100px; min-height:200px; margin:auto; padding:20px 20px 32px; color: #000; }
#portal_content_action { margin-bottom: 20px; }
#portal_content_stufe2 { position: relative; display: none; margin-top: 16px; padding-top: 24px; border-top: 1px solid rgba(56, 168, 156, 0.22); }
#portal_content_stufe3 { position: relative; display: none; margin-top: 16px; padding-top: 24px; border-top: 1px solid rgba(56, 168, 156, 0.22); }
#portal_content_stufe3 a:link { color:#000; text-decoration:none; }
#portal_content_stufe3 a:visited { color:#000; text-decoration:none; }
#portal_content_stufe3 a:hover { color:#525252; text-decoration:none; }
#portal_content_stufe4 { position: relative; display: none; }

.portal-hero-card { margin: 0 auto 28px; padding: 28px 28px 24px; border-radius: 28px; background: linear-gradient(135deg, #effaf8 0%, #ffffff 100%); box-shadow: 0 18px 40px rgba(20, 81, 75, 0.10); text-align: left; border: 1px solid rgba(56, 168, 156, 0.12); }
.portal-main-title { font-size: 36px; line-height: 1.1; font-weight: 700; color: #123c39; letter-spacing: -0.03em; }
.portal-main-copy { margin-top: 12px; max-width: 760px; font-size: 18px; line-height: 1.6; color: #355a57; }
.portal-alert-card { margin: 0 auto 24px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, #fff1f1 0%, #fff8f8 100%); border: 1px solid rgba(148, 29, 31, 0.18); color: #941D1F; box-shadow: 0 10px 26px rgba(148, 29, 31, 0.08); }
.portal-alert-title { font-size: 18px; font-weight: 700; }
.portal-alert-link { display: inline-block; margin-top: 12px; }
.portal-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 26px; }
.portal-media-card { position: relative; padding: 20px; border-radius: 24px; text-align: left; background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%); border: 1px solid rgba(56, 168, 156, 0.12); box-shadow: 0 16px 35px rgba(20, 81, 75, 0.08); }
.portal-media-card-audio::before, .portal-media-card-link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: 24px 0 0 24px; background: linear-gradient(180deg, #38A89C 0%, #2d8d82 100%); }
.portal-media-type { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(56, 168, 156, 0.10); color: #2d8d82; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-media-type-icon { justify-content: center; width: 34px; min-height: 34px; padding: 0; }
.portal-media-type-icon svg { width: 16px; height: 16px; display: block; }
.portal-media-title { margin-top: 14px; margin-bottom: 16px; font-size: 20px; line-height: 1.35; font-weight: 700; color: #123c39; }
.portal-audio-shell { padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #edf8f6 0%, #ffffff 100%); border: 1px solid rgba(56, 168, 156, 0.12); }
.portal-audio-player { display: block; width: 100%; min-width: 0; accent-color: #38A89C; filter: saturate(1.05); }
.portal-audio-player::-webkit-media-controls-enclosure { border-radius: 14px; background: transparent; }
.portal-audio-player::-webkit-media-controls-panel { background: #dff4f0; }
.portal-audio-player::-webkit-media-controls-play-button,
.portal-audio-player::-webkit-media-controls-mute-button { border-radius: 999px; background-color: rgba(56, 168, 156, 0.14); }
.portal-audio-player::-webkit-media-controls-current-time-display,
.portal-audio-player::-webkit-media-controls-time-remaining-display { color: #123c39; text-shadow: none; }
.portal-audio-player::-webkit-media-controls-timeline,
.portal-audio-player::-webkit-media-controls-volume-slider { filter: saturate(1.2); }
.portal-link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 14px; background: linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); color: #FFF !important; font-size: 15px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 12px 24px rgba(56, 168, 156, 0.22); transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; }
.portal-link-button:hover { color: #FFF !important; transform: translateY(-1px); box-shadow: 0 16px 28px rgba(56, 168, 156, 0.28); }
.portal-link-button-icon { width: 52px; min-width: 52px; padding: 0; }
.portal-link-button-icon svg { width: 20px; height: 20px; display: block; }
.portal-stage-card { margin: 8px 0 28px; padding: 24px; border-radius: 28px; background: linear-gradient(180deg, #f6fbfa 0%, #ffffff 100%); border: 1px solid rgba(56, 168, 156, 0.10); box-shadow: 0 18px 38px rgba(20, 81, 75, 0.08); }
.portal-stage-heading, .portal-section-heading { margin-bottom: 18px; font-size: 26px; line-height: 1.15; font-weight: 700; color: #123c39; letter-spacing: -0.02em; text-align: left; }
.portal-section-heading { margin-top: 12px; }

#chat_container { position: relative; width:100%; max-width:370px; height:680px; max-height:78vh; border:1px solid rgba(56, 168, 156, 0.28); border-radius: 28px; margin:auto; margin-bottom: 100px; overflow: hidden; display: none; background: linear-gradient(180deg, #f7fffd 0%, #edf8f6 100%); box-shadow: 0 24px 55px rgba(26, 95, 88, 0.18), 0 8px 24px rgba(26, 95, 88, 0.10); }
#chat_verlauf { position:relative; width:100%; height:calc(100% - 132px); color: #0f1720; font-size: 14px; overflow: auto; text-align: left; background: linear-gradient(180deg, #dff4f0 0%, #edf8f6 58%, #f8fcfb 100%); padding:18px 14px 20px; box-sizing: border-box; }
#chat_verlauf::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.55); border-radius: 999px; }
#chat_verlauf::-webkit-scrollbar { width: 8px; background-color: transparent; }
#chat_verlauf::-webkit-scrollbar-thumb { background-color: rgba(41, 102, 95, 0.35); border-radius: 999px; }
.chat_message { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.chat_message_bot { justify-content: flex-start; padding-right: 42px; }
.chat_message_user { justify-content: flex-end; padding-left: 42px; }
.chat_avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); background-image: url('../design/LogoIcon.png'), linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); background-position: center; background-repeat: no-repeat; background-size: 20px 20px, cover; box-shadow: 0 8px 18px rgba(56, 168, 156, 0.28); }
.chat_bubble { max-width: 100%; padding: 12px 14px; border-radius: 18px; box-shadow: 0 8px 20px rgba(15, 23, 32, 0.08); line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.chat_message_bot .chat_bubble { background: #FFF; border: 1px solid rgba(56, 168, 156, 0.18); border-bottom-left-radius: 8px; }
.chat_message_user .chat_bubble { background: linear-gradient(135deg, #38A89C 0%, #46b9ac 100%); color: #FFF; border-bottom-right-radius: 8px; }
.chat_meta { display: block; margin-bottom: 6px; color: #6b7280; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat_message_user .chat_meta { color: rgba(255,255,255,0.72); }
.chat_body { font-size: 14px; }
.chat_message_bot .chat_bubble a:link, .chat_message_bot .chat_bubble a:visited { color:#0f766e; text-decoration: underline; }
.chat_message_user .chat_bubble a:link, .chat_message_user .chat_bubble a:visited { color:#FFF; text-decoration: underline; }
#kaiser_is_typing { display:none; }
#chat_text { position: relative; font-size:15px; line-height: 1.45; -webkit-appearance: none; width:100%; height:76px; resize: none; outline: none; overflow: auto; border:none; padding:16px 18px 14px; border-top: 1px solid rgba(56, 168, 156, 0.18); border-radius: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.92); color: #0f1720; }
#chat_text::placeholder { color: #6b7280; }
#chat_text::-webkit-scrollbar-track { background-color: transparent; }
#chat_text::-webkit-scrollbar { width: 8px; background-color: transparent; }
#chat_text::-webkit-scrollbar-thumb { background-color: rgba(41, 102, 95, 0.35); border-radius: 999px; }
#chat_senden_button { position: relative; margin-top: 0; border:none; width:100%; height:56px; -webkit-appearance: none; background: linear-gradient(135deg, #38A89C 0%, #2d8d82 100%); color:#FFF; font-size:16px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background-color .15s ease, transform .06s ease; }
#chat_senden_button:hover { background: linear-gradient(135deg, #46b9ac 0%, #2d8d82 100%); color: #FFF; }
#chat_senden_button:active { transform: translateY(1px); }

#contactContent { margin-top: 20px; }
.portal-contact-shell { margin-top: 8px; }
.portal-contact-heading { margin-bottom: 10px; }
.portal-contact-intro { margin-bottom: 22px; max-width: 760px; font-size: 17px; line-height: 1.6; color: #4b6663; text-align: left; }
#contactContent svg.icon { width: 28px !important; height: 28px !important; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; flex: 0 0 28px; display: inline-block; vertical-align: middle; }
.contactCard { position: relative; min-height: 100%; box-shadow: 0 16px 35px rgba(20, 81, 75, 0.08); border-radius: 24px; box-sizing: border-box; padding: 22px 20px 18px; border: 1px solid rgba(56, 168, 156, 0.12); text-align: left; background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%); }
#contactWhatsapp { border-color: rgba(37, 211, 102, 0.35); background: linear-gradient(135deg, #e8fff2 0%, #fafffb 100%); }
#contactWebchat { background: linear-gradient(135deg, #f4f8ff 0%, #fbfdff 100%); border-color: rgba(37, 99, 235, 0.18); }
#contactWhatsapp .icon { color: #25D366; }
#contactWebchat .icon { color: #2563eb; }
#contactWebchat a:link { color:#fff; }
#contactContent .checklist { margin: 0 0 1rem 0; padding-left: 0; list-style: none; }
#contactContent .checklist li { margin: .45rem 0; display: flex; align-items: center; justify-content: flex-start; text-align: left; }
#contactContent .checklist li::before { content: '✔'; display: inline-block; line-height: 1.3; font-weight: 700; color: var(--accent); margin-right: .35rem; }
#contactContent .alertlist { margin: 0 0 1rem 0; padding-left: 0; list-style: none; }
#contactContent .alertlist li { margin: .45rem 0; display: flex; align-items: center; justify-content: flex-start; text-align: left; }
#contactContent .alertlist li::before { content: '!'; display: inline-block; line-height: 1.3; font-weight: 700; color: var(--accent); margin-right: .35rem; }
#contactContent .empfohlen-badge { position: absolute; top: -15px; right: 16px; background: #25D366; color: #00330f; font-size: 0.9rem; font-weight: 700; padding: 6px 12px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-transform: uppercase; }
#contactContent .nicht-empfohlen-badge { position: absolute; top: -15px; right: 16px; background: #ef4444; color: #fff; font-size: 0.9rem; font-weight: 700; padding: 6px 12px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-transform: uppercase; }
#contactContent .grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1rem; }
#contactContent .cardHead { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
#contactContent .h3 { font-size: 24px; line-height: 1.15; color: #123c39; }
#contactContent p { margin: 0 0 12px; line-height: 1.6; color: #355a57; }

.button_whatsapp { padding:0 10px 0 10px; border: 1px solid transparent; color: #00330f; background-color: #25D366; -webkit-appearance: none; display: inline-block; line-height: 40px; transition: transform .06s ease, background-color .15s ease, border-color .15s ease; border-radius: 12px; white-space: nowrap; }
.button_whatsapp:hover { transform: translateY(-1px); background-color: #2fe67a; }
.button_whatsapp:focus { outline: none; }

.button_webchat { padding:0 10px 0 10px; border: 1px solid transparent; color: #FFF; background-color: #2563eb; -webkit-appearance: none; display: inline-block; line-height: 40px; transition: transform .06s ease, background-color .15s ease, border-color .15s ease; border-radius: 12px; }
.button_webchat:hover { transform: translateY(-1px); background-color: #1e40af; }
.button_webchat:focus { outline: none; }

@media only screen and (max-width:768px) {
    #portal_content { width: 92%; padding: 16px 16px 28px; }
    .portal-hero-card { padding: 22px 20px 20px; border-radius: 24px; }
    .portal-main-title { font-size: 30px; }
    .portal-main-copy { font-size: 17px; }
    .portal-stage-card { padding: 18px; border-radius: 24px; }
    .portal-stage-heading, .portal-section-heading { font-size: 22px; }
    .portal-contact-intro { font-size: 16px; margin-bottom: 18px; }
    #chat_container { max-width: 390px; height: 82svh; max-height: 82svh; margin-bottom: 72px; }
    #chat_verlauf { height: calc(100% - 120px); padding: 16px 12px 18px; }
    #chat_text { height: 68px; padding: 14px 16px 12px; }
    #chat_senden_button { height: 52px; }
}

@media only screen and (max-width:576px) {
    .portal-media-grid { grid-template-columns: 1fr; gap: 14px; }
    .portal-media-card { padding: 18px; border-radius: 20px; }
    .portal-media-title { font-size: 18px; }
    .portal-link-button { width: 100%; }
    .contactCard { padding: 18px 16px 16px; border-radius: 20px; }
    #contactContent .h3 { font-size: 21px; }
    #chat_container { height: 85svh; max-height: 85svh; border-radius: 24px; margin-bottom: 56px; }
    .chat_message_bot { padding-right: 28px; }
    .chat_message_user { padding-left: 28px; }
    .chat_bubble { padding: 11px 12px; }
}

@media only screen and (max-width:450px) {
    #contactContent .grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
    #contactContent .checklist,
    #contactContent .alertlist { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
    #contactContent .checklist li,
    #contactContent .alertlist li { display: grid; grid-template-columns: 18px 1fr; align-items: start; justify-content: initial; text-align: left; column-gap: 6px; }
    #contactContent .checklist li::before,
    #contactContent .alertlist li::before { margin-right: 0; text-align: center; }
}
/**********/