/*!
Theme Name: patricktheme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: patricktheme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

patricktheme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */


.everything { 
	margin-left: 10% !important;
	margin-right: 10% !important;

}

.everythingelse{
    margin-left: 10% !important;
	margin-right: 10% !important;
    margin-top: 200px !important;
    margin-bottom: 200px !important;

}
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}


/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    width: auto;
    margin: 0px;
    padding: 0 42px;
    background-repeat: no-repeat;
    background-position: center 0px;
    overflow-x: hidden;
    background-color: #fbfbfb !important;
    
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #007bff;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*------HEADER BILD OBEN-----------------------*/ 


.custom-header {
    position: relative;
    width: 100%;
    max-width: 8000px;
    margin: 0 auto;
    margin-bottom: 1%;
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    border-radius: 10px;
}

.header-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; 
    
}


.text-overlay {
    position: absolute;
    bottom: 60px; 
    width: 50%; 
    background: #004b87; 
    color: white;
    padding: 20px 25px; 
    font-size: 24px;
    font-weight: bold;
    text-align: right; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(5px); 
    
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}

.text-overlay p {
    margin: 0;
    line-height: 1.4; 
}

/* Optimierung für mobile Geräte */
@media (max-width: 767px) {
    .text-overlay {
        width: 90%; 
        bottom: 20px; 
        left: 5%; /* Zentriert das Overlay auf dem Bildschirm */
        font-size: 18px; 
        padding: 15px 20px; 
        text-align: center;
        border-radius: 10px; 
    }

    .custom-header {
        margin-top: 5px;
    }
    
    
    .header-image {
        content: url('https://patrick.ppgmbhdev.de/wp-content/themes/variant-mobil_1-1.webp');
        }
    

}

/*----------------------------------TOP 3 BLOGBEITRÄGE WP_Query---------*/
.slider {
    width: 100%;
    margin: 20px auto;
}

.slider-item {
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.slider-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.slider-content {
    flex-grow: 1;
    color: #222;
}

.slider-title {
    font-size: 22px;
    margin: 15px 0;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    line-height: 1.4;
}

.slider-text {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
}

.slider-link {
    color: #007BFF;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease, color 0.3s ease;
}

.slider-link:hover {
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
}
/* Slick Slider Navigation Buttons */
.slick-prev, .slick-next {
    width: 50px; /* Breite der Buttons */
    height: 50px; /* Höhe der Buttons */
    background-color: #007BFF; /* Hintergrundfarbe des Buttons */
    color: #090101; /* Textfarbe des Buttons */
    border-radius: 50%; /* Runde Buttons */
    border: none; /* Kein Rand */
    display: flex; /* Flexbox für zentrierten Text */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    font-size: 24px; /* Schriftgröße für die Pfeile */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    z-index: 10; /* Damit es über dem Slider liegt */
    transition: background-color 0.3s ease, color 0.3s ease; /* Übergang für Farbe */
}

/* Hover-Effekt für die Buttons */
.slick-prev:hover, .slick-next:hover {
    background-color: #0056b3; /* Dunklere Hintergrundfarbe beim Hover */
    color: #fff; /* Textfarbe beim Hover */
}

/* Position der Buttons */
.slick-prev {
    left: 10px; /* Abstand vom linken Rand */
	background-color: black;
}

.slick-next {
    right: 10px; /* Abstand vom rechten Rand */
	background-color: black;
}

/* Optional: Pfeilsymbole */
.slick-prev::before, .slick-next::before {
    font-family: 'slick';
    font-size: 30px !important; /* Größe der Pfeile */ 
	color: rgb(218, 139, 12) !important; /* Farbe der Pfeile */
}

.slick-prev::before {
    content: '←'; /* Pfeil nach links */
	color: black;
}

.slick-next::before {
    content: '→'; /* Pfeil nach rechts */
	color: black;
	
}



/*------------WETTER API------------------------- WETTER API------------------------------WETTER API------------------------------*/
#specialbody {
    background: #ff8c52 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    margin: 0;
}

#extrah2 {
    color: #fff;
    margin: 8px 0;

}


#specialbutton{
    background: #f4bfbf;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    width: 100px;
    font-size: 15px;
}
#specialbutton:hover{
	background: #b28a8a;
	color: white;

}

#weather-container {
    background: rgba(255, 255, 255, 0.3) !important;
    max-width: 400px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 100px;
    
}


button:hover {
    background: #004b87;
}

#temp-div p {
    font-size: 60px;
    margin-top: -30px;
}

#weather-info {
    font-size: 20px;
}

#weather-icon {
    width: 200px;
    height: 200px;
    margin: 0 auto 10px; 
    margin-bottom: 0;
    display: none;
}

#hourly-forecast {
    margin-top: 50px;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
}

.hourly-item {
    flex: 0 0 auto;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
    color: rgb(16, 16, 16);
}

.hourly-item img {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}

#hourly-heading {
    color: #fff;
    margin-top: 10px;
}

/*-------------------------------TABELLE FÜR PROJEKT---------------------------------------*/

.projekt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    border-radius: 10px;
}

.projekt-table th, .projekt-table td {
    border: none;
    padding: 12px 15px;
    text-align: left;
    transition: background-color 0.3s ease;
}

.projekt-table th {
    background-color: #d28e2e;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.projekt-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.projekt-table tr:nth-child(odd) {
    background-color: #ffffff;
}

.projekt-table tr:hover {
    background-color: #f1f1f1;
}

.projekt-table td {
    border-bottom: 1px solid #dddddd;
}

.projekt-table th:first-child, .projekt-table td:first-child {
    border-radius: 10px 0 0 10px;
}

.projekt-table th:last-child, .projekt-table td:last-child {
    border-radius: 0 10px 10px 0;
}

.projekt-table caption {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #333;
}

@media(max-width: 767px) {

    .projekt-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }
    
    .projekt-table th, .projekt-table td {
        border: 3px solid #ddd;
        padding: 8px;
        text-align: left;
        display: flex;
        box-sizing: border-box;
        align-items: center; 
    }
    
    .projekt-table th {
        justify-content: flex-start;
        text-align: left; 
    }
    
    .projekt-table td {
        justify-content: flex-start; 
        text-align: left; 
        vertical-align: top;
        background-color: #f4f4f4;
    }
        

}




/*-------------------------------------------------------STYLE FÜR DAS KOMMENDE WIDGET---------------------------------------------------------------------*/
   


/* Titel der Widget-Box */
.custom-widget-title {
    font-size: 1.8em;
    color: #222;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
	margin-top: 50px;
}

/* Liste der Beiträge */
.custom-widget-post-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Einzelner Beitrag in der Liste */
.custom-widget-post-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-widget-post-item:last-child {
    border-bottom: none;
}

/* Hover-Effekt für den gesamten Post */
.custom-widget-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Link-Stil für den Beitrag */
.custom-widget-post-link {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Stil für das Vorschaubild */
.custom-widget-post-thumbnail {
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.custom-widget-post-thumbnail img {
    border-radius: 10px;
    width: 70px;
    height: 70px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.custom-widget-post-thumbnail img:hover {
    transform: scale(1.1);
}

/* Beitragstitel */
.custom-widget-post-title {
    font-size: 1.8em;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Hover-Effekt für den Titel */
.custom-widget-post-title:hover {
    color: #007bff;
    text-decoration: underline;
}

/* Nachricht bei keinen Beiträgen */
.custom-widget-no-posts {
    font-style: italic;
    color: #aaa;
    text-align: center;
    margin-top: 15px;
    font-size: 1.2em;
}

@media(max-width: 767px) {

	.custom-widget-post-title {
		font-size: 1.2em;
		color: #333;
		font-weight: 500;
		transition: color 0.3s ease;
	}

	.custom-widget-title {
		font-size: 1.2em;
		color: #222;
		margin-bottom: 15px;
		display: block;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		border-bottom: 2px solid #ddd;
		padding-bottom: 10px;
	}

}
/*------------------------------------PHONE WIDGET CALL --------------------------------- PHONE WIDGET CALL------------------------*/




/* Stil für das Informationsfeld */
.info-box {
    position: fixed;
    bottom: 24.2%;
    right: 116px; /* Positionierung links neben dem Button */
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    width: 300px;
    display: none; /* Anfangs versteckt */
    z-index: 999;
}

.info-box h2 {
    font-size: 16px;
    color: #004b87;
    margin-bottom: 5px;
}

.info-box p {
    font-size: 14px;
    color: #333;
    margin: 5px 0;
}

.info-box .phone-number {
    font-size: 20px;
    color: #004b87;
    font-weight: bold;
    margin: 10px 0;
}

.info-box .small-text {
    font-size: 12px;
    color: #666;
}

.info-box hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0;
}

.floating-button{
    user-select: none; /* Verhindert das Markieren und Kopieren */
  -webkit-user-select: none; /* Für WebKit-basierte Browser (z.B. Chrome, Safari) */
  -moz-user-select: none; /* Für Firefox */
  -ms-user-select: none; /* Für ältere Versionen von Internet Explorer/Edge */
}



#phoneButton{
    position: fixed;
    bottom: 50%;
    right: 5px;
    background-color:#004b87;
    color: white;
    padding: 15px 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    display: grid;
    width: 110px;
    height: 110px;
	z-index: 9999;


}


#phoneButton span {
    font-size: 40px;



}
#phoneButton p {
    margin-top: 0px;



}


#phoneButton.active {
background-color: white;
color: #004b87;
border: 2px solid white;
}

@media (max-width: 600px) {
.info-box  {
bottom: 23%; /* Beispiel für eine angepasste Höhe auf mobilen Geräten */
display: none;
visibility: hidden;


}
.floating-button{
    display: none;
    visibility: hidden;
}


}


     
/*-------------------------------CARD-------------------- CARD--------------------------------*/
.card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    width: 320px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 20px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #e7e7e7;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    transition: transform 0.3s ease;
	
}

.card h2 {
    font-weight: bold;
    margin: 15px 0 10px;
    font-size: 1.25rem;
    color: #222222;
}

.card p {
    margin: 8px 0;
    color: #1a1a1a;
    line-height: 1.6;
    font-size: 1rem;
}

.card a {
    color: #01438a;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.card a:hover {
    text-decoration: underline;
    color: #043e7c;
}

.card .icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    gap: 10px;
}

.card .icon-text img {
    margin-right: 0;
    width: 20px;
    height: 20px;
}



/*--- BUTOOONNSSSSS---------- BUTOOONNSSSSS---------- BUTOOONNSSSSS---------- BUTOOONNSSSSS---------- BUTOOONNSSSSS---------- BUTOOONNSSSSS-------*/
.container {
    display: flex;
    margin: 0 auto;
    margin-left: 100px;
    margin-right: 100px;
	justify-content: center;
}

.tile {
    width: 500px;
    height: 100px;
    background-color: lightgray;
    margin: 10px;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 75, 135, 0.6); ;
    
    
}


.tile.active {
    background-color: #004b87;
}

.tile img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Media Query für Bildschirme kleiner als 800px (z.B. Tablets) */
@media (max-width: 600px) {
    .container {
    display: flex;
    flex-direction: column; /* Kacheln übereinander stapeln */
    align-items: center; /* Zentriert die Kacheln horizontal */
    margin: 0 auto;
    padding: 0 20px; /* Innenabstand für kleine Bildschirme */
}

    .tile {
        height: 100px; /* Größere Höhe für größere Bildschirme */
    }

    .tile img {
        width: 50px; /* Größere Bildgröße */
        height: 50px;
    }
}

@media (max-width: 1024px) {
    
    .container {
    display: flex;
    flex-direction: column; /* Kacheln übereinander stapeln */
    align-items: center; /* Zentriert die Kacheln horizontal */
    margin: 0 auto;
    padding: 0 20px; /* Innenabstand für kleine Bildschirme */
}


    
    .tile {
        width: 300px; /* Drei Kacheln nebeneinander auf noch größeren Bildschirmen */
    }
}

/* -----------------------------------------Karusel Widget neues Blog beiträge--------------------------------------------------------------------- */
/* Carousel Container */
#customCarousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Inner Wrapper */
.karousel-inner {
    display: flex;
    transition: transform 0.6s ease;
}

/* Individual Items */
.karousel-item {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    display: none;
    text-align: center;
    padding: 20px; /* Abstand hinzufügen */
}

/* Active Slide */
.karousel-item.active {
    display: block;
}

/* Image Styling */
.karousel-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px; /* Abstand zwischen Bild und Text */
}

/* Caption Styles */
.karousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: static; /* Macht das Positionieren einfacher */
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 10px;
    font-size: 1.2rem;
}

/* Control Buttons */
.karousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev-slide {
    left: 10px;
}

.next-slide {
    right: 10px;
}

/* Indicators */
.karousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 5px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.indicator.active {
    background-color: #fff;
}


.btn {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3; /* Hover-Farbe */
}

.btn-primary {
    background-color: #004b87; /* Alternative Farbe */
}

.btn-primary:hover {
    background-color: #032c4e; /* Hover-Farbe */
}


a.btn.btn-primary{
    color: white;

}

a.btn.btn-primary :visited{
    color: white;

}


@media (max-width: 768px) {

.carousel-item img {
      max-width: 50%;
      height: auto;
      margin-bottom: 15px; /* Abstand zwischen Bild und Text */
 }





/* Caption Styles */
.karousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: static; /* Macht das Positionieren einfacher */
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 10px;
    font-size: 0.6rem;
}


.karousel-caption p, h2, a{
    font-size: 12px;
    color: #090101;
}







}









/* Funfact BUTTON-------------------------------Funfact BUTTON-------------------------------*/

.fun-fact-body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 10px;
    margin-bottom: 35px;
    margin-top: 35px;
    
}

.fun-fact-title {
    color: #000000; 
    margin-top: 0px;
    font-size: 2rem;
    margin-bottom: 0px;
}

.fun-fact-content {
    font-size: 1.4em;
    margin: 10px auto;
    padding: 15px;
    max-width: 600px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fun-fact-button {
    font-size: 1.3em;
    padding: 15px 25px;
    background-color: #004b87; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-bottom: 10px;
    margin-top: 10px;
}

.fun-fact-button:hover {
    background-color: #0b3b61; /* Dunklerer Blauton bei Hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* custom curser-------------------custom curser-------------------custom curser------ ------------*/



/*body {
    cursor: url(''), auto;
}

a, button {
    cursor: url(''), auto;
}


 */

/* DARK MODE TOGGLE BUTTON------------------DARK MODE TOGGLE BUTTON------------------*/
/* Body Hintergrund und Textfarbe im Light-Mode */
body.light-mode {
	background-color: white !important;
	color: #343434 !important;
}

/* Body Hintergrund und Textfarbe im Dark-Mode */
body.dark-mode {
	background-color: #343434 !important ;
	color: white !important;
}

/* Button-Stile im Light-Mode */
#dark-mode-toggle {
	padding: 30px ;
	border: none ;
	cursor: pointer ;
	color: black ;
	font-size: 16px ;
	justify-content: center;
	z-index: 999;
	position: fixed;
	bottom: 50%;
	left: 5px;
	display: block;
	background: #ebebeb;
	border-radius: 200px;
	box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);

}



@media (max-width: 768px) {

	#dark-mode-toggle {
		display: none;
		visibility: hidden;
	}


}
/* Button-Stile im Dark-Mode */
body.dark-mode button {
	background-color: #333 !important;
	color: white !important;
}

body.dark-mode button:hover {
	background-color: #004b87 !important;
	color: white !important;
}

/* Kachel-Stile im Dark-Mode */

body.dark-mode .clickable-div {
	color: lightgray !important;
}

body.dark-mode .custom-widget-title, body.dark-mode .custom-widget-post-title {
	color: white;
}

body.dark-mode .card h3{
	color: #1a1a1a !important;
}

body.dark-mode .lorem-item h3 {
	color: white !important;
}


body.dark-mode h3.fun-fact-title{
	color:white !important;

}





/* LOREM ITEMS STANDART AUF DER SEITE---------------------------*/
.lorem-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 20px;
}

.mainLorem-header h1 {
    color: #004b87;
    font-size: 2.5em;
}

.lorem-item h2 {
    color: #004b87;
    font-size: 1.5em;
}

.lorem-item h3 {
    color: black;
    font-size: 1em;

}
.lorem-item {
    width: 30%;
    margin-bottom: 20px;
    text-align: left;
}



/*----------------------------------------------------- PARTNER DING PROPERFORMA---------------------------*/
.partner-section {
	background-color: rgba(0, 0, 0, 0.87);
	padding: 100px 0;
	text-align: center;
}

.partner-heading {
	font-size: 48px;
	color: #ffffff;
	margin-bottom: 50px;
	text-transform: none;
}

.partner-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.partner-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.partner-logo img {
	width: 100%;
	max-width: 550px;
	height: auto;
	margin-bottom: 30px;
}

.testimonial-section {
	flex-basis: 100%;
	margin-top: 50px;
}

.testimonials-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.testimonial-item {
	background-color: white;
	color: black;
	padding: 20px;
	max-width: 600px;
	border-radius: 10px;
	position: relative;
}

.testimonial-text p {
	font-size: 16px;
	line-height: 1.5;
}

.testimonial-author {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.author-image {
	width: 50px;
	height: 50px;
	background-size: cover;
	border-radius: 50%;
	margin-right: 15px;
}

.author-name {
	font-weight: bold;
}

.author-title {
	font-style: italic;
	font-size: 14px;
	color: gray;
}

@media (max-width: 768px) {
	.partner-content {
		flex-direction: column;
	}

	.partner-logo {
		text-align: center;
	}

	.testimonials-slider {
		max-width: 100%;
		padding: 0 10px;
	}
}


/*-----------------TIGER TEMPLATE STYLES--------------------------*/
body.page-template-Tiger-php {
	background-color: #fff8e1 !important; ;
	background-image: url('https://patrick.ppgmbhdev.de/wp-content/themes/TIGERWEBPminify.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;


}


.tigerbody{
	margin: 0;
	min-height: 100vh !important;
	display: flex;
	justify-content: flex-start;
	align-items: center;


}

/* TIGER PICTURE HOVER-----------------------TIGER PICTURE HOVER-----------------------TIGER PICTURE HOVER-----------------------*/


.tigerpicture, .tigerbody :hover{

	cursor: url('data:image/x-icon;base64,AAACAAEAICAAAAAAAACoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCxMaWmqHCxcgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADR1Nb29vfh4eH29vbi4+Ty8vIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHx8f////////9/f3w8PD////q6ury8vIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////19fX///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACdnZ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////f39/u7u7////x8fH////q6ur///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////v7++anqH///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////W1tbf39/Y2NjY2NjW1tbz8/P///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADy8vLp6en////////W1tYAAAD////u7/DOzs6HhIv09PTOz9AVFRXr6+vExskAAABSUv+c2NVJO6JKPKpRVu0aGhvt7e0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADLz9L7+/v///////9EQkgAAAD///8AAABycnX////////l5eX8/Pz+/v7a2toAAABSUv9PQt1UcJVKKa1SRu6MyNyt//////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADY3N35+fn///8DAwMAAAAAAAAAAAAAAAD///8XFxj///8AAADLz9L///9HRk1SSOVSTvZSe/9Se/9Se/9DWd4AAAA/P0P///+AgIcAAAAAAAAAAAAAAAAAAAAAAAAAAAC6vr/////7+/smJigAAAAAAAAAAAD39/f///8KDAwAAACFhYr///////8AAABSUv9Se/9Se/9Se/9Se/9HSsQAAADk5OWxtLkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADKysz///////8AAAAAAABKTVJmZm3///////////8AAAD///////////8CAghIVNhSe/9Se/8lKsKo+vpSaPUAAADj4+PIyMi41NMAAAAAAAAAAAAAAAAAAAAAAAAAAADJysv4+Pj////Y3N00OD3///////////////////8AAAD////39/eqrbIAAABNLLtILrlOMMZSMdJhdY+V5ex+sbmtvMOgt7yt//+9xcgAAAAAAAAAAAAAAAAAAAAAAAD////////////w8PAAAAD////////j5ecAAAARExYAAABiZGesra6vtbYAAABQL8lSRZJbXGaHiIrS0tT6+vr19fX////////w8PDQ0dLS1dcAAAAAAAAAAAAAAAAAAAC+v8LW1tb///9nZ2fo6en///8AAAAAAADJyMzm5uYbHyLf4eS5urosLC6MiJC3ucCOlJlSXWD////y8/Pm5uaWl5jb29v///////9Va6L////Q0dMAAAAAAAAAAAAAAAD///////////9cW1z////x8fEAAABxeHvp6uv29vcAAAAAAAD///+jo6QEBQVzcXd9f4Wjo6PR0dIdHR7///////////////////8LDAxoeLf////y8/TU1NsAAAAAAACioKf///////9nZ2fw8PCVmJsAAAD////////f4ePa3d8AAABEQkiLi4s/QUXAwMFYYGPg4OX////////W1tbc3Nz///8cHB2trf+trf9/gr2RqMWan6De4OPe4OMAAAD///////////9FRUcuLjHx8vMAAAD19fX///8AAACmqKsAAAD////////U0tWam6BXYG/R1NacnKJnanCt4v9Yrv////+t5P9Yrv8Ie+oAe9wAVcUzRGerq7GDhowAAAC8v8T///////8AAAA/QEL///8AAAAAAAD///////8AAAAAAAAAAAAAAAAEBQUWFhZRUVQFeOBeeKxUg8Uoff8Ae9YAe9Yjff8Ae9YAe9YAe9YAXseFgovO0dPV19kAAAA1frmf1P3u7u4AAACCg4T///8AAAACAgL///////8AAAD///+ey/Z7hZgqUXcUKz0GDxA/QEgPe9AAe9YAe9YAe9YAKIAAe9YAe9YAe9YAccsLQaGnqaujoKYAAAAAAAAFbLYAe9YVhvEAAAA+PEHm//8AAAAAAACTyeOrq6sZGRn///9Xj+AAdsYAY64Ae9YAc70AUo0AdsYAIoIALo0APaEAPZYAe9YAe9YAe9YXbawAAAAAAAAAAAAAAAAAAAAgdcMAe9YAe9YAe9YAAAAIe+QAAAAAAAAAe9YNab0fIyT9//8Ge98AAAAbPVoATH8aHB8YYJgAAAAANacAL50ALpkAe9QAe9YAe9YAb8AbGxwAAADt7fAAAAAAAAAAAABwiqAAe9YAe9YAX6gABQkAe9YADhUAAAAAe9YAe9YAAAAAeNNRpPoAAAAAe9b///8CpacEl5f///8Ae9YAe9YAe9YAe9YAe9ZZeZ0BECLi4uIAAAAAAAAAAAAAAAAAAAAAAAAAe9YAe9YBaLQAGS0Ae9YAe9YAAAAAZq8Ae9YAAAAAe9YAAAAAAAAHBwfe3uJeZ2v///+Dg4MAe9YAe9YAe9YAe9YBIz8AkWQCfdYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAetEAe9YDGy4AAgQAe9YAZrIAAAACSoAAAAAAe9YAe9YAAAAAe9b///8VFxlCREaVmp////8FgdYAe9YAe9QAM1gCSoCqrLEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAe9YCIDwAAAAAe9YAe9YANFoAAAAAe9YAAAAAAAAAAAAAAACQt8je3uEqKywAAAD///8AAwYAe9YAAQIAe9Y+Pj48PEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAe9YABAgAAQIAe9YAe9YFMFUAAAAAXJoAAAAAdMUEXaEGfNr7+/sAAAASERL///8Ae9YAKksEQHEAe9amxtRab4kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAgEDhkGLlAAc8gAAAAAe9YAe9YBZ6oBb8EVL1UyVrgAe9YAedAAd8wAe9YFT4oAe9YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDRkAe9YAAAAAAAAAAgQAAAABb8IAe9YAAAAAAAAAAAAAAAAAAAAANFwEDhkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASERIAAAAAAAAFR3cAAAIAe9YAAAAAAAAEEyMAAAAAAAAAAAAAAAAAX6gANVwAAwYFKUgHZ68AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQEAAAAAAAAAAAAOHjoAAAAAAAAOLVUCT4wAAAAAAAAAAAAAe9YBTogGHjQAds2frbgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAc8MAAAADVpQAAAAABAgAcscAAAAAAAAAAAAAb70ADhkAAAAACBEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7OzsAGi8AAAAAAAAAAAAiIyYAAAAAAAAAAACeo6YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//8f///8D///+Af///gH/3/4B/8P8Af+CAAD/AAAA/wAAAH8AAAD/AAAAfwAAAD8AAAAfAAAADwAAAAMAAAABAAAAAQAAAAEAAAADAAAAHwAAABcAAAAfgAAAP4AAAH/AAAB/4AAAf/AAAP/4AAH/+AAB//gAA//+AA///wA//w=='), auto !important;


}


.ramen-info {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	font-size: 1.2em;
	margin: 50px 10% 50px 1%;
	width: 600px;
	padding: 10px;
}
.ramen-info h2 {
	margin-top: 0;
	color: white; /* Ein tigerähnlicher Orangeton */
}
.ramen-info p {
	margin: 10px 0;
	color: white;
}

@media(max-width: 767px) {
	.ramen-info p {
		margin: 10px 0;
		font-size: 12px;

	}





}



/*-----------------------TIC TAC TOE TTT TEMPLATE STYLES----------------------*/
.TTTBody{
	font-family: Arial, sans-serif;
	background-color: #14BDAC;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;

}
.TTTcontainer {
	text-align: center;
	margin-top: 20px;

}

.TTTcontainer h1 {
	background: #1f1f1f;
	font-size: 34px;
	font-weight: 700;
	color: white;
	padding: 10px 100px 10px 100px;

	border-radius: 20px;
}


#cellContainer {
	display: grid;
	grid-template-columns: repeat(3, auto);
	width: 225px;
	margin: auto;
	justify-content: center;
	user-select: none;
}
.cell {
	width: 145px;
	height: 145px;
	border: 1px solid;
	box-shadow: 0 0 0 2px;
	font-size: 140px;
	cursor: pointer;
	line-height: 145px;
}
#restartBtn {
	font-size: 1.3em;
	padding: 15px 25px;
	background-color: #1f1f1f;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
	transition: background-color .3s, box-shadow .3s;
	margin-bottom: 10px;
	margin-top: 10px;
}

#restartBtn:hover {
	background-color: #0b3b61;

}

#statusText {
font-size: 1.5rem;


}

/*-------------------------------------- SLIDER TIERE --------------------- SLIDER TIERE------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.BodySlider{
	margin: 0;
	background-color: #000;
	color: #eee;
	font-family: Poppins;
	font-size: 12px;
	min-height: 100vh !important;
}

/* carousel */
.carousel{
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
}
.carousel .list .item{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0 0 0 0;
}
.carousel .list .item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.carousel .list .item .content{
	position: absolute;
	top: 20%;
	width: 1140px;
	max-width: 80%;
	left: 50%;
	transform: translateX(-50%);
	padding-right: 30%;
	box-sizing: border-box;
	color: #fff;
	text-shadow: 0 5px 10px #0004;
}
.carousel .list .item .author{
	font-weight: bold;
	letter-spacing: 10px;
}
.carousel .list .item .title,
.carousel .list .item .topic{
	font-size: 5em;
	font-weight: bold;
	line-height: 1.3em;
}
.carousel .list .item .topic{
	color: #f1683a;
}
.carousel .list .item .buttons{
	display: grid;
	grid-template-columns: repeat(2, 130px);
	grid-template-rows: 40px;
	gap: 5px;
	margin-top: 20px;
}
.carousel .list .item .buttons button{
	border: none;
	background-color: #eee;
	letter-spacing: 3px;
	font-family: Poppins;
	font-weight: 500;
	padding: 0 !important;
	cursor: pointer;
}
.carousel .list .item .buttons button:nth-child(2){
	background-color: transparent;
	border: 1px solid #fff;
	color: #eee;
}
/* thumbail */
.thumbnail{
	position: absolute;
	bottom: 50px;
	left: 50%;
	width: max-content;
	z-index: 100;
	display: flex;
	gap: 20px;
}
.thumbnail .item{
	width: 150px;
	height: 220px;
	flex-shrink: 0;
	position: relative;
}
.thumbnail .item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}
.thumbnail .item .content{
	color: #fff;
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
}
.thumbnail .item .content .title{
	font-weight: 500;
}
.thumbnail .item .content .description{
	font-weight: 300;
}
/* arrows */
.arrows{
	position: absolute;
	top: 80%;
	right: 43%;
	z-index: 100;
	width: 300px;
	max-width: 30%;
	display: flex;
	gap: 10px;
	align-items: center;
}
.arrows button{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #fff;
	border: none;
	color: #000;
	font-family: monospace;
	font-weight: bold;
	transition: .5s;
	padding: 0 !important;

}
.arrows button:hover{
	background-color: #000;
	color: white;
	cursor: pointer;
}

/* animation */
.carousel .list .item:nth-child(1){
	z-index: 1;
}

/* animation text in first item */

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons
{
	transform: translateY(50px);
	filter: blur(20px);
	opacity: 0;
	animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
	to{
		transform: translateY(0px);
		filter: blur(0px);
		opacity: 1;
	}
}
.carousel .list .item:nth-child(1) .content .title{
	animation-delay: 1.2s!important;
}
.carousel .list .item:nth-child(1) .content .topic{
	animation-delay: 1.4s!important;
}
.carousel .list .item:nth-child(1) .content .des{
	animation-delay: 1.6s!important;
	width: 518px
}
.carousel .list .item:nth-child(1) .content .buttons{
	animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img{
	width: 150px;
	height: 220px;
	position: absolute;
	bottom: 50px;
	left: 50%;
	border-radius: 30px;
	animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
	to{
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

.carousel.next .thumbnail .item:nth-last-child(1){
	overflow: hidden;
	animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item img{
	z-index: 100;
}
@keyframes showThumbnail{
	from{
		width: 0;
		opacity: 0;
	}
}
.carousel.next .thumbnail{
	animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
	from{
		transform: translateX(150px);
	}
}

/* running time */

.carousel .time{
	position: absolute;
	z-index: 1000;
	width: 0%;
	height: 3px;
	background-color: #f1683a;
	left: 0;
	top: 0;
}

.carousel.next .time,
.carousel.prev .time{
	animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
	from{ width: 100%}
	to{width: 0}
}


/* prev click */

.carousel.prev .list .item:nth-child(2){
	z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img{
	animation: outFrame 0.5s linear 1 forwards;
	position: absolute;
	bottom: 0;
	left: 0;
}
@keyframes outFrame{
	to{
		width: 150px;
		height: 220px;
		bottom: 50px;
		left: 50%;
		border-radius: 20px;
	}
}

.carousel.prev .thumbnail .item:nth-child(1){
	overflow: hidden;
	opacity: 0;
	animation: showThumbnail .5s linear 1 forwards;
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
	pointer-events: none;
}
.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons
{
	animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
	to{
		transform: translateY(-150px);
		filter: blur(20px);
		opacity: 0;
	}
}
@media screen and (max-width: 678px) {
	.carousel .list .item .content{
		padding-right: 0;
	}
	.carousel .list .item .content .title{
		font-size: 30px;
	}
}


#bär {
	color:	#73401c;
}

#wolf {
	color: grey;
}

#hai {
	color: gray;

}

.des {
	font-size: 1rem;


}




/*------BÄR TEMPLATE-----------------------------BAER TEMPLATE--------------*/

body.page-template-baer-php {
	background-color: #fff8e1 !important; ;
	background-image: url('https://patrick.ppgmbhdev.de/wp-content/themes/BEARwebp.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;


}


.baerbody{
	margin: 0;
	min-height: 100vh !important;
	display: flex;
	justify-content: flex-start;
	align-items: center;


}


.baer-ramen-info {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	font-size: 1.2em;
	margin: 50px 10% 50px 1%;
	width: 600px;
	padding: 10px;
}
.baer-ramen-info h2 {
	margin-top: 0;
	color: white; /* Ein tigerähnlicher Orangeton */
}
.baer-ramen-info p {
	margin: 10px 0;
	color: white;
}

@media(max-width: 767px) {
	.baer-ramen-info p {
		margin: 10px 0;
		font-size: 12px;

	}


}


/* --------------------WOLF TEMPLATE--------------------WOLF TEMPLATE--------------------WOLF TEMPLATE*/

body.page-template-wolf-php {
	background-color: #fff8e1 !important; ;
	background-image: url('https://patrick.ppgmbhdev.de/wp-content/themes/wolfwebp.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;


}


.wolfbody{
	margin: 0;
	min-height: 100vh !important;
	display: flex;
	justify-content: flex-start;
	align-items: center;


}


.wolf-ramen-info {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	font-size: 1.2em;
	margin: 50px 10% 50px 1%;
	width: 600px;
	padding: 10px;
}
.wolf-ramen-info h2 {
	margin-top: 0;
	color: white; /* Ein tigerähnlicher Orangeton */
}
.wolf-ramen-info p {
	margin: 10px 0;
	color: white;
}

@media(max-width: 767px) {
	.wolf-ramen-info p {
		margin: 10px 0;
		font-size: 12px;

	}


}


/* --------------------hai TEMPLATE --------------------hai TEMPLATE --------------------hai TEMPLATE ---*/
body.page-template-hai-php {
	background-color: gray !important; ;
	background-image: url('https://i.pinimg.com/originals/bf/7a/38/bf7a38f4b6b774bc184fb471476510a9.jpg');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;


}

.haibody{
	margin: 0;
	min-height: 100vh !important;
	justify-content: flex-start;
	align-items: center;

}


.hai-ramen-info {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	font-size: 1.2em;
	margin: 5% 15% 50px 1%;
	width: 600px;
	padding: 10px;
}
.hai-ramen-info h1 {
	margin-top: 0;
	color: white; /* Ein tigerähnlicher Orangeton */
}
.hai-ramen-info p {
	margin: 10px 0;
	color: white;
}

@media(max-width: 767px) {
	.hai-ramen-info p {
		margin: 10px 0;
		font-size: 12px;

	}


}



.shallow {
	position: relative;

}


.shallowtxt {
	position: absolute;
	z-index: 998;
	top: 15%;
	left: 5%;
	padding: 20px 25px;


	color: #fff;

	width: 25%;
	text-align: left;
	border-radius: 10px;
	font-size: 2rem;
}



.deep {
	position: relative;

}


.deeptxt {
	position: absolute;
	z-index: 998;
	padding: 20px 25px;


	color: #fff;

	width: 25%;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);



	border-radius: 10px;
	font-size: 2rem;
}







@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}



/* ----------------- NAVIGATION------------------ NAV BAR------------- NAV MENU----------------*/



/* ----------------NEUE STARTSEITE----------------NEUE STARTSEITE----------------NEUE STARTSEITE----------------NEUE STARTSEITE-------------*/
body.page-template-Neue-Startseite-php {
	font-family: Verdana, serif;
	background-color: white !important;
	box-sizing: border-box;
}

body.page-template-Neue-Startseite-php ::selection {
	background-color: darkred !important; /* Hintergrundfarbe beim Markieren */
	color: white !important;               /* Textfarbe beim Markieren */
}


nav.page-template-Neue-Startseite-php {

}

.hero {
	position: relative;
	padding-bottom: 10px;
	background-color: black;
}


.herotxt{
	position: absolute;
	z-index: 998;
	padding: 20px 25px;


	color: #fff;

	width: 35%;
	text-align: left;
	bottom: 30%;
	left: 5%;

}

.herotxt h1{
	font-style: italic;
	font-size: 4.5rem;

}

.herotxt p{
font-size:1rem;

}



.kontaktbtn {
	display: inline-block;
	padding: 20px 40px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s ease, transform 0.3s ease;
	border-style: solid;
	border-width: 1px;
	position: relative;
	overflow: hidden;
}

.kontaktbtn::after {
	content: '↓'; /* Pfeil nach unten */
	position: absolute;
	right: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
	font-size: 2rem;
	top: 10px;
}

.kontaktbtn:hover {
	background-color: #ffffff; /* Hover-Farbe */
	color: black;
}

.kontaktbtn span {
	display: inline-block;
	transition: transform 0.3s ease; /* Bewegung nur für den Text */
	font-size: 1.3rem;
	font-weight: 700;
}

.kontaktbtn:hover span {
	transform: translateX(-10px); /* Nur den Text nach links verschieben */
}


.kontaktbtn:hover::after {
	opacity: 1;
}

a.kontaktbtn{
	color: white;

}

a.kontaktbtn :visited{
	color: white;

}

@media (max-width: 1790px) {
	.herotxt {
		width: 50%; /* Breitere Textbox für Laptops */
		bottom: 30%; /* Positionierung leicht anpassen */
		padding: 15px 20px; /* Weniger Padding auf kleineren Bildschirmen */
	}

	.herotxt h1 {
		font-size: 3.5rem; /* Kleinere Schriftgröße für Laptop-Screens */
	}

	.herotxt p {
		font-size: 0.9rem; /* Kleinere Schriftgröße für den Absatztext */
	}
	


}
@media (max-width: 1500px) {
	.herotxt{
		display: none;


	}

	.kontaktbtn{
		display: none;


	}



}

@media (max-width: 767px) {
	.heroimg {
		content: url();
	}
}

.alles {

	min-height: 100vh;

}

.in1{
	background-color: white;
	color: black;
	height: max-content;

}

.content1txt{
	margin: 0 20% 0 20%;
	padding: 80px 0 0 0;
	text-align: center;


}

.content1txt p{
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1.5em;

}
@media (max-width: 767px) {
	.content1txt p {
		font-size:14px;
	}
}




.stylish-line {
	width: 80%; /* Setze die Breite, um die Linie zu zentrieren */
	height: 2px; /* Höhe der Linie */
	background-color: #ccc; /* Farbe der Linie */
	margin: 80px auto; /* Abstand oben und unten, mit automatischem Margin für die Zentrierung */


}







.in2{
	color: white;
	background-color: black;
	padding: 50px 0 50px 0;
	min-height: 500px;


}

.page-template-Neue-Startseite .tile:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	background-color: #a34c4c;


}


.page-template-Neue-Startseite .tile.active {
	background-color: #870000;
}


.page-template-Neue-Startseite .tile.active:hover {
	background-color: #870000;
}

.content-display {
	margin-top: 20px;
	padding: 10px;

}

#content1 {
	margin-right: 50%;
	text-align: center;
}



#content2 {
text-align: center;
	margin: 20px 20% 0 20%;

}

#content3{
	text-align: center;
	margin-left: 50%;


}


.in3 {
	color: black;
	background-color: white;
	position: relative;
	margin: 38px 0;
	padding: 38px 0;

}

.in3 h2{
	text-align: center;
	margin:  33px 0 66px 0;
	font-size: 3rem;



}
.furthermore {
	margin-top: 26px !important;
	max-width: 1150px;
	margin: 0 auto;
	display: flex !important;
	flex-wrap: wrap;
	font-size: 16px;
	padding: 0;
	text-align: center;
	justify-content: space-between; /* Zentriert die Listenelemente */
}

.furthermore ul {
	padding: 0 !important;
	margin: 0 auto !important; /* Verhindert ungewollte Abstände */
}

.furthermore li{
	margin-left: 20px;
	margin-right: 20px;

}

.furthermore ul li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.furthersc {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 216px;
	flex: 1 1 216px;
	min-width: 216px;
	max-width: 216px; /* Stellt sicher, dass alle Listenelemente gleich breit sind */
	margin-top: 12px;
	margin-bottom: 12px;
	word-wrap: break-word;
	display: block;
}

.furthersc span {
	display: block;
	margin: 0 auto; /* zentriert das Bild */
	font-size: 64px;
	color: black;
	font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif;

}

.furthersc p {
	margin-left: 0;
	text-align: center;


}

.michbtncontainer {
	text-align: center;
	margin: 10px 0;



}
.michbtn {
	background-color: white;
	color: black;
	border: solid black 2px;
	border-radius: 5px;
	padding: 20px 25px;
	margin: 0 auto;
	text-align: center;

}

.michbtn:hover {
	background-color: black; /* Hover-Farbe */
	color: white;
}

.michbtn span {
	display: inline-block;
	transition: transform 0.3s ease; /* Bewegung nur für den Text */
	font-size: 1.3rem;
}


a.michbtn{
	color: black;

}

a.michbtn :visited{
	color: black;

}



.in4{
	justify-content: space-between;
	background-color: black;
	color: white;
	display: flex;
	z-index: 1;

}



.in4txt {
	padding: 20px 50px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 60px;

}

.in4txt h2 {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: bold;
	padding-top:20px;

}


.in4txt p {
font-size: 1.5rem;

}


.in4img img{
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: 50% 50%;
	object-position: 50% 50%;

}



.haibtn {
	background-color: black;
	color: white;
	border: solid white 2px;
	border-radius: 5px;
	padding: 20px 25px;
	margin: 0 auto;
	text-align: center;
	transition: background-color 0.3s ease, transform 0.3s ease;
	position: relative;
	overflow: hidden;

}

.haibtn span {
	display: inline-block;
	transition: transform 0.3s ease; /* Bewegung nur für den Text */
	font-size: 1.3rem;
	z-index: 1;
	position: relative;
}


a.haibtn{
	color: white;

}

a.haibtn :visited{
	color: white;

}

.haibtn::after {
	content: '-▶'; /* Pfeil nach unten */
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s ease;
	font-size: 1em;
	top: 17px;
}


.haibtn:hover span {
	transform: translateX(-10px); /* Nur den Text nach links verschieben */
}


.haibtn:hover::after {
	opacity: 1;
}

a.haibtn{
	color: white;

}



.in5{
	color: black;
	background-color: white;
	z-index: 1;
	margin:20px 0 20px 0;


}


.in5txt {
	padding: 20px 50px;
	margin: 0 auto;
	width: 100%;
	max-width: 1500px;
	text-align: center;

}

.in5txt h2 {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: bold;
	padding-top:20px;

}


.in5txt p {
	font-size: 1.5rem;

}

.in5vid{
	flex: 4 4 864px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
	padding:10px;



}

@media (max-width: 767px) {
	.in5txt {
		padding:0;
		margin: 0 auto;
		width: 100%;
		max-width: 1500px;
		text-align: center;

	}
	.in5vid{
		flex: 4 4 864px;
		border-radius: 5px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
		padding:10px;
	}

	.in6{
		display: block  !important;
	}

	.in6txt h2 p {
		padding: 0px;
		color: white !important;
		font-size: 14px;

	}
	.in6h2{
		color: white;
		font-size: 18px;

	}
.in7 h2{
	color: white;
	font-size: 18px;


}


}

.in6{
	color: white;
	background-color: black;
	display: flex;
	justify-content: space-evenly;
	padding-top: 60px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}


.in6txt{
	padding: 30px;
	

}

.in6map{


}





.in7{
	background-color: black;
	color: white;
	margin: 0;
	padding: 5%;

}

.in7 h2{
	text-align: left;
	padding: 20px 0 20px 20px;
	background-color: #1a1a1a;
	opacity: 10;
	margin: 0 auto;
	border-radius: 10px;
	max-width: 1500px ;

}

.accordion-container {
	text-align: center; /* Zentriert den Container-Inhalt */
	margin: 2% 0 0 0;
	padding-bottom: 2%;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
	background-color: #1a1a1a;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	max-width: 1500px;
}

.accordion:after {
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 13px;
	color: #777;
	float: right;
	margin-left: 5px;
}

.accordion-container .active:after {
	content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion-container .active,.accordion-container .accordion:hover {
	background-color: #ccc;
	color: black;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
	padding: 0 18px;
	background-color: black;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	max-width: 1500px;
	text-align: left;
	margin:0 auto;
}



#scrollToTopButton {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 20px 25px;
	font-size: 24px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1000;
	transition: background-color 0.3s ease, color 0.3s ease;
}

#scrollToTopButton:hover {
background-color: #484848;
	color: white;
}