/* ======================================================================== */
/*                                                                          */
/* Style WolfsNatur                               Version 12.1 - 03.04.2025 */
/*                                                                          */
/* ======================================================================== */


/* ------------------------------------------------------------------------ */
/* Google-Fonts Online-Einbindung                                           */
/* ------------------------------------------------------------------------ */

/* Neu im Header der daieien (zB. index.php) */
/* @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');   */


/* ------------------------------------------------------------------------ */
/* Text-Formatierungen                                                      */
/* ------------------------------------------------------------------------ */
/* Komplette Unicode-Liste:   https://symbl.cc/de/unicode-table/#gurmukhi   */


*
	{
	font-family:      'Comfortaa', Verdana, Arial, sans-serif;
	font-size:        16px;
	letter-spacing:   0.5px;
	line-height:      1.8;

	box-sizing:       border-box;
	hyphens:          auto;        /* Ermöglicht automatische Silbentrennung, wenn vom Browser unterstützt  */

	word-wrap:        break-word;  /* Bricht lange Wörter, wenn nötig (veraltet, aber verbreitet)           */
	overflow-wrap:    break-word;  /* Bricht lange Wörter, wenn nötig (moderner Standard)                   */

	white-space:      normal;      /* Sorgt dafür, dass Text umbrochen werden darf (kein nowrap etc.)       */
	}

html
	{
	scroll-behavior:          smooth;  /* HTML5 => Weiches Scrollen */
	text-size-adjust:         none;    /* nötig für Mobile mit Firefox */
	-webkit-text-size-adjust: none;    /* nötig für Mobile mit für Safari/Chrome */
	}


/* Eigene Schriftgrössen für Mobile */

@media (max-width: 800px)
	{
/*	[class*='Grid'] {font-size: 13px !important;} */  /*  funktioniert so für alle Grid */
	*               {font-size: 12px !important;} 
	body            {font-size: 12px !important;}
	.Titel          {font-size: 28px !important;}
	.TitelSub       {font-size: 20px !important;}
	.Fett           {font-size: 14px !important;}
	.Mark           {font-size: 12px !important;}
	.Zitat          {font-size: 12px !important;}
	.Big            {font-size: 50px !important;}
	.BoxTitel       {font-size: 20px !important;}
	.LinkBoxTitel   {font-size: 18px !important;}
	.LinkBoxText    {font-size: 13px !important;}
	.Fuss           {font-size: 12px !important;}
	.Fuss a         {font-size: 12px !important;}
	.Fuss a:visited {font-size: 12px !important;}
	.Fuss a:hover   {font-size: 12px !important;}
	}




.Titel
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        36px;
	letter-spacing:   0px;
	line-height:      1;
	font-weight:      800;
	color:            #333;
	text-align:       center;
	margin:           0;
	padding:          0;
	hyphens:          none;  /* Verhindert jeden Wortumbruch  */
	}

.TitelSub
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        26px;
	letter-spacing:   0px;
	line-height:      1;
	font-weight:      600;
	color:            #333;
	text-align:       center;
	margin:           0;
	padding:          0;
	hyphens:          none;  /* Verhindert jeden Wortumbruch  */
	padding-top:      5px;
	padding-bottom:   20px;
	}

.TitelLine
	{
	margin:           6px 0 6px 0;
	width:            100%;
	height:           2px;
	border:           0px;
	background:       linear-gradient(to right, transparent 5%, #333, transparent 95%);
	}

.Big  /* für Counter, Preise */
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        50px;
	letter-spacing:   1px;
	line-height:      1;
	font-weight:      800;
	color:            #333;
	float:            center;
	margin:           0;
	padding:          5px 0px 20px 0px;  /*  top right bottom left;  */
	hyphens:          none;  /* Verhindert jeden Wortumbruch  */
	}

.Fett
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-weight:      800;
	font-size:        125%;
	}

.Big2
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-weight:      800;
	font-size:        20;
	}

.Links              {text-align: left    !important;} /* float: */
.Mitte              {text-align: center  !important;}
.Rechts             {text-align: right   !important;}
.Blocksatz          {text-align: justify !important;}

.Mark
	{
	color:            #000;
	font-weight:      bold;
	line-height:      1.5;
	background-color: #eef3d7;
	padding:          5px;
	border-radius:    5px;
	hyphens:          none;  /*  Verhindert jeden Wortumbruch  */
	}

.Info
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        14px;
	font-style:       bold;
	letter-spacing:   0px;
	line-height:      1;
	font-weight:      400;
	color:            #333;
	float:            center;
	}

.AdminFuss
	{
	color:            #333;
	background:       #ccc;
	font-style:       italic;
	margin:           1px;
	padding:          0px 5px 0px 5px;  /*  top right bottom left;  */
	}


/* diese Abschnitt ist nur für Scroll to Top */
a.Link,
.Link
	{
	text-decoration:  none;
	color:            #000;
	}

.Link a,
.Link a:visited
	{
	text-decoration:  none;
	color:            #000;
	padding:          1px 3px 1px 3px; /* top right bottom left; */
	margin:           0px 0px 0px 0px; /* top right bottom left; */
	border:           1px dotted #999;
	border-radius:    0px;
	display:          inline-block;
	transition:       all 0.2s ease;
	}

.Link a:hover
	{
	transform:        scale(1.05) rotate(-0.0deg);
	text-decoration:  none;
	color:            #fff;
	background:       #999;
	border:           1px solid #000;
	border-radius:    0px;
	}

/* Extra-Klasse für Font Awesome */
.Awesome-Titel
	{
	font-size:        32px;
	margin:           0 8px 0 0;  /*  top right bottom left;  */
	}

.Awesome-Menu-LinkeSeite
	{
	}

.Awesome-Link_Fuss /* Link in Fusszeile (zB. WhatsApp, Mail, Google) */
	{
	font-size:        1em;
	padding:          0 10px 0 20px;  /*  top right bottom left;  */
	margin:           2;  /*  top right bottom left;  */
	}

.Awesome-Icon /* einzelnes Icon als Link */
	{
	font-size:        1.25em;
	padding:          0;
	margin:           0;  /*  top right bottom left;  */
	}

.Awesome-links /* Link left im Text (zB. WhatsApp, Mail, Google) */
	{
	font-size:        1em;
	padding:          0 4px 0 0px;  /*  top right bottom left;  */
	margin:           2;  /*  top right bottom left;  */
	}

.Awesome-rechts /* Link left im Text (zB. WhatsApp, Mail, Google) */
	{
	font-size:        1em;
	padding:          0 0px 0 4px;  /*  top right bottom left;  */
	margin:           2;  /*  top right bottom left;  */
	}

.Awesome-LinkBox /* LinkBox im Titel */
	{
	font-size:        1em;
	padding:          0 10px 0 0;  /*  top right bottom left;  */
	}

.scrollto
	{
	}

/* ------------------------------------------------------------------------ */
/* Hintergrund-Bild und Zitat                                               */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* Hintergrund-Bild und Zitat                                               */
/* ------------------------------------------------------------------------ */

.HintergrundBild
	{
	background-repeat:        no-repeat;
	background-position:      center bottom;
	background-attachment:    fixed;
	background-size:          auto;
	clear:                    both;
	height:                   100%;
	width:                    100%;
	background-size:          cover;
	}

.HintergrundBildZitat
	{
	margin:            0px 0px 0px 0px; /* top right bottom left; */
	padding:           30px 0px 0px 50px; /* top right bottom left; */
	color:             #fff;
	font-size:         18px;
	font-weight:       bold;
	font-style:        italic;
	letter-spacing:    1px;
	line-height:       150%;
	text-shadow:       0px  5px  5px  #000,
	                   0px -5px  5px  #000,
	                  -5px  0px  5px  #000,
	                   5px  0px  5px  #000,
	                   0px  2px  1px  #333,
	                   0px -2px  1px  #333,
	                  -2px  0px  1px  #333,
	                   2px  0px  1px  #333;
	}

.Zitat /* Zitat wird direkt im Hintergrundbild ausgegeben */
	{
	color:             #fff;
	font-size:         18px;
	font-weight:       bold;
	font-style:        italic;
	letter-spacing:   1px;
	line-height:       150%;
	text-shadow:        0px  5px  5px  #000,
	                    0px -5px  5px  #000,
	                   -5px  0px  5px  #000,
	                    5px  0px  5px  #000,
	                    0px  2px  1px   #333,
	                    0px -2px  1px   #333,
	                   -2px  0px  1px   #333,
	                    2px  0px  1px   #333;
	}

/* => fixed Bilder auf Mobile ausgeschaltet, da diese nicht funktionieren 
   => wird bereits übergangen beim Einlesen der CMS-Datei (wie zB. '/')
@media (max-width: 800px)
	{
	.HintergrundBild, .Zitat
		{
		display: none !important;
		}
	}
 */

.CopyOk
	{
	user-select:text !important;  /*  Erlaubt Text zu kopieren, auch mit Kopierschutz  */
	}


.Liste
	{
	padding-left:     1em;
	text-indent:     -1em;
	margin-top:       0.25em;
	}

.Box
	{
	margin:           0;
	padding:          5px 5px 5px 15px;  /*  top right bottom left  */
	background:       linear-gradient(to right, #ccc 0%, #eee 100%);
	border:           4px solid #fff;
	border-radius:    12px;
	box-shadow:       5px 5px 10px #999;
	}

.BoxTitel
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        28px;
	letter-spacing:   0px;
	line-height:      1;
	font-weight:      800;
	color:            #333;
	text-align:       center;
	margin:           0;
	padding:          10px 0px 0px 0px;  /*  top right bottom left;  */
	hyphens:          none;  /*  Verhindert jeden Wortumbruch  */
	}

a.LinkBox
	{
	display:          block;
	max-width:        700px;
	margin:           20px auto;  /*  top right bottom left  */
	padding:          5px 5px 5px 15px;
	background:       linear-gradient(to right, #ccc 0%, #eee 100%);
	border:           4px solid #fff;
	border-radius:    12px;
	box-shadow:       5px 5px 10px #999;
	text-decoration:  none;
	color:            #333;
	transition:       all 0.2s ease;
	}

a.LinkBox:hover
	{
	transform:        translateY(-5px) scale(1.05) rotate(-1deg);
	background:       linear-gradient(to left, #ccc 0%, #eee 100%);
	box-shadow:       15px 15px 10px #999;
	}

.LinkBoxTitel
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-size:        20px;
	letter-spacing:   0px;
	line-height:      1;
	font-weight:      800;
	color:            #333;
	text-align:       left;
	margin:           0;
	padding:          10px 0px 0px 0px;  /*  top right bottom left;  */
	hyphens:          none;  /*  Verhindert jeden Wortumbruch  */
	}

.LinkBoxText
	{
	font-family:      'Baloo 2', Verdana, Arial, sans-serif;
	font-family:      'Comfortaa', Verdana, Arial, sans-serif;
	font-size:        14px;
	letter-spacing:   0px;
	line-height:      1.6;
	font-weight:      400;
	color:            #333;
	text-align:       left;
	padding:          15px 0px 5px 0px;  /*  top right bottom left;  */
	}

.Fuss
	{
	font-size:        18px;
	font-weight:      700;
	color:            #eee;
	background:       #000;
	}

.Fuss a,
.Fuss a:visited
	{
	font-size:        18px;
	font-weight:      700;
	text-decoration:  none;
	color:            #eee;
	padding:          0px; /* top right bottom left; */
	margin:           4px 2px 4px 2px; /* top right bottom left; */
	border:           1px solid #666;
	border-radius:    0px;
	display:          inline-block;
	transition:       all 0.2s ease;
	}

.Fuss a:hover
	{
	font-size:        18px;
	font-weight:      700;
	transform:        scale(1.1) rotate(-1deg);
	text-decoration:  none;
	color:            #eee;
	background:       #999;
	border:           1px solid #666;
	border-radius:    0px;
	padding:          0px; /* top right bottom left; */
	margin:           4px 2px 4px 2px; /* top right bottom left; */
	}



/* Auf- und zuklappen mit H */

details summary {list-style:none; -webkit-appearance: none; appearance:none; cursor: pointer; user-select: none;}
details summary::-webkit-details-marker, details summary::-moz-list-bullet, details summary::marker {display:none;}
summary::before {content: '\25BD'; display: inline-block;} /* '?' ▽ */
details[open] summary::before {content: '\25B3';}          /* '?' △ */

/* <details> */
/* <summary>&nbsp;</summary> */
/* Das ist dein auf und zuklappbarer Inhalt. */
/* </details> */