/* ======================================================================== */
/*                                                                          */
/* Grid-System WolfsNatur                         Version 12.1 - 03.04.2025 */
/*                                                                          */
/* ======================================================================== */


/* ------------------------------------------------------------------------ */
/* Grid-Master                                                              */
/* ------------------------------------------------------------------------ */

*
	{
	box-sizing:     border-box;
	hyphens:        auto;
	overflow-wrap:  break-word;
/*	outline: 1px dashed red;  /* zum Testen */
	}

html, body
	{
	margin:         0;
	padding:        0;
	background:     linear-gradient(90deg, #bbb, #eee);
	overflow-x:     hidden;
	overflow-y:     auto;
	}

[class*='Grid']
	{
	flex-grow:      1;
	flex-shrink:    0;
	vertical-align: top;
	position:       relative;
	overflow:       hidden;
	display:        flow-root; /* beendet margin collapse */
/*	min-width:      0; */
/*	border:         1px solid #666;  nur für Test */
	}


/* ------------------------------------------------------------------------ */
/* Main-Container                                                           */
/* ------------------------------------------------------------------------ */

.GridVoll
	{
	width:          100%;
	gap:            0px;
	padding:        0px;
	margin:         0px;
	}

.GridMain
	{
	width:          100%;
	max-width:      1200px;
	min-width:      0;
	display:        flex;
	flex-wrap:      wrap;
	gap:            0px;
	margin:         0 auto;
/*	display:        flow-root; /* beendet margin collapse */
	}

.GridMain > * {min-width: 0;}  /* Inhalt kann umbrechen => kein Überlaufen, kein Horizontaler Scrollbalken */

.GridFuss
	{
	width:          100%;
	padding:        15px;
	color:          #eee;
	background:     #000;

	display:        flex;
	flex-wrap:      wrap;
	gap:            0px;
	margin:         0 auto;
	}

/* ------------------------------------------------------------------------ */
/* Text-Ausrichtungen & Ränder                                              */
/* ------------------------------------------------------------------------ */

.Links     {text-align: left    !important; padding-left: 15px; padding-right: 15px;}
.Mitte     {text-align: center  !important; padding-left: 15px; padding-right: 15px;}
.Rechts    {text-align: right   !important; padding-left: 15px; padding-right: 15px;}
.Blocksatz {text-align: justify !important; padding-left: 15px; padding-right: 15px;}

.TestBox   {border: 1x solid #159; padding-left: 15px; padding-right: 15px;}


/* ------------------------------------------------------------------------ */
/* Sichtbarkeit (Mobile+Tablet oder Desktop)                                */
/* ------------------------------------------------------------------------ */
/* Tablet wird wie Mobile definiert, da Tablet im Agent als Mobile ausgewiesen wird

/* Standardmäßig sichtbar */
.only-Mobile,
.only-Tablet,
.only-Desktop    {display: block;}


/* Mobile: alles unter 800px ausblenden */
@media screen and (max-width: 800px)
	{
	.only-Desktop               {display: none !important;}
	}

/* Desktop: alles ab 800px ausblenden */
@media screen and (min-width: 801px)
	{
	.only-Mobile, .only-Tablet  {display: none !important;}
	}


/* ------------------------------------------------------------------------ */
/* Standardbreiten (Mobile-First)                                           */
/* ------------------------------------------------------------------------ */

.Grid100,
.Grid90 ,
.Grid80 ,
.Grid75 ,
.Grid70 ,
.Grid66 ,
.Grid60 ,
.Grid50 ,
.Grid40 ,
.Grid33 ,
.Grid30 ,
.Grid25 ,
.Grid20 ,
.Grid12 ,
.Grid10            {width: 100%;}

/* ------------------------------------------------------------------------ */
/* Breakpoint: Tablet / Desktop (min 800px)                                 */
/* ------------------------------------------------------------------------ */

@media screen and (min-width: 800px)
	{
	.Grid100        {width: 100%;}
	.Grid90         {width: 90%;}
	.Grid80         {width: 80%;}
	.Grid75         {width: 75%;}
	.Grid70         {width: 70%;}
	.Grid66         {width: 66.6%;}
	.Grid60         {width: 60%;}
	.Grid50         {width: 50%;}
	.Grid40         {width: 40%;}
	.Grid33         {width: 33.3%;}
	.Grid30         {width: 30%;}
	.Grid25         {width: 25%;}
	.Grid20         {width: 20%;}
	.Grid12         {width: 12.5%;}
	.Grid10         {width: 10%;}
	}