@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot?66205929');
    src: url('../fonts/fontello.eot?66205929#iefix') format('embedded-opentype'),
         url('../fonts/fontello.woff2?66205929') format('woff2'),
         url('../fonts/fontello.woff?66205929') format('woff'),
         url('../fonts/fontello.ttf?66205929') format('truetype'),
         url('../fonts/fontello.svg?66205929#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Allgemeines */
body { font-family:"Myriad Pro", "Fedra Sans Std", Arial; color:#FFF; font-size:20px; text-align:center; margin:0; padding:0; background-color:#000; }
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; }
.h1 { font-weight: bold; font-size: 25px; }
/**************/

/* Schriften */
.fontello-icons { font-family: "fontello"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-down-open:before { content: "\E801"; }
.icon-ok:before { content: "\0030"; }
.icon-reload:before { content: "\E800"; }
.icon-settings:before { content: "\E802"; }
.icon-logout:before { content: "\E803"; }
.icon-charakter:before { content: "\F2C0"; }
.icon-locked:before { content: "\E804"; }
.icon-dialog:before { content: "\E805"; }
.icon-music:before { content: "\E806"; }
.icon-play:before { content: "\E807"; }
.icon-pause:before { content: "\E808"; }
.icon-opened:before { content: "\E809"; }
.icon-inventar:before { content: "\E80A"; }
.icon-star:before { content: "\E80B"; }
.icon-mute:before { content: "\E80C"; }
.icon-loud:before { content: "\E80D"; }
.icon-clock:before { content: "\E80E"; }
.icon-sand:before { content: "\F252"; }
.icon-call:before { content: "\E80F"; }
.icon-history:before { content: "\E810"; }
.icon-contact:before { content: "\F2BE"; }
.icon-pinpad:before { content: "\E811"; }
.icon-vcard:before { content: "\F2C3"; }
.icon-delete:before { content: "\E812"; }
/*************/

/* Phone */
#phone_content { position:relative; height:85vh; height:calc(100dvh - 15dvh); max-width:500px; width:100%; margin:auto; box-sizing: border-box; text-align: center; display:flex; flex-direction:column; }
#phone_number { position: relative; width:100%; flex:0 0 clamp(108px, 21vh, 195px); min-height:108px; max-height:195px; font-size: clamp(40px, 8vh, 60px); box-sizing: border-box; }
#phoneNumberTextContainer { position: absolute; display: flex; justify-content: center; align-items: center; top:0; bottom: 0; left:0; right:0; }
#tonwahl_text { color: grey; font-size: 30px; }
#call_duration { position:absolute; width:100%; bottom:20%; font-size: 25px; text-align: center; }
#pinpad_container {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: auto;
    max-width: 84%;
    aspect-ratio: 3 / 5;
    margin: 0 auto clamp(16px, 3vh, 34px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.4vh, 12px);
}
.pinpadButton { position:relative; width:100%; height:100%; border-radius: 50%; box-sizing: border-box; }
.pinpadButton {
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    justify-self: center;
    align-self: center;
}
.pinpadButtonNumber { background-color: rgba(255, 255, 255, 0.15); cursor: pointer; }
#pinpadButtonCall { background-color: green; cursor: pointer; }
#pinpadButtonCancel { background-color: red; cursor: pointer; display: none; }
#pinpadButtonDelete { cursor: pointer; display: none; }
.pinpadButtonText { position:absolute; display: flex; justify-content: center; align-items: center; top:0; bottom: 0; left:0; right:0; font-size: clamp(22px, 4.8vmin, 56px); line-height: 1; }
#pinpadButtonDelete .icon-delete { font-size: 1.45em; }

#anrufliste_content { position:relative; padding:20px; padding-top:50px; height:85vh; height:calc(100dvh - 15dvh); max-width:500px; width:100%; margin:auto; box-sizing: border-box; text-align: left; display: none; }
#anrufliste_text { overflow-y: auto; }
.anrufliste_trennstrich { border: 1px solid rgba(255, 255, 255, 0.15); }
.anrufliste_icon { font-size: 18px; margin-right:20px; }
.call_history_number { font-size: 25px; padding-top:5px; cursor: pointer; }

#impressum_content { position:relative; height:85vh; height:calc(100dvh - 15dvh); max-width:500px; width:100%; padding:20px; padding-top: 50px; overflow-y: auto; margin:auto; box-sizing: border-box; text-align: center; display: none; }
#impressum_text { position:absolute; display: flex; justify-content: center; align-items: center; top:0; bottom: 0; left:0; right:0; }

#footer { position: relative; height: 15vh; height:15dvh; max-width:500px; width:100%; box-sizing: border-box; text-align: center; margin:auto; font-size: 10px; display:flex; align-items:center; }
.footer_content { float:none; flex:1 1 25%; height:100%; box-sizing: border-box; cursor: pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:0; }
.footer_content br { display:none; }
.footer_icon { font-size: 35px; }

@media only screen and (max-width:500px) {
    #phone_number { font-size: clamp(34px, 7.2vh, 50px); } 
    #call_duration { font-size: 22px; }
    #pinpad_container { max-width:76%; }
}

@media only screen and (max-width:450px) { 
    #phone_number { font-size: clamp(30px, 6.8vh, 40px); }
    #call_duration { font-size: 20px; }
    #pinpad_container { max-width:66%; }
}

@media only screen and (max-height:700px) {
    #phone_number { flex-basis: clamp(92px, 18vh, 150px); min-height: 92px; max-height: 150px; }
    #pinpad_container { max-width: 72%; gap: clamp(6px, 1.1vh, 10px); margin-bottom: clamp(12px, 2.4vh, 24px); }
    #call_duration { bottom: 14%; font-size: 20px; }
    #footer { font-size: 9px; }
    .footer_icon { font-size: 28px; }
}

@media only screen and (max-height:560px) {
    #phone_content { height:calc(100dvh - 64px); }
    #anrufliste_content { height:calc(100dvh - 64px); }
    #impressum_content { height:calc(100dvh - 64px); }
    #phone_number { flex-basis: clamp(74px, 15vh, 112px); min-height: 74px; max-height: 112px; }
    #pinpad_container { max-width: 64%; gap: clamp(4px, 0.9vh, 8px); margin-bottom: 14px; }
    .pinpadButtonText { font-size: clamp(18px, 4.4vmin, 34px); }
    #call_duration { bottom: 10%; font-size: 16px; }
    #footer { height:72px; font-size: 8px; }
    .footer_content { gap: 2px; line-height: 1.1; padding:0; }
    .footer_icon { font-size: 22px; }
}

/*********/