/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 31.01.2021, 21:55:25
    Author     : Mobildiscothek
    Last edit  : 23.03.2023 10:09:00
*/

@media screen {
    body {
        background-image:url("Logo.png");
        background-repeat:no-repeat;
        /*background-position:center;*/
        background-position: right center;
        /*height: 150px; */
        /*width: 97%; */
        margin-right: 40px;
        margin-left: 40px;
        position: relative;
    }

    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    h1 {
      color: black;
      font-family: verdana;
      font-size: 140%;
      border: 1px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }

    h2 {
      color: blue;
      font-family: verdana;
      font-size: 110%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }
    
/*    a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid blue;
    padding: 5px 10px;
    margin: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    }*/

    a:hover, a:active {
      background-color: white;
      color: blue;
      font-weight: bold;
    }
    
    p {
      color: darkblue;
      font-family: courier;
      font-size: 100%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }

    .litext {
      color: darkblue;
      font-family: courier;
      font-size: 100%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }
    
    details {
      color: darkblue;
      font-family: courier;
      font-size: 100%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }
    
    textarea {
/*        margin-left: 30px;
        margin-right: 30px;*/
    }

    #maintabpabel {
        display: flex; /* zwei Spalten: links Tabs, rechts Inhalt */
    }
    
    #tabcontent {
        padding: 1em;
        flex: 1; /* füllt den Rest des Containers */
      }
    
    #tablist {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        width: 180px; /* oder wie breit du die Tab-Leiste willst */
        border-right: 1px solid #ccc;
      }

      #tablist li {
        background-color: lightgrey;
        border: 1px solid black;
        border-right: none; /* statt border-bottom */
         /* border-radius: 0.5em 0 0 0.5em; abgerundet links oben/unten */
        border-radius: 0 0 0 0;
        display: block;
        font-weight: bold;
        padding: 0.8em 1em;
        cursor: pointer;
      }

      #tablist li:hover,
      #tablist li:focus {
        background-color: yellow;
      }

      #tablist li[aria-selected="true"] {
        background-color: white;
        font-weight: bold;
      }

    #tabcontent {
      background-color: white;
      border: 1px solid black; 
      margin-top: 0px;
      padding: 1em;
    }

    [aria-hidden="true"] {
      display: none;
    }

    [aria-hidden="false"] {
      display: block;
    }

    .sortbutton { 
            width: 100%; 
            height: 100%; 
            border: none; 
            background-color: transparent; 
            font: inherit; 
            color: inherit; 
            text-align: inherit; 
            padding: 0; 
            cursor: pointer; 
    } 
    .sortierbar thead th span.visually-hidden { 
            position: absolute !important; 
            clip: rect(1px, 1px, 1px, 1px) !important; 
            padding: 0 !important; 
            border: 0 !important; 
            height: 1px !important; 
            width: 1px !important; 
            overflow: hidden !important; 
            white-space: nowrap !important; 
    } 
    .sortierbar caption span { 
            font-weight: normal; 
            font-size: .8em; 
    }
    .sortbutton svg { 
            margin-left: .2em; height: .7em; 
    } 
    .sortbutton.sortedasc svg path:last-of-type { 
            fill: currentColor !important; 
    } 
    .sortbutton.sorteddesc svg path:first-of-type { 
            fill: currentColor!important; 
    }
    .sortbutton.sortedasc > span.visually-hidden:first-of-type { 
            display: none;
    } 
    .sortbutton.sorteddesc > span.visually-hidden:last-of-type { 
            display: none;
    } 
    .sortbutton.unsorted > span.visually-hidden:last-of-type { 
            display: none;
    }
    
    #map {
            width: 30%;
            height: 350px;
            margin-left: 33px;
    }

    .center {
        display: none;
        margin-left: auto;
        margin-right: auto;
        width: 5%;
    }
    
    .sortable
    {
        border: 1px solid black;
        border-collapse: collapse;
/*        width: 100%;*/
    }
    
    .iplist
    {
        color: darkblue;
        font-family: courier;
        font-size: 100%;
        border: 0px solid powderblue;
/*        margin-left: 40px;
        margin-right: 40px;*/
    }
    
    #info-popup { 
      color: darkblue;
      font-family: courier;
      text-align: center; 
      background: #fff;
      position: fixed;
      top: 0px; 
      left: 0;
      right: 0;
      z-index: 9999;
      font-size:17px; 
      line-height:20px;
      padding: 20px;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      }

    #info-popup.hidden {
      display: none;
    }
    
    #cookie-popup { 
    text-align: center; 
    background: #fff;
    position: fixed;
    top: 0px; 
    left: 0;
    right: 0;
    z-index: 9999;
    font-size:14px; 
    line-height:20px;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    }

    #cookie-popup.hidden {
      display: none;
    }
    
    .container {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Abstand zwischen Formular und Bild */
    padding: 0px;
    justify-content: flex-start;
    }

    form#telegram {
      width: 300px;
    }

    img {
      max-width: 200px;
      height: auto;
      border-radius: 6px;
    }
    
    .header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.title {
  font-family: Verdana, sans-serif;
  font-size: 140%;
  margin: 0;
}

.inline-elements {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-elements img {
  vertical-align: middle;
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.newsletter-form input,
.newsletter-form button {
  font-size: 1em;
  padding: 4px 8px;
  height: 32px;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;
}

.donation-box {
  border: 1px solid #ccc;
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  margin: 1rem 0;
  background: #f8f8f8;
}

.donation-box summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.3rem 0;
}

.donation-content {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.cost-info {
  font-style: italic;
  margin-bottom: 0.6rem;
}

.crypto-grid {
  display: flex;
  gap: 1rem;
  padding: 0.3rem 0;
}

.crypto-grid img {
  max-width: 85px; /* kleiner für flachere Box */
  border-radius: 4px;
}

.donation-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.88rem;
}

.donation-table td {
  padding: 2px 0;
  border-bottom: 1px dotted #ccc;
}


}

@media print {
    @page {
         /*margin: 20; Nur für Pilot*/
    }
    body {
        /*margin: 2.0cm; /*Nur für Pilot*/
        margin-right: 40px;
        margin-left: 60px;
        margin-top: 60px;
        position: relative;
        zoom: 80%;
    }

    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    h1 {
      display: none;
    }
    
    .noprint {
        display: none;
    }
    
    .noprintpersistent {
        display: none;
    }
    
    h2 {
      color: blue;
      font-family: verdana;
      font-size: 110%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }
    p {
      color: darkblue;
      font-family: courier;
      font-size: 100%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }
    
    details {
      color: darkblue;
      font-family: courier;
      font-size: 100%;
      border: 0px solid powderblue;
/*      margin-left: 40px;
      margin-right: 40px;*/
    }

    textarea {
/*        margin-left: 30px;
        margin-right: 30px;*/
    }

    #tablist {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #tablist li {
      background-color: lightgrey;	
      border: 1px solid black;
      border-bottom: none;
      border-radius: 0.5em 0.5em 0 0;
      display: inline;
      font-weight: bold;
      height: 1em;
      padding: 0.5em 0.5em 10px;
    }

    #tablist li:focus, 
    #tablist li:hover {
      background-color: yellow;
    }

    #tablist li[aria-selected="true"] {
      background-color: white;
      padding: 0.5em 0.5em 11px;  
    }

    #tabcontent {
      background-color: white;
      border: 1px solid black; 
      margin-top: 10px;
      padding: 1em;
    }

    [aria-hidden="true"] {
      display: none;
    }

    [aria-hidden="false"] {
      display: block;
    }

    .sortbutton { 
            width: 100%; 
            height: 100%; 
            border: none; 
            background-color: transparent; 
            font: inherit; 
            color: inherit; 
            text-align: inherit; 
            padding: 0; 
            cursor: pointer; 
    } 
    .sortierbar thead th span.visually-hidden { 
            position: absolute !important; 
            clip: rect(1px, 1px, 1px, 1px) !important; 
            padding: 0 !important; 
            border: 0 !important; 
            height: 1px !important; 
            width: 1px !important; 
            overflow: hidden !important; 
            white-space: nowrap !important; 
    } 
    .sortierbar caption span { 
            font-weight: normal; 
            font-size: .8em; 
    }
    .sortbutton svg { 
            margin-left: .2em; height: .7em; 
    } 
    .sortbutton.sortedasc svg path:last-of-type { 
            fill: currentColor !important; 
    } 
    .sortbutton.sorteddesc svg path:first-of-type { 
            fill: currentColor!important; 
    }
    .sortbutton.sortedasc > span.visually-hidden:first-of-type { 
            display: none;
    } 
    .sortbutton.sorteddesc > span.visually-hidden:last-of-type { 
            display: none;
    } 
    .sortbutton.unsorted > span.visually-hidden:last-of-type { 
            display: none;
    }
    
    .sortable
    {
        border: 1px solid black;
        border-collapse: collapse;
/*        width: 100%;*/
/*        margin-right: 40px;*/
    }
    
    #map
    {
        width: 30%;
        height: 350px;
        margin-left: 33px;
    }
    
    .iplist
    {
        color: darkblue;
        font-family: courier;
        font-size: 100%;
        border: 0px solid powderblue;
/*        margin-left: 40px;*/
        margin-right: 40px;
    }
}