/* meili/./musik/css/basis_smartphone.css 2025-10-27 */

@page {
  margin: 0;
  size:   portrait;
}
* {
  box-sizing: border-box;
  hyphens:    auto;    /* Silbentrennung */
}

/* --------------------------
  Schrift fuer die Akkorde
  --------------------------- */
/* FE Mittelschrift Regular.otf - kann Kleinbuchstaben Am */
@font-face {
  font-family: "akkorde_1";
  src: url("./FE Mittelschrift Regular.otf") format('opentype'); /* im selben Order wie basis_smartphone.css */
}
.akkorde_1 {
  font-family:  akkorde_1 ! important;
}


/* ------------------------
 * Seitenlayout
 * ------------------------ */
html {
  background:   #eee;
}

@media screen {
  body {
  margin:   0;
  width:    100%;
  }
}
@media print {
  body {
  height:     290mm;
  margin:     5mm 10mm;
  }
}
body {
  font-family:  serif;
  background:   #fff;
  position:     relative;
  font-size:    12pt;
}


header {
  position:   relative;
  min-height: 1em;
}
header p {
  margin-bottom: 0;
  font-size:     80%;
}
header p:nth-of-type(1) {
  float: left;
}
header p:nth-of-type(2) {
  text-align:   right;
/*margin-right: 2em; /* Platz lassen für das Noten-Icon */
  text-align:   right;
  font-size:    100%;
  font-size:    80%;
  font-family:  monospace;
}
header::after {
  content:    "";
  display:    block;
  clear:      both;
}
.tonarten img { /* 2024-07-22 */
  height: 10em;
  height: 8em;
}

@media screen {
  .text {
    font-size:  100% ! important;
  }
} 

@media print {
  footer {
    position:   absolute;
    left:       2.5em;
    right:      2.5em;
    min-height: 1em;
    bottom:     .5em;
    border:     1px dashed #fff;
    z-index:    3;           /* Text vor die Noten, aber hinter footer */
    font-weight: normal;
  }
  footer p:nth-of-type(1) {
    left:       0;
  }
  footer p:nth-of-type(2) {
    right:      0;
  }
}
footer {
  min-height:   1.5em;
  background:   rgba(255,255,255,.7);
  border-top:   .1px solid #f00;
  padding-top:  .5em;
  z-index:      3;           /* Text vor die Noten, aber hinter footer */
}
footer p {
  position:       absolute;
  bottom:         0;
  margin-bottom:  0;
  font-size:      80%;
}
footer p:nth-of-type(1) {
  left:         0;
}
footer p:nth-of-type(2) {
  right: 0;
}




/* AAA */


/* B */
.bghgrau {
  background: #eee;
}

.nodisplay {
  display: none;
}


/* ************************************* */
@media print {
  html {
    background: #fff;
  }
  a {
    color: #00f;
  }
  audio, .screen {
    display:    none ! important;
    visibility: hidden;
  }
  .screen {
    display:  none;
  }
} /* @media print */



/* ************************************* */
@media screen {
  .print {
    display: none ! important;
  }
  html {
    background: #eee;
  }

  a {
    border-bottom: 1px solid #00a;
  }
  a:hover {
    background: #afa;
    border-bottom: 1px solid #f00;
  }

  h1 audio {
    display: block;
    width: 100%;
    height: 1em;
    opacity: .6;
    border-radius: 5px;
    margin: .2em 0;
  }
  iframe body {
    overflow: hidden;
  }
  :target {
    color: #f00;
    background-color: #ffa;
  }
  .a4_hoch {
    margin-bottom: 1em;
  }
  .print {
    display:  none;
  }
} /* screen */



/* ********************
 * 
 * Abmessungen fuer A4
 * 
 * ******************** */
.bggelb {
  background-color: #ff0;
}

/* A */
a {
  text-decoration: none;
}
audio {
  display:        block;
  width:          100%;
  height:         1.5em;
  opacity:        .6;
  border-radius:  5px;
  margin-bottom: .2em;
}

div#anzahl_markierte { /* Zaehler fuer markierte Positionen 2016-05-28 */
  display: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255,255,127,0.6);
  padding: 5px;
  border: 1px solid #000;
}


/* E */
.external {
  background-image:    url(../img/external.png);
  background-repeat:   no-repeat;
  background-position: center right;
  padding-right:       13px;
}


/* *H */
 
h1, h2, h3 {
  margin:       0 0 0.2em 0;
  font-weight:  normal;
  font-family:  sans-serif;
}
h1 {
  font-size:    170%;
  text-align:   center;
  border-bottom: 2px solid #f00;
  color: #00c;
}
h3 {
  font-size: 110%;
}
hr {
  margin: 1em;
  color: #0ff;
}


/* *I */
.ic    { height: 1.2em; }
.ic_kl { height: 0.9em; }
.ic_gr { height: 1.7em; }



/* *L */
.lied_nr:nth-of-type(1) { /* rechts unten */
  right:      0 ! important;
  bottom:     .5em ! important;
}
.lied_nr:nth-of-type(2) { /* links unten */
  left:       0 ! important;
  bottom:     .5em ! important;
}
.lied_nr:nth-of-type(3) { /* rechts oben */
  right:      0 ! important;
  top:        0 ! important;
}
.lied_nr:nth-of-type(4) { /* links oben */
  left:       0 ! important;
  top:        0 ! important;
}

@media print {
  #lied {   /* mp3 und Buttons zum Abspielen */
    display:        none;
  }
}
@media screen {
  #lied {   /* mp3 und Buttons zum Abspielen */
    position:       sticky;
    top:            0;
    z-index:        2;
    opacity:        .9;
    padding:        5px;
    border:         1px solid #aaf;
    border-radius:  5px;
    background:     #ffc;
  }
  .lied_nr:nth-of-type(4) { /* links oben */
    display:    none;
  }
}

/* M */
.monospace {
  font-family:  monospace ! important;
}

/* N */
.neue_pos::before {   /* 2025-07-07 */
  content:      "●";
  color:        #0c0;
}
.nicht-i {
  font-style: normal;
  color:      #000;
}


bem, .bem {
  font-size:    80%;
  color:        #f00;
  font-weight:  normal;
  font-style:   normal;
  font-family:  sans-serif ! important;
}
bem::before {
  content: "[";
}
bem::after {
  content: "]";
}
solo {
  font-size: 80%;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
}
chor {
  font-size: 80%;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
}

/* **************************
 *    Absaetze
 * ************************** */
p {
  margin: 0 0 0.7em 0;
}
p.akkorde {
  margin-left:  1em;
  font-family:  monospace ! important;
}
p.akkorde b {
  display:      inline-block;
  position:     relative;
  white-space:  nowrap;
}
p.akkorde b b {
  display:      inherit;
  display:      inline-block;
  position:     absolute;
  left:         -.2em;
  bottom:       .7em;
  height:       1em;
  white-space:  nowrap;
  font-family:  akkorde_1;  /* 2025-09-29 */
  font-weight:  normal;
  color:        #f00;
  font-size:    100%;
  z-index:      2;
  background:   #ffa;
  background:   rgba( 255,255,255,.5);
}
p.refrain {
  text-indent: 0;
  font-style: italic;
  color: #08f;
  font-weight: bold;
}
p l {
  display:      inline-block;
  margin-left:  -1em;
  width:        1em;
}

/* TTTTTTTT
      TT
      TT
      TT
      TT    */
._text {
  overflow:     hidden;
  padding-top:  .5em;   /* Platz für Akkorde */
}
#text::before {
  display: block;
  margin-top: .2em;
  height: .1em;
  margin-bottom: .5em;
  background: #fff;
  content: "";
  border-top: .1pt dashed #aaa;
  border-bottom: .1pt dashed #aaa;
}
.taktstrich {
  color:      #888;
  font-style: normal; /* im Refrain NICHT italic */
}
.vP { /* 2024-04-09 viertel Pause */
  font-weight:    normal;
  font-style:     bold;
  color:          #f00;
  font-size:      140%;
  font-family:    monospace;
  vertical-align: bottom;
}
.vP:after {
  display:        inline-block;
  width:          .3em;
  content:        " ";
}
.bghgelb {
  background: #ffc;
}
.bo {
  padding: 5px;
  border: 1px solid #aaf;
  border-radius: 5px;
}
.bo.bghgelb {
  margin-bottom:  .5em;
}
.button {
  padding: 5px;
  background: #ccc;
  border: 1px solid #aaf;
  cursor: pointer;
}
.button:active {
  background: #ccf;
}
.clear {clear:both}
.co {
  text-align: center;
}
.courier {
  font-family: 'courier new', courier;
}
.cur_pointer {
  cursor: pointer;
}
.em08 {font-size:80%}
.em12 {font-size:120%}
.li {
  float: left;
  margin-right: .5em;
  margin-bottom: .5em;
}
.ls2 {
  letter-spacing: .2em;
}
.ls-1, ls-1 {
  letter-spacing: -.05em;
}
.ls-2, ls-2 {
  letter-spacing: -.1em;
}
.ls-3, ls-3 {
  letter-spacing: -.15em;
}
.mb00 {margin-bottom:0}
.mb05 {margin-bottom:0.5em}
.ml20 {margin-left:2em}
.ml40 {margin-left:4em}
.pos_karaoke {    /* 2025-04-16 */
  background-color: #Ff0!important;
}
.pos_markiert {
  background-color: #0f0!important;
}
.qrc {
  width:  4em;
}
.qrc img {
  display:  block;
  width:    100%;
}
.re {
  float: right;
  margin: 0 0 0.5em 0.5em;
}
img.rgnbgn {
  display:        block;
  width:          100%;
  height:         1px;
  margin-top:     .2em;
  margin-bottom:  .2em;
}
.ro {
  text-align: right;
}
time {
  cursor:   pointer;
}
time.inline {
  display:  inline-block;  /* wg. background-color */
}

/* 2024-09-16 Akkorde-Test */
x-a {
  white-space:  nowrap;
}

/* ****************
 * Sprachen
 * **************** */
de { color: #00a!important; }
en { font-style: italic; color: #a00!important; }

/* ENDE */