/***************************************************************************************
 *** CSS for HTML representation of DEMel TEI texts                                  ***
 ***************************************************************************************/

body > div.demel-text-container{
  max-width:65em;
  margin-left:auto;
  margin-right:auto;
}

div.demel-section {
  margin-top:1.5rem;
}

span.demel-link-attestation {
 cursor:pointer;
}

span.demel-link-attestation i{
    margin-left: .33em;
    margin-right: .1em;
    font-size:1em;
    color: var(--bs-primary);
}

span.demel-link-attestation i::before {
  --eye-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='navy'%3E<!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> %3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/svg%3E");
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: var(--eye-icon-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  margin-right: 0.25em;
}

span:has(> span.demel-link-attestation.highlight){
  background-color: papayawhip;
  padding:0px .25rem;
}

span.demel-add,
span.demel-gloss {
  color: gray;
}
    
span.demel-seg {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-wrap: nowrap;
}

span.demel-seg-mwe {
  text-decoration: underline;
  text-decoration-style: dashed;
}

span.demel-seg:target,
span.demel-seg.highlight  {
  background-color: Khaki;
}

em.demel-hi-rubric {
  color: #e60026;   /*Spanish Red*/
  font-style: normal !important;
}

.demel-text-container h2,
.demel-text-container h3,
.demel-text-container h4,
.demel-text-container h5{
  margin-top:2rem;
 }

div.demel-seg:target,
div.demel-pagebreak.highlight {
  background-color: papayawhip;
  padding: 0px .25rem;
}

div.demel-pagebreak {
  display: flex;
  flex-direction: row;
  width:100%;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
}

.demel-pagebreak div.space {
  flex-grow: 1;
   padding: 0.5rem 0 !important;
}

.demel-pagebreak div.number{
  padding: 0.66rem 1rem !important;
}

span.demel-ab-nr{
  padding-left:.5em;
  font-size:75%;
  vertical-align:super;
  white-space: nowrap
}

span.demel-ab-nr::after {
    content: "\00a0"; /* geschütztes Leerzeichen */
}

/* [DEMEL Drama] */
/* ------------- */
.demel-verse-block {
  margin-top: 0.5rem;
}

.demel-speech-block {
  margin-top: 0.0rem;
}

.demel-verse-line, .demel-verse-head, .demel-speech-line, .demel-speech-speaker {
  display: flex;
  align-items: flex-start;
}

.demel-verse-head .demel-line-content{
  font-weight:bold;
}

.demel-speech-speaker {
  font-style: italic;
  background-color: #f9f9f9;
}

.demel-speech-speaker .demel-line-content {
  padding-top: 0.5em;
}

.demel-line-number {
  background-color: #f9f9f9;
  padding: 0 10px;
  text-align: right;
  color: #666;
  user-select: none;
  border-right: 1px solid #ccc;
  margin-right: .5em;
  min-width: 3rem;
  flex-shrink: 0;
  font-family: monospace;
  vertical-align: top;
}