@charset "UTF-8";

/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../../../../../fonts/inter/inter-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../../../../../fonts/inter/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../fonts/inter/inter-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../../../fonts/inter/inter-v12-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../../../../../fonts/inter/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../../../../../fonts/inter/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../fonts/inter/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../../../fonts/inter/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../../../../../fonts/inter/inter-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: url('../../../../../fonts/inter/inter-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../fonts/inter/inter-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../../../../../fonts/inter/inter-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../../../fonts/inter/inter-v12-latin-900.svg#Inter') format('svg'); /* Legacy iOS */
}


:root {   
   /* tsv-blau:    #005A99  */
   /* tsv-schwarz/grau: #484848  */
   /* tsv-grau1: #C9C9C9;  */
   /* tsv-grau2: #0000004D  */
   /* tsv-grau3: #707070  */ 
  
  --body-bg: #ffffff; /* Bildschirm-Hintergrund */
  --cassiopeia-color-primary: #005A99; /*blau*/
  --cassiopeia-color-hover: #005A99;  
  --cassiopeia-color-link: #000;   
  
  --cassiopeia-font-family-body: "Inter", sans-serif;
  --cassiopeia-font-family-headings: "Inter", sans-serif;
  --cassiopeia-font-weight-headings: 900;
  --cassiopeia-font-weight-normal: 300;  
}

/***************************************************
/**** Externe Links kennzeichnen mit Pfeil       ***
/***************************************************/
a[href^="http://"]:not([href*="tsv-marktl.de"]):after,
a[href^="https://"]:not([href*="tsv-marktl.de"]):after 
{
	content: "➚";
	color: #005A99;
	text-decoration: none;
/* 	font-size: 1em;
    font: normal 18px/1 'Arial';    
    padding-left:7px;
*/
}

/***************************************************
/* externe Links ohne Kennzeichnung, z.B. Bilder ***
/***************************************************/
a.ohnekennzeichnung[href^="http://"]:not([href*="tsv-marktl.de"]):after,
a.ohnekennzeichnung[href^="https://"]:not([href*="tsv-marktl.de"]):after 
{
content: none;
}

/***************************************************
/*  Design - Schriftanpassungen
/***************************************************/
/* Überschrift-1 --- Willkommen beim TSV Marktl*/
h1, .h1 {
  /*font-size: calc(1.375rem + 1.5vw);*/
  text-align: center;
  font: normal normal 300 42px/51px Inter;
  letter-spacing: 0px;
  color: #005A99;
  opacity: 1;
}

@media (min-width: 1200px) {
  h1, .h1 {
/*    font-size: 2.5rem;*/
  text-align: center;
  font: normal normal 300 42px/51px Inter;
  letter-spacing: 0px;
  color: #005A99;
  opacity: 1;
  }
}

/***************************************************
/*  Überschrift-2  - Abteilung X
/***************************************************/
h2, .h2 {
/*font-size: calc(1.325rem + 0.9vw); */
  font: normal normal 300 60px/72px Inter;
  letter-spacing: 0px;
  color: rot; /*#484848;*/
}
@media (min-width: 1200px) {
  h2, .h2 {
/*    font-size: 2rem;*/
font: normal normal 300 36px/44px Inter;
letter-spacing: 0px;
color: #484848;
  }
}

@media screen and (max-width: 400px) {
  h2, .h2 {
font: normal normal bold 20px/22px Inter;
letter-spacing: 0px;
color: #484848;
  }
}

/******************************************************************
/*  Überschrift-3  - Impressionen/Trainingszeiten/Ansprechpartner
/******************************************************************/
h3, .h3 {
/*font-size: calc(1.3rem + 0.6vw); */
  text-align: left;
  font: normal normal 300 26px/24px Inter;
  letter-spacing: 0px;
  color: #484848;
}
@media (min-width: 1200px) {
  h3, .h3 {
/*    font-size: 1.75rem; */
  text-align: left;
  font: normal normal 300 26px/24px Inter;
  letter-spacing: 0px;
  color: #484848;
  }
}
/***************************************************
/*  Überschrift-6  - UNSERE ABTEILUNGEN
/***************************************************/
h6, .h6 {
  font-size: 1rem;
  font: normal normal 300 22px/26px Inter;
  letter-spacing: 1.98px;
  color: #005A99;
}

/*********************************************
/*   Allgemeines DIV zum beenden von Floating 
/*********************************************/
.floatende {
    clear: both;
    display: none;
}

/*********************************************
/*   Bildschirm Hintergrundfarbe einstellen
/*********************************************/
html {
    background-color: #e7eaef;
}

/*********************************************
/*   ganze Seite 
/*********************************************/
 body { 
   background: #FFFFFF 0% 0% no-repeat padding-box;
   font-family: Inter !important;
   max-width: 1407px;
   margin-left: auto;
   margin-right: auto;
}

/***************************************************
/*  Design - Grundeinstellung der Links
/***************************************************/
body a:link, body a:after, body a:hover {
    color: #005A99;
    text-decoration: none;
}

body a:hover {
    text-decoration: underline;
}

/************************************
/* LOGO
/************************************/
.tsv-logo {
  display: block;
  float: left;
  margin-top: 18px;
  margin-left: 2em; /*113px;*/
/*  width: 51px;   height: 65px; */
/*  background: #FFFFFF 0% 0% no-repeat padding-box;*/
  opacity: 1;
}

/*
.tsv-titel {
  margin-top: 18px;
  margin-left: 176px;
  width: 350px;
  height: 31px;

  text-align: left;
  font: normal normal 300 26px/31px Inter; 
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}
*/

/*********************************************
/*  Header
/*********************************************/
.container-header { 
  position: relative; z-index: 10; 
  background-color: #005A99;
  background-image: none;
  padding-bottom: .7em;
}

.container-header nav {
  padding: 0;
  margin-top: 0.5em;
  float: right;
  margin-right: 0.5em;
}

/*********************************************
/*  Text-Farbe des Menü-1 
/*********************************************/
#navbar1 a:link, #navbar1 a:after, #navbar1 a:hover {
    color: #fff;
}

.container-topbar li {
    color: #fff;
}

/***** Header-Menü ---- Schrift größer, Rahmenhöhe weniger ****************/
.metismenu.mod-menu .metismenu-item {
 /* padding: 0.5em 1em;
  font-size: 1.2rem;
  line-height: 1.3; */
  padding: 0.5em 0.6em;
  font: normal normal normal 16px/20px Inter;
  letter-spacing: 0px;
  color: #ffffff;
}

/*********************************************
/*  Intensität der Unterlinie 
/*********************************************/
.container-header .metismenu > li > a::after, .container-header .metismenu > li > button::before {
    opacity: .5;
    background-color: red;
}

/*********************************************
/*  "Zurück" Button
/*********************************************/
/*  "Zurück" Button fixieren */
.btn_zurueckhist {
    position: fixed;
    top: 6.3em;
}

/*  "Zurück" Button Abstand */
.container-component > :first-child {
    margin-bottom: 1em;
}


/***** Untermenü-Hintergrund *****/
.metismenu.mod-menu .parent > ul {
  background-color: #005A99;
}

/*************************
/* Banner - Tennis
/*************************/
.mein-banner {
   height: 25%vh;
   min-width: 100%;
   color: #000;
} 

/*********************************************
/* Allgemein / Artikelhintergrund - Farbe, Größe
/*********************************************/
.com-content-article.item-page {
    background-color: #fff;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.4em;
}

/*************************
/* Hauptbeiträge anzeigen
/*************************/
/*  .blog-featured {}
/*  .blog-items.items-leading { background-color: #0000f3 ;}
 ********/
 
/****************************************
/* Trennlinie zwischen den Blog-Beiträgen
/****************************************/
.com-content-category-blog__item.blog-item {
    border-bottom: 1px solid #C9C9C9;
  /*display: flex;
  flex-wrap: wrap;
  width: 100%;  
  padding: 0;
  margin-right: -0.5em;
  margin-bottom: 1em;
  margin-left: -0.5em;
  margin-bottom: 15px;*/
}

/**************************************************
/* BOXED für Blog-Karten in der Mitte -> Oben einen Rahmen mit der Klasse 'boxed' hinzufügen.
/**************************************************/
.boxed .blog-item {
  background-color: #fff ; 
  -webkit-box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--tsv-grau1);
          box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--tsv-grau1);
}

 
/*****************************************************
/* Überschrift-4 im Blog-item - grauer Hintergrund
/****************************************************/
/* .blog-item h4 {background-color: #ccc;}
*/


/**************************************************
/*   Seitenbereich rechts --- Blog-Karten mit Rand
/**************************************************/
.sidebar-right.card .mod-list li {
    border: 1px solid #dfe3e7;
}


/**************************************************
/*   Menü oben
/**************************************************/
.metismenu.menu-horizontal {
  float: clear;
  padding-top: 23px;
  padding-left: 20px;
  padding-right: 20px;
}

/********************************************************
/* Verknüpfungen/Links (a href="URL") im Beitrag  - blau+fett *
/********************************************************/
.com-content-article__body a {
  text-decoration: none;
  color: #005A99;
}


.kontaktdaten {
    float: left;
    padding: 20px;
    width: 33,33%
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*************************************************************************
/*   Reihenfolge der Template-Bereiche: sidebar-links, mitte, sidebar-rechts
/*************************************************************************/
@supports (display: grid) {
  .site-grid {
    display: grid;
/*    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."; */
    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l side-l side-l side-l ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."; 
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 1em;
  }
.site-grid > [class^=container-],
.site-grid > [class*=" container-"] {
    width: 100%;
    max-width: none;
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
  }
  .site-grid > .full-width {
    grid-column: full-start/full-end;
  }
  @media (min-width: 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
  }
}
/**************************************************
/*   Fußzeile
/**************************************************/
.mod-footer {
	margin: 0 auto;
}

.footer a:link, .footer a:after, .footer a:hover {
    color: #fff;
}

/**************************************************
/*   Button Back-to-top  fix positionieren
/**************************************************/
#back-top { position: fixed; }


/***** Hamburger-Menü vor dem Logo - nur für Handies */
/* @media (max-width: 992px) {
   nav.navbar {order: -1;}
*/
}

/*********************************************
/*   Startseite - TSV Vorstellung
/*********************************************/
.tsv_willkommen {
    max-width: 85%; /*67%; 85%;*/
    min-width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.5em;
}

.tsv_willkommen h1 {
    font: normal normal 300 42px/51px Inter;
    margin-top: .6em;
    margin-bottom: .5em;
    text-align: center;
    letter-spacing: 0px;
    color: #005A99;
    opacity: 1;
}

@media screen and (max-width: 400px) {
  .tsv_willkommen h1 {
  text-align: center;
  font: normal normal 300 29px/36px Inter;
  letter-spacing: 0px;
  color: #005A99;
  opacity: 1;
  }
}

.tsv_willkommen p {
    font: normal normal normal 16px/24px Inter;
    text-align: center;
    letter-spacing: 0px;
    color: #484848;
    opacity: 1;
}

/*********************************************
/*   Abteilungen - Kacheln / Gallerie
/*********************************************/
/*.abteilungen_tsv{
    width: 100%;
    min-width: 40%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2em;
} */

.abteilungen_ueberschrift {
    text-align: Center;
    padding-top: 0.5em;
}

p.abteilungen_texte {
    margin: 0px;	
	padding-top: .6em;
   text-align: center;
   font: normal normal 900 18px/21px Inter;
   color: #005A99;
}

.abteilungen_rahmen {  /*, .google-map */
    display: flex;
    flex-wrap : wrap;
    justify-content : center;
}

.abteilungen_daten {
 /*   padding: 10px; 
	border: 1px solid #ccc; */
    box-shadow: 0px 0px 10px #0000004D; 
	margin: 15px;
	width: 176px;
    height: 176px;
}

.abteilungen_daten img {
    width: 176px;
    height: 120px;
}

/******************************************************************
/*  NEWSFLASH  --- verwendet für "Startseite, Aktuelles" und "Info"
/******************************************************************/

/*  Info-Newsflash in Home rechts und in weiteren Seiten Sidebar rechts: --  Item-Rahmen blau */
.newsflash-sidebar .mod-articlesnews__item, .sidebar-right .mod-articlesnews__item {
    border: 1px solid #005A99;
	margin-bottom: 10px;
}

/*  Nwesflash - Abstand zum Hauptmenü */
.sidebar-right.no-card.newsflash-sidebar.boxed {
    margin-top: 9em;
}

/*  Newsflash - Linie zwischen Beiträgen */
.mod-articlesnews__item {
    border-bottom: 1px solid #C9C9C9;
}

/*  Newsflash - Home und Aktuelles */
.mod-articlesnews__item { 
    background-color: #fff;
    height:100%;
    padding: 10px; 
	margin-bottom: 10px;
}

.mod-articlesnews__item figure {
    margin: 0px;
}

.mod-articlesnews__item img {
    float: left;
    width: 200px;
    height: auto;
    margin-right: .5em;
}

.mod-articlesnews__item .btn {
    border: none;
    padding: 0px;
}

.com-content-article__body .mod-articlesnews__item p, 
.com-content-article__body .mod-articlesnews__item h1, 
.com-content-article__body .mod-articlesnews__item h2, 
.com-content-article__body .mod-articlesnews__item h3, 
.com-content-article__body .mod-articlesnews__item h4, 
.com-content-article__body .mod-articlesnews__item h5, 
.com-content-article__body .mod-articlesnews__item h6, 
.com-content-article__body .mod-articlesnews__item ul, 
.com-content-article__body .mod-articlesnews__item li 
{
    float: right;
    width: 70%;
}


@media screen and (max-width: 400px) {
.com-content-article__body .mod-articlesnews__item p, 
.com-content-article__body .mod-articlesnews__item h1, 
.com-content-article__body .mod-articlesnews__item h2, 
.com-content-article__body .mod-articlesnews__item h3, 
.com-content-article__body .mod-articlesnews__item h4, 
.com-content-article__body .mod-articlesnews__item h5, 
.com-content-article__body .mod-articlesnews__item h6, 
.com-content-article__body .mod-articlesnews__item ul, 
.com-content-article__body .mod-articlesnews__item li {
    clear: both;
    width: 100%;
    margin-left: -.2em;
    padding-top:.5em;
  }
}

.com-content-article__body .mod-articlesnews__item p, 
.com-content-article__body .mod-articlesnews__item ul, 
.com-content-article__body .mod-articlesnews__item li 
{
    font: normal normal normal 16px/24px Inter;
    letter-spacing: 0px;
}

.com-content-article__body .mod-articlesnews__item a {
    font: normal normal normal 16px/24px Inter;
    letter-spacing: 0px;
    color: #005a99;
}

.com-content-article__body .mod-articlesnews__item h1, 
.com-content-article__body .mod-articlesnews__item h2, 
.com-content-article__body .mod-articlesnews__item h3, 
.com-content-article__body .mod-articlesnews__item h4, 
.com-content-article__body .mod-articlesnews__item h5, 
.com-content-article__body .mod-articlesnews__item h6  
{
    font: normal normal bold 22px/24px Inter;
    letter-spacing: 0px;
}


/*  Newsflash - STARTSEITE */
.newsflash-sidebar .mod-articlesnews__item p, 
.newsflash-sidebar .mod-articlesnews__item h1, 
.newsflash-sidebar .mod-articlesnews__item h2, 
.newsflash-sidebar .mod-articlesnews__item h3, 
.newsflash-sidebar .mod-articlesnews__item h4, 
.newsflash-sidebar .mod-articlesnews__item h5, 
.newsflash-sidebar .mod-articlesnews__item h6, 
.newsflash-sidebar .mod-articlesnews__item ul, 
.newsflash-sidebar .mod-articlesnews__item li, 
.newsflash-sidebar .mod-articlesnews__item a 
{
    clear: right;
    width: 100%;
}

@media screen and (max-width: 400px) {
.newsflash-sidebar .mod-articlesnews__item p, 
.newsflash-sidebar .mod-articlesnews__item h1, 
.newsflash-sidebar .mod-articlesnews__item h2, 
.newsflash-sidebar .mod-articlesnews__item h3, 
.newsflash-sidebar .mod-articlesnews__item h4, 
.newsflash-sidebar .mod-articlesnews__item h5, 
.newsflash-sidebar .mod-articlesnews__item h6, 
.newsflash-sidebar .mod-articlesnews__item ul, 
.newsflash-sidebar .mod-articlesnews__item li, 
.newsflash-sidebar .mod-articlesnews__item a {
    clear: right;
    width: 100%;
    /*padding-top:.5em;*/
  }
}

/*  Newsflash - Boxhöhe anpassen (Clearfix) */
.mod-articlesnews__item:after {
    content: "";
    clear: both;
    display: table;
}

/***Ende Newsflash*****************************/

/*******************************************************************
/* Tabelle (für Tennis-Ergebnisliste) - nur waagrechte Linie/Zeilen 
/*******************************************************************/
th, td {
  padding: 2px;
  text-align: left;
  border: 1px solid #ddd;
}

/*******************************************************************
/* Tabelle für Impressum 
/*******************************************************************/
.tb_impressum th, .tb_impressum tr, .tb_impressum td {
  padding: 0px;
  text-align: left;
  border: none;
}


/* Test Tennis Turniere Kacheln */
   /* Soll: box-shadow: 0px 0px 10px #0000004D; wie ??? */

/* Menüeintrag tennis-turniere -> bloglayout, Führende, class=tturniere_ueberschrift */
.tturniere_ueberschrift {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Trennlinie entfernen */
.com-content-category-blog__item.blog-item {
    border-bottom: 0;
}

/* Menüeintrag tennis-turniere -> bloglayout, Einleitung, class="boxed tturniere_spalten"  */
.com-content-category-blog__items.blog-items.boxed.tturniere_spalten.columns-4 {}
.com-content-category-blog__item.blog-item {}
.boxed .blog-item {
  /*background-color: #eee; */
  box-shadow: 0px 0px 10px #0000004D;
}


.left.item-image {
/* ... kann das weg? 
/* ....kommt vor in Blog-Kacheln: figure class="left item-image"  
*/
    text-align: center;
}