/*
Theme Name: Zimpel
Theme URI: 
Author: Thorsten
Author URI: 
*/

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('<?php echo get_template_directory_uri(); ?>/img/fonts/myriadpro-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('<?php echo get_template_directory_uri(); ?>/img/fonts/myriadpro-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Layout Einstellungen */
body {
    font-family: 'MyriadPro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    padding: 20px;
    max-width: 70ch;
    margin: 0 auto;
    color: #333;
    background-color: #f9f9f9;
}

strong {
    font-weight: bold; 
}

.site-header {
text-align: center;
}

/* Logo-Zentrierung */
.site-logo {
    text-align: center;
    padding: 40px 0;
max-width: 30px;
height: auto;
margin: 0 auto;
}

figure {
    display: inline-block;
    margin: 0 auto;
}

figcaption, img {
    text-align: center;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: normal;
      padding-top: 0.5rem;
}

h1 {
c
}

.smallh1 {     text-align: center;
    font-size: 1rem;
    line-height: 1.1rem;
    margin-bottom: 0px;
color: #888;
max-width: 80ch;
}

.largeh2 {
    text-align: center;
    font-size: 2.7rem;
    line-height: 3rem;
    margin-bottom: 10px;
}

h2, h3, h4, h5, h6 {
    font-size: 1.3rem;
    padding-top: 1.3rem;
	 max-width: 70ch;
	text-align: left;
	font-weight: bold;
    color: #63aaad;
}

p {
    padding-bottom: 1rem;
}

ul {
    padding-bottom: 1rem;
}

.hidden {
    display: none;
}

ul li {
	margin-left: 1em;
}

/* CTA-Button */
.cta-button-container {
    text-align: center;
    margin: 1.5em 0;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #63aaad; 
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
}

/* Important Text */
.wichtig {
    text-align: center;
    font-size: 2.5rem;
    line-height: 2.5rem;
    color: #63aaad;
}


/* Input Fields and Dropdowns */
select {
    padding: 12px;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    transition: border-color 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

select:focus {
    border-color: #888;
}

/* Lazyload and Image */
.lazyload {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 50px;
    font-size: 0.875rem;
}

/* Check and Cross Lists */
.check,
.nok,
.haken,
.kreuz-nein {
    list-style: none;
    padding-left: 0;
}

.check li,
.nok li,
.haken li,
.kreuz-nein li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.check li::before,
.haken li::before {
    content: "\2713"; 
    color: #489a66;
    position: absolute;
    left: 0;
    top: 0.1em;
    font-weight: bold;
}

.nok li::before,
.kreuz-nein li::before {
    content: "\2717"; 
    color: rgb(121, 19, 19);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-weight: bold;
}

/* Responsivität */
@media (max-width: 768px) {
    body {
        padding: 10px;
        max-width: 100%;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}


/* WordPress Gutenberg Styles for Check and Cross Elements */
.is-style-check,
.is-style-nok,
.is-style-haken,
.is-style-kreuz-nein {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1em;
    position: relative;
    padding-left: 1.5em;
}

.is-style-check::before,
.is-style-haken::before {
    content: "\2713"; /* Checkmark */
    color: #489a66; /* Green */
    position: absolute;
    left: 0;
    top: 0.1em;
    font-weight: bold;
}

.is-style-nok::before,
.is-style-kreuz-nein::before {
    content: "\2717"; /* Cross */
    color: rgb(121, 19, 19); /* Red */
    position: absolute;
    left: 0;
    top: 0.1em;
    font-weight: bold;
}

/* Support for Gutenberg's text block compatibility */
.is-style-check,
.is-style-nok,
.is-style-haken,
.is-style-kreuz-nein {
    display: block; /* Ensure block-level behavior */
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}


/* Base link styles */
a {
    color: #35a29a; /* Normal link color */
    text-decoration: none; /* Remove underline */
}

/* Link styles for different states */
a:link {
    color: #35a29a; /* Unvisited link */
}

a:visited {
    color: #35a29a; /* Visited link */
}

a:hover {
    color: #2a7f73; /* Darker shade for hover */
}

a:active {
    color: #1e5e54; /* Even darker shade when active */
}

.footer-widget li {
list-style: none
}


.dynamic      .dynamic {
            border: 5px solid transparent; /* Invisible border */
            padding: 10px;
            animation: pulse 3s infinite;
            font-size: 16px;
            transition: background-color 1s, color 1s;
            appearance: none; /* Remove default styling */
            background-color: white; /* Default background */
            color: black; /* Default text color */
			margin-bottom: 1em;
        }

        @keyframes pulse {
            0% {
                border-color: transparent;
            }
            50% {
                border-color: #63aaad;
            }
            100% {
                border-color: transparent;
            }
        }


.selection {
background-color: #ccfcf9;
}

.has-base-color {
    color: #35a29a !important;
}

.has-base-color-background-color {
    background-color: #35a29a !important;
}