/** **********************************************************************************
 *  Main-Styles TSV Aindling
 *  
 *  @history 01.01.2026 2.00 JK Neuerstellung
 ** ******************************************************************************* */
/* ---- Globale-Variablen ---------------------------------------------------------------------------------------- */
:root { 
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-green: #28A745;
  --color-red: #DC3545;
  --color-blue: #006AB2;  
  --color-primary: #C80000;
  --color-secondary: #A00000;
  --color-tertiary: #EE6666;
  --color-gray-light: #E7E7E7;
  --color-gray-dark: #404040;
  --color-error-background: #FFFFCC;
}

/* ---- Globale-Styles ---------------------------------------------------------------------------------------- */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { scroll-behavior: smooth; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; color: var(--color-black); background-color: var(--color-white); font-family: Verdana,sans-serif; font-size: 1rem; }

/* ---- Tag-Styles ---------------------------------------------------------------------------------------- */
input, textarea, select, option { font-size: 0.9rem; font-family: Verdana,sans-serif; }
input, textarea { padding: 2px; }

a { text-decoration: none; outline-width: 0; }
a, a:visited, a:focus { color: var(--color-primary); }
a:hover { color: var(--color-black); }

h1 { font-size: 1.0rem; }
h2 { font-size: 0.9rem; font-weight: bold; color: var(--color-black); }
h3 { font-size: 1.3rem; font-weight: bold; color: var(--color-primary); }
h4 { font-size: 0.9rem; font-weight: normal; }
p  { font-size: 0.9rem; text-align: justify; }

/* ---- Margin and Padding Class-Styles ----------------------------------------------------------------
 t - top, b - bottom, l - left, r - right
 x - left and right, y - top and bottom
 blank - all 4 sides
*/
.mts { margin-top: 0.5rem; }
.mtm { margin-top: 0.75rem; }
.mbs { margin-bottom: 0.5rem; }
.mbm { margin-bottom: 0.75rem; }
.mxs { margin-left: 0.5rem;  margin-right: 0.5rem; }
.mxm { margin-left: 0.75rem; margin-right: 0.75rem; }
.mys { margin-top: 0.5rem;  margin-bottom: 0.5rem; }
.mym { margin-top: 0.75rem; margin-bottom: 0.75rem; }

/* ---- Class-Styles ---------------------------------------------------------------------------------------- */
.left    { text-align: left; }
.right   { text-align: right; }
.center  { text-align: center; }
.justify { text-align: justify; }
.top     { vertical-align: top; }
.middle  { vertical-align: middle; }
.bottom  { vertical-align: bottom; }

.bold { font-weight: bold !important; }
.color-primary { color: var(--color-primary) !important; }
.font-normal { font-size: 0.9rem !important; }
.font-small  { font-size: 0.75rem !important; }
.font-mini   { font-size: 0.65rem !important; }

.container { margin: 0 auto; max-width: 100%; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 1000; overflow: auto; background-color: rgba(0,0,0,0.75); }
.hidden { display: none !important; }

.Fehler { font-size: 0.8rem; padding: 12px 2px 12px 45px; border: 1px dotted var(--color-primary); background: var(--color-error-background) url(/bilder/tsv_fehler_33_29_1.gif) no-repeat 6px center; }
.FehlerFormularfeld { border: 1px dotted var(--color-primary); background-color: var(--color-error-background); }
.Formularfeld { border: 1px solid var(--color-primary); background-color: var(--color-white); }
.Pflichtfeld { font-size: 1rem; color: var(--color-primary); font-weight: bold; }

/* Tooltip */
.tooltip { position: relative; display: inline-block; }
.tooltip::before {
  content: attr(data-tooltip);
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0.5rem; 
  width: max-content;
  min-width: 250px;
  max-width: calc(100% - 2rem);
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  white-space: pre-line; /* für 
 Zeilenumbrüche */
  text-align: left;
  font-size: 0.8rem;
  padding: 0.2rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.56); 
  z-index: 50;
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.tooltip::after {
  content: "";
  visibility: hidden;
  position: absolute;
  top: -10px;
  left: 25px;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid var(--color-gray-dark);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.6s;  
}
.tooltip:hover::before,
.tooltip:hover::after { visibility: visible; opacity: 1; }

/* Button */
.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 2px 10px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 5px;
  opacity: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn:hover, .btn:focus { opacity: 0.8; color: var(--color-black); }
.btn-small { font-size: 0.75rem; padding: 1px 5px; }
.btn-mini  { font-size: 0.65rem; padding: 0px 5px; }
.btn-green           { color: var(--color-white); background-color: var(--color-green); }
.btn-green:visited   { color: var(--color-white); }
.btn-red             { color: var(--color-white); background-color: var(--color-red); }
.btn-red:visited     { color: var(--color-white); }
.btn-blue            { color: var(--color-white); background-color: var(--color-blue); }
.btn-blue:visited    { color: var(--color-white); }
.btn-primary         { color: var(--color-white); background-color: var(--color-primary); background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); }
.btn-primary:visited { color: var(--color-white); }
.btn-row { display: flex; align-items: stretch; justify-content: flex-start; gap: 5px; }
.btn-row .btn { width: 100%; max-width: 250px; }
.btn-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
.btn-group .btn { border-radius: 0px; }
.btn-group .btn:first-child { border-radius: 5px 0px 0px 5px; }
.btn-group .btn:last-child  { border-radius: 0px 5px 5px 0px; }
.btn-times { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; line-height: 1; font-size: 1.8rem; font-weight: bold; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.56); transition: all 0.2s ease; }
.btn-times:hover, .btn:focus { color: var(--color-white); background-color: var(--color-gray-dark); }
.btn-times:after { content: "\2715"; }

/* Grid - https://www.w3schools.com/csS/css_grid_container.asp */
.grid { display: grid; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.grid > * { box-sizing: border-box; }
.grid.x-left   { justify-content: start; }
.grid.x-right  { justify-content: end; }
.grid.y-top    { align-items: start; }
.grid.y-bottom { align-items: end; }
.grid.c-top    { align-content: start; }
.grid.c-bottom { align-content: end; } 

/* Flex - https://www.w3schools.com/csS/css3_flexbox_container.asp */
.flex { display: flex; flex-wrap: wrap; box-sizing: border-box; }
.flex > * { box-sizing: border-box; }
.flex.x-left   { justify-content: flex-start; }
.flex.x-right  { justify-content: flex-end; }
.flex.y-top    { align-items: flex-start; }
.flex.y-bottom { align-items: flex-end; }
.flex.c-top    { align-content: flex-start; }
.flex.c-bottom { align-content: flex-end; } 

/* Grid|Flex - inside the row */
.x-center   { justify-content: center; }
.x-around   { justify-content: space-around; }
.x-between  { justify-content: space-between; }
.x-evenly   { justify-content: space-evenly; }
.y-middle   { align-items: center; }
.y-stretch  { align-items: stretch; }
.y-baseline { align-items: baseline; }

/* Grid|Flex - all rows in the complete container */
.c-middle  { align-content: center; }
.c-stretch { align-content: stretch; }
.c-between { align-content: space-between; }
.c-around  { align-content: space-around; }
.c-evenly  { align-content: space-evenly; }

/* ---- Modal Styles ---------------------------------------------------------------------------------------- */
.modal { opacity: 0; transition: opacity 0.5s ease; }
.modal_wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0px; }
.modal_content { position: relative; display: flex; justify-content: center; align-items: center; max-width: 100%; max-height: 100%; }
.modal_content img { display: block; cursor: pointer; background-color: var(--color-white); padding: 2px; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.modal_content table { cursor: pointer !important; background-color: var(--color-white); padding: 2px; width: 100%; max-width: 600px; }
.modal_content .btn-times { position: absolute; top: 4px; right: 4px; z-index: 5; } /* x inside of the content, larger screens outside with media querys */

/* ---- Card Styles ---------------------------------------------------------------------------------------- */
.card {  
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: visible; /* for overlay card_image div left -8px */
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
}
.card_bereich { font-size: 1.0rem; text-transform: uppercase; color: var(--color-white); background-color: var(--color-black); }
.card_bereich a { display: block; padding: 2px 0.75rem; color: var(--color-white); }
.card_bereich a:visited { color: var(--color-white); background-color: var(--color-black); }
.card_bereich a:hover   { color: var(--color-white); background-color: var(--color-primary); }
.card_bereich a:focus   { color: var(--color-white); background-color: var(--color-primary); }

.card_bild_text { font-size: 0.8rem; text-align: center; }
.card_bild_text a { display: block; padding: 2px 0.25rem; color: var(--color-white); background: rgba(0, 0, 0, 0.6); border-radius: 0 0 10px 10px; }
.card_bild_text a:visited { color: var(--color-white); }
.card_bild_text a:hover   { color: var(--color-white); background-color: var(--color-primary); }
.card_bild_text a:focus   { color: var(--color-white); background-color: var(--color-primary); }

.card_image { position: relative; height: 150px; overflow: visible; }
.card_image_small { height: 40px; }
.card_image_large { height: 300px; }
.card_image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 10px 10px 0 0; }
.card_image .card_bereich   { position: absolute; left: -8px; bottom: 0; transform: translateY(50%); z-index: 10; }
.card_image .card_bild_text { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 2rem); z-index: 5; }
.card_meta { font-size: 0.75rem; color: var(--color-gray-dark); padding: 1rem 0.75rem 0px 0.75rem; }
.card_content { flex: 1; padding: 0px; overflow: hidden; }
.card_content_h1 { font-size: 1.3rem; padding: 0.2rem 0.75rem 0px 0.75rem; color: var(--color-primary); }
.card_content_h2 { font-size: 0.9rem; font-weight: bold; padding: 0.2rem 0.75rem 0px 0.75rem; }
.card_content_t1,
.card_content_t2 { font-size: 0.9rem; text-align: justify; padding: 0.5rem 0.75rem 0px 0.75rem; }
.card_content p.artikel_liste   { font-size: 0.75rem; color: var(--color-gray-dark); padding: 0.75rem 0.75rem 0.25rem 0.75rem; }
.card_content div.artikel_liste { font-size: 0.9rem; padding: 0px 0.75rem; display: grid; box-sizing: border-box; grid-template-columns: auto auto 1fr; gap: 0.25rem; justify-items: start; align-items: center; }
.card_content .artikel_liste_marker { width: 0.5rem; height: 0.5rem; background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary)); }
.card_content .artikel_liste_datum  { font-size: 0.6rem; }
.card_content .artikel_liste_archiv { font-size: 0.6rem; }
.card_content .Tabelle { padding: 0.5rem 0px 0.2rem 0px; }
.card_admin  { font-size: 0.7rem; color: var(--color-gray-dark); padding: 4px 0.75rem; border-top: 1px solid var(--color-gray-light); overflow: hidden; }
.card_admin .btn-row { margin-top: 4px; }
.card_footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; overflow: hidden; font-size: 0.75rem; color: var(--color-gray-dark); padding: 0.2rem 0.75rem; border-top: 1px solid var(--color-gray-light); }
.card_footer > *:first-child { margin-right: auto; }
.card_footer div { display: flex; justify-content: space-between; align-items: center; }
.card_footer div svg { height: 1rem; padding-left: 3px; }

.card_kalender { order: 2; }
.card_kalender .card_content { padding: 0.9rem 0px 0.25rem 0px; }
.card_kalender .legende { font-size: 0.7rem; color: var(--color-gray-dark); }

.card_termin .card_content { padding: 1rem 0px 0.25rem 0px; }
.card_termin .pagination { padding: 5px 0px 0px 0px; }

.card_foto { order: 2; }
.card_foto .card_content { padding: 1rem 0px 0.25rem 0px; }
.card_foto .pagination { padding: 5px 0px 0px 0px; }
.card_foto_wrapper { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-around; /* align-items: center; */ }
.card_foto_content { flex: 0 1 calc(25% - 4px); } /* max 4 Fotos pro Zeile */
.card_foto_content_group { display: flex; flex-direction: column; justify-content: center; }
.card_foto_content_group div { font-size: 0.75rem; text-align: center; overflow: hidden; }
.card_foto_content_group img { width: 100%; height: 100%; max-height: 120px; object-fit: }

.card_tabelle { order: 2; font-size: 0.9rem; }
.card_tabelle .card_content { padding: 1rem 0px 0.25rem 0px; }
.card_tabelle .card_content p { padding: 0.5rem 0.75rem; }
.card_tabelle .card_content .btn-group { padding: 0px 0.75rem 0.25rem 0.75rem; }
.card_tabelle .card_content .card_content_tabelle_k { cursor: zoom-in; }
.card_tabelle .card_content .card_content_tabelle_k table { width: 100% !important; }
.card_tabelle .card_content .modal_content .btn-times { top: -42px; right: 2px; }
.card_tabelle .legende { font-size: 0.6rem; padding: 2px 5px; text-align: right; color: var(--color-gray-dark); }

.card_spielplan { order: 2; }
.card_spielplan .card_content { padding: 0.8rem 0px 0.25rem 0px; }
.card_spielplan .pagination { padding: 5px 0px 0px 0px; }

.card_inhalt_info  { order: 1; font-size: 0.9rem; }
.card_inhalt_info .card_content { padding: 1rem 0px 0.25rem 0px; }

.card_inhalt_mitte_center { order: 2; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.card_inhalt_mitte_center img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card_inhalt_mitte_center a:hover { opacity: 0.8; }

.card_hinweis { order: 50; }
.card_hinweis > div {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
}
.card_hinweis > div div { padding: 5px; font-size: 0.9rem; }
.card_hinweis > div div:nth-of-type(1) { display: flex; align-items: center; font-size: 1.3rem; color: var(--color-white); background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary)); }
.card_hinweis a { font-size: 1.3rem; }

/* ---- Pagination Styles ---------------------------------------------------------------------------------------- */
.pagination { order: 100; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; gap: 5px; font-size: 0.9rem; }
.pagination > * { padding: 3px 6px; }
.pagination div { border: 1px solid var(--color-gray-dark); color: var(--color-gray-dark); }
.pagination div.active { color: var(--color-white); background-color: var(--color-green); border: 1px solid var(--color-green); }
.pagination a { display:block; border: 1px solid var(--color-primary); }
.pagination a:hover, 
.pagination a:focus { color: var(--color-white); background-color: var(--color-tertiary); }

/* ---- Modal Image Styles ---------------------------------------------------------------------------------------- */
.showimg { position: relative; overflow: hidden; cursor: zoom-in; }
.showimg img { width: 100%; height: auto; object-fit: cover; object-position: center; }
.showimg div { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 2rem); text-align: center;
               font-size: 0.8rem; padding: 2px 0.75rem; color: var(--color-white); background: rgba(0, 0, 0, 0.6); border-radius: 0 0 10px 10px; z-index: 5; }

/* ---- ID-Styles ---------------------------------------------------------------------------------------- */
#suchen { 
  display: flex; flex-direction: row; align-items: center; position: relative; 
  width: 100%; max-width: 600px; overflow: hidden; 
  border-radius: 1.5rem; border: 1px solid var(--color-primary);
  background-color: var(--color-white); }
#suchen input { font-size: 1.5rem; width: calc(100% - 30px); padding: 5px 0px 5px 10px; outline: none; }
#suchen button { display: flex; width: 30px; height: 24px; cursor: pointer; align-items: center; justify-content: center;  background-color: var(--color-white); }

#wappen { background-color: transparent; }
#wappen a { position: absolute; z-index: 150; }
#wappen img { height: 100px; width: auto; opacity: 1; margin: 16px 0px 0px 10px; transition: all 0.6s ease; }
#wappen.shrink img { height: 0px; margin: 58px 0px 0px 50px; opacity: 0; }

#banner { color: var(--color-white); background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); }
#banner_content { height: 70px; border-bottom: 1px solid var(--color-white); overflow: hidden; }
#banner_content img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

#header { color: var(--color-white); background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); }
#header_content { min-height: 45px; padding: 20px 10px 5px 100px; }
#header_content h1 { text-align: right; font-style: italic; font-weight: bold; font-size: 0.65rem; }

#navigation { position: sticky; top: 0; z-index: 100; color: var(--color-white); background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); }
#navigation_content { font-size: 1rem; transition: all 0.5s ease; }
#navigation_content a { display: flex; align-items: center; gap: 2px; padding: 4px 6px; white-space: nowrap; }
#navigation_content a, #navigation a:visited, #navigation a:focus { color: var(--color-white); }
#navigation_content a:hover { color: var(--color-primary); background-color: var(--color-tertiary); }
#navigation_content a.active { color: var(--color-white); background-color: var(--color-green); }
#navigation_content a.active:hover, #navigation_content a.active:focus { color: var(--color-primary); background-color: var(--color-tertiary); }
#navigation_content a svg { display: block; height: 1rem; transition: height 0.5s ease; }
#navigation_content.shrink { font-size: 0.9rem; }
#navigation_content.shrink a { padding: 2px 6px; }
#navigation_content.shrink a svg { height: 0.9rem; }
#navigation_benutzer { position: relative; margin-left: auto; }
#navigation_benutzer_content { display: block; position: absolute; z-index: 125; top: 100%; right: 0; color: var(--color-white); background-color: var(--color-black); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); opacity: 0.8; }
#navigation_benutzer_content.shrink { display: none; }

#marquee_content { font-size: 1rem; white-space: nowrap; padding: 2px 6px 0px 6px; }
#marquee_content marquee a { color: var(--color-white); }
#navigation_content.shrink ~ #marquee_content { font-size: 0.9rem; }

#wrapper { display: grid; grid-template-columns: auto 1fr; } /* sidebar | content */

#sidebar {
  position: fixed;
  top: 0;
  z-index: 200;
  color: var(--color-black);
  background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary));
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 350px;
  max-height: 100vh;
  padding-bottom: 2rem;
  transition: max-width 0.5s ease;
}
#sidebar a { color: var(--color-white); }
#sidebar a:hover, 
#sidebar a:focus { color: var(--color-primary); background-color: var(--color-tertiary); }
#sidebar a.active { color: var(--color-white) !important; background-color: var(--color-green) !important; }
#sidebar a.active:hover, 
#sidebar a.active:focus { color: var(--color-primary) !important; background-color: var(--color-tertiary !important); }

#sidebar nav ul { display: block; list-style: none; margin: 0; padding: 0; }
#sidebar nav ul.shrink { display: none; }

#sidebar .nav { color: var(--color-white); background-color: var(--color-primary); border-bottom: 1px solid var(--color-white); }
#sidebar .nav a { position: relative; display: block; padding: 10px 6px 10px 6px; }
#sidebar li.expanded .nav { color: var(--color-secondary); background-color: var(--color-tertiary); }

#sidebar .nav_level_top { font-size: 1.5rem; }
#sidebar .nav_level_hb  { font-size: 1.2rem; }
#sidebar .nav_level_eb  { font-size: 1.1rem; }
#sidebar .nav_level_kb  { font-size: 1.1rem; }

#sidebar .nav_top > a:nth-of-type(1) { padding: 0px; }
#sidebar .nav_top > a:nth-of-type(2) { padding: 4px 5px; display: flex; flex-wrap: nowrap; align-items: center; font-size: 0.75rem; }
#sidebar .nav_top svg { display: block; height: 1.2rem; }

#sidebar .nav_hotlink { padding: 4px 0px 2px 0px; }
#sidebar .nav_hotlink a { display: grid; justify-content: center; padding-bottom: 2px; }
#sidebar .nav_hotlink a:hover { opacity: 0.8; }

#sidebar .nav_flex { display: flex; flex-wrap: nowrap; align-items: stretch; }
#sidebar .nav_flex > div:nth-of-type(1) { flex: 1 1 auto; }
#sidebar .nav_flex > div:nth-of-type(2) { flex: 0 0 30px; border-left: 1px solid var(--color-white); }
#sidebar .nav_flex > div:nth-of-type(2) a::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  transition: transform 0.5s ease;
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.8rem solid currentColor;  
}
#sidebar li.expanded > .nav_flex > div:nth-of-type(2) a::after { transform: translateY(-50%) rotate(540deg); }
#sidebar li.expanded > .nav_flex > div:nth-of-type(2) a,
#sidebar li.expanded > .nav_flex > div:nth-of-type(2) a:focus { color: var(--color-white); background-color: var(--color-primary); }
#sidebar li.expanded > .nav_flex > div:nth-of-type(2) a:hover { color: var(--color-primary); background-color: var(--color-tertiary); }

#sidebar_hotlink { display: none; }
#sidebar_wappen  { display: block; width: 90px; height: 100px; margin: 5px auto 0px auto; transition: all 0.5s ease; }
#sidebar.shrink { max-width: 0px; }
#sidebar.shrink #sidebar_wappen { width: 0px; height: 0px; margin: 0px; }

#content { min-height: 60vh; color: var(--color-black); background-color: var(--color-white); }
#content_top { padding: 10px; }
#content_middle { gap: 1rem; padding: 0px 10px; }
#content_middle_max_auto { gap: 1rem; padding: 0px 10px; }
#content_middle_auto_auto { gap: 1rem; padding: 0px 10px; }
#content_bottom { padding: 10px; }

#content_form { gap: 0.5rem; padding: 0px 10px; }
#content_form .card_bereich { padding: 2px 0.75rem; }
#content_form .card_content_h1,
#content_form .card_content_h2,
#content_form .card_content_t1,
#content_form .card_content_t2 { text-align: left; padding: 0px; }

#content_fotogalerie .card_bereich   { display: inline; padding: 2px 0.5rem; }
#content_fotogalerie .card_bereich a { display: inline; padding: 2px 0px; }
#content_fotogalerie .card_content_h1 { font-size: 1.3rem; padding: 0.2rem 0px; color: var(--color-primary); }
#content_fotogalerie .card_foto { padding: 0px 0px 5px 0px; }

#content_tabellen { gap: 1rem; padding: 0px 10px; }
#content_kalender { gap: 1rem; padding: 0px 10px; }
#content_archiv   { gap: 1rem; padding: 0px 10px; }
#content_suchen   { gap: 1rem; padding: 0px 10px; }

#content_benutzer { gap: 0.5rem; padding: 0px 10px; }
#content_benutzer.grid { grid-template-columns: auto 1fr; }
#content_benutzer .label { font-size: 0.75rem; text-align: right; }

#bereich { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; gap: 5px; }
#bereich a { display: block; font-size: 0.9rem; padding: 2px 6px; border-radius: 10px; border: 1px solid var(--color-gray-light); box-shadow: 0 8px 20px -5px rgba(0,0,0,0.40); }
#bereich a:hover, #bereich a:focus { color: var(--color-white); background-color: var(--color-primary); }

#footer { padding: 15px 5px 10px 5px; font-size: 0.8rem; color: var(--color-white); background-color: var(--color-gray-dark); }
#footer a, #footer a:visited, #footer a:focus { color: var(--color-white); }
#footer a:hover { color: var(--color-primary); }
#footer_content p { padding-top: 5px; }
#footer_content div { padding-bottom: 5px; }
#footer_copyright { font-size: 0.7rem; padding-top: 5px; }

#gototop { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 20px; overflow: hidden; outline: none; color: var(--color-white); background-color: var(--color-secondary);  opacity: 0.8; border-radius: 50%; cursor: pointer; transition: all 0.6s ease; }
#gototop:hover { background-color: var(--color-primary); }
#gototop.shrink { width: 0; height: 0; bottom: 30px; right: 30px; opacity: 0; }

#waiting        { display: flex;  background-color: transparent; }
#waiting.shrink { display: none; }
#waiting > div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:5px; padding: 15px 10px 5px 10px; color: var(--color-white); background: rgba(0,0,0,0.65); border-radius: 5px; }
#waiting > div > div:first-of-type { display: block; width: 40px; height: 40px; border: 4px solid var(--color-white); border-top: 4px solid var(--color-secondary); border-radius: 50%; animation: spin 1s linear infinite; }
#waiting > div > div:last-of-type  { padding-top: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#loginformular label { display: block; margin: 15px 0px 5px 0px; font-size: 0.8rem; font-weight: bold; }
#loginformular input[type="text"],
#loginformular input[type="email"],
#loginformular input[type="password"] { width: 100%; max-width: 250px; }
#loginformular a { display: block; margin: 5px 0px; font-size: 0.8rem; }
#loginformular .btn-row { margin-top: 20px; }

/* ---- TABLE-Styles ---------------------------------------------------------------------------------------- */
TABLE .Kopf { font-size: 0.9rem; padding: 2px 4px; vertical-align: middle; text-align: center; color: var(--color-white); background-color: var(--color-gray-dark); }
TABLE .Kopf a,
TABLE .Kopf a:visited { color: var(--color-white); }
TABLE .Kopf a:hover,
TABLE .Kopf a:focus   { color: var(--color-primary); }
TABLE .ZelleGrau { font-size: 0.8rem; padding: 0px 2px; vertical-align: top; background-color: #F4F4F4; border-bottom: 1px solid #CCCCCC; }
TABLE .Legende { font-size: 0.7rem; padding: 5px 2px 0px 2px; vertical-align: top; }

/*
TABLE .ZelleGrauVerlauf {background:#F4F4F4 url(/bilder/tsv_verlauf_180_270_1.jpg) 0 0; padding:0px 2px 0px 2px; vertical-align:top; border-bottom:1px solid #CCCCCC;}
TABLE .Bilder {font-size:7pt; text-align:center; vertical-align:top;}
TABLE .AuswahlLinks {color:var(--color-white); font-weight:bold; text-align:center; vertical-align:middle; padding:8px; border:1px solid var(--color-white); background:var(--color-primary) url(/bilder/tsv_verlauf_600_70_1.jpg) no-repeat 0 0;}
TABLE .AuswahlRechts {vertical-align:middle; padding:2px; border:1px solid var(--color-white); background:#F4F4F4 url(/bilder/tsv_verlauf_180_270_1.jpg) 0 0;}
TABLE .HinweisSymbol {color:var(--color-white); font-weight:bold; font-size:22pt; background:var(--color-primary) url(/bilder/tsv_verlauf_600_70_1.jpg) no-repeat 0 0; padding:2px 8px 2px 8px; text-align:center; vertical-align:middle; }
TABLE .HinweisText   {background:#F4F4F4 url(/bilder/tsv_verlauf_180_270_1.jpg) 0 0; padding:0px 2px 0px 2px; vertical-align:middle; border:1px solid #CCCCCC;}
*/

/* ---- Terminkalender-Styles ---------------------------------------------------------------------------------------- */
.Kalender     { font-size: 0.8rem; padding: 2px 4px; vertical-align: top; border-bottom: 1px solid #CCCCCC; }
.KalenderKopf { font-size: 0.9rem; padding: 2px 4px; vertical-align: middle; text-align: center; color: var(--color-white); background-color: var(--color-gray-dark); border-bottom: 1px solid #CCCCCC; }
.KalenderTrenner { height: 3px; background: var(--color-primary) url(/bilder/tsv_verlauf_600_70_1.jpg) no-repeat 0 0; }
.KalenderNormal     { background-color: #F4F4F4; }
.KalenderVorher     { background-color: #F4F4F4; color: var(--color-gray-dark); }
.KalenderNachher    { background-color: #F4F4F4; }
.KalenderFerientag  { background-color: #F9C1C1; }
.KalenderWochenende { background-color: #FEE0E0; }
.KalenderFeiertag   { background-color: #D1D1D1; }
.KalenderKommentar  { background-color: #F4F4F4; color: #808080;}
.KalenderTopTermin  { background-color: #FFFFCC; font-size: 0.9rem; font-weight:bold;}
.KalenderTopSpiel   { background-color: #FFFFCC; font-weight:bold;}
.KalenderAktuell    { color: var(--color-white); font-weight:bold; background:var(--color-primary) url(/bilder/tsv_verlauf_600_70_1.jpg) no-repeat 0 0;}

/* ---- Fussballspielplan-Styles ---------------------------------------------------------------------------------------- */
.Spielplan        { font-size: 0.8rem; padding: 2px 4px; vertical-align: middle; }
.SpielplanDatum   { font-size: 0.7rem; padding: 1px 4px; }
.SpielplanPaarung { background-color: #F4F4F4; border-bottom: 1px solid #CCCCCC; }
.SpielplanTrenner { height: 3px; background: var(--color-primary) url(/bilder/tsv_verlauf_600_70_1.jpg) no-repeat 0 0; }
.SpielplanAktuell    { font-weight:bold; }
.SpielplanAktuell a  { font-weight:bold; }
.SpielplanTopSpiel   { font-weight:bold; background-color: #FFFFCC; }
.SpielplanTopSpiel a { font-weight:bold; }
.SpielplanLegende { font-size: 0.7rem; }

/* ---- Fussballtabellen-Styles ---------------------------------------------------------------------------------------- */
.Tabelle     { font-size: 0.8rem; }
.TabelleKopf { font-size: 0.9rem; padding: 2px 4px; vertical-align: middle; text-align: center; color: var(--color-white); background-color: var(--color-gray-dark); border-bottom: 1px solid #CCCCCC; }
.TabelleKopf a { color: var(--color-white); }
.TabelleKopf a:hover,
.TabelleKopf a:focus { color: var(--color-primary); }
.TabelleZeile   { font-size: 0.8rem; background-color: #F4F4F4; padding: 0px 2px; text-align: right; vertical-align: top; border-bottom: 1px solid #CCCCCC; }
.TabelleAuswahl { font-size: 0.8rem; color:var(--color-primary); font-weight: bold; background-color: #F4F4F4; padding: 0px 2px; text-align: right; vertical-align: top; border-bottom: 1px solid #CCCCCC; }
.TabelleFuss    { font-size: 0.7rem; padding: 0px 2px; text-align: right; vertical-align: top; }
.TabelleAuf    { background-color: #C1F9C1; }
.TabelleAufRel { background-color: #E0FEE0; }
.TabelleAbRel  { background-color: #FEE0E0; }
.TabelleAb     { background-color: #F9C1C1; }

/*  Viewport-dependent CSS, which may be overridden sequentially for larger viewports */
@media screen and (min-width: 450px) {
  #header_content h1 { font-size: 0.8rem; }
  #content_middle.grid { grid-template-columns: minmax(0, 1fr); }
  #content_form.grid   { grid-template-columns: minmax(0, 1fr); }
  #footer_content.grid { grid-template-columns: auto auto; text-align: left; }
}

@media screen and (min-width: 600px) {
  #header_content h1 { font-size: 1rem; }
  #content_middle.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content_middle .card_artikel_top,
  #content_middle .card_artikel_alles,
  #content_middle .card_spielplan { grid-column: span 2; }
  #content_middle .card_inhalt_mitte_center,
  #content_middle .card_hinweis, 
  #content_middle .pagination { grid-column: 1 / -1; } /* -1 über alle Spalten in der Zeile */
  #footer_content.grid { grid-template-columns: auto auto auto; }
}

@media screen and (min-width: 768px) {
  #header_content h1 { font-size: 1.4rem; }
  #content_form.grid { grid-template-columns: auto 1fr; }
  #content_form .grid-column-span { grid-column: span 2; }
  #content_middle_max_auto.grid  { grid-template-columns: minmax(0, 1fr) auto; }
  #content_middle_auto_auto.grid { grid-template-columns: auto auto; }
  .modal_wrapper { padding: 22px 22px 0px 22px; } /* padding for the outside x */
  .modal_content .btn-times { top: -20px; right: -20px; } /* x outside of the img */
  .card_tabelle .card_content .modal_content .btn-times { top: -25px; right: -25px; }
}

@media screen and (min-width: 820px) {
  #content_tabellen.grid { grid-template-columns: 1fr 1fr; }
  #content_kalender.grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 995px) {
  .container { width: 995px; }
  #header_content h1 { font-size: 1.5rem; }
  #suchen input { font-size: 1.2rem; }
  #sidebar { position: relative; z-index: 50; max-width: 200px; max-height: 100%; font-size: 1rem; }
  #sidebar .nav a { padding: 1px 5px 1px 5px; }
  #sidebar .nav_level_top { font-size: 1.0rem; }
  #sidebar .nav_level_hb  { font-size: 0.9rem; }
  #sidebar .nav_level_eb  { font-size: 0.8rem; }
  #sidebar .nav_level_kb  { font-size: 0.8rem; }
  #sidebar_wappen  { display: none; }
  #sidebar_hotlink { display: block; }
  #sidebar.shrink ~ #content #content_middle.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}