@import url('/kirche-kosel/fonts');

:root {
  --maxwidth: 1366px;

  --BG0: #ffffff;
  --BG1: #ff000022;
  --BG2: #ffaa0022;
  --BG3: #00aaff22;
  --BG4: #0000ff22;

  --CB: #222222;
  --C0: #888888;
  --C1: #ca3f4a;/*#ff0000;*/
  --C2: #3d4f9c;/*#ffaa00;*/
  --C3: #2b9463;/*#00aaff;*/
  --C4: #e6d700;/*#0000ff;*/
}

body {
  font-family: 'Open Sans';
  color: var(--CB);
  /*background-color: var(--BG2);/**/
  background: linear-gradient(to bottom right,var(--BG2), var(--BG3));
  background-attachment: fixed;
    /*linear-gradient(var(--BG1) 0%, var(--BG1) 50%, var(--BG2) 100%),
    /*linear-gradient(to right, var(--BG3) 30%, var(--BG1) 50%, var(--BG4)) 70%);/**/
}

kosel::before {
  content: "\0025AE ";
  color: #f79210;
}

fleckeby::before {
  content: "\0025AE ";
  color: #2b6d8b;
}

kfl::berfore {
  content: "\0025AE ";
  color: #2b6d8b;
}


ksx::before {
  content: "\0025AF ";
  color: #f79210;
}

flx::before {
  content: "\0025AF ";
  color: #2b6d8b;
}

others::before {
  content: "\0025AF ";
  color: #6ec72d;
}

.logo, .rahmen {
  display: flex;
  align-items: center;
}
.rahmen-top {
  height: 100%;
/*  background: linear-gradient(to bottom right,var(--BG2), var(--BG3));/**/
}
.rahmen {
  height: 100%;
  justify-content: center;
  /*  background: linear-gradient(to bottom right,var(--BG2), var(--BG3));/**/
}

.bottomline {
  border-bottom: 1px solid var(--C0);
}

.li-menu {
  list-style: none;
  padding-left: 0;
}


h1, h2, h3, h4, h5, h6, .little {
  color: var(--C0);
}
a.c4:nth-child(4n+1) {
  color: var(--C1);
}
a.c4:nth-child(4n+2), li a.menu:nth-child(4n+2) {
  color: var(--C2);
}
a.c4:nth-child(4n+3) {
  color: var(--C3);
}
a.c4:nth-child(4n) {
  color: var(--C4);
}

a {
  color: var(--C4);
}
.txt {
}
a {
  text-decoration: none;
}

.bottom {
  position: fixed;
  bottom: 0;
/*  width: calc(100% - 20px);
  max-width: var(--maxwidth);/**/
  left:
  text-align: right;
  padding: 0 10 0 10;
  margin: 0 auto;
  background-color: var(--BG0);
}
.fixoben {
  top: 0;
  position: sticky;
  width: 100%;
  background-color: var(--BG0);
}
.little {
  font-size: 10px;
}

table, td, th {
  padding: 4px;
  border: 1px solid var(--C0);
}
table {
  width: 100%;
}

.gottesdienste {
  border-collapse: collapse;
}
.sonntag {
  font-weight: bold;
  /*background-color: var(--BG1);/**/
  background: linear-gradient(to bottom right,var(--BG1), var(--BG0));
}
.freitag {
  background-color: var(--BG2);
}
.dienstag {
  background-color: var(--BG3);
}
.samstag {
  background-color: var(--BG4);
}

.info {
  font-weight: normal;
  font-style: italic;
}
.menu {
  width: 100%;
  padding: 4;
  margin: 2 0 4 0;
}

.liste {
  padding: 0 0 0 8;
}

.liste:nth-child(3n) {
/*background-color: var(--BG1);/**/
background: linear-gradient(to bottom right,var(--BG1), var(--BG0));
}

.liste:nth-child(3n+1) {
  /*background-color: var(--BG2);/**/
  background: linear-gradient(to bottom right,var(--BG4), var(--BG0));
}

.liste:nth-child(3n+2) {
  /*background-color: var(--BG3);/**/
  background: linear-gradient(to bottom right,var(--BG2), var(--BG0));
}

/*.liste:nth-child(4n+3) {
  background: linear-gradient(to bottom right,var(--BG1), var(--BG0));
}/**/

.content {
  max-width: var(--maxwidth);
  min-height: calc(100% - 40px);
  margin: 0 auto;
  background-color: var(--BG0);
  padding: 20px;
}
.kosel {
  background-color: #f89c1c;
}
.fleckeby {
  color: #ffffff;
  background-color: #097393;
}
.louisenlund {
  background-color: #79c142;
}

@media (max-width: 500px) {
  .row {
    grid-template-columns: 1fr 4fr;
  }
  .v1 {
    display: none;
  }
}
@media (min-width: 501px) {
  .row {
    grid-template-columns: 2fr 3fr 1fr 5fr;
  }
  .vk {
    display: none;
  }
  .m3 {
    display: inline-block;
/*    margin: 0 4 0 4;
    padding: 0 4 0 4;/**/
  }/*
  .m3::before {
    content: ' | ';
  }/**/
  .m3::after {
    content: ' | ';
    color: var(--C0);
  }
  .m3:after:last-child {
    content: none;
  }
}

.row {
  display: grid;

  border-bottom: 1px solid #cccccc;
  align-items: center;
}

.row:nth-child(2n){
  background-color: #f8f8f8;
}

.sp1, .sp2, .sp3, .sp4 {
  vertical-align: middle;
}

.bold {
  font-weight: bold;
}

.alert {
  color: var(--C1);
  font-weight: bold;
}

.lesung {
  color: var(--C4);
}
.lied {
  color: var(--C3);
}
@media not print {
  .print {
    display: none;
  }
}
@media print {
  audio, h2:not(.printit), .vk:not(h4), .v1:not(h1), h1:not(.v1), .bottom, .dontprint, .menu {
    display: none;
  }
  .print, .printit {
    display: show;
  }
  h4:.vk, h1:.v1 {
    text-align: right;
  }
  #qrcode {
    height: 256px;
    width: 256px;
  }
}